/* FIX007 presentation layer only: desktop Social v2.0 brand adapted to a mobile single-scroll page. */
:root{--mes-ink:#182437;--mes-accent:#2469c5;--mes-line:#e3eaf3}
body{background:#f4f7fb;color:var(--mes-ink)}
.shell{max-width:520px;background:#fff;box-shadow:0 16px 60px #162e4b16}
.header{padding:18px 20px 16px;border-bottom:1px solid var(--mes-line)}
.brand-wrap{display:flex;align-items:center;gap:10px;min-width:0}
.brand-mark{display:grid;place-items:center;flex:0 0 37px;width:37px;height:37px;border-radius:11px;background:#225fb4;color:white;font-size:16px;font-weight:900;letter-spacing:-2px}
.brand{font-size:15px;letter-spacing:-.35px;line-height:1.1}.brand span{color:#2469c5}.header .tag{margin-top:6px;margin-left:47px;font-size:10px}
.sample-banner{background:#eaf2ff;color:#225fb4;font-size:10px;letter-spacing:.04em}
.main{padding:18px 20px 28px}
.hero-kicker{font-size:10px;color:#2469c5;letter-spacing:.16em;font-weight:850;margin:3px 0 7px}
.hero-title{font-size:clamp(23px,6vw,29px);letter-spacing:-.04em;line-height:1.35;margin:0 0 8px;color:#15263e}.hero-title span{color:#2469c5}
.hero-copy{font-size:12px;line-height:1.75;color:#63758c;margin:0 0 17px}
.preview-card{background:#fff;border:1px solid var(--mes-line);padding:12px;border-radius:17px;box-shadow:0 5px 24px #20334e0c}
.stage{border-radius:12px;box-shadow:0 5px 17px #1328441b}
.preview-switch{margin:12px 0 24px}.preview-switch .btn{min-height:49px;font-size:12px}
.section-title-row{display:flex;align-items:center;gap:9px;margin:16px 0 10px}.section-number{background:#eaf2ff;color:#225fb4;border-radius:8px;font-size:12px;font-weight:900;padding:7px 9px;line-height:1}.section-title-row .subhead{margin:0;font-size:16px;color:#182437}
#source{min-height:144px;border:1px solid #cddbec;border-radius:13px;background:#fff;font-size:16px;line-height:1.8;padding:15px}
#source:focus{border-color:#2469c5;outline:3px solid #2469c526}
.page-editor{margin:18px 0 22px;padding:15px;border-radius:17px;background:#f9fbff;border-color:#dfe8f5}
.page-editor-actions .btn:first-child{font-size:14px}
.quick-page-card{box-shadow:0 3px 12px #18243709}
.generate-title{margin-top:20px}#generate{min-height:54px;font-size:15px;box-shadow:0 5px 16px #2469c525}
.settings-title{margin-top:23px}#controls{border:0;margin:0;padding:0;min-width:0}.collapser{border-top:1px solid #e2e8f0}
.count{justify-content:space-around;border:1px solid #e3eaf3;background:#f7faff}
#saved{border:1px solid #dce8f7;background:#f7faff;padding:14px;border-radius:13px}
.btn{transition:background-color .12s,border-color .12s;touch-action:manipulation}.btn:active{transform:translateY(1px)}
button:focus-visible,summary:focus-visible{outline:3px solid #77aef5;outline-offset:2px}
@media(max-width:440px){.shell{margin:0;border-radius:0}.main{padding:17px 16px 26px}.header{padding:14px 16px}.preview-switch .btn{padding:12px 7px;font-size:11px}.page-editor{padding:12px}.hero-title{font-size:24px}}
@media(max-width:360px){.brand{font-size:13px}.sample-banner{font-size:9px;padding:5px 7px}.header .tag{font-size:9px}.preview-switch .btn{font-size:10px}}
@media(prefers-reduced-motion:reduce){.btn{transition:none}}

/* FIX008: mobile page preview and timing actions, explicit touch targets. */
.quick-page-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.quick-page-tools .btn{min-width:0;white-space:normal;line-height:1.45;min-height:46px;font-size:12px}
.quick-page-tools .remove-page-cut{grid-column:1 / -1}
@media(max-width:340px){.quick-page-tools{grid-template-columns:1fr}}