/* Fanari master visual identity: blue fuel mark, pink wordmark, and star accent. */
:root{
  --fanari-blue:#0752a7;
  --fanari-blue-deep:#072d67;
  --fanari-pink:#f658c2;
  --navy:var(--fanari-blue-deep);
  --navy-deep:#051d47;
  --pink:var(--fanari-pink);
  --pink-soft:#fdeaf7;
  --ink:#112b55;
  --muted:#667793;
  --line:#d8e3f1;
  --bg:#f4f7fc;
  --shadow:0 18px 45px rgba(7,45,103,.12);
}

.auth-page{background:radial-gradient(circle at 12% 12%,#f658c235 0 18%,transparent 42%),radial-gradient(circle at 92% 85%,#3288df34 0 16%,transparent 39%),linear-gradient(125deg,#061631 0%,#072d67 58%,#542852 100%)}
.auth-page:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:repeating-linear-gradient(135deg,transparent 0 46px,#ffffff07 47px 48px)}
.auth-page:before,.portal-page:before{opacity:.085;filter:saturate(1.3)}
.portal-page:after{background:radial-gradient(circle at 8% 18%,#f658c21c 0 110px,transparent 111px),radial-gradient(circle at 92% 78%,#0752a716 0 160px,transparent 161px)}
.auth-shell{border:1px solid #ffffff2b;box-shadow:0 30px 90px #020b1f9e}
.brand-panel{position:relative;overflow:hidden;background:radial-gradient(circle at 20% 16%,#3486df 0,transparent 28%),radial-gradient(circle at 78% 85%,#f658c229 0,transparent 24%),linear-gradient(145deg,#072d67,#051d47 70%)}
.brand-panel:after{content:"";position:absolute;width:340px;height:340px;left:-125px;bottom:-190px;border:50px solid #f658c22e;border-radius:50%;pointer-events:none}
.brand-panel>*{position:relative;z-index:1}
.brand-logo{box-shadow:0 14px 30px #03112a5c}
.brand-panel h1 em,.hero-card h1 em{color:#ff89d6}
.btn.primary{background:linear-gradient(120deg,var(--fanari-blue-deep),var(--fanari-blue));box-shadow:0 8px 18px #0752a740}
.form-stack input:focus,.form-stack select:focus{border-color:var(--fanari-pink);box-shadow:0 0 0 4px #f658c221}

/* The supplied logo replaces text-only branding in every secured workspace header. */
.app-header{height:78px;box-shadow:0 5px 18px #08336b08}
.app-header:after{content:"";position:absolute;inset:auto 0 0;height:3px;background:linear-gradient(90deg,var(--fanari-blue),var(--fanari-pink) 52%,var(--fanari-blue))}
.logo-word{display:inline-flex;align-items:center;gap:10px;line-height:1}
.logo-word img{display:block;width:132px;height:50px;object-fit:contain;border-radius:8px;background:#fff}
.logo-word small{display:block;margin:0;padding-inline-start:10px;border-inline-start:1px solid #cad8eb;font-size:.53rem;letter-spacing:.14em;line-height:1.5;color:var(--fanari-pink)}
.hero-card{background:radial-gradient(circle at 88% 18%,#ffffff1c 0,transparent 25%),linear-gradient(120deg,#07245b,#0752a7)}
.hero-card:before{border-color:#f658c23b}
.vehicle-card:after{background:linear-gradient(90deg,var(--fanari-blue-deep),var(--fanari-pink))}
.pos-page{background:radial-gradient(circle at 8% 8%,#f658c21b 0 180px,transparent 181px),linear-gradient(135deg,#eaf1fb,#f7f9fd 48%,#e8eff9)}
.pos-command-bar{background:radial-gradient(circle at 86% 20%,#ffffff26 0 8%,transparent 9%),linear-gradient(115deg,#051d47,#0752a7 62%,#b84092)}

/* Public website gets the same recognizable blue/pink signature. */
.site-header{position:relative}
.site-header:after{content:"";position:absolute;inset:auto 0 0;height:3px;border-radius:999px;background:linear-gradient(90deg,var(--fanari-blue),var(--fanari-pink),var(--fanari-blue));opacity:.78}
.brand img{width:112px;height:52px}
.header-login,.primary{background:linear-gradient(120deg,var(--fanari-blue-deep),var(--fanari-blue))}
.hero-card{box-shadow:0 24px 40px #0752a73b}

html[data-theme="dark"] .logo-word img{background:#fff}

@media(max-width:760px){
  .app-header{height:70px;padding:0 14px}
  .logo-word{gap:6px}
  .logo-word img{width:104px;height:42px}
  .logo-word small{padding-inline-start:6px;font-size:.43rem}

  /* The installed mobile app keeps the Fanari mark and palette visible on every screen. */
  .auth-page{min-height:100dvh;padding:0;place-items:stretch;background:radial-gradient(circle at 14% 8%,#f658c24d 0 16%,transparent 38%),radial-gradient(circle at 92% 82%,#3e92ed5c 0 19%,transparent 44%),linear-gradient(145deg,#04132e 0%,#072d67 56%,#692d67 100%)}
  .auth-page:before{z-index:0;background-image:url('fanari-logo.png');background-repeat:no-repeat;background-size:min(330px,78vw);background-position:center 88%;opacity:.16;filter:saturate(1.45) drop-shadow(0 16px 32px #02112b80)}
  .auth-shell{position:relative;width:100%;min-height:100dvh;border:0;border-radius:0;background:linear-gradient(180deg,#ffffffed,#f7fbffef);box-shadow:none}
  .auth-shell:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(145deg,#0752a70b 0 1px,transparent 1px),url('fanari-logo.png');background-repeat:repeat,no-repeat;background-size:22px 22px,min(230px,58vw);background-position:center,center calc(100% - 32px);opacity:.11}
  .auth-shell>section{position:relative;z-index:1}
  .brand-panel{min-height:238px;padding:30px 9%;background:radial-gradient(circle at 18% 12%,#55a7ff9c 0,transparent 28%),radial-gradient(circle at 84% 82%,#f658c23b 0,transparent 30%),linear-gradient(145deg,#061c43,#0752a7 72%,#76336e)}
  .brand-panel:after{width:270px;height:270px;left:-126px;bottom:-150px;border-width:39px}
  .brand-logo{width:78px;height:78px;margin-bottom:22px;border-radius:18px}
  .brand-panel h1{font-size:clamp(2rem,9vw,2.55rem)}
  .auth-card{background:#ffffffed;backdrop-filter:blur(14px)}
  .portal-page{background:radial-gradient(circle at 14% 10%,#f658c229 0 14%,transparent 36%),radial-gradient(circle at 88% 84%,#0752a720 0 18%,transparent 40%),linear-gradient(180deg,#eaf3ff 0%,#f9fbff 54%,#f2effb 100%)}
  .portal-page:before{z-index:0;background-size:min(300px,68vw);background-position:center calc(100% - 24px);opacity:.13;filter:saturate(1.45)}
  .portal-page:after{z-index:0;background:linear-gradient(135deg,#0752a708,transparent 48%,#f658c212)}
}
@media(max-width:520px){.brand img{width:82px;height:42px}}
