:root{
    --navy-0:#0A1B3A; --navy-1:#07142B; --navy-2:#050E1F;
    --blue:#005096; --blue-bright:#0a68bd; --blue-glow:#2E8BD6; --blue-deep:#00386e;
    --gold:#FFD27A;
    --ink-0:#11161F; --ink-1:#2E3744; --ink-soft:#4B5563;
    --card-border:#C7CEDA; --line:#E7E9EE; --grey-2:#8A93A3; --grey:#5B6473;
    --green:#2BB673;
    --radius:8px; --input-radius:10px; --card-radius:18px;
    --gold-grad:linear-gradient(96deg,#FFD27A 0%,#F2B705 100%);
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Fustat',system-ui,-apple-system,sans-serif;
    color:#fff;line-height:1.5;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
    min-height:100svh;position:relative;overflow-x:clip;
    background:
      radial-gradient(900px 460px at 50% -14%, rgba(150,195,255,.16), transparent 64%),
      radial-gradient(760px 600px at 84% 8%, rgba(46,139,214,.12), transparent 60%),
      linear-gradient(162deg, var(--navy-0) 0%, var(--navy-1) 54%, var(--navy-2) 100%);
  }
  a{text-decoration:none;color:inherit;}
  img{max-width:100%;display:block;}

  /* ===== Ambient light layers ===== */
  .fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
  /* thin soft diagonal beam */
  .fx .beam{
    position:absolute;top:-260px;left:42%;width:3px;height:1500px;
    transform:rotate(24deg);transform-origin:top center;
    background:linear-gradient(180deg,
      rgba(200,228,255,0) 0%,
      rgba(208,232,255,.22) 22%,
      rgba(190,222,255,.20) 52%,
      rgba(170,210,255,.10) 80%,
      rgba(170,210,255,0) 100%);
    filter:blur(1.6px);opacity:.85;
  }
  /* faint wide radial glow */
  .fx .glow{
    position:absolute;top:-18%;left:50%;width:1100px;height:760px;
    transform:translateX(-50%);
    background:radial-gradient(closest-side, rgba(120,170,255,.12), transparent 70%);
    filter:blur(8px);
  }
  /* subtle blurred orbs */
  .fx .orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;}
  .fx .orb-blue{width:420px;height:420px;left:-120px;bottom:-120px;
    background:radial-gradient(circle, rgba(46,139,214,.55), transparent 70%);}
  .fx .orb-gold{width:300px;height:300px;right:-80px;top:8%;
    background:radial-gradient(circle, rgba(255,210,122,.30), transparent 70%);opacity:.4;}

  /* ===== Background product dashboard (ambient depth) ===== */
  .stage{position:fixed;inset:0;z-index:1;pointer-events:none;display:flex;
    align-items:center;justify-content:center;overflow:hidden;}
  .dash-amb{
    width:min(1180px,118vw);
    transform:perspective(1700px) rotateX(7deg) rotateZ(-6deg) translateY(-22px) scale(1.02);
    filter:blur(7px) saturate(.85) brightness(.62);
    opacity:.62;
  }
  .dash{
    background:#fff;border-radius:16px;border:1px solid var(--card-border);
    box-shadow:0 2px 6px rgba(6,30,70,.06), 0 60px 120px -34px rgba(0,0,0,.7);
    overflow:hidden;color:var(--ink-1);
  }
  .dash-top{display:flex;align-items:center;gap:.7rem;padding:.85rem 1.1rem;
    border-bottom:1px solid var(--line);background:#fbfcfd;}
  .dots{display:flex;gap:.4rem;}
  .dots span{width:11px;height:11px;border-radius:50%;background:#e2e5ea;}
  .dots span:nth-child(1){background:#f0b6b6;}
  .dots span:nth-child(2){background:#f3dca6;}
  .dots span:nth-child(3){background:#bfe3c6;}
  .dash-where{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--grey);font-weight:500;}
  .dash-where b{color:var(--ink-0);font-weight:600;}
  .dash-pill{margin-left:auto;font-size:.74rem;color:var(--blue);background:#eaf2fa;
    padding:.26rem .6rem;border-radius:100px;font-weight:600;display:inline-flex;align-items:center;gap:.32rem;}
  .dash-pill .lvdot{width:.45rem;height:.45rem;border-radius:50%;background:var(--green);}
  .app{display:grid;grid-template-columns:172px 1fr;}
  .rail{border-right:1px solid var(--line);background:#fafbfc;padding:.85rem .6rem;
    display:flex;flex-direction:column;gap:.18rem;}
  .rail-grp{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-2);
    font-weight:700;padding:.4rem .55rem .25rem;}
  .rail a{display:flex;align-items:center;gap:.6rem;font-size:.82rem;color:var(--ink-1);
    font-weight:500;padding:.46rem .55rem;border-radius:8px;}
  .rail a i{width:16px;text-align:center;color:var(--grey-2);font-size:.82rem;}
  .rail a.active{background:#eaf2fa;color:var(--blue);}
  .rail a.active i{color:var(--blue);}
  .content{padding:1rem;display:grid;grid-template-columns:1.15fr 1fr;gap:.85rem;align-items:start;}
  .kpi-strip{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;}
  .kpi{border:1px solid var(--card-border);border-radius:10px;padding:.7rem .8rem;background:#fff;}
  .kpi .lbl{font-size:.66rem;color:var(--grey-2);font-weight:600;text-transform:uppercase;letter-spacing:.03em;}
  .kpi .val{font-size:1.3rem;font-weight:300;color:var(--ink-0);letter-spacing:-.01em;line-height:1.2;margin-top:.12rem;}
  .kpi .chg{font-size:.72rem;font-weight:600;margin-top:.05rem;display:inline-flex;align-items:center;gap:.22rem;}
  .chg.up{color:var(--green);} .chg.down{color:#d05a5a;} .chg.neutral{color:var(--grey);}
  .kpi.kpi-save{background:linear-gradient(160deg,#06203f,#0a2c54);border-color:#0a2c54;}
  .kpi.kpi-save .lbl{color:rgba(255,225,160,.85);}
  .kpi.kpi-save .val{color:var(--gold);font-weight:400;}
  .kpi.kpi-save .chg{color:rgba(231,238,247,.7);}
  .wcard{border:1px solid var(--card-border);border-radius:10px;background:#fff;padding:.8rem .85rem;}
  .wcard h4{font-size:.82rem;font-weight:600;color:var(--ink-0);display:flex;align-items:center;gap:.4rem;}
  .wcard h4 .wt{margin-left:auto;font-size:.68rem;font-weight:600;color:var(--grey-2);}
  .ring-wrap{display:flex;align-items:center;gap:.85rem;margin-top:.6rem;}
  .ring{position:relative;width:84px;height:84px;flex:none;}
  .ring svg{transform:rotate(-90deg);}
  .ring .track{stroke:#eef0f3;stroke-width:9;fill:none;}
  .ring .prog{stroke:var(--blue);stroke-width:9;fill:none;stroke-linecap:round;
    stroke-dasharray:226;stroke-dashoffset:62;}
  .ring .rc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
  .ring .rc b{font-size:1.05rem;font-weight:400;color:var(--ink-0);line-height:1;}
  .ring .rc span{font-size:.56rem;color:var(--grey-2);text-transform:uppercase;letter-spacing:.04em;margin-top:.15rem;}
  .ring-legend{font-size:.72rem;color:var(--grey);line-height:1.6;}
  .ring-legend .lg{display:flex;align-items:center;gap:.4rem;}
  .ring-legend .lg i{width:.5rem;height:.5rem;border-radius:50%;display:inline-block;}
  .ring-legend .lg.t i{background:var(--blue);}
  .ring-legend .lg.l i{background:#cfd8e3;}
  .ring-legend b{color:var(--ink-0);font-weight:600;}
  .minibars{display:flex;align-items:flex-end;gap:.34rem;height:64px;margin-top:.7rem;}
  .minibars .mb{flex:1;background:linear-gradient(180deg,#3b86c9,#005096);border-radius:3px 3px 0 0;}
  .wsub{font-size:.68rem;color:var(--grey-2);margin-top:.5rem;}

  /* ===== Login layer ===== */
  .screen{position:relative;z-index:3;min-height:100svh;display:flex;
    align-items:center;justify-content:flex-start;
    padding:clamp(28px,5vw,72px);}
  .panel{width:100%;max-width:438px;
    background:rgba(255,255,255,.97);
    border:1px solid #fff;
    border-radius:var(--card-radius);
    box-shadow:
      0 1px 0 rgba(255,255,255,.6) inset,
      0 2px 8px rgba(0,0,0,.18),
      0 50px 100px -30px rgba(0,0,0,.6);
    padding:clamp(28px,3.4vw,42px);
    color:var(--ink-1);
    position:relative;overflow:hidden;
  }
  /* light catch on the glass top edge */
  .panel::before{content:"";position:absolute;top:0;left:0;right:0;height:120px;
    background:linear-gradient(180deg, rgba(46,139,214,.07), transparent);pointer-events:none;}
  .panel>*{position:relative;}

  .brand{display:flex;align-items:center;gap:.6rem;margin-bottom:1.6rem;}
  .brand img{height:34px;width:auto;}
  .brand .name{font-weight:700;font-size:1.32rem;letter-spacing:-.02em;color:var(--ink-0);}

  .head{font-weight:300;font-size:clamp(1.85rem,1.3rem+1.6vw,2.3rem);
    letter-spacing:-.02em;color:var(--ink-0);line-height:1.1;}
  .sub{margin-top:.55rem;font-size:.98rem;color:var(--ink-soft);font-weight:400;}

  form{margin-top:1.7rem;}
  .field{margin-bottom:1.05rem;}
  label{display:block;font-size:.82rem;font-weight:600;color:var(--ink-1);margin-bottom:.4rem;}
  .input-wrap{position:relative;}
  .input{
    width:100%;font-family:inherit;font-size:.98rem;color:var(--ink-0);
    background:#fff;border:1.5px solid var(--card-border);border-radius:var(--input-radius);
    padding:.78rem .9rem;line-height:1.3;transition:border-color .16s, box-shadow .16s;
  }
  .input::placeholder{color:#9aa3b2;}
  .input:focus{outline:none;border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(0,80,150,.16);}
  .input.has-icon{padding-right:2.9rem;}
  .eye{position:absolute;top:50%;right:.4rem;transform:translateY(-50%);
    width:2.1rem;height:2.1rem;display:grid;place-items:center;
    background:none;border:none;cursor:pointer;color:var(--grey-2);
    border-radius:8px;transition:color .15s, background .15s;}
  .eye:hover{color:var(--blue);background:#eef2f7;}
  .eye:focus-visible{outline:2px solid var(--blue);outline-offset:1px;}

  .row{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:.2rem 0 1.4rem;}
  .remember{display:flex;align-items:center;gap:.5rem;font-size:.88rem;color:var(--ink-1);cursor:pointer;user-select:none;}
  .remember input{position:absolute;opacity:0;width:0;height:0;}
  .box{width:1.15rem;height:1.15rem;border:1.5px solid var(--card-border);border-radius:5px;
    display:grid;place-items:center;background:#fff;transition:background .15s,border-color .15s;flex:none;}
  .box i{font-size:.66rem;color:#fff;opacity:0;transform:scale(.5);transition:opacity .15s,transform .15s;}
  .remember input:checked + .box{background:var(--blue);border-color:var(--blue);}
  .remember input:checked + .box i{opacity:1;transform:scale(1);}
  .remember input:focus-visible + .box{box-shadow:0 0 0 3px rgba(0,80,150,.18);}
  .forgot{font-size:.88rem;font-weight:600;color:var(--blue-glow);}
  .forgot:hover{color:var(--blue);text-decoration:underline;}

  .btn-signin{
    width:100%;justify-content:center;display:inline-flex;align-items:center;gap:.5rem;
    font-family:inherit;font-size:1rem;font-weight:600;color:#fff;cursor:pointer;
    border:none;border-radius:var(--radius);padding:.92rem 1rem;
    background:linear-gradient(180deg, var(--blue-bright) 0%, var(--blue) 100%);
    box-shadow:0 10px 24px -10px rgba(0,80,150,.6), 0 1px 0 rgba(255,255,255,.25) inset;
    transition:transform .16s, box-shadow .16s, filter .16s;
  }
  .btn-signin:hover{transform:translateY(-1px);filter:brightness(1.05);
    box-shadow:0 16px 30px -12px rgba(0,80,150,.66), 0 1px 0 rgba(255,255,255,.25) inset;}
  .btn-signin:active{transform:translateY(0);}
  .btn-signin:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}

  .foot{margin-top:1.5rem;padding-top:1.3rem;border-top:1px solid var(--line);text-align:center;}
  .foot .trial{font-size:.92rem;color:var(--ink-soft);}
  .foot .trial a{font-weight:600;color:var(--blue);}
  .foot .trial a:hover{text-decoration:underline;}
  .foot .nocc{margin-top:.4rem;font-size:.78rem;color:var(--grey-2);display:inline-flex;align-items:center;gap:.35rem;}
  .foot .nocc i{color:var(--green);font-size:.72rem;}

  /* ===== Entrance animation ===== */
  @keyframes rise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
  .anim{opacity:0;animation:rise .7s cubic-bezier(.22,.7,.3,1) forwards;}
  .d1{animation-delay:.05s;} .d2{animation-delay:.13s;} .d3{animation-delay:.21s;}
  .d4{animation-delay:.29s;} .d5{animation-delay:.37s;} .d6{animation-delay:.45s;} .d7{animation-delay:.53s;}
  .panel{animation:rise .8s cubic-bezier(.22,.7,.3,1) both;}

  /* ===== Responsive ===== */
  @media (max-width:980px){
    .dash-amb{transform:perspective(1500px) rotateX(6deg) rotateZ(-5deg) scale(1.05);}
  }
  @media (max-width:680px){
    .stage{opacity:.18;}
    .dash-amb{filter:blur(10px) brightness(.5);}
    .screen{justify-content:center;padding:22px;align-items:flex-start;padding-top:max(34px,7svh);}
    .panel{max-width:480px;background:rgba(255,255,255,.98);}
    .fx .orb-gold{opacity:.28;}
  }
  @media (max-width:380px){
    .screen{padding:16px;}
    .panel{padding:24px 20px;}
  }

  @media (prefers-reduced-motion: reduce){
    .anim,.panel{animation:none!important;opacity:1!important;transform:none!important;}
    .dash-pill .lvdot{animation:none;}
  }

/* flash messages */
.auth-alert{margin:0 0 14px;padding:11px 14px;border-radius:10px;font-size:.9rem;font-weight:500;line-height:1.4;border:1px solid transparent;}
.auth-alert-danger{background:#FDECEC;border-color:#F3C2C2;color:#9B1C1C;}
.auth-alert-success{background:#E8F5EE;border-color:#BFE3CD;color:#1B6B3A;}
.auth-alert-warning{background:#FDF4E3;border-color:#F0DDB0;color:#8A5A12;}
.auth-alert-info{background:#EAF1FA;border-color:#C3D6EE;color:#1B4D80;}