/* ==========================================================================
   GEO Console — shadcn/ui dashboard system
   Presentation only. Light + dark. No framework dependency.
   ========================================================================== */

:root {
  --background: #fafafa;
  --foreground: #09090b;
  --card: #ffffff;
  --card-foreground: #09090b;
  --popover: #ffffff;
  --popover-foreground: #09090b;
  --primary: #18181b;
  --primary-foreground: #fafafa;
  --secondary: #f4f4f5;
  --secondary-foreground: #18181b;
  --muted: #f4f4f5;
  --muted-foreground: #71717a;
  --accent: #f4f4f5;
  --accent-foreground: #18181b;
  --destructive: #dc2626;
  --destructive-foreground: #fafafa;
  --success: #15803d;
  --success-soft: #f0fdf4;
  --warning: #b45309;
  --warning-soft: #fffbeb;
  --info: #2563eb;
  --info-soft: #eff6ff;
  --border: #e4e4e7;
  --border-strong: #d4d4d8;
  --input: #e4e4e7;
  --ring: rgba(24, 24, 27, .14);
  --sidebar: #ffffff;
  --sidebar-foreground: #09090b;
  --sidebar-muted: #71717a;
  --sidebar-accent: #f4f4f5;
  --sidebar-accent-foreground: #18181b;
  --sidebar-border: #e4e4e7;
  --sidebar-primary: #18181b;
  --sidebar-primary-foreground: #fafafa;
  --chart-1: #18181b;
  --chart-2: #71717a;
  --chart-3: #a1a1aa;
  --chart-4: #d4d4d8;
  --chart-5: #e4e4e7;

  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --sidebar-width: 256px;
  --sidebar-width-collapsed: 64px;
  --topbar-height: 60px;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: "SFMono-Regular", "JetBrains Mono", "Cascadia Code", Consolas, monospace;
  --shadow-xs: 0 1px 2px rgba(9, 9, 11, .04);
  --shadow-sm: 0 1px 3px rgba(9, 9, 11, .06), 0 1px 2px rgba(9, 9, 11, .04);
  --shadow-md: 0 12px 32px rgba(9, 9, 11, .10), 0 2px 8px rgba(9, 9, 11, .05);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur: 150ms;
}

