/* Cloud Farm SaaS theme. Loaded after the generated bundles on purpose. */
:root {
  --saas-page: #f3f5f3;
  --saas-surface: #ffffff;
  --saas-surface-soft: #edf1ee;
  --saas-surface-muted: #e5ebe7;
  --saas-border: #d9e1dc;
  --saas-border-strong: #becbc3;
  --saas-text: #17231c;
  --saas-muted: #68766d;
  --saas-subtle: #8a978f;
  --saas-brand: #167552;
  --saas-brand-strong: #0d5d40;
  --saas-brand-soft: #e5f3ec;
  --saas-coral: #df6b50;
  --saas-coral-soft: #fff0eb;
  --saas-warning: #a76518;
  --saas-warning-soft: #fff7e8;
  --saas-danger: #c33f4c;
  --saas-danger-soft: #fff0f1;
  --saas-sidebar: #14221b;
  --saas-sidebar-surface: #1c3026;
  --saas-sidebar-text: #eef5f0;
  --saas-sidebar-muted: #9aafa2;
  --saas-shadow-sm: 0 1px 2px rgba(20, 34, 27, 0.06);
  --saas-shadow-md: 0 10px 28px rgba(20, 34, 27, 0.09);
  --c-bg: var(--saas-page) !important;
  --c-surface: var(--saas-surface) !important;
  --c-border: var(--saas-border) !important;
  --c-text: var(--saas-text) !important;
  --c-text-dim: var(--saas-muted) !important;
  --c-accent: var(--saas-brand) !important;
  --c-accent-dim: rgba(22, 117, 82, 0.16) !important;
  --radius: 6px !important;
  --radius-lg: 8px !important;
  --shadow-md: var(--saas-shadow-md) !important;
}

html.dark {
  --saas-page: #101612;
  --saas-surface: #182019;
  --saas-surface-soft: #202a22;
  --saas-surface-muted: #28342b;
  --saas-border: #344138;
  --saas-border-strong: #46564c;
  --saas-text: #edf4ef;
  --saas-muted: #a2afa7;
  --saas-subtle: #7f8d84;
  --saas-brand: #45b986;
  --saas-brand-strong: #65c99a;
  --saas-brand-soft: #17382a;
  --saas-coral: #f08a70;
  --saas-coral-soft: #3b241f;
  --saas-warning: #e3ad5f;
  --saas-warning-soft: #342b1c;
  --saas-danger: #ef7b85;
  --saas-danger-soft: #3b2024;
  --saas-sidebar: #090e0b;
  --saas-sidebar-surface: #15221a;
  --saas-sidebar-text: #f2f7f3;
  --saas-sidebar-muted: #93a299;
  --saas-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.22);
  --saas-shadow-md: 0 12px 32px rgba(0, 0, 0, 0.28);
}

html,
body,
#app {
  min-width: 320px;
  min-height: 100%;
  background: var(--saas-page);
  color: var(--saas-text);
  font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
}

html * {
  box-sizing: border-box;
  letter-spacing: 0 !important;
}

body {
  margin: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a,
input,
select,
textarea {
  transition-duration: 160ms !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(22, 117, 82, 0.2) !important;
  outline-offset: 2px !important;
}

button,
a,
h1,
h2,
h3,
p,
span,
td,
th {
  overflow-wrap: anywhere;
}

/* Desktop application shell */
.app-shell.app-shell {
  display: grid !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  overflow: hidden !important;
  grid-template-columns: 248px minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) 28px !important;
  grid-template-areas: "topbar main" "topbar footer" !important;
}

.app-shell .topbar {
  grid-area: topbar !important;
  min-width: 0;
  border: 0 !important;
  background: var(--saas-sidebar) !important;
  color: var(--saas-sidebar-text) !important;
}

.app-shell .topbar-inner {
  height: 100% !important;
  padding: 22px 16px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 16px !important;
}

.app-shell .topbar-inner::before {
  content: "CLOUD FARM";
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
}

.app-shell .topbar-left,
.app-shell .topbar-right {
  width: 100%;
  min-width: 0;
}

.app-shell .topbar-left {
  display: block !important;
}

.app-shell .acct-btn {
  width: 100% !important;
  min-height: 46px;
  justify-content: flex-start !important;
  gap: 9px !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 6px !important;
  background: var(--saas-sidebar-surface) !important;
  color: var(--saas-sidebar-text) !important;
  box-shadow: none !important;
}

.app-shell .acct-btn:hover {
  border-color: rgba(101, 201, 154, 0.52) !important;
  background: #244032 !important;
  box-shadow: none !important;
}

.app-shell .acct-dot {
  width: 7px !important;
  height: 7px !important;
  background: #54c88f !important;
  box-shadow: 0 0 0 3px rgba(84, 200, 143, 0.15);
}

.app-shell .acct-text {
  max-width: none !important;
  flex: 1 1 auto;
  color: var(--saas-sidebar-text) !important;
  font-size: 13px !important;
}

.app-shell .acct-id {
  padding: 2px 6px !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--saas-sidebar-muted) !important;
}

