* { box-sizing: border-box; }
:root { --primary:#ffe500; --primary-dark:#7a6600; --text:#1f2733; --muted:#778294; --line:#e8edf5; --bg:#f6f7f2; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); }
.hidden { display: none !important; }
h1,h2,h3,p { margin-top: 0; } p { color: var(--muted); }
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at top left,#fff8a6,#ffe500 38%,#f5f7fb 39%); }
.login-card { width: 420px; padding: 42px; border-radius: 28px; background: rgba(255,255,255,.94); box-shadow: 0 28px 90px rgba(31,39,51,.16); text-align: center; }
.login-logo { width: 210px; max-height: 70px; object-fit: contain; margin-bottom: 18px; }
.login-card h1 { font-size: 28px; }
input,select,textarea { width:100%; min-height:42px; margin:8px 0; padding:0 12px; border:1px solid var(--line); border-radius:12px; background:#fff; font:inherit; }
textarea { min-height:140px; padding-top:12px; }
button { min-height:42px; padding:0 18px; border:0; border-radius:12px; background:linear-gradient(135deg,#ffe500,#ffd000); color:#1f2733; font-weight:800; cursor:pointer; }
button:disabled { opacity:.35; cursor:not-allowed; }
button.ghost { background:#fff9bf; color:var(--primary-dark); }
button.danger { background:#fff0f0; color:#b42318; }
.app { display:flex; min-height:100vh; }
aside { width:236px; padding:22px 16px; background:#191a12; color:#fff; }
.brand { display:flex; align-items:center; gap:10px; margin:0 8px 26px; font-size:20px; font-weight:900; }
.brand img { width:44px; height:44px; object-fit:contain; background:var(--primary); border-radius:12px; }
.nav { width:100%; margin-bottom:8px; text-align:left; background:transparent; color:#d8dcc8; }
.nav.active,.nav:hover { background:var(--primary); color:#1f2733; }
main { flex:1; padding:28px; }
header { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.header-actions { display:flex; gap:10px; align-items:center; }
.card { padding:22px; border-radius:20px; background:#fff; box-shadow:0 12px 34px rgba(31,39,51,.06); margin-bottom:18px; }
.grid { display:grid; gap:18px; } .two { grid-template-columns:420px 1fr; } .three { grid-template-columns:repeat(3,1fr); }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.metric { padding:22px; border-radius:18px; background:linear-gradient(135deg,#fff9bf,#fff); }
.metric b { display:block; color:var(--primary-dark); font-size:34px; margin-bottom:6px; }
.toolbar,.filter-row { display:flex; justify-content:flex-end; gap:12px; margin-bottom:14px; }
.filter-row input { margin:0; flex:1; }
.filter-grid { display:grid; grid-template-columns:2fr repeat(5,1fr) 90px 90px; gap:10px; align-items:center; margin-bottom:14px; }
.filter-grid input,.filter-grid select { margin:0; }
.battery-filter-card { display:grid; gap:12px; padding:14px; margin-bottom:16px; border:1px solid var(--line); border-radius:18px; background:#fbfcfe; }
.battery-filter-row { display:grid; gap:12px; align-items:end; }
.battery-filter-row input,.battery-filter-row select { margin:0; }
.battery-filter-row label { display:grid; gap:6px; min-width:0; }
.battery-filter-row label span { color:var(--muted); font-size:13px; font-weight:700; }
.battery-filter-row.search-row { grid-template-columns:minmax(280px,1fr) 92px 92px; }
.battery-filter-row.select-row { grid-template-columns:repeat(3,minmax(160px,1fr)); }
.battery-filter-row.text-row { grid-template-columns:repeat(5,minmax(120px,1fr)); }
.battery-filter-row.date-row { grid-template-columns:minmax(360px,520px); justify-content:start; }
.date-range-input { display:grid; grid-template-columns:1fr 32px 1fr; align-items:center; gap:8px; min-height:42px; padding:0 10px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.date-range-input input { min-height:40px; padding:0; border:0; border-radius:0; }
.date-range-input em { color:var(--muted); font-style:normal; text-align:center; }
.tag { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; margin:4px 6px 4px 0; border-radius:999px; background:#fff9bf; color:var(--primary-dark); }
.tag button { min-height:20px; width:20px; padding:0; border-radius:50%; background:#ffe500; }
.small-muted { color:var(--muted); font-size:13px; }
.agent-tree ul { list-style:none; margin:0 0 0 18px; padding:0 0 0 18px; border-left:1px dashed #d8e0ec; }
.agent-tree>ul { margin-left:0; padding-left:0; border-left:0; }
.agent-tree li { margin:10px 0; }
.tree-node { display:grid; grid-template-columns:1fr 120px 70px 80px 42px 42px; gap:10px; align-items:center; padding:12px 14px; border-radius:14px; background:#f8fafc; }
.tree-node em { font-style:normal; color:var(--primary-dark); font-weight:800; }
.table-row,.table-head { display:grid; grid-template-columns:80px 1fr 120px 90px 90px 150px; gap:12px; padding:12px 0; border-bottom:1px solid #edf1f7; align-items:center; }
.table-head { font-weight:800; color:#475569; }
.data-table .table-head { grid-template-columns:150px 1.2fr 1fr 100px 100px; }
.row-click { cursor:pointer; font-weight:400; color:var(--text); }
.row-click:hover { background:#fffdf0; }
.modal { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:28px; background:rgba(0,0,0,.36); }
.modal-card { width:min(760px,100%); max-height:90vh; overflow:auto; padding:24px; border-radius:22px; background:#fff; box-shadow:0 24px 80px rgba(0,0,0,.2); }
.modal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.rich { min-height:220px; }
@media (max-width:900px){ aside{display:none}.two,.three,.metric-grid,.filter-grid,.battery-filter-row.search-row,.battery-filter-row.select-row,.battery-filter-row.text-row,.battery-filter-row.date-row{grid-template-columns:1fr}main{padding:16px}.table-row,.table-head{grid-template-columns:1fr} }

.tree-node { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.tree-toggle { min-width:56px; background:#eef2f7; color:#475569; }
.tree-toggle-spacer { display:inline-block; min-width:14px; }
.tree-node b { min-width:160px; }
.tree-node span { min-width:60px; }
.tree-node .tree-area { min-width:120px; }
.tree-node small,.tree-node em,.tree-meta { padding:4px 8px; border-radius:999px; background:#fff; color:#5f6673; font-style:normal; font-size:12px; }
.tree-meta { background:#fff9bf; color:var(--primary-dark); }
.tree-node button { min-height:32px; padding:0 12px; border-radius:10px; }
.tree-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-left:auto; justify-content:flex-end; }
.tree-actions button { min-width:88px; }
.notice-row { display:grid; grid-template-columns:220px 1fr 150px; gap:18px; align-items:center; padding:16px 0; border-bottom:1px solid #edf1f7; }
.notice-title { color:#1f2733; font-weight:800; margin-bottom:6px; }
.notice-row p { margin:0; color:#5d6675; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.6; }
.notice-row button { margin-left:6px; }
.media-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:10px 0; }
.media-preview { display:grid; place-items:center; min-height:180px; border:1px dashed var(--line); border-radius:16px; background:#fbfcfe; color:var(--muted); overflow:hidden; }
.media-preview img,.media-preview video { width:100%; max-height:240px; object-fit:contain; background:#000; }
.modal-actions { display:flex; justify-content:flex-end; margin-top:14px; }
@media (max-width:900px){ .notice-row,.media-grid{grid-template-columns:1fr}.tree-node b,.tree-node span{min-width:0} }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.card-head h3 { margin:0; }
.pc-chart { height:220px; display:flex; align-items:flex-end; gap:12px; padding:18px 8px 0; border-bottom:1px solid var(--line); }
.pc-chart div { flex:1; min-width:0; text-align:center; color:var(--muted); font-size:12px; }
.pc-chart span { display:block; color:var(--primary-dark); font-weight:800; margin-bottom:6px; }
.pc-chart i { display:block; width:22px; min-height:8px; max-height:150px; margin:0 auto 8px; border-radius:999px 999px 0 0; background:linear-gradient(180deg,#ffe500,#ffd000); }
.pc-chart em { display:block; font-style:normal; white-space:nowrap; }
.rank-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.rank-panel { padding:12px; border:1px solid var(--line); border-radius:14px; background:#fbfcfe; }
.rank-panel h4 { margin:0 0 10px; color:#1f2733; }
.rank-row { display:grid; grid-template-columns:28px 1fr auto; gap:8px; align-items:center; padding:8px 0; border-bottom:1px dashed #e4e9f1; }
.rank-row:last-child { border-bottom:0; }
.rank-row em { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#ffe500; color:#191a12; font-style:normal; font-weight:800; }
.rank-row span { min-width:0; overflow:hidden; }
.rank-row strong,.rank-row small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank-row small { margin-top:2px; color:var(--muted); font-size:12px; font-weight:400; }
.rank-row b { color:var(--primary-dark); }
.delete-tip { display:inline-flex; }
.delete-tip button:disabled { cursor:not-allowed; opacity:.55; }
.wide-table { width:100%; overflow-x:auto; }
.battery-head { display:grid; grid-template-columns:130px 72px 104px 90px 120px 180px 80px 62px 62px 90px 84px 60px 92px 92px; gap:8px; align-items:center; min-width:1320px; padding:9px 0; border-bottom:1px solid #edf1f7; font-size:12px; }
.battery-head-agentless { grid-template-columns:130px 72px 104px 120px 180px 80px 62px 62px 90px 84px 60px 92px 92px; min-width:1230px; }
.battery-head b { color:#475569; }
.battery-head span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.battery-head button { min-height:28px; padding:0 8px; border-radius:8px; margin-right:4px; font-size:12px; }
.log-table { width:100%; overflow-x:auto; }
.log-row { display:grid; grid-template-columns:160px 160px 180px 1fr 120px; gap:10px; align-items:center; min-width:900px; padding:10px 0; border-bottom:1px solid #edf1f7; font-size:13px; }
.log-head { color:#475569; font-weight:800; }
.log-row em { display:block; color:var(--muted); font-style:normal; font-size:12px; margin-top:2px; }
.pager { display:flex; gap:8px; justify-content:flex-end; margin-top:14px; }
.pager button { min-height:32px; padding:0 12px; }
.active-page { background:#191a12; color:#ffe500; }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px 12px; }
@media (max-width:900px){ .form-grid,.rank-grid{grid-template-columns:1fr}.pc-chart{gap:6px}.pc-chart em{font-size:10px} }

/* ===== Mobile adaptation ===== */
@media (min-width:901px){
  .mobile-bar,.drawer-overlay,.drawer,.filter-toggle{display:none!important}
}
@media (max-width:900px){
  .mobile-bar{display:flex;position:sticky;top:0;z-index:11;align-items:center;justify-content:space-between;height:52px;padding:0 16px;background:#191a12;color:#ffe500}
  .mobile-bar-title{font-size:18px;font-weight:800}
  .hamburger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:0;background:transparent;border:0;cursor:pointer}
  .hamburger span{display:block;width:22px;height:2px;background:#ffe500;border-radius:2px;transition:transform .2s}
  .drawer-overlay{position:fixed;inset:0;z-index:14;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .2s}
  .drawer-overlay.open{opacity:1;pointer-events:auto}
  .drawer{position:fixed;top:0;left:0;z-index:15;width:260px;height:100vh;padding:20px 16px;background:#191a12;transform:translateX(-100%);transition:transform .2s;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .drawer.open{transform:translateX(0)}
  .drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;font-size:18px;font-weight:900;color:#ffe500}
  .drawer-close{width:36px;height:36px;padding:0;background:transparent;border:0;font-size:22px;color:#ffe500;cursor:pointer}
  .nav-drawer{display:block;width:100%;margin:4px 0;padding:12px 14px;text-align:left;background:transparent;border:0;border-radius:10px;color:#d8dcc8;font-size:15px;font-weight:600;cursor:pointer}
  .nav-drawer.active,.nav-drawer:hover{background:var(--primary);color:#1f2733}
  .filter-toggle{display:none}
}
.battery-filter-card,.logs .battery-filter-card{transition:max-height .25s ease}
@media (max-width:900px){
  .filter-toggle{display:block;width:100%;margin:0 0 10px;padding:10px 14px;text-align:left;background:#fff;border:1px solid var(--line);border-radius:12px;font-size:14px;font-weight:700;color:var(--text);cursor:pointer}
  .filter-toggle::after{content:' ▾';float:right;color:var(--muted)}
  .filter-toggle.open::after{content:' ▴'}
  .battery-filter-card{max-height:0;overflow:hidden;padding:0;border:0;margin:0}
  .battery-filter-card.show{max-height:800px;padding:14px;border:1px solid var(--line);border-radius:18px;background:#fbfcfe;margin-bottom:16px}
}
@media (max-width:900px){
  .wide-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tree-node{flex-wrap:wrap;padding:12px}
  .tree-actions{width:100%;margin:8px 0 0;justify-content:flex-start}
  .tree-actions button{min-width:72px;min-height:36px;font-size:13px}
}