html[data-theme="dark"] {
  --background: #09090b;
  --foreground: #fafafa;
  --card: #0d0d10;
  --card-foreground: #fafafa;
  --popover: #131316;
  --popover-foreground: #fafafa;
  --primary: #fafafa;
  --primary-foreground: #18181b;
  --secondary: #1c1c20;
  --secondary-foreground: #fafafa;
  --muted: #1c1c20;
  --muted-foreground: #a1a1aa;
  --accent: #1c1c20;
  --accent-foreground: #fafafa;
  --destructive: #f87171;
  --destructive-foreground: #18181b;
  --success: #4ade80;
  --success-soft: rgba(34, 197, 94, .12);
  --warning: #fbbf24;
  --warning-soft: rgba(245, 158, 11, .12);
  --info: #60a5fa;
  --info-soft: rgba(59, 130, 246, .12);
  --border: #27272a;
  --border-strong: #3f3f46;
  --input: #27272a;
  --ring: rgba(250, 250, 250, .16);
  --sidebar: #0d0d10;
  --sidebar-foreground: #fafafa;
  --sidebar-muted: #a1a1aa;
  --sidebar-accent: #1c1c20;
  --sidebar-accent-foreground: #fafafa;
  --sidebar-border: #27272a;
  --sidebar-primary: #fafafa;
  --sidebar-primary-foreground: #18181b;
  --chart-1: #fafafa;
  --chart-2: #a1a1aa;
  --chart-3: #71717a;
  --chart-4: #52525b;
  --chart-5: #3f3f46;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
  --shadow-md: 0 18px 48px rgba(0, 0, 0, .55);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html {
  background: var(--background);
  color-scheme: light;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html[data-theme="dark"] { color-scheme: dark; }
body.app-page,
body.auth-page {
  margin: 0;
  min-height: 100vh;
  background: var(--background) !important;
  color: var(--foreground) !important;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
}
body.app-page *,
body.app-page *::before,
body.app-page *::after,
body.auth-page *,
body.auth-page *::before,
body.auth-page *::after { box-sizing: border-box; }
body.app-page a,
body.auth-page a { color: inherit; }
body.app-page ::selection,
body.auth-page ::selection { background: var(--primary); color: var(--primary-foreground); }
body.app-page ::-webkit-scrollbar { width: 8px; height: 8px; }
body.app-page ::-webkit-scrollbar-track { background: transparent; }
body.app-page ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
body.app-page ::-webkit-scrollbar-thumb:hover { background: var(--muted-foreground); }

.geo-icon { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
.ui-icon-tile {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--muted);
  color: var(--foreground);
}
.ui-icon-tile.is-plain { border: 0; background: transparent; }
.ui-icon-tile.is-primary { background: var(--primary); color: var(--primary-foreground); border-color: transparent; }
.ui-icon-tile.is-success { color: var(--success); background: var(--success-soft); border-color: transparent; }
.ui-icon-tile.is-warning { color: var(--warning); background: var(--warning-soft); border-color: transparent; }
.ui-icon-tile.is-info { color: var(--info); background: var(--info-soft); border-color: transparent; }
.ui-icon-tile.is-danger { color: var(--destructive); background: color-mix(in srgb, var(--destructive) 10%, transparent); border-color: transparent; }

/* --------------------------------------------------------------------------
   App shell
   -------------------------------------------------------------------------- */
.geo-app { min-height: 100vh; background: var(--background); }
.geo-main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin-left: var(--sidebar-width);
  transition: margin-left var(--dur) var(--ease);
}

/* Sidebar */
.geo-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  width: var(--sidebar-width);
  background: var(--sidebar);
  border-right: 1px solid var(--sidebar-border);
  transition: width var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.geo-sidebar-head {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--topbar-height);
  padding: 0 18px;
  border-bottom: 1px solid var(--sidebar-border);
  flex: 0 0 auto;
}
.geo-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--sidebar-foreground);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
}
.geo-brand-mark {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: var(--radius);
  background: var(--sidebar-primary);
  color: var(--sidebar-primary-foreground);
}
.geo-brand-mark .geo-icon { width: 17px; height: 17px; }
.geo-brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.geo-brand-text strong { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.geo-brand-text small { color: var(--sidebar-muted); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.geo-sidebar-toggle { margin-left: auto; }

.geo-sidebar-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 10px 12px; }
.geo-workspace {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  margin: 0 0 14px;
  padding: 8px 10px;
  border: 1px solid var(--sidebar-border);
  border-radius: var(--radius);
  background: var(--background);
  text-decoration: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.geo-workspace:hover { background: var(--sidebar-accent); }
.geo-workspace-mark {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 7px;
  background: var(--sidebar-accent);
  color: var(--sidebar-foreground);
  font-size: 12px;
  font-weight: 650;
}
.geo-workspace-copy { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.geo-workspace-copy strong { overflow: hidden; color: var(--sidebar-foreground); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.geo-workspace-copy small { color: var(--sidebar-muted); font-size: 11.5px; }
.geo-workspace > .geo-icon { margin-left: auto; color: var(--sidebar-muted); }

.geo-sidebar-label {
  padding: 10px 10px 6px;
  color: var(--sidebar-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.geo-sidebar-nav { display: grid; gap: 1px; }
.geo-nav-item,
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  color: var(--sidebar-foreground);
  font-size: 13.5px;
  font-weight: 450;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.geo-nav-item:hover,
.sidebar-link:hover { background: var(--sidebar-accent); }
.geo-nav-item.active,
.sidebar-link.active {
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
  font-weight: 600;
}
.geo-nav-icon,
.sidebar-icon {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: var(--sidebar-muted);
}
.geo-nav-item.active .geo-nav-icon,
.sidebar-link.active .sidebar-icon { color: currentColor; }
.geo-nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.geo-nav-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 10.5px;
  font-weight: 600;
}
.geo-nav-item .geo-nav-badge { background: var(--sidebar-accent); color: var(--sidebar-foreground); }

.geo-group { margin-bottom: 6px; }
.geo-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 28px;
  padding: 8px 10px 4px;
  border: 0;
  background: transparent;
  color: var(--sidebar-muted);
  font: inherit;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}
.geo-group-header .geo-icon { transition: transform var(--dur) var(--ease); }
.geo-group.is-collapsed .geo-group-header .geo-icon { transform: rotate(-90deg); }
.geo-group-items { display: grid; gap: 1px; }
.geo-group.is-collapsed .geo-group-items { display: none; }

.geo-sidebar-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  margin: 10px 0 6px;
  padding: 0 10px;
  border: 1px solid var(--sidebar-border);
  border-radius: var(--radius-sm);
  background: var(--background);
  color: var(--sidebar-foreground);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.geo-sidebar-cta:hover { background: var(--sidebar-accent); border-color: var(--border-strong); }
.geo-sidebar-footer { flex: 0 0 auto; padding: 10px; border-top: 1px solid var(--sidebar-border); }
.geo-account {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 4px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--dur) var(--ease);
}
.geo-account:hover { background: var(--sidebar-accent); }
.geo-account-main {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 2px;
  text-decoration: none;
}
.geo-account-logout {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 5px;
  color: var(--sidebar-muted);
  text-decoration: none;
}
.geo-account-logout:hover { background: var(--background); color: var(--sidebar-foreground); }
.geo-avatar {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  background: var(--sidebar-accent);
  color: var(--sidebar-foreground);
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
}
.geo-account-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.geo-account-copy strong { overflow: hidden; color: var(--sidebar-foreground); font-size: 12.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.geo-account-copy small { color: var(--sidebar-muted); font-size: 11px; }
.geo-account-logout { margin-left: auto; color: var(--sidebar-muted); }
.geo-account-logout:hover { color: var(--sidebar-foreground); }

/* Collapsed sidebar */
body.sidebar-collapsed .geo-sidebar { width: var(--sidebar-width-collapsed); }
body.sidebar-collapsed .geo-main { margin-left: var(--sidebar-width-collapsed); }
body.sidebar-collapsed .geo-brand-text,
body.sidebar-collapsed .geo-workspace-copy,
body.sidebar-collapsed .geo-workspace > .geo-icon,
body.sidebar-collapsed .geo-sidebar-label,
body.sidebar-collapsed .geo-nav-label,
body.sidebar-collapsed .geo-nav-badge,
body.sidebar-collapsed .geo-group-header span,
body.sidebar-collapsed .geo-account-copy,
body.sidebar-collapsed .geo-account-logout,
body.sidebar-collapsed .geo-sidebar-cta span { display: none; }
body.sidebar-collapsed .geo-sidebar-head { justify-content: center; padding: 0; }
body.sidebar-collapsed .geo-sidebar-toggle { display: none; }
body.sidebar-collapsed .geo-sidebar-body { padding: 12px 8px; }
body.sidebar-collapsed .geo-workspace { justify-content: center; padding: 6px; }
body.sidebar-collapsed .geo-nav-item,
body.sidebar-collapsed .sidebar-link { justify-content: center; padding: 0; }
body.sidebar-collapsed .geo-group-header { justify-content: center; padding: 8px 0 4px; }
body.sidebar-collapsed .geo-group-header .geo-icon { display: none; }
body.sidebar-collapsed .geo-sidebar-footer { padding: 8px; }
body.sidebar-collapsed .geo-account { justify-content: center; padding: 4px; }
body.sidebar-collapsed .geo-sidebar-cta { padding: 0; }

/* Topbar */
.geo-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--topbar-height);
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--background) 86%, transparent);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  flex: 0 0 auto;
}
.geo-topbar-left,
.geo-topbar-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
.geo-topbar-sep { width: 1px; height: 20px; margin: 0 4px; background: var(--border); }
.geo-breadcrumb { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--muted-foreground); font-size: 13px; }
.geo-breadcrumb a { color: inherit; text-decoration: none; }
.geo-breadcrumb a:hover { color: var(--foreground); }
.geo-breadcrumb .geo-icon { width: 14px; height: 14px; }
.geo-breadcrumb-current { overflow: hidden; color: var(--foreground); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.geo-icon-button {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.geo-icon-button:hover { background: var(--muted); color: var(--foreground); }
.geo-icon-button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring); }
.geo-search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 236px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--background);
  color: var(--muted-foreground);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.geo-search-trigger:hover { border-color: var(--border-strong); background: var(--card); }
.geo-search-trigger span { flex: 1; text-align: left; }
.geo-kbd {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 5px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--muted);
  color: var(--muted-foreground);
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1;
}
.geo-user-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 6px 0 4px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.geo-user-trigger:hover { background: var(--muted); }
.geo-user-trigger .geo-avatar { width: 26px; height: 26px; flex-basis: 26px; font-size: 10px; background: var(--primary); color: var(--primary-foreground); }
.geo-user-trigger .geo-icon { color: var(--muted-foreground); }
.geo-dropdown {
  position: absolute;
  top: calc(var(--topbar-height) - 6px);
  right: 20px;
  z-index: 60;
  min-width: 210px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--popover);
  color: var(--popover-foreground);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.geo-dropdown.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.geo-dropdown-label { padding: 7px 9px 5px; color: var(--muted-foreground); font-size: 11px; font-weight: 500; }
.geo-dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 32px;
  padding: 0 9px;
  border-radius: var(--radius-sm);
  color: var(--foreground);
  font-size: 13px;
  text-decoration: none;
}
.geo-dropdown-item:hover { background: var(--accent); }
.geo-dropdown-item.is-danger { color: var(--destructive); }
.geo-dropdown-sep { height: 1px; margin: 5px -6px; background: var(--border); }

