.sp-page { max-width: 1200px; }
.sp-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.sp-status { min-height: 24px; margin: 12px 0; color: var(--hq-muted); }
.sp-status--error { color: #b42318; font-weight: 600; }
.sp-settings { display: flex; flex-wrap: wrap; gap: 18px 30px; padding: 18px 0; border-top: 1px solid var(--hq-line); border-bottom: 1px solid var(--hq-line); margin-bottom: 16px; }
.sp-check { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.sp-check input[type=checkbox] { width: 18px; height: 18px; margin: 0; accent-color: var(--hq-accent); }
.sp-card { margin-top: 18px; border: 1px solid var(--hq-line); border-radius: var(--hq-radius); background: white; }
.sp-card > summary { display: flex; justify-content: space-between; align-items: center; gap: 15px; min-height: 64px; padding: 18px 22px; font-size: 15px; cursor: pointer; }
.sp-card > summary::after { content: '+'; margin-left: 10px; font-size: 22px; }
.sp-card[open] > summary::after { content: '−'; }
.sp-card__badge { font-size: 12px; color: var(--hq-muted); margin-left: auto; }
.sp-card__inner { display: grid; grid-template-columns: minmax(0,1fr) 220px; gap: 28px; padding: 22px; border-top: 1px solid var(--hq-line); }
.sp-editor { min-width: 0; }
.sp-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 18px; }
.sp-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; font-size: 13px; }
.sp-field--wide { grid-column: 1/-1; }
.sp-field :is(input,select,textarea) { width: 100%; min-width: 0; padding: 10px; border: 1px solid #b7b6ae; border-radius: 4px; background: white; color: var(--hq-ink); font: inherit; }
.sp-field textarea { resize: vertical; }
.sp-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.sp-preview { align-self: start; padding: 20px; border: 3px solid black; border-radius: 16px; background: white; color: black; box-shadow: 5px 5px 0 black; }
.sp-preview--dark { background: black; color: white; box-shadow: 5px 5px 0 #ff4a00; }
.sp-preview small { display: block; font-size: 10px; line-height: 1.5; font-weight: 700; text-transform: uppercase; overflow-wrap: anywhere; }
.sp-preview strong { display: block; margin: 18px 0; font: 700 28px/1.15 'HQ Display',sans-serif; overflow-wrap: anywhere; }
.sp-preview p { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.sp-preview > span { display: block; padding-top: 14px; border-top: 3px solid #ff4a00; margin-top: 26px; font-size: 12px; font-weight: 700; text-transform: uppercase; overflow-wrap: anywhere; }
@media(max-width:1100px) { .sp-card__inner { grid-template-columns: minmax(0,1fr); } .sp-preview { max-width: 360px; } }
@media(max-width:600px) { .sp-fields { grid-template-columns: minmax(0,1fr); } .sp-field :is(input,select,textarea) { font-size: 16px; } .sp-card__inner { padding: 16px; } .sp-card > summary { flex-wrap: wrap; padding: 15px; } .sp-check { min-height: 44px; } .sp-card__badge { margin-left: 0; } }