.promo-hero { display:flex; align-items:center; gap:40px; padding:48px; margin:24px 0 36px; border:1px solid #e8def5; border-radius:30px; background:radial-gradient(ellipse at bottom left,#e3d0ff,transparent 70%),#f8f2ff; }
.promo-hero > div { flex:1; min-width:0; }
.promo-hero h1 { font-size:clamp(32px,4.5vw,64px); line-height:1.08; letter-spacing:-.035em; margin:10px 0 20px; overflow-wrap:anywhere; }
.promo-hero p { color:#746b80; line-height:1.6; }
.promo-hero > img { width:42%; height:auto; aspect-ratio:8/5; object-fit:cover; border-radius:22px; }
.promo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.promo-card,.promo-tile { border:1px solid #e9e2f1; background:white; border-radius:24px; overflow:hidden; min-width:0; }
.promo-card { display:flex; flex-direction:column; }
.promo-card > img,.promo-placeholder { width:100%; height:auto; aspect-ratio:1; object-fit:contain; background:#f9f6fc; }
.promo-placeholder { display:grid; place-items:center; font-size:80px; color:#ad86ef; }
.promo-card-content { padding:22px; display:flex; flex-direction:column; flex:1; }
.promo-card h3 { margin:0 0 10px; font-size:21px; overflow-wrap:anywhere; }
.promo-card p { margin:0 0 22px; color:#746b80; font-size:15px; line-height:1.6; white-space:pre-line; overflow-wrap:anywhere; }
.promo-card-actions { margin-top:auto; display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.promo-shop,.promo-all,.promo-share a { color:#763bdb; text-decoration:none; font-weight:650; }
.promo-all { display:inline-block; margin-top:20px; }
.promo-tile { color:inherit; text-decoration:none; transition:transform .2s; }
.promo-tile:hover { transform:translateY(-3px); }
.promo-tile > img { display:block; width:100%; height:auto; aspect-ratio:8/5; object-fit:cover; }
.promo-tile > div { padding:25px; }
.promo-tile h2 { font-size:25px; margin:0 0 12px; }
.promo-tile p,.promo-empty { color:#746b80; line-height:1.65; }
.promo-tile span { color:#763bdb; }
.promo-embedded { margin:44px 0; padding-top:28px; border-top:1px solid #e9e2f1; }
.promo-embedded .promo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.article-body .promo-card > img { margin:0; border-radius:0; aspect-ratio:1; object-fit:contain; }
.article-body .promo-card h3 { font-size:21px; margin:0 0 10px; }
.promo-subscribe { display:flex; gap:40px; align-items:center; justify-content:space-between; margin:48px 0 16px; padding:36px; border:1px solid #e7daf8; border-radius:26px; background:#f5edff; }
.promo-subscribe > div { flex:1; }
.promo-subscribe h2 { font-size:30px; margin:8px 0 14px; }
.promo-subscribe p { color:#746b80; line-height:1.6; }
.promo-sub-controls { display:flex; flex-wrap:wrap; gap:10px; }
.promo-sub-controls p { width:100%; margin:2px 0; }
.promo-share,.promo-actions { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-top:24px; }
.promo-notice { position:fixed; left:50%; bottom:90px; transform:translateX(-50%); width:max-content; max-width:calc(100vw - 32px); padding:16px 22px; border-radius:18px; background:#21152e; color:white; box-shadow:0 12px 35px #21152e30; z-index:10000; font-size:15px; }
.promo-dialog { border:1px solid #e5d8f5; border-radius:26px; padding:36px; width:540px; max-width:calc(100vw - 28px); max-height:85dvh; overflow:auto; color:#20132e; background:#fcfaff; }
.promo-dialog::backdrop { background:#1a112d80; backdrop-filter:blur(4px); }
.promo-dialog h2 { margin-top:10px; font-size:28px; }
.promo-dialog p { line-height:1.6; }
.promo-dialog a { color:#743cdf; }
.promo-close { position:absolute; right:14px; top:10px; background:none; border:0; font-size:30px; cursor:pointer; color:#75677e; }
.promo-editor-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:30px 0; }
.promo-editor-heading h1 { font-size:38px; margin:8px 0; }
.promo-editor-heading p { color:#746b80; }
.promo-editor-layout { display:grid; grid-template-columns:240px minmax(0,1fr); gap:28px; align-items:start; }
.promo-editor-sidebar { position:sticky; top:24px; }
.promo-list-item { display:flex; flex-direction:column; text-align:left; gap:8px; margin:12px 0; width:100%; padding:18px; border:1px solid #e5d8f5; border-radius:16px; background:white; color:#24142f; cursor:pointer; }
.promo-list-item.selected { background:#eee3ff; border-color:#b391e8; }
.promo-list-item small { color:#746b80; }
.promo-list-item strong { overflow-wrap:anywhere; }
.promo-editor-form { min-width:0; padding:30px; border:1px solid #e7deef; border-radius:24px; background:white; }
.promo-editor-form label { display:block; font-weight:600; font-size:14px; margin:18px 0; }
.promo-editor-form input,.promo-editor-form textarea,.promo-editor-form select { display:block; width:100%; min-width:0; margin-top:8px; padding:12px 14px; border:1px solid #dcd2e8; border-radius:12px; background:#fcfaff; color:#24142f; font:inherit; box-sizing:border-box; }
.promo-editor-form textarea { resize:vertical; }
.promo-editor-form input:focus,.promo-editor-form textarea:focus,.promo-editor-form select:focus { outline:2px solid #ac84ef; outline-offset:1px; }
.promo-editor-form input[readonly] { color:#81748b; background:#f3f0f6; }
.promo-editor-status { border-radius:12px; background:#f4ecff; padding:14px 18px; color:#6945a0; font-size:14px; }
.promo-image-input { margin:18px 0; padding:18px; border:1px dashed #d7c8e9; border-radius:14px; }
.promo-image-input img { object-fit:contain; background:#f5f0fa; border-radius:10px; max-width:100%; }
.promo-image-input small,.promo-hint { color:#81748b; font-size:13px; line-height:1.6; }
.promo-editor-card-title { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; margin-top:28px; }
.promo-card-editors fieldset { border:1px solid #e3d9ee; border-radius:20px; padding:20px; margin:24px 0; min-width:0; }
.promo-card-editors legend { font-weight:700; padding:0 8px; }
.promo-text-button { border:none; background:none; color:#7950a9; padding:8px; cursor:pointer; font:inherit; font-size:14px; }
.promo-editor-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding-top:22px; border-top:1px solid #e9e2f1; }
.promo-message-preview { border:1px solid #e3d9ee; background:white; border-radius:18px; padding:18px; }
.promo-message-preview img { width:100%; max-height:270px; object-fit:contain; border-radius:12px; }
.promo-message-preview p { white-space:pre-line; }
.promo-message-preview a,.promo-message-preview span { display:block; text-align:center; border-radius:10px; background:#eee4ff; margin-top:8px; padding:10px; color:#7441b7; text-decoration:none; }
[hidden] { display:none !important; }
@media(max-width:900px) { .promo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .promo-editor-layout { grid-template-columns:1fr; } .promo-editor-sidebar { position:static; } .promo-editor-sidebar > div { display:flex; gap:12px; overflow-x:auto; } .promo-list-item { min-width:190px; max-width:250px; } }
@media(max-width:600px) { .promo-hero { padding:26px; flex-direction:column; align-items:stretch; gap:20px; border-radius:22px; } .promo-hero > img { width:100%; } .promo-grid,.promo-embedded .promo-grid { grid-template-columns:1fr; } .promo-card > img,.promo-placeholder { aspect-ratio:6/5; } .promo-subscribe { flex-direction:column; align-items:stretch; padding:26px; gap:12px; } .promo-editor-heading { flex-direction:column; align-items:start; } .promo-editor-heading h1 { font-size:30px; } .promo-editor-form { padding:18px; } .promo-card-editors fieldset { padding:14px; } .promo-dialog { padding:28px 22px; } }