/* Content */
.geo-content {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 28px 28px 56px;
  flex: 1 1 auto;
  animation: geo-enter .28s var(--ease) both;
}
@keyframes geo-enter {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
.geo-content > * + * { margin-top: 20px; }
.geo-content > .alert + * { margin-top: 16px; }

/* --------------------------------------------------------------------------
   Page headers
   -------------------------------------------------------------------------- */
.ui-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin: 0 0 22px;
  padding: 0;
  position: static;
}
.page-header,
.admin-page-header {
  display: block;
  margin: 0 0 22px;
  padding: 0;
  position: static;
}
.page-header > div[style*="display:flex"],
.admin-page-header > div[style*="display:flex"] { margin-bottom: 0; }
.ui-page-header::after,
.page-header::after,
.admin-page-header::after { display: none !important; content: none !important; }
.ui-page-heading,
.page-header > div:first-child,
.admin-page-header > div:first-child { min-width: 0; }
.ui-page-title,
.page-header h1,
.admin-page-header h1 {
  margin: 0;
  color: var(--foreground) !important;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.2;
}
.ui-page-desc,
.page-header p,
.admin-page-header p {
  margin: 6px 0 0;
  color: var(--muted-foreground) !important;
  font-size: 13.5px;
  line-height: 1.55;
}
.ui-page-actions,
.page-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ui-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted-foreground);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.ui-section-title { margin: 0; color: var(--foreground); font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.ui-section-desc { margin: 4px 0 0; color: var(--muted-foreground); font-size: 13px; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.ui-card,
.content-card,
.dashboard-card,
.admin-card,
.knowledge-card,
.pub-card,
.dash-chart-wrap,
.stat-card,
.ui-kpi {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xs);
  color: var(--card-foreground);
}
.ui-card { overflow: hidden; }
.ui-card-header,
.ui-card-body,
.ui-card-footer,
.admin-card-body,
.dash-chart-header,
.dash-chart-body { padding: 18px 20px; }
.ui-card-header,
.dash-chart-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--border);
}
.ui-card-title { margin: 0; color: var(--foreground); font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.ui-card-desc { margin: 3px 0 0; color: var(--muted-foreground); font-size: 12.5px; }
.ui-card-body > :first-child,
.admin-card-body > :first-child { margin-top: 0; }
.ui-card-body > :last-child,
.admin-card-body > :last-child { margin-bottom: 0; }
.ui-card-footer { border-top: 1px solid var(--border); background: color-mix(in srgb, var(--muted) 40%, transparent); }
.ui-card-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ui-card-hover { transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.ui-card-hover:hover { border-color: var(--border-strong) !important; box-shadow: var(--shadow-sm); }
.admin-card-body { color: var(--foreground); }
.admin-card-body > h2,
.admin-card-body > h3,
.admin-card-body h3 { color: var(--foreground) !important; }
.admin-card-accent { display: none !important; }
.ui-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ui-card-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

/* Legacy dashboard-card direct padding, without inner body */
.dashboard-card { padding: 18px 20px; margin-bottom: 16px; }
.dashboard-card:last-child { margin-bottom: 0; }
.dashboard-card > h3:first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   Stats
   -------------------------------------------------------------------------- */
.ui-stats,
.admin-stats {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px !important;
  margin: 0 !important;
  align-items: stretch;
}
.ui-stat,
.admin-stat-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  min-height: 104px;
  padding: 18px;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xs);
}
.ui-stat-main { min-width: 0; }
.ui-stat-label,
.stat-label,
.admin-stat-label {
  margin: 0;
  color: var(--muted-foreground) !important;
  font-size: 12.5px !important;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.ui-stat-value,
.stat-number,
.admin-stat-num {
  margin-top: 8px;
  color: var(--foreground) !important;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.ui-stat-meta { margin-top: 6px; display: flex; align-items: center; gap: 5px; color: var(--muted-foreground); font-size: 11.5px; }
.ui-stat-meta .geo-icon { width: 13px; height: 13px; }
.ui-stat-meta.is-up { color: var(--success); }
.ui-stat-meta.is-down { color: var(--destructive); }
.ui-stat .ui-icon-tile { margin-top: 2px; }
.admin-stat-card { align-items: center; justify-content: flex-start; gap: 14px; }
.admin-stat-card::before,
.admin-stat-card::after,
.admin-stat-icon::after { display: none !important; content: none !important; }
.admin-stat-icon {
  display: inline-grid !important;
  place-items: center;
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--muted) !important;
  color: var(--foreground) !important;
  font-size: 15px !important;
  box-shadow: none !important;
}
.admin-stat-card:nth-child(n) .admin-stat-icon { background: var(--muted) !important; color: var(--foreground) !important; }
.stat-body { min-width: 0; }
.stat-number,
.admin-stat-num { font-size: 22px !important; margin-top: 0; }
.admin-stat-label { margin-top: 4px; }
.admin-stats > .admin-stat-card:first-child { background: var(--card) !important; border-color: var(--border) !important; }
.admin-stats > .admin-stat-card:first-child .stat-number,
.admin-stats > .admin-stat-card:first-child .admin-stat-num { font-size: 22px !important; }
.ui-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-stats-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.ui-btn,
.btn,
.admin-btn,
input[type="submit"].btn,
button.auth-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 1px rgba(9, 9, 11, .03);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ui-btn:hover,
.btn:hover,
.admin-btn:hover { background: var(--muted); }
.ui-btn:active,
.btn:active { transform: translateY(.5px); }
.ui-btn:focus-visible,
.btn:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring); }
.ui-btn .geo-icon,
.btn .geo-icon { width: 15px; height: 15px; }
.ui-btn-primary,
.btn-primary,
.admin-btn-primary,
.admin-btn-accent {
  border-color: transparent !important;
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  box-shadow: 0 1px 2px rgba(9, 9, 11, .12);
}
.ui-btn-primary:hover,
.btn-primary:hover,
.admin-btn-primary:hover { opacity: .9; background: var(--primary) !important; }
.ui-btn-secondary,
.btn-outline,
.ui-btn-outline,
.admin-btn {
  border-color: var(--border) !important;
  background: var(--card) !important;
  color: var(--foreground) !important;
  box-shadow: var(--shadow-xs);
}
.ui-btn-secondary:hover,
.btn-outline:hover,
.ui-btn-outline:hover,
.admin-btn:hover { background: var(--muted) !important; }
.ui-btn-ghost,
.btn-ghost,
.ui-btn-ghost:hover { border-color: transparent !important; background: transparent !important; color: var(--muted-foreground) !important; box-shadow: none; }
.ui-btn-ghost:hover { background: var(--muted) !important; color: var(--foreground) !important; }
.ui-btn-destructive,
.btn-danger {
  border-color: transparent !important;
  background: var(--destructive) !important;
  color: var(--destructive-foreground) !important;
}
.ui-btn-success,
.btn-success {
  border-color: transparent !important;
  background: var(--success) !important;
  color: #fff !important;
}
.ui-btn-sm,
.btn-sm,
.admin-btn-sm { min-height: 28px; padding: 0 9px; font-size: 12px; }
.ui-btn-xs { min-height: 24px; padding: 0 7px; font-size: 11px; border-radius: 5px; }
.ui-btn-icon { width: 34px; padding: 0; }
.ui-btn-icon.ui-btn-sm { width: 28px; }
.ui-btn[disabled],
.btn[disabled],
.ui-btn.is-disabled { opacity: .5; pointer-events: none; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
body.app-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.app-page select,
body.app-page textarea,
body.auth-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.auth-page select,
body.auth-page textarea,
.ui-input,
.ui-select,
.ui-textarea {
  width: 100%;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid var(--input) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--background) !important;
  color: var(--foreground) !important;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  box-shadow: 0 1px 1px rgba(9, 9, 11, .02);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
body.app-page textarea,
body.auth-page textarea,
.ui-textarea { min-height: 90px; resize: vertical; }
body.app-page input:not([type="checkbox"]):not([type="radio"]):focus,
body.app-page select:focus,
body.app-page textarea:focus,
body.auth-page input:not([type="checkbox"]):not([type="radio"]):focus,
body.auth-page select:focus,
body.auth-page textarea:focus {
  border-color: var(--foreground) !important;
  box-shadow: 0 0 0 2px var(--ring) !important;
  outline: none;
}
body.app-page input::placeholder,
body.app-page textarea::placeholder { color: var(--muted-foreground); opacity: .8; }
body.app-page form[style*="display:flex"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.app-page form[style*="display:flex"] select,
body.app-page .ui-card-toolbar input:not([type="checkbox"]):not([type="radio"]),
body.app-page .ui-card-toolbar select { width: auto; flex: 0 0 auto; }
body.app-page input[type="checkbox"],
body.app-page input[type="radio"] { accent-color: var(--primary); }
body.app-page label,
body.auth-page label { color: var(--foreground); font-size: 12.5px; font-weight: 500; }
.ui-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.ui-field > label,
.ui-label { display: block; color: var(--foreground); font-size: 12.5px; font-weight: 500; }
.ui-help,
.muted,
.kb-help { color: var(--muted-foreground) !important; font-size: 12px; }
.ui-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.ui-form-grid .is-full { grid-column: 1 / -1; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; margin-bottom: 6px; }
body.app-page .form-group input,
body.app-page .form-group select,
body.app-page .form-group textarea { width: 100%; }
body.app-page label.ui-check,
.ui-check {
  display: inline-flex !important;
  flex: 0 0 auto;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 8px;
  color: var(--foreground);
  font-size: 13px;
  font-weight: 450;
  white-space: nowrap;
  cursor: pointer;
}
.ui-check input { width: 15px; height: 15px; margin: 0; }
.ui-switch { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.ui-switch input { position: absolute; opacity: 0; pointer-events: none; }
.ui-switch-track { width: 34px; height: 20px; border-radius: 999px; background: var(--border-strong); transition: background var(--dur) var(--ease); }
.ui-switch-track::after { content: ""; display: block; width: 16px; height: 16px; margin: 2px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.18); transition: transform var(--dur) var(--ease); }
.ui-switch input:checked + .ui-switch-track { background: var(--primary); }
.ui-switch input:checked + .ui-switch-track::after { transform: translateX(14px); }
.ui-switch input:checked + .ui-switch-track::after { background: var(--primary-foreground); }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.ui-table-wrap,
.admin-table-wrap { width: 100%; overflow-x: auto; }
.ui-table,
.admin-table,
body.app-page table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--foreground);
  font-size: 13px;
}
.ui-table th,
.admin-table th,
body.app-page table thead th {
  padding: 0 16px;
  height: 38px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--muted) 45%, transparent);
  color: var(--muted-foreground) !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.ui-table td,
