code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#0f172a;color:#f8fafc}.auth-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg,#0f172a,#1e293b,#0f172a);position:relative;overflow:hidden}.auth-container:before{content:"";position:absolute;width:500px;height:500px;background:radial-gradient(circle,rgba(59,130,246,.1) 0%,transparent 70%);top:-250px;right:-250px;animation:pulse 4s ease-in-out infinite}.auth-container:after{content:"";position:absolute;width:400px;height:400px;background:radial-gradient(circle,rgba(139,92,246,.1) 0%,transparent 70%);bottom:-200px;left:-200px;animation:pulse 5s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:.5}50%{transform:scale(1.1);opacity:.8}}.auth-card{background:#1e293bf2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:50px 40px;border-radius:20px;box-shadow:0 20px 60px #00000080,0 0 1px #ffffff1a inset;max-width:480px;width:100%;position:relative;z-index:1;border:1px solid rgba(148,163,184,.1)}.auth-logo{text-align:center;margin-bottom:30px}.auth-logo img{width:500px;height:auto;filter:drop-shadow(0 4px 12px rgba(59,130,246,.3))}.auth-card h1{color:#f8fafc;margin-bottom:12px;font-size:32px;text-align:center;font-weight:700;letter-spacing:-.5px}.subtitle{color:#94a3b8;text-align:center;margin-bottom:35px;font-size:15px;line-height:1.5}.login-section{margin-bottom:30px}.form-group{margin-bottom:24px}.form-group label{display:block;color:#f8fafc;margin-bottom:10px;font-weight:600;font-size:14px;letter-spacing:.3px}.form-group input[type=email],.form-group input[type=text]{width:100%;padding:14px 18px;border:2px solid #334155;border-radius:10px;background:#0f172a;color:#f8fafc;font-size:15px;transition:all .3s ease}.form-group input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.form-group input:disabled{opacity:.5;cursor:not-allowed}.file-upload-wrapper{position:relative}.file-input{position:absolute;width:.1px;height:.1px;opacity:0;overflow:hidden;z-index:-1}.file-upload-label{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px 24px;background:linear-gradient(135deg,#334155,#1e293b);color:#f8fafc;border:2px dashed #475569;border-radius:10px;cursor:pointer;transition:all .3s ease;font-weight:600;font-size:15px}.file-upload-label:hover{background:linear-gradient(135deg,#3b82f6,#2563eb);border-color:#3b82f6;border-style:solid;transform:translateY(-2px);box-shadow:0 4px 12px #3b82f64d}.file-icon{font-size:24px}.help-text{color:#94a3b8;font-size:13px;margin-top:8px;display:block;line-height:1.4}.help-text strong{color:#cbd5e1}.error-message{background:linear-gradient(135deg,#fee2e2,#fecaca);color:#991b1b;padding:14px 18px;border-radius:10px;margin-bottom:24px;font-size:14px;border-left:4px solid #dc2626;font-weight:500}.primary-btn{width:100%;padding:16px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border:none;border-radius:10px;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s ease;margin-bottom:12px;letter-spacing:.3px;box-shadow:0 4px 12px #3b82f64d}.primary-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #3b82f666}.primary-btn:active:not(:disabled){transform:translateY(0)}.primary-btn:disabled{background:linear-gradient(135deg,#475569,#334155);cursor:not-allowed;opacity:.6;box-shadow:none}.secondary-btn{width:100%;padding:14px;background:transparent;color:#94a3b8;border:2px solid #334155;border-radius:10px;cursor:pointer;transition:all .3s ease;font-size:15px;font-weight:600;margin-top:8px}.secondary-btn:hover{background:#0f172a;color:#f8fafc;border-color:#475569;transform:translateY(-1px)}.divider{text-align:center;margin:30px 0;position:relative}.divider:before{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;background:linear-gradient(90deg,transparent,#334155,transparent)}.divider span{background:#1e293bf2;padding:0 20px;position:relative;color:#64748b;font-size:13px;font-weight:700;letter-spacing:1px}.auth-footer{margin-top:40px;padding-top:30px;border-top:1px solid #334155;text-align:center}.auth-footer p{color:#64748b;font-size:13px;margin-bottom:15px;font-weight:500}.features-list{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}.features-list span{color:#3b82f6;font-size:12px;font-weight:600;letter-spacing:.5px}.app{min-height:100vh;background:#0f172a}.app-header{background:linear-gradient(135deg,#1e293b,#0f172a);padding:20px 30px;display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #334155;box-shadow:0 4px 12px #0000004d}.header-logo{display:flex;align-items:center;gap:15px}.header-logo img{width:50px;height:auto}.app-header h1{font-size:24px;color:#f8fafc;font-weight:700;letter-spacing:-.5px}.user-info{display:flex;gap:15px;align-items:center;font-size:14px;color:#94a3b8}.logout-btn{padding:10px 20px;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;transition:all .3s ease;box-shadow:0 2px 8px #ef44444d}.logout-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #ef444466}.app-nav{background:#1e293b;padding:0 30px;display:flex;gap:5px;border-bottom:1px solid #334155}.app-nav button{padding:16px 28px;background:transparent;color:#94a3b8;border:none;border-bottom:3px solid transparent;cursor:pointer;font-size:15px;font-weight:600;transition:all .2s}.app-nav button:hover{color:#f8fafc;background:#0f172a}.app-nav button.active{color:#3b82f6;border-bottom-color:#3b82f6;background:#3b82f60d}.app-content{padding:40px;max-width:1400px;margin:0 auto}.packages-section h2{font-size:32px;margin-bottom:10px;color:#f8fafc}.methodology-filter{display:flex;gap:10px;margin:30px 0;flex-wrap:wrap}.methodology-filter button{padding:12px 24px;background:#1e293b;color:#94a3b8;border:2px solid #334155;border-radius:10px;cursor:pointer;font-size:14px;font-weight:600;transition:all .3s}.methodology-filter button:hover{background:#334155;color:#f8fafc;transform:translateY(-2px)}.methodology-filter button.active{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-color:#3b82f6;box-shadow:0 4px 12px #3b82f64d}.packages-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:25px;margin-top:30px}.package-card{background:linear-gradient(135deg,#1e293b,#0f172a);border:2px solid #334155;border-radius:16px;padding:28px;transition:all .3s ease}.package-card:hover{transform:translateY(-6px);box-shadow:0 12px 28px #3b82f64d;border-color:#3b82f6}.package-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.package-header h3{font-size:26px;color:#f8fafc;font-weight:700}.package-level{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;padding:6px 14px;border-radius:8px;font-size:13px;font-weight:700;box-shadow:0 2px 8px #3b82f64d}.package-price{margin-bottom:24px;padding-bottom:24px;border-bottom:2px solid #334155}.price-main{font-size:44px;font-weight:800;color:#3b82f6;line-height:1;margin-bottom:8px;background:linear-gradient(135deg,#3b82f6,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.price-main small{font-size:20px;color:#94a3b8;font-weight:500}.package-details{margin-bottom:24px}.detail-row{display:flex;justify-content:space-between;padding:10px 0;font-size:14px;color:#94a3b8}.detail-row strong{color:#f8fafc;font-weight:600}.my-subscriptions h2{font-size:32px;margin-bottom:30px;color:#f8fafc}.bundle-discount{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;padding:24px 28px;border-radius:16px;margin-bottom:30px;box-shadow:0 8px 20px #22c55e4d}.bundle-discount h3{margin-bottom:8px;font-size:22px;font-weight:700}.subscriptions-list{display:grid;gap:24px;margin-bottom:30px}.subscription-card{background:linear-gradient(135deg,#1e293b,#0f172a);border:2px solid #334155;border-radius:16px;padding:28px;transition:all .3s ease}.subscription-card:hover{border-color:#3b82f6;box-shadow:0 8px 20px #3b82f633}.sub-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.sub-header h3{font-size:24px;color:#f8fafc;font-weight:700}.status-badge{padding:8px 16px;border-radius:8px;font-size:13px;font-weight:700}.status-badge.trial{background:#fbbf24;color:#78350f}.status-badge.active{background:#22c55e;color:#14532d}.sub-details p{padding:8px 0;font-size:15px;color:#94a3b8}.sub-details strong{color:#f8fafc;font-weight:600}.billing-summary{background:linear-gradient(135deg,#1e293b,#0f172a);border:3px solid #3b82f6;border-radius:16px;padding:28px;margin-top:30px;box-shadow:0 8px 20px #3b82f633}.billing-summary h3{margin-bottom:20px;color:#f8fafc;font-size:20px;font-weight:700}.billing-row{display:flex;justify-content:space-between;padding:12px 0;font-size:16px;color:#94a3b8}.billing-row.discount{color:#22c55e;font-weight:600}.billing-row.total{border-top:2px solid #334155;margin-top:12px;padding-top:18px;font-size:20px;color:#f8fafc;font-weight:700}.empty-state{text-align:center;padding:80px 20px;color:#94a3b8}.empty-state h3{font-size:28px;color:#f8fafc;margin-bottom:12px;font-weight:700}.loading{text-align:center;padding:60px;color:#94a3b8;font-size:18px}.link-btn{width:100%;padding:12px;background:transparent;color:#3b82f6;border:none;cursor:pointer;font-size:14px;font-weight:600;transition:all .2s;text-align:center;margin:10px 0;border-radius:8px}.link-btn:hover{background:#3b82f61a;color:#60a5fa}.recovery-options{margin:24px 0}.radio-option{display:flex;gap:15px;padding:16px;border:2px solid #334155;border-radius:10px;margin-bottom:12px;cursor:pointer;transition:all .3s ease;align-items:flex-start}.radio-option:hover{border-color:#3b82f6;background:#3b82f60d}.radio-option input[type=radio]{margin-top:4px;width:18px;height:18px;cursor:pointer}.radio-option div{flex:1}.radio-option strong{display:block;color:#f8fafc;font-size:15px;margin-bottom:5px}.radio-option p{color:#94a3b8;font-size:13px;line-height:1.4;margin:0}.device-selection{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}.device-select-card{display:flex;justify-content:space-between;align-items:center;padding:16px;background:linear-gradient(135deg,#1e293b,#0f172a);border:2px solid #334155;border-radius:12px;transition:all .3s ease}.device-select-card:hover{border-color:#3b82f6;transform:translateY(-2px);box-shadow:0 4px 12px #3b82f633}.device-select-card h4{color:#f8fafc;margin-bottom:8px;font-size:16px;font-weight:600}.device-select-card p{color:#94a3b8;font-size:13px;margin:0}.device-select-card .primary-btn{width:auto;padding:10px 24px;margin:0;font-size:14px}Perfect! Now I'll add professional styling for the "Revoke Device" button. Add this CSS at the end of your App.css file:
css .revoke-btn{padding:10px 20px;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border:2px solid #dc2626;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;transition:all .3s ease;box-shadow:0 2px 8px #ef44444d;display:inline-flex;align-items:center;gap:8px}.revoke-btn:before{content:"🗑️";font-size:16px}.revoke-btn:hover{background:linear-gradient(135deg,#dc2626,#b91c1c);transform:translateY(-2px);box-shadow:0 4px 16px #ef444480;border-color:#b91c1c}.revoke-btn:active{transform:translateY(0);box-shadow:0 2px 8px #ef44444d}.revoke-btn:disabled{background:linear-gradient(135deg,#475569,#334155);border-color:#334155;cursor:not-allowed;opacity:.5;transform:none;box-shadow:none}.device-card{background:linear-gradient(135deg,#1e293b,#0f172a);border:2px solid #334155;border-radius:12px;padding:20px;margin-bottom:16px;transition:all .3s ease}.device-card:hover{border-color:#475569;box-shadow:0 4px 12px #0000004d}.device-status-active{color:#22c55e;font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:6px;background:#22c55e1a;padding:4px 12px;border-radius:6px}.device-status-active:before{content:"✅";font-size:14px}.commission-link-btn{padding:16px 28px;background:transparent;color:#94a3b8;border:none;border-bottom:3px solid transparent;cursor:pointer;font-size:15px;font-weight:600;transition:all .2s}.commission-link-btn:hover{color:#10b981;background:#10b9811a;border-bottom-color:#10b981}.commission-link-btn:active{transform:scale(.98)}@media (max-width: 768px){.app-header{flex-direction:column;gap:15px;text-align:center}.header-logo{flex-direction:column}.app-content{padding:20px}.packages-grid{grid-template-columns:1fr}.methodology-filter{justify-content:center}.auth-card{padding:40px 30px}.features-list{flex-direction:column;gap:10px}}@media (max-width: 768px){.auth-logo img{width:100%!important;max-width:280px!important;height:auto!important}.header-logo img{width:40px!important;height:auto}.auth-card{padding:30px 20px;margin:10px}.auth-card h1{font-size:24px}.subtitle{font-size:14px}.form-group input[type=email],.form-group input[type=text]{padding:12px 14px;font-size:16px}.primary-btn{padding:14px;font-size:15px}.secondary-btn{padding:12px;font-size:14px}.app-nav{padding:0 10px;overflow-x:auto;flex-wrap:nowrap}.app-nav button{padding:14px 20px;font-size:14px;white-space:nowrap}.device-select-card{flex-direction:column;align-items:flex-start;gap:12px}.device-select-card .primary-btn{width:100%}.package-card{padding:20px}.package-header h3{font-size:20px}.price-main{font-size:36px}.subscription-card{padding:20px}.sub-header{flex-direction:column;align-items:flex-start;gap:10px}.billing-summary{padding:20px}.billing-row{font-size:14px}.billing-row.total{font-size:18px}.user-info{flex-direction:column;gap:10px;font-size:13px}.logout-btn{width:100%;padding:12px 20px}.radio-option{padding:14px}.recovery-options{margin:20px 0}.empty-state{padding:40px 20px}.empty-state h3{font-size:22px}}@media (max-width: 480px){.auth-logo img{max-width:220px!important}.auth-card{padding:25px 15px}.auth-card h1{font-size:20px}.price-main{font-size:30px}.package-header{flex-direction:column;align-items:flex-start;gap:8px}.detail-row{flex-direction:column;gap:4px}}.admin-container{padding:20px;max-width:1400px;margin:0 auto}.admin-container h1{margin-bottom:20px;color:#333}.admin-tabs{display:flex;gap:10px;margin-bottom:30px;border-bottom:2px solid #e0e0e0}.admin-tabs button{padding:12px 24px;background:none;border:none;border-bottom:3px solid transparent;cursor:pointer;font-size:16px;font-weight:500;color:#666;transition:all .3s}.admin-tabs button:hover{color:#333;background:#f5f5f5}.admin-tabs button.active{color:#2196f3;border-bottom-color:#2196f3}.stats-section{margin-bottom:30px}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:30px}.stat-card{background:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a;text-align:center}.stat-card h3{font-size:14px;color:#666;margin-bottom:10px;font-weight:500}.stat-value{font-size:32px;font-weight:700;color:#2196f3}.methodology-breakdown{background:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a}.methodology-breakdown h3{margin-bottom:15px;color:#333}.methodology-list{display:flex;flex-direction:column;gap:10px}.methodology-item{display:flex;justify-content:space-between;padding:10px;background:#f5f5f5;border-radius:4px}.methodology-name{font-weight:500;color:#333}.methodology-count{color:#2196f3;font-weight:700}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-header h2{margin:0;color:#333}.btn-primary{padding:10px 20px;background:#2196f3;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;font-weight:500;transition:background .3s}.btn-primary:hover{background:#1976d2}.btn-secondary{padding:10px 20px;background:#666;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;font-weight:500;transition:background .3s}.btn-secondary:hover{background:#555}.btn-small{padding:6px 12px;background:#2196f3;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:12px;margin-right:5px;transition:background .3s}.btn-small:hover{background:#1976d2}.btn-danger{background:#f44336}.btn-danger:hover{background:#d32f2f}.packages-table,.users-table,.subscriptions-list,.tokens-list{background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;overflow:hidden}.packages-table table,.users-table table,.subscriptions-list table,.tokens-list table{width:100%;border-collapse:collapse}.packages-table th,.users-table th,.subscriptions-list th,.tokens-list th{background:#f5f5f5;padding:12px;text-align:left;font-weight:600;color:#333;border-bottom:2px solid #e0e0e0}.packages-table td,.users-table td,.subscriptions-list td,.tokens-list td{padding:12px;border-bottom:1px solid #e0e0e0}.packages-table tr:hover,.users-table tr:hover,.subscriptions-list tr:hover,.tokens-list tr:hover{background:#f9f9f9}.search-box input{padding:10px;border:1px solid #ddd;border-radius:4px;width:300px;font-size:14px}.search-box button{padding:10px 20px;background:#2196f3;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:background .3s}.search-box button:hover{background:#1976d2}.package-form-modal,.user-details-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#fff;padding:30px;border-radius:8px;box-shadow:0 4px 6px #0000001a;max-width:800px;max-height:90vh;overflow-y:auto;width:90%}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;border-bottom:2px solid #e0e0e0;padding-bottom:10px}.modal-header h3{margin:0;color:#333}.close-btn{background:none;border:none;font-size:32px;color:#666;cursor:pointer;line-height:1;padding:0;width:30px;height:30px}.close-btn:hover{color:#333}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin-bottom:20px}.form-group{display:flex;flex-direction:column}.form-group.full-width{grid-column:1 / -1}.form-group label{font-weight:500;margin-bottom:5px;color:#333;font-size:14px}.form-group input,.form-group select{padding:10px;border:1px solid #ddd;border-radius:4px;font-size:14px}.form-group input[type=checkbox]{width:auto;margin-right:8px}.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;padding-top:20px;border-top:1px solid #e0e0e0}.user-info{background:#f5f5f5;padding:15px;border-radius:4px;margin-bottom:20px}.user-info p{margin:8px 0}.tokens-header{display:flex;justify-content:space-between;align-items:center;margin-top:20px;margin-bottom:10px}.tokens-header h4{margin:0}.error-banner{background:#ffebee;color:#c62828;padding:15px;border-radius:4px;margin-bottom:20px;border-left:4px solid #c62828}.loading-spinner{text-align:center;padding:40px;font-size:18px;color:#666}.stat-card.clickable{cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s}.stat-card.clickable:hover{transform:translateY(-4px);box-shadow:0 6px 16px #3b82f64d;border-color:#3b82f6}.subscriptions-section,.tokens-section{padding:20px}.subscriptions-table,.tokens-table{overflow-x:auto}.fingerprint-short{font-family:monospace;font-size:12px;color:#666;cursor:help}.empty-state{text-align:center;padding:40px;color:#94a3b8;font-size:16px}.subscriptions-section{padding:30px}.subscriptions-section h2{margin-bottom:30px;font-size:28px;color:#f8fafc}.subscriptions-table{background:#1e293b;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px #0000004d}.subscriptions-table table{width:100%;border-collapse:collapse}.subscriptions-table thead{background:linear-gradient(135deg,#334155,#1e293b)}.subscriptions-table th{padding:16px 20px;text-align:left;font-weight:600;font-size:13px;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid #334155}.subscriptions-table td{padding:16px 20px;color:#f8fafc;border-bottom:1px solid #334155;font-size:14px}.subscriptions-table tbody tr{transition:background .2s}.subscriptions-table tbody tr:hover{background:#3b82f60d}.subscriptions-table tbody tr:last-child td{border-bottom:none}.status-badge{display:inline-block;padding:6px 12px;border-radius:6px;font-size:12px;font-weight:600;text-align:center;min-width:70px}.status-badge.trial{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#78350f}.status-badge.active{background:linear-gradient(135deg,#22c55e,#16a34a);color:#14532d}.status-badge.expired{background:linear-gradient(135deg,#94a3b8,#64748b);color:#1e293b}.subscriptions-table .btn-small{margin:0 4px}.empty-state{text-align:center;padding:60px 20px;color:#94a3b8;font-size:16px;background:#1e293b;border-radius:12px}.tokens-section{padding:30px}.tokens-section h2{margin-bottom:30px;font-size:28px;color:#f8fafc}.tokens-table{background:#1e293b;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px #0000004d}.tokens-table table{width:100%;border-collapse:collapse}.tokens-table thead{background:linear-gradient(135deg,#334155,#1e293b)}.tokens-table th{padding:16px 20px;text-align:left;font-weight:600;font-size:13px;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid #334155}.tokens-table td{padding:16px 20px;color:#f8fafc;border-bottom:1px solid #334155;font-size:14px}.tokens-table tbody tr{transition:background .2s}.tokens-table tbody tr:hover{background:#3b82f60d}.tokens-table tbody tr:last-child td{border-bottom:none}.fingerprint-short{font-family:Courier New,monospace;font-size:12px;color:#94a3b8;background:#0f172a;padding:4px 8px;border-radius:4px;cursor:help}.fingerprint-short:hover{color:#3b82f6}.users-section{padding:30px}.users-section .section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.users-section h2{font-size:28px;color:#f8fafc;margin:0}.search-box{display:flex;gap:10px}.search-box input{padding:10px 16px;border:2px solid #334155;border-radius:8px;background:#0f172a;color:#f8fafc;font-size:14px;min-width:300px;transition:border-color .3s}.search-box input:focus{outline:none;border-color:#3b82f6}.search-box button{padding:10px 24px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:transform .2s}.search-box button:hover{transform:translateY(-2px)}.users-table{background:#1e293b;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px #0000004d}.users-table table{width:100%;border-collapse:collapse}.users-table thead{background:linear-gradient(135deg,#334155,#1e293b)}.users-table th{padding:16px 20px;text-align:left;font-weight:600;font-size:13px;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid #334155}.users-table td{padding:16px 20px;color:#f8fafc;border-bottom:1px solid #334155;font-size:14px}.users-table tbody tr{transition:background .2s}.users-table tbody tr:hover{background:#3b82f60d}.users-table tbody tr:last-child td{border-bottom:none}.users-table .btn-small{margin:0 4px}.user-details-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.user-details-modal .modal-content{background:#1e293b;border-radius:16px;padding:30px;max-width:900px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #00000080;border:1px solid #334155}.user-details-modal .modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px;padding-bottom:20px;border-bottom:2px solid #334155}.user-details-modal .modal-header h3{font-size:24px;color:#f8fafc;margin:0}.user-details-modal .close-btn{background:transparent;border:none;font-size:32px;color:#94a3b8;cursor:pointer;padding:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:all .2s}.user-details-modal .close-btn:hover{background:#334155;color:#f8fafc}.user-info{background:#0f172a;padding:20px;border-radius:12px;margin-bottom:25px;border:1px solid #334155}.user-info p{margin:10px 0;font-size:14px;color:#f8fafc;line-height:1.6}.user-info strong{color:#3b82f6;font-weight:600;margin-right:8px}.user-details-modal h4{font-size:18px;color:#f8fafc;margin:25px 0 15px;font-weight:600}.subscriptions-list table{width:100%;border-collapse:collapse;background:#0f172a;border-radius:8px;overflow:hidden;margin-bottom:25px}.subscriptions-list th{padding:12px 16px;text-align:left;background:#334155;color:#94a3b8;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.subscriptions-list td{padding:12px 16px;border-bottom:1px solid #334155;color:#f8fafc;font-size:14px}.subscriptions-list tbody tr:last-child td{border-bottom:none}.subscriptions-list tbody tr:hover{background:#3b82f60d}.subscriptions-list p{color:#94a3b8;padding:20px;text-align:center;font-size:14px}.tokens-header{display:flex;justify-content:space-between;align-items:center;margin:25px 0 15px}.tokens-header h4{margin:0;font-size:18px;color:#f8fafc;font-weight:600}.tokens-header .btn-danger{padding:8px 16px;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:transform .2s}.tokens-header .btn-danger:hover{transform:translateY(-2px);box-shadow:0 4px 12px #ef444466}.tokens-list table{width:100%;border-collapse:collapse;background:#0f172a;border-radius:8px;overflow:hidden}.tokens-list th{padding:12px 16px;text-align:left;background:#334155;color:#94a3b8;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.tokens-list td{padding:12px 16px;border-bottom:1px solid #334155;color:#f8fafc;font-size:14px}.tokens-list tbody tr:last-child td{border-bottom:none}.tokens-list tbody tr:hover{background:#3b82f60d}.tokens-list p{color:#94a3b8;padding:20px;text-align:center;font-size:14px}.user-details-m .packages-section{padding:30px}.packages-section .section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.packages-section h2{font-size:28px;color:#f8fafc;margin:0}.packages-table{background:#1e293b;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px #0000004d}.packages-table table{width:100%;border-collapse:collapse}.packages-table thead{background:linear-gradient(135deg,#334155,#1e293b)}.packages-table th{padding:16px 20px;text-align:left;font-weight:600;font-size:13px;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid #334155}.packages-table td{padding:16px 20px;color:#f8fafc;border-bottom:1px solid #334155;font-size:14px}.packages-table tbody tr{transition:background .2s}.packages-table tbody tr:hover{background:#3b82f60d}.packages-table tbody tr:last-child td{border-bottom:none}.packages-table .btn-small{margin:0 4px}.btn-primary{padding:12px 24px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 4px 12px #3b82f64d}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #3b82f666}.btn-small{padding:8px 16px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}.btn-small:hover{transform:translateY(-1px);box-shadow:0 4px 12px #3b82f64d}.btn-small.btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626)}.btn-small.btn-danger:hover{box-shadow:0 4px 12px #ef44444d}.btn-secondary{padding:12px 24px;background:transparent;color:#94a3b8;border:2px solid #334155;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.btn-secondary:hover{background:#0f172a;color:#f8fafc;border-color:#475569;transform:translateY(-1px)}.tokens-table td .btn-small,.subscriptions-table td .btn-small,.users-table td .btn-small,.packages-table td .btn-small{margin:4px 6px;display:inline-block}.tokens-table td .btn-small:first-child,.subscriptions-table td .btn-small:first-child,.users-table td .btn-small:first-child,.packages-table td .btn-small:first-child{margin-left:0}.tokens-table td .btn-small:last-child,.subscriptions-table td .btn-small:last-child,.users-table td .btn-small:last-child,.packages-table td .btn-small:last-child{margin-right:0}@media (max-width: 1200px){.tokens-table td .btn-small,.subscriptions-table td .btn-small,.users-table td .btn-small,.packages-table td .btn-small{display:block;margin:4px 0;width:100%}}.action-buttons{display:flex;flex-direction:column;gap:8px;align-items:flex-start}.action-buttons .btn-small{margin:0!important;min-width:100px}.tokens-table .action-buttons .btn-small,.subscriptions-table .action-buttons .btn-small,.users-table .action-buttons .btn-small{width:100px;text-align:center}.package-code-preview{background:#0f172a;border:2px solid #3b82f6;border-radius:12px;padding:16px;margin-bottom:25px;text-align:center}.package-code-preview strong{color:#94a3b8;font-size:14px;display:block;margin-bottom:8px}.preview-code{font-size:24px;font-weight:700;color:#3b82f6;font-family:Courier New,monospace;letter-spacing:1px}@media (max-width: 768px){.admin-tabs{flex-direction:column}.stats-grid,.form-grid{grid-template-columns:1fr}.section-header{flex-direction:column;align-items:flex-start;gap:10px}.search-box{flex-direction:column;width:100%}.search-box input{width:100%}.packages-table,.users-table{overflow-x:auto}}