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

/* ── Global fix: native <option> readability in dark mode ── */
select{color-scheme:dark}
select option,
select optgroup{
  background:#151a28;
  color:rgba(255,255,255,.88);
}
select option:checked{
  background:linear-gradient(0deg, #2a3a5c 0%, #2a3a5c 100%) !important;
  color:#fff !important;
}
select option:hover{
  background:#1e2d4a;
}

/* 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;
  /* WCAG AA accessible muted text (ratio ≥4.5:1 on --bg:#0b1220) */
  --text-muted-accessible: rgba(255,255,255,.72);
}
*{box-sizing:border-box}
*:focus:not(:focus-visible){outline:none;}
*:not(input):not(textarea):not(select):not([contenteditable="true"]){caret-color:transparent;}
[contenteditable="true"] *{caret-color:inherit;}
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)}}

/* The logged-in 3-column app shell (280px sidebar + feed + 360px rail) needs far
   more room than a normal page container. Without this, between ~1200–1600px the
   feed column was squeezed to ~300px (capped by --container-lg=1024), making the
   center narrower than the right rail. Widen the app-layout container so the feed
   gets a proper, readable width on 13–15" laptops. */
@media(min-width:1200px){ body.app-layout main > .container{ max-width: 1500px; } }
@media(min-width:1760px){ body.app-layout main > .container{ max-width: 1680px; } }

.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; }
#view-user .card.profile-card{ min-height: calc(100vh - 80px); display:flex; flex-direction:column; }
#view-user .card.profile-card .profile-panel{ flex:1; }

/* ── 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 .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,.72);
}

/* 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;
  color-scheme: dark;
  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: linear-gradient(0deg, #2a3a5c 0%, #2a3a5c 100%) !important;
  color: #fff !important;
}
select.input:disabled{
  opacity: .45;
  cursor: not-allowed;
}

/* ── Admin Stripe Panel ── */
.as-header{display:flex;align-items:center;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.as-header h3{margin:0;flex:1;font-size:20px;font-weight:700;letter-spacing:-.01em}
.as-mode-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.as-mode-pill::before{content:'';width:8px;height:8px;border-radius:50%}
.as-mode--mock{background:rgba(255,255,255,.06);color:rgba(255,255,255,.65)}
.as-mode--mock::before{background:rgba(255,255,255,.3)}
.as-mode--test{background:rgba(250,204,21,.10);color:#fbbf24}
.as-mode--test::before{background:#fbbf24}
.as-mode--live{background:rgba(52,211,153,.10);color:#34d399}
.as-mode--live::before{background:#34d399}

.as-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
@media(max-width:900px){.as-grid{grid-template-columns:1fr}}

.as-card{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:20px;position:relative;transition:border-color .2s ease}
.as-card:hover{border-color:rgba(255,255,255,.12)}
.as-card--full{grid-column:1/-1}
.as-card-head{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.as-card-head h4{margin:0;font-size:14px;font-weight:700;color:rgba(255,255,255,.85);letter-spacing:.01em}
.as-card-icon{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.as-card-icon svg{width:16px;height:16px}
.as-card-icon--mode{background:rgba(96,165,250,.12);color:#60a5fa}
.as-card-icon--ids{background:rgba(250,204,21,.10);color:#fbbf24}
.as-card-icon--ids-live{background:rgba(52,211,153,.10);color:#34d399}
.as-card-icon--export{background:rgba(168,85,247,.10);color:#a855f7}
.as-card-icon--refund{background:rgba(251,113,133,.10);color:#fb7185}

.as-mode-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.as-mode-row select.input{max-width:140px;padding:10px 34px 10px 12px;font-size:13px;border-radius:10px}
.admin-panel .as-mode-row .btn{min-width:auto;padding:10px 18px;font-size:13px;border-radius:10px}

.as-ids-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
@media(max-width:600px){.as-ids-grid{grid-template-columns:1fr}}
.as-ids-grid label{margin:0;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.65);letter-spacing:.03em;text-transform:uppercase}
.as-ids-grid .input{padding:9px 12px;font-size:13px;border-radius:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.as-ids-full{grid-column:1/-1}
.as-card-footer{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.admin-panel .as-card-footer .btn{min-width:auto;padding:9px 18px;font-size:13px;border-radius:10px}
.as-card-footer .hint{margin:0;font-size:12px}

.as-export-row{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.as-export-row .as-field{display:flex;flex-direction:column;gap:4px}
.as-export-row .as-field label{margin:0;font-size:11px;font-weight:600;color:rgba(255,255,255,.65);text-transform:uppercase;letter-spacing:.03em}
.as-export-row select.input,.as-export-row input.input{padding:9px 12px;font-size:13px;border-radius:10px;max-width:180px}
.as-export-row select.input{max-width:200px;padding-right:32px}
.admin-panel .as-export-row .btn{min-width:auto;padding:9px 18px;font-size:13px;border-radius:10px;align-self:flex-end}

.as-case{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:14px 16px;margin-bottom:10px;transition:border-color .2s ease}
.as-case:hover{border-color:rgba(255,255,255,.12)}
.as-case-header{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:13px;font-weight:600;color:rgba(255,255,255,.7)}
.as-case-header code{font-size:12px;background:rgba(255,255,255,.06);padding:2px 8px;border-radius:6px;color:rgba(255,255,255,.55);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.as-case-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:rgba(255,255,255,.65);margin-bottom:10px}
.as-case-meta span{display:inline-flex;align-items:center;gap:4px}
.as-case-actions{display:flex;gap:8px}
.admin-panel .as-case-actions .btn{min-width:auto;padding:7px 14px;font-size:12px;border-radius:8px}

.as-eye-btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 10px !important;min-width:auto !important;border-radius:10px !important;opacity:.5;transition:opacity .2s}
.as-eye-btn:hover{opacity:.85}
.as-eye-btn.as-eye--open{opacity:1;color:#60a5fa}
.as-eye-btn svg{display:block}

.as-download-link{display:inline-flex;align-items:center;gap:6px;color:#60a5fa;font-size:13px;font-weight:600;text-decoration:none;padding:8px 16px;border-radius:10px;background:rgba(96,165,250,.08);border:1px solid rgba(96,165,250,.15);transition:background .2s,border-color .2s}
.as-download-link:hover{background:rgba(96,165,250,.14);border-color:rgba(96,165,250,.3);text-decoration:none}


.as-card-icon--webhook{background:rgba(56,189,248,.10);color:#38bdf8}

.as-webhook-filters{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.as-webhook-filters .as-field{display:flex;flex-direction:column;gap:4px}
.as-webhook-filters .as-field label{margin:0;font-size:11px;font-weight:600;color:rgba(255,255,255,.65);text-transform:uppercase;letter-spacing:.03em}
.as-webhook-filters select.input,.as-webhook-filters input.input{padding:9px 12px;font-size:13px;border-radius:10px;max-width:200px}
.as-webhook-filters select.input{padding-right:32px}
.admin-panel .as-webhook-filters .btn{min-width:auto;padding:9px 18px;font-size:13px;border-radius:10px;align-self:flex-end}

.as-wh-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:10px;border:1px solid rgba(255,255,255,.06)}
.as-wh-table{width:100%;border-collapse:collapse;font-size:12.5px}
.as-wh-table thead{background:rgba(255,255,255,.04)}
.as-wh-table th{padding:8px 10px;text-align:left;font-size:11px;font-weight:600;color:rgba(255,255,255,.65);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;border-bottom:1px solid rgba(255,255,255,.06)}
.as-wh-table td{padding:7px 10px;border-bottom:1px solid rgba(255,255,255,.04);color:rgba(255,255,255,.7);vertical-align:top}
.as-wh-table tbody tr:hover{background:rgba(255,255,255,.03)}
.as-wh-table code{font-size:11.5px;background:rgba(255,255,255,.06);padding:1px 6px;border-radius:5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:rgba(255,255,255,.6)}
.as-wh-td-time{white-space:nowrap;font-size:12px;color:rgba(255,255,255,.65)}
.as-wh-td-type{max-width:260px;overflow:hidden;text-overflow:ellipsis}
.as-wh-td-obj{max-width:180px;overflow:hidden;text-overflow:ellipsis}
.as-wh-td-err{max-width:200px}

.as-wh-pill{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:600;letter-spacing:.02em}
.as-wh-pill--processed{background:rgba(52,211,153,.12);color:#34d399}
.as-wh-pill--processing{background:rgba(250,204,21,.10);color:#fbbf24}
.as-wh-pill--failed{background:rgba(251,113,133,.12);color:#fb7185}

.as-wh-status--ok td:first-child{border-left:2px solid rgba(52,211,153,.3)}
.as-wh-status--fail td:first-child{border-left:2px solid rgba(251,113,133,.3)}
.as-wh-status--pending td:first-child{border-left:2px solid rgba(250,204,21,.25)}

.as-wh-error{color:#fb7185;font-size:12px;word-break:break-word}

.as-wh-footer{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.admin-panel .as-wh-footer .btn{min-width:auto;padding:8px 16px;font-size:12.5px;border-radius:9px}
.as-wh-footer .hint{margin:0;font-size:12px}

.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;
  min-width:44px;
  min-height:44px;
  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:not(:focus-visible){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,.65); 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,.72); 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-custom-form{display:flex; flex-direction:column; gap:10px; margin:12px 0 16px}
.invites-custom-form-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.invites-custom-prefix{font-weight:800; font-size:15px; color:rgba(255,255,255,.92); letter-spacing:.5px; white-space:nowrap}
.invites-custom-label{font-size:13px; font-weight:600; color:rgba(255,255,255,.72); min-width:160px}
.invites-custom-form-row .input{max-width:220px}
.invites-custom-form-row .btn{width:auto; min-width:160px}
.admin-custom-usedby{font-size:11px; color:rgba(255,255,255,.65); max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; vertical-align:middle}
@media(max-width:600px){.invites-custom-label{min-width:100px} .invites-custom-form-row .input{max-width:100%}}

.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}}

.admin-grid-2{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px 18px}
.admin-grid-2 label{font-size:13px; color:rgba(255,255,255,.7); margin-bottom:2px; display:block}
.admin-grid-2 .input{width:100%}
@media(max-width:600px){.admin-grid-2{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,.65); 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)}
/* Auditoría F5: en mobile (<=640px) los admin tabs eran 10.5px/24px alto,
   violando WCAG 2.1 AA (mínimo 12px legible). Subimos a 13px font,
   padding 8px 12px → ~36px alto, y line-height ligeramente mayor. */
@media(max-width:640px){.admin-tabs{gap:6px} .admin-tabs .btn{padding:8px 12px; font-size:13px; line-height:1.4}}

.admin-panel .btn{width:auto; min-width:0; font-size:13px; padding:10px 20px; border-radius:12px; letter-spacing:.01em; font-weight:700; transition:all .2s cubic-bezier(.4,0,.2,1)}
.admin-panel .btn.secondary{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px)}
.admin-panel .btn.secondary:hover{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.20); box-shadow:0 4px 20px rgba(0,0,0,.18); transform:translateY(-1px)}
.admin-panel .btn.secondary:active{transform:translateY(0); box-shadow:none}
.admin-panel .btn:not(.secondary):not(.danger):not(.icon):not(.xs):not(.btn-sm){background:linear-gradient(135deg,var(--primary) 0%,#6366f1 100%); box-shadow:0 2px 12px rgba(59,130,246,.2)}
.admin-panel .btn:not(.secondary):not(.danger):not(.icon):not(.xs):not(.btn-sm):hover{box-shadow:0 4px 20px rgba(59,130,246,.35); transform:translateY(-1px)}
.admin-panel .btn.icon{padding:8px; min-width:0}
.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 sections */
.admin-section{ margin-top: 16px; }
.admin-section + .admin-section{ margin-top: 16px; }

/* 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-kpi-label{color:rgba(255,255,255,.65); font-size:11px; letter-spacing:.3px; text-transform:uppercase; font-weight:600; margin-top:4px}
.admin-kpi-row{display:flex; gap:12px; flex-wrap:wrap}
.admin-kpi-row .admin-kpi{flex:1; min-width:120px}
@media(max-width:520px){.admin-kpi-row{flex-direction:column}}

/* Admin toggle switch (ON/OFF slider) */
.admin-switch-row{
  display:flex; align-items:center; gap:12px; cursor:pointer;
  padding:8px 0; user-select:none;
}
.admin-switch{
  position:relative; flex-shrink:0;
  width:44px; height:24px; display:inline-block;
}
.admin-switch input{
  opacity:0; width:0; height:0; position:absolute; pointer-events:none;
}
.admin-switch-slider{
  position:absolute; inset:0; border-radius:999px;
  background:rgba(255,255,255,.12);
  transition:background .22s ease;
  cursor:pointer;
}
.admin-switch-slider::after{
  content:""; position:absolute;
  top:3px; left:3px; width:18px; height:18px;
  border-radius:50%; background:rgba(255,255,255,.6);
  transition:transform .22s ease, background .22s ease;
}
.admin-switch input:checked + .admin-switch-slider{
  background:rgba(96,165,250,.5);
}
.admin-switch input:checked + .admin-switch-slider::after{
  transform:translateX(20px); background:#93c5fd;
}
.admin-switch input:focus-visible + .admin-switch-slider{
  box-shadow:0 0 0 3px rgba(96,165,250,.35);
}

/* Admin hint text */
.admin-hint{ font-size:12px; color:rgba(255,255,255,.38); margin:4px 0 12px; line-height:1.5; }

/* Admin Premium campaign form */
.admin-pm-campaign-form{ margin-top:12px; }
.admin-pm-campaign-form[open] summary{ margin-bottom:12px; }
.admin-pm-cf-body{
  border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02);
  border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:10px;
}
.admin-pm-cf-row{ display:flex; align-items:center; gap:10px; }
.admin-pm-cf-label{ min-width:110px; font-size:12px; font-weight:600; color:rgba(255,255,255,.55); }
.admin-pm-cf-actions{ display:flex; justify-content:flex-end; margin-top:4px; }

/* 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,.65); 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-chip.live{border-color:rgba(59,130,246,.40); color:rgba(96,165,250,.95); background:rgba(59,130,246,.10)}
.admin-chip.accent{border-color:rgba(168,85,247,.35); color:rgba(192,132,252,.95); background:rgba(168,85,247,.08)}
.admin-chip.danger{border-color:rgba(248,113,113,.30); color:rgba(248,113,113,.90); background:rgba(248,113,113,.06)}

/* ── Admin Sub-tabs ────────────────────────────────────────────────── */
.admin-subtabs{
  display:flex; flex-wrap:wrap; gap:4px;
  margin:16px 0 18px; padding:4px;
  background:rgba(255,255,255,.03); border-radius:10px;
  border:1px solid rgba(255,255,255,.06);
}
.admin-subtab{
  flex:1; min-width:0; padding:8px 12px;
  font-size:12px; font-weight:600; letter-spacing:.3px;
  color:rgba(255,255,255,.65); background:transparent;
  border:none; border-radius:7px; cursor:pointer;
  transition:all .15s ease; white-space:nowrap;
}
.admin-subtab:hover{ color:rgba(255,255,255,.7); background:rgba(255,255,255,.04); }
.admin-subtab.active{
  color:rgba(192,132,252,.95); background:rgba(139,92,246,.12);
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.admin-subtab-header{ margin-bottom:16px; }
.admin-subtab-header h4{ margin:0 0 4px; }
.admin-subtab-header .hint{ margin:0; }

/* ── Admin Tool Cards ─────────────────────────────────────────────── */
.admin-tool-cards{ display:flex; flex-direction:column; gap:12px; }
.admin-tool-card{
  display:flex; align-items:center; gap:14px;
  padding:16px 18px; border-radius:10px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  transition:border-color .15s ease;
}
.admin-tool-card:hover{ border-color:rgba(255,255,255,.10); }
.admin-tool-card--destructive{ border-color:rgba(248,113,113,.12); }
.admin-tool-card--destructive:hover{ border-color:rgba(248,113,113,.25); }
.admin-tool-card-icon{ font-size:22px; flex-shrink:0; width:36px; text-align:center; }
.admin-tool-card-body{ flex:1; min-width:0; }
.admin-tool-card-body strong{ display:block; font-size:13px; color:rgba(255,255,255,.85); margin-bottom:2px; }
.admin-tool-card-body .hint{ font-size:12px; margin:0; }
.admin-tool-card .btn{ flex-shrink:0; }

.admin-prov-drawer h3{margin:0 0 12px; font-size:15px}
.admin-prov-drawer h4{margin:18px 0 8px; font-size:13px; opacity:.8}
.admin-prov-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px}
.admin-prov-grid > div{padding:10px; border-radius:8px; background:rgba(255,255,255,.04); font-size:12px; text-align:center}
.admin-prov-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.admin-table--compact{font-size:12px}
.admin-table--compact td,.admin-table--compact th{padding:6px 10px}

.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,.65);
}
.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:44px !important; height:44px; 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,.65);
  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,.65); 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,.65); 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,.65); 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,.65); 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,.65);
  margin:0; max-width:36ch;
}

/* ── Public profile works: empty state ── */
.pp-works-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:6px; padding:56px 24px 52px;
}
@media(prefers-reduced-motion:no-preference){
  .pp-works-empty{ animation: profileEmptyFadeIn .45s ease both; }
}
.pp-works-empty-icon{
  width:56px; height:56px; margin-bottom:10px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.22);
}
.pp-works-empty-icon svg{ width:28px; height:28px; }
.pp-works-empty-title{
  font-size:15px; font-weight:700;
  color:rgba(255,255,255,.72);
  margin:0; letter-spacing:.01em;
}
.pp-works-empty-text{
  font-size:13px; line-height:1.55;
  color:rgba(255,255,255,.38);
  margin:0; max-width:32ch;
}

.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:60px; height:80px; border-radius:8px; }

.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; height:100%;}
.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; margin-top:auto}
.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-btn-promote{
  background:linear-gradient(135deg, rgba(139,92,246,.85) 0%, rgba(109,40,217,.8) 100%) !important;
  color:#fff !important; border:1px solid rgba(167,139,250,.3) !important;
  box-shadow:0 2px 10px rgba(139,92,246,.2);
  transition: background .2s, transform .2s, box-shadow .2s;
}
.library-btn-promote:hover{
  transform:translateY(-1px); box-shadow:0 4px 16px rgba(139,92,246,.35);
  border-color:rgba(167,139,250,.5) !important;
}
.library-btn-promote:disabled{ opacity:.5; pointer-events:none; }
.library-btn-promoted{
  background:linear-gradient(135deg, rgba(34,197,94,.15) 0%, rgba(22,163,74,.1) 100%) !important;
  color:rgba(34,197,94,1) !important; border:1px solid rgba(34,197,94,.3) !important;
  cursor:default; font-size:13px; display:inline-flex; align-items:center; gap:6px;
  padding:10px 12px; border-radius:8px; line-height:1.1;
}
.library-btn-promoted .btn-icon{ width:15px; height:15px; color:rgba(34,197,94,.8); }
.library-btn-promoted .promote-countdown{ font-variant-numeric:tabular-nums; font-weight:600; }
.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}
/* ── Trash card redesign ──────────────────────────────────────────── */
.library-card-trash{
  border-color:rgba(239,68,68,.10);
  background:rgba(239,68,68,.02);
}
.library-card-trash:hover{
  border-color:rgba(239,68,68,.18);
  background:rgba(239,68,68,.035);
}

.library-card-trash .library-card-head{ align-items:stretch; }
.trash-card-desc{
  margin-top:6px; font-size:12.5px; line-height:1.45;
  color:rgba(255,255,255,.48); display:-webkit-box;
  -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* Trash footer: timeline → progress bar → actions */
.trash-card-footer{
  display:flex; flex-direction:column; gap:6px;
  padding-top:8px; border-top:1px solid rgba(255,255,255,.04);
}

/* Timeline rows — stacked, each with icon + label */
.trash-timeline{
  display:flex; flex-direction:column; gap:3px;
}
.trash-tl-row{
  display:flex; align-items:center; gap:5px;
  font-size:11.5px; color:rgba(255,255,255,.42); font-weight:500;
  line-height:1.2;
}
.trash-tl-icon{
  width:13px; height:13px; flex:0 0 13px; opacity:.4;
}
.trash-tl-row.is-urgent{
  color:rgb(251,191,36);
}
.trash-tl-row.is-urgent .trash-tl-icon{ opacity:.7; }
.trash-tl-row.is-expired{
  color:rgb(239,68,68); font-weight:700;
}
.trash-tl-row.is-expired .trash-tl-icon{ opacity:.8; }

/* Progress bar */
.trash-progress-bar{
  height:3px; border-radius:2px; background:rgba(255,255,255,.06);
  overflow:hidden;
}
.trash-progress-fill{
  height:100%; border-radius:2px; transition:width .3s ease;
  background:linear-gradient(90deg, rgba(34,197,94,.65), rgba(34,197,94,.35));
}
.trash-progress-fill.is-urgent{
  background:linear-gradient(90deg, rgba(251,191,36,.75), rgba(251,191,36,.35));
}
.trash-progress-fill.is-expired{
  background:linear-gradient(90deg, rgba(239,68,68,.75), rgba(239,68,68,.35));
  width:100% !important;
}

/* Compact trash action buttons */
.trash-card-actions{
  display:flex; align-items:center; gap:6px;
}
.trash-card-actions .btn{
  width:auto; min-width:0; padding:5px 10px; font-size:11px;
  border-radius:7px; font-weight:600; line-height:1;
  display:inline-flex; align-items:center; gap:4px;
}
.trash-card-actions .btn .btn-icon{ width:12px; height:12px; margin:0; }
.trash-card-actions .btn svg:not(.btn-icon){ width:12px; height:12px; }
.trash-btn-restore{ color:rgba(255,255,255,.75); }
.trash-btn-purge{ padding:5px 8px !important; }
@media(max-width:480px){
  .trash-btn-label{ display:none; }
  .trash-card-actions .btn{ padding:5px 7px; }
}

.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)}

/* Legal notice banner (landing) */
.nq-legal-notice{
  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;
}
.nq-legal-notice-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.nq-legal-notice-text{
  color:rgba(255,255,255,.86);
  font-size:12px;
  line-height:1.35;
}
.nq-legal-notice-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){
  .nq-legal-notice-inner{flex-direction:column; align-items:stretch}
  .nq-legal-notice-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,.65); 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,.65); 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; }

.reg-error-list{
  margin:10px 0 0;
  padding:0 0 0 18px;
  text-align:left;
  color:#fecaca;
  font-size:12.5px;
  line-height:1.45;
}
.reg-error-list li + li{ margin-top:4px; }

.reg-field-invalid .input,
.input.reg-field-invalid,
.reg-field-invalid .gender-group,
.reg-field-invalid .reg-role-cards,
.reg-role-cards.reg-field-invalid,
.gender-group.reg-field-invalid{
  border-color:rgba(248,113,113,.72) !important;
  box-shadow:0 0 0 2px rgba(248,113,113,.16), 0 0 0 6px rgba(248,113,113,.08);
}

.reg-field-invalid .reg-role-card,
.reg-role-card.reg-field-invalid,
.reg-field-invalid .gender-option,
.gender-option.reg-field-invalid{
  border-color:rgba(248,113,113,.72) !important;
}

.reg-field-blink{
  animation:regFieldBlink .48s ease;
}

@keyframes regFieldBlink{
  0%{ transform:translateX(0); }
  18%{ transform:translateX(-4px); }
  36%{ transform:translateX(4px); }
  54%{ transform:translateX(-3px); }
  72%{ transform:translateX(3px); }
  100%{ transform:translateX(0); }
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .reg-card .field{ animation:none; }
  .reg-progress-fill{ transition:none; }
  .reg-submit-btn::after{ animation:none; }
  .reg-field-blink{ 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,.65); 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,.65);
}
.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,.65);
  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,.65);
}
.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;
}
.custom-select option:checked{
  background:linear-gradient(0deg, #2a3a5c 0%, #2a3a5c 100%) !important;
  color:#fff !important;
}

/* 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,.72);
}
.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,.65);
  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,.65);
  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-tag-label-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.sw-tag-counter{
  font-size:11px;
  font-weight:800;
  letter-spacing:.02em;
  color:rgba(255,255,255,.72);
}

.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-help{
  font-size:11px;
  color:rgba(255,255,255,.58);
  margin-top:-2px;
}
.sw-tag-picker-row{ position:relative; }
.sw-tag-grid-wrap{
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  padding:14px 12px;
  min-height:80px;
  max-height:340px;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.12) transparent;
}
.sw-tag-grid{
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* ── Group sections ── */
.sw-tag-group{ display:flex; flex-direction:column; gap:8px; }
.sw-tag-group-header{
  display:flex; align-items:center; gap:6px;
  padding-bottom:4px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.sw-tag-group-ico{
  display:flex; align-items:center; justify-content:center;
  width:20px; height:20px; flex-shrink:0;
  color:rgba(165,180,252,.8);
}
.sw-tag-group-ico svg{ width:14px; height:14px; }
.sw-tag-group-label{
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:rgba(255,255,255,.48);
}
.sw-tag-group-suggested .sw-tag-group-header{
  border-bottom-color:rgba(124,58,237,.25);
}
.sw-tag-group-suggested .sw-tag-group-ico{ color:rgba(250,204,21,.85); }
.sw-tag-group-suggested .sw-tag-group-label{ color:rgba(250,204,21,.72); }

.sw-tag-group-items{
  display:flex; flex-wrap:wrap; gap:6px;
}

/* ── Tag pills ── */
.sw-tag-grid-item{
  display:inline-flex; align-items:center; gap:5px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.88);
  border-radius:999px;
  padding:6px 12px 6px 8px;
  font-size:12px;
  font-weight:600;
  line-height:1.25;
  white-space:nowrap;
  cursor:pointer;
  transition:all .16s ease;
}
.sw-tag-grid-item:hover{
  border-color:rgba(96,165,250,.45);
  background:rgba(96,165,250,.10);
  transform:translateY(-1px);
}
.sw-tag-grid-item.active{
  border-color:rgba(96,165,250,.65);
  background:linear-gradient(135deg, rgba(96,165,250,.22), rgba(124,58,237,.18));
  color:#dbeafe;
  box-shadow:0 0 0 2px rgba(96,165,250,.15), 0 2px 8px rgba(96,165,250,.10);
}
.sw-tag-grid-item:disabled{
  opacity:.38;
  cursor:not-allowed;
  transform:none;
}
.sw-tag-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; flex-shrink:0;
  opacity:.65;
}
.sw-tag-ico svg{ width:13px; height:13px; }
.sw-tag-grid-item.active .sw-tag-ico{ opacity:.9; }

/* Suggested section pills get a subtle gold glow */
.sw-tag-group-suggested .sw-tag-grid-item{
  border-color:rgba(250,204,21,.18);
  background:rgba(250,204,21,.05);
}
.sw-tag-group-suggested .sw-tag-grid-item:hover{
  border-color:rgba(250,204,21,.4);
  background:rgba(250,204,21,.12);
}
.sw-tag-group-suggested .sw-tag-grid-item.active{
  border-color:rgba(250,204,21,.55);
  background:linear-gradient(135deg, rgba(250,204,21,.18), rgba(124,58,237,.15));
  color:#fef9c3;
  box-shadow:0 0 0 2px rgba(250,204,21,.12);
}

.sw-tag-grid-loading{
  padding:16px 6px;
  color:rgba(255,255,255,.72);
  font-size:12px;
  text-align:center;
}
.sw-tag-grid-empty{
  padding:8px 6px;
  color:rgba(255,255,255,.65);
  font-size:12px;
}
.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: 320px;
  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-tag-suggested{ color:#a5b4fc; font-weight:500; }
.sw-tag-section-header{
  padding:6px 12px 4px; font-size:10px; text-transform:uppercase;
  letter-spacing:.06em; color:rgba(255,255,255,.4); font-weight:600;
  border-top:1px solid rgba(255,255,255,.06); margin-top:2px;
}
.sw-tag-section-header:first-child{ border-top:none; margin-top:0; }

@media(max-width:720px){
  .sw-tag-grid-wrap{ max-height:260px; padding:10px 8px; }
  .sw-tag-grid-item{ font-size:11px; padding:5px 10px 5px 7px; }
}

.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,.65); }
.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,.65);
  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:rgba(255,255,255,.07); background-image:url('/assets/brand/narqx-icon-white.avif'), linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.04)); background-position:center, center; background-size:70%, cover; background-repeat:no-repeat, no-repeat; position:relative; overflow:hidden; flex-shrink:0; border:1px solid rgba(255,255,255,.10); box-shadow:0 2px 8px rgba(0,0,0,.20)}
/* Beta stamp — rotated seal over brand */
.brand{ position: relative; }
.app-logo{ position: relative; }
.mobile-topbar-title{ position: relative; display: inline-flex; align-items: center; }
.brand-beta-tag{
  position: absolute;
  top: -7px; right: -18px;
  display: inline-block;
  padding: 1px 6px; border-radius: 4px;
  font-size: 8px; font-weight: 900; letter-spacing: 1.2px;
  text-transform: uppercase;
  background: linear-gradient(135deg, rgba(99,102,241,.35), rgba(139,92,246,.35));
  color: rgba(167,139,250,.95);
  border: 1.5px solid rgba(139,92,246,.3);
  line-height: 1.3;
  white-space: nowrap;
  transform: rotate(18deg);
  transform-origin: center center;
  pointer-events: none;
  z-index: 2;
  animation: betaTagPulse 3s ease-in-out infinite;
}
.brand-beta-tag[hidden]{ display: none; }
@keyframes betaTagPulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(139,92,246,.0); }
  50%{ box-shadow: 0 0 6px 1px rgba(139,92,246,.18); }
}
/* Landing hero: larger stamp */
.hero-text{ position: relative; }
.brand-hero .brand-beta-tag,
.brand-hero + .brand-beta-tag{
  font-size: 9px; padding: 1px 7px; border-radius: 4px;
  top: -2px; right: -22px;
  letter-spacing: 1.2px;
  transform: rotate(22deg);
}
/* Nav sidebar: smaller stamp */
.app-logo-text{ position: relative; }
.app-logo-text .brand-beta-tag{
  font-size: 7px; padding: 1px 4px; border-radius: 3px;
  top: -5px; right: -14px;
  letter-spacing: 1px;
}
/* Hide in all footers (landing + app + nav legal) */
.footer .brand-beta-tag,
.footer-landing .brand-beta-tag,
.app-nav-legal .brand-beta-tag{ display: none !important; }
@media(prefers-reduced-motion:reduce){
  .brand-beta-tag{ animation: none; }
}

.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,rgba(255,255,255,.12),rgba(255,255,255,.05));
  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 4px 12px rgba(0,0,0,.25);
}
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,rgba(255,255,255,.12),rgba(255,255,255,.05));
  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 4px 12px rgba(0,0,0,.25);
}
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 60s ease-in-out infinite alternate;
  animation-play-state: inherit;
  contain: strict;
  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,.05) 40deg,
      rgba(96,165,250,.06) 60deg,
      rgba(139,92,246,.05) 120deg,
      rgba(139,92,246,.04) 150deg,
      transparent 180deg,
      rgba(147,197,253,.03) 220deg,
      rgba(147,197,253,.04) 240deg,
      rgba(167,139,250,.05) 300deg,
      rgba(167,139,250,.03) 340deg,
      transparent 360deg
    );
  filter: blur(40px);
  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.04;
  mix-blend-mode: overlay;
  pointer-events:none;
  contain: strict;
}

@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; }

/* ── Cursor dot (fades inside book area) ── */
.cursor-dot{
  position:fixed; top:-4px; left:-4px;
  width:8px; height:8px;
  border-radius:50%;
  background:rgba(255,255,255,.8);
  box-shadow:0 0 6px 1px rgba(147,197,253,.35);
  pointer-events:none;
  z-index:99999;
  opacity:0;
  transition: opacity .15s ease-out;
  will-change:transform, opacity;
}
@media(prefers-reduced-motion:reduce){
  .cursor-dot{ display:none; }
}

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

/* Landing hero must center vertically in the available viewport instead of
 * sitting anchored at the top of <main>. The body is a grid (auth 1fr auto)
 * so <main> already owns all the height between header and footer — we just
 * tell it to center its only block child (.hero-grid). This makes the hero
 * look balanced at ANY zoom / window height (the 100%-zoom "stuck to the
 * bottom" bug the owner reported 2026-05-30), and replaces the brittle
 * fixed 56px padding with min() that shrinks on short viewports. The fixed/
 * absolute overlays (.hero-noise, .echo-container) are unaffected by flex. */
