:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --header-mark-size: 28px;
  --action-gap: 6px;
  --page: #f5f7f5;
  --surface: #ffffff;
  --surface-soft: #eef3f0;
  --text: #1c2925;
  --muted: #64726d;
  --line: #dce5e0;
  --accent: #087f68;
  --accent-strong: #066c58;
  --accent-soft: #e2f2ed;
  --accent-ink: #075d4d;
  --danger: #b33d42;
  --danger-soft: #f9e8e8;
  --focus: #d58b19;
  --warning-soft: #fff4d6;
  --warning-ink: #7a4e00;
  --status-good: #237a46;
  --status-good-soft: #e5f3ea;
  --status-slow: #946400;
  --shadow: 0 12px 32px rgba(28, 41, 37, 0.08);
  background: var(--page);
  color: var(--text);
}

:root[data-mode="dark"] {
  color-scheme: dark;
  --page: #151b19;
  --surface: #1d2522;
  --surface-soft: #252f2b;
  --text: #edf3ef;
  --muted: #abb9b2;
  --line: #36423d;
  --accent-soft: #203c34;
  --accent-ink: #c2f1df;
  --danger: #ff8f93;
  --danger-soft: #412629;
  --warning-soft: #42351d;
  --warning-ink: #ffd166;
  --status-good: #74d99b;
  --status-good-soft: #203b2b;
  --status-slow: #ffd166;
  --shadow: 0 14px 36px rgba(0, 0, 0, 0.26);
}

:root[data-mode="system"] {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root[data-mode="system"] {
    --page: #151b19;
    --surface: #1d2522;
    --surface-soft: #252f2b;
    --text: #edf3ef;
    --muted: #abb9b2;
    --line: #36423d;
    --accent-soft: #203c34;
    --accent-ink: #c2f1df;
    --danger: #ff8f93;
    --danger-soft: #412629;
    --warning-soft: #42351d;
    --warning-ink: #ffd166;
    --status-good: #74d99b;
    --status-good-soft: #203b2b;
    --status-slow: #ffd166;
    --shadow: 0 14px 36px rgba(0, 0, 0, 0.26);
  }
}

