:root{--color-primary:#0b8a43;--color-primary-hover:#066533;--color-primary-rgb:11,138,67;--color-success:#10b981;--color-success-bg:#d1fae5;--color-success-text:#065f46;--color-warning:#f59e0b;--color-warning-bg:#fef3c7;--color-warning-text:#b45309;--color-danger:#ef4444;--color-danger-bg:#fee2e2;--color-danger-text:#b91c1c;--color-info:#3b82f6;--color-info-bg:#dbeafe;--color-info-text:#1e40af;--color-background:#f4f6fa;--color-surface:#ffffff;--color-sidebar:#ffffff;--color-header:#ffffff;--color-text:#1b2a24;--color-text-secondary:#4a5a54;--color-text-muted:#6c7d75;--color-border:#e7f2eb;--color-border-strong:#cbd5e1;--color-revenue:#ef4444;--color-phone-bg:#ecfdf5;--color-phone-icon:#10b981;--color-skeleton:#e2e8f0;--color-skeleton-shine:#f1f5f9;--radius-kpi:20px;--radius-card-large:24px;--radius-button:14px;--shadow-premium:0 8px 24px rgba(0,0,0,0.04);--shadow-xs:0 1px 2px rgba(0,0,0,0.02);--shadow-sm:0 1px 3px rgba(0,0,0,0.03);--shadow-md:0 4px 6px -1px rgba(0,0,0,0.04);--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.05);--shadow-card:0 1px 3px rgba(0,0,0,0.02);--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--spacing-2xl:48px;--font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-md:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-title:1.5rem;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-full:9999px;--content-max-width:800px;--content-max-width-desktop:1280px;--sidebar-width:280px;--sidebar-collapsed-width:80px;--touch-min:44px;--header-height:64px;--nav-height:64px;--transition-fast:0.15s ease;--transition-normal:0.25s ease;--transition-slow:0.35s ease}[data-theme="dark"]{--color-background:#1a222c;--color-surface:#1c2536;--color-sidebar:#1c2536;--color-header:#1c2536;--color-text:#dee4ee;--color-text-secondary:#a1aec0;--color-text-muted:#8a99af;--color-success-bg:rgba(16,185,129,0.15);--color-success-text:#34d399;--color-warning-bg:rgba(245,158,11,0.15);--color-warning-text:#fbbf24;--color-danger-bg:rgba(239,68,68,0.15);--color-danger-text:#f87171;--color-info-bg:rgba(59,130,246,0.15);--color-info-text:#60a5fa;--color-border:#2e3a47;--color-border-strong:#3d4d5f;--color-phone-bg:#1a332a;--color-phone-icon:#10b981;--color-skeleton:#2e3a47;--color-skeleton-shine:#3d4d5f;--shadow-xs:0 1px 2px rgba(0,0,0,0.4);--shadow-sm:0 1px 3px rgba(0,0,0,0.4);--shadow-md:0 4px 6px rgba(0,0,0,0.3);--shadow-lg:0 10px 15px rgba(0,0,0,0.3);--shadow-card:0 1px 3px rgba(0,0,0,0.3)}@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:var(--font-family);font-size:var(--font-size-md);color:var(--color-text);background:var(--color-background);min-height:100vh;padding-bottom:calc(var(--nav-height) + env(safe-area-inset-bottom,0px));line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color var(--transition-normal),color var(--transition-normal)}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-primary-hover)}img{max-width:100%;height:auto}.app-main{min-height:100vh;transition:margin-left var(--transition-normal)}.app-content{max-width:var(--content-max-width);margin:0 auto;padding:16px;overflow-x:hidden}.top-row{display:flex;flex-direction:column;gap:var(--spacing-md);margin-bottom:20px}.top-row .revenue-section{margin-bottom:0}.form-control{width:100%;font-family:var(--font-family);font-size:var(--font-size-sm);color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:10px 12px;transition:border-color var(--transition-fast),box-shadow var(--transition-fast),background-color var(--transition-normal);outline:none}.form-control:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(var(--color-primary-rgb),0.12)}select.form-control{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-family);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);padding:10px 20px;border-radius:var(--radius-md);border:none;cursor:pointer;transition:all var(--transition-fast);line-height:1.5}.btn-primary{background:var(--color-primary);color:#ffffff}.btn-primary:hover{background:var(--color-primary-hover);box-shadow:0 4px 12px rgba(var(--color-primary-rgb),0.3)}.btn-cancel,.btn-outline{background:var(--color-surface);color:var(--color-text-secondary);border:1px solid var(--color-border)}.btn-cancel:hover,.btn-outline:hover{background:var(--color-background);border-color:var(--color-border-strong)}.text-primary{color:var(--color-primary)}.text-success{color:var(--color-success)}.text-warning{color:var(--color-warning)}.text-danger{color:var(--color-danger)}.text-muted{color:var(--color-text-muted)}.app-header,.app-sidebar,.app-nav,.stat-card,.revenue-section,.order-card,.customer-card,.data-table,.chart-section,.filter-modal,.filter-overlay,.select-modal{transition:background-color var(--transition-normal),border-color var(--transition-normal),color var(--transition-normal),box-shadow var(--transition-normal)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-border-strong);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}.route-spinner{display:flex;align-items:center;justify-content:center;min-height:40vh;pointer-events:none}.route-spinner-dot{width:32px;height:32px;border-radius:50%;border:3px solid var(--color-border);border-top-color:var(--color-primary);animation:route-spin 0.7s linear infinite}@keyframes route-spin{to{transform:rotate(360deg)}}.header-search-ai{flex:1;max-width:480px;margin:0 var(--spacing-md);display:flex;justify-content:center;position:relative;z-index:10}.search-ai-wrap{position:relative;width:100%}.search-ai-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#0b8a43;font-size:1.1rem;pointer-events:none;font-family:inherit;transition:transform 0.2s ease}.ai-global-search{width:100%;height:40px;padding:8px 16px 8px 40px;font-family:var(--font-family);font-size:var(--font-size-sm);color:var(--color-text);background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-full);outline:none;transition:all var(--transition-fast)}.ai-global-search:focus{border-color:#0b8a43;background:var(--color-surface);box-shadow:0 0 0 3px rgba(11,138,67,0.15)}.search-ai-wrap:focus-within .search-ai-icon{transform:translateY(-50%) scale(1.15) rotate(15deg)}@media (min-width:768px){.header-info{flex:0 0 auto;min-width:160px}.header-search-ai{margin:0 auto}}@media (max-width:767px){.header-info{display:none}.header-search-ai{margin:0 8px;max-width:none}}.app-header{position:sticky;top:0;height:var(--header-height);background:var(--color-header);border-bottom:1px solid var(--color-border);display:flex;align-items:center;padding:0 16px;z-index:301;gap:var(--spacing-md)}.header-avatar{width:40px;height:40px;border-radius:var(--radius-full);object-fit:cover;border:2px solid var(--color-border)}.header-info{flex:1}.header-greeting{font-size:var(--font-size-xs);color:var(--color-text-muted);margin:0;line-height:1.3}.header-username{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);margin:0;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-actions{display:flex;align-items:center;gap:4px}.header-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:none;background:none;color:var(--color-text-muted);cursor:pointer;border-radius:var(--radius-full);position:relative;transition:background var(--transition-fast),color var(--transition-fast)}.header-icon:hover{background:var(--color-background);color:var(--color-primary)}.header-ai-btn{color:var(--color-primary)}.header-ai-btn:hover{background:rgba(var(--color-primary-rgb),0.08)}.theme-toggle{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:none;background:none;color:var(--color-text-muted);cursor:pointer;border-radius:var(--radius-full);transition:background var(--transition-fast),color var(--transition-fast),transform 0.6s ease}.theme-toggle:hover{background:var(--color-background);color:var(--color-primary);transform:rotate(360deg)}.theme-toggle .icon-sun,.theme-toggle .icon-moon{display:none}:root .theme-toggle .icon-moon,[data-theme="light"] .theme-toggle .icon-moon{display:block}[data-theme="dark"] .theme-toggle .icon-sun{display:block}[data-theme="dark"] .theme-toggle .icon-moon{display:none}.header-notification{position:relative}.notification-badge{position:absolute;top:4px;right:4px;min-width:18px;height:18px;padding:0 5px;background:var(--color-danger);color:#fff;font-size:10px;font-weight:var(--font-weight-bold);line-height:18px;text-align:center;border-radius:var(--radius-full);pointer-events:none}.notification-badge:empty,.notification-badge[hidden]{display:none}.header-notification:hover svg{animation:bell-ring 0.6s ease;transform-origin:top center}@keyframes bell-ring{0%{transform:rotate(0deg)}15%{transform:rotate(14deg)}30%{transform:rotate(-12deg)}45%{transform:rotate(10deg)}60%{transform:rotate(-8deg)}75%{transform:rotate(4deg)}100%{transform:rotate(0deg)}}:root{--color-primary:#3c50e0;--color-primary-rgb:60,80,224;--color-background:#f1f5f9;--color-surface:#ffffff;--color-header:#ffffff;--color-text:#1c2434;--color-text-muted:#64748b;--color-text-secondary:#334155;--color-border:#e2e8f0;--color-danger:#ef4444;--color-success:#10b981;--color-skeleton:#e2e8f0;--color-skeleton-shine:#f1f5f9;--shadow-sm:0 1px 3px rgba(0,0,0,0.06);--shadow-md:0 4px 6px rgba(0,0,0,0.07);--font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-md:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-full:9999px;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--header-height:64px;--nav-height:64px;--transition-fast:0.15s ease;--transition-normal:0.25s ease}[data-theme="dark"]{--color-background:#1a222c;--color-surface:#1c2536;--color-header:#1c2536;--color-text:#dee4ee;--color-text-muted:#8a99af;--color-text-secondary:#a1aec0;--color-border:#2e3a47;--color-skeleton:#2e3a47;--color-skeleton-shine:#3d4d5f}.ai-chat-btn{overflow:visible !important}.ai-hand{transition:transform var(--transition-fast,0.15s ease)}.ai-chat-btn:hover .ai-hand{animation:wave-hand 0.6s ease-in-out infinite alternate;transform-origin:40px 30px}@keyframes wave-hand{0%{transform:rotate(0deg)}25%{transform:rotate(-20deg)}50%{transform:rotate(15deg)}75%{transform:rotate(-15deg)}100%{transform:rotate(10deg)}}.ai-chat-btn:hover .ai-robot{filter:drop-shadow(0 0 4px rgba(99,102,241,0.4))}.stats-row{display:flex;flex-wrap:nowrap;gap:8px;margin-bottom:0}.stat-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:10px 4px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1 1 0;min-width:0;overflow:hidden;transition:border-color var(--transition-fast),box-shadow var(--transition-fast),background-color var(--transition-normal)}.stat-card:hover{border-color:var(--color-primary);box-shadow:0 0 0 1px rgba(var(--color-primary-rgb),0.12)}.stat-card.highlighted{background:var(--color-primary);border-color:var(--color-primary)}.stat-card.highlighted .stat-label{color:rgba(255,255,255,0.8)}.stat-card.highlighted .stat-value{color:#fff}.stat-card .stat-icon{display:flex;font-size:1.25rem;margin-bottom:2px}.stat-card .stat-label{font-size:0.65rem;color:var(--color-text-muted);margin-bottom:0px;font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:-0.01em;line-height:1.1;white-space:normal;word-break:break-word;max-width:100%}.stat-card .stat-value{display:block;font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-text);margin-top:4px}@media (min-width:768px){.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-md);overflow-x:visible;padding-bottom:0;margin-bottom:0}.stat-card{min-width:unset;flex:unset;overflow:visible;padding:var(--spacing-lg) var(--spacing-lg) var(--spacing-xl);border-radius:var(--radius-lg)}.stat-card .stat-icon{display:flex;width:48px;height:48px;border-radius:var(--radius-lg);align-items:center;justify-content:center;margin:0 auto var(--spacing-sm);font-size:1.5rem;background:rgba(var(--color-primary-rgb),0.08);color:var(--color-primary)}.stat-card.highlighted .stat-icon{background:rgba(255,255,255,0.2);color:#fff}.stat-card .stat-label{font-size:var(--font-size-xs);letter-spacing:0.025em;margin-bottom:var(--spacing-xs);white-space:nowrap;word-break:normal}.stat-card .stat-value{font-size:var(--font-size-xl)}.stat-card .stat-value.hide-mobile{display:block}}.revenue-section{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-lg);margin-bottom:var(--spacing-lg);min-width:0;overflow:hidden}@media (max-width:479px){.revenue-section [style*="display:flex"][style*="gap:8px"]{flex-wrap:wrap}.revenue-section [style*="display:flex"][style*="gap:8px"]>div{min-width:120px}}.revenue-top-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.revenue-title{font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);color:var(--color-text);margin:0}.revenue-value{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--color-primary);margin:0;line-height:1.2;white-space:nowrap}.revenue-date-row{display:flex;align-items:flex-end;gap:var(--spacing-sm);flex-wrap:nowrap}.revenue-date-row .form-field{flex:1;margin-bottom:0}.revenue-arrow{height:40px;display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);font-size:var(--font-size-md);flex-shrink:0;padding:0 2px}@media (max-width:1024px){.stat-card .stat-label{white-space:normal;text-align:center;font-size:0.75rem;line-height:1.2;min-height:2.4em;display:flex;align-items:center;justify-content:center}}@media (max-width:768px){.revenue-date-row .form-field label{display:none}.revenue-date-row{gap:4px}}@media (max-width:480px){.revenue-section{padding:var(--spacing-md) 10px}.revenue-top-row{margin-bottom:8px !important}.revenue-date-row{gap:4px;flex-wrap:nowrap}.revenue-date-row .form-field{gap:0}.revenue-date-row .form-field .field-input{padding:8px 4px !important;font-size:11px !important;min-width:0}}.date-input{font-family:var(--font-family);background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text);transition:background-color var(--transition-normal),border-color var(--transition-fast),color var(--transition-normal)}.date-input:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px rgba(var(--color-primary-rgb),0.12)}.section-header{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.section-header .section-line{width:4px;height:24px;background:var(--color-primary);border-radius:2px}.section-header .section-title{flex:1;font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);margin:0;color:var(--color-text)}.section-header .section-badge{background:rgba(var(--color-primary-rgb),0.08);color:var(--color-primary);padding:4px 12px;border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold)}.app-nav{position:fixed;bottom:0;left:0;right:0;width:100%;height:calc(var(--nav-height) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:var(--color-surface);border-top:1px solid var(--color-border);display:flex;justify-content:space-around;align-items:center;z-index:100;box-sizing:border-box}.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-sm);text-decoration:none;color:var(--color-text-muted);font-size:var(--font-size-xs);min-height:var(--touch-min);border:none;background:none;cursor:pointer;transition:color var(--transition-fast);font-weight:var(--font-weight-medium)}.nav-item:hover{color:var(--color-text-secondary)}.nav-item.active{color:var(--color-primary);font-weight:var(--font-weight-semibold)}.nav-item .nav-icon{font-size:1.25rem;margin-bottom:2px}.app-sidebar{display:none;position:fixed;top:0;left:0;width:var(--sidebar-width);height:100vh;background:var(--color-sidebar);border-right:1px solid var(--color-border);z-index:105;padding-top:0;flex-direction:column;justify-content:space-between;overflow:hidden;transition:width var(--transition-normal),background-color var(--transition-normal),border-color var(--transition-normal)}@media (max-width:767px){.app-sidebar{display:flex;width:var(--sidebar-width) !important;top:var(--header-height);height:calc(100vh - var(--header-height));transform:translateX(-100%);z-index:300;transition:transform 0.26s cubic-bezier(0.4,0,0.2,1);box-shadow:none}.app-sidebar.open{transform:translateX(0);box-shadow:4px 0 24px rgba(0,0,0,0.18)}.sidebar-backdrop{display:none;position:fixed;top:var(--header-height);left:0;right:0;bottom:0;background:rgba(0,0,0,0.35);z-index:299;backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px)}.sidebar-backdrop.active{display:block;animation:backdrop-in 0.22s ease}@keyframes backdrop-in{from{opacity:0}to{opacity:1}}}@media (min-width:768px){.sidebar-backdrop{display:none !important}}.sidebar-toggle{display:flex;align-items:center;justify-content:center;width:100%;height:48px;border:none;background:none;cursor:pointer;color:var(--color-text-muted);border-bottom:1px solid var(--color-border);transition:color var(--transition-fast),background var(--transition-fast)}.sidebar-toggle:hover{background:var(--color-background);color:var(--color-primary)}.sidebar-toggle svg{transition:transform var(--transition-normal)}.app-sidebar.collapsed .sidebar-toggle svg{transform:rotate(180deg)}.sidebar-heading{padding:var(--spacing-md) var(--spacing-lg);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:0.05em;color:var(--color-text-muted)}.sidebar-nav{display:flex;flex-direction:column;padding:var(--spacing-sm);gap:2px}.sidebar-item{display:flex;align-items:center;gap:var(--spacing-md);padding:12px var(--spacing-md);text-decoration:none;color:var(--color-text-muted);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);border-radius:var(--radius-md);transition:background var(--transition-fast),color var(--transition-fast);position:relative;white-space:nowrap;overflow:hidden;margin:2px 0}.sidebar-item:hover:not(.active){background:#f0faf4;color:var(--color-primary)}.sidebar-item:hover:not(.active) .sidebar-icon svg{color:var(--color-primary)}.sidebar-item.active{background:var(--color-primary) !important;color:#ffffff !important;font-weight:600 !important}.sidebar-item.active .sidebar-icon svg{color:#ffffff !important}.sidebar-item .sidebar-icon{font-size:1.125rem;flex-shrink:0;width:22px;height:22px;display:flex;align-items:center;justify-content:center;color:inherit}.sidebar-item .sidebar-label{transition:opacity var(--transition-normal)}.app-sidebar.collapsed{width:var(--sidebar-collapsed-width)}.app-sidebar.collapsed .sidebar-nav{padding:var(--spacing-xs)}.app-sidebar.collapsed .sidebar-item{justify-content:center;padding:12px;gap:0}.app-sidebar.collapsed .sidebar-label{opacity:0;width:0;overflow:hidden;position:absolute}.app-sidebar.collapsed .sidebar-heading{text-align:center;padding:var(--spacing-sm);font-size:0}.app-sidebar.collapsed .sidebar-item:hover::after{content:attr(title);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);background:var(--color-text);color:var(--color-surface);padding:6px 12px;border-radius:var(--radius-sm);font-size:var(--font-size-xs);font-weight:var(--font-weight-normal);white-space:nowrap;z-index:200;pointer-events:none;box-shadow:var(--shadow-md)}.app-sidebar.collapsed .sidebar-item:hover::before{content:'';position:absolute;left:calc(100% + 2px);top:50%;transform:translateY(-50%);border:5px solid transparent;border-right-color:var(--color-text);z-index:200;pointer-events:none}.sidebar-brand-wrapper{display:flex;align-items:center;justify-content:space-between;height:var(--header-height);padding:0 var(--spacing-lg);border-bottom:1px solid var(--color-border);flex-shrink:0}.sidebar-brand{font-size:1.05rem;font-weight:800;color:#0b8a43;letter-spacing:0.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}.brand-spark{color:#0b8a43;font-size:1.15rem;animation:spark-spin 4s linear infinite}@keyframes spark-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.app-sidebar.collapsed .sidebar-brand{width:0;opacity:0;padding:0}.app-sidebar.collapsed .sidebar-brand-wrapper{padding:0;justify-content:center}.app-sidebar.collapsed .sidebar-brand-wrapper .sidebar-toggle{border-bottom:none;height:100%}.sidebar-nav{flex:1;overflow-y:auto;padding:var(--spacing-md) var(--spacing-sm)}.sidebar-heading{padding:var(--spacing-sm) var(--spacing-md);font-size:10px}.sidebar-footer{border-top:1px solid var(--color-border);padding:var(--spacing-md);background:var(--color-sidebar);display:flex;flex-direction:column;gap:12px;flex-shrink:0}.sidebar-user{display:flex;align-items:center;gap:var(--spacing-sm);overflow:hidden}.sidebar-user-avatar{width:38px;height:38px;border-radius:var(--radius-full);object-fit:cover;border:2px solid rgba(11,138,67,0.2);flex-shrink:0}.sidebar-user-info{display:flex;flex-direction:column;min-width:0;transition:opacity var(--transition-normal)}.sidebar-user-name{font-size:13px;font-weight:700;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-user-role{font-size:11px;color:var(--color-text-muted);white-space:nowrap}.sidebar-logout-btn{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);width:100%;padding:10px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-background);color:var(--color-text-muted);font-family:var(--font-family);font-size:13px;font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.sidebar-logout-btn:hover{background:#fee2e2;color:var(--color-danger);border-color:#fca5a5}.app-sidebar.collapsed .sidebar-footer{padding:var(--spacing-xs);align-items:center;gap:8px}.app-sidebar.collapsed .sidebar-user-info{opacity:0;width:0;overflow:hidden;position:absolute}.app-sidebar.collapsed .sidebar-logout-btn{padding:10px 0;border:none;background:none}.app-sidebar.collapsed .sidebar-logout-btn span{display:none}.app-sidebar.collapsed .sidebar-logout-btn:hover{background:var(--color-background);color:var(--color-danger)}.list{list-style:none;margin:0;padding:0;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}.list-item{display:flex;align-items:center;gap:var(--spacing-md);padding:14px var(--spacing-md);border-bottom:1px solid var(--color-border);transition:background var(--transition-fast);color:var(--color-text);font-size:var(--font-size-sm)}.list-item svg{flex-shrink:0;color:var(--color-text-muted)}.list-item:last-child{border-bottom:none}.list-item:hover{background:var(--color-background)}.list-content{flex:1;min-width:0}.list-title{margin:0;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text);line-height:1.4}.list-subtitle{margin:2px 0 0;font-size:var(--font-size-xs);color:var(--color-text-muted);line-height:1.4}.btn-call{width:40px;height:40px;border-radius:var(--radius-full);background:var(--color-phone-bg);color:var(--color-phone-icon);border:none;display:flex;align-items:center;justify-content:center;font-size:1.125rem;cursor:pointer;flex-shrink:0;transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.btn-call:hover{transform:scale(1.08);box-shadow:0 2px 8px rgba(16,185,129,0.3)}.chart-section{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-lg);margin-bottom:var(--spacing-lg);box-shadow:var(--shadow-sm);transition:box-shadow var(--transition-normal)}.chart-section:hover{box-shadow:var(--shadow-md)}.chart-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-sm);margin-bottom:var(--spacing-md);flex-wrap:wrap}.chart-header-left{display:flex;flex-direction:column;gap:4px}.chart-title{font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);color:var(--color-text);margin:0;letter-spacing:-0.01em}.chart-subtitle{font-size:var(--font-size-xs);color:var(--color-text-muted);margin:0}.chart-revenue-badge{display:flex;flex-direction:column;align-items:flex-end;gap:2px}.chart-revenue-label{font-size:var(--font-size-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.04em}.chart-revenue-value{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-primary);line-height:1}.chart-filter{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.chart-filter-label{font-size:var(--font-size-xs);color:var(--color-text-muted);white-space:nowrap}.chart-date-input{flex:1;height:36px;padding:0 10px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-background);color:var(--color-text);font-size:var(--font-size-sm);font-family:var(--font-family);outline:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);box-sizing:border-box;-webkit-appearance:none;appearance:none}.chart-date-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(var(--color-primary-rgb),0.12)}.chart-filter-arrow{color:var(--color-text-muted);font-size:14px;line-height:1;flex-shrink:0}.chart-wrapper{position:relative;height:240px}.chart-wrapper canvas{width:100% !important;height:100% !important}.skeleton{background:var(--color-skeleton);border-radius:var(--radius-md);position:relative;overflow:hidden}.skeleton::after{content:'';position:absolute;inset:0;background:linear-gradient( 90deg,transparent 0%,var(--color-skeleton-shine) 50%,transparent 100% );animation:skeleton-shimmer 1.8s infinite}@keyframes skeleton-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}.skeleton-text{height:14px;border-radius:var(--radius-sm);background:var(--color-skeleton);margin-bottom:var(--spacing-sm)}.skeleton-avatar{width:40px;height:40px;border-radius:var(--radius-full)}.skeleton-card{height:120px}.skeleton-chart{height:200px}.skeleton-list-item{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);border-bottom:1px solid var(--color-border)}.skeleton-list-item:last-child{border-bottom:none}.stat-card.skeleton{min-height:90px}.loading-spinner{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.15);z-index:9999}.loading-spinner[hidden]{display:none}.spinner-dot{width:36px;height:36px;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:var(--radius-full);animation:spin 0.7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.search-filter-row{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-md);align-items:stretch;margin-left:-16px;margin-right:-16px;padding:0 16px}.search-filter-row .search-bar{flex:1;margin-bottom:0}.btn-filter{width:44px;height:44px;border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-muted);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all var(--transition-fast)}.btn-filter:hover{border-color:var(--color-primary);color:var(--color-primary);background:rgba(var(--color-primary-rgb),0.04)}.filter-overlay,.picker-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:1000;opacity:0;visibility:hidden;transition:opacity var(--transition-normal),visibility var(--transition-normal);display:flex;align-items:center;justify-content:center}.filter-overlay.active,.picker-overlay.active{opacity:1;visibility:visible}.filter-modal,.select-modal,.picker-sheet{position:fixed;bottom:auto;left:50%;right:auto;top:50%;transform:translate(-50%,-50%) scale(0.95);opacity:0;pointer-events:none;visibility:hidden;max-width:520px;width:92%;height:auto;max-height:85vh;min-height:200px;background:var(--color-surface);border-radius:var(--radius-xl);box-shadow:0 20px 50px rgba(0,0,0,0.2);border:1px solid var(--color-border);transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1),opacity 0.2s ease,visibility 0.2s;display:flex;flex-direction:column;overflow:hidden;z-index:1001}.filter-modal.active,.select-modal.active,.picker-sheet.active{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto;visibility:visible}.select-modal,.picker-sheet{z-index:1010}.filter-modal-header{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--color-border);position:sticky;top:0;background:var(--color-surface);z-index:2}.filter-modal-header h3{margin:0;font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);color:var(--color-text)}.filter-modal-close{width:32px;height:32px;border:none;background:none;color:var(--color-text-muted);font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);padding:0;line-height:1}.filter-modal-close:hover{background:var(--color-border);color:var(--color-text)}.filter-modal-body{flex:1;padding:var(--spacing-md) var(--spacing-lg) var(--spacing-lg);overflow-y:auto}.filter-date-row{display:flex;align-items:flex-end;gap:var(--spacing-xs);margin-bottom:var(--spacing-lg);flex-wrap:nowrap}.filter-date-row .form-field{margin-bottom:0;flex:1;min-width:0}.filter-date-separator{height:40px;display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);font-size:var(--font-size-md);padding:0 4px}.filter-select-item{display:flex;align-items:center;justify-content:space-between;padding:14px 0;cursor:pointer;transition:background var(--transition-fast)}.filter-select-item.locked{background:rgba(var(--color-text-muted-rgb),0.05);cursor:not-allowed !important}.filter-select-item.clickable{background:var(--color-surface);transition:background var(--transition-fast),padding-left var(--transition-fast)}.filter-select-item.clickable:hover{background:rgba(var(--color-primary-rgb),0.04);padding-left:8px}.filter-select-label{font-size:var(--font-size-sm);color:var(--color-text-secondary);font-weight:var(--font-weight-medium)}.filter-select-value{display:flex;align-items:center;gap:var(--spacing-sm);font-size:var(--font-size-sm);color:var(--color-text-muted)}.filter-select-value .arrow{font-size:1.25rem;color:var(--color-text-muted)}.btn-filter-apply{width:100%;padding:14px;margin-top:var(--spacing-lg);background:var(--color-primary);color:#ffffff;border:none;border-radius:var(--radius-md);font-family:var(--font-family);font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);cursor:pointer;transition:background var(--transition-fast),box-shadow var(--transition-fast)}.btn-filter-apply:hover{background:var(--color-primary-hover);box-shadow:0 4px 12px rgba(var(--color-primary-rgb),0.3)}.select-modal-header{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--color-border);position:sticky;top:0;background:var(--color-surface)}.select-modal-header h3{margin:0;font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);color:var(--color-text)}.filter-modal-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;background:var(--color-background);border-radius:var(--radius-full);color:var(--color-text-muted);font-size:1.25rem;cursor:pointer;padding:0;line-height:1;transition:all var(--transition-fast)}.filter-modal-close:hover{background:var(--color-border);color:var(--color-text)}.btn-back{background:none;border:none;font-size:1.5rem;color:var(--color-text-muted);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:color var(--transition-fast)}.btn-back:hover{color:var(--color-text)}.select-modal-search{padding:var(--spacing-sm) var(--spacing-md);border-bottom:1px solid var(--color-border)}.select-modal-list{list-style:none;margin:0;padding:0;flex:1;overflow-y:auto}.select-modal-list li{padding:14px var(--spacing-lg);border-bottom:1px solid var(--color-border);font-size:var(--font-size-sm);cursor:pointer;transition:background var(--transition-fast);color:var(--color-text)}.select-modal-list li:hover{background:var(--color-background)}.select-modal-list li.selected{color:var(--color-primary);font-weight:var(--font-weight-semibold);background:rgba(var(--color-primary-rgb),0.08)}.form-field{display:flex;flex-direction:column;gap:4px;margin-bottom:8px;width:100%}.search-filter-row{display:flex;gap:8px;align-items:center;padding:8px 12px;background:var(--color-background)}.search-filter-row .form-field{flex:1;min-width:0;margin-bottom:0}.form-field label{display:block;font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.025em;margin-bottom:2px}.form-field label .req{color:#e3342f;margin-left:2px}.search-bar{position:relative;display:flex;align-items:center;width:100%}.search-icon{position:absolute;left:14px;color:var(--color-text-muted);display:flex;pointer-events:none}.search-input{width:100%;padding:8px 12px 8px 38px !important;min-height:40px;border:1.5px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--font-size-sm);background:var(--color-surface);transition:all var(--transition-fast);text-overflow:ellipsis}.search-input:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px rgba(var(--color-primary-rgb),0.1)}.btn-filter{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);background:var(--color-surface);border:1.5px solid var(--color-border);color:var(--color-text-muted);cursor:pointer;transition:all var(--transition-fast);flex-shrink:0}.btn-filter:hover{border-color:var(--color-primary);color:var(--color-primary);background:rgba(var(--color-primary-rgb),0.05)}.field-input{width:100%;padding:8px 12px;min-height:40px;border:1.5px solid var(--color-border);border-radius:var(--radius-md);font-family:inherit;font-size:var(--font-size-sm);background:var(--color-surface);color:var(--color-text);box-sizing:border-box;transition:all var(--transition-fast);text-overflow:ellipsis}.field-input:focus{border-color:var(--color-primary);outline:none;background:var(--color-surface);box-shadow:0 0 0 3px rgba(var(--color-primary-rgb),0.1)}.form-field.locked .field-input,.field-input[readonly],input[readonly].field-input{background:rgba(var(--color-text-muted-rgb),0.6) !important;color:var(--color-text-emphasis) !important;font-weight:500;cursor:not-allowed;border-color:rgba(var(--color-text-muted-rgb),0.6) !important}.form-field.locked label{color:var(--color-text-muted);opacity:0.45}.form-field.locked label::after{content:" 🔒";display:inline-block;margin-left:4px}.search-bar{position:relative;width:100%}.search-bar .search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--color-text-muted);display:flex;align-items:center;pointer-events:none;z-index:1}.search-bar .search-input{width:100%;padding:10px 12px 10px 36px !important;border:1.5px solid var(--color-border) !important;border-radius:var(--radius-md) !important;font-size:var(--font-size-sm) !important;background:var(--color-surface) !important;color:var(--color-text) !important;transition:all var(--transition-fast)}.search-bar .search-input:focus{border-color:var(--color-primary) !important;outline:none}.filter-select-item{padding:8px 12px;border:1.5px solid var(--color-border) !important;border-radius:var(--radius-md) !important;background:var(--color-surface);margin-top:2px;min-height:40px;display:flex;align-items:center;min-width:0;transition:all var(--transition-fast);cursor:pointer;position:relative}.filter-select-item:hover{border-color:var(--color-primary);background:rgba(var(--color-primary-rgb),0.02)}.filter-select-item .filter-select-label{display:none}.filter-select-item .filter-value-text{color:var(--color-text);font-weight:var(--font-weight-normal);font-size:var(--font-size-sm);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.filter-select-item .filter-select-value{display:flex;align-items:center;width:100%;min-width:0}.filter-select-item .arrow{color:var(--color-text-muted);opacity:0.6;font-size:1rem;line-height:1;margin-left:2px;flex-shrink:0}.filter-select-item.locked{background:rgba(var(--color-text-muted-rgb),0.6) !important;color:var(--color-text-emphasis) !important;font-weight:500;cursor:not-allowed !important;border-color:rgba(var(--color-text-muted-rgb),0.6) !important}.filter-select-item.locked .filter-value-text{color:var(--color-text-emphasis) !important}.filter-select-item.locked .arrow{display:none}.add-product-row .filter-select-item{padding:8px 6px 8px 8px;min-height:38px !important;height:38px !important;font-size:13px !important;margin-top:0}.add-product-row .filter-select-item .filter-value-text{font-size:13px;padding-right:4px}.add-product-row .filter-select-item .arrow{font-size:12px;opacity:0.4}.field-input[readonly]{background-color:var(--color-surface-muted) !important;color:var(--color-text-muted) !important;cursor:not-allowed;border-color:rgba(var(--color-border-rgb),0.5) !important}.total-bar{position:fixed;bottom:calc(var(--nav-height) + env(safe-area-inset-bottom,0px));left:0;right:0;background:var(--color-surface);border-top:1px solid var(--color-border);padding:8px var(--spacing-md);z-index:90;transition:background-color var(--transition-normal),border-color var(--transition-normal)}.total-bar .tb-pagination{display:flex;justify-content:center;align-items:center;gap:4px;flex-wrap:wrap;padding-bottom:6px;margin-bottom:6px;border-bottom:1px solid var(--color-border)}.total-bar .tb-pagination button{min-width:30px;height:28px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-fast);padding:0 6px}.total-bar .tb-pagination button:hover{border-color:var(--color-primary);color:var(--color-primary)}.total-bar .tb-pagination button.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.total-bar .tb-pagination button:disabled{opacity:0.4;cursor:not-allowed}.total-bar .tb-pagination .page-info{font-size:var(--font-size-xs);color:var(--color-text-muted);padding:0 4px}.total-bar .tb-row{display:flex;justify-content:space-between;align-items:center;font-size:var(--font-size-xs);line-height:1.6}.total-bar .tb-label{color:var(--color-text-muted)}.total-bar .tb-value{font-weight:var(--font-weight-semibold);color:var(--color-text)}.total-bar .tb-total .tb-value{font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);color:var(--color-primary)}body.has-total-bar .app-main{padding-bottom:120px}@media (min-width:768px){.total-bar{bottom:0;left:var(--sidebar-width);transition:left var(--transition-normal),background-color var(--transition-normal),border-color var(--transition-normal)}.sidebar-collapsed .total-bar,body.sidebar-collapsed .total-bar{left:var(--sidebar-collapsed-width)}}.form-select-field{display:flex;flex-direction:column;gap:6px}.form-select-field label{font-size:var(--font-size-sm);color:var(--color-text);font-weight:var(--font-weight-medium)}.form-select-field label .req{color:#e3342f;margin-left:2px}.fs-input{width:100%;padding:12px 14px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-background,#f1f5f9);color:var(--color-text,#1c2434);font-size:var(--font-size-sm,0.875rem);font-family:var(--font-family,sans-serif);outline:none;transition:border-color .15s;box-sizing:border-box}.fs-input:focus{border-color:var(--color-primary)}.form-select-field .fs-trigger{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-background);color:var(--color-text-muted);font-size:var(--font-size-sm);cursor:pointer;transition:border-color .15s}.form-select-field .fs-trigger.has-value{color:var(--color-text)}.form-select-field .fs-trigger svg{flex-shrink:0;color:var(--color-text-muted)}textarea.fs-input{resize:none;min-height:80px}[data-theme="dark"] .fs-input{background:#24303f;border-color:#3d4d5f;color:#dee4ee}[data-theme="dark"] .fs-input::placeholder{color:#8a99af}[data-theme="dark"] .form-select-field .fs-trigger{background:#24303f;border-color:#3d4d5f;color:#8a99af}[data-theme="dark"] .form-select-field .fs-trigger.has-value{color:#dee4ee}[data-theme="dark"] .form-select-field label{color:#a1aec0}.confirm-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9990;align-items:center;justify-content:center;padding:24px;animation:confirmFadeIn .2s ease}.confirm-overlay.active{display:flex}.confirm-box{background:var(--color-surface);border-radius:var(--radius-lg);padding:28px 24px 20px;max-width:360px;width:100%;text-align:center;box-shadow:var(--shadow-lg);animation:confirmSlideUp .25s cubic-bezier(.4,0,.2,1)}.confirm-icon{width:56px;height:56px;border-radius:var(--radius-full);background:rgba(var(--color-primary-rgb),0.1);color:var(--color-primary);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:1.5rem}.confirm-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text);margin-bottom:8px}.confirm-message{font-size:var(--font-size-sm);color:var(--color-text-muted);line-height:1.5;margin-bottom:24px}.confirm-actions{display:flex;gap:12px}.confirm-btn{flex:1;padding:12px 16px;border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);font-family:var(--font-family);cursor:pointer;transition:opacity var(--transition-fast),transform var(--transition-fast);border:none}.confirm-btn:active{transform:scale(0.97)}.confirm-btn-cancel{background:var(--color-background);color:var(--color-text);border:1px solid var(--color-border)}.confirm-btn-cancel:hover{background:var(--color-border)}.confirm-btn-ok{background:var(--color-primary);color:#fff}.confirm-btn-ok:hover{opacity:0.9}.confirm-btn-danger{background:#dc2626;color:#fff}.confirm-btn-danger:hover{opacity:0.9}@keyframes confirmFadeIn{from{opacity:0}to{opacity:1}}@keyframes confirmSlideUp{from{opacity:0;transform:translateY(20px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media (min-width:768px){body{padding-bottom:0}.app-sidebar{display:flex !important}.app-nav{display:none !important}body.has-sidebar #app-content{margin-left:var(--sidebar-width);transition:margin-left var(--transition-normal)}.app-content{max-width:var(--content-max-width-desktop)}.top-row{flex-direction:column;gap:12px;align-items:stretch}.top-row #stats-container{width:100%;display:flex;flex-direction:column}.top-row #stats-container .stats-row{margin-bottom:0;align-content:stretch}.top-row .revenue-section{width:100%;margin-bottom:0}.stats-row{grid-template-columns:repeat(3,1fr)}body[data-page="orders"] .app-content>div[style*="grid"]{grid-template-columns:repeat(3,1fr) !important}.fab{bottom:var(--spacing-lg)}body.sidebar-collapsed #app-content,html.sidebar-collapsed-init #app-content{margin-left:var(--sidebar-collapsed-width);transition:margin-left var(--transition-normal)}}@media (min-width:1450px){.top-row{flex-direction:row;align-items:stretch}.top-row #stats-container{flex:1;min-width:0;width:auto}.top-row #stats-container .stats-row{flex:1}.top-row .revenue-section{flex:1;width:auto}}@media (min-width:1104px){body.sidebar-collapsed .top-row,html.sidebar-collapsed-init .top-row{flex-direction:row;align-items:stretch}body.sidebar-collapsed .top-row #stats-container,html.sidebar-collapsed-init .top-row #stats-container{flex:1;min-width:0;width:auto}body.sidebar-collapsed .top-row #stats-container .stats-row,html.sidebar-collapsed-init .top-row #stats-container .stats-row{flex:1}body.sidebar-collapsed .top-row .revenue-section,html.sidebar-collapsed-init .top-row .revenue-section{flex:1;width:auto}}