:root{--primary-light-blue: #87CEEB;--primary-light-blue-dark: #5F9BCF;--primary-light-blue-light: #B8E0FF;--accent-blue: #4A90E2;--white: #FFFFFF;--black: #1A1A1A;--gray-light: #F8F9FA;--gray-medium: #6C757D;--gray-dark: #343A40;--gradient-primary: linear-gradient(135deg, var(--primary-light-blue) 0%, var(--white) 100%);--gradient-accent: linear-gradient(135deg, var(--accent-blue) 0%, var(--primary-light-blue) 100%);--gradient-subtle: linear-gradient(135deg, var(--white) 0%, var(--gray-light) 100%);--shadow-sm: 0 2px 8px rgba(26, 26, 26, .08);--shadow-md: 0 4px 16px rgba(26, 26, 26, .12);--shadow-lg: 0 8px 32px rgba(26, 26, 26, .16);--shadow-xl: 0 16px 64px rgba(26, 26, 26, .2);--radius-sm: 8px;--radius-md: 16px;--radius-lg: 24px;--radius-xl: 32px;--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .35s ease}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family);font-weight:var(--font-weight-normal);background:radial-gradient(ellipse at top,rgba(135,206,235,.15) 0%,transparent 70%),radial-gradient(ellipse at bottom right,rgba(74,144,226,.08) 0%,transparent 70%),var(--white);color:var(--black);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.App{min-height:100vh;display:flex;flex-direction:column}.app-layout{display:flex;flex-direction:column;min-height:100vh}.main-content{flex:1;padding:3rem 2rem;max-width:1400px;margin:0 auto;width:100%;animation:fadeInUp var(--transition-slow)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.app-footer{background:var(--gradient-subtle);border-top:1px solid rgba(135,206,235,.2);color:var(--gray-medium);text-align:center;padding:1.5rem;margin-top:auto;font-size:.9rem;font-weight:var(--font-weight-medium)}.navigation{position:sticky;top:0;z-index:100;background:#fffffff2;-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid rgba(135,206,235,.2);color:var(--black);padding:1.25rem 2rem;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow-sm);transition:all var(--transition-normal)}.nav-brand a{color:inherit;text-decoration:none;font-size:1.5rem;font-weight:var(--font-weight-bold)}.nav-brand-link{display:flex;align-items:center;gap:1rem;text-decoration:none;color:inherit;transition:transform var(--transition-fast)}.nav-brand-link:hover{transform:scale(1.02)}.nav-logo{width:48px;height:48px;border-radius:var(--radius-md);padding:8px;background:var(--gradient-primary);box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;transition:all var(--transition-normal)}.nav-logo:hover{box-shadow:var(--shadow-lg);transform:rotate(5deg)}.nav-logo img{width:100%;height:100%;object-fit:contain}.nav-brand-text{display:flex;flex-direction:column;line-height:1.2}.nav-brand-title{font-size:1.25rem;font-weight:var(--font-weight-bold);letter-spacing:-.02em;color:var(--black)}.nav-brand-subtitle{font-size:.8rem;font-weight:var(--font-weight-medium);color:var(--gray-medium);text-transform:uppercase;letter-spacing:.05em}.nav-links{display:flex;align-items:center;gap:.75rem}.nav-links a,.nav-links .external-link{color:var(--black);text-decoration:none;padding:.75rem 1.25rem;border-radius:var(--radius-xl);font-size:.9rem;font-weight:var(--font-weight-medium);background:var(--white);border:2px solid rgba(135,206,235,.3);transition:all var(--transition-normal);position:relative;overflow:hidden}.nav-links a:before,.nav-links .external-link:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:var(--gradient-accent);transition:left var(--transition-normal);z-index:-1}.nav-links a:hover,.nav-links .external-link:hover{color:var(--white);border-color:var(--accent-blue);box-shadow:var(--shadow-md);transform:translateY(-2px)}.nav-links a:hover:before,.nav-links .external-link:hover:before{left:0}.logout-button{background:var(--black);color:var(--white);border:none;padding:.75rem 1.25rem;border-radius:var(--radius-xl);cursor:pointer;font-size:.9rem;font-weight:var(--font-weight-semibold);letter-spacing:-.01em;transition:all var(--transition-normal);position:relative;overflow:hidden}.logout-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(135deg,#dc2626,#991b1b);transition:left var(--transition-normal);z-index:-1}.logout-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.logout-button:hover:before{left:0}.user-info{background:var(--gradient-subtle);padding:.75rem 1.25rem;border-radius:var(--radius-xl);border:2px solid rgba(135,206,235,.3);box-shadow:var(--shadow-sm);font-size:.9rem;font-weight:var(--font-weight-medium);color:var(--black)}.mobile-menu-button{display:none;flex-direction:column;justify-content:center;align-items:center;width:48px;height:48px;background:transparent;border:none;cursor:pointer;padding:0;z-index:1001;position:relative}.mobile-menu-button span{display:block;width:24px;height:3px;background:var(--black);border-radius:2px;transition:all var(--transition-normal);position:relative;transform-origin:center}.mobile-menu-button span:not(:last-child){margin-bottom:5px}.mobile-menu-button.active span:nth-child(1){transform:rotate(45deg) translate(6px,6px)}.mobile-menu-button.active span:nth-child(2){opacity:0;transform:rotate(0) scale(.2)}.mobile-menu-button.active span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}.nav-links.mobile-closed{display:none}.nav-links.mobile-open{display:flex;flex-direction:column;position:fixed;top:0;right:0;width:280px;height:100vh;background:#fffffffa;-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border-left:1px solid rgba(135,206,235,.2);box-shadow:var(--shadow-xl);padding:120px 2rem 2rem;gap:1.5rem;z-index:1000;animation:slideInRight var(--transition-normal)}.nav-links.mobile-open a,.nav-links.mobile-open .external-link,.nav-links.mobile-open .logout-button{width:100%;text-align:center;padding:1rem 1.5rem;border-radius:var(--radius-md);font-size:1rem;font-weight:var(--font-weight-medium)}.nav-links.mobile-open .user-info{text-align:center;margin-top:1rem;padding:1rem;border-radius:var(--radius-md);background:#87ceeb1a;border:1px solid rgba(135,206,235,.3)}.mobile-menu-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0000004d;z-index:999;animation:fadeIn var(--transition-fast)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.login-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background:radial-gradient(ellipse at top left,rgba(135,206,235,.3) 0%,transparent 70%),radial-gradient(ellipse at bottom right,rgba(74,144,226,.2) 0%,transparent 70%),var(--white);padding:2rem}.login-form{background:var(--white);padding:3rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);width:100%;max-width:450px;border:1px solid rgba(135,206,235,.2);animation:slideInUp var(--transition-slow)}@keyframes slideInUp{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.login-form h2{text-align:center;margin-bottom:2.5rem;color:var(--black);font-size:2rem;font-weight:var(--font-weight-bold);letter-spacing:-.02em}.form-group{margin-bottom:1.5rem;position:relative}.form-group label{display:block;margin-bottom:.75rem;font-weight:var(--font-weight-semibold);color:var(--black);font-size:.95rem}.form-group input,.form-group select{width:100%;padding:1rem 1.25rem;border:2px solid rgba(135,206,235,.3);border-radius:var(--radius-md);font-size:1rem;font-family:var(--font-family);background:var(--white);color:var(--black);transition:all var(--transition-normal)}.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--primary-light-blue);box-shadow:0 0 0 4px #87ceeb26;transform:translateY(-1px)}.form-group input:disabled,.form-group select:disabled{background-color:var(--gray-light);cursor:not-allowed;opacity:.7}.submit-button{width:100%;padding:1rem 1.25rem;background:var(--gradient-accent);color:var(--white);border:none;border-radius:var(--radius-md);font-size:1rem;font-weight:var(--font-weight-semibold);cursor:pointer;transition:all var(--transition-normal);position:relative;overflow:hidden}.submit-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(135deg,var(--black) 0%,var(--gray-dark) 100%);transition:left var(--transition-normal);z-index:-1}.submit-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg)}.submit-button:hover:not(:disabled):before{left:0}.submit-button:disabled{background:var(--gray-medium);cursor:not-allowed;transform:none;box-shadow:none}.error-message{background:linear-gradient(135deg,#dc2626,#991b1b);color:var(--white);padding:1rem 1.25rem;border-radius:var(--radius-md);margin:1.5rem 0;text-align:center;font-weight:var(--font-weight-medium);box-shadow:var(--shadow-md);animation:slideInDown var(--transition-normal)}@keyframes slideInDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.error{background:#dc26261a;color:#991b1b;border:2px solid rgba(220,38,38,.2);padding:1.25rem;border-radius:var(--radius-md);margin:1.5rem 0;text-align:center;font-weight:var(--font-weight-medium);animation:slideInDown var(--transition-normal)}.loading{text-align:center;padding:3rem;font-size:1.1rem;color:var(--gray-medium);font-weight:var(--font-weight-medium)}.loading:after{content:"";display:block;width:32px;height:32px;margin:1rem auto;border:3px solid rgba(135,206,235,.3);border-top:3px solid var(--primary-light-blue);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.home-page h1{text-align:left;color:var(--black);margin-bottom:1.5rem;font-size:3rem;font-weight:var(--font-weight-bold);letter-spacing:-.02em}.home-hero{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:3rem;margin-bottom:3rem;padding:2rem;background:var(--gradient-subtle);border-radius:var(--radius-lg);border:1px solid rgba(135,206,235,.2);box-shadow:var(--shadow-sm);animation:fadeInUp var(--transition-slow) .2s}.home-hero-logo{display:flex;align-items:center;justify-content:center}.home-hero-logo img{width:160px;height:160px;object-fit:contain;border-radius:var(--radius-lg);padding:16px;background:var(--gradient-primary);box-shadow:var(--shadow-lg);transition:transform var(--transition-normal)}.home-hero-logo img:hover{transform:scale(1.05) rotate(2deg)}.home-hero-text h1{font-size:3.5rem;letter-spacing:-.03em;margin-bottom:.5rem;background:linear-gradient(135deg,var(--black) 0%,var(--primary-light-blue-dark) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.home-hero-text p{margin-top:1rem;font-size:1.125rem;color:var(--gray-medium);font-weight:var(--font-weight-medium);line-height:1.6}.welcome-section{background:var(--white);padding:2.5rem;border-radius:var(--radius-lg);border:1px solid rgba(135,206,235,.2);box-shadow:var(--shadow-md);margin-bottom:2rem;text-align:center;animation:fadeInUp var(--transition-slow) .4s}.welcome-section h2{color:var(--black);font-size:2rem;font-weight:var(--font-weight-bold);margin-bottom:1rem}.welcome-section p{color:var(--gray-medium);font-size:1.1rem}.admin-notice{background:#87ceeb1a;border:2px solid rgba(135,206,235,.3);color:var(--accent-blue);padding:1.25rem;border-radius:var(--radius-md);margin-top:1.5rem;font-weight:var(--font-weight-semibold)}.guest-section{background:var(--white);padding:2.5rem;border-radius:var(--radius-lg);border:1px solid rgba(135,206,235,.2);box-shadow:var(--shadow-md);margin-bottom:2rem;text-align:center;animation:fadeInUp var(--transition-slow) .4s}.guest-section h2{color:var(--black);font-size:2rem;font-weight:var(--font-weight-bold);margin-bottom:1rem}.guest-section p{color:var(--gray-medium);font-size:1.1rem}.links-section,.features-section{background:var(--white);padding:2.5rem;border-radius:var(--radius-lg);border:1px solid rgba(135,206,235,.2);box-shadow:var(--shadow-md);margin-bottom:2rem;animation:fadeInUp var(--transition-slow) .6s}.links-section h3,.features-section h3{color:var(--black);font-size:1.5rem;font-weight:var(--font-weight-bold);margin-bottom:1.5rem}.links-grid,.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:2rem}.link-card,.feature-card{position:relative;overflow:hidden;background:var(--white);padding:2rem;border-radius:var(--radius-md);border:2px solid rgba(135,206,235,.2);transition:all var(--transition-normal);cursor:pointer}.link-card:before,.feature-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--gradient-primary);opacity:0;transition:opacity var(--transition-normal);pointer-events:none}.link-card:hover:before,.feature-card:hover:before{opacity:.05}.link-card:hover,.feature-card:hover{transform:translateY(-8px);border-color:var(--primary-light-blue);box-shadow:var(--shadow-xl)}.link-card{text-decoration:none;color:inherit}.link-card h4,.feature-card h4{color:var(--black);margin-bottom:.75rem;font-size:1.125rem;font-weight:var(--font-weight-semibold);position:relative;z-index:1}.link-card p{color:var(--gray-medium);font-size:.95rem;line-height:1.5;word-break:break-word;position:relative;z-index:1}.user-profile{background:var(--white);padding:3rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:1px solid rgba(135,206,235,.2);animation:fadeInUp var(--transition-slow)}.user-profile h2{color:var(--black);margin-bottom:2.5rem;text-align:center;font-size:2.5rem;font-weight:var(--font-weight-bold);letter-spacing:-.02em}.profile-info{display:grid;gap:1.5rem;max-width:700px;margin:0 auto}.profile-field{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;background:var(--gradient-subtle);border-radius:var(--radius-md);border-left:4px solid var(--primary-light-blue);box-shadow:var(--shadow-sm);transition:transform var(--transition-fast)}.profile-field:hover{transform:translate(4px)}.profile-field label{font-weight:var(--font-weight-semibold);color:var(--black);font-size:1.1rem}.profile-field span{font-weight:var(--font-weight-medium);color:var(--gray-dark)}.role-badge,.status-badge{padding:.5rem 1rem;border-radius:var(--radius-xl);font-size:.85rem;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.05em;box-shadow:var(--shadow-sm)}.role-admin{background:linear-gradient(135deg,#dc2626,#991b1b);color:var(--white)}.role-user{background:var(--gradient-accent);color:var(--white)}.status-active{background:linear-gradient(135deg,#059669,#047857);color:var(--white)}.admin-panel{background:var(--white);padding:3rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:1px solid rgba(135,206,235,.2);animation:fadeInUp var(--transition-slow)}.admin-panel h2{color:var(--black);margin-bottom:2.5rem;text-align:center;font-size:2.5rem;font-weight:var(--font-weight-bold);letter-spacing:-.02em}.admin-actions{margin-bottom:3rem;text-align:center}.create-user-button{background:linear-gradient(135deg,#059669,#047857);color:var(--white);border:none;padding:1rem 2rem;border-radius:var(--radius-md);cursor:pointer;font-size:1rem;font-weight:var(--font-weight-semibold);transition:all var(--transition-normal);position:relative;overflow:hidden}.create-user-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(135deg,var(--accent-blue),var(--primary-light-blue));transition:left var(--transition-normal);z-index:-1}.create-user-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg)}.create-user-button:hover:not(:disabled):before{left:0}.create-user-button:disabled{background:var(--gray-medium);cursor:not-allowed;transform:none;box-shadow:none}.user-form{background:var(--gradient-subtle);padding:2.5rem;border-radius:var(--radius-md);border:1px solid rgba(135,206,235,.2);margin-bottom:2rem;box-shadow:var(--shadow-sm)}.user-form h3{color:var(--black);margin-bottom:2rem;text-align:center;font-size:1.5rem;font-weight:var(--font-weight-semibold)}.form-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.form-actions button{padding:1rem 2rem;border:none;border-radius:var(--radius-md);cursor:pointer;font-size:1rem;font-weight:var(--font-weight-semibold);transition:all var(--transition-normal);position:relative;overflow:hidden}.form-actions button[type=submit]{background:var(--gradient-accent);color:var(--white)}.form-actions button[type=submit]:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(135deg,#059669,#047857);transition:left var(--transition-normal);z-index:-1}.form-actions button[type=submit]:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg)}.form-actions button[type=submit]:hover:not(:disabled):before{left:0}.form-actions button[type=button]{background:var(--gray-medium);color:var(--white)}.form-actions button[type=button]:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:var(--black);transition:left var(--transition-normal);z-index:-1}.form-actions button[type=button]:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg)}.form-actions button[type=button]:hover:not(:disabled):before{left:0}.user-management h3{color:var(--black);margin-bottom:1.5rem;font-size:1.5rem;font-weight:var(--font-weight-semibold)}.user-search input{width:100%;max-width:500px;padding:1rem 1.25rem;border:2px solid rgba(135,206,235,.3);border-radius:var(--radius-md);font-size:1rem;font-family:var(--font-family);margin-bottom:.75rem;transition:all var(--transition-normal)}.user-search input:focus{outline:none;border-color:var(--primary-light-blue);box-shadow:0 0 0 4px #87ceeb26}.user-search small{color:var(--gray-medium);font-style:italic;font-size:.9rem}.selected-user{background:#87ceeb0d;padding:2rem;border-radius:var(--radius-md);border:2px solid rgba(135,206,235,.2);margin-top:1.5rem;box-shadow:var(--shadow-sm)}.selected-user h4{color:var(--black);margin-bottom:1.5rem;font-size:1.25rem;font-weight:var(--font-weight-semibold)}.user-details p{margin-bottom:.75rem;font-size:1rem;line-height:1.6}.user-details strong{color:var(--black);font-weight:var(--font-weight-semibold)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes glow{0%,to{box-shadow:var(--shadow-md)}50%{box-shadow:var(--shadow-lg)}}button,a,input,select,.nav-logo,.link-card,.feature-card{transition:all var(--transition-normal)}.link-card:nth-child(1){animation-delay:.1s}.link-card:nth-child(2){animation-delay:.2s}.link-card:nth-child(3){animation-delay:.3s}.link-card:nth-child(4){animation-delay:.4s}@media (max-width: 1200px){.main-content{max-width:100%;padding:2rem 1.5rem}.home-hero{gap:2rem}.home-hero-text h1{font-size:3rem}}@media (max-width: 992px){.navigation{padding:1rem 1.5rem}.home-hero{grid-template-columns:1fr;text-align:center;gap:2rem}.home-hero-text h1{font-size:2.5rem}.links-grid,.features-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}}@media (max-width: 768px){:root{--font-size-base: 14px}.navigation{flex-direction:row;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.5rem}.mobile-menu-button{display:flex}.nav-links:not(.mobile-open){display:none}.nav-brand-text{display:none}.nav-logo{width:40px;height:40px}.main-content{padding:1.5rem 1rem}.home-page h1,.home-hero-text h1{font-size:2rem}.home-hero-logo img{width:120px;height:120px}.links-grid,.features-grid{grid-template-columns:1fr;gap:1rem}.link-card,.feature-card{padding:1.5rem}.profile-field{flex-direction:column;align-items:flex-start;gap:.75rem;text-align:left}.form-actions{flex-direction:column;gap:1rem}.login-form{padding:2rem 1.5rem;margin:1rem}.user-profile,.admin-panel,.welcome-section,.guest-section,.links-section,.features-section{padding:2rem 1.5rem}.nav-links.mobile-open a,.nav-links.mobile-open .external-link,.nav-links.mobile-open .logout-button{min-height:48px;display:flex;align-items:center;justify-content:center}.nav-links.mobile-open a:active,.nav-links.mobile-open .external-link:active,.nav-links.mobile-open .logout-button:active{transform:scale(.98);background-color:#87ceeb33}.home-hero{padding:1.5rem;gap:1.5rem}}@media (max-width: 480px){.navigation{padding:.75rem 1rem}.nav-logo{width:36px;height:36px}.mobile-menu-button{width:44px;height:44px}.mobile-menu-button span{width:20px;height:2px}.nav-links.mobile-open{width:100vw;right:0;padding:100px 1.5rem 2rem}.home-hero{padding:1rem;margin-bottom:2rem}.home-hero-text h1{font-size:1.75rem}.home-hero-logo img{width:100px;height:100px}.login-form{margin:.5rem;padding:2rem 1.25rem}.login-form h2{font-size:1.5rem}.user-profile h2,.admin-panel h2{font-size:2rem}.form-group input,.form-group select{padding:1.25rem 1rem;font-size:16px}.submit-button,.create-user-button,.form-actions button{padding:1.25rem 1.5rem;min-height:48px;font-size:1rem}.mobile-menu-button{padding:8px}}@media (hover: none) and (pointer: coarse){.nav-links a:hover,.nav-links .external-link:hover,.link-card:hover,.feature-card:hover{transform:none}.nav-links a:active,.nav-links .external-link:active{background-color:#87ceeb4d;transform:scale(.98)}.link-card:active,.feature-card:active{transform:scale(.98);background:#87ceeb1a}button,a,input,select{min-height:44px}}@media (max-width: 768px){.home-hero-logo img:hover,.nav-logo:hover{transform:none}.navigation,.login-form,.welcome-section,.links-section{box-shadow:var(--shadow-sm)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}