/* ======================================================================
   JustiX Production Build 0.6 — Legal Editorial OS / World Class UI
   Corporate palette preserved:
   Navy #0A1C3A · Gold #D4AF37 · White #FFFFFF · Red #E01E22
   ====================================================================== */
:root{
  --jx-navy:#0A1C3A;
  --jx-gold:#D4AF37;
  --jx-red:#E01E22;
  --jx-white:#FFFFFF;
  --jx-ink:#03101F;
  --jx-surface-1:#061528;
  --jx-surface-2:#081A30;
  --jx-surface-3:#0A1C3A;
  --jx-surface-4:#102748;
  --jx-border:rgba(255,255,255,.075);
  --jx-border-strong:rgba(255,255,255,.115);
  --jx-border-gold:rgba(212,175,55,.30);
  --jx-text-2:#B6C2D1;
  --jx-text-3:#8292A8;
  --jx-shadow:0 22px 70px rgba(0,0,0,.30);
  --jx-shadow-soft:0 12px 36px rgba(0,0,0,.20);
  --sidebar:244px;
  --display:clamp(42px,3.45vw,56px);
}

html,body{background:#03101F}
body{
  background:
    radial-gradient(circle at 84% -4%,rgba(28,64,104,.30),transparent 28%),
    radial-gradient(circle at 9% 1%,rgba(212,175,55,.055),transparent 22%),
    linear-gradient(145deg,#020A14 0%,#04101F 48%,#061427 100%);
}
body::before{opacity:.012}
.app{gap:14px;padding:14px}

/* Surfaces: precision first, gold only where hierarchy warrants it */
.glass{
  background:linear-gradient(155deg,rgba(9,28,51,.88),rgba(4,17,31,.82));
  border:1px solid var(--jx-border)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),var(--jx-shadow-soft);
  backdrop-filter:blur(22px) saturate(122%);
  -webkit-backdrop-filter:blur(22px) saturate(122%);
}
.glass-soft{
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.055)!important;
  box-shadow:none;
}
.metric,.card,.panel,.sheet,.modal-card,.learning-kpi,.learning-session,.learning-focus,.learning-loop,.learning-weak-card,.learning-prescription,.learning-deck-card,.oral-stage,.oral-rubric,.analytics-card,.profile-card,.skill-card,.leaderboard,.study-side,.flash-main,.court-side,.court-toolbar,.court-notice,.prod-card,.prod-step,.prod-panel,.beta-card,.talent-card,.passport-card,.ai-card,.legal-card,.juris-card,.game-card{
  border-color:var(--jx-border)!important;
  background:linear-gradient(150deg,rgba(9,28,51,.76),rgba(4,17,31,.74))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 16px 48px rgba(0,0,0,.18)!important;
}

