/* One style pack drives the storefront, Mini App, welcome banner and bot preview. */
.telegram-bot-style-panel{margin-top:15px;padding:24px;border:1px solid #315e44;border-radius:18px;background:radial-gradient(520px 240px at 100% 0,#74dfa10d,transparent),#091911}
.telegram-bot-style-panel>header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.telegram-bot-style-panel>header p{margin:0 0 6px;color:#6ddc9e;font:800 10px var(--mono);letter-spacing:1px}
.telegram-bot-style-panel h2{margin:0;font-size:22px}
.telegram-bot-style-panel>header span{display:block;max-width:760px;margin-top:7px;color:#7d9b87;font-size:12px;line-height:1.55}
.telegram-bot-style-panel>header em{flex:0 0 auto;padding:7px 9px;border:1px solid #50715a;border-radius:8px;color:#a8c7b0;font:900 9px var(--mono);font-style:normal}
.bot-style-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:18px}
.bot-style-picker button{display:grid;min-width:0;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:10px;min-height:67px;padding:10px;border:1px solid #2d563e;border-radius:13px;background:#07150e;color:#dceddf;text-align:left;transition:border-color .18s ease,transform .18s ease,background .18s ease}
.bot-style-picker button:hover{border-color:#6edc9e;transform:translateY(-1px)}
.bot-style-picker button.selected{border-color:#baff68;background:#132d1f;box-shadow:inset 3px 0 #baff68}
.bot-style-picker button>i{display:grid;width:42px;height:42px;place-items:center;border-radius:12px;background:#69d99b12;font-size:19px;font-style:normal}
.bot-style-picker button>span{display:grid;min-width:0;gap:4px}
.bot-style-picker b{font-size:11px}
.bot-style-picker small{overflow:hidden;color:#789581;font-size:8px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
.telegram-bot-style-panel>aside{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 12px;margin-top:12px;padding:13px;border:1px solid #806b37;border-radius:12px;background:#211c0d}
.telegram-bot-style-panel>aside b{color:#e8cc78;font-size:10px}
.telegram-bot-style-panel>aside span{color:#a99b76;font-size:10px;line-height:1.5}
.appearance-save-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;margin-top:3px;padding-top:12px;border-top:1px solid #294e39}
.appearance-save-row-wide{margin-top:14px}
.appearance-save-row button{min-height:46px;padding:0 16px;border:1px solid #9bec74;border-radius:11px;background:linear-gradient(135deg,#183e29,#102b1d);color:#effff4;font-size:11px;font-weight:900;letter-spacing:.1px;box-shadow:0 8px 24px #0004;transition:transform .18s ease,background .18s ease,opacity .18s ease}
.appearance-save-row button:hover:not(:disabled){transform:translateY(-1px);background:linear-gradient(135deg,#205337,#143824)}
.appearance-save-row button:disabled{cursor:wait;opacity:.65}
.appearance-save-row span{display:flex;align-items:center;gap:6px;color:#88a391;font-size:9px;font-weight:800;white-space:nowrap}
.appearance-save-row span:before{content:"";width:7px;height:7px;border-radius:50%;background:#6d8975}
.appearance-save-row span[data-state="dirty"]{color:#e8cc78}.appearance-save-row span[data-state="dirty"]:before{background:#e8cc78;box-shadow:0 0 10px #e8cc7866}
.appearance-save-row span[data-state="saving"]{color:#8dd6ff}.appearance-save-row span[data-state="saving"]:before{background:#8dd6ff;animation:appearance-pulse .8s ease-in-out infinite alternate}
.appearance-save-row span[data-state="saved"]{color:#9bec74}.appearance-save-row span[data-state="saved"]:before{background:#9bec74;box-shadow:0 0 10px #9bec7466}
.appearance-save-row span[data-state="error"]{color:#ff9b8c}.appearance-save-row span[data-state="error"]:before{background:#ff7566}
@keyframes appearance-pulse{to{opacity:.3;transform:scale(.72)}}
.appearance-scope{display:block;margin-top:-4px;color:#6f8b78;font-size:9px;line-height:1.45}
.unified-brand-panel{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:start;gap:18px;margin-top:15px;padding:24px;border:1px solid #3d7352;border-radius:18px;background:radial-gradient(520px 240px at 100% 0,#baff6812,transparent),linear-gradient(145deg,#0d2117,#08160f)}
.unified-brand-icon{display:grid;width:58px;height:58px;place-items:center;border:1px solid #7ae1a061;border-radius:17px;background:linear-gradient(145deg,#1a4c32,#102d20);color:#cfff8b;font-size:24px;font-weight:900;box-shadow:0 13px 30px #0004}
.unified-brand-panel>div:nth-child(2)>p{margin:0 0 6px;color:#71dda0;font:800 10px var(--mono);letter-spacing:1px}
.unified-brand-panel h2{margin:0;font-size:23px}
.unified-brand-panel>div:nth-child(2)>span{display:block;max-width:760px;margin-top:8px;color:#82a18c;font-size:12px;line-height:1.6}
.unified-brand-panel>div:nth-child(2)>button{display:inline-flex;align-items:center;gap:18px;min-height:42px;margin-top:15px;padding:0 15px;border:1px solid #7adea05e;border-radius:10px;background:#153524;color:#dfffea;font-size:10px;font-weight:900}
.unified-brand-panel>div:nth-child(2)>button:hover{border-color:#baff68;background:#1b442e}
.unified-brand-panel>em{padding:7px 10px;border:1px solid #76d99b55;border-radius:8px;background:#65d7960c;color:#a9efbf;font:800 8px var(--mono);font-style:normal;white-space:nowrap}
.unified-brand-panel>aside{grid-column:2/-1;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;padding-top:15px;border-top:1px solid #294f39}
.unified-brand-panel>aside b{color:#d7efdf;font-size:10px}.unified-brand-panel>aside span{color:#789581;font-size:10px;line-height:1.5}

.phone{--bot-bg:#eaf4f6;--bot-panel:#f8fdfe;--bot-line:#a9cbd2;--bot-text:#113139;--bot-muted:#607f86;--bot-accent:#087e9b;--bot-accent2:#1699a8}
.phone>header,.phone>main,.phone>footer{transition:background .2s ease,color .2s ease,border-color .2s ease}
.phone.bot-style-atelier{--bot-bg:#f5efe5;--bot-panel:#fffaf1;--bot-line:#d6c7b7;--bot-text:#28211d;--bot-muted:#796b62;--bot-accent:#b64f2e;--bot-accent2:#a75a38}
.phone.bot-style-cobalt{--bot-bg:#091431;--bot-panel:#10224d;--bot-line:#344d8d;--bot-text:#f3f6ff;--bot-muted:#9aa9d2;--bot-accent:#8fa4ff;--bot-accent2:#66d7e9}
.phone.bot-style-rose{--bot-bg:#231020;--bot-panel:#35172f;--bot-line:#6f355b;--bot-text:#fff5fb;--bot-muted:#c59ab4;--bot-accent:#ff93c7;--bot-accent2:#e46caa}
.phone.bot-style-citrus{--bot-bg:#fff4cf;--bot-panel:#fffaf0;--bot-line:#e6c376;--bot-text:#2b210f;--bot-muted:#796644;--bot-accent:#d85d15;--bot-accent2:#df7923}
.phone.bot-style-arctic{--bot-bg:#eaf4f6;--bot-panel:#f8fdfe;--bot-line:#a9cbd2;--bot-text:#113139;--bot-muted:#607f86;--bot-accent:#087e9b;--bot-accent2:#1699a8}
.phone.bot-style-nocturne{--bot-bg:#080808;--bot-panel:#171717;--bot-line:#4e4930;--bot-text:#fff;--bot-muted:#aaa99e;--bot-accent:#f1d64a;--bot-accent2:#e8c92c}
.phone.bot-style-emerald{--bot-bg:#061713;--bot-panel:#0a221c;--bot-line:#285c4b;--bot-text:#effff9;--bot-muted:#83ad9e;--bot-accent:#40e6a4;--bot-accent2:#8fffc9}
.phone.bot-style-ember{--bot-bg:#130c0b;--bot-panel:#211311;--bot-line:#6a3e32;--bot-text:#fff6f0;--bot-muted:#bb9387;--bot-accent:#ff7048;--bot-accent2:#ffad61}
.phone.bot-style-ultraviolet{--bot-bg:#100b25;--bot-panel:#191238;--bot-line:#563f98;--bot-text:#faf7ff;--bot-muted:#aa9bd0;--bot-accent:#a879ff;--bot-accent2:#4ee7e0}
.phone[class*="bot-style-"]{border-color:var(--bot-line);background:var(--bot-bg);color:var(--bot-text)}
.phone[class*="bot-style-"]>header{border-color:var(--bot-line);background:var(--bot-panel)}
.phone[class*="bot-style-"]>header button{color:var(--bot-muted)}
.phone[class*="bot-style-"]>header small{color:var(--bot-muted)}
.phone[class*="bot-style-"]>main,.phone[class*="bot-style-"]>footer{background:var(--bot-bg)}
.phone[class*="bot-style-"] .tg-welcome>span{background:color-mix(in srgb,var(--bot-accent) 14%,var(--bot-panel));color:var(--bot-accent)}
.phone[class*="bot-style-"] .tg-welcome p{color:var(--bot-accent2)}
.phone[class*="bot-style-"] .tg-welcome small{color:var(--bot-muted)}
.phone[class*="bot-style-"] .tg-products button{border-color:var(--bot-line);background:var(--bot-panel);color:var(--bot-text)}
.phone[class*="bot-style-"] .tg-products button>i{background:color-mix(in srgb,var(--bot-accent) 12%,var(--bot-panel));color:var(--bot-accent)}
.phone[class*="bot-style-"] .tg-products button small{color:var(--bot-muted)}
.phone[class*="bot-style-"] .tg-products button em{color:var(--bot-accent)}
.phone.bot-style-atelier .tg-welcome h2{font-family:Georgia,"Times New Roman",serif;font-weight:500}
.phone.bot-style-rose .tg-welcome>span,.phone.bot-style-rose .tg-products button>i{border-radius:50%}
.phone.bot-style-citrus .tg-products button{border-width:2px;border-radius:8px;box-shadow:3px 3px 0 color-mix(in srgb,var(--bot-accent) 28%,transparent)}
.phone.bot-style-nocturne .tg-products button,.phone.bot-style-nocturne .tg-welcome>span{border-radius:2px}
.phone.bot-style-nocturne .tg-welcome h2{text-transform:uppercase}
.phone.bot-style-emerald .tg-welcome>span,.phone.bot-style-emerald .tg-products button{border-radius:22px 7px 22px 7px}.phone.bot-style-ember .tg-welcome>span,.phone.bot-style-ember .tg-products button{border-radius:3px;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}.phone.bot-style-ember .tg-welcome h2{text-transform:uppercase}.phone.bot-style-ultraviolet .tg-welcome>span,.phone.bot-style-ultraviolet .tg-products button{border-radius:24px}
@media(max-width:900px){.bot-style-picker{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.telegram-bot-style-panel{padding:18px}.telegram-bot-style-panel>header{flex-direction:column}.bot-style-picker{grid-template-columns:1fr}.telegram-bot-style-panel>aside{grid-template-columns:1fr}.appearance-save-row{grid-template-columns:1fr}.appearance-save-row span{justify-content:center}.appearance-save-row button{width:100%}.unified-brand-panel{grid-template-columns:48px minmax(0,1fr);padding:18px}.unified-brand-icon{width:48px;height:48px}.unified-brand-panel>em{grid-column:1/-1;justify-self:start}.unified-brand-panel>aside{grid-column:1/-1;grid-template-columns:1fr}}