.social-image-page { margin: 0; min-height: 100vh; background: radial-gradient(circle at 10% 10%,#1f2e3d,#0f1720); color: #e8edf3; font: 16px Arial,sans-serif; }
.social-image-header { max-width: 1200px; padding: 20px 16px 0; margin: auto; display: flex; gap: 20px; align-items: center; }
.social-image-header a { color: #e8edf3; text-decoration: none; font-weight: 700; }
.social-image-header span { font-size: .85rem; color: #b4c4d4; overflow-wrap: anywhere; }
.social-brand-logo { display:block; width:160px; max-width:36vw; height:auto; }
.social-editor { --social-accent: #8fc63d; --social-line: #2c3c4d; box-sizing: border-box; display: grid; grid-template-columns: 340px minmax(0,1fr); max-width: 1200px; margin: 24px auto; padding: 16px; gap: 16px; color: #e8edf3; font: 16px Arial,sans-serif; }
.social-editor[data-service="quote"] { --social-accent: #4dc9ee; }
.social-editor *, .social-editor *::before, .social-editor *::after { box-sizing: border-box; }
.social-editor .social-controls { background: #172330; border: 1px solid var(--social-line); border-radius: 12px; padding: 14px; min-width: 0; }
.social-editor h1 { margin: 0 0 14px; color: #e8edf3; font: 700 18px Arial,sans-serif; }
.social-editor label { display: block; font-size: 13px; margin-bottom: 6px; color: #e8edf3; }
.social-editor .social-field { margin-bottom: 12px; min-width: 0; }
.social-editor :is(input,select,textarea) { width: 100%; max-width: 100%; background: #0f1b27; border: 1px solid var(--social-line); color: #e8edf3; border-radius: 8px; padding: 10px; font: 16px Arial,sans-serif; }
.social-editor input[type="range"] { padding: 8px 0; accent-color: var(--social-accent); }
.social-editor textarea { resize: vertical; min-height: 100px; }
.social-editor button { min-height: 44px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--social-line); background: #0f1b27; color: #e8edf3; cursor: pointer; font: 600 14px Arial,sans-serif; }
.social-editor .social-download { grid-column:1 / -1; width: 100%; background: var(--social-accent); color: #082334; border: 0; font-weight: 700; margin-top: 10px; }
.social-editor .social-photo-tools { position:sticky; top:88px; z-index:2; width:100%; display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:8px 0; margin-bottom:8px; background:inherit; }
.social-editor .social-photo-tools label { width:100%; margin:0; }
.social-editor .social-photo-tools .social-adjust { flex:1; min-width:220px; }
.social-editor .social-photo-tools input[type="range"] { flex:1; min-width:100px; max-width:160px; }
.social-editor .social-photo-mode { margin-left:auto; }
.social-editor button { touch-action:manipulation; }
.social-editor button:disabled { opacity: .45; cursor: not-allowed; }
.social-editor :focus-visible { outline: 3px solid var(--social-accent); outline-offset: 3px; }
.social-editor .social-help { color: #b4c4d4; font-size: 12px; line-height: 1.5; margin: 10px 0 0; }
.social-editor .social-counter { display: block; font-size: 12px; color: #b4c4d4; margin-top: 4px; }
.social-editor .social-warning { color: #ffd091; font-size: 13px; white-space: pre-line; overflow-wrap: anywhere; }
.social-editor .social-preview { background: #071018; border: 1px solid var(--social-line); border-radius: 12px; padding: 12px; display: flex; flex-direction:column; justify-content: center; align-items: center; min-width: 0; }
.social-editor canvas { display: block; max-width: 100%; width: auto; height: auto; max-height: 82vh; background: #0b1621; border-radius: 8px; touch-action: none; cursor: grab; }
.social-editor .social-adjust { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.social-editor .social-empty { grid-column: 1 / -1; padding: 24px; background: #172330; border: 1px solid var(--social-line); border-radius: 12px; }
.social-editor .social-profile-details { margin-bottom:14px; border-top:1px solid var(--social-line); padding-top:10px; }
.social-editor .social-profile-details summary { color:#b4c4d4; cursor:pointer; min-height:44px; display:list-item; padding:10px 0; font-size:13px; }
.social-editor .social-profile-details[open] summary { margin-bottom:8px; }
.social-editor [hidden] { display:none !important; }
@media (max-width: 900px) { .social-editor { grid-template-columns: minmax(0,1fr); margin: 12px auto; padding: 12px; } .social-editor canvas { max-height: 72vh; } }
@media (prefers-reduced-motion: reduce) { .social-editor * { transition: none !important; } }
.social-image-footer { padding:24px 16px; text-align:center; font-size:13px; color:#abb9ca; }
.social-image-footer span { display:block; }
.social-image-footer a { color:#e8edf3; }

/* Standalone Twibbon pages use Zentry's light blue workspace. */
.social-image-page-light { background:#f4f6fa; color:#0f1e3d; color-scheme:light; display:flex; flex-direction:column; min-height:100dvh; }
.social-image-page-light .social-image-header { position:sticky; top:0; z-index:10; box-sizing:border-box; width:100%; max-width:none; min-height:76px; padding:12px max(16px,calc((100% - 1168px)/2)); margin:0; background:#f4f6fa; border-bottom:1px solid #cbd5e1; }
.social-image-page-light .social-editor { width:100%; flex:1; align-items:start; }
.social-image-page-light .social-image-footer { position:sticky; bottom:0; z-index:10; margin-top:auto; padding:12px 16px max(12px,env(safe-area-inset-bottom)); background:#f4f6fa; border-top:1px solid #cbd5e1; }
.social-image-page-light .social-image-header a,
.social-image-page-light .social-image-footer a { color:#2563eb; }
.social-image-page-light .social-image-header span,
.social-image-page-light .social-image-footer { color:#526178; }
.social-image-page-light .social-editor { --social-accent:#2563eb; --social-line:#cbd5e1; color:#0f1e3d; }
.social-image-page-light .social-editor :is(.social-controls,.social-empty) { background:#fff; }
.social-image-page-light .social-editor :is(h1,label) { color:#0f1e3d; }
.social-image-page-light .social-editor :is(input,select,textarea,button) { background:#fff; color:#0f1e3d; min-height:44px; }
.social-image-page-light .social-editor .social-download { background:var(--social-accent); color:#fff; }
.social-image-page-light .social-editor .social-photo-mode { background:#2563eb; border-color:#2563eb; color:#fff; }
.social-image-page-light .social-editor :is(.social-help,.social-counter,.social-profile-details summary) { color:#526178; }
.social-image-page-light .social-editor .social-warning { color:#855207; }
.social-image-page-light .social-editor .social-preview { background:#e8edf5; }
.social-image-page-light .social-editor canvas { background:#fff; }
@media (max-width:600px) {
    .social-image-page-light { overscroll-behavior-y:contain; }
    .social-image-page-light .social-image-header { min-height:64px; padding:8px 12px; gap:12px; }
    .social-image-page-light .social-brand-logo { width:120px; }
    .social-image-page-light .social-image-header span { font-size:12px; }
    .social-image-page-light .social-image-footer { font-size:11px; padding:8px 12px max(8px,env(safe-area-inset-bottom)); }
    .social-editor .social-controls { padding:12px; }
    .social-editor .social-field { margin-bottom:10px; }
    .social-editor .social-counter { display:none; }
    .social-editor .social-help { margin-top:8px; }
    .social-editor .social-photo-tools { top:72px; gap:6px; }
    .social-editor .social-photo-tools label,.social-editor .social-photo-tools input[type="range"] { display:none; }
    .social-editor .social-photo-mode { order:-1; width:100%; }
    .social-editor .social-photo-tools .social-adjust { width:100%; flex-basis:100%; min-width:0; }
}