:root {
    --bg: #0d1117; --bg2: #161b22; --bg3: #1c2128; --border: #30363d;
    --text: #e6edf3; --text2: #8b949e; --accent: #58a6ff; --accent2: #1f6feb;
    --green: #3fb950; --amber: #d29922; --red: #f85149; --purple: #bc8cff;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Auth pages */
.auth-container { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:1rem; }
.auth-card { background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:2.5rem; width:100%; max-width:400px; }
.auth-card h1 { font-size:1.5rem; margin-bottom:0.5rem; text-align:center; }
.auth-card .subtitle { color:var(--text2); text-align:center; margin-bottom:2rem; font-size:0.9rem; }
.auth-card .logo { text-align:center; font-size:2rem; margin-bottom:1rem; }
.form-group { margin-bottom:1.25rem; }
.form-group label { display:block; font-size:0.85rem; color:var(--text2); margin-bottom:0.4rem; }
.form-group input { width:100%; padding:0.7rem 1rem; background:var(--bg); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:0.95rem; outline:none; transition:border 0.2s; }
.form-group input:focus { border-color:var(--accent); }
.btn { display:inline-flex; align-items:center; justify-content:center; padding:0.7rem 1.5rem; border:none; border-radius:8px; font-size:0.95rem; cursor:pointer; transition:all 0.2s; font-weight:500; }
.btn-primary { background:var(--accent2); color:#fff; width:100%; }
.btn-primary:hover { background:var(--accent); }
.btn-sm { padding:0.4rem 0.8rem; font-size:0.8rem; }
.btn-green { background:rgba(63,185,80,0.15); color:var(--green); border:1px solid rgba(63,185,80,0.3); }
.btn-green:hover { background:rgba(63,185,80,0.25); }
.btn-red { background:rgba(248,81,73,0.15); color:var(--red); border:1px solid rgba(248,81,73,0.3); }
.btn-red:hover { background:rgba(248,81,73,0.25); }
.btn-amber { background:rgba(210,153,34,0.15); color:var(--amber); border:1px solid rgba(210,153,34,0.3); }
.btn-amber:hover { background:rgba(210,153,34,0.25); }
.alert { padding:0.75rem 1rem; border-radius:8px; margin-bottom:1rem; font-size:0.9rem; }
.alert-error { background:rgba(248,81,73,0.1); border:1px solid rgba(248,81,73,0.3); color:var(--red); }
.alert-success { background:rgba(63,185,80,0.1); border:1px solid rgba(63,185,80,0.3); color:var(--green); }
.auth-footer { text-align:center; margin-top:1.5rem; font-size:0.85rem; color:var(--text2); }

/* Layout */
.app-layout { display:flex; min-height:100vh; }
.sidebar { width:240px; background:var(--bg); border-right:1px solid var(--border); padding:1.5rem 0; position:fixed; top:0; left:0; bottom:0; z-index:100; display:flex; flex-direction:column; }
.sidebar-logo { padding:0 1.5rem; margin-bottom:2rem; font-size:1.2rem; font-weight:700; display:flex; align-items:center; gap:0.5rem; }
.sidebar-logo span { color:var(--accent); }
.sidebar-nav { flex:1; }
.sidebar-nav a { display:flex; align-items:center; gap:0.75rem; padding:0.7rem 1.5rem; color:var(--text2); font-size:0.9rem; transition:all 0.2s; border-left:3px solid transparent; }
.sidebar-nav a:hover, .sidebar-nav a.active { color:var(--text); background:var(--bg2); border-left-color:var(--accent); text-decoration:none; }
.sidebar-bottom { padding:0 1.5rem; }
.sidebar-bottom a { display:flex; align-items:center; gap:0.5rem; color:var(--red); font-size:0.85rem; }
.main-content { margin-left:240px; flex:1; padding:2rem; min-height:100vh; }

/* Cards */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:1rem; margin-bottom:2rem; }
.stat-card { background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:1.25rem; }
.stat-card .label { font-size:0.8rem; color:var(--text2); margin-bottom:0.5rem; }
.stat-card .value { font-size:1.8rem; font-weight:700; }
.stat-card .value.blue { color:var(--accent); }
.stat-card .value.green { color:var(--green); }
.stat-card .value.amber { color:var(--amber); }
.stat-card .value.red { color:var(--red); }

/* Tables */
.table-container { background:var(--bg2); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.table-header { padding:1rem 1.25rem; border-bottom:1px solid var(--border); font-weight:600; }
table { width:100%; border-collapse:collapse; }
th { text-align:left; padding:0.75rem 1rem; font-size:0.8rem; color:var(--text2); text-transform:uppercase; letter-spacing:0.05em; border-bottom:1px solid var(--border); }
td { padding:0.75rem 1rem; font-size:0.9rem; border-bottom:1px solid var(--border); }
tr:last-child td { border-bottom:none; }
tr:hover { background:var(--bg3); }

/* Badges */
.badge { display:inline-flex; align-items:center; gap:0.3rem; padding:0.2rem 0.6rem; border-radius:20px; font-size:0.75rem; font-weight:500; }
.badge-pending { background:rgba(139,148,158,0.15); color:var(--text2); }
.badge-progress { background:rgba(210,153,34,0.15); color:var(--amber); animation:pulse 2s infinite; }
.badge-completed { background:rgba(63,185,80,0.15); color:var(--green); }
.badge-failed { background:rgba(248,81,73,0.15); color:var(--red); }
.badge-admin { background:rgba(188,140,255,0.15); color:var(--purple); }
.badge-user { background:rgba(88,166,255,0.15); color:var(--accent); }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.6; } }

