html[data-theme='dark']{--bg:15 15 20;--sf:23 23 30;--sf2:32 32 42;--ink:235 233 226;--mut:140 139 152;--linec:235 233 226}
  html[data-theme='light']{--bg:245 244 239;--sf:255 255 255;--sf2:238 237 229;--ink:23 22 27;--mut:108 107 117;--linec:23 22 27}
  html{scroll-behavior:smooth}
  body{font-family:'Karla',sans-serif;background:rgb(var(--bg));color:rgb(var(--ink));
       padding-top:64px;padding-bottom:0;user-select:none;-webkit-user-select:none;overflow-x:hidden}
  body.reader-mode, body.admin-mode{padding-top:0}
  body.has-dock{padding-bottom:78px}
  @media(min-width:768px){ body.has-dock{padding-bottom:0} }
  input,textarea,select{user-select:text;-webkit-user-select:text}
  ::selection{background:rgba(217,164,65,.3)}
  :focus-visible{outline:2px solid #d9a441;outline-offset:2px}

  #glow{position:fixed;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(600px 320px at 72% -80px, rgba(217,164,65,.16), transparent 70%);
    animation:breathe 9s ease-in-out infinite}
  html[data-theme='light'] #glow{opacity:.55}
  .rail{position:fixed;left:22px;top:50%;transform:translateY(-50%);z-index:5;display:none;flex-direction:column;align-items:center;gap:14px;pointer-events:none}
  @media(min-width:1200px){.rail{display:flex}}
  .rail b{display:block;width:5px;border-radius:99px;opacity:.5}
  .rail span{writing-mode:vertical-rl;font-family:'Syne';font-size:10px;letter-spacing:.5em;
    text-transform:uppercase;color:rgb(var(--mut));opacity:.65;margin-top:6px}
  body.reader-mode .rail, body.admin-mode .rail{opacity:0}

  #topbar{position:fixed;top:0;inset-inline:0;z-index:40;border-bottom:1px solid rgb(var(--linec)/.12);
    background:rgb(var(--bg)/.85);backdrop-filter:blur(10px)}
  body.reader-mode #topbar, body.admin-mode #topbar{display:none}
  body.reader-mode footer, body.admin-mode footer{display:none}
  body.reader-mode #bottomDock, body.admin-mode #bottomDock{display:none}

  .kicker{font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase}
  .btn-brand{display:inline-flex;align-items:center;gap:.5rem;background:#d9a441;color:#1c1405;
    font-weight:700;padding:.7rem 1.4rem;border-radius:999px;transition:.25s;
    box-shadow:0 6px 20px -8px rgba(217,164,65,.6);border:none;cursor:pointer}
  .btn-brand:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.06)}
  .btn-brand:disabled{opacity:.55;cursor:not-allowed}
  .btn-ghost{display:inline-flex;align-items:center;gap:.4rem;border:1px solid rgb(var(--linec)/.18);
    padding:.65rem 1.2rem;border-radius:999px;font-weight:700;font-size:.9rem;transition:.25s;
    background:transparent;color:rgb(var(--ink));cursor:pointer}
  .btn-ghost:hover:not(:disabled){border-color:#d9a441;color:#d9a441;transform:translateY(-1px)}
  .btn-mini{border:1px solid rgb(var(--linec)/.15);border-radius:8px;padding:.35rem .6rem;
    font-size:.78rem;font-weight:700;transition:.2s;background:transparent;color:rgb(var(--ink));cursor:pointer}
  .btn-mini:hover{border-color:#d9a441;color:#d9a441}
  .btn-danger{color:#e5484d}
  .chip{display:inline-flex;align-items:center;gap:.5rem;border:1px solid rgb(var(--linec)/.15);
    border-radius:999px;padding:.42rem .95rem;font-size:.85rem;font-weight:500;cursor:pointer;transition:.25s;background:transparent;color:rgb(var(--ink))}
  .chip:hover{border-color:rgb(var(--ink)/.4)}
  .chip.on{background:rgb(var(--ink));color:rgb(var(--bg));border-color:rgb(var(--ink))}
  .dot{width:8px;height:8px;border-radius:50%;flex:none}
  .seg{display:flex;background:rgb(var(--sf2));border-radius:999px;padding:4px;gap:2px}
  .seg button{padding:.35rem .85rem;border-radius:999px;font-size:.82rem;font-weight:700;
    color:rgb(var(--mut));transition:.2s;background:transparent;border:none;cursor:pointer}
  .seg button.on{background:rgb(var(--sf));color:rgb(var(--ink));box-shadow:0 2px 8px rgba(0,0,0,.15)}
  .field{width:100%;background:rgb(var(--sf2));border:1px solid rgb(var(--linec)/.14);border-radius:10px;
    padding:.65rem .9rem;font-size:.9rem;color:rgb(var(--ink));outline:none;transition:.2s}
  .field:focus{border-color:#d9a441;box-shadow:0 0 0 3px rgba(217,164,65,.22)}
  .flabel{display:block;font-size:.72rem;font-weight:700;letter-spacing:.12em;
    text-transform:uppercase;color:rgb(var(--mut));margin-bottom:.4rem}

  .badge{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;border-radius:999px}
  .badge i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
  .badge.ongoing{color:#f0a63b;background:rgba(240,166,59,.12)}
  .badge.ongoing i{animation:pulseDot 1.6s infinite}
  .badge.completed{color:#84c96a;background:rgba(119,178,85,.14)}
  .badge.admin{background:rgba(217,164,65,.15);color:#d9a441;letter-spacing:.16em}

  .cover{position:relative;aspect-ratio:3/4;border-radius:12px;overflow:hidden;
    background:radial-gradient(120% 80% at 82% -10%, rgba(255,255,255,.18), transparent 55%),
              linear-gradient(165deg, var(--g1) 0%, var(--g2) 55%, #0b0b11 100%);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.09), inset 0 -40px 60px -30px rgba(0,0,0,.7);
    transition:transform .5s cubic-bezier(.2,.8,.2,1)}
  .cover .glyph{position:absolute;top:15%;left:50%;transform:translateX(-50%);
    font-size:clamp(2.4rem,4vw,3.4rem);filter:drop-shadow(0 8px 16px rgba(0,0,0,.55));transition:transform .5s}
  .card:hover .cover .glyph{transform:translateX(-50%) translateY(-5px) rotate(-5deg)}
  .cv-foot{position:absolute;left:12px;right:12px;bottom:12px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.65)}
  .cv-status{position:absolute;top:10px;left:10px;display:flex;align-items:center;gap:5px;
    font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
    padding:3px 9px;border-radius:999px;background:rgba(8,8,12,.55);color:#fff;backdrop-filter:blur(3px)}
  .cv-status i{width:6px;height:6px;border-radius:50%;background:currentColor}
  .cv-status.ongoing{color:#ffcf7d}.cv-status.ongoing i{animation:pulseDot 1.6s infinite}
  .cv-status.completed{color:#b5e6a0}
  .cv-like{position:absolute;top:10px;right:10px;display:flex;align-items:center;gap:4px;
    font-size:10px;font-weight:700;padding:3px 8px;border-radius:999px;background:rgba(8,8,12,.55);color:#fff;backdrop-filter:blur(3px)}
  .cover-lg{aspect-ratio:3/4.1;border-radius:16px;animation:floaty 7s ease-in-out infinite}
  .card{display:block}
  .card:hover .cover{transform:translateY(-6px) rotate(-1deg)}
  .card-glow{position:absolute;inset:0;border-radius:12px;pointer-events:none;opacity:0;
    transition:opacity .4s;box-shadow:0 16px 40px -14px var(--gc)}
  .card:hover .card-glow{opacity:.6}
  .clamp1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  .clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

  #readerBar{position:fixed;top:0;inset-inline:0;z-index:50;background:rgb(var(--bg)/.92);
    backdrop-filter:blur(10px);border-bottom:1px solid rgb(var(--linec)/.12);transition:transform .35s}
  #readerBar.hide{transform:translateY(-110%)}
  #readProgress{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;
    background:linear-gradient(90deg,#d9a441,#e5484d)}
  .prose-v{font-family:'Lora',serif;font-size:var(--rsize,18px);line-height:2.05;color:rgb(var(--ink)/.93);
    user-select:none;-webkit-user-select:none}
  .prose-v p{margin:0 0 1.4em}
  .prose-v p:first-of-type::first-letter{font-family:'Syne';font-weight:800;font-size:3.1em;float:left;
    line-height:.82;margin:.07em .13em 0 0;color:#d9a441}
  .next-float{position:fixed;left:50%;bottom:20px;z-index:55;transform:translate(-50%,140%);
    background:#d9a441;color:#1c1405;font-weight:700;font-size:.9rem;padding:.8rem 1.5rem;
    border-radius:999px;box-shadow:0 12px 30px -8px rgba(217,164,65,.7);
    transition:transform .4s cubic-bezier(.2,.8,.2,1);max-width:92vw;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .next-float.show{transform:translate(-50%,0)}

  .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1)}
  .reveal.in{opacity:1;transform:none}
  #app>*{animation:fadeUp .45s ease both}
  @keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  @keyframes floaty{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(1deg)}}
  @keyframes breathe{0%,100%{opacity:.8}50%{opacity:1}}
  @keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 rgba(240,166,59,.5)}70%{box-shadow:0 0 0 5px transparent}}
  @keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}
  .shake{animation:shake .5s}
  .anim-pop{animation:pop .3s cubic-bezier(.2,.8,.2,1)}
  @keyframes pop{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}
  @keyframes spin{to{transform:rotate(360deg)}}
  .spinner{width:16px;height:16px;border:2px solid rgb(var(--mut)/.4);border-top-color:#d9a441;
    border-radius:50%;animation:spin .7s linear infinite;display:inline-block;vertical-align:middle}
  .spinner.lg{width:36px;height:36px;border-width:3px}

  #toasts{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:90;
    display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
  .toast{background:rgb(var(--sf));border:1px solid rgb(var(--linec)/.16);border-left:3px solid #d9a441;
    color:rgb(var(--ink));padding:.7rem 1.2rem;border-radius:10px;font-size:.88rem;font-weight:500;
    box-shadow:0 12px 32px rgba(0,0,0,.3);opacity:0;transform:translateY(14px);transition:.35s;max-width:90vw}
  .toast.show{opacity:1;transform:none}
  .toast.err{border-left-color:#e5484d}

  .avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;
    background:linear-gradient(150deg,#d9a441,#8a5a12);color:#1c1405;font-size:.85rem}
  .heart{display:inline-flex;align-items:center;justify-content:center;transition:transform .2s;cursor:pointer}
  .heart:hover{transform:scale(1.15)}
  .heart.on{color:#d9a441}
  .heart.on svg{fill:currentColor}
  .love-btn{display:inline-flex;align-items:center;gap:5px;transition:transform .2s;cursor:pointer;font-size:.78rem;color:rgb(var(--mut));font-weight:700}
  .love-btn:hover{transform:scale(1.08)}
  .love-btn.on{color:#e5484d}
  .love-btn.on svg{fill:currentColor}

  html[data-theme='dark'] .icon-sun{display:none}
  html[data-theme='light'] .icon-moon{display:none}

  .user-menu{position:relative}
  .user-dropdown, .nav-dropdown{position:absolute;top:calc(100% + 8px);right:0;min-width:220px;background:rgb(var(--sf));
    border:1px solid rgb(var(--linec)/.15);border-radius:12px;padding:8px;box-shadow:0 20px 50px rgba(0,0,0,.4);
    opacity:0;pointer-events:none;transform:translateY(-6px);transition:.2s;z-index:50}
  .user-dropdown.open, .nav-dropdown.open{opacity:1;pointer-events:auto;transform:none}
  .user-dropdown button, .user-dropdown a, .nav-dropdown a, .nav-dropdown button{display:flex;align-items:center;gap:.6rem;width:100%;
    padding:.6rem .8rem;border-radius:8px;text-align:left;font-size:.88rem;background:transparent;
    color:rgb(var(--ink));border:none;cursor:pointer}
  .user-dropdown button:hover, .user-dropdown a:hover, .nav-dropdown a:hover, .nav-dropdown button:hover{background:rgb(var(--sf2))}

  .skeleton{background:linear-gradient(90deg, rgb(var(--sf2)) 25%, rgb(var(--sf)) 50%, rgb(var(--sf2)) 75%);
    background-size:200% 100%;animation:skel 1.4s ease-in-out infinite;border-radius:8px}
  @keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}

  .hero-wrap{position:relative;overflow:hidden;}

  .hero-watermark{position:absolute;top:-2%;left:0;transform:none;width:100%;max-width:100%;
    text-align:left;pointer-events:none;user-select:none;z-index:1;white-space:nowrap;overflow:hidden;
    font-family:'DejaVu Serif','Lora',Georgia,serif;font-weight:700;font-size:clamp(3.5rem,18vw,14rem);
    letter-spacing:0.04em;padding:0;line-height:1;box-sizing:border-box;
    background:linear-gradient(100deg,
      rgb(var(--linec)/.05) 0%, rgb(var(--linec)/.05) 40%,
      rgba(255,231,168,.4) 47%, rgba(255,231,168,1) 50%, rgba(255,231,168,.4) 53%,
      rgb(var(--linec)/.05) 60%, rgb(var(--linec)/.05) 100%);
    background-size:340% 100%;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
    animation:shimmerSweep 15s linear infinite;}
  @keyframes shimmerSweep{0%{background-position:300% 0}100%{background-position:-300% 0}}

  .header-search{position:relative;max-width:260px;display:none}
  @media(min-width:900px){.header-search{display:block}}
  .hamburger{width:38px;height:38px;border-radius:50%;border:1px solid rgb(var(--linec)/.18);
    display:grid;place-items:center;cursor:pointer;transition:.2s;background:transparent}
  .hamburger:hover{border-color:#d9a441;color:#d9a441}
  @media(max-width:767px){ .hamburger-wrap{display:none} }
  .nav-dropdown a.active{color:#d9a441;font-weight:700}

  #bottomDock{position:fixed;left:14px;right:14px;bottom:14px;z-index:70;
    display:flex;align-items:center;justify-content:space-between;gap:2px;background:rgb(var(--sf)/.92);backdrop-filter:blur(14px);
    border:1px solid rgb(var(--linec)/.14);border-radius:999px;padding:6px 8px;
    box-shadow:0 14px 40px rgba(0,0,0,.35)}
  @media(min-width:480px){#bottomDock{left:50%;right:auto;transform:translateX(-50%);width:min(92vw,420px)}}
  @media(min-width:768px){#bottomDock{display:none !important}}
  .dock-item{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    min-width:0;height:52px;border-radius:999px;color:rgb(var(--mut));transition:.2s;font-size:9.5px;font-weight:700}
  .dock-item.active{background:rgba(217,164,65,.14);color:#d9a441}
  .dock-item svg{width:19px;height:19px}

  .genre-dd-wrap{position:relative;display:inline-block}
  .genre-dd-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:200px;background:rgb(var(--sf));
    border:1px solid rgb(var(--linec)/.15);border-radius:12px;padding:8px;box-shadow:0 20px 50px rgba(0,0,0,.4);
    opacity:0;pointer-events:none;transform:translateY(-6px);transition:.2s;z-index:30;max-height:280px;overflow-y:auto}
  .genre-dd-menu.open{opacity:1;pointer-events:auto;transform:none}
  .genre-dd-menu button{display:flex;align-items:center;gap:.6rem;width:100%;padding:.55rem .75rem;
    border-radius:8px;text-align:left;font-size:.85rem;background:transparent;color:rgb(var(--ink));border:none;cursor:pointer}
  .genre-dd-menu button:hover{background:rgb(var(--sf2))}
  .genre-dd-menu button.on{color:#d9a441;font-weight:700}

  #splash{position:fixed;inset:0;z-index:9999;background:#000;display:flex;justify-content:center;
    align-items:center;overflow:hidden;font-family:'Cinzel',serif;color:#fff;transition:opacity .6s ease}
  #splash.hide{opacity:0;pointer-events:none}
  #splash canvas#sliceCanvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;pointer-events:none}
  #splash .intro-container{position:relative;display:flex;flex-direction:column;align-items:center;
    justify-content:center;z-index:2}
  #splash .logo-wrapper{display:flex;align-items:center;justify-content:center;position:relative;height:140px}
  #splash .letter{font-size:6rem;font-weight:900;letter-spacing:.15em;color:#fff;display:inline-block;
    transition:all .4s cubic-bezier(.6,-.28,.735,.045);opacity:0;filter:blur(8px);
    animation:splashFadeInSmooth .8s forwards .2s}
  #splash .letter-v{position:relative;z-index:5}
  #splash .subtitle{margin-top:10px;font-family:'Inter',sans-serif;font-size:.85rem;letter-spacing:.4em;
    color:#a1a1aa;text-transform:uppercase;opacity:0;filter:blur(4px);
    animation:splashFadeInSmooth .8s forwards .5s;transition:all .4s ease}
  #splash .sucked-in{transform:scale(0) translate(-150px,0) !important;opacity:0 !important;filter:blur(10px) !important}
  #splash .letter-v.spasm{animation:splashViolentSpasm .05s infinite alternate !important;color:#fff;
    text-shadow:0 0 20px #fff, 0 0 50px #8b0000}
  #splash .letter-v.explode{transform:scale(2.5) !important;opacity:0 !important;filter:blur(15px) !important;
    transition:all .15s ease-out !important}
  #splash .welcome-text{position:absolute;font-size:2.2rem;font-weight:900;letter-spacing:.25em;
    text-transform:uppercase;opacity:0;filter:blur(12px);transform:scale(.9);
    transition:all .6s cubic-bezier(.16,1,.3,1);text-align:center;z-index:5;white-space:nowrap}
  #splash .welcome-text.show{opacity:1;filter:blur(0px);transform:scale(1)}
  #splash .text-invisible{visibility:hidden}
  #splash .text-top, #splash .text-bottom{position:absolute;top:0;left:0;width:100%;color:#fff;
    text-shadow:0 0 10px rgba(255,255,255,.5);transition:transform .1s cubic-bezier(0,.5,.5,1)}
  #splash .text-top{clip-path:inset(0 0 50% 0)}
  #splash .text-bottom{clip-path:inset(50% 0 0 0)}
  #splash .welcome-text.sliced .text-top{transform:translate(-3px,-1px) rotate(-.5deg)}
  #splash .welcome-text.sliced .text-bottom{transform:translate(3px,1.5px) rotate(.5deg)}
  @keyframes splashFadeInSmooth{to{opacity:1;filter:blur(0px)}}
  @keyframes splashViolentSpasm{
    0%{transform:translate(3px,-3px) scale(1.05) rotate(2deg)}
    50%{transform:translate(-4px,4px) scale(1.15) rotate(-3deg)}
    100%{transform:translate(4px,2px) scale(1.25) rotate(3deg)}
  }
  @media(max-width:768px){
    #splash .letter{font-size:4rem}
    #splash .welcome-text{font-size:1rem;letter-spacing:.12em}
  }