@font-face {
    font-family: 'Lato';
    src: url('/fonts/lato-light-webfont.eot');
    src: url('/fonts/lato-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/lato-light-webfont.woff2') format('woff2'),
         url('/fonts/lato-light-webfont.woff') format('woff'),
         url('/fonts/lato-light-webfont.ttf') format('truetype'),
         url('/fonts/lato-light-webfont.svg#lato_lightregular') format('svg');
    font-weight: 300;
    font-style: normal;

}

@font-face {
    font-family: 'Lato'; 
    src: url('/fonts/lato-lightitalic-webfont.eot');
    src: url('/fonts/lato-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/lato-lightitalic-webfont.woff2') format('woff2'),
         url('/fonts/lato-lightitalic-webfont.woff') format('woff'),
         url('/fonts/lato-lightitalic-webfont.ttf') format('truetype'),
         url('/fonts/lato-lightitalic-webfont.svg#lato_lightitalic') format('svg');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Lato';
    src: url('/fonts/lato-regular-webfont.eot');
    src: url('/fonts/lato-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/lato-regular-webfont.woff2') format('woff2'),
         url('/fonts/lato-regular-webfont.woff') format('woff'),
         url('/fonts/lato-regular-webfont.ttf') format('truetype'),
         url('/fonts/lato-regular-webfont.svg#latoregular') format('svg');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('/fonts/lato-regular-italic-webfont.eot');
    src: url('/fonts/lato-regular-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/lato-regular-italic-webfont.woff2') format('woff2'),
         url('/fonts/lato-regular-italic-webfont.woff') format('woff'),
         url('/fonts/lato-regular-italic-webfont.ttf') format('truetype'),
         url('/fonts/lato-regular-italic-webfont.svg#latoitalic') format('svg');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Lato';
    src: url('/fonts/lato-bold-webfont.eot');
    src: url('/fonts/lato-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/lato-bold-webfont.woff2') format('woff2'),
         url('/fonts/lato-bold-webfont.woff') format('woff'),
         url('/fonts/lato-bold-webfont.ttf') format('truetype'),
         url('/fonts/lato-bold-webfont.svg#latobold') format('svg');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('/fonts/lato-bolditalic-webfont.eot');
    src: url('/fonts/lato-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/lato-bolditalic-webfont.woff2') format('woff2'),
         url('/fonts/lato-bolditalic-webfont.woff') format('woff'),
         url('/fonts/lato-bolditalic-webfont.ttf') format('truetype'),
         url('/fonts/lato-bolditalic-webfont.svg#latobold_italic') format('svg');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Lato';
    src: url('/fonts/lato-black-webfont.eot');
    src: url('/fonts/lato-black-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/lato-black-webfont.woff2') format('woff2'),
         url('/fonts/lato-black-webfont.woff') format('woff'),
         url('/fonts/lato-black-webfont.ttf') format('truetype'),
         url('/fonts/lato-black-webfont.svg#lato_blackregular') format('svg');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('/fonts/lato-blackitalic-webfont.eot');
    src: url('/fonts/lato-blackitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/lato-blackitalic-webfont.woff2') format('woff2'),
         url('/fonts/lato-blackitalic-webfont.woff') format('woff'),
         url('/fonts/lato-blackitalic-webfont.ttf') format('truetype'),
         url('/fonts/lato-blackitalic-webfont.svg#lato_blackitalic') format('svg');
    font-weight: 900;
    font-style: italic;
}


body {font-family: 'Lato'; background: #ffffff; font-weight: 400; margin:0; padding: 0;}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-family: 'Lato', sans-serif; }
img { max-width:100%;} 
a, button { -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; transition: all 0.5s ease-out 0s;}
.container-fluid {padding-right: 0; padding-left: 0;}
/*---------- Helper Classes /or\ Comman Classes ---------- */
input.form-control, textarea.form-control, .bootstrap-select.form-control {background-color:#fff; border:1px solid #e0e0e0; border-radius:8px; box-shadow:none; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow: ellipsis; height:44px; color: #111111; padding:6px 14px; transition:border-color 0.2s, box-shadow 0.2s;}
textarea.form-control {height:auto; white-space:normal; overflow:auto; resize:none;}
.bootstrap-select.form-control { overflow:visible;} 
.left-addon input.form-control { padding-left:57px;}
.left-addon i {position:absolute; left:15px; top:15px; min-width:35px; font-size:16px; color:#999999;}
.left-addon {position:relative;}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { background-color:#1c1c2e;}
.bootstrap-select .dropdown-toggle .caret:after {
    position: absolute;
    top: 0px;
    right: 0;
    content: "\f107";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    border: none;
    width: auto;
    height: auto;
    color: #999;
    transition: color 0.2s;
}
.bootstrap-select.open .dropdown-toggle .caret:after { color:#FFC107; }
.bootstrap-select .dropdown-menu { border-radius:8px; border:1px solid #e0e0e0; box-shadow:0 4px 16px rgba(0,0,0,0.08); margin-top:4px; padding:4px 0; }
.bootstrap-select .dropdown-menu li a { padding:8px 14px; font-size:13px; color:#444; transition:background 0.15s; }
.bootstrap-select .dropdown-menu li a:hover { background:#f5f5f5; color:#1c1c2e; }
.bootstrap-select .dropdown-menu li.selected a { background:#FFC107; color:#1c1c2e; font-weight:600; }
.bootstrap-select .dropdown-toggle { border-radius:8px; }
.bootstrap-select .dropdown-toggle:focus { border-color:#FFC107 !important; outline:0; box-shadow:0 0 0 3px rgba(255,193,7,0.12) !important; }
.bootstrap-select.open .dropdown-toggle { border-color:#FFC107; box-shadow:0 0 0 3px rgba(255,193,7,0.12); }
.bootstrap-select.dropup .dropdown-toggle .caret:after {
    content: "\f106";
}
.form-control:focus {
    border-color: #FFC107;
    outline: 0;
    -webkit-box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.12);
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.12);
}
.srp-dropdown > .dropdown-toggle.btn-default, .srp-dropdown > .dropdown-toggle.btn-default:focus { border-color:#fff;}
.btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default, .btn-default:active:hover, .btn-default.active:hover, .open > .dropdown-toggle.btn-default:hover, .btn-default:active:focus, .btn-default.active:focus, .open > .dropdown-toggle.btn-default:focus, .btn-default:active.focus, .btn-default.active.focus, .open > .dropdown-toggle.btn-default.focus {background-color:transparent;}
.right-addon input.form-control {padding-right:57px;}
.right-addon i {position:absolute; right:15px; top:15px; min-width:35px; font-size:16px; color:#999999; text-align:right;}
.right-addon .common-icon {position:absolute; right:15px; top:10px; min-width:35px; font-size:16px; color:#999999; text-align:right;}
.right-addon {position:relative;}
.form-group {margin-bottom:30px;}
.custom-checkbox {display:block; padding:0; position:relative;}
.custom-checkbox label {position:relative; letter-spacing:0.5px;}
.custom-checkbox input[type="checkbox"] {position:absolute; left:0; top:0; opacity:0;}
.custom-checkbox input[type="checkbox"] + label {padding-left:30px;}
.custom-checkbox input[type="checkbox"] + label span {display:inline-block;width:20px;height:20px; margin:0;cursor:pointer; position:absolute; left:0; top:1px; border:1px solid #444444; line-height:16px;  font-size:15px; text-align:center;}
.custom-checkbox input[type="checkbox"] + label span .fa-check {opacity:0; }
.custom-checkbox input[type="checkbox"]:checked + label span {background-color:#fff;}
.custom-checkbox input[type="checkbox"]:checked + label span .fa-check {opacity:1;color:#444444; font-size:10px;}
.custom-radio {display:block; margin-bottom:5px; padding:0;position:relative;}
.custom-radio label {position:relative; padding-right:15px;}
.custom-radio input[type="radio"] {opacity:0; position:absolute; left:0; top:0}
.custom-radio input[type="radio"] + label {margin-bottom:0; padding-left:25px;}
.custom-radio input[type="radio"] + label span {display:inline-block;width:15px;height:15px; margin:-1px 10px 0 0;vertical-align:middle;cursor:pointer;position:absolute; left:0; top:5px; border:1px solid #444;border-radius:50%; background-color:#fff; text-align:center; line-height:17px; }
.custom-radio input[type="radio"]:checked + label span {border:5px solid #444;}
.inline-element {display:inline-block;}
.width-100 {width:100%;}

.m_top_20 {margin-top: 20px; }
.mright10 {margin-right: 10px;}
ul {margin:0; padding:0; list-style-type:none;}
.large-btn {border-radius: 20px;
    font-size: 18px;
    line-height: 1.33333;
    padding: 15px 16px;
    background-color: #333333;
    border: none;
    color: #fff;
    font-weight:700;
    min-width:180px;
    } 
.large-btn:hover, .large-btn:focus {
    background-color: #000;
    color: #fff;
}

.medium-btn {border-radius: 20px;
    font-size: 14px;
    line-height: 1.33333;
    padding: 6px 20px;
    background-color: #333333;
    border: none;
    color: #fff;
    font-weight:700;
    } 
.medium-btn:hover, .medium-btn:focus {
    background-color: #000;
    color: #fff;
}

.cancel-btn {border-radius: 20px;
    font-size: 18px;
    line-height: 1.33333;
    padding: 15px 16px;
    background-color: #fff;
    border: none;
    color: #333333;
    font-weight:700;
    min-width:180px;
    border:2px solid #333333;
    } 
.cancel-btn:hover, .cancel-btn:focus {
    background-color: #333;
    color: #fff;
}
.white-btn {border-radius: 20px;
    font-size: 18px;
    line-height: 1.33333;
    padding: 15px 16px;
    background-color: #fff;
    border: none;
    color: #111111;
    font-weight:700;
    min-width:180px;
    } 
.white-btn:hover, .white-btn:focus {
    background-color: #e4e4e4;
    color: #000;
}

/* Left menu toggle function css*/
.main_content {position: relative; padding-left: 0; margin: 0;}
.left_slide_menu {
    position: fixed;
    left: -300px;
    top: 0;
    bottom: 0;
    width: 300px;
    background: #ffffff;
    z-index: 105;
    overflow: hidden;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 4px 0 24px rgba(0,0,0,0.12);
    padding-top: 0;
    display: flex;
    flex-direction: column;
}
.left_slide_menu.active { left: 0; }

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}
.sidebar-title {
    font-size: 18px;
    font-weight: 700;
    color: #333;
}
.sidebar-close {
    background: none;
    border: none;
    font-size: 20px;
    color: #666;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.2s;
}
.sidebar-close:hover {
    background: #f5f5f5;
    color: #333;
}

.sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 24px;
}

.menu-divider {
    height: 1px;
    background: #eee;
    margin: 8px 20px;
}
.menu-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #999;
    padding: 12px 28px 4px;
}

.left_menu_list {
    padding: 6px 12px;
    list-style-type: none;
    margin: 0;
}
.left_menu_list li {
    display: block;
    border: none;
    margin-bottom: 1px;
}
.left_menu_list li a,
.left_menu_list li a:hover,
.left_menu_list li a:focus {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    text-decoration: none;
    border-radius: 10px;
    transition: background 0.2s;
}
.left_menu_list li:hover a {
    background: #f5f5f5;
}
.left_menu_list li a .menu_icon {
    width: 22px;
    text-align: center;
    color: #777;
    font-size: 16px;
    position: static;
    line-height: 1;
    flex-shrink: 0;
}
.left_menu_list li a .menu_text {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    text-transform: none;
    position: static;
    display: block;
}
.overlay-backdrop {position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 104; display: none;}
.overlay-backdrop.active {display: block;}


/* Header & Top bar Css Starts */
header .navbar-default {
    margin-left: 0;
    background: #FFD54F;
    height: 56px;
    border-radius: 0;
    border: 0;
    border-bottom: none;
    position: relative;
    margin-bottom: 0;
    z-index: 50;
    padding: 0;
    box-shadow: none;
}

header .navbar-container {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 16px;
    gap: 16px;
}

/* --- Header Left (hamburger + logo) --- */
.hdr-left {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.hdr-hamburger {
    border: none;
    background: transparent;
    color: #333;
    outline: none;
    box-shadow: none;
    width: 40px;
    height: 40px;
    z-index: 20;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border-radius: 8px;
    transition: background 0.2s ease;
}
.hdr-hamburger:hover {
    background: rgba(0,0,0,0.08);
}
.hamburger-lines {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 20px;
    height: 20px;
}
.hamburger-lines .line {
    display: block;
    width: 100%;
    height: 2px;
    background: #333;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
}
.hamburger-lines .line-2 {
    width: 70%;
    transition: all 0.3s ease;
}
/* Hamburger → X animation */
.hdr-hamburger.is-active .line-1 {
    transform: translateY(7px) rotate(45deg);
}
.hdr-hamburger.is-active .line-2 {
    opacity: 0;
    width: 0;
}
.hdr-hamburger.is-active .line-3 {
    transform: translateY(-7px) rotate(-45deg);
}
.hdr-logo {
    display: flex;
    align-items: center;
    text-decoration: none !important;
    height: 40px;
}
/* The lockup is 6.67:1 and tightly cropped, unlike the old raster (3.49:1 with
   heavy transparent padding). Same CSS height therefore renders a much larger
   wordmark and a much wider box, so this is 21px rather than the old 34px —
   that lands the mark at ~140px wide, close to the 119px it used to occupy,
   while the wordmark itself goes from ~12px to ~17px tall. */
.hdr-logo img {
    height: 21px;
    width: auto;
    display: block;
    vertical-align: middle;
}

/* --- Header Center (search) --- */
.hdr-center {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
    max-width: 560px;
    margin: 0 auto;
}
.hdr-search-form {
    width: 100%;
    margin: 0;
}
.hdr-search-wrap {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 24px;
    height: 40px;
    padding: 0 4px 0 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.hdr-search-wrap:focus-within {
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.9);
}
.hdr-search-icon {
    color: #887530;
    font-size: 14px;
    flex-shrink: 0;
    margin-right: 10px;
}
.hdr-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    color: #333;
    outline: none;
    height: 100%;
    padding: 0;
    font-family: 'Lato', sans-serif;
    min-width: 0;
}
.hdr-search-input::placeholder {
    color: #999;
}
.hdr-search-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: none;
    background: #333;
    color: #FFD54F;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: background 0.2s ease;
}
.hdr-search-btn:hover {
    background: #555;
}
.hdr-search-btn:focus {
    outline: none;
}

/* --- Header Right (auth buttons) --- */
.hdr-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.hdr-btn {
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    padding: 7px 16px;
    border-radius: 20px;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: inline-block;
    line-height: 1.4;
}
.hdr-btn-ghost {
    color: #333;
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(0,0,0,0.1);
}
.hdr-btn-ghost:hover {
    color: #000;
    background: rgba(255,255,255,0.9);
}
.hdr-btn-primary {
    color: #fff;
    background: #333;
}
.hdr-btn-primary:hover {
    background: #555;
    color: #fff;
}

/* --- Legacy hamburger compat --- */
.left_menu_toggle { display: none; }

/* --- Logged-in User Dropdown --- */
.hdr-user-menu {
  position: relative;
}
.hdr-user-toggle {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border: none;
  background: none;
  border-radius: 24px;
  text-decoration: none !important;
  color: #333 !important;
  transition: background 0.2s ease;
  cursor: pointer;
}
.hdr-user-toggle:focus {
  outline: none;
  box-shadow: none;
}
.hdr-user-toggle:hover {
  background: rgba(0,0,0,0.08);
}
.hdr-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.hdr-user-name {
  font-size: 13px;
  font-weight: 600;
  color: #333;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hdr-user-caret {
  font-size: 10px;
  color: #666;
  transition: transform 0.2s ease;
}
.hdr-user-menu.open .hdr-user-caret {
  transform: rotate(180deg);
}
.hdr-user-dropdown {
  right: 0 !important;
  left: auto !important;
  min-width: 200px;
  margin-top: 6px !important;
  border: 1px solid #eee !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important;
  padding: 6px 0 !important;
  overflow: hidden;
}
.hdr-user-dropdown > li > a {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 10px 16px !important;
  font-size: 13px !important;
  color: #444 !important;
  transition: background 0.15s ease;
}
.hdr-user-dropdown > li > a:hover {
  background: #f9f9f9 !important;
  color: #111 !important;
}
.hdr-user-dropdown > li > a > .fas,
.hdr-user-dropdown > li > a > .far {
  width: 16px;
  text-align: center;
  font-size: 13px;
  color: #888;
  position: static !important;
  top: auto !important;
}
.hdr-user-dropdown > li.divider {
  margin: 4px 0 !important;
  background: #f0f0f0;
}
.hdr-notif-badge {
  background: #FFC107;
  color: #1a1a1a;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  margin-left: auto;
}
.navbar-brand {display: none;}
.navbar-form.navbar-right {margin: 0; padding: 0; border: none; margin-right: 15px; position: relative; flex-grow: 1; display: flex;}
.navbar-form input.form-control {height: 56px; border: 0; border-radius: 0; background: rgba(255, 255, 255, 0.9); padding: 10px 20px; font-weight: 500; font-size: 15px; width:400px; outline: none; box-shadow: none; padding-left:80px; padding-right: 70px; color: #333;}
.navbar-form .search_btn {position: absolute; top: 10px; bottom: 10px; right: 20px; background: transparent; border: none; border-radius: 0; box-shadow: none; color: #333; font-size: 16px; padding: 0;}
.navbar-default .navbar-nav > li > a.header_btn {background: transparent; border-radius: 0; color: #000; padding: 10px 15px; margin: 10px 5px; font-weight: 600; transition: all 0.3s ease; text-decoration: none;}
.navbar-default .navbar-nav > li > a.header_btn:hover, .navbar-default .navbar-nav > li > a.header_btn:focus {background: transparent; color: #333;}
.dashboard_dropdown {position: relative; right: 0;}
.navbar-nav > li.dashboard_dropdown > a {position: relative; padding: 7px 16px; padding-left: 52px; background: #FFC107; height: 56px; border-radius: 0;}
.navbar-default .navbar-nav > li.dashboard_dropdown > a:hover, .navbar-default .navbar-nav > li.dashboard_dropdown > a:focus {background-color: #FFB300;}
.dashboard_img {width: 36px; position: absolute; left: 10px; overflow: hidden; border-radius: 50%;}
.dashboard_img img {width: 100%;}
.user_name {position: relative; top: 6px; font-weight: 600; color: #000; font-size: 14px;}
.dashboard_dropdown a .fas {position: relative; top: 6px; font-size: 11px; left: 2px; color: #000;}


/* Banner add css starts */
.banner_list {display: block; width: 100%; margin-top: 15px; position: relative; }
.banner_list::before {content: ""; position: absolute; background: transparent; border: 1px solid #fff; left: 10px; top: 10px; bottom: 10px; right: 10px; }
.banner_inner_content {display: table-cell; vertical-align: middle; width: 100%; text-align: center; color: #fff; text-transform: uppercase; }
/* footer css */
footer {
    display: block;
    padding: 50px 20px 30px;
    background: #000;
    border-top: 0;
    position: relative;
    width: 100%;
    margin-top: 30px;
}

footer .footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 30px;
}

footer .footer-section {
    color: #fff;
}
}

footer .footer-about {
    grid-column: 1;
}

footer .footer-logo {
    margin-bottom: 20px;
}

footer .footer-logo img {
    /* Width-driven, so this is the height in disguise: 148px on a 6.67:1 lockup
       gives a ~22px mark with the wordmark at ~18px — a shade above the header's
       17px, which is right for the footer's roomier setting. */
    max-width: 148px;
    height: auto;
}

footer .footer-description {
    font-size: 14px;
    line-height: 1.6;
    color: #ccc;
    margin-bottom: 25px;
}

footer .footer-social {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

footer .footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    transition: all 0.3s ease;
    text-decoration: none;
}

footer .footer-social a:hover {
    background: #FFC107;
    color: #000;
    transform: translateY(-3px);
}

footer .footer-section h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #fff;
}

footer .footer-section ul {
    padding: 0;
    list-style-type: none;
    margin: 0;
}

footer .footer-section ul li {
    display: block;
    margin-bottom: 8px;
}}

footer .footer-section ul li a {
    color: #ccc;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
}

footer .footer-section ul li a:hover {
    color: #FFC107;
    padding-left: 5px;
}

footer .footer-section .selectpicker {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #444;
    color: #fff;
}
footer .footer-section .bootstrap-select .dropdown-menu { background:#2a2a2a; border-color:#444; }
footer .footer-section .bootstrap-select .dropdown-menu li a { color:#ccc; }
footer .footer-section .bootstrap-select .dropdown-menu li a:hover { background:#333; color:#fff; }
footer .footer-section .bootstrap-select .dropdown-menu li.selected a { background:#FFC107; color:#1c1c2e; }

footer .footer-bottom {
    border-top: 1px solid #333;
    padding-top: 20px;
    text-align: center;
    color: #999;
    font-size: 13px;
}}

footer ul {padding: 0; list-style-type: none; margin-top: 5px;}
footer ul li {display: inline-block; margin: 0;}
footer ul li a, footer ul li a:hover, footer ul li a:focus {color: #fff; font-size: 14px; font-weight: 600;}
.section-title h2 {font-size:18px; font-weight:700; margin:0 0 15px; letter-spacing:1.5px;}
.section-title a {color:#111111;}
.right_content {padding-bottom: 30px;}

/*----------Login/Signup--------*/
.form-main {position: fixed; left:0; top:0; width:100%; height:100%; background-color:#f8f8f8; z-index:100;}    
.content-penal {background-color:#111111; color:#fff; position: relative; left:0; top:0; width:40%; height:100vh; display:block; padding-bottom:125px;float:left;}
.content-center {position:absolute; right:0; left:0; top:35%; transform:translate(0,-40%); -ms-transform:translate(0,-40%); -o-transform:translate(0,-40%); margin:0 auto; padding:20px 30px; text-align:center; overflow:auto; max-height:400px;}
.content-center h2 {font-size:36px; font-weight:700; letter-spacing:1.5px; margin:0 0 45px;}
.content-center p {margin-bottom:40px; font-weight:700;}
.content-center .white-btn {width:100%; max-width:440px;}
.footer-second {position:absolute; left:0; bottom:0; width:100%; padding-bottom:15px;}
.footer-menu {text-align:center; position:relative; padding-bottom:20px; margin-bottom:15px;}
.footer-menu:after {content:""; position:absolute; left:0; right:0; bottom:0; background-color:#414141; height:1px; width:100%; max-width:239px; margin:0 auto;}
.footer-menu li {display:inline-block; padding:0 10px;}
.footer-menu li a {color:#fff; font-weight:700;}
.footer-menu li a:hover, .footer-menu li a:focus {text-decoration:underline;}
.copyright-msg {text-align:center; color:#666666; font-weight:700; margin:0;}
.form-penal {position: relative; left:0; top:0; width:60%; height:100vh; display:block; padding:25px; float:right; overflow:auto;}
.form-penal .small-form {position:absolute; right:0; left:0; top:50%; transform:translate(0,-50%); -ms-transform:translate(0,-50%); -o-transform:translate(0,-50%); margin:0 auto; text-align:center; width:100%; max-width:480px; max-height:90%;}
.login-social {margin-bottom:10px;}
.form-penal .custom-checkbox {text-align:left;}
.form-penal .large-btn {display:block; width:100%;}
.or-break {font-size:18px; color:#666; margin:13px 0;}
.forgot-link {color:#333333; font-size:15px; text-decoration:underline;}
.loginwithfacebook{border-radius: 20px; font-size: 18px; line-height: 1.33333; padding: 15px 16px;background-color: #3b5998; border: none;color: #fff;font-weight:700;min-width:180px;width:100%;}
.loginwithfacebook:hover, .loginwithfacebook:focus {background-color: #24375e;color: #fff;}
.login-social .google-link {margin-bottom:12px;}
.loginwithgoogle{display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:20px; font-size:18px; line-height:1.33333; padding:15px 16px; background-color:#fff; border:1px solid #cccccc; color:#333333; font-weight:700; min-width:180px; width:100%;}
.loginwithgoogle:hover, .loginwithgoogle:focus {background-color:#f5f5f5; color:#333333; border-color:#bbbbbb;}
.loginwithgoogle svg {width:20px; height:20px; flex-shrink:0;}
.loginwithgoogle:disabled, .loginwithfacebook:disabled {opacity:0.6; cursor:not-allowed;}
/* Auth pages. This badge is round, so it gets the icon mark, not the 6.7:1
   lockup that used to be squeezed in here. Amber ground with the dark glyph
   (10.7:1) — matches the favicon tile and the yellow circle motif already used
   in the email templates. */
.inner-logo {width:105px; height:105px; border-radius:50%; box-shadow:0 4px 14px rgba(0, 0, 0, 0.12); background-color:#FFC107; border:none; display:flex; align-items:center; justify-content:center; margin:0 auto 18px;}
/* translateX nudges the mark right by 9% of its own width. The glyph is a
   right-pointing triangle, so its centre of mass sits 17.6% left of its
   bounding-box centre — flexbox centres the box, which then reads as
   left-aligned. 9% is the optical balance (full 17.6% overshoots). */
.inner-logo img {height:52px; width:auto; display:block; transform:translateX(9%);}
.form-penal h1 {font-weight:700; font-size:36px; margin-bottom:25px; letter-spacing:1.5px;}
.signup-main .content-penal {float:right;}
.signup-main .form-penal {float:left;}

/*----------------Home-----------*/


/* Hero Section */
/* ============================================
   HOMEPAGE — Hero Section
   ============================================ */
.home-hero {
    background: #FFD54F;
    padding: 60px 20px 100px;
    text-align: center;
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0;
}

.hero-background {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 0;
}

/* --- Hero Floating Shapes --- */
.hero-shapes {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.hero-shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    animation: shapeFloat 20s infinite ease-in-out;
}
.shape-1 {
    width: 220px;
    height: 220px;
    background: rgba(255,255,255,0.3);
    top: -40px;
    right: 8%;
    border-radius: 50%;
    animation-delay: 0s;
    opacity: 1;
}
.shape-2 {
    width: 120px;
    height: 120px;
    background: rgba(0,0,0,0.08);
    bottom: 20%;
    left: 5%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation-delay: -4s;
    opacity: 1;
}
.shape-3 {
    width: 80px;
    height: 80px;
    background: rgba(255,255,255,0.35);
    top: 35%;
    left: 12%;
    border-radius: 20px;
    transform: rotate(45deg);
    animation-delay: -8s;
    opacity: 1;
}
.shape-4 {
    width: 160px;
    height: 160px;
    background: rgba(0,0,0,0.06);
    bottom: 10%;
    right: 4%;
    border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%;
    animation-delay: -12s;
    opacity: 1;
}
.shape-5 {
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.4);
    top: 15%;
    left: 30%;
    border-radius: 50%;
    animation-delay: -16s;
    opacity: 1;
}
.shape-6 {
    width: 100px;
    height: 100px;
    background: rgba(255,255,255,0.28);
    top: 60%;
    left: 20%;
    border-radius: 50%;
    animation-delay: -2s;
    opacity: 1;
}
.shape-7 {
    width: 65px;
    height: 65px;
    background: rgba(0,0,0,0.07);
    top: 10%;
    left: 50%;
    border-radius: 16px;
    transform: rotate(30deg);
    animation-delay: -6s;
    opacity: 1;
}
.shape-8 {
    width: 180px;
    height: 180px;
    background: rgba(255,255,255,0.2);
    top: -20px;
    left: -3%;
    border-radius: 50% 30% 50% 70%;
    animation-delay: -10s;
    opacity: 1;
}
.shape-9 {
    width: 45px;
    height: 45px;
    background: rgba(0,0,0,0.06);
    top: 50%;
    right: 18%;
    border-radius: 50%;
    animation-delay: -14s;
    opacity: 1;
}
.shape-10 {
    width: 90px;
    height: 90px;
    background: rgba(255,255,255,0.32);
    bottom: 5%;
    left: 40%;
    border-radius: 20% 80% 60% 40% / 70% 30% 70% 30%;
    animation-delay: -3s;
    opacity: 1;
}
.shape-11 {
    width: 55px;
    height: 55px;
    background: rgba(0,0,0,0.05);
    top: 25%;
    right: 25%;
    border-radius: 50%;
    animation-delay: -9s;
    opacity: 1;
}
.shape-12 {
    width: 140px;
    height: 140px;
    background: rgba(255,255,255,0.22);
    bottom: 30%;
    right: 12%;
    border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%;
    animation-delay: -18s;
    opacity: 1;
}

@keyframes shapeFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-15px) rotate(5deg); }
    50% { transform: translateY(0px) rotate(0deg); }
    75% { transform: translateY(10px) rotate(-3deg); }
}

.home-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 130px;
    background: linear-gradient(to bottom, transparent, #ffffff);
    z-index: 2;
    pointer-events: none;
}

.hero-content {
    max-width: 720px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* --- Hero Logo --- */
.hero-logo {
    margin-bottom: 28px;
}
.hero-logo img {
    max-width: 260px;
    height: auto;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.08));
}

/* --- Hero Tagline --- */
.hero-tagline {
    margin-bottom: 32px;
}
.hero-headline {
    font-size: 38px;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.15;
    margin: 0 0 12px;
    letter-spacing: -0.5px;
}
.hero-subline {
    font-size: 16px;
    font-weight: 400;
    color: rgba(0,0,0,0.6);
    margin: 0;
    line-height: 1.5;
}

/* --- Hero Search --- */
.hero-search-wrapper {
    margin-bottom: 28px;
}
.hero-search-form {
    margin-bottom: 16px;
}
.search-input-group {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 50px;
    padding: 5px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    position: relative;
}
.search-icon {
    position: absolute;
    left: 20px;
    color: #bbb;
    font-size: 15px;
    pointer-events: none;
}
.hero-search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 13px 20px 13px 48px;
    font-size: 15px;
    outline: none;
    color: #333;
    font-weight: 500;
    font-family: 'Lato', sans-serif;
}
.hero-search-input::placeholder {
    color: #aaa;
    font-weight: 400;
}
.hero-search-btn {
    background: #1a1a1a;
    color: #FFD54F;
    border: none;
    padding: 11px 36px;
    border-radius: 30px;
    font-weight: 700;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s ease;
    margin-right: 3px;
    font-family: 'Lato', sans-serif;
}
.hero-search-btn:hover {
    background: #333;
}

/* --- Popular Tags --- */
.popular-searches {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.search-label {
    color: rgba(0,0,0,0.5);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.search-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
.search-tag {
    background: rgba(0,0,0,0.07);
    color: #333;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none !important;
}
.search-tag:hover {
    background: rgba(0,0,0,0.14);
    color: #000;
}

/* --- Trust Indicators --- */
.hero-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
}
.trust-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(0,0,0,0.55);
}
.trust-item i {
    font-size: 14px;
    color: rgba(0,0,0,0.4);
}


/* ============================================
   HOMEPAGE — Courses Section
   ============================================ */
.all-courses-section {
    padding: 70px 20px 50px;
    background: #fafafa;
    width: 100%;
    margin: 0;
}
.all-courses-section .container-fluid {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
}

/* --- Section Header --- */
.section-header {
    text-align: center;
    margin-bottom: 40px;
}
.section-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #FFC107;
    margin-bottom: 8px;
}
.section-header h2 {
    font-size: 30px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
    letter-spacing: -0.3px;
    font-family: 'Lato', sans-serif;
}
.section-header p {
    font-size: 15px;
    color: #888;
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.5;
}

/* --- Course Cards Grid --- */
.courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 28px;
    margin-bottom: 48px;
}
.courses-grid-3 .course-card:nth-child(n+4) {
    display: none;
}

/* --- Course Card --- */
.course-card {
    background: #fff;
    border: none;
    border-radius: 10px;
    overflow: visible;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    position: relative;
    z-index: 1;
}
.course-card:hover {
    transform: scale(1.02);
    z-index: 10;
    box-shadow: none;
}

.course-card-img {
    position: relative;
    width: 100%;
    height: 170px;
    overflow: hidden;
    background: #f0f0f0;
    border-radius: 10px 10px 0 0;
    flex-shrink: 0;
}
.course-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.course-card:hover .course-card-img img {
    transform: scale(1.06);
}
.course-card-category {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 4px 10px;
    border-radius: 20px;
    backdrop-filter: blur(6px);
}
.course-card-bookmark {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    font-size: 14px;
    text-decoration: none !important;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    opacity: 0;
    transform: scale(0.8);
}
.course-card:hover .course-card-bookmark {
    opacity: 1;
    transform: scale(1);
}
.course-card-bookmark:hover {
    background: #fff;
    color: #FFC107;
    transform: scale(1.1) !important;
}

.course-card-body {
    padding: 16px 16px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
    background: #fff;
    border-radius: 0 0 10px 10px;
    transition: border-radius 0.3s ease, box-shadow 0.3s ease;
}
.course-card:hover .course-card-body {
    border-radius: 0;
}
.course-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 6px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.course-card:hover .course-card-title {
    -webkit-line-clamp: unset;
    display: block;
}
.course-card-title a {
    color: inherit;
    text-decoration: none;
}
.course-card-title a:hover {
    color: #333;
}
.course-card-lang {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #999;
}
.course-card-lang i {
    font-size: 10px;
    color: #bbb;
}
.course-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #999;
    margin-bottom: 8px;
}
.course-card-meta i {
    font-size: 11px;
    color: #bbb;
}
.meta-sep {
    color: #ddd;
    font-size: 11px;
}

/* Hidden details - revealed on hover as overlay */
.course-card-details {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    padding: 0 16px 16px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.15);
}
.course-card:hover .course-card-details {
    max-height: 250px;
    opacity: 1;
}
.course-card:hover .course-card-body {
    box-shadow: 0 0 40px rgba(0,0,0,0.15);
}
.course-card-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.cc-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #666;
    background: #f5f5f5;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}
.cc-pill i {
    font-size: 10px;
    color: #999;
}
.course-card-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    margin: 0 0 4px;
}

/* CTA button - changes on hover */
.course-card-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: #f8f8f8;
    color: #1a1a1a;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.25s ease;
    text-decoration: none !important;
    border: 1.5px solid #e0e0e0;
}
.course-card:hover .course-card-cta {
    background: #1a1a1a;
    color: #FFD54F;
}
.course-card-cta i {
    font-size: 11px;
    transition: transform 0.2s ease;
}
.course-card:hover .course-card-cta:hover {
    background: #333;
}
.course-card:hover .course-card-cta:hover i {
    transform: translateX(3px);
}
.course-card-cta-dark {
    background: #1a1a1a !important;
    color: #FFD54F !important;
}
.course-card-cta-dark:hover {
    background: #333 !important;
}
.course-card-cta.continue {
    background: #e8f5e9;
    color: #2e7d32;
}
.course-card:hover .course-card-cta.continue {
    background: #2e7d32;
    color: #fff;
}

/* --- Card Star Ratings (global, reusable) --- */
.card-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
  font-size: 13px;
  line-height: 1;
}
.card-rating .card-stars {
  color: #FFC107;
  font-size: 13px;
  display: inline-flex;
  gap: 1px;
}
.card-rating .card-stars i {
  margin-right: 1px;
}
.card-rating .card-rating-num {
  font-weight: 700;
  color: #1A1A1A;
  font-size: 13px;
}
.card-rating .card-rating-count {
  color: #999;
  font-size: 12px;
}
/* Card rating inside course-card (homepage) */
.course-card-body .card-rating {
  margin: 4px 0 8px;
}
/* Card rating inside search result card */
.srp-card-top .card-rating {
  margin: 4px 0 0;
}
/* Card rating inside watch later card */
.wlc-card .card-rating {
  padding: 0 16px;
  margin: 8px 0 0;
}
/* Card rating inside my channels card */
.mc-card-body .card-rating {
  margin: 4px 0 8px;
}
/* Card rating inside cd-course-card (channel detail tutor/similar) */
.cd-course-card-body .card-rating {
  margin: 2px 0 4px;
  font-size: 12px;
}
.cd-course-card-body .card-rating .card-stars { font-size: 11px; }
.cd-course-card-body .card-rating .card-rating-num { font-size: 12px; }
.cd-course-card-body .card-rating .card-rating-count { font-size: 11px; }

/* --- Course Scroller (Udemy-style) --- */
.course-scroller {
    position: relative;
    margin-bottom: 36px;
}
.scroller-track {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 8px 4px 16px;
}
.scroller-track::-webkit-scrollbar {
    display: none;
}
.scroller-card {
    flex: 0 0 300px;
    scroll-snap-align: start;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.scroller-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.12);
}
.scroller-card .course-card-img {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 0;
}
.scroller-card .course-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.scroller-card:hover .course-card-img img {
    transform: scale(1.04);
}
.scroller-card .course-card-body {
    padding: 16px 18px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.scroller-card .course-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 4px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.scroller-card .course-card-title a {
    color: inherit;
    text-decoration: none;
}
.scroller-owner {
    font-size: 11px;
    color: #999;
    margin: 0 0 6px;
    line-height: 1.3;
}
.scroller-card .course-card-meta {
    font-size: 11px;
    color: #aaa;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.scroller-card .card-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
    font-size: 12px;
}
.scroller-card .card-stars {
    color: #F59E0B;
    font-size: 11px;
    display: flex;
    gap: 1px;
}
.scroller-card .card-rating-num {
    font-weight: 700;
    color: #1a1a1a;
    font-size: 12px;
}
.scroller-card .card-rating-count {
    color: #aaa;
    font-size: 11px;
}
.scroller-card .course-card-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 20px;
    text-decoration: none !important;
    transition: all 0.2s ease;
    align-self: flex-start;
}
.scroller-card .course-card-cta.learning {
    background: #1a1a1a;
    color: #FFD54F;
}
.scroller-card .course-card-cta.continue {
    background: #FFD54F;
    color: #1a1a1a;
}
.scroller-card .course-card-cta:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}
.scroller-desc-overlay {
    position: fixed;
    z-index: 9999;
    background: #fff;
    border-radius: 0 0 12px 12px;
    border: 1px solid #ececec;
    border-top: none;
    padding: 12px 16px 14px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.13);
    pointer-events: none;
    animation: descFadeIn 0.18s ease;
}
@keyframes descFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.scroller-desc-cat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #888;
    background: #f5f5f5;
    padding: 2px 10px;
    border-radius: 20px;
    margin-bottom: 8px;
    font-weight: 600;
}
.scroller-desc-cat i { font-size: 10px; }
.scroller-desc-overlay p {
    font-size: 12px;
    color: #666;
    line-height: 1.55;
    margin: 0;
}

.scroller-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-60%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #333;
    z-index: 10;
    transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}
.scroller-btn:hover {
    background: #FFD54F;
    border-color: #FFD54F;
    box-shadow: 0 4px 18px rgba(255,193,7,0.3);
    transform: translateY(-60%) scale(1.08);
}
.scroller-btn-left  { left: -20px; }
.scroller-btn-right { right: -20px; }

/* --- Explore Button --- */
.explore-all-btn-wrapper {
    text-align: center;
    margin-bottom: 20px;
}
.explore-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #1a1a1a;
    color: #FFD54F;
    padding: 13px 34px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none !important;
    transition: background 0.2s ease, transform 0.15s ease;
    letter-spacing: 0.2px;
}
.explore-btn:hover {
    background: #333;
    color: #FFD54F;
    transform: translateY(-2px);
}
.explore-btn i {
    font-size: 13px;
}


/* ============================================
   HOMEPAGE — Browse Categories
   ============================================ */
.categories-section {
    padding: 60px 20px;
    background: #fff;
    width: 100%;
}
.categories-section .container-fluid {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
}
.cat-pills-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #f5f5f5;
    border: 1px solid #eee;
    border-radius: 50px;
    text-decoration: none !important;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.25s ease;
    white-space: nowrap;
}
.cat-pill:hover {
    background: #FFD54F;
    border-color: #FFD54F;
    color: #1a1a1a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255,193,7,0.25);
}
.cat-pill-name {
    line-height: 1;
}
.cat-pill-count {
    background: rgba(0,0,0,0.08);
    color: #666;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    line-height: 1.3;
    transition: all 0.25s ease;
}
.cat-pill:hover .cat-pill-count {
    background: rgba(0,0,0,0.12);
    color: #333;
}


/* ============================================
   HOMEPAGE — Why YodaHut
   ============================================ */
.why-section {
    padding: 70px 20px;
    background: #fafafa;
    width: 100%;
}
.why-section .container-fluid {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
}
.why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}
.why-card {
    text-align: center;
    padding: 36px 24px;
    border-radius: 16px;
    border: 1px solid #f0f0f0;
    background: #fff;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.why-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
    border-color: #FFD54F;
}
.why-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #FFD54F;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 24px;
    color: #1a1a1a;
    box-shadow: 0 4px 16px rgba(255,213,79,0.35);
}
.why-card h3 {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 10px;
}
.why-card p {
    font-size: 13px;
    color: #777;
    line-height: 1.6;
    margin: 0;
}


/* ============================================
   HOMEPAGE — Hero Stats Bridge (fade zone cards)
   ============================================ */
.hero-stats-bridge {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 0 20px;
    margin-top: -56px;
    position: relative;
    z-index: 10;
    flex-wrap: wrap;
}
.hero-stat-card {
    background: #fff;
    border-radius: 16px;
    padding: 22px 40px;
    box-shadow: 0 6px 28px rgba(0,0,0,0.10);
    text-align: center;
    min-width: 130px;
    border: 1px solid rgba(0,0,0,0.04);
}
.hero-stat-num {
    display: block;
    font-size: 30px;
    font-weight: 800;
    color: #1a1a1a;
    letter-spacing: -0.5px;
    line-height: 1.1;
    margin-bottom: 4px;
}
.hero-stat-lbl {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* Social-proof stats band — the stat cards relocated below the fold (5 across),
   reusing the hero-stat-card look but in normal flow instead of floating. */
.home-stats-section { padding: 8px 20px 12px; }
.home-stats-band {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    max-width: 1100px;
    margin: 0 auto;
}
.home-stats-band .hero-stat-card { min-width: 150px; flex: 0 1 auto; }
@media (max-width: 767px) {
    .home-stats-band { gap: 12px; }
    .home-stats-band .hero-stat-card { min-width: 120px; padding: 16px 20px; flex: 1 1 40%; }
}


/* ============================================
   HOMEPAGE — Testimonials (Auto-Rolling Carousel)
   ============================================ */
.testimonials-section {
    padding: 60px 20px;
    background: #fff;
    width: 100%;
    margin: 0;
    overflow: hidden;
}
.testimonials-section .container-fluid {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
}
.testimonials-header {
    text-align: center;
    margin-bottom: 40px;
}
.testimonials-header .section-label {
    color: #FFC107;
}
.testimonials-header h2 {
    font-size: 32px;
    font-weight: 800;
    color: #1a1a1a;
    margin: 0;
    letter-spacing: -0.5px;
}
.testimonial-track-wrap {
    overflow: hidden;
    position: relative;
}
.testimonial-track {
    display: flex;
    transition: transform 0.5s ease;
    gap: 24px;
}
.testimonial-item {
    background: #fff;
    padding: 28px 24px;
    border-radius: 12px;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-width: calc(33.333% - 16px);
    max-width: calc(33.333% - 16px);
    flex-shrink: 0;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}
.testimonial-item::before {
    content: '\201C';
    position: absolute;
    top: 8px;
    left: 16px;
    font-size: 80px;
    font-family: Georgia, 'Times New Roman', serif;
    color: rgba(255,193,7,0.18);
    line-height: 1;
    pointer-events: none;
    z-index: 0;
}
.testimonial-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.testimonial-stars {
    display: flex;
    gap: 2px;
    margin-bottom: 16px;
}
.testimonial-stars i {
    font-size: 13px;
    color: #FFC107;
}
.testimonial-stars i.far {
    color: #ddd;
}
.testimonial-text {
    font-size: 14px;
    line-height: 1.65;
    margin: 0 0 20px;
    color: #555;
    flex: 1;
    font-style: italic;
}
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
}
.author-initial {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #FFD54F;
    color: #1a1a1a;
    font-size: 16px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.author-info h4 {
    font-size: 13px;
    font-weight: 700;
    margin: 0;
    color: #1a1a1a;
}
.author-info span {
    font-size: 12px;
    color: #aaa;
    display: block;
    margin-top: 2px;
}
.testimonial-dots {
    text-align: center;
    margin-top: 28px;
}
.testimonial-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ddd;
    margin: 0 5px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    border: none;
    outline: none;
    padding: 0;
}
.testimonial-dot.active {
    background: #FFC107;
    transform: scale(1.2);
}

/* ============================================
   POST FEEDBACK FORM — Redesigned
   ============================================ */
.fb-form-card {
    max-width: 680px;
    margin: 30px auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    overflow: hidden;
}
.fb-form-header {
    background: linear-gradient(135deg, #1c1c2e 0%, #252538 100%);
    padding: 36px 32px 28px;
    text-align: center;
    color: #fff;
}
.fb-form-icon {
    font-size: 2.4rem;
    margin-bottom: 10px;
    color: #FFC107;
}
.fb-form-title {
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0 0 6px;
    color: #fff;
}
.fb-form-subtitle {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.55);
    margin: 0;
}
.fb-form-body {
    padding: 32px;
}
.fb-label {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
    display: block;
}
.fb-optional {
    font-weight: 400;
    color: #aaa;
    font-size: 12px;
}
.fb-input {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    transition: border-color 0.2s;
    background: #fafafa;
}
.fb-input:focus {
    border-color: #FFC107;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255,193,7,0.1);
}
.fb-textarea {
    min-height: 110px;
    resize: vertical;
}

/* Star Rating */
.fb-rating-group {
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #f0f0f0;
}
.fb-star-rating {
    display: inline-flex;
    gap: 6px;
    margin: 10px 0 6px;
}
.fb-star-rating .fb-star {
    font-size: 2rem;
    color: #ddd;
    cursor: pointer;
    transition: color 0.15s, transform 0.15s;
}
.fb-star-rating .fb-star.active {
    color: #FFC107;
}
.fb-star-rating .fb-star:hover {
    transform: scale(1.15);
}
.fb-rating-text {
    display: block;
    font-size: 13px;
    color: #888;
    font-weight: 600;
}

/* Publish Checkbox */
.fb-publish-group {
    margin-top: 8px;
    margin-bottom: 24px;
    padding: 16px;
    background: #fffbf0;
    border: 1px solid #fff3cd;
    border-radius: 10px;
}
.fb-checkbox-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin: 0;
    font-weight: 400;
}
.fb-checkbox-wrap input[type="checkbox"] {
    display: none;
}
.fb-checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 5px;
    flex-shrink: 0;
    position: relative;
    transition: all 0.2s;
}
.fb-checkbox-wrap input[type="checkbox"]:checked + .fb-checkmark {
    background: #FFC107;
    border-color: #FFC107;
}
.fb-checkbox-wrap input[type="checkbox"]:checked + .fb-checkmark::after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    color: #fff;
}
.fb-checkbox-text {
    font-size: 14px;
    color: #333;
}
.fb-publish-hint {
    display: block;
    margin-top: 6px;
    margin-left: 30px;
    font-size: 12px;
    color: #999;
}

/* Buttons */
.fb-submit-btn {
    background: linear-gradient(135deg, #FFC107, #FF9800);
    color: #1c1c2e;
    border: none;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 3px 12px rgba(255,193,7,0.3);
}
.fb-submit-btn:hover {
    box-shadow: 0 5px 18px rgba(255,193,7,0.45);
    transform: translateY(-1px);
}
.fb-submit-btn i {
    margin-right: 6px;
}
.fb-cancel-btn {
    background: #f5f5f5;
    color: #666;
    border: 1px solid #e0e0e0;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.fb-cancel-btn:hover {
    background: #eee;
}


/* ============================================
   HOMEPAGE — Responsive
   ============================================ */
@media (max-width: 1024px) {
    .testimonial-item { min-width: calc(50% - 12px); max-width: calc(50% - 12px); }
}
@media (max-width: 768px) {
    .home-hero { padding: 40px 16px 60px; }
    .hero-headline { font-size: 28px; }
    .hero-subline { font-size: 14px; }
    .search-input-group { flex-direction: column; border-radius: 16px; padding: 8px; }
    .hero-search-input { padding: 12px 16px; text-align: center; }
    .search-icon { display: none; }
    .hero-search-btn { width: 100%; border-radius: 12px; padding: 12px; }
    .hero-trust { gap: 16px; }
    .trust-item { font-size: 12px; }
    .section-header h2, .testimonials-header h2 { font-size: 26px; }
    .all-courses-section, .testimonials-section, .categories-section, .why-section { padding: 40px 16px; }
    .testimonial-item { min-width: calc(100% - 0px); max-width: calc(100% - 0px); }
    .courses-grid { grid-template-columns: 1fr; }
    .why-grid { grid-template-columns: 1fr 1fr; }
    .cat-pill { padding: 8px 16px; font-size: 13px; }
    .hero-stats-bridge { gap: 12px; margin-top: -44px; }
    .hero-stat-card { padding: 16px 24px; min-width: 100px; }
    .hero-stat-num { font-size: 24px; }
}
@media (max-width: 480px) {
    .hero-headline { font-size: 24px; }
    .popular-searches { flex-direction: column; gap: 8px; }
    .search-tags { justify-content: center; }
    .hero-stats-bridge { gap: 10px; margin-top: -36px; }
    .hero-stat-card { padding: 14px 20px; min-width: 90px; }
    .hero-stat-num { font-size: 20px; }
}

.btn-right {text-align:right;}
.category-box {background-color:#f7f7f7; border:1px solid #cccccc; padding:25px 15px; min-height:155px; text-align:center;}
.cat_icon {font-size:35px; display:inline-block; min-height:58px;}
.common-icon {display:inline-block;}
.category-box h3 {font-size:18px; letter-spacing:1.5px; margin:0 0 10px; font-weight:700;}
.category-box h3 a { color:#333;}
.category-box h5 {font-size:14px; letter-spacing:0.5px; margin:0px; font-weight:700; color:#999999;}
.category-main, .popular-channel {padding:20px 0;}
.owl-nav a {width:35px; height:35px; display:inline-block; border-radius:50%; background-color:#cccccc; text-align:center; line-height:35px; color:#666666; font-size:22px; text-decoration:none;}
.owl-nav a:hover, .owl-nav a:focus {background-color:#333; color:#fff;}
.owl-nav .owl-prev {position:absolute; top:40%; left:-13px;}
.owl-nav .owl-next {position:absolute; top:40%; right:-13px;}
.owl-nav .owl-prev a:before {content: "\f104"; font-family: 'Font Awesome 5 Free';font-weight: 600;}
.owl-nav .owl-next a:before {content: "\f105"; font-family: 'Font Awesome 5 Free';font-weight: 600;}
.common-box {padding:10px; border:1px solid #cccccc; box-shadow:0 0 18px rgba(182, 182, 182, 0.3); background-color:#f8f8f8;}
.channel-slider .owl-nav {display:none;}
.home_banner_grp {margin-bottom:20px;}
.box-img {position:relative;min-height: 110px;max-height: auto;}
.box-img img{max-width:100%;height:auto}
.box-img .img-link {display:block; position:relative; z-index:2;}
.img-link img {width: 100%;}
.box-img:before {position:absolute; left:0; top:0; width:100%; height:100%;  z-index:1; content:"";}
.box-content {padding:10px 0;}
.box-content h3 {font-size:18px; font-weight:700; margin:0 0 13px;}
.box-content h3 a {color:#333333; display:inline-block; overflow:hidden; white-space:nowrap;text-overflow: ellipsis; display:inline-block; line-height: normal; max-width:100%;}
.box-content h5 {font-size:14px; font-weight:400; margin:0 0 12px;}
.gray-color {color:#999999;}
.box-content .breadcrumb {margin:0 0 15px; padding:0; background-color:transparent;}
.box-content .breadcrumb a { color:#999999; font-weight:700;}
.box-content .breadcrumb a:hover, .box-content .breadcrumb a:focus {color:#000;}
.box-content .breadcrumb > li + li:before {padding: 0 5px;color: #ccc;content: ">";}
.box-content .box-bottom .breadcrumb {margin-bottom:5px;}
.box-btns li {display:inline-block; width:49%; vertical-align:middle;}
.box-btns-three li {display: inline-block;width: 32.5%;margin-left: -1px;}
.box-btns li:first-child {padding-right:3px;}
.box-btns li:last-child {padding-left:3px; padding-right:0;}
.box-btns li .small-black-btn, .box-btns li .small-gray-btn, .box-btns li .small-border-btn {display:block; width:100%;text-overflow: ellipsis;overflow: hidden; white-space:normal;}
.small-black-btn, span.small-black-btn:hover, span.small-black-btn:focus {border-radius:0px; font-size:12px; background-color:#333333; color:#fff; text-align:center; padding:3px 4px;}
.small-black-btn:hover, .small-black-btn:focus {color:#333; background-color:#eeeeee;}
.small-border-btn {border-radius:0px; font-size:12px; background-color:#fff; color:#333333; text-align:center; padding:2px 4px; border:1px solid #333333;}
.small-border-btn:hover, .small-border-btn:focus {color:#fff; background-color:#333;}
.small-gray-btn {border-radius:0px; font-size:12px; background-color:#eeeeee; color:#333333; text-align:center; padding:3px 4px;}
.small-gray-btn:hover, .small-gray-btn:focus {color:#fff; background-color:#333333;}
span.small-black-btn {cursor:inherit;}

/*-----------------Profile Page Start-----------*/
.profile-banner {min-height:300px; position:relative; padding:30px; color:#fff; margin:0 -15px;}
.profile-banner:before {position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0, 0, 0, .50); content:"";} 
.pro-info {position:absolute; left:0px; bottom:30px; width:100%; z-index:10; width:100%; padding:0 30px;}
.user-row {position:relative; padding-left:130px; min-height:100px;}
.profile-img {position:absolute; left:0; top:0; width:100px; height:100px; border-radius:50%; border:2px solid #fff; display:inline-block; background-color:#fff;}
.profile-img img {border-radius:50%; width:100%; height:100%;}
.user-row h1 {margin:35px 0 0; font-size:30px; font-weight:700; position:relative; padding-right:50px; display:inline-block; letter-spacing:0.5px;}
.user-row h1 .pro-icon {width:32px; height:32px; position:absolute; display:inline-block; right:0; top:4px; border:1px solid #fff; background-color:rgba(255, 255, 255, 0.20); color:#fff; text-align:center; line-height:30px; font-size:18px; border-radius:50%;}
.edit-link {text-align:right; margin-top:45px;}
.banner-btn {border:1px solid #fff; font-size:15px; font-weight:700; background-color:rgba(255, 255, 255, 0.20); color:#fff; padding:11px 18px; min-width:155px;}
.banner-btn:hover, .banner-btn:focus {background-color:#fff; color:#000;}
.profile-block {background-color:#eeeeee; padding:30px; margin:30px 0 15px;}
.user-disc p {font-size:16px; line-height:22px; color:#666666; letter-spacing:1px;}
.user-disc p:last-child {margin-bottom:0;}
.profile-block a {color:#333333; text-decoration:underline;}
.user-info {padding-top:24px; margin-top:24px; border-top:1px solid #d3d3d3;}
.user-info li {display:inline-block; position:relative; padding:0 52px 0 45px;}
.user-info li:last-child {padding-right:0;}
.user-info li .common-icon {position:absolute; left:0; top:-7px; font-size:24px;}
.top-over {position:absolute; left:0; top:0px; right:0px; text-align:right; z-index:5; width:100%;}
.bottom-over {position:absolute; left:0; bottom:0px; right:0px;  z-index:5; width:100%;}
.white-label {border-radius:15px; background-color:#fff; display:inline-block; font-size:12px; color:#333; text-align:center; line-height: 1.42857143; padding:1px 10px 2px; min-width:60px;}
.gray-label {border-radius:15px; background-color:#333333; display:inline-block; font-size:12px; color:#fff; text-align:center; line-height: 1.42857143; padding:1px 7px 2px; margin-right:3px;min-width:44px;}
.gray-label:last-child {margin-right:0;}
.gray-label:hover, .gray-label:focus { color:#fff;}
.gray-label .common-icon, .gray-label i {margin-right:3px; font-size:12px;vertical-align: middle;}
.label-right {text-align:right;}
.space-5 {padding:5px;}
.space-10 {padding:10px;}
/*-------------Edit Profile----------*/
.page-title {font-size:22px; font-weight:700; margin:0 0 30px; letter-spacing:1px;}
.common-space {padding:30px 15px;}
.edit-profile-main {}
.common-label {margin-bottom:15px; font-size:15px; color:#666666; letter-spacing:0.5px;}
.edit-profile-main .large-btn {display:block; width:100%;}
.edit-banner {position:relative; min-height:201px; overflow:hidden; background-position:center center; background-repeat:no-repeat; background-size:cover; border-radius:20px; border:1px solid #dddddd;}
.edit-banner:before {background-color:rgba(0, 0, 0, 0.55); position:absolute; width:100%; height:100%; left:0; top:0; content:"";}
.edit-profile-banner {padding:75px 10px 0; z-index:2; position:relative; text-align:center; color:#fff; min-height:201px;}
.edit-profile-banner .common-icon {font-size:50px;}
.edit-img {position:relative; width:151px; height:151px; overflow:hidden; background-position:center center; background-repeat:no-repeat; background-size:100% 100%; border-radius:20px; border:1px solid #dddddd;box-shadow: 0 0 15px rgba(51, 51, 51, 0.3); background-color:#f4f4f4;}
.edit-img:before {background-color:rgba(0, 0, 0, 0.55); position:absolute; width:100%; height:100%; left:0; top:0; content:"";}
.edit-profile-img {padding:43px 10px 0;z-index:2;position:relative;text-align:center;color:#fff;overflow:hidden;}
.edit-profile-img .common-icon {font-size:50px;}
.browse-file {position:relative; overflow:hidden;height: 100%;}
.browse-file input[type="file"] {opacity: 0;width: 100%;height: 100%;font-size: 100px;position: absolute;left: 0;top: 0;cursor: pointer;}
.upload-video-thumb, .qq-gallery .qq-upload-list li.qq-upload-success {position:relative; min-height:205px; overflow:hidden; background-color:#f4f4f4; border:1px solid #dddddd; border-radius:20px; box-shadow:none;}
.video-icon {position:absolute; left:0; top:50%; transform:translate(0,-50%); -ms-transform:translate(0,-50%); -o-transform:translate(0,-50%); text-align:center; font-size:50px; width:100%;}
.upload-right {display:table-cell; height:205px; width:1500px; vertical-align:bottom;}
.upload-right h4 {font-size:16px; margin:0 0 15px; color:#666666; font-weight:700;}
.upload-right h5 {font-size:14px; margin:0 0 15px; color:#999999; font-weight:700;}
.progress-bar {background-color:#333333; box-shadow:none;}
.progress {border:1px solid #999999; border-radius:15px; box-shadow:none; background-color:#fff; margin-bottom:0;}
.upload-top {border-bottom:1px solid #ebebeb; padding-bottom:30px; margin-bottom:30px;}
.upload-bottom h4 {font-size:15px; color:#111111; margin:0 0 20px; font-weight:700;letter-spacing:0.5px;}
.upload-video-main .common-label {display:block;}
.common-link {text-decoration:underline; float:right; color:#999999; font-weight:400; font-size:14px;}
.upload-video-main .large-btn, .upload-video-main .cancel-btn, .account-setting-main .large-btn, .account-setting-main .cancel-btn {display: block;width: 100%;}
.upload-video-main .browse-file.large-btn {display:inline-block; width:auto;}
.browse-file.large-btn .common-icon {margin-right:8px;}
.account-setting-main h4 {font-size:15px; color:#111111; margin:0 0 20px; font-weight:700; letter-spacing:0.5px;}
.switch { 
  position: relative;
  display: inline-block;
  min-width:42px;
  opacity:1;
}

.switch input {opacity: 0;
width: 100%;
height: 100%;
position: absolute;}

.switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transition: .4s;
  transition: .4s;
}

.switch .slider:before {
width: 17px;
height: 17px;
background-color: #fff;
border: none;
margin: 0;
top: 3px;
left:3px;
position: absolute;
z-index: 5;
border-radius: 50%;
content:"";
z-index:10;
-webkit-transition: .4s;
transition: .4s;
}

.switch .slider:after {
width: 42px;
height:23px;
border:1px solid #aaaaaa;
border-radius:20px;
background-color:#aaaaaa;
content:"";
display:inline-block;
}

.switch input:checked + .slider:before {
width: 17px;
height: 17px;
background-color: #fff;
border: none;
margin: 0;
top: 3px;
right:20px;
left: auto;
position: absolute;
z-index: 5;
border-radius: 50%;
content:"";
z-index:10;
  -webkit-transition: .4s;
  transition: .4s;
}

.switch input:checked + .slider:after {
width: 42px;
height:23px;
border:1px solid #333333;
border-radius:20px;
content:"";
display:inline-block;
background-color:#333333;
}

.switch input:checked + .slider:before {
  -webkit-transform: translateX(18px);
  -ms-transform: translateX(18px);
  -o-transform: translateX(18px);
  transform: translateX(18px);
}
.email-notify-bx {margin:25px 0;}
.notification-row {margin-bottom:50px;}
.notification-row li {padding-right:50px; position:relative; min-height:24px; margin-bottom:20px;}
.notification-row li p {margin-bottom:0; font-size:15px; color:#666666; font-weight:700;}
.notification-row .switch {position:absolute; right:0; top:0;}
.box-list li {position:relative; padding-left:28px; font-size:14px; font-weight:700; margin-bottom:10px; color:#999999; min-height:19px;}
.box-list li a {color:#999999;}
.box-list li a:hover, .box-list li a:focus {color:#000;}
.box-list li .common-icon {position:absolute; left:0; top:-1px; font-size:17px;}
.box-bottom {border-top:1px solid #cccccc; padding-top:12px; margin-top:15px;}
.box-bottom p, .box-content p {font-size:13px; color:#999999; letter-spacing:0.5px;word-wrap: break-word;}
.mb-30 {margin-bottom:30px;}
.pagination > li > a, .pagination > li > span {border:none; color:#666666; padding:2px 8px; margin:0 3px;}
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {background-color:#444444;}
.pagination > li > a.next, .pagination > li > a.prev {font-weight:700; font-size:16px;} 
.pagination > .disabled > a {color:#999999;}
.pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {color:#000;}
/* =============================================
   VIDEO DETAIL PAGE — Learning Platform Design
   ============================================= */

.video-detail-main {
  background: #F5F5F5;
  padding: 24px 16px;
  overflow: hidden;
}

.video-detail-main [data-view="left"] {
  min-width: 0;
  overflow: hidden;
}

/* --- Video Player Card --- */
.video-detail-main .vd-player-card {
  margin-bottom: 0;
}

.video-detail-main .main-video-panel {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  width: 100%;
  height: 500px;
}

/* Bare <video> (no player attached) */
.video-detail-main .main-video-panel video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* The player itself is Video.js and skins itself — see
   src/components/player/player.css, which travels with the component. Only the
   pre-hydration placeholder belongs here, so the 500px panel isn't a white hole
   while the player chunk loads. */
.yh-player-placeholder {
  width: 100%;
  height: 100%;
  background: #000;
}

.video-detail-main .main-video-panel .bottom-over {
  bottom: 55px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 100%);
  padding: 16px;
}

/* --- Course Context Bar --- */
.video-detail-main .vd-course-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 20px;
  background: linear-gradient(to right, #f8f8f8, #fff, #f8f8f8);
  border-bottom: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.video-detail-main .vd-course-path {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #666;
  min-width: 0;
  flex: 1;
}

.video-detail-main .vd-course-icon {
  color: #FFC107;
  font-size: 15px;
  flex-shrink: 0;
}

.video-detail-main .vd-course-link {
  color: #333 !important;
  text-decoration: none !important;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.video-detail-main .vd-course-link:hover {
  color: #FFC107 !important;
}

.video-detail-main .vd-course-sep {
  color: #ccc;
  font-size: 10px;
  flex-shrink: 0;
}

.video-detail-main .vd-course-current {
  color: #999;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-detail-main .vd-category-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.video-detail-main .vd-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: #FFF8E1;
  color: #B8860B;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.video-detail-main .vd-tag-lang {
  background: #E8F5E9;
  color: #2E7D32;
}

.video-detail-main .vd-tag-lang i {
  font-size: 10px;
}

/* --- Video Info Card --- */
.video-detail-main .vd-info-card {
  background: #fff;
  padding: 20px 24px;
  border-radius: 0 0 12px 12px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.video-detail-main .vd-title {
  font-size: 22px;
  font-weight: 700;
  color: #1A1A1A;
  margin: 0 0 8px;
  line-height: 1.35;
  letter-spacing: -0.3px;
}

/* --- Stats Row (views, likes) --- */
.video-detail-main .vd-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #777;
}
.video-detail-main .vd-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #777;
  text-decoration: none !important;
}
.video-detail-main .vd-stat i {
  font-size: 12px;
}
.video-detail-main .vd-stat-like {
  cursor: pointer;
  transition: color 0.2s ease;
}
.video-detail-main .vd-stat-like:hover {
  color: #e53935 !important;
}
.video-detail-main .vd-stat-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ccc;
  flex-shrink: 0;
}

.video-detail-main .vd-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
}

.video-detail-main .vd-owner {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.video-detail-main .vd-owner-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #FFC107;
  flex-shrink: 0;
}

.video-detail-main .vd-owner-name {
  color: #333 !important;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 14px;
  transition: color 0.2s ease;
}

.video-detail-main .vd-owner-name:hover {
  color: #FFC107 !important;
}

.video-detail-main .vd-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.video-detail-main .vd-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  background: #F5F5F5;
  color: #555;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none !important;
  transition: all 0.2s ease;
  white-space: nowrap;
  border: 1px solid transparent;
}

.video-detail-main .vd-action-btn:hover {
  background: #FFC107;
  color: #1A1A1A !important;
  border-color: #FFB300;
}

.video-detail-main .vd-action-btn i {
  font-size: 13px;
}

.video-detail-main .vd-action-report:hover {
  background: #FFF3F3;
  color: #C62828 !important;
  border-color: #FFCDD2;
}

/* --- Description --- */
.video-detail-main .vd-description {
  margin-top: 16px;
}

.video-detail-main .vd-description p,
.video-detail-main .js-description_readmore {
  font-size: 14px;
  line-height: 1.75;
  color: #555;
  margin: 0;
}

.video-detail-main .vd-license {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
  font-size: 13px;
}
.video-detail-main .vd-license-icon { color: #888; flex-shrink: 0; }
.video-detail-main .vd-license-label { font-weight: 600; color: #444; text-decoration: none; }
.video-detail-main a.vd-license-label:hover { color: #1a237e; text-decoration: underline; }
.video-detail-main .vd-license-desc { color: #888; }

/* --- Video Notes Section --- */
.video-detail-main .vd-notes-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  margin-bottom: 16px;
}

.video-detail-main .vd-notes-header {
  margin-bottom: 16px;
}

.video-detail-main .vd-notes-header .sub-title {
  font-size: 18px;
  font-weight: 700;
  color: #1A1A1A;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 2px solid #FFC107;
  display: inline-block;
}

.video-detail-main .vd-notes-header .sub-title i {
  color: #FFC107;
  margin-right: 6px;
}

.video-detail-main .vd-notes-count {
  color: #999;
  font-weight: 400;
  font-size: 15px;
}

/* Note form */
.video-detail-main .vd-note-form {
  margin-bottom: 20px;
  background: #FAFAFA;
  border: 1px solid #EEE;
  border-radius: 10px;
  padding: 16px;
}

.video-detail-main .vd-note-form-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.video-detail-main .vd-note-timestamp-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.video-detail-main .vd-note-capture-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #FFC107;
  background: #FFF;
  color: #FFC107;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.video-detail-main .vd-note-capture-btn:hover {
  background: #FFC107;
  color: #fff;
}

.video-detail-main .vd-note-timestamp-input {
  width: 70px;
  padding: 7px 10px;
  border: 1px solid #DDD;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #1A1A1A;
  text-align: center;
  font-family: 'Source Code Pro', monospace;
  background: #fff;
}

.video-detail-main .vd-note-timestamp-input:focus {
  border-color: #FFC107;
  outline: none;
}

.video-detail-main .vd-note-textarea {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid #DDD;
  border-radius: 8px;
  font-size: 14px;
  color: #333;
  resize: vertical;
  min-height: 40px;
  line-height: 1.5;
  background: #fff;
}

.video-detail-main .vd-note-textarea:focus {
  border-color: #FFC107;
  outline: none;
}

.video-detail-main .vd-note-form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  gap: 8px;
}

.video-detail-main .vd-note-submit-btn {
  padding: 8px 20px;
  background: #FFC107;
  color: #1A1A1A;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.video-detail-main .vd-note-submit-btn:hover {
  background: #FFB300;
}

/* Notes list */
.video-detail-main .vd-notes-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.video-detail-main .vd-note-item {
  padding: 14px 16px;
  border: 1px solid #F0F0F0;
  border-radius: 10px;
  margin-bottom: 10px;
  background: #FAFAFA;
  transition: all 0.2s ease;
}

.video-detail-main .vd-note-item:hover {
  border-color: #FFC107;
  background: #FFFCF0;
}

.video-detail-main .vd-note-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

/* The note controls are <button> elements — they act on this page, they don't
   navigate. Buttons don't inherit font and carry a UA border/padding, so strip that
   here; the rules below then supply the real appearance. Keep this block ABOVE them:
   same specificity, so source order is what lets the badge re-declare its padding. */
.video-detail-main .vd-note-timestamp-badge,
.video-detail-main .vd-note-edit-btn,
.video-detail-main .vd-note-delete-btn {
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.video-detail-main .vd-note-timestamp-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: #1A1A1A;
  color: #FFC107 !important;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Source Code Pro', monospace;
  text-decoration: none !important;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.video-detail-main .vd-note-timestamp-badge:hover {
  background: #FFC107;
  color: #1A1A1A !important;
}

.video-detail-main .vd-note-timestamp-badge i {
  font-size: 10px;
}

.video-detail-main .vd-note-date {
  color: #AAA;
  font-size: 12px;
  margin-left: auto;
}

.video-detail-main .vd-note-actions {
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.video-detail-main .vd-note-item:hover .vd-note-actions {
  opacity: 1;
}

.video-detail-main .vd-note-edit-btn,
.video-detail-main .vd-note-delete-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: #F0F0F0;
  color: #777;
  font-size: 12px;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.video-detail-main .vd-note-edit-btn:hover {
  background: #FFC107;
  color: #1A1A1A;
}

.video-detail-main .vd-note-delete-btn:hover {
  background: #FF5252;
  color: #fff;
}

.video-detail-main .vd-note-body {
  padding-left: 2px;
}

.video-detail-main .vd-note-text {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  margin: 0;
}

/* Note edit form (inline) */
.video-detail-main .vd-note-edit-form {
  margin-top: 10px;
}

.video-detail-main .vd-note-save-btn {
  padding: 6px 16px;
  background: #FFC107;
  color: #1A1A1A;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.video-detail-main .vd-note-save-btn:hover {
  background: #FFB300;
}

.video-detail-main .vd-note-cancel-btn {
  padding: 6px 16px;
  background: #F0F0F0;
  color: #555;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.video-detail-main .vd-note-cancel-btn:hover {
  background: #E0E0E0;
}

/* --- Comments Section --- */
.video-detail-main .vd-comments-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.video-detail-main .vd-comments-header {
  margin-bottom: 20px;
}

.video-detail-main .vd-comments-card .sub-title {
  font-size: 18px;
  font-weight: 700;
  color: #1A1A1A;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 2px solid #FFC107;
  display: inline-block;
}

.video-detail-main .vd-comment-count {
  color: #999;
  font-weight: 400;
  font-size: 15px;
}

/* Comment form */
.video-detail-main .vd-comment-form {
  margin-bottom: 24px;
}

.video-detail-main .vd-comment-compose {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.video-detail-main .vd-comment-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  min-height: 60px;
  transition: border-color 0.2s ease;
  background: #FAFAFA;
  color: #333;
  outline: none;
}

.video-detail-main .vd-comment-input:focus {
  border-color: #FFC107;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255,193,7,0.1);
}

.video-detail-main .vd-comment-submit {
  align-self: flex-end;
  padding: 8px 24px;
  background: #FFC107;
  color: #1A1A1A;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.video-detail-main .vd-comment-submit:hover {
  background: #FFB300;
  box-shadow: 0 4px 12px rgba(255,193,7,0.3);
}

/* Comment list */
.video-detail-main .comment-row {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 500px;
  overflow-y: auto;
}

.video-detail-main .comment-cell {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #F0F0F0;
  margin: 0;
  position: static;
  background: none;
  border-left: none;
  min-height: auto;
  transition: background 0.2s ease;
}

.video-detail-main .comment-cell:last-child {
  border-bottom: none;
}

.video-detail-main .comment-cell:hover {
  background: #FAFAFA;
  border-radius: 8px;
  margin: 0 -8px;
  padding: 14px 8px;
  transform: none;
  box-shadow: none;
  border-left: none;
}

.video-detail-main .comment-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0;
  position: static;
  border: none;
  box-shadow: none;
}

.video-detail-main .comment-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.video-detail-main .comment-body {
  flex: 1;
  min-width: 0;
}

.video-detail-main .comment-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.video-detail-main .comment-author {
  font-size: 14px;
  font-weight: 600;
  color: #1A1A1A;
  margin: 0 !important;
}

.video-detail-main .comment-date {
  font-size: 12px;
  color: #999;
  display: inline;
  text-align: left;
}

.video-detail-main .comment-cell p {
  font-size: 14px;
  line-height: 1.6;
  color: #555;
  margin: 0;
}

/* --- Q&A Actions (Reply + Report) --- */
.video-detail-main .comment-actions {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}

/* Reply is a <button>; this selector used to be anchor-only and would otherwise
   drop every one of these declarations. */
.video-detail-main .comment-actions a,
.video-detail-main .comment-actions button {
  font-size: 13px;
  color: #888;
  background: none;
  border: 0;
  padding: 0;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.video-detail-main .comment-actions a:hover,
.video-detail-main .comment-actions button:hover {
  color: #1A1A1A;
}

.video-detail-main .qa-reply-btn i {
  margin-right: 3px;
  font-size: 12px;
}

/* --- Q&A Replies --- */
.video-detail-main .qa-replies {
  margin-top: 12px;
  padding-left: 20px;
  border-left: 2px solid #F0F0F0;
}

.video-detail-main .qa-reply-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #F5F5F5;
}

.video-detail-main .qa-reply-item:last-child {
  border-bottom: none;
}

.video-detail-main .qa-reply-item .comment-avatar {
  width: 32px;
  height: 32px;
}

.video-detail-main .qa-reply-item .comment-avatar img {
  width: 32px;
  height: 32px;
}

.video-detail-main .qa-reply-item .comment-author {
  font-size: 13px;
}

.video-detail-main .qa-reply-item .comment-date {
  font-size: 11px;
}

.video-detail-main .qa-reply-item p {
  font-size: 13px;
  line-height: 1.5;
  color: #555;
  margin: 0;
}

.video-detail-main .qa-reply-item .comment-actions {
  margin-top: 4px;
}

.video-detail-main .qa-reply-item .comment-actions a {
  font-size: 12px;
}

/* --- Q&A Reply Form --- */
.video-detail-main .qa-reply-form {
  margin-top: 10px;
  padding-left: 20px;
}

.video-detail-main .qa-reply-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  min-height: 50px;
  background: #FAFAFA;
  color: #333;
  outline: none;
  transition: border-color 0.2s ease;
  margin-bottom: 8px;
  box-sizing: border-box;
}

.video-detail-main .qa-reply-input:focus {
  border-color: #FFC107;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255,193,7,0.1);
}

.video-detail-main .qa-reply-submit {
  padding: 6px 18px;
  background: #FFC107;
  color: #1A1A1A;
  border: none;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.video-detail-main .qa-reply-submit:hover {
  background: #FFB300;
  box-shadow: 0 3px 10px rgba(255,193,7,0.3);
}

/* --- Course Rating Section (Video Page) --- */
.video-detail-main .vd-rating-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  margin-top: 20px;
}

.video-detail-main .vd-rating-header {
  margin-bottom: 20px;
}

.video-detail-main .vd-rating-card .sub-title {
  font-size: 18px;
  font-weight: 700;
  color: #1A1A1A;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 2px solid #FFC107;
  display: inline-block;
}

.video-detail-main .vd-rating-icon {
  color: #FFC107;
  margin-right: 6px;
}

/* Average rating summary */
.video-detail-main .vd-rating-summary {
  text-align: center;
  padding: 16px 0 20px;
  border-bottom: 1px solid #F0F0F0;
  margin-bottom: 20px;
}

.video-detail-main .vd-rating-big {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.video-detail-main .vd-rating-number {
  font-size: 42px;
  font-weight: 700;
  color: #1A1A1A;
  line-height: 1;
}

.video-detail-main .vd-rating-stars-display {
  font-size: 20px;
  color: #FFC107;
}

.video-detail-main .vd-rating-stars-display i {
  margin: 0 1px;
}

.video-detail-main .vd-rating-total {
  font-size: 13px;
  color: #999;
  margin-top: 2px;
}

/* User rating form */
.video-detail-main .vd-rating-form {
  padding: 16px 0;
  border-bottom: 1px solid #F0F0F0;
  margin-bottom: 20px;
}

.video-detail-main .vd-rating-prompt {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin: 0 0 12px;
}

.video-detail-main .vd-star-input {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}

.video-detail-main .vd-star-input i {
  font-size: 28px;
  color: #FFC107;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.video-detail-main .vd-star-input i:hover {
  transform: scale(1.2);
}

.video-detail-main .vd-review-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  min-height: 60px;
  background: #FAFAFA;
  color: #333;
  outline: none;
  transition: border-color 0.2s ease;
  margin-bottom: 12px;
  box-sizing: border-box;
}

.video-detail-main .vd-review-input:focus {
  border-color: #FFC107;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255,193,7,0.1);
}

.video-detail-main .vd-review-submit {
  padding: 8px 24px;
  background: #FFC107;
  color: #1A1A1A;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.video-detail-main .vd-review-submit:hover {
  background: #FFB300;
  box-shadow: 0 4px 12px rgba(255,193,7,0.3);
}

/* Reviews list */
.video-detail-main .vd-reviews-list {
  padding-top: 4px;
}

.video-detail-main .vd-review-item {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #F0F0F0;
}

.video-detail-main .vd-review-item:last-child {
  border-bottom: none;
}

.video-detail-main .vd-review-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
}

.video-detail-main .vd-review-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.video-detail-main .vd-review-content {
  flex: 1;
  min-width: 0;
}

.video-detail-main .vd-review-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}

.video-detail-main .vd-review-author {
  font-size: 14px;
  font-weight: 600;
  color: #1A1A1A;
}

.video-detail-main .vd-review-date {
  font-size: 12px;
  color: #999;
}

.video-detail-main .vd-review-stars {
  margin-bottom: 6px;
  color: #FFC107;
  font-size: 14px;
}

.video-detail-main .vd-review-stars i {
  margin-right: 1px;
}

.video-detail-main .vd-review-text {
  font-size: 14px;
  line-height: 1.6;
  color: #555;
  margin: 0;
}

/* ===== COURSE DETAIL RATING SECTION ===== */
.cd-redesign .cd-rating-section {
  margin-top: 0;
}

.cd-redesign .cd-rating-icon {
  color: #FFC107;
  margin-right: 6px;
}

.cd-redesign .cd-rating-summary {
  text-align: center;
  padding: 16px 0 20px;
  border-bottom: 1px solid #F0F0F0;
  margin-bottom: 20px;
}

.cd-redesign .cd-rating-big {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.cd-redesign .cd-rating-number {
  font-size: 42px;
  font-weight: 700;
  color: #1A1A1A;
  line-height: 1;
}

.cd-redesign .cd-rating-stars-display {
  font-size: 20px;
  color: #FFC107;
}

.cd-redesign .cd-rating-stars-display i {
  margin: 0 1px;
}

.cd-redesign .cd-rating-total {
  font-size: 13px;
  color: #999;
  margin-top: 2px;
}

.cd-redesign .cd-rating-form {
  padding: 16px 0;
  border-bottom: 1px solid #F0F0F0;
  margin-bottom: 20px;
}

.cd-redesign .cd-rating-prompt {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin: 0 0 12px;
}

.cd-redesign .cd-star-input {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}

.cd-redesign .cd-star-input i {
  font-size: 28px;
  color: #FFC107;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.cd-redesign .cd-star-input i:hover {
  transform: scale(1.2);
}

.cd-redesign .cd-review-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  min-height: 60px;
  background: #FAFAFA;
  color: #333;
  outline: none;
  transition: border-color 0.2s ease;
  margin-bottom: 12px;
  box-sizing: border-box;
}

.cd-redesign .cd-review-input:focus {
  border-color: #FFC107;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255,193,7,0.1);
}

.cd-redesign .cd-review-submit {
  padding: 8px 24px;
  background: #FFC107;
  color: #1A1A1A;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cd-redesign .cd-review-submit:hover {
  background: #FFB300;
  box-shadow: 0 4px 12px rgba(255,193,7,0.3);
}

.cd-redesign .cd-reviews-list {
  padding-top: 4px;
}

.cd-redesign .cd-review-item {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #F0F0F0;
}

.cd-redesign .cd-review-item:last-child {
  border-bottom: none;
}

.cd-redesign .cd-review-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
}

.cd-redesign .cd-review-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.cd-redesign .cd-review-content {
  flex: 1;
  min-width: 0;
}

.cd-redesign .cd-review-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}

.cd-redesign .cd-review-author {
  font-size: 14px;
  font-weight: 600;
  color: #1A1A1A;
}

.cd-redesign .cd-review-date {
  font-size: 12px;
  color: #999;
}

.cd-redesign .cd-review-stars {
  margin-bottom: 6px;
  color: #FFC107;
  font-size: 14px;
}

.cd-redesign .cd-review-stars i {
  margin-right: 1px;
}

.cd-redesign .cd-review-text {
  font-size: 14px;
  line-height: 1.6;
  color: #555;
  margin: 0;
}

/* --- Video overlay info bar --- */
.video-info-list {
  display: flex;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: center;
  flex-wrap: wrap;
}

.gray-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.gray-label:hover {
  color: #FFC107;
}

.gray-label .common-icon {
  font-size: 16px;
}

.gray-label a {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.gray-label a:hover {
  color: #FFC107;
}

/* --- Utility buttons --- */
.small-black-btn {
  background: #1A1A1A;
  color: #fff !important;
}

.small-black-btn:hover {
  background: #000;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.small-gray-btn {
  background: linear-gradient(135deg, #F8F8F8 0%, #F0F0F0 100%);
  color: #555 !important;
  border: none;
  transition: all 0.3s ease;
}

.small-gray-btn:hover {
  background: linear-gradient(135deg, #FFC107 0%, #FFB300 100%);
  color: #000 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 193, 7, 0.15);
}

/* =============================================
   PLAYLIST CONSOLE — Modern Minimalist Design
   ============================================= */

/* --- Console Container --- */
.playlist-console {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  overflow: hidden;
  border-top: 3px solid #FFC107;
}

/* --- Playlist Section (Accordion Item) --- */
.playlist-console .playlist-section {
  border-bottom: 1px solid #e5e5e5;
}
.playlist-console .playlist-section:last-child {
  border-bottom: none;
}

/* --- Playlist Header --- */
.playlist-console .playlist-header {
  padding: 0 !important;
  border: none !important;
}
.playlist-console .playlist-header a,
.playlist-console .playlist-header a:hover,
.playlist-console .playlist-header a:focus,
.playlist-console .playlist-header a:active {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 16px !important;
  text-decoration: none !important;
  color: #1a1a1a !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.2px;
  transition: background 0.2s ease !important;
  cursor: pointer;
  user-select: none;
  background: none !important;
  position: static !important;
  outline: none !important;
  border: none !important;
}
.playlist-console .playlist-header a:hover {
  background: #f8f8f8 !important;
}
.playlist-console .playlist-header-text {
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: block !important;
}

/* --- Chevron Icon --- */
.playlist-console .playlist-chevron {
  font-size: 11px !important;
  color: #999 !important;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), color 0.2s ease !important;
  flex-shrink: 0 !important;
  margin-left: 10px !important;
  position: static !important;
  right: auto !important;
  top: auto !important;
}
.playlist-console .playlist-section.active .playlist-chevron {
  transform: rotate(180deg);
  color: #555 !important;
}

/* --- Collapse panel override (neutralize Bootstrap .panel-collapse/.panel-body) --- */
.playlist-console .panel-collapse > .playlist-body {
  padding: 0 8px 8px !important;
  border: none !important;
  margin: 0 !important;
}

/* --- Video Items List --- */
.playlist-console .playlist-items {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-height: 420px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Custom thin scrollbar */
.playlist-console .playlist-items::-webkit-scrollbar { width: 4px; }
.playlist-console .playlist-items::-webkit-scrollbar-track { background: transparent; }
.playlist-console .playlist-items::-webkit-scrollbar-thumb { background: #d9d9d9; border-radius: 4px; }
.playlist-console .playlist-items::-webkit-scrollbar-thumb:hover { background: #bbb; }

/* --- Individual Video Item (inline styles handle core flex layout) --- */
.playlist-console .pl-item {
  border-radius: 6px;
  transition: background 0.15s ease !important;
}
.playlist-console .pl-item:last-child {
  border-bottom: none !important;
}
.playlist-console .pl-item:hover {
  background: #f5f5f5 !important;
}

/* Override .video-cell-active legacy !important border */
.playlist-console .pl-item.video-cell-active {
  background: #FFFBEB !important;
  border: none !important;
  border-bottom: 1px solid #FFF3C4 !important;
  border-left: 3px solid #FFC107 !important;
  border-radius: 0 6px 6px 0 !important;
}
.playlist-console .pl-item.video-cell-active .pl-item-title {
  font-weight: 600 !important;
  color: #000 !important;
}
.playlist-console .pl-item.video-cell-active .pl-item-link {
  color: #000 !important;
}
/* Dark overlay on active video thumbnail */
.playlist-console .pl-item.video-cell-active .pl-item-thumb::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.35);
  border-radius: 5px;
  z-index: 1;
}

/* --- Thumbnail hover --- */
.playlist-console .pl-item:hover .pl-item-thumb img {
  opacity: 0.85;
}

/* --- Playing Indicator (CSS Equalizer) --- */
.playlist-console .pl-item-playing-indicator {
  display: none;
  position: absolute;
  bottom: 4px;
  left: 4px;
  gap: 1.5px;
  align-items: flex-end;
  height: 12px;
  z-index: 2;
}
.playlist-console .pl-item-playing-indicator span {
  display: block !important;
  width: 2.5px !important;
  background: #FFC107 !important;
  border-radius: 1px !important;
  animation: pl-eq-bounce 0.8s ease-in-out infinite alternate;
  padding: 0 !important;
  margin: 0 !important;
  position: static !important;
  min-height: 0 !important;
  border: none !important;
}
.playlist-console .pl-item-playing-indicator span:nth-child(1) { height: 4px; animation-delay: 0s; }
.playlist-console .pl-item-playing-indicator span:nth-child(2) { height: 8px; animation-delay: 0.2s; }
.playlist-console .pl-item-playing-indicator span:nth-child(3) { height: 5px; animation-delay: 0.4s; }

@keyframes pl-eq-bounce {
  0%   { height: 3px; }
  100% { height: 11px; }
}

.playlist-console .pl-item.video-cell-active .pl-item-playing-indicator {
  display: flex !important;
}
.playlist-console .pl-item.video-cell-active.is-paused .pl-item-playing-indicator span {
  animation-play-state: paused;
}

/* --- Playlist link overrides (fight Bootstrap a + global a,button transition) --- */
.playlist-console .pl-item-link,
.playlist-console .pl-item-link:hover,
.playlist-console .pl-item-link:focus,
.playlist-console .pl-item-link:active,
.playlist-console .pl-item-link:visited {
  color: inherit !important;
  text-decoration: none !important;
  outline: none !important;
  background: none !important;
  transition: none !important;
}
.playlist-console .pl-item:hover .pl-item-title {
  color: #111 !important;
}

/* --- Status sticker (visual-only play/pause indicator) --- */
.playlist-console .pl-item-status {
  display: none;
}
.playlist-console .pl-item.video-cell-active .pl-item-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FFC107;
  margin-left: auto;
  pointer-events: none;
}
.playlist-console .pl-item.video-cell-active .pl-item-status::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #fff;
  margin-left: 2px;
}
.playlist-console .pl-item.video-cell-active.is-paused .pl-item-status::before {
  border-width: 0;
  width: 8px;
  height: 10px;
  border-left: 2.5px solid #fff;
  border-right: 2.5px solid #fff;
  margin-left: 0;
}

/* --- Hide hidden inputs from flex layout --- */
.playlist-console .pl-item input[type="hidden"] {
  display: none !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Legacy compat */
.video-cell-active h3 a,
.video-cell-active .gray-label {
  color: #000 !important;
}

/* (Comments styles now in the video-detail section above) */

/* Video Info Display */
.video-info-list {
  display: flex;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: center;
  flex-wrap: wrap;
}

.gray-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.gray-label:hover {
  color: #FFC107;
}

.gray-label .common-icon {
  font-size: 16px;
}

.gray-label a {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.gray-label a:hover {
  color: #FFC107;
}

/* Video Detail Responsive Styles */
@media (max-width: 991px) {
  .video-detail-main {
    padding: 20px 12px;
  }
  
  .video-detail-main [data-view="left"] {
    width: 100%;
    margin-bottom: 24px;
  }
  
  .video-detail-main [data-view="similar"] {
    width: 100%;
  }
  
  .video-detail-main .padding-zero {
    padding: 0 !important;
  }
  
  .video-detail-main .main-video-panel {
    height: 400px;
  }
}

@media (max-width: 768px) {
  .video-detail-main {
    padding: 12px 8px;
  }
  
  .video-detail-main .row {
    display: flex;
    flex-direction: column;
  }
  
  .video-detail-main [data-view="left"] {
    display: contents;
    width: 100%;
  }
  
  .video-detail-main [data-view="similar"] {
    display: contents;
    width: 100%;
  }
  
  /* Mobile order: Video → Course bar → Playlist → Info → Comments */
  .video-detail-main .vd-player-card {
    order: 1;
  }
  .video-detail-main .vd-course-bar {
    order: 2;
  }
  .video-detail-main [data-view="similar"] > .playlist-console {
    order: 3;
    margin-bottom: 16px;
  }
  .video-detail-main .vd-info-card {
    order: 4;
  }
  .video-detail-main .vd-comments-card {
    order: 5;
  }
  .video-detail-main .vd-rating-card {
    order: 6;
  }
  
  .video-detail-main .main-video-panel {
    border-radius: 10px 10px 0 0;
    height: 280px;
  }
  
  .video-detail-main .vd-course-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
  }
  
  .video-detail-main .vd-info-card {
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 16px;
  }
  
  .video-detail-main .vd-title {
    font-size: 18px;
    margin-bottom: 12px;
  }
  
  .video-detail-main .vd-meta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .video-detail-main .vd-actions {
    width: 100%;
  }
  
  .video-detail-main .vd-comments-card {
    padding: 16px;
    border-radius: 12px;
  }

  .video-detail-main .vd-rating-card {
    padding: 16px;
    border-radius: 12px;
  }

  /* Playlist Console — Tablet */
  .playlist-console {
    border-radius: 12px;
  }
  .playlist-console .playlist-items {
    max-height: 320px;
  }
  .playlist-console .pl-item-thumb,
  .playlist-console .pl-item-thumb img {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
  }
  .playlist-console .pl-item-thumb {
    flex: 0 0 56px !important;
  }
  .playlist-console .pl-item-title {
    font-size: 12px !important;
  }
  .playlist-console .playlist-header a {
    padding: 12px 14px !important;
    font-size: 13px !important;
  }
  
  .video-info-list {
    gap: 12px;
  }
}

@media (max-width: 576px) {
  .video-detail-main {
    padding: 8px 4px;
    background: #F5F5F5;
  }
  
  .video-detail-main .main-video-panel {
    border-radius: 8px 8px 0 0;
    height: 200px;
  }
  
  .video-detail-main .vd-course-bar {
    padding: 8px 12px;
    border-radius: 0;
  }
  
  .video-detail-main .vd-course-path {
    font-size: 12px;
  }
  
  .video-detail-main .vd-tag {
    font-size: 10px;
    padding: 2px 8px;
  }
  
  .video-detail-main .vd-info-card {
    padding: 14px 12px;
    border-radius: 10px;
    margin-bottom: 12px;
  }
  
  .video-detail-main .vd-title {
    font-size: 16px;
  }
  
  .video-detail-main .vd-action-btn {
    padding: 6px 10px;
    font-size: 12px;
  }
  
  .video-detail-main .vd-action-btn span {
    display: none;
  }
  
  .video-detail-main .vd-action-btn i {
    font-size: 14px;
  }
  
  .video-detail-main .vd-comments-card {
    padding: 14px 12px;
    border-radius: 10px;
  }

  .video-detail-main .vd-rating-card {
    padding: 14px 12px;
    border-radius: 10px;
  }

  .video-detail-main .vd-star-input i {
    font-size: 24px;
  }

  .video-detail-main .vd-rating-number {
    font-size: 32px;
  }

  .video-detail-main .qa-replies {
    padding-left: 12px;
  }

  .video-detail-main .qa-reply-form {
    padding-left: 12px;
  }

  .video-detail-main .qa-reply-item .comment-avatar,
  .video-detail-main .qa-reply-item .comment-avatar img {
    width: 28px;
    height: 28px;
  }
  
  .video-detail-main .comment-avatar,
  .video-detail-main .comment-avatar img {
    width: 32px;
    height: 32px;
  }
  
  .video-detail-main .comment-author {
    font-size: 13px;
  }
  
  .video-detail-main .comment-cell p {
    font-size: 13px;
  }
  
  .video-detail-main .comment-row {
    max-height: 300px;
    overflow-y: auto;
  }
  
  .video-detail-main .vd-comments-card .sub-title {
    font-size: 16px;
  }
  
  .video-info-list {
    justify-content: flex-start;
    gap: 8px;
  }
  
  /* Playlist Console — Mobile */
  .playlist-console {
    border-radius: 10px;
  }
  .playlist-console .playlist-items {
    max-height: 260px;
  }
  .playlist-console .pl-item {
    padding: 6px 8px;
    gap: 8px;
  }
  .playlist-console .pl-item-thumb,
  .playlist-console .pl-item-thumb img {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    border-radius: 4px;
  }
  .playlist-console .pl-item-thumb {
    flex: 0 0 52px !important;
  }
  .playlist-console .pl-item-title {
    font-size: 12px !important;
  }
  .playlist-console .pl-item-duration {
    font-size: 9px !important;
    padding: 1px 3px !important;
  }
  .playlist-console .playlist-header a {
    padding: 11px 12px !important;
    font-size: 13px !important;
  }
}
.box-list li .dropdown-menu li {padding-left:0; margin:0}
.box-list li .dropdown-menu li a {padding:6px 15px;}
.box-list li .dropdown-menu li a i {margin-right:5px; font-size:15px;}
.box-list li i.common-icon {top:2px; font-size:15px;}
.sub-title {font-size:18px; font-weight:700; margin:0 0 30px;}
.comment-row {max-height:500px;}
.comment-cell {position:relative; border-bottom:1px solid #dbdbdb; padding:0 0 20px 88px; margin-bottom:20px; min-height:90px;}
.comment-img {position:absolute;left:0; top:0; width:70px; height:70px; border:1px solid #e8e8e8;border-radius: 50%;}
.comment-img img {border-radius:50%; width:100%; height:100%;}
.comment-cell h4 {font-size:16px; font-weight:400; color:#1c1c1c; margin:0 0 10px;}
.comment-date {display:block; text-align:right; color:#999999; font-size:13px;}
.comment-cell p {color:#666666;}
.comment-cell p:last-child {margin-bottom:0;}
.video-list {max-height:605px;}
.video-cell {border:1px solid #cccccc; background-color:#f7f7f7; margin-bottom:10px; padding-left:60px; min-height:66px; position:relative;}
.video-cell .play-icon {font-size:25px; color:#333333; position:absolute; left:20px; top:50%; transform:translate(0,-50%);-ms-transform:translate(0,-50%); -o-transform:translate(0,-50%);}
.video-cell h3 {margin:0 0 5px; font-size:16px; font-weight:700; letter-spacing:0.5px; color:#333333;}
.video-cell h3 a {color:#333333;}
.video-cell-active{background-color: #f7f7f7 !important; border: 1px solid #cccccc !important;}
/* Playlist console items should not inherit legacy video-cell styles */
.playlist-console .video-cell,
.playlist-console .video-list {all: unset;}
.common-breadcrumb {color:#999999;margin:0px; font-weight:700; padding:0; background-color:transparent;}
.common-breadcrumb a {color:#999999;}
.common-breadcrumb a:hover, .box-content .breadcrumb a:focus {color:#000;}
.common-breadcrumb > li + li:before {padding:0 5px; color:#ccc;content: ">";}
/*-------------Channel Detail Start---------------*/
.channel-banner {min-height:300px; position:relative; padding:30px; color:#fff; margin:0 -15px;}
.channel-banner:before {position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0, 0, 0, .70); content:"";}
.channel-info {position:absolute; left:0px; bottom:30px; width:100%; z-index:10; width:100%; padding:0 30px;}
.channel-info .user-row h1 {margin-top:20px; padding-right:0;}
.channel-info .user-row h4 {font-size:16px; font-weight:400; margin:10px 0;}
.channel-right {text-align:right;margin-top:45px;}
.channel-right .btn {margin-left:10px; margin-bottom:5px;}
.channel-right .btn:first-child {margin-left:0;}
.profile-block.box-content .breadcrumb {margin-bottom:0;} 
.panel-group .panel + .panel {margin-top:15px;}
.panel-heading {padding:0; border-radius:0px;}
.panel-title a {text-decoration:none; font-size:16px; display:block; position:relative; font-weight:700; color:#333; padding:17px 40px 17px 20px; background-color:#eeeeee;}
.panel-title a i {position:absolute; right:20px; top:15px; font-size:16px; color:#238823;}
.panel.active .panel-title a {color:#333;}
.panel.active .panel-title a .fa-minus-circle {display:inline-block; color:#d2222d;}
.panel.active .panel-title a .fa-plus-circle {display:none;}
.panel .panel-title a .fa-minus-circle {display:none;}
.panel .panel-title a .fa-plus-circle {display:inline-block;}
.user-profile-main .panel-group .panel {padding:10px 15px;}
.panel-group .panel-heading + .panel-collapse > .list-group, .panel-group .panel-heading + .panel-collapse > .panel-body {padding:10px 20px; border:none; margin-bottom:15px;}
.panel-group .panel {box-shadow:none; border:1px solid #eeeeee;}
.channel-right-block {margin-top:30px;}
.channel-right-block h2 {font-size:18px; font-weight:700; margin:0 0 20px;}
.channel-scroll {max-height:425px;}

/*-------------Search Page Redesign---------*/
/* Header */
.srp-header {background:linear-gradient(135deg, #1c1c2e 0%, #252538 100%); border-radius:12px; padding:32px 28px; margin-bottom:24px;}
.srp-header-inner {display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.srp-header-icon {width:48px; height:48px; background:rgba(255,193,7,0.15); border-radius:12px; display:flex; align-items:center; justify-content:center; color:#FFC107; font-size:20px; flex-shrink:0;}
.srp-title {color:#fff; font-size:22px; font-weight:700; margin:0; line-height:1.3;}
.srp-keyword {color:#FFC107; font-weight:700;}
.srp-subtitle {color:rgba(255,255,255,0.6); font-size:14px; margin:4px 0 0 64px;}

/* Filter Bar */
.srp-filter-bar {background:#fff; border-radius:10px; box-shadow:0 2px 12px rgba(0,0,0,0.06); padding:16px 20px; margin-bottom:24px;}
.srp-filter-row {display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap;}
.srp-filter-item {flex:1; min-width:180px;}
.srp-filter-label {display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:#555; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:6px;}
.srp-filter-label i {color:#FFC107; font-size:13px;}
.srp-filter-bar .bootstrap-select.form-control {height:42px; border-radius:8px; border:2px solid #eee; background:#fafafa; box-shadow:none; font-size:14px;}
.srp-filter-bar .bootstrap-select.form-control .dropdown-toggle .filter-option {padding-top:6px; font-size:14px;}
.srp-filter-bar .bootstrap-select.form-control .dropdown-toggle .caret {top:16px;}
.srp-filter-bar .bootstrap-select.form-control:hover, .srp-filter-bar .bootstrap-select.form-control:focus {border-color:#FFC107;}
.srp-filter-actions {display:flex; align-items:center; gap:16px; flex:0 0 auto; min-width:auto; padding-bottom:2px;}
.srp-popular-check {display:flex; align-items:center; gap:6px;}
.srp-popular-check input[type="checkbox"] {width:16px; height:16px; accent-color:#FFC107; cursor:pointer;}
.srp-popular-check label {margin:0; font-size:13px; font-weight:600; color:#555; cursor:pointer; display:flex; align-items:center; gap:5px;}
.srp-popular-check label i {color:#ff6b35;}
.srp-clear-btn {background:none; border:1px solid #ddd; border-radius:8px; padding:8px 16px; font-size:13px; color:#888; cursor:pointer; display:flex; align-items:center; gap:5px; transition:all 0.2s;}
.srp-clear-btn:hover {border-color:#e74c3c; color:#e74c3c; background:rgba(231,76,60,0.05);}
.srp-clear-btn i {font-size:14px;}

/* Sort Row */
.srp-sort-row {display:flex; align-items:center; gap:10px; margin-top:14px; padding-top:14px; border-top:1px solid #f0f0f0;}
.srp-sort-label {font-size:13px; font-weight:600; color:#555; display:flex; align-items:center; gap:5px; margin:0; white-space:nowrap;}
.srp-sort-label i {color:#FFC107; font-size:14px;}
.srp-sort-select {flex:0 0 auto; width:auto !important; min-width:170px;}
.srp-filter-bar .srp-sort-select.bootstrap-select.btn-group {width:auto !important; min-width:170px;}
.srp-filter-bar .srp-sort-select.bootstrap-select .dropdown-toggle {height:36px; border-radius:8px; border:2px solid #eee; background:#fafafa; font-size:13px; padding:4px 30px 4px 12px;}
.srp-filter-bar .srp-sort-select.bootstrap-select .dropdown-toggle .filter-option {padding-top:2px; font-size:13px;}
.srp-filter-bar .srp-sort-select.bootstrap-select .dropdown-toggle .caret {top:14px;}

/* Results Grid */
.srp-results-grid {display:flex; flex-direction:column; gap:16px;}
.srp-no-results {text-align:center; padding:60px 20px; color:#aaa;}
.srp-no-results i {font-size:48px; margin-bottom:16px; display:block; color:#ddd;}
.srp-no-results p {font-size:16px; margin:0;}

/* Course Card */
.srp-card {display:flex; background:#fff; border-radius:12px; box-shadow:0 2px 12px rgba(0,0,0,0.06); overflow:hidden; transition:box-shadow 0.25s, transform 0.25s;}
.srp-card:hover {box-shadow:0 6px 24px rgba(0,0,0,0.1); transform:translateY(-2px);}
.srp-card-thumb {position:relative; flex:0 0 260px; overflow:hidden; display:block; background:#f0f0f0;}
.srp-card-thumb img {width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.3s;}
.srp-card:hover .srp-card-thumb img {transform:scale(1.05);}
.srp-lang-badge {position:absolute; top:12px; left:12px; background:rgba(28,28,46,0.85); color:#FFC107; font-size:11px; font-weight:700; padding:4px 10px; border-radius:6px; text-transform:uppercase; letter-spacing:0.5px;}
.srp-card-body {flex:1; display:flex; flex-direction:column; padding:20px 24px;}
.srp-card-top {margin-bottom:8px;}
.srp-card-title {margin:0 0 8px; font-size:18px; font-weight:700;}
.srp-card-title a {color:#1c1c2e; text-decoration:none; transition:color 0.2s;}
.srp-card-title a:hover {color:#FFC107;}
.srp-card-meta {display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:13px; color:#888;}
.srp-meta-item {display:flex; align-items:center; gap:4px;}
.srp-meta-item i {color:#FFC107; font-size:12px;}
.srp-meta-divider {width:4px; height:4px; border-radius:50%; background:#ccc;}
.srp-card-desc {color:#777; font-size:14px; line-height:1.6; flex:1; margin:0 0 16px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.srp-card-footer {display:flex; align-items:center; justify-content:space-between; border-top:1px solid #f0f0f0; padding-top:14px; flex-wrap:wrap; gap:10px;}
.srp-card-stats {display:flex; gap:16px;}
.srp-stat {display:flex; align-items:center; gap:5px; font-size:13px; color:#888; font-weight:500;}
.srp-stat i {font-size:14px; color:#FFC107;}
.srp-card-actions {display:flex; align-items:center; gap:10px;}
.srp-btn-icon {width:36px; height:36px; display:flex; align-items:center; justify-content:center; border:2px solid #eee; border-radius:8px; color:#888; font-size:15px; transition:all 0.2s; text-decoration:none;}
.srp-btn-icon:hover {border-color:#FFC107; color:#FFC107; background:rgba(255,193,7,0.08);}
.srp-btn-primary {display:inline-flex; align-items:center; gap:6px; background:#FFC107; color:#1c1c2e; font-size:13px; font-weight:700; padding:8px 18px; border-radius:8px; text-decoration:none; transition:all 0.2s; border:none; cursor:pointer;}
.srp-btn-primary:hover {background:#e6ad00; color:#1c1c2e; text-decoration:none; box-shadow:0 4px 12px rgba(255,193,7,0.3);}
.srp-btn-primary i {font-size:12px;}

/* User Card */
.srp-user-card {display:flex; align-items:center; gap:20px; background:#fff; border-radius:12px; box-shadow:0 2px 12px rgba(0,0,0,0.06); padding:20px 24px; transition:box-shadow 0.25s, transform 0.25s;}
.srp-user-card:hover {box-shadow:0 6px 24px rgba(0,0,0,0.1); transform:translateY(-2px);}
.srp-user-avatar {flex-shrink:0; width:64px; height:64px; border-radius:50%; overflow:hidden; border:3px solid #FFC107; display:block;}
.srp-user-avatar img {width:100%; height:100%; object-fit:cover; display:block;}
.srp-user-info {flex:1; min-width:0;}
.srp-user-name {margin:0 0 8px; font-size:17px; font-weight:700;}
.srp-user-name a {color:#1c1c2e; text-decoration:none; transition:color 0.2s;}
.srp-user-name a:hover {color:#FFC107;}
.srp-user-stats {display:flex; gap:16px; flex-wrap:wrap;}
.srp-user-stat {display:flex; align-items:center; gap:5px; font-size:13px; color:#888; font-weight:500;}
.srp-user-stat i {color:#FFC107; font-size:14px;}
.srp-user-view {flex-shrink:0; display:inline-flex; align-items:center; gap:6px; background:#FFC107; color:#1c1c2e; font-size:13px; font-weight:700; padding:8px 18px; border-radius:8px; text-decoration:none; transition:all 0.2s;}
.srp-user-view:hover {background:#e6ad00; color:#1c1c2e; text-decoration:none; box-shadow:0 4px 12px rgba(255,193,7,0.3);}

/* Pagination */
.srp-pagination-wrap {padding-top:16px;}
.srp-pagination-wrap .pagination {display:flex; gap:4px; justify-content:center; flex-wrap:wrap;}
.srp-pagination-wrap .pagination li a, .srp-pagination-wrap .pagination li span {border-radius:8px; border:none; color:#555; font-weight:600; padding:8px 14px; background:#f5f5f5; transition:all 0.2s;}
.srp-pagination-wrap .pagination li.active a, .srp-pagination-wrap .pagination li.active span {background:#FFC107; color:#1c1c2e;}
.srp-pagination-wrap .pagination li a:hover {background:#FFC107; color:#1c1c2e;}

/* Search Responsive */
@media (max-width:991px) {
  .srp-card {flex-direction:column;}
  .srp-card-thumb {flex:0 0 auto; height:200px;}
  .srp-filter-item {min-width:140px;}
}
@media (max-width:767px) {
  .srp-header {padding:20px 16px;}
  .srp-title {font-size:18px;}
  .srp-subtitle {margin-left:0;}
  .srp-header-inner {gap:12px;}
  .srp-filter-bar {padding:12px 14px;}
  .srp-filter-row {gap:10px;}
  .srp-filter-item {min-width:100%; flex:0 0 100%;}
  .srp-filter-actions {flex:0 0 100%; justify-content:space-between;}
  .srp-sort-row {flex-wrap:wrap;}
  .srp-sort-select {min-width:100% !important;}
  .srp-card-body {padding:16px;}
  .srp-card-footer {flex-direction:column; align-items:flex-start;}
  .srp-card-actions {width:100%;}
  .srp-btn-primary {width:100%; justify-content:center;}
  .srp-user-card {flex-direction:column; text-align:center; gap:12px;}
  .srp-user-stats {justify-content:center;}
  .srp-user-view {width:100%; justify-content:center;}
}
/*-----------End Search Page Redesign---------*/

/*-----------Learning Rewards Page---------*/
.lr-page {padding-top:24px; padding-bottom:40px;}
.lr-hero {background:linear-gradient(135deg, #1c1c2e 0%, #252538 100%); border-radius:12px; padding:36px 32px; margin-bottom:28px; text-align:center;}
.lr-hero-icon {width:56px; height:56px; background:rgba(255,193,7,0.15); border-radius:14px; display:inline-flex; align-items:center; justify-content:center; color:#FFC107; font-size:24px; margin-bottom:14px;}
.lr-hero h1 {color:#fff; font-size:24px; font-weight:700; margin:0 0 8px;}
.lr-hero p {color:rgba(255,255,255,0.6); font-size:15px; margin:0;}

.lr-stats {display:flex; gap:16px; margin-bottom:28px; flex-wrap:wrap;}
.lr-stat-card {flex:1; min-width:140px; background:#fff; border-radius:10px; padding:20px 16px; text-align:center; box-shadow:0 2px 12px rgba(0,0,0,0.06);}
.lr-stat-num {font-size:28px; font-weight:700; color:#1c1c2e; line-height:1.2;}
.lr-stat-label {font-size:13px; color:#888; margin-top:4px;}

.lr-card {background:#fff; border-radius:10px; box-shadow:0 2px 12px rgba(0,0,0,0.06); padding:28px; margin-bottom:20px;}
.lr-card h2 {font-size:18px; font-weight:700; color:#1c1c2e; margin:0 0 6px; display:flex; align-items:center; gap:10px;}
.lr-card h2 .lr-icon {width:36px; height:36px; background:rgba(255,193,7,0.12); border-radius:10px; display:inline-flex; align-items:center; justify-content:center; color:#FFC107; font-size:16px; flex-shrink:0;}
.lr-card-desc {font-size:14px; color:#666; line-height:1.6; margin:0 0 16px;}

.lr-toc-grid {display:flex; flex-wrap:wrap; gap:10px;}
.lr-toc-link {flex:1; min-width:200px; display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:8px; background:#fafafa; color:#1c1c2e; font-size:14px; font-weight:500; text-decoration:none; transition:all 0.2s;}
.lr-toc-link:hover {background:rgba(255,193,7,0.10); color:#1c1c2e; text-decoration:none;}
.lr-toc-link i {color:#FFC107; font-size:15px; width:20px; text-align:center;}

.lr-card h4 {font-size:15px; font-weight:600; color:#1c1c2e; margin:20px 0 10px;}

.lr-table {width:100%; border-collapse:collapse; font-size:14px; margin-top:8px;}
.lr-table thead th {background:#fafafa; font-weight:600; color:#1c1c2e; padding:10px 14px; border-bottom:2px solid #f0f0f0; text-align:left; font-size:13px; text-transform:uppercase; letter-spacing:0.3px;}
.lr-table tbody td {padding:10px 14px; border-bottom:1px solid #f5f5f5; color:#555; vertical-align:top;}
.lr-table tbody tr:last-child td {border-bottom:none;}
.lr-table tbody tr:hover {background:#fafafa;}
.lr-table tbody td:first-child {font-weight:600; color:#1c1c2e;}

.lr-callout {background:rgba(255,193,7,0.06); border-radius:8px; padding:16px 18px; margin-top:16px; border-left:3px solid #FFC107;}
.lr-callout h5 {font-size:14px; font-weight:700; color:#1c1c2e; margin:0 0 6px;}
.lr-callout p {font-size:14px; color:#555; margin:0; line-height:1.6;}

.lr-tip {font-size:14px; color:#555; margin-top:12px; line-height:1.6;}
.lr-tip strong {color:#1c1c2e;}

.lr-info-grid {display:flex; flex-wrap:wrap; gap:12px; margin-top:16px;}
.lr-info-item {flex:1; min-width:220px; background:#fafafa; border-radius:8px; padding:16px;}
.lr-info-item h5 {font-size:14px; font-weight:600; color:#1c1c2e; margin:0 0 4px;}
.lr-info-item p {font-size:13px; color:#888; margin:0; line-height:1.5;}

.lr-list {margin:12px 0 0; padding-left:20px;}
.lr-list li {font-size:14px; color:#555; padding:4px 0; line-height:1.6;}
.lr-list li strong {color:#1c1c2e;}
.lr-list li code {background:#f5f5f5; padding:2px 6px; border-radius:4px; font-size:13px; color:#1c1c2e;}

.lr-cta {text-align:center; padding:40px 20px; margin-bottom:20px;}
.lr-cta h3 {font-size:20px; font-weight:700; color:#1c1c2e; margin:0 0 8px;}
.lr-cta p {font-size:14px; color:#888; margin:0 0 20px;}
.lr-cta-btn {display:inline-flex; align-items:center; gap:8px; background:#FFC107; color:#1c1c2e; font-size:15px; font-weight:700; padding:12px 28px; border-radius:10px; text-decoration:none; transition:all 0.2s;}
.lr-cta-btn:hover {background:#e6ad00; color:#1c1c2e; text-decoration:none; box-shadow:0 4px 16px rgba(255,193,7,0.3);}

@media (max-width:767px) {
    .lr-hero {padding:24px 18px;}
    .lr-hero h1 {font-size:20px;}
    .lr-hero p {font-size:14px;}
    .lr-stats {gap:10px;}
    .lr-stat-card {min-width:calc(50% - 8px); padding:14px 10px;}
    .lr-stat-num {font-size:22px;}
    .lr-card {padding:20px 16px;}
    .lr-card h2 {font-size:16px;}
    .lr-toc-link {min-width:100%;}
    .lr-table {font-size:13px;}
    .lr-table thead th, .lr-table tbody td {padding:8px 10px;}
    .lr-info-item {min-width:100%;}
}
/*-----------End Learning Rewards Page---------*/

/*-------------Feedback Start---------*/
.feedback-page-header {display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px;}
.feedback-page-header .page-title {margin:0;}
.feedback-cell {border-bottom:1px solid #ebebeb; padding-bottom:15px; margin-bottom:15px;}
.feedback-cell:last-child {border-bottom:none;}
.feedback-top {position:relative; padding-left:60px; min-height:45px; margin-bottom:10px;}
.feed-img {position:absolute; left:0; top:0; width:44px; height:44px; border:2px solid #eeeeee; border-radius:50%;}
.feed-img img {border-radius:50%;}
.feedback-stars {display:flex; gap:2px; margin-bottom:4px;}
.feedback-cell p:last-child {margin-bottom:0;}
.feedback-cell p {line-height:22px; color:#aaaaaa; letter-spacing:0.3px; font-size:15px;}
.feedback-cell h4 {margin:0 0 5px; font-weight:700;}
/*---------Continue watching---------*/
.img-link video {width:100%;}
.video-bottom-over {bottom:40px;}
.watching-top {margin-bottom:30px;}
.watching-top .box-img:before {display:none;}
/*---------Transaction history---------*/
.table-view-main {width:100%; overflow:auto; margin-bottom:30px;}
.table-view-main:last-child {margin-bottom:0;}
.table-view-main .table-view {display:table; width:100%; white-space:nowrap; background-color:#fff; border:1px solid #ccc;}
.table-view-main .table-view .thead {display:table-header-group;}
.table-view-main .table-view .th {display:table-cell; padding:15px 15px; vertical-align: middle; font-size:15px;  font-weight:600; background-color:#f8f8f8;}
.table-view-main .table-view .tbody {display: table-row-group;}
.table-view-main .table-view .td {display:table-cell; border:none; padding:12px 15px; vertical-align: middle; word-wrap:break-word; border-top:1px solid #cccccc; font-size:14px; color:#999999;}
.status-inner {display:inline-block; padding:2px 7px 3px;text-align:center; color:#20b470;min-width:95px;color:#fff; text-transform:uppercase; font-weight:500; font-size:14px;}
.status-inner.completed {background:#71daa9;}
.status-inner.pending {background:#de6173;}
.status-inner.rejected {background:#909090;}
label.error {font-size:13px; font-weight:400; color:#900;}
.space-lbl {font-weight: 400;}
.upload-video-main .qq-gallery .qq-upload-delete {position: absolute;right: 15px;top: 15px;}
.upload-video-main .qq-gallery.qq-uploader {padding:0;cursor: pointer;}
.upload-video-main .qq-gallery .qq-upload-list {padding-top:0;}

/*----------Notifications main------------*/
.list-noti li {border-bottom:1px solid #e5e5e5; padding-bottom:12px; margin-bottom:15px; position:relative; padding-left:38px;}
.list-noti li i {position:absolute; left:0; top:2px; font-size:22px;}
.list-noti li:last-child {border-bottom:none;}
.list-noti li small {color: #999999;}
.list-noti li h4 {margin:0 0 5px; font-size:16px;}
.list-noti li h4 a {color:#333;}
.block-2 .box-content {padding:0;}
.block-2 .srp-cell .box-content {padding:15px 0px;}
.block-2 .channel-name:last-child {margin-bottom:0;}
.horizontal-box {margin-bottom:30px;} 
.block-2 .box-img .img-link {height:auto; width:100%;}
.reset_btn {background-color: transparent; border:none; outline:none; font-size:20px; }
.autoplay_next_video {position:absolute; top:50%; transform:translate(0,-50%); -ms-transform:translate(0,-50%); -o-transform:translate(0,-50%); left:0; width:100%; text-align:center; z-index:50; padding-top:15px; background-color:rgba(0, 0, 0, 0.5); color:#fff;}
.circlePercent {left:0; top:0; margin:0 auto 15px;}
.autoplay_next_video .box-list li {display:inline-block; margin:0 10px 15px; color:#fff;}
.close-btn {width:35px; height:35px; border-radius:50%; display:inline-block; background-color:#fff; font-size:17px; line-height:35px; color:#903; position:absolute; right:10px; top:-15px; text-align:center;}
.srp-dropdown {position:absolute; left:0; top:0;}
.srp-dropdown .dropdown-toggle {height:60px; border:none; background-color:transparent; border-right:1px solid #fff; border-radius:0; font-size:25px; line-height:60px; padding-top:0; padding-bottom:0;}
.navbar-right .srp-dropdown .dropdown-menu{left:0;}
.navbar-right .srp-dropdown .dropdown-menu > li {border-bottom:1px solid #e5e5e5;}
.navbar-right .srp-dropdown .dropdown-menu > li:last-child {border-bottom:none;}
.navbar-right .srp-dropdown .dropdown-menu > li a {font-size:17px;}
.navbar-right .srp-dropdown .dropdown-menu > li span {margin-right:7px; font-size:20px;}
.small-btn-custom {
    border-radius: 20px;
    padding: 7px 15px;
    background-color: #333333;
    border:1px solid #333;
    color: #fff;
    font-weight: 700;
}

.small-btn-custom:hover, .small-btn-custom:focus {
    background-color: #fff;
    color:#333333;
}
.title-right {text-align:right;}
.carousel-fade .carousel-inner .item {
  transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
  z-index: 2;
}
.drag-upload .alert-error {max-width:100% !important; font-size:13px; font-weight:300;}
.language-menu {float:right; min-width:150px;}
.language-menu .bootstrap-select.form-control {height:30px; border-radius:8px;}
.language-menu .bootstrap-select .dropdown-toggle .filter-option-inner {font-size:13px;}
.language-menu .bootstrap-select .dropdown-toggle .filter-option {padding-top:0px; padding-left:0;}
.language-menu .bootstrap-select .dropdown-menu li {display:block; float:none; margin:0;}
.language-menu .bootstrap-select .dropdown-toggle .caret {top:1px; right:0;}
.form-language-menu { float:none; display:inline-block; margin-bottom:5px;}
.news_letter { float:right; margin-right:10px;min-width: 250px;}
.news_letter .form-control {height: 30px; border-radius: 10px; padding-right:35px; font-size:14px;}
.news_letter .form-group {position:relative; margin:0;}
.news_letter .send-news {position:absolute; right:13px; top:6px; color:#000; font-size:13px;}

/* 404 Error Page */
.error_class {position:relative; text-align:center;}
.error_class .go_back_section {position: absolute;bottom: 50px;right: 0;left:0;margin:0 auto;}
.error_class img {width: 100%;} 
/* 404 Error Page */

.title-with-edit {position:relative; padding-right:35px;}
.title-with-edit .edit-icon-btn {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #333;
    color: #fff;
    display: inline-block;
    line-height: 25px;
    text-align: center;
    position: absolute;
    right: 30px;
    top: 0;
    font-size: 12px;
}

.title-with-edit .delete-icon-btn {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #333;
    color: #fff;
    display: inline-block;
    line-height: 25px;
    text-align: center;
    position: absolute;
    right: 0;
    top: 0;
    font-size: 12px;
}

.video-info-list li {display:inline-block; vertical-align:middle;}
.video-info-list .right-label {float:right;}
.srp-main .box-content h3 {margin-bottom:7px;}
.srp-main .box-content .breadcrumb {margin-bottom:8px;}
.statick-pages h2 {font-size:16px; font-weight:600;}
.statick-pages h3 {font-size:15px; font-weight:600;}
.statick-pages h4 {font-size:14px; font-weight:600;}
.filter-check {display:inline-block; margin-right:5px;}
.filter-space {margin-top:10px; text-align:center;}
.clear-btn {font-size:15px; color:#9c9c9c; text-decoration:underline;}
.clear-btn:hover, .clear-btn:focus {color:#333;}
.navbar-right .dropdown-menu {width: 100%;}
.navbar-right .dropdown-menu > li > a {padding-top:6px; padding-bottom:6px;white-space: normal;}
.main_content.active .my-subscriptions .box-btns li {padding:0 0 5px; width:100%;}

/* ============================================
   CONTINUE LEARNING PAGE REDESIGN
   ============================================ */

/* Page Layout */
.cl-page { padding: 30px 20px; }

.cl-page-header { margin-bottom: 30px; }

.cl-title {
   font-size: 24px;
   font-weight: 700;
   color: #2d3436;
   margin: 0 0 6px;
   letter-spacing: 0.3px;
}
.cl-title i { color: #FFD54F; margin-right: 8px; }

.cl-subtitle {
   font-size: 14px;
   color: #888;
   margin: 0;
   font-weight: 400;
}

.cl-section-title {
   font-size: 18px;
   font-weight: 700;
   color: #2d3436;
   margin: 0 0 20px;
   padding-bottom: 12px;
   border-bottom: 2px solid #f0f0f0;
}
.cl-section-title i { color: #FFD54F; margin-right: 8px; font-size: 16px; }

/* ---- Hero Card (Featured / Most Recent Course) ---- */
.cl-hero-card {
   background: #fff;
   border-radius: 12px;
   box-shadow: 0 2px 20px rgba(0,0,0,0.08);
   padding: 0;
   margin-bottom: 35px;
   overflow: hidden;
   border: 1px solid #eee;
   position: relative;
}

.cl-hero-badge {
   position: absolute;
   top: 16px;
   left: 16px;
   z-index: 10;
   background: rgba(0,0,0,0.75);
   color: #FFD54F;
   font-size: 12px;
   font-weight: 600;
   padding: 5px 14px;
   border-radius: 20px;
   letter-spacing: 0.3px;
}
.cl-hero-badge i { margin-right: 5px; }

.cl-hero-card > .row { margin: 0; }
.cl-hero-card > .row > [class*="col-"] { padding: 0; }

.cl-hero-player {
   background: #000;
   min-height: 200px;
   height: 420px;
   max-height: 420px;
   position: relative;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
}
.cl-hero-player .main-video-panel { width: 100%; height: 100%; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; }
.cl-hero-player video,
.cl-hero-player img { width: 100%; height: 100%; max-height: 420px; object-fit: contain; display: block; }

.cl-hero-info {
   padding: 28px 28px 24px;
   display: flex;
   flex-direction: column;
   height: 100%;
}

.cl-hero-course-header {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
   margin-bottom: 10px;
}

.cl-lang-badge, .cl-cat-badge {
   display: inline-block;
   font-size: 11px;
   font-weight: 600;
   padding: 3px 10px;
   border-radius: 12px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
}
.cl-lang-badge { background: #E3F2FD; color: #1565C0; }
.cl-cat-badge { background: #F3E5F5; color: #7B1FA2; }
.cl-subcat-badge { background: #E8F5E9; color: #2E7D32; }

.cl-hero-course-name {
   font-size: 22px;
   font-weight: 700;
   margin: 0 0 16px;
   line-height: 1.3;
}
.cl-hero-course-name a { color: #2d3436; text-decoration: none; }
.cl-hero-course-name a:hover { color: #FFD54F; }

/* Now Playing Section */
.cl-now-playing {
   background: #FFFDE7;
   border-left: 3px solid #FFD54F;
   padding: 12px 14px;
   border-radius: 0 8px 8px 0;
   margin-bottom: 16px;
}

.cl-now-playing-label {
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: #F9A825;
   font-weight: 700;
   margin-bottom: 4px;
}
.cl-now-playing-label i { margin-right: 4px; }

.cl-now-playing-title {
   font-size: 15px;
   font-weight: 600;
   margin: 0 0 6px;
   line-height: 1.3;
}
.cl-now-playing-title a { color: #333; text-decoration: none; }
.cl-now-playing-title a:hover { color: #F9A825; }

.cl-video-meta {
   display: flex;
   gap: 16px;
   font-size: 12px;
   color: #888;
}
.cl-video-meta i { margin-right: 4px; color: #aaa; }

/* Hero Description */
.cl-hero-desc {
   font-size: 13px;
   color: #888;
   line-height: 1.5;
   margin-bottom: 14px;
   word-wrap: break-word;
}

/* Progress Bar */
.cl-progress-section { margin-bottom: 16px; }

.cl-progress-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 6px;
}

.cl-progress-label {
   font-size: 12px;
   font-weight: 600;
   color: #555;
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

.cl-progress-count {
   font-size: 12px;
   color: #888;
   font-weight: 500;
}

.cl-progress-bar-track {
   width: 100%;
   height: 8px;
   background: #eee;
   border-radius: 4px;
   overflow: hidden;
}

.cl-progress-bar-fill {
   height: 100%;
   background: linear-gradient(90deg, #FFD54F, #FFB300);
   border-radius: 4px;
   transition: width 0.6s ease;
   min-width: 2%;
}

.cl-progress-percent {
   font-size: 11px;
   color: #aaa;
   margin-top: 4px;
   text-align: right;
}

/* Hero Stats */
.cl-hero-stats {
   display: flex;
   gap: 20px;
   margin-bottom: 18px;
}

.cl-stat {
   font-size: 13px;
   color: #888;
}
.cl-stat i { margin-right: 5px; color: #bbb; font-size: 15px; }

/* Hero Action Buttons */
.cl-hero-actions {
   display: flex;
   gap: 10px;
   align-items: center;
   flex-wrap: wrap;
   margin-top: auto;
}

.cl-btn-resume {
   background: #FFD54F;
   color: #333;
   font-weight: 600;
   font-size: 14px;
   padding: 9px 22px;
   border-radius: 8px;
   border: none;
   transition: all 0.2s;
}
.cl-btn-resume:hover, .cl-btn-resume:focus { background: #FFCA28; color: #222; text-decoration: none; }
.cl-btn-resume i { margin-right: 6px; }

.cl-btn-secondary {
   background: #f5f5f5;
   color: #555;
   font-weight: 500;
   font-size: 13px;
   padding: 9px 18px;
   border-radius: 8px;
   border: 1px solid #e0e0e0;
   transition: all 0.2s;
}
.cl-btn-secondary:hover, .cl-btn-secondary:focus { background: #eee; color: #333; text-decoration: none; }

.cl-btn-remove {
   background: transparent;
   color: #ccc;
   font-size: 16px;
   padding: 8px 12px;
   border-radius: 8px;
   border: 1px solid transparent;
   transition: all 0.2s;
   margin-left: auto;
}
.cl-btn-remove:hover, .cl-btn-remove:focus { color: #e74c3c; border-color: #fde8e8; background: #fef5f5; text-decoration: none; }


/* ---- Course Cards Grid ---- */
.cl-courses-section { margin-bottom: 20px; }

.cl-course-card {
   background: #fff;
   border-radius: 10px;
   box-shadow: 0 1px 12px rgba(0,0,0,0.06);
   border: 1px solid #eee;
   overflow: hidden;
   margin-bottom: 24px;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
   display: flex;
   flex-direction: column;
}
.cl-course-card:hover {
   transform: translateY(-3px);
   box-shadow: 0 6px 24px rgba(0,0,0,0.1);
}

/* Card Thumbnail */
.cl-card-thumb {
   position: relative;
   overflow: hidden;
   background: #111;
}

.cl-card-thumb-link { display: block; position: relative; }
.cl-card-thumb-link img { width: 100%; height: 180px; object-fit: cover; display: block; transition: opacity 0.2s; }
.cl-course-card:hover .cl-card-thumb-link img { opacity: 0.85; }

.cl-card-play-overlay {
   position: absolute;
   top: 0; left: 0; right: 0; bottom: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: opacity 0.25s;
   background: rgba(0,0,0,0.25);
}
.cl-course-card:hover .cl-card-play-overlay { opacity: 1; }
.cl-card-play-overlay i { font-size: 42px; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.3); }

.cl-card-duration {
   position: absolute;
   bottom: 12px;
   right: 10px;
   background: rgba(0,0,0,0.75);
   color: #fff;
   font-size: 11px;
   font-weight: 600;
   padding: 2px 8px;
   border-radius: 4px;
}

/* Thin progress bar at bottom of thumbnail */
.cl-card-progress-bar {
   height: 4px;
   background: #e0e0e0;
   width: 100%;
}
.cl-card-progress-fill {
   height: 100%;
   background: linear-gradient(90deg, #FFD54F, #FFB300);
   transition: width 0.5s ease;
   min-width: 1%;
}

/* Card Body */
.cl-card-body { padding: 14px 16px 8px; flex: 1; }

.cl-card-course-name {
   font-size: 16px;
   font-weight: 700;
   margin: 0 0 8px;
   line-height: 1.3;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.cl-card-course-name a { color: #2d3436; text-decoration: none; }
.cl-card-course-name a:hover { color: #F9A825; }

.cl-card-now-playing {
   font-size: 13px;
   color: #555;
   margin-bottom: 8px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.cl-card-now-playing i { color: #FFD54F; font-size: 10px; margin-right: 5px; }
.cl-card-now-playing a { color: #555; text-decoration: none; }
.cl-card-now-playing a:hover { color: #F9A825; }

.cl-card-meta {
   display: flex;
   gap: 12px;
   margin-bottom: 12px;
   flex-wrap: wrap;
}
.cl-card-meta-item {
   font-size: 11px;
   color: #999;
}
.cl-card-meta-item i { margin-right: 3px; color: #bbb; }

/* Card Progress Info */
.cl-card-progress-info { margin-bottom: 10px; }

.cl-card-progress-text {
   display: flex;
   justify-content: space-between;
   font-size: 11px;
   color: #888;
   margin-bottom: 5px;
}
.cl-card-progress-text i { margin-right: 4px; color: #FFD54F; }

.cl-card-progress-pct { font-weight: 600; color: #FFB300; }

.cl-card-progress-track {
   width: 100%;
   height: 6px;
   background: #f0f0f0;
   border-radius: 3px;
   overflow: hidden;
}
.cl-card-progress-track-fill {
   height: 100%;
   background: linear-gradient(90deg, #FFD54F, #FFB300);
   border-radius: 3px;
   transition: width 0.5s ease;
   min-width: 1%;
}

/* Card Stats */
.cl-card-stats {
   display: flex;
   gap: 14px;
   align-items: center;
   font-size: 12px;
   color: #aaa;
   padding-top: 8px;
   border-top: 1px solid #f5f5f5;
}
.cl-card-stats i { margin-right: 3px; font-size: 13px; }

.cl-card-lang-badge {
   margin-left: auto;
   background: #E3F2FD;
   color: #1565C0;
   font-size: 10px;
   font-weight: 600;
   padding: 2px 8px;
   border-radius: 10px;
   text-transform: uppercase;
   letter-spacing: 0.3px;
}

/* Card Footer */
.cl-card-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px 16px;
   border-top: 1px solid #f0f0f0;
   background: #fafafa;
}

.cl-btn-card-resume {
   background: #FFD54F;
   color: #333;
   font-weight: 600;
   font-size: 12px;
   padding: 6px 16px;
   border-radius: 6px;
   border: none;
   transition: all 0.2s;
}
.cl-btn-card-resume:hover, .cl-btn-card-resume:focus { background: #FFCA28; color: #222; text-decoration: none; }
.cl-btn-card-resume i { margin-right: 4px; }

.cl-card-footer-actions {
   display: flex;
   gap: 6px;
   align-items: center;
}

.cl-card-action-btn {
   font-size: 11px;
   color: #999;
   padding: 5px 10px;
   border-radius: 5px;
   background: #f0f0f0;
   border: none;
   cursor: pointer;
   transition: all 0.2s;
   text-decoration: none;
   white-space: nowrap;
}
.cl-card-action-btn:hover, .cl-card-action-btn:focus { background: #e8e8e8; color: #555; text-decoration: none; }

.cl-card-remove-btn:hover { color: #e74c3c; background: #fef5f5; }



/* ---- Continue Learning: Responsive ---- */
@media (max-width: 991px) {
   .cl-hero-info { padding: 20px; }
   .cl-hero-course-name { font-size: 18px; }
   .cl-hero-player { min-height: 180px; max-height: 340px; }
   .cl-hero-player .main-video-panel,
   .cl-hero-player video,
   .cl-hero-player img { max-height: 340px !important; }
}

@media (max-width: 767px) {
   .cl-page { padding: 20px 10px; }
   .cl-title { font-size: 20px; }
   .cl-hero-card { border-radius: 8px; }
   .cl-hero-info { padding: 16px; }
   .cl-hero-course-name { font-size: 16px; }
   .cl-now-playing-title { font-size: 14px; }
   .cl-hero-player { min-height: 180px; max-height: 280px; }
   .cl-hero-player .main-video-panel,
   .cl-hero-player video,
   .cl-hero-player img { max-height: 280px !important; }
   .cl-hero-actions { flex-direction: column; gap: 8px; }
   .cl-hero-actions .btn { width: 100%; text-align: center; }
   .cl-btn-remove { margin-left: 0; }
   .cl-card-thumb-link img { height: 160px; }
}

@media (max-width: 480px) {
   .cl-title { font-size: 18px; }
   .cl-subtitle { font-size: 12px; }
   .cl-hero-player { min-height: 180px; }
   .cl-card-footer { flex-direction: column; gap: 8px; }
   .cl-btn-card-resume { width: 100%; text-align: center; }
   .cl-card-footer-actions { width: 100%; justify-content: space-between; }
}

/* ============================================
   END CONTINUE LEARNING PAGE REDESIGN
   ============================================ */

/* ============================================
   LIKED VIDEOS PAGE REDESIGN
   ============================================ */

/* Page Layout */
.lv-page { padding: 30px 20px; }

.lv-page-header { margin-bottom: 28px; }

.lv-title {
   font-size: 24px;
   font-weight: 700;
   color: #2d3436;
   margin: 0 0 6px;
   letter-spacing: 0.3px;
}
.lv-title i { color: #e74c3c; margin-right: 8px; }

.lv-subtitle {
   font-size: 14px;
   color: #888;
   margin: 0;
   font-weight: 400;
}
.lv-subtitle strong { color: #e74c3c; }

/* ---- Liked Video Cards ---- */
.lv-page .row {
   display: flex;
   flex-wrap: wrap;
}
.lv-page .row > [class*="col-"] {
   display: flex;
}
.lv-card {
   background: #fff;
   border-radius: 10px;
   box-shadow: 0 1px 12px rgba(0,0,0,0.06);
   border: 1px solid #eee;
   overflow: hidden;
   margin-bottom: 24px;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
   display: flex;
   flex-direction: column;
   width: 100%;
}
.lv-card:hover {
   transform: translateY(-3px);
   box-shadow: 0 6px 24px rgba(0,0,0,0.1);
}

/* Card Thumbnail */
.lv-card-thumb {
   position: relative;
   overflow: hidden;
   background: #111;
}

.lv-card-thumb-link { display: block; position: relative; }
.lv-card-thumb-link img { width: 100%; height: 180px; object-fit: cover; display: block; transition: opacity 0.2s; }
.lv-card:hover .lv-card-thumb-link img { opacity: 0.85; }

.lv-card-play-overlay {
   position: absolute;
   top: 0; left: 0; right: 0; bottom: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: opacity 0.25s;
   background: rgba(0,0,0,0.25);
}
.lv-card:hover .lv-card-play-overlay { opacity: 1; }
.lv-card-play-overlay i { font-size: 42px; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.3); }

.lv-card-duration {
   position: absolute;
   bottom: 10px;
   right: 10px;
   background: rgba(0,0,0,0.75);
   color: #fff;
   font-size: 11px;
   font-weight: 600;
   padding: 2px 8px;
   border-radius: 4px;
}

.lv-card-liked-badge {
   position: absolute;
   top: 10px;
   left: 10px;
   background: rgba(231, 76, 60, 0.9);
   color: #fff;
   width: 28px;
   height: 28px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 12px;
   box-shadow: 0 2px 6px rgba(231, 76, 60, 0.3);
}

.lv-card-title-row {
   display: flex;
   align-items: flex-start;
   gap: 8px;
   margin-bottom: 8px;
}
.lv-card-title-row .lv-card-title {
   flex: 1;
   margin: 0;
}
.lv-unlike-btn {
   flex-shrink: 0;
   background: none;
   border: none;
   outline: none;
   padding: 4px;
   cursor: pointer;
   color: #e74c3c;
   font-size: 18px;
   line-height: 1;
   transition: color 0.2s, transform 0.15s;
}
.lv-unlike-btn:hover {
   color: #c0392b;
   transform: scale(1.2);
}

/* Card Body */
.lv-card-body { padding: 14px 16px 10px; flex: 1; }

.lv-card-title {
   font-size: 16px;
   font-weight: 700;
   margin: 0 0 8px;
   line-height: 1.3;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}
.lv-card-title a { color: #2d3436; text-decoration: none; }
.lv-card-title a:hover { color: #e74c3c; }

.lv-card-course {
   font-size: 13px;
   color: #555;
   margin-bottom: 4px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.lv-card-course i { color: #FFD54F; font-size: 11px; margin-right: 5px; }
.lv-card-course a { color: #555; text-decoration: none; }
.lv-card-course a:hover { color: #e74c3c; }

.lv-card-playlist {
   font-size: 12px;
   color: #999;
   margin-bottom: 8px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.lv-card-playlist i { margin-right: 4px; color: #bbb; }

.lv-card-desc {
   font-size: 12px;
   color: #999;
   line-height: 1.45;
   margin-bottom: 10px;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   word-wrap: break-word;
}

/* Tags */
.lv-card-tags {
   display: flex;
   gap: 6px;
   flex-wrap: wrap;
   margin-bottom: 10px;
}
.lv-tag {
   display: inline-block;
   font-size: 10px;
   font-weight: 600;
   padding: 2px 8px;
   border-radius: 10px;
   text-transform: uppercase;
   letter-spacing: 0.4px;
}
.lv-tag-lang { background: #E3F2FD; color: #1565C0; }
.lv-tag-cat { background: #F3E5F5; color: #7B1FA2; }
.lv-tag-subcat { background: #E8F5E9; color: #2E7D32; }

/* Stats */
.lv-card-stats {
   display: flex;
   gap: 12px;
   align-items: center;
   font-size: 12px;
   color: #aaa;
   padding: 8px 0;
   border-top: 1px solid #f5f5f5;
}
.lv-card-stats i { margin-right: 3px; font-size: 13px; }

/* Liked On */
.lv-card-liked-on {
   font-size: 11px;
   color: #e74c3c;
   padding-top: 6px;
   font-weight: 500;
}
.lv-card-liked-on i { margin-right: 4px; font-size: 10px; }

/* Card Footer */
.lv-card-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px 16px;
   border-top: 1px solid #f0f0f0;
   background: #fafafa;
}

.lv-btn-watch {
   background: #e74c3c;
   color: #fff;
   font-weight: 600;
   font-size: 12px;
   padding: 6px 16px;
   border-radius: 6px;
   border: none;
   transition: all 0.2s;
}
.lv-btn-watch:hover, .lv-btn-watch:focus { background: #c0392b; color: #fff; text-decoration: none; }
.lv-btn-watch i { margin-right: 4px; }

.lv-card-footer-actions {
   display: flex;
   gap: 6px;
   align-items: center;
}

.lv-card-action-btn {
   font-size: 11px;
   color: #999;
   padding: 5px 10px;
   border-radius: 5px;
   background: #f0f0f0;
   transition: all 0.2s;
   text-decoration: none;
   white-space: nowrap;
}
.lv-card-action-btn:hover, .lv-card-action-btn:focus { background: #e8e8e8; color: #555; text-decoration: none; }

.lv-card-unlike-btn:hover { color: #e74c3c; background: #fef5f5; }


/* ---- Liked Videos: Responsive ---- */
@media (max-width: 767px) {
   .lv-page { padding: 20px 10px; }
   .lv-title { font-size: 20px; }
   .lv-card-thumb-link img { height: 160px; }
}

@media (max-width: 480px) {
   .lv-title { font-size: 18px; }
   .lv-subtitle { font-size: 12px; }
   .lv-card-footer { flex-direction: column; gap: 8px; }
   .lv-btn-watch { width: 100%; text-align: center; }
   .lv-card-footer-actions { width: 100%; justify-content: space-between; }
}

/* ---- Liked Videos: Heartbreak Unlike Animation ---- */

/* Heart icon breaking apart */
.lv-heartbreak {
   position: relative;
   pointer-events: none;
}
.lv-heartbreak i {
   animation: heartbreakPulse 0.8s ease forwards;
   color: #e74c3c;
}

@keyframes heartbreakPulse {
   0%   { transform: scale(1);   color: #e74c3c; opacity: 1; }
   15%  { transform: scale(1.4); color: #e74c3c; }
   30%  { transform: scale(1);   color: #c0392b; }
   50%  { transform: scale(1.2) rotate(-8deg); color: #a93226; }
   70%  { transform: scale(0.8) rotate(5deg);  color: #922b21; opacity: 0.7; }
   100% { transform: scale(0)   rotate(-15deg); color: #922b21; opacity: 0; }
}

/* Card fading out and collapsing after unlike */
.lv-card-removing {
   animation: cardRemove 0.5s 0.4s ease forwards;
}

@keyframes cardRemove {
   0%   { opacity: 1; transform: scale(1); max-height: 600px; margin-bottom: 30px; }
   60%  { opacity: 0; transform: scale(0.95); }
   100% { opacity: 0; transform: scale(0.9); max-height: 0; margin-bottom: 0; padding: 0; overflow: hidden; }
}

/* Heartbreak particle burst */
.lv-heartbreak::before,
.lv-heartbreak::after {
   content: '\f7a9'; /* fa-heart-broken */
   font-family: 'Font Awesome 5 Free';
   font-weight: 900;
   position: absolute;
   font-size: 12px;
   color: #e74c3c;
   top: 50%;
   left: 50%;
}
.lv-heartbreak::before {
   animation: shardLeft 0.7s 0.1s ease-out forwards;
}
.lv-heartbreak::after {
   animation: shardRight 0.7s 0.1s ease-out forwards;
}

@keyframes shardLeft {
   0%   { transform: translate(-50%, -50%) rotate(0); opacity: 1; }
   100% { transform: translate(-25px, -20px) rotate(-40deg); opacity: 0; }
}
@keyframes shardRight {
   0%   { transform: translate(-50%, -50%) rotate(0); opacity: 1; }
   100% { transform: translate(15px, -18px) rotate(35deg); opacity: 0; }
}

/* ============================================
   END LIKED VIDEOS PAGE REDESIGN
   ============================================ */

/* ============================================
   LEARN LATER COURSES (wlc-) PAGE REDESIGN
   ============================================ */

/* -- Page Header -- */
.wlc-page { padding: 20px 15px 40px; }
.wlc-page-header { margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.wlc-header-content { display: flex; align-items: center; gap: 18px; }
.wlc-header-icon {
   width: 56px; height: 56px; border-radius: 14px;
   background: linear-gradient(135deg, #26C6DA 0%, #00897B 100%);
   display: flex; align-items: center; justify-content: center;
   font-size: 26px; color: #fff; flex-shrink: 0;
}
.wlc-header-text h1 { font-size: 26px; font-weight: 700; color: #1a1a2e; margin: 0 0 2px; }
.wlc-subtitle { font-size: 14px; color: #666; margin: 0; }
.wlc-subtitle strong { color: #00897B; }
.wlc-header-actions { flex-shrink: 0; }
.wlc-btn-clear-all {
   display: inline-flex; align-items: center; gap: 6px;
   padding: 8px 16px; border-radius: 6px; border: 1px solid #e0e0e0;
   background: #fff; color: #999; font-size: 13px; font-weight: 500;
   transition: all .2s; cursor: pointer;
}
.wlc-btn-clear-all:hover { border-color: #e74c3c; color: #e74c3c; text-decoration: none; background: #fef5f5; }

/* -- Toolbar -- */
.wlc-toolbar {
   display: flex; align-items: center; gap: 14px; margin-bottom: 24px;
   flex-wrap: wrap;
}
.wlc-search-box {
   flex: 1; min-width: 220px; position: relative;
}
.wlc-search-icon {
   position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
   color: #aaa; font-size: 14px; pointer-events: none;
}
.wlc-search-input {
   width: 100%; padding: 10px 38px 10px 40px; border: 1px solid #e0e0e0;
   border-radius: 8px; font-size: 14px; color: #333;
   background: #fafafa; transition: border-color .2s, box-shadow .2s;
   outline: none;
}
.wlc-search-input:focus { border-color: #FFC107; box-shadow: 0 0 0 3px rgba(255,193,7,0.12); background: #fff; }
.wlc-search-input::placeholder { color: #bbb; }
.wlc-search-clear {
   position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
   background: none; border: none; color: #aaa; cursor: pointer;
   padding: 4px; font-size: 13px; transition: color .2s;
}
.wlc-search-clear:hover { color: #e74c3c; }
.wlc-sort-box {
   display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.wlc-sort-label { font-size: 13px; color: #777; white-space: nowrap; margin: 0; }
.wlc-sort-label i { margin-right: 4px; }
.wlc-sort-select {
   padding: 9px 14px; border: 1px solid #e0e0e0; border-radius: 8px;
   font-size: 13px; color: #333; background: #fafafa; cursor: pointer;
   outline: none; transition: border-color .2s;
}
.wlc-sort-select:focus { border-color: #FFC107; box-shadow: 0 0 0 3px rgba(255,193,7,0.12); }

/* -- Card -- */
.wlc-page > .row { display: flex; flex-wrap: wrap; }
.wlc-page > .row > [class*="col-"] { display: flex; }
.wlc-card {
   background: #fff; border-radius: 12px; overflow: hidden;
   box-shadow: 0 2px 12px rgba(0,0,0,.07);
   transition: transform .2s ease, box-shadow .2s ease;
   margin-bottom: 28px; display: flex; flex-direction: column;
   width: 100%;
}
.wlc-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }

/* -- Card Header (Logo-centric) -- */
.wlc-card-header {
   display: flex; align-items: flex-start; gap: 14px;
   padding: 18px 18px 0; position: relative;
}
.wlc-logo-wrap {
   width: 56px; height: 56px; border-radius: 12px; overflow: hidden;
   flex-shrink: 0; background: #f0f0f0; display: flex;
   align-items: center; justify-content: center;
   box-shadow: 0 2px 8px rgba(0,0,0,.08);
   transition: transform .2s;
}
.wlc-card:hover .wlc-logo-wrap { transform: scale(1.05); }
.wlc-logo-img { width: 100%; height: 100%; object-fit: cover; }
.wlc-card-header-text { flex: 1; min-width: 0; }
.wlc-status-badge {
   position: absolute; top: 14px; right: 14px;
   font-size: 10px; font-weight: 600; text-transform: uppercase;
   padding: 3px 8px; border-radius: 4px; letter-spacing: .3px;
   white-space: nowrap;
}
/* Status color modifiers - use the progress percent as a class hook */
.wlc-status-badge { background: #f0f0f0; color: #999; }
.wlc-status-badge[class*="wlc-status-0"] { background: #FFF3E0; color: #E65100; }
.wlc-status-badge.wlc-status-100 { background: #E8F5E9; color: #2E7D32; }
/* "In Progress" for any non-zero, non-100 will use this */

/* -- Card Body -- */
.wlc-card-body { padding: 12px 18px 12px; flex: 1; display: flex; flex-direction: column; }
.wlc-card-title {
   font-size: 17px; font-weight: 700; margin: 0 0 4px; line-height: 1.35;
   display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
   overflow: hidden; text-overflow: ellipsis;
   min-height: 46px; /* 2 lines × 17px × 1.35 */
}
.wlc-card-title a { color: #1a1a2e; }
.wlc-card-title a:hover { color: #00897B; text-decoration: none; }
.wlc-card-instructor { font-size: 13px; color: #777; margin: 0 0 10px; }
.wlc-card-instructor i { margin-right: 5px; color: #00897B; }
.wlc-instructor-link { color: #555; font-weight: 500; transition: color .2s; }
.wlc-instructor-link:hover { color: #00897B; text-decoration: underline; }

/* -- Tags -- */
.wlc-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; min-height: 28px; }
.wlc-tag {
   display: inline-flex; align-items: center; gap: 4px;
   padding: 3px 9px; border-radius: 4px;
   font-size: 11px; font-weight: 500;
}
.wlc-tag i { font-size: 10px; }
.wlc-tag-lang { background: #E3F2FD; color: #1565C0; }
.wlc-tag-cat { background: #F3E5F5; color: #7B1FA2; }
.wlc-tag-subcat { background: #E8F5E9; color: #2E7D32; }

/* -- Description -- */
.wlc-card-desc {
   font-size: 13px; color: #666; line-height: 1.5; margin: 0 0 12px;
   display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
   overflow: hidden;
   min-height: 39px; /* 2 lines × 13px × 1.5 line-height */
}

/* -- Progress Bar -- */
.wlc-card-progress { margin-bottom: 10px; }
.wlc-progress-header {
   display: flex; justify-content: space-between; align-items: center;
   margin-bottom: 5px;
}
.wlc-progress-label { font-size: 12px; font-weight: 600; color: #555; }
.wlc-progress-count { font-size: 11px; color: #999; }
.wlc-progress-track {
   width: 100%; height: 6px; background: #f0f0f0; border-radius: 3px;
   overflow: hidden;
}
.wlc-progress-fill {
   height: 100%; border-radius: 3px;
   background: linear-gradient(90deg, #26C6DA 0%, #00897B 100%);
   transition: width .4s ease;
   min-width: 0;
}
.wlc-progress-pct { font-size: 11px; color: #00897B; font-weight: 500; margin-top: 3px; display: inline-block; }

/* -- Stats Row -- */
.wlc-card-stats {
   display: flex; gap: 14px; flex-wrap: wrap;
   padding: 10px 0; border-top: 1px solid #f0f0f0; margin-bottom: 8px;
}
.wlc-stat { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #555; }
.wlc-stat i { color: #00897B; font-size: 13px; }

/* -- Saved On -- */
.wlc-card-saved {
   font-size: 12px; color: #999; margin: auto 0 0;
   padding-top: 6px;
}
.wlc-card-saved i { margin-right: 4px; }

/* -- Card Footer -- */
.wlc-card-footer {
   display: flex; align-items: center; justify-content: space-between;
   padding: 12px 18px; border-top: 1px solid #f0f0f0; background: #fafafa;
}
.wlc-btn-explore {
   display: inline-flex; align-items: center; gap: 6px;
   padding: 7px 18px; border-radius: 6px;
   background: linear-gradient(135deg, #26C6DA 0%, #00897B 100%);
   color: #fff; font-size: 13px; font-weight: 600;
   transition: opacity .2s;
}
.wlc-btn-explore:hover { opacity: .88; color: #fff; text-decoration: none; }
.wlc-btn-continue {
   background: linear-gradient(135deg, #FFB74D 0%, #FF9800 100%);
}
.wlc-btn-remove {
   display: inline-flex; align-items: center; gap: 5px;
   padding: 7px 14px; border-radius: 6px;
   background: #fff; border: 1px solid #e0e0e0;
   color: #999; font-size: 12px; transition: all .2s;
}
.wlc-btn-remove:hover { border-color: #e74c3c; color: #e74c3c; text-decoration: none; }

/* -- Empty State -- */
.wlc-empty-state {
   text-align: center; padding: 60px 20px;
   background: #fafafa; border-radius: 12px;
   border: 2px dashed #e0e0e0; margin: 20px 0;
}
.wlc-empty-icon {
   width: 80px; height: 80px; margin: 0 auto 20px;
   border-radius: 50%; background: linear-gradient(135deg, #E0F7FA 0%, #B2DFDB 100%);
   display: flex; align-items: center; justify-content: center;
   font-size: 32px; color: #00897B;
}
.wlc-empty-title { font-size: 20px; font-weight: 700; color: #1a1a2e; margin: 0 0 8px; }
.wlc-empty-desc { font-size: 14px; color: #888; margin: 0 0 24px; max-width: 400px; margin-left: auto; margin-right: auto; }
.wlc-empty-cta {
   display: inline-flex; align-items: center; gap: 8px;
   padding: 12px 28px; border-radius: 8px;
   background: linear-gradient(135deg, #26C6DA 0%, #00897B 100%);
   color: #fff; font-size: 15px; font-weight: 600;
   transition: opacity .2s; text-decoration: none;
}
.wlc-empty-cta:hover { opacity: .88; color: #fff; text-decoration: none; }

/* -- Pagination -- */
.wlc-pagination { margin-top: 10px; text-align: center; }

/* -- Responsive -- */
@media (max-width: 991px) {
   .wlc-logo-wrap { width: 48px; height: 48px; }
}
@media (max-width: 767px) {
   .wlc-page-header { flex-direction: column; align-items: flex-start; }
   .wlc-header-content { flex-direction: column; text-align: center; }
   .wlc-header-text h1 { font-size: 22px; }
   .wlc-toolbar { flex-direction: column; }
   .wlc-search-box { min-width: 100%; }
   .wlc-sort-box { width: 100%; }
   .wlc-sort-select { flex: 1; }
   .wlc-card-stats { gap: 10px; }
   .wlc-card-footer { flex-direction: column; gap: 8px; }
   .wlc-btn-explore, .wlc-btn-remove { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
   .wlc-card-header { padding: 14px 14px 0; }
   .wlc-card-body { padding: 10px 14px 10px; }
   .wlc-card-title { font-size: 15px; }
   .wlc-logo-wrap { width: 44px; height: 44px; border-radius: 10px; }
   .wlc-empty-state { padding: 40px 16px; }
}

/* ---- Learn Later: Card Removal Animation ---- */
.wlc-card-removing {
   animation: wlcCardRemove 0.5s ease forwards;
}
@keyframes wlcCardRemove {
   0%   { opacity: 1; transform: scale(1); }
   60%  { opacity: 0; transform: scale(0.95); }
   100% { opacity: 0; transform: scale(0.9); max-height: 0; margin-bottom: 0; padding: 0; overflow: hidden; }
}

/* ============================================
   END LEARN LATER COURSES PAGE REDESIGN
   ============================================ */

/* ============================================
   LEARN LATER VIDEOS (wlv-) PAGE REDESIGN — LIST LAYOUT
   ============================================ */

/* -- Page Header -- */
.wlv-page { padding: 20px 15px 40px; }
.wlv-page-header { margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.wlv-header-content { display: flex; align-items: center; gap: 18px; }
.wlv-header-icon {
   width: 56px; height: 56px; border-radius: 14px;
   background: linear-gradient(135deg, #7C4DFF 0%, #536DFE 100%);
   display: flex; align-items: center; justify-content: center;
   font-size: 26px; color: #fff; flex-shrink: 0;
}
.wlv-header-text h1 { font-size: 26px; font-weight: 700; color: #1a1a2e; margin: 0 0 2px; }
.wlv-subtitle { font-size: 14px; color: #666; margin: 0; }
.wlv-subtitle strong { color: #536DFE; }
.wlv-header-actions { flex-shrink: 0; }
.wlv-btn-clear-all {
   display: inline-flex; align-items: center; gap: 6px;
   padding: 8px 16px; border-radius: 6px; border: 1px solid #e0e0e0;
   background: #fff; color: #999; font-size: 13px; font-weight: 500;
   transition: all .2s; cursor: pointer;
}
.wlv-btn-clear-all:hover { border-color: #e74c3c; color: #e74c3c; text-decoration: none; background: #fef5f5; }

/* -- Toolbar -- */
.wlv-toolbar {
   display: flex; align-items: center; gap: 14px; margin-bottom: 24px;
   flex-wrap: wrap;
}
.wlv-search-box { flex: 1; min-width: 220px; position: relative; }
.wlv-search-icon {
   position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
   color: #aaa; font-size: 14px; pointer-events: none;
}
.wlv-search-input {
   width: 100%; padding: 10px 38px 10px 40px; border: 1px solid #e0e0e0;
   border-radius: 8px; font-size: 14px; color: #333;
   background: #fafafa; transition: border-color .2s, box-shadow .2s;
   outline: none;
}
.wlv-search-input:focus { border-color: #FFC107; box-shadow: 0 0 0 3px rgba(255,193,7,0.12); background: #fff; }
.wlv-search-input::placeholder { color: #bbb; }
.wlv-search-clear {
   position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
   background: none; border: none; color: #aaa; cursor: pointer;
   padding: 4px; font-size: 13px; transition: color .2s;
}
.wlv-search-clear:hover { color: #e74c3c; }
.wlv-sort-box { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.wlv-sort-label { font-size: 13px; color: #777; white-space: nowrap; margin: 0; }
.wlv-sort-label i { margin-right: 4px; }
.wlv-sort-select {
   padding: 9px 14px; border: 1px solid #e0e0e0; border-radius: 8px;
   font-size: 13px; color: #333; background: #fafafa; cursor: pointer;
   outline: none; transition: border-color .2s;
}
.wlv-sort-select:focus { border-color: #FFC107; box-shadow: 0 0 0 3px rgba(255,193,7,0.12); }

/* -- List Container -- */
.wlv-list { display: flex; flex-direction: column; gap: 0; }

/* -- Row Item -- */
.wlv-row {
   display: flex; align-items: center; gap: 18px;
   background: #fff; border-radius: 10px;
   padding: 14px 18px; margin-bottom: 10px;
   box-shadow: 0 1px 6px rgba(0,0,0,.05);
   transition: box-shadow .2s ease, transform .15s ease;
}
.wlv-row:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); transform: translateY(-1px); }

/* -- Thumbnail -- */
.wlv-row-thumb {
   position: relative; flex-shrink: 0;
   width: 180px; height: 101px; overflow: hidden;
   border-radius: 8px; background: #1a1a2e;
}
.wlv-row-thumb .wlv-thumb-link {
   display: block; width: 100%; height: 100%;
}
.wlv-row-thumb .wlv-thumb-img {
   width: 100%; height: 100%; object-fit: cover;
   transition: transform .3s ease;
}
.wlv-row:hover .wlv-thumb-img { transform: scale(1.05); }
.wlv-row-thumb .wlv-thumb-duration {
   position: absolute; bottom: 8px; right: 6px;
   padding: 2px 6px; border-radius: 3px;
   background: rgba(0,0,0,.78); color: #fff;
   font-size: 11px; font-weight: 600; font-family: monospace;
   letter-spacing: .4px;
}
.wlv-row-thumb .wlv-thumb-progress {
   position: absolute; bottom: 0; left: 0; width: 100%; height: 3px;
   background: rgba(255,255,255,.25);
}
.wlv-row-thumb .wlv-thumb-progress-fill {
   height: 100%;
   background: linear-gradient(90deg, #7C4DFF 0%, #536DFE 100%);
   transition: width .4s ease; min-width: 0;
}

/* -- Row Body (content) -- */
.wlv-row-body { flex: 1; min-width: 0; }

.wlv-row-top {
   display: flex; align-items: flex-start; gap: 10px; margin-bottom: 3px;
}
.wlv-row-title {
   font-size: 15px; font-weight: 700; margin: 0; line-height: 1.35;
   flex: 1; min-width: 0;
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wlv-row-title a { color: #1a1a2e; }
.wlv-row-title a:hover { color: #536DFE; text-decoration: none; }

/* -- Status Badge -- */
.wlv-status-badge {
   display: inline-block; flex-shrink: 0;
   font-size: 10px; font-weight: 600; text-transform: uppercase;
   padding: 2px 8px; border-radius: 4px; letter-spacing: .3px;
   white-space: nowrap;
}
.wlv-status-badge { background: #f0f0f0; color: #999; }
.wlv-status-badge[class*="wlv-status-0"] { background: #EDE7F6; color: #5E35B1; }
.wlv-status-badge.wlv-status-100 { background: #E8F5E9; color: #2E7D32; }

/* -- Channel line -- */
.wlv-row-channel { font-size: 13px; color: #777; margin: 0 0 5px; }
.wlv-row-channel i { margin-right: 3px; color: #536DFE; font-size: 11px; }
.wlv-channel-link { color: #555; font-weight: 500; transition: color .2s; }
.wlv-channel-link:hover { color: #536DFE; text-decoration: underline; }
.wlv-row-by { color: #aaa; font-size: 12px; margin-left: 2px; }
.wlv-owner-link { color: #888; transition: color .2s; }
.wlv-owner-link:hover { color: #536DFE; }

/* -- Meta row: tags + stats + date -- */
.wlv-row-meta {
   display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
.wlv-tag {
   display: inline-flex; align-items: center; gap: 3px;
   padding: 2px 8px; border-radius: 4px;
   font-size: 11px; font-weight: 500;
}
.wlv-tag i { font-size: 9px; }
.wlv-tag-lang { background: #E3F2FD; color: #1565C0; }
.wlv-tag-cat { background: #F3E5F5; color: #7B1FA2; }
.wlv-tag-subcat { background: #E8F5E9; color: #2E7D32; }
.wlv-meta-sep {
   width: 1px; height: 14px; background: #e0e0e0;
   margin: 0 2px; flex-shrink: 0;
}
.wlv-stat { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #666; }
.wlv-stat i { color: #536DFE; font-size: 11px; }
.wlv-row-saved { font-size: 11px; color: #aaa; }
.wlv-row-saved i { margin-right: 2px; }

/* -- Row Actions -- */
.wlv-row-actions {
   display: flex; align-items: center; gap: 8px;
   flex-shrink: 0;
}
.wlv-btn-watch {
   display: inline-flex; align-items: center; gap: 6px;
   padding: 7px 16px; border-radius: 6px;
   background: linear-gradient(135deg, #7C4DFF 0%, #536DFE 100%);
   color: #fff; font-size: 12px; font-weight: 600;
   transition: opacity .2s; white-space: nowrap;
}
.wlv-btn-watch:hover { opacity: .88; color: #fff; text-decoration: none; }
.wlv-btn-continue { background: linear-gradient(135deg, #FFB74D 0%, #FF9800 100%); }
.wlv-btn-rewatch { background: linear-gradient(135deg, #66BB6A 0%, #43A047 100%); }
.wlv-btn-remove {
   display: inline-flex; align-items: center; justify-content: center;
   width: 34px; height: 34px; border-radius: 6px;
   background: #fff; border: 1px solid #e0e0e0;
   color: #bbb; font-size: 13px; transition: all .2s;
}
.wlv-btn-remove:hover { border-color: #e74c3c; color: #e74c3c; text-decoration: none; background: #fef5f5; }

/* -- Empty State -- */
.wlv-empty-state {
   text-align: center; padding: 60px 20px;
   background: #fafafa; border-radius: 12px;
   border: 2px dashed #e0e0e0; margin: 20px 0;
}
.wlv-empty-icon {
   width: 80px; height: 80px; margin: 0 auto 20px;
   border-radius: 50%; background: linear-gradient(135deg, #EDE7F6 0%, #D1C4E9 100%);
   display: flex; align-items: center; justify-content: center;
   font-size: 32px; color: #536DFE;
}
.wlv-empty-title { font-size: 20px; font-weight: 700; color: #1a1a2e; margin: 0 0 8px; }
.wlv-empty-desc { font-size: 14px; color: #888; margin: 0 0 24px; max-width: 400px; margin-left: auto; margin-right: auto; }
.wlv-empty-cta {
   display: inline-flex; align-items: center; gap: 8px;
   padding: 12px 28px; border-radius: 8px;
   background: linear-gradient(135deg, #7C4DFF 0%, #536DFE 100%);
   color: #fff; font-size: 15px; font-weight: 600;
   transition: opacity .2s; text-decoration: none;
}
.wlv-empty-cta:hover { opacity: .88; color: #fff; text-decoration: none; }

/* -- Pagination -- */
.wlv-pagination { margin-top: 10px; text-align: center; }

/* -- Responsive -- */
@media (max-width: 991px) {
   .wlv-row-thumb { width: 160px; height: 90px; }
}
@media (max-width: 767px) {
   .wlv-page-header { flex-direction: column; align-items: flex-start; }
   .wlv-header-content { flex-direction: column; text-align: center; }
   .wlv-header-text h1 { font-size: 22px; }
   .wlv-toolbar { flex-direction: column; }
   .wlv-search-box { min-width: 100%; }
   .wlv-sort-box { width: 100%; }
   .wlv-sort-select { flex: 1; }
   .wlv-row { flex-wrap: wrap; gap: 12px; padding: 12px 14px; }
   .wlv-row-thumb { width: 140px; height: 79px; }
   .wlv-row-actions { width: 100%; justify-content: flex-end; border-top: 1px solid #f0f0f0; padding-top: 10px; }
}
@media (max-width: 480px) {
   .wlv-row { flex-direction: column; align-items: stretch; }
   .wlv-row-thumb { width: 100%; height: 0; padding-top: 56.25%; }
   .wlv-row-thumb .wlv-thumb-link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
   .wlv-row-title { white-space: normal; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; }
   .wlv-row-actions { justify-content: stretch; }
   .wlv-btn-watch { flex: 1; justify-content: center; }
   .wlv-empty-state { padding: 40px 16px; }
}

/* ---- Learn Later Videos: Row Removal Animation ---- */
.wlv-row-removing {
   animation: wlvRowRemove 0.4s ease forwards;
}
@keyframes wlvRowRemove {
   0%   { opacity: 1; transform: translateX(0); }
   60%  { opacity: 0; transform: translateX(30px); }
   100% { opacity: 0; max-height: 0; margin-bottom: 0; padding: 0; overflow: hidden; }
}

/* ============================================
   END LEARN LATER VIDEOS PAGE REDESIGN
   ============================================ */

/* ============================================
   LEARN HISTORY (wh-) PAGE REDESIGN — List Layout
   ============================================ */

/* -- Page Header -- */
.wh-page { padding: 20px 15px 40px; }
.wh-page-header {
   display: flex; align-items: center; justify-content: space-between;
   flex-wrap: wrap; gap: 16px; margin-bottom: 24px;
}
.wh-header-content { display: flex; align-items: center; gap: 18px; }
.wh-header-icon {
   width: 56px; height: 56px; border-radius: 14px;
   background: linear-gradient(135deg, #7E57C2 0%, #5C35A4 100%);
   display: flex; align-items: center; justify-content: center;
   font-size: 26px; color: #fff; flex-shrink: 0;
}
.wh-header-text h1 { font-size: 26px; font-weight: 700; color: #1a1a2e; margin: 0 0 2px; }
.wh-subtitle { font-size: 14px; color: #666; margin: 0; }
.wh-subtitle strong { color: #5C35A4; }
.wh-btn-clear {
   display: inline-flex; align-items: center; gap: 6px;
   padding: 8px 18px; border-radius: 6px;
   background: #fff; border: 1px solid #e0e0e0;
   color: #888; font-size: 13px; font-weight: 500;
   transition: all .2s;
}
.wh-btn-clear:hover { border-color: #e74c3c; color: #e74c3c; text-decoration: none; }
.wh-btn-clear.hide { display: none; }

/* -- Toolbar -- */
.wh-toolbar {
   display: flex; align-items: center; gap: 16px;
   margin-bottom: 24px; flex-wrap: wrap;
}
.wh-search-box {
   position: relative; flex: 1; min-width: 220px;
}
.wh-search-icon {
   position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
   color: #aaa; font-size: 14px; pointer-events: none;
}
.wh-search-input {
   width: 100%; padding: 10px 38px 10px 40px;
   border: 1px solid #e0e0e0; border-radius: 8px;
   font-size: 14px; color: #333; background: #fff;
   transition: border-color .2s, box-shadow .2s;
}
.wh-search-input:focus {
   outline: none; border-color: #FFC107;
   box-shadow: 0 0 0 3px rgba(255,193,7,0.12);
}
.wh-search-clear {
   position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
   background: none; border: none; color: #aaa; font-size: 14px;
   cursor: pointer; padding: 4px;
}
.wh-search-clear:hover { color: #e74c3c; }
.wh-sort-box { display: flex; align-items: center; gap: 8px; }
.wh-sort-label { font-size: 13px; color: #777; margin: 0; white-space: nowrap; }
.wh-sort-label i { margin-right: 4px; }
.wh-sort-select {
   padding: 9px 14px; border: 1px solid #e0e0e0; border-radius: 8px;
   font-size: 13px; color: #555; background: #fff;
   cursor: pointer; min-width: 160px;
}
.wh-sort-select:focus { outline: none; border-color: #FFC107; box-shadow: 0 0 0 3px rgba(255,193,7,0.12); }

/* -- List Container -- */
.wh-list { display: flex; flex-direction: column; gap: 0; }

/* -- Row Item -- */
.wh-row {
   display: flex; align-items: center; gap: 20px;
   padding: 16px 20px; background: #fff;
   border-bottom: 1px solid #f0f0f0;
   transition: background .15s;
}
.wh-row:first-child { border-radius: 10px 10px 0 0; }
.wh-row:last-child { border-radius: 0 0 10px 10px; border-bottom: none; }
.wh-row:only-child { border-radius: 10px; }
.wh-row:hover { background: #FAFAFE; }

/* -- Thumbnail -- */
.wh-row-thumb { flex-shrink: 0; width: 120px; }
.wh-thumb-link {
   display: block; position: relative; border-radius: 8px;
   overflow: hidden; background: #e8e8e8;
}
.wh-thumb-img {
   width: 120px; height: 80px; object-fit: cover;
   display: block; transition: transform .3s;
}
.wh-row:hover .wh-thumb-img { transform: scale(1.05); }
.wh-thumb-progress {
   position: absolute; bottom: 0; left: 0; right: 0;
   height: 3px; background: rgba(0,0,0,.2);
}
.wh-thumb-progress-bar {
   height: 100%; background: #7E57C2;
   transition: width .3s ease;
}

/* -- Content -- */
.wh-row-content { flex: 1; min-width: 0; }
.wh-row-title {
   font-size: 16px; font-weight: 700; margin: 0 0 4px; line-height: 1.3;
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wh-row-title a { color: #1a1a2e; }
.wh-row-title a:hover { color: #5C35A4; text-decoration: none; }
.wh-row-instructor { font-size: 13px; color: #777; margin: 0 0 6px; }
.wh-row-instructor i { margin-right: 4px; color: #7E57C2; font-size: 12px; }
.wh-instructor-link { color: #555; font-weight: 500; }
.wh-instructor-link:hover { color: #5C35A4; text-decoration: underline; }

/* -- Last Watched -- */
.wh-last-watched {
   display: inline-flex; align-items: center; gap: 6px;
   background: #F3E8FF; border-left: 3px solid #7E57C2;
   padding: 4px 10px; border-radius: 0 4px 4px 0;
   margin-bottom: 6px; max-width: 100%;
}
.wh-last-label { font-size: 11px; color: #7E57C2; font-weight: 600; flex-shrink: 0; }
.wh-last-video-name {
   font-size: 12px; color: #333; font-weight: 500;
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wh-last-video-name:hover { color: #5C35A4; text-decoration: none; }

/* -- Tags -- */
.wh-row-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.wh-tag {
   display: inline-flex; align-items: center; gap: 4px;
   padding: 2px 8px; border-radius: 4px;
   font-size: 11px; font-weight: 500;
}
.wh-tag i { font-size: 10px; }
.wh-tag-lang { background: #E3F2FD; color: #1565C0; }
.wh-tag-cat { background: #F3E5F5; color: #7B1FA2; }

/* -- Progress Row -- */
.wh-row-progress { display: flex; align-items: center; gap: 10px; }
.wh-progress-bar-wrap {
   width: 120px; height: 5px; background: #eee;
   border-radius: 3px; overflow: hidden; flex-shrink: 0;
}
.wh-progress-bar {
   height: 100%; background: linear-gradient(90deg, #7E57C2, #5C35A4);
   border-radius: 3px; transition: width .3s ease;
}
.wh-progress-text { font-size: 12px; color: #888; }

/* -- Actions -- */
.wh-row-actions {
   display: flex; align-items: center; gap: 10px;
   flex-shrink: 0; white-space: nowrap;
}
.wh-time-ago {
   font-size: 12px; color: #aaa; min-width: 50px; text-align: right;
}
.wh-btn-resume {
   display: inline-flex; align-items: center; gap: 6px;
   padding: 7px 16px; border-radius: 6px;
   background: linear-gradient(135deg, #7E57C2 0%, #5C35A4 100%);
   color: #fff; font-size: 13px; font-weight: 600;
   transition: opacity .2s;
}
.wh-btn-resume:hover { opacity: .88; color: #fff; text-decoration: none; }
.wh-btn-remove {
   display: inline-flex; align-items: center; justify-content: center;
   width: 32px; height: 32px; border-radius: 50%;
   background: #fff; border: 1px solid #e0e0e0;
   color: #bbb; font-size: 13px; transition: all .2s;
}
.wh-btn-remove:hover { border-color: #e74c3c; color: #e74c3c; text-decoration: none; }

/* -- Row Removing Animation -- */
.wh-row-removing {
   animation: whRowSlideOut .35s ease forwards;
   overflow: hidden;
}
@keyframes whRowSlideOut {
   0%   { opacity: 1; transform: translateX(0); max-height: 200px; }
   60%  { opacity: 0; transform: translateX(40px); max-height: 200px; }
   100% { opacity: 0; transform: translateX(40px); max-height: 0; padding: 0; margin: 0; border: none; }
}

/* -- Empty State -- */
.wh-empty-state {
   text-align: center; padding: 60px 20px;
}
.wh-empty-icon {
   width: 80px; height: 80px; border-radius: 50%;
   background: linear-gradient(135deg, #EDE7F6 0%, #D1C4E9 100%);
   display: flex; align-items: center; justify-content: center;
   margin: 0 auto 20px; font-size: 36px; color: #7E57C2;
}
.wh-empty-title { font-size: 20px; font-weight: 700; color: #333; margin: 0 0 8px; }
.wh-empty-text { font-size: 14px; color: #888; margin: 0 0 24px; }
.wh-empty-cta {
   display: inline-flex; align-items: center; gap: 8px;
   padding: 10px 28px; border-radius: 8px;
   background: linear-gradient(135deg, #7E57C2 0%, #5C35A4 100%);
   color: #fff; font-size: 14px; font-weight: 600;
   transition: opacity .2s;
}
.wh-empty-cta:hover { opacity: .88; color: #fff; text-decoration: none; }

/* -- Pagination -- */
.wh-pagination { margin-top: 10px; text-align: center; }

/* -- Responsive -- */
@media (max-width: 991px) {
   .wh-row-thumb { width: 100px; }
   .wh-thumb-img { width: 100px; height: 68px; }
   .wh-progress-bar-wrap { width: 90px; }
}
@media (max-width: 767px) {
   .wh-page-header { flex-direction: column; align-items: flex-start; }
   .wh-header-content { flex-direction: column; text-align: center; width: 100%; }
   .wh-btn-clear { width: 100%; justify-content: center; }
   .wh-header-text h1 { font-size: 22px; }
   .wh-toolbar { flex-direction: column; }
   .wh-search-box { width: 100%; }
   .wh-sort-box { width: 100%; }
   .wh-sort-select { flex: 1; }
   .wh-row { flex-wrap: wrap; gap: 12px; padding: 14px 16px; }
   .wh-row-thumb { width: 80px; }
   .wh-thumb-img { width: 80px; height: 54px; }
   .wh-row-content { min-width: calc(100% - 100px); }
   .wh-row-actions { width: 100%; justify-content: flex-end; }
   .wh-last-watched { display: none; }
}
@media (max-width: 480px) {
   .wh-row-title { font-size: 14px; }
   .wh-row-progress { flex-direction: column; align-items: flex-start; gap: 4px; }
   .wh-progress-bar-wrap { width: 100%; }
}

/* ============================================
   END LEARN HISTORY PAGE REDESIGN
   ============================================ */
.my-subscriptions .box-btns li .small-black-btn, .my-subscriptions .box-btns li .small-gray-btn, .my-subscriptions.box-btns li .small-border-btn { white-space:normal; word-wrap:break-word;}
/* ============================================
   MY COURSES (mc-) PAGE REDESIGN
   Color palette: Teal (#14B8A6 / #0D9488) — complements site yellow theme
   ============================================ */

/* -- Page Layout -- */
.mc-page { padding: 20px 15px 40px; }
.mc-page-header {
   display: flex; align-items: center; justify-content: space-between;
   flex-wrap: wrap; gap: 16px; margin-bottom: 24px;
}
.mc-header-content { display: flex; align-items: center; gap: 18px; }
.mc-header-icon {
   width: 56px; height: 56px; border-radius: 14px;
   background: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%);
   display: flex; align-items: center; justify-content: center;
   font-size: 26px; color: #fff; flex-shrink: 0;
}
.mc-header-text h1 { font-size: 26px; font-weight: 700; color: #1a1a2e; margin: 0 0 2px; }
.mc-subtitle { font-size: 14px; color: #666; margin: 0; }
.mc-subtitle strong { color: #0D9488; }
.mc-btn-create {
   display: inline-flex; align-items: center; gap: 8px;
   padding: 10px 24px; border-radius: 8px;
   background: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%);
   color: #fff; font-size: 14px; font-weight: 600;
   transition: opacity .2s; box-shadow: 0 4px 14px rgba(13,148,136,.3);
}
.mc-btn-create:hover { opacity: .88; color: #fff; text-decoration: none; }

/* -- Summary Stats Bar -- */
.mc-summary-bar {
   display: flex; align-items: center; justify-content: center; gap: 0;
   background: #fff; border-radius: 12px; padding: 20px 10px;
   box-shadow: 0 2px 12px rgba(0,0,0,.06); margin-bottom: 28px;
   flex-wrap: wrap;
}
.mc-summary-bar.hide { display: none; }
.mc-stat-item { text-align: center; padding: 0 28px; }
.mc-stat-value {
   display: block; font-size: 24px; font-weight: 800;
   color: #1a1a2e; line-height: 1.2;
}
.mc-stat-label { font-size: 12px; color: #888; font-weight: 500; text-transform: uppercase; letter-spacing: .5px; }
.mc-stat-divider { width: 1px; height: 36px; background: #e8e8e8; flex-shrink: 0; }

/* -- Course Card Grid -- */
.mc-grid {
   display: grid; grid-template-columns: repeat(2, 1fr);
   gap: 24px;
}

/* -- Course Card -- */
.mc-card {
   background: #fff; border-radius: 14px; overflow: hidden;
   box-shadow: 0 2px 16px rgba(0,0,0,.07);
   transition: transform .2s ease, box-shadow .2s ease;
   display: flex; flex-direction: column;
}
.mc-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.11); }

/* -- Card Top (Logo + Title + Badges) -- */
.mc-card-top {
   display: flex; align-items: flex-start; gap: 14px;
   margin-bottom: 12px;
}
.mc-card-logo {
   width: 52px; height: 52px; border-radius: 12px;
   overflow: hidden; border: 2px solid #e8e8e8;
   box-shadow: 0 2px 6px rgba(0,0,0,.08); background: #fff;
   flex-shrink: 0;
}
.mc-card-logo img { width: 100%; height: 100%; object-fit: cover; }
.mc-card-top-info { flex: 1; min-width: 0; }
.mc-card-badges {
   display: flex; flex-direction: column; gap: 4px; flex-shrink: 0;
}
.mc-badge {
   display: inline-flex; align-items: center; gap: 4px;
   padding: 3px 10px; border-radius: 20px;
   font-size: 11px; font-weight: 600; white-space: nowrap;
}
.mc-badge i { font-size: 10px; }
.mc-status-public { background: rgba(13,148,136,.12); color: #0D9488; }
.mc-status-private { background: #f3f3f3; color: #666; }
.mc-badge-lang { background: #f3f3f3; color: #555; }

/* -- Card Body -- */
.mc-card-body { padding: 20px 20px 14px; flex: 1; display: flex; flex-direction: column; }
.mc-card-title {
   font-size: 17px; font-weight: 700; margin: 0 0 4px;
   line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mc-card-title a { color: #1a1a2e; }
.mc-card-title a:hover { color: #0D9488; text-decoration: none; }
.mc-card-meta { font-size: 12px; color: #888; display: flex; align-items: center; gap: 6px; }
.mc-meta-cat i { margin-right: 4px; color: #0D9488; }
.mc-meta-sep { color: #ccc; }
.mc-card-desc {
   font-size: 13px; color: #666; line-height: 1.5; margin: 0 0 14px;
   display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
   overflow: hidden;
}

/* -- Stats Grid (6 items) -- */
.mc-stats-grid {
   display: grid; grid-template-columns: repeat(3, 1fr);
   gap: 0; border: 1px solid #f0f0f0; border-radius: 10px;
   overflow: hidden; margin-bottom: 14px;
}
.mc-stat {
   display: flex; flex-direction: column; align-items: center;
   padding: 10px 4px; border-right: 1px solid #f0f0f0;
   border-bottom: 1px solid #f0f0f0;
}
.mc-stat:nth-child(3n) { border-right: none; }
.mc-stat:nth-child(n+4) { border-bottom: none; }
.mc-stat i { font-size: 14px; color: #0D9488; margin-bottom: 3px; }
.mc-stat-num { font-size: 16px; font-weight: 700; color: #1a1a2e; line-height: 1.2; }
.mc-stat-lbl { font-size: 10px; color: #999; text-transform: uppercase; letter-spacing: .3px; }

/* -- Footer Info -- */
.mc-card-footer-info {
   display: flex; align-items: center; justify-content: space-between;
   font-size: 12px; color: #999; margin-top: auto; padding-top: 8px;
}
.mc-card-footer-info i { margin-right: 4px; }
.mc-modules-count { color: #0D9488; font-weight: 600; }

/* -- Card Actions -- */
.mc-card-actions {
   display: flex; align-items: center; border-top: 1px solid #f0f0f0;
   background: #FCFCFC;
}
.mc-btn {
   flex: 1; display: flex; align-items: center; justify-content: center;
   gap: 6px; padding: 11px 10px; font-size: 13px; font-weight: 600;
   transition: all .2s; border-right: 1px solid #f0f0f0;
}
.mc-btn:last-child { border-right: none; }
.mc-btn:hover { text-decoration: none; }
.mc-btn-view { color: #1565C0; }
.mc-btn-view:hover { background: #E3F2FD; color: #1565C0; }
.mc-btn-edit { color: #0D9488; }
.mc-btn-edit:hover { background: #E6FAF7; color: #0D9488; }
.mc-btn-delete { color: #bbb; flex: 0; min-width: 48px; }
.mc-btn-delete:hover { background: #FFEBEE; color: #e74c3c; }

/* -- Empty State -- */
.mc-empty-state {
   text-align: center; padding: 80px 20px;
}
.mc-empty-icon {
   width: 90px; height: 90px; border-radius: 50%;
   background: linear-gradient(135deg, #CCFBF1 0%, #99F6E4 100%);
   display: flex; align-items: center; justify-content: center;
   margin: 0 auto 24px; font-size: 40px; color: #14B8A6;
}
.mc-empty-title { font-size: 22px; font-weight: 700; color: #333; margin: 0 0 8px; }
.mc-empty-text { font-size: 15px; color: #888; margin: 0 0 28px; max-width: 400px; margin-left: auto; margin-right: auto; }
.mc-empty-cta {
   display: inline-flex; align-items: center; gap: 8px;
   padding: 12px 32px; border-radius: 8px;
   background: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%);
   color: #fff; font-size: 15px; font-weight: 600;
   transition: opacity .2s; box-shadow: 0 4px 14px rgba(13,148,136,.3);
}
.mc-empty-cta:hover { opacity: .88; color: #fff; text-decoration: none; }

/* -- Pagination -- */
.mc-pagination { margin-top: 10px; text-align: center; }

/* -- Responsive -- */
@media (max-width: 991px) {
   .mc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
   .mc-page-header { flex-direction: column; align-items: flex-start; }
   .mc-btn-create { width: 100%; justify-content: center; }
   .mc-header-text h1 { font-size: 22px; }
   .mc-summary-bar { gap: 16px; padding: 16px 10px; }
   .mc-stat-item { padding: 0 16px; }
   .mc-stat-divider { display: none; }
   .mc-card-actions { flex-wrap: wrap; }
   .mc-btn { padding: 10px 8px; font-size: 12px; }
   .mc-card-top { flex-wrap: wrap; }
   .mc-card-badges { flex-direction: row; }
}
@media (max-width: 480px) {
   .mc-stats-grid { grid-template-columns: repeat(2, 1fr); }
   .mc-stat:nth-child(2n) { border-right: none; }
   .mc-stat:nth-child(n+5) { border-bottom: none; }
   .mc-stat:nth-child(3) { border-right: 1px solid #f0f0f0; }
   .mc-card-footer-info { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ============================================
   END MY COURSES PAGE REDESIGN
   ============================================ */

/* ============================================
   MY VIDEOS (mv-) PAGE REDESIGN
   List layout optimized for hundreds of entries
   Color palette: Teal (#14B8A6 / #0D9488)
   ============================================ */

/* -- Page Layout -- */
.mv-page { padding: 20px 15px 40px; }
.mv-page-header {
   display: flex; align-items: center; justify-content: space-between;
   flex-wrap: wrap; gap: 16px; margin-bottom: 24px;
}
.mv-header-content { display: flex; align-items: center; gap: 18px; }
.mv-header-icon {
   width: 56px; height: 56px; border-radius: 14px;
   background: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%);
   display: flex; align-items: center; justify-content: center;
   font-size: 26px; color: #fff; flex-shrink: 0;
}
.mv-header-text h1 { font-size: 26px; font-weight: 700; color: #1a1a2e; margin: 0 0 2px; }
.mv-subtitle { font-size: 14px; color: #666; margin: 0; }
.mv-subtitle strong { color: #0D9488; }
.mv-btn-upload {
   display: inline-flex; align-items: center; gap: 8px;
   padding: 10px 24px; border-radius: 8px;
   background: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%);
   color: #fff; font-size: 14px; font-weight: 600;
   transition: opacity .2s; box-shadow: 0 4px 14px rgba(13,148,136,.3);
}
.mv-btn-upload:hover { opacity: .88; color: #fff; text-decoration: none; }

/* -- Summary Stats Bar -- */
.mv-summary-bar {
   display: flex; align-items: center; justify-content: center; gap: 0;
   background: #fff; border-radius: 12px; padding: 20px 10px;
   box-shadow: 0 2px 12px rgba(0,0,0,.06); margin-bottom: 24px;
   flex-wrap: wrap;
}
.mv-summary-bar.hide { display: none; }
.mv-stat-item { text-align: center; padding: 0 28px; }
.mv-stat-value {
   display: block; font-size: 24px; font-weight: 800;
   color: #1a1a2e; line-height: 1.2;
}
.mv-stat-label { font-size: 12px; color: #888; font-weight: 500; text-transform: uppercase; letter-spacing: .5px; }
.mv-stat-divider { width: 1px; height: 36px; background: #e8e8e8; flex-shrink: 0; }

/* -- Controls Bar -- */
.mv-controls {
   display: flex; align-items: center; gap: 12px;
   margin-bottom: 20px; flex-wrap: wrap;
}
.mv-controls.hide { display: none; }
.mv-search-wrap {
   position: relative; flex: 1; min-width: 200px;
}
.mv-search-icon {
   position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
   color: #aaa; font-size: 14px; pointer-events: none;
}
.mv-search-input {
   width: 100%; padding: 10px 14px 10px 40px; border: 1px solid #e0e0e0;
   border-radius: 8px; font-size: 14px; background: #fff;
   transition: border-color .2s, box-shadow .2s; outline: none;
}
.mv-search-input:focus { border-color: #FFC107; box-shadow: 0 0 0 3px rgba(255,193,7,0.12); }
.mv-filter-group { display: flex; gap: 10px; flex-shrink: 0; }
.mv-select-wrap { position: relative; }
.mv-select {
   padding: 10px 36px 10px 14px; border: 1px solid #e0e0e0;
   border-radius: 8px; font-size: 13px; background: #fff;
   appearance: none; -webkit-appearance: none; -moz-appearance: none;
   cursor: pointer; outline: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
   background-repeat: no-repeat; background-position: right 12px center;
   transition: border-color .2s;
}
.mv-select:focus { border-color: #FFC107; box-shadow: 0 0 0 3px rgba(255,193,7,0.12); }

/* -- Video List Container -- */
.mv-list {
   background: #fff; border-radius: 12px;
   box-shadow: 0 2px 12px rgba(0,0,0,.06);
   overflow: hidden;
}

/* -- Individual Video Row -- */
.mv-row {
   display: flex; align-items: center; gap: 16px;
   padding: 16px 20px;
   border-bottom: 1px solid #f0f0f0;
   transition: background .15s;
}
.mv-row:last-child { border-bottom: none; }
.mv-row:hover { background: #f9fffe; }

/* -- Thumbnail -- */
.mv-thumb-wrap {
   position: relative; flex-shrink: 0;
   width: 140px; height: 79px; border-radius: 8px;
   overflow: hidden; background: #f0f0f0;
   display: block;
}
.mv-thumb-img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.mv-row:hover .mv-thumb-img { transform: scale(1.04); }
.mv-duration-badge {
   position: absolute; bottom: 6px; right: 6px;
   background: rgba(0,0,0,.78); color: #fff;
   font-size: 11px; font-weight: 600; padding: 2px 6px;
   border-radius: 4px; letter-spacing: .3px;
}

/* -- Info Column -- */
.mv-info { flex: 1; min-width: 0; }
.mv-title {
   font-size: 15px; font-weight: 700; margin: 0 0 4px;
   line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mv-title a { color: #1a1a2e; }
.mv-title a:hover { color: #0D9488; text-decoration: none; }
.mv-meta-row {
   font-size: 12px; color: #888; display: flex; align-items: center;
   gap: 6px; margin-bottom: 4px; flex-wrap: wrap;
}
.mv-course-tag { color: #0D9488; font-weight: 600; }
.mv-course-tag i, .mv-module-tag i { margin-right: 3px; font-size: 10px; }
.mv-meta-sep { color: #ccc; }
.mv-desc {
   font-size: 12px; color: #999; margin: 0 0 4px; line-height: 1.4;
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mv-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.mv-tag {
   display: inline-flex; align-items: center; gap: 4px;
   padding: 2px 8px; border-radius: 4px;
   font-size: 11px; color: #777; background: #f5f5f5;
}
.mv-tag i { font-size: 9px; color: #aaa; }

/* -- Stats Columns -- */
.mv-stats-col {
   display: flex; gap: 16px; flex-shrink: 0; padding: 0 8px;
}
.mv-mini-stat { text-align: center; min-width: 52px; }
.mv-mini-num { display: block; font-size: 15px; font-weight: 700; color: #1a1a2e; line-height: 1.2; }
.mv-mini-lbl { font-size: 10px; color: #999; text-transform: uppercase; letter-spacing: .3px; }

/* -- Date Column -- */
.mv-date-col {
   flex-shrink: 0; font-size: 12px; color: #999;
   white-space: nowrap; min-width: 100px; text-align: center;
}
.mv-date-col i { color: #bbb; margin-right: 4px; }

/* -- Actions Column -- */
.mv-actions-col {
   display: flex; gap: 4px; flex-shrink: 0;
}
.mv-act {
   width: 34px; height: 34px; border-radius: 8px;
   display: flex; align-items: center; justify-content: center;
   font-size: 13px; transition: all .2s;
}
.mv-act:hover { text-decoration: none; }
.mv-act-view { color: #1565C0; }
.mv-act-view:hover { background: #E3F2FD; color: #1565C0; }
.mv-act-edit { color: #0D9488; }
.mv-act-edit:hover { background: #E6FAF7; color: #0D9488; }
.mv-act-delete { color: #ccc; }
.mv-act-delete:hover { background: #FFEBEE; color: #e74c3c; }

/* -- Empty State -- */
.mv-empty-state { text-align: center; padding: 80px 20px; }
.mv-empty-icon {
   width: 90px; height: 90px; border-radius: 50%;
   background: linear-gradient(135deg, #CCFBF1 0%, #99F6E4 100%);
   display: flex; align-items: center; justify-content: center;
   margin: 0 auto 24px; font-size: 40px; color: #14B8A6;
}
.mv-empty-title { font-size: 22px; font-weight: 700; color: #333; margin: 0 0 8px; }
.mv-empty-text { font-size: 15px; color: #888; margin: 0 0 28px; max-width: 420px; margin-left: auto; margin-right: auto; }
.mv-empty-cta {
   display: inline-flex; align-items: center; gap: 8px;
   padding: 12px 32px; border-radius: 8px;
   background: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%);
   color: #fff; font-size: 15px; font-weight: 600;
   transition: opacity .2s; box-shadow: 0 4px 14px rgba(13,148,136,.3);
}
.mv-empty-cta:hover { opacity: .88; color: #fff; text-decoration: none; }

/* -- Pagination -- */
.mv-pagination { margin-top: 10px; text-align: center; }

/* -- Responsive -- */
@media (max-width: 1199px) {
   .mv-desc { display: none; }
}
@media (max-width: 991px) {
   .mv-row { flex-wrap: wrap; gap: 12px; }
   .mv-info { min-width: calc(100% - 160px); }
   .mv-stats-col { width: 100%; justify-content: flex-start; gap: 24px; padding: 0; }
   .mv-date-col { text-align: left; }
   .mv-tags { display: none; }
}
@media (max-width: 767px) {
   .mv-page-header { flex-direction: column; align-items: flex-start; }
   .mv-btn-upload { width: 100%; justify-content: center; }
   .mv-header-text h1 { font-size: 22px; }
   .mv-summary-bar { gap: 16px; padding: 16px 10px; }
   .mv-stat-item { padding: 0 16px; }
   .mv-stat-divider { display: none; }
   .mv-controls { flex-direction: column; }
   .mv-search-wrap { width: 100%; }
   .mv-filter-group { width: 100%; }
   .mv-select { flex: 1; width: 100%; }
   .mv-thumb-wrap { width: 110px; height: 62px; }
   .mv-row { padding: 12px 14px; }
}
@media (max-width: 480px) {
   .mv-stats-col { gap: 14px; }
   .mv-mini-stat { min-width: 40px; }
   .mv-date-col { display: none; }
   .mv-info { min-width: calc(100% - 130px); }
}

/* ============================================
   END MY VIDEOS PAGE REDESIGN
   ============================================ */

.my-channels-main .box-btns li .small-black-btn, .my-channels-main .box-btns li .small-gray-btn, .my-channels-main.box-btns li .small-border-btn { white-space:normal; word-wrap:break-word;}
.channel-disc .profile-img { width:70px; height:70px;}
.channel-disc .user-row { padding:4px 0 0 85px; margin-bottom:10px; min-height:71px;}
.channel-disc .user-row h4 { font-weight:700;}

/*===========Change Languages==========*/

/*-----------------Tamil--------------*/
body.lang_ta, .lang_ta .dropdown-menu, .lang_ta .user_name, .lang_ta .left_menu_list li a .menu_text {font-size:11px;}
.lang_ta .box-content h3, .lang_ta .category-box h3 {font-size:14px;}
.lang_ta .category-box h5, .lang_ta input.form-control, .lang_ta  textarea.form-control, .lang_ta  .bootstrap-select.form-control {font-size:12px;}
.lang_ta footer ul li a, .lang_ta footer ul li a:hover, .lang_ta footer ul li a:focus {font-size:11px;}
.lang_ta .language-menu .bootstrap-select .dropdown-toggle .filter-option-inner {font-size:11px;}
.lang_ta .section-title h2 {font-size:16px;}
.lang_ta .box-btns li .small-black-btn, .lang_ta .box-btns li .small-gray-btn, .lang_ta .box-btns li .small-border-btn {font-size:9px;}
.lang_ta .user-disc p {font-size:12px;}
.lang_ta .gray-label {font-size:10px;}
.lang_ta .common-label {font-size:10px;}
.lang_ta .large-btn, .lang_ta .cancel-btn, .lang_ta .loginwithfacebook {font-size:14px;}
.lang_ta .page-title {font-size:16px;}
.lang_ta .upload-right h4, .lang_ta .list-noti li h4 {font-size:14px;}
.lang_ta .upload-right h5, .lang_ta .account-setting-main h4 {font-size:12px;}
.lang_ta .table-view-main .table-view .th {font-size:12px;}
.lang_ta .table-view-main .table-view .td, .lang_ta .status-inner, .lang_ta .notification-row li p, .lang_ta  .channel-name {font-size:12px;}
.lang_ta .white-label {font-size:10px;}
.lang_ta .box-bottom p, .lang_ta .box-content p {font-size:10px;}
.lang_ta .channel-info .user-row h1 {font-size:15px;}
.lang_ta .channel-info .user-row h4 {font-size:12px;}
.lang_ta .banner-btn {font-size:11px; padding:11px 10px;}
.lang_ta .channel-right-block h2 {font-size:14px;}
.lang_ta .panel-title a {font-size:13px;}
.lang_ta .video-cell h3, .lang_ta .box-list li, .lang_ta .bootstrap-select .dropdown-toggle .filter-option-inner {font-size:12px;}
.lang_ta .medium-btn {font-size:11px;}
.lang_ta .sub-title {font-size:14px;}
.lang_ta .video-detail-main .box-content h3 a {font-size:11px;}
.lang_ta .form-penal h1 {font-size:18px;}
.lang_ta .content-center h2 {font-size:22px;}
.lang_ta .white-btn, .lang_ta .or-break {font-size:14px;}
.lang_ta .footer-menu li a {font-size:10px;}
.lang_ta .forgot-link {font-size:11px;}
.lang_ta .drag-upload .alert-error, .lang_ta .common-link {font-size:11px;}
.lang_ta .small-btn-custom {font-size:11px;}
.lang_ta .statick-pages {font-size:14px;}
.lang_kn .navbar-form input.form-control { width:325px;}
.padding-zero{
    padding: 0px !important;
}



/* Responisve CSS Starts */

@media (min-width: 768px) {
.mobile_serch_box {display: none;}
.search-sec .search_channels{padding-left: 0px;padding-right: 0px;}
}

@media (min-width: 992px) {
.navbar-collapse {position: absolute; right: 0;}
/* header .navbar-default {padding-right: 515px;} */
.navbar-header {width: 100%;}
}
/* @media (max-width: 1199px) {
.left_menu_list li a, .left_menu_list li a:hover, .left_menu_list li a:focus {padding-left:40px;}
.left_menu_list li a .menu_icon {width:36px; font-size:18px;}
.left_menu_list li a .menu_text {font-size:12px; padding-right:10px;}
.left_menu_toggle {width:40px; padding:10px;}
.main_content {padding-left:40px;}
header .navbar-default {margin-left:40px;}
} */

@media (max-width: 1024px) {
.navbar-form input.form-control {width: 260px;}
.navbar-default .navbar-nav > li > a.header_btn {margin: 10px;}
.navbar-form.navbar-right {margin-right: 10px;}
.category-box h3 {font-size:15px;}
.video-detail-main .main-video-panel {height:500px;}
}

@media (max-width: 991px) {
.navbar-toggle {display: inline-block; float: right; margin-right: 0; margin-top: 12px; margin-left: 15px;}
.navbar-header {width: 100%;}
/* .navbar-form.navbar-right {display: inline-block; width: 220px; float: right;} */
.navbar-form input.form-control {width: 100%;}
.nav .header_btn_list {width: 50%; display: inline-block; padding: 0 10px; clear: none; float: left; text-align: center;}
.dashboard_dropdown {clear: both; margin-right: 20px; margin-left: 20px; right: 0; background: #f7f7f7;}
/* .navbar-nav .dashboard_dropdown .dropdown-menu {position: static; float: none; width: auto; margin-top: 0; background-color: transparent; border: 0; -webkit-box-shadow: none; box-shadow:none; height: auto; display: block; } */
/* .navbar-nav .dashboard_dropdown.open .dropdown-menu>li>a {color: #333; padding: 3px 20px;} */
/* .navbar-collapse {background: #fff; border-bottom: 1px solid #eaeaea; position: relative; top: -1px; z-index: 2;} */
.dashboard_dropdown a .fas {display: none;}
.form-penal .small-form {padding:0 15px;}
.footer-menu li {padding:0 5px;}
.common-space {margin:15% 3% !important;}

}

@media (max-width: 767px) {
.nav .header_btn_list {padding: 0; font-size: 12px;}
.mobile_serch_box {display: block; position: relative; margin: 15px 0 5px; padding: 0;}
.navbar-form.web_serch_box {display: none;}
.mobile_serch_box.navbar-form .search_btn {right:15px;}
.navbar-form input.form-control {height:40px; padding-right:35px;}
.dashboard_dropdown {margin:0 10px;}
.main_content {padding-left: 0 !important;}
.form-penal, .content-penal {width:100%; height:auto; padding:15px;}
.content-center h2, .form-penal h1 {font-size:25px; margin:0 0 10px;}
.content-center, .form-penal .small-form {position:static; top:0%;transform: translate(0,0);-ms-transform: translate(0,0);-o-transform: translate(0,0);}
.footer-second {position:static; margin-top:15px;}
.form-main {overflow:auto;}
.small-form .text-right {text-align:left;}
.content-center {padding:0; max-height:inherit;}
.section-title h2 {font-size:16px; margin-bottom:5px;}
.btn-right {text-align:left; margin-bottom:10px;}
.box-content h3 {font-size:15px; margin-bottom:10px;}
.capch-bx {display:block; overflow:auto;}
.common-label {margin-bottom:8px; font-size:14px;}
.form-group {margin-bottom:15px;}
.common-space {padding:15px 0 15px;}
.page-title {font-size:16px; margin:5px 0 20px;}
.large-btn, .cancel-btn, .white-btn {font-size:15px; padding:10px 15px;}
.cancel-btn { padding:8px 15px;}
.right_content {padding-bottom:128px;}
.notification-row li {margin-bottom:15px;}
.notification-row li p {font-size:14px; font-weight:400;}
.email-notify-bx {margin:10px 0;}
.notification-row {margin-bottom:20px;}
.mb-30 {margin-bottom:15px;}
.box-btns-three li, .box-btns li:first-child, .box-btns li:last-child {padding:0 0 5px; width:100%;}
/*.top-over, .bottom-over {position: relative; text-align:left; bottom:0;}*/
.search-block .bootstrap-select.form-control .dropdown-toggle .filter-option {padding:0;}
.reset_btn {margin-top:0;}
.label-right {text-align:left;}
.user-row {padding-left:0; text-align:center;}
.channel-info {padding:10px;}
.profile-img {position:static; display:block; margin:0 auto;}
.user-row h1 {font-size:16px; padding-right:25px; padding-left:25px; margin-top:15px;}
.user-row h1 .pro-icon {width:20px; height:20px; line-height:17px; font-size:12px;}
.channel-info {position:static;}
.banner-btn {font-size:14px; padding:6px 11px; min-width:inherit;}
.channel-right {text-align:center; margin-top:10px;}
.profile-block {padding:15px; margin:15px 0;}
.category-main, .popular-channel { padding:10px 0;}
.user-info li {padding-right:0; padding-left:25px; display:block; margin-bottom:10px;word-wrap: break-word;}
.user-info li:last-child {margin-bottom:0;}
.pro-info {position:static;}
.edit-link {text-align:center; margin-top:15px;}
.feed-img {width:30px; height:30px;}
.feedback-top {padding-left:40px;min-height:30px; margin-bottom:5px;}
.feedback-cell h4 {font-size:16px;}
.feedback-cell p {font-size:14px; line-height:19px;}
.table-view-main .table-view {border:none; background-color:transparent;}
.table-view-main .table-view .thead {display:none;}
.table-view-main .table-view .table, .table-view-main .table-view .tbody, .table-view-main .table-view .th,   .table-view-main .table-view .td, .table-view-main .table-view .tr {display:block; background-color:#fff;}
.table-view-main .table-view .thead .tr {position:absolute; top:-9999px; left:-9999px;}
.table-view-main .table-view .tbody {border:#ccc solid 1px; margin-bottom:15px; border-top:none;}
.table-view-main .table-view .td {position:relative; white-space: normal; padding:8px; }
.table-view-main .table-view .td:before {position: relative; width:100%; display:block;color:#333333; margin-bottom:10px; font-weight:700;content:attr(data-title); margin-bottom:5px;}
.pro-info {padding:0 5px;}
.profile-banner {padding:15px 5px; min-height:inherit; margin:0;}
.user-info {margin-top:10px; padding-top:10px;}
.user-info li .common-icon {font-size:18px; top:-2px;}
.space-10 {padding:10px 5px;}
.video-cell { padding-left:60px;}
.status-inner { display:block; margin-bottom:7px;}
.modal-footer .cancel-btn, .modal-footer .large-btn { min-width:110px;}
.gray-label {margin-right:2px;}
.search-block input.form-control, .search-block .bootstrap-select.form-control {height:35px;}
.search-block .srp-btn {top:0; right:0;}
.video-detail-main .main-video-panel .bottom-over {bottom:-8px;}
footer {padding:5px 10px; left: 0;}
.main_content.active footer {left:0 !important;}
.container-fluid > .navbar-header {margin-left:0; margin-right:0;}
.navbar-brand {padding-left:0;}
.owl-nav {display:none;}
.srp-dropdown .dropdown-toggle {height:40px; line-height:40px;}
.title-right {text-align:left; margin:10px 0;}
.block-2 .box-content {padding-top:10px;}
.horizontal-box {margin-bottom:15px;}
.user-disc p {font-size:14px; line-height:18px;}
.news_letter {margin:7px 0 0; float:none;}
.language-menu { float:none;}
.error_class .go_back_section {bottom:0;}
.upload-right {display:block; height:auto; padding-top:10px; width:100%;}
.search-block .bootstrap-select.form-control .dropdown-toggle .caret {top: 4px; right:0px;}
input.form-control, textarea.form-control, .bootstrap-select.form-control, .bootstrap-select .dropdown-toggle .filter-option-inner {font-size:14px;}
footer ul li { margin:0 5px 0 0;}
footer ul li a, footer ul li a:hover, footer ul li a:focus { font-size:13px;}
.breadcrumb > li { font-size:12px;}
.common-space {margin:30% 5% !important;}

}

/* --- Header Responsive --- */
@media (max-width: 768px) {
  .hdr-center { max-width: 100%; }
  .hdr-right .hdr-btn span { display: none; }
  .hdr-btn { padding: 7px 12px; font-size: 12px; }
  .hdr-search-input { font-size: 13px; }
}
@media (max-width: 576px) {
  header .navbar-container { padding: 0 8px; gap: 8px; }
  .hdr-logo img { height: 16px; }
  .hdr-right { gap: 4px; }
  .hdr-btn { padding: 6px 10px; font-size: 11px; }
  .hdr-btn-ghost { display: none; }
  .hdr-search-wrap { height: 36px; }
  .hdr-search-icon { display: none; }
  .hdr-search-wrap { padding-left: 12px; }
  .hdr-user-name { display: none; }
  .hdr-user-caret { display: none; }
  .hdr-user-toggle { padding: 4px; }
}

@media (max-width: 480px) {
.nav .header_btn_list {width: 100%;}
.navbar-default .navbar-nav .header_btn_list:first-child a {margin: 0 10px;}
.language-menu {float:none; margin-top:5px;display: inline-block; min-width:100%;}
.common-space {margin:30% 5% !important;}

}
.search-sec .search_channels{
    padding-left: 40px;
    padding-right: 40px;
}

.active-nav-link a {
    background: #FFF8E1 !important;
}
.active-nav-link a .menu_icon {
    color: #F9A825 !important;
}
.active-nav-link a .menu_text {
    color: #333 !important;
    font-weight: 600 !important;
}
@font-face {
    font-family: "Posterama 1927";
    src: url("/fonts/Posterama/bf8e6666252f4d6e781c1afacd6fb995.eot"); /* IE9*/
    src: url("/fonts/Posterama/bf8e6666252f4d6e781c1afacd6fb995.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("/fonts/Posterama/bf8e6666252f4d6e781c1afacd6fb995.woff2") format("woff2"), /* chrome、firefox */
    url("/fonts/Posterama/bf8e6666252f4d6e781c1afacd6fb995.woff") format("woff"), /* chrome、firefox */
    url("/fonts/Posterama/bf8e6666252f4d6e781c1afacd6fb995.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url("/fonts/Posterama/bf8e6666252f4d6e781c1afacd6fb995.svg#Posterama 1927") format("svg"); /* iOS 4.1- */
}
.site-name-logo{
    max-width: none !important;
    padding: 0px 10px !important;
    font-family:"Posterama 1927" !important;
    top: 0px !important;
    font-size: 30px !important;
    color:#333;
}
.terms-text{
    font-size: 13px;
    color: #777;
}
video{
    cursor: pointer!important;
}
/* =============================================
   SHARE POPUP — Modern Design
   ============================================= */
.share-popup {
  border: none;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
}

.share-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: none;
  background: #fff;
}

.share-popup-header h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #1A1A1A;
}

.share-popup-close {
  background: none;
  border: none;
  font-size: 18px;
  color: #bbb;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  transition: color 0.2s ease;
}

.share-popup-close:hover {
  color: #333;
}

.share-popup-body {
  padding: 24px 28px 20px;
  background: #fff;
}

/* --- Social Icons Row --- */
.share-icons-row {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 24px;
}

.share-icon-btn {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f0f0f0;
  color: #555;
  font-size: 22px;
  text-decoration: none !important;
  transition: all 0.3s ease;
}

.share-icon-btn:hover {
  transform: scale(1.12);
  color: #fff;
}

/* Brand hover fills */
.share-fb:hover  { background: #1877F2; color: #fff; }
.share-tw:hover  { background: #000;    color: #fff; }
.share-ln:hover  { background: #0A66C2; color: #fff; }
.share-wa:hover  { background: #25D366; color: #fff; }
.share-em:hover  { background: #FFC107; color: #1A1A1A; }

/* --- Embed Section --- */
.share-embed-section {
  border-top: 1px solid #f0f0f0;
  padding-top: 12px;
}

.share-embed-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #888;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.2s ease;
}

.share-embed-toggle:hover {
  color: #333;
}

.share-embed-chevron {
  margin-left: auto;
  font-size: 11px;
  transition: transform 0.3s ease;
}

.share-embed-content {
  margin-top: 10px;
}

.share-embed-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 12px;
  font-family: monospace;
  color: #555;
  background: #fafafa;
  resize: vertical;
  outline: none;
}

.share-embed-textarea:focus {
  border-color: #FFC107;
  box-shadow: 0 0 0 3px rgba(255,193,7,0.1);
}

.share-embed-copy {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 20px;
  background: #FFC107;
  color: #1A1A1A;
  border: none;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.share-embed-copy:hover {
  background: #FFB300;
}

/* Share popup responsive */
@media (max-width: 480px) {
  .share-icons-row {
    gap: 12px;
  }
  .share-icon-btn {
    width: 44px;
    height: 44px;
    font-size: 19px;
  }
  .share-popup-body {
    padding: 18px 16px 16px;
  }
}

.video-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.video-title-row h3 {
    margin: 0;
    flex: 1;
}

.video-detail-main .course-playlist-row {
    font-size: 13px !important;
    color: #777 !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    font-weight: 400 !important;
    letter-spacing: 0.3px !important;
}

.video-detail-main .course-playlist-row a {
    color: #333 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    padding-bottom: 2px !important;
    border-bottom: 1px solid transparent !important;
}

.video-detail-main .course-playlist-row a:hover {
    color: #000 !important;
    border-bottom-color: #333 !important;
}

.video-detail-main .course-playlist-row .separator {
    color: #ddd !important;
    font-weight: 300 !important;
    margin: 0 3px !important;
}

.video-metadata {
    margin-bottom: 0px !important;
}

.video-metadata li {
    margin-bottom: 3px;
    padding: 2px 0 !important;
}

.video-metadata li a {
    color: inherit;
    text-decoration: none;
}

.video-metadata li a:hover {
    text-decoration: underline;
}

.owner-profile-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 8px;
    border: 1px solid #ddd;
}

/* ======================================================
   PROFILE PAGE REDESIGN - Dark Royal Blue / Charcoal / Yellow
   ====================================================== */

/* Profile page wrapper - prevent horizontal overflow */
.profile-page-wrap { overflow-x:hidden; }

/* Profile Header (replaces banner) */
.profile-header-dark { background:#0d1b2a; margin:0 -15px; padding:30px 30px 0; color:#e0e0e0; overflow:hidden; position:relative; }
.profile-header-dark::before { content:''; position:absolute; top:50%; left:50%; width:900px; height:900px; transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(74,20,140,0.45) 0%, rgba(74,20,140,0.25) 30%, rgba(13,27,42,0.5) 55%, rgba(28,28,30,0.6) 80%, transparent 100%); pointer-events:none; z-index:0; }
.profile-header-inner { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:15px; padding-bottom:20px; position:relative; z-index:1; }
.profile-header-left { display:flex; gap:20px; align-items:flex-start; flex:1; }
.profile-header-dark .profile-img { position:static !important; flex-shrink:0; width:100px; height:100px; border-radius:50%; border:3px solid #FFC107; display:block; background-color:#3a3a3c; overflow:hidden; margin:0; }
.profile-header-dark .profile-img img { border-radius:50%; width:100%; height:100%; object-fit:cover; }
.profile-header-info { flex:1; min-width:0; }
.profile-header-name { margin:0 0 4px; font-size:26px; font-weight:700; color:#fff; letter-spacing:0.5px; }
.profile-header-email { font-size:14px; color:#a0a0a0; margin:0 0 6px; }
.profile-header-email i { margin-right:5px; color:#FFC107; }
.profile-header-about { font-size:15px; color:#c0c0c0; line-height:1.5; max-height:48px; overflow:hidden; margin:0 0 8px; }
.profile-header-subtitle { font-size:13px; color:#e0e0e0; margin:0 0 6px; }
.profile-header-subtitle i { margin-right:5px; color:#FFC107; font-size:12px; }
.profile-header-dark .profile-social-links { margin-top:8px; }
.profile-header-dark .profile-social-link { color:#FFC107; font-size:18px; margin-right:12px; opacity:0.85; transition:opacity 0.2s; display:inline-block; }
.profile-header-dark .profile-social-link:hover { opacity:1; color:#FFD54F; }
.profile-header-right { display:flex; gap:10px; flex-shrink:0; padding-top:10px; }
.profile-btn-outline { display:inline-block; padding:9px 18px; border:1px solid rgba(255,193,7,0.6); color:#FFC107; border-radius:8px; font-size:14px; font-weight:600; text-decoration:none; transition:all 0.25s; background:rgba(255,193,7,0.08); }
.profile-btn-outline:hover { background:#FFC107; color:#1c1c1e; border-color:#FFC107; text-decoration:none; }
.profile-btn-outline i { margin-right:5px; }
.profile-btn-accent { display:inline-block; padding:9px 18px; background:#FFC107; color:#1c1c1e; border-radius:8px; font-size:14px; font-weight:600; text-decoration:none; transition:all 0.25s; border:1px solid #FFC107; }
.profile-btn-accent:hover { background:#FFD54F; border-color:#FFD54F; color:#1c1c1e; text-decoration:none; }
.profile-btn-accent i { margin-right:5px; }

/* Profile Info Bar (inside header) */
.profile-info-bar { padding:15px 0; border-top:1px solid rgba(255,255,255,0.15); }
.profile-info-bar-inner { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.profile-stats-row { display:flex; flex-wrap:wrap; gap:8px; }
.profile-stat-badge { display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,0.08); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); padding:6px 14px; border-radius:20px; font-size:14px; color:#e0e0e0; font-weight:500; border:1px solid rgba(255,255,255,0.1); cursor:default; }
.profile-stat-badge i { color:#FFC107; }
.profile-interest-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:5px; }
.profile-interest-tag { display:inline-block; background:rgba(255,193,7,0.15); color:#FFC107; padding:5px 14px; border-radius:15px; font-size:14px; font-weight:500; border:1px solid rgba(255,193,7,0.25); }
.profile-interest-tag .remove-interest { cursor:pointer; margin-left:6px; opacity:0.6; color:#FFC107; }
.profile-interest-tag .remove-interest:hover { opacity:1; }

/* Profile Completion Bar */
.profile-completion-bar { margin-top:12px; }
.profile-completion-label { font-size:14px; color:#9e9e9e; margin-bottom:4px; }
.profile-completion-track { background:rgba(255,255,255,0.1); border-radius:10px; height:8px; overflow:hidden; }
.profile-completion-fill { background:linear-gradient(90deg,#FFC107,#FF9800); height:100%; border-radius:10px; transition:width 0.5s; }

/* Tab Navigation — Modern Redesign */
.profile-tabs-wrap { margin:0 -15px; background:#fff; border-bottom:1px solid #eee; position:relative; z-index:50; }
.profile-tabs { display:flex; flex-wrap:nowrap; overflow-x:auto; border-bottom:none; padding:0 15px; margin:0; gap:4px; -webkit-overflow-scrolling:touch; }
.profile-tabs .nav-item { flex-shrink:0; }
.profile-tabs > li > a { position:relative; display:inline-flex; align-items:center; gap:8px; padding:16px 22px; color:#999; font-size:13px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; border:none; border-radius:0; white-space:nowrap; transition:color 0.25s ease; background:transparent; }
.profile-tabs > li > a::after { content:''; position:absolute; bottom:0; left:20px; right:20px; height:3px; border-radius:3px 3px 0 0; background:#FFC107; transform:scaleX(0); transition:transform 0.3s cubic-bezier(0.4,0,0.2,1); }
.profile-tabs > li > a:hover { color:#1a1a1a; text-decoration:none; background:transparent; }
.profile-tabs > li > a:hover::after { transform:scaleX(1); }
.profile-tabs > li.active > a, .profile-tabs > li.active > a:hover, .profile-tabs > li.active > a:focus { color:#1a1a1a; font-weight:700; background:transparent; }
.profile-tabs > li.active > a::after { transform:scaleX(1); }
.profile-tabs > li > a > i { font-size:14px; color:inherit; transition:color 0.25s ease; }
.profile-tabs > li.active > a > i { color:#FFC107; }
.profile-tab-content { padding-top:24px; }
.profile-tab-content > .tab-pane { min-height:200px; }

/* Profile Cards (shared component) */
.profile-card { background:#fff; border-radius:12px; margin-bottom:24px; box-shadow:0 1px 3px rgba(0,0,0,0.06); overflow:hidden; border:1px solid #eee; transition:box-shadow 0.3s ease, transform 0.3s ease; }
.profile-card:hover { box-shadow:0 6px 20px rgba(0,0,0,0.09); transform:translateY(-1px); }
.profile-card-header { padding:20px 24px 0; }
.profile-card-header h5 { margin:0; font-size:16px; font-weight:700; color:#1a1a1a; letter-spacing:-0.2px; }
.profile-card-header h5 i { margin-right:8px; color:#FFC107; font-size:15px; }
.profile-card-body { padding:20px 24px; }

/* ======================================================
   OVERVIEW TAB — Modern Minimal Redesign
   ====================================================== */
.profile-overview-tab { padding:8px 0; }

/* --- Stats Strip --- */
.ov-stats-strip {
    display:flex; align-items:center; justify-content:center;
    background:#fff; border:1px solid #eee; border-radius:14px;
    padding:20px 0; margin-bottom:28px;
    box-shadow:0 1px 4px rgba(0,0,0,0.04);
}
.ov-stat {
    flex:1; text-align:center; padding:4px 12px;
    cursor:default; transition:transform 0.2s ease;
}
.ov-stat:hover { transform:scale(1.04); }
.ov-stat-num {
    display:block; font-size:28px; font-weight:900; color:#1a1a1a;
    line-height:1.15; letter-spacing:-0.5px;
}
.ov-stat-lbl {
    display:block; font-size:12px; font-weight:600; color:#999;
    text-transform:uppercase; letter-spacing:0.8px; margin-top:4px;
}
.ov-fire { color:#FFC107; font-size:11px; }
.ov-stat-divider {
    width:1px; height:40px; background:#eee; flex-shrink:0;
}

/* --- Shared Section Card --- */
.ov-section {
    background:#fff; border:1px solid #eee; border-radius:14px;
    margin-bottom:28px; overflow:hidden;
    box-shadow:0 1px 4px rgba(0,0,0,0.04);
    transition:box-shadow 0.3s ease, transform 0.3s ease;
}
.ov-section:hover { box-shadow:0 6px 20px rgba(0,0,0,0.08); transform:translateY(-1px); }
.ov-section-head {
    padding:18px 24px; border-bottom:1px solid #f5f5f5;
}
.ov-section-head h6 {
    margin:0; font-size:14px; font-weight:700; color:#1a1a1a;
    text-transform:uppercase; letter-spacing:0.6px;
}
.ov-section .activity-heatmap-wrap { padding:20px 24px 24px; }

/* --- Activity Heatmap --- */
.activity-heatmap-wrap { padding:12px 0; }
.heatmap-grid-container { overflow-x:auto; padding-bottom:4px; }
.heatmap-month-row { display:flex; gap:4px; margin-bottom:6px; }
.heatmap-month-cell {
    width:14px; flex-shrink:0; font-size:11px; color:#bbb; font-weight:600;
    letter-spacing:0.3px; text-transform:uppercase; white-space:nowrap;
    overflow:visible; line-height:1;
}
.heatmap-grid { display:flex; gap:4px; }
.heatmap-week { display:flex; flex-direction:column; gap:4px; }
.heatmap-day {
    width:14px; height:14px; border-radius:3px;
    transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.heatmap-day:hover { transform:scale(1.25); box-shadow:0 2px 8px rgba(0,0,0,0.18); z-index:2; position:relative; }
.heatmap-level-0 { background:#f0f0f0; }
.heatmap-level-1 { background:#FFE082; }
.heatmap-level-2 { background:#FFD54F; }
.heatmap-level-3 { background:#FFC107; }
.heatmap-level-4 { background:#FFA000; }
.heatmap-legend {
    display:flex; align-items:center; justify-content:center; gap:6px;
    font-size:11px; color:#bbb; font-weight:600; letter-spacing:0.3px;
    padding-top:16px; margin-top:8px; border-top:1px solid #f5f5f5;
}
.heatmap-legend span { text-transform:uppercase; }
.heatmap-legend div { display:flex; gap:3px; }
.heatmap-legend .heatmap-day { width:12px; height:12px; }
.heatmap-legend .heatmap-day:hover { transform:none; box-shadow:none; }

/* --- Heatmap + Activity Row --- */
.ov-heatmap-row {
    display:grid; grid-template-columns:1fr 320px; gap:24px;
    margin-bottom:28px;
}
.ov-heatmap-row .ov-section-heatmap { min-width:0; }
.ov-heatmap-row .ov-section-feed { min-width:0; }

/* --- Activity Feed --- */
.ov-feed-list { padding:8px 20px 16px; max-height:340px; overflow-y:auto; }
.ov-feed-list::-webkit-scrollbar { width:4px; }
.ov-feed-list::-webkit-scrollbar-thumb { background:#e0e0e0; border-radius:4px; }
.activity-feed-item {
    display:flex; align-items:center; padding:12px 0;
    border-bottom:1px solid #f5f5f5; transition:padding 0.2s ease;
}
.activity-feed-item:last-child { border-bottom:none; }
.activity-feed-item:hover { padding-left:6px; }
.activity-feed-icon {
    width:34px; height:34px; border-radius:10px;
    background:#FFF8E1; color:#FFA000;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; margin-right:14px; font-size:14px;
}
.activity-feed-body { flex:1; min-width:0; }
.activity-feed-text {
    font-size:14px; color:#333; font-weight:500; line-height:1.4;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; text-overflow:ellipsis;
}
.activity-feed-time { font-size:12px; color:#bbb; margin-top:2px; }

/* --- See All link in section heads --- */
.ov-see-all-link {
    font-size:12px; font-weight:600; color:#FFA000; text-decoration:none;
    text-transform:uppercase; letter-spacing:0.4px; transition:color 0.2s ease;
    display:inline-flex; align-items:center; gap:5px; flex-shrink:0;
}
.ov-see-all-link:hover { color:#FF8F00; text-decoration:none; }
.ov-see-all-link i { font-size:10px; transition:transform 0.2s ease; }
.ov-see-all-link:hover i { transform:translateX(3px); }

/* ======================================================
   ACTIVITY HISTORY PAGE
   ====================================================== */
.activity-history-page { max-width:800px; margin:0 auto; padding:8px 0 40px; }

.ah-header {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:32px; padding-bottom:20px; border-bottom:1px solid #eee;
}
.ah-header-left { display:flex; align-items:center; gap:16px; }
.ah-back-link {
    width:40px; height:40px; border-radius:12px; background:#f5f5f5;
    display:flex; align-items:center; justify-content:center;
    color:#333; font-size:16px; text-decoration:none; transition:all 0.2s ease;
}
.ah-back-link:hover { background:#FFF8E1; color:#FFA000; text-decoration:none; }
.ah-title { margin:0; font-size:22px; font-weight:800; color:#1a1a1a; letter-spacing:-0.3px; }
.ah-subtitle { margin:2px 0 0; font-size:13px; color:#999; font-weight:500; }

/* Timeline */
.ah-day-group { margin-bottom:28px; }
.ah-day-label {
    font-size:13px; font-weight:700; color:#1a1a1a; text-transform:uppercase;
    letter-spacing:0.5px; padding:0 0 10px; margin-bottom:0;
    border-bottom:2px solid #FFC107; display:inline-block;
}
.ah-day-list { padding-top:8px; }

.ah-item {
    display:flex; align-items:flex-start; gap:14px; padding:12px 0;
    border-bottom:1px solid #f8f8f8; transition:background 0.15s ease;
}
.ah-item:last-child { border-bottom:none; }
.ah-item:hover { background:#FFFDF5; margin:0 -12px; padding:12px; border-radius:8px; }

.ah-item-time {
    flex-shrink:0; width:70px; font-size:12px; color:#bbb;
    font-weight:600; padding-top:2px; text-align:right;
}
.ah-item-dot {
    flex-shrink:0; width:32px; height:32px; border-radius:10px;
    background:#FFF8E1; color:#FFA000;
    display:flex; align-items:center; justify-content:center;
    font-size:13px;
}
.ah-item-content { flex:1; min-width:0; }
.ah-item-text { font-size:14px; color:#333; font-weight:500; line-height:1.5; }
.ah-item-text a { color:#FFA000; text-decoration:none; font-weight:600; }
.ah-item-text a:hover { color:#FF8F00; text-decoration:underline; }
.ah-item-yc {
    display:inline-block; margin-top:4px; font-size:11px; font-weight:700;
    color:#FFA000; background:#FFF8E1; padding:2px 8px; border-radius:6px;
}

/* Load more */
.ah-load-more-wrap { text-align:center; padding:16px 0; }
.ah-load-more-btn {
    display:inline-block; padding:10px 32px; font-size:13px; font-weight:700;
    color:#1a1a1a; background:#fff; border:2px solid #eee; border-radius:10px;
    cursor:pointer; text-transform:uppercase; letter-spacing:0.4px;
    transition:all 0.2s ease;
}
.ah-load-more-btn:hover { border-color:#FFC107; color:#FFA000; }
.ah-load-more-btn:disabled { opacity:0.5; cursor:not-allowed; }

/* Empty state */
.ah-empty-state { text-align:center; padding:60px 20px; color:#ccc; }
.ah-empty-state i { font-size:48px; margin-bottom:16px; }
.ah-empty-state p { font-size:15px; color:#999; }

/* Responsive */
@media (max-width: 767px) {
    .activity-history-page { padding:4px 0 30px; }
    .ah-title { font-size:18px; }
    .ah-item-time { width:55px; font-size:11px; }
    .ah-item-dot { width:28px; height:28px; font-size:12px; border-radius:8px; }
    .ah-item { gap:10px; }
}

/* --- Weekly Report (expanded with setback) --- */
.ov-report-wrapper { padding:0 32px; margin-bottom:28px; }
.ov-report-wrapper .ov-section { margin-bottom:0; }
.ov-report-body { padding:16px 24px 20px; }
.ov-report-grid {
    display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;
}
.ov-report-stat {
    background:#fafafa; border-radius:10px; padding:16px 12px;
    text-align:center; border:1px solid #f0f0f0;
    transition:all 0.2s ease;
}
.ov-report-stat:hover { background:#fff; border-color:#FFD54F; box-shadow:0 2px 10px rgba(255,193,7,0.1); }
.ov-report-num { font-size:24px; font-weight:900; color:#1a1a1a; line-height:1.1; }
.ov-report-lbl { font-size:11px; font-weight:600; color:#aaa; text-transform:uppercase; letter-spacing:0.6px; margin-top:4px; }
.ov-report-period {
    text-align:center; font-size:12px; color:#bbb; margin-top:16px;
    padding-top:12px; border-top:1px solid #f5f5f5;
}

.ov-empty-state {
    text-align:center; color:#ccc; font-size:14px; padding:28px 16px;
    font-weight:500;
}

/* Mini stat cards */
.mini-stat-card { background:#fafafa; border-radius:12px; padding:16px; text-align:center; border:1px solid #f0f0f0; transition:all 0.25s ease; }
.mini-stat-card:hover { background:#fff; border-color:#FFD54F; box-shadow:0 4px 14px rgba(255,193,7,0.12); transform:translateY(-2px); }
.mini-stat-value { font-size:24px; font-weight:900; color:#1a1a1a; line-height:1.2; }
.mini-stat-label { font-size:12px; color:#aaa; margin-top:5px; font-weight:600; text-transform:uppercase; letter-spacing:0.4px; }

/* Progress bars */
.progress-track { background:#f0f0f0; border-radius:10px; height:10px; overflow:hidden; }
.progress-fill { height:100%; border-radius:10px; transition:width 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.progress-fill-purple { background:linear-gradient(90deg,#FFC107,#FFB300); }
.progress-fill-green { background:linear-gradient(90deg,#FFC107,#FF8F00); }

/* ===== Stats & Goals — Modern Redesign ===== */
.profile-stats-tab { padding:4px 0; }
.st-section { margin-bottom:28px; }
.st-section-title { font-size:15px; font-weight:700; color:#1a1a1a; margin:0 0 16px; display:flex; align-items:center; gap:8px; letter-spacing:-0.2px; }
.st-section-title i { color:#FFC107; font-size:14px; }

/* Stats grid — 6 cards in a row */
.st-stats-grid { display:grid; grid-template-columns:repeat(6, 1fr); gap:14px; }
.st-stat-card { background:#fff; border-radius:50%; width:130px; height:130px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border:1px solid #f0f0f0; box-shadow:0 2px 8px rgba(0,0,0,0.06); transition:all 0.3s ease; position:relative; margin:0 auto; }
.st-stat-card:hover { border-color:#FFD54F; box-shadow:0 8px 24px rgba(255,193,7,0.15); transform:translateY(-3px); }
.st-stat-icon { width:30px; height:30px; border-radius:50%; background:#FFF8E1; display:inline-flex; align-items:center; justify-content:center; margin-bottom:6px; }
.st-stat-icon i { font-size:13px; color:#FFA000; }
.st-stat-value { font-size:20px; font-weight:800; color:#1a1a1a; line-height:1.2; }
.st-stat-label { font-size:10px; color:#999; margin-top:2px; font-weight:600; text-transform:uppercase; letter-spacing:0.4px; }

/* Two-column layout */
.st-two-col { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:24px; }
.st-card { background:#fff; border-radius:14px; padding:22px 24px; border:1px solid #f0f0f0; transition:all 0.25s ease; }
.st-card:hover { border-color:#FFD54F; box-shadow:0 6px 20px rgba(255,193,7,0.08); }
.st-card-title { font-size:14px; font-weight:700; color:#1a1a1a; margin:0 0 16px; display:flex; align-items:center; gap:8px; }
.st-card-title i { color:#FFC107; font-size:13px; }

/* Progress bars */
.st-progress-labels { display:flex; justify-content:space-between; font-size:13px; color:#888; margin-bottom:6px; }
.st-progress-track { background:#f0f0f0; border-radius:10px; height:8px; overflow:hidden; }
.st-progress-fill { height:100%; border-radius:10px; transition:width 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.st-fill-amber { background:linear-gradient(90deg,#FFC107,#FFB300); }
.st-fill-orange { background:linear-gradient(90deg,#FFB300,#FF8F00); }
.st-progress-hint { text-align:center; margin-top:8px; font-size:13px; color:#999; }

/* Goal selector */
.st-goal-label { font-size:13px; color:#888; margin-right:6px; }
.st-goal-select { display:inline-block; width:auto; font-size:13px; padding:5px 10px; border:1px solid #e0e0e0; border-radius:8px; background:#fafafa; color:#333; outline:none; transition:border-color 0.2s; }
.st-goal-select:focus { border-color:#FFC107; outline:none; box-shadow: 0 0 0 3px rgba(255,193,7,0.12); }

/* League center */
.st-league-center { text-align:center; padding:6px 0; }
.st-medal-svg { width:160px; height:190px; display:block; margin:0 auto 8px; filter:drop-shadow(0 4px 12px rgba(0,0,0,0.15)); animation:medalFloat 4s ease-in-out infinite; }
.st-league-name { font-size:1.1rem; font-weight:800; letter-spacing:1px; text-transform:uppercase; margin-bottom:2px; }
.st-league-desc { color:#888; font-size:14px; margin:4px 0 0; }
@keyframes medalFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }

/* Rules link */
.st-rules-link { color:#FFA000; font-size:14px; font-weight:600; text-decoration:none; transition:color 0.2s; }
.st-rules-link:hover { color:#FF8F00; }

/* Stats responsive */
@media (max-width:991px) {
    .st-stats-grid { grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:767px) {
    .st-two-col { grid-template-columns:1fr; }
    .st-stats-grid { grid-template-columns:repeat(2, 1fr); }
}

/* YC summary grid inside card */
.st-yc-summary { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.st-yc-summary .st-stat-card { padding:14px 10px; border:1px solid #f0f0f0; }
.st-yc-summary .st-stat-value { font-size:20px; }

/* Leaderboard horizontal row */
.lb-boards-row { display:flex; gap:16px; overflow-x:auto; padding-bottom:8px; margin-bottom:24px; -webkit-overflow-scrolling:touch; }
.lb-boards-row::-webkit-scrollbar { height:6px; }
.lb-boards-row::-webkit-scrollbar-track { background:#f5f5f5; border-radius:3px; }
.lb-boards-row::-webkit-scrollbar-thumb { background:#ddd; border-radius:3px; }
.lb-boards-row::-webkit-scrollbar-thumb:hover { background:#ccc; }
.lb-board-card { min-width:220px; flex:1 0 220px; background:#fff; border-radius:14px; border:1px solid #f0f0f0; overflow:hidden; transition:all 0.25s ease; }
.lb-board-card:hover { border-color:#FFD54F; box-shadow:0 6px 20px rgba(255,193,7,0.10); }
.lb-board-header { padding:14px 16px 10px; font-size:13px; font-weight:700; color:#1a1a1a; text-transform:uppercase; letter-spacing:0.4px; border-bottom:1px solid #f0f0f0; }
.lb-board-header i { color:#FFC107; margin-right:6px; font-size:12px; }
.lb-board-body { padding:0; }
.lb-board-body table { width:100%; font-size:13px; }
.lb-board-body table td { padding:8px 10px; }
.lb-board-body table tr:last-child { border-bottom:none; }
@media (max-width:767px) {
    .lb-board-card { min-width:200px; flex:1 0 200px; }
}

/* ===== Stats & Goals — redesigned (stx-) ===== */
/* Daily-goal ring (shared: stats focal card + overview strip) */
.stx-goal-ring { position:relative; flex-shrink:0; }
.stx-goal-ring svg { display:block; }
.stx-goal-ring .stx-ring-pct { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:800; color:#1a1a1a; }
.stx-goal-ring .stx-ring-pct b { font-size:20px; line-height:1; }
.stx-goal-ring .stx-ring-pct small { font-size:11px; font-weight:700; color:#b5952f; }

/* Focal goal card */
.stx-goal-card { display:flex; align-items:center; gap:24px; background:linear-gradient(135deg,#FFFDF5,#FFF6DD); border:1px solid #FFE9A8; border-radius:16px; padding:20px 24px; margin-bottom:28px; flex-wrap:wrap; }
.stx-goal-main { flex:1; min-width:240px; }
.stx-goal-head { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.stx-goal-head h5 { font-size:16px; font-weight:800; color:#1a1a1a; margin:0; }
.stx-goal-today { font-size:13px; color:#7a6a3a; }
.stx-goal-today b { font-size:15px; color:#1a1a1a; font-weight:800; }
.stx-goal-met { color:#43A047; font-weight:700; margin-left:8px; }
.stx-goal-sub { font-size:13px; color:#9a8a5a; margin:4px 0 14px; }
.stx-goal-tiers { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.stx-tier { cursor:pointer; text-align:center; padding:12px 6px; border-radius:12px; border:1px solid #eee; background:#fff; transition:all 0.15s ease; }
.stx-tier:hover { border-color:#FFD54F; }
.stx-tier.active { border:2px solid #FFC107; background:rgba(255,193,7,0.12); box-shadow:0 2px 10px rgba(255,193,7,0.18); }
.stx-tier:disabled { cursor:default; }
.stx-tier i { font-size:17px; color:#c4c4c4; }
.stx-tier.active i { color:#FFA000; }
.stx-tier b { display:block; font-size:13px; font-weight:700; color:#1a1a1a; margin-top:4px; }
.stx-tier span { font-size:11px; color:#999; }

/* Stat groups + rectangular tiles */
.stx-group { margin-bottom:26px; }
.stx-group-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.stx-group-head h5 { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:0.7px; color:#777; margin:0; display:flex; align-items:center; gap:8px; }
.stx-group-head h5 i { color:#FFC107; font-size:12px; }
.stx-tiles { display:grid; gap:12px; }
.stx-tiles-3 { grid-template-columns:repeat(3,1fr); }
.stx-tiles-6 { grid-template-columns:repeat(6,1fr); }
.stx-tile { display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; background:#fff; border:1px solid #f0f0f0; border-radius:12px; padding:16px; transition:all 0.2s ease; }
.stx-tile:hover { border-color:#FFD54F; box-shadow:0 4px 14px rgba(255,193,7,0.10); transform:translateY(-2px); }
.stx-tile-ic { width:30px; height:30px; border-radius:9px; background:#FFF8E1; display:inline-flex; align-items:center; justify-content:center; }
.stx-tile-ic i { font-size:13px; color:#FFA000; }
.stx-tile-num { font-size:22px; font-weight:800; color:#1a1a1a; line-height:1; }
.stx-tile-lbl { font-size:12px; color:#999; }

/* Leaderboard — rank chips + board rows (reuses .lb-board-card shell) */
.stx-lb-more { font-size:13px; color:#FFA000; text-decoration:none; font-weight:600; white-space:nowrap; }
.stx-lb-more:hover { color:#FF8F00; }
.stx-lb-rankrow { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.stx-rank-chip { display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid #f0f0f0; border-radius:999px; padding:6px 14px; font-size:13px; color:#666; }
.stx-rank-chip i { color:#FFC107; }
.stx-rank-chip b { color:#1a1a1a; font-weight:800; }
.stx-rank-chip span { color:#bbb; }
.stx-lb-row { display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid #f5f5f5; }
.stx-lb-row.me { background:rgba(255,193,7,0.12); }
.stx-lb-row:last-child { border-bottom:none; }
.stx-lb-rank { width:24px; text-align:center; font-weight:800; font-size:13px; color:#999; }
.stx-lb-av { width:26px; height:26px; border-radius:50%; object-fit:cover; border:1px solid #eee; }
.stx-lb-name { flex:1; font-size:13px; color:#333; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stx-lb-name:hover { color:#FFA000; }
.stx-lb-val { font-size:13px; font-weight:800; color:#FFA000; white-space:nowrap; }
.stx-lb-val em { font-style:normal; font-weight:600; color:#c9a24a; font-size:11px; }
.stx-lb-empty { padding:14px 12px; font-size:13px; color:#aaa; text-align:center; }

/* Overview daily-goal strip */
.ov-goal-strip { display:flex; align-items:center; gap:16px; background:linear-gradient(135deg,#FFFDF5,#FFF6DD); border:1px solid #FFE9A8; border-radius:14px; padding:12px 18px; margin-bottom:16px; }
.ov-goal-info { flex:1; min-width:0; }
.ov-goal-title { font-size:14px; font-weight:800; color:#1a1a1a; }
.ov-goal-done { color:#43A047; font-weight:700; font-size:12px; margin-left:8px; }
.ov-goal-nums { font-size:13px; color:#7a6a3a; margin-top:2px; }
.ov-goal-nums b { color:#1a1a1a; font-weight:800; }
.ov-goal-change { background:#fff; border:1px solid #FFE9A8; color:#B5952F; font-size:12px; font-weight:700; border-radius:999px; padding:7px 14px; cursor:pointer; transition:all 0.15s ease; }
.ov-goal-change:hover { background:#FFC107; color:#1a1a1a; border-color:#FFC107; }

@media (max-width:900px) {
    .stx-tiles-6 { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:767px) {
    .stx-tiles-6, .stx-tiles-3 { grid-template-columns:repeat(2,1fr); }
    .stx-goal-tiers { grid-template-columns:repeat(2,1fr); }
    .stx-goal-card { gap:16px; }
}

/* ===== Tutor dashboard additions ===== */
.td-actions { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; }
.td-action-btn { display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:999px; border:1px solid #eee; background:#fff; color:#333; font-size:13px; font-weight:600; text-decoration:none; transition:all 0.15s ease; }
.td-action-btn:hover { border-color:#FFD54F; background:#FFFDF5; color:#333; }
.td-action-btn i { color:#FFA000; }
.td-action-primary { background:#1a1a1a; border-color:#1a1a1a; color:#FFD54F; }
.td-action-primary:hover { background:#333; border-color:#333; color:#FFD54F; }
.td-action-primary i { color:#FFD54F; }

/* Course card manage actions */
.cc-card-actions { display:flex; gap:8px; padding:10px 14px; border-top:1px solid #f0f0f0; }
.cc-action-btn { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:7px 10px; border-radius:8px; background:#FAFAFA; border:1px solid #f0f0f0; color:#555; font-size:12px; font-weight:600; text-decoration:none; transition:all 0.15s ease; }
.cc-action-btn:hover { background:#FFF8E1; border-color:#FFD54F; color:#B5952F; }
.cc-action-btn i { font-size:11px; }

/* Recent reviews */
.td-reviews { display:flex; flex-direction:column; gap:12px; }
.td-review { display:flex; gap:12px; background:#fff; border:1px solid #f0f0f0; border-radius:12px; padding:14px 16px; }
.td-review-av { width:38px; height:38px; border-radius:50%; object-fit:cover; border:1px solid #eee; flex-shrink:0; }
.td-review-body { flex:1; min-width:0; }
.td-review-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; }
.td-review-name { font-weight:700; color:#1a1a1a; }
.td-review-course { color:#888; }
.td-review-date { color:#bbb; margin-left:auto; font-size:12px; }
.td-review-text { font-size:14px; color:#444; margin:6px 0 0; line-height:1.5; }

/* Challenge create box */
.challenge-create-box { background:#fafafa; border-radius:12px; padding:16px; margin-bottom:15px; border:1px solid #f0f0f0; transition:all 0.25s ease; }
.challenge-create-box:hover { border-color:#FFD54F; background:#fff; box-shadow:0 2px 10px rgba(255,193,7,0.1); }
.challenge-create-box h6 { margin-bottom:10px; font-weight:700; color:#1a1a1a; font-size:14px; }
.btn-challenge-create { background:#1a1a1a; color:#FFD54F; width:100%; border:none; border-radius:8px; padding:10px; font-weight:700; font-size:14px; transition:all 0.2s ease; }
.btn-challenge-create:hover { background:#333; color:#FFD54F; }

/* Enrolled Course Cards */
.enrolled-courses-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:20px; }
.enrolled-course-card { border-radius:12px; overflow:hidden; background:#fff; border:1px solid #eee; transition:all 0.25s ease; }
.enrolled-course-card:hover { box-shadow:0 6px 20px rgba(0,0,0,0.08); transform:translateY(-2px); }
.enrolled-course-inner { display:block; text-decoration:none; color:inherit; }
.enrolled-course-inner:hover { text-decoration:none; color:inherit; }
.enrolled-course-img { position:relative; height:140px; overflow:hidden; background:#f5f5f5; display:flex; align-items:center; justify-content:center; }
.enrolled-course-img img { width:100%; height:100%; object-fit:cover; }
.enrolled-course-status { position:absolute; top:8px; right:8px; background:rgba(28,28,30,0.85); color:#ffd600; padding:3px 10px; border-radius:12px; font-size:13px; font-weight:500; }
.course-complete .enrolled-course-status { background:#1a237e; color:#ffd600; }
.course-saved .enrolled-course-status { background:rgba(28,28,30,0.85); color:#64B5F6; }
.enrolled-course-info { padding:12px 15px; }
.enrolled-course-name { font-size:16px; font-weight:600; margin:0 0 8px; color:#1c1c1e; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.enrolled-course-meta { display:flex; gap:12px; font-size:13px; color:#757575; margin-bottom:10px; }
.enrolled-course-meta i { margin-right:3px; }
.enrolled-course-progress { margin-top:5px; }
.enrolled-progress-text { font-size:13px; color:#666; margin-bottom:4px; }
.enrolled-progress-track { background:#f0f0f0; border-radius:8px; height:8px; overflow:hidden; box-shadow:inset 0 1px 2px rgba(0,0,0,0.05); }
.enrolled-progress-fill { background:linear-gradient(90deg,#FFC107,#FFB300); height:100%; border-radius:8px; transition:width 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.course-complete .enrolled-progress-fill { background:linear-gradient(90deg,#66BB6A,#43A047); }

/* My Learning Sections */
.ml-section { margin-bottom:30px; }
.ml-section-header { margin-bottom:16px; }

/*=============================================================
   COURSE DETAIL PAGE REDESIGN (cd-*)
================================================================*/
.cd-redesign { background:#f8f9fa; }
.cd-redesign .rgt-dtl-sec { padding:0; }

/* Hero — shorter height, overflow visible for card */
.cd-hero { background:linear-gradient(135deg,#1a237e 0%,#283593 50%,#303f9f 100%); color:#fff; padding:30px 0 60px; position:relative; overflow:hidden; }
.cd-hero-inner { max-width:1200px; margin:0 auto; padding:0 20px; position:relative; z-index:1; }

/* ---- Hero Floating Shapes ---- */
.cd-hero-shapes { position:absolute; top:0; left:0; right:0; bottom:0; overflow:hidden; pointer-events:none; z-index:0; }
.cd-shape { position:absolute; border-radius:50%; opacity:0; animation: cdShapeFloat 20s infinite ease-in-out; }
@keyframes cdShapeFloat {
    0%, 100% { transform:translateY(0px) rotate(0deg); }
    25% { transform:translateY(-12px) rotate(4deg); }
    50% { transform:translateY(0px) rotate(0deg); }
    75% { transform:translateY(8px) rotate(-3deg); }
}
.cd-shape-1 { width:180px; height:180px; background:rgba(255,255,255,0.08); top:-40px; right:6%; border-radius:50%; animation-delay:0s; opacity:1; }
.cd-shape-2 { width:100px; height:100px; background:rgba(255,255,255,0.06); bottom:10%; left:4%; border-radius:30% 70% 70% 30% / 30% 30% 70% 70%; animation-delay:-4s; opacity:1; }
.cd-shape-3 { width:60px; height:60px; background:rgba(255,255,255,0.1); top:30%; left:10%; border-radius:16px; transform:rotate(45deg); animation-delay:-8s; opacity:1; }
.cd-shape-4 { width:130px; height:130px; background:rgba(255,255,255,0.05); bottom:5%; right:3%; border-radius:40% 60% 60% 40% / 60% 40% 60% 40%; animation-delay:-12s; opacity:1; }
.cd-shape-5 { width:40px; height:40px; background:rgba(255,255,255,0.12); top:15%; left:28%; border-radius:50%; animation-delay:-16s; opacity:1; }
.cd-shape-6 { width:70px; height:70px; background:rgba(255,255,255,0.07); top:55%; left:18%; border-radius:50%; animation-delay:-2s; opacity:1; }
.cd-shape-7 { width:50px; height:50px; background:rgba(255,255,255,0.09); top:10%; right:22%; border-radius:12px; animation-delay:-6s; opacity:1; }
.cd-shape-8 { width:90px; height:90px; background:rgba(255,255,255,0.06); bottom:20%; right:14%; border-radius:50% 30% 50% 70%; animation-delay:-10s; opacity:1; }

/* Breadcrumb */
.cd-breadcrumb { list-style:none; display:flex; flex-wrap:wrap; padding:0; margin:0 0 16px; font-size:13px; }
.cd-breadcrumb li { color:rgba(255,255,255,0.7); }
.cd-breadcrumb li + li:before { content:">"; padding:0 8px; color:rgba(255,255,255,0.4); }
.cd-breadcrumb li a { color:rgba(255,255,255,0.85); text-decoration:none; }
.cd-breadcrumb li a:hover { color:#FFC107; }
.cd-breadcrumb li.active { color:rgba(255,255,255,0.5); }

/* Hero content (full width now, no grid) */
.cd-title { font-size:30px; font-weight:700; margin:0 0 10px; line-height:1.25; max-width:720px; }
.cd-desc { font-size:14px; line-height:1.6; color:rgba(255,255,255,0.82); margin:0 0 14px; max-height:90px; overflow:hidden; max-width:720px; }
.cd-meta-row { display:flex; flex-wrap:wrap; gap:10px 18px; margin-bottom:14px; }
.cd-meta { font-size:13px; color:rgba(255,255,255,0.8); display:flex; align-items:center; gap:6px; }
.cd-meta i { color:#FFC107; font-size:13px; }

/* Tutor mini */
.cd-tutor-mini { display:inline-flex; align-items:center; gap:10px; color:rgba(255,255,255,0.9); text-decoration:none; background:rgba(255,255,255,0.1); padding:7px 14px; border-radius:30px; transition:background 0.2s; }
.cd-tutor-mini:hover { background:rgba(255,255,255,0.2); color:#fff; text-decoration:none; }
.cd-tutor-mini img { width:32px; height:32px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,0.3); }
.cd-tutor-mini .fi { font-size:14px; margin-left:4px; }

/* ---- Two-column body ---- */
.cd-body { max-width:1200px; margin:0 auto; padding:0 20px; display:flex; gap:30px; align-items:flex-start; position:relative; }
.cd-body-left { flex:1; min-width:0; padding-top:24px; padding-bottom:40px; }
.cd-body-right { width:340px; flex-shrink:0; margin-top:-200px; position:sticky; top:20px; z-index:10; align-self:flex-start; max-height:calc(100vh - 40px); }

/* CTA Card */
.cd-cta-card { background:#fff; border-radius:12px; padding:24px; box-shadow:0 8px 32px rgba(0,0,0,0.13); }
.cd-cta-logo { text-align:center; margin-bottom:16px; }
.cd-cta-logo img { width:100%; max-height:180px; object-fit:cover; border-radius:8px; }

/* Progress */
.cd-progress-wrap { margin-bottom:16px; }
.cd-progress-label { display:flex; justify-content:space-between; font-size:13px; color:#555; margin-bottom:6px; }
.cd-progress-label strong { color:#1a237e; }
.cd-progress-bar { background:#e8eaf6; border-radius:8px; height:8px; overflow:hidden; }
.cd-progress-fill { background:linear-gradient(90deg,#FFC107,#FFB300); height:100%; border-radius:8px; transition:width 0.4s ease; }

/* Owner banner */
.cd-owner-banner { display:flex; align-items:center; gap:8px; background:#e8f5e9; border:1px solid #a5d6a7; color:#2e7d32; border-radius:8px; padding:10px 14px; font-size:13px; font-weight:600; margin-bottom:14px; }
.cd-owner-banner i { font-size:15px; }

/* CTA Buttons */
.cd-cta-buttons { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.cd-btn { display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 20px; border-radius:8px; font-size:15px; font-weight:600; text-decoration:none; transition:all 0.2s; cursor:pointer; border:none; text-align:center; }
.cd-btn-primary { background:#FFC107; color:#1a237e; }
.cd-btn-primary:hover { background:#FFB300; color:#1a237e; text-decoration:none; }
.cd-btn-outline { background:transparent; color:#1a237e; border:2px solid #1a237e; }
.cd-btn-outline:hover { background:#1a237e; color:#fff; text-decoration:none; }

/* Secondary actions */
.cd-secondary-actions { display:flex; flex-wrap:wrap; gap:8px; padding:14px 0 2px; border-top:1px solid #eee; }
.cd-action-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: #555;
    background: #f5f5f5; border: 1px solid #e0e0e0;
    border-radius: 20px; padding: 7px 16px;
    cursor: pointer; text-decoration: none;
    transition: all 0.2s; white-space: nowrap;
}
.cd-action-link:hover { background:#eef0fa; border-color:#1a237e; color:#1a237e; text-decoration:none; }
.cd-action-link i { font-size: 12px; }
.cd-action-link.cd-action-active { background:#e8f5e9; border-color:#4caf50; color:#2e7d32; }
.cd-action-link.cd-action-active:hover { background:#c8e6c9; }

/* Share row */
.cd-share-row { display:flex; align-items:center; gap:10px; padding-top:12px; border-top:1px solid #eee; }
.cd-share-label { font-size:13px; color:#888; }
.cd-share-row a { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#f5f5f5; color:#555; font-size:15px; transition:all 0.2s; text-decoration:none; }
.cd-share-row a:hover { transform:scale(1.1); }
.cd-share-row a[title="WhatsApp"]:hover { background:#25D366; color:#fff; }
.cd-share-row a[title="Facebook"]:hover { background:#1877F2; color:#fff; }
.cd-share-row a[title="Twitter"]:hover { background:#1DA1F2; color:#fff; }
.cd-share-row a[title="LinkedIn"]:hover { background:#0A66C2; color:#fff; }

/* Sections (inside left column now) */
.cd-section { padding:0 0 30px; }
.cd-section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:8px; }
.cd-section-header h2 { font-size:22px; font-weight:700; color:#1a237e; margin:0; }
.cd-section-header h2 i { margin-right:8px; color:#FFC107; }
.cd-section-meta { font-size:14px; color:#888; }

/* Accordion */
.cd-accordion { border:1px solid #e0e0e0; border-radius:12px; overflow:hidden; }
.cd-accordion .cd-panel { border:none; box-shadow:none; margin:0; border-radius:0; }
.cd-accordion .cd-panel + .cd-panel { border-top:1px solid #e8e8e8; }
.cd-panel-heading { padding:0; border:none; border-radius:0; background:none; }
.cd-panel-heading a { display:flex; align-items:center; gap:12px; padding:16px 20px; text-decoration:none; color:#333; font-weight:600; font-size:15px; background:#fafafa; transition:background 0.2s; }
.cd-panel-heading a:hover { background:#f0f0f0; text-decoration:none; }
.cd-panel-heading a[aria-expanded="true"] { background:#e8eaf6; }
.cd-section-num { font-size:12px; color:#fff; background:#1a237e; border-radius:4px; padding:2px 8px; font-weight:700; white-space:nowrap; }
.cd-playlist-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cd-playlist-meta { font-size:12px; color:#888; font-weight:400; white-space:nowrap; }
.cd-chevron { font-size:12px; color:#888; transition:transform 0.3s; margin-left:auto; }
.cd-panel-heading a[aria-expanded="true"] .cd-chevron { transform:rotate(180deg); }

/* Video list */
.cd-video-list { list-style:none; padding:0; margin:0; }
.cd-video-item { border-bottom:1px solid #f0f0f0; display:flex; align-items:center; }
.cd-video-item:last-child { border-bottom:none; }
.cd-video-link { display:flex; align-items:center; gap:12px; padding:12px 20px 12px 36px; text-decoration:none; color:#444; font-size:14px; transition:background 0.15s; flex:1; min-width:0; }
.cd-video-link:hover { background:#f5f5f5; text-decoration:none; color:#333; }
.cd-lesson-num { width:24px; font-size:12px; color:#aaa; text-align:center; flex-shrink:0; }
.cd-video-icon { width:20px; text-align:center; flex-shrink:0; color:#999; font-size:14px; }
.cd-video-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cd-video-duration { font-size:12px; color:#888; background:#f0f0f0; padding:2px 8px; border-radius:4px; white-space:nowrap; }
.cd-video-item.watched .cd-video-icon { color:#43A047; }
.cd-video-item.watched .cd-video-name { color:#888; }
.cd-video-edit { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; margin-right:10px; border-radius:6px; color:#888; font-size:12px; flex-shrink:0; transition:background 0.15s,color 0.15s; text-decoration:none; }
.cd-video-edit:hover { background:#fff3e0; color:#e65100; text-decoration:none; }
.cd-edit-link { padding:12px 16px 12px 0; color:#aaa; font-size:13px; text-decoration:none; }
.cd-edit-link:hover { color:#1a237e; }

/* Instructor Card */
.cd-instructor-card { display:flex; gap:24px; background:#fff; border-radius:12px; padding:24px; box-shadow:0 2px 12px rgba(0,0,0,0.06); }
.cd-instructor-avatar { flex-shrink:0; }
.cd-instructor-avatar img { width:100px; height:100px; border-radius:50%; object-fit:cover; border:3px solid #e8eaf6; }
.cd-instructor-info { flex:1; min-width:0; }
.cd-instructor-info h3 { font-size:20px; font-weight:700; margin:0 0 4px; color:#1a237e; }
.cd-instructor-info h3 a { color:inherit; text-decoration:none; }
.cd-instructor-info h3 a:hover { text-decoration:underline; }
.cd-instructor-info h3 .fi { font-size:16px; margin-left:6px; vertical-align:middle; }
.cd-instructor-role { font-size:14px; color:#888; margin:0 0 10px; }
.cd-instructor-stats { display:flex; gap:20px; margin-bottom:12px; }
.cd-instructor-stats span { font-size:14px; color:#555; display:flex; align-items:center; gap:6px; }
.cd-instructor-stats i { color:#FFC107; }
.cd-instructor-bio { font-size:14px; line-height:1.6; color:#666; margin:0; }

/* Course Cards Grid */
.cd-courses-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:16px; }
.cd-course-card { background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,0.06); transition:transform 0.2s, box-shadow 0.2s; text-decoration:none; color:#333; display:block; }
.cd-course-card:hover { transform:translateY(-3px); box-shadow:0 6px 20px rgba(0,0,0,0.1); text-decoration:none; color:#333; }
.cd-course-card-img { width:100%; height:130px; object-fit:cover; }
.cd-course-card-body { padding:12px; }
.cd-course-card-body h4 { font-size:14px; font-weight:600; margin:0 0 6px; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#1a237e; }
.cd-course-card-body p { font-size:13px; color:#888; margin:0; }
.cd-course-card-meta { display:flex; gap:12px; font-size:12px; color:#aaa; margin-top:6px; }

/* Bottom padding */
.cd-courses-section:last-child { padding-bottom:10px; }

/* ---- What You'll Learn / Prerequisites ---- */
.cd-learn-section, .cd-prereqs-section { background:#fff; border-radius:12px; padding:24px 28px; margin-bottom:24px; box-shadow:0 2px 12px rgba(0,0,0,0.06); border:1px solid #e8eaf6; overflow:visible; }
.cd-learn-section h2, .cd-prereqs-section h2 { font-size:20px; font-weight:700; color:#1a237e; margin:0 0 16px; display:flex; align-items:center; gap:10px; }
.cd-learn-section h2 i, .cd-prereqs-section h2 i { color:#FFC107; font-size:18px; }
.cd-learn-list, .cd-prereqs-list { list-style:none; padding:0; margin:0; columns:2; column-gap:24px; }
.cd-learn-list li, .cd-prereqs-list li { position:relative; padding:6px 0 6px 28px; font-size:14px; line-height:1.6; color:#444; break-inside:avoid; }
.cd-learn-list li i, .cd-prereqs-list li i { position:absolute; left:0; top:9px; font-size:14px; }
.cd-learn-list li i { color:#1a237e; }
.cd-prereqs-list li i { color:#FFC107; }

/* ======= Responsive ======= */
@media (max-width:991px) {
    .cd-body { flex-direction:column-reverse; gap:0; }
    .cd-body-right { width:100%; margin-top:0; position:static; padding:20px 0 0; }
    .cd-body-left { padding-top:20px; }
    .cd-cta-card { border-radius:12px; }
    .cd-title { font-size:24px; }
    .cd-instructor-card { flex-direction:column; align-items:center; text-align:center; }
    .cd-instructor-stats { justify-content:center; }
}
@media (max-width:767px) {
    .cd-hero { padding:20px 0 30px; }
    .cd-title { font-size:20px; }
    .cd-meta-row { gap:8px 12px; }
    .cd-section-header h2 { font-size:18px; }
    .cd-panel-heading a { padding:12px 14px; font-size:14px; }
    .cd-video-link { padding:10px 14px 10px 24px; font-size:13px; }
    .cd-courses-grid { grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:12px; }
    .cd-cta-buttons { flex-direction:column; }
    .cd-secondary-actions { justify-content:center; }
    .cd-share-row { justify-content:center; }
    .cd-learn-list, .cd-prereqs-list { columns:1; }
    .cd-learn-section, .cd-prereqs-section { padding:18px 16px; }
    .cd-star-input i { font-size:24px; }
    .cd-rating-number { font-size:32px; }
}
}
.ml-section-header h5 { font-size:17px; font-weight:600; color:#1a1a1a; margin:0; display:flex; align-items:center; gap:8px; }
.ml-section-header h5 i { color:#FFC107; font-size:16px; }
.ml-empty-state { text-align:center; padding:35px 20px; color:#999; background:#fafafa; border-radius:12px; border:1px dashed #ddd; }
.ml-empty-state i { font-size:2.5rem; margin-bottom:12px; display:block; color:#ccc; }
.ml-empty-state p { margin:0 0 12px; font-size:14px; }
.ml-empty-state .btn { margin-top:5px; }

/* Created Courses Grid */
.cc-courses-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:20px; }
.cc-course-card { position:relative; background:#fff; border-radius:14px; border:1px solid #f0f0f0; overflow:hidden; transition:all 0.25s ease; }
.cc-course-card:hover { border-color:#FFD54F; box-shadow:0 8px 24px rgba(255,193,7,0.12); transform:translateY(-2px); }
.cc-card-inner { display:block; text-decoration:none; color:inherit; }
.cc-card-inner:hover { text-decoration:none; color:inherit; }
.cc-card-img { position:relative; height:150px; overflow:hidden; background:#f5f5f5; }
.cc-card-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.3s ease; }
.cc-course-card:hover .cc-card-img img { transform:scale(1.04); }
.cc-card-lang { position:absolute; top:10px; left:10px; background:rgba(28,28,30,0.8); color:#fff; font-size:11px; font-weight:600; padding:3px 10px; border-radius:20px; letter-spacing:0.3px; }
.cc-card-info { padding:14px 16px 16px; }
.cc-card-name { font-size:15px; font-weight:700; margin:0 0 8px; color:#1a1a1a; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cc-card-rating { display:flex; align-items:center; gap:6px; font-size:12px; margin:-2px 0 10px; }
.cc-card-rating .fa-star, .cc-card-rating .fa-star-half-alt { font-size:12px; }
.cc-card-meta { display:flex; gap:12px; font-size:12px; color:#888; margin-bottom:10px; }
.cc-card-meta i { margin-right:3px; color:#FFC107; font-size:11px; }
.cc-card-stats { display:flex; gap:14px; font-size:12px; color:#666; padding-top:10px; border-top:1px solid #f5f5f5; }
.cc-card-stats span { display:flex; align-items:center; gap:4px; }
.cc-card-stats i { color:#bbb; font-size:11px; }
.cc-card-edit { position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.95); color:#FFA000; display:flex; align-items:center; justify-content:center; font-size:13px; box-shadow:0 2px 8px rgba(0,0,0,0.12); transition:all 0.2s ease; opacity:0; text-decoration:none; }
.cc-course-card:hover .cc-card-edit { opacity:1; }
.cc-card-edit:hover { background:#FFC107; color:#fff; text-decoration:none; transform:scale(1.1); }
.cc-create-btn { display:inline-block; background:#1a1a1a; color:#FFD54F; font-size:14px; font-weight:700; padding:12px 28px; border-radius:10px; text-decoration:none; transition:all 0.2s ease; }
.cc-create-btn:hover { background:#333; color:#FFD54F; text-decoration:none; transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,0.15); }
.cc-create-btn i { margin-right:6px; }

/* Certificates Grid */
.certificates-grid .row { margin:0 -10px; }

/* Profile rules link */
.profile-rules-link { color:#FFA000; font-size:14px; font-weight:600; text-decoration:none; transition:color 0.2s ease; }
.profile-rules-link:hover { color:#FF8F00; }

/* League badge */
.league-badge { font-size:3rem; margin-bottom:5px; }

/* ======================================================
   PROFILE RESPONSIVE
   ====================================================== */
@media (max-width: 991px) {
    .profile-header-inner { flex-direction:column; }
    .profile-header-right { width:100%; justify-content:flex-start; }
    .profile-tabs > li > a { padding:14px 16px; font-size:12px; letter-spacing:0.3px; }
    .profile-tabs > li > a > span { display:none; }
    .profile-tabs > li > a > i { font-size:18px; }
    .profile-tabs > li > a::after { left:14px; right:14px; }
    .ov-heatmap-row { grid-template-columns:1fr; gap:20px; }
    .ov-report-grid { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .profile-header-dark { padding:20px 15px 0; }
    .profile-header-left { flex-direction:column; align-items:center; text-align:center; }
    .profile-header-info { text-align:center; }
    .profile-header-dark .profile-social-links { justify-content:center; }
    .profile-header-right { justify-content:center; }
    .profile-header-dark .profile-img { width:80px; height:80px; position:static !important; }
    .profile-header-name { font-size:22px; }
    .profile-info-bar { padding:10px 0; }
    .profile-info-bar-inner { flex-direction:column; align-items:center; }
    .profile-stats-row { justify-content:center; }
    .profile-interest-row { justify-content:center; }
    .profile-stat-badge { font-size:13px; padding:4px 8px; }
    .profile-tabs-wrap { position:relative; }
    .profile-tabs > li > a { padding:12px 12px; }
    .profile-tabs > li > a::after { left:10px; right:10px; }
    .enrolled-courses-grid { grid-template-columns:1fr; }
    .profile-card-body { padding:12px 15px; }
    .profile-card-header { padding:12px 15px 0; }
    /* Overview responsive */
    .ov-stats-strip { flex-wrap:wrap; padding:12px 0; border-radius:12px; }
    .ov-stat { flex:0 0 50%; padding:10px 8px; }
    .ov-stat-num { font-size:22px; }
    .ov-stat-lbl { font-size:11px; }
    .ov-stat-divider { display:none; }
    .ov-section-head { padding:14px 18px; }
    .ov-section .activity-heatmap-wrap { padding:14px 18px 20px; }
    .ov-feed-list { padding:8px 18px 14px; }
    .ov-report-body { padding:10px 18px 16px; }
    .ov-report-wrapper { padding:0 12px; }
    .ov-report-grid { grid-template-columns:repeat(2, 1fr); gap:10px; }
    .heatmap-day { width:10px; height:10px; }
    .heatmap-grid { gap:3px; }
    .heatmap-week { gap:3px; }
    .heatmap-month-row { gap:3px; }
    .heatmap-month-cell { width:10px; font-size:10px; }
}

/* ======================================================
   BS4 → BS3 Compatibility Utilities
   ====================================================== */
@media (max-width: 991px) {
    .col-4 { width: 33.33333333%; }
    .col-6 { width: 50%; }
}
.mb-2 { margin-bottom: 10px !important; }
.mb-3 { margin-bottom: 15px !important; }
.mb-4 { margin-bottom: 20px !important; }
.mt-2 { margin-top: 10px !important; }
.form-control-sm { height: 30px; padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 8px; border:1px solid #e0e0e0; background:#fafafa; transition:border-color 0.2s; }
.form-control-sm:focus { border-color: #FFC107; outline:none; box-shadow: 0 0 0 3px rgba(255,193,7,0.12); }

/* ========================================
   HOME DASHBOARD — Glass Panel
   ======================================== */
.home-dashboard-section {
    padding: 0 20px;
    margin-top: 20px;
    margin-bottom: 30px;
    position: relative;
    z-index: 10;
}
.home-dashboard-section .container-fluid {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
}
.dashboard-glass {
    background: rgba(26, 35, 126, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    overflow: hidden;
    color: #fff;
}

/* --- Collapsed Bar --- */
.dashboard-collapsed {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 32px 14px;
    gap: 20px;
}
.dashboard-collapsed-left {
    display: flex;
    align-items: center;
    gap: 32px;
    flex: 1;
    min-width: 0;
}
.dashboard-collapsed-right {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: auto;
    padding: 0 10px;
}
.dashboard-challenge {
    display: flex;
    align-items: center;
    gap: 12px;
}
/* --- Challenge Friends CTA Button --- */
.dash-challenge-cta {
    background: linear-gradient(135deg, #FFC107, #FF9800);
    color: #1c1c2e;
    border: none;
    padding: 14px 34px;
    border-radius: 10px;
    font-size: 1.15rem;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    box-shadow: 0 3px 14px rgba(255,193,7,0.35);
    letter-spacing: 0.3px;
}
.dash-challenge-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(255,193,7,0.45);
}
.dash-challenge-cta i {
    margin-right: 5px;
}

/* --- Challenge Modal --- */
.ch-modal {
    background: linear-gradient(135deg, #1c1c2e 0%, #252538 100%);
    border-radius: 16px;
    border: none;
    color: #fff;
    overflow: hidden;
}
.ch-modal-header {
    text-align: center;
    padding: 34px 36px 12px;
    position: relative;
}
.ch-modal-icon {
    font-size: 3.2rem;
    margin-bottom: 10px;
}
.ch-modal-title {
    font-size: 1.8rem;
    font-weight: 800;
    margin: 0 0 6px;
    color: #fff;
}
.ch-modal-subtitle {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.55);
    margin: 0;
    line-height: 1.4;
}
.ch-modal-close {
    position: absolute;
    top: 16px;
    right: 20px;
    color: rgba(255,255,255,0.5);
    opacity: 1;
    font-size: 1.8rem;
    text-shadow: none;
}
.ch-modal-close:hover {
    color: #fff;
}
.ch-modal-body {
    padding: 22px 36px 34px;
}
.ch-label {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255,255,255,0.5);
    margin-bottom: 10px;
    display: block;
}

/* Type Cards */
.ch-type-cards {
    display: flex;
    gap: 10px;
    margin-bottom: 22px;
}
.ch-type-card {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 18px 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}
.ch-type-card i {
    display: block;
    font-size: 1.6rem;
    margin-bottom: 8px;
    color: rgba(255,255,255,0.5);
}
.ch-type-card span {
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
}
.ch-type-card:hover {
    border-color: rgba(255,193,7,0.3);
    background: rgba(255,193,7,0.06);
}
.ch-type-card.active {
    border-color: #FFC107;
    background: rgba(255,193,7,0.12);
}
.ch-type-card.active i,
.ch-type-card.active span {
    color: #FFC107;
}

/* Type Description */
.ch-type-desc {
    background: rgba(255,193,7,0.08);
    border: 1px solid rgba(255,193,7,0.15);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 22px;
    font-size: 0.95rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.5;
}
.ch-type-desc i {
    color: #FFC107;
    margin-right: 6px;
}

/* Course Search */
.ch-course-section {
    margin-bottom: 22px;
}
.ch-course-search-wrap {
    position: relative;
}
.ch-course-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.3);
    font-size: 0.9rem;
    pointer-events: none;
}
.ch-input {
    width: 100%;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    padding: 14px 16px 14px 40px;
    border-radius: 10px;
    font-size: 1.05rem;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.ch-input:focus {
    border-color: #FFC107;
}
.ch-course-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #2a2a3d;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 0 0 8px 8px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    display: none;
}
.ch-course-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.15s;
    color: rgba(255,255,255,0.8);
}
.ch-course-item:hover {
    background: rgba(255,193,7,0.1);
}
.ch-course-selected {
    display: flex;
    align-items: center;
    background: rgba(255,193,7,0.12);
    border: 1px solid rgba(255,193,7,0.3);
    border-radius: 10px;
    padding: 12px 16px;
    margin-top: 10px;
    font-size: 1.05rem;
    color: #FFC107;
}
.ch-course-selected span {
    flex: 1;
}
.ch-course-remove {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.ch-course-remove:hover {
    color: #fff;
}

/* Duration Pills */
.ch-duration-pills {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
}
.ch-duration-pill {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.65);
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}
.ch-duration-pill:hover {
    border-color: rgba(255,193,7,0.3);
}
.ch-duration-pill.active {
    border-color: #FFC107;
    background: rgba(255,193,7,0.12);
    color: #FFC107;
}

/* Create Button */
.ch-create-btn {
    width: 100%;
    background: linear-gradient(135deg, #FFC107, #FF9800);
    color: #1c1c2e;
    border: none;
    padding: 16px;
    border-radius: 12px;
    font-size: 1.15rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 15px rgba(255,193,7,0.3);
}
.ch-create-btn:hover {
    box-shadow: 0 6px 22px rgba(255,193,7,0.45);
    transform: translateY(-1px);
}
.ch-create-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Share Step */
.ch-share-link-wrap {
    display: flex;
    gap: 10px;
    margin-bottom: 22px;
}
.ch-share-link-wrap .ch-input {
    padding-left: 16px;
    font-size: 1rem;
    flex: 1;
}
.ch-copy-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    padding: 12px 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    font-size: 1.1rem;
}
.ch-copy-btn:hover {
    background: rgba(255,193,7,0.2);
    border-color: rgba(255,193,7,0.3);
}
.ch-share-social {
    text-align: center;
    margin-bottom: 22px;
}
.ch-share-social a.btn {
    margin: 5px;
    padding: 10px 18px;
    font-size: 1rem;
    border-radius: 8px;
}
.ch-done-btn {
    width: 100%;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    padding: 14px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.ch-done-btn:hover {
    background: rgba(255,255,255,0.18);
}

/* --- Expand/Collapse Arrow --- */
.dashboard-expand-arrow {
    text-align: center;
    padding: 6px 0 10px;
    cursor: pointer;
    color: rgba(255,255,255,0.35);
    font-size: 1.1rem;
    transition: color 0.2s;
    line-height: 1;
}
.dashboard-expand-arrow:hover {
    color: #FFC107;
}
.dashboard-expand-arrow.expanded i {
    transform: rotate(180deg);
}
.dashboard-expand-arrow i {
    transition: transform 0.3s;
}
.dashboard-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.3rem;
    font-weight: 700;
    white-space: nowrap;
    color: #FFC107;
}
.dashboard-brand i { font-size: 1.5rem; }
.dashboard-mini-stats {
    display: flex;
    align-items: center;
    gap: 28px;
}
.mini-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 88px;
}
.mini-stat-value {
    font-size: 1.9rem;
    font-weight: 800;
    color: #FFC107;
    line-height: 1.15;
}
.mini-stat-label {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(255,255,255,0.65);
    margin-top: 4px;
}
.mini-stat-divider {
    width: 1px;
    height: 44px;
    background: rgba(255,255,255,0.15);
}
.dashboard-toggle-btn { display: none; }

/* --- Guest locked state --- */
.dashboard-blurred {
    filter: blur(6px);
    pointer-events: none;
    user-select: none;
    opacity: 0.7;
    flex: 1;
}
.dashboard-lock-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    z-index: 5;
    pointer-events: auto;
}
.dashboard-lock-overlay i {
    font-size: 1.3rem;
    color: rgba(255,255,255,0.8);
}
.dashboard-lock-overlay span {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.2px;
}
.dashboard-lock-btn {
    background: linear-gradient(135deg, #FFC107, #FF9800);
    color: #1c1c2e;
    font-weight: 800;
    font-size: 0.9rem;
    padding: 8px 22px;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: box-shadow 0.2s, transform 0.2s;
    box-shadow: 0 2px 10px rgba(255,193,7,0.35);
}
.dashboard-lock-btn:hover {
    text-decoration: none;
    color: #1c1c2e;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(255,193,7,0.5);
}

/* --- Collapsed bar — clickable affordance --- */
.dashboard-collapsed { cursor: pointer; position: relative; }
.dashboard-collapsed-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-left: auto;
    padding: 0 10px;
}
.dash-expand-hint {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.45);
    font-weight: 600;
    letter-spacing: 0.3px;
}
.dash-expand-chevron {
    font-size: 1rem;
    color: rgba(255,255,255,0.45);
    transition: transform 0.3s, color 0.2s;
}
.dash-expand-chevron.rotated { transform: rotate(180deg); }
.dashboard-collapsed:hover .dash-expand-hint,
.dashboard-collapsed:hover .dash-expand-chevron { color: #FFC107; }

/* --- Expanded Panel --- */
.dashboard-expanded {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 28px 32px 24px;
    animation: dashSlideDown 0.3s ease-out;
}
@keyframes dashSlideDown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Two-zone grid: 60 / 40 */
.dashboard-expanded-grid {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}
.dash-progress-zone {
    flex: 3;
    min-width: 0;
}
.dash-competition-zone {
    flex: 2;
    min-width: 0;
}

/* --- Hero stats (YC + Streak) --- */
.dash-hero-row {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}
.dash-hero-stat {
    flex: 1;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 22px 20px;
    text-align: center;
    transition: background 0.2s;
}
.dash-hero-stat:hover { background: rgba(255,255,255,0.11); }
.dash-hero-streak { border-color: rgba(255,120,0,0.25); }
.dash-hero-icon {
    display: block;
    font-size: 1.6rem;
    color: #FFC107;
    margin-bottom: 10px;
}
.dash-hero-streak .dash-hero-icon { color: #FF7043; }
.dash-hero-num {
    display: block;
    font-size: 2.8rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    letter-spacing: -1px;
    margin-bottom: 8px;
}
.dash-hero-lbl {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

/* --- Level progress bar --- */
.dash-level-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 20px;
}
.dash-level-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
}
.dash-level-current {
    font-size: 1rem;
    font-weight: 700;
    color: #FFC107;
}
.dash-level-current i { margin-right: 5px; font-size: 0.9rem; }
.dash-level-next {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
    font-weight: 500;
}
.dash-level-next em {
    font-style: normal;
    color: rgba(255,193,7,0.6);
    margin-left: 6px;
    font-size: 0.8rem;
}
.dash-progress-track {
    background: rgba(255,255,255,0.1);
    border-radius: 99px;
    height: 10px;
    overflow: hidden;
    margin-bottom: 8px;
}
.dash-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #FFC107 0%, #FF9800 100%);
    border-radius: 99px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 4px;
}
.dash-level-bottom {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.35);
}
.dash-level-pct { color: rgba(255,193,7,0.7); font-weight: 700; }

/* --- Secondary stat tiles (2×2) --- */
.dash-secondary-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 12px;
}
.dash-sec-stat {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 16px 10px;
    text-align: center;
    transition: background 0.2s;
}
.dash-sec-stat:hover { background: rgba(255,255,255,0.1); }
.dash-sec-stat > i {
    display: block;
    font-size: 1.2rem;
    color: rgba(255,193,7,0.65);
    margin-bottom: 8px;
}
.dash-sec-num {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
}
.dash-sec-lbl {
    display: block;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 5px;
}

/* --- Competition zone --- */
.dash-competition-zone .dash-challenge-cta {
    width: 100%;
    margin-bottom: 24px;
    font-size: 1.05rem;
    padding: 14px 20px;
}
.panel-title {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255,255,255,0.6);
    margin: 0 0 14px;
}
.panel-title i { color: #FFC107; margin-right: 6px; }

/* --- Leaderboard --- */
.dash-lb-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.dash-lb-tab {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s;
}
.dash-lb-tab:hover { background: rgba(255,255,255,0.14); color: #fff; }
.dash-lb-tab.active {
    background: rgba(255,193,7,0.2);
    border-color: rgba(255,193,7,0.4);
    color: #FFC107;
}
.dash-lb-content { min-height: 140px; }
.dash-lb-loading { text-align: center; padding: 30px; color: rgba(255,255,255,0.4); }
.dash-lb-content table { width: 100%; border-collapse: collapse; }
.dash-lb-content tr { border-bottom: 1px solid rgba(255,255,255,0.06); }
.dash-lb-content tr:last-child { border-bottom: none; }
.dash-lb-content td { padding: 11px 8px; font-size: 1rem; }
.dash-lb-rank { width: 36px; font-weight: 700; font-size: 1.1rem; text-align: center; color: rgba(255,255,255,0.5); }
.dash-lb-rank:first-child { color: #FFC107; }
.dash-lb-name { font-weight: 600; font-size: 1rem; }
.dash-lb-name img { width: 30px; height: 30px; border-radius: 50%; margin-right: 8px; object-fit: cover; vertical-align: middle; }
.dash-lb-score { text-align: right; font-weight: 700; font-size: 1rem; color: #FFC107; white-space: nowrap; }
.dash-lb-you { background: rgba(255,193,7,0.1); border-radius: 6px; }
.dash-lb-empty {
    text-align: center;
    padding: 28px 16px;
    color: rgba(255,255,255,0.35);
}
.dash-lb-empty i { display: block; font-size: 2rem; margin-bottom: 10px; opacity: 0.4; }
.dash-lb-empty p { font-size: 0.88rem; line-height: 1.5; margin: 0; }

/* --- Footer Links --- */
.dashboard-expanded-footer {
    display: flex;
    justify-content: center;
    gap: 28px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.dash-link {
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: color 0.2s;
}
.dash-link:hover { color: #FFC107; text-decoration: none; }
.dash-link i { margin-right: 5px; }

/* --- Dashboard Responsive --- */
@media (max-width: 768px) {
    .home-dashboard-section { margin-top: -40px; padding: 0 12px; }
    .dashboard-collapsed { flex-direction: column; padding: 16px 20px 10px; gap: 14px; }
    .dashboard-collapsed-left { flex-direction: column; gap: 14px; }
    .dashboard-collapsed-right { width: 100%; justify-content: center; }
    .dashboard-mini-stats { gap: 16px; flex-wrap: wrap; justify-content: center; }
    .mini-stat { min-width: 60px; }
    .mini-stat-value { font-size: 1.5rem; }
    .mini-stat-label { font-size: 0.75rem; }
    .dashboard-expanded { padding: 20px 16px; }
    .dashboard-expanded-grid { flex-direction: column; gap: 24px; }
    .dash-hero-num { font-size: 2.2rem; }
    .dash-secondary-stats { grid-template-columns: 1fr 1fr; }
    .dashboard-expanded-footer { gap: 18px; }
    /* Challenge modal responsive */
    .ch-type-cards { flex-wrap: wrap; }
    .ch-type-card { flex: 0 0 calc(50% - 5px); }
    .ch-modal-body { padding: 16px 20px 24px; }
    .ch-modal-header { padding: 24px 20px 8px; }
    .ch-duration-pills { flex-wrap: wrap; }
    .ch-duration-pill { flex: 0 0 calc(50% - 5px); }
}

/* ==========================================
   PROFILE NOTES TAB
   ========================================== */
.profile-notes-tab {
  padding: 24px 0;
}

.profile-notes-header h3 {
  font-size: 22px;
  font-weight: 700;
  color: #1A1A1A;
  margin: 0 0 4px;
}

.profile-notes-header h3 i {
  color: #FFC107;
  margin-right: 8px;
}

.profile-notes-subtitle {
  color: #888;
  font-size: 14px;
  margin: 0 0 24px;
}

.profile-notes-filters {
  margin-bottom: 24px;
}

.profile-notes-search {
  width: 100%;
  max-width: 420px;
  padding: 11px 16px 11px 40px;
  border: 1px solid #E0E0E0;
  border-radius: 10px;
  font-size: 14px;
  background: #FAFAFA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242.156a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3C/svg%3E") no-repeat 14px center;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.profile-notes-search:focus {
  border-color: #FFC107;
  outline: none;
  background-color: #fff;
}

/* Empty state */
.profile-notes-empty {
  text-align: center;
  padding: 60px 20px;
  color: #999;
}

.profile-notes-empty i {
  font-size: 48px;
  color: #DDD;
  margin-bottom: 16px;
  display: block;
}

.profile-notes-empty p {
  font-size: 15px;
  max-width: 400px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Video group card */
.pn-video-group {
  background: #fff;
  border: 1px solid #E8E8E8;
  border-radius: 14px;
  margin-bottom: 20px;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.pn-video-group:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}

/* Video header — course + lesson info */
.pn-video-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #FAFAFA 0%, #F5F5F5 100%);
  border-bottom: 1px solid #EBEBEB;
}

.pn-thumb-link {
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  display: block;
  line-height: 0;
}

.pn-video-thumb {
  width: 110px;
  height: 66px;
  object-fit: cover;
  display: block;
  transition: opacity 0.2s ease;
}

.pn-thumb-link:hover .pn-video-thumb {
  opacity: 0.85;
}

.pn-video-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.pn-course-label {
  font-size: 11px;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pn-course-label i {
  color: #FFC107;
  margin-right: 5px;
  font-size: 12px;
}

.pn-video-title {
  font-size: 15px;
  font-weight: 600;
  color: #1A1A1A;
  text-decoration: none !important;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.pn-video-title i {
  color: #E53935;
  margin-right: 6px;
  font-size: 14px;
}

.pn-video-title:hover {
  color: #FFC107;
}

.pn-note-count {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: #FFC107;
  padding: 4px 12px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Notes list inside card */
.pn-notes-list {
  padding: 0;
  margin: 0;
}

.pn-note-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid #F2F2F2;
  transition: background 0.15s ease;
}

.pn-note-item:last-child {
  border-bottom: none;
}

.pn-note-item:hover {
  background: #FFFDF5;
}

/* Left column — timestamp badge */
.pn-note-left {
  flex-shrink: 0;
  padding-top: 2px;
}

.pn-note-timestamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: #1A1A1A;
  color: #FFC107 !important;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Source Code Pro', monospace;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.15s ease;
}

.pn-note-timestamp:hover {
  background: #FFC107;
  color: #1A1A1A !important;
  transform: scale(1.05);
}

.pn-note-timestamp i {
  font-size: 10px;
}

/* Right column — note content + date */
.pn-note-right {
  flex: 1;
  min-width: 0;
}

.pn-note-text {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  margin: 0 0 6px;
  word-wrap: break-word;
}

.pn-note-meta {
  font-size: 12px;
  color: #B0B0B0;
}

.pn-note-meta i {
  margin-right: 4px;
}

/* Loading state */
.profile-notes-loading {
  text-align: center;
  padding: 40px;
  color: #999;
  font-size: 15px;
}

/* Responsive - profile notes */
@media (max-width: 768px) {
  .pn-video-header { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
  .pn-thumb-link { width: 100%; }
  .pn-video-thumb { width: 100%; height: auto; max-height: 160px; }
  .pn-note-count { align-self: flex-start; }
  .pn-note-item { flex-direction: column; gap: 8px; padding: 14px; }
  .pn-note-left { padding-top: 0; }
  /* Video notes form */
  .video-detail-main .vd-note-form-row { flex-direction: column; }
  .video-detail-main .vd-note-timestamp-wrap { width: 100%; }
  .video-detail-main .vd-note-timestamp-input { flex: 1; }
  .video-detail-main .vd-notes-card { padding: 16px; }
}

/* ==========================================
   HOMEPAGE GAMIFICATION DASHBOARD
   ========================================== */
.home-dashboard-section {
    padding: 0 20px;
    margin-top: 20px;
    margin-bottom: 30px;
    position: relative;
    z-index: 10;
}
.home-dashboard-section .container-fluid {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
}
.dashboard-glass {
    background: rgba(26, 35, 126, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    overflow: hidden;
    color: #fff;
}
.dashboard-collapsed {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 32px 14px;
    gap: 20px;
}
.dashboard-collapsed-left {
    display: flex;
    align-items: center;
    gap: 32px;
    flex: 1;
    min-width: 0;
}
.dashboard-collapsed-right {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: auto;
    padding: 0 10px;
}
.dash-challenge-cta {
    background: linear-gradient(135deg, #FFC107, #FF9800);
    color: #1c1c2e;
    border: none;
    padding: 14px 34px;
    border-radius: 10px;
    font-size: 1.15rem;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    box-shadow: 0 3px 14px rgba(255,193,7,0.35);
    letter-spacing: 0.3px;
}
.dash-challenge-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(255,193,7,0.45);
}
.dash-challenge-cta i { margin-right: 5px; }
.dashboard-expand-arrow {
    text-align: center;
    padding: 6px 0 10px;
    cursor: pointer;
    color: rgba(255,255,255,0.35);
    font-size: 1.1rem;
    transition: color 0.2s;
    line-height: 1;
}
.dashboard-expand-arrow:hover { color: #FFC107; }
.dashboard-expand-arrow.expanded i { transform: rotate(180deg); }
.dashboard-expand-arrow i { transition: transform 0.3s; }
.dashboard-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.25rem;
    font-weight: 700;
    white-space: nowrap;
    color: #FFC107;
}
.dashboard-brand i { font-size: 1.45rem; }
.dashboard-mini-stats {
    display: flex;
    align-items: center;
    gap: 24px;
}
.mini-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}
.mini-stat-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: #FFC107;
    line-height: 1.2;
}
.mini-stat-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.6);
    margin-top: 3px;
}
.mini-stat-divider {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,0.15);
}
.dashboard-expanded {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 28px 32px;
    animation: dashSlideDown 0.3s ease-out;
}
@keyframes dashSlideDown {
    from { opacity: 0; max-height: 0; }
    to   { opacity: 1; max-height: 800px; }
}
.dashboard-expanded-grid {
    display: flex;
    gap: 32px;
}
.dashboard-stats-panel { flex: 1; min-width: 0; }
.dashboard-lb-panel { flex: 1; min-width: 0; }
.panel-title {
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255,255,255,0.7);
    margin: 0 0 18px 0;
}
.panel-title i { color: #FFC107; margin-right: 6px; }
.dash-stat-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
}
.dash-stat-card {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 18px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: background 0.2s;
}
.dash-stat-card:hover { background: rgba(255,255,255,0.12); }
.dash-stat-card > i {
    font-size: 1.55rem;
    color: #FFC107;
    width: 28px;
    text-align: center;
    flex-shrink: 0;
}
.dash-stat-info { display: flex; flex-direction: column; min-width: 0; }
.dash-stat-num {
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
}
.dash-stat-lbl {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: rgba(255,255,255,0.5);
    margin-top: 2px;
}
.dash-lb-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.dash-lb-tab {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    transition: all 0.2s;
}
.dash-lb-tab:hover { background: rgba(255,255,255,0.14); color: #fff; }
.dash-lb-tab.active {
    background: rgba(255,193,7,0.2);
    border-color: rgba(255,193,7,0.4);
    color: #FFC107;
}
.dash-lb-content { min-height: 160px; }
.dash-lb-content table { width: 100%; border-collapse: collapse; }
.dash-lb-content tr { border-bottom: 1px solid rgba(255,255,255,0.06); }
.dash-lb-content tr:last-child { border-bottom: none; }
.dash-lb-content td { padding: 14px 10px; font-size: 1.08rem; }
.dash-lb-rank {
    width: 44px;
    font-weight: 700;
    font-size: 1.25rem;
    text-align: center;
}
.dash-lb-name { font-weight: 600; font-size: 1.08rem; }
.dash-lb-name img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    margin-right: 10px;
    object-fit: cover;
    vertical-align: middle;
}
.dash-lb-score {
    text-align: right;
    font-weight: 700;
    font-size: 1.1rem;
    color: #FFC107;
    white-space: nowrap;
}
.dash-lb-empty {
    text-align: center;
    padding: 30px;
    color: rgba(255,255,255,0.4);
}
.dashboard-expanded-footer {
    display: flex;
    justify-content: center;
    gap: 28px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.dash-link {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    transition: color 0.2s;
}
.dash-link:hover { color: #FFC107; text-decoration: none; }
.dash-link i { margin-right: 5px; }
.ch-modal {
    background: linear-gradient(135deg, #1c1c2e 0%, #252538 100%);
    border-radius: 16px;
    border: none;
    color: #fff;
    overflow: hidden;
}
.ch-modal-header {
    text-align: center;
    padding: 34px 36px 12px;
    position: relative;
}
.ch-modal-subtitle {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.55);
    margin: 0;
    line-height: 1.4;
}
.ch-modal-close {
    position: absolute;
    top: 16px;
    right: 20px;
    color: rgba(255,255,255,0.5);
    opacity: 1;
    font-size: 1.8rem;
    text-shadow: none;
    background: none;
    border: none;
    cursor: pointer;
}
.ch-modal-close:hover { color: #fff; }
.ch-modal-body { padding: 22px 36px 34px; }
.ch-modal-icon {
    font-size: 3.2rem;
    margin-bottom: 10px;
    display: block;
    text-align: center;
}
.ch-modal-title {
    font-size: 1.8rem;
    font-weight: 800;
    margin: 0 0 6px;
    color: #fff;
}
.ch-label {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255,255,255,0.5);
    margin-bottom: 10px;
    display: block;
}
.ch-type-desc {
    background: rgba(255,193,7,0.08);
    border: 1px solid rgba(255,193,7,0.15);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 22px;
    font-size: 0.95rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.5;
}
.ch-type-desc i { color: #FFC107; margin-right: 6px; }
.ch-input {
    width: 100%;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    padding: 14px 16px 14px 40px;
    border-radius: 10px;
    font-size: 1.05rem;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.ch-input:focus { border-color: #FFC107; }
.ch-course-section { margin-bottom: 22px; }
.ch-course-search-wrap { position: relative; }
.ch-course-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.3);
    font-size: 0.9rem;
    pointer-events: none;
}
.ch-course-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #2a2a3d;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 0 0 8px 8px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
}
.ch-course-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.15s;
    color: rgba(255,255,255,0.8);
}
.ch-course-item:hover { background: rgba(255,193,7,0.1); }
.ch-course-selected {
    display: flex;
    align-items: center;
    background: rgba(255,193,7,0.12);
    border: 1px solid rgba(255,193,7,0.3);
    border-radius: 10px;
    padding: 12px 16px;
    margin-top: 10px;
    font-size: 1.05rem;
    color: #FFC107;
}
.ch-course-selected span { flex: 1; }
.ch-course-remove {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.ch-course-remove:hover { color: #fff; }
.ch-duration-pills {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
}
.ch-duration-pill {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.65);
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}
.ch-duration-pill:hover { border-color: rgba(255,193,7,0.3); }
.ch-duration-pill.active {
    border-color: #FFC107;
    background: rgba(255,193,7,0.12);
    color: #FFC107;
}
.ch-create-btn {
    width: 100%;
    background: linear-gradient(135deg, #FFC107, #FF9800);
    color: #1c1c2e;
    border: none;
    padding: 16px;
    border-radius: 12px;
    font-size: 1.15rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 15px rgba(255,193,7,0.3);
}
.ch-create-btn:hover {
    box-shadow: 0 6px 22px rgba(255,193,7,0.45);
    transform: translateY(-1px);
}
.ch-create-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}
.ch-share-link-wrap {
    display: flex;
    gap: 10px;
    margin-bottom: 22px;
}
.ch-share-link-wrap .ch-input { padding-left: 16px; font-size: 1rem; flex: 1; }
.ch-copy-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    padding: 12px 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    font-size: 1.1rem;
}
.ch-copy-btn:hover {
    background: rgba(255,193,7,0.2);
    border-color: rgba(255,193,7,0.3);
}
.ch-done-btn {
    width: 100%;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    padding: 14px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.ch-done-btn:hover { background: rgba(255,255,255,0.18); }
.ch-share-social {
    text-align: center;
    margin-bottom: 22px;
}

/* ==========================================
   CHALLENGE PAGE
   ========================================== */
.ch-page-wrap {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}
.ch-page-card {
    background: linear-gradient(135deg, #1c1c2e 0%, #252538 100%);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.1);
    max-width: 520px;
    width: 100%;
    overflow: hidden;
    color: #fff;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.ch-page-header {
    text-align: center;
    padding: 40px 36px 20px;
}
.ch-page-icon { font-size: 3.5rem; margin-bottom: 12px; }
.ch-page-title {
    font-size: 1.8rem;
    font-weight: 800;
    margin: 0 0 8px;
    color: #fff;
}
.ch-page-challenger {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.6);
    margin: 0;
}
.ch-page-challenger strong { color: #FFC107; }
.ch-page-details {
    margin: 0 36px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 20px 24px;
}
.ch-page-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ch-page-detail-row:last-child { border-bottom: none; }
.ch-page-detail-label { color: rgba(255,255,255,0.5); font-size: 0.95rem; }
.ch-page-detail-value { font-weight: 700; font-size: 0.95rem; text-align: right; }
.ch-page-actions { text-align: center; padding: 28px 36px; }
.ch-page-join-btn {
    width: 100%;
    background: linear-gradient(135deg, #FFC107, #FF9800);
    color: #1c1c2e;
    border: none;
    padding: 16px;
    border-radius: 12px;
    font-size: 1.15rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(255,193,7,0.3);
    transition: all 0.2s;
}
.ch-page-join-btn:hover {
    box-shadow: 0 6px 22px rgba(255,193,7,0.45);
    transform: translateY(-1px);
}
.ch-page-share-hint { margin: 14px 0 0; font-size: 0.9rem; color: rgba(255,255,255,0.4); }
.ch-page-footer { text-align: center; padding: 0 36px 28px; }
.ch-page-footer a { color: rgba(255,255,255,0.5); text-decoration: none; font-size: 0.9rem; }
.ch-page-footer a:hover { color: #FFC107; }

.ch-type-cards {
    display: flex;
    gap: 10px;
    margin-bottom: 22px;
}
.ch-type-card {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 18px 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}
.ch-type-card i {
    display: block;
    font-size: 1.6rem;
    margin-bottom: 8px;
    color: rgba(255,255,255,0.5);
}
.ch-type-card strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    margin-bottom: 4px;
}
.ch-type-card span {
    display: block;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.45);
}
.ch-type-card:hover {
    border-color: rgba(255,193,7,0.3);
    background: rgba(255,193,7,0.06);
}
.ch-type-card.active {
    border-color: #FFC107;
    background: rgba(255,193,7,0.12);
}
.ch-type-card.active i,
.ch-type-card.active strong,
.ch-type-card.active span { color: #FFC107; }
@media (max-width: 768px) {
    .home-dashboard-section { margin-top: -40px; padding: 0 12px; }
    .dashboard-collapsed { flex-direction: column; padding: 16px 20px 10px; gap: 14px; }
    .dashboard-collapsed-left { flex-direction: column; gap: 14px; }
    .dashboard-collapsed-right { align-items: stretch; width: 100%; text-align: center; }
    .dash-challenge-cta { width: 100%; }
    .dashboard-mini-stats { gap: 16px; }
    .mini-stat { min-width: 60px; }
    .mini-stat-value { font-size: 1.5rem; }
    .mini-stat-label { font-size: 0.75rem; }
    .dashboard-expanded { padding: 20px; }
    .dashboard-expanded-grid { flex-direction: column; gap: 22px; }
    .dash-stat-cards { grid-template-columns: 1fr 1fr; }
    .dash-stat-num { font-size: 1.35rem; }
    .dashboard-expanded-footer { gap: 18px; }
    .ch-type-cards { flex-wrap: wrap; }
    .ch-type-card { flex: 0 0 calc(50% - 5px); }
    .ch-modal-body { padding: 16px 20px 24px; }
    .ch-modal-header { padding: 24px 20px 8px; }
}

/* =============================================
   CREATE / EDIT COURSE & VIDEO FORMS
   ============================================= */
.cc-page { padding: 20px 15px 40px; }
.cc-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 12px;
}
.cc-header-content { display: flex; align-items: center; gap: 14px; }
.cc-header-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: #FFF8E1; border-radius: 12px;
  font-size: 22px; color: #F9A825;
}
.cc-header-text h1 { margin: 0; font-size: 22px; font-weight: 700; color: #1A1A1A; }
.cc-subtitle { margin: 2px 0 0; font-size: 14px; color: #888; }
.cc-btn-back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; border-radius: 8px;
  background: #f5f5f5; color: #555; font-size: 14px; font-weight: 600;
  text-decoration: none; transition: background 0.2s;
}
.cc-btn-back:hover { background: #eee; color: #333; text-decoration: none; }

.cc-form {
  max-width: 860px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 28px;
}
.cc-form-body { display: flex; gap: 28px; }
.cc-form-fields { flex: 1; min-width: 0; }
.cc-form-sidebar {
  width: 180px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding-top: 2px;
}
.cc-form-sidebar > label {
  display: block; width: 100%; text-align: center;
  font-size: 14px; font-weight: 600; color: #333; margin-bottom: 4px;
}
.cc-field { margin-bottom: 20px; }
.cc-field label {
  display: block; margin-bottom: 6px;
  font-size: 14px; font-weight: 600; color: #333;
}
.cc-req { color: #e53935; }
.cc-field-hint { font-size: 12px; color: #999; margin: 4px 0 0; }
.cc-input, .cc-select, .cc-textarea {
  width: 100%; padding: 10px 14px;
  border: 1px solid #ddd; border-radius: 8px;
  font-size: 14px; color: #333; background: #fafafa;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.cc-input:focus, .cc-select:focus, .cc-textarea:focus {
  outline: none; border-color: #FFC107; background: #fff;
}
.cc-textarea { resize: vertical; min-height: 80px; }
.cc-select { appearance: auto; }
.cc-select:disabled { opacity: 0.5; cursor: not-allowed; }

.cc-row { display: flex; gap: 16px; }
.cc-row .cc-field { flex: 1; }

.cc-actions {
  display: flex; justify-content: flex-end; gap: 12px;
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}
.cc-btn-cancel {
  padding: 10px 22px; border-radius: 8px;
  border: 1px solid #ddd; background: #fff;
  color: #666; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
}
.cc-btn-cancel:hover { background: #f5f5f5; color: #333; }
.cc-btn-submit {
  padding: 10px 26px; border-radius: 8px; border: none;
  background: #FFC107; color: #1A1A1A;
  font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all 0.2s;
}
.cc-btn-submit:hover { background: #FFB300; }
.cc-btn-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.cc-btn-submit i { margin-right: 5px; }

.cc-alert {
  padding: 12px 16px; border-radius: 8px;
  margin-bottom: 20px; font-size: 14px;
  display: flex; align-items: center; gap: 8px;
}
.cc-alert i { font-size: 16px; flex-shrink: 0; }
.cc-alert-error { background: #FFF0F0; color: #C62828; border: 1px solid #FFCDD2; }
.cc-alert-success { background: #F0FFF0; color: #2E7D32; border: 1px solid #C8E6C9; }

.cc-logo-preview {
  width: 160px; height: 160px; border-radius: 10px;
  border: 2px dashed #ddd; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; background: #fafafa;
  transition: border-color 0.2s;
}
.cc-logo-preview:hover { border-color: #FFC107; }
.cc-logo-preview img { width: 100%; height: 100%; object-fit: cover; }
.cc-logo-placeholder {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; color: #999;
}
.cc-logo-placeholder i { font-size: 24px; }
.cc-logo-placeholder span { font-size: 12px; }
.cc-btn-remove-logo {
  padding: 5px 12px; border-radius: 6px; font-size: 12px;
  font-weight: 600; cursor: pointer; border: none;
  display: inline-flex; align-items: center; gap: 5px;
  background: #f5f5f5; color: #666; transition: background 0.2s;
}
.cc-btn-remove-logo:hover { background: #eee; color: #c62828; }
.cc-logo-hint { font-size: 11px; color: #999; margin: 0; text-align: center; }

.cc-module-row { display: flex; align-items: center; gap: 10px; }
.cc-module-row .cc-select { flex: 1; }
.cc-module-or { font-size: 13px; color: #999; font-weight: 600; flex-shrink: 0; }
.cc-module-create { display: flex; gap: 8px; margin-top: 8px; }
.cc-module-create .cc-input { flex: 1; }
.cc-btn-create-module {
  padding: 10px 16px; border-radius: 8px; border: none;
  background: #FFC107; color: #1A1A1A;
  font-size: 13px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
  transition: background 0.2s;
}
.cc-btn-create-module:hover { background: #FFB300; }
.cc-btn-create-module:disabled { opacity: 0.5; cursor: not-allowed; }

/* Video position slot picker */
.cc-pos-list {
  border: 1px solid #eee; border-radius: 10px;
  background: #fafafa; padding: 4px 0; max-height: 320px; overflow-y: auto;
}
.cc-pos-video {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; background: #fff;
  border-bottom: 1px solid #f5f5f5;
}
.cc-pos-num {
  width: 24px; height: 24px; border-radius: 50%;
  background: #f0f0f0; color: #666;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cc-pos-icon { color: #bbb; font-size: 14px; flex-shrink: 0; }
.cc-pos-title {
  font-size: 13px; color: #333; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cc-pos-slot {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 16px; cursor: pointer;
  background: transparent; border: none; width: 100%;
  transition: all 0.15s;
}
.cc-pos-slot-line {
  flex: 1; height: 2px; background: #e0e0e0;
  border-radius: 1px; transition: background 0.15s;
}
.cc-pos-slot-label {
  font-size: 11px; color: #bbb; font-weight: 600;
  white-space: nowrap; display: flex; align-items: center; gap: 4px;
  opacity: 0; transition: opacity 0.15s;
}
.cc-pos-slot:hover .cc-pos-slot-label { opacity: 1; color: #FFC107; }
.cc-pos-slot:hover .cc-pos-slot-line { background: #FFC107; }
.cc-pos-slot--active {
  padding: 6px 16px;
}
.cc-pos-slot--active .cc-pos-slot-label {
  opacity: 1; color: #fff; font-size: 12px;
  background: #FFC107; padding: 3px 10px; border-radius: 10px;
}
.cc-pos-slot--active .cc-pos-slot-line { background: #FFC107; height: 3px; }

@media (max-width: 600px) {
  .cc-page-header { flex-direction: column; align-items: flex-start; }
  .cc-form { padding: 20px 16px; }
  .cc-form-body { flex-direction: column-reverse; }
  .cc-form-sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .cc-logo-preview { width: 120px; height: 120px; }
  .cc-row { flex-direction: column; gap: 0; }
}

/* ============================================
   HOME HERO (nh-)
   The lemon field is a surface, not a backdrop: the ask on the left, a deck of
   live cards laid on it to the right. Ink carries the cards so the saturated
   field reads as confident rather than empty — no second hue is introduced.
   Replaces the centred-logo + 12-floating-bubbles hero.
   ============================================ */
.nh-hero {
  background: #FFD54F;
  padding: 52px 20px 62px;
  position: relative;
  overflow: hidden;
  width: 100%;
}
.nh-hero-in {
  max-width: 1140px; margin: 0 auto;
  display: grid; grid-template-columns: 1.08fr .92fr;
  gap: 52px; align-items: center;
}
/* 0.66 on #FFD54F is 6.34:1. The old hero's equivalent label ran at 0.5 (3.67:1)
   and failed AA; 0.57 is the bare minimum here, so this keeps headroom for a
   dimmed screen rather than sitting on the line. */
.nh-hero-eyebrow {
  font-size: 12.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  color: rgba(0,0,0,.66); margin: 0 0 14px;
}
.nh-hero-h1 {
  font-size: 44px; font-weight: 800; color: #1a1a1a;
  letter-spacing: -1.4px; line-height: 1.06; margin: 0 0 26px;
}

/* The shared search form, restyled for the hero without touching its markup. */
.nh-ask .hero-search-form { margin-bottom: 0; }
.nh-ask .search-input-group {
  border-radius: 14px; padding: 6px; max-width: 520px;
  box-shadow: 0 8px 26px rgba(120,88,0,.20);
}
.nh-ask .hero-search-btn { border-radius: 10px; padding: 12px 24px; }

.nh-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; align-items: center; }
.nh-tags em {
  font-style: normal; font-size: 11.5px; font-weight: 800; letter-spacing: .8px;
  text-transform: uppercase; color: rgba(0,0,0,.66);
}
.nh-tag {
  font-size: 13px; font-weight: 700; color: rgba(0,0,0,.76); text-decoration: none;
  border: 1.5px solid rgba(0,0,0,.16); border-radius: 999px; padding: 5px 14px;
}
.nh-tag:hover {
  background: rgba(0,0,0,.08); color: #1a1a1a; text-decoration: none;
  border-color: rgba(0,0,0,.28);
}

/* -- The deck -- */
.nh-deck {
  position: relative; min-height: 300px; cursor: grab;
  /* Grid, so every card shares one cell: the row takes the height of the
     tallest card and the rest stretch to match it. The alternative — a fixed
     card height — has to be re-tuned by hand every time card copy changes. */
  display: grid;
  /* The deepest card is dealt 84px down. Reserve that, or it sits on the pager
     now that the deck is sized by its content rather than a flat 300px. */
  padding-bottom: 88px;
  user-select: none; -webkit-user-select: none; touch-action: pan-y;
}
.nh-deck:active { cursor: grabbing; }
.nh-card {
  /* Stacked in the single grid cell above. position:relative (not absolute)
     keeps z-index honoured while letting the cell drive the height. */
  grid-area: 1 / 1; position: relative;
  display: flex; flex-direction: column;
  min-height: 196px;
  border-radius: 20px; padding: 20px 22px;
  box-shadow: 0 18px 40px rgba(120,80,0,.28);
  transition: transform .42s cubic-bezier(.22,.9,.35,1), opacity .3s ease;
  will-change: transform;
}
/* Card tones. Each category owns a surface and an accent, so the deck is
   colour-coded by what the card is about. Every pairing below is measured:
   white on teal-800 is 7.6:1, on violet 7.7:1; the muted level (.72) clears
   4.5:1 on all three surfaces; and both colours separate from the lemon field
   by >5:1 so the cards detach from the background. The lighter teal-600 that
   this started from failed all three — do not reach for it again. */
.nh-card {
  --c-bg:     #161616;
  --c-fg:     #ffffff;
  --c-mute:   rgba(255,255,255,.72);
  --c-accent: #FFD54F;
  --c-rule:   rgba(255,255,255,.14);
  background: var(--c-bg);
}
.nh-card.t-teal   { --c-bg: #115e59; }   /* watch / continue */
.nh-card.t-violet { --c-bg: #5b3fa8; }   /* competition */
.nh-card.t-streak { --c-accent: #FF7043; }  /* ink surface, fire accent */
.nh-card.t-goal   { --c-accent: #F0B429; }  /* ink surface, YC gold */
.nh-card[data-d="0"] { transform: rotate(-1.4deg) translate(0,0) scale(1);        z-index: 4; }
.nh-card[data-d="1"] { transform: rotate(1.1deg)  translate(28px,30px) scale(.975); z-index: 3; }
.nh-card[data-d="2"] { transform: rotate(-.6deg)  translate(54px,58px) scale(.95);  z-index: 2; }
.nh-card[data-d="3"] { transform: rotate(1.6deg)  translate(78px,84px) scale(.925); z-index: 1; }
.nh-card.gone {
  transition: transform .26s ease, opacity .26s ease; opacity: 0;
  transform: rotate(-12deg) translate(-120%,-30px);
}

/* card internals — every colour comes from the tone tokens above, so a new
   card tone is four variables rather than a fresh set of overrides. */
.nh-eye {
  font-size: 10.5px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase;
  margin: 0 0 12px; display: flex; align-items: center; gap: 7px; color: var(--c-mute);
}
.nh-eye i { color: var(--c-accent); }
.nh-big { display: flex; align-items: baseline; gap: 9px; }
.nh-big b {
  font-size: 46px; font-weight: 800; letter-spacing: -1.8px; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--c-accent);
}
.nh-flame { font-size: 24px; color: var(--c-accent); }
.nh-big span { font-size: 12.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .7px; color: var(--c-mute); }
.nh-week { display: flex; gap: 5px; margin: 14px 0 12px; }
.nh-week u { width: 100%; height: 6px; border-radius: 4px; text-decoration: none;
  background: rgba(255,255,255,.18); }
.nh-week u.on { background: var(--c-accent); }
.nh-goal {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  color: var(--c-mute);
}
.nh-goal b { font-size: 14.5px; font-variant-numeric: tabular-nums; color: var(--c-fg); }
.nh-bar { height: 7px; border-radius: 5px; overflow: hidden; margin-top: 8px;
  background: rgba(255,255,255,.18); }
.nh-bar div { height: 100%; border-radius: 5px; background: var(--c-accent); }
.nh-krow { display: flex; gap: 12px; align-items: center; }
.nh-kmin { min-width: 0; }
.nh-thumb { width: 74px; height: 50px; border-radius: 9px; object-fit: cover; flex-shrink: 0; }
.nh-ktitle {
  font-size: 14.5px; font-weight: 800; line-height: 1.25; margin: 0 0 3px; color: var(--c-fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nh-kmeta {
  font-size: 12px; font-weight: 600; color: var(--c-mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nh-kgap { margin-top: 8px; }
.nh-steps { list-style: none; margin: 0; padding: 0; }
.nh-steps li {
  display: flex; gap: 11px; align-items: flex-start; padding: 8px 0;
  border-bottom: 1px solid var(--c-rule);
}
.nh-steps li:last-child { border-bottom: 0; }
.nh-steps em {
  font-style: normal; width: 21px; height: 21px; border-radius: 50%;
  background: var(--c-accent); color: #1a1a1a; font-size: 11.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px;
}
.nh-steps span { font-size: 13.5px; color: var(--c-fg); line-height: 1.4; }
.nh-steps span b { color: var(--c-accent); }
/* The guest take-aways list. Same rhythm as .nh-steps, but ticked rather than
   numbered: these are things the visitor ends up holding, not steps in an
   order, and an ordinal would imply a sequence that isn't there. */
.nh-gets { list-style: none; margin: 0; padding: 0; }
.nh-gets li {
  display: flex; gap: 11px; align-items: flex-start; padding: 9px 0;
  border-bottom: 1px solid var(--c-rule);
}
.nh-gets li:last-child { border-bottom: 0; }
.nh-gets i {
  color: var(--c-accent); font-size: 13px; width: 15px;
  flex-shrink: 0; margin-top: 3px; text-align: center;
}
.nh-gets span { font-size: 13.5px; color: var(--c-fg); line-height: 1.4; }
.nh-gets span b { color: var(--c-accent); font-weight: 700; }
.nh-stat { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
.nh-stat div b {
  display: block; font-size: 28px; font-weight: 800; letter-spacing: -1px;
  line-height: 1; font-variant-numeric: tabular-nums; color: var(--c-accent);
}
.nh-stat div span {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  color: var(--c-mute);
}
.nh-kfoot {
  margin-top: 13px; padding-top: 12px; font-size: 12.5px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-top: 1px solid var(--c-rule); color: var(--c-mute);
}
.nh-kfoot > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nh-kfoot b { color: var(--c-accent); }
.nh-kcta { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--c-rule); }
.nh-kcta .nh-kbtn { display: block; width: 100%; padding: 11px; font-size: 13.5px; }
.nh-kbtn {
  border: 0; border-radius: 9px; font-size: 12.5px; font-weight: 800;
  padding: 8px 14px; cursor: pointer; font-family: inherit; white-space: nowrap;
  text-decoration: none; text-align: center;
  background: var(--c-accent); color: #1a1a1a;
}
a.nh-kbtn:hover { text-decoration: none; filter: brightness(1.08); color: #1a1a1a; }
/* Every card is now the tallest card's height, so the trailing block hugs the
   bottom edge and a short card reads as composed rather than half-empty. */
.nh-card > .nh-kfoot,
.nh-card > .nh-kcta { margin-top: auto; }
/* Both draw their own top rule; stacked that reads as a double line, and the
   footer's is enough for the pair. This also pins the CTA back to the footer on
   cards that have both — it ties with the rule above on specificity, so it must
   win on source order, hence its position here rather than up with .nh-gets. */
.nh-kfoot + .nh-kcta { margin-top: 12px; padding-top: 0; border-top: 0; }
.nh-pager { display: flex; gap: 6px; margin-top: 12px; position: relative; z-index: 5; }
.nh-pip {
  width: 20px; height: 4px; border-radius: 3px; background: rgba(0,0,0,.20);
  border: 0; padding: 0; cursor: pointer; transition: background .2s;
}
.nh-pip.on { background: #1a1a1a; }
.nh-pip:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 3px; }

@media (max-width: 980px) {
  .nh-hero { padding: 34px 20px 44px; }
  .nh-hero-in { grid-template-columns: 1fr; gap: 34px; }
  .nh-hero-h1 { font-size: 32px; letter-spacing: -.8px; margin-bottom: 20px; }
  .nh-deck { min-height: 292px; }
}
@media (prefers-reduced-motion: reduce) {
  .nh-card { transition: none; }
}

/* ============================================
   HOME DASHBOARD PANELS (hdp-)
   Two always-open panels + action strip.
   Replaces the navy .dashboard-glass accordion.
   ============================================ */
.hdp-section {
  padding: 0 20px;
  margin-top: 20px;
  margin-bottom: 34px;
  position: relative;
  z-index: 10;

  /* Accent tokens — graphite. Gold is reserved for what is literally gold: YC,
     the goal ring, the level bar, rank medals. Everything else (tabs, "you",
     links, the strip hairline) is ink, which leaves gold as the only chromatic
     thing in the block — that is what stops it reading as a yellow wash under
     the yellow hero, rather than a second hue competing with it. */
  --hdp-a1: #4a5457;          /* accent, light — gradient start */
  --hdp-a2: #2d3436;          /* accent, dark  — gradient end, focus ring */
  --hdp-a-on: #ffffff;        /* text on an accent fill */
  --hdp-a-soft: #f2f4f4;      /* "you" row fill */
  --hdp-a-line: #dcdfdf;      /* "you" row border */
  --hdp-a-rgb: 45,52,54;      /* glows/shadows */
  --hdp-link: #2d3436;
  --hdp-link-hover: #0d0f10;
  --hdp-surface: #ffffff;     /* My Progress panel */
  --hdp-surface-lb: #ffffff;  /* Leaderboard panel */
  --hdp-lb-glow: rgba(45,52,54,0.07);
  --hdp-rule: linear-gradient(120deg, #2d3436, #4a5457 22%, #ffc107 64%, #ffa000);
}
.hdp-container { max-width: 1100px; margin: 0 auto; }
.hdp-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; }

.hdp-panel {
  background: var(--hdp-surface);
  border: 1px solid #ececec;
  border-radius: 18px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.05);
  padding: 24px 28px;
  position: relative;
  overflow: hidden;
}
.hdp-panel::before {
  content: "";
  position: absolute; top: -70px; right: -70px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(255,193,7,0.10), transparent 65%);
  pointer-events: none;
}
/* The two panels sit side by side under a solid-yellow hero, so the leaderboard
   carries the accent while My Progress keeps the warm one — they read as a pair
   rather than as one undifferentiated wash. */
.hdp-panel-lb { background: var(--hdp-surface-lb); }
.hdp-panel-lb::before { background: radial-gradient(circle, var(--hdp-lb-glow), transparent 65%); }

.hdp-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; position: relative; }
.hdp-panel-title { margin: 0; font-size: 17px; font-weight: 800; color: #1a1a1a; }
.hdp-trophy { color: #FFC107; margin-right: 4px; }
.hdp-chip {
  background: #fdf3dc; color: #9b6a00;
  font-size: 13.5px; font-weight: 700;
  padding: 6px 14px; border-radius: 999px; white-space: nowrap;
}
.hdp-chip i { margin-right: 4px; }
.hdp-greet { font-size: 13.5px; color: #7d7970; margin: 0 0 18px; }
.hdp-tab-hint { font-size: 13px; color: #8d887c; font-weight: 600; }

/* -- Hero: ring + two big numbers, full width, divided -- */
.hdp-hero { display: grid; grid-template-columns: 1fr 1fr 1fr; margin-bottom: 18px; }
.hdp-hero-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 6px 0;
}
.hdp-hero-cell + .hdp-hero-cell { border-left: 1px solid #edebe5; }
.hdp-hero-num {
  font-size: 40px; font-weight: 800; color: #1a1a1a;
  letter-spacing: -1px; line-height: 1.05; font-variant-numeric: tabular-nums;
}
/* The YC total used to be amber-on-white (~2.6:1) and washed out at 40px next to
   the ink Day Streak beside it. Both hero numbers are ink now; the gold identity
   moves down onto the label, where it is small enough to stay legible. */
.hdp-yc { color: #1a1a1a; }
.hdp-lbl { font-size: 14px; font-weight: 600; color: #6f6b62; letter-spacing: 0.2px; }
.hdp-yc + .hdp-lbl { color: #9b6a00; }
.hdp-flame {
  font-size: 26px; color: #FF7043; vertical-align: 2px;
  display: inline-block; animation: hdp-flick 2.4s ease-in-out infinite;
  transform-origin: 50% 90%;
}
@keyframes hdp-flick {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.12) rotate(-3deg); }
  65% { transform: scale(0.96) rotate(2deg); }
}

/* -- Daily goal ring -- */
.hdp-ring { position: relative; width: 112px; height: 112px; }
.hdp-ring svg { transform: rotate(-90deg); }
.hdp-ring-val { transition: stroke-dasharray 1.1s cubic-bezier(0.22, 0.9, 0.35, 1); }
.hdp-ring-txt {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.hdp-ring-txt b { font-size: 22px; letter-spacing: -0.5px; color: #1a1a1a; font-variant-numeric: tabular-nums; }
.hdp-ring-txt span { font-size: 11px; color: #77736a; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }

/* -- Level progress -- */
.hdp-level { background: #fafaf8; border: 1px solid #f0efeb; border-radius: 12px; padding: 14px 18px; }
.hdp-level-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14.5px; font-weight: 600; color: #1a1a1a; margin-bottom: 9px; gap: 10px; }
.hdp-level-row i { color: #FFC107; }
.hdp-level-next { color: #77736a; font-weight: 500; font-size: 13.5px; white-space: nowrap; }
.hdp-track { height: 10px; background: #efeeea; border-radius: 6px; overflow: hidden; }
.hdp-fill {
  height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, #ffc107, #ff9800);
  position: relative; overflow: hidden;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.hdp-fill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: hdp-shimmer 3.2s ease-in-out infinite;
}
@keyframes hdp-shimmer {
  45% { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* -- This Week bars -- */
.hdp-week {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 8px;
  margin-top: 14px; padding: 14px 18px 10px;
  background: #fafaf8; border: 1px solid #f0efeb; border-radius: 12px;
}
.hdp-week-head {
  font-size: 12.5px; font-weight: 700; color: #7d7970;
  text-transform: uppercase; letter-spacing: 0.5px;
  align-self: flex-start; padding-top: 6px;
}
.hdp-day { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1; }
.hdp-bar-slot { height: 46px; display: flex; align-items: flex-end; justify-content: center; width: 100%; }
.hdp-bar {
  width: 14px; border-radius: 4px 4px 0 0; background: #f3dfa6;
  transform-origin: bottom; animation: hdp-grow 0.6s cubic-bezier(0.22, 0.9, 0.35, 1) backwards;
}
.hdp-bar.today { background: linear-gradient(180deg, #ffc107, #ffa000); }
.hdp-bar:hover { filter: brightness(0.93); }
@keyframes hdp-grow { from { transform: scaleY(0); } }
.hdp-day span { font-size: 11px; font-weight: 700; color: #8d887c; }
.hdp-day.today span { color: #9b6a00; }

/* -- Bottom stat tiles, divided -- */
.hdp-sub4 { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 14px; }
.hdp-sub { text-align: center; padding: 10px 4px; border-radius: 8px; transition: background 0.18s; }
.hdp-sub:hover { background: #fafaf8; }
.hdp-sub + .hdp-sub { border-left: 1px solid #edebe5; border-radius: 0 8px 8px 0; }
.hdp-sub b { display: block; font-size: 21px; font-weight: 800; color: #1a1a1a; letter-spacing: -0.4px; font-variant-numeric: tabular-nums; }
.hdp-sub span { font-size: 12.5px; color: #77736a; font-weight: 600; }

.hdp-panel-foot {
  display: flex; justify-content: center; gap: 26px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid #f3f2ee;
}
.hdp-link { font-size: 13.5px; font-weight: 600; color: var(--hdp-link); text-decoration: none; }
.hdp-link:hover { color: var(--hdp-link-hover); text-decoration: underline; }
.hdp-link i { margin-right: 5px; }

/* -- Leaderboard -- */
.hdp-tabs { display: flex; gap: 6px; margin: 12px 0 14px; flex-wrap: wrap; }
.hdp-tab {
  font-size: 13px; font-weight: 700; padding: 6px 13px; border-radius: 999px;
  color: #6f6b62; background: #f4f3f0; border: 0; cursor: pointer;
  font-family: inherit; transition: background 0.18s, color 0.18s;
}
.hdp-tab:hover { background: #ece9e2; }
.hdp-tab.on {
  background: linear-gradient(135deg, var(--hdp-a1), var(--hdp-a2));
  color: var(--hdp-a-on); box-shadow: 0 2px 8px rgba(var(--hdp-a-rgb),0.28);
}
.hdp-tab:focus-visible { outline: 2px solid var(--hdp-a2); outline-offset: 2px; }

.hdp-lb-rows { min-height: 268px; }
.hdp-lb-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: 10px; font-size: 15px;
  transition: background 0.15s, transform 0.15s;
}
.hdp-lb-row:hover { background: #fafaf8; transform: translateX(3px); }
/* "You" takes the accent so it never competes with the gold medal rings above. */
.hdp-lb-row.me { background: var(--hdp-a-soft); border: 1px solid var(--hdp-a-line); animation: hdp-me-glow 3s ease-in-out infinite; }
@keyframes hdp-me-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--hdp-a-rgb),0); }
  50%      { box-shadow: 0 0 14px 1px rgba(var(--hdp-a-rgb),0.28); }
}
.hdp-lb-rank { width: 26px; font-weight: 800; color: #8d887c; font-size: 14px; text-align: center; flex-shrink: 0; }
.hdp-lb-av-wrap { position: relative; flex-shrink: 0; }
.hdp-lb-av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; display: block; }
.medal-1 .hdp-lb-av { box-shadow: 0 0 0 2.5px #fff, 0 0 0 5px #f2b200; }
.medal-2 .hdp-lb-av { box-shadow: 0 0 0 2.5px #fff, 0 0 0 5px #b9bec7; }
.medal-3 .hdp-lb-av { box-shadow: 0 0 0 2.5px #fff, 0 0 0 5px #c98a5a; }
.medal-1 .hdp-lb-rank { color: #d9a000; }
.medal-2 .hdp-lb-rank { color: #98a0ac; }
.medal-3 .hdp-lb-rank { color: #c98a5a; }
.hdp-crown {
  position: absolute; top: -13px; left: 50%;
  transform: translateX(-50%) rotate(-8deg);
  font-size: 12px; color: #f2b200;
}
.hdp-lb-name {
  flex: 1; font-weight: 600; color: #1a1a1a; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hdp-flag { font-size: 0.95em; margin-left: 7px; border-radius: 2px; vertical-align: -1px; }
.hdp-lb-score { font-weight: 800; color: #1a1a1a; font-variant-numeric: tabular-nums; }
.hdp-lb-divider { border-top: 1px dashed #e5e3dd; margin: 8px 0; }
.hdp-lb-empty { text-align: center; color: #8d887c; padding: 60px 20px; }
.hdp-lb-empty i { font-size: 30px; margin-bottom: 10px; display: block; color: #e5e0d5; }
.hdp-lb-empty p { font-size: 14px; margin: 0; }

/* -- Action strip -- */
/* Was a cream slab inside a solid-amber ring, which landed directly under the
   #FFD54F hero and read as a second yellow band. Now a white card like the two
   panels below it, with the colour reduced to a hairline that runs teal → amber
   and resolves into the amber CTA at the right end. */
.hdp-actionbar-wrap {
  margin-top: 18px; border-radius: 18px; padding: 1.5px;
  background: var(--hdp-rule);
  box-shadow: 0 4px 18px rgba(0,0,0,0.05);
}
/* Action strip now leads the section (under the hero) instead of trailing it —
   no top gap needed, add breathing room below it before the panels. */
.hdp-actionbar-top { margin-top: 0; margin-bottom: 18px; }
.hdp-actionbar {
  border-radius: 16.5px; padding: 18px 26px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: #fff;
}
.hdp-actionbar p { flex: 1; margin: 0; font-size: 15px; color: #5f5c54; min-width: 220px; }
.hdp-actionbar b { color: #1a1a1a; }

.hdp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 15px; font-weight: 700; border-radius: 12px; padding: 13px 24px;
  cursor: pointer; white-space: nowrap; border: 2px solid transparent;
  font-family: inherit; text-decoration: none;
  position: relative; overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.hdp-btn-amber {
  background: linear-gradient(135deg, #ffc107, #ffa000);
  color: #4a3000; box-shadow: 0 4px 14px rgba(255,160,0,0.35);
}
.hdp-btn-amber::after {
  content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg);
}
.hdp-btn-amber:hover::after { animation: hdp-shine 0.7s ease; }
@keyframes hdp-shine { to { left: 130%; } }
.hdp-btn-amber:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(255,160,0,0.45); color: #4a3000; }
/* Sits on a white strip now, so it carries a slightly firmer edge to stay read
   as a button rather than as plain text. */
.hdp-btn-ghost { background: #fff; color: #1a1a1a; border-color: #dcdad4; }
.hdp-btn-ghost:hover { transform: translateY(-2px); border-color: var(--hdp-a1); box-shadow: 0 6px 16px rgba(0,0,0,0.08); color: #1a1a1a; }

/* "Study with a Stranger" placeholder — a small badge marks it as not-yet-live. */
.hdp-btn-soon { position: relative; }
.hdp-soon-tag {
  font-size: 10px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase;
  color: #a15c00; background: #fff2cc; border: 1px solid #ffe08a;
  padding: 1px 7px; border-radius: 999px; margin-left: 2px; white-space: nowrap;
}

/* -- Guest join card -- */
.hdp-join { display: flex; flex-direction: column; justify-content: center; }
.hdp-join-title { margin: 0 0 8px; font-size: 22px; font-weight: 800; color: #1a1a1a; letter-spacing: -0.3px; }
.hdp-join-sub { font-size: 14.5px; color: #6f6b62; margin: 0 0 18px; line-height: 1.55; }
.hdp-join-list { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hdp-join-list li { font-size: 14.5px; color: #4a463c; font-weight: 600; }
.hdp-join-list i { color: #e59d00; width: 24px; }
.hdp-join-btns { display: flex; gap: 12px; }

/* -- Goal modal cards -- */
.hdp-goal-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.hdp-goal-card {
  position: relative; border: 2px solid #eee; border-radius: 12px;
  padding: 14px 12px; text-align: center; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.hdp-goal-card:hover { border-color: #ffd54f; }
.hdp-goal-card.active { border-color: #FFC107; background: #fffbf0; }
.hdp-goal-card i { display: block; font-size: 20px; color: #e59d00; margin-bottom: 7px; }
.hdp-goal-name { display: block; font-size: 14px; font-weight: 700; color: #1a1a1a; }
.hdp-goal-target { display: block; font-size: 12.5px; color: #999; margin-top: 3px; }
.hdp-goal-current {
  position: absolute; top: -9px; right: 10px;
  background: #FFC107; color: #4a3000;
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px;
  padding: 2px 8px; border-radius: 999px;
}

/* -- Responsive -- */
@media (max-width: 991px) {
  .hdp-grid { grid-template-columns: 1fr; }
  .hdp-lb-rows { min-height: 0; }
}
@media (max-width: 560px) {
  .hdp-panel { padding: 20px 16px; }
  .hdp-hero-num { font-size: 30px; }
  .hdp-ring, .hdp-ring svg { width: 92px; height: 92px; }
  .hdp-ring-txt b { font-size: 18px; }
  .hdp-level-row { flex-direction: column; gap: 3px; }
  .hdp-sub b { font-size: 17px; }
  .hdp-actionbar { flex-direction: column; align-items: stretch; text-align: center; }
  .hdp-goal-cards { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .hdp-flame, .hdp-fill::after, .hdp-bar, .hdp-lb-row.me { animation: none; }
  .hdp-ring-val { transition: none; }
  .hdp-btn, .hdp-lb-row { transition: none; }
}
/* ============================================================
   WAR ZONE (wz-) — hub, war page, clans, profile Wars tab
   ============================================================ */
.wz-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.wz-title { font-size: 24px; font-weight: 800; color: #1a1a1a; margin: 0; }
.wz-sub { font-size: 14px; color: #999; margin: 4px 0 0; }
.wz-start-btn {
  display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer;
  background: #FFC107; color: #1a1a1a; font-weight: 700; font-size: 14px;
  padding: 10px 22px; border-radius: 22px; transition: transform 0.15s, box-shadow 0.15s;
}
.wz-start-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(255, 193, 7, 0.4); }

.wz-search-form { position: relative; margin-bottom: 12px; }
.wz-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #bbb; font-size: 13px; }
.wz-search-input {
  width: 100%; padding: 10px 14px 10px 38px; border: 1px solid #e5e5e5; border-radius: 10px;
  font-size: 14px; background: #fff; color: #1a1a1a;
}
.wz-search-input:focus { outline: none; border-color: #FFC107; }

.wz-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 20px; }
.wz-filter-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wz-filter-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  color: #aaa; margin-right: 2px; white-space: nowrap;
}
.wz-filter-divider { width: 1px; height: 18px; background: #e2e2e2; flex: none; }
@media (max-width: 640px) {
  .wz-filter-divider { display: none; }
  .wz-filter-group { width: 100%; }
}
.wz-chip {
  display: inline-block; padding: 5px 13px; border-radius: 14px; font-size: 12.5px;
  background: #f5f5f5; color: #666; border: 1px solid #eee; text-decoration: none; white-space: nowrap;
}
.wz-chip:hover { border-color: #FFC107; color: #1a1a1a; text-decoration: none; }
.wz-chip.on { background: #1a1a1a; color: #FFC107; border-color: #1a1a1a; font-weight: 600; }

.wz-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.wz-card {
  display: block; background: #fff; border: 1px solid #f0f0f0; border-radius: 10px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); text-decoration: none; color: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
}
.wz-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); text-decoration: none; color: inherit; }
.wz-card.official { border: 1.5px solid #1a1a1a; }
.wz-card-cover { height: 96px; background-size: cover; background-position: center; }
.wz-card-body { padding: 16px; }
.wz-card-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.wz-badge {
  display: inline-block; padding: 2px 9px; border-radius: 5px; font-size: 10.5px;
  font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
}
.wz-badge.clan_war { background: #FDECEA; color: #C0392B; }
.wz-badge.crown { background: #FFF6D9; color: #B7791F; }
.wz-badge.duel { background: #EAF2FD; color: #2C5FA8; }
.wz-badge.official { background: #1a1a1a; color: #FFC107; }
.wz-badge.joined { background: #E8F5E9; color: #2E7D32; }
.wz-badge.live { background: #2E7D32; color: #fff; }
.wz-badge.waiting { background: #FFF6D9; color: #B7791F; }
.wz-badge.upcoming { background: #EAF0FB; color: #2C5FA8; }

/* Scheduled-war countdown, shown inside the dark arena card. */
.wz-countdown { text-align: center; padding: 4px 36px 6px; }
.wz-countdown-label {
  display: block; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase;
  color: rgba(255,255,255,0.55); margin-bottom: 10px;
}
.wz-countdown-clock { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.wz-cd-unit {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px; padding: 8px 12px; min-width: 54px;
}
.wz-cd-unit b { font-size: 22px; font-weight: 800; color: #FFC107; line-height: 1; font-variant-numeric: tabular-nums; }
.wz-cd-unit span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255,255,255,0.5); margin-top: 5px; }
@media (max-width: 767px) { .wz-countdown { padding: 4px 20px 6px; } }
.wz-badge.over { background: #f0f0f0; color: #888; }
.wz-card-title { font-size: 15px; font-weight: 700; color: #1a1a1a; margin: 0 0 4px; }
.wz-card-meta { font-size: 12px; color: #999; margin: 0 0 2px; }
.wz-card-creator { font-size: 11.5px; color: #bbb; margin: 8px 0 0; }
.wz-empty { text-align: center; padding: 48px 20px; background: #fff; border: 1px dashed #e5e5e5; border-radius: 10px; }
.wz-foot-note { font-size: 12.5px; color: #999; text-align: center; margin-top: 24px; }
.wz-foot-note a { color: #FFA000; text-decoration: none; }

/* Wizard extras (inside .ch-modal) */
.wz-free-banner {
  background: #FFF6D9; border: 1px solid #F5DFA0; border-radius: 8px;
  padding: 9px 14px; font-size: 13px; color: #7A5C10; font-weight: 600; margin-bottom: 14px;
}
.wz-format-cards { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.wz-format-card {
  display: flex; flex-direction: column; gap: 2px; cursor: pointer;
  border: 1.5px solid #eee; border-radius: 10px; padding: 12px 16px; transition: border-color 0.15s;
}
.wz-format-card:hover { border-color: #FFD54F; }
.wz-format-card.active { border-color: #FFC107; background: #FFFDF4; }
.wz-format-icon { font-size: 20px; }
/* Warm amber reads on both the navy modal (non-selected cards) and the cream
   selected card — black was invisible against the dark dialog. */
.wz-format-card strong { font-size: 14px; color: #D97706; }
.wz-format-desc { font-size: 12px; color: #999; }
.wz-format-fee { font-size: 12px; font-weight: 700; color: #B7791F; margin-top: 4px; }
.wz-format-fee s { color: #bbb; font-weight: 400; margin-right: 4px; }
.wz-format-fee em { font-style: normal; font-weight: 400; color: #999; }
.wz-two-col { display: flex; gap: 10px; }
.wz-two-col > div { flex: 1; }
.wz-clan-founder-box { background: #FBFAF6; border: 1px solid #eee; border-radius: 10px; padding: 12px 14px; margin-top: 14px; }
.wz-file-input { font-size: 12.5px; color: #666; width: 100%; }
.wz-duel-note { font-size: 12.5px; color: #999; margin: 12px 0 0; }
.wz-error { color: #f44336; font-size: 13px; margin: 12px 0 0; }
.wz-back-btn {
  display: block; width: 100%; background: none; border: none; cursor: pointer;
  color: #999; font-size: 13px; margin-top: 10px; padding: 6px;
}
.wz-back-btn:hover { color: #1a1a1a; }

/* War page — clan grid / crown board / duel (extends dark .ch-page-card) */
.wz-clan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 36px 8px; }
.wz-clan-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 14px; }
.wz-clan-top { display: flex; align-items: center; gap: 10px; }
.wz-clan-crest {
  width: 40px; height: 40px; border-radius: 10px; flex: none; background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  background-size: cover; background-position: center; overflow: hidden;
}
.wz-clan-name { font-weight: 700; font-size: 14px; color: #fff; margin: 0; }
.wz-clan-members { font-size: 11px; color: rgba(255,255,255,0.45); margin: 0; }
.wz-clan-score-row { display: flex; justify-content: space-between; font-size: 11.5px; color: rgba(255,255,255,0.55); margin: 10px 0 4px; }
.wz-clan-score-row strong { color: #fff; }
.wz-clan-bar { height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; }
.wz-clan-bar i { display: block; height: 100%; background: #FFC107; border-radius: 4px; }
.wz-clan-bar.winner i { background: #4caf50; }
.wz-clan-join-btn {
  border: none; cursor: pointer; background: #FFC107; color: #1a1a1a; font-weight: 700;
  font-size: 12px; padding: 6px 14px; border-radius: 14px; margin-left: auto; white-space: nowrap;
}
.wz-clan-join-btn:disabled { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.5); cursor: default; }
.wz-start-clan-card {
  grid-column: 1 / -1; border: 1px dashed rgba(255,255,255,0.25); border-radius: 10px;
  padding: 16px; text-align: center; color: rgba(255,255,255,0.6); font-size: 13px;
}
.wz-start-clan-card strong { color: #fff; }
.wz-board { padding: 0 36px 8px; display: flex; flex-direction: column; gap: 8px; }
.wz-board-row {
  display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 10px 14px;
}
.wz-board-row.me { border-color: #FFC107; }
.wz-board-rank { font-weight: 800; width: 22px; text-align: center; color: rgba(255,255,255,0.6); font-size: 13px; }
.wz-board-name { flex: 1; font-size: 13.5px; color: #fff; }
.wz-board-score { font-weight: 700; font-size: 13.5px; color: #FFC107; }
.wz-duel-face { flex: 1; text-align: center; }
.wz-duel-vs { font-weight: 800; font-size: 16px; color: rgba(255,255,255,0.4); }
.wz-duel-score { font-size: 14px; font-weight: 700; color: #fff; margin-top: 6px; }
.wz-duel-row { display: flex; align-items: center; gap: 12px; padding: 4px 36px 8px; }

/* Profile Wars tab */
.wz-tab-stats { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.wz-tab-stat { background: #fff; border: 1px solid #f0f0f0; border-radius: 10px; padding: 10px 18px; text-align: center; }
.wz-tab-stat strong { font-size: 17px; color: #1a1a1a; display: block; }
.wz-tab-stat.won strong { color: #B7791F; }
.wz-tab-stat span { font-size: 10.5px; color: #999; letter-spacing: 0.6px; }
.wz-tab-label { font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: #8a8a8a; margin: 14px 0 8px; }
.wz-war-row {
  display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #f0f0f0;
  border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; text-decoration: none; color: inherit;
}
.wz-war-row:hover { border-color: #FFC107; text-decoration: none; color: inherit; }
.wz-war-result { font-weight: 800; width: 22px; text-align: center; font-size: 14px; }
.wz-war-result.w { color: #2E7D32; }
.wz-war-result.l { color: #C62828; }
.wz-war-row-title { flex: 1; font-size: 13.5px; font-weight: 600; color: #1a1a1a; }
.wz-war-row-title small { font-weight: 400; color: #999; }
.wz-war-row-date { font-size: 11.5px; color: #999; white-space: nowrap; }

@media (max-width: 767px) {
  .wz-grid { grid-template-columns: 1fr; }
  .wz-clan-grid { grid-template-columns: 1fr; padding: 0 20px 8px; }
  .wz-board { padding: 0 20px 8px; }
  .wz-duel-row { padding: 4px 20px 8px; }
  .wz-two-col { flex-direction: column; }
}

/* The War Zone brand mark — the Tamil aytha ezhuthu (akhu). The glyph's three
   dots sit small at text size, so it renders enlarged relative to its context.
   Color: inherits from the surrounding text (currentColor) so it always matches
   whatever heading/button label it sits next to, rather than clashing with a
   fixed brand color. `top` nudges it down slightly — the glyph's ink sits in
   the upper half of its em-box, so box-centering alone reads as "too high". */
.wz-akku { font-weight: 800; font-style: normal; font-size: 1.4em; line-height: 1; position: relative; top: 0.06em; }
/* In flex-centered buttons the glyph's ink sits low against the cap-height of the
   label, so nudge it up (the inline heading nudge above pushes the wrong way here). */
.hdp-btn .wz-akku, .wz-start-btn .wz-akku { top: -0.06em; }
/* Explicit accent color for icon-only spots on a dark surface with no adjacent
   text to match (e.g. the wizard's modal header icon). */
.wz-akku.on-dark { color: #FFC107; }
/* The wizard header glyph sizes itself — don't let the relative bump shrink it. */
.ch-modal-icon.wz-akku { font-size: 3.2rem; }

/* The home action-strip button is an anchor — keep the global a:hover underline off it. */
a.hdp-btn:hover, .hdp-btn:hover, a.wz-chip:hover { text-decoration: none; }