pinokiod 7.3.9 → 7.3.11

package/server/public/style.css

@@ -1348,16 +1348,16 @@ body.main-sidebar-page main > :not(.main-sidebar) {
 body.main-sidebar-page main > .container,
 body.main-sidebar-page main > .task-container {
   box-sizing: border-box;
-  padding-left: 16px;
+  padding-left: 12px;
 }
 .main-sidebar {
   order: -1;
-  width: 196px;
+  width: 180px;
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
   min-height: 0;
-  padding: 8px 6px;
+  padding: 8px 5px;
   box-sizing: border-box;
   background: transparent;
   color: var(--pinokio-sidebar-tab-muted);
@@ -1399,7 +1399,7 @@ body.main-sidebar-page main > .task-container {
   display: flex;
   align-items: flex-end;
   box-sizing: border-box;
-  padding: 5px 6px 4px;
+  padding: 5px 5px 4px;
   color: var(--pinokio-sidebar-action-muted);
   font-size: 11px;
   font-weight: 500;
@@ -1415,9 +1415,9 @@ body.main-sidebar-page main > .task-container {
   display: grid !important;
   grid-template-columns: 16px minmax(0, 1fr) auto;
   align-items: center !important;
-  column-gap: 7px !important;
+  column-gap: 6px !important;
   margin: 0;
-  padding: 3px 6px !important;
+  padding: 3px 5px !important;
   box-sizing: border-box;
   border: 0 !important;
   border-left: 0 !important;
@@ -1445,6 +1445,11 @@ body.main-sidebar-page main > .task-container {
   color: var(--pinokio-sidebar-tab-active-color) !important;
   font-weight: 600 !important;
 }
+body.main-sidebar-page aside.main-sidebar .tab:hover,
+body.main-sidebar-page aside.main-sidebar .tab:focus-visible,
+body.main-sidebar-page aside.main-sidebar .tab.selected {
+  color: var(--pinokio-sidebar-tab-active-color) !important;
+}
 .main-sidebar .tab i,
 .main-sidebar .tab .main-sidebar-action-icon {
   grid-column: 1;
@@ -1467,7 +1472,15 @@ body.main-sidebar-page main > .task-container {
 .main-sidebar .tab.selected .main-sidebar-action-icon {
   color: var(--pinokio-sidebar-icon-active) !important;
 }
-.main-sidebar .caption {
+body.main-sidebar-page aside.main-sidebar .tab:hover i,
+body.main-sidebar-page aside.main-sidebar .tab:focus-visible i,
+body.main-sidebar-page aside.main-sidebar .tab.selected i,
+body.main-sidebar-page aside.main-sidebar .tab:hover .main-sidebar-action-icon,
+body.main-sidebar-page aside.main-sidebar .tab:focus-visible .main-sidebar-action-icon,
+body.main-sidebar-page aside.main-sidebar .tab.selected .main-sidebar-action-icon {
+  color: var(--pinokio-sidebar-icon-active) !important;
+}
+.main-sidebar .tab .caption {
   grid-column: 2;
   min-width: 0;
   width: auto !important;
@@ -1479,7 +1492,7 @@ body.main-sidebar-page main > .task-container {
   word-wrap: normal !important;
 }
 .main-sidebar .tab.submenu {
-  padding-left: 16px !important;
+  padding-left: 14px !important;
 }
 .main-sidebar .universal-create-menu {
   width: 100%;
@@ -1501,21 +1514,333 @@ body.main-sidebar-page main > .task-container {
   -webkit-mask: url('/pinokio-mark.svg') center / 14px 14px no-repeat;
   mask: url('/pinokio-mark.svg') center / 14px 14px no-repeat;
 }
-.main-sidebar-peer {
-  margin-top: 8px;
-  padding-top: 8px;
-  border-top: 0;
+.main-sidebar-peer-dialog[hidden],
+.main-sidebar-peer-dialog-panel[hidden] {
+  display: none !important;
 }
-.main-sidebar .qr {
-  padding: 10px 0 0;
+.main-sidebar-peer-dialog {
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  display: grid;
+  place-items: center;
+  box-sizing: border-box;
+  padding: 16px;
+}
+.main-sidebar-peer-dialog-backdrop {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  appearance: none;
+  border: 0;
+  border-radius: 0;
+  background: rgba(15, 23, 42, 0.28);
+  cursor: default;
+}
+body.dark .main-sidebar-peer-dialog-backdrop {
+  background: rgba(0, 0, 0, 0.44);
+}
+.main-sidebar-peer-dialog-surface {
+  position: relative;
+  width: min(300px, calc(100vw - 32px));
+  max-height: calc(100vh - 32px);
+  box-sizing: border-box;
+  overflow: auto;
+  padding: 10px;
+  border: 1px solid var(--pinokio-sidebar-tabbar-border);
+  border-radius: 8px;
+  background: var(--pinokio-sidebar-tabbar-bg);
+  color: var(--pinokio-sidebar-tab-active-color);
+  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
+}
+body.dark .main-sidebar-peer-dialog-surface {
+  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.42);
+}
+.main-sidebar-peer-dialog-header {
+  display: grid;
+  grid-template-columns: 30px minmax(0, 1fr) 28px;
+  align-items: center;
+  gap: 8px;
+}
+.main-sidebar-peer-dialog-icon,
+.main-sidebar-peer-dialog-close,
+.main-sidebar-peer-copy {
+  width: 28px;
+  height: 28px;
+  min-width: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border-radius: 6px;
+}
+.main-sidebar-peer-dialog-icon {
+  background: var(--pinokio-sidebar-tab-active-bg);
+  color: var(--pinokio-sidebar-icon-active);
+}
+.main-sidebar-peer-dialog-heading {
+  min-width: 0;
+}
+.main-sidebar-peer-dialog-title {
+  color: var(--pinokio-sidebar-tab-active-color);
+  font-size: 13px;
+  font-weight: 650;
+  line-height: 1.2;
+  letter-spacing: 0;
+}
+.main-sidebar-peer-dialog-subtitle {
+  margin-top: 2px;
+  color: var(--pinokio-sidebar-action-muted);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.2;
+  letter-spacing: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.main-sidebar-peer-dialog-close,
+.main-sidebar-peer-copy {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: var(--pinokio-sidebar-icon-muted);
+  cursor: pointer;
+  transition: background-color 120ms ease, color 120ms ease;
+}
+.main-sidebar-peer-dialog-close:hover,
+.main-sidebar-peer-dialog-close:focus-visible,
+.main-sidebar-peer-copy:hover,
+.main-sidebar-peer-copy:focus-visible {
+  background: var(--pinokio-sidebar-tab-hover);
+  color: var(--pinokio-sidebar-icon-active);
+  outline: none;
+}
+.main-sidebar-peer-dialog-tabs {
+  display: flex;
+  gap: 2px;
+  margin-top: 10px;
+  padding: 2px;
+  border-radius: 7px;
+  background: var(--pinokio-sidebar-control-bg);
+}
+.main-sidebar-peer-dialog-tab {
+  flex: 1 1 0;
+  min-width: 0;
+  appearance: none;
+  border: 0;
+  border-radius: 5px;
+  padding: 5px 7px;
+  background: transparent;
+  color: var(--pinokio-sidebar-tab-muted);
+  font: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.2;
+  letter-spacing: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.main-sidebar-peer-dialog-tab:hover,
+.main-sidebar-peer-dialog-tab:focus-visible,
+.main-sidebar-peer-dialog-tab.is-active {
+  background: var(--pinokio-sidebar-control-active-bg);
+  color: var(--pinokio-sidebar-tab-active-color);
+  outline: none;
+}
+.main-sidebar-peer-dialog-body {
+  margin-top: 10px;
+}
+.main-sidebar-peer-dialog-panel {
+  display: grid;
+  justify-items: center;
+  gap: 8px;
+}
+.main-sidebar-peer-qr-link {
+  display: block;
+  box-sizing: border-box;
+  padding: 10px;
+  border-radius: 6px;
+  background: #ffffff;
+  line-height: 0;
+}
+.main-sidebar-peer-qr-image {
+  width: 174px;
+  height: 174px;
+  display: block;
+  image-rendering: pixelated;
+}
+.main-sidebar-peer-caption {
+  width: 100%;
+  color: var(--pinokio-sidebar-tab-active-color);
+  font-size: 12px;
+  font-weight: 650;
+  line-height: 1.25;
+  text-align: center;
+  letter-spacing: 0;
+  overflow-wrap: anywhere;
+}
+.main-sidebar-peer-local-note {
+  width: 100%;
+  color: var(--pinokio-sidebar-action-muted);
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 1.35;
+  text-align: center;
+  letter-spacing: 0;
+}
+.main-sidebar-peer-url-row {
+  width: 100%;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 28px;
+  align-items: center;
+  gap: 6px;
+}
+.main-sidebar-peer-url {
+  min-width: 0;
+  display: block;
+  padding: 6px 7px;
+  border-radius: 6px;
+  background: var(--pinokio-sidebar-control-bg);
   color: var(--pinokio-sidebar-tab-muted);
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1.2;
+  letter-spacing: 0;
+  text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.main-sidebar-peer-url:hover,
+.main-sidebar-peer-url:focus-visible {
+  color: var(--pinokio-sidebar-tab-active-color);
+  outline: none;
+}
+.main-sidebar-peer-setup {
+  display: grid;
+  gap: 12px;
+}
+.main-sidebar-peer-setup-copy {
+  margin: 0;
+  color: var(--pinokio-sidebar-tab-active-color);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.45;
+  letter-spacing: 0;
+}
+.main-sidebar-peer-setup-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.main-sidebar-peer-setup-primary,
+.main-sidebar-peer-setup-secondary {
+  min-height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border-radius: 6px;
+  padding: 7px 10px;
+  font-size: 12px;
+  font-weight: 650;
+  line-height: 1.2;
+  letter-spacing: 0;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
+}
+.main-sidebar-peer-setup-primary {
+  border: 1px solid var(--pinokio-sidebar-tab-active-color);
+  background: var(--pinokio-sidebar-tab-active-color);
+  color: var(--pinokio-sidebar-tabbar-bg);
+}
+.main-sidebar-peer-setup-primary:hover,
+.main-sidebar-peer-setup-primary:focus-visible {
+  border-color: var(--pinokio-sidebar-icon-active);
+  background: var(--pinokio-sidebar-icon-active);
+  color: var(--pinokio-sidebar-tabbar-bg);
+  outline: none;
 }
-.main-sidebar .qr img {
-  width: 128px;
-  height: 128px;
-  max-width: calc(100% - 24px);
+.main-sidebar-peer-setup-secondary {
+  appearance: none;
+  border: 1px solid var(--pinokio-sidebar-tabbar-border);
+  background: var(--pinokio-sidebar-control-bg);
+  color: var(--pinokio-sidebar-tab-active-color);
+}
+.main-sidebar-peer-setup-secondary:hover,
+.main-sidebar-peer-setup-secondary:focus-visible {
+  background: var(--pinokio-sidebar-tab-hover);
+  color: var(--pinokio-sidebar-icon-active);
+  outline: none;
 }
 @media only screen and (min-width: 601px) {
+  body.main-sidebar-page {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  body.main-sidebar-page > header.navheader {
+    flex: 0 0 auto;
+  }
+
+  body.main-sidebar-page main {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  body.main-sidebar-page main > :not(.main-sidebar) {
+    min-height: 0;
+    max-height: 100%;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
+  body.main-sidebar-page main > iframe {
+    overflow: hidden;
+  }
+
+  body.main-sidebar-page .main-sidebar {
+    align-self: stretch;
+    height: auto;
+    max-height: none;
+    overflow-x: hidden;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
+  }
+
+  body.dark.main-sidebar-page .main-sidebar {
+    scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
+  }
+
+  body.main-sidebar-page .main-sidebar::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  body.main-sidebar-page .main-sidebar::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  body.main-sidebar-page .main-sidebar::-webkit-scrollbar-thumb {
+    background-color: rgba(148, 163, 184, 0.42);
+    border: 0;
+    border-radius: 999px;
+  }
+
+  body.dark.main-sidebar-page .main-sidebar::-webkit-scrollbar-thumb {
+    background-color: rgba(148, 163, 184, 0.32);
+  }
+
   body.main-sidebar-page.main-sidebar-collapsed .main-sidebar {
     width: 0;
     min-width: 0;
@@ -1947,7 +2272,7 @@ header .runner.terminal-runner-minimal .btn span {
   margin-left: auto;
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 6px;
   flex-wrap: wrap;
   justify-content: flex-end;
   min-width: 0;
@@ -2846,59 +3171,86 @@ body.dark .swal2-title {
   background: rgba(0,0,0,0.8) !important;
   */
 }
+.swal2-container.pinokio-download-container.swal2-backdrop-show {
+  background: rgba(9, 11, 15, 0.34) !important;
+}
+body.dark .swal2-container.pinokio-download-container.swal2-backdrop-show {
+  background: rgba(0, 0, 0, 0.58) !important;
+}
 .swal2-popup.pinokio-download-modal {
-  border-radius: 14px !important;
-  padding: 18px !important;
-  background: #ffffff !important;
-  color: #0f172a !important;
-  border: 1px solid rgba(148, 163, 184, 0.2) !important;
-  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18) !important;
+  --pinokio-download-bg: #ffffff;
+  --pinokio-download-control-bg: #ffffff;
+  --pinokio-download-text: #18181b;
+  --pinokio-download-muted: #71717a;
+  --pinokio-download-border: rgba(24, 24, 27, 0.12);
+  --pinokio-download-border-strong: rgba(24, 24, 27, 0.2);
+  --pinokio-download-chip-bg: rgba(24, 24, 27, 0.04);
+  --pinokio-download-primary-bg: #18181b;
+  --pinokio-download-primary-hover: #27272a;
+  --pinokio-download-primary-text: #ffffff;
+  --pinokio-download-focus: rgba(24, 24, 27, 0.14);
+  width: min(420px, calc(100vw - 32px)) !important;
+  border-radius: 8px !important;
+  padding: 20px !important;
+  background: var(--pinokio-download-bg) !important;
+  color: var(--pinokio-download-text) !important;
+  border: 1px solid var(--pinokio-download-border) !important;
+  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18) !important;
 }
 body.dark .swal2-popup.pinokio-download-modal {
-  background: #0f172a !important;
-  color: #e2e8f0 !important;
-  border: 1px solid rgba(148, 163, 184, 0.24) !important;
-  box-shadow: 0 32px 90px rgba(2, 8, 23, 0.72) !important;
+  --pinokio-download-bg: #1b1c1d;
+  --pinokio-download-control-bg: rgba(255, 255, 255, 0.04);
+  --pinokio-download-text: rgba(250, 250, 250, 0.94);
+  --pinokio-download-muted: rgba(229, 231, 235, 0.62);
+  --pinokio-download-border: rgba(255, 255, 255, 0.1);
+  --pinokio-download-border-strong: rgba(255, 255, 255, 0.18);
+  --pinokio-download-chip-bg: rgba(255, 255, 255, 0.055);
+  --pinokio-download-primary-bg: rgba(250, 250, 250, 0.94);
+  --pinokio-download-primary-hover: #ffffff;
+  --pinokio-download-primary-text: #1b1c1d;
+  --pinokio-download-focus: rgba(255, 255, 255, 0.18);
+  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.42) !important;
 }
 .swal2-popup.pinokio-download-modal .swal2-title {
-  margin: 0 40px 6px 0 !important;
+  margin: 0 32px 8px 0 !important;
   padding: 0 !important;
   text-align: left !important;
-  font-size: 20px !important;
-  font-weight: 700 !important;
-  line-height: 1.2 !important;
-  letter-spacing: -0.02em !important;
-  color: #0f172a !important;
-}
-body.dark .swal2-popup.pinokio-download-modal .swal2-title {
-  color: #f8fafc !important;
+  font-size: 18px !important;
+  font-weight: 600 !important;
+  line-height: 1.25 !important;
+  letter-spacing: 0 !important;
+  color: var(--pinokio-download-text) !important;
 }
-.pinokio-download-html.swal2-html-container {
-  margin: 0 0 12px 0 !important;
+.swal2-popup.pinokio-download-modal .pinokio-download-html.swal2-html-container {
+  margin: 0 0 16px 0 !important;
   padding: 0 !important;
   text-align: left !important;
   font-size: 13px !important;
   line-height: 1.45 !important;
-  color: rgba(71, 85, 105, 0.84) !important;
+  color: var(--pinokio-download-muted) !important;
 }
-body.dark .pinokio-download-html.swal2-html-container {
-  color: rgba(148, 163, 184, 0.88) !important;
-}
-.pinokio-download-note {
+.swal2-popup.pinokio-download-modal .pinokio-download-note {
+  display: flex;
+  align-items: center;
+  gap: 6px;
   margin: 0;
 }
-.pinokio-download-note code {
+.swal2-popup.pinokio-download-modal .pinokio-download-note code {
+  max-width: 100%;
+  min-width: 0;
+  padding: 1px 6px;
+  border-radius: 6px;
+  border: 1px solid var(--pinokio-download-border);
+  background: var(--pinokio-download-chip-bg);
+  color: var(--pinokio-download-text);
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   font-size: 12px;
-  padding: 2px 6px;
-  border-radius: 999px;
-  background: rgba(15, 23, 42, 0.06);
-  color: inherit;
-}
-body.dark .pinokio-download-note code {
-  background: rgba(148, 163, 184, 0.16);
+  line-height: 1.45;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.pinokio-download-label.swal2-input-label {
+.swal2-popup.pinokio-download-modal .pinokio-download-label.swal2-input-label {
   display: block !important;
   width: 100% !important;
   margin: 0 0 6px 0 !important;
@@ -2906,108 +3258,117 @@ body.dark .pinokio-download-note code {
   font-size: 12px !important;
   font-weight: 600 !important;
   line-height: 1.3 !important;
-  color: rgba(15, 23, 42, 0.78) !important;
-}
-body.dark .pinokio-download-label.swal2-input-label {
-  color: rgba(241, 245, 249, 0.84) !important;
+  color: var(--pinokio-download-text) !important;
 }
-.pinokio-download-input.swal2-input {
+.swal2-popup.pinokio-download-modal .pinokio-download-input.swal2-input {
+  box-sizing: border-box !important;
   width: 100% !important;
+  height: 36px !important;
   margin: 0 !important;
-  height: 40px !important;
-  padding: 0 12px !important;
-  border-radius: 10px !important;
-  border: 1px solid rgba(148, 163, 184, 0.58) !important;
-  background: #ffffff !important;
-  color: #0f172a !important;
+  padding: 0 10px !important;
+  border-radius: 7px !important;
+  border: 1px solid var(--pinokio-download-border-strong) !important;
+  background: var(--pinokio-download-control-bg) !important;
+  color: var(--pinokio-download-text) !important;
   box-shadow: none !important;
-  font-size: 14px !important;
+  font-size: 13px !important;
   line-height: 1.2 !important;
 }
-.pinokio-download-input.swal2-input:focus {
-  border-color: rgba(59, 130, 246, 0.78) !important;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16) !important;
+.swal2-popup.pinokio-download-modal .pinokio-download-input.swal2-input:focus {
+  border-color: var(--pinokio-download-text) !important;
+  box-shadow: 0 0 0 3px var(--pinokio-download-focus) !important;
+  outline: none !important;
 }
-body.dark .pinokio-download-input.swal2-input {
-  border-color: rgba(148, 163, 184, 0.45) !important;
-  background: rgba(15, 23, 42, 0.65) !important;
-  color: rgba(248, 250, 252, 0.96) !important;
+.swal2-popup.pinokio-download-modal .pinokio-download-input.swal2-input::placeholder {
+  color: var(--pinokio-download-muted) !important;
 }
-.pinokio-download-actions.swal2-actions {
+.swal2-popup.pinokio-download-modal .pinokio-download-actions.swal2-actions {
   width: 100% !important;
   justify-content: flex-end !important;
   gap: 8px !important;
-  margin-top: 14px !important;
+  margin-top: 16px !important;
   padding: 0 !important;
 }
-.pinokio-download-actions.swal2-actions.swal2-loading {
+.swal2-popup.pinokio-download-modal .pinokio-download-actions.swal2-actions.swal2-loading {
   justify-content: flex-end !important;
   gap: 8px !important;
 }
-.pinokio-download-confirm.swal2-confirm,
-.pinokio-download-cancel.swal2-cancel {
-  min-width: 92px !important;
-  height: 36px !important;
+.swal2-popup.pinokio-download-modal .pinokio-download-confirm.swal2-confirm,
+.swal2-popup.pinokio-download-modal .pinokio-download-cancel.swal2-cancel {
+  min-width: 78px !important;
+  height: 32px !important;
   margin: 0 !important;
-  padding: 0 14px !important;
-  border-radius: 10px !important;
+  padding: 0 12px !important;
+  border-radius: 6px !important;
+  border: 1px solid var(--pinokio-download-border) !important;
+  box-shadow: none !important;
   font-size: 13px !important;
-  font-weight: 650 !important;
+  line-height: 1 !important;
+  font-weight: 600 !important;
 }
 .swal2-popup.pinokio-download-modal .pinokio-download-confirm.swal2-confirm {
-  border: none !important;
-  background: royalblue !important;
-  color: #ffffff !important;
-}
-.swal2-popup.pinokio-download-modal .pinokio-download-confirm.swal2-confirm:hover {
-  background: #315cd8 !important;
+  border-color: var(--pinokio-download-primary-bg) !important;
+  background: var(--pinokio-download-primary-bg) !important;
+  color: var(--pinokio-download-primary-text) !important;
+}
+.swal2-popup.pinokio-download-modal .pinokio-download-confirm.swal2-confirm:hover,
+.swal2-popup.pinokio-download-modal .pinokio-download-confirm.swal2-confirm:focus-visible {
+  border-color: var(--pinokio-download-primary-hover) !important;
+  background: var(--pinokio-download-primary-hover) !important;
+  color: var(--pinokio-download-primary-text) !important;
+  outline: none !important;
 }
 .swal2-popup.pinokio-download-modal .pinokio-download-cancel.swal2-cancel {
-  border: 1px solid rgba(148, 163, 184, 0.6) !important;
-  background: #ffffff !important;
-  color: #0f172a !important;
-}
-body.dark .swal2-popup.pinokio-download-modal .pinokio-download-cancel.swal2-cancel {
-  border-color: rgba(148, 163, 184, 0.52) !important;
-  background: rgba(15, 23, 42, 0.64) !important;
-  color: rgba(248, 250, 252, 0.96) !important;
-}
-.swal2-popup.pinokio-download-modal .pinokio-download-cancel.swal2-cancel:hover {
-  background: rgba(148, 163, 184, 0.12) !important;
+  background: transparent !important;
+  color: var(--pinokio-download-muted) !important;
 }
-body.dark .swal2-popup.pinokio-download-modal .pinokio-download-cancel.swal2-cancel:hover {
-  background: rgba(148, 163, 184, 0.18) !important;
+.swal2-popup.pinokio-download-modal .pinokio-download-cancel.swal2-cancel:hover,
+.swal2-popup.pinokio-download-modal .pinokio-download-cancel.swal2-cancel:focus-visible {
+  border-color: var(--pinokio-download-border-strong) !important;
+  background: var(--pinokio-download-chip-bg) !important;
+  color: var(--pinokio-download-text) !important;
+  outline: none !important;
 }
 .pinokio-install-inline-status {
-  padding: 14px 18px;
+  --pinokio-inline-status-bg: #ffffff;
+  --pinokio-inline-status-border: rgba(24, 24, 27, 0.12);
+  --pinokio-inline-status-title: #18181b;
+  --pinokio-inline-status-detail: #71717a;
+  --pinokio-inline-status-progress: #18181b;
+  flex: 0 0 auto;
+  padding: 12px 14px;
   box-sizing: border-box;
   width: 100%;
   margin: 0;
   overflow: hidden;
-  border-top: 1px solid rgba(15, 23, 42, 0.12);
-  background: var(--pinokio-chrome-accent-bg-light);
-  color: var(--pinokio-chrome-accent-fg-light);
+  border-top: 1px solid var(--pinokio-inline-status-border);
+  background: var(--pinokio-inline-status-bg);
+  color: var(--pinokio-inline-status-title);
 }
 body.dark .pinokio-install-inline-status {
-  border-top-color: rgba(255, 255, 255, 0.08);
-  background: var(--pinokio-chrome-accent-bg-dark);
-  color: var(--pinokio-chrome-accent-fg-dark);
+  --pinokio-inline-status-bg: #1b1c1d;
+  --pinokio-inline-status-border: rgba(255, 255, 255, 0.1);
+  --pinokio-inline-status-title: rgba(250, 250, 250, 0.94);
+  --pinokio-inline-status-detail: rgba(229, 231, 235, 0.62);
+  --pinokio-inline-status-progress: rgba(250, 250, 250, 0.94);
 }
 body.pinokio-install-status-visible {
   min-height: 100vh;
   display: flex;
-  flex-direction: column;
+  flex-direction: column !important;
+  align-items: stretch;
 }
-body.pinokio-install-status-visible main,
-body.pinokio-install-status-visible .terminal-container {
+body.pinokio-install-status-visible > main,
+body.pinokio-install-status-visible > .terminal-container,
+body.pinokio-install-status-visible > .containers {
   flex: 1 1 auto;
   min-height: 0;
 }
 .pinokio-install-inline-status-shell {
   display: flex;
   align-items: flex-start;
-  gap: 12px;
-  min-height: 44px;
+  gap: 10px;
+  min-height: 36px;
 }
 .pinokio-install-inline-status-icon {
   width: 18px;
@@ -3017,28 +3378,64 @@ body.pinokio-install-status-visible .terminal-container {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: 15px;
+  color: var(--pinokio-inline-status-progress);
+  font-size: 14px;
+}
+.pinokio-install-inline-status-spinner {
+  position: relative;
+  width: 18px;
+  height: 18px;
+  flex: 0 0 18px;
+  margin-top: 1px;
+  display: inline-flex;
+}
+.pinokio-install-inline-status-spinner-dot {
+  position: absolute;
+  width: 7px;
+  height: 7px;
+  border-radius: 2px;
+  background: var(--pinokio-inline-status-progress);
+  opacity: 0.34;
+  transform: scale(0.82);
+  animation: pinokio-inline-status-spinner 1.1s ease-in-out infinite;
+}
+.pinokio-install-inline-status-spinner-dot-1 {
+  top: 1px;
+  left: 1px;
+  animation-delay: 0s;
+}
+.pinokio-install-inline-status-spinner-dot-2 {
+  top: 1px;
+  left: 10px;
+  animation-delay: 0.12s;
+}
+.pinokio-install-inline-status-spinner-dot-3 {
+  top: 10px;
+  left: 10px;
+  animation-delay: 0.24s;
+}
+.pinokio-install-inline-status-spinner-dot-4 {
+  top: 10px;
+  left: 1px;
+  animation-delay: 0.36s;
 }
 .pinokio-install-inline-status-copy {
   min-width: 0;
   flex: 1;
 }
 .pinokio-install-inline-status-title {
-  font-size: 15px;
-  line-height: 1.2;
-  font-weight: 700;
+  font-size: 13px;
+  line-height: 1.25;
+  font-weight: 600;
   color: inherit;
 }
 .pinokio-install-inline-status-detail {
   margin-top: 4px;
-  color: rgba(235, 222, 197, 0.82);
+  color: var(--pinokio-inline-status-detail);
   font-size: 12px;
   line-height: 1.35;
   word-break: break-word;
 }
-body.dark .pinokio-install-inline-status-detail {
-  color: rgba(239, 233, 214, 0.76);
-}
 .pinokio-install-inline-status-detail > *:first-child {
   margin-top: 0;
 }
@@ -3049,98 +3446,126 @@ body.dark .pinokio-install-inline-status-detail {
   font-family: "RobotoMono", monospace;
 }
 .pinokio-install-inline-status.is-error {
-  background: color-mix(in srgb, var(--pinokio-chrome-accent-bg-light) 78%, #7f1d1d);
-  color: #ffe2df;
+  --pinokio-inline-status-bg: #fff7f7;
+  --pinokio-inline-status-border: rgba(220, 38, 38, 0.18);
+  --pinokio-inline-status-title: #b91c1c;
+  --pinokio-inline-status-detail: rgba(127, 29, 29, 0.78);
+  --pinokio-inline-status-progress: #b91c1c;
 }
 body.dark .pinokio-install-inline-status.is-error {
-  background: color-mix(in srgb, var(--pinokio-chrome-accent-bg-dark) 72%, #7f1d1d);
-  color: #ffd5d1;
-}
-.pinokio-install-inline-status.is-error .pinokio-install-inline-status-detail {
-  color: rgba(255, 226, 223, 0.88);
+  --pinokio-inline-status-bg: color-mix(in srgb, #1b1c1d 88%, #7f1d1d);
+  --pinokio-inline-status-border: rgba(248, 113, 113, 0.28);
+  --pinokio-inline-status-title: #fecaca;
+  --pinokio-inline-status-detail: rgba(255, 223, 219, 0.76);
+  --pinokio-inline-status-progress: #fecaca;
+}
+@keyframes pinokio-inline-status-spinner {
+  0%,
+  100% {
+    opacity: 0.34;
+    transform: scale(0.82);
+  }
+  45% {
+    opacity: 1;
+    transform: scale(1);
+  }
 }
-body.dark .pinokio-install-inline-status.is-error .pinokio-install-inline-status-detail {
-  color: rgba(255, 223, 219, 0.84);
+@media (prefers-reduced-motion: reduce) {
+  .pinokio-install-inline-status-spinner-dot {
+    animation: none;
+    opacity: 0.84;
+    transform: none;
+  }
 }
-.pinokio-download-close.swal2-close {
+.swal2-popup.pinokio-download-modal .pinokio-download-close.swal2-close {
   position: absolute !important;
-  top: 14px !important;
-  right: 14px !important;
+  top: 12px !important;
+  right: 12px !important;
   width: 28px !important;
   height: 28px !important;
-  line-height: 28px !important;
+  line-height: 1 !important;
   margin: 0 !important;
+  border-radius: 6px !important;
+  color: var(--pinokio-download-muted) !important;
   font-size: 20px !important;
-  color: rgba(71, 85, 105, 0.7) !important;
-  border-radius: 999px !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
-  transition: background 0.2s ease, color 0.2s ease !important;
-}
-.pinokio-download-close.swal2-close:hover {
-  background: rgba(148, 163, 184, 0.14) !important;
-  color: #0f172a !important;
-}
-body.dark .pinokio-download-close.swal2-close {
-  color: rgba(226, 232, 240, 0.72) !important;
+  transition: background-color 0.14s ease, color 0.14s ease !important;
 }
-body.dark .pinokio-download-close.swal2-close:hover {
-  background: rgba(148, 163, 184, 0.16) !important;
-  color: #f8fafc !important;
+.swal2-popup.pinokio-download-modal .pinokio-download-close.swal2-close:hover,
+.swal2-popup.pinokio-download-modal .pinokio-download-close.swal2-close:focus-visible {
+  background: var(--pinokio-download-chip-bg) !important;
+  color: var(--pinokio-download-text) !important;
+  outline: none !important;
 }
-.pinokio-download-validation.swal2-validation-message {
+.swal2-popup.pinokio-download-modal .pinokio-download-validation.swal2-validation-message {
   margin: 10px 0 0 0 !important;
-  padding: 10px 12px !important;
-  border-radius: 10px !important;
-  background: rgba(255, 66, 66, 0.1) !important;
-  border: 1px solid rgba(255, 66, 66, 0.18) !important;
-  border-left: 4px solid rgba(255, 66, 66, 0.5) !important;
-  color: rgba(15, 23, 42, 0.92) !important;
-  font-size: 13px !important;
+  padding: 9px 10px !important;
+  border-radius: 7px !important;
+  background: rgba(220, 38, 38, 0.08) !important;
+  border: 1px solid rgba(220, 38, 38, 0.18) !important;
+  color: #b91c1c !important;
+  font-size: 12px !important;
   line-height: 1.4 !important;
   justify-content: flex-start !important;
-  align-items: flex-start !important;
+  align-items: center !important;
+  text-align: left !important;
 }
-.pinokio-download-validation.swal2-validation-message::before {
+.swal2-popup.pinokio-download-modal .pinokio-download-validation.swal2-validation-message::before {
   display: none !important;
 }
-body.dark .pinokio-download-validation.swal2-validation-message {
-  background: rgba(255, 66, 66, 0.16) !important;
-  border-color: rgba(255, 66, 66, 0.24) !important;
-  border-left-color: rgba(255, 66, 66, 0.68) !important;
-  color: rgba(248, 250, 252, 0.94) !important;
+body.dark .swal2-popup.pinokio-download-modal .pinokio-download-validation.swal2-validation-message {
+  background: rgba(239, 68, 68, 0.13) !important;
+  border-color: rgba(248, 113, 113, 0.28) !important;
+  color: #fecaca !important;
 }
-.pinokio-download-loader.swal2-loader {
+.swal2-popup.pinokio-download-modal .pinokio-download-loader.swal2-loader {
   align-items: center !important;
   justify-content: center !important;
-  gap: 8px !important;
+  gap: 7px !important;
   width: auto !important;
-  height: 36px !important;
+  height: 32px !important;
   margin: 0 !important;
-  padding: 0 14px !important;
+  padding: 0 12px !important;
   animation: none !important;
-  border: none !important;
-  border-radius: 10px !important;
-  background: royalblue !important;
-  color: #ffffff !important;
+  border: 1px solid var(--pinokio-download-primary-bg) !important;
+  border-radius: 6px !important;
+  background: var(--pinokio-download-primary-bg) !important;
+  color: var(--pinokio-download-primary-text) !important;
 }
-.pinokio-download-actions.swal2-actions.swal2-loading .pinokio-download-loader.swal2-loader {
+.swal2-popup.pinokio-download-modal .pinokio-download-actions.swal2-actions.swal2-loading .pinokio-download-loader.swal2-loader {
   display: inline-flex !important;
 }
-.pinokio-download-loader-spinner {
-  width: 14px;
-  height: 14px;
-  border: 2px solid rgba(255, 255, 255, 0.34);
-  border-top-color: #ffffff;
+.swal2-popup.pinokio-download-modal .pinokio-download-loader-spinner {
+  width: 13px;
+  height: 13px;
+  border: 2px solid color-mix(in srgb, var(--pinokio-download-primary-text) 30%, transparent);
+  border-top-color: var(--pinokio-download-primary-text);
   border-radius: 50%;
   animation: pinokio-download-spin 0.8s linear infinite;
 }
-.pinokio-download-loader-text {
+.swal2-popup.pinokio-download-modal .pinokio-download-loader-text {
   font-size: 13px;
-  font-weight: 700;
+  font-weight: 600;
   line-height: 1;
 }
+@media (max-width: 520px) {
+  .swal2-popup.pinokio-download-modal {
+    width: calc(100vw - 24px) !important;
+    padding: 16px !important;
+  }
+  .swal2-popup.pinokio-download-modal .swal2-title {
+    margin-right: 30px !important;
+  }
+  .swal2-popup.pinokio-download-modal .pinokio-download-actions.swal2-actions {
+    flex-wrap: wrap !important;
+  }
+  .swal2-popup.pinokio-download-modal .pinokio-download-confirm.swal2-confirm,
+  .swal2-popup.pinokio-download-modal .pinokio-download-cancel.swal2-cancel {
+    flex: 1 1 118px !important;
+  }
+}
 @keyframes pinokio-download-spin {
   to {
     transform: rotate(360deg);
@@ -3845,7 +4270,7 @@ aside .qr {
   display: none;
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 768px) {
   html.main-sidebar-mobile-open,
   body.main-sidebar-mobile-open {
     overflow: hidden;
@@ -3910,12 +4335,12 @@ aside .qr {
     position: fixed;
     top: 0;
     left: 0;
-    bottom: 0;
+    bottom: var(--main-mobile-navbar-total-height, 46px);
     z-index: 10000020;
     width: min(280px, calc(100vw - 40px));
     max-width: 100%;
     margin: 0 !important;
-    padding: calc(52px + env(safe-area-inset-top)) 12px calc(18px + env(safe-area-inset-bottom));
+    padding: calc(12px + env(safe-area-inset-top)) 12px 18px;
     box-sizing: border-box;
     overflow-y: auto;
     background: var(--pinokio-sidebar-tabbar-bg);
@@ -3935,12 +4360,38 @@ aside .qr {
     transform: translateX(0);
   }
 
+  body.main-sidebar-page .main-sidebar-nav,
+  body.main-sidebar-page .main-sidebar-section {
+    gap: 4px;
+  }
+
+  body.main-sidebar-page .main-sidebar-section + .main-sidebar-section {
+    margin-top: 10px;
+  }
+
   body.main-sidebar-page .main-sidebar .tab,
   body.main-sidebar-page .main-sidebar .tab.submenu {
+    min-height: 36px;
+    column-gap: 10px !important;
+    padding: 6px 9px !important;
     font-size: 12px;
   }
 
-  body.main-sidebar-page .main-sidebar .caption {
+  body.main-sidebar-page .main-sidebar .tab.submenu {
+    padding-left: 18px !important;
+  }
+
+  body.main-sidebar-page .main-sidebar .tab i,
+  body.main-sidebar-page .main-sidebar .tab .main-sidebar-action-icon {
+    font-size: 14px;
+  }
+
+  body.main-sidebar-page .main-sidebar-section-title {
+    min-height: 22px;
+    padding: 6px 9px 4px;
+  }
+
+  body.main-sidebar-page .main-sidebar .tab .caption {
     width: auto !important;
     text-align: left !important;
     word-wrap: normal !important;
@@ -4111,6 +4562,156 @@ aside .qr {
   }
   */
 }
+@media only screen and (max-width: 768px) {
+  body.main-sidebar-page {
+    --main-mobile-navbar-height: 46px;
+    --main-mobile-navbar-total-height: calc(var(--main-mobile-navbar-height) + env(safe-area-inset-bottom));
+    display: flex;
+    flex-direction: column !important;
+    align-items: stretch;
+    min-height: 100vh;
+    padding-bottom: var(--main-mobile-navbar-total-height);
+    box-sizing: border-box;
+  }
+
+  body.main-sidebar-page > header.navheader,
+  body.main-sidebar-page > header.navheader:not(.minimized) {
+    position: fixed !important;
+    top: auto !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    left: 0 !important;
+    width: 100% !important;
+    min-width: 0 !important;
+    max-width: none !important;
+    height: var(--main-mobile-navbar-total-height);
+    min-height: var(--main-mobile-navbar-total-height);
+    max-height: var(--main-mobile-navbar-total-height);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    align-self: auto;
+    overflow: hidden;
+    padding: 0 8px env(safe-area-inset-bottom);
+    border-top: 1px solid var(--pinokio-sidebar-separator);
+    border-bottom: 0;
+    background: var(--pinokio-sidebar-tabbar-bg) !important;
+    box-sizing: border-box;
+    z-index: 10000040;
+  }
+
+  body.main-sidebar-page > header.navheader h1,
+  body.main-sidebar-page > header.navheader:not(.minimized) h1 {
+    width: 100%;
+    min-width: 0;
+    height: var(--main-mobile-navbar-height);
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 3px;
+    overflow: hidden;
+    flex-wrap: nowrap;
+  }
+
+  body.main-sidebar-page > header.navheader .main-sidebar-header-toggle,
+  body.main-sidebar-page > header.navheader #screenshot,
+  body.main-sidebar-page > header.navheader #inspector,
+  body.main-sidebar-page > header.navheader #mobile-link-button,
+  body.main-sidebar-page > header.navheader .urlbar,
+  body.main-sidebar-page > header.navheader #close-window,
+  body.main-sidebar-page > header.navheader .runner,
+  body.main-sidebar-page > header.navheader h1 > .path,
+  body.main-sidebar-page > header.navheader h1 > .nav-button,
+  body.main-sidebar-page .main-sidebar-mobile-toggle {
+    display: none !important;
+  }
+
+  body.main-sidebar-page > header.navheader .home,
+  body.main-sidebar-page > header.navheader:not(.minimized) .home {
+    order: 0;
+    position: static;
+    align-self: auto;
+    flex: 0 0 38px;
+    width: 38px;
+    height: 38px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border-radius: 8px;
+    z-index: auto;
+  }
+
+  body.main-sidebar-page > header.navheader .home .icon,
+  body.main-sidebar-page > header.navheader:not(.minimized) .home .icon {
+    width: 24px;
+    height: 24px;
+    display: block;
+  }
+
+  body.main-sidebar-page > header.navheader h1 .btn2,
+  body.main-sidebar-page > header.navheader:not(.minimized) h1 .btn2 {
+    flex: 0 0 38px;
+    width: 38px;
+    height: 38px;
+    min-width: 38px;
+    min-height: 38px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border-radius: 8px;
+    box-sizing: border-box;
+  }
+
+  body.main-sidebar-page > header.navheader h1 .btn2 > div {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  body.main-sidebar-page > header.navheader #back {
+    order: 1;
+  }
+
+  body.main-sidebar-page > header.navheader #forward {
+    order: 2;
+  }
+
+  body.main-sidebar-page > header.navheader #refresh-page {
+    order: 3;
+  }
+
+  body.main-sidebar-page > header.navheader h1 > .flexible,
+  body.main-sidebar-page > header.navheader h1 > .mobile-flexible {
+    order: 10;
+    display: block;
+    flex: 1 1 auto;
+    min-width: 8px;
+  }
+
+  body.main-sidebar-page > header.navheader a[href="/columns"] {
+    order: 20;
+  }
+
+  body.main-sidebar-page > header.navheader a[href="/rows"] {
+    order: 21;
+  }
+
+  body.main-sidebar-page > header.navheader #new-window {
+    order: 22;
+  }
+
+  body.main-sidebar-page.main-sidebar-mobile-open .main-sidebar-mobile-backdrop {
+    bottom: var(--main-mobile-navbar-total-height);
+  }
+}
+header.navheader #screenshot,
+header.navheader #inspector,
+header.navheader #mobile-link-button {
+  display: none !important;
+}
 /*
 body[data-agent='electron'] {
   padding-top: 26px;
@@ -4246,8 +4847,32 @@ header.navheader.transitioning {
   --logs-sidebar-width: 320px;
   --logs-sidebar-min-width: 220px;
   --logs-sidebar-max-width: 560px;
+  --logs-bg: #ffffff;
+  --logs-panel: #ffffff;
+  --logs-soft: rgba(15, 23, 42, 0.035);
+  --logs-soft-hover: rgba(15, 23, 42, 0.055);
+  --logs-border: rgba(15, 23, 42, 0.1);
+  --logs-border-strong: rgba(15, 23, 42, 0.16);
+  --logs-text: #101828;
+  --logs-muted: #667085;
+  --logs-faint: rgba(102, 112, 133, 0.72);
+  --logs-accent-bg: var(--pinokio-chrome-accent-bg-light, rgba(15, 23, 42, 0.84));
+  --logs-accent-fg: var(--pinokio-chrome-accent-fg-light, #e1b261);
   position: relative;
 }
+body.dark #logs-root {
+  --logs-bg: #1b1c1d;
+  --logs-panel: #1b1c1d;
+  --logs-soft: rgba(255, 255, 255, 0.04);
+  --logs-soft-hover: rgba(255, 255, 255, 0.065);
+  --logs-border: rgba(255, 255, 255, 0.08);
+  --logs-border-strong: rgba(255, 255, 255, 0.14);
+  --logs-text: #f5f7fb;
+  --logs-muted: #9aa4b2;
+  --logs-faint: rgba(154, 164, 178, 0.76);
+  --logs-accent-bg: var(--pinokio-chrome-accent-bg-dark, rgba(255, 255, 255, 0.08));
+  --logs-accent-fg: var(--pinokio-chrome-accent-fg-dark, #c2b28a);
+}
 .logs-page {
   display: flex;
   flex-direction: column;
@@ -4255,89 +4880,90 @@ header.navheader.transitioning {
   min-height: 0;
   height: var(--logs-pane-height, auto);
   overflow: hidden;
+  background: var(--logs-bg);
+  color: var(--logs-text);
 }
 .logs-page-header {
   flex: 0 0 auto;
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
   justify-content: space-between;
-  gap: 10px;
-  min-height: 45px;
-  padding: 8px 10px;
-  border-bottom: 1px solid rgba(0,0,0,0.08);
-  background: rgba(255,255,255,0.65);
-  backdrop-filter: blur(6px);
+  gap: 16px 24px;
+  min-height: 0;
+  padding: 12px 18px 14px;
+  border-bottom: 1px solid var(--logs-border);
+  background: transparent;
+  backdrop-filter: none;
 }
-body.dark .logs-page-header {
-  border-color: rgba(255,255,255,0.08);
-  background: rgba(15, 17, 21, 0.7);
+.logs-page-header-main {
+  min-width: 0;
+  max-width: 760px;
+}
+.logs-page-title {
+  margin: 0;
+  color: var(--logs-text);
+  font-size: 22px;
+  line-height: 1.12;
+  letter-spacing: 0;
+  font-weight: 760;
+}
+.logs-page-description {
+  margin: 4px 0 0;
+  max-width: 64ch;
+  color: var(--logs-muted);
+  font-size: 12px;
+  line-height: 1.4;
 }
 .logs-page-switch {
   display: flex;
   align-items: center;
   min-width: 0;
-}
-.logs-raw-only-title {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  color: rgba(15, 23, 42, 0.74);
-  font-size: 12px;
-  font-weight: 700;
-}
-body.dark .logs-raw-only-title {
-  color: rgba(248, 250, 252, 0.82);
+  margin-top: 14px;
 }
 .logs-page-controls {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 8px;
-  flex: 1 1 auto;
   min-width: 0;
   max-width: 100%;
-  margin-left: auto;
+  margin-left: 0;
+  padding-top: 0;
 }
 .logs-view-switch {
   display: inline-flex;
   align-items: center;
-  gap: 2px;
-  padding: 3px;
-  border: 1px solid rgba(15, 23, 42, 0.055);
-  border-radius: 7px;
-  background: rgba(15, 23, 42, 0.035);
+  gap: 12px;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
   box-sizing: border-box;
 }
-body.dark .logs-view-switch {
-  border-color: rgba(255, 255, 255, 0.075);
-  background: rgba(255, 255, 255, 0.045);
-}
 .logs-view-tab {
   border: 0;
-  border-radius: 5px;
-  min-width: 78px;
+  border-bottom: 1px solid transparent;
+  border-radius: 0;
+  min-width: 0;
   min-height: 26px;
-  padding: 0 10px;
+  padding: 0 0 2px;
   background: transparent;
-  color: rgba(71, 85, 105, 0.85);
+  color: var(--logs-muted);
   font-size: 12px;
   line-height: 1;
-  font-weight: 700;
+  font-weight: 600;
   cursor: pointer;
   white-space: nowrap;
 }
-.logs-view-tab.is-active {
-  background: rgba(255, 255, 255, 0.76);
-  color: #111827;
-  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.055);
-}
-body.dark .logs-view-tab {
-  color: rgba(148, 163, 184, 0.8);
+.logs-view-tab:hover,
+.logs-view-tab:focus-visible {
+  color: var(--logs-text);
+  outline: none;
 }
-body.dark .logs-view-tab.is-active {
-  background: rgba(255, 255, 255, 0.09);
-  color: rgba(248, 250, 252, 0.94);
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.075);
+.logs-view-tab.is-active {
+  color: var(--logs-text);
+  border-color: currentColor;
 }
 .logs-action-group {
   display: inline-flex;
@@ -4405,19 +5031,13 @@ body.dark .logs-icon-button:focus-visible {
   gap: 12px;
   padding: 14px 16px 16px;
   overflow: hidden;
-  background: rgba(248, 250, 252, 0.56);
-}
-body.dark .logs-latest-view {
-  background: rgba(0,0,0,0.18);
+  background: transparent;
 }
 .logs-report-status {
   min-height: 18px;
   font-size: 12px;
   line-height: 1.4;
-  color: rgba(15, 23, 42, 0.64);
-}
-body.dark .logs-report-status {
-  color: rgba(248, 250, 252, 0.66);
+  color: var(--logs-muted);
 }
 .logs-report-status.is-error {
   color: #c0392b;
@@ -4436,20 +5056,14 @@ body.dark .logs-report-status {
   display: grid;
   grid-template-columns: minmax(210px, 0.36fr) minmax(260px, 1fr) auto;
   align-items: center;
-  gap: 14px;
-  min-height: 70px;
-  padding: 12px 14px;
-  border: 1px solid rgba(186, 133, 28, 0.34);
-  border-top-color: rgba(186, 133, 28, 0.48);
-  border-radius: 8px;
-  background: #fff1c2;
-  box-shadow: 0 -1px 0 rgba(186, 133, 28, 0.16), 0 8px 24px rgba(89, 64, 16, 0.12);
-}
-body.dark .logs-community-footer {
-  border-color: rgba(245, 189, 75, 0.28);
-  border-top-color: rgba(245, 189, 75, 0.42);
-  background: rgba(54, 40, 18, 0.96);
-  box-shadow: 0 -1px 0 rgba(245, 189, 75, 0.12), 0 8px 24px rgba(0,0,0,0.28);
+  gap: 12px;
+  min-height: 56px;
+  padding: 10px 0 0;
+  border: 0;
+  border-top: 1px solid var(--logs-border);
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
 }
 .logs-community-copy {
   min-width: 0;
@@ -4458,27 +5072,21 @@ body.dark .logs-community-footer {
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  color: rgba(54, 39, 12, 0.96);
-  font-size: 14px;
+  color: var(--logs-text);
+  font-size: 13px;
   line-height: 1.2;
-  font-weight: 850;
+  font-weight: 760;
 }
 .logs-community-heading i {
   color: inherit;
   font-size: 13px;
 }
-body.dark .logs-community-heading {
-  color: rgba(248, 250, 252, 0.94);
-}
 .logs-community-subtitle {
   margin-top: 4px;
-  color: rgba(75, 56, 19, 0.72);
+  color: var(--logs-muted);
   font-size: 11px;
   line-height: 1.35;
-  font-weight: 650;
-}
-body.dark .logs-community-subtitle {
-  color: rgba(248, 250, 252, 0.58);
+  font-weight: 560;
 }
 .logs-community-title-field {
   min-width: 0;
@@ -4489,53 +5097,41 @@ body.dark .logs-community-subtitle {
 }
 .logs-community-title-label {
   min-width: 0;
-  color: rgba(75, 56, 19, 0.68);
+  color: var(--logs-muted);
   font-size: 10px;
   line-height: 1.2;
   font-weight: 800;
   text-transform: uppercase;
   white-space: nowrap;
 }
-body.dark .logs-community-title-label {
-  color: rgba(248, 250, 252, 0.6);
-}
 .logs-community-title-input {
   min-width: 0;
   width: 100%;
   height: 34px;
-  border: 1px solid rgba(121, 84, 19, 0.22);
+  border: 1px solid var(--logs-border-strong);
   border-radius: 7px;
   padding: 0 11px;
-  background: rgba(255,255,255,0.78);
-  color: rgba(15, 23, 42, 0.92);
+  background: transparent;
+  color: var(--logs-text);
   font-size: 12px;
   font-weight: 700;
   line-height: 34px;
   outline: none;
 }
 .logs-community-title-input:focus {
-  border-color: rgba(154, 101, 8, 0.64);
-  box-shadow: 0 0 0 2px rgba(186, 133, 28, 0.2);
+  border-color: var(--logs-border-strong);
+  box-shadow: 0 0 0 2px var(--logs-soft-hover);
 }
 .logs-community-title-input:disabled {
   opacity: 0.62;
   cursor: not-allowed;
 }
-body.dark .logs-community-title-input {
-  border-color: rgba(255,255,255,0.12);
-  background: rgba(255,255,255,0.08);
-  color: rgba(248, 250, 252, 0.92);
-}
-body.dark .logs-community-title-input:focus {
-  border-color: var(--pinokio-chrome-accent-bg-dark, rgba(255,255,255,0.36));
-  box-shadow: 0 0 0 2px rgba(255,255,255,0.09);
-}
 .logs-community-title-note {
   display: none;
   max-width: 130px;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: rgba(15, 23, 42, 0.52);
+  color: var(--logs-muted);
   font-size: 11px;
   line-height: 1.2;
   font-weight: 700;
@@ -4544,9 +5140,6 @@ body.dark .logs-community-title-input:focus {
 .logs-community-title-note:not(:empty) {
   display: inline;
 }
-body.dark .logs-community-title-note {
-  color: rgba(248, 250, 252, 0.54);
-}
 .logs-community-submit {
   min-width: 154px;
   min-height: 38px;
@@ -4559,18 +5152,13 @@ body.dark .logs-community-title-note {
 .logs-redaction-pane {
   min-width: 0;
   min-height: 0;
-  border: 1px solid rgba(15, 23, 42, 0.1);
+  border: 1px solid var(--logs-border);
   border-radius: 8px;
-  background: rgba(255,255,255,0.9);
+  background: transparent;
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }
-body.dark .logs-report-pane,
-body.dark .logs-redaction-pane {
-  border-color: rgba(255,255,255,0.1);
-  background: rgba(9, 11, 16, 0.94);
-}
 .logs-latest-pane-header {
   flex: 0 0 auto;
   display: flex;
@@ -4579,35 +5167,25 @@ body.dark .logs-redaction-pane {
   gap: 10px;
   min-height: 42px;
   padding: 10px 12px;
-  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
-  background: rgba(248, 250, 252, 0.74);
-}
-body.dark .logs-latest-pane-header {
-  border-bottom-color: rgba(255,255,255,0.08);
-  background: rgba(255,255,255,0.035);
+  border-bottom: 1px solid var(--logs-border);
+  background: transparent;
 }
 .logs-latest-pane-eyebrow {
   margin: 0;
-  color: rgba(15, 23, 42, 0.52);
+  color: var(--logs-muted);
   font-size: 10px;
   line-height: 1.2;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0;
 }
-body.dark .logs-latest-pane-eyebrow {
-  color: rgba(248, 250, 252, 0.54);
-}
 .logs-latest-pane-title {
   margin-top: 3px;
-  color: rgba(15, 23, 42, 0.92);
+  color: var(--logs-text);
   font-size: 13px;
   line-height: 1.25;
   font-weight: 800;
 }
-body.dark .logs-latest-pane-title {
-  color: rgba(248, 250, 252, 0.92);
-}
 .logs-review-content {
   flex: 1 1 auto;
   min-height: 0;
@@ -4618,10 +5196,7 @@ body.dark .logs-latest-pane-title {
 .logs-review-section {
   flex: 0 0 auto;
   padding: 12px;
-  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
-}
-body.dark .logs-review-section {
-  border-bottom-color: rgba(255,255,255,0.08);
+  border-bottom: 1px solid var(--logs-border);
 }
 .logs-review-section--redactions {
   flex: 1 1 auto;
@@ -4639,33 +5214,25 @@ body.dark .logs-review-section {
   margin-bottom: 8px;
 }
 .logs-review-section-title {
-  color: rgba(15, 23, 42, 0.56);
+  color: var(--logs-muted);
   font-size: 10px;
   line-height: 1.2;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 0;
 }
-body.dark .logs-review-section-title {
-  color: rgba(248, 250, 252, 0.56);
-}
 .logs-review-badge {
   flex: 0 0 auto;
-  border: 1px solid rgba(15, 23, 42, 0.1);
+  border: 1px solid var(--logs-border);
   border-radius: 999px;
   padding: 3px 7px;
-  background: rgba(15, 23, 42, 0.04);
-  color: rgba(15, 23, 42, 0.72);
+  background: var(--logs-soft);
+  color: var(--logs-text);
   font-size: 11px;
   line-height: 1;
   font-weight: 800;
   white-space: nowrap;
 }
-body.dark .logs-review-badge {
-  border-color: rgba(255,255,255,0.1);
-  background: rgba(255,255,255,0.06);
-  color: rgba(248, 250, 252, 0.76);
-}
 .logs-review-filter-button {
   width: 100%;
   margin-top: 10px;
@@ -4887,10 +5454,10 @@ body.dark .logs-report-output {
   font-weight: 800;
 }
 .logs-mask-token.is-selected {
-  border-color: rgba(37, 99, 235, 0.72);
-  background: rgba(219, 234, 254, 0.9);
-  color: rgba(30, 64, 175, 0.98);
-  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.14);
+  border-color: var(--logs-border-strong);
+  background: var(--logs-soft-hover);
+  color: var(--logs-text);
+  box-shadow: 0 0 0 2px var(--logs-soft);
 }
 body.dark .logs-mask-token {
   border-color: rgba(251, 113, 133, 0.42);
@@ -4898,10 +5465,10 @@ body.dark .logs-mask-token {
   color: rgba(254, 205, 211, 0.96);
 }
 body.dark .logs-mask-token.is-selected {
-  border-color: rgba(147, 197, 253, 0.66);
-  background: rgba(30, 64, 175, 0.36);
-  color: rgba(219, 234, 254, 0.98);
-  box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.14);
+  border-color: var(--logs-border-strong);
+  background: var(--logs-soft-hover);
+  color: var(--logs-text);
+  box-shadow: 0 0 0 2px var(--logs-soft);
 }
 .logs-unmasked-token {
   border: 1px solid rgba(15, 23, 42, 0.14);
@@ -4911,18 +5478,18 @@ body.dark .logs-mask-token.is-selected {
   color: inherit;
 }
 .logs-unmasked-token.is-selected {
-  border-color: rgba(37, 99, 235, 0.62);
-  background: rgba(219, 234, 254, 0.68);
-  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
+  border-color: var(--logs-border-strong);
+  background: var(--logs-soft-hover);
+  box-shadow: 0 0 0 2px var(--logs-soft);
 }
 body.dark .logs-unmasked-token {
   border-color: rgba(255,255,255,0.14);
   background: rgba(255,255,255,0.06);
 }
 body.dark .logs-unmasked-token.is-selected {
-  border-color: rgba(147, 197, 253, 0.58);
-  background: rgba(30, 64, 175, 0.28);
-  box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.12);
+  border-color: var(--logs-border-strong);
+  background: var(--logs-soft-hover);
+  box-shadow: 0 0 0 2px var(--logs-soft);
 }
 .logs-redaction-filters {
   flex: 0 0 auto;
@@ -4945,18 +5512,18 @@ body.dark .logs-unmasked-token.is-selected {
   white-space: nowrap;
 }
 .logs-redaction-filter.is-active {
-  border-color: rgba(37, 99, 235, 0.32);
-  background: rgba(37, 99, 235, 0.08);
-  color: rgba(30, 64, 175, 0.96);
+  border-color: var(--logs-border-strong);
+  background: var(--logs-soft);
+  color: var(--logs-text);
 }
 body.dark .logs-redaction-filter {
   border-color: rgba(255,255,255,0.1);
   color: rgba(248, 250, 252, 0.68);
 }
 body.dark .logs-redaction-filter.is-active {
-  border-color: rgba(147, 197, 253, 0.28);
-  background: rgba(96, 165, 250, 0.14);
-  color: rgba(219, 234, 254, 0.96);
+  border-color: var(--logs-border-strong);
+  background: var(--logs-soft);
+  color: var(--logs-text);
 }
 .logs-redaction-list {
   flex: 1 1 auto;
@@ -5000,8 +5567,8 @@ body.dark .logs-redaction-empty {
   outline: none;
 }
 .logs-redaction-row.is-selected {
-  border-color: rgba(37, 99, 235, 0.2);
-  background: rgba(37, 99, 235, 0.07);
+  border-color: var(--logs-border-strong);
+  background: var(--logs-soft-hover);
 }
 body.dark .logs-redaction-row:hover,
 body.dark .logs-redaction-row:focus-visible {
@@ -5009,8 +5576,8 @@ body.dark .logs-redaction-row:focus-visible {
   background: rgba(255,255,255,0.05);
 }
 body.dark .logs-redaction-row.is-selected {
-  border-color: rgba(147, 197, 253, 0.22);
-  background: rgba(96, 165, 250, 0.12);
+  border-color: var(--logs-border-strong);
+  background: var(--logs-soft-hover);
 }
 .logs-redaction-row-top {
   display: flex;
@@ -5089,22 +5656,22 @@ body.dark .logs-redaction-label {
   transition: transform 0.16s ease;
 }
 .logs-redaction-toggle input:checked + .logs-redaction-toggle-track {
-  border-color: rgba(37, 99, 235, 0.36);
-  background: rgba(37, 99, 235, 0.88);
+  border-color: var(--logs-accent-bg);
+  background: var(--logs-accent-bg);
 }
 .logs-redaction-toggle input:checked + .logs-redaction-toggle-track::after {
   transform: translateX(12px);
 }
 .logs-redaction-toggle input:focus-visible + .logs-redaction-toggle-track {
-  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
+  box-shadow: 0 0 0 2px var(--logs-soft-hover);
 }
 body.dark .logs-redaction-toggle-track {
   border-color: rgba(255,255,255,0.16);
   background: rgba(255,255,255,0.12);
 }
 body.dark .logs-redaction-toggle input:checked + .logs-redaction-toggle-track {
-  border-color: rgba(147, 197, 253, 0.34);
-  background: rgba(96, 165, 250, 0.72);
+  border-color: var(--logs-accent-bg);
+  background: var(--logs-accent-bg);
 }
 .logs-redaction-context {
   margin-top: 6px;
@@ -5144,15 +5711,16 @@ body.dark .logs-redaction-context {
   width: var(--logs-sidebar-width, 320px);
   min-width: var(--logs-sidebar-min-width, 220px);
   max-width: var(--logs-sidebar-max-width, 560px);
-  padding: 20px;
+  padding: 16px 14px 14px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  gap: 16px;
-  background: rgba(0,0,0,0.02);
-  max-height: var(--logs-pane-height, none);
+  gap: 12px;
+  border-right: 1px solid var(--logs-border);
+  background: transparent;
+  max-height: var(--logs-pane-height, none);
   min-height: 0;
-  overflow: auto;
+  overflow: hidden;
 }
 #logs-root.logs-sidebar-collapsed .logs-sidebar {
   flex: 0 0 0;
@@ -5168,23 +5736,21 @@ body.dark .logs-redaction-context {
 #logs-root.logs-sidebar-collapsed .logs-tree-wrapper {
   border-width: 0;
 }
-body.dark .logs-sidebar {
-  border-color: var(--dark-thin);
-  background: rgba(255,255,255,0.04);
+.logs-sidebar-header {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  min-width: 0;
 }
 .logs-sidebar-header h2 {
-  margin: 4px 0 0;
-  font-size: 22px;
-}
-.logs-sidebar-eyebrow {
   margin: 0;
-  text-transform: uppercase;
-  font-size: 12px;
-  letter-spacing: 0.08em;
-  color: rgba(0,0,0,0.5);
-}
-body.dark .logs-sidebar-eyebrow {
-  color: rgba(255,255,255,0.6);
+  color: var(--logs-text);
+  font-size: 15px;
+  line-height: 1.2;
+  letter-spacing: -0.01em;
+  font-weight: 760;
 }
 .logs-zip-actions {
   display: flex;
@@ -5192,46 +5758,41 @@ body.dark .logs-sidebar-eyebrow {
   gap: 10px;
 }
 .logs-zip-status {
-  font-size: 13px;
-  color: rgba(0,0,0,0.6);
+  flex: 0 1 auto;
+  min-width: 0;
+  color: var(--logs-muted);
+  font-size: 11px;
+  line-height: 1.3;
+  text-align: right;
 }
 .logs-zip-status.is-error {
   color: #c0392b;
 }
-body.dark .logs-zip-status {
-  color: rgba(255,255,255,0.6);
-}
 body.dark .logs-zip-status.is-error {
   color: #ff8373;
 }
-body.dark .logs-flat-button {
-  color: white;
-}
 .logs-primary-button,
 .logs-secondary-button,
 .logs-flat-button {
-  border: none;
+  border: 1px solid var(--logs-border-strong);
   border-radius: 7px;
-  padding: 4px 10px;
-  font-size: 12px;
-  font-weight: 700;
+  padding: 0 9px;
+  font-size: 10px;
+  font-weight: 600;
   line-height: 1;
-  min-height: 28px;
+  min-height: 26px;
   display: inline-flex;
   align-items: center;
-  gap: 6px;
+  gap: 5px;
   cursor: pointer;
   justify-content: center;
   white-space: nowrap;
-  transition: background 0.2s ease, color 0.2s ease;
+  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
 }
 .logs-primary-button {
-  background: var(--pinokio-chrome-accent-bg-light, var(--light-link-color));
-  color: var(--pinokio-chrome-accent-fg-light, white);
-}
-body.dark .logs-primary-button {
-  background: var(--pinokio-chrome-accent-bg-dark, rgba(255,255,255,0.15));
-  color: var(--pinokio-chrome-accent-fg-dark, white);
+  border-color: var(--logs-accent-bg);
+  background: var(--logs-accent-bg);
+  color: var(--logs-accent-fg);
 }
 .logs-primary-button:disabled,
 .logs-secondary-button:disabled,
@@ -5240,19 +5801,20 @@ body.dark .logs-primary-button {
   cursor: not-allowed;
 }
 .logs-secondary-button {
-  border: 1px solid var(--light-thin);
   background: transparent;
-  color: inherit;
+  color: var(--logs-text);
   text-decoration: none;
 }
-body.dark .logs-secondary-button {
-  border-color: var(--dark-thin);
-}
 .logs-flat-button {
-  background: rgba(0,0,0,0.04);
+  background: transparent;
+  color: var(--logs-text);
 }
-body.dark .logs-flat-button {
-  background: rgba(255,255,255,0.08);
+.logs-secondary-button:hover,
+.logs-secondary-button:focus-visible,
+.logs-flat-button:hover,
+.logs-flat-button:focus-visible {
+  background: var(--logs-soft);
+  outline: none;
 }
 .logs-primary-button.logs-community-submit {
   min-width: 154px;
@@ -5278,29 +5840,26 @@ body.dark .logs-flat-button {
   gap: 6px;
 }
 .logs-tree-hint {
-  margin: 0;
+  margin-top: 3px;
+  color: var(--logs-muted);
   font-size: 12px;
-  color: rgba(0,0,0,0.5);
-}
-body.dark .logs-tree-hint {
-  color: rgba(255,255,255,0.6);
+  line-height: 1.35;
 }
 .logs-tree-wrapper {
   flex: 1;
-  border: 1px solid var(--light-thin);
-  border-radius: 14px;
-  padding: 10px;
+  min-height: 0;
+  border: 0;
+  border-top: 1px solid var(--logs-border);
+  border-radius: 0;
+  padding: 10px 0 0;
   overflow: hidden;
-  background: white;
-}
-body.dark .logs-tree-wrapper {
-  border-color: var(--dark-thin);
-  background: rgba(255,255,255,0.02);
+  background: transparent;
 }
 .logs-tree {
   max-height: 100%;
   overflow-y: auto;
-  font-size: 14px;
+  padding-right: 2px;
+  font-size: 13px;
 }
 .logs-branch {
   margin: 0;
@@ -5308,11 +5867,14 @@ body.dark .logs-tree-wrapper {
 .logs-branch-summary {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 4px 6px;
+  gap: 7px;
+  min-height: 28px;
+  padding: 0 7px;
   cursor: pointer;
-  border-radius: 8px;
+  border-radius: 6px;
   list-style: none;
+  color: var(--logs-text);
+  font-weight: 650;
 }
 .logs-branch-summary::-webkit-details-marker {
   display: none;
@@ -5323,86 +5885,80 @@ body.dark .logs-tree-wrapper {
 .logs-branch-chevron {
   width: 14px;
   text-align: center;
-  color: rgba(0,0,0,0.4);
+  color: var(--logs-faint);
   transition: transform 0.2s ease;
 }
-body.dark .logs-branch-chevron {
-  color: rgba(255,255,255,0.4);
+.logs-branch-summary:hover,
+.logs-branch-summary:focus-visible {
+  background: var(--logs-soft);
+  outline: none;
 }
 .logs-branch-icon {
-  color: royalblue;
-}
-body.dark .logs-branch-icon {
-  color: rgba(255,255,255,0.7);
+  color: var(--logs-muted);
 }
 .logs-children {
-  margin-left: 18px;
-  padding-left: 12px;
-  border-left: 1px solid rgba(0,0,0,0.08);
-}
-body.dark .logs-children {
-  border-color: rgba(255,255,255,0.08);
+  margin-left: 15px;
+  padding-left: 10px;
+  border-left: 1px solid var(--logs-border);
 }
 .logs-tree-message {
+  color: var(--logs-muted);
   font-size: 12px;
   padding: 4px 0;
-  color: rgba(0,0,0,0.6);
 }
 .logs-tree-message.is-error {
   color: #c0392b;
 }
-body.dark .logs-tree-message {
-  color: rgba(255,255,255,0.6);
-}
 body.dark .logs-tree-message.is-error {
   color: #ff8373;
 }
-body.dark .logs-file {
-  color: white;
-}
 .logs-file {
   width: 100%;
-  border: none;
-  background: none;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--logs-text);
   text-align: left;
-  padding: 4px 6px;
-  border-radius: 8px;
+  min-height: 28px;
+  padding: 0 7px;
+  border-radius: 6px;
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 7px;
   cursor: pointer;
-  font-size: 14px;
+  font-size: 13px;
+  font-weight: 560;
+}
+.logs-file:hover {
+  background: var(--logs-soft);
 }
-.logs-file:hover,
 .logs-file.is-active {
-  background: royalblue;
+  border-color: var(--logs-border-strong);
+  background: var(--logs-soft-hover);
+  color: var(--logs-text);
+  font-weight: 720;
 }
-body.dark .logs-file:hover,
-body.dark .logs-file.is-active {
-  background: royalblue;
+.logs-file:focus-visible {
+  border-color: var(--logs-border-strong);
+  outline: none;
 }
 .logs-file-icon {
-  color: rgba(0,0,0,0.5);
-}
-body.dark .logs-file-icon {
-  color: rgba(255,255,255,0.5);
+  color: var(--logs-muted);
 }
 .logs-file-meta {
   margin-left: auto;
-  font-size: 12px;
-  color: rgba(0,0,0,0.5);
-}
-body.dark .logs-file-meta {
-  color: rgba(255,255,255,0.5);
+  color: var(--logs-muted);
+  font-size: 11px;
+  font-weight: 520;
 }
 .logs-main {
   flex: 1;
   min-width: 0;
   min-height: 0;
   max-height: var(--logs-pane-height, none);
-  overflow: auto;
+  overflow: hidden;
   display: flex;
   flex-direction: column;
+  background: transparent;
 }
 #logs-root.logs-sidebar-collapsed .logs-main {
   max-height: var(--logs-pane-height, none);
@@ -5413,9 +5969,7 @@ body.dark .logs-file-meta {
   flex-direction: column;
   flex: 1;
   min-height: 0;
-}
-body.dark .logs-viewer-panel {
-  background: rgba(255,255,255,0.03);
+  background: transparent;
 }
 .logs-page--error {
   align-items: center;
@@ -5450,128 +6004,129 @@ body.dark .logs-empty-icon {
   margin-top: 20px;
 }
 .logs-resizer {
-  flex: 0 0 12px;
-  margin: 0 6px;
+  flex: 0 0 10px;
+  margin: 0;
   cursor: col-resize;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   touch-action: none;
+  background: transparent;
 }
 .logs-resizer::before {
   content: '';
-  width: 4px;
-  border-radius: 999px;
-  background: rgba(0,0,0,0.15);
-  height: 60%;
-}
-body.dark .logs-resizer::before {
-  background: rgba(255,255,255,0.25);
+  width: 1px;
+  border-radius: 0;
+  background: var(--logs-border);
+  height: 100%;
 }
 #logs-root.logs-sidebar-collapsed .logs-resizer::before {
   display: none;
 }
 .logs-resizer-toggle {
   position: absolute;
-  top: 8px;
+  top: 10px;
   left: 50%;
   transform: translate(-50%, 0);
-  width: 28px;
-  height: 28px;
-  border: none;
-  background: rgba(0,0,0,0.05);
-  color: rgba(0,0,0,0.6);
+  width: 24px;
+  height: 24px;
+  border: 1px solid var(--logs-border);
+  border-radius: 6px;
+  background: var(--logs-bg);
+  color: var(--logs-muted);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   pointer-events: auto;
   cursor: pointer;
-  transition: background 0.2s ease, color 0.2s ease;
-}
-.logs-resizer:hover .logs-resizer-toggle {
-  background: royalblue;
-  color: #fff;
-}
-body.dark .logs-resizer-toggle {
-  background: rgba(255,255,255,0.08);
-  color: rgba(255,255,255,0.75);
+  font-size: 11px;
+  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
 }
+.logs-resizer:hover .logs-resizer-toggle,
+.logs-resizer-toggle:focus-visible,
 body.dark .logs-resizer:hover .logs-resizer-toggle {
-  background: rgba(255,255,255,0.18);
-  color: rgba(255,255,255,0.95);
+  border-color: var(--logs-border-strong);
+  background: var(--logs-soft);
+  color: var(--logs-text);
+  outline: none;
 }
 #logs-root.logs-sidebar-collapsed .logs-resizer {
-  margin-left: 12px;
+  margin-left: 0;
 }
 #logs-root.logs-sidebar-collapsed .logs-resizer-toggle i {
   transform: rotate(180deg);
 }
 .logs-viewer-header {
-  padding: 16px;
-  border-bottom: 1px solid var(--light-thin);
+  flex: 0 0 auto;
+  min-height: 52px;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--logs-border);
   display: flex;
+  align-items: center;
   justify-content: space-between;
-  gap: 16px;
-  flex-wrap: wrap;
-}
-body.dark .logs-viewer-header {
-  border-color: var(--dark-thin);
+  gap: 14px;
+  flex-wrap: nowrap;
 }
 .logs-viewer-eyebrow {
   margin: 0;
   text-transform: uppercase;
-  font-size: 12px;
+  color: var(--logs-muted);
+  font-size: 10px;
+  font-weight: 760;
   letter-spacing: 0.08em;
-  color: rgba(0,0,0,0.5);
-}
-body.dark .logs-viewer-eyebrow {
-  color: rgba(255,255,255,0.6);
+  line-height: 1.2;
 }
 .logs-viewer-path {
+  margin-top: 2px;
+  color: var(--logs-text);
   font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
-  font-size: 13px;
+  font-size: 12px;
+  line-height: 1.35;
   word-break: break-all;
 }
 .logs-viewer-controls {
+  flex: 0 0 auto;
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 8px;
 }
 .logs-autoscroll-toggle {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  font-size: 13px;
+  gap: 7px;
+  color: var(--logs-text);
+  font-size: 12px;
+  font-weight: 560;
   cursor: pointer;
+  white-space: nowrap;
 }
 .logs-autoscroll-toggle input {
-  accent-color: royalblue;
+  accent-color: var(--logs-accent-bg);
 }
 .logs-viewer-status {
+  flex: 0 0 auto;
+  min-height: 33px;
   padding: 8px 16px;
-  font-size: 13px;
-  color: rgba(0,0,0,0.6);
-  border-bottom: 1px solid var(--light-thin);
-}
-body.dark .logs-viewer-status {
-  color: rgba(255,255,255,0.7);
-  border-color: var(--dark-thin);
+  color: var(--logs-muted);
+  font-size: 12px;
+  line-height: 1.35;
+  border-bottom: 1px solid var(--logs-border);
 }
 .logs-viewer-output {
   flex: 1;
+  min-height: 0;
   margin: 0;
   padding: 16px;
   font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
   font-size: 13px;
+  line-height: 1.45;
   white-space: pre-wrap;
   word-break: break-word;
-  overflow-y: auto;
-  background: rgba(0,0,0,0.02);
-}
-body.dark .logs-viewer-output {
-  background: rgba(0,0,0,0.3);
-  color: rgba(255,255,255,0.85);
+  overflow: auto;
+  border: 0;
+  background: transparent;
+  color: var(--logs-text);
 }
 #status-window {
   display: none !important;
@@ -5626,16 +6181,18 @@ body.dark .logs-viewer-output {
 }
 @media (max-width: 720px) {
   .logs-page-header {
-    align-items: flex-start;
-    flex-direction: column;
+    grid-template-columns: 1fr;
+    gap: 14px;
+    padding: 4px 14px 16px;
   }
   .logs-page-switch {
     width: 100%;
   }
   .logs-page-controls {
-    justify-content: flex-end;
+    justify-content: flex-start;
     flex-wrap: wrap;
     width: 100%;
+    padding-top: 0;
   }
   .logs-view-switch {
     width: 100%;
@@ -5669,3 +6226,380 @@ body.dark .logs-viewer-output {
     justify-content: space-between;
   }
 }
+
+/* Minimal SweetAlert normalization for generic QR/form modals. */
+.swal2-popup.min-popup,
+.swal2-popup.min-popup2 {
+  width: min(360px, calc(100vw - 32px)) !important;
+  padding: 20px !important;
+  border: 1px solid rgba(24, 24, 27, 0.12) !important;
+  border-radius: 8px !important;
+  background: #ffffff !important;
+  color: #18181b !important;
+  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.16) !important;
+}
+
+body.dark .swal2-popup.min-popup,
+body.dark .swal2-popup.min-popup2 {
+  border-color: rgba(255, 255, 255, 0.1) !important;
+  background: #1b1c1d !important;
+  color: rgba(250, 250, 250, 0.94) !important;
+  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.42) !important;
+}
+
+.swal2-title.min-title {
+  color: inherit !important;
+  font-size: 16px !important;
+  line-height: 1.25 !important;
+  font-weight: 600 !important;
+  margin: 0 0 12px !important;
+  padding: 0 !important;
+}
+
+.min-modal {
+  color: #71717a !important;
+  font-size: 13px !important;
+  line-height: 1.45 !important;
+}
+
+body.dark .min-modal {
+  color: rgba(229, 231, 235, 0.62) !important;
+}
+
+.swal2-popup.min-popup a,
+.swal2-popup.min-popup2 a {
+  color: inherit !important;
+  text-decoration-color: rgba(82, 82, 91, 0.35);
+}
+
+.swal2-popup.min-popup img,
+.swal2-popup.min-popup2 img {
+  max-width: 180px;
+  border-radius: 6px;
+}
+
+.swal2-popup.pinokio-input-modal {
+  --pinokio-input-modal-surface: #ffffff;
+  --pinokio-input-modal-surface-muted: rgba(24, 24, 27, 0.03);
+  --pinokio-input-modal-border: rgba(24, 24, 27, 0.12);
+  --pinokio-input-modal-border-strong: rgba(24, 24, 27, 0.16);
+  --pinokio-input-modal-text: #18181b;
+  --pinokio-input-modal-title: #18181b;
+  --pinokio-input-modal-muted: #71717a;
+  --pinokio-input-modal-shadow: 0 18px 50px rgba(15, 23, 42, 0.16);
+  --pinokio-input-modal-focus-border: rgba(24, 24, 27, 0.42);
+  --pinokio-input-modal-focus-ring: rgba(24, 24, 27, 0.12);
+  border-radius: 8px !important;
+}
+
+body.dark .swal2-popup.pinokio-input-modal {
+  --pinokio-input-modal-surface: #1b1c1d;
+  --pinokio-input-modal-surface-muted: rgba(255, 255, 255, 0.04);
+  --pinokio-input-modal-border: rgba(255, 255, 255, 0.1);
+  --pinokio-input-modal-border-strong: rgba(255, 255, 255, 0.14);
+  --pinokio-input-modal-text: rgba(250, 250, 250, 0.94);
+  --pinokio-input-modal-title: rgba(250, 250, 250, 0.94);
+  --pinokio-input-modal-muted: rgba(229, 231, 235, 0.62);
+  --pinokio-input-modal-shadow: 0 24px 72px rgba(0, 0, 0, 0.42);
+  --pinokio-input-modal-focus-border: rgba(255, 255, 255, 0.38);
+  --pinokio-input-modal-focus-ring: rgba(255, 255, 255, 0.14);
+}
+
+.pinokio-input-modal-checkbox-input {
+  accent-color: var(--pinokio-input-modal-title) !important;
+}
+
+.swal2-popup.pinokio-input-modal .pinokio-input-modal-control {
+  border-color: var(--pinokio-input-modal-border-strong) !important;
+  background: var(--pinokio-input-modal-surface-muted) !important;
+  color: var(--pinokio-input-modal-text) !important;
+}
+
+.swal2-popup.pinokio-input-modal .pinokio-input-modal-control:focus {
+  border-color: var(--pinokio-input-modal-focus-border) !important;
+  background: var(--pinokio-input-modal-surface) !important;
+  box-shadow: 0 0 0 3px var(--pinokio-input-modal-focus-ring) !important;
+}
+
+.pinokio-input-modal-actions.swal2-actions .swal2-loader {
+  border-color: var(--pinokio-input-modal-title) transparent var(--pinokio-input-modal-title) transparent !important;
+}
+
+.pinokio-input-modal-confirm.swal2-confirm {
+  border-color: var(--pinokio-input-modal-title) !important;
+  background: var(--pinokio-input-modal-title) !important;
+  color: var(--pinokio-input-modal-surface) !important;
+}
+
+.pinokio-input-modal-confirm.swal2-confirm:hover,
+.pinokio-input-modal-confirm.swal2-confirm:focus-visible {
+  border-color: var(--pinokio-input-modal-text) !important;
+  background: var(--pinokio-input-modal-text) !important;
+  color: var(--pinokio-input-modal-surface) !important;
+  outline: none !important;
+}
+
+.pinokio-modern-close.swal2-close {
+  width: 28px !important;
+  height: 28px !important;
+  margin: 0 !important;
+  border-radius: 6px !important;
+  border: 1px solid transparent !important;
+  background: transparent !important;
+  color: #71717a !important;
+  font-family: inherit !important;
+  font-size: 18px !important;
+  line-height: 1 !important;
+  box-shadow: none !important;
+}
+
+body.dark .pinokio-modern-close.swal2-close {
+  color: rgba(229, 231, 235, 0.58) !important;
+}
+
+.pinokio-modern-close.swal2-close:hover,
+.pinokio-modern-close.swal2-close:focus-visible {
+  background: rgba(24, 24, 27, 0.06) !important;
+  color: #18181b !important;
+  outline: none !important;
+}
+
+body.dark .pinokio-modern-close.swal2-close:hover,
+body.dark .pinokio-modern-close.swal2-close:focus-visible {
+  background: rgba(255, 255, 255, 0.07) !important;
+  color: rgba(250, 250, 250, 0.94) !important;
+}
+
+/* Baseline for older SweetAlert dialogs that do not yet opt into a named modal class. */
+.swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) {
+  width: min(520px, calc(100vw - 32px)) !important;
+  padding: 20px !important;
+  border: 1px solid rgba(24, 24, 27, 0.12) !important;
+  border-radius: 8px !important;
+  background: #ffffff !important;
+  color: #18181b !important;
+  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.16) !important;
+}
+
+body.dark .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) {
+  border-color: rgba(255, 255, 255, 0.1) !important;
+  background: #1b1c1d !important;
+  color: rgba(250, 250, 250, 0.94) !important;
+  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.42) !important;
+}
+
+.swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-title {
+  margin: 0 32px 12px 0 !important;
+  padding: 0 !important;
+  text-align: left !important;
+  color: inherit !important;
+  font-size: 16px !important;
+  line-height: 1.25 !important;
+  font-weight: 600 !important;
+  letter-spacing: 0 !important;
+}
+
+.swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-title > div {
+  justify-content: flex-start !important;
+  padding: 0 !important;
+}
+
+.swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-html-container {
+  margin: 0 !important;
+  padding: 0 !important;
+  text-align: left !important;
+  color: #71717a !important;
+  font-size: 13px !important;
+  line-height: 1.45 !important;
+}
+
+body.dark .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-html-container {
+  color: rgba(229, 231, 235, 0.62) !important;
+}
+
+.swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-close {
+  width: 28px !important;
+  height: 28px !important;
+  margin: 0 !important;
+  border-radius: 6px !important;
+  border: 1px solid transparent !important;
+  color: #71717a !important;
+  font-family: inherit !important;
+  font-size: 18px !important;
+  line-height: 1 !important;
+}
+
+.swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-close:hover,
+.swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-close:focus-visible {
+  background: rgba(24, 24, 27, 0.06) !important;
+  color: #18181b !important;
+  box-shadow: none !important;
+}
+
+body.dark .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-close {
+  color: rgba(229, 231, 235, 0.58) !important;
+}
+
+body.dark .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-close:hover,
+body.dark .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-close:focus-visible {
+  background: rgba(255, 255, 255, 0.07) !important;
+  color: rgba(250, 250, 250, 0.94) !important;
+}
+
+.swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-actions {
+  justify-content: flex-end !important;
+  gap: 8px !important;
+  margin: 16px 0 0 !important;
+  padding: 0 !important;
+}
+
+.swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-styled {
+  min-height: 32px !important;
+  margin: 0 !important;
+  padding: 0 12px !important;
+  border-radius: 6px !important;
+  border: 1px solid rgba(24, 24, 27, 0.12) !important;
+  box-shadow: none !important;
+  font-size: 13px !important;
+  font-weight: 600 !important;
+}
+
+.swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-confirm.swal2-styled {
+  border-color: #18181b !important;
+  background: #18181b !important;
+  color: #ffffff !important;
+}
+
+body.dark .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-confirm.swal2-styled {
+  border-color: rgba(250, 250, 250, 0.94) !important;
+  background: rgba(250, 250, 250, 0.94) !important;
+  color: #1b1c1d !important;
+}
+
+.swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-cancel.swal2-styled {
+  border-color: rgba(24, 24, 27, 0.12) !important;
+  background: transparent !important;
+  color: #52525b !important;
+}
+
+body.dark .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-cancel.swal2-styled {
+  border-color: rgba(255, 255, 255, 0.1) !important;
+  color: rgba(229, 231, 235, 0.7) !important;
+}
+
+.swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .folder-rows {
+  display: grid;
+  gap: 10px;
+  min-width: 0;
+}
+
+.swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .folder-row {
+  display: grid;
+  gap: 6px;
+}
+
+.swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .folder-row label {
+  padding: 0 !important;
+  color: inherit !important;
+  font-size: 12px !important;
+  line-height: 1.35 !important;
+  font-weight: 600 !important;
+}
+
+.swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .field-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .field-row label {
+  flex: 0 0 auto;
+  color: #71717a !important;
+  font-weight: 500 !important;
+}
+
+body.dark .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .field-row label {
+  color: rgba(229, 231, 235, 0.62) !important;
+}
+
+.swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) input.swal2-input,
+.swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) textarea.swal2-input,
+.swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-textarea {
+  width: 100% !important;
+  margin: 0 !important;
+  padding: 8px 10px !important;
+  border: 1px solid rgba(24, 24, 27, 0.16) !important;
+  border-radius: 6px !important;
+  background: rgba(24, 24, 27, 0.03) !important;
+  color: #18181b !important;
+  box-shadow: none !important;
+  font-size: 13px !important;
+  line-height: 1.45 !important;
+}
+
+.swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) input.swal2-input {
+  height: 36px !important;
+}
+
+body.dark .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) input.swal2-input,
+body.dark .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) textarea.swal2-input,
+body.dark .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-textarea {
+  border-color: rgba(255, 255, 255, 0.14) !important;
+  background: rgba(255, 255, 255, 0.04) !important;
+  color: rgba(250, 250, 250, 0.94) !important;
+}
+
+.swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) input.swal2-input:focus,
+.swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) textarea.swal2-input:focus,
+.swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-textarea:focus {
+  border-color: rgba(24, 24, 27, 0.42) !important;
+  background: #ffffff !important;
+  box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.12) !important;
+  outline: none !important;
+}
+
+body.dark .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) input.swal2-input:focus,
+body.dark .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) textarea.swal2-input:focus,
+body.dark .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-textarea:focus {
+  border-color: rgba(255, 255, 255, 0.38) !important;
+  background: rgba(255, 255, 255, 0.05) !important;
+  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14) !important;
+}
+
+.swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .filepond-wrapper {
+  display: grid;
+  grid-template-columns: 112px minmax(0, 1fr);
+  gap: 16px;
+  align-items: start;
+}
+
+.swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .avatar-field {
+  width: 100% !important;
+  height: auto !important;
+  margin: 0 !important;
+  min-width: 0;
+}
+
+.swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .filepond--root {
+  width: 100% !important;
+  max-width: 100% !important;
+}
+
+@media (max-width: 560px) {
+  .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) {
+    padding: 16px !important;
+  }
+
+  .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .filepond-wrapper {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-actions {
+    flex-direction: column-reverse;
+    align-items: stretch;
+  }
+
+  .swal2-popup.swal2-modal:not(.loader-popup):not(.pinokio-download-modal):not(.pinokio-modern-modal):not(.pinokio-input-modal):not(.min-popup):not(.min-popup2):not(.backup-modal-shell) .swal2-styled {
+    width: 100%;
+  }
+}