* { margin:0;padding:0;box-sizing:border-box;font-family:'Inter',system-ui,-apple-system,sans-serif }
:root { --bg:#0a0a0a;--bg-elevated:#111;--bg-card:#161616;--bg-hover:#1a1a1a;--bg-active:#222;--border:#262626;--border-light:#333;--text:#fff;--text-secondary:#a1a1a1;--text-tertiary:#666;--accent:#f43f5e;--accent-hover:#e11d48;--accent-light:rgba(244,63,94,.1);--success:#22c55e;--warning:#f59e0b;--danger:#ef4444;--info:#3b82f6;--radius:8px;--radius-lg:12px;--radius-xl:16px;--shadow:0 4px 6px -1px rgba(0,0,0,.3);--shadow-lg:0 10px 15px -3px rgba(0,0,0,.4);--transition:all .2s ease }
html { font-size:14px }
body { background:var(--bg);color:var(--text);min-height:100vh;line-height:1.5;overflow-x:hidden }
body.light { --bg:#f8fafc;--bg-elevated:#fff;--bg-card:#fff;--bg-hover:#f1f5f9;--bg-active:#e2e8f0;--border:#e2e8f0;--border-light:#cbd5e1;--text:#0f172a;--text-secondary:#475569;--text-tertiary:#94a3b8;--shadow:0 4px 6px -1px rgba(0,0,0,.1) }
a { color:inherit;text-decoration:none }
button { font-family:inherit;cursor:pointer }
input,textarea,select { font-family:inherit }

/* Layout */
.layout { display:flex;min-height:100vh }
.main { flex:1;display:flex;flex-direction:column;margin-left:260px;transition:margin .3s ease }
.header { display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;height:60px;background:var(--bg-elevated);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:40 }
.content { flex:1;padding:1.5rem;overflow-y:auto }

/* Header Components */
.menu-toggle { display:none;width:40px;height:40px;align-items:center;justify-content:center;background:transparent;border:none;color:var(--text);border-radius:var(--radius);transition:var(--transition) }
.menu-toggle:hover { background:var(--bg-hover) }
.menu-toggle svg { width:20px;height:20px }

.search-container { display:flex;align-items:center;flex:1;max-width:400px;margin:0 2rem }
.search-container { position:relative }
.search-icon { position:absolute;left:12px;width:16px;height:16px;color:var(--text-tertiary);pointer-events:none }
.search-input { width:100%;padding:.5rem .75rem .5rem 2.5rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:.875rem;transition:var(--transition) }
.search-input:focus { outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light) }
.search-input::placeholder { color:var(--text-tertiary) }

.header-actions { display:flex;align-items:center;gap:.5rem }
.btn-icon { width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--text-secondary);border-radius:var(--radius);transition:var(--transition) }
.btn-icon:hover { background:var(--bg-hover);color:var(--text) }
.btn-icon svg { width:20px;height:20px }

/* Content wrapper */
.content-wrapper { max-width:1200px;margin:0 auto;animation:fadeIn .2s ease }
.content-sm { max-width:600px }
.content-md { max-width:800px }
.content-lg { max-width:1000px }
.content-xl { max-width:1200px }
.content-full { max-width:100% }

/* Loader */
.loader { display:flex;justify-content:center;align-items:center;height:200px;color:var(--text-secondary) }

@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideIn { from{opacity:0;transform:translateX(-8px)} to{opacity:1;transform:translateX(0)} }
.fade-in { animation:fadeIn .25s ease }
.slide-in { animation:slideIn .2s ease }

/* Responsive */
@media(max-width:1024px){ 
.main { margin-left:0 }
.menu-toggle { display:flex }
}

@media(max-width:640px){ 
.content { padding:1rem }
.search-container { margin:0 1rem;max-width:none }
}

/* Utilities */
.text-danger { color:var(--danger)!important }
.text-success { color:var(--success)!important }
.text-warning { color:var(--warning)!important }
.text-muted { color:var(--text-secondary)!important }
.mb-1 { margin-bottom:.5rem }
.mb-2 { margin-bottom:1rem }
.mb-3 { margin-bottom:1.5rem }
.mb-4 { margin-bottom:2rem }
.mt-1 { margin-top:.5rem }
.mt-2 { margin-top:1rem }
.gap-1 { gap:.5rem }
.gap-2 { gap:1rem }
.flex { display:flex }
.flex-col { flex-direction:column }
.items-center { align-items:center }
.justify-between { justify-content:space-between }
.grid { display:grid }
.grid-2 { grid-template-columns:repeat(2,1fr) }
.grid-3 { grid-template-columns:repeat(3,1fr) }
.grid-4 { grid-template-columns:repeat(4,1fr) }

@media(max-width:1200px){ .grid-4 { grid-template-columns:repeat(2,1fr) } }
@media(max-width:768px){ .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr } }

/* Scrollbar */
::-webkit-scrollbar { width:6px;height:6px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:var(--border);border-radius:3px }
::-webkit-scrollbar-thumb:hover { background:var(--border-light) }