.promo-builder-page { grid-column: 2 / -1; min-width: 0; padding: 0; overflow: hidden; }
.promo-builder-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; border-bottom: 1px solid #17345d; background: #081833; }
.promo-builder-title, .promo-builder-actions { display: flex; align-items: center; gap: 12px; }
.promo-builder-title > i { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #25dfff; border-radius: 13px; color: #25dfff; background: #082542; font-style: normal; font-weight: 900; box-shadow: 0 0 18px rgba(37,223,255,.16); }
.promo-builder-title h1, .promo-builder-card h2 { margin: 0; color: #f6f9ff; }.promo-builder-title p, .promo-builder-card p { margin: 3px 0 0; color: #b6c4dc; }
.promo-builder-actions { flex-wrap: wrap; justify-content: flex-end; }.promo-builder-actions > span { color: #9fb2d1; font-size: 13px; }.promo-builder-actions button, .promo-url-row button { min-height: 38px; padding: 0 15px; border: 1px solid #28558b; border-radius: 10px; color: #dff7ff; background: #0a2042; cursor: pointer; }.promo-builder-actions button.primary { border-color: #25dfff; color: #031725; background: #25dfff; font-weight: 800; }
.promo-builder-workspace { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr); gap: 16px; padding: 16px; background: #050f23; }
.promo-builder-column { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.promo-builder-card { padding: 16px; border: 1px solid #1a3a66; border-radius: 16px; background: #081833; box-shadow: 12px 15px 24px rgba(0,0,0,.24); }.promo-builder-card > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }.promo-builder-card > header h2 { font-size: 16px; }.promo-builder-card > header p, .promo-builder-card > small { font-size: 12px; line-height: 1.5; color: #aebdd6; }
.promo-preview-card iframe { display: block; width: 100%; min-height: 430px; border: 1px solid #1b4777; border-radius: 14px; background: #061126; }.promo-preview-card header > span { color: #25dfff; font-size: 12px; font-weight: 800; }
.promo-url-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; margin-bottom: 8px; }.promo-url-row input, .promo-settings-grid input, .promo-settings-grid select, .promo-settings-grid textarea { width: 100%; min-width: 0; border: 1px solid #28558b; border-radius: 9px; color: #eef8ff; background: #06142c; outline: none; }.promo-url-row input { height: 40px; padding: 0 12px; }.promo-settings-grid input, .promo-settings-grid select { height: 40px; padding: 0 10px; }.promo-settings-grid textarea { padding: 10px; resize: vertical; }.promo-settings-grid input:focus, .promo-settings-grid select:focus, .promo-settings-grid textarea:focus { border-color: #25dfff; box-shadow: 0 0 0 2px rgba(37,223,255,.12); }
.promo-settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }.promo-settings-grid label { display: grid; gap: 6px; color: #dce8fa; font-size: 13px; font-weight: 700; }.promo-settings-grid label.wide { grid-column: 1/-1; }.promo-settings-grid label small { color: #91a5c4; font-weight: 500; }.promo-settings-grid input[type="color"] { padding: 4px; }.promo-settings-grid input[type="range"] { padding: 0; }.promo-settings-grid output { color: #25dfff; font-weight: 800; }
.promo-enable, .promo-check { display: flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 9px !important; }.promo-enable input, .promo-check input { width: 18px; height: 18px; accent-color: #25dfff; }.promo-enable b { width: 9px; height: 9px; border-radius: 50%; background: #25dfff; box-shadow: 0 0 10px #25dfff; }.promo-enable span { color: #dffaff; font-size: 12px; font-weight: 800; }
@media (max-width: 1000px) { .promo-builder-workspace { grid-template-columns: 1fr; }.promo-builder-header { align-items: flex-start; flex-direction: column; }.promo-builder-actions { justify-content: flex-start; }.promo-preview-card iframe { min-height: 360px; } }
@media (max-width: 620px) { .promo-builder-workspace { padding: 10px; }.promo-settings-grid { grid-template-columns: 1fr; }.promo-settings-grid label.wide { grid-column: auto; }.promo-builder-actions button { flex: 1 1 42%; }.promo-url-row { grid-template-columns: 1fr; }.promo-preview-card iframe { min-height: 300px; } }