:root {
  --public-blue: #1479b8;
  --public-blue-dark: #0f659b;
  --civic-navy: #10263b;
  --hangzhou-red: #d92832;
  --hangzhou-red-dark: #b91f29;
  --pale-blue: #e9f6fb;
  --page: #f7f9fb;
  --surface: #ffffff;
  --ink: #16202a;
  --muted: #667584;
  --line: #dde5eb;
  --line-strong: #c8d5df;
  --success: #16845b;
  --success-bg: #e8f7f1;
  --warning: #a85c05;
  --warning-bg: #fff4e6;
  --danger-bg: #fff0f1;
  --shadow: 0 12px 34px rgba(16, 38, 59, 0.08);
}

body[data-ui="city-watch"] {
  background: var(--page);
  color: var(--ink);
}

body[data-ui="city-watch"] button,
body[data-ui="city-watch"] input,
body[data-ui="city-watch"] select,
body[data-ui="city-watch"] textarea {
  letter-spacing: 0;
}

body[data-ui="city-watch"] button {
  white-space: nowrap;
}

body[data-ui="city-watch"] :focus-visible {
  outline: 2px solid var(--public-blue);
  outline-offset: 2px;
}

/* Login */
body[data-ui="city-watch"] .auth-shell {
  grid-template-columns: 620px minmax(0, 1fr);
  background: var(--surface);
}

body[data-ui="city-watch"] .auth-panel {
  padding: 64px 82px;
  border-right: 1px solid var(--line);
  background: #fff;
  backdrop-filter: none;
}

body[data-ui="city-watch"] .auth-brand {
  gap: 13px;
  margin-bottom: 48px;
  color: var(--hangzhou-red);
}

body[data-ui="city-watch"] .auth-brand .brand-mark {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  padding: 9px;
  border-radius: 6px;
  background: var(--hangzhou-red);
  color: #fff;
}

body[data-ui="city-watch"] .auth-brand .brand-title {
  color: var(--civic-navy);
  font-size: 18px;
}

body[data-ui="city-watch"] .auth-brand .brand-subtitle {
  color: var(--muted);
}

body[data-ui="city-watch"] .auth-card {
  width: 100%;
  max-width: 456px;
}

body[data-ui="city-watch"] .auth-title {
  color: var(--civic-navy);
  font-size: 34px;
  font-weight: 800;
}

body[data-ui="city-watch"] .auth-desc {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

body[data-ui="city-watch"] .auth-form label {
  color: #405363;
  font-size: 13px;
  font-weight: 700;
}

body[data-ui="city-watch"] .auth-form input,
body[data-ui="city-watch"] .password-field {
  border-color: var(--line-strong);
}

body[data-ui="city-watch"] .auth-form input {
  height: 46px;
}

body[data-ui="city-watch"] .auth-form input:focus,
body[data-ui="city-watch"] .password-field:focus-within {
  border-color: var(--public-blue);
  box-shadow: 0 0 0 3px rgba(20, 121, 184, 0.12);
}

body[data-ui="city-watch"] .auth-submit {
  height: 46px;
  border-radius: 6px;
  background: var(--hangzhou-red);
  box-shadow: 0 10px 22px rgba(217, 40, 50, 0.2);
}

body[data-ui="city-watch"] .auth-link {
  color: var(--public-blue);
}

body[data-ui="city-watch"] .auth-note {
  border-color: #cce6f0;
  background: #f3fafc;
  color: #375063;
}

body[data-ui="city-watch"] .auth-visual {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0;
  background: var(--civic-navy);
}

body[data-ui="city-watch"] .auth-visual > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.66;
}

body[data-ui="city-watch"] .auth-visual::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(16, 38, 59, 0.96), rgba(16, 38, 59, 0.7) 42%, rgba(16, 38, 59, 0.25));
  content: "";
}

body[data-ui="city-watch"] .auth-message {
  position: absolute;
  z-index: 1;
  bottom: 84px;
  left: 62px;
  width: min(560px, calc(100% - 124px));
  color: #fff;
}

body[data-ui="city-watch"] .auth-rule {
  display: block;
  width: 52px;
  height: 4px;
  margin-bottom: 22px;
  background: var(--hangzhou-red);
}

body[data-ui="city-watch"] .auth-message h2 {
  margin: 0;
  font-size: 34px;
  line-height: 1.4;
}

