*{box-sizing:border-box}:root{--color-primary-500: #3b82f6;--color-secondary-500: #64748b;--color-surface-background: #0f172a;--color-surface-surface: #1e293b;--color-surface-card: #334155;--color-surface-modal: #475569;--color-surface-header: #374151;--color-surface-sidebar: #1f2937;--color-text-primary: #f8fafc;--color-text-secondary: #cbd5e1;--color-text-disabled: #64748b;--color-accent-primary: #3b82f6;--color-accent-primary-dark: #2563eb;--color-accent-primary-shadow: rgba(59, 130, 246, .1);--border-color: rgba(255, 255, 255, .2);--color-border-primary: rgba(255, 255, 255, .3);--color-border-secondary: rgba(255, 255, 255, .4);--shadow-base: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);--shadow-color-light: rgba(0, 0, 0, .1);--shadow-color-medium: rgba(0, 0, 0, .3);--shadow-color-heavy: rgba(0, 0, 0, .5);--color-status-connected: #22c55e;--color-status-disconnected: #ef4444;--color-status-warning: #f59e0b;--color-status-urgent: #ef4444;--color-status-success: #22c55e;--color-status-info: #3b82f6;--color-overlay-dark: rgba(0, 0, 0, .5);--color-surface-hover: #6b7280;--font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-size-base: 1rem;--spacing-md: 1rem;--border-radius-base: .25rem}body{font-family:var(--font-family-primary);background-color:var(--color-surface-background);color:var(--color-text-primary);margin:0;display:flex;height:100vh;overflow:hidden}app-root{display:flex;width:100%;height:100vh;align-items:center;justify-content:center}app-root:has(app-component){align-items:stretch;justify-content:stretch}.theme-customization-panel{position:fixed;top:0;right:-400px;width:400px;height:100vh;background:var(--color-surface-card);box-shadow:var(--shadow-base);transition:right .3s ease;z-index:1000;overflow:hidden;display:flex;flex-direction:column}.theme-customization-panel.open{right:0}.panel-toggle{position:absolute;left:-50px;top:20px;width:50px;height:50px;background:var(--color-primary-500);border:none;border-radius:var(--border-radius-base) 0 0 var(--border-radius-base);color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:.75rem;transition:background-color .2s ease}.panel-toggle:hover{background:var(--color-primary-600)}.panel-toggle i{font-size:1rem}.panel-content{display:flex;flex-direction:column;height:100%;overflow:hidden}.panel-header{padding:var(--spacing-md);border-bottom:1px solid var(--color-surface-surface);display:flex;justify-content:space-between;align-items:center}.panel-header h2{margin:0;color:var(--color-text-primary);font-size:1.25rem}.quick-actions{display:flex;gap:.5rem}.quick-btn{padding:.5rem;border:none;border-radius:var(--border-radius-base);background:var(--color-surface-surface);color:var(--color-text-secondary);cursor:pointer;transition:all .2s ease}.quick-btn:hover,.quick-btn.active{background:var(--color-primary-500);color:#fff}.quick-btn:disabled{opacity:.5;cursor:not-allowed}.panel-tabs{display:flex;border-bottom:1px solid var(--color-surface-surface);overflow-x:auto}.tab-btn{padding:.75rem 1rem;border:none;background:transparent;color:var(--color-text-secondary);cursor:pointer;white-space:nowrap;transition:all .2s ease;border-bottom:2px solid transparent}.tab-btn:hover{color:var(--color-text-primary);background:var(--color-surface-surface)}.tab-btn.active{color:var(--color-primary-500);border-bottom-color:var(--color-primary-500)}.tab-btn i{margin-right:.5rem}.panel-body{flex:1;overflow-y:auto;padding:var(--spacing-md)}.tab-content{display:block}.color-palette-editor{display:flex;flex-direction:column;gap:1.5rem}.editor-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.editor-header h3{margin:0;color:var(--color-text-primary)}.editor-actions{display:flex;gap:.5rem}.action-btn,.quick-btn{padding:.5rem .75rem;border:none;border-radius:var(--border-radius-base);background:var(--color-surface-surface);color:var(--color-text-secondary);cursor:pointer;transition:all .2s ease;font-size:.875rem}.action-btn:hover,.quick-btn:hover{background:var(--color-primary-500);color:#fff}.palette-sections{display:flex;flex-direction:column;gap:2rem}.palette-section{border:1px solid var(--color-surface-surface);border-radius:var(--border-radius-base);padding:1rem}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.section-header h4{margin:0;color:var(--color-text-primary)}.generate-btn{padding:.25rem .5rem;border:none;border-radius:var(--border-radius-base);background:var(--color-primary-500);color:#fff;cursor:pointer;font-size:.75rem;transition:background-color .2s ease}.generate-btn:hover{background:var(--color-primary-600)}.color-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.75rem}.color-grid.small{grid-template-columns:repeat(auto-fit,minmax(80px,1fr))}.color-item{border:1px solid var(--color-surface-surface);border-radius:var(--border-radius-base);overflow:hidden;transition:transform .2s ease}.color-item:hover{transform:translateY(-2px)}.color-item.selected{border-color:var(--color-primary-500);box-shadow:0 0 0 2px var(--color-primary-500)}.color-preview{height:60px;position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center}.color-label{background:#0009;color:#fff;padding:.25rem .5rem;border-radius:var(--border-radius-base);font-size:.75rem;font-weight:500}.color-input{padding:.5rem;display:flex;flex-direction:column;gap:.25rem}.color-picker,.hex-input{width:100%;padding:.25rem;border:1px solid var(--color-surface-surface);border-radius:var(--border-radius-base);background:var(--color-surface-surface);color:var(--color-text-primary)}.color-picker{height:30px;cursor:pointer}.hex-input{font-size:.75rem;font-family:monospace}.color-info{padding:.25rem .5rem;font-size:.75rem;display:flex;justify-content:space-between;align-items:center}.contrast-ratio{color:var(--color-text-secondary)}.accessibility-badge{padding:.125rem .25rem;border-radius:var(--border-radius-base);font-size:.625rem;font-weight:600}.accessibility-badge.AAA{background:#22c55e;color:#fff}.accessibility-badge.AA{background:#f59e0b;color:#fff}.accessibility-badge.AA-large{background:#f97316;color:#fff}.accessibility-badge.fail{background:#ef4444;color:#fff}.control-group,.setting-group{margin-bottom:1rem}.control-group label,.setting-group label{display:block;margin-bottom:.5rem;color:var(--color-text-primary);font-weight:500}.control-group input,.setting-group input,.control-group select,.setting-group select{width:100%;padding:.5rem;border:1px solid var(--color-surface-surface);border-radius:var(--border-radius-base);background:var(--color-surface-surface);color:var(--color-text-primary)}.control-group input[type=range]{background:transparent}.themes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin-bottom:1.5rem}.theme-card{border:1px solid var(--color-surface-surface);border-radius:var(--border-radius-base);padding:1rem;cursor:pointer;transition:all .2s ease;position:relative}.theme-card:hover{border-color:var(--color-primary-500);transform:translateY(-2px)}.theme-card.active{border-color:var(--color-primary-500);background:#3b82f61a}.theme-preview{margin-bottom:.75rem}.preview-colors{display:flex;gap:.25rem}.color-dot{width:20px;height:20px;border-radius:50%;border:1px solid var(--color-surface-surface)}.theme-info{margin-bottom:.5rem}.theme-name{font-weight:600;color:var(--color-text-primary);margin-bottom:.25rem}.theme-author{font-size:.875rem;color:var(--color-text-secondary)}.theme-actions{display:flex;gap:.5rem;position:absolute;top:.5rem;right:.5rem}.edit-btn,.delete-btn{width:24px;height:24px;border:none;border-radius:var(--border-radius-base);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.75rem}.edit-btn{background:var(--color-primary-500);color:#fff}.delete-btn{background:#ef4444;color:#fff}.modal-confirm-btn.delete-btn{background-color:#ef4444;color:#fff;width:auto;height:auto;font-size:.875rem}.modal-confirm-btn.delete-btn:hover{background-color:#dc2626}.theme-actions-bar{display:flex;gap:.75rem;flex-wrap:wrap}.create-theme-btn,.import-theme-btn,.export-theme-btn{padding:.75rem 1rem;border:none;border-radius:var(--border-radius-base);background:var(--color-primary-500);color:#fff;cursor:pointer;transition:background-color .2s ease;display:flex;align-items:center;gap:.5rem}.create-theme-btn:hover,.import-theme-btn:hover,.export-theme-btn:hover{background:var(--color-primary-600)}.export-theme-btn:disabled{background:var(--color-surface-surface);color:var(--color-text-secondary);cursor:not-allowed}.live-preview{margin-top:2rem;border:1px solid var(--color-surface-surface);border-radius:var(--border-radius-base);overflow:hidden}.live-preview h3{margin:0;padding:1rem;background:var(--color-surface-surface);color:var(--color-text-primary)}.preview-content{padding:1rem}.preview-header{padding:1rem;margin-bottom:1rem;border-radius:var(--border-radius-base);display:flex;justify-content:space-between;align-items:center}.preview-nav{display:flex;gap:1rem}.nav-item{cursor:pointer;padding:.5rem}.preview-body{padding:1rem;border-radius:var(--border-radius-base)}.preview-card{padding:1rem;margin-bottom:1rem}.preview-button{padding:.5rem 1rem;border:none;cursor:pointer;transition:all .2s ease}@media (max-width: 768px){.theme-customization-panel{width:100vw;right:-100vw}.panel-toggle{left:-40px;width:40px;height:40px}}@keyframes statusChange{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.8}to{transform:scale(1);opacity:1}}.order-status-badge{animation:statusChange .5s ease-out}.order-tile{transition:border-color .3s ease,transform .2s ease,box-shadow .3s ease}.tile-header{transition:background-color .3s ease}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-surface-card, #2d3748)}::-webkit-scrollbar-thumb{background:var(--color-surface-modal, #4a5568);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--color-text-disabled, #718096)}.modal-overlay{display:flex;position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--color-overlay-dark);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);justify-content:center;align-items:center;z-index:1000;opacity:0;pointer-events:none;transition:opacity .3s ease-in-out}.modal-overlay.visible{opacity:1;pointer-events:auto}.modal-content{background-color:var(--color-surface-sidebar, #1f2937);padding:1.5rem;border-radius:.75rem;box-shadow:0 10px 25px var(--shadow-color-heavy);width:90%;display:flex;flex-direction:column}.modal-content.small-modal{max-width:400px}.modal-header{display:flex;align-items:center;margin-bottom:.5rem;position:relative}.modal-header .modal-title{font-size:1.1rem;font-weight:600;color:var(--color-text-primary, #e2e8f0);text-align:left;flex-grow:1}.modal-body{flex-grow:1;color:var(--color-text-secondary, #cbd5e0);font-size:.875rem;line-height:1.5;text-align:center;margin-top:.5rem}.modal-footer{margin-top:1.5rem;display:flex;justify-content:flex-end}.modal-ok-btn,.modal-confirm-btn,.modal-cancel-btn{border:1px solid var(--border-color);padding:.6rem 1.5rem;border-radius:.375rem;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s ease-in-out}.modal-ok-btn{background-color:var(--color-surface-modal, #4a5568);color:var(--color-text-primary, #e2e8f0)}.modal-ok-btn:hover{background-color:var(--color-surface-hover, #6b7280)}.modal-cancel-btn{background-color:transparent;color:var(--color-text-secondary, #9ca3af);margin-right:.75rem}.modal-cancel-btn:hover{color:var(--color-text-primary, #e2e8f0)}.modal-confirm-btn{background-color:var(--color-surface-modal, #4a5568);color:var(--color-text-primary, #e2e8f0)}.modal-confirm-btn:hover{background-color:var(--color-surface-hover, #6b7280)}.add-first-note-btn{background-color:var(--color-status-success);color:var(--color-text-primary);border:1px solid var(--color-status-success);padding:.6rem 1.5rem!important;border-radius:.375rem;font-size:.875rem;font-weight:600;cursor:pointer;display:inline-block;transition:background-color .2s ease,border-color .2s ease}.add-first-note-btn i{margin-right:.5rem}.add-first-note-btn:hover{background-color:#16a34a;border-color:#16a34a}