:root{--font-body:'DM Sans',system-ui,sans-serif;--font-mono:'JetBrains Mono',monospace;--bg-page:#f0f2f5;--bg-card:#fff;--bg-nav:#0f172a;--bg-input:#f8f9fb;--text-primary:#1a1d23;--text-secondary:#5f6368;--text-muted:#9ca3af;--text-inverse:#fff;--accent:#2563eb;--accent-hover:#1d4ed8;--accent-soft:#eef2ff;--green:#059669;--green-soft:#ecfdf5;--red:#dc2626;--red-soft:#fef2f2;--amber:#d97706;--amber-soft:#fffbeb;--border:#e5e7eb;--radius:10px;--radius-lg:16px;--shadow-sm:0 1px 2px rgba(0,0,0,0.04);--shadow-md:0 4px 16px rgba(0,0,0,0.06)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{font-size:15px}
body{font-family:var(--font-body);color:var(--text-primary);background:var(--bg-page);line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
code,.font-mono{font-family:var(--font-mono);font-size:.88em}

.auth-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:radial-gradient(ellipse at 20% 50%,rgba(37,99,235,0.08) 0%,transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(5,150,105,0.06) 0%,transparent 50%),var(--bg-page)}
.auth-container{width:100%;max-width:420px;padding:20px}
.auth-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:40px 36px;box-shadow:0 8px 32px rgba(0,0,0,0.08);border:1px solid var(--border)}
.auth-logo{text-align:center;margin-bottom:32px}.auth-logo .logo-icon{font-size:2.4rem;margin-bottom:8px}
.auth-logo h1{font-size:1.6rem;font-weight:700;letter-spacing:-.02em}.auth-logo .subtitle{font-size:.93rem;color:var(--text-secondary);margin-top:4px}
.auth-footer{text-align:center;margin-top:24px;padding-top:20px;border-top:1px solid var(--border);font-size:.88rem;color:var(--text-muted)}
.info-text{text-align:center;color:var(--text-secondary);font-size:.9rem;margin-bottom:20px}

