.ofu-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  width: 100%;
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  font-family: inherit;
  line-height: 1;
  color: #fff;
  border: 1px solid #bbb;
  border-radius: 4px;
  cursor: pointer;
  border-color: #737373;

  transition:
    border-color 0.2s,
    box-shadow 0.2s;

  background: #14161a
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 5"><polygon points="0,0 10,0 5,5" fill="%23999"/></svg>')
    no-repeat right 0.75rem center;
  background-size: 0.6rem;
  padding-right: 2.5rem;
}

.ofu-select:focus {
  border-color: #0066cc;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);
}

.ofu-select::-ms-expand {
  display: none;
}

[data-theme="light"] .ofu-select {
  background: #f9f9f9
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 5"><polygon points="0,0 10,0 5,5" fill="%23999"/></svg>')
    no-repeat right 0.75rem center;
  background-size: 0.6rem;
  padding-right: 2.5rem;
  color: #000000;
}

.ofu-container-scrolling {
  width: 100%;
  overflow-x: auto;
}

@media (max-width: 1649px) {
  .of-grid-scale > .grid {
    --bulma-grid-column-count: 2 !important;
  }
}

@media (max-width: 979px) {
  .of-grid-scale > .grid {
    --bulma-grid-column-count: 1 !important;
  }
}

.ofu-toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 4000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 320px;
  max-width: calc(100vw - 40px);
}

.ofu-toast {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.ofu-modal .modal-card {
  width: 500px;
  max-width: calc(100vw - 40px);
}

.ofu-console-log {
  max-height: 480px;
  overflow-y: auto;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  background: #0b0d10;
  color: #d8d8d8;
  border: 1px solid #737373;
  border-radius: 4px;
  padding: 1rem;
  font-family: monospace;
  font-size: 0.85rem;
}

/* When #vm-vnc-screen itself is the fullscreen element, make sure it (and
   any letterboxing noVNC's scaleViewport leaves around the framebuffer,
   since the guest's resolution rarely matches the screen's aspect ratio)
   is solid black instead of showing through to whatever's behind it. */
#vm-vnc-screen:fullscreen,
#vm-vnc-screen:-webkit-full-screen,
#vm-vnc-screen:-moz-full-screen {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Same idea for the serial consoles (VM and container): the terminal div
   normally has a fixed inline height, which needs overriding (hence
   !important) so it actually fills the screen once fullscreen. */
#vm-console-terminal:fullscreen,
#vm-console-terminal:-webkit-full-screen,
#vm-console-terminal:-moz-full-screen,
#ct-console-terminal:fullscreen,
#ct-console-terminal:-webkit-full-screen,
#ct-console-terminal:-moz-full-screen {
  height: 100% !important;
  width: 100% !important;
  background: #000;
}

[data-theme="light"] .ofu-console-log {
  background: #f5f5f5;
  color: #111;
  border-color: #bbb;
}

/* A <details> used as a Bulma "card" -- native, no-JS collapsible section
   (e.g. the Upload ISO form). <summary> plays the card-header's role, so
   the browser's own disclosure triangle/marker is stripped in favor of the
   existing card-header-icon chevron, which rotates on [open] instead. */
.ofu-collapsible > summary {
  display: flex;
  cursor: pointer;
  list-style: none;
}

.ofu-collapsible > summary::-webkit-details-marker {
  display: none;
}

.ofu-collapsible > summary .card-header-icon i {
  transition: transform 0.15s ease;
}

.ofu-collapsible[open] > summary .card-header-icon i {
  transform: rotate(180deg);
}

/* A <summary> styled as a compact Bulma button (e.g. the per-row "Restore"
   toggle on the backups history table) -- unlike .ofu-collapsible above,
   this stays inline-sized instead of stretching full-width like a card
   header, so it reads as a clickable button rather than a bar. */
.ofu-summary-button {
  display: inline-flex;
  list-style: none;
}

.ofu-summary-button::-webkit-details-marker {
  display: none;
}

/* ------------------------------------------------------------------------
   Setup wizard / onboarding / OwnFusion subscription
   ------------------------------------------------------------------------ */

.ofu-narrow {
  max-width: 640px !important;
}

/* CSS-only reveals: a radio/checkbox with .ofu-reveal-toggle-X shows every
   later sibling with .ofu-reveal-X while checked. No JS involved, so these
   work identically with scripting disabled. The controls stay real, visible,
   labelled inputs (keyboard + screen reader friendly); only the dependent
   fields are hidden. Hidden fields must not be `required` -- validation for
   them happens server-side. */
.ofu-reveal {
  display: none;
}

.ofu-reveal-toggle-a:checked ~ .ofu-reveal-a,
.ofu-reveal-toggle-b:checked ~ .ofu-reveal-b,
.ofu-reveal-toggle-c:checked ~ .ofu-reveal-c,
.ofu-reveal-toggle-d:checked ~ .ofu-reveal-d {
  display: block;
  margin-top: 0.75rem;
}

.ofu-choice-group {
  border: 0;
  padding: 0;
  margin: 0 0 1rem 0;
  min-width: 0;
}

.ofu-choice-group > legend {
  margin-bottom: 0.5rem;
}

.ofu-choice {
  margin-right: 0.4rem;
  vertical-align: middle;
  accent-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l));
}

