@import url("modal-2026.css");
@import url("library-netflix.css");
@import url("write-studio.css");
/* Global, responsive, and accessible styling for Narqx */

/* Accessibility: skip-link (hidden until focused via keyboard) */
.skip-link{
  position: fixed;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--primary-600, #2563eb);
  color: #fff;
  font-weight: 900;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  transition: top .18s ease;
}
.skip-link:focus{
  top: 12px;
  outline: 3px solid rgba(96,165,250,.55);
  outline-offset: 2px;
}

:root{
  --bg:#0b1220; --surface:#111827; --surface-2:#0f172a; --text:#e5e7eb; --muted:#9ca3af;
  --primary:#3b82f6; --primary-600:#2563eb; --error:#f87171; --ring:#60a5fa;
  --radius:14px; --radius-sm:10px; --shadow:0 12px 40px rgba(0,0,0,.35);
  --container-sm:420px; --container-md:680px; --container-lg:1024px; --container-xl:1440px;
  --vh: 1vh;
}
*{box-sizing:border-box}
*:focus{outline:none;}
*:not(input):not(textarea):not(select):not([contenteditable="true"]){caret-color:transparent;}
input:focus, textarea:focus, select:focus, [contenteditable="true"]:focus{outline:none; border-color:rgba(96,165,250,.50); box-shadow:0 0 0 3px rgba(96,165,250,.14); caret-color:auto;}
a:focus-visible, button:focus-visible{outline:2px solid rgba(96,165,250,.50); outline-offset:2px; border-radius:6px;}
img, svg, span.brand-badge, .brand, .brand-hero, [aria-hidden="true"]{pointer-events:auto; -webkit-user-select:none; user-select:none;}
.brand-subtitle{-webkit-user-select:none; user-select:none;}
img:focus, svg:focus, .brand-badge:focus, .brand:focus, [aria-hidden="true"]:focus{outline:none !important; box-shadow:none !important;}
html,body{height:100%}
html{ overflow-y: scroll; scrollbar-gutter: stable; }
body{
  margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Arial,"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  background: var(--bg);
  color:var(--text); -webkit-font-smoothing:antialiased;
}

*{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
*::-webkit-scrollbar{ width:7px; height:7px; }
*::-webkit-scrollbar-track{ background: transparent; }
*::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.16); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.26); border-color: transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:active{ background: rgba(96,165,250,.32); border-color: transparent; background-clip: padding-box; }
*::-webkit-scrollbar-corner{ background: transparent; }

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background: radial-gradient(1200px 800px at 80% -20%,#1f2937,transparent), var(--bg);
  pointer-events:none;
}

[hidden]{display:none !important;}

.is-hidden{display:none !important;}

html.modal-open{overflow:hidden;}

/* Shell layout (header, main, footer) */
.wrapper{min-height:100vh; min-height:100dvh; display:grid; grid-template-rows:auto 1fr auto;}
.header,.footer{background:transparent}
.container{width:100%; max-width:var(--container-sm); margin:48px auto; padding:0 20px;}
.app-layout main > .container{margin:0 auto; padding:18px 20px;}
@media(min-width:640px){.container{max-width:var(--container-md)}}
@media(min-width:1024px){.container{max-width:var(--container-lg)}}
@media(min-width:1600px){.container{max-width:var(--container-xl)}}

.wrapper[data-guard] .footer .container{ margin:0 auto; padding:18px 20px; }
.wrapper[data-guard] .footer{ padding:0; }
body[data-guard="guestOnly"] .footer{
  background: rgba(11,18,32,.45);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,.04);
}

.app-layout .footer{ display:none; }

.app-layout main{ height: 100%; }
.app-layout main > .container{
  height: 100%;
  min-height: 0;
  display:flex;
  flex-direction:column;
}

@media(min-width:981px){
  body.app-layout{ height: auto; overflow: visible; }
  .app-layout main{ overflow: visible; }
  .app-layout main > .container{ overflow: visible; }
}

/* Main content card */
.card{
  background: linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.00)), var(--surface);
  border:1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.03);
  padding: 28px;
}
.card h1,.card h2{margin:0 0 10px}
.subtitle{color:var(--muted); margin:0 0 20px}

/* Public profile card — immersive edge-to-edge layout */
.card.profile-card{
  padding: 0;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.02) 0%, var(--surface) 30%);
}
.card.profile-card .profile-top{ padding-bottom: 4px; }
.card.profile-card .profile-header{ border-radius: 0; border:none; border-bottom: 1px solid rgba(255,255,255,.05); }
.card.profile-card .profile-stats-row{ padding-left: 18px; padding-right: 18px; }
.card.profile-card .profile-tabs{ margin-left: 18px; margin-right: 18px; }
.card.profile-card .profile-panel{ padding: 0 18px 24px; }
.card.profile-card .user-social-panel{ margin-left: 18px; margin-right: 18px; }
.card.profile-card #user-status{ padding: 18px 18px 0; }

/* ── Private profile — unique & incredible redesign ── */
#view-profile .card.profile-card{
  position: relative;
  background:
    radial-gradient(ellipse 600px 200px at 15% 0%, rgba(96,165,250,.06), transparent 70%),
    radial-gradient(ellipse 500px 200px at 85% 100%, rgba(139,92,246,.05), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.02) 0%, var(--surface) 35%);
}
#view-profile .card.profile-card::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius: 21px;
  background: linear-gradient(135deg, rgba(96,165,250,.18), rgba(139,92,246,.12), rgba(96,165,250,.08));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
  pointer-events:none;
  z-index:0;
  opacity: .55;
  transition: opacity .4s ease;
}
#view-profile .card.profile-card:hover::before{ opacity: .85; }

#view-profile .card.profile-card > h2{
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 20px 22px 0;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  background: linear-gradient(135deg, rgba(96,165,250,.85), rgba(139,92,246,.75));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

#view-profile .profile-top{ position: relative; z-index: 1; }

#view-profile .profile-view-public-btn{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.65) !important;
}
#view-profile .profile-view-public-btn:hover{
  background: rgba(96,165,250,.12) !important;
  border-color: rgba(96,165,250,.25) !important;
  color: rgba(96,165,250,.9) !important;
  box-shadow: 0 0 12px rgba(96,165,250,.12) !important;
}

#view-profile #btn-profile-edit{
  height: 36px;
  min-width: 100px;
  background: linear-gradient(135deg, rgba(96,165,250,.15), rgba(139,92,246,.10));
  border: 1px solid rgba(96,165,250,.20);
  color: rgba(255,255,255,.92);
}
#view-profile #btn-profile-edit:hover{
  background: linear-gradient(135deg, rgba(96,165,250,.22), rgba(139,92,246,.16));
  border-color: rgba(96,165,250,.35);
  box-shadow: 0 4px 20px rgba(96,165,250,.15);
}

#view-profile .profile-stat-icon{
  display:flex !important;
  align-items:center;
  justify-content:center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: rgba(96,165,250,.08);
  border: 1px solid rgba(96,165,250,.10);
  margin-bottom: 4px;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
#view-profile .profile-stat-icon svg{
  width: 15px; height: 15px;
  color: rgba(96,165,250,.6);
  transition: color .2s ease;
}
#view-profile .profile-stat:hover .profile-stat-icon{
  background: rgba(96,165,250,.14);
  border-color: rgba(96,165,250,.22);
  transform: scale(1.08);
}
#view-profile .profile-stat:hover .profile-stat-icon svg{
  color: rgba(96,165,250,.9);
}

#view-profile .profile-tabs{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#view-profile .profile-tabs::-webkit-scrollbar{ display:none; }
#view-profile .profile-tab{ flex: 0 0 auto; white-space: nowrap; min-width: 0; padding: 10px 14px; font-size: 13px; }
@media(min-width:600px){ #view-profile .profile-tab{ flex:1; } }

#view-profile .profile-panel .settings-card{
  background: rgba(255,255,255,.015);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 14px;
  padding: 18px 16px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
#view-profile .profile-panel .settings-card h3{
  font-size: 14px;
  background: linear-gradient(135deg, #fff 70%, rgba(96,165,250,.6));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

#view-profile .profile-hidden label{
  color: rgba(96,165,250,.75);
  font-weight: 600;
  letter-spacing: .2px;
}

#view-profile .profile-avatar{
  box-shadow:
    0 0 0 3px rgba(96,165,250,.25),
    0 0 16px rgba(96,165,250,.08),
    0 12px 32px rgba(0,0,0,.45);
}
#view-profile .profile-avatar:hover{
  box-shadow:
    0 0 0 4px rgba(96,165,250,.40),
    0 0 24px rgba(96,165,250,.16),
    0 0 40px rgba(139,92,246,.08),
    0 12px 32px rgba(0,0,0,.5);
}

#view-profile .profile-display{
  background: linear-gradient(135deg, #fff 45%, rgba(96,165,250,.70), rgba(139,92,246,.55));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-size: 26px;
}

#view-profile .profile-handle{
  color: rgba(96,165,250,.50);
  font-weight: 500;
}

#view-profile .profile-meta-item{
  background: rgba(96,165,250,.04);
  border-color: rgba(96,165,250,.08);
}
#view-profile .profile-meta-item:hover{
  background: rgba(96,165,250,.09);
  border-color: rgba(96,165,250,.18);
  color: #fff;
}

#view-profile .profile-stats-row{
  background: linear-gradient(135deg, rgba(96,165,250,.03), rgba(139,92,246,.02));
  border: 1px solid rgba(96,165,250,.08);
}

#view-profile .profile-stat{ flex:1; }

#view-profile .profile-library-head{
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  margin-bottom: 12px;
}
#view-profile .profile-library-title{
  font-size: 15px;
  font-weight: 800;
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(96,165,250,.55));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

#view-profile .profile-panel .profile-users{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#view-profile .wall-list .wall-item:first-child{
  padding-top: 4px;
}

@keyframes privateProfileShimmer{
  0%{ background-position: -200% center; }
  100%{ background-position: 200% center; }
}
#view-profile .card.profile-card::after{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height: 1px;
  background: linear-gradient(90deg, transparent 20%, rgba(96,165,250,.25) 40%, rgba(139,92,246,.20) 60%, transparent 80%);
  background-size: 200% 100%;
  animation: privateProfileShimmer 6s ease-in-out infinite;
  z-index: 10;
  pointer-events: none;
}

#view-profile .profile-header::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 40%, rgba(11,18,32,.55) 100%);
  pointer-events: none;
}
#view-profile .profile-header-fallback{
  background: linear-gradient(135deg, rgba(96,165,250,.12) 0%, rgba(139,92,246,.10) 50%, rgba(96,165,250,.06) 100%) !important;
}

#view-profile .profile-tab[aria-selected="true"]{
  background: linear-gradient(135deg, rgba(96,165,250,.14), rgba(139,92,246,.08));
  box-shadow: 0 2px 12px rgba(96,165,250,.12), inset 0 -2px 0 rgba(96,165,250,.30);
  color: #fff;
}

#view-profile .profile-upload-overlay{
  border-color: rgba(96,165,250,.20);
  background: rgba(11,18,32,.50);
}
#view-profile .profile-upload-overlay:hover{
  border-color: rgba(96,165,250,.40);
  background: rgba(11,18,32,.65);
  box-shadow: 0 0 12px rgba(96,165,250,.12);
}

#view-profile .profile-bio{
  color: rgba(255,255,255,.82);
}

#view-profile .hint{
  color: rgba(255,255,255,.40);
}

/* Forms and buttons */
label{display:block; margin:12px 0 6px; color:#93c5fd; font-size:13px}
input,button,select,textarea{font:inherit}
.input{
  width:100%; padding:12px 14px; border-radius:12px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  color:var(--text); outline:none; font-size:14px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.input:focus{border-color:rgba(96,165,250,.50); box-shadow:0 0 0 3px rgba(96,165,250,.14);}
.input::placeholder{ color: rgba(255,255,255,.30); }

/* ── Global select styling (dark theme) ── */
select.input{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: rgba(255,255,255,.05);
  color: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 12px 38px 12px 14px;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='rgba(255,255,255,.45)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 7px;
}
select.input:hover{
  border-color: rgba(255,255,255,.20);
  background-color: rgba(255,255,255,.07);
}
select.input:focus{
  outline: none;
  border-color: rgba(96,165,250,.50);
  box-shadow: 0 0 0 3px rgba(96,165,250,.14);
  background-color: rgba(255,255,255,.07);
}
select.input option{
  background: #151a28;
  color: rgba(255,255,255,.88);
  padding: 10px 14px;
}
select.input option:checked{
  background: rgba(96,165,250,.18);
  color: #fff;
}
select.input:disabled{
  opacity: .45;
  cursor: not-allowed;
}

.field{margin-bottom:12px}
.label-row{display:flex; align-items:center; justify-content:flex-start; gap:8px; margin:12px 0 6px}
.label-row label{margin:0; flex:0 0 auto}
.info-btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.88);
  width:18px;
  height:18px;
  border-radius:999px;
  padding:0;
  cursor:pointer;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .15s ease, border-color .15s ease, transform .05s ease;
}
.info-btn:hover{background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.26)}
.info-btn:active{background:rgba(255,255,255,.12); border-color:rgba(96,165,250,.65); box-shadow:0 0 0 2px rgba(96,165,250,.32)}
.info-btn:focus{outline:none}
.info-btn:focus-visible{box-shadow:0 0 0 2px rgba(96,165,250,.40)}
.info-btn .info-icon{width:12px; height:12px; display:block; overflow:visible}
.field-help{margin-top:6px}
.pass-rules{margin-top:8px; padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04)}
.pass-rule{display:flex; align-items:center; gap:8px; margin:4px 0}
.pass-bad{color:#ff6b6b}
.pass-ok{color:#39d98a}
.auth-card{max-width:560px; margin:0 auto; width:100%}
.auth-card.reg-card{max-width:920px}
.auth-card .btn{margin-top:14px}

.checkbox-row{display:flex; gap:10px; align-items:center; margin-top:10px}
.checkbox-row input[type="checkbox"]{flex-shrink:0}
.checkbox-label{color:rgba(255,255,255,.86); font-size:13px; line-height:1.4}
.link-btn{appearance:none; background:transparent; border:none; padding:0; color:#93c5fd; cursor:pointer; text-decoration:underline; font:inherit}
.link-btn:hover{color:#bfdbfe}

.notif-inline-link{
  appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  color: #93c5fd;
  cursor: pointer;
  text-decoration: underline;
  font: inherit;
  font-weight: 400;
}
.notif-inline-link:hover{ color:#bfdbfe; }

button.btn.is-loading{position:relative; opacity:.92; pointer-events:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; overflow:hidden;}
button.btn.is-loading::before{
  content:"";
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.55);
  border-top-color:#fff;
  flex-shrink:0;
  animation:spin .8s linear infinite;
}
button.btn.is-success{background:#16a34a}
@keyframes spin{to{transform:rotate(360deg)}}

a.btn.is-disabled{opacity:.55; cursor:not-allowed}
.btn{
  display:inline-flex; align-items:center; justify-content:center; width:100%;
  padding:12px 16px; border:none; border-radius:12px;
  background:var(--primary); color:#fff; font-weight:700; cursor:pointer;
  text-decoration:none;
  transition:transform .08s ease, background .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.btn.small{ padding:8px 10px; font-size:12px; line-height:1.1; border-radius:12px; }
.btn.small .btn-icon{ width:14px; height:14px; margin-right:6px; }
.btn:hover{background:var(--primary-600); box-shadow: 0 4px 16px rgba(59,130,246,.25);}
.btn:active{transform:translateY(1px); box-shadow: none;}
.btn.secondary{background:rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10);}
.btn.secondary:hover{background:rgba(255,255,255,.10); border-color: rgba(255,255,255,.16); box-shadow: 0 4px 16px rgba(0,0,0,.20);}
.btn.danger{background:rgba(239,68,68,.15); color:#ef4444; border:1px solid rgba(239,68,68,.25)}
.btn.danger:hover{background:rgba(239,68,68,.25); box-shadow: 0 4px 16px rgba(220,38,38,.15);}
.btn:focus{outline:none;}
.btn:focus-visible{box-shadow:0 0 0 3px rgba(96,165,250,.35); outline:none;}
.btn.secondary:focus-visible{box-shadow:0 0 0 3px rgba(96,165,250,.25);}
.btn:disabled{opacity:.5; cursor:not-allowed; box-shadow:none;}
.btn.icon{width:auto; min-width:0; padding:8px; border-radius:12px}
.btn.icon svg{width:18px; height:18px; display:block}
.row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.row.gap-6{gap:6px}
.row.gap-10{gap:10px}
.row.justify-end{ justify-content: flex-end; }

.mt-10{margin-top:10px}

.cover-req-list{margin:10px 0 0 18px; line-height:1.6}

.modal-form-row{margin-top:12px}

.invites-card-modern{ overflow:hidden; }

.invites-hero-2026{
  position:relative; display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:28px 20px 18px; margin:-20px -20px 0;
  background:linear-gradient(160deg,rgba(124,92,252,.14) 0%,rgba(167,139,250,.06) 50%,transparent 100%);
  border-bottom:1px solid rgba(124,92,252,.10);
}
.invites-hero-glow{
  position:absolute; top:-40px; left:50%; transform:translateX(-50%);
  width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle,rgba(124,92,252,.18) 0%,transparent 70%);
  pointer-events:none;
}
.invites-hero-icon-2026{
  width:56px; height:56px; border-radius:16px;
  background:linear-gradient(135deg,rgba(124,92,252,.30),rgba(167,139,250,.12));
  display:flex; align-items:center; justify-content:center;
  color:var(--accent,#7c5cfc); margin-bottom:12px;
  box-shadow:0 4px 24px rgba(124,92,252,.20);
}
.invites-hero-title{ margin:0 0 4px; font-size:20px; font-weight:800; }
.invites-hero-sub{ margin:0; font-size:13px; color:rgba(255,255,255,.50); max-width:340px; }

.invites-remaining-showcase{
  display:flex; flex-direction:column; align-items:center;
  padding:20px 16px 16px; margin-top:4px;
}
.invites-remaining-number{
  font-size:42px; font-weight:900; letter-spacing:-.03em; line-height:1;
  background:linear-gradient(135deg,var(--accent,#7c5cfc),#a78bfa);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.invites-remaining-label{
  font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  color:rgba(255,255,255,.40); margin-top:6px;
}

.invites-tabs{display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; justify-content:center}
.invites-tabs .btn{width:auto; min-width:140px; border-radius:999px; font-size:13px; font-weight:600}
.invites-tab.active{background:var(--accent,#7c5cfc); color:#fff; border-color:var(--accent,#7c5cfc)}
.invites-panel{margin-top:14px}
.invites-panel-content{ margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.06); }
.invites-admin-tabs{margin-top:10px}
.invites-admin-panel{margin-top:12px}
.invites-actions{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-top:10px}

.invites-generate-wrap{
  display:flex; justify-content:center; margin-bottom:18px;
}
.invites-generate-btn-2026{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  min-width:240px; padding:12px 28px;
  font-size:15px; font-weight:700; border-radius:14px;
  background:linear-gradient(135deg,var(--accent,#7c5cfc),#a78bfa);
  color:#fff; border:none; cursor:pointer;
  box-shadow:0 4px 20px rgba(124,92,252,.30);
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.invites-generate-btn-2026:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 28px rgba(124,92,252,.40);
}
.invites-generate-btn-2026:active{
  transform:translateY(0); opacity:.9;
}
.invites-generate-btn-2026:disabled{
  opacity:.45; cursor:not-allowed; transform:none;
  box-shadow:0 2px 10px rgba(124,92,252,.15);
}

.invites-status-2026{
  min-height:20px; text-align:center;
  font-size:13px; font-weight:600; color:rgba(255,255,255,.60);
  margin-bottom:14px; transition:opacity .2s ease;
}
.invites-status-2026:empty{ opacity:0; }
.admin-statusbar{min-height:18px; margin-top:10px; color:rgba(255,255,255,.72); font-size:12px}
.admin-statusbar:empty{opacity:.0}

.invites-bulk-controls{justify-content:center}
.invites-bulk-controls .input{max-width:140px}
.invites-bulk-controls .btn{width:auto; min-width:180px}
.invites-actions .btn{width:auto; min-width:220px}
.invites-actions .hint{margin-top:0}

.invites-admin-grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; margin-top:12px}
@media(max-width:900px){.invites-admin-grid{grid-template-columns:1fr}}
.invites-admin-card{border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.02); border-radius:14px; padding:14px 16px}
.invites-admin-card h4{margin-top:0}

.admin-table-header{display:flex; align-items:center; justify-content:space-between; gap:12px}
.admin-table-title{font-weight:800; font-size:13px; color:rgba(255,255,255,.88)}

.admin-user-meta{margin-top:12px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.02); border-radius:14px; padding:12px 14px}
.admin-user-meta-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px}
@media(max-width:900px){.admin-user-meta-grid{grid-template-columns:1fr}}
.admin-user-meta-label{font-size:11px; color:rgba(255,255,255,.65)}
.admin-user-meta-value{font-size:13px; font-weight:700}
.admin-user-meta-item{min-width:0}

.invites-user-lookup{ display:flex; flex-direction:column; gap:12px; margin-top: 10px; }
.invites-user-lookup-row{ display:grid; grid-template-columns: 1fr auto; gap:12px; align-items:center; }
.invites-user-actions-row{ display:grid; grid-template-columns: 1fr; gap:12px; }
.invites-user-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.invites-user-actions .btn{ width:auto; min-width: 200px; }

.admin-tabs{display:flex; gap:5px; flex-wrap:wrap; margin-top:16px; margin-bottom:18px; padding:0}
.admin-tabs .btn[hidden]{display:none}
.admin-tabs .btn{width:auto; min-width:0; padding:5px 11px; font-size:11px; line-height:1.35; border-radius:8px; font-weight:600; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.025); color:rgba(255,255,255,.5); transition:all .18s ease; white-space:nowrap; cursor:pointer; letter-spacing:.01em}
.admin-tabs .btn:hover{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); color:rgba(255,255,255,.9)}
.admin-tabs .btn:focus-visible{outline:2px solid rgba(86,156,255,.7); outline-offset:1px}
.admin-tab.active{background:rgba(59,130,246,.14); border-color:rgba(59,130,246,.4); color:#93c5fd; font-weight:700; box-shadow:0 0 12px rgba(59,130,246,.08)}
@media(max-width:640px){.admin-tabs{gap:4px} .admin-tabs .btn{padding:4px 8px; font-size:10.5px}}

.admin-panel{margin-top:20px; position:relative}
@media(prefers-reduced-motion:no-preference){
  .admin-panel{animation:adminPanelIn .35s cubic-bezier(.22,1,.36,1) both}
  @keyframes adminPanelIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)}}
}

/* Admin watermark logo for empty areas */
.admin-watermark{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none; user-select:none; z-index:0;
}
.admin-watermark-img{
  width:clamp(100px, 18vw, 200px); height:auto;
  opacity:.04; filter:grayscale(1);
}
.admin-panel>*:not(.admin-watermark){ position:relative; z-index:1; }
.card.admin-panel{padding:24px 26px; border-color:rgba(255,255,255,.07); background:linear-gradient(168deg,rgba(255,255,255,.03) 0%,rgba(255,255,255,.008) 100%); border-radius:18px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-shadow:0 4px 24px rgba(0,0,0,.12); overflow:hidden}
@media(max-width:640px){.card.admin-panel{padding:18px 16px; border-radius:14px}}
.admin-panel h3{margin:0 0 8px; font-size:17px; font-weight:900; letter-spacing:-.02em; background:linear-gradient(135deg,#f1f5f9 0%,#93c5fd 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text}
.admin-panel>.hint:first-of-type{margin-bottom:16px}

.admin-cell-title{font-weight:800}
.admin-cell-sub{margin-top:2px}

.admin-book-link,
.admin-book-link:visited{color:rgba(255,255,255,.92); text-decoration:underline; text-decoration-color:rgba(147,197,253,.55)}
.admin-book-link:hover{color:#bfdbfe; text-decoration-color:rgba(191,219,254,.85)}
.admin-book-link:focus-visible{outline:2px solid rgba(86,156,255,.7); outline-offset:2px; border-radius:6px}

.admin-panel .row{gap:10px; margin-top:16px; align-items:center}
.admin-panel .row .btn{width:auto; min-width:130px; font-size:13px; border-radius:12px; transition:all .2s cubic-bezier(.4,0,.2,1)}
.admin-panel .row .btn:not(.icon):not(.admin-refresh-icon-btn){padding:10px 20px; letter-spacing:.01em}
.admin-panel .row .input{width:auto; min-width:200px; flex:1}

/* Admin action bar — bottom-of-panel button strip */
.admin-action-bar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:20px; padding-top:16px; border-top:1px solid rgba(255,255,255,.06)}
.admin-action-bar .btn{width:auto; min-width:140px; font-size:13px; border-radius:12px}

/* Admin search combo — input + icon button inline */
.admin-search-combo{display:flex; gap:8px; align-items:center; margin-top:14px}
.admin-search-combo .input{flex:1; min-width:0}
.admin-search-combo .admin-refresh-icon-btn{flex-shrink:0}

/* Admin statusbar */
.admin-statusbar{display:flex; align-items:center; gap:8px; margin-top:10px; padding:8px 14px; border-radius:10px; font-size:12.5px; color:rgba(255,255,255,.65); background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.05); transition:all .25s ease; min-height:0}
.admin-statusbar:empty,.admin-statusbar.is-hidden{display:none}
.admin-statusbar.is-success{background:rgba(34,197,94,.06); border-color:rgba(34,197,94,.18); color:rgba(34,197,94,.9)}
.admin-statusbar.is-error{background:rgba(239,68,68,.06); border-color:rgba(239,68,68,.18); color:rgba(248,113,113,.9)}

@media(max-width:640px){
  .admin-panel .row{gap:8px}
  .admin-panel .row .input{min-width:100%; flex:1 1 100%}
  .admin-panel .row .btn{min-width:100%}
  .admin-action-bar{flex-direction:column}
  .admin-action-bar .btn{width:100%}
  .admin-search-combo{flex-wrap:wrap}
  .admin-search-combo .input{min-width:100%; flex:1 1 100%}
  .admin-search-combo .admin-refresh-icon-btn{margin-left:auto}
}

/* Danger zone panel */
.card.admin-panel--danger{border-color:rgba(239,68,68,.18); background:linear-gradient(168deg,rgba(239,68,68,.04) 0%,rgba(255,255,255,.005) 100%); box-shadow:0 4px 24px rgba(239,68,68,.06)}
.admin-panel--danger h3{background:linear-gradient(135deg,#fca5a5 0%,#f87171 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text}
.admin-panel--danger h4{margin:18px 0 6px; font-size:14px; font-weight:700; color:rgba(255,255,255,.82)}
.admin-panel--danger .writer-divider{background:rgba(239,68,68,.12); margin:20px 0}
.admin-panel--danger .btn.danger{font-weight:700; letter-spacing:.02em; text-transform:uppercase; font-size:12px; padding:10px 22px}

/* Admin form polish */
.admin-panel>label{display:block; font-size:12.5px; font-weight:600; color:rgba(255,255,255,.6); margin:12px 0 4px; letter-spacing:.02em}
.admin-panel>.input{margin-bottom:2px}
.admin-panel .checkbox-row{margin:14px 0 4px; padding:12px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.02); transition:all .2s ease}
.admin-panel .checkbox-row:hover{border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.035)}
.admin-panel .form-group{margin-bottom:4px}
.admin-panel .form-group label{display:block; font-size:12.5px; font-weight:600; color:rgba(255,255,255,.6); margin-bottom:5px; letter-spacing:.02em}

/* Admin section headings */
.admin-panel h4{margin:18px 0 6px; font-size:14px; font-weight:700; color:rgba(255,255,255,.82)}

/* Admin setup section */
.admin-setup-section{margin-bottom:4px; padding:16px 18px; border:1px solid rgba(255,255,255,.05); border-radius:14px; background:rgba(255,255,255,.015)}
.admin-setup-section h4{margin-top:0}

/* Admin panel dividers */
.admin-panel .writer-divider{background:rgba(255,255,255,.06); margin:18px 0}

.admin-kpi-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin-top:18px}
@media(max-width:900px){.admin-kpi-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}}
@media(max-width:520px){.admin-kpi-grid{grid-template-columns:1fr}}
.admin-kpi{border:1px solid rgba(255,255,255,.06); background:linear-gradient(135deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.012) 100%); border-radius:14px; padding:16px 18px; transition:all .25s cubic-bezier(.4,0,.2,1); position:relative; overflow:hidden; cursor:default}
.admin-kpi::before{content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(59,130,246,.04) 0%,transparent 60%); opacity:0; transition:opacity .25s ease}
.admin-kpi:hover{border-color:rgba(59,130,246,.2); box-shadow:0 4px 20px rgba(0,0,0,.18), 0 0 0 1px rgba(59,130,246,.06); transform:translateY(-1px)}
.admin-kpi:hover::before{opacity:1}
.admin-kpi-title{color:rgba(255,255,255,.52); font-size:11px; letter-spacing:.4px; text-transform:uppercase; font-weight:700}
.admin-kpi-value{font-weight:900; font-size:26px; margin-top:6px; letter-spacing:-.03em; background:linear-gradient(135deg,#e2e8f0 0%,#93c5fd 50%,#a78bfa 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; background-size:200% 100%; animation:kpiShimmer 4s ease-in-out infinite}
@keyframes kpiShimmer{0%,100%{background-position:0% 50%} 50%{background-position:100% 50%}}

/* Admin charts */
.admin-charts-row{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; margin-top:18px}
@media(max-width:800px){.admin-charts-row{grid-template-columns:1fr}}
.admin-chart-card{border:1px solid rgba(255,255,255,.06); background:linear-gradient(135deg,rgba(255,255,255,.035) 0%,rgba(255,255,255,.01) 100%); border-radius:14px; padding:18px 20px; transition:all .25s cubic-bezier(.4,0,.2,1)}
.admin-chart-card:hover{border-color:rgba(59,130,246,.15); box-shadow:0 4px 20px rgba(0,0,0,.12)}
.admin-chart-header{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; flex-wrap:wrap}
.admin-chart-header h4{margin:0; font-size:13px; font-weight:700; color:rgba(255,255,255,.85)}
.admin-chart-range{display:flex; gap:4px}
.admin-chart-range .btn.xs{padding:3px 10px; font-size:11px; min-width:0; border-radius:8px}
.admin-chart-range .btn.xs.active{background:rgba(99,102,241,.7); border-color:rgba(99,102,241,.9); color:#fff}
.admin-chart-card canvas{width:100%; height:auto; display:block}

/* Admin info tooltip */
.admin-info-tip{display:inline-flex; align-items:center; justify-content:center; background:none; border:none; color:rgba(255,255,255,.45); cursor:pointer; padding:0; margin-left:6px; vertical-align:middle; position:relative; transition:color .15s}
.admin-info-tip:hover,.admin-info-tip:focus{color:rgba(255,255,255,.85); outline:none}
.admin-info-tip[data-show-tooltip]::after{content:attr(data-tooltip); position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%); background:rgba(17,24,39,.96); color:rgba(255,255,255,.92); font-size:12px; font-weight:400; line-height:1.45; padding:8px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.12); white-space:normal; width:max-content; max-width:280px; z-index:50; pointer-events:none; box-shadow:0 4px 16px rgba(0,0,0,.35)}

.admin-table-wrap{overflow:auto; margin-top:16px; border:1px solid rgba(255,255,255,.06); border-radius:14px; background:rgba(0,0,0,.14); box-shadow:0 2px 12px rgba(0,0,0,.1)}
.admin-table{width:100%; border-collapse:separate; border-spacing:0; min-width:1020px}
.admin-table-min-520{min-width:520px}
.admin-table-min-720{min-width:720px}
.admin-table-min-880{min-width:880px}
.admin-table-min-1100{min-width:1100px}
.admin-table thead th{position:sticky; top:0; background:linear-gradient(180deg,rgba(17,24,39,.99) 0%,rgba(15,23,42,.97) 100%); text-align:left; font-size:11px; color:rgba(255,255,255,.48); padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08); text-transform:uppercase; letter-spacing:.5px; font-weight:700}
.admin-table tbody td{padding:11px 14px; border-bottom:1px solid rgba(255,255,255,.04); vertical-align:top; font-size:12.5px; color:rgba(255,255,255,.82)}
.admin-table tbody tr{transition:all .15s ease}
.admin-table tbody tr:hover{background:rgba(59,130,246,.04)}
.admin-chip{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.10); font-size:11.5px; font-weight:600; letter-spacing:.2px}
.admin-chip.ok{border-color:rgba(34,197,94,.30); color:rgba(34,197,94,.90); background:rgba(34,197,94,.06)}
.admin-chip.warn{border-color:rgba(251,191,36,.30); color:rgba(251,191,36,.90); background:rgba(251,191,36,.06)}
.admin-chip.bad{border-color:rgba(248,113,113,.30); color:rgba(248,113,113,.90); background:rgba(248,113,113,.06)}

.admin-uid-row{display:inline-flex; align-items:center; gap:4px}
.admin-uid-copy{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; padding:0; border:none; background:transparent;
  color:rgba(255,255,255,.35); cursor:pointer; border-radius:4px;
  transition:color .15s, background .15s; flex-shrink:0;
}
.admin-uid-copy:hover{color:rgba(255,255,255,.75); background:rgba(255,255,255,.08)}
.admin-uid-copy:active{color:#fff}
.admin-coins-cell{
  display:inline-flex; align-items:center; gap:4px;
  font-weight:700; font-size:12px; color:rgba(251,191,36,.90);
}
.admin-book-actions{display:flex; gap:6px; align-items:center; justify-content:flex-end}
.admin-action-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; padding:0; border:1px solid rgba(255,255,255,.08);
  border-radius:8px; background:rgba(255,255,255,.03); cursor:pointer;
  transition:all .15s ease; text-decoration:none; color:rgba(255,255,255,.50);
}
.admin-action-btn:hover{background:rgba(255,255,255,.08); color:rgba(255,255,255,.85)}
.admin-action-btn--read{color:rgba(99,102,241,.80); border-color:rgba(99,102,241,.15)}
.admin-action-btn--read:hover{background:rgba(99,102,241,.10); color:rgba(99,102,241,1); border-color:rgba(99,102,241,.30)}
.admin-action-btn--delete{color:rgba(251,191,36,.70); border-color:rgba(251,191,36,.12)}
.admin-action-btn--delete:hover{background:rgba(251,191,36,.08); color:rgba(251,191,36,1); border-color:rgba(251,191,36,.25)}
.admin-action-btn--danger{color:rgba(248,113,113,.70); border-color:rgba(248,113,113,.12)}
.admin-action-btn--danger:hover{background:rgba(248,113,113,.08); color:rgba(248,113,113,1); border-color:rgba(248,113,113,.25)}
.admin-action-btn:disabled{opacity:.35; pointer-events:none}
.admin-actions{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.admin-actions .btn{width:auto; min-width:110px; font-size:12.5px}
.admin-actions .btn.icon{min-width:0}
.admin-refresh-icon-btn,
.admin-details-icon-btn{
  width:36px !important; height:36px; min-width:0 !important;
  padding:0 !important; display:inline-grid; place-items:center;
  border-radius:10px; flex-shrink:0; transition:all .2s cubic-bezier(.4,0,.2,1);
}
.admin-refresh-icon-btn:hover,
.admin-details-icon-btn:hover{background:rgba(59,130,246,.1); border-color:rgba(59,130,246,.25); color:#93c5fd; transform:scale(1.05)}
.admin-refresh-icon-btn:active,
.admin-details-icon-btn:active{transform:scale(.95)}
.admin-refresh-icon-btn svg,
.admin-details-icon-btn svg{ pointer-events:none; }

/* User details modal */
.ud-grid{
  display:grid; grid-template-columns: auto 1fr; gap:6px 14px;
  align-items:baseline; margin-bottom:12px;
}
.ud-label{
  font-size:12px; font-weight:700; color:rgba(255,255,255,.45);
  text-transform:uppercase; letter-spacing:.4px; white-space:nowrap;
  padding:4px 0;
}
.ud-value{
  font-size:13px; color:rgba(255,255,255,.9);
  word-break:break-all; padding:4px 0;
}
.ud-uid{ font-family:monospace; font-size:11px; color:rgba(255,255,255,.55); }
.ud-section{ margin-top:8px; padding-top:10px; border-top:1px solid rgba(255,255,255,.06); }
.ud-section-title{ font-size:12px; font-weight:700; color:rgba(255,255,255,.5); margin-bottom:6px; text-transform:uppercase; letter-spacing:.3px; }
.ud-book-item{
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:rgba(255,255,255,.82);
  padding:4px 0;
}

/* Admin news header */
.admin-news-header-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.admin-news-header-row h3{ margin:0; }
.admin-news-header-row .btn{ width:auto; min-width:0; display:inline-flex; align-items:center; font-size:13px; }
.admin-pager{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:20px; padding-top:16px; border-top:1px solid rgba(255,255,255,.05)}
.admin-pager .btn{width:auto; min-width:120px; font-size:12.5px; border-radius:10px}
.admin-pager .hint{font-size:12px; color:rgba(255,255,255,.45); font-variant-numeric:tabular-nums; font-weight:600}

/* Messages */
.error{color:var(--error); min-height:20px; margin-top:8px}

/* ── Unified inline banner (error / info / warning / success) ──────────── */
.app-banner{
  display:flex; align-items:flex-start; gap:10px;
  margin-top:14px; padding:12px 16px;
  border-radius:10px;
  font-size:13.5px; line-height:1.45;
}
@media(prefers-reduced-motion:no-preference){
  .app-banner{ animation: appBannerSlideIn .35s cubic-bezier(.22,1,.36,1) both; }
}
.app-banner[hidden]{ display:none; }
.app-banner-icon-slot{ flex-shrink:0; display:flex; }
.app-banner-icon{ width:20px; height:20px; margin-top:1px; }
.app-banner-text{ flex:1; }

/* Variant: error (default) */
.app-banner--error{
  background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.35); color:#fca5a5;
}
.app-banner--error .app-banner-icon{ color:#f87171; }

/* Variant: info */
.app-banner--info{
  background:rgba(96,165,250,.12); border:1px solid rgba(96,165,250,.30); color:#93c5fd;
}
.app-banner--info .app-banner-icon{ color:#60a5fa; }

/* Variant: warning */
.app-banner--warning{
  background:rgba(251,191,36,.12); border:1px solid rgba(251,191,36,.30); color:#fcd34d;
}
.app-banner--warning .app-banner-icon{ color:#fbbf24; }

/* Variant: success */
.app-banner--success{
  background:rgba(74,222,128,.12); border:1px solid rgba(74,222,128,.30); color:#86efac;
}
.app-banner--success .app-banner-icon{ color:#4ade80; }

@keyframes appBannerSlideIn{
  from{ opacity:0; transform:translateY(-8px); }
  to{ opacity:1; transform:translateY(0); }
}
.app-banner--shake{
  animation: appBannerShake .45s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes appBannerShake{
  10%,90%{ transform:translateX(-2px); }
  20%,80%{ transform:translateX(3px); }
  30%,50%,70%{ transform:translateX(-4px); }
  40%,60%{ transform:translateX(4px); }
}
.hint{color:var(--muted); font-size:13px; margin-top:8px}
.hint a,
.hint a:visited{color:#93c5fd; text-decoration:underline}
.hint a:hover{color:#bfdbfe}
.hint a:focus-visible{outline:2px solid rgba(86,156,255,.7); outline-offset:2px; border-radius:6px}

.empty-state{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:12px; padding: 32px 18px; }
.empty-title{ font-weight: 950; letter-spacing:.2px; font-size: 17px; color: rgba(255,255,255,.92); }
.empty-text{ color: rgba(255,255,255,.60); font-size: 13.5px; line-height: 1.5; max-width: 48ch; }
.empty-actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top: 4px; }
.empty-actions .btn{ width:auto; min-width: 180px; }
@media(max-width:520px){ .empty-actions .btn{ width:100%; } }

/* ── Feed suggested users (empty following state) ── */
.feed-suggested-users{ width:100%; margin-top:20px; }
.feed-suggested-header{ font-size:14px; font-weight:700; color:rgba(255,255,255,.78); margin-bottom:14px; text-align:center; }
.feed-suggested-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px; }
.feed-suggested-card{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:18px 12px 14px; cursor:pointer;
  transition:background .18s,border-color .18s;
}
.feed-suggested-card:hover{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.14); }
.feed-suggested-avatar{ width:48px; height:48px; border-radius:50%; overflow:hidden; background:rgba(255,255,255,.10); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.feed-suggested-avatar-img{ width:100%; height:100%; object-fit:cover; }
.feed-suggested-avatar-initials{ font-size:18px; font-weight:700; color:rgba(255,255,255,.7); }
.feed-suggested-name{ font-size:13px; font-weight:600; color:rgba(255,255,255,.90); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:120px; }
.feed-suggested-handle{ font-size:11.5px; color:rgba(255,255,255,.45); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:120px; margin-top:-4px; }
.feed-suggested-follow-btn{
  margin-top:4px; font-size:12px; padding:5px 16px; border-radius:8px;
  background:rgba(86,156,255,.18); color:#7bb8ff; border:1px solid rgba(86,156,255,.25);
  font-weight:600; cursor:pointer; transition:background .15s,color .15s;
}
.feed-suggested-follow-btn:hover{ background:rgba(86,156,255,.30); }
.feed-suggested-follow-btn:disabled{ opacity:.6; cursor:default; }
.feed-suggested-follow-btn.followed{ background:rgba(255,255,255,.06); color:rgba(255,255,255,.50); border-color:rgba(255,255,255,.10); }
@media(max-width:420px){ .feed-suggested-grid{ grid-template-columns:repeat(2,1fr); gap:10px; } .feed-suggested-card{ padding:14px 8px 12px; } }

/* ── Profile empty states (works, wall) ── */
.profile-empty-state{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:8px; padding:48px 24px 40px;
}
@media(prefers-reduced-motion:no-preference){
  .profile-empty-state{ animation: profileEmptyFadeIn .4s ease both; }
  @keyframes profileEmptyFadeIn{
    from{ opacity:0; transform:translateY(8px); }
    to{ opacity:1; transform:none; }
  }
}
.profile-empty-icon{
  width:48px; height:48px;
  color:var(--accent, #6366f1);
  opacity:.38;
  margin-bottom:8px;
  stroke-width:1.3;
}
.profile-empty-title{
  font-size:16px; font-weight:700;
  color:rgba(255,255,255,.88);
  margin:0; letter-spacing:.01em;
}
.profile-empty-text{
  font-size:13.5px; line-height:1.55;
  color:rgba(255,255,255,.50);
  margin:0; max-width:36ch;
}

.skeleton{ position:relative; overflow:hidden; border-radius: 12px; background: rgba(255,255,255,.06); }
.skeleton::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  transform: translateX(-120%);
  animation: skShimmer 1.15s ease-in-out infinite;
}
@keyframes skShimmer{ to{ transform: translateX(120%); } }

.sk-line{ height: 12px; border-radius: 999px; }
.sk-line.sm{ height: 10px; }
.sk-line.lg{ height: 16px; }
.sk-w-30{ width: 30%; }
.sk-w-45{ width: 45%; }
.sk-w-60{ width: 60%; }
.sk-w-75{ width: 75%; }
.sk-w-90{ width: 90%; }
.sk-h-120{ height: 120px; }
.sk-pill{ height: 32px; border-radius: 999px; }
.sk-wpx-72{ width: 72px; }
.sk-wpx-74{ width: 74px; }
.sk-wpx-76{ width: 76px; }
.sk-wpx-78{ width: 78px; }
.sk-wpx-86{ width: 86px; }
.sk-mt-8{ margin-top: 8px; }
.sk-mt-10{ margin-top: 10px; }
.sk-mt-12{ margin-top: 12px; }

.sk-cover-52{ width:52px; height:52px; border-radius:12px; }
.sk-cover-read{ width:54px; height:72px; border-radius:10px; }

.cover-no-focus,
.cover-no-focus *{ user-select:none; caret-color: transparent; }
.cover-no-focus img{ -webkit-user-drag:none; }

.clipboard-ta{ position: fixed; left: -9999px; }

/* Library */
.library-tabs{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.library-tabs .btn{width:auto; min-width:160px}
.library-tab{align-items:center; justify-content:flex-start; gap:10px; padding:10px 12px}
.library-tab .btn-icon{margin-right:0}
.library-tab-text{display:flex; flex-direction:column; align-items:flex-start; line-height:1.15}
.library-tab-title{font-weight:900; letter-spacing:.2px}
.library-tab-sub{color:var(--muted); font-size:11px; margin-top:2px}
.library-tab.active{background:var(--primary)}

.library-content{
  margin-top: 16px;
  border:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  border-radius: 16px;
  padding: 14px;
}

.library-status{
  min-height: 22px;
  font-size: 14px;
  color: rgba(255,255,255,.72);
}

.library-panel{margin-top:12px}
.library-panel:first-of-type{ margin-top: 0; }
.library-trash-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px}
.library-trash-bar .btn.icon{min-width:auto; width:auto; padding:10px 10px}
.library-grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px}
@media(max-width:900px){.library-grid{grid-template-columns:1fr}}
.library-card{border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.02); border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:10px; min-width:0; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;}
.library-card:hover{border-color: rgba(255,255,255,.10); background: rgba(255,255,255,.03); box-shadow: 0 4px 16px rgba(0,0,0,.12);}
.library-card-head{display:flex; gap:12px; align-items:flex-start; min-width:0}
.library-card-head-main{min-width:0; flex:1 1 auto}
.library-cover{width:100px; height:133px; flex:0 0 100px; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03); display:flex; align-items:center; justify-content:center}
.library-cover-img{width:100%; height:100%; object-fit:cover; display:block}
.library-cover-fallback{font-weight:900; color:rgba(255,255,255,.85)}
.library-card-title{font-weight:900; letter-spacing:.2px}
.library-card-meta{color:var(--muted); font-size:12px}
.library-card-desc{color:rgba(255,255,255,.86); font-size:13px; line-height:1.45}
.library-progress-bar{
  height:4px; border-radius:2px; background:rgba(255,255,255,.08);
  overflow:hidden; margin-top:8px;
}
.library-progress-fill{
  height:100%; border-radius:2px;
  background:var(--accent); transition:width .3s ease;
}
.library-progress-label{
  font-size:11px; color:var(--text-secondary); margin-top:4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.library-card-actions{display:flex; gap:10px; flex-wrap:wrap}
.library-card-actions .btn{width:auto; min-width:auto; padding:10px 12px; font-size:13px; line-height:1.1}
.library-card-actions .btn .btn-icon{width:15px; height:15px; margin-right:6px}
.library-card-actions .library-continue-btn{padding:9px 12px; font-size:13px}
.library-card-actions .library-continue-btn .btn-icon{width:14px; height:14px; margin-right:6px}
.library-panel-trash .library-card-actions .btn{ padding:8px 10px; font-size:12px; border-radius:12px; }
.library-panel-trash .library-card-actions .btn .btn-icon{ width:14px; height:14px; margin-right:6px; }

.library-empty{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 14px;
}

.library-empty .hint{
  font-size: clamp(44px, 5.4vw, 84px);
  font-weight: 900;
  color: rgba(255,255,255,.62);
  letter-spacing: .2px;
  line-height: 1.1;
}

#view-library{ height: 100%; }
#view-library > .card{ height: 100%; display:flex; flex-direction:column; min-height:0; }
#view-library .library-content{ flex:1; min-height:0; display:flex; flex-direction:column; }
#view-library .library-panel{ flex:1; min-height:0; overflow:auto; }
#view-library .library-panel.is-empty{ display:flex; }
#view-library .library-panel.is-empty .library-empty{ flex:1; min-height:0; }

/* Toast */
.toast{
  position:fixed;
  left:50%;
  bottom:28px;
  transform:translateX(-50%) translateY(16px) scale(.96);
  opacity:0;
  background:rgba(17,24,39,.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.95);
  padding:10px 18px;
  border-radius:999px;
  font-size: 13px;
  font-weight: 600;
  box-shadow:0 12px 40px rgba(0,0,0,.40), 0 0 0 1px rgba(255,255,255,.04);
  transition:opacity .22s ease, transform .22s cubic-bezier(.34,1.56,.64,1);
  z-index:9999;
  max-width:min(560px, calc(100vw - 32px));
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0) scale(1)}

/* Cookie banner (landing) */
.cookie-banner{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  padding:12px 12px;
  background:rgba(10,14,22,.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top:1px solid rgba(255,255,255,.08);
  z-index:9995;
}
.cookie-banner-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.cookie-banner-text{
  color:rgba(255,255,255,.86);
  font-size:12px;
  line-height:1.35;
}
.cookie-banner-actions{display:flex; gap:6px; align-items:center}

body.wrapper:not(.app-layout){ padding-bottom: 86px; }

/* App-level cookie consent overlay */
.app-cookie-overlay{
  position:fixed; inset:0; z-index:10000;
  background:rgba(0,0,0,.85);
  backdrop-filter:blur(12px);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.app-cookie-overlay-inner{
  text-align:center; max-width:420px; width:100%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px; padding:40px 32px;
}
.app-cookie-overlay-icon{
  color:var(--accent); margin-bottom:16px; opacity:.7;
}
.app-cookie-overlay-inner h2{
  font-size:20px; font-weight:700; color:var(--text-primary);
  margin:0 0 8px;
}
.app-cookie-overlay-inner p{
  font-size:14px; color:var(--text-secondary);
  line-height:1.5; margin:0 0 24px;
}
.app-cookie-overlay-inner .btn{
  min-width:180px;
}

@media(max-width:640px){
  .cookie-banner-inner{flex-direction:column; align-items:stretch}
  .cookie-banner-actions{width:100%; justify-content:flex-end}
  body.wrapper:not(.app-layout){ padding-bottom: 132px; }
  .app-cookie-overlay-inner{ padding:28px 20px; }
}

/* Welcome overlay */
.welcome-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.45);
  opacity:0;
  transition:opacity .26s ease;
  z-index:9998;
}
.welcome-overlay.show{opacity:1}
.welcome-card{
  background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.00)), var(--surface);
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  padding:28px 26px;
  box-shadow:0 24px 80px rgba(0,0,0,.50), 0 0 0 1px rgba(255,255,255,.04);
  font-weight:900;
  font-size:22px;
  letter-spacing:.2px;
  max-width:min(520px, calc(100vw - 40px));
  text-align:center;
}

/* ---- Modern Auth Pages ---- */
.auth-page{
  position:relative;
  overflow-x:hidden;
}
.auth-page::before{
  content:"";
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(ellipse 900px 600px at 20% 10%, rgba(59,130,246,.12), transparent 60%),
    radial-gradient(ellipse 700px 500px at 80% 90%, rgba(139,92,246,.10), transparent 60%),
    radial-gradient(ellipse 500px 400px at 50% 50%, rgba(14,165,233,.06), transparent 60%),
    var(--bg);
  animation: authBgShift 20s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes authBgShift{
  0%{filter:hue-rotate(0deg)}
  100%{filter:hue-rotate(25deg)}
}
.auth-particles{
  position:fixed; inset:0; z-index:-1;
  width:100%; height:100%;
  pointer-events:none;
}
.auth-glass{
  background: linear-gradient(165deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 8px 32px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.04),
    inset 0 1px 0 rgba(255,255,255,.06);
}
@media(prefers-reduced-motion:no-preference){
  .auth-glass{ animation: authCardIn .5s cubic-bezier(.16,1,.3,1) both; }
  @keyframes authCardIn{ from{opacity:0; transform:translateY(24px) scale(.97)} to{opacity:1; transform:translateY(0) scale(1)} }
}
.auth-glass h2{
  background: linear-gradient(135deg, #e0e7ff 0%, #93c5fd 50%, #a78bfa 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  font-size:24px; font-weight:900; letter-spacing:.3px;
}
@media(prefers-reduced-motion:no-preference){
  .auth-glass .field{ animation: authFieldIn .4s cubic-bezier(.16,1,.3,1) both; }
  .auth-glass .field:nth-child(2){animation-delay:.06s}
  .auth-glass .field:nth-child(3){animation-delay:.10s}
  .auth-glass .field:nth-child(4){animation-delay:.14s}
  .auth-glass .field:nth-child(5){animation-delay:.18s}
  .auth-glass .field:nth-child(6){animation-delay:.22s}
  .auth-glass .field:nth-child(7){animation-delay:.26s}
  .auth-glass .field:nth-child(8){animation-delay:.30s}
  .auth-glass .field:nth-child(9){animation-delay:.34s}
  .auth-glass .field:nth-child(10){animation-delay:.38s}
  .auth-glass .field:nth-child(11){animation-delay:.42s}
  .auth-glass .field:nth-child(12){animation-delay:.46s}
  @keyframes authFieldIn{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }
}
.auth-glass .input{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.auth-glass .input:focus{
  background:rgba(255,255,255,.06);
  border-color:rgba(96,165,250,.55);
  box-shadow:0 0 0 3px rgba(96,165,250,.15), 0 0 20px rgba(96,165,250,.06);
}
.auth-glass .btn{
  position:relative; overflow:hidden;
  transition:transform .15s ease, box-shadow .2s ease;
}
.auth-glass .btn:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 6px 24px rgba(59,130,246,.25);
}
.auth-glass .btn:active:not(:disabled){
  transform:translateY(0);
}
.auth-glass .btn::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.12) 0%, transparent 50%);
  pointer-events:none;
}

/* Gender selector */
.gender-group{
  display:flex; gap:8px;
}
.gender-option{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 14px; border-radius:10px;
  background:rgba(255,255,255,.03);
  border:2px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.55); cursor:pointer;
  font-size:13px; font-weight:600;
  transition:border-color .15s, background .15s;
  user-select:none;
}
.gender-option:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.18);
}
.gender-option[aria-pressed="true"]{
  background:rgba(59,130,246,.12);
  border-color:var(--primary, #3b82f6);
  color:#fff;
}
.gender-icon{
  width:18px; height:18px; flex:0 0 18px;
}

/* ── Register: Luminous Manuscript ─────────────────────────────────────── */

/* Container */
.container.reg-container{ max-width:980px; margin:12px auto 0; padding:0 20px; }

/* Card overrides */
.reg-card{
  position:relative; overflow:hidden;
  border:1px solid rgba(147,197,253,.12);
  box-shadow:
    0 0 0 1px rgba(147,197,253,.06),
    0 8px 40px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.reg-card::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:60%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(147,197,253,.40), rgba(167,139,250,.30), transparent);
  z-index:1;
}

/* Progress bar */
.reg-progress{
  position:absolute; top:0; left:0; right:0; height:3px;
  background:rgba(255,255,255,.04); z-index:2; overflow:hidden;
  border-radius:20px 20px 0 0;
}
.reg-progress-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg, #3b82f6, #8b5cf6, #a78bfa);
  border-radius:0 3px 3px 0;
  transition:width .5s cubic-bezier(.22,1,.36,1);
  box-shadow:0 0 12px rgba(139,92,246,.35);
}

/* Header */
.reg-header{ text-align:center; margin-bottom:24px; }
.reg-header h2{ margin-bottom:6px; }
.reg-subtitle{
  color:rgba(255,255,255,.45); font-size:13px; line-height:1.5;
  margin:0; max-width:44ch; margin-inline:auto;
}

/* Two-column grid */
.reg-columns{ display:grid; grid-template-columns:1fr 1fr; gap:20px 40px; }

/* Section markers */
.reg-section-marker{
  display:flex; align-items:center; gap:10px; margin-bottom:6px;
}
.reg-section-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%;
  background:linear-gradient(135deg, rgba(59,130,246,.20), rgba(139,92,246,.15));
  border:1px solid rgba(147,197,253,.25);
  color:rgba(147,197,253,.90); font-size:11px; font-weight:900;
  flex-shrink:0;
}
.reg-section-line{
  flex:1; height:1px;
  background:linear-gradient(90deg, rgba(147,197,253,.20), transparent);
}

/* Column labels */
.reg-col-label{
  font-size:11px; font-weight:900; letter-spacing:.8px; text-transform:uppercase;
  color:rgba(147,197,253,.65); margin-bottom:8px; padding-bottom:0;
  border-bottom:none;
}

/* Field entrance animation */
@media(prefers-reduced-motion:no-preference){
  .reg-card .field{ animation:regFieldIn .45s cubic-bezier(.16,1,.3,1) both; }
  .reg-col-required .field:nth-child(3){animation-delay:.04s}
  .reg-col-required .field:nth-child(4){animation-delay:.07s}
  .reg-col-required .field:nth-child(5){animation-delay:.10s}
  .reg-col-required .field:nth-child(6){animation-delay:.13s}
  .reg-col-required .field:nth-child(7){animation-delay:.16s}
  .reg-col-required .field:nth-child(8){animation-delay:.19s}
  .reg-col-required .field:nth-child(9){animation-delay:.22s}
  .reg-col-optional .field:nth-child(3){animation-delay:.08s}
  .reg-col-optional .field:nth-child(4){animation-delay:.12s}
  .reg-col-optional .field:nth-child(5){animation-delay:.16s}
  .reg-col-optional .field:nth-child(6){animation-delay:.20s}
  @keyframes regFieldIn{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
}

/* Input ink-glow on focus */
.reg-card .input:focus{
  border-color:rgba(139,92,246,.50);
  box-shadow:
    0 0 0 3px rgba(139,92,246,.12),
    0 0 20px rgba(139,92,246,.06);
  background:rgba(255,255,255,.05);
}

/* Password rules refined */
.reg-card .pass-rules{
  border-color:rgba(139,92,246,.15);
  background:rgba(139,92,246,.04);
}
.reg-card .pass-rule{
  font-size:12.5px; padding:2px 0;
  transition:color .2s ease;
}
.reg-card .pass-ok::before{
  content:"✓"; margin-right:2px; font-weight:700;
}
.reg-card .pass-bad::before{
  content:"○"; margin-right:2px; opacity:.5;
}

/* Gender selector enhanced */
.reg-card .gender-option{
  padding:10px 16px; border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  transition:all .2s cubic-bezier(.22,1,.36,1);
}
.reg-card .gender-option:hover{
  border-color:rgba(139,92,246,.30);
  background:rgba(139,92,246,.06);
  transform:translateY(-1px);
}
.reg-card .gender-option[aria-pressed="true"]{
  background:linear-gradient(135deg, rgba(59,130,246,.12), rgba(139,92,246,.10));
  border-color:rgba(139,92,246,.45);
  box-shadow:0 0 16px rgba(139,92,246,.10);
}

/* Role selector enhanced (legacy) */
.reg-card .role-option{
  border-radius:12px;
  transition:all .2s cubic-bezier(.22,1,.36,1);
}
.reg-card .role-option:hover{
  border-color:rgba(139,92,246,.30);
  background:rgba(139,92,246,.06);
  transform:translateY(-1px);
}
.reg-card .role-option[aria-pressed="true"],
.reg-card .role-option.active{
  border-color:rgba(139,92,246,.45);
  background:linear-gradient(135deg, rgba(59,130,246,.12), rgba(139,92,246,.10));
  box-shadow:0 0 16px rgba(139,92,246,.10);
}

/* Big role cards (register) */
.reg-role-field{ flex:1 1 auto; display:flex; flex-direction:column; }
.reg-role-cards{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
  flex:1 1 auto; min-height:140px;
}
.reg-role-card{
  appearance:none; border:2px solid rgba(255,255,255,.08); background:rgba(255,255,255,.025);
  border-radius:16px; padding:16px 12px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  transition:all .25s cubic-bezier(.22,1,.36,1);
  position:relative; overflow:hidden; color:inherit; font-family:inherit;
}
.reg-role-card::before{
  content:""; position:absolute; inset:0; border-radius:16px; opacity:0;
  transition:opacity .3s ease; pointer-events:none;
}
.reg-role-card[data-role="reader"]::before{
  background:radial-gradient(ellipse at 50% 30%, rgba(59,130,246,.12) 0%, transparent 70%);
}
.reg-role-card[data-role="writer"]::before{
  background:radial-gradient(ellipse at 50% 30%, rgba(139,92,246,.12) 0%, transparent 70%);
}
.reg-role-card:hover{
  border-color:rgba(255,255,255,.18); transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.reg-role-card:hover::before{ opacity:1; }
.reg-role-card:active{ transform:translateY(0) scale(.97); }
.reg-role-card[aria-pressed="true"]{
  border-color:rgba(139,92,246,.50);
  background:linear-gradient(168deg, rgba(59,130,246,.10) 0%, rgba(139,92,246,.08) 100%);
  box-shadow:0 0 20px rgba(139,92,246,.12), 0 4px 16px rgba(0,0,0,.15);
}
.reg-role-card[aria-pressed="true"]::after{
  content:""; position:absolute; top:10px; right:10px; width:10px; height:10px;
  border-radius:50%; background:rgba(139,92,246,.9); box-shadow:0 0 8px rgba(139,92,246,.5);
}
.reg-role-card-img{
  display:flex; align-items:center; justify-content:center;
}
.reg-role-card-img img{
  width:72px; height:72px; object-fit:contain; border-radius:8px;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.3));
}
.reg-role-card-body{
  display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center;
}
.reg-role-card-title{
  font-size:15px; font-weight:800; letter-spacing:.02em; color:rgba(255,255,255,.92);
}
.reg-role-card-desc{
  font-size:11px; line-height:1.35; color:rgba(255,255,255,.45); max-width:140px;
}
.reg-col-optional{ display:flex; flex-direction:column; }

/* Submit button */
.reg-submit-btn{
  width:100%; margin-top:18px; padding:14px 24px;
  font-size:15px; font-weight:800; letter-spacing:.3px;
  background:linear-gradient(135deg, #3b82f6, #7c3aed);
  border:none; border-radius:14px;
  position:relative; overflow:hidden;
  transition:transform .15s ease, box-shadow .25s ease, opacity .2s ease;
}
.reg-submit-btn:hover:not(:disabled){
  transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(124,58,237,.30), 0 0 0 1px rgba(139,92,246,.20);
}
.reg-submit-btn:active:not(:disabled){
  transform:translateY(0);
}
.reg-submit-btn::after{
  content:""; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transition:none; pointer-events:none;
}
.reg-submit-btn:hover:not(:disabled)::after{
  animation:regBtnShimmer .8s ease forwards;
}
@keyframes regBtnShimmer{
  to{left:100%}
}
.reg-submit-btn:disabled{
  opacity:.45; cursor:not-allowed;
  background:linear-gradient(135deg, rgba(59,130,246,.5), rgba(124,58,237,.4));
}

/* Footer */
.reg-footer{
  margin-top:24px; padding-top:20px;
  border-top:1px solid rgba(255,255,255,.06);
  text-align:center;
}
.reg-footer .checkbox-row{ justify-content:center; }
.reg-footer .hint{ text-align:center; }

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .reg-card .field{ animation:none; }
  .reg-progress-fill{ transition:none; }
  .reg-submit-btn::after{ animation:none; }
  .reg-card .gender-option:hover,
  .reg-card .role-option:hover,
  .reg-role-card:hover{ transform:none; }
  .reg-submit-btn:hover:not(:disabled){ transform:none; }
}

/* Responsive */
@media(max-width:720px){
  .reg-columns{ grid-template-columns:1fr; gap:8px; }
  .reg-col-optional{ margin-top:8px; }
  .container.reg-container{ margin:0 auto; padding:0 12px; }
  .reg-header{ margin-bottom:18px; }
  .reg-submit-btn{ font-size:14px; padding:13px 20px; }
  .reg-role-cards{ min-height:110px; }
  .reg-role-card-img img{ width:56px; height:56px; }
}

/* ── Login: Luminous Manuscript ──────────────────────────────────────── */

/* Container */
.login-container{ max-width:520px; margin:24px auto; padding:0 20px; }

/* Card overrides */
.login-card{
  position:relative; overflow:hidden;
  border:1px solid rgba(147,197,253,.12);
  box-shadow:
    0 0 0 1px rgba(147,197,253,.06),
    0 8px 40px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.login-card::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:60%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(147,197,253,.40), rgba(167,139,250,.30), transparent);
  z-index:1;
}

/* Progress bar */
.login-progress{
  position:absolute; top:0; left:0; right:0; height:3px;
  background:rgba(255,255,255,.04); z-index:2; overflow:hidden;
  border-radius:20px 20px 0 0;
}
.login-progress-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg, #3b82f6, #8b5cf6, #a78bfa);
  border-radius:0 3px 3px 0;
  transition:width .5s cubic-bezier(.22,1,.36,1);
  box-shadow:0 0 12px rgba(139,92,246,.35);
}

/* Header */
.login-header{ text-align:center; margin-bottom:28px; }
.login-header h2{ margin-bottom:6px; }
.login-subtitle{
  color:rgba(255,255,255,.45); font-size:13px; line-height:1.5;
  margin:0; max-width:38ch; margin-inline:auto;
}

/* Fields wrapper */
.login-fields{ display:flex; flex-direction:column; gap:16px; }

/* Field entrance animation */
@media(prefers-reduced-motion:no-preference){
  .login-card .field{ animation:loginFieldIn .45s cubic-bezier(.16,1,.3,1) both; }
  .login-card .field:nth-child(2){ animation-delay:.06s; }
  @keyframes loginFieldIn{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
}

/* Input ink-glow on focus */
.login-card .input:focus{
  border-color:rgba(139,92,246,.50);
  box-shadow:
    0 0 0 3px rgba(139,92,246,.12),
    0 0 20px rgba(139,92,246,.06);
  background:rgba(255,255,255,.05);
}

/* Submit button */
.login-submit-btn{
  width:100%; margin-top:8px; padding:14px 24px;
  font-size:15px; font-weight:800; letter-spacing:.3px;
  background:linear-gradient(135deg, #3b82f6, #7c3aed);
  border:none; border-radius:14px;
  position:relative; overflow:hidden;
  transition:transform .15s ease, box-shadow .25s ease, opacity .2s ease;
}
.login-submit-btn:hover:not(:disabled){
  transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(124,58,237,.30), 0 0 0 1px rgba(139,92,246,.20);
}
.login-submit-btn:active:not(:disabled){
  transform:translateY(0);
}
.login-submit-btn::after{
  content:""; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transition:none; pointer-events:none;
}
.login-submit-btn:hover:not(:disabled)::after{
  animation:loginBtnShimmer .8s ease forwards;
}
@keyframes loginBtnShimmer{
  to{left:100%}
}
.login-submit-btn:disabled{
  opacity:.45; cursor:not-allowed;
  background:linear-gradient(135deg, rgba(59,130,246,.5), rgba(124,58,237,.4));
}

/* Footer */
.login-footer{
  margin-top:24px; padding-top:20px;
  border-top:1px solid rgba(255,255,255,.06);
  text-align:center;
}
.login-footer .hint{ text-align:center; }

/* ── Forgot-password: field helper ──────────────────────────────────── */
.field-helper{
  display:block; margin-top:6px;
  color:rgba(255,255,255,.35); font-size:11.5px; line-height:1.45;
}

/* ── Forgot-password: anti-phishing security block ──────────────────── */
.fp-security-block{
  margin-top:24px; padding:16px 18px;
  border-radius:12px;
  background:rgba(59,130,246,.06);
  border:1px solid rgba(59,130,246,.12);
}
.fp-security-header{
  display:flex; align-items:center; gap:8px; margin-bottom:10px;
}
.fp-security-header h3{
  margin:0; font-size:13px; font-weight:700;
  color:rgba(147,197,253,.85); letter-spacing:.2px;
}
.fp-security-icon{
  color:rgba(147,197,253,.7); flex-shrink:0;
}
.fp-security-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:7px;
}
.fp-security-list li{
  position:relative; padding-left:18px;
  font-size:12.5px; line-height:1.5;
  color:rgba(255,255,255,.50);
}
.fp-security-list li::before{
  content:"✓"; position:absolute; left:0; top:0;
  color:rgba(96,165,250,.7); font-weight:700; font-size:12px;
}

/* ── Forgot-password: help accordion ────────────────────────────────── */
.fp-help-accordion{
  margin-top:16px; border-radius:10px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  overflow:hidden;
}
.fp-help-accordion summary{
  padding:12px 18px; cursor:pointer;
  font-size:13px; font-weight:600;
  color:rgba(255,255,255,.50);
  list-style:none; display:flex; align-items:center; gap:8px;
  transition:color .2s ease, background .2s ease;
}
.fp-help-accordion summary::-webkit-details-marker{ display:none; }
.fp-help-accordion summary::before{
  content:""; display:inline-block; width:6px; height:6px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(-45deg); transition:transform .2s ease;
  flex-shrink:0;
}
.fp-help-accordion[open] summary::before{
  transform:rotate(45deg);
}
.fp-help-accordion summary:hover{
  color:rgba(255,255,255,.70);
  background:rgba(255,255,255,.03);
}
.fp-help-accordion[open] summary{
  border-bottom:1px solid rgba(255,255,255,.06);
}
.fp-help-list{
  list-style:none; margin:0; padding:12px 18px;
  display:flex; flex-direction:column; gap:6px;
}
.fp-help-list li{
  position:relative; padding-left:16px;
  font-size:12.5px; line-height:1.5;
  color:rgba(255,255,255,.45);
}
.fp-help-list li::before{
  content:"•"; position:absolute; left:0; top:0;
  color:rgba(255,255,255,.25);
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .login-card .field{ animation:none; }
  .login-progress-fill{ transition:none; }
  .login-submit-btn::after{ animation:none; }
  .login-submit-btn:hover:not(:disabled){ transform:none; }
}

/* Responsive */
@media(max-width:720px){
  .login-container{ margin:16px auto; padding:0 12px; }
  .login-header{ margin-bottom:20px; }
  .login-submit-btn{ font-size:14px; padding:13px 20px; }
}

/* Custom select styling */
.custom-select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:12px;
  padding-right:36px;
  cursor:pointer;
}
.custom-select option{
  background:#1e293b;
  color:#e5e7eb;
  padding:8px 12px;
}

/* Modern welcome overlay */
@media(prefers-reduced-motion:no-preference){
  .welcome-overlay .welcome-card{ animation: welcomeIn .45s cubic-bezier(.16,1,.3,1) both; }
  @keyframes welcomeIn{ from{opacity:0; transform:scale(.85) translateY(20px)} to{opacity:1; transform:scale(1) translateY(0)} }
}

/* Auth guard overlay (avoid blank screen while session resolves) */
.guard-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:rgba(0,0,0,.35);
  z-index:9996;
}
.guard-text{
  color:rgba(255,255,255,.92);
  font-weight:800;
  letter-spacing:.2px;
}

/* Modal — see modal-2026.css */

/* === Onboarding modal (modern) === */
.onboarding-modal{
  width: min(520px, calc(100vw - 32px));
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(17,24,39,.98), rgba(11,18,32,.98));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 24px 64px rgba(0,0,0,.55), 0 0 0 1px rgba(96,165,250,.06);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.onboarding-modal .modal-header{
  padding: 24px 28px 0;
  border-bottom: none;
}
.onboarding-modal .modal-title{
  font-size: 26px;
  font-weight: 900;
  background: linear-gradient(90deg, #93c5fd 0%, #60a5fa 40%, #a78bfa 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.onboarding-modal .modal-body{
  padding: 12px 28px 8px;
}
.onboarding-intro{
  color: rgba(255,255,255,.70);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 18px;
}
.onboarding-hint{
  margin-top: 16px;
  font-size: 12px;
  color: rgba(255,255,255,.40);
}
.onboarding-modal .modal-actions{
  padding: 16px 28px 24px;
  border-top: none;
  gap: 10px;
}
.onboarding-modal .modal-actions .btn{
  min-width: 0;
  flex: 1;
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
}

/* Genre chips (shared by onboarding + settings) */
.browse-genre-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.browse-genre-chip{
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.65);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .10s ease;
}
.browse-genre-chip:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.88);
}
.browse-genre-chip:active{
  transform: scale(.96);
}
.browse-genre-chip.selected{
  background: rgba(96,165,250,.14);
  border-color: rgba(96,165,250,.45);
  color: #93c5fd;
  box-shadow: 0 0 0 2px rgba(96,165,250,.10);
}
.browse-genre-chip.selected:hover{
  background: rgba(96,165,250,.20);
  border-color: rgba(96,165,250,.55);
}
.browse-genre-chip:focus{outline:none;}
.browse-genre-chip:focus-visible{box-shadow:0 0 0 3px rgba(96,165,250,.35);}
.genre-chip-icon{
  display: flex;
  align-items: center;
  flex-shrink: 0;
  opacity: .55;
  transition: opacity .16s ease;
}
.browse-genre-chip:hover .genre-chip-icon{ opacity: .8; }
.browse-genre-chip.selected .genre-chip-icon{ opacity: 1; }

@media(max-width:480px){
  .onboarding-modal{ border-radius: 16px; }
  .onboarding-modal .modal-header{ padding: 20px 20px 0; }
  .onboarding-modal .modal-body{ padding: 10px 20px 6px; }
  .onboarding-modal .modal-actions{ padding: 14px 20px 20px; }
  .onboarding-modal .modal-title{ font-size: 22px; }
}

/* === Settings panel (modern) === */
.settings-card{
  margin-top: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00)), var(--surface);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  padding: 24px 26px;
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
}
.settings-section-header{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.settings-section-icon{
  color: rgba(96,165,250,.7);
  flex-shrink: 0;
}
.settings-card h3{
  font-size: 16px;
  font-weight: 800;
  margin: 0;
  color: rgba(255,255,255,.95);
}
.settings-card .subtitle{
  font-size: 13px;
  color: rgba(255,255,255,.50);
  margin: 0 0 18px;
  line-height: 1.45;
}

/* Language chips grid */
.settings-lang-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.settings-lang-chip{
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.72);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .10s ease;
}
.settings-lang-chip:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
}
.settings-lang-chip:active{ transform: scale(.96); }
.settings-lang-chip.active{
  background: rgba(96,165,250,.12);
  border-color: rgba(96,165,250,.40);
  color: #93c5fd;
  box-shadow: 0 0 0 2px rgba(96,165,250,.10);
}
.settings-lang-chip:focus{ outline: none; }
.settings-lang-chip:focus-visible{ box-shadow: 0 0 0 3px rgba(96,165,250,.35); }
.lang-chip-check{ flex-shrink: 0; }

/* Genre chips with icons */
.settings-card .browse-genre-grid{
  margin-bottom: 16px;
  gap: 10px;
}

/* Save button (distinct from genre chips) */
.settings-save-btn{
  width: auto !important;
  min-width: 160px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(34,197,94,.16);
  border: 1px solid rgba(34,197,94,.35);
  color: #86efac;
  font-weight: 700;
  font-size: 14px;
  border-radius: 12px;
  padding: 10px 22px;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .10s ease;
}
.settings-save-btn:hover{
  background: rgba(34,197,94,.24);
  border-color: rgba(34,197,94,.50);
  color: #bbf7d0;
}
.settings-save-btn:active{ transform: scale(.97); }
.settings-card-actions{
  margin-top: 18px;
  display: flex;
  gap: 10px;
}

/* Settings select row */
.settings-select-row{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.settings-select-row label{
  font-size: 13px;
  font-weight: 600;
  color: rgba(96,165,250,.7);
  margin: 0;
}
.settings-select-row select.input{
  max-width: 320px;
}

/* Privacy toggle switch */
.settings-toggle-row{
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  transition: background .16s ease, border-color .16s ease;
}
.settings-toggle-row:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.10);
}
.settings-toggle-input{
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.settings-toggle-switch{
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 24px;
  border-radius: 12px;
  background: rgba(255,255,255,.12);
  transition: background .2s ease;
}
.settings-toggle-switch::after{
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,.6);
  transition: transform .2s ease, background .2s ease;
}
.settings-toggle-input:checked + .settings-toggle-switch{
  background: rgba(96,165,250,.5);
}
.settings-toggle-input:checked + .settings-toggle-switch::after{
  transform: translateX(18px);
  background: #93c5fd;
}
.settings-toggle-input:focus-visible + .settings-toggle-switch{
  box-shadow: 0 0 0 3px rgba(96,165,250,.35);
}
.settings-toggle-label{
  font-size: 14px;
  color: rgba(255,255,255,.80);
  font-weight: 500;
}

@media(max-width:480px){
  .settings-card{ padding: 18px 16px; }
  .settings-save-btn{ width: 100% !important; min-width: 0; }
  .settings-card-actions{ flex-direction: column; }
}

/* === Profile edit modal (modern) === */
.modal-backdrop-profile-edit{
  background: rgba(0,0,0,.60);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.profile-edit-modal{
  width: min(520px, 100%);
  max-height: min(92dvh, 720px);
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.00)), var(--surface);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 24px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04);
}
@media(prefers-reduced-motion:no-preference){
  .profile-edit-modal{ animation: profileEditIn .2s ease-out; }
  @keyframes profileEditIn{ from{opacity:0; transform:translateY(12px) scale(.97)} to{opacity:1; transform:none} }
}
.profile-edit-modal .modal-header{
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex: 0 0 auto;
}
.profile-edit-modal .modal-title{
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .2px;
}
.profile-edit-modal .modal-body{
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px 22px 22px;
  scrollbar-width: thin;
}
.profile-edit-modal .modal-actions{
  flex: 0 0 auto;
  padding: 14px 22px;
  border-top: 1px solid rgba(255,255,255,.07);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.profile-edit-modal .modal-actions .btn{
  min-width: 120px;
  border-radius: 12px;
  padding: 10px 18px;
  font-weight: 800;
}
.profile-edit-modal .sw-label{
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(255,255,255,.65);
  letter-spacing: .3px;
  text-transform: uppercase;
  margin-top: 18px;
  margin-bottom: 6px;
}
.profile-edit-modal .sw-label:first-child{ margin-top: 0; }
.profile-edit-modal .input{
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--text);
  font-size: 14px;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.profile-edit-modal .input:focus{
  border-color: rgba(96,165,250,.50);
  box-shadow: 0 0 0 3px rgba(96,165,250,.12);
  outline: none;
}
.profile-edit-modal .input:disabled{
  opacity: .5;
  cursor: not-allowed;
}
.profile-edit-modal .profile-textarea{
  min-height: 80px;
  resize: vertical;
  line-height: 1.45;
}
.profile-edit-modal .hint{
  font-size: 12px;
  color: rgba(255,255,255,.45);
  margin-top: 4px;
}
.profile-edit-modal .error{
  font-size: 12px;
  color: var(--error);
  margin-top: 4px;
  min-height: 0;
}
.profile-edit-modal .row{
  display: flex;
  align-items: center;
  margin-top: 12px;
}
.profile-edit-modal .row input[type="checkbox"]{
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  margin-right: 10px;
  flex: 0 0 auto;
}
.profile-edit-modal .row span{
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255,255,255,.85);
}
@media(max-width:520px){
  .profile-edit-modal{
    width: 100%;
    max-height: 95dvh;
    border-radius: 16px 16px 0 0;
  }
  .profile-edit-modal .modal-header{ padding: 14px 16px; }
  .profile-edit-modal .modal-body{ padding: 14px 16px 18px; }
  .profile-edit-modal .modal-actions{ padding: 12px 16px; }
  .profile-edit-modal .modal-actions .btn{ min-width: 0; flex: 1; }
}
.sw-backdrop{
  position:fixed;
  inset:0;
  background: radial-gradient(900px 450px at 20% 15%, rgba(96,165,250,.12), rgba(0,0,0,0)),
              radial-gradient(900px 450px at 80% 85%, rgba(167,139,250,.10), rgba(0,0,0,0)),
              rgba(0,0,0,.70);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:16px;
  z-index:9996;
  opacity:0;
  transition: opacity .22s ease;
}
.sw-backdrop.show{opacity:1}

.sw-modal{
  width:1100px;
  max-width:100%;
  max-height: calc(100dvh - 32px);
  display:flex;
  flex-direction:column;
  background: linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.00)), var(--surface);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  box-shadow: 0 22px 85px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset;
  overflow:hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.sw-header{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding: 18px; }
.sw-header-left{ min-width:0; }
.sw-title{ font-weight: 950; letter-spacing:.2px; font-size: 22px; }
.sw-subtitle{ color: var(--muted); font-size: 13px; margin-top: 2px; }
.sw-header-right{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.sw-head-btn{ width:auto; min-width:auto; padding:10px 12px; }

.sw-progressbar{
  width:100%;
  height:3px;
  background:rgba(255,255,255,.06);
  border:0;
  appearance:none;
  -webkit-appearance:none;
  transition: none;
}
.sw-progressbar::-webkit-progress-bar{background:rgba(255,255,255,.06)}
.sw-progressbar::-webkit-progress-value{background:linear-gradient(90deg, rgba(96,165,250,.95), rgba(167,139,250,.95)); border-radius: 0 2px 2px 0; transition: width .35s cubic-bezier(.4,0,.2,1)}
.sw-progressbar::-moz-progress-bar{background:linear-gradient(90deg, rgba(96,165,250,.95), rgba(167,139,250,.95)); border-radius: 0 2px 2px 0}

.sw-step-indicator{ text-align:center; font-size: 11px; color: var(--muted); letter-spacing: .5px; text-transform: uppercase; padding: 6px 0 0; }

.sw-body{ padding: 18px; overflow:auto; }

.sw-grid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; opacity: 0; transform: translateY(8px); transition: opacity .22s ease, transform .22s ease; }
.sw-grid.show{ opacity: 1; transform: none; }
@media(max-width:900px){ .sw-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media(max-width:520px){ .sw-grid{ grid-template-columns: 1fr; } }

.sw-card{
  text-align:left;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  color: var(--text);
  cursor:pointer;
  transform: translateY(8px);
  opacity: 0;
  transition: transform .18s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease, opacity .22s ease;
}
.sw-card{transition-delay:var(--delay, 0ms)}
.sw-delay-0{--delay:0ms}
.sw-delay-1{--delay:55ms}
.sw-delay-2{--delay:110ms}
.sw-delay-3{--delay:165ms}
.sw-delay-4{--delay:220ms}
.sw-delay-5{--delay:275ms}
.sw-delay-6{--delay:330ms}
.sw-delay-7{--delay:385ms}
.sw-delay-8{--delay:440ms}
.sw-delay-9{--delay:495ms}
.sw-delay-10{--delay:550ms}
.sw-delay-11{--delay:605ms}
.sw-delay-12{--delay:660ms}
.sw-delay-13{--delay:715ms}
.sw-delay-14{--delay:770ms}
.sw-grid.show .sw-card{ transform:none; opacity:1; }
.sw-card:hover{ background: rgba(255,255,255,.05); border-color: rgba(96,165,250,.40); box-shadow: 0 0 20px rgba(96,165,250,.08), 0 4px 16px rgba(0,0,0,.15); }
.sw-card:active{ transform: translateY(1px) scale(.98); box-shadow: none; }
.sw-card:focus-visible{ outline: 2px solid rgba(96,165,250,.55); outline-offset: 2px; }

.sw-card-icon{
  width: 46px;
  height: 46px;
  display:grid;
  place-items:center;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, rgba(96,165,250,.08), rgba(167,139,250,.06));
  margin-bottom: 10px;
  transition: background .22s ease;
}
.sw-card:hover .sw-card-icon{ background: linear-gradient(135deg, rgba(96,165,250,.14), rgba(167,139,250,.10)); }
.sw-icon{ width: 22px; height: 22px; }
.sw-card-label{ font-weight: 900; letter-spacing: .2px; }
.sw-card-desc{ color: var(--muted); font-size: 12px; margin-top: 2px; }

.sw-details{ opacity: 0; transform: translateY(8px); transition: opacity .22s ease, transform .22s ease; }
.sw-details.show{ opacity: 1; transform: none; }
.sw-details-row{ display:flex; flex-direction:column; gap:8px; margin-bottom: 12px; }
.sw-label{ font-size: 12px; color: var(--muted); }
.sw-input{ width:100%; }

.sw-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.sw-chip{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.92);
  padding: 7px 10px;
  border-radius: 999px;
  cursor:pointer;
  font-size: 12px;
  transition: transform .05s, background .2s, border-color .2s;
}
.sw-chip:hover{ background: rgba(255,255,255,.05); border-color: rgba(96,165,250,.35); }
.sw-chip:active{ transform: translateY(1px); }
.sw-chip.active{ border-color: rgba(96,165,250,.55); box-shadow: 0 0 0 3px rgba(96,165,250,.12); }

.sw-tag-picker{ display:flex; flex-direction:column; gap:10px; }
.sw-tag-picker-row{ position:relative; }
.sw-tag-dropdown{
  position:absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 3;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)), rgba(11,18,32,.96);
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  overflow:hidden;
  max-height: 220px;
  overflow:auto;
}
.sw-tag-option{
  width:100%;
  text-align:left;
  padding: 10px 12px;
  border:0;
  background: transparent;
  color: rgba(255,255,255,.92);
  cursor:pointer;
  font-size: 13px;
}
.sw-tag-option:hover{ background: rgba(255,255,255,.05); }
.sw-tag-option:active{ background: rgba(255,255,255,.07); }
.sw-tag-option:focus-visible{ outline: 2px solid rgba(96,165,250,.55); outline-offset: -2px; }

.sw-actions{ display:flex; gap:12px; margin-top: 14px; }
.sw-primary{ width:auto; min-width: 220px; }

.sw-submit{ opacity: 0; transform: translateY(8px); transition: opacity .22s ease, transform .22s ease; }
.sw-submit.show{ opacity: 1; transform: none; }
.sw-summary{ border:1px solid rgba(255,255,255,.10); background: linear-gradient(135deg, rgba(96,165,250,.04), rgba(167,139,250,.03)); border-radius: 16px; padding: 18px; }
.sw-summary-title{ font-weight: 950; letter-spacing:.2px; font-size: 18px; }
.sw-summary-meta{ color: var(--muted); font-size: 13px; margin-top: 6px; line-height: 1.5; }
.sw-summary-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top: 12px; }
.sw-summary-chip{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.85); padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
}
.sw-summary-chip-icon{ display:flex; align-items:center; }
.sw-summary-chip-icon svg{ width:14px; height:14px; opacity:.7; }

.sw-body .leave{ opacity: 0; transform: translateY(8px); }

/* ── Price step: two-column layout ── */
.sw-price-layout{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease;
}
.sw-price-layout.show{ opacity: 1; transform: none; }
@media(max-width:680px){
  .sw-price-layout{ grid-template-columns: 1fr; gap: 18px; }
}

.sw-price-left{ display:flex; flex-direction:column; gap: 6px; }
.sw-price-hint{
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* Coin input with icon */
.sw-coin-input-wrap{
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  border-radius: 12px;
  padding: 0 12px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.sw-coin-input-wrap:focus-within{
  border-color: rgba(96,165,250,.5);
  box-shadow: 0 0 0 3px rgba(96,165,250,.12);
}
.sw-coin-icon{ display:flex; align-items:center; color: rgba(255,200,50,.85); flex-shrink:0; }
.sw-coin-icon svg{ width: 20px; height: 20px; }
.sw-coin-input{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 10px 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .5px;
  color: #fff;
  width: 100%;
}
.sw-coin-input::placeholder{ color: rgba(255,255,255,.28); font-weight: 500; }
/* Hide number spinners */
.sw-coin-input::-webkit-inner-spin-button,
.sw-coin-input::-webkit-outer-spin-button{ -webkit-appearance: none; appearance: none; margin: 0; }
.sw-coin-input[type=number]{ -moz-appearance: textfield; appearance: textfield; }

/* Payment explanation panel */
.sw-price-right{
  background: linear-gradient(135deg, rgba(96,165,250,.06), rgba(167,139,250,.04));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sw-how-title{
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92);
}
.sw-how-title svg{ width: 18px; height: 18px; color: rgba(255,200,50,.85); }
.sw-how-steps{ display:flex; flex-direction:column; gap: 10px; }
.sw-how-step{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,.78);
  line-height: 1.4;
}
.sw-how-num{
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(96,165,250,.15);
  color: rgba(96,165,250,.9);
  font-size: 11px;
  font-weight: 800;
}
.sw-how-icon{ display:flex; align-items:center; flex-shrink:0; color: rgba(255,255,255,.45); }
.sw-how-icon svg{ width: 16px; height: 16px; }
.sw-how-text{ flex: 1; }
.sw-how-rate{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255,200,50,.06);
  border: 1px solid rgba(255,200,50,.12);
  font-size: 13px;
  color: rgba(255,200,50,.9);
}
.sw-how-rate svg{ width: 16px; height: 16px; color: rgba(255,200,50,.7); flex-shrink:0; }
.sw-how-rate strong{ font-weight: 800; }
.sw-how-tip{
  font-size: 12px;
  color: rgba(255,255,255,.45);
  font-style: italic;
  line-height: 1.4;
}

@media (prefers-reduced-motion: reduce){
  .sw-backdrop, .sw-grid, .sw-card, .sw-details, .sw-submit, .sw-progressbar, .sw-price-layout{ transition: none !important; }
}

/* ── Two-Factor Authentication (2FA) ── */
.tfa-status{
  display:flex; align-items:center; gap:14px;
  padding:16px; border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  margin-bottom:14px;
}
.tfa-status--enabled{
  background:linear-gradient(135deg, rgba(34,197,94,.06), rgba(34,197,94,.02));
  border-color:rgba(34,197,94,.20);
}
.tfa-status--disabled{
  background:rgba(255,255,255,.02);
}
.tfa-status-icon{ flex-shrink:0; display:flex; align-items:center; }
.tfa-status--enabled .tfa-status-icon{ color:rgba(34,197,94,.85); }
.tfa-status--disabled .tfa-status-icon{ color:rgba(255,255,255,.35); }
.tfa-status-label{ font-weight:800; font-size:14px; letter-spacing:.2px; }
.tfa-status-desc{ font-size:12px; color:var(--muted); margin-top:2px; }
.tfa-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.tfa-action-btn{ display:inline-flex; align-items:center; gap:8px; }
.tfa-action-btn svg{ width:16px; height:16px; flex-shrink:0; }
.tfa-enable-btn{
  display:inline-flex; align-items:center; gap:10px;
  min-width:220px;
}
.tfa-enable-btn svg{ width:18px; height:18px; flex-shrink:0; }

/* Enrollment modal content */
.tfa-enroll-content{ display:flex; flex-direction:column; gap:14px; }
.tfa-enroll-instructions{ font-size:13px; color:rgba(255,255,255,.78); line-height:1.5; margin:0; }
.tfa-qr-wrap{
  display:flex; justify-content:center; padding:16px;
  background:rgba(255,255,255,.96); border-radius:14px;
  align-self:center;
}
.tfa-qr-img{ display:block; border-radius:4px; image-rendering:pixelated; }
.tfa-manual-key{ display:flex; flex-direction:column; gap:6px; }
.tfa-manual-key-label{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
.tfa-manual-key-value{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:10px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10);
}
.tfa-manual-key-value code{
  font-family:'SF Mono', 'Fira Code', monospace;
  font-size:13px; letter-spacing:1.5px; word-break:break-all;
  flex:1; color:rgba(255,255,255,.9);
}
.tfa-copy-btn{ padding:6px !important; min-width:0 !important; }

/* Recovery codes */
.tfa-recovery-content{ display:flex; flex-direction:column; gap:14px; }
.tfa-recovery-warning{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-radius:12px;
  background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.20);
  color:rgba(245,158,11,.9); font-size:13px; font-weight:600;
}
.tfa-recovery-warning svg{ flex-shrink:0; }
.tfa-recovery-instructions{ font-size:13px; color:rgba(255,255,255,.7); line-height:1.5; margin:0; }
.tfa-recovery-codes{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  padding:14px; border-radius:12px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
}
.tfa-recovery-code{
  padding:8px 10px; border-radius:8px;
  background:rgba(255,255,255,.04);
  text-align:center;
}
.tfa-recovery-code code{
  font-family:'SF Mono', 'Fira Code', monospace;
  font-size:13px; letter-spacing:1px;
  color:rgba(255,255,255,.88);
}
.tfa-recovery-actions{ display:flex; gap:10px; }
@media(max-width:480px){
  .tfa-recovery-codes{ grid-template-columns:1fr; }
}

.btn .btn-icon{width:16px; height:16px; display:block; margin-right:8px; flex:0 0 auto}
.btn.icon .btn-icon{margin-right:0}

.legal h3{margin:0 0 8px}
.legal h4{margin:14px 0 6px}
.legal ul{margin:8px 0 12px; padding-left:18px}
.legal-scroll{
  max-height:min(52vh, 520px);
  overflow:auto;
  padding-right:6px;
}

/* Brand */
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.3px}
.brand-badge{width:28px; height:28px; border-radius:8px; background-color:#3b82f6; background-image:url('/assets/brand/narqx-icon-white.avif'), linear-gradient(135deg,#60a5fa,#3b82f6); background-position:center, center; background-size:70%, cover; background-repeat:no-repeat, no-repeat; position:relative; overflow:hidden; flex-shrink:0}
.brand-link{color:inherit; text-decoration:none; width:fit-content}
.brand-link:hover{opacity:.95}
.brand-link:active{transform:translateY(1px)}
.brand-link:focus-visible{outline:2px solid rgba(86,156,255,.7); outline-offset:4px; border-radius:10px}

.header-inner{display:flex; align-items:center; justify-content:space-between; gap:14px}

/* Landing header glass */
body[data-guard="guestOnly"] .header{

  background: rgba(11,18,32,.88);
  border-bottom: none;
  overflow: visible;
}
body[data-guard="guestOnly"] .header .container,
body[data-guard="guestOnly"] .header .header-inner,
body[data-guard="guestOnly"] .header .lang-switcher{
  overflow: visible;
}

.lang-switcher{position:relative; display:flex; align-items:center}
.lang-btn{width:auto; min-width:0; padding:10px 12px; gap:10px; border-radius:12px}
.lang-btn-icon{display:inline-flex; align-items:center; justify-content:center}
.lang-btn-icon svg{width:18px; height:18px; display:block}
.lang-btn-text{font-weight:900; letter-spacing:.8px}

#lang-btn-flag{display:inline-flex; align-items:center; justify-content:center}

.lang-menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:220px;
  max-height:min(420px, calc(100vh - 100px));
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  background: rgba(10,16,30,.97);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  box-shadow:0 18px 60px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.06) inset;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
  padding:8px;
  z-index:9999;
}
@media(prefers-reduced-motion:no-preference){
  .lang-menu{ animation: popoverIn .14s ease-out; }
}

.lang-menu-item{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid transparent;
  background:transparent;
  color:rgba(255,255,255,.92);
  cursor:pointer;
  font-weight:700;
}
.lang-menu-item:hover{background:rgba(255,255,255,.06)}
.lang-menu-item[aria-checked="true"]{background:rgba(59,130,246,.16); border-color:rgba(59,130,246,.35)}
.lang-menu-item:focus{outline:none}
.lang-menu-item:focus-visible{box-shadow:0 0 0 3px rgba(96,165,250,.30); border-color:rgba(96,165,250,.45)}
.lang-flag{
  width:20px;
  text-align:center;
  font-family:system-ui, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.lang-flag-img{width:20px; height:20px; display:block; border-radius:2px}
.lang-flag-fallback{display:none}
.lang-flag.is-fallback .lang-flag-img{display:none}
.lang-flag.is-fallback .lang-flag-fallback{display:block}
.lang-native{flex:1; min-width:0; text-align:left}

html [data-brand="name"],
html [data-brand="slogan"]{transition:opacity .12s ease}
html:not([data-brand-ready]) [data-brand="name"],
html:not([data-brand-ready]) [data-brand="slogan"]{opacity:0}

html[data-brand-theme="xmas"] .brand [data-brand="name"],
html[data-brand-theme="xmas"] .brand-link [data-brand="name"]{text-shadow:0 0 12px rgba(255,255,255,.16)}
html[data-brand-theme="summer"] .brand [data-brand="name"],
html[data-brand-theme="summer"] .brand-link [data-brand="name"]{text-shadow:0 0 12px rgba(251,113,133,.12)}

@supports(-webkit-background-clip:text){
  html[data-brand-theme="xmas"] .brand [data-brand="name"],
  html[data-brand-theme="xmas"] .brand-link [data-brand="name"]{
    background:linear-gradient(90deg, rgba(255,255,255,.92), rgba(191,219,254,.92), rgba(255,255,255,.92));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    background-size:220% 100%;
    animation:brandTextShimmer 3.4s ease-in-out infinite;
  }
  html[data-brand-theme="summer"] .brand [data-brand="name"],
  html[data-brand-theme="summer"] .brand-link [data-brand="name"]{
    background:linear-gradient(90deg, rgba(255,255,255,.90), rgba(253,186,116,.95), rgba(251,113,133,.95), rgba(255,255,255,.90));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    background-size:240% 100%;
    animation:brandTextShimmer 3.0s ease-in-out infinite;
  }
}

html[data-brand-theme="xmas"] .brand-badge{
  background-image:url('/assets/brand/narqx-icon-white.avif'), linear-gradient(135deg,#60a5fa,#3b82f6);
  background-position:center, center; background-size:70%, cover; background-repeat:no-repeat, no-repeat;
  box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 10px 28px rgba(96,165,250,.18);
}
html[data-brand-theme="xmas"] .brand-badge::before{
  content:"";
  position:absolute;
  inset:-22px;
  opacity:.55;
  background:
    radial-gradient(circle at 10% 15%, rgba(255,255,255,.85) 0 1px, transparent 2px),
    radial-gradient(circle at 30% 40%, rgba(255,255,255,.65) 0 1px, transparent 2px),
    radial-gradient(circle at 55% 20%, rgba(255,255,255,.85) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 55%, rgba(255,255,255,.70) 0 1px, transparent 2px),
    radial-gradient(circle at 85% 30%, rgba(255,255,255,.80) 0 1px, transparent 2px),
    radial-gradient(circle at 25% 80%, rgba(255,255,255,.70) 0 1px, transparent 2px),
    radial-gradient(circle at 60% 85%, rgba(255,255,255,.80) 0 1px, transparent 2px),
    radial-gradient(circle at 90% 75%, rgba(255,255,255,.65) 0 1px, transparent 2px);
  transform:translateY(-14px);
  animation:badgeSnow 2.6s linear infinite;
}
html[data-brand-theme="xmas"] .brand-badge::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:10px;
  background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.35), transparent 45%);
  mix-blend-mode:screen;
  opacity:.7;
  animation:badgeTwinkle 2.4s ease-in-out infinite;
}

html[data-brand-theme="summer"] .brand-badge{
  background-image:url('/assets/brand/narqx-icon-white.avif'), linear-gradient(135deg,#f59e0b,#fb7185);
  background-position:center, center; background-size:70%, cover; background-repeat:no-repeat, no-repeat;
  box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 12px 30px rgba(251,113,133,.12);
}
html[data-brand-theme="summer"] .brand-badge::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:linear-gradient(120deg, transparent 35%, rgba(255,255,255,.30) 50%, transparent 65%);
  transform:translateX(-60%) rotate(18deg);
  opacity:.75;
  animation:badgeShine 2.9s ease-in-out infinite;
}
html[data-brand-theme="summer"] .brand-badge::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.24), transparent 55%);
  mix-blend-mode:screen;
  opacity:.8;
}

@keyframes badgeSnow{to{transform:translateY(14px)}}
@keyframes badgeTwinkle{0%,100%{opacity:.35}50%{opacity:.85}}
@keyframes badgeShine{0%,100%{transform:translateX(-60%) rotate(18deg)}50%{transform:translateX(60%) rotate(18deg)}}
@keyframes brandTextShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

@media(prefers-reduced-motion:reduce){
  html[data-brand-theme="xmas"] .brand-badge::before,
  html[data-brand-theme="xmas"] .brand-badge::after,
  html[data-brand-theme="summer"] .brand-badge::before,
  html[data-brand-theme="xmas"] .brand [data-brand="name"],
  html[data-brand-theme="xmas"] .brand-link [data-brand="name"],
  html[data-brand-theme="summer"] .brand [data-brand="name"],
  html[data-brand-theme="summer"] .brand-link [data-brand="name"]{animation:none}
}

/* Smooth intro animations honoring reduced motion */
@media(prefers-reduced-motion:no-preference){
  .card{animation:fadeIn .35s ease-out}
  @keyframes fadeIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
}

/* Extra large screens (TV / ultra-wide) */
@media(min-width:1920px){
  body{font-size:18px}
  .container{margin:64px auto}
}

/* ── Landing background: Aurora Editorial 2026 ── */
@property --aurora-x1 { syntax: "<percentage>"; inherits: false; initial-value: 20%; }
@property --aurora-y1 { syntax: "<percentage>"; inherits: false; initial-value: 10%; }
@property --aurora-x2 { syntax: "<percentage>"; inherits: false; initial-value: 80%; }
@property --aurora-y2 { syntax: "<percentage>"; inherits: false; initial-value: 60%; }
@property --aurora-x3 { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --aurora-y3 { syntax: "<percentage>"; inherits: false; initial-value: 90%; }

.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: #0b1220;
  overflow: hidden;
}

/* Layer 1: Primary aurora — soft radial blobs drifting slowly */
.bg::before{
  content:""; position:absolute; inset:-20%;
  background:
    radial-gradient(650px 650px at var(--aurora-x1) var(--aurora-y1), rgba(96,165,250,.13), transparent 70%),
    radial-gradient(550px 550px at var(--aurora-x2) var(--aurora-y2), rgba(139,92,246,.09), transparent 70%),
    radial-gradient(750px 750px at var(--aurora-x3) var(--aurora-y3), rgba(147,197,253,.07), transparent 70%),
    radial-gradient(400px 400px at 65% 35%, rgba(192,132,252,.05), transparent 70%);
  animation: auroraDrift 40s ease-in-out infinite alternate;
  animation-play-state: inherit;
  will-change: --aurora-x1, --aurora-y1, --aurora-x2, --aurora-y2, --aurora-x3, --aurora-y3;
  transition: opacity .8s ease;
}

/* Layer 2: Vignette — deep cinematic edges */
.bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 40%, transparent 0%, transparent 50%, rgba(6,10,20,.45) 85%, rgba(6,10,20,.70) 100%);
  pointer-events:none;
}

/* Layer 3: Second aurora band — conic gradient, counter-rotating */
.aurora-band{
  position:absolute; inset:-30%;
  background:
    conic-gradient(from 200deg at 40% 45%,
      transparent 0deg,
      rgba(96,165,250,.06) 60deg,
      rgba(139,92,246,.05) 120deg,
      transparent 180deg,
      rgba(147,197,253,.04) 240deg,
      rgba(167,139,250,.05) 300deg,
      transparent 360deg
    );
  filter: blur(80px);
  opacity: 0.7;
  animation: auroraBandSpin 50s linear infinite;
  will-change: transform;
  transition: opacity .8s ease;
}

/* Layer 4: Film grain — SVG feTurbulence, static, ultra-subtle */
.aurora-grain{
  position:absolute; inset:0;
  filter: url(#aurora-noise);
  opacity: 0.06;
  mix-blend-mode: overlay;
  pointer-events:none;
}

@keyframes auroraDrift {
  0%   { --aurora-x1:20%; --aurora-y1:10%; --aurora-x2:80%; --aurora-y2:60%; --aurora-x3:50%; --aurora-y3:90%; }
  20%  { --aurora-x1:30%; --aurora-y1:22%; --aurora-x2:70%; --aurora-y2:45%; --aurora-x3:42%; --aurora-y3:78%; }
  40%  { --aurora-x1:48%; --aurora-y1:14%; --aurora-x2:60%; --aurora-y2:68%; --aurora-x3:35%; --aurora-y3:82%; }
  60%  { --aurora-x1:28%; --aurora-y1:28%; --aurora-x2:82%; --aurora-y2:52%; --aurora-x3:52%; --aurora-y3:76%; }
  80%  { --aurora-x1:38%; --aurora-y1:18%; --aurora-x2:72%; --aurora-y2:58%; --aurora-x3:46%; --aurora-y3:84%; }
  100% { --aurora-x1:42%; --aurora-y1:22%; --aurora-x2:68%; --aurora-y2:50%; --aurora-x3:44%; --aurora-y3:72%; }
}

@keyframes auroraBandSpin {
  from { transform: rotate(0deg) scale(1.1); }
  to   { transform: rotate(360deg) scale(1.1); }
}

/* Spotlight integration: when book is hovered, aurora intensifies subtly */
body:has(.hero-book.is-hovering) .bg::before,
body.aurora-spotlight-active .bg::before{
  opacity: 1;
}
body:has(.hero-book.is-hovering) .aurora-band,
body.aurora-spotlight-active .aurora-band{
  opacity: 0.9;
}

.cloud { display:none; }

.hero-glow{
  position:fixed; inset:0; z-index:0;
  pointer-events:none;
  opacity:0; transition: opacity .4s ease;
}
.hero-glow.is-active{ opacity:1; }

/* ── Hero section ── */
.hero { text-align:center; padding:56px 0; position:relative; z-index:1; }

/* Hero grid: book left, text right */
.hero-grid{
  display:grid;
  grid-template-columns: 55% 1fr;
  align-items:center;
  gap:24px;
  text-align:left;
  max-width:1200px !important;
  margin:0 auto;
  padding:0 40px;
}

.brand-hero {
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 900;
  letter-spacing: .6px;
  line-height: 1.05;
  margin: 0 0 12px;
  color: #93c5fd;
}

/* Hero text block (right column) */
.hero-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  will-change:transform;
  transition: transform .1s linear;
}

/* Hero intro: blur-to-sharp reveal */
.brand-hero .hero-letter{
  display:inline-block;
  background: linear-gradient(90deg, #93c5fd 0%, #60a5fa 40%, #a78bfa 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity:0; filter:blur(12px);
  animation: heroLetterReveal .6s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: calc(var(--hi, 0) * 80ms);
}
.brand-hero .hero-letter[data-i="0"]{ --hi:0; }
.brand-hero .hero-letter[data-i="1"]{ --hi:1; }
.brand-hero .hero-letter[data-i="2"]{ --hi:2; }
.brand-hero .hero-letter[data-i="3"]{ --hi:3; }
.brand-hero .hero-letter[data-i="4"]{ --hi:4; }
.brand-hero .hero-letter[data-i="5"]{ --hi:5; }
.brand-hero .hero-letter[data-i="6"]{ --hi:6; }
.brand-hero .hero-letter[data-i="7"]{ --hi:7; }
.brand-hero .hero-letter[data-i="8"]{ --hi:8; }
.brand-hero .hero-letter[data-i="9"]{ --hi:9; }
.brand-hero .hero-letter[data-i="10"]{ --hi:10; }
.brand-hero .hero-letter[data-i="11"]{ --hi:11; }
.brand-hero .hero-letter[data-i="12"]{ --hi:12; }
.brand-hero .hero-letter[data-i="13"]{ --hi:13; }
.brand-hero .hero-letter[data-i="14"]{ --hi:14; }
@keyframes heroLetterReveal {
  to { opacity:1; filter:blur(0); }
}
.brand-subtitle{
  color: var(--muted); margin: 0 0 22px; max-width: 56ch;
}
.hero-actions{
  display:flex; justify-content:flex-start; gap:12px; flex-wrap:wrap;
}
@media(prefers-reduced-motion:no-preference){
  .brand-subtitle{ opacity:0; transform:translateY(8px); animation: heroFadeUp .5s ease forwards; animation-delay: .7s; }
  .hero-actions{ opacity:0; transform:translateY(8px); animation: heroFadeUp .5s ease forwards; animation-delay: .9s; }
}
.hero-actions .btn{
  width:auto; min-width:160px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 800;
  border-radius: 14px;
  letter-spacing: .3px;
  position: relative;
  overflow: hidden;
}
.hero-actions .btn:not(.secondary){
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  box-shadow: 0 4px 20px rgba(59,130,246,.25), 0 0 0 1px rgba(99,102,241,.20);
}
.hero-actions .btn:not(.secondary):hover{
  box-shadow: 0 6px 28px rgba(59,130,246,.35), 0 0 40px rgba(99,102,241,.10);
  transform: translateY(-2px);
}
.hero-actions .btn.secondary{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: rgba(255,255,255,.90);
}
.hero-actions .btn.secondary:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  transform: translateY(-2px);
}
@keyframes heroFadeUp {
  to { opacity:1; transform:none; }
}

/* ── Book reveal ── */
.hero-book{
  position:relative;
  width:100%;
  aspect-ratio: 3/4;
  justify-self:center;
  will-change:transform;
  transition: transform .1s linear;
  cursor:none;
  margin-top:-180px;
}
.hero-book,
.hero-book *{
  outline:none !important;
  -webkit-tap-highlight-color:transparent;
}
.hero-book:focus,
.hero-book:focus-visible,
.hero-book img:focus,
.hero-book img:focus-visible{
  outline:none !important;
  box-shadow:none !important;
}
.hero-book img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  user-select:none;
  -webkit-user-select:none;
  pointer-events:none;
}
.book-base{
  z-index:1;
}
.book-magic{
  z-index:2;
  -webkit-mask-image: radial-gradient(circle 110px at var(--mx, -200px) var(--my, -200px), black 0%, transparent 100%);
  mask-image: radial-gradient(circle 110px at var(--mx, -200px) var(--my, -200px), black 0%, transparent 100%);
  transition: filter .3s ease;
}
.hero-book:hover .book-magic,
.hero-book.is-hovering .book-magic{
  filter: drop-shadow(0 0 18px rgba(96,165,250,.35)) brightness(1.08);
  -webkit-mask-image: radial-gradient(circle 200px at var(--mx, -200px) var(--my, -200px), black 0%, transparent 100%);
  mask-image: radial-gradient(circle 200px at var(--mx, -200px) var(--my, -200px), black 0%, transparent 100%);
}

/* ── Echo trails ── */
.echo-container{
  position:fixed;
  inset:0;
  z-index:3;
  pointer-events:none;
  overflow:hidden;
}
.echo-dot{
  position:absolute;
  width:80px;
  height:80px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(96,165,250,.18) 0%, transparent 70%);
  transform:translate(-50%,-50%) scale(1);
  opacity:0.5;
  pointer-events:none;
  animation: echoFade 400ms ease-out forwards;
}
@keyframes echoFade{
  to{ opacity:0; transform:translate(-50%,-50%) scale(1.8); filter:blur(8px); }
}

/* ── Noise / grid overlay ── */
.hero-noise{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0.05;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:48px 48px;
  will-change:transform;
  transition: transform .15s linear;
}

/* ── Landing page wide containers (header + footer) ── */
.wrapper[data-guard="guestOnly"] .header .container{
  max-width:1200px;
}

/* ── Footer landing layout ── */
.footer-landing{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:1200px !important;
  padding-top: 16px;
  padding-bottom: 16px;
}
.footer-social-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:10px;
  color:rgba(255,255,255,.45);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  transition: color .2s, background .2s, border-color .2s;
  text-decoration:none;
}
.footer-social-btn:hover{
  color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.12);
}
.footer-social-btn:focus-visible{
  outline:2px solid rgba(96,165,250,.50);
  outline-offset:2px;
}

/* ── Mobile responsive ── */
@media(max-width:768px){
  .hero-grid{
    grid-template-columns:1fr;
    text-align:center;
    padding:0 20px;
    gap:32px;
  }
  .hero-text{
    align-items:center;
  }
  .hero-book{
    max-width:640px;
    order:-1;
    margin-top:-60px;
  }
  .hero-actions{
    justify-content:center;
  }
  .brand-subtitle{
    margin:0 auto 22px;
  }
}

/* Reduced motion: disable all animations, show static */
@media(prefers-reduced-motion:reduce){
  .bg::before{ animation:none; }
  .aurora-band{ animation:none; transform:none; }
  .aurora-grain{ opacity:0.04; }
  .brand-hero .hero-letter{ opacity:1; filter:none; animation:none; background: linear-gradient(90deg, #93c5fd 0%, #60a5fa 40%, #a78bfa 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .brand-subtitle{ opacity:1; transform:none; animation:none; }
  .hero-actions{ opacity:1; transform:none; animation:none; }
  .hero-glow{ display:none; }
  .echo-dot{ animation:none; display:none; }
  .hero-noise{ opacity:0.03; }
  .book-magic{ filter:none;
    -webkit-mask-image:none; mask-image:none;
  }
}

/* App shell (X-like sidebar + dynamic right panel) */
.app-shell{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap:18px;
  align-items:stretch;
  flex: 1;
  min-height: 0;
  margin:0;
}

@media(min-width:981px){
  .app-shell{ min-height: calc(100dvh - 36px); }
}
@media(min-width:1200px){
  .app-shell{ grid-template-columns: 280px minmax(0, 1fr) 360px; }
}
@media(max-width:980px){
  .app-shell{ grid-template-columns: 1fr; }
}

body.no-right-rail .app-aside{ visibility:hidden; pointer-events:none; }
@media(min-width:1200px){
  body.no-right-rail .app-shell{ grid-template-columns: 280px 1fr; }
  body.no-right-rail .app-aside{ display:none; }
}
@media(max-width:1199px){
  body.no-right-rail .app-aside{ display:none; }
}

.app-aside{ display:none; }
@media(min-width:1200px){
  .app-aside{ display:block; }
}

.right-rail{ position: sticky; top: 0; display:flex; flex-direction:column; gap:16px; }
.right-rail[hidden]{ display:flex !important; visibility:hidden; pointer-events:none; }
.right-rail:not([hidden]){ visibility:visible; pointer-events:auto; }
@media(prefers-reduced-motion:no-preference){
  .right-rail:not([hidden]){ animation:rightRailIn .25s ease both; }
  @keyframes rightRailIn{ from{opacity:0} to{opacity:1} }
}
.right-card{ padding: 18px; background: linear-gradient(180deg,rgba(255,255,255,0.025),rgba(255,255,255,0.00)), var(--surface); border:1px solid rgba(255,255,255,.06); border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,.18); }
.right-card-title{ font-weight: 900; font-size:14px; letter-spacing:.2px; margin-bottom: 10px; }
.right-card-sub{ color: var(--muted); font-size: 12px; margin-top: -6px; margin-bottom: 10px; }
.right-card-cta{ width:100%; margin-top: 10px; }

.right-card-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom: 10px; }
.right-card-title-btn{
  appearance:none;
  border:none;
  background:transparent;
  color: var(--text);
  padding: 0;
  margin: 0;
  font-weight: 900;
  font-size:14px;
  letter-spacing:.2px;
  cursor:pointer;
  text-align:left;
}
.right-card-title-btn:hover{ text-decoration: underline; }
.right-card-title-btn:focus{ outline:none; }
.right-card-title-btn:focus-visible{ box-shadow: 0 0 0 3px rgba(96,165,250,.18); border-radius: 10px; }
.right-card-more{ width:auto; min-width:0; padding:8px; border-radius: 12px; }
.right-card-actions{ display:flex; justify-content:flex-end; margin-top: 10px; }

/* --- Right-column invitations card --- */
.right-invites-card{ padding:16px 18px; }
.right-invites-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.right-invites-icon{
  flex:0 0 auto; width:40px; height:40px; border-radius:12px;
  background:linear-gradient(135deg,rgba(124,92,252,.18),rgba(124,92,252,.06));
  display:flex; align-items:center; justify-content:center;
  color:var(--accent,#7c5cfc);
}
.right-invites-meta{ flex:1 1 auto; min-width:0; }
.right-invites-meta .right-card-title{ margin-bottom:2px; }
.right-invites-quota{ font-size:12px; }
.right-invites-bar-wrap{
  height:4px; border-radius:4px; background:rgba(255,255,255,.06);
  margin-bottom:12px; overflow:hidden;
}
.right-invites-bar{
  height:100%; border-radius:4px;
  background:linear-gradient(90deg,var(--accent,#7c5cfc),#a78bfa);
  transition:width .4s ease;
}
.right-invites-overlay{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:14px 10px 10px; margin-bottom:8px;
  border-radius:12px;
  background:linear-gradient(135deg,rgba(124,92,252,.12),rgba(167,139,250,.08));
  border:1px solid rgba(124,92,252,.18);
}
.right-invites-overlay[hidden]{ display:none; }
.right-invites-overlay-icon{
  color:var(--accent,#7c5cfc); margin-bottom:6px;
  animation:inviteOverlayPulse 2.5s ease-in-out infinite;
}
@keyframes inviteOverlayPulse{
  0%,100%{ transform:scale(1); opacity:.85; }
  50%{ transform:scale(1.08); opacity:1; }
}
.right-invites-overlay-heading{
  font-weight:800; font-size:13px; line-height:1.3;
  color:var(--text-primary,#fff); margin-bottom:3px;
}
.right-invites-overlay-sub{
  font-size:11px; line-height:1.4;
  color:rgba(255,255,255,.55);
}
.invites-open-access-banner{
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; margin-bottom:14px;
  border-radius:12px;
  background:linear-gradient(135deg,rgba(124,92,252,.10),rgba(52,211,153,.08));
  border:1px solid rgba(124,92,252,.15);
  font-size:13px; font-weight:600; line-height:1.4;
  color:var(--text-primary,#fff);
}
.invites-open-access-banner[hidden]{ display:none; }
.invites-open-access-banner .invites-open-access-icon{
  flex-shrink:0; color:var(--accent,#7c5cfc);
}
.right-invites-actions{ display:flex; gap:6px; }
.right-invites-gen{ flex:1 1 auto; }
.right-invites-open{ flex:0 0 auto; min-width:0; padding:8px 10px; }

/* --- Suggested follows widget (sf-*) --- */
.sf-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.sf-title{ font-weight:800; font-size:14px; }
.sf-list{ display:flex; flex-direction:column; gap:10px; }
.sf-item{ display:flex; align-items:center; gap:10px; }
.sf-link{ display:flex; align-items:center; gap:10px; flex:1; min-width:0; text-decoration:none; color:inherit; border-radius:10px; padding:4px; margin:-4px; transition:background .15s; }
.sf-link:hover{ background:rgba(255,255,255,.04); }
.sf-avatar{ width:36px; height:36px; border-radius:999px; object-fit:cover; flex-shrink:0; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); }
.sf-avatar--fallback{ display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; color:rgba(255,255,255,.50); }
.sf-meta{ flex:1; min-width:0; }
.sf-name{ font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sf-handle{ color:rgba(255,255,255,.40); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sf-follow-btn{ width:auto; min-width:0; padding:5px 14px; font-size:11px; border-radius:999px; font-weight:700; flex-shrink:0; }

.visits-modal{ width: min(740px, 100%); }
.visits-modal .modal-body{ padding: 0; }
.visits-modal-list{
  max-height: min(520px, calc(100dvh - 220px));
  overflow:auto;
  padding: 10px 12px;
}
.visits-modal-item{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 10px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  text-align:left;
  transition: background .16s ease, border-color .16s ease, transform .05s ease;
}
.visits-modal-item:hover{ background: rgba(255,255,255,.04); border-color: rgba(96,165,250,.28); }
.visits-modal-item:active{ transform: translateY(1px); }
.visits-modal-item:focus{ outline:none; }
.visits-modal-item:focus-visible{ box-shadow: 0 0 0 3px rgba(96,165,250,.20); border-color: rgba(96,165,250,.40); }
.visits-modal-meta{ min-width:0; flex: 1 1 auto; }

.right-search{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.right-search:focus-within{ border-color: rgba(96,165,250,.40); box-shadow: 0 0 0 3px rgba(96,165,250,.10); background: rgba(255,255,255,.04); }
.right-search-icon{ width:18px; height:18px; opacity:.65; flex:0 0 auto; transition: opacity .18s ease; }
.right-search:focus-within .right-search-icon{ opacity: .9; }
.right-search-input{
  width:100%;
  border:none;
  outline:none;
  background: transparent;
  color: var(--text);
  font-size:14px;
}

.trending-list{ display:flex; flex-direction:column; gap:10px; }

.trending-item{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
  padding:10px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.trending-item:hover{ transform: translateY(-2px); border-color: rgba(96,165,250,.25); background: rgba(255,255,255,.035); box-shadow: 0 8px 28px rgba(0,0,0,.22); }
.trending-item:active{ transform: translateY(0px); box-shadow: none; }
.trending-item:focus-visible{ outline: 2px solid rgba(96,165,250,.45); outline-offset: 2px; }

.trending-cover{ width:50px; height:66px; border-radius: 8px; overflow:hidden; flex: 0 0 auto; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); position: relative; }
.trending-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.trending-cover .nq-cover{ aspect-ratio: auto; width:100%; height:100%; border-radius: 0; }

.trending-meta{ min-width:0; flex: 1 1 auto; }
.trending-title{ font-weight: 900; font-size: 13px; letter-spacing:.15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trending-item:hover .trending-title{ text-decoration: underline; }
.trending-author{ margin-top: 2px; color: var(--muted); font-size: 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

 .trending-item-ranking{ gap:12px; }
 .trending-rank{ width: 40px; text-align:center; font-weight: 950; color: rgba(255,255,255,.86); }
 .trending-badges{ margin-top: 6px; }
 .trending-badge{ display:inline-flex; align-items:center; padding: 4px 8px; border-radius: 999px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.02); font-size: 11px; font-weight: 900; color: rgba(255,255,255,.86); }

.trending-metric{
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 900;
  color: rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  padding: 6px 8px;
  border-radius: 999px;
}

.trending-item.is-skeleton{ cursor: default; }
.trending-item.is-skeleton:hover{ transform:none; box-shadow:none; border-color: rgba(255,255,255,.08); }

 /* ── Work-sheet panel (2026 premium) ── */
 @keyframes ws-slide-up{
  from{ opacity:0; transform:translateY(24px) scale(.97); }
  to{ opacity:1; transform:translateY(0) scale(1); }
 }
 @keyframes ws-glow-pulse{
  0%,100%{ opacity:.6; }
  50%{ opacity:1; }
 }
 @keyframes ws-highlight-comment{
  0%,100%{ background:transparent; }
  25%{ background:rgba(96,165,250,.12); }
  50%{ background:transparent; }
  75%{ background:rgba(96,165,250,.12); }
 }
 @media(prefers-reduced-motion:reduce){
  @keyframes ws-slide-up{ from{opacity:0} to{opacity:1} }
  @keyframes ws-glow-pulse{ from{opacity:.8} to{opacity:.8} }
  @keyframes ws-highlight-comment{ from{background:rgba(96,165,250,.08)} to{background:rgba(96,165,250,.08)} }
 }

 .work-sheet-backdrop{ backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
 .work-sheet-modal{
  position: relative;
  width: min(680px, calc(100vw - 20px));
  max-height: min(92vh, calc(100dvh - 32px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  background: rgba(14,14,20,.98);
  box-shadow: 0 32px 100px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.03) inset;
  animation: ws-slide-up .32s cubic-bezier(.22,1,.36,1) both;
 }
 .work-sheet-close-btn{
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: rgba(255,255,255,.80);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .14s ease, color .18s ease;
 }
 .work-sheet-close-btn:hover{ background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); color:#fff; transform: scale(1.08); }
 .work-sheet-close-btn:active{ transform: scale(.92); }
 .work-sheet-close-btn:focus-visible{ outline:2px solid rgba(96,165,250,.5); outline-offset:2px; }

 /* ── Hero: cinematic backdrop + cover + meta ── */
 .work-sheet-hero{
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
 }
 .work-sheet-hero-backdrop{
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(40px) saturate(1.6) brightness(.35);
  transform: scale(1.3);
  pointer-events: none;
  z-index: 0;
 }
 .work-sheet-hero-backdrop::after{
  content:'';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,14,20,.3) 0%, rgba(14,14,20,.92) 100%);
 }
 .work-sheet-hero-inner{
  position: relative;
  z-index: 1;
  display: flex;
  gap: 28px;
  align-items: flex-end;
  padding: 48px 32px 28px;
 }

 .work-sheet-hero .nq-cover{
  width: 170px;
  min-width: 170px;
  aspect-ratio: 3/4;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 16px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset;
  transition: transform .3s ease, box-shadow .3s ease;
 }
 .work-sheet-hero .nq-cover:hover{
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 20px 56px rgba(0,0,0,.6), 0 0 80px rgba(96,165,250,.08);
 }

 .work-sheet-hero-meta{
  min-width: 0;
  flex: 1 1 auto;
  padding-right: 40px;
  padding-bottom: 4px;
 }
 .work-sheet-title{
  font-weight: 950;
  letter-spacing: -.3px;
  font-size: clamp(20px, 4vw, 26px);
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
 }
 .work-sheet-author-row{ margin-top: 10px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
 .work-sheet-author-link{
  color: rgba(96,165,250,.95);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .1px;
  transition: color .15s ease, text-shadow .15s ease;
 }
 .work-sheet-author-link:hover{ color: #60a5fa; text-decoration: underline; text-shadow: 0 0 12px rgba(96,165,250,.3); }
 .work-sheet-author{ color: var(--muted); }

 /* Badges */
 .work-sheet-badges{ display:flex; gap:6px; flex-wrap:wrap; margin-top: 14px; }
 .work-badge{
  display:inline-flex; align-items:center; gap:4px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  backdrop-filter: blur(4px);
  color: rgba(255,255,255,.72);
 }
 .work-badge.muted{ color: rgba(255,255,255,.50); border-color: rgba(255,255,255,.06); }
 .work-badge.paid{ color: #fbbf24; border-color: rgba(251,191,36,.22); background: rgba(251,191,36,.06); }
 .work-badge.coins{ color: #fbbf24; border-color: rgba(251,191,36,.22); background: rgba(251,191,36,.06); }
 .work-badge.audiobook{ color: #a78bfa; border-color: rgba(167,139,250,.22); background: rgba(167,139,250,.06); }
 .work-badge.owned{ color: #34d399; border-color: rgba(52,211,153,.22); background: rgba(52,211,153,.06); }
 .work-badge.reading{ color: #60a5fa; border-color: rgba(96,165,250,.22); background: rgba(96,165,250,.06); }
 .work-badge.new{ color: #f472b6; border-color: rgba(244,114,182,.22); background: rgba(244,114,182,.06); }
 .work-badge.complete{ color: #34d399; border-color: rgba(52,211,153,.22); background: rgba(52,211,153,.06); }

 /* Metrics row */
 .work-sheet-metrics{ margin-top: 14px; display:flex; gap:16px; flex-wrap:wrap; }
 .work-metric{
  font-size: 12px; color: rgba(255,255,255,.55);
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 600;
 }
 .work-metric svg{ width:14px; height:14px; opacity:.5; flex-shrink:0; }

 /* ── Body: scrollable content below hero ── */
 .work-sheet-body{
  overflow-y: auto;
  flex: 1 1 auto;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.10) transparent;
 }
 .work-sheet-body::-webkit-scrollbar{ width: 5px; }
 .work-sheet-body::-webkit-scrollbar-track{ background: transparent; }
 .work-sheet-body::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.10); border-radius: 999px; }

 /* ── Actions bar (sticky inside body) ── */
 .work-sheet-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  padding: 18px 32px 14px;
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(14,14,20,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.05);
 }
 .work-primary{
  min-width: 0; width: auto;
  padding: 11px 30px;
  font-weight: 800; letter-spacing: .3px; font-size: 13.5px;
  background: linear-gradient(135deg, #6366f1 0%, #3b82f6 100%);
  border: none;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(99,102,241,.25), 0 0 0 1px rgba(255,255,255,.06) inset;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  display: inline-flex; align-items: center; gap: 7px;
 }
 .work-primary svg{ width:16px; height:16px; flex-shrink:0; }
 .work-primary:hover{ transform: translateY(-1px); box-shadow: 0 8px 28px rgba(99,102,241,.35); filter: brightness(1.08); }
 .work-primary:active{ transform: translateY(0); box-shadow: 0 2px 10px rgba(99,102,241,.2); }
 .work-primary:focus-visible{ outline:2px solid rgba(99,102,241,.6); outline-offset:2px; }
 .work-primary:disabled{ opacity:.5; pointer-events:none; }
 .work-primary.is-buy{
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
  box-shadow: 0 4px 20px rgba(245,158,11,.25);
  color: #1a1a2e;
 }
 .work-primary.is-buy:hover{ box-shadow: 0 8px 28px rgba(245,158,11,.35); }
 .work-action-btn{
  font-size: 12px; padding: 9px 16px; width: auto; min-width: 0;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.70);
  display: inline-flex; align-items: center; gap: 5px;
  transition: background .15s ease, border-color .15s ease, transform .12s ease, color .15s ease;
 }
 .work-action-btn svg{ width:14px; height:14px; opacity:.6; flex-shrink:0; }
 .work-action-btn:hover{ background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); transform: translateY(-1px); color:rgba(255,255,255,.9); }
 .work-action-btn:focus-visible{ outline:2px solid rgba(96,165,250,.4); outline-offset:2px; }
 .work-action-btn.is-active{ color:#60a5fa; border-color:rgba(96,165,250,.25); background:rgba(96,165,250,.06); }

 /* ── Synopsis section ── */
 .work-sheet-synopsis-section{ padding: 18px 32px 0; }
 .work-sheet-synopsis{
  color: rgba(255,255,255,.62);
  line-height: 1.65;
  font-size: 13.5px;
  white-space: pre-line;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  transition: max-height .3s ease;
 }
 .work-sheet-synopsis.is-expanded{
  -webkit-line-clamp: unset;
  line-clamp: unset;
  display: block;
 }
 .work-sheet-synopsis-toggle{
  display: inline;
  background: none; border: none; padding: 0;
  color: rgba(96,165,250,.85);
  font-size: 12.5px; font-weight: 700;
  cursor: pointer;
  margin-top: 4px;
 }
 .work-sheet-synopsis-toggle:hover{ color:#60a5fa; text-decoration:underline; }
 .work-sheet-hook{
  margin-top: 12px;
  padding: 10px 16px;
  border-left: 3px solid rgba(96,165,250,.3);
  background: rgba(96,165,250,.03);
  border-radius: 0 10px 10px 0;
  color: rgba(255,255,255,.55);
  font-style: italic;
  font-size: 13px;
  line-height: 1.55;
 }

 /* ── Progress bar ── */
 .work-sheet-progress{ padding: 14px 32px 0; }
 .work-sheet-progress-row{ display:flex; align-items:center; gap:12px; }
 .work-sheet-progress-bar{
  flex: 1 1 auto;
  height: 6px;
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  overflow: hidden;
 }
 .work-sheet-progress-fill{
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #3b82f6);
  border-radius: 999px;
  transition: width .6s cubic-bezier(.22,1,.36,1);
  min-width: 3px;
  box-shadow: 0 0 10px rgba(99,102,241,.3);
 }
 .work-sheet-progress-label{
  font-size: 11px; color: rgba(255,255,255,.45); font-weight: 700;
  white-space: nowrap;
 }

 /* ── Sections (chapters, reviews, author, admin) ── */
 .work-sheet-section{ padding: 20px 32px 0; }
 .work-sheet-section + .work-sheet-section{ padding-top: 4px; }
 .work-sheet-section:last-child{ padding-bottom: 28px; }
 .work-sheet-section-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
 }
 .work-sheet-section-title{
  font-weight: 800; font-size: 13px;
  color: rgba(255,255,255,.80);
  text-transform: uppercase;
  letter-spacing: .6px;
  display: flex; align-items: center; gap: 8px;
 }
 .work-sheet-count{ font-weight: 500; color: rgba(255,255,255,.32); font-size: 12px; text-transform: none; letter-spacing: 0; }
 .work-sheet-section-action{
  font-size: 12px; font-weight: 600;
  color: rgba(96,165,250,.8);
  background: none; border: none; padding: 0; cursor: pointer;
 }
 .work-sheet-section-action:hover{ color:#60a5fa; text-decoration:underline; }

 /* ── Chapters list ── */
 .work-chapters{ display:flex; flex-direction:column; gap:4px; }
 .work-chapter{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  text-align:left;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.04);
  background: rgba(255,255,255,.015);
  color: rgba(255,255,255,.85);
  cursor:pointer;
  transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
 }
 .work-chapter:hover{
  transform: translateX(3px);
  border-color: rgba(96,165,250,.18);
  background: rgba(96,165,250,.04);
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
 }
 .work-chapter:active{ transform: translateX(1px); }
 .work-chapter:focus-visible{ outline: 2px solid rgba(96,165,250,.45); outline-offset: 2px; }
 .work-chapter.locked{ opacity: .45; }
 .work-chapter.locked:hover{ opacity: .6; }
 .work-chapter.is-current{ border-color: rgba(99,102,241,.3); background: rgba(99,102,241,.05); }
 .work-chapter.is-read .work-chapter-num{ color:rgba(52,211,153,.6); border-color:rgba(52,211,153,.15); background:rgba(52,211,153,.06); }
 .work-chapter-left{ display: flex; align-items: center; gap: 10px; min-width: 0; flex:1 1 auto; }
 .work-chapter-num{
  font-size: 10px; font-weight: 800;
  color: rgba(96,165,250,.5);
  min-width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  background: rgba(96,165,250,.05);
  border: 1px solid rgba(96,165,250,.08);
  flex-shrink: 0;
 }
 .work-chapter-info{ min-width:0; flex:1 1 auto; }
 .work-chapter-title{ font-weight: 600; letter-spacing:.02px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .work-chapter-sub{ font-size:11px; color:rgba(255,255,255,.35); margin-top:1px; }
 .work-chapter-right{ color: rgba(255,255,255,.35); flex-shrink: 0; display: flex; align-items: center; gap:6px; }
 .work-chapter-lock{ color: rgba(255,255,255,.25); }
 .work-chapter-lock.unlocked{ color: rgba(96,165,250,.4); }
 .work-chapter-new{
  font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
  color:#f472b6; padding:2px 6px; border-radius:4px;
  background:rgba(244,114,182,.08); border:1px solid rgba(244,114,182,.15);
 }
 .work-chapters-more{
  text-align:center; padding:8px 0 2px;
 }
 .work-chapters-more-btn{
  font-size:12px; font-weight:700; color:rgba(96,165,250,.75);
  background:none; border:none; cursor:pointer; padding:6px 16px;
 }
 .work-chapters-more-btn:hover{ color:#60a5fa; text-decoration:underline; }

 /* Chapter filters */
 .work-chapters-filters{
  display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap;
 }
 .work-chapters-filter{
  font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.02);
  color:rgba(255,255,255,.50); cursor:pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
 }
 .work-chapters-filter:hover{ background:rgba(255,255,255,.05); color:rgba(255,255,255,.75); }
 .work-chapters-filter.active{ color:#60a5fa; border-color:rgba(96,165,250,.25); background:rgba(96,165,250,.06); }

 /* ── Reviews / social proof ── */
 .work-reviews{ display:flex; flex-direction:column; gap:8px; }
 .work-review{
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.04);
  background: rgba(255,255,255,.015);
  transition: border-color .14s ease;
 }
 .work-review:hover{ border-color:rgba(255,255,255,.08); }
 .work-review-head{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
 .work-review-avatar{
  width:24px; height:24px; border-radius:50%;
  background:rgba(96,165,250,.08); display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:800; color:rgba(96,165,250,.6); flex-shrink:0;
 }
 .work-review-handle{ font-size:12px; font-weight:700; color:rgba(255,255,255,.70); }
 .work-review-time{ font-size:11px; color:rgba(255,255,255,.30); margin-left:auto; }
 .work-review-body{
  font-size:12.5px; color:rgba(255,255,255,.55); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
 }
 .work-review.is-highlight{
  animation: ws-highlight-comment 1.5s ease;
  border-color: rgba(96,165,250,.2);
 }

 /* ── Author panel ── */
 .work-sheet-author-panel{
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(168,85,247,.12);
  background: rgba(168,85,247,.03);
 }
 .work-sheet-author-panel-title{
  font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
  color:rgba(168,85,247,.7); margin-bottom:10px;
 }
 .work-sheet-author-stats{
  display:flex; gap:16px; flex-wrap:wrap; margin-bottom:12px;
 }
 .work-sheet-author-stat{
  font-size:12px; color:rgba(255,255,255,.55);
 }
 .work-sheet-author-stat strong{ color:rgba(255,255,255,.85); font-weight:800; }
 .work-sheet-author-actions{ display:flex; gap:6px; flex-wrap:wrap; }
 .work-sheet-author-btn{
  font-size:11px; font-weight:700; padding:6px 14px; border-radius:8px;
  border:1px solid rgba(168,85,247,.15); background:rgba(168,85,247,.05);
  color:rgba(168,85,247,.8); cursor:pointer;
  transition: background .14s ease, border-color .14s ease;
 }
 .work-sheet-author-btn:hover{ background:rgba(168,85,247,.1); border-color:rgba(168,85,247,.25); }

 /* ── Admin panel ── */
 .work-sheet-admin-panel{
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(239,68,68,.12);
  background: rgba(239,68,68,.03);
 }
 .work-sheet-admin-panel-title{
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
  color:rgba(239,68,68,.6); margin-bottom:8px;
 }
 .work-sheet-admin-actions{ display:flex; gap:6px; flex-wrap:wrap; }
 .work-sheet-admin-btn{
  font-size:11px; font-weight:700; padding:5px 12px; border-radius:8px;
  border:1px solid rgba(239,68,68,.12); background:rgba(239,68,68,.04);
  color:rgba(239,68,68,.7); cursor:pointer;
  transition: background .14s ease, border-color .14s ease;
 }
 .work-sheet-admin-btn:hover{ background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.2); }

 /* ── Skeleton loader ── */
 @keyframes ws-skel-shimmer{
  0%{ background-position:-200% 0; }
  100%{ background-position:200% 0; }
 }
 .work-sheet-skel{
  border-radius:8px;
  background: linear-gradient(90deg, rgba(255,255,255,.03) 25%, rgba(255,255,255,.06) 50%, rgba(255,255,255,.03) 75%);
  background-size: 200% 100%;
  animation: ws-skel-shimmer 1.5s ease infinite;
 }
 .work-sheet-skel-title{ height:22px; width:65%; margin-bottom:10px; }
 .work-sheet-skel-author{ height:14px; width:30%; margin-bottom:14px; }
 .work-sheet-skel-line{ height:12px; width:90%; margin-bottom:6px; }
 .work-sheet-skel-line.sm{ width:60%; }

 /* ── Share header (kept) ── */
 .work-share-header{ display:flex; align-items:center; gap:12px; margin-bottom: 12px; }
 .work-share-cover{ width:54px; height:72px; border-radius: 10px; overflow:hidden; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); object-fit:cover; }
 .work-share-title{ font-weight: 950; }
 .work-share-author{ color: var(--muted); font-size: 12px; margin-top: 3px; }

 /* ── Responsive ── */
 @media(max-width:640px){
  .work-sheet-modal{ width: calc(100vw - 12px); border-radius: 20px; max-height: min(95vh, calc(100dvh - 16px)); }
  .work-sheet-hero-inner{ flex-direction:column; align-items: center; text-align: center; padding: 40px 20px 20px; gap: 16px; }
  .work-sheet-hero .nq-cover{ width: 140px; min-width: 140px; }
  .work-sheet-hero-meta{ padding-right: 0; }
  .work-sheet-title{ font-size: 20px; }
  .work-sheet-actions{ padding: 14px 20px 12px; justify-content: center; }
  .work-sheet-synopsis-section{ padding: 14px 20px 0; }
  .work-sheet-progress{ padding: 12px 20px 0; }
  .work-sheet-section{ padding: 16px 20px 0; }
  .work-sheet-section:last-child{ padding-bottom: 24px; }
  .work-sheet-badges{ justify-content: center; }
  .work-sheet-metrics{ justify-content: center; }
  .work-sheet-author-row{ justify-content: center; }
  .work-primary{ padding: 10px 24px; font-size: 13px; }
 }

/* === Search view (modern) === */
.search-form{ margin-top: 16px; }
.search-input-wrap{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 12px 18px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.search-input-wrap:focus-within{
  border-color: rgba(96,165,250,.45);
  box-shadow: 0 0 0 3px rgba(96,165,250,.12);
  background: rgba(255,255,255,.05);
}
.search-icon{ width:20px; height:20px; opacity:.55; flex:0 0 auto; transition: opacity .18s ease; }
.search-input-wrap:focus-within .search-icon{ opacity: 1; color: #93c5fd; }
.search-input{ border:none; background:transparent; padding:0; font-size: 15px; flex:1; min-width:0; color:var(--text); outline:none; }
.search-input:focus{ box-shadow:none; border:none; }
.search-input::placeholder{ color: rgba(255,255,255,.35); }
.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-decoration{ -webkit-appearance:none; appearance:none; display:none; }
.search-clear{
  appearance:none; border:none; background:none; padding:4px; cursor:pointer;
  color:rgba(255,255,255,.40); transition:color .15s ease;
  display:none; line-height:1;
}
.search-clear:hover{ color:rgba(255,255,255,.80); }
.search-input-wrap.has-value .search-clear{ display:block; }

.search-tabs{
  display:flex; gap:8px; flex-wrap:wrap; margin-top: 14px;
}
.search-tabs .btn{
  width:auto; min-width:0; padding:7px 16px; font-size:13px;
  border-radius:999px; font-weight:600;
  border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.70); transition:all .16s ease;
}
.search-tabs .btn:hover{
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18);
  color:rgba(255,255,255,.95);
}
.search-tab.active{
  background:rgba(59,130,246,.18) !important; border-color:rgba(59,130,246,.50) !important;
  color:#93c5fd !important; box-shadow:0 0 0 2px rgba(59,130,246,.10);
}

.search-tags-wrap{
  margin-top:12px;
}
.search-tags-chips{
  display:flex; gap:6px; flex-wrap:wrap;
}
.search-tag-chip{
  appearance:none; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.65); font-size:12px; font-weight:600; padding:5px 12px;
  border-radius:999px; cursor:pointer; transition:all .16s ease; user-select:none;
}
.search-tag-chip:hover{
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18);
  color:rgba(255,255,255,.90);
}
.search-tag-chip.active{
  background:rgba(59,130,246,.16); border-color:rgba(59,130,246,.45);
  color:#93c5fd;
}

.search-filters-toggle{
  appearance:none; border:none; background:none; padding:0;
  color:rgba(255,255,255,.50); font-size:12px; font-weight:600;
  cursor:pointer; margin-top:12px; display:flex; align-items:center; gap:6px;
  transition:color .15s ease;
}
.search-filters-toggle:hover{ color:rgba(255,255,255,.80); }
.search-filters-toggle .search-filters-chevron{
  width:14px; height:14px; transition:transform .2s ease;
}
.search-filters-toggle[aria-expanded="true"] .search-filters-chevron{
  transform:rotate(180deg);
}

.search-filters{
  margin-top: 10px; display:grid; grid-template-columns:1fr 1fr auto; gap:10px;
  align-items:center;
}
.search-filters .input{
  width:100%; min-width:0; font-size:13px; padding:8px 12px;
  border-radius:10px;
}
.search-filters[hidden]{ display:none; }

.search-status{
  margin-top:14px; font-size:13px; color:rgba(255,255,255,.50);
}
.search-status:empty{ display:none; }

/* Small inline spinner */
.spinner-small{
  display:inline-block; width:18px; height:18px;
  border:2px solid rgba(255,255,255,.12);
  border-top-color:rgba(96,165,250,.70);
  border-radius:50%;
  animation:spinSmall .6s linear infinite;
}
@keyframes spinSmall{ to{transform:rotate(360deg)} }

/* ── App-wide loading spinner (reusable) ──────────────────────────────────── */
.app-loader{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:28px 0 12px;
}
.app-loader--compact{ padding:16px 0 8px; gap:8px; }
.app-loader--inline{ display:inline-flex; flex-direction:row; padding:0; gap:8px; }
.app-loader-ring{
  position:relative; width:48px; height:48px;
}
.app-loader--compact .app-loader-ring{ width:36px; height:36px; }
.app-loader-ring::before{
  content:""; position:absolute; inset:0;
  border-radius:50%;
  border:2.5px solid rgba(255,255,255,.08);
}
.app-loader-ring::after{
  content:""; position:absolute; inset:0;
  border-radius:50%;
  border:2.5px solid transparent;
  border-top-color:rgba(168,130,255,.85);
  border-right-color:rgba(168,130,255,.35);
  animation:app-spin .9s cubic-bezier(.4,.15,.6,.85) infinite;
}
.app-loader-logo{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  user-select:none; pointer-events:none;
  animation:app-pulse 1.8s ease-in-out infinite;
}
.app-loader-logo img{
  width:26px; height:26px; border-radius:50%; object-fit:cover;
}
.app-loader--compact .app-loader-logo img{ width:20px; height:20px; }
.app-loader-text{
  font-size:12px; font-weight:500; letter-spacing:.04em; text-transform:uppercase;
  color:rgba(255,255,255,.35);
  animation:app-pulse 1.8s ease-in-out infinite;
}
@keyframes app-spin{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}
@keyframes app-pulse{
  0%,100%{opacity:.45}
  50%{opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .app-loader-ring::after{ animation-duration:2s; }
  .app-loader-logo,.app-loader-text{ animation:none; opacity:.7; }
}

.search-results{ margin-top: 14px; display:flex; flex-direction:column; gap:10px; }

.search-item{
  display:flex; align-items:flex-start; gap:14px;
  border:1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.02);
  border-radius: 14px; padding: 14px 16px;
  transition: background .15s ease, border-color .15s ease;
}
.search-item:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
}

.search-item-avatar{
  width:42px; height:42px; border-radius:999px; flex:0 0 auto;
  background:rgba(255,255,255,.06); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:16px; color:rgba(255,255,255,.60);
}
.search-item-avatar img{
  width:100%; height:100%; object-fit:cover; display:block;
}

.search-item-body{ flex:1; min-width:0; }
.search-item-title{ font-weight: 800; font-size:14px; letter-spacing:.1px; }
.search-item-handle{ color:rgba(255,255,255,.45); font-size:12px; margin-top:1px; }
.search-item-tags{ display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; }
.search-item-tag{ font-size:11px; padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.55); }
.search-item-meta{ color: var(--muted); font-size: 12px; margin-top: 4px; }
.search-item-actions{ margin-top: 10px; display:flex; gap:8px; flex-wrap:wrap; }
.search-item-actions .btn{
  width:auto; min-width:0; padding:6px 16px; font-size:12px;
  border-radius:999px; font-weight:600;
}

.search-item-type{
  display:inline-flex; align-items:center; padding:3px 10px;
  border-radius:999px; font-size:11px; font-weight:700;
  border:1px solid rgba(255,255,255,.10); color:rgba(255,255,255,.55);
  flex:0 0 auto; align-self:center;
}

.search-empty{
  text-align:center; padding:40px 20px; color:rgba(255,255,255,.40);
}
.search-empty-icon{
  width:48px; height:48px; margin:0 auto 14px; opacity:.35;
}
.search-empty-title{
  font-weight:800; font-size:15px; color:rgba(255,255,255,.55);
  margin-bottom:6px;
}
.search-empty-text{
  font-size:13px; line-height:1.5;
}

@media(max-width:640px){
  .search-filters{ grid-template-columns:1fr; }
  .search-item{ flex-direction:column; gap:10px; }
  .search-item-avatar{ width:36px; height:36px; }
}

/* === Birthday celebration === */
.birthday-overlay{
  position:fixed; inset:0; z-index:9999;
  pointer-events:auto; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.birthday-canvas{
  position:absolute; inset:0; width:100%; height:100%;
}
.birthday-banner{
  position:relative; z-index:1;
  font-size:clamp(22px, 5vw, 40px); font-weight:900;
  color:#fff; text-align:center;
  text-shadow:0 2px 12px rgba(0,0,0,.5), 0 0 40px rgba(255,200,50,.3);
  padding:16px 32px; border-radius:20px;
  background:rgba(0,0,0,.35); backdrop-filter:blur(6px);
}
@media(prefers-reduced-motion:no-preference){
  .birthday-banner{ animation:birthday-pop .5s cubic-bezier(.34,1.56,.64,1) both; }
  @keyframes birthday-pop{ from{opacity:0;transform:scale(.6) translateY(20px)} to{opacity:1;transform:scale(1) translateY(0)} }
}
.birthday-overlay-fade{
  pointer-events:none;
}
@media(prefers-reduced-motion:no-preference){
  .birthday-overlay-fade{ animation:birthday-fade .6s ease forwards; }
  @keyframes birthday-fade{ to{opacity:0} }
}

 .mobile-topbar{ display:none; }
 .mobile-nav-backdrop{ display:none; }

 @media(max-width:980px){
  .mobile-topbar{
    display:block;
    position: sticky;
    top: 0;
    z-index: 2600;
    background: rgba(11,18,32,.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 16px;
    margin-bottom: 12px;
  }
  .mobile-topbar-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding: 10px 12px;
  }
  .mobile-topbar-avatar{
    width:36px;
    height:36px;
    border-radius:999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    cursor:pointer;
  }
  .mobile-topbar-avatar-img{ width:100%; height:100%; object-fit:cover; display:block; }
  .mobile-topbar-avatar-fallback{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-weight: 900; }
  .mobile-topbar-title{ font-weight: 900; letter-spacing:.2px; }
  .mobile-topbar-cta{
    width:36px;
    height:36px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    color: var(--text);
    border:1px solid rgba(96,165,250,.55);
    box-shadow: 0 0 0 3px rgba(96,165,250,.12);
    background: rgba(255,255,255,.02);
    font-weight: 900;
  }

  .app-nav{
    position: fixed;
    left: 0;
    top: 0;
    height: 100dvh;
    width: min(320px, 86vw);
    transform: translateX(-110%);
    transition: transform .22s ease;
    z-index: 3000;
    border-radius: 0 20px 20px 0;
    box-shadow: 0 24px 80px rgba(0,0,0,.55);
  }

  .mobile-nav-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(3px);
    z-index: 2500;
  }

  .mobile-nav-open .app-nav{ transform: translateX(0); }
  .mobile-nav-open .mobile-nav-backdrop{ display:block; }
 }

 .app-nav{
  background: linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.00)), var(--surface);
  border:1px solid rgba(255,255,255,.06);
  padding: 14px;
  display:flex;
  flex-direction:column;
  gap:4px;
  overflow: auto;
 }

 @media(min-width:981px){
  .app-nav{
    position: sticky;
    top: 18px;
    align-self:start;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    height: calc(100dvh - 36px);
    max-height: calc(100vh - 36px);
    max-height: calc(100dvh - 36px);
    overflow: auto;
  }
 }

 .app-logo{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 8px 10px;
  border-radius: 14px;
  color: var(--text);
  text-decoration:none;
 }
 .app-logo:hover{ background: transparent; }
 .app-logo-text{ font-weight: 900; letter-spacing:.25px; }

 .app-nav-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  color: var(--text);
  text-decoration:none;
  appearance:none;
  background: transparent;
  border:1px solid transparent;
  text-align:left;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .08s ease;
}
.app-nav-item:hover{ background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.06); }
.ff-disabled-admin{ color: #f87171 !important; opacity:.75; }
.ff-disabled-admin .app-nav-icon{ color: #f87171 !important; }
.ff-disabled-admin .app-nav-label{ color: #f87171 !important; }
.ff-disabled-admin:hover{ background: rgba(248,113,113,.08); border-color: rgba(248,113,113,.18); }
.nav-popover-item.ff-disabled-admin{ color: #f87171 !important; }
.app-nav-item:active{ transform: scale(.98); }
.app-nav-item.active{ background: rgba(96,165,250,.10); border-color: rgba(96,165,250,.32); box-shadow: 0 0 12px rgba(96,165,250,.08); }
.app-nav-item.active .app-nav-label{ font-weight: 900; }

.app-nav-item.active .app-nav-icon{ opacity: 1; transform: translateY(-.5px) scale(1.03); }
.app-nav-item.active .app-nav-icon [stroke]{ stroke-width: 2.6; }
.app-nav-item.active .app-nav-icon [fill="none"]{ fill: none; }

.app-nav-icon{ width:18px; height:18px; flex:0 0 auto; opacity:.92; }
.app-nav-label{ flex:1 1 auto; min-width:0; }

.app-nav-spacer{ flex:1; }

.app-nav-primary{
  width:100%;
  border-radius:999px;
  padding: 13px 18px;
  font-weight: 900;
  letter-spacing: .3px;
  justify-content:center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary) 0%, #6366f1 100%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 2px 12px rgba(59,130,246,.20), inset 0 1px 0 rgba(255,255,255,.10);
  transition: background .2s ease, box-shadow .25s ease, transform .12s ease, border-color .2s ease;
}
.app-nav-primary::before{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, transparent 50%);
  pointer-events:none;
  transition: opacity .2s ease;
}
.app-nav-primary:hover{
  background: linear-gradient(135deg, #4f8af7 0%, #818cf8 100%);
  box-shadow: 0 6px 28px rgba(59,130,246,.38), 0 0 0 1px rgba(99,102,241,.15), inset 0 1px 0 rgba(255,255,255,.14);
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
}
.app-nav-primary:active{
  transform: translateY(1px) scale(.985);
  box-shadow: 0 1px 6px rgba(59,130,246,.25);
}
.app-nav-primary:focus-visible{
  outline: 3px solid rgba(96,165,250,.5);
  outline-offset: 3px;
  box-shadow: 0 4px 20px rgba(59,130,246,.30);
}
.app-nav-primary.active{ box-shadow: 0 0 0 3px rgba(96,165,250,.18); }
.app-nav-primary-icon{
  width: 18px; height: 18px;
  flex: 0 0 auto;
  opacity: .95;
  transition: transform .2s ease;
}
@media(prefers-reduced-motion:reduce){
  .app-nav-primary{ transition:none; }
  .app-nav-primary:hover{ transform:none; }
  .app-nav-primary:active{ transform:none; }
}

.nav-account-wrap{ position:relative; margin-top: 4px; }
.nav-account{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.025);
  color: var(--text);
  cursor:pointer;
  transition: background .16s ease, border-color .16s ease;
}
.nav-account:focus{ outline:none; }
.nav-account:focus-visible{ box-shadow: 0 0 0 3px rgba(96,165,250,.22); border-color: rgba(96,165,250,.40); }
.nav-account:hover{ background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); }
.nav-account-avatar-wrap{ width:38px; height:38px; border-radius:999px; overflow:hidden; border:1.5px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.nav-account-avatar{ width:100%; height:100%; object-fit:cover; display:block; }
.nav-account-avatar-fallback{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-weight:900; line-height:1; }
.nav-account-meta{ flex:1 1 auto; min-width:0; text-align:left; }
.nav-account-name{ font-weight:800; font-size:13.5px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-account-handle{ color: var(--muted); font-size: 11.5px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:3px; }
.nav-account-dots{ color: rgba(255,255,255,.45); font-size: 18px; line-height: 1; padding-left: 4px; flex:0 0 auto; transition: color .14s ease; }
.nav-account:hover .nav-account-dots{ color: rgba(255,255,255,.7); }

.nav-more-wrap{ position:relative; width:100%; }

.nav-notifications-wrap{ position:relative; width:100%; }

.nav-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  background: rgba(139,92,246,.85);
  border: 1px solid rgba(167,139,250,.5);
  color: #fff;
}

.nav-notifications-list{ display:flex; flex-direction:column; gap:4px; padding: 0 0 8px; margin: 0 0 8px; border-bottom: 1px solid rgba(255,255,255,.08); }
.nav-notifications-item{ text-align:left; display:flex; align-items:flex-start; gap:10px; padding:8px 10px; border-radius:8px; transition: background .12s; }
.nav-notifications-item:hover{ background:rgba(255,255,255,.04); }
.nav-notifications-item--unread{ background:rgba(139,92,246,.04); }
.nav-notifications-item--unread:hover{ background:rgba(139,92,246,.07); }
.nav-notif-icon{
  flex-shrink:0;
  width:28px; height:28px;
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.35);
}
.nav-notifications-item--unread .nav-notif-icon{
  background:rgba(139,92,246,.12);
  color:rgba(139,92,246,.85);
}
.nav-notif-dot{
  display:inline-block;
  width:6px; height:6px;
  border-radius:50%;
  background:rgba(139,92,246,.85);
  margin-left:6px;
  vertical-align:middle;
}
.nav-notifications-content{ min-width:0; flex:1; }
.nav-notifications-title{ font-weight:800; letter-spacing:.1px; font-size:12px; line-height:1.35; }
.nav-notifications-sub{ color: var(--muted); font-size: 11px; margin-top: 2px; line-height:1.3; }
.nav-notifications-empty{ color: var(--muted); font-size: 12px; padding: 6px 10px; }

/* ── Notifications Page — Premium 2026 ─────────────────────────────── */
.notif-page{ max-width: 680px; margin: 0 auto; }

.notif-page-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: 16px;
}
.notif-page-header-left{ display:flex; align-items:center; gap:14px; }
.notif-page-icon{
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(139,92,246,.15), rgba(96,165,250,.10));
  display: flex; align-items: center; justify-content: center;
  color: rgba(139,92,246,.85);
  flex-shrink: 0;
}
.notif-page-title{ font-size: 20px; font-weight: 900; letter-spacing: .2px; margin: 0; color: rgba(255,255,255,.92); }
.notif-page-subtitle{ font-size: 12px; color: rgba(255,255,255,.4); margin: 2px 0 0; }

.notif-page-actions{ display: flex; gap: 6px; }
.notif-action-btn{
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.55);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .14s, color .14s, border-color .14s, transform .1s;
  position: relative;
}
.notif-action-btn:hover{
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.14);
  transform: translateY(-1px);
}
.notif-action-btn:active{ transform: translateY(0); }
.notif-action-btn--danger:hover{
  background: rgba(239,68,68,.08);
  color: rgba(239,68,68,.85);
  border-color: rgba(239,68,68,.18);
}

/* Tooltip for action buttons */
.notif-action-btn[title]::after,
.notif-action-btn[data-i18n-title]::after{
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(11,18,32,.95);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.85);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .14s, transform .14s;
  z-index: 5;
}
.notif-action-btn[title]:hover::after,
.notif-action-btn[data-i18n-title]:hover::after{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.notif-page-status{ padding: 8px 0; min-height: 20px; }
.notif-page-list{ display: flex; flex-direction: column; gap: 8px; }
.notif-page-footer{ padding: 16px 0; text-align: center; }
.notif-load-more{ min-width: 200px; }

/* ── Notification Card ─────────────────────────────────────────────── */
.notif-card{
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.05);
  transition: background .16s, border-color .16s, opacity .3s, transform .3s;
}
.notif-card:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}

.notif-card--unread{
  background: linear-gradient(135deg, rgba(139,92,246,.04), rgba(96,165,250,.03));
  border-color: rgba(139,92,246,.12);
}
.notif-card--unread:hover{
  background: linear-gradient(135deg, rgba(139,92,246,.06), rgba(96,165,250,.05));
  border-color: rgba(139,92,246,.18);
}

.notif-card--warning{
  background: linear-gradient(135deg, rgba(239,68,68,.04), rgba(245,183,49,.02));
  border-color: rgba(239,68,68,.12);
}
.notif-card--warning:hover{
  background: linear-gradient(135deg, rgba(239,68,68,.06), rgba(245,183,49,.04));
  border-color: rgba(239,68,68,.18);
}

.notif-card--marking{ opacity: .5; pointer-events: none; }

.notif-card-indicator{
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.35);
  transition: background .16s, color .16s;
}
.notif-card-indicator--unread{
  background: rgba(139,92,246,.12);
  color: rgba(139,92,246,.85);
}
.notif-card--warning .notif-card-indicator{
  background: rgba(239,68,68,.10);
  color: rgba(239,68,68,.8);
}

.notif-card-body{ flex: 1; min-width: 0; }
.notif-card-title{
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.88);
  line-height: 1.4;
  letter-spacing: .1px;
}
.notif-card--unread .notif-card-title{ color: rgba(255,255,255,.95); }
.notif-card-sub{
  font-size: 12px;
  color: rgba(255,255,255,.4);
  margin-top: 3px;
  line-height: 1.4;
}
.notif-card-actions{
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.notif-card-btn{
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .14s, color .14s, border-color .14s, transform .08s;
  text-decoration: none;
}
.notif-card-btn:active{ transform: translateY(1px); }
.notif-card-btn--read{
  background: rgba(139,92,246,.10);
  color: rgba(139,92,246,.9);
  border-color: rgba(139,92,246,.15);
}
.notif-card-btn--read:hover{
  background: rgba(139,92,246,.18);
  border-color: rgba(139,92,246,.25);
}
.notif-card-btn--link{
  background: rgba(96,165,250,.08);
  color: rgba(96,165,250,.85);
  border-color: rgba(96,165,250,.12);
}
.notif-card-btn--link:hover{
  background: rgba(96,165,250,.15);
  border-color: rgba(96,165,250,.22);
}

/* Empty state */
.notif-empty{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 12px;
}
.notif-empty-icon{
  width: 64px; height: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(139,92,246,.08), rgba(96,165,250,.06));
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.2);
}
.notif-empty-text{
  font-size: 14px;
  color: rgba(255,255,255,.35);
  font-weight: 500;
  margin: 0;
}

@media (prefers-reduced-motion: reduce){
  .notif-card, .notif-action-btn{ transition: none !important; }
}

.app-nav-more{ width:100%; }
#btn-nav-notifications{ width:100%; }

.app-nav-more .app-nav-label{ flex:0 0 auto; }

.nav-popover{
  position:absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  background: rgba(17,24,39,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border:1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  box-shadow:
    0 18px 60px rgba(0,0,0,.50),
    0 0 0 1px rgba(255,255,255,.06);
  padding: 8px;
  z-index: 3200;
}
@media(prefers-reduced-motion:no-preference){
  .nav-popover{ animation: popoverIn .14s ease-out; }
  @keyframes popoverIn{ from{opacity:0; transform:translateY(-4px) scale(.97)} to{opacity:1; transform:none} }
}
.nav-popover-item{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 12px;
  border:1px solid transparent;
  background: transparent;
  color: var(--text);
  text-decoration:none;
  cursor:pointer;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  transition: background .14s ease, border-color .14s ease;
}
.nav-popover-item:hover{ background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.06); }
.nav-popover-item:active{ transform: scale(.98); }
.nav-popover-item.active{ border-color: rgba(96,165,250,.45); box-shadow: 0 0 0 3px rgba(96,165,250,.10); }

.app-nav-legal{ padding-top: 4px; }
.app-nav-legal-links{ display:flex; flex-wrap:wrap; gap:4px 10px; }
.app-nav-legal .hint{ margin-top: 10px; }

.app-nav-legal .link-btn{ font-size: 10px; font-weight: 400; text-decoration:none; opacity:.85; line-height:1.2; }
.app-nav-legal .link-btn:hover{ opacity:1; }

.app-main{
  min-height: 100vh;
  min-height: 100dvh;
}
@media(min-width:981px){
  .app-main{ min-height: calc(100dvh - 36px); }
}

/* Reader: collapsed left app nav */
.read-page{ position: relative; }
.read-page #read-app-nav{
  position: fixed;
  top: 18px;
  left: 18px;
  height: calc(100dvh - 36px);
  z-index: 2500;
  overflow: hidden;
}

@media(max-width:980px){
  .read-page .container{ padding-left: 18px; }
  .read-page #read-app-nav{ transform: translateX(-120%); transition: transform .18s ease; }
  .read-page.read-nav-open #read-app-nav{ transform: translateX(0); }
  .read-page.read-nav-open .mobile-nav-backdrop{ display:block; }
}

@media(min-width:981px){
  .app-main{ height: auto; overflow: visible; }
}

.pre-wrap{ white-space: pre-wrap; }

.app-view[hidden]{ display:none !important; }
@media(prefers-reduced-motion:no-preference){
  .app-view:not([hidden]){ animation: viewFadeIn .15s ease-out; }
  @keyframes viewFadeIn{ from{opacity:0} to{opacity:1} }
}

.feed{ display:flex; flex-direction:column; gap:12px; margin-top: 14px; }
.feed-twitter{ gap: 10px; }

.feed-tabs{
  position: sticky;
  top: 0;
  z-index: 5;
  display:flex;
  gap:10px;
  padding: 6px;
  margin-top: 10px;
  border-radius: 999px;
  background: rgba(11,18,32,.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.06);
}
.feed-tab{ flex:1; justify-content:center; border-radius: 999px; background: transparent; border-color: transparent; transition: background .16s ease, border-color .16s ease, transform .16s ease; }
.feed-tab:hover{ background: rgba(255,255,255,.05); }
.feed-tab:focus{ outline: none; }
.feed-tab:focus-visible{ box-shadow: 0 0 0 3px rgba(96,165,250,.28); border-color: rgba(96,165,250,.45); }
.feed-tab[aria-selected="true"]{ border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.08); }

.feed-footer{ margin-top: 12px; display:flex; justify-content:center; }
.home-prompt{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 14px 16px;
  border:1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  background: rgba(255,255,255,.02);
  margin-top: 12px;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.home-prompt:hover{
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.home-prompt-title{ font-weight: 900; letter-spacing:.2px; }
.home-prompt-subtitle{ color: var(--muted); font-size: 12px; margin-top: 2px; }
.home-prompt-cta{
  width:auto;
  border-radius: 999px;
  padding: 12px 20px;
  font-weight: 900;
  letter-spacing: .3px;
  gap: 8px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary) 0%, #6366f1 100%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 2px 12px rgba(59,130,246,.20), inset 0 1px 0 rgba(255,255,255,.10);
  transition: background .2s ease, box-shadow .25s ease, transform .12s ease, border-color .2s ease;
}
.home-prompt-cta::before{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, transparent 50%);
  pointer-events:none;
}
.home-prompt-cta:hover{
  background: linear-gradient(135deg, #4f8af7 0%, #818cf8 100%);
  box-shadow: 0 6px 28px rgba(59,130,246,.38), inset 0 1px 0 rgba(255,255,255,.14);
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
}
.home-prompt-cta:active{
  transform: translateY(1px) scale(.985);
  box-shadow: 0 1px 6px rgba(59,130,246,.25);
}
.home-prompt-cta:focus-visible{
  outline: 3px solid rgba(96,165,250,.5);
  outline-offset: 3px;
}
.home-prompt-cta-icon{
  width: 16px; height: 16px;
  flex: 0 0 auto;
  opacity: .95;
}
@media(prefers-reduced-motion:reduce){
  .home-prompt-cta{ transition:none; }
  .home-prompt-cta:hover{ transform:none; }
  .home-prompt-cta:active{ transform:none; }
}
@media(max-width:520px){
  .home-prompt{ align-items:flex-start; flex-direction:column; }
  .home-prompt-cta{ width:100%; justify-content:center; }
}

/* ── Daily Quote ──────────────────────────────────────────────────────── */
.daily-quote-section{
  margin-top: 6px;
  display:flex;
  flex-direction:column;
  gap: 4px;
}
.daily-quote-text{
  font-size: 13px;
  font-style: italic;
  color: rgba(255,255,255,.72);
  line-height: 1.5;
  transition: opacity .35s ease, transform .35s ease;
}
.daily-quote-text.is-fading{
  opacity: 0;
  transform: translateY(4px);
}
@media(prefers-reduced-motion:reduce){
  .daily-quote-text{ transition:none; }
  .daily-quote-text.is-fading{ transform:none; }
}
.daily-quote-actions{
  display:flex;
  gap: 6px;
  margin-top: 2px;
}
.daily-quote-btn{
  background: transparent;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.55);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.daily-quote-btn:hover{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.82);
  border-color: rgba(255,255,255,.16);
}
.daily-quote-btn:focus-visible{
  outline: 2px solid rgba(96,165,250,.4);
  outline-offset: 2px;
}
.daily-quote-btn.is-copied{
  color: var(--primary);
  border-color: rgba(59,130,246,.3);
}

#view-home .home-prompt.is-continue{
  border-color: rgba(96,165,250,.14);
  background: radial-gradient(1200px 260px at 12% 0%, rgba(96,165,250,.10), transparent 55%), rgba(255,255,255,.02);
}
#view-home .home-prompt.is-continue .home-prompt-title{ letter-spacing: .15px; }
#view-home .home-prompt.is-continue .home-prompt-subtitle{ color: rgba(255,255,255,.78); }
#view-home .home-prompt.is-continue .home-prompt-cta{ font-weight: 950; }
#view-home .home-prompt.is-continue .home-prompt-subtitle{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#view-home .home-prompt.is-continue .home-prompt-cta-secondary{
  width:auto;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 900;
  margin-right: 10px;
}
@media(max-width:520px){
  #view-home .home-prompt.is-continue .home-prompt-cta-secondary{ width:100%; justify-content:center; margin-right:0; }
}
.feed-item{
  border:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  border-radius: 16px;
  padding: 14px;
  position:relative;
  overflow:hidden;
  transition: border-color .18s ease, background .18s ease, transform .12s ease, box-shadow .18s ease;
}
.feed-item:hover{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.025);
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
}

.feed-card{ display:flex; gap: 12px; align-items:flex-start; }
.feed-avatar{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  overflow:hidden;
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
}
.feed-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

.feed-body{ min-width: 0; flex: 1 1 auto; }
.feed-head{ display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
.feed-name{ font-weight: 900; letter-spacing: .2px; }
.feed-handle{ color: var(--muted); font-size: 12px; }
.feed-handle-link{ color: inherit; text-decoration: none; cursor: pointer; transition: color .14s ease; }
.feed-handle-link:hover{ color: rgba(255,255,255,.90); }
.feed-time{ color: var(--muted); font-size: 12px; }

.feed-text{ margin-top: 2px; color: rgba(255,255,255,.92); line-height: 1.4; }
.feed-text .b{ font-weight: 900; }
.feed-text-clamp{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.feed-embed{
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  border-radius: 14px;
  overflow:hidden;
  display:flex;
  gap: 12px;
  transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.feed-embed{ text-decoration: none; color: inherit; }
.feed-embed:hover{
  border-color: rgba(255,255,255,.16);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
}
.feed-embed-cover{ width: 84px; flex: 0 0 84px; background: rgba(255,255,255,.04); overflow:hidden; display:block; position:relative; align-self:stretch; min-height: 84px; }
.feed-embed-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.feed-embed-cover picture{ display:block; width:100%; height:100%; }
.feed-embed-cover .nq-cover{ min-width:0; min-height:0; aspect-ratio: auto; width:100%; height:100%; border-radius:0; position:absolute; inset:0; overflow:hidden; display:block; }
.feed-embed-cover .nq-cover-img{ width:100%; height:100%; object-fit:cover; display:block; position:absolute; inset:0; }
.feed-embed-cover .nq-cover-fallback{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:1.6rem; font-weight:900; color:rgba(255,255,255,.15); line-height:1; background:rgba(255,255,255,.04); position:absolute; inset:0; }
.feed-embed-body{ padding: 10px 10px 10px 0; min-width:0; flex:1 1 auto; }
.feed-embed-title{ font-weight: 900; letter-spacing: .2px; }
.feed-embed-sub{ color: var(--muted); font-size: 12px; margin-top: 2px; }
.feed-embed-tags{ margin-top: 6px; display:flex; gap:6px; flex-wrap:wrap; }
.feed-tag{ font-size: 11px; color: rgba(255,255,255,.86); border:1px solid rgba(255,255,255,.10); padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,.02); cursor: pointer; transition: background .14s ease, border-color .14s ease, color .14s ease; }
.feed-tag:hover{ background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); color: #fff; }

.feed-embed-cta{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px 0 0;
  align-self: stretch;
}
.feed-read-btn{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 16px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .3px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary, #3b82f6) 0%, #6366f1 100%);
  box-shadow: 0 2px 10px rgba(59,130,246,.25), 0 0 0 1px rgba(255,255,255,.06) inset;
  white-space: nowrap;
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
.feed-read-btn{ text-decoration: none; cursor: pointer; border: none; }
.feed-read-btn svg{ flex-shrink:0; opacity:.85; }
.feed-read-btn:hover{
  transform: scale(1.04);
  box-shadow: 0 4px 18px rgba(59,130,246,.35), 0 0 0 1px rgba(255,255,255,.1) inset;
  filter: brightness(1.08);
}
.feed-read-btn:active{ transform: scale(.97); }

.feed-actions{ display:flex; gap: 4px; margin-top: 10px; justify-content: space-around; }
.feed-action{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.45);
  cursor: pointer;
  font-size: 12px;
  transition: color .18s ease, background .18s ease, transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
}
.feed-action .btn-icon{ width: 18px; height: 18px; flex: 0 0 18px; display: block; transition: fill .22s ease, transform .22s cubic-bezier(.34,1.56,.64,1); fill: none; }
.feed-action-count{ font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; transition: transform .18s ease; }
.feed-action:hover{ color: rgba(255,255,255,.75); background: rgba(255,255,255,.04); }
.feed-action.is-like:hover{ color: rgba(244,63,94,.85); background: rgba(244,63,94,.08); }
.feed-action.is-like.active{ color: rgba(244,63,94,.95); }
.feed-action.is-like.active .btn-icon{ fill: rgba(244,63,94,.95); transform: scale(1.1); }
.feed-action.is-repost:hover{ color: rgba(34,197,94,.85); background: rgba(34,197,94,.08); }
.feed-action.is-repost.active{ color: rgba(34,197,94,.95); }
.feed-action[data-action="save"]:hover{ color: rgba(96,165,250,.85); background: rgba(96,165,250,.08); }
.feed-action[data-action="save"].active{ color: rgba(96,165,250,.95); }
.feed-action[data-action="save"].active .btn-icon{ fill: rgba(96,165,250,.95); transform: scale(1.1); }
.feed-action:active{ transform: scale(.92); }
.feed-action:disabled{ pointer-events: none; opacity: .55; }
.feed-action:focus{ outline: none; }
.feed-action:focus-visible{ box-shadow: 0 0 0 2px rgba(96,165,250,.30); }
.feed-action.did-pop{ animation: feedActionPop .36s cubic-bezier(.34,1.56,.64,1); }
.feed-action.is-like.did-pop{ animation: feedLikePop .42s cubic-bezier(.34,1.56,.64,1); }
.feed-action[data-action="save"].did-pop{ animation: feedSavePop .36s cubic-bezier(.25,1,.5,1); }
@keyframes feedActionPop{
  0%{ transform: scale(1); }
  35%{ transform: scale(1.28); }
  100%{ transform: scale(1); }
}
@keyframes feedLikePop{
  0%{ transform: scale(1); }
  20%{ transform: scale(1.35); }
  45%{ transform: scale(.9); }
  70%{ transform: scale(1.15); }
  100%{ transform: scale(1); }
}
@keyframes feedSavePop{
  0%{ transform: scale(1); }
  30%{ transform: scale(1.25); }
  60%{ transform: scale(.95); }
  100%{ transform: scale(1); }
}

.feed-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  padding: 6px 10px;
  border-radius: 999px;
}
.feed-title{ font-weight: 900; letter-spacing: .2px; margin-bottom: 4px; }
.feed-meta{ color: var(--muted); font-size: 12px; margin-bottom: 10px; }
.feed-snippet{ color: rgba(255,255,255,.86); line-height: 1.55; }

/* Profile loading skeleton */
.profile-top--loading .profile-header-fallback{
  background: rgba(255,255,255,.03) !important;
  overflow:hidden;
}
.profile-top--loading .profile-header-fallback::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.04) 40%, rgba(255,255,255,.07) 50%, rgba(255,255,255,.04) 60%, transparent 100%);
  animation: profileShimmer 1.4s ease infinite;
}
.profile-top--loading .profile-avatar-fallback{
  background: rgba(255,255,255,.06) !important;
  color:transparent !important;
  overflow:hidden;
}
.profile-top--loading .profile-avatar-fallback::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.06) 40%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.06) 60%, transparent 100%);
  animation: profileShimmer 1.4s ease infinite;
}
.profile-top--loading .profile-display,
.profile-top--loading .profile-handle{
  min-height:16px; min-width:120px; border-radius:6px;
  background: rgba(255,255,255,.04);
}
@keyframes profileShimmer{
  0%{ transform:translateX(-100%); }
  100%{ transform:translateX(100%); }
}

/* Profile — 2026 redesign */
.profile-hero{ margin-top: 14px; }
.profile-hero, .profile-top{
  position: relative;
  --profile-header-h: 200px;
  --profile-avatar-sz: 104px;
  --profile-side-pad: 18px;
}
@media(min-width:980px){
  .profile-hero, .profile-top{ --profile-header-h: 240px; --profile-avatar-sz: 112px; }
}
.profile-header{
  position:relative;
  border-radius: 22px;
  overflow:hidden;
  height: var(--profile-header-h);
  border:1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.02);
}
.profile-header::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, transparent 40%, rgba(11,18,32,.72) 100%);
  pointer-events:none;
  z-index:1;
}
.profile-header-img,
.profile-avatar-img{ outline:none; caret-color:transparent; }
.profile-header-img:focus,
.profile-avatar-img:focus{ outline:none; caret-color:transparent; }
.profile-header label,
.profile-avatar label{ caret-color:transparent; }
.profile-header-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transition: transform .4s ease;
}
.profile-top:hover .profile-header-img{ transform: scale(1.015); }
.profile-img-hidden{ display:none !important; }
.profile-header-fallback{
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 900px 320px at 20% 10%, rgba(96,165,250,.22), transparent 70%),
    radial-gradient(ellipse 600px 240px at 80% 60%, rgba(167,139,250,.16), transparent 70%),
    linear-gradient(160deg, rgba(59,130,246,.10), rgba(139,92,246,.08));
}

.profile-overlay-group{
  position:absolute;
  z-index: 8;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.92);
  display: flex;
  gap: 10px;
  align-items: center;
  opacity: 0;
  transition: opacity .14s ease, transform .14s ease;
  pointer-events: none;
}
.profile-overlay-group .profile-upload-overlay{
  position: relative;
  top: auto; left: auto;
  transform: none;
  pointer-events: auto;
}
.profile-upload-overlay{
  position:absolute;
  z-index: 6;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.92);
  cursor: pointer;
  opacity: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.92);
  transition: opacity .14s ease, transform .14s ease, background .14s ease, border-color .14s ease;
}
.profile-upload-overlay:focus{ outline:none; }
.profile-upload-overlay svg{ width: 17px; height: 17px; display:block; transform: translateY(-0.5px); }
.profile-upload-overlay:hover{ background: rgba(0,0,0,.46); border-color: rgba(255,255,255,.28); }
.profile-upload-overlay:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,.18); border-color: rgba(255,255,255,.30); opacity: 1; }
.profile-upload-overlay.is-disabled{ opacity: .45 !important; cursor: not-allowed; }
.profile-overlay-delete:hover{ background: rgba(180,40,40,.55); border-color: rgba(255,100,100,.35); }

@media(hover:hover){
  .profile-header:hover .profile-overlay-group,
  .profile-avatar:hover .profile-overlay-group{ opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
  .profile-header:hover .profile-upload-overlay,
  .profile-avatar:hover .profile-upload-overlay{ opacity: 1; }
}
@media(hover:none){
  .profile-overlay-group{ opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
  .profile-upload-overlay{ opacity: 1; }
}

.profile-avatar-row{
  position: static;
  padding-left: var(--profile-side-pad);
  padding-right: var(--profile-side-pad);
  padding-top: calc((var(--profile-avatar-sz) / 2) + 12px);
}
.profile-avatar{
  width: var(--profile-avatar-sz);
  height: var(--profile-avatar-sz);
  border-radius: 999px;
  overflow:visible;
  border: 3px solid var(--bg);
  background: rgba(255,255,255,.04);
  position:absolute;
  left: var(--profile-side-pad);
  top: calc(var(--profile-header-h) - (var(--profile-avatar-sz) / 2));
  z-index: 3;
  box-shadow:
    0 0 0 3px rgba(96,165,250,.20),
    0 12px 32px rgba(0,0,0,.45);
  transition: box-shadow .25s ease, transform .25s ease;
}
.profile-avatar:hover{
  box-shadow:
    0 0 0 3px rgba(96,165,250,.35),
    0 0 20px rgba(96,165,250,.12),
    0 12px 32px rgba(0,0,0,.5);
  transform: scale(1.03);
}
.profile-avatar-img{ width:100%; height:100%; object-fit: cover; display:block; position:absolute; inset:0; border-radius:999px; overflow:hidden; }
.profile-avatar-fallback{
  position:absolute;
  inset:0;
  border-radius:999px;
  overflow:hidden;
  background: linear-gradient(135deg, rgba(96,165,250,.55), rgba(139,92,246,.40));
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(255,255,255,.95);
  font-weight: 900;
  font-size: 28px;
  letter-spacing: .3px;
}
.profile-topbar{
  position: static;
  display:grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 16px;
  row-gap: 12px;
  align-items: start;
  padding-left: var(--profile-side-pad);
  padding-right: var(--profile-side-pad);
  padding-top: calc((var(--profile-avatar-sz) / 2) + 8px);
}
.profile-topbar{ grid-auto-flow: row; }
@media(max-width:420px){
  .profile-topbar{ grid-template-columns: 1fr; }
  .profile-top-actions{ justify-content:flex-start; }
}
.profile-top-actions{ display:flex; justify-content:flex-end; align-items:center; gap:8px; }
.profile-top-actions .btn{
  width:auto; min-width: 120px; padding: 10px 18px; font-size: 13.5px; font-weight: 700; line-height: 1.1;
  border-radius: 999px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: all .2s ease;
}
.profile-top-actions .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(59,130,246,.18);
}
.profile-top-actions .btn.icon.follow-icon-btn{ min-width:0; padding:8px; border-radius: 999px; }
.profile-top-actions .btn.icon-btn{ min-width:0; width:36px; height:36px; padding:0; display:grid; place-items:center; border-radius:999px; }
.profile-top-actions .btn.icon.follow-icon-btn .btn-icon{ width:18px; height:18px; margin-right:0; }
.profile-hero-meta{ min-width:0; padding-bottom: 10px; padding-left: calc(var(--profile-avatar-sz) + 16px); }
.profile-bio{ margin-top: 10px; color: rgba(255,255,255,.88); font-size: 14.5px; line-height:1.6; max-width: 640px; overflow-wrap: anywhere; word-break: break-word; white-space: normal; }
.profile-bio.profile-bio-clamped{
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.profile-bio-toggle{
  margin-top: 8px;
  display:inline-flex;
  width:auto;
  font-size: 13px;
  opacity: .85;
}
.profile-meta-line{ margin-top: 14px; display:flex; gap:14px; flex-wrap:wrap; }
.profile-meta-item{
  color: rgba(255,255,255,.72); font-size: 13px; text-decoration:none;
  display:inline-flex; align-items:center; gap:6px;
  overflow-wrap:anywhere; word-break: break-word;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.profile-meta-item:hover{
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.12); text-decoration: none;
}
.profile-meta-icon{ width: 13px; height: 13px; flex: 0 0 13px; opacity: .55; }
.profile-display{
  font-weight: 900; font-size: 24px; letter-spacing:.1px;
  overflow-wrap:anywhere; word-break: break-word; margin-top: 2px; pointer-events:none;
  background: linear-gradient(135deg, #fff 60%, rgba(96,165,250,.65));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.profile-handle{ color: rgba(255,255,255,.55); font-size: 14px; margin-top: 5px; overflow-wrap:anywhere; word-break: break-word; pointer-events:none; }
.profile-view-public-btn{ font-size:13px; padding:6px 14px; }

.profile-stats-row{
  display:flex; align-items:stretch; gap:0; flex-wrap:wrap; margin-top: 18px;
  padding: 6px 4px;
  background: rgba(255,255,255,.015);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.04);
}

.profile-stat{
  width:auto;
  min-width: 0;
  display:inline-flex;
  flex-direction: column;
  align-items:center;
  gap:2px;
  border:none;
  background: transparent;
  color: var(--text);
  border-radius: 12px;
  padding: 10px 18px;
  cursor:pointer;
  transition: background .18s ease, transform .18s ease;
}
.profile-stat-icon{ display:none; }
.profile-stat-count{ font-weight: 900; font-size: 18px; letter-spacing:.1px; line-height:1.2; transition: color .18s ease; }
.profile-stat-label{ color: rgba(255,255,255,.50); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .5px; }
.profile-stat:not(:last-child)::after{ content: none; }
.profile-stat:not(:last-child){ border-right: 1px solid rgba(255,255,255,.06); border-radius: 12px 0 0 12px; }
.profile-stat:not(:first-child){ border-radius: 0 12px 12px 0; }
.profile-stat:only-child{ border-radius: 12px; }
.profile-stat:not(:first-child):not(:last-child){ border-radius: 0; }
.profile-stat:hover{ background: rgba(255,255,255,.04); transform: translateY(-1px); }
.profile-stat:hover .profile-stat-label{ color: rgba(255,255,255,.75); }
.profile-stat:hover .profile-stat-count{
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.profile-stat:focus{ outline:none; }
.profile-stat:focus-visible{ box-shadow: 0 0 0 3px rgba(96,165,250,.18); border-radius: 12px; }

.profile-tabs{
  position: sticky;
  top: 0;
  z-index: 5;
  display:flex;
  gap: 4px;
  margin-top: 18px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(11,18,32,.85);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.06);
}
.profile-tab{
  flex:1;
  justify-content:center;
  border-radius: 10px;
  background: transparent;
  border: none;
  padding: 11px 16px;
  font-size: 13.5px;
  font-weight: 700;
  color: rgba(255,255,255,.50);
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
  cursor: pointer;
}
.profile-tab:hover{ color: rgba(255,255,255,.80); background: rgba(255,255,255,.04); }
.profile-tab:focus{ outline: none; }
.profile-tab:focus-visible{ box-shadow: 0 0 0 2px rgba(96,165,250,.35); }
.profile-tab[aria-selected="true"]{
  color: #fff;
  font-weight: 800;
  background: rgba(96,165,250,.12);
  box-shadow: 0 2px 8px rgba(59,130,246,.10);
}

.profile-panel{ margin-top: 16px; }
@media(prefers-reduced-motion:no-preference){
  .profile-panel{ animation: panelFadeIn .22s ease-out; }
  @keyframes panelFadeIn{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: translateY(0); } }
}
.profile-card .settings-card{ margin-top: 0; }

.profile-actions{ margin-top: 14px; }
.profile-file{ display:none; }
.profile-upload{ width:auto; min-width: 160px; }

.profile-actions .profile-upload{ display:none; }

.right-visits-list{ display:flex; flex-direction:column; gap:8px; }
.right-visit-item{ display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:12px; text-decoration:none; color: rgba(255,255,255,.92); border:1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.02); }
.right-visit-item:hover{ background: rgba(255,255,255,.04); border-color: rgba(96,165,250,.28); }
.right-visit-avatar{ width: 34px; height: 34px; border-radius:999px; overflow:hidden; display:flex; align-items:center; justify-content:center; flex:0 0 auto; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); }
.right-visit-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.right-visit-avatar-fallback{ font-weight: 900; font-size: 14px; color: rgba(255,255,255,.9); }
.right-visit-meta{ min-width:0; flex:1 1 auto; }
.right-visit-name{ font-weight: 850; font-size: 13px; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.right-visit-sub{ color: var(--muted); font-size: 12px; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.right-visit-when{ color: var(--muted); font-size: 12px; flex:0 0 auto; }

.profile-form{ margin-top: 14px; }
.profile-textarea{ min-height: 96px; resize: vertical; }

.profile-library{ margin-top: 18px; }
.profile-library-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; }
.profile-library-title{ margin: 0; }
/* View toggle (list / grid icons) */
.profile-view-toggle{
  display:inline-flex;
  gap: 2px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 2px;
  background: rgba(255,255,255,.02);
}
.profile-view-btn{
  width: 34px;
  height: 34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.45);
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
  padding: 0;
}
.profile-view-btn svg{ width: 18px; height: 18px; }
.profile-view-btn:hover{ color: rgba(255,255,255,.75); background: rgba(255,255,255,.04); }
.profile-view-btn.is-active{
  color: #fff;
  background: rgba(96,165,250,.15);
}
.profile-view-btn:focus{ outline: none; }
.profile-view-btn:focus-visible{ box-shadow: 0 0 0 2px rgba(96,165,250,.35); }

/* ── User social panel (following / followers inline) ── */
.user-social-panel{
  margin-top: 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.025);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding: 14px 16px;
  animation: socialPanelIn .2s ease-out;
}
@keyframes socialPanelIn{
  from{ opacity: 0; transform: translateY(-8px) scale(.98); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}
.user-social-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.user-social-panel-title{ font-weight:800; font-size:14px; letter-spacing:.1px; }
.user-social-panel-close{
  background: rgba(255,255,255,.06); border:none; color:var(--muted); font-size:16px; cursor:pointer;
  width:28px; height:28px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  transition: background .14s ease, color .14s ease;
}
.user-social-panel-close:hover{ color:var(--text); background: rgba(255,255,255,.10); }
.user-social-panel-list{ display:flex; flex-direction:column; gap:4px; max-height:360px; overflow-y:auto; }
.user-social-card{
  display:flex; align-items:center; gap:12px; padding:8px 10px;
  border-radius:12px; transition: background .16s ease, transform .16s ease; cursor:pointer;
  text-decoration:none; color:inherit;
}
.user-social-card:hover{ background: rgba(96,165,250,.06); transform: translateX(3px); border-color: rgba(96,165,250,.12); }
.user-social-card-avatar{
  width:38px; height:38px; border-radius:50%; overflow:hidden; flex-shrink:0;
  background: linear-gradient(135deg, rgba(96,165,250,.18), rgba(139,92,246,.14));
  border: 1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  transition: transform .16s ease, box-shadow .16s ease;
}
.user-social-card:hover .user-social-card-avatar{
  transform: scale(1.06);
  box-shadow: 0 0 8px rgba(96,165,250,.15);
}
.user-social-card-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.user-social-card-avatar-fallback{ font-size:14px; font-weight:800; color:rgba(255,255,255,.6); }
.user-social-card-info{ min-width:0; flex:1; }
.user-social-card-name{ font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-social-card-handle{ font-size:12px; color:rgba(255,255,255,.40); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.social-load-more{
  margin-top:10px; width:100%; font-size:13px; padding:9px 16px;
  border-radius:10px; transition: all .16s ease;
}

/* ── Works head (status + view toggle) ── */
.user-works-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  min-height:34px;
}


.profile-books-root{ margin-top: 12px; }
.profile-books-root[data-view="grid"]{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px; }
.profile-books-root[data-view="list"]{ display:flex; flex-direction:column; gap:10px; }
@media(min-width:600px){ .profile-books-root[data-view="grid"]{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media(min-width:900px){ .profile-books-root[data-view="grid"]{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.profile-books{ margin-top: 12px; }
.profile-books[data-view="list"]{ display:flex; flex-direction:column; gap:10px; }
.profile-books[data-view="grid"]{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px; }
@media(min-width:740px){ .profile-books[data-view="grid"]{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.profile-users{ margin-top: 12px; display:flex; flex-direction:column; gap:10px; }
.profile-user{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.profile-user-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.profile-user-avatar{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
}
.profile-user-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.profile-user-meta{ min-width:0; }
.profile-user-name{ font-weight:900; letter-spacing:.15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.profile-user-handle{ color: var(--muted); font-size: 12px; margin-top: 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.profile-user-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.profile-user-actions .btn{ width:auto; min-width:auto; padding:8px 10px; font-size:12px; }

/* === Social card (followers / following user list) === */
.social-card{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  text-decoration: none;
  color: inherit;
  transition: background .14s ease, border-color .14s ease;
}
.social-card:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(96,165,250,.22);
}
.social-card-avatar{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 42px;
  background: linear-gradient(135deg, rgba(96,165,250,.25), rgba(167,139,250,.2));
  border: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.social-card-avatar-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.social-card-avatar-fallback{
  font-weight: 900;
  font-size: 16px;
  color: rgba(255,255,255,.85);
  line-height: 1;
}
.social-card-info{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.social-card-name{
  font-weight: 850;
  font-size: 14px;
  letter-spacing: .15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.social-card-handle{
  color: rgba(255,255,255,.50);
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.social-card-arrow{
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: rgba(255,255,255,.25);
  transition: color .14s ease, transform .14s ease;
}
.social-card:hover .social-card-arrow{
  color: rgba(255,255,255,.55);
  transform: translateX(2px);
}

.profile-avatar-clickable{ cursor: pointer; }

/* === Avatar context menu (mini popover) === */
.avatar-context-menu{
  min-width: 180px;
  padding: 6px;
  border-radius: 14px;
  background: rgba(17,24,39,.96);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: avatarMenuIn .12s ease-out;
}
@keyframes avatarMenuIn{
  from{ opacity: 0; transform: translateY(-4px) scale(.97); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}
.avatar-context-item{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: rgba(255,255,255,.90);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s ease;
}
.avatar-context-item:hover{
  background: rgba(255,255,255,.06);
}
.avatar-context-item svg{
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: rgba(255,255,255,.55);
}

/* === Avatar lightbox (full image viewer) === */
.avatar-lightbox{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: zoom-out;
}
@media(prefers-reduced-motion:no-preference){
  .avatar-lightbox{ animation: lbFadeIn .18s ease; }
  @keyframes lbFadeIn{ from{opacity:0} to{opacity:1} }
}
.avatar-lightbox img{
  max-width: min(90vw, 480px);
  max-height: 80vh;
  border-radius: 20px;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
@media(prefers-reduced-motion:no-preference){
  .avatar-lightbox img{ animation: lbImgIn .2s ease; }
  @keyframes lbImgIn{ from{transform:scale(.92);opacity:0} to{transform:scale(1);opacity:1} }
}

.book-row{
  border:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.book-row:hover{
  border-color: rgba(96,165,250,.18);
  background: rgba(255,255,255,.035);
  box-shadow: 0 6px 24px rgba(0,0,0,.18), 0 0 0 1px rgba(96,165,250,.06);
  transform: translateY(-1px);
}
.book-row-cover{
  width: 56px;
  height: 72px;
  flex: 0 0 56px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}
.book-row-cover .book-cover-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.book-row-cover .book-cover-fallback{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.25);
}
.book-row-cover .book-cover-fallback svg{ width: 22px; height: 22px; }
.book-row-content{ flex: 1; min-width: 0; }
.book-row-title{ font-weight:900; letter-spacing:.2px; margin-bottom:4px; font-size: 15px; }
.book-row-meta{ color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.book-row-desc{ color: rgba(255,255,255,.86); font-size: 13.5px; line-height:1.55; margin-bottom: 0; }

.book-grid{
  border:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.book-grid:hover{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 6px 24px rgba(0,0,0,.16);
  transform: translateY(-1px);
}
.book-grid-cover{
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: rgba(255,255,255,.03);
}
.book-grid-cover .book-cover-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.book-grid-cover .book-cover-fallback{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.18);
}
.book-grid-cover .book-cover-fallback svg{ width: 32px; height: 32px; }
.book-grid-body{ padding: 12px; }
.book-grid-title{ font-weight:900; letter-spacing:.2px; }
.book-badges{ display:flex; gap:8px; flex-wrap:wrap; margin-top: 8px; }
.badge{
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
}

/* Reader page */
.read-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.read-head-left{ min-width: 0; }
.read-head-main{ display:flex; align-items:flex-start; gap:12px; min-width: 0; }
.read-head-text{ min-width: 0; }
.read-cover{ width: 54px; height: 72px; flex: 0 0 auto; border-radius: 10px; overflow:hidden; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
.read-cover img{ width:100%; height:100%; object-fit: cover; display:block; }
.read-head-actions{ display:flex; gap:10px; align-items:center; }
.read-title{ margin:8px 0 0; }
.read-kicker{ color: var(--muted); font-size: 13px; }
.read-cta{ margin-top: 20px; }

/* ── Read page: inline login panel (shared content) ─────────────────── */
.read-login-panel{
  max-width:460px; margin:0 auto; width:100%;
  position:relative; overflow:hidden;
  border:1px solid rgba(147,197,253,.12);
  box-shadow:
    0 0 60px rgba(59,130,246,.06),
    0 8px 40px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.06);
  padding:28px 32px 24px;
  border-radius:16px;
}
.read-login-panel::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:60%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(147,197,253,.40), rgba(167,139,250,.30), transparent);
  pointer-events:none;
}
.read-login-progress{
  position:absolute; top:0; left:0; right:0; height:3px;
  background:rgba(255,255,255,.04); z-index:2; overflow:hidden;
  border-radius:16px 16px 0 0;
}
.read-login-progress-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg, #3b82f6, #8b5cf6, #a78bfa);
  border-radius:0 3px 3px 0;
  transition:width .35s cubic-bezier(.4,0,.2,1);
}
.read-login-header{ text-align:center; margin-bottom:24px; }
.read-login-header h3{
  margin:0 0 6px;
  background:linear-gradient(135deg, #e0e7ff 0%, #93c5fd 50%, #a78bfa 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  font-size:20px; font-weight:900; letter-spacing:.3px;
}
.read-login-subtitle{
  color:rgba(255,255,255,.45); font-size:13px; line-height:1.5;
  margin:0; max-width:36ch; margin-inline:auto;
}
.read-login-fields{ display:flex; flex-direction:column; gap:14px; }
@media(prefers-reduced-motion:no-preference){
  .read-login-panel .field{ animation:readLoginFieldIn .45s cubic-bezier(.16,1,.3,1) both; }
  .read-login-panel .field:nth-child(2){ animation-delay:.06s; }
  @keyframes readLoginFieldIn{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
}
.read-login-submit-btn{
  width:100%; margin-top:4px;
  font-size:15px; font-weight:700; padding:14px 24px;
  border-radius:12px; letter-spacing:.3px;
  background:linear-gradient(135deg, #3b82f6 0%, #7c3aed 100%);
  position:relative; overflow:hidden;
  transition:transform .15s ease, box-shadow .2s ease;
}
.read-login-submit-btn:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 6px 24px rgba(59,130,246,.25);
}
.read-login-submit-btn:active:not(:disabled){ transform:translateY(0); }
.read-login-submit-btn::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.12) 0%, transparent 50%);
  pointer-events:none;
}
.read-login-footer{
  margin-top:20px; padding-top:16px;
  border-top:1px solid rgba(255,255,255,.06);
  text-align:center;
}
.read-login-footer .hint{ text-align:center; }
.read-login-error{
  margin-top:10px; padding:10px 14px;
  border-radius:10px; font-size:13px;
  background:rgba(239,68,68,.12); color:#fca5a5;
  border:1px solid rgba(239,68,68,.20);
  text-align:center;
}
@media(prefers-reduced-motion:reduce){
  .read-login-panel .field{ animation:none; }
  .read-login-progress-fill{ transition:none; }
  .read-login-submit-btn:hover:not(:disabled){ transform:none; }
}
@media(max-width:720px){
  .read-login-panel{ padding:20px 18px 18px; }
  .read-login-header{ margin-bottom:18px; }
  .read-login-submit-btn{ font-size:14px; padding:13px 20px; }
}
.read-btn{ width:auto; min-width: 160px; }

.read-head-actions .read-btn{ min-width: 0; padding: 9px 12px; font-size: 13px; line-height: 1.1; border-radius: 999px; }
.read-head-actions .read-btn.icon{ padding: 9px 10px; }

@media(max-width:640px){
  .read-head-actions .read-btn{ padding: 8px 10px; }
  .read-head-actions .read-btn .read-btn-text{ display:none; }
  .read-head-actions .read-btn .btn-icon{ margin-right: 0; }
}

.read-layout{ display:grid; grid-template-columns: 1fr 320px; gap:18px; margin-top: 12px; align-items:start; }
@media(max-width:980px){
  .read-layout{ grid-template-columns: 1fr; }
}

@media(min-width:981px){
  .read-layout{ grid-template-columns: 1fr 320px; column-gap: 18px; }

  .read-sidebar{
    overflow: hidden;
  }

  .read-sidebar-body{
    opacity: 1;
    clip-path: inset(0 0 0 0);
    max-height: 1200px;
    overflow: auto;
    transition: opacity .18s ease, max-height .22s ease, clip-path .22s ease;
  }

  body.read-sidebar-hidden .read-layout{ grid-template-columns: 1fr 62px; column-gap: 0px; }
  body.read-sidebar-hidden .read-sidebar{ padding: 10px; }
  body.read-sidebar-hidden .read-sidebar-body{ opacity: 0; clip-path: inset(0 0 0 100%); max-height: 0; overflow: hidden; pointer-events:none; }
  body.read-sidebar-hidden .read-sidebar-top .read-btn .read-btn-text{ display:none; }
  body.read-sidebar-hidden .read-sidebar-top .read-btn{ justify-content:center; }

  body.read-sidebar-animating .read-layout{ grid-template-columns: 1fr 320px !important; column-gap: 18px !important; }
  body.read-sidebar-animating .read-sidebar{ padding: 16px !important; }

  body.read-sidebar-hiding .read-sidebar-body{ opacity: 0; clip-path: inset(0 0 0 100%); max-height: 0; overflow: hidden; pointer-events:none; }
  body.read-sidebar-revealing .read-sidebar-body{ opacity: 0; clip-path: inset(0 0 0 100%); max-height: 0; overflow: hidden; pointer-events:none; }
}

@media (prefers-reduced-motion: reduce){
  .read-sidebar{ transition: none !important; }
  .read-sidebar-body{ transition: none !important; }
}

.read-main{ min-width:0; }

.read-sidebar{
  background: linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.00)), var(--surface);
  border:1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.03);
  padding: 16px;
}

.read-sidebar-top{ display:flex; justify-content:flex-end; margin-bottom: 10px; }
.read-sidebar-top .read-btn{ min-width: 0; width: 100%; padding: 9px 10px; font-size: 13px; line-height: 1.1; border-radius: 999px; }
.read-sidebar-top .read-btn.icon{ padding: 9px 10px; }

.read-sidebar-top .read-btn:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
  transform: translateY(-1px);
}

.read-sidebar-top .read-btn:active{
  transform: translateY(0px);
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.18);
}

.read-side-title{ font-weight:900; letter-spacing:.2px; }
.read-side-divider{ height:1px; background: rgba(255,255,255,.08); margin:12px 0; }

.read-chapters{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.read-chapter-btn{
  text-align:left;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  color: var(--text);
  cursor:pointer;
  transition: transform .08s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.read-chapter-btn:hover{ background: rgba(255,255,255,.035); border-color: rgba(96,165,250,.28); box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.read-chapter-btn:active{ transform: translateY(1px); box-shadow: none; }
.read-chapter-btn.active{ border-color: rgba(96,165,250,.45); box-shadow: 0 0 0 3px rgba(96,165,250,.10); }
.read-chapter-title{ font-weight:800; margin-bottom:2px; }
.read-chapter-sub{ color: var(--muted); font-size:12px; }

.read-choices{ margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); }
.read-choices-title{ font-weight:900; letter-spacing:.2px; margin-bottom:10px; }
.read-choices-buttons{ display:flex; flex-direction:column; gap:10px; }
.read-choice-btn{
  width:100%;
  text-align:left;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  transition: transform .05s, border-color .2s, background .2s;
}
.read-choice-btn:hover{ background: rgba(255,255,255,.04); border-color: rgba(96,165,250,.35); }
.read-choice-btn:active{ transform: translateY(1px); }

.read-roadmap{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.read-roadmap-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.read-roadmap-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.read-roadmap-btn{ width:auto; min-width:auto; padding:8px 10px; font-size:12px; }
.read-roadmap-item{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.02);
}
.read-roadmap-badge{ width:26px; height:26px; border-radius:10px; background: rgba(96,165,250,.16); color:#bfdbfe; display:flex; align-items:center; justify-content:center; font-weight:900; flex:0 0 auto; }
.read-roadmap-text{ min-width:0; }
.read-roadmap-choice{ font-weight:800; }
.read-roadmap-dest{ color: var(--muted); font-size: 12px; margin-top:2px; }

.comments-backdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity:0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index:9996;
}
.comments-backdrop.show{ opacity:1; pointer-events: auto; }

.comments-panel{
  position:fixed;
  top:16px;
  right:16px;
  bottom:16px;
  width: min(420px, calc(100% - 32px));
  background: linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.00)), var(--surface);
  border:1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04);
  display:flex;
  flex-direction:column;
  transform: translateX(12px);
  opacity:0;
  pointer-events: none;
  transition: transform .22s cubic-bezier(.16,1,.3,1), opacity .18s ease;
  z-index:9997;
}
.comments-panel.show{ transform: none; opacity:1; pointer-events: auto; }

@media(max-width:980px){
  .comments-panel{
    left:12px;
    right:12px;
    top:auto;
    bottom:12px;
    width:auto;
    max-height: calc(100dvh - 24px);
  }
}

.comments-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 12px; border-bottom:1px solid rgba(255,255,255,.08); }
.comments-title{ font-size: 13px; font-weight: 900; letter-spacing:.15px; }
.comments-close{ width:auto; min-width:auto; padding:8px 10px; font-size:12px; }

.comments-controls{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.06); flex-wrap:wrap; }
.comments-controls .input{ width:auto; min-width: 140px; font-size: 12px; padding: 10px 10px; border-radius: 12px; }
.comments-spoiler-toggle{ margin:0; }

.comments-list{ padding: 10px 12px; display:flex; flex-direction:column; gap:6px; overflow:auto; min-height: 0; flex: 1 1 auto; scroll-behavior: smooth; overscroll-behavior: contain; }
.comments-inline{ border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); border-radius: 14px; padding: 12px; color: rgba(255,255,255,.92); }
.comments-inline-hint{ color: var(--muted); }
.comments-inline-loading{ color: var(--muted); }
.comments-inline-error{ border-color: rgba(244,63,94,.28); background: rgba(244,63,94,.06); color: rgba(255,255,255,.92); }
.comment-item{ border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); border-radius: 12px; padding: 8px; }
.comment-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.comment-author{ display:flex; align-items:center; gap:8px; min-width:0; }
.comment-avatar{ width:30px; height:30px; border-radius: 11px; background: rgba(96,165,250,.16); color:#bfdbfe; display:flex; align-items:center; justify-content:center; font-weight:900; font-size: 12px; flex:0 0 auto; }
.comment-meta{ min-width:0; }
.comment-name{ font-size: 12px; font-weight: 900; letter-spacing:.12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.comment-sub{ color: var(--muted); font-size: 11px; margin-top:1px; }

.comment-action{ width:auto; min-width:auto; padding:6px 9px; font-size:11.5px; }
.comment-action .btn-icon{ width:16px; height:16px; display:inline-block; vertical-align:-3px; margin-right:6px; }
.comment-action.active{ border-color: rgba(96,165,250,.55); background: rgba(96,165,250,.10); }

 .comment-body-wrap{ position:relative; }

 .comment-icon-btn{
  width:auto;
  min-width:auto;
  padding: 6px 9px;
  font-size: 11.5px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition: transform .05s, border-color .2s, background .2s;
 }
 .comment-icon-btn:hover{ background: rgba(255,255,255,.05); }
 .comment-icon-btn:active{ transform: translateY(1px); }
 .comment-icon-btn:focus-visible{ outline: 2px solid rgba(255,255,255,.22); outline-offset: 2px; }
 .comment-icon-btn .btn-icon{ width:16px; height:16px; display:block; }
 .comment-icon-btn.active{ border-color: rgba(96,165,250,.55); background: rgba(96,165,250,.10); }
 .comment-icon-btn.is-busy{ opacity:.70; }
 .comment-icon-btn[aria-busy="true"]{ opacity:.70; }

 .comment-icon-btn .icon-swap{ position:relative; width:16px; height:16px; display:inline-block; }
 .comment-icon-btn .icon-swap .btn-icon{ position:absolute; inset:0; }
 .comment-icon-btn .icon-swap .icon-solid{ opacity:0; transform: scale(.92); transition: opacity .14s ease, transform .14s ease; }
 .comment-icon-btn .icon-swap .icon-outline{ opacity:1; transition: opacity .14s ease; }
 .comment-icon-btn.active .icon-swap .icon-solid{ opacity:1; transform: scale(1); }
 .comment-icon-btn.active .icon-swap .icon-outline{ opacity:0; }

 .comment-icon-btn.did-pop{ animation: commentPop .18s ease-out; }
 @keyframes commentPop{ 0%{ transform: scale(1); } 55%{ transform: scale(1.06); } 100%{ transform: scale(1); } }

 .comment-icon-btn.comment-like.active{ border-color: rgba(244,63,94,.50); background: rgba(244,63,94,.10); color: rgba(255,255,255,.95); }
 .comment-icon-btn.comment-like.active .icon-heart{ color: rgba(244,63,94,.95); }
 .comment-icon-btn.comment-repost.active{ border-color: rgba(34,197,94,.50); background: rgba(34,197,94,.10); color: rgba(255,255,255,.95); }
 .comment-icon-btn.comment-repost.active .icon-repost{ color: rgba(34,197,94,.95); }

 .comment-reports-admin{
  margin-top: 6px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size: 11px;
  color: rgba(255,255,255,.76);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  padding: 4px 8px;
  border-radius: 999px;
 }

 .auth-gate{ display:flex; flex-direction:column; gap:10px; }
 .auth-gate-brand{ display:flex; align-items:center; gap:10px; }
 .auth-gate .brand-badge{ width:12px; height:12px; border-radius: 5px; background-image:url('/assets/brand/narqx-icon-white.avif'), linear-gradient(180deg, rgba(96,165,250,.95), rgba(37,99,235,.95)); background-position:center, center; background-size:70%, cover; background-repeat:no-repeat, no-repeat; box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 10px 26px rgba(96,165,250,.18); }
 .auth-gate-text{ color: rgba(255,255,255,.88); line-height: 1.35; }
 .auth-gate-actions{ display:flex; flex-direction:column; gap:8px; }
 .auth-gate-actions .btn{ width:100%; justify-content:center; border-radius: 999px; }
 .auth-gate-hint{ margin-top: 2px; }

 .share-preview-v2{ display:flex; align-items:center; gap:10px; }
 .share-avatar{ width:36px; height:36px; border-radius: 999px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); display:flex; align-items:center; justify-content:center; font-weight: 900; }
 .share-name{ font-weight: 900; letter-spacing:.15px; }
 .share-spoiler{ margin-top: 4px; display:inline-flex; align-items:center; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 900; background: rgba(244,63,94,.16); border: 1px solid rgba(244,63,94,.35); }
 .share-text{ margin-top: 10px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); border-radius: 14px; padding: 12px; line-height: 1.45; }
 .share-text.is-spoiler{ filter: blur(8px); user-select:none; }
 .share-grid-v2{ margin-top: 12px; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; }
 .share-icon{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding: 12px 10px; border-radius: 16px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.02); color: rgba(255,255,255,.92); text-decoration:none; box-shadow: 0 0 0 1px rgba(255,255,255,.04); transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease; }
 .share-icon:hover{ transform: translateY(-1px); border-color: rgba(96,165,250,.45); background: rgba(96,165,250,.08); box-shadow: 0 0 0 3px rgba(96,165,250,.14); }
 .share-icon:active{ transform: translateY(0px); }
 .share-icon:focus-visible{ outline: 2px solid rgba(96,165,250,.45); outline-offset: 2px; }
 .share-icon-label{ font-size: 12px; font-weight: 900; color: rgba(255,255,255,.88); }
 .share-icon-btn{ appearance:none; cursor:pointer; }

 @media(max-width:420px){
  .share-grid-v2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
 }

 .share-preview{ border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); border-radius: 14px; padding: 12px; }
 .share-preview-handle{ font-weight: 900; letter-spacing:.15px; }
 .share-preview-text{ color: rgba(255,255,255,.86); margin-top: 6px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
 .share-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; margin-top: 12px; }
 @media(max-width:520px){
  .share-grid{ grid-template-columns: 1fr; }
 }
 .share-tile{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.92);
  border-radius: 14px;
  padding: 12px;
  text-align:center;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  transition: transform .05s, border-color .2s, background .2s;
 }
 .share-tile:hover{ background: rgba(255,255,255,.05); border-color: rgba(96,165,250,.35); }
 .share-tile:active{ transform: translateY(1px); }

/* ── Unified Share Modal (smodal) ── */
.smodal-content-preview{
  display:flex; align-items:center; gap:12px;
  padding:12px; border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  margin-bottom:14px;
}
.smodal-content-cover{
  width:52px; height:70px; border-radius:8px;
  object-fit:cover; flex:0 0 auto;
  background:rgba(255,255,255,.06);
}
.smodal-content-avatar{
  width:38px; height:38px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:15px; flex:0 0 auto;
}
.smodal-content-meta{ min-width:0; flex:1 1 auto; }
.smodal-content-title{
  font-weight:900; font-size:14px; letter-spacing:.15px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.smodal-content-author{
  color:rgba(255,255,255,.60); font-size:12.5px; margin-top:2px;
}
.smodal-content-text{
  color:rgba(255,255,255,.86); font-size:13px; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; margin-top:3px;
}

.smodal-section-label{
  font-size:11px; font-weight:800; text-transform:uppercase;
  letter-spacing:.8px; color:rgba(255,255,255,.45);
  margin-bottom:8px;
}

.smodal-hint{
  font-size:12px; color:rgba(255,255,255,.45); text-align:center;
  margin-bottom:12px; letter-spacing:.2px; line-height:1.4;
}
.smodal-nav-arrows{
  display:flex; align-items:center; justify-content:center; gap:14px; margin-top:10px;
}
.smodal-nav-btn{
  appearance:none; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.04);
  border-radius:50%; width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.7); cursor:pointer; transition:all .15s ease;
}
.smodal-nav-btn:hover{ background:rgba(255,255,255,.10); border-color:rgba(96,165,250,.4); color:#fff; }
.smodal-nav-btn:active{ transform:scale(.92); }
.smodal-nav-counter{
  font-size:12px; color:rgba(255,255,255,.40); font-weight:600; min-width:48px; text-align:center;
}
.smodal-apps{
  display:grid; grid-template-columns:repeat(6, minmax(0,1fr));
  gap:6px; margin-bottom:8px;
}
.smodal-app{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; padding:8px 4px; border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
  color:rgba(255,255,255,.92);
  text-decoration:none; cursor:pointer;
  transition:transform .12s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.smodal-app:hover{
  transform:translateY(-2px);
  border-color:rgba(96,165,250,.45);
  background:rgba(96,165,250,.08);
  box-shadow:0 4px 16px rgba(96,165,250,.12);
}
.smodal-app:active{ transform:translateY(0); }
.smodal-app:focus-visible{ outline:2px solid rgba(96,165,250,.5); outline-offset:2px; }
.smodal-app.is-selected{
  border-color:rgba(96,165,250,.55);
  background:rgba(96,165,250,.10);
  box-shadow:0 0 0 2px rgba(96,165,250,.18);
}
.smodal-app-icon{
  width:28px; height:28px; border-radius:8px;
  object-fit:contain;
}
.smodal-copy-icon{
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
}
.smodal-copy-icon svg{ width:20px; height:20px; stroke:rgba(255,255,255,.80); }
.smodal-app-label{
  font-size:9.5px; font-weight:800; color:rgba(255,255,255,.80);
  white-space:nowrap;
}

.smodal-preview-wrap{ min-height:60px; }
.smodal-preview-card{
  border:1px solid rgba(255,255,255,.10);
  border-left:3px solid rgba(96,165,250,.6);
  background:rgba(255,255,255,.02);
  border-radius:12px; padding:12px;
}
.smodal-preview-card[data-app="whatsapp"]{ border-left-color:#25D366; }
.smodal-preview-card[data-app="telegram"]{ border-left-color:#0088CC; }
.smodal-preview-card[data-app="x"]{ border-left-color:#555; }
.smodal-preview-card[data-app="facebook"]{ border-left-color:#1877F2; }
.smodal-preview-card[data-app="reddit"]{ border-left-color:#FF4500; }
.smodal-preview-card[data-app="linkedin"]{ border-left-color:#0A66C2; }
.smodal-preview-card[data-app="viber"]{ border-left-color:#7360F2; }
.smodal-preview-card[data-app="instagram"]{ border-left-color:#E4405F; }

.smodal-preview-cover-wrap{
  position:relative; display:inline-block;
  margin-bottom:10px; border-radius:8px; overflow:hidden;
  max-width:120px;
}
.smodal-preview-cover{
  display:block; width:100%; height:auto;
  border-radius:8px; object-fit:cover;
  background:rgba(255,255,255,.06);
}
.smodal-preview-watermark{
  position:absolute; bottom:4px; right:4px;
  width:20px; height:20px; border-radius:4px;
  opacity:.75; pointer-events:none;
  background:rgba(0,0,0,.45);
  padding:2px;
}

.smodal-preview-app-badge{
  display:flex; align-items:center; gap:6px;
  font-size:11px; font-weight:800; color:rgba(255,255,255,.55);
  margin-bottom:8px;
}
.smodal-preview-app-icon{ width:16px; height:16px; border-radius:4px; object-fit:contain; }
.smodal-preview-body{
  font-size:13px; line-height:1.5; color:rgba(255,255,255,.86);
  word-break:break-word;
}
.smodal-preview-line{ white-space:pre-wrap; }
.smodal-preview-line:empty{ height:8px; }
.smodal-preview-note{
  margin-top:8px; font-size:11px; color:rgba(255,255,255,.45);
  font-style:italic;
}

.smodal-download-cover{
  appearance:none; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04);
  border-radius:10px; padding:8px 14px; margin-bottom:12px;
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; color:rgba(255,255,255,.75);
  cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.smodal-download-cover:hover{ background:rgba(255,255,255,.08); border-color:rgba(96,165,250,.4); color:#fff; }
.smodal-download-cover:active{ transform:translateY(1px); }
.smodal-download-cover:focus-visible{ outline:2px solid rgba(96,165,250,.45); outline-offset:2px; }
.smodal-download-cover svg{ flex:0 0 auto; }

@media(prefers-reduced-motion:no-preference){
  .smodal-preview-card{ animation:smodalFadeIn .2s ease; }
  @keyframes smodalFadeIn{ from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }
}

@media(max-width:420px){
  .smodal-apps{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

 .comment-item.is-skeleton{ opacity: .90; }
 .comment-skel{ border-radius: 10px; background: rgba(255,255,255,.06); }
 .comment-skel-line{ height: 12px; width: 150px; }
 .comment-skel-line.sm{ width: 90px; margin-top: 8px; opacity: .8; }
 .comment-skel-body{ height: 14px; width: 100%; margin-top: 12px; }
 .comment-skel-body.sm{ width: 78%; opacity: .8; }

.comment-body{ margin-top:6px; color: rgba(255,255,255,.92); font-size: 12.5px; line-height: 1.38; white-space: pre-wrap; word-break: break-word; }
.comment-body.is-spoiler{ filter: blur(7px); user-select:none; pointer-events:none; }
.comment-spoiler-badge{ display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid rgba(244,63,94,.35); color: rgba(244,63,94,.95); background: rgba(244,63,94,.10); margin-top: 0; }

 .comment-item.is-reply{ margin-left: 14px; padding: 7px; }
 .comment-item.is-reply .comment-avatar{ width:26px; height:26px; border-radius: 10px; }
 .comment-item.is-reply .comment-body{ font-size: 12px; line-height: 1.35; }
 .comment-item.is-reply .comment-sub{ font-size: 10.5px; }

 .comment-head-right{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
 .comment-more-btn{
  width:32px;
  min-width:32px;
  height:32px;
  padding:0;
  border-radius: 10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.88);
  display:grid;
  place-items:center;
  cursor:pointer;
 }
 .comment-more-btn:hover{ background: rgba(255,255,255,.05); }
 .comment-more-btn:active{ transform: translateY(1px); }
 .comment-more-btn:focus-visible{ outline: 2px solid rgba(255,255,255,.22); outline-offset: 2px; }

 .comments-reply-pill{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:1px solid rgba(96,165,250,.22);
  background: rgba(96,165,250,.08);
  border-radius: 12px;
  padding: 8px 10px;
  color: rgba(255,255,255,.92);
  margin-bottom: 10px;
 }
 .comments-reply-pill-text{ font-weight: 900; font-size: 12px; color: rgba(255,255,255,.90); }
 .comments-reply-pill-close{ width:auto; min-width:auto; padding:6px 10px; font-size:12px; border-radius: 999px; }
 .comments-admin-toggle{ margin:0; }

.comments-compose{ padding: 12px 14px; border-bottom:1px solid rgba(255,255,255,.08); background: rgba(17,24,39,.92); }
.comments-text{ width:100%; resize: vertical; min-height: 70px; }
.comments-compose-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; flex-wrap:wrap; }
.comments-compose-left{ display:flex; align-items:center; gap:8px; }
.comments-emoji-btn{ width:32px; height:32px; padding:0; display:flex; align-items:center; justify-content:center; border-radius:8px; color:rgba(255,255,255,.50); transition:color .15s ease,background .15s ease; }
.comments-emoji-btn:hover{ color:rgba(255,255,255,.80); background:rgba(255,255,255,.06); }
.comments-emoji-btn .icon{ width:20px; height:20px; }
.comments-emoji-picker{ padding:8px 14px 10px; border-top:1px solid rgba(255,255,255,.06); display:flex; flex-wrap:wrap; gap:4px; max-height:140px; overflow-y:auto; }
.comments-emoji-picker button{ appearance:none; border:none; background:transparent; font-size:20px; line-height:1; padding:4px 5px; border-radius:6px; cursor:pointer; transition:background .12s ease,transform .12s ease; }
.comments-emoji-picker button:hover{ background:rgba(255,255,255,.08); transform:scale(1.15); }
.comments-compose-row .btn{ width:auto; min-width: 140px; }
.comments-compose-row .btn .btn-icon{ margin-right: 8px; }

.reader{ margin-top: 16px; }
.reader p{ line-height: 1.75; margin: 0 0 12px; }
.reader h1,.reader h2,.reader h3{ margin: 18px 0 10px; }
.reader blockquote{ margin: 12px 0; padding-left: 12px; border-left: 3px solid rgba(255,255,255,.18); opacity: .95; }
.reader ul,.reader ol{ padding-left: 18px; margin: 8px 0 14px; }
.reader a{ text-decoration: underline; }
.reader img{ max-width:100%; height:auto; border-radius:12px; border:1px solid rgba(255,255,255,.08); display:block; margin: 14px 0; }

/* ── Reader Protection: Watermark + Quote ── */
.reader-wm{ pointer-events:none!important; user-select:none!important; }
.reader-wm-bg{ pointer-events:none!important; user-select:none!important; }
@media (prefers-reduced-motion: reduce) { .reader-wm{ transition:none!important; } }
.reader-quote-btn{
  display:none; align-items:center; gap:6px;
  padding:6px 14px; border-radius:8px;
  background:rgba(30,40,60,.92); color:#e2e8f0;
  border:1px solid rgba(255,255,255,.12);
  font-size:13px; font-weight:500;
  cursor:pointer; backdrop-filter:blur(8px);
  box-shadow:0 4px 16px rgba(0,0,0,.4);
  transition:background .15s, transform .1s;
}
.reader-quote-btn:hover{ background:rgba(50,60,80,.95); transform:translateY(-1px); }
.reader-quote-btn svg{ flex-shrink:0; opacity:.7; }

.password-row{ display:flex; gap:10px; align-items:stretch; }
.password-row .input{ flex:1 1 auto; }
.icon-btn{
  width:44px;
  min-width:44px;
  padding:0;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  display:grid;
  place-items:center;
  cursor:pointer;
}
.icon-btn:hover{ background: rgba(255,255,255,.06); }
.icon-btn:active{ transform: translateY(1px); }
.icon-btn:focus-visible{ outline: 2px solid rgba(255,255,255,.22); outline-offset: 2px; }
.icon-btn .icon{ width:20px; height:20px; }
.icon-btn[aria-pressed="true"]{ border-color: rgba(96,165,250,.50); background: rgba(96,165,250,.10); color: rgba(147,197,253,1); }
.icon-btn[aria-pressed="true"]:hover{ background: rgba(96,165,250,.16); }

/* ═══════════════════════════════════════════════════════════
   Writer panel — 3-column collapsible layout (2026)
   Left: works/chapters · Center: editor · Right: tools
   ═══════════════════════════════════════════════════════════ */

/* ── Shell: 3-column grid ── */
.writer-shell{
  display:grid;
  grid-template-columns: 280px 1fr 260px;
  gap:0;
  align-items:stretch;
  margin:0;
  height: calc(100vh - 64px);
  min-height: 480px;
  overflow:hidden;
}
@media(max-width:1200px){
  .writer-shell{ grid-template-columns: 260px 1fr 240px; }
}
@media(max-width:980px){
  .writer-shell{ grid-template-columns: 1fr; height:auto; min-height:0; }
}

/* ── Collapsed states ── */
.writer-shell.left-collapsed{ grid-template-columns: 0px 1fr 260px; }
.writer-shell.right-collapsed{ grid-template-columns: 280px 1fr 0px; }
.writer-shell.left-collapsed.right-collapsed{ grid-template-columns: 0px 1fr 0px; }
@media(max-width:1200px){
  .writer-shell.left-collapsed{ grid-template-columns: 0px 1fr 240px; }
  .writer-shell.right-collapsed{ grid-template-columns: 260px 1fr 0px; }
  .writer-shell.left-collapsed.right-collapsed{ grid-template-columns: 0px 1fr 0px; }
}
@media(max-width:980px){
  .writer-shell.left-collapsed,
  .writer-shell.right-collapsed,
  .writer-shell.left-collapsed.right-collapsed{ grid-template-columns: 1fr; }
}

/* ── Left sidebar ── */
.writer-left{
  background: linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.00)), var(--surface);
  border-right:1px solid rgba(255,255,255,.06);
  overflow-y:auto;
  overflow-x:hidden;
  transition: width .22s ease, opacity .18s ease;
}
.writer-left-inner{
  padding: 16px 14px;
  min-width: 240px;
}
.writer-shell.left-collapsed .writer-left{
  width:0; opacity:0; overflow:hidden; pointer-events:none; border-right:none;
}
@media(max-width:980px){
  .writer-left{ border-right:none; border-bottom:1px solid rgba(255,255,255,.06); }
  .writer-shell.left-collapsed .writer-left{ display:none; }
}

/* ── Right panel (tools) ── */
.writer-right{
  background: linear-gradient(180deg,rgba(255,255,255,0.025),rgba(255,255,255,0.00)), var(--surface);
  border-left:1px solid rgba(255,255,255,.06);
  overflow-y:auto;
  overflow-x:hidden;
  transition: width .22s ease, opacity .18s ease;
}
.writer-shell.right-collapsed .writer-right{
  width:0; opacity:0; overflow:hidden; pointer-events:none; border-left:none;
}
@media(max-width:980px){
  .writer-right{ border-left:none; border-top:1px solid rgba(255,255,255,.06); }
  .writer-shell.right-collapsed .writer-right{ display:none; }
}

/* ── Sidebar shared styles ── */
.writer-sidebar-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
}

.writer-title{ font-weight:900; letter-spacing:.3px; font-size:13px; }
.writer-btn{ width:auto; min-width:auto; padding:8px 10px; font-size:12px; line-height:1.1; display:inline-flex; align-items:center; gap:6px; }
.writer-btn-sm{ padding:6px 8px; font-size:11px; }
.writer-btn .btn-icon{ width:16px; height:16px; display:block; }

.writer-selected-book{ margin-bottom: 10px; }
.writer-selected-book-hint{ color: var(--muted); font-size: 11px; margin-bottom: 8px; }

.writer-selected-book-preview{ border:1px solid rgba(255,255,255,.08); border-radius: var(--radius); overflow:hidden; background: rgba(255,255,255,.02); position:relative; }
.writer-selected-cover{ width: 100%; aspect-ratio: 3 / 4; background: rgba(255,255,255,.03); user-select:none; pointer-events:none; }
.writer-selected-cover *{ user-select:none; }
.writer-selected-cover .nq-cover-img{ width:100%; height:100%; object-fit: cover; display:block; }
.writer-selected-cover-title{
  position:absolute;
  left:0; right:0; bottom:0;
  padding: 10px 12px 8px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.65) 55%, rgba(0,0,0,.82) 100%);
  user-select:none; pointer-events:none;
}

.writer-preview-title{ font-weight: 950; letter-spacing: .2px; line-height: 1.15; font-size: 16px; color: rgba(255,255,255,.92); text-shadow: 0 4px 16px rgba(0,0,0,.45); }
.writer-preview-handle{ margin-top: 3px; font-size: 12px; font-weight: 800; color: rgba(255,255,255,.72); }

.writer-selected-book-form{ margin-top: 10px; }
.writer-selected-book-details{ margin-top: 10px; }
.writer-selected-book-details-sidebar{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.writer-textarea{ min-height: 80px; resize: vertical; font-size:13px; }

.writer-divider{
  height:1px;
  background: rgba(255,255,255,.08);
  margin:12px 0;
}

.writer-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.writer-item{
  display:flex; align-items:center;
  text-align:left;
  padding:10px;
  border-radius: 10px;
  border:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  color: var(--text);
  cursor:pointer;
  transition: transform .08s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
  font-size:13px;
}

.writer-item:hover{ background: rgba(255,255,255,.035); border-color: rgba(96,165,250,.28); box-shadow: 0 2px 10px rgba(0,0,0,.10); }
.writer-item:active{ transform: translateY(1px); box-shadow: none; }
.writer-item.active{ border-color: rgba(96,165,250,.45); box-shadow: 0 0 0 3px rgba(96,165,250,.10); background: rgba(96,165,250,.06); }
.writer-item-title{ font-weight:800; margin-bottom:1px; font-size:13px; }
.writer-item-sub{ color: var(--muted); font-size:11px; }
.writer-item[draggable]{ cursor:grab; }
.writer-item[draggable]:active{ cursor:grabbing; }
.writer-item.is-dragging{
  opacity:.65;
  background:rgba(96,165,250,.10);
  border-color:rgba(96,165,250,.5);
  box-shadow: 0 6px 24px rgba(0,0,0,.35), 0 0 0 2px rgba(96,165,250,.18);
  transform: scale(.97);
}
.chapter-drop-indicator{
  height:2px; border-radius:2px;
  background:rgba(96,165,250,.8);
  margin:3px 0;
  pointer-events:none;
  box-shadow: 0 0 6px rgba(96,165,250,.4);
}
.writer-item-drag-handle{
  display:inline-flex; align-items:center; margin-right:5px;
  color:rgba(255,255,255,.25); flex-shrink:0;
}
.writer-item[draggable]:hover .writer-item-drag-handle{ color:rgba(255,255,255,.5); }
.writer-empty{ color: var(--muted); font-size:12px; padding:6px 2px; }

/* ── Center: main editor ── */
.writer-main{
  background: linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.00)), var(--surface);
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  min-height:0;
}

.writer-main-header{
  display:flex;
  gap:10px;
  flex-wrap:nowrap;
  align-items:center;
  padding: 10px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.015);
  flex-shrink:0;
}

.writer-main-meta{ min-width:0; flex:0 1 auto; overflow:hidden; }
.writer-main-label{ color: var(--muted); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.writer-main-value{ font-weight:900; letter-spacing:.2px; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.writer-main-actions{ display:flex; gap:8px; margin-left:auto; flex-shrink:0; }

/* ── Panel toggle buttons ── */
.writer-panel-toggle{
  width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.5);
  cursor:pointer;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
  flex-shrink:0;
}
.writer-panel-toggle:hover{ background: rgba(255,255,255,.05); color: rgba(255,255,255,.85); border-color: rgba(96,165,250,.25); }
.writer-panel-toggle.is-collapsed{ color: rgba(96,165,250,.7); }

/* ── Toolbar ── */
.writer-toolbar{
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  padding: 8px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
  flex-shrink:0;
}

.writer-tool{
  width:auto;
  padding:7px 9px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.05);
  background: rgba(255,255,255,.02);
  color: var(--text);
  cursor:pointer;
  font-size:13px;
  transition: background .14s ease, border-color .14s ease, transform .06s ease, color .14s ease;
}
.writer-tool:hover{ background: rgba(255,255,255,.05); border-color: rgba(96,165,250,.25); color: rgba(255,255,255,.95); }
.writer-tool:active{ transform: translateY(1px); }
.writer-tool .btn-icon{ width:15px; height:15px; display:block; }
.writer-tool-sep{ width:1px; height:20px; background: rgba(255,255,255,.08); margin:0 2px; align-self:center; }

.t-italic{ font-style: italic; }
.t-underline{ text-decoration: underline; }

/* ── Cover row (in left sidebar) ── */
.writer-cover-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 8px;
  padding: 8px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.writer-cover-label{ color: var(--muted); font-size:11px; }

.writer-cover-right{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

.writer-cover-preview{
  width: 36px; height: 36px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

.writer-cover-fallback{
  width: 36px; height: 36px;
  border-radius: 8px;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  font-weight: 900; font-size:12px;
  color: rgba(255,255,255,.85);
}

/* ── Editor area ── */
.writer-editor-wrap{ padding: 14px 16px 16px; flex:1 1 auto; }

.writer-editor{
  margin-top:10px;
  min-height: 320px;
  padding:14px 16px;
  border-radius: 12px;
  background: rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.07);
  outline:none;
  line-height: 1.7;
  font-size:15px;
}

#view-write[data-writer-mode="book"] .writer-editor{ display:none; }
#view-write[data-writer-mode="book"] #writer-chapter-image-file{ display:none; }
#view-write[data-writer-mode="book"] .writer-editor-wrap .writer-selected-book-details{ margin-top: 0; padding-top: 0; border-top: none; }
#view-write[data-writer-mode="book"] .writer-selected-book-details-sidebar{ display:none; }
#view-write[data-writer-mode="chapter"] .writer-editor-wrap .writer-selected-book-details{ display:none; }

#writer-status{min-height:16px; margin-top:8px; color: transparent}
#writer-error{min-height:16px}

.writer-editor:focus{ border-color: rgba(96,165,250,.40); box-shadow:0 0 0 3px rgba(96,165,250,.12); }
.writer-editor a{ color:#93c5fd; }
.writer-editor blockquote{ margin: 12px 0; padding-left: 14px; border-left: 3px solid rgba(96,165,250,.35); color:#c7d2fe; }
.writer-editor img{ max-width:100%; height:auto; border-radius:12px; border:1px solid rgba(255,255,255,.08); display:block; margin: 10px 0; }

/* ── Interactive chapter rows ── */
.writer-interactive-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
}
.writer-interactive-toggle{ display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.writer-interactive-checkbox{ width:16px; height:16px; }
.writer-interactive-text{ font-weight:800; }
.writer-interactive-actions{ display:flex; align-items:center; gap:10px; }
.writer-interactive-summary{ color: var(--muted); font-size:12px; }

.choices-editor{ display:flex; flex-direction:column; gap:12px; }
.choices-editor-list{ display:flex; flex-direction:column; gap:10px; }
.choices-editor-row{ display:grid; grid-template-columns: 1fr 1fr auto; gap:10px; align-items:center; }
@media(max-width:720px){
  .choices-editor-row{ grid-template-columns: 1fr; }
}

/* ── Summary grid ── */
.writer-summary-hint{ margin-top:6px; }
.writer-summary-grid{ margin-top:12px; display:grid; gap:8px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.writer-summary-grid > div{ padding:10px; border-radius:10px; border:1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.02); }
.writer-summary-grid > div .writer-main-value{ margin-top:2px; }
.writer-summary-cols{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px; }
.writer-span-2{ grid-column: 1 / -1; }

/* ── Translation section ── */
.writer-translation-section{
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 14px !important;
  margin-top: 4px;
}
.writer-translation-status{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.writer-translation-icon{
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.writer-translation-hint{
  font-size: 12px;
  color: rgba(255,255,255,.4);
  margin-top: 6px;
  line-height: 1.5;
}

.writer-editor-wrap .writer-selected-book-details{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.06);
}

/* ═══════════════════════════════════════════════════════════
   Writer Tools Panel (right sidebar)
   ═══════════════════════════════════════════════════════════ */
.writer-tools-root{ padding: 14px 12px; }

.wt-header{
  margin-bottom: 14px;
}
.wt-header-title{
  display:flex; align-items:center; gap:8px;
  font-weight:900; font-size:13px; letter-spacing:.3px;
  color: rgba(255,255,255,.85);
}
.wt-header-icon{ display:inline-flex; color: rgba(96,165,250,.7); }

.wt-body{ display:flex; flex-direction:column; gap:16px; }

.wt-section{
  padding:0;
}
.wt-section-title{
  display:flex; align-items:center; gap:6px;
  font-weight:800; font-size:11px; letter-spacing:.4px;
  text-transform:uppercase;
  color: rgba(255,255,255,.45);
  margin-bottom:8px;
}
.wt-section-title svg{ color: rgba(255,255,255,.3); }

/* ── Stats grid ── */
.wt-stats-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:6px;
}
.wt-stat{
  padding:8px 10px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.05);
  background: rgba(255,255,255,.02);
  text-align:center;
}
.wt-stat-value{
  font-weight:900; font-size:16px; letter-spacing:.2px;
  color: rgba(255,255,255,.9);
}
.wt-stat-label{
  font-size:10px; color: rgba(255,255,255,.4);
  margin-top:2px; text-transform:uppercase; letter-spacing:.3px;
}

/* ── Focus mode button ── */
.wt-focus-btn{
  width:100%;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(96,165,250,.2);
  background: rgba(96,165,250,.06);
  color: rgba(96,165,250,.85);
  font-weight:800; font-size:12px;
  cursor:pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.wt-focus-btn:hover{
  background: rgba(96,165,250,.12);
  border-color: rgba(96,165,250,.35);
  color: rgba(96,165,250,1);
}

/* ── Notes textarea ── */
.wt-notes-textarea{
  width:100%;
  min-height:100px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.2);
  color: var(--text);
  font-size:13px;
  line-height:1.5;
  resize:vertical;
  outline:none;
  font-family:inherit;
}
.wt-notes-textarea:focus{
  border-color: rgba(96,165,250,.3);
}
.wt-notes-textarea::placeholder{ color: rgba(255,255,255,.25); }

/* ── Characters list ── */
.wt-char-list{ display:flex; flex-direction:column; gap:6px; }
.wt-char-row{
  display:flex; align-items:flex-start; gap:8px;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.05);
  background: rgba(255,255,255,.02);
}
.wt-char-info{ flex:1; min-width:0; }
.wt-char-name{ font-weight:800; font-size:12px; }
.wt-char-desc{ font-size:11px; color: rgba(255,255,255,.45); margin-top:1px; }
.wt-char-del{
  width:20px; height:20px;
  display:flex; align-items:center; justify-content:center;
  border:none; background:none; color: rgba(255,255,255,.3);
  cursor:pointer; font-size:14px; flex-shrink:0;
  border-radius:4px;
}
.wt-char-del:hover{ color: rgba(239,68,68,.8); background: rgba(239,68,68,.1); }
.wt-empty{ color: rgba(255,255,255,.3); font-size:11px; padding:4px 0; }

/* ── Add button (shared) ── */
.wt-add-btn{
  width:100%;
  padding:8px 10px;
  border-radius:8px;
  border:1px dashed rgba(255,255,255,.1);
  background: transparent;
  color: rgba(255,255,255,.45);
  font-size:12px; font-weight:700;
  cursor:pointer;
  transition: color .14s ease, border-color .14s ease, background .14s ease;
  margin-top:6px;
}
.wt-add-btn:hover{
  color: rgba(96,165,250,.8);
  border-color: rgba(96,165,250,.25);
  background: rgba(96,165,250,.04);
}

/* ── Verse / Scene tools ── */
.wt-verse-info, .wt-scene-hint, .wt-wiki-hint, .wt-outline-hint{
  font-size:11px; color: rgba(255,255,255,.35); line-height:1.5; margin-bottom:8px;
}
.wt-scene-btns{ display:flex; gap:6px; flex-wrap:wrap; }
.wt-scene-btn{
  padding:6px 10px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.7);
  font-size:11px; font-weight:800; font-family:monospace;
  cursor:pointer;
  transition: background .14s ease, border-color .14s ease;
}
.wt-scene-btn:hover{ background: rgba(255,255,255,.06); border-color: rgba(96,165,250,.25); }

/* ── Goal bar ── */
.wt-goal-bar{
  height:6px; border-radius:3px;
  background: rgba(255,255,255,.06);
  overflow:hidden;
  margin-bottom:6px;
}
.wt-goal-fill{
  height:100%; border-radius:3px;
  background: linear-gradient(90deg, rgba(96,165,250,.6), rgba(139,92,246,.6));
  transition: width .3s ease;
}
.wt-goal-progress-label{
  font-size:11px; color: rgba(255,255,255,.4); margin-bottom:4px;
}
.wt-branch-count{ font-size:12px; color: rgba(255,255,255,.5); }

/* ═══════════════════════════════════════════════════════════
   Focus mode — hides sidebars, expands editor
   ═══════════════════════════════════════════════════════════ */
.writer-shell.focus-mode{
  grid-template-columns: 0px 1fr 0px !important;
}
.writer-shell.focus-mode .writer-left,
.writer-shell.focus-mode .writer-right{
  width:0; opacity:0; overflow:hidden; pointer-events:none; border:none;
}
.writer-shell.focus-mode .writer-main-header{
  opacity:.5;
  transition: opacity .2s ease;
}
.writer-shell.focus-mode .writer-main-header:hover{
  opacity:1;
}
.writer-shell.focus-mode .writer-editor{
  min-height: 60vh;
  max-width: 720px;
  margin-left:auto;
  margin-right:auto;
}

/* ── Mobile: stack vertically ── */
@media(max-width:980px){
  .writer-shell.focus-mode{ grid-template-columns: 1fr !important; }
  .writer-shell.focus-mode .writer-left,
  .writer-shell.focus-mode .writer-right{ display:none; }
  .writer-panel-toggle{ display:none; }
}

/* =========================================================
   HOME FEED — Editorial Reading Cards (PRO)
   Scoped to #view-home to avoid impacting other feeds.
========================================================= */

#view-home .feed{ gap: 12px; }
#view-home .feed-twitter{ gap: 12px; }

#view-home .feed-item{
  padding: 0;
  border-radius: 18px;
  background: rgba(255,255,255,.022);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 38px rgba(0,0,0,.22);
  overflow: hidden;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
  contain: content;
}
#view-home .feed-item:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.032);
  box-shadow: 0 16px 55px rgba(0,0,0,.28);
}
@media (prefers-reduced-motion: reduce){
  #view-home .feed-item{ transition: none; }
  #view-home .feed-item:hover{ transform: none; }
}

#view-home .feed-card{ padding: 14px 14px 10px; display:block; position:relative; }
@media(min-width:740px){
  #view-home .feed-card{ padding: 16px 16px 12px; }
}

#view-home .feed-card-top{ display:flex; gap:12px; align-items:flex-start; }

#view-home .feed-avatar{
  width: 42px;
  height: 42px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}

#view-home .feed-head{ align-items: center; gap: 8px; flex-wrap: nowrap; }
#view-home .feed-name{ font-weight: 950; letter-spacing: .2px; }
#view-home .feed-handle,
#view-home .feed-time{ font-size: 12px; color: rgba(255,255,255,.70); }

#view-home .feed-text{
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.52;
  color: rgba(255,255,255,.90);
}
#view-home .feed-text-clamp{
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

#view-home .feed-embed{ margin: 10px 14px 0; }
@media(min-width:740px){
  #view-home .feed-embed{ margin: 12px 16px 0; }
}

#view-home .feed-embed{
  border-radius: 16px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 0 0 1px rgba(255,255,255,.03);
  overflow: hidden;
}

#view-home .feed-embed-cover{ width: 96px; }
@media(min-width:740px){
  #view-home .feed-embed-cover{ width: 104px; }
}

#view-home .feed-embed-body{
  padding: 12px 12px 12px 0;
  min-width: 0;
}
@media(max-width:520px){
  #view-home .feed-embed-body{ padding-right: 12px; }
}

#view-home .feed-embed-title{
  font-weight: 950;
  letter-spacing: .2px;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media(min-width:740px){
  #view-home .feed-embed-title{ font-size: 15px; }
}

#view-home .feed-embed-sub{
  margin-top: 3px;
  font-size: 12px;
  color: rgba(255,255,255,.68);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#view-home .feed-tag{
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.86);
}

#view-home .feed-embed-cta{
  padding: 0 14px 0 0;
}
#view-home .feed-read-btn{
  padding: 8px 18px;
  font-size: 12px;
  border-radius: 10px;
}
@media(max-width:520px){
  #view-home .feed-embed-cta{ padding: 0 10px 0 0; }
  #view-home .feed-read-btn{ padding: 6px 12px; font-size: 11px; }
}

#view-home .feed-actions{
  margin-top: 0;
  padding: 6px 14px 10px;
  border-top: 1px solid rgba(255,255,255,.05);
  display: flex;
  justify-content: space-around;
  gap: 0;
}

#view-home .feed-action{
  padding: 8px 12px;
  border-radius: 999px;
  gap: 6px;
  font-size: 12.5px;
}
#view-home .feed-action .btn-icon{ width: 18px; height: 18px; }

#view-home .feed-tabs{
  backdrop-filter: blur(12px);
  background: rgba(11,18,32,.72);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  overflow: visible;
}

#view-home .feed-tab{
  opacity: .78;
  font-weight: 900;
  letter-spacing: .15px;
  position: relative;
}
#view-home .feed-tab[aria-selected="true"]{
  opacity: 1;
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
}

#view-home .feed-tab[aria-selected="true"]::after{
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 6px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,.50);
  filter: blur(.2px);
  box-shadow: 0 6px 18px rgba(255,255,255,.08);
}

@media(max-width:520px){
  #view-home .feed-actions{
    padding: 6px 10px 8px;
  }
  #view-home .feed-action{
    padding: 7px 8px;
  }
 }

/* =========================
   HOME FEED — PRO++ polish
========================= */

#view-home .feed-head{ opacity: .92; }
#view-home .feed-handle,
#view-home .feed-time{ color: rgba(255,255,255,.62); }

#view-home .feed-embed{
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
#view-home .feed-embed:hover{
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.18);
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
}
#view-home .feed-embed:active{ transform: translateY(1px); }
@media (prefers-reduced-motion: reduce){
  #view-home .feed-embed{ transition:none; }
  #view-home .feed-embed:hover{ transform:none; box-shadow:none; }
  #view-home .feed-embed:active{ transform:none; }
}

#view-home .feed-action-count{
  font-variant-numeric: tabular-nums;
  letter-spacing: .1px;
}

/* did-pop animation now handled by base .feed-action.did-pop rule */

#view-home[data-scrolled="true"] .feed-tabs{
  background: rgba(11,18,32,.82);
  box-shadow: 0 12px 36px rgba(0,0,0,.22);
}

/* ── Feed loading (uses app-loader) ───────────────────────────────────────── */
#home-status.is-loading{
  display:flex; align-items:center; justify-content:center;
  padding:48px 0 32px;
  margin:0;
}

#view-home .feed-item.is-featured .feed-card{ padding-bottom: 14px; }
#view-home .feed-item.is-featured .feed-avatar{ display:flex; }
#view-home .feed-item.is-featured .feed-embed-cover{ width: 140px; }
#view-home .feed-item.is-featured .feed-embed-title{ font-size: 16px; }
@media(max-width:520px){
  #view-home .feed-item.is-featured .feed-embed-cover{ width: 120px; }
}

#view-home .feed-item.is-featured .feed-text-clamp{
  -webkit-line-clamp: 5;
  line-clamp: 5;
}

#view-home .feed-item.is-featured .feed-read-btn{
  font-size: 12px;
  padding: 8px 20px;
}

#view-home .feed-item.is-featured .feed-embed-cover{
  position: relative;
}
#view-home .feed-item.is-featured .feed-embed-cover::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.14));
  pointer-events: none;
}

/* =========================
   HOME FEED — PRO+++ finish
========================= */

#view-home .feed-embed:focus{ outline: none; }
#view-home .feed-embed:focus-visible{
  outline: 3px solid rgba(96,165,250,.38);
  outline-offset: 2px;
}

#view-home .feed-embed-title{ letter-spacing: .15px; }
#view-home .feed-text{ text-rendering: optimizeLegibility; }
#view-home .feed-time{ font-variant-numeric: tabular-nums; }

#view-home .feed-item.is-featured .feed-embed-title{
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#view-home .feed-item.is-featured .feed-embed-tags{
  max-height: 28px;
  overflow: hidden;
}

#view-home .feed-featured-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: #f5b731;
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  filter: drop-shadow(0 0 5px rgba(245,183,49,.55)) drop-shadow(0 0 12px rgba(245,183,49,.25));
  animation: featuredGlow 2.4s ease-in-out infinite alternate;
  transition: transform .14s ease;
}
#view-home .feed-featured-icon:hover{ transform: scale(1.15); }
#view-home .feed-featured-icon svg{ display:block; width: 24px; height: 24px; }

/* Featured tooltip */
#view-home .feed-featured-icon[data-tooltip]::after{
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  right: -8px;
  width: 240px;
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(245,183,49,.12), rgba(167,139,250,.08)), rgba(11,18,32,.96);
  border: 1px solid rgba(245,183,49,.18);
  color: rgba(255,255,255,.88);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .1px;
  box-shadow: 0 12px 36px rgba(0,0,0,.4);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 10;
  white-space: normal;
}
#view-home .feed-featured-icon[data-tooltip]::before{
  content: "";
  position: absolute;
  bottom: calc(100% + 4px);
  right: 8px;
  width: 8px;
  height: 8px;
  background: rgba(11,18,32,.96);
  border-right: 1px solid rgba(245,183,49,.18);
  border-bottom: 1px solid rgba(245,183,49,.18);
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity .18s ease;
  z-index: 11;
}
#view-home .feed-featured-icon[data-tooltip]:hover::after,
#view-home .feed-featured-icon[data-tooltip]:hover::before{
  opacity: 1;
  transform: translateY(0);
}
#view-home .feed-featured-icon[data-tooltip]:hover::before{
  transform: rotate(45deg);
}
@keyframes featuredGlow{
  0%{ filter: drop-shadow(0 0 4px rgba(245,183,49,.45)) drop-shadow(0 0 10px rgba(245,183,49,.18)); }
  100%{ filter: drop-shadow(0 0 7px rgba(245,183,49,.65)) drop-shadow(0 0 16px rgba(245,183,49,.30)); }
}
@media (prefers-reduced-motion: reduce){
  #view-home .feed-featured-icon{ animation: none; }
}

#view-home .feed-item.is-featured .feed-embed:hover,
#view-home .feed-item.is-featured .feed-embed:focus-visible{
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 16px 42px rgba(0,0,0,.14);
}

#view-home .feed-item.is-featured .feed-embed:hover{
  box-shadow: 0 14px 46px rgba(0,0,0,.16);
}

@media (prefers-reduced-motion: reduce){
  #view-home .feed-item.is-featured .feed-embed:hover,
  #view-home .feed-item.is-featured .feed-embed:focus-visible{
    box-shadow: none;
  }
}

#view-home .feed-item.is-featured .feed-embed:focus-visible{
  box-shadow: 0 0 0 2px rgba(255,255,255,.18);
}

#view-home .feed-avatar img{ filter: saturate(.95) contrast(1.02); }

#view-home .feed-item:not(.is-featured){
  content-visibility: auto;
  contain-intrinsic-size: 220px;
}
/* News items in home feed */
#view-home .feed-item.feed-item--news{
  border-left: 3px solid rgba(96,165,250,.5);
  background: rgba(96,165,250,.04);
}
#view-home .feed-item.feed-item--news:hover{
  border-left-color: rgba(96,165,250,.7);
  background: rgba(96,165,250,.06);
}
#view-home .feed-item.feed-item--news .feed-avatar--news{
  background: rgba(96,165,250,.12);
  color: rgba(96,165,250,.8);
  border-radius: 50%;
  display: grid; place-items: center;
}
#view-home .feed-item.feed-item--news .feed-name{
  color: rgba(96,165,250,.9);
  font-weight: 700;
  text-decoration: none;
}
#view-home .feed-item.feed-item--news .feed-text strong{
  color: rgba(255,255,255,.92);
}

.feed-sentinel{
  height: 1px;
  width: 100%;
  pointer-events: none;
}

/* ── Feed inline comment box ── */
.feed-comment-box{ margin:0 14px 10px; }
.feed-comment-inner{ border:1px solid rgba(255,255,255,.10); border-radius:14px; background:rgba(255,255,255,.025); overflow:hidden; transition:border-color .16s ease; }
.feed-comment-inner:focus-within{ border-color:rgba(96,165,250,.40); background:rgba(96,165,250,.03); }
.feed-comment-input{ display:block; width:100%; min-height:56px; max-height:140px; padding:12px 14px 6px; border:none; background:transparent; color:rgba(255,255,255,.92); font-size:13.5px; line-height:1.5; resize:vertical; outline:none; font-family:inherit; }
.feed-comment-input::placeholder{ color:rgba(255,255,255,.35); }
.feed-comment-bar{ display:flex; align-items:center; justify-content:space-between; padding:4px 10px 8px 14px; gap:10px; }
.feed-comment-counter{ font-size:11px; color:rgba(255,255,255,.35); font-variant-numeric:tabular-nums; }
.feed-comment-send{ padding:5px 16px; border-radius:999px; border:1px solid rgba(96,165,250,.30); background:rgba(96,165,250,.12); color:rgba(96,165,250,.90); font-size:12px; font-weight:800; cursor:pointer; transition:background .14s ease,border-color .14s ease,color .14s ease; }
.feed-comment-send:hover:not(:disabled){ background:rgba(96,165,250,.22); border-color:rgba(96,165,250,.50); color:#fff; }
.feed-comment-send:disabled{ opacity:.4; cursor:default; }
/* Feed comment list (inline recent comments) */
.feed-comment-list{ padding:8px 14px 4px; max-height:260px; overflow-y:auto; }
.feed-comment-list:empty{ display:none; }
.feed-comment-list-loading{ display:flex; align-items:center; justify-content:center; padding:12px 0; }
.feed-comment-item{ padding:5px 0; border-bottom:1px solid rgba(255,255,255,.04); font-size:13px; line-height:1.45; }
@media(prefers-reduced-motion:no-preference){
  .feed-comment-box{ animation:feedCommentIn .22s cubic-bezier(.22,1,.36,1); }
  .feed-comment-item{ animation:feedCommentIn .18s ease; }
  @keyframes feedCommentIn{ from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }
}
.feed-comment-item:last-child{ border-bottom:none; }
.feed-comment-author{ font-weight:700; color:rgba(255,255,255,.75); margin-right:4px; }
.feed-comment-text{ color:rgba(255,255,255,.60); }
.feed-comment-time{ color:rgba(255,255,255,.28); font-size:11px; margin-left:6px; }
.feed-comment-empty{ text-align:center; color:rgba(255,255,255,.30); font-size:12px; padding:10px 0; }

/* ── Role badges in feed handles & comments ── */
.feed-handle .role-badge,
.feed-comment-author .role-badge{ display:inline-flex; vertical-align:middle; width:15px; height:15px; margin-left:3px; opacity:.82; transition:opacity .14s ease,transform .14s ease; cursor:pointer; }
.feed-handle .role-badge:hover,
.feed-comment-author .role-badge:hover{ opacity:1; transform:scale(1.18); }
.feed-handle .role-badge img,
.feed-comment-author .role-badge img{ width:100%; height:100%; object-fit:contain; border-radius:2px; }
.feed-handle .role-badge svg,
.feed-comment-author .role-badge svg{ width:100%; height:100%; }

/* ── Thread-line "load more comments" ── */
.feed-thread-more{
  display:flex; align-items:center; gap:0; width:100%; padding:0; margin:0 0 6px;
  border:none; background:none; cursor:pointer; position:relative; min-height:32px;
  transition:opacity .22s ease;
}
.feed-thread-more:disabled{ pointer-events:none; }
.feed-thread-line{
  position:absolute; left:18px; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, rgba(96,165,250,.08) 0%, rgba(96,165,250,.28) 50%, rgba(96,165,250,.08) 100%);
  border-radius:1px;
  transition:background .22s ease;
}
.feed-thread-more:hover .feed-thread-line{
  background:linear-gradient(180deg, rgba(96,165,250,.12) 0%, rgba(96,165,250,.45) 50%, rgba(96,165,250,.12) 100%);
}
.feed-thread-pill{
  display:inline-flex; align-items:center; gap:6px;
  margin-left:28px; padding:4px 14px 4px 10px;
  border-radius:999px;
  background:rgba(96,165,250,.06); border:1px solid rgba(96,165,250,.14);
  color:rgba(96,165,250,.85); font-size:11.5px; font-weight:700;
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
  white-space:nowrap;
}
.feed-thread-pill svg{ flex-shrink:0; opacity:.7; transition:opacity .14s ease; }
.feed-thread-more:hover .feed-thread-pill{
  background:rgba(96,165,250,.14); border-color:rgba(96,165,250,.30);
  color:rgba(96,165,250,1); transform:translateX(2px);
}
.feed-thread-more:hover .feed-thread-pill svg{ opacity:1; }
/* Animated dots */
.feed-thread-dots{ display:inline-flex; gap:2px; margin-left:4px; }
.feed-thread-dots span{
  width:3px; height:3px; border-radius:50%;
  background:rgba(96,165,250,.50);
  animation:feedThreadDot 1.4s ease-in-out infinite;
}
.feed-thread-dots span:nth-child(2){ animation-delay:.15s; }
.feed-thread-dots span:nth-child(3){ animation-delay:.30s; }
@keyframes feedThreadDot{
  0%,80%,100%{ opacity:.3; transform:scale(.8); }
  40%{ opacity:1; transform:scale(1.3); }
}
/* Loading state */
.feed-thread-pill.is-loading .feed-thread-pill-text{ display:none; }
.feed-thread-pill.is-loading .feed-thread-dots span{
  background:rgba(96,165,250,.80);
  animation-duration:.8s;
}
/* Collapse animation */
.feed-thread-more.is-collapsing{
  animation:feedThreadCollapse .28s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes feedThreadCollapse{
  to{ opacity:0; max-height:0; margin:0; overflow:hidden; }
}
@media(prefers-reduced-motion:reduce){
  .feed-thread-dots span{ animation:none; opacity:.5; }
  .feed-thread-more.is-collapsing{ animation:none; display:none; }
}

/* ── Feed soft-deleted event ── */
.feed-embed--deleted{ pointer-events:none; opacity:.55; filter:grayscale(.35); cursor:default; }
.feed-embed--deleted .feed-embed-cover{ opacity:.45; }
.feed-deleted-notice{ display:flex; align-items:center; gap:6px; margin-top:8px; padding:6px 10px; border-radius:8px; background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.15); color:rgba(239,68,68,.85); font-size:11.5px; font-weight:600; line-height:1.3; }
.feed-deleted-notice svg{ flex-shrink:0; color:rgba(239,68,68,.7); }

.writer-price-breakdown{ color: var(--muted); font-size: 12px; margin-top: 6px; line-height: 1.45; }
.writer-summary-actions{ margin-top: 10px; }

/* Respect users that prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .bg{ animation: none; }
  .cloud{ animation: none; }
}

.comments-panel{ width: min(560px, calc(100vw - 32px)); }
@media(min-width:980px){
  .comments-panel{ width: min(640px, calc(100vw - 36px)); }
}

.comments-panel[data-density="cozy"] .comment-item {
  padding: 10px 12px;
}
.comments-panel[data-density="cozy"] .comment-body {
  font-size: 13px;
}
.comments-panel[data-density="cozy"] .comment-item.is-reply {
  padding: 9px 10px;
}

.comments-panel .comments-density-toggle {
  font-size: 11px;
  opacity: 0.85;
}

.comments-head{ padding: 10px 12px; }
.comments-title{ font-size: 13px; font-weight: 900; letter-spacing: .15px; }
.comments-close{ padding: 6px 9px; font-size: 11px; min-width: auto; }

.comments-controls{ padding: 8px 12px; gap: 8px; }
.comments-controls .input{ padding: 9px 10px; font-size: 12px; border-radius: 12px; min-width: 140px; }

/* Sort dropdown: readable on dark bg */
.comments-controls select.input{
  appearance: none;
  -webkit-appearance: none;
  background-color: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.90);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.5)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 7px;
  padding-right: 30px;
}
.comments-controls select.input:hover{
  border-color: rgba(255,255,255,.22);
  background-color: rgba(255,255,255,.08);
}
.comments-controls select.input:focus{
  outline: none;
  border-color: rgba(96,165,250,.50);
  box-shadow: 0 0 0 2px rgba(96,165,250,.14);
}
.comments-controls select.input option{
  background: #1a2236;
  color: rgba(255,255,255,.88);
  padding: 8px 12px;
}
.comments-controls .checkbox-label{ font-size: 12px; line-height: 1.2; }

.comments-controls .comments-spoiler-toggle{ display: none; }

/* Botón ajustes (arriba derecha) — alta especificidad para ganar a .icon-btn */
.comments-controls .comments-settings-btn{
  width: 36px;
  height: 36px;
  min-width: 36px;
  max-width: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,1);
  border-radius: 10px;
  opacity: 1;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04);
}

/* El SVG dentro (tu clase .icon ya existe) */
.comments-controls .comments-settings-btn .icon{
  width: 20px;
  height: 20px;
  display: block;         /* evita "aplastados" por line-height */
  aspect-ratio: 1 / 1;    /* por si algún layout lo deforma */
  color: inherit;
  stroke-width: 2.2;
}
.comments-controls .comments-settings-btn:hover{ background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.30); }

.comments-settings-pop{
  position: absolute;
  right: 12px;
  top: 48px;
  z-index: 10;
  width: min(320px, calc(100% - 24px));
  background: rgba(2,6,23,.92);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 10px 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.comments-settings-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 6px;
}
.comments-settings-label{ font-size: 12px; color: rgba(255,255,255,.86); font-weight: 700; }
.comments-settings-pill{ padding: 6px 10px; border-radius: 999px; font-size: 12px; }
.comments-settings-seg{ display:flex; gap: 8px; }
.comments-settings-seg .btn{ padding: 6px 10px; border-radius: 999px; font-size: 12px; }
.comments-settings-seg .btn.active{ border-color: rgba(96,165,250,.35); background: rgba(96,165,250,.12); }

.comments-compose{ padding: 10px 12px; }
.comments-text{ min-height: 54px; font-size: 12.5px; line-height: 1.35; padding: 10px 10px; border-radius: 12px; }
.comments-compose-row{ margin-top: 8px; gap: 10px; }
.comments-compose-row .checkbox-label{ font-size: 12px; }
#btn-comments-send{ width: auto; min-width: 120px; padding: 9px 12px; border-radius: 999px; font-size: 12.5px; }

.comments-list{ padding: 10px 12px; gap: 5px; overscroll-behavior: contain; }

.comment-item{ padding: 8px 9px; border-radius: 12px; }
.comment-avatar{ width: 28px; height: 28px; border-radius: 10px; font-size: 12px; }
.comment-name{ font-size: 12px; letter-spacing: .1px; }
.comment-sub{ font-size: 11px; margin-top: 1px; }
.comment-body{ margin-top: 6px; font-size: 12px; line-height: 1.4; }

/* Nota: este bloque queda sobreescrito más abajo por la jerarquía de replies */
.comment-item.is-reply{ margin-left: 12px; padding: 7px 8px; }
.comment-item.is-reply .comment-avatar{ width: 26px; height: 26px; border-radius: 9px; }
.comment-item.is-reply .comment-body{ font-size: 12px; line-height: 1.32; }
.comment-item.is-reply .comment-sub{ font-size: 10.75px; }
.comment-item.is-reply .comment-reply{ display: none !important; }

/* Mentions */
.mention{
  color: rgba(96,165,250,.95);
  text-decoration: none;
  font-weight: 800;
}
.mention:hover{ text-decoration: underline; }

/* Expand / clamp */
.comment-expand-toggle{ margin-top: 6px; }
.comment-expand-toggle .link-btn{ font-size: 12px; padding: 0; text-decoration: none; }
.comment-expand-toggle .link-btn:hover{ text-decoration: underline; }

.comment-clamp-anim{
  overflow: hidden;
  max-height: none;
  transition: max-height .22s ease, opacity .18s ease;
  padding: 2px 2px;
}
.comment-clamp-anim.comment-clamp.is-clamped{ max-height: var(--clamp-h, 64px); }
.comment-clamp-anim.comment-clamp.is-expanded{ max-height: var(--full-h, 800px); }

/* Body wrap + spoiler overlay */
.comment-body-wrap{ position: relative; border-radius: 12px; overflow: hidden; }
.comment-body-wrap .comment-clamp{ min-height: 44px; }
.comment-item.is-reply .comment-body-wrap .comment-clamp{ min-height: 40px; }

.comment-spoiler-overlay{
  position: absolute;
  inset: 0;
  margin: 0;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(15,23,42,.72);
  color: rgba(255,255,255,.92);
  border-radius: inherit;            /* no duplicar luego */
  padding: 8px 10px;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset;
}
.comment-spoiler-overlay:hover{ background: rgba(15,23,42,.80); }
.comment-spoiler-overlay:active{ transform: translateY(0.5px); }
.comment-spoiler-overlay:focus-visible{ outline: 2px solid rgba(96,165,250,.32); outline-offset: 2px; }
.comment-spoiler-ov-title{ font-size: 11px; font-weight: 900; letter-spacing: .14px; opacity: .92; }
.comment-spoiler-ov-sub{ font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.80); }


.comment-replies-wrap::before{
  content: "";
  position: absolute;
  left: -2px;
  top: -8px;
  bottom: 8px;
  width: 2px;
  background: rgba(96,165,250,.18);
  border-radius: 999px;
  pointer-events: none;
}

/* si no hay replies reales, no pintes rail */
.comment-replies-wrap[data-has-replies="0"]::before{
  display: none;
}

.comment-replies-inner{
  min-height: 1px;
  display: flex;
  flex-direction: column;
  gap: 8px;                        /* separación entre respuestas */
}

/* === FIX replies no visibles (clipping) === */
.comments-list{
  overflow-y: auto;
  overflow-x: hidden;
}

.comment-item{ contain: none !important; overflow: visible; }
.comments-panel, .comments-list{ contain: initial; }

/* =========================================
   COMMENTS — Replies nesting polish (v1.1)
   (pegar al final del CSS)
   FIX: respeta el estado cerrado por defecto
========================================= */

.comment-replies-wrap{
  margin-top: 6px;
  margin-left: 22px;
  padding-left: 14px;
  position: relative;

  /* ✅ siempre “block”; quien manda es [hidden] */
  display: block;
  opacity: 1;
  transform: none;
  overflow: visible;
  border-left: 1px solid rgba(255,255,255,.06);
}

.comment-replies-wrap[hidden]{
  display: none !important;
}


/* Toggle replies: más pequeño */
[data-toggle-replies]{
  font-size: 12px;
  font-weight: 800;
  opacity: .9;
}

/* Si toggle y acciones comparten fila, empuja los iconos a la derecha */
.comment-actions{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
}

.comment-actions-right{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

/* Replies toggle + action icons share the row */
.comment-actions [data-toggle-replies] + *{
  margin-left: 0;
}

/* Botón “Cargar más” replies */
.comment-replies-more.link-btn{
  font-size: 12px;      /* igual que el inline (ajusta si tu link-btn ya define otro) */
  line-height: 1.2;
  padding: 4px 0;
  font-weight: 600;
  opacity: .9;
}
.comment-replies-more.link-btn:hover{
  opacity: 1;
  text-decoration: underline;
}

.comment-item.is-reply{
  background: rgba(255,255,255,.03);     /* cambia color aquí a tu gusto */
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 10px 10px;
}

.comment-item.is-reply .comment-actions{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.comments-panel .link-btn{
  font-weight: 600;
}

/* ============================
   Comment action buttons (FINAL)
============================ */

.comment-icon-btn{
  --btn-h: 26px;
  --icon-sz: 14px;
  --font-sz: 11px;

  height: var(--btn-h);
  min-width: var(--btn-h);
  padding: 0 8px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.90);

  font-size: var(--font-sz);
  font-weight: 700;
  line-height: 1;

  cursor: pointer;
  user-select: none;

  transition:
    background .15s ease,
    border-color .15s ease,
    transform .05s ease,
    opacity .15s ease;
}

.comment-icon-btn .btn-icon,
.comment-icon-btn .icon{
  width: var(--icon-sz);
  height: var(--icon-sz);
  display: block;
  flex: 0 0 auto;
}

.comment-icon-btn:hover{
  background: rgba(255,255,255,.05);
}

.comment-icon-btn:active{
  transform: translateY(1px);
}

.comment-icon-btn:focus-visible{
  outline: 2px solid rgba(96,165,250,.35);
  outline-offset: 2px;
}

.comment-icon-btn.is-busy,
.comment-icon-btn[aria-busy="true"]{
  opacity: .6;
  pointer-events: none;
}

.comment-icon-btn.active{
  border-color: rgba(96,165,250,.55);
  background: rgba(96,165,250,.10);
}

.comment-icon-btn.comment-like.active{
  border-color: rgba(244,63,94,.45);
  background: rgba(244,63,94,.10);
}

.comment-icon-btn.comment-repost.active{
  border-color: rgba(34,197,94,.45);
  background: rgba(34,197,94,.10);
}

/* ===== READ: nav collapsed (safe) ===== */
.app-nav.is-collapsed{
  width: 76px;
  padding-left: 10px;
  padding-right: 10px;
}

.app-nav.is-collapsed .app-logo-text,
.app-nav.is-collapsed .app-nav-label,
.app-nav.is-collapsed .nav-account-meta,
.app-nav.is-collapsed .nav-account-dots,
.app-nav.is-collapsed .app-nav-legal{
  display:none !important;
}

.app-nav.is-collapsed .app-nav-item{
  justify-content:center;
  gap:0;
  padding: 12px 10px;
}

.app-nav.is-collapsed .app-nav-icon{
  margin:0;
}

.app-nav.is-collapsed .nav-account{
  justify-content:center;
  padding-left: 8px;
  padding-right: 8px;
}

/* El CTA principal no puede quedarse “vacío” al ocultar el texto */
.app-nav.is-collapsed .app-nav-primary{
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(135deg, var(--primary) 0%, #6366f1 100%);
  box-shadow: 0 4px 18px rgba(59,130,246,.35), inset 0 1px 0 rgba(255,255,255,.10);
}
.app-nav.is-collapsed .app-nav-primary:hover{
  background: linear-gradient(135deg, #4f8af7 0%, #818cf8 100%);
  box-shadow: 0 6px 24px rgba(59,130,246,.45), 0 0 0 4px rgba(59,130,246,.12), inset 0 1px 0 rgba(255,255,255,.14);
  transform: translateY(-1px);
}
.app-nav.is-collapsed .app-nav-primary:active{
  transform: translateY(1px) scale(.95);
  box-shadow: 0 2px 10px rgba(59,130,246,.30);
}
.app-nav.is-collapsed .app-nav-primary span{
  display:none !important;
}
.app-nav.is-collapsed .app-nav-primary-icon{
  display:block;
  width: 20px;
  height: 20px;
  color: #fff;
  flex: 0 0 auto;
}

/* ===== Collapsed nav: popovers + CTA centering ===== */

/* Popovers: when collapsed, don't constrain to the narrow nav —
   anchor left and give them a usable min-width */
.app-nav.is-collapsed .nav-account-wrap,
.app-nav.is-collapsed .nav-more-wrap{
  position: static;
}
.app-nav.is-collapsed .nav-popover{
  position: fixed;
  left: 84px;
  right: auto;
  top: auto;
  bottom: auto;
  min-width: 200px;
  width: max-content;
  max-width: 280px;
}

/* =========================================================
   READ — FIX layout (nav no solapa + sin 3a columna fantasma)
   Pegar al FINAL de styles.css
========================================================= */

/* 1) En pantallas grandes, Read NO debe reservar la 3a columna (360px) */
@media(min-width:1200px){
  body.read-page .app-shell{
    grid-template-columns: 280px minmax(0, 1fr) !important;
  }
}

/* 2) Desktop: elimina el "nav fixed + padding-left" y usa el grid normal */
@media(min-width:981px){
  /* Cancela el desplazamiento falso (100px) */
  body.read-page .container{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Cancela el fixed del nav SOLO en desktop (en móvil sigue off-canvas) */
  body.read-page #read-app-nav{
    position: sticky !important;
    top: 18px !important;
    left: auto !important;
    transform: none !important;

    height: calc(100dvh - 36px) !important;
    width: auto !important;

    z-index: 2 !important;
    overflow: auto !important;
  }
}

/* 3) Toggle button: ahora mismo usas <span class="hint">☰</span> y .hint mete margin-top:8px.
      Esto lo corrige y lo deja como “botón” real. */
body.read-page #btn-read-nav-toggle{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding: 10px 12px;
  border-radius: 999px;

  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  cursor:pointer;
}
body.read-page #btn-read-nav-toggle:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
}
body.read-page #btn-read-nav-toggle:active{ transform: translateY(1px); }
body.read-page #btn-read-nav-toggle:focus{ outline:none; }
body.read-page #btn-read-nav-toggle:focus-visible{
  box-shadow: 0 0 0 3px rgba(96,165,250,.18);
}
body.read-page #btn-read-nav-toggle .hint{
  margin-top: 0 !important;
  color: rgba(255,255,255,.86);
  font-size: 14px;
  font-weight: 900;
}

/* ── Marketplace (redesign) ── */

/* Hero */
.mk-hero{
  position: relative;
  text-align: center;
  padding: 40px 20px 28px;
  overflow: hidden;
}
.mk-hero-glow{
  position: absolute;
  inset: -40px;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(168,85,247,.12) 0%, transparent 70%),
              radial-gradient(ellipse 40% 40% at 30% 20%, rgba(59,130,246,.08) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.mk-hero-title{
  position: relative;
  z-index: 1;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -.3px;
  color: #fff;
  margin: 0 0 6px;
}
.mk-hero-sub{
  position: relative;
  z-index: 1;
  font-size: 14px;
  color: rgba(255,255,255,.50);
  margin: 0;
  max-width: 420px;
  margin-inline: auto;
  line-height: 1.5;
}

/* Segmented tabs */
.mk-seg{
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 0 auto 28px;
  max-width: 380px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}
.mk-seg-btn{
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 16px;
  border: none;
  border-radius: 11px;
  background: transparent;
  color: rgba(255,255,255,.50);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .15px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.mk-seg-btn:hover{
  color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.04);
}
.mk-seg-btn.active{
  background: rgba(255,255,255,.08);
  color: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,.18);
}
.mk-seg-icon{
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Panel */
.mk-panel{ min-height: 120px; }

/* Grid */
.mk-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
  padding: 0 0 32px;
}

/* Card */
.mk-card{
  position: relative;
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.mk-card:hover{
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 16px 40px rgba(0,0,0,.30), 0 0 0 1px rgba(255,255,255,.08) inset;
  border-color: rgba(255,255,255,.14);
}
.mk-card:focus-visible{
  outline: 2px solid rgba(255,255,255,.30);
  outline-offset: 2px;
}

/* Cover */
.mk-cover{
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: rgba(255,255,255,.03);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mk-cover-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.mk-card:hover .mk-cover-img{
  transform: scale(1.04);
}
.mk-cover-fallback{
  font-size: 2.6rem;
  font-weight: 900;
  color: rgba(255,255,255,.18);
  user-select: none;
}

/* Price tag floating on cover */
.mk-price-tag{
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 5px 12px;
  border-radius: 10px;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.10);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1;
}

/* Card body */
.mk-card-body{
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mk-card-title{
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .1px;
}
.mk-card-author{
  font-size: 12px;
  color: rgba(255,255,255,.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mk-card-author-link, .nfx-card-author-link{ color: inherit; text-decoration: none; }
.mk-card-author-link:hover, .nfx-card-author-link:hover{ color: rgba(255,255,255,.70); text-decoration: underline; }
.mk-card-desc{
  font-size: 11px;
  color: rgba(255,255,255,.35);
  line-height: 1.45;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mk-card-footer{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.mk-badge{
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.55);
  font-weight: 600;
  letter-spacing: .2px;
  text-transform: uppercase;
}
.mk-shield{
  color: rgba(34,197,94,.65);
  flex-shrink: 0;
}

/* Empty state */
.mk-empty{
  text-align: center;
  padding: 56px 24px;
}
.mk-empty-icon{
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  color: rgba(255,255,255,.25);
}
.mk-empty-icon svg{ width: 100%; height: 100%; }
.mk-empty-title{
  font-size: 17px;
  font-weight: 700;
  color: rgba(255,255,255,.70);
  margin-bottom: 6px;
}
.mk-empty-text{
  font-size: 13px;
  color: rgba(255,255,255,.40);
  max-width: 320px;
  margin-inline: auto;
}

/* Services */
.mk-services-header{ margin-bottom: 20px; }
.mk-services-header h3{ font-size: 17px; font-weight: 800; margin-bottom: 4px; color: #fff; }
.mk-services-sub{ font-size: 13px; color: rgba(255,255,255,.45); }

/* Offers (kept from old) */
.marketplace-offers-list{ display:flex; flex-direction:column; gap:12px; }
.marketplace-offer-card{
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .16s ease, background .16s ease;
}
.marketplace-offer-card:hover{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}
.marketplace-offer-langs{ font-weight: 800; font-size: 15px; letter-spacing: .3px; color: #fff; }
.marketplace-offer-stats{ display:flex; flex-wrap:wrap; gap:8px 18px; font-size:13px; color:rgba(255,255,255,.45); }
.marketplace-offer-stats b{ color:rgba(255,255,255,.80); }
.marketplace-offer-accept{
  align-self: flex-start;
  padding: 8px 20px;
  font-size: 12px;
  border-radius: 10px;
  font-weight: 700;
  margin-top: 4px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #fff;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.marketplace-offer-accept:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.20);
}
.marketplace-offer-own{ font-size: 12px; margin-top: 2px; color: rgba(255,255,255,.40); }

/* Purchased tag */
.mk-price-tag--purchased{
  background: rgba(34,197,94,.85);
  color: #fff;
}
.mk-price-tag--own{
  background: rgba(99,102,241,.75);
  color: #fff;
}
.mk-card--purchased{ opacity: .82; }
.mk-card--purchased:hover{ opacity: 1; }

/* Filter bar */
.mk-filter-bar{
  margin-bottom: 18px;
}
.mk-pills-row{
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.mk-pills-row::-webkit-scrollbar{ height: 3px; }
.mk-pills-row::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius: 4px; }
.mk-pill{
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.55);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
  user-select: none;
}
.mk-pill:hover{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.75);
  border-color: rgba(255,255,255,.14);
}
.mk-pill.active{
  background: rgba(168,85,247,.15);
  color: #fff;
  border-color: rgba(168,85,247,.40);
}
.mk-pill-count{
  font-size: 10px;
  font-weight: 700;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.50);
  padding: 1px 6px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
}
.mk-pill.active .mk-pill-count{
  background: rgba(168,85,247,.25);
  color: rgba(255,255,255,.80);
}
.mk-controls-row{
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}
.mk-search-wrap{
  flex: 1;
  position: relative;
  max-width: 320px;
}
.mk-search-icon{
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,.35);
  pointer-events: none;
}
.mk-search-input{
  width: 100%;
  padding: 7px 12px 7px 32px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: #fff;
  font-size: 13px;
  outline: none;
  transition: border-color .15s, background .15s;
}
.mk-search-input::placeholder{ color: rgba(255,255,255,.30); }
.mk-search-input:focus{
  border-color: rgba(168,85,247,.40);
  background: rgba(255,255,255,.06);
}
.mk-sort-select{
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.70);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: border-color .15s;
}
.mk-sort-select:focus{ border-color: rgba(168,85,247,.40); }
.mk-sort-select option{ background: #181c24; color: #fff; }

.mk-results-count{
  font-size: 12px;
  color: rgba(255,255,255,.35);
  margin-bottom: 10px;
  padding-left: 2px;
}

.mk-filter-bar-sk{
  height: 36px;
  margin-bottom: 16px;
}

/* Skeleton */
.mk-card-sk{
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
}

@media(max-width:600px){
  .mk-hero{ padding: 28px 16px 20px; }
  .mk-hero-title{ font-size: 22px; }
  .mk-seg{ max-width: 100%; margin-bottom: 20px; }
  .mk-grid{
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: 12px;
  }
  .mk-card-body{ padding: 10px 12px 12px; }
  .mk-controls-row{ flex-wrap: wrap; }
  .mk-search-wrap{ max-width: 100%; }
}

/* ── Admin Feed Presets ── */
.admin-feed-presets-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:12px; margin-top:14px;
}
.admin-feed-preset{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:18px 14px 16px; border-radius:16px; cursor:pointer;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(168deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.008) 100%);
  transition:all .25s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
.admin-feed-preset::before{
  content:""; position:absolute; inset:0; border-radius:16px; opacity:0;
  transition:opacity .3s ease; pointer-events:none;
}
.admin-feed-preset:hover{ border-color:rgba(255,255,255,.16); transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,0,0,.25); }
.admin-feed-preset:hover::before{ opacity:1; }
.admin-feed-preset:active{ transform:translateY(0) scale(.97); }
.admin-feed-preset.is-active{
  border-color:rgba(59,130,246,.45);
  box-shadow:0 0 20px rgba(59,130,246,.15), 0 4px 16px rgba(0,0,0,.2);
}
.admin-feed-preset.is-active::after{
  content:""; position:absolute; top:8px; right:8px; width:8px; height:8px;
  border-radius:50%; background:#3b82f6; box-shadow:0 0 8px rgba(59,130,246,.6);
}
.admin-feed-preset-icon{
  font-size:28px; line-height:1; filter:drop-shadow(0 2px 6px rgba(0,0,0,.3));
}
.admin-feed-preset-title{
  font-size:13px; font-weight:800; letter-spacing:.02em; color:rgba(255,255,255,.92); text-align:center;
}
.admin-feed-preset-desc{
  font-size:11px; line-height:1.35; color:rgba(255,255,255,.45); text-align:center;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* Per-preset gradient glows */
.admin-feed-preset[data-preset="default"]::before{ background:radial-gradient(ellipse at 50% 0%, rgba(148,163,184,.12) 0%, transparent 70%); }
.admin-feed-preset[data-preset="newcomers"]::before{ background:radial-gradient(ellipse at 50% 0%, rgba(74,222,128,.15) 0%, transparent 70%); }
.admin-feed-preset[data-preset="newcomers"].is-active{ border-color:rgba(74,222,128,.45); box-shadow:0 0 20px rgba(74,222,128,.12), 0 4px 16px rgba(0,0,0,.2); }
.admin-feed-preset[data-preset="newcomers"].is-active::after{ background:#4ade80; box-shadow:0 0 8px rgba(74,222,128,.6); }
.admin-feed-preset[data-preset="engagement"]::before{ background:radial-gradient(ellipse at 50% 0%, rgba(251,146,60,.15) 0%, transparent 70%); }
.admin-feed-preset[data-preset="engagement"].is-active{ border-color:rgba(251,146,60,.45); box-shadow:0 0 20px rgba(251,146,60,.12), 0 4px 16px rgba(0,0,0,.2); }
.admin-feed-preset[data-preset="engagement"].is-active::after{ background:#fb923c; box-shadow:0 0 8px rgba(251,146,60,.6); }
.admin-feed-preset[data-preset="discovery"]::before{ background:radial-gradient(ellipse at 50% 0%, rgba(167,139,250,.15) 0%, transparent 70%); }
.admin-feed-preset[data-preset="discovery"].is-active{ border-color:rgba(167,139,250,.45); box-shadow:0 0 20px rgba(167,139,250,.12), 0 4px 16px rgba(0,0,0,.2); }
.admin-feed-preset[data-preset="discovery"].is-active::after{ background:#a78bfa; box-shadow:0 0 8px rgba(167,139,250,.6); }
.admin-feed-preset[data-preset="chronological"]::before{ background:radial-gradient(ellipse at 50% 0%, rgba(96,165,250,.12) 0%, transparent 70%); }
.admin-feed-preset[data-preset="chronological"].is-active{ border-color:rgba(96,165,250,.45); }
.admin-feed-preset[data-preset="community"]::before{ background:radial-gradient(ellipse at 50% 0%, rgba(251,191,36,.12) 0%, transparent 70%); }
.admin-feed-preset[data-preset="community"].is-active{ border-color:rgba(251,191,36,.45); box-shadow:0 0 20px rgba(251,191,36,.12), 0 4px 16px rgba(0,0,0,.2); }
.admin-feed-preset[data-preset="community"].is-active::after{ background:#fbbf24; box-shadow:0 0 8px rgba(251,191,36,.6); }
@media(max-width:520px){
  .admin-feed-presets-grid{ grid-template-columns:repeat(2, 1fr); gap:10px; }
}

/* ── Admin Feed Config ── */
.admin-feed-section{
  margin:20px 0 24px; padding:18px 20px 20px;
  border:1px solid rgba(255,255,255,.06); border-radius:16px;
  background:linear-gradient(168deg,rgba(255,255,255,.025) 0%,rgba(255,255,255,.005) 100%);
  transition:border-color .2s ease;
}
.admin-feed-section:hover{ border-color:rgba(255,255,255,.10); }
.admin-feed-section:last-of-type{ margin-bottom:0; }
.admin-feed-section h4{
  font-size:15px; font-weight:700; margin-bottom:4px; letter-spacing:-.01em;
}
.admin-weights-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:10px; margin-top:14px;
}
.admin-weight-item{
  display:flex; flex-direction:column; gap:5px;
  padding:10px 12px; border-radius:12px;
  border:1px solid rgba(255,255,255,.05); background:rgba(255,255,255,.02);
  transition:all .2s ease;
}
.admin-weight-item:hover{ border-color:rgba(59,130,246,.15); background:rgba(255,255,255,.035); }
.admin-weight-label-row{
  display:flex; align-items:center; gap:5px;
}
.admin-weight-item label{
  font-size:12px; color:rgba(255,255,255,.6); font-weight:600; letter-spacing:.02em;
}
.admin-weight-item input{
  max-width:120px;
}
.admin-info-btn{
  appearance:none; border:none; background:none; padding:0; cursor:pointer;
  color:rgba(96,165,250,.6); display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; width:18px; height:18px; transition:all .2s cubic-bezier(.4,0,.2,1);
  position:relative;
}
.admin-info-btn:hover{ color:rgba(96,165,250,1); background:rgba(96,165,250,.14); box-shadow:0 0 8px rgba(96,165,250,.15); }
.admin-info-tooltip{
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:rgba(15,23,42,.97); border:1px solid rgba(255,255,255,.12); border-radius:12px;
  padding:10px 14px; font-size:12px; line-height:1.45; color:rgba(255,255,255,.88);
  width:max-content; max-width:280px; z-index:100; pointer-events:none;
  box-shadow:0 8px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(59,130,246,.06); white-space:normal;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.admin-info-tooltip::after{
  content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:rgba(15,23,42,.96);
}
.admin-feed-section-header{
  display:flex; align-items:center; gap:10px;
}
.admin-feed-section-header h4{ flex:1 1 auto; margin:0; }
.admin-history-btn{
  appearance:none; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.50); border-radius:10px; width:34px; height:34px;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  transition:all .2s cubic-bezier(.4,0,.2,1); flex-shrink:0;
}
.admin-history-btn:hover{ background:rgba(59,130,246,.1); color:#93c5fd; border-color:rgba(59,130,246,.25); transform:scale(1.05); }
.admin-history-btn:active{ transform:scale(.95); }
.admin-list-search{
  display:flex; gap:8px; margin-top:12px; align-items:center; max-width:500px;
}
.admin-list-search .input{ flex:1 1 auto; min-width:0; }
.admin-list-search .btn{ flex-shrink:0; width:auto; min-width:0; padding:10px 18px; border-radius:12px; }
.admin-search-result{
  margin-top:10px; padding:12px 16px; border-radius:14px;
  border:1px solid rgba(59,130,246,.12); background:linear-gradient(135deg,rgba(59,130,246,.04) 0%,rgba(255,255,255,.02) 100%);
}
@media(prefers-reduced-motion:no-preference){
  .admin-search-result{ animation:adminPanelIn .25s cubic-bezier(.22,1,.36,1) both; }
}
.admin-search-result-card{
  display:flex; align-items:center; gap:12px;
}
.admin-search-result-info{ flex:1 1 auto; min-width:0; }
.admin-search-result-name{ font-weight:700; font-size:14px; color:rgba(255,255,255,.92); }
.admin-search-result-sub{ font-size:12px; color:rgba(255,255,255,.45); margin-top:2px; }
.admin-managed-list{ margin-top:12px; }
.admin-managed-table{
  width:100%; border-collapse:separate; border-spacing:0; font-size:13px;
}
.admin-managed-table th{
  text-align:left; font-size:11px; font-weight:700; color:rgba(255,255,255,.42);
  padding:8px 12px; border-bottom:1px solid rgba(255,255,255,.08);
  text-transform:uppercase; letter-spacing:.5px;
}
.admin-managed-table td{
  padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.04);
  vertical-align:middle;
}
.admin-managed-table tbody tr{ transition:background .15s ease; }
.admin-managed-table tbody tr:hover{ background:rgba(59,130,246,.03); }
.admin-managed-table tr:last-child td{ border-bottom:none; }
.admin-managed-table .admin-cell-name{ font-weight:600; color:rgba(255,255,255,.88); }
.admin-managed-table .admin-cell-sub{ font-size:11px; color:rgba(255,255,255,.38); margin-top:1px; }
.admin-managed-table .hint td{ text-align:center; color:rgba(255,255,255,.30); padding:20px 10px; }
.admin-managed-item{
  display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px;
  border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.02);
  transition:all .2s ease;
}
.admin-managed-item:hover{ border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.04); }
.admin-managed-item-info{ flex:1 1 auto; min-width:0; }
.admin-managed-item-name{ font-weight:600; font-size:13px; color:rgba(255,255,255,.88); }
.admin-managed-item-sub{ font-size:11px; color:rgba(255,255,255,.38); margin-top:1px; }
.admin-managed-item .btn{ flex-shrink:0; }
.admin-remove-btn{
  appearance:none; border:1px solid rgba(239,68,68,.20); background:rgba(239,68,68,.06);
  color:rgba(239,68,68,.80); border-radius:10px; padding:6px 10px; font-size:11px; font-weight:700;
  cursor:pointer; transition:all .2s cubic-bezier(.4,0,.2,1); display:inline-flex; align-items:center; justify-content:center;
}
.admin-remove-btn:hover{ background:rgba(239,68,68,.18); border-color:rgba(239,68,68,.4); color:#ef4444; transform:scale(1.03); }
.admin-remove-btn:active{ transform:scale(.97); }
.admin-remove-btn svg{ width:16px; height:16px; }
.admin-add-btn{
  appearance:none; border:1px solid rgba(34,197,94,.20); background:rgba(34,197,94,.06);
  color:rgba(34,197,94,.80); border-radius:10px; padding:6px 14px; font-size:12px; font-weight:700;
  cursor:pointer; transition:all .2s cubic-bezier(.4,0,.2,1); display:inline-flex; align-items:center; gap:6px;
}
.admin-add-btn:hover{ background:rgba(34,197,94,.18); border-color:rgba(34,197,94,.4); color:#22c55e; transform:scale(1.03); }
.admin-add-btn:active{ transform:scale(.97); }
.admin-add-btn svg{ width:18px; height:18px; }
.admin-expiry-chip{
  font-size:10px; padding:2px 7px; border-radius:999px; font-weight:500;
}
.admin-expiry-chip.permanent{ background:rgba(96,165,250,.12); color:#60a5fa; }
.admin-expiry-chip.temporary{ background:rgba(251,191,36,.12); color:#fbbf24; }
.admin-expiry-chip.expired{ background:rgba(239,68,68,.12); color:#ef4444; }
.admin-duration-actions{
  flex-direction:column; gap:10px; align-items:stretch; max-width:280px; margin:16px auto 0;
}
.admin-duration-row{ display:flex; gap:8px; align-items:center; }
.admin-duration-days{ max-width:80px; text-align:center; }
.admin-duration-row .btn{ flex:1; }
.admin-duration-cancel{ opacity:.6; }
.admin-chip{
  display:inline-block; font-size:11px; padding:2px 8px; border-radius:999px; font-weight:600;
}
.admin-chip.ok{ background:rgba(34,197,94,.12); color:#22c55e; }
.admin-chip.bad{ background:rgba(239,68,68,.12); color:#ef4444; }
.admin-history-scroll{ max-height:400px; overflow:auto; }
.admin-history-actions{ margin-top:14px; }
.hint-center{ text-align:center; }
.hint-error{ color:var(--error); }
.admin-confirm-actions{
  display:flex; align-items:center; justify-content:center; gap:16px; margin-top:16px;
}
.admin-confirm-cancel, .admin-confirm-ok{
  appearance:none; border:none; border-radius:50%; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:all .2s cubic-bezier(.4,0,.2,1);
}
.admin-confirm-cancel{
  background:rgba(255,255,255,.06); color:rgba(255,255,255,.65); border:1px solid rgba(255,255,255,.08);
}
.admin-confirm-cancel:hover{ background:rgba(255,255,255,.12); color:#fff; transform:scale(1.08); border-color:rgba(255,255,255,.16); }
.admin-confirm-cancel:active{ transform:scale(.95); }
.admin-confirm-ok{
  background:rgba(34,197,94,.12); color:rgba(34,197,94,.85); border:1px solid rgba(34,197,94,.18);
}
.admin-confirm-ok:hover{ background:rgba(34,197,94,.25); color:#22c55e; transform:scale(1.08); box-shadow:0 0 12px rgba(34,197,94,.15); }
.admin-confirm-ok:active{ transform:scale(.95); }

/* ── Protection Badge ── */
.protection-badge{
  display:inline-flex; align-items:center; gap:3px;
  font-size:10px; padding:2px 7px; border-radius:999px;
  background:rgba(34,197,94,.12); color:#22c55e;
  font-weight:500; line-height:1.4;
}
.protection-badge svg{
  width:11px; height:11px; flex-shrink:0;
}
.protection-notice{
  display:flex; align-items:flex-start; gap:8px;
  padding:10px 14px; border-radius:8px;
  background:rgba(34,197,94,.06); border:1px solid rgba(34,197,94,.15);
  font-size:12px; color:var(--text-secondary); margin-top:12px;
}
.protection-notice svg{
  width:16px; height:16px; flex-shrink:0; color:#22c55e; margin-top:1px;
}

/* === Profile wall === */
.wall-compose{
  display:flex; flex-direction:column; gap:10px;
  padding:18px; border-radius:16px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.07);
  margin-bottom:18px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: border-color .2s ease;
}
.wall-compose:focus-within{
  border-color: rgba(96,165,250,.25);
}
.wall-input{
  resize:vertical; min-height:72px; max-height:200px;
  font-size:.92rem; line-height:1.5;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px; padding:10px 14px;
  color:rgba(255,255,255,.92);
  transition:border-color .15s ease;
}
.wall-input:focus{
  outline:none;
  border-color:rgba(96,165,250,.5);
  box-shadow:0 0 0 3px rgba(96,165,250,.12);
}
.wall-input::placeholder{ color:rgba(255,255,255,.32); }
.wall-compose-footer{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.wall-toolbar{
  display:flex; align-items:center; gap:2px;
}
.wall-fmt-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:6px;
  background:transparent; border:none; cursor:pointer;
  color:rgba(255,255,255,.4);
  transition:background .15s ease, color .15s ease;
}
.wall-fmt-btn:hover{
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.75);
}
.wall-fmt-btn.is-active{
  background:rgba(96,165,250,.15);
  color:rgba(96,165,250,.9);
}
.wall-fmt-btn svg{ pointer-events:none; }
.wall-compose-actions{
  display:flex; align-items:center; gap:10px;
}
.wall-charcount{
  font-size:.75rem; color:rgba(255,255,255,.3);
  white-space:nowrap;
}
.wall-send-btn{
  padding:6px 18px !important;
  font-size:.82rem !important;
  border-radius:20px !important;
  min-width:auto !important;
  line-height:1.3 !important;
}
.wall-load-more{
  width:100%; margin-top:12px;
}
.wall-list{
  display:flex; flex-direction:column; gap:0;
}
.wall-item{
  display:flex; gap:14px; padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.04);
  transition: opacity .16s ease;
}
.wall-item:last-child{ border-bottom:none; }
.wall-item:hover{ opacity: 1; }
.wall-item-avatar{
  flex-shrink:0; width:42px; height:42px;
  border-radius:999px; overflow:hidden;
  background: linear-gradient(135deg, rgba(96,165,250,.12), rgba(139,92,246,.10));
  border: 1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
  transition: transform .16s ease;
}
.wall-item-avatar:hover{ transform: scale(1.05); }
.wall-item-avatar-img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.wall-item-avatar-fallback{
  font-size:.85rem; font-weight:700;
  color:rgba(255,255,255,.5);
}
.wall-item-body{
  flex:1; min-width:0;
}
.wall-item-header{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px;
  margin-bottom:4px;
}
.wall-item-author{
  font-weight:600; font-size:.88rem;
  color:rgba(255,255,255,.9);
  text-decoration:none;
}
.wall-item-author:hover{ text-decoration:underline; }
.wall-item-handle{
  font-size:.8rem; color:rgba(255,255,255,.35);
}
.wall-item-time{
  font-size:.76rem; color:rgba(255,255,255,.28);
  margin-left:auto;
}
.wall-item-text{
  font-size:.88rem; line-height:1.55;
  color:rgba(255,255,255,.78);
  white-space:pre-wrap; word-break:break-word;
}
.wall-reply-btn{
  font-size:.76rem; padding:2px 10px; margin-top:6px;
  opacity:.6; transition:opacity .15s;
}
.wall-reply-btn:hover{ opacity:1; }
.wall-reply-form{
  margin-top:8px; display:flex; flex-direction:column; gap:6px;
}
.wall-reply-input{
  resize:vertical; min-height:52px; max-height:140px;
  font-size:.84rem; line-height:1.45;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px; padding:8px 10px;
  color:rgba(255,255,255,.9);
}
.wall-reply-input:focus{
  outline:none;
  border-color:rgba(96,165,250,.5);
  box-shadow:0 0 0 3px rgba(96,165,250,.12);
}
.wall-reply-form-footer{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.wall-item-replies{
  margin-top:8px; display:flex; flex-direction:column; gap:0;
}
.wall-reply{
  display:flex; gap:10px; padding:8px 0 8px 16px;
  border-left:2px solid rgba(96,165,250,.12);
}
.wall-reply-avatar{
  width:28px!important; height:28px!important; flex-shrink:0;
}
.wall-reply .wall-item-avatar-img{ width:28px; height:28px; border-radius:999px; object-fit:cover; }
.wall-reply .wall-item-avatar-fallback{ font-size:.7rem; }
.wall-reply .wall-item-text{ font-size:.82rem; }
.wall-reply .wall-item-author{ font-size:.82rem; }
.wall-reply .wall-item-handle{ font-size:.74rem; }
.wall-reply .wall-item-time{ font-size:.7rem; }

/* 4) (Opcional pero recomendado) Si colapsas el nav, el grid debe estrechar la columna.
      Esto se activa con body.read-nav-collapsed (ver Paso 2) */
@media(min-width:981px){
  body.read-page.read-nav-collapsed .app-shell{
    grid-template-columns: 76px minmax(0, 1fr) !important;
  }

  /* Ancho colapsado unificado a 76px */
  body.read-page #read-app-nav.is-collapsed{
    width: 76px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* === Role badge === */
.handle-with-badge{
  display:inline-flex; align-items:center; gap:4px;
  vertical-align:baseline;
}
.role-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; flex-shrink:0;
  position:relative; cursor:pointer;
  color:var(--primary, #3b82f6);
  vertical-align:middle;
}
.role-badge svg{
  width:100%; height:100%; display:block;
}
.role-badge img{
  width:100%; height:100%; display:block; object-fit:contain; border-radius:2px;
}

/* Role badge detail modal */
.role-badge-modal-backdrop{
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.65); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
}
.role-badge-modal{
  background:var(--card-bg, #181c24); border-radius:16px;
  padding:32px 28px 24px; text-align:center;
  min-width:200px; max-width:280px;
  box-shadow:0 8px 32px rgba(0,0,0,.4);
}
@media(prefers-reduced-motion:no-preference){
  .role-badge-modal-backdrop{ animation:rbmFadeIn .15s ease; }
  .role-badge-modal{ animation:rbmScaleIn .18s ease; }
  @keyframes rbmFadeIn{ from{opacity:0} to{opacity:1} }
  @keyframes rbmScaleIn{ from{opacity:0;transform:scale(.92)} to{opacity:1;transform:none} }
}
.role-badge-modal-icon{
  width:64px; height:64px; margin:0 auto 14px;
  color:var(--primary, #3b82f6);
}
.role-badge-modal-icon svg{ width:100%; height:100%; display:block; }
.role-badge-modal-icon img{ width:100%; height:100%; display:block; object-fit:contain; border-radius:6px; }
.role-badge-modal-name{
  font-size:17px; font-weight:700; color:#fff; margin-bottom:6px;
}
.role-badge-modal-desc{
  font-size:13px; color:rgba(255,255,255,.55); line-height:1.45;
}

/* Handle preview in edit form */
.handle-preview-box{
  padding:10px 14px; border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  font-size:15px; color:#fff;
  display:flex; align-items:center; gap:5px;
  flex-wrap:wrap; min-height:38px;
}
.handle-preview-box .role-badge{
  width:15px; height:15px;
}

/* Role selector (register + profile settings) */
.role-selector{
  display:flex; flex-wrap:wrap; gap:8px;
}
.role-option{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 14px; border-radius:10px;
  border:2px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.55);
  font-size:13px; font-weight:600;
  cursor:pointer; transition:border-color .15s, background .15s;
  user-select:none;
}
.role-option:hover{
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
}
.role-option[aria-pressed="true"],
.role-option.active{
  border-color:var(--primary, #3b82f6);
  background:rgba(59,130,246,.12);
  color:#fff;
}
.role-option svg{
  width:18px; height:18px; flex-shrink:0;
}
.role-option img{
  width:18px; height:18px; flex-shrink:0; object-fit:contain; border-radius:2px;
}
.role-option--locked{
  opacity:.4; cursor:not-allowed; position:relative;
}
.role-option--locked:hover{
  border-color:rgba(255,255,255,.08); background:rgba(255,255,255,.03);
}

/* Joined tooltip (on handle click) */
.joined-tooltip{
  position:absolute; z-index:999;
  padding:6px 12px; border-radius:8px;
  background:var(--surface, #111827);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  color:var(--text, #e5e7eb);
  font-size:.78rem; white-space:nowrap;
  pointer-events:none;
}
@media(prefers-reduced-motion:no-preference){
  .joined-tooltip{ animation:joinedFadeIn .15s ease; }
  @keyframes joinedFadeIn{ from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }
}

/* Admin roles management */
.admin-role-row{
  display:flex; align-items:center; gap:10px;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.admin-role-row:last-child{ border-bottom:none; }
.admin-role-icon{
  width:22px; height:22px; flex-shrink:0;
  color:var(--primary, #3b82f6);
}
.admin-role-icon svg{ width:100%; height:100%; display:block; }
.admin-role-label{ flex:1; font-size:.88rem; font-weight:500; }
.admin-role-id{ font-size:.76rem; color:var(--muted, #9ca3af); }

.admin-icon-picker{
  display:flex; flex-wrap:wrap; gap:6px;
}
.admin-icon-option{
  width:36px; height:36px; padding:6px;
  border-radius:8px; border:2px solid rgba(255,255,255,.08);
  background:transparent; color:var(--text, #e5e7eb);
  cursor:pointer; transition:border-color .15s, background .15s;
  display:flex; align-items:center; justify-content:center;
}
.admin-icon-option:hover{
  border-color:rgba(255,255,255,.2);
  background:rgba(255,255,255,.05);
}
.admin-icon-option[aria-pressed="true"],
.admin-icon-option.active{
  border-color:var(--primary, #3b82f6);
  background:rgba(59,130,246,.15);
  color:var(--primary, #3b82f6);
}
.admin-icon-option[disabled]{
  opacity:.3; cursor:not-allowed;
  pointer-events:none;
}
.admin-icon-option svg{
  width:20px; height:20px; display:block;
}
.admin-roles-actions{ margin-top:12px; }
.admin-role-row{
  display:flex; align-items:center; gap:12px;
  padding:8px 0; border-bottom:1px solid var(--border, rgba(255,255,255,.08));
}
.admin-role-label{ font-weight:600; min-width:100px; }
.admin-role-id{ flex:1; }

/* --- Translation editor --- */
.translate-page{ padding:0 !important; display:flex; flex-direction:column; height:100dvh; overflow:hidden; }
.translate-header{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 20px; border-bottom:1px solid rgba(255,255,255,.06);
  flex-shrink:0; flex-wrap:wrap;
}
.translate-header-left{ display:flex; align-items:center; gap:12px; min-width:0; }
.translate-header-right{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.translate-title{ font-weight:900; font-size:16px; letter-spacing:.1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:300px; }
.translate-langs{ font-size:12px; color:rgba(255,255,255,.45); font-weight:600; margin-top:2px; }
.translate-chapter-select{ max-width:220px; font-size:13px; padding:6px 12px; border-radius:10px; }
.translate-save-btn{ padding:7px 18px; font-size:13px; border-radius:10px; }
.translate-submit-btn{ padding:7px 18px; font-size:13px; border-radius:10px; }
.translate-status{ padding:6px 20px; flex-shrink:0; }

.translate-split{
  display:flex; flex:1; min-height:0; overflow:hidden;
}
.translate-pane{
  flex:1; display:flex; flex-direction:column; min-width:0; overflow:hidden;
}
.translate-pane-header{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 16px; border-bottom:1px solid rgba(255,255,255,.06);
  flex-shrink:0;
}
.translate-pane-label{ font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:rgba(255,255,255,.50); }
.translate-word-count{ font-size:11px; color:rgba(255,255,255,.35); font-weight:600; }

.translate-content{
  flex:1; overflow-y:auto; padding:16px 20px; font-size:15px; line-height:1.75;
  color:rgba(255,255,255,.70); user-select:text;
}
.translate-editor{
  flex:1; overflow-y:auto; padding:16px 20px; font-size:15px; line-height:1.75;
  color:rgba(255,255,255,.95); outline:none;
  border:none; background:transparent;
}
.translate-editor:focus{ box-shadow:inset 0 0 0 2px rgba(59,130,246,.15); }

.translate-divider{
  width:1px; flex-shrink:0; background:rgba(255,255,255,.06);
}

.translate-pane-source{ background:rgba(255,255,255,.01); }
.translate-pane-target{ background:rgba(255,255,255,.02); }

.translate-voting{
  flex-shrink:0; padding:12px 20px;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap;
}
.translate-voting-info{ display:flex; align-items:center; gap:12px; }
.translate-voting-label{ font-weight:700; font-size:13px; color:rgba(255,255,255,.60); }
.translate-voting-tally{ font-size:13px; color:rgba(255,255,255,.40); font-weight:600; }
.translate-voting-actions{ display:flex; gap:8px; }
.translate-vote-btn{ padding:7px 20px; font-size:13px; border-radius:999px; font-weight:700; }
.translate-vote-btn.vote-up{ background:rgba(34,197,94,.15); color:#22c55e; border:1px solid rgba(34,197,94,.25); }
.translate-vote-btn.vote-up:hover{ background:rgba(34,197,94,.25); }
.translate-vote-btn.vote-down{ background:rgba(239,68,68,.10); color:#ef4444; border:1px solid rgba(239,68,68,.20); }
.translate-vote-btn.vote-down:hover{ background:rgba(239,68,68,.20); }
.translate-vote-btn:disabled{ opacity:.35; cursor:not-allowed; }

@media(max-width:768px){
  .translate-split{ flex-direction:column; }
  .translate-divider{ width:100%; height:1px; }
  .translate-pane{ min-height:35dvh; }
  .translate-title{ max-width:160px; }
}

/* ── News Widget (floating badge + slide-out panel) ─────────────────────── */

.news-widget{
  position:fixed; bottom:24px; right:24px; z-index:9000;
}
.news-widget-btn{
  width:48px; height:48px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(239,68,68,.9); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
  transition: transform .2s, box-shadow .2s;
  position:relative;
}
.news-widget-btn:hover{ transform:scale(1.08); box-shadow:0 6px 24px rgba(0,0,0,.45); }
.news-widget--has-unread .news-widget-btn{ animation: news-pulse 2s ease-in-out infinite; }

@keyframes news-pulse{
  0%,100%{ box-shadow:0 4px 16px rgba(239,68,68,.35); }
  50%{ box-shadow:0 4px 24px rgba(239,68,68,.65); }
}

.news-widget-badge{
  position:absolute; top:-4px; right:-4px;
  background:#fff; color:#ef4444; font-size:11px; font-weight:800;
  min-width:20px; height:20px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  padding:0 5px; line-height:1;
}

/* Slide-out panel */
.news-panel{
  position:fixed; bottom:80px; right:24px; z-index:9001;
  width:380px; max-width:calc(100vw - 48px);
  max-height:70vh;
  background:var(--bg-card, #1a1a2e); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; box-shadow:0 8px 40px rgba(0,0,0,.5);
  display:flex; flex-direction:column;
  transform:translateY(20px) scale(.95); opacity:0;
  transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .3s ease;
  pointer-events:none;
}
.news-panel--open{
  transform:translateY(0) scale(1); opacity:1;
  pointer-events:auto;
}

.news-panel-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px 12px; border-bottom:1px solid rgba(255,255,255,.06);
}
.news-panel-title{ font-size:15px; font-weight:700; color:rgba(255,255,255,.92); margin:0; }
.news-panel-close{ background:none; border:none; color:rgba(255,255,255,.5); cursor:pointer; padding:4px; border-radius:6px; }
.news-panel-close:hover{ color:#fff; background:rgba(255,255,255,.08); }

.news-panel-body{
  flex:1; overflow-y:auto; padding:12px 20px;
  display:flex; flex-direction:column; gap:12px;
}
.news-panel-loading, .news-panel-empty, .news-panel-error{
  text-align:center; color:rgba(255,255,255,.4); font-size:13px; padding:24px 0;
}

.news-panel-footer{
  padding:10px 20px; border-top:1px solid rgba(255,255,255,.06); text-align:center;
}
.news-panel-viewall{
  font-size:13px; font-weight:600; color:var(--accent, #6c5ce7); text-decoration:none;
}
.news-panel-viewall:hover{ text-decoration:underline; }

/* Panel items */
.news-panel-item{
  padding:12px; border-radius:10px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.04);
  transition: background .15s;
}
.news-panel-item--unread{
  background:rgba(239,68,68,.06); border-color:rgba(239,68,68,.12);
}
.news-panel-item-header{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.news-panel-item-category{
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color:var(--accent, #6c5ce7); background:rgba(108,92,231,.12);
  padding:2px 8px; border-radius:4px;
}
.news-panel-item-date{ font-size:11px; color:rgba(255,255,255,.35); }
.news-panel-item-title{ font-size:13px; font-weight:700; color:rgba(255,255,255,.9); margin:0 0 4px; }
.news-panel-item-body{ font-size:12px; color:rgba(255,255,255,.55); line-height:1.4; margin:0; }
.news-panel-item-actions{ display:flex; align-items:center; gap:8px; margin-top:8px; }

/* Reaction buttons */
.news-reaction-btn{
  display:inline-flex; align-items:center; gap:4px;
  background:none; border:1px solid rgba(255,255,255,.08); border-radius:8px;
  padding:4px 10px; cursor:pointer; color:rgba(255,255,255,.45);
  font-size:12px; transition: all .15s;
}
.news-reaction-btn:hover{ background:rgba(255,255,255,.06); color:rgba(255,255,255,.7); }
.news-reaction-btn[data-active="true"]{ color:var(--accent, #6c5ce7); border-color:rgba(108,92,231,.3); background:rgba(108,92,231,.08); }
.news-reaction-btn[data-reaction="dislike"][data-active="true"]{ color:#ef4444; border-color:rgba(239,68,68,.25); background:rgba(239,68,68,.06); }
.news-reaction-count{ font-weight:600; }

.news-mark-read-btn{ font-size:11px; padding:3px 10px; margin-left:auto; }

/* ── @News Feed (profile page) ──────────────────────────────────────────── */

.news-feed-header{
  display:flex; align-items:center; gap:16px;
  padding:24px 0 20px; border-bottom:1px solid rgba(255,255,255,.06);
  margin-bottom:20px;
}
.news-feed-avatar{
  width:56px; height:56px; border-radius:50%;
  background:rgba(239,68,68,.12); color:#ef4444;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.news-feed-name{ font-size:20px; font-weight:800; color:rgba(255,255,255,.92); margin:0; }
.news-feed-desc{ font-size:13px; color:rgba(255,255,255,.45); margin:4px 0 0; }

.news-feed-item{
  border-radius:14px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.05);
  margin-bottom:14px;
  overflow:hidden;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.news-feed-item:hover{ border-color:rgba(255,255,255,.10); box-shadow: 0 4px 20px rgba(0,0,0,.15); }
.news-feed-item--pinned{ border-color:rgba(239,68,68,.15); background:rgba(239,68,68,.03); }
.news-feed-item-content{ padding:18px 20px 4px; }
.news-feed-item:not(.news-feed-item--has-image) .news-feed-item-content{ padding-top:20px; }

/* Hero image — journalistic style */
.news-feed-item-hero{
  position:relative;
  width:100%;
  max-height:280px;
  overflow:hidden;
  background:rgba(0,0,0,.2);
}
.news-feed-item-hero::after{
  content:"";
  position:absolute;
  bottom:0; left:0; right:0;
  height:60px;
  background:linear-gradient(to top, rgba(11,18,32,.85), transparent);
  pointer-events:none;
}
.news-feed-item-hero-img{
  width:100%;
  height:auto;
  max-height:280px;
  object-fit:cover;
  display:block;
  transition: transform .3s ease;
}
.news-feed-item:hover .news-feed-item-hero-img{ transform:scale(1.02); }

.news-feed-item-meta{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.news-feed-item-pin{ font-size:13px; }
.news-feed-item-category{
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color:var(--accent, #6c5ce7); background:rgba(108,92,231,.12);
  padding:2px 8px; border-radius:4px;
}
.news-feed-item-date{ font-size:12px; color:rgba(255,255,255,.35); }
.news-feed-item-title{ font-size:17px; font-weight:800; color:rgba(255,255,255,.92); margin:0 0 8px; letter-spacing:.1px; line-height:1.35; }
.news-feed-item--has-image .news-feed-item-title{ font-size:19px; }
.news-feed-item-body{ font-size:13px; color:rgba(255,255,255,.6); line-height:1.55; white-space:pre-wrap; word-break:break-word; }
.news-feed-item-reactions{ display:flex; align-items:center; gap:10px; padding:10px 20px 14px; }
.news-feed-item:not(.news-feed-item--has-image) .news-feed-item-reactions{ padding-top:4px; }

/* Panel item image (notification slide-out) */
.news-panel-item-image{
  border-radius:8px;
  overflow:hidden;
  margin-bottom:10px;
  max-height:140px;
}
.news-panel-item-image img{
  width:100%;
  height:auto;
  max-height:140px;
  object-fit:cover;
  display:block;
}

/* Admin news image upload */
.admin-news-image-upload{ display:flex; align-items:center; gap:12px; }
.admin-news-image-preview{
  position:relative;
  display:inline-flex;
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
}
.admin-news-image-thumb{
  width:120px;
  height:80px;
  object-fit:cover;
  display:block;
}
.admin-news-image-remove{
  position:absolute;
  top:4px; right:4px;
  width:24px; height:24px;
  border-radius:50%;
  background:rgba(0,0,0,.65);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  border:none;
  cursor:pointer;
  transition: background .14s;
}
.admin-news-image-remove:hover{ background:rgba(239,68,68,.8); }

.news-feed-loading, .news-feed-empty, .news-feed-error{
  text-align:center; color:rgba(255,255,255,.4); font-size:14px; padding:40px 0;
}
.news-feed-loadmore{ display:block; margin:16px auto; }

/* ── News Profile Feed (public @News profile) ─────────────────────────── */
.news-handle-icon{ display:inline-block; vertical-align:middle; margin-left:4px; opacity:.7; }

.news-profile-item{
  padding:20px; border-radius:12px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.05);
  margin-bottom:12px;
}
.news-profile-item--pinned{ border-color:rgba(239,68,68,.15); background:rgba(239,68,68,.03); }
.news-profile-item-meta{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.news-profile-item-pin{ font-size:13px; }
.news-profile-item-category{
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color:var(--accent, #6c5ce7); background:rgba(108,92,231,.12);
  padding:2px 8px; border-radius:4px;
}
.news-profile-item-date{ font-size:12px; color:rgba(255,255,255,.35); }
.news-profile-item-title{ font-size:16px; font-weight:700; color:rgba(255,255,255,.92); margin:0 0 8px; }
.news-profile-item-body{ font-size:13px; color:rgba(255,255,255,.6); line-height:1.5; white-space:pre-wrap; word-break:break-word; }

/* Pin badge — top-right corner */
.news-profile-item{ position:relative; }
.news-profile-item-pin-badge{
  position:absolute; top:12px; right:12px;
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background:rgba(239,68,68,.12); color:rgba(239,68,68,.85);
}

/* Reactions row */
.news-profile-item-reactions{
  display:flex; align-items:center; gap:12px; margin-top:12px; padding-top:10px;
  border-top:1px solid rgba(255,255,255,.05);
}
.news-profile-reaction-btn{
  display:inline-flex; align-items:center; gap:5px;
  background:none; border:none; color:rgba(255,255,255,.45); cursor:pointer;
  padding:4px 8px; border-radius:6px; font-size:13px;
  transition:color .15s, background .15s;
}
.news-profile-reaction-btn:hover{ color:rgba(255,255,255,.8); background:rgba(255,255,255,.06); }
.news-profile-reaction-btn[data-active="true"]{ color:var(--accent, #6c5ce7); }
.news-profile-reaction-count{ font-variant-numeric:tabular-nums; }

/* Empty state */
.news-profile-empty{ padding:12px 0; }

/* Load more */
.news-profile-load-more{ margin:16px auto; display:block; }

/* ── Admin camera overlays for @News avatar/header ─────────────────────── */
.news-admin-file-input{ position:absolute; width:0; height:0; opacity:0; pointer-events:none; }

.news-admin-avatar-wrap,
.news-admin-header-wrap{ position:relative; }

.news-admin-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:8px;
  opacity:0; transition:opacity .2s; pointer-events:none; z-index:4;
}
.news-admin-avatar-wrap:hover .news-admin-avatar-overlay,
.news-admin-header-wrap:hover .news-admin-header-overlay{
  opacity:1; pointer-events:auto;
}
.news-admin-avatar-overlay{ border-radius:50%; background:rgba(0,0,0,.55); }
.news-admin-header-overlay{ border-radius:12px 12px 0 0; background:rgba(0,0,0,.45); }

.news-admin-overlay-btn{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; border:none; cursor:pointer;
  transition:background .15s, transform .15s;
}
.news-admin-overlay-btn:hover{ background:rgba(255,255,255,.25); transform:scale(1.08); }
.news-admin-overlay-remove:hover{ background:rgba(239,68,68,.35); }

@media(max-width:480px){
  .news-widget{ bottom:16px; right:16px; }
  .news-panel{ bottom:72px; right:16px; width:calc(100vw - 32px); max-height:60vh; }
}

/* ── Admin News Panel ───────────────────────────────────────────────────── */

.admin-news-form{ margin:16px 0; }
.admin-news-form .form-group{ margin-bottom:12px; }
.admin-news-form label{ display:block; font-size:13px; font-weight:600; color:rgba(255,255,255,.7); margin-bottom:4px; }
.admin-news-divider{ border:none; border-top:1px solid rgba(255,255,255,.06); margin:20px 0; }

.admin-news-item{
  padding:14px 16px; border-radius:12px; margin-bottom:8px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
  transition:background .15s, border-color .15s;
}
.admin-news-item:hover{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.10); }
.admin-news-item--inactive{ opacity:.45; }
.admin-news-item--pinned{ border-left:3px solid var(--accent, #6c5ce7); }
.admin-news-item-row{ display:flex; gap:14px; align-items:flex-start; }
.admin-news-item-thumb-wrap{ flex-shrink:0; width:80px; height:56px; border-radius:8px; overflow:hidden; }
.admin-news-item-thumb{ width:100%; height:100%; object-fit:cover; display:block; }
.admin-news-item-text{ flex:1; min-width:0; }
.admin-news-item-header{ display:flex; align-items:center; gap:6px; margin-bottom:6px; flex-wrap:wrap; }
.admin-news-item-category{
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color:var(--accent, #6c5ce7); background:rgba(108,92,231,.10);
  padding:2px 8px; border-radius:20px;
}
.admin-news-item-status{ font-size:10px; font-weight:600; padding:2px 8px; border-radius:20px; }
.admin-news-item-status.active{ color:#22c55e; background:rgba(34,197,94,.10); }
.admin-news-item-status.inactive{ color:#ef4444; background:rgba(239,68,68,.08); }
.admin-news-item-pin{ font-size:12px; }
.admin-news-item-date{ font-size:11px; color:rgba(255,255,255,.3); margin-left:auto; }
.admin-news-item-title{ font-size:14px; font-weight:700; color:rgba(255,255,255,.92); margin:0 0 2px; line-height:1.3; }
.admin-news-item-body{ font-size:12px; color:rgba(255,255,255,.45); line-height:1.45; margin:0; }
.admin-news-item-footer{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; gap:8px; }
.admin-news-item-stats{ font-size:12px; color:rgba(255,255,255,.35); margin:0; display:flex; gap:10px; }
.admin-news-item-stats span{ display:inline-flex; align-items:center; gap:3px; }
.admin-news-item-actions{ display:flex; gap:6px; flex-wrap:wrap; margin:0; }
.admin-news-item-actions .btn{
  font-size:11px; padding:4px 10px; border-radius:20px; min-width:0; width:auto;
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.08); color:rgba(255,255,255,.7);
}
.admin-news-item-actions .btn:hover{ background:rgba(255,255,255,.10); color:#fff; }
.admin-news-item-actions .btn.danger{ color:#ef4444; background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.12); }
.admin-news-item-actions .btn.danger:hover{ background:rgba(239,68,68,.16); }

/* ── Impersonation banner ─────────────────────────────────────────────────── */
.impersonation-banner{
  position:fixed; top:0; left:0; right:0; z-index:10000;
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:8px 16px;
  background:linear-gradient(90deg,#d32f2f,#b71c1c);
  color:#fff; font-size:13px; font-weight:600;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.impersonation-banner-text{
  display:flex; align-items:center; gap:6px;
}
.impersonation-banner-icon{ flex-shrink:0; }
.impersonation-banner-btn{
  font-size:11px; padding:4px 14px;
  background:rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.3);
  border-radius:6px; cursor:pointer; white-space:nowrap;
}
.impersonation-banner-btn:hover{ background:rgba(255,255,255,.25); }
body.has-impersonation-banner{ padding-top:40px; }
body.has-impersonation-banner .app-nav{ top:40px; height:calc(100vh - 40px); }

/* ── Switch account modal ─────────────────────────────────────────────────── */
.switch-account-backdrop{
  position:fixed; inset:0; z-index:10001;
  background:rgba(0,0,0,.6); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
}
.switch-account-modal{
  background:var(--card-bg,#1a1a2e); color:var(--text-primary,#e0e0e0);
  border-radius:16px; padding:26px 28px; width:90%; max-width:420px;
  box-shadow:0 8px 32px rgba(0,0,0,.5);
}
.switch-account-title{
  margin:0 0 4px; font-size:18px; font-weight:700;
}
.switch-account-hint{
  margin:0 0 16px; font-size:13px; color:rgba(255,255,255,.5);
}

/* Saved accounts list */
.switch-saved-list{ margin-bottom:8px; }
.switch-saved-label{
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.6px; color:rgba(255,255,255,.4);
  margin:0 0 8px;
}
.switch-saved-item{
  display:flex; align-items:center; gap:6px;
  margin-bottom:4px;
}
.switch-saved-btn{
  flex:1; display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:10px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.85); font-size:14px; font-weight:500;
  cursor:pointer; transition:background .14s ease, border-color .14s ease;
  appearance:none; text-align:left;
}
.switch-saved-btn:hover{
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16);
}
.switch-saved-icon{ color:rgba(96,165,250,.6); flex-shrink:0; }
.switch-saved-email{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.switch-saved-remove{
  appearance:none; background:none; border:none;
  color:rgba(255,255,255,.3); cursor:pointer;
  padding:6px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  transition:color .14s ease, background .14s ease;
}
.switch-saved-remove:hover{
  color:#ef5350; background:rgba(239,83,80,.12);
}

/* Divider */
.switch-divider{
  display:flex; align-items:center; gap:12px;
  margin:14px 0;
}
.switch-divider::before,
.switch-divider::after{
  content:""; flex:1; height:1px; background:rgba(255,255,255,.08);
}
.switch-divider span{
  font-size:11px; color:rgba(255,255,255,.35); white-space:nowrap;
}

/* Field labels */
.switch-field-label{
  display:block; font-size:12px; font-weight:600;
  color:rgba(255,255,255,.55); margin-bottom:6px;
}

.switch-account-field{ margin-bottom:12px; }
.switch-account-input,
.switch-account-password{
  width:100%; padding:10px 14px; font-size:14px;
  background:var(--input-bg,#16162a); color:var(--text-primary,#e0e0e0);
  border:1px solid rgba(255,255,255,.12); border-radius:8px;
  outline:none; box-sizing:border-box;
  transition:border-color .14s ease;
}
.switch-account-input:focus,
.switch-account-password:focus{ border-color:rgba(96,165,250,.5); }

.switch-account-status{
  min-height:18px; font-size:12px; color:rgba(255,255,255,.5); margin-bottom:12px;
  transition:color .14s ease;
}
.switch-account-status.is-error{ color:#ef5350; }
.switch-account-actions{
  display:flex; gap:10px; justify-content:flex-end;
}

/* ── Nav popover account cards ─────────────────────────────────────────────── */
.nav-popover-account{
  width:100%;
  display:flex; align-items:center; gap:10px;
  padding:8px 10px;
  border:none; border-radius:10px;
  background:transparent;
  color:var(--text);
  font:inherit; text-align:left;
  cursor:pointer;
  transition: background .14s ease;
}
.nav-popover-account:hover{ background:rgba(255,255,255,.06); }
.nav-popover-account--active{ cursor:default; background:rgba(96,165,250,.06); }
.nav-popover-account--active:hover{ background:rgba(96,165,250,.08); }
.nav-popover-account-avatar-wrap{
  width:34px; height:34px; border-radius:999px; overflow:hidden; flex:0 0 auto;
  border:1.5px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  display:flex; align-items:center; justify-content:center;
}
.nav-popover-account-avatar{
  width:100%; height:100%; object-fit:cover; display:block; border-radius:999px;
}
.nav-popover-account-avatar--fallback{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:14px; line-height:1;
  color:rgba(255,255,255,.5);
}
.nav-popover-account-meta{ flex:1 1 auto; min-width:0; }
.nav-popover-account-name{
  font-weight:700; font-size:13px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  display:flex; align-items:center; gap:4px;
  line-height:1.3;
}
.nav-popover-account-handle{
  color:var(--muted); font-size:11.5px; line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nav-popover-verified{ flex:0 0 auto; vertical-align:middle; }
.nav-popover-account-check{ flex:0 0 auto; margin-left:auto; }
.nav-popover-divider{
  height:1px; background:rgba(255,255,255,.08); margin:6px 0;
}

/* ── Manage accounts modal ────────────────────────────────────────────────── */
.switch-manage-list{ display:flex; flex-direction:column; gap:4px; margin:8px 0; }
.switch-manage-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:12px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  transition: background .14s ease, border-color .14s ease;
}
.switch-manage-item:hover{ background:rgba(255,255,255,.05); }
.switch-manage-remove{
  flex:0 0 auto; background:none; border:none; color:var(--muted);
  cursor:pointer; padding:4px; border-radius:6px;
  transition: color .14s ease, background .14s ease;
}
.switch-manage-remove:hover{ color:#ef5350; background:rgba(239,83,80,.12); }
.switch-manage-item--current{ border-color:rgba(96,165,250,.18); background:rgba(96,165,250,.06); }
.switch-manage-item--current:hover{ background:rgba(96,165,250,.08); }
.switch-manage-current-badge{
  display:inline-block; margin-left:6px;
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  color:#60a5fa; background:rgba(96,165,250,.12);
  padding:1px 6px; border-radius:6px; vertical-align:middle;
}

/* ── Nav popover warn item ────────────────────────────────────────────────── */
.nav-popover-item--warn{ color:#ef5350; }
.nav-popover-item--warn:hover{ background:rgba(239,83,80,.12); }

/* ── Invite share modal ───────────────────────────────────────────────── */
.invite-share-backdrop{
  position:fixed; inset:0; z-index:10001;
  background:rgba(0,0,0,.65); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
}
.invite-share-modal{
  background:var(--card-bg,#1a1a2e); color:var(--text-primary,#e0e0e0);
  border-radius:18px; padding:24px; width:100%; max-width:520px;
  max-height:85vh; overflow-y:auto;
  box-shadow:0 12px 48px rgba(0,0,0,.55);
}
@media(prefers-reduced-motion:no-preference){
  .invite-share-modal{ animation: invShareIn .25s cubic-bezier(.16,1,.3,1) both; }
  @keyframes invShareIn{ from{opacity:0; transform:translateY(16px) scale(.97)} to{opacity:1; transform:none} }
}
.invite-share-header{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;
}
.invite-share-header h3{ margin:0; font-size:18px; font-weight:800; }
.invite-share-close{
  background:none; border:none; color:var(--muted); cursor:pointer;
  padding:4px; border-radius:8px; transition:color .14s, background .14s;
}
.invite-share-close:hover{ color:var(--text-primary); background:rgba(255,255,255,.08); }
.invite-share-link-row{
  display:flex; align-items:center; gap:8px; margin-bottom:14px;
}
.invite-share-link-box{
  flex:1 1 auto; min-width:0;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:10px; padding:8px 12px; overflow:hidden;
}
.invite-share-link-label{
  display:block; font-size:10px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); margin-bottom:2px; font-weight:700;
}
.invite-share-link-code{
  display:block; font-size:12px; color:var(--accent,#7c5cfc);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-family:monospace;
}
.invite-share-divider{
  height:1px; background:rgba(255,255,255,.08); margin:10px 0 14px;
}
.invite-share-subtitle{
  font-size:13px; color:var(--muted); margin-bottom:12px; font-weight:600;
}
.invite-share-cards{
  display:flex; flex-direction:column; gap:8px;
}
.invite-share-card{
  display:flex; align-items:flex-start; gap:12px;
  padding:12px 14px; border-radius:12px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  transition:background .14s, border-color .14s;
}
.invite-share-card:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.10);
}
.invite-share-card-icon{
  flex:0 0 auto; font-size:24px; line-height:1; padding-top:2px;
}
.invite-share-card-content{
  flex:1 1 auto; min-width:0;
}
.invite-share-card-title{
  font-weight:700; font-size:13px; margin-bottom:3px;
}
.invite-share-card-body{
  font-size:12px; color:var(--muted); line-height:1.45;
  white-space:pre-line; word-break:break-word;
}
.invite-share-card-actions{
  flex:0 0 auto; display:flex; gap:4px; align-items:flex-start; padding-top:2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   TRANSLATION SYSTEM
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Translator Dashboard ─────────────────────────────────────────────── */

.tl-dash{
  display:flex; flex-direction:column; gap:20px;
}
@media(prefers-reduced-motion:no-preference){
  .tl-dash{ opacity:0; transform:translateY(12px); animation: tlFadeIn .4s cubic-bezier(.16,1,.3,1) .1s both; }
  @keyframes tlFadeIn{ to{ opacity:1; transform:none; } }
}

.tl-dash-header{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap;
}
.tl-dash-title{ font-size:22px; font-weight:950; letter-spacing:.2px; margin:0; }
.tl-dash-subtitle{ color:var(--muted); font-size:13px; margin:2px 0 0; }

/* ── Rank Hero Card ───────────────────────────────────────────────────── */

.tl-rank-hero{
  position:relative; overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:28px;
  background: linear-gradient(135deg, rgba(96,165,250,.06) 0%, rgba(167,139,250,.04) 50%, rgba(96,165,250,.02) 100%);
  display:flex; align-items:center; gap:24px;
}
@media(prefers-reduced-motion:no-preference){
  .tl-rank-hero{ opacity:0; transform:translateY(8px); animation: tlFadeIn .45s cubic-bezier(.16,1,.3,1) .15s both; }
}
.tl-rank-hero::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(ellipse 600px 400px at 20% 50%, rgba(96,165,250,.08), transparent 70%);
  pointer-events:none;
}

.tl-rank-ring{
  position:relative;
  width:88px; height:88px;
  flex-shrink:0;
}
.tl-rank-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.tl-rank-ring-bg{ fill:none; stroke:rgba(255,255,255,.06); stroke-width:6; }
.tl-rank-ring-fill{
  fill:none; stroke-width:6; stroke-linecap:round;
  stroke:url(#tl-ring-gradient);
  transition: stroke-dashoffset .8s cubic-bezier(.4,0,.2,1);
}
.tl-rank-ring-label{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.tl-rank-ring-number{
  font-size:24px; font-weight:950; line-height:1;
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.tl-rank-ring-text{
  font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.8px;
  color:var(--muted); margin-top:2px;
}

.tl-rank-info{ flex:1; min-width:0; }
.tl-rank-name{
  font-size:18px; font-weight:900; letter-spacing:.2px;
  background: linear-gradient(135deg, #e0e7ff 0%, #93c5fd 50%, #a78bfa 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.tl-rank-desc{ color:var(--muted); font-size:13px; margin-top:4px; line-height:1.4; }

/* ── Stats Grid ───────────────────────────────────────────────────────── */

.tl-stats{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:12px;
}
@media(max-width:700px){ .tl-stats{ grid-template-columns:repeat(2, 1fr); } }
@media(max-width:400px){ .tl-stats{ grid-template-columns:1fr; } }

.tl-stat{
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  padding:16px;
  background: rgba(255,255,255,.02);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
@media(prefers-reduced-motion:no-preference){
  .tl-stat{ opacity:0; transform:translateY(8px); animation: tlFadeIn .4s cubic-bezier(.16,1,.3,1) both; }
  .tl-stat:nth-child(1){ animation-delay:.2s; }
  .tl-stat:nth-child(2){ animation-delay:.25s; }
  .tl-stat:nth-child(3){ animation-delay:.3s; }
  .tl-stat:nth-child(4){ animation-delay:.35s; }
}
.tl-stat:hover{
  border-color:rgba(96,165,250,.25);
  background:rgba(255,255,255,.04);
  box-shadow:0 0 20px rgba(96,165,250,.06);
}

.tl-stat-icon{
  width:36px; height:36px;
  display:grid; place-items:center;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(135deg, rgba(96,165,250,.08), rgba(167,139,250,.06));
  margin-bottom:10px;
}
.tl-stat-icon svg{ width:18px; height:18px; color:rgba(255,255,255,.7); }
.tl-stat-value{
  font-size:22px; font-weight:950; line-height:1;
}
.tl-stat-label{
  font-size:11px; color:var(--muted); margin-top:4px; text-transform:uppercase; letter-spacing:.5px;
}
.tl-stat--danger .tl-stat-value{ color:#f87171; }
.tl-stat--danger .tl-stat-icon{ background:linear-gradient(135deg, rgba(248,113,113,.12), rgba(248,113,113,.06)); border-color:rgba(248,113,113,.15); }

/* ── Alerts (must review / degraded) ──────────────────────────────────── */

.tl-alert{
  display:flex; align-items:center; gap:12px;
  padding:14px 18px;
  border-radius:14px;
  font-size:13px; font-weight:600;
}
@media(prefers-reduced-motion:no-preference){
  .tl-alert{ opacity:0; transform:translateY(6px); animation: tlFadeIn .35s cubic-bezier(.16,1,.3,1) .4s both; }
}
.tl-alert-icon{ flex-shrink:0; width:20px; height:20px; }
.tl-alert svg{ flex-shrink:0; width:20px; height:20px; }
.tl-alert--warn{
  background:rgba(251,191,36,.06);
  border:1px solid rgba(251,191,36,.15);
  color:#fbbf24;
}
.tl-alert--error{
  background:rgba(248,113,113,.06);
  border:1px solid rgba(248,113,113,.15);
  color:#f87171;
}
.tl-alert--info{
  background:rgba(96,165,250,.06);
  border:1px solid rgba(96,165,250,.15);
  color:#60a5fa;
}

/* ── Progress Bar (rank progression) ──────────────────────────────────── */

.tl-progress{
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  padding:18px;
  background:rgba(255,255,255,.02);
}
.tl-progress-header{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;
}
.tl-progress-title{ font-size:13px; font-weight:700; }
.tl-progress-value{ font-size:13px; color:var(--muted); }
.tl-progress-bar{
  width:100%; height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
}
.tl-progress-fill{
  height:100%; border-radius:999px;
  background:linear-gradient(90deg, #60a5fa, #a78bfa);
  transition: width .8s cubic-bezier(.4,0,.2,1);
}
.tl-progress-hint{
  font-size:11px; color:var(--muted); margin-top:8px;
}

/* ── Assignment Card ──────────────────────────────────────────────────── */

.tl-assignment{
  border:1px solid rgba(96,165,250,.15);
  border-radius:18px;
  padding:22px;
  background: linear-gradient(135deg, rgba(96,165,250,.04), rgba(167,139,250,.02));
  position:relative; overflow:hidden;
}
.tl-assignment::after{
  content:""; position:absolute; top:0; right:0;
  width:120px; height:120px;
  background:radial-gradient(circle, rgba(96,165,250,.08), transparent 70%);
  pointer-events:none;
}
.tl-assignment-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:14px;
}
.tl-assignment-title{ font-size:15px; font-weight:800; }
.tl-assignment-badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 12px; border-radius:999px;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
}
.tl-assignment-badge--active{
  background:rgba(34,197,94,.10); color:#22c55e; border:1px solid rgba(34,197,94,.20);
}
.tl-assignment-badge--voting{
  background:rgba(251,191,36,.10); color:#fbbf24; border:1px solid rgba(251,191,36,.20);
}

.tl-assignment-meta{
  display:flex; flex-wrap:wrap; gap:16px;
  font-size:13px; color:var(--muted);
  margin-bottom:16px;
}
.tl-assignment-meta-item{
  display:flex; align-items:center; gap:6px;
}
.tl-assignment-meta-item svg{ width:14px; height:14px; opacity:.6; }

.tl-assignment-deadline{
  display:flex; align-items:center; gap:10px;
  padding:12px 16px;
  border-radius:12px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  margin-bottom:16px;
}
.tl-deadline-icon{ flex-shrink:0; width:18px; height:18px; color:var(--muted); }
.tl-deadline-bar{
  flex:1; height:4px; border-radius:999px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
}
.tl-deadline-fill{
  height:100%; border-radius:999px;
  background:linear-gradient(90deg, #22c55e, #fbbf24);
  transition: width .5s ease, background .5s ease;
}
.tl-deadline-fill[data-urgent="true"]{
  background:linear-gradient(90deg, #fbbf24, #f87171);
}
.tl-deadline-text{
  font-size:12px; font-weight:700; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.tl-assignment-actions{
  display:flex; gap:10px; flex-wrap:wrap;
}
.tl-assignment-actions .btn{ width:auto; }

/* ── Empty / Activation State ─────────────────────────────────────────── */

.tl-empty{
  text-align:center;
  padding:48px 24px;
  border:1px dashed rgba(255,255,255,.08);
  border-radius:18px;
}
@media(prefers-reduced-motion:no-preference){
  .tl-empty{ opacity:0; transform:translateY(8px); animation: tlFadeIn .4s cubic-bezier(.16,1,.3,1) .2s both; }
}
.tl-empty-icon{
  width:64px; height:64px; margin:0 auto 16px;
  display:grid; place-items:center;
  border-radius:20px;
  background:linear-gradient(135deg, rgba(96,165,250,.08), rgba(167,139,250,.06));
  border:1px solid rgba(255,255,255,.08);
}
.tl-empty-icon svg{ width:28px; height:28px; color:rgba(255,255,255,.5); }
.tl-empty-title{
  font-size:18px; font-weight:900; margin:0 0 6px;
}
.tl-empty-desc{
  color:var(--muted); font-size:13px; max-width:380px; margin:0 auto 20px; line-height:1.5;
}

/* ── Activation Card ──────────────────────────────────────────────────── */

.tl-activate{
  border:1px solid rgba(96,165,250,.12);
  border-radius:20px;
  padding:0;
  background: linear-gradient(135deg, rgba(96,165,250,.04) 0%, rgba(167,139,250,.03) 100%);
  overflow:hidden;
}
@media(prefers-reduced-motion:no-preference){
  .tl-activate{ opacity:0; transform:translateY(12px) scale(.98); animation: tlActivateIn .5s cubic-bezier(.16,1,.3,1) .15s both; }
  @keyframes tlActivateIn{ to{ opacity:1; transform:none; } }
}

.tl-activate-body{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:420px;
}
@media(max-width:768px){
  .tl-activate-body{ grid-template-columns:1fr; }
}

.tl-activate-info{
  padding:36px 32px;
  display:flex; flex-direction:column;
  text-align:center;
}

.tl-activate-icon{
  width:72px; height:72px; margin:0 auto 18px;
  display:grid; place-items:center;
  border-radius:22px;
  background:linear-gradient(135deg, rgba(96,165,250,.12), rgba(167,139,250,.08));
  border:1px solid rgba(96,165,250,.18);
  animation: tlIconPulse 3s ease-in-out infinite;
}
@keyframes tlIconPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(96,165,250,.15); }
  50%{ box-shadow:0 0 0 12px rgba(96,165,250,0); }
}
.tl-activate-icon svg{ width:32px; height:32px; color:#60a5fa; }
.tl-activate-title{
  font-size:22px; font-weight:950; margin:0 0 8px;
  background: linear-gradient(135deg, #e0e7ff, #93c5fd, #a78bfa);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.tl-activate-desc{
  color:var(--muted); font-size:13px; line-height:1.5; margin:0 0 24px;
  max-width:400px; margin-left:auto; margin-right:auto;
}

.tl-activate-perks{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  text-align:left; margin-bottom:24px;
}
@media(max-width:480px){ .tl-activate-perks{ grid-template-columns:1fr; } }
.tl-perk{
  display:flex; align-items:flex-start; gap:10px;
  padding:12px;
  border-radius:12px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);
  font-size:12px; line-height:1.4;
}
.tl-perk-icon{
  flex-shrink:0; width:20px; height:20px; color:#22c55e;
}

/* ── Activation Visual (image + watermark) ────────────────────────────── */

.tl-activate-visual{
  position:relative;
  background:linear-gradient(135deg, rgba(96,165,250,.06), rgba(167,139,250,.04));
  border-left:1px solid rgba(96,165,250,.08);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
@media(max-width:768px){
  .tl-activate-visual{
    border-left:none;
    border-top:1px solid rgba(96,165,250,.08);
    min-height:260px;
  }
}
.tl-activate-img-wrap{
  position:relative;
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
}
.tl-activate-img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.tl-activate-watermark{
  position:absolute;
  bottom:16px; right:16px;
  height:28px; width:auto;
  opacity:.35;
  pointer-events:none;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.5));
}

/* ── Language Selector (activation) ───────────────────────────────────── */

.tl-lang-grid{
  display:flex; flex-wrap:wrap; gap:8px;
  justify-content:center;
  margin-bottom:20px;
}
.tl-lang-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.8);
  font-size:12px; font-weight:600;
  cursor:pointer;
  transition: all .18s ease;
  user-select:none;
}
.tl-lang-chip:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(96,165,250,.30);
}
.tl-lang-chip input{ display:none; }
.tl-lang-chip.selected{
  background:rgba(96,165,250,.10);
  border-color:rgba(96,165,250,.45);
  color:#fff;
  box-shadow:0 0 0 3px rgba(96,165,250,.10);
}
.tl-lang-chip-check{
  width:14px; height:14px;
  border-radius:4px;
  border:1.5px solid rgba(255,255,255,.25);
  display:grid; place-items:center;
  transition: all .15s;
}
.tl-lang-chip.selected .tl-lang-chip-check{
  background:#3b82f6;
  border-color:#3b82f6;
}
.tl-lang-chip-check svg{ width:10px; height:10px; color:#fff; opacity:0; transition:opacity .15s; }
.tl-lang-chip.selected .tl-lang-chip-check svg{ opacity:1; }

/* ── Review Queue ─────────────────────────────────────────────────────── */

@media(prefers-reduced-motion:no-preference){
  .tl-section{ opacity:0; transform:translateY(8px); animation: tlFadeIn .4s cubic-bezier(.16,1,.3,1) .45s both; }
}
.tl-section-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
.tl-section-title{
  font-size:15px; font-weight:800; letter-spacing:.2px;
}
.tl-section-count{
  font-size:12px; color:var(--muted);
  padding:3px 10px; border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}

.tl-review-list{ display:flex; flex-direction:column; gap:10px; }

.tl-leave-section{ margin-top:24px; padding-top:16px; border-top:1px solid rgba(255,255,255,.06); text-align:center; }
.tl-leave-btn{ font-size:12px; color:rgba(255,255,255,.35); text-decoration:none; cursor:pointer; transition:color .15s ease; }
.tl-leave-btn:hover{ color:rgba(239,68,68,.7); }

.tl-review-item{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  background:rgba(255,255,255,.02);
  cursor:pointer;
  transition: all .18s ease;
}
.tl-review-item:hover{
  background:rgba(255,255,255,.04);
  border-color:rgba(96,165,250,.20);
  box-shadow:0 4px 16px rgba(0,0,0,.12);
}
.tl-review-item-lang{
  display:flex; align-items:center; gap:4px;
  font-size:11px; font-weight:700;
  padding:4px 10px; border-radius:999px;
  background:rgba(96,165,250,.08);
  color:#60a5fa;
  white-space:nowrap;
}
.tl-review-item-info{ flex:1; min-width:0; }
.tl-review-item-title{
  font-size:13px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tl-review-item-meta{
  font-size:11px; color:var(--muted); margin-top:2px;
}
.tl-review-item-votes{
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:var(--muted);
}
.tl-review-item-votes svg{ width:14px; height:14px; }

/* ── History ──────────────────────────────────────────────────────────── */

.tl-history-item{
  display:flex; align-items:center; gap:14px;
  padding:12px 16px;
  border:1px solid rgba(255,255,255,.04);
  border-radius:12px;
  background:rgba(255,255,255,.015);
}
.tl-history-status{
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
}
.tl-history-status--approved{ background:#22c55e; box-shadow:0 0 6px rgba(34,197,94,.4); }
.tl-history-status--rejected{ background:#f87171; box-shadow:0 0 6px rgba(248,113,113,.4); }
.tl-history-status--pending{ background:#fbbf24; box-shadow:0 0 6px rgba(251,191,36,.4); }

/* ══════════════════════════════════════════════════════════════════════════
   AUTHOR TRANSLATION CONSENT (writer panel)
   ══════════════════════════════════════════════════════════════════════════ */

.tl-consent-trigger{
  display:flex; align-items:center; gap:10px;
  padding:14px 18px;
  border:1px solid rgba(96,165,250,.12);
  border-radius:14px;
  background:linear-gradient(135deg, rgba(96,165,250,.04), rgba(167,139,250,.02));
  cursor:pointer;
  transition: all .2s ease;
}
.tl-consent-trigger:hover{
  border-color:rgba(96,165,250,.25);
  background:linear-gradient(135deg, rgba(96,165,250,.07), rgba(167,139,250,.04));
  box-shadow:0 4px 16px rgba(96,165,250,.08);
}
.tl-consent-trigger-icon{
  width:36px; height:36px;
  display:grid; place-items:center;
  border-radius:10px;
  background:linear-gradient(135deg, rgba(96,165,250,.12), rgba(167,139,250,.08));
  flex-shrink:0;
}
.tl-consent-trigger-icon svg{ width:18px; height:18px; color:#60a5fa; }
.tl-consent-trigger-text{ flex:1; }
.tl-consent-trigger-title{ font-size:13px; font-weight:700; }
.tl-consent-trigger-status{ font-size:11px; color:var(--muted); margin-top:1px; }
.tl-consent-trigger-arrow{ width:16px; height:16px; color:var(--muted); transition:transform .2s; }
.tl-consent-trigger:hover .tl-consent-trigger-arrow{ transform:translateX(2px); }

/* ── Consent Modal ────────────────────────────────────────────────────── */

.tl-consent-backdrop{
  position:fixed; inset:0; z-index:10001;
  background:rgba(0,0,0,.6); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
}
@media(prefers-reduced-motion:no-preference){
  .tl-consent-backdrop{ opacity:0; animation: tlBackdropIn .2s ease-out forwards; }
  @keyframes tlBackdropIn{ to{ opacity:1; } }
}

.tl-consent-modal{
  width:90%; max-width:480px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)), var(--surface);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  box-shadow:0 24px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.03);
  overflow:hidden;
}
@media(prefers-reduced-motion:no-preference){
  .tl-consent-modal{ transform:translateY(16px) scale(.97); opacity:0; animation: tlModalIn .3s cubic-bezier(.16,1,.3,1) .05s both; }
  @keyframes tlModalIn{ to{ transform:none; opacity:1; } }
}

.tl-consent-header{
  padding:22px 24px 16px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.tl-consent-title{
  font-size:18px; font-weight:900; margin:0;
}
.tl-consent-subtitle{
  font-size:13px; color:var(--muted); margin:4px 0 0;
}

.tl-consent-body{ padding:20px 24px; }

.tl-consent-options{
  display:flex; flex-direction:column; gap:10px;
}
.tl-consent-option{
  display:flex; align-items:flex-start; gap:14px;
  padding:16px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  background:rgba(255,255,255,.02);
  cursor:pointer;
  transition: all .2s ease;
}
.tl-consent-option:hover{
  background:rgba(255,255,255,.04);
  border-color:rgba(96,165,250,.20);
}
.tl-consent-option.selected{
  border-color:rgba(96,165,250,.40);
  background:rgba(96,165,250,.06);
  box-shadow:0 0 0 3px rgba(96,165,250,.08);
}
.tl-consent-option-radio{
  width:20px; height:20px; flex-shrink:0; margin-top:1px;
  border:2px solid rgba(255,255,255,.20);
  border-radius:50%;
  display:grid; place-items:center;
  transition: all .2s;
}
.tl-consent-option.selected .tl-consent-option-radio{
  border-color:#3b82f6;
}
.tl-consent-option-radio-dot{
  width:10px; height:10px; border-radius:50%;
  background:#3b82f6;
  transform:scale(0);
  transition:transform .2s cubic-bezier(.16,1,.3,1);
}
.tl-consent-option.selected .tl-consent-option-radio-dot{
  transform:scale(1);
}
.tl-consent-option-content{ flex:1; }
.tl-consent-option-icon{
  width:28px; height:28px; margin-bottom:6px;
  display:grid; place-items:center;
  border-radius:8px;
  background:rgba(255,255,255,.04);
}
.tl-consent-option-icon svg{ width:16px; height:16px; }
.tl-consent-option-label{ font-size:14px; font-weight:700; }
.tl-consent-option-desc{ font-size:12px; color:var(--muted); margin-top:3px; line-height:1.4; }

.tl-consent-footer{
  padding:16px 24px;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex; gap:10px; justify-content:flex-end;
}
.tl-consent-footer .btn{ width:auto; }

/* ══════════════════════════════════════════════════════════════════════════
   AUTHOR TRANSLATION PROGRESS (writer panel)
   ══════════════════════════════════════════════════════════════════════════ */

.tl-author-progress{
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  padding:20px;
  background:rgba(255,255,255,.02);
}
.tl-author-progress-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:16px;
}
.tl-author-progress-title{ font-size:15px; font-weight:800; }
.tl-author-progress-pct{
  font-size:13px; font-weight:700;
  background:linear-gradient(135deg, #60a5fa, #a78bfa);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}

.tl-author-bar{
  width:100%; height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
  margin-bottom:18px;
}
.tl-author-bar-fill{
  height:100%; border-radius:999px;
  background:linear-gradient(90deg, #60a5fa, #a78bfa);
  transition: width 1s cubic-bezier(.4,0,.2,1);
}

.tl-author-chapters{
  display:flex; flex-direction:column; gap:8px;
}
.tl-author-chapter{
  display:flex; align-items:center; gap:12px;
  padding:10px 14px;
  border-radius:10px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.04);
  font-size:13px;
}
.tl-author-chapter-status{
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
}
.tl-author-chapter-status--queued{ background:rgba(255,255,255,.25); }
.tl-author-chapter-status--assigned{ background:#fbbf24; box-shadow:0 0 6px rgba(251,191,36,.4); }
.tl-author-chapter-status--translated{ background:#60a5fa; box-shadow:0 0 6px rgba(96,165,250,.4); }
.tl-author-chapter-status--voting{ background:#a78bfa; box-shadow:0 0 6px rgba(167,139,250,.4); }
.tl-author-chapter-status--approved{ background:#22c55e; box-shadow:0 0 6px rgba(34,197,94,.4); }
.tl-author-chapter-status--rejected{ background:#f87171; box-shadow:0 0 6px rgba(248,113,113,.4); }
.tl-author-chapter-name{ flex:1; font-weight:600; }
.tl-author-chapter-label{
  font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px;
  text-transform:uppercase; letter-spacing:.3px;
}
.tl-author-chapter-label--queued{ color:var(--muted); background:rgba(255,255,255,.04); }
.tl-author-chapter-label--assigned{ color:#fbbf24; background:rgba(251,191,36,.08); }
.tl-author-chapter-label--translated{ color:#60a5fa; background:rgba(96,165,250,.08); }
.tl-author-chapter-label--voting{ color:#a78bfa; background:rgba(167,139,250,.08); }
.tl-author-chapter-label--approved{ color:#22c55e; background:rgba(34,197,94,.08); }
.tl-author-chapter-label--rejected{ color:#f87171; background:rgba(248,113,113,.08); }

.tl-author-chapter-time{
  font-size:11px; color:var(--muted);
  font-variant-numeric:tabular-nums;
}

/* ══════════════════════════════════════════════════════════════════════════
   TRANSLATION EDITOR (translate.html)
   ══════════════════════════════════════════════════════════════════════════ */

.translate-page{
  display:flex; flex-direction:column;
  height:100%; min-height:0;
}

.translate-header{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 0;
  flex-wrap:wrap;
}
.translate-header-left{
  display:flex; align-items:center; gap:12px;
}
.translate-title{
  font-size:18px; font-weight:900; margin:0; letter-spacing:.2px;
}
.translate-langs{
  display:flex; align-items:center; gap:6px;
  font-size:12px; color:var(--muted); font-weight:600;
}
.translate-lang-badge{
  padding:2px 8px; border-radius:999px;
  background:rgba(96,165,250,.08); color:#60a5fa;
  font-size:11px; font-weight:700; text-transform:uppercase;
}
.translate-lang-arrow{ color:rgba(255,255,255,.25); }

.translate-header-right{
  display:flex; align-items:center; gap:10px;
}
.translate-chapter-select{
  width:auto; min-width:160px;
  padding:8px 12px;
  border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:var(--text);
  font-size:13px;
}
.translate-save-btn{ width:auto; padding:8px 18px; }
.translate-submit-btn{ width:auto; padding:8px 18px; }

.translate-status{
  font-size:12px; color:var(--muted);
  padding:8px 0;
}

/* ── Deadline Bar (editor) ────────────────────────────────────────────── */

.translate-deadline{
  display:flex; align-items:center; gap:12px;
  padding:10px 16px;
  border-radius:12px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  margin-bottom:12px;
  font-size:12px;
}
.translate-deadline-icon{ width:16px; height:16px; color:var(--muted); flex-shrink:0; }
.translate-deadline-bar{
  flex:1; height:4px; border-radius:999px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
}
.translate-deadline-fill{
  height:100%; border-radius:999px;
  background:linear-gradient(90deg, #22c55e, #fbbf24);
  transition: width .5s ease;
}
.translate-deadline-fill[data-urgent="true"]{
  background:linear-gradient(90deg, #fbbf24, #f87171);
  animation: tlDeadlinePulse 1.5s ease-in-out infinite;
}
@keyframes tlDeadlinePulse{
  0%,100%{ opacity:1; }
  50%{ opacity:.6; }
}
.translate-deadline-text{
  font-weight:700; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.translate-deadline-text[data-urgent="true"]{ color:#f87171; }

/* ── Split Editor ─────────────────────────────────────────────────────── */

.translate-split{
  flex:1; min-height:0;
  display:grid; grid-template-columns:1fr auto 1fr;
  gap:0;
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  overflow:hidden;
  background:rgba(255,255,255,.015);
}
@media(max-width:768px){
  .translate-split{
    grid-template-columns:1fr;
    grid-template-rows:1fr auto 1fr;
  }
}

.translate-pane{
  display:flex; flex-direction:column;
  min-height:0; overflow:hidden;
}
.translate-pane-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px;
  border-bottom:1px solid rgba(255,255,255,.05);
  background:rgba(255,255,255,.02);
}
.translate-pane-label{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color:var(--muted);
}
.translate-word-count{
  font-size:11px; color:var(--muted);
  font-variant-numeric:tabular-nums;
}

.translate-content{
  flex:1; overflow-y:auto;
  padding:18px;
  font-size:14px; line-height:1.7;
  color:rgba(255,255,255,.75);
}
.translate-editor{
  flex:1; overflow-y:auto;
  padding:18px;
  font-size:14px; line-height:1.7;
  color:var(--text);
  outline:none;
  min-height:200px;
}
.translate-editor:focus{
  box-shadow:inset 0 0 0 2px rgba(96,165,250,.15);
}
.translate-editor:empty::before{
  content:attr(data-placeholder);
  color:rgba(255,255,255,.20);
  pointer-events:none;
}

.translate-divider{
  width:1px;
  background:rgba(255,255,255,.06);
}
@media(max-width:768px){
  .translate-divider{
    width:100%; height:1px;
  }
}

/* ── Voting Panel (editor) ────────────────────────────────────────────── */

.translate-voting{
  margin-top:12px;
  padding:18px;
  border:1px solid rgba(167,139,250,.15);
  border-radius:14px;
  background:linear-gradient(135deg, rgba(167,139,250,.04), rgba(96,165,250,.02));
}
.translate-voting-info{
  display:flex; align-items:center; gap:12px;
  margin-bottom:12px;
}
.translate-voting-label{
  font-size:13px; font-weight:700;
}
.translate-voting-tally{
  font-size:12px; color:var(--muted);
  display:flex; align-items:center; gap:8px;
}
.translate-voting-actions{
  display:flex; gap:10px;
}
.translate-vote-btn{
  width:auto; padding:10px 20px;
  display:inline-flex; align-items:center; gap:6px;
}
.translate-vote-btn svg{ width:16px; height:16px; }
.vote-up{ background:rgba(34,197,94,.12); color:#22c55e; border:1px solid rgba(34,197,94,.20); }
.vote-up:hover{ background:rgba(34,197,94,.18); border-color:rgba(34,197,94,.35); }
.vote-down{ background:rgba(248,113,113,.08); color:#f87171; border:1px solid rgba(248,113,113,.15); }
.vote-down:hover{ background:rgba(248,113,113,.14); border-color:rgba(248,113,113,.30); }

/* ── Reusable cover overlay (.nq-cover) ──────────────────────────────── */

.nq-cover{
  position:relative;
  overflow:hidden;
  aspect-ratio: 3 / 4;
  min-width: 100px;
  min-height: 133px;
  background: rgba(255,255,255,.03);
  border-radius: var(--radius, 8px);
  user-select:none;
}
.nq-cover-img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.nq-cover-fallback{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size:2.4rem; font-weight:900; color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.04);
}

.nq-cover-handle{
  position:absolute;
  top:0; left:0; right:0;
  padding: 8px 10px 16px;
  text-align:center;
  font-size: 11px; font-weight:800;
  color:rgba(255,255,255,.82);
  text-shadow: 0 1px 6px rgba(0,0,0,.7);
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 100%);
  pointer-events:none;
  line-height:1.2;
  letter-spacing:.3px;
}

.nq-cover-title{
  position:absolute;
  top:50%; left:50%;
  transform: translate(-50%, -50%);
  width: 88%;
  text-align:center;
  font-weight:950;
  color:rgba(255,255,255,.95);
  text-shadow: 0 2px 12px rgba(0,0,0,.65), 0 0 4px rgba(0,0,0,.4);
  line-height:1.15;
  letter-spacing:.2px;
  pointer-events:none;
  word-break: break-word;
  overflow-wrap: break-word;
}
.nq-cover-title--lg{ font-size: 18px; }
.nq-cover-title--md{ font-size: 15px; }
.nq-cover-title--sm{ font-size: 12px; }

/* Hide overlays on small cover containers (e.g. library thumbnails) */
.cover-no-focus .nq-cover-title,
.cover-no-focus .nq-cover-logo{ display:none; }

.nq-cover-logo{
  position:absolute;
  bottom: 4px; right: 4px;
  width: clamp(10px, 14%, 22px);
  height: auto;
  aspect-ratio: 1;
  opacity: .45;
  pointer-events:none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
  z-index: 2;
}
/* In feed embed covers, keep logo small — flush bottom-right */
.feed-embed-cover .nq-cover-logo{
  width: clamp(14px, 22%, 26px);
  height: auto;
  bottom: 0; right: 0;
  opacity: .55;
  position: absolute;
  object-fit: contain;
  object-position: bottom right;
  aspect-ratio: 1;
  z-index: 3;
  border-bottom-right-radius: 0;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.7));
}
/* In trending sidebar covers, keep logo very small */
.trending-cover .nq-cover-logo{
  width: clamp(7px, 13%, 14px);
  bottom: 2px; right: 2px;
  opacity: .35;
}
/* Hide overlaid title/handle in feed and trending covers — only show cover image */
.feed-embed-cover .nq-cover-title,
.feed-embed-cover .nq-cover-handle,
.trending-cover .nq-cover-title,
.trending-cover .nq-cover-handle{
  display: none;
}

/* ── Reduced motion ───────────────────────────────────────────────────── */

@media(prefers-reduced-motion:reduce){
  .tl-dash, .tl-rank-hero, .tl-stat, .tl-alert, .tl-empty,
  .tl-activate, .tl-section, .tl-consent-backdrop, .tl-consent-modal{
    animation:none !important;
    opacity:1 !important; transform:none !important;
  }
  .tl-activate-icon{ animation:none !important; }
  .tl-deadline-fill[data-urgent="true"]{ animation:none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   BUG REPORT — User form + My reports
   ══════════════════════════════════════════════════════════════════════ */

/* Bug report two-column layout */
.bugreport-layout{
  display: flex;
  gap: 0;
  align-items: stretch;
}
.bugreport-main{
  flex: 1 1 auto;
  min-width: 0;
}
.bugreport-aside{
  flex: 0 0 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid rgba(255,255,255,.06);
  margin: -28px -28px -28px 24px;
  padding: 32px 20px;
  background: linear-gradient(170deg, rgba(96,165,250,.03) 0%, rgba(168,85,247,.02) 100%);
  border-radius: 0 15px 15px 0;
  position: relative;
  overflow: hidden;
}
.bugreport-aside::before{
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(ellipse 80% 60% at 50% 80%, rgba(96,165,250,.05), transparent 70%);
  pointer-events:none;
}
.bugreport-aside-img-wrap{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-height: 100%;
}
.bugreport-aside-img{
  width: 100%;
  max-width: 180px;
  height: auto;
  max-height: 420px;
  object-fit: contain;
  border-radius: 16px;
  filter: drop-shadow(0 8px 32px rgba(0,0,0,.3));
  user-select: none;
  pointer-events: none;
}
.bugreport-aside-img.is-fallback{
  max-width: 100px;
  opacity: .12;
  filter: grayscale(1);
  border-radius: 0;
}
.bugreport-aside-lockup{
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  max-width: 130px;
  height: auto;
  object-fit: contain;
  opacity: .85;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
  pointer-events: none;
  user-select: none;
  z-index: 2;
}
@media(max-width:860px){
  .bugreport-layout{ flex-direction: column; }
  .bugreport-aside{
    flex: 0 0 auto;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,.06);
    margin: 24px -28px -28px;
    padding: 24px 20px;
    max-height: 180px;
    border-radius: 0 0 15px 15px;
  }
  .bugreport-aside-img{ max-width: 120px; max-height: 140px; }
  .bugreport-aside-img.is-fallback{ max-width: 60px; }
}

.bug-report-container{ max-width: 720px; }

.bug-report-tabs{
  display: flex; gap: 4px; margin-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding-bottom: 2px;
}
.bug-report-tab{
  background: none; border: none; color: rgba(255,255,255,.5);
  font-size: 14px; font-weight: 600; padding: 8px 16px;
  cursor: pointer; border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.bug-report-tab:hover{ color: rgba(255,255,255,.8); }
.bug-report-tab.active{
  color: var(--accent, #6c63ff);
  border-bottom-color: var(--accent, #6c63ff);
}

.bug-report-form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.bug-report-field{ display: flex; flex-direction: column; gap: 4px; }
.bug-report-field.full-width{ grid-column: 1 / -1; }
.bug-report-field label{
  font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,.7);
}
.bug-report-field select.input{
  appearance: none;
  -webkit-appearance: none;
  background-color: rgba(255,255,255,.06);
  color: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  padding: 10px 36px 10px 12px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='rgba(255,255,255,.45)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 7px;
}
.bug-report-field select.input:hover{
  border-color: rgba(255,255,255,.22);
  background-color: rgba(255,255,255,.08);
}
.bug-report-field select.input:focus{
  outline: none;
  border-color: var(--accent, #6c63ff);
  box-shadow: 0 0 0 2px rgba(108,99,255,.18);
}
.bug-report-field select.input option{
  background: #1a2236;
  color: rgba(255,255,255,.88);
  padding: 8px 12px;
}
.bug-report-field textarea.input{
  resize: vertical;
  max-height: 260px;
  min-height: 60px;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
.bug-report-field input.input{
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
.bug-report-hint{
  font-size: 11px; color: rgba(255,255,255,.35);
}
.bug-report-hint--ok{
  color: rgba(100,220,100,.6);
}

.bug-report-dropzone{
  border: 2px dashed rgba(255,255,255,.15);
  border-radius: 10px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  position: relative;
  min-height: 80px;
  display: flex; align-items: center; justify-content: center;
}
.bug-report-dropzone:hover,
.bug-report-dropzone:focus-visible{
  border-color: var(--accent, #6c63ff);
  background: rgba(108,99,255,.04);
}
.bug-report-dropzone.drag-over{
  border-color: var(--accent, #6c63ff);
  background: rgba(108,99,255,.08);
}
.bug-report-dropzone-inner{
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: rgba(255,255,255,.4); font-size: 13px;
}
.bug-report-dropzone-inner svg{ opacity: .5; }

.bug-report-preview{ position: relative; }
.bug-report-preview img{
  max-width: 100%; max-height: 200px;
  border-radius: 8px; object-fit: contain;
}
.bug-report-preview-remove{
  position: absolute; top: -6px; right: -6px;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(220,50,50,.85); color: #fff;
  border: none; font-size: 16px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}

.bug-report-checkbox-label{
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: rgba(255,255,255,.65);
  cursor: pointer;
}
.bug-report-checkbox-label input[type="checkbox"]{ accent-color: var(--accent, #6c63ff); }

.bug-report-actions{ margin-top: 22px; }
.bug-report-submit{
  min-width: 180px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 32px;
  font-size: 14px; font-weight: 800; letter-spacing: .3px;
  background: linear-gradient(135deg, #6366f1 0%, #3b82f6 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(99,102,241,.25), 0 0 0 1px rgba(255,255,255,.06) inset;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  cursor: pointer;
}
.bug-report-submit:hover:not(:disabled){
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(99,102,241,.35);
  filter: brightness(1.08);
}
.bug-report-submit:active:not(:disabled){ transform: translateY(0); }
.bug-report-submit:disabled{ opacity: .5; cursor: not-allowed; }
.bug-report-submit:focus-visible{ outline: 2px solid rgba(99,102,241,.6); outline-offset: 2px; }
.bug-report-spinner{
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: br-spin .6s linear infinite;
}
@keyframes br-spin{ to{ transform: rotate(360deg); } }

.bug-report-status{
  margin-top: 10px; font-size: 13px;
  color: rgba(255,255,255,.5);
}
.bug-report-status.error{ color: #f44; }

.bug-report-success{
  text-align: center; padding: 40px 20px;
  animation: br-fade-in .35s ease;
}
@keyframes br-fade-in{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: none; } }
.bug-report-success-icon{ margin-bottom: 12px; }
.bug-report-success-title{
  font-size: 18px; font-weight: 700;
  color: rgba(255,255,255,.9); margin-bottom: 6px;
}
.bug-report-success-sub{
  font-size: 13px; color: rgba(255,255,255,.45);
  margin-bottom: 18px;
}

/* My reports list */
.bug-report-my-list{ display: flex; flex-direction: column; gap: 10px; }
.bug-report-my-item{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px; padding: 12px 16px;
}
.bug-report-my-item-header{
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 4px;
}
.bug-report-my-item-title{
  font-size: 14px; font-weight: 600;
  color: rgba(255,255,255,.85);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; min-width: 0;
}
.bug-report-my-item-meta{
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: rgba(255,255,255,.4);
}
.bug-report-copy-id{
  display: inline-flex; align-items: center; gap: 3px;
  background: none; border: none; color: rgba(255,255,255,.35);
  font-size: 11px; cursor: pointer; padding: 0;
}
.bug-report-copy-id:hover{ color: var(--accent, #6c63ff); }

/* Status chips */
.bug-report-chip{
  display: inline-block;
  padding: 2px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .3px;
}
.bug-report-chip.new{ background: rgba(59,130,246,.15); color: #60a5fa; }
.bug-report-chip.reviewing{ background: rgba(251,191,36,.15); color: #fbbf24; }
.bug-report-chip.accepted{ background: rgba(34,197,94,.15); color: #22c55e; }
.bug-report-chip.rejected{ background: rgba(239,68,68,.15); color: #ef4444; }
.bug-report-chip.resolved{ background: rgba(148,163,184,.12); color: #94a3b8; }

.bug-report-severity-chip{
  display: inline-block; padding: 1px 8px; border-radius: 12px;
  font-size: 11px; font-weight: 600;
  background: rgba(255,255,255,.06); color: rgba(255,255,255,.5);
}
.bug-report-severity-chip.high{ background: rgba(251,146,60,.15); color: #fb923c; }
.bug-report-severity-chip.blocker{ background: rgba(239,68,68,.15); color: #ef4444; }

/* Loading & error states */
.bug-report-error{
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 36px 20px;
  color: rgba(239,68,68,.7);
  animation: br-fade-in .3s ease;
}
.bug-report-error-text{
  font-size: 13px; color: rgba(255,255,255,.45);
}

@media(max-width:600px){
  .bug-report-form-grid{ grid-template-columns: 1fr; }
  .bug-report-field.full-width{ grid-column: 1; }
}

/* ══════════════════════════════════════════════════════════════════════
   BUG REPORT — Admin panel (table + drawer)
   ══════════════════════════════════════════════════════════════════════ */

.bug-admin-filters{ flex-wrap: wrap; }
.bug-admin-table{ width: 100%; }
.bug-admin-title-cell{
  max-width: 220px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.bug-admin-row-new{ background: rgba(59,130,246,.04); }

/* Drawer */
.bug-admin-drawer-backdrop{
  position: fixed; inset: 0; z-index: 900;
  background: rgba(0,0,0,.45);
  animation: br-fade-in .2s ease;
}
.bug-admin-drawer{
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(520px, 90vw); z-index: 910;
  background: var(--bg-card, #1a1a2e);
  border-left: 1px solid rgba(255,255,255,.08);
  display: flex; flex-direction: column;
  animation: br-drawer-in .25s ease;
  overflow: hidden;
}
@keyframes br-drawer-in{ from{ transform: translateX(100%); } to{ transform: none; } }

.bug-admin-drawer-header{
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.bug-admin-drawer-header h4{ margin: 0; font-size: 16px; }
.bug-admin-drawer-close{
  background: none; border: none; color: rgba(255,255,255,.5);
  font-size: 24px; cursor: pointer; padding: 4px 8px; line-height: 1;
}
.bug-admin-drawer-close:hover{ color: #fff; }

.bug-admin-drawer-body{
  flex: 1; overflow-y: auto; padding: 20px;
}

.bug-admin-detail-section{
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.bug-admin-detail-section:last-child{ border-bottom: none; }
.bug-admin-detail-section h5{
  font-size: 12px; font-weight: 700;
  color: rgba(255,255,255,.5);
  text-transform: uppercase; letter-spacing: .5px;
  margin: 0 0 6px;
}
.bug-admin-detail-section p{
  font-size: 14px; color: rgba(255,255,255,.8);
  margin: 0; line-height: 1.5;
}

.bug-admin-detail-row{
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 4px; font-size: 13px;
}
.bug-admin-detail-label{
  color: rgba(255,255,255,.45); min-width: 80px;
  font-weight: 600;
}
.bug-admin-detail-row code{
  font-size: 12px; background: rgba(255,255,255,.05);
  padding: 1px 6px; border-radius: 4px;
  word-break: break-all;
}

.bug-admin-attachment-link{ display: inline-block; margin-top: 6px; }
.bug-admin-attachment-img{
  max-width: 100%; max-height: 280px;
  border-radius: 8px; object-fit: contain;
  border: 1px solid rgba(255,255,255,.08);
}

.bug-admin-tech-grid{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; font-size: 12px;
  color: rgba(255,255,255,.6);
}
.bug-admin-tech-grid code{
  font-size: 11px; word-break: break-all;
  background: rgba(255,255,255,.04);
  padding: 1px 4px; border-radius: 3px;
}

.bug-admin-audit-log{ font-size: 12px; }
.bug-admin-audit-entry{
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,.03);
}

.bug-admin-detail-actions{
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.btn-sm{ padding: 4px 12px; font-size: 12px; }

/* ===== CHAT SYSTEM ===== */

#view-chat{ height:100%; }
#view-chat > .card{
  height:100%; display:flex; flex-direction:column;
  padding:0; overflow:hidden;
}
#view-chat > .card > #chat-root{ flex:1; min-height:0; display:flex; flex-direction:column; }

.chat-container{
  display:flex;
  min-height:400px;
  height:100%;
  border-radius:12px;
  overflow:hidden;
  background:var(--bg-card, #1a1a2e);
  border:1px solid rgba(255,255,255,.06);
}


/* --- Placeholder watermark --- */
.chat-placeholder{
  flex:1;min-width:0;
  display:flex;align-items:center;justify-content:center;
  background:transparent;
  user-select:none;pointer-events:none;
}
.chat-placeholder[hidden]{ display:none; }
.chat-placeholder-logo{
  width:clamp(120px, 22vw, 220px);
  height:auto;
  opacity:.06;
  filter:grayscale(.3);
}

/* --- Inbox --- */
.chat-inbox{
  width:340px;min-width:260px;max-width:380px;
  display:flex;flex-direction:column;
  border-right:1px solid rgba(255,255,255,.06);
  overflow:hidden;
}
.chat-inbox-header{
  padding:16px 16px 8px;
}
.chat-inbox-title{
  font-size:18px;font-weight:700;margin:0;
}
.chat-inbox-tabs{
  display:flex;gap:0;padding:0 16px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
}
.chat-tab{
  flex:1;padding:11px 0;
  background:none;border:none;
  color:var(--text-primary,#e0e0f0);
  font-size:14px;font-weight:600;cursor:pointer;
  border-bottom:2.5px solid transparent;
  transition:color .15s,border-color .15s,background .15s;
  display:flex;align-items:center;justify-content:center;gap:6px;
  letter-spacing:.01em;
}
.chat-tab.active{
  color:var(--accent,#6366f1);
  border-bottom-color:var(--accent,#6366f1);
  background:rgba(99,102,241,.06);
}
.chat-tab:hover:not(.active){color:#fff;background:rgba(255,255,255,.04);}
.chat-tab-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;
  border-radius:9px;font-size:11px;font-weight:700;
  background:var(--accent,#6366f1);color:#fff;
}
.chat-inbox-search{padding:8px 16px;}
.chat-search-input{
  width:100%;padding:8px 12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;color:var(--text-primary,#e0e0f0);
  font-size:13px;outline:none;
  transition:border-color .15s;
}
.chat-search-input:focus{border-color:var(--accent,#6366f1);}
.chat-search-input::placeholder{color:var(--text-secondary,#a0a0b8);}

.chat-inbox-list{
  flex:1;overflow-y:auto;
  scrollbar-width:thin;
}
.chat-inbox-empty{
  padding:48px 24px 32px;text-align:center;
  color:var(--text-secondary,#a0a0b8);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  animation:br-fade-in .35s ease;
}
.chat-empty-icon{
  color:var(--accent,#6366f1);opacity:.45;
  margin-bottom:8px;
}
.chat-empty-title{
  font-size:15px;font-weight:700;margin:0;
  color:var(--text-primary,#e0e0f0);
}
.chat-empty-subtitle{
  font-size:13px;margin:4px 0 0;line-height:1.5;
  color:var(--text-secondary,#a0a0b8);
  max-width:260px;
}
.chat-empty-hint{
  font-size:12px;margin:12px 0 0;line-height:1.5;
  color:var(--text-secondary,#a0a0b8);opacity:.7;
  max-width:240px;
  padding:8px 12px;
  background:rgba(255,255,255,.03);
  border-radius:8px;
  border:1px solid rgba(255,255,255,.05);
}
.chat-inbox-loading{padding:24px 0;}

/* --- Inbox Item --- */
.chat-inbox-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;cursor:pointer;
  transition:background .12s;
  border-bottom:1px solid rgba(255,255,255,.03);
}
.chat-inbox-item:hover,.chat-inbox-item:focus-visible{
  background:rgba(255,255,255,.04);
}
.chat-inbox-item:focus-visible{outline:2px solid var(--accent,#6366f1);outline-offset:-2px;}
.chat-inbox-unread{background:rgba(99,102,241,.04);}
.chat-inbox-pinned{border-left:3px solid var(--accent,#6366f1);}
.chat-inbox-active{background:rgba(99,102,241,.08);}

.chat-inbox-avatar-wrap{flex-shrink:0;}
.chat-inbox-avatar,.chat-inbox-avatar-fallback{
  width:44px;height:44px;border-radius:50%;object-fit:cover;
}
.chat-inbox-avatar-fallback{
  display:flex;align-items:center;justify-content:center;
  background:rgba(99,102,241,.15);color:var(--accent,#6366f1);
  font-weight:700;font-size:16px;
}
.chat-inbox-content{flex:1;min-width:0;}
.chat-inbox-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.chat-inbox-name{
  font-weight:600;font-size:14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--text-primary,#e0e0f0);
}
.chat-inbox-time{
  font-size:11px;color:var(--text-secondary,#a0a0b8);
  white-space:nowrap;flex-shrink:0;
}
.chat-inbox-bottom{display:flex;align-items:center;gap:6px;margin-top:2px;}
.chat-inbox-preview{
  font-size:13px;color:var(--text-secondary,#a0a0b8);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex:1;min-width:0;
}
.chat-inbox-unread .chat-inbox-preview{color:var(--text-primary,#e0e0f0);font-weight:500;}
.chat-inbox-unread-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;
  border-radius:9px;font-size:11px;font-weight:700;
  background:var(--accent,#6366f1);color:#fff;flex-shrink:0;
}
.chat-inbox-pin-icon,.chat-inbox-mute-icon{font-size:12px;flex-shrink:0;}

/* --- Conversation --- */
.chat-conversation{
  flex:1;display:flex;flex-direction:column;
  min-width:0;overflow:hidden;
}
.chat-conv-header{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.02);
}
.chat-back-btn{
  display:none;background:none;border:none;
  color:var(--text-secondary,#a0a0b8);cursor:pointer;
  padding:4px;border-radius:6px;
  transition:color .12s,background .12s;
}
.chat-back-btn:hover{color:var(--text-primary,#e0e0f0);background:rgba(255,255,255,.06);}
.chat-conv-peer{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}
.chat-conv-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;}
.chat-conv-avatar-fallback{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(99,102,241,.15);color:var(--accent,#6366f1);
  font-weight:700;font-size:15px;flex-shrink:0;
}
.chat-conv-peer-info{min-width:0;}
.chat-conv-peer-name{
  font-weight:600;font-size:14px;display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.chat-conv-peer-handle{
  font-size:12px;color:var(--text-secondary,#a0a0b8);display:block;
}
.chat-conv-actions{position:relative;}
.chat-action-btn{
  background:none;border:none;
  color:var(--text-secondary,#a0a0b8);cursor:pointer;
  padding:6px;border-radius:6px;
  transition:color .12s,background .12s;
}
.chat-action-btn:hover{color:var(--text-primary,#e0e0f0);background:rgba(255,255,255,.06);}
.chat-conv-menu{
  position:absolute;right:0;top:100%;margin-top:4px;
  background:var(--bg-card,#1a1a2e);
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;padding:4px 0;
  min-width:160px;z-index:20;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.chat-menu-item{
  display:block;width:100%;padding:8px 14px;
  background:none;border:none;text-align:left;
  color:var(--text-primary,#e0e0f0);font-size:13px;
  cursor:pointer;transition:background .12s;
}
.chat-menu-item:hover{background:rgba(255,255,255,.06);}
.chat-menu-danger{color:#ef4444;}
.chat-menu-danger:hover{background:rgba(239,68,68,.08);}

/* --- Request Banner --- */
.chat-request-banner{
  padding:12px 16px;
  background:rgba(99,102,241,.08);
  border-bottom:1px solid rgba(99,102,241,.15);
  display:flex;flex-direction:column;gap:8px;
}
.chat-request-text{margin:0;font-size:13px;color:var(--text-secondary,#a0a0b8);}
.chat-request-actions{display:flex;gap:8px;}
.chat-accept-btn{font-size:13px;padding:6px 16px;}
.chat-reject-btn{font-size:13px;padding:6px 16px;}

/* --- Messages Area --- */
.chat-messages{
  flex:1;overflow-y:auto;padding:16px;
  display:flex;flex-direction:column;gap:4px;
  scrollbar-width:thin;
}
.chat-messages-loading{padding:24px 0;}
.chat-date-sep{
  text-align:center;padding:8px 0;
  font-size:11px;color:var(--text-secondary,#a0a0b8);
  font-weight:600;letter-spacing:.3px;
}

/* --- Bubbles --- */
.chat-bubble-wrap{display:flex;margin-bottom:2px;}
.chat-bubble-mine{justify-content:flex-end;}
.chat-bubble-theirs{justify-content:flex-start;}
.chat-bubble{
  max-width:70%;padding:10px 14px;
  border-radius:16px;position:relative;
  word-break:break-word;
}
.chat-bubble-sent{
  background:var(--accent,#6366f1);color:#fff;
  border-bottom-right-radius:4px;
}
.chat-bubble-received{
  background:rgba(255,255,255,.06);
  color:var(--text-primary,#e0e0f0);
  border-bottom-left-radius:4px;
}
.chat-bubble-text{font-size:14px;line-height:1.45;}
.chat-bubble-text a.chat-link{
  color:inherit;text-decoration:underline;
  text-underline-offset:2px;
}
.chat-bubble-sent .chat-link{color:#c7d2fe;}
.chat-bubble-text a.chat-link-suspicious{
  color:#fbbf24;text-decoration:underline wavy;
}
.chat-bubble-meta{
  display:flex;justify-content:flex-end;gap:6px;
  margin-top:4px;
}
.chat-bubble-time{font-size:10px;opacity:.65;}
.chat-bubble-image-wrap{margin-bottom:6px;}
.chat-bubble-image{
  max-width:240px;max-height:200px;
  border-radius:10px;object-fit:cover;cursor:pointer;
  display:block;
}
.chat-bubble-reactions{margin-top:4px;}
.chat-reaction{
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 8px;border-radius:12px;
  font-size:12px;cursor:pointer;
  background:rgba(255,255,255,.06);
  transition:background .12s;
}
.chat-reaction:hover{background:rgba(255,255,255,.1);}
.chat-reaction-mine{background:rgba(99,102,241,.15);}

/* --- New Message Indicator --- */
.chat-new-msg-indicator{
  display:flex;justify-content:center;
  padding:4px 0;
}
.chat-new-msg-btn{
  display:flex;align-items:center;gap:4px;
  padding:6px 14px;border-radius:16px;
  background:var(--accent,#6366f1);color:#fff;
  border:none;font-size:12px;font-weight:600;
  cursor:pointer;box-shadow:0 2px 8px rgba(99,102,241,.3);
  transition:transform .12s;
}
.chat-new-msg-btn:hover{transform:translateY(-1px);}

/* --- Link Warning --- */
.chat-link-warning{
  padding:8px 16px;
  background:rgba(251,191,36,.08);
  border-top:1px solid rgba(251,191,36,.15);
  display:flex;align-items:center;gap:8px;
}
.chat-link-warning-content{
  display:flex;align-items:center;gap:6px;flex:1;
  font-size:12px;color:#fbbf24;
}
.chat-link-warning-close{
  background:none;border:none;color:#fbbf24;
  font-size:16px;cursor:pointer;padding:2px 4px;
}

/* --- Frozen Banner --- */
.chat-frozen-banner{
  padding:10px 16px;text-align:center;
  background:rgba(239,68,68,.08);
  border-top:1px solid rgba(239,68,68,.15);
  font-size:13px;color:#ef4444;
}

/* --- Composer --- */
.chat-composer{
  border-top:1px solid rgba(255,255,255,.06);
  padding:8px 12px;background:rgba(255,255,255,.02);
}
.chat-image-preview{
  padding:4px 0 8px;display:flex;align-items:center;gap:8px;
}
.chat-image-preview img{
  max-width:80px;max-height:60px;border-radius:8px;object-fit:cover;
}
.chat-image-remove{
  background:none;border:none;color:var(--text-secondary,#a0a0b8);
  font-size:18px;cursor:pointer;padding:2px 6px;
}
.chat-composer-row{
  display:flex;align-items:flex-end;gap:6px;
}
.chat-composer-btn{
  background:none;border:none;
  color:var(--text-secondary,#a0a0b8);cursor:pointer;
  padding:6px;border-radius:6px;flex-shrink:0;
  transition:color .12s,background .12s;
}
.chat-composer-btn:hover{color:var(--text-primary,#e0e0f0);background:rgba(255,255,255,.06);}
.chat-attach-label{
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.chat-input{
  flex:1;resize:none;
  padding:8px 12px;min-height:36px;max-height:120px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;color:var(--text-primary,#e0e0f0);
  font-size:14px;font-family:inherit;
  outline:none;transition:border-color .15s;
  scrollbar-width:thin;
}
.chat-input:focus{border-color:var(--accent,#6366f1);}
.chat-input::placeholder{color:var(--text-secondary,#a0a0b8);}
.chat-send-btn{
  background:var(--accent,#6366f1);border:none;
  color:#fff;padding:8px;border-radius:8px;
  cursor:pointer;flex-shrink:0;
  transition:opacity .12s,transform .12s;
}
.chat-send-btn:disabled{opacity:.35;cursor:default;}
.chat-send-btn:not(:disabled):hover{transform:scale(1.05);}

/* --- Emoji Picker --- */
.chat-emoji-picker{
  border-top:1px solid rgba(255,255,255,.06);
  padding:8px 12px;background:rgba(255,255,255,.02);
  max-height:180px;overflow-y:auto;
  scrollbar-width:thin;
}
.chat-emoji-grid{
  display:grid;grid-template-columns:repeat(10,1fr);gap:2px;
}
.chat-emoji-item{
  background:none;border:none;
  font-size:20px;padding:4px;cursor:pointer;
  border-radius:6px;transition:background .1s;
  line-height:1;
}
.chat-emoji-item:hover{background:rgba(255,255,255,.08);}

/* --- Responsive: mobile --- */
@media(max-width:768px){
  .chat-container{
    flex-direction:column;height:calc(100vh - 80px);
    max-height:none;
  }
  .chat-inbox{
    width:100%;max-width:none;min-width:0;
    border-right:none;border-bottom:1px solid rgba(255,255,255,.06);
  }
  .chat-conversation[hidden]~.chat-inbox{display:flex;}
  .chat-inbox[hidden]{display:none !important;}
  .chat-back-btn{display:flex;}
  .chat-bubble{max-width:85%;}
  .chat-emoji-grid{grid-template-columns:repeat(8,1fr);}
}

/* ===== ADMIN CHATS ===== */
.admin-chats-container{padding:0;}
.admin-chats-header{margin-bottom:16px;}
.admin-chats-header h3{margin:0 0 8px;}
.admin-chats-search-row{display:flex;gap:8px;align-items:center;}
.admin-chats-search{flex:1;max-width:320px;}
.admin-chats-loading,.admin-chats-empty{
  padding:24px 0;text-align:center;
  color:var(--text-secondary,#a0a0b8);font-size:13px;
}
.admin-chats-table{
  width:100%;border-collapse:collapse;font-size:13px;
}
.admin-chats-table th{
  text-align:left;padding:8px 10px;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:var(--text-secondary,#a0a0b8);font-weight:600;font-size:12px;
}
.admin-chats-table td{
  padding:8px 10px;
  border-bottom:1px solid rgba(255,255,255,.04);
  vertical-align:middle;
}
.admin-chats-cell-participants{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.admin-chats-cell-preview{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary,#a0a0b8);}
.admin-chats-status{
  display:inline-block;padding:2px 8px;border-radius:6px;
  font-size:11px;font-weight:600;
  background:rgba(255,255,255,.06);
}
.admin-chats-status-active{color:#34d399;background:rgba(52,211,153,.1);}
.admin-chats-status-request{color:#fbbf24;background:rgba(251,191,36,.1);}
.admin-chats-status-blocked{color:#ef4444;background:rgba(239,68,68,.1);}

.admin-chat-detail{padding:0;}
.admin-chat-detail-header{
  display:flex;align-items:center;gap:12px;margin-bottom:12px;
}
.admin-chat-detail-title{
  flex:1;font-weight:600;font-size:14px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.admin-chat-detail-info{
  padding:12px;border-radius:8px;
  background:rgba(255,255,255,.03);margin-bottom:12px;
  font-size:13px;
}
.admin-chat-info-row{margin-bottom:4px;}
.admin-chat-participant{
  display:inline-block;padding:2px 8px;border-radius:6px;
  background:rgba(99,102,241,.1);color:var(--accent,#6366f1);
  font-size:12px;font-weight:500;
}
.admin-chat-messages{
  max-height:400px;overflow-y:auto;
  padding:8px;border-radius:8px;
  background:rgba(255,255,255,.02);
  scrollbar-width:thin;
}
.admin-chat-msg{
  padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.04);
}
.admin-chat-msg:last-child{border-bottom:none;}
.admin-chat-msg-header{
  display:flex;align-items:center;gap:8px;margin-bottom:2px;
}
.admin-chat-msg-time{font-size:11px;color:var(--text-secondary,#a0a0b8);}
.admin-chat-msg-body{font-size:13px;color:var(--text-primary,#e0e0f0);}

/* ════════════════════════════════════════════════════════════════════════════
   MONETIZATION — Coin Pill (sidebar nav)
   ════════════════════════════════════════════════════════════════════════════ */

.app-nav-coin-pill{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:rgba(251,191,36,.10); border:1px solid rgba(251,191,36,.22);
  color:rgba(251,191,36,.95); border-radius:999px;
  padding:6px 12px; font-size:13px; font-weight:700;
  cursor:pointer; transition:background .16s ease, border-color .16s ease;
  margin:8px auto; width:auto; max-width:fit-content;
}
.app-nav-coin-pill:hover{
  background:rgba(251,191,36,.18); border-color:rgba(251,191,36,.38);
}
.app-nav-coin-pill svg{ width:16px; height:16px; flex-shrink:0; }
.nav-coin-pill{
  font-weight:800; font-size:13px; letter-spacing:.3px;
  text-align:center; display:inline-block;
}
.app-nav-coin-pill img{ width:16px; height:16px; flex-shrink:0; border-radius:50%; object-fit:cover; }

/* ════════════════════════════════════════════════════════════════════════════
   MONETIZATION — Coin Drawer
   ════════════════════════════════════════════════════════════════════════════ */

.coin-drawer-overlay{
  position:fixed; inset:0; z-index:900;
  background:rgba(0,0,0,.50);
  display:flex; justify-content:flex-end;
  animation:coin-fade-in .2s ease;
}
@keyframes coin-fade-in{ from{opacity:0} to{opacity:1} }

.coin-drawer{
  position:relative; width:min(420px, 92vw); height:100%;
  background:var(--bg-card, #1a1a2e);
  border-left:1px solid rgba(255,255,255,.08);
  display:flex; flex-direction:column;
  animation:coin-slide-in .25s ease;
  overflow:hidden;
}
@keyframes coin-slide-in{ from{transform:translateX(100%)} to{transform:none} }

.coin-drawer-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px 14px; border-bottom:1px solid rgba(255,255,255,.06);
}
.coin-drawer-header h3{ margin:0; font-size:17px; font-weight:800; }

.coin-drawer-close-btn{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.65);
  cursor:pointer;
  transition:background .16s ease, border-color .16s ease, color .16s ease, transform .1s ease;
  flex-shrink:0;
}
.coin-drawer-close-btn:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.18);
  color:rgba(255,255,255,.95);
}
.coin-drawer-close-btn:active{ transform:scale(.92); }
.coin-drawer-close-btn svg{ display:block; }

.coin-drawer-balance{
  display:flex; align-items:center; gap:10px;
  padding:18px 20px; background:rgba(251,191,36,.06);
  border-bottom:1px solid rgba(255,255,255,.04);
}
img.coin-drawer-balance-icon{ width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.coin-drawer-balance-amount{
  font-size:28px; font-weight:900; color:#fbbf24;
  letter-spacing:.5px;
}
.coin-drawer-balance-label{
  font-size:13px; color:rgba(255,255,255,.55); font-weight:600;
}

.coin-drawer-frozen{ margin:10px 20px 0; }

.coin-drawer-tabs{
  display:flex; gap:0; border-bottom:1px solid rgba(255,255,255,.06);
}
.coin-drawer-tab{
  flex:1; padding:10px 0; text-align:center;
  font-size:13px; font-weight:700; color:rgba(255,255,255,.55);
  background:none; border:none; cursor:pointer;
  border-bottom:2px solid transparent;
  transition:color .16s ease, border-color .16s ease;
}
.coin-drawer-tab:hover{ color:rgba(255,255,255,.82); }
.coin-drawer-tab.active{
  color:#fbbf24; border-bottom-color:#fbbf24;
}

.coin-drawer-content{
  flex:1; overflow-y:auto; padding:16px 20px;
  scrollbar-width:thin;
}

.coin-drawer-status{
  padding:8px 20px; font-size:12px;
  color:rgba(255,255,255,.6); min-height:20px;
}

.coin-drawer-mock-notice{
  margin-top:12px; font-size:12px;
  border:1px dashed rgba(251,191,36,.25);
  background:rgba(251,191,36,.05);
  border-radius:10px; padding:10px 14px;
  color:rgba(251,191,36,.85);
}

/* ── Coin Restricted Notice (minor / frozen) ── */

.coin-restricted-notice{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:36px 20px 28px; gap:12px;
}
.coin-restricted-icon{
  display:flex; align-items:center; justify-content:center;
  width:72px; height:72px; border-radius:50%;
  background:rgba(251,191,36,.08);
  margin-bottom:4px;
}
.coin-restricted-icon svg{ display:block; }
.coin-restricted-title{
  margin:0; font-size:16px; font-weight:800;
  color:rgba(255,255,255,.92);
}
.coin-restricted-desc{
  margin:0; font-size:13px; line-height:1.55;
  color:rgba(255,255,255,.55); max-width:300px;
}
.coin-restricted-reasons{
  list-style:none; margin:8px 0 0; padding:0;
  display:flex; flex-direction:column; gap:6px;
}
.coin-restricted-reasons li{
  font-size:12px; font-weight:600;
  color:rgba(251,191,36,.85);
  background:rgba(251,191,36,.08);
  border:1px solid rgba(251,191,36,.18);
  border-radius:8px; padding:6px 14px;
}

/* ── Coin Packs Grid ── */

.coin-packs-grid{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:10px;
}
@media(max-width:400px){ .coin-packs-grid{ grid-template-columns:1fr; } }

.coin-pack-card{
  display:flex; flex-direction:column; align-items:center;
  gap:8px; padding:14px 10px 16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px; cursor:pointer;
  transition:background .16s ease, border-color .16s ease, transform .12s ease;
}
.coin-pack-card:hover{
  background:rgba(251,191,36,.08);
  border-color:rgba(251,191,36,.30);
  transform:translateY(-2px);
}

.coin-pack-img{
  object-fit:contain; border-radius:12px;
  filter:drop-shadow(0 4px 12px rgba(251,191,36,.15));
  transition:transform .2s ease;
}
.coin-pack-img.tier-1{ width:52px; height:52px; }
.coin-pack-img.tier-2{ width:60px; height:60px; }
.coin-pack-img.tier-3{ width:66px; height:66px; }
.coin-pack-img.tier-4{ width:72px; height:72px; }
.coin-pack-card:hover .coin-pack-img{ transform:scale(1.08) rotate(-3deg); }
.coin-pack-coins{
  display:flex; align-items:center; gap:6px;
}
.coin-pack-amount{
  font-size:20px; font-weight:900; color:#fbbf24;
}
.coin-pack-bonus{
  font-size:11px; font-weight:700; color:#34d399;
  background:rgba(34,197,94,.12); padding:2px 7px;
  border-radius:999px;
}
.coin-pack-price{
  font-size:14px; font-weight:700; color:rgba(255,255,255,.82);
}
.coin-pack-mock{
  font-size:10px; padding:2px 8px; margin-top:2px;
  border:1px dashed rgba(251,191,36,.25);
  background:rgba(251,191,36,.06);
  border-radius:6px; color:rgba(251,191,36,.75);
}

/* ── Coin History ── */

.coin-history-list{
  display:flex; flex-direction:column; gap:6px;
}
.coin-history-entry{
  padding:10px 12px; border-radius:10px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
}
.coin-history-entry.coin-history-positive{
  border-left:3px solid rgba(34,197,94,.50);
}
.coin-history-entry.coin-history-negative{
  border-left:3px solid rgba(248,113,113,.50);
}
.coin-history-main{
  display:flex; align-items:center; gap:8px;
  margin-bottom:4px;
}
.coin-history-type{
  font-size:12px; font-weight:700; color:rgba(255,255,255,.85);
}
.coin-history-reason{
  font-size:11px; color:rgba(255,255,255,.45);
}
.coin-history-meta{
  display:flex; align-items:center; gap:12px;
  font-size:11px; color:rgba(255,255,255,.50);
}
.coin-history-amount{
  font-weight:800; font-size:13px;
}
.coin-history-positive .coin-history-amount{ color:#34d399; }
.coin-history-negative .coin-history-amount{ color:#f87171; }
.coin-history-date{ white-space:nowrap; }
.coin-history-balance{ white-space:nowrap; color:rgba(255,255,255,.40); }

.coin-history-loading{
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:14px; padding:40px 0;
}
.coin-history-loading-text{
  margin:0; font-size:13px; color:rgba(255,255,255,.50); font-weight:600;
}

/* ── Coin Usage Info (collapsible) ── */
.coin-usage-info{
  margin-bottom:16px;
  background:rgba(96,165,250,.05);
  border:1px solid rgba(96,165,250,.12);
  border-radius:12px;
}
.coin-usage-toggle{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; cursor:pointer;
  list-style:none;
}
.coin-usage-toggle::-webkit-details-marker{ display:none; }
.coin-usage-toggle::marker{ display:none; content:""; }
.coin-usage-chevron{
  flex-shrink:0; color:rgba(255,255,255,.45);
  transition:transform .2s ease;
}
.coin-usage-info[open] .coin-usage-chevron{
  transform:rotate(180deg);
}
.coin-usage-title{
  margin:0; font-size:14px; font-weight:800;
  color:rgba(255,255,255,.90);
}
.coin-usage-desc{
  margin:0 0 8px; padding:0 16px; font-size:12px; color:rgba(255,255,255,.55); line-height:1.5;
}
.coin-usage-list{
  margin:0 0 14px; padding-left:34px; font-size:12px; color:rgba(255,255,255,.70);
  line-height:1.7; list-style:disc;
}

/* ── Coin Legal Checkbox ── */
.coin-legal-section{
  margin-top:16px; padding:12px 14px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
}
.coin-legal-label{
  display:flex; align-items:flex-start; gap:10px;
  cursor:pointer; font-size:11px; color:rgba(255,255,255,.55); line-height:1.5;
}
.coin-legal-check{
  margin-top:2px; flex-shrink:0;
  accent-color:#fbbf24;
}
.coin-legal-text{
  user-select:none;
}
@keyframes coinLegalShake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(5px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(3px)}
}
.coin-legal-shake{
  animation:coinLegalShake .5s ease;
}

/* ── Coin Purchase Overlay ── */
.coin-purchase-overlay{
  position:absolute; inset:0; z-index:10;
  background:rgba(11,18,32,.85);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  animation:coin-fade-in .2s ease;
}
.coin-purchase-overlay-inner{
  display:flex; flex-direction:column; align-items:center; gap:16px;
}
.coin-purchase-overlay-text{
  margin:0; font-size:14px; font-weight:700;
  color:rgba(251,191,36,.90);
  letter-spacing:.2px;
}

/* ════════════════════════════════════════════════════════════════════════════
   MONETIZATION — Writer Rank Panel
   ════════════════════════════════════════════════════════════════════════════ */

.writer-rank-panel{
  max-width:640px;
}
.writer-rank-panel h3{
  font-size:18px; font-weight:900; margin-bottom:14px;
}
.writer-rank-panel h4{
  font-size:14px; font-weight:800; margin-top:20px; margin-bottom:10px;
}

.writer-rank-badge-wrap{
  display:flex; justify-content:center; margin-bottom:16px;
}
.writer-rank-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 22px; border-radius:999px;
  font-size:14px; font-weight:800; letter-spacing:.4px;
  text-transform:uppercase;
  border:2px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.04);
}
.writer-rank-novice{ border-color:rgba(148,163,184,.40); color:#94a3b8; }
.writer-rank-active{ border-color:rgba(96,165,250,.40); color:#60a5fa; }
.writer-rank-verified{ border-color:rgba(52,211,153,.40); color:#34d399; }
.writer-rank-pro{ border-color:rgba(251,191,36,.40); color:#fbbf24; }
.writer-rank-elite{ border-color:rgba(244,114,182,.40); color:#f472b6; background:rgba(244,114,182,.06); }

.writer-rank-stats{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:10px; margin-bottom:16px;
}
@media(max-width:480px){ .writer-rank-stats{ grid-template-columns:1fr; } }

.writer-rank-stat{
  display:flex; flex-direction:column; align-items:center;
  padding:12px 10px; border-radius:12px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}
.writer-rank-stat-value{
  font-size:20px; font-weight:900;
}
.writer-rank-stat-label{
  font-size:11px; color:rgba(255,255,255,.55); margin-top:4px;
  font-weight:600; text-transform:uppercase; letter-spacing:.3px;
}

/* ── Progress bar ── */

.writer-rank-progress{
  margin-bottom:16px;
}
.writer-rank-progress-label{
  font-size:12px; color:rgba(255,255,255,.65); margin-bottom:6px;
}
.writer-rank-progress-bar-wrap{
  height:8px; background:rgba(255,255,255,.08);
  border-radius:999px; overflow:hidden;
}
.writer-rank-progress-bar{
  height:100%; border-radius:999px;
  background:linear-gradient(90deg, #6366f1, #8b5cf6);
  transition:width .4s ease;
}
.writer-rank-progress-pct{
  font-size:11px; font-weight:700; color:rgba(255,255,255,.55);
  margin-top:4px; text-align:right;
}
.writer-rank-max{
  text-align:center; margin-bottom:16px;
}

/* ── Writer Earnings ── */

.writer-earnings-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:10px; margin-bottom:14px;
}
@media(max-width:520px){ .writer-earnings-grid{ grid-template-columns:1fr; } }

.writer-earnings-card{
  display:flex; flex-direction:column; align-items:center;
  padding:14px 10px; border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
}
.writer-earnings-pending{ border-color:rgba(251,191,36,.20); }
.writer-earnings-available{ border-color:rgba(34,197,94,.20); }
.writer-earnings-paid{ border-color:rgba(96,165,250,.20); }

.writer-earnings-value{
  font-size:20px; font-weight:900; margin-bottom:4px;
}
.writer-earnings-pending .writer-earnings-value{ color:#fbbf24; }
.writer-earnings-available .writer-earnings-value{ color:#34d399; }
.writer-earnings-paid .writer-earnings-value{ color:#60a5fa; }

.writer-earnings-label{
  font-size:11px; font-weight:700; color:rgba(255,255,255,.55);
  text-transform:uppercase; letter-spacing:.3px;
}
.writer-earnings-hint{
  font-size:10px; color:rgba(255,255,255,.35);
  margin-top:4px; text-align:center;
}

.writer-payout-reasons{
  margin-bottom:12px;
}
.writer-payout-eligible{
  margin-bottom:12px;
}

.writer-earnings-detail-btn{
  margin-bottom:12px;
}
.writer-earnings-table-wrap{
  overflow-x:auto; margin-top:8px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
}
.writer-earnings-table{
  min-width:420px;
}
.writer-earnings-neg td{ color:rgba(248,113,113,.85); }
.writer-earnings-pos td{ color:rgba(34,197,94,.85); }

/* ════════════════════════════════════════════════════════════════════════════
   MONETIZATION — Admin Panel
   ════════════════════════════════════════════════════════════════════════════ */

.admin-monetization-subtabs{
  display:flex; gap:8px; flex-wrap:wrap;
  margin:14px 0 18px;
}
.admin-monet-subtab{
  border-radius:999px !important;
  padding:7px 16px !important; font-size:12px !important;
}
.admin-monet-subtab.active{
  background:rgba(251,191,36,.15) !important;
  border-color:rgba(251,191,36,.45) !important;
  color:#fbbf24 !important;
}

.admin-monet-config-summary{
  margin-top:14px; padding:12px 14px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px; font-size:12px;
  color:rgba(255,255,255,.65); line-height:1.6;
  word-break:break-all;
}

.admin-monet-risk-list{
  display:flex; flex-direction:column; gap:6px;
  margin-top:8px;
}
.admin-monet-risk-item{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:10px;
  background:rgba(248,113,113,.04);
  border:1px solid rgba(248,113,113,.12);
  font-size:12px;
}

/* ── Lookup ── */

.admin-monet-lookup-form{
  display:flex; gap:10px; align-items:center;
  margin-bottom:14px;
}
.admin-monet-lookup-form .input{ flex:1; min-width:180px; }

.admin-monet-lookup-card{
  padding:14px 16px; border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
  margin-bottom:14px;
}
.admin-monet-lookup-card h4{ margin:0 0 8px; font-size:13px; }

.admin-monet-lookup-row{
  display:flex; align-items:center; gap:14px;
  flex-wrap:wrap; font-size:13px;
  margin-bottom:10px;
}

.admin-monet-lookup-actions{
  display:flex; gap:10px; flex-wrap:wrap;
}

/* ── Adjust form ── */

.admin-monet-adjust-form{
  display:flex; flex-direction:column; gap:8px;
  margin-bottom:12px;
}
.admin-monet-adjust-form label{
  font-size:12px; font-weight:700; color:rgba(255,255,255,.55);
}

/* ── Config Editor ── */

.admin-monet-config-form{
  display:flex; flex-direction:column; gap:10px;
  max-width:420px;
}
.admin-monet-config-row{
  display:flex; flex-direction:column; gap:4px;
}
.admin-monet-config-row label{
  font-size:12px; font-weight:700; color:rgba(255,255,255,.55);
}
.admin-monet-config-row .input{
  max-width:240px;
}

/* ── Payouts ── */

.admin-monet-payouts{
  max-width:520px;
}
.admin-monet-payouts-summary{
  display:flex; gap:18px; flex-wrap:wrap;
  margin:12px 0; font-size:13px;
}

/* ════════════════════════════════════════════════════════════════════════════
   MARKETPLACE — Admin Panel subtabs
   ════════════════════════════════════════════════════════════════════════════ */

.admin-mkp-subtab{
  border-radius:999px !important;
  padding:7px 16px !important; font-size:12px !important;
}
.admin-mkp-subtab.active{
  background:rgba(34,197,94,.12) !important;
  border-color:rgba(34,197,94,.4) !important;
  color:#4ade80 !important;
}
.admin-mkp-section{animation:adminPanelIn .25s ease both}

/* ════════════════════════════════════════════════════════════════════════════
   CAROUSEL — Admin Panel (2026 style)
   ════════════════════════════════════════════════════════════════════════════ */

.admin-carousel-subtab{
  border-radius:8px !important;
  padding:6px 14px !important; font-size:11.5px !important;
}
.admin-carousel-subtab.active{
  background:rgba(168,85,247,.14) !important;
  border-color:rgba(168,85,247,.4) !important;
  color:#c084fc !important;
}

.admin-carousel-hero{
  margin:16px 0; padding:18px 20px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(168,85,247,.06) 0%,rgba(59,130,246,.04) 100%);
  border:1px solid rgba(168,85,247,.12);
}
.admin-carousel-hero-title{
  font-size:14px; font-weight:800; color:rgba(255,255,255,.92);
  margin:0 0 6px; display:flex; align-items:center; gap:8px;
}
.admin-carousel-hero-desc{
  font-size:12px; color:rgba(255,255,255,.55); line-height:1.55; margin:0;
}

.admin-carousel-badge{
  display:inline-block; padding:2px 8px; border-radius:6px;
  font-size:10.5px; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
}
.admin-carousel-status--active{background:rgba(34,197,94,.12); color:#4ade80; border:1px solid rgba(34,197,94,.25)}
.admin-carousel-status--paused{background:rgba(251,191,36,.1); color:#fbbf24; border:1px solid rgba(251,191,36,.2)}
.admin-carousel-status--expired{background:rgba(255,255,255,.04); color:rgba(255,255,255,.4); border:1px solid rgba(255,255,255,.08)}
.admin-carousel-status--cancelled{background:rgba(248,113,113,.08); color:#f87171; border:1px solid rgba(248,113,113,.18)}

.admin-carousel-actions{display:flex; gap:4px; flex-wrap:wrap}
.admin-carousel-actions .btn{padding:3px 8px; font-size:10.5px; border-radius:6px}

.admin-carousel-filters{margin:12px 0; display:flex; gap:5px; flex-wrap:wrap}
.admin-carousel-filters .btn{padding:4px 10px; font-size:10.5px; border-radius:6px}

/* ═══ Feature Flags ═══ */
.admin-ff-header{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.admin-ff-header svg{color:#f59e0b; flex-shrink:0}
.admin-ff-header h4{margin:0}

.admin-ff-list{
  display:flex; flex-direction:column; gap:0;
  margin:14px 0 18px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  overflow:hidden;
}
.admin-ff-item{
  padding:14px 18px;
  background:rgba(255,255,255,.02);
  transition:background .15s, border-color .2s, box-shadow .2s;
  border-left:3px solid transparent;
}
.admin-ff-item + .admin-ff-item{border-top:1px solid rgba(255,255,255,.04)}
.admin-ff-item:nth-child(even){background:rgba(255,255,255,.03)}
.admin-ff-item:hover{background:rgba(255,255,255,.055)}

/* Disabled state: danger indicator */
.admin-ff-item[data-ff-disabled="true"]{
  border-left-color:rgba(239,68,68,.5);
  background:rgba(239,68,68,.04);
}
.admin-ff-item[data-ff-disabled="true"]:hover{background:rgba(239,68,68,.07)}
.admin-ff-item[data-ff-disabled="true"] .admin-ff-label{
  color:rgba(255,255,255,.45);
}
.admin-ff-item[data-ff-disabled="true"] .admin-ff-status{
  display:inline-flex;
}

.admin-ff-toggle{display:flex; align-items:center; gap:12px}

/* Premium toggle switch */
.admin-ff-switch{
  position:relative; display:inline-block;
  width:40px; height:22px; flex-shrink:0;
}
.admin-ff-switch input{opacity:0; width:0; height:0; position:absolute}
.admin-ff-slider{
  position:absolute; inset:0; cursor:pointer;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  transition:background .2s, border-color .2s, box-shadow .2s;
}
.admin-ff-slider::before{
  content:""; position:absolute;
  left:2px; top:2px;
  width:16px; height:16px;
  border-radius:50%;
  background:rgba(255,255,255,.55);
  transition:transform .2s cubic-bezier(.4,.0,.2,1), background .2s;
}
.admin-ff-switch input:checked + .admin-ff-slider{
  background:rgba(74,222,128,.2);
  border-color:rgba(74,222,128,.3);
}
.admin-ff-switch input:checked + .admin-ff-slider::before{
  transform:translateX(18px);
  background:#4ade80;
}
.admin-ff-switch input:focus-visible + .admin-ff-slider{
  box-shadow:0 0 0 3px rgba(96,165,250,.25);
}
/* Danger state for unchecked */
.admin-ff-switch input:not(:checked) + .admin-ff-slider{
  background:rgba(239,68,68,.12);
  border-color:rgba(239,68,68,.2);
}
.admin-ff-switch input:not(:checked) + .admin-ff-slider::before{
  background:rgba(248,113,113,.8);
}

.admin-ff-label-wrap{display:flex; align-items:center; gap:8px; flex:1; min-width:0}
.admin-ff-icon{
  flex-shrink:0; color:rgba(255,255,255,.35);
  display:flex; align-items:center;
}
.admin-ff-item[data-ff-disabled="true"] .admin-ff-icon{color:rgba(239,68,68,.45)}
.admin-ff-label{
  font-weight:600; font-size:13.5px; cursor:pointer;
  user-select:none; transition:color .15s;
}
.admin-ff-status{
  display:none;
  align-items:center; gap:4px;
  font-size:10px; font-weight:700; letter-spacing:.3px;
  color:rgba(248,113,113,.85);
  background:rgba(239,68,68,.1);
  border:1px solid rgba(239,68,68,.15);
  border-radius:6px; padding:2px 7px;
  text-transform:uppercase;
  white-space:nowrap;
}
.admin-ff-hint{
  margin:6px 0 0 52px;
  font-size:11.5px; color:rgba(255,255,255,.38);
  line-height:1.5;
}
.admin-ff-item[data-ff-disabled="true"] .admin-ff-hint{color:rgba(255,255,255,.28)}
.admin-ff-updated{
  margin:0 0 10px;
  font-size:11px; color:rgba(255,255,255,.3);
  display:flex; align-items:center; gap:6px;
}
.admin-ff-updated svg{flex-shrink:0; opacity:.5}

.carousel-progress-wrap{
  width:100%; height:5px; border-radius:3px;
  background:rgba(255,255,255,.06); overflow:hidden;
}
.carousel-progress-bar{
  height:100%; border-radius:3px;
  transition:width .3s ease;
}
.carousel-progress-label{
  font-size:10.5px; color:rgba(255,255,255,.5);
  margin-top:3px; white-space:nowrap;
}

/* ════════════════════════════════════════════════════════════════════════════
   COIN RANKING — Expandable overlay panel
   ════════════════════════════════════════════════════════════════════════════ */

.admin-kpi--clickable{cursor:pointer; position:relative; transition:border-color .18s, box-shadow .18s}
.admin-kpi--clickable:hover{border-color:rgba(59,130,246,.3); box-shadow:0 0 16px rgba(59,130,246,.08)}
.admin-kpi--clickable::after{content:'▾'; position:absolute; bottom:6px; right:8px; font-size:9px; color:rgba(255,255,255,.25)}

.coin-ranking-overlay{
  position:fixed; inset:0; z-index:900;
  background:rgba(0,0,0,.6); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  animation:coinRankIn .2s ease both;
}
@keyframes coinRankIn{from{opacity:0} to{opacity:1}}

.coin-ranking-panel{
  width:min(580px,92vw); max-height:80vh;
  background:linear-gradient(168deg,rgba(15,23,42,.98) 0%,rgba(11,18,32,.99) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.5);
  display:flex; flex-direction:column;
}
.coin-ranking-header{
  padding:16px 20px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.coin-ranking-header h3{margin:0; font-size:15px; font-weight:800; color:rgba(255,255,255,.92)}
.coin-ranking-close{
  background:none; border:none; color:rgba(255,255,255,.5); font-size:20px;
  cursor:pointer; padding:4px 8px; border-radius:6px; transition:color .15s;
}
.coin-ranking-close:hover{color:#fff}

.coin-ranking-body{
  overflow-y:auto; flex:1; padding:0;
}
.coin-ranking-table{width:100%; border-collapse:separate; border-spacing:0}
.coin-ranking-table thead th{
  position:sticky; top:0; z-index:2;
  background:rgba(15,23,42,.97);
  text-align:left; font-size:10.5px; color:rgba(255,255,255,.45);
  padding:10px 14px; border-bottom:1px solid rgba(255,255,255,.06);
  text-transform:uppercase; letter-spacing:.4px; font-weight:700;
}
.coin-ranking-table tbody td{
  padding:9px 14px; border-bottom:1px solid rgba(255,255,255,.03);
  font-size:12.5px; color:rgba(255,255,255,.8);
}
.coin-ranking-table tbody tr:hover{background:rgba(59,130,246,.04)}
.coin-ranking-table .rank-num{font-weight:800; color:rgba(255,255,255,.35); font-size:11px; width:32px}
.coin-ranking-table .rank-handle{font-weight:700}

.coin-ranking-loader{
  text-align:center; padding:16px; font-size:12px; color:rgba(255,255,255,.4);
}
.coin-ranking-empty{
  text-align:center; padding:32px 16px; font-size:13px; color:rgba(255,255,255,.35);
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOOD MAP — Floating bar, summary modal, badges
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Mood color variables ─────────────────────────────────────────────────── */
:root{
  --mood-tense:#f59e0b;
  --mood-sad:#60a5fa;
  --mood-happy:#fbbf24;
  --mood-romantic:#f472b6;
  --mood-epic:#a78bfa;
  --mood-funny:#34d399;
  --mood-scary:#6b7280;
  --mood-mindblown:#fb923c;
}

/* ── Mood Bar (floating bottom bar on read page) ──────────────────────────── */
.mood-bar-root{
  position:fixed;
  bottom:16px;
  left:50%;
  transform:translateX(-50%) translateY(20px);
  z-index:900;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.mood-bar-root--visible{
  opacity:1;
  transform:translateX(-50%) translateY(0);
  pointer-events:auto;
}
.mood-bar-inner{
  display:flex;
  gap:4px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(15,23,42,.92);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 8px 32px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04);
}
.mood-bar-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:8px 10px 6px;
  border:none;
  background:transparent;
  border-radius:12px;
  cursor:pointer;
  transition:background .15s, transform .15s;
  color:rgba(255,255,255,.55);
  position:relative;
}
.mood-bar-btn:hover{
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.85);
}
.mood-bar-btn.active{
  background:color-mix(in srgb, var(--mood-c) 18%, transparent);
  color:var(--mood-c);
}
.mood-bar-btn.active .mood-bar-btn-icon svg{
  stroke:var(--mood-c);
  filter:drop-shadow(0 0 6px color-mix(in srgb, var(--mood-c) 40%, transparent));
}
.mood-bar-btn-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
}
.mood-bar-btn-icon svg{
  width:20px;
  height:20px;
  transition:stroke .15s, filter .15s;
}
.mood-bar-btn-label{
  font-size:9px;
  font-weight:600;
  letter-spacing:.02em;
  white-space:nowrap;
  opacity:.7;
  transition:opacity .15s;
}
.mood-bar-btn:hover .mood-bar-btn-label,
.mood-bar-btn.active .mood-bar-btn-label{
  opacity:1;
}

/* Pulse animation on tap */
.mood-bar-btn--pulse{
  animation:moodPulse .4s ease;
}
@keyframes moodPulse{
  0%{transform:scale(1)}
  30%{transform:scale(1.2)}
  60%{transform:scale(.95)}
  100%{transform:scale(1)}
}

/* ── Mood Summary Modal (post-chapter) ────────────────────────────────────── */
.mood-summary-backdrop{
  position:fixed;
  inset:0;
  z-index:1050;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  opacity:0;
  transition:opacity .3s ease;
}
.mood-summary-backdrop--visible{
  opacity:1;
}
.mood-summary-root{
  position:fixed;
  bottom:0;
  left:50%;
  transform:translateX(-50%) translateY(100%);
  z-index:1051;
  width:min(420px, calc(100vw - 32px));
  max-height:80vh;
  overflow-y:auto;
  border-radius:20px 20px 0 0;
  background:rgba(15,23,42,.97);
  backdrop-filter:blur(20px) saturate(1.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  border:1px solid rgba(255,255,255,.08);
  border-bottom:none;
  box-shadow:0 -8px 40px rgba(0,0,0,.5);
  transition:transform .35s cubic-bezier(.22,1,.36,1), opacity .3s ease;
  opacity:0;
}
.mood-summary-root--visible{
  transform:translateX(-50%) translateY(0);
  opacity:1;
}
.mood-summary-inner{
  padding:28px 24px 32px;
}
.mood-summary-title{
  font-size:18px;
  font-weight:800;
  color:rgba(255,255,255,.92);
  margin:0 0 6px;
  text-align:center;
}
.mood-summary-hint{
  font-size:12.5px;
  color:rgba(255,255,255,.45);
  text-align:center;
  margin:0 0 20px;
}
.mood-summary-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
  margin:0 0 24px;
}
.mood-summary-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:14px 8px 12px;
  border:1.5px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  border-radius:14px;
  cursor:pointer;
  transition:background .15s, border-color .15s, transform .15s, box-shadow .15s;
  color:rgba(255,255,255,.55);
}
.mood-summary-btn:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14);
}
.mood-summary-btn.active{
  background:color-mix(in srgb, var(--mood-c) 14%, transparent);
  border-color:color-mix(in srgb, var(--mood-c) 40%, transparent);
  color:var(--mood-c);
  box-shadow:0 0 12px color-mix(in srgb, var(--mood-c) 20%, transparent);
  transform:scale(1.04);
}
.mood-summary-btn.active .mood-summary-btn-icon svg{
  stroke:var(--mood-c);
  filter:drop-shadow(0 0 8px color-mix(in srgb, var(--mood-c) 35%, transparent));
}
.mood-summary-btn-icon{
  display:flex;
  align-items:center;
  justify-content:center;
}
.mood-summary-btn-icon svg{
  width:24px;
  height:24px;
  transition:stroke .15s, filter .15s;
}
.mood-summary-btn-label{
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.02em;
  white-space:nowrap;
}
.mood-summary-actions{
  display:flex;
  gap:10px;
  justify-content:center;
}
.mood-summary-submit{
  min-width:120px;
}
.mood-summary-skip{
  min-width:90px;
}

/* ── Mood Badges (reusable — feed, work-sheet, library) ───────────────────── */
.feed-mood-badges{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin:6px 0 0;
}
.feed-mood-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:11px;
  font-weight:600;
  padding:3px 8px;
  border-radius:999px;
  background:color-mix(in srgb, var(--mood-color) 12%, transparent);
  color:var(--mood-color);
  border:1px solid color-mix(in srgb, var(--mood-color) 18%, transparent);
}
.feed-mood-badge svg{width:12px; height:12px}

/* ── Mood Arc (work-sheet, feed) ──────────────────────────────────────────── */
.mood-arc{
  display:flex;
  align-items:center;
  gap:6px;
  margin:8px 0 4px;
  font-size:13px;
}
.mood-arc svg{width:18px; height:18px}
.mood-arc-arrow{
  color:rgba(255,255,255,.25);
  font-size:14px;
  font-weight:300;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media(max-width:600px){
  .mood-bar-root{
    bottom:8px;
    width:calc(100vw - 16px);
  }
  .mood-bar-inner{
    gap:2px;
    padding:5px 6px;
    justify-content:space-around;
  }
  .mood-bar-btn{
    padding:6px 4px 4px;
  }
  .mood-bar-btn-label{
    font-size:7.5px;
  }
  .mood-bar-btn-icon svg{
    width:18px;
    height:18px;
  }
  .mood-summary-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .mood-bar-root,
  .mood-summary-root,
  .mood-summary-backdrop{
    transition:none;
  }
  .mood-bar-btn--pulse{
    animation:none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOOD DASHBOARD — Author emotional stats (writer view)
   ══════════════════════════════════════════════════════════════════════════════ */

.mood-dashboard-root{
  margin:16px 0 0;
}

.mood-dash-section{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:20px;
}

.mood-dash-header{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 16px;
}
.mood-dash-icon{
  display:flex;
  align-items:center;
  color:rgba(255,255,255,.5);
}
.mood-dash-icon svg{
  width:18px;
  height:18px;
}
.mood-dash-title{
  font-size:15px;
  font-weight:700;
  color:rgba(255,255,255,.88);
}

.mood-dash-loading,
.mood-dash-empty{
  font-size:13px;
  color:rgba(255,255,255,.35);
  text-align:center;
  padding:12px 0;
}

/* ── Distribution bars ─────────────────────────────────────────────────── */
.mood-dash-distribution{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0 0 14px;
}
.mood-dash-bar-row{
  display:flex;
  align-items:center;
  gap:8px;
}
.mood-dash-bar-icon{
  display:flex;
  align-items:center;
  width:18px;
  flex-shrink:0;
}
.mood-dash-bar-icon svg{
  width:14px;
  height:14px;
}
.mood-dash-bar-label{
  font-size:12px;
  font-weight:600;
  color:rgba(255,255,255,.65);
  width:80px;
  flex-shrink:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mood-dash-bar-track{
  flex:1;
  height:8px;
  background:rgba(255,255,255,.06);
  border-radius:4px;
  overflow:hidden;
}
.mood-dash-bar-fill{
  height:100%;
  border-radius:4px;
  transition:width .4s ease;
}
.mood-dash-bar-pct{
  font-size:11px;
  font-weight:700;
  color:rgba(255,255,255,.45);
  width:32px;
  text-align:right;
  flex-shrink:0;
}

/* ── Stats line ────────────────────────────────────────────────────────── */
.mood-dash-stats{
  font-size:12.5px;
  color:rgba(255,255,255,.4);
  margin:0 0 14px;
}

/* ── Subtitle ──────────────────────────────────────────────────────────── */
.mood-dash-subtitle{
  font-size:13px;
  font-weight:700;
  color:rgba(255,255,255,.6);
  margin:0 0 8px;
}

/* ── Emotional arc ─────────────────────────────────────────────────────── */
.mood-dash-arc-section{
  margin:0 0 14px;
}
.mood-dash-arc{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.mood-dash-arc-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}
.mood-dash-arc-icon{
  display:flex;
  align-items:center;
}
.mood-dash-arc-icon svg{
  width:20px;
  height:20px;
}
.mood-dash-arc-mood{
  font-size:10px;
  font-weight:600;
  color:rgba(255,255,255,.7);
}
.mood-dash-arc-label{
  font-size:9px;
  color:rgba(255,255,255,.3);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.mood-dash-arc-arrow{
  color:rgba(255,255,255,.2);
  font-size:16px;
  font-weight:300;
  margin:0 2px;
  align-self:center;
}

/* ── Chapter heatmap list ──────────────────────────────────────────────── */
.mood-dash-chapter-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.mood-dash-toggle{
  font-size:12px;
  font-weight:600;
}
.mood-dash-chapters{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.mood-dash-chapter{
  border-radius:8px;
  overflow:hidden;
}
.mood-dash-chapter-row{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:8px 10px;
  border:none;
  background:rgba(255,255,255,.02);
  cursor:pointer;
  transition:background .15s;
  text-align:left;
  color:inherit;
  font:inherit;
}
.mood-dash-chapter-row:hover{
  background:rgba(255,255,255,.05);
}
.mood-dash-chapter-title{
  font-size:12px;
  font-weight:600;
  color:rgba(255,255,255,.65);
  width:100px;
  flex-shrink:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mood-dash-hm-row{
  display:flex;
  flex:1;
  gap:1px;
}
.mood-dash-hm-cell{
  flex:1;
  height:16px;
  border-radius:2px;
  min-width:0;
}
.mood-dash-chapter-count{
  font-size:11px;
  font-weight:700;
  color:rgba(255,255,255,.35);
  width:32px;
  text-align:right;
  flex-shrink:0;
}
.mood-dash-chapter-detail{
  padding:6px 10px 10px;
  background:rgba(255,255,255,.01);
}
.mood-dash-no-data{
  font-size:11px;
  color:rgba(255,255,255,.25);
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media(max-width:600px){
  .mood-dash-bar-label{
    width:60px;
    font-size:11px;
  }
  .mood-dash-chapter-title{
    width:70px;
    font-size:11px;
  }
  .mood-dash-hm-cell{
    height:12px;
  }
}

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .mood-dash-bar-fill{
    transition:none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOOD — Work Sheet: mood section (badges + distribution bars)
   ══════════════════════════════════════════════════════════════════════════════ */

.ws-mood-badges{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin:0 0 10px;
}
.ws-mood-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  color:var(--mood-color);
  background:color-mix(in srgb, var(--mood-color) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--mood-color) 20%, transparent);
}
.ws-mood-dist{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0 0 8px;
}
.ws-mood-dist-row{
  display:flex;
  align-items:center;
  gap:8px;
}
.ws-mood-dist-label{
  font-size:11.5px;
  font-weight:600;
  min-width:72px;
  text-align:right;
}
.ws-mood-dist-track{
  flex:1;
  height:6px;
  border-radius:3px;
  background:var(--surface-2, #2a2a2a);
  overflow:hidden;
}
.ws-mood-dist-fill{
  height:100%;
  border-radius:3px;
  transition:width .4s ease;
}
.ws-mood-dist-pct{
  font-size:11px;
  color:var(--text-3, #888);
  min-width:32px;
  text-align:right;
}
.ws-mood-reactions{
  font-size:12px;
  color:var(--text-3, #888);
  margin:2px 0 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOOD — Library Browse: emotion pills + mini badges on cards
   ══════════════════════════════════════════════════════════════════════════════ */

.browse-mood-pills{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  padding:0 0 8px;
}
.browse-mood-pill{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 10px;
  border-radius:20px;
  border:1px solid color-mix(in srgb, var(--mood-color) 30%, transparent);
  background:color-mix(in srgb, var(--mood-color) 8%, transparent);
  color:var(--mood-color);
  font-size:11.5px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s, border-color .15s;
}
.browse-mood-pill:hover{
  background:color-mix(in srgb, var(--mood-color) 16%, transparent);
  border-color:color-mix(in srgb, var(--mood-color) 50%, transparent);
}
.browse-mood-pill.active{
  background:color-mix(in srgb, var(--mood-color) 22%, transparent);
  border-color:var(--mood-color);
}

/* Mini mood badges on book cards */
.nfx-card-moods{
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  margin:3px 0 0;
}
.nfx-card-mood{
  display:inline-flex;
  align-items:center;
  padding:1px 6px;
  border-radius:8px;
  font-size:9.5px;
  font-weight:600;
  color:var(--mood-color);
  background:color-mix(in srgb, var(--mood-color) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--mood-color) 18%, transparent);
  line-height:1.4;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOURNAMENT — Premium 2026 UI
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Nav pill ─────────────────────────────────────────────────────────── */
.app-nav-tournament{ position:relative; }
.nav-tournament-pill{
  display:inline-block;
  font-size:10px; font-weight:700; line-height:1;
  padding:2px 7px; border-radius:10px;
  background:linear-gradient(135deg,#fbbf24,#f59e0b);
  color:#451a03;
  margin-left:6px;
  animation:trn-pill-pulse 2s ease-in-out infinite;
}
.nav-tournament-pill.is-live{
  background:linear-gradient(135deg,#ef4444,#dc2626);
  color:#fff;
  animation:trn-pill-pulse .8s ease-in-out infinite;
}
@keyframes trn-pill-pulse{
  0%,100%{ opacity:1; }
  50%{ opacity:.65; }
}

/* ── Page layout ──────────────────────────────────────────────────────── */
.trn-page{ max-width:860px; margin:0 auto; padding:0 0 48px; }
.trn-loading{ display:flex; flex-direction:column; align-items:center; gap:12px; padding:80px 0; color:rgba(255,255,255,.5); }
.trn-spinner{
  width:32px; height:32px; border:3px solid rgba(255,255,255,.1);
  border-top-color:#fbbf24; border-radius:50%;
  animation:trn-spin .7s linear infinite;
}
@keyframes trn-spin{ to{ transform:rotate(360deg); } }

/* ── Empty state ──────────────────────────────────────────────────────── */
.trn-empty{ text-align:center; padding:80px 24px; }
.trn-empty-icon{ margin-bottom:16px; color:#fbbf24; }
.trn-empty h2{ font-size:22px; font-weight:700; margin:0 0 8px; color:#e2e8f0; }
.trn-empty p{ font-size:14px; color:rgba(255,255,255,.45); margin:0; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.trn-hero{
  position:relative; overflow:hidden; border-radius:20px;
  background:linear-gradient(145deg,#1a1333 0%,#0f172a 50%,#1e1b4b 100%);
  padding:48px 32px 40px; text-align:center; margin-bottom:32px;
  border:1px solid rgba(251,191,36,.12);
}
.trn-hero-glow{
  position:absolute; top:-60%; left:50%; transform:translateX(-50%);
  width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle,rgba(251,191,36,.12) 0%,transparent 70%);
  pointer-events:none;
}
.trn-hero-content{ position:relative; z-index:1; }
.trn-hero-icon{ color:#fbbf24; margin-bottom:12px; }
.trn-hero-title{
  font-size:28px; font-weight:800; margin:0 0 8px;
  background:linear-gradient(135deg,#fbbf24,#f59e0b,#fcd34d);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.trn-hero-theme{ font-size:14px; color:rgba(255,255,255,.5); margin:0 0 20px; font-style:italic; }
.trn-hero-countdown{ font-size:14px; color:rgba(255,255,255,.6); }
.trn-hero-countdown-label{ margin-right:6px; }
.trn-hero-countdown-time{
  font-family:'SF Mono',ui-monospace,monospace; font-weight:700; font-size:16px;
  color:#fbbf24; letter-spacing:.5px;
}

/* ── Slot cards grid ──────────────────────────────────────────────────── */
.trn-slots-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:16px; margin-bottom:32px;
}
.trn-slot-card{
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:20px; transition:all .25s ease;
  display:flex; flex-direction:column; gap:14px;
}
.trn-slot-card:hover{ border-color:rgba(255,255,255,.15); background:rgba(255,255,255,.05); transform:translateY(-2px); }
.trn-slot-header{ display:flex; justify-content:space-between; align-items:center; }
.trn-slot-label{ font-size:13px; font-weight:700; color:#e2e8f0; text-transform:uppercase; letter-spacing:.5px; }
.trn-slot-status{
  font-size:11px; font-weight:600; padding:3px 10px; border-radius:20px;
  background:rgba(255,255,255,.06); color:rgba(255,255,255,.5);
}
.trn-slot--open .trn-slot-status{ background:rgba(34,197,94,.12); color:#4ade80; }
.trn-slot--joined .trn-slot-status{ background:rgba(59,130,246,.12); color:#60a5fa; }
.trn-slot--live .trn-slot-status{ background:rgba(239,68,68,.15); color:#f87171; animation:trn-pill-pulse .8s ease-in-out infinite; }
.trn-slot--voting .trn-slot-status{ background:rgba(168,85,247,.12); color:#c084fc; }
.trn-slot--finalized .trn-slot-status{ background:rgba(251,191,36,.12); color:#fbbf24; }
.trn-slot--cancelled .trn-slot-status{ background:rgba(255,255,255,.04); color:rgba(255,255,255,.3); text-decoration:line-through; }
.trn-slot--locked .trn-slot-status{ background:rgba(255,255,255,.04); color:rgba(255,255,255,.3); }
.trn-slot--full .trn-slot-status{ background:rgba(239,68,68,.08); color:#f87171; }

.trn-slot-body{ display:flex; flex-direction:column; gap:12px; }
.trn-slot-time{ display:flex; align-items:center; gap:10px; }
.trn-slot-time-icon{ color:rgba(255,255,255,.3); flex-shrink:0; }
.trn-slot-time-date{ font-size:12px; color:rgba(255,255,255,.45); }
.trn-slot-time-hour{ font-size:18px; font-weight:700; color:#e2e8f0; font-family:'SF Mono',ui-monospace,monospace; }
.trn-slot-stats{ display:flex; gap:20px; }
.trn-slot-stat{ display:flex; flex-direction:column; }
.trn-slot-stat-value{ font-size:16px; font-weight:700; color:#e2e8f0; }
.trn-slot-stat-label{ font-size:11px; color:rgba(255,255,255,.35); }
.trn-slot-footer{ margin-top:auto; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.trn-btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 24px; border-radius:12px; border:none; cursor:pointer;
  font-size:14px; font-weight:700; color:#451a03;
  background:linear-gradient(135deg,#fbbf24,#f59e0b);
  transition:all .2s ease; box-shadow:0 2px 12px rgba(251,191,36,.25);
}
.trn-btn-primary:hover{ transform:translateY(-1px); box-shadow:0 4px 20px rgba(251,191,36,.35); }
.trn-btn-primary:disabled{ opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }
.trn-btn-primary.trn-btn-pulse{ animation:trn-btn-glow 1.5s ease-in-out infinite; }
@keyframes trn-btn-glow{
  0%,100%{ box-shadow:0 2px 12px rgba(251,191,36,.25); }
  50%{ box-shadow:0 4px 28px rgba(251,191,36,.5); }
}
.trn-btn-secondary{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 24px; border-radius:12px; cursor:pointer;
  font-size:14px; font-weight:600; color:#e2e8f0;
  background:transparent; border:1px solid rgba(255,255,255,.12);
  transition:all .2s ease;
}
.trn-btn-secondary:hover{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.2); }
.trn-btn-accent{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 24px; border-radius:12px; border:none; cursor:pointer;
  font-size:14px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,#8b5cf6,#7c3aed);
  transition:all .2s ease; box-shadow:0 2px 12px rgba(139,92,246,.25);
}
.trn-btn-accent:hover{ transform:translateY(-1px); box-shadow:0 4px 20px rgba(139,92,246,.4); }
.trn-btn-danger-outline{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 18px; border-radius:12px; cursor:pointer;
  font-size:13px; font-weight:600; color:#f87171;
  background:transparent; border:1px solid rgba(248,113,113,.2);
  transition:all .2s ease;
}
.trn-btn-danger-outline:hover{ background:rgba(248,113,113,.08); border-color:rgba(248,113,113,.35); }
.trn-btn-lg{ padding:14px 32px; font-size:16px; border-radius:14px; }
.trn-slot-cta{ width:100%; }
.trn-back{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:none; color:rgba(255,255,255,.5); cursor:pointer;
  font-size:13px; padding:8px 0; margin-bottom:16px; transition:color .15s;
}
.trn-back:hover{ color:#e2e8f0; }

/* ── Register card ────────────────────────────────────────────────────── */
.trn-register-card{
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius:20px; padding:32px; max-width:480px; margin:0 auto;
}
.trn-register-header{ text-align:center; margin-bottom:28px; }
.trn-register-header h2{ font-size:22px; font-weight:700; color:#e2e8f0; margin:12px 0 6px; }
.trn-register-icon{ color:#fbbf24; }
.trn-register-slot{ font-size:13px; color:rgba(255,255,255,.45); }
.trn-register-body{ display:flex; flex-direction:column; gap:20px; }
.trn-register-field label{ display:block; font-size:13px; font-weight:600; color:rgba(255,255,255,.6); margin-bottom:6px; }
.trn-select{
  width:100%; padding:10px 14px; border-radius:10px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  color:#e2e8f0; font-size:14px; appearance:none;
}
.trn-select:focus{ border-color:rgba(251,191,36,.4); outline:none; box-shadow:0 0 0 3px rgba(251,191,36,.1); }
.trn-register-fee{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px; border-radius:12px;
  background:rgba(251,191,36,.06); border:1px solid rgba(251,191,36,.12);
  font-size:14px; color:rgba(255,255,255,.6);
}
.trn-register-fee-amount{ font-weight:700; color:#fbbf24; font-size:18px; }
.trn-register-rules{ display:flex; flex-direction:column; gap:6px; }
.trn-checkbox-label{
  display:flex; align-items:flex-start; gap:8px; font-size:13px; color:rgba(255,255,255,.55); cursor:pointer;
}
.trn-checkbox-label input[type="checkbox"]{ margin-top:2px; accent-color:#fbbf24; }
.trn-rules-link{ font-size:12px; color:#fbbf24; margin-left:22px; }
.trn-register-footer{ margin-top:24px; text-align:center; }
.trn-status{ font-size:13px; color:rgba(255,255,255,.5); text-align:center; margin-top:12px; }
.trn-status--error{ color:#f87171; }

/* ── Lobby ────────────────────────────────────────────────────────────── */
.trn-lobby-page{ display:flex; flex-direction:column; align-items:center; }
.trn-lobby-hero{
  position:relative; overflow:hidden; border-radius:24px; width:100%;
  background:linear-gradient(160deg,#1a1333 0%,#0f172a 60%,#1e1b4b 100%);
  padding:60px 32px; text-align:center;
  border:1px solid rgba(139,92,246,.15);
}
.trn-lobby-glow{
  position:absolute; top:-40%; left:50%; transform:translateX(-50%);
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle,rgba(139,92,246,.1) 0%,transparent 70%);
  pointer-events:none;
}
.trn-lobby-content{ position:relative; z-index:1; }
.trn-lobby-icon{ color:#a78bfa; margin-bottom:16px; }
.trn-lobby-title{ font-size:26px; font-weight:800; color:#e2e8f0; margin:0 0 8px; }
.trn-lobby-subtitle{ font-size:14px; color:rgba(255,255,255,.45); margin:0 0 32px; }

/* Countdown ring */
.trn-countdown-ring{ position:relative; width:140px; height:140px; margin:0 auto 24px; }
.trn-countdown-svg{ width:100%; height:100%; transform:rotate(-90deg); }
.trn-countdown-track{ fill:none; stroke:rgba(255,255,255,.06); stroke-width:6; }
.trn-countdown-progress{
  fill:none; stroke:url(#trn-grad) #a78bfa; stroke-width:6;
  stroke-linecap:round; transition:stroke-dashoffset .3s ease;
}
.trn-countdown-value{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:28px; font-weight:800; color:#e2e8f0;
  font-family:'SF Mono',ui-monospace,monospace; letter-spacing:1px;
}
.trn-lobby-participants{
  display:inline-flex; align-items:center; gap:6px;
  font-size:14px; color:rgba(255,255,255,.5);
  padding:8px 16px; border-radius:20px;
  background:rgba(255,255,255,.04);
}
.trn-lobby-participants-icon{ color:rgba(255,255,255,.3); }
.trn-lobby-hint{
  margin-top:24px; padding:16px 20px; border-radius:12px;
  background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06);
  font-size:13px; color:rgba(255,255,255,.4); text-align:center; max-width:500px;
}

/* ── Writing editor ───────────────────────────────────────────────────── */
.trn-writing-page{ display:flex; flex-direction:column; gap:16px; }
.trn-writing-header{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  padding:14px 18px; border-radius:14px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
}
.trn-writing-timer{
  display:flex; align-items:center; gap:6px;
  font-family:'SF Mono',ui-monospace,monospace;
  font-size:18px; font-weight:800; color:#e2e8f0;
  padding:6px 14px; border-radius:10px;
  background:rgba(255,255,255,.05);
  transition:all .3s ease;
}
.trn-writing-timer-icon{ color:rgba(255,255,255,.3); }
.trn-timer-warning{ background:rgba(251,191,36,.1); color:#fbbf24; }
.trn-timer-critical{ background:rgba(239,68,68,.15); color:#f87171; animation:trn-pill-pulse .5s ease-in-out infinite; }
.trn-writing-prompt{ flex:1; min-width:200px; }
.trn-writing-prompt-type{
  display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.5px; color:#fbbf24; margin-right:8px;
  padding:2px 8px; border-radius:6px; background:rgba(251,191,36,.1);
}
.trn-writing-prompt-text{ font-size:14px; color:#e2e8f0; font-weight:600; }
.trn-writing-stats{ font-size:12px; color:rgba(255,255,255,.35); font-family:'SF Mono',ui-monospace,monospace; }
.trn-writing-stats-sep{ margin:0 4px; }

.trn-writing-editor-wrap{ position:relative; }
.trn-writing-editor{
  width:100%; min-height:340px; padding:20px 24px;
  border-radius:16px; resize:vertical;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  color:#e2e8f0; font-size:15px; line-height:1.7;
  font-family:Georgia,'Times New Roman',serif;
  transition:border-color .2s ease;
}
.trn-writing-editor:focus{ border-color:rgba(251,191,36,.3); outline:none; box-shadow:0 0 0 3px rgba(251,191,36,.08); caret-color:auto; }
.trn-writing-editor:disabled{ opacity:.5; cursor:not-allowed; }

.trn-writing-mandatory{
  display:flex; align-items:center; gap:8px;
  padding:12px 16px; border-radius:12px;
  background:rgba(251,191,36,.08); border:1px solid rgba(251,191,36,.18);
  font-size:13px; color:#fbbf24; font-weight:600;
}
.trn-mandatory-icon{ flex-shrink:0; }
.trn-mandatory-reveal{ animation:trn-mandatory-in .6s ease; }
@keyframes trn-mandatory-in{
  0%{ opacity:0; transform:translateY(8px) scale(.95); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}
.trn-writing-footer{ text-align:center; }

/* ── Voting ───────────────────────────────────────────────────────────── */
.trn-voting-page{ display:flex; flex-direction:column; gap:20px; }
.trn-voting-header{ text-align:center; }
.trn-voting-header h2{ font-size:22px; font-weight:700; color:#e2e8f0; margin:0 0 12px; }
.trn-voting-timer{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; color:rgba(255,255,255,.45); margin-bottom:16px;
}
.trn-voting-timer-icon{ color:rgba(255,255,255,.3); }
.trn-voting-progress{ max-width:400px; margin:0 auto; }
.trn-voting-progress-bar{
  height:6px; border-radius:3px; background:rgba(255,255,255,.06); overflow:hidden; margin-bottom:6px;
}
.trn-voting-progress-fill{
  height:100%; border-radius:3px;
  background:linear-gradient(90deg,#8b5cf6,#a78bfa);
  transition:width .4s ease;
}
.trn-voting-progress-text{ font-size:12px; color:rgba(255,255,255,.35); }

.trn-duel-arena{ min-height:300px; }
.trn-duel{ display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:stretch; }
.trn-duel-card{
  padding:24px; border-radius:16px; cursor:pointer;
  background:rgba(255,255,255,.03); border:2px solid rgba(255,255,255,.08);
  transition:all .25s ease; display:flex; flex-direction:column; gap:12px;
}
.trn-duel-card:hover{ border-color:rgba(139,92,246,.35); background:rgba(139,92,246,.05); transform:translateY(-2px); }
.trn-duel-card.trn-duel-selected{ border-color:#8b5cf6; background:rgba(139,92,246,.08); box-shadow:0 0 20px rgba(139,92,246,.2); pointer-events:none; }
.trn-duel-card.trn-duel-voted{ opacity:.4; pointer-events:none; transform:scale(.97); }
.trn-duel-label{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color:rgba(255,255,255,.3);
}
.trn-duel-text{
  font-size:14px; line-height:1.7; color:#e2e8f0;
  font-family:Georgia,'Times New Roman',serif;
  max-height:280px; overflow-y:auto;
}
.trn-duel-vs{
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:800; color:rgba(255,255,255,.15);
  text-transform:uppercase;
}
.trn-duel-done{ text-align:center; padding:60px 24px; }
.trn-duel-done-icon{ color:#4ade80; margin-bottom:12px; }
.trn-duel-done h3{ font-size:20px; font-weight:700; color:#e2e8f0; margin:0 0 8px; }
.trn-duel-done p{ font-size:14px; color:rgba(255,255,255,.4); margin:0; }

/* ── Results / Podium ─────────────────────────────────────────────────── */
.trn-results-page{ text-align:center; }
.trn-results-hero{
  position:relative; overflow:hidden; border-radius:24px;
  background:linear-gradient(160deg,#1a1333 0%,#0f172a 50%,#451a03 100%);
  padding:48px 32px 40px; margin-bottom:32px;
  border:1px solid rgba(251,191,36,.15);
}
.trn-results-glow{
  position:absolute; top:-50%; left:50%; transform:translateX(-50%);
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle,rgba(251,191,36,.15) 0%,transparent 65%);
  pointer-events:none;
}
.trn-results-hero h1{
  position:relative; z-index:1;
  font-size:28px; font-weight:800; margin:0 0 8px;
  background:linear-gradient(135deg,#fbbf24,#fcd34d);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.trn-results-pool{ position:relative; z-index:1; font-size:14px; color:rgba(255,255,255,.5); margin:0; }
.trn-results-confetti{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:2; }

.trn-podium{
  display:flex; justify-content:center; gap:20px; margin-bottom:32px; flex-wrap:wrap;
}
.trn-podium-item{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:24px 20px; border-radius:18px; min-width:160px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  transition:transform .2s ease;
}
.trn-podium-item:hover{ transform:translateY(-3px); }
.trn-podium-item.trn-gold{ border-color:rgba(251,191,36,.25); background:rgba(251,191,36,.05); }
.trn-podium-item.trn-silver{ border-color:rgba(148,163,184,.2); background:rgba(148,163,184,.04); }
.trn-podium-item.trn-bronze{ border-color:rgba(217,119,6,.2); background:rgba(217,119,6,.04); }
.trn-podium-medal{ margin-bottom:4px; }
.trn-podium-rank{ font-size:12px; font-weight:700; color:rgba(255,255,255,.3); }
.trn-podium-avatar{
  width:56px; height:56px; border-radius:50%; overflow:hidden;
  background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:700; color:rgba(255,255,255,.3);
}
.trn-podium-avatar img{ width:100%; height:100%; object-fit:cover; }
.trn-podium-name{ font-size:14px; font-weight:700; color:#e2e8f0; }
.trn-podium-handle{ font-size:12px; color:rgba(255,255,255,.35); }
.trn-podium-prize{
  font-size:16px; font-weight:800; color:#fbbf24;
  padding:4px 12px; border-radius:8px; background:rgba(251,191,36,.08);
}
.trn-my-rank{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 20px; border-radius:12px;
  background:rgba(59,130,246,.08); border:1px solid rgba(59,130,246,.15);
  font-size:14px; font-weight:600; color:#60a5fa; margin-bottom:24px;
}
.trn-results-footer{ margin-top:8px; }

/* ── Confetti ─────────────────────────────────────────────────────────── */
.trn-confetti-piece{
  position:absolute;
  left:var(--x,50%); top:-10px;
  width:8px; height:8px; border-radius:2px;
  background:var(--color,#fbbf24);
  transform:rotate(var(--rotation,0deg));
  animation:trn-confetti-fall var(--duration,2s) var(--delay,0s) ease-out forwards;
  opacity:0;
}
@keyframes trn-confetti-fall{
  0%{ opacity:1; transform:translateY(0) rotate(0deg) scale(1); }
  100%{ opacity:0; transform:translateY(500px) rotate(720deg) scale(.3); }
}

/* ── Hall of Fame teaser ──────────────────────────────────────────────── */
.trn-hof-teaser{
  text-align:center; padding:24px; border-radius:16px;
  background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.05);
}
.trn-hof-teaser h3{ font-size:16px; font-weight:700; color:rgba(255,255,255,.5); margin:0 0 4px; }
.trn-hof-teaser p{ font-size:13px; color:rgba(255,255,255,.25); margin:0; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media(max-width:640px){
  .trn-hero{ padding:32px 20px 28px; border-radius:16px; }
  .trn-hero-title{ font-size:22px; }
  .trn-slots-grid{ grid-template-columns:1fr; }
  .trn-duel{ grid-template-columns:1fr; }
  .trn-duel-vs{ padding:8px 0; }
  .trn-lobby-hero{ padding:40px 20px; }
  .trn-countdown-ring{ width:110px; height:110px; }
  .trn-countdown-value{ font-size:22px; }
  .trn-podium{ flex-direction:column; align-items:center; }
  .trn-writing-editor{ min-height:240px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   PREMIUM PAGE
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Skeleton loader ─────────────────────────────────────────────────────── */
.pm-skeleton{ display:flex; flex-direction:column; gap:32px; padding:40px 0; animation:pm-fade-in .3s ease; }
.pm-skeleton-hero{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.pm-skel-line{ border-radius:8px; background:rgba(255,255,255,.06); animation:pm-pulse 1.4s ease-in-out infinite; }
.pm-skel-line--lg{ width:280px; height:28px; }
.pm-skel-line--md{ width:380px; height:16px; }
.pm-skel-chips{ display:flex; gap:10px; }
.pm-skel-chip{ width:100px; height:26px; border-radius:999px; background:rgba(255,255,255,.04); animation:pm-pulse 1.4s ease-in-out infinite; }
.pm-skeleton-toggle{ display:flex; justify-content:center; }
.pm-skel-pill{ width:240px; height:40px; border-radius:999px; background:rgba(255,255,255,.05); animation:pm-pulse 1.4s ease-in-out infinite; }
.pm-skeleton-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.pm-skel-card{ height:340px; border-radius:20px; background:rgba(255,255,255,.03); animation:pm-pulse 1.4s ease-in-out infinite; }
.pm-skel-card--featured{ height:380px; }

@keyframes pm-pulse{
  0%,100%{ opacity:1; }
  50%{ opacity:.4; }
}
@keyframes pm-fade-in{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ── Content wrapper ─────────────────────────────────────────────────────── */
.pm-content{ display:flex; flex-direction:column; gap:48px; padding:0 0 120px; animation:pm-fade-in .4s ease; }

/* ── Status banner ───────────────────────────────────────────────────────── */
.pm-status-banner{
  display:flex; align-items:center; gap:14px; padding:14px 20px;
  border-radius:14px; border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
.pm-status-icon{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.pm-status--active .pm-status-icon{ background:#22c55e; box-shadow:0 0 8px rgba(34,197,94,.4); }
.pm-status--cancel-at-period-end .pm-status-icon{ background:#f59e0b; box-shadow:0 0 8px rgba(245,158,11,.4); }
.pm-status--expired .pm-status-icon{ background:#6b7280; }
.pm-status--past-due .pm-status-icon{ background:#ef4444; box-shadow:0 0 8px rgba(239,68,68,.4); }
.pm-status--trialing .pm-status-icon{ background:#8b5cf6; box-shadow:0 0 8px rgba(139,92,246,.4); }
.pm-status-text{ flex:1; min-width:0; }
.pm-status-title{ font-size:14px; font-weight:600; color:rgba(255,255,255,.9); }
.pm-status-note{ font-size:12px; color:rgba(255,255,255,.45); margin-top:2px; }
.pm-status-refresh{
  flex-shrink:0; font-size:12px; font-weight:600; color:var(--primary-400,#60a5fa);
  background:none; border:none; cursor:pointer; padding:6px 12px; border-radius:8px;
  transition:background .15s;
}
.pm-status-refresh:hover{ background:rgba(96,165,250,.1); }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.pm-hero{
  position:relative; text-align:center; padding:56px 24px 48px;
  border-radius:24px; overflow:hidden;
  background:linear-gradient(135deg,rgba(139,92,246,.12) 0%,rgba(59,130,246,.08) 50%,rgba(16,185,129,.06) 100%);
  border:1px solid rgba(255,255,255,.06);
}
.pm-hero-glow{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(139,92,246,.15),transparent 70%);
}
.pm-hero-title{
  position:relative; font-size:32px; font-weight:800; letter-spacing:-.02em;
  background:linear-gradient(135deg,#c084fc,#60a5fa,#34d399);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; margin:0 0 12px;
}
.pm-hero-subtitle{
  position:relative; font-size:15px; color:rgba(255,255,255,.55);
  max-width:520px; margin:0 auto 20px; line-height:1.6;
}
.pm-hero-chips{ position:relative; display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.pm-chip{
  font-size:12px; font-weight:500; color:rgba(255,255,255,.5);
  padding:5px 14px; border-radius:999px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);
}

/* ── Offer banner ────────────────────────────────────────────────────────── */
.pm-offer-banner{
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:12px 20px; border-radius:12px;
  background:linear-gradient(90deg,rgba(245,158,11,.12),rgba(234,88,12,.08));
  border:1px solid rgba(245,158,11,.2);
  animation:pm-offer-glow 3s ease-in-out infinite;
}
.pm-offer-label{ font-size:14px; font-weight:700; color:#fbbf24; }
.pm-offer-detail{ font-size:12px; color:rgba(255,255,255,.5); }
@keyframes pm-offer-glow{
  0%,100%{ box-shadow:0 0 0 rgba(245,158,11,0); }
  50%{ box-shadow:0 0 20px rgba(245,158,11,.08); }
}

/* ── Toggle ──────────────────────────────────────────────────────────────── */
.pm-toggle-wrap{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.pm-toggle{
  display:inline-flex; gap:4px; padding:4px;
  border-radius:999px; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}
.pm-toggle-btn{
  display:flex; align-items:center; gap:6px;
  padding:8px 20px; border-radius:999px; border:none;
  font-size:13px; font-weight:600; color:rgba(255,255,255,.45);
  background:transparent; cursor:pointer; transition:all .2s;
}
.pm-toggle-btn.active{
  color:#fff; background:rgba(139,92,246,.25);
  box-shadow:0 0 12px rgba(139,92,246,.15);
}
.pm-toggle-btn:hover:not(.active){ color:rgba(255,255,255,.7); }
.pm-toggle-badge{
  font-size:10px; font-weight:700; color:#22c55e;
  padding:2px 8px; border-radius:999px;
  background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.2);
}
.pm-toggle-micro{ font-size:11px; color:rgba(255,255,255,.3); text-align:center; margin:0; }

/* ── Pricing cards ───────────────────────────────────────────────────────── */
.pm-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start; }
.pm-card{
  position:relative; display:flex; flex-direction:column;
  padding:28px 24px; border-radius:20px;
  background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06);
  transition:transform .2s, box-shadow .2s;
}
.pm-card:hover{ transform:translateY(-2px); }
.pm-card--featured{
  background:linear-gradient(180deg,rgba(139,92,246,.08) 0%,rgba(59,130,246,.04) 100%);
  border-color:rgba(139,92,246,.2);
  box-shadow:0 0 40px rgba(139,92,246,.08);
}
.pm-card--featured:hover{ box-shadow:0 0 50px rgba(139,92,246,.12); }
.pm-card--dimmed{ opacity:.55; pointer-events:none; }
.pm-card-badge{
  position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  font-size:11px; font-weight:700; color:#fff;
  padding:4px 14px; border-radius:999px;
  background:linear-gradient(135deg,#8b5cf6,#6366f1);
  box-shadow:0 4px 12px rgba(139,92,246,.3);
  white-space:nowrap;
}
.pm-card-badge--soon{
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.4);
  box-shadow:none;
}
.pm-card-header{ margin-bottom:20px; }
.pm-card-name{ font-size:20px; font-weight:700; color:rgba(255,255,255,.9); margin:0 0 10px; }
.pm-card-price{ display:flex; align-items:baseline; gap:4px; margin-bottom:6px; }
.pm-card-price-amount{ font-size:28px; font-weight:800; color:#fff; }
.pm-card-price-period{ font-size:13px; color:rgba(255,255,255,.4); }
.pm-card-price-before{
  font-size:13px; color:rgba(255,255,255,.3); text-decoration:line-through;
  margin-right:6px;
}
.pm-card-save{ font-size:12px; color:#22c55e; font-weight:600; margin:0 0 8px; }
.pm-card-desc{ font-size:13px; color:rgba(255,255,255,.4); line-height:1.5; margin:0; }
.pm-card-bullets{
  list-style:none; padding:0; margin:0 0 16px;
  display:flex; flex-direction:column; gap:8px;
}
.pm-card-bullets li{
  font-size:13px; color:rgba(255,255,255,.6); padding-left:20px;
  position:relative; line-height:1.4;
}
.pm-card-bullets li::before{
  content:"✓"; position:absolute; left:0; color:#8b5cf6; font-weight:700;
}
.pm-card--free .pm-card-bullets li::before{ color:rgba(255,255,255,.25); }
.pm-card-note{ font-size:11px; color:rgba(255,255,255,.3); font-style:italic; margin:0 0 16px; }
.pm-card-footer{ margin-top:auto; }
.pm-card-cta{
  width:100%; padding:12px; border-radius:12px; font-size:14px; font-weight:700;
  background:linear-gradient(135deg,#8b5cf6,#6366f1); color:#fff;
  border:none; cursor:pointer; transition:all .2s; text-align:center;
}
.pm-card-cta:hover{ filter:brightness(1.1); box-shadow:0 4px 20px rgba(139,92,246,.3); }
.pm-card-cta:disabled{ opacity:.5; cursor:not-allowed; filter:none; }
.pm-card-current{
  display:block; text-align:center; font-size:13px; font-weight:600;
  color:rgba(255,255,255,.3); padding:12px;
}

/* ── Sticky CTA ──────────────────────────────────────────────────────────── */
.pm-sticky-cta{
  position:fixed; bottom:0; left:0; right:0; z-index:90;
  padding:14px 24px 18px; text-align:center;
  background:rgba(11,18,32,.92); backdrop-filter:blur(16px);
  border-top:1px solid rgba(255,255,255,.06);
  animation:pm-slide-up .3s ease;
}
.pm-sticky-inner{ display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }
.pm-sticky-info{ display:flex; gap:12px; font-size:12px; color:rgba(255,255,255,.4); }
.pm-sticky-total{ font-weight:700; color:rgba(255,255,255,.8); }
.pm-sticky-btn{
  padding:10px 28px; border-radius:12px; font-size:14px; font-weight:700;
  background:linear-gradient(135deg,#8b5cf6,#6366f1); color:#fff;
  border:none; cursor:pointer; transition:all .2s;
}
.pm-sticky-btn:hover{ filter:brightness(1.1); box-shadow:0 4px 20px rgba(139,92,246,.3); }
.pm-sticky-btn:disabled{ opacity:.5; cursor:not-allowed; }
.pm-sticky-legal{ font-size:10px; color:rgba(255,255,255,.2); margin:6px 0 0; }
@keyframes pm-slide-up{
  from{ transform:translateY(100%); }
  to{ transform:translateY(0); }
}

/* ── Comparison table ────────────────────────────────────────────────────── */
.pm-compare{ max-width:640px; margin:0 auto; }
.pm-section-title{
  font-size:20px; font-weight:700; color:rgba(255,255,255,.85);
  margin:0 0 20px; text-align:center;
}
.pm-compare-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.pm-compare-table{
  width:100%; border-collapse:collapse; font-size:13px;
}
.pm-compare-table th{
  padding:10px 16px; text-align:center; font-weight:600;
  color:rgba(255,255,255,.5); border-bottom:1px solid rgba(255,255,255,.06);
}
.pm-compare-table th:first-child{ text-align:left; }
.pm-compare-hl{ color:#c084fc !important; }
.pm-compare-table td{
  padding:10px 16px; text-align:center;
  border-bottom:1px solid rgba(255,255,255,.03);
  color:rgba(255,255,255,.5);
}
.pm-compare-table td:first-child{ text-align:left; color:rgba(255,255,255,.7); }
.pm-compare-yes{ color:#8b5cf6 !important; font-weight:700; }
.pm-compare-no{ color:rgba(255,255,255,.15) !important; }
.pm-tip{
  font-size:11px; color:rgba(255,255,255,.2); cursor:help;
  vertical-align:super; margin-left:2px;
}

/* ── Cancel section ──────────────────────────────────────────────────────── */
.pm-cancel{ max-width:540px; margin:0 auto; text-align:center; }
.pm-cancel-text{ font-size:14px; color:rgba(255,255,255,.45); line-height:1.6; margin:0 0 20px; }
.pm-cancel-faq{ display:flex; flex-direction:column; gap:8px; text-align:left; margin-bottom:20px; }
.pm-cancel-faq details{
  padding:12px 16px; border-radius:12px;
  background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.04);
}
.pm-cancel-faq summary{
  font-size:13px; font-weight:600; color:rgba(255,255,255,.6);
  cursor:pointer; list-style:none;
}
.pm-cancel-faq summary::-webkit-details-marker{ display:none; }
.pm-cancel-faq summary::before{ content:"▸ "; color:rgba(255,255,255,.25); }
.pm-cancel-faq details[open] summary::before{ content:"▾ "; }
.pm-cancel-faq p{ font-size:13px; color:rgba(255,255,255,.4); margin:8px 0 0; line-height:1.5; }
.pm-cancel-btn{ margin:0 auto; }

/* ── Trust ───────────────────────────────────────────────────────────────── */
.pm-trust{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:24px; border-radius:16px;
  background:rgba(255,255,255,.01); border:1px solid rgba(255,255,255,.03);
}
.pm-trust-item{ font-size:12px; color:rgba(255,255,255,.25); }
.pm-trust-warning{ font-style:italic; color:rgba(255,255,255,.18); }

/* ── Error state ─────────────────────────────────────────────────────────── */
.pm-error{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  padding:80px 24px; text-align:center;
}
.pm-error p{ font-size:15px; color:rgba(255,255,255,.4); margin:0; }

/* ── Nav premium badge ───────────────────────────────────────────────────── */
.nav-premium-badge{
  font-size:10px; font-weight:700; padding:1px 6px; border-radius:999px;
  background:rgba(139,92,246,.2); color:#c084fc;
  margin-left:auto;
}
.app-nav-premium{ position:relative; }
.app-nav-premium .app-nav-icon{ color:#c084fc; }
.pm-nav--active .app-nav-icon{ color:#22c55e; }
.pm-nav--warn .nav-premium-badge{ background:rgba(239,68,68,.2); color:#f87171; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media(max-width:900px){
  .pm-cards{ grid-template-columns:1fr 1fr; }
  .pm-card--plus{ grid-column:1/-1; }
  .pm-skeleton-cards{ grid-template-columns:1fr 1fr; }
}
@media(max-width:640px){
  .pm-hero{ padding:40px 20px 36px; border-radius:16px; }
  .pm-hero-title{ font-size:24px; }
  .pm-hero-subtitle{ font-size:13px; }
  .pm-cards{ grid-template-columns:1fr; }
  .pm-skeleton-cards{ grid-template-columns:1fr; }
  .pm-card--featured{ order:-1; }
  .pm-sticky-inner{ flex-direction:column; gap:10px; }
  .pm-sticky-info{ flex-wrap:wrap; justify-content:center; }
  .pm-compare-table{ font-size:12px; }
  .pm-compare-table th,
  .pm-compare-table td{ padding:8px 10px; }
  .pm-status-banner{ flex-wrap:wrap; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .pm-skeleton, .pm-content, .pm-sticky-cta{ animation:none !important; }
  .pm-skel-line, .pm-skel-chip, .pm-skel-pill, .pm-skel-card{ animation:none !important; }
  .pm-offer-banner{ animation:none !important; }
  .pm-card{ transition:none !important; }
  .pm-card:hover{ transform:none !important; }
  .pm-toggle-btn{ transition:none !important; }
  .pm-card-cta, .pm-sticky-btn, .pm-status-refresh{ transition:none !important; }
}

/* ── Entitlement gating ──────────────────────────────────────────────────── */
.pm-gated{ opacity:.45; pointer-events:none; position:relative; }
.pm-gated::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:rgba(11,18,32,.3); pointer-events:none;
}