* { box-sizing: border-box; }
.library-page { margin: 0; background: #fff0e3; color: #39271d; font: 16px/1.7 Plex, Arial, sans-serif; }
.library-page main, .library-header { width: min(1160px, calc(100% - 34px)); margin-inline: auto; }
.library-header { display: flex; align-items: center; justify-content: space-between; padding-block: 12px; }
.library-header img { display: block; object-fit: contain; }
.library-button, .library-grid a { display: inline-block; padding: 7px 14px; color: white; background: #8d3924; border-radius: 10px; text-decoration: none; font-weight: 700; }
.library-heading { margin-block: 34px; }
.library-heading h1 { font-size: clamp(27px, 5vw, 54px); margin: 0; line-height: 1.3; }
.library-heading p { max-width: 660px; margin: 7px 0; }
.template-library-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.template-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.template-filters button, .template-library-controls input { font: inherit; border: 1px solid #dfbc9f; border-radius: 10px; padding: 8px 12px; background: #fff8ef; color: #39271d; }
.template-filters button { cursor: pointer; }
.template-filters button[aria-pressed=true] { background: #8d3924; border-color: #8d3924; color: white; }
.template-filters { align-items:center; }
.template-more-control { display:block; margin:0; min-width:0; }
.template-filters .template-more-control select {
  width:auto; min-width:175px; max-width:100%; min-height:42px;
  margin:0; padding:8px 12px; font:inherit; cursor:pointer;
  border:1px solid #dfbc9f; border-radius:10px; background:#fff8ef; color:#39271d;
}
.template-filters .template-more-control select[data-active=true] { background:#8d3924; border-color:#8d3924; color:#fff; }
.template-more-control option { background:#fff8ef; color:#39271d; }
@media(max-width:600px){
  .template-library-controls,.template-filters { width:100%; }
  .template-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .template-filters button { min-height:42px; }
  .template-more-control { grid-column:1/-1; }
  .template-filters .template-more-control select { width:100%; min-width:0; }
  .template-library-controls>label { width:100%; max-width:none; }
  .template-library-controls input[type=search] { width:100%; max-width:none; }
}
.library-page input { display: block; width: min(100%, 280px); }
.library-header { flex-wrap:wrap; gap:8px 16px; }
html[data-dashboard-mode=dark] .library-page { background:#17181d; color:#fff1e9; color-scheme:dark; }
[data-dashboard-mode=dark] .library-page .library-grid article { background:#23242b; border-color:#48434a; }
[data-dashboard-mode=dark] :is(.library-page,.signup-templates) .template-filters :is(button:not([aria-pressed=true]),select:not([data-active=true])),
[data-dashboard-mode=dark] :is(.library-page,.signup-templates) .template-library-controls input {
  background:#25262d; color:#fff1e9; border-color:#57515a;
}
[data-dashboard-mode=dark] .library-page .custom-template-request,
[data-dashboard-mode=dark] .library-page .platform-preferences > * { border-color:#57515a; }
.library-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,235px),1fr)); gap: 15px; padding-bottom: 42px; }
.library-grid article { display: flex; flex-direction: column; min-width: 0; padding: 13px; background: #fff9f0; border: 1px solid #e8c5a9; border-radius: 16px; }
.library-grid h2 { font-size: 19px; margin: 10px 0 0; }
.template-kind { display: block; font-size: 11px; font-weight: 700; color: inherit; opacity: .77; }
.library-grid p { font-size: 13px; margin: 2px 0 12px; }
.library-grid a { align-self: start; margin-top: auto; font-size: 13px; }
.library-art { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: var(--menu-canvas); border: 1px solid #0002; padding: 9px; border-radius: 8px; }
.library-art span { grid-column: 1/-1; height: 57px; background: var(--hero-color); border-radius: 6px; }
.library-art i { height: 19px; background: var(--accent); border-radius: 5px; }
:is(.library-art,.template-sketch)[data-sketch=arch] :is(span,i:first-child) { border-radius: 48% 48% 5px 5px; }
:is(.library-art,.template-sketch)[data-sketch=poster] { border: 2px solid var(--hero-color); border-radius: 0; }
:is(.library-art,.template-sketch)[data-sketch=editorial] :is(i,b) { border-radius: 0; height: 7px; }
:is(.library-art,.template-sketch)[data-sketch=frame] :is(span,i:first-child) { outline: 2px solid var(--accent); outline-offset: -5px; }
:is(.library-art,.template-sketch)[data-sketch=ticket] { border: 1px dashed var(--hero-color); }
:is(.library-art,.template-sketch)[data-sketch=mosaic] i:last-child { height: 28px; }
:is(.library-art,.template-sketch)[data-sketch=rail] :is(i,b) { border-radius: 99px; }
:is(.library-art,.template-sketch)[data-sketch=minimal] { border-radius: 16px; }
.library-page :focus-visible { outline: 3px solid #98442a; outline-offset: 3px; }
@media(max-width:600px) {
  .library-heading { margin-block: 22px; }
  .library-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .library-grid article { padding: 9px; }
  .library-grid h2 { font-size: 16px; }
}

.template-option[hidden] { display: none !important; }
#template-results { font-size: 13px; margin-block: 8px; }
.template-preview-link { margin-bottom: 12px; }
.library-art span { background-image: linear-gradient(125deg, var(--hero-color) 10%, transparent), var(--example-photo); background-size: cover; background-position: center; }

/* A full preview is independent of the radio selection and the save action. */
.template-picker {grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr));gap:12px}
.template-option {display:flex;flex-direction:column;cursor:default;gap:6px}
.template-choice {position:relative;display:block;flex:1;cursor:pointer;min-width:0}
.template-photo,.library-photo {display:block;width:100%;height:auto;aspect-ratio:540/380;object-fit:cover;background:#f1e6d9;border:1px solid #e7d6d1;border-radius:7px}
.template-option .template-tile {gap:6px}
.template-card-preview {display:flex;align-items:center;justify-content:center;gap:6px;min-height:38px;border:1px solid #e7d6d1;border-radius:8px;color:#7a3024;background:#fffdf8;font-size:12px;font-weight:700;text-decoration:none}
.template-card-preview:is(:hover,:focus-visible) {background:#fff2e8;border-color:#a62b2b}
@media (max-width:560px) {.template-picker {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}

.template-archive-toggle{display:flex;align-items:center;gap:8px;margin-block:12px 4px;font-size:13px}.template-archive-toggle input[type=checkbox]{width:17px;height:17px;margin:0;accent-color:#8d3924}
[data-menu-style] .menu-feature-art{flex:0 1 36%;max-width:100%}
.template-own-preview{font-size:11px;text-align:center;color:#7a3024;padding:4px 2px;text-underline-offset:3px}

.signup-templates {max-width:1200px;min-height:100vh}
.signup-templates .library-grid {padding-bottom:0}
.signup-template-actions {display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.signup-template-actions :is(a,button) {display:flex;align-items:center;justify-content:center;flex:1 0 auto;min-height:40px;padding:6px 10px;font-size:13px;margin:0}
.signup-template-actions a {background:var(--brand-card);border:1px solid var(--line);color:var(--ink)}
.template-content-note { padding:12px 14px; border:1px solid var(--line,#dfbc9f); border-radius:10px; font-size:13px; line-height:1.8; }
.signup-content-dialog { width:min(540px,calc(100% - 24px)); }
.signup-content-template { margin-block:0 14px; font-weight:700; }
.signup-content-options { display:grid; gap:12px; border:0; padding:0; margin:0; min-width:0; }
.signup-content-options>label { display:flex; align-items:start; gap:10px; border:1px solid var(--line,#dfbc9f); border-radius:12px; padding:14px; cursor:pointer; }
.signup-content-options>label:has(input:checked) { border-color:var(--primary,#923529); box-shadow:inset 0 0 0 1px var(--primary,#923529); }
.signup-content-options input[type=radio] { flex:none; width:18px; height:18px; margin:5px 0 0; accent-color:var(--primary,#923529); }
.signup-content-options span { display:grid; gap:5px; min-width:0; }
.signup-content-options small { font-size:13px; line-height:1.8; color:var(--muted,#765c57); }
.signup-content-dialog button[type=submit] { width:100%; min-height:46px; }
.signup-content-dialog .template-content-note { margin-block:14px; }
.website-picker{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}@media(max-width:560px){.website-picker{grid-template-columns:repeat(2,minmax(0,1fr))}}
.theme-workbench:has([data-black-theme-preview]){grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr);gap:24px}.theme-workbench:has([data-black-theme-preview]) .theme-example{min-width:0}@media(max-width:1050px){.theme-workbench:has([data-black-theme-preview]){grid-template-columns:1fr}}