:root[data-palette="ocean"] { --accent: #176fb0; --accent-strong: #105a94; --accent-soft: #e4f0fa; --accent-ink: #124e7b; }
:root[data-palette="coral"] { --accent: #c45148; --accent-strong: #a63e37; --accent-soft: #f8e9e5; --accent-ink: #80322c; }
:root[data-palette="citrus"] { --accent: #758a1b; --accent-strong: #5f7110; --accent-soft: #eff3d9; --accent-ink: #4c5b0f; }
:root[data-mode="dark"][data-palette="ocean"] { --accent-soft: #1c3448; --accent-ink: #c2e2ff; }
:root[data-mode="dark"][data-palette="coral"] { --accent-soft: #452b29; --accent-ink: #ffd0c8; }
:root[data-mode="dark"][data-palette="citrus"] { --accent-soft: #343b1d; --accent-ink: #e6f3a0; }

@media (prefers-color-scheme: dark) {
  :root[data-mode="system"][data-palette="ocean"] { --accent-soft: #1c3448; --accent-ink: #c2e2ff; }
  :root[data-mode="system"][data-palette="coral"] { --accent-soft: #452b29; --accent-ink: #ffd0c8; }
  :root[data-mode="system"][data-palette="citrus"] { --accent-soft: #343b1d; --accent-ink: #e6f3a0; }
}

* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; min-height: 100dvh; margin: 0; display: flex; flex-direction: column; background: var(--page); color: var(--text); }
button, input, select, textarea { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
a { color: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

.shell { width: min(100% - 40px, 1120px); margin-inline: auto; }
.site-header { position: sticky; top: 0; z-index: 30; min-height: 78px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 440px) minmax(0, 1fr); align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); background: var(--page); transition: min-height .18s ease, padding .18s ease; }
.site-header.is-compact { min-height: 48px; padding-block: 4px; }
.site-header > .brand { max-width: calc(50% - 24px); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 700; white-space: nowrap; }
.brand-mark { width: var(--header-mark-size); height: var(--header-mark-size); display: grid; flex: 0 0 var(--header-mark-size); place-items: center; border-radius: 6px; background: var(--accent); color: #fff; font-size: 14px; line-height: 1; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.site-header > .header-actions { grid-column: 3; justify-self: end; margin-left: 0; }
.header-music-player { position: absolute; z-index: 1; top: 50%; left: 50%; display: flex; min-width: 0; align-items: center; justify-content: center; gap: 5px; transform: translate(-50%, -50%); }
.header-audio-desktop { display: none; }
.header-audio-title { overflow: hidden; color: var(--text); font-size: 12px; font-weight: 620; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.header-audio-desktop audio { display: block; width: 100%; height: 34px; }
.header-music-control { width: var(--header-mark-size); height: var(--header-mark-size); display: grid; flex: 0 0 var(--header-mark-size); place-items: center; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--muted); cursor: pointer; }
.header-music-control:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent-ink); }
.header-music-control:disabled { cursor: default; opacity: .38; }
.header-music-control svg { width: 17px; height: 17px; display: block; }
.header-music-disc { display: grid; position: relative; width: var(--header-mark-size); height: var(--header-mark-size); flex: 0 0 var(--header-mark-size); place-items: center; overflow: hidden; padding: 0; border: 0; border-radius: 6px; background: var(--accent); box-shadow: inset 0 0 0 2px var(--line); color: #fff; cursor: pointer; }
.header-music-disc img { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.header-music-logo { position: relative; z-index: 1; display: grid; width: 100%; height: 100%; aspect-ratio: 1; place-items: center; overflow: hidden; border-radius: 6px; background: var(--accent); color: #fff; font-size: 14px; font-weight: 700; line-height: 1; transition: background .18s ease; }
.header-music-disc-groove { position: absolute; z-index: 3; inset: 4px; display: none; border: 1px solid rgb(255 255 255 / 42%); border-radius: 50%; box-shadow: 0 0 0 2px rgb(0 0 0 / 18%); pointer-events: none; }
.header-music-player.is-playing .header-music-disc { border-radius: 50%; background: radial-gradient(circle, var(--accent) 0 12%, #222 13% 20%, #393939 21% 24%, #171717 25% 100%); box-shadow: inset 0 0 0 2px var(--line); }
.header-music-player.is-playing .header-music-logo { display: none; }
.header-music-player.is-playing .header-music-disc-groove { display: block; }
.header-music-player.is-playing .header-music-disc::after { position: absolute; z-index: 4; width: 5px; height: 5px; display: block; border: 2px solid rgb(255 255 255 / 82%); border-radius: 50%; background: #171717; box-shadow: 0 0 0 1px rgb(0 0 0 / 42%); content: ""; }
.header-music-player:not(.is-playing) .header-music-cover { display: none; }
.header-music-player:not(.is-playing) .header-music-disc { animation: none; border-radius: 6px; background: var(--accent); }
.header-music-player:not(.is-playing) .header-music-logo { display: grid; }
.header-music-player.is-playing .header-music-disc { animation: record-spin 3.2s linear infinite; }
@keyframes record-spin { to { transform: rotate(360deg); } }
.nav-link { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600; }
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--accent); }
.preferences { position: relative; display: flex; flex: 0 0 auto; align-items: center; margin-left: auto; }
.site-header .preferences { margin-left: 0; }
.preferences-toggle { font-size: 0; }
.brightness-icon { width: 19px; height: 19px; display: block; }
.auth-action { gap: 6px; white-space: nowrap; }
.auth-action-icon { width: 16px; height: 16px; display: block; }
.preferences-menu { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; display: grid; width: min(310px, calc(100vw - 28px)); gap: 14px; padding: 15px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow); color: var(--text); }
.preferences-section + .preferences-section { padding-top: 12px; border-top: 1px solid var(--line); }
.preferences-section h2 { margin: 0 0 8px; color: var(--muted); font-size: 12px; font-weight: 700; }
.preference-options { display: grid; gap: 6px; }
.mode-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.language-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.preference-option { min-width: 0; min-height: 36px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--muted); cursor: pointer; font-size: 12px; line-height: 1.25; touch-action: manipulation; }
.preference-option[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); font-weight: 650; }
.palette-options { display: flex; align-items: center; gap: 8px; }
.palette-choice { width: 40px; height: 40px; display: grid; flex: 0 0 40px; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); cursor: pointer; touch-action: manipulation; }
.palette-choice[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.palette-swatch { width: 23px; height: 23px; display: block; border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 50%; }
.palette-swatch[data-palette-swatch="forest"] { background: #087f68; }
.palette-swatch[data-palette-swatch="ocean"] { background: #176fb0; }
.palette-swatch[data-palette-swatch="coral"] { background: #c45148; }
.palette-swatch[data-palette-swatch="citrus"] { background: #758a1b; }
.palette-choice[aria-pressed="true"] .palette-swatch { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }

main { flex: 1 0 auto; padding-block: 42px 60px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.eyebrow { margin: 0 0 8px; color: var(--accent); font-size: 12px; font-weight: 700; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: 30px; line-height: 1.2; font-weight: 680; }
h2 { font-size: 18px; line-height: 1.3; }
.subtitle { margin-bottom: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.count { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.count-mark { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

.browser-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.breadcrumbs { display: flex; min-width: 0; align-items: center; gap: 6px; overflow-x: auto; color: var(--muted); scrollbar-width: thin; }
.crumb { flex: 0 0 auto; padding: 4px 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; }
.crumb:hover, .crumb[aria-current="page"] { color: var(--accent); }
.crumb-separator { color: var(--line); font-size: 13px; }
.search-field { display: inline-flex; flex: 0 0 220px; align-items: center; gap: 8px; color: var(--muted); }
.search-field input { width: 100%; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--text); font-size: 13px; }
.search-controls { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 8px; }
.sort-toolbar { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; margin: 0; }
.sort-mode-button { display: inline-grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 700; line-height: 1; }
.sort-mode-button:hover, .sort-mode-button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.sort-mode-symbol { display: block; min-width: 1em; text-align: center; }
.loading-indicator { display: flex; min-height: 128px; align-items: center; justify-content: center; color: var(--muted); font-size: 14px; }
.loading-bounce-label { display: inline-flex; white-space: pre; color: var(--accent); font-weight: 620; }
.loading-character { display: inline-block; animation: loading-character-bounce 1.1s ease-in-out infinite; animation-delay: var(--loading-delay); }
@keyframes loading-character-bounce { 0%, 65%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }
.share-list-region { position: relative; min-height: 180px; }
.share-list-region.is-loading { height: auto; min-height: 180px; overflow: hidden; }
.share-list-loading { position: absolute; z-index: 2; inset: 0; min-height: 180px; padding-top: 44px; background: var(--page); }
.share-list-region.is-loading .share-table thead { position: relative; z-index: 3; background: var(--page); }
.share-list-region.is-loading .share-table tbody { visibility: hidden; }
.service-list-loading { min-height: 150px; }
.table-wrap { overflow-x: auto; }
.file-table { width: 100%; border-collapse: collapse; text-align: left; }
.file-table th { height: 44px; padding: 0 12px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.file-table td { height: 58px; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 14px; }
.file-table th:first-child, .file-table td:first-child { padding-left: 2px; }
.file-table th:last-child, .file-table td:last-child { width: 132px; text-align: right; }
.table-sort-button { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; text-transform: inherit; }
.table-sort-button:hover { color: var(--accent); }
.file-table th[aria-sort="ascending"] .table-sort-button, .file-table th[aria-sort="descending"] .table-sort-button { color: var(--accent); }
.sort-indicator { color: var(--muted); font-size: 13px; line-height: 1; }
.entry-name { display: inline-flex; min-width: 0; align-items: center; gap: 10px; padding: 5px 0; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit; overflow-wrap: anywhere; }
.entry-name:hover { color: var(--accent); }
.kind-icon { position: relative; flex: 0 0 17px; width: 17px; height: 13px; border: 1.5px solid currentColor; border-radius: 2px; color: var(--accent); }
.kind-icon.directory::before { position: absolute; top: -5px; left: 1px; width: 7px; height: 4px; border: 1.5px solid currentColor; border-bottom: 0; border-radius: 2px 2px 0 0; content: ""; }
.kind-icon.file { width: 13px; height: 16px; flex-basis: 13px; color: var(--muted); }
.kind-icon.file::after { position: absolute; right: -1px; top: -1px; width: 5px; height: 5px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; background: var(--surface); content: ""; }
.type-label { color: var(--muted); font-size: 13px; }
.button { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--text); text-decoration: none; cursor: pointer; font-size: 13px; font-weight: 620; }
.button:hover { border-color: var(--accent); color: var(--accent); }
.button-primary { border-color: var(--accent); background: var(--accent); color: #fff; }
.button-primary:hover { border-color: var(--accent-strong); background: var(--accent-strong); color: #fff; }
.button-danger { color: var(--danger); }
.button-small { min-height: 32px; padding-inline: 10px; }
.help-icon-button { display: inline-grid; vertical-align: middle; }
.help-icon-button svg { width: 17px; height: 17px; }
.button:disabled, .icon-button:disabled { cursor: wait; opacity: .62; }
.table-action { text-align: right; }
.empty-state { padding: 52px 16px; color: var(--muted); text-align: center; }
.empty-state strong { display: block; margin-bottom: 8px; color: var(--text); font-size: 16px; }
.empty-state p { margin-bottom: 16px; font-size: 14px; }
.load-more-wrap { display: flex; justify-content: center; padding-top: 20px; }
.load-more-wrap.is-loading-more { min-height: 52px; }
.load-more-loading { min-height: 36px; width: 100%; }
.toast-region { position: fixed; z-index: 100; top: max(12px, env(safe-area-inset-top)); left: 50%; display: grid; width: min(420px, calc(100vw - 24px)); gap: 8px; pointer-events: none; transform: translateX(-50%); }
.toast { position: relative; overflow: hidden; min-height: 44px; padding: 12px 16px 14px; border: 0; border-radius: 0; background: var(--surface-soft); box-shadow: none; color: var(--text); font-size: 13px; line-height: 1.45; opacity: 0; pointer-events: auto; transform: translateY(-8px); transition: opacity .18s ease, transform .18s ease; cursor: pointer; }
.toast[data-state="visible"] { opacity: 1; transform: translateY(0); }
.toast[data-state="leaving"] { opacity: 0; transform: translateY(-8px); }
.toast[data-kind="success"] { background: var(--accent-soft); color: var(--accent-ink); }
.toast[data-kind="error"] { background: var(--danger-soft); color: var(--danger); }
.toast[data-kind="warning"] { background: var(--warning-soft); color: var(--warning-ink); }
.toast-message { display: block; overflow-wrap: anywhere; }
.toast-progress { position: absolute; right: 0; bottom: 0; left: 0; display: block; height: 3px; background: currentColor; opacity: .72; transform-origin: left center; animation: toast-countdown var(--toast-duration) linear forwards; }
@keyframes toast-countdown { to { transform: scaleX(0); } }
.site-footer { display: flex; justify-content: space-between; gap: 16px; padding-block: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  .loading-character { animation: none; }
}

.admin-main { max-width: 880px; }
.admin-section { padding-block: 24px; border-top: 1px solid var(--line); }
.admin-section:first-child { border-top: 0; padding-top: 0; }
.admin-section h2 { margin-bottom: 8px; }
.admin-section > .subtitle { margin-bottom: 18px; }
.form-grid { display: grid; gap: 14px; max-width: 560px; }
.field { display: grid; gap: 7px; color: var(--text); font-size: 13px; font-weight: 600; }
.field input, .field textarea, .field select { width: 100%; min-height: 42px; padding: 0 11px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--text); font-size: 14px; }
#filter-patterns { min-height: 96px; padding: 10px 11px; resize: vertical; }
#share-virtual-folder.is-unassigned-selection, #webdav-directory-virtual-folder.is-unassigned-selection { color: var(--muted); }
#share-virtual-folder:not(.is-unassigned-selection), #webdav-directory-virtual-folder:not(.is-unassigned-selection) { color: var(--accent-ink); }
#share-virtual-folder option.unassigned-option, #webdav-directory-virtual-folder option.unassigned-option { color: var(--muted); }
#share-virtual-folder option.virtual-folder-option, #webdav-directory-virtual-folder option.virtual-folder-option { color: var(--accent-ink); }
.field textarea { min-height: 88px; padding-block: 9px; resize: vertical; line-height: 1.45; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 0.8; }
.field-help { margin: -2px 0 0; color: var(--muted); font-size: 12px; font-weight: 400; }
.field-checkbox { display: flex; align-items: flex-start; gap: 10px; }
.field-checkbox input { flex: 0 0 16px; width: 16px; min-height: 16px; margin: 2px 0 0; padding: 0; accent-color: var(--accent); }
.field-checkbox > span { display: grid; gap: 5px; }
.agent-enabled { display: flex; align-items: center; gap: 10px; }
.agent-enabled input { width: 18px; min-height: 18px; padding: 0; accent-color: var(--accent); }
#agent-settings-form input:not([type="checkbox"]), #agent-settings-form select, #agent-site-form input { font-size: 16px; }
.agent-log { max-height: 480px; overflow: auto; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-soft); color: var(--text); font: 13px/1.55 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 2px; }
.inline-loading { display: inline-flex; min-height: 36px; align-items: center; color: var(--muted); font-size: 13px; }
.current-root { margin: 14px 0 0; overflow-wrap: anywhere; color: var(--muted); font-size: 13px; }
.current-root code { color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.auth-panel { max-width: 500px; padding: 22px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow); }
.auth-panel h2 { margin-bottom: 8px; }
.auth-panel .subtitle { margin-bottom: 20px; }
.section-topline { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 20px; }
.security-note { max-width: 620px; margin: 0; padding: 12px 14px; border-left: 3px solid var(--focus); background: var(--surface-soft); color: var(--muted); font-size: 13px; line-height: 1.55; }
.status-text { display: none; }
.user-menu { position: relative; }
.header-actions > .auth-action, .header-actions > .preferences { display: none; }
.user-menu-trigger { display: flex; max-width: min(240px, 52vw); min-height: 38px; align-items: center; gap: 8px; overflow: hidden; padding: 0 9px; border: 1px solid transparent; border-radius: 7px; color: var(--text); cursor: pointer; font-size: 13px; font-weight: 620; list-style: none; text-overflow: ellipsis; white-space: nowrap; touch-action: manipulation; transition: border-color .18s ease, background .18s ease, color .18s ease; }
.user-menu-trigger::-webkit-details-marker { display: none; }
.user-menu[open] .user-menu-trigger { border-color: var(--line); background: var(--surface-soft); }
.user-menu-avatar { display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border: 1px solid var(--accent); border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); }
.user-menu-avatar svg { width: 15px; height: 15px; display: block; }
.user-menu-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-name:empty { display: none; }
.user-menu-panel { position: absolute; z-index: 20; top: calc(100% + 8px); right: 0; display: grid; min-width: 280px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); animation: user-menu-enter .16s ease-out; }
.user-menu-panel .preferences-menu { position: static; z-index: auto; width: auto; min-width: 0; margin: 0; padding: 6px 0 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.user-menu-heading { display: flex; min-height: 30px; align-items: center; padding: 0 9px 5px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.user-menu-link { display: flex; width: 100%; min-height: 40px; align-items: center; gap: 10px; padding: 0 9px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--text); cursor: pointer; font-size: 13px; font-weight: 620; line-height: 1.2; text-align: left; text-decoration: none; touch-action: manipulation; transition: border-color .18s ease, background .18s ease, color .18s ease; }
.user-menu-link:focus-visible { border-color: var(--accent); outline: 0; }
.user-menu-item-icon { display: grid; width: 18px; height: 18px; flex: 0 0 18px; place-items: center; color: var(--accent); }
.user-menu-item-icon svg { width: 17px; height: 17px; display: block; }
.user-menu-item-label { min-width: 0; flex: 1; }
.user-menu-item-arrow { width: 14px; height: 14px; flex: 0 0 14px; color: var(--muted); transition: transform .18s ease, color .18s ease; }
@media (hover: hover) and (pointer: fine) {
  .preference-option:hover, .palette-choice:hover { border-color: var(--accent); color: var(--accent); }
  .user-menu-trigger:hover { border-color: var(--line); background: var(--surface-soft); }
  .user-menu-link:hover { border-color: var(--line); background: var(--surface-soft); color: var(--accent-ink); }
  .user-menu-link:hover .user-menu-item-arrow { color: var(--accent); transform: translateX(2px); }
}
.user-menu-divider { height: 1px; margin: 7px 4px; background: var(--line); }
.user-menu-logout { color: var(--danger); }
.user-menu-logout .user-menu-item-icon { color: currentColor; }
@keyframes user-menu-enter { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .user-menu-panel, .user-menu-trigger, .user-menu-link, .user-menu-item-arrow { animation: none; transition: none; }
}
@media (hover: none) {
  .user-menu-panel { animation: none; }
}

@media (max-width: 1024px) {
  .site-header { align-items: center; flex-direction: row; justify-content: space-between; gap: 12px; padding-block: 12px; }
  .site-header { display: flex; }
  .brand { min-width: 0; flex: 1 1 auto; gap: 8px; overflow: hidden; }
  .brand-mark { flex-basis: var(--header-mark-size); }
  .brand [data-home-name] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .header-actions { width: auto; min-width: 0; flex: 0 0 auto; justify-content: flex-end; flex-wrap: nowrap; gap: 12px; }
  .user-menu { min-width: 0; }
  .user-menu-trigger { max-width: min(180px, 38vw); }
  .preferences { margin-left: auto; }
  .page-heading { align-items: flex-start; flex-direction: column; gap: 14px; }
  .search-field { flex-basis: 180px; }
}

@media (max-width: 560px) {
  .shell { width: min(100% - 28px, 1120px); }
  .user-menu-panel { min-width: min(280px, calc(100vw - 28px)); }
  .header-music-player { gap: 2px; }
  .header-music-control svg { width: 15px; height: 15px; }
  main { padding-block: 30px 42px; }
  h1 { font-size: 26px; }
  .header-actions { align-items: center; gap: 8px; }
  .user-menu-trigger { max-width: min(132px, 35vw); padding-inline: 6px; }
  .preferences { width: auto; justify-content: flex-start; }
  .browser-toolbar { align-items: stretch; flex-direction: column; gap: 8px; border-bottom: 0; }
  .search-field { flex: 1 1 auto; }
  .search-controls { width: 100%; justify-content: stretch; }
  .file-table th:nth-child(2), .file-table td:nth-child(2) { display: none; }
  .file-table th:last-child, .file-table td:last-child { width: 96px; }
  .file-table th, .file-table td { padding-inline: 8px; }
  .file-table td { height: 54px; }
  .preview-dialog { width: calc(100vw - 12px); height: calc(100vh - 12px); height: calc(100dvh - 12px); border-radius: 5px; }
  .preview-toolbar { min-height: 50px; gap: 8px; padding: 8px 10px; }
  .preview-toolbar h2 { font-size: 14px; }
  .text-preview, .markdown-preview, .archive-preview { padding: 16px 12px; }
  .document-preview-viewer { min-height: 0; }
  .button-small { min-height: 30px; padding-inline: 8px; }
  .site-footer { flex-direction: column; gap: 6px; }
  .auth-panel { padding: 18px; }
  .section-topline { flex-direction: column; }
}

@media (max-width: 820px) {
  .header-actions { gap: 8px; }
}

@media (max-width: 360px) {
  .shell { width: min(100% - 24px, 1120px); }
  .header-actions { gap: 6px; }
  .user-menu-trigger { max-width: 104px; }
  .preferences-menu { right: 0; }
}

.portal-main { max-width: 1120px; padding-block: 32px 60px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 16px; }
.section-heading h2 { margin: 0; }
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.admin-service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.admin-service-grid .service-card-copy strong, .scriptable-admin-grid .service-card-copy strong { overflow-wrap: anywhere; }
.portal-main .home-service-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 821px) and (max-width: 1024px) {
  .portal-main .home-service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 561px) and (max-width: 820px) {
  .portal-main .home-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.service-card { min-height: 92px; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); text-decoration: none; }
.service-card:hover { border-color: var(--accent); }
.service-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.service-card[type="button"] { width: 100%; text-align: left; font: inherit; cursor: pointer; }
.service-card--plain { grid-template-columns: 44px minmax(0, 1fr); }
.scriptable-admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-service-grid .service-card, .scriptable-admin-grid .service-card { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; }
.service-card-indicators { min-width: 18px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; color: var(--muted); }
.service-card-status-light { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: #9299a0; box-shadow: 0 0 0 3px var(--surface-soft); }
.service-card-status-light[data-enabled="true"] { background: var(--status-good); box-shadow: 0 0 0 3px var(--status-good-soft); }
.service-card-visibility { width: 18px; height: 18px; display: grid; flex: 0 0 18px; place-items: center; color: #9299a0; }
.service-card-visibility[data-visible="true"] { color: var(--status-good); }
.service-card-visibility svg { width: 18px; height: 18px; display: block; }
.service-card-visibility .visibility-eye-open { display: inline; }
.service-card-visibility .visibility-eye-closed { display: none; }
.service-card-visibility[data-visible="false"] .visibility-eye-open { display: none; }
.service-card-visibility[data-visible="false"] .visibility-eye-closed { display: inline; }
.scriptable-share-main { max-width: 1120px; }
.scriptable-share-grid { max-width: 744px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.scriptable-widget-card {
  position: relative; container-type: inline-size; width: 100%; max-width: 364px; min-width: 0; min-height: 0; aspect-ratio: 2.14; display: block; justify-self: center; padding: 0;
  overflow: hidden; border: 1px solid var(--widget-line); border-radius: 23px; background: var(--widget-bg); color: var(--widget-text);
  text-align: left; cursor: pointer; transition: border-color .14s ease, transform .14s ease, opacity .14s ease;
}
.scriptable-widget-card[data-widget-service="jiji"] .scriptable-widget-body,
.scriptable-widget-card[data-widget-service="codex"] .scriptable-widget-body,
.scriptable-widget-card[data-widget-service="calendar"] .scriptable-widget-body { inset: 10px 11px 0; }
.scriptable-widget-card[data-widget-service="weather"] .scriptable-widget-body { inset: 8px 12px 0; }
.scriptable-widget-card[data-widget-service="codex"][data-widget-theme="light"],
.scriptable-widget-card[data-widget-service="codex"][data-widget-theme="system"] {
  --widget-codex-accent: #287b53; --widget-codex-warning: #906124; --widget-codex-danger: #b4533d;
}
.scriptable-widget-card[data-widget-service="codex"][data-widget-theme="dark"] {
  --widget-codex-accent: #8dd0a5; --widget-codex-warning: #e6bd78; --widget-codex-danger: #ef9b84;
}
.scriptable-widget-card[data-widget-theme="light"], .scriptable-widget-card[data-widget-theme="system"] {
  color-scheme: light; --widget-bg: #f3f6f2; --widget-surface: #fff; --widget-surface-soft: #edf2ed; --widget-text: #192720;
  --widget-muted: #65736b; --widget-faint: #89968e; --widget-line: #dce4de; --widget-line-strong: #c8d4cc;
  --widget-accent: #287b53; --widget-accent-strong: #1f6945; --widget-accent-soft: #e3f1e8; --widget-today: #c93636;
  --widget-special: #c56a1a; --widget-blue: #397497; --widget-badge-weekend: #838d86;
}
.scriptable-widget-card[data-widget-theme="dark"] {
  color-scheme: dark; --widget-bg: #151a17; --widget-surface: #1e2521; --widget-surface-soft: #232c26; --widget-text: #edf4ef;
  --widget-muted: #a4b1a8; --widget-faint: #7d8a81; --widget-line: #333e37; --widget-line-strong: #46534a;
  --widget-accent: #81c89c; --widget-accent-strong: #9ad7ae; --widget-accent-soft: #263e30; --widget-today: #c93636;
  --widget-special: #ffad5c; --widget-blue: #8ebbd4; --widget-badge-weekend: #68726b;
}
@media (prefers-color-scheme: dark) {
  .scriptable-widget-card[data-widget-theme="system"] {
    color-scheme: dark; --widget-bg: #151a17; --widget-surface: #1e2521; --widget-surface-soft: #232c26; --widget-text: #edf4ef;
    --widget-muted: #a4b1a8; --widget-faint: #7d8a81; --widget-line: #333e37; --widget-line-strong: #46534a;
    --widget-accent: #81c89c; --widget-accent-strong: #9ad7ae; --widget-accent-soft: #263e30; --widget-today: #c93636;
    --widget-special: #ffad5c; --widget-blue: #8ebbd4; --widget-badge-weekend: #68726b;
  }
  .scriptable-widget-card[data-widget-service="codex"][data-widget-theme="system"] {
    --widget-codex-accent: #8dd0a5; --widget-codex-warning: #e6bd78; --widget-codex-danger: #ef9b84;
  }
}
.scriptable-widget-card:hover { border-color: var(--widget-accent); }
.scriptable-widget-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--widget-accent) 42%, transparent); outline-offset: 3px; }
.scriptable-widget-card[aria-busy="true"] { opacity: .65; cursor: progress; }
.scriptable-widget-body { position: absolute; inset: 8px 12px 0; display: grid; min-width: 0; min-height: 0; grid-template-rows: 32px minmax(0, 1fr); gap: 8px; }
.scriptable-widget-body.is-jiji { display: flex; flex-direction: column; gap: 0; }
.scriptable-widget-body.is-codex { display: flex; flex-direction: column; gap: 0; }
.scriptable-widget-body.is-calendar { display: flex; flex-direction: column; gap: 0; }
.scriptable-widget-body.is-weather { inset-block-end: 8px; display: flex; flex-direction: column; gap: clamp(4px, 1.48cqw, 5px); }
.scriptable-widget-header { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 3px 0; }
.scriptable-widget-body.is-jiji .scriptable-widget-header { min-height: 16px; flex: 0 0 16px; padding: 0; }
.scriptable-widget-body.is-codex .scriptable-widget-header { min-height: 16px; flex: 0 0 16px; padding: 0; }
.scriptable-widget-body.is-calendar .scriptable-widget-header { min-height: 16px; flex: 0 0 16px; padding: 0; }
.scriptable-widget-body.is-weather .scriptable-widget-header { min-height: clamp(12px, 3.85cqw, 13px); flex: 0 0 clamp(12px, 3.85cqw, 13px); gap: 6px; padding: 0; }
.scriptable-widget-body.is-jiji .scriptable-widget-title > strong,
.scriptable-widget-body.is-calendar .scriptable-widget-title > strong { font-size: 11px; }
.scriptable-widget-title { display: flex; min-width: 0; flex: 1 1 auto; align-items: baseline; gap: 6px; overflow: hidden; }
.scriptable-widget-title > strong { min-width: 0; margin: 0; overflow: hidden; color: var(--widget-muted); font-size: 12px; font-weight: 680; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.scriptable-widget-meta { min-width: 0; flex: 1 1 auto; overflow: hidden; color: var(--widget-muted); font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.scriptable-widget-updated { flex: 0 0 auto; color: var(--widget-accent-strong); font-size: 10px; font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.scriptable-widget-updated.tone-stale { color: var(--widget-special); }
.scriptable-widget-updated.tone-expired { color: var(--danger); }
.scriptable-widget-metrics { display: grid; min-width: 0; min-height: 0; grid-template-rows: repeat(2, minmax(0, 1fr)); align-content: center; gap: clamp(11px, 4.14cqw, 14px); padding: 0; }
.scriptable-widget-body.is-jiji .scriptable-widget-metrics { flex: 0 0 auto; margin-block: auto; }
.scriptable-widget-metric-pair { display: grid; min-width: 0; grid-template-rows: auto auto; align-content: center; gap: 1px; }
.scriptable-widget-metric-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 16px; }
.scriptable-widget-metric-row > * { min-width: 0; flex: 1 1 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scriptable-widget-metric-label { color: var(--widget-muted); font-size: clamp(11px, 3.85cqw, 13px); line-height: 1.2; }
.scriptable-widget-metric-value { color: var(--widget-text); font-size: clamp(13px, 4.44cqw, 15px); line-height: 1.2; font-weight: 620; font-variant-numeric: tabular-nums; }
.scriptable-widget-metric-row > .is-right { text-align: right; }
.scriptable-widget-body.is-weather .scriptable-widget-title > strong { font-size: clamp(9px, 3.25cqw, 11px); }
.scriptable-widget-body.is-weather .scriptable-widget-meta { font-size: clamp(8px, 2.66cqw, 9px); }
.scriptable-widget-body.is-weather .scriptable-widget-updated { font-size: clamp(9px, 2.96cqw, 10px); }
.scriptable-widget-body.is-weather .scriptable-widget-title { gap: 2px; }
.scriptable-weather-preview { display: flex; min-width: 0; min-height: 0; flex: 0 0 auto; flex-direction: column; gap: clamp(4px, 1.48cqw, 5px); color: var(--widget-text); }
.scriptable-weather-days { display: grid; min-width: 0; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.scriptable-widget-body.is-weather .scriptable-weather-days { height: clamp(52px, 18.34cqw, 62px); flex: 0 0 clamp(52px, 18.34cqw, 62px); }
.scriptable-weather-day { display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: 1px; text-align: center; }
.scriptable-weather-weekday { color: var(--widget-muted); font-size: clamp(8px, 2.96cqw, 10px); line-height: clamp(12px, 4.14cqw, 14px); white-space: nowrap; }
.scriptable-weather-day.is-today .scriptable-weather-weekday { color: var(--widget-today); font-weight: 700; }
.scriptable-weather-icon { font-size: clamp(18px, 6.51cqw, 22px); line-height: 1; }
.scriptable-weather-temps { font-size: clamp(8px, 2.66cqw, 9px); line-height: clamp(18px, 5.92cqw, 20px); white-space: nowrap; }
.scriptable-weather-temps i { color: var(--widget-muted); font-style: normal; }
.scriptable-weather-rain { min-width: 0; height: clamp(40px, 14.2cqw, 48px); flex: 0 0 clamp(40px, 14.2cqw, 48px); color: var(--widget-blue); }
.scriptable-weather-chart { display: block; width: 100%; height: 100%; flex: 1 1 auto; }
.scriptable-weather-chart svg { display: block; width: 100%; height: 100%; min-height: 40px; overflow: visible; }
.scriptable-widget-empty { grid-column: 1 / -1; color: var(--widget-muted); font-size: 11px; }
.scriptable-codex-preview { display: flex; min-width: 0; min-height: 0; flex: 1 1 auto; flex-direction: column; justify-content: center; gap: 8px; color: var(--widget-text); }
.scriptable-widget-body.is-codex .scriptable-widget-title > strong { font-size: 11px; font-weight: 700; }
.scriptable-widget-card[data-widget-service="codex"] .scriptable-widget-updated.tone-online { color: var(--widget-codex-accent); }
.scriptable-widget-card[data-widget-service="codex"] .scriptable-widget-updated.tone-stale { color: var(--widget-codex-warning); }
.scriptable-codex-stats { display: grid; min-width: 0; flex: 0 0 auto; grid-template-rows: 14px 16px; gap: 4px; }
.scriptable-codex-total { display: flex; min-width: 0; align-items: center; gap: 5px; color: var(--widget-muted); font-size: 9px; font-weight: 700; line-height: 1; }
.scriptable-codex-total > strong { color: var(--widget-text); font-size: 9px; font-weight: 700; font-variant-numeric: tabular-nums; }
.scriptable-codex-status-bar { display: flex; min-width: 0; height: 16px; align-items: stretch; gap: 0; overflow: hidden; border-radius: 999px; background: var(--widget-line); }
.scriptable-codex-status-bar.is-empty { align-items: center; justify-content: center; color: var(--widget-muted); font-size: 8.3px; font-weight: 700; }
.scriptable-codex-status-segment { display: flex; min-width: 0; flex: 1 1 0; align-items: center; justify-content: center; overflow: hidden; color: #fff; font-size: 8.3px; font-variant-numeric: tabular-nums; }
.scriptable-codex-status-segment:first-child { border-radius: 999px 0 0 999px; }
.scriptable-codex-status-segment:last-child { border-radius: 0 999px 999px 0; }
.scriptable-codex-status-segment:only-child { border-radius: 999px; }
.scriptable-codex-status-segment.is-active { background: var(--widget-codex-accent); }
.scriptable-codex-status-segment.is-exhausted { background: #b4533d; }
.scriptable-codex-status-segment.is-abnormal { background: #906124; }
.scriptable-widget-card[data-widget-theme="dark"] .scriptable-codex-status-segment { color: #151a17; }
.scriptable-widget-card[data-widget-theme="dark"] .scriptable-codex-status-segment.is-active { background: #8dd0a5; }
.scriptable-widget-card[data-widget-theme="dark"] .scriptable-codex-status-segment.is-exhausted { background: #ef9b84; }
.scriptable-widget-card[data-widget-theme="dark"] .scriptable-codex-status-segment.is-abnormal { background: #e6bd78; }
@media (prefers-color-scheme: dark) {
  .scriptable-widget-card[data-widget-theme="system"] .scriptable-codex-status-segment { color: #151a17; }
  .scriptable-widget-card[data-widget-theme="system"] .scriptable-codex-status-segment.is-active { background: #8dd0a5; }
  .scriptable-widget-card[data-widget-theme="system"] .scriptable-codex-status-segment.is-exhausted { background: #ef9b84; }
  .scriptable-widget-card[data-widget-theme="system"] .scriptable-codex-status-segment.is-abnormal { background: #e6bd78; }
}
.scriptable-codex-current { display: flex; min-width: 0; min-height: 0; flex: 0 0 auto; flex-direction: column; gap: 0; }
.scriptable-codex-current-label { height: 11px; color: var(--widget-muted); font-size: 8.5px; line-height: 11px; }
.scriptable-codex-current-name { height: 15px; min-width: 0; margin-top: 1px; overflow: hidden; color: var(--widget-text); font-size: 10.5px; font-weight: 700; line-height: 15px; text-overflow: ellipsis; white-space: nowrap; }
.scriptable-codex-token-total { display: flex; height: 11px; min-width: 0; align-items: center; gap: 4px; margin-top: 1px; overflow: hidden; color: var(--widget-muted); font-size: 8.5px; line-height: 11px; white-space: nowrap; }
.scriptable-codex-token-total > strong { color: var(--widget-text); font-size: 8.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.scriptable-codex-quota-rows { display: grid; min-width: 0; gap: 3px; margin-top: 3px; }
.scriptable-codex-quota-rows.is-fallback { margin-top: 4px; }
.scriptable-codex-quota-row { display: grid; min-width: 0; height: 14px; grid-template-columns: 66px minmax(0, 1fr) 42px; align-items: center; gap: 8px; }
.scriptable-codex-quota-reset { min-width: 0; overflow: hidden; color: var(--widget-muted); font-size: 8.5px; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.scriptable-codex-quota-progress { display: block; min-width: 0; height: 6px; overflow: hidden; border-radius: 999px; background: var(--widget-line); }
.scriptable-codex-quota-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--widget-codex-accent); }
.scriptable-codex-quota-percent { color: var(--widget-codex-accent); font-size: 9px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.scriptable-codex-quota-row.is-warning .scriptable-codex-quota-progress > span { background: var(--widget-codex-warning); }
.scriptable-codex-quota-row.is-warning .scriptable-codex-quota-percent { color: var(--widget-codex-warning); }
.scriptable-codex-quota-row.is-danger .scriptable-codex-quota-progress > span { background: var(--widget-codex-danger); }
.scriptable-codex-quota-row.is-danger .scriptable-codex-quota-percent { color: var(--widget-codex-danger); }
.scriptable-codex-quota-fallback { color: var(--widget-codex-accent); font-size: 9px; font-weight: 700; line-height: 14px; }
.scriptable-calendar-preview { display: grid; width: 100%; min-width: 0; min-height: 0; grid-template-rows: minmax(0, 24.26cqw) 5.92cqw; align-content: center; gap: 1.48cqw; margin-block: auto; }
.scriptable-calendar-days { display: grid; width: 100%; min-width: 0; height: 24.26cqw; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; gap: 0; }
.scriptable-calendar-days.is-seven { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.scriptable-calendar-day { display: grid; min-width: 0; height: 24.26cqw; grid-template-rows: 5.03cqw 16.57cqw; place-content: center; place-items: center; gap: 1.78cqw; padding: 0 1px; border-radius: 7px; text-align: center; }
.scriptable-calendar-weekday { display: inline-flex; min-width: 24px; height: 5.03cqw; align-items: center; justify-content: center; padding: 0 4px; overflow: hidden; border-radius: 7px; color: var(--widget-muted); font-size: clamp(10px, 3.85cqw, 13px); line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.scriptable-calendar-date-card { display: grid; width: 100%; min-width: 0; height: 16.57cqw; grid-template-rows: 7.1cqw 4.44cqw; align-content: center; justify-items: center; gap: .89cqw; padding: 1.18cqw .59cqw; border-radius: 6px; }
.scriptable-calendar-date-value { position: relative; display: inline-flex; min-width: 0; align-items: center; justify-content: center; }
.scriptable-calendar-date { min-width: 0; color: var(--widget-text); font-size: clamp(19px, 6.51cqw, 22px); line-height: 1; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.scriptable-calendar-lunar { max-width: 100%; overflow: hidden; color: var(--widget-muted); font-size: clamp(9px, 3.25cqw, 11px); line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.scriptable-calendar-lunar.is-special { color: var(--widget-special); }
.scriptable-calendar-day-badge { position: absolute; z-index: 1; top: -1px; right: -2.96cqw; display: grid; width: 3.25cqw; height: 3.25cqw; place-items: center; border-radius: 50%; background: var(--widget-badge-weekend); color: #fff; font-size: clamp(6px, 2.37cqw, 8px); font-weight: 700; line-height: 1; }
.scriptable-calendar-day-badge.is-holiday { background: var(--widget-today); }
.scriptable-calendar-day.is-current .scriptable-calendar-weekday { background: var(--widget-today); color: #fff; }
.scriptable-calendar-summary { display: flex; width: 100%; height: 5.92cqw; min-width: 0; max-width: 100%; align-items: center; justify-content: center; overflow: hidden; color: var(--widget-muted); font-size: clamp(10px, 3.55cqw, 12px); font-weight: 600; line-height: 1.1; text-align: center; }
.scriptable-calendar-summary-primary { display: flex; min-width: 0; max-width: 100%; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; }
.scriptable-calendar-summary-primary > span, .scriptable-calendar-summary-primary > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scriptable-calendar-summary-primary > strong.is-term { color: var(--widget-blue); font-weight: 700; }
.scriptable-calendar-separator { flex: 0 0 auto; padding-inline: 2px; color: var(--widget-muted); }
.scriptable-editor-section .section-heading { align-items: center; }
.scriptable-editor-section .section-heading h2 { margin-bottom: 0; }
.scriptable-editor-fields { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.scriptable-editor-fields h3 { grid-column: 1 / -1; margin: 0; font-size: 15px; }
.scriptable-editor-fields > .field-help { grid-column: 1 / -1; margin: 0; }
.scriptable-editor-fields .inline-form-row { grid-column: 1 / -1; }
.inline-form-row { display: flex; align-items: end; gap: 10px; }
.inline-form-row .field { flex: 1; }
.scriptable-location-results { display: grid; grid-column: 1 / -1; gap: 8px; }
.scriptable-location-choice { justify-self: start; }
.scriptable-token-section .form-actions { margin-top: 10px; }
.service-card-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); font-size: 23px; }
.service-card-icon svg { width: 24px; height: 24px; display: block; }
.service-card-copy { min-width: 0; display: grid; gap: 5px; }
.service-card-copy strong { color: var(--accent-ink); font-size: 15px; }
.service-card-copy > span { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.host-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.host-card { min-width: 0; display: flex; flex-direction: column; gap: 12px; overflow: hidden; padding: 16px 16px 0; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); cursor: pointer; }
.host-card-details { min-width: 0; display: flex; flex-direction: column; gap: 12px; cursor: default; }
.host-card-header { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.host-card-header:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.host-card-identity { min-width: 0; display: flex; align-items: center; gap: 10px; }
.host-card-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 5px; background: var(--accent-soft); color: var(--accent-ink); }
.host-card-icon svg { width: 19px; height: 19px; display: block; }
.host-card-identity h3 { min-width: 0; margin: 0; overflow: hidden; color: var(--accent-ink); font-size: 15px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.host-card-endpoint { min-width: 0; overflow: hidden; margin: -5px 0 0; color: var(--muted); font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
.host-card-state-light { margin-left: auto; }
.host-card-state { display: inline-flex; flex: 0 0 auto; align-items: center; align-self: center; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 650; line-height: 1.2; white-space: nowrap; }
.host-card-state-dot { width: 8px; height: 8px; display: inline-block; border-radius: 50%; background: currentColor; }
.host-availability { display: grid; gap: 11px; padding-block: 11px; border-block: 1px solid var(--line); }
.host-availability-row { min-width: 0; display: grid; gap: 6px; }
.host-availability-row h4, .host-trends > h4 { margin: 0; color: var(--muted); font-size: 11px; font-weight: 650; }
.host-availability-strip { display: grid; min-width: 0; gap: 2px; }
.host-availability-strip.is-daily { grid-template-columns: repeat(30, minmax(0, 1fr)); }
.host-availability-strip.is-recent { grid-template-columns: repeat(48, minmax(0, 1fr)); }
.host-availability-bar { min-width: 0; height: 11px; border-radius: 2px; background: var(--line); }
.host-availability-bar[data-status="healthy"] { background: var(--status-good); }
.host-availability-bar[data-status="slow"] { background: var(--status-slow); }
.host-availability-bar[data-status="offline"] { background: var(--danger); }
.host-card-applications-wrap { min-width: 0; padding-block: 10px; }
.host-card-applications { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.host-card-applications[role="list"] { list-style: none; }
.host-application-button { position: relative; width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: var(--surface-soft); color: var(--muted); cursor: pointer; transition: background-color .16s ease, color .16s ease, opacity .16s ease; }
.host-application-button[data-installed="true"] { color: var(--accent-ink); }
.host-application-button[data-running="true"] { border-color: var(--status-good); background: var(--status-good-soft); color: var(--status-good); }
.host-application-button[data-running="false"] { background: var(--surface-soft); color: var(--muted); }
.host-application-button:hover { background: var(--accent-soft); color: var(--accent-ink); }
.host-application-button:disabled { cursor: wait; opacity: .58; }
.host-application-button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.host-application-button svg { width: 20px; height: 20px; display: block; }
.host-application-icon { display: grid; place-items: center; width: 100%; height: 100%; }
.host-application-icon svg { width: 20px; height: 20px; display: block; }
.host-application-add { background: transparent; color: var(--accent); }
.host-application-add svg { width: 19px; height: 19px; }
.host-application-update { position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border: 2px solid var(--surface); border-radius: 50%; background: var(--danger); }
.host-application-loading, .host-application-error { position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; display: grid; place-items: center; border: 2px solid var(--surface); border-radius: 50%; background: var(--accent); color: var(--surface); font-size: 11px; font-weight: 800; line-height: 1; }
.host-application-loading svg { width: 12px; height: 12px; animation: host-application-pulse 1s steps(2, end) infinite; }
.host-application-error { background: var(--danger); color: #fff; }
@keyframes host-application-pulse { 50% { opacity: .38; transform: scale(.78); } }
.host-application-options { min-width: 0; display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 6px; }
.host-application-option { min-height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--text); cursor: pointer; text-align: left; }
.host-application-option:hover { border-color: var(--accent); background: var(--surface-soft); }
.host-application-option:disabled { cursor: wait; opacity: .58; }
.host-application-option-icon { width: 26px; height: 26px; flex-basis: 26px; border: 0; cursor: inherit; }
.host-application-option-copy { min-width: 0; display: grid; gap: 2px; }
.host-application-option-copy strong { color: var(--accent-ink); font-size: 13px; }
.host-application-option-copy span { color: var(--muted); font-size: 11px; }
.host-application-page { min-width: 0; max-width: 760px; }
.host-application-card { min-width: 0; display: grid; gap: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); }
.host-application-page-header { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.host-application-card .host-card-state.is-running { color: var(--status-good); }
.host-application-page-identity { min-width: 0; display: flex; align-items: center; gap: 12px; }
.host-application-page-icon { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); }
.host-application-page-icon svg { width: 24px; height: 24px; }
.host-application-page-copy { min-width: 0; }
.host-application-page-copy h2 { margin: 0 0 4px; color: var(--accent-ink); font-size: 18px; }
.host-application-page-copy p { overflow: hidden; margin: 0; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.host-application-page-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--muted); font-size: 12px; }
.host-application-controls { display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.host-application-note { margin: 0; color: var(--muted); font-size: 12px; }
.host-application-state-error { color: var(--danger); font-weight: 650; }
.host-application-startup { justify-content: space-between; width: 100%; min-height: 36px; color: var(--text); font-size: 13px; font-weight: 600; }
.host-application-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.host-application-action { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; }
.host-application-action svg { width: 17px; height: 17px; flex: 0 0 17px; }
.host-application-action.danger-icon { color: var(--danger); font-size: 13px; }
.host-application-action-loading { justify-content: center; min-height: 28px; }
.host-nginx-forward-card { min-width: 0; display: grid; gap: 14px; margin-top: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); }
.host-nginx-forward-heading { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.host-nginx-forward-heading h2 { margin: 0; color: var(--accent-ink); font-size: 17px; }
.host-nginx-forward-add { min-height: 34px; padding: 6px 11px; font-size: 12px; }
.host-nginx-forward-list { min-width: 0; display: grid; gap: 8px; }
.host-nginx-forward-item { min-width: 0; display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-soft); }
.host-nginx-forward-item-heading { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.host-nginx-forward-item-heading strong { min-width: 0; overflow-wrap: anywhere; color: var(--text); font-size: 14px; }
.host-nginx-forward-state { flex: 0 0 auto; padding: 3px 7px; border-radius: 4px; background: var(--line); color: var(--muted); font-size: 10px; font-weight: 700; }
.host-nginx-forward-state.is-editable { background: var(--accent-soft); color: var(--accent-ink); }
.host-nginx-forward-facts { min-width: 0; display: flex; flex-wrap: wrap; gap: 5px 14px; color: var(--muted); font-size: 11px; }
.host-nginx-forward-facts span { min-width: 0; overflow-wrap: anywhere; }
.host-nginx-forward-actions { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.host-nginx-forward-actions .button { min-height: 34px; padding: 5px 10px; font-size: 12px; }
.host-nginx-forward-readonly-note { color: var(--muted); font-size: 11px; }
.host-nginx-forward-form { min-width: 0; display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.host-nginx-forward-fields { min-width: 0; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(120px, .7fr); gap: 10px; }
.host-nginx-forward-fields .field { min-width: 0; }
.host-nginx-forward-options { display: grid; gap: 8px; }
.host-nginx-forward-switch { justify-content: space-between; min-height: 34px; color: var(--text); font-size: 12px; }
.host-nginx-forward-certificate-hint { padding: 9px 10px; border-left: 3px solid var(--accent); background: var(--surface-soft); }
.host-nginx-forward-form > .host-nginx-forward-actions { justify-content: flex-start; }
.host-hapi-config-card { min-width: 0; display: grid; gap: 14px; margin-top: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); }
.host-hapi-config-card h2 { margin: 0; color: var(--accent-ink); font-size: 17px; }
.host-hapi-config-values { min-width: 0; display: grid; gap: 8px; }
.host-hapi-config-value { min-width: 0; display: grid; grid-template-columns: minmax(120px, .6fr) minmax(0, 1.4fr) auto; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-soft); }
.host-hapi-config-value strong { color: var(--text); font-size: 12px; }
.host-hapi-config-value code { min-width: 0; overflow-wrap: anywhere; color: var(--muted); font-size: 12px; }
.host-hapi-copy, .host-hapi-reveal { width: 36px; height: 36px; flex: 0 0 36px; }
.host-hapi-copy svg, .host-hapi-reveal svg { width: 17px; height: 17px; }
.host-hapi-config-form { min-width: 0; display: grid; gap: 12px; }
.host-hapi-config-fields { min-width: 0; display: grid; gap: 12px; max-width: 600px; }
.host-hapi-config-form .field input, .host-hapi-config-form .field textarea { min-width: 0; min-height: 42px; font-size: 16px; }
.host-codex-config-fields { max-width: 760px; }
.host-codex-config-fields .field input, .host-codex-config-fields .field select { min-width: 0; min-height: 42px; font-size: 16px; }
.host-codex-source-field { display: grid; gap: 5px; }
.host-codex-prompt-field textarea { min-height: 320px; font-size: 16px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; line-height: 1.55; }
.host-hapi-secret-control { min-width: 0; display: flex; align-items: center; gap: 8px; }
.host-hapi-secret-control input { flex: 1 1 auto; width: 0; }
.host-hapi-config-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 640px) {
  .host-nginx-forward-card { padding: 13px; }
  .host-nginx-forward-fields { grid-template-columns: minmax(0, 1fr); }
  .host-nginx-forward-item-heading { align-items: flex-start; }
  .host-nginx-forward-facts { display: grid; gap: 5px; }
  .host-hapi-config-card { padding: 13px; }
  .host-hapi-config-value { grid-template-columns: minmax(0, 1fr) auto; }
  .host-hapi-config-value strong { grid-column: 1 / -1; }
}
.host-card-facts { min-width: 0; display: flex; flex-wrap: wrap; gap: 5px 13px; color: var(--muted); font-size: 11px; }
.host-card-facts span { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.host-trends { min-width: 0; display: grid; gap: 10px; }
.host-trends-heading { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.host-trend { min-width: 0; display: grid; gap: 5px; }
.host-trend-ranges { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; }
.host-trend-range { min-width: 38px; padding: 3px 6px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--muted); font: inherit; font-size: 10px; cursor: pointer; }
.host-trend-range[data-active="true"] { border-color: var(--accent-soft); background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; }
.host-trend-range:hover { background: var(--surface-soft); color: var(--text); }
.host-trend-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.host-trend-legend { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; color: var(--muted); font-size: 11px; }
.host-trend-legend span { display: inline-flex; align-items: baseline; gap: 4px; }
.host-trend-legend strong { color: var(--text); font-size: 12px; font-variant-numeric: tabular-nums; }
.host-trend-key { width: 9px; height: 2px; align-self: center; background: var(--accent); }
.host-trend-key.is-secondary { background: var(--focus); }
.host-trend-chart { display: block; width: 100%; height: 48px; background: var(--surface-soft); }
.host-trend-axis { min-width: 0; display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 9px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.host-trend-axis span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.host-trend-axis span:nth-child(2) { text-align: center; }
.host-trend-axis span:last-child { text-align: right; }
.host-trend-line { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.host-trend-line.is-secondary { stroke: var(--focus); }
.host-trend-point { fill: var(--accent); }
.host-trend-point.is-secondary { fill: var(--focus); }
.host-disk-usage { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; align-items: center; font-size: 11px; }
.host-disk-usage > span { color: var(--muted); }
.host-disk-usage > strong { min-width: 0; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.host-disk-usage progress { width: 100%; height: 7px; grid-column: 1 / -1; border: 0; border-radius: 4px; appearance: none; background: var(--surface-soft); color: var(--accent); }
.host-disk-usage progress::-webkit-progress-bar { border-radius: 4px; background: var(--surface-soft); }
.host-disk-usage progress::-webkit-progress-value { border-radius: 4px; background: var(--accent); }
.host-disk-usage progress::-moz-progress-bar { border-radius: 4px; background: var(--accent); }
.host-disk-usage[data-level="warning"] progress::-webkit-progress-value { background: var(--status-slow); }
.host-disk-usage[data-level="critical"] progress::-webkit-progress-value { background: var(--danger); }
.host-card-footer { min-width: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; color: var(--muted); font-size: 11px; }
.host-card-error { color: var(--danger); }
.host-card-actions { display: flex; min-height: 45px; align-items: center; justify-content: flex-end; gap: var(--action-gap); margin: auto -16px 0; padding: 6px 12px; border-top: 1px solid var(--line); }
.host-card-actions .icon-button { width: 30px; height: 30px; flex: 0 0 30px; }
.host-card-actions svg { width: 16px; height: 16px; display: block; }
.host-form { max-width: 720px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.host-form h3 { grid-column: 1 / -1; margin: 0; color: var(--accent-ink); font-size: 16px; }
.host-form .form-actions { grid-column: 1 / -1; }
.host-auth-key-field[hidden], .host-auth-password-field[hidden] { display: none; }
.ssl-certificate-status-card { display: grid; gap: 12px; margin-top: 16px; padding: 14px; border: 1px solid var(--line); background: var(--surface); }
.ssl-certificate-status-card[data-status="running"] { border-color: var(--accent); background: var(--accent-soft); }
.ssl-certificate-status-card[data-status="ready"] { border-color: var(--status-good); }
.ssl-certificate-status-card[data-status="failed"] { border-color: var(--danger); background: var(--danger-soft); }
.ssl-certificate-status-card h3, .ssl-certificate-status-card > strong { margin: 0; }
.ssl-certificate-status-card > strong { color: var(--accent-ink); font-size: 15px; }
.ssl-certificate-status-card[data-status="failed"] > strong { color: var(--danger); }
.ssl-certificate-status-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin: 0; }
.ssl-certificate-status-card dl > div { min-width: 0; display: grid; gap: 3px; }
.ssl-certificate-status-card dt { color: var(--muted); font-size: 12px; }
.ssl-certificate-status-card dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: var(--text); font-size: 13px; font-variant-numeric: tabular-nums; }
.ssl-certificate-status-card .field-help { margin: 0; overflow-wrap: anywhere; }
.service-catalog { scroll-margin-top: 24px; padding-bottom: 32px; }
.share-service-title { margin-bottom: 0; }
.service-preview { display: flex; align-items: center; gap: 14px; max-width: 620px; margin: 2px 0 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.service-preview .service-card-icon { flex: 0 0 44px; }
.service-preview .service-card-copy { gap: 5px; }
.service-config-form { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
.service-config-form .form-actions { grid-column: 1 / -1; }
.service-icon-row { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.service-icon-row-public { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.service-enabled-field { align-content: start; }
.service-switch { position: relative; width: max-content; min-height: 42px; display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.service-switch input { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; }
.service-switch-track { position: relative; width: 42px; height: 24px; flex: 0 0 42px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); transition: background-color 140ms ease, border-color 140ms ease; }
.service-switch-track::before { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); content: ""; transition: background-color 140ms ease, transform 140ms ease; }
.service-switch input:checked + .service-switch-track { border-color: var(--accent); background: var(--accent); }
.service-switch input:checked + .service-switch-track::before { background: #fff; transform: translateX(18px); }
.service-switch input:focus-visible + .service-switch-track { outline: 3px solid var(--accent); outline-offset: 2px; }
.service-switch-state { color: var(--text); font-size: 13px; font-weight: 600; white-space: nowrap; }
.service-detail-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.service-detail-heading h1 { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.service-heading-actions { display: flex; align-items: center; gap: 8px; }
.service-config-link { flex: 0 0 38px; }
.service-config-link svg { width: 18px; height: 18px; }
.service-public-link { flex: 0 0 38px; }
.service-public-link svg { width: 18px; height: 18px; }
.service-advanced-section h3 { margin: 2px 0 14px; font-size: 15px; }
.filter-form { max-width: 720px; margin-bottom: 20px; }

@media (max-width: 920px) {
  .admin-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .host-grid { grid-template-columns: minmax(0, 1fr); }
}

.admin-shell { max-width: 1240px; padding-block: 28px 56px; }
.admin-shell > .auth-panel { margin: 42px auto; }
.admin-layout { display: grid; grid-template-columns: 214px minmax(0, 1fr); gap: 28px; align-items: start; }
.admin-sidebar { min-width: 0; border-right: 1px solid var(--line); padding-right: 18px; }
.admin-nav { display: grid; gap: 4px; }
.admin-nav-group { position: relative; min-width: 0; }
.admin-nav-submenu { display: grid; gap: 2px; margin: 4px 0 4px 15px; padding-left: 9px; border-left: 1px solid var(--line); }
.admin-nav-item { width: 100%; min-height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer; text-align: left; font-size: 14px; font-weight: 560; }
.admin-nav-no-icon { padding-left: 40px; }
.admin-nav-item:hover { background: var(--surface-soft); color: var(--text); }
.admin-nav-item[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 680; }
.admin-nav-icon { width: 20px; height: 20px; display: grid; flex: 0 0 20px; place-items: center; color: var(--accent); line-height: 0; }
.admin-nav-icon svg { width: 18px; height: 18px; display: block; }
.admin-task-badge { display: grid; min-width: 19px; height: 19px; margin-left: auto; padding-inline: 4px; place-items: center; border-radius: 10px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
.admin-task-badge[hidden] { display: none; }
.admin-task-list { display: grid; gap: 12px; }
.admin-task-card { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.admin-task-group { min-width: 0; }
.admin-task-group-summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); cursor: pointer; font-size: 14px; font-weight: 650; list-style: none; }
.admin-task-group-summary::-webkit-details-marker { display: none; }
.admin-task-group-summary::before { width: 7px; height: 7px; flex: 0 0 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; content: ''; transform: rotate(-45deg); transition: transform .14s ease; }
.admin-task-group[open] > .admin-task-group-summary::before { transform: rotate(45deg); }
.admin-task-group-cards { display: grid; gap: 12px; margin-top: 12px; }
.admin-task-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-task-heading strong { min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.admin-task-state { flex: 0 0 auto; color: var(--muted); font-size: 12px; }
.admin-task-state.is-running, .admin-task-state.is-queued { color: var(--accent); }
.admin-task-state.is-completed { color: var(--status-good); }
.admin-task-state.is-failed, .admin-task-state.is-interrupted { color: var(--danger); }
.admin-task-detail, .admin-task-empty { color: var(--muted); font-size: 13px; }
.admin-task-open { justify-self: start; }
.task-progress { min-width: 0; display: grid; gap: 6px; }
.task-progress[hidden] { display: none; }
.task-progress-details { min-width: 0; overflow-wrap: anywhere; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; line-height: 1.35; }
.task-progress-bar { display: block; width: 100%; min-width: 0; height: 7px; overflow: hidden; border: 0; border-radius: 999px; appearance: none; background: var(--surface-soft); color: var(--accent); }
.task-progress-bar::-webkit-progress-bar { border-radius: 999px; background: var(--surface-soft); }
.task-progress-bar::-webkit-progress-value { border-radius: 999px; background: var(--accent); }
.task-progress-bar::-moz-progress-bar { border-radius: 999px; background: var(--accent); }
.host-application-action-loading.is-task-progress { min-height: 0; display: grid; gap: 8px; justify-items: stretch; }
.host-application-action-loading.is-task-progress .task-progress { width: 100%; }
.admin-proxy-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.admin-proxy-service-card .admin-proxy-row { grid-column: 1 / -1; }
.admin-proxy-service-card .proxy-visibility-form { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; }
.proxy-visibility-form .field { margin: 0; }
.admin-proxy-row code { min-width: 0; overflow-wrap: anywhere; color: var(--muted); font-size: 12px; }
.admin-proxy-copy svg { display: block; width: 17px; height: 17px; }
@media (max-width: 560px) { .admin-proxy-row { grid-template-columns: 58px minmax(0, 1fr) auto; } }
.admin-nav-group-toggle .admin-nav-chevron { width: 16px; height: 16px; display: grid; flex: 0 0 16px; place-items: center; margin-left: auto; color: var(--muted); line-height: 0; transition: transform .14s ease; }
.admin-nav-chevron svg { width: 16px; height: 16px; display: block; }
.admin-nav-group-toggle[aria-expanded="true"] .admin-nav-chevron { transform: rotate(180deg); }
.admin-nav-group.is-current > .admin-nav-group-toggle { color: var(--accent-ink); }
.admin-content { position: relative; min-width: 0; }
.admin-content.is-loading { min-height: 280px; }
.admin-content.is-loading > .admin-view { visibility: hidden; }
.admin-content-loading { position: absolute; z-index: 2; inset: 0; min-height: 280px; background: var(--page); }
.admin-view { min-width: 0; }
.admin-view .page-heading { margin-bottom: 24px; }
.admin-view .page-heading h1 { font-size: 25px; }
.overview-card-grid { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: stretch; }
.file-share-monitor { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.file-share-monitor > h2 { margin: 0; font-size: 15px; font-weight: 650; }
.file-share-monitor { --chart-visits: var(--accent); --chart-downloads: var(--focus); display: grid; align-content: start; gap: 12px; margin: 0; }
.file-share-metrics { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.file-share-trends { min-width: 0; }
.file-share-metric { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 8px; }
.file-share-metric + .file-share-metric { padding-left: 12px; border-left: 1px solid var(--line); }
.file-share-metric h3 { grid-column: 1; grid-row: 1; margin: 0 0 3px; color: var(--muted); font-size: 11px; font-weight: 600; }
.file-share-metric > strong { grid-column: 1; grid-row: 2; display: block; overflow-wrap: anywhere; font-size: 21px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.file-share-metric p { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin: 0; color: var(--muted); font-size: 11px; white-space: nowrap; }
.file-share-metric p strong { color: var(--text); font-size: 21px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.file-share-trend { min-width: 0; margin: 0; }
.share-chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 2px; }
.share-chart-legend > span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; }
.share-chart-key { width: 14px; height: 2px; display: inline-block; border-radius: 2px; background: var(--chart-visits); }
.share-chart-key.is-downloads { background: var(--chart-downloads); }
.share-trend-chart { display: block; width: 100%; height: 95px; overflow: visible; }
.share-chart-grid { stroke: var(--line); stroke-width: 1; }
.share-chart-axis-label { fill: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.share-chart-line { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.share-chart-line.is-visits { stroke: var(--chart-visits); }
.share-chart-line.is-downloads { stroke: var(--chart-downloads); }
.home-preview { display: flex; align-items: center; gap: 13px; margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.home-preview .brand-mark { width: 48px; height: 48px; border-radius: 9px; font-size: 20px; overflow: hidden; }
.home-preview strong { overflow-wrap: anywhere; font-size: 18px; }
.admin-view .form-grid { max-width: 620px; }
.ai-settings-hint { max-width: 620px; margin: -6px 0 16px; }
#ai-user-prompt { min-height: 160px; cursor: pointer; }
.ai-prompt-dialog .preview-content { align-items: stretch; justify-content: stretch; padding: 8px 12px; }
.ai-prompt-editor { display: grid; width: 100%; height: 100%; min-width: 0; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; }
.ai-prompt-editor-field { height: 100%; min-height: 0; grid-template-rows: auto minmax(0, 1fr); }
.ai-prompt-editor-field textarea { min-height: 0; height: 100%; padding: 4px 0; resize: none; border: 0; border-radius: 0; outline: 0; background: transparent; box-shadow: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; line-height: 1.55; }
.ai-prompt-editor .form-actions { flex: 0 0 auto; justify-content: flex-end; margin: 0; padding-top: 0; }
.admin-section { padding-block: 22px; border-top: 1px solid var(--line); }
.admin-section:first-of-type { padding-top: 0; border-top: 0; }
.admin-section h2 { margin-bottom: 14px; font-size: 16px; }
.admin-section .subtitle { margin-bottom: 12px; }
.management-table th:nth-child(2), .management-table td:nth-child(2) { width: 26%; }
.management-table td { vertical-align: middle; }
.management-table .unassigned-cell { color: var(--muted); }
.management-table .virtual-folder-cell { color: var(--accent-ink); font-weight: 600; }
.share-management-table { min-width: 820px; }
.share-management-table th:nth-child(4), .share-management-table td:nth-child(4) { width: 210px; }
.share-management-table th:last-child, .share-management-table td:last-child { width: 130px; }
.thumbnail-progress-cell { min-width: 190px; }
.thumbnail-progress-bar { display: block; width: 100%; height: 7px; overflow: hidden; border: 0; border-radius: 999px; appearance: none; background: var(--surface-soft); }
.thumbnail-progress-bar::-webkit-progress-bar { border-radius: 999px; background: var(--surface-soft); }
.thumbnail-progress-bar::-webkit-progress-value { border-radius: 999px; background: var(--accent); }
.thumbnail-progress-bar::-moz-progress-bar { border-radius: 999px; background: var(--accent); }
.thumbnail-progress-details { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; line-height: 1.35; }
.media-failure-details { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.media-failure-details > summary { color: var(--accent-ink); cursor: pointer; }
.media-failure-details ul { margin: 4px 0 0; padding-left: 15px; }
.media-failure-details li { overflow-wrap: anywhere; }
.path-cell { overflow-wrap: anywhere; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px !important; }
.virtual-folder-help { margin: -4px 0 14px; }
.virtual-folder-form { margin-bottom: 14px; }
.virtual-folder-table-wrap { margin-bottom: 12px; }
.virtual-folder-table th:nth-child(2), .virtual-folder-table td:nth-child(2) { width: 120px; text-align: center; }
.management-table th:last-child, .management-table td:last-child { width: 80px; }
.empty-hint { padding: 20px 0; color: var(--muted); font-size: 14px; }

.share-main { max-width: 1120px; }
.media-controls-row { display: flex; min-height: 34px; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 0 10px; }
.media-grid-toolbar { display: flex; justify-content: flex-end; gap: 8px; margin: 0; color: var(--muted); font-size: 13px; }
.media-grid-toolbar.sort-toolbar { gap: 8px; }
.media-grid-toolbar .table-sort-button[aria-pressed="true"] { color: var(--accent-ink); }
.media-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.media-grid.music-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.music-playlist-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.music-playlist-button { min-height: 34px; }
.media-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); }
.media-card.is-card-clickable { cursor: pointer; }
.media-card.is-card-clickable:hover { border-color: var(--accent); }
.media-card.music-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; }
.media-card.is-hidden-item .media-card-name { color: var(--muted); }
.media-card-main { display: flex; width: 100%; min-width: 0; flex: 1; flex-direction: column; padding: 0; border: 0; background: transparent; color: var(--text); cursor: pointer; text-align: left; text-decoration: none; }
.media-card-main:hover .media-card-name { color: var(--accent-ink); }
.media-card-main:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.media-card-media { position: relative; display: grid; width: 100%; aspect-ratio: 4 / 3; place-items: center; overflow: hidden; background: var(--surface-soft); color: var(--accent); }
.media-card-thumbnail { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-card-placeholder { display: grid; width: 100%; height: 100%; place-items: center; }
.media-card-media[data-thumbnail-state="ready"] .media-card-placeholder { display: none; }
.media-card-placeholder .kind-icon { width: 38px; height: 29px; flex-basis: 38px; color: var(--accent); }
.media-card-placeholder .kind-icon.directory::before { top: -8px; width: 15px; height: 7px; }
.media-card-placeholder .kind-icon.file { width: 27px; height: 34px; flex-basis: 27px; }
.media-card-placeholder .kind-icon.file::after { width: 10px; height: 10px; }
.media-card-size-overlay { position: absolute; top: 6px; left: 6px; max-width: calc(100% - 12px); padding: 2px 4px; border-radius: 3px; background: rgb(0 0 0 / 76%); color: #fff; font-size: 10px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.media-card-duration { position: absolute; top: 6px; right: 6px; padding: 3px 5px; border-radius: 3px; background: rgb(0 0 0 / 76%); color: #fff; font-size: 11px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.media-card .entry-lock-icon { position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); color: #fff; filter: drop-shadow(0 1px 3px rgb(0 0 0 / 85%)); }
.media-card-details { display: grid; min-width: 0; gap: 3px; padding: 9px 9px 10px; }
.media-card-name { min-width: 0; color: var(--text); font-size: 13px; font-weight: 620; line-height: 1.35; overflow-wrap: anywhere; }
.media-card:not(.music-card) .media-card-name { display: -webkit-box; max-height: 2.7em; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.media-card-actions { display: flex; min-height: 40px; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--action-gap); padding: 5px 8px; border-top: 1px solid var(--line); }
.media-card-actions .icon-button { width: 30px; height: 30px; flex-basis: 30px; }
.media-card-actions .download-button { width: 30px; min-height: 30px; flex: 0 0 30px; }
.media-card-actions .download-button svg { width: 16px; height: 16px; }
.music-playlist-button { padding-inline: 8px; }
.music-card-main { display: grid; min-height: 104px; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px; }
.music-card-cover { position: relative; display: grid; width: 84px; aspect-ratio: 1; place-items: center; overflow: hidden; border-radius: 4px; background: var(--surface-soft); color: var(--accent); }
.music-card-cover > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.music-card-cover .kind-icon { transform: scale(.8); }
.music-card-cover .entry-lock-icon { position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%); color: #fff; filter: drop-shadow(0 1px 3px rgb(0 0 0 / 90%)); }
.music-card-details { display: grid; min-width: 0; align-content: center; gap: 7px; }
.music-card-name { display: -webkit-box; max-height: 3.8em; overflow: hidden; color: var(--text); font-size: 14px; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.music-card-album-artist { overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.music-card.is-playing { border-color: var(--accent); background: var(--accent-soft); }
.music-card.is-playing .music-card-name { color: var(--accent-ink); }
.music-card-actions { min-height: 0; flex-direction: column; justify-content: center; gap: var(--action-gap); padding: 6px; border-top: 0; border-left: 1px solid var(--line); }
.music-card-actions .icon-button, .music-card-actions .download-button { width: 30px; height: 30px; min-height: 30px; flex-basis: 30px; }
.virtual-folder-category-cell { color: var(--accent-ink); font-weight: 600; }
@media (max-width: 920px) {
  .media-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .media-grid.music-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.share-table th:nth-child(2), .share-table td:nth-child(2) { width: 100px; }
.share-table th:nth-child(3), .share-table td:nth-child(3) { width: 100px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.share-table th:nth-child(4), .share-table td:nth-child(4) { width: 150px; white-space: nowrap; }
.share-table th:last-child, .share-table td:last-child { width: 190px; }
.share-table tbody tr.is-row-clickable { cursor: pointer; }
.share-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--action-gap); white-space: nowrap; }
.download-button { width: 34px; padding: 0; }
.download-button svg { width: 17px; height: 17px; display: block; }
.entry-location { display: block; padding: 2px 0 0 27px; color: var(--muted); font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.entry-name-link { text-decoration: none; }
.entry-name-text { min-width: 0; overflow-wrap: anywhere; }
.entry-icon-wrap { position: relative; display: grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center; }
.entry-lock-icon { width: 18px; height: 18px; display: block; flex: 0 0 18px; color: var(--accent); }
.action-icon { display: block; width: 16px; height: 16px; }
.mobile-cell-label { display: none; }
.icon-button { width: 34px; height: 34px; flex: 0 0 34px; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--text); cursor: pointer; font-size: 16px; line-height: 1; }
.icon-button:hover { border-color: var(--accent); color: var(--accent); }
.danger-icon { color: var(--danger); font-size: 21px; }
.is-hidden-item .entry-name { color: var(--muted); }
.preview-dialog { width: min(1120px, calc(100vw - 24px)); height: min(850px, calc(100dvh - 24px)); max-width: none; max-height: none; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.preview-dialog.is-video-fit { width: var(--preview-dialog-width); height: var(--preview-dialog-height); }
.preview-dialog::backdrop { background: rgba(12, 20, 17, 0.62); }
.preview-dialog[open] { display: flex; }
.preview-window { display: flex; width: 100%; min-width: 0; min-height: 0; flex-direction: column; }
.preview-toolbar { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface); }
.preview-toolbar h2 { min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: 15px; line-height: 1.35; }
.preview-toolbar-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.preview-toolbar .icon-button { font-size: 0; }
.preview-toolbar svg { width: 17px; height: 17px; display: block; }
.preview-maximize-icon { display: block; }
.preview-restore-icon { display: none; }
.preview-toolbar #preview-maximize[data-maximized="true"] .preview-maximize-icon { display: none; }
.preview-toolbar #preview-maximize[data-maximized="true"] .preview-restore-icon { display: block; }
.preview-content { position: relative; display: flex; min-width: 0; min-height: 0; flex: 1; align-items: center; justify-content: center; overflow: auto; background: var(--page); }
.preview-content[data-preview-kind="image"] { overflow: hidden; touch-action: none; }
.preview-dialog.is-video-fit .preview-content { flex: 0 0 var(--preview-video-height); width: var(--preview-video-width); height: var(--preview-video-height); overflow: hidden; }
.preview-content[aria-busy="true"] { align-items: center; justify-content: center; }
.preview-loading { min-height: 140px; }
.preview-error { display: grid; justify-items: center; gap: 12px; width: min(560px, 100%); padding: 18px; }
.preview-error .preview-message { padding: 0; }
.preview-message { max-width: 520px; margin: 0; padding: 18px; color: var(--muted); text-align: center; line-height: 1.55; }
.image-preview { display: block; max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; touch-action: none; transform-origin: center center; will-change: transform; }
.preview-content.is-image-zoomed .image-preview { cursor: grab; }
.preview-content.is-image-dragging .image-preview { cursor: grabbing; }
.video-preview { display: block; width: min(100%, 1000px); max-height: 100%; background: #000; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; }
.video-seek-overlay { position: absolute; z-index: 2; bottom: max(60px, 12%); left: 50%; display: grid; width: min(380px, calc(100% - 32px)); gap: 8px; padding: 9px 12px 10px; transform: translateX(-50%); border-radius: 4px; background: rgba(0, 0, 0, .76); color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; line-height: 1; pointer-events: none; }
.video-seek-overlay[hidden] { display: none; }
.video-seek-time { text-align: center; }
.video-seek-track { display: block; height: 3px; overflow: hidden; background: rgba(255, 255, 255, .38); }
.video-seek-progress { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left center; background: var(--accent); }
.preview-dialog.is-video-fit .video-preview { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
.audio-preview { width: min(640px, calc(100% - 32px)); }
.text-preview, .markdown-preview, .archive-preview { width: 100%; height: 100%; margin: 0; padding: 22px clamp(16px, 4vw, 44px); overflow: auto; }
.text-preview { color: var(--text); font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }
.markdown-preview { color: var(--text); font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
.markdown-preview h1, .markdown-preview h2, .markdown-preview h3, .markdown-preview h4 { margin: 1.4em 0 .55em; line-height: 1.3; }
.markdown-preview h1 { font-size: 25px; }
.markdown-preview h2 { font-size: 20px; }
.markdown-preview h3 { font-size: 17px; }
.markdown-preview p, .markdown-preview ul, .markdown-preview ol, .markdown-preview blockquote { margin-block: .8em; }
.markdown-preview a { color: var(--accent); }
.markdown-preview blockquote { margin-inline: 0; padding-inline-start: 14px; border-inline-start: 3px solid var(--line); color: var(--muted); }
.markdown-preview pre { max-width: 100%; padding: 12px; overflow: auto; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.markdown-preview code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.markdown-preview :not(pre) > code { padding: 2px 4px; border-radius: 3px; background: var(--surface-soft); }
.markdown-preview table { display: block; max-width: 100%; overflow: auto; border-collapse: collapse; }
.markdown-preview th, .markdown-preview td { padding: 6px 9px; border: 1px solid var(--line); text-align: left; }
.markdown-preview img { max-width: 100%; height: auto; }
.archive-preview { color: var(--text); }
.archive-summary, .archive-truncated { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.archive-entry-list { margin: 0; padding: 0; list-style: none; }
.archive-entry-list li { display: flex; min-width: 0; align-items: flex-start; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--line); }
.archive-entry-icon { position: relative; flex: 0 0 16px; width: 16px; height: 13px; margin-top: 3px; border: 1.5px solid var(--muted); border-radius: 2px; }
.archive-entry-list li[data-kind="directory"] .archive-entry-icon { color: var(--accent); border-color: currentColor; }
.archive-entry-list li[data-kind="directory"] .archive-entry-icon::before { position: absolute; top: -5px; left: 1px; width: 7px; height: 4px; border: 1.5px solid currentColor; border-bottom: 0; border-radius: 2px 2px 0 0; content: ""; }
.archive-entry-name { min-width: 0; overflow-wrap: anywhere; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.archive-truncated { margin-top: 14px; }
.document-preview-viewer { --dv-accent: var(--accent); --dv-background: var(--page); --dv-surface: var(--surface); --dv-surface-muted: var(--surface-soft); --dv-text: var(--text); --dv-text-muted: var(--muted); --dv-border: var(--line); display: block; width: 100%; height: 100%; min-height: 420px; color-scheme: light dark; }
.app-dialog { width: min(460px, calc(100vw - 28px)); max-width: 100%; padding: 22px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.app-dialog::backdrop { background: rgba(12, 20, 17, 0.52); }
.app-dialog h2 { margin-bottom: 8px; font-size: 19px; }
.app-dialog .subtitle { margin-bottom: 0; }
.app-dialog .form-grid { max-width: none; }
.app-dialog .form-actions { justify-content: flex-end; }

@media (max-width: 760px) {
  .admin-shell { padding-top: 24px; }
  .admin-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .admin-sidebar { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 10px; }
  .admin-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; overflow: visible; }
  .admin-nav-item { width: auto; flex: 0 0 auto; padding-inline: 9px; }
  .admin-nav-group { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; }
  .admin-nav-submenu { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; display: grid; min-width: 190px; gap: 2px; margin: 0; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); animation: user-menu-enter .16s ease-out; }
  .admin-nav-submenu .admin-nav-item { width: 100%; min-height: 40px; padding-inline: 9px; border-radius: 7px; }
  .admin-nav-submenu .admin-nav-icon { width: 18px; height: 18px; flex-basis: 18px; }
  .admin-nav-submenu .admin-nav-icon svg { width: 17px; height: 17px; }
  .admin-content { padding-top: 4px; }
}

@media (max-width: 560px) {
  .portal-main { padding-top: 24px; }
  .portal-main .home-service-grid { grid-template-columns: minmax(0, 1fr); }
  .service-card { min-height: 82px; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 11px; padding: 13px; }
  .service-card--plain { grid-template-columns: 40px minmax(0, 1fr); }
  .admin-service-grid .service-card, .scriptable-admin-grid .service-card { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 11px; }
  .service-card-icon { width: 40px; height: 40px; }
  .service-preview { align-items: flex-start; }
  .service-config-form { grid-template-columns: minmax(0, 1fr); }
  .service-config-form .form-actions { grid-column: auto; }
  .service-icon-row { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
  .scriptable-admin-grid { grid-template-columns: minmax(0, 1fr); }
  .scriptable-share-grid { grid-template-columns: minmax(0, 1fr); }
  .scriptable-editor-fields { grid-template-columns: minmax(0, 1fr); }
  .inline-form-row { align-items: stretch; flex-direction: column; }
  .scriptable-editor-section .section-heading { align-items: flex-start; flex-direction: column; }
  .admin-service-grid { grid-template-columns: minmax(0, 1fr); }
  .host-grid { grid-template-columns: minmax(0, 1fr); }
  .host-card { padding-inline: 12px; }
  .host-card-actions { margin-inline: -12px; }
  .admin-shell { padding-top: 18px; }
  .admin-nav-item { min-height: 38px; gap: 6px; padding-inline: 7px; font-size: 12px; }
  .admin-nav-icon { width: 16px; flex-basis: 16px; }
  .admin-view .page-heading h1 { font-size: 22px; }
  .file-share-monitor { padding: 10px; }
  .file-share-metrics { gap: 10px; }
  .file-share-metric + .file-share-metric { padding-left: 8px; }
  .file-share-metric > strong, .file-share-metric p strong { font-size: 19px; }
  .management-table { min-width: 540px; }
  .share-table { min-width: 560px; }
  .ssl-certificate-status-card dl { grid-template-columns: minmax(0, 1fr); }
  .share-table th:nth-child(2), .share-table td:nth-child(2) { display: none; }
  .icon-button { width: 32px; height: 32px; flex-basis: 32px; }
  .app-dialog { padding: 18px; }
}

@media (max-width: 640px) {
  :root { --action-gap: 5px; }
  .media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .media-grid.music-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .media-card-details { gap: 3px; padding: 7px 6px 8px; }
  .media-card-name { font-size: 12px; }
  .media-card-actions { min-height: 36px; padding: 4px 5px; }
  .media-card-actions .icon-button, .media-card-actions .download-button { width: 24px; height: 24px; min-height: 24px; flex-basis: 24px; }
  .media-controls-row { gap: 6px; }
  .media-grid-toolbar { gap: 8px; font-size: 12px; }
  .media-grid-toolbar.sort-toolbar { gap: 8px; }
  .table-wrap { overflow-x: visible; }
  .virtual-folder-table-wrap { overflow-x: auto; }
  .virtual-folder-table { min-width: 480px; table-layout: fixed; }
  .virtual-folder-table th:first-child, .virtual-folder-table td:first-child { width: 34%; }
  .virtual-folder-table th:nth-child(2), .virtual-folder-table td:nth-child(2) { width: 100px; }
  .virtual-folder-table th:nth-child(3), .virtual-folder-table td:nth-child(3) { width: 100px; text-align: center; }
  .virtual-folder-table th:last-child, .virtual-folder-table td:last-child { width: 100px; }
  .virtual-folder-table td:first-child { overflow-wrap: anywhere; }
  .share-table { display: block; width: 100%; min-width: 0; border-collapse: separate; border-spacing: 0; }
  .share-table thead, .share-table tbody { display: block; width: 100%; }
  .share-table thead tr { display: grid; min-height: 44px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; border-bottom: 1px solid var(--line); }
  .share-table th { display: none; width: auto; height: 44px; padding: 0 2px; border-bottom: 0; text-transform: none; }
  .share-table thead { display: none; }
  .share-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "name name" "size updated" "actions actions"; gap: 7px 10px; margin: 0 0 8px; padding: 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); }
  .share-table tbody tr:last-child { margin-bottom: 0; }
  .share-table td { display: block; width: auto; min-width: 0; height: auto; min-height: 0; padding: 0; border: 0; font-size: 13px; text-align: left; }
  .share-table td:first-child { grid-area: name; padding-left: 0; font-size: 14px; }
  .share-table td:nth-child(2) { display: none; }
  .share-table td:nth-child(3) { grid-area: size; width: auto; text-align: left; }
  .share-table td:nth-child(4) { grid-area: updated; width: auto; white-space: normal; text-align: right; }
  .share-table td:last-child { grid-area: actions; width: auto; text-align: right; }
  .share-table td:last-child:empty { display: none; }
  .share-table td:last-child:not(:empty) { margin-top: 0; padding-top: 6px; border-top: 1px solid var(--line); }
  .size-label, .updated-label { display: flex; width: 100%; min-width: 0; align-items: baseline; gap: 5px; color: var(--muted); font-size: 12px; line-height: 1.35; }
  .size-label { justify-content: flex-start; text-align: left; }
  .updated-label { justify-content: flex-end; text-align: right; }
  .mobile-cell-label { display: inline; flex: 0 0 auto; color: var(--muted); font-size: 11px; }
  .mobile-cell-value { min-width: 0; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .entry-name { width: 100%; min-height: 36px; align-items: center; gap: 8px; padding: 0; }
  .entry-icon-wrap { width: 20px; height: 20px; flex-basis: 20px; }
  .entry-lock-icon { width: 18px; height: 18px; display: block; flex-basis: 18px; visibility: visible; opacity: 1; }
  .entry-location { padding-left: 25px; }
  .share-table td.share-actions { display: flex; width: 100%; justify-content: flex-end; }
}

.preview-dialog.is-video-maximized[open] {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  transform: none;
  border: 0;
  border-radius: 0;
}
.preview-dialog.is-video-maximized .preview-content { flex: 1 1 auto; width: auto; height: auto; overflow: hidden; }
.preview-dialog.is-video-maximized .video-preview { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }

/* Keep iOS page scale stable when an editable control receives focus; retain user zoom gestures. */
@supports (-webkit-touch-callout: none) {
  input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="image"]),
  textarea,
  select {
    font-size: 16px;
  }
}