:root {
  --night:#082a38;
  --navy:#0d4050;
  --blue:#18758a;
  --paper:#f3f7f6;
  --white:#fff;
  --ink:#18343d;
  --muted:#687d82;
  --line:#d9e5e3;
  --mint:#39bfa8;
  --mint-soft:#e2f6f1;
  --amber:#f0a34c;
  --amber-soft:#fff3e5;
  --coral:#e06d62;
  --coral-soft:#fdecea;
  --purple:#577f91;
  --purple-soft:#e8f1f4;
  --gold:#d79435;
  --shadow:0 18px 52px rgba(8,42,56,.12);
}
*{box-sizing:border-box}
html{background:#dce8ee}
body{margin:0;min-height:100vh;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:
radial-gradient(circle at 5% 0%,rgba(111,225,184,.18),transparent 28rem),
radial-gradient(circle at 100% 18%,rgba(255,189,89,.16),transparent 26rem),
#e5eff3}
button,input,select{font:inherit}
button{-webkit-tap-highlight-color:transparent}
.app-shell{width:min(100%,920px);min-height:100vh;margin:0 auto;background:var(--paper);box-shadow:0 0 80px rgba(7,31,53,.12)}
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(12px + env(safe-area-inset-top)) 18px 12px;background:rgba(238,245,248,.93);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:11px;padding:0;color:inherit;text-align:left;background:transparent;border:0;cursor:pointer}
.brand-mark{display:grid;place-items:center;width:45px;height:45px;color:var(--night);font-size:22px;font-weight:950;background:linear-gradient(145deg,var(--mint),var(--amber));border-radius:15px;box-shadow:0 8px 22px rgba(7,31,53,.2)}
.brand strong,.brand small{display:block}.brand small{margin-top:2px;color:var(--muted)}
.top-actions{display:flex;align-items:center;gap:9px}
.connection-badge{padding:8px 11px;color:#855b0d;font-size:12px;font-weight:900;background:var(--amber-soft);border-radius:999px}
.connection-badge.online{color:#087457;background:var(--mint-soft)}
.connection-badge.offline{color:#9b3530;background:var(--coral-soft)}
.avatar-button{display:grid;place-items:center;width:39px;height:39px;color:white;font-weight:950;background:var(--navy);border:0;border-radius:13px;cursor:pointer}
main{padding:20px 18px 56px}.view{display:none}.view.active{display:block}
.hero{position:relative;overflow:hidden;padding:36px 28px;color:white;background:
radial-gradient(circle at 90% 5%,rgba(111,225,184,.32),transparent 15rem),
linear-gradient(138deg,var(--night),var(--navy));border-radius:30px;box-shadow:var(--shadow)}
.hero:after{position:absolute;right:-65px;bottom:-90px;width:240px;height:240px;content:"";border:30px solid rgba(255,189,89,.1);border-radius:50%}
.eyebrow{margin:0 0 12px;color:#258a70;font-size:11px;font-weight:950;letter-spacing:.15em}.eyebrow.light{color:var(--mint)}
.hero h1{max-width:690px;margin:0;font-size:clamp(38px,8vw,60px);line-height:1;letter-spacing:-.045em}
.hero>p{max-width:610px;margin:17px 0 0;color:rgba(255,255,255,.78);line-height:1.55}
.hero-rank-strip{position:relative;z-index:1;display:inline-flex;align-items:center;gap:11px;margin-top:22px;padding:10px 14px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.11);border-radius:16px}
.hero-rank-strip>span{font-size:28px}.hero-rank-strip small,.hero-rank-strip strong{display:block}.hero-rank-strip small{color:rgba(255,255,255,.62);font-size:11px}.hero-rank-strip strong{margin-top:2px;color:white}
.home-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:17px}
.feature-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;min-height:112px;padding:20px;color:var(--ink);text-align:left;cursor:pointer;border:0;border-radius:22px;box-shadow:0 10px 28px rgba(7,31,53,.08);transition:transform .15s ease,box-shadow .15s ease}
.feature-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.feature-card:active{transform:scale(.986)}
.offline-card{background:#dff2fb}.online-card{background:var(--amber-soft)}.trophy-card{background:var(--coral-soft)}.ranking-card{background:var(--purple-soft)}
.feature-icon{display:grid;place-items:center;width:54px;height:54px;font-size:27px;background:rgba(255,255,255,.72);border-radius:17px}
.feature-card strong,.feature-card small{display:block}.feature-card strong{font-size:20px}.feature-card small{margin-top:5px;color:var(--muted);line-height:1.35}.chevron{font-size:30px;color:rgba(7,31,53,.35)}
.resume-card{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:13px;width:100%;margin-top:15px;padding:16px 18px;color:var(--ink);text-align:left;background:white;border:2px solid var(--mint);border-radius:18px;cursor:pointer}
.resume-card>span:first-child{font-size:25px}.resume-card strong,.resume-card small{display:block}.resume-card small{margin-top:3px;color:var(--muted)}
.home-stats,.profile-metrics,.result-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.home-stats>div,.profile-metrics>div,.result-metrics>div{padding:15px;background:white;border:1px solid var(--line);border-radius:17px}
.home-stats span,.profile-metrics span,.result-metrics span{display:block;color:var(--muted);font-size:12px;font-weight:800}.home-stats strong,.profile-metrics strong,.result-metrics strong{display:block;margin-top:5px;color:var(--navy);font-size:24px}
.back-link,.text-button,.icon-text-button{padding:7px 0;color:var(--navy);font-weight:900;background:transparent;border:0;cursor:pointer}
.page-heading{margin:18px 0 20px}.page-heading h2{margin:0;font-size:clamp(33px,7vw,50px);line-height:1.03;letter-spacing:-.04em}.page-heading>p:last-child{margin:11px 0 0;color:var(--muted);line-height:1.52}
.panel{padding:22px;background:white;border:1px solid var(--line);border-radius:23px;box-shadow:0 11px 32px rgba(7,31,53,.07)}
.panel+ .panel{margin-top:15px}.panel h3{margin:0}
label{display:block;margin-bottom:8px;color:var(--muted);font-size:13px;font-weight:900}.spaced-label{margin-top:20px}
input,select{width:100%;padding:15px 16px;color:var(--ink);background:#f8fbfc;border:2px solid var(--line);border-radius:15px;outline:none}
input:focus,select:focus{border-color:var(--mint);box-shadow:0 0 0 4px rgba(111,225,184,.15)}
.segmented{display:grid;grid-template-columns:1fr 1fr;gap:8px}.segment{padding:13px;color:var(--ink);font-weight:850;background:#f3f7f9;border:2px solid transparent;border-radius:13px;cursor:pointer}.segment.selected{background:var(--mint-soft);border-color:var(--mint)}
.primary-button,.secondary-button{width:100%;padding:15px 18px;font-weight:950;cursor:pointer;border-radius:15px}.primary-button{margin-top:17px;color:white;background:var(--night);border:0}.secondary-button{margin-top:10px;color:var(--navy);background:white;border:1px solid var(--line)}
.primary-button:disabled,.secondary-button:disabled{opacity:.45;cursor:not-allowed}
.info-card,.offline-notice{margin-top:15px;padding:17px 19px;background:white;border:1px solid var(--line);border-radius:18px}.info-card p,.offline-notice p{margin:5px 0 0;color:var(--muted);line-height:1.45}
.offline-notice{color:#983832;background:var(--coral-soft);border-color:#f2c5c1}
.game-topline,.battle-top{display:flex;align-items:center;justify-content:space-between;gap:15px}.game-topline>span{color:var(--muted);font-weight:900}
.progress-track{overflow:hidden;height:8px;margin:11px 0 15px;background:#dce8ed;border-radius:999px}.progress-fill{width:0;height:100%;background:linear-gradient(90deg,var(--mint),var(--amber));border-radius:inherit;transition:width .25s ease}
.question-panel{min-height:430px}.question-meta{display:flex;flex-wrap:wrap;gap:7px}.question-meta span{padding:6px 9px;color:var(--blue);font-size:11px;font-weight:900;background:#e3f0f7;border-radius:999px}
.question-panel h2{margin:17px 0 20px;font-size:clamp(24px,5vw,36px);line-height:1.25;letter-spacing:-.025em}
.answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.answer-button{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:11px;min-height:78px;padding:13px;color:var(--ink);text-align:left;cursor:pointer;background:#f6fafb;border:2px solid transparent;border-radius:16px}
.answer-button:hover{border-color:#bdd8e4}.answer-button.selected{background:var(--mint-soft);border-color:var(--mint)}.answer-button.correct{background:var(--mint-soft);border-color:var(--mint)}.answer-button.wrong{background:var(--coral-soft);border-color:var(--coral)}.answer-button:disabled{cursor:default}
.answer-letter{display:grid;place-items:center;width:39px;height:39px;color:var(--night);font-weight:950;background:white;border:1px solid var(--line);border-radius:12px}
.feedback-box{margin-top:15px;padding:13px 15px;color:var(--muted);line-height:1.45;background:#f4f8fa;border-radius:14px}.feedback-box.correct{color:#087457;background:var(--mint-soft)}.feedback-box.wrong{color:#983832;background:var(--coral-soft)}.feedback-box.neutral{color:var(--muted)}
.result-hero{padding:34px 24px;color:white;text-align:center;background:linear-gradient(145deg,var(--night),var(--navy));border-radius:29px;box-shadow:var(--shadow)}
.result-hero.practice{background:linear-gradient(145deg,#0d4966,#157490)}.result-hero>span{display:block;font-size:66px}.result-hero p{margin:7px 0 0;color:rgba(255,255,255,.72)}.result-hero h2{margin:8px 0 0;color:var(--amber);font-size:clamp(38px,9vw,61px);line-height:1}
.arena-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.arena-choice{position:relative;min-height:190px;padding:24px;color:var(--ink);text-align:left;cursor:pointer;border:0;border-radius:23px;box-shadow:0 11px 30px rgba(7,31,53,.08)}
.ranked-choice{grid-column:1/-1;background:linear-gradient(135deg,var(--mint-soft),#cdeefe)}.private-choice{background:var(--amber-soft)}.join-choice{background:var(--purple-soft)}
.choice-tag{position:absolute;top:16px;right:16px;padding:6px 9px;color:var(--navy);font-size:10px;font-weight:950;letter-spacing:.1em;background:rgba(255,255,255,.72);border-radius:999px}
.choice-icon{display:block;font-size:42px}.arena-choice strong,.arena-choice small{display:block}.arena-choice strong{margin-top:15px;font-size:23px}.arena-choice small{margin-top:7px;color:var(--muted);line-height:1.45}
.rules-mini{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}.rules-mini span,.rules-mini strong{padding:8px 11px;font-size:12px;background:white;border:1px solid var(--line);border-radius:999px}.rules-mini strong{color:var(--navy)}
.queue-card{padding:34px 24px;text-align:center;background:white;border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow)}
.radar{display:grid;place-items:center;width:105px;height:105px;margin:0 auto 22px;background:radial-gradient(circle,var(--mint) 0 12%,transparent 13% 28%,rgba(111,225,184,.34) 29% 31%,transparent 32% 48%,rgba(111,225,184,.23) 49% 51%,transparent 52%),#eef9f5;border-radius:50%;animation:pulse 1.5s ease-in-out infinite}.radar span{font-size:36px}
@keyframes pulse{50%{transform:scale(1.05)}}
.queue-card h2{margin:0;font-size:clamp(31px,7vw,48px);letter-spacing:-.04em}.queue-card>p:not(.eyebrow){color:var(--muted)}
.queue-rank{display:inline-block;margin-top:10px;padding:10px 14px;color:var(--navy);font-weight:950;background:var(--amber-soft);border-radius:999px}
.queue-time{margin:18px 0;color:var(--muted)}.queue-time span{color:var(--night);font-size:30px;font-weight:950}
.search-steps{display:flex;justify-content:center;flex-wrap:wrap;gap:7px}.search-steps span{padding:7px 9px;color:var(--muted);font-size:11px;font-weight:850;background:#edf3f5;border-radius:999px}.search-steps span.active{color:#087457;background:var(--mint-soft)}
.code-input{text-transform:uppercase;font-size:29px;font-weight:950;letter-spacing:.18em;text-align:center}
.status-box{margin-top:13px;padding:13px 15px;line-height:1.45;border-radius:14px}.status-box.error{color:#983832;background:var(--coral-soft)}.status-box.success{color:#087457;background:var(--mint-soft)}
.lobby-hero{padding:31px;color:white;text-align:center;background:radial-gradient(circle at 20% 0%,rgba(111,225,184,.28),transparent 14rem),linear-gradient(145deg,var(--night),var(--navy));border-radius:28px;box-shadow:var(--shadow)}
.lobby-hero small{display:block;color:rgba(255,255,255,.65)}.lobby-hero>strong{display:block;margin:6px 0 14px;color:var(--amber);font-size:clamp(48px,13vw,78px);line-height:1;letter-spacing:.1em}
.glass-button{padding:9px 13px;color:white;font-weight:850;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:999px;cursor:pointer}
.lobby-panel{margin-top:16px}.panel-title-row{display:flex;align-items:center;justify-content:space-between;gap:15px}.pill{padding:7px 10px;color:var(--navy);font-size:12px;font-weight:900;background:#e7f0f4;border-radius:999px}
.player-list{display:grid;gap:9px;margin-top:16px}.player-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;background:#f6fafb;border-radius:14px}.player-info{display:flex;align-items:center;gap:11px}.player-avatar{display:grid;place-items:center;width:39px;height:39px;color:var(--night);font-weight:950;background:linear-gradient(145deg,var(--mint),var(--amber));border-radius:12px}.player-row small{display:block;margin-top:2px;color:var(--muted)}.online-dot{width:10px;height:10px;background:var(--mint);border-radius:50%;box-shadow:0 0 0 5px var(--mint-soft)}
.center-muted{text-align:center;color:var(--muted)}.text-button{display:block;margin:12px auto 0;color:var(--muted)}
.match-intro{position:fixed;inset:0;z-index:100;display:grid;place-content:center;padding:24px;color:white;text-align:center;background:rgba(7,31,53,.96)}.match-intro>span{font-size:70px}.match-intro p{margin:13px 0 0;color:var(--mint);font-weight:950;letter-spacing:.14em}.match-intro h2{margin:8px 0;font-size:clamp(35px,9vw,65px)}.match-intro strong{font-size:80px;color:var(--amber)}
.battle-top span,.battle-top strong{display:block}.battle-top span{color:var(--muted);font-size:12px;font-weight:850}.battle-top strong{margin-top:3px;color:var(--navy)}
.timer-ring{--progress:100%;position:relative;display:grid;place-items:center;width:68px;height:68px;background:conic-gradient(var(--mint) var(--progress),#d8e5eb 0);border-radius:50%}.timer-ring:before{position:absolute;width:54px;height:54px;content:"";background:var(--paper);border-radius:50%}.timer-ring span{position:relative;z-index:1;color:var(--night);font-size:23px;font-weight:950}
.battle-scoreboard{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:13px 0}.score-card{padding:13px 14px;background:white;border:2px solid transparent;border-radius:17px}.score-card.me{border-color:var(--mint)}.score-card-top{display:flex;justify-content:space-between;gap:10px}.score-card strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score-card .points{color:var(--navy);font-weight:950}.score-card small{display:block;margin-top:5px;color:var(--muted)}.answered-mark{color:#087457}
.battle-question-panel{min-height:430px}
.final-scoreboard{display:grid;gap:10px;margin:16px 0}.final-player{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px;padding:16px;background:white;border:1px solid var(--line);border-radius:18px}.final-place{width:38px;font-size:25px;text-align:center}.final-player small{display:block;margin-top:3px;color:var(--muted)}.final-points{color:var(--navy);font-size:24px;font-weight:950}
.rank-change-card{display:flex;align-items:center;gap:15px;margin-bottom:15px;padding:18px;background:linear-gradient(135deg,var(--amber-soft),white);border:2px solid var(--amber);border-radius:20px}.rank-change-card>span{font-size:46px}.rank-change-card small,.rank-change-card strong{display:block}.rank-change-card strong{margin-top:3px;font-size:24px}.rank-change-card p{margin:4px 0 0;color:var(--muted)}
.mini-trophy-grid,.near-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:15px}.mini-trophy{padding:14px;text-align:center;background:#f6fafb;border-radius:15px}.mini-trophy span{display:block;font-size:31px}.mini-trophy strong{display:block;margin-top:6px;font-size:13px}
.progress-list{display:grid;gap:10px;margin-top:14px}.progress-item{padding:12px 13px;background:#f6fafb;border-radius:14px}.progress-title{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px}.small-progress{overflow:hidden;height:7px;margin-top:8px;background:#dce7eb;border-radius:999px}.small-progress div{height:100%;background:linear-gradient(90deg,var(--mint),var(--amber));border-radius:inherit}
.division-guide{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}.division-guide span{padding:8px 10px;font-size:12px;font-weight:850;background:white;border:1px solid var(--line);border-radius:999px}
.ranking-list{display:grid;gap:9px}.ranking-row{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:12px;padding:13px;background:#f6fafb;border-radius:15px}.ranking-row.me{background:var(--mint-soft);outline:2px solid var(--mint)}.rank-position{color:var(--navy);font-weight:950;text-align:center}.ranking-row small{display:block;margin-top:3px;color:var(--muted)}.ranking-rank{text-align:right}.ranking-rank strong{display:block}.ranking-rank small{font-size:11px}
.near-section{margin-bottom:17px}.near-section h3{margin:0 0 10px}.near-card{padding:14px;background:white;border:1px solid var(--line);border-radius:16px}.near-card span{font-size:28px}.near-card strong{display:block;margin-top:6px}.near-card small{display:block;margin-top:3px;color:var(--muted)}
.trophy-tabs{display:flex;gap:7px;overflow:auto;padding-bottom:9px}.trophy-tab{flex:0 0 auto;padding:9px 12px;color:var(--muted);font-weight:850;background:white;border:1px solid var(--line);border-radius:999px;cursor:pointer}.trophy-tab.active{color:white;background:var(--night);border-color:var(--night)}
.trophy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.trophy-item{position:relative;min-height:220px;padding:18px;background:white;border:1px solid var(--line);border-radius:20px;overflow:hidden}.trophy-item.locked{filter:saturate(.22);background:#edf1f3}.trophy-item.hidden-trophy:not(.unlocked) .trophy-icon{filter:blur(3px)}.trophy-status{position:absolute;top:13px;right:13px;padding:6px 8px;font-size:9px;font-weight:950;letter-spacing:.1em;border-radius:999px}.trophy-item.unlocked .trophy-status{color:#087457;background:var(--mint-soft)}.trophy-item.locked .trophy-status{color:#667781;background:#dce4e8}.trophy-icon{display:block;font-size:42px}.trophy-item h3{margin:12px 0 0;font-size:18px}.trophy-item p{margin:7px 0 0;color:var(--muted);font-size:13px;line-height:1.4}.trophy-progress-label{display:flex;justify-content:space-between;gap:8px;margin-top:14px;color:var(--muted);font-size:11px}.unlock-date{margin-top:13px;color:#087457;font-size:11px;font-weight:850}
.profile-hero{display:flex;align-items:center;gap:17px;margin-bottom:16px;padding:25px;color:white;background:linear-gradient(145deg,var(--night),var(--navy));border-radius:26px;box-shadow:var(--shadow)}.profile-hero>span{display:grid;place-items:center;width:72px;height:72px;color:var(--night);font-size:31px;font-weight:950;background:linear-gradient(145deg,var(--mint),var(--amber));border-radius:22px}.profile-hero small,.profile-hero h2,.profile-hero p{margin:0}.profile-hero small{color:rgba(255,255,255,.62)}.profile-hero h2{margin-top:3px;font-size:31px}.profile-hero p{margin-top:5px;color:var(--amber);font-weight:900}
.profile-metrics{grid-template-columns:repeat(4,1fr)}.body-copy{color:var(--muted);line-height:1.55}
.toast{position:fixed;z-index:200;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(calc(100% - 34px),520px);padding:14px 16px;color:white;font-weight:850;text-align:center;background:var(--night);border-radius:15px;box-shadow:var(--shadow)}
.empty-state{padding:30px 10px;color:var(--muted);text-align:center}.hidden{display:none!important}
@media(max-width:720px){
  .home-grid,.arena-choice-grid,.answer-grid{grid-template-columns:1fr}.ranked-choice{grid-column:auto}
  .trophy-grid{grid-template-columns:1fr 1fr}.mini-trophy-grid,.near-grid{grid-template-columns:1fr}
  .profile-metrics{grid-template-columns:1fr 1fr}.home-stats{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:470px){
  .connection-badge{display:none}.hero{padding:31px 22px}.feature-card{min-height:101px;padding:17px}
  .trophy-grid{grid-template-columns:1fr}.home-stats>div{padding:12px}.home-stats strong{font-size:20px}
}


/* Ranking v1.2: offentlig topp 5, privat egen rang och automatisk uppdatering */
.ranking-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px
}
.ranking-heading>div{min-width:0}
.ranking-live-status{
  flex:0 0 auto;
  padding:8px 11px;
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  background:white;
  border:1px solid var(--line);
  border-radius:999px
}
.ranking-live-status.active{
  color:#087457;
  background:var(--mint-soft);
  border-color:rgba(112,225,184,.55)
}
.ranking-dashboard{display:grid;gap:15px}
.ranking-dashboard>.panel{margin:0}
.ranking-top-panel{order:1}
.ranking-self-panel{order:2}
.ranking-divisions-panel{order:3}
.ranking-masters-panel{order:4}
.private-pill{
  padding:7px 10px;
  color:#6647b7;
  font-size:12px;
  font-weight:900;
  background:#eee9ff;
  border-radius:999px
}
.ranking-self-content{margin-top:17px}
.private-rank-card{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:15px;
  padding:17px;
  background:
    radial-gradient(circle at 100% 0%,rgba(112,225,184,.20),transparent 12rem),
    #f6fafb;
  border:1px solid var(--line);
  border-radius:18px
}
.private-rank-avatar{
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  color:var(--night);
  font-size:23px;
  font-weight:950;
  background:linear-gradient(145deg,var(--mint),var(--amber));
  border-radius:17px
}
.private-rank-main small,
.private-rank-main strong,
.private-rank-main p{display:block}
.private-rank-main small{color:var(--muted);font-weight:800}
.private-rank-main strong{margin-top:3px;font-size:23px}
.private-rank-main p{margin:5px 0 0;color:var(--muted)}
.private-rank-stats{
  display:grid;
  grid-template-columns:repeat(3,auto);
  gap:8px
}
.private-rank-stats span{
  padding:9px 10px;
  color:var(--muted);
  font-size:11px;
  text-align:center;
  background:white;
  border:1px solid var(--line);
  border-radius:12px
}
.private-rank-stats strong{
  display:block;
  color:var(--navy);
  font-size:18px
}
.private-rank-empty{
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px;
  background:#f6fafb;
  border-radius:16px
}
.private-rank-empty>span{font-size:34px}
.private-rank-empty strong{display:block}
.private-rank-empty p{margin:4px 0 0;color:var(--muted)}
.division-count-list{display:grid;gap:14px;margin-top:18px}
.division-count-label{
  display:flex;
  justify-content:space-between;
  gap:14px;
  margin-bottom:7px;
  font-size:14px
}
.division-count-track{
  overflow:hidden;
  height:11px;
  background:#e7eff3;
  border-radius:999px
}
.division-count-fill{
  height:100%;
  min-width:0;
  background:var(--mint);
  border-radius:999px;
  transition:width .35s ease
}
.division-count-fill.division-0{background:#ba815f}
.division-count-fill.division-1{background:#9daab1}
.division-count-fill.division-2{background:#e2aa32}
.division-count-fill.division-3{background:#6ec9db}
.division-count-fill.division-4{background:#9275e8}
.panel-explainer{margin:10px 0 17px;color:var(--muted);font-size:13px;line-height:1.45}
.ranking-masters-panel{
  background:
    radial-gradient(circle at 100% 0%,rgba(146,117,232,.15),transparent 18rem),
    white
}
.master-row{border:1px solid rgba(146,117,232,.18)}

@media(max-width:700px){
  .ranking-heading{display:block}
  .ranking-live-status{display:inline-block;margin-top:13px}
  .private-rank-card{grid-template-columns:auto 1fr}
  .private-rank-stats{
    grid-column:1/-1;
    grid-template-columns:repeat(3,1fr)
  }
}
@media(max-width:440px){
  .private-rank-card{grid-template-columns:1fr;text-align:center}
  .private-rank-avatar{margin:0 auto}
  .private-rank-stats{grid-template-columns:1fr 1fr 1fr}
  .ranking-row{
    grid-template-columns:35px 1fr;
  }
  .ranking-row .ranking-rank{
    grid-column:2;
    text-align:left
  }
}



/* Kondition och träning v2: enhetlig, lugn design */
body{background:linear-gradient(180deg,#e8f1ef,#f6f8f7 28rem)}
.app-shell{background:var(--paper)}
.language-button{min-width:42px;height:39px;padding:0 10px;color:var(--navy);font-size:12px;font-weight:950;background:white;border:1px solid var(--line);border-radius:12px;cursor:pointer}
.brand-mark{color:white;background:linear-gradient(145deg,var(--mint),var(--blue))}
.hero{background:linear-gradient(140deg,var(--night),#145a68)}
.hero:after{border-color:rgba(57,191,168,.14)}
.home-grid{grid-template-columns:1fr 1fr}
.feature-card{background:white;border:1px solid var(--line)}
.feature-card:nth-child(1){border-top:4px solid var(--blue)}
.feature-card:nth-child(2){border-top:4px solid var(--mint)}
.feature-card:nth-child(3){border-top:4px solid var(--amber)}
.feature-card:nth-child(4){border-top:4px solid #d28e48}
.feature-card:nth-child(5){border-top:4px solid #6b8c99}
.learn-card .feature-icon{background:#e4f2f5}.offline-card .feature-icon{background:var(--mint-soft)}.online-card .feature-icon{background:var(--amber-soft)}
.trophy-card .feature-icon{background:#f8eee5}.ranking-card .feature-icon{background:#e8f1f4}
.primary-button{background:linear-gradient(135deg,var(--navy),var(--blue))}
.progress-fill{background:linear-gradient(90deg,var(--mint),var(--blue))}
.ranked-topic-panel{margin-bottom:14px;box-shadow:none}.microcopy{margin:9px 0 0;color:var(--muted);font-size:13px}.queue-topic{display:inline-block;margin:4px auto 8px;padding:7px 11px;color:var(--blue);font-size:12px;font-weight:900;background:#e4f2f5;border-radius:999px}.queue-long-wait{margin:16px 0;padding:16px;background:var(--amber-soft);border:1px solid #efd2ad;border-radius:17px}.queue-long-wait p{margin:5px 0 0;color:var(--muted);line-height:1.4}
.account-warning{margin:0 0 15px;padding:15px 17px;color:#8b3f23;font-weight:800;line-height:1.45;background:#fff0e6;border:1px solid #f2c5aa;border-radius:17px}.account-linked-badge{display:inline-block;margin-bottom:10px;padding:7px 10px;color:#087457;font-size:12px;font-weight:950;background:var(--mint-soft);border-radius:999px}.danger-outline{color:#a23b36;border-color:#efc6c2;background:#fff8f7}
.chapter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.chapter-card{overflow:hidden;padding:0;text-align:left;background:white;border:1px solid var(--line);border-radius:24px;box-shadow:0 10px 30px rgba(8,42,56,.07);cursor:pointer}.chapter-card img{display:block;width:100%;height:145px;object-fit:cover}.chapter-card-body{padding:18px}.chapter-card h3{margin:0;font-size:22px}.chapter-card p{margin:8px 0 0;color:var(--muted);line-height:1.45}.chapter-card-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:15px;color:var(--blue);font-size:12px;font-weight:900}.chapter-hero{overflow:hidden;margin:18px 0;border-radius:27px;background:var(--night);color:white}.chapter-hero img{width:100%;height:230px;object-fit:cover;opacity:.73}.chapter-hero-copy{padding:24px}.chapter-hero h2{margin:0;font-size:clamp(32px,7vw,52px);line-height:1}.chapter-hero p{margin:12px 0 0;color:rgba(255,255,255,.76);line-height:1.5}.section-list{display:grid;gap:12px}.section-card{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:14px;width:100%;padding:16px;text-align:left;background:white;border:1px solid var(--line);border-radius:18px;cursor:pointer}.section-number{display:grid;place-items:center;width:48px;height:48px;color:white;font-weight:950;background:var(--blue);border-radius:15px}.section-card h3{margin:0;font-size:19px}.section-card p{margin:4px 0 0;color:var(--muted);font-size:13px}.theory-article{overflow:hidden;margin-top:14px;background:white;border:1px solid var(--line);border-radius:26px;box-shadow:0 12px 34px rgba(8,42,56,.08)}.theory-article img{display:block;width:100%;max-height:390px;object-fit:cover}.theory-copy{padding:clamp(22px,5vw,42px)}.theory-copy .eyebrow{margin-bottom:10px}.theory-copy h1{margin:0;font-size:clamp(34px,7vw,56px);line-height:1.03;letter-spacing:-.04em}.theory-copy p{font-size:17px;line-height:1.72;color:#314b52}.key-box{margin:25px 0;padding:18px;background:var(--mint-soft);border-radius:18px}.key-box strong{display:block;margin-bottom:10px}.key-tags{display:flex;flex-wrap:wrap;gap:8px}.key-tags span{padding:7px 10px;color:var(--navy);font-size:12px;font-weight:900;background:white;border-radius:999px}.theory-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}.theory-actions button{margin:0}.learn-note{margin-top:16px;padding:16px;color:var(--muted);line-height:1.5;background:#f6faf9;border-radius:17px}
@media(max-width:760px){.chapter-grid{grid-template-columns:1fr}.chapter-card{display:grid;grid-template-columns:120px 1fr}.chapter-card img{height:100%;min-height:150px}.theory-actions{grid-template-columns:1fr}.home-grid{grid-template-columns:1fr}}
@media(max-width:470px){.brand small{display:none}.language-button{min-width:38px}.section-card{grid-template-columns:48px 1fr}.section-card>.chevron{display:none}.chapter-card{grid-template-columns:100px 1fr}}

.theory-inline-link{margin-top:12px;border:1px solid currentColor;background:rgba(255,255,255,.58);color:inherit;border-radius:12px;padding:9px 12px;font:inherit;font-weight:800;cursor:pointer}.theory-inline-link:hover{background:rgba(255,255,255,.88)}


/* Innehållsfix v2.1: sex startkort och begreppsbank */
.glossary-card .feature-icon{background:#edf0fb;color:#344b78;font-size:18px;letter-spacing:-.04em}
.home-grid .feature-card:nth-child(1){border-top-color:var(--blue)}
.home-grid .feature-card:nth-child(2){border-top-color:#667bb4}
.home-grid .feature-card:nth-child(3){border-top-color:var(--mint)}
.home-grid .feature-card:nth-child(4){border-top-color:var(--amber)}
.home-grid .feature-card:nth-child(5){border-top-color:#d28e48}
.home-grid .feature-card:nth-child(6){border-top-color:#6b8c99}
.glossary-tools{margin-bottom:15px}
.glossary-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.glossary-filter{padding:9px 12px;color:var(--muted);font-weight:850;background:#f4f8fa;border:1px solid var(--line);border-radius:999px;cursor:pointer}
.glossary-filter.active{color:white;background:var(--night);border-color:var(--night)}
.glossary-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.glossary-item{display:flex;flex-direction:column;justify-content:space-between;min-height:190px;padding:19px;background:white;border:1px solid var(--line);border-radius:20px;box-shadow:0 9px 24px rgba(7,31,53,.05)}
.glossary-item h3{margin:0;color:var(--navy);font-size:21px}
.glossary-item small{display:block;margin-top:3px;color:var(--muted);font-weight:750}
.glossary-item p{margin:12px 0 0;color:var(--ink);line-height:1.52}
.glossary-link{align-self:flex-start;margin-top:17px;padding:0;color:var(--blue);font-weight:900;background:transparent;border:0;cursor:pointer}
.theory-copy>p{font-size:17px;line-height:1.68}
@media(max-width:720px){.glossary-list{grid-template-columns:1fr}}


/* v2.2: läsprogress, lättläst och uppläsning */
.theory-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.reading-toggle{display:inline-flex;padding:3px;background:#eef3f4;border-radius:13px}.reading-toggle button{padding:9px 13px;border:0;background:transparent;color:var(--muted);font-weight:900;border-radius:10px;cursor:pointer}.reading-toggle button.active{background:white;color:var(--navy);box-shadow:0 2px 8px rgba(7,31,53,.08)}
.speak-button{padding:10px 13px;color:var(--blue);font-weight:900;background:#e8f3f5;border:1px solid #cfe3e7;border-radius:12px;cursor:pointer}
.easy-badge{display:inline-block;margin:14px 0 3px;padding:7px 10px;color:#30634f;font-size:12px;font-weight:900;background:#e8f5ee;border-radius:999px}
.inline-term{display:inline;padding:0;border:0;border-bottom:1px dotted currentColor;color:inherit;font:inherit;font-weight:750;background:transparent;cursor:pointer}.inline-term:hover{color:var(--blue);border-bottom-style:solid}
.key-tags button{padding:7px 10px;color:var(--navy);font-size:12px;font-weight:900;background:white;border:1px solid rgba(7,31,53,.06);border-radius:999px;cursor:pointer}.key-tags button:hover{border-color:var(--blue);color:var(--blue)}
.theory-complete-box{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:22px 0;padding:17px 18px;background:#f7f9f9;border:1px solid var(--line);border-radius:18px}.theory-complete-box.is-complete{background:#e8f6ef;border-color:#b9decf}.theory-complete-box strong,.theory-complete-box small{display:block}.theory-complete-box small{margin-top:4px;color:var(--muted)}.complete-button{padding:11px 14px;color:#166645;font-weight:900;background:white;border:1px solid #9bcdb7;border-radius:12px;cursor:pointer}
.theory-pager{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.theory-pager button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:11px 14px;color:var(--navy);font-weight:900;background:white;border:1px solid var(--line);border-radius:14px;cursor:pointer}.theory-pager button:last-child{justify-self:stretch}
.section-card.section-complete{background:#edf8f2;border-color:#b8dfcd}.section-card.section-complete .section-number{background:#2d9b6f}.section-card.section-complete h3{color:#176746}
.chapter-progress{display:flex;align-items:center;gap:10px;margin-top:14px}.chapter-progress>span{overflow:hidden;flex:1;height:7px;background:#edf2f3;border-radius:999px}.chapter-progress i{display:block;height:100%;background:#35a979;border-radius:inherit}.chapter-progress small{color:#527169;font-weight:850;white-space:nowrap}.chapter-hero-progress{display:inline-block;margin:14px 0 0;padding:7px 10px;color:#d7f8e9;font-size:12px;font-weight:900;background:rgba(255,255,255,.1);border-radius:999px}
.term-popup{position:fixed;z-index:100000;inset:0;display:grid;place-items:center;padding:20px;background:rgba(4,23,33,.58);backdrop-filter:blur(5px)}.term-popup.hidden{display:none}.term-popup-card{position:relative;width:min(440px,100%);padding:25px;background:white;border-radius:24px;box-shadow:0 24px 80px rgba(0,0,0,.28)}.term-popup-close{position:absolute;right:14px;top:12px;width:38px;height:38px;border:0;background:#f0f4f5;border-radius:50%;font-size:22px;cursor:pointer}.term-popup-card small{color:var(--muted);font-weight:800}.term-popup-card h3{margin:7px 0 10px;color:var(--navy);font-size:28px}.term-popup-card p{color:var(--ink);font-size:16px;line-height:1.58}.term-popup-card .secondary-button{margin-top:8px}
@media(max-width:620px){.theory-toolbar{align-items:stretch;flex-direction:column}.reading-toggle{display:grid;grid-template-columns:1fr 1fr}.speak-button{width:100%}.theory-complete-box{align-items:stretch;flex-direction:column}.theory-pager{grid-template-columns:1fr 1fr}.theory-copy p{font-size:16.5px}}


/* v2.3 pedagogisk renodling */
.home-hero-clean{padding-bottom:22px}.home-hero-clean h1{max-width:none}.home-hero-image{display:block;width:100%;height:clamp(120px,22vw,190px);margin-top:22px;object-fit:cover;object-position:center 46%;border-radius:20px;border:1px solid rgba(255,255,255,.12)}
.home-grid-clean{grid-template-columns:1fr 1fr}.creator-credit{margin:22px 4px 2px;text-align:right;color:#789097;font-size:11px;letter-spacing:.02em}.legacy-home-data{display:none!important}
.practice-topic-panel{margin-bottom:14px}.practice-method-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.practice-method-card{display:grid;grid-template-columns:54px 1fr;column-gap:12px;align-items:center;padding:18px;text-align:left;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 8px 24px rgba(8,42,56,.06);cursor:pointer}.practice-method-card>span{grid-row:1/3;display:grid;place-items:center;width:50px;height:50px;color:var(--navy);font-size:18px;font-weight:950;background:var(--mint-soft);border-radius:15px}.practice-method-card strong{font-size:18px}.practice-method-card small{color:var(--muted);line-height:1.35}.practice-method-card:hover{transform:translateY(-2px)}.quiz-options{margin-top:14px}.error-bank-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px;width:100%;margin-top:14px;padding:17px 19px;text-align:left;background:#fff8ec;border:1px solid #ead9b8;border-radius:19px;cursor:pointer}.error-bank-card>span:first-child{font-size:26px}.error-bank-card strong,.error-bank-card small{display:block}.error-bank-card small{margin-top:4px;color:#7b6b4a}
.online-progress-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}.online-tool-card{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:center;padding:16px;text-align:left;background:white;border:1px solid var(--line);border-radius:18px;cursor:pointer}.online-tool-card>span:first-child{font-size:26px}.online-tool-card strong,.online-tool-card small{display:block}.online-tool-card small{margin-top:3px;color:var(--muted)}
.matching-board{display:grid;grid-template-columns:1fr 1fr;gap:16px}.matching-column{display:grid;gap:10px}.matching-column h3{margin:0 0 4px}.match-item{width:100%;padding:14px;text-align:left;background:white;border:1px solid var(--line);border-radius:14px;cursor:pointer}.match-item.selected{outline:3px solid var(--blue);background:#eef9fb}.match-item.matched{opacity:.42;pointer-events:none;background:#e8f8ef}.match-item.error{animation:shake .25s linear;border-color:#d87769}.recall-card,.sort-card{padding:26px;background:white;border:1px solid var(--line);border-radius:24px;box-shadow:0 12px 30px rgba(8,42,56,.07)}.recall-term{margin:4px 0 18px;font-size:clamp(34px,7vw,52px);color:var(--navy)}.recall-answer{margin:18px 0;padding:18px;background:var(--mint-soft);border-radius:17px;font-size:18px;line-height:1.6}.self-grade{display:grid;grid-template-columns:1fr 1fr;gap:10px}.sort-options{display:grid;gap:9px;margin-top:16px}.sort-choice{padding:14px;background:#f8fbfb;border:1px solid var(--line);border-radius:14px;cursor:pointer;text-align:left}.sort-choice.chosen{background:#e8f6f4;border-color:var(--mint)}.sort-buckets{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.sort-bucket{min-height:150px;padding:14px;background:#f7faf9;border:1px dashed #9db8b2;border-radius:16px}.sort-bucket h3{margin:0 0 10px}.sort-token{display:block;width:100%;margin:7px 0;padding:10px;background:white;border:1px solid var(--line);border-radius:12px;cursor:pointer}.error-bank-list{display:grid;gap:12px}.error-bank-group{padding:18px;background:white;border:1px solid var(--line);border-radius:18px}.error-bank-group h3{margin:0}.error-bank-group p{color:var(--muted)}
.theory-focus-button{white-space:nowrap}.focus-counter{display:none}.theory-complete-box{margin-top:15px}.theory-actions{margin-top:26px;margin-bottom:12px}
body.focus-reading{background:#fff}body.focus-reading .topbar{display:none}body.focus-reading .app-shell{max-width:900px;min-height:100vh;background:#fff;box-shadow:none}body.focus-reading main{padding:0}body.focus-reading #theoryView{display:block!important;padding:22px clamp(18px,5vw,58px) 44px}body.focus-reading #theoryBackButton,body.focus-reading .theory-image,body.focus-reading .key-box,body.focus-reading .theory-complete-box,body.focus-reading .theory-actions{display:none!important}body.focus-reading .theory-article{margin:0;border:0;box-shadow:none}body.focus-reading .theory-copy{padding:0}body.focus-reading .theory-copy h1{max-width:760px;margin:20px auto 8px;font-size:clamp(36px,7vw,58px)}body.focus-reading .theory-copy>.eyebrow,body.focus-reading .easy-badge{max-width:760px;margin-left:auto;margin-right:auto}body.focus-reading .theory-body{max-width:760px;margin:22px auto}body.focus-reading .theory-copy p{font-size:clamp(20px,3vw,23px);line-height:1.85;color:#21393f}body.focus-reading .theory-toolbar{position:sticky;z-index:5;top:0;margin:0 -8px;padding:10px 8px;background:rgba(255,255,255,.96);border-bottom:1px solid #edf1f1}body.focus-reading .focus-counter{display:block;margin-left:auto;color:var(--muted);font-weight:850}body.focus-reading .theory-pager{max-width:760px;margin:34px auto 0}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media(max-width:760px){.practice-method-grid,.online-progress-grid,.matching-board,.self-grade,.sort-buckets{grid-template-columns:1fr}.home-grid-clean{grid-template-columns:1fr}.creator-credit{text-align:center}.home-hero-image{height:140px}.practice-method-card{grid-template-columns:46px 1fr}.practice-method-card>span{width:44px;height:44px}}


/* v2.5 targeted fixes */
.online-tool-card{grid-template-columns:34px minmax(0,1fr);column-gap:10px;justify-items:start;}
.online-tool-card .online-tool-icon{display:grid;place-items:center;width:32px;height:32px;font-size:24px;line-height:1;}
.online-tool-card .online-tool-copy{display:block;min-width:0;text-align:left;justify-self:start;}
.online-tool-card .online-tool-copy strong,.online-tool-card .online-tool-copy small{display:block;text-align:left;}

@media(min-width:761px){
  .chapter-card[data-chapter="energy"] img{height:119px;margin-top:26px;}
}


.sort-fixed-start{display:flex;gap:.65rem;align-items:center;padding:.85rem 1rem;margin:.85rem 0;border-radius:14px;background:#e7f5f2;border:1px solid #cfe5df}
.sort-fixed-start span{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:#51716c}
.sort-fixed-start strong{font-size:1rem}
.sort-selection{display:flex;flex-wrap:wrap;gap:.55rem;min-height:2.6rem;margin:.8rem 0}
.sort-selected-step{border:1px solid #c8ddda;background:#fff;border-radius:999px;padding:.55rem .75rem;font-weight:700;cursor:pointer}
.sort-selected-step span{opacity:.6;margin-left:.25rem}
.sort-edit-actions{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin:.8rem 0}
@media(max-width:640px){.sort-edit-actions{grid-template-columns:1fr}}


.sort-token.chosen{
  background:#dff5f1;
  border-color:#168c7b;
  outline:3px solid rgba(22,140,123,.28);
  font-weight:800;
  transform:translateY(-1px);
}
.sort-token.chosen::before{
  content:"✓ ";
  color:#087565;
}
.sort-token.sort-correct{
  background:#e6f7ed;
  border-color:#45a56b;
  outline:2px solid rgba(69,165,107,.18);
}
.sort-token.sort-wrong{
  background:#fff0ed;
  border-color:#d66d5d;
  outline:2px solid rgba(214,109,93,.20);
}
.sort-detailed-feedback{
  margin-top:14px;
  padding:16px 18px;
  border-radius:16px;
  background:#fff6f3;
  border:1px solid #efc5bc;
  line-height:1.5;
}
.sort-detailed-feedback.hidden{display:none}
.sort-detailed-feedback h4{margin:0 0 9px;color:#9e3f33}
.sort-detailed-feedback ul{margin:0;padding-left:20px}
.sort-detailed-feedback li{margin:0 0 10px}
.sort-detailed-feedback p{margin:10px 0 0;color:#6f514b}

/* v4 stabiliserad tillgänglighet */
:root[data-theory-text="small"] .theory-body p{font-size:.98rem}
:root[data-theory-text="normal"] .theory-body p{font-size:1.08rem}
:root[data-theory-text="large"] .theory-body p{font-size:1.22rem}
:root[data-theory-spacing="roomy"] .theory-body p{line-height:1.95;margin-bottom:1.35em}
.theory-access-controls{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.text-size-controls{display:inline-flex;border:1px solid #cbdeda;border-radius:12px;overflow:hidden;background:#fff}
.text-size-controls button{border:0;background:transparent;padding:.55rem .7rem;font-weight:800;cursor:pointer}
.text-size-controls button.active{background:#dff5f1;color:#075f56}
.learning-sync-note{margin:0 0 14px;padding:10px 12px;border-radius:12px;background:#eef8f6;color:#315f59;font-size:.9rem;font-weight:700}
.mastery-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem;margin-bottom:1rem}
.mastery-strip span{background:#fff;border:1px solid #d7e3e1;border-radius:14px;padding:.8rem;text-align:center}
.practice-round-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;margin-top:1rem}
.practice-finish{text-align:center;padding:1rem 0}
@media(max-width:700px){.practice-round-actions,.mastery-strip{grid-template-columns:1fr}.theory-access-controls{width:100%}}
:root[data-theory-text="small"] body.focus-reading .theory-body p{font-size:20px}
:root[data-theory-text="normal"] body.focus-reading .theory-body p{font-size:23px}
:root[data-theory-text="large"] body.focus-reading .theory-body p{font-size:27px}
:root[data-theory-spacing="roomy"] body.focus-reading .theory-body p{line-height:2.05;margin-bottom:1.55em}


/* v4.2 – renare uppläsningskontroller */
.speech-controls{
  display:inline-flex;
  align-items:center;
  gap:0;
  overflow:hidden;
  border:1px solid #bfd9dc;
  border-radius:13px;
  background:#fff;
  box-shadow:0 1px 2px rgba(8,61,72,.05);
}
.speech-main-button,
.speech-pause-button{
  min-height:42px;
  border:0;
  cursor:pointer;
  font-weight:900;
  font-family:inherit;
  transition:background .16s ease,color .16s ease,opacity .16s ease;
}
.speech-main-button{
  padding:.62rem .9rem;
  background:#0d7b82;
  color:#fff;
}
.speech-main-button:hover{background:#096a71}
.speech-pause-button{
  padding:.62rem .78rem;
  background:#f5faf9;
  color:#174b52;
  border-left:1px solid #d6e7e5;
}
.speech-pause-button:hover:not(:disabled){background:#e7f4f1}
.speech-pause-button:disabled{
  opacity:.42;
  cursor:default;
}
@media(max-width:700px){
  .speech-controls{width:100%}
  .speech-main-button{flex:1}
  .speech-pause-button{min-width:110px}
}


/* v4.3 – stabil verktygsrad i Lär dig
   Knappar som byter text reserverar samma bredd så Fokusläge inte hoppar rad. */
@media (min-width: 701px){
  .theory-toolbar{
    display:grid;
    grid-template-columns:max-content minmax(0,1fr);
    align-items:center;
    column-gap:14px;
  }

  .theory-access-controls{
    width:auto;
    min-width:0;
    display:flex;
    flex-wrap:nowrap;
    justify-content:flex-end;
    align-items:center;
    gap:.45rem;
  }

  .text-size-controls{
    flex:0 0 auto;
  }

  .theory-access-controls > [data-line-spacing]{
    width:118px;
    min-width:118px;
    justify-content:center;
    white-space:nowrap;
  }

  .speech-controls{
    width:214px;
    min-width:214px;
    flex:0 0 214px;
  }

  .speech-main-button{
    width:108px;
    min-width:108px;
    padding-left:.55rem;
    padding-right:.55rem;
    white-space:nowrap;
  }

  .speech-pause-button{
    width:106px;
    min-width:106px;
    padding-left:.45rem;
    padding-right:.45rem;
    white-space:nowrap;
  }

  .theory-focus-button{
    width:158px;
    min-width:158px;
    flex:0 0 158px;
    justify-content:center;
    white-space:nowrap;
    font-size:13px;
    padding-left:.6rem;
    padding-right:.6rem;
  }
}

/* På mindre skärmar får layouten fortfarande bryta på ett kontrollerat sätt. */
@media (max-width: 700px){
  .theory-access-controls{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.55rem;
  }

  .text-size-controls,
  .speech-controls{
    width:100%;
  }

  .theory-access-controls > [data-line-spacing],
  .theory-focus-button{
    width:100%;
  }

  .speech-main-button,
  .speech-pause-button{
    width:auto;
    min-width:0;
  }
}


/* v4.6 – Inför provet + smartare begreppslista */
.exam-prep-entry{margin-top:18px}
.exam-prep-card{display:grid;grid-template-columns:54px minmax(0,1fr) auto auto;align-items:center;gap:15px;width:100%;padding:18px 20px;text-align:left;background:linear-gradient(135deg,#f6fbfa,#eef7f5);border:1px solid #cfe3df;border-radius:22px;box-shadow:0 10px 28px rgba(8,42,56,.06);cursor:pointer}
.exam-prep-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:var(--night);color:white;font-size:22px;font-weight:950}
.exam-prep-copy{display:flex;flex-direction:column;gap:3px}.exam-prep-copy small{color:var(--blue);font-size:11px;font-weight:950;letter-spacing:.08em}.exam-prep-copy strong{font-size:21px;color:var(--navy)}.exam-prep-copy span{color:var(--muted);font-size:13px;line-height:1.4}.exam-prep-mini{color:var(--muted);font-size:12px;font-weight:850;text-align:right;line-height:1.5}
.glossary-status-label{margin-top:13px;color:var(--muted);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.glossary-status-filters{margin-top:7px}.glossary-item{position:relative;transition:border-color .18s ease,background .18s ease,transform .18s ease}.glossary-item.is-known{background:#f3fbf7;border-color:#bfe0cd}.glossary-known-badge{display:inline-flex;margin-bottom:9px;padding:5px 8px;border-radius:999px;background:#dff3e7;color:#17613b;font-size:11px;font-weight:950}.glossary-card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:17px}.glossary-card-actions .glossary-link{margin-top:0}.glossary-known-toggle{padding:8px 10px;border:1px solid #bed7d1;border-radius:11px;background:#f4faf8;color:#24585a;font-weight:900;cursor:pointer}.glossary-known-toggle.is-known{background:#e2f3e9;border-color:#b9dcc8;color:#17613b}.glossary-known-group{grid-column:1/-1;margin-top:4px;border:1px solid var(--line);border-radius:18px;background:#f8fbfa;overflow:hidden}.glossary-known-group summary{padding:15px 17px;cursor:pointer;color:#276355;font-weight:900}.glossary-known-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 12px 12px}
.exam-heading{margin-bottom:14px}.exam-section{margin:16px 0;padding:20px;background:white;border:1px solid var(--line);border-radius:23px;box-shadow:0 10px 28px rgba(8,42,56,.055)}.exam-section-title{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:15px}.exam-section-title>div{display:flex;align-items:center;gap:10px}.exam-section-title h3{margin:0;color:var(--navy);font-size:22px}.exam-section-title small{color:var(--muted);font-weight:850}.exam-number{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--night);color:white;font-size:13px;font-weight:950}
.exam-dashboard{display:grid;grid-template-columns:1fr 1fr 145px 145px;gap:11px}.exam-progress-card,.exam-small-stat{padding:15px;border-radius:17px;background:#f6faf9;border:1px solid #e1ece9}.exam-progress-card>div{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}.exam-progress-card span{color:var(--muted);font-size:12px;font-weight:800;line-height:1.35}.exam-progress-card strong{color:var(--navy);font-size:22px}.exam-progress-track{height:8px;margin-top:11px;overflow:hidden;border-radius:999px;background:#e4eeec}.exam-progress-track span{display:block;height:100%;border-radius:999px;background:var(--blue)}.exam-small-stat{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center}.exam-small-stat>span{grid-row:1/3;font-size:25px}.exam-small-stat strong{font-size:23px;color:var(--navy)}.exam-small-stat small{color:var(--muted);font-weight:750;line-height:1.2}.exam-unseen-button{margin-top:13px}
.exam-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.exam-summary-card{padding:17px;background:#f7faf9;border:1px solid #e2ebe9;border-radius:17px}.exam-summary-card h4{margin:0 0 10px;color:var(--navy);font-size:17px}.exam-summary-card ul{margin:0;padding-left:19px}.exam-summary-card li{margin:7px 0;color:#314b52;line-height:1.45}.exam-flow{display:flex;align-items:center;gap:8px;overflow-x:auto;padding:8px 2px 12px;scrollbar-width:thin}.exam-flow-step{flex:0 0 auto;padding:10px 12px;border-radius:13px;background:#eff7f5;border:1px solid #d6e8e4;color:var(--navy);font-size:13px;font-weight:900}.exam-flow-arrow{flex:0 0 auto;color:var(--blue);font-size:19px;font-weight:950}.exam-table-wrap{overflow-x:auto}.exam-table{width:100%;border-collapse:separate;border-spacing:0;min-width:680px}.exam-table th,.exam-table td{padding:11px 12px;text-align:left;border-bottom:1px solid #e5eeec;vertical-align:top}.exam-table th{background:#f3f8f7;color:var(--navy);font-size:12px}.exam-table td{color:#314b52;font-size:13px;line-height:1.4}.exam-table td:first-child{font-weight:900;color:var(--navy)}
.exam-checklist{display:grid;gap:9px;margin-top:15px}.exam-check{display:flex;align-items:flex-start;gap:11px;padding:13px 14px;border:1px solid #dfeae7;border-radius:14px;background:#fbfdfc;cursor:pointer}.exam-check.checked{background:#f0f9f4;border-color:#bedfca}.exam-check input{width:20px;height:20px;margin:1px 0 0;accent-color:#1c7767}.exam-check span{color:#29474d;line-height:1.45;font-weight:720}
@media(max-width:900px){.exam-dashboard{grid-template-columns:1fr 1fr}.exam-summary-grid{grid-template-columns:1fr}}
@media(max-width:700px){.exam-prep-card{grid-template-columns:48px minmax(0,1fr) auto;padding:15px}.exam-prep-mini{display:none}.glossary-known-grid{grid-template-columns:1fr}.theory-focus-button{min-width:0!important;width:100%!important;font-size:12.5px;overflow:hidden;text-overflow:clip}}
@media(max-width:520px){.exam-dashboard{grid-template-columns:1fr}.exam-section{padding:16px}.exam-section-title{align-items:flex-start}}

.theory-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.theory-title-row>div{min-width:0}
.section-source-button{display:inline-grid;place-items:center;width:36px;height:36px;min-width:36px;padding:0;border:1px solid #d6e5e1;border-radius:11px;background:#f7fbfa;cursor:pointer;font-size:17px;line-height:1;box-shadow:none}
.section-source-button:hover{background:#edf7f4}
.exam-title-with-source{display:flex;align-items:center;gap:10px}.exam-title-with-source h2{margin:0}
.source-modal{display:none;position:fixed;inset:0;z-index:100000}.source-modal.open{display:block}
.source-modal-backdrop{position:absolute;inset:0;background:rgba(4,22,30,.52);backdrop-filter:blur(3px)}
.source-modal-card{position:relative;z-index:1;width:min(680px,calc(100% - 28px));max-height:calc(100vh - 40px);overflow:auto;margin:20px auto;padding:23px;border-radius:22px;background:white;box-shadow:0 25px 70px rgba(0,0,0,.24)}
.source-modal-close{position:absolute;right:14px;top:12px;width:38px;height:38px;border:0;border-radius:12px;background:#f0f5f4;color:var(--navy);font-size:25px;cursor:pointer}
.source-modal-card h2{margin:0 45px 8px 0;color:var(--navy)}.source-modal-intro{color:var(--muted);line-height:1.5;margin-bottom:16px}
.source-list{display:grid;gap:10px}.source-item{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;padding:14px;border:1px solid #e0eae8;border-radius:15px;background:#fafdfc}
.source-item strong{color:var(--navy)}.source-item p{margin:5px 0 0;color:#40585d;line-height:1.45;font-size:13px}
.source-item a{flex:0 0 auto;padding:8px 10px;border-radius:10px;background:#edf7f4;color:#17695d;font-size:12px;font-weight:900;text-decoration:none}
body.source-modal-open{overflow:hidden}
@media(max-width:560px){.theory-title-row{gap:9px}.section-source-button{width:34px;height:34px;min-width:34px}.source-modal-card{margin:10px auto;max-height:calc(100vh - 20px);padding:19px}.source-item{display:block}.source-item a{display:inline-block;margin-top:10px}}

/* v4.8 – provkoll baserad på avcheckad teoriprogress */
.exam-dashboard-v48{grid-template-columns:1fr 1fr 170px}
.exam-chapter-progress{display:grid;gap:9px;margin-top:14px}
.exam-chapter-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border:1px solid #dfeae7;border-radius:14px;background:#fbfdfc}
.exam-chapter-row>div{display:flex;align-items:center;gap:10px;min-width:0}
.exam-chapter-row strong{color:var(--navy);font-size:14px}
.exam-chapter-check{display:grid;place-items:center;width:25px;height:25px;min-width:25px;border-radius:8px;background:#edf3f2;color:#6a7d80;font-weight:950}
.exam-chapter-status{color:var(--muted);font-size:13px;font-weight:900;white-space:nowrap}
.exam-chapter-row.is-complete{background:#f0f9f4;border-color:#bddfca}
.exam-chapter-row.is-complete .exam-chapter-check{background:#d8efdf;color:#17613b}
.exam-chapter-row.is-complete .exam-chapter-status{color:#17613b}
@media(max-width:800px){.exam-dashboard-v48{grid-template-columns:1fr 1fr}.exam-dashboard-v48 .exam-small-stat{grid-column:1/-1}}
@media(max-width:560px){.exam-dashboard-v48{grid-template-columns:1fr}.exam-dashboard-v48 .exam-small-stat{grid-column:auto}}


/* v4.8.4 – layoutfix för Standard/Lättläst */
.theory-toolbar [data-reading-mode],
.theory-mode-toggle button,
.reading-mode-toggle button{
  min-width:96px;
  width:auto;
  padding-left:14px;
  padding-right:14px;
  white-space:nowrap;
  overflow:visible;
  text-overflow:clip;
}

@media(max-width:700px){
  .theory-toolbar,
  .theory-controls{
    flex-wrap:wrap;
    row-gap:8px;
  }

  .theory-toolbar [data-reading-mode],
  .theory-mode-toggle button,
  .reading-mode-toggle button{
    min-width:92px;
    flex:0 0 auto;
  }
}


/* v4.8.5 – definitiv responsiv fix för teorins verktygsrad */

/* Själva Standard/Lättläst-gruppen ska aldrig krympa eller överlappa nästa grupp. */
.reading-toggle{
  display:inline-flex;
  flex:0 0 auto;
  min-width:202px;
  overflow:hidden;
  position:relative;
  z-index:2;
}
.reading-toggle > button{
  flex:1 0 101px;
  min-width:101px;
  width:101px;
  box-sizing:border-box;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:clip;
}

/* Mellanbred layout: två tydliga rader i stället för att grupperna pressas ihop. */
@media (min-width:701px) and (max-width:1100px){
  .theory-toolbar{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:10px 14px !important;
  }

  .reading-toggle{
    flex:0 0 202px !important;
    width:202px !important;
  }

  .theory-access-controls{
    flex:1 0 100% !important;
    width:100% !important;
    min-width:0 !important;
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:flex-start !important;
    align-items:center !important;
    gap:.45rem !important;
  }

  .text-size-controls{
    flex:0 0 auto !important;
  }
}

/* Mobil: Standard/Lättläst får egen fullbreddsrad ovanför övriga kontroller. */
@media (max-width:700px){
  .theory-toolbar{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:9px !important;
  }

  .reading-toggle{
    width:100% !important;
    min-width:0 !important;
    flex:0 0 auto !important;
  }

  .reading-toggle > button{
    width:50% !important;
    min-width:0 !important;
    flex:1 1 50% !important;
  }

  .theory-access-controls{
    width:100% !important;
  }
}


/* v4.8.6 – stabil verktygsrad, inga överlappningar */

/* Desktop och laptop */
@media (min-width:701px){
  .theory-toolbar{
    display:grid !important;
    grid-template-columns:auto 1fr !important;
    align-items:center !important;
    gap:10px 16px !important;
    overflow:visible !important;
  }

  .reading-toggle{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    width:220px !important;
    min-width:220px !important;
    max-width:220px !important;
    flex:none !important;
    overflow:hidden !important;
    position:static !important;
    z-index:auto !important;
  }

  .reading-toggle > button{
    display:block !important;
    width:110px !important;
    min-width:110px !important;
    max-width:110px !important;
    box-sizing:border-box !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:clip !important;
    position:static !important;
    z-index:auto !important;
  }

  .theory-access-controls{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:.45rem !important;
    min-width:0 !important;
    width:100% !important;
    overflow:visible !important;
  }

  .text-size-controls{
    display:inline-grid !important;
    grid-template-columns:repeat(3,44px) !important;
    width:132px !important;
    min-width:132px !important;
    max-width:132px !important;
    flex:0 0 132px !important;
    position:static !important;
    z-index:auto !important;
    overflow:hidden !important;
  }

  .text-size-controls button{
    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;
    box-sizing:border-box !important;
    position:static !important;
    z-index:auto !important;
  }
}

/* Mellanbred skärm: två tydliga rader */
@media (min-width:701px) and (max-width:1180px){
  .theory-toolbar{
    grid-template-columns:220px 1fr !important;
  }

  .theory-access-controls{
    grid-column:1 / -1 !important;
  }
}

/* Mobil */
@media (max-width:700px){
  .theory-toolbar{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:9px !important;
    overflow:visible !important;
  }

  .reading-toggle{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    overflow:hidden !important;
    position:static !important;
    z-index:auto !important;
  }

  .reading-toggle > button{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    box-sizing:border-box !important;
    white-space:nowrap !important;
    position:static !important;
    z-index:auto !important;
  }

  .theory-access-controls{
    width:100% !important;
    min-width:0 !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:.55rem !important;
    overflow:visible !important;
  }

  .text-size-controls{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    position:static !important;
    z-index:auto !important;
  }

  .text-size-controls button{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    box-sizing:border-box !important;
  }
}