/* Sidebar: quieter, slimmer, more editorial */
.sidebar{
  border-radius:24px;
  padding:18px 12px 12px;
  background:linear-gradient(180deg,rgba(5,21,39,.98),rgba(3,14,27,.96));
  border-color:rgba(255,255,255,.075)!important;
  box-shadow:0 24px 64px rgba(0,0,0,.24);
}
.brand{padding:4px 9px 19px;gap:10px}.brand img{width:42px;height:42px;filter:drop-shadow(0 8px 20px rgba(212,175,55,.12))}.brand-copy strong{font-size:22px;letter-spacing:-.6px}.brand-copy span{font-size:10px;letter-spacing:1.45px;color:#91A0B4}
.nav{gap:3px;overflow-y:auto;overflow-x:hidden;padding-right:1px;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}.nav-label{padding:15px 11px 7px;font-size:10px;letter-spacing:1.8px;color:#718299}
.nav-btn{position:relative;border-radius:13px;padding:10px 11px;min-height:42px;font-size:13px;color:#C5CFDB;border:1px solid transparent!important}
.nav-btn:hover{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.05)!important;color:#fff}
.nav-btn.active{
  background:linear-gradient(90deg,rgba(212,175,55,.095),rgba(255,255,255,.025));
  border-color:rgba(255,255,255,.06)!important;
  box-shadow:none;
  color:#fff;
}
.nav-btn.active::before{content:"";position:absolute;left:-1px;top:10px;bottom:10px;width:2px;border-radius:999px;background:var(--jx-gold);box-shadow:0 0 12px rgba(212,175,55,.28)}
.nav-btn.active svg{color:var(--jx-gold);stroke:var(--jx-gold)}
.nav-badge{font-size:10px;background:rgba(255,255,255,.045);color:#AEBACA;border:1px solid rgba(255,255,255,.045)}
.nav-btn.active .nav-badge{color:#E7CF79;background:rgba(212,175,55,.08);border-color:rgba(212,175,55,.10)}
.sidebar-bottom{padding-top:8px;background:linear-gradient(180deg,transparent,rgba(3,14,27,.96) 15%)}
.xp-card{border-color:rgba(255,255,255,.065)!important;background:rgba(255,255,255,.022)!important}.xp-line b{color:#E9D27C}.bar>i{background:linear-gradient(90deg,#E9D27C,#D4AF37)}
.account{border-radius:14px}.account:hover{background:rgba(255,255,255,.03)}

/* Topbar: floating utility layer, not a second frame */
.topbar{
  height:68px;
  border-radius:18px;
  padding:0 10px 0 18px;
  background:linear-gradient(135deg,rgba(5,20,38,.86),rgba(8,25,47,.76));
  border-color:rgba(255,255,255,.07)!important;
  box-shadow:0 10px 36px rgba(0,0,0,.20);
}
.search{height:44px;border-radius:13px;background:rgba(255,255,255,.028)!important;border-color:rgba(255,255,255,.065)!important}.search:focus{border-color:rgba(212,175,55,.42)!important;box-shadow:0 0 0 3px rgba(212,175,55,.06)!important}
.search-wrap svg{color:#B59A4B}.shortcut{background:rgba(255,255,255,.025);border-color:rgba(255,255,255,.055);color:#8493A6}
.icon-btn,.ghost-btn{background:rgba(255,255,255,.025);border-color:rgba(255,255,255,.075);box-shadow:none}.icon-btn:hover,.ghost-btn:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);transform:translateY(-1px)}
.primary-btn{background:linear-gradient(135deg,#F0D989,#D4AF37);color:#071426;border-color:rgba(255,238,177,.40);box-shadow:0 10px 28px rgba(212,175,55,.18),inset 0 1px 0 rgba(255,255,255,.50)}
.primary-btn:hover{filter:brightness(1.045);box-shadow:0 13px 32px rgba(212,175,55,.23)}

/* Dashboard hero: editorial, calmer, more premium */
.hero{
  min-height:462px;
  padding:38px 40px;
  grid-template-columns:minmax(0,1.02fr) minmax(390px,.98fr);
  gap:30px;
  border-radius:28px;
  border-color:rgba(255,255,255,.075)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 30px 86px rgba(0,0,0,.28)!important;
}
.hero>div:first-child{max-width:680px}.hero .eyebrow{color:#DCC66F;letter-spacing:2.5px}
.hero h1{font-size:var(--display)!important;line-height:.98!important;letter-spacing:-1.45px!important;max-width:590px;margin:12px 0 17px;text-wrap:balance}
.hero p{max-width:620px;font-size:15px!important;line-height:1.65;color:#D3DBE5;text-wrap:pretty}
.hero-actions{max-width:650px;gap:8px;margin-top:19px;align-items:center}
.hero-actions .primary-btn{min-height:48px;padding-inline:18px}
.hero-actions .ghost-btn{min-height:46px;background:rgba(3,15,29,.44);border-color:rgba(255,255,255,.075)}
.hero-actions .ghost-btn[data-view="legal"]{background:transparent;border-color:transparent;color:#DCC66F;padding-inline:10px}
.hero-actions .ghost-btn[data-view="legal"]:hover{background:rgba(212,175,55,.055);border-color:rgba(212,175,55,.10)}
.hero-actions .ghost-btn[data-view="jurisdictions"],
.hero-actions .ghost-btn[data-view="production"],
.hero-actions .ghost-btn[data-view="backend"],
.hero-actions .ghost-btn[data-view="beta"],
.hero-actions .ghost-btn[data-view="ai"],
.hero-actions .ghost-btn[data-view="game"],
.hero-actions .ghost-btn[data-view="passport"],
.hero-actions .ghost-btn[data-view="firms"]{display:none!important}
.hero-visual{justify-content:end;align-self:center}
.court-mini{
  width:min(100%,440px);height:294px;border-radius:24px;padding:27px;
  background:linear-gradient(180deg,rgba(7,24,43,.84),rgba(3,14,27,.94));
  border:1px solid rgba(255,255,255,.085)!important;
  box-shadow:0 28px 72px rgba(0,0,0,.34),inset 0 0 0 1px rgba(212,175,55,.05);
}
.court-mini::before{border-color:rgba(212,175,55,.20);background:rgba(212,175,55,.055);color:#F2E4B1}
.court-mini::after{border-color:rgba(255,255,255,.08);background:rgba(255,255,255,.025);color:#A8B5C5}
.court-mini .bench{background:linear-gradient(90deg,#7D5A10,#D4AF37,#7D5A10);opacity:.84}
.court-mini .person.judge .avatar{box-shadow:0 0 0 1px rgba(212,175,55,.40),0 10px 28px rgba(0,0,0,.20)}
.court-mini .wave{border-color:rgba(255,255,255,.07);background:rgba(1,10,19,.76)}

/* Metrics become one coherent professional strip */
.metrics{gap:0;margin-top:12px;border:1px solid rgba(255,255,255,.065);border-radius:22px;overflow:hidden;background:rgba(255,255,255,.018);box-shadow:0 14px 40px rgba(0,0,0,.14)}
.metric{min-height:122px;border:0!important;border-right:1px solid rgba(255,255,255,.055)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;padding:18px 19px}.metric:last-child{border-right:0!important}.metric::after{display:none}.metric small{color:#8595AA}.metric h3{font-size:26px}.metric p{font-size:12px;color:#8FA0B4}.metric .ring{right:16px;bottom:16px}

/* Dashboard content: fewer boxes, more hierarchy */
.dash-grid{gap:12px;margin-top:12px}.dash-grid>.card{border-radius:20px;padding:19px}.section-title{margin-bottom:12px}.section-title h2{font-size:19px}.section-title small{color:#8191A5!important;letter-spacing:1.4px}.case-row{padding:12px 13px;border-radius:13px;background:rgba(255,255,255,.017)!important;border-color:rgba(255,255,255,.045)!important}.case-row:hover{background:rgba(255,255,255,.032)!important}.activity-item{padding:4px 0}.activity-icon{background:rgba(212,175,55,.055);color:#DCC66F;border:1px solid rgba(212,175,55,.08)}

/* Operational pages: clean surfaces and deliberate hierarchy */
.page-head{margin-top:10px;margin-bottom:17px}.page-head h1{letter-spacing:-1px}.page-head p{color:#98A8BA}
.filters,.case-table,.sim-card,.builder-steps,.builder-summary,.builder-progress,.builder-stage,.court-toolbar,.court-side,.legal-card,.learning-session,.learning-focus,.learning-loop,.passport-card,.talent-card,.backend-card,.beta-card{border-color:rgba(255,255,255,.065)!important}
.case-table{border-radius:20px}.table-head{color:#75869A;letter-spacing:1px}.table-row{border-top-color:rgba(255,255,255,.05)}.table-row:hover{background:rgba(255,255,255,.022)}
.sim-card{border-radius:20px}.sim-cover{height:138px}.sim-body{padding:16px 17px}.choice-card{border-color:rgba(255,255,255,.07);background:rgba(255,255,255,.018)}.choice-card:hover:not(.disabled){border-color:rgba(212,175,55,.16);background:rgba(212,175,55,.028)}.choice-card.selected{border-color:rgba(212,175,55,.28);background:linear-gradient(145deg,rgba(212,175,55,.07),rgba(255,255,255,.018));box-shadow:inset 2px 0 0 rgba(212,175,55,.72)}
.tabs,.segment{background:rgba(255,255,255,.025)}.tabs button.active,.segment button.active{background:rgba(212,175,55,.08);border-color:rgba(212,175,55,.10);color:#F1E6BC}
.chip,.pill,.status,.tag,.badge,.rank,.verified,.shortcut-tag{background:rgba(255,255,255,.035)!important;border-color:rgba(255,255,255,.055)!important;color:#B5C1D0!important}.status.real,.verified,.rank{color:#E6CF77!important;background:rgba(212,175,55,.055)!important;border-color:rgba(212,175,55,.08)!important}.status.live{color:#F2A2A4!important;background:rgba(224,30,34,.07)!important;border-color:rgba(224,30,34,.14)!important}

/* Courtroom: product console, not decorative card */
.court-stage{border-color:rgba(255,255,255,.065)!important;box-shadow:0 22px 64px rgba(0,0,0,.24)}.court-toolbar{border-radius:16px}.court-label{background:rgba(212,175,55,.055);color:#E4CF80;border-color:rgba(212,175,55,.12)}.round-btn{background:#06162A;border-color:rgba(255,255,255,.075)}.round-btn.active{border-color:rgba(212,175,55,.32);box-shadow:0 0 0 3px rgba(212,175,55,.055)}.round-btn.red{background:#7E171A;border-color:#E01E22}.chat-form button{background:linear-gradient(135deg,#E9D27C,#D4AF37)}

/* Focus, motion and interaction quality */
button,a,input,select,textarea{transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease,transform .18s ease,opacity .18s ease}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid rgba(212,175,55,.90)!important;outline-offset:3px}
.sim-card:hover,.talent-card:hover,.passport-card:hover{transform:translateY(-2px);box-shadow:0 20px 52px rgba(0,0,0,.22)!important}

/* Responsive intent: re-compose, do not merely shrink */
@media(max-width:1280px){
  :root{--sidebar:226px;--display:clamp(40px,3.8vw,52px)}
  .hero{grid-template-columns:minmax(0,1fr) minmax(340px,.86fr);padding:32px;min-height:440px;gap:22px}
  .hero h1{max-width:550px}.court-mini{width:min(100%,400px);height:278px}
}
@media(max-width:1024px){
  :root{--display:clamp(38px,5.4vw,48px)}
  .hero{grid-template-columns:1fr;padding:29px;min-height:auto}.hero>div:first-child{max-width:720px}.hero h1{max-width:600px}.hero-visual{justify-content:center}.court-mini{width:min(100%,500px)}
  .metrics{grid-template-columns:repeat(2,1fr)}.metric:nth-child(2){border-right:0!important}.metric:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.055)!important}
}
@media(max-width:920px){
  .topbar{border-radius:16px}.mobile-logo{font-size:15px}.hero{margin-top:2px}
}
@media(max-width:768px){
  :root{--display:clamp(34px,8.5vw,40px)}
  .app{padding:9px 9px 78px}.hero{padding:24px 20px;border-radius:22px;gap:18px}.hero h1{max-width:510px;letter-spacing:-1px!important}.hero p{font-size:14px!important}.hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.hero-actions .primary-btn,.hero-actions .ghost-btn{width:100%}.hero-actions .ghost-btn[data-view="legal"]{display:none!important}.court-mini{height:260px;border-radius:20px}.metrics{border-radius:18px}.metric{min-height:112px;padding:16px}.dash-grid>.card{padding:16px}.page-head h1{font-size:30px}
}
@media(max-width:480px){
  :root{--display:clamp(31px,9.5vw,36px)}
  .hero{padding:20px 17px}.hero h1{line-height:1.01!important;letter-spacing:-.65px!important;margin-bottom:13px}.hero-actions{grid-template-columns:1fr}.court-mini{height:238px;padding:21px}.metrics{grid-template-columns:1fr}.metric{border-right:0!important;border-bottom:1px solid rgba(255,255,255,.055)!important}.metric:last-child{border-bottom:0!important}.metric:nth-child(2){border-right:0!important}.metric:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.055)!important}
}
@media(min-width:1600px){
  :root{--display:clamp(48px,3.1vw,58px)}
  .hero{min-height:478px;padding:40px 44px}.hero h1{max-width:610px}.hero p{font-size:16px!important}.court-mini{width:min(100%,450px);height:300px}
}
@media(min-width:1920px){
  :root{--sidebar:258px;--display:clamp(52px,2.9vw,62px)}
  .app{gap:16px;padding:16px}.hero{min-height:492px;padding:42px 48px}.hero h1{max-width:650px}.hero p{font-size:17px!important}.topbar{height:74px}.nav-btn{font-size:15px;min-height:46px}.metrics .metric h3{font-size:28px}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}