:root {
  color-scheme: light;
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --surface-dark: #101828;
  --line: #e2e7ef;
  --line-strong: #cbd3df;
  --text: #172033;
  --muted: #687386;
  --accent: #3757d5;
  --accent-hover: #2945bb;
  --accent-soft: #eef2ff;
  --success: #167b5b;
  --success-soft: #e9f7f1;
  --danger: #c24154;
  --danger-soft: #fff0f2;
  --warning: #a15c13;
  --warning-soft: #fff7e8;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-lg: 0 20px 55px rgba(16, 24, 40, .09);
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--bg); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 8% 0%, rgba(55, 87, 213, .08), transparent 29rem),
    radial-gradient(circle at 100% 40%, rgba(26, 152, 167, .05), transparent 32rem),
    var(--bg);
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.site-header {
  position: sticky;
  z-index: 40;
  top: 0;
  width: 100%;
  min-height: 72px;
  padding: 0 max(28px, calc((100vw - 1320px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(203, 211, 223, .78);
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(18px);
}
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: white;
  background: linear-gradient(145deg, #17233b, #3757d5);
  box-shadow: 0 8px 18px rgba(55, 87, 213, .2);
  font-size: 13px;
  font-weight: 850;
}
.brand strong, .brand small { display: block; }
.brand strong { font-size: 17px; letter-spacing: .08em; }
.brand small { margin-top: 3px; color: #8791a3; font-size: 8px; font-weight: 750; letter-spacing: .16em; }
nav { display: flex; align-items: center; gap: 7px; }
nav form { margin: 0; }
nav a, .link-button {
  min-height: 36px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: 9px;
  color: #596579;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
}
nav a:hover, .link-button:hover { color: var(--text); background: #f2f4f7; }
.nav-current { color: var(--accent); background: var(--accent-soft); }
.nav-current:hover { color: var(--accent-hover); background: #e4e9ff; }
.nav-primary { color: white; background: var(--surface-dark); }
.nav-primary:hover { color: white; background: #26344d; }
.header-context { color: #7b8698; font-size: 11px; font-weight: 650; letter-spacing: .04em; }

.page-shell { width: min(1320px, calc(100% - 48px)); min-height: calc(100vh - 148px); margin: 0 auto; padding: 54px 0 78px; }
.public-auth .page-shell { width: min(100% - 32px, 520px); padding: 48px 0 64px; display: grid; place-items: center; }
footer {
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto;
  padding: 22px 0 30px;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  color: #8993a3;
  font-size: 10px;
}
footer strong { color: #667185; font-weight: 700; }
.eyebrow { margin-bottom: 14px; color: var(--accent); font-size: 10px; font-weight: 850; letter-spacing: .18em; }

.page-heading h1, .auth-panel h1, .message-card h1 { margin: 0; line-height: 1.08; letter-spacing: -.035em; }

.button {
  min-height: 42px;
  padding: 0 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.button:hover { transform: translateY(-1px); }
.button.primary { color: white; background: var(--accent); box-shadow: 0 8px 20px rgba(55, 87, 213, .16); }
.button.primary:hover { background: var(--accent-hover); }
.button.logout-submit { color: white; background: var(--danger); box-shadow: 0 8px 20px rgba(194, 65, 84, .16); }
.button.logout-submit:hover { background: #a93648; }
.button.secondary { color: var(--text); border-color: var(--line-strong); background: var(--surface); box-shadow: var(--shadow-sm); }
.button.secondary:hover { border-color: #aeb9c9; background: var(--surface-soft); }
.button.disabled { color: #9aa4b2; border-color: var(--line); background: #f6f7f9; cursor: not-allowed; box-shadow: none; }
.button.wide { width: 100%; }

.page-heading { margin-bottom: 30px; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.page-heading h1 { font-size: clamp(36px, 4.8vw, 58px); font-weight: 720; }
.page-heading p { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.page-heading .identity-line { color: #536075; }
.account-badge { padding: 8px 12px; color: var(--accent); border: 1px solid #cfd7ff; border-radius: 999px; background: var(--accent-soft); font-size: 10px; font-weight: 750; white-space: nowrap; }

.workspace-list { max-width: 980px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.workspace-row { min-width: 0; min-height: 86px; padding: 16px 18px; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); box-shadow: var(--shadow-sm); transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.workspace-row:hover { border-color: #bcc6d5; box-shadow: 0 12px 30px rgba(16, 24, 40, .07); transform: translateY(-1px); }
.workspace-row-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; color: var(--accent); background: var(--accent-soft); font-size: 12px; font-weight: 850; }
.workspace-row strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.workspace-row-action { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; font-weight: 650; }
.workspace-row-action b { color: var(--accent); font-size: 15px; }

.auth-page { width: 100%; min-height: 560px; display: grid; place-items: center; }
.auth-page.compact { min-height: 500px; }
.auth-panel { width: min(100%, 440px); padding: 38px 40px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 18px 48px rgba(16, 24, 40, .08); }
.auth-panel-header { margin-bottom: 28px; text-align: center; }
.auth-kicker { margin-bottom: 12px; display: block; color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.auth-panel h1 { font-size: 27px; font-weight: 720; }
.auth-panel-header p { margin: 11px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.logout-confirm-form { margin: 0 0 10px; }
.auth-form label { margin-bottom: 18px; display: block; color: #465268; font-size: 12px; font-weight: 650; }
.auth-form label small { display: block; margin-top: 7px; color: #8c96a6; font-weight: 500; }
.auth-form input[type="email"], .auth-form input[type="tel"], .auth-form input[type="text"], .auth-form input[type="password"] { width: 100%; height: 46px; margin-top: 8px; padding: 0 13px; color: var(--text); border: 1px solid var(--line-strong); outline: none; border-radius: 8px; background: #fbfcfe; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.auth-form input:hover { border-color: #aeb8c7; background: white; }
.auth-form input:focus { border-color: var(--accent); background: white; box-shadow: 0 0 0 3px rgba(55, 87, 213, .1); }
.auth-form label.remember-device { margin: -2px 0 18px; padding: 11px 12px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 9px; background: #fafbfc; cursor: pointer; }
.remember-device input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--accent); }
.remember-device span { min-width: 0; }
.remember-device b { display: block; font-size: 11px; }
.auth-form .remember-device small { margin-top: 3px; font-size: 9px; line-height: 1.4; }
.auth-help { margin-top: 17px; color: var(--muted); text-align: center; font-size: 11px; }
.auth-help a:hover { color: var(--accent); }
.auth-divider { margin: 22px 0 16px; display: flex; align-items: center; gap: 12px; color: #929ba9; font-size: 10px; white-space: nowrap; }
.auth-divider::before, .auth-divider::after { height: 1px; flex: 1; background: var(--line); content: ""; }
.auth-status-panel { text-align: center; }

.flash-stack { position: fixed; z-index: 80; top: 84px; left: 50%; width: min(660px, calc(100% - 32px)); transform: translateX(-50%); }
.flash { margin-bottom: 8px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 10px; background: white; box-shadow: var(--shadow-lg); font-size: 12px; }
.flash-error { color: var(--danger); border-color: #f4c9d0; background: var(--danger-soft); }
.flash-success { color: var(--success); border-color: #bfe6d7; background: var(--success-soft); }

.message-card { max-width: 640px; margin: 68px auto; padding: 48px; text-align: center; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-lg); }
.message-icon { width: 52px; height: 52px; margin: 0 auto 26px; display: grid; place-items: center; color: var(--accent); border-radius: 15px; background: var(--accent-soft); font-size: 20px; }
.message-card h1 { font-size: 38px; }
.message-card p { margin: 18px auto 27px; color: var(--muted); line-height: 1.7; }
.message-card .button, .debug-link { margin: 5px; }
.debug-link { display: block; padding: 10px; color: var(--warning); font-size: 11px; overflow-wrap: anywhere; }

.user-summary { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.user-summary article { padding: 16px 19px; display: flex; align-items: baseline; justify-content: space-between; border-left: 1px solid var(--line); }
.user-summary article:first-child { border-left: 0; }
.user-summary span { color: var(--muted); font-size: 10px; }
.user-summary strong { font-size: 23px; }
.invite-admin { margin: 22px 0 30px; display: grid; grid-template-columns: minmax(300px, .75fr) minmax(520px, 1.25fr); gap: 14px; }
.invite-create-card, .invite-list-card { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm); }
.invite-form { display: flex; align-items: flex-end; gap: 10px; }
.invite-form label { min-width: 0; flex: 1; color: #596579; font-size: 10px; font-weight: 700; }
.invite-form input { width: 100%; height: 42px; margin-top: 7px; padding: 0 12px; color: var(--text); border: 1px solid var(--line-strong); outline: none; border-radius: 8px; background: #fbfcfe; }
.invite-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(55, 87, 213, .1); }
.invite-code-notice { margin-top: 15px; padding: 14px; display: grid; gap: 7px; border: 1px solid #bfe6d7; border-radius: 10px; background: var(--success-soft); }
.invite-code-notice span, .invite-code-notice small { color: #42685d; font-size: 9px; line-height: 1.5; }
.invite-code-notice code { color: var(--success); font-size: 17px; font-weight: 800; letter-spacing: .06em; overflow-wrap: anywhere; user-select: all; }
.invite-list-card .section-heading, .invite-create-card .section-heading { align-items: flex-start; }
.invite-table .tag { margin: 0; font-size: 8px; }
.compact-button { min-height: 30px; padding: 0 10px; font-size: 9px; }
.session-list { display: grid; gap: 11px; }
.session-row { padding: 18px 20px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); box-shadow: var(--shadow-sm); }
.session-row.current-session { border-color: #cfd7ff; background: #fcfcff; }
.session-icon { width: 42px; height: 42px; display: grid; place-items: center; color: var(--accent); border-radius: 11px; background: var(--accent-soft); font-size: 11px; font-weight: 800; }
.session-main { min-width: 0; }
.session-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.session-title strong { margin-right: 3px; font-size: 13px; }
.session-title .tag { margin: 0; }
.session-main p { margin: 7px 0 3px; color: #657084; font-size: 10px; line-height: 1.5; }
.session-main small { color: #949dac; font-size: 9px; }
.session-revoke-others { margin-top: 16px; text-align: right; }
.user-list { display: grid; gap: 12px; }
.user-row { padding: 20px; display: grid; grid-template-columns: minmax(310px, .9fr) minmax(420px, 1.4fr) auto auto; align-items: center; gap: 19px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm); }
.user-row:hover { border-color: #d1d8e3; box-shadow: 0 9px 30px rgba(16, 24, 40, .05); }
.protected-user-row { background: #fbfcfd; }
.protected-user-row .permission-panel { opacity: .56; }
.user-identity { min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 11px; }
.user-avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: white; background: linear-gradient(145deg, #263657, #5269d7); font-size: 13px; font-weight: 850; }
.user-profile { min-width: 0; }
.user-profile > strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.user-account-identifier { margin-top: 3px; display: block; overflow: hidden; color: #8993a3; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.user-tags { display: flex; flex-wrap: wrap; margin-top: 6px; }
.tag { margin: 0 4px 3px 0; padding: 3px 6px; display: inline-block; color: var(--muted); border-radius: 999px; background: #f0f2f5; font-size: 8px; font-style: normal; font-weight: 700; }
.tag.admin { color: #5544b9; background: #f0edff; }
.tag.online { color: var(--success); background: var(--success-soft); }
.tag.offline { color: #717b8b; background: #eef1f5; }
.tag.verified { color: var(--success); background: var(--success-soft); }
.tag.pending { color: var(--warning); background: var(--warning-soft); }
.user-meta { grid-column: 1 / -1; margin: 4px 0 0 53px; display: flex; flex-wrap: wrap; gap: 8px 19px; }
.user-meta div { min-width: 0; }
.user-meta dt { color: #98a1af; font-size: 8px; }
.user-meta dd { margin: 2px 0 0; color: #596579; font-size: 9px; }
.permission-panel { min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 11px; }
.permission-panel legend { padding: 0 6px; color: #8993a3; font-size: 8px; font-weight: 750; letter-spacing: .08em; }
.permission-fields { display: grid; grid-template-columns: repeat(3, minmax(115px, 1fr)); gap: 7px; }
.permission-fields label { --service-color: var(--accent); min-width: 0; padding: 7px 8px; display: flex; align-items: center; gap: 7px; border-radius: 8px; cursor: pointer; }
.permission-fields label:hover { background: color-mix(in srgb, var(--service-color) 6%, white); }
.permission-fields input { width: 14px; height: 14px; margin: 0; flex: none; accent-color: var(--service-color); }
.permission-fields span, .permission-fields b, .permission-fields small { min-width: 0; display: block; }
.permission-fields b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.permission-fields small { margin-top: 2px; overflow: hidden; color: #9aa3b1; text-overflow: ellipsis; white-space: nowrap; font-size: 6px; letter-spacing: .05em; }
.account-controls { display: grid; gap: 8px; }
.control-toggle { display: flex; align-items: center; gap: 7px; color: #596579; font-size: 9px; white-space: nowrap; }
.control-toggle input { margin: 0; accent-color: var(--accent); }
.control-toggle.admin-field { color: #6553bd; }
.control-toggle.active-field { color: var(--success); }
.locked-field { opacity: .6; }
.protected-account { display: grid; gap: 2px; color: #6553bd; font-size: 9px; white-space: nowrap; }
.protected-account b { font-size: 9px; }
.protected-account small { color: #8c96a6; font-size: 8px; }
.user-actions { grid-column: 4; display: grid; gap: 7px; }
.settings-button { gap: 5px; }
.settings-button span { font-size: 12px; line-height: 1; }
.profile-dialog { width: min(440px, calc(100vw - 32px)); padding: 0; color: var(--text); border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 24px 80px rgba(16, 24, 40, .22); }
.profile-dialog::backdrop { background: rgba(16, 24, 40, .46); backdrop-filter: blur(3px); }
.profile-dialog-header { padding: 20px 22px 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.profile-dialog-header small { color: var(--accent); font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.profile-dialog-header h2 { margin: 4px 0 0; font-size: 18px; }
.dialog-close { width: 32px; height: 32px; display: grid; place-items: center; color: #737e90; border: 0; border-radius: 8px; background: #f1f3f7; cursor: pointer; font-size: 20px; line-height: 1; }
.dialog-close:hover { color: var(--text); background: #e8ebf1; }
.profile-dialog-account { margin: 18px 22px 0; padding: 10px 12px; color: #657084; border-radius: 8px; background: #f5f7fa; font-size: 10px; overflow-wrap: anywhere; }
.profile-dialog-field { margin: 17px 22px 0; display: grid; gap: 7px; color: #596579; font-size: 10px; font-weight: 750; }
.profile-dialog-field input { width: 100%; height: 42px; padding: 0 12px; color: var(--text); border: 1px solid var(--line-strong); outline: none; border-radius: 8px; background: #fbfcfe; font: inherit; font-weight: 500; }
.profile-dialog-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(55, 87, 213, .1); }
.profile-dialog-field small { color: #8c96a6; font-size: 8px; font-weight: 500; line-height: 1.5; }
.profile-dialog-actions { padding: 20px 22px 22px; display: flex; justify-content: flex-end; gap: 8px; }

.metric-grid { margin-bottom: 34px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.metric-grid article { min-height: 136px; padding: 19px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); box-shadow: var(--shadow-sm); }
.metric-grid span { color: var(--muted); font-size: 10px; }
.metric-grid strong { margin: 16px 0 10px; color: var(--accent); font-size: 31px; line-height: 1; letter-spacing: -.04em; }
.metric-grid small { margin-top: auto; color: #8993a3; font-size: 9px; line-height: 1.5; }
.metric-grid .datetime-value { font-size: 16px; line-height: 1.25; letter-spacing: -.02em; }
.metric-grid .online-text { color: var(--success); }
.compact-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.analytics-section { margin-top: 34px; }
.section-heading { margin-bottom: 12px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.section-heading h2 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
.section-heading p { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.analytics-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 14px; color: var(--muted); font-size: 9px; }
.analytics-legend span { display: inline-flex; align-items: center; gap: 5px; }
.analytics-legend i { width: 7px; height: 7px; display: inline-block; border-radius: 2px; }
.trend-registration { background: #e0a23a; }
.trend-login { background: var(--accent); }
.trend-failure { background: var(--danger); }
.trend-service { background: #1c9a8c; }
.trend-chart-card, .service-chart-card { min-width: 0; padding: 22px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); box-shadow: var(--shadow-sm); }
.trend-chart-card { overflow-x: auto; }
.trend-chart { min-width: 760px; height: 270px; padding: 14px 4px 0; display: grid; grid-template-columns: repeat(14, minmax(40px, 1fr)); gap: 8px; border-bottom: 1px solid var(--line-strong); background: repeating-linear-gradient(to bottom, transparent 0, transparent 61px, #edf0f4 62px, transparent 63px); }
.trend-day { min-width: 0; height: 278px; display: grid; grid-template-rows: 238px 24px; gap: 10px; color: #8993a3; text-align: center; font: 8px ui-monospace, monospace; }
.trend-bars { height: 238px; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.trend-bar { width: min(8px, 19%); height: max(3px, var(--bar-height)); display: block; border-radius: 3px 3px 1px 1px; opacity: .86; transition: opacity .16s ease, filter .16s ease; }
.trend-bar:hover { opacity: 1; filter: saturate(1.25); }
.service-chart-card { display: grid; gap: 2px; }
.service-chart-row { min-width: 0; padding: 13px 4px; display: grid; grid-template-columns: minmax(170px, .7fr) minmax(300px, 1.3fr); align-items: center; gap: 22px; border-bottom: 1px solid var(--line); }
.service-chart-row:last-child { border-bottom: 0; }
.service-chart-label strong, .service-chart-label span { display: block; }
.service-chart-label strong { font-size: 11px; }
.service-chart-label span { margin-top: 5px; color: #8993a3; font-size: 8px; }
.service-bars { display: grid; gap: 7px; }
.service-bars > div { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 34px; align-items: center; gap: 9px; }
.service-bars i { width: var(--bar-width); height: 8px; display: block; border-radius: 999px; }
.service-bars span { color: #6f7a8d; font: 8px ui-monospace, monospace; }
.service-allowed { background: #1c9a8c; }
.service-denied { background: #e78896; }
.user-ranking-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.user-ranking-card { min-width: 0; padding: 16px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-sm); transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.user-ranking-card:hover { border-color: #b9c3d3; box-shadow: 0 10px 26px rgba(16, 24, 40, .07); transform: translateY(-1px); }
.user-rank { color: #a4adbb; font: 13px ui-monospace, monospace; }
.user-ranking-main { min-width: 0; }
.user-ranking-heading { min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.user-ranking-heading strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.user-ranking-heading span { flex: none; color: #939cab; font-size: 7px; }
.user-ranking-bars { margin-top: 11px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.user-ranking-bars > div { min-width: 0; display: grid; grid-template-columns: auto minmax(30px, 1fr); align-items: center; gap: 7px; color: #717d90; font-size: 8px; }
.user-ranking-bars i { height: 4px; overflow: hidden; border-radius: 999px; background: #edf0f4; }
.user-ranking-bars b { width: var(--bar-width); height: 100%; display: block; border-radius: inherit; }
.ranking-login { background: var(--accent); }
.ranking-service { background: #1c9a8c; }
.ranking-action { color: var(--accent); font-size: 8px; font-weight: 750; white-space: nowrap; }
.visual-empty { grid-column: 1 / -1; margin: 0; padding: 36px; color: var(--muted); text-align: center; font-size: 10px; }
.data-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); box-shadow: var(--shadow-sm); }
.data-table { width: 100%; border-collapse: collapse; font-size: 10px; }
.data-table th, .data-table td { padding: 13px 14px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); white-space: nowrap; }
.data-table th { color: #7d8798; background: #f8f9fb; font-weight: 700; letter-spacing: .03em; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: #fafbfe; }
.data-table code { color: #536075; font-size: 9px; }
.data-table .long-cell { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.data-table .agent-cell { max-width: 330px; overflow: hidden; color: #8791a2; text-overflow: ellipsis; }
.table-link { color: var(--accent); font-weight: 700; }
.event-status { padding: 4px 7px; display: inline-block; border-radius: 999px; font-size: 8px; font-weight: 700; }
.event-status.success { color: var(--success); background: var(--success-soft); }
.event-status.failure { color: var(--danger); background: var(--danger-soft); }
.empty-cell { padding: 28px !important; color: var(--muted); text-align: center !important; }
.retention-note { margin: 24px 0 0; color: #8993a3; font-size: 9px; line-height: 1.6; }
.break-text { overflow-wrap: anywhere; }

.activity-chart-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.chart-card { min-width: 0; padding: 19px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); box-shadow: var(--shadow-sm); }
.chart-card-header { min-height: 54px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.chart-card h3 { margin: 0; font-size: 14px; }
.chart-card-header p, .chart-note { margin: 7px 0 0; color: #7d8798; font-size: 9px; line-height: 1.5; }
.chart-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 11px; color: #7d8798; font-size: 9px; white-space: nowrap; }
.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; }
.login-dot { background: #3757d5; }
.service-dot { background: #1c9a8c; }
.chart-unit { color: #8993a3; font: 9px ui-monospace, monospace; white-space: nowrap; }
.chart-frame { margin-top: 8px; overflow-x: auto; }
.activity-chart { width: 100%; min-width: 680px; display: block; overflow: visible; }
.chart-grid-line { stroke: #e6eaf0; stroke-width: 1; stroke-dasharray: 3 5; }
.chart-axis-line { stroke: #cbd3df; stroke-width: 1; }
.chart-axis-label { fill: #8993a3; font: 9px ui-monospace, monospace; }
.chart-y-label { text-anchor: end; dominant-baseline: middle; }
.chart-x-label { text-anchor: middle; }
.chart-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.login-line { stroke: #3757d5; }
.service-line { stroke: #1c9a8c; }
.chart-point { stroke: white; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.login-point { fill: #3757d5; }
.service-point { fill: #1c9a8c; }
.time-bar { fill: rgba(55, 87, 213, .68); transition: fill .16s ease; }
.time-bar:hover { fill: #3757d5; }
.chart-empty { fill: #8993a3; font-size: 11px; text-anchor: middle; }
.chart-note { margin-top: 2px; }

@media (max-width: 1080px) {
  .invite-admin { grid-template-columns: 1fr; }
  .user-row { grid-template-columns: 1fr auto; }
  .permission-panel { grid-column: 1 / -1; }
  .account-controls { grid-column: 1; display: flex; }
  .user-actions { grid-column: 2; display: flex; }
}
@media (max-width: 840px) {
  .metric-grid, .compact-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .permission-fields { grid-template-columns: repeat(2, minmax(115px, 1fr)); }
  .user-ranking-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .site-header { min-height: 66px; padding: 11px 16px; align-items: flex-start; }
  .brand small { display: none; }
  nav { gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
  nav a, .link-button { min-height: 30px; padding: 0 7px; font-size: 10px; }
  .page-shell { width: min(100% - 28px, 1320px); padding: 38px 0 56px; }
  .public-auth .page-shell { width: min(100% - 28px, 520px); padding: 28px 0 44px; }
  .page-heading { align-items: stretch; flex-direction: column; }
  .workspace-list { grid-template-columns: 1fr; }
  .auth-page, .auth-page.compact { min-height: 0; }
  .auth-panel, .message-card { padding: 28px 24px; }
  .invite-create-card, .invite-list-card { padding: 16px; }
  .invite-form { align-items: stretch; flex-direction: column; }
  .invite-form .button { width: 100%; }
  .session-row { grid-template-columns: 36px minmax(0, 1fr); padding: 16px; }
  .session-icon { width: 36px; height: 36px; }
  .session-row form { grid-column: 1 / -1; }
  .session-row form .button, .session-revoke-others .button { width: 100%; }
  .user-summary { grid-template-columns: 1fr; }
  .user-summary article { border-left: 0; border-top: 1px solid var(--line); }
  .user-summary article:first-child { border-top: 0; }
  .user-row { grid-template-columns: 1fr; padding: 16px; }
  .permission-panel, .account-controls, .user-actions { grid-column: 1; }
  .permission-fields { grid-template-columns: 1fr; }
  .user-actions { display: grid; }
  .user-meta { margin-left: 0; }
  .metric-grid, .compact-metrics { grid-template-columns: 1fr; }
  .metric-grid article { min-height: 120px; }
  .section-heading { align-items: stretch; flex-direction: column; }
  .analytics-legend { justify-content: flex-start; }
  .trend-chart-card, .service-chart-card { padding: 15px; }
  .service-chart-row { grid-template-columns: 1fr; gap: 10px; }
  .service-bars > div { grid-template-columns: minmax(0, 1fr) 28px; }
  .user-ranking-card { grid-template-columns: 28px minmax(0, 1fr); }
  .ranking-action { display: none; }
  .user-ranking-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .chart-card { padding: 15px; }
  .chart-card-header { min-height: 0; flex-direction: column; }
  .chart-legend { justify-content: flex-start; }
  footer { width: min(100% - 28px, 1320px); display: grid; gap: 5px; }
}