/*
 * Fluent / WinUI-inspired visual layer
 * Applied by adding class="fluent-ui" on body.
 */

body.fluent-ui {
  --fx-font-family: 'Segoe UI Variable Text', 'Segoe UI', 'Inter', system-ui, sans-serif;

  --fx-bg-canvas: #eef1f5;
  --fx-bg-shell: #f4f6fa;
  --fx-bg-surface-1: #ffffff;
  --fx-bg-surface-2: #f8fafe;
  --fx-bg-surface-3: #f1f5fb;

  --fx-border-soft: #d4dce8;
  --fx-border-strong: #c4cedd;

  --fx-text-primary: #0f172a;
  --fx-text-secondary: #334155;
  --fx-text-muted: #64748b;

  --fx-accent: #0f6cbd;
  --fx-accent-hover: #115ea3;
  --fx-accent-pressed: #0f548c;
  --fx-accent-subtle: #dff0ff;

  --fx-success: #107c10;
  --fx-warning: #9a6700;
  --fx-danger: #c50f1f;

  --fx-radius-sm: 6px;
  --fx-radius-md: 8px;
  --fx-radius-lg: 12px;
  --fx-radius-xl: 16px;

  --fx-duration-fast: 120ms;
  --fx-duration-normal: 200ms;
  --fx-duration-slow: 320ms;
  --fx-curve: cubic-bezier(0.2, 0, 0, 1);

  --fx-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06);
  --fx-shadow-2: 0 4px 16px rgba(15, 23, 42, 0.10);
  --fx-shadow-3: 0 10px 32px rgba(15, 23, 42, 0.14);

  --bg-base: var(--fx-bg-canvas);
  --bg-surface: var(--fx-bg-surface-1);
  --bg-elevated: var(--fx-bg-surface-2);
  --bg-card: var(--fx-bg-surface-1);
  --bg-hover: var(--fx-bg-surface-3);

  --border: var(--fx-border-soft);
  --border-light: var(--fx-border-strong);

  --text-primary: var(--fx-text-primary);
  --text-secondary: var(--fx-text-secondary);
  --text-muted: var(--fx-text-muted);

  --accent: var(--fx-accent);
  --accent-hover: var(--fx-accent-hover);
  --accent-glow: rgba(15, 108, 189, 0.20);

  --success: var(--fx-success);
  --warning: var(--fx-warning);
  --danger: var(--fx-danger);

  --radius: var(--fx-radius-md);
  --radius-lg: var(--fx-radius-lg);
  --radius-xl: var(--fx-radius-xl);

  --shadow-sm: var(--fx-shadow-1);
  --shadow: var(--fx-shadow-2);
  --shadow-lg: var(--fx-shadow-3);

  font-family: var(--fx-font-family);
  color: var(--text-primary);
  background:
    radial-gradient(1300px 380px at 8% -16%, rgba(15, 108, 189, 0.08), transparent 72%),
    radial-gradient(1000px 320px at 100% -20%, rgba(51, 65, 85, 0.07), transparent 68%),
    var(--bg-base);
}

body.fluent-ui h1,
body.fluent-ui h2,
body.fluent-ui h3,
body.fluent-ui h4,
body.fluent-ui h5 {
  letter-spacing: -0.01em;
}

@media (prefers-color-scheme: dark) {
  body.fluent-ui:not([data-theme]) {
    --fx-bg-canvas: #090c12;
    --fx-bg-shell: #0d1118;
    --fx-bg-surface-1: #121824;
    --fx-bg-surface-2: #151d2a;
    --fx-bg-surface-3: #192333;
    --fx-border-soft: #2c394c;
    --fx-border-strong: #3a4a61;
    --fx-text-primary: #e2e8f0;
    --fx-text-secondary: #cbd5e1;
    --fx-text-muted: #94a3b8;
    --fx-accent-subtle: #10283f;
    --accent-glow: rgba(18, 121, 203, 0.28);
    --fx-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.52);
    --fx-shadow-2: 0 10px 26px rgba(0, 0, 0, 0.48);
    --fx-shadow-3: 0 18px 40px rgba(0, 0, 0, 0.62);
  }
}

body.fluent-ui[data-theme='dark'] {
  --fx-bg-canvas: #090c12;
  --fx-bg-shell: #0d1118;
  --fx-bg-surface-1: #121824;
  --fx-bg-surface-2: #151d2a;
  --fx-bg-surface-3: #192333;
  --fx-border-soft: #2c394c;
  --fx-border-strong: #3a4a61;
  --fx-text-primary: #e2e8f0;
  --fx-text-secondary: #cbd5e1;
  --fx-text-muted: #94a3b8;
  --fx-accent-subtle: #10283f;
  --accent-glow: rgba(18, 121, 203, 0.28);
  --fx-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.52);
  --fx-shadow-2: 0 10px 26px rgba(0, 0, 0, 0.48);
  --fx-shadow-3: 0 18px 40px rgba(0, 0, 0, 0.62);

  background:
    radial-gradient(1300px 380px at 8% -16%, rgba(12, 34, 56, 0.32), transparent 72%),
    radial-gradient(1000px 320px at 100% -20%, rgba(3, 7, 12, 0.55), transparent 68%),
    var(--bg-base);
}

