/* =========================================================
   JASOUR USER PANEL v10.8
   ========================================================= */

:root{
  --jp-bg:#020b15;
  --jp-surface:#071b2d;
  --jp-surface2:#0b2741;
  --jp-surface3:#0e3150;
  --jp-gold:#f6b51b;
  --jp-gold2:#ffd45a;
  --jp-text:#f6f8fb;
  --jp-muted:#a8b6c4;
  --jp-line:rgba(246,181,27,.25);
  --jp-green:#35b878;
  --jp-danger:#ec6666;
}

body.jasour-panel-108{
  margin:0!important;
  background:
    radial-gradient(circle at 85% -10%,rgba(246,181,27,.10),transparent 32%),
    linear-gradient(180deg,#061a2b 0,#020b15 360px)!important;
  color:var(--jp-text)!important;
  min-height:100vh;
  overflow-x:hidden!important;
}

body.jasour-panel-108 .top-accent{display:none!important}
body.jasour-panel-108 > header,
body.jasour-panel-108 > footer,
body.jasour-panel-108 main > .section,
body.jasour-panel-108 main > section:not(.jp-root){
  display:none!important;
}

.jp-root,
.jp-root *{box-sizing:border-box}
.jp-root{
  direction:rtl;
  width:100%;
  min-height:100vh;
  color:var(--jp-text);
}
.jp-wrap{
  width:min(1180px,calc(100% - 28px));
  margin:auto;
}
.jp-card{
  background:linear-gradient(180deg,rgba(11,39,65,.95),rgba(7,27,45,.97));
  border:1px solid var(--jp-line);
  border-radius:18px;
  box-shadow:0 18px 44px rgba(0,0,0,.18);
}

/* Header */
.jp-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(2,11,21,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--jp-line);
}
.jp-header-inner{
  min-height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.jp-brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:#fff;
  min-width:0;
}
.jp-logo{
  width:46px;
  height:46px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,var(--jp-gold2),var(--jp-gold));
  color:#0a1622;
  font-size:24px;
  font-weight:1000;
  box-shadow:0 8px 24px rgba(246,181,27,.20);
  flex:none;
}
.jp-brand-copy b{
  display:block;
  font-size:16px;
}
.jp-brand-copy small{
  display:block;
  color:var(--jp-muted);
  font-size:9px;
  margin-top:2px;
}
.jp-header-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.jp-btn{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:9px 13px;
  border-radius:11px;
  border:1px solid var(--jp-line);
  background:#0a2136;
  color:#fff!important;
  text-decoration:none!important;
  font:inherit;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}
.jp-btn.gold{
  background:linear-gradient(180deg,var(--jp-gold2),var(--jp-gold));
  color:#10151b!important;
  border-color:var(--jp-gold);
}
.jp-btn.ghost:hover{border-color:var(--jp-gold)}
.jp-mobile-menu{display:none}

/* Hero */
.jp-hero{
  padding:30px 0 18px;
}
.jp-hero-card{
  position:relative;
  min-height:235px;
  overflow:hidden;
  display:grid;
  grid-template-columns:1.25fr .75fr;
  align-items:center;
}
.jp-hero-copy{
  padding:34px;
  position:relative;
  z-index:2;
}
.jp-kicker{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--jp-gold2);
  font-size:11px;
  font-weight:800;
  margin-bottom:10px;
}
.jp-hero h1{
  margin:0 0 10px;
  color:#fff;
  font-size:clamp(30px,4vw,46px);
  line-height:1.35;
}
.jp-hero h1 span{color:var(--jp-gold2)}
.jp-hero p{
  margin:0;
  max-width:660px;
  color:#b8c6d2;
  font-size:14px;
  line-height:2;
}
.jp-hero-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:20px;
}
.jp-hero-visual{
  height:100%;
  min-height:235px;
  position:relative;
  background:
    radial-gradient(circle at 60% 35%,rgba(246,181,27,.22),transparent 24%),
    linear-gradient(135deg,rgba(246,181,27,.05),rgba(4,23,38,.55));
}
.jp-hero-visual::before,
.jp-hero-visual::after{
  content:"";
  position:absolute;
  border:1px solid rgba(246,181,27,.22);
  border-radius:50%;
}
.jp-hero-visual::before{
  width:260px;height:260px;
  left:35px;top:-30px;
}
.jp-hero-visual::after{
  width:150px;height:150px;
  left:90px;top:25px;
}
.jp-ball{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:92px;
  height:92px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:54px;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.35));
}

