/* ======================================================
   FONT FALLBACK BUNDLE — ANTI ERR_ABORTED Google Fonts!
   Kalau Google Fonts aborted, browser akan guna LOCAL SYSTEM FONTS
   below (semua OS ada — Apple SF Pro / Segoe UI / Roboto).
   ====================================================== */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: local('.SF Pro Text'), local('.SF Pro Display'), local('-apple-system'),
         local('BlinkMacSystemFont'), local('Segoe UI'), local('Roboto'),
         local('Helvetica Neue'), local('Helvetica'), local('Arial'),
         local('system-ui');
}
@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: local('.SF Pro Text'), local('.SF Pro Display'), local('-apple-system'),
         local('BlinkMacSystemFont'), local('Segoe UI'), local('Roboto'),
         local('Helvetica Neue'), local('Helvetica'), local('Arial'),
         local('system-ui');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: local('.SF Mono'), local('SF Mono'), local('SF Pro Mono'), local('Menlo'),
         local('Consolas'), local('Liberation Mono'), local('Monaco'),
         local('DejaVu Sans Mono'), local('Courier New'),
         local('ui-monospace'), local('monospace');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: local('.SF Mono'), local('SF Mono'), local('SF Pro Mono'), local('Menlo'),
         local('Consolas'), local('Liberation Mono'), local('Monaco'),
         local('ui-monospace'), local('monospace');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    position: relative;
    background: transparent;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, #4f46e5 0%, #6d28d9 50%, #1e1b4b 100%);
    z-index: -2;
    pointer-events: none;
}

.bg-video {
    position: fixed;
    inset: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: -1 !important;
    pointer-events: none;
    background: #312e81;
}

/* ================================
   FALLBACK BACKGROUND = bg.jpg (PLAS ART LETTERS) 
   + PURPLE GRADIENT OVERLAY 
   + KEN BURNS SLOW ZOOM ANIMATION
   KEDUA-DUA LOGIN & REGISTER SAMA 100%
   ================================ */
.bg-video--fallback {
    background:
        /* Top overlay gradient purple sparkle subtle */
        radial-gradient(circle at 14% 22%, rgba(124, 58, 237, 0.18) 0%, transparent 52%),
        radial-gradient(circle at 86% 14%, rgba(59, 130, 246, 0.14) 0%, transparent 48%),
        radial-gradient(circle at 78% 82%, rgba(192, 38, 211, 0.12) 0%, transparent 55%),
        /* BASE IMAGE - PLAS AI geometric letters art (SAMA MACAM LOGIN PAGE) */
        url('assets/images/bg.jpg') center center / cover no-repeat !important;
    background-size:
        200% 200%,
        200% 200%,
        200% 200%,
        cover !important;
    background-repeat: no-repeat !important;
    animation: bgKenBurns 28s ease-in-out infinite alternate, bgMeshShift 16s ease-in-out infinite;
    overflow: hidden;
    display: block;
    visibility: visible;
    opacity: 1;
}

.bg-gradient-mesh {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(1200px 600px at 10% 120%, rgba(236, 72, 153, 0.10) 0%, transparent 60%),
        radial-gradient(900px 500px at 100% -10%, rgba(16, 185, 129, 0.07) 0%, transparent 55%),
        radial-gradient(700px 360px at 50% 50%, rgba(255, 255, 255, 0.04) 0%, transparent 70%);
    mix-blend-mode: multiply;
    filter: blur(1px);
    animation: bgMeshMove 22s ease-in-out infinite alternate;
    pointer-events: none;
    display: block;
    visibility: visible;
}

/* Ken Burns: slow zoom in + subtle pan 28s alternate */
@keyframes bgKenBurns {
    0%   { transform: scale(1.00) translate3d(0, 0, 0); }
    100% { transform: scale(1.15) translate3d(-12px, -8px, 0); }
}

@keyframes bgMeshShift {
    0%   { background-position: 0% 0%, 100% 0%, 100% 100%, center center; }
    33%  { background-position: 18% 12%, 76% 8%, 82% 92%, center center; }
    66%  { background-position: 8% 22%, 88% 20%, 74% 74%, center center; }
    100% { background-position: 0% 0%, 100% 0%, 100% 100%, center center; }
}

@keyframes bgMeshMove {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(-12px, 10px, 0) scale(1.04); }
    100% { transform: translate3d(10px, -8px, 0) scale(1.02); }
}

/* Force body::before tak block bg fallback */
.auth-body::before { z-index: -3 !important; background: #fdf9f4 !important; }
.auth-body .bg-video--fallback { z-index: -1 !important; }
.auth-body .login-wrapper,
.auth-body .register-wrapper { position: relative; z-index: 5; }
.auth-body { background: #fdf9f4 !important; }

.login-wrapper {
    width: 100%;
    max-width: 320px;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.login-card {
    width: 100%;
    background: #ffffff;
    border-radius: 10px;
    padding: 28px 24px 20px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.logo-container {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

.logo {
    height: 36px;
    width: auto;
    object-fit: contain;
    animation: logoHueShift 9s linear infinite;
    filter: hue-rotate(0deg);
}

@keyframes logoHueShift {
    0%   { filter: hue-rotate(0deg) saturate(1); }
    25%  { filter: hue-rotate(35deg) saturate(1.1); }
    50%  { filter: hue-rotate(85deg) saturate(1.15); }
    75%  { filter: hue-rotate(180deg) saturate(1.05); }
    100% { filter: hue-rotate(360deg) saturate(1); }
}

.login-title {
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    color: #4f46e5;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.login-subtitle {
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    color: #6b7280;
    line-height: 1.45;
    margin-bottom: 20px;
}

.login-form {
    width: 100%;
}

.form-group {
    margin-bottom: 10px;
}

.form-input {
    width: 100%;
    padding: 9px 12px;
    font-size: 12px;
    font-family: inherit;
    color: #111827;
    background: #f9fafb;
    border: 1px solid #f3f4f6;
    border-radius: 6px;
    outline: none;
    transition: all 0.18s ease;
}

.form-input::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

.form-input:hover {
    border-color: #e5e7eb;
    background: #ffffff;
}

.form-input:focus {
    border-color: #4f46e5;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.08);
}

.form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    margin-bottom: 18px;
}

.btn-login {
    flex: 0 0 auto;
    min-width: 84px;
    padding: 8px 18px;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    color: #ffffff;
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.18s ease;
    letter-spacing: 0.01em;
}

.btn-login:hover {
    background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%);
    transform: translateY(-0.5px);
    box-shadow: 0 3px 10px rgba(79, 70, 229, 0.25);
}

.btn-login:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(79, 70, 229, 0.2);
}

.forgot-link {
    font-size: 11px;
    font-weight: 400;
    color: #4b5563;
    text-decoration: none;
    transition: color 0.15s ease;
}

.forgot-link:hover {
    color: #4f46e5;
    text-decoration: underline;
}

.register-section {
    text-align: center;
    padding-top: 2px;
}

.register-link {
    font-size: 11px;
    font-weight: 500;
    color: #111827;
    text-decoration: none;
    transition: color 0.15s ease;
}

.register-link:hover {
    color: #4f46e5;
    text-decoration: underline;
}

.register-wrapper {
    max-width: 520px;
}

.register-card {
    padding: 26px 26px 22px;
}

.register-title {
    text-align: left;
    font-size: 17px;
    margin-bottom: 6px;
}

.register-subtitle {
    text-align: left;
    margin-bottom: 16px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 0;
}

.form-group--full {
    margin-bottom: 10px;
}

.form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 11px 11px;
    padding-right: 32px;
    cursor: pointer;
}

.form-select option {
    color: #111827;
    background: #ffffff;
}

.upload-section {
    margin-top: 4px;
    margin-bottom: 16px;
}

.upload-title {
    font-size: 12px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 3px;
}

.upload-subtitle {
    font-size: 11px;
    font-weight: 400;
    color: #6b7280;
    margin-bottom: 10px;
}

.upload-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 14px;
    font-size: 11px;
    font-weight: 500;
    font-family: inherit;
    color: #111827;
    background: #ffffff;
    border: 1.5px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.18s ease;
    user-select: none;
}

.upload-btn:hover {
    border-color: #4f46e5;
    background: #f5f3ff;
    color: #4f46e5;
}

.upload-btn:hover svg {
    stroke: #4f46e5;
}

.upload-btn svg {
    flex-shrink: 0;
    transition: stroke 0.18s ease;
}

.register-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.btn-register {
    min-width: 108px;
    padding: 8px 22px;
}

.back-login {
    margin-top: 2px;
}

.dashboard-body {
    background: #f5f6fa;
    background-image: none;
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
    color: #111827;
}

.app-layout {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

.sidebar {
    width: 248px;
    background: #ffffff;
    border-right: 1px solid #eef0f5;
    padding: 20px 16px 18px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
}

.sidebar-logo {
    padding: 4px 8px 18px;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 14px;
}

.sidebar-logo__img {
    height: 30px;
    width: auto;
    object-fit: contain;
    display: block;
}

.sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sidebar-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9ca3af;
    padding: 6px 10px 4px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 7px;
    text-decoration: none;
    color: #4b5563;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s ease;
    cursor: pointer;
    line-height: 1.2;
}

.sidebar-link:hover {
    background: #f5f3ff;
    color: #4f46e5;
}

.sidebar-link--active {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.12) 0%, rgba(139, 92, 246, 0.10) 100%);
    color: #4f46e5;
    font-weight: 600;
}

.sidebar-link--active .sidebar-icon {
    stroke: #4f46e5;
}

.sidebar-link--logout {
    color: #ef4444;
}

.sidebar-link--logout:hover {
    background: #fef2f2;
    color: #dc2626;
}

.sidebar-link--logout:hover .sidebar-icon {
    stroke: #dc2626;
}

.sidebar-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke: #6b7280;
    transition: stroke 0.15s ease;
}

.sidebar-link:hover .sidebar-icon {
    stroke: currentColor;
}

.sidebar-footer {
    padding-top: 12px;
    border-top: 1px solid #f3f4f6;
    margin-top: 8px;
}

.app-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 28px;
    background: #ffffff;
    border-bottom: 1px solid #eef0f5;
    position: sticky;
    top: 0;
    z-index: 10;
}

.topbar__left {
    flex: 1;
    max-width: 460px;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f9fafb;
    border: 1px solid #f3f4f6;
    border-radius: 8px;
    padding: 8px 12px;
    transition: all 0.18s ease;
}

.search-box:focus-within {
    background: #ffffff;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.08);
}

.search-input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-family: inherit;
    font-size: 12px;
    color: #111827;
}

.search-input::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

.topbar__right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: #f9fafb;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.15s ease;
}

.icon-btn:hover {
    background: #f5f3ff;
    color: #4f46e5;
}

.icon-btn__badge {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 14px;
    height: 14px;
    padding: 0 4px;
    border-radius: 7px;
    background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
}

.user-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px 5px 6px;
    background: #f9fafb;
    border: 1px solid #f3f4f6;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.18s ease;
}

.user-chip:hover {
    background: #ffffff;
    border-color: #e5e7eb;
}

.user-chip__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f46e5 0%, #8b5cf6 100%);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-chip__meta {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.user-chip__name {
    font-size: 12px;
    font-weight: 600;
    color: #111827;
}

.user-chip__role {
    font-size: 10px;
    font-weight: 400;
    color: #6b7280;
}

.content {
    flex: 1;
    padding: 24px 28px 32px;
    overflow-x: hidden;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.page-title {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 3px;
    letter-spacing: -0.02em;
}

.page-subtitle {
    font-size: 13px;
    color: #6b7280;
    font-weight: 400;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    color: #ffffff;
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.18);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%);
    transform: translateY(-0.5px);
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.28);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 5px rgba(79, 70, 229, 0.2);
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 22px;
}

.stat-card {
    background: #ffffff;
    border: 1px solid #eef0f5;
    border-radius: 10px;
    padding: 16px;
    transition: all 0.18s ease;
}

.stat-card:hover {
    border-color: #e0e7ff;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(17, 24, 39, 0.06);
}

.stat-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.stat-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-card__icon svg {
    stroke: currentColor;
    width: 18px;
    height: 18px;
}

.stat-card__icon--indigo {
    background: #eef2ff;
    color: #4f46e5;
}

.stat-card__icon--amber {
    background: #fffbeb;
    color: #d97706;
}

.stat-card__icon--emerald {
    background: #ecfdf5;
    color: #059669;
}

.stat-card__icon--rose {
    background: #fff1f2;
    color: #e11d48;
}

.stat-card__trend {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 6px;
}

.stat-card__trend--up {
    background: #ecfdf5;
    color: #059669;
}

.stat-card__value {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    line-height: 1.1;
    margin-bottom: 3px;
    letter-spacing: -0.02em;
}

.stat-card__label {
    font-size: 11px;
    color: #6b7280;
    font-weight: 500;
}

.content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    grid-auto-rows: min-content;
}

.panel {
    background: #ffffff;
    border: 1px solid #eef0f5;
    border-radius: 12px;
    padding: 18px;
}

.panel--span {
    grid-column: 1 / -1;
}

.panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.panel__title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    letter-spacing: -0.01em;
}

.panel__action {
    font-size: 11px;
    font-weight: 500;
    color: #4f46e5;
    text-decoration: none;
    transition: color 0.15s ease;
}

.panel__action:hover {
    color: #4338ca;
    text-decoration: underline;
}

.course-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.course-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    background: #f9fafb;
    border: 1px solid #f3f4f6;
    border-radius: 9px;
    transition: all 0.18s ease;
}

.course-item:hover {
    background: #ffffff;
    border-color: #e0e7ff;
    transform: translateX(2px);
}

.course-item__thumb {
    width: 44px;
    height: 44px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.course-item__thumb--violet { background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%); }
.course-item__thumb--cyan { background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%); }
.course-item__thumb--amber { background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%); }

.course-item__body {
    flex: 1;
    min-width: 0;
}

.course-item__title {
    font-size: 12px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.course-item__meta {
    font-size: 10px;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 6px;
}

.progress-bar {
    width: 100%;
    height: 4px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.progress-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, #4f46e5 0%, #8b5cf6 100%);
    border-radius: 999px;
    transition: width 0.3s ease;
}

.course-item__btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: none;
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.22);
}

.course-item__btn:hover {
    background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%);
    transform: scale(1.05);
}

.progress-ring-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 4px 4px 2px;
}

.progress-ring {
    position: relative;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
}

.progress-ring svg {
    display: block;
}

.progress-ring__value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 26px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.02em;
}

.progress-ring__label {
    font-size: 11px;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 12px;
}

.legend-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    width: 100%;
    padding-top: 12px;
    border-top: 1px solid #f3f4f6;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.legend-dot--emerald { background: #10b981; }
.legend-dot--amber { background: #f59e0b; }
.legend-dot--gray { background: #d1d5db; }

.legend-value {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    line-height: 1.1;
}

.legend-text {
    font-size: 10px;
    font-weight: 500;
    color: #6b7280;
    line-height: 1.1;
}

.course-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.course-card {
    background: #ffffff;
    border: 1px solid #eef0f5;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.18s ease;
    cursor: pointer;
}

.course-card:hover {
    transform: translateY(-2px);
    border-color: #e0e7ff;
    box-shadow: 0 8px 20px rgba(17, 24, 39, 0.06);
}

.course-card__cover {
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.03em;
}

.course-card__cover--1 { background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%); }
.course-card__cover--2 { background: linear-gradient(135deg, #0891b2 0%, #3b82f6 100%); }
.course-card__cover--3 { background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%); }

.course-card__body {
    padding: 12px 13px 13px;
}

.course-card__tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 500;
    color: #6b7280;
    background: #f3f4f6;
    padding: 3px 7px;
    border-radius: 5px;
    margin-bottom: 6px;
}

.course-card__title {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    line-height: 1.35;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}

.course-card__meta {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    font-size: 10px;
    color: #6b7280;
    font-weight: 500;
}

@media (max-width: 1100px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .content-grid { grid-template-columns: 1fr; }
    .course-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
    .sidebar { display: none; }
    .topbar { padding: 12px 18px; }
    .content { padding: 18px; }
    .course-grid { grid-template-columns: 1fr; }
    .legend-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 480px) {
    body {
        padding: 16px;
    }

    .login-card {
        padding: 24px 18px 18px;
    }

    .register-card {
        padding: 22px 16px 18px;
    }

    .logo {
        height: 32px;
    }

    .form-row,
    .upload-row {
        grid-template-columns: 1fr;
    }
}

body.lecture-body {
    background: #ffffff !important;
    background-image: none !important;
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
    color: #111827;
    min-height: auto;
    display: block;
}

body.learning-page-body {
    background-color: #3816D0 !important;
    background-image: url('assets/images/bgaitoolkit.png') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-blend-mode: screen;
}
body.learning-page-body::before { display: none !important; }
body.learning-page-body .lecture-app {
    background: transparent;
    position: relative;
    z-index: 1;
}

/* ============== LEARNING COURSE / AI TOOLKIT ============== */
.lc-container {
    position: relative;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.08);
    padding: 30px 20px 20px;
    flex: 1;
    min-height: 0;
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lc-tabs {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(-60%);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    z-index: 10;
}
/* Modifier Itinerary — INHERIT default base class (position: absolute + translateY -60%)
   ✅ SYMMETRIC PADDING = SAMA MACAM default learning/plasvio = 3 tabs PERFECT CENTER bila resize apa pun browser
   Back button absolute OUTSIDE FLOW — tak kacau langsung calculation center tabs
*/
.lc-tabs--withback {
    justify-content: center;
    padding: 0 24px;  /* SAMA MACAM default: LEFT = RIGHT = 24px simetri ✅ */
}
.lc-tabs__spacer { display: none; }

/* Back button — ABSOLUTE POSITION LUAR FLOW tabs
   Reference = .lc-tabs (position absolute = 100% width lc-container relative parent)
   Align kiri 24px = sama padding edge tabs container
   3 tabs justify center SIMETRI → gap first tab ke Back button lebih besar cukup besar (tidak overlap pada mana2 saiz skrin)
*/
.lc-tabs--withback .lc-back-btn {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
}
/* saiz < 640px (mobile kecil): 3 tabs + Back potensi overlap, turun Back button bawah tabs sahaja */
@media (max-width: 640px) {
    .lc-tabs--withback .lc-back-btn {
        left: 50%;
        transform: translate(-50%, calc(-50% - 42px));
    }
}

/* Back button inside tabs row (sebaris dengan pills) */
.lc-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px 8px 13px;
    border-radius: 999px;
    border: 2px solid #ffffff;
    background: #ffffff;
    color: #111827;
    text-decoration: none;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.18s ease;
    box-sizing: border-box;
    white-space: nowrap;
}
.lc-back-btn:hover {
    color: #2563eb;
    border-color: #e0e7ff;
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(37, 99, 235, 0.12);
}
.lc-back-btn__icon {
    width: 16px; height: 16px; display: block; flex-shrink: 0;
    stroke: currentColor;
}
.lc-back-btn__label { line-height: 1; }

.lc-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 999px;
    padding: 8px 18px 8px 14px;
    cursor: pointer;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #374151;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-decoration: none;
    line-height: 1.2;
}
/* Prevent CSS display:inline-flex from overriding native HTML hidden attribute
   GUARANTEED hide — both HTML hidden attr AND .lc-tab--hidden class supported
*/
.lc-tab[hidden],
.lc-tab--hidden {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    overflow: hidden !important;
}
.lc-tab:hover {
    transform: translateY(-1px);
}
.lc-tab--active {
    background: #10b981;
    border-color: #ffffff;
    color: #ffffff;
}
.lc-tab--active:hover {}


.lc-tab__icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
}
.lc-tab:not(.lc-tab--active) .lc-tab__icon,
.lc-tab:not(.lc-tab--active) .lc-tab__icon--inline {
    filter: saturate(0%) brightness(0.55) contrast(1.15);
}
.lc-tab:not(.lc-tab--active) .lc-tab__icon--inline { stroke: #374151 !important; }
.lc-tab__icon--inline { width: 18px; height: 18px; }

.lc-tab__label { line-height: 1; }

.lc-tab__badge {
    position: absolute;
    top: -14px;
    right: 6px;
    background: #fbbf24;
    color: #78350f;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    letter-spacing: 0.3px;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(251, 191, 36, 0.45);
}
.lc-tab__badge--comingsoon,
.lc-tab__badge--hidden { display: none !important; }

.lc-hero {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lc-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.15) 0%, rgba(15, 23, 42, 0.65) 100%);
}
.lc-hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 22px 20px;
    max-width: 780px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}
.lc-hero__title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 800;
    font-size: 28px;
    color: #ffffff;
    margin: 0 0 8px;
    letter-spacing: -0.3px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
.lc-hero__subtitle {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #f8fafc;
    margin: 0;
    line-height: 1.5;
    opacity: 0.95;
    text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}

/* ============ PLAS-ITINERA PREFERENCES FORM ============ */
.pref-form {
    max-width: 860px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 36px 44px 12px;
    width: 100%;
    box-sizing: border-box;
}
.pref-form__head { margin-bottom: 10px; }
.pref-form__title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: #111827;
    margin: 0 0 10px;
    letter-spacing: -0.2px;
}
.pref-form__subtitle {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
    color: #4b5563;
    margin: 0 0 20px;
}

.pref-row {
    padding: 26px 0;
    border-bottom: 1px solid #edf0f3;
}
.pref-row--last { border-bottom: none; padding-bottom: 18px; }

.pref-row__label {
    display: block;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #111827;
    margin-bottom: 14px;
}
.pref-row__hint {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.55;
    color: #475569;
    margin: 0 0 14px;
}
.pref-chipgroup__label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: #111827;
    margin: 0 0 10px;
    display: block;
}

/* --- Inputs & date --- */
.pref-input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 14px;
    color: #111827;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
}
.pref-input::placeholder { color: #9ca3af; opacity: 1; }
.pref-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.pref-date { position: relative; max-width: 360px; display: flex; align-items: center; }
.pref-input--date { padding-right: 54px; }
.pref-date__icon {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 42px;
    border: none;
    background: #f3f4f6;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}
.pref-date__icon:hover { background: #e5e7eb; }

/* --- Counter +/- (days + pax) --- */
.pref-counter {
    display: inline-flex;
    align-items: center;
    gap: 16px;
}
.pref-counter__btn {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}
.pref-counter__btn:hover {
    border-color: #64748b;
    background: #f8fafc;
}
.pref-counter__value {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: #1d4ed8;
    color: #ffffff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 700;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(29, 78, 216, 0.25);
}

/* --- Chip groups (budget / companion / activities) --- */
.pref-chipgroup {
    display: inline-flex;
    gap: 12px;
    align-items: center;
}
.pref-chipgroup--wrap {
    display: flex;
    flex-wrap: wrap;
    row-gap: 10px;
    column-gap: 12px;
}
.pref-chip { cursor: pointer; display: inline-flex; }
.pref-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.pref-chip__inner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #111827;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.2;
    user-select: none;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.pref-chip__inner--withicon { gap: 8px; padding-left: 12px; }
.pref-chip__icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}
.pref-chip:hover .pref-chip__inner { border-color: #cbd5e1; background: #f8fafc; }
.pref-chip--active .pref-chip__inner,
.pref-chip input:checked + .pref-chip__inner {
    border-color: #2563eb;
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(37,99,235,0.1);
}

/* --- Submit button --- */
.pref-submit-wrap {
    max-width: 860px;
    margin: 28px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.pref-submit-btn {
    padding: 13px 56px;
    background: #111827;
    color: #10b981;
    border: 2px solid #10b981;
    border-radius: 12px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: all 0.18s ease;
    display: inline-block;
    text-decoration: none;
    text-align: center;
    line-height: 1.2;
    box-sizing: border-box;
}
.pref-submit-btn:hover {
    background: #10b981;
    color: #0b3d2b;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(16,185,129,0.28);
}

/* Responsive pref form smaller screens */
@media (max-width: 760px) {
    .pref-form { padding: 24px 18px 8px; border-radius: 12px; }
    .pref-row { padding: 20px 0; }
    .pref-counter { gap: 12px; }
    .pref-submit-btn { padding: 12px 40px; width: 100%; }
}

/* ============ ITINERARY RESULT PAGE ============ */
.it-hero {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100px;
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}
.it-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(15,23,42,0.72) 0%, rgba(15,23,42,0.35) 55%, rgba(15,23,42,0.65) 100%);
}
.it-hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 26px;
}
.it-hero__text { flex: 1; min-width: 0; }
.it-hero__title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #f8fafc;
    margin: 0 0 6px;
    letter-spacing: -0.2px;
    line-height: 1.25;
}
.it-hero__meta {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.5;
    color: #cbd5e1;
    margin: 0;
}
.it-hero__share {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.22);
    background: rgba(15, 23, 42, 0.42);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.15s ease;
    flex-shrink: 0;
    backdrop-filter: blur(4px);
}
.it-hero__share:hover { background: rgba(15,23,42,0.75); transform: scale(1.06); }

/* Itinerary generic sections */
.it-section {
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}
.it-section + .it-section,
.it-day + .it-day,
.it-section + .it-day,
.it-day + .it-section {
    margin-top: 12px;
}

/* Budget breakdown card (white) */
.it-section--budgetbreak {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 18px 22px;
    margin-top: 12px;
}
.it-budget {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 18px;
    align-items: stretch;
}
.it-budget__title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.3px;
    color: #0f172a;
    margin: 0 0 9px;
    text-transform: uppercase;
}
.it-budget__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.it-budget__list li {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.55;
    color: #334155;
}
.it-budget__list li span { color: #475569; font-weight: 600; }
.it-budget__right {
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px dashed #e5e7eb;
    padding-left: 18px;
    min-height: 100%;
}
.it-budget__img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 220px;
    object-fit: contain;
    display: block;
    border-radius: 10px;
}

/* Nav pills 5 quick links */
.it-navpills {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}
.it-pill {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    padding: 12px 10px 14px;
    min-height: 60px;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    display: flex;
    align-items: flex-end;
    text-align: left;
    color: #ffffff;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.15);
}
.it-pill:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.22); }
.it-pill__title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 700;
    font-size: 11px;
    line-height: 1.3;
    color: #ffffff;
    letter-spacing: 0.05px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* Itinerary Day card */
.it-day { max-width: 960px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.it-day__head,
.it-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 16px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px;
    min-height: 38px;
    border: 1px solid rgba(15, 118, 110, 0.6);
}
.it-day__title,
.it-section__title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.2px;
    color: #ffffff;
    margin: 0;
    line-height: 1.35;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.it-day__btn {
    flex-shrink: 0;
    padding: 6px 14px;
    background: #10b981;
    color: #022c22;
    border: 1px solid #059669;
    border-radius: 999px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 700;
    font-size: 11px;
    cursor: pointer;
    transition: filter 0.15s ease;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
}
.it-day__btn:hover { filter: brightness(1.08); }

.it-day__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 10px;
}
.it-day__grid--single { grid-template-columns: 1fr; }
.it-block {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 16px 12px;
    position: relative;
}
.it-block--wide { max-width: calc(50% - 7px); }
.it-block__time {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.15px;
    color: #0f172a;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.it-block__list {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.it-block__list li {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.55;
    color: #334155;
}
.it-block__list li span {
    color: #0f172a;
    font-weight: 600;
}
.it-block__footicon {
    display: flex;
    justify-content: flex-end;
    opacity: 0.85;
}

/* Section card grid (accomodation 2x2, money tips 1x2, essential 2x2, local 1x2) */
.it-cardgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 10px;
}
.it-cardgrid--4 { grid-template-columns: repeat(2, 1fr); }
.it-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 16px;
    position: relative;
}
.it-card--plain { background: #f8fafc; }
.it-card--gradient {
    background: linear-gradient(135deg, #eff6ff 0%, #ffffff 60%, #f0fdf4 100%);
    border-color: #bfdbfe;
}
.it-card__title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #0f172a;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.35;
}
.it-card__badge {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 600;
    font-size: 10px;
    color: #92400e;
    background: #fde68a;
    padding: 2px 8px;
    border-radius: 999px;
}
.it-card__list {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.it-card__list li {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.55;
    color: #334155;
}
.it-card__list li span {
    color: #0f172a;
    font-weight: 600;
}
.it-card__list--plain li { font-size: 13px; }
.it-card__bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.it-card__bullets li {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.55;
    color: #334155;
    padding-left: 14px;
    position: relative;
}
.it-card__bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: #0891b2;
}
.it-card__bullets--small li { font-size: 11.5px; }
.it-card__bullets li span {
    color: #0f172a;
    font-weight: 700;
}
.it-card__foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
    opacity: 0.9;
}
.it-card__foot--blue { justify-content: flex-start; opacity: 1; }
.it-card__footimg {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
}

/* ===================== PLAS VIO (AI VIDEO GENERATOR) ===================== */
.lc-hero--plasvio {
    min-height: 210px;
    display: block;
    align-items: flex-start;
}
.lc-hero__overlay--plasvio {
    background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.08) 100%);
}
.lc-hero__content--plasvio {
    max-width: 1100px;
    padding: 16px 20px 14px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    display: block;
}
.pv-hero__title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 800;
    font-size: 38px;
    line-height: 1.0;
    letter-spacing: -0.6px;
    margin: 0;
    text-align: center;
}
.pv-hero__title-dark { color: #0f172a; display: block; text-align: center; margin: 0 0 0px; line-height: 1.0; }
.pv-hero__title-grad {
    background: linear-gradient(90deg, #7c3aed 0%, #9333ea 35%, #c026d3 70%, #2563eb 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: block;
    text-align: center;
    line-height: 1.0;
}
.pv-hero__subtitle {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: #334155;
    margin: 6px auto 10px;
    max-width: 620px;
    text-align: center;
}

/* 4 step circles row */
.pv-steps {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 36px;
    margin-top: 0;
}
.pv-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 110px;
}
.pv-step__icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #e9d5ff; /* ungu muda exact same dengan reference image circle */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7c3aed;
    margin-bottom: 2px;
}
.pv-step__title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #0f172a;
}
.pv-step__desc {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 500;
    font-size: 11.5px;
    color: #64748b;
}

/* Create a Prompt panel */
.pv-prompt {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 20px 22px 18px;
    margin-top: 4px;
    box-shadow: 0 2px 12px rgba(15,23,42,0.05);
}
.pv-prompt__head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px;
}
.pv-prompt__sparkle { color: #7c3aed; }
.pv-prompt__title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 800;
    font-size: 15px;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.1px;
}
.pv-prompt__body {
    border: 1px solid #c7d2fe;
    border-radius: 14px;
    padding: 12px 14px 11px;
    background: linear-gradient(180deg, rgba(167,139,250,0.07) 0%, rgba(196,181,253,0.05) 100%);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pv-prompt__body:focus-within {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.12);
}
.pv-prompt__textarea {
    width: 100%;
    border: none;
    background: transparent;
    outline: none;
    resize: none;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: #0f172a;
    padding: 6px 2px 8px;
    font-weight: 500;
}
.pv-prompt__textarea::placeholder { color: #94a3b8; font-weight: 500; }
.pv-prompt__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
}
.pv-prompt__counter {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: #94a3b8;
}

/* Generate my video purple-blue gradient button */
.pv-genbtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px 9px 15px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    background: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%);
    color: #ffffff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 700;
    font-size: 13px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    box-shadow: 0 4px 14px rgba(124,58,237,0.22);
}
.pv-genbtn:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 7px 20px rgba(124,58,237,0.30); }

/* Hints row */
.pv-hints {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 0 4px;
    margin-top: 2px;
}
.pv-hints__label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #0f172a;
}
.pv-hints__chips {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1;
}
.pv-hint {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #334155;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.18s ease;
}
.pv-hint:hover { border-color: #a5b4fc; background: #eef2ff; color: #4338ca; }
.pv-refresh {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.18s ease;
}
.pv-refresh:hover { border-color: #cbd5e1; transform: rotate(45deg); }

/* Advanced panel */
.pv-adv {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px 22px 18px;
    box-shadow: 0 2px 12px rgba(15,23,42,0.04);
}
.pv-adv__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 14px;
    cursor: pointer;
    user-select: none;
}
.pv-adv__title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 800;
    font-size: 15px;
    color: #0f172a;
    margin: 0;
}
.pv-adv__chev { transition: transform 0.2s ease; }

/* Rows Resolution / Duration / Aspect Ratio */
.pv-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 18px;
    align-items: center;
    padding: 11px 0;
}
.pv-row + .pv-row { border-top: 1px solid #f1f5f9; }
.pv-row__label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    color: #0f172a;
}
.pv-row__ctl { display: flex; gap: 10px; align-items: center; }
.pv-select {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 11px 7px 14px;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    cursor: pointer;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #0f172a;
    transition: all 0.18s ease;
}
.pv-select:hover { border-color: #a5b4fc; }
.pv-select__pill {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 4px;
    background: #7c3aed;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.3px;
}

/* Aspect ratio options */
.pv-ratio { display: flex; gap: 10px; }
.pv-ratio__opt {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 11px;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.18s ease;
}
.pv-ratio__opt:hover { border-color: #c7d2fe; }
.pv-ratio__opt--active {
    border-color: #6366f1;
    background: linear-gradient(180deg, rgba(99,102,241,0.08) 0%, rgba(238,242,255,0.75) 100%);
    box-shadow: 0 2px 8px rgba(99,102,241,0.14);
}
.pv-ratio__text {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.1;
}
.pv-ratio__num {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 800;
    font-size: 13px;
    color: #0f172a;
}
.pv-ratio__cap {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 600;
    font-size: 10.5px;
    color: #64748b;
    margin-top: 1px;
}
.pv-ratio__text--muted .pv-ratio__num,
.pv-ratio__text--muted .pv-ratio__cap { color: #94a3b8; }

/* ===================== PLAS VIO RESULT PANEL (GENERATED VIDEO) ===================== */
.pv-result {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
    border: 1px solid #eef2ff;
    overflow: hidden;
    display: block;
    animation: pvResultSlide 0.42s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes pvResultSlide {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pv-result[hidden] { display: none; }

.pv-result__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px 12px;
    border-bottom: 1px solid #f1f5f9;
}
.pv-result__head-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pv-result__spark { flex-shrink: 0; }
.pv-result__title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 800;
    font-size: 16px;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.2px;
}
.pv-result__date {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: #64748b;
    padding: 3px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    margin-left: 4px;
}
.pv-result__threedot {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.18s ease;
}
.pv-result__threedot:hover { background: #f1f5f9; border-color: #cbd5e1; }

.pv-result__body {
    display: grid;
    grid-template-columns: 1fr 430px;
    gap: 0;
}

/* LEFT VIDEO PREVIEW */
.pv-video {
    position: relative;
    background: #0b0f19;
    aspect-ratio: 16 / 9;
    margin: 18px 0 18px 18px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 32px rgba(15, 23, 42, 0.28);
}
.pv-video__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pv-video__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,23,42,0.10) 0%, rgba(15,23,42,0.40) 100%);
}
.pv-video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.88);
    border: 3px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.55), 0 0 0 10px rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.pv-video__play:hover { transform: translate(-50%, -50%) scale(1.06); background: #7c3aed; }
.pv-video__badge {
    position: absolute;
    bottom: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #ffffff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.2px;
}

/* RIGHT DETAILS COLUMN */
.pv-detail {
    padding: 22px 26px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
}
.pv-detail__prompt {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 600;
    font-size: 14.5px;
    color: #0f172a;
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pv-detail__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
}
.pv-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
}
.pv-chip--dark {
    background: #1e293b;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}
.pv-chip--outlined {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
}
.pv-chip--soft {
    background: #ede9fe;
    color: #6d28d9;
}

.pv-detail__thumbs {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.pv-thumb {
    position: relative;
    width: 78px;
    height: 78px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.18s ease;
    box-shadow: 0 2px 6px rgba(15,23,42,0.08);
}
.pv-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pv-thumb:hover { transform: translateY(-1px); }
.pv-thumb--active { border-color: #7c3aed; box-shadow: 0 4px 14px rgba(124,58,237,0.35); }
.pv-thumb__time {
    position: absolute;
    bottom: 4px;
    right: 5px;
    padding: 1.5px 5px;
    border-radius: 5px;
    background: rgba(15, 23, 42, 0.78);
    color: #ffffff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 700;
    font-size: 10px;
    line-height: 1.3;
}

.pv-detail__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 6px;
}
.pv-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 10px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.18s ease;
}
.pv-action--primary {
    background: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%);
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(124, 58, 237, 0.28);
}
.pv-action--primary:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(124, 58, 237, 0.4); }
.pv-action--ghost {
    background: #ede9fe;
    color: #6d28d9;
}
.pv-action--ghost:hover { background: #ddd6fe; transform: translateY(-1px); }
.pv-action--outline {
    background: #ffffff;
    border-color: #c7d2fe;
    color: #4f46e5;
}
.pv-action--outline:hover { background: #eef2ff; border-color: #a5b4fc; transform: translateY(-1px); }

/* ===================== PLAS VIO LOADING MODAL (PENDULUM GIF) ===================== */
.pv-loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
.pv-loading-overlay--visible { display: flex; animation: pvFadeIn 0.22s ease; }
@keyframes pvFadeIn { from { opacity: 0; } to { opacity: 1; } }

.pv-loading-panel {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(99, 102, 241, 0.22), 0 8px 24px rgba(15, 23, 42, 0.12);
    padding: 36px 42px 28px;
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: pvPanelPop 0.28s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes pvPanelPop {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.pv-loading__gif {
    width: 280px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    margin-bottom: 14px;
    filter: drop-shadow(0 4px 10px rgba(124, 58, 237, 0.15));
}
.pv-loading__title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 800;
    font-size: 18px;
    color: #0f172a;
    line-height: 1.2;
    margin-bottom: 6px;
    letter-spacing: -0.2px;
}
.pv-loading__text {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 18px;
    max-width: 340px;
}
.pv-loading__bar {
    width: 100%;
    height: 7px;
    border-radius: 999px;
    background: #eef2ff;
    overflow: hidden;
    margin-bottom: 8px;
}
.pv-loading__bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #2563eb 0%, #7c3aed 50%, #c026d3 100%);
    border-radius: 999px;
    transition: width 0.3s ease;
    box-shadow: 0 0 8px rgba(124, 58, 237, 0.35);
}
.pv-loading__pct {
    align-self: flex-end;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 700;
    font-size: 12px;
    color: #7c3aed;
    letter-spacing: 0.2px;
}

/* Itinerary responsive */
@media (max-width: 860px) {
    .it-budget { grid-template-columns: 1fr; }
    .it-budget__right { border-left: none; padding-left: 0; border-top: 1px dashed #e5e7eb; padding-top: 14px; }
    .it-navpills { grid-template-columns: repeat(2, 1fr); }
    .it-day__grid { grid-template-columns: 1fr; }
    .it-block--wide { max-width: 100%; }
    .it-cardgrid, .it-cardgrid--4 { grid-template-columns: 1fr; }
    .it-hero__content { flex-wrap: wrap; gap: 12px; padding: 18px 18px; }
}
@media (max-width: 520px) {
    .it-navpills { grid-template-columns: 1fr; }
    .it-hero__title { font-size: 17px; }
}



.lecture-app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 12px;
    background: #ffffff;
}

.lecture-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 10px 18px 12px;
    background: #ffffff;
    border-radius: 14px;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 16px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}

.lecture-topbar__left {
    display: flex;
    align-items: center;
    gap: 28px;
    flex: 1;
    min-width: 0;
}

.lecture-logo {
    height: 28px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
    animation: logoHueShift 9s linear infinite;
    filter: hue-rotate(0deg);
}

.lecture-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #ffffff;
    padding: 3px;
    border-radius: 999px;
    flex: 0 1 auto;
}

.lecture-tab {
    padding: 7px 18px;
    font-size: 11px;
    font-weight: 500;
    font-family: inherit;
    color: #6b7280;
    text-decoration: none;
    border-radius: 999px;
    transition: all 0.18s ease;
    cursor: pointer;
    white-space: nowrap;
}

.lecture-tab:hover {
    color: #4f46e5;
    background: #f5f3ff;
}

.lecture-tab--active {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
}

.lecture-tab--active:hover {
    color: #ffffff;
}

.lecture-topbar__right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.lecture-iconbtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: none;
    background: #ffffff;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.15s ease;
}

.lecture-iconbtn:hover {
    background: #f5f3ff;
    color: #4f46e5;
}

.lecture-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
}

.lecture-dropwrap {
    position: relative;
    display: inline-flex;
}

.lecture-dropbtn--active,
.lecture-iconbtn.lecture-dropbtn[aria-expanded="true"] {
    background: #eef2ff !important;
    color: #4f46e5 !important;
}

.lecture-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 200px;
    background: #ffffff;
    border: 1px solid #eef0f5;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(17, 24, 39, 0.10), 0 2px 6px rgba(17, 24, 39, 0.05);
    padding: 6px;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: all 0.18s ease;
}

.lecture-dropdown--open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lecture-dropdown::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 16px;
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-left: 1px solid #eef0f5;
    border-top: 1px solid #eef0f5;
    transform: rotate(45deg);
    z-index: -1;
}

.lecture-dropitem {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 9px;
    border: none;
    background: transparent;
    color: #111827;
    font-family: "'Inter', sans-serif";
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: all 0.13s ease;
}

.lecture-dropitem:hover {
    background: #fef2f2;
    color: #dc2626;
}

.lecture-dropitem:hover .lecture-dropitem__icon {
    color: #ef4444;
}

.lecture-dropitem__icon {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: #f3f4f6;
    color: #6b7280;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.13s ease;
}

.lecture-dropitem__label {
    flex: 1;
    line-height: 1;
}

.lecture-lang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 26px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 600;
    color: #374151;
    background: #f9fafb;
    border: 1px solid #f3f4f6;
    border-radius: 6px;
}

.lecture-user {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px 10px 3px 3px;
    background: #f9fafb;
    border: 1px solid #f3f4f6;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.lecture-user:hover {
    background: #ffffff;
    border-color: #e5e7eb;
}

.lecture-user__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f46e5 0%, #8b5cf6 100%);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lecture-user__name {
    font-size: 12px;
    font-weight: 500;
    color: #111827;
}

.lecture-content {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    flex: 1;
    padding: 0 4px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
body.learning-page-body .lecture-content {
    padding-bottom: 10px;
}

.lecture-content > .lecture-row,
.lecture-content > .lecture-statgrid,
.lecture-content > .lecture-welcome {
    margin-bottom: 0;
}

.lecture-welcome {
    font-size: 13px;
    font-weight: 500;
    color: #1f2937;
    margin-bottom: 14px;
    padding: 0 2px;
    letter-spacing: -0.005em;
}

.lecture-statgrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}

.lecture-stat {
    position: relative;
    border-radius: 12px;
    padding: 18px 20px 16px;
    color: #ffffff;
    overflow: hidden;
    min-height: 128px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-shadow: 0 4px 18px rgba(17, 24, 39, 0.12);
}

.lecture-stat::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.18) 0%, transparent 45%);
    pointer-events: none;
}

.lecture-stat::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 100%, rgba(255,255,255,0.08) 0%, transparent 40%);
    pointer-events: none;
}

.lecture-stat--1 {
    background-image: url('assets/images/bgtrainers.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.lecture-stat--1::before {
    background: linear-gradient(135deg, rgba(26, 16, 51, 0.55) 0%, rgba(49, 46, 129, 0.55) 50%, rgba(30, 27, 75, 0.6) 100%);
}

.lecture-stat--2 {
    background-image: url('assets/images/bgtrainee.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.lecture-stat--2::before {
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.55) 0%, rgba(30, 58, 138, 0.55) 45%, rgba(67, 56, 202, 0.6) 100%);
}

.lecture-stat--3 {
    background-image: url('assets/images/bgactivcors.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.lecture-stat--3::before {
    background: linear-gradient(135deg, rgba(69, 10, 10, 0.55) 0%, rgba(159, 18, 57, 0.55) 40%, rgba(127, 29, 29, 0.6) 100%);
}

.lecture-stat--4 {
    background-image: url('assets/images/bglogin.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.lecture-stat--4::before {
    background: linear-gradient(135deg, rgba(146, 64, 14, 0.55) 0%, rgba(234, 88, 12, 0.55) 45%, rgba(249, 115, 22, 0.6) 100%);
}

.lecture-stat__title {
    position: relative;
    font-size: 13px;
    font-weight: 500;
    opacity: 0.92;
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}

.lecture-stat__value {
    position: relative;
    font-size: 38px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}

.lecture-stat__badge {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(109, 40, 217, 0.4);
}

.lecture-stat__badge svg {
    stroke: #ffffff;
}

.lecture-stat__badgeimg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

.lecture-stat--1 .lecture-stat__badge,
.lecture-stat--2 .lecture-stat__badge,
.lecture-stat--3 .lecture-stat__badge,
.lecture-stat--4 .lecture-stat__badge {
    background: transparent;
    box-shadow: none;
    width: 100px;
    height: 100px;
    border-radius: 0;
    padding: 0;
    top: 12px;
    right: 12px;
}

.lecture-row {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.lecture-row:last-of-type {
    grid-template-columns: repeat(3, 1fr);
}

.lecture-row--three {
    grid-template-columns: repeat(3, 1fr);
}

.lecture-panel {
    background: #ffffff;
    border: 1px solid #eef0f5;
    border-radius: 12px;
    padding: 15px 16px 14px;
    min-width: 0;
    overflow: hidden;
}

.lecture-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.lecture-panel__title {
    font-size: 12px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 10px;
}

.lecture-panel__head .lecture-panel__title {
    margin-bottom: 0;
}

.lecture-completion {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lecture-completion__cover {
    width: 70px;
    height: 70px;
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 12px;
    background: transparent;
    position: relative;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

.lecture-completion__cover::before {
    content: none;
}

.lecture-completion__coverimg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 0;
    filter: none;
}

.lecture-completion__name {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 12px;
    letter-spacing: -0.005em;
}

.lecture-completion__wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.lecture-arrow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #4b5563;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.lecture-arrow:hover {
    background: #f5f3ff;
    border-color: #4f46e5;
    color: #4f46e5;
}

.lecture-ring {
    position: relative;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lecture-ring svg {
    display: block;
}

.lecture-ring__value {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.lecture-ring__num {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.02em;
    line-height: 1;
}

.lecture-ring__text {
    font-size: 10px;
    font-weight: 500;
    color: #6b7280;
}

.lecture-viewall {
    font-size: 11px;
    font-weight: 500;
    color: #4f46e5;
    text-decoration: none;
    transition: color 0.15s ease;
}

.lecture-viewall:hover {
    color: #4338ca;
    text-decoration: underline;
}

.lecture-periodtabs {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #f9fafb;
    padding: 3px;
    border-radius: 8px;
}

.lecture-period {
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 500;
    font-family: inherit;
    color: #6b7280;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-transform: lowercase;
}

.lecture-period:hover {
    color: #4f46e5;
}

.lecture-period--active {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    color: #ffffff;
    box-shadow: 0 1px 4px rgba(16, 185, 129, 0.25);
}

.lecture-chartwrap {
    padding: 4px 4px 0;
    position: relative;
}

#loginTrendsChart {
    width: 100% !important;
    height: 260px !important;
    display: block;
}

.lecture-chartlegend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-top: 2px;
}

.lecture-legenditem {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 500;
    color: #4b5563;
}

.lecture-legenddot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.lecture-legenddot--blue { background: #3b82f6; }
.lecture-legenddot--green { background: #10b981; }
.lecture-legenddot--red { background: #ef4444; }
.lecture-legenddot--amber { background: #fbbf24; }

.lecture-piewrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 4px 10px;
    min-width: 0;
}

.lecture-donut {
    width: 220px !important;
    height: 220px !important;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

.lecture-pielegend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding-top: 6px;
    border-top: 1px solid #f3f4f6;
    margin-top: 2px;
    flex-wrap: wrap;
}

.lecture-courseswrap {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 10px;
    overflow: visible;
    padding: 10px 4px 12px;
}

.lecture-course {
    width: auto;
    min-height: 134px;
    background: #f9fafb;
    border: 1px solid #f3f4f6;
    border-radius: 12px;
    padding: 14px 8px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.15s ease;
}

.lecture-course:hover {
    background: #ffffff;
    border-color: #e0e7ff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.06);
}

.lecture-course__hex {
    width: 52px;
    height: 52px;
    border-radius: 0;
    background: transparent;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    box-shadow: none;
    padding: 0;
}

.lecture-course__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

.lecture-course__hex svg {
    stroke: #ffffff;
}

.lecture-course__num {
    font-size: 20px;
    font-weight: 800;
    color: #111827;
    line-height: 1;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}

.lecture-course__name {
    font-size: 10px;
    font-weight: 600;
    color: #4b5563;
    line-height: 1.3;
    letter-spacing: 0.01em;
}

.lecture-mapwrap {
    padding: 12px 4px 8px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lecture-map {
    width: 100%;
    max-width: 1100px;
    height: auto;
    display: block;
}

.lecture-map__johor {
    cursor: pointer;
    transition: fill 0.2s ease, filter 0.2s ease;
    filter: drop-shadow(0 2px 4px rgba(109, 40, 217, 0.25));
}

.lecture-map__johor:hover {
    fill: #7c3aed;
    filter: drop-shadow(0 0 8px rgba(124, 58, 237, 0.65));
}

.lecture-maptooltip {
    position: absolute;
    left: 28%;
    bottom: 40px;
    z-index: 5;
    background: #111827;
    color: #ffffff;
    border-radius: 10px;
    padding: 10px 14px;
    min-width: 140px;
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    pointer-events: none;
}

.lecture-maptooltip--visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lecture-maptooltip::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -6px;
    transform: translateY(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: #111827;
}

.lecture-maptooltip__state {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #a78bfa;
    margin-bottom: 4px;
    line-height: 1.1;
}

.lecture-maptooltip__count {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #f9fafb;
    line-height: 1.1;
}

@media (max-width: 992px) {
    .lecture-statgrid { grid-template-columns: repeat(2, 1fr); }
    .lecture-row { grid-template-columns: 1fr; }
    .lecture-tabs { gap: 2px; }
    .lecture-tab { padding: 6px 12px; font-size: 10px; }
}

@media (max-width: 1150px) {
    .lecture-courseswrap { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 850px) {
    .lecture-row:last-of-type,
    .lecture-row--three { grid-template-columns: repeat(2, 1fr); }
    .lecture-courseswrap { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .lecture-app { padding: 10px; }
    .lecture-topbar { flex-wrap: wrap; padding: 10px 12px; }
    .lecture-topbar__left { flex-direction: column; align-items: flex-start; gap: 12px; }
    .lecture-tabs { width: 100%; overflow-x: auto; }
    .lecture-statgrid { grid-template-columns: 1fr 1fr; }
    .lecture-stat__value { font-size: 30px; }
    .lecture-stat { min-height: 110px; padding: 14px 16px; }
    .lecture-row:last-of-type { grid-template-columns: 1fr; }
    .lecture-courseswrap { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .lecture-course__hex { width: 44px; height: 44px; }
    .lecture-course__num { font-size: 18px; }
}

/* ================================
   REGISTER PAGE - UI POLISH (v18)
   ================================ */

.lc-optfield--hidden {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important; height: 0 !important;
    padding: 0 !important; margin: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.form-label {
    display: block;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 6px 2px;
    letter-spacing: -0.005em;
    line-height: 1.3;
}

.lc-sec-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 2px 10px;
    margin: 0 0 4px;
    border-top: 1px dashed #e5e7eb;
}
.lc-sec-title:first-of-type {
    border-top: none;
    padding-top: 2px;
    margin-top: 0;
}
.lc-sec-title--space {
    margin-top: 6px;
    padding-top: 16px;
}
.lc-sec-title__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.10) 0%, rgba(37, 99, 235, 0.10) 100%);
    font-size: 13px;
    line-height: 1;
}
.lc-sec-title span:last-child {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #6d28d9;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.lc-pwrow {
    position: relative;
}
.lc-pwtoggle {
    position: absolute;
    right: 12px;
    bottom: 11px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: none;
    background: #f9fafb;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.75;
    transition: all 0.14s ease;
    z-index: 2;
    padding: 0;
}
.lc-pwtoggle:hover {
    opacity: 1;
    background: #eef2ff;
    color: #4f46e5;
}
.lc-pwrow .form-input {
    padding-right: 52px;
}

.lc-pwmatch {
    margin: -4px 2px 8px;
    min-height: 18px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}
.lc-pwmatch--empty { display: block; color: transparent; }
.lc-pwmatch--ok {
    color: #059669;
}
.lc-pwmatch--ok::before {
    content: "✓ Kata laluan sepadan";
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.lc-pwmatch--bad {
    color: #dc2626;
}
.lc-pwmatch--bad::before {
    content: "✗ Kata laluan TIDAK sepadan";
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.lc-pwmatch--short {
    color: #d97706;
}
.lc-pwmatch--short::before {
    content: "⚠ Min. 8 aksara diperlukan";
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.lc-tc-wrap {
    margin: 16px 0 18px;
    padding: 14px 16px;
    background: #faf5ff;
    border: 1px solid #e9d5ff;
    border-radius: 12px;
}
.lc-tc {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    cursor: pointer;
    user-select: none;
    position: relative;
}
.lc-tc input[type="checkbox"] {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}
.lc-tc__box {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 6px;
    border: 2px solid #c4b5fd;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.16s cubic-bezier(.2,.9,.3,1.2);
    margin-top: 1px;
    overflow: hidden;
}
.lc-tc__tick {
    width: 14px;
    height: 14px;
    color: #ffffff;
    opacity: 0;
    transform: scale(0.3);
    transition: all 0.16s cubic-bezier(.2,.9,.3,1.3);
    display: block;
}
.lc-tc input:checked + .lc-tc__box {
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
    border-color: #6d28d9;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.32);
}
.lc-tc input:checked + .lc-tc__box .lc-tc__tick {
    opacity: 1;
    transform: scale(1);
}
.lc-tc input:focus-visible + .lc-tc__box {
    outline: 3px solid #ddd6fe;
    outline-offset: 1px;
}
.lc-tc__text {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    color: #374151;
    line-height: 1.5;
    flex: 1;
}
.lc-tc__text strong {
    color: #111827;
    font-weight: 700;
}
.lc-tc__link {
    color: #6d28d9;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dotted #c4b5fd;
    transition: all 0.14s ease;
}
.lc-tc__link:hover {
    color: #4c1d95;
    border-bottom-style: solid;
    border-bottom-color: #7c3aed;
}

@media (max-width: 640px) {
    .lc-tc-wrap { padding: 12px 13px; }
    .lc-tc__text { font-size: 12px; }
    .lc-sec-title { padding: 12px 2px 8px; }
}

/* ================================================================
   LECTURER / TRAINER SHELL — Sidebar + Topbar Layout
   Prefix: ls-  (compact font, minimal whitespace)
   ================================================================ */

body.ls-body {
    background: #f3f4f6 !important;
    background-image: none !important;
    padding: 0 !important;
    margin: 0;
    align-items: stretch;
    justify-content: stretch;
    color: #111827;
    min-height: 100vh;
    display: block;
}
body.ls-body::before { display: none !important; }

/* STUDENT DEADLINES MENU HIDE (user request 18/8/26) — convention PLAS.AI display:none !important */
.ls-sidebar [data-student-link="deadlines"],
.ls-sidebar .ls-link[data-student-link="deadlines"] { display: none !important; }
/* Hide deadlines CTA button dalam student hero welcome panel (inline style juga backup) */
main.ls-content .std-dash-hero a[href*="student-deadlines"] { display: none !important; }
/* Explicit IDs student dashboard hidden deadlines elements */
#std-dash-deadlines-panel,
#std-dash-deadlines-seeall { display: none !important; }

.ls-shell {
    display: flex;
    min-height: 100vh;
    width: 100%;
    background: #f3f4f6;
}

/* ---------- SIDEBAR ---------- */
.ls-sidebar {
    width: 280px;
    flex-shrink: 0;
    background: #ffffff;
    border-right: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    padding: 18px 14px 14px;
    gap: 14px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.ls-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px 14px;
    border-bottom: 1px solid #e5e7eb;
}
.ls-logo img {
    height: 34px;
    width: auto;
    object-fit: contain;
}

/* User profile block */
.ls-user {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 4px 6px 2px;
}
.ls-user__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg,#dbeafe 0%, #eff6ff 100%);
    color: #1d4ed8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.01em;
}
.ls-user__meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.ls-user__name {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ls-user__role {
    font-size: 12px;
    font-weight: 400;
    color: #6b7280;
    line-height: 1.2;
}

/* Active Cohort selector */
.ls-cohort {
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 3px;
    transition: all 0.16s ease;
}
.ls-cohort:hover {
    border-color: #d1d5db;
    background: #fafafa;
}
.ls-cohort__label {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
}
.ls-cohort__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ls-cohort__name {
    font-size: 13.5px;
    font-weight: 600;
    color: #111827;
    line-height: 1.2;
}
.ls-cohort__chev {
    color: #6b7280;
    flex-shrink: 0;
    display: flex;
}

/* Nav section label */
.ls-nav-section {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 4px;
}
.ls-nav-label {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7280;
    padding: 10px 8px 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ls-nav-label__tag {
    font-size: 10px;
    font-weight: 700;
    color: #047857;
    background: #d1fae5;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: none;
    letter-spacing: 0;
}

/* Nav link (generic) */
.ls-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 10px;
    border-radius: 10px;
    text-decoration: none;
    color: #374151;
    transition: all 0.14s ease;
    cursor: pointer;
    position: relative;
}
.ls-link:hover {
    background: #f3f4f6;
    color: #111827;
}
.ls-link--active {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    font-weight: 600;
}
.ls-link--active::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #3b82f6;
}
.ls-link__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}
.ls-link__meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.ls-link__title {
    font-size: 13px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ls-link__sub {
    font-size: 11px;
    font-weight: 400;
    color: #6b7280;
    line-height: 1.1;
}
.ls-link--active .ls-link__sub {
    color: #3b82f6;
    opacity: 0.85;
}
.ls-link__badge {
    flex-shrink: 0;
    min-width: 24px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
}
.ls-link__badge--blue {
    background: #dbeafe;
    color: #1d4ed8;
}
.ls-link__badge--red {
    background: #fee2e2;
    color: #b91c1c;
}
.ls-link__ext {
    flex-shrink: 0;
    color: #6b7280;
    display: flex;
}

/* Indented sub-items (for Plaspedia module entries) */
.ls-link--indented {
    padding-left: 28px;
}

/* Sidebar footer actions */
.ls-sidebar-footer {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ---------- MAIN AREA ---------- */
.ls-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Topbar */
.ls-topbar {
    height: 54px;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    position: sticky;
    top: 0;
    z-index: 20;
}
.ls-topbar__left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.ls-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #6b7280;
}
.ls-breadcrumb__sep { color: #9ca3af; }
.ls-breadcrumb strong {
    color: #111827;
    font-weight: 600;
}

.ls-topbar__right {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ls-iconbtn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: transparent;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.14s ease;
    position: relative;
}
.ls-iconbtn:hover {
    background: #f3f4f6;
    color: #111827;
}
.ls-iconbtn__badge {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    border: 1.5px solid #ffffff;
}
.ls-lang {
    font-size: 11.5px;
    font-weight: 600;
    color: #4b5563;
    padding: 4px 9px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.14s ease;
}
.ls-lang:hover {
    background: #f3f4f6;
    color: #111827;
}
.ls-userchip {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 10px 4px 5px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.14s ease;
}
.ls-userchip:hover { background: #f3f4f6; }
.ls-userchip__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg,#dbeafe,#eff6ff);
    color: #1d4ed8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 700;
}
.ls-userchip__name {
    font-size: 12px;
    font-weight: 600;
    color: #111827;
}

/* Content area */
.ls-content {
    flex: 1;
    padding: 22px 28px 28px;
}

/* ================================================================
   LECTURER / TRAINER — AI Toolkit page body bg override
   ================================================================ */
body.ls-body.ls-body--aitoolkit {
    background: #3816D0 !important;
}
body.ls-body.ls-body--aitoolkit {
    background-image: url('assets/images/bgaitoolkit.png') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-blend-mode: screen;
}
body.ls-body.ls-body--aitoolkit .ls-sidebar,
body.ls-body.ls-body--aitoolkit .ls-topbar {
    background: #ffffff;
}


/* ================================================================
   LECTURER Students screen (Lecturer Sidebar MAIN section)
   Prefix: ls-
   ================================================================ */

/* ---------- Students Header ---------- */
.ls-students-header {
    margin-bottom: 18px;
}
.ls-students-header__left { display: flex; flex-direction: column; gap: 4px; }
.ls-students-title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.2px;
}
.ls-students-subtitle {
    margin: 0;
    font-size: 13.5px;
    color: #64748b;
}

/* ---------- Stats (reuse lecture-stat structure) ---------- */
.ls-stats.lecture-stat-row { margin-bottom: 18px; }
.ls-stat.lecture-stat { min-width: 0; }
.lecture-stat__badge--green { background: #dcfce7 !important; }
.lecture-stat__badge--orange { background: #ffedd5 !important; }

/* ---------- Toolbar (Filters + Actions) ---------- */
.ls-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.ls-toolbar__filters {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}
.ls-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.ls-filter {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 140px;
}
.ls-filter__label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ls-filter__select.form-select {
    height: 38px;
    font-size: 13px;
    padding: 0 32px 0 12px;
    background-color: #f8fafc;
    border-color: #e2e8f0;
}
.ls-search {
    position: relative;
    min-width: 230px;
    display: flex;
    align-items: center;
}
.ls-search svg {
    position: absolute;
    left: 12px;
    pointer-events: none;
}
.ls-search__input {
    width: 100%;
    height: 38px;
    padding: 0 12px 0 36px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    font-size: 13px;
    color: #0f172a;
    outline: none;
    transition: all 0.15s ease;
    font-family: inherit;
}
.ls-search__input::placeholder { color: #94a3b8; }
.ls-search__input:focus {
    border-color: #6366f1;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}

/* ---------- Buttons ---------- */
.ls-btn {
    height: 38px;
    padding: 0 15px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s ease;
    white-space: nowrap;
    font-family: inherit;
}
.ls-btn--primary {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: #fff;
    box-shadow: 0 1px 2px rgba(79, 70, 229, 0.25);
}
.ls-btn--primary:hover {
    background: linear-gradient(135deg, #5856ea 0%, #4338ca 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.28);
}
.ls-btn--outline {
    background: #fff;
    color: #475569;
    border-color: #e2e8f0;
}
.ls-btn--outline:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #0f172a;
}
.ls-btn--ghost {
    background: transparent;
    color: #64748b;
    border-color: transparent;
}
.ls-btn--ghost:hover { background: #f1f5f9; color: #0f172a; }

/* ---------- Table Card ---------- */
.ls-table-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15,23,42,0.05);
}
.ls-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.ls-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 980px;
}
.ls-table thead { background: #f8fafc; }
.ls-table thead th {
    text-align: left;
    padding: 12px 14px;
    font-size: 11.5px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}
.ls-table tbody td {
    padding: 14px 14px;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    white-space: nowrap;
}
.ls-table tbody tr:hover td { background: #fafbff; }
.ls-table tbody tr:last-child td { border-bottom: none; }

/* Checkbox */
.ls-check {
    width: 16px;
    height: 16px;
    accent-color: #6366f1;
    cursor: pointer;
    border-radius: 4px;
}

/* User row cell */
.ls-userrow {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 220px;
}
.ls-userrow__avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.2px;
    flex-shrink: 0;
    background: #ede9fe;
    color: #6d28d9;
}
.ls-userrow__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ls-userrow__name {
    font-size: 13.5px;
    font-weight: 600;
    color: #0f172a;
}
.ls-userrow__id {
    font-size: 11.5px;
    color: #94a3b8;
    font-family: 'SF Mono', ui-monospace, Menlo, monospace;
}

/* Contact cell */
.ls-contact { display: flex; flex-direction: column; gap: 2px; min-width: 190px; }
.ls-contact__email { font-size: 12.5px; color: #475569; }
.ls-contact__phone { font-size: 12px; color: #94a3b8; }

/* Badge pills */
.ls-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3.5px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}
.ls-badge--blue { background: #dbeafe; color: #1e40af; }
.ls-badge--green { background: #dcfce7; color: #166534; }
.ls-badge--gray { background: #f1f5f9; color: #475569; }
.ls-badge--orange { background: #ffedd5; color: #9a3412; }
.ls-badge--ghost { background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; }

/* Progress cell */
.ls-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 150px;
}
.ls-progress__bar {
    flex: 1;
    height: 7px;
    border-radius: 999px;
    background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
    position: relative;
    overflow: hidden;
}
.ls-progress__bar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
    animation: ls-progressShine 2.8s ease-in-out infinite;
}
.ls-progress__bar--gray { background: linear-gradient(90deg, #94a3b8 0%, #cbd5e1 100%); }
.ls-progress__bar--orange { background: linear-gradient(90deg, #f97316 0%, #fb923c 100%); }
.ls-progress__txt {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    min-width: 34px;
    text-align: right;
    flex-shrink: 0;
}
@keyframes ls-progressShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Last login + row actions button */
.ls-rowbtn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 18px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.14s ease;
}
.ls-rowbtn:hover { background: #f1f5f9; color: #0f172a; }

/* ---------- Table Footer ---------- */
.ls-tablefoot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border-top: 1px solid #e5e7eb;
    background: #fafbfc;
    flex-wrap: wrap;
}
.ls-tablefoot__count {
    font-size: 12.5px;
    color: #64748b;
    font-weight: 500;
}
.ls-tablefoot__right {
    display: flex;
    align-items: center;
    gap: 16px;
}
.ls-pagerows {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #64748b;
}
.ls-pagerows__select.form-select {
    height: 32px;
    min-width: 82px;
    padding: 0 26px 0 10px;
    font-size: 12px;
    background-color: #fff;
    border-color: #e2e8f0;
}
.ls-pagination {
    display: flex;
    align-items: center;
    gap: 4px;
}
.ls-pagebtn {
    min-width: 32px;
    height: 32px;
    padding: 0 9px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.14s ease;
    font-family: inherit;
}
.ls-pagebtn:hover:not(:disabled):not(.ls-pagebtn--active) {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #0f172a;
}
.ls-pagebtn--active {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 1px 2px rgba(79,70,229,0.28);
}
.ls-pagebtn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ---------- Add Student Modal ---------- */
.ls-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.ls-modal[aria-hidden="false"] { display: flex; }
.ls-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.52);
    backdrop-filter: blur(3px);
    animation: ls-fadeIn 0.18s ease;
}
.ls-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 580px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.28);
    overflow: hidden;
    animation: ls-modalIn 0.22s cubic-bezier(.2,.8,.2,1);
}
@keyframes ls-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ls-modalIn {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ls-modal__head {
    padding: 18px 22px 16px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid #f1f5f9;
}
.ls-modal__title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
}
.ls-modal__subtitle {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: #64748b;
}
.ls-modal__close {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.14s ease;
    flex-shrink: 0;
}
.ls-modal__close:hover { background: #f1f5f9; }

.ls-modal__body {
    padding: 20px 22px 6px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ls-modal__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 520px) {
    .ls-modal__row { grid-template-columns: 1fr; }
}

.ls-modal__note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 12px;
    background: #eef2ff;
    color: #4338ca;
    border: 1px solid #e0e7ff;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.5;
    margin-top: 2px;
}
.ls-modal__note svg { flex-shrink: 0; margin-top: 1px; }

.ls-modal__foot {
    padding: 14px 22px 18px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid #f1f5f9;
    margin-top: 12px;
    background: #fafbfc;
}

/* ---------- Students Stats Cards (4-col horizontal) ---------- */
.ls-statgrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
@media (max-width: 1100px) {
    .ls-statgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .ls-statgrid { grid-template-columns: 1fr; }
}

.ls-statcard {
    position: relative;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 22px 22px 20px;
    box-shadow: 0 2px 6px rgba(15,23,42,0.05);
    min-height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    transition: all 0.18s ease;
    overflow: hidden;
}
.ls-statcard::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #6366f1 0%, #a78bfa 100%);
    opacity: 0.85;
}
.ls-statcard:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(15,23,42,0.09);
    border-color: #c7d2fe;
}

.ls-statcard__badge {
    position: absolute;
    top: 16px;
    right: 18px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
.ls-statcard__badge--purple {
    background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 100%);
}
.ls-statcard__badge--green {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
}
.ls-statcard__badge--gray {
    background: linear-gradient(135deg, #475569 0%, #64748b 100%);
}
.ls-statcard__badge--orange {
    background: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
}

.ls-statcard__label {
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    letter-spacing: 0.01em;
    position: relative;
    z-index: 1;
}
.ls-statcard__value {
    font-size: 36px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
    letter-spacing: -0.03em;
    position: relative;
    z-index: 1;
}

/* ================================================================
   PLASBot Floating Chatbot (Lecturer Universal)
   Prefix: ls-chat-
   ================================================================ */

/* ---------- Floating Launcher Button (FAB) ---------- */
.ls-chat-launcher {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 9998;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: transparent !important;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    transition: all 0.22s cubic-bezier(.2,.8,.2,1);
    overflow: visible;
    padding: 0;
}
.ls-chat-launcher:hover {
    transform: translateY(-3px) scale(1.08);
    filter: drop-shadow(0 10px 22px rgba(99,102,241,0.38));
}
.ls-chat-launcher:active {
    transform: translateY(-1px) scale(0.97);
}
.ls-chat-launcher__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 6px 16px rgba(79, 70, 229, 0.35));
}
.ls-chat-launcher__badge {
    position: absolute;
    top: 4px;
    right: 2px;
    left: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #10b981;
    border: 2.5px solid #ffffff;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: ls-chat-pulse 2.2s infinite;
}
@keyframes ls-chat-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* ---------- Chat Window Panel ---------- */
.ls-chat-window {
    position: fixed;
    bottom: 100px;
    right: 28px;
    z-index: 9999;
    width: 400px;
    max-width: calc(100vw - 32px);
    height: 620px;
    max-height: calc(100vh - 120px);
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 30px 80px rgba(15,23,42,0.32), 0 10px 24px rgba(15,23,42,0.18);
    display: none;
    flex-direction: column;
    overflow: hidden;
    transform-origin: bottom right;
}
.ls-chat-window[aria-hidden="false"] {
    display: flex;
    animation: ls-chat-windowIn 0.28s cubic-bezier(.2,.8,.2,1);
}
@keyframes ls-chat-windowIn {
    from { opacity: 0; transform: translateY(18px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 520px) {
    .ls-chat-window { bottom: 96px; right: 12px; left: 12px; width: auto; height: 66vh; }
    .ls-chat-launcher { bottom: 20px; right: 20px; }
}

/* Header */
.ls-chat-head {
    padding: 16px 18px 16px 18px;
    background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
    border-bottom: 1px solid #eef2ff;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}
.ls-chat-head::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
    opacity: 0.9;
}
.ls-chat-head__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ede9fe 0%, #c7d2fe 100%);
    border: 2.5px solid #fff;
    box-shadow: 0 2px 8px rgba(99,102,241,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.ls-chat-head__avatar img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}
.ls-chat-head__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ls-chat-head__name {
    font-size: 15.5px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}
.ls-chat-head__status {
    font-size: 12px;
    font-weight: 500;
    color: #10b981;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ls-chat-head__status::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.18);
}
.ls-chat-head__close {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.ls-chat-head__close:hover { background: #fee2e2; color: #dc2626; transform: rotate(90deg); }

/* Body */
.ls-chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 22px 16px 14px 16px;
    background: #f0f4ff;
    background-image:
        radial-gradient(circle at 0% 0%, rgba(139, 92, 246, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(99, 102, 241, 0.08) 0%, transparent 55%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}
.ls-chat-body::-webkit-scrollbar { width: 6px; }
.ls-chat-body::-webkit-scrollbar-track { background: transparent; }
.ls-chat-body::-webkit-scrollbar-thumb { background: #c7d2fe; border-radius: 999px; }
.ls-chat-body::-webkit-scrollbar-thumb:hover { background: #a5b4fc; }

/* Messages */
.ls-chat-msg {
    display: flex;
    gap: 9px;
    max-width: 82%;
    animation: ls-chat-msgIn 0.24s cubic-bezier(.2,.8,.2,1);
}
@keyframes ls-chat-msgIn {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ls-chat-msg--bot { align-self: flex-start; }
.ls-chat-msg--user { align-self: flex-end; flex-direction: row-reverse; }
.ls-chat-msg__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ffffff;
    border: 1.5px solid #e0e7ff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(99,102,241,0.12);
}
.ls-chat-msg__avatar img { width: 20px; height: 20px; object-fit: contain; }
.ls-chat-msg--user .ls-chat-msg__avatar {
    background: linear-gradient(135deg, #6366f1 0%, #7c3aed 100%);
    color: #fff;
    border: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
}
.ls-chat-msg__bubble {
    padding: 10px 14px;
    font-size: 13.5px;
    line-height: 1.55;
    word-break: break-word;
    white-space: pre-wrap;
}
.ls-chat-msg--bot .ls-chat-msg__bubble {
    background: #ffffff;
    color: #1e293b;
    border-radius: 16px 16px 16px 5px;
    box-shadow: 0 2px 6px rgba(15,23,42,0.06);
    border: 1px solid #eef2ff;
}
.ls-chat-msg--user .ls-chat-msg__bubble {
    background: linear-gradient(135deg, #6366f1 0%, #7c3aed 100%);
    color: #ffffff;
    border-radius: 16px 16px 5px 16px;
    box-shadow: 0 4px 12px rgba(99,102,241,0.32);
}

/* Typing Indicator */
.ls-chat-typing {
    display: flex;
    gap: 4px;
    padding: 8px 2px;
}
.ls-chat-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #a5b4fc;
    animation: ls-chat-bounce 1.3s infinite ease-in-out;
}
.ls-chat-typing span:nth-child(2) { animation-delay: 0.15s; background: #818cf8; }
.ls-chat-typing span:nth-child(3) { animation-delay: 0.30s; background: #6366f1; }
@keyframes ls-chat-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.6; }
    30%           { transform: translateY(-6px); opacity: 1; }
}

/* Quick Reply Chips */
.ls-chat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 2px 0 4px 0;
    animation: ls-chat-msgIn 0.35s ease;
}
.ls-chat-chip {
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid #c7d2fe;
    background: #ffffff;
    color: #4f46e5;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    font-family: inherit;
}
.ls-chat-chip:hover {
    background: linear-gradient(135deg, #6366f1 0%, #7c3aed 100%);
    color: #fff;
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(99,102,241,0.28);
}

/* Footer Input */
.ls-chat-foot {
    padding: 14px 16px 16px 16px;
    background: #ffffff;
    border-top: 1px solid #eef2ff;
}
.ls-chat-inputwrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f1f5f9;
    border: 1.5px solid #e2e8f0;
    border-radius: 999px;
    padding: 4px 4px 4px 14px;
    transition: all 0.18s ease;
}
.ls-chat-inputwrap:focus-within {
    border-color: #818cf8;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(99,102,241,0.12);
}
.ls-chat-attach {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.ls-chat-attach:hover { background: #e0e7ff; color: #4f46e5; }
.ls-chat-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13.5px;
    color: #0f172a;
    padding: 8px 4px;
    font-family: inherit;
    line-height: 1.4;
}
.ls-chat-input::placeholder { color: #94a3b8; }
.ls-chat-send {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, #6366f1 0%, #7c3aed 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.16s ease;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(99,102,241,0.3);
}
.ls-chat-send:hover:not(:disabled) {
    transform: scale(1.08) rotate(-6deg);
    box-shadow: 0 6px 16px rgba(99,102,241,0.45);
}
.ls-chat-send:disabled {
    background: #cbd5e1;
    cursor: not-allowed;
    opacity: 0.7;
    box-shadow: none;
}
/* =========================================================
   AGENT ASSISTANT PAGE — ChatGPT-style enhanced UI
   Prefix: .ls-agent-*
   ========================================================= */

/* Fullscreen fit — NO OUTER PAGE SCROLLBAR */
body.ls-agent-page { height: 100vh !important; overflow: hidden !important; }
body.ls-agent-page .ls-shell { min-height: 100vh !important; height: 100vh !important; max-height: 100vh !important; overflow: hidden; }
body.ls-agent-page .ls-main { height: 100vh; max-height: 100vh; min-height: 0; overflow: hidden; }
body.ls-agent-page .ls-topbar { flex-shrink: 0; }
body.ls-agent-page .ls-content {
    flex: 1 1 auto;
    height: 0;       /* critical: enable flex child percentage heights */
    min-height: 0;
    padding: 16px 22px 18px !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
body.ls-agent-page .lc-container {
    margin-top: 0 !important;
    padding: 16px 16px 14px !important;
    flex: 1 1 auto;
    height: 0;
    min-height: 0;
    overflow: hidden;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 20px !important;
}

.ls-agent {
  position: relative;
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

@media (max-width: 1360px) {
  .ls-agent { grid-template-columns: 240px minmax(0,1fr); }
  .ls-agent-suggest { display: none; }
}
@media (max-width: 980px) {
  .ls-agent { grid-template-columns: minmax(0,1fr); }
  .ls-agent-history { display: none; }
}

/* ------------ LEFT SIDEBAR: Conversation History ------------ */
.ls-agent-history {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 16px 12px 14px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}
.ls-agent-history__eyebrow {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 4px;
}
.ls-agent-history__desc {
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
  margin: 0 0 12px;
}
.ls-agent-history__new {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: none;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #6366f1 0%, #7c3aed 100%);
  box-shadow: 0 8px 18px rgba(99,102,241,0.32);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.ls-agent-history__new:hover {
  transform: translateY(-1.5px);
  filter: brightness(1.06);
  box-shadow: 0 12px 26px rgba(99,102,241,0.42);
}
.ls-agent-history__new:active { transform: translateY(0); }

.ls-agent-history__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  padding-right: 4px;
  flex: 1;
}
.ls-agent-history__list::-webkit-scrollbar { width: 6px; }
.ls-agent-history__list::-webkit-scrollbar-thumb { background:#e2e8f0; border-radius:10px; }
.ls-agent-history__list::-webkit-scrollbar-thumb:hover { background:#cbd5e1; }

.ls-agent-conv {
  display: grid;
  grid-template-columns: 22px minmax(0,1fr) 22px;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 10px;
  border-radius: 12px;
  cursor: pointer;
  color: #475569;
  border: 1px solid transparent;
  transition: background 0.15s ease, border 0.15s ease, color 0.15s ease;
}
.ls-agent-conv:hover {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #0f172a;
}
.ls-agent-conv--active {
  background: linear-gradient(135deg, rgba(99,102,241,0.08) 0%, rgba(139,92,246,0.08) 100%);
  border-color: rgba(99,102,241,0.28);
  color: #4c1d95;
}
.ls-agent-conv--active:hover {
  background: linear-gradient(135deg, rgba(99,102,241,0.12) 0%, rgba(139,92,246,0.12) 100%);
}
.ls-agent-conv__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: #64748b;
  margin-top: 1px;
}
.ls-agent-conv--active .ls-agent-conv__icon { color: #6366f1; }
.ls-agent-conv__title {
  font-size: 12.5px;
  line-height: 1.5;
  font-weight: 500;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.ls-agent-conv__more {
  background: transparent;
  border: none;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: #94a3b8;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.ls-agent-conv:hover .ls-agent-conv__more { opacity: 1; }
.ls-agent-conv__more:hover { background: #f1f5f9; color: #334155; }

/* ------------ CENTER CHAT AREA ------------ */
.ls-agent-chat {
  position: relative;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  box-shadow: 0 1px 3px rgba(15,23,42,0.05);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}
.ls-agent-chat::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(139,92,246,0.05) 0, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(99,102,241,0.05) 0, transparent 45%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'><path d='M35 5l8.5 17H62l-14 10.5 5 17L35 44.5 17 49.5l5-17L8 22h18.5z' fill='%23f1f5f9' fill-opacity='0.45' stroke='%23e2e8f0' stroke-opacity='0.6' stroke-width='0.8'/></svg>");
  background-size: auto, auto, 90px 90px;
  background-repeat: no-repeat, no-repeat, repeat;
  pointer-events: none;
  opacity: 0.85;
}
.ls-agent-chat > * { position: relative; z-index: 1; }

/* -------- EMPTY STATE HERO -------- */
.ls-agent-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 24px 42px 16px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.ls-agent-empty__glow {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 480px;
  height: 300px;
  background: radial-gradient(circle, rgba(139,92,246,0.22) 0%, rgba(99,102,241,0.10) 45%, transparent 75%);
  filter: blur(12px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.ls-agent-empty__ill {
  position: relative;
  z-index: 2;
  width: 120px;
  height: 120px;
  margin-bottom: 14px;
  filter: drop-shadow(0 18px 32px rgba(99,102,241,0.38));
  animation: ls-agent-bob 3.2s ease-in-out infinite;
}
.ls-agent-empty__ill img { width: 100%; height: 100%; object-fit: contain; }
@keyframes ls-agent-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.ls-agent-empty__title {
  position: relative;
  z-index: 2;
  font-size: 34px;
  font-weight: 800;
  margin: 0 0 14px;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #ec4899 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 2px 14px rgba(139,92,246,0.16);
}
.ls-agent-empty__subtitle {
  font-size: 30px;
  font-weight: 700;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #ec4899 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.ls-agent-empty__desc {
  position: relative;
  z-index: 2;
  max-width: 760px;
  font-size: 15px;
  line-height: 1.75;
  color: #475569;
  margin: 0 auto 14px;
  font-weight: 500;
}
.ls-agent-empty__cta {
  position: relative;
  z-index: 2;
  font-size: 17px;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 26px;
}

/* 5 FEATURE CARDS */
.ls-agent-features {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 14px;
  margin-top: 4px;
}
@media (max-width: 1280px) { .ls-agent-features { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .ls-agent-features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .ls-agent-features { grid-template-columns: 1fr; } }

.ls-agent-feature {
  background: #ffffff;
  border: 1.5px solid rgba(99,102,241,0.28);
  border-radius: 16px;
  padding: 18px 16px 18px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: transform 0.2s cubic-bezier(.2,.8,.2,1), border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ls-agent-feature::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.32s cubic-bezier(.2,.8,.2,1);
}
.ls-agent-feature:hover {
  transform: translateY(-4px);
  border-color: rgba(139,92,246,0.55);
  background: linear-gradient(180deg, #ffffff 0%, rgba(245,243,255,0.7) 100%);
  box-shadow:
    0 14px 34px rgba(99,102,241,0.18),
    0 2px 6px rgba(15,23,42,0.05);
}
.ls-agent-feature:hover::before { transform: scaleX(1); }

.ls-agent-feature__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ls-agent-feature__title {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.ls-agent-feature__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ffffff;
  border: 1.2px solid rgba(99,102,241,0.3);
  color: #6366f1;
  transition: all 0.22s ease;
  flex-shrink: 0;
}
.ls-agent-feature:hover .ls-agent-feature__arrow {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-color: transparent;
  color: #fff;
  transform: translate(2px, -2px) rotate(-45deg);
}
.ls-agent-feature__desc {
  font-size: 12.5px;
  line-height: 1.55;
  color: #64748b;
  margin-top: auto;
  padding-top: 4px;
  font-weight: 500;
}

/* -------- CHAT BODY MESSAGES -------- */
.ls-agent-chat__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ls-agent-chat__scroller {
  flex: 1;
  overflow-y: auto;
  padding: 28px 34px 20px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.ls-agent-chat__scroller::-webkit-scrollbar { width: 8px; }
.ls-agent-chat__scroller::-webkit-scrollbar-track { background: transparent; }
.ls-agent-chat__scroller::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }
.ls-agent-chat__scroller::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }

.ls-agent-msg { display: flex; flex-direction: column; gap: 0; }

/* User message */
.ls-agent-msg--user { align-items: stretch; }
.ls-agent-msg__userrow {
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) auto;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 20px 16px;
  background: linear-gradient(180deg, #fafbff 0%, #ffffff 100%);
  border-bottom: 1px solid #f1f5f9;
  margin: 0 -34px;
  padding-left: 34px;
  padding-right: 34px;
}
.ls-agent-msg__avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.ls-agent-msg__avatar--user {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff;
  box-shadow: 0 4px 10px rgba(99,102,241,0.25);
}
.ls-agent-msg__avatar--bot {
  background: linear-gradient(135deg, #ede9fe 0%, #faf5ff 100%);
  border: 1.5px solid #ddd6fe;
  padding: 4px;
  overflow: hidden;
}
.ls-agent-msg__avatar--bot img { width: 100%; height: 100%; object-fit: contain; }
.ls-agent-msg__question {
  font-size: 16px;
  line-height: 1.6;
  color: #0f172a;
  font-weight: 700;
  margin: 4px 0 0;
  letter-spacing: -0.01em;
}
.ls-agent-msg__copy {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #64748b;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s ease;
  flex-shrink: 0;
}
.ls-agent-msg__copy:hover {
  color: #6366f1;
  border-color: #c7d2fe;
  background: #eef2ff;
  transform: translateY(-1px);
}

/* Bot message */
.ls-agent-msg--bot {}
.ls-agent-msg__row {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 14px;
  align-items: flex-start;
  padding: 2px 0;
}
.ls-agent-msg__content--bot {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ls-agent-msg__text {
  font-size: 14.5px;
  line-height: 1.8;
  color: #334155;
}
.ls-agent-msg__text p { margin: 0 0 12px; }
.ls-agent-msg__text p:last-child { margin-bottom: 0; }
.ls-agent-msg__text h4 {
  font-size: 14.5px;
  font-weight: 700;
  color: #0f172a;
  margin: 16px 0 8px;
}
.ls-agent-msg__olist {
  margin: 4px 0 10px;
  padding-left: 22px;
}
.ls-agent-msg__olist > li {
  margin-bottom: 10px;
  color: #1e293b;
  font-weight: 500;
}
.ls-agent-msg__ulist {
  margin: 8px 0 6px;
  padding-left: 20px;
}
.ls-agent-msg__ulist > li {
  margin-bottom: 4px;
  color: #475569;
  font-weight: 400;
  font-size: 14px;
}
.ls-agent-msg__ulist em {
  color: #64748b;
  font-size: 12.5px;
  font-style: normal;
  font-weight: 500;
  background: #f8fafc;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
}

.ls-agent-msg__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 2px;
}
.ls-agent-msg__action {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #64748b;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s ease;
}
.ls-agent-msg__action:hover {
  color: #6366f1;
  border-color: #c7d2fe;
  background: #eef2ff;
}
.ls-agent-msg__action--good:hover  { color: #10b981; border-color: #a7f3d0; background: #ecfdf5; }
.ls-agent-msg__action--bad:hover   { color: #ef4444; border-color: #fecaca; background: #fef2f2; }

.ls-agent-msg__regen { margin-left: auto; }
.ls-agent-msg__regenerate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ffffff 0%, #fafaff 100%);
  border: 1px solid #e0e7ff;
  color: #4f46e5;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
}
.ls-agent-msg__regenerate:hover {
  background: linear-gradient(135deg, #eef2ff 0%, #faf5ff 100%);
  border-color: #a5b4fc;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(99,102,241,0.16);
}

/* ------------ RIGHT SIDEBAR: Suggested Questions ------------ */
.ls-agent-suggest {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 16px;
  height: calc(100vh - 130px);
  overflow: hidden;
}
.ls-agent-suggest__head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px 2px;
  font-size: 14.5px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.ls-agent-suggest__head svg { color: #6366f1; flex-shrink: 0; }

.ls-agent-suggest__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding-right: 4px;
}
.ls-agent-suggest__list::-webkit-scrollbar { width: 6px; }
.ls-agent-suggest__list::-webkit-scrollbar-thumb { background: #fed7aa; border-radius: 10px; }

.ls-agent-sq {
  display: grid;
  grid-template-columns: 22px minmax(0,1fr);
  gap: 10px;
  align-items: flex-start;
  padding: 14px 14px;
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
  border: 1.5px solid #fcd34d;
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: #92400e;
  transition: transform 0.2s cubic-bezier(.2,.8,.2,1), box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}
.ls-agent-sq::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #f59e0b 0%, #fb923c 100%);
  transform: scaleX(0.2);
  transform-origin: left center;
  transition: transform 0.32s cubic-bezier(.2,.8,.2,1);
}
.ls-agent-sq:hover {
  transform: translateY(-2.5px) scale(1.01);
  box-shadow: 0 10px 22px rgba(251,146,60,0.24);
  border-color: #f59e0b;
}
.ls-agent-sq:hover::after { transform: scaleX(1); }
.ls-agent-sq--active {
  background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%);
  border-color: #f59e0b;
  box-shadow: 0 6px 16px rgba(245,158,11,0.20);
}
.ls-agent-sq--active::after { transform: scaleX(1); }
.ls-agent-sq__star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  flex-shrink: 0;
}
.ls-agent-sq__text {
  font-size: 12.5px;
  line-height: 1.6;
  font-weight: 600;
  color: #78350f;
}

/* ------------ INPUT BOTTOM ------------ */
.ls-agent-input {
  width: 100%;
  padding: 0 34px 22px;
  flex-shrink: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.85) 60%, #ffffff 100%);
  position: relative;
  z-index: 2;
  margin-top: auto;
}
.ls-agent-input__wrap {
  display: grid;
  grid-template-columns: 46px minmax(0,1fr) 52px;
  gap: 10px;
  align-items: flex-end;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  padding: 10px 10px 10px 8px;
  max-width: 860px;
  margin: 0 auto;
  box-shadow: 0 10px 30px rgba(15,23,42,0.08), 0 0 0 1px #ffffff inset;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.ls-agent-input__wrap:focus-within {
  border-color: #a5b4fc;
  box-shadow:
    0 0 0 4px rgba(99,102,241,0.14),
    0 10px 30px rgba(99,102,241,0.18);
}
.ls-agent-input__attach {
  background: #0f172a;
  color: #ffffff;
  border: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s ease;
}
.ls-agent-input__attach:hover {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  transform: translateY(-1px);
}
.ls-agent-input__field {
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  font-size: 15px;
  line-height: 1.6;
  padding: 11px 8px;
  font-family: inherit;
  color: #0f172a;
  max-height: 180px;
  min-height: 46px;
  font-weight: 500;
}
.ls-agent-input__field::placeholder {
  color: #94a3b8;
  font-weight: 400;
}
.ls-agent-input__send {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%);
  box-shadow: 0 10px 20px rgba(124,58,237,0.38);
  transition: all 0.22s cubic-bezier(.2,.8,.2,1);
  position: relative;
}
.ls-agent-input__send::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b 0%, #ec4899 0%, #8b5cf6 50%, #6366f1 100%);
  z-index: -1;
  filter: blur(6px);
  opacity: 0.45;
}
.ls-agent-input__send:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.05);
  filter: brightness(1.08);
}
.ls-agent-input__send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.ls-agent-input__send img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(255,255,255,0.25));
}
.ls-agent-input__hint {
  text-align: center;
  font-size: 11.5px;
  color: #94a3b8;
  margin: 10px 0 0;
  font-weight: 500;
}

/* TYPING INDICATOR */
.ls-agent-typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 16px;
  background: #f8fafc;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  width: fit-content;
}
.ls-agent-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a5b4fc;
  animation: ls-agent-bounce 1.3s infinite ease-in-out;
}
.ls-agent-typing span:nth-child(2) { animation-delay: 0.18s; background: #818cf8; }
.ls-agent-typing span:nth-child(3) { animation-delay: 0.36s; background: #6366f1; }
@keyframes ls-agent-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40%           { transform: translateY(-6px); opacity: 1; }
}
/* =========================================================
   AGENT BUILDER — Bot Builder 3-column layout
   Prefix: .ls-builder-*
   ========================================================= */

/* Full screen locked layout — no outer scroll */
body.ls-builder-page {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
}
body.ls-builder-page .ls-shell {
    min-height: 100vh !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden;
    background: linear-gradient(180deg,#f3f4f6 0%, #eef2ff 100%);
}
body.ls-builder-page .ls-sidebar { overflow-y: auto; flex-shrink:0; }
body.ls-builder-page .ls-main.ls-builder-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    height: 100vh;
    max-height: 100vh;
    min-height: 0;
    overflow: hidden;
}
body.ls-builder-page .ls-topbar { flex-shrink: 0; }

/* ============================================================
   COMBINED TABS LAYOUT (Agent Builder) — 2 rows dlm 1 panel
   Override default lc-container sebab cuma pegang tabs sahaja,
   tiada content dibawah dlm main.
   ============================================================ */
body.ls-builder-page .ls-content {
    padding: 12px 18px 10px;
    flex-shrink: 0;
    flex: 0 0 auto;
}
body.ls-builder-page .lc-container {
    margin-top: 14px;
    padding: 10px 18px 14px;
    gap: 8px;
    flex: 0 0 auto;
    min-height: 0;
    height: auto;
    max-height: none;
    overflow: visible;
    border-radius: 22px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
}
/* Builder tabs when COMBINED inside lc-container — remove outer spacing pad */
.ls-builder-tabsWrap--combined {
    padding: 4px 0 2px;
    background: transparent;
    flex-shrink: 0;
}
.ls-builder-tabsWrap--combined .ls-builder-tabs {
    box-shadow: 0 1px 6px rgba(15, 23, 42, 0.04), 0 0 0 1px rgba(148, 163, 184, 0.16) inset;
}
/* Reduce jarak ls-builder-wrap dengan combined tabs panel */
body.ls-builder-page .ls-builder-wrap {
    padding-top: 4px;
}

/* -------- BANNER HEADER (top dark blue label) -------- */
.ls-builder-banner {
    position: relative;
    width: calc(100% - 28px);
    margin: 14px 14px 0;
    height: 70px;
    border-radius: 14px 14px 0 0;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 10px 24px -10px rgba(30, 58, 138, 0.45),
                0 2px 6px rgba(15, 23, 42, 0.06);
}
.ls-builder-banner__bg {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(1200px 140px at 100% 20%, rgba(96,165,250,0.35) 0%, transparent 60%),
      radial-gradient(800px 120px at 85% 100%, rgba(129, 140, 248, 0.35) 0%, transparent 60%),
      linear-gradient(100deg, #0b1e4a 0%, #0f2861 40%, #163683 75%, #1e3a8a 100%);
}
.ls-builder-banner__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(circle at 20% 30%, rgba(96,165,250,0.14) 0 2px, transparent 3px),
      radial-gradient(circle at 60% 70%, rgba(96,165,250,0.10) 0 1.5px, transparent 3px),
      radial-gradient(circle at 80% 20%, rgba(191, 219, 254, 0.18) 0 3px, transparent 5px),
      radial-gradient(circle at 35% 75%, rgba(199, 210, 254, 0.12) 0 2.4px, transparent 4px);
    background-size: 28px 28px, 34px 34px, 100% 100%, 100% 100%;
    pointer-events: none;
}
.ls-builder-banner__content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 26px;
}
.ls-builder-banner__title {
    margin: 0;
    font-size: 18.5px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.1px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* -------- CENTERED TABS WRAP -------- */
.ls-builder-tabsWrap {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px 14px 8px;
    background: transparent;
    flex-shrink: 0;
}
.ls-builder-tabs {
    display: inline-flex;
    gap: 10px;
    padding: 6px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05), 0 0 0 1px rgba(148, 163, 184, 0.18) inset;
    border: 1px solid rgba(226, 232, 240, 0.7);
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
}
.ls-builder-tab {
    border: 1px solid transparent;
    background: #fff;
    color: #475569;
    font-size: 13.5px;
    font-weight: 600;
    padding: 10px 16px 10px 14px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: all .18s ease;
}
.ls-builder-tab:hover {
    background: #f1f5f9;
    color: #0f172a;
    border-color: rgba(226,232,240,0.85);
}
.ls-builder-tab__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    opacity: 0.9;
}
.ls-builder-tab--active {
    background: linear-gradient(135deg, #e0e7ff 0%, #ede9fe 100%);
    color: #4338ca;
    border-color: rgba(99, 102, 241, 0.45);
    box-shadow: 0 6px 14px -8px rgba(99, 102, 241, 0.55),
                0 0 0 1px rgba(199, 210, 254, 0.65);
    position: relative;
}
.ls-builder-tab--active .ls-builder-tab__icon { opacity: 1; color:#4f46e5; }
.ls-builder-tab--active::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -4px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #6366f1, #a855f7);
    opacity: 0.8;
}

/* -------- WRAPPER WORKSPACE 3 COLUMNS -------- */
.ls-builder-wrap {
    flex: 1 1 auto;
    min-height: 0;
    height: 0;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) 360px;
    gap: 14px;
    padding: 6px 14px 14px;
    align-items: stretch;
    overflow: hidden;
}
/* ==============================================================
   TEMPORARY: Hide Save Panel column (grey box) untuk skrin ini sahaja
   NEXT SCREEN: delete class ls-builder-col--hidden-now sahaja,
                grid 3 column akan pulih semula AUTOMATIK tanpa ubah code
   ============================================================== */
.ls-builder-col--hidden-now {
    display: none !important;
}
.ls-builder-wrap:has(.ls-builder-col--save.ls-builder-col--hidden-now) {
    /* Ruang kiri kosong diisi oleh knowledge + test column */
    grid-template-columns: minmax(0, 1fr) 360px;
}

.ls-builder-col {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* -------- COL 1 — SAVE / GREY -------- */
.ls-builder-col--save { border-radius: 18px; overflow: hidden; }
.ls-builder-savegrey {
    background: linear-gradient(160deg, #e5e7eb 0%, #d1d5db 100%);
    border: 1px solid #c7cbd1;
    border-radius: 18px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px 20px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35),
                0 4px 10px rgba(15,23,42,0.06);
    text-align: center;
}
.ls-builder-savegrey__icon {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    background: rgba(255,255,255,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.25);
}
.ls-builder-savegrey__title {
    font-size: 15px;
    font-weight: 700;
    color: #475569;
    letter-spacing: 0.2px;
}
.ls-builder-savegrey__desc {
    font-size: 12.5px;
    color: #64748b;
    font-style: italic;
}

/* -------- COL 2 — CENTER CONTENT -------- */
.ls-builder-col--center {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 18px 20px 16px;
    box-shadow: 0 1px 3px rgba(15,23,42,0.05);
    overflow-y: auto;
    position: relative;
    z-index: 15;                /* PENTING: stack > test column supaya popup Add Button yang overflow ke kanan column tengah TIDAK tertindih di bawah panel Test PLASBot sebelah kanan. */
}
.ls-builder-panels { width: 100%; height: 100%; position: relative; }
.ls-builder-panel { display: none; flex-direction: column; gap: 18px; width: 100%; }
.ls-builder-panel--active { display: flex; }
.ls-builder-empty {
    padding: 60px 20px;
    text-align: center;
    color: #64748b;
    border: 1.5px dashed #cbd5e1;
    border-radius: 14px;
    background: #f8fafc;
    font-size: 13.5px;
}

/* ================ INTENTS SCREEN – SINGLE FULL WIDTH LAYOUT (DROPDOWN TOP BAR, BUANG PANEL KIRI) ================ */
.ls-builder-panel--intents {
    display: none;
    flex-direction: column;
    gap: 0;
    width: 100%;
    height: auto;
    min-height: 560px;
}
.ls-builder-panel--intents.ls-builder-panel--active { display: flex; }
.ls-intents-col { display: flex; flex-direction: column; gap: 12px; }

/* Single full width config panel */
.ls-intents-col--config-fullwidth {
    width: 100%;
    max-width: none;
    flex: 1 1 100%;
}

/* HIDE OLD panel kiri (aside list) sekiranya ada DOM lama */
.ls-intents-col--list { display: none !important; }

/* ========= HEAD TOPBAR BARU DALAM HEADER GELAP: DROPDOWN SELECT INTENT + BUTTON +ADD INTENT (DALAM DARK GRADIENT) ========= */
.ls-intents-head-topbar {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 16px 2px;
    flex-wrap: nowrap;
    z-index: 2;
    position: relative;
}
.ls-intents-head-topbar__selectwrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 220px;
    max-width: 560px;
}
.ls-intents-head-topbar__select {
    width: 100%;
    min-height: 40px;
    padding: 7px 44px 7px 14px;
    border: 1.25px solid rgba(255,255,255,0.16);
    background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(241,245,249,0.98) 100%);
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.005em;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    box-shadow: 0 4px 14px -10px rgba(15,23,42,0.38), inset 0 1px 0 #ffffff;
    transition: all .18s ease;
}
.ls-intents-head-topbar__select:hover {
    border-color: rgba(147, 197, 253, 0.9);
    background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
    box-shadow: 0 7px 18px -12px rgba(59,130,246,0.75), inset 0 1px 0 #ffffff;
    transform: translateY(-0.6px);
}
.ls-intents-head-topbar__select:focus-visible {
    outline: none;
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2), 0 5px 16px -11px rgba(59,130,246,0.5);
}
.ls-intents-head-topbar__chev {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px; height: 28px;
    border-radius: 7px;
    background: rgba(30, 41, 59, 0.08);
    color: #475569;
    display: inline-flex; align-items: center; justify-content: center;
    pointer-events: none;
    transition: all .18s ease;
}
.ls-intents-head-topbar__chev svg { width: 17px; height: 17px; }
.ls-intents-head-topbar__select:hover ~ .ls-intents-head-topbar__chev {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    transform: translateY(-50%) scale(1.05);
}

/* Button + Add Intent kanan head topbar (dalam gelap header) — COMPACT PRO */
.ls-intents-head-topbar__addbtn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px;
    min-height: 40px;
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
    border: 1px solid rgba(191, 219, 254, 0.55);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.002em;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 9px 22px -14px rgba(37, 99, 235, 0.8), inset 0 1px 0 rgba(255,255,255,0.25);
    transition: all .18s ease;
    flex-shrink: 0;
}
.ls-intents-head-topbar__addbtn svg { width: 15px; height: 15px; }
.ls-intents-head-topbar__addbtn:hover {
    filter: brightness(1.09);
    transform: translateY(-0.9px);
    box-shadow: 0 12px 26px -14px rgba(59, 130, 246, 0.9), inset 0 1px 0 rgba(255,255,255,0.3);
}
.ls-intents-head-topbar__addbtn:active { transform: translateY(0); }

@media (max-width: 640px) {
    .ls-intents-head-topbar { flex-wrap: wrap; padding: 10px 12px 0; }
    .ls-intents-head-topbar__addbtn { width: 100%; justify-content: center; }
}

/* HIDE OLD topbar luar (dah pindah dalam header gelap) */
.ls-intents-topbar { display: none !important; }


/* --- Right: Intent Config column (FULL WIDTH, no more left column) --- */
.ls-intents-col--config {
    flex: 1 1 100%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 18px -16px rgba(15,23,42,0.18);
    display: flex;
    flex-direction: column;
    padding: 16px 18px 18px;
    gap: 12px;
}

/* Top dark bar (Dropdown + Add Intent + User Say / Agent Say tabs) - COMPACT PRO (BUANG AVATAR+TITLE REDUNDANT) */
.ls-intents-config-head {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 13px 16px 14px;
    background: linear-gradient(135deg, #0b1437 0%, #121a4a 45%, #0f1738 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
    border-radius: 14px 14px 0 0;
}
.ls-intents-config-head::before {
    content: '';
    position: absolute;
    right: -70px; top: -80px;
    width: 320px; height: 320px;
    background: radial-gradient(circle at 30% 30%, rgba(99, 102, 241, 0.3) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
}
.ls-intents-config-head::after {
    content: '';
    position: absolute;
    right: 26px; top: 24px;
    width: 60px; height: 60px;
    background-image: radial-gradient(circle, rgba(147, 197, 253, 0.5) 1.5px, transparent 1.5px);
    background-size: 10px 10px;
    opacity: 0.9;
    pointer-events: none;
    z-index: 0;
}
.ls-intents-config-head > * { position: relative; z-index: 1; }

.ls-intents-config-head__row1 {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 3px 18px 8px;
}
.ls-intents-config-head__avatar {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: linear-gradient(145deg, #60a5fa, #4f46e5);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18), 0 10px 22px -12px rgba(99, 102, 241, 0.9), inset 0 1px 0 rgba(255,255,255,0.28);
    flex: 0 0 46px;
}
.ls-intents-config-head__avatar svg { width: 23px; height: 23px; }
.ls-intents-config-head__titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ls-intents-config-head__name {
    font-size: 20px;
    font-weight: 800;
    color: #f8fafc;
    letter-spacing: -0.012em;
    line-height: 1.15;
}
.ls-intents-config-head__subtitle {
    font-size: 12.5px;
    color: rgba(203, 213, 225, 0.92);
    font-weight: 500;
    letter-spacing: 0.004em;
    display: inline-flex; align-items: center; gap: 5px;
}
.ls-intents-config-head__subeditico {
    width: 20px; height: 20px;
    border-radius: 5px;
    background: rgba(148, 163, 184, 0.14);
    display: inline-flex; align-items: center; justify-content: center;
    color: rgba(203, 213, 225, 0.95);
    cursor: pointer;
    transition: all .15s ease;
}
.ls-intents-config-head__subeditico:hover {
    background: rgba(148, 163, 184, 0.26);
    color: #fff;
    transform: translateY(-0.4px);
}

/* TABS 50/50 SPLIT BESAR IKUT DESIGN SPEC — COMPACT PRO UI/UX */
.ls-intents-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    width: 100%;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 18px;
    padding: 4px;
    align-items: stretch;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 26px -22px rgba(99, 102, 241, 0.6);
}
.ls-intents-tab {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px 11px 11px;
    border-radius: 15px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #cbd5e1;
    transition: all .18s ease;
    text-align: left;
    justify-content: flex-start;
}
.ls-intents-tab:hover:not(.ls-intents-tab--active) {
    background: rgba(255,255,255,0.04);
    color: #e2e8f0;
}
.ls-intents-tab__texts { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ls-intents-tab__label { font-size: 15px; font-weight: 800; color: inherit; letter-spacing: -0.008em; }
.ls-intents-tab__desc { font-size: 10.5px; line-height: 1.5; color: inherit; opacity: 0.82; max-width: 300px; }

/* BULAT ICON DALAM SETIAP TAB — KECILKAN SIZE 20% */
.ls-intents-tab__iconwrap {
    width: 38px; height: 38px;
    border-radius: 50%;
    flex: 0 0 38px;
    display: inline-flex; align-items: center; justify-content: center;
}
.ls-intents-tab__iconwrap svg { width: 18px; height: 18px; }
.ls-intents-tab__iconwrap--gradient {
    background: linear-gradient(145deg, rgba(96, 165, 250, 0.28), rgba(129, 140, 248, 0.2));
    color: #bfdbfe;
    box-shadow: inset 0 0 0 1.3px rgba(191, 219, 254, 0.35);
    transition: all .2s ease;
}
.ls-intents-tab__iconwrap--outline {
    background: rgba(148, 163, 184, 0.05);
    color: rgba(203, 213, 225, 0.9);
    box-shadow: inset 0 0 0 1.3px rgba(148, 163, 184, 0.45);
    transition: all .2s ease;
}

/* ACTIVE TAB - GRADIENT PROPORTIONAL */
.ls-intents-tab--active {
    background: linear-gradient(115deg, #3b82f6 0%, #4f46e5 75%, #6366f1 100%);
    color: #fff !important;
    box-shadow: 0 13px 28px -18px rgba(79, 70, 229, 0.85), inset 0 1px 0 rgba(255,255,255,0.22);
    transform: translateY(-0.7px);
}
.ls-intents-tab--active .ls-intents-tab__iconwrap--gradient {
    background: linear-gradient(145deg, rgba(255,255,255,0.22), rgba(191, 219, 254, 0.15));
    color: #fff;
    box-shadow: inset 0 0 0 1.3px rgba(255, 255, 255, 0.35), 0 6px 18px -10px rgba(15, 23, 42, 0.4);
}
.ls-intents-tab--active .ls-intents-tab__desc { opacity: 0.92; }

/* Hover active tab little glow */
.ls-intents-tab--active:hover {
    filter: brightness(1.05);
}

/* =============== AGENT SAY TAB: CUSTOM HEADER TOP + COMPONENT WRAP =============== */
.ls-intents-tabpanel--agentsay {
    display: none;
    flex-direction: column;
    gap: 12px;
}
.ls-intents-tabpanel--agentsay.ls-intents-tabpanel--active { display: flex; }

/* Agent Say TOP section header ikut spec gambar - FIX OVERLAP SEMPUT dengan CSS GRID 2 columns responsive */
.ls-agentsay-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: flex-start;
    column-gap: 18px;
    row-gap: 10px;
    padding: 4px 2px 8px;
}
.ls-agentsay-head__titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ls-agentsay-head__title {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.01em;
    line-height: 1.35;
}
.ls-agentsay-head__desc {
    margin: 0;
    font-size: 10.5px;
    line-height: 1.5;
    color: #475569;
    font-weight: 500;
    max-width: 460px;
}
.ls-agentsay-head__rightrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding-top: 1px;
    flex-shrink: 0;
    grid-column: 2;
    grid-row: 1 / span 2;
}
/* Mobile / sempit width fallback — pills turun ke bawah row BARU aligned left, tak overlap */
@media (max-width: 780px) {
    .ls-agentsay-head {
        grid-template-columns: 1fr;
    }
    .ls-agentsay-head__rightrow {
        grid-column: 1;
        grid-row: auto;
        justify-content: flex-start;
        padding-top: 4px;
    }
}
/* Extract Entities pill BIRU border label */
.ls-agentsay-head__extractpill {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px 4.5px;
    font-size: 10.5px;
    font-weight: 700;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 18px;
    letter-spacing: 0.01em;
    box-shadow: inset 0 1px 0 #fff;
    transition: all .15s ease;
    cursor: default;
}
.ls-agentsay-head__extractpill:hover {
    background: #dbeafe;
    border-color: #93c5fd;
    transform: translateY(-0.5px);
}
/* DISABLED pill merah combo dropdown */
.ls-agentsay-head__discombo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3.5px 3.5px 3.5px 10px;
    background: #fff;
    border: 1px solid #fca5a5;
    border-radius: 999px;
    box-shadow: 0 2px 8px -6px rgba(220, 38, 38, 0.3), inset 0 1px 0 #ffffff;
    cursor: pointer;
    transition: all .15s ease;
}
.ls-agentsay-head__discombo:hover {
    filter: brightness(0.99);
    box-shadow: 0 4px 12px -7px rgba(220, 38, 38, 0.45);
    transform: translateY(-0.5px);
    border-color: #f87171;
}
.ls-agentsay-head__discombo-tag {
    display: inline-flex;
    align-items: center;
    padding: 2.5px 8px;
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 3px 8px -4px rgba(220, 38, 38, 0.5);
}
.ls-agentsay-head__discombo-arrow {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: #fff;
    color: #64748b;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all .15s ease;
}
.ls-agentsay-head__discombo:hover .ls-agentsay-head__discombo-arrow {
    color: #dc2626;
    transform: rotate(-3deg);
}

/* Toolbar component tabs hitam gelap — agentsay specific add margin/padding */
.ls-agentsay-addcomp {
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
}

/* Canvas biru banner agentsay specific — reset negative margin etc sebab dalam tabpanel, takde panel */
.ls-agentsay-canvas {
    margin: 0;
    border-radius: 14px !important;
}

/* Dynmsg untuk agent say — adjust spacing elak overlap dengan canvas */
.ls-agentsay-dynmsg {
    margin: 16px 0 2px;
}

/* Adjust spacing dalam agentsay tabpanel untuk footer & semua sections */
.ls-intents-tabpanel--agentsay > * + * { margin-top: 0; }
.ls-intents-tabpanel--agentsay .ls-intents-footbar {
    margin: 6px 0 0;
    border-radius: 10px;
    padding: 11px 16px;
}

/* Tab body */
.ls-intents-config-body {
    flex: 1 1 auto;
    padding: 22px 24px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
}
.ls-intents-config-body::-webkit-scrollbar { width: 8px; }
.ls-intents-config-body::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.4); border-radius: 4px; }

.ls-intents-tabpanel { display: none; flex-direction: column; gap: 14px; }
.ls-intents-tabpanel--active { display: flex; }

/* Info box Configure User's Message */
.ls-intents-infobox {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: 14px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px -6px rgba(15,23,42,0.12), inset 0 1px 0 #ffffff;
    position: relative;
}
.ls-intents-infobox__icon {
    position: relative;
    width: 54px; height: 54px;
    flex: 0 0 54px;
    margin-top: 2px;
}
.ls-intents-infobox__iconwrap {
    width: 54px; height: 54px;
    border-radius: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, #3b82f6 0%, #6366f1 60%, #8b5cf6 100%);
    color: #fff;
    box-shadow: 0 10px 24px -10px rgba(99, 102, 241, 0.8), inset 0 1px 0 rgba(255,255,255,0.22);
    position: relative;
    z-index: 2;
}
.ls-intents-infobox__sparkle {
    position: absolute;
    top: -6px; right: -6px;
    width: 22px; height: 22px;
    color: #fbbf24;
    z-index: 3;
    filter: drop-shadow(0 4px 8px rgba(251, 191, 36, 0.5));
}
.ls-intents-infobox__content { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ls-intents-infobox__title {
    margin: 0;
    font-size: 14.5px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.008em;
}
.ls-intents-infobox__desc {
    margin: 0;
    font-size: 12px;
    color: #475569;
    line-height: 1.6;
    font-weight: 520;
}
.ls-intents-infobox__desc--bullet { padding-top: 2px; }

/* Add Training phrase button */
.ls-intents-addphrase {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8.5px 15px;
    border: 1px solid rgba(59, 130, 246, 0.4);
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
    font-size: 12.5px;
    font-weight: 750;
    border-radius: 9px;
    cursor: pointer;
    box-shadow: 0 8px 20px -12px rgba(37, 99, 235, 0.7), inset 0 1px 0 rgba(255,255,255,0.22);
    transition: all .15s ease;
}
.ls-intents-addphrase:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 12px 24px -12px rgba(37, 99, 235, 0.85); }
.ls-intents-addphrase:active { transform: translateY(0); }

/* Training phrases list */
.ls-intents-phrases { display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
.ls-phrase-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto auto;
    align-items: center;
    gap: 9px;
    padding: 9px 10px 9px 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    box-shadow: 0 1px 3px rgba(15,23,42,0.03);
    transition: all .16s ease;
}
.ls-phrase-row:hover { border-color: #cbd5e1; box-shadow: 0 4px 16px -10px rgba(15,23,42,0.1); }
.ls-phrase-row__input {
    border: none;
    outline: none;
    background: transparent;
    padding: 6px 4px;
    font-size: 13px;
    color: #334155;
    width: 100%;
    font-weight: 520;
    border-radius: 7px;
    transition: all .15s ease;
}
.ls-phrase-row__input:focus {
    background: #f8fafc;
    padding-left: 9px;
    box-shadow: inset 0 0 0 1.5px #bfdbfe;
    color: #0f172a;
}
.ls-phrase-row__input::placeholder { color: #94a3b8; font-weight: 500; }
.ls-phrase-ico {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px;
    cursor: pointer;
    background: #ffffff;
    color: #64748b;
    border: 1px solid #e2e8f0;
    transition: all .15s ease;
}
.ls-phrase-ico--edit { color: #2563eb; }
.ls-phrase-ico--edit:hover {
    background: linear-gradient(180deg, #eff6ff, #dbeafe);
    border-color: #93c5fd;
    box-shadow: 0 6px 16px -8px rgba(37, 99, 235, 0.6);
    transform: translateY(-1px);
}
.ls-phrase-ico--delete { color: #dc2626; }
.ls-phrase-ico--delete:hover {
    background: linear-gradient(180deg, #fef2f2, #fee2e2);
    border-color: #fca5a5;
    box-shadow: 0 6px 16px -8px rgba(220, 38, 38, 0.6);
    transform: translateY(-1px);
}

/* Footer train bar */
.ls-intents-footbar {
    display: flex;
    align-items: center;
    padding: 13px 20px;
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    margin: -2px -24px -18px;
}
.ls-intents-footbar__spacer { flex: 1; }
.ls-intents-trainbtn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8.5px 22px;
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 750;
    border-radius: 8px;
    border: 1px solid rgba(34, 197, 94, 0.5);
    cursor: pointer;
    box-shadow: 0 10px 24px -12px rgba(22, 163, 74, 0.85), inset 0 1px 0 rgba(255,255,255,0.2);
    transition: all .16s ease;
}
.ls-intents-trainbtn:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 14px 28px -12px rgba(22, 163, 74, 0.95); }
.ls-intents-trainbtn:active { transform: translateY(0); }

/* Agent Say TBA state */
.ls-intents-tba {
    padding: 48px 22px;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 10px;
    border-radius: 14px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1.5px dashed #cbd5e1;
    color: #64748b;
}
.ls-intents-tba__icon {
    width: 72px; height: 72px;
    border-radius: 20px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, #e0e7ff, #c7d2fe);
    color: #4338ca;
    box-shadow: 0 10px 24px -12px rgba(67, 56, 202, 0.5), inset 0 1px 0 rgba(255,255,255,0.4);
    margin-bottom: 4px;
}
.ls-intents-tba__title { margin: 0; font-size: 16px; font-weight: 800; color: #0f172a; }
.ls-intents-tba__desc { margin: 0; font-size: 13px; color: #64748b; max-width: 440px; line-height: 1.6; }

/* Upload row */
.ls-builder-uploadrow {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 14px;
    align-items: stretch;
}

/* Dropzone */
.ls-builder-dropzone {
    position: relative;
    border: 1.5px dashed #cbd5e1;
    background: #f8fafc;
    border-radius: 14px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 92px;
    transition: all .2s ease;
    cursor: pointer;
}
.ls-builder-dropzone:hover {
    border-color: #93c5fd;
    background: #eff6ff;
}
.ls-builder-dropzone.ls-builder-dropzone--dragover {
    border-color: #6366f1;
    background: #eef2ff;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -10px rgba(99, 102, 241, 0.6);
}
.ls-builder-dropzone__inner {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #334155;
    pointer-events: none;
}
.ls-builder-dropzone__ill {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: #dbeafe;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(147,197,253,0.45);
}
.ls-builder-dropzone__text {
    font-size: 13.5px;
    font-weight: 500;
    color: #475569;
}

/* Upload options */
.ls-builder-uploadopts {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: stretch;
}
.ls-builder-btnopt {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px 10px 12px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #334155;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s ease;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.ls-builder-btnopt:hover {
    border-color: #c7d2fe;
    background: #f5f3ff;
    color: #4338ca;
    transform: translateY(-1px);
}
.ls-builder-btnopt__icon {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ls-builder-btnopt__icon--url {
    background: linear-gradient(135deg,#dcfce7 0%, #bbf7d0 100%);
    color: #15803d;
}
.ls-builder-btnopt__icon--kb {
    background: linear-gradient(135deg,#fef3c7 0%, #fde68a 100%);
    color: #a16207;
}

/* Toggle */
.ls-builder-toggle {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    user-select: none;
    margin-top: -2px;
}
.ls-builder-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.ls-builder-toggle__sw {
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: 11px;
    background: #c7d2fe;
    box-shadow: inset 0 0 0 1px rgba(165, 180, 252, 0.85);
    flex-shrink: 0;
    transition: background .18s ease;
}
.ls-builder-toggle__sw::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.2);
    transition: all .2s ease;
    border: 2px solid #4f46e5;
}
.ls-builder-toggle input:checked + .ls-builder-toggle__sw::after {
    left: 21px;
    border-color: #4338ca;
}
.ls-builder-toggle input:not(:checked) + .ls-builder-toggle__sw { background: #e2e8f0; box-shadow: inset 0 0 0 1px #cbd5e1; }
.ls-builder-toggle input:not(:checked) + .ls-builder-toggle__sw::after { border-color: #94a3b8; }
.ls-builder-toggle__label {
    font-size: 13.5px;
    font-weight: 500;
    color: #334155;
    line-height: 1.4;
}

.ls-builder-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, #e2e8f0 15%, #e2e8f0 85%, transparent);
    margin: 4px 0 2px;
}

/* Document attachments */
.ls-builder-docs { display: flex; flex-direction: column; gap: 14px; }
.ls-builder-docs__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2px;
}
.ls-builder-docs__title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: 0.1px;
}
.ls-builder-docs__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 14px;
}

.ls-builder-doc {
    position: relative;
    padding: 13px 11px 11px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #f8fafc;
    min-height: 90px;
    cursor: pointer;
    transition: all .18s ease;
}
.ls-builder-doc:hover {
    background: #fff;
    border-color: #c7d2fe;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -18px rgba(99, 102, 241, 0.65),
                0 2px 5px rgba(15, 23, 42, 0.04);
}
.ls-builder-doc__status {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding: 2.5px 9px;
    border-radius: 999px;
    color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.12);
}
.ls-builder-doc__status--training { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.ls-builder-doc__status--active   { background: linear-gradient(135deg, #10b981, #34d399); }
.ls-builder-doc__status--failed   { background: linear-gradient(135deg, #ef4444, #f87171); }
.ls-builder-doc__more {
    position: absolute;
    top: 6px;
    right: 6px;
    border: none;
    background: transparent;
    padding: 4px;
    border-radius: 7px;
    cursor: pointer;
    transition: background .15s ease;
}
.ls-builder-doc__more:hover { background: #e2e8f0; }

.ls-builder-doc__body {
    margin-top: 18px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.ls-builder-doc__ico {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.ls-builder-doc__ico svg { width: 18px; height: 18px; }
.ls-builder-doc__ico--pdf  { border-color: rgba(239,68,68,0.25);  background: #fef2f2; }
.ls-builder-doc__ico--docx { border-color: rgba(37,99,235,0.25);  background: #eff6ff; }
.ls-builder-doc__name {
    margin: 3px 0 0;
    font-size: 11.5px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.35;
    word-break: break-word;
    letter-spacing: 0.02px;
}

/* -------- COL 3 — TEST YOUR BOT panel -------- */
.ls-builder-col--test {
    position: relative;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    min-height: 0;
    overflow: visible;
}
.ls-builder-test__collapse {
    width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 10px 12px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all .18s ease;
    box-shadow: 0 1px 2px rgba(15,23,42,0.05);
    flex-shrink: 0;
}
.ls-builder-test__collapse:hover {
    border-color: #c7d2fe;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -10px rgba(99,102,241,0.4);
}
.ls-builder-test__collapse-av {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 3px;
    box-shadow: 0 4px 10px -4px rgba(168, 85, 247, 0.6);
}
.ls-builder-test__collapse-av img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.ls-builder-test__collapse-label {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    flex: 1;
    text-align: left;
}
.ls-builder-test__collapse-chev {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: #f1f5f9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    transition: transform .22s ease;
}
.ls-builder-col--test.ls-builder-col--test-minimized .ls-builder-test__collapse-chev {
    transform: rotate(180deg);
}

.ls-builder-testbox {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 8px 24px -12px rgba(15, 23, 42, 0.18),
                0 2px 5px rgba(15,23,42,0.04);
    transition: opacity .18s ease, transform .18s ease;
}
.ls-builder-col--test.ls-builder-col--test-minimized .ls-builder-testbox {
    display: none;
}

/* Head */
.ls-builder-testbox__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    flex-shrink: 0;
}
.ls-builder-testbox__avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    flex-shrink: 0;
    box-shadow: 0 4px 10px -4px rgba(99,102,241,0.6);
}
.ls-builder-testbox__avatar img { width: 100%; height:100%; object-fit: contain; display:block; }
.ls-builder-testbox__meta { flex: 1 1 auto; min-width: 0; }
.ls-builder-testbox__name {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}
.ls-builder-testbox__status {
    font-size: 12px;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}
.ls-builder-testbox__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}
.ls-builder-testbox__close {
    border: none;
    background: transparent;
    padding: 6px;
    border-radius: 8px;
    cursor: pointer;
    color: #64748b;
    transition: background .15s ease;
}
.ls-builder-testbox__close:hover { background: #f1f5f9; color: #0f172a; }

/* Body */
.ls-builder-testbox__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: linear-gradient(180deg, #f1f5f9 0%, #eef2ff 100%);
}
.ls-builder-testmsg {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 100%;
}
.ls-builder-testmsg--bot { justify-content: flex-start; }
.ls-builder-testmsg--user { justify-content: flex-end; }
.ls-builder-testmsg__avatar {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    flex-shrink: 0;
    margin-bottom: 2px;
}
.ls-builder-testmsg--user .ls-builder-testmsg__avatar { background: linear-gradient(135deg,#1e293b,#475569); }
.ls-builder-testmsg__avatar img { width:100%; height:100%; object-fit: contain; display:block; }
.ls-builder-testmsg__bubble {
    max-width: calc(100% - 40px);
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.45;
    color: #0f172a;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,0.05);
    border: 1px solid #e2e8f0;
}
.ls-builder-testmsg--user .ls-builder-testmsg__bubble {
    background: linear-gradient(135deg,#6366f1,#4f46e5);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 10px -4px rgba(99,102,241,0.6);
}
.ls-builder-testmsg__typing {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}
.ls-builder-testmsg__typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #94a3b8;
    animation: ls-builder-typing 1.2s infinite ease-in-out;
}
.ls-builder-testmsg__typing span:nth-child(2) { animation-delay: .15s; }
.ls-builder-testmsg__typing span:nth-child(3) { animation-delay: .3s; }
@keyframes ls-builder-typing {
    0%,60%,100% { transform: translateY(0); opacity:0.5; }
    30% { transform: translateY(-3px); opacity:1; }
}

/* Foot */
.ls-builder-testbox__foot {
    padding: 10px 10px 12px;
    background: #fff;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0;
}
.ls-builder-testbox__inputwrap {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 5px 5px 5px 12px;
    transition: all .18s ease;
}
.ls-builder-testbox__inputwrap:focus-within {
    border-color: #818cf8;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(165, 180, 252, 0.35);
}
.ls-builder-testbox__input {
    flex: 1 1 auto;
    border: none;
    outline: none;
    background: transparent;
    padding: 7px 4px;
    font-size: 13px;
    color: #0f172a;
    min-width: 0;
}
.ls-builder-testbox__input::placeholder { color: #94a3b8; }
.ls-builder-testbox__attach,
.ls-builder-testbox__send {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: transparent;
    transition: background .15s ease;
    flex-shrink: 0;
}
.ls-builder-testbox__attach:hover { background: #e2e8f0; }
.ls-builder-testbox__send {
    background: linear-gradient(135deg,#eef2ff,#ede9fe);
    color: #6366f1;
}
.ls-builder-testbox__send:hover {
    background: linear-gradient(135deg,#6366f1,#8b5cf6);
    color: #fff;
    box-shadow: 0 4px 10px -4px rgba(99, 102, 241, 0.7);
}

/* Scrollbars for builder */
.ls-builder-col--center::-webkit-scrollbar,
.ls-builder-testbox__body::-webkit-scrollbar { width: 8px; }
.ls-builder-col--center::-webkit-scrollbar-track,
.ls-builder-testbox__body::-webkit-scrollbar-track { background: transparent; }
.ls-builder-col--center::-webkit-scrollbar-thumb,
.ls-builder-testbox__body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
.ls-builder-col--center::-webkit-scrollbar-thumb:hover,
.ls-builder-testbox__body::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Responsive tweaks */
@media (max-width: 1480px) {
    .ls-builder-wrap { grid-template-columns: 260px minmax(0,1fr) 330px; }
}
@media (max-width: 1240px) {
    .ls-builder-docs__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .ls-builder-wrap { grid-template-columns: 220px minmax(0,1fr) 310px; }
}
@media (max-width: 1080px) {
    .ls-builder-wrap { grid-template-columns: 0 minmax(0,1fr) 0; padding: 6px 8px 10px; }
    .ls-builder-col--save { display:none; }
    .ls-builder-col--test { position: fixed; bottom: 18px; right: 14px; width: min(320px, calc(100vw - 28px)); z-index: 50; height: auto; max-height: 72vh; }
}

/* =========================================================
   AGENT BUILDER — Neutralize PLASBOT floating to inline column
   Prefix: .ls-builder-plasbotwrap / .ls-builder-plasbotwin
   (override global .ls-chat-window fixed positioning ONLY for builder panel)
   ========================================================= */
.ls-builder-col--test.ls-builder-col--test-minimized .ls-builder-testbox {
    display: none;
}
.ls-builder-plasbotwrap {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    display: flex;
    align-items: stretch;
}

/* The inner ls-chat-window re-used as PLASBOT template, NON-FLOATING */
.ls-builder-plasbotwrap .ls-chat-window.ls-builder-plasbotwin {
    position: relative !important;
    inset: auto !important;
    bottom: auto !important;
    right: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 28px -14px rgba(99,102,241,0.35),
                0 1px 3px rgba(15,23,42,0.06) !important;
    border: 1px solid rgba(199, 210, 254, 0.55) !important;
    background: linear-gradient(180deg, #fdfdff 0%, #f5f3ff 100%);
    border-radius: 18px !important;
    animation: none !important;
    transform: none !important;
    overflow: hidden;
}
.ls-builder-plasbotwrap .ls-chat-window.ls-builder-plasbotwin[aria-hidden="true"] { display: none; }
.ls-builder-plasbotwrap .ls-chat-window.ls-builder-plasbotwin[aria-hidden="false"] { display: flex; }

/* Slight padding adjustments so header not too big in column */
.ls-builder-plasbotwrap .ls-chat-head {
    padding: 12px 14px 12px 14px !important;
    border-bottom: 1px solid #e0e7ff;
    background: linear-gradient(135deg, #ffffff 0%, #f5f3ff 100%) !important;
    border-radius: 18px 18px 0 0 !important;
}
.ls-builder-plasbotwrap .ls-chat-head__avatar {
    width: 40px !important;
    height: 40px !important;
}
.ls-builder-plasbotwrap .ls-chat-head__avatar img {
    width: 28px; height: 28px;
}
.ls-builder-plasbotwrap .ls-chat-head__name {
    font-size: 14.5px;
}
.ls-builder-plasbotwrap .ls-chat-head__status {
    font-size: 11.5px;
}
.ls-builder-plasbotwrap .ls-chat-head__close {
    width: 32px; height: 32px;
    border-radius: 9px;
}
.ls-builder-plasbotwrap .ls-chat-head__close:hover {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    transform: none !important;
}

.ls-builder-plasbotwrap .ls-chat-body {
    padding: 18px 14px 10px !important;
    background:
      radial-gradient(500px 240px at 0% -10%, rgba(221, 214, 254, 0.45) 0%, transparent 60%),
      radial-gradient(400px 220px at 120% 120%, rgba(254, 215, 226, 0.35) 0%, transparent 60%),
      linear-gradient(180deg, #fafaff 0%, #f5f3ff 45%, #fdf2f8 100%);
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.ls-builder-plasbotwrap .ls-chat-body::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'><defs><pattern id='p' width='52' height='52' patternUnits='userSpaceOnUse'><path d='M26 1l25 15v30L26 61 1 46V16z' fill='none' stroke='%23818cf8' stroke-opacity='0.08'/></pattern></defs><rect width='260' height='260' fill='url(%23p)'/></svg>");
    background-size: 260px 260px;
    opacity: 0.9;
    pointer-events: none;
}
.ls-builder-plasbotwrap .ls-chat-body > * { position: relative; z-index: 1; }

.ls-builder-plasbotwrap .ls-chat-msg {
    max-width: 86%;
    gap: 7px;
}
.ls-builder-plasbotwrap .ls-chat-msg__avatar {
    width: 28px;
    height: 28px;
}
.ls-builder-plasbotwrap .ls-chat-msg__avatar img { width: 18px; height:18px; }

.ls-builder-plasbotwrap .ls-chat-chips {
    margin-top: 6px;
}

.ls-builder-plasbotwrap .ls-chat-foot {
    padding: 10px 12px 12px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(250,250,255,0.98) 100%) !important;
    border-top: 1px solid #ede9fe;
    border-radius: 0 0 18px 18px !important;
}
.ls-builder-plasbotwrap .ls-chat-inputwrap {
    padding: 4px 4px 4px 10px !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.08) !important;
}
.ls-builder-plasbotwrap .ls-chat-input {
    padding: 8px 6px !important;
    font-size: 13px !important;
}

/* Builder PLASBOT test bubble: add subtle TYPING 3-dot indicator */
.ls-builder-plasbotwrap .ls-builder-typing {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding: 0 2px;
}
.ls-builder-plasbotwrap .ls-builder-typing span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #818cf8;
    opacity: 0.6;
    animation: ls-builder-plasbotBounce 1.25s ease-in-out infinite;
}
.ls-builder-plasbotwrap .ls-builder-typing span:nth-child(2) { animation-delay: .15s; }
.ls-builder-plasbotwrap .ls-builder-typing span:nth-child(3) { animation-delay: .30s; }
@keyframes ls-builder-plasbotBounce {
    0%,60%,100% { transform: translateY(0); opacity: 0.45; }
    30%         { transform: translateY(-3px); opacity: 1; }
}

/* Make collapse bar hover nicer */
.ls-builder-col--test .ls-builder-test__collapse {
    background: linear-gradient(135deg, #ffffff 0%, #f5f3ff 100%);
    border: 1px solid rgba(199, 210, 254, 0.6);
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.08);
}
.ls-builder-col--test .ls-builder-test__collapse:hover {
    background: linear-gradient(135deg, #ede9fe 0%, #e0e7ff 100%);
    border-color: rgba(165, 180, 252, 0.9);
}
.ls-builder-col--test .ls-builder-test__collapse-av {
    background: linear-gradient(135deg, #6366f1, #a855f7);
    box-shadow: 0 4px 12px -4px rgba(168, 85, 247, 0.5);
}

/* =========================================================
   AGENT BUILDER — Bottom-trigger Test your Bot (POP UP expand up)
   Override: move trigger button ke paling bawah column 3, chat pop ATASnya
   ========================================================= */
.ls-builder-col--test-bottomtrigger {
    flex-direction: column;              /* normal flex: chat box ATAS, trigger BAWAH */
    justify-content: flex-end;
    align-items: stretch;
    gap: 10px;
    min-height: 0;
    overflow: visible;                    /* allow pop-up animation kalau height exceed */
}

/* --- TEST BOX (hidden by default, expand ATAS trigger bawah) --- */
.ls-builder-col--test-bottomtrigger .ls-builder-testbox {
    flex: 0 0 auto;
    max-height: 0;
    min-height: 0;
    opacity: 0;
    overflow: hidden;
    transform-origin: bottom center;
    transform: translateY(6px) scale(0.985);
    pointer-events: none;
    transition:
        max-height .28s cubic-bezier(.2,.8,.2,1),
        opacity .22s ease,
        transform .24s cubic-bezier(.2,.8,.2,1);
    margin-top: auto;                 /* pastikan expand dari BAWAH ke ATAS (pin to bottom trigger edge) */
    margin-bottom: 0;
    order: 1;
    border-radius: 18px;
}
/* EXPANDED STATE (class ls-builder-col--test-expanded on parent) */
.ls-builder-col--test-bottomtrigger.ls-builder-col--test-expanded .ls-builder-testbox {
    flex: 1 1 auto;
    height: 0;                       /* trick min-height flex scroll */
    min-height: 0;
    max-height: 10000px;             /* big enough for natural expansion inside flex */
    flex-basis: auto;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    display: flex;
}
/* Hidden state = display none for min toggle consistency (class not minimized) */
.ls-builder-col--test-bottomtrigger:not(.ls-builder-col--test-expanded) .ls-builder-testbox {
    display: none !important;
}

/* Ensure inner plasbot template fills its container properly */
.ls-builder-col--test-bottomtrigger .ls-builder-plasbotwrap,
.ls-builder-col--test-bottomtrigger .ls-builder-plasbotwrap .ls-chat-window.ls-builder-plasbotwin {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* --- COLLAPSE BUTTON (paling bawah column 3 — user request, SIZE KECILKAN --- */
.ls-builder-col--test-bottomtrigger .ls-builder-test__collapse {
    order: 2;
    margin-top: auto;
    padding: 6px 9px 6px 8px;
    border-radius: 999px;
    width: 100%;
    background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
    border: 1px solid rgba(199, 210, 254, 0.7);
    box-shadow: 0 8px 18px -14px rgba(99, 102, 241, 0.5),
                0 1px 4px rgba(15, 23, 42, 0.04);
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    transition: all .2s ease;
}
.ls-builder-col--test-bottomtrigger .ls-builder-test__collapse:hover {
    background: linear-gradient(135deg, #ede9fe 0%, #e0e7ff 100%);
    border-color: rgba(165, 180, 252, 1);
    transform: translateY(-1px);
    box-shadow: 0 12px 22px -16px rgba(99, 102, 241, 0.65),
                0 2px 6px rgba(15, 23, 42, 0.05);
}
.ls-builder-col--test-bottomtrigger .ls-builder-test__collapse-av {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent !important;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px rgba(203, 213, 225, 0.85),
                0 7px 14px -6px rgba(99, 102, 241, 0.35);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: visible;
}
.ls-builder-col--test-bottomtrigger .ls-builder-test__collapse-av img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    display: block;
    margin-top: -3px;
    margin-left: -1px;
    filter: drop-shadow(0 4px 8px rgba(99, 102, 241, 0.28));
}
.ls-builder-col--test-bottomtrigger .ls-builder-test__collapse-label {
    flex: 1;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: 0.05px;
    padding-left: 1px;
}
.ls-builder-col--test-bottomtrigger .ls-builder-test__collapse-chev {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: #f1f5f9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    transition: transform .28s cubic-bezier(.2,.8,.2,1), background .2s ease, color .2s ease;
    flex-shrink: 0;
}
.ls-builder-col--test-bottomtrigger .ls-builder-test__collapse:hover .ls-builder-test__collapse-chev {
    background: linear-gradient(135deg,#eef2ff,#ede9fe);
    color: #4338ca;
}

/* Chevron direction: default collapse (bottom trigger) = arrow UP meaning "click to pop UP above" */
/* Expanded state = rotate chevron 180° so arrow DOWN means "click to collapse back down" */
.ls-builder-col--test-bottomtrigger.ls-builder-col--test-expanded .ls-builder-test__collapse-chev {
    transform: rotate(180deg);
    background: linear-gradient(135deg,#e0e7ff,#ede9fe);
    color: #4338ca;
}

/* OLD top-trigger hide class (safety backup — disable old minimized pattern for new bottom trigger page) */
.ls-builder-col--test-bottomtrigger.ls-builder-col--test-minimized .ls-builder-testbox { display: none !important; }
.ls-builder-col--test-bottomtrigger.ls-builder-col--test-minimized .ls-builder-test__collapse-chev { transform: rotate(0deg); }

/* =========================================================
   AGENT BUILDER — Test your Bot ALWAYS SHOW (no click needed)
   Class: ls-builder-col--test-alwaysshow
   ========================================================= */
.ls-builder-col--test-alwaysshow {
    justify-content: stretch !important;
    align-items: stretch !important;
    gap: 0 !important;
}

/* 1) Hide collapse trigger button (bawah pill shape) — TAK PERLU KLIK PUN */
.ls-builder-col--test-alwaysshow .ls-builder-test__collapse {
    display: none !important;
}

/* 2) Force chat panel selalu EXPANDED — 100% isi column height */
.ls-builder-col--test-alwaysshow .ls-builder-testbox {
    display: flex !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    overflow: hidden !important;
    order: unset !important;
    margin-top: 0 !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 32px -14px rgba(99, 102, 241, 0.4),
                0 2px 6px rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(199, 210, 254, 0.6);
}
.ls-builder-col--test-alwaysshow .ls-builder-testbox[aria-hidden] {
    display: flex !important;
}

/* 3) Inner plasbot window fill the container fully */
.ls-builder-col--test-alwaysshow .ls-builder-plasbotwrap,
.ls-builder-col--test-alwaysshow .ls-builder-plasbotwrap .ls-chat-window.ls-builder-plasbotwin {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    flex: 1 1 auto;
    border-radius: 18px !important;
    overflow: hidden;
}

/* 4) [OPTIONAL: disable close X button sebab user nak biar view je] */
.ls-builder-col--test-alwaysshow .ls-chat-head__close {
    display: none !important;
}

/* 5) Adjust header supaya tak ada close button space — padan */
.ls-builder-col--test-alwaysshow .ls-chat-head {
    padding-right: 14px !important;
}

/* =========================================================
   AGENT BUILDER — URLs Drawer Slide-in POPUP (sebelah KANAN)
   ========================================================= */
.ls-builder-drawer {
    position: fixed;
    inset: 0;
    z-index: 120;
    pointer-events: none;
}
.ls-builder-drawer[aria-hidden="false"] { pointer-events: auto; }

.ls-builder-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .25s ease;
}
.ls-builder-drawer[aria-hidden="false"] .ls-builder-drawer__backdrop { opacity: 1; }

.ls-builder-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(640px, 92vw);
    max-width: 100vw;
    background: #fff;
    border-left: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: -30px 0 60px -20px rgba(15, 23, 42, 0.25);
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.22,1,.36,1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 22px 0 0 22px;
}
.ls-builder-drawer[aria-hidden="false"] .ls-builder-drawer__panel { transform: translateX(0); }

/* HEADER Drawer */
.ls-builder-drawer__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 26px 18px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
    background: linear-gradient(180deg, #fbfcff 0%, #ffffff 100%);
}
.ls-builder-drawer__title {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
    background: linear-gradient(90deg, #111827 0%, #4338ca 60%, #7c3aed 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.ls-builder-drawer__close {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #f1f5f9;
    border: 1px solid rgba(148, 163, 184, 0.25);
    color: #475569;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .18s ease;
}
.ls-builder-drawer__close:hover {
    background: #ef4444;
    color: #fff;
    border-color: rgba(239, 68, 68, 0.5);
    transform: rotate(90deg);
}

/* Scrollable content dalam drawer */
.ls-builder-drawer__panel--urls {
    padding: 0;
    gap: 0;
}
.ls-builder-drawer__panel--urls > *:not(.ls-builder-drawer__head):not(.ls-builder-divider) {
    padding-left: 26px;
    padding-right: 26px;
}

/* ============= HERO (plasbot + description) ============= */
.ls-builder-urlshero {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: flex-start;
    margin-top: 22px;
    margin-bottom: 18px;
    padding: 18px 20px !important;
    margin-left: 26px;
    margin-right: 26px;
    border: 1.5px dashed rgba(165, 180, 252, 0.65);
    border-radius: 18px;
    background:
        radial-gradient(circle at 10% 15%, rgba(224, 231, 255, 0.7) 0, rgba(224,231,255,0) 42%),
        radial-gradient(circle at 92% 85%, rgba(254, 215, 170, 0.35) 0, rgba(254,215,170,0) 44%),
        linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}
.ls-builder-urlshero__bot {
    position: relative;
    flex: 0 0 auto;
}
.ls-builder-urlshero__botav {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid #fff;
    outline: 1px solid rgba(148, 163, 184, 0.35);
    overflow: visible;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 6px 14px rgba(99, 102, 241, 0.22));
    margin-top: 2px;
}
.ls-builder-urlshero__botav img {
    width: 62px;
    height: 62px;
    object-fit: contain;
    display: block;
}
.ls-builder-urlshero__botbubble {
    position: absolute;
    top: -2px;
    right: -10px;
    width: 34px;
    height: 34px;
    background: #dcfce7;
    border: 2px solid #fff;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.25);
}
.ls-builder-urlshero__lead {
    margin: 2px 0 10px;
    color: #0f172a;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.45;
}
.ls-builder-urlshero__tips {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.ls-builder-urlshero__tips li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #475569;
    font-size: 13px;
    line-height: 1.55;
}
.ls-builder-tipdot {
    display: inline-block;
    margin-top: 8px;
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* ============= Display Source Toggle ============= */
.ls-builder-togglesrc {
    display: flex;
    align-items: center;
    gap: 11px;
    cursor: pointer;
    user-select: none;
    margin-top: 6px;
    margin-bottom: 18px;
    padding-top: 2px;
    padding-bottom: 2px;
}
.ls-builder-togglesrc__radio {
    position: relative;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #6366f1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.13);
}
.ls-builder-togglesrc__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6366f1;
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.6);
}
.ls-builder-togglesrc__label {
    color: #1e293b;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}

/* ============= URL Input + Add Button ============= */
.ls-builder-urlinput {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    margin-bottom: 18px;
    align-items: center;
}
.ls-builder-urlinput__field {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1.5px solid rgba(148, 163, 184, 0.45);
    background: #fff;
    color: #0f172a;
    font-size: 14px;
    outline: none;
    transition: all .2s ease;
    font-family: inherit;
}
.ls-builder-urlinput__field::placeholder { color: #94a3b8; }
.ls-builder-urlinput__field:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
    background: #fafbff;
}
.ls-builder-urlinput__add {
    width: 52px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
    box-shadow: 0 8px 18px -10px rgba(37, 99, 235, 0.9),
                0 2px 6px rgba(37, 99, 235, 0.25);
}
.ls-builder-urlinput__add:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -10px rgba(37, 99, 235, 1),
                0 3px 8px rgba(37, 99, 235, 0.3);
}
.ls-builder-urlinput__add:active { transform: translateY(0); }

/* ============= Divider ============= */
.ls-builder-divider {
    height: 1px;
    width: calc(100% - 52px);
    margin: 0 26px 18px;
    background: linear-gradient(90deg, transparent 0%, rgba(148,163,184,0.35) 20%, rgba(148,163,184,0.5) 50%, rgba(148,163,184,0.35) 80%, transparent 100%);
}

/* ============= Added URLs List ============= */
.ls-builder-urlslist {
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: 26px !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}
.ls-builder-urlslist__title {
    margin: 0 0 8px;
    font-size: 14.5px;
    font-weight: 650;
    color: #1e293b;
    letter-spacing: -0.01em;
}
.ls-builder-urlslist__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    padding-right: 4px;
}
.ls-builder-urlslist__body::-webkit-scrollbar { width: 8px; }
.ls-builder-urlslist__body::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.5); border-radius: 4px; }

/* -------- URL ROW (modern circle icons) -------- */
.ls-builder-urlrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    gap: 10px;
    align-items: center;
    padding: 11px 12px 11px 15px;
    border-radius: 13px;
    border: 1.5px solid rgba(203, 213, 225, 0.65);
    background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
    transition: all .2s ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.ls-builder-urlrow:hover {
    transform: translateY(-1.5px);
    border-color: rgba(99, 102, 241, 0.45);
    box-shadow: 0 10px 22px -14px rgba(99, 102, 241, 0.45),
                0 2px 6px rgba(15, 23, 42, 0.04);
    background: linear-gradient(180deg, #ffffff 0%, #f5f7ff 100%);
}
.ls-builder-urlrow__link {
    color: #2563eb;
    font-size: 13.5px;
    font-weight: 550;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.ls-builder-urlrow__link:hover { text-decoration: underline; }

.ls-builder-urlrow__status {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 4px 10px;
    border-radius: 999px;
    line-height: 1;
    text-transform: uppercase;
}
.ls-builder-urlrow__status--active {
    color: #047857;
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.22);
}
.ls-builder-urlrow__status--training {
    color: #b45309;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.22);
}
.ls-builder-urlrow__status--failed {
    color: #b91c1c;
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.22);
}

/* ============= MODERN Rounded Circle ICONS (cantik / kemas / moden) ============= */
.ls-builder-iconbtn {
    width: 34px;
    height: 34px;
    border-radius: 50%;        /* BULAT SEMPURNA, bukan segiempat */
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: all .18s ease;
    position: relative;
}
.ls-builder-iconbtn:hover {
    transform: translateY(-1.5px) scale(1.05);
    filter: brightness(1.06);
}
.ls-builder-iconbtn:active { transform: scale(0.96); }

.ls-builder-iconbtn--refresh {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    box-shadow: 0 6px 16px -6px rgba(124, 58, 237, 0.9),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.ls-builder-iconbtn--refresh:hover {
    animation: ls-builder-rotspin .9s ease 1;
    box-shadow: 0 8px 22px -6px rgba(124, 58, 237, 1);
}
@keyframes ls-builder-rotspin {
    0% { transform: translateY(-1.5px) scale(1.05) rotate(0deg); }
    100% { transform: translateY(-1.5px) scale(1.05) rotate(360deg); }
}

.ls-builder-iconbtn--delete {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    box-shadow: 0 6px 16px -6px rgba(239, 68, 68, 0.9),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.ls-builder-iconbtn--delete:hover {
    animation: ls-builder-shake .45s ease 1;
    box-shadow: 0 8px 22px -6px rgba(239, 68, 68, 1);
}
@keyframes ls-builder-shake {
    0%,100% { transform: translateY(-1.5px) scale(1.05) translateX(0); }
    20% { transform: translateY(-1.5px) scale(1.05) translateX(-2px); }
    40% { transform: translateY(-1.5px) scale(1.05) translateX(2px); }
    60% { transform: translateY(-1.5px) scale(1.05) translateX(-1.5px); }
    80% { transform: translateY(-1.5px) scale(1.05) translateX(1.5px); }
}

/* ================================================================
   BUG FIX: PLASBot Test MESTI stay dlm COLUMN 3 SKRIN UTAMA.
   Yang BOLEH popup cuma URLs DRAWER sahaja.
   - Force COL 3 & inner panels: NO position fixed / NO float keluar
   - URLs drawer z-index NAIFKAN (lebih tinggi dari apa-apa floating)
   - Jangan bagi test chat window escape column flow (original ls-chat-window fixed float terkeluar!)
   ================================================================ */

/* 1) Pastikan keseluruhan COL 3 = relative, TETAP DALAM GRID LAYOUT.
      TIADA fixed/absolute yang boleh tarik dia keluar skrin utama! */
.ls-builder-col.ls-builder-col--test,
.ls-builder-col.ls-builder-col--test.ls-builder-col--test-bottomtrigger,
.ls-builder-col.ls-builder-col--test.ls-builder-col--test-alwaysshow {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    float: none !important;
    transform: none !important;
    z-index: 1 !important;          /* SKRIN UTAMA level, tak cover popup */
    display: flex !important;
    flex-direction: column !important;
}

/* 2) Test box (outer chat container) — STAY dalam column, TAK BOLEH keluar flow */
.ls-builder-col--test .ls-builder-testbox,
.ls-builder-col--test-alwaysshow .ls-builder-testbox {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    float: none !important;
    z-index: 1 !important;
    margin: 0 !important;
}

/* 3) OVERRIDE global ls-chat-window floating fixed position -> relative SAHAJA 
      UNTUK builder test chat (elak escape jadi float tengah viewport) */
.ls-builder-col--test .ls-builder-plasbotwrap,
.ls-builder-col--test .ls-builder-plasbotwrap .ls-chat-window,
.ls-builder-col--test .ls-builder-plasbotwrap .ls-chat-window.ls-builder-plasbotwin {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    float: none !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    animation: none !important;       /* buang pop-in floating animation */
    transition: none !important;
}

/* 4) URLs DRAWER — POP UP SAHAJA. Z-index dinaikkan pastikan ATAS SEMUA termasuk
      apa-apa floating elements. panel urls z-index dalam drawer tinggi sikit */
.ls-builder-drawer {
    z-index: 500 !important;
}
.ls-builder-drawer__backdrop {
    z-index: 501 !important;
}
.ls-builder-drawer__panel {
    z-index: 502 !important;
}

/* =============================================================
   PENUH FIX: PLASBot Test = SKRIN UTAMA (column 3 sahaja). URLs = POPUP sahaja.
   Solusi: Guna CSS :has() — apabila drawer URLs terbuka,
           TEST COLUMN di-Sembunyikan SEKETIKA (tiada float/overlay possible).
           Bila drawer ditutup, auto-appear balik.
   ============================================================= */
body:has(.ls-builder-drawer[aria-hidden="false"]) .ls-builder-col--test,
body:has(.ls-builder-drawer[aria-hidden="false"]) .ls-builder-col--test * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Safety: Hide JUGA sebarang ls-chat-window yang bukan dalam test column
   (berlaku apabila global floating PLASBot accidental leak) */
body.ls-builder-page:has(.ls-builder-drawer[aria-hidden="false"]) .ls-chat-window:not(.ls-builder-plasbotwin) {
    display: none !important;
}

/* === (Optional) Apabila drawer TUTUP, force TEST COLUMN tetap KEKAL TAK FLOAT ===  */
body:not(:has(.ls-builder-drawer[aria-hidden="false"])) .ls-builder-col--test {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* =============================================================
   AGENT BUILDER — Welcome Message Tab (Message Builder Canvas)
   Prefix: ls-builder-welcome-*, ls-builder-addcomp, ls-builder-canvas,
           ls-builder-comp (component blocks), ls-builder-dynmsg, ls-builder-footbar
   ============================================================= */

/* Main Welcome panel: fill center column. Lakukan scroll dalaman canvas sahaja. */
.ls-builder-panel.ls-builder-welcome {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
    height: 0;
    padding: 0;
    margin: 0;
    overflow: visible;
}

/* ---- HEADER: Enter Welcome Message ---- */
.ls-builder-welcome__head {
    flex: 0 0 auto;
    padding: 16px 18px 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ls-builder-welcome__title {
    margin: 0;
    color: #0f172a;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.ls-builder-welcome__desc {
    margin: 0;
    color: #64748b;
    font-size: 12.5px;
    line-height: 1.45;
    font-weight: 450;
}

/* ---- ADD COMPONENT DARK BAR (BLACK NAV) ---- */
.ls-builder-addcomp {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 7px 10px;
    margin: 2px 16px 0;
    background: linear-gradient(180deg, #0b1220 0%, #0a0f1c 100%);
    border-radius: 11px 11px 0 0;
    border: 1px solid rgba(15, 23, 42, 0.7);
    border-bottom: none;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
.ls-builder-addcomp__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 8px;
    color: #cbd5e1;
    font-size: 12.5px;
    font-weight: 600;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .18s ease;
    white-space: nowrap;
}
.ls-builder-addcomp__btn:hover {
    background: rgba(99, 102, 241, 0.14);
    color: #fff;
    border-color: rgba(129, 140, 248, 0.3);
    transform: translateY(-0.5px);
}
.ls-builder-addcomp__btn:active {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.32) 0%, rgba(99, 102, 241, 0.32) 100%);
    color: #fff;
    border-color: rgba(165, 180, 252, 0.6);
}
.ls-welcome-hide {
    display: none !important;
}

/* ============= BLUE CANVAS MESSAGE BUILDER ============= */
.ls-builder-canvas {
    position: relative;
    flex: 0 0 auto;
    min-height: 480px;
    height: auto;
    max-height: none;
    margin: 0 16px;
    padding: 22px 20px 52px;
    border-radius: 0 0 14px 14px;
    background-color: #3b37c9;
    background-image: url('assets/images/bannermsgbuilder.png');
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
    border: 1px solid rgba(30, 64, 175, 0.8);
    box-shadow: 0 16px 34px -22px rgba(30, 64, 175, 0.8),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
    overflow: visible;
    direction: ltr;
}
.ls-builder-canvas::-webkit-scrollbar { width: 8px; }
.ls-builder-canvas::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 4px; }
.ls-builder-canvas::-webkit-scrollbar-thumb { background: rgba(191, 219, 254, 0.35); border-radius: 4px; }
.ls-builder-canvas::-webkit-scrollbar-thumb:hover { background: rgba(191,219,254,0.55); }

/* ---- Empty state (default: no components added yet) ---- */
.ls-builder-canvas__empty {
    display: none !important;
}

/* ---- Dynamic component body container ---- */
.ls-builder-canvas__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ============= COMPONENT BLOCKS (white cards inside blue canvas) ============= */
.ls-builder-comp {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 11px 12px 9px;
    background: #ffffff;
    border-radius: 13px;
    border: 1px solid rgba(226, 232, 240, 0.7);
    box-shadow: 0 6px 18px -12px rgba(15, 23, 42, 0.28),
                0 1px 2px rgba(15,23,42,0.04);
    animation: ls-builder-comp-in .34s cubic-bezier(.22,1,.36,1) both;
}
@keyframes ls-builder-comp-in {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.ls-builder-comp.dragging {
    opacity: 0.55;
    transform: scale(0.98) rotate(-0.6deg);
    cursor: grabbing !important;
}
.ls-builder-comp.drop-above::before,
.ls-builder-comp.drop-below::after {
    content: "";
    position: absolute;
    left: 8px; right: 8px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #a855f7, #6366f1, #3b82f6);
    box-shadow: 0 0 12px rgba(129, 140, 248, 0.7);
    pointer-events: none;
}
.ls-builder-comp.drop-above::before { top: -10px; }
.ls-builder-comp.drop-below::after  { bottom: -10px; }

/* Component label (atas) */
.ls-builder-comp__label {
    font-size: 12.5px;
    font-weight: 700;
    color: #1e3a8a;
    letter-spacing: -0.005em;
    padding-left: 2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ls-builder-comp__label::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
    display: inline-block;
}

/* ---- Component body (content dalam white card) ---- */
.ls-builder-comp__body {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding-top: 1px;
}

/* Generic inputs inside canvas components */
.ls-builder-cinput {
    width: 100%;
    min-height: 38px;
    padding: 9px 12px;
    border-radius: 9px;
    background: #fff;
    border: 1.5px solid rgba(148, 163, 184, 0.38);
    color: #0f172a;
    font-size: 12.5px;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    outline: none;
    transition: all .18s ease;
}
.ls-builder-cinput::placeholder { color: #94a3b8; }
.ls-builder-cinput:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14);
    background: #fafbff;
}

/* Row layout for button input + small + button */
.ls-builder-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.ls-builder-row .ls-builder-cinput { flex: 1 1 auto; min-width: 0; }

/* ============= BUTTON COMPONENT — STANDARD CARD SAMA MACAM TEXT MESSAGE (card putih luar, label biru dalam, 4 compact icons bawah colored) ============= */

/* BUTTON pill content DALAM standard card putih - padding kecilkan sikit supaya tidak terlalu besar dalam card */
.ls-builder-btnpill {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 100px;
    padding: 12px 14px 12px 18px;
    border-radius: 24px;
    background: #ffffff;
    border: 2.5px solid #38bdf8;
    box-shadow: 0 18px 34px -20px rgba(15, 23, 42, 0.25),
                inset 0 1px 0 rgba(255,255,255,0.8);
}
.ls-builder-btnpill__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ls-builder-btnpill__empty {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 6px;
    color: #64748b;
}
.ls-builder-btnpill__empty:has(+ .ls-builder-btn-list > *) { display: none; }
.ls-builder-btnpill__empty-ico {
    width: 36px; height: 36px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
    font-size: 18px;
    color: #3b82f6;
    flex-shrink: 0;
}
.ls-builder-btnpill__empty-text {
    font-size: 13.5px;
    font-weight: 550;
    color: #64748b;
    line-height: 1.45;
}
.ls-builder-btnpill__empty-text strong {
    color: #3b82f6;
    font-weight: 750;
}

/* + button on pill right (DULU 64x64 → KECILKAN 48x48) */
.ls-builder-btnpill__plus {
    position: relative;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: linear-gradient(160deg, #eef2ff 0%, #e0e7ff 100%);
    color: #4f46e5;
    border: 1.8px solid #a5b4fc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 20px -14px rgba(79, 70, 229, 0.8),
                inset 0 1px 0 rgba(255,255,255,0.7);
    transition: all .2s cubic-bezier(.22,1,.36,1);
}
.ls-builder-btnpill__plus:hover {
    transform: translateY(-2px) scale(1.04);
    background: linear-gradient(160deg, #e0e7ff 0%, #c7d2fe 100%);
    border-color: #818cf8;
    color: #4338ca;
    box-shadow: 0 18px 34px -14px rgba(79, 70, 229, 0.92);
}
.ls-builder-btnpill__plus:active { transform: scale(0.96); }

/* ============= NEW LARGE WHITE CIRCLE ACTIONS (move + del ONLY for Button panel) — DULU 58px → KECILKAN 44px ============= */
.ls-builder-bigacts {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 2px 6px 0 4px;
}
.ls-builder-bigact {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    color: #0f172a;
    border: 2px solid rgba(148, 163, 184, 0.5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 14px 28px -16px rgba(15, 23, 42, 0.3),
                inset 0 1px 0 rgba(255,255,255,0.9);
    transition: all .2s cubic-bezier(.22,1,.36,1);
}
.ls-builder-bigact:hover {
    transform: translateY(-2px) scale(1.04);
    border-color: #94a3b8;
    box-shadow: 0 18px 34px -16px rgba(15, 23, 42, 0.4);
}
.ls-builder-bigact:active { transform: scale(0.96); }
.ls-builder-bigact--del:hover {
    color: #dc2626;
    border-color: #f87171;
    box-shadow: 0 18px 34px -16px rgba(220, 38, 38, 0.45);
}
.ls-builder-bigact--move {
    color: #0f172a;
}
.ls-builder-bigact--move:hover {
    color: #4f46e5;
    border-color: #818cf8;
    box-shadow: 0 18px 34px -16px rgba(79, 70, 229, 0.45);
    cursor: grab;
}
.ls-builder-bigact--move:active { cursor: grabbing; }

/* Button chips (added buttons inside the large white pill) */
.ls-builder-btn-chip {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px 12px 14px;
    background: linear-gradient(135deg, #fafbff 0%, #f1f5f9 100%);
    border: 1.5px solid rgba(203, 213, 225, 0.7);
    border-radius: 16px;
    box-shadow: 0 8px 16px -12px rgba(15, 23, 42, 0.15);
}
.ls-builder-btn-chip:hover {
    border-color: rgba(129, 140, 248, 0.6);
    box-shadow: 0 12px 22px -14px rgba(79, 70, 229, 0.35);
}
.ls-builder-btn-chip .ls-builder-btnchip__badge {
    flex: 0 0 auto;
    padding: 5px 11px;
    border-radius: 10px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #fff;
}
.ls-builder-btn-chip .ls-builder-btnchip__badge[data-kind="default"] { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); }
.ls-builder-btn-chip .ls-builder-btnchip__badge[data-kind="link"]    { background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); }
.ls-builder-btn-chip .ls-builder-btnchip__badge[data-kind="submit"]  { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.ls-builder-btn-chip input[type="text"] {
    width: 100%;
    padding: 8px 11px;
    background: #fff;
    border: 1.5px solid rgba(203, 213, 225, 0.6);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 550;
    color: #0f172a;
    font-family: inherit;
    outline: none;
    transition: all .18s ease;
}
.ls-builder-btn-chip input[type="text"]:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14);
}
.ls-builder-btn-chip .ls-builder-btnchip__body {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}
.ls-builder-btn-chip .ls-builder-btnchip__row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.ls-builder-btn-chip__remove {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid rgba(248, 113, 113, 0.35);
    color: #dc2626;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .15s ease;
    flex: 0 0 auto;
}
.ls-builder-btn-chip__remove:hover {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    transform: scale(1.08);
}

/* ============= NEW ADD BUTTON POPUP MENU (right of the big + button) ============= */
@keyframes ls-builder-menuin {
    from { opacity: 0; transform: translateY(6px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.ls-builder-btnmenu {
    position: absolute;
    z-index: 120;
    top: -4px;
    left: calc(100% + 14px);
    min-width: 280px;
    padding: 10px 8px 8px;
    background: #ffffff;
    border-radius: 14px;
    border: 1.5px solid rgba(203, 213, 225, 0.75);
    box-shadow: 0 22px 48px -20px rgba(15, 23, 42, 0.38),
                0 4px 10px rgba(15,23,42,0.04);
    display: flex;
    flex-direction: column;
    gap: 1px;
    animation: ls-builder-menuin .22s cubic-bezier(.22,1,.36,1) both;
}
.ls-builder-btnmenu__head {
    padding: 4px 10px 8px;
    font-size: 11.5px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(226, 232, 240, 0.7);
    margin-bottom: 3px;
}
.ls-builder-btnmenu__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
    padding: 8px 8px 8px;
    border-radius: 11px;
    color: #0f172a;
    font-size: 12.5px;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: all .15s ease;
}
.ls-builder-btnmenu__item:hover {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    transform: translateX(2px);
}
.ls-builder-btnmenu__ico {
    width: 32px; height: 32px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #f8fafc; color: #475569;
    border: 1.3px solid rgba(203, 213, 225, 0.7);
    flex: 0 0 auto;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.ls-builder-btnmenu__ico--default { background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%); color: #4f46e5; border-color: rgba(165,180,252,0.6); }
.ls-builder-btnmenu__ico--link    { background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%); color: #0284c7; border-color: rgba(125,211,252,0.6); }
.ls-builder-btnmenu__ico--submit  { background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); color: #047857; border-color: rgba(110,231,183,0.6); }
.ls-builder-btnmenu__main {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
}
.ls-builder-btnmenu__title {
    font-size: 14px;
    font-weight: 750;
    color: #0f172a;
    letter-spacing: -0.005em;
}
.ls-builder-btnmenu__sub {
    grid-column: 1 / span 2;
    font-size: 11.5px;
    color: #94a3b8;
    font-weight: 500;
    margin-top: 1px;
}
.ls-builder-btnmenu__item--withsub .ls-builder-btnmenu__sub {
    grid-column: 2;
    margin: 0;
    text-align: right;
    color: #94a3b8;
    font-weight: 550;
    font-size: 11.5px;
}
.ls-builder-btnmenu__desc { display: none; }

/* Fallback kalau menu keluar screen ke kanan, reverse */
.ls-builder-btnmenu.flip {
    left: auto;
    right: calc(100% + 18px);
}

/* ============= COMPACT ACTION CIRCLES (drag/edit/duplicate/delete) ============= */
.ls-builder-comp__actions {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    padding-top: 1px;
    flex-wrap: wrap;
}
.ls-builder-act {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .18s ease;
    box-shadow: 0 4px 10px -5px rgba(15, 23, 42, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.ls-builder-act svg { width: 13.5px; height: 13.5px; stroke-width: 2.2; fill: none; }
.ls-builder-act:hover {
    transform: translateY(-1.5px) scale(1.07);
    filter: brightness(1.08);
}
.ls-builder-act:active { transform: scale(0.95); }

.ls-builder-act--drag {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
    cursor: grab;
}
.ls-builder-act--drag:active { cursor: grabbing; }

.ls-builder-act--edit {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.ls-builder-act--copy {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.ls-builder-act--del {
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
}
.ls-builder-act--del:hover {
    animation: ls-builder-shake .45s ease 1;
}
@keyframes ls-builder-shake {
    0%,100% { transform: translateY(-1.5px) scale(1.07) translateX(0); }
    25% { transform: translateY(-1.5px) scale(1.07) translateX(-1.2px); }
    50% { transform: translateY(-1.5px) scale(1.07) translateX(1.2px); }
    75% { transform: translateY(-1.5px) scale(1.07) translateX(-1px); }
}

/* ---- IMAGE component: Upload Image block ---- */
.ls-builder-upimg {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 15px 12px;
    border: 1.5px dashed rgba(148, 163, 184, 0.5);
    border-radius: 11px;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    cursor: pointer;
    transition: all .2s ease;
}
.ls-builder-upimg:hover,
.ls-builder-upimg.drag-over {
    border-color: #6366f1;
    background: linear-gradient(180deg, #eef2ff 0%, #f5f3ff 100%);
    box-shadow: inset 0 0 0 2px rgba(99, 102, 241, 0.08);
}
.ls-builder-upimg svg { width: 20px; height: 20px; stroke: #64748b; stroke-width: 1.8; }
.ls-builder-upimg__text { font-size: 12px; color: #475569; font-weight: 550; }
.ls-builder-orsplit {
    display: flex; align-items: center; gap: 10px;
    color: #334155; font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
}
.ls-builder-orsplit::before, .ls-builder-orsplit::after {
    content: ""; flex: 1 1 auto; height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(148,163,184,0.5) 50%, transparent 100%);
}

/* ---- HANDOVER options inside component (radio rows) ---- */
.ls-builder-opt {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 10px;
    border: 1.5px solid rgba(203, 213, 225, 0.65);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    align-items: center;
}
.ls-builder-opt:hover {
    border-color: rgba(99,102,241,0.45);
    box-shadow: 0 8px 18px -14px rgba(99, 102, 241, 0.5);
}
.ls-builder-opt__radio {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff;
}
.ls-builder-opt__radio::after {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: #6366f1; box-shadow: 0 0 8px rgba(99,102,241,0.6);
}
.ls-builder-opt__text { font-size: 12.5px; color: #0f172a; font-weight: 550; display: flex; flex-direction: column; gap: 6px; }
.ls-builder-opt__subbtn {
    align-self: flex-start;
    padding: 4.5px 10px;
    border-radius: 7px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    color: #1d4ed8;
    border: 1px solid rgba(59,130,246,0.35);
    font-size: 11px;
    font-weight: 650;
    cursor: pointer;
    transition: all .15s ease;
}
.ls-builder-opt__subbtn:hover {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    transform: translateY(-0.5px);
}

/* ============= DYNAMIC MESSAGE section ============= */
.ls-builder-dynmsg {
    flex: 0 0 auto;
    margin: 22px 16px 2px;
    padding: 14px 16px 12px;
    border-radius: 13px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
    box-shadow: 0 8px 22px -18px rgba(15, 23, 42, 0.15);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ls-builder-dynmsg__head {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    cursor: pointer;
    user-select: none;
}
.ls-builder-dynmsg__radio {
    flex: 0 0 auto;
    margin-top: 2px;
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.14);
    display: inline-flex; align-items: center; justify-content: center; background: #fff;
}
.ls-builder-dynmsg__radio::after {
    content:""; width: 8px; height: 8px; border-radius: 50%;
    background: #6366f1; box-shadow: 0 0 8px rgba(99,102,241,0.6);
}
.ls-builder-dynmsg__title {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.005em;
}
.ls-builder-dynmsg__desc {
    margin: 3px 0 0;
    font-size: 11.5px;
    color: #64748b;
    line-height: 1.5;
    font-weight: 500;
}

/* Dyn msg sub items (Inline / Webhook) */
.ls-builder-dynmsg__item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 11px;
    border-radius: 11px;
    background: #fbfcff;
    border: 1px solid rgba(226, 232, 240, 0.7);
}
.ls-builder-dynmsg__radio2 {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 11px;
    align-items: flex-start;
    cursor: pointer;
}
.ls-builder-dynmsg__radio2-box {
    flex: 0 0 auto;
    margin-top: 2px;
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid #6366f1;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff;
    box-shadow: 0 0 0 2.5px rgba(99,102,241,0.14);
}
.ls-builder-dynmsg__radio2-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #6366f1;
    box-shadow: 0 0 6px rgba(99, 102, 241, 0.55);
}
.ls-builder-dynmsg__itemtitle {
    font-size: 12.5px;
    font-weight: 700;
    color: #1e293b;
}
.ls-builder-dynmsg__itemdesc {
    margin: 2px 0 5px;
    font-size: 11.5px;
    color: #475569;
    line-height: 1.5;
    font-weight: 500;
}
.ls-builder-dynmsg__more {
    color: #2563eb;
    font-size: 10.8px;
    font-weight: 650;
    text-decoration: none;
    border-bottom: 1px dashed rgba(37, 99, 235, 0.4);
}
.ls-builder-dynmsg__more:hover { color: #1d4ed8; }
.ls-builder-dynmsg__select {
    margin-top: 4px;
    align-self: flex-start;
    width: 100%;
    max-width: 320px;
    padding: 7px 10px;
    font-size: 11.5px;
    color: #334155;
    background: #fff;
    border: 1.5px solid rgba(148,163,184,0.45);
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 550;
    outline: none;
    transition: all .18s ease;
}
.ls-builder-dynmsg__select:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 2.5px rgba(99,102,241,0.14);
}

/* ============= FOOT BLACK BAR + GREEN TRAIN BUTTON ============= */
.ls-builder-footbar {
    flex: 0 0 auto;
    margin: 8px 16px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 10px 18px;
    background: linear-gradient(180deg, #0b1220 0%, #0a0f1c 100%);
    border: 1px solid rgba(15, 23, 42, 0.7);
    border-radius: 12px;
    box-shadow: 0 12px 28px -18px rgba(15, 23, 42, 0.8),
                inset 0 1px 0 rgba(255,255,255,0.05);
}
.ls-builder-footbar__spacer { flex: 1 1 auto; }
.ls-builder-trainbtn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7.5px 18px;
    border-radius: 9px;
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.015em;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 55%, #15803d 100%);
    border: none;
    cursor: pointer;
    box-shadow: 0 10px 22px -10px rgba(22, 163, 74, 1),
                inset 0 1px 0 rgba(255,255,255,0.25);
    transition: all .18s ease;
}
.ls-builder-trainbtn:hover {
    transform: translateY(-1.2px);
    box-shadow: 0 14px 28px -10px rgba(22, 163, 74, 1),
                inset 0 1px 0 rgba(255,255,255,0.3);
    filter: brightness(1.05);
}
.ls-builder-trainbtn:active { transform: translateY(0) scale(0.98); }

/* Custom Payload small helper text below textarea */
.ls-builder-helptext {
    font-size: 11.2px;
    color: #64748b;
    font-weight: 500;
    line-height: 1.5;
}
.ls-builder-helptext a {
    color: #2563eb;
    font-weight: 650;
    text-decoration: none;
    border-bottom: 1px dashed rgba(37,99,235,0.4);
}

/* ============================================================
   PLASPEDIA MODULE — My Courses (pcourses prefix)
   UI COMPACT STANDARD: font 13-14px, btn h36, cards tak besar
   ============================================================ */
.pcourses-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.pcourses-head__left { display: flex; flex-direction: column; gap: 2px; }
.pcourses-head__title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: #111827;
    line-height: 1.2;
}
.pcourses-head__subtitle {
    margin: 0;
    font-size: 12.5px;
    color: #6b7280;
    font-weight: 500;
    letter-spacing: -0.1px;
}
.pcourses-head__right {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 2px;
}
.pcourses-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 7px 15px 7px 15px;
    border-radius: 10px;
    border: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.1px;
    cursor: pointer;
    transition: all .2s ease;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    white-space: nowrap;
}
.pcourses-btn--outline {
    background: #ffffff;
    color: #2563eb;
    border: 1.5px solid #bfdbfe;
    box-shadow: 0 1px 2px rgba(37,99,235,0.05);
}
.pcourses-btn--outline:hover {
    background: #eff6ff;
    border-color: #93c5fd;
}
.pcourses-btn--solid {
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    box-shadow: 0 6px 16px -6px rgba(37,99,235,0.55), inset 0 1px 0 rgba(255,255,255,0.22);
}
.pcourses-btn--solid:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 9px 22px -8px rgba(37,99,235,0.65), inset 0 1px 0 rgba(255,255,255,0.25);
}
.pcourses-btn--solid:active { transform: translateY(0) scale(0.985); }

/* FILTER BAR */
.pcourses-filter {
    display: grid;
    grid-template-columns: minmax(150px, 210px) 1fr minmax(240px, 300px);
    gap: 12px;
    margin-bottom: 18px;
    align-items: center;
}
.pcourses-filter__col { position: relative; }
.pcourses-ddl {
    width: 100%;
    min-height: 40px;
    padding: 9px 42px 9px 14px;
    border-radius: 11px;
    border: 1.5px solid #e5e7eb;
    background: #ffffff;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    transition: all .18s ease;
}
.pcourses-ddl:hover { border-color: #cbd5e1; }
.pcourses-ddl:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}
.pcourses-ddlchev {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: #9ca3af;
    pointer-events: none;
}

/* Search col */
.pcourses-filter__col--search { position: relative; }
.pcourses-searchico {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: #9ca3af;
    pointer-events: none;
}
.pcourses-search {
    width: 100%;
    min-height: 40px;
    padding: 9px 14px 9px 39px;
    border-radius: 11px;
    border: 1.5px solid #e5e7eb;
    background: #ffffff;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    outline: none;
    transition: all .18s ease;
}
.pcourses-search:hover { border-color: #cbd5e1; }
.pcourses-search:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}
.pcourses-search::placeholder { color: #9ca3af; font-weight: 500; }

/* Sort col: label + ddl inline */
.pcourses-filter__col--sort {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
}
.pcourses-sortlbl {
    font-size: 12.5px;
    color: #6b7280;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}
.pcourses-ddl--sort { padding-right: 40px; }
.pcourses-ddlchev--sort { right: 10px; }

/* GRID CARDS 5 COLS — COMPACT */
.pcourses-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}
.pcourse-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1.5px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
    transition: all .25s cubic-bezier(.22,1,.36,1);
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.pcourse-card:hover {
    border-color: #c7d2fe;
    transform: translateY(-3px);
    box-shadow: 0 12px 26px -10px rgba(99,102,241,0.28), 0 2px 4px rgba(0,0,0,0.04);
}
.pcourse-card__cover {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    border-bottom: 1px solid #f3f4f6;
}
.pcourse-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.pcourse-card:hover .pcourse-card__cover img { transform: scale(1.045); }

.pcourse-card__foot {
    padding: 10px 12px 11px 13px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    flex: 1;
}
.pcourse-card__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.pcourse-card__title {
    font-size: 13.5px;
    font-weight: 650;
    letter-spacing: -0.15px;
    color: #111827;
    line-height: 1.32;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.pcourse-card__cat {
    font-size: 11.5px;
    color: #6b7280;
    font-weight: 500;
    margin-top: 1px;
}
.pcourse-card__more {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 9px;
    border: none;
    background: #f9fafb;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    transition: all .18s ease;
    flex-shrink: 0;
}
.pcourse-card__more:hover {
    background: #eff6ff;
    color: #2563eb;
}

/* Responsive tweaks */
@media (max-width: 1450px) {
    .pcourses-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1180px) {
    .pcourses-grid { grid-template-columns: repeat(3, 1fr); }
    .pcourses-filter { grid-template-columns: 180px 1fr 240px; }
}
@media (max-width: 920px) {
    .pcourses-grid { grid-template-columns: repeat(2, 1fr); }
    .pcourses-filter {
        grid-template-columns: 1fr 1fr;
    }
    .pcourses-filter__col--search {
        grid-column: span 2;
    }
    .pcourses-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
    .pcourses-grid { grid-template-columns: 1fr; }
    .pcourses-filter { grid-template-columns: 1fr; }
    .pcourses-filter__col--search { grid-column: span 1; }
}

/* ============================================================
   PLASPEDIA — Course Detail Screen (pcdetail prefix)
   UI COMPACT: hero banner + pill tabs + accordion expand/collapse
   ============================================================ */
.pcdetail-hero {
    position: relative;
    width: calc(100% + 48px); /* FILL PANEL PENUH, tolak keluar padding 24px kiri+kanan */
    margin-left: -24px;
    margin-right: -24px;
    overflow: hidden;
    margin-bottom: 0; /* REMOVE OVERLAP - tabs BUKAN naik atas banner, tabs di BAWAH sikit */
    height: 160px; /* COMPACT HEIGHT - tak besar! */
}
.pcdetail-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 1;
}
.pcdetail-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(30,41,59,0.25) 0%, rgba(15,23,42,0.45) 40%, rgba(15,23,42,0.68) 100%);
    z-index: 2;
}
.pcdetail-hero__content {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
}
.pcdetail-hero__title {
    margin: 0;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.6px;
    color: #ffffff;
    text-shadow: 0 3px 14px rgba(0,0,0,0.45);
    line-height: 1.1;
}

/* Pill Tabs 6 pcs — COMPACT size, CENTER, DI BAWAH BANNER (bukan overlap!) */
.pcdetail-tabs {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: #f3f4f6;
    border-radius: 999px;
    /* CENTER tabs + spacing dari banner (tak overlap!) */
    margin: 14px auto 20px;
    position: relative;
    z-index: 10;
    box-shadow: 0 4px 14px -6px rgba(0,0,0,0.12);
    border: 1px solid #e5e7eb;
    /* FORCE CENTER - wrapper guna text-align */
    left: 50%;
    transform: translateX(-50%);
}
.pcdetail-tab {
    min-height: 32px;
    padding: 6px 15px;
    border-radius: 999px;
    border: none;
    background: transparent;
    font-size: 12.5px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all .2s ease;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    letter-spacing: -0.05px;
    white-space: nowrap;
}
.pcdetail-tab:hover {
    color: #374151;
    background: rgba(255,255,255,0.7);
}
.pcdetail-tab--active {
    background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
    color: #ffffff;
    box-shadow: 0 3px 9px -3px rgba(22,163,74,0.55), inset 0 1px 0 rgba(255,255,255,0.25);
}
.pcdetail-tab--active:hover {
    background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
    color: #ffffff;
    filter: brightness(1.05);
}

/* Accordion section COMPACT */
.pcdetail-accordions {
    max-width: 690px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.pcdetail-acc {
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    transition: all .22s ease;
    overflow: hidden;
}
.pcdetail-acc--open,
.pcdetail-acc:hover {
    border-color: #d1d5db;
    box-shadow: 0 2px 7px -2px rgba(0,0,0,0.05);
}
.pcdetail-acc--open {
    border-color: #dbeafe;
    box-shadow: 0 4px 14px -5px rgba(59,130,246,0.15);
}
.pcdetail-acc__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 11px 10px 11px;
    cursor: pointer;
    user-select: none;
}
.pcdetail-acc__left {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    flex: 1;
}
.pcdetail-acc__chev {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 999px;
    border: 1.5px solid #e5e7eb;
    background: #ffffff;
    color: #9ca3af;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
    flex-shrink: 0;
    padding: 0;
}
.pcdetail-acc__chev:hover {
    color: #2563eb;
    border-color: #bfdbfe;
    background: #eff6ff;
}
.pcdetail-acc__chev--down {
    color: #2563eb;
    border-color: #bfdbfe;
    background: #eff6ff;
}
.pcdetail-acc__title {
    font-size: 13.5px;
    font-weight: 550;
    letter-spacing: -0.1px;
    color: #111827;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pcdetail-acc__expandall {
    min-height: 28px;
    padding: 4px 11px;
    border-radius: 8px;
    border: 1.5px solid #bfdbfe;
    background: #eff6ff;
    color: #2563eb;
    font-size: 11.5px;
    font-weight: 650;
    cursor: pointer;
    transition: all .2s ease;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    white-space: nowrap;
    flex-shrink: 0;
}
.pcdetail-acc__expandall:hover {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1d4ed8;
}
.pcdetail-acc__body {
    display: none;
    padding: 2px 52px 14px 52px;
    animation: pcdetailFadeIn .28s cubic-bezier(.22,1,.36,1);
}
@keyframes pcdetailFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pcdetail-acc__p {
    margin: 0 0 11px;
    font-size: 13px;
    line-height: 1.62;
    color: #374151;
    font-weight: 450;
    letter-spacing: -0.05px;
}
.pcdetail-acc__p:last-child {
    margin-bottom: 0;
}
.pcdetail-acc__p strong {
    font-weight: 750;
    color: #111827;
}
.pcdetail-acc__link {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    min-height: 34px;
    border-radius: 9px;
    background: #eef2ff;
    border: 1.5px solid #e0e7ff;
    color: #4f46e5;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 700;
    transition: all .2s ease;
}
.pcdetail-acc__link:hover {
    background: #e0e7ff;
    border-color: #c7d2fe;
    color: #4338ca;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px -3px rgba(79,70,229,0.25);
}
.pcdetail-acc__link--orange {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #c2410c;
}
.pcdetail-acc__link--orange:hover {
    background: #ffedd5;
    border-color: #fdba74;
    color: #9a3412;
    box-shadow: 0 4px 10px -3px rgba(249,115,22,0.25);
}
.pcdetail-acc__link--teal {
    background: #f0fdfa;
    border-color: #ccfbf1;
    color: #0f766e;
}
.pcdetail-acc__link--teal:hover {
    background: #ccfbf1;
    border-color: #99f6e4;
    color: #0d9488;
    box-shadow: 0 4px 10px -3px rgba(20,184,166,0.25);
}
.pcdetail-acc__link--vio {
    background: #fdf4ff;
    border-color: #fae8ff;
    color: #86198f;
}
.pcdetail-acc__link--vio:hover {
    background: #fae8ff;
    border-color: #f5d0fe;
    color: #a21caf;
    box-shadow: 0 4px 10px -3px rgba(192,132,252,0.3);
}

@media (max-width: 900px) {
    .pcdetail-hero { height: 140px; width: calc(100% + 32px); margin-left: -16px; margin-right: -16px; }
    .pcdetail-hero__title { font-size: 28px; }
    .pcdetail-acc__body { padding: 2px 16px 14px 52px; }
    .pcdetail-tabs { left: auto; transform: none; }
}
@media (max-width: 600px) {
    .pcdetail-tabs { flex-wrap: wrap; border-radius: 18px; left: auto; transform: none; width: 100%; }
    .pcdetail-hero { height: 120px; width: calc(100% + 24px); margin-left: -12px; margin-right: -12px; }
    .pcdetail-hero__title { font-size: 24px; }
    .pcdetail-acc__expandall { display: none; }
}

/* ============================================================
   PLASPEDIA — Course SETTINGS Page (pcdset prefix)
   UI COMPACT: Edit Settings 15 accordions + TinyMCE editor + 3 footer btns
   ============================================================ */
.pcdset-wrap {
    max-width: 1180px;
    margin: 0 auto;
}

/* HEADER 2 COL: Edit Settings (kiri bold) + Expand All (kanan biru) */
.pcdset-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding: 2px 2px;
}
.pcdset-head__title {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #1f2937;
    letter-spacing: -0.4px;
}
.pcdset-head__expand {
    min-height: 34px;
    padding: 5px 15px;
    font-size: 12.5px;
    font-weight: 600;
    color: #2563eb;
    background: #ffffff;
    border: 1.2px solid #bfdbfe;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.18s ease;
    line-height: 1;
}
.pcdset-head__expand:hover {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 5px 14px -6px rgba(59,130,246,0.38);
}

/* 15 ACCORDION SETTINGS — style sama spec user moodle */
.pcdset-accs {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    box-shadow: 0 2px 10px -5px rgba(0,0,0,0.07);
}
.pcdset-acc {
    border-bottom: 1px solid #f3f4f6;
    transition: all 0.2s ease;
}
.pcdset-acc:last-child {
    border-bottom: none;
}
.pcdset-acc--open {
    background: #ffffff;
}
.pcdset-acc__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px 10px 11px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}
.pcdset-acc__head:hover {
    background: #f9fafb;
}
.pcdset-acc__chev {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
    font-weight: 700;
}
.pcdset-acc--open .pcdset-acc__chev {
    background: #dbeafe;
    color: #1e40af;
}
.pcdset-acc__chev--right {
    background: #f3f4f6;
    color: #6b7280;
}
.pcdset-acc__name {
    font-size: 14px;
    font-weight: 650;
    color: #1f2937;
    letter-spacing: -0.1px;
}
.pcdset-acc__body {
    display: none;
    padding: 2px 15px 18px 58px;
    animation: pcdsetFadeIn 0.25s ease;
}
@keyframes pcdsetFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* FIELDS — Name Input + Description Label */
.pcdset-field {
    max-width: 720px;
}
.pcdset-field__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
    letter-spacing: -0.05px;
}
.pcdset-field__input {
    width: 100%;
    max-width: 420px;
    min-height: 40px;
    padding: 8px 13px;
    border: 1.3px solid #d1d5db;
    border-radius: 8px;
    background: #ffffff;
    color: #1f2937;
    font-size: 13.5px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-weight: 500;
    outline: none;
    transition: all 0.18s ease;
    box-sizing: border-box;
}
.pcdset-field__input::placeholder {
    color: #9ca3af;
}
.pcdset-field__input:hover {
    border-color: #9ca3af;
}
.pcdset-field__input:focus {
    border-color: #3b82f6;
    background: #ffffff;
    box-shadow: 0 0 0 3.5px rgba(59,130,246,0.18);
}

/* TINYMCE WYSIWYG EDITOR MOCKUP — COMPACT size match spec user */
.pcdset-tinymce {
    max-width: 720px;
    background: #ffffff;
    border: 1.2px solid #d1d5db;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.18s ease;
}
.pcdset-tinymce:hover {
    border-color: #9ca3af;
}
.pcdset-tinymce:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3.5px rgba(59,130,246,0.16);
}
/* Top menu bar: Edit View Insert Format Tools Table Help */
.pcdset-tinymce__menu {
    display: flex;
    align-items: center;
    gap: 1px;
    padding: 4px 9px 3px;
    background: #f9fafb;
    border-bottom: 1px solid #f0f0f0;
}
.pcdset-tinymce__menu span {
    font-size: 12px;
    font-weight: 500;
    color: #374151;
    padding: 2px 7px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    letter-spacing: 0.05px;
}
.pcdset-tinymce__menu span:hover {
    background: #e5e7eb;
    color: #111827;
}
/* Toolbar icon bar: undo redo B I link image video dll */
.pcdset-tinymce__toolbar {
    display: flex;
    align-items: center;
    gap: 1px;
    padding: 4px 7px 3px;
    background: #ffffff;
    border-bottom: 1px solid #f3f4f6;
    min-height: 30px;
}
.pcdset-tinymce__btn {
    width: 26px;
    height: 26px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.14s ease;
    font-weight: 500;
    user-select: none;
}
.pcdset-tinymce__btn:hover {
    background: #eff6ff;
    color: #1e40af;
}
.pcdset-tinymce__divider {
    width: 1px;
    height: 18px;
    background: #e5e7eb;
    margin: 0 5px;
}
/* Editor content area */
.pcdset-tinymce__editor {
    min-height: 110px;
    padding: 13px 15px;
    background: #ffffff;
    font-size: 13.5px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    color: #111827;
    line-height: 1.62;
    outline: none;
    cursor: text;
}
.pcdset-tinymce__editor:empty::before {
    content: attr(data-placeholder);
    color: #9ca3af;
    pointer-events: none;
}
/* Status bar bawah: p | 0 words · Build with tinyMCE · handle drag */
.pcdset-tinymce__statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 9px 3px 11px;
    border-top: 1px solid #f3f4f6;
    background: #fafafa;
    min-height: 23px;
}
.pcdset-tinymce__statusleft {
    font-size: 11px;
    color: #6b7280;
    font-weight: 600;
    letter-spacing: 0.15px;
}
.pcdset-tinymce__statusright {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    color: #6b7280;
    font-weight: 500;
}
.pcdset-tinymce__statusright strong {
    color: #1f2937;
    font-weight: 700;
    letter-spacing: 0.2px;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 11px;
}
.pcdset-tinymce__dot {
    width: 3px;
    height: 3px;
    border-radius: 999px;
    background: #d1d5db;
}
.pcdset-tinymce__handle {
    color: #9ca3af;
    cursor: ns-resize;
    margin-left: 2px;
    font-size: 13px;
    line-height: 1;
}

/* CHECKBOX SEND NOTIFICATION */
.pcdset-notify {
    margin-top: 22px;
    padding: 0 6px;
}
.pcdset-notify__chk {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}
.pcdset-notify__chk input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.pcdset-notify__box {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: #e5e7eb;
    border: 1.5px solid #d1d5db;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.18s ease;
}
.pcdset-notify__chk input:checked + .pcdset-notify__box {
    background: #10b981;
    border-color: #059669;
    box-shadow: 0 3px 10px -4px rgba(16,185,129,0.55);
}
.pcdset-notify__text {
    font-size: 13.5px;
    color: #374151;
    font-weight: 500;
}

/* FOOTER 3 BUTTONS CENTER — Cancel (grey) · Save Return (blue) · Save Display (blue darker) */
.pcdset-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 26px auto 20px;
    padding: 0 8px;
    flex-wrap: wrap;
}
.pcdset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 22px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 650;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    letter-spacing: -0.08px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1.2px solid transparent;
    text-decoration: none;
}
.pcdset-btn--cancel {
    background: #e5e7eb;
    color: #374151;
    border-color: #d1d5db;
}
.pcdset-btn--cancel:hover {
    background: #d1d5db;
    color: #1f2937;
    border-color: #9ca3af;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -7px rgba(0,0,0,0.28);
}
.pcdset-btn--savereturn {
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    border-color: #1d4ed8;
    box-shadow: 0 6px 16px -7px rgba(37,99,235,0.72);
}
.pcdset-btn--savereturn:hover {
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-1.5px);
    box-shadow: 0 9px 18px -7px rgba(37,99,235,0.78);
}
.pcdset-btn--savedisplay {
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff;
    border-color: #1e40af;
    box-shadow: 0 6px 16px -7px rgba(29,78,216,0.75);
}
.pcdset-btn--savedisplay:hover {
    background: linear-gradient(180deg, #1d4ed8 0%, #1e40af 100%);
    transform: translateY(-1.5px);
    box-shadow: 0 9px 18px -7px rgba(29,78,216,0.82);
}

/* Responsive Settings page compact */
@media (max-width: 900px) {
    .pcdset-acc__body { padding: 2px 15px 16px 15px; }
    .pcdset-field__input { max-width: 100%; }
    .pcdset-head__title { font-size: 19px; }
}
@media (max-width: 600px) {
    .pcdset-head { flex-direction: column; align-items: flex-start; gap: 10px; }
    .pcdset-head__expand { align-self: stretch; width: 100%; }
    .pcdset-foot { gap: 8px; }
    .pcdset-btn { flex: 1; min-width: 140px; padding: 8px 14px; font-size: 12.5px; }
    .pcdset-tinymce__menu span { font-size: 11px; padding: 2px 4px; }
}

/* ============================================================
   PCPART-* — PLASPEDIA COURSE → PARTICIPANTS LIST (COMPACT SPEC)
   ============================================================ */
.pcpart-wrap { margin-top: 16px; padding: 20px; background:#fff; border-radius:18px; border:1px solid #e5e7eb; box-shadow:0 1px 3px rgba(17,24,39,0.04); }

/* HEADER 2 COL */
.pcpart-head { display:flex; justify-content:space-between; align-items:flex-end; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
.pcpart-head__title { margin:0; font-size:20px; font-weight:750; color:#111827; letter-spacing:-0.2px; }
.pcpart-head__subtitle { margin:4px 0 0; font-size:12.5px; color:#6b7280; line-height:1.45; }
.pcpart-head__subtitle strong { color:#111827; font-weight:650; }
.pcpart-head__btns { display:flex; gap:9px; align-items:center; }
.pcpart-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:36px; padding:0 14px; border-radius:10px; font-size:13px; font-weight:600; border:1px solid transparent; cursor:pointer; transition:all 0.18s ease; white-space:nowrap; font-family:Inter, system-ui, sans-serif; letter-spacing:-0.1px; }
.pcpart-btn--outline { background:#fff; color:#374151; border-color:#d1d5db; }
.pcpart-btn--outline:hover { background:#f9fafb; border-color:#9ca3af; color:#111827; }
.pcpart-btn--solid { background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%); color:#fff; border-color:transparent; box-shadow:0 1px 2px rgba(37,99,235,0.32); }
.pcpart-btn--solid:hover { transform:translateY(-1px); box-shadow:0 3px 8px rgba(37,99,235,0.42); }
.pcpart-btn--bulkgo { background:#6366f1; color:#fff; min-height:34px; padding:0 12px; font-size:12.5px; border-radius:8px; }
.pcpart-btn--bulkgo:disabled { background:#c7d2fe; cursor:not-allowed; }

/* FILTER 3 BARIS GRID */
.pcpart-filters { display:grid; grid-template-columns:2fr 1fr 1fr; gap:11px; margin-bottom:12px; }
.pcpart-filter { display:flex; flex-direction:column; gap:5px; }
.pcpart-filter--search { position:relative; }
.pcpart-filter__ic { position:absolute; left:13px; top:50%; transform:translateY(4px); color:#9ca3af; pointer-events:none; }
.pcpart-filter__lbl { font-size:11.5px; font-weight:600; color:#6b7280; text-transform:uppercase; letter-spacing:0.5px; padding-left:2px; }
.pcpart-search { min-height:40px; padding:8px 13px 8px 38px; border:1px solid #d1d5db; border-radius:10px; font-size:13px; color:#111827; background:#fff; transition:border 0.15s, box-shadow 0.15s; font-family:Inter,system-ui,sans-serif; }
.pcpart-search:focus { outline:none; border-color:#60a5fa; box-shadow:0 0 0 3px rgba(96,165,250,0.18); }
.pcpart-ddl { min-height:40px; padding:8px 30px 8px 12px; border:1px solid #d1d5db; border-radius:10px; font-size:13px; color:#111827; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center; -webkit-appearance:none; appearance:none; transition:border 0.15s; cursor:pointer; font-family:Inter,system-ui,sans-serif; }
.pcpart-ddl:focus { outline:none; border-color:#60a5fa; box-shadow:0 0 0 3px rgba(96,165,250,0.18); }
.pcpart-ddl:disabled { background-color:#f3f4f6; color:#9ca3af; cursor:not-allowed; }
.pcpart-ddl--sm { min-height:34px; padding:6px 30px 6px 10px; font-size:12.5px; border-radius:8px; }
.pcpart-ddl--xs { min-height:32px; padding:5px 28px 5px 8px; font-size:12px; border-radius:7px; }

/* BULK ACTION BAR ATAS TABLE */
.pcpart-bulkbar { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 12px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; margin-bottom:12px; flex-wrap:wrap; }
.pcpart-bulkbar__left, .pcpart-bulkbar__right { display:flex; align-items:center; gap:10px; }
.pcpart-bulkbar__selectall { display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }
.pcpart-bulkbar__selectall input { display:none; }
.pcpart-bulkbar__selectallbox { display:inline-flex; width:18px; height:18px; border:1.5px solid #cbd5e1; border-radius:5px; background:#fff; align-items:center; justify-content:center; transition:all 0.15s; }
.pcpart-bulkbar__selectallbox svg { opacity:0; transition:opacity 0.12s; }
.pcpart-bulkbar__selectall input:checked + .pcpart-bulkbar__selectallbox,
.pcpart-bulkbar__selectall input:indeterminate + .pcpart-bulkbar__selectallbox { background:linear-gradient(135deg,#3b82f6,#2563eb); border-color:transparent; }
.pcpart-bulkbar__selectall input:checked + .pcpart-bulkbar__selectallbox svg { opacity:1; }
.pcpart-bulkbar__selectall input:indeterminate + .pcpart-bulkbar__selectallbox svg { opacity:1; }
.pcpart-bulkbar__selectedcount { font-size:12.5px; color:#475569; font-weight:550; }
.pcpart-bulkbar__selectedcount span { color:#2563eb; font-weight:700; }
.pcpart-bulkbar__withlbl { font-size:12.5px; color:#475569; font-weight:600; }

/* DATA TABLE PARTICIPANTS (COMPACT) */
.pcpart-tblwrap { width:100%; overflow-x:auto; border-radius:12px; border:1px solid #e5e7eb; background:#fff; }
.pcpart-tbl { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
.pcpart-tbl thead th { padding:9px 11px; background:#f9fafb; border-bottom:1px solid #e5e7eb; text-align:left; font-weight:650; font-size:12px; color:#374151; letter-spacing:0.2px; position:sticky; top:0; z-index:1; }
.pcpart-tbl thead th:first-child { padding-left:13px; border-top-left-radius:11px; }
.pcpart-tbl thead th:last-child { border-top-right-radius:11px; }
.pcpart-tbl tbody td { padding:8px 11px; border-bottom:1px solid #f1f5f9; vertical-align:middle; color:#374151; }
.pcpart-tbl tbody tr:hover { background:#f8fafc; }
.pcpart-tbl tbody tr:last-child td { border-bottom:none; }
.pcpart-tbl tbody tr:last-child td:first-child { border-bottom-left-radius:11px; }
.pcpart-tbl tbody tr:last-child td:last-child { border-bottom-right-radius:11px; }
.pcpart-tbl__chkcell { padding-left:13px !important; width:40px; }
.pcpart-rowchk { display:inline-flex; cursor:pointer; }
.pcpart-rowchk input { display:none; }
.pcpart-rowchk__box { display:inline-flex; width:17px; height:17px; border:1.5px solid #cbd5e1; border-radius:5px; background:#fff; align-items:center; justify-content:center; transition:all 0.15s; }
.pcpart-rowchk__box svg { opacity:0; transition:opacity 0.12s; }
.pcpart-rowchk input:checked + .pcpart-rowchk__box { background:linear-gradient(135deg,#3b82f6,#2563eb); border-color:transparent; }
.pcpart-rowchk input:checked + .pcpart-rowchk__box svg { opacity:1; }

/* USER NAME + AVATAR CELL */
.pcpart-user { display:flex; align-items:center; gap:10px; min-width:240px; }
.pcpart-user__av { width:32px; height:32px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; color:#fff; letter-spacing:0.1px; flex-shrink:0; box-shadow:0 1px 2px rgba(17,24,39,0.12); }
.pcpart-user__meta { display:flex; flex-direction:column; gap:2px; min-width:0; }
.pcpart-user__name { font-size:13px; font-weight:600; color:#111827; text-decoration:none; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; }
.pcpart-user__name:hover { color:#2563eb; }
.pcpart-user__tag { display:inline-block; margin-left:5px; padding:1px 6px; background:linear-gradient(135deg,#6366f1,#4338ca); color:#fff; font-size:10.5px; border-radius:5px; font-weight:600; letter-spacing:0.2px; vertical-align:middle; }
.pcpart-user__email { font-size:11.5px; color:#6b7280; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:240px; }

/* TABLE CELL HELPERS */
.pcpart-mono { font-family: 'JetBrains Mono', '.SF Mono', 'SF Mono', Menlo, Consolas, 'Liberation Mono', Monaco, 'Courier New', ui-monospace, monospace; font-size:11.8px; color:#4b5563; font-weight:500; letter-spacing:-0.1px; }
.pcpart-muted { font-size:12px; color:#6b7280; }

/* GRADIENT CHIPS GROUP/ROLES */
.pcpart-chip { display:inline-flex; align-items:center; padding:3px 9px; border-radius:7px; font-size:11.2px; font-weight:650; letter-spacing:0.15px; line-height:1.35; }
.pcpart-chip--blue { background:rgba(59,130,246,0.11); color:#1d4ed8; }
.pcpart-chip--amber { background:rgba(245,158,11,0.13); color:#b45309; }
.pcpart-chip--rose { background:rgba(244,63,94,0.12); color:#be123c; }
.pcpart-chip--grey { background:#f1f5f9; color:#475569; }
.pcpart-chip--indigo { background:rgba(99,102,241,0.13); color:#4338ca; }
.pcpart-chip--violet { background:rgba(139,92,246,0.13); color:#6d28d9; }

/* GRADE CELL: VALUE + PROGRESS BAR */
.pcpart-grade { display:flex; flex-direction:column; gap:3px; min-width:110px; }
.pcpart-grade__val { font-size:12.5px; font-weight:700; color:#111827; font-family:'JetBrains Mono',monospace; letter-spacing:0; }
.pcpart-grade__bar { height:6px; width:100%; max-width:110px; background:#f1f5f9; border-radius:4px; overflow:hidden; }
.pcpart-grade__bar > div { height:100%; border-radius:4px; transition:width 0.4s ease; }

/* STATUS PILL */
.pcpart-status { display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:0.2px; }
.pcpart-status::before { content:""; width:6px; height:6px; border-radius:50%; display:inline-block; }
.pcpart-status--active { background:rgba(16,185,129,0.13); color:#047857; }
.pcpart-status--active::before { background:#10b981; box-shadow:0 0 0 3px rgba(16,185,129,0.18); }
.pcpart-status--inactive { background:rgba(249,115,22,0.14); color:#c2410c; }
.pcpart-status--inactive::before { background:#f97316; box-shadow:0 0 0 3px rgba(249,115,22,0.18); }
.pcpart-status--suspended { background:rgba(148,163,184,0.18); color:#475569; }
.pcpart-status--suspended::before { background:#94a3b8; }

/* ACTIONS 3 DOT MENU BTN */
.pcpart-actions { text-align:right; padding-right:10px !important; }
.pcpart-actions__btn { display:inline-flex; width:30px; height:30px; align-items:center; justify-content:center; border-radius:8px; background:transparent; border:1px solid transparent; color:#6b7280; cursor:pointer; transition:all 0.15s; }
.pcpart-actions__btn:hover { background:#eef2ff; border-color:#c7d2fe; color:#4338ca; }

/* PAGINATION BAR BAWAH TABLE */
.pcpart-pag { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap; }
.pcpart-pag__left, .pcpart-pag__right { display:flex; align-items:center; gap:9px; }
.pcpart-pag__showlbl { font-size:12px; color:#6b7280; font-weight:550; }
.pcpart-pag__info { font-size:12px; color:#6b7280; margin-left:2px; }
.pcpart-pag__btn { min-width:32px; height:32px; padding:0 10px; border-radius:8px; background:#fff; border:1px solid #e5e7eb; font-size:12.5px; font-weight:600; color:#374151; cursor:pointer; transition:all 0.14s; font-family:Inter, system-ui, sans-serif; }
.pcpart-pag__btn:hover:not(:disabled):not(.pcpart-pag__btn--active) { background:#f8fafc; border-color:#cbd5e1; color:#111827; transform:translateY(-0.5px); }
.pcpart-pag__btn--active { background:linear-gradient(135deg,#3b82f6,#2563eb); color:#fff; border-color:transparent; box-shadow:0 1px 4px rgba(37,99,235,0.3); }
.pcpart-pag__btn:disabled { color:#cbd5e1; cursor:not-allowed; background:#f9fafb; }
.pcpart-pag__btn--prev, .pcpart-pag__btn--next { padding:0 11px; }

/* RESPONSIVE PARTICIPANTS */
@media (max-width: 1180px) {
    .pcpart-filters { grid-template-columns:1fr 1fr; }
    .pcpart-filter--search { grid-column:1 / -1; }
}
@media (max-width: 780px) {
    .pcpart-wrap { padding:14px; border-radius:14px; }
    .pcpart-head { flex-direction:column; align-items:flex-start; }
    .pcpart-head__btns { width:100%; }
    .pcpart-btn { flex:1; }
    .pcpart-filters { grid-template-columns:1fr; }
    .pcpart-bulkbar { flex-direction:column; align-items:flex-start; }
    .pcpart-bulkbar__right { width:100%; flex-wrap:wrap; }
    .pcpart-ddl--sm { flex:1; min-width:0; }
    .pcpart-pag { flex-direction:column; align-items:flex-start; }
    .pcpart-pag__right { width:100%; overflow-x:auto; padding-bottom:2px; }
}

/* ======================================== */
/* TAB GRADES: Simplified Gradebook Overview (Trainer) */
/* prefix pcgrade-* | COMPACT strict spec: cell 7-8px, font12.5-13px, head 20px, btns 36px */
/* ======================================== */
.pcgrade-wrap { margin-top:20px; padding:18px 18px 16px; background:var(--white); border-radius:15px; box-shadow:0 2px 9px rgba(15,23,42,0.05); border:1px solid rgba(15,23,42,0.055); }

/* ----- STATS 4 CARDS ATAS ----- */
.pcgrade-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px; }
.pcgrade-stat { display:flex; align-items:center; gap:12px; padding:12px 13px; border-radius:12px; background:linear-gradient(135deg,rgba(248,250,252,1) 0%,rgba(241,245,249,1) 100%); border:1px solid rgba(203,213,225,0.6); position:relative; overflow:hidden; }
.pcgrade-stat__ic { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; box-shadow:0 2px 6px rgba(0,0,0,0.13); }
.pcgrade-stat__ic--blue { background:linear-gradient(135deg,#3b82f6,#1d4ed8); }
.pcgrade-stat__ic--emerald { background:linear-gradient(135deg,#10b981,#059669); }
.pcgrade-stat__ic--teal { background:linear-gradient(135deg,#14b8a6,#0f766e); }
.pcgrade-stat__ic--rose { background:linear-gradient(135deg,#fb7185,#e11d48); }
.pcgrade-stat__meta { flex:1; min-width:0; }
.pcgrade-stat__lbl { font-size:11.5px; color:#64748b; font-weight:500; margin-bottom:2px; letter-spacing:0.1px; }
.pcgrade-stat__val { font-size:19.5px; font-weight:800; color:#0f172a; line-height:1.05; letter-spacing:-0.4px; }
.pcgrade-stat__of { font-size:13px; font-weight:600; color:#94a3b8; }
.pcgrade-stat__delta { font-size:11px; margin-top:3px; font-weight:600; }
.pcgrade-stat__delta--up { color:#059669; }
.pcgrade-stat__delta--emerald { color:#059669; }
.pcgrade-stat__delta--rose { color:#dc2626; }

/* ----- HEADER + ACTION BTNS KANAN ----- */
.pcgrade-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:12px; gap:12px; flex-wrap:wrap; }
.pcgrade-head__title { font-size:19.5px; font-weight:800; color:var(--text); margin:0; letter-spacing:-0.4px; }
.pcgrade-head__subtitle { font-size:12.5px; color:var(--muted); margin:3px 0 0; }
.pcgrade-head__btns { display:flex; gap:8px; }
.pcgrade-btn { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 13px; font-size:12.5px; font-weight:600; border-radius:9px; cursor:pointer; transition:all 0.15s ease; border:1px solid transparent; font-family:var(--font-sans); letter-spacing:0.1px; white-space:nowrap; }
.pcgrade-btn--outline { background:var(--white); color:#475569; border-color:var(--border); }
.pcgrade-btn--outline:hover { background:#f1f5f9; border-color:#cbd5e1; color:#0f172a; }
.pcgrade-btn--outline2 { background:linear-gradient(180deg,#fff,#f8fafc); color:var(--text); border-color:#cbd5e1; }
.pcgrade-btn--outline2:hover { background:#f1f5f9; border-color:#94a3b8; }
.pcgrade-btn--solid { background:var(--primary-gradient); color:#fff; box-shadow:0 3px 8px rgba(59,130,246,0.28); border:0; }
.pcgrade-btn--solid:hover { transform:translateY(-1px); box-shadow:0 5px 14px rgba(59,130,246,0.38); }

/* ----- FILTER BAR: Search / Group / Sort / Status + Quick Grade TOGGLE ----- */
.pcgrade-filters { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1.25fr; gap:9px; padding:10px 11px; background:linear-gradient(180deg,#f8fafc,#f1f5f9); border-radius:11px; margin-bottom:12px; border:1px solid rgba(203,213,225,0.55); align-items:center; }
.pcgrade-filter { display:flex; align-items:center; gap:7px; min-width:0; }
.pcgrade-filter--search { position:relative; }
.pcgrade-filter__ic { color:#94a3b8; position:absolute; left:10px; top:50%; transform:translateY(-50%); z-index:2; pointer-events:none; }
.pcgrade-search { width:100%; min-height:40px; padding-left:33px; padding-right:11px; font-size:13px; border-radius:9px; border:1px solid #cbd5e1; background:var(--white); font-family:var(--font-sans); }
.pcgrade-search:focus { outline:0; border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,0.12); }
.pcgrade-filter__lbl { font-size:12px; color:#64748b; font-weight:600; white-space:nowrap; }
.pcgrade-ddl { min-height:40px; padding:0 28px 0 10px; font-size:12.5px; border-radius:9px; border:1px solid #cbd5e1; background:var(--white); cursor:pointer; font-family:var(--font-sans); color:#0f172a; font-weight:500; }
.pcgrade-ddl--xs { min-height:32px; font-size:12px; padding-top:1px; }
.pcgrade-ddl:focus { outline:0; border-color:#3b82f6; }
/* QUICK GRADE TOGGLE SWITCH */
.pcgrade-qg { display:flex; align-items:center; gap:8px; cursor:pointer; padding:7px 10px; background:rgba(59,130,246,0.06); border-radius:9px; border:1px solid rgba(59,130,246,0.2); justify-self:end; }
.pcgrade-qg input { display:none; }
.pcgrade-qg__track { width:38px; height:21px; background:#cbd5e1; border-radius:999px; position:relative; transition:background 0.2s; }
.pcgrade-qg__dot { position:absolute; top:2.5px; left:3px; width:16px; height:16px; background:#fff; border-radius:50%; transition:transform 0.2s; box-shadow:0 1px 3px rgba(0,0,0,0.2); }
.pcgrade-qg input:checked ~ .pcgrade-qg__track { background:linear-gradient(90deg,#10b981,#059669); }
.pcgrade-qg input:checked ~ .pcgrade-qg__track .pcgrade-qg__dot { transform:translateX(16px); }
.pcgrade-qg__label { font-size:12.5px; color:#0f172a; }
.pcgrade-qg__label strong { color:#0369a1; }
.pcgrade-qg input:checked ~ .pcgrade-qg__label strong { color:#059669; }

/* ----- TABLE 6 COLUMNS COMPACT ----- */
.pcgrade-tblwrap { overflow-x:auto; border-radius:12px; border:1px solid rgba(203,213,225,0.65); }
.pcgrade-tbl { width:100%; border-collapse:collapse; font-size:12.5px; color:#0f172a; }
.pcgrade-tbl thead th { padding:9px 11px; text-align:left; background:linear-gradient(180deg,#f1f5f9,#e2e8f0); color:#0f172a; font-weight:700; font-size:12.5px; border-bottom:1.5px solid #cbd5e1; white-space:nowrap; position:sticky; top:0; z-index:3; letter-spacing:-0.05px; }
.pcgrade-th__weight { font-weight:500; font-size:11px; color:#64748b; }
.pcgrade-tbl tbody td { padding:7.5px 10px; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
.pcgrade-tbl tbody tr:hover { background:rgba(59,130,246,0.03); }

/* Column 1: Student User Cell */
.pcgrade-tbl__usercell { min-width:0; }
.pcgrade-user { display:flex; align-items:center; gap:9px; }
.pcgrade-user__av { width:35px; height:35px; border-radius:9px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:12.5px; flex-shrink:0; letter-spacing:0.2px; position:relative; box-shadow:0 2px 5px rgba(0,0,0,0.1); }
.pcgrade-user__av--top { border:2px solid #fff; box-shadow:0 0 0 2px #10b981, 0 4px 10px rgba(16,185,129,0.3); }
.pcgrade-user__crown { position:absolute; top:-10px; right:-5px; font-size:14px; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.25)); }
.pcgrade-user__meta { min-width:0; flex:1; }
.pcgrade-user__name { display:block; font-weight:700; font-size:13px; color:#0f172a; text-decoration:none; line-height:1.2; }
.pcgrade-user__name:hover { color:#2563eb; }
.pcgrade-user__tag { display:inline-block; margin-left:5px; padding:1.5px 6px; font-size:10px; font-weight:700; color:#4338ca; background:rgba(99,102,241,0.12); border-radius:5px; vertical-align:middle; }
.pcgrade-user__sub { display:block; margin-top:2px; font-size:11.2px; color:#64748b; line-height:1.3; }
.pcgrade-chip { display:inline-block; padding:1.8px 7px; border-radius:5px; font-size:10.8px; font-weight:700; }
.pcgrade-chip--blue { background:rgba(59,130,246,0.1); color:#1d4ed8; }
.pcgrade-chip--amber { background:rgba(245,158,11,0.13); color:#b45309; }
.pcgrade-chip--rose { background:rgba(244,63,94,0.11); color:#be123c; }
.pcgrade-chip--indigo { background:rgba(99,102,241,0.12); color:#4338ca; }
.pcgrade-chip--violet { background:rgba(139,92,246,0.12); color:#6d28d9; }

/* Column 2-4: Grade Cell */
.pcgrade-tbl__gradecell { text-align:left; }
.pcgrade-grade { display:flex; align-items:center; gap:6px; }
.pcgrade-grade__num { font-size:15px; font-weight:800; color:#0f172a; letter-spacing:-0.4px; min-width:26px; }
.pcgrade-grade__letter { padding:2px 6.5px; border-radius:6px; font-size:11px; font-weight:800; line-height:1.3; letter-spacing:0.2px; }
.pcgrade-grade__letter--ap { background:linear-gradient(135deg,#10b981,#047857); color:#fff; }
.pcgrade-grade__letter--a { background:linear-gradient(135deg,#34d399,#059669); color:#fff; }
.pcgrade-grade__letter--bp { background:linear-gradient(135deg,#3b82f6,#1d4ed8); color:#fff; }
.pcgrade-grade__letter--b { background:linear-gradient(135deg,#60a5fa,#2563eb); color:#fff; }
.pcgrade-grade__letter--c { background:linear-gradient(135deg,#fbbf24,#d97706); color:#fff; }
.pcgrade-grade__letter--d { background:linear-gradient(135deg,#f97316,#c2410c); color:#fff; }
.pcgrade-grade__letter--f { background:linear-gradient(135deg,#ef4444,#b91c1c); color:#fff; }

/* Column 5: Total Final Grade BIG */
.pcgrade-tbl__totalcell { min-width:0; }
.pcgrade-total { display:flex; align-items:baseline; gap:7px; }
.pcgrade-total__num { font-size:18px; font-weight:900; color:#0f172a; letter-spacing:-0.6px; line-height:1; }
.pcgrade-total__pct { font-size:11.5px; font-weight:600; color:#64748b; }
.pcgrade-total__letter { padding:3.5px 8px; border-radius:7px; font-size:12px; font-weight:900; letter-spacing:0.4px; box-shadow:0 2px 4px rgba(0,0,0,0.08); }
.pcgrade-total__letter--ap { background:linear-gradient(135deg,#10b981,#047857); color:#fff; }
.pcgrade-total__letter--a { background:linear-gradient(135deg,#34d399,#059669); color:#fff; }
.pcgrade-total__letter--bp { background:linear-gradient(135deg,#3b82f6,#1d4ed8); color:#fff; }
.pcgrade-total__letter--b { background:linear-gradient(135deg,#60a5fa,#2563eb); color:#fff; }
.pcgrade-total__letter--f { background:linear-gradient(135deg,#ef4444,#b91c1c); color:#fff; }
.pcgrade-total--foot { border-left:3px solid #3b82f6; padding-left:8px; }
.pcgrade-total__bar { margin-top:5px; height:5px; background:#e2e8f0; border-radius:999px; overflow:hidden; }
.pcgrade-total__bar > div { height:100%; border-radius:999px; transition:width 0.4s ease; }

/* Column 6: Status LULUS / GAGAL pill */
.pcgrade-tbl__statuscell { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.pcgrade-passbad { padding:5px 10px; border-radius:999px; font-size:11.5px; font-weight:800; letter-spacing:0.3px; display:inline-block; }
.pcgrade-passbad--pass { background:linear-gradient(135deg,#d1fae5,#a7f3d0); color:#065f46; border:1px solid #6ee7b7; }
.pcgrade-passbad--fail { background:linear-gradient(135deg,#fee2e2,#fecaca); color:#991b1b; border:1px solid #fca5a5; }
.pcgrade-passbad--honor { background:linear-gradient(135deg,#fef3c7,#fde68a); color:#92400e; border:1px solid #fcd34d; box-shadow:0 2px 5px rgba(245,158,11,0.2); }
.pcgrade-passbad--staff { background:linear-gradient(135deg,#e0e7ff,#c7d2fe); color:#3730a3; border:1px solid #a5b4fc; }
.pcgrade-passbad--hold { background:linear-gradient(135deg,#f1f5f9,#cbd5e1); color:#334155; border:1px solid #94a3b8; }
.pcgrade-passbad--foot { background:linear-gradient(135deg,#dbeafe,#bfdbfe); color:#1e40af; border:1px solid #93c5fd; font-size:11.5px; }
.pcgrade-actionbtn { width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center; background:transparent; border:0; cursor:pointer; color:#64748b; font-size:14px; font-weight:700; line-height:1; }
.pcgrade-actionbtn:hover { background:#e2e8f0; color:#0f172a; }

/* MUTED placeholder N/A cell */
.pcgrade-muted { font-size:12px; color:#94a3b8; font-weight:500; }

/* FOOTER ROW Aggregate */
.pcgrade-tbl__footerrow td { background:linear-gradient(180deg,#eff6ff,#dbeafe) !important; border-top:1.5px solid #93c5fd !important; border-bottom:0 !important; padding-top:10px !important; padding-bottom:10px !important; }
.pcgrade-footlbl { font-size:13px; color:#1e3a8a; }
.pcgrade-footgrade { line-height:1.25; }
.pcgrade-footgrade__hl { font-size:11px; color:#64748b; margin-top:2px; font-weight:600; }

/* ----- PAGINATION BAWAH TABLE ----- */
.pcgrade-pag { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:12px; padding-top:10px; border-top:1px solid #e2e8f0; flex-wrap:wrap; }
.pcgrade-pag__left { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pcgrade-pag__lbl { font-size:12.5px; color:#64748b; font-weight:600; }
.pcgrade-pag__info { font-size:12px; color:#475569; }
.pcgrade-pag__info strong { color:#0f172a; font-weight:700; }
.pcgrade-pag__right { display:flex; gap:4px; align-items:center; }
.pcgrade-pag__btn { min-width:30px; min-height:30px; padding:0 9px; font-size:12px; border-radius:7px; border:1px solid #cbd5e1; background:var(--white); cursor:pointer; color:#0f172a; font-weight:600; font-family:var(--font-sans); transition:all 0.15s; }
.pcgrade-pag__btn:hover:not(:disabled) { background:#f1f5f9; border-color:#94a3b8; }
.pcgrade-pag__btn--active { background:var(--primary-gradient); color:#fff; border-color:transparent; box-shadow:0 2px 5px rgba(59,130,246,0.35); }
.pcgrade-pag__btn:disabled { opacity:0.45; cursor:not-allowed; }

/* RESPONSIVE Grades */
@media (max-width: 1100px) {
    .pcgrade-stats { grid-template-columns:repeat(2,1fr); }
    .pcgrade-filters { grid-template-columns:1fr 1fr; }
    .pcgrade-filter--search { grid-column:1 / -1; }
    .pcgrade-filter--qg { justify-self:start; }
}
@media (max-width: 780px) {
    .pcgrade-wrap { padding:14px; border-radius:14px; }
    .pcgrade-head { flex-direction:column; align-items:flex-start; }
    .pcgrade-head__btns { width:100%; }
    .pcgrade-btn { flex:1; }
    .pcgrade-stats { grid-template-columns:1fr 1fr; }
    .pcgrade-stat__val { font-size:17px; }
    .pcgrade-filters { grid-template-columns:1fr; }
    .pcgrade-pag { flex-direction:column; align-items:flex-start; }
    .pcgrade-pag__right { width:100%; overflow-x:auto; padding-bottom:2px; }
}

/* ======================================== */
/* TAB ACTIVITIES: Simplified Table (Trainer) */
/* prefix pcact-* | COMPACT strict spec: cell 7-8px, font12.5-13px, head 20px, btns 36px */
/* ======================================== */
.pcact-wrap { margin-top:20px; padding:18px 18px 16px; background:var(--white); border-radius:15px; box-shadow:0 2px 9px rgba(15,23,42,0.05); border:1px solid rgba(15,23,42,0.055); }

/* ----- STATS 4 CARDS ATAS ----- */
.pcact-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px; }
.pcact-stat { display:flex; align-items:center; gap:12px; padding:12px 13px; border-radius:12px; background:linear-gradient(135deg,rgba(248,250,252,1) 0%,rgba(241,245,249,1) 100%); border:1px solid rgba(203,213,225,0.6); position:relative; overflow:hidden; }
.pcact-stat__ic { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; box-shadow:0 2px 6px rgba(0,0,0,0.13); }
.pcact-stat__ic--indigo { background:linear-gradient(135deg,#6366f1,#4338ca); }
.pcact-stat__ic--rose { background:linear-gradient(135deg,#fb7185,#e11d48); }
.pcact-stat__ic--amber { background:linear-gradient(135deg,#fbbf24,#d97706); }
.pcact-stat__ic--emerald { background:linear-gradient(135deg,#10b981,#059669); }
.pcact-stat__meta { flex:1; min-width:0; }
.pcact-stat__lbl { font-size:11.5px; color:#64748b; font-weight:500; margin-bottom:2px; letter-spacing:0.1px; }
.pcact-stat__val { font-size:19.5px; font-weight:800; color:#0f172a; line-height:1.05; letter-spacing:-0.4px; }
.pcact-stat__of { font-size:13px; font-weight:600; color:#94a3b8; }
.pcact-stat__pct { font-size:13px; font-weight:600; color:#64748b; margin-left:1px; }
.pcact-stat__badge { display:inline-block; margin-left:7px; padding:2px 7px; background:linear-gradient(135deg,#fee2e2,#fecaca); color:#b91c1c; border:1px solid #fca5a5; border-radius:999px; font-size:10px; font-weight:800; vertical-align:middle; letter-spacing:0.3px; }
.pcact-stat__delta { font-size:11px; margin-top:3px; font-weight:600; }
.pcact-stat__delta--up { color:#059669; }
.pcact-stat__delta--rose { color:#dc2626; }
.pcact-stat__delta--amber { color:#b45309; }

/* ----- HEADER 2 COL + 3 ACTION BTNS ----- */
.pcact-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:12px; gap:12px; flex-wrap:wrap; }
.pcact-head__title { font-size:19.5px; font-weight:800; color:var(--text); margin:0; letter-spacing:-0.4px; }
.pcact-head__subtitle { font-size:12.5px; color:var(--muted); margin:3px 0 0; }
.pcact-head__btns { display:flex; gap:8px; }
.pcact-btn { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 13px; font-size:12.5px; font-weight:600; border-radius:9px; cursor:pointer; transition:all 0.15s ease; border:1px solid transparent; font-family:var(--font-sans); letter-spacing:0.1px; white-space:nowrap; }
.pcact-btn--outline { background:var(--white); color:#475569; border-color:var(--border); }
.pcact-btn--outline:hover { background:#f1f5f9; border-color:#cbd5e1; color:#0f172a; }
.pcact-btn--outline2 { background:linear-gradient(180deg,#fff,#f8fafc); color:var(--text); border-color:#cbd5e1; }
.pcact-btn--outline2:hover { background:#f1f5f9; border-color:#94a3b8; }
.pcact-btn--solid { background:var(--primary-gradient); color:#fff; box-shadow:0 3px 8px rgba(59,130,246,0.28); border:0; }
.pcact-btn--solid:hover { transform:translateY(-1px); box-shadow:0 5px 14px rgba(59,130,246,0.38); }
.pcact-btn--bulkgo { min-height:40px; background:linear-gradient(135deg,#475569,#334155); color:#fff; padding:0 14px; font-weight:700; border-color:transparent; }
.pcact-btn--bulkgo:hover { background:linear-gradient(135deg,#334155,#1e293b); }

/* ----- FILTER BAR: Search + Section + Type + Visibility + Bulk Action ----- */
.pcact-filters { display:grid; grid-template-columns:1.5fr 1fr 1.1fr 1fr 1.6fr; gap:9px; padding:10px 11px; background:linear-gradient(180deg,#f8fafc,#f1f5f9); border-radius:11px; margin-bottom:12px; border:1px solid rgba(203,213,225,0.55); align-items:center; }
.pcact-filter { display:flex; align-items:center; gap:7px; min-width:0; }
.pcact-filter--search { position:relative; }
.pcact-filter__ic { color:#94a3b8; position:absolute; left:10px; top:50%; transform:translateY(-50%); z-index:2; pointer-events:none; }
.pcact-search { width:100%; min-height:40px; padding-left:33px; padding-right:11px; font-size:13px; border-radius:9px; border:1px solid #cbd5e1; background:var(--white); font-family:var(--font-sans); }
.pcact-search:focus { outline:0; border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,0.12); }
.pcact-filter__lbl { font-size:12px; color:#64748b; font-weight:600; white-space:nowrap; }
.pcact-ddl { min-height:40px; padding:0 28px 0 10px; font-size:12.5px; border-radius:9px; border:1px solid #cbd5e1; background:var(--white); cursor:pointer; font-family:var(--font-sans); color:#0f172a; font-weight:500; flex:1; min-width:0; }
.pcact-ddl--bulk { min-width:0; }
.pcact-ddl--xs { min-height:32px; font-size:12px; padding-top:1px; flex:none; min-width:auto; }
.pcact-ddl:focus { outline:0; border-color:#3b82f6; }
.pcact-filter--bulk { justify-self:end; }

/* ----- TABLE 8 COLUMNS COMPACT ----- */
.pcact-tblwrap { overflow-x:auto; border-radius:12px; border:1px solid rgba(203,213,225,0.65); }
.pcact-tbl { width:100%; border-collapse:collapse; font-size:12.5px; color:#0f172a; }
.pcact-tbl thead th { padding:9px 11px; text-align:left; background:linear-gradient(180deg,#f1f5f9,#e2e8f0); color:#0f172a; font-weight:700; font-size:12.5px; border-bottom:1.5px solid #cbd5e1; white-space:nowrap; position:sticky; top:0; z-index:3; letter-spacing:-0.05px; }
.pcact-tbl tbody td { padding:7.5px 10px; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
.pcact-tbl tbody tr:hover { background:rgba(59,130,246,0.03); }

/* Col 1: Checkbox cell */
.pcact-tbl__chkcell { text-align:center; }
.pcact-rowchk { display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.pcact-rowchk input { display:none; }
.pcact-rowchk__box { width:17px; height:17px; border-radius:5px; border:1.6px solid #94a3b8; background:var(--white); display:flex; align-items:center; justify-content:center; transition:all 0.15s ease; }
.pcact-rowchk input:checked ~ .pcact-rowchk__box { background:linear-gradient(135deg,#3b82f6,#1d4ed8); border-color:transparent; }
.pcact-rowchk input:checked ~ .pcact-rowchk__box svg { opacity:1; }
.pcact-rowchk__box svg { opacity:0; }

/* Col 2: Activity icon + name */
.pcact-act { display:flex; align-items:flex-start; gap:9px; }
.pcact-act__ic { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; background:linear-gradient(135deg,#f1f5f9,#e2e8f0); border:1.5px solid #cbd5e1; }
.pcact-act__ic--assign { background:linear-gradient(135deg,#dbeafe,#bfdbfe); border-color:#93c5fd; }
.pcact-act__ic--quiz { background:linear-gradient(135deg,#fef3c7,#fde68a); border-color:#fcd34d; }
.pcact-act__ic--toolkit { background:linear-gradient(135deg,#ede9fe,#ddd6fe); box-shadow:0 2px 5px rgba(139,92,246,0.12); }
.pcact-act__ic--lesson { background:linear-gradient(135deg,#d1fae5,#a7f3d0); border-color:#6ee7b7; }
.pcact-act__ic--video { background:linear-gradient(135deg,#fee2e2,#fecaca); border-color:#fca5a5; }
.pcact-act__ic--res { background:linear-gradient(135deg,#f1f5f9,#e2e8f0); border-color:#cbd5e1; }
.pcact-act__meta { flex:1; min-width:0; }
.pcact-act__name { display:block; font-weight:700; font-size:13px; color:#0f172a; text-decoration:none; line-height:1.2; }
.pcact-act__name:hover { color:#2563eb; }
.pcact-act__sub { display:block; margin-top:2.5px; font-size:11.2px; color:#64748b; line-height:1.3; }
.pcact-act__tag { display:inline-block; margin-left:5px; padding:2px 6px; background:linear-gradient(135deg,#dbeafe,#bfdbfe); color:#1d4ed8; border:1px solid #93c5fd; border-radius:5px; font-size:10px; font-weight:800; vertical-align:middle; }
.pcact-act__tag--new { background:linear-gradient(135deg,#10b981,#059669); color:#fff; border-color:transparent; animation:pcact-pulse 2.2s infinite; }
@keyframes pcact-pulse {
    0%,100% { box-shadow:0 0 0 0 rgba(16,185,129,0.45); }
    50% { box-shadow:0 0 0 4px rgba(16,185,129,0); }
}

/* Col 3: Section chip */
.pcact-chip { display:inline-block; padding:2.2px 8px; border-radius:6px; font-size:11px; font-weight:700; }
.pcact-chip--blue { background:rgba(59,130,246,0.1); color:#1d4ed8; }
.pcact-chip--amber { background:rgba(245,158,11,0.13); color:#b45309; }
.pcact-chip--violet { background:rgba(139,92,246,0.12); color:#6d28d9; }
.pcact-chip--rose { background:rgba(244,63,94,0.11); color:#be123c; }

/* Col 4: Due Date */
.pcact-due { font-size:12.5px; font-weight:600; color:#0f172a; display:block; line-height:1.25; }
.pcact-due--soon { color:#1d4ed8; }
.pcact-due--soon::before { content:"⏳ "; font-size:11.5px; }
.pcact-due--over { color:#b91c1c; font-weight:700; }
.pcact-due__ago { display:block; margin-top:2px; font-size:10.5px; font-weight:500; color:#ef4444; opacity:0.9; }
.pcact-due--none { color:#94a3b8; font-weight:500; font-style:italic; font-size:12px; }
.pcact-due--far { color:#047857; }

/* Col 5: Submissions */
.pcact-sub { display:flex; flex-direction:column; gap:3px; min-width:0; }
.pcact-sub__val { font-size:12.5px; font-weight:700; color:#0f172a; letter-spacing:-0.15px; }
.pcact-sub__full { display:inline-block; margin-left:5px; padding:1.5px 5px; border-radius:5px; background:linear-gradient(135deg,#fee2e2,#fecaca); color:#b91c1c; font-size:10px; font-weight:800; }
.pcact-sub__bar { height:5px; background:#e2e8f0; border-radius:999px; overflow:hidden; }
.pcact-sub__bar > div { height:100%; border-radius:999px; transition:width 0.4s ease; }

/* Col 6: Grading status chips */
.pcact-grade { display:inline-block; padding:3.5px 8px; border-radius:7px; font-size:11.2px; font-weight:700; line-height:1.3; letter-spacing:0.1px; }
.pcact-grade--not { background:#f1f5f9; color:#475569; border:1px solid #cbd5e1; }
.pcact-grade--done { background:linear-gradient(135deg,#d1fae5,#a7f3d0); color:#065f46; border:1px solid #6ee7b7; }
.pcact-grade--partial { background:linear-gradient(135deg,#fef3c7,#fde68a); color:#92400e; border:1px solid #fcd34d; }
.pcact-grade--na { background:#f8fafc; color:#64748b; border:1px dashed #cbd5e1; font-weight:500; font-size:11px; }

/* Col 7: Visibility pills */
.pcact-vis { display:inline-block; padding:3.5px 9px; border-radius:999px; font-size:11.2px; font-weight:800; letter-spacing:0.15px; }
.pcact-vis--pub { background:linear-gradient(135deg,#d1fae5,#a7f3d0); color:#065f46; border:1px solid #6ee7b7; }
.pcact-vis--pub::before { content:"👁 "; }
.pcact-vis--hid { background:linear-gradient(135deg,#f1f5f9,#e2e8f0); color:#475569; border:1px solid #cbd5e1; }
.pcact-vis--hid::before { content:"🚫 "; }

/* Col 8: Actions button */
.pcact-actions { text-align:right; }
.pcact-actions__btn { width:29px; height:29px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; background:transparent; border:0; cursor:pointer; color:#64748b; transition:all 0.15s; }
.pcact-actions__btn:hover { background:#e2e8f0; color:#0f172a; }
.pcact-actions__btn--urgent { background:linear-gradient(135deg,#fef2f2,#fee2e2); color:#b91c1c; animation:pcact-pulse-urg 2s infinite; }
.pcact-actions__btn--urgent:hover { background:linear-gradient(135deg,#fee2e2,#fecaca); color:#7f1d1d; }
@keyframes pcact-pulse-urg {
    0%,100% { box-shadow:0 0 0 0 rgba(248,113,113,0.45); }
    50% { box-shadow:0 0 0 3.5px rgba(248,113,113,0); }
}

/* ----- PAGINATION BAR BAWAH TABLE ----- */
.pcact-pag { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:12px; padding-top:10px; border-top:1px solid #e2e8f0; flex-wrap:wrap; }
.pcact-pag__left { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pcact-pag__lbl { font-size:12.5px; color:#64748b; font-weight:600; }
.pcact-pag__info { font-size:12px; color:#475569; }
.pcact-pag__info strong { color:#0f172a; font-weight:700; }
.pcact-pag__right { display:flex; gap:4px; align-items:center; }
.pcact-pag__btn { min-width:30px; min-height:30px; padding:0 9px; font-size:12px; border-radius:7px; border:1px solid #cbd5e1; background:var(--white); cursor:pointer; color:#0f172a; font-weight:600; font-family:var(--font-sans); transition:all 0.15s; }
.pcact-pag__btn:hover:not(:disabled) { background:#f1f5f9; border-color:#94a3b8; }
.pcact-pag__btn--active { background:var(--primary-gradient); color:#fff; border-color:transparent; box-shadow:0 2px 5px rgba(59,130,246,0.35); }
.pcact-pag__btn:disabled { opacity:0.45; cursor:not-allowed; }

/* RESPONSIVE Activities */
@media (max-width: 1180px) {
    .pcact-stats { grid-template-columns:repeat(2,1fr); }
    .pcact-filters { grid-template-columns:1fr 1fr; }
    .pcact-filter--search { grid-column:1 / -1; }
    .pcact-filter--bulk { justify-self:start; }
}
@media (max-width: 780px) {
    .pcact-wrap { padding:14px; border-radius:14px; }
    .pcact-head { flex-direction:column; align-items:flex-start; }
    .pcact-head__btns { width:100%; }
    .pcact-btn { flex:1; }
    .pcact-stats { grid-template-columns:1fr 1fr; }
    .pcact-stat__val { font-size:17px; }
    .pcact-filters { grid-template-columns:1fr; }
    .pcact-pag { flex-direction:column; align-items:flex-start; }
    .pcact-pag__right { width:100%; overflow-x:auto; padding-bottom:2px; }
}

/* ================================================================
   PCREP — CLASS REPORT (PILIHAN 1: COMPACT STANDALONE)
   Prefix: pcrep-* | Last updated: 2026-08-16
   ================================================================ */

.pcrep-head { display:flex; justify-content:space-between; align-items:flex-end; gap:14px; padding:14px 2px 10px; flex-wrap:wrap; }
.pcrep-head__title { font-size:22px; font-weight:800; color:#0f172a; margin:0; letter-spacing:-0.45px; line-height:1.1; }
.pcrep-head__subtitle { font-size:12.5px; color:#64748b; margin:3px 0 0; }
.pcrep-head__btns { display:flex; gap:7px; flex-wrap:wrap; }
.pcrep-btn { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 13px; font-size:12.5px; font-weight:600; border-radius:9px; cursor:pointer; transition:all 0.15s ease; border:1px solid transparent; font-family:var(--font-sans); letter-spacing:0.1px; white-space:nowrap; }
.pcrep-btn--outline { background:var(--white); color:#475569; border-color:var(--border); }
.pcrep-btn--outline:hover { background:#f1f5f9; border-color:#cbd5e1; color:#0f172a; }
.pcrep-btn--outline2 { background:linear-gradient(180deg,#fff,#f8fafc); color:var(--text); border-color:#cbd5e1; }
.pcrep-btn--outline2:hover { background:#f1f5f9; border-color:#94a3b8; }
.pcrep-btn--solid { background:var(--primary-gradient); color:#fff; box-shadow:0 3px 8px rgba(59,130,246,0.28); border:0; }
.pcrep-btn--solid:hover { transform:translateY(-1px); box-shadow:0 5px 14px rgba(59,130,246,0.38); }

/* ----- KPI 4 CARDS (pattern reuse pcgrade) ----- */
.pcrep-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px; }
.pcrep-stat { display:flex; align-items:center; gap:12px; padding:12px 13px; border-radius:12px; background:linear-gradient(135deg,rgba(248,250,252,1) 0%,rgba(241,245,249,1) 100%); border:1px solid rgba(203,213,225,0.6); position:relative; overflow:hidden; }
.pcrep-stat__ic { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; box-shadow:0 2px 6px rgba(0,0,0,0.13); }
.pcrep-stat__ic--blue    { background:linear-gradient(135deg,#3b82f6,#1d4ed8); }
.pcrep-stat__ic--violet  { background:linear-gradient(135deg,#8b5cf6,#6d28d9); }
.pcrep-stat__ic--emerald { background:linear-gradient(135deg,#10b981,#059669); }
.pcrep-stat__ic--rose    { background:linear-gradient(135deg,#fb7185,#e11d48); }
.pcrep-stat__meta { flex:1; min-width:0; }
.pcrep-stat__lbl { font-size:11.5px; color:#64748b; font-weight:500; margin-bottom:2px; letter-spacing:0.1px; }
.pcrep-stat__val { font-size:19.5px; font-weight:800; color:#0f172a; line-height:1.05; letter-spacing:-0.4px; }
.pcrep-stat__delta { font-size:11px; margin-top:3px; font-weight:600; color:#64748b; }
.pcrep-stat__delta--up { color:#059669; }
.pcrep-stat__delta--rose { color:#dc2626; }

/* ----- FILTER 4 COL BARIS (pattern reuse pcpart) ----- */
.pcrep-filters { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:9px; padding:10px 11px; background:linear-gradient(180deg,#f8fafc,#f1f5f9); border-radius:11px; margin-bottom:11px; border:1px solid rgba(203,213,225,0.55); align-items:center; }
.pcrep-filter { display:flex; align-items:center; gap:7px; min-width:0; }
.pcrep-filter--search { position:relative; }
.pcrep-filter__ic { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:#94a3b8; z-index:2; pointer-events:none; }
.pcrep-search { width:100%; min-height:36px; padding:0 10px 0 34px; font-size:12.5px; font-family:var(--font-sans); background:#fff; border:1px solid #cbd5e1; border-radius:9px; outline:none; transition:border-color 0.15s, box-shadow 0.15s; color:#0f172a; }
.pcrep-search::placeholder { color:#94a3b8; font-weight:500; }
.pcrep-search:focus { border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,0.12); }
.pcrep-filter--ddl { flex-direction:column; align-items:flex-start; gap:3px; }
.pcrep-filter__lbl { font-size:10.5px; font-weight:700; color:#64748b; letter-spacing:0.35px; text-transform:uppercase; padding-left:2px; }
.pcrep-ddl { width:100%; min-height:33px; padding:0 28px 0 10px; font-size:12.5px; font-family:var(--font-sans); background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 9px center/13px; border:1px solid #cbd5e1; border-radius:8px; outline:none; appearance:none; cursor:pointer; transition:border-color 0.15s, box-shadow 0.15s; color:#0f172a; font-weight:500; }
.pcrep-ddl:focus { border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,0.12); }
.pcrep-ddl:disabled { opacity:0.45; cursor:not-allowed; background-color:#f8fafc; }
.pcrep-ddl--sm { min-height:30px; padding-right:24px; font-size:12px; }

/* ----- 2 PILL TABS (Summary by Course / By Student) ----- */
.pcrep-tabs { display:inline-flex; background:linear-gradient(180deg,#f1f5f9,#e2e8f0); padding:4px; border-radius:10px; gap:3px; margin-bottom:11px; border:1px solid rgba(203,213,225,0.7); }
.pcrep-tab { min-height:31px; padding:0 13px; border:0; border-radius:7px; font-size:12.5px; font-weight:700; color:#475569; cursor:pointer; background:transparent; transition:all 0.18s ease; font-family:var(--font-sans); white-space:nowrap; letter-spacing:0.15px; }
.pcrep-tab:hover { color:#0f172a; background:rgba(255,255,255,0.65); }
.pcrep-tab--active { background:var(--primary-gradient); color:#fff; box-shadow:0 2px 7px rgba(59,130,246,0.35); }
.pcrep-tabpanel { display:none; }

/* ----- TABLE WRAP & TABLE (pattern reuse pcpart / pcgrade) ----- */
.pcrep-tablewrap { background:var(--white); border-radius:13px; border:1px solid rgba(203,213,225,0.65); overflow:hidden; box-shadow:0 1px 6px rgba(15,23,42,0.04); }
.pcrep-table { width:100%; border-collapse:collapse; font-family:var(--font-sans); }
.pcrep-table thead { background:linear-gradient(180deg,#f8fafc,#f1f5f9); }
.pcrep-table th { text-align:left; padding:10px 12px; font-size:11.3px; font-weight:700; color:#475569; letter-spacing:0.25px; text-transform:uppercase; border-bottom:1px solid #e2e8f0; white-space:nowrap; }
.pcrep-table tbody tr { transition:background 0.12s ease; }
.pcrep-table tbody tr:hover { background:#f8fafc; }
.pcrep-table tbody tr + tr td { border-top:1px solid #f1f5f9; }
.pcrep-table td { padding:10px 12px; font-size:12.5px; color:#0f172a; vertical-align:middle; }
.pcrep-tdno { text-align:center; color:#94a3b8; font-weight:600; font-size:12px; }
.pcrep-tdnum { text-align:center; font-variant-numeric:tabular-nums; }
.pcrep-tdmono { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:11.5px; color:#475569; font-weight:600; letter-spacing:0.2px; }
.pcrep-sub { font-size:11px; color:#64748b; font-weight:500; }

/* Course cell: pill code + name meta */
.pcrep-coursecell { display:flex; align-items:center; gap:10px; min-width:0; }
.pcrep-coursepill { display:inline-flex; align-items:center; justify-content:center; min-width:72px; padding:4px 7px; border-radius:7px; font-size:10.5px; font-weight:800; letter-spacing:0.25px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; }
.pcrep-coursepill--violet  { background:rgba(139,92,246,0.12); color:#6d28d9; border:1px solid rgba(139,92,246,0.25); }
.pcrep-coursepill--blue    { background:rgba(59,130,246,0.1);  color:#1d4ed8; border:1px solid rgba(59,130,246,0.22); }
.pcrep-coursepill--emerald { background:rgba(16,185,129,0.1);  color:#047857; border:1px solid rgba(16,185,129,0.22); }
.pcrep-coursepill--amber   { background:rgba(245,158,11,0.12); color:#b45309; border:1px solid rgba(245,158,11,0.25); }
.pcrep-coursemeta { min-width:0; }
.pcrep-coursename { line-height:1.2; }

/* Student cell: avatar + name meta */
.pcrep-studentcell { display:flex; align-items:center; gap:10px; min-width:0; }
.pcrep-stuav { width:32px; height:32px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:800; letter-spacing:0.2px; flex-shrink:0; box-shadow:0 1px 3px rgba(15,23,42,0.15); }
.pcrep-stuav--violet  { background:linear-gradient(135deg,#8b5cf6,#6d28d9); }
.pcrep-stuav--blue    { background:linear-gradient(135deg,#3b82f6,#1d4ed8); }
.pcrep-stuav--amber   { background:linear-gradient(135deg,#f59e0b,#b45309); }
.pcrep-stuav--rose    { background:linear-gradient(135deg,#fb7185,#e11d48); }
.pcrep-stuav--emerald { background:linear-gradient(135deg,#10b981,#059669); }

/* Inline progress bar (attendance / completion cols) */
.pcrep-prog { display:flex; align-items:center; gap:8px; min-width:0; }
.pcrep-prog__bar { flex:1; height:7px; background:#e2e8f0; border-radius:999px; overflow:hidden; min-width:64px; }
.pcrep-prog__fill { height:100%; border-radius:999px; transition:width 0.4s ease; }
.pcrep-prog__txt { font-size:12px; font-weight:700; color:#0f172a; flex-shrink:0; white-space:nowrap; }

/* Score pill text (grade %) */
.pcrep-score { display:inline-flex; align-items:center; padding:3px 8px; border-radius:7px; font-weight:800; font-size:12px; letter-spacing:-0.1px; }
.pcrep-score--emerald { background:rgba(16,185,129,0.12); color:#047857; }
.pcrep-score--blue    { background:rgba(59,130,246,0.1);  color:#1d4ed8; }
.pcrep-score--amber   { background:rgba(245,158,11,0.13); color:#b45309; }
.pcrep-score--rose    { background:rgba(239,68,68,0.11);  color:#be123c; }

/* Badge (pass rate) */
.pcrep-badge { display:inline-flex; align-items:center; padding:3px 8px; border-radius:999px; font-weight:700; font-size:11px; }
.pcrep-badge--emerald { background:rgba(16,185,129,0.12); color:#047857; }
.pcrep-badge--blue    { background:rgba(59,130,246,0.1);  color:#1d4ed8; }
.pcrep-badge--amber   { background:rgba(245,158,11,0.13); color:#b45309; }

/* Status pill (Pass / At Risk / Fail) for By Student tab */
.pcrep-pill { display:inline-flex; align-items:center; padding:3.5px 10px; border-radius:999px; font-weight:800; font-size:11px; letter-spacing:0.15px; }
.pcrep-pill::before { content:""; display:inline-block; width:6px; height:6px; border-radius:999px; margin-right:5px; }
.pcrep-pill--emerald { background:rgba(16,185,129,0.12); color:#047857; }
.pcrep-pill--emerald::before { background:#10b981; }
.pcrep-pill--amber   { background:rgba(245,158,11,0.13); color:#b45309; }
.pcrep-pill--amber::before   { background:#f59e0b; }
.pcrep-pill--rose    { background:rgba(239,68,68,0.11);  color:#be123c; }
.pcrep-pill--rose::before    { background:#ef4444; }

/* Row action buttons */
.pcrep-rowbtn { min-height:30px; padding:0 10px; border-radius:7px; border:1px solid #cbd5e1; background:#fff; color:#334155; font-size:11.8px; font-weight:700; cursor:pointer; font-family:var(--font-sans); transition:all 0.15s; letter-spacing:0.1px; }
.pcrep-rowbtn:hover { background:var(--primary-gradient); color:#fff; border-color:transparent; box-shadow:0 2px 6px rgba(59,130,246,0.3); }
.pcrep-rowbtn--sm { min-height:28px; padding:0 9px; font-size:14px; font-weight:900; line-height:1; }

/* Pagination bar (bawah table) */
.pcrep-pagination { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:11px 14px; border-top:1px solid #e2e8f0; background:linear-gradient(180deg,#fcfcfd,#f8fafc); flex-wrap:wrap; }
.pcrep-pagination__left { font-size:12px; color:#475569; font-weight:600; }
.pcrep-pagination__left strong { color:#0f172a; font-weight:700; }
.pcrep-pagination__right { display:flex; gap:4px; align-items:center; flex-wrap:wrap; }
.pcrep-pagebtn { min-width:30px; min-height:30px; padding:0 9px; font-size:12px; border-radius:7px; border:1px solid #cbd5e1; background:var(--white); cursor:pointer; color:#0f172a; font-weight:600; font-family:var(--font-sans); transition:all 0.15s; }
.pcrep-pagebtn:hover:not(:disabled) { background:#f1f5f9; border-color:#94a3b8; }
.pcrep-pagebtn--active { background:var(--primary-gradient); color:#fff; border-color:transparent; box-shadow:0 2px 5px rgba(59,130,246,0.35); }
.pcrep-pagebtn--disabled, .pcrep-pagebtn:disabled { opacity:0.45; cursor:not-allowed; }

/* RESPONSIVE Class Report */
@media (max-width: 1180px) {
    .pcrep-stats { grid-template-columns:repeat(2,1fr); }
    .pcrep-filters { grid-template-columns:1fr 1fr; }
    .pcrep-filter--search { grid-column:1 / -1; }
}
@media (max-width: 780px) {
    .pcrep-head { flex-direction:column; align-items:flex-start; padding-top:10px; }
    .pcrep-head__btns { width:100%; }
    .pcrep-btn { flex:1; justify-content:center; }
    .pcrep-stats { grid-template-columns:1fr 1fr; }
    .pcrep-stat__val { font-size:17px; }
    .pcrep-filters { grid-template-columns:1fr; }
    .pcrep-pagination { flex-direction:column; align-items:flex-start; }
    .pcrep-pagination__right { width:100%; overflow-x:auto; padding-bottom:2px; }
}

/* ================================================================
   PCPRE — PRE ASSESSMENT (Course Overview Subpage)
   Prefix: pcpre-* | Last updated: 2026-08-16
   ================================================================ */

/* ----- 6 PILL TABS CUSTOM PRE ASSESSMENT — DESIGN SAMA 100% DENGAN MAIN SKRIN AI TOURISM HUB ----- */
.pcpre-tabs {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: #f3f4f6;
    border-radius: 999px;
    margin: 14px auto 20px;
    position: relative;
    z-index: 10;
    box-shadow: 0 4px 14px -6px rgba(0,0,0,0.12);
    border: 1px solid #e5e7eb;
    left: 50%;
    transform: translateX(-50%);
    flex-wrap: wrap;
}
.pcpre-tab {
    min-height: 32px;
    padding: 6px 15px;
    border-radius: 999px;
    border: none;
    background: transparent;
    font-size: 12.5px;
    font-weight: 700;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: var(--font-sans);
    white-space: nowrap;
    letter-spacing: 0.15px;
}
.pcpre-tab:hover {
    background: #fff;
    color: #111827;
    box-shadow: 0 2px 7px -2px rgba(0,0,0,0.1);
}
.pcpre-tab--active {
    background: linear-gradient(135deg,#10b981,#059669);
    color: #fff;
    box-shadow: 0 4px 12px rgba(16,185,129,0.45);
}

/* ----- TOOLBAR BARIS 3 ELEMEN: Back to Module | Preview Quiz | Attempts: 4 ----- */
.pcpre-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.pcpre-back { display:inline-flex; align-items:center; gap:7px; min-height:37px; padding:0 14px; background:#fff; border:1px solid #e2e8f0; border-radius:10px; color:#475569; font-size:12.5px; font-weight:600; text-decoration:none; font-family:var(--font-sans); cursor:pointer; transition:all 0.15s; box-shadow:0 1px 3px rgba(15,23,42,0.04); }
.pcpre-back:hover { background:#f8fafc; border-color:#cbd5e1; color:#0f172a; box-shadow:0 2px 6px rgba(15,23,42,0.07); }
.pcpre-back__chev { color:#64748b; display:inline-flex; align-items:center; }

.pcpre-toolbar__right { display:flex; align-items:center; gap:11px; flex-wrap:wrap; }
.pcpre-preview { min-height:37px; padding:0 18px; background:linear-gradient(135deg,#10b981,#059669); color:#fff; border:0; border-radius:9px; font-size:12.5px; font-weight:800; font-family:var(--font-sans); cursor:pointer; transition:all 0.15s; letter-spacing:0.2px; box-shadow:0 3px 9px rgba(16,185,129,0.32); }
.pcpre-preview:hover { transform:translateY(-1px); box-shadow:0 5px 14px rgba(16,185,129,0.42); }

.pcpre-attempts { display:inline-flex; align-items:center; min-height:28px; padding:0 11px; background:rgba(239,246,255,0.7); color:#1d4ed8; border:1px solid #bfdbfe; border-radius:999px; font-size:11.5px; font-weight:800; letter-spacing:0.15px; }

/* ----- GRADING METHOD CARD (Tab Quiz content default) ----- */
.pcpre-card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:17px 19px; box-shadow:0 1px 4px rgba(15,23,42,0.04); }
.pcpre-card__label { font-size:13px; color:#1f2937; line-height:1.5; }
.pcpre-card__label strong { color:#111827; font-weight:700; }

/* RESPONSIVE Pre Assessment — SAMA PATTERN DENGAN MAIN AI TOURISM HUB TABS */
@media (max-width: 1180px) {
    .pcpre-tabs { left: auto; transform: none; }
}
@media (max-width: 780px) {
    .pcpre-toolbar { flex-direction:column; align-items:flex-start; }
    .pcpre-toolbar__right { width:100%; justify-content:space-between; }
    .pcpre-preview { flex:1; }
}
@media (max-width: 600px) {
    .pcpre-tabs { flex-wrap: wrap; border-radius: 18px; left: auto; transform: none; width: 100%; }
}

/* ================================================================
   PCPRV — PRE ASSESSMENT PREVIEW QUIZ (Next screen from Preview Quiz btn)
   Prefix: pcprv-* | Last updated: 2026-08-16
   ================================================================ */

/* Top Back button (arrow + Back) */
.pcprv-back {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 34px; padding: 0 13px;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
    color: #475569; font-size: 12.5px; font-weight: 600;
    text-decoration: none; font-family: var(--font-sans);
    cursor: pointer; transition: all 0.15s;
    box-shadow: 0 1px 3px rgba(15,23,42,0.04);
}
.pcprv-back:hover { background:#f8fafc; border-color:#cbd5e1; color:#0f172a; }
.pcprv-back__chev { color: #64748b; display: inline-flex; align-items:center; }

/* ====== 2-COL GRID: Questions Left | Quiz Nav Right ====== */
.pcprv-grid {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 18px;
    align-items: start;
}
.pcprv-left { display: flex; flex-direction: column; gap: 14px; }
.pcprv-right { position: sticky; top: 12px; }

/* ====== QUESTION CARD (each MCQ question) ====== */
.pcprv-q {
    display: grid;
    grid-template-columns: 140px 1fr;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(15,23,42,0.04);
}
.pcprv-q__meta {
    padding: 18px 16px;
    background: linear-gradient(180deg,#fafbff,#f4f7ff);
    border-right: 1px solid #eef2ff;
}
.pcprv-q__num {
    font-size: 14.5px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 12px;
    letter-spacing: -0.2px;
}
.pcprv-q__stats { display: flex; flex-direction: column; gap: 5px; }
.pcprv-q__status {
    font-size: 11.3px;
    color: #6366f1;
    font-weight: 700;
    letter-spacing: 0.1px;
}
.pcprv-q__mark {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
}

.pcprv-q__body {
    padding: 18px 20px 16px;
    background: linear-gradient(180deg,#eff6ff,#eef5ff);
}
.pcprv-q__text {
    font-size: 13px;
    color: #1e293b;
    font-weight: 500;
    line-height: 1.55;
    margin-bottom: 14px;
}

/* Radio options */
.pcprv-q__options {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 18px;
}
.pcprv-opt {
    display: flex; align-items: center; gap: 8px;
    min-height: 26px;
    padding: 0 4px;
    cursor: pointer;
    font-family: var(--font-sans);
    user-select: none;
}
.pcprv-opt input[type="radio"] {
    display: none;
}
.pcprv-opt__dot {
    width: 13px; height: 13px;
    border-radius: 999px;
    border: 1.5px solid #94a3b8;
    background: #fff;
    flex-shrink: 0;
    transition: all 0.15s;
    box-shadow: inset 0 0 0 2px #fff;
}
.pcprv-opt__label {
    font-size: 12.5px;
    color: #334155;
    font-weight: 500;
}
.pcprv-opt:hover .pcprv-opt__dot {
    border-color: #6366f1;
}
.pcprv-opt input[type="radio"]:checked ~ .pcprv-opt__dot {
    background: #3b82f6;
    border-color: #2563eb;
    box-shadow: inset 0 0 0 3px #fff, 0 0 0 2px rgba(59,130,246,0.25);
}
.pcprv-opt input[type="radio"]:checked ~ .pcprv-opt__label {
    color: #1d4ed8;
    font-weight: 600;
}

/* Actions bar bawah setiap soalan: Flag / Edit / v1 badge */
.pcprv-q__actions {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.pcprv-qbtn {
    display: inline-flex; align-items: center; gap: 5px;
    min-height: 28px; padding: 0 10px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    color: #4b5563;
    font-size: 11.3px;
    font-weight: 600;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all 0.15s;
}
.pcprv-qbtn:hover { background:#f3f4f6; color:#111827; border-color:#9ca3af; }
.pcprv-qbadge {
    display: inline-flex; align-items: center;
    min-height: 22px; padding: 0 10px;
    background: linear-gradient(135deg,#3b82f6,#2563eb);
    color: #fff;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.15px;
    box-shadow: 0 2px 6px rgba(59,130,246,0.35);
}

/* ====== QUIZ NAVIGATION SIDEBAR UNGU (RIGHT COLUMN) ====== */
.pcprv-nav {
    background: linear-gradient(160deg,#4338ca 0%,#3730a3 60%,#312e81 100%);
    border-radius: 12px;
    padding: 18px 16px;
    color: #fff;
    box-shadow: 0 8px 22px -6px rgba(67,56,202,0.55), inset 0 1px 0 rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.12);
}
.pcprv-nav__title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.25px;
    margin-bottom: 14px;
}
.pcprv-nav__grid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 7px;
    margin-bottom: 16px;
}
.pcprv-navbtn {
    position: relative;
    min-height: 52px;
    background: rgba(255,255,255,0.98);
    color: #1e1b4b;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    font-family: var(--font-sans);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding-top: 6px;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 5px rgba(15,23,42,0.25);
}
.pcprv-navbtn:hover { transform: translateY(-2px); box-shadow: 0 5px 12px rgba(15,23,42,0.35); }
.pcprv-navbtn__num {
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.3px;
}
.pcprv-navbtn__check {
    color: #10b981;
    opacity: 0.92;
}
.pcprv-nav__label {
    font-size: 11.5px;
    color: rgba(224,231,255,0.92);
    font-weight: 600;
    margin: 10px 0 12px;
    letter-spacing: 0.1px;
}
.pcprv-navbtnstart {
    width: 100%;
    min-height: 38px;
    background: linear-gradient(135deg,#10b981,#059669);
    color: #fff;
    border: 0;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 800;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 0.2px;
    box-shadow: 0 4px 12px rgba(16,185,129,0.45);
}
.pcprv-navbtnstart:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16,185,129,0.55); }

/* ====== FINISH ATTEMPT FULL WIDTH BUTTON ====== */
.pcprv-finish {
    width: 100%;
    min-height: 42px;
    background: linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);
    color: #fff;
    border: 0;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 800;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 0.25px;
    box-shadow: 0 6px 16px rgba(59,130,246,0.42);
}
.pcprv-finish:hover { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(59,130,246,0.55); }

/* RESPONSIVE Preview Quiz */
@media (max-width: 1020px) {
    .pcprv-grid { grid-template-columns: 1fr; }
    .pcprv-right { position: static; }
    .pcprv-q { grid-template-columns: 1fr; }
    .pcprv-q__meta {
        border-right: 0;
        border-bottom: 1px solid #eef2ff;
        display: flex; justify-content: space-between; align-items: center;
        padding: 14px 16px;
    }
    .pcprv-q__num { margin: 0; }
    .pcprv-q__stats { flex-direction: row; gap: 14px; }
}
@media (max-width: 600px) {
    .pcprv-q__meta { flex-direction: column; align-items: flex-start; gap: 6px; }
    .pcprv-nav__grid { grid-template-columns: repeat(5,1fr); gap: 5px; }
    .pcprv-navbtn { min-height: 46px; }
    .pcprv-q__body { padding: 14px 15px; }
}

/* ================================================================
   PCPSUM — PRE ASSESSMENT SUMMARY OF ATTEMPT (Next screen after Finish Attempt)
   Prefix: pcpsum-* | Last updated: 2026-08-16
   ================================================================ */

/* Summary Card (White bordered container) */
.pcpsum-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15,23,42,0.04);
}

/* Card Header: Pre Assessment title + sub */
.pcpsum-head {
    padding: 18px 22px;
    border-bottom: 1px solid #eef0f4;
    background: #fff;
}
.pcpsum-head__title {
    font-size: 20px;
    font-weight: 800;
    color: #1f2937;
    letter-spacing: -0.35px;
    line-height: 1.15;
    margin-bottom: 4px;
}
.pcpsum-head__sub {
    font-size: 13px;
    color: #4b5563;
    font-weight: 500;
}

/* Summary Table: 2 columns — Question (blue link underline) | Status */
.pcpsum-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-sans);
}
.pcpsum-table thead {
    background: linear-gradient(180deg,#f3f4f6,#eef0f4);
}
.pcpsum-th {
    text-align: left;
    padding: 12px 22px;
    font-size: 12px;
    font-weight: 800;
    color: #1f2937;
    letter-spacing: 0.1px;
    border-bottom: 1px solid #e5e7eb;
}
.pcpsum-th--status {
    text-align: left;
}
.pcpsum-tr {
    transition: background 0.12s ease;
}
.pcpsum-tr:hover {
    background: #fafbfc;
}
.pcpsum-tr + .pcpsum-tr td {
    border-top: 1px solid #f1f3f6;
}
.pcpsum-td {
    padding: 14px 22px;
    font-size: 13.5px;
    color: #1f2937;
    vertical-align: middle;
}
.pcpsum-qlink {
    font-weight: 700;
    color: #2563eb;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.15s;
}
.pcpsum-qlink:hover {
    color: #1d4ed8;
}
.pcpsum-td--status {
    color: #1f2937;
    font-weight: 500;
    font-size: 13.5px;
}

/* Submit All & Finish Full Width Button */
.pcpsum-submit {
    width: 100%;
    min-height: 48px;
    background: linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);
    color: #fff;
    border: 0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 800;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 0.25px;
    box-shadow: 0 6px 18px rgba(37,99,235,0.42);
    margin-top: 4px;
}
.pcpsum-submit:hover { transform: translateY(-1px); box-shadow: 0 9px 26px rgba(37,99,235,0.55); }

/* RESPONSIVE Summary attempt */
@media (max-width: 780px) {
    .pcpsum-head { padding: 15px 17px; }
    .pcpsum-head__title { font-size: 17px; }
    .pcpsum-th { padding: 10px 17px; }
    .pcpsum-td { padding: 12px 17px; }
    .pcpsum-submit { min-height: 44px; font-size: 13px; }
}

/* ================================================================
   PCPRW — PRE ASSESSMENT ATTEMPT REVIEW (After Submit All & Finish)
   Prefix: pcprw-* | Last updated: 2026-08-16
   ================================================================ */

/* ====== TOP 5 STAT CARDS GRID ====== */
.pcprw-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1.3fr;
    gap: 10px;
    margin-bottom: 14px;
}
.pcprw-stat {
    background: linear-gradient(180deg,#fafbff,#f4f7ff);
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: center;
    min-height: 92px;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(15,23,42,0.05);
    border-top: 3px solid #6366f1;
}
.pcprw-stat__sub {
    font-size: 10.3px;
    color: #6b7280;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: auto;
    padding-top: 4px;
}

/* Card 1 — Status Finished (biru text) */
.pcprw-stat--status { border-top-color: #3b82f6; }
.pcprw-stat__title {
    font-size: 16.5px;
    font-weight: 800;
    color: #3b82f6;
    letter-spacing: -0.15px;
}

/* Card 2-3 — Date + Time (Started / Completed) */
.pcprw-stat__date {
    font-size: 12.5px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.25;
}
.pcprw-stat__time {
    font-size: 14px;
    font-weight: 800;
    color: #111827;
    letter-spacing: -0.15px;
}

/* Card 4 — Duration */
.pcprw-stat__dur {
    font-size: 14.5px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.15px;
}

/* Card 5 — Marks / Grade */
.pcprw-stat--marks { border-top-color: #059669; gap: 2px; padding: 14px; }
.pcprw-stat__marksnum {
    font-size: 26px;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -0.7px;
    line-height: 1;
}
.pcprw-stat__sub--marks {
    margin-top: 2px; padding-top: 0;
}
.pcprw-stat__grade {
    font-size: 13px;
    font-weight: 800;
    color: #111827;
    letter-spacing: -0.05px;
    margin-top: 2px;
}

/* ====== Q1 INCORRECT FEEDBACK BAND (bawah Q1 actions) ====== */
.pcprw-feedback {
    margin-top: 16px;
    background: linear-gradient(180deg,#fffbeb,#fff7d6);
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 10px 13px 11px;
}
.pcprw-feedback__incorrect {
    font-size: 11.3px;
    font-weight: 800;
    color: #b45309;
    margin-bottom: 3px;
    letter-spacing: 0.1px;
}
.pcprw-feedback__correct {
    font-size: 11.5px;
    font-weight: 500;
    color: #713f12;
}

/* ====== FINISH REVIEW BUTTON ====== */
.pcprw-finish {
    width: 100%;
    min-height: 40px;
    background: linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);
    color: #fff;
    border: 0;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 800;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 0.2px;
    box-shadow: 0 6px 16px rgba(59,130,246,0.42);
}
.pcprw-finish:hover { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(59,130,246,0.55); }

/* ====== RESPONSIVE Review ====== */
@media (max-width: 1180px) {
    .pcprw-stats { grid-template-columns: 1fr 1fr 1fr; }
    .pcprw-stat--marks { grid-column: span 3; }
}
@media (max-width: 780px) {
    .pcprw-stats { grid-template-columns: 1fr 1fr; }
    .pcprw-stat--marks { grid-column: span 2; }
    .pcprw-feedback { padding: 9px 11px; }
}
@media (max-width: 540px) {
    .pcprw-stats { grid-template-columns: 1fr; }
    .pcprw-stat--marks { grid-column: span 1; }
}

/* ================================================================ PCDSET — SETTINGS DESIGN UI OVERRIDE (checkbox hijau + buttons glow biru tebal — STANDARD SIZE ikut AI Tourism Hub Settings, tak oversize! Last updated: 2026-08-16 ================================================================ */

/* Checkbox hijau (class pcdset-chk: STANDARD SIZE 22px square hijau + ✔ putih + glow hijau — sama standard AI Tourism Hub Settings size) */
.pcdset-chk {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    padding-left: 6px;
}
.pcdset-chk__box {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.pcdset-chk__mark {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: linear-gradient(145deg, #10b981 0%, #059669 100%);
    border: 1.4px solid #047857;
    box-shadow:
        0 3px 10px -4px rgba(16,185,129,0.55),
        inset 0 1px 0 rgba(255,255,255,0.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    transition: all 0.2s ease;
}
.pcdset-chk__mark::after {
    content: '';
    display: block;
    width: 11px;
    height: 6px;
    border-left: 2.4px solid #ffffff;
    border-bottom: 2.4px solid #ffffff;
    transform: rotate(-45deg) translate(0px, -1px);
    border-radius: 1.2px;
    filter: drop-shadow(0 1px 1px rgba(4,120,87,0.5));
}
.pcdset-chk__box:not(:checked) + .pcdset-chk__mark {
    background: #e5e7eb;
    border-color: #d1d5db;
    box-shadow: none;
}
.pcdset-chk__box:not(:checked) + .pcdset-chk__mark::after {
    display: none;
}
.pcdset-chk__label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    color: #1f2937;
    letter-spacing: -0.08px;
}

/* Buttons footer Settings — STANDARD SIZE (sama AI Tourism Hub Settings) — radius 9px + min-height 44px + shadow glow BIRU TEBAL standard */
.pcdset-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 22px;
    padding: 6px 8px 10px;
    flex-wrap: wrap;
}
.pcdset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 24px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 650;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    letter-spacing: -0.08px;
    line-height: 1.1;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1.3px solid transparent;
    text-decoration: none;
}
/* Cancel abu-abu standard size */
.pcdset-btn--cancel {
    background: linear-gradient(180deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #1f2937;
    border-color: #d1d5db;
    box-shadow: 0 4px 10px -5px rgba(0,0,0,0.18);
}
.pcdset-btn--cancel:hover {
    background: linear-gradient(180deg, #e5e7eb 0%, #d1d5db 100%);
    transform: translateY(-1px);
    box-shadow: 0 7px 14px -7px rgba(0,0,0,0.28);
}
/* Save & Return to course (BIRU PRIMARY — standard size + GLOW BIRU TEBAL BAWAH) */
.pcdset-btn--save {
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    border-color: #1d4ed8;
    box-shadow:
        0 7px 18px -6px rgba(37,99,235,0.62),
        0 3px 8px -3px rgba(29,78,216,0.52),
        inset 0 1px 0 rgba(255,255,255,0.28);
}
.pcdset-btn--save:hover {
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-1.5px);
    box-shadow:
        0 10px 22px -6px rgba(37,99,235,0.72),
        0 6px 14px -5px rgba(29,78,216,0.58),
        inset 0 1px 0 rgba(255,255,255,0.32);
}
/* Save & Display (BIRU DALAM — standard size + GLOW BIRU LEBIH TEBAL) */
.pcdset-btn--blue {
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff;
    border-color: #1e40af;
    box-shadow:
        0 7px 18px -6px rgba(29,78,216,0.68),
        0 3px 8px -3px rgba(30,64,175,0.55),
        inset 0 1px 0 rgba(255,255,255,0.25);
}
.pcdset-btn--blue:hover {
    background: linear-gradient(180deg, #1d4ed8 0%, #1e40af 100%);
    transform: translateY(-1.5px);
    box-shadow:
        0 10px 22px -6px rgba(29,78,216,0.78),
        0 6px 14px -5px rgba(30,64,175,0.62),
        inset 0 1px 0 rgba(255,255,255,0.3);
}

/* ================================================================ PCPREQ — PRE ASSESSMENT QUESTIONS TAB STYLES (standard UI, size sama dengan pattern skrin lain) ================================================================ */
.pcpreq-card {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 10px -3px rgba(17,24,39,0.06);
    padding: 20px 22px 22px;
    margin-top: 16px;
}
.pcpreq-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 12px;
}
.pcpreq-head__title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.3px;
}
.pcpreq-head__sel {
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 8px 32px 8px 14px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    color: #1f2937;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    min-width: 140px;
}
.pcpreq-head__sel:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}

/* WARNING BAND PINK SALMON (ikut gambar user) */
.pcpreq-warn {
    background: linear-gradient(180deg, #fff1f2 0%, #ffe4e6 100%);
    color: #881337;
    border: 1px solid #fecdd3;
    border-radius: 9px;
    padding: 12px 16px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.45;
    margin-bottom: 16px;
}
.pcpreq-warn__link {
    color: #9f1239;
    text-decoration: underline;
    font-weight: 600;
}
.pcpreq-warn__link:hover { color: #831843; }

/* STATS BARIS 2 KOLOM KIRI KANAN */
.pcpreq-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.pcpreq-stats__left {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 13.5px;
    color: #1f2937;
    font-weight: 500;
}
.pcpreq-stats__left strong { color: #111827; font-weight: 700; font-size: 14px; }
.pcpreq-stats__right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.pcpreq-stats__label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: #111827;
}
.pcpreq-stats__input {
    width: 90px;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #f9fafb;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: #111827;
    text-align: right;
}
.pcpreq-stats__input:focus {
    outline: none;
    background: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.14);
}

/* SAVE BUTTON — standard size biru primer, glow biru tebal bawah (sama pattern Save & Return settings) */
.pcpreq-savebtn {
    min-height: 40px;
    padding: 7px 22px;
    border-radius: 9px;
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    border: 1.3px solid #1d4ed8;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.05px;
    cursor: pointer;
    box-shadow:
        0 7px 16px -6px rgba(37,99,235,0.6),
        0 3px 7px -3px rgba(29,78,216,0.5),
        inset 0 1px 0 rgba(255,255,255,0.28);
    transition: all 0.2s ease;
}
.pcpreq-savebtn:hover {
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-1.2px);
    box-shadow:
        0 10px 20px -6px rgba(37,99,235,0.7),
        0 6px 13px -5px rgba(29,78,216,0.58),
        inset 0 1px 0 rgba(255,255,255,0.32);
}

/* SECONDARY LINE — Repaginate / Select multiple items + Total marks */
.pcpreq-secline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.pcpreq-secline__left { display: flex; gap: 10px; flex-wrap: wrap; }
.pcpreq-secbtn {
    min-height: 40px;
    padding: 7px 18px;
    border-radius: 8px;
    background: linear-gradient(180deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #374151;
    border: 1px solid #d1d5db;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 3px 8px -5px rgba(0,0,0,0.18);
    transition: all 0.2s ease;
}
.pcpreq-secbtn:hover {
    background: linear-gradient(180deg, #e5e7eb 0%, #d1d5db 100%);
    transform: translateY(-0.8px);
    box-shadow: 0 6px 12px -7px rgba(0,0,0,0.28);
}
.pcpreq-secline__right {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 13.5px;
    color: #1f2937;
    font-weight: 500;
}
.pcpreq-secline__right strong { color: #111827; font-weight: 700; font-size: 14px; }

/* PAGE HEADING */
.pcpreq-page {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 12px;
    letter-spacing: -0.05px;
}

/* 5 SOALAN ROWS CONTAINER */
.pcpreq-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pcpreq-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 11px 14px;
    flex-wrap: wrap;
    transition: all 0.18s ease;
}
.pcpreq-row:hover {
    border-color: #d1d5db;
    box-shadow: 0 4px 11px -6px rgba(17,24,39,0.12);
}
.pcpreq-row__left {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: 1;
    min-width: 300px;
}
.pcpreq-row__edit {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(145deg, #dbeafe 0%, #bfdbfe 100%);
    border: 1px solid #93c5fd;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
    transition: all 0.2s ease;
}
.pcpreq-row__edit:hover {
    background: linear-gradient(145deg, #bfdbfe 0%, #93c5fd 100%);
    color: #1e40af;
    transform: translateY(-1px);
}
.pcpreq-row__txt {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 13.5px;
    color: #1f2937;
    line-height: 1.45;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pcpreq-row__txt strong {
    color: #111827;
    font-weight: 700;
    margin-right: 2px;
}
.pcpreq-row__right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.pcpreq-row__versel {
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 7px 30px 7px 11px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    color: #1f2937;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}
.pcpreq-row__versel:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.pcpreq-row__eye {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    color: #6b7280;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.pcpreq-row__eye:hover {
    background: #eff6ff;
    color: #2563eb;
    border-color: #93c5fd;
}
.pcpreq-row__marks {
    width: 82px;
    padding: 7px 11px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #f9fafb;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    text-align: right;
}
.pcpreq-row__marks:focus {
    outline: none;
    background: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}

/* ====== RESPONSIVE Questions ====== */
@media (max-width: 780px) {
    .pcpreq-card { padding: 16px 14px 18px; }
    .pcpreq-head__title { font-size: 17px; }
    .pcpreq-stats__right { width: 100%; justify-content: flex-start; }
    .pcpreq-row__left { min-width: 100%; }
}

/* ================================================================ PCPREQ GRADE ITEMS SETUP VIEW (dropdown kanan pilih Grade items setup — IKUT GAMBAR USER) ================================================================ */

/* Green band info lemon (ikut gambar: bg hijau lemon lembut, text gelap) */
.pcpreq-ginfo {
    background: linear-gradient(180deg, #f7fee7 0%, #ecfccb 100%);
    color: #365314;
    border: 1px solid #bef264;
    border-radius: 9px;
    padding: 13px 18px 13px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 14px;
}

/* Add grade Item BUTTON — disabled abu gelap (IKUT GAMBAR USER — disabled style grey) */
.pcpreq-addgi {
    min-height: 42px;
    padding: 8px 22px;
    border-radius: 8px;
    background: linear-gradient(180deg, #e5e7eb 0%, #d1d5db 100%);
    color: #6b7280;
    border: 1px solid #cbd5e1;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    cursor: not-allowed;
    opacity: 0.9;
    box-shadow: 0 3px 8px -5px rgba(0,0,0,0.15);
}

/* Heading Assign grade items */
.pcpreq-assignhead {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.05px;
    margin-bottom: 18px;
}

/* Grid 3 column: Question | Marks | Grade Item — IKUT TABLE STRUCTURE GAMBAR USER */
.pcpreq-assigngrid {
    display: grid;
    grid-template-columns: minmax(250px, 1fr) 90px 200px;
    gap: 12px 14px;
    align-items: center;
}
.pcpreq-assigngrid__hdr {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    color: #111827;
    padding: 0 8px 10px;
    letter-spacing: -0.05px;
    border-bottom: 1.5px solid #e5e7eb;
    margin-bottom: 6px;
}
.pcpreq-assigngrid__hdr--marks { text-align: center; }
.pcpreq-assigngrid__hdr--gradeitem { text-align: left; }

/* Row cells: Question (reuse icon edit sama dengan list Questions) */
.pcpreq-assignrow__q {
    display: flex;
    align-items: center;
    gap: 11px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 11px 14px;
    transition: all 0.18s ease;
}
.pcpreq-assignrow__q:hover { border-color: #d1d5db; box-shadow: 0 4px 11px -6px rgba(17,24,39,0.12); }
.pcpreq-assignrow__txt {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 13.5px;
    color: #1f2937;
    line-height: 1.45;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pcpreq-assignrow__txt strong { color: #111827; font-weight: 700; margin-right: 2px; }

/* Marks column center cell */
.pcpreq-assignrow__marks {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 11px 0;
    text-align: center;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.05px;
}

/* Grade Item dropdown column None default */
.pcpreq-assignrow__gradeitem {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 7px 10px;
    transition: all 0.18s ease;
}
.pcpreq-assignrow__gradeitem:hover { border-color: #d1d5db; }
.pcpreq-gisel {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 7px 30px 7px 11px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #1f2937;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}
.pcpreq-gisel:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}

/* ====== RESPONSIVE Grade items setup ====== */
@media (max-width: 980px) {
    .pcpreq-assigngrid { grid-template-columns: minmax(200px, 1fr) 80px 160px; }
}
@media (max-width: 780px) {
    .pcpreq-assigngrid { grid-template-columns: 1fr; gap: 10px; }
    .pcpreq-assigngrid__hdr { display: none; }
    .pcpreq-assigngrid__hdr + * { margin-top: 0 !important; }
    .pcpreq-assignrow__q,
    .pcpreq-assignrow__marks,
    .pcpreq-assignrow__gradeitem { margin-bottom: 2px; }
    .pcpreq-assignrow__marks { text-align: left; padding-left: 14px; }
    .pcpreq-ginfo { padding: 11px 14px; font-size: 12.5px; }
}

/* ================================================================ PCPR — PRE ASSESSMENT RESULTS PAGE STYLES (UI design style follow sistem kita — accordion biru bulat, table, status, marks red/green, download button biru glow) ================================================================ */
.pcpr-card {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 10px -3px rgba(17,24,39,0.06);
    padding: 20px 22px 24px;
    margin-top: 16px;
}
.pcpr-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.pcpr-head__title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.3px;
}
.pcpr-head__sel {
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 8px 32px 8px 14px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    color: #1f2937;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    min-width: 140px;
}
.pcpr-head__sel:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.14);
}

/* 2 ACCORDIONS RESULTS: What to include / Display Options (circle bulat biru + chevron kanan IKUT GAMBAR USER) */
.pcpr-acc {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
    margin-bottom: 10px;
    overflow: hidden;
    transition: all 0.18s ease;
}
.pcpr-acc:hover { border-color: #d1d5db; box-shadow: 0 3px 10px -6px rgba(17,24,39,0.1); }
.pcpr-acc__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    user-select: none;
}
.pcpr-acc__chev {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(145deg, #dbeafe 0%, #bfdbfe 100%);
    border: 1px solid #93c5fd;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}
.pcpr-acc--open .pcpr-acc__chev {
    background: linear-gradient(145deg, #bfdbfe 0%, #93c5fd 100%);
    color: #1e40af;
}
.pcpr-acc__name {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: #111827;
    letter-spacing: -0.05px;
}

/* Description text bawah accordions */
.pcpr-desc {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    line-height: 1.55;
    margin: 12px 0 16px;
    padding: 0 4px;
}
.pcpr-desc strong { color: #111827; font-weight: 700; }

/* FILTERS ROW KIRI (First name All + Search) + KANAN (Export + Download) */
.pcpr-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.pcpr-filters__left,
.pcpr-filters__right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.pcpr-filters__fname,
.pcpr-filters__export {
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 8px 32px 8px 13px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #1f2937;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}
.pcpr-filters__search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 6px 12px;
    width: 360px;
    max-width: 100%;
    transition: all 0.18s ease;
}
.pcpr-filters__search:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.pcpr-filters__searchic { color: #9ca3af; display: inline-flex; }
.pcpr-filters__searchinput {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: 3px 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 13.5px;
    color: #111827;
    font-weight: 500;
}
.pcpr-filters__searchinput::placeholder { color: #6b7280; }

/* Download button biru primary glow tebal bawah (sama pattern save settings standard) */
.pcpr-downloadbtn {
    min-height: 40px;
    padding: 7px 22px;
    border-radius: 9px;
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    border: 1.3px solid #1d4ed8;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.05px;
    cursor: pointer;
    box-shadow:
        0 7px 16px -6px rgba(37,99,235,0.6),
        0 3px 7px -3px rgba(29,78,216,0.5),
        inset 0 1px 0 rgba(255,255,255,0.28);
    transition: all 0.2s ease;
}
.pcpr-downloadbtn:hover {
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-1.2px);
    box-shadow:
        0 10px 20px -6px rgba(37,99,235,0.7),
        0 6px 13px -5px rgba(29,78,216,0.58),
        inset 0 1px 0 rgba(255,255,255,0.32);
}

/* TABLE RESULTS WRAPPER overflow-x auto + border luar */
.pcpr-tablewrap {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow-x: auto;
    background: #ffffff;
}
.pcpr-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1100px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
}
.pcpr-table thead th {
    text-align: left;
    padding: 13px 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.05px;
    border-bottom: 1.5px solid #e5e7eb;
    background: linear-gradient(180deg, #fafafa 0%, #f4f4f5 100%);
    line-height: 1.35;
    white-space: nowrap;
}
.pcpr-table thead th span {
    color: #6b7280;
    font-weight: 500;
}
.pcpr-table tbody td {
    padding: 15px 14px;
    font-size: 13px;
    color: #1f2937;
    font-weight: 500;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
    line-height: 1.45;
    white-space: nowrap;
}
.pcpr-table tbody tr:last-child td { border-bottom: none; }
.pcpr-table tbody tr:hover { background: #fafbff; }

/* Checkbox bulat check mark dalam table header + row (style custom) */
.pcpr-chk {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: linear-gradient(145deg, #d1d5db 0%, #9ca3af 100%);
    border: 1px solid #6b7280;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}
.pcpr-chk--unchecked {
    background: #ffffff;
    border: 1.3px solid #d1d5db;
    color: transparent;
}

/* Nama + email column styles */
.pcpr-td--name { font-weight: 650; color: #111827; }
.pcpr-td--email { color: #374151; font-weight: 500; font-size: 12.5px; line-height: 1.4; }
.pcpr-td--time { color: #6b7280; font-size: 12.5px; }
.pcpr-td--dur { font-weight: 600; color: #111827; }
.pcpr-td--grade { font-weight: 800; color: #111827; font-size: 14px; }

/* Status Finished (hijau badge) */
.pcpr-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.02px;
    line-height: 1.2;
}
.pcpr-status--finished {
    background: linear-gradient(180deg, #dcfce7 0%, #bbf7d0 100%);
    color: #166534;
    border: 1px solid #86efac;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
.pcpr-status--finished::before {
    content:'';
    width:7px;height:7px;border-radius:50%;
    background:#22c55e;
    box-shadow:0 0 0 2px rgba(34,197,94,0.2);
}

/* Th column center align untuk marks column */
.pcpr-th--grade,
.pcpr-th--q {
    text-align: center !important;
}
.pcpr-td--q {
    text-align: center;
    font-weight: 750;
    font-size: 13.5px;
    letter-spacing: -0.05px;
}
.pcpr-td--q--green {
    color: #059669;
}
.pcpr-td--q--red {
    color: #ef4444;
}

/* ====== RESPONSIVE Results ====== */
@media (max-width: 780px) {
    .pcpr-card { padding: 16px 14px 18px; }
    .pcpr-head__title { font-size: 17px; }
    .pcpr-filters__search { width: 100%; }
    .pcpr-desc { font-size: 12.5px; padding: 0; }
    .pcpr-acc__head { padding: 10px 12px; }
    .pcpr-acc__chev { width: 24px; height: 24px; }
}

/* ================================================================ PCQB — PRE ASSESSMENT QUESTION BANK TABLE STYLES (13 columns, overlay on top pcpart-tbl — maintain our design sistem Participants UI pattern) ================================================================ */

/* Question Bank column header (thead) cells — 2 line text line header title + sort arrow/warning/info icons */
.pcqb-th {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12.5px;
    font-weight: 600;
    color: #111827;
    letter-spacing: -0.02px;
    line-height: 1.3;
}
.pcqb-th__warn {
    color: #6b7280;
    display: inline-flex;
    align-items: center;
}
.pcqb-th__sort {
    color: #9ca3af;
    display: inline-flex;
    align-items: center;
}
.pcqb-th__info {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #4b5563;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    flex-shrink: 0;
}
.pcqb-th__sub {
    display: block;
    font-size: 11.5px;
    color: #6b7280;
    font-weight: 500;
    margin-top: 4px;
    line-height: 1.3;
    padding-left: 1px;
}
.pcqb-th__sub strong { color: #9ca3af; margin: 0 3px; font-weight: 500; }
.pcqb-th__subic {
    color: #9ca3af;
    margin-right: 3px;
    display: inline-flex;
    vertical-align: -1px;
}

/* Question cell per-row: drag handle + name + pen edit icon */
.pcqb-qcell {
    display: flex;
    align-items: center;
    gap: 9px;
}
.pcqb-qcell__drag {
    color: #9ca3af;
    display: inline-flex;
    align-items: center;
    cursor: grab;
    flex-shrink: 0;
    padding: 2px;
    border-radius: 4px;
    transition: all 0.15s ease;
}
.pcqb-qcell__drag:hover {
    color: #2563eb;
    background: #eff6ff;
}
.pcqb-qcell__name {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: #1f2937;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.pcqb-qcell__name:hover { color: #2563eb; text-decoration: underline; }
.pcqb-qcell__pen {
    color: #9ca3af;
    display: inline-flex;
    align-items: center;
}

/* Action dropdown & Status dropdown per row custom style */
.pcqb-actionddl,
.pcqb-statusddl {
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 5px 26px 5px 10px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    transition: all 0.18s ease;
    color: #1f2937;
}
.pcqb-actionddl { color: #2563eb; font-weight: 650; border-color: #bfdbfe; background-color: #f8faff; }
.pcqb-actionddl:hover { border-color: #93c5fd; box-shadow: 0 2px 6px -2px rgba(37,99,235,0.25); }
/* Status Ready dropdown hijau */
.pcqb-statusddl--ready {
    background-color: #f0fdf4 !important;
    border-color: #86efac !important;
    color: #166534 !important;
    font-weight: 700 !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23166534' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}
.pcqb-statusddl--ready:hover { box-shadow: 0 3px 8px -4px rgba(22,163,74,0.4); }

/* Version per row text */
.pcqb-version {
    font-family: 'JetBrains Mono', '.SF Mono', 'SF Mono', Menlo, Consolas, 'Liberation Mono', Monaco, 'Courier New', ui-monospace, monospace;
    font-size: 12.5px;
    font-weight: 700;
    color: #111827;
}

/* Userline + dateline untuk Created by & Modified by column */
.pcqb-userline {
    display: block;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
}
.pcqb-dateline {
    display: block;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
    line-height: 1.3;
    margin-top: 2px;
}

/* Comment count 0 */
.pcqb-comcount {
    display: inline-block;
    font-family: 'JetBrains Mono', '.SF Mono', 'SF Mono', Menlo, Consolas, 'Liberation Mono', Monaco, 'Courier New', ui-monospace, monospace;
    font-size: 13px;
    font-weight: 700;
    color: #3b82f6;
    background: #eff6ff;
    border-radius: 999px;
    padding: 3px 10px;
    border: 1px solid #bfdbfe;
}

/* Chips needs checking? Unlikely green · grey muted */
.pcqb-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 999px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.02px;
}
.pcqb-chip--green {
    background: linear-gradient(180deg, #dcfce7 0%, #bbf7d0 100%);
    color: #166534;
    border: 1px solid #86efac;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
.pcqb-chip--grey {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
    font-weight: 600;
}

/* Fac Index / Discrim values (50.00% / 100.00% / N/A / 0.00% merah) */
.pcqb-val {
    display: inline-block;
    font-family: 'JetBrains Mono', '.SF Mono', 'SF Mono', Menlo, Consolas, 'Liberation Mono', Monaco, 'Courier New', ui-monospace, monospace;
    font-size: 13px;
    font-weight: 800;
    color: #059669;
    padding: 3px 10px;
    border-radius: 7px;
    background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #a7f3d0;
}
.pcqb-val--muted {
    color: #6b7280 !important;
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    font-weight: 600 !important;
}

/* Usage 1 badge — simple angka tebal */
.pcqb-usage {
    display: inline-flex;
    width: 28px; height: 28px;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #dbeafe 0%, #bfdbfe 100%);
    border: 1px solid #93c5fd;
    color: #1d4ed8;
    border-radius: 8px;
    font-family: 'JetBrains Mono', '.SF Mono', 'SF Mono', Menlo, Consolas, 'Liberation Mono', Monaco, 'Courier New', ui-monospace, monospace;
    font-weight: 800;
    font-size: 13px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}

/* Table padding sempit sikit sebab 13 columns banyak — row height compact */
.pcqb-tbl tbody td { padding: 13px 12px !important; font-size: 12.5px !important; }
.pcqb-tbl thead th { padding: 12px 12px !important; font-size: 12px !important; white-space: normal !important; }

/* ROW HOVER sedikit */
.pcqb-tbl tbody tr:hover td { background: #fafcff; }

/* ====== RESPONSIVE Question Bank ====== */
@media (max-width: 780px) {
    .pcqb-val { padding: 2px 7px; font-size: 11.5px; }
    .pcqb-usage { width: 26px; height: 26px; font-size: 12px; }
    .pcqb-statusddl--ready,
    .pcqb-actionddl { padding: 4px 22px 4px 8px; font-size: 11.5px; background-position: right 7px center; }
    .pcqb-dateline { font-size: 11.5px; }
}

/* ================================================================
   LCDASH — LECTURER TRAINER DASHBOARD 5 NEW HIGH/MEDIUM PANELS
   (At-Risk Students / Pending Tasks / Module Progress / AI Usage / Announcements)
   Pattern guna card radius 16px shadow lembut, border-left 4px color accent,
   maintain konsisten dengan design sistem PLAS.AI (Participants, Results UI).
=================================================================== */

.lcdash-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 20px;
    margin-top: 18px;
    padding: 0 24px;
}
.lcdash-col { display: flex; flex-direction: column; gap: 20px; }

/* Panel card */
.lcdash-panel {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #f1f5f9;
    box-shadow: 0 6px 18px -10px rgba(15,23,42,0.12), 0 1px 2px rgba(15,23,42,0.04);
    overflow: hidden;
    position: relative;
}
.lcdash-panel::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0; width: 4px;
    background: linear-gradient(180deg, #fb7185 0%, #f43f5e 100%); /* rose for first high prio by default override by inline styles per panel */
}

/* Panel header: icon + meta (title/priority/desc/view chips) */
.lcdash-panel__hd {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 18px 20px 15px 22px;
    background: linear-gradient(180deg, #fafbff 0%, #ffffff 100%);
    border-bottom: 1px solid #f1f5f9;
}
.lcdash-panel__ic {
    width: 46px; height: 46px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}
.lcdash-panel__meta { flex: 1; min-width: 0; }
.lcdash-panel__row1 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.lcdash-panel__title {
    font-family: 'Inter', sans-serif; font-size: 16.5px; font-weight: 800;
    letter-spacing: -0.02em; color: #0f172a;
}
.lcdash-panel__desc {
    font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.55;
    color: #475569; font-weight: 500; margin: 2px 0 9px;
}

/* Priority pill High / Medium */
.lcdash-prio {
    display: inline-flex; align-items: center; padding: 4px 10px;
    border-radius: 999px; font-size: 11px; font-weight: 800;
    letter-spacing: 0.02em; font-family: 'Inter', sans-serif;
    text-transform: uppercase;
}
.lcdash-prio--high {
    background: linear-gradient(180deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b; border: 1px solid #fca5a5;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
.lcdash-prio--med {
    background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e; border: 1px solid #fbbf24;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}

/* View chips Trainer/Admin/Manages/Sees */
.lcdash-views { display: flex; gap: 7px; flex-wrap: wrap; }
.lcdash-chip {
    display: inline-flex; align-items: center;
    padding: 3.5px 9px; border-radius: 7px;
    font-size: 11px; font-weight: 650;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.01em;
}
.lcdash-chip--trainer { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.lcdash-chip--admin { background: #faf5ff; color: #6d28d9; border: 1px solid #ddd6fe; }
.lcdash-chip--manage { background: #ecfeff; color: #0e7490; border: 1px solid #a5f3fc; }
.lcdash-chip--sees { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }

/* Panel body */
.lcdash-panel__body { padding: 18px 22px 22px; }

/* ============== PANEL 1: AT-RISK STUDENTS LIST ============== */
.lcdash-risk-list { display: flex; flex-direction: column; gap: 12px; }
.lcdash-risk {
    display: grid;
    grid-template-columns: 44px 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    background: #fbfcff;
    border: 1px solid #eef2ff;
    border-radius: 12px;
    transition: all 0.18s ease;
}
.lcdash-risk:hover {
    background: #f5f7ff;
    border-color: #c7d2fe;
    transform: translateY(-1px);
    box-shadow: 0 5px 14px -6px rgba(79,70,229,0.22);
}
/* Avatar colors gradient */
.lcdash-risk__av {
    width: 42px; height: 42px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    color: white; font-family: 'Inter', sans-serif; font-weight: 800; font-size: 13px;
    letter-spacing: 0.02em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}
.lcdash-risk__av--c1 { background: linear-gradient(145deg, #fb7185 0%, #e11d48 100%); border: 1px solid #e11d48; } /* CRIT Nur Aisyah + Siti */
.lcdash-risk__av--c2 { background: linear-gradient(145deg, #fb923c 0%, #ea580c 100%); border: 1px solid #ea580c; } /* Amir Daniel Weak orange */
.lcdash-risk__av--c3 { background: linear-gradient(145deg, #f59e0b 0%, #d97706 100%); border: 1px solid #d97706; } /* MI Weak kuning/oren */

.lcdash-risk__meta { min-width: 0; }
.lcdash-risk__name {
    font-family: 'Inter', sans-serif; font-size: 13.5px;
    font-weight: 750; color: #0f172a;
    margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lcdash-risk__sub {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-family: 'Inter', sans-serif; font-size: 12px;
    color: #64748b; font-weight: 500;
}
.lcdash-risk__sub span:nth-child(2) { color: #cbd5e1; }

/* Risk chips: Critical red · Weak orange */
.lcdash-risk__chip {
    display: inline-flex; align-items: center;
    padding: 5px 11px; border-radius: 999px;
    font-family: 'Inter', sans-serif; font-size: 11.5px;
    font-weight: 800; letter-spacing: 0.02em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
.lcdash-risk__chip--crit {
    background: linear-gradient(180deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b; border: 1px solid #fca5a5;
}
.lcdash-risk__chip--weak {
    background: linear-gradient(180deg, #ffedd5 0%, #fed7aa 100%);
    color: #9a3412; border: 1px solid #fdba74;
}

/* Action buttons Message / Nudge */
.lcdash-risk__actbtn {
    padding: 7px 13px;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 12px; font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
    white-space: nowrap;
}
.lcdash-risk__actbtn:nth-child(4) { /* Message (follow Critical buttons) = biru primer */
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    border-color: #1d4ed8;
    box-shadow: 0 5px 13px -5px rgba(37,99,235,0.62), inset 0 1px 0 rgba(255,255,255,0.28);
}
.lcdash-risk__actbtn:nth-child(4):hover { transform: translateY(-1px); box-shadow: 0 7px 16px -5px rgba(37,99,235,0.7), inset 0 1px 0 rgba(255,255,255,0.32); }
.lcdash-risk__actbtn + .lcdash-risk__actbtn, /* 2nd button (nudge) dalam row weak */
.lcdash-risk:has(.lcdash-risk__chip--weak) .lcdash-risk__actbtn:last-child { /* Weak -> Nudge amber/putih border outline */
    background: #ffffff;
    color: #92400e !important;
    border-color: #fbbf24 !important;
    box-shadow: 0 2px 6px -3px rgba(217,119,6,0.22), inset 0 1px 0 rgba(255,255,255,0.6) !important;
}
.lcdash-risk:has(.lcdash-risk__chip--weak) .lcdash-risk__actbtn:last-child:hover {
    background: #fffbeb !important; transform: translateY(-1px);
    box-shadow: 0 4px 10px -4px rgba(217,119,6,0.4), inset 0 1px 0 rgba(255,255,255,0.7) !important;
}

/* ============== PANEL 4: PENDING TASKS SUMMARY ============== */
.lcdash-pt-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.lcdash-pt-badge {
    background: #fafbff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 13px;
    display: flex; gap: 11px; align-items: center;
    transition: all 0.18s ease;
}
.lcdash-pt-badge:hover { transform: translateY(-1.5px); box-shadow: 0 7px 16px -7px rgba(15,23,42,0.22); }
.lcdash-pt-badge--g1 { border-color: #fecaca; background: linear-gradient(180deg, #fff5f5 0%, #ffe5e7 100%); }
.lcdash-pt-badge--g2 { border-color: #fde68a; background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%); }
.lcdash-pt-badge--g3 { border-color: #bfdbfe; background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%); }
.lcdash-pt-num {
    width: 42px; height: 42px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'JetBrains Mono', monospace; font-weight: 900; font-size: 17px;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
    color: white;
}
.lcdash-pt-num--r { background: linear-gradient(145deg, #ef4444 0%, #dc2626 100%); border: 1px solid #dc2626; } /* 23 Assignments merah */
.lcdash-pt-num--y { background: linear-gradient(145deg, #f59e0b 0%, #d97706 100%); border: 1px solid #d97706; color: #fff; } /* 18 QA kuning gelap */
.lcdash-pt-num--b { background: linear-gradient(145deg, #3b82f6 0%, #2563eb 100%); border: 1px solid #1d4ed8; } /* 5 Assessments biru */
.lcdash-pt-meta { min-width: 0; }
.lcdash-pt-title { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 13.5px; color: #0f172a; margin-bottom: 2px; }
.lcdash-pt-desc { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 12px; color: #64748b; }

/* Pending Tasks 3 rows list */
.lcdash-pt-list { display: flex; flex-direction: column; gap: 9px; }
.lcdash-pt-row {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 13px;
    background: #fbfcff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    transition: all 0.15s ease;
}
.lcdash-pt-row:hover { background: #f5f7ff; border-color: #c7d2fe; transform: translateX(2px); }
.lcdash-pt-row--rose { border-left: 4px solid #f43f5e; }
.lcdash-pt-row--blue { border-left: 4px solid #2563eb; }
.lcdash-pt-row__ic { display: inline-flex; flex-shrink: 0; }
.lcdash-pt-row__txt { flex: 1; min-width: 0; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13px; color: #1f2937; }
.lcdash-pt-row__time {
    font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 11.5px;
    padding: 3px 9px; border-radius: 999px; background: #f1f5f9; color: #475569;
    white-space: nowrap;
}

/* ============== PANEL 2: MODULE PROGRESS PER COHORT ============== */
.lcdash-modlist { display: flex; flex-direction: column; gap: 15px; }
.lcdash-mod { }
.lcdash-mod__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.lcdash-mod__name {
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700;
    color: #0f172a;
    display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.lcdash-mod__badge {
    display: inline-block; padding: 2.5px 8px; border-radius: 6px;
    font-size: 10.5px; font-weight: 800; letter-spacing: 0.03em;
    font-family: 'Inter', sans-serif;
    background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe;
}
.lcdash-mod__pct {
    font-family: 'JetBrains Mono', monospace; font-weight: 900; font-size: 14px; color: #2563eb;
}
.lcdash-mod__pct--hi { color: #059669 !important; }
.lcdash-mod__pct--mid { color: #d97706 !important; }
.lcdash-mod__pct--low { color: #dc2626 !important; }
.lcdash-mod__bar {
    height: 9px; border-radius: 999px; background: #f1f5f9; overflow: hidden;
    border: 1px solid #e2e8f0;
}
.lcdash-mod__fill {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #8b5cf6 0%, #6366f1 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}
.lcdash-mod__fill--v1 { background: linear-gradient(90deg, #10b981 0%, #059669 100%); } /* Module 1 Plaspedia HIJAU */
.lcdash-mod__fill--v2 { background: linear-gradient(90deg, #38bdf8 0%, #2563eb 100%); } /* Module 2 Tourism BIRU */
.lcdash-mod__fill--v3 { background: linear-gradient(90deg, #34d399 0%, #0d9488 100%); } /* Module 3 Automation EMERALD TEAL */
.lcdash-mod__fill--v4 { background: linear-gradient(90deg, #fbbf24 0%, #d97706 100%); } /* Module 4 IT Smart Office AMBER */
.lcdash-mod__fill--v5 { background: linear-gradient(90deg, #f97316 0%, #dc2626 100%); } /* Module 5 Content OREN-RED CRITICAL */
.lcdash-mod__fill--v6 { background: linear-gradient(90deg, #22d3ee 0%, #0891b2 100%); } /* Module 6 DIGI CYAN */

/* ============== PANEL 3: AI TOOLKIT USAGE STATS ============== */
.lcdash-ai-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-bottom: 18px; }
.lcdash-ai-card {
    background: linear-gradient(180deg, #ffffff 0%, #f8fffe 100%);
    border: 1px solid #ccfbf1; border-radius: 12px;
    padding: 14px 12px 13px; text-align: center;
    transition: all 0.18s ease;
}
.lcdash-ai-card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -8px rgba(20,184,166,0.38); }
.lcdash-ai-card__ic {
    width: 38px; height: 38px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, #ccfbf1 0%, #99f6e4 100%);
    color: #0f766e;
    margin: 0 auto 8px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
    border: 1px solid #5eead4;
}
.lcdash-ai-card__ic svg { width: 19px; height: 19px; stroke-width: 2; }
.lcdash-ai-card__val {
    font-family: 'JetBrains Mono', monospace; font-weight: 900;
    font-size: 20px; color: #0f172a;
    letter-spacing: -0.02em; margin-bottom: 3px;
}
.lcdash-ai-card__lbl {
    font-family: 'Inter', sans-serif; font-size: 11.5px;
    color: #475569; font-weight: 600;
}

/* Adoption rate 68% bar */
.lcdash-ai-bar {
    background: #f0fdfa; border: 1px solid #99f6e4; border-radius: 12px;
    padding: 14px 15px;
}
.lcdash-ai-bar__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.lcdash-ai-bar__lbl { font-family: 'Inter', sans-serif; font-weight: 650; font-size: 12.5px; color: #134e4a; }
.lcdash-ai-bar__pct {
    font-family: 'JetBrains Mono', monospace; font-weight: 900; font-size: 16px;
    color: #0d9488;
}
.lcdash-ai-bar__track { height: 11px; background: #ffffff; border: 1px solid #5eead4; border-radius: 999px; overflow: hidden; }
.lcdash-ai-bar__fill {
    width: 68%; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #2dd4bf 0%, #0d9488 50%, #0f766e 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}

/* ============== PANEL 5: LATEST ANNOUNCEMENTS FEED ============== */
.lcdash-ann-list { display: flex; flex-direction: column; gap: 14px; }
.lcdash-ann { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: flex-start; }
.lcdash-ann__dot {
    width: 36px; height: 36px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
}
.lcdash-ann__dot svg { width: 16px; height: 16px; stroke-width: 2; }
.lcdash-ann__dot--v1 { /* URGENT ungu */
    background: linear-gradient(145deg, #ede9fe 0%, #ddd6fe 100%); color: #6d28d9; border: 1px solid #c4b5fd;
}
.lcdash-ann__dot--v2 { /* INFO biru */
    background: linear-gradient(145deg, #dbeafe 0%, #bfdbfe 100%); color: #1d4ed8; border: 1px solid #93c5fd;
}
.lcdash-ann__dot--v3 { /* EVENT hijau */
    background: linear-gradient(145deg, #dcfce7 0%, #bbf7d0 100%); color: #15803d; border: 1px solid #86efac;
}
.lcdash-ann__meta { min-width: 0; }
.lcdash-ann__title {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    font-family: 'Inter', sans-serif; font-weight: 800; font-size: 14px;
    color: #0f172a; margin-bottom: 4px;
}
.lcdash-ann__tag {
    display: inline-flex; align-items: center;
    padding: 2.5px 9px; border-radius: 6px;
    font-family: 'Inter', sans-serif; font-size: 10.5px;
    font-weight: 800; letter-spacing: 0.03em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
.lcdash-ann__tag--urgent {
    background: linear-gradient(180deg, #fecaca 0%, #fca5a5 100%);
    color: #991b1b; border: 1px solid #f87171;
}
.lcdash-ann__tag--info {
    background: linear-gradient(180deg, #bfdbfe 0%, #93c5fd 100%);
    color: #1e3a8a; border: 1px solid #60a5fa;
}
.lcdash-ann__tag--event {
    background: linear-gradient(180deg, #bbf7d0 0%, #86efac 100%);
    color: #14532d; border: 1px solid #4ade80;
}
.lcdash-ann__txt {
    font-family: 'Inter', sans-serif; font-size: 12.5px; line-height: 1.6;
    color: #475569; font-weight: 500; margin-bottom: 6px;
}
.lcdash-ann__txt strong { color: #0f172a; font-weight: 750; }
.lcdash-ann__time {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 600;
    color: #64748b;
}
.lcdash-ann__time svg { width: 13px; height: 13px; stroke-width: 2; color: #94a3b8; }

/* ============== DASHBOARD RESPONSIVE ============== */
@media (max-width: 1180px) {
    .lcdash-grid { grid-template-columns: 1fr; padding: 0 18px; }
    .lcdash-pt-badges { grid-template-columns: repeat(3, 1fr); }
    .lcdash-risk { grid-template-columns: 44px 1fr auto; }
    .lcdash-risk__actbtn { grid-column: 2 / 4; justify-self: flex-start; margin-top: 2px; }
}
@media (max-width: 780px) {
    .lcdash-grid { padding: 0 14px; gap: 16px; }
    .lcdash-panel__hd { padding: 16px 15px 13px 17px; gap: 11px; }
    .lcdash-panel__title { font-size: 15px; }
    .lcdash-panel__desc { font-size: 12.5px; }
    .lcdash-panel__body { padding: 15px 16px 19px; }
    .lcdash-pt-badges { grid-template-columns: 1fr; }
    .lcdash-ai-grid { grid-template-columns: 1fr; }
    .lcdash-risk { grid-template-columns: 42px 1fr; }
    .lcdash-risk__chip { grid-column: 1 / 3; margin-top: 2px; }
    .lcdash-risk__actbtn { grid-column: 1 / 3; justify-self: stretch; }
    .lcdash-pt-row__txt { font-size: 12.5px; }
    .lecture-statgrid { padding: 0 14px !important; }
}


/* =========================================================
   ======= PLAS.AI GLOBAL RESPONSIVE DESIGN SYSTEM  =======
   =========================================================
   3 Breakpoints:
     - Desktop:  ≥1200px   (sidebar sticky flex 280px, full layout)
     - Tablet:   768–1199px (DEFAULT: sidebar mini icon-only flex 72px; OPEN: fixed overlay 260px)
     - Mobile:   ≤767px     (DEFAULT: sidebar fixed fully hidden off-screen; OPEN: fixed slide-in overlay + backdrop)
   ========================================================= */

/* ---------- MENU BURGER BUTTON ---------- */
.ls-burger {
    display: none;
    position: fixed;
    top: 14px;
    left: 16px;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 3px 10px rgba(15,23,42,0.08);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s cubic-bezier(.2,.8,.2,1);
    padding: 0;
}
.ls-burger:hover { background: linear-gradient(135deg,#eef2ff,#ede9fe); border-color:#c7d2fe; transform: translateY(-1px); }
.ls-burger svg { width: 20px; height: 20px; stroke:#475569; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; fill:none; transition: transform .25s ease; }
.ls-burger.ls-burger--open svg { stroke:#4f46e5; }
.ls-burger.ls-burger--open svg path.ls-burger__top { transform: translateY(6px) rotate(45deg); transform-origin: center; }
.ls-burger.ls-burger--open svg path.ls-burger__bot { transform: translateY(-6px) rotate(-45deg); transform-origin: center; }
.ls-burger.ls-burger--open svg path.ls-burger__mid { opacity: 0; transform: translateX(-10px); }

/* ---------- LOGO SHIFT WHEN BURGER VISIBLE ---------- */
.ls-logo.ls-logo--hasburger {
    padding-left: 56px !important;
    justify-content: flex-start !important;
}

/* ---------- SIDEBAR DRAWER BACKDROP (MOBILE + TABLET OPEN) ---------- */
.ls-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 997;
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s cubic-bezier(.2,.8,.2,1);
}
body.ls-sidebar--open .ls-backdrop {
    opacity: 1;
    pointer-events: auto;
}

/* =========================================================
   TABLET BREAKPOINT (768px – 1199px)
   Default state: sidebar stays flex item but width 72px (icon-only)
   Open state: sidebar becomes FIXED overlay 260px
   ========================================================= */
@media (max-width: 1199px) {
    .ls-burger { display: inline-flex; }

    /* ------------------------------
       STATE A: SIDEBAR MINI (CLOSED)
       Keep as flex item, hide all text
       ------------------------------ */
    .ls-sidebar {
        width: 72px !important;
        padding: 18px 8px 14px !important;
        gap: 10px !important;
    }
    /* Hide section labels (MAIN / REPORT / LINKS etc) */
    .ls-sidebar .ls-nav-label { display: none !important; }
    /* Hide link TITLE + SUBTEXT (the meta wrapper) */
    .ls-sidebar .ls-link__meta { display: none !important; }
    /* Hide badges / ext arrows */
    .ls-sidebar .ls-link__badge,
    .ls-sidebar .ls-link__ext,
    .ls-sidebar .ls-link__pill,
    .ls-sidebar .ls-sidemenu__pill { display: none !important; }
    /* Hide user NAME + ROLE meta (keep only avatar circle) */
    .ls-sidebar .ls-user__meta { display: none !important; }
    .ls-sidebar .ls-user { justify-content: center !important; padding: 4px 0; }
    /* Center-align each nav link icon */
    .ls-sidebar .ls-link {
        padding: 11px 0 !important;
        justify-content: center !important;
        flex-direction: column !important;
    }
    .ls-sidebar .ls-link__icon { margin: 0 auto !important; }
    /* Logo: center, smaller */
    .ls-sidebar .ls-logo { padding: 4px 0 14px !important; justify-content: center !important; }
    .ls-sidebar .ls-logo img { height: 30px !important; }
    .ls-logo.ls-logo--hasburger { padding-left: 0 !important; justify-content: center !important; }

    /* ------------------------------
       STATE B: SIDEBAR OPEN (BURGER PRESSED)
       Switch to FIXED POSITION OVERLAY so it doesn't push content
       ------------------------------ */
    body.ls-sidebar--open .ls-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 264px !important;
        padding: 18px 14px 14px !important;
        height: 100vh !important;
        gap: 14px !important;
        box-shadow: 8px 0 30px rgba(15,23,42,0.15);
        z-index: 998 !important;
        flex-direction: column;
        align-items: stretch;
    }
    body.ls-sidebar--open .ls-sidebar .ls-nav-label { display: block !important; padding-left: 2px; }
    body.ls-sidebar--open .ls-sidebar .ls-link__meta { display: flex !important; flex-direction: column; }
    body.ls-sidebar--open .ls-sidebar .ls-link__title { display: block !important; }
    body.ls-sidebar--open .ls-sidebar .ls-link__sub { display: block !important; }
    body.ls-sidebar--open .ls-sidebar .ls-link__badge,
    body.ls-sidebar--open .ls-sidebar .ls-link__ext { display: inline-flex !important; }
    body.ls-sidebar--open .ls-sidebar .ls-user__meta { display: block !important; }
    body.ls-sidebar--open .ls-sidebar .ls-user { justify-content: flex-start !important; padding: 0; }
    body.ls-sidebar--open .ls-sidebar .ls-link { padding: 10px 12px !important; justify-content: flex-start !important; flex-direction: row !important; }
    body.ls-sidebar--open .ls-sidebar .ls-link__icon { margin: 0 10px 0 0 !important; }
    body.ls-sidebar--open .ls-sidebar .ls-logo { padding: 2px 6px 14px !important; justify-content: center !important; }
    body.ls-sidebar--open .ls-sidebar .ls-logo img { height: 34px !important; }

    /* Content max-width adjust (shell flex, no need manual ml when closed mini 72px flex item already works via layout) */
    .ls-shell > main,
    .ls-shell > .ls-main,
    .ls-shell > [role="main"] { max-width: calc(100vw - 72px); }
}

/* =========================================================
   MOBILE BREAKPOINT (≤767px)
   Default state: sidebar FIXED OFF-SCREEN (no flex layout)
   Open state: sidebar slide-in from LEFT 280ms cubic-bezier
   ========================================================= */
@media (max-width: 767px) {
    /* ------------------------------
       ADMIN STEP 1: TOPBAR MOBILE — NOTIF BELL SAHAJA (transparent strip)
       Hide: breadcrumb + user chip. KEEP: notification bell + red badge 3 (critical approve item)
       Convention guna display:none untuk hide.
       ------------------------------ */
    .ls-topbar {
        display: flex !important;          /* UNHIDE, don't remove whole header */
        position: absolute !important;     /* take NO layout space, float like burger */
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border-bottom: none !important;
        padding: 14px 14px 0 0 !important; /* align vert with burger left 14px top 14px */
        height: auto !important;
        min-height: 0 !important;
        z-index: 888 !important;           /* below sidebar open overlay (998) */
        pointer-events: none !important;   /* whole strip transparent */
    }
    .ls-topbar * { pointer-events: auto !important; }
    /* Hide breadcrumb LEFT + USER CHIP (avatar + Dr. Amirul) */
    .ls-topbar__left,
    .ls-topbar > .ls-topbar__left { display: none !important; }
    .ls-topbar__right .ls-userchip,
    .ls-topbar__right > .ls-userchip { display: none !important; }
    /* Keep right flex container 100% but content force right */
    .ls-topbar__right {
        flex: 1 !important;
        width: 100% !important;
        justify-content: flex-end !important;
        margin-left: auto !important;
        padding: 0 !important;
        gap: 0 !important;
    }
    /* Notification bell + badge only */
    .ls-topbar__right .ls-iconbtn#notifBtn,
    #notifBtn.ls-iconbtn {
        display: inline-flex !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 12px !important;
        background: #fff !important;
        box-shadow: 0 6px 18px -8px rgba(15,23,42,0.18) !important;
        border: 1px solid #f1f5f9 !important;
        color: #0f172a !important;
        cursor: pointer !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .ls-iconbtn__badge,
    #notifBadge {
        right: 2px !important;
        top: 2px !important;
        min-width: 15px !important;
        height: 15px !important;
        padding: 0 4px !important;
        font-size: 9px !important;
    }
    /* Keep notif dropdown on click functional (position fixed top-right viewport below bell) */
    #notifDropdown {
        right: 10px !important;
        left: 10px !important;
        top: calc(env(safe-area-inset-top, 0px) + 60px) !important;
        width: auto !important;
        max-width: none !important;
        position: fixed !important;
    }

    /* Logo shift on mobile for burger */
    .ls-logo.ls-logo--hasburger {
        padding-left: 58px !important;
        justify-content: flex-start !important;
    }

    /* ------------------------------
       STATE A: SIDEBAR CLOSED (DEFAULT)
       Force position FIXED so flex layout no longer constraints
       Move completely off-screen
       ------------------------------ */
    .ls-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 285px !important;
        height: 100vh !important;
        padding: 18px 14px 14px !important;
        gap: 14px !important;
        transform: translateX(-110%) !important;
        opacity: 0;
        visibility: hidden;
        transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .2s ease !important;
        z-index: 998 !important;
        box-shadow: 10px 0 36px rgba(15,23,42,0.25);
    }
    /* Mobile: Restore ALL labels, subtext, user meta in drawer */
    .ls-sidebar .ls-nav-label { display: block !important; }
    .ls-sidebar .ls-link__meta { display: flex !important; flex-direction: column; }
    .ls-sidebar .ls-link__title { display: block !important; }
    .ls-sidebar .ls-link__sub { display: block !important; }
    .ls-sidebar .ls-link__badge,
    .ls-sidebar .ls-link__ext { display: inline-flex !important; }
    .ls-sidebar .ls-user__meta { display: block !important; }
    .ls-sidebar .ls-user { justify-content: flex-start !important; padding: 0; }
    .ls-sidebar .ls-link { padding: 10px 12px !important; justify-content: flex-start !important; flex-direction: row !important; }
    .ls-sidebar .ls-link__icon { margin: 0 10px 0 0 !important; }
    .ls-sidebar .ls-logo { padding: 2px 6px 14px !important; justify-content: center !important; }
    .ls-sidebar .ls-logo img { height: 34px !important; }

    /* ------------------------------
       STATE B: SIDEBAR OPEN
       ------------------------------ */
    body.ls-sidebar--open .ls-sidebar {
        transform: translateX(0) !important;
        opacity: 1;
        visibility: visible;
    }

    /* ------------------------------
       ADMIN STEP 2: Content area mobile
       - no margin-left (topbar hidden)
       - padding-top 72px to leave space for fixed burger button (42px + 14px top + 16px buffer)
       ------------------------------ */
    .ls-shell > main,
    .ls-shell > .ls-main,
    .ls-shell > [role="main"] {
        max-width: 100vw;
        width: 100%;
        padding: calc(env(safe-area-inset-top, 0px) + var(--ls-dash-pad-top, 60px)) 14px 80px !important;
        /* Fallback for older browsers (pre-env support) */
        padding-top: 60px !important;
        padding-top: calc(env(safe-area-inset-top, 0px) + var(--ls-dash-pad-top, 60px)) !important;
    }

    /* ------------------------------
       ADMIN STEP 3: DASHBOARD GRID OVERFLOW FIXES
       (override inline grid templates on mobile via explicit admin-* classes)
       ------------------------------ */
    /* 3a. Hero: title / subtitle / live pill — stack column, not side-by-side */
    main.ls-content > div[class*="adm-dash"] > div > div,
    main.ls-content > div:first-child > div:nth-child(3) > div:first-child,
    main.ls-content > div[style*="border-radius:20px"] > div:nth-child(2) > div:first-child {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    main.ls-content h1 { font-size: 22px !important; line-height: 1.15 !important; letter-spacing: -0.3px !important; }

    /* 3b. All 4-column grids (stats + action cards) → 2x2 stack on mobile */
    .adm-dash-4col { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
    .adm-dash-4col > div,
    .adm-dash-4col > a { padding: 12px 12px !important; }

    /* 3c. Stats card inner padding + font scaling */
    .stat-grid--4 > div > div:nth-child(3) { font-size: 11px !important; }
    .stat-grid--4 > div > div:nth-child(4) { font-size: 22px !important; letter-spacing: -0.4px !important; }

    /* 3d. Donut ring on Avg Completion card — wrap below stat on mobile (not side-by-side) */
    .stat-grid--4 > div:last-child > div[style*="align-items:center"],
    .stat-grid--4 > div:last-child > div:nth-child(2) {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    /* 3e. 4 action cards (Add User / New Course / Create Cohort / Assign Trainer) — icon+text stack column */
    .adm-dash-action4 > a,
    .adm-dash-action4 > div {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        padding: 12px 11px !important;
    }
    .adm-dash-action4 > a > div:last-child,
    .adm-dash-action4 > div > div:last-child { min-width: 0; }
    .adm-dash-action4 > a > div:last-child > div:first-child,
    .adm-dash-action4 > div > div:last-child > div:first-child {
        font-size: 12px !important; line-height: 1.2 !important; white-space: normal !important;
    }
    .adm-dash-action4 > a > div:last-child > div:last-child,
    .adm-dash-action4 > div > div:last-child > div:last-child {
        font-size: 10px !important; line-height: 1.35 !important; white-space: normal !important;
    }

    /* 3f. All 2-column grids (chart panels + list panels) → stack single column on mobile */
    .adm-dash-2col { grid-template-columns: 1fr !important; gap: 12px !important; }

    /* 3g. Reduce all panel padding on mobile — DYNAMIC AUTO FIT TOP GAP (burger measure by JS recalcPadTop()) */
    main.ls-content {
        padding: calc(env(safe-area-inset-top, 0px) + var(--ls-dash-pad-top, 56px)) 12px 80px !important;
        padding-top: 56px !important; /* legacy fallback */
        padding-top: calc(env(safe-area-inset-top, 0px) + var(--ls-dash-pad-top, 56px)) !important;
    }
    main.ls-content > div:first-child,
    main.ls-content > div[style*="border-radius:20px"] {
        padding: 13px 12px !important;
        border-radius: 17px !important;
    }
    .adm-dash-2col > div,
    main.ls-content > div:first-child > div[style*="border:1px solid #f1f5f9"] {
        padding: 14px 14px !important;
    }
    main.ls-content > div:first-child > div:nth-child(2) { margin-bottom: 12px !important; }

    /* 3h. SIMPLIFY mobile: HIDE verbose extra info (engineering convention: display:none !important)
       Tinggal icon + delta badge + LABEL + BIG NUMBER sahaja pada 4 stats cards + hero subtitle + action subdesc */
    /* Hero: hide long subtitle paragraph "Monitor platform-wide performance..." */
    main.ls-content > div:first-child h1 + p,
    main.ls-content > div[style*="border-radius:20px"] h1 + p { display: none !important; }

    /* Stat 4 cards inner padding + gap reduce since breakdown hidden */
    .adm-dash-4col { gap: 9px !important; }
    .adm-dash-4col > div,
    .stat-grid--4 > div { padding: 10px 11px !important; }

    /* STAT CARD 1 (Total Users): hide breakdown •5 Admin •18 Trainer •103 */
    .stat-grid--4 > div:first-child > div:last-child { display: none !important; }
    .stat-grid--4 > div:first-child > div:nth-child(4) { margin-bottom: 0 !important; }

    /* STAT CARD 2 (Active Cohorts): hide pills July 2026 / May 2026 / +5 more */
    .stat-grid--4 > div:nth-child(2) > div:last-child { display: none !important; }
    .stat-grid--4 > div:nth-child(2) > div:nth-child(4) { margin-bottom: 0 !important; }

    /* STAT CARD 3 (Published Courses): hide progress bar + Published 82% label */
    .stat-grid--4 > div:nth-child(3) > div:nth-child(5),
    .stat-grid--4 > div:nth-child(3) > div:nth-child(6) { display: none !important; }
    .stat-grid--4 > div:nth-child(3) > div:nth-child(4) { margin-bottom: 0 !important; }

    /* STAT CARD 4 (Avg Completion): hide "QoQ improvement" subtitle text + donut SVG ring (big number 78% text already ada) */
    .stat-grid--4 > div:last-child > div:last-child > div:first-child > div:last-child { display: none !important; }
    .stat-grid--4 > div:last-child > div:last-child > div:last-child { display: none !important; }
    .stat-grid--4 > div:last-child > div:last-child { display: block !important; }
    .stat-grid--4 > div:last-child > div:last-child > div:first-child { flex: none !important; }
    .stat-grid--4 > div:last-child > div:nth-child(2) { margin-bottom: 0 !important; }

    /* ACTION 4 CARDS (Add User/NewCourse/CreateCohort/AssignTrainer): hide sub-description text
       "Admin / Trainer / Student", "Create & publish module", etc. → Tinggal ICON + TITLE sahaja */
    .adm-dash-action4 > a > div:last-child > div:last-child,
    .adm-dash-action4 > div > div:last-child > div:last-child { display: none !important; }
    .adm-dash-action4 > a,
    .adm-dash-action4 > div { padding: 10px !important; gap: 7px !important; }
    .adm-dash-action4 > a > div:first-child,
    .adm-dash-action4 > div > div:first-child {
        width: 38px !important; height: 38px !important; border-radius: 11px !important;
    }
    .adm-dash-action4 > a > div:first-child svg,
    .adm-dash-action4 > div > div:first-child svg { width: 17px !important; height: 17px !important; }
    .adm-dash-action4 > a > div:last-child > div:first-child,
    .adm-dash-action4 > div > div:last-child > div:first-child {
        font-size: 12.5px !important; line-height: 1.15 !important; font-weight: 900 !important;
    }

    /* Hero flex alignment after subtitle removed: reduce gap between h1 and live pill row */
    main.ls-content > div:first-child > div:nth-child(2) > div:first-child,
    main.ls-content > div[style*="border-radius:20px"] > div:nth-child(2) > div:first-child {
        gap: 10px !important;
    }
    main.ls-content h1 { font-size: 20px !important; letter-spacing: -0.2px !important; }

    /* 3i. ===== FIT-BOX CONTAINMENT SYSTEM (mobile) — prevent overflow panel putih =====
       Root cause bug: CSS grid items default min-width:auto → content push keluar parent
       Solution: cascade min-width:0 + box-sizing:border-box + overflow clip + 100%width containment */

    /* --- Level 1: ALL dashboard wrappers MUST not escape container --- */
    main.ls-content,
    main.ls-content > *,
    main.ls-content * {
        -webkit-box-sizing: border-box !important;
        -moz-box-sizing: border-box !important;
        box-sizing: border-box !important;
        -webkit-text-size-adjust: 100%;
    }
    main.ls-content,
    main.ls-content > div,
    main.ls-content > div[style*="background:#fff"],
    main.ls-content > div[style*="border-radius:20px"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    /* --- Level 2: Hero panel + inner radii cards: clip within rounded border --- */
    main.ls-content > div:first-child,
    main.ls-content > div[style*="border-radius:17px"],
    main.ls-content > div[style*="border-radius:20px"] {
        overflow: hidden !important;
        position: relative !important;
    }
    /* But keep interactive links focusable (overflow hidden okay for clipped panels) */

    /* --- Level 3: All 4-col + 2-col grid children MIN-WIDTH 0 (critical CSS-grid fix) --- */
    .adm-dash-4col,
    .adm-dash-2col {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .adm-dash-4col > *,
    .adm-dash-2col > *,
    .stat-grid--4 > div,
    .stat-grid.stat-grid--4 > div {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* --- Level 4: Flex child rows within cards (icon left + badge right) also min-width:0 --- */
    .stat-grid--4 > div > *,
    .stat-grid.stat-grid--4 > div > *,
    .adm-dash-action4 > a > *,
    .adm-dash-action4 > div > * {
        min-width: 0 !important;
    }
    .stat-grid--4 > div > div:nth-child(2) {
        min-width: 0 !important;
        gap: 4px !important;
    }

    /* --- Level 5: Delta badges (↑ +12.4% / +2 / +4 new / +3.2%) shrink mobile --- */
    .stat-grid--4 > div > div:nth-child(2) > div:last-child,
    .stat-grid.stat-grid--4 > div > div:nth-child(2) > div:last-child {
        padding: 3px 6px !important;
        gap: 3px !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
        max-width: 48% !important;
    }
    .stat-grid--4 > div > div:nth-child(2) > div:last-child > svg,
    .stat-grid.stat-grid--4 > div > div:nth-child(2) > div:last-child > svg {
        width: 9px !important;
        height: 9px !important;
        flex-shrink: 0 !important;
    }
    .stat-grid--4 > div > div:nth-child(2) > div:last-child > span,
    .stat-grid.stat-grid--4 > div > div:nth-child(2) > div:last-child > span {
        font-size: 9.5px !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        min-width: 0 !important;
    }
    .stat-grid--4 > div > div:nth-child(2) > div:first-child,
    .stat-grid.stat-grid--4 > div > div:nth-child(2) > div:first-child {
        width: 38px !important;
        height: 38px !important;
        border-radius: 11px !important;
        flex-shrink: 0 !important;
    }
    .stat-grid--4 > div > div:nth-child(2) > div:first-child svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* --- Level 6: Text labels + numbers clamp to box --- */
    .stat-grid--4 > div > div:nth-child(3),
    .stat-grid.stat-grid--4 > div > div:nth-child(3) {
        font-size: 10.5px !important;
        line-height: 1.15 !important;
        margin-bottom: 3px !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }
    .stat-grid--4 > div > div:nth-child(4),
    .stat-grid.stat-grid--4 > div > div:nth-child(4) {
        font-size: 21px !important;
        letter-spacing: -0.3px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* --- Level 7: ALL CHARTS / SVGs / CANVAS FORCE 100% parent width container fit --- */
    .adm-dash-2col svg,
    .adm-dash-chartrow svg,
    .adm-dash-listrow svg,
    main.ls-content svg[viewBox],
    main.ls-content svg[width],
    main.ls-content canvas,
    main.ls-content .chart,
    main.ls-content [class*="chart"],
    main.ls-content [data-chart] {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        min-width: 0 !important;
    }
    /* Inner chart wrapper (white panels within 2-col) also clip */
    .adm-dash-2col > div,
    .adm-dash-chartrow > div,
    .adm-dash-listrow > div {
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        position: relative !important;
    }

    /* ---------- CONTENT GRID RESPONSIVE (MOBILE) ---------- */
    .lecture-statgrid { grid-template-columns: 1fr 1fr !important; padding: 0 14px !important; gap: 10px !important; }
    .lecture-statgrid > div { min-height: auto !important; padding: 12px !important; }
    .lecture-statnum { font-size: 19px !important; }
    .lecture-statlab { font-size: 9.5px !important; }
    .lecture-panel__title { font-size: 15px !important; }
    .lecture-coursegrid { grid-template-columns: 1fr 1fr !important; }

    /* AI Toolkit 3-tab nav - text lebih kecil */
    .ls-builder-tb { gap: 6px !important; padding: 8px 10px !important; overflow-x: auto !important; }
    .ls-builder-tb__btn { padding: 8px 10px !important; font-size: 11px !important; white-space: nowrap !important; }
    .ls-builder-tb__svg { width: 15px !important; height: 15px !important; margin-right: 4px !important; }

    /* Hero panel (dashboard student) */
    .sdash-hero { grid-template-columns: 1fr !important; padding: 18px 15px !important; gap: 14px !important; }
    .sdash-hero__ring { justify-self: center; }
    .sdash-hero__name { font-size: 20px !important; }
    .sdash-stat { grid-template-columns: repeat(2, 1fr) !important; margin-top: 12px !important; }
    .sdash-stat__card { padding: 10px 11px !important; }
    .sdash-stat__num { font-size: 17px !important; }

    /* Active courses cards */
    .sdash-courses__hd { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; padding: 0 3px 10px !important; }
    .sdash-courses__grid { grid-template-columns: 1fr !important; gap: 12px !important; }
    .sdash-quickgrid { grid-template-columns: 1fr !important; }
    .sdash-right { padding: 0 !important; margin-top: 14px !important; }

    /* Admin Cohort stat cards */
    .admin-4col { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .admin-4col > div { padding: 11px 12px !important; }
    .admin-4col strong { font-size: 18px !important; }
    .admin-4col small { font-size: 10px !important; }

    /* Wave timeline cards (Cohorts) */
    .ls-wavegrid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .ls-wavecard { padding: 10px 11px !important; }

    /* Create Batch / Assign Trainer modal — 3-col form tukar jadi 1-col stack */
    .ls-modal__form3col { grid-template-columns: 1fr !important; gap: 12px !important; }
    .ls-modal { width: 95vw !important; max-width: 95vw !important; max-height: 92vh !important; overflow-y: auto !important; }
    .ls-modal__head { padding: 14px 15px !important; }
    .ls-modal__body { padding: 14px 15px !important; }
    .ls-modal__foot { padding: 12px 15px 14px !important; }
}

/* ---------- TABLE RESPONSIVE (HYBRID STRATEGY) ---------- */
.ls-tablewrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 14px;
    position: relative;
}
.ls-tablewrap::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 22px;
    background: linear-gradient(90deg, transparent, rgba(15,23,42,0.06));
    pointer-events: none;
    border-radius: 0 14px 14px 0;
}
.ls-tablewrap table { min-width: 640px; width: 100%; }

/* Pattern 3: Pinned first column (ID) + last (Actions) */
.ls-tablewrap.ls-tablewrap--pincol th:first-child,
.ls-tablewrap.ls-tablewrap--pincol td:first-child {
    position: sticky; left: 0; z-index: 2;
    background: #fff;
    box-shadow: 2px 0 0 rgba(226,232,240,0.5);
    font-weight: 700;
}
.ls-tablewrap.ls-tablewrap--pincol th:last-child,
.ls-tablewrap.ls-tablewrap--pincol td:last-child {
    position: sticky; right: 0; z-index: 2;
    background: #fff;
    box-shadow: -2px 0 0 rgba(226,232,240,0.5);
}
.ls-tablewrap.ls-tablewrap--pincol th:first-child,
.ls-tablewrap.ls-tablewrap--pincol th:last-child { background: #f8fafc; font-weight: 800; }

/* Capacity Matrix: min-width columns */
.ls-tablewrap[data-matrix="1"] table { min-width: 720px; }
.ls-tablewrap[data-matrix="1"] th,
.ls-tablewrap[data-matrix="1"] td { min-width: 130px; }

/* Tablet tweaks (between 768-1199) */
@media (max-width: 1199px) and (min-width: 768px) {
    .ls-wavegrid { grid-template-columns: repeat(3, 1fr) !important; gap: 11px !important; }
    .sdash-stat { grid-template-columns: repeat(2, 1fr) !important; }
    .sdash-courses__grid { grid-template-columns: repeat(3, 1fr) !important; }
    .admin-4col { grid-template-columns: repeat(2, 1fr) !important; }
    .sdash-quickgrid { grid-template-columns: 1fr !important; }
    .sdash-right { margin-top: 14px !important; }
}