:root{
  --fnx-bg:#f4f7fb;
  --fnx-surface:#ffffff;
  --fnx-surface-2:#f8fbff;
  --fnx-ink:#142033;
  --fnx-muted:#68758a;
  --fnx-line:#dfe7f1;
  --fnx-navy:#071b33;
  --fnx-navy-2:#0b2d55;
  --fnx-blue:#0b67d1;
  --fnx-blue-2:#1684ff;
  --fnx-cyan:#39b8ff;
  --fnx-shadow:0 14px 38px rgba(15,42,75,.10);
  --fnx-shadow-soft:0 6px 20px rgba(15,42,75,.07);
}
html{background:var(--fnx-bg)}
body{background:linear-gradient(180deg,#eef4fb 0,#f7f9fc 360px,#f5f7fa 100%);color:var(--fnx-ink)}
.top{
  background:
    radial-gradient(circle at 82% 0%,rgba(57,184,255,.24),transparent 32%),
    linear-gradient(115deg,var(--fnx-navy),var(--fnx-navy-2) 55%,#0b559d);
  padding:18px 22px;
  min-height:94px;
  box-shadow:0 12px 30px rgba(5,24,45,.18);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brand{font-size:29px;letter-spacing:-.7px;font-weight:900;text-shadow:0 1px 0 rgba(255,255,255,.06)}
.sub{font-size:12px;color:#c9def4;letter-spacing:.15px;margin-top:2px}
.nexo{
  border:1px solid rgba(255,255,255,.45)!important;
  background:rgba(255,255,255,.96)!important;
  color:#0a4e91!important;
  font-weight:900!important;
  box-shadow:0 8px 20px rgba(1,20,42,.20);
  padding:12px 17px!important;
}
.modules{
  background:rgba(7,27,51,.98);
  padding:7px 12px;
  gap:5px;
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 7px 20px rgba(4,21,39,.12);
}
.modules button{
  color:#cfe0ef;
  border-radius:10px!important;
  padding:10px 14px!important;
  font-size:13px;
  transition:.18s ease;
}
.modules button:hover{background:rgba(255,255,255,.08);color:#fff}
.modules button.active{
  background:linear-gradient(135deg,#fff,#eef6ff)!important;
  color:#0a4f94!important;
  box-shadow:0 5px 16px rgba(0,0,0,.16)!important;
}
main{padding:22px 18px 30px}
.panel{
  border:1px solid rgba(207,219,233,.9);
  border-radius:18px;
  padding:18px;
  margin-bottom:16px;
  background:rgba(255,255,255,.97);
  box-shadow:var(--fnx-shadow-soft);
}
.panel h2,.panel h3{letter-spacing:-.35px;color:#14243a}
.hero{
  background:
    radial-gradient(circle at 90% 10%,rgba(57,184,255,.18),transparent 33%),
    linear-gradient(135deg,#ffffff,#f0f7ff 70%,#eaf4ff);
  border-left:0;
  position:relative;
  overflow:hidden;
  box-shadow:var(--fnx-shadow);
}
.hero:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--fnx-blue-2),var(--fnx-cyan))}
.hero h2{font-size:25px;margin-bottom:7px}
.hero p{color:var(--fnx-muted);max-width:680px}
.stats{gap:13px}
.stat{
  border:1px solid var(--fnx-line);
  border-radius:16px;
  padding:16px;
  background:linear-gradient(145deg,#fff,#f8fbff);
  box-shadow:0 7px 20px rgba(21,55,91,.06);
}
.stat b{font-size:23px;color:#10233b;letter-spacing:-.4px}
.stat:first-child{border-top:3px solid #1684ff}
.stat:nth-child(2){border-top:3px solid #44a6ff}
.stat:nth-child(3){border-top:3px solid #75bfff}
.stat:nth-child(4){border-top:3px solid #9dd3ff}
button{
  border:1px solid #d7e2ee;
  border-radius:10px;
  background:#fff;
  color:#1d2c40;
  font-weight:700;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
button:hover{box-shadow:0 5px 14px rgba(14,52,89,.10)}
button:active{transform:translateY(1px)}
.primary{background:linear-gradient(135deg,#0b67d1,#1684ff)!important;border-color:#0b67d1!important;box-shadow:0 7px 16px rgba(11,103,209,.20)}
.green{background:linear-gradient(135deg,#147848,#1b9a5b)!important;border-color:#147848!important}
.amber{background:linear-gradient(135deg,#b96500,#d88618)!important;border-color:#b96500!important}
.purple{background:linear-gradient(135deg,#6240b9,#805bd4)!important;border-color:#6240b9!important}
.red{background:linear-gradient(135deg,#b72d38,#d74752)!important;border-color:#b72d38!important}
input,select,textarea{
  border:1px solid #d8e2ed!important;
  border-radius:10px!important;
  background:#fbfdff!important;
  box-shadow:inset 0 1px 2px rgba(10,40,70,.03);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:#62aef7!important;box-shadow:0 0 0 3px rgba(22,132,255,.10)}
.row{border-bottom:1px solid #edf2f7}
.badge{background:#eaf4ff;color:#155b9f;border:1px solid #d2e8ff}
.modal{backdrop-filter:blur(5px)}
.card{
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 28px 70px rgba(5,24,45,.27);
  border-radius:20px;
}
.preview{backdrop-filter:blur(5px)}
.document{box-shadow:0 20px 55px rgba(0,0,0,.18);border-radius:4px}
.app-footer{color:#8390a3}
@media(max-width:850px){
  .top{padding:15px 18px;min-height:88px}
  .brand{font-size:28px}
  .modules{padding:6px 8px}
  .modules button{padding:9px 12px!important}
  main{padding:15px 12px 24px}
  .panel{border-radius:16px;padding:15px}
  .stat{padding:15px}
  .hero h2{font-size:22px}
}