body[data-ui="city-watch"] .auth-message p {
  max-width: 500px;
  margin: 16px 0 0;
  color: #d4e3ec;
  font-size: 15px;
  line-height: 1.85;
}

/* Application frame */
body[data-ui="city-watch"] .admin-shell {
  grid-template-columns: 232px minmax(0, 1fr) 440px;
  background: var(--page);
}

body[data-ui="city-watch"] .admin-shell.drawer-collapsed {
  grid-template-columns: 232px minmax(0, 1fr) 0;
}

body[data-ui="city-watch"] .admin-shell.sidebar-collapsed {
  grid-template-columns: 76px minmax(0, 1fr) 440px;
}

body[data-ui="city-watch"] .admin-shell.sidebar-collapsed.drawer-collapsed {
  grid-template-columns: 76px minmax(0, 1fr) 0;
}

body[data-ui="city-watch"] .sidebar {
  border-right-color: #0b1b2a;
  background: var(--civic-navy);
  color: #dbe7ef;
}

body[data-ui="city-watch"] .brand {
  height: 76px;
  padding: 0 20px;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

body[data-ui="city-watch"] .brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  place-items: center;
  padding: 6px;
  border-radius: 6px;
  background: var(--hangzhou-red);
  color: #fff;
}

body[data-ui="city-watch"] .brand-title {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

body[data-ui="city-watch"] .brand-subtitle {
  color: #8eacbf;
  font-size: 11px;
}

body[data-ui="city-watch"] .nav {
  gap: 3px;
  padding: 18px 10px;
}

body[data-ui="city-watch"] .nav-item {
  position: relative;
  height: 42px;
  gap: 11px;
  padding: 0 12px;
  border-radius: 5px;
  color: #bdd0dc;
  font-size: 14px;
  font-weight: 600;
}

body[data-ui="city-watch"] .nav-item .nav-icon {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
  color: #8eacbf;
}

body[data-ui="city-watch"] .nav-item.active {
  background: rgba(20, 121, 184, 0.22);
  color: #fff;
}

body[data-ui="city-watch"] .nav-item.active::before {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #46b4df;
  content: "";
}

body[data-ui="city-watch"] .nav-item.active .nav-icon {
  color: #5dc3e7;
}

body[data-ui="city-watch"] .collapse {
  height: 62px;
  border-top-color: rgba(255, 255, 255, 0.1);
  color: #bdd0dc;
}

body[data-ui="city-watch"] .main-area {
  border-right-color: var(--line-strong);
  background: var(--page);
}

body[data-ui="city-watch"] .topbar {
  height: 64px;
  padding: 0 22px 0 26px;
  border-bottom-color: var(--line);
  background: #fff;
}

body[data-ui="city-watch"] .breadcrumb {
  color: var(--civic-navy);
  font-size: 18px;
  font-weight: 750;
}

body[data-ui="city-watch"] .global-search {
  width: min(380px, 100%);
  height: 38px;
  border-color: var(--line);
  border-radius: 6px;
  background: var(--page);
}

body[data-ui="city-watch"] .global-search .input-icon {
  color: var(--public-blue);
}

body[data-ui="city-watch"] .global-search input {
  height: 36px;
}

body[data-ui="city-watch"] .top-icon {
  width: 38px;
  height: 38px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--civic-navy);
}

body[data-ui="city-watch"] .top-icon:hover {
  border-color: #9bcde1;
  color: var(--public-blue);
}

body[data-ui="city-watch"] .account-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--public-blue);
  line-height: 34px;
}

body[data-ui="city-watch"] .account-name {
  color: var(--civic-navy);
}

body[data-ui="city-watch"] .account-role {
  color: var(--muted);
}

body[data-ui="city-watch"] .logout-button {
  height: 36px;
  border-color: var(--line-strong);
  border-radius: 6px;
  color: var(--civic-navy);
}

/* Workspace and metrics */
body[data-ui="city-watch"] .workspace {
  padding: 20px 22px 22px;
}

body[data-ui="city-watch"] .metric-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  height: 108px;
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

@media (min-width: 1041px) and (max-width: 1699px) {
  body[data-ui="city-watch"] .admin-shell:not(.drawer-collapsed) .metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: 216px;
  }
}

body[data-ui="city-watch"] .metric-card {
  height: 106px;
  gap: 11px;
  padding: 16px 17px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}

body[data-ui="city-watch"] .metric-card:last-child {
  border-right: 0;
}

