:root {
    --rs-primary: #009ACA;
    --rs-primary-dark: #007DA6;
    --rs-accent: #CDF6FF;
    --rs-gray: #7B7B7B;
    --rs-navy: #0A1628;
    --rs-slate: #1E293B;
    --rs-white: #FFFFFF;
    --font-primary: 'DM Sans', sans-serif;
    --font-mono: 'Space Mono', monospace;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { background: #0B0F1A; color: #E2E8F0; font-family: var(--font-primary); min-height: 100vh; }
  .top-bar { padding: 24px 32px; border-bottom: 0.5px solid rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
  .top-bar h1 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: #F8FAFC; }
  .top-bar h1 span { color: var(--rs-primary); }
  .top-bar .subtitle { font-size: 12px; color: #64748B; font-family: var(--font-mono); }
  .section { max-width: 1400px; margin: 0 auto; padding: 32px; }
  .section-title { font-size: 14px; font-weight: 700; color: var(--rs-primary); letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--font-mono); margin-bottom: 16px; }
  .upload-zone { border: 1.5px dashed rgba(0,154,202,0.3); border-radius: 12px; padding: 40px; text-align: center; cursor: pointer; transition: all 200ms ease; background: rgba(0,154,202,0.03); position: relative; }
  .upload-zone:hover { border-color: rgba(0,154,202,0.6); background: rgba(0,154,202,0.06); }
  .upload-zone.has-image { border-color: rgba(0,154,202,0.15); padding: 20px; cursor: default; }
  .upload-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
  .upload-zone.has-image input[type="file"] { display: none; }
  .upload-icon { width: 48px; height: 48px; margin: 0 auto 16px; border-radius: 12px; background: rgba(0,154,202,0.1); display: flex; align-items: center; justify-content: center; }
  .upload-icon svg { color: var(--rs-primary); }
  .upload-zone h3 { font-size: 16px; font-weight: 600; color: #F8FAFC; margin-bottom: 6px; }
  .upload-zone p { font-size: 13px; color: #94A3B8; line-height: 1.5; }
  .upload-zone p strong { color: var(--rs-primary); }
  .change-photo-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 7px 14px; border-radius: 6px; border: 0.5px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: #CBD5E1; font-size: 12px; font-family: var(--font-primary); cursor: pointer; transition: all 150ms ease; }
  .change-photo-btn:hover { background: rgba(255,255,255,0.08); color: #F8FAFC; }
  .controls-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; padding: 20px; background: rgba(255,255,255,0.03); border: 0.5px solid rgba(255,255,255,0.06); border-radius: 8px; margin-bottom: 20px; }
  .control-group { display: flex; flex-direction: column; gap: 6px; }
  .control-group label { font-size: 10px; font-weight: 600; color: #64748B; letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--font-mono); }
  .control-group select { padding: 8px 12px; border-radius: 6px; border: 0.5px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: #F8FAFC; font-family: var(--font-primary); font-size: 13px; width: 100%; outline: none; transition: border-color 150ms; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; cursor: pointer; }
  .control-group select:focus { border-color: var(--rs-primary); }
  .control-group select option { background: #1E293B; color: #F8FAFC; }
  .control-group input[type="text"], .control-group input[type="url"], .control-group input[type="email"], .control-group input[type="tel"] { padding: 8px 12px; border-radius: 6px; border: 0.5px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: #F8FAFC; font-family: var(--font-primary); font-size: 13px; width: 100%; outline: none; transition: border-color 150ms; }
  .control-group input::placeholder { color: #475569; }
  .control-group input:focus { border-color: var(--rs-primary); }
  .control-group input[type="range"] { width: 100%; accent-color: var(--rs-primary); }
  .control-group.field-error input, .control-group.field-error select, .control-group.field-error .email-input-row { border-color: #EF4444 !important; }
  .control-group.field-error label { color: #EF4444; }
  .controls-divider { grid-column: 1 / -1; height: 0.5px; background: rgba(255,255,255,0.06); margin: 4px 0; }
  .controls-section-label { grid-column: 1 / -1; font-size: 11px; font-weight: 600; color: #94A3B8; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 4px; }
  .results-section { padding-top: 0; }
  .template-col h3 { font-size: 15px; font-weight: 600; color: #F8FAFC; margin-bottom: 4px; }
  .template-col .subtitle { font-size: 12px; color: #64748B; margin-bottom: 20px; font-family: var(--font-mono); }
  .previews-flex { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
  .preview-item { display: flex; flex-direction: column; gap: 8px; position: relative; }
  .preview-label { font-size: 10px; font-weight: 600; color: #475569; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--font-mono); }
  .export-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 5px; border: 0.5px solid rgba(0,154,202,0.2); background: rgba(0,154,202,0.08); color: var(--rs-primary); font-size: 11px; font-family: var(--font-mono); cursor: pointer; transition: all 150ms ease; margin-top: 4px; }
  .export-btn:hover { background: rgba(0,154,202,0.15); border-color: rgba(0,154,202,0.4); }
  .export-btn svg { width: 12px; height: 12px; }
  .export-btn.success { background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.3); color: #22C55E; }
  .backdrop { position: relative; overflow: hidden; border-radius: 8px; }
  .backdrop img.headshot { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 85%; width: auto; object-fit: contain; z-index: 2; }
  .t-mesh { background: radial-gradient(ellipse at 50% 55%, rgba(0,154,202,0.85) 0%, transparent 45%), radial-gradient(ellipse at 20% 30%, #065A6E 0%, transparent 50%), radial-gradient(ellipse at 85% 75%, #007DA6 0%, transparent 40%), #0A1628; }
  .size-large { width: 280px; height: 350px; }
  .size-square { width: 110px; height: 110px; border-radius: 6px; }
  .size-circle { width: 110px; height: 110px; border-radius: 50%; }
  .size-sig { width: 96px; height: 96px; border-radius: 50%; }
  .thirds-grid { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
  .thirds-grid .tg-line { position: absolute; background: rgba(255,255,255,0.25); }
  .thirds-grid .tg-h { left: 0; right: 0; height: 1px; }
  .thirds-grid .tg-v { top: 0; bottom: 0; width: 1px; }
  .thirds-grid .tg-h1 { top: 33.333%; }
  .thirds-grid .tg-h2 { top: 66.666%; }
  .thirds-grid .tg-v1 { left: 33.333%; }
  .thirds-grid .tg-v2 { left: 66.666%; }
  .name-plate { text-align: center; margin-top: 12px; }
  .name-plate .np-name { font-size: 15px; font-weight: 600; color: #F8FAFC; }
  .name-plate .np-title { font-size: 12px; color: #94A3B8; margin-top: 2px; }
  .name-plate .np-loc { font-size: 11px; color: #64748B; font-family: var(--font-mono); margin-top: 3px; }
  .sig-live-wrap { background: #FFFFFF; border-radius: 8px; padding: 24px; max-width: 600px; }
  .sig-live-table { border-collapse: collapse; font-family: Arial, Helvetica, sans-serif; color: #0A1628; font-size: 13px; line-height: 1.4; }
  .sig-live-table td { vertical-align: top; }
  .sig-photo-cell { padding-right: 16px; text-align: center; }
  .sig-info .si-name { font-size: 15px; font-weight: 700; color: #0A1628; }
  .sig-info .si-title-line { font-size: 12px; color: #7B7B7B; margin-top: 2px; }
  .sig-info .si-divider { margin: 8px 0; color: #CDF6FF; font-size: 14px; line-height: 1; letter-spacing: -1px; }
  .sig-info .si-contact { font-size: 12px; color: #64748B; line-height: 1.5; }
  .sig-info .si-contact a { color: #009ACA; text-decoration: none; }
  .sig-info .si-contact .si-dot { color: #CBD5E1; margin: 0 4px; }
  .sig-info .si-address { font-size: 11px; color: #94A3B8; margin-top: 4px; }
  .sig-info .si-socials { margin-top: 8px; display: flex; gap: 8px; align-items: center; }
  .sig-info .si-socials a { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #009ACA; color: #FFFFFF; text-decoration: none; }
  .sig-info .si-socials a:hover { opacity: 0.9; }
  .sig-info .si-ctas { margin-top: 10px; font-size: 12px; color: #64748B; line-height: 1.5; }
  .sig-info .si-cta-primary { display: inline; font-size: 12px; font-weight: 700; color: #009ACA; text-decoration: none; font-family: Arial, Helvetica, sans-serif; }
  .sig-info .si-cta-secondary { display: inline; font-size: 12px; font-weight: 400; color: #009ACA; text-decoration: none; font-family: Arial, Helvetica, sans-serif; }
  .sig-info .si-cta-secondary:hover { text-decoration: underline; }
  .sig-logo-stacked { display: block; width: 40px; height: auto; margin: 8px auto 0; border: 0; outline: none; }
  .sig-output-section { margin-top: 24px; padding: 24px; background: rgba(255,255,255,0.03); border: 0.5px solid rgba(255,255,255,0.06); border-radius: 8px; }
  .sig-output-section h3 { font-size: 14px; font-weight: 600; color: #F8FAFC; margin-bottom: 4px; }
  .sig-template-select { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
  .sig-template-btn { padding: 6px 14px; font-size: 12px; font-family: var(--font-primary); font-weight: 500; border: 0.5px solid rgba(255,255,255,0.1); border-radius: 6px; background: rgba(255,255,255,0.04); color: #94A3B8; cursor: pointer; transition: all 150ms; }
  .sig-template-btn.active { background: rgba(0,154,202,0.1); border-color: rgba(0,154,202,0.3); color: var(--rs-primary); }
  .copy-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 6px; border: none; background: var(--rs-primary); color: #FFFFFF; font-size: 13px; font-weight: 600; font-family: var(--font-primary); cursor: pointer; transition: all 150ms; }
  .copy-btn:hover { background: var(--rs-primary-dark); }
  .copy-btn.copied { background: #22C55E; }
  .copy-btn:disabled { background: #334155; color: #64748B; cursor: not-allowed; }
  .copy-btn:disabled:hover { background: #334155; }
  .validation-msg { font-size: 11px; color: #EF4444; font-family: var(--font-mono); margin-top: 6px; display: none; }
  .validation-msg.visible { display: block; }
  .divider { height: 0.5px; background: rgba(255,255,255,0.06); margin: 8px 0 24px; }
  .email-input-row { display: flex; align-items: center; gap: 0; border-radius: 6px; border: 0.5px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); overflow: hidden; transition: border-color 150ms; }
  .email-input-row:focus-within { border-color: var(--rs-primary); }
  .email-input-row input { flex: 1; padding: 8px 2px 8px 12px; border: none; background: transparent; color: #F8FAFC; font-family: var(--font-primary); font-size: 13px; outline: none; min-width: 60px; }
  .email-input-row input::placeholder { color: #475569; }
  .email-suffix { padding: 8px 12px 8px 0; font-size: 13px; color: #64748B; font-family: var(--font-primary); white-space: nowrap; user-select: none; }
  .workflow-steps { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
  .workflow-step { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 8px; background: rgba(255,255,255,0.03); border: 0.5px solid rgba(255,255,255,0.08); }
  .workflow-step .step-num { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: rgba(0,154,202,0.12); border: 0.5px solid rgba(0,154,202,0.25); color: #009ACA; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; font-family: var(--font-mono); }
  .workflow-step p { font-size: 12px; color: #94A3B8; line-height: 1.5; }
  .workflow-step p strong { color: #E2E8F0; }
  .outlook-instructions { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
  .outlook-instructions .step-row { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 8px; background: rgba(255,255,255,0.03); border: 0.5px solid rgba(255,255,255,0.08); font-size: 12px; color: #94A3B8; line-height: 1.5; }
  .outlook-instructions .step-row .num { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: rgba(0,154,202,0.12); border: 0.5px solid rgba(0,154,202,0.25); color: #009ACA; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; font-family: var(--font-mono); }
  .outlook-instructions a { color: var(--rs-primary); text-decoration: none; }
  .outlook-instructions a:hover { text-decoration: underline; }
  .photo-setup { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; margin-bottom: 24px; }
  .photo-setup-left, .photo-setup-right { display: flex; flex-direction: column; }
  .photo-setup-left h2 { font-size: 18px; font-weight: 700; color: #F8FAFC; margin-bottom: 12px; }
  .photo-setup-right .positioning-controls { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: rgba(255,255,255,0.03); border: 0.5px solid rgba(255,255,255,0.06); border-radius: 8px; margin-bottom: 16px; }
  .photo-setup-right .positioning-controls .control-group { display: flex; flex-direction: column; gap: 6px; }
  .photo-setup-right .positioning-controls label { font-size: 10px; font-weight: 600; color: #64748B; letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--font-mono); }
  .photo-setup-right .positioning-controls input[type="range"] { width: 100%; accent-color: var(--rs-primary); }
  @media (max-width: 768px) { .controls-grid { grid-template-columns: 1fr 1fr; } .photo-setup { grid-template-columns: 1fr; } }