:root[data-ui-density="desktop"]{--control:30px;--compact-control:28px;--inkdos-frame-gap:3px;--inkdos-frame-pad:4px}
:root[data-ui-density="mobile"]{--control:42px;--compact-control:38px;--inkdos-frame-gap:7px;--inkdos-frame-pad:8px}

:root[data-ui-density="desktop"] .topbar{min-height:44px;height:44px;padding-top:2px;padding-bottom:2px}
:root[data-ui-density="desktop"] .frame-btn{width:30px;height:30px;min-width:30px;min-height:30px;padding:0}
:root[data-ui-density="desktop"] .frame-btn svg{width:16px;height:16px}
:root[data-ui-density="desktop"] .title-input{height:30px;min-height:30px}
:root[data-ui-density="desktop"] .editbar,
:root[data-ui-density="desktop"] .formatbar,
:root[data-ui-density="desktop"] .pdf-toolbar{min-height:36px;padding-top:2px;padding-bottom:2px;gap:3px}
:root[data-ui-density="desktop"] .tool-group{gap:1px}
:root[data-ui-density="desktop"] .tool-btn,
:root[data-ui-density="desktop"] .editbar select,
:root[data-ui-density="desktop"] .formatbar select{height:30px;min-height:30px}
:root[data-ui-density="desktop"] .tool-btn{padding-left:7px;padding-right:7px}
:root[data-ui-density="desktop"] .tool-btn.icon-only{width:30px;min-width:30px;padding:0}
:root[data-ui-density="desktop"] .tool-btn svg{width:16px;height:16px}
:root[data-ui-density="desktop"] .tool-divider{height:20px;margin-left:0;margin-right:0}
:root[data-ui-density="desktop"] .statusbar{min-height:26px;height:26px;padding-top:2px;padding-bottom:2px}
:root[data-ui-density="desktop"] .drawer-head{padding-top:9px;padding-bottom:9px}
:root[data-ui-density="desktop"] .drawer-section-label{margin-top:8px;margin-bottom:4px}
:root[data-ui-density="desktop"] .menu-item{min-height:36px;padding-top:6px;padding-bottom:6px}
:root[data-ui-density="desktop"] .appearance-choice{min-height:30px;padding-top:4px;padding-bottom:4px}
:root[data-ui-density="desktop"] .slide-panel-inner{gap:6px;padding:7px}

.inkdos-density-label{font-size:11px;color:var(--muted,#687386);letter-spacing:.02em}
.inkdos-density-control{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:4px 12px 12px;padding:4px;border:1px solid var(--line,var(--border,#d7dde5));border-radius:10px;background:var(--panel,var(--card,#fff))}
.inkdos-density-control button{min-width:0;min-height:34px;border:0;border-radius:7px;background:transparent;color:inherit;padding:5px 7px;font:inherit;cursor:pointer}
.inkdos-density-control button:hover,.inkdos-density-control button:focus-visible{background:var(--toolbar-hover,rgba(127,127,127,.12));outline:none}
.inkdos-density-control button.active,.inkdos-density-control button[aria-checked="true"]{background:var(--accent-soft,rgba(47,111,237,.12));color:var(--accent,#2f6fed)}
:root[data-ui-density="desktop"] .inkdos-density-control button{min-height:28px;padding:3px 6px;font-size:12px}
.inkdos-density-divider{height:1px;margin:6px 8px;background:var(--line,var(--border,#d7dde5))}
.home-density-control{grid-template-columns:max-content max-content max-content;justify-content:end;max-width:calc(100vw - 32px);margin:4px 8px 8px}
.home-density-control button{display:inline-flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap}
.inkdos-density-icon{width:14px;height:14px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#appearanceMenu .inkdos-density-label{padding:4px 10px 2px}
@media(max-width:420px){.home-density-control{grid-template-columns:1fr;justify-content:stretch}.home-density-control button{justify-content:flex-start}}

/* Keep native form controls aligned with the workspace-selected appearance.
   WebKit/XeOS can otherwise retain the host system scheme for native selects. */
:root[data-appearance-resolved="light"] button,
:root[data-appearance-resolved="light"] input,
:root[data-appearance-resolved="light"] select,
:root[data-appearance-resolved="light"] textarea,
:root[data-appearance-resolved="light"] option{color-scheme:light}
:root[data-appearance-resolved="dark"] button,
:root[data-appearance-resolved="dark"] input,
:root[data-appearance-resolved="dark"] select,
:root[data-appearance-resolved="dark"] textarea,
:root[data-appearance-resolved="dark"] option{color-scheme:dark}