.app-shell .desktop-nav {
  width: 100%;
  margin-top: 6px;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 4px !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.app-shell .desktop-nav a {
  position: relative;
  width: 100%;
  min-height: 42px;
  padding: 10px 12px !important;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--saas-sidebar-muted) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  text-align: left;
}

.app-shell .desktop-nav a::before {
  display: none;
}

.app-shell .desktop-nav a:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}

.app-shell .desktop-nav a.router-link-active,
.app-shell .desktop-nav a[aria-current="page"],
.app-shell .desktop-nav a.bg-white {
  background: #edf7f1 !important;
  color: #0d5d40 !important;
  box-shadow: inset 3px 0 0 var(--saas-coral) !important;
}

.app-shell .topbar-right {
  margin-top: auto !important;
  display: block !important;
}

.app-shell .user-btn {
  width: 100%;
  min-height: 44px;
  padding: 5px 9px !important;
  justify-content: flex-start;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--saas-sidebar-text) !important;
  box-shadow: none !important;
}

.app-shell .user-btn::after {
  content: "管理员账户";
  color: var(--saas-sidebar-muted);
  font-size: 12px;
  font-weight: 650;
}

.app-shell .user-btn:hover {
  border-color: rgba(255, 255, 255, 0.2) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.app-shell .user-avatar-img,
.app-shell .user-avatar-fb {
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px;
  border-radius: 50% !important;
  background: #edf7f1 !important;
}

.app-shell .topbar-right .dropdown {
  top: auto !important;
  right: auto !important;
  bottom: calc(100% + 8px) !important;
  left: 0 !important;
  width: 216px;
}

.app-shell .main {
  grid-area: main !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: 28px 30px 36px !important;
  background: var(--saas-page) !important;
  scrollbar-gutter: stable;
}

.app-shell .main > * {
  width: 100%;
  max-width: 1580px;
  margin-right: auto;
  margin-left: auto;
}

.app-shell .bottombar {
  grid-area: footer !important;
  min-width: 0;
  border-top: 1px solid var(--saas-border) !important;
  background: var(--saas-surface) !important;
  color: var(--saas-muted) !important;
  font-size: 10px !important;
}

/* Shared SaaS surfaces and controls */
.main h2,
.main h3 {
  color: var(--saas-text) !important;
}

.main h2 {
  font-size: 22px !important;
  line-height: 1.3 !important;
  font-weight: 760 !important;
}

.main h3 {
  font-size: 15px !important;
  line-height: 1.4 !important;
  font-weight: 720 !important;
}

.main p,
.main .text-gray-400,
.main .text-gray-500,
.main .dark\:text-gray-400,
.main .dark\:text-gray-500 {
  color: var(--saas-muted) !important;
}

.main input,
.main select,
.main textarea,
.modal-box input,
.modal-box select,
.modal-box textarea {
  border: 1px solid var(--saas-border-strong) !important;
  border-radius: 6px !important;
  background: var(--saas-surface) !important;
  color: var(--saas-text) !important;
  box-shadow: inset 0 1px 0 rgba(20, 34, 27, 0.02) !important;
}

.main input:hover,
.main select:hover,
.main textarea:hover {
  border-color: #9fafa5 !important;
}

.main input:focus,
.main select:focus,
.main textarea:focus,
.modal-box input:focus,
.modal-box select:focus,
.modal-box textarea:focus {
  border-color: var(--saas-brand) !important;
  box-shadow: 0 0 0 3px rgba(22, 117, 82, 0.12) !important;
}

.main input::placeholder,
.main textarea::placeholder {
  color: var(--saas-subtle) !important;
}

.main .bg-white {
  background-color: var(--saas-surface) !important;
}

.main .bg-gray-50,
.main .bg-gray-100 {
  background-color: var(--saas-surface-soft) !important;
}

html.dark .main [class*="dark:bg-gray-800"] {
  background-color: var(--saas-surface) !important;
}

html.dark .main [class*="dark:bg-gray-700"] {
  background-color: var(--saas-surface-soft) !important;
}

.main .rounded-lg.bg-white,
.main .rounded-xl.bg-white,
.main .border.bg-white,
.main [class*="border-gray-200"][class*="bg-white"] {
  border: 1px solid var(--saas-border) !important;
  border-radius: 7px !important;
  box-shadow: var(--saas-shadow-sm) !important;
}

.main .shadow,
.main .shadow-sm,
.main .shadow-lg,
.main .shadow-xl,
.main .shadow-2xl {
  box-shadow: var(--saas-shadow-sm) !important;
}

.main .border-gray-100,
.main .border-gray-200,
.main .border-gray-300 {
  border-color: var(--saas-border) !important;
}

html.dark .main [class*="dark:border-gray-700"] {
  border-color: var(--saas-border) !important;
}

.main button {
  max-width: 100%;
  border-radius: 6px !important;
  font-weight: 650 !important;
}

.main .bg-blue-600,
.main .bg-green-600,
.main [class*="bg-indigo-600"] {
  border-color: var(--saas-brand) !important;
  background-color: var(--saas-brand) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.main .bg-blue-600:hover,
.main .bg-green-600:hover,
.main [class*="bg-indigo-600"]:hover {
  background-color: var(--saas-brand-strong) !important;
}

.main .text-blue-500,
.main .text-blue-600,
.main .text-blue-700,
.main .text-green-500,
.main .text-green-600,
.main .text-green-700 {
  color: var(--saas-brand) !important;
}

.main .bg-blue-50,
.main .bg-blue-100,
.main .bg-green-50,
.main .bg-green-100 {
  background-color: var(--saas-brand-soft) !important;
}

html.dark .main [class*="dark:bg-blue-900"],
html.dark .main [class*="dark:bg-green-900"] {
  background-color: var(--saas-brand-soft) !important;
}

.main .border-blue-100,
.main .border-blue-200,
.main .border-green-100,
.main .border-green-200 {
  border-color: #b9ddca !important;
}

.main .bg-red-600 {
  background-color: var(--saas-danger) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.main .bg-red-50,
.main .bg-red-100,
.main .bg-red-200 {
  background-color: var(--saas-danger-soft) !important;
}

html.dark .main [class*="dark:bg-red-900"] {
  background-color: var(--saas-danger-soft) !important;
}

.main .text-red-400,
.main .text-red-500,
.main .text-red-600,
.main .text-red-700 {
  color: var(--saas-danger) !important;
}

.main .bg-amber-50,
.main .bg-amber-100,
.main .bg-amber-200,
.main .bg-yellow-200 {
  background-color: var(--saas-warning-soft) !important;
}

html.dark .main [class*="dark:bg-amber-900"] {
  background-color: var(--saas-warning-soft) !important;
}

.main .btn {
  border-radius: 6px !important;
  box-shadow: none !important;
}

.main .btn.primary {
  background: var(--saas-brand) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.main .btn.primary:not(:disabled):hover {
  background: var(--saas-brand-strong) !important;
  filter: none !important;
}

.main .btn.secondary,
.main .btn.ghost {
  border-color: var(--saas-border) !important;
  background: var(--saas-surface) !important;
  color: var(--saas-text) !important;
}

.main .btn.outline,
.main .btn.text {
  border-color: var(--saas-brand) !important;
  color: var(--saas-brand) !important;
}

.main .field-input {
  border-color: var(--saas-border-strong) !important;
  border-radius: 6px !important;
  background: var(--saas-surface) !important;
  color: var(--saas-text) !important;
}

.main .field-input:focus {
  border-color: var(--saas-brand) !important;
  box-shadow: 0 0 0 3px rgba(22, 117, 82, 0.12) !important;
}

.main .text-amber-500,
.main .text-amber-600,
.main .text-amber-700,
.main .text-yellow-600,
.main .text-yellow-700 {
  color: var(--saas-warning) !important;
}

.main .border-amber-100,
.main .border-amber-200,
.main .border-amber-300 {
  border-color: #efd29c !important;
}

.main table {
  width: 100%;
  border-collapse: collapse;
  background: var(--saas-surface) !important;
}

.main thead,
.main thead tr,
.main thead th {
  background: var(--saas-surface-soft) !important;
  color: var(--saas-muted) !important;
}

.main th {
  height: 42px;
  font-size: 11px !important;
  font-weight: 720 !important;
  text-transform: none !important;
}

.main td {
  border-color: var(--saas-border) !important;
  color: var(--saas-text) !important;
}

.main tbody tr:hover {
  background: #f7faf8 !important;
}

html.dark .main tbody tr:hover {
  background: #202a22 !important;
}

.modal-overlay,
.fixed.inset-0.bg-black\/50,
.fixed.inset-0.bg-black.bg-opacity-50 {
  background: rgba(9, 14, 11, 0.62) !important;
  backdrop-filter: blur(4px);
}

.modal-box,
.fixed.inset-0 > .rounded-lg.bg-white,
.fixed.inset-0 > [class*="rounded-lg"][class*="bg-white"] {
  border: 1px solid var(--saas-border) !important;
  border-radius: 8px !important;
  background: var(--saas-surface) !important;
  color: var(--saas-text) !important;
  box-shadow: var(--saas-shadow-md) !important;
}

.dropdown {
  border: 1px solid var(--saas-border) !important;
  border-radius: 7px !important;
  background: var(--saas-surface) !important;
  color: var(--saas-text) !important;
  box-shadow: var(--saas-shadow-md) !important;
}

.dropdown-item:hover {
  background: var(--saas-surface-soft) !important;
}

/* Page-specific refinements */
.auto-friend-page,
.f-page {
  padding: 0 !important;
}

.auto-friend-page > .mb-4:first-child {
  margin-bottom: 18px !important;
  padding: 0 0 16px 0;
  border-bottom: 1px solid var(--saas-border);
}

.auto-friend-page > .mb-4:first-child h2 {
  font-size: 23px !important;
}

.auto-friend-page > .mb-4:first-child h2::after {
  content: "";
  width: 34px;
  height: 3px;
  margin-top: 9px;
  display: block;
  border-radius: 2px;
  background: var(--saas-coral);
}

.auto-friend-page > .mb-4.flex.rounded-lg,
.auto-friend-page .mb-4.flex.rounded-lg.bg-gray-100,
.f-page .f-tabs {
  border: 1px solid var(--saas-border) !important;
  border-radius: 7px !important;
  background: var(--saas-surface-muted) !important;
}

.auto-friend-page > .mb-4.rounded-lg.bg-white,
.auto-friend-page > .rounded-lg.bg-white {
  border: 1px solid var(--saas-border) !important;
  border-radius: 7px !important;
  background: var(--saas-surface) !important;
  box-shadow: var(--saas-shadow-sm) !important;
}

.auto-friend-page .grid.grid-cols-2.mb-3 > div,
.auto-friend-page .grid.grid-cols-2.mb-4.gap-3 > div,
.auto-friend-page .grid.grid-cols-2.gap-3 > div {
  border-radius: 6px !important;
}

.auto-friend-page .field-label,
.main .field-label {
  color: var(--saas-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.auto-friend-page .field-textarea {
  min-height: 118px;
  line-height: 1.6;
}

.auto-friend-page label[data-autodel-check],
.auto-friend-page label[data-autodel-force] {
  min-height: 34px !important;
  padding: 5px 10px !important;
  border: 1px solid var(--saas-border) !important;
  border-radius: 6px !important;
  background: var(--saas-surface) !important;
  color: var(--saas-text) !important;
}

.f-page .f-tabs {
  width: fit-content;
  margin-bottom: 18px;
  padding: 4px;
}

.f-page .f-tabs button {
  min-width: 112px;
  min-height: 38px;
}

.f-page .f-search {
  min-width: 220px;
}

.friend-avatar,
.friend-avatar-placeholder {
  border: 2px solid var(--saas-surface);
  box-shadow: 0 0 0 1px var(--saas-border);
}

.friend-name {
  color: var(--saas-text) !important;
  font-weight: 720 !important;
}

.friend-gid,
.friend-meta {
  color: var(--saas-muted) !important;
}

.friend-actions button,
.fbtn {
  min-height: 32px;
}

.main .grid.md\:grid-cols-2.xl\:grid-cols-3 > div {
  border: 1px solid var(--saas-border) !important;
  border-radius: 7px !important;
  background: var(--saas-surface) !important;
  box-shadow: var(--saas-shadow-sm) !important;
}

.agent-panel.admin-panel {
  padding: 0 !important;
  background: transparent !important;
  color: var(--saas-text) !important;
}

.agent-panel > h2 {
  margin: 0 0 18px !important;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--saas-border);
}

.agent-panel > h2::after {
  content: "";
  width: 34px;
  height: 3px;
  margin-top: 9px;
  display: block;
  border-radius: 2px;
  background: var(--saas-coral);
}

.agent-panel .overflow-hidden.rounded-lg.bg-white,
.agent-panel .overflow-x-auto.border {
  border: 1px solid var(--saas-border) !important;
  border-radius: 7px !important;
  box-shadow: var(--saas-shadow-sm) !important;
}

.agent-panel .rounded-full {
  border-radius: 999px !important;
}

/* Login is deliberately distinct from the application workspace. */
.login-page.login-page {
  min-height: 100dvh !important;
  display: grid !important;
  grid-template-columns: minmax(400px, 42%) minmax(560px, 58%) !important;
  overflow: auto !important;
  background: var(--saas-page) !important;
  color: var(--saas-text) !important;
}

.login-page .brand-panel {
  min-height: 100dvh !important;
  padding: 48px 54px 44px !important;
  gap: 34px !important;
  border: 0 !important;
  background: var(--saas-sidebar) !important;
  color: var(--saas-sidebar-text) !important;
}

.login-page .brand-copy {
  max-width: 560px !important;
}

.login-page .eyebrow {
  min-height: 26px !important;
  padding-left: 12px !important;
  border-left: 3px solid var(--saas-coral) !important;
  color: #7dd4a8 !important;
  font-size: 12px !important;
  font-weight: 780 !important;
}

.login-page h1 {
  max-width: 560px !important;
  margin-top: 18px !important;
  color: #ffffff !important;
  font-size: 46px !important;
  line-height: 1.12 !important;
  font-weight: 820 !important;
}

.login-page .brand-copy p {
  max-width: 430px !important;
  margin-top: 16px !important;
  color: #adbbb2 !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

.login-page .field-visual {
  width: 100% !important;
  max-width: 640px !important;
  height: min(46vh, 460px) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 8px !important;
  background-position: center 30% !important;
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.24) !important;
}

.login-page .field-visual::after {
  border: 8px solid rgba(255, 255, 255, 0.13) !important;
}

.login-page .auth-panel {
  min-height: 100dvh !important;
  padding: 34px clamp(28px, 5vw, 78px) !important;
  align-items: center !important;
  background: var(--saas-page) !important;
}

.login-page .auth-stack {
  width: min(100%, 680px) !important;
  gap: 18px !important;
}

.login-page .auth-card,
.login-page .pool-summary {
  width: 100% !important;
  max-width: none !important;
  padding: 28px !important;
  border: 1px solid var(--saas-border) !important;
  border-radius: 8px !important;
  background: var(--saas-surface) !important;
  color: var(--saas-text) !important;
  box-shadow: var(--saas-shadow-sm) !important;
}

.login-page .auth-head {
  margin-bottom: 20px !important;
}

.login-page .kicker {
  color: var(--saas-brand) !important;
  font-size: 11px !important;
}

.login-page h2 {
  color: var(--saas-text) !important;
  font-size: 25px !important;
}

.login-page .status-chip {
  min-width: 72px !important;
  height: 28px !important;
  border: 1px solid #b9ddca !important;
  border-radius: 999px !important;
  background: var(--saas-brand-soft) !important;
  color: var(--saas-brand) !important;
}

.login-page .tabs {
  padding: 3px !important;
  border: 1px solid var(--saas-border) !important;
  border-radius: 7px !important;
  background: var(--saas-surface-soft) !important;
}

.login-page .tab {
  height: 38px !important;
  border-radius: 5px !important;
  color: var(--saas-muted) !important;
}

.login-page .tab.on {
  background: var(--saas-surface) !important;
  color: var(--saas-brand) !important;
  box-shadow: var(--saas-shadow-sm) !important;
}

.login-page .field span {
  color: var(--saas-text) !important;
  font-size: 12px !important;
}

.login-page .field input {
  height: 46px !important;
  border: 1px solid var(--saas-border-strong) !important;
  border-radius: 6px !important;
  background: var(--saas-surface) !important;
  color: var(--saas-text) !important;
}

.login-page .field input:focus {
  border-color: var(--saas-brand) !important;
  box-shadow: 0 0 0 3px rgba(22, 117, 82, 0.12) !important;
}

.login-page .submit-btn {
  height: 46px !important;
  border-radius: 6px !important;
  background: var(--saas-brand) !important;
  box-shadow: none !important;
}

.login-page .submit-btn:hover:not(:disabled) {
  background: var(--saas-brand-strong) !important;
  box-shadow: none !important;
  transform: none !important;
}

.login-page .pool-summary-grid {
  border-color: var(--saas-border) !important;
  background: var(--saas-surface-soft) !important;
}

.login-page .summary-item {
  border-color: var(--saas-border) !important;
}

.login-page .summary-item strong,
.login-page .dog-summary-item strong {
  color: var(--saas-text) !important;
}

.login-page .summary-item-primary {
  background: var(--saas-brand-soft) !important;
}

.login-page .dog-summary-item {
  border-color: var(--saas-border) !important;
}

/* Mobile and compact screens */
@media (max-width: 900px) {
  .app-shell.app-shell {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .app-shell .topbar {
    height: 58px !important;
    flex: 0 0 58px !important;
    border-bottom: 1px solid var(--saas-border) !important;
    background: var(--saas-surface) !important;
    color: var(--saas-text) !important;
  }

  .app-shell .topbar-inner {
    height: 58px !important;
    padding: 0 12px !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .app-shell .topbar-inner::before,
  .app-shell .desktop-nav,
  .app-shell .user-btn::after {
    display: none !important;
  }

  .app-shell .topbar-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .app-shell .topbar-right {
    width: auto !important;
    margin-top: 0 !important;
    flex: 0 0 auto !important;
  }

  .app-shell .acct-btn {
    min-height: 40px !important;
    border-color: var(--saas-border) !important;
    background: var(--saas-surface-soft) !important;
    color: var(--saas-text) !important;
  }

  .app-shell .acct-text {
    color: var(--saas-text) !important;
  }

  .app-shell .acct-id {
    background: var(--saas-surface-muted) !important;
    color: var(--saas-muted) !important;
  }

  .app-shell .hamburger,
  .app-shell .user-btn {
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    flex: 0 0 40px !important;
    padding: 4px !important;
    justify-content: center !important;
    border-color: var(--saas-border) !important;
    border-radius: 6px !important;
    background: var(--saas-surface) !important;
    color: var(--saas-text) !important;
  }

  .app-shell .topbar-right .dropdown {
    top: calc(100% + 6px) !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
  }

  .app-shell .mobile-overlay {
    top: 58px !important;
    background: rgba(9, 14, 11, 0.52) !important;
  }

  .app-shell .mobile-menu {
    inset: 58px auto 0 0 !important;
    width: min(300px, 86vw) !important;
    background: var(--saas-surface) !important;
    box-shadow: var(--saas-shadow-md) !important;
  }

  .app-shell .m-label {
    color: var(--saas-muted) !important;
  }

  .app-shell .m-link {
    min-height: 44px;
    border-radius: 6px !important;
    color: var(--saas-text) !important;
  }

  .app-shell .m-link.active {
    background: var(--saas-brand-soft) !important;
    color: var(--saas-brand) !important;
    box-shadow: inset 3px 0 0 var(--saas-coral);
  }

  .app-shell .main {
    flex: 1 1 auto !important;
    padding: 18px 14px 28px !important;
  }

  .app-shell .bottombar {
    flex: 0 0 auto !important;
  }

  .login-page.login-page {
    min-height: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .login-page .brand-panel {
    min-height: 164px !important;
    height: 164px !important;
    padding: 24px 20px !important;
    border-bottom: 3px solid var(--saas-coral) !important;
  }

  .login-page h1 {
    margin-top: 10px !important;
    font-size: 29px !important;
  }

  .login-page .brand-copy p {
    margin-top: 8px !important;
    font-size: 13px !important;
  }

  .login-page .field-visual {
    display: none !important;
  }

  .login-page .auth-panel {
    min-height: 0 !important;
    padding: 16px 14px 26px !important;
    align-items: flex-start !important;
  }

  .login-page .auth-card,
  .login-page .pool-summary {
    padding: 20px !important;
  }
}

@media (max-width: 640px) {
  .main h2 {
    font-size: 20px !important;
  }

  .main .grid.sm\:grid-cols-4,
  .main .grid.lg\:grid-cols-4,
  .main .grid.xl\:grid-cols-7 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .main .flex.flex-wrap.items-center.justify-between,
  .main .flex.flex-col.gap-3.lg\:flex-row {
    align-items: stretch !important;
  }

  .agent-panel .h-8.w-64,
  .agent-panel select,
  .f-page .f-search {
    width: 100% !important;
  }

  .login-page .pool-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .login-page .summary-item:nth-child(2) {
    border-right: 0 !important;
  }

  .login-page .summary-item:nth-child(-n + 2) {
    border-bottom: 1px solid var(--saas-border) !important;
  }

  .login-page .dog-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* Admin-only GID blacklist tool */
.gid-blacklist-panel {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--saas-border);
  border-radius: 7px;
  background: var(--saas-surface);
  color: var(--saas-text);
  box-shadow: var(--saas-shadow-sm);
}

.gid-blacklist-head,
.gid-blacklist-head-actions,
.gid-blacklist-inline,
.gid-blacklist-batch-actions,
.gid-blacklist-item {
  display: flex;
  align-items: center;
}

.gid-blacklist-head {
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--saas-border);
}

.gid-blacklist-head h3 {
  margin: 0;
  color: var(--saas-text);
  font-size: 15px;
  font-weight: 720;
}

.gid-blacklist-head p {
  margin: 4px 0 0;
  color: var(--saas-muted);
  font-size: 12px;
}

.gid-blacklist-head-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.gid-blacklist-total {
  min-height: 32px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--saas-surface-soft);
  color: var(--saas-muted);
  font-size: 12px;
}

.gid-blacklist-total strong {
  margin: 0 3px;
  color: var(--saas-text);
}

.gid-blacklist-editor {
  padding: 16px 0;
  display: grid;
  grid-template-columns: minmax(240px, 0.72fr) minmax(320px, 1.28fr);
  gap: 18px;
  border-bottom: 1px solid var(--saas-border);
}

.gid-blacklist-single,
.gid-blacklist-batch {
  min-width: 0;
}

.gid-blacklist-single label,
.gid-blacklist-batch label {
  margin-bottom: 7px;
  display: block;
  color: var(--saas-muted);
  font-size: 12px;
  font-weight: 700;
}

.gid-blacklist-inline {
  gap: 8px;
}

.gid-blacklist-panel input,
.gid-blacklist-panel textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--saas-border-strong);
  border-radius: 6px;
  background: var(--saas-surface);
  color: var(--saas-text);
  outline: none;
}

.gid-blacklist-panel input {
  height: 40px;
  padding: 0 11px;
}

.gid-blacklist-panel textarea {
  min-height: 112px;
  padding: 10px 11px;
  resize: vertical;
  line-height: 1.55;
}

.gid-blacklist-panel input:focus,
.gid-blacklist-panel textarea:focus {
  border-color: var(--saas-brand);
  box-shadow: 0 0 0 3px rgba(22, 117, 82, 0.12);
}

.gid-blacklist-primary,
.gid-blacklist-secondary,
.gid-blacklist-danger,
.gid-blacklist-icon-button {
  min-height: 34px;
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  font-weight: 680;
  cursor: pointer;
}

.gid-blacklist-primary {
  flex: 0 0 auto;
  padding: 0 14px;
  border: 1px solid var(--saas-brand);
  background: var(--saas-brand);
  color: #ffffff;
}

.gid-blacklist-primary:hover {
  background: var(--saas-brand-strong);
}

.gid-blacklist-secondary,
.gid-blacklist-danger {
  padding: 0 11px;
  background: var(--saas-surface);
}

.gid-blacklist-secondary {
  border: 1px solid var(--saas-border-strong);
  color: var(--saas-text);
}

.gid-blacklist-danger {
  border: 1px solid #e7b7bc;
  color: var(--saas-danger);
}

.gid-blacklist-danger:hover {
  background: var(--saas-danger-soft);
}

.gid-blacklist-panel[data-busy="1"] button {
  cursor: wait;
  opacity: 0.58;
}

.gid-blacklist-batch-actions {
  min-height: 38px;
  margin-top: 8px;
  justify-content: space-between;
  gap: 12px;
}

.gid-blacklist-status {
  min-width: 0;
  color: var(--saas-muted);
  font-size: 12px;
}

.gid-blacklist-status[data-type="success"] { color: var(--saas-brand); }
.gid-blacklist-status[data-type="error"] { color: var(--saas-danger); }

.gid-blacklist-list {
  max-height: 224px;
  padding-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  overflow: auto;
}

.gid-blacklist-item {
  min-width: 0;
  min-height: 38px;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 6px 5px 10px;
  border: 1px solid var(--saas-border);
  border-radius: 6px;
  background: var(--saas-surface-soft);
}

.gid-blacklist-item code {
  min-width: 0;
  overflow: hidden;
  color: var(--saas-text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gid-blacklist-icon-button {
  width: 30px;
  min-height: 28px;
  flex: 0 0 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--saas-muted);
}

.gid-blacklist-icon-button:hover {
  background: var(--saas-danger-soft);
  color: var(--saas-danger);
}

.gid-blacklist-empty {
  grid-column: 1 / -1;
  min-height: 64px;
  display: grid;
  place-items: center;
  color: var(--saas-muted);
  font-size: 12px;
}

@media (max-width: 900px) {
  .gid-blacklist-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .gid-blacklist-head-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .gid-blacklist-editor {
    grid-template-columns: 1fr;
  }

  .gid-blacklist-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .gid-blacklist-panel {
    padding: 14px;
  }

  .gid-blacklist-list {
    grid-template-columns: 1fr;
  }
}

/* Standalone admin blacklist page */
.app-shell .desktop-nav a.gid-blacklist-nav-link {
  position: relative;
  width: 100%;
  min-height: 42px;
  padding: 10px 12px !important;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--saas-sidebar-muted) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}

.app-shell .desktop-nav a.gid-blacklist-nav-link:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}

.app-shell .desktop-nav a.gid-blacklist-nav-link[aria-current="page"] {
  background: #edf7f1 !important;
  color: #0d5d40 !important;
  box-shadow: inset 3px 0 0 var(--saas-coral) !important;
}

.app-shell .main.gid-blacklist-route > :not([data-gid-blacklist-page]) {
  display: none !important;
}

.gid-blacklist-page {
  width: 100%;
  color: var(--saas-text);
}

.gid-blacklist-page-head,
.gid-blacklist-page-actions,
.gid-blacklist-toolbar,
.gid-blacklist-inline,
.gid-blacklist-toolbar-actions,
.gid-blacklist-footer,
.gid-blacklist-pagination,
.gid-blacklist-modal-head,
.gid-blacklist-modal-actions {
  display: flex;
  align-items: center;
}

.gid-blacklist-page-head {
  min-height: 62px;
  justify-content: space-between;
  gap: 18px;
}

.gid-blacklist-page-head h2 {
  margin: 0;
  color: var(--saas-text);
  font-size: 19px;
  font-weight: 740;
}

.gid-blacklist-page-head p {
  margin: 5px 0 0;
  color: var(--saas-muted);
  font-size: 12px;
}

.gid-blacklist-page-actions,
.gid-blacklist-toolbar-actions,
.gid-blacklist-pagination,
.gid-blacklist-modal-actions {
  gap: 8px;
}

.gid-blacklist-page-actions button,
.gid-blacklist-modal-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.gid-blacklist-stats {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--saas-border);
  border-radius: 7px;
  background: var(--saas-surface);
  box-shadow: var(--saas-shadow-sm);
}

.gid-blacklist-stats > div {
  min-height: 82px;
  padding: 15px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--saas-border);
}

.gid-blacklist-stats > div:last-child {
  border-right: 0;
}

.gid-blacklist-stats span {
  color: var(--saas-muted);
  font-size: 12px;
}

.gid-blacklist-stats strong {
  margin-top: 5px;
  color: var(--saas-text);
  font-size: 22px;
  line-height: 1;
}

.gid-blacklist-toolbar {
  margin-top: 14px;
  padding: 14px;
  flex-wrap: wrap;
  gap: 12px;
  border: 1px solid var(--saas-border);
  border-radius: 7px 7px 0 0;
  background: var(--saas-surface);
}

.gid-blacklist-single {
  flex: 1 1 310px;
}

.gid-blacklist-search {
  flex: 1 1 250px;
}

.gid-blacklist-page-size {
  flex: 0 0 106px;
}

.gid-blacklist-page .gid-blacklist-single > label,
.gid-blacklist-search > span:first-child,
.gid-blacklist-page-size > span:first-child {
  margin-bottom: 6px;
  display: block;
  color: var(--saas-muted);
  font-size: 11px;
  font-weight: 680;
}

.gid-blacklist-inline {
  gap: 8px;
}

.gid-blacklist-page input,
.gid-blacklist-page select,
.gid-blacklist-modal textarea {
  border: 1px solid var(--saas-border-strong);
  border-radius: 6px;
  background: var(--saas-surface);
  color: var(--saas-text);
  outline: none;
  font: inherit;
}

.gid-blacklist-page input[type="text"],
.gid-blacklist-page input:not([type]),
.gid-blacklist-page select,
.gid-blacklist-page #gid-blacklist-single-input,
.gid-blacklist-page #gid-blacklist-search-input {
  height: 38px;
}

