:root{--bg:#0a0e1a;--bg2:#0f1428;--surface:rgba(15,20,40,0.4);--surface-hover:rgba(15,20,40,0.6);--border:rgba(0,212,255,0.08);--border-hover:rgba(0,212,255,0.15);--cyan:#00d4ff;--purple:#7c5cfc;--gradient:linear-gradient(135deg,#0078d4,#00d4ff);--gradient-text:linear-gradient(135deg,#00d4ff,#7c5cfc);--text:#c8d0e0;--text-dim:rgba(200,208,224,0.35);--text-muted:rgba(200,208,224,0.5);--green:#2ed573;--red:#e94560;--yellow:#ffc107;--radius:8px;--radius-lg:12px;--shadow:0 10px 40px rgba(0,0,0,0.3)}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC',sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;min-height:100vh}
a{color:inherit;text-decoration:none}
::selection{background:rgba(0,212,255,0.2)}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:rgba(0,212,255,0.1);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(0,212,255,0.2)}
.bg-grid{position:fixed;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(rgba(0,212,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,0.03) 1px,transparent 1px);background-size:60px 60px;z-index:0;pointer-events:none}
.bg-glow{position:fixed;border-radius:50%;filter:blur(100px);pointer-events:none;z-index:0}
.bg-glow-1{width:700px;height:700px;background:radial-gradient(circle,rgba(0,150,255,0.08),transparent);top:-20%;left:-10%;animation:glowPulse 8s ease-in-out infinite}
.bg-glow-2{width:500px;height:500px;background:radial-gradient(circle,rgba(0,212,255,0.06),transparent);bottom:-10%;right:-5%;animation:glowPulse 10s ease-in-out infinite 2s}
@keyframes glowPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(1.2)}}
.scanline{position:fixed;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(0,212,255,0.3),transparent);z-index:1;animation:scanMove 4s linear infinite;pointer-events:none;opacity:0.3}
@keyframes scanMove{0%{top:0}100%{top:100%}}
.logo-cyber{font-size:22px;font-weight:800;background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-0.5px}
.btn{padding:8px 22px;border-radius:6px;border:none;font-size:13px;font-weight:600;cursor:pointer;transition:all .3s;letter-spacing:0.3px;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.btn-ghost{border:1px solid var(--border);background:transparent;color:var(--text-muted)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 20px rgba(0,212,255,0.1)}
.btn-cyber{background:var(--gradient);color:var(--bg);position:relative;overflow:hidden}
.btn-cyber::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent,rgba(255,255,255,0.1),transparent);transform:rotate(45deg);transition:all .5s;opacity:0}
.btn-cyber:hover::before{opacity:1;transform:rotate(45deg) translate(50%,50%)}
.btn-cyber:hover{box-shadow:0 0 30px rgba(0,212,255,0.3);transform:translateY(-1px)}
.btn-sm{padding:5px 14px;font-size:12px}
.btn-xs{padding:3px 10px;font-size:11px}
.btn-danger{background:rgba(233,69,96,0.12);color:var(--red)}
.btn-danger:hover{background:rgba(233,69,96,0.2)}
.btn-success{background:rgba(46,213,115,0.12);color:var(--green)}
.btn-success:hover{background:rgba(46,213,115,0.2)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);backdrop-filter:blur(20px);position:relative}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,212,255,0.1),transparent);border-radius:var(--radius-lg) var(--radius-lg) 0 0}
input,select,textarea{width:100%;padding:10px 14px;background:rgba(10,14,26,0.6);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:13px;outline:none;transition:all .3s;font-family:inherit}
input:focus,select:focus,textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,212,255,0.08)}
input::placeholder{color:rgba(200,208,224,0.12)}
select option{background:var(--bg2)}
label{display:block;font-size:12px;color:var(--text-dim);margin-bottom:6px;letter-spacing:0.5px;text-transform:uppercase}
.form-group{margin-bottom:16px}
.badge{display:inline-block;padding:2px 10px;border-radius:12px;font-size:11px;font-weight:600}
.badge-active,.badge-success{background:rgba(46,213,115,0.12);color:var(--green)}
.badge-disabled,.badge-expired,.badge-cancelled{background:rgba(233,69,96,0.1);color:var(--red)}
.badge-pending{background:rgba(255,193,7,0.12);color:var(--yellow)}
.badge-admin{background:rgba(124,92,252,0.12);color:var(--purple)}
.alert{padding:10px 14px;border-radius:var(--radius);margin-bottom:16px;font-size:13px}
.alert-success{background:rgba(46,213,115,0.08);border:1px solid rgba(46,213,115,0.15);color:var(--green)}
.alert-error{background:rgba(233,69,96,0.08);border:1px solid rgba(233,69,96,0.15);color:var(--red)}
table{width:100%;border-collapse:collapse}
th{text-align:left;padding:10px 16px;font-size:11px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.5px;border-bottom:1px solid var(--border);background:rgba(0,212,255,0.02)}
td{padding:10px 16px;font-size:13px;border-bottom:1px solid rgba(0,212,255,0.03)}
tr:hover td{background:rgba(0,212,255,0.02)}
tr:last-child td{border-bottom:none}
.pagination{display:flex;justify-content:center;gap:6px;margin-top:20px}
.pagination a{padding:6px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);font-size:13px;color:var(--text-dim);transition:all .3s}
.pagination a:hover,.pagination a.active{background:rgba(0,212,255,0.1);color:var(--cyan);border-color:var(--cyan)}
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:200;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.modal.active{display:flex}
.modal-box{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;width:100%;max-width:440px;max-height:80vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.5)}
.modal-box h3{font-size:17px;font-weight:600;margin-bottom:20px;color:#e8edf5}
.modal-footer{display:flex;gap:10px;margin-top:20px}
.btn-cancel{flex:1;padding:8px;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-dim);cursor:pointer;font-size:13px;transition:all .3s}
.btn-cancel:hover{background:rgba(255,255,255,0.08);color:var(--text)}
.btn-confirm{flex:2;padding:8px;background:var(--gradient);border:none;border-radius:var(--radius);color:var(--bg);font-weight:600;cursor:pointer;font-size:13px}
.btn-confirm:hover{box-shadow:0 0 20px rgba(0,212,255,0.2)}
.sidebar{width:240px;background:var(--bg2);border-right:1px solid var(--border);min-height:100vh;position:fixed;left:0;top:0;display:flex;flex-direction:column;z-index:10}
.sidebar .logo{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.sidebar .nav{padding:12px 0;flex:1}
.sidebar .nav a{display:flex;align-items:center;gap:12px;padding:10px 24px;font-size:14px;color:var(--text-dim);transition:all .15s;border-right:2px solid transparent}
.sidebar .nav a:hover{color:var(--text);background:rgba(0,212,255,0.03)}
.sidebar .nav a.active{color:var(--cyan);background:rgba(0,212,255,0.06);border-right-color:var(--cyan)}
.sidebar .nav a .icon{width:20px;text-align:center;font-size:16px}
.sidebar .user-section{padding:16px 24px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px}
.sidebar .user-section .avatar{width:32px;height:32px;border-radius:50%;background:var(--gradient);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--bg)}
.sidebar .user-section .name{font-size:13px;color:var(--text-muted)}
.sidebar .user-section .logout{font-size:12px;color:var(--text-dim);margin-left:auto;transition:all .3s}
.sidebar .user-section .logout:hover{color:var(--cyan)}
.main{margin-left:240px;flex:1;min-height:100vh}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 32px;border-bottom:1px solid var(--border);background:var(--bg)}
.topbar h2{font-size:18px;font-weight:600}
.content{padding:28px 32px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;position:relative}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,212,255,0.1),transparent);border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.stat-card .label{font-size:12px;color:var(--text-dim);margin-bottom:6px;text-transform:uppercase;letter-spacing:0.5px}
.stat-card .value{font-size:26px;font-weight:700}
.navbar-cyber{display:flex;justify-content:space-between;align-items:center;padding:14px 24px;background:rgba(10,14,26,0.8);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);position:relative}
.navbar-cyber::after{content:'';position:absolute;bottom:-1px;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(0,212,255,0.2),transparent)}
@media(max-width:768px){
.sidebar{width:60px}
.sidebar .logo span,.sidebar .nav a span:not(.icon),.sidebar .user-section .name,.sidebar .user-section .logout{display:none}
.main{margin-left:60px}
.stats{grid-template-columns:1fr 1fr}
.content{padding:20px 16px}
.topbar{padding:14px 16px}
}