body[data-ui="city-watch"] .metric-card-action {
  transition: background-color 150ms ease;
}

body[data-ui="city-watch"] .metric-card-action:hover {
  border-color: var(--line);
  background: #f9fcfd;
  box-shadow: none;
  transform: none;
}

body[data-ui="city-watch"] .metric-icon {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  background: var(--pale-blue);
  color: var(--public-blue);
}

body[data-ui="city-watch"] .metric-icon.red {
  background: var(--danger-bg);
  color: var(--hangzhou-red);
}

body[data-ui="city-watch"] .metric-icon.green,
body[data-ui="city-watch"] .metric-icon.orange,
body[data-ui="city-watch"] .metric-icon.cyan,
body[data-ui="city-watch"] .metric-icon.purple {
  background: var(--pale-blue);
  color: var(--public-blue);
}

body[data-ui="city-watch"] .metric-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

body[data-ui="city-watch"] .metric-value {
  margin-top: 4px;
  color: var(--civic-navy);
  font-size: 24px;
  font-weight: 780;
}

body[data-ui="city-watch"] .metric-foot {
  margin-top: 7px;
  overflow: hidden;
  color: #81909d;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Panels, tabs and controls */
body[data-ui="city-watch"] .content-card {
  border-color: var(--line);
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(16, 38, 59, 0.035);
}

body[data-ui="city-watch"] .tabs-bar {
  min-height: 58px;
  padding: 0 14px 0 18px;
  border-bottom-color: var(--line);
}

body[data-ui="city-watch"] .tabs {
  gap: 18px;
}

body[data-ui="city-watch"] .tab {
  padding: 0 4px;
  color: #526273;
  font-size: 13px;
  font-weight: 650;
}

body[data-ui="city-watch"] .tab.active {
  color: var(--public-blue);
}

body[data-ui="city-watch"] .tab.active::after {
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--public-blue);
}

body[data-ui="city-watch"] .btn {
  min-height: 36px;
  height: 36px;
  padding: 0 14px;
  border-color: var(--line-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--civic-navy);
  font-size: 13px;
  font-weight: 650;
  box-shadow: none;
}

body[data-ui="city-watch"] .btn.primary {
  border-color: var(--public-blue);
  background: var(--public-blue);
  color: #fff;
  box-shadow: none;
}

body[data-ui="city-watch"] .btn.commit {
  border-color: var(--hangzhou-red);
  background: var(--hangzhou-red);
  color: #fff;
  box-shadow: 0 7px 16px rgba(217, 40, 50, 0.16);
}

body[data-ui="city-watch"] .btn.danger {
  border-color: #efb8bc;
  background: #fff;
  color: var(--hangzhou-red);
}

body[data-ui="city-watch"] .btn:active {
  transform: translateY(1px);
}

body[data-ui="city-watch"] .filter-bar {
  min-height: 62px;
  grid-template-columns: minmax(240px, 1.2fr) repeat(3, minmax(116px, 0.72fr));
  gap: 10px;
  padding: 11px 14px;
  border-bottom-color: var(--line);
  background: #fbfcfd;
}

body[data-ui="city-watch"] .filter-input,
body[data-ui="city-watch"] .filter-select {
  height: 38px;
  border-color: var(--line-strong);
  border-radius: 5px;
}

body[data-ui="city-watch"] .filter-input .input-icon {
  color: var(--public-blue);
}

body[data-ui="city-watch"] .filter-input input,
body[data-ui="city-watch"] .filter-select select {
  height: 36px;
}

/* Data table */
body[data-ui="city-watch"] .table-wrap {
  max-height: calc(100vh - 310px);
}

body[data-ui="city-watch"] th {
  height: 42px;
  padding: 0 10px;
  border-bottom-color: var(--line);
  background: #f6f9fb;
  color: #526273;
  font-size: 11px;
  font-weight: 700;
}

body[data-ui="city-watch"] td {
  height: 62px;
  padding: 6px 10px;
  border-bottom-color: #e7edf2;
  color: #334351;
  font-size: 12px;
}

body[data-ui="city-watch"] tbody tr.selected {
  background: #eef8fc;
  box-shadow: inset 3px 0 0 var(--public-blue);
}

body[data-ui="city-watch"] tbody tr:hover {
  background: #f7fbfd;
}

body[data-ui="city-watch"] .check.selected {
  border-color: var(--public-blue);
  background: var(--public-blue);
}

