:root {
  color-scheme: dark;
  --bg:#0a0e1a; --bg2:#11182c; --text:#f0f3ff; --muted:#9aa9c4; --muted2:#71809c;
  --surface:rgba(22,30,51,.60); --surface2:rgba(25,35,58,.75); --surface3:rgba(36,47,72,.85);
  --stroke:rgba(209,225,255,.125); --stroke-strong:rgba(212,229,255,.22);
  --accent:#91a7ff; --accent-deep:#697ef0; --mint:#76dbc8; --amber:#f6c984; --rose:#f2a0b6;
  --shadow:0 22px 70px rgba(0,0,0,.25); --glass-blur:blur(28px) saturate(160%);
}
:root[data-theme="light"] {
  color-scheme:light;
  --bg:#eff3fc; --bg2:#f7f9fe; --text:#16233e; --muted:#53617a; --muted2:#7b88a0;
  --surface:rgba(255,255,255,.61); --surface2:rgba(255,255,255,.74); --surface3:rgba(236,242,252,.93);
  --stroke:rgba(48,67,108,.11); --stroke-strong:rgba(48,67,108,.22);
  --accent:#556ce0; --accent-deep:#465ccb; --mint:#138977; --amber:#b47c27; --rose:#c75075;
  --shadow:0 22px 65px rgba(46,67,114,.11)
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:var(--bg); color:var(--text); font-size:14px; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.42; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
a { color:var(--accent); }
::selection { background:rgba(141,159,255,.32); }
.ambient { pointer-events:none; position:fixed; z-index:-2; border-radius:50%; filter:blur(83px); opacity:.32; }
.ambient-one { width:48vw; height:48vw; max-width:720px; max-height:720px; top:-21vw; right:0; background:radial-gradient(circle,#5364b9 0%,#5e3e91 52%,transparent 70%); }
.ambient-two { width:40vw; height:40vw; max-width:650px; max-height:650px; left:-15vw; bottom:-17vw; background:radial-gradient(circle,#1d7d95 0%,#4660aa 50%,transparent 73%); }
:root[data-theme="light"] .ambient { opacity:.24; }
.noise { position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.07; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 170 170' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.app-shell { min-height:100vh; display:flex; padding:20px; gap:21px; max-width:1790px; margin:0 auto; }
.glass { background:var(--surface); border:1px solid var(--stroke); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); box-shadow:var(--shadow); }
.sidebar { flex:0 0 236px; align-self:stretch; min-height:calc(100vh - 40px); border-radius:28px; padding:23px 13px 16px; display:flex; flex-direction:column; position:sticky; top:20px; height:calc(100vh - 40px); }
.brand { display:flex; align-items:center; gap:12px; padding:0 12px; margin:2px 0 41px; }
.brand-mark { width:43px;height:43px;display:grid;place-items:center;border-radius:16px; background:linear-gradient(135deg,#b6b8fb,#757de4 54%,#3bbcae);color:white;font-weight:800;font-size:22px;box-shadow:0 8px 20px rgba(91,100,215,.28); }
.brand-name { font-size:19px;font-weight:760;letter-spacing:-.9px;line-height:1.2; }
.brand-caption { font-size:10px;color:var(--muted);letter-spacing:1.2px;text-transform:uppercase;margin-top:4px; }
.nav-label { color:var(--muted2);font-size:10px;text-transform:uppercase;letter-spacing:1.6px;margin:0 14px 12px;font-weight:750; }
.nav-list { display:grid;gap:6px; }
.nav-item { border:1px solid transparent; color:var(--muted); background:transparent; border-radius:15px; padding:13px 14px; display:flex; align-items:center; gap:13px; font-size:13px;font-weight:620;text-align:left;transition:.2s ease; }
.nav-item:hover { color:var(--text);background:rgba(152,170,237,.08); }
.nav-item.active { color:var(--text);background:linear-gradient(95deg,rgba(134,153,245,.19),rgba(107,134,224,.08)); border-color:rgba(146,160,237,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }
.nav-item.active svg { color:var(--accent); }
.icon { display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center; }
.icon svg { width:19px;height:19px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none; }
.icon.small svg { width:15px;height:15px; }
.icon.large svg { width:22px;height:22px; }
.nav-spacer { flex:1; }
.sidebar-bottom { padding:15px 10px 4px; }
.side-progress { border-top:1px solid var(--stroke);padding-top:19px; }
.side-progress-heading { display:flex;justify-content:space-between;color:var(--muted);font-size:12px; }
.side-progress-heading strong { color:var(--text); }
.progress-track { height:6px;border-radius:99px;background:rgba(135,150,198,.19);margin:11px 0 12px;overflow:hidden; }
.progress-fill { height:100%;background:linear-gradient(90deg,#6f84ff,#70d9c8);border-radius:99px;transition:width .3s; }
.side-note { color:var(--muted2);font-size:11px;line-height:1.65; }
.main-area { flex:1;min-width:0;padding:9px 10px 45px 1px; }
.topbar { display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:47px;margin-bottom:27px; }
.breadcrumb { color:var(--muted);font-size:12px;display:flex;align-items:center;gap:10px; }
.breadcrumb strong {color:var(--text);font-weight:600;}
.top-actions { display:flex;align-items:center;gap:8px; }
.icon-btn { display:grid;place-items:center;flex:0 0 auto;width:39px;height:39px;border-radius:13px;border:1px solid var(--stroke);background:var(--surface);color:var(--muted);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);transition:.2s; }
.icon-btn:hover { background:var(--surface3);color:var(--text);transform:translateY(-1px); }
.avatar {display:grid;place-items:center;width:39px;height:39px;border:1px solid rgba(160,177,241,.3);border-radius:14px;background:linear-gradient(135deg,rgba(155,171,255,.23),rgba(91,166,167,.2));font-weight:700;}
.main-header {display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:17px 0 25px;}
.eyebrow {font-size:11px;letter-spacing:2.25px;color:var(--accent);text-transform:uppercase;font-weight:740;margin-bottom:11px;}
h1 {font-weight:750;letter-spacing:-1.7px;font-size:clamp(30px,3vw,42px);margin:0 0 10px;line-height:1.18;}
h2 {font-size:18px;letter-spacing:-.45px;margin:0;font-weight:700;}
h3 {font-size:15px;letter-spacing:-.3px;margin:0;font-weight:650;}
p {margin:0;line-height:1.6;}
.subtitle {color:var(--muted);font-size:13px;line-height:1.7;}
.btn {border-radius:14px;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 17px;border:1px solid var(--stroke-strong);font-weight:660;font-size:12px;white-space:nowrap;color:var(--text);background:var(--surface2);transition:transform .18s,background .18s,box-shadow .18s; }
.btn .icon svg { width:16px;height:16px; }
.btn:hover {transform:translateY(-1px);background:var(--surface3);}
.btn.primary {background:linear-gradient(135deg,#9da9ff,#7185eb);color:#101937;border:1px solid rgba(255,255,255,.18);box-shadow:0 9px 23px rgba(104,120,226,.23);}
.btn.primary:hover {background:linear-gradient(135deg,#b1bcff,#8d9df8);}
.btn.ghost {background:transparent;border:1px solid var(--stroke);color:var(--muted);}
.btn.subtle {background:rgba(135,151,218,.11);border:1px solid rgba(149,173,238,.14);}
.btn.danger {color:#ffd1db;background:rgba(188,68,95,.14);border-color:rgba(224,106,132,.25);}
.btn.small {padding:9px 12px;border-radius:11px;font-size:11px;}
.btn.full {width:100%;}
.card {border-radius:24px;padding:22px;overflow:hidden;position:relative;}
.card-header {display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;}
.card-subtitle {color:var(--muted);font-size:12px;margin-top:7px;line-height:1.55;}
.mini-link {border:0;background:transparent;color:var(--accent);font-size:11px;font-weight:650;padding:5px;display:inline-flex;align-items:center;gap:5px;}
.mini-link:hover {text-decoration:underline;}
.grid-main {display:grid;grid-template-columns:minmax(0,1.6fr) minmax(270px,1fr);gap:17px;}
.metric-row {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:17px;}
.metric {min-height:135px;padding:20px;display:flex;flex-direction:column;justify-content:space-between;}
.metric-top {display:flex;justify-content:space-between;align-items:center;gap:8px;color:var(--muted);font-size:11px;font-weight:600;}
.metric-icon {width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:rgba(144,162,251,.13);color:var(--accent);}
.metric-num {font-size:31px;letter-spacing:-1.5px;font-weight:750;line-height:1.1;margin-top:10px;}
.metric-note {color:var(--muted2);font-size:11px;margin-top:5px;}
.hero {padding:28px 30px;min-height:252px;display:flex;position:relative;align-items:center;justify-content:space-between;isolation:isolate;background:linear-gradient(112deg,rgba(84,99,182,.38),rgba(40,57,100,.32) 63%,rgba(45,94,119,.33));}
.hero:before {content:"";position:absolute;inset:0;background:radial-gradient(circle at 79% 32%,rgba(117,218,202,.19),transparent 44%);z-index:-1;}
.hero-copy {max-width:53%;position:relative;z-index:1;}
.hero h2 {font-size:28px;line-height:1.18;letter-spacing:-1px;margin:9px 0 11px;}
.hero p {color:#c8d4f4;line-height:1.65;font-size:12px;max-width:290px;margin-bottom:18px;}
:root[data-theme="light"] .hero p { color:var(--muted); }
.hero-orbit {height:225px;width:270px;position:absolute;right:16px;top:15px;pointer-events:none;}
.hero-orbit svg {height:100%;width:100%;overflow:visible;}
.hero-orbit .orbit {animation:rotateOrbit 30s linear infinite;transform-origin:137px 110px;}
.hero-orbit .node-glow {filter:drop-shadow(0 0 12px rgba(172,184,255,.4));}
@keyframes rotateOrbit {to{transform:rotate(360deg)}}
.section-head {display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:26px 0 15px;}
.section-head p {color:var(--muted);font-size:12px;margin-top:6px;}
.word-preview {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;}
.word-card {text-align:left;min-width:0;min-height:142px;padding:17px;border-radius:20px;color:var(--text);transition:transform .2s,background .2s,border-color .2s;}
.word-card:hover,.word-list-row:hover {transform:translateY(-2px);border-color:var(--stroke-strong);background:var(--surface2);}
.word-card-head {display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:24px;}
.pill {display:inline-flex;align-items:center;justify-content:center;border-radius:99px;padding:5px 9px;font-size:10px;font-weight:690;letter-spacing:.1px;background:rgba(124,145,233,.14);color:#b5c4ff;border:1px solid rgba(142,162,233,.13);white-space:nowrap;}
:root[data-theme="light"] .pill {color:#4b61bf;}
.pill.noun {background:rgba(125,169,246,.14);color:#a9c8ff;}
.pill.verb {background:rgba(95,205,170,.12);color:#83e4c4;}
.pill.adj {background:rgba(238,176,116,.12);color:#f4c99b;}
:root[data-theme="light"] .pill.noun {color:#3869be;}
:root[data-theme="light"] .pill.verb {color:#21816b;}
:root[data-theme="light"] .pill.adj {color:#9a651f;}
.word-card-title {font-size:17px;font-weight:720;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.word-card-tr {color:var(--muted);font-size:12px;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.card-bottom {display:flex;justify-content:space-between;align-items:center;margin-top:20px;gap:12px;}
.due-list {display:grid;gap:10px;}
.due-row {display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px;border:1px solid var(--stroke);border-radius:14px;background:rgba(122,139,205,.05);}
.due-word {font-size:13px;font-weight:680;}
.due-tr {font-size:11px;color:var(--muted);margin-top:5px;}
.due-dot {width:7px;height:7px;border-radius:50%;background:var(--mint);flex-shrink:0;}
.feature-label {display:flex;align-items:center;gap:9px;font-size:11px;color:var(--muted);margin:14px 0;}
.feature-label span {width:7px;height:7px;border-radius:99px;background:var(--accent);}
.recent-list {display:grid;gap:8px;}
.recent-row {display:grid;grid-template-columns:38px 1fr auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--stroke);border-radius:15px;background:rgba(130,147,220,.045); }
.recent-letter {width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(137,157,241,.13);color:var(--accent);font-weight:720;font-size:17px;}
.recent-name {font-size:13px;font-weight:680;}
.recent-source {color:var(--muted);font-size:11px;margin-top:5px;}
.recent-date {color:var(--muted2);font-size:10px;white-space:nowrap;}
.empty {padding:35px 18px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--muted);}
.empty .icon {color:var(--accent);}
.empty strong {color:var(--text);font-size:15px;}
.library-toolbar {display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:17px;}
.search-wrap {display:flex;align-items:center;gap:10px;min-width:220px;flex:1;padding:0 13px;height:44px;border:1px solid var(--stroke);border-radius:14px;background:var(--surface);color:var(--muted);}
.search-wrap input {background:transparent;border:0;outline:none;width:100%;color:var(--text);min-width:0;font-size:12px;}
.search-wrap input::placeholder {color:var(--muted2);}
.select {appearance:none;padding:12px 29px 12px 13px;border:1px solid var(--stroke);border-radius:13px;background:var(--surface2);color:var(--text);font-size:12px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%239baac5' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;}
.select option {background:#1b253b;color:#fff;}
.library-table {display:grid;gap:9px;}
.word-list-row {display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr) 100px 85px 75px 23px;align-items:center;gap:12px;text-align:left;padding:17px 19px;color:var(--text);border-radius:16px;transition:.2s;}
.row-word {font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.row-hint {margin-top:5px;color:var(--muted2);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.row-trans {color:var(--muted);font-size:12px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.table-head {display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr) 100px 85px 75px 23px;gap:12px;padding:0 19px 7px;color:var(--muted2);font-size:10px;text-transform:uppercase;letter-spacing:1px;font-weight:700;}
.word-list-row .status {font-size:11px;color:var(--muted);}
.word-list-row .status.due {color:var(--mint);}
.graph-frame {height:min(62vh,620px);min-height:410px;position:relative;overflow:hidden;border-radius:23px;border:1px solid var(--stroke);background:radial-gradient(circle at 53% 48%,rgba(93,117,194,.14),transparent 60%),var(--surface);}
.graph-frame::before {content:"";position:absolute;inset:0;pointer-events:none;opacity:.28;background-image:radial-gradient(circle,var(--muted2) .65px,transparent 1px);background-size:22px 22px;}
.graph-svg {height:100%;width:100%;touch-action:none;cursor:grab;user-select:none;}
.graph-svg:active {cursor:grabbing;}
.graph-edge {stroke:rgba(149,169,213,.42);stroke-width:1.35;fill:none;}
.graph-edge.family {stroke:rgba(137,160,253,.65);}
.graph-edge.synonym {stroke:rgba(118,213,191,.6);stroke-dasharray:4 5;}
.graph-edge.theme {stroke:rgba(248,194,144,.52);stroke-dasharray:2 5;}
.graph-node {animation:graphAppear .35s ease backwards;cursor:pointer;transform-box:fill-box;transform-origin:center;transition:opacity .2s;}
.graph-node:hover .node-bg {stroke-width:2.7;filter:drop-shadow(0 2px 15px rgba(130,157,255,.4));}
.node-bg {stroke:rgba(164,184,248,.6);stroke-width:1.2;fill:rgba(43,57,100,.97);}
.node-bg.noun {fill:rgba(38,76,119,.98);stroke:#7eafe9;}
.node-bg.verb {fill:rgba(29,82,81,.98);stroke:#6ad7c1;}
.node-bg.adj {fill:rgba(107,75,47,.98);stroke:#e9b880;}
.node-bg.active {stroke:#d4dcff;stroke-width:2.5;fill:#5c6cce;}
.node-text {fill:#edf2ff;font-size:12px;font-weight:660;pointer-events:none;}
.node-sub {fill:#b0bfdc;font-size:10px;pointer-events:none;}
.graph-controls {position:absolute;right:16px;top:16px;display:flex;gap:7px;z-index:2;}
.graph-bottom {position:absolute;bottom:16px;left:18px;right:18px;display:flex;justify-content:space-between;align-items:center;gap:12px;pointer-events:none;}
.legend {display:flex;gap:13px;color:var(--muted);font-size:10px;flex-wrap:wrap;}
.legend span {display:flex;gap:6px;align-items:center;}
.legend i {display:inline-block;width:7px;height:7px;border-radius:50%;}
.graph-tip {font-size:10px;color:var(--muted2);}
.word-detail-title {font-size:34px;font-weight:750;line-height:1.2;letter-spacing:-1px;margin:11px 0 8px;overflow-wrap:anywhere;}
.detail-translation {font-size:16px;color:var(--muted);margin-bottom:16px;}
.detail-group {border-top:1px solid var(--stroke);padding-top:20px;margin-top:22px;}
.detail-group h3 {margin-bottom:13px;}
.definition-list {display:grid;gap:7px;}
.meta-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;}
.meta-box {padding:14px;border-radius:14px;border:1px solid var(--stroke);background:rgba(126,146,210,.055);}
.meta-label {font-size:10px;color:var(--muted2);text-transform:uppercase;letter-spacing:.6px;margin-bottom:7px;}
.meta-value {font-size:13px;font-weight:620;overflow-wrap:anywhere;}
.timeline {display:grid;gap:0;margin-top:11px;}
.timeline-item {padding:0 0 19px 27px;position:relative;border-left:1px solid var(--stroke-strong);margin-left:7px;}
.timeline-item:last-child {border-left-color:transparent;}
.timeline-item:before {content:"";width:11px;height:11px;border-radius:50%;background:var(--accent);border:3px solid var(--bg2);position:absolute;top:1px;left:-7px;box-sizing:content-box;}
.timeline-time {color:var(--muted2);font-size:11px;margin-bottom:6px;}
.timeline-title {font-weight:640;font-size:12px;}
.timeline-context {color:var(--muted);font-size:12px;margin-top:5px;}
.relation-chip {display:inline-flex;align-items:center;gap:8px;border:1px solid var(--stroke);background:var(--surface2);border-radius:12px;padding:9px 11px;color:var(--text);font-size:12px;margin:0 7px 8px 0;}
.relation-kind {color:var(--muted2);font-size:10px;}
.study-shell {max-width:790px;margin:0 auto;}
.study-card {min-height:330px;margin:20px 0 16px;padding:39px 22px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:19px;}
.study-word {font-size:clamp(28px,5vw,45px);font-weight:770;letter-spacing:-1.5px;overflow-wrap:anywhere;}
.study-question {color:var(--muted);font-size:12px;}
.study-answer {font-size:19px;color:var(--mint);font-weight:650;animation:fadeUp .2s ease both;}
.study-example {color:var(--muted);font-size:13px;max-width:450px;line-height:1.65;}
.study-choices {display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.study-choices .btn {white-space:normal;line-height:1.3;}
.study-progress {display:flex;justify-content:space-between;gap:10px;align-items:center;color:var(--muted);font-size:12px;}
.study-done {text-align:center;padding:80px 20px;display:flex;flex-direction:column;align-items:center;gap:14px;}
.form-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.form-field {display:flex;flex-direction:column;gap:8px;min-width:0;}
.form-field.wide {grid-column:1/-1;}
.form-field label {font-size:11px;font-weight:650;color:var(--muted);}
.form-field input,.form-field select,.form-field textarea {width:100%;padding:12px 13px;background:rgba(119,140,194,.075);color:var(--text);border:1px solid var(--stroke);border-radius:12px;outline:none;transition:border-color .2s;min-width:0;font-size:12px;}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus {border-color:var(--accent);}
.form-field input::placeholder,.form-field textarea::placeholder {color:var(--muted2);}
.form-field textarea {resize:vertical;min-height:69px;}
.form-field select option {color:#fff;background:#222c45;}
.form-section {margin-top:22px;padding-top:19px;border-top:1px solid var(--stroke);}
.form-section-head {display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:15px;}
.form-section h3 {font-size:13px;}
.field-hint {color:var(--muted2);font-size:10px;line-height:1.5;margin-top:2px;}
.toggle-row {display:flex;align-items:center;justify-content:space-between;gap:15px;border:1px solid var(--stroke);border-radius:14px;padding:14px;}
.toggle-row small {display:block;color:var(--muted);margin-top:6px;line-height:1.6;}
.switch {width:44px;height:26px;border-radius:20px;border:1px solid var(--stroke);background:var(--surface3);position:relative;flex-shrink:0;}
.switch::before {content:"";position:absolute;width:18px;height:18px;background:#e3eafd;top:3px;left:3px;border-radius:50%;transition:transform .2s;}
.switch.on {background:var(--accent-deep);}
.switch.on::before {transform:translateX(18px);}
.settings-stack {display:grid;gap:16px;max-width:850px;}
.settings-row {display:flex;justify-content:space-between;align-items:center;gap:25px;flex-wrap:wrap;}
.settings-row p {color:var(--muted);font-size:12px;max-width:490px;margin-top:6px;}
.backdrop {position:fixed;inset:0;background:rgba(3,8,18,.58);z-index:20;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:fadeIn .18s ease;}
.drawer {position:fixed;right:16px;top:16px;bottom:16px;z-index:21;width:min(520px,calc(100vw - 32px));border-radius:27px;background:var(--surface2);border:1px solid var(--stroke-strong);backdrop-filter:blur(38px) saturate(180%);-webkit-backdrop-filter:blur(38px) saturate(180%);box-shadow:0 30px 140px rgba(0,0,0,.4);display:flex;flex-direction:column;animation:slideIn .28s cubic-bezier(.2,.7,.1,1);}
.drawer-wide {width:min(610px,calc(100vw - 32px));}
.drawer-head {display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 22px;border-bottom:1px solid var(--stroke);flex-shrink:0;}
.drawer-head strong {font-size:15px;letter-spacing:-.3px;}
.drawer-body {overflow-y:auto;padding:22px;overscroll-behavior:contain;}
.drawer-footer {margin-top:auto;border-top:1px solid var(--stroke);padding:16px 22px;display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;}
.modal {position:fixed;z-index:21;left:50%;top:50%;transform:translate(-50%,-50%);width:min(470px,calc(100vw - 30px));border:1px solid var(--stroke-strong);border-radius:24px;background:var(--surface2);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);padding:26px;box-shadow:var(--shadow);}
.modal h2 {font-size:21px;margin:7px 0 10px;}
.modal p {color:var(--muted);font-size:12px;line-height:1.75;}
.modal-actions {display:flex;gap:10px;margin-top:22px;}
.modal-actions > * {flex:1;}
.toast {position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:12px 20px;border-radius:15px;border:1px solid var(--stroke-strong);background:var(--surface3);box-shadow:var(--shadow);backdrop-filter:blur(20px);z-index:50;font-size:12px;animation:fadeUp .2s ease;white-space:nowrap;max-width:calc(100vw - 24px);overflow:hidden;text-overflow:ellipsis;}
.mobile-nav {display:none;}
.loading-screen {display:flex;align-items:center;justify-content:center;gap:15px;width:100%;min-height:80vh;color:var(--muted);}
.empty-graph {position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--muted);padding:30px;}
.sample-tag {display:inline-flex;align-items:center;gap:6px;color:var(--amber);font-size:10px;border:1px solid rgba(239,197,125,.25);padding:6px 10px;border-radius:99px;background:rgba(225,176,93,.08);}
.quick-tip {font-size:11px;line-height:1.65;color:var(--muted);padding:11px 13px;border:1px solid var(--stroke);border-radius:12px;background:rgba(123,147,221,.05);}
.flex-row {display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.divider {border:0;border-top:1px solid var(--stroke);margin:20px 0;}
@keyframes graphAppear {from{opacity:0;filter:blur(3px)}to{opacity:1;filter:blur(0)}}
@keyframes fadeUp {from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideIn {from{opacity:0;transform:translateX(25px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeIn {from{opacity:0}to{opacity:1}}
@media (max-width:1180px){.metric-row {grid-template-columns:repeat(2,1fr)}.grid-main{grid-template-columns:minmax(0,1fr) 300px}.hero-orbit{opacity:.78;right:-38px}.word-preview{grid-template-columns:repeat(2,1fr)}.word-preview .word-card:last-child{display:none}}
@media (max-width:950px){.app-shell{padding:14px;gap:13px}.sidebar{flex-basis:70px;padding:20px 9px}.brand{padding:0;justify-content:center;margin-bottom:35px}.brand-mark{width:43px;height:43px}.brand-name,.brand-caption,.nav-label,.nav-item span.nav-name,.sidebar-bottom{display:none}.nav-item{justify-content:center;padding:13px 8px}.main-area{padding:10px 5px 50px}.grid-main{grid-template-columns:1fr}.hero-orbit{right:9px}.word-preview{grid-template-columns:repeat(3,1fr)}.word-preview .word-card:last-child{display:block}}
@media (max-width:680px){.app-shell{padding:0;display:block}.sidebar{display:none}.main-area{padding:19px 15px calc(103px + env(safe-area-inset-bottom));}.topbar{margin-bottom:22px}.main-header{margin-top:14px;align-items:flex-start}.main-header .btn{padding:11px 12px;font-size:11px}.main-header .btn .icon{display:none}.metric-row{grid-template-columns:repeat(2,1fr);gap:10px}.metric{padding:17px;min-height:123px;border-radius:19px}.metric-num{font-size:28px}.metric-icon{width:31px;height:31px}.hero{min-height:224px;padding:25px 21px;border-radius:21px}.hero-copy{max-width:62%}.hero h2{font-size:23px}.hero p{font-size:11px}.hero-orbit{right:-95px;top:11px;opacity:.63}.word-preview{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.word-preview .word-card:last-child{display:none}.word-card{min-height:135px;padding:14px}.card{padding:18px;border-radius:20px}.section-head{margin:23px 0 13px}.mobile-nav{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:10;min-height:67px;justify-content:space-around;align-items:center;padding:7px 8px;border-radius:23px;background:var(--surface2);border:1px solid var(--stroke-strong);backdrop-filter:blur(35px) saturate(180%);-webkit-backdrop-filter:blur(35px) saturate(180%);box-shadow:0 14px 45px rgba(0,0,0,.24)}.mobile-nav button{background:transparent;border:0;color:var(--muted);font-size:9px;display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;min-width:48px}.mobile-nav button.active{color:var(--accent)}.mobile-nav .icon svg{height:20px;width:20px}.word-list-row{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 22px;padding:14px;gap:9px}.table-head{display:none}.word-list-row>.hidden-mobile{display:none}.row-word{font-size:13px}.row-trans{font-size:11px}.library-toolbar{gap:8px}.library-toolbar .search-wrap{flex-basis:100%}.select{flex:1;min-width:0}.graph-frame{height:63vh;min-height:400px}.graph-bottom{left:11px;bottom:12px;right:10px}.graph-tip{display:none}.drawer{inset:0;width:100%;border-radius:0;max-width:none}.drawer-head{padding:19px 18px}.drawer-body{padding:20px 18px 45px}.drawer-footer{padding:13px 18px calc(15px + env(safe-area-inset-bottom))}.form-grid{gap:11px}.study-choices{grid-template-columns:repeat(2,1fr)}.study-card{min-height:300px}.breadcrumb{font-size:11px}.top-actions .icon-btn:nth-child(1){display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
@supports not (backdrop-filter:blur(1px)){.glass,.drawer,.modal,.mobile-nav{background:var(--bg2)}}

/* v0.2 Oracle sync */
.cloud-login{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:end;gap:12px;margin-top:15px}
.cloud-login .btn{min-height:41px}
.cloud-login .form-field input{font-size:13px}
.cloud-status{color:var(--muted);font-size:12px;margin-top:12px}
.cloud-state{display:flex;align-items:center;gap:12px;padding:16px;border-radius:16px;background:var(--surface2);border:1px solid var(--stroke)}
.cloud-state-dot{flex:none;height:11px;width:11px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(119,220,176,.14)}
.cloud-state strong{font-size:13px}
.cloud-state p{font-size:12px;color:var(--muted);margin-top:5px}
@media(max-width:680px){.cloud-login{grid-template-columns:1fr}}
/* v0.3 opt-in assistance panels */
.assist-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:2px 0 15px}
.assist-toolbar>span{font-size:11px;color:var(--muted2)}
.assist-panel{padding:17px 18px;margin:9px 0 18px;border-radius:19px;border:1px solid rgba(137,162,250,.28);background:linear-gradient(135deg,rgba(106,136,230,.15),rgba(73,115,158,.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.09);animation:assist-in .24s ease-out}
.assist-panel p{font-size:12px;color:var(--muted);line-height:1.65;margin:8px 0 13px}
.assist-panel a{color:var(--accent)}
.assist-title{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;font-size:13px}
.assist-title>span:first-child{display:inline-flex;gap:8px;align-items:center}
.assist-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:13px 0}
.assist-fields>div{border:1px solid var(--stroke);border-radius:11px;padding:10px 11px;background:rgba(255,255,255,.025);min-width:0}
.assist-fields small{display:block;color:var(--muted2);font-size:10px;margin-bottom:4px}
.assist-fields strong{font-size:12px;font-weight:600;overflow-wrap:anywhere}
.family-suggestion{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--stroke)}
.family-suggestion strong{font-size:13px}
.family-suggestion p{margin:4px 0 0;font-size:11px}
.family-suggestion .btn{white-space:nowrap;flex-shrink:0}
@keyframes assist-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:640px){.assist-fields{grid-template-columns:1fr}.family-suggestion{align-items:flex-start}.assist-panel{padding:14px}}
@media(prefers-reduced-motion:reduce){.assist-panel{animation:none}}

.encounter-actions{display:flex;gap:10px;margin-top:5px}

.activity-card{margin-bottom:17px;padding:18px 22px}
.activity-chart{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;max-width:680px;height:123px}
.activity-col{display:flex;flex-direction:column;align-items:center;min-width:0;gap:5px;font-size:11px;color:var(--muted)}
.activity-col strong{font-size:11px;font-weight:650}
.activity-col small{font-size:10px}
.activity-track{width:100%;max-width:66px;flex:1;min-height:50px;background:rgba(118,144,194,.08);border-radius:9px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.activity-track span{display:block;width:100%;background:linear-gradient(180deg,rgba(116,211,201,.9),rgba(132,150,255,.7));border-radius:9px;transition:height .35s ease}

.family-source{font-size:10px;color:var(--muted2);line-height:1.5}.family-suggestion>div{min-width:0;overflow-wrap:anywhere}.family-suggestion .btn{max-width:130px}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Wortnetz 0.3.2 — LIQUID GLASS (web interpretation)
   Design foundation: Apple HIG Materials / WWDC25 Meet Liquid Glass.
   Controls/navigation use the glass material; content remains readable.
   The unmodified rules above are the switchable Classic Glass appearance.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.node-lens,.node-glint{display:none;pointer-events:none}
.look-switch{display:flex;align-items:center;gap:3px;padding:4px;border-radius:999px;border:1px solid var(--stroke);background:var(--surface);flex-shrink:0}
.look-switch-btn{display:flex;align-items:center;gap:5px;border:0;border-radius:999px;padding:7px 11px;background:transparent;color:var(--muted);font-size:11px;font-weight:680;transition:background .2s,box-shadow .2s,color .2s}
.look-switch-btn.selected{color:var(--text);background:var(--surface3);box-shadow:0 2px 7px rgba(12,24,50,.1)}
.look-switch-btn .icon svg{width:14px;height:14px}
.appearance-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin:8px 0 21px}
.appearance-choice{border:1px solid var(--stroke-strong);border-radius:20px;padding:15px;text-align:left;color:var(--text);background:var(--surface2);display:flex;flex-direction:column;align-items:flex-start;gap:6px;transition:border-color .2s,transform .2s,box-shadow .2s;min-width:0}
.appearance-choice:hover{transform:translateY(-2px)}
.appearance-choice.is-selected{border-color:var(--accent);box-shadow:0 0 0 2px rgba(103,138,225,.15)}
.appearance-choice strong{font-size:13px}.appearance-choice small{font-size:11px;color:var(--muted);line-height:1.5}
.appearance-swatch{width:100%;height:75px;border-radius:14px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:7px}
.appearance-swatch i{display:block;width:65%;height:35px;border-radius:40px;position:absolute}
.appearance-swatch b{display:block;width:24px;height:24px;border-radius:50%;position:relative;z-index:1;transform:translateX(28px)}
.classic-swatch{background:linear-gradient(120deg,#1d2543,#252a50 55%,#397377)}
.classic-swatch i{background:rgba(135,150,250,.25);border:1px solid #aeb7e4}.classic-swatch b{background:#97a9ed}
.liquid-swatch{background:linear-gradient(130deg,#e7ebf1 0%,#cfd4df 42%,#edf0f5 70%,#d6dbe8)}
.liquid-swatch:before{content:"";position:absolute;width:160px;height:90px;border-radius:50%;background:linear-gradient(90deg,#9cc5e4,#b0bfdf,#f2b9cf);filter:blur(18px);opacity:.55;top:20px;left:25%}
.liquid-swatch i{border:1px solid rgba(255,255,255,.97);background:linear-gradient(155deg,rgba(255,255,255,.8),rgba(230,238,249,.30));box-shadow:inset 0 2px 2px white,inset 0 -4px 9px rgba(91,109,142,.18),0 6px 18px rgba(71,86,119,.13)}
.liquid-swatch b{background:radial-gradient(circle at 30% 24%,#fff 8%,#e3ecf9 40%,#b7c5dc 100%);border:1px solid white;box-shadow:0 2px 8px #8093b9}
.glass-toggle{display:inline-flex;align-items:center;flex:none;width:56px;height:32px;padding:4px;border-radius:99px;border:1px solid var(--stroke-strong);background:var(--surface3);transition:background .25s}
.glass-toggle span{width:22px;height:22px;display:block;border-radius:50%;background:linear-gradient(140deg,#fff,#d1daf0);border:1px solid rgba(255,255,255,.9);box-shadow:0 2px 7px rgba(36,55,91,.2);transition:transform .25s cubic-bezier(.2,.8,.2,1.2)}
.glass-toggle.on{background:#51bfa5}.glass-toggle.on span{transform:translateX(23px)}
@media(max-width:950px){.look-switch{display:none}}
@media(max-width:600px){.appearance-options{gap:9px}.appearance-choice{padding:10px;border-radius:16px}.appearance-adjust{flex-wrap:wrap;align-items:flex-start}}

:root[data-look="liquid"][data-theme="light"]{
 color-scheme:light;
 --bg:#eef1f6;--bg2:#f7f9fc;--text:#17243b;--muted:#576981;--muted2:#708197;
 --surface:rgba(249,251,254,.55);--surface2:rgba(255,255,255,.78);--surface3:rgba(227,235,248,.88);
 --stroke:rgba(100,119,155,.17);--stroke-strong:rgba(89,110,147,.25);
 --accent:#355ccb;--accent-deep:#385ed7;--mint:#167f72;--amber:#9e6c1c;--rose:#b44c75;
 --shadow:0 14px 50px rgba(62,77,105,.10);--glass-blur:blur(23px) saturate(175%);
 --lg-nav:rgba(244,248,254,.62);--lg-panel:#ffffffeb;--lg-top:rgba(255,255,255,.64);
 --lg-glow:rgba(255,255,255,.94);--lg-rim:rgba(255,255,255,.96);--lg-dropshadow:rgba(72,91,123,.20);
 --lg-halo:rgba(72,127,226,.23);--lg-shine:rgba(255,255,255,.82);
}
:root[data-look="liquid"][data-theme="dark"]{
 color-scheme:dark;
 --bg:#0e1624;--bg2:#142034;--text:#f3f7ff;--muted:#b8c6d9;--muted2:#899bb3;
 --surface:rgba(42,60,88,.51);--surface2:rgba(25,40,65,.83);--surface3:rgba(52,74,107,.87);
 --stroke:rgba(213,227,255,.16);--stroke-strong:rgba(209,227,255,.27);
 --accent:#aec4ff;--accent-deep:#849ff4;--mint:#7bdac8;--amber:#efc483;--rose:#f2a4be;
 --shadow:0 22px 70px rgba(0,4,13,.26);--glass-blur:blur(25px) saturate(150%);
 --lg-nav:rgba(30,46,70,.64);--lg-panel:rgba(25,39,59,.96);--lg-top:rgba(64,86,119,.48);
 --lg-glow:rgba(255,255,255,.30);--lg-rim:rgba(237,245,255,.36);--lg-dropshadow:rgba(0,10,32,.46);
 --lg-halo:rgba(143,167,255,.29);--lg-shine:rgba(236,246,255,.20);
}
:root[data-look="liquid"] body{background:
 radial-gradient(ellipse 44% 36% at 81% 11%,rgba(167,193,230,.28),transparent 85%),
 radial-gradient(ellipse 40% 34% at 7% 79%,rgba(181,210,216,.23),transparent 85%),
 linear-gradient(145deg,var(--bg2),var(--bg) 53%,var(--bg2));background-attachment:fixed}
:root[data-look="liquid"][data-theme="dark"] body{background:
 radial-gradient(ellipse 45% 34% at 79% 12%,rgba(65,101,177,.21),transparent 85%),
 radial-gradient(ellipse 44% 38% at 11% 79%,rgba(44,121,145,.17),transparent 85%),
 linear-gradient(155deg,#142039,var(--bg) 50%,#172237);background-attachment:fixed}
:root[data-look="liquid"] .ambient{filter:blur(65px);opacity:.13;z-index:-2}
:root[data-look="liquid"] .ambient-one{background:radial-gradient(circle,#9eafd9,#a6bbe0 42%,transparent 75%)}
:root[data-look="liquid"] .ambient-two{background:radial-gradient(circle,#8bcbcb,#c1cee8 45%,transparent 75%)}
:root[data-look="liquid"] .noise{opacity:.024}
/* Navigation occupies a dedicated floating material layer. */
:root[data-look="liquid"] .sidebar{
 border-radius:35px;
 background:linear-gradient(137deg,var(--lg-glow) 0%,transparent 20%,var(--lg-nav) 51%,var(--lg-nav) 100%);
 border:1px solid var(--lg-rim);
 box-shadow:inset 0 1.5px 1px var(--lg-glow),inset 0 -2px 5px rgba(93,112,155,.07), 0 19px 52px var(--lg-dropshadow),0 1px 0 rgba(76,95,120,.08);
 backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
}
:root[data-look="liquid"] .brand-mark{border-radius:16px;color:#fff;background:linear-gradient(130deg,#a3c3f4,#658edb 56%,#5cbea9);border:1px solid rgba(255,255,255,.87);box-shadow:inset 0 1px 3px #ffffff9c,0 7px 18px rgba(91,119,185,.26);transform:rotate(-3deg)}
:root[data-look="liquid"] .brand-caption{letter-spacing:1px}
:root[data-look="liquid"] .nav-item{position:relative;border-radius:17px;transition:transform .22s,background .22s,box-shadow .22s;isolation:isolate}
:root[data-look="liquid"] .nav-item:hover{transform:translateX(2px);background:rgba(146,169,216,.12)}
:root[data-look="liquid"] .nav-item.active{
 background:linear-gradient(133deg,var(--lg-shine),rgba(173,194,230,.26) 62%,rgba(152,176,218,.12));
 border:1px solid var(--lg-rim);
 box-shadow:inset 0 2px 2px var(--lg-glow),inset 0 -2px 8px rgba(77,112,170,.12),0 6px 17px rgba(55,91,156,.12);
}
:root[data-look="liquid"] .nav-item.active:after{content:"";position:absolute;inset:1px 14px auto;height:1px;border-radius:99px;background:linear-gradient(90deg,transparent,var(--lg-glow),transparent);pointer-events:none}
:root[data-look="liquid"] .main-area{position:relative}
:root[data-look="liquid"] .topbar{position:relative;z-index:4}
:root[data-look="liquid"] .look-switch{
 padding:4px;border:1px solid var(--lg-rim);background:linear-gradient(145deg,var(--lg-shine),var(--lg-nav));
 backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
 box-shadow:inset 0 1.3px 1px var(--lg-glow),inset 0 -1px 4px rgba(77,105,158,.12),0 6px 18px rgba(64,83,124,.12);
}
:root[data-look="liquid"] .look-switch-btn.selected{background:linear-gradient(140deg,var(--lg-glow),rgba(178,202,243,.52));box-shadow:inset 0 1px 1px var(--lg-glow),0 2px 10px var(--lg-halo)}
:root[data-look="liquid"] .icon-btn{
 border-radius:17px;color:var(--text);border:1px solid var(--lg-rim);
 background:linear-gradient(135deg,var(--lg-glow),var(--lg-top) 48%,rgba(171,194,233,.24));
 backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
 box-shadow:inset 0 2px 1px var(--lg-glow),inset 0 -2px 7px rgba(100,124,164,.16),0 5px 14px var(--lg-dropshadow);
 transition:transform .2s cubic-bezier(.2,.8,.2,1.2),box-shadow .2s;
}
:root[data-look="liquid"] .icon-btn:hover{transform:translateY(-2px) scale(1.035);box-shadow:inset 0 2px 1px var(--lg-glow),0 7px 23px var(--lg-halo)}
:root[data-look="liquid"] .avatar{border-radius:18px;border:1px solid var(--lg-rim);background:linear-gradient(145deg,var(--lg-glow),rgba(157,199,241,.42),rgba(158,213,203,.27));box-shadow:inset 0 1.5px 1px var(--lg-glow),0 6px 13px var(--lg-dropshadow)}
/* Content layer is deliberately calmer and more opaque than controls. */
:root[data-look="liquid"] .card.glass,
:root[data-look="liquid"] .word-card.glass,
:root[data-look="liquid"] .word-list-row.glass{
 background:var(--lg-panel);backdrop-filter:none;-webkit-backdrop-filter:none;
 border:1px solid var(--stroke);
 box-shadow:0 1px 2px rgba(50,72,105,.035),0 10px 30px rgba(67,87,121,.055),inset 0 1px 0 var(--lg-glow);
}
:root[data-look="liquid"] .card{border-radius:27px}
:root[data-look="liquid"] .metric{border-radius:24px}
:root[data-look="liquid"] .metric-icon{border-radius:15px;background:linear-gradient(135deg,rgba(169,198,242,.32),rgba(210,226,250,.10));box-shadow:inset 0 1px 0 var(--lg-glow)}
:root[data-look="liquid"] .hero.card.glass{
 background:linear-gradient(118deg,rgba(224,234,250,.94),rgba(210,226,246,.91) 54%,rgba(224,238,238,.90));
 border:1px solid rgba(255,255,255,.90);box-shadow:inset 0 2px 1px rgba(255,255,255,.96),0 14px 34px rgba(87,112,153,.11);
}
:root[data-look="liquid"][data-theme="dark"] .hero.card.glass{background:linear-gradient(120deg,rgba(39,58,86,.94),rgba(38,65,93,.9),rgba(34,70,82,.85));border-color:rgba(211,226,255,.25)}
:root[data-look="liquid"] .hero p{color:var(--muted)}
:root[data-look="liquid"] .hero:before{background:radial-gradient(circle at 80% 44%,rgba(126,179,229,.21),transparent 50%)}
:root[data-look="liquid"] .word-card:hover,:root[data-look="liquid"] .word-list-row:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(73,102,162,.11),inset 0 1px 0 var(--lg-glow);border-color:rgba(99,144,211,.35)}
:root[data-look="liquid"] .due-row,:root[data-look="liquid"] .recent-row,:root[data-look="liquid"] .meta-box,:root[data-look="liquid"] .assist-fields>div{background:rgba(142,166,204,.065);border-color:var(--stroke)}
:root[data-look="liquid"] .btn{
 position:relative;overflow:hidden;isolation:isolate;
 border-radius:999px;border:1px solid var(--lg-rim);
 background:linear-gradient(145deg,var(--lg-glow) -15%,var(--lg-top) 40%,rgba(160,187,232,.18) 95%);
 color:var(--text);backdrop-filter:blur(14px) saturate(170%);-webkit-backdrop-filter:blur(14px) saturate(170%);
 box-shadow:inset 0 1.7px 1px var(--lg-glow),inset 0 -3px 9px rgba(103,130,176,.12),0 5px 16px var(--lg-dropshadow);
 transition:transform .23s cubic-bezier(.2,.8,.2,1.1),box-shadow .23s,background .23s;
}
:root[data-look="liquid"] .btn:before{content:"";position:absolute;inset:1px 15% auto;height:1.5px;border-radius:100%;background:linear-gradient(90deg,transparent,var(--lg-glow),transparent);pointer-events:none}
:root[data-look="liquid"] .btn:hover{transform:translateY(-2px);background:linear-gradient(145deg,var(--lg-glow),rgba(174,202,245,.34));box-shadow:inset 0 1.8px 1px var(--lg-glow),0 8px 22px var(--lg-halo)}
:root[data-look="liquid"] .btn:active,:root[data-look="liquid"] .icon-btn:active{transform:scale(.97)}
:root[data-look="liquid"] .btn.primary{
 color:#fff;border-color:rgba(255,255,255,.78);
 background:linear-gradient(140deg,#648ce5 0%,#426fd3 49%,#3155ba 100%);
 box-shadow:inset 0 2px 2px rgba(255,255,255,.58),inset 0 -5px 9px rgba(19,57,153,.23),0 7px 21px rgba(63,108,211,.24);
}
:root[data-look="liquid"] .btn.primary:hover{background:linear-gradient(140deg,#7c9cf0,#4e7bdb 62%,#4165c9)}
:root[data-look="liquid"] .btn.ghost{background:linear-gradient(135deg,var(--lg-top),rgba(189,207,228,.08));border-color:var(--lg-rim);color:var(--text)}
:root[data-look="liquid"] .btn.danger{color:#a83c57;border-color:rgba(202,98,132,.28);background:rgba(255,217,228,.49)}
:root[data-look="liquid"][data-theme="dark"] .btn.danger{color:#ffc3d6;background:rgba(177,76,113,.25)}
:root[data-look="liquid"] .btn.small{border-radius:999px}
:root[data-look="liquid"] .search-wrap,:root[data-look="liquid"] .select,:root[data-look="liquid"] .form-field input,:root[data-look="liquid"] .form-field textarea,:root[data-look="liquid"] .form-field select{
 border-radius:18px;background-color:var(--lg-panel);border:1px solid var(--stroke-strong);
 box-shadow:inset 0 1.5px 3px rgba(69,92,128,.07),0 1px 1px var(--lg-glow);
}
:root[data-look="liquid"] .select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%236e85a4' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center}
:root[data-look="liquid"][data-theme="light"] .select option,:root[data-look="liquid"][data-theme="light"] .form-field select option{background:#fff;color:#22324a}
:root[data-look="liquid"] .assist-panel{border-radius:23px;background:linear-gradient(155deg,var(--lg-panel),rgba(173,200,234,.14));border:1px solid var(--lg-rim);box-shadow:inset 0 1px 1px var(--lg-glow),0 8px 19px rgba(54,84,130,.08)}
:root[data-look="liquid"] .drawer,:root[data-look="liquid"] .modal{
 border-radius:35px;border:1px solid var(--lg-rim);
 background:linear-gradient(152deg,var(--lg-glow) -40%,var(--lg-panel) 24%,var(--lg-panel) 95%);
 backdrop-filter:blur(35px) saturate(160%);-webkit-backdrop-filter:blur(35px) saturate(160%);
 box-shadow:inset 0 2px 2px var(--lg-glow),inset 0 -3px 8px rgba(91,125,174,.10),0 28px 90px var(--lg-dropshadow);
}
:root[data-look="liquid"] .modal-backdrop{background:rgba(39,55,78,.35);backdrop-filter:blur(9px)}
:root[data-look="liquid"] .drawer-head{border-bottom-color:var(--stroke)}
:root[data-look="liquid"] .toast{border-radius:100px;background:var(--lg-panel);border-color:var(--lg-rim);color:var(--text)}
:root[data-look="liquid"] .glass-toggle{background:linear-gradient(135deg,var(--lg-glow),var(--lg-top));border-color:var(--lg-rim);box-shadow:inset 0 1px 1px var(--lg-glow),0 2px 7px var(--lg-dropshadow)}
:root[data-look="liquid"] .glass-toggle.on{background:linear-gradient(100deg,#3dc5a2,#279d91)}
:root[data-look="liquid"] .appearance-choice{background:var(--lg-panel);border-color:var(--stroke);box-shadow:inset 0 1px 0 var(--lg-glow)}
:root[data-look="liquid"] .appearance-choice.is-selected{border-color:#8aabdc;box-shadow:0 0 0 2px rgba(122,170,239,.15),0 8px 25px rgba(77,116,171,.08)}
/* Word map: a calm atlas with glossy interactive node lenses. */
:root[data-look="liquid"] .graph-frame{background:radial-gradient(ellipse at 51% 41%,rgba(159,191,226,.13),transparent 65%),var(--lg-panel);border:1px solid var(--lg-rim);box-shadow:inset 0 2px 3px var(--lg-glow),0 8px 30px rgba(64,89,125,.08);border-radius:31px}
:root[data-look="liquid"] .graph-frame:before{opacity:.18;background-image:radial-gradient(circle,var(--muted2) .65px,transparent 1px);background-size:26px 26px}
:root[data-look="liquid"] .graph-controls{padding:5px;background:var(--lg-nav);border:1px solid var(--lg-rim);border-radius:23px;box-shadow:inset 0 1px var(--lg-glow),0 7px 17px var(--lg-dropshadow);backdrop-filter:blur(21px);-webkit-backdrop-filter:blur(21px)}
:root[data-look="liquid"] .graph-edge{stroke:rgba(98,138,186,.34);stroke-width:1.6}
:root[data-look="liquid"] .graph-edge.family{stroke:rgba(78,118,211,.55)}
:root[data-look="liquid"] .graph-edge.synonym{stroke:rgba(49,151,132,.53)}
:root[data-look="liquid"] .graph-edge.theme{stroke:rgba(182,131,67,.50)}
:root[data-look="liquid"] .node-bg{stroke:rgba(255,255,255,.91);stroke-width:1.7;fill:#d5e3fa;filter:drop-shadow(0 3px 5px rgba(75,111,172,.18));transition:stroke .2s,filter .2s}
:root[data-look="liquid"] .node-bg.noun{fill:#c9e1f6;stroke:#ffffff}
:root[data-look="liquid"] .node-bg.verb{fill:#c5ebe4;stroke:#ffffff}
:root[data-look="liquid"] .node-bg.adj{fill:#f6e3c5;stroke:#ffffff}
:root[data-look="liquid"] .node-bg.active{fill:#89aef0;stroke:#ffffff;stroke-width:2.3;filter:drop-shadow(0 3px 10px rgba(93,141,225,.42))}
:root[data-look="liquid"] .node-lens{display:block;fill:rgba(255,255,255,.32);stroke:rgba(255,255,255,.60);stroke-width:.8}
:root[data-look="liquid"] .node-glint{display:block;stroke:rgba(255,255,255,.87);stroke-width:1.2;stroke-linecap:round;fill:none}
:root[data-look="liquid"] .node-text{fill:#183356;font-weight:750}
:root[data-look="liquid"] .node-sub{fill:#42617a}
:root[data-look="liquid"] .graph-node:hover .node-bg{stroke-width:2.5;filter:drop-shadow(0 4px 12px rgba(92,143,222,.36))}
:root[data-look="liquid"][data-theme="dark"] .node-bg{fill:#3c5b86;stroke:rgba(224,240,255,.57)}
:root[data-look="liquid"][data-theme="dark"] .node-bg.noun{fill:#365a88}
:root[data-look="liquid"][data-theme="dark"] .node-bg.verb{fill:#255c58}
:root[data-look="liquid"][data-theme="dark"] .node-bg.adj{fill:#6a553a}
:root[data-look="liquid"][data-theme="dark"] .node-bg.active{fill:#5174d2}
:root[data-look="liquid"][data-theme="dark"] .node-lens{fill:rgba(255,255,255,.08);stroke:rgba(255,255,255,.16)}
:root[data-look="liquid"][data-theme="dark"] .node-text{fill:#f5f8ff}
:root[data-look="liquid"][data-theme="dark"] .node-sub{fill:#d3e0f2}
/* Mobile dock sits above the content in a single, legible glass layer. */
@media(max-width:680px){
 :root[data-look="liquid"] .main-area{padding-top:24px}
 :root[data-look="liquid"] .mobile-nav{border-radius:999px;background:linear-gradient(145deg,var(--lg-glow) -30%,var(--lg-nav) 28%,var(--lg-nav));border:1px solid var(--lg-rim);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);box-shadow:inset 0 2px 2px var(--lg-glow),inset 0 -3px 7px rgba(108,137,174,.12),0 11px 30px var(--lg-dropshadow);min-height:70px}
 :root[data-look="liquid"] .mobile-nav button{border-radius:999px;padding:8px 4px;min-height:53px;min-width:47px;transition:background .18s,transform .18s}
 :root[data-look="liquid"] .mobile-nav button.active{background:linear-gradient(145deg,var(--lg-glow),rgba(157,192,236,.37));color:var(--text);box-shadow:inset 0 1.5px 1px var(--lg-glow),0 3px 10px var(--lg-halo)}
 :root[data-look="liquid"] .mobile-nav button:active{transform:scale(.95)}
 :root[data-look="liquid"] .drawer{border-radius:26px 26px 0 0;top:14px;left:0;right:0;bottom:0;width:100%;border-bottom:0}
 :root[data-look="liquid"] .graph-frame{border-radius:24px}
 :root[data-look="liquid"] .graph-controls{top:12px;right:11px}
 :root[data-look="liquid"] .hero.card.glass{border-radius:26px}
}
/* Low transparency mode: preserve control hierarchy without translucency. */
:root[data-look="liquid"][data-reduce-glass="yes"] .sidebar,
:root[data-look="liquid"][data-reduce-glass="yes"] .mobile-nav,
:root[data-look="liquid"][data-reduce-glass="yes"] .drawer,
:root[data-look="liquid"][data-reduce-glass="yes"] .modal,
:root[data-look="liquid"][data-reduce-glass="yes"] .look-switch,
:root[data-look="liquid"][data-reduce-glass="yes"] .icon-btn,
:root[data-look="liquid"][data-reduce-glass="yes"] .btn{background:var(--bg2);backdrop-filter:none;-webkit-backdrop-filter:none}
:root[data-look="liquid"][data-reduce-glass="yes"] .btn.primary{background:#426fd3;color:#fff}
@media(prefers-reduced-transparency:reduce){
 :root[data-look="liquid"] .sidebar,:root[data-look="liquid"] .mobile-nav,:root[data-look="liquid"] .drawer,:root[data-look="liquid"] .modal,:root[data-look="liquid"] .icon-btn,:root[data-look="liquid"] .btn{background:var(--bg2);backdrop-filter:none;-webkit-backdrop-filter:none}
 :root[data-look="liquid"] .btn.primary{background:#426fd3;color:#fff}
}
@media(prefers-reduced-motion:reduce){
 :root[data-look="liquid"] .hero-orbit .orbit{animation:none}
 :root[data-look="liquid"] .graph-node{animation:none}
}
@supports not (backdrop-filter:blur(1px)){
 :root[data-look="liquid"] .sidebar,:root[data-look="liquid"] .mobile-nav,:root[data-look="liquid"] .drawer,:root[data-look="liquid"] .modal,:root[data-look="liquid"] .btn{background:var(--bg2)}
}
/* Responsive correction: don't truncate the primary add-word action on narrow phones. */
@media(max-width:680px){
 :root[data-look="liquid"] .main-header{flex-direction:column;align-items:flex-start;gap:10px}
 :root[data-look="liquid"] .main-header .btn{align-self:flex-start;white-space:normal;max-width:100%;min-height:42px}
 :root[data-look="liquid"] .main-header .btn .icon{display:inline-flex}
}