From 35f9512d940b71f1a664737ac6d8d02825132507 Mon Sep 17 00:00:00 2001
From: shuaiplus <2327005759@qq.com>
Date: Mon, 11 May 2026 20:22:47 +0800
Subject: [PATCH] feat: enhance admin invites UI and improve styling for better
 usability

---
 webapp/src/components/AdminPage.tsx |  24 +-
 webapp/src/styles.css               | 987 ++++++++++++++++++++++++++++
 webapp/src/styles/tokens.css        |  82 ++-
 3 files changed, 1047 insertions(+), 46 deletions(-)

diff --git a/webapp/src/components/AdminPage.tsx b/webapp/src/components/AdminPage.tsx
index bb7d3b3..10c19bd 100644
--- a/webapp/src/components/AdminPage.tsx
+++ b/webapp/src/components/AdminPage.tsx
@@ -129,15 +129,20 @@ export default function AdminPage(props: AdminPageProps) {
         </table>
       </section>
 
-      <section className="card">
-        <div className="section-head">
+      <section className="card admin-invites-card">
+        <div className="section-head admin-invites-head">
           <h3>{t('txt_invites')}</h3>
-          <button type="button" className="btn btn-secondary" disabled={props.loading} onClick={props.onRefresh}>
-            <RefreshCw size={14} className="btn-icon" /> {t('txt_sync')}
-          </button>
+          <div className="actions admin-invites-head-actions">
+            <button type="button" className="btn btn-secondary small" disabled={props.loading} onClick={props.onRefresh}>
+              <RefreshCw size={14} className="btn-icon" /> {t('txt_sync')}
+            </button>
+            <button type="button" className="btn btn-danger small" onClick={() => void props.onDeleteAllInvites()}>
+              <Trash2 size={14} className="btn-icon" /> {t('txt_delete_all')}
+            </button>
+          </div>
         </div>
         <div className="invite-toolbar">
-          <div className="actions invite-create-group">
+          <div className="invite-create-group">
             <label className="field invite-hours-field">
               <span>{t('txt_invite_validity_hours')}</span>
               <input
@@ -154,11 +159,8 @@ export default function AdminPage(props: AdminPageProps) {
               {t('txt_create_timed_invite')}
             </button>
           </div>
-          <button type="button" className="btn btn-danger" onClick={() => void props.onDeleteAllInvites()}>
-            <Trash2 size={14} className="btn-icon" /> {t('txt_delete_all')}
-          </button>
         </div>
-        <table className="table">
+        <table className="table invite-table">
           <thead>
             <tr>
               <th>{t('txt_code')}</th>
@@ -207,7 +209,7 @@ export default function AdminPage(props: AdminPageProps) {
             )}
           </tbody>
         </table>
-        <div className="actions admin-pagination">
+        <div className="actions admin-pagination invite-pagination">
           <button type="button" className="btn btn-secondary small" disabled={safePage <= 1} onClick={() => setPage((p) => Math.max(1, p - 1))}>
             <ChevronLeft size={14} className="btn-icon" />
             {t('txt_prev')}
diff --git a/webapp/src/styles.css b/webapp/src/styles.css
index 01e0b87..ddfd6c2 100644
--- a/webapp/src/styles.css
+++ b/webapp/src/styles.css
@@ -240,3 +240,990 @@
     transform: translateX(100%);
   }
 }