.admin-table td,
body.app-page table td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--foreground);
  vertical-align: middle;
}
.ui-table tbody tr,
.admin-table tbody tr,
body.app-page table tbody tr { transition: background var(--dur) var(--ease); }
.ui-table tbody tr:hover,
.admin-table tbody tr:hover,
body.app-page table tbody tr:hover { background: color-mix(in srgb, var(--muted) 55%, transparent) !important; }
.ui-table tbody tr:nth-child(even),
.admin-table tbody tr:nth-child(even),
body.app-page table tbody tr:nth-child(even) { background: transparent !important; }
.ui-table tbody tr:last-child td,
.admin-table tbody tr:last-child td,
body.app-page table tbody tr:last-child td { border-bottom: 0; }
.ui-table a,
.admin-table a,
body.app-page table a { color: var(--foreground); font-weight: 500; text-decoration: none; }
.ui-table a:hover,
.admin-table a:hover,
body.app-page table a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ui-table .is-right,
.admin-table .is-right { text-align: right; }
.ui-table .is-center,
.admin-table .is-center { text-align: center; }

/* --------------------------------------------------------------------------
   Badges, alerts, progress, separators
   -------------------------------------------------------------------------- */
.ui-badge,
.badge,
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 21px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.ui-badge .geo-icon { width: 11px; height: 11px; }
.ui-badge-success,
.badge-success { background: var(--success-soft); color: var(--success); }
.ui-badge-warning,
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.ui-badge-danger,
.badge-danger { background: color-mix(in srgb, var(--destructive) 10%, transparent); color: var(--destructive); }
.ui-badge-info,
.badge-info { background: var(--info-soft); color: var(--info); }
.ui-badge-outline { border-color: var(--border); background: transparent; color: var(--muted-foreground); }
.ui-badge-dot::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.ui-alert,
.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--foreground);
  font-size: 13px;
  line-height: 1.55;
}
.ui-alert-success,
.alert-success { border-color: color-mix(in srgb, var(--success) 30%, var(--border)); background: var(--success-soft); color: var(--success); }
.ui-alert-error,
.alert-error,
.alert-danger { border-color: color-mix(in srgb, var(--destructive) 30%, var(--border)); background: color-mix(in srgb, var(--destructive) 8%, var(--card)); color: var(--destructive); }
.ui-alert-warning,
.alert-warning { border-color: color-mix(in srgb, var(--warning) 30%, var(--border)); background: var(--warning-soft); color: var(--warning); }
.ui-alert-info,
.alert-info { border-color: color-mix(in srgb, var(--info) 25%, var(--border)); background: var(--info-soft); color: var(--info); }

.ui-progress { width: 100%; height: 6px; overflow: hidden; border-radius: 999px; background: var(--muted); }
.ui-progress-bar { height: 100%; border-radius: inherit; background: var(--primary); transition: width .35s var(--ease); }
.ui-progress-bar.is-success { background: var(--success); }
.ui-progress-bar.is-warning { background: var(--warning); }
.ui-progress-bar.is-danger { background: var(--destructive); }
.ui-separator { height: 1px; margin: 16px 0; background: var(--border); }

/* --------------------------------------------------------------------------
   Tabs
   -------------------------------------------------------------------------- */
.ui-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--muted);
}
.ui-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted-foreground);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}
.ui-tab:hover { color: var(--foreground); }
.ui-tab.is-active { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-xs); }

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */
.ui-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 40px 20px;
  text-align: center;
}
.ui-empty-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--muted);
  color: var(--muted-foreground);
}
.ui-empty-title { color: var(--foreground); font-size: 14px; font-weight: 600; }
.ui-empty-copy { max-width: 380px; margin-top: 5px; color: var(--muted-foreground); font-size: 12.5px; line-height: 1.6; }

