/* Practice workspace refresh: more breathing room, premium player, legible answers, AI writing report.
   Loaded after learning-lab.css so these rules take precedence. */

/* ---------- Writing ---------- */
.writing-tabs{gap:10px;margin:8px 0 28px;flex-wrap:wrap}
.writing-tabs button{padding:12px 22px;font-size:14px;transition:background .15s,border-color .15s}
.writing-tabs button:hover{border-color:var(--terracotta)}
.writing-tabs #random-writing{margin-left:auto}
.writing-prompt{padding:40px 44px!important;border-radius:18px!important;background:#fffdf8;box-shadow:0 18px 50px rgba(65,39,25,.06);margin-bottom:32px}
#writing-kicker{display:block;font:800 13px var(--sans);letter-spacing:.1em;color:var(--muted)}
#writing-prompt{margin-top:18px}
.writing-prompt #writing-prompt h4{font:700 30px/1.4 var(--serif)!important;margin:0 0 24px!important;color:var(--espresso)}
.writing-prompt #writing-prompt small,.writing-prompt #writing-prompt .prompt-number{font-size:13px;letter-spacing:.12em;margin-bottom:14px}
.writing-prompt #writing-prompt p,.writing-prompt #writing-prompt b,.writing-prompt #writing-prompt strong{font-size:18px;line-height:1.6}
.writing-prompt ul{gap:12px!important;margin-top:14px!important;padding-left:24px!important}
.writing-prompt li{font-size:17px!important;line-height:1.6!important}
.writing-area{min-height:440px!important;padding:32px 36px!important;border-radius:18px!important;font:17px/1.9 var(--sans)!important;color:var(--espresso);box-shadow:0 18px 50px rgba(65,39,25,.05);transition:border-color .15s,box-shadow .15s}
.writing-area:focus{outline:none;border-color:var(--terracotta)!important;box-shadow:0 0 0 4px rgba(186,112,72,.16)}
.writing-meta{align-items:center;font-size:14px!important;margin:16px 6px 32px!important}
#writing-count{display:inline-flex;align-items:baseline;gap:6px;padding:7px 14px;border-radius:999px;background:var(--sand);color:var(--brown)}
#writing-count b{font-size:16px;color:var(--espresso)}
#writing-count.short{background:#f8e3d8;color:#7d3a1e}
#writing-count.met{background:#e6efe2;color:#3f503d}
#review-writing{width:auto!important;min-width:260px}
.wx-note,.wx-error{margin-top:24px;padding:14px 18px;border-radius:12px;background:#f8e3d8;color:#7d3a1e;font-size:15px}
.wx-error{margin:0 0 16px}
.wx-loading{margin-top:32px;padding:44px 24px;border:1px solid var(--line);border-radius:18px;background:var(--paper);text-align:center}
.wx-loading p{margin:18px 0 0;font:700 17px var(--sans);color:var(--espresso)}

/* AI writing report */
.wx-report{margin-top:32px;padding:40px 44px;border:1px solid var(--line);border-radius:20px;background:var(--paper);box-shadow:0 24px 70px rgba(65,39,25,.08)}
.wx-hero{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.wx-hero small{font:800 13px var(--sans);letter-spacing:.12em;color:var(--terracotta-dark)}
.wx-hero strong{display:block;font:700 76px/1 var(--serif);color:var(--espresso);margin-top:8px}
.wx-hero-side{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.wx-chip{padding:9px 16px;border-radius:999px;background:var(--sand);color:var(--brown);font:700 14px var(--sans)}
.wx-chip.warn{background:#f8e3d8;color:#7d3a1e}
.wx-chip.strong{background:var(--espresso);color:#fff}
.wx-chip em{font-style:normal;opacity:.75;font-weight:600}
.wx-crits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:28px 0 8px}
.wx-crit{padding:22px 24px;border:1px solid var(--line);border-radius:14px;background:#fff}
.wx-crit-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.wx-crit-head span{font:800 13px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.wx-crit-head b{font:700 30px var(--serif);color:var(--terracotta-dark)}
.wx-bar{height:6px;margin:12px 0 14px;border-radius:3px;background:var(--sand);overflow:hidden}
.wx-bar i{display:block;height:100%;border-radius:3px;background:var(--terracotta)}
.wx-crit p{margin:0;font-size:15px;line-height:1.65;color:var(--brown)}
.wx-section{margin-top:36px}
.wx-section h4{margin:0 0 16px;font:700 26px var(--serif);color:var(--espresso)}
.wx-priorities{margin:0;padding:0;list-style:none;counter-reset:wx;display:grid;gap:14px}
.wx-priorities li{position:relative;padding:20px 22px 20px 70px;border-radius:14px;background:#fff;border:1px solid var(--line);counter-increment:wx}
.wx-priorities li::before{content:counter(wx);position:absolute;left:22px;top:20px;width:32px;height:32px;border-radius:50%;background:var(--terracotta);color:#fff;display:grid;place-items:center;font:800 15px var(--sans)}
.wx-priorities b{font:800 16px var(--sans);color:var(--espresso)}
.wx-priorities p{margin:6px 0 0;font-size:15px;line-height:1.65;color:var(--brown)}
.wx-strengths{margin:0;padding-left:22px;display:grid;gap:10px;font-size:15px;line-height:1.65;color:var(--brown)}
.wx-corrections{display:grid;gap:12px}
.wx-fix{padding:18px 22px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.wx-tag{display:inline-block;margin-bottom:10px;padding:3px 10px;border-radius:999px;background:var(--sand);font:800 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--brown)}
.wx-fix .was{margin:0;font-size:15px;color:#a3352a;text-decoration:line-through;text-decoration-color:rgba(163,53,42,.5)}
.wx-fix .now{margin:6px 0 8px;font:700 16px var(--sans);color:#2f5d43}
.wx-fix small{font-size:14px;line-height:1.55;color:var(--muted)}
.wx-vocab{display:grid;gap:10px}
.wx-vocab>div{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:14px 18px;border-radius:12px;background:var(--cream);font-size:15px}
.wx-used{font-weight:700;color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(113,95,83,.45)}
.wx-arrow{color:var(--terracotta)}
.wx-better{font-weight:800;color:var(--espresso)}
.wx-vocab small{flex-basis:100%;font-size:14px;color:var(--muted)}
.wx-model{margin-top:36px;padding:22px 26px;border-radius:14px;border:1px solid var(--line);background:#fff}
.wx-model summary{cursor:pointer;font:800 16px var(--sans);color:var(--terracotta-dark)}
.wx-model p{font-size:16px;line-height:1.85;color:var(--espresso);margin:16px 0 0}
.wx-disclaimer{margin:28px 0 0;font-size:13px;color:var(--muted)}

/* ---------- Listening: spacing ---------- */
.listening-library-bar{margin:12px 0 24px!important;align-items:flex-end}
.listening-library-bar label{font-size:13px!important;letter-spacing:.06em!important;gap:10px!important}
.listening-library-bar select{min-height:48px;padding:0 16px!important;font-size:16px;border-radius:12px!important}
.listening-library-bar>span{font-size:14px!important}

/* ---------- Listening: premium player ---------- */
.real-audio-player.np-player{position:relative;grid-template-columns:auto 1fr;gap:32px;align-items:center;padding:34px 40px;margin-bottom:32px;border-radius:22px;background:radial-gradient(120% 140% at 0% 0%,#6b4130 0%,#3d261c 55%,#2c1b14 100%);box-shadow:0 26px 60px rgba(44,27,20,.28),inset 0 1px 0 rgba(255,255,255,.08);overflow:hidden}
.np-player::after{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(242,199,168,.18),transparent 70%);pointer-events:none}
.np-player .audio-main{width:88px!important;height:88px!important;display:grid;place-items:center;border:0;border-radius:50%;background:linear-gradient(145deg,#d48a60,var(--terracotta) 55%,#9b5634);box-shadow:0 12px 28px rgba(0,0,0,.35),0 0 0 8px rgba(255,255,255,.06);transition:transform .15s,box-shadow .15s}
.np-player .audio-main:hover{transform:scale(1.04)}
.np-player .audio-main.playing{box-shadow:0 12px 28px rgba(0,0,0,.35),0 0 0 8px rgba(242,199,168,.18);animation:np-glow 2.4s ease-in-out infinite}
@keyframes np-glow{50%{box-shadow:0 12px 28px rgba(0,0,0,.35),0 0 0 14px rgba(242,199,168,.1)}}
.np-player .audio-main svg{width:34px;height:34px;fill:#fff}
.np-player .audio-main:not(.playing) svg{margin-left:4px}
.np-player .audio-track{gap:14px;position:relative;z-index:1}
.np-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.np-eyebrow{display:block;font:800 12px var(--sans)!important;letter-spacing:.14em;color:#e6c3a8!important;margin-bottom:6px}
.np-head b{font:700 30px/1.15 var(--serif);color:#fff8ef}
.np-status{flex:0 0 auto;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);color:#f6e6d8;font:700 13px var(--sans)}
.np-player input[type=range]{-webkit-appearance:none;appearance:none;height:8px;border-radius:4px;cursor:pointer;background:linear-gradient(to right,#e9a57c 0%,#e9a57c var(--pct,0%),rgba(255,255,255,.16) var(--pct,0%),rgba(255,255,255,.16) 100%)}
.np-player input[type=range]{padding:0!important;border:0!important;border-radius:4px!important;margin:0;box-shadow:none;grid-column:auto}
.np-player input[type=range]:disabled{cursor:not-allowed}
.np-player input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.35);border:0}
.np-player input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:0}
#audio-progress{width:100%;margin-top:6px}
.np-times{display:flex;justify-content:space-between;font:700 14px var(--sans);font-variant-numeric:tabular-nums;color:#e6cdb9}
.np-player .audio-meta{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:6px;font-size:14px}
.np-player .audio-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.np-chip{display:inline-flex!important;align-items:center;gap:8px;min-height:42px;padding:0 16px!important;border-radius:999px!important;border:1px solid rgba(255,255,255,.18)!important;background:rgba(255,255,255,.08)!important;color:#fff!important;font:800 14px var(--sans);cursor:pointer;transition:background .15s}
.np-chip:hover{background:rgba(255,255,255,.16)!important}
.np-chip svg{width:18px;height:18px;fill:currentColor}
.np-speed{display:inline-flex;padding:4px;border-radius:999px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.12)}
.np-speed button{min-height:34px;padding:0 14px!important;border:0!important;border-radius:999px!important;background:transparent!important;color:#e6cdb9!important;font:800 13px var(--sans);cursor:pointer}
.np-speed button.active{background:#fff8ef!important;color:var(--espresso)!important}
.np-lock{font:600 14px var(--sans);color:#e6cdb9}
.np-volume{display:flex!important;flex-direction:row!important;align-items:center;gap:10px;margin:0!important;font-size:inherit!important}
.np-volume-icon svg{width:22px;height:22px;fill:#f6e6d8;display:block}
.np-volume input{width:120px!important}
.np-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Listening: question paper breathing room ---------- */
.question-sheet .sheet-toolbar{padding:20px 26px!important}
.question-sheet .sheet-toolbar small{font-size:13px!important;letter-spacing:.1em}
.question-sheet .sheet-toolbar b{font-size:22px!important}
.question-sheet .sheet-toolbar span{font-size:14px!important}
.native-question-content section{padding:32px 34px!important;margin-bottom:24px!important}
.native-question-content p{font-size:16px;line-height:1.65}
.native-table span,.native-table b{padding:14px 16px!important;font-size:14px!important;line-height:1.6}
.native-blank input{min-height:34px;font-size:15px!important}
.paper-submit{padding:22px 26px!important;gap:18px}
.paper-submit #listening-save-status{font-size:15px}

/* ---------- Listening: answers shown after checking ---------- */
[data-listening-answer]:not(:empty){display:inline-flex!important;align-items:center;gap:6px;width:max-content;max-width:100%;margin:8px 0 2px!important;padding:5px 12px;border-radius:999px;font:700 14px/1.3 var(--sans)!important;letter-spacing:0;white-space:nowrap}
input.correct~[data-listening-answer]:not(:empty){background:#e6efe2;color:#2f5d43;border:1px solid #b9cfb0}
input.correct~[data-listening-answer]:not(:empty)::before{content:"✓"}
input.incorrect~[data-listening-answer]:not(:empty){background:#fff3e0;color:#5c2b12;border:1.5px solid #e2a15f;box-shadow:0 2px 8px rgba(226,161,95,.2)}
input.incorrect~[data-listening-answer]:not(:empty)::before{content:"Answer";font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.native-blank [data-listening-answer]:not(:empty){grid-column:1/-1;margin-left:25px!important}
.native-table .native-blank [data-listening-answer]:not(:empty){margin-left:0!important}
/* keep the numbered circles intact despite the roomier table padding above */
.native-blank>span,.native-table .native-blank>span{padding:0!important;border:0!important;width:22px!important;height:22px!important;font-size:12px!important;line-height:1!important}
.native-blank{grid-template-columns:22px auto!important}
.result-summary strong{font-size:20px}
.result-summary span{font-size:15px}

@media (max-width:700px){
  .writing-prompt{padding:26px 22px!important}
  .writing-prompt #writing-prompt h4{font-size:24px!important}
  .writing-area{padding:22px!important;min-height:360px!important}
  .wx-report{padding:26px 20px}
  .wx-crits{grid-template-columns:1fr}
  .wx-hero-side{align-items:flex-start}
  .real-audio-player.np-player{grid-template-columns:1fr;padding:26px 22px;gap:20px}
  .np-head{flex-direction:column}
  .np-head b{font-size:24px}
  #review-writing{width:100%!important}
}