/* ==========================================================================
   u17 note web — shared override layer. Loaded AFTER ui.bundle.css. (U/draft-css, verified 2026-10-13)
   Rule: every component selector = "html body " + the bundle's own selector,
   so it wins by specificity (+0,0,2) without !important. !important only where
   the bundle itself uses !important on the same property.
   ========================================================================== */

/* 1. TOKENS ---------------------------------------------------------------- */
:root{
  --nw-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", system-ui, sans-serif;
  --nw-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --nw-t-meta: 12px; --nw-t-label: 13px; --nw-t-ui: 14px; --nw-t-row: 15px; --nw-t-body: 16px;
  --nw-t-col: 18px; --nw-t-doc: 28px; --nw-t-start: 28px;
  --nw-s1: 4px; --nw-s2: 8px; --nw-s3: 12px; --nw-s4: 16px; --nw-s5: 20px; --nw-s6: 24px; --nw-s8: 32px; --nw-s10: 40px;
  --nw-header-h: 52px; --nw-statusbar-h: 32px; --nw-sidebar-w: 232px; --nw-list-w: 340px; --nw-doc-max: 720px;
  --nw-start-w: 400px; --nw-tabbar-h: 64px;
  --nw-r-sm: 4px; --nw-r-md: 6px; --nw-r-lg: 8px; --nw-r-xl: 12px;
  --nw-dur-fast: 100ms; --nw-dur: 150ms; --nw-dur-overlay: 180ms; --nw-ease: cubic-bezier(.4,0,.2,1);
}
html body.theme-light{
  --nw-bg: #ffffff; --nw-sidebar: #f3f4f6; --nw-surface-2: #f6f7f9; --nw-line: #e1e3e8; --nw-line-strong: #c9cdd4;
  --nw-text: #1b1d22; --nw-text-2: #474c56; --nw-text-3: #5f6672; --nw-placeholder: #6e7480;
  --nw-danger: #c4282f; --nw-danger-soft: #fbe9ea; --nw-success: #007662; --nw-success-soft: #e6f3f0;
  --nw-warning-text: #8a5a00; --nw-warning-soft: #fff4d6; --nw-mark: #fff0b5;
  --nw-scrim: rgba(17,19,24,.40);
  --nw-shadow-pop: 0 4px 8px rgba(17,19,24,.10), 0 2px 8px rgba(17,19,24,.04);
  --nw-shadow-sheet: 0 -4px 12px rgba(17,19,24,.08);
}
html body.theme-dark{
  --nw-bg: #16181d; --nw-sidebar: #1b1e24; --nw-surface-2: #1e2127; --nw-line: #2c3038; --nw-line-strong: #3b404a;
  --nw-text: #e8eaee; --nw-text-2: #c3c8d1; --nw-text-3: #9aa1ad; --nw-placeholder: #8b929e;
  --nw-danger: #f08a8f; --nw-danger-soft: #3a1f22; --nw-success: #6cc9b4; --nw-success-soft: #18302b;
  --nw-warning-text: #f2c766; --nw-warning-soft: #352c16; --nw-mark: #5a4a12;
  --nw-scrim: rgba(0,0,0,.55);
  --nw-shadow-pop: 0 4px 8px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.20);
  --nw-shadow-sheet: 0 -4px 12px rgba(0,0,0,.35);
}

/* 2. BUNDLE VARIABLES -> TOKENS (same specificity as bundle theme blocks + 0,0,1)
   Accent (--primary-*) is set in the app file; [data-web-accent=sage|violet|rose|sand]
   rules in the bundle (0,2,1) keep winning, so the user's accent choice still works. */
html body.theme-light, html body.theme-dark{
  --font-family: var(--nw-font);
  --header-height: var(--nw-header-h);
  --mobile-tab-bar-height: var(--nw-tabbar-h);
  --sidebar-width: var(--nw-sidebar-w);
  --browser-width: var(--nw-list-w);
  --editor-measure: var(--nw-doc-max);
  --document-padding: max(32px, calc((100% - var(--nw-doc-max)) / 2));
  --background-color: var(--nw-bg);
  --surface-color: var(--nw-bg); --surface-strong: var(--nw-bg); --surface-muted: var(--nw-surface-2); --surface-raised: var(--nw-bg);
  --surface-variant: var(--nw-line); --surface-variant-strong: var(--nw-line-strong);
  --on-surface: var(--nw-text); --on-surface-variant: var(--nw-text-3); --subtle-text: var(--nw-text-3);
  --muted-color: var(--nw-text-3); --muted-text: var(--nw-text-3);
  --outline-color: var(--nw-line-strong);
  --sidebar-surface: var(--nw-sidebar); --browser-surface: var(--nw-bg); --editor-surface: var(--nw-bg);
  --paper-surface: var(--nw-bg); --paper-color: var(--nw-bg); --detail-surface: var(--nw-surface-2);
  --art-surface: var(--nw-surface-2); --hero-halo: var(--nw-surface-2); --secondary-soft: var(--nw-surface-2);
  --hairline: var(--nw-line); --panel-divider: var(--nw-line); --line-color: var(--nw-line); --tree-line-color: var(--nw-line);
  --illustration-border: var(--nw-line);
  --control-surface: var(--nw-bg); --control-surface-soft: var(--nw-surface-2); --control-surface-muted: var(--nw-surface-2);
  --control-border: var(--nw-line-strong); --control-border-soft: var(--nw-line);
  --control-shadow: none; --control-inset: none; --control-highlight: transparent; --toolbar-surface: var(--nw-bg);
  --shell-card: var(--nw-bg); --shell-card-strong: var(--nw-bg); --shell-border: var(--nw-line); --shell-blur: 0px;
  --panel-surface-start: var(--nw-bg); --panel-surface-end: var(--nw-bg);
  --panel-accent-start: var(--nw-bg); --panel-accent-end: var(--nw-bg);
  --panel-shadow: none; --panel-shadow-strong: none;
  --note-surface: transparent; --note-selected: var(--nw-surface-2); --selected-surface: var(--nw-surface-2);
  --card-selected-start: var(--nw-surface-2); --card-selected-end: var(--nw-surface-2);
  --danger-color: var(--nw-danger); --danger-soft: var(--nw-danger-soft); --error-color: var(--nw-danger);
  --success-color: var(--nw-success); --success-soft: var(--nw-success-soft);
  --warning-color: var(--nw-warning-text); --warning-soft: var(--nw-warning-soft);
  --mark-bg: var(--nw-mark);
  --scrim: var(--nw-scrim);
  --shadow-color: transparent;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary-color) 30%, transparent);
  --transition-fast: var(--nw-dur-fast); --transition-normal: var(--nw-dur);
  --border-radius-small: var(--nw-r-md); --border-radius-medium: var(--nw-r-lg); --border-radius-large: var(--nw-r-xl);
  --radius-sm: var(--nw-r-md); --radius-md: var(--nw-r-lg); --radius-lg: var(--nw-r-xl);
}

