:root{
  --bg1:#7ad7ff;
  --bg2:#d8f5ff;
  --ink:#17324a;
  --muted:#45657b;
  --card:#ffffffcc;
  --card2:#ffffffee;
  --shadow: 0 14px 30px rgba(0,0,0,.14);
  --shadow2: 0 10px 20px rgba(0,0,0,.12);
  --radius: 20px;
  --radius2: 16px;
  --accent:#ffb703;
  --accent2:#3a86ff;
  --good:#18a957;
  --warn:#f59e0b;
  --bad:#ef4444;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background: radial-gradient(1200px 500px at 50% 0%, var(--bg2), var(--bg1));
  overflow:hidden;
}

.app{
  height:100%;
  display:flex;
  flex-direction:column;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 18px;
  gap:12px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.logo{
  width:44px;height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:24px;
  color:#0b2d3f;
  background: linear-gradient(180deg,#fff, #dff7ff);
  box-shadow: var(--shadow2);
}
.brand-title{
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight:900;
  letter-spacing:.2px;
}
.brand-sub{
  color:var(--muted);
  font-size: clamp(12px, 1.6vw, 14px);
}

.top-actions{
  display:flex;
  gap:10px;
}
.icon-btn{
  border:none;
  background: linear-gradient(180deg,#fff,#eaf9ff);
  color:#0b2d3f;
  box-shadow: var(--shadow2);
  border-radius: 16px;
  padding:10px 12px;
  font-size:18px;
  cursor:pointer;
  user-select:none;
}
.icon-btn:active{transform: translateY(1px);}

.main{
  flex:1;
  padding: 0 18px 18px;
  overflow:hidden;
}

.screen{display:none; height:100%;}
.screen.active{display:block;}

.home-grid{
  height:100%;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.card{
  border:none;
  background: var(--card2);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding:14px;
  cursor:pointer;
  user-select:none;
}
.card:active{transform:translateY(1px);}

.card-today{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  background: linear-gradient(90deg, #ffdd57, #ff8fab);
  color:#3b1b2a;
  border: 2px solid rgba(255,255,255,.6);
}
.today-left{display:flex; align-items:center; gap:12px;}
.today-star{font-size:34px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.12));}
.today-title{font-weight:1000; font-size: clamp(18px, 2.2vw, 26px);}
.today-sub{opacity:.9; font-weight:700}
.today-right{text-align:right}
.pill{
  display:inline-block;
  padding:6px 10px;
  background: rgba(255,255,255,.55);
  border-radius: 999px;
  font-weight:900;
}
.tiny{font-size:12px;}
.muted{color:var(--muted);}

.tile-grid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap:12px;
  flex: 1;
  min-height: 0;
}

@media (max-width: 1100px){
  .tile-grid{grid-template-columns: repeat(4, minmax(0, 1fr));}
}
@media (max-width: 760px){
  .tile-grid{grid-template-columns: repeat(3, minmax(0, 1fr));}
}

.table-tile{
  padding:12px;
  border-radius: var(--radius2);
  background: linear-gradient(180deg, #ffffff, #eaf9ff);
  box-shadow: var(--shadow2);
  border: 1px solid rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height: 92px;
}
.tile-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}
.tile-name{
  font-weight:1000;
  font-size: 22px;
}
.level-badge{
  font-weight:900;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(58,134,255,.14);
  color:#124a9e;
}
.level-new{ background: rgba(148,163,184,.22); color:#334155; }
.level-growing{ background: rgba(245,158,11,.18); color:#7c4200; }
.level-strong{ background: rgba(24,169,87,.16); color:#0f5a32; }
.level-mastered{ background: rgba(255,183,3,.22); color:#6a4400; }

.progress{
  height:10px;
  background: rgba(0,0,0,.08);
  border-radius:999px;
  overflow:hidden;
}
.progress > div{
  height:100%;
  background: linear-gradient(90deg, var(--accent2), var(--good));
  width:0%;
}

.tile-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:var(--muted);
  font-size:12px;
}

.bottom-row{
  display:flex;
  gap:12px;
}

.big-btn{
  flex:1;
  border:none;
  border-radius: 18px;
  padding:14px 16px;
  font-weight:1000;
  font-size: clamp(14px, 1.8vw, 18px);
  cursor:pointer;
  background: linear-gradient(180deg,#ffffff,#eaf9ff);
  box-shadow: var(--shadow2);
  user-select:none;
}
.big-btn:active{transform: translateY(1px);}

.panel{
  height:100%;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:14px;
  overflow:auto;
}

.panel-header{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-bottom:10px;
}
.back-btn{
  width: fit-content;
  border:none;
  background: rgba(255,255,255,.7);
  border-radius: 14px;
  padding:10px 12px;
  font-weight:900;
  cursor:pointer;
  box-shadow: var(--shadow2);
}
.panel-title{font-weight:1000; font-size: clamp(18px, 2.2vw, 26px);}
.panel-sub{color:var(--muted); font-weight:700}

.mode-cards{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top:10px;
}
@media (max-width: 900px){
  .mode-cards{grid-template-columns: 1fr;}
}
.mode-card{
  border:none;
  border-radius: var(--radius);
  background: linear-gradient(180deg,#ffffff,#eaf9ff);
  box-shadow: var(--shadow2);
  padding:16px;
  cursor:pointer;
  text-align:left;
}
.mode-card:active{transform:translateY(1px);}
.mode-emoji{font-size:30px;}
.mode-name{font-weight:1000; font-size:20px; margin-top:6px;}
.mode-desc{color:var(--muted); font-weight:700; margin-top:4px;}
.mode-card-split{display:flex; flex-direction:column;}
.split-row{display:flex; gap:10px; margin-top:12px;}
.mini-btn{
  flex:1;
  border:none;
  border-radius: 14px;
  padding:12px;
  font-weight:1000;
  cursor:pointer;
  background: linear-gradient(180deg, #ffdd57, #ff8fab);
  box-shadow: var(--shadow2);
}
.mini-btn:active{transform:translateY(1px);}

.stats-strip{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.stat-pill{
  background: rgba(255,255,255,.75);
  border-radius: 999px;
  padding:8px 10px;
  box-shadow: var(--shadow2);
  font-weight:900;
  color:#124a9e;
}

.practice{
  height:100%;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.practice-top{
  display:flex;
  align-items:center;
  gap:12px;
}

.practice-meta{flex:1;}
.practice-title{font-weight:1000; font-size: clamp(18px, 2.2vw, 26px);}
.practice-sub{color:var(--muted); font-weight:700}

.hud{
  display:flex;
  gap:10px;
}
.hud-item{
  background: rgba(255,255,255,.75);
  border-radius: 16px;
  padding:10px 12px;
  box-shadow: var(--shadow2);
  min-width: 90px;
}
.hud-label{font-size:12px; color:var(--muted); font-weight:800;}
.hud-value{font-size:18px; font-weight:1000;}

.practice-body{
  flex:1;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:12px;
  min-height:0;
}
@media (max-width: 980px){
  .practice-body{grid-template-columns: 1fr;}
}
.problem-card{
  background: var(--card2);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:16px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:12px;
}
.problem{
  font-size: clamp(44px, 6vw, 70px);
  font-weight:1000;
}
.answer-row{
  display:flex;
  gap:10px;
  width:min(520px, 100%);
  justify-content:center;
  align-items:center;
}
.answer-box{
  flex:1;
  min-height:58px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: inset 0 2px 0 rgba(0,0,0,.06);
  border: 2px solid rgba(0,0,0,.08);
  padding:10px 14px;
  font-size: 28px;
  font-weight:1000;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.enter-btn{
  border:none;
  border-radius: 18px;
  padding:14px 16px;
  font-weight:1000;
  background: linear-gradient(180deg, #77e6a5, #26c36b);
  box-shadow: var(--shadow2);
  cursor:pointer;
}
.enter-btn:active{transform:translateY(1px);}

.feedback{
  min-height: 28px;
  font-weight:1000;
  font-size: 18px;
}
.feedback.good{color: var(--good);}
.feedback.bad{color: var(--bad);}
.feedback.warn{color: var(--warn);}

.keypad{
  background: var(--card2);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:14px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
  align-content:start;
}
.key{
  border:none;
  border-radius: 18px;
  padding:16px 12px;
  font-weight:1000;
  font-size: 24px;
  cursor:pointer;
  background: linear-gradient(180deg, #ffffff, #eaf9ff);
  box-shadow: var(--shadow2);
  user-select:none;
}
.key:active{transform:translateY(1px);}
.key-fn{background: linear-gradient(180deg, #fff, #ffe8d6);}
.key-wide{grid-column: span 2;}
.key-go{background: linear-gradient(180deg, #77e6a5, #26c36b);}

.summary-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:12px;
  margin-top:10px;
}
@media (max-width: 980px){
  .summary-grid{grid-template-columns: 1fr;}
}
.summary-card{
  background: rgba(255,255,255,.78);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding:14px;
}
.card-title{font-weight:1000; margin-bottom:8px;}
.summary-kpi{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 0;
}
.kpi-label{color:var(--muted); font-weight:800;}
.kpi-value{font-weight:1000; font-size:20px;}
.chips{display:flex; gap:8px; flex-wrap:wrap;}
.chip{
  padding:8px 10px;
  border-radius:999px;
  background: rgba(58,134,255,.14);
  color:#124a9e;
  font-weight:900;
  box-shadow: var(--shadow2);
}
.level-row{display:flex; gap:10px; align-items:center;}
.level-pill{
  padding:10px 12px;
  border-radius:999px;
  font-weight:1000;
  background: rgba(255,183,3,.22);
  color:#6a4400;
  box-shadow: var(--shadow2);
}
.divider{
  height:1px;
  background: rgba(0,0,0,.1);
  margin:12px 0;
}

.modal{
  position:fixed;
  inset:0;
  display:none;
}
.modal.show{display:block;}
.modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.35);
}
.modal-card{
  position:absolute;
  right:18px;
  top:68px;
  width: min(720px, calc(100% - 36px));
  background: rgba(255,255,255,.92);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:14px;
}
.modal-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.modal { 
  z-index: 2000; 
}

.modal-backdrop { 
  z-index: 2001; 
}

.modal-card { 
  z-index: 2002; 
}


.modal-title{font-weight:1000; font-size:20px;}
.modal-sub{color:var(--muted); font-weight:700;}
.modal-body{margin-top:10px;}
.settings-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width: 860px){
  .settings-grid{grid-template-columns: 1fr;}
}
.setting{
  background: rgba(255,255,255,.75);
  border-radius: 18px;
  box-shadow: var(--shadow2);
  padding:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.setting-label{font-weight:900;}
.setting input[type="number"]{
  width:110px;
  border-radius:14px;
  border:2px solid rgba(0,0,0,.12);
  padding:10px 12px;
  font-weight:1000;
  font-size:16px;
}
.danger-btn{
  border:none;
  border-radius: 14px;
  padding:10px 12px;
  font-weight:1000;
  cursor:pointer;
  background: linear-gradient(180deg, #ffb4b4, #ff6b6b);
  box-shadow: var(--shadow2);
}
.export-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.file-btn{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.file-btn input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}

.switch{
  position:relative;
  display:inline-block;
  width:56px;
  height:32px;
}
.switch input{opacity:0; width:0; height:0;}
.slider{
  position:absolute;
  cursor:pointer;
  inset:0;
  background-color: rgba(0,0,0,.15);
  transition:.2s;
  border-radius:999px;
}
.slider:before{
  position:absolute;
  content:"";
  height:26px; width:26px;
  left:3px; top:3px;
  background:white;
  transition:.2s;
  border-radius:999px;
  box-shadow: var(--shadow2);
}
.switch input:checked + .slider{
  background: rgba(24,169,87,.45);
}
.switch input:checked + .slider:before{
  transform: translateX(24px);
}

.rotate-overlay{
  position:fixed;
  inset:0;
  display:none;
  background: rgba(0,0,0,.45);
  z-index:9999;
}
.rotate-card{
  position:absolute;
  inset:0;
  margin:auto;
  width:min(520px, calc(100% - 32px));
  height: fit-content;
  background: rgba(255,255,255,.92);
  border-radius: 26px;
  box-shadow: var(--shadow);
  padding:22px;
  text-align:center;
}
.rotate-icon{font-size:44px;}
.rotate-title{font-weight:1000; font-size:22px; margin-top:6px;}
.rotate-sub{color:var(--muted); font-weight:800; margin-top:6px;}

@media (orientation: portrait){
  .rotate-overlay{display:block;}
}

/* V2 input reliability: repeated taps should enter repeated digits, not zoom/select. */
button, .key, .answer-box {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

/* V2 Step 2: practice setup */
.setup-panel{max-width:1100px;margin:0 auto;}
.setup-step{background:rgba(255,255,255,.58);border-radius:18px;padding:12px 14px;margin-top:10px;box-shadow:var(--shadow2);}
.setup-step-title{display:flex;align-items:center;gap:9px;font-weight:1000;font-size:clamp(15px,1.8vw,19px);margin-bottom:10px;}
.setup-step-title>span{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#fff;color:#124a9e;box-shadow:var(--shadow2);}
.family-picker{display:grid;grid-template-columns:repeat(11,1fr);gap:8px;}
.family-choice{border:2px solid transparent;border-radius:14px;padding:11px 5px;background:#fff;font-weight:1000;font-size:clamp(14px,1.7vw,19px);cursor:pointer;box-shadow:var(--shadow2);touch-action:manipulation;user-select:none;}
.family-choice.selected{border-color:#3a86ff;background:#e8f3ff;transform:translateY(-1px);}
.family-choice.selected::after{content:' ✓';color:#147a36;}
.setup-helper{margin-top:8px;color:var(--muted);font-weight:800;font-size:13px;}
.operation-picker{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.session-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.choice-card{border:2px solid transparent;border-radius:16px;padding:11px 13px;background:#fff;box-shadow:var(--shadow2);cursor:pointer;font-weight:1000;display:flex;align-items:center;justify-content:center;gap:10px;touch-action:manipulation;user-select:none;}
.choice-card strong{font-size:26px;}.choice-card span{display:flex;flex-direction:column;}.choice-card small{font-weight:700;color:var(--muted);}
.choice-card.selected{border-color:#3a86ff;background:#e8f3ff;}
.start-practice-btn{width:100%;margin-top:12px;border:none;border-radius:17px;padding:14px;font-weight:1000;font-size:18px;cursor:pointer;background:linear-gradient(180deg,#7ee081,#45bd63);box-shadow:var(--shadow2);touch-action:manipulation;}
.start-practice-btn:disabled{opacity:.45;cursor:not-allowed;}
@media(max-width:900px){.family-picker{grid-template-columns:repeat(6,1fr)}.session-picker{grid-template-columns:1fr 1fr 1fr}.setup-step{padding:9px 10px}}