.word-shell{
  max-width: 1080px;
  margin: 0 auto;
}

.word-hero{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 28px 28px 22px;
  background: radial-gradient(1000px 380px at 10% 0%, rgba(141,236,197,.26), transparent 60%),
              radial-gradient(900px 340px at 90% 10%, rgba(134,185,255,.20), transparent 55%),
              rgba(25,32,43,.52);
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
}

.word-hero-kicker{
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(240,255,248,.72);
}

.word-hero-title{
  margin: 10px 0 6px;
  font-size: 56px;
  line-height: 1.05;
}

.word-hero-sub{
  margin: 0;
  max-width: 62ch;
  color: rgba(255,255,255,.82);
}

.word-hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.word-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  text-decoration: none;
}

.word-btn:hover{
  background: rgba(255,255,255,.10);
}

.word-btn-primary{
  border-color: rgba(116, 240, 190, .38);
  background: linear-gradient(180deg, rgba(116, 240, 190, .30), rgba(116, 240, 190, .14));
}

.word-login-hint{
  margin-top: 14px;
  font-size: 14px;
  color: rgba(255,255,255,.78);
}

.word-login-hint a{color: var(--site-accent, #7af0be);}

.word-cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.word-card{
  border-radius: 16px;
  padding: 16px 16px 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(18, 22, 30, .42);
}

.word-card h2{margin: 0 0 6px; font-size: 18px;}
.word-card p{margin: 0; color: rgba(255,255,255,.75);}
.word-card-foot{margin-top: 10px;}
.word-link{color: var(--site-accent, #7af0be); text-decoration: none;}
.word-link:hover{text-decoration: underline;}

@media (max-width: 980px){
  .word-cards{grid-template-columns: 1fr;}
  .word-hero-title{font-size: 44px;}
}

:root[data-theme=light] .word-hero{
  border-color: rgba(25, 50, 72, .16);
  background: radial-gradient(1000px 380px at 10% 0%, rgba(46, 176, 122, .18), transparent 60%),
              radial-gradient(900px 340px at 90% 10%, rgba(54, 126, 190, .16), transparent 55%),
              rgba(255,255,255,.74);
}

:root[data-theme=light] .word-hero-kicker{color: rgba(10, 35, 24, .62);}
:root[data-theme=light] .word-hero-sub{color: rgba(5, 20, 32, .72);}
:root[data-theme=light] .word-btn{border-color: rgba(10, 35, 24, .16); background: rgba(255,255,255,.72); color: rgba(10, 20, 30, .86);}
:root[data-theme=light] .word-card{border-color: rgba(10, 35, 24, .12); background: rgba(255,255,255,.76);}
:root[data-theme=light] .word-card p{color: rgba(20, 30, 40, .72);}

.word-kpi-row{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.word-kpi{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  padding: 12px 14px;
}

.word-kpi-num{font-size: 22px; font-weight: 700;}
.word-kpi-label{font-size: 12px; color: rgba(255,255,255,.72); margin-top: 2px;}

.word-plan{
  margin-top: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(18, 22, 30, .36);
  padding: 16px;
}

.word-plan-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.word-plan-title{margin: 0; font-size: 18px;}

.word-plan-meta{display: flex; gap: 8px; flex-wrap: wrap;}

.word-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.82);
}

.word-progress{
  height: 10px;
  border-radius: 999px;
  margin-top: 12px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}

.word-progress-bar{
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(122,240,190,.85), rgba(134,185,255,.70));
}

.word-plan-form{
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.word-field{display: grid; gap: 6px;}
.word-field-label{font-size: 13px; color: rgba(255,255,255,.86);}
.word-field-help{font-size: 12px; color: rgba(255,255,255,.64);}

.word-input{
  width: 100%;
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  outline: none;
}

.word-input:focus{border-color: rgba(122,240,190,.40); box-shadow: 0 0 0 4px rgba(122,240,190,.12);}

.word-plan-actions{
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 980px){
  .word-kpi-row{grid-template-columns: 1fr;}
  .word-plan-form{grid-template-columns: 1fr;}
}

:root[data-theme=light] .word-kpi{
  border-color: rgba(10, 35, 24, .12);
  background: rgba(255,255,255,.70);
}

:root[data-theme=light] .word-kpi-label{color: rgba(20, 30, 40, .62);}

:root[data-theme=light] .word-plan{
  border-color: rgba(10, 35, 24, .12);
  background: rgba(255,255,255,.74);
}

:root[data-theme=light] .word-badge{
  border-color: rgba(10, 35, 24, .14);
  background: rgba(255,255,255,.72);
  color: rgba(10, 20, 30, .78);
}

:root[data-theme=light] .word-input{
  border-color: rgba(10, 35, 24, .14);
  background: rgba(255,255,255,.80);
  color: rgba(10, 20, 30, .86);
}

:root[data-theme=light] .word-field-label{
  color: rgba(10, 20, 30, .86);
}

:root[data-theme=light] .word-field-help{
  color: rgba(10, 20, 30, .62);
}

.word-subhead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 10px;
}

.word-subtitle{
  font-size: 18px;
  font-weight: 700;
}

.word-subactions{display: flex; gap: 10px; flex-wrap: wrap;}

.word-alert{
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}

.word-alert-error{border-color: rgba(255, 120, 120, .28);}

.word-quiz{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(18, 22, 30, .42);
  padding: 16px;
}

.word-quiz-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.word-quiz-word{font-size: 28px; font-weight: 800; line-height: 1.1;}
.word-quiz-phonetic{margin-top: 4px; font-size: 14px; color: rgba(255,255,255,.72);}

.word-quiz-tip{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.78);
}

.word-choices{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.word-choice{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  border-radius: 14px;
  padding: 12px 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  cursor: pointer;
}

.word-choice:hover{background: rgba(255,255,255,.10);}

.word-choice:disabled{opacity: .72; cursor: default;}

.word-choice:focus-visible{outline: none; box-shadow: 0 0 0 4px rgba(122,240,190,.12); border-color: rgba(122,240,190,.40);}

.word-choice-key{
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
}

.word-choice-text{
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

.word-choice.is-selected{border-color: rgba(134,185,255,.45);}
.word-choice.is-correct{border-color: rgba(122,240,190,.55); background: rgba(122,240,190,.10);}
.word-choice.is-wrong{border-color: rgba(255,120,120,.55); background: rgba(255,120,120,.08);}

.word-result{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}

.word-result.is-correct{border-color: rgba(122,240,190,.38); background: linear-gradient(90deg, rgba(122,240,190,.18), rgba(255,255,255,.06) 55%);}
.word-result.is-wrong{border-color: rgba(255,120,120,.36); background: linear-gradient(90deg, rgba(255,120,120,.16), rgba(255,255,255,.06) 55%);}

.word-result.is-correct strong{color: rgba(122,240,190,.95);}
.word-result.is-wrong strong{color: rgba(255,150,150,.95);}
.word-result-correct{color: rgba(122,240,190,.92); font-weight: 800;}
.word-result-sub{margin-top: 6px; font-size: 13px; color: rgba(255,255,255,.78);}

.word-quiz-actions{margin-top: 12px; display: flex; justify-content: flex-end;}

.word-detail{margin-top: 10px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); padding: 10px 12px;}
.word-detail summary{cursor: pointer; font-weight: 700;}

.word-def{
  margin: 8px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

@media (max-width: 980px){
  .word-choices{grid-template-columns: 1fr;}
}

:root[data-theme=light] .word-quiz,
:root[data-theme=light] .word-alert,
:root[data-theme=light] .word-result,
:root[data-theme=light] .word-choice,
:root[data-theme=light] .word-detail,
:root[data-theme=light] .word-quiz-tip{
  border-color: rgba(10, 35, 24, .12);
}

:root[data-theme=light] .word-quiz{background: rgba(255,255,255,.78);}
:root[data-theme=light] .word-alert{background: rgba(255,255,255,.74);}
:root[data-theme=light] .word-result{background: rgba(255,255,255,.74);}
:root[data-theme=light] .word-choice{background: rgba(255,255,255,.82); color: rgba(10, 20, 30, .88);}
:root[data-theme=light] .word-choice:hover{background: rgba(255,255,255,.92);}
:root[data-theme=light] .word-choice-key{border-color: rgba(10, 35, 24, .14); background: rgba(10, 35, 24, .04);}
:root[data-theme=light] .word-quiz-phonetic{color: rgba(10, 20, 30, .62);}
:root[data-theme=light] .word-quiz-tip{color: rgba(10, 20, 30, .66); background: rgba(255,255,255,.72);}

/* Word list selector + quick grade */
.word-list-form{display:inline-flex; align-items:center; gap:8px;}
.word-field-inline{display:inline-flex; align-items:center; gap:8px;}
.word-field-inline-label{font-size:12px; color: rgba(255,255,255,.78);}
.word-select{
  height: 38px;
  border-radius: 999px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  outline: none;
}
.word-select:focus{border-color: rgba(122,240,190,.40); box-shadow: 0 0 0 4px rgba(122,240,190,.12);}

.word-submeta{margin-top: 4px; font-size: 12px; color: rgba(255,255,255,.72);}

.word-quick{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;}

.word-btn-warn{
  border-color: rgba(255, 205, 110, .38);
  background: linear-gradient(180deg, rgba(255, 205, 110, .26), rgba(255, 205, 110, .10));
}

.word-section-title{margin: 14px 0 10px; font-size: 16px;}

.word-state-list{display:grid; gap:10px; margin-top:10px;}
.word-state-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:12px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(18, 22, 30, .36);
}
.word-state-main{min-width:0;}
.word-state-word{font-weight:800; font-size: 14px;}
.word-state-mean{font-size: 12px; color: rgba(255,255,255,.72); margin-top:2px;}
.word-state-actions{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end;}

:root[data-theme=light] .word-select{border-color: rgba(10, 35, 24, .14); background: rgba(255,255,255,.80); color: rgba(10, 20, 30, .86);}
:root[data-theme=light] .word-field-inline-label,
:root[data-theme=light] .word-submeta{color: rgba(10, 20, 30, .62);}
:root[data-theme=light] .word-state-row{border-color: rgba(10, 35, 24, .12); background: rgba(255,255,255,.78);}
:root[data-theme=light] .word-state-mean{color: rgba(10, 20, 30, .62);}

/* Mobile polish */
@media (max-width: 680px){
  .word-hero{padding: 18px 16px 16px;}
  .word-hero-title{font-size: 38px;}
  .word-hero-actions{gap: 8px;}
  .word-btn{padding: 10px 12px;}
  .word-subhead{flex-direction: column; align-items: flex-start;}
  .word-subactions{width: 100%;}
  .word-select{width: 100%;}
  .word-quiz-word{font-size: 24px;}
  .word-choice{padding: 14px 12px;}
  .word-choice-key{width: 30px; height: 30px;}
}