/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--color-orange-600:oklch(64.6% .222 41.116);--color-amber-600:oklch(66.6% .179 58.318);--color-yellow-500:oklch(79.5% .184 86.047);--color-yellow-600:oklch(68.1% .162 75.834);--color-lime-500:oklch(76.8% .233 130.85);--color-green-600:oklch(62.7% .194 149.214);--color-emerald-500:oklch(69.6% .17 162.48);--color-emerald-600:oklch(59.6% .145 163.225);--color-emerald-700:oklch(50.8% .118 165.612);--color-cyan-600:oklch(60.9% .126 221.723);--color-cyan-700:oklch(52% .105 223.128);--color-sky-600:oklch(58.8% .158 241.966);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-violet-600:oklch(54.1% .281 293.009);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-300:oklch(86.9% .022 252.894);--color-slate-400:oklch(70.4% .04 256.788);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-600:oklch(44.6% .043 257.281);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-900:oklch(20.8% .042 265.755);--color-slate-950:oklch(12.9% .042 264.695);--color-black:#000;--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-widest:.1em;--radius-xl:.75rem;--radius-2xl:1rem;--blur-xl:24px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components{.glass{border-style:var(--tw-border-style);border-width:1px;border-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.glass{border-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.glass{background-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){.glass{background-color:color-mix(in oklab, var(--color-white) 5%, transparent)}}.glass{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-backdrop-blur:blur(var(--blur-xl));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.card{border-radius:var(--radius-2xl);border-style:var(--tw-border-style);border-width:1px;border-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.card{border-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.card{background-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){.card{background-color:color-mix(in oklab, var(--color-white) 5%, transparent)}}.card{padding:calc(var(--spacing) * 4);--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-backdrop-blur:blur(var(--blur-xl));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.btn-primary{border-radius:var(--radius-xl);background-color:var(--color-blue-600);padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-white);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.15s;transition-duration:.15s}@media (hover:hover){.btn-primary:hover{background-color:var(--color-blue-500)}}.btn-dark{border-radius:var(--radius-xl);background-color:var(--color-slate-800);padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-white);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.15s;transition-duration:.15s}@media (hover:hover){.btn-dark:hover{background-color:var(--color-slate-700)}}.inputx{border-radius:var(--radius-xl);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-slate-700);background-color:#1d293dcc}@supports (color:color-mix(in lab, red, red)){.inputx{background-color:color-mix(in oklab, var(--color-slate-800) 80%, transparent)}}.inputx{padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-outline-style:none;outline-style:none}.inputx:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:var(--color-blue-500)}}@layer utilities{.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.inset-0{inset:calc(var(--spacing) * 0)}.top-4{top:calc(var(--spacing) * 4)}.right-4{right:calc(var(--spacing) * 4)}.z-50{z-index:50}.mx-auto{margin-inline:auto}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-2{height:calc(var(--spacing) * 2)}.h-10{height:calc(var(--spacing) * 10)}.h-16{height:calc(var(--spacing) * 16)}.h-20{height:calc(var(--spacing) * 20)}.h-\[75vh\]{height:75vh}.h-\[180px\]{height:180px}.h-full{height:100%}.max-h-\[60vh\]{max-height:60vh}.max-h-\[75vh\]{max-height:75vh}.max-h-full{max-height:100%}.min-h-screen{min-height:100vh}.w-10{width:calc(var(--spacing) * 10)}.w-24{width:calc(var(--spacing) * 24)}.w-28{width:calc(var(--spacing) * 28)}.w-full{width:100%}.max-w-\[1800px\]{max-width:1800px}.max-w-full{max-width:100%}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-\[220px\]{min-width:220px}.min-w-\[420px\]{min-width:420px}.flex-1{flex:1}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-slate-600{border-color:var(--color-slate-600)}.border-slate-800{border-color:var(--color-slate-800)}.bg-amber-600{background-color:var(--color-amber-600)}.bg-black{background-color:var(--color-black)}.bg-black\/20{background-color:#0003}@supports (color:color-mix(in lab, red, red)){.bg-black\/20{background-color:color-mix(in oklab, var(--color-black) 20%, transparent)}}.bg-blue-600{background-color:var(--color-blue-600)}.bg-cyan-600{background-color:var(--color-cyan-600)}.bg-cyan-700{background-color:var(--color-cyan-700)}.bg-emerald-500{background-color:var(--color-emerald-500)}.bg-emerald-600{background-color:var(--color-emerald-600)}.bg-emerald-700{background-color:var(--color-emerald-700)}.bg-green-600{background-color:var(--color-green-600)}.bg-lime-500{background-color:var(--color-lime-500)}.bg-orange-600{background-color:var(--color-orange-600)}.bg-red-600{background-color:var(--color-red-600)}.bg-red-700{background-color:var(--color-red-700)}.bg-sky-600{background-color:var(--color-sky-600)}.bg-slate-700{background-color:var(--color-slate-700)}.bg-slate-800{background-color:var(--color-slate-800)}.bg-slate-900{background-color:var(--color-slate-900)}.bg-slate-950{background-color:var(--color-slate-950)}.bg-transparent{background-color:#0000}.bg-violet-600{background-color:var(--color-violet-600)}.bg-white{background-color:var(--color-white)}.bg-yellow-500{background-color:var(--color-yellow-500)}.bg-yellow-600{background-color:var(--color-yellow-600)}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.p-2{padding:calc(var(--spacing) * 2)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-2{padding-block:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[11px\]{font-size:11px}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.text-black{color:var(--color-black)}.text-slate-200{color:var(--color-slate-200)}.text-slate-300{color:var(--color-slate-300)}.text-slate-400{color:var(--color-slate-400)}.text-slate-500{color:var(--color-slate-500)}.text-white{color:var(--color-white)}.uppercase{text-transform:uppercase}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.hover\:bg-slate-700:hover{background-color:var(--color-slate-700)}}@media (min-width:48rem){.md\:w-\[80\%\]{width:80%}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width:64rem){.lg\:grid-cols-\[280px_1fr\]{grid-template-columns:280px 1fr}.lg\:grid-cols-\[360px_1fr\]{grid-template-columns:360px 1fr}}}html,body{min-height:100%}body{background:radial-gradient(circle at 100% 0,#2563eb40,#0000 30%),radial-gradient(circle at 0 100%,#06b6d42e,#0000 25%),#020617}.scrollbar-thin::-webkit-scrollbar{width:10px;height:10px}.scrollbar-thin::-webkit-scrollbar-thumb{background:#334155;border-radius:9999px}.scrollbar-thin::-webkit-scrollbar-track{background:#0f172a}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}

html, body, iframe, .scroll-area {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* progress bar */
.qp-progress {
  width: 100%;
  height: 6px;
  background: #333;
  border-radius: 4px;
  overflow: hidden;
  margin: 6px 0;
}
.qp-bar {
  height: 100%;
  background: #4caf50;
  width: 0%;
  transition: width 0.3s ease;
}

/* Office / Doc Preview Fix */
.doc-preview,
.doc-preview iframe,
.doc-preview object,
.doc-preview embed {
  background: #ffffff !important;
  color: #111111 !important;
}

#workspace .doc-preview {
  width: 100%;
  height: 100%;
}

#workspace iframe {
  background: #ffffff !important;
}


/* ===== FLUENT UI FINAL PATCH ===== */
:root{
  --bg1:#0b1220;
  --bg2:#111827;
  --glass:rgba(30,41,59,.72);
  --glass2:rgba(51,65,85,.58);
  --border:rgba(148,163,184,.18);
  --text:#f8fafc;
  --muted:#94a3b8;
  --accent:#3b82f6;
  --ok:#10b981;
}

html,body{
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.14), transparent 28%),
    radial-gradient(circle at bottom left, rgba(16,185,129,.10), transparent 25%),
    linear-gradient(180deg,var(--bg1),var(--bg2));
  color:var(--text);
}

body{
  font-family: Inter, Segoe UI, system-ui, sans-serif;
}

header,section{
  background:var(--glass)!important;
  border:1px solid var(--border)!important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    0 8px 30px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.03);
}

input,select,textarea{
  background:rgba(30,41,59,.78)!important;
  color:var(--text)!important;
  border:1px solid var(--border)!important;
  border-radius:14px!important;
}

button{
  border-radius:14px!important;
  border:1px solid rgba(255,255,255,.06);
  transition:all .18s ease;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}
