:root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; color:#292b3d; background:#f7f7f4; font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
button:disabled { opacity:.5; cursor:not-allowed; }
.hidden { display:none!important; }
.app-shell { display:flex; min-height:100vh; }
.sidebar { width:252px; flex:none; background:#fff; border-right:1px solid #ecece8; padding:31px 17px 20px; display:flex; flex-direction:column; min-height:100vh; position:sticky; top:0; height:100vh; }
.brand { display:flex; align-items:center; gap:13px; padding:3px 12px 53px; }
.brand-icon { width:37px; height:37px; border-radius:12px; background:#7775df; display:grid; grid-template-columns:repeat(2,6px); grid-template-rows:repeat(2,6px); gap:4px; place-content:center; transform:rotate(-9deg); box-shadow:0 7px 16px #7775df35; }
.brand-icon span { background:#fff; border-radius:2px; }
.brand-icon span:nth-child(2),.brand-icon span:nth-child(3) { opacity:.65; }
.brand strong { display:block; font-size:25px; line-height:1; font-weight:800; letter-spacing:-1.8px; }
.brand-dot,.heading-dot { color:#7c79e2; }
.brand small { display:block; font-size:10px; color:#a1a3ad; letter-spacing:.05em; margin-top:4px; }
.sidebar-label { font-size:10px; font-weight:800; letter-spacing:.15em; color:#a7a8b2; padding-left:14px; }
.main-nav { display:grid; gap:5px; margin:15px 0 35px; }
.nav-item { border:0; background:transparent; display:flex; align-items:center; width:100%; text-align:left; gap:13px; border-radius:11px; padding:12px 15px; color:#666a79; font-size:13px; font-weight:700; transition:.2s; }
.nav-item:hover,.nav-item.active { background:#efeffe; color:#6663ce; }
.nav-icon { font-size:22px; width:22px; line-height:19px; text-align:center; font-weight:400; }
.nav-count { margin-left:auto; background:#fff; color:#999aaa; border-radius:6px; padding:2px 7px; font-size:10px; }
.sidebar-heading { display:flex; align-items:center; justify-content:space-between; margin-right:8px; }
.icon-button { background:transparent; border:0; color:#9b9ca8; font-size:22px; line-height:20px; }
.icon-button:hover { color:#6765d0; }
.sidebar-categories { margin-top:12px; display:grid; gap:2px; }
.category-nav { border:0; background:transparent; color:#777a88; padding:11px 15px; display:flex; align-items:center; gap:11px; border-radius:10px; text-align:left; font-size:12px; font-weight:700; }
.category-nav:hover,.category-nav.active { background:#f6f6fa; color:#34364c; }
.category-dot { width:8px; height:8px; border-radius:3px; flex:none; }
.category-nav .count { margin-left:auto; color:#b5b5c0; font-size:10px; }
.sidebar-bottom { margin-top:auto; border:1px solid #efedff; background:#f8f7ff; border-radius:15px; padding:16px 14px; display:flex; gap:10px; }
.sidebar-note-icon { color:#807de2; font-size:20px; }
.sidebar-bottom strong { font-size:11px; line-height:1.4; display:block; }
.sidebar-bottom p { font-size:10px; color:#9293a2; line-height:1.65; margin:5px 0 0; }
.main-area { flex:1; min-width:0; }
.topbar { height:79px; background:#fff; border-bottom:1px solid #eeeef0; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(30px,5vw,76px); }
.breadcrumb { font-size:10px; font-weight:800; letter-spacing:.12em; color:#a2a4ae; }
.breadcrumb span { padding:0 10px; color:#d3d3d8; }
.breadcrumb strong { color:#6e6ed3; }
.button { border:0; border-radius:10px; padding:12px 18px; display:inline-flex; justify-content:center; align-items:center; gap:10px; font-size:12px; font-weight:800; white-space:nowrap; transition:transform .2s,box-shadow .2s,background .2s; }
.button:hover:not(:disabled) { transform:translateY(-2px); }
.button-primary { background:#7775dd; color:#fff; box-shadow:0 6px 15px #7775dd2b; }
.button-primary:hover { background:#6866cf; box-shadow:0 9px 20px #7775dd3d; }
.button-light { background:#fff; color:#46417b; }
.button-outline { background:#fff; border:1px solid #e5e5eb; color:#656878; box-shadow:none; }
.view { display:none; padding:45px clamp(30px,5vw,76px) 70px; max-width:1500px; margin:auto; }
.view.active { display:block; }
.eyebrow,.section-kicker,.preview-kicker { color:#8b89d8; font-size:10px; font-weight:800; letter-spacing:.17em; }
.eyebrow-spark { font-size:14px; vertical-align:-1px; margin-right:5px; }
.page-intro { display:flex; justify-content:space-between; min-height:276px; position:relative; }
.page-intro>div:first-child { z-index:1; }
.page-intro h1,.section-header h1 { font-size:clamp(38px,4vw,58px); letter-spacing:-.065em; line-height:1.12; margin:19px 0 15px; font-weight:800; }
.page-intro h1 em { font-family:Georgia,serif; color:#7775dc; font-weight:400; letter-spacing:-.065em; }
.page-intro p,.section-header p { font-size:13px; color:#9293a0; max-width:420px; line-height:1.8; margin:0; }
.intro-art { width:315px; position:relative; margin-right:65px; }
.art-card { position:absolute; border-radius:16px; box-shadow:0 18px 40px #45446615; }
.art-card-back { background:#e7e4fb; color:#aaa4d6; width:230px; height:155px; top:26px; left:28px; transform:rotate(14deg); display:flex; align-items:end; justify-content:center; padding:20px; font-family:Georgia,serif; font-style:italic; font-size:18px; gap:10px; }
.art-card-front { width:235px; height:163px; background:white; top:55px; left:10px; transform:rotate(-8deg); padding:22px 24px; }
.art-spark { color:#dfb47a; position:absolute; right:20px; top:14px; font-size:20px; }
.art-word { font-family:Georgia,serif; font-size:32px; color:#34344b; margin-top:14px; }
.art-rule { height:1px; background:#ecebf0; margin:10px 0; }
.art-translation { font-size:12px; color:#a4a0b1; }
.art-orbit { position:absolute; border:1px solid #dad8ef; border-radius:50%; width:17px; height:17px; }
.orbit-one { right:11px; top:12px; }
.orbit-two { right:20px; bottom:28px; width:9px; height:9px; background:#d7d3ee; }
.stats-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; }
.stat-card { background:#fff; border:1px solid #ededf0; border-radius:15px; padding:20px 23px; min-height:150px; box-shadow:0 6px 22px #30314b04; display:flex; flex-direction:column; align-items:flex-start; }
.stat-icon { width:32px; height:32px; display:grid; place-items:center; border-radius:9px; font-size:17px; margin-bottom:8px; }
.stat-icon.purple { color:#7775dd; background:#eeeeff; }
.stat-icon.orange { color:#d7a56d; background:#fff4e7; }
.stat-icon.green { color:#7eaa9d; background:#e9f5ef; }
.stat-label { font-size:11px; font-weight:800; color:#8e909e; }
.stat-card strong { font-size:31px; letter-spacing:-.08em; line-height:1.1; margin:5px 0 2px; }
.stat-card small { font-size:10px; color:#b0b1bb; }
.overview-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:18px; margin-top:19px; }
.daily-panel,.category-panel { min-height:241px; border-radius:16px; padding:27px 29px; position:relative; overflow:hidden; }
.daily-panel { background:#7775dd; color:#fff; }
.daily-panel .section-kicker { color:#d4d1ff; }
.daily-panel h2 { font-size:24px; letter-spacing:-.045em; line-height:1.25; margin:28px 0 8px; max-width:320px; }
.daily-panel p { font-size:11px; color:#e3e1ff; line-height:1.7; max-width:310px; margin:0 0 17px; }
.daily-decoration { position:absolute; font-size:185px; opacity:.12; right:-2px; top:-26px; line-height:1; }
.category-panel { background:#fff; border:1px solid #ededf0; }
.panel-heading { display:flex; align-items:end; justify-content:space-between; }
.panel-heading h2 { font-size:19px; letter-spacing:-.04em; margin:6px 0 13px; }
.text-button { background:transparent; border:0; color:#7775dd; font-size:11px; font-weight:800; padding:6px; }
.category-list { display:grid; gap:1px; }
.category-row { display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid #f3f3f5; font-size:11px; font-weight:700; }
.category-row .bar { margin-left:auto; width:74px; height:5px; background:#f3f2f7; border-radius:10px; overflow:hidden; }
.category-row .bar span { height:100%; display:block; border-radius:10px; }
.category-row .category-count { width:25px; text-align:right; color:#aaaab5; font-size:10px; }
.section-header { display:flex; align-items:end; justify-content:space-between; margin-bottom:30px; }
.section-header h1 { margin:14px 0 9px; }
.library-panel,.practice-config { background:#fff; border:1px solid #ededf0; border-radius:17px; box-shadow:0 6px 22px #30314b04; }
.library-toolbar { padding:18px; display:flex; gap:10px; border-bottom:1px solid #efeff1; }
.search-box { border:1px solid #e6e6ed; border-radius:9px; display:flex; align-items:center; gap:8px; padding:0 12px; flex:1; color:#9a9baa; }
.search-box span { font-size:22px; line-height:1; }
.search-box input { border:0; outline:0; width:100%; height:41px; min-width:0; color:#292c3d; background:transparent; font-size:12px; }
.search-box input::placeholder { color:#b4b5bf; }
select,.form-input,textarea { border:1px solid #e4e4ec; background:#fff; border-radius:9px; color:#424555; outline:none; transition:border .2s,box-shadow .2s; }
select:focus,.form-input:focus,textarea:focus,.search-box:focus-within { border-color:#aaa8f1; box-shadow:0 0 0 3px #7775dd15; }
select { padding:0 12px; height:43px; min-width:170px; font-size:12px; }
.word-list { min-height:140px; }
.word-row { display:grid; grid-template-columns:minmax(120px,1fr) minmax(120px,1fr) 130px 90px 76px; gap:14px; align-items:center; padding:16px 23px; border-top:1px solid #f0f0f2; font-size:12px; }
.word-row:first-child { border-top:0; }
.word-row:hover { background:#fbfbff; }
.word-term { font-weight:800; word-break:break-word; }
.word-translation { color:#747684; word-break:break-word; }
.word-category { display:inline-flex; align-items:center; gap:7px; color:#838595; font-size:10px; }
.word-status { font-size:10px; color:#9b9ba9; }
.word-status.due { color:#c68e56; }
.word-status.learned { color:#6b9d8d; }
.row-actions { display:flex; justify-content:flex-end; gap:2px; }
.row-actions button { border:0; background:transparent; color:#a1a2af; font-size:16px; padding:5px; border-radius:6px; }
.row-actions button:hover { background:#f0effc; color:#6f6dd7; }
.empty { padding:45px 20px; text-align:center; color:#999ba7; font-size:12px; }
.empty-icon { font-size:28px; color:#a9a8e7; margin-bottom:9px; }
.empty strong { display:block; color:#45475b; font-size:15px; margin-bottom:5px; }
.empty .button { margin-top:15px; }
.practice-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(250px,.75fr); gap:19px; }
.practice-config { padding:31px; }
.config-block { display:flex; gap:15px; align-items:start; }
.config-number { width:31px; height:31px; border-radius:9px; background:#efefff; color:#7775dd; display:grid; place-items:center; font-size:10px; font-weight:800; flex:none; }
.config-block h2 { font-size:16px; letter-spacing:-.035em; margin:0 0 4px; }
.config-block p { font-size:11px; color:#a4a5b0; margin:0; }
.mode-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; margin:22px 0 28px; }
.mode-card { border:1px solid #e9e9ef; background:#fff; border-radius:12px; min-height:155px; padding:16px; text-align:left; display:flex; flex-direction:column; align-items:flex-start; transition:.2s; }
.mode-card:hover { border-color:#b9b7ef; transform:translateY(-2px); }
.mode-card.selected { border-color:#8987e3; background:#f9f8ff; box-shadow:0 0 0 3px #7775dd12; }
.mode-icon { color:#7775dd; font-size:22px; margin-bottom:12px; }
.mode-card strong { font-size:11px; }
.mode-card small { font-size:9px; color:#a4a5b0; line-height:1.45; margin:5px 0 11px; }
.mode-count { font-size:9px; font-weight:800; color:#7775dd; margin-top:auto; }
.config-divider { height:1px; background:#eeeef1; margin-bottom:26px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:21px 0 0; }
.field { display:flex; flex-direction:column; gap:8px; }
.field span { font-size:10px; color:#777987; font-weight:800; }
.field select { width:100%; }
.practice-hint { color:#c18568; font-size:11px; min-height:17px; margin:10px 0 0; }
.practice-preview { border-radius:16px; background:#eeeefa; padding:27px 25px; display:flex; flex-direction:column; align-items:center; }
.preview-kicker { color:#9692d6; align-self:flex-start; }
.preview-card { width:100%; max-width:235px; height:185px; background:#fff; border-radius:15px; margin:32px 0 24px; box-shadow:0 17px 26px #6562b31c; transform:rotate(-5deg); padding:19px 21px; display:flex; flex-direction:column; }
.preview-top { display:flex; justify-content:space-between; color:#b6b6c4; font-size:8px; font-weight:800; letter-spacing:.1em; }
.preview-top span { color:#dcb078; font-size:15px; }
.preview-card strong { font-family:Georgia,serif; font-size:29px; letter-spacing:-.04em; margin:19px 0 10px; }
.preview-divider { height:1px; background:#efedf3; }
.preview-card small { font-size:9px; color:#b0b0bd; margin-top:15px; }
.preview-steps { display:grid; gap:10px; align-self:stretch; }
.preview-steps div { font-size:10px; color:#686783; font-weight:700; }
.preview-steps span { display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:#fff; color:#8d8ade; margin-right:8px; font-size:9px; }
.practice-session,.practice-finish { max-width:650px; margin:10px auto; }
.session-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:25px; }
.session-exit { background:transparent; border:0; color:#9495a3; font-size:11px; font-weight:800; }
.session-count { font-size:11px; font-weight:800; color:#898ada; }
.progress-track { height:5px; border-radius:10px; background:#e9e9f1; margin-bottom:22px; overflow:hidden; }
.progress-track span { height:100%; display:block; background:#7775dd; border-radius:10px; transition:width .2s; }
.flashcard { width:100%; min-height:310px; border:1px solid #e9e9f1; border-radius:22px; background:#fff; box-shadow:0 20px 55px #3b3d5a0b; padding:33px; display:flex; flex-direction:column; justify-content:space-between; text-align:center; cursor:pointer; }
.flashcard:focus-visible { outline:3px solid #a8a6ef; }
.flashcard .flash-label { font-size:10px; letter-spacing:.16em; font-weight:800; color:#aaaab7; }
.flashcard .flash-term { font-family:Georgia,serif; font-size:clamp(30px,5vw,48px); letter-spacing:-.05em; line-height:1.2; overflow-wrap:anywhere; }
.flashcard .flash-help { font-size:11px; color:#aaaab7; }
.flashcard.revealed { background:#fdfcff; }
.answer-actions { display:flex; gap:12px; margin-top:18px; }
.answer-actions .button { flex:1; padding:16px; }
.session-tip { text-align:center; font-size:10px; color:#acacb8; margin-top:18px; }
.finish-box { text-align:center; background:#fff; border:1px solid #ececf0; border-radius:18px; padding:47px 28px; }
.finish-symbol { display:inline-grid; place-items:center; width:62px; height:62px; border-radius:18px; background:#eeedff; color:#7775dd; font-size:32px; }
.finish-box h2 { font-size:30px; letter-spacing:-.05em; margin:17px 0 7px; }
.finish-box p { color:#999aa7; font-size:12px; }
.finish-stats { display:flex; justify-content:center; gap:45px; margin:28px 0; }
.finish-stats strong { display:block; font-size:25px; }
.finish-stats small { font-size:10px; color:#a2a3af; }
.finish-actions { display:flex; gap:10px; justify-content:center; }
.modal { border:0; border-radius:18px; padding:0; width:min(560px,calc(100vw - 24px)); box-shadow:0 30px 100px #1f214c35; color:#292b3e; max-height:calc(100vh - 34px); overflow:auto; }
.modal::backdrop { background:#22243d88; backdrop-filter:blur(3px); }
.modal-small { width:min(440px,calc(100vw - 24px)); }
.modal-inner { padding:27px; }
.modal-header { display:flex; justify-content:space-between; align-items:start; margin-bottom:22px; }
.modal-header h2 { font-size:22px; letter-spacing:-.05em; margin:0 0 4px; }
.modal-header p { color:#9c9daa; font-size:11px; line-height:1.5; margin:0; }
.modal-close { border:0; background:#f5f5f8; color:#8d8e9c; border-radius:8px; width:29px; height:29px; font-size:18px; }
.tabs { display:flex; gap:4px; background:#f4f4f8; padding:4px; border-radius:10px; margin-bottom:22px; }
.tab { flex:1; border:0; background:transparent; padding:9px; border-radius:7px; font-size:11px; font-weight:800; color:#999aa7; }
.tab.active { color:#6664d0; background:#fff; box-shadow:0 2px 7px #3e3c7710; }
.form-grid { display:grid; gap:15px; }
.form-label { display:flex; flex-direction:column; gap:7px; color:#656777; font-size:10px; font-weight:800; }
.form-input { width:100%; padding:12px 13px; font-size:12px; }
.form-label select { width:100%; }
.form-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:24px; }
.bulk-help { font-size:11px; color:#999aa7; line-height:1.65; margin:-4px 0 12px; }
.bulk-help code { background:#f2f1fb; color:#7775dd; padding:1px 4px; border-radius:3px; }
.bulk-textarea { width:100%; height:175px; resize:vertical; padding:13px; font-size:12px; line-height:1.65; }
.file-row { display:flex; align-items:center; gap:9px; margin-top:13px; }
.file-label { border:1px dashed #cccbea; border-radius:8px; color:#7775dd; font-size:11px; font-weight:800; padding:9px 12px; cursor:pointer; }
.file-label input { display:none; }
.file-name { color:#a1a2ac; font-size:10px; }
.category-manage-row { display:flex; align-items:center; gap:10px; border-top:1px solid #eeeef2; padding:11px 0; }
.category-manage-row:first-child { border-top:0; }
.category-manage-row strong { flex:1; font-size:12px; }
.category-manage-row button { border:0; background:#f7f7fa; color:#868795; border-radius:7px; font-size:11px; padding:7px 9px; }
.category-manage-row button:hover { color:#7775dd; }
.modal-note { font-size:10px; color:#aaaab5; line-height:1.6; margin-top:13px; }
.toast { position:fixed; right:24px; bottom:24px; background:#303247; color:#fff; border-radius:10px; padding:12px 17px; font-size:11px; font-weight:700; box-shadow:0 13px 35px #20213f2d; opacity:0; pointer-events:none; transform:translateY(12px); transition:.25s; z-index:10; max-width:320px; }
.toast.visible { opacity:1; transform:translateY(0); }