/* Metrics */
.jp-metrics{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:0 0 22px;
}
.jp-metric{
  padding:17px;
  min-width:0;
  display:flex;
  align-items:center;
  gap:13px;
}
.jp-metric-icon{
  width:43px;height:43px;
  border-radius:12px;
  flex:none;
  display:grid;
  place-items:center;
  color:#10151b;
  background:linear-gradient(180deg,var(--jp-gold2),var(--jp-gold));
  font-size:20px;
}
.jp-metric b{
  display:block;
  color:#fff;
  font-size:22px;
  line-height:1.1;
}
.jp-metric span{
  display:block;
  color:var(--jp-muted);
  font-size:10px;
  margin-top:6px;
}

/* Main dashboard */
.jp-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  gap:16px;
  align-items:start;
  padding-bottom:42px;
}
.jp-stack{
  display:grid;
  gap:16px;
}
.jp-section{
  padding:20px;
}
.jp-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 14px;
}
.jp-section-head h2{
  margin:0;
  color:#fff;
  font-size:20px;
}
.jp-section-head p{
  margin:4px 0 0;
  color:var(--jp-muted);
  font-size:10px;
}

/* Course cards */
.jp-course-list{
  display:grid;
  gap:12px;
}
.jp-course{
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.07);
  border-radius:15px;
  background:#061827;
}
.jp-course-thumb{
  min-height:150px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 35%,rgba(246,181,27,.22),transparent 30%),
    linear-gradient(135deg,#0d3654,#071827);
  font-size:50px;
  border-left:1px solid var(--jp-line);
}
.jp-course-body{
  padding:16px;
  min-width:0;
}
.jp-course-status{
  display:inline-flex;
  padding:5px 8px;
  border-radius:999px;
  font-size:9px;
  background:rgba(53,184,120,.13);
  color:#8ce0b6;
  border:1px solid rgba(53,184,120,.28);
  margin-bottom:8px;
}
.jp-course h3{
  margin:0 0 6px;
  font-size:16px;
  line-height:1.6;
  color:#fff;
}
.jp-course-meta{
  color:var(--jp-muted);
  font-size:10px;
  line-height:1.9;
}
.jp-progress{
  margin:12px 0 10px;
}
.jp-progress-track{
  height:8px;
  overflow:hidden;
  border-radius:999px;
  background:#03121e;
  border:1px solid rgba(255,255,255,.06);
}
.jp-progress-fill{
  height:100%;
  width:0;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--jp-gold),var(--jp-gold2));
}
.jp-progress-copy{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:5px;
  color:var(--jp-muted);
  font-size:9px;
}
.jp-course-actions{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:10px;
}

/* Empty state */
.jp-empty{
  padding:28px 18px;
  text-align:center;
  border:1px dashed rgba(246,181,27,.30);
  border-radius:15px;
  background:rgba(246,181,27,.035);
}
.jp-empty-icon{
  font-size:42px;
  margin-bottom:8px;
}
.jp-empty h3{
  margin:0 0 6px;
  color:#fff;
  font-size:16px;
}
.jp-empty p{
  margin:0 auto 15px;
  max-width:480px;
  color:var(--jp-muted);
  font-size:11px;
  line-height:1.9;
}

/* Quick actions */
.jp-quick{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
.jp-quick a{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:72px;
  padding:12px;
  text-decoration:none!important;
  color:#fff!important;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.08);
  background:#061827;
}
.jp-quick a:hover{border-color:var(--jp-gold)}
.jp-quick i{
  width:38px;height:38px;
  flex:none;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:rgba(246,181,27,.10);
  color:var(--jp-gold2);
  font-style:normal;
  font-size:18px;
}
.jp-quick b{
  display:block;
  font-size:12px;
}
.jp-quick small{
  display:block;
  color:var(--jp-muted);
  font-size:8px;
  margin-top:3px;
}

/* Notifications */
.jp-notices{
  display:grid;
  gap:8px;
}
.jp-notice{
  display:grid;
  grid-template-columns:8px minmax(0,1fr);
  gap:10px;
  padding:11px 12px;
  border-radius:12px;
  background:#061827;
  border:1px solid rgba(255,255,255,.07);
}
.jp-notice-dot{
  width:8px;height:8px;
  margin-top:5px;
  border-radius:50%;
  background:var(--jp-gold);
}
.jp-notice b{
  display:block;
  color:#fff;
  font-size:11px;
  line-height:1.7;
}
.jp-notice span{
  display:block;
  color:var(--jp-muted);
  font-size:9px;
  margin-top:2px;
}

/* Account */
.jp-account{
  display:grid;
  gap:10px;
}
.jp-user{
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px;
  border-radius:14px;
  background:#061827;
  border:1px solid rgba(255,255,255,.07);
}
.jp-avatar{
  width:52px;height:52px;
  flex:none;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,var(--jp-gold2),var(--jp-gold));
  color:#111923;
  font-size:22px;
  font-weight:1000;
}
.jp-user b{
  display:block;
  font-size:14px;
}
.jp-user span{
  display:block;
  color:var(--jp-muted);
  font-size:9px;
  margin-top:4px;
}