/* --------------------------------------------------------------------------
   Article studio
   -------------------------------------------------------------------------- */
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.article-history { overflow: hidden; }
.article-history-list { max-height: 720px; overflow-y: auto; }
.article-history-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 0 8px 0 12px;
  border-bottom: 1px solid var(--border);
  transition: background var(--dur) var(--ease);
}
.article-history-item:last-child { border-bottom: 0; }
.article-history-item:hover { background: color-mix(in srgb, var(--muted) 55%, transparent); }
.article-history-item.is-active { background: var(--muted); }
.article-history-item input[type="checkbox"] { margin-top: 17px; flex: 0 0 auto; }
.article-history-item a {
  display: block;
  min-width: 0;
  flex: 1 1 auto;
  padding: 12px 4px;
  text-decoration: none;
}
.article-history-item strong {
  display: block;
  overflow: hidden;
  color: var(--foreground);
  font-size: 12.5px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.article-history-item span { display: block; margin-top: 3px; color: var(--muted-foreground); font-size: 11px; }
@media (max-width: 1024px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-history-list { max-height: 360px; }
}

/* --------------------------------------------------------------------------
   Platform icons
   -------------------------------------------------------------------------- */
.platform-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border: 1px solid color-mix(in srgb, var(--platform-color) 22%, transparent);
  border-radius: 6px;
  background: var(--platform-soft);
  color: var(--platform-color);
}
.platform-icon .geo-icon { width: 13px; height: 13px; }
html[data-theme="dark"] .platform-icon { background: color-mix(in srgb, var(--platform-color) 16%, transparent); }
.platform-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 9px 0 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--foreground);
  font-size: 11.5px;
  font-weight: 500;
}
.platform-pill .platform-icon { width: 18px; height: 18px; flex-basis: 18px; border: 0; border-radius: 50%; }
.platform-pill .platform-icon .geo-icon { width: 11px; height: 11px; }
.platform-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.platform-status { display: inline-flex; align-items: center; gap: 4px; color: var(--muted-foreground); font-size: 11px; }
.platform-status.is-hit { color: var(--success); }
.platform-status .geo-icon { width: 11px; height: 11px; }

/* --------------------------------------------------------------------------
   Auth pages
   -------------------------------------------------------------------------- */
body.auth-page {
  min-height: 100vh;
  background:
    radial-gradient(600px 300px at 50% -8%, color-mix(in srgb, var(--foreground) 5%, transparent), transparent 70%),
    var(--background) !important;
}
.geo-auth-shell { min-height: 100vh; display: flex; flex-direction: column; }
.geo-auth-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--topbar-height);
  padding: 0 24px;
}
.geo-auth-head .geo-brand { color: var(--foreground); }
.geo-auth-head .geo-brand-mark { background: var(--primary); color: var(--primary-foreground); }
.geo-auth-main {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 36px 20px 64px;
}
.auth-shell { width: 100%; max-width: 400px !important; margin: 0 auto !important; }
.auth-card {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--card) !important;
  box-shadow: var(--shadow-sm) !important;
}
.auth-card::before { display: none !important; content: none !important; }
.auth-card > div[style*="height:4px"] { display: none !important; }
.auth-card > div { padding: 28px !important; }
.auth-card-body { padding: 28px !important; }
.auth-icon {
  display: inline-grid !important;
  place-items: center;
  width: 38px !important;
  height: 38px !important;
  margin: 0 0 16px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--muted) !important;
  color: var(--foreground) !important;
  font-size: 16px !important;
  box-shadow: none !important;
}
body.auth-page h2 {
  margin: 0 0 6px !important;
  color: var(--foreground) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: -.025em;
  text-align: left !important;
}
body.auth-page .auth-sub {
  margin: 0 0 22px !important;
  color: var(--muted-foreground) !important;
  font-size: 13px;
  text-align: left !important;
}
body.auth-page .form-group { margin-bottom: 14px; }
body.auth-page label { display: block; margin-bottom: 6px; color: var(--foreground) !important; font-size: 12.5px !important; font-weight: 500 !important; }
body.auth-page input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  min-height: 38px;
  padding: 8px 11px !important;
  border: 1px solid var(--input) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--background) !important;
  color: var(--foreground) !important;
  font-size: 13px;
}
body.auth-page input:focus {
  border-color: var(--foreground) !important;
  box-shadow: 0 0 0 2px var(--ring) !important;
  outline: none;
}
body.auth-page button[type="submit"],
body.auth-page .auth-submit {
  width: 100%;
  min-height: 38px;
  margin-top: 4px;
  padding: 0 16px;
  border: 1px solid transparent !important;
  border-radius: var(--radius-sm) !important;
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: opacity var(--dur) var(--ease);
}
body.auth-page button[type="submit"]:hover,
body.auth-page .auth-submit:hover { opacity: .9; }
body.auth-page a { color: var(--foreground) !important; text-decoration: underline; text-underline-offset: 3px; }
body.auth-page .geo-brand,
body.auth-page .geo-brand:hover,
body.auth-page .geo-brand * { text-decoration: none !important; }
body.auth-page .auth-links,
body.auth-page .main-content p { margin: 18px 0 0; color: var(--muted-foreground) !important; font-size: 12.5px; text-align: center; }
body.auth-page .auth-links a { color: var(--foreground) !important; font-weight: 500; }
body.auth-page .auth-links .auth-sep { margin: 0 6px; color: var(--border-strong); }
.auth-footnote { margin-top: 18px; color: var(--muted-foreground); font-size: 11.5px; text-align: center; }
.auth-captcha-row { display: flex; align-items: center; gap: 10px; }
.auth-captcha-row input { flex: 1 1 auto; min-width: 0; }
.auth-captcha-row img { height: 38px; width: 110px; object-fit: cover; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.auth-tabs { display: flex; gap: 4px; margin-bottom: 16px; padding: 3px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--muted); }
.auth-tabs button { flex: 1; min-height: 30px; border: 0; border-radius: 5px; background: transparent; color: var(--muted-foreground); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.auth-tabs button.is-active { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-xs); }

/* --------------------------------------------------------------------------
   Modal / dialog
   -------------------------------------------------------------------------- */
.ui-modal-backdrop,
body.app-page [id$="Modal"] {
  background: rgba(9, 9, 11, .42) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
body.app-page [id$="Modal"] > div {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--card) !important;
  color: var(--foreground) !important;
  box-shadow: var(--shadow-md) !important;
}
body.app-page [id$="Modal"] h2 { color: var(--foreground) !important; }
body.app-page [id$="Modal"] input,
body.app-page [id$="Modal"] textarea,
body.app-page [id$="Modal"] select { background: var(--background) !important; }

/* --------------------------------------------------------------------------
   Specific page helpers
   -------------------------------------------------------------------------- */