.ofu-choice-label {
  display: inline-block;
  margin-right: 1.25rem;
  margin-bottom: 0.35rem;
  cursor: pointer;
  vertical-align: middle;
}

.ofu-choice:focus-visible + .ofu-choice-label {
  outline: 2px solid hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l));
  outline-offset: 2px;
  border-radius: 2px;
}

.ofu-choice-help {
  display: block;
  margin: -0.2rem 0 0.5rem 1.6rem;
}

.ofu-secret {
  font-family: monospace;
  letter-spacing: 0.03em;
}

.ofu-kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1rem;
  align-items: center;
}

.ofu-kv dt {
  font-weight: 600;
}

.ofu-kv dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  .ofu-kv {
    grid-template-columns: 1fr;
  }
  .ofu-kv dd {
    margin-bottom: 0.5rem;
  }
}

/* Wizard step indicator */
.ofu-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  list-style: none !important;
  margin: 0 0 1.5rem 0 !important;
  padding: 0;
  counter-reset: none;
}

.ofu-steps li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 !important;
  opacity: 0.7;
}

.ofu-steps .ofu-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  border: 2px solid currentColor;
  font-weight: 600;
  font-size: 0.9rem;
}

.ofu-steps li.is-done,
.ofu-steps li.is-current {
  opacity: 1;
}

.ofu-steps li.is-done .ofu-step-number {
  background: hsl(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l));
  border-color: hsl(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l));
  color: #fff;
}

.ofu-steps li.is-current .ofu-step-number {
  background: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l));
  border-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l));
  color: #fff;
}

.ofu-steps li.is-current .ofu-step-label {
  font-weight: 700;
}

.ofu-wizard-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.ofu-wizard-footer .ofu-spacer {
  flex: 1 1 auto;
}

.ofu-inline-form {
  display: inline;
}

.ofu-tier-table th[scope="row"] {
  white-space: nowrap;
}

.ofu-tier-table td,
.ofu-tier-table thead th {
  text-align: center;
  vertical-align: middle;
}

.ofu-tier-table .is-current-tier {
  background: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 0.12);
}

.ofu-feature-list li {
  margin-bottom: 0.4rem;
}

.ofu-sub-nav {
  margin-bottom: 1.25rem !important;
}

.ofu-domain-exact {
  margin-bottom: 1rem;
}

.ofu-stripe-element {
  padding: 0.75rem;
  border: 1px solid #737373;
  border-radius: 4px;
  margin-bottom: 1rem;
  background: #fff;
}

.ofu-break {
  overflow-wrap: anywhere;
  word-break: break-all;
}

/* Bulma's .button/.field display rules would otherwise override the
   `hidden` attribute on these JS-enhancement-only elements. */
[data-ofu-copy][hidden],
[data-ofu-generator][hidden],
[data-ofu-stripe-setup][hidden],
[data-ofu-stripe-action][hidden],
[data-ofu-nojs-note][hidden],
[data-ofu-autosubmit-hide][hidden] {
  display: none !important;
}

/* Masked subscription ID: <details> reveal, no JS. The masked placeholder
   in <summary> is hidden once open so only the real value shows. */
.ofu-reveal > summary {
  list-style: none;
  cursor: pointer;
}

.ofu-reveal > summary::-webkit-details-marker {
  display: none;
}

.ofu-reveal[open] > summary code {
  display: none;
}

/* Bulma 1.x computes .tag.is-light from the *light* palette entry, which in
   the dark theme lands on a near-white background while the tag keeps its
   light text colour -- white on white. Both themes are pinned here instead
   so these neutral status tags ("Custom/unsigned build", "Static", role
   names, …) stay readable whichever theme is active. */
.tag:not(body).is-light {
  background-color: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), 91%);
  color: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), 21%);
}

[data-theme="dark"] .tag:not(body).is-light {
  background-color: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), 25%);
  color: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), 96%);
}

.ofu-app-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  object-fit: cover;
  flex: 0 0 64px;
  display: block;
  background: rgba(127, 127, 127, 0.12);
}

.ofu-app-icon.is-large {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  flex-basis: 96px;
}

.ofu-app-card {
  height: 100%;
}

.ofu-app-card .card-content {
  padding: 1rem;
  height: 100%;
}

.ofu-app-card-row {
  display: flex;
  gap: 1rem;
  height: 100%;
}

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

.ofu-app-name {
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.25;
  margin-bottom: 0.15rem;
  overflow-wrap: anywhere;
}

.ofu-app-name .tag {
  vertical-align: middle;
}

.ofu-app-meta {
  font-size: 0.8rem;
  opacity: 0.7;
  margin-bottom: 0.4rem;
}

.ofu-app-desc {
  font-size: 0.85rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.6rem;
}

.ofu-app-actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.ofu-store-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-top: 1rem;
}

.ofu-store-count {
  font-size: 0.7rem;
  opacity: 0.7;
  padding-left: 0.35rem;
}

.ofu-store-section {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 1.75rem 0 0.75rem;
}

.ofu-store-section h2 {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
}

.ofu-builder-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}

.ofu-builder-row .field {
  margin-bottom: 0;
}

.ofu-builder-remove {
  flex: 0 0 auto;
  max-width: 60px;
}

.ofu-builder-block {
  border: 1px solid rgba(127, 127, 127, 0.3);
  border-radius: 6px;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
}

.ofu-secret {
  user-select: all;
  word-break: break-all;
}