/* Original backend escape hatch */
.jp-native-host{
  display:none!important;
}

@media(max-width:900px){
  .jp-grid{
    grid-template-columns:1fr;
  }
  .jp-metrics{
    grid-template-columns:1fr 1fr;
  }
  .jp-hero-card{
    grid-template-columns:1fr;
  }
  .jp-hero-visual{
    display:none;
  }
}

@media(max-width:620px){
  .jp-wrap{
    width:calc(100% - 20px);
  }
  .jp-header-inner{
    min-height:62px;
  }
  .jp-brand-copy small{display:none}
  .jp-header-actions .jp-account-link{display:none}
  .jp-mobile-menu{display:inline-flex}
  .jp-hero{
    padding-top:16px;
  }
  .jp-hero-copy{
    padding:22px 17px;
  }
  .jp-hero h1{
    font-size:27px;
  }
  .jp-hero p{
    font-size:12px;
    line-height:1.9;
  }
  .jp-metrics{
    gap:8px;
  }
  .jp-metric{
    padding:12px;
  }
  .jp-metric-icon{
    width:36px;height:36px;
    font-size:16px;
  }
  .jp-metric b{
    font-size:18px;
  }
  .jp-section{
    padding:14px;
  }
  .jp-course{
    grid-template-columns:1fr;
  }
  .jp-course-thumb{
    min-height:120px;
    border-left:0;
    border-bottom:1px solid var(--jp-line);
  }
  .jp-quick{
    grid-template-columns:1fr;
  }
}

@media(max-width:410px){
  .jp-metrics{
    grid-template-columns:1fr;
  }
}

/* === JASOUR PANEL ENROLLMENTS v10.20 START === */
.j20-status.pending{
  background:rgba(246,181,27,.10)!important;
  border-color:rgba(246,181,27,.35)!important;
  color:#ffd45a!important;
}
.j20-status.approved{
  background:rgba(53,184,120,.13)!important;
  border-color:rgba(53,184,120,.32)!important;
  color:#91e0b8!important;
}
.j20-status.completed{
  background:rgba(84,165,255,.12)!important;
  border-color:rgba(84,165,255,.30)!important;
  color:#a8d3ff!important;
}
.j20-status.correction{
  background:rgba(236,102,102,.12)!important;
  border-color:rgba(236,102,102,.32)!important;
  color:#ffb5bd!important;
}

.j20-pending-note{
  margin:12px 0 4px;
  padding:11px 12px;
  border-radius:11px;
  border:1px solid rgba(246,181,27,.18);
  background:rgba(246,181,27,.045);
  color:#b9c6d2;
  font-size:10px;
  line-height:1.9;
}

.j20-course-wait{
  width:100%;
  background:#0a2136!important;
  color:#ffd45a!important;
  border-color:rgba(246,181,27,.30)!important;
  cursor:not-allowed!important;
  opacity:1!important;
}

.j20-course-pending .jp-course-thumb{
  opacity:.72;
}
.j20-course-pending{
  border-color:rgba(246,181,27,.18)!important;
}

@media(max-width:620px){
  .j20-course-wait,
  .j20-course-open{
    width:100%;
  }
}
/* === JASOUR PANEL ENROLLMENTS v10.20 END === */

/* === JASOUR PANEL ENROLLMENTS v10.20 START === */
.j20-status.pending{
  background:rgba(246,181,27,.10)!important;
  border-color:rgba(246,181,27,.35)!important;
  color:#ffd45a!important;
}
.j20-status.approved{
  background:rgba(53,184,120,.13)!important;
  border-color:rgba(53,184,120,.32)!important;
  color:#91e0b8!important;
}
.j20-status.completed{
  background:rgba(84,165,255,.12)!important;
  border-color:rgba(84,165,255,.30)!important;
  color:#a8d3ff!important;
}
.j20-status.correction{
  background:rgba(236,102,102,.12)!important;
  border-color:rgba(236,102,102,.32)!important;
  color:#ffb5bd!important;
}

.j20-pending-note{
  margin:12px 0 4px;
  padding:11px 12px;
  border-radius:11px;
  border:1px solid rgba(246,181,27,.18);
  background:rgba(246,181,27,.045);
  color:#b9c6d2;
  font-size:10px;
  line-height:1.9;
}

.j20-course-wait{
  width:100%;
  background:#0a2136!important;
  color:#ffd45a!important;
  border-color:rgba(246,181,27,.30)!important;
  cursor:not-allowed!important;
  opacity:1!important;
}

.j20-course-pending .jp-course-thumb{
  opacity:.72;
}
.j20-course-pending{
  border-color:rgba(246,181,27,.18)!important;
}

@media(max-width:620px){
  .j20-course-wait,
  .j20-course-open{
    width:100%;
  }
}
/* === JASOUR PANEL ENROLLMENTS v10.20 END === */