:root{--sidebar-width: 240px;--header-height: 64px}.app-layout{display:flex;min-height:100vh}.app-sidebar{width:var(--sidebar-width);background:var(--bg-secondary);border-right:1px solid var(--border-color);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:50;transition:transform .2s}.sidebar-header{padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--border-color);display:flex;align-items:center;height:var(--header-height)}.sidebar-header img{height:28px;width:auto}.sidebar-nav{flex:1;padding:var(--space-sm) 0;overflow-y:auto}.sidebar-nav a{display:flex;align-items:center;gap:var(--space-xs);padding:.625rem var(--space-md);color:var(--text-secondary);text-decoration:none;font-size:.9375rem;font-weight:500;transition:all .15s;border-left:3px solid transparent}.sidebar-nav a:hover{color:var(--text-primary);background:var(--bg-tertiary)}.sidebar-nav a.active{color:var(--accent-primary);background:#e5565614;border-left-color:var(--accent-primary)}.sidebar-nav .nav-icon{width:20px;text-align:center;font-size:1.1rem}.sidebar-footer{padding:var(--space-sm) var(--space-md);border-top:1px solid var(--border-color)}.sidebar-plan{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-xs)}.sidebar-phone{font-size:.8125rem;color:var(--text-tertiary);margin-bottom:var(--space-sm)}.sidebar-logout{background:none;border:1px solid var(--border-color);color:var(--text-secondary);padding:.375rem var(--space-sm);border-radius:var(--border-radius-sm);cursor:pointer;font-size:.8125rem;width:100%;transition:all .15s}.sidebar-logout:hover{border-color:var(--accent-primary);color:var(--accent-primary)}.app-main{flex:1;margin-left:var(--sidebar-width);min-height:100vh}.app-header{height:var(--header-height);border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-md);background:var(--bg-primary);position:sticky;top:0;z-index:40;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}@media (prefers-color-scheme: dark){.app-header{background:#0a0a0ae6}}.app-header h1{font-size:1.25rem;font-weight:600}.credits-pill{display:flex;align-items:center;gap:var(--space-xs);padding:.375rem .75rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:999px;font-size:.8125rem;font-weight:600}.credits-pill .credits-icon{color:var(--accent-primary)}.app-content{padding:var(--space-md);max-width:1000px}.plan-badge{display:inline-block;padding:.125rem .5rem;border-radius:999px;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.plan-badge.free{background:var(--bg-tertiary);color:var(--text-secondary)}.plan-badge.starter{background:#dbeafe;color:#1d4ed8}.plan-badge.pro{background:#fef3c7;color:#b45309}@media (prefers-color-scheme: dark){.plan-badge.starter{background:#3b82f633;color:#60a5fa}.plan-badge.pro{background:#f59e0b33;color:#fbbf24}}.card{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:var(--space-md);box-shadow:var(--shadow)}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-sm)}.card-title{font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary)}.card-value{font-size:2rem;font-weight:700;margin-bottom:var(--space-xs)}.card-subtitle{font-size:.8125rem;color:var(--text-secondary)}.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm);margin-bottom:var(--space-md)}.dashboard-grid .card.full-width{grid-column:1 / -1}.credit-bar{width:100%;height:8px;background:var(--bg-tertiary);border-radius:4px;overflow:hidden;margin-top:var(--space-xs)}.credit-bar-fill{height:100%;background:var(--accent-primary);border-radius:4px;transition:width .3s ease}.credit-bar-fill.low{background:#ef4444}.credit-bar-fill.medium{background:#f59e0b}.table-container{overflow-x:auto}table{width:100%;border-collapse:collapse}th{text-align:left;padding:.75rem var(--space-sm);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);border-bottom:2px solid var(--border-color)}td{padding:.75rem var(--space-sm);border-bottom:1px solid var(--border-color);font-size:.875rem}tr:last-child td{border-bottom:none}.form-group{margin-bottom:var(--space-sm)}.form-label{display:block;font-size:.875rem;font-weight:600;margin-bottom:var(--space-xs);color:var(--text-primary)}.form-input{width:100%;padding:.625rem .75rem;border:1px solid var(--border-color);border-radius:var(--border-radius-sm);font-size:.9375rem;font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);transition:border-color .15s}.form-input:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px #e556561a}.form-input::placeholder{color:var(--text-tertiary)}.form-hint{font-size:.75rem;color:var(--text-secondary);margin-top:.25rem}button.btn-primary,button.btn-secondary{cursor:pointer;font-family:var(--font-sans)}button.btn-primary:disabled,button.btn-secondary:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-sm{padding:.375rem .75rem;font-size:.8125rem}.btn-danger{background:#ef4444;color:#fff;border:none;padding:.375rem .75rem;border-radius:var(--border-radius-sm);font-size:.8125rem;font-weight:600;cursor:pointer;transition:all .15s}.btn-danger:hover{background:#dc2626}.btn-ghost{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:.375rem .75rem;border-radius:var(--border-radius-sm);font-size:.8125rem;transition:all .15s}.btn-ghost:hover{background:var(--bg-secondary);color:var(--text-primary)}.voice-filters{display:flex;gap:var(--space-sm);align-items:flex-end;margin-bottom:var(--space-md);flex-wrap:wrap}.filter-group{display:flex;flex-direction:column;gap:.25rem}.filter-label{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary)}.filter-select{padding:.375rem .75rem;border:1px solid var(--border-color);border-radius:var(--border-radius-sm);font-size:.8125rem;font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);cursor:pointer;min-width:120px}.filter-select:focus{outline:none;border-color:var(--accent-primary)}.voice-list{display:flex;flex-direction:column;border:1px solid var(--border-color);border-radius:var(--border-radius);overflow:hidden}.voice-row{display:flex;align-items:center;gap:var(--space-sm);padding:.75rem var(--space-sm);background:var(--bg-primary);cursor:pointer;transition:background .1s;border-bottom:1px solid var(--border-color)}.voice-row:last-child{border-bottom:none}.voice-row:hover{background:var(--bg-secondary)}.voice-row.active{background:#e556560a;border-left:3px solid var(--accent-primary);padding-left:calc(var(--space-sm) - 3px)}.voice-row.locked{opacity:.5;cursor:not-allowed}.voice-row.locked:hover{background:var(--bg-primary)}.voice-row-avatar{width:36px;height:36px;border-radius:50%;background:var(--bg-secondary);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}.voice-row-info{flex:1;min-width:0}.voice-row-name{font-weight:600;font-size:.9375rem;display:flex;align-items:center;gap:.375rem}.voice-active-tag{background:var(--accent-primary);color:#fff;padding:.0625rem .375rem;border-radius:999px;font-size:.625rem;font-weight:600}.voice-row-meta{font-size:.75rem;color:var(--text-secondary);margin-top:.125rem}.voice-meta-sep:before{content:"·";margin:0 .375rem}.voice-row-actions{flex-shrink:0}.voice-preview-btn{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:999px;padding:.25rem .75rem;font-size:.75rem;cursor:pointer;transition:all .15s;color:var(--text-secondary);white-space:nowrap}.voice-preview-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}.voice-preview-btn.playing{background:var(--accent-primary);color:#fff;border-color:var(--accent-primary)}.key-display{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--border-radius-sm);padding:var(--space-sm);font-family:var(--font-mono);font-size:.8125rem;word-break:break-all;display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm)}.key-display code{flex:1}.copy-btn{background:var(--accent-primary);color:#fff;border:none;padding:.375rem .75rem;border-radius:var(--border-radius-sm);font-size:.75rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s}.copy-btn:hover{background:var(--accent-hover)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:200;padding:var(--space-md)}.modal{background:var(--bg-primary);border-radius:var(--border-radius);padding:var(--space-md);max-width:480px;width:100%;box-shadow:var(--shadow-lg)}.modal-title{font-size:1.125rem;font-weight:700;margin-bottom:var(--space-sm)}.modal-actions{display:flex;gap:var(--space-xs);justify-content:flex-end;margin-top:var(--space-md)}.toast-container{position:fixed;top:var(--space-md);right:var(--space-md);z-index:300;display:flex;flex-direction:column;gap:var(--space-xs)}.toast{padding:.75rem var(--space-sm);border-radius:var(--border-radius-sm);font-size:.875rem;font-weight:500;box-shadow:var(--shadow-lg);animation:toastIn .2s ease;max-width:360px}.toast.success{background:#065f46;color:#fff}.toast.error{background:#991b1b;color:#fff}.toast.info{background:var(--bg-primary);color:var(--text-primary);border:1px solid var(--border-color)}@keyframes toastIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.empty-state{text-align:center;padding:var(--space-lg) var(--space-md);color:var(--text-secondary)}.empty-state-icon{font-size:3rem;margin-bottom:var(--space-sm)}.empty-state-title{font-size:1.125rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--space-xs)}.empty-state-desc{margin-bottom:var(--space-md)}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg-secondary);padding:var(--space-md)}.login-card{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:var(--space-md);max-width:400px;width:100%;box-shadow:var(--shadow-lg);text-align:center}.login-card img{height:36px;margin-bottom:var(--space-md)}.login-card h1{font-size:1.5rem;font-weight:700;margin-bottom:var(--space-xs)}.login-card .subtitle{color:var(--text-secondary);font-size:.9375rem;margin-bottom:var(--space-md)}.login-card .form-group{text-align:left}.otp-inputs{display:flex;gap:var(--space-xs);justify-content:center;margin-bottom:var(--space-md)}.otp-input{width:48px;height:56px;text-align:center;font-size:1.5rem;font-weight:700;border:2px solid var(--border-color);border-radius:var(--border-radius-sm);font-family:var(--font-mono);background:var(--bg-primary);color:var(--text-primary);transition:border-color .15s}.otp-input:focus{outline:none;border-color:var(--accent-primary)}.resend-link{background:none;border:none;color:var(--accent-primary);font-size:.875rem;cursor:pointer;padding:0;font-weight:500}.resend-link:disabled{color:var(--text-tertiary);cursor:not-allowed}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-md)}.section-header h2{font-size:1.25rem;font-weight:700}.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm);margin-bottom:var(--space-md)}.plan-card{border:2px solid var(--border-color);border-radius:var(--border-radius);padding:var(--space-md);text-align:center;transition:all .15s}.plan-card.current{border-color:var(--accent-primary);background:#e556560a}.plan-card-name{font-size:1.25rem;font-weight:700;margin-bottom:var(--space-xs)}.plan-card-price{font-size:2rem;font-weight:700;margin-bottom:.25rem}.plan-card-price span{font-size:.875rem;font-weight:400;color:var(--text-secondary)}.plan-card-credits{font-size:.875rem;color:var(--text-secondary);margin-bottom:var(--space-sm)}.plan-features{list-style:none;text-align:left;font-size:.8125rem;color:var(--text-secondary);margin-bottom:var(--space-md)}.plan-features li{padding:.25rem 0}.plan-features li:before{content:"✓";color:var(--accent-primary);margin-right:var(--space-xs);font-weight:700}.loading{display:flex;align-items:center;justify-content:center;padding:var(--space-lg)}.spinner{width:32px;height:32px;border:3px solid var(--border-color);border-top-color:var(--accent-primary);border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 768px){.app-sidebar{transform:translate(-100%)}.app-sidebar.open{transform:translate(0)}.app-main{margin-left:0}.dashboard-grid,.plans-grid{grid-template-columns:1fr}.voice-filters{flex-direction:column;align-items:stretch}.filter-select{min-width:auto;width:100%}.menu-toggle{display:block}}.install-step-header{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-xs)}.install-step-num{width:28px;height:28px;border-radius:50%;background:var(--accent-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.8125rem;font-weight:700;flex-shrink:0}.skill-code-preview{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--border-radius-sm);padding:var(--space-sm);font-size:.75rem;line-height:1.5;overflow-x:auto;max-height:400px;overflow-y:auto;margin:0}.skill-code-preview code{font-family:var(--font-mono);white-space:pre}.menu-toggle{display:none;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text-primary);padding:.25rem}