/* Compact learning workspace shared with the catalog. */
.learning-loading{width:100%}.learning-skeleton{display:grid;gap:24px;margin-top:26px}.learning-skeleton i{display:block;height:16px;border-radius:5px;background:var(--line);opacity:.5}.learning-skeleton i:nth-child(2){width:85%}.learning-skeleton i:nth-child(3){width:65%}
@media(min-width:901px){dialog.wide-learning .real-subtitles{overflow-anchor:none;scroll-behavior:auto}}
header .brand-face img,footer .brand-face img,header .avatar img{width:100%;height:100%;object-fit:cover;object-position:center;transform:none;transform-origin:center;border-radius:50%}header .avatar{padding:0}.brand-face{aspect-ratio:1;height:auto}
.video-cloze .controls .primary,.shadow-practice .controls .primary{background:var(--green);color:var(--accent-ink);border-color:var(--green);padding:11px 25px;font-weight:700;min-width:145px}.detail-study-guide{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:20px;padding:18px 22px;background:var(--surface);border:1px solid var(--line);border-radius:14px}.detail-study-guide h3{font-size:18px;margin:5px 0}.detail-study-guide p{font-size:12px;margin:5px 0;color:var(--muted)}.detail-study-guide .mini-mascot{width:125px;height:130px;object-fit:contain}.detail-guide-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}.detail-guide-actions button{border:1px solid var(--line);border-radius:20px;background:var(--soft);color:var(--green);font-size:11px;padding:7px 12px}@media(max-width:900px){.detail-study-guide{display:none}}
dialog.wide-learning .lesson-head{background:var(--surface);gap:14px;border-bottom:1px solid var(--line);min-height:74px;padding:12px 24px}.detail-back{border:1px solid var(--line);background:var(--soft);color:var(--ink);padding:8px 12px;border-radius:9px;white-space:nowrap;font-size:12px}.lesson-head h2{letter-spacing:0;line-height:1.5}.lesson-head small{font-size:10px}.lesson-head .theme-toggle{margin-left:auto}dialog.wide-learning .video-column{padding:20px 24px;background:var(--paper)}dialog.wide-learning .real-video{border-radius:14px;background:#0d1117}dialog.wide-learning .live-caption{border-radius:12px;padding:14px 18px;margin-top:14px;border:1px solid var(--line)}dialog.wide-learning .controls{gap:8px;margin:14px 0}dialog.wide-learning .controls button,dialog.wide-learning .controls select{border-radius:8px;font-size:12px;min-height:38px}dialog.wide-learning .learning-column{padding:10px 22px 20px;background:var(--surface)}dialog.wide-learning .learning-tools{padding:8px 0 15px;font-size:12px}dialog.wide-learning .tabs{gap:0;display:grid;grid-template-columns:repeat(5,1fr);margin-bottom:10px}dialog.wide-learning .tabs button{font-size:12px;padding:13px 1px;text-align:center}dialog.wide-learning .tabs button.active{font-weight:700}dialog.wide-learning .subtitle{margin:7px 0;border-radius:10px;border:1px solid transparent;border-bottom-color:var(--line);padding:16px 14px}dialog.wide-learning .subtitle.current{border:1px solid var(--green);background:var(--soft)}dialog.wide-learning .subtitle span{font-size:17px;line-height:2.2}dialog.wide-learning .subtitle small{font-size:12px}dialog.wide-learning .practice{padding:14px 0}.cloze-question-nav{display:flex;align-items:center;gap:10px;justify-content:space-between;border:1px solid var(--line);padding:12px;border-radius:12px;background:var(--soft)}.cloze-question-nav label{font-size:11px;color:var(--muted);text-align:center}.cloze-question-nav select{display:block;max-width:160px;min-width:90px;border:0;background:transparent;color:var(--ink);padding:4px;font-size:11px}.cloze-question-nav button{font-size:12px;padding:9px 12px;white-space:nowrap}.exercise-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 0}.exercise-heading h3{font-size:23px;margin:4px 0 8px}.exercise-kicker{font-size:10px;letter-spacing:2px;color:var(--green)}.exercise-heading .mini-mascot{width:100px;height:110px;object-fit:contain}.video-cloze .cloze-sentence{margin:7px 0 18px;line-height:2.2;font-size:23px!important;border:1px solid var(--line)}.video-cloze label{font-size:12px;color:var(--muted)}.video-cloze .answer{min-height:54px;font-size:18px}.cloze-feedback{border-radius:12px;background:var(--soft);padding:16px 18px;margin:15px 0;color:var(--ink)}.cloze-feedback.correct{border:1px solid var(--green)}.cloze-feedback p{font-size:17px;color:var(--ink);margin:7px 0}.cloze-feedback small{color:var(--muted)}.cloze-audio{display:flex;flex-wrap:wrap}.shadow-practice>.controls{background:var(--soft);padding:16px;border-radius:12px}.note-editor{border-radius:12px;line-height:1.9}.word-detail{background:var(--paper);margin:8px 0;border:1px solid var(--line);border-radius:12px;padding:14px}.word-detail .dictionary-term{font-weight:600}.word-detail small{font-size:12px}.video-cloze>.notice{font-size:11px;line-height:1.8}
@media(max-width:1100px) and (min-width:901px){dialog.wide-learning .real-lesson{grid-template-columns:55% minmax(0,1fr)}dialog.wide-learning .video-column{padding:16px}dialog.wide-learning .learning-column{padding:10px 15px 15px}.cloze-question-nav{gap:5px;padding:9px}.cloze-question-nav button{padding:7px}.exercise-heading h3{font-size:20px}}
@media(max-width:900px){dialog.wide-learning .lesson-head{min-height:52px;gap:8px;padding:7px 12px}dialog.wide-learning .lesson-head h2{font-size:13px}.detail-back{padding:6px 8px;font-size:11px}.lesson-head .theme-toggle{padding:5px 8px;font-size:11px}dialog.wide-learning .video-column{padding:6px 10px 0}dialog.wide-learning .real-video{border-radius:10px;max-height:30dvh}dialog.wide-learning .live-caption{padding:4px 8px;margin-top:5px;max-height:95px;overflow:auto}dialog.wide-learning .controls{margin:5px 0;gap:5px}dialog.wide-learning .controls button,dialog.wide-learning .controls select{min-height:29px;font-size:11px;padding:3px 6px}dialog.wide-learning .learning-column{padding:0 10px 12px}dialog.wide-learning .learning-tools{padding:5px 0;font-size:10px}dialog.wide-learning .tabs{margin-bottom:5px}dialog.wide-learning .tabs button{font-size:11px;padding:9px 0}dialog.wide-learning .subtitle span{font-size:16px}.cloze-question-nav{padding:7px;gap:5px}.cloze-question-nav button{padding:7px 9px}.cloze-question-nav select{max-width:145px}.exercise-heading{margin:8px 0}.exercise-heading h3{font-size:20px}.exercise-heading .mini-mascot{width:75px;height:85px}.video-cloze .cloze-sentence{font-size:19px!important;padding:12px;line-height:2}.video-cloze .answer{min-height:45px}.video-cloze>.notice{font-size:10px}.lesson-head small{display:none}.word-audio{max-width:145px}}
@media(max-width:390px){.lesson-head h2{max-width:180px}.lesson-head .theme-toggle{font-size:10px}.detail-back{font-size:10px;padding:5px}.cloze-question-nav select{max-width:110px}.cloze-question-nav button{font-size:11px;padding:7px}}
/* Mobile: keep the player visible and reserve a real, scrollable reading area. */
@media(max-width:900px){
 dialog.wide-learning{height:var(--lesson-height,100dvh);max-height:var(--lesson-height,100dvh);overflow:hidden}
 dialog.wide-learning #lesson-content{min-height:0}
 dialog.wide-learning .lesson-head{flex-shrink:0;padding-block:6px}
 dialog.wide-learning .lesson-head>div{min-width:0;flex:1}
 dialog.wide-learning .lesson-head h2{font-size:13px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-width:none}
 dialog.wide-learning .real-lesson{display:flex;flex-direction:column;min-height:0;overflow:hidden}
 dialog.wide-learning .video-column{flex:0 0 auto;min-height:0}
 dialog.wide-learning .real-video{width:100%;height:auto;max-height:27dvh;object-fit:contain}
 dialog.wide-learning[data-learning-tab=subtitles] .live-caption{display:none}
 dialog.wide-learning .learning-column{flex:1 1 0;min-height:0;overflow:hidden;padding-bottom:0}
 dialog.wide-learning .learning-tools,dialog.wide-learning .tabs{flex-shrink:0}
 dialog.wide-learning .learning-tools{padding:7px 0 5px}
 dialog.wide-learning .tabs{grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:3px}
 dialog.wide-learning .real-subtitles{flex:1 1 0;min-height:0;max-height:none;overflow-x:hidden;overflow-y:auto;touch-action:pan-y;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;padding:5px 0 calc(22px + env(safe-area-inset-bottom,0px));scroll-padding-block:12px}
 dialog.wide-learning .subtitle{box-sizing:border-box;display:block;white-space:normal;overflow:visible;max-height:none;min-width:0;height:auto;margin:6px 0;padding:15px 12px 17px;overflow-wrap:anywhere}
 dialog.wide-learning .subtitle>span{display:block;padding-top:.6em;font-size:16px;line-height:2.25;white-space:normal;overflow-wrap:anywhere}
 dialog.wide-learning .subtitle .dictionary-term{white-space:normal;overflow-wrap:anywhere}
 dialog.wide-learning .subtitle>small:not(.subtitle-time){display:block;font-size:13px;line-height:1.85;white-space:normal;overflow-wrap:anywhere;margin-top:7px}
 dialog.wide-learning .subtitle ruby{ruby-position:over}dialog.wide-learning .subtitle ruby rt{font-size:9px;line-height:1.2}
}
@media(max-width:900px) and (max-height:620px){dialog.wide-learning .real-video{max-height:23dvh}dialog.wide-learning .lesson-head{min-height:44px}dialog.wide-learning .controls{gap:4px;margin-block:3px}dialog.wide-learning .controls button,dialog.wide-learning .controls select{min-height:27px;font-size:10px}dialog.wide-learning .learning-tools{padding-block:3px}}
@media(max-width:900px) and (max-height:620px){dialog.wide-learning .video-column>.sentence-navigation{display:none}}
.imported-info{padding:28px!important;display:flex;flex-direction:column;gap:20px;justify-content:center}
.imported-info h3{font-size:24px;line-height:1.5;margin:0}.imported-info p{line-height:1.9;margin:0;color:var(--muted,#858b87)}
.imported-info .primary,.imported-info .quiet{align-self:flex-start}.imported-meta{display:flex;flex-wrap:wrap;gap:8px}.imported-meta span{padding:7px 12px;border-radius:20px;background:var(--soft,#fff0e3);font-size:13px}
dialog.imported-learning .video-column>.controls:last-child{display:flex;flex-wrap:wrap;align-items:center}
@media(max-width:900px){dialog.imported-learning .real-video{max-height:48dvh}dialog.imported-learning .video-column{flex:0 0 auto}dialog.imported-learning .imported-info{overflow:auto;min-height:0;padding:18px!important;gap:12px;justify-content:flex-start}dialog.imported-learning .imported-info h3{font-size:19px}}

html.course-route body>header,html.course-route body>main,html.course-route body>footer{display:none}
.course-route-fallback{position:fixed;inset:0;display:grid;place-content:center;gap:15px;text-align:center;padding:25px;background:var(--paper);color:var(--ink)}.course-route-fallback h1{font-size:27px;margin:0}.course-route-fallback p{font-size:14px;color:var(--muted)}.course-route-fallback a{color:var(--green);text-decoration:underline}.course-route-fallback[hidden]{display:none}
@media(max-width:600px){footer:has(.admin-entry){flex-wrap:wrap;gap:18px}.admin-entry{white-space:nowrap;flex:none}}

.real-subtitles .spoken-word{border-radius:4px;transition:background-color .08s}.real-subtitles .word-active{background:#ffd5ae!important;color:#3c392f;box-shadow:0 2px 0 var(--coral)}:root[data-theme=night] .real-subtitles .word-active{background:#665038!important;color:#fff1de}.real-subtitles{overflow-anchor:none}
@media(max-width:900px){dialog.wide-learning .real-subtitles{overscroll-behavior:contain;scroll-behavior:auto}}

.dict-actions{display:flex;flex-wrap:wrap;gap:8px}.dict-actions select{border:1px solid var(--line);border-radius:7px;padding:7px 9px;background:var(--surface);color:var(--ink);font-size:12px}.dict-direction-label{font-size:11px;color:var(--muted);margin:13px 0 0}

.dict-extra-senses,.dict-more-entries{margin:10px 0;color:var(--muted);font-size:12px}.dict-extra-senses summary,.dict-more-entries>summary{cursor:pointer;color:var(--green);padding:8px 0}.dict-extra-senses p{font-size:12px}.dict-match-note{font-size:12px;color:var(--muted);line-height:1.8}.dict-primary-results>.dict-entry:first-child{padding-top:10px}.dict-more-entries{border-top:1px solid var(--line);padding-top:8px}.dict-more-entries .dict-entry h3{font-size:20px}
#current-japanese .word-active,.real-subtitles .current .word-active{background:#ffd5ae!important;color:#3c392f;box-shadow:0 2px 0 var(--coral);border-radius:4px}#current-japanese .word-active .dictionary-term,.real-subtitles .word-active .dictionary-term{background:transparent}:root[data-theme=night] #current-japanese .word-active{background:#665038!important;color:#fff1de}


/* Enhanced Trial Guards and Membership UI */
.enhanced-membership-dialog{max-width:540px;width:90%;border:1px solid var(--line,#eddbc9);border-radius:22px;padding:0;background:var(--surface,#fff);color:var(--ink,#29313d);box-shadow:0 20px 50px rgba(0,0,0,0.18);overflow:hidden}
.enhanced-membership-dialog::backdrop{background:rgba(20,24,30,0.65);backdrop-filter:blur(4px)}
.member-dialog-inner{padding:32px 28px 24px;text-align:center;position:relative}
.member-mascot{width:68px;height:68px;border-radius:50%;object-fit:cover;margin:0 auto 12px;display:block;border:2px solid #f8e1cb}
.member-dialog-inner h2{font-size:23px;margin:0 0 8px;font-weight:700}
.member-dialog-sub{font-size:13px;color:var(--muted,#7a7772);line-height:1.6;margin:0 auto 18px;max-width:440px}
.member-pricing-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.member-card{position:relative;border:1.5px solid var(--line,#e8ded4);border-radius:14px;padding:16px 14px;text-align:center;background:var(--card,#fff)}
.member-card.is-recommend{border-color:#ee7663;background:color-mix(in srgb, #ee7663 8%, var(--surface,#fff))}
.card-badge{position:absolute;top:-10px;right:10px;background:#ee7663;color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:6px}
.card-name{font-size:13px;font-weight:600;margin-bottom:6px}
.card-price{font-size:15px;color:#bd5c46}
.card-price strong{font-size:28px;font-weight:750}
.card-price small{font-size:11px;color:var(--muted,#888)}
.card-desc{font-size:11px;color:var(--muted,#8a847d);margin-top:4px}
.member-privileges{list-style:none;padding:0;margin:0 auto 18px;display:grid;gap:6px;text-align:left;font-size:12px;color:var(--ink,#333);max-width:400px}
.member-privileges li{line-height:1.5}
.member-dialog-actions{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.member-cta-btn{display:flex!important;align-items:center;justify-content:center;width:100%;padding:14px!important;border-radius:12px!important;font-size:15px!important;font-weight:700!important;background:#ee7663!important;color:#fff!important;text-decoration:none}
.member-cta-btn:hover{background:#e36551!important}
.quiet-recheck-btn{border:0;background:transparent;color:var(--muted,#888);font-size:11px;cursor:pointer;padding:6px;text-decoration:underline}
.member-safe-tip{font-size:11px;color:var(--muted,#888);margin:10px 0 2px}

/* Subtitles Trial Divider and Locked Row */
.trial-divider{margin:14px 0;padding:14px 16px;border-radius:12px;background:color-mix(in srgb, #ee7663 10%, var(--surface,#fff));border:1.5px dashed #ee7663;text-align:center}
.trial-divider-box strong{display:block;font-size:14px;color:#c0533f;margin-bottom:4px}
.trial-divider-box p{margin:0 0 10px;font-size:12px;color:var(--muted,#666);line-height:1.5}
.trial-divider-tag{display:inline-block;padding:2px 8px;border-radius:4px;background:#ee7663;color:#fff;font-size:10px;font-weight:700;margin-bottom:6px}
.trial-divider-cta{display:inline-flex;align-items:center;padding:7px 16px;border-radius:8px;background:#ee7663;color:#fff;border:0;font-size:12px;font-weight:600;cursor:pointer}
.is-trial-locked{opacity:0.65;position:relative}
.locked-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:#c0533f;background:rgba(238,118,99,0.12);padding:2px 6px;border-radius:4px;margin-left:8px}


/* Card interaction & In-Dialog Checkout View */
.member-card{cursor:pointer;transition:all .18s ease;user-select:none}
.member-card:hover{border-color:#ee7663;transform:translateY(-1px)}
.member-card.is-selected{border-color:#ee7663;background:color-mix(in srgb, #ee7663 10%, var(--surface,#fff));box-shadow:0 0 0 1.5px #ee7663}
.pay-top-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.pay-back-link{background:transparent;border:0;color:var(--muted,#7a7772);font-size:12px;cursor:pointer;padding:4px 0}
.pay-back-link:hover{color:#ee7663}
.pay-plan-badge{font-size:11px;font-weight:600;padding:3px 9px;border-radius:6px;background:color-mix(in srgb, #ee7663 12%, var(--surface,#fff));color:#bd5c46}
.pay-title{font-size:20px;margin:4px 0 10px;font-weight:700}
.pay-amount-box{display:flex;align-items:baseline;justify-content:center;gap:3px;margin:4px 0 12px}
.pay-currency{font-size:19px;font-weight:700;color:#bd5c46}
.pay-amount{font-size:36px;font-weight:800;color:#bd5c46;line-height:1}
.pay-plan-note{font-size:12px;color:var(--muted,#888);margin-left:6px}
.pay-channel-row{display:flex;justify-content:center;margin-bottom:12px}
.pay-channel{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:10px;border:1.5px solid #07c160;background:rgba(7,193,96,0.06);font-size:12px;color:#183b27}
.pay-channel strong{color:#07c160;font-size:13px}
.pay-channel small{font-size:11px;color:var(--muted,#777)}
.pay-qrcode-card{padding:12px;border:1px solid var(--line,#eedfd4);border-radius:14px;background:var(--paper,#faf7f4);margin-bottom:10px}
.pay-qrcode-frame{display:flex;justify-content:center;margin-bottom:6px}
.pay-qr-mock{position:relative;width:140px;height:140px;border:2px solid #07c160;border-radius:12px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 4px 12px rgba(7,193,96,0.12)}
.pay-qr-img{width:80px;height:80px;border-radius:50%;object-fit:cover}
.qr-scan-guide{font-size:11px;font-weight:600;color:#07c160;margin-top:5px}
.pay-qr-tip{margin:0;font-size:12px;color:var(--muted,#666);font-weight:500}
.pay-account-section{text-align:left;font-size:12px;margin:8px 0}
.pay-account-confirmed{background:var(--soft,#f7f4f0);border:1px solid var(--line,#eadfd4);padding:9px 12px;border-radius:10px;margin:0}
.pay-account-confirmed strong{color:var(--ink,#222)}
.pay-account-confirmed small{display:block;font-size:11px;color:var(--muted,#888);margin-top:2px}
.pay-account-input-wrap{display:block}
.pay-account-input-wrap span{display:block;margin-bottom:4px;font-weight:500;color:var(--muted,#666)}
.pay-account-input-wrap input{width:100%;box-sizing:border-box;padding:9px 11px;border:1px solid var(--line,#d8cdc2);border-radius:9px;font:inherit;font-size:13px;background:var(--surface,#fff)}
.pay-account-input-wrap small{display:block;font-size:11px;color:var(--muted,#999);margin-top:3px}


/* Close Button positioning and hit area */
.enhanced-membership-dialog{position:relative!important;box-sizing:border-box!important}
.enhanced-membership-dialog .membership-close{
  position:absolute!important;
  top:14px!important;
  right:14px!important;
  width:34px!important;
  height:34px!important;
  border-radius:50%!important;
  border:1px solid var(--line,#e2d7cc)!important;
  background:var(--soft,#f5efe9)!important;
  color:var(--muted,#555)!important;
  font-size:22px!important;
  line-height:1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  cursor:pointer!important;
  z-index:9999!important;
  padding:0!important;
  transition:all 0.15s ease!important;
}
.enhanced-membership-dialog .membership-close:hover{
  background:#eedfd2!important;
  color:#000!important;
  transform:scale(1.12)!important;
}