body[data-ui="city-watch"] .avatar {
  width: 36px;
  height: 44px;
  flex-basis: 36px;
  border-radius: 5px;
  background: #e8eef3;
  line-height: 44px;
}

body[data-ui="city-watch"] .avatar img {
  object-fit: cover;
  object-position: top center;
}

body[data-ui="city-watch"] .person-name,
body[data-ui="city-watch"] .record-title {
  color: var(--civic-navy);
}

body[data-ui="city-watch"] .tag {
  min-height: 24px;
  height: 24px;
  border-radius: 4px;
  background: var(--pale-blue);
  color: var(--public-blue-dark);
  font-size: 11px;
  font-weight: 650;
}

body[data-ui="city-watch"] .tag.strong {
  background: var(--pale-blue);
  color: var(--public-blue-dark);
}

body[data-ui="city-watch"] .status-pill {
  gap: 5px;
  min-height: 24px;
  height: 24px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 650;
}

body[data-ui="city-watch"] .status-published,
body[data-ui="city-watch"] .status-active,
body[data-ui="city-watch"] .status-approved {
  background: var(--success-bg);
  color: var(--success);
}

body[data-ui="city-watch"] .status-pending {
  background: var(--warning-bg);
  color: var(--warning);
}

body[data-ui="city-watch"] .status-draft {
  background: #eef2f5;
  color: #6b7784;
}

body[data-ui="city-watch"] .status-disabled,
body[data-ui="city-watch"] .status-rejected {
  background: var(--danger-bg);
  color: var(--hangzhou-red-dark);
}

body[data-ui="city-watch"] .progress-fill {
  background: var(--public-blue);
}

body[data-ui="city-watch"] .pagination {
  min-height: 52px;
  color: var(--muted);
  font-size: 12px;
}

body[data-ui="city-watch"] .page-btn.active {
  border-color: var(--public-blue);
  background: var(--public-blue);
  color: #fff;
}

/* Drawer and forms */
body[data-ui="city-watch"] .drawer {
  border-left: 1px solid var(--line-strong);
  box-shadow: -12px 0 30px rgba(16, 38, 59, 0.055);
}

body[data-ui="city-watch"] .drawer-head {
  height: 62px;
  padding: 0 17px;
  border-bottom-color: var(--line);
}

body[data-ui="city-watch"] .drawer-title {
  color: var(--civic-navy);
  font-size: 16px;
}

body[data-ui="city-watch"] .close-icon {
  width: 38px;
  height: 38px;
  padding: 9px;
  border-color: var(--line);
  border-radius: 6px;
  color: var(--civic-navy);
}

