/* styles.css - Semua custom CSS dari sebelumnya, termasuk Tailwind vars & prose */

/* Tailwind base vars (buat kompatibilitas) */
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }body{font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal}.bg-gray-900{background-color:rgb(17 24 39/var(--tw-bg-opacity))}.bg-gray-800{background-color:rgb(31 41 55/var(--tw-bg-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.p-1{padding:.25rem}.p-4{padding:1rem}.flex{display:flex}.min-h-screen{min-height:100vh}.gap-4{--tw-gap:1rem;gap:1rem}.fixed{position:fixed}.inset-0{inset:0px}.z-50{z-index:50}.hidden{display:none}.overflow-y-auto{overflow-y:auto}.rounded-lg{border-radius:.5rem}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.border-b{border-bottom-width:1px}.border-gray-700{--tw-border-opacity:1;border-color:rgb(55 65 81/var(--tw-border-opacity))}.text-sm{font-size:.875rem;line-height:1.25rem}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.hover\:bg-blue-700:hover{background-color:rgb(29 78 216/var(--tw-bg-opacity))}.hover\:text-blue-500:hover{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity))}.text-xs{font-size:.75rem;line-height:1rem}.animate-spin{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.fa-bars:before{content:"\f0c9"}.fa-chevron-left:before{content:"\f053"}.fa-plus-circle:before{content:"\f055"}.fa-home:before{content:"\f015"}.fa-crown:before{content:"\f521"}.fa-cogs:before{content:"\f085"}.fa-question-circle:before{content:"\f059"}.fa-envelope:before{content:"\f0e0"}.fa-x-twitter:before{content:"\e61a"} 

/* Custom styles untuk video & layout (tetap) */
video{max-width:100%;height:auto;border-radius:8px;box-shadow:0 4px 6px rgba(0,0,0,0.1);} 
.item-mediaplayer{max-height:90vh;overflow:auto;}

/* Additional CSS for new elements to prevent errors */
.prose { color: #e5e7eb; max-width: 65ch; }
.prose :where(p, h1, h2, h3, h4, li):not(:where([class~="not-prose"] *)) { margin-top: 1.25em; margin-bottom: 1.25em; }
.prose :where([class~="not-prose"] *) { margin-top: 0; margin-bottom: 0; }
.prose h1 { font-size: 2.25em; font-weight: 800; line-height: 1.1111111; margin-top: 0; margin-bottom: 0.8888889em; }
.prose h2 { font-size: 1.875em; font-weight: 700; line-height: 1.3333333; margin-top: 2em; margin-bottom: 1em; }
.prose h3 { font-size: 1.5em; font-weight: 600; line-height: 1.6; margin-top: 1.6em; margin-bottom: 0.6em; }
.prose h4 { font-weight: 600; margin-top: 1.5em; margin-bottom: 0.5em; }
.prose strong { color: #f9fafb; font-weight: 600; }
.prose a { color: #3b82f6; text-decoration: underline; font-weight: 500; }
.prose a:hover { color: #1d4ed8; }
.prose blockquote { font-weight: 500; font-style: italic; color: #6b7280; border-left: 0.25rem solid #e5e7eb; quotes: "\201C""\201D""\2018""\2019"; margin-top: 1.6em; margin-bottom: 1.6em; padding-left: 1em; }
.prose blockquote p:first-of-type::before { content: open-quote; }
.prose blockquote p:last-of-type::after { content: close-quote; }
.prose code { font-weight: 600; color: #e5e7eb; }
.prose code::before { content: "`"; }
.prose code::after { content: "`"; }
.prose a code { color: #3b82f6; }
.prose pre { color: #e5e7eb; background-color: #1f2937; overflow-x: auto; font-weight: 400; font-size: 0.875em; line-height: 1.7142857; margin-top: 1.7142857em; margin-bottom: 1.7142857em; border-radius: 0.375rem; padding: 0.8571429em 1.1428571em; }
.prose pre code { background-color: transparent; border-width: 0; border-radius: 0; padding: 0; font-weight: inherit; color: inherit; font-size: inherit; font-family: inherit; line-height: inherit; }
.prose pre code::before { content: none; }
.prose pre code::after { content: none; }
.prose table { width: 100%; table-layout: auto; text-align: left; margin-top: 2em; margin-bottom: 2em; font-size: 0.875em; line-height: 1.7142857; }
.prose thead { color: #111827; font-weight: 600; border-bottom-width: 1px; border-bottom-color: #d1d5db; }
.prose thead th { vertical-align: bottom; padding-right: 0.5714286em; padding-bottom: 0.5714286em; padding-left: 0.5714286em; }
.prose tbody tr { border-bottom-width: 1px; border-bottom-color: #e5e7eb; }
.prose tbody tr:last-child { border-bottom-width: 0; }
.prose tbody td { vertical-align: baseline; padding: 0.5714286em; }
.prose { --tw-prose-body: var(--tw-prose-body); --tw-prose-headings: var(--tw-prose-headings); --tw-prose-lead: var(--tw-prose-lead); --tw-prose-links: var(--tw-prose-links); --tw-prose-bold: var(--tw-prose-bold); --tw-prose-counters: var(--tw-prose-counters); --tw-prose-bullets: var(--tw-prose-bullets); --tw-prose-hr: var(--tw-prose-hr); --tw-prose-quotes: var(--tw-prose-quotes); --tw-prose-quote-borders: var(--tw-prose-quote-borders); --tw-prose-captions: var(--tw-prose-captions); --tw-prose-kbd: var(--tw-prose-kbd); --tw-prose-kbd-background: var(--tw-prose-kbd-background); --tw-prose-kbd-color: var(--tw-prose-kbd-color); --tw-prose-code: var(--tw-prose-code); --tw-prose-pre-code: var(--tw-prose-pre-code); --tw-prose-pre-bg: var(--tw-prose-pre-bg); --tw-prose-th-borders: var(--tw-prose-th-borders); --tw-prose-td-paddings: var(--tw-prose-td-paddings); }
.prose :where(table):not(:where([class~="not-prose"] *)) { display: inline-block; min-width: var(--tw-min-width, 100%); overflow-x: auto; text-indent: 0; border-color: var(--tw-prose-th-borders); font-size: var(--tw-prose-font-size); border-collapse: collapse; }
.prose :where(thead, tfoot):not(:where([class~="not-prose"] *)) { white-space: nowrap; }
.prose :where(tbody tr):last-child:not(:where([class~="not-prose"] *)) { border-bottom-width: 0; }
.prose :where(tbody td):not(:where([class~="not-prose"] *)) { vertical-align: baseline; }
.prose :where(tfoot td):not(:where([class~="not-prose"] *)) { vertical-align: top; }
.prose :where(figure > *):not(:where([class~="not-prose"] *)) { margin-top: 0; margin-bottom: 0; }
.prose :where(figcaption):not(:where([class~="not-prose"] *)) { color: var(--tw-prose-captions); font-size: 0.875em; line-height: 1.4285714; margin-top: 0.8571429em; }
.prose-invert { --tw-prose-body: var(--tw-prose-body-invert); --tw-prose-headings: var(--tw-prose-headings-invert); --tw-prose-lead: var(--tw-prose-lead-invert); --tw-prose-links: var(--tw-prose-links-invert); --tw-prose-bold: var(--tw-prose-bold-invert); --tw-prose-counters: var(--tw-prose-counters-invert); --tw-prose-bullets: var(--tw-prose-bullets-invert); --tw-prose-hr: var(--tw-prose-hr-invert); --tw-prose-quotes: var(--tw-prose-quotes-invert); --tw-prose-quote-borders: var(--tw-prose-quote-borders-invert); --tw-prose-captions: var(--tw-prose-captions-invert); --tw-prose-kbd: var(--tw-prose-kbd-invert); --tw-prose-kbd-background: var(--tw-prose-kbd-background-invert); --tw-prose-kbd-color: var(--tw-prose-kbd-color-invert); --tw-prose-code: var(--tw-prose-code-invert); --tw-prose-pre-code: var(--tw-prose-pre-code-invert); --tw-prose-pre-bg: var(--tw-prose-pre-bg-invert); --tw-prose-th-borders: var(--tw-prose-th-borders-invert); --tw-prose-td-paddings: var(--tw-prose-td-paddings-invert); }
.prose-invert :where(table):not(:where([class~="not-prose"] *)) { border-color: var(--tw-prose-th-borders); }
.form-checkbox { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-block; vertical-align: middle; background-origin: border-box; -webkit-user-select: none; -moz-user-select: none; user-select: none; color: currentColor; background-color: #fff; border-color: #8b949e; border-width: 1px; border-radius: 0.25rem; width: 1.5em; height: 1.5em; background-image: none; }
.form-checkbox:checked { background-color: currentColor; border-color: transparent; background-repeat: no-repeat; background-position: center; background-size: contain; -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; }
.form-checkbox:checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-3-3a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); }
.form-checkbox:focus { outline: 2px solid transparent; outline-offset: 2px; --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: #2563eb; --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); }
.border-blue-500 { --tw-border-opacity: 1; border-color: rgb(59 130 246 / var(--tw-border-opacity)); }
.border-green-600 { --tw-border-opacity: 1; border-color: rgb(16 185 129 / var(--tw-border-opacity)); }
.border-red-600 { --tw-border-opacity: 1; border-color: rgb(220 38 39 / var(--tw-border-opacity)); }
.bg-green-600 { --tw-bg-opacity: 1; background-color: rgb(16 185 129 / var(--tw-bg-opacity)); }
.bg-red-600 { --tw-bg-opacity: 1; background-color: rgb(220 38 39 / var(--tw-bg-opacity)); }
.hover\:bg-green-700:hover { background-color: rgb(5 150 105 / var(--tw-bg-opacity)); }
.hover\:bg-red-700:hover { background-color: rgb(185 28 28 / var(--tw-bg-opacity)); }
.text-blue-500 { --tw-text-opacity: 1; color: rgb(59 130 246 / var(--tw-text-opacity)); }
.text-red-400 { --tw-text-opacity: 1; color: rgb(248 113 113 / var(--tw-text-opacity)); }
.text-red-500 { --tw-text-opacity: 1; color: rgb(239 68 68 / var(--tw-text-opacity)); }
.text-yellow-500 { --tw-text-opacity: 1; color: rgb(234 179 8 / var(--tw-text-opacity)); }
.text-gray-300 { --tw-text-opacity: 1; color: rgb(209 213 219 / var(--tw-text-opacity)); }
.rounded-xl { border-radius: 0.75rem; }
.rounded-md { border-radius: 0.375rem; }
.rounded-full { border-radius: 9999px; }
.max-w-xl { max-width: 36rem; }
.max-w-full { max-width: 100%; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-2 { margin-bottom: 0.5rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 0.75rem; }
.mb-1 { margin-bottom: 0.25rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.w-12 { width: 3rem; }
.w-16 { width: 4rem; }
.w-full { width: 100%; }
.min-w-0 { min-width: 0; }
.text-center { text-align: center; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.space-x-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.5rem * var(--tw-space-x-reverse)); margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); }
.space-y-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); }
.border-gray-600 { --tw-border-opacity: 1; border-color: rgb(75 85 99 / var(--tw-border-opacity)); }
.border-gray-900 { --tw-border-opacity: 1; border-color: rgb(17 24 39 / var(--tw-border-opacity)); }
.bg-gray-500 { --tw-bg-opacity: 1; background-color: rgb(107 114 128 / var(--tw-bg-opacity)); }
.bg-gray-600 { --tw-bg-opacity: 1; background-color: rgb(75 85 99 / var(--tw-bg-opacity)); }
.bg-gray-700 { --tw-bg-opacity: 1; background-color: rgb(55 65 81 / var(--tw-bg-opacity)); }
.hover\:bg-gray-600:hover { background-color: rgb(75 85 99 / var(--tw-bg-opacity)); }
.hover\:bg-gray-700:hover { background-color: rgb(55 65 81 / var(--tw-bg-opacity)); }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-2 { --tw-gap: 0.5rem; gap: 0.5rem; }
.overflow-hidden { overflow: hidden; }
.rounded { border-radius: 0.25rem; }
.border { border-width: 1px; }
.border-t { border-top-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-l { border-left-width: 1px; }
.border-r { border-right-width: 1px; }
.pr-2 { padding-right: 0.5rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.z-10 { z-index: 10; }
.relative { position: relative; }
.absolute { position: absolute; }
.right-0 { right: 0; }
.-top-3 { top: -0.75rem; }
.-end-3 { end: -0.75rem; }
.-bottom-1 { bottom: -0.25rem; }
.-start-1 { start: -0.25rem; }
.text-left { text-align: left; }
.w-52 { width: 13rem; }
.max-h-36 { max-height: 9rem; }
.max-h-screen { max-height: 100vh; }
.min-w-80 { min-width: 20rem; }
.loading { display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(255,255,255,.3); border-radius: 50%; border-top-color: #fff; animation: spin 1s ease-in-out infinite; }
.sort-icon { margin-left: auto; }
input[type="text"], input[type="password"], input[type="number"] { background-color: #374151; border-color: #4b5563; color: #f9fafb; }
input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }
.filemanager_maincontent_dropdown .dropdown { right: 0; left: auto; }
.filemanager_mainbuttons_sort .dropdown { right: 0; left: auto; }
.item-mediaplayer video { width: 100%; height: auto; }
.thumbnail img { width: 100%; height: auto; border-radius: 0.5rem; }
.prose-invert { color: #e5e7eb; }
.prose-invert strong { color: #f9fafb; }
.prose-invert a { color: #60a5fa; }
.prose-invert a:hover { color: #3b82f6; }
.prose-invert code { color: #e5e7eb; }
.prose-invert pre { background-color: #1f2937; color: #e5e7eb; }
.prose-invert blockquote { border-left-color: #4b5563; color: #d1d5db; }
.prose-invert table { border-color: #4b5563; }
.prose-invert thead { color: #f9fafb; border-bottom-color: #4b5563; }
.prose-invert tbody tr { border-bottom-color: #374151; }