.stream-main { padding-block: 70px 65px; }
.stream-heading { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: end; margin-bottom: 45px; }
.stream-heading h1 { font-size: clamp(48px, 6vw, 76px); }
.stream-heading > p { color: var(--muted); max-width: 420px; font-size: 17px; }
.stream-workspace { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 35px; align-items: start; }
#widget-form { border: 1px solid var(--line); background: #1d211c; border-radius: 6px; padding: 25px; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { font: 25px var(--serif); padding: 0; margin-bottom: 10px; }
.form-hint { font-size: 12px; color: var(--muted); margin: 10px 0 17px; line-height: 1.6; }
.clock-setting { border-top: 1px solid var(--line); padding: 16px 0; display: grid; gap: 10px; }
.clock-setting label:not(.clock-enable), .appearance label:not(.seconds-option) { display: grid; gap: 5px; font-size: 12px; color: #ccd3c2; }
.clock-enable, .seconds-option { display: flex; align-items: center; gap: 8px; font-size: 13px; }
input[type="checkbox"] { accent-color: var(--gold); width: 16px; height: 16px; margin: 0; }
.clock-setting input:not([type="checkbox"]), select, textarea { background: #151913; color: var(--ink); border: 1px solid #4b5545; border-radius: 3px; padding: 10px; width: 100%; min-width: 0; font: 13px var(--sans); }
.clock-setting input:disabled { opacity: .5; }
.appearance { border-top: 1px solid var(--line); padding-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.appearance legend { padding-top: 20px; }
.seconds-option { align-self: end; min-height: 40px; }
#widget-form > .button { width: 100%; margin-top: 22px; }
.preview-panel { min-width: 0; position: sticky; top: 20px; }
.preview-toolbar { display: flex; justify-content: space-between; gap: 12px; font-size: 10px; letter-spacing: .1em; color: var(--gold); margin: 0 0 14px; }
.preview-backdrop { overflow: hidden; border: 1px solid #495044; border-radius: 8px; height: 182px; position: relative; background: repeating-conic-gradient(#363c33 0% 25%, #2c3229 0% 50%) 0 / 24px 24px; }
#overlay-preview { border: 0; display: block; width: 900px; height: 180px; transform-origin: left top; }
.preview-note { font-size: 12px; color: var(--muted); margin: 15px 0 30px; }
.output-panel { border-top: 1px solid var(--line); padding-top: 25px; }
.output-panel > label { display: block; font-size: 13px; margin-bottom: 10px; }
textarea { resize: vertical; min-height: 100px; line-height: 1.6; }
.output-actions { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-top: 18px; }
.output-actions .button { padding: 10px 16px; min-height: 44px; font-size: 12px; }
.output-actions .text-link { font-size: 12px; }
.obs-steps { display: grid; grid-template-columns: 1fr 1.1fr; gap: 70px; border-top: 1px solid var(--line); margin-top: 70px; padding-top: 65px; }
.obs-steps p { margin-top: 25px; color: var(--muted); max-width: 400px; font-size: 14px; }
.obs-steps ol { padding-left: 25px; margin: 0; color: #cad0c2; font-size: 15px; }
.obs-steps li { padding: 12px 0 22px 8px; border-bottom: 1px solid var(--line); }
.stream-scope { border-top: 1px solid var(--line); margin-top: 45px; padding-top: 25px; font-size: 12px; color: var(--muted); }
.stream-scope > p { max-width: 800px; margin-bottom: 12px; }
@media (max-width: 900px) { .stream-workspace { grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); gap: 22px; } .stream-heading { gap: 30px; } }
@media (max-width: 760px) { .stream-main { padding-block: 45px; } .stream-heading { display: block; } .stream-heading > p { margin-top: 25px; font-size: 15px; } .stream-workspace { display: flex; flex-direction: column; gap: 35px; } #widget-form { width: 100%; } .preview-panel { position: static; width: 100%; } .obs-steps { display: block; margin-top: 45px; padding-top: 40px; } .obs-steps ol { margin-top: 25px; } }