@import "https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700;800&family=Noto+Sans+JP:wght@400;500;700;900&display=swap";:root{--bg-color:#071923;--surface-color:#112537;--surface-hover:#1f3a53;--text-primary:#e9f5ff;--text-secondary:#a6c2dc;--accent-color:#38bdf8;--accent-hover:#22c55e;--border-color:#1b3350;--success-color:#4ade80;--warning-color:#fbbf24;--font-ui:"Be Vietnam Pro", sans-serif;--font-jp:"Noto Sans JP", sans-serif;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--shadow-glow:0 0 20px #ef44444d}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-ui);background-color:var(--bg-color);color:var(--text-primary);-webkit-font-smoothing:antialiased;min-height:100vh;line-height:1.5}.jp-text{font-family:var(--font-jp)}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2}.container{max-width:1200px;margin:0 auto;padding:0 20px}.flex-center{justify-content:center;align-items:center;display:flex}.flex-between{justify-content:space-between;align-items:center;display:flex}.btn{cursor:pointer;font-size:1rem;font-weight:600;font-family:var(--font-ui);border:none;border-radius:8px;justify-content:center;align-items:center;gap:8px;padding:10px 20px;transition:all .2s;display:inline-flex}.btn-primary{background-color:var(--accent-color);color:#fff;box-shadow:0 4px 14px #ef444463}.btn-primary:hover{background-color:var(--accent-hover);transform:translateY(-2px);box-shadow:0 6px 20px #ef444466}.btn-primary:active{transform:translateY(0)}.btn-secondary{background-color:var(--surface-hover);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background-color:#475569}.btn-icon{background-color:var(--surface-color);width:44px;height:44px;color:var(--text-primary);border:1px solid var(--border-color);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;padding:0;transition:all .2s;display:flex}.btn-icon:hover{background-color:var(--surface-hover);transform:translateY(-2px)}.card{background-color:var(--surface-color);border:1px solid var(--border-color);box-shadow:var(--shadow-md);border-radius:16px;padding:24px;transition:transform .3s,box-shadow .3s}.card:hover{box-shadow:var(--shadow-lg)}.flashcard-container{perspective:1000px;cursor:pointer;width:100%;max-width:800px;height:450px;margin:0 auto}.flashcard-back-content{box-sizing:border-box;flex-direction:row;align-items:stretch;gap:24px;height:100%;padding:30px 25px;display:flex}.flashcard-back-left{border-right:1px solid #ffffff14;flex-direction:column;flex:45%;justify-content:space-between;padding-right:20px;display:flex}.flashcard-back-right{flex-direction:column;flex:55%;justify-content:center;gap:15px;display:flex}@media (width<=768px){.grid-cols-3,.grid-cols-4{grid-template-columns:repeat(2,1fr)}.flashcard-container{max-width:100%;height:420px}}@media (width<=600px){.flashcard-back-content{flex-direction:column;gap:15px;padding:20px 15px}.flashcard-back-left{border-bottom:1px solid #ffffff14;border-right:none;padding-bottom:15px;padding-right:0}.flashcard-back-right{gap:10px}}@media (width<=480px){.grid-cols-2{grid-template-columns:1fr}.flashcard-container{height:380px}}.flashcard{width:100%;height:100%;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,.2,.2,1);position:relative}.flashcard.is-flipped{transform:rotateY(180deg)}.flashcard-face{backface-visibility:hidden;background:linear-gradient(145deg, var(--surface-color), #151e2e);width:100%;height:100%;box-shadow:var(--shadow-lg);border:1px solid #ffffff0d;border-radius:24px;flex-direction:column;justify-content:center;align-items:center;padding:40px;display:flex;position:absolute;top:0;left:0}.flashcard-front{transform:rotateY(0)}.flashcard-back{background:linear-gradient(145deg,#1e293b,#151e2e);transform:rotateY(180deg)}.progress-bg{background-color:var(--surface-color);border-radius:4px;width:100%;height:8px;overflow:hidden}.progress-fill{background-color:var(--accent-color);height:100%;transition:width .3s}.level-badge{text-transform:uppercase;color:var(--accent-color);background-color:#ef444426;border:1px solid #ef44444d;border-radius:20px;padding:4px 12px;font-size:.85rem;font-weight:700;display:inline-block}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:.4s forwards fadeIn}.grid{gap:20px;display:grid}.grid-cols-2{grid-template-columns:repeat(2,1fr)}.grid-cols-3{grid-template-columns:repeat(3,1fr)}.grid-cols-4{grid-template-columns:repeat(4,1fr)}@media (width<=768px){.grid-cols-3,.grid-cols-4{grid-template-columns:repeat(2,1fr)}}@media (width<=480px){.grid-cols-2{grid-template-columns:1fr}}.custom-scrollbar::-webkit-scrollbar{width:6px;height:6px}.custom-scrollbar::-webkit-scrollbar-track{background:0 0}.custom-scrollbar::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--accent-color)}.hide-scrollbar::-webkit-scrollbar{display:none}.hide-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.app-navbar{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);z-index:100;background:#ffffff1f;border-bottom:1px solid #ffffff2e;position:sticky;top:0}.navbar-inner{justify-content:space-between;align-items:center;gap:20px;padding:16px 0;display:flex}.navbar-brand{cursor:pointer;align-items:center;gap:14px;display:flex}.navbar-logo{color:#fff;background:linear-gradient(135deg,#22d3ee,#0ea5e9);border-radius:14px;place-items:center;width:42px;height:42px;font-weight:800;display:grid}.navbar-brand h1{letter-spacing:-.5px;color:#fff;margin:0;font-size:1.25rem}.navbar-brand span{color:#ffffffc2;font-size:.9rem;display:block}.navbar-links{gap:18px;display:flex}.nav-link{color:#ffffffe0;cursor:pointer;background:0 0;border:none;border-radius:14px;padding:10px 12px;font-size:.95rem;transition:background .2s,color .2s}.nav-link:hover{color:#fff;background:#ffffff1f}.navbar-actions{align-items:center;gap:12px;display:flex}.app-navbar{background:#0a142899;border-bottom:1px solid #ffffff1f}.navbar-brand h1,.nav-link,.lang-btn,.btn-login,.btn-logout{color:#f8fafc}.lang-btn{color:#fff;cursor:pointer;background:#ffffff14;border:1px solid #ffffff38;border-radius:999px;align-items:center;gap:8px;padding:10px 14px;display:inline-flex}.btn{cursor:pointer;border:none;border-radius:999px;font-weight:700}.btn-login{color:#fff;background:linear-gradient(135deg,#22d3ee,#0ea5e9);padding:10px 18px}.btn-login:hover{opacity:.95}.btn-logout{color:#fff;background:#ffffff2e;padding:10px 18px}@media (width<=900px){.navbar-links{display:none}.navbar-inner{flex-wrap:wrap}}.app-footer{color:#c8d8f5;background:linear-gradient(#07121f 0%,#091223 100%);padding:48px 0 28px}.app-footer:before{content:"";pointer-events:none;background:radial-gradient(circle at 0 0,#00a4ff29,#0000 22%),radial-gradient(circle at 100% 100%,#8c38ff1f,#0000 25%);position:absolute;inset:0}.footer-inner{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:24px;display:flex}.footer-brand{align-items:center;gap:18px;display:flex}.footer-logo{color:#fff;background:radial-gradient(circle,#00b4ff 0%,#0077d6 100%);border-radius:18px;place-items:center;width:54px;height:54px;font-size:1.25rem;font-weight:800;display:grid}.footer-brand h2{margin:0;font-size:1.2rem}.footer-brand p{color:#b9c6e9;margin:6px 0 0;font-size:.95rem}.footer-links{flex-wrap:wrap;gap:18px;display:flex}.footer-links a{color:#c8d8f5;font-size:.96rem;text-decoration:none;transition:color .2s}.footer-links a:hover{color:#fff}.footer-bottom{color:#8fa7d3;width:100%;margin-top:16px;font-size:.92rem}@media (width<=768px){.footer-inner{flex-direction:column;align-items:stretch}.footer-links{justify-content:space-between}}:root{--jp-bg:linear-gradient(180deg,#fff8f3 0%, #fffdfa 40%);--accent-color:#e11d48;--jp-ink:#1f2937}.home-page{min-height:100vh}.home-top-banner{background:radial-gradient(circle at 0 0,#38bdf82e 0%,#0000 38%),linear-gradient(#0f1f31 0%,#102b45 32%,#163a57 100%);padding:88px 0 64px;position:relative;overflow:hidden}.home-top-banner:before{content:"";pointer-events:none;background:radial-gradient(circle at 20% 20%,#ffffff6b,#0000 34%),radial-gradient(circle at 82% 18%,#ffffff52,#0000 26%);position:absolute;inset:0}.home-banner-inner{grid-template-columns:1.2fr .9fr;align-items:center;gap:36px;display:grid;position:relative}.home-banner-copy{z-index:1;max-width:620px;position:relative}.home-badge{color:#974c00;letter-spacing:.06em;text-transform:uppercase;background:#ffe2792e;border-radius:999px;margin-bottom:24px;padding:10px 18px;font-size:.85rem;font-weight:700;display:inline-flex}.home-banner-copy h1{color:#f3f9ff;letter-spacing:-1px;font-size:clamp(3rem,5vw,5rem);line-height:.95;font-family:var(--font-jp);text-shadow:0 24px 50px #0816283d;margin-bottom:20px}.home-banner-copy p{color:#f1f8ffeb;max-width:680px;margin-bottom:18px;font-size:1.05rem;line-height:1.8}.home-subtitle{color:#ffffffe0;max-width:720px;margin-bottom:24px;font-size:1.1rem;line-height:1.8}.home-actions{flex-wrap:wrap;gap:16px;margin-bottom:22px;display:flex}.home-top-banner .btn-primary{color:#fff;background-color:#00aefd;box-shadow:0 18px 40px #00aefd4d}.home-top-banner .btn-primary:hover{background-color:#0091db}.home-top-banner .btn-secondary{color:#0f172a;background-color:#ffffffeb;border-color:#0ea5e93d}.btn-xl{padding:14px 30px;font-size:1rem}.home-hero-meta{color:#ffffffd1;max-width:680px;font-size:.98rem}.hero-pill-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:24px;display:grid}.hero-pill{color:#e0f2fe;background:#38bdf829;border:1px solid #38bdf838;border-radius:999px;padding:14px 18px;font-size:.95rem;font-weight:600}.home-banner-visual{width:100%;min-width:320px}.home-banner-slider{border:1px solid #ffffff1f;border-radius:32px;min-height:520px;position:relative;overflow:hidden;box-shadow:0 32px 100px #0c5c9a47}.home-banner-slider .slide{opacity:0;background-position:50%;background-size:cover;animation:18s ease-in-out infinite slideFade;position:absolute;inset:0}.home-banner-slider .slide-1{background-image:linear-gradient(#051e3752,#051e3724),url(https://images.unsplash.com/photo-1526481280691-8f00c53a9c3d?auto=format&fit=crop&w=1200&q=80)}.home-banner-slider .slide-2{background-image:linear-gradient(#051e3747,#051e3738),url(https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?auto=format&fit=crop&w=1200&q=80);animation-delay:6s}.home-banner-slider .slide-3{background-image:linear-gradient(#051e375c,#051e372e),url(https://images.unsplash.com/photo-1511105364563-21b5d5a39cbb?auto=format&fit=crop&w=1200&q=80);animation-delay:12s}.home-banner-slider .slide-overlay{background:linear-gradient(#0000 0%,#061831d6 64%);flex-direction:column;justify-content:flex-end;padding:36px;display:flex;position:absolute;inset:0}.home-banner-slider .slide-chip{color:#d8f3ff;letter-spacing:.08em;text-transform:uppercase;background:#00b4ff29;border-radius:999px;margin-bottom:18px;padding:10px 18px;font-size:.8rem;font-weight:700;display:inline-flex}.home-banner-slider .slide-overlay h3{color:#f3f8ff;margin:0 0 12px;font-size:clamp(2rem,2.8vw,3rem);line-height:1.05}.home-banner-slider .slide-overlay p{color:#f1f8fff0;max-width:520px;margin:0;font-size:1rem;line-height:1.8}@keyframes slideFade{0%,3%,to{opacity:0}5%,33%{opacity:1}35%,98%{opacity:0}}.hero-slider-controls{justify-content:center;gap:10px;margin-top:18px;display:flex}.hero-slider-controls .control{background:#ffffff59;border-radius:50%;width:12px;height:12px;transition:transform .2s,background .2s}.hero-slider-controls .control.active{background:#fff;transform:scale(1.15)}.hero-slider-controls .control:hover{transform:scale(1.1)}.hero-card-panel{background:linear-gradient(#fffffffa,#e6fbff);border:1px solid #39a3e12e;border-radius:36px;min-height:420px;padding:32px;box-shadow:0 30px 70px #0237541f}.hero-card-top{justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;display:flex}.hero-card-label{color:#0f172a;letter-spacing:.04em;text-transform:uppercase;background:#ffffffd9;border-radius:999px;padding:8px 14px;font-size:.82rem;font-weight:700;display:inline-flex}.hero-card-top h3{color:#0f172a;margin:0;font-size:1.6rem}.hero-card-chip{color:#fff;background:linear-gradient(135deg,#34d399,#10b981);border-radius:16px;padding:10px 16px;font-size:.95rem;font-weight:700}.hero-card-items{gap:16px;display:grid}.hero-card-item{background:#e9f9ff;border:1px solid #1eb4f14d;border-radius:24px;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;display:flex}.hero-card-item strong{color:#0f172a;font-size:1rem;display:block}.hero-card-item p{color:#475569;margin:6px 0 0;font-size:.95rem;line-height:1.6}.home-category-section,.home-feature-section,.home-difference-section{padding:56px 0}.home-category-section .section-label,.home-difference-section .section-label{margin-bottom:14px}.category-intro h2,.difference-copy h2{margin-bottom:16px;font-size:clamp(2.4rem,3vw,3.4rem)}.category-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:22px;display:grid}.service-card{background:#ffffff14;border:1px solid #ffffff1f;border-radius:28px;flex-direction:column;gap:18px;min-height:220px;padding:26px;display:flex}.service-icon{color:#cbe7ff;background:#00a3ff2e;border-radius:16px;place-items:center;width:48px;height:48px;display:grid}.service-card h3{margin:0;font-size:1.15rem}.service-card p{color:#dbeafe;line-height:1.8}.difference-grid{grid-template-columns:1.1fr .9fr;align-items:start;gap:32px;display:grid}.difference-copy p{color:#f1f8fff0;max-width:620px;margin-bottom:28px}.difference-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;display:grid}.difference-stats div{background:#ffffff14;border:1px solid #ffffff1a;border-radius:22px;padding:20px}.difference-stats strong{color:#f8fafc;margin-bottom:8px;font-size:1.1rem;display:block}.difference-stats span{color:#cbd5e1;font-size:.95rem}.difference-cards{gap:18px;display:grid}.difference-card{background:#ffffff0f;border:1px solid #ffffff1a;border-radius:26px;padding:24px}.difference-card-top{align-items:center;gap:12px;margin-bottom:14px;display:flex}.difference-card-top h3{margin:0;font-size:1.1rem}.difference-card p{color:#f1f8ffe6;line-height:1.75}.home-feature-section h2{color:#0f172a;text-align:center;margin-bottom:24px;font-size:2.4rem}.home-feature-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;display:grid}.feature-card{background:#fffffff2;border:1px solid #2684ff29;border-radius:26px;padding:28px;box-shadow:0 24px 50px #084a7c14}.feature-card h3{color:#0f172a;margin-bottom:14px;font-size:1.2rem}.feature-card p{color:#475569;font-size:1rem;line-height:1.8}.home-study-section{padding:40px 0 80px}.home-study-header{justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;display:flex}.section-label{color:#0f172a;text-transform:uppercase;letter-spacing:.15em;margin-bottom:8px;font-weight:700}.home-level-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;display:grid}.home-level-card{color:#e2e8f0;background:#0f172ae0;border:1px solid #5eb3eb2e;border-radius:24px;flex-direction:column;gap:20px;padding:28px;display:flex;box-shadow:0 18px 35px #03254166}.home-level-card-title{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.home-level-badge{text-transform:uppercase;border:1px solid #ffffff14;border-radius:999px;padding:8px 14px;font-size:.8rem;font-weight:700;display:inline-flex}.home-level-card h3{color:#f8fafc;margin:0;font-size:1.4rem}.home-level-card-title span{color:#94a3b8;font-size:.95rem}.home-level-card p{color:#cbd5e1;line-height:1.7}.home-level-actions{grid-template-columns:1fr 1fr;gap:12px;display:grid}.home-import-panel{margin-top:32px}@media (width<=1060px){.home-banner-inner,.home-feature-grid,.home-level-grid{grid-template-columns:1fr}}@media (width<=720px){.home-top-banner{padding:60px 0 40px}.home-banner-copy h1{font-size:clamp(2.5rem,7vw,3.6rem)}.home-actions{flex-direction:column}.btn-xl{width:100%}.home-hero-meta{font-size:.95rem}}.guest-landing-card{background:linear-gradient(#fffffff5,#e7fbff);border:1px solid #34b4ed2e;border-radius:28px;max-width:820px;margin:0 auto 40px;padding:34px;box-shadow:0 24px 55px #0c588614}.guest-landing-card h2{margin-bottom:14px;font-size:2.25rem}.guest-landing-card p{color:#475569;margin-bottom:20px;font-size:1.05rem;line-height:1.8}.guest-landing-card ul{color:#334155;margin:0 0 22px;padding-left:20px}.guest-landing-card li{margin-bottom:10px}.guest-landing-card button{min-width:220px}.dashboard-grid{grid-template-columns:1fr;gap:24px;display:grid}@media (width>=992px){.dashboard-grid{grid-template-columns:1.7fr 1.3fr;align-items:start}}