main:has(> .hero-grid){
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
main:has(> .hero-grid) .hero{ padding: min(56px, 4vh) 0; width:100%; }
/* .hero-grid carries the generic .container class, which sets
 * `margin:48px auto`. That top/bottom margin fought the flex centering and
 * pushed the hero downward. Zero it so justify-content:center actually
 * centers (bug 2026-05-30, incognito-confirmed). */
main:has(> .hero-grid) > .hero-grid{ margin-top:0 !important; margin-bottom:0 !important; }

/* Auth pages (login / register / forgot-password) — same vertical-centering
 * treatment as the landing hero (owner request 2026-05-30). The card used to
 * sit near the top of <main> with a big empty gap below. We make <main> a
 * flex column and give the container `margin:auto` (NOT justify-content):
 * with auto margins the card centers when it fits, and — crucially for the
 * tall register form — the margins collapse to 0 when the content exceeds
 * the viewport, so it scrolls naturally from the top instead of clipping. */
main:has(> .login-container),
main:has(> .reg-container){
  display:flex;
  flex-direction:column;
}
main:has(> .login-container) > .login-container,
main:has(> .reg-container) > .reg-container{
  margin-top:auto !important;
  margin-bottom:auto !important;
}

/* 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;
  position: relative;
  width: fit-content;
}

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

/* 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:1 base (was 0): the letters used to depend 100% on the JS reveal
   * animation to become visible, so if it never ran (reduced-motion path,
   * JS error, slow boot) the whole NARQX title stayed invisible
   * (bug 2026-05-30). Now they're visible by default and the animation only
   * adds the entrance effect from its `from{opacity:0}` keyframe. */
  opacity:1; filter:none;
  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 {
  from { opacity:0; filter:blur(12px); }
  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;
  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 var(--mr,110px) at var(--mx,-200px) var(--my,-200px), black 0%, transparent 100%);
  mask-image: radial-gradient(circle var(--mr,110px) at var(--mx,-200px) var(--my,-200px), black 0%, transparent 100%);
  transition: opacity .3s ease;
}
/* Glow around book on hover — separate layer, no per-frame recalculation */
.hero-book::after{
  content:""; position:absolute; inset:-20px; z-index:0;
  border-radius:20px;
  background:radial-gradient(circle at 50% 50%, rgba(96,165,250,.25) 0%, transparent 60%);
  opacity:0; transition: opacity .3s ease;
  pointer-events:none;
}
.hero-book:hover::after,
.hero-book.is-hovering::after{
  opacity:1;
}

/* ── 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); }
}

/* ── 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;
}

/* ── 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,.65);
  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-card{ transition:opacity .5s cubic-bezier(.4,0,.2,1), transform .5s cubic-bezier(.4,0,.2,1); }
.sf-card.sf-card--hiding{ opacity:0; transform:scale(.97) translateY(-6px); pointer-events:none; }
.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; overflow:hidden; }
.sf-item{
  display:flex; align-items:center; gap:10px;
  transform-origin:center right;
  transition:opacity .35s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.4,0,.2,1), max-height .35s cubic-bezier(.4,0,.2,1);
  max-height:60px; opacity:1; transform:translateX(0);
}
.sf-item.sf-item--out{
  opacity:0; transform:translateX(80px) scale(.92); max-height:0; pointer-events:none;
  transition:opacity .32s cubic-bezier(.4,0,.2,1), transform .32s cubic-bezier(.4,0,.2,1), max-height .28s cubic-bezier(.4,0,.2,1) .06s;
}
.sf-item.sf-item--in{
  opacity:0; transform:translateX(-40px) scale(.96); max-height:0;
}
.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,.65); }
.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,.72); 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;
  transition:background .2s, color .2s, transform .15s cubic-bezier(.4,0,.2,1); }
.sf-follow-btn:active{ transform:scale(.93); }
@media(prefers-reduced-motion:reduce){
  .sf-card,.sf-item,.sf-item.sf-item--out,.sf-item.sf-item--in,.sf-follow-btn{ transition:none !important; animation:none !important; }
}

.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:60px; height:80px; border-radius: 8px; overflow:hidden; flex: 0 0 60px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px 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%; min-width:0; min-height:0; border-radius:0; position:absolute; inset:0; overflow:hidden; }
.trending-cover .nq-cover picture{ display:block; width:100%; height:100%; position:absolute; inset:0; }
.trending-cover .nq-cover-img{ width:100%; height:100%; object-fit:cover; display:block; position:absolute; inset:0; }
.trending-cover .nq-cover-fallback{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:1.2rem; font-weight:900; color:rgba(255,255,255,.15); background:rgba(255,255,255,.04); position:absolute; inset: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,.65); 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,.65); 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,.65); 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-sheet-hint{
  font-size:13px; color:rgba(255,255,255,.65); line-height:1.5; text-align:center;
  padding:16px 12px; border:1px dashed rgba(255,255,255,.12); border-radius:10px;
  font-style:italic;
 }
 .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:10px; cursor:pointer;
  min-width:44px; min-height:44px;
  color:rgba(255,255,255,.72); 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,.65); 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,.65);
}
.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,.65); 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,.72);
}
.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; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Search Results 2026 — Tab-specific layouts
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Shared helpers ── */
.sr-avatar, .sr-carousel-avatar, .sr-ulist-avatar{
  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;
}
.sr-avatar img, .sr-carousel-avatar img, .sr-ulist-avatar img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.sr-avatar-letter{
  font-weight:800; color:rgba(255,255,255,.6); line-height:1;
}
.sr-cover, .sr-feed-cover, .sr-nfx-cover, .sr-chapter-cover{
  overflow:hidden; position:relative; background:rgba(255,255,255,.04);
}
.sr-cover img, .sr-feed-cover img, .sr-nfx-cover img, .sr-chapter-cover img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.sr-cover--empty{
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(96,165,250,.08), rgba(139,92,246,.06));
}
.sr-cover-letter{
  font-weight:900; font-size:24px; color:rgba(255,255,255,.25);
}
.sr-cover-logo{
  position:absolute; bottom:4px; right:4px; opacity:.45;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.8));
}
.sr-follow-btn{
  width:auto; min-width:0; padding:5px 14px; font-size:11px;
  border-radius:999px; font-weight:700; white-space:nowrap;
}

/* ── "All" tab: User Carousel ── */
.sr-carousel-section{
  margin-bottom:18px;
}
.sr-carousel-track-wrap{
  position:relative;
  mask-image: linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%);
}
.sr-carousel-track{
  display:flex; gap:14px; overflow-x:auto; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding:8px 4px 12px;
  scrollbar-width:none;
}
.sr-carousel-track::-webkit-scrollbar{ display:none; }
.sr-carousel-card{
  flex:0 0 110px; display:flex; flex-direction:column; align-items:center;
  gap:6px; text-align:center;
}
.sr-carousel-avatar{
  width:64px; height:64px; font-size:22px;
}
.sr-carousel-avatar-link{
  text-decoration:none; color:inherit;
}
.sr-carousel-avatar-link:hover .sr-carousel-avatar{
  transform:scale(1.08);
  box-shadow:0 0 12px rgba(96,165,250,.2);
}
.sr-carousel-handle{
  font-size:11.5px; font-weight:700; color:rgba(255,255,255,.55);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%; text-decoration:none;
  transition:color .14s ease;
}
.sr-carousel-handle:hover{ color:var(--primary); }

/* ── "All" tab: Feed items (books/chapters) ── */
.sr-feed-section{
  display:flex; flex-direction:column; gap:10px;
}
.sr-feed-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;
  position:relative;
}
.sr-feed-item:hover{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.12);
}
.sr-feed-cover{
  width:52px; height:72px; border-radius:6px; flex-shrink:0;
}
.sr-feed-body{ flex:1; min-width:0; }
.sr-feed-title{ font-weight:800; font-size:14px; letter-spacing:.1px; }
.sr-feed-subtitle{ font-size:12px; color:rgba(255,255,255,.65); margin-top:2px; }
.sr-feed-author{ font-size:12px; color:rgba(255,255,255,.65); margin-top:2px; }
.sr-feed-meta{ font-size:11px; color:rgba(255,255,255,.35); margin-top:3px; }
.sr-feed-actions{ margin-top:8px; display:flex; gap:8px; }
.sr-feed-actions .btn{
  width:auto; min-width:0; padding:6px 16px; font-size:12px;
  border-radius:999px; font-weight:600;
}
.sr-feed-type-badge{
  position:absolute; top:10px; right:12px;
  display:inline-flex; align-items:center; padding:3px 10px;
  border-radius:999px; font-size:10px; font-weight:700;
  border:1px solid rgba(255,255,255,.10); color:rgba(255,255,255,.65);
  background:rgba(255,255,255,.03);
}

/* ── "Users" tab: List cards (follower-style) ── */
.sr-ulist-section{
  display:flex; flex-direction:column; gap:6px;
}
.sr-ulist-card{
  display:flex; align-items:center; gap:14px;
  padding:12px 14px; border-radius:14px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.02);
  transition:background .16s ease, border-color .16s ease, transform .16s ease;
}
.sr-ulist-card:hover{
  background:rgba(96,165,250,.04);
  border-color:rgba(96,165,250,.14);
  transform:translateX(2px);
}
.sr-ulist-avatar{
  width:46px; height:46px; font-size:16px;
}
.sr-ulist-avatar-link{
  text-decoration:none; color:inherit; flex-shrink:0;
}
.sr-ulist-avatar-link:hover .sr-ulist-avatar{
  transform:scale(1.06);
  box-shadow:0 0 8px rgba(96,165,250,.15);
}
.sr-ulist-info{ flex:1; min-width:0; }
.sr-ulist-name-row{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.sr-ulist-name{
  font-weight:800; font-size:14px; color:#fff;
  text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .14s ease;
}
.sr-ulist-name:hover{ color:var(--primary); }
.sr-ulist-handle{
  font-size:12px; color:rgba(255,255,255,.72);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sr-ulist-roles{
  display:inline-flex; gap:3px; align-items:center;
}
.sr-ulist-desc{
  font-size:12px; color:rgba(255,255,255,.35); margin-top:3px;
  line-height:1.4; display:-webkit-box; -webkit-line-clamp:2;
  line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.sr-ulist-actions{
  display:flex; gap:6px; flex-shrink:0; align-items:center;
}
.sr-ulist-msg-btn{
  width:auto; min-width:0; padding:5px 12px; font-size:11px;
  border-radius:999px; font-weight:700;
}
.sr-ulist-pagination{
  display:flex; align-items:center; justify-content:center;
  gap:12px; margin-top:12px; padding:8px 0;
}
.sr-ulist-pagination .btn{
  width:auto; min-width:0; padding:6px 14px; font-size:13px;
  border-radius:10px; font-weight:700;
}
.sr-ulist-page-info{
  font-size:12px; color:rgba(255,255,255,.65); font-weight:600;
}

/* ── "Books" tab: Netflix-style grid ── */
.sr-nfx-grid{
  display:flex; flex-wrap:wrap; gap:12px;
  padding:4px 0;
}
.sr-nfx-card{
  flex:0 0 155px; border-radius:10px; overflow:hidden;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);
  cursor:pointer; position:relative;
  transition:transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s ease, border-color .22s ease;
}
.sr-nfx-card:hover{
  transform:scale(1.06);
  border-color:rgba(255,255,255,.16);
  box-shadow:0 12px 36px rgba(0,0,0,.45), 0 0 20px rgba(var(--primary-rgb,99,102,241),.15);
  z-index:5;
}
.sr-nfx-card:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
.sr-nfx-cover{
  width:100%; aspect-ratio:2/3; border-radius:0;
}
.sr-nfx-overlay{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,.88) 0%, transparent 55%);
  opacity:0; transition:opacity .22s ease;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:10px; pointer-events:none;
}
.sr-nfx-card:hover .sr-nfx-overlay{ opacity:1; pointer-events:auto; }
.sr-nfx-overlay-title{
  font-size:12px; font-weight:800; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sr-nfx-overlay-author{
  font-size:10px; color:rgba(255,255,255,.6);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sr-nfx-action{
  margin-top:6px; padding:5px 14px; font-size:11px; font-weight:700;
  border-radius:8px; border:none; cursor:pointer;
  background:var(--primary); color:#fff;
  transition:background .14s ease, transform .1s ease;
  align-self:flex-start;
}
.sr-nfx-action:hover{ background:rgba(var(--primary-rgb,99,102,241),.85); transform:translateY(-1px); }
.sr-nfx-info{
  padding:8px 10px 10px; min-width:0;
}
.sr-nfx-title{
  font-size:12.5px; font-weight:800; letter-spacing:.1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#fff;
}
.sr-nfx-author{
  font-size:11px; color:rgba(255,255,255,.65);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px;
}

/* ── Search: Provenance badges ── */
.sr-nfx-cover-wrap{
  position:relative; width:100%; aspect-ratio:2/3; overflow:hidden;
}
.sr-nfx-cover-wrap .sr-nfx-cover{ width:100%; height:100%; aspect-ratio:auto; }
.sr-nfx-verified{
  width:13px; height:13px; vertical-align:middle; margin-left:3px; flex-shrink:0;
  filter:drop-shadow(0 0 2px rgba(34,197,94,.35));
}
.sr-nfx-ai-label{
  position:absolute; bottom:5px; left:5px;
  font-size:7px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  color:#fff; background:rgba(220,38,38,.85); border-radius:3px;
  padding:2px 4px; line-height:1.2; pointer-events:none;
}

/* ── "Chapters" tab: Card list ── */
.sr-chapter-section{
  display:flex; flex-direction:column; gap:8px;
}
.sr-chapter-card{
  display:flex; align-items:center; gap:14px;
  padding:12px 14px; border-radius:14px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.02);
  transition:background .15s ease, border-color .15s ease;
}
.sr-chapter-card:hover{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.12);
}
.sr-chapter-cover{
  width:44px; height:64px; border-radius:5px; flex-shrink:0;
}
.sr-chapter-body{ flex:1; min-width:0; }
.sr-chapter-title{
  font-weight:800; font-size:14px; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sr-chapter-book{
  font-size:12px; color:rgba(255,255,255,.65); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sr-chapter-author{
  font-size:11px; color:rgba(255,255,255,.35); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sr-chapter-actions{
  flex-shrink:0; display:flex; gap:6px;
}
.sr-chapter-actions .btn{
  width:auto; min-width:0; padding:6px 16px; font-size:12px;
  border-radius:999px; font-weight:600;
}

/* ── Search Results Responsive ── */
@media(max-width:640px){
  .sr-carousel-card{ flex:0 0 90px; }
  .sr-carousel-avatar{ width:52px; height:52px; }
  .sr-nfx-grid{ gap:8px; }
  .sr-nfx-card{ flex:0 0 125px; }
  .sr-ulist-card{ flex-direction:column; align-items:flex-start; gap:10px; }
  .sr-ulist-actions{ width:100%; justify-content:flex-end; }
  .sr-feed-item{ flex-direction:column; gap:10px; }
  .sr-chapter-card{ flex-direction:column; align-items:flex-start; gap:10px; }
}
@media(min-width:900px){
  .sr-nfx-card{ flex:0 0 170px; }
}
@media(min-width:1200px){
  .sr-nfx-card{ flex:0 0 185px; }
}

@media(prefers-reduced-motion:reduce){
  .sr-nfx-card{ transition:none; }
  .sr-nfx-card:hover{ transform:none; }
  .sr-nfx-overlay{ transition:none; }
  .sr-carousel-track{ scroll-behavior:auto; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Birthday Celebration — Spectacular overlay, FAB, profile decorations
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Full-screen overlay ── */
.bday-overlay{
  position:fixed; inset:0; z-index:10000;
  pointer-events:auto; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:rgba(8,14,28,.82);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0;
  transition:opacity .5s ease;
}
.bday-overlay--active{ opacity:1; }
.bday-overlay--closing{
  pointer-events:none;
  opacity:0;
  transition:opacity .8s ease;
}

.bday-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none;
}

/* ── Center content ── */
.bday-center{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
  gap:12px; padding:28px 40px;
  max-width:90vw;
}

/* ── NARQX Logo ── */
.bday-logo-wrap{
  color:rgba(255,255,255,.9);
  filter:drop-shadow(0 0 30px rgba(255,215,0,.4)) drop-shadow(0 0 60px rgba(255,100,100,.2));
  margin-bottom:8px;
}
.bday-logo{
  width:clamp(140px, 28vw, 220px);
  height:auto;
  object-fit:contain;
  display:block;
}
@media(prefers-reduced-motion:no-preference){
  .bday-logo-wrap{
    animation:bday-logo-entrance 1.2s cubic-bezier(.16,1,.3,1) both,
              bday-logo-glow 3s ease-in-out 1.2s infinite alternate;
  }
  @keyframes bday-logo-entrance{
    0%{ opacity:0; transform:scale(.3) translateY(30px); filter:drop-shadow(0 0 0 transparent) blur(8px); }
    60%{ opacity:1; transform:scale(1.08) translateY(-5px); filter:drop-shadow(0 0 40px rgba(255,215,0,.6)) blur(0); }
    100%{ opacity:1; transform:scale(1) translateY(0); filter:drop-shadow(0 0 30px rgba(255,215,0,.4)) blur(0); }
  }
  @keyframes bday-logo-glow{
    0%{ filter:drop-shadow(0 0 30px rgba(255,215,0,.4)) drop-shadow(0 0 60px rgba(255,100,100,.15)); }
    50%{ filter:drop-shadow(0 0 50px rgba(255,215,0,.6)) drop-shadow(0 0 80px rgba(100,200,255,.25)); }
    100%{ filter:drop-shadow(0 0 30px rgba(255,100,200,.4)) drop-shadow(0 0 60px rgba(255,215,0,.2)); }
  }
}

/* ── Cake icon ── */
.bday-cake-icon{
  color:#fff;
  filter:drop-shadow(0 0 20px rgba(255,215,0,.5));
}
@media(prefers-reduced-motion:no-preference){
  .bday-cake-icon{
    animation:bday-cake-pop .8s cubic-bezier(.34,1.56,.64,1) .4s both;
  }
  @keyframes bday-cake-pop{
    0%{ opacity:0; transform:scale(0) rotate(-20deg); }
    70%{ transform:scale(1.15) rotate(3deg); }
    100%{ opacity:1; transform:scale(1) rotate(0); }
  }
}

/* ── Banner text ── */
.bday-banner{
  font-size:clamp(20px, 5vw, 42px); font-weight:900;
  color:#fff; text-align:center; line-height:1.3;
  text-shadow:0 2px 16px rgba(0,0,0,.6), 0 0 50px rgba(255,200,50,.25);
  padding:0; margin-top:4px;
}
@media(prefers-reduced-motion:no-preference){
  .bday-banner{
    animation:bday-text-reveal 1s cubic-bezier(.16,1,.3,1) .6s both;
  }
  @keyframes bday-text-reveal{
    0%{ opacity:0; transform:translateY(24px) scale(.9); letter-spacing:8px; }
    100%{ opacity:1; transform:translateY(0) scale(1); letter-spacing:normal; }
  }
}

/* ── Subtitle: app icon + candles on top ── */
.bday-sub-logo{
  display:flex; align-items:center; justify-content:center;
  margin-top:8px;
}
@media(prefers-reduced-motion:no-preference){
  .bday-sub-logo{
    animation:bday-sub-fade 1s ease 1.2s both;
  }
  @keyframes bday-sub-fade{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
}
.bday-icon-with-candles{
  display:flex; flex-direction:column; align-items:center;
  position:relative;
}
.bday-app-icon{
  width:52px; height:52px;
  border-radius:14px;
  object-fit:contain;
  filter:drop-shadow(0 0 18px rgba(255,215,0,.45)) drop-shadow(0 2px 8px rgba(0,0,0,.4));
}
@media(prefers-reduced-motion:no-preference){
  .bday-app-icon{
    animation:bday-icon-breathe 3s ease-in-out 1.6s infinite alternate;
  }
  @keyframes bday-icon-breathe{
    0%{ filter:drop-shadow(0 0 18px rgba(255,215,0,.45)) drop-shadow(0 2px 8px rgba(0,0,0,.4)); transform:scale(1); }
    100%{ filter:drop-shadow(0 0 28px rgba(255,215,0,.7)) drop-shadow(0 2px 12px rgba(0,0,0,.3)); transform:scale(1.06); }
  }
}

/* ── Candles (3, centered above icon) ── */
.bday-candles-group{
  display:flex; align-items:flex-end; justify-content:center;
  gap:5px; margin-bottom:-2px;
}
.bday-candle{
  display:flex; flex-direction:column; align-items:center;
  animation:bday-candle-cycle 4s ease-in-out infinite;
}
.bday-candle--1{ animation-delay:0s; }
.bday-candle--2{ animation-delay:.15s; }
.bday-candle--3{ animation-delay:.3s; }

.bday-stick{
  width:3px; height:14px;
  border-radius:2px 2px 1px 1px;
  background:linear-gradient(180deg, #ffd93d 0%, #ff6b81 100%);
}
.bday-flame{
  width:7px; height:10px;
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  background:radial-gradient(ellipse at 50% 80%, #fff 0%, #ffd93d 30%, #ff9f43 60%, #ff6b6b 100%);
  filter:blur(.5px);
  transform-origin:bottom center;
  animation:bday-flame-flicker .4s ease-in-out infinite alternate,
            bday-flame-cycle 4s ease-in-out infinite;
}
.bday-candle--1 .bday-flame{ animation-delay:0s, 0s; }
.bday-candle--2 .bday-flame{ animation-delay:.1s, .15s; }
.bday-candle--3 .bday-flame{ animation-delay:.05s, .3s; }

@keyframes bday-flame-flicker{
  0%{ transform:scaleX(1) scaleY(1) rotate(-2deg); opacity:1; }
  100%{ transform:scaleX(.85) scaleY(1.1) rotate(2deg); opacity:.85; }
}

/* Full cycle: flames appear → burn → blow out → hide → reappear */
@keyframes bday-flame-cycle{
  0%{ opacity:0; transform:scaleY(0); }
  8%{ opacity:1; transform:scaleY(1); }
  55%{ opacity:1; transform:scaleY(1); }
  60%{ opacity:1; transform:scaleX(2) scaleY(.2) rotate(40deg); }
  65%{ opacity:0; transform:scaleX(0) scaleY(0); }
  90%{ opacity:0; transform:scaleY(0); }
  100%{ opacity:0; transform:scaleY(0); }
}

/* Candle stick rises/hides in sync */
@keyframes bday-candle-cycle{
  0%{ opacity:0; transform:translateY(6px); }
  6%{ opacity:1; transform:translateY(0); }
  65%{ opacity:1; transform:translateY(0); }
  75%{ opacity:0; transform:translateY(6px); }
  90%{ opacity:0; transform:translateY(6px); }
  100%{ opacity:0; transform:translateY(6px); }
}

@media(prefers-reduced-motion:reduce){
  .bday-candle, .bday-flame{ animation:none; }
  .bday-flame{ opacity:1; transform:none; }
  .bday-candle{ opacity:1; transform:none; }
}

/* ── Close hint (pulsing dot) ── */
.bday-hint{
  margin-top:16px;
  display:flex; align-items:center; justify-content:center;
}
.bday-hint-pulse{
  display:block; width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.3);
}
@media(prefers-reduced-motion:no-preference){
  .bday-hint-pulse{
    animation:bday-pulse 2s ease-in-out 2s infinite;
  }
  @keyframes bday-pulse{
    0%,100%{ opacity:.3; transform:scale(1); }
    50%{ opacity:.7; transform:scale(1.6); }
  }
}

/* ═══════════════════════════════════════════════
   Birthday FAB button
   ═══════════════════════════════════════════════ */
.birthday-fab{
  display:flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%;
  border:none; cursor:pointer;
  background:linear-gradient(135deg, #ffd700 0%, #ff6b6b 50%, #ff9ff3 100%);
  color:#fff;
  box-shadow:0 4px 16px rgba(255,215,0,.35), 0 2px 6px rgba(0,0,0,.2);
  transition:transform .2s ease, box-shadow .2s ease;
  position:relative;
  overflow:visible;
}
.birthday-fab:hover{
  transform:scale(1.12);
  box-shadow:0 6px 24px rgba(255,215,0,.5), 0 3px 10px rgba(0,0,0,.25);
}
.birthday-fab:active{
  transform:scale(.95);
}
.birthday-fab[hidden]{ display:none; }

@media(prefers-reduced-motion:no-preference){
  .birthday-fab{
    animation:bday-fab-pulse 2.5s ease-in-out infinite;
  }
  @keyframes bday-fab-pulse{
    0%,100%{ box-shadow:0 4px 16px rgba(255,215,0,.35), 0 0 0 0 rgba(255,215,0,.3); }
    50%{ box-shadow:0 4px 16px rgba(255,215,0,.35), 0 0 0 10px rgba(255,215,0,0); }
  }
}

/* ═══════════════════════════════════════════════
   Birthday profile decorations
   ═══════════════════════════════════════════════ */

/* Animated gradient border on header — uses ::before to avoid conflict with existing ::after gradient overlay.
   Uses inset box-shadow so it works inside overflow:hidden containers. */
.bday-header{
  position:relative;
}
.profile-header.bday-header,
.card.profile-card .profile-header.bday-header{
  border-radius:12px 12px 0 0;
}
.bday-header::before{
  content:"";
  position:absolute; inset:0; z-index:2;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:inset 0 0 0 3px #ffd700, inset 0 0 12px rgba(255,215,0,.25);
  opacity:.85;
}
@media(prefers-reduced-motion:no-preference){
  .bday-header::before{
    animation:bday-header-glow 3s ease-in-out infinite alternate, bday-fade-in .8s ease .2s both;
  }
  @keyframes bday-header-glow{
    0%  { box-shadow:inset 0 0 0 3px #ffd700, inset 0 0 12px rgba(255,215,0,.25); }
    33% { box-shadow:inset 0 0 0 3px #ff6b6b, inset 0 0 12px rgba(255,107,107,.25); }
    66% { box-shadow:inset 0 0 0 3px #54a0ff, inset 0 0 12px rgba(84,160,255,.25); }
    100%{ box-shadow:inset 0 0 0 3px #6bcb77, inset 0 0 12px rgba(107,203,119,.25); }
  }
}

/* Glowing avatar ring — overrides the default box-shadow with a colorful birthday glow.
   Uses box-shadow instead of ::before to avoid clipping and z-index issues.
   Higher specificity (.profile-avatar.bday-avatar = 0,2,0) beats .profile-avatar (0,1,0)
   without !important, so @keyframes can properly animate the properties. */
.profile-avatar.bday-avatar{
  border-color: #ffd700;
  box-shadow:
    0 0 0 3px #ffd700,
    0 0 16px rgba(255,215,0,.35),
    0 0 32px rgba(255,107,107,.15);
  transition: box-shadow .3s ease, border-color .3s ease;
}
.profile-avatar.bday-avatar:hover{
  box-shadow:
    0 0 0 3px #ffd700,
    0 0 20px rgba(255,215,0,.45),
    0 0 40px rgba(255,107,107,.2);
}
@media(prefers-reduced-motion:no-preference){
  .profile-avatar.bday-avatar{
    animation:bday-avatar-glow 4s ease-in-out infinite alternate, bday-fade-in .8s ease .4s both;
  }
  @keyframes bday-avatar-glow{
    0%{
      border-color:#ffd700;
      box-shadow: 0 0 0 3px #ffd700, 0 0 16px rgba(255,215,0,.35), 0 0 32px rgba(255,107,107,.15);
    }
    33%{
      border-color:#ff6b6b;
      box-shadow: 0 0 0 3px #ff6b6b, 0 0 16px rgba(255,107,107,.35), 0 0 32px rgba(255,159,243,.15);
    }
    66%{
      border-color:#54a0ff;
      box-shadow: 0 0 0 3px #54a0ff, 0 0 16px rgba(84,160,255,.35), 0 0 32px rgba(107,203,119,.15);
    }
    100%{
      border-color:#6bcb77;
      box-shadow: 0 0 0 3px #6bcb77, 0 0 16px rgba(107,203,119,.35), 0 0 32px rgba(255,215,0,.15);
    }
  }
}

/* Name badge — must override .profile-display's text-fill-color:transparent
   and background-clip:text which would otherwise make the badge invisible. */
.bday-name-badge{
  display:inline-flex; align-items:center; justify-content:center;
  vertical-align:middle; margin-left:6px;
  color:#ffd700;
  -webkit-text-fill-color:#ffd700;
  background:none;
  -webkit-background-clip:border-box; background-clip:border-box;
  filter:drop-shadow(0 0 6px rgba(255,215,0,.5));
}
.bday-name-badge svg{
  stroke:#ffd700;
}
@media(prefers-reduced-motion:no-preference){
  .bday-name-badge{
    animation:bday-badge-bounce 2s ease-in-out infinite, bday-badge-enter .6s cubic-bezier(.34,1.56,.64,1) .3s both;
  }
  @keyframes bday-badge-bounce{
    0%,100%{ transform:translateY(0) rotate(0); }
    25%{ transform:translateY(-3px) rotate(-5deg); }
    75%{ transform:translateY(-3px) rotate(5deg); }
  }
}

/* Private-profile specificity override — #view-profile .profile-avatar (1,0,1,0)
   beats .profile-avatar.bday-avatar (0,2,0), so we need ID-scoped rules. */
#view-profile .profile-avatar.bday-avatar{
  border-color: #ffd700;
  box-shadow:
    0 0 0 3px #ffd700,
    0 0 16px rgba(255,215,0,.35),
    0 0 32px rgba(255,107,107,.15);
}
#view-profile .profile-avatar.bday-avatar:hover{
  box-shadow:
    0 0 0 3px #ffd700,
    0 0 20px rgba(255,215,0,.45),
    0 0 40px rgba(255,107,107,.2);
}
@media(prefers-reduced-motion:no-preference){
  #view-profile .profile-avatar.bday-avatar{
    animation:bday-avatar-glow 4s ease-in-out infinite alternate, bday-fade-in .8s ease .4s both;
  }
}

/* Birthday profile card subtle glow */
.bday-profile{
  position:relative;
}
.bday-profile .profile-top{
  position:relative;
  box-shadow:0 0 40px rgba(255,215,0,.08), 0 0 80px rgba(255,100,100,.05);
}

/* ── Shared entrance keyframes ── */
@media(prefers-reduced-motion:no-preference){
  @keyframes bday-fade-in{
    from{ opacity:0; } to{ opacity:1; }
  }
  @keyframes bday-badge-enter{
    from{ opacity:0; transform:scale(0) rotate(-30deg); }
    to{ opacity:1; transform:scale(1) rotate(0); }
  }
}

/* ── Lateral confetti streamers ── */
.bday-streamers{
  position:absolute;
  top:0; bottom:0;
  width:28px;
  z-index:2;
  pointer-events:none;
  overflow:visible;
}
.bday-streamers--left{ left:4px; }
.bday-streamers--right{ right:4px; }

/* Individual streamer particle — starts hidden, animates into place */
.bday-st{
  position:absolute;
  top:var(--st-top, 50%);
  width:var(--st-size, 6px);
  height:var(--st-size, 6px);
  pointer-events:none;
}

/* Left streamers start at left edge */
.bday-streamers--left .bday-st{
  left:0;
  opacity:0;
}
/* Right streamers start at right edge */
.bday-streamers--right .bday-st{
  right:0;
  opacity:0;
}

@media(prefers-reduced-motion:no-preference){
  .bday-streamers--left .bday-st{
    animation:bday-st-left 1s cubic-bezier(.34,1.56,.64,1) var(--st-delay, 0s) both,
              bday-st-float 3s ease-in-out calc(var(--st-delay, 0s) + 1s) infinite alternate;
  }
  .bday-streamers--right .bday-st{
    animation:bday-st-right 1s cubic-bezier(.34,1.56,.64,1) var(--st-delay, 0s) both,
              bday-st-float 3s ease-in-out calc(var(--st-delay, 0s) + 1s) infinite alternate;
  }
  @keyframes bday-st-left{
    from{ opacity:0; transform:scale(0); }
    to{ opacity:.7; transform:translateX(6px) scale(1); }
  }
  @keyframes bday-st-right{
    from{ opacity:0; transform:scale(0); }
    to{ opacity:.7; transform:translateX(-6px) scale(1); }
  }
  @keyframes bday-st-float{
    0%{ transform:translateY(0); }
    100%{ transform:translateY(-4px); }
  }
}
@media(prefers-reduced-motion:reduce){
  .bday-st{ opacity:.5; }
  .bday-streamers--left .bday-st{ left:4px; }
  .bday-streamers--right .bday-st{ right:4px; }
}

/* Streamer shapes */
.bday-st-circle{
  background:var(--st-color);
  border-radius:50%;
}
.bday-st-rect{
  background:var(--st-color);
  border-radius:2px;
  transform:rotate(25deg);
}
.bday-st-star{
  background:transparent;
  width:0 !important; height:0 !important;
  border-left:calc(var(--st-size, 6px) * .5) solid transparent;
  border-right:calc(var(--st-size, 6px) * .5) solid transparent;
  border-bottom:var(--st-size, 6px) solid var(--st-color);
}

/* Legacy compat: keep old class names working if any code references them */
.birthday-overlay{ position:fixed; inset:0; z-index:9999; display:none; }
.birthday-overlay-fade{ display:none; }

 .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;
    min-width:44px;
    min-height:44px;
    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; opacity:0; transition:opacity .2s ease; }
  .mobile-topbar-avatar-img[src]:not([src=""]){ opacity:1; }
  .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;
    min-width:44px;
    min-height:44px;
    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, opacity .25s 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; }
 }

 /* ── Page-level reveal: hide everything until ready, show all at once ── */
 body.app-layout > main{ opacity:0; transition: opacity .3s ease; }
 body.app-layout.page-ready > main{ opacity:1; }
 /* Safety: auto-reveal after 3s even if JS completely fails */
 @keyframes _pageAutoReveal{ to{ opacity:1; } }
 body.app-layout:not(.page-ready) > main{ animation: _pageAutoReveal 0s 3s forwards; }

 .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 12px;
  display:flex;
  flex-direction:column;
  gap:4px;
  overflow: auto;
  opacity:0;
  transition: opacity .25s ease;
 }
 .app-nav.nav-ready{ opacity:1; }

 @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; }

/* Filled/outline icon toggle */
.app-nav-icon--filled{ display:none; }
.app-nav-item.active .app-nav-icon--outline{ display:none; }
.app-nav-item.active .app-nav-icon--filled{ display:block; }

.app-nav-item.active .app-nav-icon{ opacity: 1; transform: translateY(-.5px) scale(1.03); }

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

/* Nav zones — visual separators between groups */
.nav-zone{ display:flex; flex-direction:column; gap:2px; }
.nav-zone + .nav-zone{ margin-top:6px; padding-top:6px; border-top:1px solid rgba(255,255,255,.06); }

/* Tournament inactive (no active tournament) — red disabled look */
.app-nav-tournament--inactive{ color: rgba(248,113,113,.55); }
.app-nav-tournament--inactive .app-nav-icon{ color: rgba(248,113,113,.55); }
.app-nav-tournament--inactive .app-nav-label{ color: rgba(248,113,113,.55); }
.app-nav-tournament--inactive:hover{ background: rgba(248,113,113,.06); border-color: rgba(248,113,113,.12); }

/* Premium nav item — subtle glow for non-premium users */
.app-nav-premium{ color: #c084fc; }
.app-nav-premium .app-nav-icon{ color: #c084fc; }
.app-nav-premium .app-nav-label{ color: #c084fc; }
.app-nav-premium:hover{ background: rgba(192,132,252,.08); border-color: rgba(192,132,252,.18); }
.app-nav-premium.active{ background: rgba(192,132,252,.12); border-color: rgba(192,132,252,.35); box-shadow: 0 0 12px rgba(192,132,252,.10); }

.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; opacity:0; transition:opacity .2s ease; }
.nav-account-avatar[src]:not([src=""]){ opacity:1; }
.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,.65); 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-more-popover positioning moved after .nav-popover base styles) */

/* Popover icon (inline 18px icons inside popover items) */
.nav-popover-icon{
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  color: rgba(255,255,255,.55);
  transition: color .14s ease;
}
.nav-popover-item:hover .nav-popover-icon{ color: rgba(255,255,255,.85); }

.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; display:flex; align-items:center; gap:4px; }
.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; }
.nav-notif-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px;
  border-radius:9px;
  background:rgba(139,92,246,.18);
  color:rgba(139,92,246,.95);
  font-size:10px; font-weight:900; letter-spacing:.2px;
  line-height:1;
}
.nav-notifications-item--unread .nav-notif-count{
  background:rgba(139,92,246,.25);
  color:#fff;
}