body[data-ui="city-watch"] .drawer-profile {
  min-height: 100px;
  align-items: center;
  padding: 14px 17px;
  border-bottom-color: var(--line);
  background: linear-gradient(90deg, #f7fbfd, #fff);
}

body[data-ui="city-watch"] .drawer-avatar {
  width: 56px;
  height: 68px;
  flex-basis: 56px;
  border-radius: 6px;
  background: var(--public-blue);
  line-height: 68px;
  object-position: top center;
}

body[data-ui="city-watch"] .drawer-avatar img {
  object-position: top center;
}

body[data-ui="city-watch"] .drawer-name {
  color: var(--civic-navy);
  font-size: 15px;
}

body[data-ui="city-watch"] .drawer-id,
body[data-ui="city-watch"] .drawer-meta,
body[data-ui="city-watch"] .completion {
  color: var(--muted);
  font-size: 11px;
}

body[data-ui="city-watch"] .completion-value {
  color: var(--success);
}

body[data-ui="city-watch"] .completion-line span {
  background: var(--public-blue);
}

body[data-ui="city-watch"] .drawer-form {
  padding: 16px 17px 26px;
}

body[data-ui="city-watch"] .form-grid {
  gap: 12px;
}

body[data-ui="city-watch"] .form-section-marker {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  color: var(--civic-navy);
  font-size: 13px;
  line-height: 1.4;
}

body[data-ui="city-watch"] .form-section-marker:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

body[data-ui="city-watch"] .form-section-marker::before {
  width: 3px;
  height: 15px;
  border-radius: 2px;
  background: var(--public-blue);
  content: "";
}

body[data-ui="city-watch"] .field {
  min-width: 0;
  gap: 6px;
}

body[data-ui="city-watch"] .field label {
  color: #526273;
  font-size: 11px;
  font-weight: 700;
}

body[data-ui="city-watch"] .field input,
body[data-ui="city-watch"] .field select,
body[data-ui="city-watch"] .field textarea {
  border-color: var(--line-strong);
  border-radius: 5px;
  color: var(--ink);
  font-size: 12px;
}

body[data-ui="city-watch"] .field input,
body[data-ui="city-watch"] .field select {
  height: 38px;
}

body[data-ui="city-watch"] .field input:focus,
body[data-ui="city-watch"] .field select:focus,
body[data-ui="city-watch"] .field textarea:focus {
  border-color: var(--public-blue);
  box-shadow: none;
}

body[data-ui="city-watch"] .search-field:focus-within,
body[data-ui="city-watch"] .global-search:focus-within {
  border-color: var(--public-blue);
  box-shadow: 0 0 0 3px rgba(20, 121, 184, 0.1);
}

body[data-ui="city-watch"] .search-field:focus-within input,
body[data-ui="city-watch"] .global-search:focus-within input {
  box-shadow: none;
}

body[data-ui="city-watch"] .app-confirm-mask {
  position: fixed;
  z-index: 999;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(16, 38, 59, 0.42);
}

body[data-ui="city-watch"] .app-confirm-dialog {
  width: min(420px, 100%);
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 20px 54px rgba(16, 38, 59, 0.25);
}

body[data-ui="city-watch"] .app-confirm-dialog h2,
body[data-ui="city-watch"] .app-confirm-dialog p {
  margin: 0;
}

body[data-ui="city-watch"] .app-confirm-dialog p {
  margin-top: 12px;
  color: var(--muted);
  line-height: 1.65;
}

body[data-ui="city-watch"] .app-confirm-dialog .app-confirm-warning {
  color: #9f2d32;
}

body[data-ui="city-watch"] .app-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

body[data-ui="city-watch"] .avatar-upload-row,
body[data-ui="city-watch"] .foundation-image-upload,
body[data-ui="city-watch"] .foundation-editor-item {
  border-color: var(--line);
  background: #fbfcfd;
}

body[data-ui="city-watch"] .avatar-upload-button.primary {
  border-color: var(--public-blue);
  background: var(--public-blue);
  box-shadow: none;
}

body[data-ui="city-watch"] .permission-grid {
  gap: 8px;
}

body[data-ui="city-watch"] .permission-item {
  min-height: 36px;
  border-color: var(--line);
  color: #405363;
  font-size: 11px;
}

body[data-ui="city-watch"] .permission-item:has(input:checked) {
  border-color: #a9d6e8;
  background: #f1f9fc;
  color: var(--public-blue-dark);
}

body[data-ui="city-watch"] .permission-item input {
  accent-color: var(--public-blue);
}

body[data-ui="city-watch"] .role-permission-hint {
  border-color: #cce6f0;
  background: #f3fafc;
  color: #375063;
}

body[data-ui="city-watch"] .drawer-form.form-readonly input,
body[data-ui="city-watch"] .drawer-form.form-readonly select,
body[data-ui="city-watch"] .drawer-form.form-readonly textarea,
body[data-ui="city-watch"] .drawer-form.form-readonly button {
  border-color: #e3e8ef;
  background: #f4f7f9;
  color: var(--muted);
}

body[data-ui="city-watch"] .inline-submit-row {
  padding: 18px 0 6px;
  border-top-color: var(--line);
}

body[data-ui="city-watch"] .inline-submit-button {
  height: 44px;
}

body[data-ui="city-watch"] .drawer-actions {
  height: 68px;
  border-top-color: var(--line-strong);
  box-shadow: 0 -8px 18px rgba(16, 38, 59, 0.04);
}

body[data-ui="city-watch"] .drawer-actions .btn {
  height: 40px;
}

/* Overview and foundation */
body[data-ui="city-watch"] .overview-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0;
  padding: 0;
}

body[data-ui="city-watch"] .overview-card {
  min-height: 104px;
  padding: 18px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

body[data-ui="city-watch"] .overview-card:last-child {
  border-bottom: 0;
}

body[data-ui="city-watch"] .overview-card h3 {
  color: var(--civic-navy);
  font-size: 15px;
}

body[data-ui="city-watch"] .overview-card p {
  color: var(--muted);
  font-size: 12px;
}

body[data-ui="city-watch"] .foundation-public-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  gap: 14px;
  padding: 16px;
}

