*{margin:0;padding:0;box-sizing:border-box}:root{--color-primary: #0a7093;--color-primary-dark: #085a78;--color-primary-light: #4cbbec;--color-secondary: #ff2464;--color-bg: #f8f9fa;--color-surface: #ffffff;--color-dark: #1a1a2e;--color-dark-alt: #16213e;--color-text: #212529;--color-text-muted: #6c757d;--color-border: #dee2e6;--color-error: #ff2464;--color-success: #00bfa0;--color-warning: #fac600;--color-danger: #ff2464;--gradient-primary: linear-gradient(135deg, #6bb43b 0%, #00a3b8 50%, #3063ac 100%);--gradient-secondary: linear-gradient(135deg, #9c4f98 0%, #ec6b85 28%, #fcc808 62%, #6eb75d 100%);--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: 1rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px rgba(0, 0, 0, .15);--sidebar-width: 240px}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--color-bg);color:var(--color-text);min-height:100vh;-webkit-font-smoothing:antialiased}.page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem;background:var(--color-dark)}.page-content{width:100%;max-width:420px}.logo-section{text-align:center;margin-bottom:2rem}.logo{font-size:2.5rem;font-weight:800;color:#fff;letter-spacing:-.02em}.tagline{color:#ffffff80;font-size:1rem;margin-top:.25rem}.login-form{background:var(--color-surface);padding:2rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);display:flex;flex-direction:column;gap:.75rem;border:none}.auth-loading{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;color:var(--color-text-muted)}.spinner{width:32px;height:32px;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.app-shell{height:100vh;display:flex;flex-direction:column;overflow:hidden}.topbar{height:56px;min-height:56px;background:var(--color-dark);border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:space-between;padding:0 1.25rem;z-index:100;flex-shrink:0}.topbar-left{display:flex;align-items:center;gap:.75rem}.topbar-logo{font-size:1.25rem;font-weight:800;color:#fff}.topbar-right{display:flex;align-items:center;gap:.75rem}.topbar-user{font-size:.85rem;color:#fff9}.topbar-role{font-size:.7rem;padding:.15rem .5rem;background:#ffffff1a;border-radius:var(--radius-sm);color:#ffffffb3;text-transform:uppercase;font-weight:600}.menu-toggle{background:none;border:none;font-size:1.25rem;cursor:pointer;padding:.25rem;color:#fff;display:none}.app-body{display:flex;flex:1;min-height:0;overflow:hidden}.sidebar{width:var(--sidebar-width);background:var(--color-dark-alt);border-right:1px solid rgba(255,255,255,.06);padding:1rem 0;overflow-y:auto;flex-shrink:0}.sidebar-nav{display:flex;flex-direction:column}.sidebar-link{display:block;padding:.625rem 1.25rem;color:#fff9;text-decoration:none;font-size:.875rem;font-weight:500;transition:all .15s ease}.sidebar-link:hover{background:#ffffff0d;color:#ffffffe6}.sidebar-link.active{color:var(--color-primary-light);background:#4cbbec1a;border-right:3px solid var(--color-primary-light);font-weight:600}.sidebar-divider{height:1px;background:#ffffff14;margin:.5rem 1rem}.sidebar-backdrop{display:none}.main-content{flex:1;padding:1.5rem;min-width:0;overflow-y:auto;overflow-x:auto}.app-footer{height:40px;min-height:40px;background:var(--color-dark);border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:.75rem;color:#fff6;flex-shrink:0;letter-spacing:.02em}.manage-page{max-width:1200px}.manage-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;gap:1rem}.manage-header h1{font-size:1.5rem;font-weight:700}.header-actions{display:flex;gap:.5rem}.manage-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem;margin-bottom:1.5rem}.stat-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:1rem;text-align:center;transition:box-shadow .2s ease,transform .2s ease}.stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.stat-value{font-size:1.75rem;font-weight:700;line-height:1.2}.stat-label{font-size:.75rem;color:var(--color-text-muted);margin-top:.25rem;text-transform:uppercase;font-weight:600;letter-spacing:.03em}.manage-section{margin-bottom:1.5rem}.manage-section h2{font-size:1.1rem;font-weight:600;margin-bottom:.75rem}.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.dashboard-table{width:100%;border-collapse:collapse;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;font-size:.85rem}.dashboard-table th{text-align:left;padding:.625rem .75rem;font-size:.75rem;font-weight:600;text-transform:uppercase;color:var(--color-text-muted);background:var(--color-bg);border-bottom:1px solid var(--color-border);letter-spacing:.03em}.dashboard-table td{padding:.625rem .75rem;border-bottom:1px solid var(--color-border);vertical-align:middle}.dashboard-table tr:last-child td{border-bottom:none}.dashboard-table tr.clickable{cursor:pointer;transition:background .15s ease}.dashboard-table tr.clickable:hover{background:#0a70930a}.dashboard-table code{font-size:.8rem;color:var(--color-text-muted)}.dashboard-filters{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap}.filter-btn{padding:.375rem .875rem;border:1px solid var(--color-border);border-radius:var(--radius-full);background:var(--color-surface);color:var(--color-text-muted);font-size:.8rem;font-weight:500;cursor:pointer;transition:all .15s ease}.filter-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.filter-btn.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.filter-bar{display:flex;gap:.5rem;margin-bottom:1rem;align-items:center}.dashboard-pagination{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1rem;font-size:.85rem;color:var(--color-text-muted)}.status-badge{display:inline-block;padding:.2rem .6rem;border-radius:var(--radius-full);font-size:.75rem;font-weight:600;text-transform:capitalize}.status-badge.active,.status-badge.superadmin{background:#00bfa01f;color:#00866e}.status-badge.pending,.status-badge.admin{background:#fac60026;color:#92400e}.status-badge.expired{background:#ff24641a;color:#c01850}.status-badge.revoked{background:#f1f5f9;color:#475569}.status-badge.viewer{background:#4cbbec1f;color:#0a7093}.status-badge.large{font-size:.9rem;padding:.35rem 1rem}.form-label{display:block;font-size:.8rem;font-weight:600;margin-bottom:.35rem;margin-top:.75rem;color:var(--color-text)}.form-input,.form-select,.form-textarea{width:100%;padding:.5rem .75rem;font-size:.875rem;border:2px solid var(--color-border);border-radius:var(--radius-md);outline:none;transition:border-color .15s ease;background:var(--color-surface);font-family:inherit}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--color-primary)}.form-textarea{resize:vertical;font-family:SF Mono,Fira Code,monospace;font-size:.8rem}.form-error{background:#ff24640f;color:var(--color-error);padding:.5rem .75rem;border-radius:var(--radius-sm);font-size:.85rem;margin-bottom:.5rem;border:1px solid rgba(255,36,100,.2)}.form-row{display:flex;gap:.75rem}.form-section{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:1.25rem;margin-bottom:1rem;transition:box-shadow .2s ease}.form-section:hover{box-shadow:var(--shadow-sm)}.form-section h2{font-size:1rem;font-weight:600;margin-bottom:.25rem}.inline-form{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:1rem;margin-bottom:1rem;display:flex;flex-direction:column;gap:.5rem}.btn{padding:.625rem 1.25rem;border-radius:var(--radius-md);font-size:.875rem;font-weight:600;cursor:pointer;border:none;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;text-decoration:none}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--color-primary-dark);box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-secondary{background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover:not(:disabled){background:var(--color-bg);border-color:#ced4da}.btn-danger{background:var(--color-danger);color:#fff}.btn-danger:hover:not(:disabled){background:#e01f57;box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-topbar{background:#ffffff1a;color:#fffc;border:1px solid rgba(255,255,255,.15)}.btn-topbar:hover:not(:disabled){background:#ffffff2e;color:#fff}.btn-sm{padding:.375rem .75rem;font-size:.8rem}.btn-xs{padding:.25rem .5rem;font-size:.7rem}.detail-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:1rem;margin-bottom:1rem;transition:box-shadow .2s ease}.detail-card:hover{box-shadow:var(--shadow-sm)}.detail-row{display:flex;align-items:baseline;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--color-border)}.detail-row:last-child{border-bottom:none}.detail-label{font-size:.8rem;font-weight:600;color:var(--color-text-muted);min-width:120px;flex-shrink:0}.detail-actions{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.success-card{background:#00bfa00f;border:1px solid rgba(0,191,160,.25);border-radius:var(--radius-md);padding:1.5rem;margin-bottom:1.5rem;text-align:center}.success-card h2,.success-card h3{color:#00866e;margin-bottom:.5rem}.code-display{display:flex;align-items:center;justify-content:center;gap:.75rem;margin:1rem 0}.code-display code{font-size:1.75rem;font-weight:700;letter-spacing:.15em;color:var(--color-text);background:var(--color-surface);padding:.5rem 1.25rem;border-radius:var(--radius-sm);border:2px solid var(--color-border)}.success-actions{margin-top:1rem}.plans-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.75rem}.plan-card{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:1rem;transition:box-shadow .2s ease,transform .2s ease}.plan-card:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px)}.plan-card h3{text-transform:capitalize;font-size:1rem;margin-bottom:.25rem}.plan-card p{font-size:.8rem;color:var(--color-text-muted);margin-bottom:.5rem}.plan-limits{display:flex;flex-direction:column;gap:.15rem;font-size:.75rem;margin-bottom:.5rem}.plan-features{display:flex;flex-wrap:wrap;gap:.25rem}.feature-tag{display:inline-block;padding:.15rem .5rem;background:#0a709314;color:var(--color-primary);border-radius:var(--radius-full);font-size:.7rem;font-weight:600}.features-list{display:flex;flex-wrap:wrap;gap:.5rem}.plan-selector{display:flex;gap:.5rem;margin-bottom:.5rem}.plan-option{padding:.5rem 1.25rem;border:2px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);cursor:pointer;font-weight:600;text-transform:capitalize;transition:all .15s ease}.plan-option:hover{border-color:var(--color-primary)}.plan-option.selected{border-color:var(--color-primary);background:#0a70930f;color:var(--color-primary)}.limits-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.75rem}.limit-item{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:.75rem}.limit-header{display:flex;justify-content:space-between;font-size:.8rem;margin-bottom:.35rem;text-transform:capitalize}.limit-bar-track{height:6px;background:var(--color-border);border-radius:3px;overflow:hidden}.limit-bar-fill{height:100%;border-radius:3px;transition:width .3s ease}.create-form{max-width:700px}.actions-cell{display:flex;gap:.35rem}.help-text{color:var(--color-text-muted);font-size:.85rem}.code-mono{font-family:SF Mono,Fira Code,monospace;font-size:.8rem}@media (max-width: 768px){.menu-toggle{display:block}.sidebar{position:fixed;left:-var(--sidebar-width);top:56px;height:calc(100vh - 96px);z-index:200;transition:left .2s ease}.sidebar.open{left:0}.sidebar-backdrop{display:block;position:fixed;top:56px;left:0;right:0;bottom:40px;background:#00000080;z-index:199}.dashboard-grid{grid-template-columns:1fr}.form-row{flex-direction:column}.topbar-user{display:none}.manage-stats{grid-template-columns:repeat(2,1fr)}}
