* { box-sizing: border-box; }
body { margin:0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; background:#f5f7fb; color:#1f2937; }
button, input, select { font: inherit; }
button { border:0; border-radius:8px; background:#2563eb; color:white; padding:8px 14px; cursor:pointer; }
button:hover { background:#1d4ed8; }
button.secondary { background:#e5e7eb; color:#334155; }
button.secondary:hover { background:#d1d5db; }
button.ghost { background:rgba(15,23,42,.36); color:#cbd5e1; border:1px solid rgba(148,163,184,.18); }
button.ghost:hover { background:rgba(30,41,59,.9); color:#f8fafc; }
input, select { border:1px solid #d1d5db; border-radius:8px; padding:8px 10px; background:white; min-width: 130px; }
input.active-filter, select.active-filter { background:#fff1f2; border-color:#fda4af; box-shadow:0 0 0 2px rgba(244,63,94,.08); }
.hidden { display:none !important; }
.login-card { width:360px; margin:12vh auto; background:white; border-radius:16px; padding:28px; box-shadow:0 20px 60px rgba(15,23,42,.12); display:flex; flex-direction:column; gap:14px; }
.login-card h1 { margin:0 0 10px; font-size:24px; }
.msg { color:#dc2626; min-height:20px; }
.app { display:flex; min-height:100vh; }
aside { width:220px; background:#0f172a; color:#e5e7eb; padding:22px 16px; display:flex; flex-direction:column; gap:10px; }
aside h2 { margin:0 0 8px; font-size:20px; }
aside button { width:100%; text-align:left; background:#1e293b; color:#e5e7eb; }
aside button:hover { background:#334155; }
aside button.active { background:#315ba8; color:white; }
.nav-group { margin:8px 2px 0; color:#94a3b8; font-size:12px; letter-spacing:.04em; }
.me { margin:2px 0 12px; padding:10px; border-radius:12px; background:rgba(30,41,59,.82); display:flex; gap:10px; align-items:center; min-width:0; }
.avatar { width:34px; height:34px; border-radius:50%; flex:0 0 34px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#60a5fa,#2563eb); color:white; font-weight:700; box-shadow:0 8px 20px rgba(37,99,235,.28); }
.me-text { min-width:0; line-height:1.25; }
.me-name { color:#f8fafc; font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:124px; }
.me-role { display:inline-block; margin-top:4px; padding:2px 7px; border-radius:999px; background:rgba(147,197,253,.16); color:#bfdbfe; font-size:12px; }
main { flex:1; padding:24px; overflow:auto; }
h1 { margin:0 0 18px; font-size:24px; }
.panel { background:white; border-radius:12px; padding:14px; margin-bottom:14px; box-shadow:0 1px 3px rgba(15,23,42,.08); display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.query-panel label { display:flex; align-items:center; gap:8px; color:#475569; font-size:14px; }
.query-panel input, .query-panel select { min-width:160px; }
.toudang-query-panel .wide-query-input { min-width:240px; }
.query-panel .check-inline { min-width:auto; }
.query-panel .check-inline input { min-width:0; width:auto; }
.query-actions { flex-basis:100%; display:flex; justify-content:center; gap:10px; align-items:center; }
.query-actions button { width:110px; }
.token-toolbar { flex-direction:column; align-items:stretch; }
.token-generate-row, .token-query-row { display:flex; align-items:center; gap:10px; }
.token-generate-row { width:100%; padding-bottom:10px; border-bottom:1px solid #e5e7eb; }
.ai-query-panel { justify-content:center; flex-direction:column; align-items:center; }
.ai-query-panel textarea { width:min(880px, 78vw); height:86px; resize:vertical; border:1px solid #d1d5db; border-radius:10px; padding:12px 14px; color:#0f172a; font-size:16px; font-weight:500; line-height:1.6; }
.ai-query-panel textarea::placeholder { color:#64748b; font-weight:400; }
.ai-action-row { display:flex; gap:10px; justify-content:center; align-items:center; }
.ai-action-row select { width:150px; }
.ai-action-row button { min-width:110px; }
.ai-msg { flex-basis:100%; text-align:center; }
.ai-centered-block { width:min(880px, 78vw); margin-left:auto; margin-right:auto; text-align:center; justify-content:center; }
.ai-centered-block.detail { text-align:center; }
.ai-progress-error .muted { color:#dc2626; }
.map-panel { height:calc(100vh - 92px); min-height:620px; background:white; border-radius:14px; overflow:hidden; box-shadow:0 1px 3px rgba(15,23,42,.08); }
.map-panel iframe { width:100%; height:100%; border:0; display:block; background:#dbeafe; }
.rankings-table { width:auto; min-width:auto; }
.rankings-table th:not(:first-child), .rankings-table td:not(:first-child) { white-space:normal; }
.rankings-table th.rank-col-arwu { background:#fff7ed; color:#9a3412; }
.rankings-table th.rank-col-qs { background:#eff6ff; color:#1d4ed8; }
.rankings-table th.rank-col-the { background:#f5f3ff; color:#6d28d9; }
.rankings-table th.rank-col-usnews { background:#ecfdf5; color:#047857; }
.rankings-table td.rank-col-arwu { background:#fffaf3; }
.rankings-table td.rank-col-qs { background:#f8fbff; }
.rankings-table td.rank-col-the { background:#fbfaff; }
.rankings-table td.rank-col-usnews { background:#f7fefb; }
.rankings-table tr:hover td.rank-col-arwu { background:#ffedd5; }
.rankings-table tr:hover td.rank-col-qs { background:#dbeafe; }
.rankings-table tr:hover td.rank-col-the { background:#ede9fe; }
.rankings-table tr:hover td.rank-col-usnews { background:#d1fae5; }
.ranking-cell { display:grid; grid-template-columns:auto 1fr; column-gap:8px; row-gap:2px; align-items:start; }
.ranking-cell b { color:#2563eb; font-weight:700; }
.ranking-cell.ranking-arwu b { color:#ea580c; }
.ranking-cell.ranking-qs b { color:#2563eb; }
.ranking-cell.ranking-the b { color:#7c3aed; }
.ranking-cell.ranking-usnews b { color:#059669; }
.ranking-cell span { color:#0f172a; font-weight:600; }
.ranking-cell small, .ranking-cell em { grid-column:2; color:#64748b; font-size:12px; font-style:normal; }
.ranking-cell span, .ranking-cell small, .ranking-cell em { white-space:normal; overflow-wrap:anywhere; word-break:break-word; }
.table-wrap { overflow:auto; border-radius:12px; box-shadow:0 1px 3px rgba(15,23,42,.08); }
.table-wrap table { min-width:max-content; box-shadow:none; border-radius:0; }
.table-summary { margin:2px 0 10px; font-size:13px; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; }
.card { background:white; padding:18px; border-radius:14px; box-shadow:0 1px 3px rgba(15,23,42,.08); }
.card b { display:block; font-size:28px; margin-top:8px; }
table { width:100%; border-collapse:collapse; background:white; border-radius:12px; overflow:hidden; box-shadow:0 1px 3px rgba(15,23,42,.08); }
th, td { border-bottom:1px solid #e5e7eb; padding:10px; text-align:left; vertical-align:top; font-size:14px; }
th { background:#f8fafc; color:#475569; font-weight:600; }
.table-wrap th, .table-wrap td { white-space:nowrap; word-break:keep-all; }
.table-wrap table[data-table-kind="toudang"] th,
.table-wrap table[data-table-kind="toudang"] td { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.table-wrap th.center-cell, .table-wrap td.center-cell { text-align:center; }
.table-wrap th.num-cell, .table-wrap td.num-cell { text-align:right; font-variant-numeric:tabular-nums; }
.table-wrap th { border-right:1px solid #e5e7eb; }
.table-wrap th:last-child { border-right:0; }
.col-resizer { position:absolute; top:0; right:-4px; width:10px; height:100%; cursor:col-resize; user-select:none; z-index:2; }
.col-resizer::after { content:""; position:absolute; top:8px; bottom:8px; left:4px; width:1px; border-radius:999px; background:#94a3b8; opacity:0; }
.table-wrap th:hover .col-resizer::after, .col-resizer:hover::after { background:#2563eb; opacity:.75; }
body.resizing-col { cursor:col-resize; user-select:none; }
tr:hover td { background:#f9fafb; }
.status { display:inline-block; padding:2px 8px; border-radius:999px; background:#e5e7eb; font-size:12px; }
.status.success { background:#dcfce7; color:#166534; }
.status.failed, .status.rejected { background:#fee2e2; color:#991b1b; }
.status.pending { background:#fef3c7; color:#92400e; }
.pager { margin:12px 0; display:flex; gap:8px; align-items:center; }
.pager-top { margin-top:0; }
.pager-link { color:#2563eb; text-decoration:none; cursor:pointer; }
.pager-link:hover { color:#1d4ed8; text-decoration:underline; }
.pager-state { color:#64748b; }
.pager-separator { color:#cbd5e1; }
.detail { margin-top:16px; background:white; border-radius:12px; padding:16px; box-shadow:0 1px 3px rgba(15,23,42,.08); }
pre { background:#0f172a; color:#d1fae5; padding:12px; border-radius:10px; overflow:auto; max-height:420px; }
.link { color:#2563eb; cursor:pointer; }
.small { color:#64748b; font-size:12px; }
.muted { color:#64748b; }
.ok-text { color:#16a34a; font-size:13px; margin-left:8px; }
.row-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.text-btn { padding:0; border:0; background:transparent; color:#2563eb; cursor:pointer; }
.text-btn:hover { background:transparent; color:#1d4ed8; text-decoration:underline; }
.modal { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; }
.modal-mask { position:absolute; inset:0; background:rgba(15,23,42,.42); }
.modal-card { position:relative; width:380px; max-width:calc(100vw - 32px); background:white; border-radius:16px; padding:22px; box-shadow:0 24px 70px rgba(15,23,42,.22); display:flex; flex-direction:column; gap:10px; }
.modal-card.wide { width:520px; }
.modal-card h2 { margin:0 0 6px; font-size:20px; }
.modal-card label { color:#475569; font-size:13px; }
.modal-card input, .modal-card select { width:100%; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:4px; }
.inline-label { display:flex; align-items:center; gap:8px; }
.inline-label input { width:auto; min-width:0; }
.check-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.check-item { border:1px solid #e2e8f0; border-radius:10px; padding:10px; display:flex; align-items:center; gap:8px; color:#334155; }
.check-item input { width:auto; min-width:0; }