.demo-container{width:100%;height:100%;flex-direction:column;overflow:hidden;position:relative}.demo-container,.grid-header{display:flex;background:var(--surface-primary,#ffffff)}.grid-header{justify-content:space-between;align-items:center;padding:0 16px 12px;flex-shrink:0;min-width:0;gap:16px;border-bottom:none}.grid-header .header-left{display:flex;flex-direction:column;align-items:flex-start;gap:0;margin-top:var(--spacing-6,6px);min-width:0;flex:1 1 auto}.grid-title,h2.grid-title{margin:0;font-size:var(--font-size-16);font-weight:var(--font-weight-600);font-style:normal;color:var(--neutral-800)}.view-count{overflow:hidden;color:var(--neutral-400);text-overflow:ellipsis;font-size:12px;font-weight:500;line-height:140%}.count-badge{background-color:var(--primary-50,#eff6ff);color:var(--primary-600,#2563eb);padding:4px 12px;border-radius:12px;font-size:13px;font-weight:500;font-family:Inter,sans-serif;white-space:nowrap}.breadcrumb-section{padding:12px 16px;font-size:13px;color:var(--text-secondary,#9ca3af);border-bottom:1px solid var(--border-color,#e5e7eb);background:var(--surface-primary,#ffffff)}.breadcrumb-section .breadcrumb-text{font-family:Inter,sans-serif;font-weight:400}.border-radius{border-radius:var(--border-radius-radius-4)}.grid-header .header-right{display:flex;align-items:center;gap:16px;flex-shrink:0}.demo-container .action-buttons,.grid-header .action-buttons{display:flex;gap:12px;align-items:center;flex-shrink:0}.demo-container .action-buttons .btn,.grid-header .action-buttons .btn{white-space:nowrap;overflow:visible;text-overflow:clip;flex-shrink:0}.demo-container .action-buttons .btn .material-icons,.demo-container .action-buttons .btn i,.grid-header .action-buttons .btn .material-icons,.grid-header .action-buttons .btn i{flex-shrink:0}.tab-panel{padding:0 16px;justify-content:space-between;gap:12px;min-height:40px;padding:var(--space-200) var(--spacing-12);background:var(--surface-primary,#ffffff);border-bottom:1px solid var(--border-color,#e5e7eb)}.tab-left,.tab-panel{display:flex;align-items:center}.tab-left{gap:16px}.tab-right{display:flex;align-items:center;gap:8px}.field-width{width:220px;min-width:0}.filter-multiselect-state{min-width:0}.more-filters{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.tab-list{display:flex;gap:0;align-items:center}.control-buttons{display:flex;gap:8px}.tab-item:hover{color:var(--text-primary,#1a1a1a);background:var(--surface-secondary,#fafafa)}.tab-item.active{color:var(--primary-500,#3b82f6);background:var(--surface-secondary,rgba(59,130,246,.08));border-bottom:2px solid var(--primary-500,#3b82f6)}.header-search-container{position:relative;display:flex;align-items:center;background:var(--surface-secondary,#fafafa);border-radius:6px;border:1px solid var(--border-color,#e5e7eb);overflow:hidden;width:100%}.header-search-input{padding:8px 12px;border:none;background:var(--surface-primary,#ffffff);font-size:14px;width:224px;outline:none;color:var(--text-primary,#1a1a1a);height:36px;border-radius:var(--border-radius-radius-4);font-family:Inter,sans-serif}.header-search-input::-moz-placeholder{color:var(--text-secondary,#9ca3af)}.header-search-input::placeholder{color:var(--text-secondary,#9ca3af)}.header-search-btn{padding:8px 12px;border:none;background:var(--primary-500);color:white;cursor:pointer;border-radius:0 4px 4px 0;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease;height:36px;width:36px}.header-search-btn:hover{background:var(--primary-600)}.header-search-btn i{font-size:18px}.control-btn{padding:6px;border:none;background:none;cursor:pointer;border-radius:4px;transition:all .2s ease;display:flex;align-items:center;justify-content:center;width:32px;height:32px}.control-btn,.control-btn i{color:var(--text-secondary,#9ca3af)}.grid-container{margin:0;position:relative;width:100%;max-width:100%;overflow:hidden;flex-direction:column}.grid-container,.grid-container .grid-loading-overlay{background:var(--surface-primary,#ffffff);display:flex}.grid-container .grid-loading-overlay{position:absolute;inset:0;align-items:center;justify-content:center;color:var(--text-secondary,#9ca3af);font-size:14px;z-index:10}.icon-size{font-size:16px!important;width:16px;height:16px}.material-icons.size-bg,.material-symbols-outlined.size-bg{font-size:16px;width:16px;height:16px}.btn-group{display:flex;justify-content:center;align-items:center;gap:2px;border-radius:var(--border-radius-radius-4);background:var(--surface-primary,#ffffff)}.btn-group,.swap-btn-border{border:.5px solid var(--border-color,#e5e7eb)}.swap-btn-border{height:36px}.btn-background{background:var(--surface-primary,#ffffff)}.vertical-line{width:1px;background:linear-gradient(to bottom,var(--utility-bg-2,rgba(148,163,184,.2)) 0,var(--border-color,#d1d5db) 50%,var(--border-color,#d1d5db) 50%,var(--utility-bg-2,rgba(148,163,184,.2)) 100%);flex-shrink:0;align-self:stretch;gap:10px}.d-flex{display:flex}.align-items-center{align-items:center}.text-color{color:var(--text-secondary,#9ca3af)}.web-url-link{color:var(--primary-500);text-decoration:none}.web-url-link:hover{text-decoration:underline}.count{background-color:var(--primary-50);padding:var(--spacing-4) var(--spacing-12);border-radius:var(--radius-full);font-size:var(--font-size-14);color:var(--primary-600);font-family:Inter,sans-serif;font-weight:500}.loading{padding:20px;text-align:center;color:var(--text-secondary,#9ca3af)}.swap-size,.table-size{font-size:20px}.grid-icon{display:inline-flex;align-items:center}@media (max-width:768px){.grid-header{flex-direction:column;gap:16px;align-items:flex-start}.grid-header .header-right{min-width:0;width:100%;flex-wrap:wrap}.tab-panel{flex-direction:column;gap:16px;align-items:flex-start}.grid-container{height:calc(100vh - 250px)}.grid-toolbar{flex-wrap:wrap}}@media (max-width:480px){.grid-title{font-size:18px}.demo-container .action-buttons,.grid-header .action-buttons{flex-direction:column;gap:8px;flex-shrink:unset!important}.control-buttons{flex-wrap:wrap}.column-manager-overlay .column-manager-panel,.filter-panel-overlay .filter-panel{left:0!important;right:0!important;width:100%!important}}