@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:#0a0f1a;color:#e5e7eb;line-height:1.5;min-height:100vh}
.bg-animation{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.bg-orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:.25}
.bg-orb-1{width:280px;height:280px;background:#3b82f6;top:-80px;right:-80px;animation:orb1 20s ease-in-out infinite}
.bg-orb-2{width:220px;height:220px;background:#1d4ed8;bottom:-60px;left:-60px;animation:orb2 25s ease-in-out infinite}
@keyframes orb1{0%,100%{transform:translate(0,0)}50%{transform:translate(-50px,50px)}}
@keyframes orb2{0%,100%{transform:translate(0,0)}50%{transform:translate(50px,-50px)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes glow{0%,100%{box-shadow:0 0 12px rgba(59,130,246,.25)}50%{box-shadow:0 0 24px rgba(59,130,246,.45)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes spin{to{transform:rotate(360deg)}}

.navbar{position:sticky;top:0;z-index:100;background:rgba(17,24,39,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(59,130,246,.12);animation:slideDown .4s ease}
.navbar-inner{max-width:800px;margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center;height:48px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:#f9fafb;font-weight:700;font-size:14px}
.logo-badge{width:28px;height:28px;background:linear-gradient(135deg,#3b82f6,#1d4ed8);border-radius:7px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;animation:glow 3s ease-in-out infinite}
.nav-links{display:flex;align-items:center;gap:6px;list-style:none}
.nav-links a{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:6px;text-decoration:none;color:#9ca3af;font-size:12px;font-weight:500;transition:all .2s}
.nav-links a:hover{background:rgba(59,130,246,.1);color:#e5e7eb}
.nav-links .nav-cta{background:rgba(239,68,68,.08);color:#ef4444}
.nav-links .nav-cta:hover{background:rgba(239,68,68,.15)}
.nav-toggle{display:none;background:none;border:none;color:#e5e7eb;font-size:16px;cursor:pointer}

.main{position:relative;z-index:1;padding:32px 16px 48px}
.container{max-width:440px;margin:0 auto}

.header{text-align:center;margin-bottom:24px;animation:fadeInUp .5s ease}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.2);border-radius:16px;font-size:10px;font-weight:600;color:#3b82f6;margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px}
.badge-dot{width:6px;height:6px;background:#22c55e;border-radius:50%;animation:pulse 2s ease-in-out infinite}
.header h1{font-size:22px;font-weight:800;color:#f9fafb;margin-bottom:6px}
.text-blue{color:#3b82f6}
.header p{font-size:13px;color:#6b7280}

.card{background:#111827;border:1px solid #1f2937;border-radius:12px;padding:24px;animation:fadeInUp .5s ease .1s both}
.card-header{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#3b82f6;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #1f2937}

.code-box{padding:20px;background:#0a0f1a;border:1px solid #1f2937;border-radius:8px;text-align:center;font-size:13px;color:#6b7280;transition:all .2s}
.code-box.loading{color:#6b7280}

.status{text-align:center;font-size:12px;font-weight:500;margin-top:10px;min-height:16px}
.status.ok{color:#22c55e}
.status.err{color:#ef4444}

.actions{display:flex;align-items:center;gap:10px;margin-top:14px}

.cooldown{display:none;font-size:12px;font-weight:600;color:#3b82f6}

.btn{border:none;border-radius:8px;font-family:inherit;font-weight:600;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:6px}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-primary{flex:1;padding:10px 16px;font-size:13px;background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff}
.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 14px rgba(59,130,246,.35)}
.btn-outline{background:transparent;border:1px solid #1f2937;color:#9ca3af;padding:10px 14px;font-size:13px}
.btn-outline:hover{background:#1f2937;color:#e5e7eb}

.divider{height:1px;background:#1f2937;margin:18px 0}

.info h4{font-size:12px;font-weight:600;color:#9ca3af;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.info h4 i{color:#3b82f6;font-size:11px}
.info ol{padding-left:16px;font-size:12px;color:#6b7280}
.info li{margin-bottom:4px}
.info strong{color:#d1d5db}

.code-item{padding:14px;border-radius:8px;margin-bottom:10px;border:1px solid #1f2937;background:#0a0f1a;transition:all .2s}
.code-item:last-child{margin-bottom:0}
.code-item.active{border-color:rgba(59,130,246,.2);background:rgba(59,130,246,.03)}
.code-item.expired{opacity:.4}
.code-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:11px;color:#6b7280;font-weight:500}
.timer{font-weight:600;font-size:11px;font-variant-numeric:tabular-nums}
.timer.ok{color:#22c55e}
.timer.warning{color:#ef4444}
.timer.danger{color:#ef4444}
.code-value{font-size:28px;font-weight:800;letter-spacing:6px;text-align:center;color:#3b82f6;font-variant-numeric:tabular-nums}
.code-value.small{font-size:13px;letter-spacing:normal;color:#6b7280;font-weight:500}

.footer{text-align:center;padding:16px;font-size:11px;color:#4b5563;border-top:1px solid #111827}

.fa-spin{animation:spin 1s linear infinite}

.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;position:relative;z-index:1}
.auth-card{width:100%;max-width:380px;background:#111827;border:1px solid #1f2937;border-radius:12px;padding:32px}
.auth-header{text-align:center;margin-bottom:24px}
.auth-logo{width:48px;height:48px;background:linear-gradient(135deg,#3b82f6,#1d4ed8);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;margin:0 auto 14px;animation:glow 3s ease-in-out infinite}
.auth-header h1{font-size:18px;font-weight:700;color:#f9fafb;margin-bottom:4px}
.auth-header p{font-size:12px;color:#6b7280}
.auth-footer{text-align:center;margin-top:16px;font-size:12px;color:#6b7280}
.auth-footer a{color:#3b82f6;text-decoration:none;font-weight:600}
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:12px;font-weight:600;color:#d1d5db;margin-bottom:6px}
.form-group input{width:100%;padding:10px 12px;border:1px solid #1f2937;border-radius:8px;font-size:13px;font-family:inherit;background:#0a0f1a;color:#f9fafb;transition:border .2s}
.form-group input:focus{outline:none;border-color:#3b82f6}
.btn-full{width:100%;justify-content:center}
.alert{padding:10px 12px;border-radius:8px;font-size:12px;margin-bottom:14px}
.alert-error{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.15);color:#ef4444}
.alert-success{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.15);color:#22c55e}

.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px;animation:fadeInUp .5s ease}
.stat-card{background:#111827;border:1px solid #1f2937;border-radius:10px;padding:16px;text-align:center}
.stat-val{font-size:24px;font-weight:800;color:#f9fafb}
.stat-val.green{color:#22c55e}
.stat-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#6b7280;margin-top:2px}

.add-form{display:flex;gap:8px}
.add-form input{flex:1;padding:9px 12px;border:1px solid #1f2937;border-radius:8px;font-size:13px;font-family:inherit;background:#0a0f1a;color:#f9fafb}
.add-form input:focus{outline:none;border-color:#3b82f6}

.user-list{display:flex;flex-direction:column;gap:8px}
.user-item{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:#0a0f1a;border:1px solid #1f2937;border-radius:8px;transition:border .2s}
.user-item:hover{border-color:rgba(59,130,246,.2)}
.user-name{display:flex;align-items:center;gap:6px;font-size:13px;color:#e5e7eb}
.user-date{font-size:11px;color:#4b5563;margin-top:2px}
.user-actions{display:flex;gap:6px}
.btn-icon{width:28px;height:28px;padding:0;border:none;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;transition:all .2s}
.btn-icon.green{background:rgba(34,197,94,.1);color:#22c55e}
.btn-icon.green:hover{background:#22c55e;color:#fff}
.btn-icon.yellow{background:rgba(234,179,8,.1);color:#eab308}
.btn-icon.yellow:hover{background:#eab308;color:#000}
.btn-icon.red{background:rgba(239,68,68,.08);color:#ef4444}
.btn-icon.red:hover{background:#ef4444;color:#fff}
.tag{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:600}
.tag-admin{background:rgba(139,92,246,.1);color:#a78bfa}
.tag-user{background:rgba(59,130,246,.1);color:#3b82f6}
.tag-off{background:rgba(239,68,68,.08);color:#ef4444}
.tag-you{background:rgba(34,197,94,.1);color:#22c55e}
.empty{text-align:center;padding:32px;color:#4b5563;font-size:13px}
.empty i{font-size:28px;margin-bottom:8px;display:block}

@media(max-width:600px){
    .nav-links{display:none;position:absolute;top:48px;left:0;right:0;background:rgba(17,24,39,.95);backdrop-filter:blur(14px);border-bottom:1px solid #1f2937;padding:8px 16px;flex-direction:column;gap:4px}
    .nav-links.show{display:flex}
    .nav-toggle{display:block}
    .code-value{font-size:22px;letter-spacing:4px}
    .stats-grid{grid-template-columns:repeat(3,1fr);gap:8px}
    .add-form{flex-direction:column}
}