.dash-chart-wrap { overflow: hidden; }
.dash-chart-header h3 { margin: 0; color: var(--foreground) !important; font-size: 14.5px; font-weight: 600; }
.dash-chart-body { padding: 20px; }
.dash-chart-empty {
  display: grid;
  place-content: center;
  gap: 6px;
  min-height: 220px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--muted) 30%, transparent);
  color: var(--muted-foreground);
  text-align: center;
}
.knowledge-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.knowledge-card { padding: 20px; }
.knowledge-card .card-icon { width: 32px; height: 32px; margin-bottom: 12px; display: inline-grid; place-items: center; border-radius: var(--radius); background: var(--muted); color: var(--foreground); }
.knowledge-card h3 { margin: 0 0 14px; }
.kb-section-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.kb-section-title h2 { margin: 4px 0 0; color: var(--foreground); font-size: 16px; font-weight: 600; }
.kb-status { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--muted); color: var(--muted-foreground); font-size: 11px; font-weight: 500; }
.kb-status.is-on { background: var(--success-soft); color: var(--success); }
.kb-config-card { padding: 20px; }
.kb-form { margin-top: 16px; }
.kb-form > label { display: block; margin-bottom: 14px; }
.kb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.kb-toggle { display: flex; align-items: center; gap: 8px; margin-bottom: 16px !important; }
.kb-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.kb-note { margin-top: 16px; padding: 20px; }
.kb-note h3 { margin: 0 0 12px; color: var(--foreground); font-size: 14px; font-weight: 600; }
.kb-note-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kb-note-grid strong { display: block; color: var(--foreground); font-size: 13px; font-weight: 500; }
.kb-note-grid span { display: block; margin-top: 4px; color: var(--muted-foreground); font-size: 12px; line-height: 1.55; }
.eyebrow { color: var(--muted-foreground); font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }

