@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;600;700&display=swap");:root{--color-primary:#3b82f6;--color-primary-hover:#2563eb;--color-primary-light:rgba(59,130,246,0.1);--color-bg:#09090b;--color-surface:#111114;--color-surface-hover:#18181d;--color-surface-2:#18181c;--color-surface-3:#222228;--color-border:rgba(255,255,255,0.08);--color-border-strong:rgba(255,255,255,0.16);--color-text:#f4f4f5;--color-text-muted:#a1a1aa;--color-text-subtle:#71717a;--color-success:#10b981;--color-warning:#f59e0b;--color-error:#ef4444;--color-info:#3b82f6;--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;--font-sans:"Inter","Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-size-xs:11px;--font-size-sm:13px;--font-size-base:14px;--font-size-md:16px;--font-size-lg:18px;--font-size-xl:22px;--font-size-2xl:28px;--font-size-3xl:36px;--radius-xs:4px;--radius-sm:6px;--radius:8px;--radius-lg:12px;--radius-xl:18px;--radius-full:9999px;--shadow-sm:0 1px 2px rgba(0,0,0,0.4);--shadow:0 4px 12px rgba(0,0,0,0.45);--shadow-lg:0 12px 32px rgba(0,0,0,0.55);--transition-fast:120ms cubic-bezier(0.16,1,0.3,1);--transition:200ms cubic-bezier(0.16,1,0.3,1);--nav-width:230px;--content-max:900px}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{font-size:var(--font-size-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;color-scheme:dark}body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);line-height:1.55;min-height:100vh}a{color:inherit;text-decoration:none}button{cursor:pointer;border:none;background:none}button,input,select,textarea{font:inherit}img{max-width:100%;display:block}ol,ul{list-style:none}h1,h2,h3,h4{color:var(--color-text);font-weight:600;letter-spacing:-.025em}h1{font-size:var(--font-size-2xl);line-height:1.2}h2{font-size:var(--font-size-xl);line-height:1.25}h3{font-size:var(--font-size-lg);line-height:1.3}p{color:var(--color-text-muted)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:8px 16px;border-radius:var(--radius);font-size:var(--font-size-sm);font-weight:500;letter-spacing:-.01em;transition:all var(--transition-fast);white-space:nowrap}.btn-primary{background:#ffffff;color:#09090b;font-weight:600;border:1px solid rgba(255,255,255,.9);box-shadow:0 1px 2px rgba(0,0,0,.15)}.btn-primary:hover{background:#e4e4e7;border-color:#e4e4e7;transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:rgba(255,255,255,.05);color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover{background:rgba(255,255,255,.09);border-color:var(--color-border-strong);color:#ffffff}.btn-ghost{color:var(--color-text-muted);padding:7px 12px}.btn-ghost:hover{background:rgba(255,255,255,.06);color:var(--color-text)}.btn-danger{background:rgba(239,68,68,.1);color:#f87171;border:1px solid rgba(239,68,68,.2)}.btn-danger:hover{background:rgba(239,68,68,.18);border-color:rgba(239,68,68,.3)}.btn-sm{padding:5px 11px;font-size:var(--font-size-xs);border-radius:var(--radius-sm)}.btn-lg{padding:10px 22px;font-size:var(--font-size-base);border-radius:var(--radius)}.btn-full{width:100%}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);transition:border-color var(--transition),box-shadow var(--transition)}.card:hover{border-color:var(--color-border-strong)}.card-sm{padding:var(--space-3) var(--space-4);border-radius:var(--radius)}.form-group{display:flex;flex-direction:column;gap:var(--space-2)}.form-label{font-size:var(--font-size-xs);font-weight:500;color:var(--color-text-muted);letter-spacing:-.01em}.form-input{background:rgba(255,255,255,.03);border:1px solid var(--color-border);border-radius:var(--radius);color:var(--color-text);padding:8px 12px;font-size:var(--font-size-sm);transition:all var(--transition-fast);width:100%}.form-input:focus{outline:none;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.35);box-shadow:0 0 0 2px rgba(255,255,255,.08)}.form-input::placeholder{color:var(--color-text-subtle)}.form-textarea{resize:vertical;min-height:90px}.form-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2371717a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--radius-xs);font-size:var(--font-size-xs);font-weight:500;letter-spacing:.01em}.badge-primary{background:rgba(59,130,246,.12);color:#60a5fa;border:1px solid rgba(59,130,246,.2)}.badge-success{background:rgba(16,185,129,.12);color:#34d399;border:1px solid rgba(16,185,129,.2)}.badge-warning{background:rgba(245,158,11,.12);color:#fbbf24;border:1px solid rgba(245,158,11,.2)}.badge-error{background:rgba(239,68,68,.12);color:#f87171;border:1px solid rgba(239,68,68,.2)}.badge-muted{background:rgba(255,255,255,.05);color:var(--color-text-muted);border:1px solid var(--color-border)}.yl-badge{display:inline-flex;align-items:center;font-size:var(--font-size-xs);font-weight:600;padding:2px 7px;border-radius:var(--radius-xs);letter-spacing:.02em}.yl-easy{background:rgba(16,185,129,.1);color:#34d399;border:1px solid rgba(16,185,129,.25)}.yl-medium{background:rgba(245,158,11,.1);color:#fbbf24;border:1px solid rgba(245,158,11,.25)}.yl-hard{background:rgba(239,68,68,.1);color:#f87171;border:1px solid rgba(239,68,68,.25)}.app-shell{display:flex;min-height:100vh}.main-content{flex:1 1;margin-left:var(--nav-width);padding:var(--space-8) var(--space-8);max-width:calc(100vw - var(--nav-width))}.page-header{margin-bottom:var(--space-6)}.page-title{font-size:var(--font-size-xl);font-weight:600;color:#fafafa}.container{max-width:var(--content-max);margin:0 auto;width:100%}.sidebar{position:fixed;top:0;left:0;width:var(--nav-width);height:100vh;background:#0c0c0e;border-right:1px solid var(--color-border);display:flex;flex-direction:column;padding:var(--space-4) var(--space-3);z-index:100;overflow-y:auto}.sidebar-logo{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3) var(--space-4);margin-bottom:var(--space-3)}.sidebar-logo-icon{width:26px;height:26px;background:#ffffff;color:#09090b;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}.sidebar-logo-text{font-size:var(--font-size-md);font-weight:600;color:#fafafa;letter-spacing:-.03em}.nav-section-label{font-size:10px;font-weight:600;color:var(--color-text-subtle);text-transform:uppercase;letter-spacing:.08em;padding:var(--space-3) var(--space-3) var(--space-1)}.nav-item{display:flex;align-items:center;gap:10px;padding:7px var(--space-3);border-radius:var(--radius-sm);color:var(--color-text-muted);font-size:var(--font-size-sm);font-weight:500;transition:all var(--transition-fast)}.nav-item:hover{background:rgba(255,255,255,.05);color:#ffffff}.nav-item.active{background:rgba(255,255,255,.08);color:#ffffff;font-weight:500}.nav-item svg{flex-shrink:0;opacity:.7;transition:opacity var(--transition-fast)}.nav-item.active svg,.nav-item:hover svg{opacity:1}.book-card{display:flex;gap:var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4);transition:all var(--transition-fast);cursor:pointer}.book-card:hover{background:var(--color-surface-hover);border-color:var(--color-border-strong)}.book-cover{object-fit:cover}.book-cover,.book-cover-placeholder{width:54px;height:78px;border-radius:var(--radius-xs);flex-shrink:0;border:1px solid var(--color-border)}.book-cover-placeholder{background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;color:var(--color-text-subtle);font-size:18px}.book-title{font-weight:600;font-size:var(--font-size-base);color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}.book-author{font-size:var(--font-size-xs);color:var(--color-text-muted);margin-top:2px}.log-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);transition:border-color var(--transition-fast)}.log-card:hover{border-color:var(--color-border-strong)}.avatar{width:32px;height:32px;border-radius:var(--radius-full);background:rgba(255,255,255,.1);border:1px solid var(--color-border);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:var(--font-size-xs);color:#ffffff;flex-shrink:0}.avatar-sm{width:24px;height:24px;font-size:10px}.alert{display:flex;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius);font-size:var(--font-size-sm)}.alert-info{background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.2);color:#93c5fd}.alert-success{background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.2);color:#6ee7b7}.alert-warning{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2);color:#fcd34d}.alert-error{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);color:#fca5a5}.spinner{width:18px;height:18px;border:2px solid var(--color-border);border-top:2px solid #ffffff;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}.skeleton{background:linear-gradient(90deg,rgba(255,255,255,.03) 25%,rgba(255,255,255,.06) 50%,rgba(255,255,255,.03) 75%);background-size:200% 100%;animation:shimmer 1.5s ease infinite;border-radius:var(--radius)}@keyframes shimmer{to{background-position:-200% 0}}.divider{height:1px;background:var(--color-border);margin:var(--space-3) 0}.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn var(--transition-fast)}.modal{background:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:var(--radius-xl);padding:var(--space-6);width:100%;max-width:480px;max-height:90vh;overflow-y:auto;animation:slideUp var(--transition);box-shadow:var(--shadow-lg)}.tabs{display:flex;gap:2px;background:rgba(255,255,255,.03);border:1px solid var(--color-border);padding:3px;border-radius:var(--radius)}.tab{flex:1 1;padding:6px var(--space-3);border-radius:var(--radius-sm);font-size:var(--font-size-xs);font-weight:500;color:var(--color-text-muted);transition:all var(--transition-fast);text-align:center}.tab:hover{color:var(--color-text)}.tab.active{background:rgba(255,255,255,.08);color:#ffffff}.hero-gradient{background:radial-gradient(ellipse 70% 50% at 50% -5%,rgba(255,255,255,.04),transparent)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.fade-in{animation:fadeIn .2s ease}.slide-up{animation:slideUp .2s ease}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:var(--radius-full)}@media (max-width:768px){:root{--nav-width:0px}.main-content{margin-left:0;padding:var(--space-4) var(--space-3);max-width:100vw}.sidebar{display:none}h1{font-size:var(--font-size-xl)}}