/* MyTalentFunded Trader CRM — Professional UI Layer
   UI-only override. Loaded after legacy portal CSS so application logic remains untouched. */

:root{
  --pro-bg:#070a08;
  --pro-surface:#0d1210;
  --pro-surface-2:#111815;
  --pro-surface-3:#151e1a;
  --pro-border:rgba(229,203,136,.11);
  --pro-border-strong:rgba(229,203,136,.22);
  --pro-text:#f4f0e7;
  --pro-muted:#8d9790;
  --pro-muted-2:#677069;
  --pro-gold:#dfc480;
  --pro-gold-2:#f1dc9a;
  --pro-green:#22b983;
  --pro-red:#ef7169;
  --pro-blue:#70a9ff;
  --pro-shadow:0 18px 60px rgba(0,0,0,.28);
  --pro-shadow-soft:0 8px 28px rgba(0,0,0,.18);
  --pro-radius:14px;
  --pro-radius-lg:18px;
}

/* ========== APP SHELL ========== */
.shell{
  grid-template-columns:272px minmax(0,1fr);
  background:
    radial-gradient(circle at 82% -12%,rgba(34,185,131,.055),transparent 28rem),
    radial-gradient(circle at 12% 85%,rgba(223,196,128,.035),transparent 30rem),
    var(--pro-bg);
}
.shell .main{background:transparent;min-width:0}

/* ========== BRAND / LOGO ========== */
.shell .sidebar>.brand,
.challenge-sidebar .challenge-brand{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:48px;
  padding:0 8px 18px;
  color:#f6f1e6;
  font-size:15px;
  font-weight:900;
  letter-spacing:.055em;
  white-space:nowrap;
}
.shell .sidebar>.brand::before,
.challenge-sidebar .challenge-brand::before{
  content:"MT";
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  flex:0 0 36px;
  border:1px solid rgba(229,203,136,.32);
  border-radius:11px;
  background:
    linear-gradient(145deg,rgba(241,220,154,.16),rgba(223,196,128,.025)),
    #101610;
  color:var(--pro-gold-2);
  font-size:10px;
  line-height:1;
  font-weight:950;
  letter-spacing:.08em;
  box-shadow:0 7px 22px rgba(0,0,0,.23),inset 0 1px rgba(255,255,255,.04);
}
.shell .sidebar>.brand b,
.challenge-sidebar .challenge-brand b{color:var(--pro-gold-2)}

/* ========== SIDEBAR ========== */
.shell .sidebar{
  padding:19px 14px 16px;
  border-right:1px solid var(--pro-border);
  background:
    linear-gradient(180deg,rgba(13,18,16,.985),rgba(7,10,8,.99)),
    var(--pro-surface);
  box-shadow:8px 0 28px rgba(0,0,0,.08);
  scrollbar-width:thin;
  scrollbar-color:rgba(229,203,136,.14) transparent;
}
.shell .nav{gap:3px}
.shell .nav .group{
  margin:17px 10px 7px;
  color:#5f6962;
  font-size:9px;
  font-weight:900;
  letter-spacing:.15em;
}
.shell .nav button{
  position:relative;
  min-height:42px;
  gap:11px;
  padding:9px 11px;
  overflow:hidden;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:#a9b1ab;
  font-size:12px;
  font-weight:720;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}
.shell .nav button::before{
  content:"";
  width:17px;
  height:17px;
  flex:0 0 17px;
  display:grid;
  place-items:center;
  color:#758078;
  font-size:12px;
  font-weight:900;
  line-height:1;
}
.shell .nav button[data-route="overview"]::before{content:"⌂"}
.shell .nav button[data-route="accounts"]::before{content:"▣"}
.shell .nav button[data-route="analytics"]::before{content:"⌁"}
.shell .nav button[data-route="trades"]::before{content:"⇄"}
.shell .nav button[data-route="rules"]::before{content:"◇"}
.shell .nav button[data-route="payouts"]::before{content:"$"}
.shell .nav button[data-route="agreements"]::before{content:"≡"}
.shell .nav button[data-route="certificates"]::before{content:"✦"}
.shell .nav button[data-route="kyc"]::before{content:"✓"}
.shell .nav button[data-route="profile"]::before{content:"◯"}
.shell .nav button[data-route="security"]::before{content:"◆"}
.shell .nav button[data-route="affiliate"]::before{content:"↗"}
.shell .nav button[data-route="leaderboard"]::before{content:"▲"}
.shell .nav button[data-route="support"]::before{content:"?"}
.shell .nav button[data-route="notifications"]::before{content:"•"}
.shell .nav button:hover{
  background:rgba(255,255,255,.027);
  border-color:rgba(255,255,255,.035);
  color:#e5e7e3;
  transform:translateX(1px);
}
.shell .nav button.active{
  border-color:rgba(229,203,136,.13);
  background:linear-gradient(90deg,rgba(229,203,136,.105),rgba(229,203,136,.026));
  color:#f0e8d8;
  box-shadow:inset 2px 0 0 var(--pro-gold);
}
.shell .nav button.active::before{color:var(--pro-gold-2)}
.shell .sidebar-bottom{
  margin-top:20px;
  padding:16px 5px 1px;
  border-top:1px solid rgba(255,255,255,.045);
}
.shell .sidebar-bottom .btn.primary{
  min-height:43px;
  border-radius:10px;
  font-size:11px;
  letter-spacing:.015em;
}