/* ── 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: 44px; height: 44px;
  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: 20px; }
.notif-page-footer{ padding: 16px 0; text-align: center; }
.notif-load-more{ min-width: 200px; }

/* ── Notification Sections (grouped by category) ──────────────────── */
.notif-section{ display: flex; flex-direction: column; gap: 8px; }
.notif-section-header{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.05);
}
.notif-section-icon{
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(139,92,246,.10);
  color: rgba(139,92,246,.8);
}
.notif-section-label{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2px;
  color: rgba(255,255,255,.85);
  flex: 1;
}
.notif-section-unread{
  font-size: 11px;
  font-weight: 700;
  color: rgba(139,92,246,.85);
  background: rgba(139,92,246,.10);
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.notif-section-chevron{
  flex-shrink: 0; margin-left: auto;
  color: rgba(255,255,255,.3);
  transition: transform .2s ease;
}
.notif-section-header--toggle{
  cursor: pointer; user-select: none;
}
.notif-section-header--toggle:hover{
  background: rgba(255,255,255,.04);
}
.notif-section-header--collapsed .notif-section-chevron{
  transform: rotate(-90deg);
}
.notif-section-cards{ display: flex; flex-direction: column; gap: 6px; padding-left: 14px; }

/* ── 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: #111827;
  border:1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  box-shadow:
    0 18px 60px rgba(0,0,0,.55),
    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); }

/* Premium item in More popover — mirror left nav premium style */
#nav-premium-more.nav-popover-item.app-nav-premium,
#nav-premium-more.nav-popover-item.app-nav-premium .nav-popover-icon,
#nav-premium-more.nav-popover-item.app-nav-premium span{
  color:#c084fc;
}
#nav-premium-more.nav-popover-item.app-nav-premium:hover{
  background: rgba(192,132,252,.08);
  border-color: rgba(192,132,252,.18);
}
#nav-premium-more.nav-popover-item.app-nav-premium.active{
  background: rgba(192,132,252,.12);
  border-color: rgba(192,132,252,.35);
  box-shadow: 0 0 12px rgba(192,132,252,.10);
}

/* All nav popovers: when JS moves them to body they become fixed and escape
   every stacking context. Opaque background + highest z-index. */
body > .nav-popover{
  position: fixed;
  z-index: 10000;
  pointer-events: auto;
  isolation: isolate;
  background: #111827;
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 20px 70px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.08);
  min-width: 220px;
  width: max-content;
  max-width: 300px;
}
@media(max-width:980px){
  body > .nav-popover{
    position: fixed;
    width: max-content;
    max-width: calc(100vw - 24px);
  }
}

.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 picture{ display:block; width:100%; height:100%; position:absolute; inset:0; }
.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,.65);
  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 .btn-icon--filled{ display: none; }
.feed-action.active .btn-icon--outline{ display: none; }
.feed-action.active .btn-icon--filled{ display: block; }
.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--filled{ 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--filled{ 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:44px; height:44px; 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,.65); 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,.65);
  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-favorites-list{ display:flex; flex-direction:column; gap:12px; margin-top:12px; }
.profile-favorites-list .feed-item{ padding: 14px; }
.profile-favorites-list .feed-card{ display:block; }
.profile-favorites-list .feed-card-top{ display:flex; gap:10px; align-items:flex-start; }
.profile-favorites-list .feed-avatar{ width:36px; height:36px; font-size:14px; }
.profile-favorites-list .feed-embed{ margin-top:10px; display:flex; gap:0; }
.profile-favorites-list .feed-embed-cover{ width:64px; flex:0 0 64px; min-height:64px; border-radius:10px 0 0 10px; }
.profile-favorites-list .feed-embed-cover .nq-cover-handle,
.profile-favorites-list .feed-embed-cover .nq-cover-title,
.profile-favorites-list .feed-embed-cover .nq-cover-logo,
.profile-favorites-list .feed-embed-cover .nq-cover-zoom{ display:none; }
.profile-favorites-list .feed-embed-body{ padding:10px 12px; }
.profile-favorites-list .feed-embed-cta{ padding:0 12px 0 0; }
.profile-favorites-list .feed-embed-cta .btn{
  display:inline-flex; align-items:center; padding:6px 14px; border-radius:8px;
  font-size:12px; font-weight:800; color:#fff;
  background:linear-gradient(135deg, var(--primary,#3b82f6) 0%, #6366f1 100%);
  box-shadow:0 2px 8px rgba(59,130,246,.20);
  white-space:nowrap; transition:transform .12s ease, box-shadow .18s ease;
}
.profile-favorites-list .feed-embed-cta .btn:hover{ transform:scale(1.04); box-shadow:0 4px 14px rgba(59,130,246,.30); }
.profile-favorites-list .feed-actions{ margin-top:8px; justify-content:flex-start; gap:6px; }

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

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

/* Right rail — notifications summary */
.right-notifications-summary{ display:flex; flex-direction:column; gap:2px; }
.right-notif-row{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; text-decoration:none; color: rgba(255,255,255,.78); font-size:.85rem; transition: background .15s ease; }
.right-notif-row:hover{ background: rgba(255,255,255,.04); }
.right-notif-row--unread{ color: var(--text); font-weight:600; }
.right-notif-icon{ width:16px; height:16px; flex:0 0 auto; opacity:.7; }
.right-notif-row--unread .right-notif-icon{ opacity:1; }
.right-notif-label{ flex:1 1 auto; min-width:0; }

.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,.65);
  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,.72); 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; display:flex; flex-direction:column; gap:16px; }
.profile-books-root[data-view="grid"]{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); 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-root[data-view="list"]{ display:flex; flex-direction:column; gap:10px; }

.profile-books-section{ display:flex; flex-direction:column; gap:0; grid-column: 1 / -1; }
.profile-books-section-title{ font-size:14px; font-weight:800; margin-bottom:8px; color:rgba(255,255,255,.92); }

.profile-books{ margin-top: 0; }
.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:600px){ .profile-books[data-view="grid"]{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media(min-width:900px){ .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,.65);
  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);
  position: relative;
}
.book-row-cover .nq-cover{ aspect-ratio:auto; width:100%; height:100%; border-radius:0; position:absolute; inset:0; overflow:hidden; }
.book-row-cover .nq-cover picture{ display:block; width:100%; height:100%; position:absolute; inset:0; }
.book-row-cover .nq-cover-img{ width:100%; height:100%; object-fit:cover; display:block; position:absolute; inset:0; }
.book-row-cover .nq-cover-title,
.book-row-cover .nq-cover-handle,
.book-row-cover .nq-cover-logo,
.book-row-cover .nq-cover-zoom{ display:none; }
.book-row-cover .nq-cover-fallback{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:1.4rem; font-weight:900; color:rgba(255,255,255,.15); background:rgba(255,255,255,.04); position:absolute; inset:0; }
.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);
  position: relative;
}
.book-grid-cover .nq-cover{ aspect-ratio:auto; width:100%; height:100%; border-radius:0; position:absolute; inset:0; overflow:hidden; }
.book-grid-cover .nq-cover picture{ display:block; width:100%; height:100%; position:absolute; inset:0; }
.book-grid-cover .nq-cover-img{ width:100%; height:100%; object-fit:cover; display:block; position:absolute; inset:0; }
.book-grid-cover .nq-cover-title,
.book-grid-cover .nq-cover-handle,
.book-grid-cover .nq-cover-logo,
.book-grid-cover .nq-cover-zoom{ display:none; }
.book-grid-cover .nq-cover-fallback{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:2rem; font-weight:900; color:rgba(255,255,255,.15); background:rgba(255,255,255,.04); position:absolute; inset:0; }
.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: 10px; min-width:0; }
.book-grid-title{ font-weight:900; letter-spacing:.2px; font-size:13px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; }
.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,.65); 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: 4px; 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: visible;
  }

  .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: var(--reader-surface, linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.00)));
  border:1px solid var(--reader-border, rgba(255,255,255,.06));
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.08);
  padding: 16px;
  position: sticky;
  top: 12px;
  -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
  color: var(--reader-text, var(--text));
}

.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: var(--reader-surface, rgba(255,255,255,.04));
  border-color: var(--reader-border, rgba(255,255,255,.12));
  transform: translateY(-1px);
}

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