.pub-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pub-card { overflow: hidden; }
.pub-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.pub-card-title { display: inline-flex; align-items: center; gap: 8px; color: var(--foreground); font-size: 13.5px; font-weight: 600; }
.pub-card-icon { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; background: var(--muted); color: var(--foreground); font-size: 10px; font-weight: 600; }
.pub-card-sub { padding: 12px 16px 0; color: var(--muted-foreground); font-size: 12px; }
.pub-brand-info { padding: 10px 16px; color: var(--muted-foreground); font-size: 11.5px; }
.pub-brand-src { margin-top: 4px; color: var(--muted-foreground); opacity: .75; word-break: break-all; }
.pub-draft { display: block; width: calc(100% - 32px); margin: 0 16px; min-height: 180px; }
.pub-wordcount { padding: 6px 16px 0; color: var(--muted-foreground); font-size: 11px; }
.pub-actions { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 16px; }
.pub-actions:last-child { padding-bottom: 16px; }
.pub-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.pub-btn:hover { background: var(--muted); }
.pub-btn.primary { border-color: transparent; background: var(--primary); color: var(--primary-foreground); }
.pub-btn.green { border-color: transparent; background: var(--success); color: #fff; }
.pub-btn.ghost { border-color: transparent; background: transparent; color: var(--muted-foreground); }
.pub-close { border: 0; background: transparent; color: var(--muted-foreground); font-size: 15px; cursor: pointer; }
.pub-close:hover { color: var(--foreground); }

/* Legacy inline hardcoded colors → tokens */
body.app-page [style*="color:#0F3460"],
body.app-page [style*="color: #0F3460"],
body.app-page [style*="color:#0f3460"],
body.app-page [style*="color:#1f2937"],
body.app-page [style*="color:#111827"],
body.app-page [style*="color:#374151"],
body.app-page [style*="color:#4b5563"],
body.app-page [style*="color:#64748b"] { color: var(--foreground) !important; }
body.app-page [style*="color:#6b7280"],
body.app-page [style*="color:#9ca3af"],
body.app-page [style*="color:#6f7674"],
body.app-page [style*="color:var(--muted"],
body.app-page [style*="color: var(--muted"] { color: var(--muted-foreground) !important; }
body.app-page [style*="color:#dc2626"] { color: var(--destructive) !important; }
body.app-page [style*="color:#059669"],
body.app-page [style*="color:#15803d"] { color: var(--success) !important; }
body.app-page [style*="color:#4f46e5"],
body.app-page [style*="color:#2563eb"] { color: var(--info) !important; }
body.app-page [style*="background:#fff"],
body.app-page [style*="background: #fff"],
body.app-page [style*="background:#ffffff"],
body.app-page [style*="background:#fafbfc"],
body.app-page [style*="background:#f8f9fb"] { background: var(--card) !important; }
body.app-page [style*="background:#f3f4f6"],
body.app-page [style*="background: #f3f4f6"],
body.app-page [style*="background:#f9fafb"],
body.app-page [style*="background:#f4f4f5"] { background: var(--muted) !important; }
body.app-page [style*="background:#eef2ff"],
body.app-page [style*="background:#dbeafe"] { background: var(--info-soft) !important; }
body.app-page [style*="background:#f0fdf4"] { background: var(--success-soft) !important; }
body.app-page [style*="background:#fef3c7"],
body.app-page [style*="background:#fff7ed"],
body.app-page [style*="background:#fef2f2"] { background: var(--warning-soft) !important; }
body.app-page [style*="background:#ede9fe"],
body.app-page [style*="background:#faf5ff"],
body.app-page [style*="background:#fee2e2"] { background: var(--muted) !important; }
body.app-page [style*="background:#E94560"],
body.app-page [style*="background:#e94560"],
body.app-page [style*="background:#059669"],
body.app-page [style*="background:#4f46e5"] { background: var(--primary) !important; color: var(--primary-foreground) !important; }
body.app-page [style*="border-bottom:1px solid #f3f4f6"],
body.app-page [style*="border-bottom: 1px solid #f3f4f6"],
body.app-page [style*="border:1px solid #e5e7eb"],
body.app-page [style*="border:1px solid #eef1f5"],
body.app-page [style*="border:1px solid #f3f4f6"] { border-color: var(--border) !important; }
body.app-page [style*="border-radius:14px"],
body.app-page [style*="border-radius:12px"],
body.app-page [style*="border-radius:10px"] { border-radius: var(--radius) !important; }
body.app-page [style*="box-shadow:0 20px 60px"],
body.app-page [style*="box-shadow:0 10px 24px"],
body.app-page [style*="box-shadow:0 4px 20px"],
body.app-page [style*="box-shadow:0 4px 30px"] { box-shadow: var(--shadow-sm) !important; }
body.app-page [style*="background:linear-gradient(135deg,#fef3c7"],
body.app-page [style*="background:linear-gradient(135deg,#ede9fe"],
body.app-page [style*="background:linear-gradient(135deg,#5b21b6"],
body.app-page [style*="background:linear-gradient(90deg,#0F3460"],
body.app-page [style*="background:linear-gradient(135deg,#0F3460"],
body.app-page [style*="background:linear-gradient(135deg,#f5f7ff"] { background: var(--muted) !important; color: var(--foreground) !important; }

/* Unify loud legacy inline accents on actions to the shadcn primary/semantic palette. */
body.app-page button[style*="background:#4f46e5"],
body.app-page a[style*="background:#4f46e5"],
body.app-page button[style*="background:#3b82f6"],
body.app-page a[style*="background:#3b82f6"],
body.app-page button[style*="background:#2563eb"],
body.app-page a[style*="background:#2563eb"],
body.app-page button[style*="background:#8b5cf6"],
body.app-page a[style*="background:#8b5cf6"],
body.app-page button[style*="background:#7c3aed"],
body.app-page a[style*="background:#7c3aed"],
body.app-page button[style*="background:#a21caf"],
body.app-page a[style*="background:#a21caf"],
body.app-page button[style*="background:#f59e0b"],
body.app-page a[style*="background:#f59e0b"] {
  border-color: transparent !important;
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
}
body.app-page button[style*="background:#10b981"],
body.app-page a[style*="background:#10b981"],
body.app-page button[style*="background:#059669"],
body.app-page a[style*="background:#059669"] {
  border-color: transparent !important;
  background: var(--success) !important;
  color: #fff !important;
}

/* Dark-mode inline fixes for leftover light surfaces */
html[data-theme="dark"] body.app-page [style*="color:#0F3460"],
html[data-theme="dark"] body.app-page [style*="color:#374151"] { color: var(--foreground) !important; }
html[data-theme="dark"] body.app-page [style*="background:#fff"],
html[data-theme="dark"] body.app-page [style*="background: #fff"] { background: var(--card) !important; }
html[data-theme="dark"] body.app-page [style*="border:1px solid #d1d5db"],
html[data-theme="dark"] body.app-page [style*="border:1px solid #e5e7eb"] { border-color: var(--border) !important; }

/* --------------------------------------------------------------------------
   Pi workbench
   -------------------------------------------------------------------------- */
.agent-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, .9fr); gap: 20px; align-items: start; }
.agent-stack { display: grid; gap: 20px; }
.agent-hero {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
}
.agent-hero::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -80px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--foreground) 6%, transparent), transparent 68%);
  pointer-events: none;
}
.agent-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.agent-identity { display: flex; align-items: center; gap: 14px; min-width: 0; }
.agent-avatar {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--primary-foreground);
}
.agent-avatar .geo-icon { width: 22px; height: 22px; }
.agent-name { margin: 0; color: var(--foreground); font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.agent-sub { margin: 3px 0 0; color: var(--muted-foreground); font-size: 12.5px; }
.agent-status { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--muted-foreground); font-size: 11.5px; font-weight: 500; }
.agent-status.is-online { color: var(--success); border-color: color-mix(in srgb, var(--success) 25%, var(--border)); }
.agent-status .agent-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.agent-hero-copy { max-width: 640px; margin: 14px 0 18px; color: var(--muted-foreground); font-size: 13px; line-height: 1.65; }
.agent-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.agent-command {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--muted);
  color: var(--foreground);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.6;
  word-break: break-all;
}
.agent-command code { flex: 1 1 auto; min-width: 0; font-family: inherit; white-space: pre-wrap; background: transparent; color: inherit; }
.agent-command .ui-btn { flex: 0 0 auto; }
.agent-task-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.agent-task {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  text-decoration: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.agent-task:hover { background: var(--muted); border-color: var(--border-strong); }
.agent-task .ui-icon-tile { width: 30px; height: 30px; flex-basis: 30px; }
.agent-task-copy { min-width: 0; }
.agent-task-copy strong { display: block; color: var(--foreground); font-size: 13px; font-weight: 550; }
.agent-task-copy span { display: block; margin-top: 2px; color: var(--muted-foreground); font-size: 11.5px; line-height: 1.45; }
.agent-task > .geo-icon { margin-left: auto; color: var(--muted-foreground); }
.agent-kv { display: grid; gap: 11px; }
.agent-kv-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; font-size: 12.5px; }
.agent-kv-row span:first-child { color: var(--muted-foreground); }
.agent-kv-row span:last-child { min-width: 0; color: var(--foreground); font-weight: 500; text-align: right; word-break: break-all; }
.agent-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.agent-step { position: relative; display: flex; gap: 12px; padding: 0 0 20px; }
.agent-step:last-child { padding-bottom: 0; }
.agent-step::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 1px; background: var(--border); }
.agent-step:last-child::before { display: none; }
.agent-step-marker { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 27px; height: 27px; flex: 0 0 27px; border: 1px solid var(--border); border-radius: 50%; background: var(--card); color: var(--muted-foreground); font-size: 11px; font-weight: 600; }
.agent-step.is-done .agent-step-marker { border-color: transparent; background: var(--primary); color: var(--primary-foreground); }
.agent-step.is-current .agent-step-marker { border-color: var(--foreground); color: var(--foreground); box-shadow: 0 0 0 3px var(--ring); }
.agent-step-copy { min-width: 0; padding-top: 3px; }
.agent-step-copy strong { display: block; color: var(--foreground); font-size: 12.5px; font-weight: 550; }
.agent-step-copy span { display: block; margin-top: 2px; color: var(--muted-foreground); font-size: 11.5px; line-height: 1.5; }
.agent-token-once { border-color: color-mix(in srgb, var(--success) 30%, var(--border)) !important; background: var(--success-soft) !important; }
.agent-token-code { display: block; margin-top: 6px; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--success) 25%, var(--border)); border-radius: var(--radius-sm); background: var(--card); color: var(--foreground); font-family: var(--font-mono); font-size: 11.5px; word-break: break-all; }
.agent-activity { display: grid; gap: 0; }
.agent-activity-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.agent-activity-row:first-child { padding-top: 0; }
.agent-activity-row:last-child { padding-bottom: 0; border-bottom: 0; }
.agent-activity-copy { min-width: 0; flex: 1 1 auto; }
.agent-activity-copy strong { display: block; overflow: hidden; color: var(--foreground); font-size: 12.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.agent-activity-copy span { display: block; margin-top: 2px; color: var(--muted-foreground); font-size: 11px; }
.agent-activity-meta { flex: 0 0 auto; color: var(--muted-foreground); font-size: 11px; }

/* --------------------------------------------------------------------------
   Command palette
   -------------------------------------------------------------------------- */
.geo-command-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 20px 20px;
  background: rgba(9, 9, 11, .45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.geo-command-backdrop.is-open { display: flex; }
.geo-command {
  width: 100%;
  max-width: 540px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--popover);
  color: var(--popover-foreground);
  box-shadow: var(--shadow-md);
  animation: geo-command-in .18s var(--ease) both;
}
@keyframes geo-command-in { from { opacity: 0; transform: translateY(-6px) scale(.99); } to { opacity: 1; transform: none; } }
.geo-command-input {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.geo-command-input .geo-icon { color: var(--muted-foreground); }
.geo-command-input input {
  flex: 1 1 auto;
  min-height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14px !important;
}
body.app-page #commandInput,
body.app-page #commandInput:focus,
body.app-page #commandInput:focus-visible { border: 0 !important; box-shadow: none !important; outline: none !important; background: transparent !important; }
.geo-command-list { max-height: 320px; overflow-y: auto; padding: 6px; }
.geo-command-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  color: var(--foreground);
  font-size: 13px;
  text-decoration: none;
}
.geo-command-item:hover,
.geo-command-item.is-active { background: var(--accent); }
.geo-command-item .geo-icon { color: var(--muted-foreground); }
.geo-command-item small { margin-left: auto; color: var(--muted-foreground); font-size: 11px; }
.geo-command-empty { padding: 28px 12px; color: var(--muted-foreground); font-size: 13px; text-align: center; }
.geo-command-footer { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: 11px; }

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
.geo-sidebar-overlay {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: none;
  background: rgba(9, 9, 11, .45);
  backdrop-filter: blur(2px);
}
@media (max-width: 1024px) {
  .geo-sidebar { transform: translateX(-100%); box-shadow: var(--shadow-md); }
  body.sidebar-open .geo-sidebar { transform: translateX(0); }
  body.sidebar-open .geo-sidebar-overlay { display: block; }
  .geo-main { margin-left: 0 !important; }
  body.sidebar-collapsed .geo-sidebar { width: var(--sidebar-width); }
  body.sidebar-collapsed .geo-brand-text,
  body.sidebar-collapsed .geo-workspace-copy,
  body.sidebar-collapsed .geo-sidebar-label,
  body.sidebar-collapsed .geo-nav-label,
  body.sidebar-collapsed .geo-account-copy,
  body.sidebar-collapsed .geo-account-logout,
  body.sidebar-collapsed .geo-sidebar-cta span { display: initial; }
  body.sidebar-collapsed .geo-nav-item { justify-content: flex-start; padding: 0 10px; }
  body.sidebar-collapsed .geo-sidebar-head { justify-content: flex-start; padding: 0 18px; }
  .geo-topbar { padding: 0 16px; }
  .geo-content { padding: 20px 16px 44px; }
  .geo-search-trigger { width: 36px; padding: 0; justify-content: center; }
  .geo-search-trigger span,
  .geo-search-trigger .geo-kbd { display: none; }
  .ui-stats, .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .agent-layout { grid-template-columns: 1fr; }
  .ui-card-grid, .ui-card-grid-3, .knowledge-grid, .pub-cards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .geo-topbar { height: 54px; }
  .geo-topbar .geo-topbar-sep,
  .geo-breadcrumb .geo-breadcrumb-parent { display: none; }
  .geo-user-trigger span:not(.geo-avatar) { display: none; }
  .geo-user-trigger .geo-icon { display: none; }
  .ui-stats, .admin-stats { grid-template-columns: 1fr !important; }
  .ui-page-title, .page-header h1, .admin-page-header h1 { font-size: 21px; }
  .ui-form-grid, .kb-grid, .kb-note-grid, .agent-task-grid { grid-template-columns: 1fr; }
  .ui-page-header, .page-header, .admin-page-header { gap: 12px; }
  .app-page .knowledge-card { padding: 16px; }
  .ui-card-header, .ui-card-body, .ui-card-footer, .admin-card-body, .dash-chart-header, .dash-chart-body { padding: 16px; }
  .geo-content { padding: 16px 12px 40px; }
  .geo-command-backdrop { padding: 8vh 12px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  body.app-page *,
  body.auth-page *,
  .geo-content,
  .geo-command { animation: none !important; transition: none !important; }
}
/* Dashboard ranked keyword list */
.ranked-keywords-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 20px; }
@media (max-width: 760px) { .ranked-keywords-grid { grid-template-columns: 1fr; } }

/* Legacy .stats-grid stat cards (finance / geo overview) */
body.app-page .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
body.app-page .stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 92px;
  padding: 16px 18px;
}
body.app-page .stat-card .stat-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius);
  background: var(--muted) !important;
  color: var(--foreground) !important;
  font-size: 0;
  line-height: 1;
  overflow: hidden;
}
body.app-page .stat-card .stat-icon::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v16a2 2 0 0 0 2 2h16'/%3E%3Cpath d='M18 17V9'/%3E%3Cpath d='M13 17V5'/%3E%3Cpath d='M8 17v-3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v16a2 2 0 0 0 2 2h16'/%3E%3Cpath d='M18 17V9'/%3E%3Cpath d='M13 17V5'/%3E%3Cpath d='M8 17v-3'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.app-page div[style*="display:flex"] > select,
body.app-page div[style*="display:flex"] > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
  width: auto;
  flex: 0 0 auto;
}