button:hover{
  transform:translateY(-1px);
  filter:brightness(1.06);
}
button:active{
  transform:translateY(0);
}

#files{
  padding-right:4px;
}

#files > div,
.file-card{
  background:var(--glass2)!important;
  border:1px solid var(--border)!important;
  border-radius:18px!important;
  margin-bottom:12px!important;
  padding:12px!important;
  box-shadow:0 6px 18px rgba(0,0,0,.16);
}

#files > div:hover,
.file-card:hover{
  background:rgba(71,85,105,.68)!important;
  transform:translateY(-1px);
}

#workspace{
  background:rgba(2,6,23,.82)!important;
  border:1px solid var(--border)!important;
  border-radius:22px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

#downloadsLive > div{
  background:var(--glass2)!important;
  border:1px solid var(--border)!important;
  border-radius:16px!important;
}

.text-slate-400,.text-slate-500{
  color:var(--muted)!important;
}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.28);
  border-radius:999px;
}
::-webkit-scrollbar-thumb:hover{
  background:rgba(148,163,184,.42);
}


/* ===== WINDOWS 11 SIDEBAR + SPLIT ===== */
.win-shell{
  display:grid;
  grid-template-columns: 420px 8px minmax(0,1fr);
  gap:0;
  min-height:78vh;
  overflow:hidden;
  border-radius:22px;
}

.sidebar{
  min-width:260px;
  background:rgba(30,41,59,.42);
  border-right:1px solid rgba(148,163,184,.12);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.side-top{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:12px;
}

.toolbar{
  padding:0 12px 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.row2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.ctrl,.navbtn,.uploadBtn{
  width:100%;
}

.navbtn,.uploadBtn{
  padding:10px 12px;
  text-align:center;
  cursor:pointer;
}

.filesPane{
  flex:1;
  overflow:auto;
  padding:0 12px 12px;
}

#splitter{
  cursor:col-resize;
  background:linear-gradient(180deg,transparent,rgba(148,163,184,.22),transparent);
}

#splitter:hover{
  background:#3b82f6;
}

.workspace{
  min-width:0;
  height:100%;
  background:rgba(2,6,23,.82);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.emptyState{
  text-align:center;
}

.emptyState .icon{
  font-size:64px;
  opacity:.45;
}

.emptyState .t1{
  font-size:24px;
  color:#e2e8f0;
  margin-top:8px;
}

.emptyState .t2{
  color:#94a3b8;
  margin-top:6px;
}

@media (max-width: 1024px){
  .win-shell{
    grid-template-columns:1fr;
  }
  #splitter{display:none}
  .sidebar{
    border-right:0;
    border-bottom:1px solid rgba(148,163,184,.12);
    max-height:45vh;
  }
}


/* ===== ACTION TOOLBAR ===== */
.actionbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:0 12px 12px;
  border-top:1px solid rgba(148,163,184,.10);
  margin-top:2px;
}

.toolbtn{
  padding:8px 10px;
  font-size:13px;
  line-height:1;
  border-radius:12px!important;
  background:rgba(51,65,85,.55);
  color:#e5e7eb;
  border:1px solid rgba(148,163,184,.14);
  cursor:pointer;
  white-space:nowrap;
}

.toolbtn:hover{
  background:rgba(71,85,105,.75);
}

.toolbtn.danger:hover{
  background:rgba(127,29,29,.85);
}

.toolsep{
  width:1px;
  align-self:stretch;
  background:rgba(148,163,184,.14);
  margin:0 2px;
}

@media (max-width:1024px){
  .actionbar{
    overflow:auto;
    flex-wrap:nowrap;
    padding-bottom:10px;
  }
}


/* ===== CONTROL PANE ===== */
.controlPane{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.cp-row{
  display:flex;
  gap:8px;
  align-items:center;
}
.cp-row.wrap{
  flex-wrap:wrap;
}
.cp-row .ctrl{
  min-width:160px;
}
.sidebar{
  padding:12px;
}
.thumbsOnly{
  padding:0!important;
}
.thumbsOnly > div,
#files > div{
  margin-bottom:10px;
}

/* left pane only thumbnails/cards */
.sidebar .side-top,
.sidebar .toolbar,
.sidebar .actionbar{
  display:none!important;
}

@media (max-width:1024px){
  .cp-row{
    flex-wrap:wrap;
  }
}


/* ===== THUMBNAIL 50% + INLINE RENAME ===== */
#files > div,
.file-card{
  transform-origin: top center;
}

.filesPane .thumb,
.filesPane img,
.filesPane video,
.filesPane canvas{
  max-width:50% !important;
  width:50% !important;
  height:auto !important;
  margin:0 auto 8px auto;
  display:block;
}

.file-name-edit{
  width:100%;
  background:transparent;
  border:1px dashed rgba(148,163,184,.25);
  color:#e5e7eb;
  border-radius:10px;
  padding:6px 8px;
  outline:none;
}

.file-name-label{
  cursor:text;
  user-select:text;
}


/* ===== LEFT PANE 15% ===== */
.win-shell{
  grid-template-columns:15% 8px minmax(0,1fr) !important;
}

.toolbar.compact{
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.toolbar.compact .row2{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
}

.sidebar{
  min-width:180px;
}

@media (max-width:1024px){
  .win-shell{
    grid-template-columns:1fr !important;
  }
}


/* ===== FILE CARD PERFECT LAYOUT ===== */
#files > div,
.file-card{
  position:relative;
  display:grid !important;
  grid-template-columns:72px 1fr auto;
  grid-template-rows:auto auto;
  gap:6px 12px;
  align-items:center;
  min-height:92px;
  padding:12px 14px !important;
}

.file-card img,
.file-card video,
.file-card canvas,
.file-card .thumb{
  width:72px !important;
  height:72px !important;
  object-fit:cover;
  border-radius:10px;
  grid-row:1 / span 2;
}

.file-name,
.file-name-label{
  grid-column:2;
  grid-row:2;
  font-size:14px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.file-meta{
  grid-column:3;
  grid-row:2;
  text-align:right;
  font-size:12px;
  color:#94a3b8;
}

.file-delete,
.delete-btn{
  position:absolute !important;
  top:10px;
  right:10px;
  width:28px;
  height:28px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#dc2626 !important;
  color:#fff !important;
  font-size:14px;
}


/* ===== FINAL DRAFT UI ===== */
:root{
  --bg:#0b1423;
  --panel:#101c2e;
  --panel2:#132238;
  --line:#213553;
  --text:#e8eef9;
  --muted:#91a4c3;
  --blue:#2f6df6;
  --green:#22c55e;
  --red:#ef4444;
}

html,body{
  background:linear-gradient(180deg,#09111f,#0b1423);
  color:var(--text);
}

/* top cards */
header,section{
  background:var(--panel)!important;
  border:1px solid var(--line)!important;
  border-radius:18px!important;
  box-shadow:0 10px 28px rgba(0,0,0,.22);
}

/* controls */
input,select,textarea{
  background:var(--panel2)!important;
  color:var(--text)!important;
  border:1px solid var(--line)!important;
  border-radius:12px!important;
}

button,.toolbtn,.navbtn,.uploadBtn{
  background:var(--panel2)!important;
  color:var(--text)!important;
  border:1px solid var(--line)!important;
  border-radius:12px!important;
}
button:hover,.toolbtn:hover,.navbtn:hover,.uploadBtn:hover{
  filter:brightness(1.08);
}

.bg-blue-600{background:var(--blue)!important;border-color:#3f7cff!important}
.bg-emerald-700{background:#0f8a5f!important}

/* shell */
.win-shell{
  display:grid;
  grid-template-columns:420px 14px minmax(0,1fr)!important;
  gap:12px;
  min-height:78vh;
}

.sidebar{
  background:transparent!important;
  border:0!important;
  min-width:280px;
  overflow:hidden;
}

.workspace{
  background:var(--panel2)!important;
  border:1px solid var(--line)!important;
  border-radius:18px!important;
  overflow:hidden;
}

/* splitter */
#splitter{
  width:14px;
  border-radius:999px;
  background:linear-gradient(180deg,#16263f,#1d3150);
  cursor:col-resize;
  position:relative;
}
#splitter:after{
  content:"⋮";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#8ea2c0;
  font-size:22px;
}

/* file list */
.filesPane{
  padding:0!important;
  overflow:auto;
  height:100%;
}

#files > div,
.file-card{
  position:relative;
  display:grid!important;
  grid-template-columns:64px 1fr auto;
  grid-template-rows:auto auto;
  gap:4px 12px;
  align-items:center;
  background:var(--panel2)!important;
  border:1px solid var(--line)!important;
  border-radius:14px!important;
  min-height:86px;
  padding:10px 12px!important;
  margin-bottom:8px!important;
}

#files img,#files video,#files canvas,.thumb{
  width:64px!important;
  height:64px!important;
  object-fit:cover;
  border-radius:10px;
  grid-row:1 / span 2;
}

.file-name,.file-name-label{
  grid-column:2;
  grid-row:2;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:text;
}

.file-meta{
  grid-column:3;
  grid-row:2;
  text-align:right;
  color:var(--muted);
  font-size:12px;
  line-height:1.25;
}

.file-delete,.delete-btn{
  position:absolute!important;
  top:8px;
  right:8px;
  width:28px;
  height:28px;
  border-radius:999px!important;
  background:var(--red)!important;
  color:#fff!important;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0!important;
}

/* toolbar rows */
.controlPane{display:flex;flex-direction:column;gap:10px}
.cp-row{display:flex;gap:8px;align-items:center}
.cp-row.wrap{flex-wrap:wrap}

/* text */
.text-slate-400,.text-slate-500{color:var(--muted)!important}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#22385a;border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:#2f4b76}

@media (max-width:1024px){
  .win-shell{grid-template-columns:1fr!important}
  #splitter{display:none}
}


/* ===== ICON UI + REAL SPLITTER ===== */
.toolbtn,.navbtn,.uploadBtn{
  display:inline-flex!important;
  align-items:center;
  gap:8px;
  justify-content:center;
  min-height:42px;
  padding:10px 12px!important;
}

.toolbtn i,.navbtn i,.uploadBtn i{
  font-size:16px;
  line-height:1;
}

.toolbtn span,.navbtn span,.uploadBtn span{
  font-size:13px;
}

#splitter{
  user-select:none;
  transition:background .15s ease;
}
#splitter:hover{
  background:#2f6df6!important;
}
#splitter.dragging{
  background:#3b82f6!important;
  box-shadow:0 0 0 3px rgba(59,130,246,.15);
}

