/* Shared system typography, controls and translucent navigation. */
:root{--ink:#1d1d1f;--muted:#6e6e73;--blue:#007aff;--blue-deep:#0066cc;--green:#248a3d;--danger:#d70015;--line:rgba(60,60,67,.12);--shadow:0 8px 32px #00000008,inset 0 1px 0 #ffffffd9;--radius:28px;--small-radius:16px}
html{background:#f5f5f7}
body{background:radial-gradient(ellipse at 10% 0%,#dce8f480,transparent 55%),radial-gradient(ellipse at 100% 85%,#e4e6f180,transparent 50%),#f5f5f7;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","PingFang SC",sans-serif;-webkit-font-smoothing:antialiased}
body::before,body::after{display:none}
.glass{background:linear-gradient(135deg,#ffffffc4,#ffffff75);border:1px solid #ffffffd9;box-shadow:var(--shadow);backdrop-filter:blur(32px) saturate(160%);-webkit-backdrop-filter:blur(32px) saturate(160%)}
.button,.plain-button,.quiet{min-height:44px;min-width:44px;padding:10px 18px;border-radius:999px;font-size:14px;font-weight:500;line-height:1.2;transition:background .18s,opacity .18s,transform .18s;cursor:pointer}
.button{background:var(--blue);box-shadow:0 2px 6px #007aff1a,inset 0 1px 0 #ffffff40;color:white}
.button:hover{background:#0071ec;box-shadow:0 3px 8px #007aff20;transform:none}
.button:active,.plain-button:active,.quiet:active{transform:scale(.98)}
.button.secondary,.plain-button,.quiet{background:#ffffff80;border:1px solid #ffffffb3;color:var(--ink);box-shadow:0 1px 4px #00000005}
.plain-button:hover,.quiet:hover{background:#ffffffc9;box-shadow:0 1px 5px #00000008;transform:none}
button:disabled{opacity:.38;cursor:default;transform:none}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid #007aff80;outline-offset:3px}
input,textarea,select{min-height:44px;padding:11px 14px;border-radius:12px;background:#ffffffa6;font-weight:400}
label{font-weight:500;color:var(--ink)}
input[type=checkbox]{min-height:auto}
.brand-mark{background:var(--blue);box-shadow:none}
.nav-link,.segmented a{font-weight:500}
.nav-link.active,.segmented a.active{color:var(--ink);background:#fff;box-shadow:0 2px 5px #0000000d;transform:none}
.interactive-glass:hover{transform:translateY(-1px);box-shadow:0 12px 32px #0000000c}
body:has(.study-dock){padding-bottom:68px}
.study-dock{position:fixed;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:50;display:flex;gap:4px;padding:5px;border-radius:32px;width:min(204px,calc(100% - 32px));background:linear-gradient(140deg,#ffffffb8,#f5f5f780);box-shadow:0 8px 32px #00000012,inset 0 1px 1px #fff;backdrop-filter:blur(36px) saturate(180%);-webkit-backdrop-filter:blur(36px) saturate(180%)}
.study-dock a{flex:1;min-height:36px;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;padding:4px 10px;border-radius:26px;text-decoration:none;color:var(--muted);font-size:10px;font-weight:500;transition:background .18s}
.study-dock svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.study-dock .selected{color:var(--blue);background:#ffffffa6;box-shadow:0 1px 5px #00000006,inset 0 1px 0 #fff}
.study-dock a:hover{background:#ffffff8c}
@media(prefers-reduced-transparency:reduce){.glass,.study-dock{background:#f9f9fb;backdrop-filter:none;-webkit-backdrop-filter:none}}

/* Match the same controls on the home, material and mistakes pages. */
body .material-icon{background:var(--blue);box-shadow:inset 0 1px 0 #ffffff40;border-radius:14px}
body .count{color:var(--muted);background:#7676800d;box-shadow:none;font-weight:500;border-radius:50%}
body .material-tile{background:#ffffff80;box-shadow:0 2px 8px #00000004;border-radius:20px}
body .filters .segmented a.active{color:var(--ink);background:#fff;box-shadow:0 2px 5px #0000000d}
body .segmented a{min-height:40px}
body .review-panel{background:#ffffff8c;box-shadow:var(--shadow)}
body .word-tile{min-height:44px;border-radius:16px;background:#ffffffa6;box-shadow:0 1px 5px #00000005}
body .word-tile:hover,body .word-tile:focus-visible{background:#fff;transform:none;box-shadow:0 2px 8px #0000000a}
body .word-tile::before{display:none}
body .detail-button{min-height:44px;min-width:44px;border-radius:22px;background:#ffffffa6;box-shadow:none;font-weight:500}
body .dialog-close{width:44px;height:44px}
body .grammar-dialog{background:#f9f9f9eb;box-shadow:0 24px 80px #00000026}
body .selectable-word{font-weight:500}