:root { --bg:#f2f4f8; --panel:#fff; --ink:#202634; --muted:#697386; --line:#dfe4ec; --brand:#2c6fb7; --brand-dark:#1d4f85; --sidebar:#293142; --sidebar-soft:#343d50; --danger:#b84a4a; }
* { box-sizing:border-box; }
body { margin:0; font-family:Arial, Helvetica, sans-serif; color:var(--ink); background:var(--bg); }
a { color:var(--brand); text-decoration:none; }
button, input { font:inherit; }
button { min-height:36px; border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:4px; padding:0 12px; cursor:pointer; }
button:hover { border-color:var(--brand); color:var(--brand-dark); }
.primary-button { background:var(--brand); color:#fff; border-color:var(--brand); }
.primary-button:hover { background:var(--brand-dark); color:#fff; }
.login-page { min-height:100vh; display:grid; place-items:center; background:linear-gradient(135deg, #eef3f8, #d8e3ee); }
.login-card { width:min(420px, calc(100vw - 32px)); padding:32px; background:#fff; border-radius:6px; border:1px solid var(--line); box-shadow:0 18px 50px rgba(31,45,61,.12); }
.login-logo { width:64px; height:64px; display:grid; place-items:center; background:var(--brand); color:#fff; font-weight:700; border-radius:6px; margin-bottom:18px; }
.login-card h1 { margin:0 0 8px; font-size:24px; }
.login-card p { margin:0 0 22px; color:var(--muted); }
.alert { background:#fff2f2; color:var(--danger); border:1px solid #f0caca; padding:10px 12px; border-radius:4px; margin-bottom:16px; }
.stacked-form, .edit-form { display:grid; gap:14px; }
label span { display:block; color:var(--muted); font-size:13px; margin-bottom:6px; }
input { width:100%; min-height:38px; border:1px solid var(--line); border-radius:4px; padding:8px 10px; background:#fff; }
input[readonly] { background:#f8fafc; }
.topbar { position:fixed; top:0; right:0; left:0; height:64px; display:flex; justify-content:space-between; align-items:center; padding:0 20px; background:#fff; border-bottom:1px solid var(--line); z-index:10; box-shadow:0 2px 16px rgba(31,45,61,.06); }
.brand, .topbar-tools, .user-button { display:flex; align-items:center; gap:12px; }
.brand span { display:block; color:var(--muted); font-size:12px; margin-top:2px; }
.brand-mark, .avatar { width:38px; height:38px; display:grid; place-items:center; border-radius:4px; font-weight:700; }
.brand-mark { background:var(--brand); color:#fff; }
.avatar { background:#e6edf5; color:var(--brand-dark); }
.icon-button { width:38px; padding:0; }
.search-shell { width:220px; padding:9px 12px; color:var(--muted); background:#f6f8fb; border:1px solid var(--line); border-radius:4px; }
.user-menu { position:relative; }
.user-button { background:#fff; }
.user-dropdown { display:none; position:absolute; right:0; top:46px; min-width:220px; background:#fff; border:1px solid var(--line); border-radius:4px; box-shadow:0 14px 34px rgba(31,45,61,.14); overflow:hidden; }
.user-dropdown.open { display:block; }
.user-dropdown a { display:block; padding:11px 14px; color:var(--ink); }
.user-dropdown a:hover { background:#f6f8fb; }
.workspace { display:flex; padding-top:64px; min-height:100vh; }
.sidebar { position:fixed; top:64px; bottom:0; left:0; width:260px; overflow-y:auto; background:var(--sidebar); color:#fff; padding:18px 14px; transition:transform .2s ease; }
.sidebar.collapsed { transform:translateX(-260px); }
.menu-section { margin-bottom:20px; }
.menu-heading { padding:10px 10px 8px; color:#aeb8ca; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.menu-item { display:flex; gap:10px; align-items:center; min-height:38px; padding:8px 10px; color:#eef3f8; border-radius:4px; }
.menu-item:hover, .menu-item.active { background:var(--sidebar-soft); color:#fff; }
.menu-icon { width:24px; height:24px; display:grid; place-items:center; background:rgba(255,255,255,.1); border-radius:4px; text-transform:uppercase; font-size:12px; }
.main-area { flex:1; margin-left:260px; padding:24px; transition:margin-left .2s ease; }
body.sidebar-collapsed .main-area { margin-left:0; }
.page-title { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:20px; padding:18px 20px; background:#fff; border:1px solid var(--line); border-radius:6px; }
.breadcrumb { display:flex; gap:8px; color:var(--muted); font-size:13px; margin-bottom:6px; }
h1 { margin:0; font-size:24px; }
.page-actions, .compact-actions, .form-actions { display:flex; gap:8px; flex-wrap:wrap; }
.notice { background:#eef7ff; color:#244865; border:1px solid #cfe4f5; border-radius:4px; padding:12px 14px; margin-bottom:18px; }
.content-grid { display:grid; grid-template-columns:minmax(0, 1fr) 360px; gap:18px; align-items:start; }
.main-card { background:var(--panel); border:1px solid var(--line); border-radius:6px; box-shadow:0 8px 24px rgba(31,45,61,.06); }
.wide-card, .form-card, .password-panel { padding:18px; }
.card-header { display:flex; justify-content:space-between; gap:12px; align-items:start; margin-bottom:14px; }
.card-header h2, .password-panel h2 { margin:0 0 4px; font-size:18px; }
.card-header p, .password-panel p { margin:0; color:var(--muted); font-size:13px; }
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:4px; }
table { width:100%; border-collapse:collapse; min-width:620px; }
th, td { padding:11px 12px; border-bottom:1px solid var(--line); text-align:left; font-size:14px; }
th { background:#f7f9fc; color:#435066; font-weight:700; }
tr:hover td { background:#fbfdff; }
.form-card { position:sticky; top:84px; }
.password-panel { margin-top:18px; }
.three-cols { grid-template-columns:repeat(3, minmax(0, 1fr)); }
@media (max-width:980px) { .search-shell { display:none; } .sidebar { transform:translateX(-260px); } .sidebar.open { transform:translateX(0); } .main-area { margin-left:0; padding:16px; } .content-grid { grid-template-columns:1fr; } .form-card { position:static; } .page-title { align-items:flex-start; flex-direction:column; } .three-cols { grid-template-columns:1fr; } }