body.fluent-ui[data-theme='dark'] .app-header,
body.fluent-ui[data-theme='dark'] .topbar,
body.fluent-ui[data-theme='dark'] .admin-sidebar,
body.fluent-ui[data-theme='dark'] .side,
body.fluent-ui[data-theme='dark'] .proj-toolbar,
body.fluent-ui[data-theme='dark'] .sync-controls,
body.fluent-ui[data-theme='dark'] .map-filters,
body.fluent-ui[data-theme='dark'] .tabs,
body.fluent-ui[data-theme='dark'] .admin-actions,
body.fluent-ui[data-theme='dark'] .grid-scroll,
body.fluent-ui[data-theme='dark'] .map-stage,
body.fluent-ui[data-theme='dark'] .sync-table-wrap {
  background: rgba(10, 14, 22, 0.88);
  border-color: var(--border);
}

body.fluent-ui[data-theme='dark'] .btn {
  background: #1a2535;
  border-color: #32445d;
  color: #e2e8f0;
}

body.fluent-ui[data-theme='dark'] .btn:hover:not(:disabled) {
  background: #202d40;
  border-color: #3f5572;
}

body.fluent-ui[data-theme='dark'] .btn-secondary {
  background: #1a2535;
  border-color: #32445d;
}

body.fluent-ui[data-theme='dark'] .btn-ghost {
  background: transparent;
  border-color: #32445d;
  color: #cbd5e1;
}

body.fluent-ui[data-theme='dark'] .btn-primary {
  background: #0f6cbd;
  border-color: #0f6cbd;
  color: #ffffff;
}

body.fluent-ui[data-theme='dark'] .form-control,
body.fluent-ui[data-theme='dark'] textarea.form-control,
body.fluent-ui[data-theme='dark'] select.form-control {
  background: #121b2a;
  border-color: #32445d;
  color: #e2e8f0;
}

body.fluent-ui[data-theme='dark'] .table th,
body.fluent-ui[data-theme='dark'] .roles-table th,
body.fluent-ui[data-theme='dark'] .types-table th,
body.fluent-ui[data-theme='dark'] .sync-table th {
  background: #182334;
  color: #cbd5e1;
}

body.fluent-ui[data-theme='dark'] .table tbody tr:hover td,
body.fluent-ui[data-theme='dark'] .roles-table tbody tr:hover td,
body.fluent-ui[data-theme='dark'] .types-table tbody tr:hover td,
body.fluent-ui[data-theme='dark'] .sync-table tbody tr:hover td {
  background: #1c2b40;
}

