@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');
:root{
--font-main:'JetBrains Mono',monospace;
--fs-body:14px;
--fs-small:12px;
--fs-label:13px;
--fs-input:14px;
--fs-button:14px;
--fs-nav:14px;
--fs-h1:30px;
--fs-h2:22px;
--fs-h3:17px;
--fs-p:14px;
--fs-link:14px;
--primary:#b18a52;
--primary2:#e5eb07;
--primary-dark:#1d4ed8;
--primary-dark2:#1d4ed8;
--secondary:#0ea5e9;
--accent:#38bdf8;
--success:#10b981;
--danger:#ef4444;
--warning:#f59e0b;
--bg:#f4f1eb;
--surface:#ffffff;
--surface-2:#f8fafc;
--text:#172033;
--text2:#fff;
--text-soft:#634e4e;
--text-soft2:#ddd;	
--border:#93a1b4;
--header:#161616f7;
--footer:#0f172a;
--shadow:0 10px 30px rgba(15,23,42,.08);
--radius:14px;
--transition:.25s ease;
}
[data-theme="dark"]{
--bg:#080d18;
--surface:#111827;
--surface-2:#182234;
--text:#e5edf8;
--text2:#e5edf8;
--text-soft:#94a3b8;
--text-soft2:#94a3b8;
--border:#263449;
--header:#0d1524;
--footer:#060b14;
--shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{font-family:var(--font-main);font-size:var(--fs-body);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-main);font-size:var(--fs-body);line-height:1.6;transition:background var(--transition),color var(--transition)}
h1{font-family:var(--font-main);font-size:var(--fs-h1);font-weight:700;line-height:1.25;margin:0 0 14px}
h2{font-family:var(--font-main);font-size:var(--fs-h2);font-weight:700;line-height:1.3;margin:0 0 12px}
h3{font-family:var(--font-main);font-size:var(--fs-h3);font-weight:600;line-height:1.4;margin:0 0 10px}
p{font-family:var(--font-main);font-size:var(--fs-p);margin:0 0 12px}
a{font-family:var(--font-main);font-size:var(--fs-link);color:var(--primary);text-decoration:none;transition:var(--transition)}
a:hover{color:var(--primary-dark)}
label{font-family:var(--font-main);font-size:var(--fs-label);font-weight:600;color:var(--text);display:block;margin-bottom:7px}
input,select,textarea,button{font-family:var(--font-main);font-size:var(--fs-input)}
input,select,textarea{width:100%;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:10px;padding:11px 13px;outline:0;transition:var(--transition)}
input::placeholder,textarea::placeholder{font-family:var(--font-main);font-size:var(--fs-input);color:var(--text-soft)}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
button{border:0;cursor:pointer}
img{max-width:100%;display:block}
.topbar{height:68px;background:var(--header);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 24px;position:sticky;top:0;z-index:1000;box-shadow:0 3px 15px rgba(0,0,0,.04)}
.brand{display:flex;align-items:center;gap:11px;color:var(--text2);font-size:18px;font-weight:700;margin-right:35px;white-space:nowrap}
.brand-mark{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--primary),var(--secondary));display:flex;align-items:center;justify-content:center;color:#fff;font-size:17px;box-shadow:0 7px 18px rgba(37,99,235,.25)}
.top-menu{display:flex;align-items:center;gap:4px;flex:1}
.top-menu a{display:flex;align-items:center;gap:7px;color:var(--text-soft2);font-size:var(--fs-nav);font-weight:600;padding:10px 12px;border-radius:9px}
.top-menu a:hover,.top-menu a.active{background:rgba(37,99,235,.09);color:var(--primary2)}
.top-actions{display:flex;align-items:center;gap:8px}
.theme-btn,.menu-toggle{width:40px;height:40px;border-radius:10px;background:var(--surface-2);color:var(--text);display:flex;align-items:center;justify-content:center;font-size:16px;border:1px solid var(--border)}
.theme-btn:hover,.menu-toggle:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.user-badge{display:flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid var(--border);border-radius:10px;font-size:var(--fs-small);color:var(--text-soft2)}
.user-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--primary2),var(--secondary));color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.page-wrapper{min-height:calc(100vh - 68px);display:flex;flex-direction:column}
.main-content{flex:1;padding:28px}
.content-container{width:100%;max-width:1400px;margin:auto}
.footer{background:var(--footer);color:#94a3b8;padding:22px 28px;font-size:var(--fs-small);text-align:center}
.footer strong{color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;border-radius:10px;font-family:var(--font-main);font-size:var(--fs-button);font-weight:600;transition:var(--transition);cursor:pointer}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark);color:#fff;transform:translateY(-1px)}
.btn-secondary{background:var(--surface-2);color:var(--text);border:1px solid var(--border)}
.btn-danger{background:var(--danger);color:#fff}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.form-group{margin-bottom:18px}
.alert{padding:12px 14px;border-radius:10px;font-size:var(--fs-small);margin-bottom:18px;border:1px solid}
.alert-danger{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.25);color:var(--danger)}
.alert-success{background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.25);color:var(--success)}
@media(max-width:1050px){
.top-menu a{padding:9px 7px}
.top-menu a span{display:none}
.brand{margin-right:15px}
}
@media(max-width:760px){
.topbar{padding:0 14px}
.menu-toggle{display:flex}
.top-menu{display:none;position:absolute;top:68px;left:0;right:0;background:var(--header);border-bottom:1px solid var(--border);padding:10px;flex-direction:column;align-items:stretch;box-shadow:var(--shadow)}
.top-menu.open{display:flex}
.top-menu a{padding:12px}
.top-menu a span{display:inline}
.user-badge{display:none}
.main-content{padding:18px 12px}
h1{font-size:25px}
}
@media(min-width:761px){
.menu-toggle{display:none}
}