#splitter:after{
  content:"";
  width:4px;
  height:42px;
  border-radius:99px;
  background:
    radial-gradient(circle,#90a4c6 1.2px,transparent 1.2px) center/4px 8px repeat-y;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}


/* ===== LEFT SORT + UPLOAD ===== */
.thumbTopBar{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:0 0 10px 0;
}

.thumbTopBar .ctrl,
.thumbTopBar .uploadBtn{
  width:100%;
}

.sidebar{
  padding:12px;
}

.filesPane{
  height:calc(100% - 96px);
}


/* ===== SORT + UPLOAD INLINE ===== */
.thumbTopBar.row{
  display:grid !important;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:center;
}

.thumbTopBar .flex1{
  min-width:0;
}

.uploadBtn.mini{
  min-width:110px;
  white-space:nowrap;
}


/* ===== FILE NAME UNDER THUMB ===== */
#files > div,
.file-card{
  grid-template-columns:64px 1fr auto !important;
  grid-template-rows:auto auto auto !important;
  align-items:start !important;
}

.file-name,
.file-name-label{
  grid-column:1 / span 3 !important;
  grid-row:3 !important;
  margin-top:6px;
  font-size:12px !important;
  line-height:1.15 !important;
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.file-meta{
  grid-column:2 / span 2 !important;
  grid-row:2 !important;
  align-self:end;
  font-size:11px !important;
}

#files img,
#files video,
#files canvas,
.thumb{
  grid-column:1 !important;
  grid-row:1 / span 2 !important;
}


/* ===== AFTER SORT REMOVE ===== */
.thumbTopBar.only-upload{
  display:flex !important;
  justify-content:flex-end;
}


/* ===== SEARCH + SORT + UPLOAD LEFT ===== */
.thumbTopBar.stack{
  display:flex!important;
  flex-direction:column;
  gap:8px;
}

.thumbRow{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:center;
}

.thumbTopBar .ctrl{
  width:100%;
}

.uploadBtn.mini{
  min-width:110px;
}


/* ===== FOLDER TREE 20 LEVEL ===== */
.folderTree{
  max-height:38%;
  overflow:auto;
  margin-bottom:10px;
  padding:6px;
  border:1px solid rgba(148,163,184,.10);
  border-radius:12px;
  background:rgba(19,34,56,.55);
}

.tree-node{
  padding:4px 6px;
  border-radius:8px;
  cursor:pointer;
  color:#cbd5e1;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.tree-node:hover{
  background:rgba(47,109,246,.15);
}

.tree-children{
  margin-left:14px;
  border-left:1px dashed rgba(148,163,184,.12);
  padding-left:8px;
}


/* ===== LEFT PANE MATCH MOCKUP ===== */
#files > div,
.file-card{
  position:relative;
  display:grid !important;
  grid-template-columns:78px 1fr auto !important;
  grid-template-rows:1fr auto !important;
  gap:6px 14px;
  align-items:center;
  min-height:96px;
  padding:12px 14px !important;
}

#files img,
#files video,
#files canvas,
.thumb{
  width:78px !important;
  height:78px !important;
  border-radius:12px;
  object-fit:cover;
  grid-column:1;
  grid-row:1 / span 2;
}

.file-name,
.file-name-label{
  grid-column:2;
  grid-row:1;
  align-self:end;
  font-size:13px !important;
  line-height:1.15;
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin:0 !important;
}

.file-meta{
  grid-column:2;
  grid-row:2;
  align-self:start;
  display:flex !important;
  gap:10px;
  flex-wrap:wrap;
  font-size:11px !important;
  color:#9db0cf !important;
}

.file-delete,
.delete-btn{
  position:absolute !important;
  top:10px;
  right:10px;
  width:30px;
  height:30px;
  border-radius:999px !important;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* if old meta is stacked, normalize children */
.file-meta > *{
  display:inline-flex;
  align-items:center;
}


/* ===== PERFECT SQUARE THUMB ===== */
#files img,
#files video,
#files canvas,
.thumb,
.file-card img,
.file-card video,
.file-card canvas{
  width:78px !important;
  height:78px !important;
  min-width:78px !important;
  min-height:78px !important;
  max-width:78px !important;
  max-height:78px !important;
  aspect-ratio:1 / 1 !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block;
  overflow:hidden;
  border-radius:12px;
}


/* ===== HEADER HEALTH REDESIGN ===== */
.headerRight{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.healthBar{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.healthChip{
  min-width:74px;
  padding:8px 10px;
  border-radius:14px;
  background:rgba(19,34,56,.9);
  border:1px solid rgba(148,163,184,.14);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  line-height:1.05;
}

.healthChip b{
  font-size:15px;
  color:#f8fafc;
}

.healthChip small{
  font-size:10px;
  color:#94a3b8;
  margin-top:4px;
}

.healthChip.online{
  min-width:auto;
  flex-direction:row;
  gap:8px;
  padding:8px 12px;
}

.healthChip .dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:#22c55e;
  box-shadow:0 0 10px rgba(34,197,94,.55);
}

.readyChip{
  padding:10px 14px;
  border-radius:999px;
  background:linear-gradient(180deg,#1e3a5f,#132238);
  border:1px solid rgba(148,163,184,.16);
  font-size:13px;
  font-weight:600;
}

@media (max-width:1024px){
  .headerRight{
    justify-content:flex-start;
  }
}


/* ===== DOWNLOAD BAR FIX ===== */
.downloadBar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:10px;
  align-items:center;
}

.dlInput{
  width:100%;
  min-width:0;
}

.dlBtn{
  min-width:110px;
  height:42px;
  padding:0 14px;
  white-space:nowrap;
}

.dlBtn.primary{
  background:#2f6df6 !important;
}

.downloadsGrid{
  display:grid;
  gap:10px;
}

/* each download item prevent overlap */
#downloadsLive > div{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:12px !important;
}

#downloadsLive .title,
#downloadsLive .name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#downloadsLive .meta,
#downloadsLive .right,
#downloadsLive .status{
  text-align:right;
  white-space:nowrap;
}

@media (max-width:900px){
  .downloadBar{
    grid-template-columns:1fr;
  }
  .dlBtn{
    width:100%;
  }

  #downloadsLive > div{
    grid-template-columns:1fr;
  }
}


/* ===== DOWNLOAD BUTTONS MATCH CONTROL ===== */
.dlBtn{
  background:var(--panel2) !important;
  color:var(--text) !important;
  border:1px solid var(--line) !important;
  border-radius:12px !important;
  min-width:110px;
  height:42px;
  padding:0 14px;
  box-shadow:none !important;
}

.dlBtn.primary{
  background:var(--panel2) !important;
  border:1px solid var(--line) !important;
}

.dlBtn:hover{
  filter:brightness(1.08);
}


/* ===== MINI ICON DOWNLOAD BUTTONS ===== */
.dlBtn{
  min-width:42px !important;
  width:42px;
  height:42px;
  padding:0 !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.dlBtn i{
  font-size:16px;
  line-height:1;
}


/* ===== OUTPUT FILE NAME INPUT ===== */
.downloadBar{
  grid-template-columns:minmax(0,1.6fr) minmax(180px,.8fr) auto auto !important;
}

.dlName{
  width:100%;
  min-width:0;
}

@media (max-width:900px){
  .downloadBar{
    grid-template-columns:1fr !important;
  }
}
\n
/* ===== FULL REPAIR DOWNLOAD BAR ===== */
.downloadBar{
  display:grid !important;
  grid-template-columns:minmax(0,1.8fr) minmax(220px,1fr) 42px 42px;
  gap:10px;
  align-items:center;
}

.dlInput,.dlName{
  width:100%;
  min-width:0;
}

.dlBtn{
  width:42px;
  height:42px;
  padding:0 !important;
  display:flex;
  align-items:center;
  justify-content:center;
}

@media (max-width:900px){
  .downloadBar{
    grid-template-columns:1fr !important;
  }
  .dlBtn{
    width:100%;
  }
}


/* ===== ULTIMATE V3 ===== */
.downloadBar{
 display:grid;
 grid-template-columns:minmax(0,1.7fr) minmax(220px,1fr) 42px 42px;
 gap:10px;
 align-items:center;
 padding:8px;
 border:1px solid rgba(255,255,255,.08);
 border-radius:14px;
 background:rgba(255,255,255,.03);
 backdrop-filter: blur(12px);
}
.dlInput,.dlName{
 height:42px;
 border-radius:12px;
 padding:0 12px;
 border:1px solid rgba(255,255,255,.08);
 background:#0f172a;
 color:#fff;
}
.dlBtn{
 width:42px;height:42px;border-radius:12px;
 display:flex;align-items:center;justify-content:center;
 border:1px solid rgba(255,255,255,.08);
 background:#111827;color:#fff;
}
.dlBtn.primary{background:#2563eb}


/* ===== ULTIMATE V4 ===== */
#ffBox{
 position:fixed;right:20px;bottom:20px;width:320px;
 background:#0f172a;color:#fff;padding:14px;border-radius:14px;
 border:1px solid rgba(255,255,255,.08);z-index:9999;
 box-shadow:0 10px 30px rgba(0,0,0,.35)
}
.ffHead{font-weight:700;margin-bottom:8px}
.ffRow{display:flex;gap:8px;margin-top:10px}
.ffRow button{
 flex:1;height:36px;border-radius:10px;border:none;
 background:#1e293b;color:#fff
}


/* ===== HLS MASTER DETECTOR V5 ===== */
#hlsBox{
 position:fixed;left:50%;top:50%;
 transform:translate(-50%,-50%);
 width:360px;max-width:95vw;
 background:#0f172a;color:#fff;
 border:1px solid rgba(255,255,255,.08);
 border-radius:16px;padding:14px;z-index:10000;
 box-shadow:0 20px 60px rgba(0,0,0,.45)
}
.hlsHead{font-size:18px;font-weight:700;margin-bottom:10px}
.hlsBtn,.hlsClose{
 width:100%;height:42px;margin-top:8px;
 border:none;border-radius:12px;
 background:#1e293b;color:#fff
}
.hlsBtn:hover{background:#2563eb}


/* ===== SMART PATH MANAGER V9 ===== */
#pathManager{
  margin:8px 0 10px 0;
}
.pmBar{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:space-between;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  border-radius:14px;
}
.pmCurrent{
  min-width:0;
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
}
.pmActions{
  display:flex;
  gap:6px;
}
.pmMini{
  width:32px;
  height:32px;
  border:none;
  border-radius:10px;
  background:#1e293b;
  color:#fff;
  cursor:pointer;
}
.pmGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:10px;
}
.pmGroup{
  padding:8px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.02);
}
.pmTitle{
  font-size:12px;
  opacity:.8;
  margin-bottom:8px;
}
.pmBtn{
  width:100%;
  text-align:left;
  margin-top:6px;
  padding:8px 10px;
  border:none;
  border-radius:10px;
  background:#0f172a;
  color:#fff;
  font-size:12px;
  cursor:pointer;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.pmBtn:hover{
  background:#2563eb;
}

/* ==========================================================
   UI PATCH v11 — Refined Dark  |  append end of app.css
   ========================================================== */

/* ── design tokens ── */
:root{
  --c-bg:       #080f1a;
  --c-panel:    #0d1726;
  --c-panel2:   #111f33;
  --c-panel3:   #162440;
  --c-border:   rgba(100,140,200,.13);
  --c-border2:  rgba(100,140,200,.22);
  --c-text:     #ccdaf0;
  --c-muted:    #5a7a9e;
  --c-dim:      #304560;
  --c-accent:   #2d6af5;
  --c-accent2:  #1a4db0;
  --c-ok:       #16a05a;
  --c-warn:     #d97b10;
  --c-danger:   #c92b2b;
  --c-done:     #0f7a48;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  20px;
}

html,body{
  background: radial-gradient(ellipse 70% 50% at 80% -10%, rgba(30,80,200,.08), transparent),
              radial-gradient(ellipse 50% 40% at -10% 90%, rgba(10,120,80,.06), transparent),
              linear-gradient(180deg, #070e1a 0%, #080f1c 100%);
  color: var(--c-text);
  font-family: 'Inter','SF Pro Display','Segoe UI',system-ui,sans-serif;
  min-height: 100vh;
}

/* ── sections / header ── */
header, section{
  background: rgba(13,23,38,.88) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset,
              0 12px 32px rgba(0,0,0,.28);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
}

/* ── inputs / selects ── */
input, select, textarea{
  background: rgba(8,15,28,.85) !important;
  border: 1px solid var(--c-border) !important;
  color: var(--c-text) !important;
  border-radius: var(--r-md) !important;
  font-size: 13px;
  transition: border-color .15s;
}
input:focus, select:focus{
  border-color: rgba(45,106,245,.5) !important;
  outline: none;
}
::placeholder{ color: var(--c-dim) !important; }

/* ── buttons ── */
button, .toolbtn, .navbtn, .uploadBtn{
  background: var(--c-panel3) !important;
  color: var(--c-text) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-md) !important;
  transition: background .15s, border-color .18s, transform .1s;
  font-size: 13px;
}
button:hover, .toolbtn:hover, .navbtn:hover, .uploadBtn:hover{
  background: rgba(30,50,90,.9) !important;
  border-color: var(--c-border2) !important;
  transform: translateY(-1px);
  filter: none !important;
}
button:active{ transform: translateY(0) !important; }

/* ── app shell grid ── */
#appShell, .win-shell{
  display: grid !important;
  grid-template-columns: 380px 12px minmax(0,1fr) !important;
  gap: 0 !important;
  min-height: 78vh;
  overflow: hidden;
  border-radius: var(--r-xl);
}
@media(max-width:1024px){
  #appShell, .win-shell{ grid-template-columns: 1fr !important; }
  #splitter{ display: none !important; }
}