/* 3. BASE ------------------------------------------------------------------ */
html body{ font-family: var(--nw-font); background: var(--nw-bg); color: var(--nw-text); }
html body :is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,label,button,small,strong,span,a,summary,td,th,figcaption,blockquote){ word-break: keep-all; overflow-wrap: anywhere; }
html body [hidden]{ display: none !important; } /* same safety net the ClipboardNote bundle already has */
html body .sr-only{ font-size: 12px; }
html body :is(button,a,input,select,textarea,summary,[tabindex="0"]):focus-visible{ outline: 2px solid var(--primary-color); outline-offset: 2px; }
html body kbd:not(#nw){ font: 500 12px/1 var(--nw-mono); padding: 2px 5px; min-width: 20px; border: 1px solid var(--nw-line); border-radius: var(--nw-r-sm); background: var(--nw-bg); color: var(--nw-text-3); box-shadow: none; }
html body .material-symbols-outlined{ color: inherit; }
html body .skip-link:focus, html body .skip-link:focus-visible{ background: var(--nw-text); color: var(--nw-bg); border-radius: var(--nw-r-lg); }

/* 3b. 12px floor — every bundle selector that sets text below 12px (generated list; keep before the component rules) */
html body #left-panel .panel-title,
html body #note-sort-select,
html body #sync-panel-toggle-button,
html body .backup-local-callout p,
html body .bc-auto .sync-toggle-description,
html body .bc-kicker,
html body .bc-provider-caption,
html body .bp-caption,
html body .bp-footnote p,
html body .bp-number>span,
html body .bp-step-mark,
html body .browser-count,
html body .bundle-asset-button,
html body .bundle-asset-meta,
html body .bundle-asset-status,
html body .compose-button kbd,
html body .detail-chip-description,
html body .detail-chip-static,
html body .detail-list-meta,
html body .detail-preview-hint,
html body .detail-section-heading,
html body .detail-sidecard-title,
html body .drawer-footnote,
html body .editor-chip,
html body .editor-document-label,
html body .editor-footer,
html body .editor-footer kbd,
html body .editor-lock-action,
html body .editor-path,
html body .editor-statusbar,
html body .empty-editor-hint,
html body .empty-editor-hint kbd,
html body .empty-shortcut,
html body .filter-chip-count,
html body .floating-label,
html body .folder-count,
html body .folder-panel-section .panel-title,
html body .header-search-button,
html body .header-search-button kbd,
html body .history-entry-time,
html body .history-item-time,
html body .landing-footer,
html body .landing-footer .text-button,
html body .language-pill,
html body .link-note-option-copy small,
html body .local-state-label,
html body .markdown-resource-copy small,
html body .markdown-resource-extension,
html body .markdown-resource-media,
html body .mobile-tab-button,
html body .nas-panel .nas-remember>span,
html body .nas-section legend,
html body .nav-count,
html body .note-filter-chip,
html body .note-item-meta,
html body .note-list[data-view-type=GRID] .note-item-snippet,
html body .note-search-summary,
html body .note-sort-shell select,
html body .note-status-chip,
html body .note-tag,
html body .note-tag-filter-chip,
html body .note-tag-filter-label,
html body .note-tool-chip,
html body .note-tool-label,
html body .panel-inline-toggle,
html body .preview-footer>span,
html body .recovery-description,
html body .resource-type-tile,
html body .save-note-button,
html body .search-key,
html body .section-label,
html body .shortcut-list dd,
html body .shortcut-list dd kbd,
html body .shortcut-list kbd,
html body .sidebar-file-button,
html body .sidebar-new-note kbd,
html body .sidebar-profile small,
html body .sidebar-profile strong,
html body .sidebar-shortcuts,
html body .sidebar-shortcuts>kbd,
html body .sidebar-workspace>div>span,
html body .sync-action-button,
html body .sync-alert-description,
html body .sync-overview-description,
html body .sync-status,
html body .sync-toggle-description,
html body .text-button,
html body .toolbar-customizer-hidden-title,
html body .web-badge,
html body .welcome-footer,
html body .welcome-language,
html body .workspace-breadcrumb,
html body .workspace-label,
html body kbd{ font-size: 12px; }

/* 4. START SCREEN ---------------------------------------------------------- */
html body .start-screen{ background: var(--nw-bg); }
html body .start-screen .start-main{ width: min(var(--nw-start-w), calc(100% - 32px)); margin: clamp(32px, 12vh, 120px) auto 56px; }
html body .start-screen .start-intro #welcome-title{ margin: 0 0 var(--nw-s3); font: 700 var(--nw-t-start)/1.3 var(--nw-font); letter-spacing: -0.01em; color: var(--nw-text); text-wrap: balance; }
html body .start-description{ font-size: 15px; line-height: 1.65; color: var(--nw-text-2); }
html body .start-workspace{ margin-top: var(--nw-s6); }
/* one menu box: [recovery] + [new workspace] */
html body .start-new{ display: grid; grid-template-columns: 20px 1fr; align-items: center; justify-content: stretch; gap: var(--nw-s3); width: 100%; min-height: 56px; padding: 12px 16px; border: 1px solid var(--nw-line); border-radius: var(--nw-r-lg); background: var(--nw-bg); color: var(--nw-text); font: 600 15px/1.4 var(--nw-font); text-align: start; transition: background-color var(--nw-dur-fast) var(--nw-ease); }
html body .start-new:hover{ background: var(--primary-soft); }
html body .start-new .material-symbols-outlined{ width: 20px; height: 20px; color: var(--primary-color); }
html body .start-workspace:has(.start-recovery:not(.hidden)) .start-new{ border-top: 0; border-radius: 0 0 var(--nw-r-lg) var(--nw-r-lg); background: var(--nw-bg); color: var(--nw-text); }
html body .start-workspace:has(.start-recovery:not(.hidden)) .start-new:hover{ background: var(--primary-soft); }
html body .start-recovery{ margin: 0; padding: 16px 16px 16px 14px; border: 1px solid var(--nw-line); border-left: 2px solid var(--primary-color); border-radius: var(--nw-r-lg) var(--nw-r-lg) 0 0; background: var(--nw-surface-2); }
html body .start-recovery-heading{ gap: var(--nw-s2); }
html body .start-recovery-heading>.material-symbols-outlined{ width: 18px; height: 18px; color: var(--primary-color); }
html body .start-recovery .recovery-title{ font: 600 15px/1.4 var(--nw-font); color: var(--nw-text); }
html body .start-recovery .recovery-description{ margin: 4px 0 0 26px; font-size: 13px; line-height: 1.6; color: var(--nw-text-3); }
html body .start-recovery .recovery-warning{ margin: 8px 0 0 26px; padding: 8px 10px; border-radius: var(--nw-r-md); background: var(--nw-warning-soft); color: var(--nw-warning-text); font-size: 13px; line-height: 1.6; }
html body .start-recovery-actions{ margin: 12px 0 0 26px; gap: var(--nw-s3); align-items: center; }
html body .start-resume{ min-height: 40px; padding: 0 16px; gap: 8px; border-radius: var(--nw-r-md); font: 600 14px/1 var(--nw-font); background: var(--primary-color); color: var(--on-primary); }
html body .start-resume:hover{ background: var(--primary-strong); }
html body .start-discard{ min-height: 40px; padding: 0 8px; border: 0; background: transparent; color: var(--nw-text-3); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
html body .start-discard:hover{ color: var(--nw-danger); background: transparent; }
html body :is(.start-resume,.start-discard,.start-new,.start-settings-link,.dialog-button), html body .start-source-copy strong{ white-space: nowrap; }
html body .start-local-notice{ margin: var(--nw-s2) 0 0; gap: 6px; font-size: 13px; line-height: 1.6; color: var(--nw-text-3); }
html body .start-local-notice>.material-symbols-outlined{ width: 16px; height: 16px; margin-top: 2px; }
html body .start-backups{ margin-top: var(--nw-s8); padding-top: 0; border-top: 0; }
html body .start-backups h2{ margin: 0 0 var(--nw-s2); font: 600 13px/1.5 var(--nw-font); letter-spacing: 0; text-transform: none; color: var(--nw-text-3); }
html body .start-source-grid{ display: flex; flex-direction: column; gap: 0; border: 1px solid var(--nw-line); border-radius: var(--nw-r-lg); overflow: hidden; background: var(--nw-bg); }
html body .start-source-button{ display: grid; grid-template-columns: 20px minmax(0,1fr) 18px; align-items: center; gap: var(--nw-s3); min-height: 56px; padding: 10px 16px; border: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: start; transform: none; transition: background-color var(--nw-dur-fast) var(--nw-ease); }
html body .start-source-button + .start-source-button{ border-top: 1px solid var(--nw-line); }
html body .start-source-button:hover{ background: var(--primary-soft); transform: none; box-shadow: none; border-color: var(--nw-line); }
html body .start-source-button .start-source-icon{ width: 20px; height: 20px; margin: 0; color: var(--nw-text-3); }
html body .start-source-copy{ gap: 2px; }
html body .start-source-copy strong{ font: 600 15px/1.4 var(--nw-font); color: var(--nw-text); }
html body .start-source-copy>span{ font-size: 13px; line-height: 1.5; color: var(--nw-text-3); }
html body .start-source-button .start-source-arrow{ position: static; width: 18px; height: 18px; color: var(--nw-text-3); opacity: 1; transform: none; }
html body .start-source-button:hover .start-source-arrow{ color: var(--primary-color); }
html body .start-connection-help{ margin-top: var(--nw-s3); display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
html body .start-settings-link{ min-height: 44px; margin: 0; padding: 0; gap: 6px; border: 0; background: transparent; color: var(--primary-color); font: 600 14px/1 var(--nw-font); }
html body .start-settings-link:hover{ text-decoration: underline; text-underline-offset: 3px; background: transparent; }
html body .start-settings-link .material-symbols-outlined{ width: 16px; height: 16px; }
html body .start-connection-help p{ margin: 0; font-size: 13px; line-height: 1.6; color: var(--nw-text-3); }
html body .start-drop-hint{ margin-top: var(--nw-s4); font-size: 13px; line-height: 1.6; color: var(--nw-text-3); }

html body .web-badge{ display: inline-flex; align-items: center; margin-inline-start: -4px; padding: 2px 6px; border: 1px solid var(--nw-line-strong); border-radius: var(--nw-r-sm); color: var(--nw-text-3); font: 600 12px/1.2 var(--nw-font); letter-spacing: 0; }
/* EN labels that the bundle ships in UPPERCASE -> sentence case (proper fix = en.json, see SPEC later list) */
html[lang="en"] body :is(.sidebar-views .section-label, .resource-section-label, .bc-kicker, [data-link-text="eyebrow"]){ text-transform: lowercase; }
html[lang="en"] body :is(.sidebar-views .section-label, .resource-section-label, .bc-kicker, [data-link-text="eyebrow"])::first-letter{ text-transform: uppercase; }
/* studio line (index.html adds .ys-studio inside the start footer) */
html:not([lang^="ko"]) body .ys-ko{ display: none !important; }
html[lang^="ko"] body .ys-en{ display: none !important; }
html body :is(.welcome-language, .language-pill){ white-space: nowrap; flex-shrink: 0; }
html body .ys-studio{ width: 100%; border-top: 1px solid var(--nw-line); color: var(--nw-text-3); font-size: 13px; line-height: 1.5; }
html body .ys-studio__in{ width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; padding: 8px 0 16px; }
html body .ys-studio a{ display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; color: inherit; text-decoration: none; }
html body .ys-studio a:hover{ color: var(--nw-text); text-decoration: underline; text-underline-offset: 3px; }
html body .ys-studio__mark{ font-weight: 700; color: var(--nw-text) !important; margin-right: auto; }
html body .ys-studio__copy{ width: 100%; }
@media (min-width: 600px){ html body .ys-studio__copy{ width: auto; margin-left: auto; } }

/* 5. WORKSPACE: header ----------------------------------------------------- */
html body .app-header{ height: var(--nw-header-h); min-height: var(--nw-header-h); padding: 0 16px; background: var(--nw-bg); border-bottom: 1px solid var(--nw-line); box-shadow: none; backdrop-filter: none; }
html body .header-left, html body .header-right{ gap: 4px; }
html body .workspace-breadcrumb{ gap: 6px; font-size: 14px; color: var(--nw-text-3); }
html body .workspace-breadcrumb strong{ font-weight: 600; color: var(--nw-text); }
@media (min-width: 761px){
  html body .header-search-button{ min-height: 32px; min-width: 0; padding: 0 8px 0 10px; gap: 8px; border: 1px solid var(--nw-line); border-radius: var(--nw-r-md); background: var(--nw-surface-2); color: var(--nw-text-3); font-size: 13px; box-shadow: none; }
  html body .header-search-button:hover{ border-color: var(--nw-line-strong); color: var(--nw-text); }
}
@media (min-width: 1181px){ html body .header-search-button{ min-width: 220px; } }
@media (min-width: 761px) and (max-width: 1180px){
  html body.theme-light, html body.theme-dark{ --browser-width: 310px; }
}
@media (max-width: 760px){
  html body .header-search-button{ width: 44px; min-width: 44px; height: 44px; padding: 0; justify-content: center; border: 0; background: transparent; color: var(--nw-text-3); }
}
html body .header-divider{ height: 20px; margin: 0 8px; background: var(--nw-line); }
html body .sync-status{ padding: 0 8px; min-height: 28px; gap: 6px; border-radius: var(--nw-r-md); background: transparent; color: var(--nw-text-3); font-size: 13px; }
html body .sync-status .material-symbols-outlined{ color: var(--nw-success); }
html body .icon-button{ width: 32px; height: 32px; min-width: 32px; border-radius: var(--nw-r-md); color: var(--nw-text-3); background: transparent; border-color: transparent; box-shadow: none; }
html body .icon-button:hover:not(:disabled), html body .icon-button.subtle:hover{ background: var(--nw-surface-2); color: var(--nw-text); }
html body .icon-button[aria-pressed=true]{ background: var(--primary-soft); color: var(--primary-color); }
html body .icon-button.danger:hover{ background: var(--nw-danger-soft); color: var(--nw-danger); }
html body .workspace-glance-bar{ display: none; }

/* 6. WORKSPACE: sidebar ---------------------------------------------------- */
html body #left-panel{ background: var(--nw-sidebar); border: 0; border-right: 1px solid var(--nw-line); border-radius: 0; box-shadow: none; }
html body :is(.sidebar-new-note, .compose-button){ min-height: 36px; padding: 0 12px; gap: 8px; border-radius: var(--nw-r-md); font: 600 14px/1 var(--nw-font); box-shadow: none; }
html body :is(.sidebar-new-note, .compose-button) kbd{ margin-left: auto; background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 35%, transparent); }
html body :is(.workspace-nav-item, .sidebar-views .note-filter-chip){ min-height: 32px; padding: 0 12px; gap: 10px; border: 0; border-radius: var(--nw-r-md); background: transparent; color: var(--nw-text-2); font: 500 14px/1.4 var(--nw-font); box-shadow: none; }
html body :is(.workspace-nav-item, .sidebar-views .note-filter-chip) .material-symbols-outlined{ width: 18px; height: 18px; color: var(--nw-text-3); }
html body :is(.workspace-nav-item, .sidebar-views .note-filter-chip):hover{ background: color-mix(in srgb, var(--nw-text) 6%, transparent); color: var(--nw-text); }
html body :is(.workspace-nav-item.active, .sidebar-views .note-filter-chip.active){ background: var(--nw-bg); color: var(--nw-text); font-weight: 600; box-shadow: inset 0 0 0 1px var(--nw-line); }
html body :is(.workspace-nav-item.active, .sidebar-views .note-filter-chip.active) .material-symbols-outlined{ color: var(--primary-color); }
html body :is(.nav-count, .filter-chip-count, .folder-count){ margin-left: auto; min-width: 0; padding: 0; background: transparent; color: var(--nw-text-3); font: 500 12px/1 var(--nw-font); font-variant-numeric: tabular-nums; }
html body :is(.workspace-nav-item.active .nav-count, .note-filter-chip.active .filter-chip-count){ background: transparent; color: var(--nw-text-2); }
html body #left-panel .panel-title, html body .sidebar-views .section-label{ font: 600 13px/1.5 var(--nw-font); letter-spacing: 0; text-transform: none; color: var(--nw-text-3); }
html body .folder-content{ min-height: 32px; border-radius: var(--nw-r-md); font-size: 14px; color: var(--nw-text-2); background: transparent; border-color: transparent; box-shadow: none; }
html body .folder-content:hover{ background: color-mix(in srgb, var(--nw-text) 6%, transparent); }
html body .folder-item.selected>.folder-content{ background: var(--nw-bg); color: var(--nw-text); font-weight: 600; box-shadow: inset 0 0 0 1px var(--nw-line); border-color: transparent; }
html body .folder-item.selected>.folder-content .material-symbols-outlined{ color: var(--primary-color); }
html body .sidebar-utility{ gap: 8px; padding-inline: 8px; white-space: nowrap; min-height: 36px; border-radius: var(--nw-r-md); font-size: 14px; color: var(--nw-text-2); background: transparent; border-color: transparent; box-shadow: none; }
html body .sidebar-utility:hover{ background: color-mix(in srgb, var(--nw-text) 6%, transparent); color: var(--nw-text); }
html body .sidebar-workspace .workspace-avatar, html body .profile-avatar{ background: var(--nw-bg); color: var(--nw-text-3); border: 1px solid var(--nw-line); box-shadow: none; }
html body .trash-entry{ color: var(--nw-text-2); }

/* 7. WORKSPACE: note list -------------------------------------------------- */
html body #note-browser-panel{ background: var(--nw-bg); border: 0; border-right: 1px solid var(--nw-line); border-radius: 0; box-shadow: none; }
html body #note-browser-panel .panel-title, html body #browser-context-title{ font: 600 var(--nw-t-col)/1.4 var(--nw-font); letter-spacing: -0.01em; color: var(--nw-text); }
html body .note-search-shell{ min-height: 36px; border: 1px solid transparent; border-radius: var(--nw-r-md); background: var(--nw-surface-2); box-shadow: none; }
html body .note-search-shell:focus-within{ border-color: var(--primary-color); box-shadow: var(--focus-ring); background: var(--nw-bg); }
html body #note-search-input{ font-size: 14px; color: var(--nw-text); background: transparent; }
html body #note-search-input::placeholder{ color: var(--nw-placeholder); opacity: 1; }
html body #note-list-container{ padding: 0 0 24px; }
/* LIST / DETAIL view = rows. GRID / LARGE_GRID keep the bundle's cards (tokens only). */
html body #note-list:not([data-view-type=GRID]):not([data-view-type=LARGE_GRID]) .note-item{ margin: 0; padding: 12px 16px 12px 14px; gap: 4px; border: 0; border-left: 2px solid transparent; border-radius: 0 !important; background: transparent; box-shadow: none !important; transition: background-color var(--nw-dur-fast) var(--nw-ease); }
html body #note-list:not([data-view-type=GRID]):not([data-view-type=LARGE_GRID]) .note-item::after{ content: ""; display: block; position: absolute; left: 16px; right: 0; bottom: 0; height: 1px; background: var(--nw-line); }
html body #note-list:not([data-view-type=GRID]):not([data-view-type=LARGE_GRID]) .note-item::before{ content: none; }
html body #note-list:not([data-view-type=GRID]):not([data-view-type=LARGE_GRID]) .note-item:hover{ background: var(--nw-surface-2); border-color: transparent; border-left-color: transparent; }
html body #note-list:not([data-view-type=GRID]):not([data-view-type=LARGE_GRID]) .note-item.selected{ background: var(--nw-surface-2) !important; border: 0; border-left: 2px solid var(--primary-color); }
html body #note-list .note-item.selected::before{ content: none; }
html body #note-list :is([data-view-type=GRID],[data-view-type=LARGE_GRID]) .note-item, html body #note-list:is([data-view-type=GRID],[data-view-type=LARGE_GRID]) .note-item{ border: 1px solid var(--nw-line); border-radius: var(--nw-r-lg) !important; box-shadow: none !important; }
html body #note-list:is([data-view-type=GRID],[data-view-type=LARGE_GRID]) .note-item.selected{ border-color: var(--primary-color); background: var(--nw-surface-2) !important; }
html body .note-item:focus-visible{ outline: 2px solid var(--primary-color); outline-offset: -2px; }
html body .note-selected-indicator{ display: none; }
html body .note-item-title{ font: 600 15px/1.4 var(--nw-font); letter-spacing: -0.005em; color: var(--nw-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .note-item-snippet{ font-size: 13px; line-height: 1.55; color: var(--nw-text-2); -webkit-line-clamp: 2; }
html body .note-item-meta{ font-size: 12px; color: var(--nw-text-3); }
html body .note-tag{ padding: 0; border: 0; background: transparent; color: var(--nw-text-3); font-size: 12px; }
html body .note-status-chip{ padding: 0 2px; border: 0; background: transparent; color: var(--nw-text-3); font-size: 12px; }
html body .note-status-chip-pinned{ color: var(--primary-color); }
html body .note-status-chip-pinned>span:not(.material-symbols-outlined){ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html body .note-status-chip .material-symbols-outlined{ width: 14px; height: 14px; min-width: 14px; }

/* 8. WORKSPACE: editor ----------------------------------------------------- */
html body #editor-container{ background: var(--nw-bg); border: 0; border-radius: 0; box-shadow: none; }
html body .editor-command-bar{ min-height: 48px; border-bottom: 1px solid var(--nw-line); background: var(--nw-bg); }
html body .editor-document-label{ font-size: 13px; color: var(--nw-text-3); }
html body .save-note-button{ min-height: 32px; padding: 0 8px; gap: 6px; border: 0; border-radius: var(--nw-r-md); background: transparent; color: var(--nw-text-3); font-size: 13px; box-shadow: none; }
html body .save-note-button[data-state=saved] .material-symbols-outlined{ color: var(--nw-success); }
html body .save-note-button[data-state=unsaved], html body .save-note-button:not(:disabled){ color: var(--nw-text); background: var(--nw-surface-2); }
html body .toolbar-separator{ background: var(--nw-line); }
html body #note-title-input{ font: 700 var(--nw-t-doc)/1.3 var(--nw-font); letter-spacing: -0.015em; color: var(--nw-text); background: transparent; border: 0; box-shadow: none; }
html body #note-title-input::placeholder{ color: var(--nw-placeholder); opacity: 1; }
html body .editor-note-meta{ border-bottom: 0; }
html body .editor-chip{ padding: 0; gap: 4px; border: 0; background: transparent; color: var(--nw-text-3); font-size: 13px; box-shadow: none; }
@media (min-width: 761px){
  html body #app-container{ --doc-max: calc(var(--nw-doc-max) + 2 * var(--doc-x, 32px)); }
  html body .markdown-view-switch{ align-self: flex-start; margin: 8px 0 0 max(var(--doc-x, 32px), calc((100% - var(--nw-doc-max)) / 2)); }
}
html body .markdown-view-switch{ display: inline-flex; width: fit-content; max-width: calc(100% - 24px); gap: 2px; padding: 2px; border: 1px solid var(--nw-line); border-radius: var(--nw-r-lg); background: var(--nw-surface-2); box-shadow: none; }
html body .markdown-view-button{ min-height: 30px; padding: 0 10px; gap: 6px; border: 0; border-radius: var(--nw-r-md); background: transparent; color: var(--nw-text-3); font: 500 14px/1 var(--nw-font); box-shadow: none; }
html body .markdown-view-button:hover{ background: transparent; color: var(--nw-text); }
html body :is(.markdown-view-button.active, .markdown-view-button[aria-pressed=true]){ background: var(--nw-bg); color: var(--nw-text); font-weight: 600; box-shadow: 0 1px 2px rgba(17,19,24,.08), inset 0 0 0 1px var(--nw-line); }
html body :is(.markdown-view-button.active, .markdown-view-button[aria-pressed=true]) .material-symbols-outlined{ color: var(--primary-color); }
html body .formatting-toolbar{ min-height: 40px; gap: 2px; padding: 4px; border: 1px solid var(--nw-line); border-radius: var(--nw-r-lg); background: var(--nw-bg); box-shadow: none; }
html body .formatting-action{ width: 32px; height: 32px; min-width: 32px; border-radius: var(--nw-r-md); color: var(--nw-text-3); background: transparent; border: 0; box-shadow: none; }
html body .formatting-action:hover:not(:disabled){ background: var(--nw-surface-2); color: var(--nw-text); }
html body .formatting-separator, html body .formatting-preference-separator{ background: var(--nw-line); }
html body #note-content-textarea{ font-size: var(--nw-t-body); line-height: 1.75; color: var(--nw-text); background: transparent; }
html body #note-content-textarea::placeholder{ color: var(--nw-placeholder); opacity: 1; }
html body .markdown-preview{ font-size: var(--nw-t-body); line-height: 1.75; color: var(--nw-text); }
html body .markdown-preview :is(h1,h2,h3){ letter-spacing: -0.01em; line-height: 1.35; color: var(--nw-text); }
html body .markdown-preview blockquote{ border-left: 2px solid var(--nw-line-strong); color: var(--nw-text-2); background: transparent; }
html body .markdown-preview :is(code){ font-family: var(--nw-mono); background: var(--nw-surface-2); border-radius: var(--nw-r-sm); }
html body .markdown-preview table{ border-color: var(--nw-line); }
html body .markdown-preview :is(th,td){ border-color: var(--nw-line); }
html body .markdown-preview a, html body [data-wiki-link-title]{ color: var(--primary-color); text-decoration: none; }
html body .markdown-preview a:hover, html body [data-wiki-link-title]:hover{ text-decoration: underline; text-underline-offset: 3px; }
html body .editor-lock-banner, html body #editor-lock-banner{ border: 1px solid var(--nw-line); border-radius: var(--nw-r-md); background: var(--nw-surface-2); box-shadow: none; }
/* resources dock (attachments / linked notes) */
html body .resource-dock, html body .resource-surface{ background: var(--nw-bg); border-color: var(--nw-line); border-radius: 0; box-shadow: none; }
html body .resource-header{ min-height: 44px; border-top: 1px solid var(--nw-line); background: var(--nw-bg); }
html body :is(.resource-tab,.resource-add,.resource-toggle){ min-height: 32px; padding: 0 10px; border: 0; border-radius: var(--nw-r-md); background: transparent; color: var(--nw-text-3); font: 600 13px/1 var(--nw-font); box-shadow: none; }
html body .resource-tab[aria-selected=true]{ background: var(--nw-surface-2); color: var(--nw-text); }
html body :is(.resource-tab,.resource-add,.resource-toggle):hover{ background: var(--nw-surface-2); color: var(--nw-text); }
html body .resource-add{ color: var(--primary-color); }
html body .resource-count{ min-width: 18px; padding: 0 5px; border: 0; border-radius: 9px; background: var(--nw-line); color: var(--nw-text-2); font: 600 12px/18px var(--nw-font); }
html body .resource-section-label{ font: 600 13px/1.5 var(--nw-font); letter-spacing: 0; text-transform: none; color: var(--nw-text-3); }
html body .resource-file-row{ border-radius: var(--nw-r-md); }
html body .resource-file-row:hover{ background: var(--nw-surface-2); }
html body .resource-type-tile{ border-radius: var(--nw-r-md); background: var(--nw-surface-2); color: var(--nw-text-3); border: 1px solid var(--nw-line); font-size: 12px; }
html body .resource-linked-note{ border-radius: var(--nw-r-md); color: var(--primary-color); }
/* status bar */
html body :is(.editor-footer, .editor-statusbar){ min-height: var(--nw-statusbar-h); padding: 0 16px; border-top: 1px solid var(--nw-line); background: var(--nw-surface-2); color: var(--nw-text-3); font-size: 12px; }
html body :is(.editor-footer, .editor-statusbar) kbd{ font-size: 12px; padding: 1px 4px; }
/* empty editor */
html body #editor-empty-state h2{ font: 600 18px/1.4 var(--nw-font); color: var(--nw-text); letter-spacing: -0.01em; }
html body #editor-empty-state p{ font-size: 14px; line-height: 1.6; color: var(--nw-text-3); }

/* 9. BUTTONS shared --------------------------------------------------------- */
html body :is(.primary-button, .button-primary){ min-height: 36px; padding: 0 14px; gap: 8px; border: 1px solid var(--primary-color); border-radius: var(--nw-r-md); background: var(--primary-color); color: var(--on-primary); font: 600 14px/1 var(--nw-font); box-shadow: none; }
html body :is(.primary-button, .button-primary):hover:not(:disabled){ background: var(--primary-strong); border-color: var(--primary-strong); }
html body .dialog-button{ min-height: 36px; min-width: 72px; padding: 0 14px; border-radius: var(--nw-r-md); font: 600 14px/1 var(--nw-font); box-shadow: none; filter: none; }
html body .dialog-button.primary{ background: var(--primary-color); color: var(--on-primary); border-color: var(--primary-color); }
html body .dialog-button.primary:hover{ background: var(--primary-strong); }
html body .dialog-button.secondary{ background: var(--nw-bg); color: var(--nw-text); border-color: var(--nw-line-strong); }
html body .dialog-button.secondary:hover{ background: var(--nw-surface-2); }
html body .dialog-button.danger{ background: var(--nw-danger); border-color: var(--nw-danger); color: #fff; }
html body.theme-dark .dialog-button.danger{ color: #16181d; }

/* 10. DIALOGS --------------------------------------------------------------- */
html body .dialog-overlay{ background: var(--nw-scrim); backdrop-filter: none; -webkit-backdrop-filter: none; }
html body dialog[open]::backdrop{ background: var(--nw-scrim); backdrop-filter: none; }
html body .dialog-content{ width: min(100%, 520px); padding: 24px; border: 1px solid var(--nw-line); border-radius: var(--nw-r-xl); background: var(--nw-bg); box-shadow: var(--nw-shadow-pop); }
html body .web-settings-dialog{ border-radius: var(--nw-r-xl) !important; }
html body :is(.attachment-dialog, .web-settings-dialog, .link-editor-dialog, .attachment-preview-dialog, .backup-progress-dialog, dialog.trash-dialog, .drawer-content), html body #backup-modal .bc-shell, html body #nas-settings-modal .nas-settings-form, html body #sync-center-modal .bc-shell{ border-radius: var(--nw-r-xl); box-shadow: var(--nw-shadow-pop); }
/* import/export progress: smaller number, 4px bar */
html body .bp-number strong{ font-size: 28px; font-weight: 700; letter-spacing: -0.01em; }
html body .bp-number strong span{ font-size: 14px; letter-spacing: 0; }
html body .bp-track, html body #bp-bar{ height: 4px; border-radius: 2px; }
html body #bp-bar::-webkit-progress-value{ border-radius: 2px; }
html body #bp-bar::-moz-progress-bar{ border-radius: 2px; }
html body .dialog-content h2, html body .dialog-content h3{ font: 600 18px/1.4 var(--nw-font); letter-spacing: -0.01em; margin-bottom: 8px; color: var(--nw-text); }
html body .dialog-content>p, html body .dialog-intro{ font-size: 14px; line-height: 1.6; color: var(--nw-text-2); }
html body .dialog-symbol{ width: 36px; height: 36px; border-radius: var(--nw-r-lg); margin-bottom: 12px; }
html body :is(.dialog-input,.dialog-select,.dialog-content input:not([type=checkbox]):not([type=color]):not([type=radio]),.detail-input,.dialog-content select){ min-height: 40px; font-size: 14px; border: 1px solid var(--nw-line-strong); border-radius: var(--nw-r-md); background: var(--nw-bg); color: var(--nw-text); }
html body :is(.dialog-input,.dialog-select,.dialog-content input,.detail-input,.dialog-content select):focus-visible{ border-color: var(--primary-color); box-shadow: var(--focus-ring); outline: none; }
html body .dialog-buttons{ margin-top: 24px; gap: 8px; }
html body :is(.field-label, .detail-label){ font-size: 13px; font-weight: 600; color: var(--nw-text-2); letter-spacing: 0; text-transform: none; }

/* 11. TOAST ----------------------------------------------------------------- */
html body .toast-card{ border: 0; border-radius: var(--nw-r-lg); background: var(--nw-text); color: var(--nw-bg); box-shadow: var(--nw-shadow-pop); padding: 10px 12px 10px 14px; }
html body .toast-message{ font-size: 14px; line-height: 1.5; color: var(--nw-bg); }
html body .toast-card .material-symbols-outlined{ color: var(--nw-bg); }
html body .toast-card[data-tone] #toast-icon{ color: var(--nw-bg); }
html body .toast-action{ color: var(--nw-bg); text-decoration: underline; text-underline-offset: 3px; background: transparent; font-weight: 600; }
html body #toast-dismiss-button{ color: var(--nw-bg); }

/* 12. MOBILE (<= 760px, the bundle's breakpoint) ------------------------------ */
@media (max-width: 760px){
  html body :is(.welcome-language,.language-pill)>.material-symbols-outlined{ display: none; }
  html body .start-screen .start-main{ width: calc(100% - 32px); margin: 24px auto 40px; }
  html body .start-screen .start-intro #welcome-title{ font-size: 24px; line-height: 1.35; }
  html body .start-source-button, html body .start-new{ min-height: 64px; }
  html body .app-header{ padding: 0 8px; }
  html body :is(.app-header .header-left, .app-header .header-right, .app-header .dropdown, .toolbar-actions, .panel-header, .welcome-nav-actions, .landing-header-right) .icon-button{ width: 44px; height: 44px; min-width: 44px; }
  html body :is(.resource-sheet, .dialog-content, .backup-progress-dialog, dialog.trash-dialog, .drawer-content){ border-radius: var(--nw-r-xl) var(--nw-r-xl) 0 0; }
  html body .web-settings-dialog{ border-radius: var(--nw-r-xl) var(--nw-r-xl) 0 0 !important; }
  html body .formatting-action{ width: 44px; height: 44px; min-width: 44px; }
  html body #note-search-input{ font-size: 16px; }
  html body .note-search-shell{ min-height: 44px; }
  html body :is(.workspace-nav-item, .sidebar-views .note-filter-chip, .folder-content, .sidebar-utility){ min-height: 44px; }
  html body .note-item{ min-height: 72px; }
  html body #note-title-input{ font-size: 24px; }
  html body .mobile-tab-bar{ height: calc(var(--nw-tabbar-h) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--nw-line); background: var(--nw-bg); box-shadow: none; backdrop-filter: none; }
  html body .mobile-tab-button{ gap: 2px; border-radius: 0; background: transparent; color: var(--nw-text-3); font: 500 12px/1.2 var(--nw-font); box-shadow: none; }
  html body .mobile-tab-button span:last-child{ font-size: 12px; font-weight: inherit; }
  html body .mobile-tab-button.active{ background: transparent; color: var(--primary-color); font-weight: 600; }
  html body .mobile-tab-button .material-symbols-outlined{ width: 56px; height: 32px; padding: 4px 16px; border-radius: 16px; }
  html body .mobile-tab-button.active .material-symbols-outlined{ background: var(--primary-soft); }
  html body .dialog-overlay{ align-items: flex-end; padding: 0; }
  html body .dialog-content{ width: 100%; max-height: calc(100dvh - 24px); border-radius: var(--nw-r-xl) var(--nw-r-xl) 0 0; border-bottom: 0; padding: 20px 16px calc(16px + env(safe-area-inset-bottom, 0px)); box-shadow: var(--nw-shadow-sheet); }
  html body .dialog-buttons .dialog-button{ min-height: 44px; flex: 1; }
  html body .toast-region{ bottom: calc(var(--nw-tabbar-h) + 12px + env(safe-area-inset-bottom, 0px)); }
}

/* 13. MOTION / CONTRAST ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  html body *, html body *::before, html body *::after{ transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
@media (forced-colors: active){
  html body #note-list:not([data-view-type=GRID]):not([data-view-type=LARGE_GRID]) .note-item.selected{ border-left-color: Highlight; }
}

/* Round 2: sample entry and browser experiences (identical in both apps). */
html body .start-workspace:has(.nw-sample-entry) .start-new{border-radius:8px 8px 0 0}
html body .start-workspace:has(.nw-sample-entry):has(.start-recovery:not(.hidden)) .start-new{border-radius:0}
html body .nw-sample-entry{display:grid;grid-template-columns:20px 1fr 18px;align-items:center;gap:12px;width:100%;min-height:56px;padding:12px 16px;border:1px solid var(--nw-line);border-top:0;border-radius:0 0 8px 8px;background:var(--nw-bg);color:var(--nw-text);font:600 15px/1.4 var(--nw-font);text-align:start}
html body #landing-demo-button.nw-sample-entry{display:grid!important}
html body .nw-sample-entry[data-nw-pending],html body .nw-sample-note[data-nw-pending]{visibility:hidden;pointer-events:none}
html body .nw-sample-entry:hover{background:var(--primary-soft)}
html body .nw-sample-entry::before,html body .nw-sample-entry::after{content:'';display:block;width:20px;height:20px;background:var(--nw-text-3);mask:var(--nw-book) center/contain no-repeat}
html body .nw-sample-entry{--nw-book:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6c-3-2-6-2-10-1v15c4-1 7-1 10 1 3-2 6-2 10-1V5c-4-1-7-1-10 1Zm0 0v15'/%3E%3C/svg%3E")}
html body .nw-sample-entry::after{width:18px;height:18px;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16m-6-6 6 6-6 6'/%3E%3C/svg%3E")}
html body .nw-sample-note{margin:8px 0 0;font:13px/1.6 var(--nw-font);color:var(--nw-text-3)}
html body .nw-sample-entry:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}
html body .ys-web{width:100%;color:var(--nw-text-3);font-size:13px;line-height:1.5}
html body .ys-web__in{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;width:100%}
html body .ys-web__h{font-weight:600}
html body .ys-web :is(a,[aria-current=page]){display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:none}
html body .ys-web a:hover{color:var(--nw-text);text-decoration:underline;text-underline-offset:3px}
html body .ys-web a:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}
@media(max-width:760px){html body .nw-sample-entry{min-height:64px}}

/* ClipboardNote accent + app-specific DOM */
html body.theme-light{ --primary-color: #0d65d9; --primary-strong: #0a52b3; --primary-soft: #e7f0fc; --on-primary: #ffffff; }
html body.theme-dark{ --primary-color: #8ab8ff; --primary-strong: #b0cfff; --primary-soft: #1d2c45; --on-primary: #16181d; }
html body .calm-swatch{ background: #0d65d9; }
/* start header + footer */
html body #landing-page.start-screen{ padding-inline: 0; }
html body .start-screen .landing-wrap .start-main{ width: min(var(--nw-start-w), 100%); }
html body .landing-wrap{ max-width: none; width: min(1200px, calc(100% - 48px)); }
html body .landing-header{ height: 56px; min-height: 56px; border-bottom: 0; }
html body .brand{ gap: 10px; }
html body .brand-mark{ width: 32px; height: 32px; border-radius: var(--nw-r-lg); background: #fff; color: #111418; box-shadow: 0 0 0 1px var(--nw-line); }
html body .brand-mark .material-symbols-outlined{ width: 22px; height: 22px; }
html body .brand-wordmark, html body .landing-header .brand-wordmark{ font: 700 18px/1 var(--nw-font); letter-spacing: -0.01em; color: var(--nw-text); }
html body .brand-wordmark-light{ font-weight: 700; }
html body .landing-header-right{ gap: 4px; }
html body .landing-header-right .icon-button{ width: 44px; height: 44px; min-width: 44px; }
html body .language-pill{ height: 44px; padding: 0 12px; gap: 6px; border: 1px solid var(--nw-line); border-radius: var(--nw-r-md); color: var(--nw-text-2); font-size: 13px; }
html body :is(.welcome-footer, .landing-footer) .nw-about-link{ display: inline-flex; align-items: center; min-height: 44px; color: var(--primary-color); font-weight: 600; text-decoration: none; }
html body :is(.welcome-footer, .landing-footer) .nw-about-link:hover{ text-decoration: underline; text-underline-offset: 3px; }
html body .landing-footer{ flex-wrap: wrap; justify-content: flex-start; gap: 0 24px; padding: 16px 0 0; border-top: 1px solid var(--nw-line); color: var(--nw-text-3); font-size: 13px; }
html body .landing-footer .text-button{ min-height: 44px; font-size: 13px; color: var(--nw-text-3); }
html body .landing-footer .text-button:hover{ color: var(--nw-text); text-decoration: underline; text-underline-offset: 3px; }
html body .landing-footer .ys-studio{ margin-top: 8px; }
/* workspace header brand + connection pill */
html body .app-brand .brand-mark{ width: 28px; height: 28px; }
html body .app-brand .brand-wordmark{ font-size: 16px; }
html body .workspace-connection{ min-height: 32px; padding: 0 10px; gap: 6px; border: 1px solid var(--nw-line); border-radius: var(--nw-r-md); background: transparent; color: var(--nw-text-3); font-size: 13px; }
html body .workspace-connection[data-connection-state=connected]{ color: var(--primary-color); }
html body .workspace-connection[data-connection-state=connected] .connection-dot{ background: var(--nw-success); }
html body .connection-dot{ background: var(--nw-line-strong); }
/* sidebar */
html body .sidebar-workspace{ margin-bottom: 12px; padding: 4px; }
html body .sidebar-workspace strong{ font-size: 14px; font-weight: 600; color: var(--nw-text); }
html body .workspace-avatar{ width: 28px; height: 28px; border-radius: var(--nw-r-md); color: var(--nw-text-3); }
@media (max-width: 760px){
  html body .landing-wrap{ width: calc(100% - 32px); }
  html body .start-screen .landing-wrap .start-main{ width: 100%; }
  html body .landing-header{ height: 56px; min-height: 56px; }
  html body .landing-header{ gap: 6px; }
  html body .landing-header .brand-mark{ width: 32px; height: 32px; }
  html body .landing-header .brand-wordmark{ font-size: 18px; }
  html body .landing-header .brand{ gap: 6px; }
  html body .landing-header .web-badge{ margin-inline-start: 0; }
  html body .landing-header-right .icon-button{ width: 44px; height: 44px; min-width: 44px; }
  html body .language-pill{ border: 1px solid var(--nw-line); padding: 0 12px; font-size: 13px; }
  html body .app-header .header-left{ flex: 1; overflow: hidden; }
  html body .app-header .header-right{ flex-shrink: 0; }
  html body .app-header .app-brand{ width: 100%; max-width: 100%; min-width: 0; }
  html body .app-header .app-brand .brand-mark{ flex-shrink: 0; }
  html body .app-header .app-brand .brand-wordmark{ display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html body .landing-footer>span:nth-child(2){ display: inline; }
}
html body .landing-header .brand{ min-height: 44px; }