/* Library workspace. Layout and component states are defined together. */
:root { --workspace-sidebar: 232px; --workspace-header: 72px; --workspace-content-max: 1240px; }
.ui-icon { width: 18px; height: 18px; flex: 0 0 18px; vertical-align: middle; }
body, body.edit-page-background { background: #fff; }
.top-view, .top-view.edit-page-background { background: #fff; padding: 0 32px; backdrop-filter: none; border-bottom: 1px solid #eceeeb; }
.header { min-height: var(--workspace-header); max-width: none; }
.dock-panel { gap: 6px; }
.dock-panel .dock-item, .dock-panel > .glyph-item { min-height: 34px; padding: 8px 12px; border-radius: 7px; font-size: 13px; color: #60645e; }
.dock-panel .dock-label { position: static; visibility: visible; opacity: 1; font-size: 13px; width: auto; height: auto; clip-path: none; }
.dock-panel .dock-item:hover, .dock-panel > .glyph-item:hover { color: #252924; background: #f2f3f0; transform: none; }
.dock-pop a, .dock-pop form { font-size: 13px; text-align: left; }
.dock-pop__link { text-align: left; }
.library-sidebar { position: fixed; top: var(--workspace-header); bottom: 0; left: 0; width: var(--workspace-sidebar); padding: 32px 16px; background: #f8f9f6; border-right: 1px solid #e9ece5; overflow-y: auto; }
.library-sidebar-heading { display: flex; align-items: center; gap: 8px; padding: 0 12px; margin-bottom: 16px; color: #61685b; font-size: 12px; font-weight: 500; }
.library-count { font-size: 10px; padding: 1px 5px; border-radius: 4px; background: #e9ece4; color: #6d7665; }
.library-sidebar-list { display: grid; gap: 5px; }
.library-sidebar .tab-trigger { display: flex; justify-content: flex-start; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; min-height: 40px; white-space: normal; text-align: left; border: 1px solid transparent; border-radius: 8px; font-size: 13px; font-weight: 450; color: #646c5c; background: transparent; box-shadow: none; }
.library-sidebar .tab-trigger svg { width: 16px; height: 16px; color: #929b89; }
.library-sidebar .tab-trigger:hover { background: #eef0e9; color: #2d3827; transform: none; text-decoration: none; }
.library-sidebar .tab-trigger--active { color: #2b3825; background: #e9eee1; border-color: #e1e7d9; font-weight: 600; }
.library-sidebar .tab-trigger--active svg { color: #61734e; }
.library-sidebar .library-manage-trigger { position: static; display: flex; align-items: center; justify-content: flex-start; width: 100%; gap: 10px; min-height: 38px; margin: 18px 0 0; padding: 10px 12px; color: #68715f; background: transparent; border: 1px solid transparent; border-radius: 8px; box-shadow: none; font-size: 12px; font-weight: 450; transition: background-color 150ms ease, color 150ms ease; }
.library-sidebar .library-manage-trigger svg { width: 16px; height: 16px; padding: 0; margin: 0; stroke: currentColor; }
.library-sidebar .library-manage-trigger:hover { color: #273622; background: #eef0e9; border-color: transparent; transform: none; box-shadow: none; }
.library-sidebar-note { padding: 0 12px; margin-top: 32px; color: #737b69; font-size: 11px; line-height: 1.7; }
.library-sidebar-empty { padding: 0 12px; color: #7b8472; font-size: 12px; }
body:has(.library-sidebar) .library-interactive-root { margin-left: var(--workspace-sidebar); padding: 44px clamp(24px, 4vw, 72px); }
body:has(.library-sidebar) > .footer { margin-left: 0; width: 100%; }
body:has(.library-sidebar) .top-view > .bookcases-summary { margin-left: var(--workspace-sidebar); }
.library-interactive-root { padding: 40px 32px; }
.workspace-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: var(--workspace-content-max); margin: 0 auto 40px; }
.workspace-intro h1 { font-size: 29px; font-weight: 600; margin: 5px 0 8px; letter-spacing: -.04em; }
.workspace-intro p { margin: 0; color: #737b69; font-size: 13px; line-height: 1.7; }
.workspace-caption { display: block; color: #737b69; font-size: 11px; font-weight: 450; line-height: 1.5; }
.cnt-library { max-width: var(--workspace-content-max); margin: auto; background: transparent; }
.workspace-bookcase.bookcase-row, .workspace-bookcase.drag-bookcase { padding: 0; margin: 0 0 36px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.workspace-bookcase > .bookcase-name, .workspace-bookcase.drag-bookcase .bookcase-name:hover { display: flex; align-items: center; gap: 10px; float: none; width: 100%; padding: 0 0 17px; border-radius: 0; border-bottom: 1px solid #e8ebe4; background: transparent; color: #31392a; cursor: default; }
.workspace-bookcase.drag-bookcase > .bookcase-name { cursor: grab; }
.workspace-heading { min-width: 0; flex: 1; }
.workspace-heading h2, .workspace-heading h3 { margin: 0; font-size: 18px; font-weight: 550; letter-spacing: -.02em; overflow-wrap: anywhere; }
.workspace-heading h3 { font-size: 14px; }
.workspace-level-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: #f0f3e9; color: #84936f; flex-shrink: 0; }
.workspace-anchor { position: absolute; scroll-margin-top: 110px; }
.workspace-bookcase > .cnt-bookshelf { width: 100%; display: block; padding: 0; }
.workspace-shelf.bookshelf-row, .workspace-shelf.drag-bookshelf { background: transparent; padding: 24px 0 0; margin: 0 0 10px; border: 0; border-radius: 0; box-shadow: none; }
.workspace-shelf > .bookshelf-name, .workspace-shelf.drag-bookshelf .bookshelf-name:hover { display: flex; align-items: center; gap: 9px; float: none; width: 100%; padding: 0 0 12px; margin: 0; border-radius: 0; background: transparent; color: #4c5840; cursor: default; }
.workspace-shelf.drag-bookshelf > .bookshelf-name { cursor: grab; }
.workspace-shelf > .bookshelf-name > .ui-icon { color: #9aa68c; width: 16px; height: 16px; }
.workspace-shelf .sites { display: block; width: 100%; }
.workspace-shelf .cnt-sites { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; min-height: 0; align-items: stretch; }
.workspace-empty-shelf { width: 100%; color: #737b69; font-size: 12px; margin: 0 0 8px; }
.cnt-sites:has(.workspace-site) > .workspace-empty-shelf { display: none; }
.workspace-action, .workspace-icon-button, .workspace-add-site { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 7px 10px; margin: 0; border: 1px solid #e6eae0; border-radius: 7px; background: #fff; color: #68755b; font: 450 12px/1.4 system-ui,sans-serif; box-shadow: none; text-decoration: none; transition: background-color 150ms ease, border-color 150ms ease; }
.workspace-action:hover, .workspace-icon-button:hover, .workspace-add-site:hover { background: #f4f6ef; border-color: #d9e1d0; color: #3c502e; transform: none; text-decoration: none; box-shadow: none; }
.workspace-action svg, .workspace-icon-button svg, .workspace-add-site svg { width: 15px; height: 15px; padding: 0; margin: 0; stroke: currentColor; stroke-width: 1.5; }
.workspace-bookcase .edit-bookcase-button, .workspace-shelf .edit-bookshelf-button { position: static; flex-shrink: 0; margin: 0 0 0 auto; padding: 6px 9px; border-color: transparent; background: transparent; color: #859076; box-shadow: none; }
.workspace-bookcase .bookcase-name .workspace-action span, .workspace-bookcase .bookcase-name .workspace-caption { font-weight: 450; }
.workspace-bookcase .edit-bookcase-button:hover, .workspace-shelf .edit-bookshelf-button:hover { background: #f1f4ec; border-color: #e4eadb; color: #405530; }
.workspace-drag-hint { color: #a0aa95; }
.workspace-bookcase.drag-bookcase:hover, .workspace-shelf.drag-bookshelf:hover { box-shadow: none; }
.workspace-bookcase .bookshelves-tree__add { padding: 8px 0 0; margin: 0; border: 0; }
.workspace-bookcase .add-bookshelf-button { background: transparent; border-color: transparent; box-shadow: none; color: #7d8a6c; }
.bookcases-tree__add { margin: 20px 0 0; padding: 0; }
.bookcases-tree__add .add-bookcase-button { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin: 0; padding: 10px 16px; font-size: 12px; font-weight: 450; color: #7a8969; background: #fff; border: 1px dashed #dce3d2; border-radius: 8px; box-shadow: none; }
.bookcases-tree__add .add-bookcase-button:hover { background: #f5f7f0; transform: none; }
.bookcases-tree__add .add-bookcase-button svg { stroke: currentColor; width: 16px; height: 16px; }
.workspace-site.site-card, .workspace-site.drag-site { display: flex; align-items: center; gap: 6px; width: calc(50% - 4px); margin: 0; padding: 10px 12px; border: 1px solid #e9ede2; border-radius: 8px; background: #fff; text-align: left; box-shadow: none; }
.workspace-site.site-card:hover, .workspace-site.drag-site:hover { transform: none; border-color: #d0dcc1; box-shadow: 0 2px 6px #293d1805; }
.workspace-site .workspace-site-link { display: flex; gap: 12px; align-items: center; min-width: 0; flex: 1; min-height: 34px; text-decoration: none; }
.workspace-site .workspace-site-link img { width: 40px; height: 26px; flex-shrink: 0; object-fit: contain; border-radius: 3px; }
.workspace-site .workspace-site-link div, .workspace-site .workspace-site-link div:not(:empty) { border: 0; padding: 0; margin: 0; font-size: 13px; line-height: 1.4; color: #444e3b; overflow-wrap: anywhere; }
.workspace-site-open { color: #a0ad90; font-size: 13px; margin-left: auto; }
.workspace-site .edit-site-button { display: inline-flex; position: static; width: 30px; min-height: 30px; flex: 0 0 30px; padding: 6px; color: #9aa68b; border-color: transparent; background: transparent; box-shadow: none; }
.workspace-site .edit-site-button:hover { transform: none; background: #eef3e5; color: #4b6436; }
.workspace-add-site.add-site-button { min-height: 32px; width: auto; background: transparent; border: 0; box-shadow: none; color: #7a8e65; padding: 8px 0; }
.workspace-menu { position: relative; margin-left: auto; }
.workspace-menu summary { list-style: none; width: 32px; padding: 7px; }
.workspace-menu summary::-webkit-details-marker { display: none; }
.workspace-menu-panel { position: absolute; top: calc(100% + 6px); right: 0; width: 215px; z-index: 20; border: 1px solid #e5eadd; background: #fff; border-radius: 9px; padding: 5px; box-shadow: 0 10px 30px #25332612; }
.workspace-menu-panel a, .workspace-menu-panel button { display: flex; width: 100%; align-items: center; gap: 9px; padding: 10px; color: #68785a; background: transparent; border: 0; border-radius: 6px; font-size: 12px; text-decoration: none; text-align: left; }
.workspace-menu-panel a:hover, .workspace-menu-panel button:hover { background: #f3f6ed; }
.bookcases-summary { max-width: var(--workspace-content-max); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px 0; background: transparent; border: 0; }
.bookcases-summary > span { margin-right: 10px; font-size: 11px; font-weight: 400; }
.bookcases-summary a { border-radius: 5px; padding: 5px 8px; font-size: 11px; }
.bookcases-summary a:hover { background: #f0f3e9; text-decoration: none; }
.bookcases-summary[hidden] { display: none; }
.footer { border: 0; color: #737b69; font-size: 11px; margin-top: 0; }
.workspace-inbox-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; background: transparent; color: #859475; border: 0; border-radius: 6px; padding: 7px 10px; font-size: 12px; }
.workspace-inbox-toggle:hover { background: #f0f4e9; }
.workspace-inbox-chevron { display: inline-flex; transition: transform 150ms ease; }
.workspace-inbox-chevron .ui-icon { width: 13px; height: 13px; }
.workspace-inbox-chevron.is-open { transform: rotate(90deg); }
.cnt-inbox--collapsed .cnt-inbox-name:hover { transform: none; }
body:has(.library-sidebar) .cnt-inbox { margin-left: var(--workspace-sidebar); }
.library-modal { border-radius: 13px; border-color: #e7eadf; box-shadow: 0 24px 80px #1b271a25; }
.library-modal__title { letter-spacing: -.03em; }
.library-modal__label { font-size: 12px; font-weight: 500; margin-bottom: 7px; }
.library-modal__hint { color: #737b69; font-size: 12px; line-height: 1.6; margin: 0 0 20px; }
.library-modal__actions { padding-top: 18px; margin-top: 6px; border-top: 1px solid #e9ede3; }
.library-modal__button { background: #fff; font-size: 12px; box-shadow: none; }
.library-modal__button--primary { background: #29362e; color: #fff; border-color: #29362e; }
.library-modal__button--primary:hover { background: #3e4d41; }
.library-modal__button--danger { background: #fff; color: #aa3c32; border-color: #ecd7d2; }
.paywall-close { position:absolute; top:18px; right:18px; }
.plan-gate { display:flex; flex-direction:column; align-items:flex-start; padding:8px 2px 2px; }
.plan-gate__icon { display:grid; place-items:center; width:44px; height:44px; margin-bottom:18px; border-radius:10px; background:#eef3e8; color:#607653; }
.plan-gate__eyebrow { margin:0 0 6px; color:#6d7d63; font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; }
.plan-gate .library-modal__title { margin-bottom:9px; font-size:22px; }
.plan-gate .library-modal__hint { margin-bottom:18px; }
.plan-gate__usage { display:flex; align-items:center; justify-content:space-between; width:100%; margin-bottom:20px; padding:13px 14px; border-radius:9px; background:#f4f5f2; color:#737b6d; font-size:12px; }
.plan-gate__usage strong { color:#30362c; font-weight:600; }
.plan-gate__cta { width:100%; min-height:42px; text-decoration:none; }
.library-modal--ai_assist.library-modal--plan-gate { width:440px; min-height:0; padding:28px; }
.plan-gate--ai { position:relative; width:100%; margin:auto; padding:8px 2px 2px; }
.library-modal input:focus-visible, .library-modal textarea:focus-visible, .library-modal select:focus-visible, .workspace-action:focus-visible, .workspace-icon-button:focus-visible { outline: 2px solid #7d916c; outline-offset: 2px; }
.library-modal--libraries { width: 760px; padding: 28px; }
.manager-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.manager-heading .library-modal__title { margin-bottom: 8px; font-size: 23px; }
.manager-close { display: grid; place-items: center; width: 30px; height: 30px; background: transparent; border: 0; border-radius: 6px; color: #8d9980; }
.manager-close:hover { background: #f1f5e9; }
.library-manager-list { display: grid; gap: 8px; margin: 6px 0 14px; }
.library-manager-row { display: flex; align-items: center; gap: 12px; padding: 18px 14px; border: 1px solid #e8eddf; border-radius: 9px; background: #fff; }
.library-manager-grip { display: inline-flex; color: #bec8b3; cursor: grab; }
.library-manager-symbol { display: grid; place-items: center; width: 36px; height: 40px; border-radius: 8px; background: #f1f5e9; color: #8fa278; flex-shrink: 0; }
.library-manager-detail { flex: 1; min-width: 0; }
.library-manager-name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14px; font-weight: 550; color: #3b4930; }
.library-visibility { font-size: 10px; font-weight: 450; color: #859571; background: #f3f6ee; padding: 2px 6px; border-radius: 4px; }
.library-manager-detail p { font-size: 12px; color: #737b69; margin: 5px 0; }
.library-manager-meta { display: flex; gap: 6px; font-size: 11px; color: #737b69; }
.library-manager-actions { display: flex; align-items: center; gap: 12px; }
.library-order-actions { display: grid; gap: 2px; }
.library-order-actions button, .manager-edit { display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 0; background: transparent; color: #8e9f7e; padding: 4px; border-radius: 5px; font-size: 12px; }
.library-order-actions button:hover, .manager-edit:hover { background: #f0f5e7; color: #425e2b; }
.library-order-actions button .ui-icon { width: 14px; height: 14px; }
.manager-edit .ui-icon { width: 12px; height: 12px; }
.manager-add { display: flex; align-items: center; gap: 8px; color: #7c9067; background: transparent; border: 0; padding: 10px 0; font-size: 12px; }
.manager-add:hover { color: #425d2c; }
.manager-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; border-top: 1px solid #e9ede3; padding-top: 20px; margin-top: 18px; }
.manager-footer p { margin: 0 auto 0 0; font-size: 11px; color: #737b69; }
@media (max-width: 850px) {
 :root { --workspace-sidebar: 190px; }
 .header { grid-template-columns: auto 1fr auto; padding: 0; }
 .header > div:not(.acct-manage__header-spacer) { grid-column: auto; grid-row: auto; }
 .header .dock-panel { grid-column: 3; }
 .dock-panel { gap: 0; }
 .dock-panel .dock-item, .dock-panel > .glyph-item { padding: 7px 9px; }
 .workspace-site.site-card, .workspace-site.drag-site { width: 100%; }
 .workspace-intro { align-items: start; gap: 12px; }
}
@media (max-width: 650px) {
 :root { --workspace-header: 64px; }
 .top-view { position: static; padding: 0 16px; }
 .header { display: flex; flex-wrap: wrap; gap: 0; justify-content: space-between; }
 .header > div { flex-basis: 100%; order: 3; }
 .header > div:empty { display: none; }
 .header .ui-brand { font-size: 15px; }
 .dock-panel .dock-label, .dock-panel > .glyph-item { font-size: 11px; }
 .dock-panel .dock-item, .dock-panel > .glyph-item { padding: 7px; }
 .library-sidebar { position: static; width: auto; padding: 16px 0; background: transparent; border: 0; }
 .library-sidebar-heading { margin-bottom: 8px; padding: 0; }
 .library-sidebar-list { display: flex; overflow-x: auto; }
 .library-sidebar .tab-trigger { width: auto; white-space: nowrap; min-height: 34px; font-size: 12px; padding: 8px 10px; }
 .library-sidebar .tab-trigger svg { display: none; }
 .library-sidebar .library-manage-trigger { width: auto; margin: 8px 0 0; padding-left: 0; }
 .library-sidebar-note { display: none; }
 body:has(.library-sidebar) .library-interactive-root { margin-left: 0; padding: 28px 20px; }
 body:has(.library-sidebar) > .footer, body:has(.library-sidebar) .cnt-inbox, body:has(.library-sidebar) .top-view > .bookcases-summary { margin-left: 0; }
 .workspace-intro h1 { font-size: 25px; }
 .workspace-intro { margin-bottom: 30px; }
 .workspace-action.edit-bookcase-button, .workspace-action.edit-bookshelf-button { width: 32px; padding: 7px; }
 .workspace-action.edit-bookcase-button span, .workspace-action.edit-bookshelf-button span { display: none; }
 .library-modal--libraries { padding: 22px 18px; }
 .library-manager-row { gap: 8px; padding: 14px 10px; }
 .library-manager-grip, .library-manager-symbol { display: none; }
 .library-manager-actions { gap: 4px; }
 .manager-footer { flex-wrap: wrap; }
 .manager-footer p { flex-basis: 100%; margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
.ui-notice { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; align-items: center; gap: 20px; padding: 12px 16px; border: 1px solid #dce5d2; border-radius: 10px; background: #fff; box-shadow: 0 6px 24px #23331615; color: #4e633c; font-size: 13px; }
.ui-notice button { border: 0; background: transparent; color: #839176; font-size: 18px; padding: 0 2px; }
.library-sharing-choice { border: 0; padding: 0; margin: 4px 0 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.library-sharing-choice legend { font-size: 12px; margin-bottom: 9px; color: #59674a; }
.library-sharing-choice label { display: flex; gap: 9px; align-items: start; padding: 12px; border: 1px solid #e4eadb; border-radius: 8px; cursor: pointer; }
.library-sharing-choice label:has(input:checked) { border-color: #9caf89; background: #f7f9f2; }
.library-sharing-choice strong { display: block; font-size: 12px; font-weight: 550; }
.library-sharing-choice small { display: block; margin-top: 3px; font-size: 11px; color: #737f67; line-height: 1.5; }
.library-sharing-choice input { accent-color: #637c4d; }
.library-detail-counts { display: flex; gap: 8px; font-size: 11px; color: #7a856e; }
@media (max-width: 650px) { .library-sharing-choice { grid-template-columns: 1fr; } }
.library-interactive-root { min-height: calc(100dvh - 172px); }
.workspace-start { padding: 42px 0 12px; }
.workspace-start h2 { margin: 0 0 8px; font-size: 19px; }
.workspace-start p { color: #78836b; font-size: 13px; }
.cnt-bookcase:not(:has(.workspace-bookcase)) .add-bookcase-button { width: auto; padding: 11px 16px; color: #fff; background: #29362e; border: 1px solid #29362e; }
.library-modal__center-frame { margin: 0 0 20px; }
.library-modal textarea.library-modal__input { border: 1px solid #e4e8de; border-radius: 9px; padding: 10px 12px; min-height: 100px; resize: vertical; margin-bottom: 18px; background: #fff; }
.manager-edit:disabled, .manager-add:disabled { opacity: .45; cursor: not-allowed; }
.workspace-view { white-space: nowrap; flex-shrink: 0; }
.library-order-actions button { min-width: 28px; min-height: 26px; }
@media (max-width: 650px) { .top-view, .top-view.edit-page-background { padding: 0 16px; } .library-order-actions button { min-width: 32px; min-height: 28px; } }
/* Account pages share the same navigation rail and content alignment. */
.acct-manage-shell { max-width: none; margin: 0 0 0 var(--workspace-sidebar); padding: 44px clamp(24px, 4vw, 72px); }
.acct-manage-page { padding: 0; }
.acct-manage { display: block; }
.acct-manage__nav { position: fixed; top: var(--workspace-header); bottom: 0; left: 0; width: var(--workspace-sidebar); padding: 32px 16px; background: #f8f9f6; border-right: 1px solid #e9ece5; overflow-y: auto; }
.acct-manage__nav-title { margin: 0 12px 18px; font-size: 12px; color: #61685b; }
.acct-manage__nav-link { font-size: 13px; padding: 10px 12px; }
.acct-manage__content { max-width: 860px; min-height: 0; padding: 0; margin: 0 auto; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.acct-manage__heading { font-size: 29px; }
.acct-manage__name-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
.acct-manage-shell .messages { padding: 0; margin: 0 auto 24px; max-width: 860px; }
@media (max-width: 650px) {
 .acct-manage-shell { margin: 0; padding: 20px; }
 .acct-manage__nav { position: static; width: auto; padding: 0 0 20px; background: transparent; border: 0; }
 .acct-manage__nav-title { margin: 0 0 12px; }
 .acct-manage__content { padding-top: 8px; }
 .acct-manage__name-row { grid-template-columns: 1fr; }
}
.workspace-shelf .cnt-sites:not(:has(.workspace-site)) { min-height: 48px; align-content: center; }
/* Nested collection layout: headers, collapsible shelves, and full-width site rows. */
.workspace-intro .workspace-breadcrumb { display: flex; gap: 10px; color: #64725b; font-size: 12px; margin-bottom: 14px; }
.workspace-breadcrumb span { color: #a2ab9b; }
.workspace-intro .workspace-view { background: #657b58; color: #fff; border-color: #657b58; padding: 12px 22px; border-radius: 8px; font-size: 13px; font-weight: 550; }
.workspace-intro .workspace-view:hover { background: #526748; border-color: #526748; }
.workspace-bookcase.bookcase-row, .workspace-bookcase.drag-bookcase { border: 1px solid #dde4d7; border-radius: 11px; background: #fff; margin-bottom: 24px; }
.workspace-bookcase > .bookcase-name, .workspace-bookcase.drag-bookcase .bookcase-name:hover { padding: 18px 20px; gap: 14px; background: #f6f8f3; border-bottom: 1px solid #e1e6db; border-radius: 11px 11px 0 0; }
.group-toggle { display: inline-grid; place-items: center; width: 30px; height: 34px; padding: 5px; border: 0; background: transparent; border-radius: 6px; color: #6c7c5f; flex-shrink: 0; }
.group-toggle:hover { background: #e9eee2; }
.group-toggle svg { transition: transform 150ms ease; }
.group-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
.workspace-level-icon { width: 43px; height: 43px; border-radius: 9px; background: #eaf0e3; color: #6e815e; }
.workspace-level-icon .ui-icon { width: 24px; height: 24px; }
.workspace-heading h2 { font-size: 21px; font-weight: 550; margin: 2px 0 3px; }
.workspace-heading h3 { font-size: 18px; font-weight: 550; margin: 1px 0 3px; }
.workspace-caption { color: #6e7866; font-size: 12px; }
.group-count { margin: 0; color: #78826f; font-size: 12px; font-weight: 400; line-height: 1.4; }
.workspace-bookcase > .cnt-bookshelf { padding: 12px; }
.workspace-shelf.bookshelf-row, .workspace-shelf.drag-bookshelf { border: 1px solid #e0e6da; border-radius: 9px; margin: 0 0 12px; padding: 0; }
.workspace-shelf > .bookshelf-name, .workspace-shelf.drag-bookshelf .bookshelf-name:hover { padding: 14px 16px; gap: 12px; background: #f8faf6; border-radius: 9px 9px 0 0; }
.workspace-bookcase > .bookcase-name > .workspace-menu .ui-icon, .workspace-shelf > .bookshelf-name > .workspace-menu .ui-icon { transform: rotate(90deg); }
.workspace-shelf .cnt-sites { display: block; }
.workspace-site.site-card, .workspace-site.drag-site { width: 100%; max-width: 100%; display: flex; align-items: center; gap: 14px; border: 0; border-top: 1px solid #e4e8df; border-radius: 0; margin: 0; padding: 10px 18px; min-height: 66px; box-shadow: none; }
.workspace-site.site-card:hover, .workspace-site.drag-site:hover { background: #fafcf8; border-color: #e4e8df; box-shadow: none; transform: none; }
.workspace-site-image { flex-shrink: 0; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #e3e8dd; background: #f4f7ee; border-radius: 8px; }
.workspace-site .workspace-site-image img { width: 34px; height: 28px; border-radius: 4px; background: transparent; object-fit: contain; }
.site-row-detail { flex: 1; min-width: 0; }
.site-row-title { display: block; color: #283222; font-size: 14px; font-weight: 450; line-height: 1.5; }
.site-domain { display: block; color: #7a8372; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.site-grip { display: inline-flex; color: #849674; cursor: grab; }
.site-grip .ui-icon { width: 14px; }
.site-external { display: inline-grid; place-items: center; width: 32px; height: 34px; color: #7a8f67; border-radius: 6px; }
.site-external:hover { background: #eaf0e2; color: #4a6239; }
.workspace-site .workspace-menu { margin: 0; }
.workspace-site .workspace-icon-button { border: 0; background: transparent; }
.workspace-add-site.add-site-button { width: 100%; justify-content: flex-start; border-top: 1px solid #e4e8df; border-radius: 0 0 9px 9px; min-height: 46px; padding: 11px 20px; color: #658051; }
.workspace-bookcase .bookshelves-tree__add { border-top: 1px solid #e1e7d9; margin-top: 18px; padding: 12px 0 0; }
.workspace-bookcase .add-bookshelf-button { padding: 8px 14px; font-size: 13px; }
.workspace-empty-shelf { padding: 14px 20px; margin: 0; }
.inline-name { display: block; min-width: 0; }
.inline-name-trigger { display: block; max-width: 100%; padding: 1px 4px; margin: 0 0 0 -4px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; overflow-wrap: anywhere; }
.inline-name-trigger:hover { background: #e9efdf; border-color: #d9e3cd; }
.inline-name-trigger:focus-visible { outline: 2px solid #7d946b; outline-offset: 2px; }
.inline-name-trigger span { font-weight: inherit !important; }
.inline-name-form { display: flex; align-items: center; gap: 5px; max-width: 460px; }
.inline-name-form input[type="text"] { width: 100%; min-width: 0; height: 36px; padding: 5px 8px; border: 1px solid #879f72; border-radius: 6px; font: inherit; }
.inline-name-form button { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; padding: 6px; color: #5a7945; background: #eaf2df; border: 1px solid #dbe7ce; border-radius: 6px; }
.inline-name-form button:last-child { background: transparent; border-color: transparent; color: #8a9580; }
.inline-name-form button:disabled { opacity: .5; }
.inline-name-error { display: block; margin-top: 5px; font-size: 12px; font-weight: 400; color: #a43d35; }
.site-row-detail .inline-name { color: #283222; font-size: 14px; font-weight: 450; }
.workspace-menu-panel .menu-danger { color: #a6453b; }
/* Inbox belongs to content, with an explanation and an explicit empty state. */
body:has(.library-sidebar) .workspace-inbox { margin: 0 auto 28px; }
.workspace-inbox.cnt-inbox, .workspace-inbox.cnt-inbox--collapsed { max-width: var(--workspace-content-max); width: 100%; padding: 0; border: 1px solid #e1e7d9; border-radius: 10px; background: #fafcf7; box-shadow: none; }
.workspace-inbox .workspace-inbox-toggle { display: flex; width: 100%; min-height: 68px; padding: 14px 18px; gap: 12px; text-align: left; color: #5f7450; background: transparent; }
.inbox-title { flex: 1; font-size: 13px; font-weight: 550; }
.inbox-title [data-inbox-count] { margin-left: 9px; color: #7d8a70; font-size: 11px; font-weight: 400; }
.inbox-title small { display: block; color: #7b8870; font-size: 12px; font-weight: 400; margin-top: 3px; }
.workspace-inbox .workspace-inbox-chevron { transform: none; }
.workspace-inbox .workspace-inbox-chevron:not(.is-open) { transform: rotate(-90deg); }
.workspace-inbox > .sites { width: 100%; padding: 0 18px 18px; }
.inbox-explanation { color: #707f64; font-size: 12px; margin: 0 0 12px; }
.workspace-inbox .cnt-sites { min-height: 60px; background: #fff; border: 1px dashed #dbe4cf; padding: 10px; border-radius: 8px; }
.inbox-empty { padding: 12px; color: #849278; font-size: 12px; margin: 0; }
.workspace-inbox .cnt-sites:has(> .site-card, > .drag-site) .inbox-empty { display: none; }
@media (max-width: 650px) {
 .workspace-bookcase > .bookcase-name, .workspace-bookcase.drag-bookcase .bookcase-name:hover { padding: 14px 10px; gap: 8px; }
 .workspace-shelf > .bookshelf-name, .workspace-shelf.drag-bookshelf .bookshelf-name:hover { padding: 12px 8px; gap: 7px; }
 .workspace-bookcase > .cnt-bookshelf { padding: 8px; }
 .workspace-level-icon { width: 32px; height: 34px; }
 .workspace-level-icon .ui-icon { width: 19px; height: 19px; }
 .group-toggle { width: 24px; padding: 3px; }
 .workspace-heading h2 { font-size: 17px; }
 .workspace-heading h3 { font-size: 15px; }
 .group-count { font-size: 11px; }
 .workspace-site.site-card, .workspace-site.drag-site { padding: 10px; gap: 9px; }
 .workspace-site-image { width: 32px; height: 34px; }
 .workspace-site .workspace-site-image img { width: 27px; height: 23px; }
 .site-external { width: 25px; }
 .site-row-detail .inline-name { font-size: 13px; }
 .inline-name-form { flex-wrap: wrap; }
 .inline-name-form input[type="text"] { flex-basis: 100%; }
 .workspace-intro .workspace-view { padding: 9px 12px; font-size: 12px; }
}
.workspace-intro > a { white-space: nowrap; flex-shrink: 0; }