/* ── sidebar ── */
.sidebar{
  background: rgba(9,16,30,.6) !important;
  border: 0 !important;
  border-right: 1px solid var(--c-border) !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 14px !important;
  min-width: 0;
}

/* ── splitter ── */
#splitter{
  width: 12px !important;
  background: var(--c-panel) !important;
  border-left:  1px solid var(--c-border) !important;
  border-right: 1px solid var(--c-border) !important;
  cursor: col-resize !important;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  user-select: none;
  flex-shrink: 0;
}
#splitter::after{
  content: '' !important;
  width: 2px;
  height: 36px;
  border-radius: 99px;
  background: radial-gradient(circle, var(--c-dim) 1.2px, transparent 1.2px)
    center/2px 6px repeat-y;
}
#splitter:hover, #splitter.dragging{
  background: rgba(45,106,245,.12) !important;
  border-color: rgba(45,106,245,.3) !important;
}
#splitter.dragging::after{ background: radial-gradient(circle, var(--c-accent) 1.2px, transparent 1.2px) center/2px 6px repeat-y; }

/* ── workspace ── */
.workspace{
  background: rgba(5,10,20,.92) !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 100%;
  min-width: 0;
}
.emptyState .icon{ font-size: 52px; opacity: .2; }
.emptyState .t1  { font-size: 18px; color: #7090b8; margin-top: 12px; font-weight: 500; }
.emptyState .t2  { color: var(--c-dim); margin-top: 6px; font-size: 12px; }

/* ── file cards ── */
#files > div, .file-card{
  position: relative;
  display: grid !important;
  grid-template-columns: 64px 1fr auto !important;
  grid-template-rows: 1fr auto !important;
  gap: 3px 12px !important;
  align-items: center !important;
  background: rgba(12,20,38,.7) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-lg) !important;
  min-height: 84px !important;
  padding: 10px 12px !important;
  margin-bottom: 7px !important;
  cursor: pointer;
  transition: background .14s, border-color .14s, transform .1s;
}
#files > div:hover, .file-card:hover{
  background: rgba(20,36,68,.85) !important;
  border-color: rgba(45,106,245,.25) !important;
  transform: translateY(-1px);
}
#files img,#files video,#files canvas,.thumb,
.file-card img,.file-card video,.file-card canvas{
  width:64px!important; height:64px!important;
  min-width:64px!important; min-height:64px!important;
  max-width:64px!important; max-height:64px!important;
  aspect-ratio:1!important; object-fit:cover!important;
  object-position:center!important;
  border-radius: var(--r-sm);
  grid-column:1!important; grid-row:1/span 2!important;
  display:block; overflow:hidden;
  background: var(--c-panel3);
}
.file-name,.file-name-label{
  grid-column:2!important; grid-row:1!important;
  font-size:13px!important; font-weight:500;
  line-height:1.2; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
  color:#b8d4f2; align-self:end!important; margin:0!important;
}
.file-meta{
  grid-column:2!important; grid-row:2!important;
  display:flex!important; gap:8px;
  font-size:11px!important; color:var(--c-muted)!important;
  align-self:start!important;
}
.file-delete,.delete-btn{
  position:absolute!important; top:8px; right:8px;
  width:24px; height:24px;
  border-radius:999px!important;
  background:rgba(180,30,30,.6)!important;
  border:0!important; color:#fff!important;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; opacity:0; transition:opacity .14s;
}
#files>div:hover .file-delete,
.file-card:hover .file-delete,
#files>div:hover .delete-btn,
.file-card:hover .delete-btn{ opacity:1; }