.gid-blacklist-page #gid-blacklist-single-input {
  width: 100%;
  min-width: 0;
  padding: 0 11px;
}

.gid-blacklist-search-control {
  position: relative;
  display: block;
}

.gid-blacklist-search-control > span {
  position: absolute;
  top: 50%;
  left: 11px;
  z-index: 1;
  color: var(--saas-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.gid-blacklist-page #gid-blacklist-search-input {
  width: 100%;
  padding: 0 11px 0 34px;
}

.gid-blacklist-page select {
  width: 100%;
  padding: 0 9px;
}

.gid-blacklist-page input:focus,
.gid-blacklist-page select:focus,
.gid-blacklist-modal textarea:focus {
  border-color: var(--saas-brand);
  box-shadow: 0 0 0 3px rgba(22, 117, 82, 0.12);
}

.gid-blacklist-page input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--saas-brand);
}

.gid-blacklist-toolbar-actions {
  min-height: 61px;
  margin-left: auto;
  align-items: flex-end;
}

.gid-blacklist-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-right: 1px solid var(--saas-border);
  border-bottom: 1px solid var(--saas-border);
  border-left: 1px solid var(--saas-border);
  background: var(--saas-surface);
}

.gid-blacklist-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  table-layout: fixed;
}

.gid-blacklist-table th,
.gid-blacklist-table td {
  min-height: 48px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--saas-border);
  text-align: left;
  vertical-align: middle;
}

