:root{--bg:#f8f9fb;--bg-elevated:#fff;--bg-subtle:#f1f3f5;--bg-hover:#eef0f3;--bg-active:#e8eaed;--text-primary:#111827;--text-secondary:#4b5563;--text-tertiary:#9ca3af;--text-inverse:#fff;--accent:#6c5ce7;--accent-hover:#5b4bd1;--accent-subtle:#ede9ff;--accent-text:#5a4bbd;--success:#10b981;--success-subtle:#d1fae5;--success-text:#047857;--warning:#f59e0b;--warning-subtle:#fef3c7;--danger:#ef4444;--danger-subtle:#fee2e2;--danger-text:#b91c1c;--border:#e5e7eb;--border-subtle:#f3f4f6;--shadow-sm:0 1px 2px #0000000a;--shadow-md:0 2px 8px #0000000f, 0 1px 2px #0000000a;--shadow-lg:0 4px 16px #00000014, 0 2px 4px #0000000a;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--radius-full:9999px;--font-sans:-apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;--font-mono:"SF Mono", "Fira Code", "Fira Mono", Menlo, Consolas, monospace;--transition-fast:.12s ease;--transition-base:.2s ease;--transition-slow:.3s ease}@media (prefers-color-scheme:dark){:root{--bg:#0f1117;--bg-elevated:#1a1c25;--bg-subtle:#21242e;--bg-hover:#282b37;--bg-active:#2f3340;--text-primary:#f0f1f3;--text-secondary:#9ca3af;--text-tertiary:#6b7280;--text-inverse:#111827;--accent:#8b7cf7;--accent-hover:#a099f9;--accent-subtle:#2a2545;--accent-text:#b4aaf7;--success:#34d399;--success-subtle:#0d3326;--success-text:#6ee7b7;--warning:#fbbf24;--warning-subtle:#3d2f05;--danger:#f87171;--danger-subtle:#3b1515;--danger-text:#fca5a5;--border:#2a2d38;--border-subtle:#21242e;--shadow-sm:0 1px 2px #0003;--shadow-md:0 2px 8px #0000004d, 0 1px 2px #0003;--shadow-lg:0 4px 16px #0006, 0 2px 4px #0003}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility}body{font-family:var(--font-sans);background:var(--bg);color:var(--text-primary);font-size:15px;line-height:1.6}input,button,select,textarea{font-family:inherit;font-size:inherit}.layout{flex-direction:column;min-height:100vh;display:flex}.layout-header{z-index:50;background:var(--bg-elevated);border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:color-mix(in srgb, var(--bg-elevated) 85%, transparent);position:sticky;top:0}.layout-header-inner{justify-content:space-between;align-items:center;max-width:680px;margin:0 auto;padding:14px 20px;display:flex}.layout-logo{color:var(--text-primary);letter-spacing:-.02em;font-size:16px;font-weight:700}.btn-logout{color:var(--text-tertiary);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-fast);background:0 0;border:none;align-items:center;margin-left:auto;padding:6px;display:flex}.btn-logout:hover{color:var(--text-primary);background:var(--bg-hover)}.layout-user{align-items:center;gap:12px;display:flex}.layout-username{color:var(--text-secondary);font-size:13px;font-weight:500}.layout-content{flex:1;width:100%;max-width:680px;margin:0 auto;padding:24px 20px 48px}@media (width<=480px){.layout-content{padding:16px 16px 40px}}.loading{min-height:60vh;color:var(--text-tertiary);justify-content:center;align-items:center;font-size:15px;display:flex}.loading-spinner{border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:20px;height:20px;margin-right:10px;animation:.6s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.card{background:var(--bg-elevated);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--border-subtle);transition:box-shadow var(--transition-base);margin-bottom:20px;padding:24px}@media (width<=480px){.card{border-radius:var(--radius-md);padding:20px 16px}}.card-header{align-items:center;gap:10px;margin-bottom:6px;display:flex}.card-title{letter-spacing:-.02em;color:var(--text-primary);font-size:17px;font-weight:650}.card-desc{color:var(--text-tertiary);margin-bottom:20px;font-size:13px;line-height:1.6}.card-divider{border:none;border-top:1px solid var(--border-subtle);margin:20px 0}.section{margin-bottom:24px}.section:last-child{margin-bottom:0}.section-label{text-transform:uppercase;letter-spacing:.06em;color:var(--text-tertiary);margin-bottom:10px;font-size:12px;font-weight:600}.section-hint{color:var(--text-tertiary);margin-bottom:12px;font-size:13px;line-height:1.5}.btn{border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;-webkit-user-select:none;user-select:none;border:none;outline:none;justify-content:center;align-items:center;gap:8px;padding:9px 18px;font-size:14px;font-weight:550;display:inline-flex;position:relative}.btn:focus-visible{box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--accent)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);color:var(--text-inverse)}.btn-primary:hover:not(:disabled){background:var(--accent-hover);box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-primary:active:not(:disabled){box-shadow:none;transform:translateY(0)}.btn-secondary{background:var(--bg-subtle);color:var(--text-primary);border:1px solid var(--border)}.btn-secondary:hover:not(:disabled){background:var(--bg-hover);border-color:var(--border)}.btn-secondary:active:not(:disabled){background:var(--bg-active)}.btn-ghost{color:var(--text-secondary);background:0 0;padding:7px 12px}.btn-ghost:hover:not(:disabled){background:var(--bg-hover);color:var(--text-primary)}.btn-large{border-radius:var(--radius-md);padding:12px 28px;font-size:15px}.btn-speaking{position:relative;overflow:hidden}.btn-speaking:after{content:"";background:linear-gradient(90deg, transparent, var(--accent), transparent);border-radius:0 0 var(--radius-md) var(--radius-md);height:3px;animation:1.4s cubic-bezier(.4,0,.2,1) infinite speaking-sweep;position:absolute;bottom:0;left:0}@keyframes speaking-sweep{0%{width:30%;left:-30%}50%{width:30%;left:35%}to{width:30%;left:100%}}.badge{border-radius:var(--radius-full);letter-spacing:.01em;align-items:center;gap:4px;padding:3px 9px;font-size:11px;font-weight:600;display:inline-flex}.badge--connected{background:var(--success-subtle);color:var(--success-text)}.badge--disconnected{background:var(--bg-subtle);color:var(--text-tertiary)}.status-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.status-dot--active{background:var(--success);box-shadow:0 0 0 3px var(--success-subtle)}.status-dot--inactive{background:var(--text-tertiary);box-shadow:0 0 0 3px var(--bg-subtle)}.toggle-row{cursor:pointer;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;display:flex}.toggle-row+.toggle-row{border-top:1px solid var(--border-subtle)}.toggle-label{color:var(--text-primary);flex:1;font-size:14px;font-weight:500}.toggle-sublabel{color:var(--text-tertiary);margin-top:2px;font-size:12px;font-weight:400}.toggle-switch{flex-shrink:0;width:44px;height:26px;position:relative}.toggle-switch input{opacity:0;width:0;height:0;position:absolute}.toggle-track{background:var(--bg-active);border-radius:var(--radius-full);transition:background var(--transition-base);cursor:pointer;position:absolute;inset:0}.toggle-track:after{content:"";width:20px;height:20px;transition:transform var(--transition-base);background:#fff;border-radius:50%;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #00000026}.toggle-switch input:checked+.toggle-track{background:var(--accent)}.toggle-switch input:checked+.toggle-track:after{transform:translate(18px)}.toggle-switch input:focus-visible+.toggle-track{box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--accent)}.number-field{justify-content:space-between;align-items:center;gap:16px;padding:12px 0;display:flex}.number-field-label{color:var(--text-primary);font-size:14px;font-weight:500}.number-input-wrap{background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--radius-md);transition:border-color var(--transition-fast);align-items:center;display:flex;overflow:hidden}.number-input-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-subtle)}.number-input-wrap input[type=number]{text-align:center;width:56px;color:var(--text-primary);-moz-appearance:textfield;background:0 0;border:none;outline:none;padding:7px 4px;font-size:14px;font-weight:600}.number-input-wrap input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.number-input-wrap input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}.number-unit{color:var(--text-tertiary);padding-right:10px;font-size:12px;font-weight:500}.text-input{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-subtle);width:100%;color:var(--text-primary);transition:all var(--transition-fast);outline:none;padding:9px 14px;font-size:14px}.text-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-subtle);background:var(--bg-elevated)}.text-input::placeholder{color:var(--text-tertiary)}.tts-row{align-items:stretch;gap:8px;display:flex}.tts-row .text-input{flex:1}.tts-hint{color:var(--text-tertiary);margin-top:8px;font-size:12px;line-height:1.5}.tts-hint code{background:var(--bg-subtle);border-radius:var(--radius-sm);font-family:var(--font-mono);color:var(--accent-text);padding:1px 6px;font-size:11px}.cal-list{flex-direction:column;gap:2px;display:flex}.cal-item{border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast);-webkit-user-select:none;user-select:none;align-items:center;gap:12px;padding:10px 12px;display:flex}.cal-item:hover{background:var(--bg-hover)}.cal-item:active{background:var(--bg-active)}.cal-item input[type=checkbox]{opacity:0;width:0;height:0;position:absolute}.cal-check{border:2px solid var(--border);width:20px;height:20px;transition:all var(--transition-fast);background:var(--bg-elevated);border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.cal-item input:checked~.cal-check{background:var(--accent);border-color:var(--accent)}.cal-item input:checked~.cal-check svg{opacity:1}.cal-check svg{opacity:0;width:12px;height:12px;transition:opacity var(--transition-fast);color:#fff}.cal-item input:focus-visible~.cal-check{box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--accent)}.cal-color{border-radius:50%;flex-shrink:0;width:10px;height:10px}.cal-info{flex:1;min-width:0}.cal-name{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:500;overflow:hidden}.cal-primary{color:var(--text-tertiary);margin-left:4px;font-size:11px;font-weight:500}.color-chips{flex-wrap:wrap;gap:6px;display:flex}.color-chip{border-radius:var(--radius-full);cursor:pointer;border:1.5px solid var(--border);background:var(--bg-elevated);color:var(--text-secondary);transition:all var(--transition-fast);-webkit-user-select:none;user-select:none;align-items:center;gap:6px;padding:5px 12px;font-size:12px;font-weight:500;display:inline-flex}.color-chip:hover{border-color:var(--text-tertiary);background:var(--bg-hover)}.color-chip input[type=checkbox]{opacity:0;pointer-events:none;width:0;height:0;position:absolute}.color-chip--selected{border-color:var(--accent);background:var(--accent-subtle);color:var(--accent-text)}.color-chip--selected:hover{background:var(--accent-subtle);border-color:var(--accent)}.color-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.cal-layout{flex-direction:column;gap:0;display:flex}.cal-settings{flex-direction:column;display:flex}.cal-preview{border-top:1px solid var(--border);max-height:400px;margin-top:8px;padding-top:16px;overflow-y:auto}@media (width>=768px){.cal-layout{flex-direction:row;gap:24px}.cal-settings{flex:1;min-width:0}.cal-preview{border-top:none;border-left:1px solid var(--border);flex:1;min-width:0;max-height:500px;margin-top:0;padding-top:0;padding-left:24px}}.event-list{list-style:none}.day-header{text-transform:uppercase;letter-spacing:.05em;color:var(--text-tertiary);padding:16px 0 8px;font-size:12px;font-weight:600}.event-list li:first-child .day-header{padding-top:0}.event-row{border-radius:var(--radius-sm);border-left:3px solid var(--event-color,var(--accent));background:color-mix(in srgb, var(--event-color,var(--accent)) 6%, transparent);transition:all var(--transition-fast);align-items:center;gap:10px;margin-bottom:4px;padding:8px 12px;display:flex}.event-row:hover{background:color-mix(in srgb, var(--event-color,var(--accent)) 12%, transparent)}.event-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.event-time{color:var(--text-secondary);font-variant-numeric:tabular-nums;flex-shrink:0;min-width:48px;font-size:13px;font-weight:600}.event-title{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:14px;font-weight:450;overflow:hidden}.setup-steps{color:var(--text-secondary);margin:8px 0 16px;padding-left:20px;font-size:13px;line-height:1.7}.setup-steps li{margin-bottom:4px}.setup-steps strong{color:var(--text-primary)}.setup-muted{color:var(--text-tertiary);font-size:12px}.event-bell{width:14px;height:14px;color:var(--accent);opacity:.6;flex-shrink:0}@media (width<=480px){.event-row{gap:8px;padding:6px 8px}.event-time{min-width:40px;font-size:12px}.event-title{font-size:13px}}.connect-section{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.connect-info{flex-direction:column;gap:4px;display:flex}.connect-status{color:var(--text-primary);align-items:center;gap:8px;font-size:14px;font-weight:500;display:flex}.connect-hint{color:var(--text-tertiary);font-size:12px}.login-page{background:var(--bg);justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.login-card{text-align:center;width:100%;max-width:380px}.login-icon{border-radius:var(--radius-lg);background:var(--accent);justify-content:center;align-items:center;width:64px;height:64px;margin:0 auto 24px;display:flex;box-shadow:0 4px 24px #6c5ce74d}.login-icon svg{color:#fff;width:32px;height:32px}.login-title{letter-spacing:-.03em;color:var(--text-primary);margin-bottom:8px;font-size:28px;font-weight:700}.login-subtitle{color:var(--text-tertiary);margin-bottom:32px;font-size:15px;line-height:1.5}.login-btn{border-radius:var(--radius-md);background:var(--accent);width:100%;color:var(--text-inverse);cursor:pointer;transition:all var(--transition-fast);border:none;justify-content:center;align-items:center;gap:10px;padding:13px 24px;font-size:15px;font-weight:600;display:flex}.login-btn:hover{background:var(--accent-hover);box-shadow:var(--shadow-lg);transform:translateY(-1px)}.login-btn:active{box-shadow:var(--shadow-sm);transform:translateY(0)}.login-btn:focus-visible{box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--accent)}.login-footer{color:var(--text-tertiary);margin-top:24px;font-size:12px}.settings-header{margin-bottom:24px}.settings-title{letter-spacing:-.03em;color:var(--text-primary);font-size:24px;font-weight:700}.settings-subtitle{color:var(--text-tertiary);margin-top:4px;font-size:14px}@media (width<=480px){.connect-section{flex-direction:column;align-items:flex-start}.connect-section .btn{width:100%}.number-field{flex-wrap:wrap}}