:root{
  --jx-navy:#10233c;
  --jx-navy-deep:#0b1930;
  --jx-navy-soft:#173553;
  --jx-navy-lighter:#214666;
  --jx-orange:#ff3b08;
  --jx-orange-dark:#e93506;
  --jx-blue:#20a9ee;
  --jx-blue-dark:#118dcc;
  --jx-bg:#f3f6f9;
  --jx-surface:#ffffff;
  --jx-text:#15243a;
  --jx-muted:#6c7a8e;
  --jx-line:#e3e9ef;
  --jx-success:#198754;
  --jx-radius:16px;
  --jx-shadow:0 14px 38px rgba(16,35,60,.08);
}

*{box-sizing:border-box}
html{min-height:100%;background:var(--jx-bg)}
body{
  min-height:100vh;
  margin:0;
  background:var(--jx-bg);
  color:var(--jx-text);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--jx-blue-dark)}
a:hover{color:var(--jx-navy)}

/* Brand */
.jx-logo{
  display:inline-flex;
  align-items:center;
  line-height:1;
  color:#fff;
  font-size:1.46rem;
  font-weight:850;
  letter-spacing:-.055em;
  text-decoration:none;
  white-space:nowrap;
}
.jx-logo:hover{color:#fff}
.jx-logo-x{color:var(--jx-orange);font-size:1.1em;margin:0 .05em;position:relative;top:-.01em}
.jx-logo-dark{color:var(--jx-navy)}
.jx-logo-dark:hover{color:var(--jx-navy)}
.jx-logo-lg{font-size:2.1rem}

/* Main shell */
.app-shell{min-height:100vh}
.app-sidebar{
  --bs-offcanvas-width:272px;
  width:272px!important;
  color:#fff;
  background:
    radial-gradient(circle at 12% 84%,rgba(32,169,238,.12),transparent 30%),
    linear-gradient(160deg,var(--jx-navy-deep) 0%,var(--jx-navy) 55%,#132c48 100%);
  border-right:0!important;
}
.sidebar-inner{height:100%;display:flex;flex-direction:column;padding:0 18px 20px}
.sidebar-brand{
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 10px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar-kicker{
  margin:23px 12px 10px;
  color:rgba(255,255,255,.42);
  font-size:.68rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.13em;
}
.sidebar-nav{display:flex;flex-direction:column;gap:5px}
.sidebar-link{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:11px;
  color:rgba(255,255,255,.78);
  text-decoration:none;
  font-size:.93rem;
  font-weight:650;
  transition:.18s ease;
}
.sidebar-link svg{width:19px;height:19px;stroke:currentColor;flex:0 0 auto}
.sidebar-link:hover{color:#fff;background:rgba(255,255,255,.07)}
.sidebar-link.active{color:#fff;background:rgba(32,169,238,.13)}
.sidebar-link.active:before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  bottom:9px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:var(--jx-orange);
}
.sidebar-spacer{flex:1}
.sidebar-user{
  padding:16px 12px 0;
  margin-top:18px;
  border-top:1px solid rgba(255,255,255,.09);
}
.sidebar-user-name{font-weight:750;font-size:.9rem;color:#fff}
.sidebar-user-company{font-size:.75rem;color:rgba(255,255,255,.5);margin-top:2px}
.sidebar-logout{margin-top:12px;width:100%;border-color:rgba(255,255,255,.18)!important;color:#fff!important}
.sidebar-logout:hover{background:rgba(255,255,255,.08)!important}

.app-main{min-width:0;min-height:100vh}
.mobile-bar{
  height:68px;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--jx-navy);
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}
.mobile-menu-btn{border:1px solid rgba(255,255,255,.18);color:#fff;background:transparent;border-radius:10px;padding:7px 10px}
.mobile-menu-btn svg{width:21px;height:21px}
.content-wrap{width:100%;max-width:1500px;margin:0 auto;padding:30px 34px 52px}

/* Page heads */
.page-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:22px;
}
.page-head h1{margin:0 0 5px;font-size:1.8rem;font-weight:800;letter-spacing:-.035em;color:var(--jx-navy)}
.page-head p{margin:0;color:var(--jx-muted);max-width:760px}
.page-head .btn{flex:0 0 auto}
.page-back{display:inline-flex;align-items:center;gap:7px;margin-bottom:8px;font-weight:650;font-size:.88rem;text-decoration:none;color:var(--jx-muted)}
.page-back:hover{color:var(--jx-orange)}

/* Dashboard hero */
.dashboard-hero{
  position:relative;
  overflow:hidden;
  min-height:190px;
  border-radius:22px;
  padding:34px 38px;
  margin-bottom:24px;
  color:#fff;
  background:
    radial-gradient(circle at 78% 50%,rgba(32,169,238,.20),transparent 28%),
    linear-gradient(110deg,#112a45 0%,#173c5d 68%,#122840 100%);
  box-shadow:var(--jx-shadow);
}
.dashboard-hero:before,
.dashboard-hero:after{
  content:"";
  position:absolute;
  right:85px;
  width:132px;
  height:25px;
  border:14px solid var(--jx-orange);
  border-left:0;
  transform:skewX(-36deg);
  opacity:.95;
}
.dashboard-hero:before{top:49px}
.dashboard-hero:after{bottom:45px;transform:skewX(36deg)}
.dashboard-hero .hero-copy{position:relative;z-index:2;max-width:650px}
.dashboard-hero .hero-eyebrow{color:var(--jx-blue);font-size:.74rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;margin-bottom:10px}
.dashboard-hero h1{font-size:2rem;font-weight:820;letter-spacing:-.045em;margin:0 0 10px}
.dashboard-hero p{margin:0;color:rgba(255,255,255,.72);font-size:1rem}

/* Buttons */
.btn{border-radius:10px;font-weight:700;padding:.61rem 1rem;box-shadow:none!important}
.btn-sm{border-radius:8px;padding:.42rem .72rem;font-size:.82rem}
.btn-lg{border-radius:12px;padding:.78rem 1.18rem}
.btn-primary{background:var(--jx-blue);border-color:var(--jx-blue);color:#fff}
.btn-primary:hover,.btn-primary:focus{background:var(--jx-blue-dark);border-color:var(--jx-blue-dark);color:#fff}
.btn-action{background:var(--jx-orange);border-color:var(--jx-orange);color:#fff}
.btn-action:hover,.btn-action:focus{background:var(--jx-orange-dark);border-color:var(--jx-orange-dark);color:#fff}
.btn-outline-primary{color:var(--jx-blue-dark);border-color:#9edbf8;background:#fff}
.btn-outline-primary:hover{color:#fff;background:var(--jx-blue);border-color:var(--jx-blue)}
.btn-light{background:#f2f5f7;border-color:#edf1f4;color:#314156}
.btn-light:hover{background:#e7edf2;border-color:#e7edf2;color:var(--jx-navy)}

/* Metrics */
.metric-card{
  position:relative;
  overflow:hidden;
  height:100%;
  min-height:128px;
  padding:23px 24px;
  background:#fff;
  border:1px solid var(--jx-line);
  border-radius:17px;
  box-shadow:0 7px 25px rgba(16,35,60,.045);
}
.metric-card:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--jx-blue);opacity:.9}
.metric-card.metric-accent:after{background:var(--jx-orange)}
.metric-card span{display:block;color:var(--jx-muted);font-size:.79rem;font-weight:700;margin-bottom:11px}
.metric-card strong{display:block;color:var(--jx-navy);font-size:2.18rem;line-height:1;font-weight:820;letter-spacing:-.055em}
.metric-card small{display:block;color:#9aa7b7;margin-top:9px;font-size:.72rem}

/* Cards and tables */
.card{border:1px solid var(--jx-line)!important;border-radius:var(--jx-radius);box-shadow:0 7px 25px rgba(16,35,60,.045)!important;overflow:hidden}
.card-header{border-bottom:1px solid var(--jx-line)!important}
.card-title-jx{font-size:1.04rem;font-weight:800;color:var(--jx-navy);margin:0}
.card-subtitle-jx{font-size:.79rem;color:var(--jx-muted);margin:.3rem 0 0}
.table{--bs-table-bg:transparent;color:var(--jx-text)}
.table>:not(caption)>*>*{padding:.94rem 1.15rem;border-color:var(--jx-line);vertical-align:middle}
.table thead th{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.085em;
  color:#8090a3;
  font-weight:800;
  background:#f8fafc;
  border-bottom-width:1px;
}
.table tbody tr{transition:.15s ease}
.table tbody tr:hover{background:#fafcfd}
.table strong{font-weight:760;color:var(--jx-navy)}
.table code{font-size:.78rem;color:var(--jx-navy);background:#edf3f7;padding:.26rem .44rem;border-radius:6px}
.status-pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:#edf3f7;
  color:#42536a;
  border-radius:999px;
  padding:.34rem .65rem;
  font-size:.75rem;
  font-weight:700;
  white-space:nowrap;
}
.status-pill:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--jx-blue)}
.badge{font-weight:700;border-radius:7px;padding:.42em .62em}
.text-bg-light{background:#eef3f6!important;color:#4c5b6e!important}
.text-bg-success{background:#e8f5ee!important;color:#177245!important}
.text-bg-secondary{background:#edf0f3!important;color:#6f7884!important}

/* Forms */
.form-card{max-width:880px}
.form-label{font-size:.82rem;font-weight:760;color:#3b4b60;margin-bottom:.45rem}
.form-control,.form-select{
  min-height:44px;
  border:1px solid #d7e0e8;
  border-radius:10px;
  color:var(--jx-text);
  background-color:#fff;
}
textarea.form-control{min-height:auto}
.form-control:focus,.form-select:focus{border-color:#72c8f3;box-shadow:0 0 0 .2rem rgba(32,169,238,.12)}
.form-text{color:#8695a8;font-size:.75rem}
.form-check-input:checked{background-color:var(--jx-blue);border-color:var(--jx-blue)}
.input-group>.form-control,.input-group>.form-select{border-radius:10px 0 0 10px}
.input-group>.btn{border-radius:0 10px 10px 0}

/* Detail pages */
.preline{white-space:pre-line}
.note-item{padding:16px 0;border-top:1px solid var(--jx-line)}
.note-item:first-child{border-top:0;padding-top:0}
.timeline{border-left:2px solid #dce5eb;margin-left:.45rem}
.timeline-item{position:relative;padding:0 0 1.05rem 1.15rem}
.timeline-item:before{content:"";position:absolute;left:-6px;top:.28rem;width:10px;height:10px;background:var(--jx-orange);border-radius:50%;box-shadow:0 0 0 4px #fff}
dl dt{color:#7b899a;font-weight:650}
dl dd{color:var(--jx-text)}
.alert-light{background:#f8fafc;border-color:var(--jx-line)!important;color:#526277}

/* Flash messages */
.alert{border-radius:12px;border:0;box-shadow:0 7px 22px rgba(16,35,60,.05)}

/* Login */
.login-page{
  background:var(--jx-navy-deep);
  min-height:100vh;
}
.login-shell{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(420px,.75fr);
  background:
    radial-gradient(circle at 32% 55%,rgba(32,169,238,.13),transparent 34%),
    linear-gradient(122deg,#122d49 0%,#10233c 58%,#0d1b31 100%);
}
.login-shell:before,.login-shell:after{
  content:"";
  position:absolute;
  width:270px;
  height:48px;
  border:25px solid var(--jx-orange);
  border-left:0;
  right:14%;
  opacity:.13;
  transform:skewX(-35deg) rotate(-4deg);
}
.login-shell:before{top:16%}
.login-shell:after{bottom:17%;transform:skewX(35deg) rotate(4deg)}
.login-brand-panel{
  position:relative;
  z-index:2;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:70px clamp(46px,7vw,120px);
}
.login-brand-copy{max-width:640px;color:#fff}
.login-brand-copy .eyebrow{color:var(--jx-blue);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;margin:26px 0 12px}
.login-brand-copy h1{font-size:clamp(2.65rem,4.8vw,5rem);line-height:.96;font-weight:820;letter-spacing:-.065em;margin:0 0 24px;max-width:610px}
.login-brand-copy h1 span{color:var(--jx-orange)}
.login-brand-copy p{font-size:1.05rem;line-height:1.75;color:rgba(255,255,255,.7);max-width:530px;margin:0}
.login-form-panel{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:42px;
  background:rgba(8,20,36,.18);
  border-left:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(3px);
}
.login-card{
  width:min(440px,100%);
  padding:34px;
  background:#fff;
  border-radius:20px;
  box-shadow:0 28px 70px rgba(0,0,0,.25);
}
.login-card h2{font-size:1.5rem;font-weight:820;color:var(--jx-navy);letter-spacing:-.035em;margin:22px 0 5px}
.login-card .login-subtitle{color:var(--jx-muted);font-size:.9rem;margin-bottom:26px}
.login-card .form-control{min-height:49px}
.login-security{display:flex;align-items:center;gap:8px;margin-top:18px;color:#95a0ae;font-size:.72rem}
.login-security svg{width:14px;height:14px;stroke:currentColor}

/* Empty states */
.empty-state{text-align:center;padding:50px 24px;color:var(--jx-muted)}

@media (min-width:992px){
  .app-shell{display:flex}
  .app-sidebar{position:fixed!important;left:0;top:0;bottom:0;visibility:visible!important;transform:none!important}
  .app-main{margin-left:272px;width:calc(100% - 272px)}
}

@media (max-width:991.98px){
  .content-wrap{padding:24px 18px 44px}
  .app-sidebar{box-shadow:18px 0 45px rgba(0,0,0,.2)}
  .dashboard-hero{padding:28px 26px;min-height:170px}
  .dashboard-hero:before,.dashboard-hero:after{right:-15px;opacity:.35}
  .login-shell{grid-template-columns:1fr}
  .login-brand-panel{display:none}
  .login-form-panel{min-height:100vh;border-left:0;padding:28px 18px}
  .login-shell:before,.login-shell:after{right:-80px;opacity:.15}
}

@media (max-width:767.98px){
  .page-head{flex-direction:column;align-items:stretch;margin-bottom:18px}
  .page-head h1{font-size:1.55rem}
  .page-head .btn{width:100%}
  .dashboard-hero h1{font-size:1.7rem}
  .metric-card{min-height:112px;padding:19px}
  .metric-card strong{font-size:1.9rem}
  .table{font-size:.88rem}
  .login-card{padding:27px 22px}
}