.gid-blacklist-table th {
  background: var(--saas-surface-soft);
  color: var(--saas-muted);
  font-size: 11px;
  font-weight: 720;
}

.gid-blacklist-table td {
  color: var(--saas-text);
  font-size: 12px;
}

.gid-blacklist-table tr:last-child td {
  border-bottom: 0;
}

.gid-blacklist-table th:first-child,
.gid-blacklist-table td:first-child {
  width: 48px;
  text-align: center;
}

.gid-blacklist-table th:nth-child(2),
.gid-blacklist-table td:nth-child(2) {
  width: 42%;
}

.gid-blacklist-table th:last-child,
.gid-blacklist-table td:last-child {
  width: 84px;
  text-align: right;
}

.gid-blacklist-code {
  color: var(--saas-text);
  font-size: 12px;
}

.gid-blacklist-blocked-badge {
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--saas-danger-soft);
  color: var(--saas-danger);
  font-size: 11px;
  font-weight: 680;
}

.gid-blacklist-table-empty {
  height: 160px;
  color: var(--saas-muted) !important;
  text-align: center !important;
}

.gid-blacklist-footer {
  min-height: 58px;
  padding: 10px 14px;
  justify-content: space-between;
  gap: 14px;
  border-right: 1px solid var(--saas-border);
  border-bottom: 1px solid var(--saas-border);
  border-left: 1px solid var(--saas-border);
  border-radius: 0 0 7px 7px;
  background: var(--saas-surface);
}

