:root {
      color-scheme: light dark;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --background: #f4f7fb;
      --surface: #ffffff;
      --surface-muted: #f8fafc;
      --text: #172033;
      --muted: #667085;
      --border: #dce3ed;
      --primary: #2563eb;
      --primary-hover: #1d4ed8;
      --primary-soft: #eaf1ff;
      --danger: #c73434;
      --danger-soft: #fff0f0;
      --success: #16803c;
      --shadow: 0 12px 35px rgb(36 50 75 / 9%);
      --radius: 0.8rem;
    }

    * {
      box-sizing: border-box;
    }

    [hidden] {
      display: none !important;
    }

    body {
      min-height: 100vh;
      margin: 0 auto;
      padding: 2rem clamp(1rem, 4vw, 3rem);
      color: var(--text);
      background:
        radial-gradient(circle at top left, #e8f0ff 0, transparent 32rem),
        var(--background);
    }

    body:has(dialog[open]) {
      overflow: hidden;
    }

    body > header,
    main {
      width: min(76rem, 100%);
      margin-inline: auto;
    }

    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      flex-wrap: wrap;
    }

    .help-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.6rem;
      height: 2.6rem;
      border-radius: 50%;
      background: var(--primary-soft);
      border: 1.5px solid var(--primary);
      color: var(--primary);
      font-weight: 850;
      font-size: 1.4rem;
      line-height: 1;
      text-decoration: none;
      box-shadow: 0 2px 6px rgba(37, 99, 235, 0.15);
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .help-link:hover {
      background: var(--primary);
      color: #FFFFFF;
      border-color: var(--primary-hover);
      transform: translateY(-1px) scale(1.08);
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
    }

    .theme-switch {
      position: relative;
      display: inline-flex;
      align-items: center;
      width: 3.2rem;
      height: 1.7rem;
      cursor: pointer;
      user-select: none;
      flex-shrink: 0;
    }

    .theme-switch input {
      opacity: 0;
      width: 0;
      height: 0;
      position: absolute;
    }

    .theme-slider {
      position: absolute;
      inset: 0;
      background-color: var(--surface-muted);
      border: 1.5px solid var(--border);
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 0.35rem;
      transition: background-color 0.2s ease, border-color 0.2s ease;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
    }

    .theme-slider .icon-sun,
    .theme-slider .icon-moon {
      width: 0.82rem;
      height: 0.82rem;
      color: var(--muted);
      pointer-events: none;
      transition: color 0.2s ease;
    }

    .theme-slider::after {
      position: absolute;
      content: "";
      height: 1.25rem;
      width: 1.25rem;
      left: 0.15rem;
      background-color: var(--surface);
      border: 0.5px solid var(--border);
      border-radius: 50%;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
      transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease;
    }

    .theme-switch input:checked + .theme-slider {
      background-color: var(--primary-soft);
      border-color: var(--primary);
    }

    .theme-switch input:checked + .theme-slider .icon-moon {
      color: var(--primary);
    }

    .theme-switch input:checked + .theme-slider::after {
      transform: translateX(1.48rem);
      background-color: var(--primary);
      border-color: var(--primary-hover);
    }

    .theme-switch:focus-within .theme-slider {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
    }

    h1,
    h2,
    p {
      margin-top: 0;
    }

    h1 {
      margin-bottom: 0.25rem;
      font-size: clamp(1.65rem, 4vw, 2.2rem);
      letter-spacing: -0.035em;
    }

    h2 {
      margin-bottom: 1rem;
      font-size: 1.15rem;
    }

    .eyebrow {
      margin-bottom: 0.35rem;
      color: var(--primary);
      font-size: 0.72rem;
      font-weight: 750;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    #status {
      margin: 0;
      color: var(--muted);
      font-size: 0.9rem;
    }

    #status[data-state="ok"] {
      color: var(--success);
    }

    #status[data-state="error"] {
      color: var(--danger);
    }

    main {
      padding: clamp(1rem, 3vw, 1.75rem);
      border: 1px solid var(--border);
      border-radius: calc(var(--radius) + 0.25rem);
      background: var(--surface);
      box-shadow: var(--shadow);
    }

    #login-panel {
      width: min(28rem, 100%);
      margin-inline: auto;
    }

    #login-form {
      display: grid;
      gap: 0.85rem;
    }

    #login-form label {
      display: grid;
      gap: 0.35rem;
      color: var(--muted);
      font-size: 0.86rem;
      font-weight: 650;
    }

    #login-form input {
      min-height: 2.75rem;
      padding: 0.55rem 0.7rem;
      border: 1px solid var(--border);
      border-radius: 0.5rem;
      color: var(--text);
      background: var(--surface);
      font: inherit;
    }

    #user-form {
      display: grid;
      grid-template-columns: repeat(3, minmax(8rem, 1fr)) auto;
      align-items: end;
      gap: 0.75rem;
      margin-bottom: 1rem;
    }

    #user-form label {
      display: grid;
      gap: 0.3rem;
      color: var(--muted);
      font-size: 0.8rem;
      font-weight: 650;
    }

    #user-form input {
      min-width: 0;
      min-height: 2.5rem;
      padding: 0.5rem 0.65rem;
      border: 1px solid var(--border);
      border-radius: 0.5rem;
      color: var(--text);
      background: var(--surface);
      font: inherit;
    }

    #user-panel,
    #space-panel {
      margin-top: 1.25rem;
      padding: 1rem;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface-muted);
    }

    .admin-panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    .admin-panel-header h2 {
      margin: 0;
    }

    #spaces-list {
      display: grid;
      gap: 1.25rem;
    }

    .space-settings-card {
      padding: 1rem;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface-muted);
    }

    .space-settings-header,
    .space-settings-actions {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .space-settings-header {
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .space-settings-header h3 {
      margin: 0;
    }

    .space-settings-actions {
      flex-wrap: wrap;
    }

    .space-permissions {
      margin-top: 1rem;
      padding: 0.75rem;
      border: 1px solid var(--border);
      border-radius: 0.65rem;
      background: var(--surface);
    }

    .space-permissions > summary {
      cursor: pointer;
      font-weight: 650;
      font-size: 1.05rem;
      display: flex;
      align-items: center;
      list-style: none;
    }

    .space-permissions > summary::-webkit-details-marker {
      display: none;
    }

    .space-permissions > summary::marker {
      content: "";
    }

    .space-permissions > summary::before {
      content: "▶";
      display: inline-block;
      margin-right: 0.5rem;
      font-size: 1.1em;
      line-height: 1;
      color: var(--text);
      flex-shrink: 0;
    }

    .space-permissions[open] > summary::before {
      content: "▼";
    }

    .space-permissions[open] > summary {
      margin-bottom: 0.5rem;
    }

    .space-permission-row {
      display: grid;
      grid-template-columns: minmax(10rem, 1fr) minmax(9rem, 14rem);
      align-items: center;
      gap: 1rem;
      padding: 0.65rem 0;
      border-top: 1px solid var(--border);
    }

    .space-permission-row select {
      width: 100%;
    }

    #users-close,
    #spaces-close {
      min-width: 2.5rem;
      min-height: 2.5rem;
      padding: 0.25rem;
      font-size: 1.35rem;
      line-height: 1;
    }

    #users-list li {
      display: grid;
      grid-template-columns:
        minmax(7rem, 0.9fr)
        minmax(4.5rem, 0.5fr)
        repeat(2, minmax(0, 1.65fr))
        minmax(8.5rem, 0.9fr);
      align-items: stretch;
      gap: 0.75rem;
      margin-top: 0.75rem;
      padding: 0.85rem;
      border: 1px solid var(--border);
      border-radius: 0.85rem;
      background: var(--surface);
      box-shadow: 0 0.18rem 0.35rem rgb(30 42 66 / 8%);
    }

    #users-list li > .user-identity,
    #users-list li > .user-role,
    #users-list li > .user-quota-section,
    #users-list li > .user-delete-slot {
      min-width: 0;
    }

    #users-list li > .user-identity,
    #users-list li > .user-role {
      display: flex;
      align-items: center;
    }

    .user-identity,
    .user-role,
    .user-quota-usage > span {
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .user-role,
    .user-quota-usage > span {
      color: var(--muted);
      font-size: 0.82rem;
    }

    .user-quota-usage {
      display: grid;
      min-width: 0;
      gap: 0.25rem;
    }

    .user-quota-section {
      display: grid;
      min-width: 0;
      gap: 0.45rem;
    }

    .user-quota-section > strong {
      font-size: 0.88rem;
    }

    .user-quota-usage progress {
      display: block;
      min-width: 0;
      max-width: 100%;
      width: 100%;
      height: 0.75rem;
      border: 1px solid var(--border);
      border-radius: 999px;
      overflow: hidden;
      background: var(--surface-muted);
      -webkit-appearance: none;
      appearance: none;
      accent-color: var(--primary);
    }

    .user-quota-usage progress[hidden] {
      display: none;
    }

    .user-quota-usage progress::-webkit-progress-bar {
      background: var(--surface-muted);
      border-radius: 999px;
    }

    .user-quota-usage progress::-webkit-progress-value {
      background: var(--primary);
      border-radius: 999px;
    }

    .user-quota-usage progress::-moz-progress-bar {
      background: var(--primary);
      border-radius: 999px;
    }

    .user-delete-slot {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

    .user-delete-slot button {
      width: 100%;
      max-width: 14rem;
    }

    .quota-control {
      display: grid;
      grid-template-columns: minmax(4rem, 0.8fr) auto minmax(6.5rem, 1fr);
      align-items: center;
      gap: 0.45rem;
    }

    .quota-control input {
      min-width: 0;
      width: 100%;
    }

    .quota-control button {
      min-width: 0;
      width: 100%;
    }

    #quota-status,
    #bucket-quota-status {
      margin: 0.2rem 0 0;
      color: var(--muted);
      font-size: 0.84rem;
    }

    #quota-progress,
    #bucket-quota-progress {
      display: block;
      width: min(42rem, 100%);
      height: 0.85rem;
      margin: 0.7rem 0 0;
      border: 1px solid var(--border);
      border-radius: 999px;
      overflow: hidden;
      background: var(--surface-muted);
      -webkit-appearance: none;
      appearance: none;
      accent-color: var(--primary);
    }

    #quota-progress[hidden],
    #bucket-quota-progress[hidden] {
      display: none !important;
    }

    #quota-progress::-webkit-progress-bar,
    #bucket-quota-progress::-webkit-progress-bar {
      background: var(--surface-muted);
      border-radius: 999px;
    }

    #quota-progress::-webkit-progress-value,
    #bucket-quota-progress::-webkit-progress-value {
      background: var(--primary);
      border-radius: 999px;
      transition: width 0.25s ease;
    }

    #quota-progress::-moz-progress-bar,
    #bucket-quota-progress::-moz-progress-bar {
      background: var(--primary);
      border-radius: 999px;
    }

    #users-list {
      margin-top: 0.8rem;
      padding-top: 0.35rem;
      border-top: 1px solid var(--border);
    }

    #user-status-summary {
      display: grid;
      grid-template-columns: repeat(4, minmax(7rem, 1fr));
      gap: 0.75rem;
      margin: 0.8rem 0;
    }

    #user-status-summary > div {
      padding: 0.7rem;
      border: 1px solid var(--border);
      border-radius: 0.65rem;
      background: var(--surface);
    }

    #user-status-summary dt { color: var(--muted); }
    #user-status-summary dd { margin: 0.15rem 0 0; font-size: 1.35rem; font-weight: 700; }

    .user-status {
      display: inline-block;
      width: 0.7rem;
      height: 0.7rem;
      margin-right: 0.55rem;
      border-radius: 50%;
      background: #cbd2dc;
    }

    .user-status-active { background: #65c97a; }
    .user-status-signed_in { background: #d98200; }

    #login-form button {
      border-color: var(--primary);
      color: white;
      background: var(--primary);
    }

    #login-message {
      color: var(--danger);
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    #current-user {
      color: var(--muted);
      font-size: 0.88rem;
    }

    ul {
      padding: 0;
      list-style: none;
    }

    #files > li,
    #trash-files > li {
      position: relative;
      display: flex;
      align-items: center;
      gap: 0.55rem;
      min-height: 2.8rem;
      margin-bottom: 0.2rem;
      padding: 0.25rem 0.4rem;
      border: 1px solid transparent;
      border-radius: 0.65rem;
      background: var(--surface-muted);
      transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
    }

    #files > li:has(.entry-actions[open]) {
      z-index: 10;
    }

    #files > li:hover,
    #trash-files > li:hover {
      border-color: var(--border);
      box-shadow: 0 5px 18px rgb(36 50 75 / 7%);
      transform: translateY(-1px);
    }

    .kind {
      min-width: 4.5rem;
      color: var(--muted);
      font-size: inherit;
      font-weight: 400;
    }

    .entry-size {
      min-width: 5.5rem;
      color: var(--muted);
      font-size: inherit;
      font-weight: 400;
      text-align: right;
      white-space: nowrap;
    }

    .conversion-status {
      flex: 0 0 auto;
      padding: 0.3rem 0.55rem;
      border-radius: 999px;
      color: white;
      background: var(--primary);
      font-size: 0.78rem;
      white-space: nowrap;
    }

    #files.grid-view .conversion-status {
      grid-column: 1 / -1;
      justify-self: start;
    }

    .thumbnail {
      width: 2.15rem;
      height: 2.15rem;
      flex: 0 0 auto;
      border-radius: 0.5rem;
      object-fit: cover;
      background: var(--border);
    }

    .entry-icon {
      display: grid;
      width: 2.15rem;
      height: 2.15rem;
      flex: 0 0 auto;
      place-items: center;
      border-radius: 0.5rem;
      background: var(--primary-soft);
      font-size: 1.3rem;
    }

    .entry-icon.folder-icon {
      font-size: 1.8rem;
    }

    .entry-preview {
      cursor: pointer;
      user-select: none;
    }

    .entry-select {
      width: 0.9rem;
      height: 0.9rem;
      flex: 0 0 auto;
      accent-color: var(--primary);
      cursor: pointer;
    }

    #files > li.selected {
      border-color: var(--primary);
      background: var(--primary-soft);
    }

    #files.grid-view {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
      gap: 0.4rem;
    }

    #files.grid-view > li {
      position: relative;
      display: grid;
      grid-template-columns: 1fr auto;
      align-content: start;
      row-gap: 0;
      min-width: 0;
      min-height: 15rem;
      margin: 0;
      padding: 0.75rem;
    }

    #files.grid-view .thumbnail,
    #files.grid-view .entry-icon {
      width: 100%;
      height: 9rem;
      grid-column: 1 / -1;
      border-radius: 0.65rem;
    }

    #files.grid-view .entry-select {
      position: absolute;
      z-index: 2;
      top: 1rem;
      left: 1rem;
      width: 1.3rem;
      height: 1.3rem;
    }

    #files.grid-view .entry-icon {
      font-size: 3rem;
    }

    #files.grid-view .entry-icon.folder-icon {
      font-size: 5rem;
    }

    #files.grid-view .kind {
      min-width: 0;
      grid-column: 1;
      grid-row: 3;
      margin-top: 0;
      line-height: 1.2;
    }

    #files.grid-view .entry-name {
      width: 100%;
      min-width: 0;
      min-height: 0;
      grid-column: 1 / -1;
      grid-row: 2;
      overflow: hidden;
      padding: 0.35rem 0 0.05rem;
      line-height: 1.2;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #files.grid-view .entry-size {
      min-width: 0;
      grid-column: 1;
      grid-row: 4;
      line-height: 1.2;
      text-align: left;
    }

    .entry-actions {
      position: relative;
      margin-left: auto;
    }

    .entry-actions > summary {
      display: grid;
      width: 1.85rem;
      height: 1.85rem;
      place-items: center;
      border: 1px solid transparent;
      border-radius: 0.4rem;
      background: transparent;
      cursor: pointer;
      list-style: none;
      font-size: 0.82rem;
    }

    .entry-actions > summary::-webkit-details-marker {
      display: none;
    }

    .entry-actions[open] > summary {
      border-color: var(--primary);
      color: var(--primary);
    }

    .entry-actions-menu {
      position: absolute;
      z-index: 5;
      top: calc(100% + 0.3rem);
      right: 0;
      display: grid;
      min-width: 10rem;
      padding: 0.35rem;
      border: 1px solid var(--border);
      border-radius: 0.55rem;
      background: var(--surface);
      box-shadow: var(--shadow);
    }

    .entry-actions-menu button {
      border: 0;
      text-align: left;
    }

    .entry-submenu > summary {
      padding: 0.55rem 0.75rem;
      border-radius: 0.45rem;
      cursor: pointer;
      font-size: 0.84rem;
      font-weight: 620;
      list-style: none;
    }

    .entry-submenu > summary::-webkit-details-marker {
      display: none;
    }

    .entry-submenu > summary::after {
      float: right;
      margin-left: 0.75rem;
      content: "▸";
    }

    .entry-submenu-options {
      display: grid;
      margin-left: 0.65rem;
      padding-left: 0.35rem;
      border-left: 2px solid var(--border);
    }

    .entry-submenu-options button.quality-selected {
      color: white;
      background: var(--primary);
    }

    #files.grid-view .entry-actions {
      grid-column: 2;
      grid-row: 3 / span 2;
      align-self: center;
    }

    #navigation {
      margin-bottom: 1rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid var(--border);
    }

    .area-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 0.25rem;
      margin-bottom: 1.25rem;
      border-bottom: 2px solid var(--border);
    }

    .area-tabs button {
      margin-bottom: -2px;
      border: 2px solid var(--border);
      border-radius: 0.55rem 0.55rem 0 0;
      background: transparent;
      font-size: 1rem;
    }

    .area-tabs button[aria-selected="true"] {
      border-color: var(--border) var(--border) var(--surface);
      color: var(--primary);
      background: var(--surface);
    }

    #navigation-actions {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.75rem;
    }

    .toolbar-menu {
      position: relative;
    }

    .toolbar-menu > summary {
      display: inline-flex;
      height: 2.35rem;
      padding: 0.45rem 0.75rem;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--primary);
      border-radius: 0.5rem;
      color: white;
      background: var(--primary);
      cursor: pointer;
      font-size: 0.84rem;
      font-weight: 620;
      list-style: none;
    }

    .toolbar-menu > summary::-webkit-details-marker {
      display: none;
    }

    .toolbar-menu > summary::after {
      margin-left: 0.5rem;
      content: "▸";
    }

    .toolbar-menu[open] > summary,
    .toolbar-menu > summary:hover {
      border-color: var(--primary-hover);
      background: var(--primary-hover);
    }

    .toolbar-menu-options {
      position: absolute;
      z-index: 10;
      top: calc(100% + 0.3rem);
      left: 0;
      display: grid;
      min-width: 12rem;
      padding: 0.35rem;
      border: 1px solid var(--border);
      border-radius: 0.55rem;
      background: var(--surface);
      box-shadow: var(--shadow);
    }

    .toolbar-menu-options button {
      border: 0;
      color: var(--text);
      background: transparent;
      text-align: left;
    }

    button {
      min-height: 2.35rem;
      padding: 0.45rem 0.75rem;
      border: 1px solid var(--border);
      border-radius: 0.5rem;
      color: var(--text);
      background: var(--surface);
      font: inherit;
      font-size: 0.84rem;
      font-weight: 620;
      cursor: pointer;
      transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
    }

    button:hover:not(:disabled) {
      border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
      background: var(--primary-soft);
      color: var(--primary-hover);
    }

    button:focus-visible {
      outline: 3px solid color-mix(in srgb, var(--primary) 28%, transparent);
      outline-offset: 2px;
    }

    button:disabled {
      cursor: not-allowed;
      opacity: 0.45;
    }

    #preview-selected:not(:disabled) {
      border-color: var(--primary);
      color: white;
      background: var(--primary);
    }

    #preview-selected:hover:not(:disabled) {
      border-color: var(--primary-hover);
      color: white;
      background: var(--primary-hover);
    }

    #path {
      display: block;
      width: fit-content;
      max-width: 100%;
      margin-top: 0.75rem;
      padding: 0.4rem 0.65rem;
      border-radius: 0.4rem;
      color: var(--muted);
      background: var(--surface-muted);
      font-size: 1.4rem;
      line-height: 1.2;
      overflow-wrap: anywhere;
      white-space: normal;
    }

    #message,
    #trash-message {
      color: var(--muted);
      font-size: 0.9rem;
    }

    #navigation #message {
      margin: 0.25rem 0 -0.65rem;
      text-align: right;
    }

    #upload-status {
      display: grid;
      gap: 0.35rem;
      margin-top: 0.8rem;
      padding: 0.7rem;
      border: 1px solid var(--border);
      border-radius: 0.55rem;
      background: var(--surface-muted);
    }

    #upload-status[hidden] {
      display: none;
    }

    #upload-status progress {
      width: 100%;
    }

    #upload-summary,
    #upload-details {
      margin: 0;
      color: var(--muted);
      font-size: 0.85rem;
      overflow-wrap: anywhere;
    }

    #upload-confirm {
      justify-self: end;
    }

    #files {
      margin-top: 0.35rem;
    }

    #search-panel {
      margin-bottom: 1rem;
    }

    #search-form {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      margin-top: 1rem;
    }

    .search-input-wrapper {
      position: relative;
      width: min(42rem, 100%);
    }

    #search-query {
      width: 100%;
      margin: 0;
      padding-right: 2.8rem;
      font-size: 1.1rem;
      appearance: none;
      -webkit-appearance: none;
    }

    #search-clear {
      position: absolute;
      top: 50%;
      right: 0.3rem;
      width: 2.1rem;
      min-height: 2.1rem;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: transparent;
      font-size: 1.45rem;
      line-height: 1;
      transform: translateY(-50%);
    }

    #search-results {
      display: grid;
      gap: 0.55rem;
      margin: 0.75rem 0 0;
      padding: 0;
      list-style: none;
    }

    #search-results li {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 0.25rem 1rem;
      padding: 0.75rem;
      border: 1px solid var(--border);
      border-radius: 0.6rem;
      background: var(--surface);
    }

    .search-result-open {
      overflow: hidden;
      padding: 0;
      border: 0;
      color: var(--primary);
      background: transparent;
      font-size: 0.95rem;
      text-align: left;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .search-result-area {
      color: var(--muted);
      font-size: 0.82rem;
      white-space: nowrap;
    }

    .search-result-excerpt {
      grid-column: 1 / -1;
      overflow: hidden;
      margin: 0;
      color: var(--muted);
      font-size: 0.85rem;
      line-height: 1.4;
      text-overflow: ellipsis;
    }

    .search-result-excerpt mark {
      padding: 0 0.08em;
      color: #3f2f00;
      background: #fde68a;
      border-radius: 0.15rem;
    }

    #search-message {
      min-height: 1.2rem;
      margin: 0.5rem 0 0;
      color: var(--muted);
      font-size: 0.85rem;
    }

    #file-browser.search-active #message,
    #file-browser.search-active > #files,
    #file-browser.search-active > #trash-toggle,
    #file-browser.search-active > #trash-panel {
      display: none;
    }

    .entry-name {
      flex: 1;
      min-width: 7rem;
      padding: 0;
      border: 0;
      color: inherit;
      background: transparent;
      font: inherit;
      font-weight: 620;
      text-align: left;
    }

    .entry-name:not(:disabled) {
      color: var(--text);
      text-decoration: none;
    }

    .entry-name:hover:not(:disabled) {
      color: var(--primary);
      background: transparent;
    }

    .download {
      white-space: nowrap;
    }

    #trash-toggle {
      margin-top: 1rem;
    }

    #trash-panel {
      margin-top: 1.25rem;
      padding: 1rem;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface-muted);
    }

    #trash-empty,
    .danger-action {
      border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
      color: var(--danger);
      background: var(--danger-soft);
    }

    dialog {
      width: min(32rem, calc(100vw - 2rem));
      padding: 1.25rem;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      color: var(--text);
      background: var(--surface);
      box-shadow: var(--shadow);
    }

    .preview-dialog {
      width: min(96rem, calc(100vw - 0.75rem));
      max-width: none;
      height: min(56rem, calc(100vh - 0.75rem));
      max-height: none;
      padding: 0;
      overflow: hidden;
    }

    .text-editor-dialog {
      width: min(72rem, calc(100vw - 2rem));
      height: min(52rem, calc(100vh - 2rem));
      padding: 0;
      overflow: hidden;
    }

    .bucket-restore-dialog {
      width: min(56rem, calc(100vw - 2rem));
      max-height: min(52rem, calc(100vh - 2rem));
      overflow-y: auto;
    }

    .office-dialog {
      width: min(96rem, calc(100vw - 1rem));
      max-width: none;
      height: calc(100vh - 1rem);
      max-height: none;
      padding: 0;
      overflow: hidden;
    }

    .office-dialog > .preview-header {
      height: 2.75rem;
      padding: 0.25rem 0.65rem;
    }

    .office-dialog > .preview-header > .preview-dialog-close {
      margin-left: auto;
    }

    .office-dialog > iframe {
      width: 100%;
      height: calc(100% - 2.75rem);
      border: 0;
      background: var(--surface);
    }

    .text-editor-body {
      display: flex;
      height: calc(100% - 4rem);
      min-height: 0;
      flex-direction: column;
      gap: 0.75rem;
      padding: 1rem;
    }

    .text-editor-input {
      width: 100%;
      min-height: 0;
      flex: 1 1 auto;
      resize: none;
      tab-size: 4;
      font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
      line-height: 1.45;
      white-space: pre;
    }

    .text-editor-status {
      min-height: 1.4em;
      margin: 0;
      color: var(--muted);
    }

    .text-editor-font-controls {
      display: flex;
      flex: 0 0 auto;
      align-items: center;
      gap: 0.35rem;
    }

    .text-editor-font-controls button {
      min-width: 2.5rem;
      padding-inline: 0.6rem;
    }

    .text-editor-font-size {
      min-width: 3.5rem;
      color: var(--muted);
      font-variant-numeric: tabular-nums;
      text-align: center;
      white-space: nowrap;
    }

    .preview-header {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 0.45rem;
      min-height: 4rem;
      margin: 0;
      padding: 0.6rem 0.65rem;
      border-bottom: 1px solid var(--border);
    }

    .preview-title {
      flex: 1;
      min-width: 3rem;
      overflow: hidden;
      margin: 0;
      font-size: 1rem;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .preview-frame-theme-toggle {
      order: 150;
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      margin-left: auto;
      margin-right: 0.9rem;
      cursor: pointer;
    }

    .preview-header .raw-edit-toggle {
      order: 160;
    }

    .preview-header.has-preview-sidebar .preview-frame-theme-toggle {
      position: absolute;
      right: 15.75rem;
      margin-right: 0;
    }

    .preview-frame-theme-toggle input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .preview-frame-theme-track {
      position: relative;
      width: 2.25rem;
      height: 1.2rem;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--surface-muted);
      transition: background 120ms ease;
    }

    .preview-frame-theme-track::after {
      position: absolute;
      top: 0.12rem;
      left: 0.12rem;
      width: 0.82rem;
      height: 0.82rem;
      border-radius: 50%;
      background: var(--muted);
      content: "";
      transition: transform 120ms ease, background 120ms ease;
    }

    .preview-frame-theme-toggle input:checked + .preview-frame-theme-track {
      background: #151515;
    }

    .preview-frame-theme-toggle input:checked + .preview-frame-theme-track::after {
      background: #f4f4f4;
      transform: translateX(1rem);
    }

    .preview-frame-theme-toggle input:focus-visible + .preview-frame-theme-track {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
    }

    .preview-dialog > .preview-header {
      min-height: 2.5rem;
      padding: 0.2rem 0.5rem;
    }

    .preview-dialog > .preview-content,
    .preview-dialog > .preview-frame {
      height: calc(100% - 2.5rem);
    }

    .preview-position {
      flex: 0 0 auto;
      color: var(--muted);
      font-size: 0.9rem;
      white-space: nowrap;
    }

    .preview-navigation {
      display: flex;
      flex: 0 0 auto;
      gap: 0.4rem;
    }

    .preview-navigation button {
      min-width: 2.5rem;
      padding-inline: 0.65rem;
      font-size: 1.1rem;
    }

    .raw-adjustment-control {
      display: grid;
      width: 100%;
      grid-template-columns: 1fr auto;
      grid-template-areas:
        "slider slider"
        "label value";
      align-items: center;
      gap: 0.05rem 0.25rem;
      color: var(--muted);
      font-size: 0.82rem;
      white-space: nowrap;
    }

    .raw-adjustment-control span {
      grid-area: label;
    }

    .raw-adjustment-group {
      display: grid;
      width: 100%;
      justify-items: center;
      gap: 0.45rem;
    }

    .raw-adjustment-group[hidden] {
      display: none;
    }

    .raw-adjustment-control input {
      grid-area: slider;
      width: 100%;
      margin: 0 0 -0.05rem;
    }

    .raw-adjustment-control output {
      grid-area: value;
      min-width: 2.7rem;
      color: var(--text);
      font-variant-numeric: tabular-nums;
      text-align: right;
    }

    .preview-header > button,
    .preview-header > select {
      flex: 0 0 auto;
      padding-inline: 0.55rem;
      white-space: nowrap;
    }

    .preview-header .raw-edit-close {
      order: 100;
      margin-left: auto;
      min-width: 2.2rem;
      padding-inline: 0.55rem;
      font-size: 1.35rem;
      line-height: 1;
    }

    .preview-header .preview-dialog-close {
      order: 200;
      margin-left: 0;
      min-width: 2.2rem;
      padding-inline: 0.55rem;
      font-size: 1.35rem;
      line-height: 1;
    }

    .preview-header.raw-editing .preview-dialog-close {
      margin-left: auto;
    }

    .preview-zoom-toggle {
      min-width: 5.6rem;
    }

    .preview-save-menu {
      position: relative;
      flex: 0 0 auto;
    }

    .preview-save-menu > summary {
      min-height: 2.35rem;
      padding: 0.55rem 0.7rem;
      border: 1px solid var(--border);
      border-radius: 0.5rem;
      background: var(--surface);
      cursor: pointer;
      font-size: 0.84rem;
      font-weight: 620;
      list-style: none;
      white-space: nowrap;
    }

    .preview-save-menu > summary::-webkit-details-marker {
      display: none;
    }

    .preview-save-menu > summary::after {
      margin-left: 0.45rem;
      content: "▾";
    }

    .preview-save-options {
      position: absolute;
      z-index: 4;
      top: calc(100% + 0.35rem);
      right: 0;
      display: grid;
      min-width: 11rem;
      padding: 0.35rem;
      border: 1px solid var(--border);
      border-radius: 0.55rem;
      background: var(--surface);
      box-shadow: var(--shadow);
    }

    .preview-save-options button {
      border: 0;
      text-align: left;
    }

    .preview-header.raw-editing .preview-title {
      flex: 1;
      max-width: none;
    }

    .preview-content.image-preview-content {
      flex-direction: row;
      align-items: stretch;
      gap: 0;
      padding: 0;
    }

    .preview-media-column {
      position: relative;
      display: flex;
      min-width: 0;
      min-height: 0;
      flex: 1 1 auto;
      align-items: center;
      flex-direction: column;
      gap: 0.8rem;
      padding: 1rem;
    }

    .raw-edit-panel {
      display: flex;
      width: 15rem;
      min-height: 0;
      flex: 0 0 15rem;
      align-items: stretch;
      flex-direction: column;
      gap: 0.45rem;
      padding: 0.2rem 0 0.2rem 0.75rem;
      overflow: visible;
      border-left: 1px solid var(--border);
    }

    .raw-edit-panel[hidden] {
      display: none;
    }

    .raw-edit-panel > button,
    .raw-edit-panel > details {
      width: 100%;
    }

    .raw-edit-panel > .preview-zoom-toggle {
      margin-top: 0.55rem;
    }

    .raw-edit-panel .preview-save-menu {
      margin-top: auto;
      margin-bottom: 0.75rem;
    }

    .raw-edit-panel .preview-save-menu > summary {
      text-align: center;
    }

    .raw-edit-panel .preview-save-options {
      top: auto;
      bottom: calc(100% + 0.35rem);
    }

    .preview-frame {
      width: 100%;
      height: calc(100% - 4rem);
      border: 0;
      background: var(--surface-muted);
    }

    .preview-content {
      position: relative;
      display: flex;
      width: 100%;
      height: calc(100% - 4rem);
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 0.8rem;
      padding: 1rem;
      background: var(--surface-muted);
    }

    .preview-content.preview-dark-frame .preview-media-column {
      background: #050505;
    }

    .preview-media {
      display: block;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }

    .preview-media[hidden] {
      display: none;
    }

    .preview-image-viewport {
      position: relative;
      display: flex;
      width: 100%;
      min-height: 0;
      flex: 1 1 auto;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .preview-image-viewport.actual-size {
      display: block;
      overflow: auto;
      cursor: grab;
      touch-action: none;
      user-select: none;
    }

    .preview-image-viewport.actual-size.dragging {
      cursor: grabbing;
    }

    .preview-image {
      min-height: 0;
      max-height: 100%;
    }

    .preview-image-viewport.actual-size .preview-image {
      max-width: none;
      max-height: none;
      object-fit: none;
    }

    .image-information {
      flex: 0 0 auto;
      margin: 0;
      color: var(--muted);
      font-size: 0.9rem;
      line-height: 1.4;
      text-align: center;
    }

    .preview-quality-notice {
      margin: 0;
      color: var(--danger);
      font-size: 0.85rem;
      text-align: center;
    }

    .preview-loading {
      margin: 0;
      color: var(--muted);
    }

    .preview-image-status {
      position: absolute;
      z-index: 2;
      top: 0.75rem;
      left: 50%;
      display: grid;
      max-width: calc(100% - 2rem);
      gap: 0.25rem;
      padding: 0.45rem 0.75rem;
      border: 1px solid rgb(255 255 255 / 18%);
      border-radius: 0.45rem;
      background: rgb(15 23 42 / 88%);
      box-shadow: 0 0.25rem 0.8rem rgb(0 0 0 / 25%);
      color: #f8fafc;
      text-align: center;
      transform: translateX(-50%);
      pointer-events: none;
    }

    .preview-image-status:has(> [hidden]:only-child),
    .preview-image-status:has(> [hidden] + [hidden]) {
      display: none;
    }

    .preview-image-status .preview-loading,
    .preview-image-status .preview-quality-notice {
      color: inherit;
    }

    audio.preview-media {
      width: min(36rem, 100%);
    }

    dialog::backdrop {
      background: rgb(0 0 0 / 45%);
    }

    .transfer-dialog {
      width: min(46rem, calc(100vw - 2rem));
      max-width: 100%;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      padding: 1.5rem;
      border-radius: var(--radius);
    }

    .transfer-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--border);
      padding-bottom: 0.75rem;
    }

    .transfer-title {
      margin: 0;
      font-size: 1.35rem;
      font-weight: 600;
      color: var(--text);
    }

    .transfer-hint-note {
      margin: 0.25rem 0 0;
      font-size: 0.85rem;
      color: var(--muted);
      font-weight: 500;
      line-height: 1.4;
    }

    .transfer-area-section {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
    }

    .transfer-section-label {
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--muted);
    }

    .transfer-area-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .transfer-area-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      padding: 0.55rem 0.9rem;
      font-size: 1rem;
      font-weight: 500;
      border-radius: var(--radius);
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .transfer-area-chip:hover {
      border-color: var(--primary);
      background: var(--surface-muted);
    }

    .transfer-area-chip.active {
      border-color: var(--primary);
      background: var(--primary-soft);
      color: var(--primary);
      font-weight: 600;
    }

    .transfer-area-chip .chip-icon {
      font-size: 1.15rem;
    }

    .transfer-breadcrumbs {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.35rem;
      padding: 0.65rem 0.9rem;
      background: var(--surface-muted);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      font-size: 1.05rem;
    }

    .transfer-breadcrumb-item {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      padding: 0.25rem 0.5rem;
      border: none;
      border-radius: 6px;
      background: transparent;
      color: var(--primary);
      font-size: 1rem;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.12s ease;
    }

    .transfer-breadcrumb-item:hover {
      background: var(--border);
    }

    .transfer-breadcrumb-item.active {
      color: var(--text);
      font-weight: 600;
      cursor: default;
      background: transparent;
    }

    .transfer-breadcrumb-sep {
      color: var(--muted);
      font-size: 1.15rem;
      font-weight: bold;
      user-select: none;
    }

    .transfer-folder-container {
      max-height: 18rem;
      min-height: 10rem;
      overflow-y: auto;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
    }

    .transfer-folder-list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .transfer-folder-item {
      border-bottom: 1px solid var(--border);
    }

    .transfer-folder-item:last-child {
      border-bottom: none;
    }

    .transfer-folder-btn {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.8rem 1.1rem;
      font-size: 1.1rem;
      font-weight: 500;
      border: none;
      border-radius: 0;
      background: transparent;
      color: var(--text);
      text-align: left;
      cursor: pointer;
      transition: background 0.12s ease;
    }

    .transfer-folder-btn:hover:not(:disabled) {
      background: var(--surface-muted);
    }

    .transfer-folder-btn:disabled,
    .transfer-folder-btn.disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    .transfer-folder-left {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
    }

    .transfer-folder-icon {
      font-size: 1.3rem;
    }

    .transfer-folder-name {
      font-size: 1.05rem;
      word-break: break-word;
    }

    .transfer-folder-right {
      display: inline-flex;
      align-items: center;
    }

    .transfer-folder-arrow {
      font-size: 1.35rem;
      font-weight: bold;
      color: var(--muted);
    }

    .transfer-status-message {
      padding: 2.5rem 1rem;
      text-align: center;
      color: var(--muted);
      font-size: 1.05rem;
    }

    .transfer-summary-box {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      padding: 0.65rem 0.95rem;
      background: var(--surface-muted);
      border: 1px solid var(--border);
      border-radius: var(--radius);
    }

    .transfer-summary-label {
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .transfer-summary-path {
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--text);
      word-break: break-all;
    }

    .transfer-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 0.75rem;
      padding-top: 0.5rem;
    }

    .transfer-actions button {
      font-size: 1.05rem;
      padding: 0.6rem 1.25rem;
      border-radius: var(--radius);
    }

    .dialog-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 0.75rem;
    }

    #password-form {
      display: grid;
      min-width: min(24rem, 75vw);
      gap: 1rem;
    }

    #password-form label {
      display: grid;
      gap: 0.35rem;
    }

    #password-message {
      min-height: 1.25rem;
      margin: 0;
      color: var(--danger);
    }

    #password-message[data-state="success"] {
      color: var(--success);
    }

    #file-view.read-only #new-menu,
    #file-view.read-only #upload,
    #file-view.read-only #upload-folder,
    #file-view.read-only #upload-menu,
    #file-view.read-only #trash-empty,
    #file-view.read-only .entry-actions,
    #file-view.read-only #trash-files button {
      display: none;
    }

    #file-view.read-only #file-browser.bucket-mode .entry-actions {
      display: block;
    }

    #file-browser[hidden],
    #space-navigation[hidden],
    #bucket-navigation[hidden] {
      display: none !important;
    }

    #space-navigation,
    #bucket-navigation {
      margin-bottom: 1.5rem;
    }

    .space-navigation-toolbar {
      display: flex;
      justify-content: flex-end;
    }

    .space-navigation-toolbar button:not([hidden]) {
      margin-bottom: 0.75rem;
    }

    #space-navigation-message:empty,
    #bucket-navigation-message:empty {
      display: none;
    }

    #space-navigation-message,
    #bucket-navigation-message {
      margin-bottom: 1rem;
      color: var(--muted);
    }

    #space-navigation hr {
      margin-bottom: 1.5rem;
      border: 0;
      border-top: 1px solid var(--border);
    }

    #space-navigation-list,
    #bucket-navigation-list {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin-bottom: 1.5rem;
    }

    #space-navigation-list button,
    #bucket-navigation-list button {
      display: flex;
      width: 9rem;
      height: 9rem;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 0.8rem;
      padding: 0.85rem;
      border-color: var(--primary);
      border-radius: 0.85rem;
      background: var(--primary);
      text-align: center;
    }

    #space-navigation-list button:hover:not(:disabled),
    #bucket-navigation-list button:hover:not(:disabled) {
      border-color: var(--primary-hover);
      background: var(--primary-hover);
    }

    .space-icon {
      position: relative;
      display: block;
      width: 4.75rem;
      height: 3.75rem;
    }

    .space-icon::before {
      position: absolute;
      bottom: 0.75rem;
      left: 0.65rem;
      width: 1.45rem;
      height: 1.45rem;
      border-radius: 50%;
      background: white;
      box-shadow:
        1.15rem -0.6rem 0 0.16rem white,
        2.2rem 0.05rem 0 0.06rem white;
      content: "";
    }

    .space-icon::after {
      position: absolute;
      right: 0.25rem;
      bottom: 0.55rem;
      left: 0.45rem;
      height: 1.35rem;
      border-radius: 1rem;
      background: white;
      content: "";
    }

    .space-name {
      display: block;
      max-width: 100%;
      padding: 0.35rem 0.6rem;
      border-radius: 0.5rem;
      color: var(--primary-hover);
      background: var(--primary-soft);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .bucket-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 5.25rem;
      height: 4.5rem;
      color: white;
    }

    .bucket-icon svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .bucket-settings-card {
      display: grid;
      min-width: 0;
      max-width: 100%;
      gap: 1rem;
      margin-top: 1rem;
      padding: 1rem;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface-muted);
    }

    .bucket-settings-card h3 { margin: 0; }

    .bucket-settings-form {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.75rem;
    }

    .bucket-settings-form label {
      display: grid;
      min-width: 0;
      gap: 0.3rem;
      color: var(--muted);
      font-size: 0.8rem;
      font-weight: 650;
    }

    .bucket-settings-form input,
    .bucket-settings-form select,
    .bucket-settings-form textarea {
      width: 100%;
      min-width: 0;
      max-width: 100%;
      min-height: 2.5rem;
    }

    .bucket-settings-form input[type="checkbox"] {
      width: auto;
      min-width: 1.25rem;
      min-height: 1.25rem;
      margin: 0;
      cursor: pointer;
      flex-shrink: 0;
    }

    .bucket-settings-form .bucket-enabled {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 0.6rem;
      cursor: pointer;
      color: var(--text);
      grid-column: 1 / -1;
      margin: 0.25rem 0;
    }

    .bucket-settings-form .bucket-enabled span {
      font-weight: 500;
      font-size: 0.95rem;
    }

    .bucket-settings-form .dialog-actions { grid-column: 1 / -1; }

    .bucket-card-actions { margin-top: 0.25rem; }

    .settings-section,
    .storage-backup-section {
      min-width: 0;
      max-width: 100%;
      margin-top: 1rem;
      padding: 0.75rem;
      border: 1px solid var(--border);
      border-radius: 0.65rem;
      background: var(--surface);
    }

    .storage-backup-section {
      margin-top: 1.25rem;
      padding: 0.85rem 1rem;
    }

    .settings-section > summary,
    .storage-backup-section > summary,
    .backup-target > summary,
    .bucket-consistency-details > summary {
      min-width: 0;
      cursor: pointer;
      font-size: 1.05rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      list-style: none;
    }

    .settings-section > summary::-webkit-details-marker,
    .storage-backup-section > summary::-webkit-details-marker,
    .backup-target > summary::-webkit-details-marker,
    .bucket-consistency-details > summary::-webkit-details-marker {
      display: none;
    }

    .settings-section > summary::marker,
    .storage-backup-section > summary::marker,
    .backup-target > summary::marker,
    .bucket-consistency-details > summary::marker {
      content: "";
    }

    .settings-section > summary::before,
    .storage-backup-section > summary::before,
    .backup-target > summary::before,
    .bucket-consistency-details > summary::before {
      content: "▶";
      display: inline-block;
      margin-right: 0.5rem;
      font-size: 1.1em;
      line-height: 1;
      color: var(--text);
      flex-shrink: 0;
    }

    .settings-section[open] > summary::before,
    .backup-target[open] > summary::before,
    .bucket-consistency-details[open] > summary::before {
      content: "▼";
    }

    #backup-settings > summary,
    #s3-settings > summary,
    #bucket-settings > summary,
    #shared-bucket-settings > summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    #backup-settings > summary::before,
    #s3-settings > summary::before,
    #bucket-settings > summary::before,
    #shared-bucket-settings > summary::before {
      display: none;
    }

    #backup-settings > summary > span,
    #s3-settings > summary > span,
    #bucket-settings > summary > span,
    #shared-bucket-settings > summary > span {
      display: inline-flex;
      align-items: center;
    }

    #backup-settings > summary > span::before,
    #s3-settings > summary > span::before,
    #bucket-settings > summary > span::before,
    #shared-bucket-settings > summary > span::before {
      content: "▶";
      display: inline-block;
      margin-right: 0.5rem;
      font-size: 1.1em;
      line-height: 1;
      color: var(--text);
      flex-shrink: 0;
    }

    #backup-settings[open] > summary > span::before,
    #s3-settings[open] > summary > span::before,
    #bucket-settings[open] > summary > span::before,
    #shared-bucket-settings[open] > summary > span::before {
      content: "▼";
    }

    .s3-endpoint-card {
      display: grid;
      min-width: 0;
      max-width: 100%;
      gap: 0.85rem;
      margin-top: 1rem;
      padding: 1rem;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
    }

    .s3-endpoint-card > summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      cursor: pointer;
      font-weight: 650;
      font-size: 1.05rem;
      color: var(--text);
      user-select: none;
    }

    .s3-endpoint-summary-title {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: wrap;
    }

    .s3-endpoint-card > summary::before {
      display: none;
    }

    .s3-endpoint-card > summary .s3-endpoint-summary-title::before {
      content: "▶";
      display: inline-block;
      margin-right: 0.35rem;
      font-size: 0.9em;
      line-height: 1;
      color: var(--success);
      flex-shrink: 0;
    }

    .s3-endpoint-card[open] > summary .s3-endpoint-summary-title::before {
      content: "▼";
    }

    .s3-endpoint-actions-top {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .s3-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      font-size: 0.78rem;
      font-weight: 500;
      padding: 0.15rem 0.55rem;
      border-radius: 999px;
      background: var(--surface-muted);
      border: 1px solid var(--border);
      color: var(--text);
    }

    .s3-badge-managed {
      background: rgba(46, 125, 50, 0.12);
      border-color: rgba(46, 125, 50, 0.3);
      color: var(--success, #2e7d32);
    }

    .s3-badge-shared {
      background: rgba(2, 119, 189, 0.12);
      border-color: rgba(2, 119, 189, 0.3);
      color: #0277bd;
    }

    .s3-badge-creds {
      background: rgba(230, 81, 0, 0.1);
      border-color: rgba(230, 81, 0, 0.3);
      color: #e65100;
    }

    .s3-endpoint-buckets-list {
      display: grid;
      gap: 0.85rem;
      margin-top: 0.5rem;
    }

    .s3-endpoint-card .bucket-settings-card {
      margin-top: 0;
      background: var(--surface-muted);
      border: 1px solid var(--border);
    }

    .settings-section[open] > summary,
    .storage-backup-section[open] > summary {
      margin-bottom: 1rem;
    }

    .settings-field-grid {
      display: grid;
      grid-template-columns: minmax(12rem, 18rem) minmax(16rem, 34rem);
      align-items: center;
      gap: 0.7rem 1rem;
    }

    .settings-field-grid > input,
    .settings-field-grid > select {
      width: 100%;
    }

    .import-system-files-hint {
      max-width: 70rem;
      margin: 0.7rem 0 1rem 1.8rem;
      color: var(--muted);
      line-height: 1.65;
    }

    .credential-state {
      min-height: 1.2em;
      color: var(--muted);
      font-size: 0.82rem;
      font-weight: 650;
    }

    .credential-state.configured {
      color: #198754;
    }

    .backup-target-toolbar {
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    #backup-add,
    #bucket-add,
    #shared-bucket-add {
      min-width: 2.7rem;
      min-height: 2.7rem;
      padding: 0.25rem;
      font-size: 1.6rem;
      line-height: 1;
    }

    #backup-targets {
      display: grid;
      gap: 0.8rem;
    }

    .backup-target {
      min-width: 0;
      max-width: 100%;
      padding: 0.75rem 1rem;
      border: 1px solid var(--border);
      border-radius: 0.8rem;
      background: color-mix(in srgb, var(--surface) 94%, var(--primary));
    }

    .backup-target > summary {
      cursor: pointer;
      font-weight: 750;
    }

    .backup-form {
      display: grid;
      min-width: 0;
      gap: 0.85rem;
      margin-top: 1rem;
    }

    .backup-form > label {
      display: grid;
      min-width: 0;
      grid-template-columns: minmax(11rem, 14rem) minmax(16rem, 30rem) minmax(0, 1fr);
      align-items: center;
      gap: 0.5rem 0.75rem;
      width: 100%;
    }

    .backup-form > label > input,
    .backup-form > label > select {
      width: min(100%, 30rem);
      min-width: 0;
      max-width: 100%;
      box-sizing: border-box;
    }

    .backup-form > .bucket-enabled {
      display: flex;
      grid-template-columns: none;
      align-items: center;
      gap: 0.5rem;
      color: var(--text);
      font-weight: 650;
    }

    .backup-bucket-control {
      display: grid;
      min-width: 0;
      max-width: 100%;
      grid-template-columns: minmax(10rem, 1fr) auto;
      gap: 0.5rem;
      width: min(100%, 42rem);
    }

    .backup-bucket-control > input,
    .backup-bucket-control > select {
      min-width: 0;
    }

    .backup-bucket-control > select {
      grid-column: 1 / -1;
    }

    .backup-field-label {
      color: var(--muted);
      font-weight: 650;
    }

    .backup-form > progress,
    .backup-check-section progress {
      width: 100%;
      height: 1.15rem;
      accent-color: var(--primary);
    }

    .backup-check-section {
      margin-top: 1rem;
      padding-top: 1rem;
      border-top: 2px solid color-mix(in srgb, var(--border) 70%, var(--text));
    }

    .backup-form > .dialog-actions,
    .backup-section-actions {
      margin-top: 1rem;
    }

    .backup-restore-section {
      margin-top: 1rem;
      padding-top: 1rem;
      border-top: 2px solid color-mix(in srgb, var(--border) 70%, var(--text));
    }

    .backup-restore-panel {
      display: grid;
      gap: 0.8rem;
      margin-top: 0.8rem;
    }

    .backup-restore-panel[hidden] {
      display: none;
    }

    .backup-restore-panel > label {
      display: grid;
      grid-template-columns: minmax(10rem, 14rem) minmax(16rem, 30rem);
      align-items: center;
      gap: 0.7rem;
    }

    .backup-restore-entries {
      display: grid;
      max-height: 22rem;
      gap: 0.35rem;
      padding: 0.65rem;
      overflow: auto;
      border: 1px solid var(--border);
      border-radius: 0.55rem;
    }

    .backup-restore-entry {
      display: flex;
      min-height: 2.4rem;
      align-items: center;
      gap: 0.65rem;
    }

    .backup-restore-entry > input {
      flex: 0 0 auto;
    }

    .backup-check-section p {
      max-width: 70rem;
      line-height: 1.55;
    }

    .backup-full-check-section {
      margin-top: 1rem;
      padding-top: 1rem;
      border-top: 2px solid color-mix(in srgb, var(--border) 70%, var(--text));
    }

    .backup-full-check-section progress {
      width: 100%;
      height: 1.15rem;
      accent-color: var(--primary);
    }

    .backup-full-check-section .settings-warning {
      max-width: 70rem;
      padding: 0.75rem;
      border-left: 0.3rem solid #c47a00;
      border-radius: 0.35rem;
      background: color-mix(in srgb, #f6b73c 15%, var(--surface));
      line-height: 1.55;
    }

    .storage-dashboard {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
      gap: 1rem;
    }

    .storage-status-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1rem;
      margin-bottom: 1rem;
    }

    .storage-status-row p {
      margin: 0;
    }

    .storage-card {
      min-width: 0;
      max-width: 100%;
      padding: 0.9rem;
      border: 1px solid var(--border);
      border-radius: 0.6rem;
      background: var(--surface-muted);
    }

    .storage-card h3 {
      margin: 0 0 0.75rem;
    }

    .storage-values {
      display: grid;
      grid-template-columns: minmax(10rem, 1fr) auto;
      gap: 0.4rem 0.8rem;
      margin: 0;
    }

    .storage-values dt {
      min-width: 0;
      color: var(--muted);
      overflow-wrap: anywhere;
    }

    .storage-values dd {
      min-width: 0;
      margin: 0;
      font-weight: 650;
      text-align: right;
      overflow-wrap: anywhere;
    }

    .storage-device + .storage-device {
      margin-top: 0.9rem;
      padding-top: 0.9rem;
      border-top: 1px solid var(--border);
    }

    .smart-test-progress {
      width: 100%;
      height: 0.8rem;
      margin: 0.25rem 0 0.6rem;
      accent-color: var(--primary);
    }

    .smart-test-status {
      margin-top: 1rem;
      line-height: 1.5;
    }

    .storage-good { color: #198754; }
    .storage-warning { color: #b26a00; }
    .storage-critical { color: var(--danger); }

    #storage-scrub-card {
      grid-column: 1 / -1;
    }

    #storage-scrub-progress {
      width: 100%;
      height: 1.15rem;
      accent-color: var(--primary);
    }

    @media (max-width: 72rem) {
      #users-list li {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: stretch;
        gap: 0.65rem;
      }

      .user-delete-slot {
        grid-column: 1 / -1;
      }

      .user-delete-slot {
        justify-content: flex-end;
      }
    }

    @media (max-width: 760px) {
      #user-status-summary { grid-template-columns: repeat(2, minmax(7rem, 1fr)); }
      .settings-field-grid {
        grid-template-columns: 1fr;
        gap: 0.35rem;
      }

      .settings-field-grid > input,
      .settings-field-grid > select {
        margin-bottom: 0.55rem;
      }

      .backup-form > label {
        grid-template-columns: 1fr;
      }

      .settings-section,
      .bucket-settings-card,
      .backup-target {
        padding-inline: 0.65rem;
      }

      .settings-section > summary,
      .backup-target > summary,
      .storage-device > strong,
      .settings-hint,
      .settings-warning {
        overflow-wrap: anywhere;
      }

      .dialog-actions {
        justify-content: stretch;
        gap: 0.5rem;
      }

      .dialog-actions > button {
        min-width: 0;
        max-width: 100%;
        flex: 1 1 12rem;
        white-space: normal;
        overflow-wrap: anywhere;
      }

      .backup-bucket-control {
        grid-template-columns: 1fr;
      }

      .backup-bucket-control > button {
        width: 100%;
        min-width: 0;
        white-space: normal;
      }

      .backup-bucket-control > select {
        grid-column: auto;
      }

      .backup-target-toolbar {
        align-items: flex-start;
      }

      .backup-restore-panel > label {
        grid-template-columns: 1fr;
      }

      .storage-dashboard {
        grid-template-columns: minmax(0, 1fr);
      }

      .storage-values {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0.45rem 0.65rem;
      }
    }

    .search-index-progress {
      width: 100%;
      height: 1.15rem;
      accent-color: var(--primary);
    }

    #search-index-details {
      color: var(--muted);
    }

    #view-controls {
      margin-left: auto;
      display: flex;
      gap: 0.45rem;
    }

    #view-toggle,
    #sync-shared {
      min-width: 2.6rem;
      padding-inline: 0.65rem;
      line-height: 1;
    }

    .sync-symbol {
      display: block;
      font-size: 1.75rem;
      line-height: 1.5rem;
    }

    #sync-shared.synchronizing .sync-symbol {
      animation: shared-sync-spin 0.8s linear infinite;
    }

    @keyframes shared-sync-spin {
      to { transform: rotate(360deg); }
    }

    .view-mode-icon {
      display: block;
      width: 1.5rem;
      height: 1.5rem;
      margin: auto;
      color: currentColor;
    }

    .view-mode-icon.grid-symbol {
      background:
        linear-gradient(currentColor 0 0) left top / 0.62rem 0.62rem no-repeat,
        linear-gradient(currentColor 0 0) right top / 0.62rem 0.62rem no-repeat,
        linear-gradient(currentColor 0 0) left bottom / 0.62rem 0.62rem no-repeat,
        linear-gradient(currentColor 0 0) right bottom / 0.62rem 0.62rem no-repeat;
    }

    .view-mode-icon.list-symbol {
      background:
        linear-gradient(currentColor 0 0) center 0.1rem / 100% 0.25rem no-repeat,
        linear-gradient(currentColor 0 0) center 0.63rem / 100% 0.25rem no-repeat,
        linear-gradient(currentColor 0 0) center 1.16rem / 100% 0.25rem no-repeat;
    }

    #up {
      min-width: 2.6rem;
      padding-inline: 0.65rem;
      font-size: 1.25rem;
      line-height: 1;
    }

    :root[data-theme="dark"] {
      color-scheme: dark;
      --background: #0d1320;
      --surface: #151d2b;
      --surface-muted: #1b2535;
      --text: #edf2f8;
      --muted: #9aa8bc;
      --border: #2b394d;
      --primary: #6495ff;
      --primary-hover: #84aaff;
      --primary-soft: #1d3157;
      --danger: #ff8585;
      --danger-soft: #402126;
      --success: #5ed287;
      --shadow: 0 12px 35px rgb(0 0 0 / 24%);
    }

    :root[data-theme="dark"] body {
      background:
        radial-gradient(circle at top left, #182847 0, transparent 32rem),
        var(--background);
    }

    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) {
        color-scheme: dark;
        --background: #0d1320;
        --surface: #151d2b;
        --surface-muted: #1b2535;
        --text: #edf2f8;
        --muted: #9aa8bc;
        --border: #2b394d;
        --primary: #6495ff;
        --primary-hover: #84aaff;
        --primary-soft: #1d3157;
        --danger: #ff8585;
        --danger-soft: #402126;
        --success: #5ed287;
        --shadow: 0 12px 35px rgb(0 0 0 / 24%);
      }

      :root:not([data-theme="light"]) body {
        background:
          radial-gradient(circle at top left, #182847 0, transparent 32rem),
          var(--background);
      }
    }

    @media (max-width: 47rem) {
      body {
        padding: 0.5rem;
      }

      header {
        display: grid;
        align-items: start;
        gap: 0.65rem;
        margin-bottom: 0.75rem;
      }

      main {
        padding: 0.65rem;
        border-radius: 0.75rem;
      }

      .header-actions {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.45rem;
      }

      #current-user {
        flex: 1 0 100%;
      }

      button,
      .toolbar-menu > summary {
        min-height: 2.75rem;
      }

      .area-tabs button {
        flex: 1 1 30%;
      }

      .bucket-settings-form { grid-template-columns: 1fr; }

      #bucket-navigation-list button,
      #space-navigation-list button {
        width: calc(50% - 0.25rem);
        height: auto;
        aspect-ratio: 1;
      }

      #navigation-actions {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto;
        gap: 0.45rem;
      }

      #navigation-actions .toolbar-menu > summary {
        width: 100%;
      }

      #preview-selected {
        grid-column: 1 / -1;
        grid-row: 2;
      }

      #view-controls {
        margin-left: 0;
      }

      #search-form {
        align-items: stretch;
        gap: 0.4rem;
      }

      #search-query {
        min-height: 2.75rem;
        font-size: 1rem;
      }

      #path {
        font-size: 1rem;
      }

      #user-form {
        grid-template-columns: 1fr;
      }

      #user-panel,
      #space-panel {
        padding: 0.65rem;
      }

      #users-list li {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 0.45rem;
      }

      #users-list li > * {
        grid-column: 1;
      }

      .quota-control {
        width: 100%;
        grid-template-columns: minmax(0, 1fr) auto;
      }

      .quota-control input {
        min-width: 0;
        width: 100%;
      }

      .quota-control button {
        grid-column: 1 / -1;
        width: 100%;
      }

      .user-delete-slot {
        justify-content: flex-end;
      }

      .user-delete-slot button {
        max-width: 100%;
      }

      .space-permission-row {
        grid-template-columns: 1fr;
        gap: 0.35rem;
      }

      #path {
        width: fit-content;
      }

      #files > li,
      #trash-files > li {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        gap: 0.2rem 0.45rem;
        padding: 0.4rem;
      }

      #files.grid-view {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
      }

      #files.grid-view > li {
        aspect-ratio: 1;
        grid-template-rows: minmax(0, 1fr) auto auto;
        min-height: 0;
        padding: 0.5rem;
      }

      #files.grid-view .thumbnail,
      #files.grid-view .entry-icon {
        height: 100%;
        min-height: 0;
        grid-row: 1;
      }

      #files.grid-view .entry-name {
        grid-row: 2;
      }

      #files.grid-view .kind {
        display: none;
      }

      #files.grid-view .entry-size {
        grid-row: 3;
        align-self: center;
        font-size: 0.8rem;
      }

      #files.grid-view .entry-actions {
        grid-row: 3;
      }

      #files.grid-view .entry-actions > summary {
        width: 2.5rem;
        height: 2.5rem;
      }

      .entry-name {
        min-width: 0;
        grid-column: 3;
        grid-row: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      #files:not(.grid-view) .entry-select,
      #trash-files .entry-select {
        grid-column: 1;
        grid-row: 1 / span 2;
        align-self: center;
        justify-self: start;
        width: 1.1rem;
        height: 1.1rem;
        margin: 0;
      }

      #files:not(.grid-view) > li,
      #trash-files > li {
        grid-template-columns: 1.1rem 3rem minmax(0, 1fr) auto;
      }

      #files:not(.grid-view) .thumbnail,
      #files:not(.grid-view) .entry-icon,
      #trash-files .thumbnail,
      #trash-files .entry-icon {
        width: 3rem;
        height: 3rem;
        grid-column: 2;
        grid-row: 1 / span 2;
      }

      #files:not(.grid-view) .entry-icon,
      #trash-files .entry-icon {
        font-size: 1.7rem;
      }

      #files:not(.grid-view) .entry-icon.folder-icon,
      #trash-files .entry-icon.folder-icon {
        font-size: 2.3rem;
      }

      #files:not(.grid-view) .kind,
      #trash-files .kind {
        min-width: 0;
        grid-column: 3;
        grid-row: 2;
        padding-right: 6rem;
        font-size: 0.8rem;
      }

      #files:not(.grid-view) .entry-size,
      #trash-files .entry-size {
        min-width: 0;
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
        font-size: 0.8rem;
        text-align: right;
      }

      #files:not(.grid-view) .entry-actions,
      #trash-files .entry-actions {
        grid-column: 4;
        grid-row: 1 / span 3;
        align-self: center;
      }

      .preview-dialog,
      .text-editor-dialog {
        width: calc(100vw - 0.25rem);
        height: calc(100dvh - 0.25rem);
      }

      .office-dialog {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100dvh;
        max-width: none;
        max-height: none;
        margin: 0;
        border: 0;
        border-radius: 0;
      }

      .office-dialog > iframe {
        width: 100%;
        height: 100%;
      }

      .office-dialog > .preview-header {
        position: absolute;
        z-index: 10;
        top: calc(env(safe-area-inset-top, 0px) + 3.25rem);
        right: calc(env(safe-area-inset-right, 0px) + 0.45rem);
        width: auto;
        height: auto;
        min-height: 0;
        padding: 0;
        border: 0;
        background: transparent;
        pointer-events: none;
      }

      .office-dialog > .preview-header > .preview-title {
        display: none;
      }

      .office-dialog > .preview-header > .preview-dialog-close {
        width: 2.75rem;
        min-width: 2.75rem;
        height: 2.75rem;
        min-height: 2.75rem;
        margin: 0;
        padding: 0;
        color: #fff;
        background: rgb(20 25 35 / 72%);
        border-radius: 50%;
        box-shadow: 0 0.15rem 0.55rem rgb(0 0 0 / 30%);
        pointer-events: auto;
      }

      .preview-header {
        gap: 0.25rem;
      }

      .preview-title {
        font-size: 0.85rem;
      }

      .preview-content.image-preview-content {
        flex-direction: column;
      }

      .raw-edit-panel {
        width: 100%;
        max-height: 46%;
        flex: 0 0 auto;
        padding: 0.55rem;
        overflow-y: auto;
        border-top: 1px solid var(--border);
        border-left: 0;
      }

      .preview-header.has-preview-sidebar .preview-frame-theme-toggle {
        position: static;
        margin-left: auto;
      }
    }

    /* --- Freigaben (Sharing) Styling --- */
    .entry-share-badge {
      display: inline-block;
      font-size: 0.85rem;
      margin-left: 0.35rem;
      color: var(--primary, #2563eb);
      cursor: help;
      vertical-align: middle;
    }

    .rc-dialog {
      border: 1px solid var(--border);
      border-radius: 0.6rem;
      background: var(--surface, #fff);
      color: var(--text, #1e293b);
      box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 25%);
      padding: 1.25rem;
      max-width: 32rem;
      width: 90vw;
    }

    .rc-dialog::backdrop {
      background: rgb(0 0 0 / 45%);
      backdrop-filter: blur(2px);
    }

    .rc-wide-dialog {
      max-width: 48rem;
    }

    .dialog-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--border);
      padding-bottom: 0.75rem;
      margin-bottom: 1rem;
    }

    .dialog-header h2 {
      margin: 0;
      font-size: 1.15rem;
    }

    .dialog-header button {
      background: transparent;
      border: none;
      font-size: 1.4rem;
      cursor: pointer;
      color: var(--muted);
    }

    .share-copy-group {
      display: flex;
      gap: 0.5rem;
      margin: 1rem 0;
    }

    .share-copy-group input {
      flex: 1;
      padding: 0.5rem 0.7rem;
      font-family: monospace;
      font-size: 0.88rem;
      background: var(--surface-muted);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: 0.35rem;
    }

    .share-copy-group input:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
    }

    .share-create-form {
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
      margin: 1rem 0 0.5rem;
    }

    .share-create-form label {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      font-size: 0.88rem;
      font-weight: 500;
      color: var(--text);
    }

    .share-create-form label span {
      display: block;
      color: var(--text);
    }

    .share-create-form input,
    .share-create-form select {
      padding: 0.5rem 0.7rem;
      border: 1px solid var(--border);
      border-radius: 0.35rem;
      font-size: 0.92rem;
      background: var(--surface-muted);
      color: var(--text);
      width: 100%;
      box-sizing: border-box;
    }

    .share-create-form input::placeholder {
      color: var(--muted);
      opacity: 0.85;
    }

    .share-create-form input:focus,
    .share-create-form select:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
    }

    .share-create-form button[type="submit"] {
      margin-top: 0.5rem;
      padding: 0.65rem 1rem;
      font-size: 0.92rem;
      font-weight: 600;
      width: 100%;
    }

    .share-status-card {
      background: var(--surface-muted);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: 0.45rem;
      padding: 0.85rem;
      margin: 1rem 0;
      font-size: 0.9rem;
    }

    .share-status-card p {
      margin: 0.35rem 0;
      color: var(--text);
    }

    .share-status-card strong {
      color: var(--text);
    }

    .share-status-card dl {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 0.35rem 0.75rem;
      margin: 0.5rem 0 0;
    }

    .share-status-card dt {
      color: var(--muted);
    }

    .share-status-card dd {
      margin: 0;
      font-weight: 500;
      color: var(--text);
    }

    #my-shares-table-wrapper {
      overflow-x: auto;
      margin-top: 0.75rem;
    }

    #my-shares-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.88rem;
    }

    #my-shares-table th,
    #my-shares-table td {
      padding: 0.55rem 0.65rem;
      border-bottom: 1px solid var(--border);
      text-align: left;
    }

    #my-shares-table th {
      color: var(--muted);
      font-weight: 600;
      background: var(--surface-muted);
    }

    .user-shares-details {
      grid-column: 1 / -1;
      border-top: 1px solid var(--border);
      padding-top: 0.6rem;
      margin-top: 0.5rem;
      font-size: 0.85rem;
    }

    .user-shares-details > summary {
      cursor: pointer;
      color: var(--success);
      font-weight: 600;
      user-select: none;
      outline: none;
      display: inline-flex;
      align-items: center;
      list-style: none;
    }

    .user-shares-details > summary::-webkit-details-marker {
      display: none;
    }

    .user-shares-details > summary::marker {
      content: "";
    }

    .user-shares-details > summary::before {
      content: "▶";
      display: inline-block;
      margin-right: 0.5rem;
      font-size: 1.35em;
      line-height: 1;
      color: var(--success);
      flex-shrink: 0;
    }

    .user-shares-details[open] > summary::before {
      content: "▼";
    }

    .user-shares-details > summary:hover {
      text-decoration: underline;
    }

    .user-shares-details[open] > summary {
      margin-bottom: 0.55rem;
    }

    .user-shares-content {
      padding: 0.25rem 0;
    }

    .user-shares-table-wrapper {
      overflow-x: auto;
      margin-top: 0.35rem;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 0.55rem;
    }

    .user-shares-table {
      width: 100%;
      min-width: 32rem;
      border-collapse: collapse;
      font-size: 0.85rem;
      text-align: left;
    }

    .user-shares-table th,
    .user-shares-table td {
      padding: 0.5rem 0.65rem;
      border-bottom: 1px solid var(--border);
      vertical-align: middle;
    }

    .user-shares-table th {
      color: var(--muted);
      font-weight: 600;
      background: var(--surface-muted);
      white-space: nowrap;
    }

    .user-shares-table th:nth-child(1),
    .user-shares-table td.user-share-note {
      width: 25%;
      font-weight: 550;
      overflow-wrap: anywhere;
    }

    .user-shares-table th:nth-child(2),
    .user-shares-table td.user-share-path {
      width: 35%;
      overflow-wrap: anywhere;
    }

    .user-shares-table th:nth-child(3),
    .user-shares-table td.user-share-downloads {
      width: 15%;
      white-space: nowrap;
    }

    .user-shares-table th:nth-child(4),
    .user-shares-table td.user-share-expiry {
      width: 15%;
      white-space: nowrap;
    }

    .user-shares-table th:nth-child(5),
    .user-shares-table td.user-share-actions-cell {
      width: 10%;
      text-align: right;
      white-space: nowrap;
    }

    .user-shares-table tbody tr:last-child td {
      border-bottom: none;
    }

    .user-shares-table tbody tr:hover {
      background: var(--surface-muted);
    }

    .user-shares-table .user-share-actions {
      display: inline-flex;
      gap: 0.4rem;
      justify-content: flex-end;
    }

    /* Public Share Page */
    .public-share-container {
      max-width: 44rem;
      margin: 3rem auto;
      padding: 0 1.5rem;
    }

    .public-share-header {
      text-align: center;
      margin-bottom: 2rem;
    }

    .public-share-logo {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.65rem;
    }

    .public-share-logo h1 {
      margin: 0;
      font-size: 1.6rem;
    }

    .public-share-subtitle {
      color: var(--muted);
      margin-top: 0.35rem;
      font-size: 0.95rem;
    }

    .public-share-card {
      background: var(--surface);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: 0.75rem;
      box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 8%);
      padding: 2rem;
      margin-bottom: 1.5rem;
    }

    .public-share-card.error {
      border-color: var(--danger);
    }

    .public-share-card.error h2 {
      color: var(--danger);
      margin-top: 0;
    }

    #public-share-password-form {
      display: flex;
      gap: 0.65rem;
      margin-top: 1rem;
      flex-wrap: wrap;
    }

    #public-share-password-input {
      flex: 1;
      min-width: 14rem;
      padding: 0.55rem 0.75rem;
      border: 1px solid var(--border);
      border-radius: 0.45rem;
      background: var(--surface-muted);
      color: var(--text);
      font-size: 0.95rem;
    }

    #public-share-password-input:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
    }

    #public-share-password-form button {
      padding: 0.55rem 1.25rem;
      background: var(--primary);
      color: #ffffff;
      border: none;
      border-radius: 0.45rem;
      font-weight: 600;
      font-size: 0.95rem;
      cursor: pointer;
      transition: opacity 0.15s ease;
    }

    #public-share-password-form button:hover {
      opacity: 0.9;
    }

    .public-share-meta {
      display: flex;
      align-items: center;
      gap: 1.25rem;
    }

    .public-share-large-icon {
      font-size: 2.8rem;
      line-height: 1;
    }

    .public-share-details {
      flex: 1;
    }

    .public-share-details h2 {
      margin: 0;
      font-size: 1.3rem;
      word-break: break-all;
    }

    .public-share-subtext {
      color: var(--muted);
      margin: 0.35rem 0 0;
      font-size: 0.88rem;
    }

    .public-share-actions .button-primary {
      display: inline-block;
      background: var(--primary, #2563eb);
      color: #fff;
      padding: 0.65rem 1.4rem;
      border-radius: 0.45rem;
      font-weight: 600;
      text-decoration: none;
      font-size: 0.95rem;
      transition: opacity 0.15s ease;
    }

    .public-share-actions .button-primary:hover {
      opacity: 0.9;
    }

    .public-share-preview {
      margin-top: 1.5rem;
      text-align: center;
      border-top: 1px solid var(--border);
      padding-top: 1.5rem;
    }

    .public-share-preview img,
    .public-share-preview video {
      max-width: 100%;
      max-height: 28rem;
      border-radius: 0.45rem;
      box-shadow: 0 0.15rem 0.5rem rgb(0 0 0 / 12%);
    }

    .public-share-preview iframe {
      width: 100%;
      height: 28rem;
      border: 1px solid var(--border);
      border-radius: 0.45rem;
    }

    .public-file-list {
      list-style: none;
      padding: 0;
      margin: 1rem 0 0;
      border-top: 1px solid var(--border);
    }

    .public-file-list li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.65rem 0.5rem;
      border-bottom: 1px solid var(--border);
    }

    .public-preview-text {
      text-align: left;
      background: var(--surface-muted);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: 0.45rem;
      padding: 1rem;
      max-height: 28rem;
      overflow: auto;
      font-family: monospace;
      font-size: 0.88rem;
      white-space: pre-wrap;
      word-break: break-word;
    }

    .public-file-list li:hover {
      background: var(--surface-muted);
    }

    @media (prefers-reduced-motion: reduce) {
      * {
        scroll-behavior: auto !important;
        transition: none !important;
      }

      #sync-shared.synchronizing .sync-symbol {
        animation: none;
      }
    }