.login-container{display:flex;justify-content:center;align-items:center;padding:2em 0}.login-form{background:#2a2a2a;padding:2em;border-radius:15px;box-shadow:0 10px 20px #0003,0 6px 6px #00000040;width:100%;max-width:400px;text-align:center}.login-form h2{color:#ff9800;margin-bottom:1em}.login-form input{width:calc(100% - 2em);padding:1em;margin-bottom:1em;border:1px solid #444;border-radius:5px;background:#333;color:#fff}.login-form button{width:100%;padding:1em;border:none;border-radius:5px;background:#ff9800;color:#000;font-weight:700;cursor:pointer;transition:background-color .3s ease}.login-form button:hover{background-color:#000;color:#2a2a2a}.error-message,.success-message{padding:1em;margin-bottom:1em;border-radius:5px;text-align:center;font-weight:700}.error-message{background-color:#ff4d4d;color:#fff}.success-message{background-color:#4caf50;color:#fff}.password-reset{margin-top:1em;font-size:.9rem}.password-reset a{color:#ff9800;text-decoration:none}.password-reset a:hover{text-decoration:underline}.signup-container{display:flex;justify-content:center;align-items:center;padding:2em 0}.signup-form{background:#2a2a2a;padding:2em;border-radius:15px;box-shadow:0 10px 20px #0003,0 6px 6px #00000040;width:100%;max-width:400px;text-align:center}.signup-form h2{color:#ff9800;margin-bottom:1em}.signup-form input{width:calc(100% - 2em);padding:1em;margin-bottom:1em;border:1px solid #444;border-radius:5px;background:#333;color:#fff}.signup-form button{width:100%;padding:1em;border:none;border-radius:5px;background:#ff9800;color:#000;font-weight:700;cursor:pointer;transition:background-color .3s ease}.signup-form button:hover{background-color:#000;color:#2a2a2a}.signup-form .error{color:#ff4d4d;margin-top:1em}.landing-page{color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1}.hero{text-align:center;padding:4em 1em}.hero h1{font-size:3em;margin-bottom:.5em;color:#ff9800}.hero p{font-size:1.2em;margin-bottom:2em}.cta-button{background-color:#ff9800;color:#000;padding:1em 2em;text-decoration:none;font-weight:700;border-radius:5px;transition:background-color .3s,color .3s}.cta-button:hover{background-color:#000;color:#2a2a2a;padding:1em 2em;border-radius:5px}.features{display:flex;justify-content:space-around;padding:2em;width:100%;flex-wrap:wrap;gap:2em}.feature{background:linear-gradient(145deg,#2a2a2a,#1a1a1a);padding:2em;border-radius:10px;border:1px solid #ff9800;text-align:center;max-width:300px;box-shadow:0 4px 6px #0000001a}.feature h2{color:#ff9800}.cta-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.cta-row{display:flex;flex-direction:column;align-items:center;gap:8px}.cta-subtext{font-size:.95rem;opacity:.9}.cta-link{text-decoration:underline}.about-container{display:flex;justify-content:center;padding:2em}.about-card{background:linear-gradient(145deg,#2a2a2a,#1a1a1a);padding:2em;border-radius:15px;box-shadow:0 10px 20px #0003,0 6px 6px #00000040;width:100%;max-width:900px;color:#fff;border:1px solid #ff9800}.about-card h1{color:#ff9800;margin-bottom:1em;border-bottom:2px solid #ff9800;padding-bottom:.5em}.about-card h2{color:#ff9800;margin-top:2em;margin-bottom:1em;border-bottom:1px solid #ff9800;padding-bottom:.5em}.about-card p{margin:1em 0;line-height:1.6}.about-card ul{list-style:none;padding:0}.about-card li{background:#333;margin-bottom:1em;padding:1em;border-radius:5px;border-left:5px solid #ff9800}.about-card li strong{color:#ff9800}.about-card .credit{margin-top:2em;text-align:center;font-style:italic;color:#aaa}.about-card .credit a{color:#ff9800;text-decoration:none;transition:text-decoration .3s ease}.about-card .credit a:hover{text-decoration:underline}.user-form-container{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:2em;background-color:#1a1a1a}.user-form{background:#2c2c2c;padding:2em;border-radius:10px;box-shadow:0 4px 6px #0000001a;width:100%;max-width:500px;border:1px solid #ff9800}.user-form h2{text-align:center;margin-bottom:1em;color:#ff9800}.user-form input,.user-form textarea{width:100%;padding:.8em;margin-bottom:1em;border-radius:5px;border:1px solid #444;background-color:#333;color:#fff;box-sizing:border-box}.image-preview-container{display:flex;flex-direction:column;align-items:center;margin-bottom:1em}.image-preview{width:150px;height:150px;border-radius:50%;object-fit:cover;margin-bottom:1em;border:3px solid #ff9800}.file-input-container{display:flex;align-items:center;justify-content:space-between;margin-bottom:1em}.user-form input[type=file]{border:none;background:none;padding:0}.remove-photo-btn{background-color:#2c2c2c;color:#fff;border:none;border-radius:50%;width:30px;height:30px;font-size:1.2em;font-weight:700;line-height:1;cursor:pointer;transition:background-color .3s ease}.user-form textarea{resize:vertical;min-height:100px}.user-form button[type=submit]{width:100%;padding:1em;border:none;border-radius:5px;background:#ff9800;color:#000;font-weight:700;cursor:pointer;transition:background-color .3s ease,color .3s ease}.user-form button[type=submit]:hover{background-color:#000;color:#2a2a2a}.user-form label{color:#fff;display:block;margin-bottom:.5em}.user-form input::placeholder,.user-form textarea::placeholder{color:#bdbdbd;opacity:1}.user-form input,.user-form textarea{color:#fff;caret-color:#fff}.user-form input:-webkit-autofill,.user-form textarea:-webkit-autofill{-webkit-text-fill-color:#fff!important;transition:background-color 9999s ease-out 0s}.App{background-color:#1a1a1a;color:#fff;min-height:100vh}.content{padding:2em}.app-header{background:#222;border-bottom:2px solid #ff9800;padding:0 16px;position:relative}.main-nav{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}.nav-logo a{color:#ff9800;font-size:1.8em;font-weight:700;text-decoration:none;margin-right:16px}.nav-links{display:flex;gap:14px;margin-right:auto;align-items:center}.nav-links a{color:#fff;text-decoration:none;font-size:1.2em;transition:color .3s ease}.nav-links a:hover{color:#ff9800}.auth-links{display:flex;align-items:center}.auth-links a{color:#fff;text-decoration:none;margin-left:1.5em;font-size:1.1em;padding:.5em;border-radius:5px;transition:color .3s ease}.auth-links a:hover{background-color:#000;color:#2a2a2a;transition:background-color .3s ease,color .3s ease;margin-left:1.5em}.logout-button{background:none;color:red;padding:.5em 1em;border-radius:5px;cursor:pointer;transition:background-color .3s ease,color .3s ease;margin-left:1.5em}.logout-button:hover{background-color:#000;color:#2a2a2a}.menu-toggle{display:none;background:none;border:none;color:#fff;font-size:2em;cursor:pointer}.directory-container{padding:2em}.directory-title{color:#ff9800;text-align:center;margin-bottom:1.5em}.user-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2em}.user-card{background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border:1px solid #ff9800;border-radius:10px;padding:1.5em;box-shadow:0 4px 8px #0003;transition:transform .3s ease,box-shadow .3s ease}.user-card:hover{transform:translateY(-5px);box-shadow:0 8px 16px #0000004d}.user-card a{text-decoration:none;color:#fff}.user-card-header h3{color:#ff9800;margin-top:0;margin-bottom:1em;font-size:1.5em}.user-card-body p{margin:.5em 0;color:#f0f0f0}.user-card-body strong{color:#ff9800}@media (max-width: 768px){.menu-toggle{display:block}.nav-links,.auth-links{display:none;flex-direction:column;width:100%;align-items:center;background-color:#333}.nav-links{padding:1em 0}.auth-links{padding:1em 0;border-top:1px solid #444}.nav-links.active,.auth-links.active{display:flex}.nav-links a,.auth-links a,.auth-links .logout-button{padding:.8em 0;width:100%;text-align:center;margin:0}}.user-detail-container{display:flex;justify-content:center;align-items:flex-start;padding:40px 20px;min-height:100vh;color:#fff}.user-detail-card{background:#2c2c2c;border-radius:15px;box-shadow:0 10px 30px #00000080;max-width:700px;width:100%;padding:30px;display:flex;flex-direction:column;border:1px solid #ff6600}.user-detail-header{display:flex;align-items:center;margin-bottom:30px;border-bottom:2px solid #ff6600;padding-bottom:20px}.user-avatar img{width:150px;height:150px;border-radius:50%;object-fit:cover;border:5px solid #ff6600;margin-right:30px}.placeholder-avatar{width:150px;height:150px;border-radius:50%;background-color:#2a2a2a;border:5px solid #ff6600;display:flex;justify-content:center;align-items:center;margin-right:30px;font-size:1.5em;color:#fff;font-weight:700}.user-info{flex-grow:1}.user-info h2{margin:0;font-size:2.5em;color:#f60;font-weight:700}.user-info p{margin:5px 0 0;font-size:1.2em;color:#ccc}.user-detail-body{font-size:1.1em}.user-detail-body p{margin:15px 0;line-height:1.8;color:#ddd}.user-detail-body strong{color:#f60;font-weight:600}.user-detail-body a{color:#007bff;text-decoration:none;transition:color .3s}.user-detail-body a:hover{color:#0056b3}.card-actions{display:flex;justify-content:flex-end;align-items:center;margin-top:30px;gap:15px}.vcf-button,.edit-button{color:#fff;border:none;padding:12px 25px;border-radius:8px;cursor:pointer;text-decoration:none;font-size:1.1em;font-weight:600;transition:background-color .3s,transform .2s;box-sizing:border-box;text-align:center}.vcf-button{background-color:#28a745}.edit-button{background-color:#007bff}.vcf-button:hover,.edit-button:hover{background-color:#000;transform:translateY(-2px);color:#2a2a2a}@media (max-width: 768px){.user-detail-header{flex-direction:column;text-align:center}.user-avatar img,.placeholder-avatar{margin-right:0;margin-bottom:20px}.card-actions{flex-direction:column;align-items:stretch}.vcf-button,.edit-button{width:100%}}.az-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:.5em;margin-bottom:2em}.az-nav button{background:none;border:1px solid #ff9800;color:#ff9800;padding:.5em;cursor:pointer;transition:background-color .3s,color .3s}.az-nav button.active,.az-nav button:hover{background-color:#000;color:#2a2a2a}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#1a1a1a;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#fff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}