:root{font-family:system-ui,sans-serif;color:#e9f2ff;background:#0e172a}*{box-sizing:border-box}body{margin:0}.wrap{max-width:1100px;margin:auto;padding:24px}.cube{max-width:650px;margin:auto;padding:20px}.login{max-width:390px;margin:10vh auto;padding:24px;background:#1c2a43;border-radius:18px}header{display:flex;align-items:center;justify-content:space-between;gap:16px}nav,.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}article{background:#1c2a43;border:1px solid #354562;border-radius:16px;padding:20px;margin:18px 0;min-width:0}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:18px}.grid article{margin:0}.grid:has(article){margin:18px 0}h1{color:#76d6ff}h2{font-size:1.2rem;margin-top:0}label{display:block;margin:12px 0;font-size:.92rem}input:not([type=checkbox]):not([type=hidden]),select,textarea{display:block;width:100%;padding:11px;margin-top:5px;background:#0d1729;color:white;border:1px solid #64748b;border-radius:9px}button,.button{display:inline-block;background:#167db7;color:white;border:0;border-radius:9px;padding:10px 16px;text-decoration:none;cursor:pointer;font-size:1rem}button:hover,.button:hover{background:#216c9d}a{color:#9adfff}.notice{padding:12px;border-radius:8px;background:#79491a}small{display:block;color:#c5d4ec;margin-top:9px}ul{padding-left:20px}li{padding:5px 0;overflow-wrap:anywhere}.inline{display:inline}.inline button{padding:4px 8px;font-size:.75rem}.checks,.check{display:flex;gap:12px;flex-wrap:wrap}.face{text-align:center;min-height:200px}.face #eyes{font-size:56px;color:#65d7ff;padding-top:20px}.cube #messages p{background:#253856;padding:12px;border-radius:10px}#mic.recording{background:#b52545}#state{font-size:1.2rem}
 .reminder-due{border:2px solid #e2ac40;border-radius:12px;padding:12px;background:#3c301a}

/* The face and the floating microphone share the same state colours. */
body[data-phase="ready"]{--cube-accent:#76d6ff;--mic-top:#168dc4;--mic-bottom:#07537f}
body[data-phase="listening"]{--cube-accent:#ff747e;--mic-top:#ed5b6a;--mic-bottom:#a92548}
body[data-phase="processing"],body[data-phase="thinking"]{--cube-accent:#ffd16b;--mic-top:#e4a832;--mic-bottom:#89521a}
body[data-phase="speaking"]{--cube-accent:#66e9bd;--mic-top:#20b88e;--mic-bottom:#08705d}
body[data-phase="error"]{--cube-accent:#ff8d8d;--mic-top:#b75860;--mic-bottom:#743c48}
.cube .face{border-color:var(--cube-accent);background:radial-gradient(circle at 50% 0%,#2a445c 0%,#1c2a43 68%);box-shadow:0 0 28px color-mix(in srgb,var(--cube-accent) 25%,transparent);transition:border-color .25s,box-shadow .25s,background .25s}
.cube .face #eyes{color:var(--cube-accent);text-shadow:0 0 22px var(--cube-accent);transition:color .25s}
.cube .face #state{font-weight:700;color:var(--cube-accent);min-height:1.8em;margin-bottom:8px}
body[data-phase="listening"] .face #eyes,body[data-phase="thinking"] .face #eyes,body[data-phase="processing"] .face #eyes{animation:cube-glow 1.5s ease-in-out infinite alternate}
.mic-dock{position:fixed;right:max(16px,env(safe-area-inset-right));top:50%;transform:translateY(-50%);z-index:20;display:flex;flex-direction:column;align-items:center;gap:9px;filter:drop-shadow(0 8px 16px #050e20bb)}
#mic-status{font-size:.78rem;font-weight:800;letter-spacing:.02em;text-align:center;line-height:1.2;min-width:86px;max-width:118px;padding:7px 9px;border:1px solid var(--cube-accent);border-radius:99px;background:#101b30;color:var(--cube-accent)}
#mic{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:88px;height:88px;padding:6px;border:2px solid #ffffffaa;border-radius:50%;background:linear-gradient(145deg,var(--mic-top),var(--mic-bottom));color:#fff;box-shadow:0 0 0 5px #0e172acb,0 8px 28px #000a;touch-action:manipulation;transition:background .2s,transform .2s,box-shadow .2s}
#mic:hover{background:linear-gradient(145deg,var(--mic-top),var(--mic-bottom));transform:scale(1.06)}
#mic:focus-visible{outline:3px solid #fff;outline-offset:7px}
#mic:disabled{opacity:1;cursor:progress}
#mic .mic-icon{font-size:2rem;line-height:1}
#mic-label{font-size:.75rem;font-weight:800}
body[data-phase="listening"] #mic{animation:mic-pulse 1.2s ease-in-out infinite}
body[data-phase="processing"] #mic::before,body[data-phase="thinking"] #mic::before{content:"";position:absolute;inset:-7px;border:3px solid transparent;border-top-color:#ffe4a3;border-left-color:#ffe4a3;border-radius:50%;animation:mic-spin 1.3s linear infinite}
@keyframes mic-pulse{50%{box-shadow:0 0 0 13px #ed5b6a44,0 8px 28px #000a}}
@keyframes mic-spin{to{transform:rotate(360deg)}}
@keyframes cube-glow{to{opacity:.52;transform:scale(.96)}}
@media(max-width:700px){.mic-dock{right:max(10px,env(safe-area-inset-right))}#mic{width:70px;height:70px}#mic .mic-icon{font-size:1.6rem}#mic-label{font-size:.67rem}#mic-status{min-width:70px;max-width:90px;font-size:.68rem;padding:6px}}
@media(prefers-reduced-motion:reduce){body[data-phase] #mic,body[data-phase] .face #eyes,body[data-phase] #mic::before{animation:none}.cube .face,#mic{transition:none}}

/* Administration: clearly separated cards and settings groups. */
.admin-page .wrap{max-width:1200px}
.admin-page article{border:2px solid #435878;border-top:4px solid #76d6ff;box-shadow:0 6px 22px #0003;scroll-margin-top:20px}
.admin-page .admin-nav{margin:12px 0 24px;padding:12px;background:#16233a;border:1px solid #435878;border-radius:12px}
.admin-nav a{padding:5px 8px;text-decoration:none}
.settings-group{min-width:0;margin:18px 0;padding:16px 18px 20px;border:1px solid #5a7295;border-radius:12px;background:#142139}
.settings-group legend{padding:0 10px;color:#9adfff;font-size:1rem;font-weight:700}
.settings-group .grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px 20px}
.admin-page .help{font-size:.9rem;color:#c5d4ec}
.tts-status{padding:12px;background:#0d1729;border:1px solid #435878;border-radius:8px;min-height:46px}
#tts-audio{width:100%;margin:8px 0 14px}#tts-audio[hidden]{display:none}
.admin-page button:disabled{opacity:.65;cursor:wait}
.admin-page li:has(details){margin:14px 0;padding:16px;border:1px solid #435878;border-radius:10px;list-style:none;background:#142139}
@media(max-width:700px){.admin-page .wrap{padding:14px}.admin-page .grid{grid-template-columns:1fr}.admin-page header{align-items:flex-start;flex-wrap:wrap}.settings-group{padding:12px}.admin-page article{padding:16px}}
.admin-page article{overflow-wrap:anywhere}