.logo-page { --logo-ink:#192650; --logo-teal:#176d69; max-width:1100px; margin:0 auto; padding:30px 25px 55px; color:var(--logo-ink); font-size:16px; line-height:1.6; }
.logo-page * { box-sizing:border-box; }
.logo-page [hidden] { display:none !important; }
.logo-page p { margin:0 0 18px; }
.logo-page a { color:var(--logo-teal); text-underline-offset:3px; }
.logo-page .logo-eyebrow { color:var(--logo-teal); font-size:11px; font-weight:700; letter-spacing:1.5px; margin-bottom:13px; }
.logo-page h1 { font-size:clamp(32px,5vw,48px); line-height:1.15; letter-spacing:-1.5px; text-align:left; padding:0; margin:0 0 18px; }
.logo-page h2 { font-size:clamp(25px,3vw,31px); line-height:1.25; padding:0; margin:0 0 18px; letter-spacing:-.6px; }
.logo-heading { max-width:760px; }
.logo-heading>p:not(.logo-eyebrow) { font-size:19px; }
.logo-page button,.logo-page input { font:inherit; }
.logo-page .logo-button { display:inline-flex; align-items:center; justify-content:center; gap:16px; border:1px solid var(--logo-teal); border-radius:5px; padding:11px 18px; background:var(--logo-teal); color:white; font-size:14px; font-weight:700; text-decoration:none; cursor:pointer; }
.logo-button:hover { background:#105652; }
.logo-page button:disabled { opacity:.55; cursor:not-allowed; }
.logo-page :is(a,button,input,summary):focus-visible { outline:3px solid #b46a28; outline-offset:3px; }
.logo-section { margin-top:42px; padding-top:35px; border-top:1px solid #d2dcd5; scroll-margin-top:20px; }
.logo-section>p { max-width:800px; }
.logo-page label { display:block; font-size:14px; font-weight:700; margin-bottom:8px; }
.logo-page input[type=search],.logo-page input[type=text],.logo-page input:not([type]) { border:1px solid #9aada4; border-radius:5px; padding:12px; width:100%; min-width:0; background:#fffdfa; color:var(--logo-ink); }
.logo-search-row { display:flex; align-items:center; gap:12px; }
.logo-search-row input { flex:1; }
.logo-search-row button,.logo-search-row a { flex-shrink:0; }
.logo-search-row>a { font-size:14px; }
.logo-result-count { margin-top:20px !important; font-size:14px; font-weight:700; }
.logo-result-count span { color:#53645e; font-weight:400; }
#logo-library-results[aria-busy=true] { opacity:.55; }
.logo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,240px)); gap:12px; }
.logo-card { padding:10px; background:#fffdfa; border:1px solid #d2dcd5; border-radius:8px; min-width:0; }
.logo-preview-art { display:flex; align-items:center; justify-content:center; background:#fff; padding:16px 8px; border:1px solid #e1e6e0; border-radius:4px; margin-bottom:12px; }
.logo-art { display:flex; align-items:center; justify-content:center; width:202px; height:42px; background:#fff; border:1px solid #e1e6e0; margin:0 auto 8px; }
.logo-art img { width:200px; height:40px; max-width:none; object-fit:contain; flex-shrink:0; }
.logo-card-caption { display:flex; align-items:baseline; gap:8px; }
.logo-card-caption .logo-filename { flex:1; min-width:0; margin:0 !important; }
.logo-filename { overflow-wrap:anywhere; font-size:13px; font-weight:700; margin-bottom:10px !important; }
.logo-pagination { display:flex; align-items:center; justify-content:center; gap:22px; padding-top:24px; font-size:14px; }
.logo-pagination a { padding:6px 12px; border:1px solid #9aada4; border-radius:4px; }
.logo-upload-section { display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; }
.logo-specs { background:#e2eee7; border-radius:6px; padding:20px; margin:22px 0; font-size:14px; }
.logo-specs ul { margin:8px 0 0; padding-left:20px; }
.logo-page .logo-small { font-size:12px; line-height:1.6; color:#52665e; }
.logo-upload-form { padding:26px; border:1px solid #d2dcd5; border-radius:8px; background:#fffdfa; min-width:0; }
.logo-upload-form label span { font-weight:400; font-size:12px; }
.logo-upload-form input[type=file] { display:block; width:100%; padding:10px 0; font-size:13px; }
.logo-upload-form input::file-selector-button { padding:9px 12px; margin-right:10px; border:1px solid #a4bbb0; border-radius:4px; background:#e8f0ea; color:#192650; cursor:pointer; }
.logo-upload-form .logo-small { margin-top:8px; }
.logo-page .logo-fit-label { display:flex; align-items:center; gap:10px; margin-top:22px; }
.logo-fit-label input { width:18px; height:18px; accent-color:var(--logo-teal); }
#logo-preview-panel { margin-top:24px; font-size:13px; }
.logo-preview-art { margin-top:10px; overflow:hidden; }
.logo-preview-art img { max-width:100%; max-height:160px; object-fit:contain; }
.logo-preview-art canvas { flex-shrink:0; width:200px; height:40px; }
#logo-file-status { font-size:13px; }
.logo-validation-error { color:#a33128; }
.logo-notice { border:1px solid #8fbaa4; border-radius:8px; background:#e4f1e8; padding:24px; margin:28px 0; scroll-margin-top:20px; }
.logo-notice .logo-art { margin-left:0; }
.logo-error { background:#fff1e9; border-color:#bc8d71; }
.logo-notice h2 { font-size:23px; }
.logo-next { background:#e2eee7; border-radius:8px; padding:28px; margin-top:35px; }
.logo-next p:last-child { margin-bottom:0; }
.logo-delete { margin:0; flex-shrink:0; }
.logo-delete button { font-size:12px; color:#9c3329; background:none; border:0; text-decoration:underline; cursor:pointer; }
.logo-featured { display:flex; justify-content:center; flex-wrap:wrap; gap:30px; margin:20px; }
@media(max-width:900px) { .logo-upload-section { gap:28px; grid-template-columns:1fr 1.2fr; } .logo-page { padding:25px 15px 40px; } }
@media(max-width:650px) { .logo-page { padding:22px 8px 35px; } .logo-upload-section { grid-template-columns:1fr; gap:15px; } .logo-search-row { flex-wrap:wrap; } .logo-search-row input { flex-basis:100%; } .logo-upload-form { padding:20px; } .logo-section { margin-top:30px; padding-top:28px; } .logo-page h1 { font-size:35px; } }
.logo-admin-tools { margin-top:20px; padding:16px; background:#e2eee7; border-radius:6px; }
.logo-admin-tools select { max-width:100%; padding:9px; border:1px solid #9aada4; border-radius:4px; background:#fffdfa; color:#192650; font:inherit; }
.logo-page .logo-admin-tools .logo-fit-label { margin-bottom:0; margin-top:12px; }
.logo-state-button { padding:5px 10px; color:#176d69; border:1px solid #9aada4; border-radius:4px; background:#fffdfa; cursor:pointer; font-size:12px !important; }
.logo-page .logo-state-label { margin:8px 0 !important; }
.logo-retire-form { margin:6px 0 0; }
.logo-retire-form > .logo-small { margin-top:8px; }