.app-header{background-color:#b02a2a;padding:1rem 0;border-bottom:1px solid #620000;margin:0;width:100%;position:relative;z-index:10}.app-header .container{max-width:1200px;margin:0 auto;padding:0 1rem;display:flex;justify-content:space-between;align-items:center}.header-content{display:flex;justify-content:space-between;align-items:center;width:100%}.left-items{display:flex;align-items:center;gap:1.5rem}.app-header h1{color:#036;font-size:1.8rem;font-weight:600;margin:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.app-header h1:after{content:": A product by S2";font-size:1rem;font-weight:400;color:#036;margin-left:.3rem}nav{display:flex;gap:var(--spacing-md)}.nav-link{color:#2e2ed7;text-decoration:none;font-weight:500;font-size:1rem;transition:color .3s ease}.nav-link:hover{color:gold}.right-items{display:flex;padding:2px;gap:1rem;align-items:right}.profile-btn{background-color:#036;color:#fff;border:none;padding:.5rem 1rem;font-size:.9rem;border-radius:5px;cursor:pointer;transition:background-color .3s ease}.profile-btn:hover{background-color:#00509e}:root{--color-primary: #3498db;--color-primary-dark: #2980b9;--color-secondary: #2ecc71;--color-secondary-dark: #27ae60;--color-tertiary: #e74c3c;--color-tertiary-dark: #c0392b;--color-background: #ffffff;--color-surface: #f9f9f9;--color-text: #333333;--color-text-light: #767676;--color-border: #e1e1e1;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-xxl: 3rem;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-md: 1rem;--font-size-lg: 1.25rem;--font-size-xl: 1.5rem;--font-size-xxl: 2rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-bold: 700;--border-radius-sm: .25rem;--border-radius-md: .5rem;--border-radius-lg: 1rem;--transition-fast: .15s ease;--transition-normal: .3s ease;--transition-slow: .5s ease;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .1);--container-sm: 640px;--container-md: 768px;--container-lg: 1024px;--container-xl: 1280px}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:var(--font-size-md);line-height:1.6;color:var(--color-text);background-color:var(--color-background)}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-primary-dark)}h1,h2,h3,h4,h5,h6{margin-bottom:var(--spacing-md);line-height:1.2}.container{width:100%;margin:0 auto;padding:0 var(--spacing-lg)}.app-container{display:flex;flex-direction:column;min-height:100vh}.main-content{flex:1;padding:var(--spacing-xl) 0}.app-header{background-color:var(--color-background);box-shadow:var(--shadow-sm);padding:var(--spacing-md) 0}.app-header .container{display:flex;align-items:center;justify-content:space-between}.app-header h1{font-size:var(--font-size-xl);margin:0}.app-header nav ul{display:flex;list-style:none;gap:var(--spacing-md)}.app-footer{background-color:var(--color-surface);padding:var(--spacing-lg) 0;margin-top:auto;border-top:1px solid var(--color-border)}.page{min-height:60vh}.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--border-radius-md);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-fast);border:none;font-size:var(--font-size-md)}.btn:focus{outline:none}.btn-primary{background-color:var(--color-primary);color:#fff}.btn-primary:hover{background-color:var(--color-primary-dark)}.btn-secondary{background-color:var(--color-secondary);color:#fff}.btn-secondary:hover{background-color:var(--color-secondary-dark)}.btn-outline{background-color:transparent;border:1px solid var(--color-border);color:var(--color-text)}.btn-outline:hover{background-color:var(--color-surface)}.btn:disabled{opacity:.6;cursor:not-allowed}.button-group{display:flex;gap:var(--spacing-sm)}.loader{display:flex;justify-content:center;align-items:center;padding:var(--spacing-xl)}.fullscreen-loader{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;background-color:#fffc;z-index:9999}.spinner{width:40px;height:40px;border:4px solid rgba(0,0,0,.1);border-radius:50%;border-top-color:var(--color-primary);animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-container{text-align:center;padding:var(--spacing-xl);max-width:500px;margin:0 auto}.error-container h2{color:var(--color-tertiary);margin-bottom:var(--spacing-md)}.error-container button{margin-top:var(--spacing-lg)}.counter-demo{margin-top:var(--spacing-xl);padding:var(--spacing-lg);border-radius:var(--border-radius-md);background-color:var(--color-surface);border:1px solid var(--color-border);text-align:center}.counter-demo p{font-size:var(--font-size-xl);margin-bottom:var(--spacing-lg)}.hero{text-align:center;padding:var(--spacing-xxl) 0}.hero h1{font-size:var(--font-size-xxl);margin-bottom:var(--spacing-md)}.hero p{font-size:var(--font-size-lg);color:var(--color-text-light);margin:0 auto var(--spacing-xl)}@media (max-width: 768px){.app-header .container{flex-direction:column;gap:var(--spacing-md)}.hero h1{font-size:var(--font-size-xl)}.hero p{font-size:var(--font-size-md)}}