:root {
  --primary: #7C3AED;
  --secondary: #14B8A6;
  --accent: #3B82F6;
  --dark-bg: #0F172A;
  --light-bg: #F8FAFC;
  --card-dark: rgba(255,255,255,0.05);
  --card-light: rgba(0,0,0,0.02);
  --text-dark: #F1F5F9;
  --text-light: #0F172A;
  --border-dark: rgba(255,255,255,0.1);
  --border-light: rgba(0,0,0,0.1);
  --glass-dark: rgba(15,23,42,0.8);
  --glass-light: rgba(248,250,252,0.8);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--dark-bg);
  color: var(--text-dark);
  transition: all .3s ease;
  min-height: 100vh;
  overflow-x: hidden;
}
body.light { background: var(--light-bg); color: var(--text-light); }

.bg-animated { position: fixed; inset: 0; z-index: -1; background: linear-gradient(135deg,var(--primary),var(--secondary),var(--accent)); background-size:400% 400%; animation: gradientShift 15s ease infinite; }
body.light .bg-animated { background: linear-gradient(135deg,#E0E7FF,#F0FDFA,#EFF6FF); background-size:400% 400%; }
@keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

.glass{ background:var(--glass-dark); backdrop-filter: blur(20px); border:1px solid var(--border-dark); border-radius:16px; box-shadow:0 8px 32px rgba(0,0,0,.3); }
body.light .glass{ background:var(--glass-light); border-color:var(--border-light); box-shadow:0 8px 32px rgba(0,0,0,.1); }

.container{ max-width:1200px; margin:0 auto; padding:0 24px; }

.navbar{ position:fixed; inset:0 auto auto 0; right:0; z-index:1000; padding:16px 0; }
.nav-content{ display:flex; justify-content:space-between; align-items:center; padding:12px 24px; }
.logo{ font-size:24px; font-weight:700; background:linear-gradient(135deg,#7C3AED,#3B82F6); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.nav-links{ display:flex; gap:24px; align-items:center; }
.nav-link{ padding:8px 16px; border-radius:8px; text-decoration:none; color:inherit; transition:all .3s ease; cursor:pointer; }
.nav-link:hover,.nav-link.active{ background:var(--card-dark); transform:translateY(-2px); }
body.light .nav-link:hover,body.light .nav-link.active{ background:var(--card-light); }
.theme-toggle{ background:none; border:none; color:inherit; cursor:pointer; padding:8px; border-radius:8px; transition:all .3s ease; }
.theme-toggle:hover{ background:var(--card-dark); }
body.light .theme-toggle:hover{ background:var(--card-light); }

.main-content{ margin-top:100px; min-height:calc(100vh - 100px); padding:24px 0; }
.view{ display:none; }
.view.active{ display:block; animation:fadeIn .5s ease; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:translateY(0)} }

.auth-container{ display:flex; justify-content:center; align-items:center; min-height:calc(100vh - 100px); }
.auth-card{ width:100%; max-width:400px; padding:40px; }
.auth-title{ text-align:center; font-size:32px; font-weight:600; margin-bottom:8px; }
.auth-subtitle{ text-align:center; opacity:.7; margin-bottom:32px; }

.form-group{ margin-bottom:20px; }
.form-label{ display:block; margin-bottom:8px; font-weight:500; }
.form-input{ width:100%; padding:12px 16px; border:1px solid var(--border-dark); border-radius:8px; background:var(--card-dark); color:inherit; font-size:16px; transition:all .3s ease; }
body.light .form-input{ border-color:var(--border-light); background:var(--card-light); }
.form-input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(124,58,237,0.1); }

.btn{ display:inline-flex; align-items:center; justify-content:center; padding:12px 24px; border:none; border-radius:8px; font-size:16px; font-weight:500; cursor:pointer; transition:all .3s ease; text-decoration:none; gap:8px; }
.btn-primary{ background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#fff; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 8px 32px rgba(124,58,237,.3); }
.btn-secondary{ background:var(--card-dark); color:inherit; border:1px solid var(--border-dark); }
body.light .btn-secondary{ background:var(--card-light); border-color:var(--border-light); }
.btn-secondary:hover{ transform:translateY(-2px) }
.btn-full{ width:100% }

.auth-switch{ text-align:center; margin-top:24px; }
.auth-switch button{ background:none; border:none; color:var(--primary); cursor:pointer; text-decoration:underline; }

.dashboard{ display:grid; gap:24px; }
.welcome-section{ padding:32px; text-align:center; }
.welcome-title{ font-size:28px; font-weight:600; margin-bottom:8px; }
.welcome-subtitle{ opacity:.7; font-size:18px; }
.section{ padding:32px; }
.section-title{ font-size:24px; font-weight:600; margin-bottom:24px; display:flex; align-items:center; gap:12px; }

.work-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap:20px; }
.work-card{ padding:24px; border-radius:12px; background:var(--card-dark); border:1px solid var(--border-dark); transition:all .3s ease; cursor:pointer; }
body.light .work-card{ background:var(--card-light); border-color:var(--border-light); }
.work-card:hover{ transform:translateY(-4px); box-shadow:0 12px 48px rgba(0,0,0,.2); }
.work-title{ font-size:18px; font-weight:600; margin-bottom:12px; }
.work-description{ opacity:.8; margin-bottom:16px; line-height:1.6; }
.work-status{ display:inline-flex; align-items:center; padding:4px 12px; border-radius:20px; font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:.5px }
.status-available{ background:rgba(20,184,166,.2); color:var(--secondary) }
.status-in_progress{ background:rgba(59,130,246,.2); color:var(--accent) }
.status-completed{ background:rgba(34,197,94,.2); color:#22C55E }
.work-actions{ margin-top:16px; display:flex; gap:12px }

.admin-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap:24px; }
.stats-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:16px; margin-bottom:32px }
.stat-card{ padding:24px; text-align:center; border-radius:12px; background:var(--card-dark); border:1px solid var(--border-dark) }
body.light .stat-card{ background:var(--card-light); border-color:var(--border-light) }
.stat-number{ font-size:32px; font-weight:700; color:var(--primary); margin-bottom:8px }
.stat-label{ opacity:.7; font-size:14px }

.form-textarea{ width:100%; padding:12px 16px; border:1px solid var(--border-dark); border-radius:8px; background:var(--card-dark); color:inherit; font-size:16px; font-family:inherit; resize:vertical; min-height:100px; transition:all .3s ease }
body.light .form-textarea{ border-color:var(--border-light); background:var(--card-light) }
.form-textarea:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(124,58,237,.1) }
.form-select{ width:100%; padding:12px 16px; border:1px solid var(--border-dark); border-radius:8px; background:var(--card-dark); color:inherit; font-size:16px; cursor:pointer }
body.light .form-select{ border-color:var(--border-light); background:var(--card-light) }

