.phrases-app-wrapper{--bg:#f7f8f3;--panel:#fff;--ink:#1f2937;--muted:#6b7280;--accent:#0f766e;--line:#d1d5db;flex-direction:column;align-items:center;gap:.65rem;width:100%;padding:0 1rem 2rem;display:flex}.phrases-app{background:var(--panel);border:1px solid var(--line);border-radius:16px;width:min(980px,100%);overflow:clip;box-shadow:0 16px 40px #0f172a14}.phrases-header{color:#f0fdfa;background:linear-gradient(135deg,#0f766e,#0ea5a4);justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.25rem;display:flex}.study-title-row{justify-content:space-between;align-items:center;gap:1rem;width:100%;display:flex}.study-title-copy{min-width:0}.phrases-header h1{margin:0;font-family:inherit;font-size:1.4rem}.phrases-header .sub{opacity:.95;margin:.35rem 0 0;font-size:.95rem}.phrases-controls{border-bottom:1px solid var(--line);flex-wrap:wrap;justify-content:center;align-items:center;gap:.65rem;padding:.9rem 1rem;display:flex}.phrases-controls button,.phrases-controls .pause-control{border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;border-radius:10px;padding:.55rem .8rem;font-size:.88rem;font-weight:600}.phrases-controls button:hover{background:#f8fafc}.phrases-controls button.active-state{color:#fff;background:#dc2626;border-color:#b91c1c}.pause-control{align-items:center;gap:.5rem;display:flex}.pause-control input[type=range]{accent-color:var(--accent)}.phrases-list{flex-direction:column;gap:.8rem;padding:1rem;display:flex}.phrase-item{border:1px solid var(--line);text-align:center;background:#fcfcfb;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:.35rem;padding:.85rem .95rem;transition:transform .12s,box-shadow .12s,border-color .12s,background-color .12s;display:flex}.phrase-item.active{background:#fff7d6;border-color:#92400e;transform:translateY(-1px);box-shadow:0 0 0 2px #92400e3d}.phrase-item.active .hiragana{color:#7c2d12;background:#fde68a;border-radius:999px;padding:.2rem .6rem}.item-field{flex-direction:column;align-items:center;gap:.1rem;display:flex}.item-field-inline{flex-direction:row;justify-content:center;align-items:center;gap:.5rem}.hiragana-line{flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;display:flex}.show-count{color:#92400e;background:#fef3c7;border:1px solid #fde68a;border-radius:999px;justify-content:center;align-items:center;min-width:1.7rem;height:1.7rem;padding:0 .35rem;font-size:.8rem;font-weight:700;display:inline-flex}.tile-action,.tile-show{background:var(--accent);color:#fff;cursor:pointer;border:0;border-radius:999px;padding:.3rem .61rem;font-size:.8rem;font-weight:700}.tile-action:hover,.tile-show:hover{filter:brightness(1.06)}.label{text-transform:uppercase;letter-spacing:.08em;color:#64748b;font-size:.78rem;font-weight:700}.hiragana{color:#0f766e;font-size:1.35rem;font-weight:700}.romaji{color:#d97706;font-weight:600}.meaning{color:#ca8a04;font-weight:600}.phrases-pagination{border-top:1px solid var(--line);justify-content:center;align-items:center;gap:1rem;padding:.85rem 1.25rem;font-weight:600;display:flex}.phrases-pagination button{border:1px solid var(--line);background:var(--panel);cursor:pointer;border-radius:8px;padding:.4rem .8rem;font-weight:600}.phrases-pagination button:disabled{opacity:.5;cursor:not-allowed}body.dark-mode .phrases-app{background:#111827;border-color:#334155}body.dark-mode .phrases-controls{border-bottom-color:#334155}body.dark-mode .phrases-controls button,body.dark-mode .pause-control,body.dark-mode .phrase-item{color:#f9fafb;background:#1f2937;border-color:#374151}body.dark-mode .phrases-pagination{border-top-color:#334155}body.dark-mode .phrases-pagination button{color:#f9fafb;background:#1f2937;border-color:#374151}