* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; background:#f5f6f8; color:#333; font-size:14px; }

/* 登录页 */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%); }
.login-card { background:#fff; padding:40px 36px; border-radius:12px; width:340px; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.login-card h1 { font-size:20px; text-align:center; margin-bottom:4px; }
.login-card .subtitle { text-align:center; color:#888; font-size:13px; margin-bottom:24px; }
.login-card input { width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:8px; margin-bottom:12px; font-size:14px; outline:none; }
.login-card input:focus { border-color:#4a6cf7; }
.login-card button { width:100%; padding:10px; background:#4a6cf7; color:#fff; border:none; border-radius:8px; font-size:15px; cursor:pointer; }
.login-card button:hover { background:#3a5ce5; }
.err-msg { color:#e74c3c; font-size:13px; text-align:center; margin-top:8px; min-height:18px; }

/* 主界面 */
.main-wrap { min-height:100vh; }
.topbar { background:#fff; padding:14px 24px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #eee; }
.topbar h1 { font-size:16px; font-weight:600; }
.btn-text { background:none; border:none; color:#888; cursor:pointer; font-size:13px; }
.btn-text:hover { color:#e74c3c; }

.tabs { display:flex; gap:0; background:#fff; border-bottom:1px solid #eee; padding:0 24px; }
.tab { padding:12px 24px; background:none; border:none; border-bottom:2px solid transparent; cursor:pointer; font-size:14px; color:#666; }
.tab.active { color:#4a6cf7; border-bottom-color:#4a6cf7; font-weight:600; }

.content { display:flex; gap:0; height:calc(100vh - 110px); }
.parent-panel { width:260px; background:#fff; border-right:1px solid #eee; display:flex; flex-direction:column; }
.child-panel { flex:1; background:#f5f6f8; display:flex; flex-direction:column; padding:20px; overflow:auto; }

.panel-header { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid #f0f0f0; }
.panel-header h2 { font-size:14px; font-weight:600; }

.parent-list { list-style:none; overflow-y:auto; flex:1; }
.parent-list li { padding:10px 16px; cursor:pointer; border-bottom:1px solid #f8f8f8; display:flex; justify-content:space-between; align-items:center; }
.parent-list li:hover { background:#f8f9ff; }
.parent-list li.active { background:#eef2ff; color:#4a6cf7; border-right:3px solid #4a6cf7; }
.parent-list .pname { flex:1; }
.parent-list .pcount { font-size:12px; color:#aaa; margin-right:8px; }
.parent-list .pops { display:none; gap:4px; }
.parent-list li:hover .pops { display:flex; }
.parent-list .pops button { background:none; border:none; cursor:pointer; font-size:12px; color:#999; padding:2px 4px; }
.parent-list .pops button:hover { color:#4a6cf7; }

.child-info { margin-bottom:12px; font-size:13px; color:#888; }
.child-table { width:100%; border-collapse:collapse; background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.child-table th { background:#fafbfc; padding:10px 12px; text-align:left; font-size:13px; font-weight:600; color:#666; border-bottom:1px solid #eee; }
.child-table td { padding:10px 12px; border-bottom:1px solid #f5f5f5; font-size:13px; }
.child-table tr:hover td { background:#fafbff; }
.child-table .actions { display:flex; gap:6px; }
.child-table .actions button { background:none; border:1px solid #ddd; border-radius:4px; padding:3px 8px; font-size:12px; cursor:pointer; color:#666; }
.child-table .actions button:hover { border-color:#4a6cf7; color:#4a6cf7; }
.child-table .actions button.danger:hover { border-color:#e74c3c; color:#e74c3c; }

/* 按钮 */
.btn-sm { padding:5px 12px; border:1px solid #ddd; border-radius:6px; background:#fff; cursor:pointer; font-size:13px; }
.btn-sm.btn-primary { background:#4a6cf7; color:#fff; border-color:#4a6cf7; }
.btn-sm.btn-primary:hover { background:#3a5ce5; }

/* 弹窗 */
.modal-mask { position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; z-index:100; }
.modal-box { background:#fff; border-radius:12px; padding:24px; width:420px; max-width:90vw; }
.modal-box h3 { font-size:16px; margin-bottom:16px; }
.modal-box input, .modal-box textarea { width:100%; padding:8px 10px; border:1px solid #ddd; border-radius:6px; margin-bottom:10px; font-size:14px; outline:none; font-family:inherit; }
.modal-box input:focus, .modal-box textarea:focus { border-color:#4a6cf7; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }

/* 移动端 */
@media (max-width: 768px) {
  .content { flex-direction:column; height:auto; }
  .parent-panel { width:100%; max-height:200px; border-right:none; border-bottom:1px solid #eee; }
  .parent-list { display:flex; overflow-x:auto; overflow-y:hidden; }
  .parent-list li { min-width:120px; border-bottom:none; border-right:1px solid #f0f0f0; flex-direction:column; align-items:flex-start; }
  .parent-list li.active { border-right:3px solid #4a6cf7; border-bottom:none; }
  .child-panel { padding:12px; }
  .child-table { font-size:12px; }
  .child-table th, .child-table td { padding:8px 6px; }
  #extraHead { width:150px !important; }
  .topbar { padding:12px 16px; }
  .topbar h1 { font-size:14px; }
  .tabs { padding:0 16px; }
  .tab { padding:10px 16px; font-size:13px; }
}