:root{--orange:#ff7a18;--gold:#f9b12d;--ink:#171514;--muted:#797776;--line:#eee6de;--cream:#fff9f2;--bg:#f7f8fa;--shadow:0 14px 40px rgba(35,24,11,.06)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);font-size:14px;max-width:100%;overflow-x:clip}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
input,select,textarea{width:100%;border:1px solid #dddcd9;border-radius:12px;padding:12px 13px;background:#fff;outline:none;color:#292929;min-width:0;box-sizing:border-box}
input:focus,textarea:focus,select:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,122,24,.12)}
button:focus-visible,a:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

.dashboard-shell{min-height:100vh;display:flex;max-width:100vw;overflow-x:clip}
.panel-sidebar{width:258px;flex:0 0 258px;min-height:100vh;position:sticky;top:0;height:100vh;overflow-y:auto;-webkit-overflow-scrolling:touch;background:#181716;color:#d6d0c8;padding:23px 15px;display:flex;flex-direction:column;z-index:50}
.dashboard-brand,.auth-logo{display:flex;align-items:center;gap:12px}
.dashboard-brand{padding:8px 12px 23px;color:#fff}
.dashboard-brand img,.auth-logo img{width:46px;height:46px;object-fit:contain;border-radius:12px;flex-shrink:0}
.dashboard-brand strong,.auth-logo b{font-size:24px;letter-spacing:-1px}
.dashboard-brand small,.auth-logo small{display:block;font-size:10px;letter-spacing:.9px;color:#aaa197;margin-top:3px}
.nav-strap{font-size:10px;letter-spacing:2px;color:#958a80;margin:9px 13px 14px;font-weight:800}
.panel-sidebar nav a,.nav-footer a{display:block;padding:13px 13px;border-radius:10px;color:#ccc6c0;margin:2px 0;font-weight:550;transition:background .2s,color .2s}
.panel-sidebar nav a:hover,.panel-sidebar nav a.active{background:#39312b;color:#fff}
.panel-sidebar nav a.active{box-shadow:inset 3px 0 var(--orange)}
.nav-footer{margin-top:auto;padding-top:18px;border-top:1px solid #37332f}
.nav-footer a{font-size:12px}

.panel-app{min-width:0;flex:1;max-width:100%}
.panel-topbar{height:74px;background:#fff;display:flex;align-items:center;gap:14px;padding:0 26px;border-bottom:1px solid var(--line);min-width:0;position:sticky;top:0;z-index:30}
.panel-topbar-name{font-weight:750;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.top-spacer{flex:1}
.user-chip{display:flex;align-items:flex-end;flex-direction:column;white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis;font-weight:750}
.user-chip small{color:var(--muted);font-size:10px;font-weight:600;margin-top:3px}
.logout-btn,.pill-link,.button-small{border:1px solid #e7dbcc;background:#fff9f3;padding:8px 13px;border-radius:9px;font-weight:750;color:#9c4e18;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;transition:background .2s}
.logout-btn:hover,.pill-link:hover,.button-small:hover{background:#ffe8d5}
.inline{display:inline}
.menu-toggle{border:0;background:transparent;display:none;padding:8px;font-size:20px;cursor:pointer}

.panel-main{padding:34px clamp(16px,3vw,42px) 80px;max-width:1440px;margin:auto}
.welcome-kicker,.auth-kicker{font-size:11px;font-weight:850;letter-spacing:1.7px;color:#ab641a}
.panel-main h1,.catalog-main h1{font-size:clamp(28px,4vw,47px);letter-spacing:-1.8px;line-height:1.15;margin:10px 0 22px;font-weight:850}
.page-desc{color:#64656b;line-height:1.7;font-size:15px;max-width:830px;margin:0 0 24px}

.notice{background:#fff8e6;border:1px solid #f2dcb4;border-radius:13px;padding:14px 18px;margin:15px 0;color:#6d4b20;line-height:1.5}
.notice.success{background:#effaf4;border-color:#c8ead5;color:#246c44}
.notice.error{background:#fff0f0;border-color:#f3c5c5;color:#a12222}
.notice.warning{background:#fff5d5}
.notice a{text-decoration:underline}

.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:14px;margin-bottom:26px}
.metric-card{border:1px solid #efe7df;background:#fff;border-radius:18px;padding:23px;min-height:150px;box-shadow:var(--shadow);transition:transform .25s,border-color .25s}
.metric-card:hover{transform:translateY(-4px);border-color:#edb67f}
.kicker{color:#6a6560;font-size:12px;font-weight:750}
.metric-number{font-size:38px;font-weight:850;margin:14px 0;letter-spacing:-1.5px}
.metric-foot{font-size:11px;color:#818181}
.metric-foot span{color:#ff8b25;float:right}

.surface{background:#fff;border:1px solid var(--line);border-radius:18px;margin:20px 0;padding:24px;box-shadow:var(--shadow)}
.surface-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:20px}
.surface-heading h2{font-size:21px;margin:0 0 6px;letter-spacing:-.5px}
.surface-heading p{color:#8b8681;margin:0;line-height:1.5}

.table-scroller{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:13px}
td,th{text-align:left;padding:14px 13px;border-bottom:1px solid #f1ebe4;vertical-align:middle}
th{white-space:nowrap;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#858078;background:#fffcf9}
td strong{font-weight:750}
td small{color:#8c8580;font-size:11px}
td.actions{min-width:140px}
td .table-form,td .actions form{display:inline-flex;gap:7px;align-items:center;flex-wrap:wrap;margin:3px}
td select{padding:8px;border-radius:8px;width:auto;min-width:96px}

.tag{display:inline-block;padding:6px 10px;background:#fff0df;border-radius:30px;color:#a5591a;font-size:11px;font-weight:750;white-space:nowrap}
.status-published,.status-active{background:#def7e8;color:#277a4e}
.status-pending{background:#fff4cf;color:#84600a}
.status-rejected,.status-suspended{background:#ffe4e4;color:#a63f3f}
.status-archived,.status-draft{background:#eee;color:#555}
.empty{text-align:center;padding:35px;color:#898580}

.panel-form label,.auth-card label{display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:750;color:#56514e}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:19px}
.form-grid .two{grid-column:span 2}
.form-actions{display:flex;justify-content:flex-end;align-items:center;gap:16px;margin-top:25px}
.btn-main{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(120deg,#ff861f,#ffac26);color:#261b12;border:0;border-radius:11px;min-height:43px;padding:11px 20px;font-weight:850;box-shadow:0 8px 17px rgba(255,149,41,.2);transition:transform .2s,box-shadow .2s;white-space:nowrap}
.btn-main:hover{transform:translateY(-2px);box-shadow:0 13px 22px rgba(255,149,41,.28)}
.wide{width:100%}

.check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:18px 0}
.check-tile{padding:12px;display:flex;align-items:flex-start;gap:9px;border:1px solid #f1ebe4;border-radius:10px}
.check-tile input{width:17px;margin-top:2px;accent-color:#ff8c26}
.check-tile strong,.check-tile small{display:block}
.check-tile small{color:#8a837e;margin-top:5px;font-size:10px}

.login-body{background:radial-gradient(ellipse at 5% 0%,#fff0d7 0,transparent 40%),linear-gradient(120deg,#fdfbf7,#fff);min-height:100vh;display:grid;place-items:center;padding:20px}
.auth-card{width:min(100%,470px);background:#fff;border:1px solid #f4e7d7;padding:37px;border-radius:23px;box-shadow:0 40px 80px rgba(56,43,23,.08)}
.auth-card .auth-logo{margin-bottom:27px}
.auth-card h1{font-size:30px;margin:9px 0;letter-spacing:-1px}
.muted{color:#7e7771}
.tiny{font-size:12px}
.auth-card p{line-height:1.6}
.auth-card form{display:grid;gap:17px;margin:24px 0}
.auth-footer{margin-top:25px;border-top:1px solid var(--line);padding-top:20px;font-size:12px}
.role-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.role-links a,.auth-card a:not(.auth-logo){color:#bf6217;font-weight:750}

.catalog-body{background:#fffaf4}
.catalog-header{display:flex;align-items:center;justify-content:space-between;padding:15px max(24px,calc((100vw - 1260px)/2));background:#fff;border-bottom:1px solid var(--line);gap:20px;flex-wrap:wrap}
.catalog-header nav{display:flex;gap:23px;font-weight:750;flex-wrap:wrap;font-size:13px}
.catalog-header nav a:hover{color:#ff7a18}
.catalog-main{max-width:1260px;margin:0 auto;padding:65px 22px}
.catalog-main h1{font-size:clamp(32px,5vw,62px)}
.catalog-filters{display:grid;grid-template-columns:minmax(200px,2fr) repeat(2,minmax(150px,1fr)) auto;gap:12px;max-width:1150px;padding:16px;background:#fff;border:1px solid #f4eadf;border-radius:18px;margin:25px 0 40px}
.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.catalog-course{background:#fff;border:1px solid #eee5db;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);transition:transform .25s}
.catalog-course:hover{transform:translateY(-7px)}
.course-art{height:175px;background:radial-gradient(circle at 90% 10%,#f5a51b88,transparent 40%),linear-gradient(135deg,#221e1b,#493324);color:#ffb641;display:flex;align-items:center;justify-content:center;position:relative;font-size:70px}
.course-art small{position:absolute;bottom:12px;right:15px;color:#fff;text-transform:uppercase;font-size:11px;font-weight:750;letter-spacing:1px}
.catalog-card-copy{padding:20px}
.catalog-card-copy h2{font-size:19px;letter-spacing:-.5px;min-height:45px;margin:10px 0 6px}
.catalog-card-copy p{color:#737373;line-height:1.6;min-height:62px;margin:0 0 14px;font-size:13px}
.catalog-owner{font-size:12px;color:#7f7467;display:block}
.catalog-price{border-top:1px solid var(--line);margin-top:16px;padding-top:15px;font-size:17px;font-weight:850;display:flex;justify-content:space-between;align-items:center}
.catalog-price span{color:#c85f0e;font-size:13px}

.course-detail-wrap{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(270px,.7fr);gap:50px}
.course-purchase{background:#fff;border-radius:19px;border:1px solid var(--line);padding:20px;align-self:start;box-shadow:var(--shadow)}
.course-purchase .course-art{border-radius:13px;height:180px}
.course-purchase h2{font-size:29px;margin:16px 0 18px}
.feature-list{display:grid;gap:14px;margin-top:36px}
.feature-list>div{padding:16px;border:1px solid var(--line);border-radius:11px;background:#fff}
.feature-list b{display:inline-block;min-width:90px}

/* Responsive Media Queries */
@media(max-width:1050px){
  .panel-sidebar{width:220px;flex-basis:220px}
  .panel-main{padding:25px 22px 65px}
  .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .catalog-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .catalog-filters input{grid-column:span 2}
  .catalog-filters button{grid-column:span 2}
  .course-detail-wrap{gap:32px}
}

@media(max-width:768px){
  .panel-sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-102%);transition:transform .28s cubic-bezier(.2,.8,.2,1);width:min(300px,86vw);z-index:1000;box-shadow:none}
  .panel-sidebar.open{transform:translateX(0);box-shadow:0 0 0 100vmax rgba(0,0,0,.65)}
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:#faf7f2;border:1px solid var(--line);font-size:20px;color:#242321}
  
  .panel-topbar{padding:0 14px;height:64px;gap:10px}
  .panel-topbar-name{font-size:13px;max-width:140px}
  .user-chip{font-size:11px;max-width:100px}
  .user-chip small{display:none}
  .logout-btn{font-size:11px;padding:8px 11px}

  .panel-main{padding:20px 14px 60px}
  .panel-main h1,.catalog-main h1{font-size:32px;letter-spacing:-1.2px;margin:8px 0 16px}
  .page-desc{font-size:14px;margin-bottom:18px}

  .form-grid{grid-template-columns:1fr;gap:14px}
  .form-grid .two{grid-column:auto}
  .form-actions{flex-direction:column-reverse;gap:10px;width:100%}
  .form-actions .btn-main,.form-actions .pill-link{width:100%;text-align:center;justify-content:center}

  .surface{padding:18px 14px;margin:16px 0;border-radius:15px}
  .surface-heading{flex-direction:column;align-items:flex-start;gap:10px}
  .surface-heading .btn-main,.surface-heading .pill-link{width:100%;text-align:center;justify-content:center}

  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .metric-card{min-height:115px;padding:16px}
  .metric-number{font-size:30px;margin:10px 0}

  .table-scroller{margin:10px 0}
  table{min-width:580px}
  th,td{padding:11px 10px}

  .catalog-grid{grid-template-columns:1fr;gap:16px}
  .catalog-header{padding:14px 16px}
  .catalog-main{padding:32px 14px 60px}
  .catalog-filters{grid-template-columns:1fr;gap:10px;padding:14px;border-radius:14px;margin:16px 0 28px}
  .catalog-filters input,.catalog-filters button{grid-column:auto;width:100%}
  .catalog-card-copy h2,.catalog-card-copy p{min-height:auto}

  .course-detail-wrap{grid-template-columns:1fr;gap:24px}
  .course-purchase{width:100%;padding:18px 14px}
  .feature-list{margin-top:20px;gap:10px}
}

@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr 1fr;gap:8px}
  .metric-card{padding:12px;min-height:98px}
  .kicker{font-size:10px}
  .metric-number{font-size:24px;margin:6px 0}
  
  .auth-card{padding:26px 18px;border-radius:18px;width:100%}
  .auth-card h1{font-size:25px}
  
  .panel-topbar{padding:0 10px;gap:8px}
  .panel-topbar-name{max-width:105px;font-size:12px}
  .user-chip{display:none}
  .logout-btn{padding:7px 9px;font-size:10px}

  .check-grid{grid-template-columns:1fr}
  .role-links{gap:8px}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ========================================================
   Admin Courses: Search Filter Bar, Sl. No. & Pagination
   ======================================================== */
.admin-filter-container {
  background: #fbf9f6;
  border: 1px solid #ede4da;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 20px;
}

.admin-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-filter-bar .filter-field {
  flex: 1 1 160px;
  min-width: 140px;
  position: relative;
}

.admin-filter-bar .filter-search {
  flex: 2 1 240px;
  min-width: 200px;
}

.filter-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9a9289;
  font-size: 15px;
  pointer-events: none;
}

.admin-filter-bar .filter-search input {
  padding-left: 34px;
  height: 42px;
  font-size: 13px;
  border-radius: 10px;
  border: 1px solid #dcd3c8;
  background: #ffffff;
}

.admin-filter-bar .filter-select-wrap select {
  height: 42px;
  font-size: 13px;
  border-radius: 10px;
  border: 1px solid #dcd3c8;
  background: #ffffff;
  padding: 8px 12px;
  color: #332d28;
}

.filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.btn-filter-submit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 42px;
  padding: 0 18px;
  background: linear-gradient(135deg, #ff7a18, #f59e0b);
  color: #ffffff;
  font-weight: 750;
  font-size: 13px;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(255, 122, 24, 0.25);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}

.btn-filter-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 122, 24, 0.35);
}

.btn-filter-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 14px;
  background: #fff0ea;
  color: #b94a12;
  border: 1px solid #fed7aa;
  font-weight: 700;
  font-size: 12px;
  border-radius: 10px;
  text-decoration: none;
  transition: background .15s, color .15s;
}

.btn-filter-clear:hover {
  background: #ffdecb;
  color: #923408;
}

.filter-meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #f0e7dd;
  font-size: 12px;
  color: #78716c;
  flex-wrap: wrap;
}

.filter-meta-count strong {
  color: #1c1917;
}

.filter-page-indicator {
  color: #8c827a;
  margin-left: 4px;
}

.active-filter-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.tags-label {
  font-size: 11px;
  font-weight: 700;
  color: #8c827a;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f4eee7;
  color: #574d44;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  border: 1px solid #e7dcce;
}

/* Sl. No. Column */
.th-sl-no {
  width: 68px;
  text-align: center;
}

.col-sl-no {
  text-align: center;
  width: 68px;
  padding-left: 8px;
  padding-right: 8px;
}

.sl-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 28px;
  padding: 0 6px;
  border-radius: 8px;
  background: #f4eee6;
  color: #63584e;
  font-weight: 800;
  font-size: 12px;
  border: 1px solid #e6ded3;
}

.col-course-info strong {
  display: block;
  font-size: 14px;
  line-height: 1.3;
  color: #1c1917;
}

.col-course-info .course-cat {
  color: #d97706;
  font-weight: 650;
}

.col-course-info .course-creator {
  color: #857e75;
}

.col-price strong {
  color: #15803d;
  font-size: 14px;
}

.tag-mode {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.empty-state-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 30px 10px;
}

.empty-state-wrap .empty-icon {
  font-size: 32px;
  color: #c4b9ad;
}

/* Pagination Bar */
.admin-pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
  padding: 16px 4px 6px;
  border-top: 1px solid #efe8e0;
  flex-wrap: wrap;
}

.admin-pagination-bar.single-page {
  justify-content: center;
}

.pagination-info {
  font-size: 13px;
  color: #78716c;
}

.pagination-info strong {
  color: #1c1917;
}

.pagination-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 13px;
  border-radius: 9px;
  border: 1px solid #e2d9cd;
  background: #ffffff;
  color: #44403c;
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
  transition: all .15s;
}

.page-btn:hover:not(.disabled) {
  background: #fff4ea;
  border-color: #ffb875;
  color: #c25408;
}

.page-btn.disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
  background: #f7f5f2;
}

.pagination-numbers {
  display: flex;
  align-items: center;
  gap: 4px;
}

.page-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border-radius: 9px;
  border: 1px solid #e2d9cd;
  background: #ffffff;
  color: #44403c;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: all .15s;
}

.page-num:hover:not(.active) {
  background: #fff4ea;
  border-color: #ffb875;
  color: #c25408;
}

.page-num.active {
  background: #24201d;
  color: #ffffff;
  border-color: #24201d;
  box-shadow: 0 2px 8px rgba(36, 32, 29, 0.2);
}

.page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 36px;
  color: #a8a29e;
  font-weight: 700;
}

@media (max-width: 768px) {
  .admin-filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .admin-filter-bar .filter-field,
  .admin-filter-bar .filter-search {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }
  .filter-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .btn-filter-submit, .btn-filter-clear {
    width: 100%;
  }
  .admin-pagination-bar {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }
  .pagination-nav {
    flex-wrap: wrap;
    justify-content: center;
  }
}