body.fluent-ui[data-theme='dark'] .modal {
  background: linear-gradient(180deg, #131d2d 0%, #101927 100%);
  border-color: #32445d;
}

body.fluent-ui[data-theme='dark'] .modal-header,
body.fluent-ui[data-theme='dark'] .modal-footer,
body.fluent-ui[data-theme='dark'] .card-header,
body.fluent-ui[data-theme='dark'] .card-h {
  background: linear-gradient(180deg, #182334 0%, #152033 100%);
  border-color: #2c394c;
}

body.fluent-ui a {
  color: var(--accent);
}

body.fluent-ui .app-header,
body.fluent-ui .topbar {
  min-height: 56px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

body.fluent-ui .logo,
body.fluent-ui .brand {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 1rem;
}

body.fluent-ui .nav-breadcrumb,
body.fluent-ui .breadcrumb {
  color: var(--text-muted);
  font-size: 0.82rem;
}

body.fluent-ui .nav-breadcrumb a,
body.fluent-ui .breadcrumb a {
  color: var(--text-secondary);
}

body.fluent-ui .admin-sidebar,
body.fluent-ui .side {
  background: rgba(255, 255, 255, 0.84);
  border-right: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
}

body.fluent-ui .sidebar-brand,
body.fluent-ui .brand {
  border-color: var(--border);
}

body.fluent-ui .admin-nav-link,
body.fluent-ui .link {
  color: var(--text-secondary);
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition:
    background var(--fx-duration-fast) var(--fx-curve),
    border-color var(--fx-duration-fast) var(--fx-curve),
    color var(--fx-duration-fast) var(--fx-curve),
    transform var(--fx-duration-fast) var(--fx-curve);
}

body.fluent-ui .admin-nav-link:hover,
body.fluent-ui .link:hover {
  background: #edf3fb;
  border-color: #cdddf3;
  color: var(--text-primary);
  transform: translateY(-1px);
}

body.fluent-ui .admin-nav-link.active,
body.fluent-ui .link.active {
  background: var(--fx-accent-subtle);
  border-color: #b7d9ff;
  color: var(--accent);
}

body.fluent-ui .projects-main,
body.fluent-ui .project-view,
body.fluent-ui .sync-main,
body.fluent-ui .map-shell,
body.fluent-ui .admin-main,
body.fluent-ui .shell,
body.fluent-ui .main {
  position: relative;
}

body.fluent-ui .card,
body.fluent-ui .sync-card,
body.fluent-ui .info-card,
body.fluent-ui .form-card,
body.fluent-ui .loc-card,
body.fluent-ui .meta-item,
body.fluent-ui .project-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

body.fluent-ui .card-header,
body.fluent-ui .card-h,
body.fluent-ui .modal-header {
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #fbfdff 0%, #f7fafe 100%);
}

body.fluent-ui .card-b,
body.fluent-ui .card-pad,
body.fluent-ui .card-body,
body.fluent-ui .modal-body {
  background: transparent;
}

body.fluent-ui .btn {
  min-height: 34px;
  border-radius: var(--radius);
  border: 1px solid #c4cfde;
  background: #ffffff;
  color: #17253c;
  font-weight: 600;
  font-size: 0.84rem;
  letter-spacing: 0.01em;
  transition:
    background var(--fx-duration-fast) var(--fx-curve),
    border-color var(--fx-duration-fast) var(--fx-curve),
    color var(--fx-duration-fast) var(--fx-curve);
  box-shadow: none !important;
}

body.fluent-ui .btn:hover:not(:disabled) {
  background: #f5f9ff;
  border-color: #9ebee2;
  box-shadow: none !important;
}

body.fluent-ui .btn:active:not(:disabled) {
  background: #e8f2ff;
  border-color: #89afd9;
  box-shadow: none !important;
}

body.fluent-ui .btn-primary {
  background: #0f6cbd;
  border-color: #0f6cbd;
  color: #ffffff;
  box-shadow: none;
}

body.fluent-ui .btn-primary:hover:not(:disabled) {
  background: #115ea3;
  border-color: #115ea3;
  color: #ffffff;
}

body.fluent-ui .btn-primary:active:not(:disabled) {
  background: #0f548c;
  border-color: #0f548c;
}

body.fluent-ui .btn-secondary {
  background: #f8fafc;
  border-color: #c4cfde;
  color: #17253c;
}

body.fluent-ui .btn-danger {
  background: #d13438;
  border-color: #d13438;
  color: #ffffff;
}

body.fluent-ui .btn-danger:hover:not(:disabled) {
  background: #b52f33;
  border-color: #b52f33;
}

body.fluent-ui [data-icon] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body.fluent-ui [data-icon]::before {
  content: none !important;
  display: none !important;
}

body.fluent-ui .fx-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  color: currentColor;
  flex-shrink: 0;
  pointer-events: none;
}

body.fluent-ui .fx-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.fluent-ui .fx-icon svg [data-fill='1'] {
  fill: currentColor;
  stroke: none;
}

body.fluent-ui .btn-ghost {
  background: transparent;
  border-color: #d2dcea;
  color: var(--text-secondary);
}

body.fluent-ui .btn-ghost:hover:not(:disabled) {
  background: #eef3fa;
  border-color: #c7d5e8;
  color: var(--text-primary);
}

body.fluent-ui .form-control {
  border-radius: var(--radius);
  border: 1px solid #c5d2e3;
  background: #ffffff;
  color: var(--text-primary);
  min-height: 36px;
  transition:
    border-color var(--fx-duration-fast) var(--fx-curve),
    box-shadow var(--fx-duration-fast) var(--fx-curve),
    background var(--fx-duration-fast) var(--fx-curve);
}

body.fluent-ui .form-control:hover {
  border-color: #9cb7d7;
  background: #fbfdff;
}

body.fluent-ui .form-control:focus,
body.fluent-ui .form-control:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

body.fluent-ui .form-label {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

body.fluent-ui .modal-backdrop {
  background: rgba(6, 15, 28, 0.40);
  backdrop-filter: blur(6px);
}

body.fluent-ui .modal {
  border: 1px solid #c2cede;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: linear-gradient(180deg, #ffffff 0%, #f9fbfe 100%);
}

body.fluent-ui .modal-header {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

body.fluent-ui .modal-footer {
  border-top: 1px solid var(--border);
  background: #f8fbff;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

body.fluent-ui .toast-container {
  right: 18px;
  bottom: 18px;
  gap: 10px;
}

body.fluent-ui .toast {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #ffffff;
  color: var(--text-primary);
  box-shadow: var(--shadow);
  animation: fluent-toast-in var(--fx-duration-normal) var(--fx-curve);
}

body.fluent-ui .toast-success {
  border-color: #b8dfbf;
  background: #f4fbf4;
  color: #145514;
}

body.fluent-ui .toast-error {
  border-color: #f2c0c6;
  background: #fdf3f4;
  color: #8f141f;
}

body.fluent-ui .toast-info {
  border-color: #bad8f5;
  background: #f1f8ff;
  color: #11497f;
}

body.fluent-ui .badge,
body.fluent-ui .role-pill,
body.fluent-ui .status-tag,
body.fluent-ui .status-pill,
body.fluent-ui .perm-pill,
body.fluent-ui .cat-pill,
body.fluent-ui .expiry-pill {
  border-radius: 999px;
  border: 1px solid #c8d2df;
  background: #f4f8fc;
  color: #334155;
}

body.fluent-ui .badge-accent,
body.fluent-ui .status-pill.ok {
  background: #e2f1ff;
  border-color: #bbdaf7;
  color: #0f5da5;
}

body.fluent-ui .empty-state,
body.fluent-ui .empty-box {
  border: 1px dashed #c6d3e4;
  border-radius: var(--radius-lg);
  background: #f9fbfe;
  color: var(--text-muted);
}

body.fluent-ui .table,
body.fluent-ui .roles-table,
body.fluent-ui .types-table,
body.fluent-ui .sync-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

body.fluent-ui .table th,
body.fluent-ui .table td,
body.fluent-ui .roles-table th,
body.fluent-ui .roles-table td,
body.fluent-ui .types-table th,
body.fluent-ui .types-table td,
body.fluent-ui .sync-table th,
body.fluent-ui .sync-table td {
  border-bottom: 1px solid var(--border);
}

body.fluent-ui .table th,
body.fluent-ui .roles-table th,
body.fluent-ui .types-table th,
body.fluent-ui .sync-table th {
  background: #f6f9fd;
  color: #526176;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
}

body.fluent-ui .table tbody tr:hover td,
body.fluent-ui .roles-table tbody tr:hover td,
body.fluent-ui .types-table tbody tr:hover td,
body.fluent-ui .sync-table tbody tr:hover td {
  background: #f3f8fe;
}

body.fluent-ui .projects-header,
body.fluent-ui .admin-header,
body.fluent-ui .head,
body.fluent-ui .sync-head,
body.fluent-ui .map-top,
body.fluent-ui .project-top {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

body.fluent-ui .projects-header h1,
body.fluent-ui .admin-header h1,
body.fluent-ui .head h1,
body.fluent-ui .sync-head h1,
body.fluent-ui .project-top h2,
body.fluent-ui .map-title h1 {
  margin: 0;
  color: var(--text-primary);
}

body.fluent-ui .projects-header p,
body.fluent-ui .admin-header p,
body.fluent-ui .head p,
body.fluent-ui .sync-head p,
body.fluent-ui .project-top p,
body.fluent-ui .map-title p {
  margin-top: 4px;
  color: var(--text-muted);
}

body.fluent-ui .project-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

body.fluent-ui .project-card:hover {
  border-color: #b7d3ef;
  box-shadow: 0 8px 22px rgba(15, 108, 189, 0.16);
}

body.fluent-ui .project-card-accent {
  height: 3px;
  background: linear-gradient(90deg, #0f6cbd 0%, #2b88d8 100%);
}

body.fluent-ui .hero-wrap {
  max-width: 1120px;
}

body.fluent-ui .hero-wrap .topbar {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 10px 12px;
  margin-top: 6px;
}

body.fluent-ui .hero-wrap .hero h1,
body.fluent-ui .hero-wrap .info-card h2,
body.fluent-ui .hero-wrap .form-head,
body.fluent-ui .hero-wrap h3,
body.fluent-ui .hero-wrap .brand {
  color: var(--text-primary);
}

body.fluent-ui .hero-wrap .hero p,
body.fluent-ui .hero-wrap .muted,
body.fluent-ui .hero-wrap .info-row,
body.fluent-ui .hero-wrap .card p,
body.fluent-ui .hero-wrap .card h3,
body.fluent-ui .hero-wrap .form-control::placeholder {
  color: var(--text-secondary);
}

body.fluent-ui .hero-wrap .form-control {
  background: #ffffff;
  color: var(--text-primary);
  border-color: #c5d2e3;
}

body.fluent-ui .hero-wrap .btn-submit {
  min-height: 36px;
  border-radius: var(--radius);
  border: 1px solid #0f6cbd;
  background: #0f6cbd;
  color: #ffffff;
  font-weight: 700;
  transition: background var(--fx-duration-fast) var(--fx-curve), border-color var(--fx-duration-fast) var(--fx-curve);
}

body.fluent-ui .hero-wrap .btn-submit:hover:not(:disabled) {
  background: #115ea3;
  border-color: #115ea3;
}

body.fluent-ui.public-home,
body.fluent-ui.public-contact,
body.fluent-ui.auth-login,
body.fluent-ui.auth-signup,
body.fluent-ui.auth-verify {
  background:
    radial-gradient(1300px 380px at 8% -16%, rgba(15, 108, 189, 0.11), transparent 72%),
    radial-gradient(1100px 360px at 100% -18%, rgba(35, 62, 94, 0.12), transparent 70%),
    #edf2f8;
}

body.fluent-ui.public-home .hero,
body.fluent-ui.public-contact .contact-layout {
  margin-top: 36px;
}

body.fluent-ui.public-home .panel {
  margin-top: 24px;
}

body.fluent-ui.public-home .cta,
body.fluent-ui.public-contact .menu {
  gap: 12px;
}

body.fluent-ui.auth-login,
body.fluent-ui.auth-signup,
body.fluent-ui.auth-verify {
  display: flex;
  align-items: center;
  justify-content: center;
}

body.fluent-ui.auth-login .login-wrap,
body.fluent-ui.auth-signup .wrap {
  max-width: 460px;
}

body.fluent-ui.auth-login .login-card,
body.fluent-ui.auth-signup .wrap .card,
body.fluent-ui.auth-verify .card {
  border-radius: 18px;
  border-color: #c5d2e3;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.14);
}

body.fluent-ui.auth-login .login-logo,
body.fluent-ui.auth-signup h2,
body.fluent-ui.auth-verify h2 {
  color: var(--text-primary);
}

body.fluent-ui.auth-login .login-logo p,
body.fluent-ui.auth-signup .wrap .card > div,
body.fluent-ui.auth-verify #statusText {
  color: var(--text-muted);
}

body.fluent-ui.workspace-projects,
body.fluent-ui.workspace-project-board,
body.fluent-ui.workspace-map,
body.fluent-ui.workspace-sync,
body.fluent-ui.workspace-admin,
body.fluent-ui.workspace-admin-projects,
body.fluent-ui.workspace-admin-owner,
body.fluent-ui.workspace-admin-user,
body.fluent-ui.workspace-team,
body.fluent-ui.workspace-closure-shell {
  background:
    radial-gradient(1200px 340px at -4% -16%, rgba(15, 108, 189, 0.08), transparent 70%),
    radial-gradient(980px 300px at 104% -20%, rgba(51, 65, 85, 0.08), transparent 66%),
    #eaf0f7;
}

body.fluent-ui.workspace-projects .projects-main,
body.fluent-ui.workspace-project-board .project-view,
body.fluent-ui.workspace-map .map-shell,
body.fluent-ui.workspace-sync .sync-main {
  padding-top: 20px;
}

body.fluent-ui.workspace-projects .projects-grid,
body.fluent-ui.workspace-admin-projects .projects-grid,
body.fluent-ui.workspace-admin-owner .projects-grid {
  gap: 16px;
}

body.fluent-ui.workspace-project-board .grid-scroll,
body.fluent-ui.workspace-map .map-stage,
body.fluent-ui.workspace-sync .sync-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow-sm);
}

body.fluent-ui.workspace-map .map-stage {
  padding: 12px;
}

body.fluent-ui.workspace-sync .sync-table-wrap {
  padding: 0;
}

body.fluent-ui.workspace-admin .admin-main,
body.fluent-ui.workspace-admin-projects .admin-main,
body.fluent-ui.workspace-admin-owner .admin-main,
body.fluent-ui.workspace-team .shell,
body.fluent-ui.workspace-admin-user .main {
  padding-top: 20px;
}

body.fluent-ui.workspace-admin .admin-content,
body.fluent-ui.workspace-admin-projects .admin-main,
body.fluent-ui.workspace-admin-owner .admin-main,
body.fluent-ui.workspace-team .grid,
body.fluent-ui.workspace-admin-user .card {
  animation: fluent-page-in var(--fx-duration-slow) var(--fx-curve);
}

body.fluent-ui.workspace-admin .admin-sidebar,
body.fluent-ui.workspace-admin-projects .admin-sidebar,
body.fluent-ui.workspace-admin-owner .admin-sidebar,
body.fluent-ui.workspace-team .admin-sidebar,
body.fluent-ui.workspace-admin-user .side {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 260px;
  min-height: 100vh;
  max-height: 100vh;
  border: none;
  border-right: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  z-index: 30;
  pointer-events: auto;
}

body.fluent-ui.workspace-admin .admin-main,
body.fluent-ui.workspace-admin-projects .admin-main,
body.fluent-ui.workspace-admin-owner .admin-main,
body.fluent-ui.workspace-team .shell,
body.fluent-ui.workspace-admin-user .main {
  padding-left: 286px;
}

body.fluent-ui.workspace-admin :is(.admin-nav-link, .sidebar-brand),
body.fluent-ui.workspace-admin-projects :is(.admin-nav-link, .sidebar-brand),
body.fluent-ui.workspace-admin-owner :is(.admin-nav-link, .sidebar-brand),
body.fluent-ui.workspace-team :is(.admin-nav-link, .sidebar-brand),
body.fluent-ui.workspace-admin-user :is(.link, .brand) {
  position: relative;
}

body.fluent-ui.workspace-admin :is(.admin-nav-link, .link),
body.fluent-ui.workspace-admin-projects :is(.admin-nav-link, .link),
body.fluent-ui.workspace-admin-owner :is(.admin-nav-link, .link),
body.fluent-ui.workspace-team :is(.admin-nav-link, .link),
body.fluent-ui.workspace-admin-user :is(.admin-nav-link, .link) {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 9px 10px 9px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  text-decoration: none;
  color: #334155;
  transition:
    background var(--fx-duration-fast) var(--fx-curve),
    border-color var(--fx-duration-fast) var(--fx-curve),
    color var(--fx-duration-fast) var(--fx-curve);
}

body.fluent-ui.workspace-admin :is(.admin-nav-link, .link) .fx-icon,
body.fluent-ui.workspace-admin-projects :is(.admin-nav-link, .link) .fx-icon,
body.fluent-ui.workspace-admin-owner :is(.admin-nav-link, .link) .fx-icon,
body.fluent-ui.workspace-team :is(.admin-nav-link, .link) .fx-icon,
body.fluent-ui.workspace-admin-user :is(.admin-nav-link, .link) .fx-icon {
  width: 20px;
  height: 20px;
  color: #4c607b;
}

body.fluent-ui.workspace-admin :is(.admin-nav-link, .link):hover,
body.fluent-ui.workspace-admin-projects :is(.admin-nav-link, .link):hover,
body.fluent-ui.workspace-admin-owner :is(.admin-nav-link, .link):hover,
body.fluent-ui.workspace-team :is(.admin-nav-link, .link):hover,
body.fluent-ui.workspace-admin-user :is(.admin-nav-link, .link):hover {
  background: #edf3fb;
  border-color: #cdddf3;
  color: #0f172a;
}

body.fluent-ui.workspace-admin :is(.admin-nav-link, .link).active::after,
body.fluent-ui.workspace-admin-projects :is(.admin-nav-link, .link).active::after,
body.fluent-ui.workspace-admin-owner :is(.admin-nav-link, .link).active::after,
body.fluent-ui.workspace-team :is(.admin-nav-link, .link).active::after,
body.fluent-ui.workspace-admin-user :is(.admin-nav-link, .link).active::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #2b88d8 0%, #0f6cbd 100%);
}

body.fluent-ui.workspace-admin :is(.admin-nav-link, .link).active .fx-icon,
body.fluent-ui.workspace-admin-projects :is(.admin-nav-link, .link).active .fx-icon,
body.fluent-ui.workspace-admin-owner :is(.admin-nav-link, .link).active .fx-icon,
body.fluent-ui.workspace-team :is(.admin-nav-link, .link).active .fx-icon,
body.fluent-ui.workspace-admin-user :is(.admin-nav-link, .link).active .fx-icon {
  color: #0f5da5;
}

body.fluent-ui :is(.fx-nav-group-title) {
  padding: 8px 10px 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #5d7088;
  text-transform: uppercase;
}

body.fluent-ui.workspace-admin .admin-header,
body.fluent-ui.workspace-admin-projects .admin-header,
body.fluent-ui.workspace-admin-owner .admin-header,
body.fluent-ui.workspace-team .head,
body.fluent-ui.workspace-admin-user .card-h {
  box-shadow: none;
}

body.fluent-ui.workspace-admin .row-actions,
body.fluent-ui.workspace-admin .owner-group-main,
body.fluent-ui.workspace-team .project-perm-row {
  gap: 8px;
}

body.fluent-ui.workspace-admin .admin-main .btn,
body.fluent-ui.workspace-admin-projects .admin-main .btn,
body.fluent-ui.workspace-admin-owner .admin-main .btn,
body.fluent-ui.workspace-team .btn,
body.fluent-ui.workspace-admin-user .btn-row .btn {
  min-height: 34px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: none;
}

body.fluent-ui.workspace-admin .admin-main .btn-primary,
body.fluent-ui.workspace-admin-projects .admin-main .btn-primary,
body.fluent-ui.workspace-admin-owner .admin-main .btn-primary,
body.fluent-ui.workspace-team .btn-primary,
body.fluent-ui.workspace-admin-user .btn-secondary {
  background: #0f6cbd;
  border-color: #0f6cbd;
  color: #ffffff;
  box-shadow: none;
}

body.fluent-ui.workspace-admin .admin-main .btn-secondary,
body.fluent-ui.workspace-admin-projects .admin-main .btn-secondary,
body.fluent-ui.workspace-admin-owner .admin-main .btn-secondary,
body.fluent-ui.workspace-team .btn-secondary,
body.fluent-ui.workspace-admin-user .btn-group .btn-secondary {
  background: #f8fafc;
  border-color: #c4cfde;
  color: #17253c;
  box-shadow: none;
}

body.fluent-ui.workspace-admin .admin-main .btn-ghost,
body.fluent-ui.workspace-admin-projects .admin-main .btn-ghost,
body.fluent-ui.workspace-admin-owner .admin-main .btn-ghost,
body.fluent-ui.workspace-team .btn-ghost,
body.fluent-ui.workspace-admin-user .btn-ghost {
  background: transparent;
  border-color: #d2dcea;
  color: var(--text-secondary);
}

body.fluent-ui.workspace-admin .admin-main .btn-danger,
body.fluent-ui.workspace-admin-projects .admin-main .btn-danger,
body.fluent-ui.workspace-admin-owner .admin-main .btn-danger,
body.fluent-ui.workspace-team .btn-danger,
body.fluent-ui.workspace-admin-user .btn-danger {
  background: #d13438;
  border-color: #d13438;
  color: #ffffff;
}

body.fluent-ui.workspace-admin .admin-main .form-control,
body.fluent-ui.workspace-admin-projects .admin-main .form-control,
body.fluent-ui.workspace-admin-owner .admin-main .form-control,
body.fluent-ui.workspace-team .form-control,
body.fluent-ui.workspace-admin-user .form-control {
  background: #ffffff;
  border-color: #c5d2e3;
  color: var(--text-primary);
}

body.fluent-ui.workspace-admin .admin-main .form-control:focus,
body.fluent-ui.workspace-admin-projects .admin-main .form-control:focus,
body.fluent-ui.workspace-admin-owner .admin-main .form-control:focus,
body.fluent-ui.workspace-team .form-control:focus,
body.fluent-ui.workspace-admin-user .form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

body.fluent-ui.workspace-admin .owner-tree-chip {
  background: #eef5ff;
  border: 1px solid #c8ddfb;
  color: #1f4f88;
}

body.fluent-ui.workspace-admin .owner-group-row td {
  background: #f3f7fd !important;
}

body.fluent-ui.workspace-closure-shell .topbar,
body.fluent-ui.workspace-closure-shell .infobar {
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.10);
}

body.fluent-ui.workspace-closure-shell .topbar {
  height: 56px;
  padding: 0 14px;
}

body.fluent-ui.workspace-closure-shell .infobar {
  padding: 8px 14px;
}

body.fluent-ui.workspace-closure-shell .canvas-wrapper {
  background: #e7edf4;
}

body.fluent-ui .fx-dialog-backdrop {
  z-index: 1200;
}

body.fluent-ui .fx-dialog {
  max-width: 460px;
}

body.fluent-ui .fx-dialog-message {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.55;
}

body.fluent-ui .fx-dialog-hint {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 0.78rem;
}

body.fluent-ui .fx-dialog-input {
  margin-top: 12px;
}

body.fluent-ui .fx-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
}

body.fluent-ui .fx-dialog-error {
  margin-top: 8px;
  color: #9f1239;
  font-size: 0.78rem;
}

body.fluent-ui .proj-toolbar,
body.fluent-ui .sync-controls,
body.fluent-ui .sync-toolbar,
body.fluent-ui .map-filters,
body.fluent-ui .tabs,
body.fluent-ui .admin-actions {
  align-items: center;
}

body.fluent-ui .proj-toolbar,
body.fluent-ui .sync-controls,
body.fluent-ui .map-filters,
body.fluent-ui .tabs,
body.fluent-ui .admin-actions {
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 10px;
}

body.fluent-ui .login-card,
body.fluent-ui .wrap .card,
body.fluent-ui .hero-wrap .card,
body.fluent-ui .card[style*='max-width:520px'] {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

body.fluent-ui .glow-ring {
  opacity: 0.45;
}

body.fluent-ui .error-msg {
  border-color: #f3c8ce;
  background: #fdf3f4;
  color: #8f141f;
}

body.fluent-ui .mode-note {
  border-color: #bdddf8;
  background: #f1f8ff;
  color: #1b4f86;
}

body.fluent-ui .hero-wrap,
body.fluent-ui .login-wrap,
body.fluent-ui .wrap {
  animation: fluent-page-in var(--fx-duration-slow) var(--fx-curve);
}

body.fluent-ui .topbar .menu .btn {
  min-height: 32px;
}

body.fluent-ui .infobar {
  background: rgba(255, 255, 255, 0.84);
  border-bottom: 1px solid var(--border);
}

body.fluent-ui.closure-page .topbar,
body.fluent-ui.closure-page .infobar {
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(8px);
  border-color: var(--border);
}

body.fluent-ui.closure-page .badge-blue {
  background: #e2f1ff;
  color: #0f5da5;
  border: 1px solid #bad8f5;
}

body.fluent-ui.closure-page .badge-lock {
  background: #edf2f8;
  color: #3f4f67;
  border: 1px solid #d0d9e7;
}

body.fluent-ui[data-theme='dark'] {
  color-scheme: dark;
}

body.fluent-ui[data-theme='dark'].workspace-projects,
body.fluent-ui[data-theme='dark'].workspace-project-board,
body.fluent-ui[data-theme='dark'].workspace-map,
body.fluent-ui[data-theme='dark'].workspace-sync,
body.fluent-ui[data-theme='dark'].workspace-admin,
body.fluent-ui[data-theme='dark'].workspace-admin-projects,
body.fluent-ui[data-theme='dark'].workspace-admin-owner,
body.fluent-ui[data-theme='dark'].workspace-admin-user,
body.fluent-ui[data-theme='dark'].workspace-team,
body.fluent-ui[data-theme='dark'].workspace-closure-shell,
body.fluent-ui[data-theme='dark'].auth-login,
body.fluent-ui[data-theme='dark'].auth-signup,
body.fluent-ui[data-theme='dark'].auth-verify,
body.fluent-ui[data-theme='dark'].public-home,
body.fluent-ui[data-theme='dark'].public-contact {
  --admin-shell: #090c12;
  --admin-surface: #101827;
  --admin-card: #121b2a;
  --admin-card-border: #2f4159;
  --admin-text: #e2e8f0;
  --admin-muted: #9fb0c9;
  --admin-accent: #1577c9;
  --admin-accent-2: #0f6cbd;
  background:
    radial-gradient(1200px 360px at -6% -16%, rgba(11, 34, 58, 0.34), transparent 70%),
    radial-gradient(920px 300px at 104% -20%, rgba(3, 7, 12, 0.6), transparent 66%),
    #090c12 !important;
}

body.fluent-ui[data-theme='dark'] .admin-main,
body.fluent-ui[data-theme='dark'] .shell,
body.fluent-ui[data-theme='dark'] .main {
  background: transparent !important;
}

body.fluent-ui[data-theme='dark'] .admin-sidebar,
body.fluent-ui[data-theme='dark'] .side,
body.fluent-ui[data-theme='dark'] .app-header,
body.fluent-ui[data-theme='dark'] .topbar,
body.fluent-ui[data-theme='dark'] .infobar {
  background: rgba(9, 13, 20, 0.92) !important;
  border-color: #2c394c !important;
}

body.fluent-ui[data-theme='dark'] .card,
body.fluent-ui[data-theme='dark'] .project-card,
body.fluent-ui[data-theme='dark'] .loc-card,
body.fluent-ui[data-theme='dark'] .sync-card,
body.fluent-ui[data-theme='dark'] .form-card,
body.fluent-ui[data-theme='dark'] .info-card,
body.fluent-ui[data-theme='dark'] .meta-item,
body.fluent-ui[data-theme='dark'] .login-card,
body.fluent-ui[data-theme='dark'] .wrap .card,
body.fluent-ui[data-theme='dark'] .hero-wrap .card,
body.fluent-ui[data-theme='dark'] .u-tab-panel {
  background: #121a28 !important;
  border-color: #314258 !important;
}

body.fluent-ui[data-theme='dark'] #tmProjectsPerms,
body.fluent-ui[data-theme='dark'] #userAllowedProjectsBox,
body.fluent-ui[data-theme='dark'] .project-assign-list {
  background: #111a29 !important;
  border-color: #32445d !important;
  color: #dbe5f3 !important;
}

body.fluent-ui[data-theme='dark'] .form-control,
body.fluent-ui[data-theme='dark'] textarea.form-control,
body.fluent-ui[data-theme='dark'] select.form-control,
body.fluent-ui[data-theme='dark'] input.form-control,
body.fluent-ui[data-theme='dark'] .workspace-admin input,
body.fluent-ui[data-theme='dark'] .workspace-admin textarea,
body.fluent-ui[data-theme='dark'] .workspace-admin select,
body.fluent-ui[data-theme='dark'] .workspace-team input,
body.fluent-ui[data-theme='dark'] .workspace-team textarea,
body.fluent-ui[data-theme='dark'] .workspace-team select,
body.fluent-ui[data-theme='dark'] .workspace-admin-user input,
body.fluent-ui[data-theme='dark'] .workspace-admin-user textarea,
body.fluent-ui[data-theme='dark'] .workspace-admin-user select,
body.fluent-ui[data-theme='dark'] .workspace-admin-owner input,
body.fluent-ui[data-theme='dark'] .workspace-admin-owner textarea,
body.fluent-ui[data-theme='dark'] .workspace-admin-owner select,
body.fluent-ui[data-theme='dark'] .workspace-admin-projects input,
body.fluent-ui[data-theme='dark'] .workspace-admin-projects textarea,
body.fluent-ui[data-theme='dark'] .workspace-admin-projects select {
  background: #111a29 !important;
  border-color: #32445d !important;
  color: #e2e8f0 !important;
}

body.fluent-ui[data-theme='dark'] .form-control::placeholder,
body.fluent-ui[data-theme='dark'] textarea.form-control::placeholder,
body.fluent-ui[data-theme='dark'] input.form-control::placeholder {
  color: #8fa2bf !important;
}

body.fluent-ui[data-theme='dark'] .form-control:focus,
body.fluent-ui[data-theme='dark'] textarea.form-control:focus,
body.fluent-ui[data-theme='dark'] select.form-control:focus,
body.fluent-ui[data-theme='dark'] input.form-control:focus {
  background: #121f31 !important;
  border-color: #3f5f87 !important;
  box-shadow: 0 0 0 3px rgba(47, 119, 191, 0.24) !important;
}

body.fluent-ui[data-theme='dark'] .form-control:disabled,
body.fluent-ui[data-theme='dark'] textarea.form-control:disabled,
body.fluent-ui[data-theme='dark'] select.form-control:disabled,
body.fluent-ui[data-theme='dark'] input.form-control:disabled {
  background: #1a2638 !important;
  border-color: #304056 !important;
  color: #91a4be !important;
}

body.fluent-ui[data-theme='dark'] input.form-control:-webkit-autofill,
body.fluent-ui[data-theme='dark'] textarea.form-control:-webkit-autofill,
body.fluent-ui[data-theme='dark'] select.form-control:-webkit-autofill,
body.fluent-ui[data-theme='dark'] input.form-control:-webkit-autofill:hover,
body.fluent-ui[data-theme='dark'] input.form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: #e2e8f0 !important;
  box-shadow: 0 0 0 1000px #121f31 inset !important;
  caret-color: #e2e8f0;
}

body.fluent-ui[data-theme='dark'] .roles-table th,
body.fluent-ui[data-theme='dark'] .types-table th,
body.fluent-ui[data-theme='dark'] .table th,
body.fluent-ui[data-theme='dark'] .sync-table th {
  background: #172334 !important;
  color: #cbd5e1 !important;
}

body.fluent-ui[data-theme='dark'] .roles-table td,
body.fluent-ui[data-theme='dark'] .types-table td,
body.fluent-ui[data-theme='dark'] .table td,
body.fluent-ui[data-theme='dark'] .sync-table td {
  background: #121b2a !important;
  color: #d2ddec !important;
  border-color: #2b394e !important;
}

body.fluent-ui[data-theme='dark'] .roles-table tbody tr:nth-child(odd) td,
body.fluent-ui[data-theme='dark'] .roles-table tbody tr:nth-child(even) td,
body.fluent-ui[data-theme='dark'] .types-table tbody tr:nth-child(odd) td,
body.fluent-ui[data-theme='dark'] .types-table tbody tr:nth-child(even) td {
  background: #121b2a !important;
}

body.fluent-ui[data-theme='dark'] .roles-table tbody tr:hover td,
body.fluent-ui[data-theme='dark'] .types-table tbody tr:hover td,
body.fluent-ui[data-theme='dark'] .table tbody tr:hover td,
body.fluent-ui[data-theme='dark'] .sync-table tbody tr:hover td {
  background: #1a273a !important;
}

body.fluent-ui[data-theme='dark'] .admin-nav-link,
body.fluent-ui[data-theme='dark'] .link {
  color: #c8d5e9 !important;
}

body.fluent-ui[data-theme='dark'] .admin-nav-link:hover,
body.fluent-ui[data-theme='dark'] .link:hover {
  background: #1d2c40 !important;
  border-color: #32455f !important;
  color: #e2e8f0 !important;
}

body.fluent-ui[data-theme='dark'] .modal-backdrop {
  background: rgba(2, 6, 23, 0.64) !important;
}

body.fluent-ui[data-theme='dark'] .empty-state,
body.fluent-ui[data-theme='dark'] .empty-box {
  border-color: #2f4159;
  background: #121b2a;
  color: #a9bbd4;
}

body.fluent-ui :is(.btn, .form-control, a, select, input, textarea):focus-visible {
  outline: 2px solid rgba(15, 108, 189, 0.48);
  outline-offset: 1px;
}

@keyframes fluent-page-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fluent-toast-in {
  from {
    opacity: 0;
    transform: translateX(16px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@media (max-width: 980px) {
  body.fluent-ui .projects-header,
  body.fluent-ui .admin-header,
  body.fluent-ui .head,
  body.fluent-ui .sync-head,
  body.fluent-ui .map-top,
  body.fluent-ui .project-top {
    padding: 0;
    border-radius: 0;
  }

  body.fluent-ui .admin-sidebar,
  body.fluent-ui .side {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
  }

  body.fluent-ui.workspace-admin .admin-sidebar,
  body.fluent-ui.workspace-admin-projects .admin-sidebar,
  body.fluent-ui.workspace-admin-owner .admin-sidebar,
  body.fluent-ui.workspace-team .admin-sidebar,
  body.fluent-ui.workspace-admin-user .side {
    position: static;
    top: auto;
    left: auto;
    bottom: auto;
    width: auto;
  }

  body.fluent-ui.workspace-admin .admin-layout {
    grid-template-columns: 1fr;
  }

  body.fluent-ui .fx-nav-group-title {
    grid-column: 1 / -1;
  }

  body.fluent-ui.workspace-admin .admin-main,
  body.fluent-ui.workspace-admin-projects .admin-main,
  body.fluent-ui.workspace-admin-owner .admin-main,
  body.fluent-ui.workspace-team .shell,
  body.fluent-ui.workspace-admin-user .main {
    padding-left: 12px;
  }
}