*{box-sizing:border-box}:root{--primary-color: #18181b;--secondary-color: #71717a;--secondary-color-alt: #a1a1aa;--accent-color: #10b981;--background-color: #ffffff;--background-color-alt: #e4e4e7;--background-color-light: #f4f4f5;--sidebar-width: 300px;--border-radius: 4px;--font-size-base: 14px;--font-size-lg: 20px;--font-size-xl: 40px;--font-size-sm: 13px;--font-size-xs: 12px;--font-color: #18181b;--card-width: 350px;--icon-width: 16px;--icon-width-lg: 20px}html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:var(--font-size-base);color:var(--font-color)}.app-layout{min-height:100vh;display:flex;width:100%}.app-container{display:flex;height:100vh;width:100%;flex-direction:column}.sidebar-content-wrapper{display:flex;flex:1 1 auto;min-height:0}.main-content{flex:1 1 auto;background:var(--background-color);max-width:83rem;width:80%;height:100%;padding:2rem;margin:auto;overflow:auto;scrollbar-width:none}@media(max-width:1200px){.main-content{width:100%}}.navbar{background-color:var(--background-color);color:var(--primary-color);display:flex;justify-content:space-between;align-items:center;height:80px;border-bottom:1px solid var(--background-color-alt)}.nav-brand .brand-link{font-size:var(--font-size-lg);font-weight:700;color:var(--primary-color);text-decoration:none}.nav-links{display:flex;align-items:center;gap:20px;padding:1rem 2rem}.nav-link{color:var(--primary-color);text-decoration:none;padding:.5rem 1rem;border-radius:var(--border-radius);transition:background-color .3s ease,color .2s;font-size:var(--font-size-base)}.nav-link:hover{color:var(--accent-color);background-color:var(--background-color)}.nav-link.active{background-color:var(--accent-color);color:var(--background-color)}.user-welcome{color:var(--secondary-color);font-size:var(--font-size-sm)}.logout-btn{all:unset;color:var(--secondary-color);border-left:1px solid var(--background-color-alt);padding:.5rem 1rem;border-radius:var(--border-radius);cursor:pointer;transition:background-color .3s ease;font-size:var(--font-size-base);display:inline-block;font-weight:500}.logout-btn:hover{color:var(--primary-color)}.nav-icon{width:24px;height:24px;cursor:pointer;color:var(--secondary-color)}.nav-icon svg{width:100%;height:100%}.nav-icon:hover{color:var(--primary-color)}.nav-bar-logo{display:flex;align-items:center;gap:10px;font-size:1.5rem;font-weight:700;padding:20px 30px;width:var(--sidebar-width);height:72px;border-right:1px solid var(--background-color-alt)}.nav-bar-icon{font-size:1.8rem;font-weight:700;color:var(--primary-color);display:flex;align-items:center;width:max-content}.nav-bar-icon svg{width:32px;height:32px}@media(max-width:768px){.navbar{padding:1rem;flex-direction:column;gap:1rem}.nav-links{gap:1rem}}.sidebar-container{width:var(--sidebar-width);min-width:var(--sidebar-width);background:var(--background-color);color:var(--primary-color);min-height:100vh;box-sizing:border-box;z-index:100;display:flex;flex-direction:column;align-items:flex-start;border-right:1px solid var(--background-color-alt)}.sidebar-section{width:100%;padding:10px}.sidebar-section h3{font-size:var(--font-size-xs);font-weight:700;color:var(--secondary-color-alt);letter-spacing:1px;text-transform:uppercase;padding:10px 20px;margin:0}.sidebar-section ul{list-style:none;padding:0;margin:0}.sidebar-section ul li{font-size:var(--font-size-base);font-weight:500;cursor:pointer;transition:color .2s;border-radius:var(--border-radius);padding:12px 20px;display:flex;align-items:center}.sidebar-section ul li:hover{color:var(--secondary-color);cursor:pointer;transition:color .2s}.sidebar-section ul li.active{background:var(--background-color-alt)}.sidebar-icon{margin-right:10px;display:inline-flex;vertical-align:middle;width:var(--icon-width);height:var(--icon-width)}.sidebar-icon svg{width:100%;height:100%}.sidebar-footer{margin-top:auto;padding:20px 30px;font-size:var(--font-size-sm);color:var(--secondary-color);border-top:1px solid var(--background-color-alt);width:100%;box-sizing:border-box}.sidebar-user-name{font-weight:600;margin:0;padding:0;color:var(--primary-color);font-size:var(--font-size-base)}.sidebar-user-role{margin:0;font-size:var(--font-size-xs);color:var(--secondary-color-alt)}.dashboard-container{background:#fff;display:flex;flex-direction:column;align-items:flex-start}.dashboard-header{text-align:center;margin-bottom:30px}.dashboard-header h1{margin:0;color:#333;font-size:2rem;font-weight:700;width:max-content}.dashboard-header p{margin:0;color:#666;font-size:1.1rem}.dashboard-metrics{display:flex;gap:20px}.metric-card{padding:25px;border-radius:15px;text-align:left;flex:1;border:1px solid var(--background-color-alt);width:var(--card-width)}.metric-card p{margin:0;color:var(--secondary-color-alt);font-size:var(--font-size-sm);text-transform:uppercase;font-weight:600}.metric-card h2{margin:0;color:#222;font-size:var(--font-size-xl);font-weight:700}@media(max-width:768px){.dashboard-container{padding:15px}.dashboard-header h1{font-size:1.3rem}.dashboard-header p{font-size:1rem}}.auth-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#f0f4f8;padding:20px}.auth-form{width:100%;max-width:400px;background:#fff;padding:30px;border-radius:10px;box-shadow:0 4px 12px #0000001a}.auth-button{width:100%;padding:.75rem;background:#3182ce;color:#fff;border:none;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:background-color .3s ease}.login-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);padding:1rem}.login-form{background:#fff;padding:2.5rem;border-radius:12px;box-shadow:0 10px 30px #0003;width:100%;max-width:420px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.login-form h2{text-align:center;margin-bottom:2rem;color:#2d3748;font-size:1.8rem;font-weight:600}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;color:#4a5568;font-weight:500;font-size:.95rem}.form-group input{width:100%;padding:.875rem;border:2px solid #e2e8f0;border-radius:8px;font-size:1rem;transition:all .3s ease;background-color:#f8fafc}.form-group input:focus{outline:none;border-color:#4299e1;background-color:#fff;box-shadow:0 0 0 3px #4299e11a}.login-button{width:100%;padding:.875rem;background:linear-gradient(135deg,#4299e1,#3182ce);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;margin-top:.5rem}.login-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 15px #4299e166}.login-button:disabled{background:#a0aec0;cursor:not-allowed;transform:none;box-shadow:none}.login-link{text-align:center;margin-top:1.5rem;color:#718096;font-size:.95rem}.login-link a{color:#4299e1;text-decoration:none;font-weight:600;transition:color .3s ease}.login-link a:hover{color:#3182ce;text-decoration:underline}.error-message{background-color:#fed7d7;color:#c53030;padding:.875rem;border-radius:8px;margin-bottom:1.5rem;border-left:4px solid #f56565;font-size:.95rem}.success-message{background-color:#c6f6d5;color:#276749;padding:.875rem;border-radius:8px;margin-bottom:1.5rem;border-left:4px solid #48bb78;font-size:.95rem}@media(max-width:480px){.login-container{padding:.5rem}.login-form{padding:2rem 1.5rem}.login-form h2{font-size:1.5rem}}.notfound-container{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);padding:20px}.notfound-content{text-align:center;background:#fff;border-radius:12px;padding:60px 40px;box-shadow:0 20px 60px #0000004d;max-width:500px;animation:slideIn .6s ease-out}.notfound-code{font-size:120px;font-weight:900;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0;line-height:1}.notfound-title{font-size:32px;font-weight:700;color:#333;margin:20px 0 10px}.notfound-message{font-size:16px;color:#666;margin:0 0 40px;line-height:1.6}.notfound-actions{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}.notfound-btn{padding:12px 30px;font-size:16px;font-weight:600;border:none;border-radius:6px;cursor:pointer;text-decoration:none;display:inline-block;transition:all .3s ease}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 20px #667eea66}.btn-secondary{background:#f0f0f0;color:#333}.btn-secondary:hover{background:#e0e0e0;transform:translateY(-2px)}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(max-width:600px){.notfound-content{padding:40px 20px}.notfound-code{font-size:80px}.notfound-title{font-size:24px}.notfound-actions{flex-direction:column}.notfound-btn{width:100%}}.websites-perpage-bar{display:flex;align-items:center;gap:8px;font-size:1rem}.websites-perpage-bar label{color:#333;font-weight:500}.websites-perpage-bar select{padding:6px 12px;border-radius:4px;border:1px solid #ccc;font-size:1rem}.pagination{display:flex;justify-content:end;align-items:center;gap:6px;margin:24px 0 0}.pagination button{background:#f4f4f4;border:1px solid #ccc;color:#333;padding:6px 14px;border-radius:4px;font-size:1rem;cursor:pointer;transition:background .2s,color .2s}.pagination button.active,.pagination button:focus{background:#007bff;color:#fff;border-color:#007bff}.pagination button:disabled{background:#e0e0e0;color:#aaa;cursor:not-allowed}.websites-container{background:#fff;border-radius:8px;display:flex;flex-direction:column;align-items:flex-start}.websites-header{text-align:center;margin-bottom:30px}.websites-header h1{margin:0;color:#333;font-size:2rem;font-weight:700;width:max-content}.websites-header p{margin:0;color:#666;font-size:1.1rem}.websites-content{width:100%;box-sizing:border-box}.websites-controls-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.websites-search-bar{display:flex;gap:8px;justify-content:end;position:relative}.websites-search-bar input[type=text]{padding:10px 12px;border:1px solid #ccc;border-radius:10px;font-size:1rem;width:30rem}.websites-search-bar button{margin:0;border:none;background:none;padding:0;cursor:pointer;position:absolute;top:9px;right:16px}.websites-search-bar button svg{width:20px;height:20px;color:var(--secondary-color)}.websites-search-bar button:hover{background:#005f8d}.per-page-input{padding:10px 12px;border:1px solid #ccc;border-radius:10px;font-size:1rem}.websites-list{border:1px solid var(--background-color-alt);border-radius:8px}.websites-list table{width:100%;border-collapse:collapse;background:#fafbfc;border-radius:8px;overflow:hidden;box-shadow:0 1px 4px #0000000a}.websites-list th,.websites-list td{padding:12px 16px;text-align:left}.websites-list th{background:#f4f6f8;color:#333;font-weight:600;border-bottom:2px solid #eaeaea}.websites-list td{border-bottom:1px solid #eaeaea;color:#444;vertical-align:middle;background-color:var(--background-color)}.websites-list tr:last-child td{border-bottom:none}.websites-list a{color:#0073aa;text-decoration:none;word-break:break-all}.websites-list a:hover{text-decoration:underline}.websites-list button{margin-right:8px;border:none;border-radius:4px;font-size:.95rem;cursor:pointer;color:#333;transition:background .2s;background-color:transparent}.websites-list button svg{width:24px;height:24px;vertical-align:middle;color:var(--secondary-color)}.websites-list button svg:hover{color:var(--primary-color)}.websites-list td:nth-child(3){font-weight:600;text-transform:capitalize}.websites-list td:nth-child(3)[data-status=active],.websites-list td:nth-child(3):contains("active"){color:#27ae60}.websites-list td:nth-child(3)[data-status=inactive],.websites-list td:nth-child(3):contains("inactive"){color:#e74c3c}.edit-website-container{background:#fff;border-radius:8px;display:flex;flex-direction:column;align-items:flex-start}.edit-website-header{text-align:center;margin-bottom:30px}.edit-website-header h2{margin:0;color:#333;font-size:2rem;font-weight:700;width:max-content}.edit-website-header p{margin:0;color:#666;font-size:1.1rem}.edit-website-form{width:100%}.edit-website-form .form-group{margin-bottom:18px}.edit-website-form label{display:block;margin-bottom:6px;font-weight:500}.edit-website-form input,.edit-website-form select{width:100%;padding:8px 10px;border:1px solid #ccc;border-radius:4px;font-size:1rem}.edit-website-form button{width:100%;padding:10px;background:#007bff;color:#fff;border:none;border-radius:4px;font-size:1rem;cursor:pointer;margin-top:10px;transition:background .2s}.confirm-popup-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0000004d;display:flex;align-items:center;justify-content:center;z-index:1000}.confirm-popup{background:#fff;padding:50px;border-radius:8px;box-shadow:0 2px 16px #00000026;text-align:center;min-width:300px;margin-bottom:160px}.confirm-popup p{margin:0}.confirm-popup-actions{margin-top:18px;display:flex;gap:16px;justify-content:center}.confirm-btn{background:#d32f2f;color:#fff;border:none;padding:8px 18px;border-radius:4px;font-size:1rem;cursor:pointer;transition:background .2s}.confirm-btn:hover{background:#b71c1c}.cancel-btn{background:#e0e0e0;color:#333;border:none;padding:8px 18px;border-radius:4px;font-size:1rem;cursor:pointer;transition:background .2s}.cancel-btn:hover{background:#bdbdbd}.users-container{background:#fff;border-radius:8px;display:flex;flex-direction:column;align-items:flex-start}.users-header{text-align:center;margin-bottom:30px;display:flex;justify-content:space-between;width:100%;align-items:center}.users-header h1{margin:0;color:#333;font-size:2rem;font-weight:700;width:max-content}.users-header p{margin:0;color:#666;font-size:1.1rem}.add-user-button{padding:10px 20px;background:#28a745;color:#fff;border:none;border-radius:4px;font-size:1rem;cursor:pointer;transition:background .2s}.users-content{width:100%;box-sizing:border-box}.user-card{position:relative;display:flex;align-items:center;justify-content:space-between;width:40rem;border:1px solid var(--background-color-alt);border-radius:8px;padding:25px;margin-bottom:20px}.user-details h3{margin:0}.user-details p{margin:0;color:var(--secondary-color)}.user-meta{display:flex;align-items:center;gap:10px}.user-role{border:1px solid var(--background-color-alt);border-radius:8px;padding:5px 15px;background:var(--background-color-light);color:var(--primary-color);margin:0}.user-actions button{border:none;background:none;cursor:pointer}.user-actions button svg{width:20px;height:20px;color:var(--secondary-color-alt)}.user-actions button:hover svg{color:var(--secondary-color)}.user-actions-popup{position:absolute;right:0;top:40px;background:#fff;border:1px solid #e0e0e0;border-radius:8px;box-shadow:0 4px 16px #00000014;min-width:140px;z-index:10;display:none}.user-action-item{padding:12px 18px;cursor:pointer;color:#333;transition:background .2s}.user-action-item:hover{background:#f5f5f5}.edit-user-container{background:#fff;border-radius:8px;display:flex;flex-direction:column;align-items:flex-start}.edit-user-header{text-align:center;margin-bottom:30px}.edit-user-header h2{margin:0;color:#333;font-size:2rem;font-weight:700;width:max-content}.edit-user-header p{margin:0;color:#666;font-size:1.1rem}.edit-user-form{width:65%}.edit-user-form .form-group{margin-bottom:18px}.edit-user-form label{display:block;margin-bottom:6px;font-weight:500}.edit-user-form input,.edit-user-form select{width:100%;padding:8px 10px;border:1px solid #ccc;border-radius:4px;font-size:1rem}.edit-user-form button{width:100%;padding:10px;background:#007bff;color:#fff;border:none;border-radius:4px;font-size:1rem;cursor:pointer;margin-top:10px;transition:background .2s}.edit-user-form button:hover{background:#0056b3}.error-msg{color:#b00020;background:#ffeaea;padding:8px;border-radius:4px;margin-bottom:12px;text-align:center}.success-msg{color:#155724;background:#d4edda;padding:8px;border-radius:4px;margin-bottom:12px;text-align:center}.loading-page-container{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f8f9fa}.loading-spinner{width:56px;height:56px;border:6px solid #e0e0e0;border-top:6px solid #007bff;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:18px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-text{font-size:1.2rem;color:#333;font-weight:500;letter-spacing:.04em}