:root{
  --kv-bg:#070914;
  --kv-bg-soft:#0b1020;
  --kv-surface:#10172a;
  --kv-surface-2:#151d34;
  --kv-surface-3:#1b2540;
  --kv-border:#283354;
  --kv-text:#f5f7ff;
  --kv-text-2:#c5cbe0;
  --kv-muted:#8e99b8;
  --kv-primary:#8b5cf6;
  --kv-primary-2:#6d5dfc;
  --kv-blue:#3b82f6;
  --kv-cyan:#38bdf8;
  --kv-pink:#c15cff;
  --kv-gold:#f8c84e;
  --kv-success:#35d07f;
  --kv-danger:#ff5c7a;
  --kv-warning:#ffb84d;
  --kv-radius-sm:10px;
  --kv-radius-md:16px;
  --kv-radius-lg:22px;
  --kv-radius-xl:28px;
  --kv-shadow:0 14px 40px rgba(0,0,0,.32);
  --kv-nav-height:72px;
  --kv-content-max:1100px;
  --kv-space-1:4px;
  --kv-space-2:8px;
  --kv-space-3:12px;
  --kv-space-4:16px;
  --kv-space-5:20px;
  --kv-space-6:24px;
  --kv-space-7:32px;
  --kv-space-8:40px;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(900px 420px at 50% -180px,rgba(109,93,252,.25),transparent 70%),
    var(--kv-bg);
  color:var(--kv-text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.45;
}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
.kv-shell{width:min(100% - 32px,var(--kv-content-max));margin:0 auto;padding-bottom:calc(var(--kv-nav-height) + 24px)}
.kv-topbar{
  position:sticky;top:0;z-index:50;height:58px;
  display:flex;align-items:center;gap:12px;padding:0 16px;
  background:rgba(7,9,20,.88);backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(40,51,84,.72);
}
.kv-topbar:has(.kv-brand){justify-content:space-between}
.kv-brand{font-weight:900;letter-spacing:-.04em;font-size:22px}
.kv-brand b{color:var(--kv-primary)}
.kv-icon-btn,.kv-btn{
  border:1px solid transparent;border-radius:var(--kv-radius-sm);
  color:var(--kv-text);background:transparent;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;
}
.kv-icon-btn{width:40px;height:40px;display:grid;place-items:center;font-size:20px}
.kv-icon-btn:hover{background:var(--kv-surface)}
.kv-btn{min-height:42px;padding:0 16px;font-weight:800}
.kv-btn-primary{background:linear-gradient(135deg,var(--kv-primary-2),var(--kv-pink));box-shadow:0 8px 24px rgba(139,92,246,.24)}
.kv-btn-secondary{background:var(--kv-surface);border-color:var(--kv-border)}
.kv-btn-danger{background:rgba(255,92,122,.12);border-color:rgba(255,92,122,.35);color:#ff9aae}
.kv-card{background:linear-gradient(145deg,var(--kv-surface),var(--kv-bg-soft));border:1px solid var(--kv-border);border-radius:var(--kv-radius-lg);box-shadow:var(--kv-shadow)}
.kv-section{margin-top:var(--kv-space-7)}
.kv-section-head{display:flex;align-items:center;gap:10px;margin-bottom:var(--kv-space-4)}
.kv-section-head h2{margin:0;font-size:20px}
.kv-section-head small{color:var(--kv-muted)}
.kv-section-head .kv-more{margin-left:auto;color:#a78bfa;font-weight:800;background:none;border:0}
.kv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kv-comic-card{overflow:hidden}
.kv-cover{aspect-ratio:2/3;background:var(--kv-surface-3) center/cover no-repeat;position:relative}
.kv-cover-badge,.kv-cover-score{
  position:absolute;top:9px;padding:5px 8px;border-radius:8px;
  font-size:11px;font-weight:900;background:rgba(12,17,35,.9)
}
.kv-cover-badge{left:9px;background:linear-gradient(135deg,var(--kv-primary),var(--kv-pink))}
.kv-cover-score{right:9px;color:var(--kv-gold)}
.kv-comic-body{padding:12px}
.kv-comic-title{margin:0 0 5px;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kv-meta{color:var(--kv-muted);font-size:12px}
.kv-chapter-list{margin-top:8px}
.kv-chapter-row{display:flex;align-items:center;justify-content:center;gap:8px;padding:5px 0;text-align:center}
.kv-chapter-row b{font-size:12px;font-weight:800}
.kv-chapter-time{color:var(--kv-muted);font-size:11px}
.kv-progress{height:6px;background:#202b49;border-radius:99px;overflow:hidden;margin-top:9px}
.kv-progress>i{display:block;height:100%;background:linear-gradient(90deg,var(--kv-primary),var(--kv-blue));border-radius:inherit}
.kv-input{
  width:100%;min-height:44px;padding:0 13px;border-radius:12px;
  border:1px solid var(--kv-border);background:var(--kv-bg-soft);color:var(--kv-text);outline:0
}
.kv-input:focus{border-color:var(--kv-primary);box-shadow:0 0 0 3px rgba(139,92,246,.15)}
.kv-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:999px;background:var(--kv-surface-2);color:var(--kv-text-2);font-size:11px;font-weight:800}
.kv-badge-premium{background:linear-gradient(135deg,#6d5dfc,#c15cff);color:#fff}
.kv-badge-diamond{background:rgba(56,189,248,.12);color:#7dd3fc}
.kv-avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--kv-surface-3);border:1px solid var(--kv-border);font-weight:900}
.kv-avatar-lg{width:72px;height:72px}
.kv-empty,.kv-error{
  grid-column:1/-1;padding:36px 18px;text-align:center;border:1px dashed var(--kv-border);
  border-radius:var(--kv-radius-md);color:var(--kv-muted);
  display:flex;flex-direction:column;align-items:center;justify-content:center
}
.kv-error{color:#ff9aae;border-style:solid;border-color:rgba(255,92,122,.3)}
.kv-skeleton{background:linear-gradient(90deg,var(--kv-surface) 25%,var(--kv-surface-2) 50%,var(--kv-surface) 75%);background-size:200% 100%;animation:kv-shimmer 1.3s infinite}
@keyframes kv-shimmer{to{background-position:-200% 0}}
.kv-bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  height:var(--kv-nav-height);display:flex;justify-content:space-around;
  padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  background:rgba(7,9,20,.95);backdrop-filter:blur(18px);
  border-top:1px solid var(--kv-border)
}
.kv-nav-item{
  flex:1;max-width:100px;min-width:0;height:58px;
  border:0;background:transparent;color:var(--kv-muted);
  border-radius:14px;font-weight:800;text-decoration:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;line-height:1;
  -webkit-tap-highlight-color:transparent;
}
.kv-nav-item span:first-child{display:block;font-size:20px;line-height:1;margin:0}
.kv-nav-item span:last-child{display:block;font-size:11px;line-height:1.15;margin:0;text-align:center}
.kv-nav-icon{display:flex!important;align-items:center;justify-content:center}
.kv-nav-icon svg{width:22px;height:22px;stroke:currentColor;transition:transform .15s ease}
.kv-icon{display:inline-flex;align-items:center;justify-content:center;vertical-align:-0.2em;line-height:0}
.kv-icon svg{width:1em;height:1em;stroke:currentColor}
h1 .kv-icon,h2 .kv-icon,h3 .kv-icon{width:0.85em;height:0.85em}
.kv-nav-item.active{color:#c4b5fd;background:rgba(109,93,252,.14)}
.kv-nav-item.active .kv-nav-icon svg{transform:translateY(-1px)}
.kv-toast{
  position:fixed;left:50%;top:70px;z-index:100;transform:translate(-50%,-12px);
  opacity:0;pointer-events:none;background:var(--kv-surface-2);border:1px solid var(--kv-border);
  border-radius:12px;padding:10px 14px;transition:.2s
}
.kv-toast.show{opacity:1;transform:translate(-50%,0)}
@media (min-width:700px){
  .kv-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .kv-shell{width:min(100% - 40px,var(--kv-content-max))}
}