/* ===== DEMO PANEL ===== */
.demo-panel { position: fixed; bottom: 32px; right: 32px; z-index: 200; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; }
.demo-toggle { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-card); border: 1px solid var(--line); box-shadow: 0 4px 20px rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: center; cursor: pointer; pointer-events: auto; transition: background var(--transition-theme), border-color var(--transition-theme), transform 0.3s var(--ease-out-expo); }
.demo-toggle:hover { transform: scale(1.08); }
.demo-toggle svg { width: 18px; height: 18px; stroke: var(--text-h); fill: none; stroke-width: 1.5; transition: stroke var(--transition-theme); }
.demo-drawer { background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px; padding: 20px; box-shadow: 0 8px 32px rgba(0,0,0,0.1); opacity: 0; transform: translateY(8px) scale(0.95); pointer-events: none; transition: opacity 0.35s var(--ease-out-expo), transform 0.35s var(--ease-out-expo), background var(--transition-theme), border-color var(--transition-theme); min-width: 200px; }
.demo-drawer.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.demo-section { margin-bottom: 16px; }
.demo-section:last-child { margin-bottom: 0; }
.demo-section-label { font-family: 'Inter', sans-serif; font-size: 0.58rem; letter-spacing: 3px; text-transform: uppercase; color: var(--text-m); margin-bottom: 10px; }
.demo-styles { display: flex; gap: 6px; }
.demo-style-btn { flex: 1; padding: 10px 0; border-radius: 6px; font-family: 'Noto Sans TC', 'Inter', sans-serif; font-size: 0.68rem; letter-spacing: 0.5px; color: var(--text-m); border: 1px solid var(--line); background: transparent; cursor: pointer; text-decoration: none; text-align: center; transition: border-color 0.3s var(--ease-out-expo), color 0.3s var(--ease-out-expo), background 0.3s var(--ease-out-expo); }
.demo-style-btn:hover { border-color: var(--line-h); color: var(--text-h); }
.demo-style-btn.active { background: var(--text-h); color: var(--bg-1); border-color: var(--text-h); }
.demo-dots { display: flex; gap: 10px; justify-content: center; }
.t-dot { width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: border-color 0.3s, transform 0.25s var(--ease-out-expo); }
.t-dot:hover { transform: scale(1.15); }
.t-dot.on { border-color: var(--text-h); }
.t-dot[data-t="dark"] { background: #111; }
.t-dot[data-t="warm"] { background: linear-gradient(135deg, #FAF7F2, #E8D5C4); }
.t-dot[data-t="clean"] { background: linear-gradient(135deg, #FFF, #D0E0EA); }
@media (max-width: 640px) { .demo-panel { bottom: 18px; right: 18px; } }