/* First visit uses the same neutral surfaces and hierarchy as the workspace. */
.library-welcome { display:flex; align-items:flex-start; gap:16px; margin:0 0 28px; padding:0 0 24px; border-bottom:1px solid #ededee; }
.library-welcome h2 { margin:0; font-size:15px; font-weight:600; color:#303135; }
.library-welcome p { margin:6px 0 0; font-size:13px; line-height:1.6; color:#747579; }
.library-welcome .workspace-icon-button { margin-left:auto; flex-shrink:0; }
.library-start-primary { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 16px; border:1px solid #252629; border-radius:9px; background:#252629; color:#fff; font-family:inherit; font-size:13px; font-weight:600; line-height:1.4; cursor:pointer; white-space:nowrap; }
.library-start-primary:hover { background:#414247; border-color:#414247; }
.library-start-primary .ui-icon { width:17px; height:17px; stroke:currentColor; }
.library-new-trigger { display:flex; align-items:center; gap:9px; width:100%; padding:10px 13px; margin-top:13px; border:0; border-radius:9px; background:transparent; color:#737478; text-align:left; font:inherit; font-size:12px; cursor:pointer; }
.library-new-trigger:hover { background:#f7f7f8; color:#252629; }
.library-new-trigger .ui-icon { width:17px; height:17px; }
.library-first-start { max-width:740px; padding:14px 0 28px; }
.library-first-start h1 { margin:8px 0 14px; font-size:32px; line-height:1.2; font-weight:600; letter-spacing:-.04em; color:#252629; }
.library-first-start > p:not(.workspace-caption) { max-width:530px; color:#77787d; line-height:1.7; font-size:14px; }
.library-starter-preview { margin:26px 0 24px; padding:24px; border:1px solid #e8e8eb; border-radius:14px; background:#f8f8f9; }
.library-starter-preview-heading { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.library-starter-preview-heading h2 { margin:0; font-size:18px; letter-spacing:-.025em; }
.library-starter-preview-heading span { margin-left:auto; color:#77787d; font-size:12px; }
.library-starter-preview > p { color:#77787d; font-size:12px; margin:10px 0 20px; }
.library-starter-preview ul { display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; }
.library-starter-preview li { padding:7px 10px; background:white; border:1px solid #e8e8eb; border-radius:7px; font-size:12px; color:#65666c; }
.library-start-actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.library-start-actions form { margin:0; }
.library-start-links { display:flex; align-items:center; flex-wrap:wrap; gap:18px; margin:28px 0 14px; color:#77787d; font-size:13px; }
.library-start-links a, .library-starter-edit a { display:inline-flex; align-items:center; gap:5px; color:#65666c; text-underline-offset:4px; }
.library-start-links a:hover, .library-starter-edit a:hover { color:#252629; }
.library-start-links .ui-icon { width:13px; height:13px; }
.library-starter-edit { display:flex; justify-content:space-between; gap:14px; color:#77787d; font-size:12px; margin:0 0 20px; }
.library-starter-edit p { margin:0; }
/* Keep the DOM drop target for saved layouts and HTMX first-save updates. */
#saved-sites-inbox:not(:has(.cnt-sites > .drag-site, .cnt-sites > .site-card)):not(.inbox-drop-target) { display:none; }
.flash-messages__item--success, .flash-messages__item--info { background:#f5f5f6; color:#56575b; }
.library-welcome, .library-starter-edit, .library-start-links { max-width:var(--workspace-content-max); margin-left:auto; margin-right:auto; }
@media(max-width:760px) {
    .library-sidebar { padding:12px 0 8px; }
    .library-sidebar-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
    .library-sidebar .library-new-trigger, .library-sidebar .library-manage-trigger { width:auto; margin:0; padding:8px 10px; min-height:40px; }
}
@media(max-width:640px) {
    .library-welcome { padding-bottom:20px; margin-bottom:24px; }
    .library-first-start h1 { font-size:28px; }
    .library-starter-preview { padding:18px; }
    .library-starter-preview-heading span { margin-left:0; flex-basis:100%; }
    .library-start-links { gap:12px 18px; }
    .library-start-links > span { flex-basis:100%; }
    .library-start-primary, .library-start-actions .workspace-action { min-height:44px; }
    .library-starter-edit { flex-wrap:wrap; }
}