:root{--demo-teal:#3dd6cf;--demo-green:#69d59c;--demo-amber:#f3bd68;--demo-red:#f07883;--demo-panel:#101e2a;--demo-panel2:#132431;--demo-line:#243746;--demo-muted:#8fa4b0}
html,body{min-height:100%;background:#071019}
.klara-demo-host .klara-beta-root{min-height:100vh}.klara-demo-host .klara-demo-console{max-width:none;margin:0;padding:0}.klara-demo-host .portal-topbar{position:sticky;top:0;z-index:80}.klara-demo-host .portal-frame{min-height:calc(100vh - 80px)}
.demo-tour-button,.demo-showcase-button{min-height:42px;padding:9px 15px;border:1px solid rgba(61,214,207,.38);border-radius:9px;background:rgba(61,214,207,.08);color:var(--demo-teal);font-weight:800}.demo-tour-button:hover,.demo-showcase-button:hover{background:rgba(61,214,207,.16)}.demo-showcase-button{border-color:rgba(175,137,255,.52);background:rgba(126,87,194,.16);color:#d9c8ff}
.klara-demo-banner{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:16px 22px 0;padding:12px 16px;border:1px solid rgba(61,214,207,.25);border-radius:13px;background:linear-gradient(90deg,rgba(61,214,207,.09),rgba(91,150,255,.05));color:#fff}.klara-demo-banner>div{display:grid;gap:2px}.klara-demo-banner strong,.klara-demo-banner>b{color:var(--demo-teal);font:800 .64rem var(--mono,monospace);letter-spacing:.09em}.klara-demo-banner span{color:var(--demo-muted);font-size:.74rem}.klara-demo-banner>b{white-space:nowrap}
.klara-demo-host .portal-sidebar{top:80px;height:calc(100vh - 80px)}.klara-demo-host .guild-switcher-menu button{width:100%;border:0;border-bottom:1px solid var(--demo-line);border-radius:0;background:transparent;color:inherit;text-align:left}.klara-demo-host .guild-switcher-menu button:not(.guild-access-launch){display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 13px}.klara-demo-host .guild-switcher-menu button:not(.guild-access-launch)>span{display:grid;gap:2px}.klara-demo-host .guild-switcher-menu button:not(.guild-access-launch) small{color:var(--demo-muted)}.klara-demo-host .guild-switcher-menu button:not(.guild-access-launch) i{color:var(--demo-teal);font-size:.62rem;font-style:normal;text-transform:uppercase}.klara-demo-host .guild-switcher-menu button.is-active{background:rgba(61,214,207,.08)}
.portal-content{min-width:0}.demo-page{display:grid;gap:16px;animation:demo-page-in .2s ease}.demo-page[hidden]{display:none!important}@keyframes demo-page-in{from{opacity:.2;transform:translateY(4px)}to{opacity:1;transform:none}}
.demo-page .page-heading{margin-bottom:2px}.demo-page .page-heading>div>p{margin:0 0 4px;color:var(--demo-teal);font:800 .62rem var(--mono,monospace);letter-spacing:.09em}.demo-page .page-heading h1{margin:0}.demo-page .page-heading>div>span{display:block;margin-top:5px;color:var(--demo-muted)}
.layout-panel[hidden]{display:none}.layout-panel{position:relative}.module-visibility{align-items:center}.module-visibility label{display:flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid var(--demo-line);border-radius:8px;background:#09151f}.module-visibility input{width:auto;min-height:0}.demo-module-order{display:inline-flex;gap:5px;margin-left:3px}.demo-module-order button{min-height:30px;padding:4px 8px;border:1px solid var(--demo-line);border-radius:6px;background:#0a1721;color:#dbe5e8}
.dashboard-module[hidden],.demo-hub-module[hidden]{display:none!important}.dashboard-module.is-dragging,.demo-hub-module.is-dragging{opacity:.42}.drag-handle{min-width:34px;padding:3px 7px;border:1px solid transparent;border-radius:7px;text-align:center}.drag-handle:hover{border-color:var(--demo-line);background:#09151f}.dashboard-module .text-link{display:inline-block;margin-top:15px;color:var(--demo-teal);font-weight:800}
.demo-metric-compact{grid-template-columns:repeat(4,minmax(0,1fr))}.demo-metric-compact article{min-width:0}.demo-leader{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0;padding:9px 0;border-bottom:1px solid rgba(143,164,176,.12)}.demo-leader:last-child{border:0}.demo-leader span{display:grid;gap:2px}.demo-leader small{color:var(--demo-muted)}.demo-leader strong{color:var(--demo-teal);font:800 .7rem var(--mono,monospace)}
.demo-upload{width:100%;border:1px dashed var(--line2,#315064);background:#0a1721;color:#fff}.demo-upload.is-processing{border-color:var(--demo-teal);background:rgba(61,214,207,.08)}.demo-upload.is-complete{border-color:var(--demo-green);background:rgba(105,213,156,.07)}
.health-dot.offline{background:#f36f7c!important;box-shadow:0 0 0 4px rgba(243,111,124,.12)!important}
.demo-hub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.demo-hub-module{min-width:0}.demo-hub-module[data-module="battle-room"],.demo-hub-module[data-module="plans"],.demo-hub-module[data-module="trend"]{grid-column:1/-1}
.demo-room-status{display:grid;grid-template-columns:12px minmax(0,1fr) auto;align-items:center;gap:11px;padding:12px;border:1px solid rgba(105,213,156,.25);border-radius:10px;background:rgba(105,213,156,.05)}.demo-room-status>i{width:10px;height:10px;border-radius:50%;background:var(--demo-green);box-shadow:0 0 12px rgba(105,213,156,.6)}.demo-room-status>span{display:grid}.demo-room-status small{color:var(--demo-muted)}.demo-room-status>strong{color:var(--demo-green);font:800 .62rem var(--mono,monospace)}
.demo-rule-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0}.demo-chat{display:grid;gap:8px;max-height:260px;padding:13px;border:1px solid var(--demo-line);border-radius:11px;overflow:auto;background:#08131c}.demo-chat p{display:grid;grid-template-columns:1fr auto;gap:3px 12px;width:min(82%,660px);margin:0;padding:10px 12px;border:1px solid var(--demo-line);border-radius:10px;background:var(--demo-panel2)}.demo-chat p.is-own{justify-self:end;border-color:rgba(61,214,207,.3);background:rgba(61,214,207,.08)}.demo-chat p span{grid-column:1/-1}.demo-chat p small{grid-column:2;grid-row:1;color:var(--demo-muted)}.demo-chat-compose{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:9px}
.demo-info{display:inline-grid;width:18px;height:18px;min-height:0;place-items:center;padding:0;border:1px solid rgba(61,214,207,.48);border-radius:50%;background:rgba(61,214,207,.08);color:var(--demo-teal);font:900 .68rem sans-serif;vertical-align:1px}.demo-tooltip{position:fixed;z-index:120;max-width:300px;padding:9px 11px;border:1px solid rgba(61,214,207,.35);border-radius:8px;background:#061019;color:#dbe5e8;box-shadow:0 12px 30px rgba(0,0,0,.35);font-size:.72rem;line-height:1.45;pointer-events:none}
.demo-attendance-lists{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:14px 0}.demo-attendance-lists details{padding:11px;border:1px solid var(--demo-line);border-radius:9px;background:#09151f}.demo-attendance-lists summary{cursor:pointer;font-weight:800}.demo-attendance-lists p{margin:8px 0 0;color:var(--demo-muted)}
.demo-day-plans{display:grid;gap:8px}.demo-day-plans details{border:1px solid var(--demo-line);border-radius:10px;background:#09151f}.demo-day-plans summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;cursor:pointer}.demo-day-plans summary span{display:grid}.demo-day-plans summary small{color:var(--demo-muted)}.demo-day-plans summary i{color:var(--demo-teal);font-style:normal}.demo-day-plans textarea{width:calc(100% - 24px);margin:0 12px}.demo-day-plans details>div{display:flex;gap:8px;padding:10px 12px 12px}.demo-outcome{display:grid;grid-template-columns:1fr 1fr;gap:12px}.demo-note{color:var(--demo-muted)}
.demo-member-search{display:grid;grid-template-columns:auto minmax(180px,280px);align-items:center;gap:8px}.rank-group>div>article[data-demo-member][hidden]{display:none}.rank-group>div>article>strong{color:var(--demo-teal)}
.demo-page-grid{align-items:stretch}.demo-insights,.demo-automation-list{display:grid;gap:8px}.demo-insights article,.demo-automation-list p{display:grid;gap:3px;margin:0;padding:12px;border:1px solid var(--demo-line);border-radius:9px;background:#09151f}.demo-insights span,.demo-automation-list small{color:var(--demo-muted)}.demo-automation-list p{grid-template-columns:1fr auto;align-items:center}.demo-automation-list p>span{display:grid}.demo-automation-list p>strong{color:var(--demo-green);font:800 .62rem var(--mono,monospace)}
.demo-report-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}.demo-quiz{display:grid;gap:14px}.demo-addon-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.demo-addon-grid article{display:grid;align-content:start;gap:8px}.demo-addon-grid article>small{color:var(--demo-teal);font:800 .6rem var(--mono,monospace);letter-spacing:.08em}.demo-addon-grid h2,.demo-addon-grid p{margin:0}.demo-addon-grid p{min-height:48px;color:var(--demo-muted)}.demo-addon-grid a{margin-top:auto;color:var(--demo-teal);font-weight:800}
.demo-toggle{display:flex!important;grid-template-columns:auto!important;align-items:center;gap:8px!important}.demo-toggle input{position:absolute;width:1px;min-height:0;opacity:0}.demo-toggle>span{position:relative;width:42px;height:24px;border-radius:999px;background:#253b48}.demo-toggle>span:after{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#9aabb3;content:"";transition:.16s}.demo-toggle input:checked+span{background:rgba(61,214,207,.35)}.demo-toggle input:checked+span:after{left:21px;background:var(--demo-teal)}.demo-toggle.compact>span{width:36px;height:20px}.demo-toggle.compact>span:after{width:14px;height:14px}.demo-toggle.compact input:checked+span:after{left:19px}
.demo-announcement-master{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 20px;border:1px solid rgba(243,189,104,.35);border-radius:13px;background:rgba(243,189,104,.04)}.demo-announcement-master h3,.demo-announcement-master p{margin:3px 0}.demo-announcement-master p{color:var(--demo-muted)}.demo-announcement-master small{color:var(--demo-amber);font:800 .62rem var(--mono,monospace)}.demo-announcement-table{display:grid;overflow:auto}.demo-announcement-table>header,.demo-announcement-table>article{display:grid;grid-template-columns:minmax(210px,1.5fr) 70px minmax(150px,1fr) minmax(160px,1fr) minmax(150px,1fr);align-items:center;gap:12px;padding:11px 12px;border-bottom:1px solid var(--demo-line)}.demo-announcement-table>header{color:var(--demo-muted);font:800 .6rem var(--mono,monospace);letter-spacing:.06em}.demo-announcement-table>article>span:first-child{display:grid}.demo-announcement-table small{color:var(--demo-muted)}
.demo-role-list{display:grid;gap:7px}.demo-role-list article{display:grid;grid-template-columns:minmax(120px,1fr) minmax(180px,1fr) auto;align-items:center;gap:9px;padding:9px;border-bottom:1px solid var(--demo-line)}
.demo-dialog{max-width:min(980px,calc(100vw - 30px));max-height:calc(100vh - 30px);padding:0;border:1px solid var(--demo-line);border-radius:16px;overflow:auto;background:#08141e;color:#eff5f7;box-shadow:0 28px 90px rgba(0,0,0,.6)}.demo-dialog::backdrop,.demo-tour::backdrop{background:rgba(1,8,12,.76);backdrop-filter:blur(6px)}
.demo-access-table{display:grid;gap:7px;margin-bottom:12px}.demo-access-table article{display:grid;grid-template-columns:130px repeat(3,minmax(120px,1fr));gap:8px;padding:10px;border:1px solid var(--demo-line);border-radius:8px;background:#09151f}.demo-access-table span{color:var(--demo-muted)}
.klara-command-guide.demo-dialog{width:min(1050px,calc(100vw - 30px));padding:22px}.klara-command-guide.demo-dialog>header{padding:0 0 16px}.klara-command-guide.demo-dialog>header button{width:40px;height:40px;padding:0}.klara-command-groups{display:grid;gap:14px;margin-top:15px}.klara-command-groups section{border:1px solid var(--demo-line);border-radius:10px;overflow:hidden}.klara-command-groups h3{margin:0;padding:11px 13px;background:var(--demo-panel2)}.klara-command-groups article{display:grid;gap:8px;padding:13px;border-top:1px solid var(--demo-line)}.klara-command-groups article>div{display:grid;grid-template-columns:minmax(180px,.8fr) 1.5fr;gap:12px}.klara-command-groups code{color:var(--demo-teal)}.klara-command-groups pre{margin:0;padding:8px;border-radius:6px;overflow:auto;background:#050d13}.klara-command-groups article[hidden]{display:none}
.demo-tour{width:min(920px,calc(100vw - 30px));max-height:calc(100vh - 30px);padding:0;border:1px solid rgba(61,214,207,.4);border-radius:16px;overflow:auto;background:linear-gradient(145deg,#102330,#09151f);color:#f3f7f8;box-shadow:0 28px 90px rgba(0,0,0,.68)}.demo-tour-layout{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:560px}.demo-tour-layout>aside{display:grid;grid-template-rows:auto 1fr auto;gap:14px;padding:24px 18px;border-right:1px solid var(--demo-line);background:#07131c}.demo-tour-layout>aside>p{margin:0}.demo-tour-layout>aside ol{display:grid;align-content:start;gap:4px;margin:0;padding:0;list-style:none}.demo-tour-layout>aside button{width:100%;text-align:left}.demo-tour-layout>aside li button{min-height:34px;padding:7px 9px;border:0;border-radius:7px;background:transparent;color:var(--demo-muted);font-size:.7rem}.demo-tour-layout>aside li button:hover,.demo-tour-layout>aside li button.is-active{background:rgba(61,214,207,.11);color:var(--demo-teal)}.demo-tour-layout>section{display:flex;flex-direction:column;padding:28px}.demo-tour h2{margin:7px 0;font-size:clamp(1.55rem,3vw,2.25rem)}.demo-tour [data-demo-tour-copy]{color:#b7c6cc;line-height:1.6}.demo-tour-progress{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px}.demo-tour-progress>span{color:var(--demo-teal);font:800 .62rem var(--mono,monospace)}.demo-tour-progress>i{height:5px;border-radius:999px;overflow:hidden;background:#203743}.demo-tour-progress b{display:block;width:9%;height:100%;background:var(--demo-teal);transition:.2s}.demo-tour-highlights{display:grid;gap:8px;margin:14px 0 4px;padding:0;list-style:none}.demo-tour-highlights li{padding:9px 11px;border:1px solid var(--demo-line);border-radius:8px;background:rgba(5,13,19,.42);color:#dce8eb}.demo-tour-highlights li:before{margin-right:8px;color:var(--demo-green);content:"✓"}.demo-tour-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:auto;padding-top:22px}
.demo-first-look{width:min(1000px,calc(100vw - 28px));padding:24px;border:1px solid rgba(88,101,242,.7);border-radius:18px;background:radial-gradient(circle at 82% 12%,rgba(88,101,242,.16),transparent 34%),linear-gradient(145deg,#111827,#07121b);color:#f3f7f8;box-shadow:0 30px 100px rgba(0,0,0,.72)}.demo-first-look::backdrop{background:rgba(1,8,12,.82);backdrop-filter:blur(8px)}.demo-first-look-label{display:flex;align-items:center;gap:8px;color:#aeb7ff;font:800 .62rem var(--mono,monospace);letter-spacing:.1em}.demo-first-look-label span{width:8px;height:8px;border-radius:50%;background:#5865f2;box-shadow:0 0 14px rgba(88,101,242,.8)}.demo-first-look-grid{display:grid;grid-template-columns:minmax(250px,.72fr) minmax(480px,1.28fr);align-items:center;gap:28px;margin-top:18px}.demo-first-look h2{margin:5px 0 10px;font-size:clamp(1.55rem,3vw,2.35rem)}.demo-first-look section>p:not(.eyebrow){color:#b7c6cc;line-height:1.65}.demo-first-look ul{display:grid;gap:7px;padding:0;list-style:none;color:var(--demo-muted)}.demo-first-look li:before{margin-right:8px;color:var(--demo-green);content:"✓"}.demo-discord-frame{display:grid;grid-template-columns:132px minmax(0,1fr);overflow:hidden;border:1px solid #111214;border-radius:10px;background:#1e1f22;box-shadow:0 18px 50px rgba(0,0,0,.45)}.demo-discord-frame>aside{display:grid;align-content:start;gap:8px;padding:14px 9px;background:#2b2d31;color:#b5bac1}.demo-discord-frame>aside>strong{margin-bottom:11px;color:#f2f3f5;font-size:1rem}.demo-discord-frame>aside>small{color:#949ba4;font:800 .57rem var(--mono,monospace);letter-spacing:.08em}.demo-discord-frame>aside>span{display:flex;align-items:center;gap:7px;padding:7px;border-radius:5px;font-size:.72rem}.demo-discord-frame>aside>span.is-selected{background:#404249;color:#fff}.demo-discord-frame>aside img,.demo-discord-frame>aside i{display:grid;width:25px;height:25px;place-items:center;border-radius:50%;background:#5865f2;color:#fff;font-style:normal}.demo-discord-frame>aside img{object-fit:cover}.demo-discord-frame>aside>em{align-self:end;margin-top:20px;padding:6px;border:1px solid rgba(250,168,26,.45);border-radius:4px;color:#f0b232;font:800 .52rem var(--mono,monospace);font-style:normal;text-align:center}.demo-dm-phone{overflow:hidden;border-left:1px solid #1e1f22;background:#313338}.demo-discord-sim-banner{padding:6px 10px;background:#5865f2;color:#fff;font:900 .55rem var(--mono,monospace);letter-spacing:.08em;text-align:center}.demo-dm-phone>header{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid #26272b;background:#313338;box-shadow:0 1px 0 rgba(0,0,0,.18)}.demo-dm-phone>header img{width:42px;height:42px;border-radius:50%}.demo-dm-phone>header span{display:grid}.demo-dm-phone>header small{color:#b5bac1}.demo-dm-phone>header i{color:#23a55a;font:800 .62rem var(--mono,monospace);font-style:normal}.demo-dm-thread{display:grid;gap:9px;min-height:285px;padding:15px}.demo-dm-thread article{max-width:88%;padding:10px 12px;border-left:2px solid #5865f2;border-radius:3px;background:#2b2d31;opacity:0;animation:demo-dm-arrive .38s ease forwards}.demo-dm-thread article b small{padding:1px 4px;border-radius:3px;background:#5865f2;color:#fff;font-size:.52rem}.demo-dm-thread article p{margin:4px 0 5px;line-height:1.45}.demo-dm-thread article>small{color:#949ba4}.demo-dm-thread .from-member{justify-self:end;border-color:#23a55a;background:#2b2d31;animation-delay:1.2s}.demo-dm-thread .is-confirmation{animation-delay:1.8s}.demo-dm-actions{display:flex;flex-wrap:wrap;gap:7px;opacity:0;animation:demo-dm-arrive .35s .65s ease forwards}.demo-dm-actions button{min-height:34px;padding:7px 10px;border-color:#5865f2;background:#5865f2;color:#fff;pointer-events:none}.demo-dm-phone>footer{display:grid;gap:3px;padding:11px 14px;border-top:1px solid #26272b;background:#2b2d31}.demo-dm-phone>footer span{color:#949ba4;font-size:.72rem}.demo-dm-phone>footer strong{color:#23a55a}.demo-first-look-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}@keyframes demo-dm-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.demo-setup-heading-actions{display:flex;align-items:center;gap:9px}.demo-onboarding-note{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 18px;border:1px solid rgba(61,214,207,.32);border-radius:13px;background:linear-gradient(90deg,rgba(61,214,207,.09),rgba(91,150,255,.04))}.demo-onboarding-note[hidden]{display:none}.demo-onboarding-note h3,.demo-onboarding-note p{margin:3px 0}.demo-onboarding-note p{max-width:760px;color:var(--demo-muted)}.demo-onboarding-note small{color:var(--demo-teal);font:800 .62rem var(--mono,monospace);letter-spacing:.08em}
.demo-first-look [hidden]{display:none!important}.demo-showcase-hero{display:grid;grid-template-columns:minmax(280px,.78fr) minmax(470px,1.22fr);align-items:center;gap:30px;margin-top:18px}.demo-showcase-hero h2{font-size:clamp(1.8rem,3.5vw,3rem);line-height:1.04}.demo-showcase-screen{overflow:hidden;border:1px solid rgba(61,214,207,.35);border-radius:13px;background:#09151f;box-shadow:0 22px 60px rgba(0,0,0,.45);transform:perspective(1200px) rotateY(-2deg)}.demo-screen-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--demo-line);background:#0d1b26}.demo-screen-bar i{width:7px;height:7px;border-radius:50%;background:#f07883}.demo-screen-bar i:nth-child(2){background:#f3bd68}.demo-screen-bar i:nth-child(3){background:#69d59c}.demo-screen-bar span{margin-left:auto;color:var(--demo-muted);font:800 .52rem var(--mono,monospace);letter-spacing:.08em}.demo-screen-body{display:grid;grid-template-columns:105px 1fr;min-height:310px}.demo-screen-body>aside{display:grid;align-content:start;gap:7px;padding:16px 10px;border-right:1px solid var(--demo-line);background:#07111a;color:var(--demo-muted);font-size:.62rem}.demo-screen-body>aside b{padding:8px;border-radius:6px;background:rgba(61,214,207,.12);color:var(--demo-teal)}.demo-screen-body>aside span{padding:8px}.demo-screen-body>div{display:grid;align-content:start;gap:9px;padding:17px}.demo-screen-body header{display:grid;gap:3px}.demo-screen-body header small{color:var(--demo-teal);font:800 .54rem var(--mono,monospace);letter-spacing:.08em}.demo-screen-body header strong{font-size:1.15rem}.demo-screen-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.demo-screen-metrics p{display:grid;gap:4px;margin:0;padding:10px;border:1px solid var(--demo-line);border-radius:7px;background:#0d1c27}.demo-screen-metrics small{color:var(--demo-muted);font-size:.56rem}.demo-screen-metrics b{font-size:1.18rem}.demo-screen-body article{display:grid;grid-template-columns:8px 1fr;align-items:center;gap:9px;padding:10px;border:1px solid var(--demo-line);border-radius:7px;background:#0b1822}.demo-screen-body article i{width:8px;height:8px;border-radius:50%;background:var(--demo-amber)}.demo-screen-body article:last-child i{background:var(--demo-green)}.demo-screen-body article span{display:grid;gap:2px}.demo-screen-body article b{font-size:.7rem}.demo-screen-body article small{color:var(--demo-muted);font-size:.58rem}.demo-scenario-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:22px}.demo-scenario-gallery button{display:grid;align-content:start;gap:6px;min-height:154px;padding:15px;border:1px solid var(--demo-line);border-radius:10px;background:#0a1721;color:#eff5f7;text-align:left}.demo-scenario-gallery button:hover,.demo-scenario-gallery button:focus-visible{border-color:rgba(61,214,207,.55);background:#102431;transform:translateY(-2px)}.demo-scenario-gallery span{color:var(--demo-teal);font:800 .56rem var(--mono,monospace);letter-spacing:.07em}.demo-scenario-gallery b{font-size:.9rem;line-height:1.25}.demo-scenario-gallery small{color:var(--demo-muted);line-height:1.45}.demo-scenario-gallery em{align-self:end;color:#d9c8ff;font-size:.66rem;font-style:normal;font-weight:800}.demo-toast{position:fixed;right:22px;bottom:22px;z-index:150;max-width:min(420px,calc(100vw - 44px));padding:12px 15px;border:1px solid rgba(61,214,207,.4);border-radius:10px;background:#0a1a25;color:#eff6f7;box-shadow:0 16px 40px rgba(0,0,0,.45);font-weight:700}.demo-toast[hidden]{display:none}
body[data-demo-accent="blue"]{--demo-teal:#66a7ff;--teal:#66a7ff;--cyan:#66a7ff}body[data-demo-accent="violet"]{--demo-teal:#a68cff;--teal:#a68cff;--cyan:#a68cff}body[data-demo-density="compact"] .panel,body[data-demo-density="compact"] .dashboard-module{padding:15px}body[data-demo-density="compact"] .portal-content{padding-top:20px}
.demo-intelligence-brain{margin-top:8px;padding-top:20px;border-top:1px solid var(--demo-line)}.demo-addon-parity [hidden]{display:none!important}.demo-addon-available{border-color:rgba(105,213,156,.4)!important;background:rgba(105,213,156,.1)!important;color:var(--demo-green)!important}
.demo-command-example{display:grid;gap:6px;margin-top:16px;padding:12px;border:1px solid rgba(61,214,207,.28);border-radius:9px;background:#050d13}.demo-command-example small{color:var(--demo-teal);font:800 .56rem var(--mono,monospace);letter-spacing:.08em}.demo-command-example code{display:block;overflow-wrap:anywhere;color:#d9c8ff;font-size:.78rem}.demo-command-example span{color:var(--demo-muted);font-size:.69rem;line-height:1.45}.demo-tour-command{margin-top:16px}.demo-scenario-detail{align-self:stretch;padding:20px;border:1px solid rgba(61,214,207,.3);border-radius:13px;background:linear-gradient(145deg,#0c1c27,#08131c);box-shadow:0 18px 50px rgba(0,0,0,.32)}.demo-scenario-detail>header{display:grid;gap:4px;margin-bottom:15px}.demo-scenario-detail>header small{color:var(--demo-teal);font:800 .56rem var(--mono,monospace);letter-spacing:.08em}.demo-scenario-detail h3{margin:0;font-size:1.25rem}.demo-scenario-detail>header span{color:var(--demo-muted)}.demo-scenario-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.demo-scenario-metrics article{display:grid;gap:4px;padding:12px;border:1px solid var(--demo-line);border-radius:8px;background:#07131c}.demo-scenario-metrics small,.demo-scenario-metrics span{color:var(--demo-muted);font-size:.62rem}.demo-scenario-metrics b{font-size:1.35rem}.demo-scenario-actions-list,.demo-battle-timeline,.demo-intelligence-preview{display:grid;gap:8px;margin-top:12px}.demo-scenario-actions-list article,.demo-battle-timeline article,.demo-intelligence-preview article{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:11px;border:1px solid var(--demo-line);border-radius:8px;background:#091822}.demo-scenario-actions-list i,.demo-intelligence-preview i{width:9px;height:9px;border-radius:50%;background:var(--demo-green)}.demo-scenario-actions-list span,.demo-battle-timeline span,.demo-intelligence-preview span{display:grid;gap:2px}.demo-scenario-actions-list small,.demo-battle-timeline small,.demo-intelligence-preview small{color:var(--demo-muted);font-size:.64rem}.demo-battle-timeline time{display:grid;width:42px;height:42px;place-items:center;border-radius:8px;background:rgba(61,214,207,.11);color:var(--demo-teal);font:800 .62rem var(--mono,monospace)}.demo-intelligence-preview i.warning{background:var(--demo-amber)}.demo-intelligence-preview i.danger{background:var(--demo-red)}.demo-intelligence-preview em{color:var(--demo-teal);font:.8rem var(--mono,monospace);font-style:normal;font-weight:800}
.demo-owner-install{position:fixed;right:24px;bottom:24px;z-index:120;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;width:min(370px,calc(100vw - 48px));padding:15px 16px;border:1px solid rgba(175,137,255,.72);border-radius:15px;background:linear-gradient(135deg,#5b3fb5,#30236f 58%,#15293b);color:#fff;text-decoration:none;box-shadow:0 20px 55px rgba(34,19,85,.58),0 0 0 1px rgba(255,255,255,.07) inset;animation:demo-owner-install-pulse 2.8s ease-in-out infinite}.demo-owner-install[hidden]{display:none!important}.demo-owner-install:hover,.demo-owner-install:focus-visible{border-color:#d9c8ff;color:#fff;transform:translateY(-3px);box-shadow:0 24px 65px rgba(59,37,143,.72),0 0 0 3px rgba(217,200,255,.14)}.demo-owner-install-icon{display:grid;width:46px;height:46px;place-items:center;border-radius:13px;background:rgba(255,255,255,.15);font-size:1.7rem;font-weight:300}.demo-owner-install>span:nth-child(2){display:grid;gap:2px}.demo-owner-install small{color:#d9c8ff;font:800 .56rem var(--mono,monospace);letter-spacing:.09em}.demo-owner-install strong{font-size:1.06rem}.demo-owner-install em{color:#d7d9ea;font-size:.68rem;font-style:normal;line-height:1.35}.demo-owner-install>b{font-size:1.3rem}@keyframes demo-owner-install-pulse{0%,100%{box-shadow:0 20px 55px rgba(34,19,85,.58),0 0 0 1px rgba(255,255,255,.07) inset}50%{box-shadow:0 22px 62px rgba(76,49,179,.76),0 0 0 5px rgba(175,137,255,.08)}}
@media(max-width:1120px){.demo-hub-grid{grid-template-columns:1fr}.demo-hub-module[data-module]{grid-column:1}.demo-addon-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-rule-grid{grid-template-columns:1fr}.demo-announcement-table>header{display:none}.demo-announcement-table>article{grid-template-columns:minmax(220px,1fr) 60px minmax(150px,1fr);align-items:start}.demo-announcement-table>article>*:nth-child(4),.demo-announcement-table>article>*:nth-child(5){grid-column:auto}.demo-scenario-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.klara-demo-banner{margin:10px 10px 0}.klara-demo-banner>b{display:none}.klara-demo-host .portal-sidebar{top:64px;height:auto}.demo-metric-compact{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-addon-grid{grid-template-columns:1fr}.demo-access-table article{grid-template-columns:1fr 1fr}.demo-chat p{width:95%}.demo-first-look-grid,.demo-showcase-hero{grid-template-columns:1fr}.demo-showcase-screen{transform:none}.demo-onboarding-note{align-items:flex-start;flex-direction:column}.demo-setup-heading-actions{align-items:flex-end;flex-direction:column}}
@media(max-width:580px){.topbar-actions .demo-tour-button,.topbar-actions .demo-showcase-button{display:none}.klara-demo-banner{align-items:flex-start;flex-direction:column}.demo-metric-compact,.demo-attendance-lists,.demo-outcome{grid-template-columns:1fr}.demo-chat-compose{grid-template-columns:1fr}.demo-day-plans details>div{display:grid}.demo-member-search{grid-template-columns:1fr}.demo-announcement-master{align-items:flex-start;flex-direction:column}.demo-announcement-table>article{grid-template-columns:1fr}.demo-role-list article{grid-template-columns:1fr}.klara-command-groups article>div{grid-template-columns:1fr}.demo-access-table article{grid-template-columns:1fr}.demo-rule-grid,.demo-scenario-gallery{grid-template-columns:1fr}.demo-first-look{padding:17px}.demo-first-look-grid{gap:16px}.demo-discord-frame{grid-template-columns:1fr}.demo-discord-frame>aside{display:none}.demo-dm-thread article{max-width:94%}.demo-first-look-actions{display:grid}.demo-screen-body{grid-template-columns:1fr}.demo-screen-body>aside{display:none}.demo-screen-metrics{grid-template-columns:1fr 1fr}.demo-setup-heading-actions{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.demo-dm-thread article,.demo-dm-actions{opacity:1;animation:none}.demo-page{animation:none}}
@media(max-width:820px){.demo-tour-layout{grid-template-columns:1fr}.demo-tour-layout>aside{grid-template-rows:auto auto auto;border-right:0;border-bottom:1px solid var(--demo-line)}.demo-tour-layout>aside ol{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-tour-layout>section{padding:22px}.demo-scenario-metrics{grid-template-columns:1fr}}
@media(max-width:580px){.demo-tour-layout>aside ol{grid-template-columns:1fr}.demo-tour-actions{display:grid}.demo-tour-layout>section{padding:18px}.demo-scenario-actions-list article,.demo-battle-timeline article,.demo-intelligence-preview article{grid-template-columns:auto 1fr}.demo-intelligence-preview em{grid-column:2}}
@media(max-width:580px){.demo-owner-install{right:12px;bottom:12px;width:calc(100vw - 24px)}}

/* Keep the familiar grip while offering easier one-click movement underneath. */
.demo-module-quick-move{display:grid;grid-template-columns:1fr 1fr;flex:0 0 42px;gap:3px}.demo-module-quick-move>.drag-handle{grid-column:1/-1}.demo-module-quick-move>button{display:grid;width:20px;height:24px;min-height:0;place-items:center;padding:0;border:1px solid var(--demo-line);border-radius:6px;background:#09151f;color:var(--demo-teal);font-size:.72rem;cursor:pointer}.demo-module-quick-move>button:hover:not(:disabled){border-color:var(--demo-teal);background:rgba(61,214,207,.1)}.demo-module-quick-move>button:disabled{opacity:.3;cursor:not-allowed}

/* Plan preview and temporary guest edits. */
[data-demo-premium-only][hidden]{display:none!important}
body[data-demo-plan="basic"] .klara-demo-banner{border-color:rgba(105,213,156,.38);background:linear-gradient(90deg,rgba(105,213,156,.11),rgba(61,214,207,.04))}
body[data-demo-plan="basic"] .klara-demo-banner>b{color:var(--demo-green)}
.demo-plan-notice{display:grid;gap:3px;margin-top:12px;padding:11px 12px;border:1px solid rgba(175,137,255,.34);border-radius:9px;background:rgba(126,87,194,.09)}
.demo-plan-notice b{color:#d9c8ff}.demo-plan-notice span{color:var(--demo-muted);line-height:1.45}
body[data-demo-plan="basic"] .demo-plan-notice{border-color:rgba(105,213,156,.34);background:rgba(105,213,156,.07)}
body[data-demo-plan="basic"] .demo-plan-notice b{color:var(--demo-green)}
.demo-event-dialog{width:min(700px,calc(100vw - 30px))}.demo-event-dialog form>header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:20px 22px;border-bottom:1px solid var(--demo-line)}
.demo-event-dialog form>header h2,.demo-event-dialog form>header p{margin:3px 0}.demo-event-dialog form>header>button{width:40px;height:40px;padding:0}
.demo-event-form{display:grid;gap:13px;padding:22px}.demo-event-dialog form>footer{display:flex;justify-content:flex-end;gap:9px;padding:0 22px 22px}
.event-card.is-demo-event{border-color:rgba(105,213,156,.46);background:linear-gradient(90deg,rgba(105,213,156,.08),rgba(61,214,207,.025))}
.event-card.is-demo-event .event-type,.event-card.is-demo-event .event-settings strong{color:var(--demo-green)}
.event-card.is-demo-event .event-settings{display:grid;align-content:center;gap:2px}.event-card.is-demo-event .event-settings small{color:var(--demo-muted)}
@media(max-width:580px){.demo-event-dialog form>footer{display:grid}.demo-event-dialog form>footer button{width:100%}}