/* Membership plan feature list */
.plan-feature-list { display: grid; }
.plan-feature {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  color: var(--foreground);
  font-size: 12.5px;
  font-weight: 450;
  cursor: pointer;
}
.plan-feature:last-child { border-bottom: 0; }
.plan-feature input[type="checkbox"] { width: 15px; height: 15px; flex: 0 0 15px; margin: 0; }
.plan-feature-icon { display: inline-grid; place-items: center; width: 18px; color: var(--muted-foreground); }
.plan-feature-label { flex: 1 1 auto; min-width: 0; }
.plan-feature-unit { flex: 0 0 auto; color: var(--muted-foreground); font-size: 11px; }

/* Tailwind utility bridge for legacy console pages (tickets etc.) */
body.app-page .bg-blue-600,
body.app-page .bg-blue-500,
body.app-page .bg-indigo-600 { background: var(--primary) !important; color: var(--primary-foreground) !important; }
body.app-page .bg-white { background: var(--card) !important; }
body.app-page .bg-gray-50 { background: var(--background) !important; }
body.app-page .bg-gray-100 { background: var(--muted) !important; }
body.app-page .text-gray-800,
body.app-page .text-gray-700 { color: var(--foreground) !important; }
body.app-page .text-gray-600,
body.app-page .text-gray-500 { color: var(--muted-foreground) !important; }
body.app-page .text-gray-400,
body.app-page .text-gray-300 { color: var(--muted-foreground) !important; opacity: .8; }
body.app-page .text-blue-600,
body.app-page .text-blue-700 { color: var(--info) !important; }
body.app-page .border-gray-300,
body.app-page .border-gray-200,
body.app-page .border-gray-100 { border-color: var(--border) !important; }
body.app-page .divide-y > :not([hidden]) ~ :not([hidden]) { border-color: var(--border) !important; }
body.app-page .hover\:bg-gray-50:hover,
body.app-page .hover\:bg-gray-200:hover,
body.app-page .hover\:bg-gray-100:hover { background: var(--muted) !important; }
body.app-page .hover\:bg-blue-700:hover { opacity: .9; }
body.app-page .shadow-sm { box-shadow: var(--shadow-xs) !important; }
body.app-page .shadow-2xl { box-shadow: var(--shadow-md) !important; }
body.app-page .bg-yellow-100 { background: var(--warning-soft) !important; }
body.app-page .text-yellow-700 { color: var(--warning) !important; }
body.app-page .bg-green-100 { background: var(--success-soft) !important; }
body.app-page .text-green-700 { color: var(--success) !important; }
body.app-page .bg-blue-100 { background: var(--info-soft) !important; }
body.app-page .bg-red-100 { background: color-mix(in srgb, var(--destructive) 10%, transparent) !important; }
body.app-page .text-red-700 { color: var(--destructive) !important; }