/* Stiluri comune pentru paginile LIVE */
      /* === CSS RESET & MODERN BASE === */
      *, *::before, *::after {
        box-sizing: border-box;
      }
      
      :root {
        /* Design System Colors */
        --primary-blue: #003366;
        --accent-blue: #317EFB;
        --light-blue: #E3F2FD;
        --success-green: #4CAF50;
        --warning-orange: #FF9800;
        --error-red: #F44336;
        
        /* Neutral Colors */
        --white: #ffffff;
        --light-gray: #f8f9fa;
        --medium-gray: #6c757d;
        --dark-gray: #212529;
        --border-gray: #dee2e6;
        
        /* Typography */
        --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
        
        /* Spacing Scale */
        --space-xs: 0.25rem;
        --space-sm: 0.5rem;
        --space-md: 1rem;
        --space-lg: 1.5rem;
        --space-xl: 2rem;
        --space-2xl: 3rem;
        
        /* Border Radius */
        --radius-sm: 1px;
        --radius-md: 1px;
        --radius-lg: 1px;
        --radius-xl: 1px;
        
        /* Shadows */
        --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
        --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
        
        /* Transitions */
        --transition-fast: 150ms ease-in-out;
        --transition-normal: 250ms ease-in-out;
        --transition-slow: 350ms ease-in-out;
        
        /* Z-index Scale */
        --z-background: -1;
        --z-normal: 0;
        --z-tooltip: 10;
        --z-modal: 100;
        --z-notification: 1000;
      }
      
      /* Modern Body Styles */
      html {
        min-width: 800px;
        overflow-x: auto;
      }
      
      body {
        margin: 0;
        padding: 0;
        font-family: var(--font-primary);
        background-color: var(--white);
        color: var(--dark-gray);
        line-height: 1.6;
        position: relative;
        scroll-behavior: smooth;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        min-width: 800px;
        overscroll-behavior-y: contain;
        -webkit-tap-highlight-color: transparent;
      }
      
      /* Subtle Background Effect */
      body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: 
          radial-gradient(circle at 20% 80%, rgba(49, 126, 251, 0.03) 0%, transparent 50%),
          radial-gradient(circle at 80% 20%, rgba(0, 51, 102, 0.03) 0%, transparent 50%);
        pointer-events: none;
        z-index: var(--z-background);
      }
      
      /* === FIXED LAYOUT DESIGN 800px - No Responsive, Only Zoom === */
      
      .mainwrapper {
        width: 800px;
        margin: 0 auto;
        padding: var(--space-sm);
        background: transparent;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        padding-top: calc(var(--space-sm) + max(0px, env(safe-area-inset-top)));
        padding-right: calc(var(--space-sm) + max(0px, env(safe-area-inset-right)));
        padding-bottom: calc(var(--space-sm) + max(8px, env(safe-area-inset-bottom)));
        padding-left: calc(var(--space-sm) + max(0px, env(safe-area-inset-left)));
      }

      .webcam-section {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 249, 250, 0.96) 100%);
        box-shadow: 0 10px 28px rgba(0, 51, 102, 0.08);
        border-radius: 14px;
      }

      body.app-standalone-mode .mainwrapper {
        padding-top: max(0px, env(safe-area-inset-top));
        padding-right: max(0px, env(safe-area-inset-right));
        padding-bottom: max(8px, env(safe-area-inset-bottom));
        padding-left: max(0px, env(safe-area-inset-left));
      }

      body.app-standalone-mode .webcam-section {
        box-shadow: none;
        border-radius: 0;
      }

      body.app-standalone-mode .header {
        margin-bottom: var(--space-sm);
      }

      body.app-standalone-mode .install-app-nav-slot {
        display: none;
      }
      
      /* Modern Header */
      .header {
        width: 100%;
        text-align: center;
        padding: var(--space-sm) 0;
        background: transparent;
        margin-bottom: var(--space-md);
        position: relative;
      }
      
      .header figure {
        margin: 0;
        padding: 0;
        position: relative;
        display: inline-block;
      }
      
      .header img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
        border-radius: var(--radius-md);
        transition: var(--transition-normal);
        filter: drop-shadow(var(--shadow-sm));
      }
      
      .header img:hover {
        transform: translateY(-2px);
        filter: drop-shadow(var(--shadow-md));
      }
      
      /* Enhanced Title Styling */
      .webcam-live-info {
        text-align: center;
        margin: var(--space-xl) auto;
        font-size: clamp(1rem, 2.5vw, 1.25rem);
        font-weight: 600;
        color: var(--primary-blue);
        padding: 0 var(--space-md);
        max-width: 800px;
        line-height: 1.4;
        position: relative;
      }
      
      .webcam-live-info::after {
        content: '';
        position: absolute;
        bottom: -var(--space-sm);
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 3px;
        background: linear-gradient(90deg, var(--accent-blue), var(--primary-blue));
        border-radius: var(--radius-sm);
      }
      
      /* Styling pentru titlu în container */
      .webcam-title-container .webcam-live-info {
        text-align: left;
        margin: 0;
        padding: 0;
        max-width: none;
        font-size: clamp(1rem, 2.2vw, 1.1rem);
        line-height: 1.5;
      }
      
      .webcam-title-container .webcam-live-info::after {
        display: none;
      }
      
      /* Styling pentru titlu integrat în containerul webcam */
      .webcam-title-integrated {
        margin-top: 0;
        padding-top: var(--space-sm);
        border-top: none;
      }
      
      .webcam-title-integrated .webcam-live-info {
        text-align: left;
        margin: 0;
        padding: 0;
        max-width: none;
        font-size: clamp(0.9rem, 2vw, 1rem);
        line-height: 1.77;
        color: var(--primary-blue);
        font-weight: 600;
      }
      
      .webcam-title-integrated .webcam-live-info::after {
        display: none;
      }
      
      /* Link furnizor cu efect similar footer */
      .webcam-live-info a.furnizor-link {
        color: var(--primary-blue);
        text-decoration: none;
        font-weight: 600;
        transition: var(--transition-fast);
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
      }

      .webcam-live-info a.furnizor-link.no-transform {
        -webkit-transform: none !important;
        transform: none !important;
      }
      
      .webcam-live-info a.furnizor-link:hover {
        color: var(--accent-blue);
      }
      
      .webcam-live-info a.furnizor-link::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 2px;
        background: var(--accent-blue);
        transition: var(--transition-fast);
      }
      
      .webcam-live-info a.furnizor-link:hover::after {
        width: calc(100% - 30px);
      }
      
      .webcam-live-info a.furnizor-link svg {
        opacity: 0.7;
        transition: all var(--transition-fast);
        flex-shrink: 0;
      }
      
      .webcam-live-info a.furnizor-link:hover svg {
        opacity: 1;
        transform: translate(2px, -2px);
      }
      
      /* Forțăm container-ul să nu se transforme când link-ul este activ */
      .webcam-container:has(.furnizor-link:hover),
      .webcam-container:has(.furnizor-link:active),
      .interactive-element:has(.furnizor-link:hover),
      .interactive-element:has(.furnizor-link:active) {
        transform: none !important;
      }
      
      /* Anulăm efectul de scale de la interactive-element pentru link furnizor */
      .furnizor-link:active {
        transform: none !important;
      }
      
      .interactive-element:active .furnizor-link,
      .interactive-element:active .furnizor-link svg {
        transform: none !important;
      }
      
      /* === WEBCAM SECTION LAYOUT FIXED 800px === */
      
      .webcam-section {
        display: flex;
        flex-direction: row;
        gap: 0;
        width: 100%;
        margin: 0 auto;
        align-items: flex-start;
      }
      
      /* === CONTAINER COMUN PENTRU WEBCAM ȘI NAV-BAR === */
      
      .webcam-nav-wrapper {
        display: flex;
        flex-direction: row;
        gap: 0;
        width: 800px;
        margin: 0 auto;
        background: var(--white);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-lg);
        border: 0px solid var(--border-gray);
        overflow: hidden;
        position: relative;
      }
      
      .webcam-container {
        text-align: left;
        width: 650px;
        position: relative;
        padding: 0.5rem 1.25rem 0.5rem 1.25rem;
        background: var(--white);
        border-radius: 0;
        box-shadow: none;
        border: none;
        overflow: hidden;
        display: flex;
        flex-direction: column;
      }
      
      /* Container pentru titlul webcam - ELIMINAT din design */
      
      /* === WRAPPER EXACT PENTRU IMAGINE - 640x480px === */
      .webcam-image-wrapper {
        position: relative;
        width: 640px;
        height: 480px;
        margin: 0;
        padding: 0;
        overflow: hidden;
        display: inline-block;
        box-sizing: border-box;
        border: none;
        box-shadow: none;
        line-height: 0;
        vertical-align: top;
      }
      
      /* Enhanced Webcam Image */
      img[name="CamPic"] {
        width: 640px;
        height: 480px;
        display: block;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        position: relative;
        z-index: 1;
        background: var(--light-gray);
        object-fit: contain;
        object-position: left center;
        line-height: 0;
      }

      /* Reglaj optic specific camerei Piața Sfatului - Intrare. */
      img[name="CamPic"].camera-frame--intrare {
        transform: scaleX(1.1);
        transform-origin: center center;
      }

      /* Tâmpa: cadrul complet umple 640x480 fără decupare pe nicio latură. */
      img[name="CamPic"].camera-frame--tampa {
        object-fit: fill;
      }

      .camera-maintenance-overlay {
        position: absolute;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 24px;
        background: linear-gradient(180deg, rgba(0, 20, 44, 0.58), rgba(0, 40, 86, 0.68));
        color: #fff;
        text-align: center;
        z-index: 3;
      }

      .camera-maintenance-overlay.visible {
        display: flex;
      }

      .camera-maintenance-overlay .maintenance-card {
        max-width: 420px;
        padding: 18px 20px;
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.08);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
      }

      .camera-maintenance-overlay strong {
        display: block;
        margin-bottom: 8px;
        font-size: 1.05rem;
        letter-spacing: 0.02em;
      }

      .camera-maintenance-overlay span {
        display: block;
        font-size: 0.94rem;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.92);
      }
      
      img[name="CamPic"]:hover {
        box-shadow: var(--shadow-xl);
      }
      
      /* === EFECTE DE TRANZIȚIE PENTRU WEBCAM - APLICAT PE WRAPPER EXACT === */
      
      /* Efect de tranziție pentru loading întârziat - pe wrapper-ul exact al imaginii */
      .webcam-image-wrapper.loading-transition {
          position: relative;
          overflow: hidden;
          width: 640px;
          height: 480px;
      }

      .webcam-image-wrapper.loading-transition::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: 
              linear-gradient(
                  90deg,
                  transparent 0%,
                  transparent 49%,
                  rgba(255, 255, 255, 0.8) 49.8%,
                  rgba(255, 255, 255, 1) 50%,
                  rgba(255, 255, 255, 0.8) 50.2%,
                  transparent 51%,
                  transparent 100%
              );
          background-size: 200% 100%;
          background-position: -100% 0;
          animation: page-flip-shimmer 2s ease-in-out infinite;
          opacity: 0;
          pointer-events: none;
          z-index: 2;
      }

      .webcam-image-wrapper.loading-transition::after {
          content: 'LINX';
          position: absolute;
          bottom: 15px;
          left: 20px;
          width: auto;
          height: auto;
          opacity: 0;
          pointer-events: none;
          z-index: 3;
          
          /* Stilizare text LINX în colțul stânga-jos - subtil */
          display: block;
          font-family: Arial, Helvetica, sans-serif;
            font-size: 42px;
          font-weight: 500;
            color: rgba(255, 255, 255, 0.72);
          letter-spacing: 5px;
          text-transform: uppercase;
          text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
          line-height: 1;
      }

      .webcam-image-wrapper.loading-transition.active::before {
            opacity: 0.23;
      }

      .webcam-image-wrapper.loading-transition.active::after {
            opacity: 0.31;
          animation: linx-elegant 2s ease-in-out infinite;
      }

      /* Animația pentru linie luminoasă - STÂNGA LA DREAPTA */
      @keyframes page-flip-shimmer {
          0% {
              background-position: 100% 0;
          }
          100% {
              background-position: -100% 0;
          }
      }

      /* Animație elegantă pentru textul LINX */
      @keyframes linx-elegant {
          0% {
          opacity: 0.26;
              transform: scale(0.98);
          }
          50% {
          opacity: 0.33;
              transform: scale(1.02);
          }
          100% {
          opacity: 0.26;
              transform: scale(0.98);
          }
      }

        /* Efect subtil de opacity pentru imaginea în loading - DEZACTIVAT */
        /* Indicator vizual pentru încărcare lentă */
      .slow-loading-indicator {
          position: absolute;
          bottom: 10px;
          left: 50%;
          transform: translateX(-50%);
          background: rgba(0, 0, 0, 0.7);
          color: white;
          padding: 5px 12px;
          border-radius: 15px;
          font-size: 11px;
          font-family: Arial, sans-serif;
          opacity: 0;
          z-index: 10;
          pointer-events: none;
      }

      .slow-loading-indicator.visible {
          opacity: 1;
      }

      .linx-promo-overlay {
        position: absolute;
        left: 20px;
        bottom: 15px;
        z-index: 6;
        opacity: 0;
        visibility: hidden;
        transform: translateY(4px);
        transition: opacity 1s ease-in-out, transform 1s ease-in-out, visibility 1s ease-in-out;
      }

      .linx-promo-overlay.visible {
        opacity: 0.5;
        visibility: visible;
        transform: translateY(0);
      }

      .linx-promo-overlay a {
        display: inline-block;
        text-decoration: none;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 42px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.72);
        letter-spacing: 5px;
        text-transform: uppercase;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
        line-height: 1;
      }

      
      body.exo-font-ready .webcam-image-wrapper.loading-transition::after,
      body.exo-font-ready .linx-promo-overlay a {
        font-family: 'Exo 2', Arial, Helvetica, sans-serif;
      }
      
      /* Loading State for Webcam */
      img[name="CamPic"]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, 
          transparent, 
          rgba(255, 255, 255, 0.4), 
          transparent
        );
        animation: shimmer 2s infinite;
        z-index: 1;
      }
      
      @keyframes shimmer {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(100%); }
      }
      
      /* LINX Engine Logo Styling */
      .LinxEngine {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 100;
        transition: var(--transition-normal);
        opacity: 0.8;
        filter: drop-shadow(var(--shadow-sm));
        display: block;
      }
      
      .LinxEngine:hover {
        opacity: 1;
        transform: translateY(-2px);
        filter: drop-shadow(var(--shadow-md));
      }
      
      /* === NAVIGATION BAR VERTICAL RIGHT 800px === */
      
      .nav-bar {
        background: var(--white);
        padding: 0 var(--space-md) 0 var(--space-md);
        width: 150px;
        max-width: none;
        border-radius: 0;
        box-shadow: none;
        border: none;
        display: flex;
        flex-direction: column;
        gap: 0;
        position: relative;
        overflow: hidden;
        align-self: flex-start;
      }
      
      /* Navigation Items Vertical */
      .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.375rem;
        border-radius: var(--radius-md);
        transition: var(--transition-fast);
        position: relative;
        width: 100%;
        justify-content: center;
        gap: var(--space-xs);
        text-align: center;
      }
      
      .nav-item:hover {
        background: var(--light-blue);
        transform: translateY(-2px);
      }
      
      .nav-bar a {
        color: var(--primary-blue);
        text-decoration: none;
        font-size: 0.75rem;
        font-weight: 500;
        transition: var(--transition-fast);
        display: block;
        text-align: center;
        width: 100%;
        outline: none !important;
      }

      .nav-item.nav-item-full-link > a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-xs);
        height: 100%;
      }
      
      .nav-bar a:hover {
        color: var(--accent-blue);
      }
      
      .nav-bar a:focus,
      .nav-bar a:active {
        outline: none !important;
      }
      
      .nav-bar img {
        border-radius: var(--radius-sm);
        transition: var(--transition-fast);
        box-shadow: var(--shadow-sm);
      }
      
      .nav-bar img:hover {
        transform: scale(1.1);
        box-shadow: var(--shadow-md);
      }
      
      /* Meteo Info Styling Vertical */
      .meteo-online {
        color: var(--medium-gray);
        font-size: 0.75rem;
        font-weight: 500;
        text-align: center;
        padding: 7px var(--space-sm);
        background: var(--light-gray);
        border-radius: var(--radius-md);
        border: 1px solid var(--border-gray);
        width: calc(100% - var(--space-xs));
        margin: var(--space-xs) auto;
        min-height: 42px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1px;
      }

      .meteo-online br {
        display: none;
      }

      .meteo-online strong {
        line-height: 1.05;
      }

      .meteo-online small {
        line-height: 1;
      }

      .install-app-nav-slot {
        width: calc(100% - var(--space-xs));
        margin: var(--space-xs) auto;
      }

      .install-app-nav-slot .install-app-wrap {
        width: 100%;
        justify-content: center;
      }

      .install-app-nav-slot .install-app-btn {
        width: 100%;
        min-height: 40px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 2px;
        font-size: 0.56rem;
        font-weight: 500;
        line-height: 1;
        padding: 7px 8px 7px 31px;
        white-space: nowrap;
        text-align: left;
        position: relative;
      }

      .install-app-nav-slot .install-app-btn::before {
        content: "";
        position: absolute;
        left: 3px;
        top: calc(50% - 2px);
        width: 25px;
        height: 25px;
        transform: translateY(-50%);
        background: url('/images/icons/mybrasov-live-menu-33.png') center/contain no-repeat;
      }

      .install-app-nav-slot .install-app-btn::after {
        content: "MyBrasov LIVE";
        display: block;
        font-size: 0.54rem;
        font-weight: 400;
        line-height: 1;
        letter-spacing: 0.015em;
        margin-left: 3px;
      }

      .nav-item--group {
        padding-top: 0;
        padding-bottom: 0.35rem;
      }

      .nav-item--group > a {
        gap: 2px;
        justify-content: flex-start;
        height: auto;
        padding-bottom: 3px;
      }

      .nav-item--group > a > span:last-child {
        margin-bottom: 0;
        line-height: 1;
      }
      
      /* === METEO SECTION MODERN 800px === */
      
      #meteo-section {
        text-align: center;
        margin: 0 auto;
        background: transparent;
        width: 100%;
        max-width: 800px;
        padding: 0;
        display: none; /* Ascuns implicit - se afișează doar la click pe buton */
      }
      
      #meteo-placeholder {
        background: transparent;
        border-radius: var(--radius-md);
        box-shadow: none;
        border: none;
        position: relative;
        overflow: hidden;
        height: 145px;
        margin: 0;
        padding: 0;
        width: 100%;
      }
      
      /* iOS Portrait - Height mai mare pentru a arăta bottom content */
      @supports (-webkit-touch-callout: none) {
        @media (orientation: portrait) {
          #meteo-placeholder {
            height: 148px !important;
          }
        }
      }
      
      #meteo-placeholder::before {
        display: none;
      }
      
      /* Meteo Widget Iframe Styling */
      #meteo-placeholder iframe {
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-md);
        transition: var(--transition-normal);
        margin-top: -44px;
        display: block;
      }
      
      /* Fix pentru iOS portret - folosim absolute positioning */
      @supports (-webkit-touch-callout: none) {
        @media (orientation: portrait) {
          #meteo-placeholder iframe {
            position: absolute;
            top: -44px;
            left: 0;
            margin-top: 0;
          }
        }
      }
      
      #meteo-placeholder iframe:hover {
        transform: translateY(-2px);
      }
      
      /* iOS Portrait - Nu aplicăm hover transform */
      @supports (-webkit-touch-callout: none) {
        @media (orientation: portrait) {
          #meteo-placeholder iframe:hover {
            transform: none;
          }
        }
      }

      #meteo-toggle {
        cursor: pointer;
      }

      .meteo-loading-placeholder {
        width: 800px;
        height: 272px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: Arial, sans-serif;
        color: #999;
        font-size: 14px;
      }
      
      /* === FOOTER MODERN === */
      
      footer[role="contentinfo"] {
        background: linear-gradient(135deg, var(--light-gray) 0%, var(--white) 100%);
        padding: var(--space-2xl) var(--space-lg);
        margin-top: var(--space-2xl);
        text-align: center;
        font-size: 0.875rem;
        line-height: 1.7;
        color: var(--medium-gray);
        border-top: none;
        position: relative;
        width: 100%;
        box-sizing: border-box;
      }
      
      footer[role="contentinfo"]::before {
        display: none;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100px;
        height: 3px;
        background: linear-gradient(90deg, var(--accent-blue), var(--primary-blue));
      }
      
      footer[role="contentinfo"] a {
        color: var(--primary-blue);
        text-decoration: none;
        font-weight: 600;
        transition: var(--transition-fast);
        position: relative;
      }
      
      footer[role="contentinfo"] a:hover {
        color: var(--accent-blue);
      }
      
      footer[role="contentinfo"] a::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 2px;
        background: var(--accent-blue);
        transition: var(--transition-fast);
      }
      
      footer[role="contentinfo"] a:hover::after {
        width: 100%;
      }
      
      /* === UTILITY CLASSES === */
      
      .skip-link {
        position: absolute;
        top: -40px;
        left: 6px;
        background: var(--primary-blue);
        color: var(--white);
        padding: var(--space-sm) var(--space-md);
        text-decoration: none;
        z-index: var(--z-notification);
        border-radius: var(--radius-md);
        font-weight: 500;
        transition: var(--transition-fast);
      }
      
      .skip-link:focus {
        top: 6px;
        box-shadow: var(--shadow-lg);
      }
      
      /* Loading States */
      .loading-shimmer {
        background: linear-gradient(90deg, 
          var(--light-gray) 25%, 
          var(--border-gray) 50%, 
          var(--light-gray) 75%
        );
        background-size: 200% 100%;
        animation: shimmer 2s infinite;
      }
      
      /* Status Indicators */
      .status-indicator {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: var(--space-xs);
        position: relative;
      }
      
      .status-indicator.online {
        background: var(--success-green);
        box-shadow: 0 0 8px rgba(76, 175, 80, 0.3);
      }
      
      .status-indicator.offline {
        background: var(--error-red);
        box-shadow: 0 0 8px rgba(244, 67, 54, 0.3);
      }
      
      .status-indicator.loading {
        background: var(--warning-orange);
        animation: pulse 2s infinite;
      }
      
      @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
      }
      
      /* === RESPONSIVE DESIGN === */
      
      /* === MEDIA QUERIES ELIMINATED FOR FIXED LAYOUT === */
      /* Empty media query removed for clean code */
      
      /* === ACCESSIBILITY ENHANCEMENTS === */
      
      @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
          scroll-behavior: auto !important;
        }
      }
      
      /* High Contrast Mode */
      @media (prefers-contrast: high) {
        :root {
          --shadow-sm: 0 2px 4px rgb(0 0 0 / 0.3);
          --shadow-md: 0 4px 8px rgb(0 0 0 / 0.3);
          --shadow-lg: 0 8px 16px rgb(0 0 0 / 0.3);
          --shadow-xl: 0 16px 32px rgb(0 0 0 / 0.3);
        }
        
        .webcam-container,
        .nav-bar,
        #meteo-placeholder {
          border-width: 2px;
          border-color: var(--primary-blue);
        }
      }
      
      /* Focus Styles */
      :focus-visible {
        outline: none !important;
      }
      
      /* Print Styles */
      @media print {
        body::before,
        .skip-link,
        .nav-bar,
        #meteo-section {
          display: none !important;
        }
        
        .webcam-container {
          box-shadow: none;
          border: 2px solid #000;
        }
      }
      
      /* === ADVANCED UI COMPONENTS === */
      
      /* Screen Reader Only Content */
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }
      
      /* Enhanced Navigation Items */
      .nav-item span {
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        display: block;
        margin-bottom: var(--space-xs);
        border: none;
      }
      
      .nav-item img {
        transition: var(--transition-normal);
        filter: brightness(0.9);
        border: none;
      }
      
      .nav-item:hover img {
        filter: brightness(1) saturate(1.2);
        transform: scale(1.05);
      }
      
      /* Webcam Status Indicator */
      .webcam-status {
        position: absolute;
        bottom: var(--space-md);
        right: var(--space-md);
        background: var(--white);
        border: 2px solid var(--border-gray);
        border-radius: var(--radius-lg);
        padding: var(--space-xs) var(--space-sm);
        font-size: 0.75rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: var(--space-xs);
        box-shadow: var(--shadow-sm);
        z-index: var(--z-tooltip);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        background: rgba(255, 255, 255, 0.95);
      }
      
      .webcam-status.live {
        border-color: var(--success-green);
        color: var(--success-green);
      }
      
      .webcam-status.loading {
        border-color: var(--warning-orange);
        color: var(--warning-orange);
      }
      
      .webcam-status.error {
        border-color: var(--error-red);
        color: var(--error-red);
      }
      
      .status-indicator {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: currentColor;
        animation: pulse 2s infinite;
      }
      
      .webcam-status.error .status-indicator {
        animation: none;
        opacity: 0.6;
      }
      
      @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.4; }
      }
      
      /* Enhanced Meteo Section */
      .meteo-header {
        margin-bottom: 0;
        text-align: center;
      }
      
      .meteo-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--primary-blue);
        margin: 0 0 var(--space-sm) 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-sm);
      }
      
      .meteo-subtitle {
        color: var(--medium-gray);
        font-size: 0.95rem;
        margin: 0;
      }
      
      /* Loading Animations */
      .loading-dots {
        display: inline-block;
      }
      
      .loading-dots::after {
        content: '';
        animation: dots 2s infinite;
      }
      
      @keyframes dots {
        0%, 20% { content: ''; }
        40% { content: '.'; }
        60% { content: '..'; }
        80%, 100% { content: '...'; }
      }
      
      /* Toast Notifications */
      .toast {
        position: fixed;
        top: var(--space-lg);
        right: var(--space-lg);
        background: var(--white);
        border: 1px solid var(--border-gray);
        border-radius: var(--radius-lg);
        padding: var(--space-md);
        box-shadow: var(--shadow-xl);
        z-index: var(--z-notification);
        transform: translateX(100%);
        transition: var(--transition-normal);
        max-width: 300px;
      }
      
      .toast.show {
        transform: translateX(0);
      }
      
      .toast.success {
        border-left: 4px solid var(--success-green);
      }
      
      .toast.warning {
        border-left: 4px solid var(--warning-orange);
      }
      
      .toast.error {
        border-left: 4px solid var(--error-red);
      }
      
      /* Performance Metrics Display */
      .performance-indicator {
        position: fixed;
        bottom: var(--space-lg);
        left: var(--space-lg);
        background: rgba(0, 0, 0, 0.8);
        color: var(--white);
        padding: var(--space-sm) var(--space-md);
        border-radius: var(--radius-md);
        font-size: 0.75rem;
        font-family: var(--font-mono);
        z-index: var(--z-tooltip);
        opacity: 0;
        transition: var(--transition-normal);
        pointer-events: none;
      }
      
      .performance-indicator.show {
        opacity: 1;
      }
      
      /* Enhanced Interactive Elements */
      .interactive-element {
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
      }
      
      /* Eliminat efectul de scale pentru a nu afecta link-urile interne */
      /* .interactive-element:active {
        transform: scale(0.98);
      } */
      
      /* Better Focus Indicators */
      .nav-item:focus-within {
        outline: none !important;
      }
      
      /* Improved Hover States */
      @media (hover: hover) {
        .webcam-container:hover {
          transform: translateY(-4px);
          box-shadow: var(--shadow-xl);
        }
        
        .nav-bar:hover {
          box-shadow: var(--shadow-lg);
        }
      }
      
      /* Reduced Motion Preferences */
      @media (prefers-reduced-motion: reduce) {
        .webcam-container:hover,
        .nav-bar:hover,
        .header img:hover,
        .nav-item:hover {
          transform: none;
        }
        
        .loading-shimmer,
        .shimmer,
        .pulse {
          animation: none;
        }
      }
      
      /* Custom Scrollbar */
      ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
      }
      
      ::-webkit-scrollbar-track {
        background: var(--light-gray);
        border-radius: 0;
      }
      
      ::-webkit-scrollbar-thumb {
        background: var(--medium-gray);
        border-radius: var(--radius-sm);
      }
      
      ::-webkit-scrollbar-thumb:hover {
        background: var(--primary-blue);
      }
      
      /* Better Selection */
      ::selection {
        background: var(--light-blue);
        color: var(--primary-blue);
      }
      
      ::-moz-selection {
        background: var(--light-blue);
        color: var(--primary-blue);
      }
      
      /* Enhanced Typography */
      .webcam-live-info strong {
        color: var(--accent-blue);
        font-weight: 700;
      }
      
      .webcam-live-info small {
        color: var(--medium-gray);
        font-weight: 400;
      }
      
      /* Modern Card Layouts for Future Enhancements */
      .card {
        background: var(--white);
        border: 1px solid var(--border-gray);
        border-radius: var(--radius-lg);
        padding: var(--space-lg);
        box-shadow: var(--shadow-md);
        transition: var(--transition-normal);
      }
      
      .card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
      }
      
      .card-header {
        margin-bottom: var(--space-md);
        padding-bottom: var(--space-md);
        border-bottom: 1px solid var(--border-gray);
      }
      
      .card-title {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--primary-blue);
      }
      
      .card-content {
        color: var(--dark-gray);
        line-height: 1.6;
      }