.gid-blacklist-result-count,
.gid-blacklist-page-label {
  color: var(--saas-muted);
  font-size: 11px;
  white-space: nowrap;
}

.gid-blacklist-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  padding: 20px;
  display: grid;
  place-items: center;
  background: rgba(9, 18, 13, 0.48);
}

.gid-blacklist-modal {
  width: min(560px, 100%);
  padding: 20px;
  border: 1px solid var(--saas-border);
  border-radius: 7px;
  background: var(--saas-surface);
  color: var(--saas-text);
  box-shadow: var(--saas-shadow-md);
}

.gid-blacklist-modal-head {
  justify-content: space-between;
  gap: 14px;
}

.gid-blacklist-modal h3 {
  margin: 0;
  font-size: 16px;
}

.gid-blacklist-modal p {
  margin: 4px 0 0;
  color: var(--saas-muted);
  font-size: 12px;
}

.gid-blacklist-modal textarea {
  width: 100%;
  min-height: 220px;
  margin-top: 16px;
  padding: 11px;
  resize: vertical;
  line-height: 1.55;
}

.gid-blacklist-modal-status {
  min-height: 28px;
  padding-top: 8px;
  color: var(--saas-muted);
  font-size: 12px;
}

.gid-blacklist-modal-status[data-type="error"] {
  color: var(--saas-danger);
}