body[data-ui="city-watch"] .foundation-public-preview {
  position: relative;
  min-height: 280px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

body[data-ui="city-watch"] .foundation-public-preview > img {
  display: block;
  width: 100%;
  height: 280px;
  object-fit: cover;
}

body[data-ui="city-watch"] .foundation-public-preview::after {
  position: absolute;
  inset: 0 30% 0 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.8) 58%, rgba(255, 255, 255, 0));
  content: "";
}

body[data-ui="city-watch"] .foundation-public-copy {
  position: absolute;
  z-index: 1;
  top: 30px;
  left: 24px;
  width: 48%;
}

body[data-ui="city-watch"] .foundation-public-copy > span {
  color: var(--public-blue);
  font-size: 11px;
  font-weight: 700;
}

body[data-ui="city-watch"] .foundation-public-copy h3 {
  margin: 9px 0 0;
  color: var(--civic-navy);
  font-size: 22px;
  line-height: 1.35;
}

body[data-ui="city-watch"] .foundation-public-copy strong {
  display: block;
  margin-top: 9px;
  color: var(--hangzhou-red);
  font-size: 15px;
}

body[data-ui="city-watch"] .foundation-public-copy p {
  display: -webkit-box;
  margin: 12px 0 0;
  overflow: hidden;
  color: #4f6474;
  font-size: 12px;
  line-height: 1.75;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

body[data-ui="city-watch"] .foundation-public-version {
  display: inline-flex;
  margin-top: 14px;
  padding: 7px 10px;
  border: 1px solid rgba(20, 121, 184, 0.22);
  border-radius: 4px;
  background: rgba(233, 246, 251, 0.92);
  color: var(--civic-navy);
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
}

body[data-ui="city-watch"] .foundation-public-version strong {
  display: inline;
  margin: 0;
  color: var(--public-blue);
  font-size: 12px;
}

body[data-ui="city-watch"] .system-release-version {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--pale-blue);
  color: var(--civic-navy);
  align-items: center;
  gap: 8px 12px;
}

body[data-ui="city-watch"] .system-release-version span,
body[data-ui="city-watch"] .system-release-version strong {
  font-size: 13px;
  font-weight: 700;
}

body[data-ui="city-watch"] .system-release-version strong {
  color: var(--public-blue);
}

body[data-ui="city-watch"] .system-release-version small {
  color: #667584;
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 760px) {
  body[data-ui="city-watch"] .system-release-version {
    grid-template-columns: auto 1fr;
  }

  body[data-ui="city-watch"] .system-release-version small {
    grid-column: 1 / -1;
  }
}

body[data-ui="city-watch"] .foundation-summary-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--pale-blue);
}

body[data-ui="city-watch"] .toast {
  background: var(--civic-navy);
}

body[data-ui="city-watch"] .loading-card {
  border-color: var(--line);
  color: var(--civic-navy);
}

body[data-ui="city-watch"] .loading-spinner {
  border-color: #bcddeb;
  border-top-color: var(--public-blue);
}

@media (max-width: 1439px) and (min-width: 1041px) {
  body[data-ui="city-watch"] .admin-shell {
    grid-template-columns: 216px minmax(0, 1fr) minmax(340px, 390px);
  }

  body[data-ui="city-watch"] .admin-shell.drawer-collapsed {
    grid-template-columns: 216px minmax(0, 1fr) 0;
  }

  body[data-ui="city-watch"] .admin-shell.sidebar-collapsed {
    grid-template-columns: 76px minmax(0, 1fr) minmax(340px, 390px);
  }

  body[data-ui="city-watch"] .admin-shell.sidebar-collapsed.drawer-collapsed {
    grid-template-columns: 76px minmax(0, 1fr) 0;
  }

  body[data-ui="city-watch"] .brand {
    justify-content: flex-start;
    padding: 0 16px;
  }

  body[data-ui="city-watch"] .brand > div:last-child,
  body[data-ui="city-watch"] .nav-item > span:last-child,
  body[data-ui="city-watch"] .collapse > span:last-child {
    display: block;
  }

  body[data-ui="city-watch"] .nav {
    padding: 18px 10px;
  }

  body[data-ui="city-watch"] .nav-item,
  body[data-ui="city-watch"] .collapse {
    justify-content: flex-start;
  }

  body[data-ui="city-watch"] .metric-card {
    padding: 14px 11px;
  }

  body[data-ui="city-watch"] .metric-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
}

