* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  :root {
    --bg:#0f0f1a; --card:#1a1a2e; --card2:#23233c; --accent:#7c5cff; --accent2:#ff5c8a;
    --text:#f0f0f5; --muted:#9090a8; --green:#3ddc84; --gold:#ffd000;
  }
  html,body { height:100%; }
  body {
    background:var(--bg); color:var(--text);
    font-family:'Vazirmatn',-apple-system,'Segoe UI',Tahoma,sans-serif;
    overscroll-behavior:none; padding-bottom:80px;
  }
  .page { display:none; }
  .page.active { display:block; }
  /* ---------- Header ---------- */
  header {
    position:sticky; top:0; z-index:50;
    background:linear-gradient(180deg, #0f0f1aee, #0f0f1acc);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    padding:16px 16px 10px; border-bottom:1px solid #ffffff10;
  }
  header h1 { font-size:20px; display:flex; align-items:center; gap:8px; }
  header h1 .logo {
    width:36px; height:36px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    background-size:200% 200%; font-size:18px; position:relative; overflow:hidden;
    animation:logogradient 4s ease infinite;
    box-shadow:0 4px 14px #7c5cff55;
  }
  @keyframes logogradient { 0%,100% { background-position:0% 0%; } 50% { background-position:100% 100%; } }
  /* shine sweep across logo */
  header h1 .logo::after {
    content:''; position:absolute; top:-4px; bottom:-4px; width:14px;
    background:linear-gradient(100deg, transparent, #ffffff66, transparent);
    transform:skewX(-20deg); animation:logosheen 3.2s ease-in-out infinite;
  }
  @keyframes logosheen { 0% { right:-24px; } 60%,100% { right:120%; } }
  /* logo emoji bounce */
  header h1 .logo .lg-emo { display:inline-block; animation:logobounce 2.6s ease infinite; }
  @keyframes logobounce {
    0%, 30%, 100% { transform:translateY(0) rotate(0); }
    8% { transform:translateY(-4px) rotate(-8deg); }
    16% { transform:translateY(0) rotate(6deg); }
    22% { transform:translateY(-2px) rotate(0); }
  }
  /* animated gradient title text */
  .gradtitle {
    background:linear-gradient(110deg, var(--text) 20%, var(--accent) 40%, var(--accent2) 50%, var(--text) 70%);
    background-size:250% 100%;
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    animation:titleflow 5s linear infinite; font-weight:800;
  }
  @keyframes titleflow { 0% { background-position:120% 0; } 100% { background-position:-130% 0; } }
  /* ====== TV-watcher logo (someone watching TV) ====== */
  header h1 .logo.tvwatcher { width:46px; height:40px; background:linear-gradient(135deg,#2a1a5e,#5e1a3a); }
  header h1 .logo.tvwatcher svg { width:42px; height:36px; }
  /* screen flicker like a real TV in a dark room */
  .tvw-screen { fill:#7c5cff; animation:tvwflicker 2.8s linear infinite; }
  @keyframes tvwflicker {
    0%, 100% { fill:#7c5cff; }
    18% { fill:#9b7bff; }
    24% { fill:#ff5c8a; }
    37% { fill:#7c5cff; }
    55% { fill:#4dc9ff; }
    62% { fill:#9b7bff; }
    80% { fill:#ff8a4d; }
    88% { fill:#7c5cff; }
  }
  /* light rays pulse with the screen */
  .tvw-rays { animation:tvwrays 2.8s linear infinite; transform-origin:21px 14px; }
  @keyframes tvwrays {
    0%,100% { opacity:.5; transform:scaleX(1); }
    24% { opacity:1; transform:scaleX(1.12); }
    55% { opacity:.8; transform:scaleX(1.06); }
    80% { opacity:1; transform:scaleX(1.1); }
  }
  /* viewer gently bobs + leans in on exciting scenes */
  .tvw-person { transform-origin:29.5px 25px; animation:tvwbob 2.8s ease-in-out infinite; }
  @keyframes tvwbob {
    0%, 45%, 100% { transform:translateY(0) rotate(0); }
    15% { transform:translateY(-.7px); }
    24% { transform:translateY(0) rotate(-4deg); }
    32% { transform:translateY(0) rotate(0); }
    62% { transform:translateY(-.7px); }
    80% { transform:translateY(0) rotate(-5deg); }
    90% { transform:translateY(0) rotate(0); }
  }
  /* popcorn pops occasionally */
  .tvw-pop { transform-origin:26px 26px; animation:tvwpop 2.8s ease infinite; }
  @keyframes tvwpop {
    0%, 20%, 100% { transform:translateY(0) scale(1); }
    24% { transform:translateY(-1.4px) scale(1.12); }
    30% { transform:translateY(0) scale(1); }
    80% { transform:translateY(-1px) scale(1.08); }
    86% { transform:translateY(0) scale(1); }
  }
  /* variant logo colors */
  header h1 .logo.movielogo { background:linear-gradient(135deg,#ff5c8a,#ff8a4d); background-size:200% 200%; box-shadow:0 4px 14px #ff5c8a55; animation:logogradient 4s ease infinite; }
  header h1 .logo.searchlogo { background:linear-gradient(135deg,#4dc9ff,#7c5cff); background-size:200% 200%; box-shadow:0 4px 14px #4dc9ff55; animation:logogradient 4s ease infinite; }
  .logo.searchlogo .lg-emo { animation:lookaround 3s ease infinite; }
  @keyframes lookaround {
    0%,100% { transform:translate(0,0); }
    20% { transform:translate(-2px,1px) rotate(-8deg); }
    45% { transform:translate(2px,-1px) rotate(8deg); }
    65% { transform:translate(0,0); }
  }
  /* ---------- Stats section animations ---------- */
  .stats-title-ic { display:inline-block; animation:statpulse 2.4s ease infinite; }
  @keyframes statpulse { 0%,100% { transform:scale(1);} 50% { transform:scale(1.18) rotate(-6deg);} }
  .statcard { position:relative; overflow:hidden; }
  .statcard::after {
    content:''; position:absolute; top:0; bottom:0; width:30px;
    background:linear-gradient(100deg, transparent, #ffffff10, transparent);
    transform:skewX(-20deg); animation:statsheen 3.6s ease-in-out infinite;
  }
  .statcard:nth-child(2)::after { animation-delay:.4s; }
  .statcard:nth-child(3)::after { animation-delay:.8s; }
  .statcard:nth-child(4)::after { animation-delay:1.2s; }
  .statcard:nth-child(5)::after { animation-delay:1.6s; }
  @keyframes statsheen { 0% { right:-40px; } 55%,100% { right:120%; } }
  .statcard .b .u b, .statcard .b .u > b { animation:numglow 3s ease infinite; }
  @keyframes numglow { 0%,100% { text-shadow:none; } 50% { text-shadow:0 0 12px #7c5cff66; } }
  /* count-up entrance for stat numbers */
  .statcard { animation:statrise .5s cubic-bezier(.18,1.4,.4,1) backwards; }
  .statcard:nth-child(1) { animation-delay:.05s; } .statcard:nth-child(2) { animation-delay:.12s; }
  .statcard:nth-child(3) { animation-delay:.19s; } .statcard:nth-child(4) { animation-delay:.26s; }
  .statcard:nth-child(5) { animation-delay:.33s; }
  @keyframes statrise { from { opacity:0; transform:translateY(14px) scale(.95); } to { opacity:1; transform:translateY(0) scale(1); } }
  /* ---------- Notification bell ---------- */
  .bellbtn {
    position:relative; width:36px; height:36px; border-radius:11px; flex-shrink:0;
    background:#00000066; backdrop-filter:blur(8px); border:1px solid #ffffff22;
    color:#fff; font-size:17px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .bellbtn .bell-ic { display:inline-block; transform-origin:50% 2px; animation:bellsway 4.5s ease-in-out infinite; }
  /* gentle idle sway — like a bell in a soft breeze */
  @keyframes bellsway {
    0%, 60%, 100% { transform:rotate(0); }
    68% { transform:rotate(7deg); }
    76% { transform:rotate(-5deg); }
    84% { transform:rotate(3deg); }
    92% { transform:rotate(0); }
  }
  .bellbtn:active .bell-ic { animation:bellring 1s ease; }
  .bellbtn.hasnotif { background:linear-gradient(135deg,#ffd00033,#ff8a0026); border-color:#ffd00077; }
  .bellbtn.hasnotif .bell-ic { animation:bellring 2.2s ease infinite; }
  @keyframes bellring {
    0%, 50%, 100% { transform:rotate(0); }
    5% { transform:rotate(18deg); } 10% { transform:rotate(-16deg); }
    15% { transform:rotate(12deg); } 20% { transform:rotate(-8deg); }
    25% { transform:rotate(4deg); } 30% { transform:rotate(0); }
  }
  .bellbtn .bellcount {
    position:absolute; top:-5px; left:-5px; min-width:17px; height:17px; padding:0 4px;
    background:#ff3b30; color:#fff; font-size:9.5px; font-weight:800; border-radius:99px;
    display:flex; align-items:center; justify-content:center; border:1.5px solid #0f0f1a;
    animation:popcheck .4s cubic-bezier(.18,1.6,.4,1);
  }
  .notif-row {
    display:flex; gap:11px; background:var(--card2); border:1px solid #ffffff10;
    border-radius:14px; padding:12px 13px; margin-bottom:9px; align-items:flex-start;
    animation:pop .25s ease;
  }
  .notif-row.unread { border-color:#7c5cff55; background:#7c5cff12; }
  .notif-row .nic { font-size:20px; flex-shrink:0; margin-top:1px; }
  .notif-row .nt { flex:1; min-width:0; font-size:12.5px; line-height:1.9; }
  .notif-row .nt b { color:var(--accent); }
  .notif-row .nwhen { font-size:10px; color:var(--muted); margin-top:2px; }
  .hbtn {
    margin-right:auto; width:34px; height:34px; border-radius:10px; border:1px solid #ffffff18;
    background:var(--card); color:var(--text); font-size:15px; cursor:pointer;
  }
  .searchbar { margin-top:10px; position:relative; }
  .searchbar input {
    width:100%; padding:10px 38px 10px 12px; border-radius:12px; border:1px solid #ffffff14;
    background:var(--card); color:var(--text); font-size:14px; outline:none; font-family:inherit;
  }
  .searchbar input:focus { border-color:var(--accent); }
  .searchbar .icon { position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:15px; }
  .tabs { display:flex; gap:6px; margin-top:10px; }
  .tab {
    flex:1; text-align:center; padding:7px 4px; border-radius:10px; font-size:12.5px;
    color:var(--muted); background:transparent; border:1px solid transparent; cursor:pointer; font-family:inherit;
  }
  .tab.active { background:#7c5cff22; color:var(--accent); border-color:#7c5cff55; font-weight:bold;
    animation:tabpop .45s cubic-bezier(.18,1.7,.4,1), tabglow 2.4s ease infinite .45s; }
  @keyframes tabpop { 0% { transform:scale(.85);} 60% { transform:scale(1.07);} 100% { transform:scale(1);} }
  @keyframes tabglow { 0%,100% { text-shadow:0 0 0 transparent; } 50% { text-shadow:0 0 12px #7c5cffcc; } }
  /* ---------- Show cards (TVTime style) ---------- */
  #list { padding:14px 14px 0; display:flex; flex-direction:column; gap:12px; }
  .empty { text-align:center; color:var(--muted); padding:60px 30px; font-size:14px; line-height:2; }
  /* ---------- Fancy empty states ---------- */
  .empty2 { text-align:center; padding:46px 30px 30px; animation:pop .35s ease; }
  .empty2 .art { width:140px; height:115px; margin:0 auto 4px; }
  .empty2 .art svg { width:100%; height:100%; overflow:visible; }
  .empty2 .t1 {
    font-size:16.5px; font-weight:800; margin-top:10px;
    background:linear-gradient(110deg, var(--text) 25%, var(--accent) 42%, var(--accent2) 52%, var(--text) 70%);
    background-size:280% 100%;
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    animation:titleflow 5s linear infinite;
  }
  /* emojis inside gradient text must keep their own colors */
  .empty2 .t1 .emo { -webkit-text-fill-color:initial; background:none; display:inline-block; animation:emobounce 2s ease infinite; }
  @keyframes emobounce { 0%,100% { transform:translateY(0) rotate(0);} 30% { transform:translateY(-3px) rotate(-8deg);} 60% { transform:translateY(0) rotate(5deg);} }
  .empty2 .t2 { font-size:13px; color:var(--muted); margin-top:8px; line-height:2; }
  .empty2 .t2 .hand { display:inline-block; animation:pointdown 1.4s ease infinite; }
  @keyframes pointdown { 0%,100% { transform:translateY(0);} 50% { transform:translateY(5px);} }
  .empty2 .float { animation:emptyfloat 3.4s ease-in-out infinite; }
  @keyframes emptyfloat { 0%,100% { transform:translateY(0);} 50% { transform:translateY(-7px);} }
  /* sleepy TV: static bars + zzz */
  .es-tv .estv-bar { animation:estvstatic 1.1s steps(2) infinite; }
  .es-tv .estv-bar.b2 { animation-delay:.25s; }
  .es-tv .estv-bar.b4 { animation-delay:.5s; }
  @keyframes estvstatic { 0%,100% { opacity:.85; } 50% { opacity:.2; } }
  .es-tv .estv-z { opacity:0; animation:zfloat 2.7s ease infinite; }
  .es-tv .estv-z.z2 { animation-delay:.9s; }
  .es-tv .estv-z.z3 { animation-delay:1.8s; }
  @keyframes zfloat {
    0% { opacity:0; transform:translate(0,0); }
    25% { opacity:1; }
    100% { opacity:0; transform:translate(-10px,-16px); }
  }
  .es-tv .estv-ant { transform-origin:70px 20px; animation:antwiggle 2.6s ease infinite; }
  /* movie empty: cinema scene */
  .es-mv .esmv-beam { transform-origin:75px 7px; animation:beamflicker 2.6s ease infinite; }
  @keyframes beamflicker { 0%,100% { opacity:.65; transform:scaleX(1);} 30% { opacity:1; transform:scaleX(1.06);} 55% { opacity:.75; } 80% { opacity:1; transform:scaleX(1.03);} }
  .es-mv .esmv-lamp { animation:lampblink 2.6s ease infinite; }
  @keyframes lampblink { 0%,100% { opacity:.8;} 30% { opacity:1; r:3.9;} 60% { opacity:.7;} }
  /* countdown ring sweeps like an old film leader */
  .es-mv .esmv-cdring { transform-origin:75px 48px; transform:rotate(-90deg); animation:cdsweep 3.2s linear infinite; }
  @keyframes cdsweep { 0% { stroke-dashoffset:72.2; } 85%,100% { stroke-dashoffset:0; } }
  .es-mv .esmv-cdhand { transform-origin:75px 48px; animation:cdhand 3.2s linear infinite; }
  @keyframes cdhand { 0% { transform:rotate(0);} 85%,100% { transform:rotate(360deg);} }
  /* curtains sway gently */
  .es-mv .esmv-curt { transform-origin:33px 26px; animation:curtsway 4s ease-in-out infinite; }
  .es-mv .esmv-curt.cR { transform-origin:117px 26px; animation-delay:1.2s; }
  @keyframes curtsway { 0%,100% { transform:skewY(0);} 50% { transform:skewY(1.6deg);} }
  .es-mv .corn { animation:cornpop 2.1s ease infinite; }
  .es-mv .corn.c2 { animation-delay:.4s; }
  .es-mv .corn.c3 { animation-delay:.9s; }
  .es-mv .corn.c4 { animation-delay:1.4s; }
  @keyframes cornpop {
    0%, 55%, 100% { transform:translateY(0) rotate(0); }
    65% { transform:translateY(-13px) rotate(-25deg); }
    75% { transform:translateY(-6px) rotate(15deg); }
    85% { transform:translateY(-10px) rotate(-10deg); }
    95% { transform:translateY(0); }
  }
  .empty .big { font-size:50px; display:block; margin-bottom:10px; }
  .card {
    background:#0b0b13; border-radius:18px; overflow:hidden; display:flex; align-items:stretch;
    border:1px solid #ffffff0a; position:relative; animation:pop .25s ease;
  }
  @keyframes pop { from { opacity:0; transform:scale(.97);} to { opacity:1; transform:scale(1);} }
  .poster {
    width:106px; min-height:152px; flex-shrink:0; background:var(--card2); position:relative;
    background-size:cover; background-position:center top; cursor:pointer;
    image-rendering:auto;
  }
  .poster .noimg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:34px; opacity:.4; }
  .info { flex:1; padding:14px 12px 12px 6px; display:flex; flex-direction:column; justify-content:center; gap:7px; min-width:0; cursor:pointer; }
  .name-pill {
    display:inline-flex; align-items:center; gap:6px; border:1.5px solid #ffffff77; border-radius:99px;
    padding:4px 12px; font-size:11px; font-weight:bold; color:#fff; width:fit-content; max-width:100%;
  }
  .name-pill .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:165px; }
  .name-pill .arr { opacity:.8; font-size:10px; }
  .epbig { font-size:21px; font-weight:800; line-height:1.3; display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
  .epbig .plus { font-size:12px; color:var(--muted); font-weight:bold; }
  .epbig.donetext { font-size:16px; color:var(--green); }
  .epbig.waittext { font-size:14px; color:#ffb74d; }
  .eptitle { font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .newbadge { background:var(--gold); color:#1a1a00; font-weight:800; font-size:10.5px; padding:3px 11px; border-radius:6px; width:fit-content; }
  .newbadge.season { background:linear-gradient(135deg,#ff5c8a,#ff8a4d); color:#fff; animation:pulse 1.6s ease infinite; }
  @keyframes pulse { 0%,100% { transform:scale(1);} 50% { transform:scale(1.06);} }
  .sequelbanner {
    background:linear-gradient(135deg,#ff5c8a22,#ff8a4d14); border:1px solid #ff5c8a55;
    border-radius:15px; padding:13px 15px; margin-bottom:12px;
  }
  .sequelbanner .sb-t { font-size:13px; line-height:1.9; }
  .sequelbanner button { margin-top:9px; width:100%; }
  .cardbar { height:4px; background:#ffffff10; border-radius:99px; overflow:hidden; margin-top:2px; }
  .cardbar .f { height:100%; background:linear-gradient(90deg,var(--accent),var(--accent2)); border-radius:99px; transition:width .4s; }
  .checkwrap { display:flex; align-items:center; padding:0 4px 0 16px; }
  .card-menu {
    position:absolute; top:8px; left:8px; width:28px; height:28px; border-radius:9px;
    background:#ffffff10; border:none; color:#ffffffaa; font-size:15px; cursor:pointer; z-index:2;
  }
  /* ---------- Check circle ---------- */
  .checkcircle {
    width:48px; height:48px; border-radius:50%; flex-shrink:0;
    border:none; background:#f1f1f4; cursor:pointer;
    display:flex; align-items:center; justify-content:center; position:relative;
    transition:background .25s, transform .15s; box-shadow:0 2px 10px #00000055;
  }
  .checkcircle:active { transform:scale(.85); }
  .checkcircle svg { width:23px; height:23px; }
  .checkcircle svg path {
    stroke:#9a9aa8; stroke-width:3.4; fill:none; stroke-linecap:round; stroke-linejoin:round;
    stroke-dasharray:30; stroke-dashoffset:0; transition:stroke .2s;
  }
  .checkcircle.checked { background:linear-gradient(135deg,var(--green),#28b46a); animation:popcheck .45s cubic-bezier(.18,1.6,.4,1); }
  .checkcircle.checked svg path { stroke:#fff; stroke-dashoffset:30; animation:draw .35s ease .12s forwards; }
  .checkcircle.alldone { opacity:.4; pointer-events:none; }
  .checkcircle.waiting { opacity:.5; background:#3a3a50; }
  .checkcircle.waiting svg { display:none; }
  .checkcircle.waiting::before { content:'⏳'; font-size:18px; }
  .checkcircle.green { background:linear-gradient(135deg,var(--green),#28b46a); }
  .checkcircle.green svg path { stroke:#fff; }
  .checkcircle.sm { width:36px; height:36px; }
  .checkcircle.sm svg { width:17px; height:17px; }
  @keyframes draw { to { stroke-dashoffset:0; } }
  @keyframes popcheck { 0% { transform:scale(.6);} 55% { transform:scale(1.18);} 100% { transform:scale(1);} }
  .checkcircle.checked::after {
    content:''; position:absolute; inset:0; border-radius:50%;
    border:2.5px solid var(--green); animation:ripple .55s ease forwards;
  }
  @keyframes ripple { 0% { transform:scale(1); opacity:.9;} 100% { transform:scale(1.9); opacity:0;} }
  /* ---------- Movies grid ---------- */
  .mgrid { padding:14px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
  .mcard { position:relative; cursor:pointer; animation:pop .25s ease; }
  .mposter {
    aspect-ratio:2/3; border-radius:13px; background:var(--card2); background-size:cover; background-position:center top;
    border:1px solid #ffffff10; display:flex; align-items:center; justify-content:center; font-size:30px; position:relative; overflow:hidden;
  }
  .mposter .seen-overlay {
    position:absolute; inset:0; background:#000000088; backdrop-filter:blur(1px);
    display:flex; align-items:center; justify-content:center; font-size:34px; background:#00000099;
  }
  .mname { font-size:11px; margin-top:6px; text-align:center; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mcheck { position:absolute; top:6px; left:6px; z-index:2; }
  /* ---------- FAB & bottom nav ---------- */
  .fab {
    position:fixed; bottom:86px; left:16px; z-index:60;
    width:56px; height:56px; border-radius:18px; border:none; cursor:pointer;
    background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; font-size:27px;
    box-shadow:0 8px 24px #7c5cff66; display:flex; align-items:center; justify-content:center;
  }
  .fab:active { transform:scale(.92); }
  .bottomnav {
    position:fixed; bottom:0; right:0; left:0; z-index:70;
    background:#101018f2; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-top:1px solid #ffffff10; display:flex; padding:8px 10px 16px;
  }
  .bottomnav button {
    flex:1; background:transparent; border:none; color:var(--muted); font-size:11px; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:4px; font-family:inherit; padding:6px 4px 4px;
    position:relative; transition:color .25s;
  }
  .bottomnav button.active { color:#fff; font-weight:bold; }
  /* floating glow pill behind active icon */
  .bottomnav button::before {
    content:''; position:absolute; top:0; width:46px; height:32px; border-radius:99px;
    background:linear-gradient(135deg,#7c5cff33,#ff5c8a26);
    border:1px solid #7c5cff44;
    opacity:0; transform:scale(.4) translateY(8px);
    transition:opacity .3s, transform .35s cubic-bezier(.18,1.6,.4,1);
    pointer-events:none;
  }
  .bottomnav button.active::before { opacity:1; transform:scale(1) translateY(0); }
  /* label slides up slightly when active */
  .bottomnav button span:last-child { transition:transform .25s; }
  .bottomnav button.active span:last-child { transform:translateY(-1px); }
  /* icon container */
  .bottomnav .ic {
    width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center;
    position:relative; z-index:1;
  }
  .bottomnav .ic svg { width:24px; height:24px; overflow:visible; }
  .bottomnav .ic svg * { transition:fill .3s, stroke .3s, opacity .3s; }
  /* press squish */
  .bottomnav button:active .ic { transform:scale(.82); transition:transform .1s; }
  /* activation bounce */
  .bottomnav button.active .ic { animation:navpop .5s cubic-bezier(.18,1.8,.4,1); }
  @keyframes navpop { 0% { transform:scale(.7) rotate(-8deg);} 60% { transform:scale(1.18) rotate(4deg);} 100% { transform:scale(1) rotate(0);} }

  /* ====== TV (series) icon ====== */
  .icon-tv .tv-body { fill:none; stroke:currentColor; stroke-width:1.8; }
  .icon-tv .tv-screen { fill:transparent; }
  .icon-tv .tv-ant { stroke:currentColor; stroke-width:1.8; stroke-linecap:round; fill:none; transform-origin:12px 7px; }
  .icon-tv .tv-dot { fill:transparent; }
  button.active .icon-tv .tv-body { stroke:#9b7bff; }
  button.active .icon-tv .tv-ant { stroke:#ff5c8a; animation:antwiggle 1.6s ease-in-out infinite; }
  button.active .icon-tv .tv-screen { fill:#7c5cff33; animation:screenflicker 2.2s ease infinite; }
  button.active .icon-tv .tv-dot { fill:#3ddc84; animation:reclight 1.2s ease infinite; }
  @keyframes antwiggle { 0%,100% { transform:rotate(0);} 25% { transform:rotate(-7deg);} 75% { transform:rotate(7deg);} }
  @keyframes screenflicker { 0%,100% { fill:#7c5cff33; } 40% { fill:#ff5c8a3d; } 70% { fill:#7c5cff52; } }
  @keyframes reclight { 0%,100% { opacity:1; } 50% { opacity:.2; } }

  /* ====== Clapper (movies) icon ====== */
  .icon-clap .cl-bottom { fill:none; stroke:currentColor; stroke-width:1.8; }
  .icon-clap .cl-top { fill:none; stroke:currentColor; stroke-width:1.8; transform-origin:4px 9px; }
  .icon-clap .cl-stripe { stroke:currentColor; stroke-width:1.4; opacity:.6; }
  button.active .icon-clap .cl-bottom { stroke:#9b7bff; }
  button.active .icon-clap .cl-top { stroke:#ff5c8a; animation:clapclap 1.8s cubic-bezier(.6,-0.3,.3,1.4) infinite; }
  button.active .icon-clap .cl-stripe { stroke:#ffd000; opacity:1; }
  @keyframes clapclap {
    0%, 55%, 100% { transform:rotate(0); }
    66% { transform:rotate(-22deg); }
    78% { transform:rotate(0); }
    84% { transform:rotate(-10deg); }
    90% { transform:rotate(0); }
  }

  /* ====== Search icon ====== */
  .icon-search .sr-lens { fill:none; stroke:currentColor; stroke-width:1.9; }
  .icon-search .sr-handle { stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
  .icon-search .sr-shine { stroke:transparent; stroke-width:1.6; stroke-linecap:round; fill:none; }
  .icon-search g { transform-origin:11px 11px; }
  button.active .icon-search .sr-lens { stroke:#9b7bff; }
  button.active .icon-search .sr-handle { stroke:#ff5c8a; }
  button.active .icon-search .sr-shine { stroke:#ffffffcc; animation:lensshine 2s ease infinite; }
  button.active .icon-search g { animation:lenssweep 2.4s ease-in-out infinite; }
  @keyframes lenssweep {
    0%,100% { transform:translate(0,0) rotate(0); }
    30% { transform:translate(-2.5px,1.5px) rotate(-10deg); }
    60% { transform:translate(2.5px,-1px) rotate(8deg); }
  }
  @keyframes lensshine { 0%,100% { opacity:0;} 45% { opacity:1;} 70% { opacity:0;} }

  /* ====== Profile tab ====== */
  .profilewrap { position:relative; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; }
  .navatar {
    width:26px; height:26px; border-radius:50%; background-size:cover; background-position:center;
    display:inline-flex; align-items:center; justify-content:center; border:2px solid transparent;
    transition:border-color .25s, box-shadow .25s; overflow:hidden; position:relative; z-index:1;
  }
  .navperson { width:20px; height:20px; }
  .navperson .np-head { fill:currentColor; }
  .navperson .np-body { fill:currentColor; opacity:.85; }
  .navatar.haspic .navperson { display:none; }
  /* active: colored person */
  #nav-profile.active .navperson .np-head { fill:#9b7bff; }
  #nav-profile.active .navperson .np-body { fill:#ff5c8a; opacity:1; }
  #nav-profile.active .navperson { animation:personbounce 2.4s ease-in-out infinite; transform-origin:center bottom; }
  @keyframes personbounce {
    0%, 100% { transform:translateY(0); }
    12% { transform:translateY(.5px) scaleY(.94); }
    24% { transform:translateY(-2.5px); }
    36% { transform:translateY(0) scaleY(1); }
  }
  .sonar { position:absolute; inset:-2px; border-radius:50%; pointer-events:none; border:2px solid var(--accent); opacity:0; }
  #nav-profile.active .sonar { animation:sonarping 2.4s ease-out infinite; }
  .sonar.s2, .sonar.s3, .navhalo, .navstar, .navcrown { display:none; }
  @keyframes sonarping { 0% { opacity:.7; transform:scale(.75); } 70% { opacity:0; transform:scale(1.9); } 100% { opacity:0; transform:scale(1.9); } }
  #nav-profile.active .navatar { border-color:var(--accent); box-shadow:0 0 12px #7c5cff99; }
  #nav-profile.active .navatar.haspic { animation:photobounce 2.4s ease-in-out infinite; }
  @keyframes photobounce { 0%, 100% { transform:translateY(0); } 12% { transform:translateY(.5px) scale(.97); } 24% { transform:translateY(-2px) scale(1.02); } 36% { transform:translateY(0) scale(1); } }
  /* ---------- Explore ---------- */
  .ex-card {
    display:flex; gap:12px; background:var(--card); border:1px solid #ffffff0d; border-radius:16px;
    padding:10px; margin-bottom:10px; align-items:center; animation:pop .25s ease;
  }
  .ex-card img { width:62px; height:88px; object-fit:cover; border-radius:10px; background:#000; flex-shrink:0; }
  .ex-card .xi { flex:1; min-width:0; }
  .ex-card .xt { font-size:14px; font-weight:bold; line-height:1.5; }
  .ex-card .xs { font-size:11.5px; color:var(--muted); margin-top:3px; line-height:1.7; }
  .ex-add {
    flex-shrink:0; padding:9px 14px; border-radius:11px; border:none; cursor:pointer; font-family:inherit;
    background:linear-gradient(135deg,var(--accent),#9b7bff); color:#fff; font-size:12.5px; font-weight:bold;
  }
  .ex-add.added { background:#3ddc8422; color:var(--green); border:1px solid #3ddc8455; }
  .ex-add:active { transform:scale(.94); }
  .typechip {
    display:inline-block; font-size:9.5px; padding:2px 8px; border-radius:99px;
    background:#7c5cff22; color:#a78bff; border:1px solid #7c5cff44; margin-left:4px;
  }
  /* ---------- Profile ---------- */
  .p-hero { position:relative; padding:26px 18px 18px; overflow:hidden; }
  .p-hero .bg {
    position:absolute; inset:-30px; background-size:cover; background-position:center;
    filter:blur(24px) brightness(.35); transform:scale(1.2);
  }
  .p-hero .bg.nopic { background:linear-gradient(135deg,#2a1a5e,#5e1a3a); filter:none; }
  /* cover (same as before: fills the box) */
  .p-hero.hascover { padding-top:90px; }
  .p-hero.hascover .bg { inset:0; filter:none; transform:none; }
  .p-hero.hascover .bg::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(180deg, #0f0f1a22 0%, #0f0f1a55 55%, #0f0f1ae8 100%);
  }
  /* ---------- Profile top bar (menu + theme toggle) ---------- */
  .p-topbar {
    position:absolute; top:12px; left:12px; z-index:5;
    display:flex; flex-direction:column; align-items:flex-start; gap:9px;
  }
  .p-topbar-row { display:flex; align-items:center; gap:9px; }
  /* ⋯ sits under the SUN end of the theme toggle (far edge) */
  .p-topbar .p-menu { align-self:flex-end; }
  html[dir="ltr"] .p-topbar { left:auto; right:12px; }
  html[dir="ltr"] .p-topbar .p-menu { align-self:flex-start; }
  .p-menu {
    width:36px; height:36px; border-radius:11px; flex-shrink:0;
    background:#00000066; backdrop-filter:blur(8px); border:1px solid #ffffff22;
    color:#fff; font-size:18px; cursor:pointer; line-height:1;
  }
  /* ---------- Moon/Sun theme toggle ---------- */
  .themetoggle {
    position:relative; width:70px; height:36px; border-radius:99px; cursor:pointer;
    background:#00000066; backdrop-filter:blur(8px); border:1px solid #ffffff22;
    user-select:none; flex-shrink:0; overflow:hidden;
    transition:background .45s;
  }
  .themetoggle.islight { background:linear-gradient(135deg,#9ed2ffcc,#cfe8ffcc); border-color:#ffffff66; }
  /* faded icons on the track (the side the knob is NOT on) */
  .tt-ghost {
    position:absolute; top:50%; transform:translateY(-50%);
    font-size:14px; opacity:0; transition:opacity .35s; filter:grayscale(1); pointer-events:none;
  }
  /* ghosts sit on the EMPTY side, showing where the ball will roll to */
  .tt-ghost.sun  { left:9px; }
  .tt-ghost.moon { right:9px; }
  .themetoggle:not(.islight) .tt-ghost.sun  { opacity:.55; }  /* dark: knob right, sun waits left */
  .themetoggle.islight       .tt-ghost.moon { opacity:.45; }  /* light: knob left, moon waits right */
  .themetoggle.islight .tt-ghost.moon { filter:grayscale(1) brightness(.6); }
  /* the rolling ball — icon lives INSIDE the ball */
  .tt-knob {
    position:absolute; top:3px; right:3px; width:28px; height:28px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:#23233c; border:1.5px solid #ffffff33;
    box-shadow:0 2px 8px #00000066, inset 0 0 6px #00000055;
    transition:transform .45s cubic-bezier(.5,1.7,.4,1), background .45s, box-shadow .45s, border-color .45s;
  }
  .tt-knob .ki {
    position:absolute; font-size:15px; line-height:1;
    transition:opacity .3s, transform .45s cubic-bezier(.5,1.7,.4,1);
  }
  /* dark mode: dark ball + white moon */
  .tt-knob .ki.moon { opacity:1; filter:grayscale(1) brightness(2); transform:rotate(0deg); }
  .tt-knob .ki.sun  { opacity:0; transform:rotate(-160deg) scale(.4); }
  /* light mode: white ball + vivid warm sun */
  .themetoggle.islight .tt-knob {
    transform:translateX(-34px);
    background:#ffffff; border-color:#ffffffcc;
    box-shadow:0 2px 10px #f9a82566, 0 0 16px #ffd76a55;
  }
  .themetoggle.islight .tt-knob .ki.moon { opacity:0; transform:rotate(160deg) scale(.4); }
  .themetoggle.islight .tt-knob .ki.sun {
    opacity:1; transform:rotate(0deg) scale(1);
    filter:saturate(1.3) brightness(1.05) drop-shadow(0 0 3px #ffb74d88);
  }
  html[dir="ltr"] .tt-knob { right:auto; left:3px; }
  html[dir="ltr"] .themetoggle.islight .tt-knob { transform:translateX(34px); }
  html[dir="ltr"] .tt-ghost.sun { left:auto; right:9px; }
  html[dir="ltr"] .tt-ghost.moon { right:auto; left:9px; }
  .coveropt {
    display:flex; align-items:center; gap:12px; background:var(--card2); border:1px solid #ffffff14;
    border-radius:14px; padding:13px 14px; margin-bottom:10px; cursor:pointer; transition:border-color .2s;
  }
  .coveropt:active { border-color:var(--accent); }
  .coveropt.on { border-color:var(--accent); background:#7c5cff14; }
  .coveropt .ce { font-size:24px; flex-shrink:0; }
  .coveropt .ct b { font-size:14px; display:block; }
  .coveropt .ct p { font-size:11.5px; color:var(--muted); margin-top:2px; line-height:1.7; }
  .coveropt .mark { margin-right:auto; font-size:18px; color:var(--accent); }
  /* ---------- Account option (in ⋯ menu) ---------- */
  .acct-opt { border-color:#7c5cff44; background:linear-gradient(135deg,#7c5cff14,#ff5c8a0d); position:relative; overflow:hidden; }
  .acct-opt::after {
    content:''; position:absolute; top:-6px; bottom:-6px; width:22px;
    background:linear-gradient(100deg, transparent, #ffffff22, transparent);
    transform:skewX(-20deg); animation:logosheen 3s ease-in-out infinite;
  }
  .acct-ic { width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; }
  .acct-ic svg { width:30px; height:30px; overflow:visible; }
  .acct-ic .ai-ring { stroke:url(#navgrad); stroke-width:1.8; stroke-dasharray:10 5; animation:cktick 9s linear infinite; transform-origin:12px 12px; }
  .acct-ic .ai-head { fill:#9b7bff; }
  .acct-ic .ai-body { stroke:#9b7bff; stroke-width:2.2; }
  .acct-ic .ai-key { stroke:#ffd54d; stroke-width:1.7; fill:none; transform-origin:18.6px 6px; animation:keyswing 2.4s ease infinite; filter:drop-shadow(0 0 3px #ffd54d77); }
  .acct-ic .ai-key circle { stroke:#ffd54d; }
  @keyframes keyswing { 0%,100% { transform:rotate(0);} 30% { transform:rotate(-14deg);} 60% { transform:rotate(10deg);} }
  .acct-opt.logout { border-color:#ff5c5c44; background:linear-gradient(135deg,#ff5c5c14,#ff8a4d0d); }
  .acct-ic.out svg path { stroke:#ff7b7b; stroke-width:2; }
  .acct-ic.out .lo-arrow { animation:loslide 1.8s ease infinite; }
  @keyframes loslide { 0%,100% { transform:translateX(0); opacity:1;} 50% { transform:translateX(3.5px); opacity:.7;} }
  /* ---------- Auth modal ---------- */
  .auth-hero { text-align:center; margin-bottom:16px; }
  .auth-orb {
    position:relative; width:86px; height:86px; margin:0 auto 10px;
    display:flex; align-items:center; justify-content:center;
    animation:avatarentrance .55s cubic-bezier(.18,1.5,.4,1);
  }
  .auth-orb svg { width:78px; height:78px; overflow:visible; }
  .auth-orb .ao-ring { stroke:url(#navgrad); stroke-width:2.2; stroke-dasharray:16 8; animation:cktick 12s linear infinite; transform-origin:24px 24px; }
  .auth-orb .ao-head { fill:url(#navgrad); }
  .auth-orb .ao-body { stroke:url(#navgrad); stroke-width:3.4; stroke-linecap:round; }
  .auth-spark { position:absolute; font-size:11px; color:#ffd54d; text-shadow:0 0 6px #ffd54d; opacity:0; animation:startwinkle2 2.4s ease infinite; }
  .auth-spark.sp1 { top:2px; right:4px; }
  .auth-spark.sp2 { bottom:8px; left:0; color:#ff5c8a; text-shadow:0 0 6px #ff5c8a; font-size:9px; animation-delay:.8s; }
  .auth-spark.sp3 { top:24px; left:-8px; color:#4dc9ff; text-shadow:0 0 6px #4dc9ff; font-size:8px; animation-delay:1.6s; }
  @keyframes startwinkle2 {
    0%,100% { opacity:0; transform:scale(.3) rotate(0); }
    30% { opacity:1; transform:scale(1.1) rotate(40deg); }
    60% { opacity:0; transform:scale(.4) rotate(90deg); }
  }
  .auth-title {
    font-size:19px; font-weight:800;
    background:linear-gradient(110deg, var(--text) 25%, var(--accent) 45%, var(--accent2) 55%, var(--text) 75%);
    background-size:280% 100%;
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    animation:titleflow 5s linear infinite;
  }
  .auth-sub { font-size:11.5px; color:var(--muted); margin-top:5px; line-height:1.8; }
  .auth-err { color:#ff7b7b; font-size:12px; text-align:center; min-height:18px; margin:2px 0 6px; animation:pop .2s ease; }
  .auth-go { position:relative; overflow:hidden; }
  .auth-go::after {
    content:''; position:absolute; top:-4px; bottom:-4px; width:20px;
    background:linear-gradient(100deg, transparent, #ffffff55, transparent);
    transform:skewX(-20deg); animation:logosheen 2.8s ease-in-out infinite;
  }
  /* uid chip in profile */
  .uidchip {
    display:inline-flex; align-items:center; gap:5px; margin-top:6px; padding:3px 10px;
    background:#00000044; border:1px solid #ffffff22; border-radius:99px;
    font-size:10px; color:#ffffffcc; letter-spacing:.5px; cursor:pointer;
    backdrop-filter:blur(4px);
  }
  .uidchip:active { transform:scale(.95); }
  /* ---------- Name color picker ---------- */
  .ncp-dot { animation:ncpblink 2.4s ease infinite; }
  .ncp-dot.d2 { animation-delay:.5s; } .ncp-dot.d3 { animation-delay:1s; } .ncp-dot.d4 { animation-delay:1.5s; }
  @keyframes ncpblink { 0%,100% { opacity:1; r:1.5; } 50% { opacity:.4; } }
  .adm-star { transform-origin:12px 11px; animation:admstar 3s ease infinite; }
  @keyframes admstar { 0%,100% { transform:rotate(0) scale(1);} 50% { transform:rotate(12deg) scale(1.08);} }
  .nc-preview {
    background:var(--card2); border:1px solid #ffffff14; border-radius:16px;
    padding:18px; text-align:center; margin-bottom:14px;
  }
  .nc-preview span { font-size:24px; font-weight:800; }
  .nc-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:9px; margin-bottom:12px; }
  .nc-swatch {
    aspect-ratio:1; border-radius:50%; cursor:pointer; border:2.5px solid transparent;
    transition:transform .15s, border-color .2s; position:relative;
  }
  .nc-swatch:active { transform:scale(.85); }
  .nc-swatch.sel { border-color:#fff; box-shadow:0 0 10px #ffffff55; transform:scale(1.08); }
  .nc-swatch.fancy { display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:#fff; }
  /* fancy name effects */
  .nfx-gold { background:linear-gradient(110deg,#ffd000 25%,#fff3b0 50%,#ff9500 75%); background-size:250% 100%;
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:titleflow 3.5s linear infinite; }
  .nfx-rainbow { background:linear-gradient(110deg,#ff5c5c,#ffd54d,#3ddc84,#4dc9ff,#7c5cff,#ff5c8a,#ff5c5c); background-size:350% 100%;
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:titleflow 4s linear infinite; }
  .nfx-fire { background:linear-gradient(0deg,#ff5c1a 15%,#ffd54d 60%,#fff3b0 95%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 0 7px #ff8a4d77); animation:firetext 1.2s ease infinite; }
  @keyframes firetext { 0%,100% { filter:drop-shadow(0 0 5px #ff8a4d66);} 50% { filter:drop-shadow(0 2px 13px #ff5c1aaa);} }
  .nfx-neon { color:#4dffd2 !important; -webkit-text-fill-color:#4dffd2 !important; background:none !important;
    text-shadow:0 0 7px #4dffd2, 0 0 20px #4dffd266; animation:neonpulse 2s ease infinite; }
  @keyframes neonpulse { 0%,100% { text-shadow:0 0 6px #4dffd2, 0 0 16px #4dffd255;} 50% { text-shadow:0 0 12px #4dffd2, 0 0 30px #4dffd2aa;} }
  .nfx-galaxy { background:linear-gradient(110deg,#9b7bff,#ff5c8a,#4dc9ff,#9b7bff); background-size:300% 100%;
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    animation:titleflow 5s linear infinite; filter:drop-shadow(0 0 9px #9b7bff66); }
  /* admin badge (like owner but pink/purple) */
  .adminbadge {
    position:relative; display:inline-flex; align-items:center; gap:6px; margin-top:8px;
    background:linear-gradient(110deg,#2a1a4e,#46226e 40%,#2a1a4e);
    border:1px solid #b88affaa; border-radius:99px; padding:4px 14px 4px 12px;
    font-size:11px; font-weight:800; color:#d9c2ff; letter-spacing:1.5px;
    text-shadow:0 1px 4px #000; box-shadow:0 0 16px #9b7bff44, inset 0 1px 0 #ffffff22; overflow:hidden;
  }
  .adminbadge::after {
    content:''; position:absolute; top:0; bottom:0; width:36px;
    background:linear-gradient(100deg, transparent, #ffffff44, transparent);
    transform:skewX(-20deg); animation:ownersheen 3.2s ease-in-out infinite;
  }
  .adminbadge .astar { font-size:13px; animation:admstar 3s ease infinite; display:inline-block; }
  .adminbadge.mini { margin-top:0; padding:2px 9px 2px 7px; font-size:9px; letter-spacing:1px; }
  .adminbadge.mini .astar { font-size:10px; }
  /* admin list row */
  .admrow { display:flex; align-items:center; gap:11px; background:var(--card2); border:1px solid #ffffff10;
    border-radius:14px; padding:11px 13px; margin-bottom:9px; }
  .admrow .ar-info { flex:1; min-width:0; }
  .admrow .ar-info b { font-size:13.5px; display:block; }
  .admrow .ar-info span { font-size:10px; color:var(--muted); letter-spacing:.4px; }
  .admrow .smallbtn { width:auto; padding:8px 14px; }
  .admrow .smallbtn.isadmin { background:#9b7bff22; color:#b89bff; border-color:#9b7bff55; }
  /* ---------- Follow page ---------- */
  .fsearchwrap {
    position:relative; border-radius:18px; padding:2.5px;
    background:linear-gradient(110deg, var(--accent), var(--accent2), #ffd54d, var(--accent));
    background-size:300% 100%; animation:editflow 5s linear infinite;
    box-shadow:0 6px 24px #7c5cff33;
  }
  .fsearchwrap input {
    width:100%; padding:15px 48px 15px 16px; border-radius:16px; border:none;
    background:var(--bg); color:var(--text); font-size:14.5px; outline:none; font-family:inherit;
  }
  .fsearchwrap .fs-ic {
    position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:19px; z-index:2;
    animation:lookaround 3s ease infinite; display:inline-block;
  }
  html[dir="ltr"] .fsearchwrap input { padding:15px 16px 15px 48px; }
  html[dir="ltr"] .fsearchwrap .fs-ic { right:auto; left:16px; }
  .frow {
    display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid #ffffff0d;
    border-radius:16px; padding:12px 14px; margin-bottom:10px; animation:pop .25s ease;
  }
  .frow .fr-av {
    width:46px; height:46px; border-radius:50%; background:var(--card2); background-size:cover; background-position:center;
    display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0;
    border:2px solid #7c5cff55;
  }
  .frow .fr-info { flex:1; min-width:0; }
  .frow .fr-info b { font-size:14px; display:block; }
  .frow .fr-info span { font-size:10px; color:var(--muted); letter-spacing:.4px; }
  .followbtn {
    padding:9px 18px; border-radius:99px; border:none; cursor:pointer; font-family:inherit;
    background:linear-gradient(135deg,var(--accent),#9b7bff); color:#fff; font-size:12px; font-weight:800;
    transition:transform .15s; flex-shrink:0;
  }
  .followbtn:active { transform:scale(.92); }
  .followbtn.following { background:#3ddc8422; color:var(--green); border:1px solid #3ddc8455; }
  /* ---------- Rank system ---------- */
  .rankopt {
    display:flex; align-items:center; gap:13px; background:var(--card2); border:1.5px solid #ffffff12;
    border-radius:15px; padding:13px 15px; margin-bottom:10px; cursor:pointer;
    transition:border-color .2s, transform .15s; animation:pop .25s ease;
  }
  .rankopt:active { transform:scale(.97); border-color:var(--accent); }
  .rankopt .ro-ic { font-size:21px; width:34px; height:34px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .rankopt .ro-ic.adminstyle { color:#b89bff; background:#9b7bff1f; animation:admstar 3s ease infinite; }
  .rankopt .ro-ic.amateurstyle { color:#3ddc84; background:#3ddc841f; animation:ncpblink 2.4s ease infinite; }
  .rankopt .ro-t { flex:1; }
  .rankopt .ro-t b { font-size:14px; letter-spacing:1px; }
  .rankopt .ro-t p { font-size:11px; color:var(--muted); margin-top:2px; }
  .rankopt .ro-mark { font-size:17px; color:var(--green); }
  .rankbtn {
    padding:8px 14px; border-radius:99px; border:none; cursor:pointer; font-family:inherit; flex-shrink:0;
    background:linear-gradient(120deg,var(--accent),var(--accent2)); background-size:200% 100%;
    color:#fff; font-size:11px; font-weight:800; animation:editflow 4s linear infinite;
    box-shadow:0 3px 10px #7c5cff44; transition:transform .15s;
  }
  .rankbtn:active { transform:scale(.92); }
  /* amateur badge (green) */
  .amateurbadge {
    position:relative; display:inline-flex; align-items:center; gap:5px; margin-top:8px;
    background:linear-gradient(110deg,#0d3322,#14543a 40%,#0d3322);
    border:1px solid #3ddc8499; border-radius:99px; padding:4px 13px 4px 11px;
    font-size:11px; font-weight:800; color:#9af0c5; letter-spacing:1.5px;
    text-shadow:0 1px 4px #000; box-shadow:0 0 14px #3ddc8433, inset 0 1px 0 #ffffff18; overflow:hidden;
  }
  .amateurbadge::after {
    content:''; position:absolute; top:0; bottom:0; width:30px;
    background:linear-gradient(100deg, transparent, #ffffff33, transparent);
    transform:skewX(-20deg); animation:ownersheen 3.4s ease-in-out infinite;
  }
  .amateurbadge .gstar { font-size:11px; animation:ncpblink 2.2s ease infinite; display:inline-block; }
  .amateurbadge.mini { margin-top:0; padding:2px 8px 2px 7px; font-size:9px; letter-spacing:1px; }
  /* get-tag icon animation */
  .gettag-ic .gt-tag { transform-origin:12px 12px; animation:gtswing 2.6s ease infinite; }
  @keyframes gtswing { 0%,100% { transform:rotate(0);} 30% { transform:rotate(-9deg);} 60% { transform:rotate(7deg);} }
  .gettag-ic .gt-spark { transform-origin:19px 6.3px; animation:startwinkle2 2.2s ease infinite; }
  /* ---------- Pretty prev-episodes modal ---------- */
  .pv-modal { text-align:center; }
  .pv-emoji-wrap { position:relative; display:inline-block; margin-bottom:8px; }
  .pv-emoji { font-size:46px; display:inline-block; animation:pvthink 2.4s ease-in-out infinite; transform-origin:bottom center; }
  @keyframes pvthink {
    0%,100% { transform:rotate(0); }
    25% { transform:rotate(-8deg) translateY(-2px); }
    55% { transform:rotate(6deg); }
    75% { transform:rotate(-3deg); }
  }
  .pv-q {
    position:absolute; font-weight:900; color:var(--accent); opacity:0; pointer-events:none;
    text-shadow:0 0 8px #7c5cff66;
  }
  .pv-q.q1 { top:-8px; left:-14px; font-size:19px; animation:pvqfloat 2.4s ease infinite; }
  .pv-q.q2 { top:-2px; right:-16px; font-size:14px; color:var(--accent2); text-shadow:0 0 8px #ff5c8a66; animation:pvqfloat 2.4s ease 1.2s infinite; }
  @keyframes pvqfloat {
    0% { opacity:0; transform:translateY(4px) scale(.5) rotate(-10deg); }
    30% { opacity:1; transform:translateY(-4px) scale(1.1) rotate(8deg); }
    65% { opacity:.6; transform:translateY(-10px) scale(.9) rotate(-5deg); }
    100% { opacity:0; transform:translateY(-16px) scale(.5); }
  }
  .pv-text {
    font-size:15.5px; font-weight:800; line-height:2;
    background:linear-gradient(110deg, var(--text) 25%, var(--accent) 45%, var(--accent2) 55%, var(--text) 75%);
    background-size:280% 100%;
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    animation:titleflow 6s linear infinite;
  }
  .pv-sub {
    font-size:12px; color:var(--muted); margin-top:8px;
    background:var(--card2); border-radius:99px; padding:6px 16px; display:inline-block;
  }
  .pv-yes {
    display:flex; align-items:center; justify-content:center; gap:9px;
    width:100%; padding:15px; border-radius:16px; border:none; cursor:pointer; margin-top:18px;
    background:linear-gradient(120deg, var(--accent), var(--accent2), #ff8a4d, var(--accent));
    background-size:300% 100%; animation:editflow 4s linear infinite, pvyesin .5s cubic-bezier(.18,1.5,.4,1) .1s backwards;
    color:#fff; font-size:14.5px; font-weight:800; font-family:inherit;
    box-shadow:0 6px 20px #7c5cff55; position:relative; overflow:hidden;
    transition:transform .15s;
  }
  .pv-yes:active { transform:scale(.96); }
  .pv-yes::after {
    content:''; position:absolute; top:-4px; bottom:-4px; width:20px;
    background:linear-gradient(100deg, transparent, #ffffff66, transparent);
    transform:skewX(-20deg); animation:logosheen 2.6s ease-in-out infinite;
  }
  .pv-yes-ic { width:24px; height:24px; border-radius:50%; background:#ffffff2e; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
  .pv-yes-ic svg { width:14px; height:14px; }
  .pv-yes-ic svg path { animation:draw .5s ease .5s forwards; }
  @keyframes pvyesin { from { opacity:0; transform:translateY(14px) scale(.9); } to { opacity:1; transform:translateY(0) scale(1); } }
  .pv-no {
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; padding:13px; border-radius:15px; cursor:pointer; margin-top:10px;
    background:var(--card2); border:1.5px solid #ffffff18; color:var(--text);
    font-size:13.5px; font-weight:bold; font-family:inherit;
    animation:pvyesin .5s cubic-bezier(.18,1.5,.4,1) .2s backwards;
    transition:transform .15s, border-color .2s;
  }
  .pv-no:active { transform:scale(.96); border-color:var(--accent); }
  .pv-no-ic { display:inline-block; animation:pvtarget 2.2s ease infinite; }
  @keyframes pvtarget { 0%,100% { transform:scale(1);} 50% { transform:scale(1.2) rotate(8deg);} }
  .pv-cancel {
    width:100%; padding:11px; border:none; background:transparent; color:var(--muted);
    font-size:12.5px; cursor:pointer; font-family:inherit; margin-top:6px;
    animation:pvyesin .5s ease .3s backwards;
  }
  .pv-cancel:active { color:var(--text); }
  /* ---------- Ban ---------- */
  .ban-ic .bn-hammer { transform-origin:16px 14px; animation:bnswing 2.4s ease infinite; }
  @keyframes bnswing {
    0%, 50%, 100% { transform:rotate(0); }
    58% { transform:rotate(-28deg); }
    68% { transform:rotate(8deg); }
    74% { transform:rotate(-4deg); }
    80% { transform:rotate(0); }
  }
  .banwrap { background:linear-gradient(110deg,#ff5c5c,#ff8a4d,#ff5c8a,#ff5c5c); background-size:300% 100%; animation:editflow 5s linear infinite; box-shadow:0 6px 24px #ff5c5c33; }
  .banbtn {
    padding:8px 14px; border-radius:99px; border:none; cursor:pointer; font-family:inherit; flex-shrink:0;
    background:linear-gradient(120deg,#ff5c5c,#ff8a4d); color:#fff; font-size:11px; font-weight:800;
    box-shadow:0 3px 10px #ff5c5c44; transition:transform .15s;
  }
  .banbtn:active { transform:scale(.92); }
  .banbtn.banned { background:#3ddc8422; color:var(--green); border:1px solid #3ddc8455; box-shadow:none; }
  .bannedchip {
    display:inline-flex; align-items:center; gap:4px; font-size:9px; font-weight:800; letter-spacing:1px;
    background:#ff5c5c22; color:#ff7b7b; border:1px solid #ff5c5c55; border-radius:99px; padding:2px 8px;
  }
  /* comment delete btn */
  .cmt-acts button.del { color:#ff7b7b; }
  /* ---------- Custom cast in add form ---------- */
  .castadd-row { display:flex; gap:8px; align-items:center; }
  .castadd-row input { padding:10px 12px; border-radius:11px; border:1px solid #ffffff14; background:var(--card2); color:var(--text); font-size:13px; outline:none; font-family:inherit; min-width:0; }
  .castadd-row input:focus { border-color:var(--accent); }
  .castadd-ph {
    width:42px; height:42px; border-radius:50%; flex-shrink:0; cursor:pointer;
    background:var(--card2); background-size:cover; background-position:center;
    border:1.5px dashed #ffffff30; display:flex; align-items:center; justify-content:center; font-size:16px;
    transition:border-color .2s;
  }
  .castadd-ph.haspic { border-style:solid; border-color:var(--accent); }
  .ccaddbtn { width:42px; height:42px; flex-shrink:0; padding:0 !important; font-size:19px; border-radius:11px !important;
    background:linear-gradient(135deg,var(--accent),#9b7bff) !important; color:#fff !important; border:none !important; }
  .cc-chip {
    display:inline-flex; align-items:center; gap:7px; background:var(--card2); border:1px solid #7c5cff44;
    border-radius:99px; padding:4px 11px 4px 5px; margin:0 0 8px 6px; font-size:11.5px; animation:pop .25s ease;
  }
  .cc-chip .ccp { width:26px; height:26px; border-radius:50%; background:var(--card); background-size:cover; background-position:center;
    display:inline-flex; align-items:center; justify-content:center; font-size:11px; }
  .cc-chip button { background:transparent; border:none; color:#ff7b7b; font-size:12px; cursor:pointer; padding:0 2px; }
  /* ---------- Mobile / responsive polish ---------- */
  @media (max-width:380px) {
    .epbig { font-size:18px; }
    .poster { width:92px; min-height:136px; }
    .statcard { min-width:135px; }
    .nc-grid { grid-template-columns:repeat(5,1fr); }
    .castgrid { grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); }
    .p-name { font-size:18px; }
    .ep-thumb { width:82px; height:54px; }
    .ep-meta .en { font-size:15px; }
  }
  @media (min-width:700px) {
    #list, .mgrid, #profileContent, header, .d-body, #exploreResults { max-width:680px; margin-left:auto; margin-right:auto; }
    .mgrid { grid-template-columns:repeat(4,1fr); }
  }
  button, input, select, textarea { touch-action:manipulation; }
  /* ---------- Chat tab icon ---------- */
  .chatwrap { position:relative; }
  .icon-chat .ch-b1 { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linejoin:round; }
  .icon-chat .ch-b2 { fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; opacity:.55; }
  .icon-chat .ch-dot { fill:transparent; }
  button.active .icon-chat .ch-b1 { stroke:#9b7bff; }
  button.active .icon-chat .ch-b2 { stroke:#ff5c8a; opacity:1; animation:chbubble 2.2s ease infinite; transform-origin:15px 13px; }
  button.active .icon-chat .ch-dot { fill:#9b7bff; animation:chtype 1.2s ease infinite; }
  button.active .icon-chat .ch-dot.d2 { animation-delay:.2s; }
  button.active .icon-chat .ch-dot.d3 { animation-delay:.4s; }
  @keyframes chtype { 0%,100% { opacity:.3; transform:translateY(0);} 40% { opacity:1; transform:translateY(-1.4px);} }
  @keyframes chbubble { 0%,100% { transform:scale(1);} 50% { transform:scale(1.08) translateY(-.6px);} }
  .chatbadge {
    position:absolute; top:-4px; left:-5px; min-width:15px; height:15px; padding:0 4px;
    background:#ff3b30; color:#fff; font-size:9px; font-weight:800; border-radius:99px;
    display:flex; align-items:center; justify-content:center; border:1.5px solid #101018;
  }
  header h1 .logo.chatlogo { background:linear-gradient(135deg,#3ddc84,#4dc9ff); background-size:200% 200%; box-shadow:0 4px 14px #3ddc8455; animation:logogradient 4s ease infinite; }
  /* chat list rows */
  .chatrow {
    display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid #ffffff0d;
    border-radius:16px; padding:12px 14px; margin-bottom:10px; cursor:pointer; animation:pop .25s ease;
    transition:border-color .2s, transform .12s;
  }
  .chatrow:active { transform:scale(.98); border-color:#7c5cff55; }
  .chatrow .cr-last { font-size:11.5px; color:var(--muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:200px; }
  .chatrow .cr-unread {
    min-width:20px; height:20px; padding:0 6px; background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:#fff; font-size:10px; font-weight:800; border-radius:99px; display:flex; align-items:center; justify-content:center;
  }
  /* conversation */
  .convo-head {
    position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:11px;
    padding:14px 16px; background:var(--bg); border-bottom:1px solid #ffffff10;
  }
  .convo-name { min-width:0; }
  .convo-name b { font-size:15px; display:block; }
  .convo-name span { font-size:10px; color:var(--muted); }
  .convo-msgs { padding:16px 14px 90px; display:flex; flex-direction:column; gap:8px; min-height:55vh; }
  .msg {
    max-width:78%; padding:10px 14px; border-radius:17px; font-size:13.5px; line-height:1.9;
    word-break:break-word; animation:msgin .25s cubic-bezier(.18,1.3,.4,1);
    position:relative;
  }
  @keyframes msgin { from { opacity:0; transform:translateY(8px) scale(.95);} to { opacity:1; transform:translateY(0) scale(1);} }
  .msg.mine {
    align-self:flex-start; background:linear-gradient(135deg,var(--accent),#9b7bff); color:#fff;
    border-bottom-left-radius:5px; box-shadow:0 3px 12px #7c5cff44;
  }
  html[dir="ltr"] .msg.mine { align-self:flex-end; border-radius:17px; border-bottom-right-radius:5px; }
  .msg.theirs { align-self:flex-end; background:var(--card2); border:1px solid #ffffff10; border-bottom-right-radius:5px; }
  html[dir="ltr"] .msg.theirs { align-self:flex-start; border-radius:17px; border-bottom-left-radius:5px; }
  .msg .mwhen { display:block; font-size:9px; opacity:.6; margin-top:3px; }
  .convo-inputbar {
    position:fixed; bottom:0; right:0; left:0; z-index:6; display:flex; gap:8px; align-items:flex-end;
    padding:10px 12px 14px; background:#101018f2; backdrop-filter:blur(14px); border-top:1px solid #ffffff10;
  }
  body.light .convo-inputbar { background:#fffffff2; border-top-color:#00000012; }
  .convo-inputbar textarea {
    flex:1; min-height:44px; max-height:110px; padding:11px 14px; border-radius:14px;
    border:1px solid #ffffff14; background:var(--card2); color:var(--text);
    font-size:13.5px; outline:none; font-family:inherit; resize:none;
  }
  .convo-inputbar textarea:focus { border-color:var(--accent); }
  /* ---------- Chat requests ---------- */
  .reqbtn { background:linear-gradient(135deg,#7c5cff22,#ff5c8a18); border-color:#7c5cff55; }
  .reqbtn .req-ic { display:inline-block; animation:reqswing 2.6s ease infinite; }
  @keyframes reqswing {
    0%, 55%, 100% { transform:rotate(0) translateY(0); }
    62% { transform:rotate(-10deg) translateY(-2px); }
    72% { transform:rotate(8deg); }
    82% { transform:rotate(-4deg); }
    90% { transform:rotate(0); }
  }
  .reqrow {
    display:flex; align-items:center; gap:11px; background:var(--card2); border:1px solid #ffffff10;
    border-radius:15px; padding:12px 13px; margin-bottom:9px; animation:pop .3s cubic-bezier(.18,1.4,.4,1);
    transition:transform .4s, opacity .4s, border-color .3s;
  }
  .reqrow.accepted { border-color:#3ddc8488; background:#3ddc8414; transform:translateX(-14px); opacity:0; }
  .reqrow.rejected { border-color:#ff5c5c66; transform:translateX(14px) scale(.92); opacity:0; }
  html[dir="ltr"] .reqrow.accepted { transform:translateX(14px); }
  html[dir="ltr"] .reqrow.rejected { transform:translateX(-14px) scale(.92); }
  .req-accept, .req-reject {
    width:40px; height:40px; border-radius:13px; border:none; cursor:pointer; font-size:16px; font-weight:800;
    flex-shrink:0; transition:transform .15s; font-family:inherit;
  }
  .req-accept { background:linear-gradient(135deg,var(--green),#28b46a); color:#fff; box-shadow:0 3px 12px #3ddc8444; animation:reqpulse 2s ease infinite; }
  @keyframes reqpulse { 0%,100% { box-shadow:0 3px 10px #3ddc8444;} 50% { box-shadow:0 3px 18px #3ddc8488;} }
  .req-reject { background:#ff5c5c22; color:#ff7b7b; border:1px solid #ff5c5c44; }
  .req-accept:active, .req-reject:active { transform:scale(.85); }
  .followbtn.pending { background:#ffb74d22; color:#ffb74d; border:1px solid #ffb74d55; box-shadow:none; }
  .followbtn.addanim { position:relative; overflow:hidden; }
  .followbtn.addanim::after {
    content:''; position:absolute; top:-4px; bottom:-4px; width:16px;
    background:linear-gradient(100deg, transparent, #ffffff55, transparent);
    transform:skewX(-20deg); animation:logosheen 2.4s ease-in-out infinite;
  }
  .followbtn.sent { background:#3ddc8422 !important; color:var(--green) !important; border:1px solid #3ddc8455; }
  .followbtn .fly { display:inline-block; animation:flyaway .9s cubic-bezier(.4,-0.2,.6,1.2); }
  @keyframes flyaway {
    0% { transform:translate(0,0) scale(1); }
    40% { transform:translate(-7px,-9px) scale(1.25) rotate(-15deg); }
    70% { transform:translate(4px,-4px) scale(1.05) rotate(8deg); }
    100% { transform:translate(0,0) scale(1); }
  }
  /* ---------- Refresh button ---------- */
  .refreshbtn { display:inline-flex; align-items:center; justify-content:center; }
  .refreshbtn .rf-svg { width:21px; height:21px; overflow:visible; }
  .refreshbtn .rf-svg { animation:rfidle 5s ease infinite; transform-origin:center; }
  @keyframes rfidle {
    0%, 78%, 100% { transform:rotate(0); }
    86% { transform:rotate(-25deg); }
    93% { transform:rotate(370deg); }
  }
  .refreshbtn .rf-dot { animation:ncpblink 2.2s ease infinite; }
  .refreshbtn.spinning .rf-svg { animation:rfspin .8s linear infinite; }
  @keyframes rfspin { to { transform:rotate(360deg); } }
  .refreshbtn.spinning { background:linear-gradient(135deg,#7c5cff22,#ff5c8a18); border-color:#7c5cff66; box-shadow:0 0 12px #7c5cff44; }
  /* ---------- Remember me & policy checkboxes ---------- */
  .authcheck {
    display:flex; align-items:center; gap:10px; margin-bottom:12px; cursor:pointer; user-select:none;
    padding:11px 13px; background:var(--card2); border:1.5px solid #ffffff12; border-radius:13px;
    transition:border-color .25s, background .25s; font-size:12.5px;
  }
  .authcheck.on { border-color:#7c5cff66; background:#7c5cff12; }
  .authcheck .acbox {
    width:23px; height:23px; border-radius:8px; border:2px solid #ffffff33; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; transition:background .25s, border-color .25s, transform .2s;
    position:relative;
  }
  .authcheck.on .acbox {
    background:linear-gradient(135deg,var(--accent),var(--accent2)); border-color:transparent;
    animation:popcheck .45s cubic-bezier(.18,1.6,.4,1);
  }
  .authcheck.on .acbox::after {
    content:''; position:absolute; inset:-2px; border-radius:8px;
    border:2px solid var(--accent); animation:ripple .5s ease forwards;
  }
  .authcheck .acbox svg { width:13px; height:13px; }
  .authcheck .acbox svg path { stroke:#fff; stroke-width:3.6; fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:30; stroke-dashoffset:30; }
  .authcheck.on .acbox svg path { animation:draw .3s ease .1s forwards; }
  .authcheck .ac-emoji { display:inline-block; font-size:15px; }
  .authcheck.on .ac-emoji { animation:emobounce 1.6s ease infinite; }
  .authcheck .policy-link { color:#4dc9ff; text-decoration:underline; cursor:pointer; font-weight:bold; }
  .authcheck .policy-link:active { color:#8ce0ff; }
  /* policy page */
  .policy-rule {
    display:flex; gap:13px; background:var(--card); border:1px solid #ffffff0d; border-radius:16px;
    padding:15px 16px; margin-bottom:11px; animation:sectionrise .5s cubic-bezier(.18,1.3,.4,1) backwards;
  }
  .policy-rule:nth-child(1){ animation-delay:.05s; } .policy-rule:nth-child(2){ animation-delay:.13s; }
  .policy-rule:nth-child(3){ animation-delay:.21s; } .policy-rule:nth-child(4){ animation-delay:.29s; }
  .policy-rule:nth-child(5){ animation-delay:.37s; }
  .policy-rule .pr-ic { font-size:24px; flex-shrink:0; margin-top:2px; }
  .policy-rule .pr-t b { font-size:14px; display:block; margin-bottom:4px; }
  .policy-rule .pr-t p { font-size:12.5px; color:var(--muted); line-height:2; }
  /* ---------- Cover animations (10 effects) ---------- */
  .cov-ic { display:inline-block; animation:covspin 4s linear infinite; }
  @keyframes covspin { 0%,70%,100% { transform:rotate(0);} 78% { transform:rotate(180deg);} 86% { transform:rotate(360deg);} }
  .cova-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
  .cova-opt {
    border:1.5px solid #ffffff14; border-radius:13px; padding:11px 8px; text-align:center; cursor:pointer;
    background:var(--card2); transition:border-color .2s, transform .12s; font-size:12px; font-weight:bold;
  }
  .cova-opt:active { transform:scale(.95); }
  .cova-opt.sel { border-color:var(--accent); background:#7c5cff18; box-shadow:0 0 12px #7c5cff33; }
  .cova-opt .ca-emo { font-size:19px; display:block; margin-bottom:4px; }
  /* ---------- Themed cover FX overlays ---------- */
  .covfx { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1; }
  /* CYBERPUNK: scanlines + glitch + neon bars */
  .fx-cyber .cy-scan {
    position:absolute; inset:0;
    background:repeating-linear-gradient(0deg, transparent 0 3px, #00ffe122 3px 4.5px);
    animation:cyscan 6s linear infinite;
  }
  @keyframes cyscan { from { background-position:0 0; } to { background-position:0 60px; } }
  .fx-cyber .cy-glitch { position:absolute; inset:0; background:linear-gradient(90deg, #ff00aa22, transparent 30%, transparent 70%, #00ffe122); mix-blend-mode:screen; animation:cyglitch 3.2s steps(1) infinite; }
  @keyframes cyglitch {
    0%, 88%, 100% { transform:translateX(0); opacity:.5; }
    90% { transform:translateX(-6px) skewX(-4deg); opacity:1; }
    92% { transform:translateX(5px) skewX(3deg); opacity:.8; }
    94% { transform:translateX(-2px); opacity:1; }
    96% { transform:translateX(0); opacity:.5; }
  }
  .fx-cyber .cy-neon { position:absolute; height:3.5px; border-radius:99px; }
  .fx-cyber .cy-neon.n1 { bottom:14px; right:8%; width:34%; background:#ff2db1; box-shadow:0 0 12px #ff2db1; animation:cyneon 2.4s ease infinite; }
  .fx-cyber .cy-neon.n2 { bottom:7px; right:18%; width:20%; background:#00ffe1; box-shadow:0 0 12px #00ffe1; animation:cyneon 2.4s ease 1.2s infinite; }
  @keyframes cyneon { 0%,100% { opacity:1; } 45% { opacity:.25; } 55% { opacity:.9; } 65% { opacity:.3; } 75% { opacity:1; } }
  /* RING: glowing golden ring + floating runes */
  .fx-ring .rg-ring {
    position:absolute; top:50%; left:50%; width:88px; height:88px; margin:-44px 0 0 -44px;
    border-radius:50%; border:3.5px solid #ffd76a;
    box-shadow:0 0 22px #ffae00cc, inset 0 0 14px #ffae0088;
    animation:rgfloat 5s ease-in-out infinite;
  }
  @keyframes rgfloat {
    0%,100% { transform:translateY(0) rotateX(58deg); box-shadow:0 0 18px #ffae00aa, inset 0 0 10px #ffae0066; }
    50% { transform:translateY(-12px) rotateX(58deg); box-shadow:0 0 30px #ffae00ee, inset 0 0 18px #ffae00aa; }
  }
  .fx-ring .rg-glow { position:absolute; top:50%; left:50%; width:120px; height:34px; margin:14px 0 0 -60px; border-radius:50%; background:radial-gradient(ellipse, #ffae0033, transparent 70%); animation:rgglow 5s ease-in-out infinite; }
  @keyframes rgglow { 0%,100% { opacity:.6; transform:scaleX(1);} 50% { opacity:1; transform:scaleX(.8);} }
  .fx-ring .rg-rune { position:absolute; color:#ffd76a; text-shadow:0 0 8px #ffae00; font-size:13px; opacity:0; animation:rgrune 4.2s ease infinite; }
  .fx-ring .rg-rune.r1 { left:24%; top:60%; } .fx-ring .rg-rune.r2 { left:68%; top:55%; animation-delay:1.4s; } .fx-ring .rg-rune.r3 { left:46%; top:70%; animation-delay:2.8s; }
  @keyframes rgrune { 0% { opacity:0; transform:translateY(8px) rotate(-8deg);} 30% { opacity:1; } 70% { opacity:.5; transform:translateY(-16px) rotate(8deg);} 100% { opacity:0; transform:translateY(-26px);} }
  /* SWORDS: diagonal slash flashes + sparks */
  .fx-swords .sw-slash {
    position:absolute; top:-20%; height:140%; width:4.5px;
    background:linear-gradient(180deg, transparent, #ffffffee 30%, #cfe8ff 50%, #ffffffee 70%, transparent);
    box-shadow:0 0 14px #cfe8ff; transform:rotate(35deg); opacity:0;
  }
  .fx-swords .sw-slash.s1 { left:30%; animation:swslash 3.4s ease-in infinite; }
  .fx-swords .sw-slash.s2 { left:62%; transform:rotate(-32deg); animation:swslash 3.4s ease-in 1.7s infinite; }
  @keyframes swslash {
    0%, 70%, 100% { opacity:0; }
    72% { opacity:1; transform:rotate(35deg) translateX(-30px) scaleY(.4); }
    76% { opacity:1; transform:rotate(35deg) translateX(28px) scaleY(1.05); }
    82% { opacity:0; transform:rotate(35deg) translateX(46px) scaleY(1); }
  }
  .fx-swords .sw-slash.s2 { animation-name:swslash2; }
  @keyframes swslash2 {
    0%, 70%, 100% { opacity:0; }
    72% { opacity:1; transform:rotate(-32deg) translateX(30px) scaleY(.4); }
    76% { opacity:1; transform:rotate(-32deg) translateX(-28px) scaleY(1.05); }
    82% { opacity:0; transform:rotate(-32deg) translateX(-46px) scaleY(1); }
  }
  .fx-swords .sw-spark { position:absolute; color:#fff; font-size:15px; opacity:0; text-shadow:0 0 8px #cfe8ff; }
  .fx-swords .sw-spark.p1 { left:38%; top:42%; animation:swspark 3.4s ease infinite; }
  .fx-swords .sw-spark.p2 { left:58%; top:52%; animation:swspark 3.4s ease 1.7s infinite; }
  @keyframes swspark { 0%,72%,100% { opacity:0; transform:scale(.3);} 76% { opacity:1; transform:scale(1.5) rotate(40deg);} 84% { opacity:0; transform:scale(.4) rotate(90deg);} }
  /* SAKURA: falling petals */
  .fx-sakura .sk-petal { position:absolute; top:-16px; animation:skfall 7s linear infinite; opacity:.9; }
  @keyframes skfall {
    0% { transform:translateY(0) translateX(0) rotate(0); opacity:0; }
    8% { opacity:.95; }
    50% { transform:translateY(70px) translateX(-16px) rotate(160deg); }
    100% { transform:translateY(150px) translateX(10px) rotate(330deg); opacity:0; }
  }
  /* RAIN */
  .fx-rain .rn-drop {
    position:absolute; top:-22px; width:1.6px; height:15px; border-radius:99px;
    background:linear-gradient(180deg, transparent, #9fc8ffcc); animation:rnfall 1s linear infinite;
  }
  @keyframes rnfall { 0% { transform:translateY(0); opacity:0; } 12% { opacity:.85; } 100% { transform:translateY(165px); opacity:.15; } }
  /* SNOW */
  .fx-snow .sn-flake { position:absolute; top:-16px; color:#fff; text-shadow:0 0 5px #ffffff88; animation:snfall 8s linear infinite; }
  @keyframes snfall {
    0% { transform:translateY(0) translateX(0) rotate(0); opacity:0; }
    10% { opacity:.95; }
    50% { transform:translateY(70px) translateX(13px) rotate(180deg); }
    100% { transform:translateY(150px) translateX(-9px) rotate(360deg); opacity:0; }
  }
  /* EMBERS: rising fire sparks */
  .fx-embers .em-spark {
    position:absolute; bottom:-6px; border-radius:50%;
    background:radial-gradient(circle, #ffe680, #ff8a2d);
    box-shadow:0 0 10px #ff8a2d; animation:emrise 3.3s ease-in infinite;
  }
  @keyframes emrise {
    0% { transform:translateY(0) translateX(0) scale(1); opacity:0; }
    12% { opacity:1; }
    60% { transform:translateY(-78px) translateX(9px) scale(.7); opacity:.8; }
    100% { transform:translateY(-150px) translateX(-7px) scale(.25); opacity:0; }
  }
  .fx-embers .em-glow { position:absolute; bottom:0; left:0; right:0; height:36px; background:linear-gradient(0deg, #ff5c1a2e, transparent); animation:emglow 2.2s ease infinite; }
  @keyframes emglow { 0%,100% { opacity:.7; } 50% { opacity:1; } }
  /* GALAXY: twinkling stars + comet */
  .fx-galaxy .gx-star { position:absolute; width:2.5px; height:2.5px; border-radius:50%; background:#fff; box-shadow:0 0 6px #cfe8ff; animation:gxtwinkle 3.4s ease infinite; }
  @keyframes gxtwinkle { 0%,100% { opacity:.15; transform:scale(.6);} 50% { opacity:1; transform:scale(1.35);} }
  .fx-galaxy .gx-comet {
    position:absolute; top:22%; left:-12%; width:54px; height:2px; border-radius:99px;
    background:linear-gradient(90deg, transparent, #fff); box-shadow:0 0 10px #cfe8ff;
    transform:rotate(-14deg); animation:gxcomet 7s ease-in infinite;
  }
  @keyframes gxcomet {
    0%, 76%, 100% { left:-15%; top:20%; opacity:0; }
    78% { opacity:1; }
    92% { left:115%; top:55%; opacity:0; }
  }
  /* THUNDER: lightning flash + bolt */
  .fx-thunder .th-flash { position:absolute; inset:0; background:#dfe9ff; opacity:0; animation:thflash 5.2s steps(1) infinite; }
  @keyframes thflash {
    0%, 85.5%, 100% { opacity:0; }
    86% { opacity:.55; } 87% { opacity:0; } 88.5% { opacity:.8; } 89.5% { opacity:.1; } 90.5% { opacity:.4; } 92% { opacity:0; }
  }
  .fx-thunder .th-bolt { position:absolute; top:6%; left:58%; width:24px; height:42px; opacity:0; filter:drop-shadow(0 0 9px #fff7cc); animation:thbolt 5.2s steps(1) infinite; }
  @keyframes thbolt { 0%, 86%, 100% { opacity:0; } 88.5% { opacity:1; } 91% { opacity:0; } }
  /* MATRIX: falling code columns */
  .fx-matrix { background:#03180a33; }
  .fx-matrix .mx-col {
    position:absolute; top:-110px; writing-mode:vertical-rl; font-size:9.5px; letter-spacing:2px;
    color:#3dff84; text-shadow:0 0 8px #3dff84; font-weight:800; opacity:.95;
    animation:mxfall 2.8s linear infinite;
  }
  @keyframes mxfall { 0% { transform:translateY(0); opacity:0; } 10% { opacity:.85; } 90% { opacity:.5; } 100% { transform:translateY(290px); opacity:0; } }
  /* ---------- Desktop compatibility ---------- */
  @media (min-width:900px) {
    body { padding-bottom:0; padding-right:230px; }
    html[dir="ltr"] body { padding-right:0; padding-left:230px; }
    .bottomnav {
      top:0; bottom:0; right:0; left:auto; width:230px; flex-direction:column; justify-content:flex-start;
      padding:26px 14px; gap:6px; border-top:none; border-left:1px solid #ffffff10;
    }
    html[dir="ltr"] .bottomnav { right:auto; left:0; border-left:none; border-right:1px solid #ffffff10; }
    body.light .bottomnav { border-color:#00000012; }
    .bottomnav button { flex:0 0 auto; flex-direction:row; gap:12px; padding:13px 16px; border-radius:14px; font-size:14px; justify-content:flex-start; }
    .bottomnav button.active { background:#7c5cff1c; }
    .bottomnav button::before { display:none; }
    .fab { left:auto; right:260px; bottom:34px; }
    html[dir="ltr"] .fab { right:auto; left:260px; }
    #list, .mgrid, #profileContent, header, .d-body, #exploreResults, #chatList, .convo-msgs, .achtop, #followPage > div, .fv-grid, #friendView .p-section { max-width:760px; margin-left:auto; margin-right:auto; }
    .mgrid { grid-template-columns:repeat(5,1fr); }
    .convo-inputbar { right:230px; left:0; }
    html[dir="ltr"] .convo-inputbar { right:0; left:230px; }
    .convo-inputbar > * { max-width:760px; }
    .convo-inputbar { justify-content:center; }
    .convo-inputbar textarea { max-width:660px; }
    .modal-bg { align-items:center; }
    .modal { border-radius:24px; max-width:480px; max-height:84vh; }
    .overlaypage { padding-right:230px; }
    html[dir="ltr"] .overlaypage { padding-right:0; padding-left:230px; }
    .checkcircle:hover, .smallbtn:hover, .tab:hover, .coveropt:hover, .followbtn:hover, .rankbtn:hover, .banbtn:hover { filter:brightness(1.15); cursor:pointer; }
    .card:hover { border-color:#7c5cff44; }
    .hposter:hover .img { transform:scale(1.04); border-color:#7c5cff66; }
  }
  .p-hero-in { position:relative; z-index:2; display:flex; align-items:center; gap:14px; }
  .p-avatar {
    width:84px; height:84px; border-radius:50%; border:3px solid transparent; background:var(--card2);
    background-size:cover; background-position:center; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:36px; cursor:pointer;
    box-shadow:0 6px 20px #00000077; position:relative; z-index:1;
  }
  /* rotating gradient ring around profile avatar */
  .p-avatar-ring {
    position:relative; width:92px; height:92px; flex-shrink:0; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    animation:avatarentrance .6s cubic-bezier(.18,1.5,.4,1);
  }
  @keyframes avatarentrance { from { opacity:0; transform:scale(.6) rotate(-15deg); } to { opacity:1; transform:scale(1) rotate(0); } }
  .p-avatar-ring::before {
    content:''; position:absolute; inset:0; border-radius:50%; padding:3px;
    background:conic-gradient(from 0deg, var(--accent), var(--accent2), #ffd54d, #4dc9ff, var(--accent));
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    animation:ringrotate 5s linear infinite;
  }
  @keyframes ringrotate { to { transform:rotate(360deg); } }
  .p-avatar-ring::after {
    content:''; position:absolute; inset:-7px; border-radius:50%;
    border:1.5px dashed #7c5cff55; animation:ringrotate 14s linear infinite reverse;
  }
  .p-namebox { animation:nameslide .55s cubic-bezier(.18,1.4,.4,1) .1s backwards; }
  @keyframes nameslide { from { opacity:0; transform:translateX(14px); } to { opacity:1; transform:translateX(0); } }
  html[dir="ltr"] @keyframes nameslide { from { opacity:0; transform:translateX(-14px); } }
  .p-name {
    font-size:21px; font-weight:800; color:#fff; text-shadow:0 2px 8px #000;
    background:linear-gradient(110deg, #fff 30%, #d4c4ff 45%, #ffb8cf 55%, #fff 70%);
    background-size:280% 100%;
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    animation:titleflow 6s linear infinite;
  }
  .p-editbtn {
    position:relative; margin-top:8px; padding:6px 20px; border-radius:99px; border:none;
    color:#fff; font-size:12px; font-weight:800; letter-spacing:1.5px; cursor:pointer; font-family:inherit;
    background:linear-gradient(120deg, var(--accent), var(--accent2), #ff8a4d, var(--accent));
    background-size:300% 100%;
    animation:editflow 4s linear infinite;
    box-shadow:0 3px 14px #7c5cff55;
    overflow:hidden; display:inline-flex; align-items:center; gap:6px;
    transition:transform .15s;
  }
  .p-editbtn:active { transform:scale(.92); }
  @keyframes editflow { 0% { background-position:0% 0; } 100% { background-position:300% 0; } }
  /* sheen sweep */
  .p-editbtn::after {
    content:''; position:absolute; top:-4px; bottom:-4px; width:18px;
    background:linear-gradient(100deg, transparent, #ffffff77, transparent);
    transform:skewX(-20deg); animation:logosheen 2.6s ease-in-out infinite;
  }
  /* wiggling pencil */
  .p-editbtn .editpen { display:inline-block; font-size:12px; animation:penwrite 2.2s ease infinite; transform-origin:bottom left; }
  @keyframes penwrite {
    0%, 55%, 100% { transform:rotate(0) translate(0,0); }
    62% { transform:rotate(-12deg) translate(-1px,.5px); }
    70% { transform:rotate(4deg) translate(1px,-.5px); }
    78% { transform:rotate(-9deg) translate(-.5px,.5px); }
    86% { transform:rotate(0) translate(0,0); }
  }
  .p-follow { display:flex; border-bottom:1px solid #ffffff12; animation:sectionrise .45s cubic-bezier(.18,1.3,.4,1) backwards; }
  .p-follow div {
    flex:1; text-align:center; padding:14px 4px; border-left:1px solid #ffffff12; cursor:pointer;
    transition:background .25s; position:relative; overflow:hidden;
  }
  .p-follow div:last-child { border-left:none; }
  .p-follow div:active { background:#7c5cff14; }
  /* count-up pop on profile load */
  .p-follow b { animation:countpop .55s cubic-bezier(.18,1.8,.4,1) backwards; }
  .p-follow div:nth-child(1) b { animation-delay:.15s; }
  .p-follow div:nth-child(2) b { animation-delay:.25s; }
  .p-follow div:nth-child(3) b { animation-delay:.35s; }
  @keyframes countpop { from { opacity:0; transform:scale(.3); } to { opacity:1; transform:scale(1); } }
  .p-follow b { font-size:20px; display:block; }
  .p-follow span { font-size:11.5px; color:var(--muted); }
  .p-section { padding:18px 16px 0; animation:sectionrise .5s cubic-bezier(.18,1.3,.4,1) backwards; }
  .p-section:nth-of-type(1) { animation-delay:.05s; } .p-section:nth-of-type(2) { animation-delay:.1s; }
  .p-section:nth-of-type(3) { animation-delay:.15s; } .p-section:nth-of-type(4) { animation-delay:.2s; }
  .p-section:nth-of-type(5) { animation-delay:.25s; } .p-section:nth-of-type(6) { animation-delay:.3s; }
  .p-section:nth-of-type(7) { animation-delay:.35s; } .p-section:nth-of-type(8) { animation-delay:.4s; }
  @keyframes sectionrise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
  /* floating sparkles over the hero */
  .p-hero .sparkle {
    position:absolute; pointer-events:none; z-index:3; font-size:10px; color:#ffffffaa;
    animation:heroSparkle 4s ease-in-out infinite;
    text-shadow:0 0 8px #fff;
  }
  .p-hero .sparkle.s2 { font-size:7px; animation-delay:1.3s; color:#ffd54daa; text-shadow:0 0 8px #ffd54d; }
  .p-hero .sparkle.s3 { font-size:8px; animation-delay:2.6s; color:#ff5c8aaa; text-shadow:0 0 8px #ff5c8a; }
  @keyframes heroSparkle {
    0%, 100% { opacity:0; transform:translateY(0) scale(.5); }
    20% { opacity:1; transform:translateY(-6px) scale(1); }
    45% { opacity:.6; transform:translateY(-12px) scale(.8) rotate(40deg); }
    70% { opacity:0; transform:translateY(-20px) scale(.4); }
  }
  .p-section h3 { font-size:17px; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
  /* animated shimmer on section titles (stats, friends, watchlist, ...) */
  .p-section h3, #cmtTitle, .achtop h2 {
    background:linear-gradient(110deg, var(--text) 25%, var(--accent) 42%, var(--accent2) 50%, var(--text) 68%);
    background-size:280% 100%;
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    animation:titleflow 6s linear infinite;
  }
  .p-section:nth-child(odd) h3 { animation-delay:1.2s; }
  /* follow-bar labels shimmer + count pulse */
  .p-follow span {
    background:linear-gradient(110deg, var(--muted) 30%, var(--accent) 48%, var(--muted) 65%);
    background-size:300% 100%;
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    animation:titleflow 7s linear infinite;
  }
  .p-follow div:nth-child(2) span { animation-delay:1s; }
  .p-follow div:nth-child(3) span { animation-delay:2s; }
  .p-follow b { transition:transform .2s; }
  .p-follow div:active b { transform:scale(1.25); }
  /* ====== Section icons (colorful animated SVGs) ====== */
  .sic { width:26px; height:26px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
    border-radius:8px; }
  .sic svg { width:25px; height:25px; overflow:visible; }
  /* watchlist clock: ticking hand */
  .sic-clock .ck-face { fill:#ffb74d22; stroke:#ffb74d; stroke-width:1.7; }
  .sic-clock .ck-hand { stroke:#ffd54d; stroke-width:1.8; stroke-linecap:round; transform-origin:12px 12px; animation:cktick 4s linear infinite; }
  .sic-clock .ck-hand2 { stroke:#ff8a4d; stroke-width:1.6; stroke-linecap:round; transform-origin:12px 12px; animation:cktick 48s linear infinite; }
  @keyframes cktick { to { transform:rotate(360deg); } }
  /* watching: TV with pulsing play */
  .sic-play .pl-tv { fill:#7c5cff22; stroke:#9b7bff; stroke-width:1.7; }
  .sic-play .pl-tri { fill:#ff5c8a; transform-origin:12px 13.2px; animation:plpulse 1.6s ease infinite; }
  @keyframes plpulse { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.25); opacity:.75; } }
  /* favorites: beating heart */
  .sic-heart path { fill:#ff5c8a; transform-origin:12px 12px; animation:heartbeat 1.4s ease infinite; filter:drop-shadow(0 0 4px #ff5c8a66); }
  @keyframes heartbeat { 0%,100% { transform:scale(1);} 12% { transform:scale(1.22);} 24% { transform:scale(1);} 36% { transform:scale(1.12);} 48% { transform:scale(1);} }
  /* completed: medal with drawing check */
  .sic-done .dn-circle { fill:#3ddc8422; stroke:#3ddc84; stroke-width:1.7; }
  .sic-done .dn-check { stroke:#3ddc84; stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round;
    stroke-dasharray:16; animation:dncheck 2.6s ease infinite; }
  @keyframes dncheck { 0% { stroke-dashoffset:16; } 30%,80% { stroke-dashoffset:0; } 100% { stroke-dashoffset:-16; } }
  /* movies: clapper that claps */
  .sic-clap .scl-bottom { fill:#ff8a4d22; stroke:#ff8a4d; stroke-width:1.6; }
  .sic-clap .scl-top { fill:#ff5c8a33; stroke:#ff5c8a; stroke-width:1.6; transform-origin:4px 9.5px; animation:sclclap 2.6s cubic-bezier(.6,-0.3,.3,1.4) infinite; }
  @keyframes sclclap { 0%,55%,100% { transform:rotate(0);} 65% { transform:rotate(-20deg);} 75% { transform:rotate(0);} 81% { transform:rotate(-8deg);} 87% { transform:rotate(0);} }
  /* settings: spinning gear */
  .sic-gear svg { animation:gearspin 6s linear infinite; }
  .sic-gear .gr-body { fill:#4dc9ff22; stroke:#4dc9ff; stroke-width:1.5; }
  .sic-gear .gr-core { fill:#0f0f1a; stroke:#9b7bff; stroke-width:1.6; }
  @keyframes gearspin { to { transform:rotate(360deg); } }
  /* friends: two bobbing people */
  .sic-pals .pal1 { fill:#9b7bff; animation:palbob 2.2s ease infinite; }
  .sic-pals .pal2 { fill:#ff5c8a; animation:palbob 2.2s ease .5s infinite; }
  @keyframes palbob { 0%,100% { transform:translateY(0);} 50% { transform:translateY(-1.6px);} }
  /* language pill: waving flags */
  .pillswitch button .langflag { display:inline-block; animation:flagwave 2.4s ease infinite; }
  .pillswitch button:nth-child(2) .langflag { animation-delay:.6s; }
  @keyframes flagwave { 0%,100% { transform:rotate(0) translateY(0);} 25% { transform:rotate(-10deg) translateY(-1px);} 60% { transform:rotate(8deg);} }
  .pillswitch button.active .langflag { animation:flagparty 1.4s ease infinite; }
  @keyframes flagparty { 0%,100% { transform:scale(1) rotate(0);} 30% { transform:scale(1.2) rotate(-12deg);} 65% { transform:scale(1.1) rotate(10deg);} }
  /* stat card icons: smaller */
  .statcard .h .sic { width:20px; height:20px; }
  .statcard .h .sic svg { width:19px; height:19px; }
  /* chart: bars grow in waves */
  .sic-chart .bar { transform-origin:center 20px; }
  .sic-chart .b1 { fill:#7c5cff; animation:bargrow 2.2s ease infinite; }
  .sic-chart .b2 { fill:#ff5c8a; animation:bargrow 2.2s ease .25s infinite; }
  .sic-chart .b3 { fill:#ffd54d; animation:bargrow 2.2s ease .5s infinite; }
  @keyframes bargrow { 0%,100% { transform:scaleY(1);} 40% { transform:scaleY(.55);} 70% { transform:scaleY(1.08);} }
  /* timer (stopwatch): hand sweeps, body ticks */
  .sic-timer .tm-top { stroke:#4dc9ff; stroke-width:2; }
  .sic-timer .tm-face { fill:#4dc9ff1f; stroke:#4dc9ff; stroke-width:1.7; }
  .sic-timer .tm-hand { stroke:#9b7bff; stroke-width:1.9; stroke-linecap:round; transform-origin:12px 13.5px; animation:cktick 3s linear infinite; }
  .sic-timer svg { transform-origin:center; animation:tmshake 3s ease infinite; }
  @keyframes tmshake { 0%,88%,100% { transform:rotate(0);} 92% { transform:rotate(-6deg);} 96% { transform:rotate(5deg);} }
  /* finish flag: waving cloth */
  .sic-flag .fl-pole { stroke:#9b7bff; stroke-width:1.9; }
  .sic-flag .fl-cloth { fill:#3ddc84; transform-origin:7px 8px; animation:clothwave 2.4s ease-in-out infinite; }
  @keyframes clothwave { 0%,100% { transform:skewY(0) scaleX(1);} 30% { transform:skewY(-3.5deg) scaleX(1.04);} 65% { transform:skewY(3deg) scaleX(.97);} }
  /* flame: flickering fire */
  .sic-flame .fm-out { fill:#ff8a4d; transform-origin:12px 20px; animation:flameflick 1.1s ease-in-out infinite; }
  .sic-flame .fm-in { fill:#ffd54d; transform-origin:12px 20px; animation:flameflick 1.1s ease-in-out .18s infinite; }
  @keyframes flameflick {
    0%,100% { transform:scaleY(1) scaleX(1); }
    30% { transform:scaleY(1.08) scaleX(.95) translateY(-.4px); }
    60% { transform:scaleY(.94) scaleX(1.05); }
    80% { transform:scaleY(1.05) scaleX(.97); }
  }
  .p-section h3 .more { margin-right:auto; font-size:12px; color:var(--muted); font-weight:normal; }
  .statcards { display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; }
  .statcard {
    min-width:150px; flex:1; background:var(--card); border:1px solid #ffffff0d; border-radius:14px; overflow:hidden;
  }
  .statcard .h { padding:9px 12px; border-bottom:1px solid #ffffff0d; font-size:12px; display:flex; align-items:center; gap:6px;
    background:linear-gradient(110deg, var(--muted) 30%, var(--accent) 48%, var(--muted) 65%);
    background-size:300% 100%;
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    animation:titleflow 7s linear infinite;
  }
  .statcard:nth-child(2) .h { animation-delay:.8s; }
  .statcard:nth-child(3) .h { animation-delay:1.6s; }
  .statcard:nth-child(4) .h { animation-delay:2.4s; }
  .statcard:nth-child(5) .h { animation-delay:3.2s; }
  .statcard .b { padding:14px 12px; display:flex; gap:14px; justify-content:center; }
  .statcard .b .u { text-align:center; }
  .statcard .b .u b { font-size:22px; display:block; }
  .statcard .b .u span { font-size:9.5px; color:var(--muted); letter-spacing:.5px; }
  .hrow { display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch; }
  .hposter {
    width:96px; flex-shrink:0; cursor:pointer; position:relative;
  }
  .hposter .img {
    width:96px; height:136px; border-radius:12px; background:var(--card2); background-size:cover; background-position:center top;
    border:1px solid #ffffff12; display:flex; align-items:center; justify-content:center; font-size:26px; position:relative; overflow:hidden;
    transition:transform .2s, box-shadow .25s, border-color .25s;
  }
  .hposter:active .img { transform:scale(.93) rotate(-1.5deg); box-shadow:0 6px 18px #7c5cff44; border-color:#7c5cff66; }
  .addchip { transition:transform .2s, border-color .25s, color .25s; animation:addpulse 2.4s ease infinite; }
  .addchip:active { transform:scale(.9); }
  .hposter .img .ov {
    position:absolute; bottom:0; right:0; left:0; padding:3px 6px; font-size:9.5px; text-align:center;
    background:linear-gradient(0deg,#000000dd,transparent); color:#fff;
  }
  .hposter .img .donechip {
    position:absolute; top:5px; left:5px; width:20px; height:20px; border-radius:50%;
    background:var(--green); color:#06281a; font-size:11px; display:flex; align-items:center; justify-content:center; font-weight:bold;
  }
  .hposter .nm2 { font-size:10.5px; color:var(--muted); margin-top:5px; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .addchip {
    width:96px; height:136px; flex-shrink:0; border-radius:12px; border:1.5px dashed #ffffff30; background:transparent;
    color:var(--muted); font-size:26px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  /* friends */
  .friendrow { display:flex; gap:12px; overflow-x:auto; padding-bottom:4px; }
  .friendchip { text-align:center; cursor:pointer; flex-shrink:0; width:72px; }
  .friendchip .av {
    width:62px; height:62px; margin:0 auto; border-radius:50%; background:var(--card2); background-size:cover; background-position:center;
    border:2px solid var(--accent); display:flex; align-items:center; justify-content:center; font-size:26px;
    transition:transform .2s, box-shadow .25s;
  }
  .friendchip:active .av { transform:scale(.9); }
  .friendchip:nth-child(odd) .av { animation:palfloat 3.2s ease-in-out infinite; }
  .friendchip:nth-child(even) .av { animation:palfloat 3.2s ease-in-out 1.6s infinite; }
  @keyframes palfloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }
  .addfriend .av { animation:addpulse 2.4s ease infinite !important; }
  @keyframes addpulse {
    0%,100% { border-color:#ffffff35; box-shadow:none; }
    50% { border-color:var(--accent); box-shadow:0 0 12px #7c5cff55; }
  }
  .friendchip .fn { font-size:10.5px; margin-top:5px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .addfriend .av { border-style:dashed; border-color:#ffffff35; color:var(--muted); }
  /* achievements */
  .achgrid { display:flex; flex-direction:column; gap:10px; }
  .ach {
    display:flex; gap:13px; align-items:center; background:var(--card); border:1px solid #ffffff0d;
    border-radius:15px; padding:12px 14px;
  }
  .ach .ic2 {
    width:52px; height:52px; border-radius:14px; font-size:26px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,#ffd00033,#ff8a0033); border:1px solid #ffd00055;
  }
  .ach.locked .ic2 { background:#ffffff08; border-color:#ffffff15; filter:grayscale(1); opacity:.6; }
  .ach .tt { flex:1; min-width:0; }
  .ach .tt b { font-size:14.5px; display:flex; align-items:center; gap:6px; }
  .ach .tt p { font-size:11.5px; color:var(--muted); margin-top:3px; line-height:1.7; }
  .ach .achbar { height:4px; background:#ffffff12; border-radius:99px; margin-top:7px; overflow:hidden; }
  .ach .achbar .f { height:100%; background:linear-gradient(90deg,var(--gold),#ff8a00); border-radius:99px; }
  .ach .pct2 { font-size:11px; color:var(--muted); flex-shrink:0; }
  .ach.unlocked .pct2 { color:var(--gold); font-weight:bold; }
  .settingsrow { display:flex; gap:8px; flex-wrap:wrap; }
  /* ---------- Modal ---------- */
  .modal-bg {
    position:fixed; inset:0; background:#000000aa; z-index:100; display:none;
    align-items:flex-end; justify-content:center; backdrop-filter:blur(3px);
  }
  .modal-bg.show { display:flex; }
  .modal {
    background:var(--card); width:100%; max-width:520px; max-height:92vh; overflow-y:auto;
    border-radius:24px 24px 0 0; padding:20px 18px 30px; animation:slideup .28s ease;
  }
  @keyframes slideup { from { transform:translateY(60px); opacity:0;} to { transform:translateY(0); opacity:1;} }
  .modal h2 { font-size:17px; margin-bottom:16px; display:flex; align-items:center; justify-content:space-between; }
  .modal .close { background:#ffffff12; border:none; color:var(--muted); width:30px; height:30px; border-radius:9px; font-size:15px; cursor:pointer; }
  .field { margin-bottom:14px; }
  .field label { display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
  .field input, .field select, .field textarea {
    width:100%; padding:11px 12px; border-radius:12px; border:1px solid #ffffff14;
    background:var(--card2); color:var(--text); font-size:14px; outline:none; font-family:inherit;
  }
  .field input:focus, .field select:focus, .field textarea:focus { border-color:var(--accent); }
  .row2 { display:flex; gap:10px; }
  .row2 .field { flex:1; }
  .seg { display:flex; background:var(--card2); border-radius:12px; padding:4px; gap:4px; margin-bottom:14px; }
  .seg button {
    flex:1; padding:9px 4px; border-radius:9px; border:none; background:transparent; color:var(--muted);
    font-size:13px; cursor:pointer; font-family:inherit;
  }
  .seg button.active { background:linear-gradient(135deg,var(--accent),#9b7bff); color:#fff; font-weight:bold; }
  .imgpick { display:flex; gap:12px; align-items:center; }
  .imgprev {
    width:80px; height:110px; border-radius:12px; background:var(--card2); border:1px dashed #ffffff30;
    background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center;
    font-size:26px; color:var(--muted); flex-shrink:0; cursor:pointer;
  }
  .imgbtns { display:flex; flex-direction:column; gap:8px; flex:1; }
  .smallbtn {
    padding:9px 12px; border-radius:10px; border:1px solid #ffffff18; background:var(--card2);
    color:var(--text); font-size:12.5px; cursor:pointer; font-family:inherit; text-align:center;
  }
  .smallbtn:active { background:#ffffff18; }
  .primary {
    width:100%; padding:14px; border-radius:14px; border:none; cursor:pointer; margin-top:6px;
    background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; font-size:15px; font-weight:bold; font-family:inherit;
  }
  .primary:active { transform:scale(.98); }
  .danger { background:#ff5c5c22 !important; color:#ff7b7b !important; border-color:#ff5c5c44 !important; }
  .checkrow { display:flex; align-items:center; gap:10px; background:var(--card2); border-radius:12px; padding:12px; margin-bottom:14px; cursor:pointer; border:1px solid #ffffff14; }
  .checkrow input { width:20px; height:20px; accent-color:var(--accent); }
  .checkrow span { font-size:14px; }
  /* ---------- API search ---------- */
  .api-results { display:flex; flex-direction:column; gap:8px; margin-top:10px; max-height:46vh; overflow-y:auto; }
  .api-item {
    display:flex; gap:10px; background:var(--card2); border-radius:12px; padding:8px; cursor:pointer;
    border:1px solid transparent; align-items:center;
  }
  .api-item:active { border-color:var(--accent); }
  .api-item img { width:48px; height:66px; object-fit:cover; border-radius:8px; background:#000; flex-shrink:0; }
  .api-item .t { font-size:13px; font-weight:bold; line-height:1.4; }
  .api-item .s { font-size:11px; color:var(--muted); margin-top:2px; }
  .loader { text-align:center; color:var(--muted); padding:16px; font-size:13px; }
  .spin { display:inline-block; animation:spin 1s linear infinite; }
  @keyframes spin { to { transform:rotate(360deg);} }
  #toast {
    position:fixed; bottom:100px; left:50%; transform:translateX(-50%); z-index:600;
    background:#2a2a44; color:#fff; padding:10px 20px; border-radius:99px; font-size:13px;
    opacity:0; transition:opacity .3s; pointer-events:none; border:1px solid #ffffff20; white-space:nowrap;
    box-shadow:0 6px 20px #00000066; max-width:92vw; overflow:hidden; text-overflow:ellipsis;
  }
  #toast.show { opacity:1; }
  .modal-bg.center { align-items:center; padding:20px; }
  .modal-bg.center .modal { border-radius:22px; max-width:380px; animation:pop .2s ease; }
  /* ---------- Detail page ---------- */
  .overlaypage {
    position:fixed; inset:0; background:var(--bg); z-index:90; display:none; overflow-y:auto;
    animation:slidein .25s ease; padding-bottom:40px;
  }
  .overlaypage.show { display:block; }
  @keyframes slidein { from { transform:translateX(-30px); opacity:0;} to { transform:translateX(0); opacity:1;} }
  .d-hero { position:relative; height:300px; overflow:hidden; }
  .d-bg { position:absolute; inset:-20px; background-size:cover; background-position:center; filter:blur(18px) brightness(.45); transform:scale(1.15); }
  .d-hero-content { position:relative; z-index:2; display:flex; gap:16px; align-items:flex-end; padding:60px 18px 18px; height:100%; }
  .d-cover {
    width:130px; height:185px; border-radius:14px; background:var(--card2); background-size:cover; background-position:center;
    flex-shrink:0; box-shadow:0 10px 30px #00000088; border:1px solid #ffffff22;
    display:flex; align-items:center; justify-content:center; font-size:40px; cursor:pointer;
  }
  .d-titlebox { padding-bottom:6px; min-width:0; }
  .d-titlebox h2 { font-size:19px; line-height:1.5; word-break:break-word; text-shadow:0 2px 10px #000; }
  .d-titlebox .sub { font-size:12px; color:#ffffffcc; margin-top:4px; text-shadow:0 1px 6px #000; }
  .d-back, .d-editbtn, .d-favbtn {
    position:absolute; top:14px; z-index:5; width:38px; height:38px; border-radius:12px;
    background:#00000066; backdrop-filter:blur(8px); border:1px solid #ffffff22;
    color:#fff; font-size:17px; cursor:pointer;
  }
  .d-back { right:14px; }
  .d-editbtn { left:14px; }
  .d-favbtn { left:60px; }
  .d-body { padding:16px 16px 60px; }
  .d-progress-card { background:var(--card); border-radius:16px; padding:14px 16px; border:1px solid #ffffff0d; margin-bottom:16px; }
  .d-progress-card .top { display:flex; justify-content:space-between; align-items:center; font-size:13px; margin-bottom:10px; }
  .d-progress-card .top b { color:var(--accent); font-size:16px; }
  .progress-bar { height:5px; background:#ffffff12; border-radius:99px; overflow:hidden; }
  .progress-fill { height:100%; background:linear-gradient(90deg,var(--accent),var(--accent2)); border-radius:99px; transition:width .4s; }
  .d-section-title { font-size:14px; font-weight:bold; margin:18px 2px 10px; display:flex; align-items:center; justify-content:space-between; }
  .d-section-title .hint { font-size:11px; color:var(--muted); font-weight:normal; }
  .eps-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(64px, 1fr)); gap:8px; }
  .ep-chip {
    background:var(--card); border:1.5px solid #ffffff14; border-radius:13px;
    padding:10px 4px 8px; text-align:center; cursor:pointer; position:relative;
    transition:border-color .2s, background .25s, transform .1s;
  }
  .ep-chip:active { transform:scale(.92); }
  .ep-chip .num { font-size:13px; font-weight:bold; }
  .ep-chip .circ {
    width:24px; height:24px; margin:6px auto 0; border-radius:50%;
    border:2px solid #7c5cff77; display:flex; align-items:center; justify-content:center;
    transition:background .25s, border-color .25s;
  }
  .ep-chip .circ svg { width:13px; height:13px; }
  .ep-chip .circ svg path { stroke:#fff; stroke-width:4; fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:30; stroke-dashoffset:30; }
  .ep-chip.watched { background:#3ddc8414; border-color:#3ddc8455; }
  .ep-chip.watched .num { color:var(--green); }
  .ep-chip.watched .circ { background:linear-gradient(135deg,var(--green),#28b46a); border-color:transparent; }
  .ep-chip.watched .circ svg path { stroke-dashoffset:0; }
  .ep-chip.justnow .circ { animation:popcheck .45s cubic-bezier(.18,1.6,.4,1); }
  .ep-chip.justnow .circ svg path { stroke-dashoffset:30; animation:draw .3s ease .1s forwards; }
  .ep-chip.justnow::after {
    content:''; position:absolute; inset:0; border-radius:13px;
    border:2px solid var(--green); animation:ripple2 .5s ease forwards; pointer-events:none;
  }
  @keyframes ripple2 { 0% { transform:scale(1); opacity:.8;} 100% { transform:scale(1.25); opacity:0;} }
  .addmore { grid-column:1/-1; }
  /* ---------- Detail tabs (About / Episodes) ---------- */
  .dtabs { display:flex; border-bottom:1.5px solid #ffffff14; margin-bottom:14px; }
  .dtab {
    flex:1; padding:12px 4px; background:transparent; border:none; color:var(--muted);
    font-size:14px; font-weight:bold; cursor:pointer; font-family:inherit; position:relative;
    letter-spacing:.3px;
  }
  .dtab.active { color:var(--text); }
  .dtab.active::after {
    content:''; position:absolute; bottom:-1.5px; right:20%; left:20%; height:3px;
    background:linear-gradient(90deg,var(--accent),var(--accent2)); border-radius:99px;
  }
  body.light .dtabs { border-bottom-color:#00000014; }
  /* ---------- Episode list (TVTime style rows) ---------- */
  .alleps-head { display:flex; align-items:center; padding:4px 2px 12px; }
  .alleps-head b { font-size:17px; }
  .season-card {
    background:var(--card); border:1px solid #ffffff0d; border-radius:15px;
    margin-bottom:10px; overflow:hidden;
  }
  body.light .season-card { border-color:#00000010; }
  .season-top {
    display:flex; align-items:center; gap:10px; padding:13px 14px; cursor:pointer; user-select:none;
  }
  .season-top b { font-size:16px; font-weight:800; }
  .season-top .schev { color:var(--muted); font-size:15px; margin-top:-3px; }
  .season-top .sprog { margin-right:auto; font-size:13px; color:var(--muted); font-weight:bold; }
  html[dir="ltr"] .season-top .sprog { margin-right:0; margin-left:auto; }
  .season-bar { height:4.5px; background:#ffffff10; }
  .season-bar .f { height:100%; background:linear-gradient(90deg,var(--gold),#ffaa00); transition:width .4s, background .4s; box-shadow:0 0 8px #ffd00066; }
  .season-bar .f.full { background:linear-gradient(90deg,var(--green),#28b46a) !important; box-shadow:0 0 8px #3ddc8466 !important; }
  body.light .season-bar { background:#00000010; }
  .abscode { font-size:9.5px; color:var(--muted); font-weight:normal; }
  .ep-row2 {
    display:flex; align-items:center; gap:11px; background:var(--card);
    border:1px solid #ffffff0d; border-radius:14px; padding:9px 10px; margin-bottom:8px;
    animation:pop .2s ease;
  }
  body.light .ep-row2 { border-color:#00000010; }
  .ep-thumb {
    width:96px; height:62px; border-radius:9px; flex-shrink:0; background:var(--card2);
    background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center;
    font-size:18px; color:var(--muted); overflow:hidden; position:relative;
  }
  .ep-thumb .locked { position:absolute; inset:0; background:#00000088; display:flex; align-items:center; justify-content:center; font-size:15px; }
  .ep-meta { flex:1; min-width:0; }
  .ep-meta .en { font-size:17px; color:var(--text); font-weight:800; letter-spacing:.3px; }
  .ep-meta .et { font-size:12px; color:var(--muted); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ep-row2.future { opacity:.55; }
  /* ---------- About tab ---------- */
  .about-block { background:var(--card); border:1px solid #ffffff0d; border-radius:16px; padding:15px 16px; margin-bottom:14px; }
  body.light .about-block { border-color:#00000010; }
  .about-block h4 { font-size:13.5px; margin-bottom:9px; display:flex; align-items:center; gap:7px; color:var(--accent); }
  .about-block p { font-size:13px; line-height:2; color:var(--text); }
  .about-meta { display:flex; flex-wrap:wrap; gap:8px; }
  .am-chip {
    background:var(--card2); border:1px solid #ffffff12; border-radius:99px; padding:6px 13px;
    font-size:11.5px; color:var(--text); display:flex; align-items:center; gap:5px;
  }
  body.light .am-chip { border-color:#00000012; }
  .am-chip b { color:var(--accent); }
  .nextair {
    background:linear-gradient(135deg,#7c5cff22,#ff5c8a14); border:1px solid #7c5cff44;
    border-radius:16px; padding:13px 16px; margin-bottom:14px; display:flex; align-items:center; gap:12px;
  }
  .nextair .na-ic { font-size:26px; }
  .nextair .na-t b { font-size:14px; display:block; }
  .nextair .na-t span { font-size:11.5px; color:var(--muted); }
  /* ---------- Cast grid ---------- */
  .castgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(86px,1fr)); gap:12px; }
  .castcard { text-align:center; cursor:pointer; position:relative; }
  .castcard .cph {
    width:68px; height:68px; margin:0 auto; border-radius:50%; background:var(--card2);
    background-size:cover; background-position:center; border:2.5px solid transparent;
    display:flex; align-items:center; justify-content:center; font-size:26px;
    transition:border-color .2s, transform .15s;
  }
  .castcard:active .cph { transform:scale(.93); }
  .castcard.voted .cph { border-color:var(--gold); box-shadow:0 0 14px #ffd00055; }
  .castcard .cn { font-size:10.5px; font-weight:bold; margin-top:6px; line-height:1.5; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .castcard .cr { font-size:9.5px; color:var(--muted); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .castcard .cpct {
    margin-top:4px; font-size:10px; color:var(--gold); font-weight:bold;
    background:#ffd00014; border-radius:99px; padding:2px 0;
  }
  .castcard .cpct.zero { color:var(--muted); background:#ffffff08; opacity:.7; }
  body.light .castcard .cpct.zero { background:#00000008; }
  .castcard .cstar {
    position:absolute; top:-4px; right:50%; margin-right:-38px; font-size:16px;
    filter:drop-shadow(0 1px 3px #000); animation:popcheck .4s cubic-bezier(.18,1.6,.4,1);
  }
  /* ---------- Owner badge (crown) ---------- */
  .ownerbadge {
    position:relative; display:inline-flex; align-items:center; gap:6px; margin-top:8px;
    background:linear-gradient(110deg,#3a2a00,#5e4400 40%,#3a2a00);
    border:1px solid #ffd000aa;
    border-radius:99px; padding:4px 14px 4px 12px; font-size:11px; font-weight:800;
    color:#ffe680; letter-spacing:1.5px;
    text-shadow:0 1px 4px #000;
    box-shadow:0 0 16px #ffd00044, inset 0 1px 0 #ffffff22;
    overflow:hidden;
  }
  /* moving shine sweep */
  .ownerbadge::after {
    content:''; position:absolute; top:0; bottom:0; width:36px;
    background:linear-gradient(100deg, transparent, #ffffff55, transparent);
    transform:skewX(-20deg); animation:ownersheen 2.8s ease-in-out infinite;
  }
  @keyframes ownersheen { 0% { right:-50px; } 55%,100% { right:120%; } }
  .ownerbadge .ostar {
    position:relative; width:20px; height:20px; flex-shrink:0;
    display:inline-flex; align-items:center; justify-content:center;
    filter:drop-shadow(0 0 5px #ffd000cc);
    animation:ownerfloat 2.4s ease-in-out infinite;
  }
  .ownerbadge .ostar svg { width:20px; height:20px; }
  @keyframes ownerfloat { 0%,100% { transform:translateY(0) rotate(-4deg);} 50% { transform:translateY(-1.5px) rotate(4deg);} }
  /* sparkles around the crown */
  .ownerbadge .ostar::before, .ownerbadge .ostar::after {
    content:'✦'; position:absolute; color:#fff7cc; pointer-events:none;
  }
  .ownerbadge .ostar::before { font-size:7px; top:-4px; left:-3px; animation:sparkle 1.8s ease infinite; }
  .ownerbadge .ostar::after { font-size:5px; bottom:-3px; right:-3px; animation:sparkle 1.8s ease .9s infinite; }
  @keyframes sparkle { 0%,100% { opacity:0; transform:scale(.4);} 50% { opacity:1; transform:scale(1);} }
  .ownerbadge.mini { margin-top:0; padding:2px 9px 2px 7px; font-size:9px; letter-spacing:1px; }
  .ownerbadge.mini .ostar { width:14px; height:14px; }
  .ownerbadge.mini .ostar svg { width:14px; height:14px; }
  /* ---------- Comments ---------- */
  .ep-cmtbtn {
    width:34px; height:34px; border-radius:10px; border:none; background:#ffffff10;
    color:var(--muted); font-size:15px; cursor:pointer; flex-shrink:0; position:relative;
  }
  body.light .ep-cmtbtn { background:#00000010; }
  .ep-cmtbtn .ccount {
    position:absolute; top:-5px; left:-5px; min-width:16px; height:16px; padding:0 4px;
    background:var(--accent2); color:#fff; font-size:9px; font-weight:800;
    border-radius:99px; display:flex; align-items:center; justify-content:center;
  }
  .cmt {
    background:var(--card2); border:1px solid #ffffff10; border-radius:14px;
    padding:11px 13px; margin-bottom:10px; animation:pop .2s ease;
  }
  body.light .cmt { border-color:#00000010; }
  .cmt.reply { margin-right:34px; background:transparent; border-style:dashed; }
  html[dir="ltr"] .cmt.reply { margin-right:0; margin-left:34px; }
  .cmt-head { display:flex; align-items:center; gap:8px; }
  .cmt-av {
    width:30px; height:30px; border-radius:50%; background:var(--card); background-size:cover;
    background-position:center; display:flex; align-items:center; justify-content:center;
    font-size:13px; flex-shrink:0; border:1.5px solid #ffffff22;
  }
  .cmt-head b { font-size:12.5px; }
  .cmt-head .when { font-size:10px; color:var(--muted); margin-right:auto; }
  html[dir="ltr"] .cmt-head .when { margin-right:0; margin-left:auto; }
  .cmt-body { font-size:13px; line-height:1.9; margin-top:7px; word-break:break-word; }
  .cmt-img { max-width:100%; max-height:220px; border-radius:11px; margin-top:8px; display:block; cursor:pointer; }
  .cmt-acts { display:flex; gap:14px; margin-top:8px; }
  .cmt-acts button {
    background:transparent; border:none; color:var(--muted); font-size:11.5px; cursor:pointer;
    font-family:inherit; display:flex; align-items:center; gap:4px; padding:2px 0;
  }
  .cmt-acts button.liked { color:var(--accent2); font-weight:bold; }
  .cmt-input-row { display:flex; gap:8px; align-items:flex-end; margin-top:4px; }
  .cmt-input-row textarea {
    flex:1; min-height:42px; max-height:110px; padding:10px 12px; border-radius:13px;
    border:1px solid #ffffff14; background:var(--card2); color:var(--text);
    font-size:13px; outline:none; font-family:inherit; resize:none;
  }
  .cmt-input-row textarea:focus { border-color:var(--accent); }
  .cmt-tool {
    width:40px; height:42px; border-radius:12px; border:1px solid #ffffff14;
    background:var(--card2); color:var(--muted); font-size:16px; cursor:pointer; flex-shrink:0;
  }
  .cmt-send {
    width:44px; height:42px; border-radius:12px; border:none; flex-shrink:0;
    background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; font-size:16px; cursor:pointer;
  }
  .cmt-attach-prev { position:relative; width:70px; margin-bottom:8px; }
  .cmt-attach-prev img { width:70px; height:70px; object-fit:cover; border-radius:10px; }
  .cmt-attach-prev button {
    position:absolute; top:-6px; left:-6px; width:20px; height:20px; border-radius:50%;
    border:none; background:#ff5c5c; color:#fff; font-size:10px; cursor:pointer;
  }
  .replyhint {
    display:flex; align-items:center; gap:8px; background:#7c5cff18; border:1px solid #7c5cff44;
    border-radius:10px; padding:6px 11px; font-size:11px; margin-bottom:8px;
  }
  .replyhint button { margin-right:auto; background:transparent; border:none; color:var(--muted); cursor:pointer; font-size:12px; }
  html[dir="ltr"] .replyhint button { margin-right:0; margin-left:auto; }
  .moviewatch {
    width:100%; padding:16px; border-radius:16px; border:1.5px solid #7c5cff66; background:var(--card);
    color:var(--text); font-size:16px; font-weight:bold; cursor:pointer; font-family:inherit;
    display:flex; align-items:center; justify-content:center; gap:10px;
  }
  .moviewatch.seen { border-color:#3ddc8488; background:#3ddc8414; color:var(--green); }
  /* friend view */
  .fv-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:0 16px 40px; }
  /* confetti & banner */
  #confettiCanvas { position:fixed; inset:0; z-index:500; pointer-events:none; display:none; }
  #doneBanner {
    position:fixed; top:40%; left:50%; transform:translate(-50%,-50%) scale(.5); z-index:501;
    background:linear-gradient(135deg,#1a1a2eee,#23233cee); border:1px solid #3ddc8455;
    padding:26px 36px; border-radius:24px; text-align:center; opacity:0; pointer-events:none;
    transition:all .4s cubic-bezier(.18,1.6,.4,1); backdrop-filter:blur(10px);
    box-shadow:0 20px 60px #000000aa; max-width:86vw;
  }
  #doneBanner.show { opacity:1; transform:translate(-50%,-50%) scale(1); }
  #doneBanner .emoji { font-size:52px; display:block; margin-bottom:8px; animation:bounce 1s ease infinite; }
  #doneBanner .t1 { font-size:18px; font-weight:bold; color:var(--green); }
  #doneBanner .t2 { font-size:13px; color:var(--muted); margin-top:4px; }
  @keyframes bounce { 0%,100% { transform:translateY(0);} 50% { transform:translateY(-10px);} }
  /* ---------- Light theme ---------- */
  body.light { --bg:#f2f2f7; --card:#ffffff; --card2:#e9e9f2; --text:#16162a; --muted:#70708a; }
  body.light header { background:linear-gradient(180deg,#f2f2f7f2,#f2f2f7cc); border-bottom:1px solid #00000012; }
  body.light .card { background:#ffffff; border-color:#00000010; box-shadow:0 2px 10px #00000010; }
  body.light .name-pill { border-color:#00000066; color:#16162a; }
  body.light .bottomnav { background:#fffffff2; border-top:1px solid #00000012; }
  body.light .bottomnav button.active { color:var(--accent); }
  body.light .bottomnav button.active .ic { filter:none; }
  body.light .checkcircle { background:#ffffff; box-shadow:0 2px 10px #00000026; border:1px solid #00000014; }
  body.light .checkcircle.checked, body.light .checkcircle.green { background:linear-gradient(135deg,var(--green),#28b46a); border:none; }
  body.light #toast { background:#ffffff; color:#16162a; border-color:#00000018; }
  body.light .smallbtn { border-color:#00000016; }
  body.light .ep-chip { border-color:#00000012; }
  body.light .cardbar, body.light .progress-bar, body.light .achbar { background:#00000012; }
  body.light .stat, body.light .statcard, body.light .ach, body.light .ex-card, body.light .d-progress-card { border-color:#00000010; }
  body.light .searchbar input, body.light .field input, body.light .field select, body.light .field textarea { border-color:#00000014; }
  body.light .tab.active { background:#7c5cff18; }
  body.light .p-follow { border-bottom:1px solid #00000012; }
  body.light .p-follow div { border-left:1px solid #00000012; }
  body.light .hbtn { border-color:#00000018; }
  body.light .achtop { border-bottom:1px solid #00000012; }
  body.light .p-hero .bgshade { background:linear-gradient(180deg,#00000010 0%, #f2f2f744 55%, var(--bg) 100%); }
  body.light .card-menu { background:#00000010; color:#00000088; }
  /* ---------- Pill switches (theme/lang) ---------- */
  .pillswitch { display:flex; background:var(--card2); border-radius:99px; padding:4px; gap:4px; flex:1; }
  .pillswitch button {
    flex:1; padding:9px 6px; border-radius:99px; border:none; background:transparent; color:var(--muted);
    font-size:12.5px; cursor:pointer; font-family:inherit; display:flex; align-items:center; justify-content:center; gap:5px;
  }
  .pillswitch button.active { background:linear-gradient(135deg,var(--accent),#9b7bff); color:#fff; font-weight:bold; box-shadow:0 3px 10px #7c5cff44; }
  /* ---------- Achievements page ---------- */
  .achtop {
    position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:12px;
    padding:16px; background:var(--bg); border-bottom:1px solid #ffffff10;
  }
  .achtop h2 { font-size:18px; }
  .achtop .cnt { margin-right:auto; font-size:13px; color:var(--muted); }
  .fvachs { display:flex; gap:8px; flex-wrap:wrap; padding:12px 16px 0; }
  .fvach {
    display:flex; align-items:center; gap:6px; background:#ffd00014; border:1px solid #ffd00033;
    border-radius:99px; padding:5px 12px; font-size:11.5px; color:var(--gold);
  }

  /* Watchlist picker styles */
  .wl-pick-item {
    display:flex; align-items:center; gap:10px;
    padding:10px 12px; margin-bottom:6px;
    background:var(--card); border:1px solid #ffffff14; border-radius:12px;
    cursor:pointer; transition:all .2s;
  }
  .wl-pick-item:hover { background:#23233c; border-color:#7c5cff44; }
  .wl-pick-item.picked { background:#7c5cff18; border-color:#7c5cff66; }
  .wl-pick-check { font-size:18px; width:24px; text-align:center; flex-shrink:0; }
  .wl-pick-item.picked .wl-pick-check { color:var(--accent); }
  .wl-pick-info b { font-size:13px; display:block; }
  .wl-pick-info span { font-size:11px; color:var(--muted); }



  /* Guest lock animation */
  @keyframes lockbounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }


  /* Admin panel */
  .admin-row {
    display:flex; align-items:center; gap:10px;
    padding:10px 12px; margin-bottom:6px;
    background:var(--card); border:1px solid #ffffff10; border-radius:12px;
    transition:background .2s;
  }
  .admin-row:hover { background:#23233c; }
  .admin-row.banned { opacity:.5; border-color:#ff3b3044; }
  .admin-row .av {
    width:36px; height:36px; border-radius:10px;
    background:var(--card2); display:flex; align-items:center; justify-content:center;
    font-size:16px; flex-shrink:0; overflow:hidden;
  }
  .admin-row .av img { width:100%; height:100%; object-fit:cover; }
  .admin-row .info { flex:1; min-width:0; }
  .admin-row .info b { font-size:13px; display:block; }
  .admin-row .info span { font-size:11px; color:var(--muted); direction:ltr; display:inline-block; }
  .admin-row .actions { display:flex; gap:4px; flex-shrink:0; }
  .admin-row .act-btn {
    width:28px; height:28px; border-radius:8px; border:1px solid #ffffff18;
    background:var(--card2); color:var(--muted); font-size:12px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; transition:all .2s;
  }
  .admin-row .act-btn:hover { background:#7c5cff33; color:var(--accent); border-color:#7c5cff55; }
  .admin-row .act-btn.is-ban { color:#ff3b30; border-color:#ff3b3044; }
  .admin-row .act-btn.is-owner { background:#ffd00022; color:#ffd000; border-color:#ffd00055; }
  .admin-row .act-btn.is-admin { background:#7c5cff22; color:#7c5cff; border-color:#7c5cff55; }
  .tag-badge {
    display:inline-block; padding:1px 6px; border-radius:6px; font-size:9px; font-weight:700;
    margin-right:4px;
  }
  .tag-owner { background:#ffd00022; color:#ffd000; }
  .tag-admin { background:#7c5cff22; color:#7c5cff; }


/* ==================== ANNOUNCEMENT BANNER ==================== */
@keyframes slidedown { from { transform:translateY(-100%); opacity:0; } to { transform:translateY(0); opacity:1; } }
#announcementBanner { animation: slidedown .4s ease; }

/* ==================== RATING STARS ==================== */
#starRow button:hover { transform: scale(1.25); }

/* ==================== POSTER RATING BADGE ==================== */
.poster .rating-badge {
  position:absolute; bottom:5px; right:5px;
  background:#000000bb; border-radius:8px; padding:2px 6px;
  font-size:10px; color:#ffd54d; font-weight:800;
}

/* ==================== SITE VERSION CHIP ==================== */
.version-chip {
  background:var(--card2); border:1px solid #7c5cff44;
  border-radius:99px; padding:2px 10px;
  color:var(--accent); font-weight:800; font-size:11px;
}

/* ==================== SETUP OWNER BUTTON ==================== */
.setup-owner-btn {
  margin-top:6px; background:transparent;
  border:1px dashed #ffffff22; border-radius:8px;
  padding:3px 10px; color:var(--muted);
  font-size:9.5px; cursor:pointer; font-family:inherit;
}
.setup-owner-btn:hover { border-color:#7c5cff66; color:var(--accent); }