.users-list{ display:flex; flex-direction:column; gap:12px }
.user-item{ display:flex; align-items:center; justify-content:space-between; padding:16px; background:var(--card-dark); border:1px solid var(--border-dark); border-radius:8px }
body.light .user-item{ background:var(--card-light); border-color:var(--border-light) }
.user-info{ flex:1 }
.user-name{ font-weight:600; margin-bottom:4px }
.user-email{ opacity:.7; font-size:14px }
.user-role{ padding:2px 8px; border-radius:4px; font-size:12px; font-weight:500; text-transform:uppercase }
.role-admin{ background:rgba(124,58,237,.2); color:var(--primary)}
.role-user{ background:rgba(107,114,128,.2); color:#6B7280 }
.user-actions{ display:flex; gap:8px }
.btn-small{ padding:6px 12px; font-size:12px }

.codes-list{ display:grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap:16px }
.code-item{ padding:16px; background:var(--card-dark); border:1px solid var(--border-dark); border-radius:8px; text-align:center }
body.light .code-item{ background:var(--card-light); border-color:var(--border-light) }
.code-value{ font-family:monospace; font-size:18px; font-weight:600; color:var(--primary); margin-bottom:8px }
.code-status{ font-size:12px; opacity:.7 }

.toast{ position:fixed; top:20px; right:20px; padding:16px 24px; border-radius:8px; color:#fff; font-weight:500; z-index:9999; transform:translateX(100%); transition:transform .3s ease }
.toast.show{ transform:translateX(0) }
.toast.success{ background:linear-gradient(135deg,#22C55E,#16A34A) }
.toast.error{ background:linear-gradient(135deg,#EF4444,#DC2626) }

.empty-state{ text-align:center; padding:48px 24px; opacity:.7 }
.empty-icon{ font-size:48px; margin-bottom:16px }
.empty-title{ font-size:18px; font-weight:600; margin-bottom:8px }
.empty-description{ opacity:.8 }

.hidden{ display:none !important }

@media (max-width: 768px){
  .container{ padding:0 16px }
  .nav-content{ padding:12px 16px }
  .nav-links{ gap:16px }
  .auth-card{ padding:24px }
  .section{ padding:24px 16px }
  .work-grid{ grid-template-columns: 1fr }
  .admin-grid{ grid-template-columns: 1fr }
  .stats-grid{ grid-template-columns: repeat(2, 1fr) }
  .user-item{ flex-direction:column; align-items:flex-start; gap:12px }
  .user-actions{ align-self:stretch; justify-content:space-between }
}