/**
 * @fileoverview Global stylesheet for hardware-labeller.
 * Uses CSS custom properties (variables) for theming (dark mode default, light mode via .app.light).
 * All component styles use BEM-style class names.
 * No inline styles anywhere in the app — all appearance is controlled here.
 *
 * @author Simon Rundell
 * @license CC-BY-NC-SA-4.0
 */:root{--bg-primary: #0f1923;--bg-card: #1a2639;--bg-scene: #141e2b;--accent: #00d4ff;--accent-green: #00e676;--accent-red: #ff5252;--accent-amber: #ffab40;--text-primary: #e8eaf0;--text-secondary: #8895a7;--border: #2a3a4f;--hotspot-empty: #2a3a4f;--hotspot-filled: #00d4ff;--label-bg: #1f3048;--label-border: #00d4ff;--theme-toggle-bg: #1a2639;--theme-toggle-border: #2a3a4f;--theme-toggle-icon: "☀️"}.app.light{--bg-primary: #f0f4f8;--bg-card: #ffffff;--bg-scene: #e8edf3;--accent: #0077aa;--accent-green: #1a7a3a;--accent-red: #cc2200;--accent-amber: #b06000;--text-primary: #1a2333;--text-secondary: #4a5a6e;--border: #c8d4e0;--hotspot-empty: #c8d4e0;--hotspot-filled: #0077aa;--label-bg: #ddeeff;--label-border: #0077aa;--theme-toggle-bg: #ffffff;--theme-toggle-border: #c8d4e0;--theme-toggle-icon: "🌙"}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-primary);color:var(--text-primary);font-family:Trebuchet MS,Tahoma,sans-serif;min-height:100vh}.app{display:flex;flex-direction:column;height:100vh;overflow:hidden;transition:background .3s,color .3s}.app-header{flex-shrink:0;display:flex;align-items:center;gap:1rem;padding:0 1.5rem;height:60px;background:var(--bg-card);border-bottom:1px solid var(--border);position:relative;z-index:10}.app-header__logo{font-size:1.5rem}.app-header__title{font-size:1.2rem;font-weight:700;color:var(--accent);letter-spacing:.05em}.app-header__subtitle{font-size:.8rem;color:var(--text-secondary);margin-right:auto}.app-header__phase-indicator{display:flex;align-items:center;gap:.5rem;font-size:.85rem}.app-header__phase-indicator span{color:var(--text-secondary);transition:color .3s}.app-header__phase-indicator span.active{color:var(--accent);font-weight:600}.app-header__phase-indicator .sep{color:var(--border)}.theme-toggle{background:var(--theme-toggle-bg);border:1px solid var(--theme-toggle-border);border-radius:20px;padding:.3rem .75rem;cursor:pointer;font-size:1rem;display:flex;align-items:center;gap:.4rem;color:var(--text-secondary);font-family:Trebuchet MS,Tahoma,sans-serif;font-size:.8rem;transition:border-color .2s,color .2s,background .2s;white-space:nowrap;flex-shrink:0}.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}.theme-toggle__icon{font-size:1rem;line-height:1}.learn-phase{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-primary)}.learn-phase__progress{flex-shrink:0;height:4px;background:var(--border);position:relative}.learn-phase__progress-fill{height:100%;background:var(--accent);transition:width .4s ease}.learn-phase__content{flex:1;overflow-y:auto;padding:1.5rem;display:flex;justify-content:center}.learn-phase__nav{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.5rem;background:var(--bg-card);border-top:1px solid var(--border)}.learn-phase__nav-btn{background:transparent;border:1px solid var(--border);color:var(--text-primary);padding:.5rem 1.25rem;border-radius:6px;cursor:pointer;font-family:Trebuchet MS,Tahoma,sans-serif;font-size:.9rem;transition:border-color .2s,color .2s,background .2s}.learn-phase__nav-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.learn-phase__nav-btn:disabled{opacity:.35;cursor:not-allowed}.learn-phase__nav-btn--complete{background:var(--accent);border-color:var(--accent);color:#0f1923;font-weight:700;font-size:1rem;padding:.6rem 1.75rem}.learn-phase__nav-btn--complete:hover{background:#00b8d9;border-color:#00b8d9;color:#0f1923}.learn-phase__counter{font-size:.85rem;color:var(--text-secondary)}.slide-card{width:100%;max-width:820px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:2rem;display:flex;flex-direction:column;gap:1.25rem;animation:slideIn .3s ease}@keyframes slideIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.slide-card__header{display:flex;align-items:center;gap:.75rem}.slide-card__icon{font-size:2rem;line-height:1}.slide-card__title{font-size:1.65rem;font-weight:700;color:var(--text-primary);flex:1}.slide-card__category{font-size:.85rem;color:var(--accent);background:rgba(0,212,255,.1);border:1px solid rgba(0,212,255,.3);padding:.2rem .6rem;border-radius:20px;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.slide-card__summary{font-size:1.15rem;color:var(--text-primary);line-height:1.6;border-left:3px solid var(--accent);padding-left:.75rem}.slide-card__facts{list-style:none;display:flex;flex-direction:column;gap:.6rem}.slide-card__facts li{font-size:1.05rem;color:var(--text-secondary);padding-left:1.1rem;position:relative;line-height:1.5}.slide-card__facts li:before{content:"▸";position:absolute;left:0;color:var(--accent)}.slide-card__subsidiary{display:flex;flex-direction:column;gap:.4rem;border:1px solid var(--border);border-radius:8px;overflow:hidden}.slide-card__sub-item{border-bottom:1px solid var(--border)}.slide-card__sub-item:last-child{border-bottom:none}.slide-card__sub-header{display:flex;align-items:center;gap:.6rem;width:100%;padding:.65rem .9rem;cursor:pointer;background:rgba(255,255,255,.02);transition:background .2s;-webkit-user-select:none;user-select:none}.slide-card__sub-header:hover{background:rgba(0,212,255,.06)}.slide-card__sub-icon{font-size:1.1rem}.slide-card__sub-label{flex:1;font-size:1.05rem;font-weight:600;color:var(--text-primary)}.slide-card__sub-chevron{font-size:.75rem;color:var(--text-secondary);transition:transform .25s}.slide-card__sub-item--open .slide-card__sub-chevron{transform:rotate(180deg)}.slide-card__sub-detail{max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s;font-size:1rem;color:var(--text-secondary);line-height:1.6;padding:0 .9rem}.slide-card__sub-item--open .slide-card__sub-detail{max-height:400px;height:145px;overflow-y:auto;padding:.5rem .9rem .75rem}.slide-card__hook{font-style:italic;color:var(--text-secondary);font-size:1rem;padding:.6rem .9rem;background:rgba(255,171,64,.07);border-left:3px solid var(--accent-amber);border-radius:0 6px 6px 0;line-height:1.5}.label-phase{flex:1;display:flex;flex-direction:column;overflow:hidden}.label-phase__toolbar{flex-shrink:0;display:flex;align-items:center;gap:.75rem;padding:.5rem 1rem;background:var(--bg-card);border-bottom:1px solid var(--border)}.label-phase__scene-tabs{display:flex;gap:.4rem;flex:1}.label-phase__tab{background:transparent;border:1px solid var(--border);color:var(--text-secondary);padding:.4rem 1rem;border-radius:6px;cursor:pointer;font-family:Trebuchet MS,Tahoma,sans-serif;font-size:.85rem;display:flex;align-items:center;gap:.5rem;transition:border-color .2s,color .2s,background .2s}.label-phase__tab:hover{border-color:var(--accent);color:var(--text-primary)}.label-phase__tab--active{border-color:var(--accent);color:var(--accent);background:rgba(0,212,255,.08)}.label-phase__tab-dot{width:8px;height:8px;border-radius:50%;border:2px solid currentColor}.label-phase__tab-dot--filled{background:currentColor}.label-phase__submit-btn{background:var(--accent);border:none;color:#0f1923;padding:.5rem 1.25rem;border-radius:6px;cursor:pointer;font-family:Trebuchet MS,Tahoma,sans-serif;font-size:.9rem;font-weight:700;transition:background .2s;white-space:nowrap}.app.light .label-phase__submit-btn{color:#fff}.label-phase__submit-btn:hover{background:#00b8d9}.label-phase__scene-description{flex-shrink:0;padding:.4rem 1rem;font-size:.85rem;color:var(--text-secondary);background:rgba(0,0,0,.2);border-bottom:1px solid var(--border)}.scene-view{flex:1;position:relative;overflow:hidden;background:var(--bg-scene)}.scene-view__svg-wrap{width:100%;height:100%;transition:filter .3s}.app.light .scene-view__svg-wrap{filter:invert(1) hue-rotate(180deg) brightness(.92) saturate(1.2)}.hotspot-marker{position:absolute;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;transition:transform .2s}.hotspot-marker:hover{transform:translate(-50%,-50%) scale(1.1)}.hotspot-marker--empty{border:2px dashed var(--hotspot-empty);background:rgba(42,58,79,.6);color:var(--text-secondary);font-size:1.1rem;font-weight:700}.hotspot-marker--empty.hotspot-marker--drag-over{border-color:var(--accent);border-style:solid;background:rgba(0,212,255,.15);box-shadow:0 0 12px #00d4ff66;transform:translate(-50%,-50%) scale(1.12)}.hotspot-marker--filled{border:2px solid var(--hotspot-filled);background:rgba(0,212,255,.12);flex-direction:column;gap:1px;padding:4px}.hotspot-marker__text{font-size:.55rem;text-align:center;color:var(--accent);font-weight:600;line-height:1.2;word-break:break-word;max-width:48px}.hotspot-marker__remove-btn{background:none;border:none;color:var(--accent-red);cursor:pointer;font-size:.7rem;padding:0;line-height:1;opacity:.7;transition:opacity .2s}.hotspot-marker__remove-btn:hover{opacity:1}.hotspot-marker[data-hint]{position:absolute}.hotspot-marker[data-hint]:hover:after{content:attr(data-hint);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);background:#0a1525;color:#e8eaf0;font-size:.75rem;padding:.4rem .65rem;border-radius:6px;border:1px solid var(--border);white-space:nowrap;pointer-events:none;z-index:100;box-shadow:0 4px 12px #00000080}.label-bank{flex-shrink:0;min-height:100px;max-height:130px;overflow-x:auto;overflow-y:hidden;padding:.65rem 1rem;border-top:1px solid var(--border);background:var(--bg-card)}.label-bank__title{font-size:.75rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.4rem;flex-shrink:0}.label-bank__pool{display:flex;flex-direction:row;gap:.5rem;align-items:center;flex-wrap:wrap}.label-bank--drag-over{background:rgba(0,212,255,.05);border-top-color:var(--accent)}.draggable-label{display:inline-flex;align-items:center;padding:.4rem .9rem;background:var(--label-bg);border:1px solid var(--label-border);border-radius:20px;font-size:.85rem;color:var(--text-primary);cursor:grab;-webkit-user-select:none;user-select:none;white-space:nowrap;transition:transform .15s,box-shadow .15s;box-shadow:0 1px 4px #0000004d}.draggable-label:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00d4ff40}.draggable-label.dragging{opacity:.5;cursor:grabbing}.results-phase{flex:1;overflow-y:auto;padding:1.5rem;background:var(--bg-primary)}.results-phase__score-hero{text-align:center;padding:1.5rem;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;margin-bottom:1.25rem}.results-phase__score-number{font-size:2.5rem;font-weight:700;color:var(--accent)}.results-phase__score-label{font-size:.9rem;color:var(--text-secondary);margin-bottom:1rem}.results-phase__band-message{font-size:1rem;color:var(--text-primary);margin-bottom:1rem;font-style:italic}.results-phase__progress-bar{height:10px;background:var(--border);border-radius:5px;overflow:hidden;max-width:400px;margin:0 auto}.results-phase__progress-bar-fill{height:100%;border-radius:5px;transition:width .8s ease;background:var(--accent-green)}.results-phase__scene-result{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;margin-bottom:1rem;overflow:hidden}.results-phase__scene-header{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1.1rem;cursor:pointer;background:rgba(255,255,255,.02);transition:background .2s}.results-phase__scene-header:hover{background:rgba(255,255,255,.04)}.results-phase__scene-title{font-size:1rem;font-weight:600}.results-phase__scene-score{font-size:.875rem;color:var(--text-secondary)}.results-phase__rows{padding:.5rem 1.1rem .9rem;display:flex;flex-direction:column;gap:.4rem}.results-phase__row{display:flex;align-items:flex-start;gap:.6rem;padding:.5rem .7rem;border-radius:6px;font-size:.875rem}.results-phase__row-icon{flex-shrink:0;font-size:1rem}.results-phase__row-content{flex:1}.results-phase__row--correct{background:rgba(0,230,118,.07)}.results-phase__row--correct .results-phase__row-placed{color:var(--accent-green);font-weight:600}.results-phase__row--wrong{background:rgba(255,82,82,.07)}.results-phase__row--wrong .results-phase__row-placed{color:var(--accent-red)}.results-phase__row--wrong .results-phase__row-correct{color:var(--accent-green);font-size:.825rem;display:block;margin-top:.2rem}.results-phase__row--unanswered{background:rgba(255,171,64,.07)}.results-phase__row--unanswered .results-phase__row-placed{color:var(--accent-amber)}.results-phase__row--unanswered .results-phase__row-correct{color:var(--accent-green);font-size:.825rem;display:block;margin-top:.2rem}.results-phase__row-hint{font-size:.775rem;color:var(--text-secondary);display:block;margin-top:.15rem}.results-phase__actions{display:flex;justify-content:center;gap:1rem;margin-top:1.25rem;padding-bottom:1rem}.results-phase__btn{padding:.65rem 1.5rem;border-radius:8px;cursor:pointer;font-family:Trebuchet MS,Tahoma,sans-serif;font-size:.95rem;font-weight:600;transition:background .2s,border-color .2s}.results-phase__btn--primary{background:var(--accent);border:none;color:#0f1923}.results-phase__btn--primary:hover{background:#00b8d9}.results-phase__btn--secondary{background:transparent;border:1px solid var(--border);color:var(--text-primary)}.results-phase__btn--secondary:hover{border-color:var(--accent);color:var(--accent)}