:root{--bg:#fff;--card:#fff;--text:#111;--muted:#666;--primary:#2563eb;--bar:#111827;--barText:#fff;--border:#e5e7eb;}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text);}
a{color:inherit;text-decoration:none}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--border);background:var(--card);}
.iconbtn{border:0;background:transparent;font-size:22px;cursor:pointer;line-height:1}
.brand{font-weight:900}
.content{padding:14px 14px 86px 14px;max-width:980px;margin:0 auto;}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px;box-shadow:0 2px 10px rgba(0,0,0,.03);}
h3{margin:0 0 12px 0}
.row{font-size:12px;color:var(--muted);margin-bottom:6px}
input,select,textarea{width:100%;padding:10px 10px;border:1px solid var(--border);border-radius:12px;font-size:14px;}
textarea{min-height:80px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:#fff;cursor:pointer;font-weight:800}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.danger{background:#fff;border-color:#ef4444;color:#b91c1c}
.msg{margin-top:10px;color:#b91c1c;font-weight:800}
.msg.ok{color:#047857}
.col2{display:grid;grid-template-columns:1fr;gap:10px}
.col3{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:700px){.col2{grid-template-columns:1fr 1fr}.col3{grid-template-columns:1fr 1fr 1fr}}
.gridwrap{overflow-x:auto;border:1px solid var(--border);border-radius:14px}
.grid{width:100%;border-collapse:collapse;min-width:860px}
.grid th,.grid td{padding:10px;border-bottom:1px solid var(--border);text-align:left;font-size:13px;white-space:nowrap}
.grid th{background:#f9fafb;font-size:12px;color:#374151}
.drawer{position:fixed;top:0;left:0;height:100%;width:290px;background:#fff;border-right:1px solid var(--border);transform:translateX(-100%);transition:.2s;z-index:50;padding:12px}
.drawer.open{transform:translateX(0)}
.drawerHead{font-weight:900;padding:12px 10px}
.ditem{display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:12px;color:#111}
.ditem:hover{background:#f3f4f6}
.ditem.danger{color:#b91c1c;font-weight:900;margin-top:10px}
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;z-index:40}
.backdrop.show{display:block}
.bottombar{position:fixed;bottom:0;left:0;right:0;background:var(--bar);color:var(--barText);display:flex;justify-content:space-around;padding:10px 6px;z-index:30}
.bitem{color:rgba(255,255,255,.85);display:flex;flex-direction:column;align-items:center;font-size:18px}
.bitem span{font-size:11px;margin-top:2px}
.bitem.active{color:#fff}
.toast{position:fixed;left:50%;top:45%;transform:translate(-50%,-50%);background:#111827;color:#fff;padding:12px 14px;border-radius:14px;font-weight:900;z-index:100;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.acwrap{position:relative}
.aclist{position:absolute;left:0;right:0;top:100%;background:#fff;border:1px solid var(--border);border-radius:12px;max-height:260px;overflow:auto;z-index:25;display:none}
.acitem{padding:10px;cursor:pointer}
.acitem:hover{background:#f3f4f6}
.small{font-size:12px;color:#6b7280}
.kpi{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.kpi div{background:#f9fafb;border:1px solid var(--border);border-radius:14px;padding:10px 12px;min-width:160px}