/* Featux portal-wide theme — aligned with the new Bento homepage */
:root{
  --fx-bg:#121212;
  --fx-surface:#1D1B20;
  --fx-surface-hi:#242229;
  --fx-line:rgba(255,255,255,.08);
  --fx-text:#eef2ff;
  --fx-muted:rgba(238,242,255,.62);
  /* Shared Featux brand tile palette (kept in one place for all templates) */
  --fx-brand-1:#0c3366;
  --fx-brand-2:#0a4080;
  --fx-brand-3:#082952;
  --fx-brand-glow-1:rgba(96,165,250,.18);
  --fx-brand-glow-2:rgba(59,130,246,.14);
  --fx-brand-glow-3:rgba(37,99,235,.12);

  /* Shared login/auth tile accent */
  --fx-login-accent:#B0AEA5;
  --fx-login-accent-rgb:176,174,165;

  /* Legacy aliases used by Tailwind-era pages */
  --fx-blue:var(--fx-brand-1);
  --fx-blue-2:var(--fx-brand-2);
  --fx-blue-3:var(--fx-brand-3);
  --fx-pink:#e91e63;
  --fx-green:#10b981;
  --fx-cyan:#26c6da;
  --fx-radius:28px;
}

html{background:var(--fx-bg)}
body{
  background:var(--fx-bg)!important;
  color:var(--fx-text)!important;
}

/* soft ambient background like the homepage */
body::before{
  content:"";
  position:fixed;
  inset:-20%;
  pointer-events:none;
  z-index:-2;
  background:
    radial-gradient(circle at 16% 10%,rgba(59,130,246,.20),transparent 22%),
    radial-gradient(circle at 82% 18%,rgba(233,30,99,.12),transparent 20%),
    radial-gradient(circle at 52% 92%,rgba(38,198,218,.12),transparent 26%);
  filter:blur(6px);
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:radial-gradient(circle at 50% 20%,black,transparent 74%);
}

/* Tailwind-era pages: normalize major cards/surfaces */
.bg-white,
[class*="bg-white"],
[class*="bg-slate-50"],
[class*="dark:bg-slate-800"],
[class*="dark:bg-slate-900"],
[class*="dark:bg-background-dark"]{
  background-color:var(--fx-surface)!important;
  color:var(--fx-text)!important;
}

[class*="border-slate"],
[class*="dark:border-white"]{
  border-color:var(--fx-line)!important;
}

.shadow-m3-1,.shadow-m3-2,.shadow-lg,.shadow-xl{
  box-shadow:0 24px 60px rgba(0,0,0,.34)!important;
}

.rounded-3xl,.rounded-2xl,.rounded-xl{
  overflow:hidden;
}

/* header/nav brand blocks */
header, nav, .nav, .navbar{
  background:rgba(29,27,32,.72)!important;
  backdrop-filter:blur(16px);
  border-color:var(--fx-line)!important;
}

/* brand logo chips */
.w-8.h-8.bg-primary,
[class*="bg-primary"].w-8.h-8{
  background:linear-gradient(145deg,var(--fx-blue),var(--fx-blue-2),var(--fx-blue-3))!important;
  box-shadow:0 10px 28px rgba(37,99,235,.28);
}

/* primary actions */
.bg-primary,
button.bg-primary,
a.bg-primary,
[class*="bg-primary"]{
  background:var(--fx-blue-2)!important;
  color:white!important;
}
.hover\:bg-primary-hover:hover,
button.bg-primary:hover,
a.bg-primary:hover{
  background:var(--fx-blue)!important;
}

.text-primary,
[class*="text-primary"]{
  color:#82b1ff!important;
}

.focus\:ring-primary:focus{
  --tw-ring-color:rgba(59,130,246,.55)!important;
}

/* old bento pages */
.bento{
  filter:drop-shadow(0 24px 60px rgba(0,0,0,.34));
}
.tile,
.card,
.panel,
.form-tile,
.list-tile,
.stats-card,
.upload-tile,
.table-tile,
.extract-card{
  background-color:var(--fx-surface);
  border-color:var(--fx-line)!important;
}
.tile::after,
.card::after,
.panel::after{
  box-shadow:inset 0 0 0 1px var(--fx-line)!important;
}