/* ========== TOPBAR ========== */
.shell .topbar{
  height:70px;
  padding:0 26px;
  border-bottom:1px solid var(--pro-border);
  background:rgba(7,10,8,.86);
  box-shadow:0 6px 24px rgba(0,0,0,.08);
  backdrop-filter:blur(18px) saturate(120%);
}
.shell .top-left{gap:11px}
.shell #pageTitle{
  color:#eeeae1;
  font-size:14px;
  font-weight:820;
  letter-spacing:-.01em;
}
.shell .topbar>.row{gap:9px}
.shell #notificationButton{
  width:38px;
  height:38px;
  min-height:38px;
  padding:0;
  border-color:rgba(255,255,255,.055);
  border-radius:10px;
  background:rgba(255,255,255,.025);
  font-size:13px;
}
.shell .avatar{
  width:36px;
  height:36px;
  border:1px solid rgba(229,203,136,.28);
  background:linear-gradient(145deg,#e8cf8c,#927126);
  box-shadow:0 5px 17px rgba(0,0,0,.18);
  font-size:11px;
}
.shell .user-name{
  max-width:180px;
  overflow:hidden;
  color:#d7d9d5;
  font-size:11px;
  font-weight:780;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.shell #logoutButton{
  margin-left:3px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.05);
  border-radius:8px;
  color:#8e9891;
  font-size:10px;
  font-weight:800;
}
.shell #logoutButton:hover{border-color:rgba(239,113,105,.18);background:rgba(239,113,105,.055);color:#ef9b95}

