:root{
  --bg:#0d1117; --panel:#161b22; --text:#c9d1d9; --muted:#8b949e;
  --primary:#2ea043; --primary-weak:#1f6feb; --danger:#f85149; --accent:#d29922;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Ubuntu,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--text); background:var(--bg);
}
.app-header{padding:6px 12px; background:#0b1220; border-bottom:1px solid #222}
.app-header .container{display:flex; align-items:center; gap:10px}
.app-header h1{margin:0; font-size:16px; line-height:1}
.subtitle{margin:0; color:var(--muted); font-size:12px}
.container{max-width:980px; margin:0 auto; padding:16px; overflow-x:hidden}
.controls{background:var(--panel); padding:12px; border-radius:8px; border:1px solid #24292f}
.row{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
label{display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--muted)}
select{background:#0b1220; color:var(--text); border:1px solid #30363d; padding:8px 10px; border-radius:6px}
button{border:none; padding:10px 14px; border-radius:10px; cursor:pointer; color:#fff; background:#30363d; transition:background .15s,border-color .15s,box-shadow .15s,transform .05s}
button.primary{background:var(--primary)}
button.secondary{background:var(--primary-weak)}
button.danger{background:var(--danger)}
button:disabled{opacity:.5; cursor:not-allowed}
.stats{margin-top:10px; color:var(--muted); font-size:13px}
.badge{background:#30363d; color:#fff; padding:3px 8px; border-radius:999px; font-size:12px}
.muted{color:var(--muted); font-size:12px}
.hidden{display:none}

.card-area,.mcq-area{margin-top:16px}
.card,.mcq-card{background:var(--panel); border:1px solid #24292f; border-radius:12px; padding:18px}
.card-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px}
.prompt{font-size:24px; font-weight:600; margin:18px 0}
.answer{font-size:20px; color:#fff; opacity:.95; margin:10px 0}
.hints{color:var(--muted); font-size:13px}
.actions{display:flex; gap:10px; margin:14px 0}
.mini-row{display:flex; align-items:center; justify-content:space-between; gap:8px}
.mini-label{font-size:12px; color:var(--muted)}
.progress{height:10px; background:#1b1f24; border:1px solid #24292f; border-radius:999px; overflow:hidden}
.bar{height:100%; width:0%; background:linear-gradient(90deg,var(--primary),#3fb950)}

.choices{display:grid; grid-template-columns:1fr; gap:10px}
.choice{display:block; background:#0b1220; border:1px solid #30363d; padding:12px; border-radius:8px; cursor:pointer; color:var(--text); text-decoration:none}
.choice.correct{border-color:#238636; background:#132a16}
.choice.wrong{border-color:#da3633; background:#2c1517}

.help{margin-top:18px; color:var(--muted)}
.app-footer{padding:10px 20px; border-top:1px solid #222; color:var(--muted); font-size:12px}

@media (min-width:700px){
  .choices{grid-template-columns:1fr 1fr}
}


/* ===== Tester (Eiken Pre-1) UI ===== */
.tester-layout{display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:16px; min-width:0}
.tester-main{min-width:0}
.tester-sidebar{min-width:0}
.tester-main{grid-column:1}
.tester-sidebar{grid-column:2}
.tester-sidebar{background:var(--panel); border:1px solid #24292f; border-radius:12px; padding:12px; position:sticky; top:16px; max-height:calc(100vh - 48px); overflow:auto}
.tester-sidebar-header{font-weight:600; margin-bottom:8px}
.tester-legend{display:flex; align-items:center; gap:6px; margin-bottom:6px}
.tester-list{list-style:none; padding:0; margin:0}
.tester-list-item{display:flex; align-items:center; justify-content:space-between; gap:10px; background:#0b1220; border:1px solid #30363d; border-radius:10px; padding:10px 12px; margin:8px 0; cursor:pointer; transition:background .15s,border-color .15s,box-shadow .15s}
.tester-list-item:hover{background:#0f1729}
.tester-list-item.current{border-color:var(--accent); box-shadow:0 0 0 2px rgba(210,153,34,.2), 0 0 18px rgba(210,153,34,.25); animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 2px rgba(210,153,34,.25),0 0 12px rgba(210,153,34,.25)}50%{box-shadow:0 0 0 3px rgba(210,153,34,.35),0 0 22px rgba(210,153,34,.35)}100%{box-shadow:0 0 0 2px rgba(210,153,34,.25),0 0 12px rgba(210,153,34,.25)}}
.tester-list-item .title{display:flex; align-items:center; gap:8px; font-size:14px}
.tester-list-item .num{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:999px; background:#192135; font-size:12px; color:#9fb3d1}
.tester-list-item .pills{display:flex; gap:6px}
.pill{display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px; border-radius:8px; background:#202835; border:1px solid #2a3446; font-size:11px; color:#8b949e}
.pill.ok{background:#132a16; border-color:#238636; color:#c9f7d5}
.tester-finished{margin-top:10px; background:#0b1220; border:1px solid #238636; border-radius:10px; padding:10px; text-align:center; color:#c9f7d5; box-shadow:0 0 14px rgba(46,160,67,.18) inset, 0 0 16px rgba(46,160,67,.16)}
.tester-review-ok{margin-top:10px; background:#0b1220; border:1px solid #238636; border-radius:10px; padding:10px; text-align:center; color:#c9f7d5; box-shadow:0 0 14px rgba(46,160,67,.18) inset, 0 0 16px rgba(46,160,67,.16)}

.tester-main{display:flex; flex-direction:column; gap:12px}
.tester-header{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.tester-tabs{display:flex; gap:6px; background:#0b1220; border:1px solid #30363d; padding:4px; border-radius:10px; flex:0 0 auto; white-space:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch}
.tester-tabs .tab{background:transparent; border:none; color:var(--text); padding:8px 12px; border-radius:8px; cursor:pointer; white-space:nowrap}
.tester-tabs .tab.active{background:#1b2336}
.tester-progress{display:flex; align-items:center; gap:10px; min-width:220px; flex:1 1 auto; flex-wrap:nowrap; white-space:nowrap}
.tester-header-right{display:flex; gap:8px}
.help-toggle.toggled{border-color:#375a9e; background:#0f1729; color:#c9d1d9}

.tester-notice{background:#0b1220; border:1px solid #30363d; border-left:3px solid var(--accent); color:var(--muted); padding:8px 10px; border-radius:8px}

/* Embedded LP section */
.lp-embed-root{max-width:980px; margin:22px auto 40px; padding:0}
.lp-embed{background:var(--panel); border:1px solid #24292f; border-radius:14px; padding:18px; width:100%}
.lp-embed-title{margin:0 0 10px; font-size:18px; color:#e6edf3}

/* Sliding switcher */
.tester-switcher{position:relative; overflow:hidden; min-width:0}
.tester-switcher .slide{display:flex; transform:translate3d(0,0,0); transition:transform .38s cubic-bezier(.22,1,.36,1); will-change:transform}
.tester-switcher .pane{flex:0 0 100%; min-width:0; padding:0; contain:layout paint; backface-visibility:hidden; display:flex; justify-content:center}
.tester-switcher .pane > .card, .tester-switcher .pane > .mcq-card{width:100%; max-width:640px}
.tester-switcher.phase-review .slide{transform:translate3d(0,0,0)}
.tester-switcher.phase-dict .slide{transform:translate3d(-100%,0,0)}

.tester-input-row{display:grid; grid-template-columns:1fr auto; gap:8px; margin:10px 0}
.tester-input-actions{display:flex; gap:8px}
.tester-input{background:#0b1220; color:var(--text); border:1px solid #30363d; border-radius:8px; padding:10px}
.tester-input:focus{outline:none; border-color:#375a9e; box-shadow:0 0 0 2px rgba(31,111,235,.25)}
.info{background:#0b1220; border:1px dashed #30363d; padding:10px; border-radius:8px; margin-top:6px}
.word-title{color:#e8d98e; letter-spacing:.2px; text-shadow:0 0 3px rgba(210,153,34,.10); font-weight:600; margin-bottom:6px}
.example-en{font-size:18px; line-height:1.8; margin:10px 0 6px; color:var(--text); text-shadow:none; background:none; padding:0}
.result{margin-top:6px; font-weight:700; letter-spacing:.2px}
.result.ok{color:#7debb6; text-shadow:0 0 4px rgba(125,235,182,.25), 0 0 8px rgba(125,235,182,.15)}
.result.ng{color:#ff7f7f; text-shadow:0 0 4px rgba(255,127,127,.25), 0 0 8px rgba(255,127,127,.15)}

/* Harmonize buttons inside card */
.card button{background:#0b1220; border:1px solid #30363d}
/* toned-down neon for primary (Next / 判定) */
.card button.primary{
  background:#0b1220;
  color:#d1f7d8;
  border-color:#29964a;
  box-shadow:0 0 0 1px rgba(46,160,67,.18) inset, 0 0 10px rgba(46,160,67,.14);
}
.card button.primary:hover{
  border-color:#2ea043;
  box-shadow:0 0 0 1px rgba(46,160,67,.24) inset, 0 0 14px rgba(46,160,67,.22);
}
.card button.primary:active{transform:translateY(1px)}
.card button.secondary{background:#0b1220; border-color:#30363d}
.card button.danger{background:#2c1517; border-color:#da3633}
.card button.ghost{background:transparent; border:1px solid transparent; color:var(--muted); padding:6px 8px}
.card button.ghost:hover{color:#c9d1d9; text-decoration:underline}
.card button.reveal{
  background:#0b1220;
  border:1px solid rgba(210,153,34,.25);
  color:#bba95d;
  padding:4px 8px;
  border-radius:999px;
  font-weight:400;
  font-size:11px;
  box-shadow:0 0 3px rgba(210,153,34,.05);
}
.card button.reveal:hover{
  border-color:rgba(227,179,65,.35);
  box-shadow:0 0 5px rgba(227,179,65,.07);
  text-decoration:none;
}
.card button.primary:hover{box-shadow:0 0 0 1px rgba(46,160,67,.24) inset, 0 0 14px rgba(46,160,67,.22)}
.card button.secondary:hover{border-color:#375a9e; background:#0f1729}

/* Ghost button outside cards (e.g., header Help) */
button.ghost{background:transparent; border:1px solid #30363d; color:var(--muted)}
button.ghost:hover{border-color:#375a9e; color:#c9d1d9}

.settings-grid{display:grid; grid-template-columns:1fr; gap:8px}

/* Subtle Help card */
.help-card{background:#0b1220; border:1px dashed #2a3446; border-left:3px solid var(--accent); color:var(--muted); padding:12px; border-radius:10px}
.help-card h3{margin:0 0 6px; font-size:14px; color:#e6edf3}
.help-card ul{margin:0; padding-left:18px; line-height:1.6}
.help-card li{margin:4px 0}

@media (max-width:820px){
  .tester-layout{grid-template-columns:1fr}
  .tester-main{grid-column:1; order:1}
  .tester-sidebar{grid-column:1; order:2; position:static; max-height:none}
  .tester-progress{width:100%}
  .tester-input-row{grid-template-columns:1fr}
}
@media (max-width:640px){
  .tester-header{row-gap:8px}
  .tester-progress{flex-basis:100%; order:3}
  .tester-header-right{order:2}
}
@media (max-width:480px){
  .card,.mcq-card{padding:12px; border-radius:10px}
  .tester-sidebar{padding:10px; border-radius:10px}
  .tester-list-item{padding:8px 10px}
  .tester-list-item .title{font-size:13px}
  .tester-list-item .num{width:18px; height:18px; font-size:11px}
  .pill{min-width:18px; height:18px; font-size:10px; padding:0 5px}
  .prompt{font-size:18px; margin:12px 0}
  .answer{font-size:16px}
  button{padding:8px 12px; border-radius:8px}
  .lp-embed{padding:12px}
}