:root{font-family:Inter,"DM Sans",system-ui,sans-serif;color:#173936;background:#f4f8f7;--green:#27766f;--deep:#18524d;--soft:#edf8f4;--line:#cce0db;--muted:#607a76;--coral:#e8876f}
*{box-sizing:border-box}
body{min-height:100vh;margin:0;background:radial-gradient(circle at 8% 0,#dff2ec 0,transparent 34rem),#f4f8f7}
button,input,select{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
header{display:flex;justify-content:space-between;align-items:center;padding:17px clamp(18px,5vw,72px);border-bottom:1px solid var(--line);background:rgba(255,255,255,.9);backdrop-filter:blur(14px)}
.brand{display:flex;align-items:center;gap:14px;color:#173936;text-decoration:none}
.brand img{width:116px}
.brand span{padding-left:14px;border-left:1px solid var(--line)}
.account-bar{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:14px}
main{width:min(1140px,calc(100% - 30px));margin:38px auto}
.auth-layout{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:45px;min-height:68vh}
.intro{padding:40px}
.eyebrow{margin:0;color:var(--coral);font-size:12px;font-weight:750;letter-spacing:.13em;text-transform:uppercase}
.intro h1{max-width:760px;margin:10px 0 20px;font:500 clamp(40px,6vw,72px)/1.04 Georgia,serif;letter-spacing:-.035em}
.intro>p:not(.eyebrow){max-width:660px;color:var(--muted);font-size:18px;line-height:1.65}
.language-pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.language-pills span{padding:9px 14px;border:1px solid var(--line);border-radius:99px;background:#fff}
.auth-card,.panel,.settings{padding:clamp(22px,4vw,38px);border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.96);box-shadow:0 20px 60px rgba(23,57,54,.11)}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:23px;padding:5px;border-radius:14px;background:var(--soft)}
.tabs button{padding:11px;border:0;border-radius:10px;color:var(--muted);background:transparent}
.tabs .active{color:#fff;background:var(--green)}
form{display:grid;gap:16px}
label{display:grid;gap:7px;font-size:14px;font-weight:650}
label small{color:var(--muted);font-weight:400}
input,select{width:100%;padding:12px 14px;border:1px solid #abc6c0;border-radius:12px;color:#173936;background:#fff;outline:0}
input:focus,select:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(39,118,111,.12)}
.check{display:flex;gap:10px}
.check input,.option input,.language-grid input{width:auto;margin-top:3px}
.primary,.secondary,.danger{min-height:44px;padding:10px 17px;border-radius:12px;font-weight:700}
.primary{border:0;color:#fff;background:linear-gradient(135deg,var(--green),var(--deep));box-shadow:0 8px 20px rgba(39,118,111,.2)}
.primary:disabled{opacity:.55}
.secondary{border:1px solid var(--line);color:var(--deep);background:#fff}
.danger{border:1px solid #efb7ac;color:#96372b;background:#fff3f0}
.status{min-height:20px;margin:0;color:var(--muted);font-size:13px}
.status.error{color:#9e3529}
.status.success{color:#17674a}
.workspace{display:grid;gap:20px}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;padding:8px;border:1px solid var(--line);border-radius:18px;background:#fff}
.steps button{display:flex;align-items:center;gap:9px;padding:10px;border:0;border-radius:12px;color:var(--muted);background:transparent}
.steps b{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--soft)}
.steps .active{color:#fff;background:var(--green)}
.steps .active b{color:var(--green);background:#fff}
.panel-head{display:flex;justify-content:space-between;align-items:start;gap:20px;margin-bottom:25px}
.panel-head h2{margin:5px 0 8px;font:500 clamp(29px,4vw,43px)/1.14 Georgia,serif}
.panel-head p:not(.eyebrow){margin:0;color:var(--muted)}
.vocabulary-start{display:grid;min-height:260px;place-items:center;text-align:center}
.vocabulary-start h2{margin:0 0 24px;font:500 clamp(34px,5vw,54px)/1.1 Georgia,serif}
.vocabulary-start .primary{min-width:min(360px,100%);font-size:17px}
.upload{place-items:center;padding:36px;border:1.5px dashed #93b9b1;border-radius:20px;background:var(--soft);text-align:center}
.upload input{position:absolute;width:1px;height:1px;opacity:0}
.upload i{display:grid;place-items:center;width:52px;height:52px;margin-bottom:10px;border-radius:16px;color:#fff;background:var(--green);font-size:30px;font-style:normal}
.document-list,.choices,.history{display:grid;gap:10px;margin-top:20px}
.document{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:14px}
.document div{display:flex;align-items:center;gap:11px;min-width:0}
.document b{display:grid;place-items:center;flex:0 0 auto;width:39px;height:39px;border-radius:11px;background:var(--soft);font-size:12px}
.document span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.document button{border:0;color:#9b372a;background:transparent}
.empty{padding:23px;border-radius:15px;color:var(--muted);background:var(--soft);text-align:center}
.setup-form{max-width:800px}
.setup-form fieldset{display:grid;gap:11px;margin:0;padding:20px;border:1px solid var(--line);border-radius:17px}
.setup-form legend{padding:0 7px;font-weight:700}
.choices{margin:0}
.choice,.option{display:flex;align-items:flex-start;gap:11px;padding:13px;border:1px solid var(--line);border-radius:13px}
.choice-main{display:flex;align-items:flex-start;gap:11px;min-width:0;flex:1}
.choice>.document-icon{flex:0 0 auto;margin-left:auto}
.choice input{width:auto;margin-top:3px}
.choice small{margin-left:auto;color:var(--muted);font-weight:500}
.weakness-overviews{display:grid;gap:12px}
.weakness-overview{padding:15px;border:1px solid var(--line);border-radius:15px;background:var(--soft)}
.weakness-overview-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.weakness-overview-head h3{margin:0;font-size:17px}
.weakness-overview-head .document-icon{display:grid;place-items:center;flex:0 0 auto;width:34px;height:34px;padding:0;border:1px solid var(--line);border-radius:50%;background:#fff}
.weakness-overview h4{margin:13px 0 5px;color:var(--green);font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.weakness-word-list{display:grid;gap:5px;margin:0;padding:0;list-style:none}
.weakness-word-list li{display:grid;grid-template-columns:minmax(90px,1fr) minmax(90px,1fr) auto;align-items:baseline;gap:8px;padding:7px 9px;border-radius:9px;background:#fff;font-size:13px}
.weakness-word-list li>span{overflow-wrap:anywhere;color:var(--deep)}
.weakness-word-list li>small{margin:0;font-size:11px;white-space:nowrap}
.option span{display:grid;gap:4px}
.choice:has(input:checked),.option:has(input:checked){border-color:var(--green);background:var(--soft);box-shadow:0 0 0 2px rgba(39,118,111,.13)}
.vocab-start-head{margin-bottom:14px}
.document-list{margin:0 0 18px}
.document-actions{flex:0 0 auto}
.document-last-result{flex:0 0 auto;color:var(--muted);font-size:12px;font-weight:650;white-space:nowrap}
.document .document-icon{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--line);border-radius:50%;background:#fff;font-size:22px;line-height:1}
.document .preview,.choice .preview{color:#667773}
.eye-icon{position:relative;display:block;width:17px;height:11px;border:1.6px solid currentColor;border-radius:75% 15%;transform:rotate(45deg)}
.eye-icon::after{position:absolute;top:50%;left:50%;width:4px;height:4px;border-radius:50%;background:currentColor;content:"";transform:translate(-50%,-50%)}
.document .rename{color:var(--deep)}
.document .remove{color:#9b372a}
.compact-panel-head{margin-bottom:12px}
.compact-setup{gap:8px;max-width:680px}
.setup-form .compact-fieldset{gap:6px;padding:10px 12px;border-radius:13px}
.compact-fieldset .choice,.compact-fieldset .option{padding:7px 9px}
.compact-fieldset .option small{font-size:11px;line-height:1.35}
.compact-fieldset select{min-height:42px;padding-block:9px}
.setup-upload-link{justify-self:start;margin-top:2px}
.compact-options{grid-template-columns:repeat(2,minmax(0,1fr))}
.compact-options legend{grid-column:1/-1}
.setup-summary{display:grid;gap:4px;padding:11px 13px;border:1px solid #b8d7cf;border-left:5px solid var(--green);border-radius:12px;background:#f5fbf8;font-size:13px;line-height:1.45}
.setup-summary span{color:var(--muted)}
.language-fieldset label{grid-template-columns:minmax(120px,180px) minmax(180px,300px);align-items:center;gap:12px}
.language-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.language-grid label{position:relative}
.language-grid input{position:absolute;opacity:0}
.language-grid span{display:flex;align-items:center;gap:10px;padding:14px;border:1px solid var(--line);border-radius:13px}
.language-grid b{display:grid;place-items:center;width:36px;height:30px;border-radius:8px;color:var(--green);background:var(--soft)}
.language-grid input:checked+span{border-color:var(--green);box-shadow:0 0 0 2px rgba(39,118,111,.14)}
.large{min-height:54px}
.quiz-top{display:flex;justify-content:space-between;align-items:start;gap:20px}
.quiz-top>div{flex:1}
.material-warning{max-width:680px;margin:12px auto 0;padding:9px 12px;border:1px solid rgba(232,135,111,.42);border-left:5px solid var(--coral);border-radius:10px;background:#fff5f1;color:#7b3d30;font-size:13px;line-height:1.35}
.progress{width:min(480px,90%);height:8px;margin-top:8px;overflow:hidden;border-radius:99px;background:#dceae6}
.progress i{display:block;width:0;height:100%;background:var(--coral);transition:width .3s}
.word-card{max-width:680px;margin:16px auto 8px;padding:clamp(20px,3.5vw,34px);border:1px solid var(--line);border-radius:24px;text-align:center}
.word-card .origin{margin:0 0 3px;color:var(--muted);font-size:10px;line-height:1.3}
.word-card .ask{margin:0;color:var(--muted);font-size:12px;line-height:1.35}
.word-card h2{margin:6px 0 18px;font:500 clamp(36px,6vw,58px)/1.08 Georgia,serif}
.spoken-word{display:flex;align-items:center;justify-content:center;gap:12px;margin:6px 0 18px}
.spoken-word h2{min-width:0;margin:0}
.pronunciation-button{display:inline-grid;place-items:center;min-width:46px;min-height:46px;padding:9px;border:1px solid #b7d5ce;border-radius:50%;color:var(--green);background:var(--soft);box-shadow:0 4px 10px rgba(24,85,76,.12);font-size:21px;line-height:1}
.pronunciation-button:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(24,85,76,.17)}
.pronunciation-button:focus-visible{outline:3px solid rgba(239,125,73,.35);outline-offset:2px}
.pronunciation-button:disabled{cursor:wait;opacity:.62;transform:none}
.pronunciation-with-label{display:inline-flex;width:auto;border-radius:999px;padding:9px 14px;font:inherit;font-size:14px;font-weight:600;line-height:1.2}
.answer-pronunciation{margin-top:12px}
.ai-voice-note{display:block;margin-top:16px;color:var(--muted);font-size:11px}
.word-card form{gap:11px;text-align:left}
.word-card form label{gap:8px;font-size:13px}
#answerInput{min-height:66px;padding:16px 18px;border-width:2px;border-color:#8eb8af;border-radius:15px;font-size:22px;line-height:1.25}
#answerBtn{width:100%;min-height:58px;font-size:17px}
.feedback{margin-top:18px;padding:17px;border-radius:14px}
.feedback.correct{color:#165f43;background:#e9f7ef}
.feedback.wrong{color:#8d3529;background:#fff0ed}
.summary{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}
.score{padding:20px;border-radius:17px;background:var(--soft);text-align:center}
.score strong{display:block;font-size:34px}
.history-row{display:grid;grid-template-columns:1fr auto;gap:8px;padding:15px;border:1px solid var(--line);border-radius:14px}
.history-row small{color:var(--muted)}
.flashcard-documents{display:grid;gap:11px}.flashcard-document{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 17px;border:1px solid var(--line);border-radius:15px;background:#fff}.flashcard-document div{display:grid;gap:4px;min-width:0}.flashcard-document b{overflow:hidden;text-overflow:ellipsis}.flashcard-document small{color:var(--muted)}.flashcard-deck{display:grid;gap:18px;max-width:720px;margin:auto}.flashcard-deck-head{display:flex;align-items:center;justify-content:space-between;gap:14px}.flashcard-deck-head>div{display:grid;gap:4px}.flashcard-deck-head small{color:var(--muted)}.study-card{display:grid;place-items:center;min-height:330px;padding:32px;border:2px solid #b8d9d1;border-radius:24px;background:linear-gradient(145deg,#fff,#edf8f4);text-align:center;box-shadow:0 16px 36px rgba(23,57,54,.1)}.study-card p{margin:0;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em}.study-card h3{margin:10px 0 24px;font:500 clamp(36px,7vw,62px)/1.08 Georgia,serif}.flashcard-back{display:grid;gap:8px;width:min(470px,100%);margin:0 0 22px;padding:20px;border-top:1px solid var(--line)}.flashcard-back strong{font-size:clamp(26px,5vw,42px)}.flashcard-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.settings{box-shadow:none}
.settings summary{cursor:pointer;font-weight:700}
.settings button{margin-top:16px}
dialog{width:min(620px,calc(100% - 28px));padding:28px;border:0;border-radius:22px;color:#173936;box-shadow:0 25px 90px rgba(0,0,0,.3)}
dialog::backdrop{background:rgba(10,35,32,.5)}
dialog p{color:var(--muted);line-height:1.6}
.document-preview-dialog{width:min(860px,calc(100% - 28px));max-height:var(--vocab-dialog-height,calc(100vh - 24px));overflow:auto}
.document-preview-pages{display:grid;gap:18px}.document-preview-page{display:grid;gap:10px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}.document-preview-page img{display:block;max-width:100%;max-height:64vh;margin:auto;border-radius:10px}.document-preview-page iframe{width:100%;height:64vh;border:0;border-radius:10px;background:#fff}.document-preview-page pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;line-height:1.55}
.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
footer{display:flex;justify-content:center;gap:22px;padding:24px;color:var(--muted);font-size:12px}
footer a{color:inherit}
@media(max-width:760px){main{margin-top:20px}
.auth-layout{grid-template-columns:1fr;gap:14px}
.intro{padding:15px 4px}
.intro h1{font-size:42px}
.steps button{justify-content:center}
.steps span{display:none}
.panel-head{display:grid}
.panel-head>.primary{width:100%}
.language-grid{grid-template-columns:1fr}
.summary{grid-template-columns:1fr}
.brand img{width:96px}
.brand span{font-size:12px}
.account-bar>span{display:none}
.word-card{padding:20px 17px}
.flashcard-document,.flashcard-deck-head{align-items:stretch;flex-direction:column}.flashcard-document button,.flashcard-deck-head button{width:100%}.flashcard-controls{grid-template-columns:1fr}.study-card{min-height:280px;padding:24px 17px}
footer{flex-wrap:wrap}
.document-list .document{flex-wrap:wrap}.document-list .document-last-result{order:3;flex-basis:100%;padding-left:50px}.document-list .document-actions{margin-left:auto}
.weakness-word-list li{grid-template-columns:minmax(70px,1fr) minmax(70px,1fr)}.weakness-word-list li>small{grid-column:1/-1}
}