/* demo.css - Demo mode badge, bar, mode toggle */
/* Demo mode badge */
.topbar-demo{font-size:11px;font-weight:800;color:#0a0b0e;background:#FCD535;padding:3px 8px 3px 18px;border-radius:2px;position:relative;letter-spacing:0.5px}
.topbar-demo::before{content:'';position:absolute;left:6px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:#0a0b0e}

/* Demo mode top bar */
.demo-bar{position:fixed;top:0;left:0;right:0;height:32px;z-index:61;display:none;background:linear-gradient(90deg,#1a1500 0%,#2a2000 50%,#1a1500 100%);border-bottom:1px solid rgba(252,213,53,0.25);align-items:center;justify-content:center;gap:6px;font-size:11px;font-weight:600;color:#FCD535;letter-spacing:0.5px;white-space:nowrap;font-family:'Plus Jakarta Sans',sans-serif}
.demo-bar.visible{display:flex}
.demo-bar-dot{width:6px;height:6px;border-radius:50%;background:#FCD535;flex-shrink:0;animation:demoPulse 2s ease infinite}
@keyframes demoPulse{0%,100%{opacity:1}50%{opacity:0.3}}
.demo-bar-text{color:#b8a040}
.demo-bar-cta{color:#FCD535;cursor:pointer;text-decoration:underline;text-underline-offset:2px;transition:color 0.15s;font-weight:700}
.demo-bar-cta:hover{color:#ffe066}
.app.demo-active{margin-top:32px;height:calc(100vh - 32px)}

/* Mode toggle dropdown (LIVE / DEMO switcher) */
.mode-toggle{position:relative;cursor:pointer;z-index:51;display:flex;align-items:center}
.mode-toggle:hover .mt-dropdown{display:block}
.mode-toggle:hover .mt-badge{border-radius:2px 2px 0 0}
.mt-badge{transition:border-radius 0.1s}
.mt-dropdown{position:absolute;top:100%;left:0;min-width:120px;background:#111318;border:1px solid #2B2F36;border-radius:0 4px 4px 4px;z-index:50;display:none;box-shadow:0 8px 24px rgba(0,0,0,0.5);overflow:hidden}
.mt-option{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:11px;font-weight:700;letter-spacing:0.5px;cursor:pointer;transition:background 0.1s;white-space:nowrap}
.mt-option:hover{background:rgba(234,236,239,0.06)}
.mt-option.mt-active{opacity:0.5;pointer-events:none}
.mt-option .mt-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.mt-option.mt-live{color:#0ecb81}
.mt-option.mt-live .mt-dot{background:#0ecb81}
.mt-option.mt-demo{color:#FCD535}
.mt-option.mt-demo .mt-dot{background:#FCD535}