.packages-page { display:grid; gap:24px; color:#302740; }
.packages-page .pkg-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.packages-page h1 { margin:0 0 8px; font-size:1.6rem; color:#302740; }
.packages-page h2 { font-size:1.08rem; color:#302740; line-height:1.8; }
.packages-page .pkg-heading p, .packages-page .pkg-muted { color:#796f84; font-size:.85rem; line-height:1.9; margin:8px 0; }
.packages-page .pkg-heading .btn { flex-shrink:0; }
.packages-page .pkg-panel, .packages-page .pkg-card { min-width:0; padding:24px; border:1px solid #eee7f4; border-radius:20px; background:#fff; box-shadow:0 6px 24px #311a4d08; }
.packages-page .pkg-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%, 260px), 1fr)); gap:22px; }
.packages-page .pkg-card { padding:0; overflow:hidden; }
.packages-page .pkg-visual { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; min-height:160px; background:linear-gradient(135deg,#f5e8ff,#e9e6ff); color:var(--color1,#7425b6); }
.packages-page .pkg-visual i { font-size:3rem; }
.packages-page .pkg-visual span { font-size:.8rem; }
.packages-page .pkg-card-body { padding:22px; }
.packages-page .pkg-card h2 { margin:12px 0 4px; overflow-wrap:anywhere; }
.packages-page .pkg-status { display:inline-block; padding:4px 9px; border-radius:8px; background:#f4eefb; color:#765095; font-size:.75rem; }
.packages-page .pkg-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.packages-page .pkg-actions .btn { margin-bottom:0; }
.packages-page .pkg-search { display:flex; gap:10px; max-width:650px; }
.packages-page .pkg-pagination { display:flex; align-items:center; justify-content:center; gap:18px; }
.packages-page .pkg-pagination .btn { margin:0; }
.packages-page .pkg-empty { border:1px dashed #e4d8ed; border-radius:16px; padding:32px 18px; text-align:center; color:#80748b; background:#fff; }
.packages-page .pkg-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.packages-page label { display:block; margin:12px 0 8px; font-weight:600; }
.packages-page .pkg-check { display:flex; align-items:center; gap:10px; padding:10px 0; }
.packages-page .pkg-check input { flex-shrink:0; }
.packages-page .pkg-detail-grid { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(min(100%, 260px), 1fr); gap:24px; align-items:start; }
.packages-page .pkg-player { position:relative; background:#19131f; border-radius:14px; overflow:hidden; margin-bottom:18px; }
.packages-page .pkg-player video { display:block; width:100%; max-height:65vh; aspect-ratio:16/9; object-fit:contain; }
.packages-page .pkg-watermark { position:absolute; top:18px; inset-inline-end:18px; pointer-events:none; color:#fff9; background:#0003; border-radius:6px; padding:4px 8px; font-size:.75rem; }
.packages-page .pkg-player-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; min-height:240px; border-radius:14px; background:#f4eff9; color:#8964a6; }
.packages-page .pkg-player-placeholder i { font-size:3rem; }
.packages-page .pkg-lesson-list { list-style:none; padding:0; margin:16px 0 0; }
.packages-page .pkg-lesson-list li { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid #f0eaf5; }
.packages-page .pkg-lesson-list li > span { min-width:0; overflow-wrap:anywhere; }
.packages-page .pkg-lesson-button { display:flex; align-items:center; gap:12px; width:100%; padding:8px; border:0; border-radius:10px; background:#faf8fd; color:#543365; font:inherit; text-align:start; }
.packages-page .pkg-lesson-button i { flex-shrink:0; color:#9060b2; }
.packages-page .pkg-lesson-button span { overflow-wrap:anywhere; min-width:0; }
.packages-page .pkg-lesson-button small { display:block; margin-top:4px; color:#8a7b94; font-size:.7rem; }
.packages-page .pkg-lesson-button:disabled { color:#8c8194; cursor:not-allowed; background:#f8f7fa; }
.packages-page .pkg-lesson-button:not(:disabled):hover { background:#f0e6fa; }
.packages-page .pkg-description { white-space:pre-wrap; overflow-wrap:anywhere; }
.packages-page .pkg-price { margin-top:20px; font-size:1.4rem; }
.packages-page .pkg-success { color:#178358; }
.packages-page .pkg-wallet-balance { display:flex; flex-direction:column; gap:12px; background:linear-gradient(135deg,#f7ecff,#fff); }
.packages-page .pkg-wallet-balance strong { font-size:2rem; color:var(--color1,#7425b6); }
.packages-page .pkg-table-wrap { overflow-x:auto; }
.packages-page .table td, .packages-page .table th { font-size:.82rem; padding:14px; vertical-align:middle; }
.packages-page .pkg-panel .pkg-panel { box-shadow:none; }
.packages-page button:focus-visible, .packages-page a:focus-visible { outline:3px solid var(--color1,#7425b6); outline-offset:3px; }
@media(max-width:991px) { .packages-page .pkg-detail-grid { grid-template-columns:minmax(0,1fr); } }
@media(max-width:575px) { .packages-page .pkg-heading { align-items:flex-start; flex-direction:column; } .packages-page .pkg-form-grid, .packages-page .pkg-grid { grid-template-columns:minmax(0,1fr); } .packages-page .pkg-panel { padding:18px; } .packages-page h1 { font-size:1.35rem; } .packages-page .pkg-wallet-balance strong { font-size:1.6rem; } .packages-page .pkg-lesson-list li { flex-wrap:wrap; } }

.packages-page input[type="file"] { display:block; width:100%; max-width:100%; min-width:0; font-size:.85rem; }
.packages-page .pkg-form-grid > div { min-width:0; }
.packages-page .btn { max-width:100%; white-space:normal; }

.packages-page .bg-gradient-primary { background-color:var(--color1,#7425b6); background-image:linear-gradient(135deg,var(--color2,#a52bea),var(--color1,#7425b6)); color:#fff; }

.packages-page .pkg-upload-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:start; }
.packages-page .pkg-upload-heading { display:flex; align-items:flex-start; gap:14px; padding-bottom:16px; margin-bottom:12px; border-bottom:1px solid #eee7f4; }
.packages-page .pkg-upload-heading h2 { margin:0; }
.packages-page .pkg-upload-symbol { display:grid; place-items:center; flex-shrink:0; width:44px; height:44px; background:#f2e8fc; color:var(--color1,#7425b6); border-radius:14px; font-size:1.4rem; }
.packages-page .pkg-upload-fields { border:0; padding:0; margin:0; min-width:0; }
.packages-page .pkg-upload-fields > .btn { margin:16px 0 0; }
.packages-page .pkg-upload-note { background:#f8f3fd; padding:12px; border-radius:10px; font-size:.82rem; line-height:1.9; color:#765095; }
.packages-page .pkg-file-picker { padding:16px; background:#fbf9fe; border:1px dashed #cdb5e1; border-radius:12px; }
.packages-page .pkg-selected-file { overflow-wrap:anywhere; font-size:.82rem; color:#765095; }
@media(max-width:991px) { .packages-page .pkg-upload-grid { grid-template-columns:minmax(0,1fr); } }

.packages-page .pkg-visual { position:relative; overflow:hidden; }
.packages-page .pkg-visual img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.packages-page .pkg-visual:has(img) { gap:0; }
.packages-page .pkg-visual:has(img) > span { position:absolute; bottom:12px; inset-inline-end:12px; padding:4px 10px; border-radius:8px; color:#fff; background:#302740cc; }
.packages-page .pkg-cover-preview, .packages-page .pkg-detail-cover { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:14px; }
.packages-page .pkg-cover-preview { max-width:360px; margin-top:16px; }
.packages-page .pkg-detail-cover { margin-bottom:18px; }
.packages-page .pkg-lesson-image { width:80px; height:50px; object-fit:cover; border-radius:8px; flex-shrink:0; }
.packages-page .pkg-lesson-list .pkg-lesson-editor { display:block; }
.packages-page .pkg-lesson-summary { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.packages-page .pkg-lesson-summary > span { flex:1; min-width:100px; overflow-wrap:anywhere; }
.packages-page .pkg-lesson-summary > .btn { flex-shrink:0; }

@media print {
    body:has(.payout-receipt) .sidenav, body:has(.payout-receipt) .navbar, body:has(.payout-receipt) footer { display:none !important; }
    body:has(.payout-receipt) .main-content { margin:0 !important; padding:0 !important; }
}