:root{
  --gold:#d8b676;
  --gold-soft:#b99a5c;
  --gold-bright:#e8cf9a;
  --ink:#0c0b09;
  --card:#14110c;
  --card-2:#1a1610;
  --line:#b99a5c26;
  --line-strong:#b99a5c59;
  --text:#efe6d6;
  --text-dim:#b3a58d;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 10px 32px #00000066;
}

::selection{background:#d8b67644;color:#fff}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:#0a0908}
::-webkit-scrollbar-thumb{background:#3a3223;border-radius:8px;border:2px solid #0a0908}
::-webkit-scrollbar-thumb:hover{background:#5c4d31}

body{
  background:
    radial-gradient(ellipse at 85% 0,#392a1855,transparent 50%),
    radial-gradient(ellipse at 0 100%,#2b201256,transparent 55%),
    #0c0b09!important;
}

header{border-bottom:1px solid var(--line-strong);background:#0c0b09e8}
.header-inner{gap:16px}
.brand-lockup{transition:transform .2s ease}
.brand-lockup:active{transform:scale(.97)}
.logo{letter-spacing:-1px;font-size:30px}
.mascot{transition:transform .3s ease}
.brand-lockup:hover .mascot{transform:rotate(-4deg) translateY(-2px)}
.desktop-nav button{
  position:relative;padding:8px 2px;transition:color .2s ease;
}
.desktop-nav button::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#d8b676,transparent);
  opacity:0;transform:scaleX(.4);transition:all .25s ease;
}
.desktop-nav button.active{color:var(--gold-bright)}
.desktop-nav button.active::after,.desktop-nav button:hover::after{opacity:1;transform:scaleX(1)}
.search-top,.search-main,.catalog-select,.chapter-tools input,.chapter-tools select,.shelf-label select,.bell-broadcast input{
  background:#0f0d0a!important;border:1px solid #3d3423!important;border-radius:var(--radius-sm)!important;
  color:var(--text)!important;transition:border-color .2s ease,box-shadow .2s ease;
}
.search-top:focus,.search-main:focus,.catalog-select:focus,.chapter-tools input:focus,.chapter-tools select:focus{
  border-color:var(--gold-soft)!important;box-shadow:0 0 0 3px #d8b6761c;outline:none;
}
.search-main{padding:14px 18px!important;font-size:15px}
.search-top{border-radius:999px!important;padding:10px 16px}

.bell-btn{border-radius:var(--radius-sm);border-color:#3d3423;color:var(--text-dim);transition:all .2s ease}
.bell-btn:hover{color:var(--gold-bright);border-color:var(--gold-soft);transform:translateY(-1px)}
.avatar{border-radius:var(--radius-sm);transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 0 0 1px #00000040}
.avatar:hover{transform:translateY(-1px);box-shadow:0 4px 14px #d8b67633}

.primary{
  background:linear-gradient(120deg,#e8d19e,#b99250);
  color:#18140d;border:0;border-radius:var(--radius-sm);
  font-weight:800;letter-spacing:.2px;
  box-shadow:0 4px 18px #b0873626;
  transition:filter .2s ease,transform .15s ease,box-shadow .2s ease;
}
.primary:hover{filter:brightness(1.08);box-shadow:0 6px 24px #b0873640}
.primary:active{transform:scale(.97)}
.primary:disabled{filter:grayscale(.4) brightness(.75)}

.small-card,.cover,.popular,.top-art,.history-card,.profile-box,.chapter,.poster-frame,.title-sarcophagus,.reader-chapter-end{
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.small-card{border-radius:var(--radius)}
.small-card h3{transition:color .2s ease}
.small-image{border-radius:var(--radius)}
.small-art{border-radius:var(--radius);border:1px solid #ffffff0a;transition:box-shadow .25s ease}
.small-card:active{transform:scale(.97)}

.cover,.popular{border-radius:var(--radius)}
.cover{border-color:#ffffff14;box-shadow:0 4px 16px #00000059}
.top-art{border-radius:var(--radius)}
.top-art img{transition:transform .4s ease}

@media(hover:hover) and (pointer:fine){
  .small-card:hover .small-art{box-shadow:var(--shadow)}
  .small-card:hover h3{color:var(--gold-bright)}
  .cover:hover,.small-card:hover{transform:translateY(-4px)}
  .cover:hover{box-shadow:var(--shadow);border-color:var(--line-strong)}
  .popular:hover .top-art img{transform:scale(1.05)}
  .chapter:hover{background:#1a1610;border-color:var(--gold-soft);transform:translateX(4px)}
  .chapter:hover::before{opacity:1}
  .history-card:hover{border-color:var(--line-strong);transform:translateY(-2px)}
  .bell-btn:hover{color:var(--gold-bright);border-color:var(--gold-soft);transform:translateY(-1px)}
  .avatar:hover{transform:translateY(-1px);box-shadow:0 4px 14px #d8b67633}
  .brand-lockup:hover .mascot{transform:rotate(-4deg) translateY(-2px)}
  .desktop-nav button.active::after,.desktop-nav button:hover::after{opacity:1;transform:scaleX(1)}
  .bottom button:hover{color:var(--gold-bright);transform:translateY(-2px)}
  .bottom .nav-search:hover .search-circle{transform:translateY(-3px) scale(1.04)}
}

.section{margin-bottom:76px}
.section-head{margin-bottom:24px}
.results{gap:18px}
.grid{gap:20px}

.hero{margin-bottom:40px}
.hero p{font-size:15px;max-width:440px}
.hero h1{text-shadow:0 4px 30px #00000080}

.chapter{border-radius:var(--radius-sm);border-color:#2b2519;background:#12100b}
.chapter:hover{background:#1a1610;border-color:var(--gold-soft);transform:translateX(4px)}
.chapter{position:relative;overflow:hidden}
.chapter::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(#e8d19e,#b99250);opacity:0;transition:opacity .2s ease;
}
.chapter:hover::before{opacity:1}

.history-card{border-radius:var(--radius);background:var(--card);border-color:var(--line)}
.history-card:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.history-btn{border-radius:8px}
.profile-box{border-radius:var(--radius);background:var(--card);border-color:var(--line)}

.empty{
  border:1px dashed #3d3423;border-radius:var(--radius);
  background:#100e0a;color:var(--text-dim);
  padding:44px 20px;line-height:1.6;
}

.bottom{background:#0c0b09f2;backdrop-filter:blur(18px);border-top:1px solid var(--line-strong)}
.bottom button{transition:color .2s ease,transform .2s ease;border-radius:10px;padding:6px 8px}
.bottom button:hover{color:var(--gold-bright);transform:translateY(-2px)}
.bottom button.active{color:var(--gold-bright);text-shadow:0 0 18px #d8b6764d}
.bottom button.active .ico svg{filter:drop-shadow(0 0 8px #d8b67666)}
.search-circle{border-radius:18px;box-shadow:0 6px 24px #d8b67638;transition:transform .2s ease}
.bottom .nav-search:hover .search-circle{transform:translateY(-3px) scale(1.04)}

.bell-panel{background:#191509f5;border-color:var(--line-strong);border-radius:var(--radius);box-shadow:0 20px 60px #000d}
.toast{background:#1d1810f5;border-radius:12px;box-shadow:0 10px 40px #000d}
.genre-chip{transition:all .18s ease}
.genre-chip:hover{transform:translateY(-1px)}

.reader-modal-overlay{background:#050403}
.reader-top-bar{background:#12100bf2;border-bottom-color:var(--line);backdrop-filter:blur(14px)}
.reader-floating-nav{background:#18140cf0;border:1px solid var(--line-strong);border-radius:999px;backdrop-filter:blur(16px);box-shadow:0 12px 40px #000c}
.reader-chapter-end{border-radius:var(--radius);box-shadow:var(--shadow)}
.reader-chapter-end .primary{min-width:170px}

footer{border-top:1px solid var(--line);padding:32px 0 0}

@media(max-width:600px){
  .section{margin-bottom:56px}
  .hero h1{text-shadow:none}
}

.admin-tab-btn{border-radius:var(--radius-sm);transition:all .2s ease}
.admin-filter-btn,.admin-del-btn,.admin-select{border-radius:8px}
.admin-stat-card{border-radius:var(--radius);background:linear-gradient(160deg,#191408,#0f0d0a);transition:border-color .25s ease,transform .25s ease}
.admin-stat-card:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.admin-stat-val{font-variant-numeric:tabular-nums}
.admin-table-wrap{border-radius:var(--radius);border-color:var(--line);overflow:hidden}
.admin-table th{background:#14110c;color:#a4906c}
.admin-table tr:hover td{background:#17130c}
.code-pill{border-radius:8px;background:#1a1610;border-color:#3d3423}
.badge{border-radius:999px;padding:4px 10px;font-size:10px;letter-spacing:.3px}

.account-dialog{border-radius:22px}
.account-submit{border-radius:12px;transition:filter .2s ease,transform .15s ease}
.account-submit:active{transform:scale(.98)}
.account-tabs button{border-radius:10px 10px 0 0}

.skeleton-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.skeleton-card{height:245px;border-radius:var(--radius);background:linear-gradient(100deg,#14110c 40%,#241d12 50%,#14110c 60%);background-size:200% 100%;animation:shimmer 1.4s ease-in-out infinite}
@keyframes shimmer{to{background-position:-200% 0}}
@media(max-width:800px){.skeleton-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.skeleton-card{height:200px}}

.scroll-top{
  position:fixed;right:18px;bottom:96px;z-index:125;width:44px;height:44px;
  border-radius:50%;border:1px solid var(--line-strong);background:#191509f0;color:var(--gold-bright);
  font-size:18px;box-shadow:0 8px 28px #000b;backdrop-filter:blur(10px);
  transition:transform .2s ease,border-color .2s ease;
}
.scroll-top:hover{transform:translateY(-2px);border-color:var(--gold-soft)}
.scroll-top:active{transform:scale(.94)}
@media(max-width:600px){.scroll-top{right:12px;bottom:104px}}

.reader-theme-gray{background:#2a2a2a}
.reader-theme-sepia{background:#e8dcc4}
.reader-theme-sepia .reader-top-bar,.reader-theme-sepia .reader-floating-nav{background:#d9cbaeee;color:#3a2f1a;border-color:#b99a5c66}
.reader-page-jump{width:52px;padding:4px 6px;background:#090909;color:#d8b676;border:1px solid #3d3423;border-radius:8px;text-align:center;font-size:12px;appearance:textfield}
.reader-page-jump::-webkit-inner-spin-button{display:none}
.skeleton-error{color:#ff9d7a!important}
.reader-theme-sepia .reader-page{filter:none}

.reader-page-wrap{content-visibility:auto;contain-intrinsic-size:auto 1200px}
.reader-content{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.small-art,.cover-art,.top-art img,.poster-frame img{will-change:auto}
@media(max-width:600px){
  header{backdrop-filter:none;background:#0c0b09f8}
  .bottom{backdrop-filter:none;background:#0c0b09f8}
  .reader-top-bar{backdrop-filter:none;background:#12100bfa}
  .reader-floating-nav{backdrop-filter:none;background:#18140cfa}
  .scroll-top{backdrop-filter:none;background:#191509fa}
}
@media(prefers-reduced-motion:reduce){
  .skeleton-card{animation:none;background:#181410}
}