@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&display=swap";
:root{--color-primary:#0ea5e9;--color-primary-hover:#0284c7;--color-primary-light:#e0f2fe;--color-primary-dark:#0369a1;--color-accent:#facc15;--color-accent-hover:#eab308;--color-accent-text:#713f12;--bg-primary:#f8fafc;--bg-surface:#fff;--bg-muted:#f1f5f9;--text-heading:#0f172a;--text-body:#475569;--text-muted:#94a3b8;--text-inverse:#fff;--border-color:#e2e8f0;--border-light:#f1f5f9;--color-success:#10b981;--color-success-light:#d1fae5;--color-error:#ef4444;--color-error-light:#fee2e2;--color-warning:#f59e0b;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-full:9999px;--shadow-sm:0 1px 3px #0000000f;--shadow-md:0 4px 12px #00000014;--shadow-lg:0 8px 24px #0000001f;--shadow-primary:0 4px 14px #0ea5e966;--shadow-accent:0 4px 14px #facc1566;--font-sans:"Inter","Noto Sans JP",-apple-system,BlinkMacSystemFont,sans-serif;--text-page-title:2.25rem;--text-section-title:1.5rem;--text-card-title:1.125rem;--text-base:1rem;--text-sm:.875rem;--text-xs:.75rem;--transition-base:.25s ease;--transition-fast:.15s ease;--navbar-height:64px;--sidebar-width:280px}.theme-dark{--bg-primary:#0f172a;--bg-surface:#1e293b;--bg-muted:#334155;--text-heading:#f1f5f9;--text-body:#cbd5e1;--text-muted:#64748b;--border-color:#334155;--border-light:#1e293b}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-body);min-height:100vh;line-height:1.7}a{color:var(--color-primary);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--color-primary-hover)}img{max-width:100%;display:block}h1,h2,h3,h4,h5,h6{color:var(--text-heading);font-weight:700;line-height:1.3}h1{font-size:var(--text-page-title)}h2{font-size:var(--text-section-title)}h3{font-size:var(--text-card-title)}.btn{border-radius:var(--radius-md);font-family:var(--font-sans);font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-base);border:none;justify-content:center;align-items:center;gap:8px;padding:12px 24px;font-weight:600;line-height:1;text-decoration:none;display:inline-flex}.btn-primary{background:var(--color-primary);color:var(--text-inverse);box-shadow:var(--shadow-primary)}.btn-primary:hover{background:var(--color-primary-hover);transform:translateY(-1px);box-shadow:0 6px 20px #0ea5e980}.btn-cta{background:var(--color-accent);color:var(--color-accent-text);box-shadow:var(--shadow-accent)}.btn-cta:hover{background:var(--color-accent-hover);transform:translateY(-1px);box-shadow:0 6px 20px #facc1580}.btn-outline{color:var(--color-primary);border:2px solid var(--color-primary);background:0 0}.btn-outline:hover{background:var(--color-primary-light)}.btn-ghost{color:var(--text-body);background:0 0}.btn-ghost:hover{background:var(--bg-muted)}.btn-sm{font-size:var(--text-xs);padding:8px 16px}.btn-lg{font-size:var(--text-base);padding:16px 32px}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.card{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);transition:all var(--transition-base);padding:24px}.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.badge{border-radius:var(--radius-full);font-size:var(--text-xs);align-items:center;padding:4px 12px;font-weight:600;line-height:1;display:inline-flex}.badge-primary{background:var(--color-primary-light);color:var(--color-primary-dark)}.badge-free{color:#854d0e;background:#fef9c3}.badge-success{background:var(--color-success-light);color:#065f46}.badge-warning{color:#92400e;background:#fef3c7}.badge-price{color:#c2410c;background:#fff7ed}.navbar{z-index:100;height:var(--navbar-height);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--border-color);background:#ffffffd9;justify-content:space-between;align-items:center;padding:0 24px;display:flex;position:sticky;top:0}.theme-dark .navbar{background:#0f172ad9}.navbar-logo{font-size:var(--text-card-title);color:var(--text-heading);align-items:center;gap:8px;font-weight:700;display:flex}.navbar-nav{align-items:center;gap:16px;list-style:none;display:flex}.navbar-nav a{color:var(--text-body);font-size:var(--text-sm);font-weight:500}.navbar-nav a:hover{color:var(--color-primary)}.navbar-user{align-items:center;gap:12px;display:flex}.avatar{border-radius:var(--radius-full);background:var(--color-primary);width:36px;height:36px;color:var(--text-inverse);font-weight:700;font-size:var(--text-sm);justify-content:center;align-items:center;display:flex}.form-group{margin-bottom:20px}.form-label{font-size:var(--text-sm);color:var(--text-heading);margin-bottom:6px;font-weight:600;display:block}.form-input{border:1px solid var(--border-color);border-radius:var(--radius-md);width:100%;font-family:var(--font-sans);font-size:var(--text-base);color:var(--text-heading);background:var(--bg-surface);transition:border-color var(--transition-fast);padding:12px 16px}.form-input:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #0ea5e926}.form-input::placeholder{color:var(--text-muted)}.form-help{font-size:var(--text-xs);color:var(--text-muted);margin-top:4px}select.form-input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%2394a3b8'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;padding-right:36px}textarea.form-input{resize:vertical;min-height:100px}.progress-bar{background:var(--bg-muted);border-radius:var(--radius-full);width:100%;height:8px;overflow:hidden}.progress-bar-fill{background:linear-gradient(90deg,var(--color-primary),#38bdf8);border-radius:var(--radius-full);height:100%;transition:width .5s}.login-page{background:radial-gradient(ellipse at top,#e0f2fe 0%,var(--bg-primary)60%);justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.login-card{background:var(--bg-surface);border-radius:var(--radius-lg);width:100%;max-width:420px;box-shadow:var(--shadow-lg);padding:40px}.login-title{text-align:center;margin-bottom:8px}.login-subtitle{text-align:center;color:var(--text-muted);font-size:var(--text-sm);margin-bottom:32px}.dashboard{max-width:1200px;margin:0 auto;padding:40px 24px}.dashboard-header{margin-bottom:32px}.dashboard-header h1{margin-bottom:8px}.dashboard-header p{color:var(--text-muted)}.course-grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:24px;display:grid}.course-card{cursor:pointer;color:inherit;text-decoration:none;display:block}.course-card .card:hover{border-color:var(--color-primary)}.course-card-header{align-items:flex-start;gap:16px;margin-bottom:16px;display:flex}.course-card-icon{font-size:2.5rem;line-height:1}.course-card-title{font-size:var(--text-card-title);margin-bottom:4px}.course-card-meta{font-size:var(--text-xs);color:var(--text-muted)}.course-card-footer{border-top:1px solid var(--border-light);justify-content:space-between;align-items:center;margin-top:16px;padding-top:16px;display:flex}.course-card-progress{font-size:var(--text-xs);color:var(--text-muted);margin-bottom:6px}.course-detail{max-width:900px;margin:0 auto;padding:40px 24px}.course-detail-header{margin-bottom:32px}.course-detail-header h1{align-items:center;gap:12px;margin-bottom:8px;display:flex}.course-detail-description{color:var(--text-body);font-size:var(--text-base);margin-bottom:24px;line-height:1.8}.lesson-list{list-style:none}.lesson-item{border:1px solid var(--border-color);border-radius:var(--radius-md);background:var(--bg-surface);transition:all var(--transition-fast);cursor:pointer;color:inherit;align-items:center;gap:16px;margin-bottom:8px;padding:16px 20px;text-decoration:none;display:flex}.lesson-item:hover{border-color:var(--color-primary);background:var(--color-primary-light)}.lesson-item.completed{border-left:3px solid var(--color-success)}.lesson-item.locked{opacity:.6;cursor:not-allowed}.lesson-number{border-radius:var(--radius-full);background:var(--bg-muted);width:32px;height:32px;color:var(--text-muted);font-size:var(--text-xs);flex-shrink:0;justify-content:center;align-items:center;font-weight:700;display:flex}.lesson-item.completed .lesson-number{background:var(--color-success-light);color:#065f46}.lesson-info{flex:1}.lesson-title{font-size:var(--text-sm);color:var(--text-heading);font-weight:600}.lesson-meta{font-size:var(--text-xs);color:var(--text-muted);margin-top:2px}.section-header{font-size:var(--text-sm);color:var(--color-primary);border-bottom:2px solid;border-image:linear-gradient(90deg,var(--color-primary),transparent)1;margin-top:24px;margin-bottom:8px;padding:12px 20px;font-weight:700}.section-header:first-child{margin-top:0}.lesson-layout{min-height:calc(100vh - var(--navbar-height));display:flex}.lesson-sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);border-right:1px solid var(--border-color);height:calc(100vh - var(--navbar-height));top:var(--navbar-height);background:var(--bg-surface);padding:16px 0;position:sticky;overflow-y:auto}.theme-dark .lesson-sidebar{background:var(--bg-surface)}.sidebar-item{font-size:var(--text-sm);color:var(--text-body);transition:all var(--transition-fast);cursor:pointer;border-left:3px solid #0000;align-items:center;gap:12px;padding:10px 20px;text-decoration:none;display:flex}.sidebar-item:hover{color:var(--color-primary);background:#0ea5e914}.sidebar-item.active{color:var(--color-primary);border-left-color:var(--color-primary);background:#0ea5e91f;font-weight:600}.sidebar-item.completed:after{content:"✅";font-size:var(--text-xs);margin-left:auto}.sidebar-section{font-size:var(--text-xs);color:#818cf8;text-transform:uppercase;letter-spacing:.05em;border-top:1px solid #ffffff14;margin-top:16px;padding:8px 20px;font-weight:700}.sidebar-section:first-child{border-top:none;margin-top:0}.lesson-main{flex:1;padding:32px;overflow-y:auto}.video-container{border-radius:var(--radius-md);background:#000;width:100%;margin-bottom:24px;padding-top:56.25%;position:relative;overflow:hidden}.video-container iframe{border:none;width:100%;height:100%;position:absolute;top:0;left:0}.lesson-text-content{max-width:720px;line-height:1.9;font-size:var(--text-base)}.lesson-text-content h2{margin-top:32px;margin-bottom:12px}.lesson-text-content p{margin-bottom:16px}.lesson-nav{border-top:1px solid var(--border-color);justify-content:space-between;gap:16px;margin-top:40px;padding-top:24px;display:flex}.success-page{text-align:center;justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.success-icon{margin-bottom:16px;font-size:4rem}.alert{border-radius:var(--radius-md);font-size:var(--text-sm);margin-bottom:16px;padding:12px 16px}.alert-error{background:var(--color-error-light);color:#991b1b;border:1px solid #fecaca}.alert-success{background:var(--color-success-light);color:#065f46;border:1px solid #a7f3d0}.alert-info{background:var(--color-primary-light);color:var(--color-primary-dark);border:1px solid #bae6fd}.spinner{border:2px solid #ffffff4d;border-top-color:currentColor;border-radius:50%;width:20px;height:20px;animation:.6s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:.4s ease-out fadeIn}@media (max-width:768px){:root{--text-page-title:1.75rem;--text-section-title:1.25rem}.course-grid{grid-template-columns:1fr}.lesson-layout{flex-direction:column}.lesson-sidebar{border-right:none;border-bottom:1px solid var(--border-color);width:100%;min-width:100%;height:auto;max-height:300px;position:relative;top:0}.lesson-main{padding:20px}.navbar{padding:0 16px}.dashboard{padding:24px 16px}}