@import "https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap";@media (width<=768px){.hidden-on-mobile{display:none!important}}:root{--bg-base:#161715;--bg-surface:#1e1f1c;--bg-elevated:#282925;--bg-overlay:#28292580;--vermillion:#c1401c;--vermillion-dim:#c1401c26;--vermillion-border:#c1401c59;--ink-green:#3e5c3e;--ink-green-dim:#3e5c3e26;--ink-green-border:#3e5c3e59;--ochre:#c99a3c;--ochre-dim:#c99a3c26;--slate:#646661;--slate-dim:#64666126;--text-primary:#f4f1ea;--text-secondary:#c5c2ba;--text-muted:#8e8a80;--text-disabled:#4d4c47;--border-subtle:#ffffff0f;--border-default:#ffffff1a;--border-strong:#ffffff2e;--glass-bg:#1e1f1cb3;--glass-border:#ffffff14;--glass-blur:blur(16px);--shadow-sm:0 1px 3px #0006, 0 1px 2px #0000004d;--shadow-md:0 4px 12px #00000080, 0 2px 4px #0000004d;--shadow-lg:0 12px 32px #0009, 0 4px 8px #0006;--shadow-xl:0 24px 48px #000000b3, 0 8px 16px #00000080;--glow-vermillion:0 0 20px #c1401c59;--glow-ink-green:0 0 20px #3e5c3e59;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;--ease-out:cubic-bezier(0, 0, .2, 1);--ease-in:cubic-bezier(.4, 0, 1, 1);--ease-both:cubic-bezier(.4, 0, .2, 1);--dur-fast:.12s;--dur-base:.2s;--dur-slow:.35s;--font-sans:"Zen Kaku Gothic New", system-ui, sans-serif;--font-heading:"Shippori Mincho", serif;--sidebar-width:240px;--topbar-height:64px;--content-max:1280px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility}body{font-family:var(--font-sans);color:var(--text-primary);background-color:var(--bg-base);min-height:100dvh;font-size:15px;line-height:1.6}#root{min-height:100dvh}img,video{max-width:100%;display:block}a{color:inherit;text-decoration:none}button{cursor:pointer;background:0 0;border:none;font-family:inherit}input,textarea,select{font-family:inherit;font-size:inherit}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);letter-spacing:.02em;color:var(--text-primary);font-weight:700;line-height:1.35}h1{font-size:clamp(2rem,5vw,3.5rem);font-weight:800}h2{font-size:clamp(1.5rem,3vw,2.25rem)}h3{font-size:clamp(1.2rem,2vw,1.5rem)}h4{font-size:1.125rem}h5{font-size:1rem}p{color:var(--text-secondary);line-height:1.7}small{color:var(--text-muted);font-size:.8125rem}.text-gradient{background:var(--vermillion);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-base)}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.app-shell{min-height:100dvh;display:flex}.sidebar{width:var(--sidebar-width);background:var(--bg-surface);border-right:1px solid var(--border-subtle);padding:var(--space-6) 0;z-index:50;transition:transform var(--dur-slow) var(--ease-both);flex-direction:column;display:flex;position:fixed;top:0;bottom:0;left:0;overflow-y:auto}.sidebar-logo{align-items:center;gap:var(--space-3);padding:0 var(--space-6) var(--space-6);border-bottom:1px solid var(--border-subtle);margin-bottom:var(--space-4);display:flex}.sidebar-logo-mark{background:var(--vermillion);border-radius:var(--radius-md);width:36px;height:36px;font-family:var(--font-heading);color:#fff;box-shadow:var(--glow-vermillion);flex-shrink:0;justify-content:center;align-items:center;font-size:1.1rem;font-weight:800;display:flex}.sidebar-logo-text{font-family:var(--font-heading);color:var(--text-primary);font-size:1.25rem;font-weight:700}.sidebar-nav{padding:0 var(--space-3);gap:var(--space-1);flex-direction:column;flex:1;display:flex}.sidebar-section-label{letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);padding:var(--space-4) var(--space-3) var(--space-2);font-size:.6875rem;font-weight:600}.nav-link{align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);color:var(--text-secondary);transition:all var(--dur-base) var(--ease-out);font-size:.9375rem;font-weight:500;display:flex;position:relative}.nav-link:hover{color:var(--text-primary);background:var(--bg-elevated)}.nav-link.active{color:var(--vermillion);background:var(--vermillion-dim)}.nav-link.active:before{content:"";background:var(--vermillion);border-radius:0 var(--radius-full) var(--radius-full) 0;width:3px;height:60%;position:absolute;top:50%;left:0;transform:translateY(-50%)}.nav-link svg{opacity:.8;flex-shrink:0}.nav-link.active svg{opacity:1}.main-content{margin-left:var(--sidebar-width);flex-direction:column;flex:1;min-width:0;display:flex}.topbar{height:var(--topbar-height);background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--border-subtle);padding:0 var(--space-8);z-index:40;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.search-shortcut{background:var(--bg-surface);border:1px solid var(--border-subtle);color:var(--text-muted);border-radius:var(--radius-sm);pointer-events:none;opacity:.8;padding:2px 6px;font-size:.6875rem;font-weight:600;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.topbar-dropdown{background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);width:220px;padding:var(--space-2) 0;box-shadow:var(--shadow-lg);z-index:100;animation:dropdown-fade-in var(--dur-base) var(--ease-out);flex-direction:column;display:flex;position:absolute;top:calc(100% + 8px);right:0}@keyframes dropdown-fade-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.dropdown-user-info{padding:var(--space-2) var(--space-4)}.dropdown-user-email{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;font-size:.8125rem;font-weight:600;overflow:hidden}.dropdown-divider{background:var(--border-subtle);height:1px;margin:var(--space-2) 0;border:0}.dropdown-item{align-items:center;gap:var(--space-3);padding:8px var(--space-4);color:var(--text-secondary);transition:all var(--dur-base) var(--ease-out);font-size:.875rem;font-weight:500;text-decoration:none;display:flex}.dropdown-item.text-danger{color:var(--vermillion)}.dropdown-item.text-danger:hover{background:var(--vermillion-dim);color:var(--vermillion)}.page-content{padding:var(--space-8);max-width:var(--content-max);flex:1;width:100%;margin:0 auto}.bottom-tabbar{background:var(--glass-bg);height:64px;-webkit-backdrop-filter:var(--glass-blur);border-top:1px solid var(--border-subtle);z-index:50;display:none;position:fixed;bottom:0;left:0;right:0}.btn{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);transition:all var(--dur-base) var(--ease-out);white-space:nowrap;font-size:.9375rem;font-weight:600;display:inline-flex}.btn-primary{background:var(--vermillion);color:#fff;box-shadow:0 2px 12px #c1401c59}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 20px #c1401c80}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border-default)}.btn-secondary:hover{background:var(--bg-overlay);border-color:var(--border-strong)}.btn-ghost{color:var(--text-secondary);padding:var(--space-2) var(--space-3)}.btn-ghost:hover{color:var(--text-primary);background:var(--bg-elevated)}.btn-sm{padding:var(--space-1) var(--space-3);font-size:.8125rem}.btn-lg{padding:var(--space-3) var(--space-8);border-radius:var(--radius-lg);font-size:1rem}.btn-icon{border-radius:var(--radius-md);justify-content:center;width:36px;height:36px;padding:0}.card{background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);transition:all var(--dur-base) var(--ease-out)}.card-glass{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--radius-lg)}.card-hover:hover{box-shadow:var(--shadow-lg);border-color:var(--border-default);transform:translateY(-4px)}.discover-grid{gap:var(--space-5);grid-template-columns:repeat(auto-fill,minmax(155px,1fr));display:grid}@media (width>=640px){.discover-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}}@media (width>=1024px){.discover-grid{gap:var(--space-6);grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}}.discover-grid .volume-card{width:100%}.volume-card{background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);transition:all var(--dur-base) var(--ease-out);cursor:pointer;overflow:hidden}.volume-card:hover{box-shadow:var(--shadow-xl);border-color:var(--vermillion-border);transform:translateY(-6px)scale(1.01)}.volume-card-cover{aspect-ratio:2/3;background:var(--bg-surface);position:relative;overflow:hidden}.volume-card-cover img{object-fit:cover;width:100%;height:100%;transition:transform var(--dur-slow) var(--ease-out)}.volume-card:hover .volume-card-cover img{transform:scale(1.06)}.volume-card-cover-overlay{opacity:0;transition:opacity var(--dur-base) var(--ease-out);background:linear-gradient(#0000 40%,#000000d9 100%);position:absolute;inset:0}.volume-card:hover .volume-card-cover-overlay{opacity:1}.volume-card-actions{bottom:var(--space-3);left:var(--space-3);right:var(--space-3);gap:var(--space-2);opacity:0;transition:all var(--dur-base) var(--ease-out);display:flex;position:absolute;transform:translateY(6px)}.volume-card:hover .volume-card-actions{opacity:1;transform:translateY(0)}.volume-card-body{padding:var(--space-3)}.volume-card-title{font-family:var(--font-heading);color:var(--text-primary);margin-bottom:var(--space-1);white-space:nowrap;text-overflow:ellipsis;font-size:.875rem;font-weight:600;line-height:1.3;overflow:hidden}.volume-card-meta{color:var(--text-muted);align-items:center;gap:var(--space-2);font-size:.75rem;display:flex}.badge{align-items:center;gap:var(--space-1);padding:2px var(--space-2);border-radius:var(--radius-sm);letter-spacing:.04em;text-transform:uppercase;font-size:.6875rem;font-weight:600;display:inline-flex}.badge-vermillion{background:var(--vermillion-dim);color:var(--vermillion);border:1px solid var(--vermillion-border)}.badge-ink-green{background:var(--ink-green-dim);color:#a78bfa;border:1px solid var(--ink-green-border)}.badge-ochre{background:var(--ochre-dim);color:var(--ochre);border:1px solid #c99a3c59}.badge-slate{background:var(--slate-dim);color:var(--slate);border:1px solid #64666159}.badge-neutral{background:var(--bg-elevated);color:var(--text-secondary);border:1px solid var(--border-default)}.input{width:100%;padding:var(--space-3) var(--space-4);background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-md);color:var(--text-primary);transition:border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);outline:none;font-size:.9375rem}.input::placeholder{color:var(--text-muted)}.input:focus{border-color:var(--vermillion);box-shadow:0 0 0 3px var(--vermillion-dim)}.input-group{align-items:center;display:flex;position:relative}.input-group .input-icon{left:var(--space-4);color:var(--text-muted);pointer-events:none;position:absolute}.input-group .input{padding-left:calc(var(--space-4) + 20px + var(--space-2))}.label{color:var(--text-secondary);margin-bottom:var(--space-2);font-size:.875rem;font-weight:500;display:block}.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-4) center;padding-right:calc(var(--space-4) + 20px);cursor:pointer}.status-toggle{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);border:1px solid var(--border-default);background:var(--bg-elevated);color:var(--text-secondary);cursor:pointer;transition:all var(--dur-base) var(--ease-out);font-size:.875rem;font-weight:500;display:flex}.status-toggle:hover{border-color:var(--border-strong);color:var(--text-primary)}.status-toggle.active-read{background:var(--ink-green-dim);border-color:var(--ink-green-border);color:#a78bfa}.status-toggle.active-owned{background:var(--vermillion-dim);border-color:var(--vermillion-border);color:var(--vermillion)}.section-header{margin-bottom:var(--space-6);justify-content:space-between;align-items:center;gap:var(--space-4);display:flex}.section-title{font-family:var(--font-heading);color:var(--text-primary);font-size:1.25rem;font-weight:700}.grid-covers{gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(150px,1fr));display:grid}.grid-covers-lg{gap:var(--space-5);grid-template-columns:repeat(auto-fill,minmax(200px,1fr));display:grid}.scroll-row{gap:var(--space-4);padding-bottom:var(--space-3);scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;display:flex;overflow-x:auto}.scroll-row>*{flex-shrink:0}.stars{color:var(--ochre);gap:2px;display:flex}.stars svg{transition:transform var(--dur-fast) var(--ease-out)}.stars svg:hover{transform:scale(1.2)}.hero-section{border-radius:var(--radius-xl);background:#1e1f1c;align-items:center;min-height:480px;display:flex;position:relative;overflow:hidden}.hero-bg-glow{pointer-events:none;background:radial-gradient(60% 80% at 70%,#c1401c1f 0%,#0000 60%),radial-gradient(50% 60% at 20% 30%,#3e5c3e1f 0%,#0000 60%);position:absolute;inset:0}.hero-grid-dots{pointer-events:none;background-image:radial-gradient(circle,#ffffff0a 1px,#0000 1px);background-size:32px 32px;position:absolute;inset:0}.avatar{border-radius:var(--radius-full);background:var(--vermillion);color:#fff;font-weight:700;font-family:var(--font-heading);flex-shrink:0;justify-content:center;align-items:center;display:flex}.avatar-sm{width:32px;height:32px;font-size:.75rem}.avatar-md{width:40px;height:40px;font-size:.875rem}.avatar-lg{width:56px;height:56px;font-size:1.125rem}.avatar-xl{width:80px;height:80px;font-size:1.5rem}.avatar-2xl{width:112px;height:112px;font-size:2rem}.divider{background:var(--border-subtle);height:1px;margin:var(--space-6) 0}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skeleton{background:linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-overlay) 50%, var(--bg-elevated) 75%);border-radius:var(--radius-md);background-size:200% 100%;animation:1.5s infinite shimmer}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes pulse-glow{0%,to{box-shadow:var(--glow-vermillion)}50%{box-shadow:0 0 40px #c1401c99}}.animate-fade-up{animation:fadeInUp var(--dur-slow) var(--ease-out) both}.animate-fade-in{animation:fadeIn var(--dur-slow) var(--ease-out) both}.animate-slide-left{animation:slideInLeft var(--dur-slow) var(--ease-out) both}.delay-100{animation-delay:.1s}.delay-200{animation-delay:.2s}.delay-300{animation-delay:.3s}.delay-400{animation-delay:.4s}.dropdown{background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);padding:var(--space-2);min-width:160px}.dropdown-item{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--dur-fast) var(--ease-out);text-align:left;width:100%;font-size:.875rem;font-weight:500;display:flex}.dropdown-item:hover{background:var(--bg-overlay);color:var(--text-primary)}.tabs{gap:var(--space-1);border-bottom:1px solid var(--border-subtle);margin-bottom:var(--space-6);display:flex}.tab{padding:var(--space-3) var(--space-4);color:var(--text-muted);cursor:pointer;transition:all var(--dur-base) var(--ease-out);background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-1px;font-size:.9375rem;font-weight:500}.tab:hover{color:var(--text-primary)}.tab.active{color:var(--vermillion);border-bottom-color:var(--vermillion)}.table{border-collapse:collapse;width:100%}.table th{text-align:left;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border-subtle);font-size:.75rem;font-weight:600}.table td{padding:var(--space-3) var(--space-4);color:var(--text-secondary);border-bottom:1px solid var(--border-subtle);vertical-align:middle;font-size:.875rem}.table tr:last-child td{border-bottom:none}.table tr:hover td{background:var(--bg-overlay)}.empty-state{align-items:center;gap:var(--space-4);padding:var(--space-16);text-align:center;flex-direction:column;display:flex}.empty-state-icon{background:var(--bg-elevated);border-radius:var(--radius-xl);width:64px;height:64px;color:var(--text-muted);justify-content:center;align-items:center;display:flex}.cover-placeholder{background:linear-gradient(135deg, var(--bg-elevated), var(--bg-surface));width:100%;height:100%;color:var(--text-muted);justify-content:center;align-items:center;display:flex}.toast{bottom:var(--space-6);right:var(--space-6);background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);box-shadow:var(--shadow-xl);align-items:center;gap:var(--space-3);animation:fadeInUp var(--dur-base) var(--ease-out);z-index:100;max-width:380px;display:flex;position:fixed}@media (width<=1024px){.sidebar{transform:translate(-100%)}.sidebar.open{transform:translate(0)}.main-content{margin-left:0}.bottom-tabbar{justify-content:space-around;align-items:center;display:flex}.page-content{padding:var(--space-6) var(--space-4);padding-bottom:calc(64px + var(--space-4))}}@media (width<=640px){.grid-covers{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.grid-covers-lg{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.topbar{padding:0 var(--space-4)}}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.gap-6{gap:var(--space-6)}.gap-8{gap:var(--space-8)}.w-full{width:100%}.min-w-0{min-width:0}.flex-1{flex:1}.relative{position:relative}.absolute{position:absolute}.truncate{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.mt-2{margin-top:var(--space-2)}.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}.mt-8{margin-top:var(--space-8)}.mb-2{margin-bottom:var(--space-2)}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}.mb-8{margin-bottom:var(--space-8)}.p-4{padding:var(--space-4)}.p-6{padding:var(--space-6)}.p-8{padding:var(--space-8)}.px-4{padding-left:var(--space-4);padding-right:var(--space-4)}.py-2{padding-top:var(--space-2);padding-bottom:var(--space-2)}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}