/* One visual system for the daily workspace. Legacy dialogs retain style.css. */
:root { --ai-brand:#2855a6; --ai-bg:#f7f8fa; --ai-surface:#fff; --ai-soft:#eef1f5; --ai-ink:#202b3c; --ai-muted:#596579; --ai-line:#dce1e8; --ai-radius:10px; --ai-success:#27724f; }
html.dark { --ai-brand:#a5c4ff; --ai-bg:#141a23; --ai-surface:#1d2531; --ai-soft:#252f3e; --ai-ink:#edf1f7; --ai-muted:#b0bbcd; --ai-line:#394658; --ai-success:#83d5ad; color-scheme:dark; }
html.light { color-scheme:light; }
body.luyen-app { font-family:"Segoe UI",Tahoma,Arial,sans-serif; font-size:15px; line-height:1.5; background:var(--ai-bg)!important; color:var(--ai-ink)!important; height:100dvh; overflow:hidden; user-select:text; }
.luyen-app :is(button,input,select,summary) { touch-action:manipulation; }
.luyen-app button { min-height:44px; min-width:44px; cursor:pointer; }
.luyen-app button:disabled { cursor:not-allowed; opacity:.65; }
.luyen-app :focus-visible { outline:3px solid var(--ai-brand)!important; outline-offset:3px; }
.luyen-app summary { cursor:pointer; min-height:44px; }
.luyen-app input::placeholder { color:var(--ai-muted); opacity:1; }
.luyen-app :is(button,summary) { -webkit-tap-highlight-color:transparent; }
.luyen-app :is(.header-search,.support-panel,.task-actions,.view-switcher-group) button:hover { background:var(--ai-soft)!important; }

/* The header and two tabs form a quiet, continuous navigation band. */
html body.luyen-app .zen-header { height:auto; min-height:72px; padding:12px 32px; background:var(--ai-surface)!important; border:0!important; backdrop-filter:none; gap:24px; }
.luyen-app .header-brand-group { display:grid; grid-template-columns:36px 1fr; column-gap:11px; row-gap:2px; }
.luyen-app .brand-logo-icon { grid-row:1/3; width:36px; height:36px; border-radius:11px; background:#2855a6!important; box-shadow:none; }
.luyen-app .brand-logo-icon svg { width:22px; height:22px; stroke-width:2.5; }
.luyen-app .brand-title-text { display:block!important; font-size:19px; line-height:1.2; font-weight:700; color:var(--ai-ink)!important; letter-spacing:-.4px; }
.brand-description { font-size:12px; color:var(--ai-muted); }
.luyen-app .zen-header>div:last-child { gap:6px; }
.header-search { display:flex; align-items:center; gap:8px; padding:0 12px; color:var(--ai-muted); font-size:13px; border-radius:8px; }
.header-search svg { width:17px; height:17px; }
.header-search kbd { font:11px "Segoe UI",sans-serif; border:1px solid var(--ai-line); border-radius:4px; padding:1px 4px; }
html body.luyen-app :is(#btn-theme-toggle,#btn-dropdown-toggle) { background:transparent!important; border:0!important; box-shadow:none; color:var(--ai-muted)!important; }
html body.luyen-app :is(#btn-theme-toggle,#btn-dropdown-toggle) svg { color:inherit!important; width:18px; height:18px; }
#storage-status { font-size:12px; color:var(--ai-muted); margin-right:12px; max-width:270px; }
#storage-status.storage-error { color:#b13730; font-weight:600; }
html.dark #storage-status.storage-error { color:#ffb4a9; }
.workspace-navigation { flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:0 32px; gap:16px; background:var(--ai-surface); border-bottom:1px solid var(--ai-line); }
html body.luyen-app .view-switcher-group { background:transparent!important; border:0!important; padding:0; gap:24px; border-radius:0; align-self:stretch; }
html body.luyen-app .view-switcher-group :is(#btn-view-matrix,#btn-view-graph) { display:flex; align-items:center; justify-content:center; gap:8px; padding:0 2px; min-height:54px; font-size:14px; font-weight:500; border-radius:0; border-bottom:2px solid transparent; background:transparent!important; color:var(--ai-muted)!important; box-shadow:none!important; }
html body.luyen-app .view-switcher-group :is(#btn-view-matrix,#btn-view-graph)[aria-selected=true] { color:var(--ai-brand)!important; border-bottom-color:var(--ai-brand); font-weight:650; }
.view-switcher-group svg { width:17px; height:17px; }
html body.luyen-app .date-navigator-group { background:transparent!important; border:0!important; gap:2px; padding:0; }
html body.luyen-app .date-navigator-group :is(#current-date-label,#btn-date-prev,#btn-date-next) { color:var(--ai-ink)!important; font-size:13px; white-space:nowrap; }
.date-navigator-group>div { min-height:44px; }
.date-navigator-group:has(input:focus-visible) { outline:2px solid var(--ai-brand); outline-offset:2px; }
.date-navigator-group button svg { width:17px; height:17px; }
.luyen-app .date-nav-today-btn { color:var(--ai-brand)!important; padding:0 10px; font-size:13px; }
html body.luyen-app .date-nav-today-btn.hidden { display:none!important; }
html body.luyen-app #btn-date-today { background:var(--ai-soft)!important; color:var(--ai-brand)!important; border:0!important; }
.luyen-app main { min-height:0; }
.luyen-app #matrix-view-wrapper { background:var(--ai-bg)!important; overflow:auto!important; padding-bottom:0; }
.luyen-app #matrix-container { height:auto; min-height:100%; }
.day-workspace { max-width:1600px; margin:auto; padding:30px 32px 36px; position:relative; }
.day-overview { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:28px; }
.overview-tools { display:flex; align-items:center; gap:24px; }
.day-overview h1 { font-size:28px; font-weight:650; line-height:1.25; letter-spacing:-.8px; margin:0 0 7px; }
.day-overview p { color:var(--ai-muted); font-size:14px; margin:0; }
.daily-progress { width:180px; display:grid; gap:9px; font-size:13px; }
.daily-progress strong { font-weight:500; color:var(--ai-muted); }
.daily-progress progress { width:100%; height:5px; border:none; border-radius:8px; overflow:hidden; background:var(--ai-line); accent-color:var(--ai-brand); }
progress::-webkit-progress-bar { background:var(--ai-line); } progress::-webkit-progress-value { background:var(--ai-brand); border-radius:8px; }
.week-disclosure { margin:0; }
.week-disclosure>summary { display:flex; align-items:center; gap:7px; width:fit-content; font-size:13px; color:var(--ai-muted); list-style:none; }
.week-disclosure svg { width:15px; height:15px; }
.week-disclosure svg:last-child { width:12px; }
.week-disclosure[open]>summary svg:last-child { transform:rotate(180deg); }
.week-strip { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; position:absolute; z-index:25; top:100px; right:32px; width:min(700px,calc(100% - 64px)); padding:16px; border:1px solid var(--ai-line); background:var(--ai-surface); border-radius:12px; box-shadow:0 8px 25px #14203918; }
.week-strip button { display:flex; align-items:center; justify-content:center; gap:9px; padding:10px; min-height:58px; color:var(--ai-muted); border:1px solid var(--ai-line); border-radius:8px; background:var(--ai-surface); }
.week-strip strong { color:var(--ai-ink); font-size:18px; position:relative; }
.week-strip :is(span,small) { font-size:12px; }
.week-strip button[aria-current=date] { background:var(--ai-brand); border-color:var(--ai-brand); color:var(--ai-surface); }
.week-strip button[aria-current=date] strong { color:var(--ai-surface); }
.week-strip i { width:4px; height:4px; background:currentColor; border-radius:50%; position:absolute; bottom:-5px; left:50%; }

/* Capture first, filter second. */
#quick-task-form { display:flex; gap:8px; align-items:center; background:var(--ai-surface); border:1px solid var(--ai-line); border-radius:var(--ai-radius); padding:5px; box-shadow:0 2px 5px #202b3c03; }
#quick-task-form:focus-within { border-color:var(--ai-brand); }
html body.luyen-app #quick-task-title { flex:1; width:0; min-width:0; height:46px; padding:10px 12px; font-size:16px; border:none!important; background:transparent!important; border-radius:6px; color:var(--ai-ink)!important; box-shadow:none!important; }
.primary-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:#2855a6; color:#fff; font-size:14px; font-weight:600; padding:0 18px; border-radius:7px; white-space:nowrap; }
.primary-button:hover { background:#204788; }
.primary-button svg { width:17px; height:17px; }
.quick-group-label { display:flex; align-items:center; gap:8px; padding:0 10px; border-left:1px solid var(--ai-line); font-size:13px; color:var(--ai-muted); }
.quick-group-label select { min-height:44px; max-width:150px; padding:5px 20px 5px 5px; background:transparent; color:var(--ai-ink); font-size:14px; border:0; border-radius:5px; }
.quick-meta { display:flex; align-items:start; justify-content:space-between; gap:16px; margin:2px 0 12px; color:var(--ai-muted); font-size:12px; }
.entry-guidance { padding:13px 0; }
#quick-help { max-width:60%; text-align:right; font-size:12px; }
#quick-help summary { display:flex; align-items:center; justify-content:flex-end; text-decoration:underline; text-underline-offset:3px; }
#quick-help p { max-width:68ch; text-align:left; padding:6px 0; }
#quick-help button { color:var(--ai-brand); }
.form-error { color:#b13730; font-size:14px; white-space:normal; }
.form-error:not(:empty) { margin:8px 0; }
html.dark .form-error { color:#ffb4a9; }
.work-filters { display:flex; gap:10px; align-items:center; border-bottom:1px solid var(--ai-line); padding-bottom:8px; }
.status-filters { display:flex; gap:4px; }
.status-filters button { font-size:13px; color:var(--ai-muted); padding:0 13px; border-radius:7px; }
.status-filters button[aria-pressed=true] { background:var(--ai-soft); color:var(--ai-ink); font-weight:600; }
.search-field { display:flex; align-items:center; gap:8px; margin-left:auto; max-width:245px; min-width:100px; flex:1; color:var(--ai-muted); }
.search-field svg,.filter-toggle svg { width:16px; height:16px; flex-shrink:0; }
.search-field input { min-height:44px; min-width:0; width:100%; border:0; border-radius:6px; background:transparent; color:var(--ai-ink); padding:6px 4px; font-size:13px; }
.filter-toggle { display:flex; align-items:center; gap:7px; font-size:13px; padding:0 10px; border-radius:7px; color:var(--ai-muted); }
.filter-toggle[aria-expanded=true] { background:var(--ai-soft); color:var(--ai-ink); }
.extra-filters>div { display:flex; align-items:center; gap:16px; padding:16px 0; border-bottom:1px solid var(--ai-line); }
.extra-filters label { display:flex; align-items:center; gap:8px; min-width:0; font-size:13px; }
.extra-filters select { min-height:44px; max-width:220px; padding:6px 10px; border:1px solid var(--ai-line); border-radius:7px; background:var(--ai-surface); color:var(--ai-ink); }
.extra-filters p { font-size:12px; color:var(--ai-muted); }
.filter-summary { display:flex; align-items:center; gap:12px; flex-wrap:wrap; min-height:48px; color:var(--ai-muted); font-size:12px; }
.filter-summary button { color:var(--ai-brand); font-size:12px; }
.review-shortcut { display:flex; align-items:center; gap:7px; margin-left:auto; text-align:left; }
.review-shortcut svg { width:14px; height:14px; }
.review-shortcut span { font-size:18px; }

/* Four groups, readable titles, actions always available without hovering. */
.daily-layout { display:flex; flex-direction:column; gap:24px; }
.daily-task-area { width:100%; }
#matrix-columns-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; align-items:start; }
html body.luyen-app #matrix-container .matrix-column-container { border:1px solid var(--ai-line)!important; border-radius:var(--ai-radius); background:var(--ai-soft)!important; overflow:hidden; height:auto!important; box-shadow:none; }
.matrix-column-container>header { display:flex; align-items:flex-start; justify-content:space-between; gap:4px; padding:16px 12px 12px; min-height:91px; }
.matrix-column-container h3 { display:flex; align-items:center; gap:7px; font-size:15px; font-weight:650; color:var(--ai-ink)!important; }
.quadrant-dot { width:7px; height:7px; border-radius:50%; background:var(--quadrant); flex-shrink:0; }
.column-count { font-size:12px; color:var(--ai-muted); font-weight:400; margin-left:2px; }
.matrix-column-container header p { color:var(--ai-muted); font-size:12px; line-height:1.5; margin-top:5px; }
.matrix-column-container header button { font-size:23px; color:var(--ai-muted); margin:-8px -8px 0 0; }
.column-body { padding:0 8px 8px; min-height:156px; display:flex; flex-direction:column; gap:8px; }
html body.luyen-app #matrix-container .task-card-item { padding:12px 10px 0!important; background:var(--ai-surface)!important; border:1px solid var(--ai-line)!important; border-radius:8px; box-shadow:0 1px 2px #202b3c04!important; opacity:1!important; transform:none!important; }
html body.luyen-app #matrix-container .task-card-item:hover { border-color:#aab8cd!important; }
.task-main { display:flex; align-items:flex-start; gap:2px; }
html body.luyen-app #matrix-container .task-card-done-btn { display:flex; align-items:center; justify-content:center; width:44px; height:44px; min-width:44px; flex-shrink:0; border:none!important; margin:-8px 0 0 -10px; color:var(--ai-muted)!important; background:transparent!important; }
.completion-mark { width:19px; height:19px; border:1.5px solid #8b96a7; border-radius:50%; font-size:13px; line-height:17px; text-align:center; }
.task-card-done-btn[aria-pressed=true] .completion-mark { border-color:var(--ai-success); color:var(--ai-surface); background:var(--ai-success); }
html body.luyen-app #matrix-container .task-card-item .task-title { text-align:left; min-width:0; min-height:44px; font-size:16px; font-weight:550; line-height:1.5; color:var(--ai-ink)!important; overflow-wrap:anywhere; padding:0 0 4px; }
.is-done .task-title { text-decoration:line-through; text-decoration-color:var(--ai-muted); }
.task-metadata { display:flex; align-items:center; flex-wrap:wrap; gap:5px 10px; font-size:12px; color:var(--ai-muted); margin:3px 0 8px 26px; }
.task-group { display:none; }
.task-tags { display:flex; flex-wrap:wrap; gap:0 8px; max-width:100%; }
.task-tags:empty { display:none; }
html body.luyen-app #matrix-container .task-tags button { color:var(--ai-brand)!important; font-size:12px; overflow-wrap:anywhere; text-align:left; max-width:100%; padding:0; }
.task-actions { display:flex; justify-content:flex-end; align-items:center; gap:2px; border-top:1px solid var(--ai-line); margin-top:4px; }
html body.luyen-app #matrix-container .task-actions button { font-size:13px; padding:0 7px; border-radius:5px; color:var(--ai-muted)!important; }
html body.luyen-app #matrix-container .task-actions .pin-task { font-size:22px; padding:0; margin-right:auto; }
html body.luyen-app #matrix-container .pin-task[aria-pressed=true] { color:var(--ai-brand)!important; }
html body.luyen-app #matrix-container .start-task { color:var(--ai-brand)!important; }
html body.luyen-app #matrix-container .task-launch-action { display:inline-flex; align-items:center; gap:5px; color:var(--ai-brand)!important; font-weight:600; }
.task-launch-action svg { width:14px; height:14px; }
.is-working .task-status { color:var(--ai-brand); font-weight:600; }
.is-done .task-status { color:var(--ai-success); }
.blocked-badge { color:#8a5719; }
html.dark .blocked-badge { color:#edc285; }
html body.luyen-app .matrix-empty-state { padding:24px 6px; text-align:center; color:var(--ai-muted); font-size:13px; border:1px dashed var(--ai-line); border-radius:7px; }
html body.luyen-app #matrix-container .matrix-empty-state button { color:var(--ai-brand)!important; font-size:13px; }
html body.luyen-app #matrix-container .matrix-column-container.drag-over-active { outline:2px solid var(--ai-brand); outline-offset:2px; background:var(--ai-surface)!important; }

/* Optional tools open in place and preserve their state across task edits. */
.planning-sidebar { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; width:100%; align-items:start; }
.support-panel { min-width:0; border-bottom:1px solid var(--ai-line); padding:0 2px; }
.support-panel summary { display:flex; align-items:center; gap:9px; padding:12px 0; font-size:13px; font-weight:500; list-style:none; }
.support-panel summary svg { width:16px; height:16px; color:var(--ai-muted); flex-shrink:0; }
.support-panel summary::after { content:'›'; transform:rotate(90deg); font-size:20px; color:var(--ai-muted); margin-left:auto; }
.support-panel[open] summary::after { transform:rotate(-90deg); }
.support-panel summary span { color:var(--ai-muted); font-weight:400; }
.support-panel p,.next-step small { color:var(--ai-muted); font-size:13px; margin:0 0 12px; }
.support-task { text-align:left; display:block; width:100%; border-top:1px solid var(--ai-line); font-size:14px; padding:8px 0; overflow-wrap:anywhere; }
.next-step .next-title { text-align:left; font-size:16px; line-height:1.5; font-weight:600; overflow-wrap:anywhere; padding:0; color:var(--ai-ink); }
.next-step p { margin:8px 0; }
.next-step small { display:block; margin-top:12px; font-size:12px; }
.start-button { display:inline-flex; align-items:center; padding:6px 13px; border:1px solid var(--ai-line); border-radius:7px; background:var(--ai-surface); color:var(--ai-brand); font-size:13px; font-weight:600; }
.earlier-task { display:flex; flex-direction:column; align-items:flex-start; border-top:1px solid var(--ai-line); padding:8px 0; }
.earlier-task>button:first-child { text-align:left; font-size:14px; overflow-wrap:anywhere; }
.earlier-task small { display:block; color:var(--ai-muted); font-size:12px; }
.earlier-task .carry-task { color:var(--ai-brand); font-size:13px; }
.day-notes { margin:12px 0; }
.day-notes label { display:block; font-size:14px; color:var(--ai-muted); margin-bottom:8px; }
.day-notes textarea { display:block; width:100%; min-height:90px; padding:12px; border:1px solid var(--ai-line); border-radius:8px; color:var(--ai-ink); background:var(--ai-surface); font-size:15px; }
.day-notes button { margin:10px 10px 14px 0; }
#day-notes-status { font-size:13px; }
.learning-preview { margin-top:24px; color:var(--ai-muted); }
.learning-preview>summary { padding:8px 0; list-style:disclosure-closed inside; }
.learning-preview[open]>summary { list-style-type:disclosure-open; }
.learning-preview h2 { display:inline; font-size:13px; font-weight:500; }
.learning-preview summary>span { margin-left:12px; font-size:12px; }
.learning-activities { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; padding:16px 0; }
.learning-activities article { display:grid; grid-template-columns:26px minmax(0,1fr); gap:2px 10px; align-items:start; }
.learning-order { grid-row:1/3; display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:var(--ai-soft); color:var(--ai-brand); font-size:12px; font-weight:700; }
.learning-activities h3 { font-size:15px; font-weight:600; color:var(--ai-ink); }
.learning-activities p { font-size:13px; margin-top:4px; }
.learning-action { grid-column:2; display:flex; align-items:center; margin-top:7px; }
.learning-action a,.task-detail-launch { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:6px 12px; border:1px solid var(--ai-line); border-radius:7px; font-size:13px; color:var(--ai-brand); font-weight:600; background:var(--ai-surface); }
.learning-action a:hover,.task-detail-launch:hover { border-color:var(--ai-brand); }
.learning-action svg,.task-detail-launch svg { width:14px; height:14px; }
.task-detail-launch { width:100%; }
#learning-reason { font-size:12px; padding:4px 0 12px; }

/* Graph: toolbars have their own space, away from nodes. */
.luyen-app #graph-view-wrapper:not(.hidden) { display:flex; flex-direction:column; min-height:0; }
.luyen-app .graph-toolbar-controls { order:-1; position:relative!important; inset:auto!important; padding:14px 32px; flex-shrink:0; background:var(--ai-bg); border-bottom:1px solid var(--ai-line); gap:10px; z-index:20; }
.luyen-app .graph-toolbar-controls :is(button,input) { font-size:13px!important; }
.luyen-app #network-canvas { position:relative!important; flex:1; min-height:160px; height:auto; top:auto; left:auto; width:100%; }
html body.luyen-app .graph-toolbar-controls .glass-panel { box-shadow:none!important; background:var(--ai-surface)!important; border:1px solid var(--ai-line)!important; color:var(--ai-muted)!important; }
.graph-toolbar-controls .graph-search-container { padding:0 12px; }
.graph-toolbar-controls .graph-search-container input { min-height:44px; color:var(--ai-ink)!important; }
html body.luyen-app .graph-range-group button { color:var(--ai-muted)!important; background:transparent!important; }
html body.luyen-app .graph-range-group button[aria-pressed=true] { color:var(--ai-brand)!important; background:var(--ai-soft)!important; }
html body.luyen-app #btn-graph-only-linked[aria-pressed=true] { color:var(--ai-brand)!important; border-color:var(--ai-brand)!important; }
.graph-options { position:relative; color:var(--ai-muted); }
.graph-options>summary { display:flex; align-items:center; gap:7px; padding:0 10px; font-size:13px; list-style:none; }
.graph-options svg { width:16px; height:16px; }
.graph-options>div { position:absolute; top:calc(100% + 8px); right:0; z-index:25; width:230px; padding:8px; border:1px solid var(--ai-line); border-radius:10px; background:var(--ai-surface); box-shadow:0 8px 25px #14203918; display:grid; gap:6px; }
.graph-zoom-inline { display:flex; gap:4px; margin-left:auto; }
html body.luyen-app .graph-zoom-inline button { border:0; background:transparent!important; color:var(--ai-muted)!important; box-shadow:none; }
.graph-explanation { background:var(--ai-surface); padding:10px 32px; font-size:12px; border-top:1px solid var(--ai-line); max-height:32%; overflow:auto; }
.graph-explanation summary { font-weight:500; display:list-item; min-height:28px; }
.graph-explanation p { margin:7px 0; color:var(--ai-muted); }
#graph-task-list { display:flex; flex-wrap:wrap; gap:8px; }
#graph-task-list button { padding:7px 12px; border:1px solid var(--ai-line); border-radius:7px; text-align:left; max-width:100%; overflow-wrap:anywhere; }
#graph-selection { display:flex; align-items:center; flex-wrap:wrap; gap:10px; overflow-wrap:anywhere; color:var(--ai-muted); }
#graph-selection button { color:var(--ai-brand); }
.graph-drag-hint { position:absolute; left:50%; bottom:60px; z-index:35; transform:translateX(-50%); padding:8px 14px; border:1px solid var(--ai-line); border-radius:999px; background:var(--ai-surface); color:var(--ai-muted); font-size:13px; box-shadow:0 6px 18px #14203918; pointer-events:none; }
.graph-drag-hint.is-ready { border-color:var(--ai-brand); color:var(--ai-brand); font-weight:600; }

/* Tooltip is a compact extension of the workspace, not a floating dark panel. */
body.luyen-app #network-canvas div.vis-tooltip { max-width:min(300px,calc(100vw - 24px))!important; opacity:1; transition:opacity .08s linear; }
body.luyen-app #network-canvas .tooltip-card { width:260px; max-width:100%!important; padding:12px!important; gap:7px; background:var(--ai-surface)!important; color:var(--ai-ink)!important; border:1px solid var(--ai-line)!important; border-radius:8px!important; box-shadow:0 8px 22px #1420391f!important; backdrop-filter:none!important; }
body.luyen-app #network-canvas .tooltip-title { color:var(--ai-ink)!important; font-size:14px!important; font-weight:600; }
body.luyen-app #network-canvas :is(.tooltip-meta,.tooltip-tip,.tooltip-progress-row) { color:var(--ai-muted)!important; font-size:11px; }
body.luyen-app #network-canvas .tooltip-tip { text-align:left; padding-top:7px; border-top:1px solid var(--ai-line); }
body.luyen-app #network-canvas .tooltip-notes { color:var(--ai-ink)!important; background:var(--ai-soft)!important; border-radius:5px; }
body.luyen-app #network-canvas .tooltip-footer { border-top-color:var(--ai-line); }
body.luyen-app #network-canvas .tooltip-tag { color:var(--ai-brand); background:var(--ai-soft); border-color:var(--ai-line); }
body.luyen-app #network-canvas .tooltip-links-count { color:var(--ai-brand); }
body.luyen-app #network-canvas .tooltip-badge { background:var(--ai-soft); border:1px solid var(--ai-line); }
body.luyen-app #network-canvas .tooltip-badge-pending { color:var(--ai-muted); }
body.luyen-app #network-canvas .tooltip-badge-progress { color:#8a5719; }
body.luyen-app #network-canvas .tooltip-badge-done { color:var(--ai-success); }
html.dark body.luyen-app #network-canvas .tooltip-badge-progress { color:#edc285; }
body.luyen-app #network-canvas .tooltip-date-pill { color:var(--ai-brand); }
body.luyen-app #network-canvas .tooltip-count-badge { color:var(--ai-ink); background:var(--ai-soft); }
#graph-empty-state:not([hidden]) { display:flex; align-items:center; flex-direction:column; gap:14px; position:absolute; inset:130px 24px 100px; justify-content:center; text-align:center; pointer-events:none; }
#graph-empty-state>svg { width:36px; height:36px; color:var(--ai-brand); }
#graph-empty-state h2 { font-size:24px; font-weight:600; letter-spacing:-.5px; }
#graph-empty-state p { max-width:45ch; color:var(--ai-muted); font-size:14px; }
#graph-empty-state button { pointer-events:auto; margin-top:8px; }

/* Menus, dialogs, and feedback share the workspace typography. */
.menu-group-label { color:var(--ai-muted); font-size:12px; font-weight:600; padding:8px 12px 2px; }
.luyen-app #menu-dropdown { width:min(320px,calc(100vw - 24px)); max-height:calc(100dvh - 90px); overflow:auto; background:var(--ai-surface)!important; }
.luyen-app .menu-dropdown-item { font-size:14px; color:var(--ai-ink)!important; }
.luyen-app .menu-dropdown-privacy-box p { font-size:13px; color:var(--ai-muted)!important; }
.luyen-app [role=dialog]>div { max-height:calc(100dvh - 24px); overflow-y:auto; background:var(--ai-surface)!important; color:var(--ai-ink); }
.luyen-app [role=dialog] :is(input,textarea,select) { font-size:16px; min-height:44px; color:var(--ai-ink)!important; background:var(--ai-soft)!important; border-color:var(--ai-line)!important; }
.luyen-app [role=dialog] :is(label,.text-xs,[class*="text-[10px]"],[class*="text-[11px]"]) { font-size:14px; }
.luyen-app [role=dialog] .truncate { white-space:normal; overflow-wrap:anywhere; }
.luyen-app .modal-header-title { font-size:20px!important; color:var(--ai-ink)!important; }
.relation-description { display:block; font-size:13px; color:var(--ai-muted); font-weight:400; }
.luyen-app .daily-modal>div { width:min(640px,100%); border-radius:14px; padding:24px; border:1px solid var(--ai-line); }
.daily-modal header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.daily-modal h2 { font-size:21px; font-weight:650; }
.daily-modal header button { font-size:26px; color:var(--ai-muted); }
.daily-modal label { display:block; color:var(--ai-muted); font-size:14px; margin-bottom:5px; }
#global-search-input { width:100%; border:1px solid var(--ai-line); border-radius:8px; padding:10px; }
.daily-modal .search-status-label { display:flex; gap:10px; align-items:center; margin:12px 0; }
.search-status-label select { border:1px solid var(--ai-line); padding:5px 10px; border-radius:8px; }
#global-search-count { font-size:13px; color:var(--ai-muted); margin-bottom:8px; }
#global-search-results { max-height:50dvh; overflow:auto; }
.search-result { display:flex; flex-direction:column; width:100%; gap:4px; text-align:left; padding:13px 4px; border-top:1px solid var(--ai-line); overflow-wrap:anywhere; }
.search-result strong { font-size:16px; font-weight:600; }
.search-result span { font-size:13px; color:var(--ai-muted); }
.daily-modal p { margin:10px 0; }
.daily-modal footer { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; margin-top:20px; }
.daily-modal footer button { padding:6px 12px; border:1px solid var(--ai-line); border-radius:8px; font-size:14px; }
.external-change-banner { padding:10px 32px; background:var(--ai-soft); border-bottom:1px solid var(--ai-line); font-size:14px; }
.external-change-banner:not([hidden]) { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.external-change-banner button { color:var(--ai-brand); font-weight:600; }
body.luyen-app .floating-dopamine-bubble { position:fixed!important; top:auto!important; bottom:18px!important; left:50%!important; transform:translateX(-50%)!important; animation:none!important; display:flex; gap:12px; align-items:center; width:max-content; max-width:min(560px,calc(100vw - 28px)); border:1px solid var(--ai-line); border-radius:10px; padding:8px 10px 8px 16px; box-shadow:0 4px 18px #172c4a20; background:var(--ai-surface)!important; color:var(--ai-ink)!important; pointer-events:auto; z-index:100; white-space:normal; font-size:14px; }
.floating-dopamine-bubble button { font-size:22px; flex-shrink:0; }

@media(max-width:1150px) {
 #storage-status { display:none; } #storage-status.storage-error { display:block; max-width:240px; }
 #matrix-columns-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .week-strip small { display:none; }
}
@media(max-width:800px) {
 html body.luyen-app .zen-header { padding:12px 20px; min-height:64px; }
 .workspace-navigation { padding:0 20px; }
 .header-search kbd { display:none; }
 .day-workspace { padding:24px 20px; }
 .overview-tools { gap:16px; }
 .daily-progress { width:130px; }
 .planning-sidebar { gap:10px; }
 .work-filters { flex-wrap:wrap; }
 .work-filters .search-field { max-width:none; }
 .extra-filters>div { flex-wrap:wrap; } .extra-filters label { flex:1; }
 .week-strip button { flex-direction:column; gap:0; padding:6px 2px; }
 .luyen-app .graph-toolbar-controls { padding:12px 20px; }
 .graph-explanation { padding:10px 20px; }
}
@media(max-width:600px) {
 html body.luyen-app .zen-header { padding:9px 16px; gap:8px; min-height:62px; }
 .luyen-app .header-brand-group { column-gap:9px; }
 .luyen-app .brand-title-text { font-size:18px; }
 .luyen-app .brand-description { font-size:11px; }
 .luyen-app .brand-logo-icon { width:34px; height:34px; }
 .header-search { padding:0; justify-content:center; }
 .header-search span { display:none; }
 #storage-status.storage-error { position:absolute; top:116px; left:0; width:100%; max-width:none; background:var(--ai-surface); padding:12px 16px; border-bottom:1px solid var(--ai-line); z-index:30; }
 .workspace-navigation { padding:0 16px; gap:6px; flex-wrap:wrap; }
 html body.luyen-app .view-switcher-group { gap:18px; }
 html body.luyen-app .view-switcher-group :is(#btn-view-matrix,#btn-view-graph) { min-height:52px; font-size:13px; gap:6px; }
 .view-switcher-group svg { display:none; }
 html body.luyen-app .date-navigator-group { gap:0; }
 .date-navigator-group>div { padding:0 2px; }
 html body.luyen-app .date-navigator-group #current-date-label { font-size:12px; }
 .luyen-app .date-nav-today-btn { padding:0 6px; font-size:12px; }
 .day-workspace { padding:22px 16px 28px; }
 .day-overview { flex-direction:column; align-items:stretch; gap:12px; margin-bottom:20px; }
 .day-overview h1 { font-size:26px; }
 .day-overview p { font-size:13px; }
 .overview-tools { gap:16px; }
 .daily-progress { flex:1; width:auto; display:grid; gap:6px; font-size:12px; }
 .daily-progress strong { white-space:nowrap; }
 .daily-progress progress { width:100%; }
 .week-disclosure>summary { font-size:12px; }
 .week-strip { top:150px; right:16px; width:calc(100% - 32px); gap:4px; padding:10px; }
 #quick-task-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 5px; padding:5px; }
 html body.luyen-app #quick-task-title { width:100%; grid-column:1; height:44px; padding:8px; }
 #quick-task-form .primary-button { grid-column:2; grid-row:1; padding:0 12px; }
 #quick-task-form .primary-button svg { display:none; }
 .quick-group-label { grid-column:1/-1; border:0; border-top:1px solid var(--ai-line); padding:0 8px; font-size:12px; }
 .quick-group-label select { font-size:13px; flex:1; max-width:none; }
 .quick-meta { margin:0 0 6px; }
 .entry-guidance { display:none; }
 #quick-help { max-width:100%; width:100%; }
 #quick-help summary { justify-content:flex-start; }
 .status-filters { width:100%; justify-content:space-between; gap:0; }
 .status-filters button { flex:1; padding:0 8px; font-size:12px; }
 .work-filters { gap:4px 8px; padding-bottom:6px; }
 .search-field { margin-left:8px; }
 .filter-summary { gap:0 12px; min-height:44px; font-size:11px; }
 .filter-summary button { font-size:11px; }
 .review-shortcut { gap:4px; }
 .review-shortcut svg { display:none; }
 #matrix-columns-grid { grid-template-columns:1fr; gap:16px; }
 .matrix-column-container>header { min-height:78px; padding:15px 14px 10px; }
 .matrix-column-container h3 { font-size:16px; }
 .column-body { min-height:130px; padding:0 10px 10px; }
 html body.luyen-app #matrix-container .task-card-item .task-title { font-size:16px; }
 .task-metadata { font-size:13px; }
 .planning-sidebar { grid-template-columns:1fr; gap:4px; }
 .learning-preview summary>span { display:block; margin:4px 0 0; }
 .learning-activities { grid-template-columns:1fr; gap:16px; }
 .learning-activities article { padding:12px 0; border-top:1px solid var(--ai-line); }
 .luyen-app .graph-toolbar-controls { padding:10px 16px; gap:8px; }
 .graph-toolbar-controls .graph-search-container { flex:1; }
 .graph-toolbar-controls .graph-search-container input { width:100%; min-width:50px; }
 .graph-range-group { order:-1; width:100%; }
 .graph-range-group button { flex:1; }
 .graph-options>summary { padding:0 8px; }
 .graph-options>summary span { display:none; }
 .graph-options>div { right:-10px; }
 .graph-zoom-inline { width:100%; justify-content:center; margin:0; border-top:1px solid var(--ai-line); }
 .graph-explanation { padding:10px 16px; }
 #graph-empty-state:not([hidden]) { inset:225px 24px 90px; gap:10px; }
 #graph-empty-state h2 { font-size:21px; }
 #graph-empty-state p { font-size:13px; }
 .luyen-app [role=dialog] { padding:8px; }
 .luyen-app [role=dialog]>div { max-height:calc(100dvh - 16px); }
 .luyen-app .daily-modal>div { padding:16px; }
 .external-change-banner:not([hidden]) { flex-direction:column; align-items:flex-start; padding:10px 16px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }