:root{--bg:#101116;--side:#15161d;--panel:#1a1c24;--panel2:#20232d;--line:#2b2e38;--text:#f0eee9;--muted:#9699a5;--accent:#b5ff67;--purple:#b6a4ff;--yellow:#f3ca58;--red:#ff7c7c;--radius:14px;font-family:Inter,"Segoe UI","Yu Gothic UI",sans-serif;color:var(--text);background:var(--bg);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 74% -20%,#27233b 0,transparent 31%),var(--bg);min-width:1024px;min-height:100vh}button,input,select,textarea{font:inherit}button{color:inherit}.app-shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:230px;padding:25px 16px;background:rgba(20,21,28,.96);border-right:1px solid var(--line);display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:11px;border:0;background:none;text-align:left;padding:0 8px 25px;cursor:pointer}.brand .logo{width:39px;height:39px;border-radius:10px;display:grid;place-items:center;background:var(--accent);color:#152008;font:800 21px Georgia;transform:rotate(-3deg)}.brand b{display:block;font-family:Georgia,serif;font-size:20px;letter-spacing:.4px}.brand small{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:1.6px}.sidebar nav{display:grid;gap:5px}.nav-item{border:0;background:none;padding:11px 12px;border-radius:8px;display:flex;gap:12px;align-items:center;color:#aaaeba;cursor:pointer;text-align:left}.nav-item:hover{background:#20222b;color:#fff}.nav-item.active{background:#292c36;color:#fff}.nav-item.active:before{content:"";width:3px;height:20px;background:var(--accent);border-radius:4px;margin-left:-12px}.nav-item span{font-size:18px;width:21px;text-align:center}.nav-item em{margin-left:auto;background:var(--accent);color:#17210f;border-radius:20px;min-width:21px;text-align:center;font:700 11px/21px sans-serif}.side-note{margin-top:auto;color:#bcc0c7;font-size:11px;padding:14px 10px;border-top:1px solid var(--line)}.side-note small{display:block;color:#727681;margin:6px 0 0 16px}.pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);margin-right:9px}.workspace{grid-column:2;padding:54px 58px 70px;max-width:1500px;width:100%;margin:auto}.page-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:32px}.page-head h1{font-family:Georgia,"Yu Mincho",serif;font-size:39px;letter-spacing:-1px;margin:7px 0 8px}.page-head>div>p:last-child{color:var(--muted);margin:0}.kicker{font:700 10px/1.2 sans-serif!important;letter-spacing:2.2px;color:var(--accent)!important;margin:0}.btn{border:1px solid var(--line);padding:11px 17px;border-radius:8px;background:var(--panel2);cursor:pointer;white-space:nowrap}.btn:hover{filter:brightness(1.15)}.btn.primary{background:var(--accent);color:#17200e;border-color:var(--accent);font-weight:750}.btn.ghost{background:transparent}.panel,.table-card,.editor{background:rgba(26,28,36,.9);border:1px solid var(--line);border-radius:var(--radius)}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}.stats button{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:12px;padding:18px 20px;text-align:left;cursor:pointer}.stats button:hover{border-color:#454957}.stats span,.stats small{display:block;color:var(--muted);font-size:12px}.stats b{display:block;font:normal 34px Georgia;margin:8px 0 3px}.stats b.accent{color:var(--accent)}.home-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:18px}.home-grid .panel{padding:26px}.panel-title{display:flex;justify-content:space-between;align-items:flex-start}.panel h2{font:600 20px Georgia;margin:7px 0 16px}.focus{background:linear-gradient(135deg,#20232a,#222735)}.focus>p{color:#b2b5be;line-height:1.7;max-width:410px;margin-bottom:28px}.big-glyph{font:normal 51px Georgia;color:var(--accent)}.text-btn,.back-link{border:0;background:none;color:var(--muted);cursor:pointer}.recent-list button{width:100%;display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;border:0;border-top:1px solid var(--line);background:none;text-align:left;padding:12px 2px;cursor:pointer}.recent-list button:hover b{color:var(--accent)}.recent-list b,.recent-list small{display:block}.recent-list small{color:var(--muted);margin-top:3px}.recent-list em{font-style:normal;color:#8e92a0;font-size:11px}.star{color:#4b4e58}.star.on{color:var(--yellow)}.tag-cloud{padding:21px 25px;margin-top:18px;display:flex;align-items:center;gap:40px}.tag-cloud h2{margin-bottom:0}.tag-cloud>div:last-child{display:flex;gap:8px;flex-wrap:wrap}.tag-cloud button,dd button{border:1px solid var(--line);background:#232630;color:#b9bbc4;padding:7px 10px;border-radius:20px;cursor:pointer}.filterbar{display:grid;grid-template-columns:minmax(260px,1fr) repeat(3,180px) 42px;gap:9px;margin-bottom:14px}.search{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:0 13px;display:flex;align-items:center;gap:9px}.search input{border:0;background:none;color:white;outline:0;width:100%;padding:11px 0}select,input,textarea{background:#1f212a;border:1px solid #343741;color:var(--text);border-radius:7px;padding:11px;outline:none}select:focus,input:focus,textarea:focus{border-color:#7f9f60;box-shadow:0 0 0 3px rgba(181,255,103,.07)}.filterbar select{width:100%}.icon-btn{border:1px solid var(--line);background:var(--panel);border-radius:8px;cursor:pointer}.icon-btn.active,.icon-btn.on{color:var(--yellow);border-color:#756536}.word-table{display:grid;grid-template-columns:36px minmax(160px,1.2fr) minmax(170px,1.5fr) minmax(100px,.8fr) minmax(120px,1fr) 100px 20px;align-items:center;gap:10px}.table-head{padding:13px 18px;color:#777b86;font-size:10px;text-transform:uppercase;letter-spacing:1px}.table-row{width:100%;border:0;border-top:1px solid var(--line);background:none;color:var(--text);padding:15px 18px;text-align:left;cursor:pointer}.table-row:hover{background:#1f222b}.table-row b,.table-row small{display:block}.table-row small{color:var(--muted);margin-top:4px}.table-row i{font-style:normal;font-size:11px;background:#2a2d36;padding:4px 7px;border-radius:5px;margin:2px}.table-row i.tag{background:#292537;color:#c4b8f6}.status{font-style:normal;font-size:10px;padding:5px 8px;border-radius:15px;white-space:nowrap}.s0{background:#2b2d35;color:#bbb}.s1{background:#30362a;color:#cdecaa}.s2{background:#332e44;color:#c5b9ff}.s3{background:#173d31;color:#72d7ad}.empty{padding:60px;text-align:center;color:var(--muted)}.empty b,.empty span{display:block;margin:7px}.editor{overflow:hidden}.form-section{display:grid;grid-template-columns:70px 1fr;border-bottom:1px solid var(--line)}.section-no{color:var(--accent);font:700 11px monospace;padding:30px}.section-body{padding:28px 34px 35px;border-left:1px solid var(--line)}.section-body h2{font:600 20px Georgia;margin:0 0 25px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.field.full{grid-column:1/-1}.field>label{display:block;color:#d4d5d9;font-size:12px;margin-bottom:8px}.field label small{color:#6f737e;margin-left:9px}.field label b{color:var(--accent)}.field>input,.field>select,.field>textarea{width:100%}.field textarea{min-height:100px;resize:vertical}.check-grid{display:flex;gap:7px;flex-wrap:wrap}.check-grid input{display:none}.check-grid span{display:block;border:1px solid var(--line);border-radius:6px;padding:8px 12px;color:#9fa2ac;cursor:pointer}.check-grid input:checked+span{color:#17200e;background:var(--accent);border-color:var(--accent)}.chips-input{border:1px solid #343741;background:#1f212a;border-radius:7px;padding:6px;display:flex;gap:6px;flex-wrap:wrap}.chips-input:focus-within{border-color:#7f9f60}.chips-input>span{background:#30333d;border-radius:5px;padding:5px 7px 5px 9px;font-size:12px}.chips-input span button{border:0;background:none;color:#8d919b;cursor:pointer}.chips-input input{border:0;background:none;box-shadow:none;padding:5px;min-width:190px;flex:1}.form-actions{padding:20px 34px;display:flex;justify-content:space-between;align-items:center}.form-actions>div{display:flex;gap:8px}.favorite-check input{display:none}.favorite-check span{color:#4b4e58;font-size:20px}.favorite-check:has(input:checked) span{color:var(--yellow)}.back-link{margin:-15px 0 20px;padding:6px 0}.detail-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:16px}.detail-grid .panel{padding:27px}.word-hero{grid-row:span 1;background:linear-gradient(145deg,#20222a,#252333)}.word-hero>span{color:var(--purple);font-size:11px;text-transform:uppercase;letter-spacing:1.5px}.word-hero h2{font:normal 39px Georgia;margin:25px 0 7px}.ipa{color:var(--muted)}.word-hero>div{display:flex;gap:8px;flex-wrap:wrap;margin:27px 0}.word-hero>div b{font-weight:500;background:#2c2f39;padding:8px 11px;border-radius:6px}.detail-grid blockquote,.result blockquote{border-left:2px solid var(--accent);padding:10px 16px;margin:12px 0;background:#20232b;color:#d9d9dc}.space{margin-top:30px!important}.detail-grid dl{display:grid;grid-template-columns:70px 1fr;gap:16px;margin:25px 0 0}.detail-grid dt{color:var(--muted);font-size:12px;padding-top:7px}.detail-grid dd{margin:0;display:flex;gap:6px;flex-wrap:wrap}.review-info>div{display:flex;gap:10px}.review-info>div span{background:#22252e;padding:12px;border-radius:8px;color:var(--muted);font-size:11px}.review-info>div b{font:22px Georgia;color:white;display:block}.danger-link{border:0;background:none;color:#c67676;padding:20px 0 0;cursor:pointer}.quiz-setup{max-width:850px;padding:35px}.setup-lead{display:flex;gap:25px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:25px}.setup-lead p{color:var(--muted)}.setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:28px 0}.setup-grid select{width:100%}.wide{width:100%;padding:14px}.quiz-page{max-width:850px;margin:auto}.quiz-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:35px}.quiz-top>div{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px}.progress{width:260px;height:4px;background:#292c35;border-radius:4px}.progress i{display:block;height:100%;background:var(--accent)}.quiz-card{text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:60px}.quiz-card h1{font:normal 36px Georgia;margin:18px}.quiz-meta{display:flex;justify-content:center;gap:7px}.quiz-meta span{font-size:10px;border:1px solid var(--line);padding:5px 8px;border-radius:20px;color:var(--muted)}#answer-form{display:flex;gap:9px;max-width:560px;margin:45px auto 12px}#answer-form input{flex:1;font-size:18px;padding:14px}.key-hint{color:#686c76}.result{margin:35px auto 20px;max-width:550px;border-radius:10px;padding:20px;background:#22252d}.result>span{font-weight:700}.result.correct>span{color:var(--accent)}.result.close>span{color:var(--yellow)}.result.wrong>span{color:var(--red)}.result h2{font:32px Georgia;margin:17px 0 5px}.rate{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.rate>p{grid-column:1/-1}.rate button{background:#22252d;border:1px solid var(--line);border-radius:8px;padding:12px;cursor:pointer}.rate button:hover{border-color:var(--accent)}.rate small{display:block;color:var(--muted);font-size:9px;margin-top:5px}.done{max-width:650px;text-align:center;margin:60px auto;padding:55px}.done>div{display:flex;justify-content:center;gap:12px;margin:30px}.done>div span{background:#22252d;padding:14px 22px;border-radius:8px;color:var(--muted)}.done>div b{font:26px Georgia;color:white;display:block}.done>.btn{margin:4px}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.settings-grid .panel{padding:30px}.settings-grid p{color:var(--muted);line-height:1.7}.settings-grid .big-glyph{font-size:37px}.data-note{grid-column:1/-1}.data-note ul{display:flex;gap:40px;color:#b9bbc3}.file-btn input{display:none}.toast{position:fixed;right:25px;bottom:25px;background:#e8e8e1;color:#1a1b1f;padding:12px 18px;border-radius:8px;transform:translateY(30px);opacity:0;transition:.2s;z-index:9}.toast.show{transform:none;opacity:1}.muted{color:var(--muted)}
.ipa-palette{grid-column:1/-1;margin-top:8px;padding:13px;background:#191b22;border:1px solid var(--line);border-radius:8px}.ipa-palette-head{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}.ipa-palette-head span{font-size:11px;font-weight:700;color:#d8dadf}.ipa-palette-head small{color:#70747f;font-size:9px}.ipa-group{display:flex;align-items:center;gap:10px;margin-top:7px}.ipa-group>b{width:64px;color:#7e828d;font-size:9px;font-weight:600}.ipa-group>div{display:flex;gap:5px;flex-wrap:wrap}.ipa-group button{min-width:32px;height:31px;padding:0 7px;border:1px solid #343844;border-radius:6px;background:#252832;color:#e2e2df;font-family:"Segoe UI",sans-serif;font-size:15px;cursor:pointer}.ipa-group button:hover,.ipa-group button:focus{border-color:var(--accent);color:var(--accent);background:#2b3028;outline:0}
.learning-panel{padding:25px 26px 18px;margin-bottom:18px}.learning-head{display:flex;justify-content:space-between;gap:30px;align-items:flex-start}.learning-head h2{margin:7px 0 6px}.learning-head>div:first-child>p:last-child{margin:0;color:var(--muted);font-size:12px}.learning-summary{display:grid;grid-template-columns:repeat(4,minmax(90px,1fr));gap:8px}.learning-summary span{min-width:95px;background:#22252e;border-radius:8px;padding:10px 12px;color:var(--muted);font-size:9px}.learning-summary b{display:block;color:var(--text);font:22px Georgia;margin-bottom:3px}.chart-legend{display:flex;gap:18px;margin:20px 0 4px;color:var(--muted);font-size:10px}.chart-legend .actual{color:var(--accent)}.chart-legend .planned{color:var(--purple)}.chart-legend .retention{color:var(--yellow)}.learning-chart{width:100%;overflow:hidden}.learning-chart svg{display:block;width:100%;height:auto;min-height:220px}.learning-chart text{fill:#777b86;font-size:10px}.chart-grid{stroke:#343742;stroke-width:1}.chart-bar.actual{fill:var(--accent);opacity:.72}.chart-bar.planned{fill:var(--purple);opacity:.68}.retention-line{fill:none;stroke:var(--yellow);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}.today-line{stroke:#f0eee9;stroke-width:1;stroke-dasharray:4 5;opacity:.45}.chart-note{margin:0!important;color:#727681!important;font-size:9px!important;text-align:right}
@media(max-width:1100px){.workspace{padding:42px 30px}.filterbar{grid-template-columns:1fr 150px 150px}.filterbar #f-tag{display:none}.word-table{grid-template-columns:30px 1fr 1fr 100px 20px}.word-table>span:nth-child(4),.word-table>span:nth-child(5){display:none}}

/* Compact layout shared by iPhone WKWebView and mobile Safari. */
@media (max-width: 767px) {
  body { min-width: 320px; }
  .app-shell { display: block; min-height: 100dvh; }
  .sidebar { position: sticky; top: 0; width: 100%; z-index: 5; padding: calc(8px + env(safe-area-inset-top)) 12px 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { padding: 0 4px 8px; }
  .brand .logo { width: 30px; height: 30px; }
  .brand small, .side-note { display: none; }
  .sidebar nav { display: flex; overflow-x: auto; gap: 4px; }
  .nav-item { flex-shrink: 0; min-height: 44px; padding: 8px; gap: 5px; font-size: 12px; }
  .nav-item.active:before { display: none; }
  .workspace { padding: 24px max(16px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .page-head { flex-direction: column; gap: 16px; }
  .page-head h1 { font-size: 29px; letter-spacing: -.5px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats button { padding: 16px; }
  .home-grid, .detail-grid, .settings-grid, .form-grid, .setup-grid { grid-template-columns: minmax(0, 1fr); }
  .learning-head { flex-direction: column; gap: 16px; }
  .learning-summary { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learning-summary span { min-width: 0; }
  .learning-panel { padding: 20px 16px; }
  .chart-legend { flex-wrap: wrap; gap: 8px 14px; }
  .learning-chart { overflow-x: auto; }
  .learning-chart svg { min-width: 650px; }
  .tag-cloud { align-items: flex-start; flex-direction: column; gap: 16px; }
  .filterbar { grid-template-columns: minmax(0, 1fr) 44px; }
  .filterbar .search { grid-column: 1 / -1; }
  .filterbar #f-tag { display: block; }
  .word-table { grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr) 20px; gap: 8px; }
  .word-table > span:nth-child(6) { display: none; }
  .table-row { padding: 14px 10px; overflow-wrap: anywhere; }
  .form-section { grid-template-columns: 36px minmax(0, 1fr); }
  .section-no { padding: 24px 8px; }
  .section-body { padding: 24px 14px; min-width: 0; }
  input, select, textarea { font-size: 16px; min-width: 0; }
  .chips-input input { min-width: 100px; width: 100%; }
  .form-actions { padding: 16px; flex-wrap: wrap; gap: 12px; }
  .ipa-group { align-items: flex-start; }
  .ipa-group button, .btn, .icon-btn, .text-btn, .back-link { min-height: 44px; }
  .quiz-setup { padding: 24px 16px; }
  .quiz-card { padding: 30px 16px; }
  .quiz-card h1 { font-size: 28px; margin: 18px 0; overflow-wrap: anywhere; }
  .quiz-top { gap: 8px; }
  .progress { width: 90px; }
  #answer-form { flex-direction: column; margin-top: 28px; }
  #answer-form input { width: 100%; }
  .rate { grid-template-columns: minmax(0, 1fr); }
  .review-info > div, .done > div { flex-wrap: wrap; }
  .done { margin: 24px auto; padding: 24px 16px; }
  .data-note ul { display: block; padding-left: 20px; }
  .toast { left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }
}
body { min-width: 320px; }
.login-wrap { max-width: 460px; margin: 10vh auto; padding: 24px; }
.login-wrap .panel { padding: 30px; }
.login-wrap h1 { font: 36px Georgia, serif; }
.login-wrap label, .admin-form label { display: block; margin: 20px 0; }
.login-wrap input, .admin-form input, .admin-form select { display: block; width: 100%; margin-top: 8px; }
.login-error { color: var(--red); min-height: 24px; }
button:disabled { opacity: .5; cursor: wait; }
.account-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
@media (min-width:768px) and (max-width:1023px) {
  .app-shell { grid-template-columns: 190px minmax(0,1fr); }
  .sidebar { width: 190px; }
  .workspace { padding: 30px 20px; }
  .home-grid,.detail-grid,.settings-grid { grid-template-columns:minmax(0,1fr); }
  .learning-head { flex-direction:column; }
}
@media (max-width:767px) {
  .sidebar { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; }
  .sidebar .brand { grid-row:1; grid-column:1; padding-bottom:0; }
  .sidebar nav { grid-row:2; grid-column:1 / -1; }
  .sidebar .account-actions { grid-row:1; grid-column:2; margin:0; gap:5px; }
  .sidebar .account-actions .btn { padding:8px; font-size:11px; }
}