.page-courses .courses-shell{display:flex;flex-direction:column;gap:20px}
.page-courses .courses-heading{
  text-align:center;
  color:#E5E7EB;
}
.course-page-heading{
  margin:0;
  font-size:clamp(2.4rem,4vw,3rem);
  font-weight:800;
}
.course-keywords{
  margin:8px auto 0;
  font-size:0.85rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.7);
}
.page-courses .course-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  background:transparent;
  border-radius:0;
  padding:0;
  box-shadow:none;
  text-align:center;
  align-items:center;
}
.page-courses .course-left{width:100%}
.page-courses .course-title{
  margin:0;
  font-size:28px;
  font-weight:800;
  color:#E5E7EB;
  letter-spacing:.01em;
}
.page-courses .course-sub{
  margin:0;
  color:var(--muted);
  font-size:13px;
  letter-spacing:.01em;
}
.page-courses .course-player{background:transparent;border-radius:0;padding:0;box-shadow:none}
.course-info-panel{
  background:transparent;
  border:none;
  padding:0;
  margin-top:0;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:60vh;
  position:relative;
  overflow:visible;
}
.course-info-inner{
  max-width:760px;
  width:100%;
  text-align:center;
  position:relative;
  z-index:1;
  padding:0;
  border-radius:0;
  border:none;
  background:transparent;
  box-shadow:none;
}
.course-info-inner > *{
  position:relative;
  z-index:1;
}
.course-info-panel::before{
  content:'';
  position:fixed;
  inset:0;
  background: var(--t-bg-body);
  z-index:0;
}
.course-lock-title{
  margin:0 0 10px;
  font-size:clamp(2.2rem,4.5vw,3.2rem);
  font-weight:900;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#f8fafc;
}
.course-lock-subtitle{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.24em;
  color:rgba(94,160,255,0.75);
  margin-bottom:16px;
}
.course-lock-copy{
  color:rgba(210,220,245,0.7);
  margin:0 auto 26px;
  line-height:1.6;
  font-size:15px;
  max-width:560px;
}
.course-layout-field{
  width:min(100%, 520px);
  margin:0 auto 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 12px 10px 18px;
  border:1px solid var(--t-border, rgba(255,255,255,0.1));
  border-radius:18px;
  background:var(--t-surface, rgba(255,255,255,0.035));
}
.course-layout-field span{
  color:var(--t-text-primary, #f8fafc);
  font-size:15px;
  font-weight:650;
  letter-spacing:-0.02em;
  white-space:nowrap;
}
.course-layout-select{
  min-width:210px;
  appearance:none;
  -webkit-appearance:none;
  border:1px solid var(--t-border, rgba(255,255,255,0.12));
  border-radius:14px;
  background:
    linear-gradient(45deg, transparent 50%, var(--t-text-secondary, rgba(226,232,240,0.9)) 50%) calc(100% - 18px) 50% / 7px 7px no-repeat,
    linear-gradient(135deg, var(--t-text-secondary, rgba(226,232,240,0.9)) 50%, transparent 50%) calc(100% - 13px) 50% / 7px 7px no-repeat,
    var(--t-surface-solid, rgba(15,23,42,0.78));
  color:var(--t-text-primary, #f8fafc);
  padding:10px 42px 10px 14px;
  font:600 14px/1.2 "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  outline:none;
  cursor:pointer;
  box-shadow:none;
  transition:border-color .16s ease, background-color .16s ease, transform .12s ease;
}
.course-layout-select:hover{
  border-color:var(--t-border-hover, rgba(255,255,255,0.22));
  background-color:var(--t-surface-hover, rgba(255,255,255,0.08));
}
.course-layout-select:focus{
  border-color:var(--t-border-hover, rgba(255,255,255,0.28));
}
.course-layout-select option{
  background:var(--t-surface-solid, #111827);
  color:var(--t-text-primary, #f8fafc);
}
.course-info-actions{
  display:flex;
  justify-content:center;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.course-info-btn{
  border:1px solid var(--t-border, rgba(255,255,255,0.12));
  background:var(--t-surface-solid, rgba(255,255,255,0.08));
  color:var(--t-text-primary, #f8fafc);
  font-weight:700;
  padding:12px 30px;
  border-radius:999px;
  cursor:pointer;
  font-size:12px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  text-decoration:none;
  transition:transform .12s ease, filter .2s ease;
  box-shadow:none;
  position:relative;
  isolation:isolate;
}
.course-info-btn:hover{
  filter:none;
  background:var(--t-surface-hover, rgba(255,255,255,0.12));
  border-color:var(--t-border-hover, rgba(255,255,255,0.22));
  box-shadow:none;
}
.course-info-btn:active{
  transform:scale(0.98);
}
.course-info-skip-btn{
  background:none;
  border:none;
  padding:0;
  font-size:11px;
  color:rgba(210,220,245,0.6);
  cursor:pointer;
  opacity:0.75;
}
.course-info-skip-btn:hover{ opacity:1; text-decoration:underline; }
[data-theme="light"] .page-courses .course-lock-title,
[data-theme="light"] .page-courses .course-layout-field span,
[data-theme="light"] .page-courses .course-info-btn{
  color:#0f172a;
}
[data-theme="light"] .page-courses .course-lock-copy{
  color:#475569;
}
[data-theme="light"] .page-courses .course-layout-field{
  background:rgba(255,255,255,0.72);
  border-color:rgba(148,163,184,0.32);
}
[data-theme="light"] .page-courses .course-layout-select{
  background:
    linear-gradient(45deg, transparent 50%, #475569 50%) calc(100% - 18px) 50% / 7px 7px no-repeat,
    linear-gradient(135deg, #475569 50%, transparent 50%) calc(100% - 13px) 50% / 7px 7px no-repeat,
    rgba(255,255,255,0.92);
  border-color:rgba(148,163,184,0.36);
  color:#0f172a;
}
[data-theme="light"] .page-courses .course-layout-select:hover,
[data-theme="light"] .page-courses .course-layout-select:focus{
  border-color:rgba(100,116,139,0.46);
  background-color:#ffffff;
}
[data-theme="light"] .page-courses .course-layout-select option{
  background:#ffffff;
  color:#0f172a;
}
[data-theme="light"] .page-courses .course-info-btn{
  background:rgba(255,255,255,0.86);
  border-color:rgba(148,163,184,0.36);
}
[data-theme="light"] .page-courses .course-info-btn:hover{
  background:#ffffff;
  border-color:rgba(100,116,139,0.46);
}
.course-lock-card{
  display:flex;
  justify-content:center;
  margin:8px 0 26px;
}
.course-lock-card-inner{
  width:320px;
  aspect-ratio:1.6/1;
  border-radius:16px;
  background:var(--t-bg-body, #1c1c1b);
  border:1px solid var(--t-border, rgba(255,255,255,.08));
  box-shadow:none;
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  text-align:left;
  position:relative;
  overflow:hidden;
}
.course-lock-card-brand{
  display:flex;
  align-items:center;
  gap:8px;
  opacity:0.5;
  font-size:10px;
  font-weight:900;
  letter-spacing:-0.02em;
  color:#fff;
}
.course-lock-card-icon{
  font-size:14px;
}
.course-lock-card-body{
  display:flex;
  flex-direction:column;
  gap:6px;
  opacity:0.5;
  color:#fff;
}
.course-lock-card-line{
  display:block;
  width:32px;
  height:1px;
  background:rgba(94,160,255,0.4);
}
.course-lock-card-label{
  font-size:8px;
  letter-spacing:0.3em;
  text-transform:uppercase;
}
.course-lock-card-name{
  font-size:12px;
  font-weight:300;
}
.course-lock-card-mark{
  position:absolute;
  inset:auto 14px 14px auto;
  font-size:56px;
  opacity:0.06;
}
.course-lock-note{
  margin-top:16px;
  font-size:9px;
  letter-spacing:0.4em;
  text-transform:uppercase;
  color:#4b5563;
}

@media (max-width:760px){
  .course-lock-title{
    font-size:clamp(1.8rem, 10vw, 2.5rem);
    letter-spacing:0.06em;
  }
  .course-lock-subtitle{
    font-size:10px;
    letter-spacing:0.18em;
  }
  .course-lock-copy{
    font-size:14px;
    margin-bottom:20px;
    padding:0 8px;
  }
  .course-layout-field{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:14px;
  }
  .course-layout-field span{
    text-align:left;
    white-space:normal;
  }
  .course-layout-select{
    width:100%;
    min-width:0;
  }
  .course-lock-card{
    margin-bottom:20px;
  }
  .course-lock-card-inner{
    width:min(100%, 320px);
  }
  .course-info-btn{
    width:min(100%, 220px);
    padding:11px 18px;
    letter-spacing:0.2em;
  }
}
.page-courses .course-player-header{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:12px}
.page-courses .course-detail-title{
  margin:0;
  font-size:20px;
  color:#e5e7eb;
  font-weight:700;
}
.page-courses .course-steps{display:flex;flex-direction:column;gap:12px;max-height:280px;overflow:auto;padding-right:4px;width:100%}
.page-courses .course-player.typing-active .course-steps{display:none}
.page-courses .course-player.typing-active{
  min-height:calc(100vh - 170px);
  display:flex;
  flex-direction:column;
}
.page-courses .course-player.typing-active #courseTypingPanel{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.page-courses .course-player.typing-active .course-typing-area{
  width:100%;
  align-items:center;
}
.page-courses .course-player.typing-active .text-viewport{
  max-width:min(1100px, 96vw);
  margin:0 auto;
}
.page-courses .course-player.typing-active .words{
  justify-content:center;
  text-align:center;
}
.page-courses .course-section{display:flex;flex-direction:column;gap:8px;padding:16px 18px;border-radius:18px;background:var(--t-surface);border:1px solid var(--t-border);box-shadow:none}
.page-courses .course-section-title{font-size:13px;font-weight:700;color:#60a5fa}
.page-courses .course-section-steps{display:flex;gap:8px;flex-wrap:wrap}
.page-courses .course-step{background:rgba(59,130,246,.12);color:#eff6ff;border:1px solid rgba(59,130,246,.3);border-radius:999px;padding:6px 10px;cursor:pointer}
.page-courses .course-step.locked{opacity:0.5;cursor:not-allowed}
.page-courses .course-step.active{border-color:rgba(96,165,250,.9);color:#dbeafe;background:rgba(59,130,246,.2)}
.page-courses .course-step.done{border-color:rgba(52,211,153,.6);color:#6ee7b7;background:rgba(16,185,129,.12)}
.page-courses .course-tabs{display:flex;gap:8px;margin:12px 0}
.page-courses .course-tab{background:#2a2a2a;color:#e6e6e6;border:none;border-radius:999px;padding:6px 12px;cursor:pointer}
.page-courses .course-tab.active{border:1px solid var(--accent);color:var(--accent)}
.page-courses .course-panel{margin-top:10px}
.page-courses .course-lesson-text{color:var(--muted);margin-bottom:10px}
.page-courses #courseStartBtn{
  padding:8px 14px;
  min-height:34px;
  border-radius:10px;
  border:1px solid rgba(59,130,246,.45);
  background:rgba(59,130,246,.12);
  color:#eff6ff;
  font-size:16px;
  font-weight:600;
  letter-spacing:0.02em;
  box-shadow:none;
}
.page-courses #courseStartBtn:hover{
  background:rgba(59,130,246,.18);
  border-color:rgba(59,130,246,.55);
}
.page-courses #courseStartBtn:active{
  background:rgba(59,130,246,.22);
  transform:scale(0.98);
}
.page-courses .course-typing-area{display:flex;flex-direction:column;gap:12px}
.page-courses .text-viewport{width:100%;padding:0;box-sizing:border-box;border:none;border-radius:0;margin-top:4px}
.page-courses .text-viewport.words-mode{overflow:hidden;white-space:normal;height:calc(var(--line-h) * 3 + var(--row-gap) * 2 + var(--lines-viewport-extra))}
.page-courses .text-line{display:inline-block;padding-inline:clamp(8px,4vw,60px);transition:transform 160ms ease;will-change:transform}
.page-courses .words{width:100%;max-width:none;display:flex;flex-wrap:wrap;gap:var(--row-gap);justify-content:flex-start;position:relative;margin:0 auto;text-align:left;overflow-x:visible;border:none;outline:none;user-select:none;color:var(--muted)}
.page-courses .word{display:inline-block;padding:4px 4px;background:transparent;border-radius:6px;color:var(--text);font-family:var(--typing-font);font-size:48px;letter-spacing:0.04em;line-height:var(--line-h);max-width:100%;word-break:break-word;overflow-wrap:anywhere}
.page-courses .word.japanese-word{display:inline-flex;flex-direction:column;align-items:center;gap:2px;min-width:2ch}
.page-courses .word.japanese-word .kana-display{font-size:32px;line-height:1.05;color:#f472b6;font-weight:700}
.page-courses .word.japanese-word .romaji-chars{font-size:18px;line-height:1.2;color:#bfdbfe;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace}
.page-courses .word.pending{color:var(--muted)}
.page-courses .word.correct{color:#b9e6b4;background:rgba(70,160,70,0.06)}
.page-courses .word.wrong{color:#f08b8b;background:rgba(200,80,80,0.04)}
.page-courses .word.active{background:rgba(255,255,255,0.06)}
.page-courses .word.japanese-word.correct .kana-display,
.page-courses .word.japanese-word.correct .romaji-chars,
.page-courses .word.japanese-word.correct .romaji-chars .char{color:#b9e6b4}
.page-courses .word.japanese-word.wrong .kana-display,
.page-courses .word.japanese-word.wrong .romaji-chars,
.page-courses .word.japanese-word.wrong .romaji-chars .char{color:#f08b8b}
.page-courses .word.japanese-word .romaji-chars .char.active{background:rgba(59,130,246,0.3);border-radius:3px;color:#fff}
.page-courses .char{display:inline;transition:color 120ms linear;position:relative}
.page-courses .char.correct{color:#b9e6b4}
.page-courses .char.wrong{color:#f08b8b}
.page-courses .char.active{color:#ffffff}
.page-courses .char.active::after{content:'';position:absolute;left:-1px;top:0;width:2px;height:100%;background:var(--accent);animation:blink 1s ease-in-out infinite}
.page-courses .char.active-end::after{content:'';position:absolute;right:-1px;top:0;width:2px;height:100%;background:var(--accent);animation:blink 1s ease-in-out infinite}
.page-courses .course-capture{opacity:0;position:fixed;left:-9999px}
.page-courses .course-result-summary{display:flex;gap:16px;color:var(--muted)}
.page-courses .course-result-actions{display:flex;gap:10px;margin-top:12px}
.page-courses .course-placeholder{
  margin-top:12px;
  text-align:center;
  color:rgba(255,255,255,0.75);
  font-weight:500;
  font-size:0.95rem;
  letter-spacing:0.02em;
}

#courseSuccessModal .modal-content,
#courseErrorModal .modal-content,
#courseFinishModal .modal-content{
  background:var(--t-modal-bg);
  border:1px solid rgba(96,165,250,0.2);
  padding:32px 28px;
  border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.03);
  backdrop-filter:blur(12px);
}

#courseSuccessModal h3,
#courseFinishModal h3{
  margin:0 0 12px;
  font-size:clamp(1.6rem,3vw,2rem);
  font-weight:800;
  letter-spacing:0.02em;
  background:linear-gradient(135deg, #60a5fa, #a78bfa);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

#courseErrorModal h3{
  margin:0 0 12px;
  font-size:clamp(1.6rem,3vw,2rem);
  font-weight:800;
  letter-spacing:0.02em;
  color:#f87171;
}

#courseSuccessModal p,
#courseErrorModal p,
#courseFinishModal p{
  margin:0 0 20px;
  color:rgba(226,232,240,0.85);
  font-size:1.05rem;
  line-height:1.6;
  letter-spacing:0.01em;
}

#courseSuccessModal .modal-actions,
#courseErrorModal .modal-actions,
#courseFinishModal .modal-actions{
  margin-top:24px;
  gap:14px;
}

#courseSuccessModal .btn,
#courseErrorModal .btn,
#courseFinishModal .btn{
  padding:11px 24px;
  font-size:15px;
  font-weight:600;
  border-radius:12px;
  letter-spacing:0.02em;
  transition:all 0.2s ease;
  border:1px solid rgba(96,165,250,0.3);
  background:rgba(59,130,246,0.12);
  color:#dbeafe;
  cursor:pointer;
}

#courseSuccessModal .btn:hover,
#courseErrorModal .btn:hover,
#courseFinishModal .btn:hover{
  background:rgba(59,130,246,0.18);
  border-color:rgba(96,165,250,0.45);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(59,130,246,0.2);
}

#courseSuccessModal .btn.ok,
#courseFinishModal .btn.ok{
  background:rgba(59,130,246,0.25);
  border-color:rgba(96,165,250,0.5);
  color:#e0e7ff;
  font-weight:700;
}

#courseSuccessModal .btn.ok:hover,
#courseFinishModal .btn.ok:hover{
  background:rgba(59,130,246,0.35);
  border-color:rgba(96,165,250,0.7);
  box-shadow:0 6px 20px rgba(59,130,246,0.3);
}

#courseErrorModal .btn.ok{
  background:rgba(239,68,68,0.15);
  border-color:rgba(248,113,113,0.4);
  color:#fecaca;
}

#courseErrorModal .btn.ok:hover{
  background:rgba(239,68,68,0.22);
  border-color:rgba(248,113,113,0.6);
  box-shadow:0 4px 12px rgba(239,68,68,0.25);
}