html.summer-theme [data-section-theme] {
    --brand-night: var(--design-bg); --brand-white: var(--design-paper); --brand-mint: var(--design-soft); --brand-ink: var(--design-ink); --brand-muted: var(--design-muted); --brand-line: var(--design-line);
    --summer-cream: var(--design-bg); --summer-paper: var(--design-paper); --summer-ink: var(--design-ink); --summer-muted: var(--design-muted); --summer-coral: var(--design-accent); --summer-coral-hover: var(--design-accent); --summer-peach: var(--design-soft); --summer-mint: var(--design-soft); --summer-lilac: var(--design-incoming); --summer-butter: var(--design-soft); --summer-line: var(--design-line); --summer-green: var(--design-accent); --summer-purple: var(--design-accent);
    background: var(--design-bg); color: var(--design-ink);
}
html.summer-theme .section-design { display: flow-root; min-width: 0; }
html.summer-theme .section-design > main { width: var(--summer-width); margin-inline: auto; }
html.summer-theme [data-section-mode=dark] { color-scheme: dark; }
html.summer-theme [data-section-mode=light] { color-scheme: light; }
html.summer-theme [data-section-theme] :is(input,textarea)::placeholder { color: var(--design-muted); }
html.summer-theme [data-section-theme] .message.own { color: #fff; }
html.summer-theme [data-section-theme] .message.own :is(time,.receipt) { color: #fff; }
html.summer-theme [data-section-family=royal] .message.own,
html.summer-theme [data-section-family=royal] .message.own :is(time,.receipt) { color: #172132; }
html.summer-theme [data-section-family=pop] .message.own { background: linear-gradient(125deg,#a6008d,#8e00b4); }
html.summer-theme [data-section-family=royal] .messages { background-image: repeating-linear-gradient(110deg,transparent 0 70px,#e6c47a09 71px 72px); }
html.summer-theme [data-section-variant=glass] .messages { background: linear-gradient(135deg,#6eaac018,#c8cfff12),var(--design-paper); backdrop-filter: blur(18px); }
html.summer-theme [data-section-family=chrono] .messages { background-image: radial-gradient(circle at 15% 24%,color-mix(in srgb,var(--design-highlight) 45%,transparent) 1px,transparent 2px),radial-gradient(circle at 76% 68%,color-mix(in srgb,var(--design-highlight) 50%,transparent) 1px,transparent 2px); background-size: 91px 109px,167px 181px; }
html.summer-theme [data-section-family=nebula] { background: radial-gradient(ellipse at 80% 0,#6543bc45,transparent 45%),radial-gradient(ellipse at 0 80%,#116a8240,transparent 50%),var(--design-bg); }
html.summer-theme [data-section-family=nebula] .messages { background: radial-gradient(ellipse at 80% 10%,#6a32bb42,transparent 55%),radial-gradient(ellipse at 10% 85%,#1a6c9b2b,transparent 55%),var(--design-paper); }
html.summer-theme [data-section-family=nebula] .conversation-row { background-image: radial-gradient(ellipse at 95% 50%,#6347d226,transparent 65%); }
html.summer-theme [data-section-family=vibe] :is(.conversation-row,.chat-top,.chat-form) { border-radius: 18px; }
html.summer-theme [data-section-family=vibe] .conversation-row .avatar { box-shadow: 0 0 0 1px #9f87ff90; }
html.summer-theme [data-section-family=zen] .message { border-radius: 15px; box-shadow: none; }
.section-theme-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin-block: 24px; }
.section-theme-card { min-width: 0; border: 1px solid var(--design-line); border-radius: 20px; padding: 20px; }
.section-theme-card h3 { margin-top: 0; }
.section-theme-card p { font-size: 13px; min-height: 44px; }
.section-theme-card select { min-height: 48px; font-size: 16px !important; }
.section-theme-status { display: block; font-size: 12px; line-height: 1.6; margin-bottom: 18px; color: var(--design-muted); }
.section-theme-sample { display: flex; gap: 8px; padding: 16px; margin-block: 16px; background: var(--sample-bg); border: 1px solid var(--sample-line); border-radius: 14px; }
.section-theme-sample i { width: 30px; height: 30px; border-radius: 50%; background: var(--sample-paper); border: 1px solid var(--sample-line); }
.section-theme-sample i:nth-child(2) { background: var(--sample-own); }
.section-theme-sample i:nth-child(3) { background: var(--sample-accent); }
.section-theme-preview { font-size: 13px; text-decoration: underline; }
.mobile-section-nav { display: none; }
@media(max-width:760px) {
    html.summer-theme:has(.mobile-section-nav) { scroll-padding-bottom: calc(100px + env(safe-area-inset-bottom,0px)); }
    html.summer-theme body:has(.mobile-section-nav) { padding-bottom: calc(84px + env(safe-area-inset-bottom,0px)); }
    html.summer-theme[data-design-family] .mobile-section-nav { position: fixed; z-index: 30; inset-inline: 12px; bottom: max(8px,env(safe-area-inset-bottom,0px)); display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; width: auto; margin: 0; padding: 6px; border: 1px solid var(--design-line); border-radius: 23px; background: var(--design-paper); box-shadow: 0 6px 28px #00000018; color: var(--design-ink); }
    html.summer-theme body .mobile-section-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 56px; padding: 5px 2px; border-radius: 17px; color: var(--design-muted); font-size: 11px; line-height: 1.3; font-weight: 700; text-decoration: none; }
    html.summer-theme body .mobile-section-nav a[aria-current=page] { background: var(--design-soft); color: var(--design-accent); }
    .mobile-section-nav svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
    .section-theme-grid { grid-template-columns: minmax(0,1fr); }
    .section-theme-card p { min-height: 0; }
}

@media(max-width:760px) { body:has(.account-menu[open],.summer-mobile-menu[open],input:focus,textarea:focus,select:focus) .mobile-section-nav { visibility: hidden; pointer-events: none; } }
