/* Homepage theme variants, header skins, demo switcher */

.th-kicker {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--primary);
    margin: 0 0 10px;
}
.th-chip {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--primary-dark);
    background: #fff3e0;
    padding: 3px 8px;
    margin-bottom: 8px;
}
.th-more {
    display: inline-flex;
    margin-top: 14px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    background: var(--navy);
    padding: 10px 16px;
}
.th-more:hover { background: var(--primary); color: #fff; }
.th-more--light { background: #F89506; }
.th-more--light:hover { background: #fff; color: #111; }

/* ─── Header skins by active theme ─── */
.otn-theme-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 20px;
    font-size: 12px;
    max-width: var(--container-max);
    margin: 0 auto;
}
body.theme-bulletin .otn-theme-bar,
body.theme-dawn .otn-theme-bar,
body.theme-times .otn-theme-bar,
body.theme-focus .otn-theme-bar,
body.theme-wellness .otn-theme-bar { display: flex; }

/* Header skins use CSS variables set from the visual editor */
body.theme-journal .c-header-menu { background: var(--otn-header-nav, #111); }
body.theme-journal .c-header-menu__link:hover,
body.theme-journal .c-header-menu__link--active { background: var(--otn-accent, #F89506); }
body.theme-journal .l-header { border-bottom-color: var(--otn-header-nav, #111); background: var(--otn-header-bg, #fff); }

body.theme-wellness .c-header-menu { background: var(--otn-header-nav, #2d6a4f); }
body.theme-wellness .l-header { border-bottom-color: var(--otn-header-nav, #2d6a4f); background: var(--otn-header-bg, #f6fbf8); }
body.theme-wellness .otn-theme-bar { color: var(--otn-accent, #2d6a4f); }
body.theme-wellness .c-header-award span { color: var(--otn-accent, #2d6a4f); }

body.theme-aether { background: var(--otn-page-bg, #0b0b12); color: var(--otn-text, #eee); }
body.theme-aether .l-header { background: var(--otn-header-bg, #0b0b12); border-bottom-color: var(--otn-accent, #7c3aed); }
body.theme-aether .c-header-award span,
body.theme-aether .c-header-logo__text { color: var(--otn-text, #fff); }
body.theme-aether .c-header-menu { background: var(--otn-header-nav, #161622); }
body.theme-aether .c-header-menu__link:hover,
body.theme-aether .c-header-menu__link--active { background: var(--otn-accent, #7c3aed); }
body.theme-aether .c-breaking { background: var(--otn-breaking, #7c3aed); }
body.theme-aether .l-main { background: var(--otn-page-bg, #0b0b12); }
body.theme-aether .page-headline,
body.theme-aether .static-page-content h2,
body.theme-aether .static-page-content h3 { color: var(--otn-text, #eee); }
body.theme-aether .page-subline { color: rgba(238,238,238,.72); }
body.theme-aether .static-page-content { color: rgba(238,238,238,.88); }
body.theme-aether .page-stats__item { background: #161622; border-color: #2a2a3a; }
body.theme-aether .page-stats__label { color: rgba(238,238,238,.65); }

body.theme-bulletin .c-header-menu { background: var(--otn-header-nav, #c8102e); }
body.theme-bulletin .l-header { border-bottom-color: var(--otn-header-nav, #c8102e); background: var(--otn-header-bg, #fff); }
body.theme-bulletin .otn-theme-bar { border-bottom: 1px solid #eee; color: #555; }

body.theme-arena { background: var(--otn-page-bg, #070b14); color: var(--otn-text, #e8f7ff); }
body.theme-arena .l-header { background: var(--otn-header-bg, #070b14); border-bottom-color: var(--otn-accent, #22d3ee); }
body.theme-arena .c-header-award span,
body.theme-arena .c-header-logo__text { color: var(--otn-text, #fff); }
body.theme-arena .c-header-menu { background: var(--otn-header-nav, #0e1628); }
body.theme-arena .c-header-menu__link:hover,
body.theme-arena .c-header-menu__link--active { background: var(--otn-accent, #22d3ee); color: #041018; }
body.theme-arena .l-main { background: var(--otn-page-bg, #070b14); }
body.theme-arena .page-headline,
body.theme-arena .static-page-content h2,
body.theme-arena .static-page-content h3 { color: var(--otn-text, #e8f7ff); }
body.theme-arena .page-subline { color: rgba(232,247,255,.72); }
body.theme-arena .static-page-content { color: rgba(232,247,255,.88); }
body.theme-arena .page-stats__item { background: #0e1628; border-color: #1a2740; }
body.theme-arena .page-stats__label { color: rgba(232,247,255,.65); }

body.theme-haven .c-header-menu { background: var(--otn-header-nav, #1e3a8a); }
body.theme-haven .l-header { border-bottom-color: var(--otn-accent, #2563eb); background: var(--otn-header-bg, #fff); }

body.theme-dawn .c-header-menu { background: var(--otn-header-nav, #0f172a); }
body.theme-dawn .otn-theme-bar { border-bottom: 1px solid #e5e7eb; font-weight: 600; }

body.theme-pop .c-header-menu { background: var(--otn-header-nav, #db2777); }
body.theme-pop .l-header { border-bottom-color: var(--otn-header-nav, #db2777); background: var(--otn-header-bg, #fff); }
body.theme-pop .c-header-award span { color: var(--otn-accent, #db2777); }

body.theme-focus .c-header-menu { background: var(--otn-header-nav, #1e3a5f); }
body.theme-focus .l-header { border-bottom: 3px solid var(--otn-header-nav, #1e3a5f); background: var(--otn-header-bg, #fff); }
body.theme-focus .otn-theme-bar { font-family: var(--font-display); letter-spacing: .04em; }

body.theme-times .l-header__top { height: auto; padding: 18px 20px; }
body.theme-times .c-header-logo__text,
body.theme-times .c-header-logo img { transform: scale(1.08); }
body.theme-times .c-header-menu { background: var(--otn-header-nav, #111827); }
body.theme-times .otn-theme-bar {
    justify-content: center;
    border-top: 1px solid #ddd;
    border-bottom: 3px double #111;
    font-family: var(--font-display);
    font-size: 13px;
}
body.theme-times .l-header { background: var(--otn-header-bg, #fff); }

/* ─── Journal ─── */
.th-journal { margin: 18px 0 36px; }
.th-journal__strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    padding-bottom: 18px;
    border-bottom: 2px solid #111;
    margin-bottom: 22px;
}
.th-journal__strip span { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #888; }
.th-journal__strip h3 { font-family: var(--font-display); font-size: 15px; margin: 6px 0; line-height: 1.3; }
.th-journal__strip small { color: #999; font-size: 11px; }
.th-journal__lead { display: grid; grid-template-columns: 1.3fr .9fr; gap: 28px; align-items: center; margin-bottom: 28px; }
.th-journal__leadimg, .th-journal__lead .no-thumb { width: 100%; height: 380px; object-fit: cover; }
.th-journal__lead h1 { font-family: var(--font-display); font-size: clamp(28px, 4vw, 42px); margin: 8px 0 12px; line-height: 1.15; }
.th-journal__split { display: grid; grid-template-columns: 1.5fr .7fr; gap: 28px; }
.th-journal__row { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid #eee; }
.th-journal__row img, .th-journal__row .no-thumb { width: 140px; height: 96px; object-fit: cover; }
.th-journal__row span { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.th-journal__row h2 { font-family: var(--font-display); font-size: 20px; margin: 4px 0 8px; }
.th-journal__popular { background: #f7f7f9; padding: 18px; }
.th-journal__popular h2 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 14px; }
.th-journal__popular a { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid #e8e8ee; font-family: var(--font-display); font-size: 15px; line-height: 1.3; }
.th-journal__popular em { font-style: normal; color: #cfcfd8; font-weight: 900; }

/* ─── Wellness ─── */
.th-wellness { margin: 18px 0 40px; }
.th-wellness__hero { display: grid; grid-template-columns: 1fr 1.1fr; gap: 32px; align-items: center; background: #f3faf6; padding: 28px; border-radius: 18px; }
.th-wellness__hero h1 { font-family: var(--font-display); font-size: clamp(30px, 4vw, 46px); margin: 0 0 12px; line-height: 1.15; }
.th-wellness__photo, .th-wellness__hero .no-thumb { width: 100%; height: 360px; object-fit: cover; border-radius: 14px; }
.th-wellness__popular { margin: 32px 0 18px; }
.th-wellness__popular h2 { font-family: var(--font-display); font-size: 28px; margin: 0 0 16px; }
.th-wellness__pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.th-wellness__pgrid img, .th-wellness__pgrid .no-thumb { width: 100%; height: 180px; object-fit: cover; border-radius: 12px; }
.th-wellness__pgrid span, .th-wellness__cards span { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #2d6a4f; }
.th-wellness__pgrid h3, .th-wellness__cards h3 { font-family: var(--font-display); font-size: 18px; margin: 8px 0 0; }
.th-wellness__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; }
.th-wellness__cards article { background: #fff; border: 1px solid #e8f0eb; border-radius: 14px; overflow: hidden; }
.th-wellness__cards img, .th-wellness__cards .no-thumb { width: 100%; height: 160px; object-fit: cover; }
.th-wellness__cards div { padding: 14px; }

/* ─── Aether ─── */
.th-aether { margin: 12px 0 40px; color: #f3f3f7; }
.th-aether a { color: #fff; }
.th-aether__hero {
    position: relative; min-height: 460px; border-radius: 16px; overflow: hidden;
    background: #1a1030 center/cover no-repeat; display: flex; align-items: flex-end; margin-bottom: 24px;
}
.th-aether__veil { position: absolute; inset: 0; background: linear-gradient(180deg, transparent, rgba(8,6,18,.92)); }
.th-aether__copy { position: relative; z-index: 1; padding: 36px; max-width: 720px; }
.th-aether__copy span { letter-spacing: .2em; text-transform: uppercase; font-size: 11px; color: #c4b5fd; font-weight: 800; }
.th-aether__copy h1 { font-family: var(--font-display); font-size: clamp(30px, 4.5vw, 48px); margin: 10px 0 12px; }
.th-aether__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.th-aether__grid img, .th-aether__grid .no-thumb { width: 100%; height: 160px; object-fit: cover; border-radius: 10px; }
.th-aether__grid span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #a78bfa; }
.th-aether__grid h3 { font-size: 16px; margin: 6px 0 0; font-family: var(--font-display); }
.th-aether__latest { background: #161622; border: 1px solid #2a2a3d; border-radius: 12px; padding: 18px; }
.th-aether__latest h2 { margin: 0 0 12px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #a78bfa; }
.th-aether__latest li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #2a2a3d; list-style: none; }
.th-aether__latest ul { margin: 0; padding: 0; }

/* ─── Bulletin ─── */
.th-bulletin { margin: 18px 0 36px; }
.th-bulletin__leads { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; margin-bottom: 28px; }
.th-bulletin__leads img, .th-bulletin__leads .no-thumb { width: 100%; height: 180px; object-fit: cover; }
.th-bulletin__leads .is-lead img, .th-bulletin__leads .is-lead .no-thumb { height: 320px; }
.th-bulletin__leads span { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #c8102e; }
.th-bulletin__leads h2 { font-family: var(--font-display); font-size: 20px; margin: 8px 0; line-height: 1.25; }
.th-bulletin__leads .is-lead h2 { font-size: 32px; }
.th-bulletin__body { display: grid; grid-template-columns: 1.6fr .8fr; gap: 28px; }
.th-bulletin__popular { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.th-bulletin__popular img, .th-bulletin__popular .no-thumb { width: 100%; height: 120px; object-fit: cover; }
.th-bulletin__body aside { background: #fafafa; padding: 16px; border-top: 4px solid #c8102e; }
.th-bulletin__body ol { margin: 0; padding-left: 18px; }
.th-bulletin__body li { margin: 10px 0; font-family: var(--font-display); font-size: 15px; }

/* ─── Arena ─── */
.th-arena { margin: 12px 0 40px; color: #e8f7ff; }
.th-arena a { color: #fff; }
.th-arena__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.th-arena__chips a { border: 1px solid #22d3ee55; color: #67e8f9; padding: 6px 12px; font-size: 12px; font-weight: 700; border-radius: 999px; }
.th-arena__hero { display: grid; grid-template-columns: 1.3fr .9fr; gap: 20px; align-items: center; margin-bottom: 24px; background: #0e1628; padding: 16px; border: 1px solid #1f2a44; }
.th-arena__hero img, .th-arena__hero .no-thumb { width: 100%; height: 320px; object-fit: cover; }
.th-arena__hero span { color: #22d3ee; letter-spacing: .16em; text-transform: uppercase; font-size: 11px; font-weight: 800; }
.th-arena__hero h1 { font-family: var(--font-display); font-size: clamp(26px, 4vw, 40px); margin: 8px 0 12px; }
.th-arena__tgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.th-arena__tgrid img, .th-arena__tgrid .no-thumb { width: 100%; height: 120px; object-fit: cover; }
.th-arena__tgrid h3 { font-size: 14px; margin: 8px 0; font-family: var(--font-display); }
.th-arena__feat { margin-top: 24px; border-top: 1px solid #1f2a44; }
.th-arena__feat article { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid #1f2a44; }
.th-arena__feat h3 { margin: 0; font-size: 16px; font-family: var(--font-display); }

/* ─── Haven ─── */
.th-haven { margin: 18px 0 36px; }
.th-haven__top { display: grid; grid-template-columns: 1.5fr .8fr; gap: 22px; margin-bottom: 28px; }
.th-haven__feature img, .th-haven__feature .no-thumb { width: 100%; height: 360px; object-fit: cover; border-radius: 10px; }
.th-haven__feature span { display: inline-block; margin-top: 12px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #2563eb; }
.th-haven__feature h1 { font-family: var(--font-display); font-size: clamp(26px, 3.6vw, 38px); margin: 8px 0 10px; }
.th-haven__stack a { display: block; padding: 14px 0; border-bottom: 1px solid #e5e7eb; }
.th-haven__stack span { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #64748b; }
.th-haven__stack strong { display: block; margin-top: 4px; font-family: var(--font-display); font-size: 16px; line-height: 1.3; }
.th-haven__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.th-haven__head h2 { font-family: var(--font-display); font-size: 28px; margin: 0; }
.th-haven__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.th-haven__grid img, .th-haven__grid .no-thumb { width: 100%; height: 150px; object-fit: cover; border-radius: 8px; }
.th-haven__grid h3 { font-family: var(--font-display); font-size: 17px; margin: 10px 0 6px; }

/* ─── Dawn ─── */
.th-dawn { margin: 18px 0 36px; }
.th-dawn__layout { display: grid; grid-template-columns: 1.6fr .75fr; gap: 28px; }
.th-dawn__story { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid #eee; }
.th-dawn__story.is-lead { grid-template-columns: 1fr; }
.th-dawn__story img, .th-dawn__story .no-thumb { width: 100%; height: 100px; object-fit: cover; }
.th-dawn__story.is-lead img, .th-dawn__story.is-lead .no-thumb { height: 320px; }
.th-dawn__story span { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #0f172a; }
.th-dawn__story h2 { font-family: var(--font-display); font-size: 20px; margin: 6px 0 8px; }
.th-dawn__story.is-lead h2 { font-size: 34px; }
.th-dawn aside { background: #f8fafc; padding: 16px; border-top: 3px solid #0f172a; }
.th-dawn aside h2 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 12px; }
.th-dawn aside ol, .th-dawn aside ul { margin: 0 0 22px; padding-left: 18px; }
.th-dawn aside li { margin: 10px 0; font-family: var(--font-display); font-size: 15px; }
.th-dawn aside small { display: block; color: #94a3b8; font-size: 11px; margin-top: 2px; }

/* ─── Pop ─── */
.th-pop { margin: 16px 0 40px; }
.th-pop__hero { position: relative; margin-bottom: 24px; }
.th-pop__hero img, .th-pop__hero .no-thumb { width: 100%; height: 440px; object-fit: cover; }
.th-pop__hero div {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 24px 24px;
    background: linear-gradient(transparent, rgba(0,0,0,.88)); color: #fff; max-width: 760px;
}
.th-pop__hero a { color: #fff; }
.th-pop__hero span { letter-spacing: .18em; text-transform: uppercase; font-size: 11px; color: #f9a8d4; font-weight: 800; }
.th-pop__hero h1 { font-family: var(--font-display); font-size: clamp(28px, 4vw, 46px); margin: 8px 0 10px; }
.th-pop__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.th-pop__grid img, .th-pop__grid .no-thumb { width: 100%; height: 140px; object-fit: cover; }
.th-pop__grid span { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #db2777; }
.th-pop__grid h3 { font-family: var(--font-display); font-size: 14px; margin: 6px 0 0; line-height: 1.3; }
.th-pop__buzz { margin-top: 24px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.th-pop__buzz a { display: block; background: #fff0f6; padding: 16px; border-left: 4px solid #db2777; }
.th-pop__buzz em { display: block; font-style: normal; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #db2777; font-weight: 800; }
.th-pop__buzz strong { display: block; margin-top: 6px; font-family: var(--font-display); font-size: 17px; }

/* ─── Focus ─── */
.th-focus { margin: 18px 0 36px; }
.th-focus__topgrid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 14px; margin-bottom: 28px; }
.th-focus__topgrid .is-wide { grid-row: span 2; }
.th-focus__topgrid img, .th-focus__topgrid .no-thumb { width: 100%; height: 140px; object-fit: cover; }
.th-focus__topgrid .is-wide img, .th-focus__topgrid .is-wide .no-thumb { height: 100%; min-height: 320px; }
.th-focus__topgrid span { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #1e3a5f; }
.th-focus__topgrid h3 { font-family: var(--font-display); font-size: 17px; margin: 6px 0 0; line-height: 1.3; }
.th-focus__stories article { display: grid; grid-template-columns: 1fr 220px; gap: 20px; padding: 20px 0; border-bottom: 1px solid #e5e7eb; align-items: center; }
.th-focus__stories img, .th-focus__stories .no-thumb { width: 100%; height: 140px; object-fit: cover; }
.th-focus__stories h3 { font-family: var(--font-display); font-size: 24px; margin: 6px 0 8px; }

/* ─── Times ─── */
.th-times { margin: 12px 0 36px; }
.th-times__mast {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 8px 0 14px; border-bottom: 3px double #111; margin-bottom: 18px; flex-wrap: wrap;
}
.th-times__mast strong { font-family: var(--font-display); font-size: 28px; letter-spacing: -.02em; }
.th-times__lead { display: grid; grid-template-columns: 1.15fr .9fr; gap: 24px; padding-bottom: 24px; border-bottom: 2px solid #111; margin-bottom: 22px; }
.th-times__lead h1 { font-family: var(--font-display); font-size: clamp(28px, 3.8vw, 42px); margin: 0 0 12px; line-height: 1.15; }
.th-times__lead img, .th-times__lead .no-thumb { width: 100%; height: 300px; object-fit: cover; }
.th-times__cols { display: grid; grid-template-columns: 1.1fr 1fr .75fr; gap: 24px; }
.th-times__cols h2 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; border-bottom: 2px solid #111; padding-bottom: 8px; margin: 0 0 14px; }
.th-times__cols article { padding: 12px 0; border-bottom: 1px solid #eee; }
.th-times__cols h3 { font-family: var(--font-display); font-size: 17px; margin: 0 0 6px; line-height: 1.3; }
.th-times__cols img, .th-times__cols .no-thumb { width: 100%; height: 120px; object-fit: cover; margin-bottom: 8px; }
.th-times__cols aside a { display: block; padding: 10px 0; border-bottom: 1px solid #eee; font-family: var(--font-display); font-size: 15px; line-height: 1.35; }

@media (max-width: 960px) {
    .th-journal__strip { grid-template-columns: 1fr 1fr; }
    .th-journal__lead, .th-journal__split, .th-wellness__hero, .th-bulletin__leads, .th-bulletin__body,
    .th-arena__hero, .th-haven__top, .th-dawn__layout, .th-focus__topgrid, .th-times__lead, .th-times__cols,
    .th-journal__row, .th-dawn__story, .th-focus__stories article { grid-template-columns: 1fr; }
    .th-wellness__pgrid, .th-wellness__cards, .th-aether__grid, .th-bulletin__popular, .th-haven__grid { grid-template-columns: 1fr 1fr; }
    .th-arena__tgrid, .th-pop__grid { grid-template-columns: 1fr 1fr; }
    .th-journal__leadimg, .th-wellness__photo, .th-arena__hero img, .th-pop__hero img { height: 240px; }
    .th-pop__hero div { position: relative; background: #111; }
}
@media (max-width: 640px) {
    .th-journal__strip, .th-wellness__pgrid, .th-wellness__cards, .th-aether__grid, .th-bulletin__popular,
    .th-arena__tgrid, .th-haven__grid, .th-pop__grid, .th-pop__buzz { grid-template-columns: 1fr; }
    .th-dawn__story.is-lead h2, .th-journal__lead h1, .th-wellness__hero h1 { font-size: 26px; }
    img, .no-thumb { max-width: 100%; }
}

/* Demo theme switcher */
.otn-demos {
    position: fixed;
    z-index: 80;
    right: 18px;
    bottom: 18px;
    font-family: var(--font-body);
}
.otn-demos__btn {
    background: #1B192C;
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 12px 18px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(20,16,40,.25);
}
.otn-demos__panel {
    display: none;
    position: absolute;
    right: 0;
    bottom: 52px;
    width: min(360px, calc(100vw - 24px));
    background: #fff;
    border: 1px solid #ececf2;
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(20,16,40,.22);
    overflow: hidden;
}
.otn-demos.open .otn-demos__panel { display: block; }
.otn-demos__head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: #1B192C; color: #fff; font-weight: 800; }
.otn-demos__head button { background: none; border: 0; color: #fff; font-size: 20px; cursor: pointer; }
.otn-demos__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; max-height: 420px; overflow: auto; }
.otn-demos__card {
    border: 1px solid #ececf2;
    border-radius: 8px;
    padding: 8px;
    text-align: left;
    background: #fff;
    cursor: pointer;
    color: inherit;
}
.otn-demos__card.is-active { border-color: #F89506; box-shadow: 0 0 0 2px rgba(248,149,6,.25); }
.otn-demos__mini { height: 54px; border-radius: 4px; margin-bottom: 6px; width: 100%; object-fit: cover; display: block; }
.otn-demos__card b { display: block; font-size: 12px; }
.otn-demos__card small { color: #888; font-size: 10px; }

.otn-builder-canvas { min-height: 40px; }
.otn-widget-ph { border: 1px dashed #d7d7e2; background: #fafbff; padding: 18px; margin: 10px 0; color: #667; font-size: 13px; text-align: center; }