/* ========== CONTENT / TYPOGRAPHY ========== */
.shell .content{max-width:1480px;padding:27px 29px 48px}
.shell .title-row{margin-bottom:19px;align-items:center}
.shell .title-row h1{
  color:#f4efe6;
  font-size:23px;
  line-height:1.16;
  font-weight:840;
  letter-spacing:-.035em;
}
.shell .title-row p,.shell .muted{color:var(--pro-muted)}
.shell .section-title{color:#e9e5dd;font-size:13px;font-weight:820;letter-spacing:-.01em}
.shell .label,.shell .stat small{color:#747e77;font-size:10px;font-weight:750;letter-spacing:.035em}

/* ========== CARDS ========== */
.shell .grid{gap:14px}
.shell .card{
  position:relative;
  border:1px solid var(--pro-border);
  border-radius:var(--pro-radius);
  background:
    linear-gradient(180deg,rgba(17,24,21,.97),rgba(11,16,14,.97));
  box-shadow:var(--pro-shadow-soft);
  padding:17px;
  overflow:hidden;
}
.shell .card::after{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent);
  pointer-events:none;
}
.shell .card:hover{border-color:rgba(229,203,136,.16)}
.shell .stat{min-height:98px}
.shell .stat strong{
  margin-top:9px;
  color:#f2eee6;
  font-size:22px;
  font-weight:840;
  letter-spacing:-.03em;
}
.shell .integration-card{min-height:155px}

/* ========== BUTTONS ========== */
.shell .btn,
.challenge-shell .btn{
  min-height:40px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:9px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.018));
  color:#d8dcd8;
  padding:9px 13px;
  font-size:11px;
  font-weight:820;
  box-shadow:0 1px 0 rgba(255,255,255,.025) inset;
  transition:transform .15s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease,color .15s ease;
}
.shell .btn:hover,.challenge-shell .btn:hover{
  transform:translateY(-1px);
  border-color:rgba(229,203,136,.18);
  background:rgba(255,255,255,.045);
  color:#f1eee8;
}
.shell .btn.primary,.challenge-shell .btn.primary{
  border-color:rgba(229,203,136,.46);
  background:linear-gradient(135deg,#efdaa0,#c6a24e 58%,#a77f2d);
  color:#18130a;
  box-shadow:0 8px 24px rgba(180,140,55,.12),inset 0 1px rgba(255,255,255,.25);
}
.shell .btn.primary:hover,.challenge-shell .btn.primary:hover{
  border-color:#ead18e;
  background:linear-gradient(135deg,#f4e2ad,#d0ae59 58%,#ad8530);
  color:#171208;
  box-shadow:0 11px 30px rgba(180,140,55,.17),inset 0 1px rgba(255,255,255,.28);
}
.shell .btn.green{border-color:rgba(34,185,131,.22);background:rgba(34,185,131,.08);color:#81d9ba}
.shell .btn.danger{border-color:rgba(239,113,105,.20);background:rgba(239,113,105,.07);color:#ee9c96}
.shell .link{color:#c9b475;font-size:11px;font-weight:780}
.shell .link:hover{color:#f0da99}

/* ========== FORMS ========== */
.shell .field{gap:6px;margin:12px 0}
.shell .field label{color:#8f9891;font-size:10px;font-weight:780;letter-spacing:.025em}
.shell .field input,
.shell .field select,
.shell .field textarea,
.challenge-shell input,
.challenge-shell select,
.challenge-shell textarea{
  min-height:43px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:9px;
  background:#0a100d;
  color:#ecebe7;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.015);
}
.shell .field input:hover,.shell .field select:hover,.shell .field textarea:hover,
.challenge-shell input:hover,.challenge-shell select:hover{border-color:rgba(229,203,136,.16)}
.shell .field input:focus,.shell .field select:focus,.shell .field textarea:focus,
.challenge-shell input:focus,.challenge-shell select:focus,.challenge-shell textarea:focus{
  border-color:rgba(229,203,136,.48);
  box-shadow:0 0 0 3px rgba(229,203,136,.055);
}

/* ========== TABLES ========== */
.shell .table-wrap{
  border:1px solid var(--pro-border);
  border-radius:12px;
  background:#0b100e;
  box-shadow:var(--pro-shadow-soft);
}
.shell table{background:transparent}
.shell th{
  height:40px;
  padding:10px 13px;
  border-bottom-color:rgba(255,255,255,.05);
  background:rgba(255,255,255,.018);
  color:#747f77;
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
}
.shell td{
  height:46px;
  padding:11px 13px;
  border-bottom-color:rgba(255,255,255,.042);
  color:#cdd2ce;
  font-size:11px;
}
.shell tbody tr{transition:background .13s ease}
.shell tbody tr:hover{background:rgba(229,203,136,.025)}

/* ========== BADGES / STATUS ========== */
.shell .badge{
  min-height:22px;
  padding:4px 8px;
  border:1px solid transparent;
  border-radius:6px;
  font-size:9px;
  font-weight:900;
  letter-spacing:.045em;
}
.shell .badge.green{border-color:rgba(34,185,131,.15);background:rgba(34,185,131,.075);color:#79d7b5}
.shell .badge.amber,.shell .badge.gold{border-color:rgba(229,203,136,.15);background:rgba(229,203,136,.07);color:#e5ce90}
.shell .badge.red{border-color:rgba(239,113,105,.15);background:rgba(239,113,105,.07);color:#ec9892}
.shell .notice{
  border-color:rgba(229,203,136,.13);
  border-radius:10px;
  background:rgba(229,203,136,.04);
  color:#babcb7;
  font-size:11px;
  line-height:1.55;
}
.shell .progress{height:7px;border-color:rgba(255,255,255,.03);background:#070b09}
.shell .progress span{background:linear-gradient(90deg,#23af7e,#d5bc76)}

/* ========== STEPS / SECURITY ========== */
.shell .steps{gap:7px}
.shell .step{
  min-height:52px;
  display:grid;
  place-items:center;
  border-color:rgba(255,255,255,.055);
  border-radius:9px;
  background:rgba(255,255,255,.014);
  font-size:10px;
}
.shell .step.done{border-color:rgba(34,185,131,.16);background:rgba(34,185,131,.055);color:#84d9ba}
.shell .step.current{border-color:rgba(229,203,136,.20);background:rgba(229,203,136,.055);color:#dfca8f}
.shell .secret-box,.shell .recovery-code{border-color:rgba(255,255,255,.06);background:#080d0a}

/* ========== TOAST / OVERLAY ========== */
.shell~.toast,.toast{
  border-color:rgba(229,203,136,.15);
  border-radius:10px;
  background:rgba(15,21,18,.97);
  color:#daddd9;
  font-size:11px;
  box-shadow:0 18px 60px rgba(0,0,0,.35);
  backdrop-filter:blur(16px);
}

/* ========== CHALLENGE PAGE ========== */
.challenge-shell{
  min-height:100vh;
  background:
    radial-gradient(circle at 86% 4%,rgba(34,185,131,.055),transparent 30rem),
    var(--pro-bg);
}
.challenge-sidebar{
  border-right:1px solid var(--pro-border)!important;
  background:linear-gradient(180deg,#0d1210,#080b09)!important;
  box-shadow:8px 0 28px rgba(0,0,0,.08);
}
.challenge-nav{gap:3px!important}
.challenge-nav a{
  min-height:40px;
  display:flex;
  align-items:center;
  padding:9px 11px!important;
  border:1px solid transparent!important;
  border-radius:9px!important;
  color:#9ba49d!important;
  font-size:11px!important;
  font-weight:720!important;
}
.challenge-nav a:hover{border-color:rgba(255,255,255,.04)!important;background:rgba(255,255,255,.027)!important;color:#e1e4e0!important}
.challenge-sidebar-bottom{border-top-color:rgba(255,255,255,.045)!important}
.challenge-topbar{
  min-height:78px!important;
  border-bottom:1px solid var(--pro-border)!important;
  background:rgba(7,10,8,.88)!important;
  backdrop-filter:blur(18px);
}
.challenge-topbar h1{color:#f0ede6!important;font-size:20px!important;letter-spacing:-.025em}
.challenge-topbar p{color:#758078!important;font-size:10px!important}
.challenge-back{border-color:rgba(255,255,255,.06)!important;background:rgba(255,255,255,.02)!important;color:#b0b6b1!important}
.challenge-user{padding:7px 9px!important;border:1px solid rgba(255,255,255,.05);border-radius:10px;background:rgba(255,255,255,.015)}
.challenge-user strong{font-size:10px!important}.challenge-user span{color:#6f7972!important;font-size:9px!important}
.challenge-content{gap:16px!important;padding:25px 27px 46px!important}
.challenge-config-panel,.challenge-summary .summary-sticky{
  border:1px solid var(--pro-border)!important;
  border-radius:var(--pro-radius-lg)!important;
  background:linear-gradient(180deg,rgba(16,23,20,.97),rgba(10,15,13,.97))!important;
  box-shadow:var(--pro-shadow-soft)!important;
}
.challenge-section{border-bottom-color:rgba(255,255,255,.045)!important}
.challenge-kicker{color:#9c8b5d!important;font-size:9px!important;font-weight:900!important;letter-spacing:.11em!important}
.challenge-section h2,.summary-head h2{color:#eeebe4!important;font-size:15px!important;letter-spacing:-.018em}
.challenge-selection{border-color:rgba(229,203,136,.12)!important;background:rgba(229,203,136,.05)!important;color:#d9c589!important;font-size:9px!important}
.challenge-option{
  min-height:54px!important;
  border-color:rgba(255,255,255,.06)!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.018)!important;
  color:#c9cfca!important;
  box-shadow:none!important;
}
.challenge-option:hover{border-color:rgba(229,203,136,.17)!important;background:rgba(229,203,136,.025)!important}
.challenge-option.active{border-color:rgba(229,203,136,.31)!important;background:linear-gradient(145deg,rgba(229,203,136,.10),rgba(229,203,136,.025))!important;box-shadow:inset 0 0 0 1px rgba(229,203,136,.035)!important}
.option-mark{border-color:rgba(229,203,136,.17)!important;background:rgba(229,203,136,.055)!important;color:#dec98d!important}
.challenge-empty-option{border-color:rgba(255,255,255,.055)!important;border-radius:10px!important;background:rgba(255,255,255,.014)!important;color:#69736c!important}
.objective-table-wrap{border-color:rgba(255,255,255,.055)!important;border-radius:10px!important;overflow:hidden}
.objective-table>div{border-bottom-color:rgba(255,255,255,.04)!important}
.summary-price-row{border-top-color:rgba(255,255,255,.055)!important}
.summary-price-row strong{color:var(--pro-gold-2)!important}
.summary-helper{color:#68726b!important;font-size:9px!important;line-height:1.5}
.terms-check{color:#8d9690!important;font-size:10px!important}
.checkout-button{min-height:48px!important;border-radius:10px!important}
.quantity-preview{border-color:rgba(34,185,131,.12)!important;background:rgba(34,185,131,.045)!important;color:#83d7ba!important}

/* ========== RESPONSIVE ========== */
@media(max-width:1050px){
  .shell{grid-template-columns:244px minmax(0,1fr)}
  .shell .sidebar{padding-left:11px;padding-right:11px}
  .shell .content{padding:24px 21px 42px}
}
@media(max-width:760px){
  .shell{grid-template-columns:1fr}
  .shell .sidebar{width:276px;padding:17px 13px;box-shadow:22px 0 70px rgba(0,0,0,.42)}
  .shell .topbar{height:64px;padding:0 13px}
  .shell #pageTitle{font-size:12px}
  .shell .content{padding:17px 13px 34px}
  .shell .title-row h1{font-size:20px}
  .shell .card{padding:14px}
  .shell .stats{gap:10px}
  .shell .stat{min-height:86px}
  .challenge-content{padding:16px 12px 34px!important}
  .challenge-topbar{padding-left:12px!important;padding-right:12px!important}
}

@media(prefers-reduced-motion:reduce){
  .shell *, .challenge-shell *{transition:none!important;animation-duration:.01ms!important}
}