/* Generate page */
.tabs { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:1.5rem; }
.tab { padding:0.75rem 1.25rem; cursor:pointer; color:var(--text2); font-size:0.9rem; border-bottom:2px solid transparent; transition:all 0.2s; }
.tab:hover { color:var(--text); }
.tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }
.pill-group { display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:1rem; }
.pill { padding:0.4rem 1rem; border:1px solid var(--border); border-radius:20px; cursor:pointer; font-size:0.85rem; color:var(--text2); transition:all 0.2s; background:transparent; }
.pill:hover { border-color:var(--accent); color:var(--text); }
.pill.active { background:var(--accent2); border-color:var(--accent); color:#fff; }
textarea { width:100%; padding:0.75rem 1rem; background:var(--bg); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:0.95rem; resize:vertical; min-height:100px; outline:none; font-family:inherit; }
textarea:focus { border-color:var(--accent); }
.gen-result { margin-top:1.5rem; padding:1.25rem; background:var(--bg); border:1px solid var(--border); border-radius:10px; }
.gen-result img { max-width:100%; border-radius:8px; margin-top:0.75rem; }
.section-title { font-size:1.1rem; font-weight:600; margin-bottom:1rem; }
.upload-area { border:2px dashed var(--border); border-radius:10px; padding:2rem; text-align:center; color:var(--text2); cursor:pointer; transition:all 0.2s; margin-bottom:1rem; }
.upload-area:hover { border-color:var(--accent); color:var(--text); }
.upload-area input { display:none; }

/* Mobile */
.mobile-topbar { display:none; background:var(--bg); border-bottom:1px solid var(--border); padding:0.75rem 1rem; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:1060; }
.hamburger { background:none; border:1px solid var(--border); color:var(--text); padding:0.4rem 0.6rem; border-radius:6px; cursor:pointer; font-size:1.2rem; }
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:90; }
.sidebar-overlay.show { display:block; }

@media (max-width:768px) {
    .mobile-topbar { display:flex; }
    .sidebar { transform:translateX(-100%); visibility:hidden; transition:all 0.3s; z-index:1050; }
    .sidebar.show { transform:translateX(0); visibility:visible; }
    .main-content { margin-left:0; padding:1rem; }
    .stats-grid { grid-template-columns:repeat(2, 1fr); }
    table { font-size:0.8rem; }
    th, td { padding:0.5rem; }
}