:root {
  --ink: #112a46;
  --ink-soft: #51677f;
  --muted: #8291a4;
  --line: #e1e8ef;
  --line-strong: #cbd6e1;
  --canvas: #f5f8fb;
  --surface: #ffffff;
  --surface-muted: #f7fafc;
  --blue: #2563d9;
  --blue-dark: #164aab;
  --blue-pale: #eaf2ff;
  --teal: #0f9487;
  --teal-dark: #087469;
  --teal-pale: #e4f6f1;
  --amber: #b7771d;
  --amber-pale: #fff4df;
  --lilac: #7755c8;
  --lilac-pale: #f0ebff;
  --danger: #c94b58;
  --danger-pale: #fff0f1;
  --radius: 12px;
  --shadow-soft: 0 2px 8px rgba(17, 42, 70, 0.04), 0 16px 36px rgba(17, 42, 70, 0.04);
  --shadow-float: 0 12px 40px rgba(17, 42, 70, 0.14);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid rgba(37, 99, 217, 0.23); outline-offset: 2px; }
::selection { background: #cee0ff; color: var(--ink); }

.app-shell { display: flex; min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; width: 252px; flex-direction: column; padding: 25px 14px 18px; background: #102a47; color: #dbe8f6; }
.brand-lockup { display: flex; align-items: center; gap: 11px; padding: 0 11px 27px; }
.brand-mark { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 10px; background: #e9b862; color: #153354; font-size: 19px; font-weight: 800; box-shadow: 0 4px 12px rgba(233, 184, 98, 0.22); }
.brand-name { font-size: 16px; font-weight: 700; letter-spacing: .02em; }
.brand-caption { margin-top: 2px; color: #8ea8c4; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
.workspace-switcher { display: flex; align-items: center; gap: 10px; margin: 0 0 23px; padding: 11px 10px; border: 1px solid rgba(226, 238, 250, .15); border-radius: 10px; background: rgba(255, 255, 255, .07); }
.workspace-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; background: #1c9d91; color: #e5fffa; font-size: 14px; font-weight: 700; }
.workspace-copy { min-width: 0; flex: 1; }
.workspace-copy strong, .workspace-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-copy strong { color: #edf5fd; font-size: 12px; font-weight: 600; }
.workspace-copy span { margin-top: 2px; color: #8ea8c4; font-size: 10px; }
.workspace-class-control { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; color: #a9c0d6; }
.workspace-class-control select { width: 24px; height: 28px; padding: 0; border: 0; outline: 0; opacity: 0; cursor: pointer; }
.workspace-class-control svg { position: absolute; right: 0; width: 17px; height: 17px; pointer-events: none; }
.workspace-class-control:hover { color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.side-nav { display: flex; flex-direction: column; gap: 5px; }
.nav-label { padding: 0 13px 8px; color: #7d9ab8; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.nav-label-spaced { margin-top: 25px; }
.nav-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 0 13px; border: 0; border-radius: 8px; background: transparent; color: #b7cbe0; font-size: 13px; text-align: left; transition: .2s ease; }
.nav-item svg { width: 17px; height: 17px; stroke-width: 1.8; }
.nav-item:hover { background: rgba(255, 255, 255, .08); color: #f2f8ff; }
.nav-item.active { background: #eaf2ff; color: #1d58b7; box-shadow: 0 5px 15px rgba(0, 0, 0, .08); }
.nav-item.active svg { color: var(--blue); }
.nav-count { margin-left: auto; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 20px; background: rgba(255, 255, 255, .12); color: #bdd1e5; font-size: 10px; }
.nav-item.active .nav-count { background: #d6e5ff; color: #1d58b7; }
.sidebar-foot { margin-top: auto; padding: 13px 11px 0; border-top: 1px solid rgba(226, 238, 250, .12); }
.sync-status { display: flex; align-items: center; gap: 7px; color: #9cb3c9; font-size: 10px; }
.sync-status time { margin-left: auto; color: #718ca8; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #38c29b; box-shadow: 0 0 0 3px rgba(56, 194, 155, .16); }
.help-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 20px; padding: 0; border: 0; background: none; color: #9cb3c9; font-size: 11px; }
.help-link:hover { color: #f2f8ff; }
.help-link svg { width: 15px; height: 15px; }

.main-column { width: calc(100% - 252px); min-width: 0; margin-left: 252px; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; min-height: 69px; padding: 0 46px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .94); backdrop-filter: blur(18px); }
.topbar-left, .topbar-actions, .breadcrumb, .profile-trigger { display: flex; align-items: center; }
.breadcrumb { gap: 10px; color: #8090a2; font-size: 12px; }
.breadcrumb svg { width: 14px; height: 14px; color: #b3bfcb; }
.breadcrumb strong { color: var(--ink); font-weight: 600; }
.topbar-actions { gap: 13px; }
.topbar-divider { width: 1px; height: 26px; background: var(--line); }
.icon-button { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #6e8194; transition: .2s ease; }
.icon-button svg { width: 17px; height: 17px; stroke-width: 1.8; }
.icon-button:hover { background: #eef4fa; color: var(--ink); }
.icon-button.bordered { border-color: var(--line-strong); background: var(--surface); }
.icon-button.quiet { color: #a9c0d6; }
.icon-button.quiet:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.notification-dot { position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border: 1px solid #fff; border-radius: 50%; background: #dc6a62; }
.profile-trigger { gap: 9px; padding: 3px 0; border: 0; background: none; color: var(--ink); text-align: left; }
.profile-trigger > svg { width: 14px; height: 14px; color: #94a2b1; }
.profile-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #dce8fb; color: #2c5ca7; font-size: 12px; font-weight: 700; }
.profile-text { display: flex; flex-direction: column; }
.profile-text strong { font-size: 12px; font-weight: 600; }
.profile-text small { margin-top: 1px; color: var(--muted); font-size: 9px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 17px; border: 1px solid transparent; border-radius: 8px; font-size: 12px; font-weight: 600; transition: .2s ease; }
.button svg { width: 16px; height: 16px; stroke-width: 1.9; }
.button-primary { background: var(--blue); color: #fff; box-shadow: 0 5px 13px rgba(37, 99, 217, .16); }
.button-primary:hover { background: var(--blue-dark); transform: translateY(-1px); box-shadow: 0 7px 17px rgba(37, 99, 217, .22); }
.button-small { min-height: 35px; padding: 0 14px; }
.button-ghost { border-color: var(--line-strong); background: #fff; color: var(--ink-soft); }
.button-ghost:hover { border-color: #9caebe; background: #f9fbfd; color: var(--ink); }
.mobile-menu { display: none; }

.content { max-width: 1540px; margin: 0 auto; padding: 48px 58px 72px; }
.view { display: none; animation: fade-in .23s ease; }
.view.active { display: block; }
@keyframes fade-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
.welcome-row, .page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; color: var(--teal); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow-line { display: inline-block; width: 21px; height: 2px; border-radius: 2px; background: var(--teal); }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 650px; margin-bottom: 11px; color: var(--ink); font-size: clamp(28px, 3.1vw, 40px); line-height: 1.25; letter-spacing: -.01em; }
h1 em { color: var(--blue); font-style: normal; }
.lede { max-width: 650px; margin-bottom: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.8; }
.date-chip { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink-soft); font-size: 11px; white-space: nowrap; }
.date-chip svg { width: 15px; height: 15px; color: var(--teal); }
.quick-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-top: 38px; }
.quick-action { display: flex; align-items: center; gap: 12px; min-height: 84px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); text-align: left; box-shadow: 0 2px 7px rgba(17, 42, 70, .025); transition: .2s ease; }
.quick-action:hover { border-color: #b5c8dc; box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.quick-action-accent { border-color: #cae9e2; background: #fbfffe; }
.quick-icon { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; background: var(--blue-pale); color: var(--blue); }
.quick-action:nth-child(2) .quick-icon { background: var(--teal-pale); color: var(--teal); }
.quick-action:nth-child(3) .quick-icon { background: var(--amber-pale); color: var(--amber); }
.quick-icon svg { width: 19px; height: 19px; }
.quick-action > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.quick-action strong { font-size: 12px; font-weight: 700; }
.quick-action small { margin-top: 5px; color: var(--muted); font-size: 10px; }
.quick-arrow { width: 15px; height: 15px; margin-left: auto; color: #9eb0c0; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-top: 15px; }
.metric-card { min-height: 138px; padding: 17px 17px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 2px 7px rgba(17, 42, 70, .025); }
.metric-head, .metric-foot { display: flex; align-items: center; justify-content: space-between; }
.metric-head { color: var(--ink-soft); font-size: 11px; }
.metric-icon { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; }
.metric-icon svg { width: 15px; height: 15px; }
.metric-blue { background: var(--blue-pale); color: var(--blue); }.metric-green { background: var(--teal-pale); color: var(--teal); }.metric-orange { background: var(--amber-pale); color: var(--amber); }.metric-purple { background: var(--lilac-pale); color: var(--lilac); }
.metric-value { display: block; min-height: 42px; margin-top: 12px; color: var(--ink); font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.metric-foot { gap: 6px; color: var(--muted); font-size: 10px; }
.metric-muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trend { display: inline-flex; align-items: center; gap: 2px; color: var(--teal); font-weight: 600; }.trend svg { width: 13px; height: 13px; }
.text-button { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--blue); font-size: 11px; font-weight: 600; white-space: nowrap; }.text-button:hover { color: var(--blue-dark); text-decoration: underline; text-underline-offset: 3px; }.text-button svg { width: 14px; height: 14px; }
.overview-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 15px; margin-top: 30px; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 2px 7px rgba(17, 42, 70, .025); }
.activity-panel, .progress-panel { min-height: 337px; padding: 22px 23px; }
.panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }.panel-kicker { margin-bottom: 5px; color: var(--teal); font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }.panel-header h2 { margin-bottom: 0; font-size: 17px; letter-spacing: -.01em; }.panel-date { color: var(--muted); font-size: 10px; }
.activity-list { margin-top: 18px; }.activity-item { display: flex; align-items: center; gap: 11px; min-height: 50px; border-bottom: 1px solid #eef2f6; }.activity-item:last-child { border-bottom: 0; }.activity-avatar { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 8px; background: #eaf2ff; color: #2d63b7; font-size: 11px; font-weight: 700; }.activity-item:nth-child(2) .activity-avatar { background: #e5f5ef; color: #168274; }.activity-item:nth-child(3) .activity-avatar { background: #fff3df; color: #ae761d; }.activity-item:nth-child(4) .activity-avatar { background: #f0ebff; color: #7456bb; }.activity-copy { min-width: 0; flex: 1; }.activity-copy strong { display: block; overflow: hidden; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }.activity-copy span { display: block; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.activity-time { color: #9aa8b7; font-size: 9px; }
.progress-ring-wrap { display: flex; align-items: center; gap: 24px; margin: 32px 10px 29px; }.progress-ring { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 138px; height: 138px; border-radius: 50%; background: conic-gradient(var(--teal) 0 68%, #e5eef1 68% 100%); }.progress-ring::before { position: absolute; width: 108px; height: 108px; border-radius: 50%; background: #fff; content: ""; }.progress-ring > div { position: relative; display: flex; align-items: baseline; z-index: 1; }.progress-ring strong { font-size: 28px; }.progress-ring span { margin-left: 2px; color: var(--ink-soft); font-size: 13px; }.progress-copy strong { font-size: 12px; }.progress-copy p { margin: 7px 0 13px; color: var(--muted); font-size: 10px; line-height: 1.7; }.progress-copy .text-button svg { width: 13px; height: 13px; }.progress-legend { display: flex; gap: 18px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }.progress-legend span { display: flex; align-items: center; gap: 5px; }.progress-legend strong { margin-left: 1px; color: var(--ink); }.legend-dot { width: 7px; height: 7px; border-radius: 50%; }.legend-done { background: var(--teal); }.legend-pending { background: #e5eef1; }

.page-heading { margin-bottom: 30px; }.page-heading h1 { margin-bottom: 7px; }.page-heading .lede { max-width: 720px; }.page-heading > .button, .page-heading > .secure-badge { margin-top: 25px; }
.callout { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: -4px 0 20px; padding: 10px 13px; border: 1px solid #cce1fa; border-radius: 8px; background: #f3f8ff; color: #44698e; font-size: 11px; }.callout > svg { width: 16px; color: var(--blue); }.callout .icon-button { margin-left: auto; width: 24px; height: 24px; }.callout .icon-button svg { width: 14px; }
.groups-toolbar, .dataset-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 15px; }.search-box { display: flex; align-items: center; gap: 8px; width: 285px; height: 39px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; color: #8a9aab; }.search-box:focus-within { border-color: #82a9df; box-shadow: 0 0 0 3px rgba(37, 99, 217, .1); }.search-box svg { width: 16px; height: 16px; flex: 0 0 auto; }.search-box input { min-width: 0; flex: 1; height: 100%; border: 0; outline: 0; background: none; color: var(--ink); font-size: 11px; }.search-box input::placeholder { color: #9eacba; }.search-box-wide { width: min(510px, 100%); }.search-box kbd { padding: 3px 5px; border: 1px solid var(--line); border-radius: 4px; color: #9aabbc; font-size: 9px; }
.toolbar-actions { display: flex; align-items: center; gap: 7px; }.filter-button, .select-button { min-height: 35px; padding: 0 11px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--ink-soft); font-size: 11px; }.filter-button:hover, .filter-button.active { border-color: var(--line); background: #fff; color: var(--blue); }.filter-button span { margin-left: 3px; color: #98a5b3; }.select-button { display: inline-flex; align-items: center; gap: 8px; border-color: var(--line-strong); background: #fff; }.select-button svg { width: 14px; height: 14px; color: #8c9bab; }
.group-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }.group-card { padding: 17px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 2px 7px rgba(17, 42, 70, .025); transition: .2s ease; }.group-card:hover { border-color: #b5c8dc; box-shadow: var(--shadow-soft); transform: translateY(-1px); }.group-card.is-mine { border-color: #a8d8cd; background: #fcfffe; }.group-card.is-full { opacity: .83; }.group-card-top { display: flex; align-items: flex-start; justify-content: space-between; }.group-name { display: flex; align-items: center; gap: 8px; }.group-name h3 { margin-bottom: 0; font-size: 15px; }.mine-tag, .availability-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 5px; font-size: 9px; font-weight: 600; }.mine-tag { background: var(--teal-pale); color: var(--teal-dark); }.availability-tag { background: var(--teal-pale); color: var(--teal-dark); }.availability-tag.full { background: #f0f3f6; color: #7e8e9d; }.group-topic { margin: 9px 0 14px; color: var(--ink-soft); font-size: 10px; line-height: 1.7; }.member-avatars { display: flex; align-items: center; height: 28px; }.member-names { display: flex; flex-wrap: wrap; gap: 5px; min-height: 28px; align-items: center; }.member-name { display: inline-flex; padding: 4px 7px; border-radius: 5px; background: #edf4ff; color: #315d98; font-size: 10px; line-height: 1.3; }.member-name:nth-child(2n) { background: #e9f7f2; color: #167564; }.member-name:nth-child(3n) { background: #fff4df; color: #9a6b1e; }.member-names-empty { color: var(--muted); font-size: 10px; }.member-avatar { display: grid; place-items: center; width: 27px; height: 27px; margin-right: -6px; border: 2px solid #fff; border-radius: 50%; background: #dce8fb; color: #2e5da6; font-size: 9px; font-weight: 700; }.member-avatar:nth-child(2n) { background: #def2ec; color: #087d6c; }.member-avatar:nth-child(3n) { background: #fff0d9; color: #aa731d; }.member-more { display: grid; place-items: center; width: 27px; height: 27px; margin-left: 4px; color: var(--muted); font-size: 9px; }.group-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 15px; padding-top: 13px; border-top: 1px solid #edf2f6; }.member-count { color: var(--muted); font-size: 10px; }.member-count strong { color: var(--ink); }.join-button { display: inline-flex; align-items: center; gap: 5px; min-height: 29px; padding: 0 10px; border: 1px solid #b7cde8; border-radius: 6px; background: #f5f9ff; color: var(--blue); font-size: 10px; font-weight: 600; }.join-button svg { width: 13px; height: 13px; }.join-button:hover { border-color: var(--blue); background: var(--blue); color: #fff; }.join-button.leave { border-color: #a8d8cd; background: #effaf6; color: var(--teal-dark); }.join-button.leave:hover { border-color: var(--danger); background: var(--danger-pale); color: var(--danger); }

.dataset-summary { display: flex; align-items: center; gap: 25px; min-height: 82px; margin-bottom: 22px; padding: 17px 21px; border: 1px solid #cedfe9; border-radius: var(--radius); background: #f8fcfd; }.dataset-summary-main { display: flex; align-items: center; gap: 11px; }.summary-icon { display: grid; place-items: center; width: 41px; height: 41px; border-radius: 10px; background: var(--teal-pale); color: var(--teal); }.summary-icon svg { width: 20px; height: 20px; }.dataset-summary-main strong { display: block; font-size: 21px; line-height: 1.05; }.dataset-summary-main span:not(.summary-icon) { display: block; margin-top: 4px; color: var(--ink-soft); font-size: 10px; }.summary-separator { width: 1px; height: 32px; background: #d6e4ea; }.summary-label { display: block; color: var(--muted); font-size: 10px; }.summary-number { display: block; margin-top: 4px; font-size: 15px; }.summary-spacer { flex: 1; }.live-indicator { display: inline-flex; align-items: center; gap: 6px; color: var(--teal-dark); font-size: 10px; }.live-indicator i { width: 6px; height: 6px; border-radius: 50%; background: #22b994; box-shadow: 0 0 0 3px rgba(34, 185, 148, .13); }
.table-shell { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 2px 7px rgba(17, 42, 70, .025); }.table-scroll { overflow-x: auto; }.data-table { width: 100%; min-width: 930px; border-collapse: collapse; table-layout: fixed; }.data-table th, .data-table td { padding: 0 14px; border-bottom: 1px solid #edf2f6; text-align: left; vertical-align: middle; }.data-table th { height: 43px; background: #fbfcfd; color: #7c8c9d; font-size: 10px; font-weight: 600; white-space: nowrap; }.data-table td { height: 58px; color: var(--ink-soft); font-size: 11px; }.data-table th:first-child, .data-table td:first-child { padding-left: 17px; }.data-table tbody tr:last-child td { border-bottom: 0; }.data-table tbody tr:hover td { background: #fbfdff; }.data-table input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--blue); }.col-check { width: 44px; }.data-table th:nth-child(2) { width: 144px; }.data-table th:nth-child(3) { width: 130px; }.data-table th:nth-child(4) { width: 230px; }.data-table th:nth-child(5) { width: 90px; }.data-table th:nth-child(6) { width: 130px; }.data-table th:nth-child(7) { width: 112px; }.col-actions { width: 80px; }.submitter { display: flex; align-items: center; gap: 9px; }.submitter-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 27px; height: 27px; border-radius: 8px; background: #eaf2ff; color: #2d63b7; font-size: 9px; font-weight: 700; }.submitter strong { color: var(--ink); font-size: 11px; font-weight: 600; }.submitter small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }.dataset-name { display: flex; align-items: center; gap: 8px; min-width: 0; }.dataset-file-icon { display: grid; place-items: center; flex: 0 0 auto; width: 25px; height: 27px; border-radius: 5px; background: var(--blue); color: #fff; }.dataset-file-icon.dpo { background: var(--lilac); }.dataset-file-icon svg { width: 13px; height: 13px; }.dataset-name span { overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }.type-badge { display: inline-block; padding: 4px 7px; border-radius: 5px; background: var(--blue-pale); color: var(--blue); font-size: 9px; font-weight: 600; }.type-badge.dpo { background: var(--lilac-pale); color: var(--lilac); }.similarity { display: inline-flex; align-items: center; gap: 5px; }.similarity-bar { width: 44px; height: 5px; overflow: hidden; border-radius: 8px; background: #e9eff4; }.similarity-bar i { display: block; height: 100%; border-radius: inherit; background: var(--teal); }.similarity.medium .similarity-bar i { background: var(--amber); }.similarity span { color: var(--ink-soft); font-size: 10px; }.row-action { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border: 0; background: none; color: var(--blue); font-size: 10px; }.row-action:hover { text-decoration: underline; text-underline-offset: 3px; }.row-action svg { width: 14px; height: 14px; }.table-footer { display: flex; align-items: center; justify-content: space-between; min-height: 55px; padding: 0 17px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }.pagination { display: flex; align-items: center; gap: 4px; }.pagination .icon-button { width: 28px; height: 28px; }.page-number { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 10px; }.page-number:hover, .page-number.active { background: var(--blue-pale); color: var(--blue); font-weight: 600; }

.secure-badge { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid #bfe5da; border-radius: 7px; background: #f1fbf7; color: var(--teal-dark); font-size: 10px; }.secure-badge svg { width: 15px; height: 15px; }
.submit-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(285px, .65fr); gap: 17px; align-items: start; }.submit-form { padding: 25px 27px 20px; }.form-section { display: flex; gap: 16px; }.section-number { display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; background: var(--blue-pale); color: var(--blue); font-size: 10px; font-weight: 700; }.form-section-content { min-width: 0; flex: 1; }.form-section h2 { margin-bottom: 5px; font-size: 17px; }.section-help { margin-bottom: 20px; color: var(--muted); font-size: 10px; line-height: 1.7; }.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }.field { display: flex; flex-direction: column; gap: 7px; color: var(--ink-soft); font-size: 11px; }.field > span { font-weight: 600; }.field b { color: var(--danger); font-weight: 600; }.field input { width: 100%; height: 40px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 7px; outline: 0; background: #fff; color: var(--ink); font-size: 11px; transition: .2s ease; }.field input::placeholder { color: #a2afbd; }.field input:focus { border-color: #82a9df; box-shadow: 0 0 0 3px rgba(37, 99, 217, .1); }.field.invalid input { border-color: #db8991; background: #fffafa; }.field-error { min-height: 12px; color: var(--danger); font-size: 9px; }.form-divider { height: 1px; margin: 26px 0 25px 44px; background: var(--line); }.upload-stack { display: flex; flex-direction: column; gap: 10px; }.file-dropzone { position: relative; display: flex; align-items: center; gap: 12px; min-height: 78px; padding: 11px 13px; border: 1px dashed #b8c8d8; border-radius: 9px; background: #fbfdff; transition: .2s ease; }.file-dropzone:hover, .file-dropzone.dragging { border-color: var(--blue); background: #f6faff; }.file-dropzone.has-file { border-style: solid; border-color: #a8d8cd; background: #f8fdfb; }.file-dropzone input { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; opacity: 0; }.drop-icon { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 38px; border-radius: 6px; background: var(--blue-pale); color: var(--blue); }.drop-icon-lilac { background: var(--lilac-pale); color: var(--lilac); }.drop-icon svg { width: 18px; height: 18px; }.drop-copy { min-width: 0; flex: 1; }.drop-copy strong, .drop-copy span, .drop-copy small { display: block; }.drop-copy strong { color: var(--ink); font-size: 11px; }.drop-copy strong b { color: var(--danger); }.drop-copy span { margin-top: 3px; color: var(--ink-soft); font-size: 10px; }.drop-copy u { color: var(--blue); text-underline-offset: 2px; }.drop-copy small { margin-top: 4px; color: #9aa9b8; font-size: 9px; }.file-state { max-width: 145px; overflow: hidden; color: #8b9bab; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.has-file .file-state { color: var(--teal-dark); font-weight: 600; }.file-tip { display: flex; align-items: center; gap: 7px; margin-top: 13px; padding: 9px 10px; border-radius: 6px; background: #f9fafc; color: var(--muted); font-size: 9px; }.file-tip svg { width: 14px; color: var(--amber); }.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }.submit-feedback { min-height: 19px; margin-top: 10px; color: var(--teal-dark); font-size: 10px; text-align: right; }.submit-feedback.error { color: var(--danger); }.submit-aside { display: flex; flex-direction: column; gap: 15px; }.check-panel { padding: 21px 20px 18px; }.check-progress { color: var(--muted); font-size: 10px; }.check-list { display: flex; flex-direction: column; gap: 0; margin: 19px 0 0; padding: 0; list-style: none; }.check-list li { position: relative; display: flex; align-items: center; gap: 10px; min-height: 53px; border-bottom: 1px solid #edf2f6; }.check-list li:last-child { border-bottom: 0; }.check-index { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 7px; background: #f1f4f7; color: #8b9baa; font-size: 9px; font-weight: 700; }.check-list li > div { flex: 1; }.check-list strong, .check-list small { display: block; }.check-list strong { color: var(--ink-soft); font-size: 11px; font-weight: 600; }.check-list small { margin-top: 3px; color: #a1aeba; font-size: 9px; }.check-list li > svg { width: 17px; color: #bdc8d2; }.check-list li.done .check-index { background: var(--teal-pale); color: var(--teal-dark); }.check-list li.done strong { color: var(--ink); }.check-list li.done > svg { color: var(--teal); }.check-list li.done > svg { fill: var(--teal); stroke: #fff; }
.rule-panel { padding: 22px 20px 21px; }.rule-icon { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 14px; border-radius: 9px; background: var(--lilac-pale); color: var(--lilac); }.rule-icon svg { width: 18px; }.rule-panel h3 { margin-bottom: 8px; font-size: 13px; }.rule-panel p { margin-bottom: 14px; color: var(--ink-soft); font-size: 10px; line-height: 1.8; }.rule-panel strong { color: var(--lilac); }

.guideline-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }.guideline-card { position: relative; min-height: 220px; padding: 23px; overflow: hidden; }.guide-number { display: inline-grid; place-items: center; width: 31px; height: 31px; border-radius: 8px; background: var(--blue-pale); color: var(--blue); font-size: 10px; font-weight: 700; }.guideline-card:nth-child(2) .guide-number { background: var(--teal-pale); color: var(--teal-dark); }.guideline-card:nth-child(3) .guide-number { background: var(--amber-pale); color: var(--amber); }.guideline-card h2 { margin: 16px 0 8px; font-size: 17px; }.guideline-card p { min-height: 68px; margin-bottom: 17px; color: var(--ink-soft); font-size: 11px; line-height: 1.8; }.format-example { display: grid; grid-template-columns: .8fr 1.2fr; gap: 24px; align-items: center; margin-top: 16px; padding: 24px; }.format-example h2 { margin-bottom: 6px; font-size: 16px; }.format-example p:not(.panel-kicker) { margin-bottom: 0; color: var(--ink-soft); font-size: 10px; line-height: 1.7; }.format-example pre { margin: 0; padding: 16px; overflow: auto; border-radius: 8px; background: #132e4e; color: #d9e9fa; font-family: Consolas, monospace; font-size: 10px; line-height: 1.8; white-space: pre-wrap; }
.format-modal { width: min(100%, 760px); padding: 28px 29px 22px; }
.format-modal h2 { margin: 17px 0 8px; font-size: 20px; }
.format-modal-help { margin-bottom: 16px; color: var(--ink-soft); font-size: 10px; line-height: 1.75; }
.format-block { margin-top: 13px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; }
.format-block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: #fafcfd; color: var(--ink-soft); font-size: 10px; }
.format-block-head span { color: var(--muted); }
.format-block pre { max-height: 180px; margin: 0; padding: 13px; overflow: auto; background: #132e4e; color: #dbe9f8; font-family: Consolas, monospace; font-size: 10px; line-height: 1.7; white-space: pre-wrap; }
.format-modal-foot { display: flex; align-items: center; gap: 6px; margin-top: 15px; color: var(--teal-dark); font-size: 10px; }
.format-modal-foot svg { width: 14px; height: 14px; }
.admin-placeholder { display: grid; justify-items: center; padding: 58px 20px; text-align: center; }
.admin-placeholder h2 { margin: 16px 0 7px; font-size: 17px; }
.admin-placeholder p { margin: 0; color: var(--muted); font-size: 11px; }
.admin-toolbar { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; padding:17px 20px; margin-bottom:15px; }.admin-toolbar .field { width:min(330px,100%); }.admin-toolbar-actions { display:flex; gap:8px; }.admin-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr); gap:15px; }.admin-section { padding:20px; min-width:0; }.admin-table-scroll { overflow:auto; margin-top:15px; }.admin-table { width:100%; border-collapse:collapse; min-width:650px; }.admin-table th,.admin-table td { padding:10px 8px; border-bottom:1px solid var(--line); text-align:left; font-size:10px; vertical-align:middle; }.admin-table th { color:var(--muted); font-weight:600; }.admin-table td strong,.admin-table td small { display:block; }.admin-table td small { margin-top:3px; color:var(--muted); font-size:9px; }.admin-inline-select,.admin-group-name { height:30px; padding:0 7px; border:1px solid var(--line-strong); border-radius:6px; background:#fff; color:var(--ink-soft); font-size:10px; }.admin-group-name { width:100px; }.admin-inline-select:disabled { background:#f1f4f7; color:#9aa8b7; }.admin-group-list { margin-top:15px; }.admin-group-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); }.admin-group-row:last-child { border-bottom:0; }.admin-group-row strong,.admin-group-row small { display:block; }.admin-group-row small { margin-top:4px; color:var(--muted); font-size:9px; }.admin-group-actions { display:flex; align-items:center; gap:5px; }.admin-empty { padding:30px 0 !important; text-align:center !important; color:var(--muted); }.admin-feedback { min-height:18px; margin-top:10px; color:var(--teal-dark); font-size:10px; }.admin-feedback.error { color:var(--danger); }
.empty-activity { display: grid; justify-items: center; min-height: 342px; padding: 72px 20px; text-align: center; }.empty-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--blue-pale); color: var(--blue); }.empty-icon svg { width: 25px; height: 25px; }.empty-activity h2 { margin: 17px 0 8px; font-size: 17px; }.empty-activity p { margin-bottom: 20px; color: var(--muted); font-size: 11px; }

.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; padding: 22px; background: rgba(13, 30, 50, .47); }.modal-backdrop.open { display: flex; animation: fade-in .2s ease; }.modal { position: relative; width: min(100%, 430px); max-height: calc(100vh - 44px); overflow: auto; border: 1px solid rgba(255, 255, 255, .6); border-radius: 14px; background: #fff; box-shadow: var(--shadow-float); }.modal-close { position: absolute; top: 15px; right: 15px; }.modal-close:hover { background: #eef3f8; color: var(--ink); }.auth-modal { padding: 30px 33px 23px; }.auth-brand { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 12px; font-weight: 700; }.auth-brand .brand-mark { width: 27px; height: 27px; border-radius: 8px; font-size: 14px; }.auth-modal h2 { margin: 26px 0 7px; font-size: 23px; }.modal-subtitle { margin-bottom: 22px; color: var(--muted); font-size: 11px; line-height: 1.7; }.auth-tabs { display: flex; gap: 21px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }.auth-tab { position: relative; padding: 0 0 10px; border: 0; background: none; color: var(--muted); font-size: 12px; }.auth-tab.active { color: var(--blue); font-weight: 600; }.auth-tab.active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; border-radius: 2px; background: var(--blue); content: ""; }.auth-form { display: flex; flex-direction: column; gap: 15px; }.auth-form .field { gap: 7px; }.input-with-suffix, .input-with-action { display: flex; align-items: center; height: 40px; border: 1px solid var(--line-strong); border-radius: 7px; background: #fff; transition: .2s ease; }.input-with-suffix:focus-within, .input-with-action:focus-within { border-color: #82a9df; box-shadow: 0 0 0 3px rgba(37, 99, 217, .1); }.input-with-suffix input, .input-with-action input { min-width: 0; flex: 1; height: 100%; padding: 0 11px; border: 0; outline: 0; background: transparent; }.input-with-suffix span { padding-right: 11px; color: #a7b2be; }.input-with-action button { margin-right: 11px; }.field-hint { margin-top: -2px; color: #99a7b6; font-size: 9px; }.field-hint code { padding: 2px 3px; border-radius: 3px; background: #f0f4f8; font-family: Consolas, monospace; }.consent-row { display: flex; align-items: flex-start; gap: 7px; color: var(--muted); font-size: 9px; line-height: 1.5; }.consent-row input { width: 14px; height: 14px; margin: 0; accent-color: var(--blue); }.auth-submit { width: 100%; margin-top: 2px; }.auth-feedback { min-height: 15px; color: var(--teal-dark); font-size: 10px; text-align: center; }.auth-feedback.error { color: var(--danger); }.modal-foot { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); color: #9ba8b5; font-size: 9px; }.modal-foot svg { width: 13px; height: 13px; }.detail-modal { width: min(100%, 650px); padding: 28px 29px 22px; }.detail-eyebrow { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 11px; }.file-type-dot { display: grid; place-items: center; width: 25px; height: 27px; border-radius: 5px; background: var(--blue); color: #fff; font-size: 11px; font-weight: 700; }.file-type-dot.dpo { background: var(--lilac); }.detail-status { margin-left: auto; padding: 4px 7px; border-radius: 5px; background: var(--teal-pale); color: var(--teal-dark); font-size: 9px; }.detail-modal h2 { margin: 17px 0 13px; font-size: 20px; }.detail-meta { display: flex; flex-wrap: wrap; gap: 7px 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; }.detail-meta strong { color: var(--ink-soft); }.detail-preview { margin-top: 17px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }.preview-head { display: flex; justify-content: space-between; padding: 10px 12px; background: #fafcfd; color: var(--ink-soft); font-size: 10px; }.preview-head span:last-child { color: var(--muted); }.detail-preview pre { min-height: 145px; max-height: 280px; margin: 0; padding: 14px; overflow: auto; background: #132e4e; color: #dbe9f8; font-family: Consolas, monospace; font-size: 10px; line-height: 1.75; white-space: pre-wrap; }.detail-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }.detail-foot > span { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10px; }.detail-foot svg { width: 14px; height: 14px; }
.toast-stack { position: fixed; right: 22px; bottom: 22px; z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: 9px; pointer-events: none; }.toast { display: flex; align-items: center; gap: 9px; max-width: min(360px, calc(100vw - 44px)); padding: 11px 14px; border: 1px solid #c9e5da; border-radius: 8px; background: #f7fffb; color: var(--teal-dark); box-shadow: var(--shadow-float); font-size: 11px; animation: toast-in .25s ease; }.toast.error { border-color: #efc5ca; background: #fff8f8; color: var(--danger); }.toast svg { width: 16px; height: 16px; flex: 0 0 auto; }.toast.hide { opacity: 0; transform: translateY(8px); transition: .2s ease; }
.field select { width: 100%; height: 40px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 7px; outline: 0; background: #fff; color: var(--ink); font-size: 11px; transition: .2s ease; }
.field select:focus { border-color: #82a9df; box-shadow: 0 0 0 3px rgba(37, 99, 217, .1); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1120px) {
  .content { padding-right: 34px; padding-left: 34px; }
  .topbar { padding-right: 34px; padding-left: 34px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .sidebar { width: 222px; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 12px 0 24px rgba(17, 42, 70, .12); }.sidebar.open { transform: translateX(0); }.main-column { width: 100%; margin-left: 0; }.topbar { min-height: 62px; padding: 0 20px; }.mobile-menu { display: inline-grid; margin-right: 9px; }.profile-text, .profile-trigger > svg { display: none; }.topbar-actions { gap: 8px; }.topbar-divider { display: none; }.content { padding: 32px 20px 55px; }.overview-grid { grid-template-columns: 1fr; }.submit-layout { grid-template-columns: 1fr; }.submit-aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }.guideline-grid { grid-template-columns: 1fr; }.guideline-card { min-height: 0; }.guideline-card p { min-height: 0; }.format-example { grid-template-columns: 1fr; }.callout { align-items: flex-start; }.groups-toolbar, .dataset-toolbar { align-items: stretch; flex-direction: column; }.groups-toolbar .toolbar-actions, .dataset-toolbar .toolbar-actions { justify-content: flex-end; }.search-box, .search-box-wide { width: 100%; }.page-heading > .button, .page-heading > .secure-badge { margin-top: 5px; }.page-heading { gap: 15px; }.dataset-summary { gap: 15px; overflow-x: auto; }.summary-spacer { min-width: 15px; }.date-chip { display: none; }
}
@media (max-width: 560px) {
  .topbar { padding: 0 14px; }.breadcrumb span { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.topbar-actions .button { padding: 0 10px; }.topbar-actions .button svg { display: none; }.content { padding: 26px 14px 44px; }.welcome-row, .page-heading { flex-direction: column; }.welcome-row h1, .page-heading h1 { font-size: 28px; }.lede { font-size: 12px; }.quick-actions { grid-template-columns: 1fr; margin-top: 27px; }.quick-action { min-height: 72px; }.metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }.metric-card { min-height: 126px; padding: 13px; }.metric-value { font-size: 24px; }.metric-foot { align-items: flex-end; flex-direction: column; gap: 3px; }.metric-muted { max-width: 100%; align-self: flex-start; }.activity-panel, .progress-panel { padding: 18px 15px; }.progress-ring-wrap { gap: 14px; margin-right: 0; margin-left: 0; }.progress-ring { width: 108px; height: 108px; }.progress-ring::before { width: 84px; height: 84px; }.progress-ring strong { font-size: 23px; }.progress-copy p { margin-bottom: 9px; }.progress-legend { gap: 10px; }.page-heading > .button { align-self: flex-start; }.group-grid { grid-template-columns: 1fr; }.dataset-summary { margin-right: -14px; margin-left: -14px; padding-right: 18px; padding-left: 18px; border-right: 0; border-left: 0; border-radius: 0; }.table-footer { align-items: flex-start; flex-direction: column; gap: 9px; padding-top: 12px; padding-bottom: 12px; }.pagination { align-self: flex-end; }.submit-form { padding: 19px 15px 16px; }.field-grid { grid-template-columns: 1fr; gap: 2px; }.form-divider { margin-left: 0; }.form-section { gap: 10px; }.submit-aside { display: flex; }.file-dropzone { align-items: flex-start; }.file-state { margin-left: auto; max-width: 85px; }.auth-modal { padding: 26px 20px 20px; }.detail-modal { padding: 25px 17px 17px; }.toast-stack { right: 14px; bottom: 14px; }
}

body.modal-open { overflow: hidden; }
[hidden] { display: none !important; }

.group-card .member-avatars { height: auto; min-height: 36px; margin-top: 12px; align-items: flex-start; }
.group-card .member-names { width: 100%; gap: 7px; }
.group-member-label { flex-basis: 100%; color: var(--muted); font-size: 12px; }
.group-card .member-name { font-size: 13px; padding: 6px 9px; line-height: 1.5; white-space: nowrap; }