:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,sans-serif;background-color:#111827;color:#f9fafb;overflow-x:hidden}#root{width:100%;height:100vh}.dashboard{display:flex;flex-direction:column;height:100vh}.navbar{background:#111827f2;backdrop-filter:blur(10px);border-bottom:1px solid rgba(55,65,81,.3);position:sticky;top:0;z-index:1000;padding:0;height:64px}.navbar-content{display:flex;align-items:center;justify-content:space-between;max-width:100%;padding:0 1.5rem;height:100%}.navbar-brand{display:flex;align-items:center;gap:.5rem;font-size:1.25rem;font-weight:600;color:#f9fafb}.navbar-brand i{background:linear-gradient(45deg,#3b82f6,#8b5cf6);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-size:1.5rem}.navbar-menu{display:flex;gap:2rem}.navbar-item{color:#d1d5db;text-decoration:none;font-weight:500;padding:.5rem 0;border-bottom:2px solid transparent;transition:all .3s ease;background:none;border:none;cursor:pointer;font-size:inherit;font-family:inherit}.navbar-item:hover,.navbar-item.active{color:#f9fafb;border-bottom-color:#3b82f6}.navbar-actions{display:flex;align-items:center;gap:.5rem}.navbar-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:#37415180;border:1px solid rgba(75,85,99,.3);border-radius:8px;color:#d1d5db;cursor:pointer;transition:all .3s ease}.navbar-btn:hover{background:#4b5563b3;color:#f9fafb}.mobile-menu-btn{display:none}.layout-container{display:flex;flex:1;overflow:hidden}.sidebar{width:280px;background:#1f2937f2;border-right:1px solid rgba(55,65,81,.3);transition:all .3s cubic-bezier(.4,0,.2,1);z-index:900;overflow:hidden;flex-shrink:0}.sidebar.open .sidebar-content{opacity:1;transform:translate(0)}.sidebar-content{padding:1.5rem;height:100%;overflow-y:auto;transition:all .3s cubic-bezier(.4,0,.2,1)}.sidebar-section{margin-bottom:2rem}.sidebar-title{font-size:.875rem;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.05em;margin-bottom:1rem}.sidebar-menu{list-style:none}.sidebar-item{margin-bottom:.5rem}.sidebar-link{display:flex;align-items:center;gap:.75rem;padding:.75rem;color:#d1d5db;text-decoration:none;border-radius:8px;transition:all .3s ease;font-weight:500}.sidebar-link:hover{background:#37415180;color:#f9fafb}.sidebar-item.active .sidebar-link{background:linear-gradient(45deg,#3b82f6,#8b5cf6);color:#fff}.sidebar-link i{width:20px;text-align:center}.action-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.75rem;border:none;border-radius:8px;font-weight:500;cursor:pointer;transition:all .3s ease;margin-bottom:.5rem}.action-btn.primary{background:linear-gradient(45deg,#3b82f6,#8b5cf6);color:#fff}.action-btn.primary:hover{background:linear-gradient(45deg,#2563eb,#7c3aed)}.action-btn.secondary{background:#37415180;color:#d1d5db;border:1px solid rgba(75,85,99,.3)}.action-btn.secondary:hover{background:#4b5563b3;color:#f9fafb}.main-content{flex:1;padding:2rem;overflow-y:auto;background:#0f172a;transition:all .3s cubic-bezier(.4,0,.2,1)}.content-header{margin-bottom:2rem}.content-title{font-size:2.25rem;font-weight:700;color:#f9fafb;margin-bottom:.5rem}.content-subtitle{font-size:1.125rem;color:#9ca3af;font-weight:400}.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}.dashboard-card{background:#1f2937cc;border:1px solid rgba(55,65,81,.3);border-radius:12px;padding:1.5rem;transition:all .3s ease}.dashboard-card:hover{background:#1f2937f2;border-color:#4b556380;transform:translateY(-2px);box-shadow:0 8px 25px #0000004d}.dashboard-card.full-width{grid-column:1 / -1}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.card-title{font-size:1.125rem;font-weight:600;color:#f9fafb;display:flex;align-items:center;gap:.75rem}.card-title-icon{color:#3b82f6;font-size:1.25rem}.card-title-text{flex:1}.card-icon{color:#3b82f6;font-size:1.5rem}.card-action{background:none;border:1px solid rgba(59,130,246,.5);color:#3b82f6;padding:.5rem 1rem;border-radius:6px;cursor:pointer;font-size:.875rem;font-weight:500;transition:all .3s ease}.card-action:hover{background:#3b82f61a;border-color:#3b82f6}.card-content{display:flex;align-items:center;justify-content:space-between}.metric{display:flex;flex-direction:column}.metric-value{font-size:2rem;font-weight:700;color:#f9fafb}.metric-label{font-size:.875rem;color:#9ca3af;margin-top:.25rem}.metric-change{font-size:.875rem;font-weight:600;padding:.25rem .5rem;border-radius:6px;align-self:flex-start}.metric-change.positive{color:#10b981;background:#10b9811a}.metric-change.negative{color:#ef4444;background:#ef44441a}.metric-change.neutral{color:#9ca3af;background:#9ca3af1a}.activity-list{display:flex;flex-direction:column;gap:1rem}.activity-item{display:flex;align-items:center;gap:1rem;padding:1rem;background:#11182780;border-radius:8px;border:1px solid rgba(55,65,81,.3)}.activity-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:#3b82f61a;border-radius:50%;color:#3b82f6}.activity-content{flex:1}.activity-title{font-weight:500;color:#f9fafb;margin-bottom:.25rem}.activity-time{font-size:.875rem;color:#9ca3af}.widget-loading{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:2rem;color:#9ca3af}.card-actions{display:flex;align-items:center;gap:.5rem}.error-card{border-color:#ef44444d!important}.error-state{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:2rem;text-align:center}.error-icon{font-size:2rem;color:#ef4444}.error-message{color:#ef4444;font-weight:500}.retry-button{background:#ef4444;color:#fff;border:none;padding:.5rem 1rem;border-radius:6px;cursor:pointer;font-weight:500;transition:background .3s ease}.retry-button:hover{background:#dc2626}.empty-state{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:2rem;text-align:center}.empty-icon{font-size:2rem;color:#6b7280}.empty-text{color:#9ca3af;font-weight:500}.widget-col-1{grid-column:span 1}.widget-col-2{grid-column:span 2}.widget-col-3{grid-column:span 3}.widget-col-4{grid-column:span 4}@media (max-width: 1200px){.widget-col-4,.widget-col-3{grid-column:span 2}}@media (max-width: 768px){.navbar-menu{display:none}.mobile-menu-btn{display:flex}.sidebar{position:fixed;top:64px;left:0;height:calc(100vh - 64px);width:280px;transform:translate(-100%);z-index:1000}.sidebar.open{transform:translate(0)}.sidebar:not(.open){width:280px}.sidebar-toggle-btn{display:none}.main-content{padding:1rem}.content-title{font-size:1.875rem}.dashboard-grid{grid-template-columns:1fr}.widget-col-1,.widget-col-2,.widget-col-3,.widget-col-4{grid-column:span 1}}.metric-widget-content{display:flex;align-items:center;justify-content:space-between}.status-widget-content{display:flex;flex-direction:column;gap:.75rem}.status-indicator{display:flex;align-items:center;gap:.5rem;font-weight:600;color:#f9fafb}.status-indicator i{font-size:1.25rem}.status-text{font-weight:600;font-size:1.125rem;text-transform:capitalize}.status-detail{color:#9ca3af;font-size:.875rem}.progress-widget-content{display:flex;flex-direction:column;gap:.75rem}.progress-header{display:flex;justify-content:space-between;align-items:center}.progress-label{font-weight:500;color:#f9fafb}.progress-percentage{font-weight:600;color:#3b82f6}.progress-bar{width:100%;height:8px;background:#37415180;border-radius:4px;overflow:hidden}.progress-fill{height:100%;transition:width .3s ease;border-radius:4px}.progress-details{color:#9ca3af;font-size:.875rem;text-align:center}.settings-page{max-width:800px;margin:0 auto;padding:2rem}.settings-header{margin-bottom:2rem;text-align:center}.settings-title{font-size:2.25rem;font-weight:700;color:#f9fafb;margin-bottom:.5rem}.settings-subtitle{font-size:1.125rem;color:#9ca3af}.settings-content{display:flex;flex-direction:column;gap:2rem}.settings-message{display:flex;align-items:center;gap:.75rem;padding:1rem;border-radius:8px;font-weight:500;margin-bottom:1rem}.settings-message.success{background:#10b9811a;border:1px solid rgba(16,185,129,.3);color:#10b981}.settings-message.error{background:#ef44441a;border:1px solid rgba(239,68,68,.3);color:#ef4444}.settings-section{background:#1f2937cc;border:1px solid rgba(55,65,81,.3);border-radius:12px;padding:2rem}.settings-section-header{margin-bottom:2rem}.settings-section-title{font-size:1.5rem;font-weight:600;color:#f9fafb;margin-bottom:.5rem}.settings-section-description{color:#9ca3af;font-size:.875rem}.settings-fields{display:flex;flex-direction:column;gap:1.5rem}.settings-group{border-left:3px solid #3b82f6;padding-left:1rem}.settings-group-title{font-size:1.125rem;font-weight:600;color:#f9fafb;margin-bottom:1rem}.settings-field{display:flex;flex-direction:column;gap:.5rem}.settings-label{font-weight:500;color:#f9fafb;font-size:.875rem}.settings-input,.settings-select{padding:.75rem;background:#111827cc;border:1px solid rgba(75,85,99,.5);border-radius:8px;color:#f9fafb;font-size:.875rem;transition:all .3s ease}.settings-input:focus,.settings-select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.checkbox-wrapper{display:flex;align-items:center;gap:.75rem}.settings-checkbox{width:1rem;height:1rem;accent-color:#3b82f6}.checkbox-label{font-weight:500;color:#f9fafb;cursor:pointer;font-size:.875rem}.settings-actions{display:flex;gap:1rem;justify-content:center;padding-top:2rem;border-top:1px solid rgba(55,65,81,.3)}.settings-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border:none;border-radius:8px;font-weight:500;cursor:pointer;transition:all .3s ease;font-size:.875rem}.settings-btn:disabled{opacity:.5;cursor:not-allowed}.settings-btn.primary{background:linear-gradient(45deg,#3b82f6,#8b5cf6);color:#fff}.settings-btn.primary:hover:not(:disabled){background:linear-gradient(45deg,#2563eb,#7c3aed);transform:translateY(-1px)}.settings-btn.secondary{background:#37415180;color:#d1d5db;border:1px solid rgba(75,85,99,.3)}.settings-btn.secondary:hover:not(:disabled){background:#4b5563b3;color:#f9fafb}@media (max-width: 768px){.settings-page{padding:1rem}.settings-actions{flex-direction:column}.settings-btn{justify-content:center}}.image-widget{border-radius:8px;overflow:hidden;background:#1f2937cc;border:1px solid rgba(55,65,81,.3)}.image-widget.error{display:flex;align-items:center;justify-content:center;min-height:150px}.image-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem;color:#9ca3af;min-height:150px}.widget-image.rounded{border-radius:8px}.custom-card{box-shadow:0 4px 12px #00000026;transition:transform .3s ease,box-shadow .3s ease}.custom-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0003}.custom-card.loading{opacity:.8}.custom-card.error{border-color:#ef4444!important}.error-content{display:flex;align-items:center;gap:.5rem;color:#ef4444;font-weight:500}.chart-placeholder{padding:1rem}.chart-error{text-align:center;color:#ef4444;padding:2rem}.retry-btn{background:#ef4444;color:#fff;border:none;padding:.5rem 1rem;border-radius:6px;cursor:pointer;margin-top:1rem}.chart-loading{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:2rem;color:#9ca3af}.chart-type-indicator{display:flex;align-items:center;gap:.5rem;color:#9ca3af;font-size:.875rem;margin-bottom:1rem}.chart-data{display:flex;flex-direction:column;gap:.75rem}.chart-item{display:flex;align-items:center;gap:1rem}.chart-label{min-width:40px;font-size:.875rem;color:#d1d5db}.chart-value{min-width:30px;font-size:.875rem;color:#9ca3af}.metric-widget-content.animated{transition:all .3s ease}.metric-widget-content.animated:hover{transform:scale(1.02)}.documentation-page{display:flex;height:100%;background:#111827;min-height:calc(100vh - 64px);margin-left:0}.doc-sidebar{width:280px;background:#111827fa;backdrop-filter:blur(15px);border-right:1px solid rgba(75,85,99,.4);padding:0;overflow-y:auto;flex-shrink:0;position:relative;height:calc(100vh - 64px);margin-left:-1px}.doc-nav{padding:2rem 1.5rem 2rem 0}.doc-nav h2{color:#f9fafb;font-size:1.375rem;font-weight:700;margin-bottom:2rem;padding-bottom:1rem;border-bottom:2px solid rgba(59,130,246,.3);background:linear-gradient(45deg,#3b82f6,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.doc-nav h3{color:#9ca3af;font-size:.75rem;font-weight:600;margin:2rem 0 1rem;text-transform:uppercase;letter-spacing:.1em}.doc-nav-list{list-style:none;margin:0;padding:0}.doc-nav-item{display:flex;align-items:center;gap:.875rem;width:100%;padding:1rem 1.25rem;color:#d1d5db;text-decoration:none;background:none;border:none;border-radius:12px;cursor:pointer;transition:all .25s ease;font-size:.9rem;font-weight:500;margin-bottom:.5rem;border:1px solid transparent}.doc-nav-item:hover{background:#3b82f61a;border-color:#3b82f64d;color:#f9fafb;transform:translate(4px)}.doc-nav-item.active{background:linear-gradient(45deg,#3b82f633,#8b5cf633);border-color:#3b82f680;color:#fff;box-shadow:0 4px 12px #3b82f626}.doc-nav-item i{font-size:1.1rem;min-width:22px;opacity:.8}.doc-nav-section{margin-top:2.5rem;padding-top:2rem;border-top:1px solid rgba(75,85,99,.4)}.doc-content{flex:1;overflow-y:auto;padding:0;background:linear-gradient(135deg,#111827,#0f172a);position:relative}.doc-section{max-width:900px;margin:0 auto;padding:3rem 4rem;position:relative}.doc-content:before{content:"";position:fixed;inset:0;background-image:radial-gradient(circle at 25% 25%,rgba(59,130,246,.05) 0%,transparent 50%),radial-gradient(circle at 75% 75%,rgba(139,92,246,.05) 0%,transparent 50%);pointer-events:none;z-index:0}.doc-section{position:relative;z-index:1}.doc-section h1{color:#f9fafb;font-size:3rem;font-weight:800;margin-bottom:1.5rem;background:linear-gradient(135deg,#3b82f6,#8b5cf6,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1;letter-spacing:-.02em}.doc-section h2{color:#f9fafb;font-size:2.25rem;font-weight:700;margin:4rem 0 1.5rem;padding-bottom:1rem;border-bottom:2px solid rgba(59,130,246,.2);position:relative}.doc-section h2:before{content:"";position:absolute;bottom:-2px;left:0;width:80px;height:2px;background:linear-gradient(45deg,#3b82f6,#8b5cf6)}.doc-section h2:first-of-type{margin-top:2rem}.doc-section h3{color:#e5e7eb;font-size:1.5rem;font-weight:600;margin:3rem 0 1rem;line-height:1.3}.doc-section p{color:#d1d5db;line-height:1.7;margin-bottom:1.5rem;font-size:1rem}.lead-text{font-size:1.25rem;color:#9ca3af;margin-bottom:3rem;line-height:1.6;font-weight:400}.doc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem;margin:3rem 0}.principles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem;margin:3rem 0}.principle-item{text-align:center;padding:2.5rem 2rem;background:#111827cc;border-radius:16px;border:1px solid rgba(75,85,99,.4);transition:all .3s ease;backdrop-filter:blur(10px)}.principle-item:hover{transform:translateY(-4px);border-color:#3b82f680;box-shadow:0 8px 25px #3b82f626}.principle-item i{color:#3b82f6;margin-bottom:1.5rem;filter:drop-shadow(0 2px 4px rgba(59,130,246,.3))}.principle-item h3{color:#f9fafb;font-size:1.125rem;font-weight:600;margin:1rem 0 .75rem}.principle-item p{color:#9ca3af;font-size:.9rem;margin:0;line-height:1.5}.code-block{background:#0009;border:1px solid rgba(75,85,99,.4);border-radius:12px;padding:2rem;margin:2rem 0;overflow-x:auto;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.875rem;line-height:1.6;position:relative;backdrop-filter:blur(10px)}.code-block:before{content:"jsx";position:absolute;top:1rem;right:1rem;color:#6b7280;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.code-block code{color:#f1f5f9;background:none;padding:0;border:none;white-space:pre}.example-container{margin:3rem 0;border:1px solid rgba(75,85,99,.4);border-radius:16px;overflow:hidden;background:#11182780;backdrop-filter:blur(10px)}.example-preview{background:linear-gradient(135deg,#1f293780,#111827cc);padding:3rem;border-bottom:1px solid rgba(75,85,99,.4);position:relative}.example-preview:before{content:"Preview";position:absolute;top:1rem;left:1.5rem;color:#6b7280;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.component-demo h2{margin-top:4rem;position:relative;padding-left:1.5rem}.component-demo h2:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:2rem;background:linear-gradient(45deg,#3b82f6,#8b5cf6);border-radius:2px}.component-demo h2:first-child{margin-top:2rem}.button-group{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center}.input-group{display:flex;flex-direction:column;gap:2rem;max-width:450px}.card-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem}.badge-group{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}.icon-group{display:flex;gap:2rem;align-items:center;justify-content:center;padding:1rem}.form-grid{display:flex;flex-direction:column;gap:2rem}.form-actions{display:flex;gap:1.5rem;justify-content:flex-end;margin-top:2rem;padding-top:2rem;border-top:1px solid rgba(75,85,99,.3)}.widget-content{display:flex;flex-direction:column;gap:2rem}.widget-stats{display:flex;flex-direction:column;gap:1.5rem}.stat-item{display:flex;align-items:center;gap:1.5rem;padding:1.5rem;background:#0000004d;border-radius:12px;border:1px solid rgba(75,85,99,.3);transition:all .2s ease}.stat-item:hover{border-color:#3b82f666;background:#0006}.stat-content{flex:1;display:flex;flex-direction:column;gap:.25rem}.stat-value{font-size:1.75rem;font-weight:700;color:#f9fafb}.stat-label{font-size:.875rem;color:#9ca3af;font-weight:500}.color-palette{display:grid;gap:3rem;margin:3rem 0}.color-group h3{margin-bottom:1.5rem;color:#e5e7eb;font-weight:600}.color-swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.5rem}.color-swatch{height:100px;border-radius:12px;display:flex;align-items:end;padding:1.5rem;position:relative;border:1px solid rgba(75,85,99,.4);transition:all .3s ease;cursor:pointer}.color-swatch:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000004d}.color-swatch span{color:#fff;font-size:.8rem;font-weight:600;text-shadow:0 2px 4px rgba(0,0,0,.7);background:#0000004d;padding:.5rem .75rem;border-radius:6px;backdrop-filter:blur(5px)}.color-swatch.primary-gradient{background:linear-gradient(45deg,#3b82f6,#8b5cf6)}.color-swatch.blue{background:#3b82f6}.color-swatch.purple{background:#8b5cf6}.color-swatch.success{background:#22c55e}.color-swatch.warning{background:#f59e0b}.color-swatch.danger{background:#ef4444}.typography-examples{margin:3rem 0;padding:2rem;background:#11182780;border-radius:16px;border:1px solid rgba(75,85,99,.3)}.type-example{margin:2rem 0;color:#f9fafb;padding:.5rem 0}.spacing-examples{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1.5rem;margin:3rem 0}.spacing-item{background:#3b82f626;border:2px solid rgba(59,130,246,.4);border-radius:8px;color:#60a5fa;font-size:.8rem;font-weight:600;display:flex;align-items:center;justify-content:center;min-height:60px;text-align:center;transition:all .2s ease}.spacing-item:hover{background:#3b82f640;border-color:#3b82f699}@media (max-width: 768px){.documentation-page{flex-direction:column}.doc-sidebar{width:100%;height:auto;order:2;position:relative;padding:0;margin-left:0}.doc-nav{padding:1.5rem}.doc-content{order:1}.doc-section{padding:2rem 1.5rem}.doc-section h1{font-size:2.5rem}.doc-section h2{font-size:1.875rem;margin:3rem 0 1rem}.example-preview{padding:2rem 1.5rem}.form-actions{flex-direction:column;gap:1rem}.button-group{flex-direction:column;align-items:stretch}.principles-grid,.doc-grid{grid-template-columns:1fr}}@media (max-width: 1024px){.doc-sidebar{width:260px}.doc-content{padding:0}.doc-section{padding:2.5rem 3rem}}@media (max-width: 1200px){.doc-section{max-width:100%;padding:3rem 2rem}.doc-sidebar{width:260px}}.sidebar:not(.open){width:60px}.sidebar:not(.open) .sidebar-header{padding:0 0 1rem;margin-bottom:1rem;justify-content:center}.sidebar:not(.open) .sidebar-title{display:none}.sidebar:not(.open) .sidebar-link{justify-content:center;padding:.75rem}.sidebar:not(.open) .sidebar-link span{display:none}.sidebar:not(.open) .sidebar-link i{margin-right:0;font-size:1.2rem}.sidebar:not(.open) .action-btn span{display:none}.sidebar:not(.open) .action-btn{width:44px;height:44px;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center}.sidebar:not(.open) .sidebar-content{padding:1rem .5rem}.sidebar-header{display:flex;justify-content:flex-end;padding:0 0 1rem;margin-bottom:1rem;border-bottom:1px solid rgba(75,85,99,.3)}.sidebar-toggle-btn{background:#3b82f61a;border:1px solid rgba(59,130,246,.3);border-radius:8px;color:#9ca3af;padding:.5rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;width:36px;height:36px}.sidebar-toggle-btn:hover{background:#3b82f633;border-color:#3b82f680;color:#3b82f6;transform:scale(1.05)}.sidebar-toggle-btn i{font-size:.875rem;transition:transform .2s ease}.sidebar:not(.open) .sidebar-header{justify-content:center}.sidebar:not(.open) .sidebar-toggle-btn{margin:0}.sidebar:not(.open) .sidebar-link{position:relative}.sidebar:not(.open) .sidebar-link:hover:after{content:attr(data-tooltip);position:absolute;left:100%;top:50%;transform:translateY(-50%);background:#000000e6;color:#fff;padding:.5rem .75rem;border-radius:6px;font-size:.875rem;white-space:nowrap;margin-left:.5rem;z-index:1000;pointer-events:none}.button-component{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:none;border-radius:8px;font-weight:500;cursor:pointer;transition:all .3s ease;text-decoration:none;position:relative;outline:none;font-family:inherit;white-space:nowrap}.button-component:focus{box-shadow:0 0 0 3px #3b82f64d}.button-component:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.button-sm{padding:.5rem 1rem;font-size:.875rem;min-height:32px}.button-md{padding:.75rem 1.5rem;font-size:.875rem;min-height:40px}.button-lg{padding:1rem 2rem;font-size:1rem;min-height:48px}.button-primary{background:linear-gradient(45deg,#3b82f6,#8b5cf6);color:#fff}.button-primary:hover:not(:disabled){background:linear-gradient(45deg,#2563eb,#7c3aed);transform:translateY(-1px);box-shadow:0 4px 12px #3b82f666}.button-secondary{background:#37415180;color:#d1d5db;border:1px solid rgba(75,85,99,.3)}.button-secondary:hover:not(:disabled){background:#4b5563b3;color:#f9fafb;border-color:#4b556380;transform:translateY(-1px)}.button-navbar{background:#37415180;border:1px solid rgba(75,85,99,.3);color:#d1d5db;width:40px;height:40px;padding:0;min-height:unset}.button-navbar:hover:not(:disabled){background:#4b5563b3;color:#f9fafb}.button-action{background:#37415180;color:#d1d5db;border:1px solid rgba(75,85,99,.3)}.button-action.button-primary{background:linear-gradient(45deg,#3b82f6,#8b5cf6);color:#fff;border:none}.button-action:hover:not(:disabled){background:#4b5563b3;color:#f9fafb}.button-action.button-primary:hover:not(:disabled){background:linear-gradient(45deg,#2563eb,#7c3aed)}.button-full-width{width:100%}.button-loading{pointer-events:none}.button-spinner{margin-right:.5rem}.button-icon{font-size:.875em}.button-text{flex:1}.input-wrapper{width:100%}.input-label{display:block;font-weight:500;color:#f9fafb;margin-bottom:.5rem;font-size:.875rem}.input-container{position:relative;display:flex;align-items:center}.input-component{width:100%;background:#111827cc;border:1px solid rgba(75,85,99,.5);border-radius:8px;color:#f9fafb;transition:all .3s ease;outline:none}.input-component::placeholder{color:#9ca3af}.input-component:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.input-component:disabled{opacity:.5;cursor:not-allowed;background:#11182766}.input-sm{padding:.5rem .75rem;font-size:.875rem;min-height:32px}.input-md{padding:.75rem;font-size:.875rem;min-height:40px}.input-lg{padding:1rem;font-size:1rem;min-height:48px}.input-with-left-icon{padding-left:2.5rem}.input-with-right-icon{padding-right:2.5rem}.input-icon{position:absolute;color:#9ca3af;pointer-events:none;z-index:1}.input-icon-left{left:.75rem}.input-icon-right{right:.75rem}.input-error{border-color:#ef4444}.input-error:focus{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.input-full-width{width:100%}.input-error-text{display:flex;align-items:center;gap:.25rem;color:#ef4444;font-size:.75rem;margin-top:.25rem}.input-helper-text{display:block;color:#9ca3af;font-size:.75rem;margin-top:.25rem}.select-wrapper{width:100%}.select-label{display:block;font-weight:500;color:#f9fafb;margin-bottom:.5rem;font-size:.875rem}.select-container{position:relative;display:flex;align-items:center}.select-component{width:100%;background:#111827cc;border:1px solid rgba(75,85,99,.5);border-radius:8px;color:#f9fafb;transition:all .3s ease;outline:none;appearance:none;cursor:pointer;padding-right:2.5rem}.select-component:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.select-component:disabled{opacity:.5;cursor:not-allowed;background:#11182766}.select-component option{background:#1f2937;color:#f9fafb}.select-sm{padding:.5rem .75rem;font-size:.875rem;min-height:32px}.select-md{padding:.75rem;font-size:.875rem;min-height:40px}.select-lg{padding:1rem;font-size:1rem;min-height:48px}.select-icon{position:absolute;right:.75rem;color:#9ca3af;pointer-events:none;font-size:.75rem}.select-error{border-color:#ef4444}.select-error:focus{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.select-full-width{width:100%}.select-error-text{display:flex;align-items:center;gap:.25rem;color:#ef4444;font-size:.75rem;margin-top:.25rem}.select-helper-text{display:block;color:#9ca3af;font-size:.75rem;margin-top:.25rem}.checkbox-wrapper{width:100%}.checkbox-container{display:flex;align-items:center;gap:.75rem}.checkbox-component{accent-color:#3b82f6;cursor:pointer;border-radius:4px}.checkbox-component:focus{outline:2px solid #3b82f6;outline-offset:2px}.checkbox-component:disabled{opacity:.5;cursor:not-allowed}.checkbox-sm{width:.875rem;height:.875rem}.checkbox-md{width:1rem;height:1rem}.checkbox-lg{width:1.25rem;height:1.25rem}.checkbox-label{font-weight:500;color:#f9fafb;cursor:pointer;font-size:.875rem;user-select:none}.checkbox-error .checkbox-component{accent-color:#ef4444}.checkbox-error-text{display:flex;align-items:center;gap:.25rem;color:#ef4444;font-size:.75rem;margin-top:.25rem}.checkbox-helper-text{display:block;color:#9ca3af;font-size:.75rem;margin-top:.25rem}.card-component{background:#1f2937e6;border:1px solid rgba(75,85,99,.3);border-radius:16px;padding:1.5rem;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;backdrop-filter:blur(10px);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.card-component:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent)}.card-hoverable:hover{background:#1f2937f2;border-color:#6366f166;transform:translateY(-4px);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.card-full-width{grid-column:1 / -1}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:1px solid rgba(55,65,81,.2)}.card-title{font-size:1.25rem;font-weight:600;color:#f9fafb;margin:0;letter-spacing:-.025em}.card-icon{color:#6366f1;font-size:1.25rem;opacity:.9}.card-content{color:#d1d5db;line-height:1.6}.card-content h3{color:#f9fafb;font-size:1.125rem;font-weight:600;margin:0 0 .5rem;letter-spacing:-.025em}.card-content p{margin:0;color:#d1d5db;line-height:1.5}.metric{display:flex;flex-direction:column;gap:.5rem;padding:.5rem 0}.metric-value{font-size:2.5rem;font-weight:800;color:#f9fafb;line-height:1;letter-spacing:-.05em}.metric-label{font-size:.8rem;color:#9ca3af;text-transform:uppercase;letter-spacing:.1em;font-weight:500}.badge-component{display:inline-flex;align-items:center;gap:.25rem;border-radius:9999px;font-weight:500;line-height:1;white-space:nowrap}.badge-sm{padding:.25rem .5rem;font-size:.75rem}.badge-md{padding:.375rem .75rem;font-size:.875rem}.badge-lg{padding:.5rem 1rem;font-size:.875rem}.badge-default{background:#374151cc;color:#d1d5db}.badge-success{background:#22c55e33;color:#22c55e;border:1px solid rgba(34,197,94,.3)}.badge-warning{background:#f59e0b33;color:#f59e0b;border:1px solid rgba(245,158,11,.3)}.badge-danger{background:#ef444433;color:#ef4444;border:1px solid rgba(239,68,68,.3)}.badge-info{background:#3b82f633;color:#3b82f6;border:1px solid rgba(59,130,246,.3)}.badge-icon{font-size:.75em}.icon-component{display:inline-block;transition:all .3s ease}.icon-clickable{cursor:pointer}.icon-clickable:hover{color:#3b82f6;transform:scale(1.1)}.icon-sm{font-size:.875rem}.icon-md{font-size:1rem}.icon-lg{font-size:1.25rem}.icon-xl{font-size:1.5rem}.loading-spinner{display:inline-block;animation:spin 1s linear infinite}.spinner-sm{font-size:.875rem}.spinner-md{font-size:1rem}.spinner-lg{font-size:1.25rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.hq-bar-chart{display:flex;align-items:end;background:#1f2937cc;border-radius:12px;padding:1.5rem;border:1px solid rgba(55,65,81,.3);backdrop-filter:blur(10px);box-shadow:0 4px 6px -1px #0000001a}.hq-bar-chart__container{display:flex;align-items:end;gap:.75rem;width:100%;height:100%}.hq-bar-chart__item{display:flex;flex-direction:column;align-items:center;flex:1;height:100%}.hq-bar-chart__bar-container{display:flex;align-items:end;width:100%;height:100%;min-height:60px}.hq-bar-chart__bar{width:100%;border-radius:4px 4px 0 0;min-height:4px;position:relative;transition:all .3s ease;display:flex;align-items:start;justify-content:center;padding-top:.25rem}.hq-bar-chart__bar:hover{transform:translateY(-2px);filter:brightness(1.1)}.hq-bar-chart__value{color:#f9fafb;font-size:.75rem;font-weight:600}.hq-bar-chart__label{margin-top:.5rem;color:#9ca3af;font-size:.75rem;text-align:center;font-weight:500}.hq-display-type{color:#f9fafb;line-height:1.2;margin:0}.hq-display-type--display-1{font-size:3.5rem;font-weight:800}.hq-display-type--display-2{font-size:3rem;font-weight:700}.hq-display-type--display-3{font-size:2.5rem;font-weight:700}.hq-display-type--display-4{font-size:2rem;font-weight:600}.hq-display-type--light{font-weight:300}.hq-display-type--normal{font-weight:400}.hq-display-type--medium{font-weight:500}.hq-display-type--semibold{font-weight:600}.hq-display-type--bold{font-weight:700}.hq-error-boundary{background:#1f2937cc;border:2px solid rgba(239,68,68,.3);border-radius:12px;padding:3rem;margin:2rem;text-align:center}.hq-error-boundary__content{max-width:500px;margin:0 auto}.hq-error-boundary__title{color:#ef4444;font-size:1.5rem;font-weight:700;margin-bottom:1rem}.hq-error-boundary__message{color:#d1d5db;margin-bottom:2rem;line-height:1.6}.hq-error-boundary__details{margin:2rem 0;text-align:left}.hq-error-boundary__details summary{color:#9ca3af;cursor:pointer;font-weight:500;margin-bottom:1rem}.hq-error-boundary__error{background:#0009;color:#fca5a5;padding:1rem;border-radius:6px;font-size:.75rem;white-space:pre-wrap;max-height:200px;overflow-y:auto}.hq-error-boundary__retry{background:#ef4444;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:8px;font-weight:500;cursor:pointer;transition:background .3s ease}.hq-error-boundary__retry:hover{background:#dc2626}.hq-footer{background:#111827f2;border-top:1px solid rgba(55,65,81,.3);padding:3rem 0 2rem;margin-top:auto}.hq-footer__container{max-width:1200px;margin:0 auto;padding:0 2rem}.hq-footer__content{display:grid;grid-template-columns:1fr 2fr;gap:3rem;margin-bottom:2rem}.hq-footer__brand{color:#f9fafb}.hq-footer__sections{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2rem}.hq-footer__section-title{color:#f9fafb;font-size:.875rem;font-weight:600;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.05em}.hq-footer__links{list-style:none;padding:0;margin:0}.hq-footer__link-item{margin-bottom:.5rem}.hq-footer__link{color:#9ca3af;text-decoration:none;font-size:.875rem;transition:color .3s ease}.hq-footer__link:hover{color:#f9fafb}.hq-footer__bottom{padding-top:2rem;border-top:1px solid rgba(55,65,81,.3);text-align:center}.hq-footer__copyright{color:#6b7280;font-size:.875rem;margin:0}.hq-heading{color:#f9fafb;margin:0;line-height:1.2}.hq-heading--h1{font-size:2.25rem}.hq-heading--h2{font-size:1.875rem}.hq-heading--h3{font-size:1.5rem}.hq-heading--h4{font-size:1.25rem}.hq-heading--h5{font-size:1.125rem}.hq-heading--h6{font-size:1rem}.hq-heading--light{font-weight:300}.hq-heading--normal{font-weight:400}.hq-heading--medium{font-weight:500}.hq-heading--semibold{font-weight:600}.hq-heading--bold{font-weight:700}.hq-hint{font-size:.875rem;line-height:1.4;display:inline}.hq-hint--default{color:#9ca3af}.hq-hint--error{color:#fca5a5}.hq-hint--warning{color:#fbbf24}.hq-hint--success{color:#86efac}.hq-keyboard{display:inline-flex;align-items:center;gap:.25rem;font-family:Inter,sans-serif}.hq-keyboard__key{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;height:1.5rem;padding:.125rem .375rem;background:#374151cc;border:1px solid rgba(75,85,99,.6);border-bottom-width:2px;border-radius:4px;color:#f9fafb;font-size:.75rem;font-weight:500;font-family:inherit;text-transform:uppercase;box-shadow:0 1px 2px #0000004d}.hq-keyboard__separator{color:#9ca3af;font-size:.75rem;font-weight:500;margin:0 .125rem}.hq-list{list-style:none;padding:0;margin:0}.hq-list--horizontal{display:flex;flex-wrap:wrap;gap:1rem}.hq-list--vertical{display:flex;flex-direction:column}.hq-list--bordered .hq-list__item{border:1px solid rgba(55,65,81,.3);border-radius:8px;margin-bottom:.5rem}.hq-list--divided .hq-list__item:not(:last-child){border-bottom:1px solid rgba(55,65,81,.3)}.hq-list__item{display:flex;align-items:center;gap:.75rem;padding:.75rem;color:#f9fafb;transition:background .3s ease}.hq-list__item:hover{background:#3741514d}.hq-list__icon{color:#3b82f6;font-size:1rem;flex-shrink:0}.hq-list__content{flex:1}.hq-list__action{flex-shrink:0}.alert{display:flex;padding:1rem;margin:.5rem 0;border-radius:6px;border:1px solid;font-size:.875rem;line-height:1.5;position:relative;word-wrap:break-word;overflow-wrap:break-word}.alert-content{display:flex;align-items:flex-start;gap:.75rem;width:100%;min-width:0}.alert-icon{flex-shrink:0;font-size:1.125rem;margin-top:.125rem}.alert-text{flex:1;min-width:0}.alert-title{font-weight:600;margin:0 0 .25rem;word-wrap:break-word;overflow-wrap:break-word}.alert-message{margin:0;word-wrap:break-word;overflow-wrap:break-word;white-space:pre-wrap}.alert-dismiss{position:absolute;top:.75rem;right:.75rem;background:none;border:none;cursor:pointer;opacity:.6;padding:.25rem;line-height:1;transition:opacity .2s}.alert-dismiss:hover{opacity:1}.alert-info{background-color:#3b82f61a;border-color:#3b82f64d;color:#1e40af}.alert-success{background-color:#22c55e1a;border-color:#22c55e4d;color:#15803d}.alert-warning{background-color:#f59e0b1a;border-color:#f59e0b4d;color:#b45309}.alert-danger{background-color:#ef44441a;border-color:#ef44444d;color:#dc2626}.hq-page-alert{display:flex;padding:1rem 1.5rem;border-radius:8px;border:1px solid;margin-bottom:1rem;position:relative}.hq-page-alert--success{background:#22c55e1a;border-color:#22c55e4d;color:#22c55e}.hq-page-alert--error{background:#ef44441a;border-color:#ef44444d;color:#ef4444}.hq-page-alert--warning{background:#f59e0b1a;border-color:#f59e0b4d;color:#f59e0b}.hq-page-alert--info{background:#3b82f61a;border-color:#3b82f64d;color:#3b82f6}.hq-page-alert__content{display:flex;align-items:start;gap:.75rem;width:100%}.hq-page-alert__icon{flex-shrink:0;font-size:1.25rem;margin-top:.125rem}.hq-page-alert__text{flex:1}.hq-page-alert__title{font-size:1rem;font-weight:600;margin:0 0 .5rem;color:inherit}.hq-page-alert__message{margin:0;line-height:1.5;color:inherit;opacity:.9}.hq-page-alert__actions{display:flex;gap:.5rem;margin-left:auto}.hq-page-alert__dismiss{position:absolute;top:.5rem;right:.5rem;background:none;border:none;color:inherit;cursor:pointer;padding:.25rem;border-radius:4px;opacity:.7;transition:opacity .3s ease}.hq-page-alert__dismiss:hover{opacity:1}.hq-reward{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:8px;font-weight:600;border:1px solid}.hq-reward--monetary{background:#22c55e1a;border-color:#22c55e4d;color:#22c55e}.hq-reward--points{background:#f59e0b1a;border-color:#f59e0b4d;color:#f59e0b}.hq-reward--small{padding:.25rem .5rem;font-size:.75rem}.hq-reward--medium{padding:.5rem .75rem;font-size:.875rem}.hq-reward--large{padding:.75rem 1rem;font-size:1rem}.hq-reward__icon{font-size:1em}.hq-reward__amount{font-variant-numeric:tabular-nums}.hq-trend{display:inline-flex;align-items:center;gap:.375rem;font-weight:500;font-size:.875rem}.hq-trend--positive{color:#22c55e}.hq-trend--negative{color:#ef4444}.hq-trend--neutral{color:#9ca3af}.hq-trend--bold{font-weight:700}.hq-trend__icon{font-size:.75em}.hq-trend__value{font-variant-numeric:tabular-nums}.hq-trust{display:flex;align-items:center;gap:.75rem}.hq-trust--compact{gap:.5rem}.hq-trust__visual{position:relative;flex:1}.hq-trust__background{height:8px;background:#37415180;border-radius:4px;overflow:hidden;position:relative}.hq-trust--compact .hq-trust__background{height:4px}.hq-trust__fill{height:100%;border-radius:4px;transition:all .3s ease}.hq-trust--high .hq-trust__fill{background:linear-gradient(90deg,#22c55e,#16a34a)}.hq-trust--medium .hq-trust__fill{background:linear-gradient(90deg,#f59e0b,#d97706)}.hq-trust--low .hq-trust__fill{background:linear-gradient(90deg,#ef4444,#dc2626)}.hq-trust__icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#f9fafb;font-size:1rem;text-shadow:0 1px 2px rgba(0,0,0,.5)}.hq-trust--compact .hq-trust__icon{display:none}.hq-trust__score{display:flex;align-items:baseline;font-weight:600;color:#f9fafb;flex-shrink:0}.hq-trust__value{font-size:1.125rem}.hq-trust__max{font-size:.875rem;color:#9ca3af;margin-left:1px}.toast-buttons{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem}.toast-container{position:relative;min-height:120px;display:flex;flex-direction:column;gap:.5rem}.toast-placeholder{display:flex;align-items:center;justify-content:center;min-height:120px;border:2px dashed rgba(75,85,99,.3);border-radius:8px;background:#1f293733}.toast-placeholder p{color:#9ca3af;font-style:italic;margin:0;text-align:center}.button-group,.input-group,.card-group,.badge-group,.icon-group,.avatar-group,.alert-group,.banner-group,.progress-group,.stat-group,.tag-group,.heading-group,.hint-group,.keyboard-group,.page-alert-group,.utility-group,.special-group,.toast-demo{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start;margin:0;padding:0}.button-group{gap:1rem;align-items:center}.input-group{flex-direction:column;gap:1.5rem;width:100%;max-width:500px}.card-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin:0;width:100%}.badge-group,.tag-group{gap:.75rem;align-items:center}.icon-group,.avatar-group{gap:1.5rem;align-items:center}.alert-group,.banner-group,.page-alert-group{flex-direction:column;gap:1rem;width:100%}.progress-group{flex-direction:column;gap:1.5rem;width:100%;max-width:400px}.stat-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;width:100%}.heading-group{flex-direction:column;gap:1rem;align-items:flex-start;width:100%}.hint-group{flex-direction:column;gap:1.25rem;align-items:flex-start;width:100%}.hint-group>div{display:flex;flex-direction:column;gap:.5rem;width:100%;max-width:300px}.hint-group label{font-weight:500;color:#f9fafb;font-size:.875rem;margin-bottom:.25rem}.keyboard-group{flex-direction:column;gap:.75rem;align-items:flex-start}.keyboard-group p{margin:0;color:#d1d5db;line-height:1.5}.utility-group,.special-group{flex-direction:column;gap:1.5rem;align-items:flex-start;width:100%}.toast-demo{flex-direction:column;gap:1rem;align-items:flex-start}.example-container{margin:1.5rem 0;background:#11182766;border:1px solid rgba(55,65,81,.2);border-radius:12px;overflow:hidden}.example-preview{padding:3rem 2rem;background:#1f29374d;border-bottom:1px solid rgba(55,65,81,.2);min-height:120px;display:flex;align-items:center;justify-content:center}.example-preview>*{width:100%;max-width:100%}.example-preview .button-group,.example-preview .badge-group,.example-preview .icon-group,.example-preview .avatar-group,.example-preview .tag-group{justify-content:center;align-items:center;min-height:60px}.example-preview .input-group,.example-preview .alert-group,.example-preview .banner-group,.example-preview .progress-group,.example-preview .hint-group,.example-preview .keyboard-group{justify-content:flex-start;align-items:stretch}.example-preview .card-group{align-items:stretch;justify-content:center}.example-preview .stat-group{justify-content:center}.example-preview .heading-group{align-items:flex-start;justify-content:flex-start}.code-block{margin:0;padding:1.5rem;background:#0000004d;border:none;border-radius:0;overflow-x:auto;font-size:.875rem;line-height:1.6}.code-block code{color:#e5e7eb;font-family:Fira Code,Monaco,Cascadia Code,Roboto Mono,monospace;white-space:pre}.component-demo h2{color:#f9fafb;font-size:1.5rem;font-weight:700;margin:3rem 0 .75rem;padding-top:2rem;border-top:1px solid rgba(55,65,81,.2)}.component-demo h2:first-child{margin-top:0;padding-top:0;border-top:none}.component-demo p{color:#9ca3af;margin-bottom:1.5rem;line-height:1.6}.doc-section h1{color:#f9fafb;font-size:2.5rem;font-weight:800;margin:0 0 1rem;letter-spacing:-.05em;background:linear-gradient(135deg,#f9fafb,#d1d5db);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.doc-section>p{color:#9ca3af;font-size:1.125rem;margin-bottom:2rem;line-height:1.6}.example-preview .input-component,.example-preview .checkbox-component,.example-preview .select-component{margin-bottom:0}.example-preview .data-table{width:100%;max-width:100%;overflow-x:auto}.example-preview .list-component{width:100%;max-width:400px}.example-preview .bar-chart{width:100%;max-width:500px;height:200px}.toast-demo .button-component{margin-bottom:1rem}.widget-content,.widget-stats{display:flex;flex-direction:column;gap:1rem}.stat-item{display:flex;align-items:center;gap:1rem;padding:1rem;background:#3741514d;border-radius:8px}.stat-content{display:flex;flex-direction:column;gap:.25rem;flex:1}.stat-value{font-size:1.5rem;font-weight:700;color:#f9fafb}.stat-label{font-size:.875rem;color:#9ca3af}.form-grid{display:grid;gap:1.5rem;grid-template-columns:1fr}.form-grid .form-actions{display:flex;gap:1rem;justify-content:flex-end;margin-top:.5rem}@media (min-width: 768px){.form-grid{grid-template-columns:repeat(2,1fr)}.form-grid .form-actions{grid-column:1 / -1}}.phone-system-page{padding:1.5rem;max-width:1400px;margin:0 auto}.phone-nav{display:flex;gap:1rem;margin:2rem 0;padding-bottom:1rem;border-bottom:1px solid rgba(55,65,81,.2)}.phone-content{display:flex;flex-direction:column;gap:2rem}.phone-actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.5rem;margin-bottom:2rem}.create-room-form,.call-form{display:flex;flex-direction:row;gap:1rem}.system-status{display:flex;flex-direction:column;gap:1rem}.status-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:#37415133;border-radius:8px}.status-item span{color:#d1d5db;font-size:.875rem}.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:2rem;margin-bottom:2rem}.settings-form{display:flex;flex-direction:column;gap:1rem}.checkbox-group{display:flex;flex-direction:column;gap:.5rem;margin:1rem 0}.checkbox-group label{display:flex;align-items:center;gap:.5rem;color:#d1d5db;font-size:.875rem;cursor:pointer}.checkbox-group input[type=checkbox]{width:16px;height:16px;accent-color:#3b82f6}@media (max-width: 768px){.phone-nav{flex-direction:column;gap:.5rem}.phone-actions-grid,.settings-grid{grid-template-columns:1fr}}.data-table-container{width:100%;overflow-x:auto;background:#37415133;border-radius:12px;border:1px solid rgba(55,65,81,.3);margin-top:1em}.data-table{width:100%;border-collapse:collapse;background:transparent;color:#d1d5db}.data-table-header{background:#37415166;border-bottom:1px solid rgba(55,65,81,.4)}.data-table-th{padding:1rem;text-align:left;font-weight:600;font-size:.875rem;text-transform:uppercase;letter-spacing:.05em;color:#9ca3af;border-bottom:1px solid rgba(55,65,81,.3);white-space:nowrap;min-width:120px}.data-table-th.sortable{cursor:pointer;transition:background-color .2s}.data-table-th.sortable:hover{background:#37415199}.data-table-th-content{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.data-table-th-content i{opacity:.5;transition:opacity .2s}.data-table-th.sortable:hover .data-table-th-content i{opacity:1}.data-table-body .data-table-row{border-bottom:1px solid rgba(55,65,81,.2);transition:background-color .2s}.data-table-hoverable .data-table-row:hover{background:#3741514d}.data-table-striped .data-table-row:nth-child(2n){background:#3741511a}.data-table-row.clickable{cursor:pointer}.data-table-td{padding:1rem;font-size:.875rem;border-bottom:1px solid rgba(55,65,81,.2);vertical-align:middle;white-space:nowrap}.data-table-empty{padding:3rem 1rem;text-align:center;color:#6b7280;font-style:italic}.data-table-loading{display:flex;align-items:center;justify-content:center;gap:1rem;padding:3rem;color:#9ca3af}.data-table-loading .loading-spinner{width:24px;height:24px;border:2px solid rgba(156,163,175,.3);border-radius:50%;border-top-color:#3b82f6;animation:spin 1s ease-in-out infinite}@media (max-width: 768px){.data-table-container{font-size:.75rem}.data-table-th,.data-table-td{padding:.75rem .5rem;min-width:100px}.data-table-th{font-size:.75rem}}.phone-system-page .data-table-th{background:#37415180}.phone-system-page .data-table-td{background:transparent}.phone-system-page .data-table-row:hover .data-table-td{background:#37415133}.room-actions-bar{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;background:#37415133;border-radius:12px;border:1px solid rgba(55,65,81,.3);margin-bottom:2rem}.room-actions-left,.room-actions-right{display:flex;gap:1rem;align-items:center}.room-actions-left{flex:1}.room-actions-right{flex-shrink:0}.room-actions{display:flex;gap:.5rem;justify-content:flex-end}@media (max-width: 768px){.room-actions-bar{flex-direction:column;gap:1rem;align-items:stretch}.room-actions-left,.room-actions-right{justify-content:center;flex-wrap:wrap}}