/* SLOVRA UI REV5.2 — settings, live speaking, listening polish */

/* ---------- SETTINGS ---------- */
body.light-mode #screen-settings .settings-topbar-copy strong,
body.light #screen-settings .settings-topbar-copy strong,
html[data-theme="light"] #screen-settings .settings-topbar-copy strong{
  color:#172b34!important;
  -webkit-text-fill-color:#172b34!important;
}

#screen-settings #v28-settings-profile-btn{
  width:100%!important;
  max-width:none!important;
  margin:12px 0 16px!important;
  padding:12px 14px!important;
  min-height:46px!important;
  justify-content:flex-start!important;
  text-align:left!important;
  border-radius:14px!important;
  box-sizing:border-box!important;
}
@media (max-width:959px){
  #screen-settings #v28-settings-profile-btn{margin:14px 0 16px!important;clear:both!important}
}
@media (min-width:960px){
  #screen-settings #v28-settings-profile-btn{margin:12px 0 18px!important;justify-content:flex-start!important}
}

body.light-mode #v56-entitlement-list,
body.light #v56-entitlement-list,
html[data-theme="light"] #v56-entitlement-list{
  background:#fff!important;
  border-color:#dce6ea!important;
  color:#21343c!important;
  box-shadow:none!important;
}
body.light-mode #v56-entitlement-list .v5160-head,
body.light #v56-entitlement-list .v5160-head,
html[data-theme="light"] #v56-entitlement-list .v5160-head{
  color:#21343c!important;
}
body.light-mode #v56-entitlement-list .v5160-head span,
body.light #v56-entitlement-list .v5160-head span,
html[data-theme="light"] #v56-entitlement-list .v5160-head span{
  color:#697d85!important;
}
body.light-mode #v56-entitlement-list .v56-entitlement-row,
body.light #v56-entitlement-list .v56-entitlement-row,
html[data-theme="light"] #v56-entitlement-list .v56-entitlement-row{
  border-color:#e5edef!important;
  color:#344952!important;
}
body.light-mode #v56-entitlement-list .v56-entitlement-row strong,
body.light #v56-entitlement-list .v56-entitlement-row strong,
html[data-theme="light"] #v56-entitlement-list .v56-entitlement-row strong{
  color:#172b34!important;
}

