:root { color-scheme:light; --surface:#f5f5f7; --card:#fff; --ink:#1d1d1f; --muted:#6e6e73; --soft:#86868b; --line:#e5e5e9; --accent:#c94752; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; }
* { box-sizing:border-box; } body { min-height:100dvh; margin:0; color:var(--ink); background:var(--surface); font-size:14px; line-height:1.5; } a,button,input,textarea { font:inherit; } a { color:inherit; text-decoration:none; } button { cursor:pointer; } button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible { outline:3px solid var(--accent); outline-offset:3px; } [hidden] { display:none!important; }
.editor-nav { display:flex; align-items:center; justify-content:space-between; width:min(1080px,calc(100% - 64px)); height:76px; margin:auto; }.editor-brand { display:flex; align-items:center; gap:8px; font-size:23px; font-weight:750; letter-spacing:-1px; }.editor-brand>span { color:var(--accent); font-size:27px; }.editor-nav-actions { display:flex; gap:22px; align-items:center; color:var(--muted); font-size:12px; font-weight:600; }.editor-nav-actions>a:first-child { color:var(--accent); }.editor-back { padding-left:22px; border-left:1px solid var(--line); }
.editor-shell { width:min(1080px,calc(100% - 64px)); margin:auto; padding:60px 0 90px; }.editor-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:48px; }.editor-kicker { display:block; margin-bottom:13px; color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; }.editor-heading h1 { margin:0; font-size:clamp(42px,6vw,67px); line-height:1; letter-spacing:-.065em; font-weight:650; }.editor-heading p { max-width:430px; margin:18px 0 0; color:var(--muted); font-size:15px; }.editor-save-status { flex-shrink:0; padding:8px 10px; border:1px solid var(--line); border-radius:99px; color:#4e7b61; background:#fff; font-size:10px; font-weight:650; }
.editor-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:18px; align-items:start; }.editor-main-column,.editor-side-column { display:grid; gap:18px; }.editor-card { padding:23px; border:1px solid var(--line); border-radius:15px; background:var(--card); }.editor-card-heading { display:flex; align-items:start; justify-content:space-between; gap:15px; margin-bottom:24px; }.editor-card-heading>div { display:flex; align-items:center; gap:10px; }.editor-step { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; color:var(--accent); background:#fbeef0; font-size:10px; font-weight:700; }.editor-card h2 { margin:0; font-size:21px; letter-spacing:-.045em; font-weight:650; }.editor-card-heading>span { color:var(--soft); font-size:10px; text-transform:uppercase; letter-spacing:.03em; }.editor-fields-two { display:grid; grid-template-columns:1fr 1fr; gap:13px; }.editor-card label { display:block; margin-top:16px; color:var(--muted); font-size:11px; font-weight:600; }.editor-fields-two label { margin-top:0; }.editor-card input,.editor-card textarea { display:block; width:100%; margin-top:7px; padding:11px 12px; border:1px solid #dedee4; border-radius:9px; color:var(--ink); background:#fafafb; outline:none; font-size:13px; font-weight:400; }.editor-card textarea { resize:vertical; line-height:1.7; }.editor-card input:focus,.editor-card textarea:focus { border-color:var(--accent); }.editor-helper { margin:9px 0 0; color:var(--soft); font-size:10px; line-height:1.6; }.editor-photo-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; }.editor-photo { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:9px; background:#f3f3f5; }.editor-photo img { display:block; width:100%; aspect-ratio:1; object-fit:cover; }.editor-photo small { display:block; padding:4px 5px; color:var(--soft); font-size:9px; }.editor-photo button { position:absolute; top:5px; right:5px; display:grid; place-items:center; width:22px; height:22px; padding:0; border:1px solid rgba(255,255,255,.8); border-radius:50%; color:#fff; background:rgba(29,29,31,.75); font-size:15px; }.editor-photo button:hover { background:var(--accent); }.editor-drop { display:grid; grid-template-columns:30px 1fr; align-items:center; gap:0 10px; margin-top:14px!important; padding:13px 14px; border:1px dashed #cfcfd6; border-radius:10px; background:#fafafb; cursor:pointer; }.editor-drop input { display:none; }.editor-drop-mark { grid-row:span 2; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:var(--accent); background:#fbeef0; font-size:22px; font-weight:300; }.editor-drop strong { color:var(--ink); font-size:11px; }.editor-drop small { color:var(--soft); font-size:10px; }.editor-drop:hover { border-color:var(--accent); background:#fff7f7; }.editor-message-label { margin-top:0!important; }.editor-message-actions { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:11px; color:var(--soft); font-size:10px; }.editor-quiet-button { padding:0; border:0; color:var(--accent); background:none; font-size:11px; font-weight:650; }.editor-field-label { display:block; margin-bottom:10px; color:var(--muted); font-size:11px; font-weight:650; }.editor-audio-list { display:grid; gap:7px; }.editor-audio-choice { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:11px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:#fff; text-align:left; }.editor-audio-choice.is-selected { border-color:var(--accent); background:#fff6f6; }.editor-audio-choice span,.editor-audio-choice b,.editor-audio-choice small { display:block; }.editor-audio-choice b { font-size:11px; }.editor-audio-choice small { margin-top:3px; color:var(--soft); font-size:10px; font-weight:400; }.editor-audio-choice i { padding:5px 7px; border-radius:99px; color:var(--accent); background:#fbeef0; font-size:9px; font-style:normal; font-weight:650; }.editor-theme-label { margin-top:20px; }.editor-theme-list { display:grid; grid-template-columns:1fr 1fr; gap:7px; }.editor-theme-list button { min-height:35px; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:#fff; font-size:10px; font-weight:650; }.editor-theme-list button.is-selected { border-color:var(--accent); color:var(--accent); background:#fff6f6; }.editor-link-card { padding:20px; }.editor-link-symbol { display:grid; place-items:center; width:31px; height:31px; margin-bottom:13px; border-radius:9px; color:var(--accent); background:#fbeef0; font-size:18px; }.editor-link-card h2 { font-size:18px; }.editor-link-card code { display:block; overflow-wrap:anywhere; margin:13px 0; padding:11px; border-radius:7px; color:var(--muted); background:#f7f7f9; font-size:10px; }.editor-link-card>button { min-height:35px; padding:0 11px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:#fff; font-size:10px; font-weight:650; }.editor-link-card p { margin:12px 0 0; color:var(--soft); font-size:10px; line-height:1.6; }.editor-side-actions { display:grid; gap:9px; }.editor-save-button,.editor-cancel-button { display:flex; align-items:center; justify-content:center; min-height:47px; border:0; border-radius:9px; font-size:12px; font-weight:650; }.editor-save-button { color:#fff; background:var(--accent); }.editor-save-button:hover { background:#b53b46; }.editor-cancel-button { border:1px solid var(--line); color:var(--ink); background:#fff; }.editor-feedback { min-height:20px; margin:19px 0 0; color:var(--accent); font-size:11px; }
@media(max-width:800px) { .editor-nav,.editor-shell { width:calc(100% - 36px); }.editor-nav { height:68px; }.editor-nav-actions { gap:12px; font-size:10px; }.editor-back { padding-left:12px; }.editor-shell { padding:40px 0 70px; }.editor-heading { display:block; margin-bottom:35px; }.editor-heading h1 { font-size:47px; }.editor-save-status { display:inline-block; margin-top:20px; }.editor-layout { grid-template-columns:1fr; }.editor-side-column { order:-1; }.editor-fields-two { grid-template-columns:1fr; gap:0; }.editor-fields-two label+label { margin-top:16px; }.editor-photo-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.editor-message-actions { align-items:flex-start; flex-direction:column; gap:7px; } }
/* Premium template library and reorder feedback */
.editor-photo { cursor:grab; user-select:none; touch-action:pan-y; transition:transform .2s cubic-bezier(.22,1,.36,1), opacity .2s ease, box-shadow .2s ease; }.editor-photo:active { cursor:grabbing; }.editor-photo.is-dragging { opacity:.45; transform:scale(.97); }.editor-photo.is-drag-over { transform:translateY(-3px); box-shadow:0 0 0 2px var(--accent), 0 8px 18px rgba(29,29,31,.12); }.editor-photo:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.editor-youtube-audio { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }.editor-youtube-audio label { margin:0 0 7px!important; font-size:10px!important; }.editor-youtube-audio>div { display:flex; gap:6px; }.editor-youtube-audio input { min-width:0; flex:1; margin:0!important; padding:8px 9px!important; font-size:10px!important; }.editor-youtube-audio button { padding:0 10px; border:0; border-radius:8px; color:#fff; background:var(--accent); font-size:10px; font-weight:700; }.editor-youtube-audio small { display:block; margin-top:6px; color:var(--soft); font-size:9px; line-height:1.35; }.editor-youtube-audio.is-error { border-top-color:var(--accent); }
.editor-youtube-results { display:grid!important; gap:6px; margin-top:8px; }.editor-youtube-result { display:grid!important; grid-template-columns:54px 1fr; gap:7px; width:100%; padding:5px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:#fff; text-align:left; }.editor-youtube-result:hover,.editor-youtube-result.is-selected { border-color:var(--accent); background:#fff6f6; }.editor-youtube-result img { display:block; width:54px; aspect-ratio:16/9; border-radius:5px; object-fit:cover; }.editor-youtube-result strong,.editor-youtube-result small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.editor-youtube-result strong { font-size:9px; }.editor-youtube-result small { margin-top:3px; color:var(--muted); font-size:8px; }.editor-youtube-direct { align-items:center; margin-top:8px; padding-top:8px; border-top:1px solid var(--line); }.editor-youtube-direct span { flex:0 0 auto; color:var(--soft); font-size:8px; }.editor-youtube-direct input { padding:7px 8px!important; }.editor-youtube-direct button { flex:0 0 auto; }
.editor-youtube-preview { margin-top:10px; overflow:hidden; border-radius:9px; background:#151515; }.editor-youtube-preview>div { display:flex; align-items:center; gap:6px; padding:7px 8px; color:#fff; font-size:9px; }.editor-youtube-preview>div span { display:grid; place-items:center; width:16px; height:16px; border-radius:5px; background:#f00; font-size:7px; }.editor-youtube-preview>div a { margin-left:auto; color:#ffb4b4; font-size:8px; }.editor-youtube-preview iframe { display:block; width:100%; aspect-ratio:16/9; border:0; }
.editor-template-card { padding:20px; }.editor-template-helper { margin-top:-10px; margin-bottom:12px; }.editor-template-filters { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }.editor-template-filter { padding:6px 8px; border:1px solid var(--line); border-radius:99px; color:var(--muted); background:#fff; font-size:9px; font-weight:650; }.editor-template-filter:hover,.editor-template-filter.is-active { border-color:var(--accent); color:var(--accent); background:#fff6f6; }.editor-template-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:12px; max-height:320px; overflow:auto; padding-right:2px; }.editor-template-option { position:relative; display:flex; align-items:center; gap:7px; min-width:0; padding:7px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:#fff; text-align:left; transition:transform .2s cubic-bezier(.22,1,.36,1), border-color .2s ease, box-shadow .2s ease; }.editor-template-option:hover,.editor-template-option.is-selected { border-color:var(--template-tone); box-shadow:0 5px 12px rgba(29,29,31,.08); transform:translateY(-2px); }.editor-template-swatch { display:block; flex:0 0 27px; height:35px; border-radius:6px; background:linear-gradient(145deg,var(--template-paper),var(--template-tone)); }.editor-template-copy { min-width:0; padding-right:24px; }.editor-template-copy strong,.editor-template-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.editor-template-copy strong { font-size:9px; }.editor-template-copy small { margin-top:2px; color:var(--muted); font-size:8px; }.editor-template-option em { position:absolute; right:5px; top:5px; color:var(--template-tone); font:700 7px var(--sans); font-style:normal; text-transform:uppercase; }
@media(max-width:800px) { .editor-template-grid { grid-template-columns:1fr 1fr; max-height:none; } }
@media(max-width:430px) { .editor-template-grid { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .editor-photo,.editor-template-option { transition:none; }.editor-photo.is-drag-over,.editor-template-option:hover,.editor-template-option.is-selected { transform:none; } }