+
+/* Product refinement layer: calm, dense, app-like surfaces for the vault workflow. */
+html,
+body,
+#root {
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--panel-soft) 78%, var(--bg-accent)) 0%, var(--bg-accent) 100%);
+}
+
+body {
+  font-size: 15px;
+  line-height: 1.5;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  letter-spacing: 0;
+}
+
+.app-page {
+  padding: 18px;
+}
+
+.app-shell {
+  border-radius: var(--radius-xl);
+  border: 1px solid var(--line);
+  background: var(--panel);
+  box-shadow: var(--shadow-lg);
+}
+
+.topbar {
+  height: 56px;
+  padding-inline: 16px;
+  background: color-mix(in srgb, var(--panel) 92%, transparent);
+  border-color: var(--line-soft);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+.brand {
+  gap: 10px;
+}
+
+.brand-logo {
+  height: 36px;
+  width: 45px;
+  filter: none;
+}
+
+.brand-wordmark,
+.standalone-brand-wordmark,
+.not-found-wordmark {
+  background: var(--primary);
+}
+
+.topbar-actions {
+  gap: 8px;
+}
+
+.user-chip {
+  height: 32px;
+  max-width: 280px;
+  border-radius: var(--radius-md);
+  background: var(--panel-soft);
+  color: var(--muted-strong);
+  box-shadow: none;
+}
+
+.user-chip span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.app-main {
+  grid-template-columns: 212px minmax(0, 1fr);
+  background: var(--panel-soft);
+}
+
+.app-side {
+  padding: 12px;
+  background: var(--panel);
+  border-color: var(--line-soft);
+}
+
+.side-nav-main {
+  gap: 4px;
+}
+
+.side-link,
+.side-group-trigger,
+.side-sub-link,
+.nav-layout-trigger,
+.nav-layout-option {
+  border-radius: var(--radius-md);
+  box-shadow: none;
+}
+
+.side-link,
+.side-group-trigger {
+  min-height: 40px;
+  padding: 9px 10px;
+  color: var(--muted-strong);
+}
+
+.side-subnav-inner {
+  padding-left: 12px;
+}
+
+.side-sub-link {
+  min-height: 36px;
+  padding: 8px 10px;
+}
+
+.side-link:hover,
+.side-group-trigger:hover,
+.side-sub-link:hover,
+.nav-layout-trigger:hover,
+.nav-layout-trigger.active {
+  background: var(--panel-soft);
+  border-color: var(--line);
+  color: var(--text);
+  box-shadow: none;
+}
+
+.side-link.active,
+.side-group-trigger.active,
+.side-sub-link.active,
+.mobile-tab.active,
+.tree-btn.active,
+.list-item.active,
+.sort-menu-item.active,
+.backup-destination-item.active,
+.backup-interval-preset.active,
+.mobile-settings-link.active,
+.nav-layout-option.active {
+  background: color-mix(in srgb, var(--primary) 10%, var(--panel));
+  border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
+  color: var(--primary-strong);
+  box-shadow: none;
+}
+
+.nav-layout-menu,
+.sort-menu,
+.create-menu {
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+}
+
+.content {
+  padding: 12px;
+}
+
+.route-stage {
+  scrollbar-gutter: stable;
+}
+
+.auth-page {
+  padding: 20px;
+}
+
+.standalone-shell {
+  max-width: 430px;
+  gap: 12px;
+}
+
+.standalone-brand {
+  gap: 12px;
+}
+
+.standalone-brand-logo {
+  height: 48px;
+  width: 60px;
+  filter: none;
+}
+
+.auth-card,
+.dialog-card,
+.card,
+.list-panel,
+.sidebar-block,
+.settings-subcard,
+.backup-operations-sidebar,
+.backup-destination-sidebar,
+.backup-detail-panel,
+.restore-progress-card,
+.backup-recommendation-card,
+.backup-destination-item,
+.backup-browser-list,
+.backup-browser-path,
+.totp-code-row,
+.mobile-settings-link,
+.table tr {
+  border-color: var(--line);
+  border-radius: var(--radius-md);
+  background: var(--panel);
+  box-shadow: var(--shadow-sm);
+}
+
+.auth-card {
+  padding: 24px;
+}
+
+.auth-card h1,
+.standalone-title {
+  font-size: 26px;
+  line-height: 1.18;
+}
+
+.muted,
+.standalone-muted,
+.field-help,
+.settings-field-note,
+.backup-inline-note,
+.detail-sub,
+.list-sub,
+.backup-destination-meta {
+  color: var(--muted);
+}
+
+.field {
+  margin-bottom: 12px;
+}
+
+.field > span {
+  margin: 0 0 6px;
+  color: var(--muted-strong);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.input,
+.search-input {
+  height: 42px;
+  border-radius: var(--radius-md);
+  border-color: var(--line);
+  background: var(--panel);
+  color: var(--text);
+  box-shadow: none;
+}
+
+.textarea {
+  min-height: 96px;
+}
+
+.input:hover:not(:disabled),
+.search-input:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--primary) 30%, var(--line));
+}
+
+.input:focus,
+.search-input:focus {
+  border-color: color-mix(in srgb, var(--primary) 58%, var(--line));
+  background: var(--panel);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
+}
+
+.btn {
+  height: 38px;
+  min-width: 38px;
+  border-radius: var(--radius-md);
+  font-size: 14px;
+  box-shadow: none;
+  touch-action: manipulation;
+}
+
+.btn.small,
+.topbar-actions .btn {
+  height: 32px;
+  border-radius: var(--radius-md);
+  padding-inline: 10px;
+}
+
+.btn.full {
+  height: 44px;
+  margin-block: 10px;
+  font-size: 16px;
+}
+
+.btn-primary {
+  background: var(--primary);
+  border-color: transparent;
+  color: #fff;
+  box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 20%, transparent);
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: var(--primary-hover);
+  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 24%, transparent);
+}
+
+.btn-secondary {
+  background: var(--panel);
+  border-color: var(--line);
+  color: var(--primary-strong);
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--primary) 6%, var(--panel));
+  border-color: color-mix(in srgb, var(--primary) 26%, var(--line));
+}
+
+.btn-danger {
+  background: color-mix(in srgb, var(--danger) 5%, var(--panel));
+  border-color: color-mix(in srgb, var(--danger) 24%, var(--line));
+  color: var(--danger);
+}
+
+.btn-danger:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--danger) 10%, var(--panel));
+  border-color: color-mix(in srgb, var(--danger) 38%, var(--line));
+}
+
+.btn:hover:not(:disabled) {
+  transform: translateY(-1px);
+}
+
+.btn:active:not(:disabled) {
+  transform: translateY(0) scale(0.98);
+}
+
+
+.sidebar-block {
+  margin-bottom: 8px;
+  padding: 12px;
+}
+
+.sidebar-title {
+  color: var(--muted-strong);
+}
+
+.tree-btn {
+  min-height: 36px;
+  border-radius: var(--radius-md);
+  padding: 8px 10px;
+}
+
+.folder-delete-btn,
+.folder-sort-btn,
+.folder-add-btn,
+.search-clear-btn,
+.input-icon-btn,
+.eye-btn,
+.totp-copy-btn,
+.domain-rule-expand-btn,
+.domain-rule-mini-btn,
+.domain-rule-icon-btn,
+.password-history-close {
+  border-radius: var(--radius-md);
+}
+
+.list-col {
+  max-width: none;
+}
+
+.list-head {
+  margin-bottom: 8px;
+}
+
+.list-count {
+  color: var(--muted);
+  font-weight: 700;
+}
+
+.list-panel,
+.detail-col {
+  padding: 8px;
+}
+
+.list-item {
+  min-height: 60px;
+  margin-bottom: 6px;
+  border-radius: var(--radius-md);
+  background: var(--panel);
+  border-color: var(--line-soft);
+}
+
+.list-item::before {
+  display: none;
+}
+
+.list-item:hover {
+  background: var(--panel-subtle);
+  border-color: color-mix(in srgb, var(--primary) 28%, var(--line));
+  box-shadow: var(--shadow-sm);
+}
+
+.list-item:hover .row-main,
+.list-item.active .row-main,
+.list-item:hover .list-text,
+.list-item.active .list-text,
+.list-item:hover .list-sub,
+.list-item.active .list-sub {
+  transform: none;
+}
+
+.list-item:hover .list-title,
+.list-item.active .list-title {
+  letter-spacing: 0;
+}
+
+.list-title {
+  color: var(--text);
+  font-size: 14px;
+}
+
+.list-badge {
+  background: var(--panel-muted);
+  color: var(--muted-strong);
+}
+
+.card {
+  margin-bottom: 8px;
+  padding: 14px;
+}
+
+.card h4,
+.settings-module h3,
+.section-head h3,
+.section-head h4 {
+  color: var(--text);
+  font-size: 15px;
+  line-height: 1.3;
+}
+
+.detail-title {
+  color: var(--text);
+}
+
+.kv-line,
+.kv-row,
+.attachment-row,
+.custom-field-card,
+.table th,
+.table td {
+  border-color: var(--line-soft);
+}
+
+.kv-label,
+.kv-line > span,
+.table th {
+  color: var(--muted);
+}
+
+.settings-modules-grid,
+.import-export-panels,
+.backup-grid,
+.domain-rules-grid {
+  gap: 10px;
+}
+
+.settings-module h3 {
+  margin-bottom: 12px;
+}
+
+.sensitive-action,
+.recovery-code-card,
+.api-key-warning-panel,
+.api-key-credentials-panel,
+.backup-recommendation-dav-item,
+.restore-progress-current,
+.restore-progress-elapsed {
+  border-radius: var(--radius-md);
+  border-color: var(--line-soft);
+  background: var(--panel-soft);
+}
+
+.status-ok,
+.device-status-pill.online {
+  color: var(--success);
+  background: color-mix(in srgb, var(--success) 11%, var(--panel));
+}
+
+.local-error,
+.api-key-warning-title {
+  color: var(--danger);
+}
+
+.backup-grid {
+  grid-template-columns: 260px 280px minmax(0, 1fr);
+}
+
+.backup-operations-sidebar,
+.backup-destination-sidebar,
+.backup-detail-panel {
+  padding: 12px;
+}
+
+.backup-recommendations-summary,
+.backup-browser-path,
+.backup-browser-empty,
+.backup-destination-item {
+  border-radius: var(--radius-md);
+  background: var(--panel-soft);
+}
+
+.backup-destination-item:hover {
+  background: var(--panel);
+  border-color: color-mix(in srgb, var(--primary) 32%, var(--line));
+}
+
+.totp-code-row {
+  background: var(--panel);
+}
+
+.totp-code-name {
+  color: var(--text);
+}
+
+.table {
+  border-collapse: separate;
+  border-spacing: 0 6px;
+}
+
+.table tr {
+  overflow: hidden;
+}
+
+.table th,
+.table td {
+  background: transparent;
+}
+
+.toast-item,
+.dialog-card {
+  border-radius: var(--radius-lg);
+}
+
+:root[data-theme='dark'] html,
+:root[data-theme='dark'] body,
+:root[data-theme='dark'] #root {
+  background: var(--bg-accent);
+}
+
+:root[data-theme='dark'] .app-shell,
+:root[data-theme='dark'] .topbar,
+:root[data-theme='dark'] .app-side,
+:root[data-theme='dark'] .mobile-tabbar,
+:root[data-theme='dark'] .auth-card,
+:root[data-theme='dark'] .dialog-card,
+:root[data-theme='dark'] .card,
+:root[data-theme='dark'] .list-panel,
+:root[data-theme='dark'] .sidebar-block,
+:root[data-theme='dark'] .settings-subcard,
+:root[data-theme='dark'] .backup-operations-sidebar,
+:root[data-theme='dark'] .backup-destination-sidebar,
+:root[data-theme='dark'] .backup-detail-panel,
+:root[data-theme='dark'] .backup-recommendation-card,
+:root[data-theme='dark'] .backup-destination-item,
+:root[data-theme='dark'] .backup-browser-list,
+:root[data-theme='dark'] .backup-browser-path,
+:root[data-theme='dark'] .totp-code-row,
+:root[data-theme='dark'] .mobile-settings-link,
+:root[data-theme='dark'] .table tr,
+:root[data-theme='dark'] .list-item,
+:root[data-theme='dark'] .input,
+:root[data-theme='dark'] .search-input,
+:root[data-theme='dark'] .create-menu,
+:root[data-theme='dark'] .sort-menu,
+:root[data-theme='dark'] .nav-layout-menu {
+  background: var(--panel);
+  border-color: var(--line);
+  color: var(--text);
+  box-shadow: var(--shadow-sm);
+}
+
+:root[data-theme='dark'] .app-main,
+:root[data-theme='dark'] .app-side,
+:root[data-theme='dark'] .mobile-tabbar,
+:root[data-theme='dark'] .sensitive-action,
+:root[data-theme='dark'] .backup-recommendations-summary,
+:root[data-theme='dark'] .backup-browser-path,
+:root[data-theme='dark'] .backup-browser-empty,
+:root[data-theme='dark'] .backup-recommendation-dav-item,
+:root[data-theme='dark'] .restore-progress-current,
+:root[data-theme='dark'] .restore-progress-elapsed {
+  background: var(--panel-soft);
+}
+
+:root[data-theme='dark'] .list-item:hover,
+:root[data-theme='dark'] .side-link:hover,
+:root[data-theme='dark'] .side-group-trigger:hover,
+:root[data-theme='dark'] .side-sub-link:hover,
+:root[data-theme='dark'] .mobile-tab:hover,
+:root[data-theme='dark'] .tree-btn:hover {
+  background: var(--panel-subtle);
+}
+
+:root[data-theme='dark'] .btn-primary {
+  color: #08111f;
+}
+
+@media (max-width: 1180px) {
+  .app-page {
+    padding: 0;
+  }
+
+  .app-shell {
+    border-radius: 0;
+    border: 0;
+  }
+
+  .topbar {
+    height: var(--mobile-topbar-height);
+    padding-inline: 12px;
+  }
+
+  .mobile-page-title {
+    max-width: min(60vw, 260px);
+    color: var(--text);
+    font-size: 18px;
+  }
+
+  .content {
+    padding: 8px;
+  }
+
+  .mobile-tabbar {
+    min-height: var(--mobile-tabbar-height);
+    background: color-mix(in srgb, var(--panel) 96%, transparent);
+    border-color: var(--line-soft);
+  }
+
+  .mobile-tab {
+    min-height: 48px;
+    border-radius: var(--radius-md);
+    color: var(--muted);
+  }
+
+  .mobile-tab:hover {
+    transform: none;
+  }
+
+  .mobile-tab.active {
+    box-shadow: none;
+  }
+
+  .vault-grid {
+    gap: 8px;
+  }
+
+  .mobile-detail-sheet {
+    background: var(--panel-soft);
+  }
+
+  .mobile-sidebar-sheet {
+    left: 8px;
+    right: 8px;
+    border-radius: var(--radius-lg);
+    border-color: var(--line);
+    background: var(--panel);
+    box-shadow: var(--shadow-lg);
+  }
+
+  .list-head {
+    grid-template-columns: minmax(0, 1fr) auto auto auto;
+  }
+
+  .list-panel {
+    padding: 6px;
+    border-radius: var(--radius-md);
+  }
+
+  .list-item {
+    min-height: 58px;
+    padding: 9px 10px;
+  }
+
+  .mobile-detail-sheet .card,
+  .detail-col .card,
+  .import-export-panel,
+  .settings-subcard {
+    border-radius: var(--radius-md);
+  }
+
+  .mobile-detail-sheet .card {
+    margin-bottom: 8px;
+    padding: 12px;
+  }
+
+  .detail-actions .actions .btn,
+  .detail-delete-btn,
+  .import-export-panel .actions .btn,
+  .settings-subcard .actions .btn,
+  .section-head .actions .btn {
+    min-height: 42px;
+  }
+
+  .toast-stack {
+    top: 10px;
+    left: 10px;
+    right: 10px;
+    width: auto;
+  }
+}
+
+@media (max-width: 640px) {
+  body {
+    font-size: 14px;
+  }
+
+  .auth-page {
+    padding: 12px;
+  }
+
+  .auth-card {
+    padding: 18px 16px;
+  }
+
+  .standalone-shell {
+    max-width: 100%;
+  }
+
+  .standalone-brand-logo {
+    height: 42px;
+    width: 53px;
+  }
+
+  .standalone-brand-wordmark {
+    width: clamp(176px, 58vw, 244px);
+  }
+
+  .field {
+    margin-bottom: 9px;
+  }
+
+  .input,
+  .search-input {
+    height: 42px;
+    font-size: 15px;
+  }
+
+  .settings-modules-grid,
+  .import-export-panels,
+  .backup-grid,
+  .domain-rules-grid {
+    gap: 8px;
+  }
+
+  .settings-module,
+  .backup-operations-sidebar,
+  .backup-destination-sidebar,
+  .backup-detail-panel {
+    padding: 12px;
+  }
+
+  .card {
+    padding: 12px;
+  }
+
+  .backup-detail-panel > .section-head .actions .btn {
+    min-height: 38px;
+  }
+}
+
+/* Final consistency pass for management controls and selected vault rows. */
+.toolbar .btn.small,
+.toolbar.actions .btn.small,
+.actions .btn.small,
+.topbar-actions .btn,
+.list-icon-btn,
+.sort-trigger,
+.mobile-fab-trigger,
+.website-remove-btn,
+.kv-actions .btn.small,
+.domain-rule-mini-btn,
+.domain-rule-icon-btn,
+.admin-pagination .btn,
+.invite-row-actions .btn,
+.admin-invites-head-actions .btn,
+input[type='file'].input::file-selector-button {
+  border-radius: var(--radius-md);
+}
+
+.mobile-fab-trigger,
+.sort-trigger,
+.totp-copy-btn,
+.input-icon-btn,
+.eye-btn,
+.search-clear-btn,
+.folder-delete-btn,
+.folder-sort-btn,
+.domain-rule-mini-btn,
+.domain-rule-icon-btn {
+  border-radius: var(--radius-md);
+}
+
+.list-item.active {
+  background:
+    linear-gradient(90deg, color-mix(in srgb, var(--primary) 13%, var(--panel)) 0%, var(--panel) 72%);
+  border-color: color-mix(in srgb, var(--primary) 46%, var(--line));
+}
+
+.list-item.active:hover {
+  background:
+    linear-gradient(90deg, color-mix(in srgb, var(--primary) 17%, var(--panel)) 0%, var(--panel-subtle) 72%);
+  border-color: color-mix(in srgb, var(--primary) 58%, var(--line));
+}
+
+.list-item.active .list-title,
+.list-item.active .list-icon-fallback {
+  color: var(--primary-strong);
+}
+
+.list-item.active .list-sub {
+  color: var(--muted-strong);
+}
+
+.admin-invites-card {
+  display: grid;
+  gap: 12px;
+}
+
+.admin-invites-head {
+  align-items: center;
+  margin-bottom: 0;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--line-soft);
+}
+
+.admin-invites-head h3 {
+  margin: 0;
+}
+
+.admin-invites-head-actions {
+  flex-wrap: nowrap;
+  justify-content: flex-end;
+}
+
+.invite-toolbar {
+  display: grid;
+  align-items: end;
+  gap: 10px;
+  margin: 0;
+  padding: 12px;
+  border: 1px solid var(--line-soft);
+  border-radius: var(--radius-lg);
+  background: var(--panel-soft);
+}
+
+.invite-create-group {
+  display: grid;
+  grid-template-columns: minmax(120px, 150px) auto;
+  align-items: end;
+  justify-content: start;
+  gap: 10px;
+  width: fit-content;
+  max-width: 100%;
+}
+
+.invite-hours-field {
+  margin: 0;
+}
+
+.invite-hours-field > span {
+  margin: 0 0 6px;
+}
+
+.invite-hours-field .input.small {
+  width: 100%;
+  min-width: 0;
+}
+
+.invite-table {
+  border-spacing: 0;
+}
+
+.invite-table th {
+  height: 42px;
+  padding: 9px 10px;
+  background: var(--panel-soft);
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.invite-table td {
+  height: 48px;
+  padding: 10px;
+}
+
+.invite-table tr {
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.invite-table tbody tr:hover {
+  background: var(--panel-subtle);
+}
+
+.invite-table .empty {
+  min-height: 72px;
+}
+
+.invite-row-actions {
+  justify-content: flex-end;
+}
+
+.invite-pagination {
+  align-items: center;
+  justify-content: flex-start;
+  margin-top: 0;
+  padding-top: 10px;
+  border-top: 1px solid var(--line-soft);
+}
+
+:root[data-theme='dark'] .list-item.active {
+  background:
+    linear-gradient(90deg, color-mix(in srgb, var(--primary) 22%, var(--panel)) 0%, var(--panel) 72%);
+  border-color: color-mix(in srgb, var(--primary) 62%, var(--line));
+  box-shadow:
+    inset 3px 0 0 var(--primary),
+    0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent),
+    0 10px 24px rgba(0, 0, 0, 0.18);
+}
+
+:root[data-theme='dark'] .list-item.active:hover {
+  background:
+    linear-gradient(90deg, color-mix(in srgb, var(--primary) 26%, var(--panel)) 0%, var(--panel-subtle) 72%);
+}
+
+:root[data-theme='dark'] .list-item.active .list-title,
+:root[data-theme='dark'] .list-item.active .list-icon-fallback {
+  color: var(--primary-strong);
+}
+
+:root[data-theme='dark'] .list-item.active .list-sub {
+  color: var(--muted-strong);
+}
+
+:root[data-theme='dark'] .invite-toolbar,
+:root[data-theme='dark'] .invite-table th {
+  background: var(--panel-soft);
+  border-color: var(--line);
+}
+
+:root[data-theme='dark'] .invite-table tbody tr:hover {
+  background: var(--panel-subtle);
+}
+
+@media (max-width: 760px) {
+  .admin-invites-head {
+    align-items: stretch;
+  }
+
+  .admin-invites-head-actions {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    width: 100%;
+  }
+
+  .admin-invites-head-actions .btn {
+    min-height: 38px;
+  }
+
+  .invite-create-group {
+    grid-template-columns: minmax(0, 1fr);
+    width: 100%;
+  }
+
+  .invite-create-group .btn {
+    width: 100%;
+  }
+
+  .invite-table {
+    border-spacing: 0 8px;
+  }
+
+  .invite-table tr {
+    border-radius: var(--radius-md);
+  }
+
+  .invite-row-actions {
+    justify-content: stretch;
+  }
+
+  .invite-row-actions .btn {
+    flex: 1 1 auto;
+  }
+
+  .invite-pagination {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+  }
+}
diff --git a/webapp/src/styles/tokens.css b/webapp/src/styles/tokens.css
index b126901..b16cad4 100644
--- a/webapp/src/styles/tokens.css
+++ b/webapp/src/styles/tokens.css
@@ -1,28 +1,34 @@
 :root {
-  --bg-accent: #eef3fa;
+  --bg-accent: #f3f6f9;
   --panel: #ffffff;
-  --panel-soft: #f6f8fc;
-  --panel-muted: #edf2f8;
-  --panel-subtle: #f8fafc;
-  --line: rgba(113, 132, 163, 0.28);
-  --line-soft: rgba(113, 132, 163, 0.16);
-  --text: #0b1730;
-  --muted: #5f6f85;
-  --muted-strong: #2f4058;
-  --primary: #2563eb;
-  --primary-hover: #1d4ed8;
-  --primary-strong: #0f3f98;
-  --danger: #d92d57;
+  --panel-soft: #f8fafc;
+  --panel-muted: #edf2f7;
+  --panel-subtle: #fbfcfe;
+  --surface: #ffffff;
+  --line: rgba(100, 116, 139, 0.24);
+  --line-soft: rgba(100, 116, 139, 0.14);
+  --text: #111827;
+  --text-muted: #64748b;
+  --muted: #64748b;
+  --muted-strong: #334155;
+  --primary: #2457c5;
+  --primary-hover: #1d4aa7;
+  --primary-strong: #173f8f;
+  --brand: var(--primary);
+  --brand-strong: var(--primary-strong);
+  --accent: #0f766e;
+  --accent-soft: #e6f6f3;
+  --danger: #c92f4e;
   --success: #0f766e;
-  --warning: #b45309;
-  --overlay-strong: rgba(15, 23, 42, 0.56);
-  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
-  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
-  --shadow-lg: 0 14px 38px rgba(15, 23, 42, 0.10);
-  --radius-sm: 8px;
-  --radius-md: 10px;
-  --radius-lg: 14px;
-  --radius-xl: 18px;
+  --warning: #b7791f;
+  --overlay-strong: rgba(15, 23, 42, 0.58);
+  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.045);
+  --shadow-md: 0 8px 18px rgba(15, 23, 42, 0.075);
+  --shadow-lg: 0 18px 44px rgba(15, 23, 42, 0.105);
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 10px;
+  --radius-xl: 14px;
   --ease-out-strong: cubic-bezier(0.22, 1, 0.36, 1);
   --ease-out-soft: cubic-bezier(0.24, 0.8, 0.32, 1);
   --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
@@ -37,19 +43,25 @@
 }
 
 :root[data-theme='dark'] {
-  --bg-accent: #0b1020;
-  --panel: #111827;
-  --panel-soft: #0f172a;
-  --panel-muted: #0b1324;
-  --panel-subtle: #151e2e;
-  --line: rgba(148, 163, 184, 0.20);
-  --line-soft: rgba(148, 163, 184, 0.12);
-  --text: #e5edf8;
-  --muted: #9aa8bb;
-  --muted-strong: #c7d2e2;
-  --primary: #8bb8ff;
-  --primary-hover: #a9ccff;
-  --primary-strong: #dceaff;
+  --bg-accent: #101418;
+  --panel: #171d25;
+  --panel-soft: #131922;
+  --panel-muted: #0f151d;
+  --panel-subtle: #1c2430;
+  --surface: #171d25;
+  --line: rgba(148, 163, 184, 0.18);
+  --line-soft: rgba(148, 163, 184, 0.11);
+  --text: #e8edf4;
+  --text-muted: #9aa8ba;
+  --muted: #9aa8ba;
+  --muted-strong: #c4cfdc;
+  --primary: #80b6ff;
+  --primary-hover: #a6cbff;
+  --primary-strong: #d7e8ff;
+  --brand: var(--primary);
+  --brand-strong: var(--primary-strong);
+  --accent: #5eead4;
+  --accent-soft: rgba(94, 234, 212, 0.12);
   --danger: #fb7185;
   --success: #5eead4;
   --warning: #fbbf24;