/* ---------- IN-APP ACCOUNT SHEET ---------- */
.slovra-account-sheet{position:fixed;inset:0;z-index:10080;display:none;align-items:flex-end;justify-content:center;background:rgba(5,12,16,.58);backdrop-filter:blur(8px);padding:18px;box-sizing:border-box}
.slovra-account-sheet.show{display:flex}
.slovra-account-panel{width:min(100%,500px);border:1px solid rgba(255,255,255,.10);border-radius:24px;background:#14252c;color:#eef6f8;box-shadow:0 24px 70px rgba(0,0,0,.38);padding:18px;box-sizing:border-box;animation:slovraSheetIn .18s ease-out}
.slovra-account-grab{width:42px;height:4px;border-radius:999px;background:#52666e;margin:0 auto 13px}
.slovra-account-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}
.slovra-account-head span{display:block;color:#70d0fb;font-size:9px;font-weight:950;letter-spacing:1.1px}.slovra-account-head h3{font-size:20px;margin:3px 0 0}.slovra-account-close{width:36px;height:36px;border:1px solid #344b54;border-radius:12px;background:#1a3038;color:#cbd9de;font-size:17px;cursor:pointer}
.slovra-account-form{display:grid;gap:10px}.slovra-account-field{display:grid;gap:6px}.slovra-account-field>span{font-size:10px;font-weight:900;color:#a8bbc2}.slovra-account-field input{width:100%;box-sizing:border-box;border:1px solid #36505a;border-radius:14px;background:#0e1f25;color:#fff;padding:12px 13px;font-family:inherit;font-size:13px;font-weight:700;outline:0}.slovra-account-field input:focus{border-color:#1cb0f6;box-shadow:0 0 0 3px rgba(28,176,246,.12)}
.slovra-account-hint{font-size:10px;line-height:1.45;color:#8fa5ad;margin:0}.slovra-account-status{display:none;border-radius:12px;padding:10px 11px;font-size:10px;line-height:1.45}.slovra-account-status.show{display:block}.slovra-account-status.ok{background:rgba(88,204,2,.10);border:1px solid rgba(88,204,2,.26);color:#b9f596}.slovra-account-status.err{background:rgba(255,75,75,.10);border:1px solid rgba(255,75,75,.25);color:#ffc1c1}
.slovra-account-submit{width:100%;border:0;border-radius:14px;background:linear-gradient(135deg,#1cb0f6,#147db4);box-shadow:0 4px 0 #0d5b83;color:#fff;padding:12px 14px;font-weight:950;cursor:pointer}.slovra-account-submit:disabled{opacity:.58;cursor:wait}
body.light-mode .slovra-account-panel,body.light .slovra-account-panel,html[data-theme="light"] .slovra-account-panel{background:#fff;color:#172b34;border-color:#dbe6ea}.light-mode .slovra-account-close,.light .slovra-account-close,html[data-theme="light"] .slovra-account-close{background:#f5f8f9;color:#29414b;border-color:#d8e3e7}.light-mode .slovra-account-field input,.light .slovra-account-field input,html[data-theme="light"] .slovra-account-field input{background:#f7fafb;color:#172b34;border-color:#d4e0e5}.light-mode .slovra-account-field>span,.light .slovra-account-field>span,html[data-theme="light"] .slovra-account-field>span{color:#647981}
@keyframes slovraSheetIn{from{transform:translateY(18px);opacity:.5}to{transform:none;opacity:1}}
@media(min-width:700px){.slovra-account-sheet{align-items:center}.slovra-account-panel{border-radius:22px}}

/* ---------- LIVE SPEAKING: STUDIO LAYOUT ---------- */
#screen-v62-live .v70-shell{max-width:1040px!important}
#screen-v62-live .v62-live-card{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 270px!important;
  grid-template-areas:"kick kick" "target mic" "transcript mic" "actions actions"!important;
  column-gap:28px!important;
  row-gap:10px!important;
  align-items:center!important;
  min-height:410px!important;
  padding:28px!important;
  border-radius:28px!important;
  background:
    radial-gradient(circle at 88% 12%,rgba(28,176,246,.15),transparent 28%),
    radial-gradient(circle at 8% 88%,rgba(168,85,247,.10),transparent 28%),
    var(--v70-card)!important;
  box-shadow:0 20px 60px rgba(0,0,0,.18)!important;
}
#screen-v62-live .v62-live-kicker{grid-area:kick;display:flex;align-items:center;gap:8px;justify-content:flex-start!important;margin-bottom:4px}
#screen-v62-live .v62-level-pill{margin:0!important}
#screen-v62-live .v62-live-kicker small{font-size:10px;font-weight:900;color:var(--text-muted);letter-spacing:.35px}
#screen-v62-live .v62-live-target{grid-area:target;min-height:180px!important;justify-content:flex-start!important;text-align:left!important;font-size:clamp(30px,3.2vw,46px)!important;line-height:1.35!important;align-content:center!important;padding:20px 4px!important}
#screen-v62-live .v62-live-transcript{grid-area:transcript;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;text-align:left!important;min-height:50px!important;margin:0!important;padding:12px 14px!important;border:1px solid var(--v70-border)!important;border-radius:14px!important;background:rgba(255,255,255,.035)!important;display:flex;align-items:center;font-size:12px!important}
#screen-v62-live .v62-mic{grid-area:mic;width:150px!important;height:150px!important;margin:0 auto!important;border:1px solid rgba(255,255,255,.15)!important;background:radial-gradient(circle at 35% 28%,#35c8ff,#147daf 68%,#0d5d86)!important;box-shadow:0 10px 0 #0b4f70,0 0 0 14px rgba(28,176,246,.07)!important}
#screen-v62-live .v62-mic span{font-size:48px!important}#screen-v62-live .v62-mic small{margin-top:-17px!important;font-size:10px!important}
#screen-v62-live .v62-mic.live{background:radial-gradient(circle at 35% 28%,#ff8a8a,#ff4b4b 68%,#bf2929)!important;box-shadow:0 10px 0 #8e2323,0 0 0 14px rgba(255,75,75,.10)!important}
#screen-v62-live .v62-quick-actions{grid-area:actions;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;width:100%!important}
#screen-v62-live .v62-quick-actions button{min-height:44px!important;border-radius:14px!important;text-align:left!important;padding:11px 13px!important;font-weight:900!important;cursor:pointer}
body.light-mode #screen-v62-live .v62-live-card,body.light #screen-v62-live .v62-live-card,html[data-theme="light"] #screen-v62-live .v62-live-card{background:radial-gradient(circle at 88% 12%,rgba(28,176,246,.10),transparent 28%),#fff!important;border-color:#dce6ea!important;box-shadow:0 14px 42px rgba(36,62,72,.10)!important}
body.light-mode #screen-v62-live .v62-live-transcript,body.light #screen-v62-live .v62-live-transcript,html[data-theme="light"] #screen-v62-live .v62-live-transcript{background:#f6f9fa!important;border-color:#dce6ea!important;color:#52666e!important}
@media(max-width:760px){
  #screen-v62-live .v62-live-card{display:flex!important;flex-direction:column!important;min-height:0!important;padding:18px 16px 20px!important;border-radius:22px!important;gap:10px!important}
  #screen-v62-live .v62-live-kicker{width:100%!important}
  #screen-v62-live .v62-live-target{width:100%!important;min-height:132px!important;text-align:center!important;justify-content:center!important;font-size:29px!important;padding:12px 0!important}
  #screen-v62-live .v62-live-transcript{width:100%!important;box-sizing:border-box!important;text-align:center!important;justify-content:center!important;min-height:48px!important}
  #screen-v62-live .v62-mic{width:112px!important;height:112px!important;margin:8px auto 6px!important}
  #screen-v62-live .v62-mic span{font-size:38px!important}
  #screen-v62-live .v62-quick-actions{grid-template-columns:1fr 1fr!important}
  #screen-v62-live .v62-quick-actions button{text-align:center!important;padding:10px 8px!important;font-size:11px!important}
}

/* ---------- LISTENING REDESIGN ---------- */
#screen-listening-series .v12-page{max-width:1080px!important;padding:8px 18px 96px!important}
#screen-listening-series .v12-listen-hero{padding:18px 20px!important;border-radius:20px!important;margin-bottom:16px!important;background:linear-gradient(135deg,rgba(28,176,246,.13),rgba(168,85,247,.07)),var(--card-bg,#172a31)!important;box-shadow:none!important}
#screen-listening-series .v12-listen-hero h2{font-size:24px!important;margin:5px 0 0!important}
#screen-listening-series .v12-listen-hero p{display:none!important}
#screen-listening-series .v12-series-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}
#screen-listening-series .v12-series-card{min-height:138px!important;display:flex!important;flex-direction:column!important;gap:10px!important;padding:15px!important;border-radius:18px!important;box-shadow:none!important}
#screen-listening-series .v12-series-icon{width:40px!important;height:40px!important;border-radius:12px!important}
#screen-listening-series .v12-series-card>div{min-width:0!important}
#screen-listening-series .v12-series-card div strong{font-size:14px!important;line-height:1.25!important}
#screen-listening-series .v12-series-card div p{margin:4px 0 0!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;min-height:27px!important}
#screen-listening-series .v12-series-stat{position:static!important;margin-top:auto!important;display:flex!important;justify-content:space-between!important;align-items:center!important;color:#75d4ff!important;font-size:9px!important}
#screen-listening-series .v12-listen-head{padding:2px 2px 0!important}
#screen-listening-series .v12-listen-stage{max-width:760px!important;margin:14px auto 0!important;padding:22px!important;border-radius:22px!important;box-shadow:none!important}
#screen-listening-series .v12-listen-instruction{margin:0 0 8px!important;font-size:10px!important;font-weight:850!important;letter-spacing:.15px!important}
#screen-listening-series .v12-listen-speaker{width:112px!important;height:112px!important;box-shadow:0 6px 0 #0e5d84!important}
#screen-listening-series .v12-listen-speaker>span{font-size:36px!important}
#screen-listening-series .v12-listen-options{grid-template-columns:1fr 1fr!important;gap:10px!important;margin-top:10px!important}
#screen-listening-series .v12-listen-options button{min-height:58px!important;border-width:1px!important;border-bottom-width:3px!important;padding:12px!important;font-size:11px!important}
#screen-listening-series .v12-listen-reveal{margin-top:14px!important}
body.light-mode #screen-listening-series .v12-listen-hero,body.light #screen-listening-series .v12-listen-hero,html[data-theme="light"] #screen-listening-series .v12-listen-hero{background:linear-gradient(135deg,rgba(28,176,246,.08),rgba(168,85,247,.05)),#fff!important;border-color:#dce6ea!important}
@media(max-width:760px){
  #screen-listening-series.content-padding{padding-left:12px!important;padding-right:12px!important}
  #screen-listening-series .game-header{margin-left:2px!important;margin-right:2px!important}
  #screen-listening-series .v12-page{padding:8px 4px 94px!important}
  #screen-listening-series .v12-listen-hero{padding:15px 16px!important;margin-left:0!important;margin-right:0!important}
  #screen-listening-series .v12-listen-hero>span{font-size:9px!important}
  #screen-listening-series .v12-listen-hero h2{font-size:20px!important}
  #screen-listening-series .v12-series-grid{grid-template-columns:1fr!important;gap:9px!important}
  #screen-listening-series .v12-series-card{min-height:0!important;display:grid!important;grid-template-columns:42px minmax(0,1fr)!important;grid-template-rows:auto auto!important;gap:8px 10px!important;padding:13px!important}
  #screen-listening-series .v12-series-icon{grid-row:1/3!important}
  #screen-listening-series .v12-series-card div p{display:none!important}
  #screen-listening-series .v12-series-stat{grid-column:2!important;margin-top:0!important;justify-content:flex-start!important}
  #screen-listening-series .v12-listen-head{grid-template-columns:auto 1fr auto!important;gap:8px!important}
  #screen-listening-series .v12-listen-stage{padding:16px!important;margin-top:10px!important}
  #screen-listening-series .v12-listen-speaker{width:96px!important;height:96px!important;margin:8px auto 6px!important}
  #screen-listening-series .v12-listen-options{grid-template-columns:1fr!important;gap:8px!important}
  #screen-listening-series .v12-listen-options button{min-height:50px!important;padding:11px!important}
}


/* ---------- REV5.3 STABILITY / ACCESSIBILITY ---------- */
#screen-settings .settings-category-nav button:focus-visible,
#screen-settings .settings-account-quick button:focus-visible,
#screen-settings #v28-settings-profile-btn:focus-visible,
.slovra-account-close:focus-visible,
.slovra-account-submit:focus-visible,
.slovra-account-field input:focus-visible,
#screen-v62-live button:focus-visible,
#screen-listening-series button:focus-visible{
  outline:3px solid rgba(28,176,246,.42)!important;
  outline-offset:2px!important;
}
@media (prefers-reduced-motion:reduce){
  .slovra-account-panel{animation:none!important}
  #screen-v62-live .v62-mic.live{animation:none!important;transform:none!important}
  #screen-settings .settings-section-card.settings-category-active{animation:none!important}
}