/* ── folder tree ── */
.folderTree{
  max-height:38%; overflow:auto;
  margin-bottom:10px; padding:6px;
  border:1px solid var(--c-border);
  border-radius:var(--r-md);
  background:rgba(7,13,26,.55);
}
.tree-node{
  padding:5px 8px; border-radius:var(--r-sm);
  cursor:pointer; color:#6888aa; font-size:12px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:background .12s,color .12s;
}
.tree-node:hover{ background:rgba(45,106,245,.14); color:#a0c0e8; }
.tree-children{ margin-left:12px; border-left:1px dashed rgba(100,140,200,.1); padding-left:8px; }

/* ── pane top bar ── */
.thumbTopBar.stack{ display:flex!important; flex-direction:column; gap:8px; padding-bottom:10px; }
.thumbRow{ display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; }
.filesPane{ flex:1; overflow:auto; padding:0 3px 12px 0!important; height:calc(100% - 108px); }

/* ── control pane ── */
.controlPane{ display:flex; flex-direction:column; gap:10px; }
.cp-row{ display:flex; gap:8px; align-items:center; }
.cp-row.wrap{ flex-wrap:wrap; }
.toolbtn{
  display:inline-flex!important;
  align-items:center; gap:6px; justify-content:center;
  min-height:38px; padding:8px 12px!important;
}
.toolbtn i{ font-size:15px; line-height:1; }
.toolbtn span{ font-size:12px; }
.toolsep{ width:1px; align-self:stretch; background:var(--c-border); margin:0 2px; }

/* ── download bar ── */
.downloadBar{
  display:grid!important;
  grid-template-columns:minmax(0,1.8fr) minmax(160px,.8fr) 40px 40px!important;
  gap:10px; align-items:center;
}
.dlInput,.dlName{ height:40px; border-radius:var(--r-md)!important; padding:0 12px; }
.dlBtn{
  width:40px!important; height:40px!important; padding:0!important;
  display:flex!important; align-items:center; justify-content:center;
  border-radius:var(--r-md)!important; min-width:unset!important;
}
.dlBtn.primary{ background:rgba(30,74,200,.6)!important; border-color:rgba(45,106,245,.4)!important; }
.dlBtn.primary:hover{ background:rgba(45,106,245,.75)!important; }
@media(max-width:900px){
  .downloadBar{ grid-template-columns:1fr!important; }
  .dlBtn{ width:100%!important; }
}

/* ── downloads live ── */
.downloadsGrid{ display:flex; flex-direction:column; gap:8px; }
#downloadsLive>div{
  background:var(--c-panel2)!important;
  border:1px solid var(--c-border)!important;
  border-radius:var(--r-lg)!important;
  padding:12px!important;
}

/* ────────────────────────────────────────────
   FFmpeg progress cards
   ──────────────────────────────────────────── */
#ffmpegProgress{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:10px;
}

.ff-card{
  background: linear-gradient(135deg, rgba(15,28,52,.92), rgba(10,20,40,.92));
  border: 1px solid rgba(45,106,245,.22);
  border-radius: var(--r-lg);
  padding: 12px 14px 10px;
  position: relative;
  overflow: hidden;
}
.ff-card::before{
  content:'';
  position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg,transparent,rgba(45,106,245,.35),transparent);
}

.ff-top{
  display:grid;
  grid-template-columns:32px 1fr auto;
  gap:10px;
  align-items:start;
  margin-bottom:10px;
}

.ff-icon{
  width:32px; height:32px;
  border-radius:var(--r-sm);
  background: rgba(45,106,245,.15);
  border: 1px solid rgba(45,106,245,.25);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; color:var(--c-accent);
  animation: ff-spin 2s linear infinite;
}
@keyframes ff-spin{
  0%{box-shadow:0 0 0 0 rgba(45,106,245,.0)}
  50%{box-shadow:0 0 8px 2px rgba(45,106,245,.18)}
  100%{box-shadow:0 0 0 0 rgba(45,106,245,.0)}
}

.ff-info{ min-width:0; }
.ff-name{
  font-size:13px; font-weight:500; color:#b8d4f2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin-bottom:5px;
}
.ff-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