.brand,
.header-tile,
.hero-tile{
  background:linear-gradient(145deg,var(--fx-brand-1) 0%,var(--fx-brand-2) 50%,var(--fx-brand-3) 100%)!important;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.brand::before,
.header-tile::before,
.hero-tile::before{
  content:"";
  position:absolute;
  inset:-45%;
  background:
    radial-gradient(circle at 18% 20%,var(--fx-brand-glow-1),transparent 17%),
    radial-gradient(circle at 72% 35%,var(--fx-brand-glow-2),transparent 19%),
    radial-gradient(circle at 86% 82%,var(--fx-brand-glow-3),transparent 22%);
  animation:fx-aurora 10s ease-in-out infinite alternate;
  z-index:-1;
}
.brand-logo{
  border:1px solid rgba(255,255,255,.24)!important;
  box-shadow:0 12px 36px rgba(15,23,42,.22),inset 0 1px 0 rgba(255,255,255,.28)!important;
}

input,textarea,select{
  background:rgba(255,255,255,.06)!important;
  border-color:var(--fx-line)!important;
  color:var(--fx-text)!important;
}
input::placeholder,textarea::placeholder{color:rgba(238,242,255,.42)!important}

@keyframes fx-aurora{
  0%{transform:translate3d(-2%,0,0) rotate(0deg)}
  100%{transform:translate3d(3%,2%,0) rotate(8deg)}
}


/* --------------------------------------------------------------------------
   Shared Featux / Login tile presets
   Keep cross-page tile styling here so individual templates only own layout
   and page-specific details.
   -------------------------------------------------------------------------- */
.brand,
.header-tile,
.hero-tile{
  color:white!important;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.brand::after,
.header-tile::after,
.hero-tile::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(120deg,rgba(0,0,0,.55),transparent 72%);
  opacity:.34;
  z-index:-1;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)!important;
}
.brand-logo{
  background:rgba(255,255,255,.15)!important;
  border:1px solid rgba(255,255,255,.25)!important;
  box-shadow:0 12px 36px rgba(15,23,42,.22),inset 0 1px 0 rgba(255,255,255,.28)!important;
}

.login-tile,
.auth-tile,
.login-hint,
.user-tile,
.account-tile{
  background:#1D1B20!important;
  color:var(--fx-text)!important;
}
.login-tile .tab-btn.active,
.login-tile .submit-btn,
.login-tile button[type="submit"],
.login-tile .button-primary{
  background:rgba(var(--fx-login-accent-rgb),.14)!important;
  border:1px solid rgba(var(--fx-login-accent-rgb),.55)!important;
  color:var(--fx-login-accent)!important;
  box-shadow:0 8px 18px rgba(0,0,0,.22),0 0 18px rgba(var(--fx-login-accent-rgb),.18),inset 0 0 0 1px rgba(255,255,255,.12)!important;
}
.login-tile .tab-btn.active:hover,
.login-tile .submit-btn:hover,
.login-tile button[type="submit"]:hover,
.login-tile .button-primary:hover{
  background:rgba(var(--fx-login-accent-rgb),.24)!important;
  color:var(--fx-login-accent)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.26)!important;
}
.login-tile .form-label,
.login-tile .tab-btn.active,
.login-tile a,
.login-hint a,
.user-tile .auth-link,
.account-tile .pill-link,
.pill-link,
.auth-link{
  color:var(--fx-login-accent)!important;
}
.login-tile .form-input:focus,
.login-tile input:focus{
  border-color:rgba(var(--fx-login-accent-rgb),.6)!important;
  box-shadow:0 0 0 3px rgba(var(--fx-login-accent-rgb),.15)!important;
}
.pill-link,
.auth-link,
.login-hint a{
  border-color:rgba(var(--fx-login-accent-rgb),.45)!important;
  background:rgba(var(--fx-login-accent-rgb),.10)!important;
}
.pill-link:hover,
.auth-link:hover,
.login-hint a:hover{
  color:var(--fx-login-accent)!important;
  background:rgba(var(--fx-login-accent-rgb),.16)!important;
}