:root {
    --ls-primary:        #0073aa;
    --ls-primary-dark:   #005177;
    --ls-accent:         #00a8e6;
    --ls-bg-soft:        #f5fbfe;
    --ls-card-bg:        #ffffff;
    --ls-border:         #d9e6ef;
    --ls-text:           #26323a;
    --ls-muted:          #667885;
    --ls-success-bg:     #eafaf0;
    --ls-success-border: #3da56a;
    --ls-warning-bg:     #fff8e9;
    --ls-warning-border: #d79a2b;
}

/* ── Header ── */
.logo-suite-header      { display:flex; flex-direction:column; align-items:flex-start; }
.logo-suite-title       { margin:0; padding:0; font-family:Arial,sans-serif; font-size:2em; font-weight:bold; }
.logo-suite-title-text  { background:-webkit-linear-gradient(#0073aa,#00a8e6); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.logo-suite-version     { font-size:.85em; color:#666; margin-top:4px; }

/* ── Panel ── */
.logo-suite-panel       { background:#fff; border:1px solid #d9e6ef; border-radius:10px; margin-bottom:18px; box-shadow:0 1px 0 rgba(2,27,45,.04); padding:16px; }
.logo-suite-heading     { margin:0 0 10px; display:flex; align-items:center; gap:8px; font-size:1.06rem; font-weight:700; color:#0a4b78; }

/* ── Global hint text ── */
.logo-suite-panel small { display:block; color:#667885; margin-bottom:7px; font-size:.73rem; line-height:1.4; }

/* ── Form ── */
.logo-suite-form        { background:transparent; border:0; border-radius:0; padding:0; }

.form-row               { margin-bottom:12px; }
.form-row:last-child    { margin-bottom:0; }
.form-row label         { display:block; font-weight:700; margin-bottom:2px; color:var(--ls-text); font-size:.84rem; }
.form-row small         { display:block; color:var(--ls-muted); margin:0 0 7px; font-size:.73rem; }

.logo-suite-form input[type="text"] {
    width:100%; height:32px; border:1px solid #c7d8e4; border-radius:8px;
    padding:0 9px; background:#fff; color:var(--ls-text); box-sizing:border-box;
    transition:border-color .2s ease, box-shadow .2s ease;
}
.logo-suite-form input[type="text"]:focus {
    outline:none; border-color:var(--ls-primary);
    box-shadow:0 0 0 3px rgba(0,115,170,.15);
}

/* ── File input ── */
.logo-suite-form input[type="file"] { width:100%; font-size:.84rem; color:var(--ls-muted); box-sizing:border-box; }
.logo-suite-form input[type="file"]::file-selector-button,
.logo-suite-form input[type="file"]::-webkit-file-upload-button {
    height:30px; padding:0 12px; border-radius:8px;
    background:#fff; border:1px solid #8ec5f7; color:#1f2328;
    font-size:.82rem; font-weight:400; cursor:pointer;
    margin-right:8px;
    transition:background-color .15s ease, border-color .15s ease;
}
.logo-suite-form input[type="file"]::file-selector-button:hover,
.logo-suite-form input[type="file"]::-webkit-file-upload-button:hover {
    background:#f4f9ff; border-color:#72aee6; color:#0a4b78;
}

/* ── Upload alert ── */
.logo-upload-alert        { margin-top:7px; padding:7px 9px; border-left:3px solid #f0b429; background:#fff9e8; color:#5f4a10; border-radius:4px; font-size:.72rem; line-height:1.35; }
.logo-upload-alert-hidden { display:none; }

/* ── Logo settings layout ── */
.logo-settings-layout   { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:start; }
.logo-settings-fields   { min-width:0; }
.logo-settings-fields .form-row:last-child { margin-bottom:0; }

.logo-settings-preview  { border:1px solid var(--ls-border); border-radius:10px; background:#f9fcff; padding:18px 20px; min-height:250px; }
.logo-preview-title     { display:block; margin-bottom:10px; font-weight:700; font-size:.88rem; color:var(--ls-text); }

/* ── Preview elements ── */
#logo-preview-wrapper   { margin:0; min-height:185px; display:flex; align-items:center; justify-content:center; }
.logo-preview-image     { max-height:220px !important; max-width:100% !important; object-fit:contain; border:1px solid #d4e2ec; border-radius:8px; padding:12px; background:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.9); }

.logo-size-warning        { margin-top:8px; padding:7px 10px; background:#fff9e8; border-left:3px solid #f0b429; border-radius:4px; font-size:.72rem; color:#5f4a10; line-height:1.4; }
.logo-size-warning-hidden { display:none; }
.logo-preview-error     { color:#bf1d1d; margin-top:8px; font-size:.74rem; font-weight:600; }
.logo-preview-hidden    { display:none; }
.logo-preview-controls  { margin-top:10px; padding-top:8px; border-top:1px dashed #d5e3ee; }
.logo-preview-size-row  { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.logo-preview-control   { margin-bottom:8px; }
.logo-preview-control label { display:block; margin-bottom:3px; font-size:.78rem; font-weight:700; color:#3e515f; }
.logo-preview-control input[type="number"] { width:100%; height:30px; border:1px solid #c7d8e4; border-radius:7px; padding:0 8px; font-size:.74rem; color:var(--ls-text); box-sizing:border-box; }
.logo-preview-control-check { margin:2px 0 6px; }
.logo-preview-control-check label { display:inline-flex; align-items:center; gap:6px; font-size:.76rem; color:#3e515f; }
.logo-preview-control-help  { display:block; margin:0; font-size:.69rem; color:#667885; }
.logo-preview-controls .logo-preview-control:last-of-type { margin-bottom:0; }

/* ── SVG icons in headings ── */
svg.logo-icon { flex:0 0 auto; stroke:#4c5f6c; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; width:20px; height:20px; }

/* ── Info box ── */
.logo-suite-info-box    { background:var(--ls-bg-soft); border-left:4px solid #4ea1cf; color:#2b2b2b; padding:8px 12px; margin:18px 0 10px; border-radius:0 8px 8px 0; }
.logo-suite-info-title  { margin:0 0 6px; font-size:.88rem; font-weight:700; color:#0a5e87; }
.logo-suite-info-icon   { display:inline-block; width:14px; height:14px; line-height:14px; margin-right:6px; border-radius:3px; background:#86b8d8; color:#fff; font-size:11px; text-align:center; font-weight:700; vertical-align:1px; }
.logo-suite-info-list   { margin:0; padding-left:16px; }
.logo-suite-info-list li { margin:2px 0; font-size:.76rem; }

/* ── Action buttons ── */
.logo-suite-actions     { margin-top:16px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.logo-suite-actions .button {
    margin:0;
    padding:8px 18px;
    border-radius:10px !important;
    background:#fff !important;
    border:1px solid #8ec5f7 !important;
    color:#1f2328 !important;
    font-weight:400 !important;
    box-shadow:none !important;
    text-shadow:none !important;
    text-decoration:none !important;
    cursor:pointer;
    transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.logo-suite-actions .button:hover:not(:disabled),
.logo-suite-actions .button:focus:not(:disabled),
.logo-suite-actions .button:active:not(:disabled) {
    background:#f4f9ff !important;
    border-color:#72aee6 !important;
    color:#0a4b78 !important;
    text-shadow:none !important;
}
.logo-suite-actions .button[disabled],
.logo-suite-actions .button:disabled {
    opacity:.55;
    background:#fff !important;
    border-color:#d4e7f8 !important;
    color:#aab7c4 !important;
    box-shadow:none !important;
    cursor:not-allowed;
}

/* ── Footer ── */
.logo-suite-footer      { margin-top:40px; padding-top:20px; border-top:1px solid #ddd; font-size:.9em; color:#666; text-align:center; opacity:.85; }
.logo-suite-footer a    { color:#0073aa; text-decoration:none; }
.logo-suite-footer a:hover { text-decoration:underline; }
.logo-suite-footer .github-icon { vertical-align:middle; width:16px; height:16px; margin-right:4px; display:inline-block; }

/* ── Update badge ── */
.logo-suite-update-badge { display:inline-block; margin-left:6px; padding:2px 8px; border-radius:999px; background:#e6f4ff; border:1px solid #8ec5f7; color:#0a4b78; font-size:12px; font-weight:600; vertical-align:middle; }

/* ── Update notice banner ── */
.logo-suite-update-notice { display:block; width:100%; box-sizing:border-box; padding:14px 18px !important; margin:0 0 20px !important; border-left:4px solid #8ec5f7 !important; border-bottom:2px solid #8ec5f7 !important; border-radius:0 !important; }

/* ── Notices ── */
.notice-success { background:var(--ls-success-bg); border-left:4px solid var(--ls-success-border); padding:10px 12px; border-radius:6px; margin-bottom:12px; }
.notice-warning { background:var(--ls-warning-bg); border-left:4px solid var(--ls-warning-border); padding:10px 12px; border-radius:6px; margin-bottom:12px; }

/* ── Responsive ── */
@media (max-width: 680px) {
    .logo-preview-size-row { grid-template-columns:1fr; gap:6px; }
}
@media (max-width: 860px) {
    .logo-suite-title    { font-size:1.45rem; }
    .logo-suite-panel    { padding:13px; margin-bottom:14px; }
    .logo-suite-heading  { font-size:1.02rem; }
    .logo-settings-layout { grid-template-columns:1fr; }
}