@media (max-width: 1180px) and (min-width: 1041px) {
  body[data-ui="city-watch"] .topbar {
    grid-template-columns: minmax(130px, 1fr) minmax(180px, 250px) auto;
  }

  body[data-ui="city-watch"] .metric-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
  }

  body[data-ui="city-watch"] .metric-icon {
    display: none;
  }
}

@media (max-width: 1040px) {
  body[data-ui="city-watch"] .admin-shell {
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(360px, 48vh);
  }

  body[data-ui="city-watch"] .admin-shell.drawer-collapsed {
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 0;
  }

  body[data-ui="city-watch"] .metric-grid {
    height: auto;
    grid-template-columns: repeat(6, minmax(130px, 1fr));
    overflow-x: auto;
  }

  body[data-ui="city-watch"] .metric-card {
    height: 98px;
  }

  body[data-ui="city-watch"] .table-wrap {
    max-height: calc(100vh - 380px);
  }
}

@media (max-width: 760px) {
  body[data-ui="city-watch"] .auth-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-ui="city-watch"] .auth-panel {
    padding: 36px 24px;
  }

  body[data-ui="city-watch"] .auth-visual {
    display: none;
  }

  body[data-ui="city-watch"] .admin-shell,
  body[data-ui="city-watch"] .admin-shell.drawer-collapsed {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-ui="city-watch"] .admin-shell {
    grid-template-rows: auto minmax(0, 1fr) minmax(320px, 42vh);
  }

  body[data-ui="city-watch"] .admin-shell.drawer-collapsed {
    grid-template-rows: auto minmax(0, 1fr) 0;
  }

  body[data-ui="city-watch"] .sidebar {
    grid-row: 1;
    grid-column: 1;
  }

  body[data-ui="city-watch"] .main-area {
    grid-row: 2;
    grid-column: 1;
  }

  body[data-ui="city-watch"] .drawer {
    grid-row: 3;
    grid-column: 1;
  }

  body[data-ui="city-watch"] .sidebar {
    background: var(--civic-navy);
  }

  body[data-ui="city-watch"] .brand {
    height: 58px;
    padding: 0 14px;
  }

  body[data-ui="city-watch"] .nav {
    gap: 4px;
    padding: 0 10px 10px;
  }

  body[data-ui="city-watch"] .nav-item {
    height: 38px;
    padding: 0 11px;
    font-size: 12px;
  }

  body[data-ui="city-watch"] .topbar {
    padding: 12px 14px;
  }

  body[data-ui="city-watch"] .top-icon {
    display: none;
  }

  body[data-ui="city-watch"] .workspace {
    padding: 12px;
  }

  body[data-ui="city-watch"] .metric-grid {
    grid-template-columns: repeat(6, 150px);
  }

  body[data-ui="city-watch"] .tabs-bar {
    padding: 12px;
  }

  body[data-ui="city-watch"] .filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-ui="city-watch"] .filter-input {
    grid-column: 1 / -1;
  }

  body[data-ui="city-watch"] .foundation-public-layout {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px;
  }

  body[data-ui="city-watch"] .foundation-public-preview,
  body[data-ui="city-watch"] .foundation-public-preview > img {
    min-height: 240px;
    height: 240px;
  }

  body[data-ui="city-watch"] .foundation-public-copy {
    top: 22px;
    left: 18px;
    width: 58%;
  }
}

@media (max-width: 560px) {
  body[data-ui="city-watch"] .metric-grid {
    grid-template-columns: repeat(6, 142px);
  }

  body[data-ui="city-watch"] .filter-bar,
  body[data-ui="city-watch"] .form-grid,
  body[data-ui="city-watch"] .permission-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-ui="city-watch"] .form-section-marker,
  body[data-ui="city-watch"] .field.full {
    grid-column: auto;
  }

  body[data-ui="city-watch"] .drawer-profile {
    min-height: 92px;
  }

  body[data-ui="city-watch"] .drawer-actions {
    overflow-x: auto;
  }

  body[data-ui="city-watch"] .drawer-actions .btn {
    flex: 0 0 auto;
    min-width: 92px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-ui="city-watch"] *,
  body[data-ui="city-watch"] *::before,
  body[data-ui="city-watch"] *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}