:root{--color-primary: #2563eb;--color-primary-dark: #1d4ed8;--color-secondary: #64748b;--color-success: #10b981;--color-danger: #ef4444;--color-warning: #f59e0b;--color-info: #06b6d4;--color-light: #f8fafc;--color-dark: #1e293b;--color-white: #ffffff;--color-text-primary: #334155;--color-text-secondary: #64748b;--color-background: #f1f5f9;--shadow-sm: 0 2px 6px rgba(0, 0, 0, .05);--shadow-md: 0 4px 12px rgba(0, 0, 0, .08);--shadow-lg: 0 10px 25px rgba(0, 0, 0, .12);--border-radius-sm: 4px;--border-radius-md: 8px;--border-radius-lg: 16px;--spacing-xs: .5rem;--spacing-sm: 1rem;--spacing-md: 1.5rem;--spacing-lg: 2rem;--spacing-xl: 3rem;--font-family: "Inter", system-ui, Avenir, Helvetica, Arial, sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-md: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.5rem;--font-size-xxl: 2.25rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-bold: 700;--line-height: 1.6;--header-height: 64px;--footer-height: 48px;--transition-fast: .2s cubic-bezier(.4, 0, .2, 1);--transition-normal: .3s cubic-bezier(.4, 0, .2, 1);--breakpoint-sm: 640px;--breakpoint-md: 768px;--breakpoint-lg: 1024px;--breakpoint-xl: 1280px;--gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, #3b82f6 100%);--gradient-success: linear-gradient(135deg, var(--color-success) 0%, #34d399 100%);--gradient-danger: linear-gradient(135deg, var(--color-danger) 0%, #f87171 100%);--gradient-warning: linear-gradient(135deg, var(--color-warning) 0%, #fbbf24 100%);--gradient-info: linear-gradient(135deg, var(--color-info) 0%, #22d3ee 100%)}*{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}body{margin:0;padding:0;height:100vh;width:100%;background-color:var(--color-background);font-family:var(--font-family);line-height:var(--line-height);font-weight:var(--font-weight-normal);color:var(--color-text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis:none;text-rendering:optimizeLegibility}h1,h2,h3,h4,h5,h6{margin-top:0;font-weight:var(--font-weight-bold);line-height:1.2}h1{font-size:var(--font-size-xxl)}h2{font-size:var(--font-size-xl)}h3{font-size:var(--font-size-lg)}a{font-weight:var(--font-weight-medium);color:var(--color-primary);text-decoration:none}a:hover{color:var(--color-primary-dark)}button{border-radius:var(--border-radius-sm);border:1px solid transparent;padding:.6em 1.2em;font-size:var(--font-size-md);font-weight:var(--font-weight-medium);font-family:inherit;background-color:var(--color-light);cursor:pointer;transition:border-color var(--transition-fast)}button:hover{border-color:var(--color-primary)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}img{max-width:100%;height:auto}@media (prefers-color-scheme: dark){:root{color:#ffffffde;background-color:#242424}body{background-color:#242424}.card{background-color:#333;box-shadow:var(--shadow-lg)}a:hover{color:#747bff}button{background-color:var(--color-primary-dark)}}@media (max-width: var(--breakpoint-md)){body{height:auto;overflow:auto}}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--spacing-sm)}.flex{display:flex}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.gap-xs{gap:var(--spacing-xs)}.gap-sm{gap:var(--spacing-sm)}.gap-md{gap:var(--spacing-md)}.gap-lg{gap:var(--spacing-lg)}.m-0{margin:0}.mt-xs{margin-top:var(--spacing-xs)}.mt-sm{margin-top:var(--spacing-sm)}.mt-md{margin-top:var(--spacing-md)}.mb-xs{margin-bottom:var(--spacing-xs)}.mb-sm{margin-bottom:var(--spacing-sm)}.mb-md{margin-bottom:var(--spacing-md)}.p-xs{padding:var(--spacing-xs)}.p-sm{padding:var(--spacing-sm)}.p-md{padding:var(--spacing-md)}.text-center{text-align:center}.text-right{text-align:right}.text-primary{color:var(--color-primary)}.text-secondary{color:var(--color-secondary)}.text-success{color:var(--color-success)}.text-danger{color:var(--color-danger)}.text-sm{font-size:var(--font-size-sm)}.text-md{font-size:var(--font-size-md)}.text-lg{font-size:var(--font-size-lg)}.text-xl{font-size:var(--font-size-xl)}.font-bold{font-weight:var(--font-weight-bold)}.font-medium{font-weight:var(--font-weight-medium)}.hidden{display:none}.block{display:block}.inline-block{display:inline-block}.relative{position:relative}.absolute{position:absolute}.w-full{width:100%}.h-full{height:100%}.rounded-sm{border-radius:var(--border-radius-sm)}.rounded-md{border-radius:var(--border-radius-md)}.rounded-lg{border-radius:var(--border-radius-lg)}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}.loading{opacity:.7;pointer-events:none}.disabled{opacity:.5;pointer-events:none;cursor:not-allowed}.card{background-color:var(--color-white);border-radius:var(--border-radius-md);box-shadow:var(--shadow-md);padding:var(--spacing-md);margin-bottom:var(--spacing-md);transition:all var(--transition-normal)}.card-title{margin-top:0;margin-bottom:var(--spacing-md);color:var(--color-text-primary);font-size:var(--font-size-xl);text-align:center}.card-header{display:flex;flex-direction:column;margin-bottom:var(--spacing-md);border-bottom:1px solid #eee;padding-bottom:var(--spacing-sm)}.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}.grid{display:grid;gap:var(--spacing-sm)}.grid-cols-1{grid-template-columns:1fr}.grid-cols-2{grid-template-columns:repeat(2,1fr)}.grid-cols-3{grid-template-columns:repeat(3,1fr)}.grid-cols-auto{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.stat-item{display:flex;flex-direction:column;align-items:center;padding:var(--spacing-sm);border-radius:var(--border-radius-sm);background-color:var(--color-light);transition:transform var(--transition-fast)}.stat-item:hover{transform:translateY(-5px)}.stat-value{font-size:var(--font-size-xxl);font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-xs);color:var(--color-primary)}.stat-label{font-size:var(--font-size-sm);color:var(--color-text-secondary);text-align:center}.btn{padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-sm);border:none;cursor:pointer;font-weight:var(--font-weight-medium);transition:background-color var(--transition-fast)}.btn-primary{background-color:var(--color-primary);color:var(--color-white)}.btn-primary:hover{background-color:var(--color-primary-dark)}.btn-secondary{background-color:var(--color-secondary);color:var(--color-white)}.btn-secondary:hover{background-color:#5a6268}.btn-success{background-color:var(--color-success);color:var(--color-white)}.btn-success:hover{background-color:#218838}.btn-danger{background-color:var(--color-danger);color:var(--color-white)}.btn-danger:hover{background-color:#c82333}.loading-state{text-align:center;padding:var(--spacing-xl);color:var(--color-secondary)}.error-state{text-align:center;padding:var(--spacing-xl);color:var(--color-danger)}.error-container{display:flex;flex-direction:column;align-items:center;background-color:#dc35451a;border-radius:var(--border-radius-md);padding:var(--spacing-sm);margin-top:var(--spacing-sm);gap:var(--spacing-xs)}.error-icon{color:var(--color-danger);font-size:var(--font-size-lg);margin-right:var(--spacing-xs)}.error-message{color:var(--color-danger);font-size:var(--font-size-sm)}.retry-button{padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--color-primary);color:var(--color-white);border:none;border-radius:var(--border-radius-sm);cursor:pointer;transition:background-color var(--transition-fast)}.retry-button:hover{background-color:var(--color-primary-dark)}@media (max-width: var(--breakpoint-md)){.grid-cols-2,.grid-cols-3{grid-template-columns:1fr}.stat-item{margin-bottom:var(--spacing-sm)}}.app-container{display:flex;flex-direction:column;min-height:100vh;width:100%;background-color:var(--color-background)}.app-header{display:flex;align-items:center;justify-content:center;background-color:var(--color-primary);color:var(--color-white);padding:var(--spacing-sm) var(--spacing-lg);height:var(--header-height);box-shadow:var(--shadow-md);z-index:10}.app-header h1{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);margin:0}.app-content{flex:1;padding:var(--spacing-lg);width:100%;margin:0 auto;overflow-y:auto;display:flex;flex-direction:column;gap:var(--spacing-lg)}.app-footer{background-color:var(--color-dark);color:var(--color-white);text-align:center;padding:var(--spacing-md);height:var(--footer-height);display:flex;flex-direction:column;align-items:center;justify-content:center}.app-footer a{color:var(--color-white);text-decoration:none;font-size:var(--font-size-sm)}@media (max-width: var(--breakpoint-md)){.app-content{padding:var(--spacing-sm);gap:var(--spacing-md)}.app-header{padding:var(--spacing-sm)}}body{background:linear-gradient(135deg,var(--color-background) 0%,#e8eef5 100%);min-height:100vh;position:relative;overflow-x:hidden}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(circle at 10% 10%,rgba(0,102,204,.03) 0%,transparent 20%),radial-gradient(circle at 90% 90%,rgba(23,162,184,.03) 0%,transparent 20%),radial-gradient(circle at 50% 50%,rgba(0,0,0,.01) 0%,transparent 100%);z-index:-1}h1,h2,h3,h4,h5,h6{letter-spacing:-.02em}button,a.button,input[type=submit],input[type=button]{transition:all .3s ease;position:relative;overflow:hidden}button:after,a.button:after,input[type=submit]:after,input[type=button]:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(#fff3,#fff0);opacity:0;transition:opacity .3s}button:hover:after,a.button:hover:after,input[type=submit]:hover:after,input[type=button]:hover:after{opacity:1}.card{transition:all .3s ease;border:1px solid rgba(0,0,0,.05);overflow:hidden}.card:hover{transform:translateY(-5px);box-shadow:0 15px 30px #0000001a}.loading-shimmer{background:linear-gradient(90deg,#fff0,#fff3,#fff0);background-size:200% 100%;animation:shimmer 1.5s infinite}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@media (prefers-color-scheme: dark){:root{color:#ffffffde;background-color:#1a1a2e}body{background:linear-gradient(135deg,#1a1a2e,#16213e)}body:before{background-image:radial-gradient(circle at 10% 10%,rgba(0,102,204,.05) 0%,transparent 20%),radial-gradient(circle at 90% 90%,rgba(23,162,184,.05) 0%,transparent 20%),radial-gradient(circle at 50% 50%,rgba(255,255,255,.01) 0%,transparent 100%)}.card{background-color:#242442;box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.05)}a:hover{color:#747bff}button{background-color:var(--color-primary-dark)}}@media (max-width: var(--breakpoint-md)){body{height:auto;overflow:auto}.card:hover{transform:none}}.stats-card{background:linear-gradient(135deg,var(--color-white) 0%,#f8f9fa 100%);border-radius:var(--border-radius-lg);box-shadow:0 10px 20px #00000014,0 6px 6px #0000000d;padding:var(--spacing-sm);transition:all var(--transition-normal);position:relative;overflow:hidden;border:1px solid rgba(0,0,0,.05)}.stats-card:hover{box-shadow:0 15px 30px #0000001a,0 8px 10px #00000012;transform:translateY(-5px)}.stats-card h2{padding-bottom:var(--spacing-sm);color:var(--color-text-primary);font-size:var(--font-size-xl);text-align:center;position:relative;margin-bottom:var(--spacing-sm);font-weight:var(--font-weight-bold)}.stats-card h2:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:80px;height:3px;background:linear-gradient(90deg,var(--color-primary),var(--color-info));border-radius:3px}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-sm)}.stats-card .stat-item{display:flex;flex-direction:column;align-items:center;padding:var(--spacing-sm);border-radius:var(--border-radius-md);background:linear-gradient(145deg,#fff,#f5f7fa);box-shadow:0 4px 8px #0000000d;transition:all var(--transition-normal);border:1px solid rgba(0,0,0,.03);position:relative;overflow:hidden;min-height:150px;justify-content:center}.stats-card .stat-item:before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,var(--color-primary),var(--color-info));opacity:.7}.stats-card .stat-item:hover{transform:translateY(-5px);box-shadow:0 8px 15px #0000001a}.stats-card .stat-value{font-size:var(--font-size-xxl);font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-xs);background:linear-gradient(90deg,var(--color-primary),var(--color-info));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;transition:all var(--transition-normal)}.stats-card .stat-label{font-size:var(--font-size-sm);color:var(--color-text-secondary);text-align:center;font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.5px}.current-occupancy .stat-value{background:linear-gradient(90deg,var(--color-success),#4caf50);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.stat-item.current-occupancy.over-limit .stat-value{background:linear-gradient(90deg,var(--color-danger),#ff5252);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:pulse 1.5s infinite}.stat-item.current-occupancy.over-limit:before{background:linear-gradient(90deg,var(--color-danger),#ff5252);opacity:.9}.max-occupancy{font-size:var(--font-size-xs);color:var(--color-text-secondary);margin-top:var(--spacing-xs);text-align:center}.occupancy-percentage{font-size:var(--font-size-md);font-weight:var(--font-weight-bold);color:var(--color-success);margin-top:var(--spacing-xs);text-align:center;border-radius:var(--border-radius-sm);padding:2px 8px;background-color:#4caf501a;display:inline-block}.occupancy-percentage.over-limit{color:var(--color-danger);background-color:#ff52521a;animation:pulse 1.5s infinite}.occupancy-warning{display:flex;align-items:center;justify-content:center;margin-top:var(--spacing-sm);padding:var(--spacing-xs) var(--spacing-sm);background-color:#ff52521a;border-radius:var(--border-radius-sm);color:var(--color-danger);font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);animation:pulse 1.5s infinite;width:100%;text-align:center;box-shadow:0 2px 5px #ff525233}.occupancy-warning svg{margin-right:var(--spacing-xs);flex-shrink:0}@keyframes pulse{0%{opacity:1}50%{opacity:.7}to{opacity:1}}.stats-card.updating .stat-item{opacity:.8}.stats-card.updating .stat-value{transition:all var(--transition-normal)}.stats-card.loading,.stats-card.error{text-align:center;padding:var(--spacing-xl);color:var(--color-secondary)}.stats-card.error{color:var(--color-danger)}@media (max-width: var(--breakpoint-md)){.stats-grid{grid-template-columns:1fr}.stats-card .stat-item{margin-bottom:var(--spacing-sm);min-height:auto}}.card-header{display:flex;flex-direction:column;margin-bottom:var(--spacing-sm);position:relative}.stats-card .stat-value.updated{animation:pulse .6s ease-in-out}html,body{overflow-y:auto!important;height:auto!important;min-height:100vh}.camera-stats-container{background:linear-gradient(135deg,var(--color-white) 0%,#f8f9fa 100%);border-radius:var(--border-radius-lg);box-shadow:0 10px 20px #00000014,0 6px 6px #0000000d;padding:var(--spacing-sm);max-height:none;position:relative;overflow:visible;border:1px solid rgba(0,0,0,.05);display:flex;flex-direction:column;margin-bottom:var(--spacing-xl)}.camera-stats-container h2{color:var(--color-text-primary);margin-top:0;margin-bottom:var(--spacing-sm);font-size:var(--font-size-xl);text-align:center;position:relative;font-weight:var(--font-weight-bold)}.camera-stats-container h2:after{content:"";position:absolute;bottom:-8px;left:50%;transform:translate(-50%);width:80px;height:3px;background:linear-gradient(90deg,var(--color-primary),var(--color-info));border-radius:3px}.camera-stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--spacing-sm);width:100%;padding:var(--spacing-xs);max-height:none;overflow-y:visible}.camera-card{animation:fadeIn .3s ease-in-out;background:linear-gradient(145deg,#fff,#f5f7fa);border-radius:var(--border-radius-sm);padding:var(--spacing-sm);box-shadow:0 4px 8px #0000000d;transition:all var(--transition-normal);border:1px solid rgba(0,0,0,.03);position:relative;overflow:hidden;height:auto;display:flex;flex-direction:column}.camera-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,var(--color-primary),var(--color-info));opacity:.7}.camera-card:hover{transform:translateY(-5px);box-shadow:0 8px 15px #0000001a}.camera-header{margin-bottom:var(--spacing-sm);border-bottom:1px solid rgba(0,0,0,.05);padding-bottom:var(--spacing-sm);position:relative}.camera-header h3{margin:0 0 var(--spacing-xs) 0;color:var(--color-text-primary);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold)}.camera-ip{font-size:var(--font-size-xs);margin-left:var(--spacing-sm);color:var(--color-text-secondary);font-weight:var(--font-weight-medium);background:#00000008;padding:2px 8px;border-radius:12px;display:inline-block}.camera-stats{display:flex;justify-content:space-around;margin-bottom:var(--spacing-sm);padding:var(--spacing-xs);background:#ffffffb3;border-radius:var(--border-radius-sm);box-shadow:inset 0 0 5px #00000008}.camera-stat{text-align:center;flex:1;padding:var(--spacing-xs);border-radius:var(--border-radius-sm);transition:all var(--transition-normal)}.camera-stat:hover{background:#ffffffe6;box-shadow:0 2px 5px #0000000d}.camera-stat .stat-value{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);background:linear-gradient(90deg,var(--color-primary),var(--color-info));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;transition:all var(--transition-normal);display:inline-block}.camera-stat:first-child .stat-value{background:linear-gradient(90deg,var(--color-success),#4caf50);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.camera-stat:last-child .stat-value{background:linear-gradient(90deg,var(--color-danger),#ff5252);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.camera-stat .stat-label{font-size:var(--font-size-sm);color:var(--color-secondary);margin-top:var(--spacing-xs);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.5px}.camera-footer{font-size:var(--font-size-xs);color:var(--color-secondary);text-align:right;margin-top:var(--spacing-xs);border-top:1px solid rgba(0,0,0,.05);padding-top:var(--spacing-xs)}.camera-icon{margin-right:var(--spacing-xs);vertical-align:middle;color:var(--color-primary);font-size:.9em}.camera-name{font-weight:var(--font-weight-bold);color:var(--color-primary);background:linear-gradient(to right,var(--color-info),var(--color-primary));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;padding:2px 0;letter-spacing:.5px;text-shadow:0 1px 1px rgba(0,0,0,.05);position:relative;display:inline-block}.camera-name:after{content:"";position:absolute;width:0;height:2px;bottom:-2px;left:0;background-color:var(--color-primary);transition:width var(--transition-normal)}.camera-card:hover .camera-name:after{width:100%}.error-icon{margin-right:.5rem;vertical-align:middle;color:var(--color-danger);font-size:1.5em}.error-banner{padding:10px;width:100%;background:#dc35451a;border-radius:var(--border-radius-md);margin-bottom:var(--spacing-sm);display:flex;align-items:center;border-left:3px solid var(--color-danger)}.camera-stats-container.updating .camera-card{opacity:.8}.camera-stats-container.updating .stat-value{transition:all var(--transition-normal)}.update-indicator{position:absolute;bottom:0;left:0;height:3px;width:100%;background:linear-gradient(to right,transparent,var(--color-primary),transparent);animation:loading-animation 1.5s infinite ease-in-out}@keyframes loading-animation{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.camera-stat .stat-value.updated{animation:pulse .6s ease-in-out}.camera-stats-container.loading,.camera-stats-container.error,.camera-stats-container.empty{text-align:center;padding:var(--spacing-xl);color:var(--color-secondary);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px}.camera-stats-container.error{color:var(--color-danger)}.camera-stats-container.error button{background:linear-gradient(90deg,var(--color-primary),var(--color-primary-dark));color:#fff;border:none;padding:10px 20px;border-radius:var(--border-radius-md);margin-top:var(--spacing-sm);cursor:pointer;transition:all .3s;font-weight:var(--font-weight-medium);box-shadow:0 4px 6px #0000001a}.camera-stats-container.error button:hover{background:linear-gradient(90deg,var(--color-primary-dark),var(--color-primary));transform:translateY(-2px);box-shadow:0 6px 8px #00000026}@media (max-width: 1400px){.camera-stats-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width: 1200px){.camera-stats-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: var(--breakpoint-md)){.camera-stats-container{max-height:none;overflow-y:visible;padding:var(--spacing-xs)}.camera-stats-grid{grid-template-columns:1fr;max-height:none;overflow-y:visible;padding:var(--spacing-xs);gap:var(--spacing-xs)}.camera-card{margin-bottom:var(--spacing-md)}.camera-stats-container h2{font-size:calc(var(--font-size-xl) * .9);margin-bottom:var(--spacing-xs)}.camera-stats-container h2:after{width:60px}.camera-header h3{font-size:var(--font-size-md)}.camera-stats{flex-direction:row;flex-wrap:wrap}.camera-stat{padding:var(--spacing-xxs);min-width:80px}.camera-stat .stat-value{font-size:var(--font-size-lg)}.camera-stat .stat-label{font-size:var(--font-size-xs)}.carousel-controls{flex-wrap:wrap}.carousel-indicators{order:3;width:100%;justify-content:center;margin-top:var(--spacing-xs)}.carousel-button{width:36px;height:36px}}@media (max-width: var(--breakpoint-sm)){.camera-stats-container{padding:var(--spacing-xxs);border-radius:var(--border-radius-md)}.camera-stats-grid{grid-template-columns:1fr;gap:var(--spacing-xxs);padding:var(--spacing-xxs)}.camera-card{padding:var(--spacing-xs);margin-bottom:var(--spacing-sm);width:100%}.camera-stats-container h2{font-size:calc(var(--font-size-lg) * 1.1)}.camera-header{margin-bottom:var(--spacing-xs);padding-bottom:var(--spacing-xs)}.camera-header h3{font-size:var(--font-size-md);word-break:break-word}.camera-ip{font-size:calc(var(--font-size-xs) * .9);margin-left:0;margin-top:var(--spacing-xxs);display:inline-block}.camera-stats{flex-direction:column;padding:var(--spacing-xxs);gap:var(--spacing-xxs)}.camera-stat{width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;padding:var(--spacing-xxs)}.camera-stat .stat-value{font-size:var(--font-size-md);margin-left:auto}.camera-stat .stat-label{font-size:calc(var(--font-size-xs) * .9)}.carousel-button{width:32px;height:32px}.carousel-indicator{width:8px;height:8px}.error-container{padding:var(--spacing-xs)}.retry-button{padding:6px 12px;font-size:.8rem}}@media (min-width: calc(var(--breakpoint-sm) + 1px)) and (max-width: var(--breakpoint-md)){.camera-stats-grid{grid-template-columns:1fr;gap:var(--spacing-sm)}.camera-stat .stat-value{font-size:var(--font-size-lg)}.camera-card{margin-bottom:var(--spacing-sm);max-width:100%}}@media (min-width: calc(var(--breakpoint-lg) + 1px)){.camera-stats-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));max-height:none;overflow-y:visible}.camera-card{transition:all var(--transition-normal)}.camera-card:hover{transform:translateY(-5px) scale(1.02)}}@media (max-height: 500px) and (orientation: landscape){.camera-stats-container{max-height:none;overflow-y:visible}.camera-stats-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));max-height:none;overflow-y:visible}.camera-card{padding:var(--spacing-xs);height:auto}.camera-stats{flex-direction:row}.camera-stat{padding:var(--spacing-xxs)}}@media (max-width: 768px){.camera-stats-container{overflow-y:visible;max-height:none}.camera-stats-grid{display:flex;flex-direction:column;gap:var(--spacing-sm);max-height:none;overflow-y:visible}.camera-card{width:100%;margin-bottom:var(--spacing-sm);flex-shrink:0}}@media (max-width: var(--breakpoint-md)){.carousel-controls{flex-wrap:wrap}.carousel-indicators{order:3;width:100%;justify-content:center;margin-top:var(--spacing-xs)}}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.camera-card{box-shadow:0 2px 4px #0000000d}.camera-card:hover{box-shadow:0 4px 8px #0000001a}}.error-container{display:flex;flex-direction:column;align-items:center;background-color:#ff00000d;border-radius:var(--border-radius-md);padding:var(--spacing-sm);margin-top:var(--spacing-sm);gap:8px;border-left:3px solid var(--color-danger)}.error-icon{color:var(--color-danger);font-size:1.2rem;margin-right:5px}.error-message{color:var(--color-danger);font-size:.9rem;font-weight:var(--font-weight-medium)}.last-update-time{color:var(--color-text-secondary);font-size:var(--font-size-xs);font-style:italic;text-align:center;margin-top:var(--spacing-sm);padding-top:var(--spacing-xs);border-top:1px dashed rgba(0,0,0,.1)}.retry-button{background:linear-gradient(90deg,var(--color-primary),var(--color-info));color:#fff;border:none;border-radius:var(--border-radius-md);padding:8px 16px;font-size:.9rem;cursor:pointer;transition:all .3s;font-weight:var(--font-weight-medium);box-shadow:0 4px 6px #0000001a}.retry-button:hover{background:linear-gradient(90deg,var(--color-info),var(--color-primary));transform:translateY(-2px);box-shadow:0 6px 8px #00000026}.card-header{display:flex;flex-direction:column;margin-bottom:15px;position:relative}@keyframes shine{0%{background-position:-100px}40%,to{background-position:300px}}.camera-card:hover .camera-name{background:linear-gradient(to right,var(--color-info),var(--color-primary),var(--color-info));background-size:200px 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shine 2s infinite linear}.carousel-info{font-size:var(--font-size-sm);color:var(--color-text-secondary);text-align:center;margin-top:var(--spacing-xs);font-style:italic}.carousel-controls{display:flex;justify-content:center;align-items:center;margin-top:var(--spacing-xs);padding:var(--spacing-xs) 0;gap:var(--spacing-sm)}.carousel-button{background:linear-gradient(145deg,#fff,#f5f7fa);border:none;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 8px #0000001a;color:var(--color-primary);transition:all var(--transition-normal)}.carousel-button:hover{transform:translateY(-2px);box-shadow:0 6px 12px #00000026;color:var(--color-info)}.carousel-button:active{transform:translateY(0);box-shadow:0 2px 4px #0000001a}.carousel-indicators{display:flex;gap:var(--spacing-xs)}.carousel-indicator{width:10px;height:10px;border-radius:50%;background-color:#0000001a;border:none;cursor:pointer;transition:all var(--transition-normal)}.carousel-indicator.active{background:linear-gradient(90deg,var(--color-primary),var(--color-info));transform:scale(1.2)}.carousel-indicator:hover{background-color:#0003}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse-indicator{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}.carousel-indicator.active{animation:pulse-indicator 2s infinite}.carousel-auto-info{font-size:var(--font-size-xs);color:var(--color-text-secondary);text-align:center;margin-top:var(--spacing-xs);background:#00000008;padding:4px 8px;border-radius:12px;display:inline-block;margin-left:var(--spacing-sm)}@keyframes countdown{0%{width:100%}to{width:0%}}.carousel-progress{height:3px;background:linear-gradient(90deg,var(--color-primary),var(--color-info));margin-top:var(--spacing-xs);border-radius:3px;animation:countdown 10s linear;animation-play-state:running;width:100%}.carousel-button.auto-rotate{font-size:1rem;background:linear-gradient(145deg,#f5f7fa,#fff)}.carousel-button.auto-rotate.active{background:linear-gradient(90deg,var(--color-primary),var(--color-info));color:#fff}.carousel-button.auto-rotate:hover{background:linear-gradient(145deg,#f0f2f5,#fff)}.carousel-button.auto-rotate.active:hover{background:linear-gradient(90deg,var(--color-info),var(--color-primary))}@media (min-width: 769px) and (max-width: 1200px){.camera-stats-container{padding-bottom:var(--spacing-xl);margin-bottom:var(--spacing-xl)}.camera-stats-grid{grid-auto-rows:auto;align-items:start;grid-template-rows:auto;padding-bottom:var(--spacing-lg)}.camera-card{margin-bottom:var(--spacing-md);height:auto}}@media (min-width: 769px) and (max-width: 1200px){body{overflow-y:auto!important;padding-bottom:var(--spacing-xl)}.camera-stats-container{margin-bottom:var(--spacing-xl);min-height:auto}#root,main,.app-container,.content-container{min-height:auto!important;height:auto!important;overflow:visible!important}}