.form-group{margin-bottom:18px}.form-group label{display:block;font-size:.88rem;font-weight:600;margin-bottom:6px}.required{color:var(--red)}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 14px;border:1.5px solid var(--border);border-radius:8px;font-family:var(--font-body);font-size:.95rem;background:var(--bg-input);color:var(--text-primary);transition:border-color .2s,box-shadow .2s}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,0.1);background:#fff}
.form-group input::placeholder{color:var(--text-muted)}.input-disabled{background:#f3f4f6!important;color:var(--text-secondary)!important;cursor:not-allowed}
.form-hint{display:block;font-size:.8rem;color:var(--text-muted);margin-top:4px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.form-grid .form-group.full-width,.form-grid .form-actions{grid-column:1/-1}
@media(max-width:600px){.form-grid{grid-template-columns:1fr}}
.form-actions{display:flex;gap:12px;margin-top:8px;padding-top:20px;border-top:1px solid var(--border)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 20px;border:none;border-radius:8px;font-family:var(--font-body);font-size:.9rem;font-weight:600;cursor:pointer;text-decoration:none!important;transition:all .15s;white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-muted{background:transparent;color:var(--text-secondary);border:1.5px solid var(--border)}.btn-muted:hover{background:var(--bg-input);color:var(--text-primary)}
.btn-sm{padding:5px 12px;font-size:.82rem;border-radius:6px}
.btn-warn{color:var(--amber);border:1px solid var(--amber);background:var(--amber-soft)}.btn-warn:hover{background:var(--amber);color:#fff}
.btn-success{color:var(--green);border:1px solid var(--green);background:var(--green-soft)}.btn-success:hover{background:var(--green);color:#fff}
.btn-danger{color:var(--red);border:1px solid var(--red);background:var(--red-soft)}.btn-danger:hover{background:var(--red);color:#fff}
.btn-block{width:100%}
.btn-upgrade{background:linear-gradient(135deg,#7c3aed,#2563eb);color:#fff;padding:8px 20px;border-radius:8px;font-weight:600;font-size:.88rem}.btn-upgrade:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(124,58,237,0.3)}

.alert{padding:14px 18px;border-radius:8px;font-size:.9rem;margin-bottom:20px;line-height:1.5}
.alert-success{background:var(--green-soft);color:#065f46;border-left:4px solid var(--green)}
.alert-danger{background:var(--red-soft);color:#991b1b;border-left:4px solid var(--red)}

.topbar{background:var(--bg-nav);color:var(--text-inverse);padding:0 24px;height:56px;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,0.15)}
.topbar-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:100%}
.topbar-brand{display:flex;align-items:center;gap:10px;color:var(--text-inverse)!important;text-decoration:none!important;font-weight:700;font-size:1.05rem}
.brand-icon{font-size:1.3rem}.topbar-nav{display:flex;align-items:center;gap:4px}
.nav-link{color:rgba(255,255,255,.65)!important;padding:6px 12px;border-radius:6px;font-size:.85rem;font-weight:500;text-decoration:none!important;transition:all .15s}
.nav-link:hover,.nav-link.active{color:#fff!important;background:rgba(255,255,255,.1)}
.nav-highlight{background:rgba(37,99,235,.3);color:#93bbfd!important}.nav-highlight:hover{background:rgba(37,99,235,.5);color:#fff!important}
.nav-user{display:flex;align-items:center;gap:8px;margin-left:10px;padding-left:14px;border-left:1px solid rgba(255,255,255,.15)}
.user-name{font-size:.85rem;font-weight:500;color:rgba(255,255,255,.9)}
.nav-logout{color:rgba(255,255,255,.4)!important;font-size:.8rem!important}.nav-logout:hover{color:#fca5a5!important}
.mobile-toggle{display:none;background:none;border:none;color:#fff;font-size:1.4rem;cursor:pointer;padding:4px 8px}

.plan-badge{padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:700;letter-spacing:.02em}
.plan-premium{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#78350f}
.plan-free{background:rgba(255,255,255,.15);color:rgba(255,255,255,.8)}

.plan-tag{display:inline-block;padding:3px 12px;border-radius:20px;font-size:.78rem;font-weight:600}
.plan-tag.plan-premium{background:#fef3c7;color:#92400e}.plan-tag.plan-free{background:#e2e8f0;color:#475569}
.plan-tag.plan-expired{background:var(--red-soft);color:#991b1b}

@media(max-width:900px){
    .topbar{height:auto;min-height:56px}.topbar-inner{flex-wrap:wrap;padding:8px 0;gap:6px}
    .topbar-nav{display:none;flex-wrap:wrap;gap:4px;width:100%;padding:8px 0;border-top:1px solid rgba(255,255,255,.1)}
    .topbar-nav.show{display:flex}.mobile-toggle{display:block}
    .nav-user{margin-left:0;padding-left:0;border-left:none;width:100%;padding-top:8px;border-top:1px solid rgba(255,255,255,.1)}}

.main-content{padding:28px 24px 60px}.container{max-width:1200px;margin:0 auto}
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px}
.page-header h2{font-size:1.45rem;font-weight:700;letter-spacing:-.02em}.page-subtitle{color:var(--text-secondary);font-size:.9rem;margin-top:2px}

/* Quota Banner */
.quota-banner{background:linear-gradient(135deg,#eef2ff,#f5f3ff);border:1px solid #c7d2fe;border-radius:var(--radius);padding:16px 24px;margin-bottom:24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.quota-info{flex:1;min-width:200px}
.quota-bar-wrap{width:100%;height:8px;background:#e2e8f0;border-radius:4px;margin-bottom:8px;overflow:hidden}
.quota-bar{height:100%;background:linear-gradient(90deg,var(--accent),#7c3aed);border-radius:4px;transition:width .4s}
.quota-text{font-size:.88rem;color:var(--text-secondary)}
.btn-sm.btn-upgrade{background:linear-gradient(135deg,#7c3aed,#2563eb);color:#fff;padding:8px 20px;border:none}

/* Upgrade Block */
.upgrade-block{text-align:center;padding:60px 24px;max-width:500px;margin:0 auto}
.upgrade-block .upgrade-icon{font-size:3rem;margin-bottom:16px}
.upgrade-block h2{font-size:1.5rem;font-weight:700;margin-bottom:8px}
.upgrade-block p{color:var(--text-secondary);font-size:.95rem;line-height:1.6}

.card{background:var(--bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--border);overflow:hidden;margin-bottom:24px}
.card-header{padding:14px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.card-header h3{font-size:1rem;font-weight:600}.card-body{padding:24px}.card-body.no-pad{padding:0}

.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px}
.stat-card{background:var(--bg-card);border-radius:var(--radius);padding:20px;display:flex;align-items:center;gap:16px;box-shadow:var(--shadow-sm);border:1px solid var(--border);transition:transform .15s,box-shadow .15s}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.stat-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.stat-number{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;line-height:1.2}.stat-label{font-size:.82rem;color:var(--text-muted);font-weight:500}

.table-wrap{overflow-x:auto}.data-table{width:100%;border-collapse:collapse;font-size:.88rem}
.data-table th{text-align:left;padding:10px 14px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);background:#fafbfc;border-bottom:1px solid var(--border);white-space:nowrap}
.data-table td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
.data-table tbody tr:last-child td{border-bottom:none}.data-table tbody tr:hover{background:#f9fafb}
.empty-state{text-align:center;padding:40px 16px!important;color:var(--text-muted);font-style:italic}
.user-cell{display:flex;align-items:center;gap:10px}
.user-avatar{width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;flex-shrink:0}
.user-name{font-weight:600}.user-handle{font-size:.8rem;color:var(--text-muted);font-family:var(--font-mono)}
.role-tag{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.78rem;font-weight:600}
.role-admin{background:#fef3c7;color:#92400e}.role-user{background:var(--accent-soft);color:var(--accent)}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}.status-active{background:var(--green)}.status-inactive{background:var(--text-muted)}
.status-badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.78rem;font-weight:600}
.status-success,.status-accepted{background:var(--green-soft);color:#065f46}
.status-failed,.status-rejected{background:var(--red-soft);color:#991b1b}
.status-draft{background:#e2e8f0;color:#475569}.status-sent{background:#dbeafe;color:#1e40af}.status-expired{background:#f3f4f6;color:#6b7280}
.action-links{display:flex;gap:5px;flex-wrap:wrap}.text-muted{color:var(--text-muted)}

.status-select{padding:4px 8px;border:1px solid var(--border);border-radius:6px;font-size:.82rem;font-weight:600;cursor:pointer;font-family:var(--font-body)}
.status-select.status-draft{background:#e2e8f0;color:#475569}.status-select.status-sent{background:#dbeafe;color:#1e40af}
.status-select.status-accepted{background:var(--green-soft);color:#065f46}.status-select.status-rejected{background:var(--red-soft);color:#991b1b}
.status-select.status-expired{background:#f3f4f6;color:#6b7280}

.search-form{display:flex;gap:8px;flex:1}
.search-form input{flex:1;padding:8px 14px;border:1.5px solid var(--border);border-radius:8px;font-family:var(--font-body);font-size:.9rem;background:var(--bg-input);min-width:0}
.search-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,0.1)}
.filter-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filter-row input,.filter-row select{padding:7px 10px;border:1.5px solid var(--border);border-radius:8px;font-family:var(--font-body);font-size:.85rem;background:var(--bg-input);flex:1;min-width:100px}
.filter-row input:focus,.filter-row select:focus{outline:none;border-color:var(--accent)}
.totals-row td{background:#fafbfc;font-size:.9rem;border-bottom:1px solid var(--border)!important}.totals-row:last-child td{border-bottom:none!important}

.app-footer{text-align:center;padding:20px;font-size:.82rem;color:var(--text-muted);border-top:1px solid var(--border)}
.app-footer a{color:var(--accent)}