.ff-badge{
  font-size:10px; font-weight:600; letter-spacing:.04em;
  padding:2px 7px; border-radius:99px;
  border:1px solid transparent;
}
.ffs-run{ background:rgba(45,106,245,.15); border-color:rgba(45,106,245,.3); color:#80aaee; }
.ffs-done{ background:rgba(22,160,90,.15); border-color:rgba(22,160,90,.3); color:#50d890; }
.ffs-err{ background:rgba(200,44,44,.15); border-color:rgba(200,44,44,.3); color:#f08080; }
.ffs-stop{ background:rgba(160,120,20,.15); border-color:rgba(160,120,20,.3); color:#d4a040; }

.ff-elapsed{ font-size:11px; color:var(--c-muted); font-variant-numeric:tabular-nums; }
.ff-pos{ font-size:11px; color:#4a7aaa; font-variant-numeric:tabular-nums; }
.ff-errtxt{ font-size:11px; color:#f08080; margin-top:4px; }

.ff-btns{ display:flex; flex-direction:column; gap:6px; }
.ff-action{
  font-size:11px!important; padding:5px 10px!important;
  border-radius:var(--r-sm)!important; min-height:unset!important;
  white-space:nowrap;
}
.ff-stop-btn{ background:rgba(180,30,30,.25)!important; border-color:rgba(200,44,44,.3)!important; color:#f08080!important; }
.ff-stop-btn:hover{ background:rgba(180,30,30,.5)!important; }
.ff-dismiss-btn{ background:rgba(40,60,100,.4)!important; color:var(--c-muted)!important; }

/* Progress track */
.ff-track{
  height:3px;
  background:rgba(45,106,245,.1);
  border-radius:99px;
  overflow:hidden;
}
.ff-fill{ height:100%; border-radius:99px; }

.ffb-run{
  width:45%;
  background: linear-gradient(90deg, transparent, var(--c-accent), transparent);
  animation: ff-sweep 1.6s ease-in-out infinite;
}
@keyframes ff-sweep{
  0%{transform:translateX(-120%)}
  100%{transform:translateX(280%)}
}

.ffb-done{
  width:100%;
  background: linear-gradient(90deg, var(--c-ok), #26e896);
}
.ffb-err{
  width:100%;
  background: linear-gradient(90deg, var(--c-danger), #f05555);
}

/* ── header health ── */
.headerRight{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.healthBar{ display:flex; gap:6px; flex-wrap:wrap; }
.healthChip{
  min-width:64px; padding:7px 10px;
  border-radius:var(--r-md)!important;
  background:rgba(8,15,28,.9)!important;
  border:1px solid var(--c-border)!important;
  display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.05;
}
.healthChip b{ font-size:15px; color:var(--c-text); }
.healthChip small{ font-size:10px; color:var(--c-muted); margin-top:3px; }
.healthChip.online{ min-width:auto; flex-direction:row; gap:8px; padding:7px 12px; }
.healthChip .dot{
  width:8px; height:8px; border-radius:999px;
  background:#22c55e;
  box-shadow:0 0 8px rgba(34,197,94,.5);
  animation:pulse-dot 2s ease infinite;
}
@keyframes pulse-dot{
  0%,100%{box-shadow:0 0 8px rgba(34,197,94,.5)}
  50%{box-shadow:0 0 14px rgba(34,197,94,.8)}
}
.readyChip{
  padding:9px 14px; border-radius:99px;
  background:rgba(10,20,40,.9);
  border:1px solid var(--c-border)!important;
  font-size:12px; font-weight:600; letter-spacing:.02em;
}

/* ── HLS dialog ── */
#hlsBox{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  width:320px; max-width:92vw;
  background:rgba(9,16,30,.97);
  border:1px solid rgba(45,106,245,.25);
  border-radius:var(--r-xl); padding:18px;
  z-index:10000;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  backdrop-filter:blur(24px);
}
.hlsHead{ font-size:15px; font-weight:600; margin-bottom:12px; color:#90b8e8; }
.hlsBtn{
  width:100%!important; height:40px; margin-top:7px;
  border-radius:var(--r-md)!important;
  background:var(--c-panel3)!important;
  border:1px solid var(--c-border)!important;
  color:var(--c-text)!important; font-size:13px; text-align:left; padding:0 12px!important;
}
.hlsBtn:hover{ background:rgba(45,106,245,.25)!important; border-color:rgba(45,106,245,.4)!important; }
.hlsClose{
  width:100%!important; height:36px; margin-top:12px;
  border-radius:var(--r-md)!important;
  background:rgba(30,15,15,.7)!important;
  border:1px solid rgba(200,44,44,.2)!important;
  color:#d87070!important; font-size:12px;
}

/* ── scrollbars ── */
::-webkit-scrollbar{ width:5px; height:5px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(60,100,160,.3); border-radius:99px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(60,100,160,.55); }

/* ── path manager ── */
.pmBar{ display:flex; gap:8px; align-items:center; padding:8px 10px; border:1px solid var(--c-border); background:rgba(8,15,28,.6); border-radius:var(--r-md); }
.pmCurrent{ min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; color:var(--c-muted); }
.pmActions{ display:flex; gap:5px; }
.pmMini{ width:28px!important; height:28px!important; padding:0!important; border-radius:var(--r-sm)!important; font-size:13px; }
.pmGrid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.pmGroup{ padding:8px; border:1px solid var(--c-border); border-radius:var(--r-md); background:rgba(8,15,28,.4); }
.pmTitle{ font-size:11px; color:var(--c-dim); margin-bottom:6px; }
.pmBtn{ width:100%!important; text-align:left!important; margin-top:5px!important; padding:6px 9px!important; border-radius:var(--r-sm)!important; font-size:11px!important; color:var(--c-muted)!important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pmBtn:hover{ background:rgba(45,106,245,.18)!important; color:var(--c-text)!important; }

/* ==========================================================
   END PATCH v11
   ========================================================== */
/* append to end of app.css — sidebar no-tree layout */

.thumbTopBar.stack{
  display:flex!important;
  flex-direction:column;
  gap:8px;
  padding-bottom:12px;
  border-bottom:1px solid var(--c-border, rgba(100,140,200,.13));
  margin-bottom:10px;
}

.thumbTopBar.stack .ctrl,
.thumbTopBar.stack .uploadBtn{
  width:100%;
}

/* filesPane fills remaining height */
.filesPane{
  flex:1;
  overflow:auto;
  padding:0 3px 12px 0!important;
  min-height:0;
}

/* upload button style match toolbtn */
.uploadBtn{
  background:var(--c-panel3, #162440)!important;
  border:1px solid var(--c-border, rgba(100,140,200,.13))!important;
  border-radius:12px!important;
  color:var(--c-text, #ccdaf0)!important;
  font-size:13px;
}
.uploadBtn:hover{
  background:rgba(30,50,90,.9)!important;
  border-color:rgba(45,106,245,.3)!important;
}
/* ── SYSMON HEADER v1 ── */
.hdr-wrap{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:20px;
  align-items:center;
}
@media(max-width:1024px){
  .hdr-wrap{ grid-template-columns:1fr; gap:12px; }
  .sysmon{ justify-content:flex-start; }
}

.hdr-title h1{ font-size:20px; font-weight:700; white-space:nowrap; }
.hdr-title p { font-size:12px; color:var(--c-muted,#5a7a9e); margin-top:2px; white-space:nowrap; }

/* ── monitor cards row ── */
.sysmon{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}

.smon-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:8px 12px;
  background:rgba(8,15,28,.75);
  border:1px solid rgba(100,140,200,.13);
  border-radius:14px;
  min-width:72px;
  transition:border-color .2s;
}
.smon-card:hover{ border-color:rgba(100,140,200,.28); }

.smon-label{
  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
  color:#3a5a7a;
  text-transform:uppercase;
}

/* SVG ring */
.smon-ring-wrap{
  position:relative;
  width:44px; height:44px;
}
.smon-ring{
  width:44px; height:44px;
  transform:rotate(-90deg);
}
.ring-bg{
  fill:none;
  stroke:rgba(100,140,200,.1);
  stroke-width:3;
}
.ring-fg{
  fill:none;
  stroke-width:3;
  stroke-linecap:round;
  transition:stroke-dasharray .5s ease;
}
.ring-cpu  { stroke:#3b82f6; }
.ring-mem  { stroke:#8b5cf6; }
.ring-gpu  { stroke:#10b981; }
.ring-disk { stroke:#f59e0b; }

/* horizontal resource bars */
.smon-bar-card{
  min-width:118px;
  align-items:stretch;
  justify-content:center;
}
.smon-bar-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.smon-bar-card .smon-pct{
  position:static;
  inset:auto;
  font-size:11px;
  font-weight:700;
  color:#c8d8f0;
  font-variant-numeric:tabular-nums;
}
.smon-bar{
  width:100%;
  height:7px;
  border-radius:5px;
  background:rgba(100,140,200,.12);
  overflow:hidden;
}
.smon-bar-fill{
  height:100%;
  width:0%;
  border-radius:5px;
  background:#22c55e;
  transition:width .5s ease, background .5s ease;
}
.smon-bar-card .smon-sub{ text-align:left; }

.smon-pct{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:700;
  color:#c8d8f0;
  font-variant-numeric:tabular-nums;
}

.smon-sub{
  font-size:9px;
  color:#3a5a7a;
  text-align:center;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  min-height:11px;
}

/* color thresholds */
.ring-cpu.warn   { stroke:#f59e0b; }
.ring-cpu.danger { stroke:#ef4444; }
.ring-mem.warn   { stroke:#f59e0b; }
.ring-mem.danger { stroke:#ef4444; }
/* ── UNIFIED HEADER MONITOR v2 ── */
.hdr-wrap{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:16px;
  align-items:center;
}
@media(max-width:1200px){
  .hdr-wrap{ grid-template-columns:1fr; }
}

.hdr-title h1{ font-size:19px; font-weight:700; white-space:nowrap; letter-spacing:-.01em; }
.hdr-title p { font-size:11px; color:#3a5a7a; margin-top:3px; white-space:nowrap; }

/* ── monitor strip ── */
.sysmon{
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.smon-sep{
  width:1px; height:52px; align-self:center;
  background:linear-gradient(180deg,transparent,rgba(100,140,200,.18),transparent);
  margin:0 4px;
  flex-shrink:0;
}

/* ── card ── */
.smon-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  padding:7px 9px;
  background:rgba(7,14,28,.8);
  border:1px solid rgba(100,140,200,.1);
  border-radius:13px;
  min-width:60px;
  transition:border-color .2s, background .2s;
  cursor:default;
}
.smon-card:hover{
  background:rgba(14,26,52,.85);
  border-color:rgba(100,140,200,.22);
}

.smon-label{
  font-size:8px; font-weight:700;
  letter-spacing:.1em; color:#2a4060;
  text-transform:uppercase;
}

/* ── SVG ring ── */
.smon-ring-wrap{
  position:relative;
  width:40px; height:40px;
}
.smon-ring{
  width:40px; height:40px;
  transform:rotate(-90deg);
}
.ring-bg{
  fill:none;
  stroke:rgba(100,140,200,.08);
  stroke-width:3.2;
}
.ring-fg{
  fill:none; stroke-width:3.2; stroke-linecap:round;
  transition:stroke-dasharray .55s cubic-bezier(.4,0,.2,1);
}

/* system rings */
.ring-cpu  { stroke:#3b82f6; filter:drop-shadow(0 0 3px rgba(59,130,246,.35)); }
.ring-mem  { stroke:#8b5cf6; filter:drop-shadow(0 0 3px rgba(139,92,246,.35)); }
.ring-gpu  { stroke:#10b981; filter:drop-shadow(0 0 3px rgba(16,185,129,.35)); }
.ring-disk { stroke:#f59e0b; filter:drop-shadow(0 0 3px rgba(245,158,11,.35)); }

/* aria rings */
.ring-aria  { stroke:#22c55e; filter:drop-shadow(0 0 3px rgba(34,197,94,.4)); }
.ring-active{ stroke:#38bdf8; filter:drop-shadow(0 0 3px rgba(56,189,248,.35)); }
.ring-queue { stroke:#a78bfa; filter:drop-shadow(0 0 3px rgba(167,139,250,.35)); }
.ring-done  { stroke:#34d399; filter:drop-shadow(0 0 3px rgba(52,211,153,.35)); }

/* warn/danger */
.ring-cpu.warn,.ring-mem.warn  { stroke:#f59e0b; }
.ring-cpu.danger,.ring-mem.danger{ stroke:#ef4444; filter:drop-shadow(0 0 4px rgba(239,68,68,.5)); }

/* ── value label ── */
.smon-pct{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:9.5px; font-weight:700; color:#8ab0d8;
  font-variant-numeric:tabular-nums;
}

/* ── aria online pulse dot ── */
.aria-pulse{
  display:block; width:8px; height:8px;
  border-radius:50%; background:#22c55e;
  box-shadow:0 0 6px rgba(34,197,94,.6);
  animation:ap 2s ease-in-out infinite;
}
.aria-pulse.offline{ background:#ef4444; box-shadow:0 0 6px rgba(239,68,68,.5); animation:none; }
@keyframes ap{
  0%,100%{ box-shadow:0 0 5px rgba(34,197,94,.5); }
  50%     { box-shadow:0 0 12px rgba(34,197,94,.85); }
}

/* ── sub label ── */
.smon-sub{
  font-size:8.5px; color:#2a4060;
  text-align:center; white-space:nowrap;
  font-variant-numeric:tabular-nums;
  min-height:10px;
}

/* ── sys card special ── */
.smon-sys-card{ min-width:52px; }
.smon-hex{
  font-size:28px; line-height:1;
  color:#1a3050;
  transition:color .3s;
}
.smon-sys-card:hover .smon-hex{ color:#2a5080; }

/* override old healthBar / readyChip — hide them */
.healthBar, .readyChip{ display:none !important; }
.headerRight{ display:none !important; }

/* fix Monaco height — convert min-height to actual height */
#appShell, .win-shell {
  height: 78vh !important;
  min-height: unset !important;
}
.workspace {
  height: 100% !important;
  min-height: unset !important;
}
#editorArea, #neEditorArea {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* ── Context Menu ── */
.ctx-menu {
  position: fixed;
  z-index: 99999;
  min-width: 170px;
  background: #0d1a2e;
  border: 1px solid rgba(100,140,200,.2);
  border-radius: 12px;
  padding: 5px;
  box-shadow:
    0 8px 32px rgba(0,0,0,.55),
    0 0 0 1px rgba(100,140,200,.06);
  backdrop-filter: blur(18px);
  animation: ctx-in .1s ease;
  user-select: none;
}

@keyframes ctx-in {
  from { opacity:0; transform:scale(.95) translateY(-4px); }
  to   { opacity:1; transform:scale(1)   translateY(0); }
}

.ctx-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: #90b8d8;
  cursor: pointer;
  transition: background .1s, color .1s;
  white-space: nowrap;
}

.ctx-item:hover {
  background: rgba(45,106,245,.18);
  color: #c0d8f8;
}

.ctx-item.ctx-danger {
  color: #7a4040;
}
.ctx-item.ctx-danger:hover {
  background: rgba(180,30,30,.25);
  color: #f08080;
}

.ctx-sep {
  height: 1px;
  background: rgba(100,140,200,.1);
  margin: 4px 6px;
}

/* fix white background in notes / workspace */
.ne-preview-pane,
.ne-editor-pane,
.ne-body,
.ne-main,
.ne-editor-wrap,
#neEditorArea,
#neEditorArea > * {
  background: #0b1220 !important;
}

.monaco-editor,
.monaco-editor-background,
.monaco-editor .inputarea.monaco-mouse-cursor-text {
  background: #0b1220 !important;
  background-color: #0b1220 !important;
}
/* ═══════════════════════════════════════════
   CLAUDE THEME  —  warm white / orange
   ═══════════════════════════════════════════ */

.app-nav { flex: 0 0 240px; position: sticky; top: 12px; display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px solid #334155; border-radius: 16px; background: #0f172a; }
.app-shell { display: flex; gap: 16px; align-items: flex-start; margin-top: 16px; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.app-main > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.app-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 14px; line-height: 1.3; color: #cbd5e1; text-decoration: none; }
.app-nav a i { flex: none; font-size: 16px; }
.app-nav a:hover { background: #1e293b; color: #f8fafc; }
.app-nav a.active { background: #2563eb; color: #fff; font-weight: 600; }
.page-hidden { display: none !important; }
#fjPanel .yt-title { color: #e2e8f0; }
@media (max-width: 900px) {
  .app-shell { flex-direction: column; }
  .app-nav { position: static; flex: none; width: 100%; flex-direction: row; overflow-x: auto; }
  .app-nav a { flex: none; white-space: nowrap; }
}
@media (max-width: 900px) {
  .app-main > * { max-width: 100%; box-sizing: border-box; }
  .app-main .yt-input-row, .app-main .scr-input-row, .app-main .yt-header { flex-wrap: wrap; }
  .app-main .yt-input, .app-main .scr-input { flex: 1 1 100%; min-width: 0; }
  .app-main .yt-quality { flex: 1 1 40%; min-width: 0; max-width: 100%; }
  .app-main .vk-badge { white-space: normal; }
}

/* === PANEL CLASSES === */
.scr-header{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid #334155;background:#1e293b;border-radius:0}
.scr-logo{font-size:18px;color:#38bdf8}
.scr-title{font-weight:600;color:#e2e8f0}
.scr-input-row{display:flex;gap:8px;align-items:center;padding:10px 14px}
.scr-sep-label{display:flex;align-items:center;gap:6px;font-size:13px;color:#94a3b8}
.scr-dl{background:#059669;color:#fff;padding:6px 12px;border-radius:6px;font-size:13px;cursor:pointer}
.scr-dl:hover{background:#047857}

.scr-item{background:#1e293b;border:1px solid #334155;border-radius:10px;padding:10px;margin-bottom:8px;color:#e2e8f0;font-size:13px}
.scr-row1{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.scr-tag{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600}
.scr-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scr-track{height:6px;background:#0f172a;border-radius:3px;overflow:hidden;margin-top:6px}
.scr-fill{height:100%;background:#a855f7;width:0%}

.yt-list{display:flex;flex-direction:column;gap:6px;padding:10px 14px;overflow:auto;max-height:40vh}
.yt-info{padding:10px 14px;color:#94a3b8;min-height:60px}

.yt-header{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid #334155;background:#1e293b;border-radius:0}
.yt-logo{font-size:18px;color:#38bdf8}
.yt-title{font-weight:600;color:#e2e8f0}
.yt-input-row{display:flex;gap:8px;align-items:center;padding:10px 14px}
.yt-btn{padding:6px 14px;border-radius:6px;background:#334155;color:#e2e8f0;border:1px solid #475569;font-size:13px;cursor:pointer}
.yt-btn:hover{background:#475569}
.yt-input{background:#0f172a;border:1px solid #334155;color:#e2e8f0;padding:6px 12px;border-radius:6px}
.yt-quality{background:#0f172a;border:1px solid #334155;color:#e2e8f0;padding:6px 10px;border-radius:6px}
.yt-dl{background:#059669;color:#fff;padding:6px 14px;border-radius:6px;font-size:13px;cursor:pointer;border:none}
.yt-dl:hover{background:#047857}
.yt-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.downloadBar2{background:#0f172a;border:1px solid #334155;border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:8px}
.dlHeader,.dlRow1,.dlRow2{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dlLogo{font-size:18px;color:#38bdf8}
.dlTitle{font-weight:600;color:#e2e8f0}
.dlInput{background:#0f172a;border:1px solid #334155;color:#e2e8f0;padding:6px 12px;border-radius:6px}
.dlPath,.dlMethod,.dlName{background:#0f172a;border:1px solid #334155;color:#e2e8f0;padding:6px 10px;border-radius:6px}
.dlBtn{padding:6px 14px;border-radius:6px;background:#334155;color:#e2e8f0;border:1px solid #475569;font-size:13px;cursor:pointer}
.dlBtn:hover{background:#475569}
.dlBtn.primary{background:#059669;border-color:#047857}
.dlBtn.primary:hover{background:#047857}

.uav-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;padding:14px;overflow:auto}
.uav-card{background:#1e293b;border:1px solid #334155;border-radius:10px;display:flex;flex-direction:column;overflow:hidden}
.uav-card-thumb{position:relative;height:120px;background:#0f172a}
.uav-card img{display:block;width:100%;height:120px;object-fit:cover;background:#0f172a}
.uav-card-duration{position:absolute;right:6px;bottom:6px;padding:1px 6px;border-radius:4px;background:rgba(0,0,0,.75);color:#fff;font-size:11px;line-height:1.4}
.uav-card-title{margin:8px 10px;font-size:13px;font-weight:500;color:#e2e8f0;overflow:hidden;white-space:normal;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.uav-card-actions{display:flex;gap:6px;margin-top:auto;padding:6px 10px;border-top:1px solid #334155}
.uav-card-actions button{flex:1 1 auto;padding:5px 2px;border-radius:6px;background:#0f172a;color:#e2e8f0;border:1px solid #475569;font-size:12px;cursor:pointer}
.uav-card-actions button:hover{background:#1e293b}
.uav-pager{display:flex;justify-content:center;gap:6px;padding:8px 14px}

.thumbbox{width:96px;height:64px;border-radius:8px;overflow:hidden;background:#0f172a}
.thumbbox img{width:100%;height:100%;object-fit:cover}
.file-card{background:#1e293b;border:1px solid #334155;border-radius:10px;padding:10px;display:flex;align-items:center;gap:10px;margin-bottom:8px;color:#e2e8f0}
.file-card img,.file-card video,.file-card canvas{width:48px;height:48px;object-fit:cover;border-radius:6px;background:#0f172a}
.file-name{font-size:13px;color:#e2e8f0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-meta{font-size:11px;color:#94a3b8;margin-top:2px}
.file-delete,.delete-btn{background:#ef4444;color:#fff;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;margin-left:auto}
.card{background:#1e293b;border:1px solid #334155;border-radius:10px;padding:12px;color:#e2e8f0;margin-bottom:8px}

.filesPane{padding:12px;overflow:auto}
.controlPane{padding:10px;display:flex;flex-direction:column;gap:8px;background:#1e293b}
.cp-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cp-row .ctrl{padding:6px 12px;border-radius:6px;background:#0f172a;color:#e2e8f0;border:1px solid #334155;font-size:13px;cursor:pointer}
.cp-row .ctrl:hover{background:#334155}
.cp-row.wrap{flex-wrap:wrap}
.vk-badge{padding:4px 10px;border-radius:10px;background:#334155;color:#94a3b8;font-size:12px}
.vk-cookie-wrap{border:1px solid #334155;border-radius:10px;padding:12px;margin:10px 14px;background:#1e293b}
.vk-cookie-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.vk-cookie-title{font-weight:600;color:#e2e8f0}
.vk-cookie-hint{font-size:12px;color:#94a3b8}
.vk-cookie-box{width:100%;background:#0f172a;border:1px solid #334155;color:#e2e8f0;padding:8px;border-radius:6px;font-size:12px;font-family:monospace}
.smon-card{background:#1e293b;border:1px solid #334155;border-radius:10px;padding:12px;color:#e2e8f0}
.smon-label{color:#94a3b8;font-size:12px}
.smon-pct{color:#e2e8f0;font-size:14px;font-weight:600}
.smon-sub{color:#94a3b8;font-size:11px}
.smon-sep{border-top:1px solid #334155;margin:8px 0}
.smon-ring-wrap{position:relative;width:64px;height:64px}
.smon-ring{stroke-linecap:round;transition:stroke-dashoffset .3s}
.ring-fg{stroke:#3b82f6}
.ring-bg{stroke:#334155}
.aria-pulse{animation:pulse 2s infinite}
.smon-sys-card{background:#1e293b;border:1px solid #334155;border-radius:10px;padding:10px;color:#e2e8f0}
.smon-bar-card{background:#1e293b;border:1px solid #334155;border-radius:10px;padding:12px;color:#e2e8f0}
.smon-bar-head{display:flex;justify-content:space-between;margin-bottom:6px}
.smon-bar{height:8px;background:#0f172a;border-radius:4px;overflow:hidden}
.smon-hex{color:#94a3b8;font-family:monospace;font-size:11px}
.hdr-wrap{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid #334155}
.hdr-title h1{color:#e2e8f0;font-size:16px}
.hdr-title p{color:#94a3b8;font-size:12px}
.edm-item{background:#1e293b;border:1px solid #334155;border-radius:10px;padding:10px;margin-bottom:8px;color:#e2e8f0}
.edm-row1{display:flex;justify-content:space-between;gap:8px}
.edm-eng{font-size:12px;color:#94a3b8}
.edm-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.edm-badge{padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600}
.edm-meta{font-size:11px;color:#94a3b8;margin-top:4px}
.edm-btns{margin-top:8px;display:flex;gap:6px}
.edm-track{height:6px;background:#0f172a;border-radius:3px;overflow:hidden;margin-top:6px}
.edm-fill{height:100%;background:#22c55e;width:0%}
.edm-err{color:#ef4444;font-size:11px;margin-top:4px}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}

@media (max-width: 900px) {
  .app-shell { flex-direction: column; }
  .app-nav { position: static; flex: none; width: 100%; flex-direction: row; overflow-x: auto; }
  .app-nav a { flex: none; white-space: nowrap; }
  .app-main > * { max-width: 100%; box-sizing: border-box; }
  .app-main .yt-input-row, .app-main .scr-input-row, .app-main .yt-header { flex-wrap: wrap; }
  .app-main .yt-input, .app-main .scr-input { flex: 1 1 100%; min-width: 0; }
  .app-main .yt-quality { flex: 1 1 40%; min-width: 0; max-width: 100%; }
  .app-main .vk-badge { white-space: normal; }
}