.read-side-title{ font-weight:900; letter-spacing:.2px; }
.read-side-divider{ height:1px; background: var(--reader-border, 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 var(--reader-border, rgba(255,255,255,.06));
  background: var(--reader-surface, rgba(255,255,255,.02));
  color: var(--reader-text, var(--text));
  cursor:pointer;
  transition: transform .08s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.read-chapter-btn:hover{ background: var(--reader-surface, rgba(255,255,255,.035)); border-color: color-mix(in srgb, var(--reader-link, #60a5fa) 28%, transparent); box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.read-chapter-btn:active{ transform: translateY(1px); box-shadow: none; }
.read-chapter-btn.active{ border-color: color-mix(in srgb, var(--reader-link, #60a5fa) 45%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--reader-link, #60a5fa) 10%, transparent); }
.read-chapter-title{ font-weight:800; margin-bottom:2px; }
.read-chapter-sub{ color: var(--reader-muted, var(--muted)); font-size:12px; }

.read-choices{ margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--reader-border, 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 var(--reader-border, rgba(255,255,255,.10));
  background: var(--reader-surface, rgba(255,255,255,.02));
  color: var(--reader-text, rgba(255,255,255,.92));
  cursor:pointer;
  transition: transform .05s, border-color .2s, background .2s;
}
.read-choice-btn:hover{ background: var(--reader-surface, rgba(255,255,255,.04)); border-color: color-mix(in srgb, var(--reader-link, #60a5fa) 35%, transparent); }
.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 var(--reader-border, rgba(255,255,255,.08));
  border-radius: 12px;
  background: var(--reader-surface, 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(255,255,255,.10), rgba(255,255,255,.04)); 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 2px 6px rgba(0,0,0,.20); }
 .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,.65);
  margin-bottom:8px;
}

.smodal-hint{
  font-size:12px; color:rgba(255,255,255,.65); 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,.72); 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,.65);
  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,.65); 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; overflow-wrap: anywhere; word-break: break-word; overscroll-behavior: none; }
.reader p{ line-height: 1.75; margin: 0 0 12px; overflow-wrap: anywhere; word-break: break-word; }
.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; }

/* ══════════════════════════════════════════════════════════════════════════════
   READER PREMIUM — Themes, Typography, Immersion, Highlights, Sidebar
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Theme variables applied to .app-shell[data-reader-theme] ── */
.app-shell[data-reader-theme]{
  background:var(--reader-bg);
  color:var(--reader-text);
  transition:background .35s ease, color .35s ease;
}
.app-shell[data-reader-theme] .card{
  background:transparent;
  border-color:var(--reader-border);
}
.app-shell[data-reader-theme] .reader{
  color:var(--reader-text);
  font-family:var(--reader-font-family, inherit);
  font-size:var(--reader-font-size, 18px);
  line-height:var(--reader-line-height, 1.75);
  max-width:var(--reader-max-width, 720px);
  padding-left:var(--reader-padding-x, 0);
  padding-right:var(--reader-padding-x, 0);
}
.app-shell[data-reader-theme] .reader p{
  line-height:var(--reader-line-height, 1.75);
}
.app-shell[data-reader-theme] .reader a{
  color:var(--reader-link);
}
.app-shell[data-reader-theme] .reader blockquote{
  border-left-color:var(--reader-border);
}
.app-shell[data-reader-theme] .reader ::selection{
  background:var(--reader-selection);
}
.app-shell[data-reader-theme] .hint{
  color:var(--reader-muted);
}
.app-shell[data-reader-theme] .read-sidebar{
  background:var(--reader-surface);
  border-color:var(--reader-border);
}
.app-shell[data-reader-theme] .read-kicker,
.app-shell[data-reader-theme] .read-title{
  color:var(--reader-text);
}
.app-shell[data-reader-theme] .read-head-actions .btn.secondary{
  color:var(--reader-text);
  border-color:var(--reader-border);
  background:var(--reader-surface);
}
.app-shell[data-reader-theme] .read-head-actions .btn.secondary:hover{
  border-color:var(--reader-muted);
}

/* Sepia special: warm tones for links, borders */
.app-shell[data-reader-theme="sepia"] .reader img{
  border-color:rgba(59,47,30,.12);
}

/* ── Settings Panel ── */
.rp-backdrop{
  position:fixed; inset:0; z-index:1100;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(4px);
  animation:rp-fade-in .2s ease;
}
.rp-panel{
  position:fixed; top:0; right:0; bottom:0;
  width:340px; max-width:90vw;
  z-index:1101;
  background:var(--reader-bg, #0b1220);
  color:var(--reader-text, #e2e8f0);
  border-left:1px solid var(--reader-border, rgba(255,255,255,.06));
  overflow-y:auto;
  animation:rp-slide-in .25s ease;
  box-shadow:-8px 0 32px rgba(0,0,0,.3);
}
@keyframes rp-slide-in{ from{ transform:translateX(100%); } to{ transform:translateX(0); } }
@keyframes rp-fade-in{ from{ opacity:0; } to{ opacity:1; } }

.rp-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px 14px; border-bottom:1px solid var(--reader-border, rgba(255,255,255,.06));
}
.rp-panel-title{ font-size:16px; font-weight:600; }
.rp-panel-close{
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border:none; background:transparent; color:var(--reader-muted, rgba(255,255,255,.5));
  font-size:20px; line-height:1; padding:0; cursor:pointer; border-radius:8px;
  flex-shrink:0;
}
.rp-panel-close:hover{ background:rgba(255,255,255,.06); color:var(--reader-text, #e2e8f0); }

.rp-panel-body{ padding:16px 20px 24px; }
.rp-section{ margin-bottom:24px; }
.rp-section--footer{ margin-bottom:0; padding-top:16px; border-top:1px solid var(--reader-border, rgba(255,255,255,.06)); }
.rp-section-title{ font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--reader-muted, rgba(255,255,255,.5)); margin-bottom:12px; }

.rp-theme-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.rp-theme-btn{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:10px 6px; border-radius:10px;
  border:2px solid transparent; background:transparent;
  color:var(--reader-text, #e2e8f0); font-size:11px; cursor:pointer;
  transition:border-color .15s, background .15s;
}
.rp-theme-btn:hover{ background:rgba(255,255,255,.04); }
.rp-theme-btn.is-active{ border-color:var(--reader-link, #60a5fa); }
.rp-theme-swatch{
  width:36px; height:36px; border-radius:50%;
  border:2px solid rgba(255,255,255,.1);
}

.rp-font-grid{ display:flex; gap:6px; }
.rp-font-btn{
  flex:1; padding:8px; border-radius:8px;
  border:2px solid transparent; background:var(--reader-surface, rgba(255,255,255,.03));
  color:var(--reader-text, #e2e8f0); font-size:13px; font-weight:500; cursor:pointer;
  transition:border-color .15s;
}
.rp-font-btn:hover{ border-color:rgba(255,255,255,.12); }
.rp-font-btn.is-active{ border-color:var(--reader-link, #60a5fa); }

.rp-control{ margin-bottom:14px; }
.rp-label{ display:flex; align-items:center; justify-content:space-between; font-size:13px; margin-bottom:6px; color:var(--reader-text, #e2e8f0); }
.rp-val{ font-size:12px; color:var(--reader-muted, rgba(255,255,255,.5)); font-weight:400; }

.rp-range{
  -webkit-appearance:none; appearance:none; width:100%; height:4px;
  background:var(--reader-border, rgba(255,255,255,.1)); border-radius:4px; outline:none;
}
.rp-range::-webkit-slider-thumb{
  -webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  background:var(--reader-link, #60a5fa); cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.3);
}
.rp-range::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%; border:none;
  background:var(--reader-link, #60a5fa); cursor:pointer;
}

.rp-preset-grid{ display:flex; gap:6px; }
.rp-preset-btn{
  flex:1; padding:8px; border-radius:8px;
  border:1px solid var(--reader-border, rgba(255,255,255,.08));
  background:var(--reader-surface, rgba(255,255,255,.03));
  color:var(--reader-text, #e2e8f0); font-size:12px; font-weight:500; cursor:pointer;
  transition:background .15s, border-color .15s;
}
.rp-preset-btn:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.15); }

.rp-reset-btn{
  width:100%; padding:10px; border-radius:10px;
  border:1px solid rgba(239,68,68,.3); background:transparent;
  color:rgba(239,68,68,.8); font-size:13px; font-weight:500; cursor:pointer;
  transition:background .15s, color .15s;
}
.rp-reset-btn:hover{ background:rgba(239,68,68,.08); color:#ef4444; }

/* ── Immersion Mode ── */
body.rp-immersion .read-head,
body.rp-immersion .read-sidebar,
body.rp-immersion .read-head-actions,
body.rp-immersion .mobile-topbar,
body.rp-immersion .app-nav,
body.rp-immersion .footer,
body.rp-immersion .mood-bar-root{
  opacity:0; pointer-events:none;
  transition:opacity .4s ease;
}
body.rp-immersion .read-layout{
  grid-template-columns:1fr !important;
}
body.rp-immersion .reader{
  max-width:var(--reader-max-width, 720px);
  margin:0 auto;
}
body.rp-immersion-controls-visible .read-head,
body.rp-immersion-controls-visible .read-head-actions,
body.rp-immersion-controls-visible .mobile-topbar{
  opacity:1; pointer-events:auto;
}

.rp-immersion-overlay{
  position:fixed; inset:0; z-index:800; pointer-events:none;
}
.rp-immersion-zone{
  position:absolute; left:0; right:0; pointer-events:auto; cursor:pointer;
}
.rp-immersion-zone--top{ top:0; height:60px; }
.rp-immersion-zone--bottom{ bottom:0; height:60px; display:flex; align-items:center; justify-content:center; }
.rp-immersion-hint{
  font-size:12px; color:rgba(255,255,255,.3);
  opacity:1; transition:opacity 1.5s ease 2s;
}
body.rp-immersion-controls-visible .rp-immersion-hint{ opacity:0; }

@media(prefers-reduced-motion:reduce){
  body.rp-immersion .read-head,
  body.rp-immersion .read-sidebar,
  body.rp-immersion .read-head-actions,
  body.rp-immersion .mobile-topbar,
  body.rp-immersion .app-nav,
  body.rp-immersion .footer{ transition:none; }
  .rp-panel{ animation:none; }
  .rp-backdrop{ animation:none; }
}

/* ── Resume Banner ── */
.rp-resume{
  margin-bottom:16px; padding:16px 20px; border-radius:12px;
  background:var(--reader-surface, rgba(255,255,255,.03));
  border:1px solid var(--reader-border, rgba(255,255,255,.06));
  animation:rp-fade-in .3s ease;
}
.rp-resume-content{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.rp-resume-title{ font-size:15px; font-weight:600; color:var(--reader-text, #e2e8f0); }
.rp-resume-sub{ font-size:13px; color:var(--reader-muted, rgba(255,255,255,.5)); margin-top:2px; }
.rp-resume-actions{ display:flex; gap:8px; flex-shrink:0; }
.rp-resume-btn{ font-size:13px; padding:8px 16px; }

/* ── Highlights ── */
.rp-hl{
  border-radius:2px; padding:0 1px;
  transition:background-color .2s ease;
  cursor:pointer;
}
.rp-hl-flash{
  animation:rp-hl-pulse 1.2s ease;
}
@keyframes rp-hl-pulse{
  0%,100%{ outline:none; }
  30%{ outline:2px solid var(--reader-link, #60a5fa); outline-offset:2px; }
  70%{ outline:2px solid var(--reader-link, #60a5fa); outline-offset:2px; }
}
@media(prefers-reduced-motion:reduce){
  .rp-hl-flash{ animation:none; outline:2px solid var(--reader-link, #60a5fa); outline-offset:2px; }
}

/* Selection popover */
.rp-sel-popover{
  position:absolute; z-index:1050;
  background:rgba(20,25,40,.95); border:1px solid rgba(255,255,255,.12);
  border-radius:10px; padding:6px 8px;
  box-shadow:0 4px 20px rgba(0,0,0,.5);
  backdrop-filter:blur(8px);
  display:flex; flex-direction:column; gap:6px;
  animation:rp-fade-in .15s ease;
}
.rp-sel-actions{ display:flex; gap:4px; }
.rp-sel-btn{
  width:36px; height:32px; display:flex; align-items:center; justify-content:center;
  border:none; background:transparent; color:#e2e8f0;
  border-radius:6px; cursor:pointer; transition:background .12s;
}
.rp-sel-btn:hover{ background:rgba(255,255,255,.1); }
.rp-sel-colors{ display:flex; gap:4px; justify-content:center; }
.rp-sel-color{
  width:22px; height:22px; border-radius:50%; border:2px solid transparent;
  cursor:pointer; transition:border-color .12s, transform .1s;
}
.rp-sel-color:hover{ transform:scale(1.15); border-color:rgba(255,255,255,.3); }

/* Quote to Feed modal */
.rp-quote-backdrop{
  position:fixed; inset:0; z-index:1200;
  background:rgba(0,0,0,.6); backdrop-filter:blur(4px);
  animation:rp-fade-in .15s ease;
}
.rp-quote-modal{
  position:fixed; z-index:1201;
  top:50%; left:50%; transform:translate(-50%,-50%);
  width:480px; max-width:92vw; max-height:90vh; overflow-y:auto;
  background:var(--reader-bg, #0b1220);
  color:var(--reader-text, #e2e8f0);
  border:1px solid var(--reader-border, rgba(255,255,255,.08));
  border-radius:16px;
  box-shadow:0 12px 48px rgba(0,0,0,.5);
  animation:rp-fade-in .2s ease;
}
.rp-quote-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px 14px;
  border-bottom:1px solid var(--reader-border, rgba(255,255,255,.06));
}
.rp-quote-title{ font-size:16px; font-weight:600; }
.rp-quote-body{ padding:16px 20px 20px; }
.rp-quote-preview{
  position:relative;
  padding:16px 16px 14px 36px;
  background:var(--reader-surface, rgba(255,255,255,.03));
  border-left:3px solid var(--reader-link, #60a5fa);
  border-radius:8px;
  margin-bottom:10px;
}
.rp-quote-mark{
  position:absolute; top:8px; left:10px;
  font-size:32px; line-height:1; font-family:Georgia,serif;
  color:var(--reader-link, #60a5fa); opacity:.5;
  pointer-events:none;
}
.rp-quote-text{
  font-size:15px; line-height:1.6;
  font-style:italic; word-break:break-word;
}
.rp-quote-source{
  margin-top:8px; font-size:12px;
  color:var(--reader-muted, rgba(255,255,255,.45));
}
.rp-quote-chars-hint{
  font-size:11px; color:var(--reader-muted, rgba(255,255,255,.35));
  margin-bottom:10px; text-align:right;
}
.rp-quote-field{ position:relative; margin-bottom:16px; }
.rp-quote-textarea{
  width:100%; box-sizing:border-box;
  padding:12px 14px; border-radius:10px;
  border:1px solid var(--reader-border, rgba(255,255,255,.1));
  background:var(--reader-surface, rgba(255,255,255,.03));
  color:var(--reader-text, #e2e8f0);
  font-size:14px; line-height:1.5; resize:vertical;
  font-family:inherit;
  transition:border-color .15s;
}
.rp-quote-textarea:focus{
  outline:none;
  border-color:var(--reader-link, #60a5fa);
}
.rp-quote-textarea::placeholder{ color:var(--reader-muted, rgba(255,255,255,.3)); }
.rp-quote-counter{
  position:absolute; bottom:8px; right:10px;
  font-size:11px; color:var(--reader-muted, rgba(255,255,255,.3));
  pointer-events:none;
}
.rp-quote-actions{ display:flex; gap:10px; justify-content:flex-end; }
.rp-quote-submit{
  min-width:120px; font-weight:600;
}

/* Highlights panel */
.rp-hl-panel{
  position:fixed; top:0; right:0; bottom:0;
  width:360px; max-width:90vw; z-index:1101;
  background:var(--reader-bg, #0b1220);
  color:var(--reader-text, #e2e8f0);
  border-left:1px solid var(--reader-border, rgba(255,255,255,.06));
  overflow-y:auto;
  animation:rp-slide-in .25s ease;
  box-shadow:-8px 0 32px rgba(0,0,0,.3);
}
.rp-hl-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px 14px; border-bottom:1px solid var(--reader-border, rgba(255,255,255,.06));
}
.rp-hl-empty{ padding:40px 20px; text-align:center; color:var(--reader-muted, rgba(255,255,255,.4)); font-size:14px; }
.rp-hl-list{ padding:8px 12px; }
.rp-hl-item{
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 8px; border-bottom:1px solid var(--reader-border, rgba(255,255,255,.04));
}
.rp-hl-item:last-child{ border-bottom:none; }
.rp-hl-item-color{ width:4px; min-height:32px; border-radius:2px; flex-shrink:0; margin-top:2px; }
.rp-hl-item-body{ flex:1; min-width:0; }
.rp-hl-item-snippet{ font-size:13px; line-height:1.5; color:var(--reader-text, #e2e8f0); word-break:break-word; }
.rp-hl-item-note{ font-size:12px; color:var(--reader-muted, rgba(255,255,255,.5)); margin-top:4px; font-style:italic; }
.rp-hl-item-actions{ display:flex; gap:4px; flex-shrink:0; }
.rp-hl-item-btn{
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border:none; background:transparent; color:var(--reader-muted, rgba(255,255,255,.4));
  border-radius:6px; cursor:pointer; font-size:14px; line-height:1; padding:0;
  transition:background .12s, color .12s; flex-shrink:0;
}
.rp-hl-item-btn:hover{ background:rgba(255,255,255,.06); color:var(--reader-text, #e2e8f0); }
.rp-hl-item-btn--danger:hover{ color:#ef4444; }

/* ── Sidebar Auto-Focus (Reading Mode) ── */
@media(min-width:981px){
  body.read-page #read-app-nav[data-reading-state="reading"]{
    width:76px !important;
    padding-left:10px !important;
    padding-right:10px !important;
    opacity:.7;
    transition:width 600ms cubic-bezier(.4,0,.2,1), opacity 600ms cubic-bezier(.4,0,.2,1), padding 600ms cubic-bezier(.4,0,.2,1);
  }
  body.read-page #read-app-nav[data-reading-state="reading"]:hover{
    opacity:1;
    /* width stays compact — only opacity changes on hover */
  }
  body.read-page #read-app-nav[data-reading-state="reading"] .app-nav-label{
    opacity:0; width:0; overflow:hidden;
    transition:opacity 400ms ease, width 400ms ease;
  }
  body.read-page #read-app-nav[data-reading-state="reading"] .nav-zone-label,
  body.read-page #read-app-nav[data-reading-state="reading"] .app-nav-badge{
    opacity:0; transition:opacity 300ms ease;
  }
  body.rp-reading-mode .app-shell{
    grid-template-columns:76px minmax(0,1fr) !important;
    transition:grid-template-columns 600ms cubic-bezier(.4,0,.2,1);
  }
}
@media(prefers-reduced-motion:reduce){
  body.read-page #read-app-nav[data-reading-state="reading"]{
    transition:width 120ms, opacity 120ms, padding 120ms;
  }
  body.rp-reading-mode .app-shell{
    transition:grid-template-columns 120ms;
  }
}

/* ── End Reader Premium ── */

.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(100dvh - 36px);
  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;
  border-radius: 12px;
}
.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-sidebar-header .link-btn{
  font-size:11px;
  font-weight:600;
  color:var(--muted, rgba(255,255,255,.5));
  text-decoration:none;
  padding:4px 10px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:6px;
  transition:color .12s, border-color .12s, background .12s;
}
.writer-sidebar-header .link-btn:hover{
  color:var(--text, #fff);
  border-color:rgba(255,255,255,.2);
  background:rgba(255,255,255,.05);
}
.writer-btn .btn-icon{ width:16px; height:16px; display:block; }

.writer-selected-book{ margin-top: 12px; margin-bottom: 10px; }
.writer-selected-book-hint{
  color: var(--muted);
  font-size: 11px;
  margin-top: 8px;
  margin-bottom: 8px;
  text-align: center;
  font-style: italic;
}

.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; }

/* Cover status overlay badge — informational, positioned between title and author */
.writer-cover-status-overlay{
  position:absolute;
  top:38%; left:8px; right:8px;
  transform: translateY(-50%);
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  color: rgba(255,255,255,.7);
  font-size: 9.5px;
  font-weight: 600;
  font-style: italic;
  text-align: center;
  z-index: 2;
  pointer-events: none;
  letter-spacing: .2px;
  line-height: 1.35;
  animation: coverStatusPulse 2s ease-in-out infinite;
}
.writer-cover-status-overlay[hidden]{ display:none; }
.writer-cover-status-overlay.is-ready{
  background: rgba(34,197,94,.18);
  color: #4ade80;
  animation: none;
}
@keyframes coverStatusPulse{
  0%,100%{ opacity:.85; }
  50%{ opacity:1; }
}
.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: 14px; }
.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: 120px; 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,.65); }
.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;
  border-radius: 12px 12px 12px 12px;
}

.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,.65);
  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;
  flex-direction:column;
  gap: 10px;
  padding: 14px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.writer-cover-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.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);
}

.writer-cover-overlay-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:rgba(255,255,255,.7);
  cursor:pointer;
  padding:8px 0 2px;
  width:100%;
  flex-basis:100%;
}
.writer-cover-overlay-toggle input[type="checkbox"]{
  accent-color:var(--accent, #a78bfa);
  width:16px;
  height:16px;
  cursor:pointer;
  flex-shrink:0;
}

/* ── Translate work button (special gradient) ── */
.btn-translate-work{
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%) !important;
  color:#fff !important;
  border:none !important;
  font-weight:700;
  letter-spacing:.02em;
  position:relative;
  overflow:hidden;
  transition: filter .2s, transform .15s;
}
.btn-translate-work::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.18) 0%, transparent 60%);
  pointer-events:none;
}
.btn-translate-work:hover{
  filter:brightness(1.15);
  transform:translateY(-1px);
}
.btn-translate-work:active{
  filter:brightness(.95);
  transform:translateY(0);
}

/* ── 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-status{ 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="book"] #writer-selected-book-synopsis{
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  background: rgba(255,255,255,.02);
}
#view-write[data-writer-mode="book"] #writer-selected-book-synopsis .writer-textarea{
  min-height: 240px;
}
#view-write[data-writer-mode="chapter"] .writer-editor-wrap .writer-selected-book-details{ display:none; }
#view-write[data-writer-mode="chapter"] .writer-selected-book-form{ display:none; }
#view-write[data-writer-mode="chapter"] #writer-status{ display:none; }

/* Hide center content when no book/chapter is selected (no data-writer-mode attribute) */
#view-write:not([data-writer-mode]) .writer-main-header{ visibility:hidden; }
#view-write:not([data-writer-mode]) .writer-toolbar{ display:none; }
#view-write:not([data-writer-mode]) .writer-editor-wrap{ 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; font-size:0.75rem; color:rgba(255,255,255,.65); }
.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-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;
}

/* ── Provenance badge in writer sidebar ── */
.writer-prov-section{ margin-top: 4px; }
.writer-prov-badge{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  border: 1px solid rgba(255,255,255,.10); letter-spacing: .2px; margin-top: 4px;
}
.writer-prov-badge--verified{ border-color: rgba(34,197,94,.30); color: rgba(34,197,94,.90); background: rgba(34,197,94,.06); }
.writer-prov-badge--ai{ border-color: rgba(248,113,113,.30); color: rgba(248,113,113,.90); background: rgba(248,113,113,.06); }
.writer-prov-badge--flagged{ border-color: rgba(251,191,36,.30); color: rgba(251,191,36,.90); background: rgba(251,191,36,.06); }
.writer-prov-badge--unverified{ border-color: rgba(255,255,255,.10); color: rgba(255,255,255,.65); background: rgba(255,255,255,.03); }

/* ── Verified badge icon ── */
.ws-work-label-row{ display: flex; align-items: center; gap: 6px; }
.ws-verified-badge{
  width: 20px; height: 20px; cursor: pointer; flex-shrink: 0;
  transition: transform .15s ease, filter .15s ease;
  filter: drop-shadow(0 0 2px rgba(34,197,94,.3));
}
.ws-verified-badge:hover{ transform: scale(1.15); filter: drop-shadow(0 0 4px rgba(34,197,94,.5)); }
.writer-verified-badge{
  width: 18px; height: 18px; cursor: pointer; flex-shrink: 0;
  vertical-align: middle; margin-left: 4px;
  transition: transform .15s ease, filter .15s ease;
  filter: drop-shadow(0 0 2px rgba(34,197,94,.3));
}
.writer-verified-badge:hover{ transform: scale(1.15); filter: drop-shadow(0 0 4px rgba(34,197,94,.5)); }
.ws-prov-verified-icon{
  width: 18px; height: 18px; cursor: pointer; flex-shrink: 0;
  vertical-align: middle; margin-left: 5px;
  transition: transform .15s ease, filter .15s ease;
  filter: drop-shadow(0 0 2px rgba(34,197,94,.3));
}
.ws-prov-verified-icon:hover{ transform: scale(1.15); filter: drop-shadow(0 0 4px rgba(34,197,94,.5)); }

.ws-prov-ai-label {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #fff;
  background: rgba(220,38,38,.85);
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: 6px;
  vertical-align: middle;
  line-height: 1.2;
}

/* ── Reader page: Provenance badges ── */
.read-prov-verified{
  width: 18px; height: 18px; cursor: pointer; flex-shrink: 0;
  vertical-align: middle; margin-left: 6px;
  transition: transform .15s ease, filter .15s ease;
  filter: drop-shadow(0 0 2px rgba(34,197,94,.3));
}
.read-prov-verified:hover{ transform: scale(1.15); filter: drop-shadow(0 0 4px rgba(34,197,94,.5)); }
.read-prov-ai-label{
  display: inline-block;
  font-size: 9px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: #fff; background: rgba(220,38,38,.85); border-radius: 4px;
  padding: 2px 6px; margin-left: 6px; vertical-align: middle; line-height: 1.2;
}

/* ── Public Profile: Provenance badges on work cards ── */
.pp-prov-cover-wrap{ position: relative; }
.pp-prov-verified{
  width: 13px; height: 13px; vertical-align: middle; margin-left: 3px; flex-shrink: 0;
  filter: drop-shadow(0 0 2px rgba(34,197,94,.35));
}
.pp-prov-ai-label{
  position: absolute; bottom: 5px; left: 5px;
  font-size: 7px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: #fff; background: rgba(220,38,38,.85); border-radius: 3px;
  padding: 2px 5px; line-height: 1.2; pointer-events: none;
}

.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;
  display:flex; align-items:center; justify-content:space-between;
}
.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-studio-badge{
  display:inline-flex; align-items:center; gap:4px;
  font-size:10px; font-weight:700; letter-spacing:.04em;
  color:#a5b4fc; background:rgba(99,102,241,.12);
  padding:3px 8px; border-radius:8px;
}

.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,.65);
  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,.65); 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,.65);
  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,.65); }

/* ═══════════════════════════════════════════════════════════
   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: 100%;
  margin: 0 auto;
}
/* ═══════════════════════════════════════════════════════════
   FAB Stack — ordered vertical column for all floating buttons
   Items stack bottom-to-top: last child is lowest, first is highest.
   ═══════════════════════════════════════════════════════════ */
.fab-stack{
  position:fixed; bottom:24px; right:24px; z-index:9000;
  display:flex; flex-direction:column-reverse; align-items:flex-end;
  gap:12px; pointer-events:none;
}
.fab-stack > *{ pointer-events:auto; }
.fab-stack[hidden]{ display:none; }
@media(max-width:480px){
  .fab-stack{ bottom:16px; right:16px; gap:10px; }
}

/* Floating exit button for focus mode */
.focus-exit-fab{
  width:48px; height:48px; border-radius:50%;
  background:rgba(99,102,241,.85); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 4px 16px rgba(0,0,0,.35);
  backdrop-filter:blur(6px);
  transition: background .15s, transform .15s;
}
.focus-exit-fab:hover{ background:rgba(99,102,241,1); transform:scale(1.08); }
.focus-exit-fab svg{ pointer-events:none; }

/* Messages FAB */
.messages-fab{
  width:48px; height:48px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(59,130,246,.85); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
  backdrop-filter:blur(6px);
  transition: transform .2s, box-shadow .2s, background .15s;
  position:relative;
}
.messages-fab:hover{ background:rgba(59,130,246,1); transform:scale(1.08); box-shadow:0 6px 24px rgba(0,0,0,.45); }
.messages-fab svg{ pointer-events:none; }
.messages-fab-badge{
  position:absolute; top:-4px; right:-4px;
  background:#fff; color:#3b82f6; 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; box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.messages-fab--has-unread{ animation: messages-pulse 2s ease-in-out infinite; }
@keyframes messages-pulse{
  0%,100%{ box-shadow:0 4px 16px rgba(59,130,246,.35); }
  50%{ box-shadow:0 4px 24px rgba(59,130,246,.65); }
}

/* Writer Studio FAB */
.writer-studio-fab{
  display:flex; align-items:center; gap:9px;
  padding:11px 20px 11px 15px;
  border-radius:28px; border:1px solid rgba(139,92,246,.25);
  color:#fff; text-decoration:none;
  font-size:13px; font-weight:700; letter-spacing:.03em;
  cursor:pointer;
  box-shadow:0 4px 24px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06) inset;
  backdrop-filter:blur(12px);
  transition: background .25s, transform .25s, box-shadow .25s, border-color .25s;
}
.writer-studio-fab svg{ flex-shrink:0; pointer-events:none; filter:drop-shadow(0 0 3px rgba(139,92,246,.35)); }
.writer-studio-fab-label{ white-space:nowrap; pointer-events:none; }

/* Premium state — purple glow */
.writer-studio-fab--premium{
  background:linear-gradient(135deg, rgba(139,92,246,.92) 0%, rgba(109,40,217,.88) 100%);
  border-color:rgba(167,139,250,.35);
  box-shadow:0 4px 24px rgba(139,92,246,.3), 0 0 12px rgba(139,92,246,.15), 0 0 0 1px rgba(255,255,255,.08) inset;
}
.writer-studio-fab--premium:hover{
  transform:translateY(-2px) scale(1.05);
  box-shadow:0 8px 32px rgba(139,92,246,.45), 0 0 16px rgba(139,92,246,.2), 0 0 0 1px rgba(255,255,255,.12) inset;
  border-color:rgba(167,139,250,.5);
}

/* Locked state — subtle glass with purple accent */
.writer-studio-fab--locked{
  background:linear-gradient(135deg, rgba(139,92,246,.12) 0%, rgba(109,40,217,.06) 100%);
  color:rgba(255,255,255,.6);
  border-color:rgba(139,92,246,.15);
}
.writer-studio-fab--locked svg{ filter:none; opacity:.6; }
.writer-studio-fab--locked:hover{
  background:linear-gradient(135deg, rgba(139,92,246,.22) 0%, rgba(109,40,217,.16) 100%);
  color:rgba(255,255,255,.85);
  transform:translateY(-2px) scale(1.05);
  box-shadow:0 6px 28px rgba(139,92,246,.22), 0 0 0 1px rgba(255,255,255,.08) inset;
  border-color:rgba(139,92,246,.3);
}
.writer-studio-fab--locked svg{ transition:opacity .25s; }
.writer-studio-fab--locked:hover svg{ opacity:1; filter:drop-shadow(0 0 3px rgba(139,92,246,.35)); }
.writer-studio-fab--locked::after{
  content:"🔒"; font-size:11px; margin-left:2px; opacity:.7;
}

/* Hide FAB in focus mode */
.focus-mode .writer-studio-fab{ display:none; }

/* Hide FAB stack on mobile for routes with bottom-positioned UI (chat composer, writer toolbar, etc.) */
@media(max-width:768px){
  .route-chat .fab-stack,
  .route-chat .fab-dock-tab,
  .route-write .fab-stack,
  .route-write .fab-dock-tab,
  .route-bugreport .fab-stack,
  .route-bugreport .fab-dock-tab,
  .route-translate .fab-stack,
  .route-translate .fab-dock-tab,
  .route-tournament .fab-stack,
  .route-tournament .fab-dock-tab{
    display:none !important;
  }
}

/* ── Mobile FAB dock (drag right to hide) ── */
@media(max-width:768px){
  .fab-stack{
    transition: transform .3s ease, opacity .3s ease;
    touch-action: none;
  }
  .fab-stack.fab-stack--dragging{
    transition: none;
  }
  .fab-stack.fab-stack--docked{
    transform: translateX(calc(100% + 24px));
    opacity: 0;
    pointer-events: none;
  }
  /* Small arrow tab to restore docked FAB */
  .fab-dock-tab{
    position: fixed;
    bottom: 24px; right: 0;
    width: 28px; height: 48px;
    background: linear-gradient(135deg, rgba(139,92,246,.85) 0%, rgba(109,40,217,.8) 100%);
    border-radius: 8px 0 0 8px;
    border: 1px solid rgba(167,139,250,.3);
    border-right: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 9001;
    box-shadow: -2px 2px 12px rgba(0,0,0,.35);
    transition: width .2s ease, background .2s ease;
    pointer-events: auto;
  }
  .fab-dock-tab:active{ width: 34px; background: linear-gradient(135deg, rgba(139,92,246,1) 0%, rgba(109,40,217,1) 100%); }
  .fab-dock-tab svg{ pointer-events: none; color: #fff; opacity: .9; }
  .fab-dock-tab[hidden]{ display: none; }
}
@media(min-width:769px){
  .fab-dock-tab{ display: none !important; }
}

/* ── 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; }
}

/* ── First-chapter feed card ── */
.feed-embed--first-chapter{
  flex-wrap: wrap;
}
.feed-embed--first-chapter > .feed-embed-cta{
  display: none;
}
.feed-first-chapter{
  flex: 1 1 100%;
  padding: 10px 14px 12px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.feed-first-chapter-badge{
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #fbbf24;
  background: rgba(251,191,36,.10);
  border: 1px solid rgba(251,191,36,.18);
}
.feed-first-chapter-synopsis{
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,.78);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feed-first-chapter-cta{
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  padding: 8px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .3px;
  color: #fff;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 2px 10px rgba(16,185,129,.25), 0 0 0 1px rgba(255,255,255,.06) inset;
  text-decoration: none;
  cursor: pointer;
  border: none;
  white-space: nowrap;
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
.feed-first-chapter-cta svg{ flex-shrink:0; opacity:.85; }
.feed-first-chapter-cta:hover{
  transform: scale(1.04);
  box-shadow: 0 4px 18px rgba(16,185,129,.35), 0 0 0 1px rgba(255,255,255,.1) inset;
  filter: brightness(1.08);
}
.feed-first-chapter-cta:active{ transform: scale(.97); }
@media(max-width:520px){
  .feed-first-chapter{ padding: 8px 10px 10px; }
  .feed-first-chapter-synopsis{ font-size: 12.5px; -webkit-line-clamp: 3; line-clamp: 3; }
  .feed-first-chapter-cta{ padding: 7px 16px; font-size: 12px; }
}

#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-price-breakdown-row{ padding: 2px 0; }
.writer-price-breakdown-net{ color: var(--text); font-weight: 600; border-top: 1px solid rgba(255,255,255,.06); margin-top: 4px; padding-top: 4px; }
.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 select.input option:checked{
  background: linear-gradient(0deg, #2a3a5c 0%, #2a3a5c 100%) !important;
  color: #fff !important;
}
.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-end;
  gap:10px;
}

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

/* 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{ justify-content:center; padding-left:0; padding-right:0; }

.app-nav.is-collapsed .app-logo-text,
.app-nav.is-collapsed .brand-beta-tag,
.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,
.app-nav.is-collapsed .nav-tournament-pill{
  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;
}

/* Coin pill: only show icon when collapsed */
.app-nav.is-collapsed .app-nav-coin-pill{
  gap:0; padding:8px; width:36px; height:36px; justify-content:center;
}
.app-nav.is-collapsed .nav-coin-pill{
  display:none !important;
}

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

/* Popovers: when collapsed, pop out to the right of the narrow nav */
.app-nav.is-collapsed .nav-account-wrap,
.app-nav.is-collapsed .nav-more-wrap,
.app-nav.is-collapsed .nav-notifications-wrap{
  position: relative;
}
.app-nav.is-collapsed .nav-popover{
  position: absolute;
  left: calc(100% + 8px);
  right: auto;
  top: 0;
  bottom: auto;
  min-width: 220px;
  width: max-content;
  max-width: 300px;
}
/* nav-more-popover is position:fixed, JS positions it — no collapsed override needed */

/* =========================================================
   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;
}

/* 3b) Toggle button for writer page — same style as read-page toggle */
#btn-write-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;
}
#btn-write-nav-toggle:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
}
#btn-write-nav-toggle:active{ transform: translateY(1px); }
#btn-write-nav-toggle:focus{ outline:none; }
#btn-write-nav-toggle:focus-visible{
  box-shadow: 0 0 0 3px rgba(96,165,250,.18);
}
#btn-write-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,.65);
  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,.65);
  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,.65);
  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,.72);
  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,.65); }

/* 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,.65); }
.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,.72); }

/* 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,.65);
  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-sort-select option:checked{ background: linear-gradient(0deg, #2a3a5c 0%, #2a3a5c 100%) !important; color: #fff !important; }

.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,.65); 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,.65); 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,.65); margin-top:2px; }
.admin-managed-list{ margin-top:12px; }
.admin-feed-health-controls{
  display:grid;
  grid-template-columns:repeat(4, minmax(140px, 1fr));
  gap:10px;
  margin-top:12px;
  margin-bottom:10px;
}
.admin-feed-health-controls .btn{ width:auto; min-width:0; }
.admin-feed-health-summary{ margin-top:4px; }

@media(max-width:900px){
  .admin-feed-health-controls{
    grid-template-columns:repeat(2, minmax(120px, 1fr));
  }
}

@media(max-width:560px){
  .admin-feed-health-controls{
    grid-template-columns:1fr;
  }
}

/* ── Feed Control Tower ── */
.admin-feed-tower{ position:relative; }
.admin-feed-tower-header{
  position:sticky; top:0; z-index:12;
  background:rgba(15,23,42,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:14px 20px 12px; margin:-20px -20px 16px;
  border-radius:16px 16px 0 0;
}
.admin-feed-tower-bar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.admin-feed-tower-identity{
  display:flex; align-items:center; gap:10px; flex:1 1 auto; min-width:0;
}
.admin-feed-tower-identity h3{ margin:0; font-size:16px; font-weight:800; white-space:nowrap; }
.admin-feed-tower-profile-badge{
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  padding:3px 10px; border-radius:20px;
  background:rgba(99,102,241,.15); color:rgba(129,140,248,.95);
  border:1px solid rgba(99,102,241,.25);
  white-space:nowrap; max-width:140px; overflow:hidden; text-overflow:ellipsis;
}
.admin-feed-tower-health-dot{
  display:inline-block; width:10px; height:10px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,.15); border:1.5px solid rgba(255,255,255,.10);
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.admin-feed-tower-health-dot[data-health="ok"]{
  background:#4ade80; border-color:rgba(74,222,128,.5); box-shadow:0 0 6px rgba(74,222,128,.4);
}
.admin-feed-tower-health-dot[data-health="warn"]{
  background:#fbbf24; border-color:rgba(251,191,36,.5); box-shadow:0 0 6px rgba(251,191,36,.4);
}
.admin-feed-tower-health-dot[data-health="error"]{
  background:#f87171; border-color:rgba(248,113,113,.5); box-shadow:0 0 6px rgba(248,113,113,.4);
}
.admin-feed-tower-meta{
  display:flex; align-items:center; gap:8px; flex:0 1 auto;
}
.admin-feed-tower-last-change{
  font-size:11px; color:rgba(255,255,255,.35); white-space:nowrap;
}
.admin-feed-tower-actions{
  display:flex; align-items:center; gap:6px; flex-shrink:0;
}
.admin-feed-tower-actions .btn-sm{
  font-size:12px; padding:5px 12px; min-height:0; border-radius:8px;
}

/* ── Feed Control Tower Groups ── */
.admin-feed-group{
  margin-bottom:8px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  background:rgba(255,255,255,.015);
  transition:border-color .2s ease;
}
.admin-feed-group:hover{ border-color:rgba(255,255,255,.10); }
.admin-feed-group > summary{
  display:flex; align-items:center; gap:10px;
  padding:14px 18px; cursor:pointer;
  list-style:none; user-select:none;
  font-size:14px; font-weight:700; color:rgba(255,255,255,.88);
  transition:background .15s ease;
  border-radius:14px;
}
.admin-feed-group > summary:hover{ background:rgba(255,255,255,.03); }
.admin-feed-group > summary::-webkit-details-marker{ display:none; }
.admin-feed-group > summary::marker{ display:none; content:""; }
.admin-feed-group-icon{
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:8px; flex-shrink:0;
  background:rgba(99,102,241,.10); color:rgba(129,140,248,.85);
}
.admin-feed-group-title{ flex:1 1 auto; }
.admin-feed-group-hint{
  font-size:11px; font-weight:400; color:rgba(255,255,255,.35);
  max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.admin-feed-group-chevron{
  display:flex; align-items:center; color:rgba(255,255,255,.30);
  transition:transform .2s ease;
}
.admin-feed-group[open] > summary .admin-feed-group-chevron{
  transform:rotate(180deg);
}
.admin-feed-group-body{
  padding:4px 18px 18px;
}

@media(max-width:700px){
  .admin-feed-tower-header{ padding:10px 14px 8px; margin:-14px -14px 12px; }
  .admin-feed-tower-bar{ gap:8px; }
  .admin-feed-tower-identity h3{ font-size:14px; }
  .admin-feed-group > summary{ padding:12px 14px; font-size:13px; }
  .admin-feed-group-body{ padding:4px 14px 14px; }
  .admin-feed-group-hint{ display:none; }
}

.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, background .3s ease;
}
.wall-item--flash{
  animation: wallFlash 2.4s ease;
}
@keyframes wallFlash{
  0%  { background:transparent; }
  8%  { background:rgba(139,92,246,.18); }
  25% { background:transparent; }
  33% { background:rgba(139,92,246,.14); }
  50% { background:transparent; }
  58% { background:rgba(139,92,246,.10); }
  75% { background:transparent; }
}
@media(prefers-reduced-motion:reduce){
  .wall-item--flash{ animation:none; background:rgba(139,92,246,.12); }
}
.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,.65);
}
.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,
  body.write-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,
  body.write-nav-collapsed .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);
}
.role-option--premium{
  opacity:.7; cursor:not-allowed; position:relative;
  border-color:rgba(168,85,247,.25);
  background:rgba(168,85,247,.06);
}
.role-option--premium[aria-pressed="true"]{
  border-color:rgba(168,85,247,.4);
  background:rgba(168,85,247,.12);
}
.role-option--premium:hover{
  border-color:rgba(168,85,247,.3); background:rgba(168,85,247,.08);
}

/* 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,.65); 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,.65); }
.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,.72); 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:relative;
}
.news-widget-btn{
  width:48px; height:48px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(99,144,240,.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(99,144,240,.3); }
  50%{ box-shadow:0 4px 24px rgba(99,144,240,.55); }
}

.news-widget-badge{
  position:absolute; top:-4px; right:-4px;
  background:#fff; color:#4f7ce8; 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,.65); 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,.65);
  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,.65); 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,.65); 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-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-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,.65); 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,.65);
}

/* 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-input-wrap{
  position:relative; display:flex; align-items:center;
}
.switch-input-wrap .switch-account-password{
  padding-right:40px;
}
.switch-eye-btn{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; padding:4px;
  color:rgba(255,255,255,.4); display:flex; align-items:center; justify-content:center;
  border-radius:4px; transition:color .14s ease;
}
.switch-eye-btn:hover{ color:rgba(255,255,255,.7); }

.switch-account-status{
  min-height:18px; font-size:12px; color:rgba(255,255,255,.65); 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,.65);
}
.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,.65); }
.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;
  background:rgba(255,255,255,.04);
}
.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;
}

/* ── Cover zoom magnifier ────────────────────────────────────────────── */
.nq-cover-zoom{
  position:absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  border:none; border-radius: 5px;
  color: rgba(255,255,255,.75);
  cursor: pointer;
  pointer-events: auto;
  z-index: 3;
  opacity: 0;
  transition: opacity .18s ease, background .18s ease;
  padding: 0;
}
.nq-cover:hover .nq-cover-zoom{ opacity: 1; }
.nq-cover-zoom:hover{
  background: rgba(0,0,0,.75);
  color: #fff;
}
/* Smaller magnifier on very small covers */
.trending-cover .nq-cover-zoom,
.feed-embed-cover .nq-cover-zoom{
  width: 18px; height: 18px;
  top: 2px; right: 2px;
  border-radius: 4px;
}
.trending-cover .nq-cover-zoom svg,
.feed-embed-cover .nq-cover-zoom svg{
  width: 10px; height: 10px;
}
/* Hide zoom on fallback covers (no image to zoom) */
.nq-cover-fallback ~ .nq-cover-zoom{ display: none; }

/* ── Cover lightbox ──────────────────────────────────────────────────── */
.nq-cover-lightbox{
  position: fixed; inset: 0; z-index: 10000;
  display: none;
  align-items: center; justify-content: center;
}
.nq-cover-lightbox.is-open{
  display: flex;
}
.nq-cover-lightbox-backdrop{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: nq-lb-fade-in .2s ease;
}
@keyframes nq-lb-fade-in{
  from{ opacity: 0; }
  to{ opacity: 1; }
}
.nq-cover-lightbox-content{
  position: relative;
  max-width: min(420px, 90vw);
  max-height: 90vh;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
  animation: nq-lb-scale-in .25s cubic-bezier(.4,0,.2,1);
}
@keyframes nq-lb-scale-in{
  from{ opacity: 0; transform: scale(.92); }
  to{ opacity: 1; transform: scale(1); }
}
.nq-cover-lightbox-img{
  display: block;
  width: 100%; height: auto;
  max-height: 90vh;
  object-fit: contain;
  background: rgba(255,255,255,.03);
}

/* ── 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,.65);
  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,.65);
}
.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,.65);
  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,.65);
}
.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,.65);
}

@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,.65);
  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,.65);
  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,.65); 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; }

/* ── ABR Redesigned Drawer ─────────────────────────────────────────── */

/* Status banner */
.abr-status-banner{
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 10px;
  margin-bottom: 16px; font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .4px;
}
.abr-status-banner-icon{ display: flex; align-items: center; }
.abr-status-banner--new{ background: rgba(59,130,246,.10); color: #60a5fa; }
.abr-status-banner--reviewing{ background: rgba(251,191,36,.10); color: #fbbf24; }
.abr-status-banner--accepted{ background: rgba(34,197,94,.10); color: #22c55e; }
.abr-status-banner--rejected{ background: rgba(239,68,68,.10); color: #ef4444; }
.abr-status-banner--resolved{ background: rgba(148,163,184,.08); color: #94a3b8; }

/* Metadata grid */
.abr-meta-grid{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; margin-bottom: 18px;
}
.abr-meta-card{
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: 10px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.05);
}
.abr-meta-card-icon{
  flex-shrink: 0; width: 32px; height: 32px;
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  background: rgba(139,92,246,.08); color: rgba(139,92,246,.7);
}
.abr-meta-card-label{
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; color: rgba(255,255,255,.4); margin-bottom: 2px;
}
.abr-meta-card-value{
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,.85);
  word-break: break-all;
}
.abr-meta-card-value code{
  font-size: 11px; background: rgba(255,255,255,.05);
  padding: 1px 5px; border-radius: 4px;
}

/* Content text */
.abr-content-text{
  font-size: 14px; color: rgba(255,255,255,.8);
  margin: 0; line-height: 1.55;
}

/* Compare sections (expected vs actual) */
.abr-compare-section{
  border-left: 3px solid rgba(34,197,94,.35);
  padding-left: 14px;
  border-radius: 0;
}
.abr-compare-section h5 svg{ vertical-align: -2px; margin-right: 4px; color: #22c55e; }
.abr-compare-section--actual{
  border-left-color: rgba(239,68,68,.35);
}
.abr-compare-section--actual h5 svg{ color: #ef4444; }

/* Tech grid items */
.abr-tech-item{
  display: flex; flex-direction: column; gap: 2px;
}
.abr-tech-item--full{ grid-column: 1 / -1; }
.abr-tech-label{
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .3px; color: rgba(255,255,255,.35);
}

/* Timeline audit log */
.abr-timeline{
  display: flex; flex-direction: column; gap: 0;
  padding-left: 2px;
}
.abr-timeline-item{
  display: flex; align-items: flex-start; gap: 12px;
  position: relative; padding-bottom: 16px; padding-left: 4px;
}
.abr-timeline-item::before{
  content: ""; position: absolute;
  left: 10px; top: 22px; bottom: 0;
  width: 2px; background: rgba(255,255,255,.06);
}
.abr-timeline-item--last::before{ display: none; }
.abr-timeline-item--last{ padding-bottom: 0; }
.abr-timeline-dot{
  flex-shrink: 0; width: 22px; height: 22px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06); color: rgba(255,255,255,.65);
  position: relative; z-index: 1;
}
.abr-timeline-dot--new{ background: rgba(59,130,246,.15); color: #60a5fa; }
.abr-timeline-dot--reviewing{ background: rgba(251,191,36,.15); color: #fbbf24; }
.abr-timeline-dot--accepted{ background: rgba(34,197,94,.15); color: #22c55e; }
.abr-timeline-dot--rejected{ background: rgba(239,68,68,.15); color: #ef4444; }
.abr-timeline-dot--resolved{ background: rgba(148,163,184,.12); color: #94a3b8; }
.abr-timeline-dot--created{ background: rgba(59,130,246,.15); color: #60a5fa; }
.abr-timeline-content{
  display: flex; flex-direction: column; gap: 1px; padding-top: 2px;
}
.abr-timeline-action{
  font-size: 13px; font-weight: 700; color: rgba(255,255,255,.8);
  text-transform: capitalize;
}
.abr-timeline-meta{
  font-size: 11px; color: rgba(255,255,255,.35);
}

/* Action bar */
.abr-action-bar{
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.abr-action-btn{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 10px;
  font-size: 13px; font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer; transition: background .15s, border-color .15s, transform .1s;
  white-space: nowrap;
}
.abr-action-btn:active{ transform: scale(.97); }
.abr-action-btn svg{ flex-shrink: 0; }
.abr-action-btn--reviewing{
  background: rgba(251,191,36,.10); color: #fbbf24;
  border-color: rgba(251,191,36,.2);
}
.abr-action-btn--reviewing:hover{ background: rgba(251,191,36,.18); }
.abr-action-btn--accepted{
  background: rgba(34,197,94,.10); color: #22c55e;
  border-color: rgba(34,197,94,.2);
}
.abr-action-btn--accepted:hover{ background: rgba(34,197,94,.18); }
.abr-action-btn--rejected{
  background: rgba(239,68,68,.10); color: #ef4444;
  border-color: rgba(239,68,68,.2);
}
.abr-action-btn--rejected:hover{ background: rgba(239,68,68,.18); }
.abr-action-btn--resolved{
  background: rgba(148,163,184,.08); color: #94a3b8;
  border-color: rgba(148,163,184,.15);
}
.abr-action-btn--resolved:hover{ background: rgba(148,163,184,.15); }

@media(max-width:480px){
  .abr-meta-grid{ grid-template-columns: 1fr; }
}

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

#view-chat{ height: calc(100dvh - 36px); max-height: calc(100dvh - 36px); overflow:hidden; }
@media(max-width:980px){ #view-chat{ height: calc(100dvh - 56px); max-height: calc(100dvh - 56px); } }
#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; overflow:hidden; }

.chat-container{
  display:flex;
  flex:1;min-height:0;
  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;min-height: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;min-height:0;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-tick{
  font-size:11px;letter-spacing:-2px;
  color:rgba(255,255,255,.4);
  margin-left:2px;
}
.chat-tick--read{color:#34d399;opacity:1;}
.chat-tick--sending{
  display:inline-block;width:10px;height:10px;
  border:1.5px solid rgba(255,255,255,.3);
  border-top-color:transparent;border-radius:50%;
  animation:chatTickSpin .6s linear infinite;
  vertical-align:middle;
}
@keyframes chatTickSpin{to{transform:rotate(360deg);}}
.chat-bubble-optimistic .chat-bubble{opacity:.6;}
.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:10px 12px;background:rgba(255,255,255,.02);
  flex-shrink:0;
}
.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:center;justify-content:center;gap:6px;
}
.chat-composer-btn{
  background:none;border:none;
  color:var(--text-secondary,#a0a0b8);cursor:pointer;
  width:36px;height:36px;padding:0;border-radius:6px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  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;width:36px;height:36px;padding:0;border-radius:8px;
  cursor:pointer;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  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);}

/* Admin chats — toolbar */
.admin-chats-hint{
  margin:0 0 10px;font-size:12px;color:var(--text-secondary,#a0a0b8);
}
.admin-chats-toolbar{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
}
.admin-chats-toolbar .admin-chats-search-row{flex:1;min-width:200px;}

/* Admin chat detail — actions row */
.admin-chat-detail-actions{display:flex;gap:8px;align-items:center;}
.admin-chat-freeze-btn{
  font-weight:600;font-size:13px;
  background:rgba(239,68,68,.12);color:#f87171;border:1px solid rgba(239,68,68,.25);
  transition:background .15s,border-color .15s;
}
.admin-chat-freeze-btn:hover{background:rgba(239,68,68,.2);border-color:rgba(239,68,68,.4);}
.admin-chat-freeze-btn--frozen{
  background:rgba(52,211,153,.12);color:#34d399;border-color:rgba(52,211,153,.25);
}
.admin-chat-freeze-btn--frozen:hover{background:rgba(52,211,153,.2);border-color:rgba(52,211,153,.4);}

/* Admin chat detail — frozen banner */
.admin-chat-frozen-banner{
  padding:8px 12px;border-radius:8px;margin-bottom:8px;
  background:rgba(96,165,250,.08);border:1px solid rgba(96,165,250,.2);
  color:#93c5fd;font-size:13px;font-weight:500;
}

/* Admin chat detail — message search */
.admin-chat-search-messages-row{
  display:flex;gap:8px;align-items:center;margin-bottom:10px;
}
.admin-chat-search-messages-row .input{flex:1;min-width:0;}

/* Admin chat — freeze modal */
.admin-chat-freeze-modal{display:flex;flex-direction:column;gap:10px;}
.admin-chat-freeze-desc{margin:0;font-size:13px;color:var(--text-secondary,#a0a0b8);}
.admin-chat-freeze-effects{
  margin:0;padding-left:20px;font-size:13px;
  color:var(--text-primary,#e0e0f0);
}
.admin-chat-freeze-effects li{margin-bottom:4px;}
.admin-chat-freeze-label{font-size:12px;font-weight:600;color:var(--text-secondary,#a0a0b8);}
.admin-chat-freeze-textarea{
  width:100%;resize:vertical;min-height:60px;
  font-size:13px;font-family:inherit;
}
.admin-chat-freeze-counter{
  text-align:right;font-size:11px;color:var(--text-secondary,#a0a0b8);
}

/* Admin chat — watchlist modal */
.admin-watchlist-modal{display:flex;flex-direction:column;gap:12px;}
.admin-watchlist-desc{margin:0;font-size:13px;color:var(--text-secondary,#a0a0b8);}
.admin-watchlist-tags{
  display:flex;flex-wrap:wrap;gap:6px;
  min-height:32px;padding:8px;border-radius:8px;
  background:rgba(255,255,255,.03);
}
.admin-watchlist-tag{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;border-radius:6px;
  background:rgba(251,191,36,.1);color:#fbbf24;
  font-size:12px;font-weight:500;
}
.admin-watchlist-tag-remove{
  background:none;border:none;color:inherit;cursor:pointer;
  font-size:14px;line-height:1;padding:0 2px;opacity:.7;
}
.admin-watchlist-tag-remove:hover{opacity:1;}
.admin-watchlist-empty{font-size:12px;color:var(--text-secondary,#a0a0b8);font-style:italic;}
.admin-watchlist-add-row{display:flex;gap:8px;align-items:center;}
.admin-watchlist-add-row .input{flex:1;min-width:0;}

/* ════════════════════════════════════════════════════════════════════════════
   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
   ════════════════════════════════════════════════════════════════════════════ */

body.coin-drawer-open .fab-stack{ display:none !important; }

.coin-drawer-overlay{
  position:fixed; inset:0; z-index:3100;
  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,.65);
}
.coin-history-meta{
  display:flex; align-items:center; gap:12px;
  font-size:11px; color:rgba(255,255,255,.65);
}
.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,.72); }

.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,.65); 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,.65);
  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,.65);
}
.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,.65);
  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,.65); 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,.65);
  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(12px);
  z-index:900;
  opacity:0;
  pointer-events:none;
  transition:opacity .8s ease, transform .8s ease;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.mood-bar-root--visible{
  opacity:1;
  transform:translateX(-50%) translateY(0);
  pointer-events:auto;
}
/* Prevent mood bar from covering the last lines of text */
body:has(.mood-bar-root--visible){
  padding-bottom:100px;
}

/* Hint text above the mood bar */
.mood-bar-hint{
  font-size:12px;
  font-weight:500;
  color:rgba(255,255,255,.6);
  text-align:center;
  white-space:nowrap;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .6s ease, transform .6s ease;
  pointer-events:none;
  max-height:0;
  overflow:hidden;
}
.mood-bar-hint--visible{
  opacity:1;
  transform:translateY(0);
  max-height:30px;
}
.mood-bar-hint--hidden{
  opacity:0;
  transform:translateY(-4px);
  max-height:0;
  transition:opacity .8s ease, transform .8s ease, max-height .8s ease .3s;
}
.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,.65);
  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}

/* ── Quote Block (feed) ───────────────────────────────────────────────────── */
.feed-quote-block{
  position:relative;
  margin:8px 0 4px;
  padding:10px 12px 10px 28px;
  background:rgba(255,255,255,.03);
  border-left:3px solid var(--accent, #60a5fa);
  border-radius:6px;
}
.feed-quote-mark{
  position:absolute; top:4px; left:8px;
  font-size:24px; line-height:1; font-family:Georgia,serif;
  color:var(--accent, #60a5fa); opacity:.45;
  pointer-events:none;
}
.feed-quote-text{
  font-size:14px; line-height:1.55;
  font-style:italic; color:rgba(255,255,255,.85);
  word-break:break-word;
}
.feed-quote-message{
  margin:6px 0 2px;
  font-size:14px; line-height:1.5;
  color:rgba(255,255,255,.75);
  word-break:break-word;
}

/* ── Work Started Banner (feed) ───────────────────────────────────────────── */
.feed-started-banner{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  margin:0 -2px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(168,85,247,.10) 0%, rgba(59,130,246,.08) 50%, rgba(16,185,129,.08) 100%);
  border:1px solid rgba(168,85,247,.15);
  position:relative;
  overflow:hidden;
}
.feed-started-banner::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 10% 50%, rgba(168,85,247,.06) 0%, transparent 60%);
  pointer-events:none;
}
.feed-started-icon{
  flex-shrink:0;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border-radius:12px;
  background:linear-gradient(135deg, rgba(168,85,247,.18), rgba(59,130,246,.14));
  color:#a855f7;
  animation:feed-started-float 3s ease-in-out infinite;
}
@keyframes feed-started-float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-3px); }
}
.feed-started-body{
  flex:1;
  min-width:0;
}
.feed-started-title{
  font-size:14px;
  font-weight:700;
  color:rgba(255,255,255,.92);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.feed-started-sub{
  font-size:12px;
  color:rgba(255,255,255,.65);
  margin-top:2px;
  line-height:1.4;
}
.feed-started-cta{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 16px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  color:#fff;
  background:linear-gradient(135deg, #a855f7, #6366f1);
  text-decoration:none;
  transition:transform .15s, box-shadow .15s;
  white-space:nowrap;
  border:0;
  cursor:pointer;
}
.feed-started-cta:hover,
.feed-started-cta:focus-visible{
  transform:scale(1.06);
  box-shadow:0 4px 18px rgba(168,85,247,.4);
  background:linear-gradient(135deg, #b97afc, #818cf8);
}
.feed-started-cta.active{
  background:linear-gradient(135deg, #7c3aed, #4f46e5);
  box-shadow:0 2px 10px rgba(99,102,241,.35);
}
.feed-started-cta.active:hover{
  background:linear-gradient(135deg, #6d28d9, #4338ca);
}
.feed-started-cta svg{
  flex-shrink:0;
}
@media(max-width:480px){
  .feed-started-banner{ flex-wrap:wrap; gap:10px; }
  .feed-started-cta{ width:100%; justify-content:center; }
}

/* ── Birthday Banner (feed) ───────────────────────────────────────────────── */
.feed-birthday-banner{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  margin:0 -2px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(255,215,0,.12) 0%, rgba(255,107,129,.10) 50%, rgba(84,160,255,.08) 100%);
  border:1px solid rgba(255,215,0,.22);
  position:relative;
  overflow:hidden;
}
.feed-birthday-banner::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 15% 50%, rgba(255,215,0,.08) 0%, transparent 60%);
  pointer-events:none;
}
.feed-birthday-icon{
  flex-shrink:0;
  width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  border-radius:12px;
  background:linear-gradient(135deg, rgba(255,215,0,.18), rgba(255,107,129,.14));
  animation:feed-bday-float 2.5s ease-in-out infinite;
}
@keyframes feed-bday-float{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-4px) rotate(2deg); }
}
.feed-birthday-body{
  flex:1;
  min-width:0;
}
.feed-birthday-title{
  font-size:14px;
  font-weight:700;
  color:rgba(255,255,255,.92);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.feed-birthday-sub{
  font-size:12px;
  color:rgba(255,255,255,.65);
  margin-top:2px;
  line-height:1.4;
}
.feed-birthday-cta{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 16px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  color:#fff;
  background:linear-gradient(135deg, #ffd700, #ff6b81);
  text-decoration:none;
  transition:transform .15s, box-shadow .15s;
  white-space:nowrap;
  border:0;
  cursor:pointer;
}
.feed-birthday-cta:hover,
.feed-birthday-cta:focus-visible{
  transform:scale(1.06);
  box-shadow:0 4px 18px rgba(255,215,0,.35);
  background:linear-gradient(135deg, #ffe44d, #ff8fa0);
}
.feed-birthday-cta svg{
  flex-shrink:0;
}
@media(max-width:480px){
  .feed-birthday-banner{ flex-wrap:wrap; gap:10px; }
  .feed-birthday-cta{ width:100%; justify-content:center; }
}

/* ── 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-hint{
    font-size:11px;
  }
  .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-bar-hint,
  .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,.65);
}
.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,.65);
  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;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  padding:4px 0 12px;
}
.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);
}

.browse-pills-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  padding:4px 0 8px;
}

.browse-pill{
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.74);
  padding:8px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.2px;
  transition:all .16s ease;
}

.browse-pill:hover{
  border-color:rgba(96,165,250,.45);
  color:rgba(255,255,255,.94);
  background:rgba(96,165,250,.1);
}

.browse-pill.active{
  border-color:rgba(96,165,250,.62);
  color:#dbeafe;
  background:linear-gradient(135deg, rgba(96,165,250,.25), rgba(124,58,237,.2));
  box-shadow:0 0 0 2px rgba(96,165,250,.18);
}

.browse-tag-filter{
  display:flex;
  justify-content:center;
  margin:2px 0 8px;
}

.browse-tag-active{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.82);
  font-size:12px;
}

.browse-tag-clear,
.browse-mood-clear{
  border:none;
  background:transparent;
  color:rgba(255,255,255,.75);
  font-size:14px;
  cursor:pointer;
  line-height:1;
}

.nfx-card-tags{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:6px;
}

.nfx-card-tag{
  display:inline-flex;
  align-items:center;
  padding:2px 7px;
  border-radius:999px;
  font-size:10px;
  font-weight:700;
  color:rgba(255,255,255,.72);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
}

/* 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;
}
.nav-tournament-pill--upcoming{
  background:linear-gradient(135deg,rgba(139,92,246,.7),rgba(109,40,217,.6));
  color:#e9d5ff;
  animation:none;
  font-variant-numeric:tabular-nums;
}
@keyframes trn-pill-pulse{
  0%,100%{ opacity:1; }
  50%{ opacity:.65; }
}

/* ── Page layout ──────────────────────────────────────────────────────── */
.trn-page{ padding:0 0 48px; }
.trn-loading{ display:flex; flex-direction:column; align-items:center; gap:12px; padding:80px 0; color:rgba(255,255,255,.65); }
.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:60px 24px; animation:trn-entrance .5s ease both; }
.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-sub{ font-size:14px; color:rgba(255,255,255,.65); margin:0 0 28px; }

/* Hint cards */
.trn-empty-hints{
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
  max-width:680px; margin:0 auto 32px;
}
.trn-hint-card{
  flex:1 1 180px; max-width:210px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  border-radius:14px; padding:20px 16px; text-align:center;
  transition:border-color .2s ease, background .2s ease, transform .25s ease;
}
.trn-hint-card:hover{
  border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.06); transform:translateY(-3px);
}
.trn-hint-icon{ font-size:28px; margin-bottom:8px; }
.trn-hint-text{ font-size:12.5px; color:rgba(255,255,255,.55); line-height:1.5; }

/* Big countdown */
.trn-next-countdown{ margin-top:8px; }
.trn-countdown-label{
  font-size:12px; text-transform:uppercase; letter-spacing:.08em;
  color:rgba(255,255,255,.4); font-weight:600; margin-bottom:10px;
}
.trn-countdown-big{
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.trn-cd-unit{ display:flex; flex-direction:column; align-items:center; min-width:56px; }
.trn-cd-num{
  font-size:36px; font-weight:900; letter-spacing:-.02em;
  color:#fbbf24; line-height:1;
  font-variant-numeric:tabular-nums;
}
.trn-cd-lbl{ font-size:10px; color:rgba(255,255,255,.35); text-transform:uppercase; margin-top:4px; }
.trn-cd-sep{ font-size:28px; font-weight:700; color:rgba(255,255,255,.15); line-height:1; padding-bottom:14px; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.trn-hero{
  position:relative; overflow:hidden; border-radius:22px;
  background:linear-gradient(160deg,#110d21 0%,#0d1425 35%,#1a103a 70%,#1c0f2e 100%);
  padding:56px 32px 48px; text-align:center; margin-bottom:28px;
  border:1px solid rgba(251,191,36,.10);
  animation:trn-entrance .6s ease both;
}
.trn-hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 600px 400px at 20% -10%, rgba(251,191,36,.10), transparent 70%),
    radial-gradient(ellipse 500px 350px at 80% 120%, rgba(139,92,246,.08), transparent 70%);
  pointer-events:none;
  animation:trn-hero-bg-shift 8s ease-in-out infinite alternate;
}
@keyframes trn-hero-bg-shift{
  0%{ opacity:.7; }
  100%{ opacity:1; }
}
.trn-hero-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,.14) 0%,transparent 65%);
  pointer-events:none;
  animation:trn-glow-float 6s ease-in-out infinite alternate;
}
@keyframes trn-glow-float{
  0%{ transform:translateX(-50%) translateY(0); opacity:.7; }
  100%{ transform:translateX(-50%) translateY(12px); opacity:1; }
}
.trn-hero-particles{
  position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0;
}
.trn-hero-particle{
  position:absolute; border-radius:50%;
  background:rgba(251,191,36,.5);
  animation:trn-particle-float var(--dur,4s) var(--delay,0s) ease-in-out infinite alternate;
}
@keyframes trn-particle-float{
  0%{ transform:translateY(0) scale(1); opacity:.3; }
  100%{ transform:translateY(var(--dy,-20px)) scale(var(--sc,1.3)); opacity:.7; }
}
.trn-hero-content{ position:relative; z-index:1; }
.trn-hero-icon{
  color:#fbbf24; margin-bottom:16px;
  display:inline-flex; filter:drop-shadow(0 0 18px rgba(251,191,36,.35));
  animation:trn-trophy-pulse 3s ease-in-out infinite;
}
@keyframes trn-trophy-pulse{
  0%,100%{ transform:scale(1); filter:drop-shadow(0 0 18px rgba(251,191,36,.35)); }
  50%{ transform:scale(1.08); filter:drop-shadow(0 0 28px rgba(251,191,36,.55)); }
}
.trn-hero-icon svg{ width:48px; height:48px; }
.trn-hero-title{
  font-size:30px; font-weight:900; margin:0 0 8px; letter-spacing:-.02em;
  background:linear-gradient(135deg,#fde68a 0%,#fbbf24 30%,#f59e0b 60%,#fcd34d 100%);
  background-size:200% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:trn-shimmer 4s linear infinite;
}
@keyframes trn-shimmer{
  0%{ background-position:0% center; }
  100%{ background-position:200% center; }
}
.trn-hero-theme{
  font-size:14px; color:rgba(255,255,255,.55); margin:0 0 24px;
  font-style:italic; letter-spacing:.2px;
}
.trn-hero-countdown{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 20px; border-radius:14px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(4px); font-size:14px; color:rgba(255,255,255,.6);
}
.trn-hero-countdown-label{ margin-right:2px; }
.trn-hero-countdown-time{
  font-family:'SF Mono',ui-monospace,monospace; font-weight:700; font-size:17px;
  color:#fbbf24; letter-spacing:.5px;
}

/* ── History section ──────────────────────────────────────────────────── */
.trn-history-section{ margin-bottom:28px; }
.trn-history-toggle{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:10px; padding:10px 18px; color:rgba(255,255,255,.65);
  font-size:13px; font-weight:600; cursor:pointer; transition:all .2s ease;
}
.trn-history-toggle:hover{ background:rgba(255,255,255,.07); color:rgba(255,255,255,.7); }
.trn-history-toggle svg{ width:14px; height:14px; opacity:.5; }
.trn-history-chevron{ font-size:12px; transition:transform .2s; }
.trn-history-list{
  margin-top:12px; border-radius:14px; overflow:hidden;
  background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06);
}
.trn-hist-header,.trn-hist-row{
  display:grid; grid-template-columns:1fr 70px 90px 95px 1fr 100px;
  align-items:center; gap:8px; padding:10px 16px; font-size:12px;
}
.trn-hist-header{
  color:rgba(255,255,255,.3); font-weight:700; text-transform:uppercase;
  letter-spacing:.5px; border-bottom:1px solid rgba(255,255,255,.06);
}
.trn-hist-row{
  color:rgba(255,255,255,.65); border-bottom:1px solid rgba(255,255,255,.03);
  transition:background .15s;
}
.trn-hist-row:last-child{ border-bottom:none; }
.trn-hist-row:hover{ background:rgba(255,255,255,.03); }
.trn-hist-cancelled .trn-hist-status{ color:rgba(239,68,68,.6); }
.trn-hist-finalized .trn-hist-status{ color:rgba(52,211,153,.6); }
.trn-hist-winner{ color:rgba(251,191,36,.7); font-weight:600; }
.trn-hist-results-btn{
  background:rgba(139,92,246,.12); color:#a78bfa; border:1px solid rgba(139,92,246,.2);
  border-radius:6px; padding:4px 10px; font-size:11px; font-weight:600;
  cursor:pointer; transition:all .15s;
}
.trn-hist-results-btn:hover{ background:rgba(139,92,246,.2); }

/* ── Slot cards grid ──────────────────────────────────────────────────── */
.trn-slots-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px; margin-bottom:32px;
}
.trn-slot-card{
  position:relative;
  background:linear-gradient(165deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.015) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px; padding:22px 22px 20px;
  transition:all .3s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; gap:16px;
  border-left:3px solid rgba(255,255,255,.08);
  animation:trn-entrance .5s ease both;
  animation-delay:var(--trn-delay,.15s);
}
.trn-slot-card:hover{
  border-color:rgba(255,255,255,.16);
  background:linear-gradient(165deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.025) 100%);
  transform:translateY(-3px);
  box-shadow:0 8px 32px rgba(0,0,0,.25);
}
/* Status accent borders */
.trn-slot--open{ border-left-color:#4ade80; }
.trn-slot--joined{ border-left-color:#60a5fa; }
.trn-slot--live{ border-left-color:#f87171; }
.trn-slot--voting{ border-left-color:#c084fc; }
.trn-slot--finalized{ border-left-color:#fbbf24; }
.trn-slot--cancelled{ border-left-color:rgba(255,255,255,.1); }
.trn-slot--locked{ border-left-color:rgba(255,255,255,.1); }
.trn-slot--full{ border-left-color:#fb923c; }

.trn-slot-header{ display:flex; justify-content:space-between; align-items:center; }
.trn-slot-label{ font-size:13px; font-weight:800; color:#e2e8f0; text-transform:uppercase; letter-spacing:.6px; }
.trn-slot-status{
  font-size:11px; font-weight:700; padding:4px 12px; border-radius:20px;
  background:rgba(255,255,255,.06); color:rgba(255,255,255,.65);
  letter-spacing:.3px;
}
.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:14px; }
.trn-slot-time-date{ font-size:12px; color:rgba(255,255,255,.65); margin-bottom:2px; }
.trn-slot-times{ display:flex; flex-direction:column; gap:6px; }
.trn-slot-time-row{
  display:flex; align-items:center; gap:8px;
}
.trn-slot-time-row .trn-slot-time-icon{ color:rgba(255,255,255,.3); flex-shrink:0; display:flex; }
.trn-slot-time-row .trn-slot-time-label{
  font-size:11px; color:rgba(255,255,255,.4); min-width:80px;
}
.trn-slot-time-row .trn-slot-time-value{
  font-size:15px; font-weight:800; color:#e2e8f0;
  font-family:'SF Mono',ui-monospace,monospace; letter-spacing:.5px;
}

/* ── Glow animations for active / upcoming cards ─────────────────── */
.trn-slot--glow-active{
  border-color:rgba(139,92,246,.35);
  box-shadow:0 0 18px rgba(139,92,246,.15), 0 0 4px rgba(139,92,246,.1);
  animation:trn-entrance .5s ease both, trn-glow-active 2.5s ease-in-out infinite;
  animation-delay:var(--trn-delay,.15s), 0s;
}
@keyframes trn-glow-active{
  0%,100%{ box-shadow:0 0 18px rgba(139,92,246,.15), 0 0 4px rgba(139,92,246,.1); border-color:rgba(139,92,246,.35); }
  50%{ box-shadow:0 0 28px rgba(139,92,246,.28), 0 0 8px rgba(139,92,246,.18); border-color:rgba(139,92,246,.5); }
}
.trn-slot--glow-next{
  border-color:rgba(251,191,36,.25);
  box-shadow:0 0 14px rgba(251,191,36,.1), 0 0 3px rgba(251,191,36,.08);
  animation:trn-entrance .5s ease both, trn-glow-next 3s ease-in-out infinite;
  animation-delay:var(--trn-delay,.15s), 0s;
}
@keyframes trn-glow-next{
  0%,100%{ box-shadow:0 0 14px rgba(251,191,36,.1), 0 0 3px rgba(251,191,36,.08); border-color:rgba(251,191,36,.25); }
  50%{ box-shadow:0 0 24px rgba(251,191,36,.22), 0 0 6px rgba(251,191,36,.14); border-color:rgba(251,191,36,.4); }
}

/* ── Tournament lobby notification modal ─────────────────────────── */
.trn-lobby-notif-overlay{
  position:fixed; inset:0; z-index:99999;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .3s ease;
  padding:20px;
}
.trn-lobby-notif-overlay.is-visible{ opacity:1; }
.trn-lobby-notif-box{
  background:linear-gradient(145deg,#141c2e 0%,#0e1525 100%);
  border:1px solid rgba(139,92,246,.3);
  border-radius:20px; padding:36px 32px 28px; text-align:center;
  max-width:380px; width:100%;
  box-shadow:0 24px 64px rgba(0,0,0,.5), 0 0 40px rgba(139,92,246,.12);
  transform:scale(.92) translateY(16px); transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.trn-lobby-notif-overlay.is-visible .trn-lobby-notif-box{
  transform:scale(1) translateY(0);
}
.trn-lobby-notif-box--ended{
  border-color:rgba(255,255,255,.1);
  box-shadow:0 24px 64px rgba(0,0,0,.5);
}
.trn-lobby-notif-icon{
  display:flex; align-items:center; justify-content:center;
  width:72px; height:72px; margin:0 auto 18px;
  border-radius:50%;
  background:rgba(139,92,246,.12);
  color:#a78bfa;
  animation:trn-lobby-icon-pulse 2s ease-in-out infinite;
}
@keyframes trn-lobby-icon-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(139,92,246,.2); }
  50%{ box-shadow:0 0 0 12px rgba(139,92,246,0); }
}
.trn-lobby-notif-icon--warn{
  background:rgba(251,191,36,.12); color:#fbbf24; animation:none;
}
.trn-lobby-notif-icon--error{
  background:rgba(239,68,68,.12); color:#f87171; animation:none;
}
.trn-lobby-notif-title{
  font-size:18px; font-weight:800; color:#e2e8f0; margin:0 0 8px;
}
.trn-lobby-notif-body{
  font-size:13.5px; color:rgba(255,255,255,.65); line-height:1.5; margin:0 0 24px;
}
.trn-lobby-notif-actions{
  display:flex; flex-direction:column; gap:10px;
}
.trn-lobby-notif-btn{
  display:flex; align-items:center; justify-content:center;
  width:100%; padding:12px 20px; border-radius:12px;
  font-size:14px; font-weight:700; cursor:pointer;
  border:none; transition:all .15s ease;
}
.trn-lobby-notif-btn--primary{
  background:linear-gradient(135deg,#7c3aed,#6d28d9);
  color:#fff; box-shadow:0 4px 16px rgba(124,58,237,.3);
}
.trn-lobby-notif-btn--primary:hover{
  background:linear-gradient(135deg,#8b5cf6,#7c3aed);
  box-shadow:0 6px 24px rgba(124,58,237,.4);
}
.trn-lobby-notif-btn--primary:disabled{
  opacity:.5; cursor:wait;
}
.trn-lobby-notif-btn--secondary{
  background:rgba(255,255,255,.06); color:rgba(255,255,255,.65);
}
.trn-lobby-notif-btn--secondary:hover{
  background:rgba(255,255,255,.1); color:rgba(255,255,255,.7);
}

.trn-slot-stats{
  display:flex; gap:0;
  border-radius:12px; overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
}
.trn-slot-stat{
  flex:1; display:flex; flex-direction:column; align-items:center;
  padding:10px 12px;
  background:rgba(255,255,255,.02);
}
.trn-slot-stat + .trn-slot-stat{ border-left:1px solid rgba(255,255,255,.06); }
.trn-slot-stat-value{ font-size:18px; font-weight:800; color:#e2e8f0; }
.trn-slot-prize-value{ display:inline-flex; align-items:center; gap:4px; }
.trn-slot-coin-icon{ width:18px; height:18px; vertical-align:middle; flex-shrink:0; }
.trn-stat-bump{ animation:trn-stat-bump .4s ease; }
@keyframes trn-stat-bump{
  0%{ transform:scale(1); color:#e2e8f0; }
  40%{ transform:scale(1.25); color:#fbbf24; }
  100%{ transform:scale(1); color:#e2e8f0; }
}
.trn-slot-stat-label{ font-size:10px; color:rgba(255,255,255,.35); text-transform:uppercase; letter-spacing:.3px; margin-top:2px; }
.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,#fde68a,#fbbf24 40%,#f59e0b);
  transition:all .25s cubic-bezier(.4,0,.2,1);
  box-shadow:0 2px 12px rgba(251,191,36,.25), inset 0 1px 0 rgba(255,255,255,.25);
  text-shadow:0 1px 0 rgba(255,255,255,.15);
}
.trn-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 6px 24px rgba(251,191,36,.4), inset 0 1px 0 rgba(255,255,255,.25); }
.trn-btn-primary:active{ transform:translateY(0); box-shadow:0 1px 6px rgba(251,191,36,.2); }
.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); }
}
/* Open slot subtle glow to attract attention */
.trn-slot--open{ box-shadow:0 0 0 1px rgba(34,197,94,.06); }
.trn-slot--open:hover{ box-shadow:0 8px 32px rgba(0,0,0,.25), 0 0 20px rgba(34,197,94,.08); }
.trn-slot--open .trn-btn-primary{ animation:trn-btn-glow 2s ease-in-out infinite; }
.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,.65); 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,.65); }
.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; display:block; text-align:center; }
.trn-register-footer{ margin-top:24px; text-align:center; }
.trn-status{ font-size:13px; color:rgba(255,255,255,.65); text-align:center; margin-top:12px; }
.trn-status--error{ color:#f87171; }

/* ── Lobby ────────────────────────────────────────────────────────────── */
.trn-lobby-page{ display:flex; flex-direction:column; align-items:center; min-height:100vh; padding-bottom:0 !important; }
.trn-lobby-hero{
  position:relative; overflow:hidden; border-radius:24px 24px 0 0; width:100%; flex:1;
  min-height:100vh;
  background:linear-gradient(160deg,#1a1333 0%,#0f172a 60%,#1e1b4b 100%);
  padding:60px 32px; text-align:center; display:flex; flex-direction:column; justify-content: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; display:flex; flex-direction:column; align-items:center; flex:1; justify-content:center; }
.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,.65); 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-title-row{
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
}
.trn-lobby-badge{
  display:inline-block; padding:3px 10px; border-radius:6px;
  font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
}
.trn-badge-des{
  background:rgba(16,185,129,.12); color:#34d399; border:1px solid rgba(16,185,129,.25);
}
.trn-badge-pro{
  background:rgba(139,92,246,.12); color:#a78bfa; border:1px solid rgba(139,92,246,.25);
}
.trn-lobby-participants{
  display:inline-flex; align-items:center; gap:6px;
  font-size:14px; color:rgba(255,255,255,.65);
  padding:8px 16px; border-radius:20px;
  background:rgba(255,255,255,.04);
}
.trn-lobby-participants-icon{ color:rgba(255,255,255,.3); }
.trn-lobby-progress{
  display:flex; align-items:center; gap:8px; margin-top:10px; width:100%; max-width:260px;
}
.trn-lobby-progress-track{
  flex:1; height:6px; border-radius:3px; background:rgba(255,255,255,.06); overflow:hidden;
}
.trn-lobby-progress-fill{
  height:100%; border-radius:3px;
  background:linear-gradient(90deg,#3b82f6,#8b5cf6);
  transition:width .4s ease;
}
.trn-lobby-progress-label{
  font-size:11px; color:rgba(255,255,255,.35); font-weight:600; min-width:32px; text-align:right;
}
.trn-lobby-hint{
  margin-top:auto; padding:16px 20px; border-radius:12px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  font-size:13px; color:rgba(255,255,255,.65); text-align:center; max-width:500px;
}

/* ── Writing editor ───────────────────────────────────────────────────── */
.trn-writing-page{ display:flex; flex-direction:column; gap:16px; min-height:calc(100vh - 40px); }
.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:inline-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;
  vertical-align:middle; line-height:1;
}
.trn-writing-timer-icon{ color:rgba(255,255,255,.3); display:flex; align-items:center; }
.trn-timer-warning{ background:rgba(251,191,36,.1); color:#fbbf24; }
.trn-timer-blink{ animation:trn-timer-blink 1s ease-in-out infinite; }
.trn-timer-critical{ background:rgba(239,68,68,.15); color:#f87171; animation:trn-timer-blink .5s ease-in-out infinite; }
@keyframes trn-timer-blink{
  0%,100%{ opacity:1; }
  50%{ opacity:.3; }
}
.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-prompt-hint{ display:block; font-size:11px; color:rgba(251,191,36,.65); font-weight:500; margin-top:4px; font-style:italic; }
.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; flex:1; display:flex; flex-direction:column; }
.trn-writing-editor{
  width:100%; min-height:200px; flex:1; 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; }

/* ── Waiting for voting ───────────────────────────────────────────────── */
.trn-waiting-page{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:calc(100vh - 200px); }
.trn-waiting-hero{ text-align:center; max-width:460px; }
.trn-waiting-icon{ color:#34d399; margin-bottom:16px; }
.trn-waiting-icon svg{ width:56px; height:56px; }
.trn-waiting-hero h2{ font-size:22px; font-weight:700; color:#e2e8f0; margin:0 0 8px; }
.trn-waiting-sub{ font-size:14px; color:rgba(255,255,255,.65); margin:0 0 24px; }
.trn-waiting-spinner{ margin:0 auto 20px; display:flex; justify-content:center; }
.trn-waiting-hint{ font-size:13px; color:rgba(255,255,255,.35); }

/* ── Back button (voting / register) ─────────────────────────────────── */
.trn-back{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:none; color:rgba(255,255,255,.65); font-size:13px;
  cursor:pointer; padding:6px 0; margin-bottom:8px; transition:color .2s;
}
.trn-back:hover{ color:#e2e8f0; }
.trn-back svg{ width:16px; height:16px; }

/* ── 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,.65); 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; }

/* ── PRO Mode Elements ────────────────────────────────────────────────── */
.trn-hero-title-row{
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
}
.trn-hero-badge{
  display:inline-flex; align-items:center; padding:3px 10px; border-radius:6px;
  font-size:11px; font-weight:800; letter-spacing:.8px; text-transform:uppercase;
  -webkit-text-fill-color:initial;
}
.trn-badge-pro{
  background:linear-gradient(135deg,#f59e0b,#fbbf24); color:#451a03;
  box-shadow:0 0 12px rgba(251,191,36,.3);
}
.trn-badge-des{
  background:linear-gradient(135deg,#3b82f6,#60a5fa); color:#1e3a5f;
  box-shadow:0 0 12px rgba(59,130,246,.3);
}
.trn-hero-fee{
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:14px; color:rgba(255,255,255,.6); margin:0 0 16px;
}

/* PRO voting info (theme + mandatory word in voting header) */
.trn-voting-pro-info{
  display:flex; flex-direction:column; gap:6px; margin:8px 0 12px;
  padding:10px 14px; border-radius:10px;
  background:rgba(251,191,36,.06); border:1px solid rgba(251,191,36,.12);
}
.trn-voting-theme{ font-size:13px; color:rgba(255,255,255,.55); }
.trn-voting-theme-label{ font-weight:700; color:rgba(255,255,255,.7); }
.trn-voting-theme-text{ font-style:italic; }
.trn-voting-mandatory{ font-size:13px; color:rgba(255,255,255,.55); }
.trn-voting-mandatory-label{ font-weight:700; color:rgba(255,255,255,.7); }
.trn-voting-mandatory strong{ color:#fbbf24; }

/* Mandatory word highlight in duel texts */
.trn-duel-highlight{
  background:rgba(251,191,36,.2); color:#fcd34d;
  border-radius:2px; padding:0 2px;
}

/* Language badge on duel cards */
.trn-duel-lang{
  display:inline-flex; align-items:center; padding:2px 6px; border-radius:4px;
  font-size:9px; font-weight:700; letter-spacing:.5px;
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.65);
  margin-left:6px; vertical-align:middle;
}

/* Theme relevance question in duel cards */
.trn-duel-relevance{
  display:flex; align-items:center; gap:10px; margin-top:8px; padding-top:10px;
  border-top:1px solid rgba(255,255,255,.06);
}
.trn-duel-relevance-q{
  font-size:11px; color:rgba(255,255,255,.4); flex:1; min-width:0;
}
.trn-duel-relevance-btns{ display:flex; gap:6px; flex-shrink:0; }
.trn-rel-btn{
  padding:4px 12px; border-radius:6px; border:1px solid rgba(255,255,255,.12);
  background:transparent; color:rgba(255,255,255,.65); font-size:11px; font-weight:600;
  cursor:pointer; transition:all .15s ease;
}
.trn-rel-btn:hover{ border-color:rgba(255,255,255,.25); color:rgba(255,255,255,.7); }
.trn-rel-btn.is-active.trn-rel-yes{
  background:rgba(74,222,128,.15); border-color:rgba(74,222,128,.4); color:#4ade80;
}
.trn-rel-btn.is-active.trn-rel-no{
  background:rgba(248,113,113,.15); border-color:rgba(248,113,113,.4); color:#f87171;
}

/* Theme relevance indicator on podium cards */
.trn-p-relevance{
  display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:6px;
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  margin:4px 0;
}
.trn-p-relevance--on{ background:rgba(74,222,128,.1); color:#4ade80; }
.trn-p-relevance--off{ background:rgba(248,113,113,.1); color:#f87171; }

/* ── Monthly Grand Champion Card (overview) ───────────────────────────── */
.trn-champion-card{
  display:flex; align-items:center; gap:14px;
  margin:20px auto; max-width:520px; padding:16px 20px;
  border-radius:14px; border:1px solid rgba(251,191,36,.2);
  background:linear-gradient(135deg,rgba(251,191,36,.06) 0%,rgba(139,92,246,.04) 100%);
  box-shadow:0 0 20px rgba(251,191,36,.08);
  animation:trn-champ-glow 3s ease-in-out infinite alternate;
}
@keyframes trn-champ-glow{
  0%{ box-shadow:0 0 20px rgba(251,191,36,.08); }
  100%{ box-shadow:0 0 28px rgba(251,191,36,.15); }
}
.trn-champ-crown{ font-size:28px; flex-shrink:0; }
.trn-champ-body{ flex:1; min-width:0; }
.trn-champ-label{
  font-size:10px; font-weight:800; letter-spacing:.8px; text-transform:uppercase;
  color:#fbbf24; margin-bottom:6px;
}
.trn-champ-user{ display:flex; align-items:center; gap:10px; }
.trn-champ-avatar{
  width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0;
  border:2px solid rgba(251,191,36,.35);
}
.trn-champ-avatar--fb{
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(251,191,36,.15); color:#fbbf24;
  font-size:14px; font-weight:700;
}
.trn-champ-info{ flex:1; min-width:0; }
.trn-champ-name{
  display:block; font-size:14px; font-weight:700; color:rgba(255,255,255,.9);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.trn-champ-me{
  display:inline-block; padding:1px 6px; border-radius:4px; margin-left:6px;
  font-size:10px; font-weight:700; background:rgba(251,191,36,.15); color:#fbbf24;
}
.trn-champ-handle{
  display:block; font-size:11px; color:rgba(255,255,255,.4);
}
.trn-champ-score{
  font-size:18px; font-weight:800; color:#fbbf24; flex-shrink:0;
}
.trn-champ-score small{ font-size:10px; font-weight:600; opacity:.6; margin-left:2px; }
.trn-champ-perks{
  font-size:11px; color:rgba(255,255,255,.35); margin-top:6px;
  line-height:1.4;
}

/* Podium rows inside overview card */
.trn-podium-row{
  display:flex; align-items:center; gap:10px;
  padding:6px 0; border-bottom:1px solid rgba(255,255,255,.04);
}
.trn-podium-row:last-child{ border-bottom:none; }
.trn-podium-row--r1 .trn-champ-name{ color:#fbbf24; }
.trn-podium-row--r2 .trn-champ-name{ color:#c0c0c0; }
.trn-podium-row--r3 .trn-champ-name{ color:#cd7f32; }
.trn-podium-medal{ font-size:20px; flex-shrink:0; width:26px; text-align:center; }
.trn-podium-right{ display:flex; align-items:center; gap:8px; margin-left:auto; flex-shrink:0; }
.trn-podium-discount{
  display:inline-block; padding:2px 8px; border-radius:6px; font-size:11px; font-weight:800;
  background:rgba(74,222,128,.12); color:#4ade80;
}

/* ── Per-language podium sections in overview card ─────────────────────── */
.trn-podium-lang-section{ margin-bottom:8px; }
.trn-podium-lang-section:last-child{ margin-bottom:0; }
.trn-podium-lang-header{
  display:flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; color:rgba(255,255,255,.55);
  text-transform:uppercase; letter-spacing:.5px;
  padding:4px 0 2px; margin-top:4px;
  border-top:1px solid rgba(255,255,255,.06);
}
.trn-podium-lang-section:first-child .trn-podium-lang-header{ border-top:none; margin-top:0; }

/* ── Podium banner in Classification Modal ────────────────────────────── */
.trn-clf-champion{
  display:flex; flex-direction:column; gap:8px;
  padding:12px 16px; margin-bottom:16px; border-radius:12px;
  background:linear-gradient(135deg,rgba(251,191,36,.1) 0%,rgba(139,92,246,.06) 100%);
  border:1px solid rgba(251,191,36,.18);
}
.trn-clf-champ-header{
  display:flex; align-items:center; gap:8px; margin-bottom:4px;
}
.trn-clf-champ-crown{ font-size:20px; flex-shrink:0; }
.trn-clf-champ-avatar{
  width:28px; height:28px; border-radius:50%; object-fit:cover; flex-shrink:0;
  border:2px solid rgba(251,191,36,.3);
}
.trn-clf-champ-avatar--fb{
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(251,191,36,.12); color:#fbbf24;
  font-size:12px; font-weight:700;
}
.trn-clf-champ-text{ flex:1; min-width:0; }
.trn-clf-champ-label{
  font-size:9px; font-weight:800; letter-spacing:.7px;
  text-transform:uppercase; color:#fbbf24;
}
.trn-clf-champ-name{
  display:block; font-size:12px; font-weight:600; color:rgba(255,255,255,.85);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.trn-clf-champ-name small{ font-size:10px; color:rgba(255,255,255,.4); font-weight:400; }
.trn-clf-champ-score{
  font-size:14px; font-weight:800; color:#fbbf24; flex-shrink:0;
}
.trn-clf-champ-score small{ font-size:9px; font-weight:600; opacity:.6; margin-left:2px; }
.trn-clf-podium-row{
  display:flex; align-items:center; gap:8px;
  padding:4px 0;
}
.trn-clf-podium-medal{ font-size:16px; flex-shrink:0; width:22px; text-align:center; }
.trn-clf-podium-discount{
  display:inline-block; padding:1px 6px; border-radius:5px; font-size:10px; font-weight:800;
  background:rgba(74,222,128,.12); color:#4ade80; flex-shrink:0;
}

/* Per-language sections in classification modal podium */
.trn-clf-podium-lang{ margin-bottom:6px; }
.trn-clf-podium-lang:last-child{ margin-bottom:0; }
.trn-clf-podium-lang-header{
  display:flex; align-items:center; gap:5px;
  font-size:10px; font-weight:700; color:rgba(255,255,255,.65);
  text-transform:uppercase; letter-spacing:.5px;
  padding:3px 0 1px; margin-top:4px;
  border-top:1px solid rgba(255,255,255,.06);
}
.trn-clf-podium-lang:first-child .trn-clf-podium-lang-header{ border-top:none; margin-top:0; }

/* Rules info button */
.trn-clf-rules-btn{
  margin-left:auto; background:none; border:1px solid rgba(251,191,36,.2);
  border-radius:50%; width:22px; height:22px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; cursor:pointer; transition:all .2s;
  color:rgba(255,255,255,.65); padding:0;
}
.trn-clf-rules-btn:hover,.trn-clf-rules-btn.is-active{
  background:rgba(251,191,36,.1); border-color:rgba(251,191,36,.4);
  color:#fbbf24;
}

/* Rules collapsible panel */
.trn-clf-rules-panel{
  margin-top:8px; padding:10px 14px; border-radius:10px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
}
.trn-clf-rules-title{
  font-size:10px; font-weight:800; text-transform:uppercase;
  letter-spacing:.6px; color:rgba(255,255,255,.65); margin-bottom:6px;
}
.trn-clf-rules-list{
  margin:0; padding:0 0 0 16px; list-style:disc;
}
.trn-clf-rules-list li{
  font-size:11px; line-height:1.5; color:rgba(255,255,255,.65);
  margin-bottom:3px;
}
.trn-clf-rules-list li:last-child{ margin-bottom: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:40px;
  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,.65); margin:0; }
.trn-results-participants{ position:relative; z-index:1; font-size:12px; color:rgba(255,255,255,.3); margin:4px 0 0; }
.trn-results-confetti{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:2; }

/* ── Premium Podium Cards ────────────────────────────────────────────── */
.trn-podium{
  display:flex; justify-content:center; align-items:flex-end; gap:20px;
  margin-bottom:36px; flex-wrap:wrap;
}
.trn-coin-icon{ vertical-align:middle; flex-shrink:0; }

/* Card base */
.trn-p-card{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:28px 22px 24px; border-radius:20px; width:260px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  transition:transform .25s ease, box-shadow .25s ease;
  opacity:0; transform:translateY(50px) scale(.92);
  animation:trn-p-rise .7s cubic-bezier(.16,1,.3,1) forwards;
}
.trn-p-card:hover{ transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.3); }

/* Stagger entrance: 2nd, 1st, 3rd in DOM order */
.trn-p-card:nth-child(1){ animation-delay:.2s; }
.trn-p-card:nth-child(2){ animation-delay:.5s; }
.trn-p-card:nth-child(3){ animation-delay:.8s; }
@keyframes trn-p-rise{ to{ opacity:1; transform:translateY(0) scale(1); } }

/* 1st place: taller, gold border, glow */
.trn-p-gold{
  border-color:rgba(251,191,36,.35);
  background:linear-gradient(175deg,rgba(251,191,36,.08) 0%,rgba(15,23,42,.95) 50%);
  box-shadow:0 0 30px rgba(251,191,36,.08);
  padding-top:36px; padding-bottom:28px;
  margin-bottom:16px; /* visually elevated */
}
.trn-p-gold .trn-p-crown{ color:#fbbf24; filter:drop-shadow(0 0 6px rgba(251,191,36,.4)); }
.trn-p-gold .trn-p-rank-badge{ background:linear-gradient(135deg,#fbbf24,#f59e0b); color:#1a1333; }
.trn-p-gold .trn-p-avatar-ring{
  background:conic-gradient(#fbbf24,#f59e0b,#fcd34d,#fbbf24);
  animation:trn-p-ring-spin 4s linear infinite;
}

/* 2nd place: silver */
.trn-p-silver{
  border-color:rgba(148,163,184,.2);
  background:linear-gradient(175deg,rgba(148,163,184,.06) 0%,rgba(15,23,42,.95) 50%);
}
.trn-p-silver .trn-p-crown{ color:#94a3b8; }
.trn-p-silver .trn-p-rank-badge{ background:linear-gradient(135deg,#94a3b8,#64748b); color:#0f172a; }
.trn-p-silver .trn-p-avatar-ring{ background:conic-gradient(#94a3b8,#64748b,#cbd5e1,#94a3b8); }

/* 3rd place: bronze */
.trn-p-bronze{
  border-color:rgba(217,119,6,.2);
  background:linear-gradient(175deg,rgba(217,119,6,.06) 0%,rgba(15,23,42,.95) 50%);
}
.trn-p-bronze .trn-p-crown{ color:#d97706; }
.trn-p-bronze .trn-p-rank-badge{ background:linear-gradient(135deg,#d97706,#b45309); color:#fff; }
.trn-p-bronze .trn-p-avatar-ring{ background:conic-gradient(#d97706,#b45309,#fbbf24,#d97706); }

/* "It's you" highlight */
.trn-p-me{ box-shadow:0 0 0 2px rgba(96,165,250,.5), 0 0 24px rgba(96,165,250,.12); }

/* Shimmer overlay */
.trn-p-shimmer{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.04) 50%,transparent 70%);
  background-size:200% 100%;
  animation:trn-p-shimmer 3s ease-in-out infinite;
}
@keyframes trn-p-shimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }

/* Header: crown + rank badge */
.trn-p-header{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:4px; }
.trn-p-crown-wrap{ line-height:0; }
.trn-p-rank-badge{
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
  padding:3px 12px; border-radius:20px;
}

/* Avatar with animated ring */
.trn-p-avatar-wrap{ position:relative; z-index:1; width:72px; height:72px; }
.trn-p-gold .trn-p-avatar-wrap{ width:88px; height:88px; }
.trn-p-avatar-ring{
  position:absolute; inset:-3px; border-radius:50%;
  animation:trn-p-ring-spin 6s linear infinite;
}
@keyframes trn-p-ring-spin{ to{ transform:rotate(360deg); } }
.trn-p-avatar{
  position:absolute; inset:3px; border-radius:50%; overflow:hidden;
  background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:700; color:rgba(255,255,255,.3);
}
.trn-p-gold .trn-p-avatar{ font-size:30px; }
.trn-p-avatar img{ width:100%; height:100%; object-fit:cover; }

/* Identity */
.trn-p-identity{ position:relative; z-index:1; }
.trn-p-name{ font-size:16px; font-weight:700; color:#e2e8f0; }
.trn-p-gold .trn-p-name{ font-size:18px; }
.trn-p-handle{ font-size:12px; color:rgba(255,255,255,.35); margin-top:2px; }

/* Follow button */
.trn-p-follow{
  position:relative; z-index:1;
  padding:6px 20px; border-radius:20px; font-size:12px; font-weight:700;
  background:rgba(139,92,246,.15); color:#a78bfa; border:1px solid rgba(139,92,246,.25);
  cursor:pointer; transition:all .2s ease;
}
.trn-p-follow:hover{ background:rgba(139,92,246,.25); }
.trn-p-follow.trn-p-following{
  background:rgba(255,255,255,.05); color:rgba(255,255,255,.4); border-color:rgba(255,255,255,.1);
}
.trn-p-follow:disabled{ opacity:.5; cursor:default; }

/* Prize */
.trn-p-prize{
  position:relative; z-index:1;
  font-size:18px; font-weight:800; color:#fbbf24;
  padding:6px 16px; border-radius:10px; background:rgba(251,191,36,.08);
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid rgba(251,191,36,.12);
}
.trn-p-gold .trn-p-prize{ font-size:22px; padding:8px 20px; }

/* Career stats row */
.trn-p-career{
  position:relative; z-index:1;
  display:flex; gap:16px; margin-top:4px;
}
.trn-p-stat{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.trn-p-stat-val{ font-size:16px; font-weight:800; color:#e2e8f0; }
.trn-p-stat-label{ font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:rgba(255,255,255,.3); }
.trn-elo-info{ display:inline-flex; align-items:center; cursor:help; opacity:.6; vertical-align:middle; position:relative; top:-0.5px; }
.trn-elo-info:hover{ opacity:1; }

/* Books showcase */
.trn-p-books{
  position:relative; z-index:1;
  display:flex; gap:10px; margin-top:8px; width:100%;
}
.trn-p-book{
  flex:1; display:flex; gap:8px; align-items:center;
  padding:8px 10px; border-radius:10px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);
  text-decoration:none; color:inherit;
  transition:background .2s ease, border-color .2s ease;
  min-width:0;
}
.trn-p-book:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.12); }
.trn-p-book img{
  width:36px; height:50px; object-fit:cover; border-radius:4px; flex-shrink:0;
  background:rgba(255,255,255,.06);
}
.trn-p-book-placeholder{
  width:36px; height:50px; border-radius:4px; flex-shrink:0;
  background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
}
.trn-p-book-info{ min-width:0; text-align:left; }
.trn-p-book-label{
  display:block; font-size:9px; font-weight:700; text-transform:uppercase;
  letter-spacing:.4px; color:rgba(255,255,255,.3); margin-bottom:2px;
}
.trn-p-book-title{
  display:block; font-size:11px; font-weight:600; color:#cbd5e1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Read text button on podium cards */
.trn-p-read-text{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:6px; justify-content:center;
  width:100%; margin-top:10px; padding:8px 14px;
  border:1px solid rgba(251,191,36,.18); border-radius:10px;
  background:linear-gradient(135deg,rgba(251,191,36,.08) 0%,rgba(251,191,36,.02) 100%);
  color:#fbbf24; font-size:12px; font-weight:700; cursor:pointer;
  transition:all .25s ease; letter-spacing:.3px;
}
.trn-p-read-text:hover{ background:rgba(251,191,36,.14); border-color:rgba(251,191,36,.35); transform:translateY(-1px); }
.trn-p-read-text svg{ flex-shrink:0; opacity:.7; }

/* Text reader modal overlay */
.trn-text-overlay{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.75); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; transition:opacity .3s ease;
}
.trn-text-overlay--visible{ opacity:1; }
.trn-text-modal{
  position:relative; width:94vw; max-width:640px; max-height:85vh;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,#111827 0%,#0b1220 100%);
  border:1px solid rgba(255,255,255,.08); border-radius:20px;
  box-shadow:0 32px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
  overflow:hidden; animation:trnTextSlideUp .4s cubic-bezier(.16,1,.3,1);
}
@keyframes trnTextSlideUp{ from{ opacity:0; transform:translateY(24px) scale(.97); } to{ opacity:1; transform:none; } }
.trn-text-close{
  position:absolute; top:14px; right:14px; z-index:5;
  width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.65); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .2s ease;
}
.trn-text-close:hover{ background:rgba(255,255,255,.12); color:#fff; }
.trn-text-loading{ display:flex; align-items:center; justify-content:center; min-height:200px; }
.trn-text-error{ padding:40px 24px; text-align:center; color:rgba(255,255,255,.4); font-size:14px; }

/* Header */
.trn-text-header{
  padding:28px 28px 16px; border-bottom:1px solid rgba(255,255,255,.06);
  text-align:center;
}
.trn-text-author-name{
  font-size:18px; font-weight:800; color:#e2e8f0;
  letter-spacing:-.02em; margin-bottom:6px;
}
.trn-text-prompt{
  font-size:12px; color:rgba(255,255,255,.4); margin-bottom:6px;
}
.trn-text-prompt-type{
  display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.5px; color:#fbbf24; margin-right:6px;
  padding:1px 6px; border-radius:4px; background:rgba(251,191,36,.1);
}
.trn-text-meta{ font-size:11px; color:rgba(255,255,255,.25); font-weight:600; }

/* Literary body */
.trn-text-body{
  flex:1; overflow-y:auto; padding:28px 32px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.08) transparent;
}
.trn-text-literary p{
  font-family:Georgia,'Times New Roman',serif;
  font-size:15.5px; line-height:1.85; color:#cbd5e1;
  margin:0 0 1em; text-indent:1.5em;
}
.trn-text-literary p:first-child{ text-indent:0; }
.trn-text-literary p:first-child::first-letter{
  font-size:2.8em; float:left; line-height:.72; margin:0 8px 0 0; padding:0;
  font-weight:700; color:#fbbf24;
  font-family:Georgia,'Times New Roman',serif;
}

/* Footer with request story CTA */
.trn-text-footer{
  padding:16px 28px 20px;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:rgba(255,255,255,.015);
}
.trn-text-request-info{ display:flex; align-items:center; gap:8px; }
.trn-text-request-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:28px; height:28px; padding:0 6px;
  border-radius:8px; background:rgba(139,92,246,.12);
  color:#a78bfa; font-size:13px; font-weight:800;
}
.trn-text-request-label{
  font-size:12px; color:rgba(255,255,255,.35); font-weight:500; max-width:160px;
}
.trn-text-request-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 20px; border-radius:12px;
  background:linear-gradient(135deg,#7c3aed 0%,#6d28d9 100%);
  border:1px solid rgba(139,92,246,.3);
  color:#fff; font-size:13px; font-weight:700; cursor:pointer;
  transition:all .25s ease; white-space:nowrap;
  box-shadow:0 4px 16px rgba(124,58,237,.25);
}
.trn-text-request-btn:hover:not(:disabled){
  background:linear-gradient(135deg,#8b5cf6 0%,#7c3aed 100%);
  transform:translateY(-1px); box-shadow:0 6px 24px rgba(124,58,237,.35);
}
.trn-text-request-btn:disabled{ opacity:.7; cursor:default; }
.trn-text-request-btn--done{
  background:linear-gradient(135deg,rgba(52,211,153,.15) 0%,rgba(52,211,153,.08) 100%);
  border-color:rgba(52,211,153,.25); color:#34d399;
  box-shadow:none;
}
.trn-text-request-btn svg{ flex-shrink:0; }

@media(max-width:520px){
  .trn-text-modal{ max-width:100vw; border-radius:16px 16px 0 0; max-height:92vh; }
  .trn-text-header{ padding:22px 18px 14px; }
  .trn-text-body{ padding:20px 18px; }
  .trn-text-footer{ flex-direction:column; padding:14px 18px 16px; }
  .trn-text-request-label{ max-width:none; }
  .trn-text-literary p{ font-size:14.5px; }
}

/* Full leaderboard below podium */
.trn-lb-prize{ display:flex; align-items:center; gap:4px; }
.trn-results-leaderboard{
  width:100%; max-width:600px; margin:0 auto 24px;
}
.trn-results-leaderboard table{
  width:100%; border-collapse:collapse; font-size:13px;
}
.trn-results-leaderboard th{
  text-align:left; padding:8px 10px; color:rgba(255,255,255,.35);
  border-bottom:1px solid rgba(255,255,255,.06); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.5px;
}
.trn-results-leaderboard td{
  padding:8px 10px; border-bottom:1px solid rgba(255,255,255,.04); color:#cbd5e1;
}
.trn-results-leaderboard tr.trn-lb-me td{
  background:rgba(59,130,246,.06); font-weight:600;
}
.trn-results-leaderboard .trn-lb-rank{
  width:36px; text-align:center; font-weight:700; color:rgba(255,255,255,.25);
}
.trn-results-leaderboard .trn-lb-prize{ color:#fbbf24; font-weight:700; }

.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:-12px;
  width:10px; height:10px; border-radius:2px;
  background:var(--color,#fbbf24);
  transform:rotate(var(--rotation,0deg)) scale(var(--scale,1));
  animation:trn-confetti-fall var(--duration,2.5s) var(--delay,0s) cubic-bezier(.25,.46,.45,.94) forwards,
            trn-confetti-wobble var(--duration,2.5s) var(--delay,0s) ease-in-out forwards;
  opacity:0;
  will-change:transform,opacity;
}
.trn-confetti-rect{ width:10px; height:7px; border-radius:2px; }
.trn-confetti-circle{ width:8px; height:8px; border-radius:50%; }
.trn-confetti-strip{ width:4px; height:14px; border-radius:2px; }
@keyframes trn-confetti-fall{
  0%{ opacity:1; transform:translateY(0) translateX(0) rotate(0deg) scale(var(--scale,1)); }
  20%{ opacity:1; }
  100%{ opacity:0; transform:translateY(600px) translateX(var(--drift,0px)) rotate(var(--rotation,720deg)) scale(.2); }
}
@keyframes trn-confetti-wobble{
  0%,100%{ margin-left:0; }
  25%{ margin-left:-8px; }
  50%{ margin-left:6px; }
  75%{ margin-left:-4px; }
}
.trn-system-explanation{
  margin-top:32px;
  padding:32px 24px 24px;
  border-radius:20px;
  background:
    radial-gradient(920px 380px at 4% -22%, rgba(96,165,250,.15), transparent 64%),
    radial-gradient(760px 360px at 104% -30%, rgba(167,139,250,.14), transparent 62%),
    linear-gradient(156deg, rgba(7,11,27,.98), rgba(15,19,36,.95));
  border:1px solid rgba(255,255,255,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 20px 52px rgba(2,6,23,.42);
  animation:trn-entrance .6s ease both;
  animation-delay:.3s;
}
.trn-explain-header{ margin-bottom:28px; text-align:center; }
.trn-explain-title{
  font-size:26px;
  font-weight:900;
  letter-spacing:.2px;
  margin:0;
  color:rgba(255,255,255,.94);
}
.trn-explain-subtitle{
  max-width:760px;
  margin:10px auto 0;
  font-size:14px;
  line-height:1.55;
  color:rgba(255,255,255,.58);
}
.trn-explain-layout{
  display:flex;
  flex-direction:column;
  gap:28px;
}
.trn-explain-steps{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}
.trn-explain-step{
  flex:0 0 calc(33.333% - 8px);
  min-width:0;
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:14px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  backdrop-filter: blur(2px);
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.trn-explain-step:hover{
  border-color:rgba(255,255,255,.16);
  background:linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  transform:translateY(-1px);
}
.trn-explain-step-num{
  flex-shrink:0;
  min-width:34px;
  height:28px;
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  font-size:11px;
  letter-spacing:.6px;
  font-weight:900;
  color:rgba(255,255,255,.97);
  background:linear-gradient(135deg, rgba(167,139,250,.86), rgba(124,58,237,.86));
  box-shadow: 0 0 0 2px rgba(124,58,237,.2);
}
.trn-explain-step-icon{
  flex-shrink:0;
  width:28px;
  height:28px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  color:rgba(191,219,254,.95);
}
.trn-explain-step-icon svg{
  width:16px;
  height:16px;
}
.trn-explain-step-text{
  display:flex;
  flex-direction:column;
  gap:7px;
  padding-top:1px;
}
.trn-explain-step-head{ display:flex; flex-direction:column; gap:3px; }
.trn-explain-step-text strong{
  font-size:14px; font-weight:700; color:rgba(255,255,255,.9);
}
.trn-explain-step-meta{
  font-size:11px;
  font-weight:800;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:rgba(147,197,253,.9);
}
.trn-explain-step-text span{
  font-size:13px;
  color:rgba(255,255,255,.64);
  line-height:1.5;
}
.trn-explain-side{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
}
.trn-explain-side-card{
  padding:16px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.trn-explain-side-title{
  margin:0 0 10px;
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:rgba(255,255,255,.78);
}
.trn-explain-timeline,
.trn-explain-integrity{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.trn-explain-timeline li,
.trn-explain-integrity li{
  padding:8px 10px;
  border-radius:10px;
  background:rgba(255,255,255,.025);
  font-size:12px;
  color:rgba(255,255,255,.74);
  line-height:1.45;
}
/* ── Vertical timeline with arrow ────────────────────────────── */
.trn-explain-side-card--timeline{
  position:relative;
  padding-bottom:38px;
}
.trn-explain-timeline{
  display:flex;
  flex-direction:column;
  gap:0;
  position:relative;
  padding-left:18px;
}
/* Connecting vertical line */
.trn-explain-timeline::before{
  content:"";
  position:absolute;
  left:11px;
  top:14px;
  bottom:14px;
  width:2px;
  background:linear-gradient(180deg, #93c5fd 0%, #a78bfa 100%);
  opacity:.45;
  border-radius:2px;
}
.trn-explain-timeline li{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px 9px 16px;
  background:none;
}
.trn-explain-timeline-num{
  width:22px;
  height:22px;
  border-radius:50%;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:800;
  color:#fff;
  background:linear-gradient(135deg, #93c5fd, #a78bfa);
  box-shadow: 0 0 0 3px rgba(147,197,253,.13);
  position:relative;
  z-index:1;
}
.trn-explain-timeline-text{
  color:rgba(255,255,255,.88);
  font-size:12.5px;
  line-height:1.4;
}
/* Downward arrow indicator */
.trn-explain-timeline-arrow{
  position:absolute;
  bottom:10px;
  left:50%;
  transform:translateX(-50%);
  color:rgba(147,197,253,.5);
  width:14px;
  height:24px;
}
.trn-explain-timeline-arrow svg{
  width:100%;
  height:100%;
}
.trn-explain-integrity li::before{
  content:"•";
  margin-right:7px;
  color:rgba(167,139,250,.9);
}
/* ── PRO prizes card ─────────────────────────────────────────── */
.trn-explain-side-card--prizes{
  border-color:rgba(251,191,36,.22);
  background:linear-gradient(160deg, rgba(251,191,36,.07), rgba(255,255,255,.02));
}
.trn-explain-prizes{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.trn-explain-prizes li{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:10px;
  background:rgba(255,255,255,.03);
  font-size:12.5px;
  color:rgba(255,255,255,.82);
  line-height:1.4;
}
.trn-explain-prize-medal{
  flex-shrink:0;
  width:26px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  font-size:15px;
  line-height:1;
}
.trn-medal-gold{   background:radial-gradient(circle, rgba(251,191,36,.22), rgba(251,191,36,.06)); box-shadow:0 0 8px rgba(251,191,36,.18); }
.trn-medal-silver{ background:radial-gradient(circle, rgba(192,192,192,.20), rgba(192,192,192,.06)); box-shadow:0 0 8px rgba(192,192,192,.14); }
.trn-medal-bronze{ background:radial-gradient(circle, rgba(205,127,50,.20), rgba(205,127,50,.06)); box-shadow:0 0 8px rgba(205,127,50,.14); }
.trn-explain-prizes-note{
  margin:8px 0 0;
  font-size:11px;
  color:rgba(255,255,255,.72);
  line-height:1.45;
}
.trn-explain-slots{
  margin-top:8px;
  text-align:center;
  padding:18px 16px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(150deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
}
.trn-explain-slots-title{
  font-size:14px;
  font-weight:800;
  color:rgba(255,255,255,.82);
  margin:0;
}
.trn-explain-slots-subtitle{
  font-size:12px;
  color:rgba(255,255,255,.55);
  margin:5px 0 10px;
}
.trn-explain-slots-grid{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.trn-explain-slot-chip{
  padding:8px 15px;
  border-radius:999px;
  font-size:13px;
  font-weight:800;
  background:rgba(167,139,250,.13);
  color:#c4b5fd;
  border:1px solid rgba(167,139,250,.24);
}
.trn-explain-slots-note{
  font-size:12px;
  color:rgba(255,255,255,.42);
  margin:0;
}

/* ── Classification CTA button ────────────────────────────────────────── */
.trn-classification-cta{
  margin-bottom:24px; animation:trn-entrance .5s ease both; animation-delay:.2s;
}
.trn-btn-classification{
  display:flex; align-items:center; gap:16px; width:100%;
  padding:18px 20px; border-radius:16px; border:1px solid rgba(139,92,246,.20);
  background:linear-gradient(135deg,rgba(139,92,246,.08) 0%,rgba(59,130,246,.06) 100%);
  color:#e2e8f0; cursor:pointer; transition:all .2s ease; text-align:left;
}
.trn-btn-classification:hover{
  background:linear-gradient(135deg,rgba(139,92,246,.14) 0%,rgba(59,130,246,.10) 100%);
  border-color:rgba(139,92,246,.35); transform:translateY(-1px);
  box-shadow:0 8px 32px rgba(139,92,246,.12);
}
.trn-btn-classification:active{ transform:translateY(0); }
.trn-btn-classification-icon{
  flex-shrink:0; width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  border-radius:12px; background:rgba(139,92,246,.12); color:#a78bfa;
}
.trn-btn-classification-icon svg{ width:24px; height:24px; }
.trn-btn-classification-text{ flex:1; min-width:0; }
.trn-btn-classification-title{
  display:block; font-size:15px; font-weight:800; color:#e2e8f0; letter-spacing:-.01em;
}
.trn-btn-classification-sub{
  display:block; font-size:12.5px; color:rgba(255,255,255,.4); margin-top:2px;
}
.trn-btn-classification-arrow{
  flex-shrink:0; color:rgba(255,255,255,.25); transition:transform .2s ease;
}
.trn-btn-classification:hover .trn-btn-classification-arrow{ transform:translateX(3px); color:rgba(255,255,255,.65); }

/* ── Classification Modal ─────────────────────────────────────────────── */
.trn-clf-overlay{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0); backdrop-filter:blur(0px);
  transition:background .3s ease, backdrop-filter .3s ease;
  padding:16px;
}
.trn-clf-overlay.is-open{
  background:rgba(0,0,0,.65); backdrop-filter:blur(12px);
}
.trn-clf-overlay.is-closing{
  background:rgba(0,0,0,0); backdrop-filter:blur(0px);
}
.trn-clf-modal{
  width:100%; max-width:600px; max-height:calc(100dvh - 32px);
  border-radius:24px; overflow:hidden; display:flex; flex-direction:column;
  background:linear-gradient(180deg,#131b2e 0%,#0d1420 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 24px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04) inset;
  opacity:0; transform:translateY(24px) scale(.97);
  transition:opacity .3s ease, transform .3s ease;
}
.trn-clf-overlay.is-open .trn-clf-modal{
  opacity:1; transform:translateY(0) scale(1);
}
.trn-clf-overlay.is-closing .trn-clf-modal{
  opacity:0; transform:translateY(16px) scale(.98);
}

/* Header */
.trn-clf-header{
  position:relative; text-align:center; padding:28px 24px 20px; overflow:hidden;
}
.trn-clf-header-glow{
  position:absolute; top:-40px; left:50%; transform:translateX(-50%);
  width:260px; height:120px; border-radius:50%;
  background:radial-gradient(ellipse,rgba(139,92,246,.20) 0%,transparent 70%);
  pointer-events:none;
}
.trn-clf-close{
  position:absolute; top:14px; right:14px; z-index:2;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border-radius:10px; border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04); color:rgba(255,255,255,.65);
  cursor:pointer; transition:all .15s ease;
}
.trn-clf-close:hover{ background:rgba(255,255,255,.08); color:#fff; }
.trn-clf-header-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:16px; margin:0 auto 10px;
  background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(251,191,36,.12));
  color:#a78bfa;
}
.trn-clf-header-icon svg{ width:28px; height:28px; }
.trn-clf-title{
  font-size:20px; font-weight:900; color:#f1f5f9; margin:0; letter-spacing:-.02em;
}
.trn-clf-subtitle{
  font-size:13px; color:rgba(255,255,255,.35); margin:6px 0 0;
}
.trn-clf-month-badge{
  display:inline-block; margin-top:10px; padding:4px 14px; border-radius:20px;
  background:linear-gradient(135deg,rgba(139,92,246,.15),rgba(251,191,36,.10));
  border:1px solid rgba(139,92,246,.20); font-size:12px; font-weight:700;
  color:#c4b5fd; text-transform:capitalize; letter-spacing:.3px;
}

/* Explanation */
.trn-clf-explanation{
  margin:0 20px 10px; border-radius:12px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
}
.trn-clf-explanation-toggle{
  padding:10px 14px; font-size:12.5px; font-weight:700; color:rgba(255,255,255,.65);
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:6px;
}
.trn-clf-explanation-toggle::before{ content:"▸"; font-size:10px; transition:transform .2s; }
.trn-clf-explanation[open] .trn-clf-explanation-toggle::before{ transform:rotate(90deg); }
.trn-clf-explanation-toggle::-webkit-details-marker{ display:none; }
.trn-clf-explanation-body{
  padding:0 14px 14px; font-size:12px; color:rgba(255,255,255,.4); line-height:1.5;
}
.trn-clf-explanation-body p{ margin:0 0 8px; }
.trn-clf-scoring{
  display:flex; gap:8px; flex-wrap:wrap; margin:8px 0;
}
.trn-clf-score-item{
  display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:8px;
  background:rgba(255,255,255,.04); font-size:12px; color:rgba(255,255,255,.55);
}
.trn-clf-score-pts{
  font-weight:900; color:#fbbf24; font-size:13px; min-width:28px;
}
.trn-clf-reward-hint{
  margin-top:6px; padding:8px 10px; border-radius:8px;
  background:linear-gradient(135deg,rgba(251,191,36,.06),rgba(139,92,246,.06));
  border:1px solid rgba(251,191,36,.10); color:rgba(255,255,255,.65);
  font-size:11.5px; font-style:italic;
}

/* Podium score */
.trn-clf-podium-score{
  font-size:15px; font-weight:900; color:#fbbf24; margin:2px 0;
}

/* Tabs */
.trn-clf-tabs{
  display:flex; gap:4px; padding:0 20px 12px; flex-wrap:wrap;
}
.trn-clf-tab{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 10px; border-radius:12px; border:1px solid rgba(255,255,255,.06);
  background:transparent; color:rgba(255,255,255,.65); font-size:12.5px; font-weight:700;
  cursor:pointer; transition:all .18s ease; white-space:nowrap;
}
.trn-clf-tab:hover{ background:rgba(255,255,255,.04); color:rgba(255,255,255,.65); }
.trn-clf-tab.is-active{
  background:rgba(139,92,246,.12); border-color:rgba(139,92,246,.30);
  color:#c4b5fd; box-shadow:0 2px 12px rgba(139,92,246,.10);
}
.trn-clf-tab-icon{ font-size:15px; line-height:1; }
.trn-clf-tab-label{ font-size:12px; }

/* Pickers */
.trn-clf-picker{
  padding:0 20px 12px; animation:trn-clf-picker-in .2s ease both;
}
@keyframes trn-clf-picker-in{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:translateY(0); } }
.trn-clf-select{
  width:100%; padding:10px 14px; border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04); color:#e2e8f0;
  font-size:13.5px; font-weight:600; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
  transition:border-color .15s ease;
}
.trn-clf-select:focus{ outline:none; border-color:rgba(139,92,246,.4); }
.trn-clf-select option{ background:#1a2236; color:#e2e8f0; }

/* Body (scrollable) */
.trn-clf-body{
  flex:1; overflow-y:auto; padding:0 20px 24px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.08) transparent;
}
.trn-clf-body::-webkit-scrollbar{ width:6px; }
.trn-clf-body::-webkit-scrollbar-track{ background:transparent; }
.trn-clf-body::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.08); border-radius:3px; }

/* Loading / Empty */
.trn-clf-loading{ display:flex; justify-content:center; padding:40px 0; }
.trn-clf-empty{
  text-align:center; padding:40px 20px; color:rgba(255,255,255,.3); font-size:13px;
}
.trn-clf-empty-icon{ font-size:40px; margin-bottom:12px; opacity:.4; }

/* ── Podium (top 3) ──────────────────────────────────────────────────── */
.trn-clf-podium{
  display:flex; align-items:flex-end; justify-content:center; gap:10px;
  padding:8px 0 20px; min-height:200px;
}
.trn-clf-podium-item{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:16px 12px 12px; border-radius:18px; position:relative;
  background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.06);
  width:160px; min-width:0;
  opacity:0; transform:translateY(20px);
  animation:trn-clf-podium-rise .5s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay:var(--clf-delay, 0s);
}
@keyframes trn-clf-podium-rise{
  to{ opacity:1; transform:translateY(0); }
}
/* Gold */
.trn-clf-podium--gold{
  background:linear-gradient(180deg,rgba(251,191,36,.08) 0%,rgba(251,191,36,.02) 100%);
  border-color:rgba(251,191,36,.18); order:2;
  padding-bottom:20px;
}
.trn-clf-podium--gold .trn-clf-podium-bar{
  position:absolute; bottom:0; left:0; right:0; height:4px; border-radius:0 0 18px 18px;
  background:linear-gradient(90deg,#fbbf24,#f59e0b);
}
/* Silver */
.trn-clf-podium--silver{
  background:linear-gradient(180deg,rgba(148,163,184,.06) 0%,rgba(148,163,184,.01) 100%);
  border-color:rgba(148,163,184,.15); order:1;
  padding-bottom:16px; margin-bottom:8px;
}
.trn-clf-podium--silver .trn-clf-podium-bar{
  position:absolute; bottom:0; left:0; right:0; height:3px; border-radius:0 0 18px 18px;
  background:linear-gradient(90deg,#94a3b8,#64748b);
}
/* Bronze */
.trn-clf-podium--bronze{
  background:linear-gradient(180deg,rgba(217,119,6,.06) 0%,rgba(217,119,6,.01) 100%);
  border-color:rgba(217,119,6,.15); order:3;
  padding-bottom:14px; margin-bottom:16px;
}
.trn-clf-podium--bronze .trn-clf-podium-bar{
  position:absolute; bottom:0; left:0; right:0; height:3px; border-radius:0 0 18px 18px;
  background:linear-gradient(90deg,#d97706,#b45309);
}
.trn-clf-podium-me{
  box-shadow:0 0 0 2px rgba(96,165,250,.35), 0 0 20px rgba(96,165,250,.10);
}
.trn-clf-podium-medal{ font-size:26px; line-height:1; margin-bottom:8px; }
.trn-clf-podium-avatar-wrap{ position:relative; margin-bottom:8px; }
.trn-clf-podium-avatar{
  width:52px; height:52px; border-radius:50%; object-fit:cover;
  border:2px solid rgba(255,255,255,.10);
}
.trn-clf-podium-avatar--fb{
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); color:rgba(255,255,255,.3);
  font-size:20px; font-weight:800;
}
.trn-clf-podium--gold .trn-clf-podium-avatar{ border-color:rgba(251,191,36,.30); }
.trn-clf-podium--silver .trn-clf-podium-avatar{ border-color:rgba(148,163,184,.25); }
.trn-clf-podium--bronze .trn-clf-podium-avatar{ border-color:rgba(217,119,6,.25); }
.trn-clf-podium-flag{
  position:absolute; bottom:-2px; right:-4px; font-size:16px;
  background:#131b2e; border-radius:50%; padding:1px;
}
.trn-clf-podium-name{
  font-size:13px; font-weight:800; color:#f1f5f9; margin-bottom:1px;
  max-width:130px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.trn-clf-podium-handle{
  font-size:11px; color:rgba(255,255,255,.25); margin-bottom:6px;
  max-width:130px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.trn-clf-podium-stats{
  display:flex; gap:6px; margin-bottom:6px;
}
.trn-clf-stat{
  font-size:11px; font-weight:700; padding:2px 7px; border-radius:6px;
}
.trn-clf-stat--participations{ background:rgba(251,191,36,.10); color:#fbbf24; }
.trn-clf-stat--podiums{ background:rgba(139,92,246,.10); color:#a78bfa; }
.trn-clf-stat--wins{ background:rgba(52,211,153,.10); color:#34d399; }
.trn-clf-podium-prize{
  display:flex; align-items:center; gap:4px;
  font-size:13px; font-weight:800; color:#fbbf24;
}
.trn-clf-podium-elo{
  font-size:10.5px; font-weight:700; color:rgba(255,255,255,.20); margin-top:4px;
  letter-spacing:.03em;
}

/* ── Legend row ───────────────────────────────────────────────────────── */
.trn-clf-legend{
  display:grid; grid-template-columns:36px 1fr 50px 64px 80px;
  gap:8px; padding:6px 12px; margin-bottom:4px;
  font-size:10.5px; font-weight:700; color:rgba(255,255,255,.18);
  text-transform:uppercase; letter-spacing:.04em;
}
.trn-clf-legend-label{ text-align:center; }

/* ── Rows (4th+) ─────────────────────────────────────────────────────── */
.trn-clf-rows{ display:flex; flex-direction:column; gap:2px; }
.trn-clf-row{
  display:grid; grid-template-columns:36px 1fr 50px 64px 80px;
  gap:8px; align-items:center; padding:9px 12px; border-radius:12px;
  transition:background .15s ease;
  opacity:0; animation:trn-clf-row-in .35s ease forwards;
  animation-delay:var(--clf-row-delay, 0s);
}
@keyframes trn-clf-row-in{
  from{ opacity:0; transform:translateX(-8px); }
  to{ opacity:1; transform:translateX(0); }
}
.trn-clf-row:hover{ background:rgba(255,255,255,.03); }
.trn-clf-row + .trn-clf-row{ border-top:1px solid rgba(255,255,255,.03); }
.trn-clf-row--me{
  background:rgba(96,165,250,.06); border:1px solid rgba(96,165,250,.15);
}
.trn-clf-row-rank{
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border-radius:9px; font-size:13px; font-weight:800; flex-shrink:0;
  background:rgba(255,255,255,.035); color:rgba(255,255,255,.30);
}
.trn-clf-row-user{
  display:flex; align-items:center; gap:10px; min-width:0;
}
.trn-clf-row-avatar{
  width:34px; height:34px; border-radius:50%; flex-shrink:0; object-fit:cover;
}
.trn-clf-row-avatar--fb{
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.05); color:rgba(255,255,255,.25);
  font-size:14px; font-weight:700;
}
.trn-clf-row-info{ min-width:0; display:flex; flex-direction:column; }
.trn-clf-row-name{
  font-size:13px; font-weight:700; color:#e2e8f0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.trn-clf-row-handle{
  font-size:11px; color:rgba(255,255,255,.22);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.trn-clf-row-elo{
  text-align:center; font-size:12px; font-weight:700; color:rgba(255,255,255,.30);
}
.trn-clf-row-score{
  text-align:center; font-size:13px; font-weight:900; color:#fbbf24;
  display:flex; align-items:baseline; gap:2px; justify-content:center;
}
.trn-clf-row-score small{ font-size:9px; font-weight:600; color:rgba(251,191,36,.55); }
.trn-clf-row-stats{
  display:flex; gap:4px; justify-content:center; align-items:center;
}
.trn-clf-mini-stat{
  font-size:11px; font-weight:700; padding:2px 6px; border-radius:5px; min-width:22px; text-align:center;
}
.trn-clf-mini-stat--podiums{ background:rgba(139,92,246,.10); color:#a78bfa; }
.trn-clf-mini-stat--participations{ background:rgba(251,191,36,.10); color:#fbbf24; }
.trn-clf-mini-stat--wins{ background:rgba(52,211,153,.10); color:#34d399; }
.trn-clf-row-prize{
  display:flex; align-items:center; gap:3px; justify-content:flex-end;
  font-size:12.5px; font-weight:700; color:#fbbf24;
}
.trn-clf-my-separator{
  text-align:center; color:rgba(255,255,255,.12); font-size:14px;
  padding:6px 0; letter-spacing:5px;
}

/* Spinner (keep existing) */
.trn-spinner-sm{
  width:24px; height:24px; border:2.5px solid rgba(255,255,255,.08);
  border-top-color:rgba(139,92,246,.5); border-radius:50%;
  animation:trn-spin .7s linear infinite;
}
@keyframes trn-spin{ to{ transform:rotate(360deg); } }

/* ── 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);
  animation:trn-entrance .5s ease both;
  animation-delay:.4s;
}
.trn-hof-teaser h3{ font-size:16px; font-weight:700; color:rgba(255,255,255,.65); margin:0 0 4px; }
.trn-hof-teaser p{ font-size:13px; color:rgba(255,255,255,.25); margin:0; }

/* ── Entrance animation ───────────────────────────────────────────────── */
@keyframes trn-entrance{
  0%{ opacity:0; transform:translateY(18px); }
  100%{ opacity:1; transform:translateY(0); }
}

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .trn-spinner,.trn-spinner-sm{ animation-duration:2s; }
  .trn-empty,.trn-slot-card,.trn-p-card,.trn-p-shimmer,.trn-p-avatar-ring,.trn-mandatory-reveal,
  .trn-confetti-piece,.trn-hero-bg,.trn-hero-glow,.trn-hero-particle,
  .trn-hero-trophy,.trn-hero-title,.trn-lobby-icon-wrap,
  .trn-slot-card--active,.trn-slot-card--next,.trn-btn-primary.trn-btn-pulse{
    animation:none !important;
    opacity:1 !important; transform:none !important;
  }
  .trn-timer-blink,.trn-timer-critical{ animation:none !important; opacity:1 !important; }
  .trn-pill-pulse{ animation:none; }
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media(max-width:640px){
  .trn-hero{ padding:36px 20px 32px; border-radius:16px; }
  .trn-hero-icon svg{ width:36px; height:36px; }
  .trn-hero-title{ font-size:22px; }
  .trn-hero-badge{ font-size:9px; padding:2px 7px; }
  .trn-hero-fee{ font-size:12px; }
  .trn-champion-card{ padding:12px 14px; gap:10px; }
  .trn-champ-crown{ font-size:22px; }
  .trn-champ-avatar{ width:28px; height:28px; }
  .trn-champ-name{ font-size:11px; }
  .trn-champ-score{ font-size:14px; }
  .trn-champ-perks{ font-size:10px; }
  .trn-podium-medal{ font-size:16px; width:22px; }
  .trn-podium-row{ gap:6px; }
  .trn-podium-discount{ font-size:9px; padding:1px 6px; }
  .trn-clf-champion{ padding:10px 12px; gap:6px; }
  .trn-clf-podium-row{ gap:6px; }
  .trn-clf-champ-avatar{ width:24px; height:24px; }
  .trn-duel-relevance{ flex-direction:column; align-items:flex-start; gap:6px; }
  .trn-voting-pro-info{ padding:8px 10px; }
  .trn-slots-grid{ grid-template-columns:1fr; }
  .trn-slot-card{ border-left-width:3px; }
  .trn-hist-header,.trn-hist-row{ grid-template-columns:1fr 60px 80px 75px 1fr 80px; font-size:11px; padding:8px 10px; }
  .trn-hist-header span:nth-child(5),.trn-hist-row .trn-hist-winner{ display:none; }
  .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-p-card{ width:100%; max-width:320px; }
  .trn-p-gold{ margin-bottom:0; }
  .trn-p-books{ flex-direction:column; }
  .trn-writing-editor{ min-height:320px; }
  .trn-system-explanation{ padding:20px 14px 14px; border-radius:14px; }
  .trn-explain-title{ font-size:21px; }
  .trn-explain-subtitle{ font-size:13px; margin-top:6px; }
  .trn-explain-layout{ gap:18px; }
  .trn-explain-steps{ gap:8px; }
  .trn-explain-step{ flex:0 0 100%; padding:11px 10px; }
  .trn-explain-side{ grid-template-columns:1fr; gap:10px; }
  .trn-explain-step-num{ min-width:30px; height:26px; }
  .trn-explain-step-icon{ width:26px; height:26px; }
  .trn-explain-timeline{ padding-left:12px; }
  .trn-explain-slots{ margin-top:10px; padding:12px 10px 8px; }
  .trn-btn-classification{ padding:14px 16px; gap:12px; }
  .trn-btn-classification-icon{ width:36px; height:36px; }
  .trn-btn-classification-title{ font-size:13.5px; }
  .trn-clf-overlay{ padding:8px; }
  .trn-clf-modal{ max-height:calc(100dvh - 16px); border-radius:20px; }
  .trn-clf-header{ padding:20px 16px 14px; }
  .trn-clf-header-icon{ width:44px; height:44px; }
  .trn-clf-title{ font-size:17px; }
  .trn-clf-tabs{ padding:0 12px 10px; }
  .trn-clf-explanation{ margin:0 12px 8px; }
  .trn-clf-scoring{ flex-direction:column; gap:4px; }
  .trn-clf-podium-score{ font-size:13px; }
  .trn-clf-picker{ padding:0 12px 10px; }
  .trn-clf-body{ padding:0 12px 20px; }
  .trn-clf-podium{ gap:6px; padding:4px 0 16px; min-height:180px; }
  .trn-clf-podium-item{ width:120px; padding:12px 8px 10px; border-radius:14px; }
  .trn-clf-podium-avatar{ width:40px; height:40px; }
  .trn-clf-podium-name{ font-size:11.5px; max-width:100px; }
  .trn-clf-podium-handle{ font-size:10px; max-width:100px; }
  .trn-clf-podium-medal{ font-size:22px; }
  .trn-clf-stat{ font-size:10px; padding:1px 5px; }
  .trn-clf-podium-prize{ font-size:11.5px; }
  .trn-clf-legend,.trn-clf-row{
    grid-template-columns:30px 1fr 42px 52px 64px; gap:5px;
    padding:7px 8px;
  }
  .trn-clf-row-avatar{ width:28px; height:28px; }
  .trn-clf-row-name{ font-size:12px; }
  .trn-clf-row-elo{ font-size:11px; }
  .trn-clf-row-score{ font-size:11px; }
  .trn-clf-mini-stat{ font-size:10px; padding:1px 4px; }
  .trn-clf-row-prize{ font-size:11px; }
}
@media(prefers-reduced-motion:reduce){
  .trn-hero, .trn-hero::before, .trn-hero-glow, .trn-hero-icon,
  .trn-hero-title, .trn-hero-particle, .trn-slot-card,
  .trn-slot--glow-active, .trn-slot--glow-next,
  .trn-system-explanation, .trn-classification-cta,
  .trn-clf-podium-item, .trn-clf-row, .trn-clf-overlay,
  .trn-clf-modal, .trn-clf-picker,
  .trn-lobby-notif-icon, .trn-stat-bump{
    animation:none !important;
    transition:none !important;
    opacity:1 !important; transform:none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   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,.65); 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-title--active{
  background:linear-gradient(135deg,#fbbf24,#f59e0b,#fcd34d,#fbbf24);
  background-size:200% 200%;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:pm-hero-gold-shift 4s ease-in-out infinite;
}
@keyframes pm-hero-gold-shift{
  0%,100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}
.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,.65);
  padding:5px 14px; border-radius:999px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);
}

/* ── Premium member hero (subscribed users) ─────────────────────────────── */
.pm-hero--member{
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(251,191,36,.10), transparent 70%),
    linear-gradient(135deg, rgba(251,191,36,.06) 0%, rgba(245,158,11,.04) 50%, rgba(139,92,246,.05) 100%);
  border-color:rgba(251,191,36,.12);
  padding:40px 32px 36px;
  text-align:left;
}
.pm-hero-glow--gold{
  background:radial-gradient(ellipse 55% 45% at 50% 0%,rgba(251,191,36,.18),transparent 70%);
}
.pm-member-grid{
  position:relative;
  display:grid; grid-template-columns:280px 1fr; gap:36px;
  align-items:start;
}
.pm-member-col-left{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; position:sticky; top:24px;
}
.pm-member-col-right{
  display:flex; flex-direction:column; gap:0;
}
.pm-member-badge{
  width:180px; height:180px; margin:0 auto 20px;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(251,191,36,.14),rgba(245,158,11,.06));
  border:3px solid rgba(251,191,36,.25);
  display:flex; align-items:center; justify-content:center;
  animation:pm-member-badge-pulse 3s ease-in-out infinite;
}
.pm-member-badge-img{
  width:130px; height:130px; border-radius:50%;
  filter:drop-shadow(0 0 18px rgba(251,191,36,.4));
}
@keyframes pm-member-badge-pulse{
  0%,100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(251,191,36,.15); }
  50%{ transform:scale(1.04); box-shadow:0 0 24px 4px rgba(251,191,36,.10); }
}
.pm-hero--member .pm-hero-title--active{
  font-size:20px; margin-bottom:10px;
}
.pm-hero-subtitle--member{
  color:rgba(255,255,255,.65); max-width:280px; font-size:13px; line-height:1.55;
}
.pm-member-thanks{
  position:relative;
  font-size:12px; font-style:italic; line-height:1.6;
  color:rgba(255,255,255,.30);
  max-width:260px; margin:18px auto 0;
}
.pm-member-plan-info{
  position:relative;
  display:flex; flex-wrap:wrap; justify-content:flex-start; gap:12px 24px;
  margin:0 0 16px; padding:16px 20px;
  background:rgba(255,255,255,.04); border-radius:12px;
  border:1px solid rgba(255,255,255,.06);
}
.pm-member-plan-item{
  text-align:left;
}
.pm-member-plan-label{
  font-size:11px; text-transform:uppercase; letter-spacing:.5px;
  color:rgba(255,255,255,.35); margin-bottom:2px;
}
.pm-member-plan-value{
  font-size:15px; font-weight:600; color:rgba(255,255,255,.85);
}
.pm-member-plan-value--gold{ color:#fbbf24; }
.pm-member-upgrade{
  display:inline-flex; align-items:center; gap:6px;
  margin:0 0 18px; padding:10px 24px; width:fit-content;
  background:linear-gradient(135deg,rgba(251,191,36,.15),rgba(245,158,11,.10));
  border:1px solid rgba(251,191,36,.25);
  border-radius:10px; color:#fbbf24;
  font-size:14px; font-weight:600; cursor:pointer;
  transition:background .15s, border-color .15s, transform .1s;
}
.pm-member-upgrade:hover{
  background:linear-gradient(135deg,rgba(251,191,36,.22),rgba(245,158,11,.15));
  border-color:rgba(251,191,36,.35);
  transform:translateY(-1px);
}
.pm-member-upgrade:active{ transform:translateY(0); }
.pm-member-upgrade[hidden]{ display:none; }
.pm-member-perks{
  position:relative;
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  text-align:left;
}
.pm-member-perk{
  display:flex; align-items:flex-start; gap:10px;
  padding:11px 13px;
  border-radius:12px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);
  transition:background .2s ease, border-color .2s ease;
}
.pm-member-perk:hover{
  background:rgba(251,191,36,.05);
  border-color:rgba(251,191,36,.12);
}
.pm-member-perk-icon{
  flex-shrink:0; width:26px; height:26px;
  display:flex; align-items:center; justify-content:center;
  border-radius:7px;
  background:rgba(251,191,36,.08);
  color:rgba(251,191,36,.70);
}
.pm-member-perk-icon svg{ width:15px; height:15px; }
.pm-member-perk-text{
  font-size:12px; font-weight:600; line-height:1.4;
  color:rgba(255,255,255,.72);
  padding-top:3px;
}
@media(max-width:780px){
  .pm-member-grid{ grid-template-columns:1fr; gap:24px; }
  .pm-member-col-left{ position:static; }
  .pm-hero--member{ padding:36px 18px 32px; text-align:center; }
  .pm-member-plan-info{ justify-content:center; }
  .pm-member-upgrade{ margin:0 auto 18px; }
  .pm-member-perks{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .pm-member-perk{ padding:10px 12px; }
  .pm-member-plan-info{ padding:12px 16px; gap:10px 18px; }
}
@media(max-width:420px){
  .pm-member-perks{ grid-template-columns:1fr; }
}

/* ── 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,.65); }
@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:1px solid transparent;
  font-size:13px; font-weight:600; color:rgba(255,255,255,.65);
  background:transparent; cursor:pointer; transition:all .2s;
  outline:none;
}
.pm-toggle-btn > *{ pointer-events:none; }
.pm-toggle-btn:focus-visible{ outline:2px solid rgba(139,92,246,.5); outline-offset:2px; }
.pm-toggle-btn.active{
  color:#fff; background:rgba(139,92,246,.25);
  border-color:rgba(139,92,246,.3);
  box-shadow:0 0 12px rgba(139,92,246,.15);
}
.pm-toggle-btn[data-period="annual"].active{
  background:linear-gradient(135deg,rgba(34,197,94,.2),rgba(16,185,129,.25));
  color:#34d399;
  box-shadow:0 0 16px rgba(34,197,94,.2),0 0 32px rgba(34,197,94,.06);
  border:1px solid rgba(34,197,94,.25);
  animation:pm-annual-pulse 2.5s ease-in-out infinite;
}
@keyframes pm-annual-pulse{
  0%,100%{ box-shadow:0 0 16px rgba(34,197,94,.2),0 0 32px rgba(34,197,94,.06); }
  50%{ box-shadow:0 0 20px rgba(34,197,94,.3),0 0 40px rgba(34,197,94,.1); }
}
.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:999px; font-size:14px; font-weight:700;
  background:linear-gradient(135deg,#8b5cf6 0%,#7c3aed 50%,#6366f1 100%); color:#fff;
  border:none; cursor:pointer; text-align:center;
  transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s, filter .2s;
  box-shadow:0 2px 16px rgba(139,92,246,.25), inset 0 1px 0 rgba(255,255,255,.1);
  position:relative; overflow:hidden;
}
.pm-card-cta::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.1) 0%,transparent 50%);
  pointer-events:none;
}
.pm-card-cta:hover{
  transform:translateY(-1px);
  filter:brightness(1.08);
  box-shadow:0 6px 28px rgba(139,92,246,.35), inset 0 1px 0 rgba(255,255,255,.12);
}
.pm-card-cta:active{ transform:translateY(0) scale(.98); }
.pm-card-cta:disabled{ opacity:.5; cursor:not-allowed; filter:none; transform:none; box-shadow: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:12px 24px 14px; text-align:center;
  background:rgba(11,18,32,.88); backdrop-filter:blur(20px) saturate(1.4);
  border-top:1px solid rgba(139,92,246,.10);
  animation:pm-slide-up .35s cubic-bezier(.22,1,.36,1);
}
.pm-sticky-inner{
  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  max-width:560px; margin:0 auto;
}
.pm-sticky-info{ display:flex; gap:10px; font-size:12px; color:rgba(255,255,255,.4); align-items:center; }
.pm-sticky-total{ font-weight:700; color:rgba(255,255,255,.85); }
.pm-sticky-btn{
  position:relative; overflow:hidden;
  padding:10px 32px; border-radius:999px; font-size:13px; font-weight:700;
  background:linear-gradient(135deg,#8b5cf6 0%,#7c3aed 50%,#6366f1 100%);
  color:#fff; border:none; cursor:pointer;
  transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s, filter .2s;
  box-shadow:0 2px 12px rgba(139,92,246,.25), inset 0 1px 0 rgba(255,255,255,.12);
  letter-spacing:.02em;
}
.pm-sticky-btn::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.12) 0%,transparent 50%);
  pointer-events:none;
}
.pm-sticky-btn:hover{
  transform:translateY(-1px) scale(1.02);
  box-shadow:0 6px 24px rgba(139,92,246,.35), inset 0 1px 0 rgba(255,255,255,.15);
  filter:brightness(1.08);
}
.pm-sticky-btn:active{ transform:translateY(0) scale(.98); }
.pm-sticky-btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; filter:none; box-shadow:none; }
.pm-sticky-legal{ font-size:10px; color:rgba(255,255,255,.18); margin:5px 0 0; }
@keyframes pm-slide-up{
  from{ transform:translateY(100%); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}

/* ── Comparison table ────────────────────────────────────────────────────── */
.pm-compare{ max-width:680px; 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;
}
/* (moved to logo section above) */
.pm-compare-table{
  width:100%; border-collapse:separate; border-spacing:0; font-size:13px;
}
.pm-compare-table th{
  padding:10px 16px; text-align:center; font-weight:600;
  color:rgba(255,255,255,.65); border-bottom:1px solid rgba(255,255,255,.06);
  overflow:visible;
}
.pm-compare-table th:first-child{ text-align:left; }
.pm-compare-hl{ color:#c084fc !important; }
.pm-compare-table td{
  padding:11px 16px; text-align:center;
  border-bottom:1px solid rgba(255,255,255,.03);
  color:rgba(255,255,255,.65);
  transition:background .15s;
}
.pm-compare-table tbody tr:hover td{ background:rgba(255,255,255,.015); }
.pm-compare-table td:first-child{ text-align:left; color:rgba(255,255,255,.7); }
.pm-compare-yes{ color:#8b5cf6 !important; font-weight:700; font-size:15px; }
.pm-compare-no{ color:rgba(255,255,255,.12) !important; font-size:13px; }
.pm-compare-limited{ color:rgba(251,191,36,.7) !important; font-size:11px; font-weight:500; }
.pm-tip{
  display:inline-flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.2); cursor:help;
  vertical-align:middle; margin-left:3px;
  transition:color .2s;
}
.pm-tip:hover{ color:rgba(255,255,255,.65); }
.pm-tip svg{ display:block; }

/* Logo column headers */
.pm-compare-logo-col{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:20px 16px 8px; /* generous breathing room so aurora/glow is never clipped */
  overflow:visible;
}
.pm-compare-logo{
  width:96px; height:96px; border-radius:16px;
  object-fit:contain; filter:grayscale(.2);
  transition:filter .3s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
.pm-compare-logo:hover{ filter:grayscale(0); transform:scale(1.06); }
.pm-compare-logo--premium{
  filter:none;
  border-radius:18px;
  box-shadow:
    0 0 18px rgba(192,132,252,.25),
    0 0 44px rgba(139,92,246,.12);
  animation:pm-logo-aurora 4s ease-in-out infinite;
}
.pm-compare-logo--premium:hover{
  transform:scale(1.08);
  box-shadow:
    0 0 22px rgba(192,132,252,.35),
    0 0 56px rgba(139,92,246,.15);
}
@keyframes pm-logo-aurora{
  0%,100%{ box-shadow:0 0 16px rgba(192,132,252,.22),0 0 40px rgba(139,92,246,.10); }
  50%{ box-shadow:0 0 22px rgba(192,132,252,.32),0 0 52px rgba(139,92,246,.16); }
}
/* Ensure table cells don't clip the glow */
.pm-compare-table th{ overflow:visible; }
.pm-compare-table-wrap{ overflow-x:auto; overflow-y:visible; -webkit-overflow-scrolling:touch; padding-top:8px; }

/* Divider row */
.pm-compare-divider td{
  padding:14px 16px 8px !important;
  font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(192,132,252,.6) !important;
  border-bottom:1px solid rgba(192,132,252,.12) !important;
  text-align:left !important;
}

/* ── Cancel section ──────────────────────────────────────────────────────── */
.pm-cancel{ max-width:540px; margin:0 auto; text-align:center; }
.pm-cancel-text{ font-size:14px; color:rgba(255,255,255,.65); 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; }
.pm-cancel-actions{
  display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:20px;
}
.pm-schedule-cancel-btn{
  display:block; padding:10px 24px;
  font-size:13px; font-weight:600; color:rgba(251,191,36,.8);
  background:transparent; border:1px solid rgba(251,191,36,.2);
  border-radius:999px; cursor:pointer; transition:all .2s;
}
.pm-schedule-cancel-btn:hover{
  color:#fbbf24; background:rgba(251,191,36,.06);
  border-color:rgba(251,191,36,.35);
}
.pm-schedule-cancel-btn:disabled{ opacity:.4; cursor:not-allowed; }
.pm-cancel-now-btn{
  display:block; padding:10px 24px;
  font-size:12px; font-weight:500; color:rgba(248,113,113,.5);
  background:transparent; border:1px solid rgba(248,113,113,.1);
  border-radius:999px; cursor:pointer; transition:all .2s;
}
.pm-cancel-now-btn:hover{
  color:#f87171; background:rgba(248,113,113,.06);
  border-color:rgba(248,113,113,.3);
}
.pm-cancel-now-btn:disabled{ opacity:.4; cursor:not-allowed; }
.pm-reactivate-btn{
  display:block; padding:12px 28px;
  font-size:14px; font-weight:700; color:#34d399;
  background:rgba(34,197,94,.08); border:1.5px solid rgba(34,197,94,.25);
  border-radius:999px; cursor:pointer; transition:all .2s;
}
.pm-reactivate-btn:hover{
  background:rgba(34,197,94,.14); color:#4ade80;
  border-color:rgba(34,197,94,.4);
  box-shadow:0 0 16px rgba(34,197,94,.12);
}
.pm-reactivate-btn:disabled{ opacity:.4; cursor:not-allowed; }

/* ── 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:12px;
  padding:100px 24px 80px; text-align:center;
  max-width:420px; margin:0 auto;
}
.pm-error-icon{
  color:rgba(139,92,246,.35);
  margin-bottom:8px;
  animation: pmErrorPulse 3s ease-in-out infinite;
}
@keyframes pmErrorPulse{
  0%,100%{ opacity:.5; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.06); }
}
.pm-error-title{
  font-size:1.25rem; font-weight:700;
  color:rgba(255,255,255,.85); margin:0;
}
.pm-error-desc{
  font-size:.92rem; line-height:1.55;
  color:rgba(255,255,255,.65); margin:0;
}
.pm-error-hint{
  font-size:.8rem; line-height:1.5;
  color:rgba(255,255,255,.22); margin:0;
  font-style:italic;
}
.pm-error-btn{
  margin-top:12px; min-width:180px;
}
@media(prefers-reduced-motion:reduce){
  .pm-error-icon{ animation:none; opacity:.6; }
}

/* ── 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:8px; }
  .pm-sticky-info{ flex-wrap:wrap; justify-content:center; }
  .pm-sticky-btn{ width:100%; max-width:320px; }
  .pm-compare-table{ font-size:12px; }
  .pm-compare-table th,
  .pm-compare-table td{ padding:8px 10px; }
  .pm-compare-logo{ width:72px; height:72px; border-radius:14px; }
  .pm-compare-logo-col{ padding:8px 2px 2px; }
  .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;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  Error Page                                                               */
/* ══════════════════════════════════════════════════════════════════════════ */
.error-page{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:60px 24px 80px; min-height:60vh;
  animation: errorFadeIn .4s ease both;
}
@keyframes errorFadeIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:translateY(0); } }

.error-page-logo{ margin-bottom:28px; opacity:.7; }
.error-page-logo img{ width:40px; height:40px; border-radius:10px; }

.error-page-icon{ margin-bottom:24px; color:rgba(255,255,255,.35); }
.error-page-icon svg{ width:64px; height:64px; }

.error-page-title{
  font-size:22px; font-weight:900; letter-spacing:.2px;
  color:rgba(255,255,255,.92); margin:0 0 10px;
}
.error-page-message{
  font-size:14px; line-height:1.6; color:var(--muted);
  max-width:420px; margin:0 0 8px;
}
.error-page-code{
  font-size:11px; color:rgba(255,255,255,.25); margin-bottom:28px;
  font-family:var(--font-mono, monospace); letter-spacing:.5px;
}

.error-page-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:32px; }
.error-page-home{ min-width:160px; }
.error-page-retry{ min-width:120px; }

.error-page-report{
  border-top:1px solid rgba(255,255,255,.06); padding-top:20px;
  max-width:380px; width:100%;
}
.error-page-report-ask{
  font-size:12px; color:var(--muted); margin:0 0 12px; line-height:1.5;
}
.error-page-report-btn{ font-size:12px; }
.error-page-report-status{
  margin-top:8px; font-size:11px; min-height:16px;
}
.error-page-report-status.is-success{ color:var(--accent, #60a5fa); }
.error-page-report-status.is-error{ color:#f87171; }
.error-page-report-btn:disabled{ opacity:.5; pointer-events:none; }

@media(max-width:600px){
  .error-page{ padding:40px 16px 60px; min-height:50vh; }
  .error-page-title{ font-size:19px; }
  .error-page-icon svg{ width:52px; height:52px; }
}

/* ===== Promote Book Modal ===== */
.modal--promote .modal-body,
.modal--promote-confirm .modal-body{ padding-top:0; }

.promo-hero{
  text-align:center;
  padding:18px 14px 14px;
  margin:-4px -4px 0;
  border-radius:12px;
  background:linear-gradient(135deg, rgba(99,102,241,.15) 0%, rgba(168,85,247,.12) 50%, rgba(236,72,153,.10) 100%);
  border:1px solid rgba(139,92,246,.18);
}
.promo-hero__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  color:#fff; margin-bottom:8px;
  box-shadow:0 4px 20px rgba(99,102,241,.35);
}
.promo-hero__icon svg{ width:28px; height:28px; }
.promo-hero__subtitle{
  font-size:14px; font-weight:600;
  color:rgba(255,255,255,.88);
  margin:0 0 10px; line-height:1.4;
}
.promo-hero__benefits{
  display:flex; flex-direction:column; gap:5px;
  max-width:300px; margin:0 auto;
}
.promo-benefit{
  display:flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:8px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.07);
  font-size:12px; color:rgba(255,255,255,.78);
  text-align:left;
}
.promo-benefit svg{
  flex-shrink:0;
  color:var(--primary, #818cf8);
  opacity:.85;
}
.promo-section-label{
  font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  color:rgba(255,255,255,.65);
  margin:12px 0 4px; padding-left:2px;
}

/* Plan select cards inside promote modal — 2-column grid */
.modal--promote .modal-select-list{
  display:grid; grid-template-columns:1fr 1fr; gap:6px;
}
.modal--promote .modal-select-item{
  display:flex; align-items:center; gap:8px;
  padding:9px 10px; border-radius:8px;
  border:2px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  cursor:pointer; transition:border-color .15s, background .15s;
}
.modal--promote .modal-select-item:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(139,92,246,.25);
}
.modal--promote .modal-select-item:has(input:checked){
  border-color:var(--primary, #818cf8);
  background:rgba(99,102,241,.10);
}
.modal--promote .modal-select-item input[type="radio"]{
  accent-color:var(--primary, #818cf8);
  width:14px; height:14px; flex-shrink:0;
}
.modal--promote .modal-select-label{
  font-size:13px; font-weight:500;
  color:rgba(255,255,255,.85);
  line-height:1.3;
}

/* Tagline field */
.modal--promote .modal-form-row:last-child{ margin-top:4px; }

/* Promote confirm button */
.modal--promote .modal-actions .btn:not(.secondary){
  background:linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  border:none; font-weight:600;
}
.modal--promote .modal-actions .btn:not(.secondary):hover{
  filter:brightness(1.1);
}

/* ===== Promote Confirmation Modal ===== */
.modal--promote-confirm .modal-body{ padding:8px 16px 4px; }
.promo-confirm{ text-align:center; padding:0; }
.promo-confirm__book{
  font-size:15px; font-weight:700;
  color:#fff; margin-bottom:2px;
  line-height:1.3;
}
.promo-confirm__summary{
  font-size:12.5px; color:rgba(255,255,255,.55);
  margin:0 0 6px; line-height:1.4;
}
.promo-confirm__tagline-preview{
  font-size:12.5px; font-style:italic;
  color:rgba(255,255,255,.65);
  margin:0 0 8px; line-height:1.4;
}
.promo-confirm__details{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px; padding:6px 12px;
  text-align:left; max-width:280px; margin:0 auto;
}
.promo-confirm__row{
  display:flex; justify-content:space-between; align-items:center;
  padding:4px 0;
}
.promo-confirm__row + .promo-confirm__row{
  border-top:1px solid rgba(255,255,255,.06);
}
.promo-confirm__label{
  font-size:12.5px; color:rgba(255,255,255,.65);
  font-weight:500;
}
.promo-confirm__value{
  font-size:13px; font-weight:600; color:#fff;
}
.promo-confirm__coins{
  display:inline-flex; align-items:center; gap:4px;
  color:var(--primary, #818cf8);
}
.promo-confirm__coin-icon{
  width:16px; height:16px; flex-shrink:0;
  border-radius:50%; object-fit:cover;
}

/* Confirm modal gradient button */
.modal--promote-confirm .modal-actions .btn:not(.secondary){
  background:linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  border:none; font-weight:600;
}
.modal--promote-confirm .modal-actions .btn:not(.secondary):hover{
  filter:brightness(1.1);
}

/* ===== Promotion Info Modal ===== */
.modal--promote-info .modal-body{ padding:8px 16px 4px; }
.promo-info{ text-align:center; }
.promo-info__book{
  font-size:16px; font-weight:700; color:#fff;
  margin-bottom:4px; line-height:1.3;
}
.promo-info__tagline{
  font-size:13px; font-style:italic;
  color:rgba(255,255,255,.6);
  margin-bottom:8px;
}
.promo-info__stats{
  display:grid; grid-template-columns:1fr 1fr; gap:5px;
  margin-bottom:8px;
}
.promo-info__stat{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px; padding:4px 8px;
  display:flex; flex-direction:row; align-items:center;
  gap:6px;
  min-height:0;
}
.promo-info__stat-icon{
  color:var(--primary, #818cf8); opacity:.7;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; line-height:0;
}
.promo-info__stat-icon svg{ width:13px; height:13px; }
.promo-info__stat-value{
  font-size:13px; font-weight:700; color:#fff;
  line-height:1.1; white-space:nowrap;
}
.promo-info__stat-value.is-expired{ color:#ef4444; }
.promo-info__stat-label{
  font-size:10px; color:rgba(255,255,255,.65);
  font-weight:500; text-transform:uppercase;
  letter-spacing:.04em; line-height:1.2;
  white-space:nowrap; margin-left:auto;
}
.promo-info__highlight{ color:var(--primary, #818cf8); }
.promo-info__gained{
  display:flex; align-items:center; justify-content:center; gap:5px;
  padding:5px 14px; border-radius:8px;
  background:rgba(99,102,241,.12);
  border:1px solid rgba(99,102,241,.2);
  font-size:13px; color:rgba(255,255,255,.8);
  line-height:1;
  width:100%; box-sizing:border-box;
}
.promo-info__gained svg{
  flex-shrink:0; color:#fbbf24; opacity:.85;
  width:14px; height:14px;
  display:block;
}
/* ── Promo Info: Quote Management & Hook ── */
.promo-info__section{
  margin-top:14px; padding-top:12px;
  border-top:1px solid rgba(255,255,255,.08);
}
.promo-info__section-title{
  font-size:13px; font-weight:700; color:rgba(255,255,255,.8);
  margin-bottom:4px;
}
.promo-info__section-desc{
  font-size:11px; color:rgba(255,255,255,.4);
  margin-bottom:10px; line-height:1.4;
}
.promo-quote-list{
  display:flex; flex-direction:column; gap:6px;
  max-height:200px; overflow-y:auto;
  padding-right:4px;
}
.promo-quote-item{
  display:flex; align-items:flex-start; gap:8px;
  padding:8px 10px; border-radius:8px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  cursor:pointer; transition:background .15s, border-color .15s;
}
.promo-quote-item:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.12);
}
.promo-quote-cb{
  margin-top:3px; flex-shrink:0;
  accent-color:var(--primary, #6366f1);
}
.promo-quote-body{ min-width:0; flex:1; }
.promo-quote-text{
  font-size:12px; color:rgba(255,255,255,.78);
  font-style:italic; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.promo-quote-meta{
  font-size:10px; color:rgba(255,255,255,.38);
  margin-top:3px; font-weight:500;
}
.promo-hook-input{
  width:100%; padding:8px 10px;
  border-radius:8px; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.9); font-size:13px;
  outline:none; transition:border-color .15s;
}
.promo-hook-input:focus{
  border-color:var(--primary, #6366f1);
}
.promo-hook-input::placeholder{
  color:rgba(255,255,255,.3);
}
.promo-save-quotes-btn{
  font-size:13px !important;
}
.modal--promote-info .modal-actions .btn:not(.secondary){
  background:linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  border:none; font-weight:600;
}
.modal--promote-info .modal-actions .btn:not(.secondary):hover{
  filter:brightness(1.1);
}

/* Promoted button in library card */
.library-btn-promoted{
  display:inline-flex; align-items:center; gap:5px;
  cursor:pointer;
  color:var(--primary, #818cf8);
  border-color:rgba(99,102,241,.3);
  background:rgba(99,102,241,.08);
  font-size:12px; font-weight:600;
  transition:background .15s, border-color .15s;
}
.library-btn-promoted:hover{
  background:rgba(99,102,241,.15);
  border-color:rgba(99,102,241,.5);
}
.library-btn-promoted .btn-icon{
  width:14px; height:14px;
}
.promote-countdown{
  font-variant-numeric:tabular-nums;
}

@media(max-width:480px){
  .promo-hero{ padding:14px 10px 10px; }
  .promo-hero__icon{ width:44px; height:44px; }
  .promo-hero__icon svg{ width:22px; height:22px; }
  .promo-hero__subtitle{ font-size:13px; }
  .promo-benefit{ font-size:11px; padding:5px 8px; }
  .modal--promote .modal-select-list{ grid-template-columns:1fr; }
  .promo-info__stats{ grid-template-columns:1fr 1fr; gap:6px; }
}

/* ════════════════════════════════════════════════════════════════════════
 * SAFE-AREA-INSET — preparación iOS notch / Dynamic Island y app nativa
 * (auditoría F2). Añadido al final del stylesheet para no entrar en
 * cascada con reglas existentes. Sólo aplica a elementos fixed/sticky
 * que de otra forma quedan tapados por notch o home indicator.
 *
 * Requiere `<meta name="viewport" content="...,viewport-fit=cover">`
 * (auditoría F8) en el HTML para que los env() retornen valores no-cero
 * en iOS.
 * ════════════════════════════════════════════════════════════════════════ */

:root {
  --sa-top: env(safe-area-inset-top, 0px);
  --sa-bottom: env(safe-area-inset-bottom, 0px);
  --sa-left: env(safe-area-inset-left, 0px);
  --sa-right: env(safe-area-inset-right, 0px);
}

/* App header (sticky in app-layout): respeta notch arriba en standalone */
@media (display-mode: standalone) {
  .app-layout .header {
    padding-top: var(--sa-top);
  }
}

/* Topbar móvil (sticky/fixed): respeta notch arriba */
.mobile-topbar {
  padding-top: max(var(--mobile-topbar-pad-top, 8px), var(--sa-top));
  padding-left: var(--sa-left);
  padding-right: var(--sa-right);
}

/* Toast bottom-right: home indicator iOS no lo cubre */
.toast {
  bottom: max(24px, calc(24px + var(--sa-bottom))) !important;
  right: max(24px, calc(24px + var(--sa-right))) !important;
}

/* Modales en sheet-mode (mobile <560px): respeta home indicator */
@media (max-width: 560px) {
  .modal {
    padding-bottom: max(16px, var(--sa-bottom));
  }
}

/* Drawer de navegación móvil */
.mobile-nav-backdrop,
.app-nav[data-mobile-open] {
  padding-top: var(--sa-top);
  padding-bottom: var(--sa-bottom);
}

/* FABs flotantes: separa del home indicator */
.fab-stack,
.fab-shared {
  bottom: max(16px, calc(16px + var(--sa-bottom))) !important;
  right: max(16px, calc(16px + var(--sa-right))) !important;
}

/* Footer del lector: respeta home indicator en browser y standalone */
body.read-page main {
  padding-bottom: max(20px, var(--sa-bottom));
}

/* ════════════════════════════════════════════════════════════════════════
 * Z-INDEX TIERS — sistema escalable para futuros componentes
 * (auditoría F6). Mapeo de los valores legacy hardcoded:
 *
 *   Legacy 9000-9001 → tier --z-fab (FABs flotantes, news panel)
 *   Legacy 9995-9998 → tier --z-modal-backdrop (overlays, guard, welcome)
 *   Legacy 9999      → tier --z-modal (modales reales, role-badge)
 *   Legacy 99999     → tier --z-skip-link (skip-link, lobby notif)
 *
 * Política: los componentes NUEVOS deben usar las variables.
 * Los componentes LEGACY se migran cuando se refactorizan, con
 * test visual de paridad. No se reescribe en bloque para evitar
 * regresiones de stacking sin tests.
 * ════════════════════════════════════════════════════════════════════════ */

:root {
  --z-base: 1;
  --z-elevated: 10;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-fab: 800;
  --z-popover: 900;
  --z-modal-backdrop: 1000;
  --z-modal: 1010;
  --z-modal-content: 1020;
  --z-toast: 1100;
  --z-tooltip: 1200;
  --z-spinner-overlay: 1300;
  /* Skip-link DEBE estar sobre todo (incluso modales activos) cuando
     el user navega por teclado. */
  --z-skip-link: 9999;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Reading Mode Pro — FREE TIER settings panel (rsf-*)
   Shares .rp-panel, .rp-backdrop, .rp-panel-head, .rp-section*, .rp-theme*,
   .rp-font* base styles from the premium reader block above.
   Only adds free-specific controls (size grid, spacing grid, Pro badge).
   ══════════════════════════════════════════════════════════════════════════════ */

/* Size (S/M/L) grid */
.rsf-size-grid{
  display:flex; gap:6px;
}
.rsf-size-btn{
  flex:1; padding:10px 8px; border-radius:8px;
  border:2px solid transparent;
  background:var(--reader-surface, rgba(255,255,255,.03));
  color:var(--reader-text, #e2e8f0); font-weight:600; cursor:pointer;
  transition:border-color .15s, background .15s;
  min-height:44px; /* touch target */
}
.rsf-size-btn:hover{ background:rgba(255,255,255,.05); }
.rsf-size-btn.is-active{ border-color:var(--reader-link, #60a5fa); }
.rsf-size-btn:focus-visible{ outline:2px solid var(--reader-link, #60a5fa); outline-offset:2px; }

/* Line-spacing (compact/normal/wide) grid */
.rsf-spacing-grid{
  display:flex; gap:6px;
}
.rsf-spacing-btn{
  flex:1; padding:9px 6px; border-radius:8px;
  border:2px solid transparent;
  background:var(--reader-surface, rgba(255,255,255,.03));
  color:var(--reader-text, #e2e8f0); font-size:12px; font-weight:500; cursor:pointer;
  transition:border-color .15s, background .15s;
  min-height:44px; /* touch target */
}
.rsf-spacing-btn:hover{ background:rgba(255,255,255,.05); }
.rsf-spacing-btn.is-active{ border-color:var(--reader-link, #60a5fa); }
.rsf-spacing-btn:focus-visible{ outline:2px solid var(--reader-link, #60a5fa); outline-offset:2px; }

/* "Pro" upsell badge — visual only, no gating */
.rsf-pro-badge{
  display:inline-flex; align-items:center;
  padding:1px 6px; border-radius:4px;
  background:linear-gradient(135deg, rgba(168,85,247,.18), rgba(99,102,241,.18));
  border:1px solid rgba(168,85,247,.25);
  color:rgba(168,85,247,.9); font-size:10px; font-weight:700;
  letter-spacing:.04em; line-height:1.4;
  cursor:default; flex-shrink:0;
}

/* Ensure theme-grid wraps on very narrow panels */
.rsf-theme-grid{ flex-wrap:wrap; }

/* Panel safe-area bottom padding for mobile (notch phones) */
.rsf-panel{
  padding-bottom: max(0px, env(safe-area-inset-bottom, 0px));
}

/* Focus-visible on theme / font / preset buttons (shared from rp-*) */
.rp-theme-btn:focus-visible,
.rp-font-btn:focus-visible{
  outline:2px solid var(--reader-link, #60a5fa); outline-offset:2px;
}
.rp-panel-close:focus-visible,
.rp-reset-btn:focus-visible{
  outline:2px solid var(--reader-link, #60a5fa); outline-offset:2px;
}

/* ════════════════════════════════════════════════════════════════════════
 * DISCOVER RAIL — onboarding showcase for new users (discover-rail.js)
 * Audit#2 P1/P2: missing CSS caused unstyled rail, 18px dismiss button,
 * CLS on async mount, and notch-clipped horizontal scroll.
 * ════════════════════════════════════════════════════════════════════════ */

/* ── Section wrapper ── */
.discover-rail {
  /* Reserve height before cards load to prevent CLS.
     Card height ≈ cover (3:4 aspect of 140px wide = 187px) + body ~120px = ~307px.
     Add header row (~56px) + footer (~44px) + gaps → round to 420px minimum. */
  min-height: 420px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0;
  /* Contain horizontal overflow so the list scroll doesn't bleed */
  overflow: hidden;
}

/* ── Loading placeholder ── */
.discover-rail-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  color: var(--muted);
  font-size: 13px;
}
.discover-rail-loader-text {
  opacity: .6;
}

/* ── Header row ── */
.discover-rail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px;
  flex-shrink: 0;
}
.discover-rail-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.discover-rail-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--text);
}
.discover-rail-subtitle {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}

/* ── Dismiss button — WCAG/HIG tap target ≥44×44pt ── */
.discover-rail-dismiss {
  /* Visible icon is 18×18 SVG; we pad the tap area to ≥44×44 */
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  appearance: none;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.discover-rail-dismiss:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
  color: var(--text);
}
.discover-rail-dismiss:active {
  background: rgba(255,255,255,.12);
}
.discover-rail-dismiss:focus-visible {
  outline: 2px solid rgba(96,165,250,.50);
  outline-offset: 2px;
}

/* ── Horizontal scroll list ── */
.discover-rail-list {
  display: flex;
  flex-direction: row;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  /* Momentum scrolling on iOS */
  -webkit-overflow-scrolling: touch;
  /* Snap to card starts for swipe feel */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Safe-area padding so cards aren't clipped by notch/Dynamic Island */
  padding-inline: max(16px, var(--sa-left, env(safe-area-inset-left, 16px)));
  padding-right: max(16px, var(--sa-right, env(safe-area-inset-right, 16px)));
  padding-top: 4px;
  padding-bottom: 12px;
  /* Reset list styles */
  list-style: none;
  margin: 0;
  /* Hide scrollbar (still scrollable) */
  scrollbar-width: none;
}
.discover-rail-list::-webkit-scrollbar {
  display: none;
}

/* ── Footer (show-more button) ── */
.discover-rail-footer {
  display: flex;
  justify-content: center;
  padding: 4px 16px 8px;
  flex-shrink: 0;
}
.discover-rail-show-more {
  width: auto;
  min-width: 160px;
  padding: 10px 24px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
}
.discover-rail-show-more:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.16);
}

/* ── Card (list item) ── */
.discover-card {
  /* Fixed width so the rail snaps consistently.
     140px on small iPhones (SE/mini 375px); wider on larger viewports. */
  flex: 0 0 140px;
  width: 140px;
  scroll-snap-align: start;
  list-style: none;
}
@media (min-width: 480px) {
  .discover-card { flex: 0 0 155px; width: 155px; }
}
@media (min-width: 768px) {
  .discover-card { flex: 0 0 170px; width: 170px; }
}

/* ── Card inner link (full-card hit area) ── */
.discover-card-inner {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00)), var(--surface);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  height: 100%;
}
.discover-card-inner:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
  border-color: rgba(96,165,250,.20);
}
.discover-card-inner:focus-visible {
  outline: 2px solid rgba(96,165,250,.50);
  outline-offset: 2px;
}

/* ── Cover (3:4 aspect ratio, matches nfx-card-cover pattern) ── */
.discover-card-cover {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: rgba(255,255,255,.04);
  position: relative;
  flex-shrink: 0;
}
.discover-card-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Default cover: initial letter on branded gradient */
.discover-card-cover-default {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(59,130,246,.18) 0%, rgba(139,92,246,.14) 100%);
}
.discover-card-cover-initial {
  font-size: 42px;
  font-weight: 900;
  letter-spacing: -.03em;
  background: linear-gradient(135deg, rgba(255,255,255,.85), rgba(96,165,250,.60));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* ── Card body ── */
.discover-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 10px 10px;
  min-width: 0;
}

/* ── Mandatory "Narqx Sample" badge (RFC Decision 2 / G2) ── */
.discover-card-badge {
  display: inline-block;
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: rgba(96,165,250,.80);
  background: rgba(96,165,250,.10);
  border: 1px solid rgba(96,165,250,.18);
  border-radius: 5px;
  padding: 2px 6px;
  align-self: flex-start;
}

/* ── Title ── */
.discover-card-title {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .1px;
  color: var(--text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  line-height: 1.35;
}

/* ── Author ── */
.discover-card-author {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Description ── */
.discover-card-desc {
  font-size: 11px;
  color: rgba(255,255,255,.50);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  line-height: 1.4;
}

/* ── Chips (language + genre tags) ── */
.discover-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.discover-card-chip {
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.07);
  color: rgba(255,255,255,.55);
  white-space: nowrap;
}
.discover-card-chip--lang {
  background: rgba(52,211,153,.08);
  border-color: rgba(52,211,153,.14);
  color: rgba(52,211,153,.75);
}

/* ── CTA link text at card bottom ── */
.discover-card-cta {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(96,165,250,.80);
  margin-top: auto;
  padding-top: 6px;
  letter-spacing: .1px;
  transition: color .15s ease;
}
.discover-card-inner:hover .discover-card-cta {
  color: #93c5fd;
}

/* ── Responsive: on desktop show as full-width wrapped grid ── */
@media (min-width: 981px) {
  .discover-rail {
    /* On desktop reset min-height; grid provides implicit height */
    min-height: auto;
  }
  .discover-rail-list {
    /* Switch to wrapping grid so cards don't scroll off-screen on wide layouts */
    flex-wrap: wrap;
    overflow-x: visible;
    scroll-snap-type: none;
    padding-inline: 4px;
  }
  .discover-card {
    flex: 0 0 170px;
    width: 170px;
  }
}

/* ── Skeleton / loading state: show pulsing placeholders while Firestore loads ── */
@keyframes discoverSkeleton {
  0%, 100% { opacity: .35; }
  50%       { opacity: .60; }
}
.discover-rail-loader {
  animation: discoverSkeleton 1.6s ease-in-out infinite;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * SHORT-VIEWPORT TUNING  (15" laptops, half-screen browsers, low-DPI displays)
 *
 * Owner directive 2026-05-30: auth pages (login / register / forgot-password)
 * and the landing hero required scroll on 1366×768 / 1280×800 even though
 * the content easily fits if vertical whitespace is tightened. This block is
 * NEW and HEIGHT-GATED — every rule lives under @media (max-height: 820px),
 * so any viewport taller than 820px keeps the existing spacious layout. No
 * existing rule is overridden — only narrowed for short displays.
 * ─────────────────────────────────────────────────────────────────────────── */
@media (max-height: 820px) {
  /* Auth shells: less vertical breathing room, same horizontal feel. */
  .login-container { margin: 8px auto !important; }
  .login-header { margin-bottom: 14px !important; }
  .login-header h2 { font-size: clamp(20px, 2vh, 26px) !important; margin-bottom: 4px !important; }
  .login-subtitle { font-size: 12px !important; line-height: 1.45 !important; }
  .login-fields { gap: 10px !important; }
  .login-footer { margin-top: 14px !important; }
  .auth-card { padding-top: 20px !important; padding-bottom: 20px !important; }

  /* Forgot-password anti-phishing block: keep the message, lose the padding. */
  .fp-security-block { padding: 12px 14px !important; margin-top: 14px !important; }
  .fp-security-block ul { margin: 6px 0 0 !important; }
  .fp-security-block li { margin-bottom: 3px !important; font-size: 12px !important; }
  .fp-security-header h3 { font-size: 13px !important; }

  /* Register two-column: tighter gap + smaller column padding. */
  .auth-card.reg-card { padding-top: 16px !important; padding-bottom: 16px !important; }
  .reg-columns { gap: 18px !important; }
  .reg-col { padding: 0 !important; }
  .reg-col-header { margin-bottom: 10px !important; font-size: 12px !important; }
  .field { margin-bottom: 8px !important; }

  /* Landing hero — make it FIT a short viewport (the real bug 2026-05-30).
   * .hero-book is `aspect-ratio:3/4; width:100%`, so in its ~660px column it
   * reserved ~880px of HEIGHT — taller than a 660px laptop viewport, forcing
   * scroll. transform:scale only shrinks visually, not the reserved height.
   * Fix: drive the book by HEIGHT (vh) so the aspect-ratio derives a smaller
   * width and the whole hero collapses to fit. Kill the -180px margin that
   * pulled it off-center on short screens. */
  .hero { padding: 16px 0 !important; }
  .hero-grid { padding: 0 24px !important; gap: 20px !important; align-items:center !important; }
  .hero-book {
    width: auto !important;
    height: min(70vh, 580px) !important;
    margin-top: 0 !important;
    transform: none !important;
  }
  .hero h1 { font-size: clamp(40px, 6vh, 72px) !important; line-height: 1 !important; margin-bottom: 8px !important; }
  .brand-subtitle { margin: 0 0 14px !important; }
  .hero-actions { gap: 10px !important; margin-top: 14px !important; }
  .hero-actions .btn { padding: 10px 22px !important; font-size: 15px !important; }
}

/* Extra-tight tuning for the squeeze case: 1366×768 and ultrabook 13" panels.
 * Only active under 720px viewport height. Keeps the auth card fully visible
 * without any scroll, even on the shortest common laptop displays.            */
@media (max-height: 720px) {
  .login-header { margin-bottom: 10px !important; }
  .login-header h2 { font-size: 20px !important; }
  .login-fields { gap: 8px !important; }
  .auth-card { padding-top: 16px !important; padding-bottom: 16px !important; }
  .fp-security-block { padding: 10px 12px !important; margin-top: 10px !important; }
  .hero { padding: 10px 0 !important; }
  .hero-book {
    width: auto !important;
    height: min(60vh, 460px) !important;
    margin-top: 0 !important;
    transform: none !important;
  }
  .hero h1 { font-size: clamp(36px, 5.5vh, 64px) !important; }
  .brand-subtitle { font-size: 14px !important; margin: 0 0 10px !important; }
}

/* ─────────────────────────────────────────────────────────────────────────────
 * SHORT-VIEWPORT TUNING — BATCH 2 (2026-05-30)
 * Pages covered: reset-password, dmca-takedown, u (public profile),
 *   read (reader header + controls), admin (tab strip), write-studio (command
 *   bar + status bar).
 * Pattern: height-gated @media (max-height: 820px) / (max-height: 720px).
 * No existing rule is changed — only additive narrowing for short viewports.
 * ─────────────────────────────────────────────────────────────────────────── */

@media (max-height: 820px) {
  /* ── reset-password: identical auth-card tuning already in batch-1;
     the auth-card rules above apply. Extra: tighten pass-rules block. ── */
  .pass-rules { gap: 2px !important; margin-top: 4px !important; }
  .pass-rule { font-size: 11px !important; }

  /* ── dmca-takedown: the dmca-page has max-width 760px + its own padding.
     On short viewports the legal page can scroll freely — reduce section
     heading margins so first field is closer to the top. ── */
  .dmca-section-heading { margin-top: 1.25rem !important; margin-bottom: 0.625rem !important; }
  .dmca-header { margin-bottom: 1.25rem !important; }
  .dmca-header h1 { font-size: 1.25rem !important; }
  .dmca-intro { padding: 0.625rem 0.875rem !important; font-size: 0.8125rem !important; }

  /* ── u (public profile): tighten hero header image height. ── */
  .profile-header { max-height: 120px !important; overflow: hidden !important; }

  /* ── read (reader page): reduce read-head vertical padding. ── */
  .read-head { padding: 10px 14px !important; }
  .read-head-main { gap: 10px !important; }
  .read-kicker { font-size: 11px !important; }
  .read-title { font-size: 1rem !important; }

  /* ── admin: make tab strip wrap instead of overflow horizontally. ── */
  .admin-tabs { flex-wrap: wrap !important; gap: 4px !important; row-gap: 4px !important; }
  .admin-tab { padding: 5px 10px !important; font-size: 12px !important; }

  /* ── write-studio: tighten command bar + status bar so editor gains height. ── */
  .ws-command-bar { min-height: 42px !important; padding: 0 8px !important; }
  .ws-cb-icon-btn { width: 32px !important; height: 32px !important; }
  .ws-cb-btn { width: 32px !important; height: 32px !important; }
  .ws-status-bar { min-height: 28px !important; padding: 0 10px !important; font-size: 11px !important; }
  .ws-sb-item { font-size: 11px !important; }
}

@media (max-height: 720px) {
  /* ── reset-password ── */
  .pass-rule { display: none !important; }     /* collapse rules; validation still runs in JS */

  /* ── dmca-takedown ── */
  .dmca-section-heading { margin-top: 0.875rem !important; }

  /* ── read ── */
  .read-head { padding: 8px 12px !important; }
  .read-title { font-size: 0.9375rem !important; }

  /* ── admin tab strip: even smaller pills ── */
  .admin-tab { padding: 4px 8px !important; font-size: 11px !important; }

  /* ── write-studio: further compress bars ── */
  .ws-command-bar { min-height: 36px !important; }
  .ws-status-bar { min-height: 24px !important; }
  .ws-format-bar { display: none !important; }  /* collapse format bar; keyboard shortcuts still work */
}