.gid-blacklist-modal-actions {
  justify-content: flex-end;
}

.gid-blacklist-modal-overlay[data-busy="1"] button,
.gid-blacklist-page[data-busy="1"] button {
  cursor: wait;
  opacity: 0.58;
}

@media (max-width: 900px) {
  .gid-blacklist-toolbar-actions {
    width: 100%;
    min-height: 0;
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  .gid-blacklist-page-head,
  .gid-blacklist-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .gid-blacklist-page-actions,
  .gid-blacklist-page-actions button {
    flex: 1 1 0;
  }

  .gid-blacklist-stats {
    grid-template-columns: 1fr;
  }

  .gid-blacklist-stats > div {
    min-height: 68px;
    border-right: 0;
    border-bottom: 1px solid var(--saas-border);
  }

  .gid-blacklist-stats > div:last-child {
    border-bottom: 0;
  }

  .gid-blacklist-single,
  .gid-blacklist-search,
  .gid-blacklist-page-size {
    flex-basis: 100%;
  }

  .gid-blacklist-toolbar-actions button,
  .gid-blacklist-pagination {
    flex: 1 1 0;
  }

  .gid-blacklist-pagination {
    width: 100%;
    flex-wrap: wrap;
  }

  .gid-blacklist-modal-overlay {
    padding: 12px;
  }

  .gid-blacklist-modal {
    padding: 16px;
  }
}