:root {
  --bg:#f4f7ff; --primary:#15803d; --primary-dark:#0e8c68;
  --accent:#10b981; --text:#0f172a; --muted:#64748b;
  --border:rgba(15,23,42,.10); --card:#ffffff;
  --grad:linear-gradient(135deg,#15b487,#0e8c68);
}
* { box-sizing:border-box; }
body { margin:0; font-family:-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--text); }
.sidebar { position:fixed; top:0; left:0; bottom:0; width:240px; background:#fff; border-right:1px solid var(--border); padding:8px 0 20px; overflow-y:auto; z-index:60; transition:transform .2s ease; }
.s-brand { display:flex; align-items:center; gap:9px; padding:14px 18px 14px; font-weight:800; font-size:1.1rem; color:var(--text); text-decoration:none; }
.s-brand .logo { width:28px; height:28px; border-radius:8px; background:var(--grad); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.95rem; }
.s-brand span { color:var(--primary); }
.s-group { padding:14px 20px 5px; font-size:.66rem; letter-spacing:.6px; text-transform:uppercase; color:#94a3b8; font-weight:700; }
.sidebar a.item { display:flex; align-items:center; gap:11px; margin:2px 10px; padding:10px 12px; border-radius:9px; color:#475467; text-decoration:none; font-size:.92rem; }
.sidebar a.item .ic { width:20px; text-align:center; }
.sidebar a.item:hover { background:#f1f5f4; color:var(--text); }
.sidebar a.item.act { background:var(--grad); color:#fff; font-weight:600; box-shadow:0 4px 12px rgba(14,140,104,.3); }
.topbar2 { position:fixed; top:0; left:240px; right:0; height:58px; background:#fff; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px; padding:0 18px; z-index:55; }
.page-title { font-size:1.1rem; font-weight:700; margin:0; }
.hamb { display:none; background:none; border:none; font-size:1.5rem; line-height:1; color:var(--text); cursor:pointer; padding:0; margin:0; }
.hamb:hover { filter:none; }
.t-spacer { flex:1; }
.t-user { display:flex; align-items:center; gap:9px; }
.avatar { width:34px; height:34px; border-radius:50%; background:var(--grad); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; }
.t-user .nm { font-size:.82rem; font-weight:600; line-height:1.15; }
.t-user .rl { font-size:.7rem; color:var(--muted); }
.main { margin-left:240px; padding-top:58px; }
.backdrop { display:none; position:fixed; inset:0; background:rgba(15,23,42,.4); z-index:54; }
.lang { font-size:.78rem; }
.lang a { padding:2px 7px; border:1px solid var(--border); border-radius:5px; color:var(--muted); text-decoration:none; }
.lang a.on { background:var(--primary); border-color:var(--primary); color:#fff; }
@media(max-width:900px){
  .sidebar { transform:translateX(-100%); box-shadow:0 0 30px rgba(0,0,0,.15); }
  .sidebar.open { transform:translateX(0); }
  .topbar2 { left:0; }
  .hamb { display:block; }
  .main { margin-left:0; }
  .backdrop.show { display:block; }
  .t-user .nm, .t-user .rl { display:none; }
}
.wrap { padding:18px; max-width:1040px; margin:0 auto; }
h1 { font-size:1.25rem; margin:4px 0 6px; }
.sub { color:var(--muted); font-size:.9rem; margin:0 0 18px; }
.cards { display:grid; gap:14px; grid-template-columns:repeat(2,1fr); margin-bottom:20px; }
@media(min-width:760px){ .cards{ grid-template-columns:repeat(5,1fr); } }
.stat { background:#fff; border:1px solid var(--border); border-left:3px solid var(--primary); border-radius:12px; padding:16px; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.stat .ico { width:38px; height:38px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:#eafaf2; font-size:1.05rem; margin-bottom:12px; }
.stat .n { font-size:1.7rem; font-weight:800; }
.stat .l { font-size:.8rem; color:var(--muted); margin-top:2px; }
.stat.a2 { border-left-color:#2563eb; } .stat.a2 .ico { background:#e7effe; }
.stat.a3 { border-left-color:#7c3aed; } .stat.a3 .ico { background:#f0e9fe; }
.stat.a4 { border-left-color:#ea580c; } .stat.a4 .ico { background:#fdeee2; }
.stat.a5 { border-left-color:#0891b2; } .stat.a5 .ico { background:#e0f2fe; }
.card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:16px; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.num { font-size:1.7rem; font-weight:700; color:var(--primary); }
.lbl { font-size:.8rem; color:var(--muted); margin-top:2px; }
.panel { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.panel h2 { font-size:1rem; margin:0 0 12px; }
label { display:block; margin:10px 0 4px; font-size:.85rem; font-weight:600; }
input, select, textarea { width:100%; padding:11px; font-size:1rem; border:1px solid var(--border); border-radius:8px; background:#fff; color:var(--text); }
input:focus, select:focus, textarea:focus { outline:2px solid var(--primary); border-color:var(--primary); }
.row { display:grid; gap:12px; grid-template-columns:1fr 1fr; }
@media(max-width:600px){ .row{ grid-template-columns:1fr; } }
button, .btn { margin-top:8px; padding:12px 20px; font-size:1rem; border:none; border-radius:8px; background:var(--grad); color:#fff; cursor:pointer; text-decoration:none; display:inline-block; font-weight:600; }
button:hover, .btn:hover { filter:brightness(.95); }
.btn-sm { padding:7px 12px; font-size:.85rem; margin:0; }
table { width:100%; border-collapse:collapse; }
th, td { padding:10px; text-align:left; border-bottom:1px solid #eef1f5; font-size:.9rem; vertical-align:middle; }
th { background:#f1f5f4; font-size:.75rem; text-transform:uppercase; color:var(--muted); }
.tbl-wrap { overflow-x:auto; margin-top:10px; }
.ok { background:#dcfce7; color:#15803d; padding:12px; border-radius:8px; margin-bottom:14px; }
.bad { background:#fee2e2; color:#dc2626; padding:12px; border-radius:8px; margin-bottom:14px; }
.muted { color:var(--muted); font-size:.85rem; }
.thumb { width:42px; height:42px; object-fit:cover; border-radius:6px; border:1px solid var(--border); background:#eef1f5; }
ul.activity { list-style:none; margin:0; padding:0; }
ul.activity li { padding:8px 0; border-bottom:1px solid #eef1f5; font-size:.9rem; }
ul.activity li:last-child { border:none; }
.badge { display:inline-block; padding:3px 9px; border-radius:20px; font-size:.75rem; font-weight:600; }
.badge-green { background:#dcfce7; color:#15803d; }
.badge-amber { background:#fef3c7; color:#b45309; }
.badge-red { background:#fee2e2; color:#dc2626; }
.badge-gray { background:#eef1f5; color:#475467; }
.login-page { background:linear-gradient(135deg,#eafaf2 0%,#f4f7ff 100%); display:flex; align-items:center; justify-content:center; min-height:100vh; padding:16px; }
.login-box { width:100%; max-width:380px; background:#fff; border-radius:14px; padding:28px; box-shadow:0 12px 40px rgba(15,23,42,.12); border:1px solid var(--border); }
.login-box h1 { text-align:center; font-size:1.3rem; margin:0 0 4px; }
.login-box .logo-b { color:var(--primary); }
.login-box h2 { text-align:center; font-weight:400; font-size:.9rem; color:var(--muted); margin:0 0 20px; }
.pwrap { position:relative; }
.pwrap input { padding-right:44px; }
.eye { position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; font-size:1.1rem; padding:6px; color:var(--muted); margin:0; }
.eye:hover { background:none; filter:none; }
.login-box .sub2 { width:100%; margin-top:20px; }
.login-lang { text-align:center; margin-top:18px; font-size:.85rem; }
.login-lang a { padding:3px 8px; color:var(--muted); text-decoration:none; }
.login-lang a.on { color:var(--primary); font-weight:700; }
.btn-cancel-s { background:#eef1f5; color:#0f172a; margin-top:8px; }
.btn-cancel-s:hover { background:#e2e7ee; filter:none; }