/* Standalone content colors sampled from CoLink’s built-in palettes. The Bridge supplies mode and preset ID, not custom color values. */
:root {
  color-scheme: light;
  --primary: #6750A4; --on-primary: #FFFFFF; --primary-soft: #EADDFF; --on-primary-soft: #21005D;
  --page: #F4F0F6; --paper: #FCF9FF; --surface: #EEE8F3; --line: #E7E0EC; --outline: #79747E;
  --ink: #1D1B1E; --muted: #49454F; --error: #B3261E; --error-bg: #F9DEDC; --error-text: #410E0B;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --primary: #D0BCFF; --on-primary: #381E72; --primary-soft: #4F378B; --on-primary-soft: #EADDFF;
  --page: #0F0D13; --paper: #1D1B20; --surface: #141218; --line: #2B2930; --outline: #938F99;
  --ink: #E6E1E5; --muted: #CAC4D0; --error: #F2B8B5; --error-bg: #410E0B; --error-text: #F9DEDC;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --primary: #D0BCFF; --on-primary: #381E72; --primary-soft: #4F378B; --on-primary-soft: #EADDFF;
    --page: #0F0D13; --paper: #1D1B20; --surface: #141218; --line: #2B2930; --outline: #938F99;
    --ink: #E6E1E5; --muted: #CAC4D0; --error: #F2B8B5; --error-bg: #410E0B; --error-text: #F9DEDC;
  }
}
:root[data-theme="light"][data-theme-id="haoyue-white"] {
  --primary: #6750A4; --on-primary: #FFFFFF; --primary-soft: #EADDFF; --on-primary-soft: #21005D;
  --page: #F0F1F3; --paper: #FCFCFE; --surface: #E9ECF2; --line: #DDDDDD; --outline: #8C8C8C;
  --ink: #1D1C1D; --muted: #616061; --error: #E01E5A; --error-bg: #FBE2EA; --error-text: #7B1031;
}
:root[data-theme="dark"][data-theme-id="haoyue-white"] {
  --primary: #D0BCFF; --on-primary: #381E72; --primary-soft: #4F378B; --on-primary-soft: #EADDFF;
  --page: #121416; --paper: #1F2326; --surface: #181B1E; --line: #2C3033; --outline: #8A8D91;
  --ink: #D8D9DA; --muted: #9A9C9F; --error: #F26D7F; --error-bg: #7B1031; --error-text: #FBE2EA;
}
:root[data-theme="light"][data-theme-id="ocean-blue"] {
  --primary: #0B57D0; --on-primary: #FFFFFF; --primary-soft: #D3E3FD; --on-primary-soft: #041E49;
  --page: #F0F3F9; --paper: #F8FAFF; --surface: #E7EEF9; --line: #E1E5EC; --outline: #74777F;
  --ink: #191C20; --muted: #44474E; --error: #B3261E; --error-bg: #F9DEDC; --error-text: #410E0B;
}
:root[data-theme="dark"][data-theme-id="ocean-blue"] {
  --primary: #A8C7FA; --on-primary: #0A305F; --primary-soft: #1B4586; --on-primary-soft: #D6E4FF;
  --page: #0E1218; --paper: #1C232E; --surface: #141A23; --line: #2A3340; --outline: #8A92A0;
  --ink: #E1E6EE; --muted: #AEB8C6; --error: #F2B8B5; --error-bg: #410E0B; --error-text: #F9DEDC;
}
:root[data-theme="light"][data-theme-id="pine-teal"] {
  --primary: #006A6A; --on-primary: #FFFFFF; --primary-soft: #9CF1F0; --on-primary-soft: #002020;
  --page: #EFF6F5; --paper: #F7FCFA; --surface: #E4F0ED; --line: #DFE9E8; --outline: #6F7979;
  --ink: #161D1D; --muted: #3F4948; --error: #B3261E; --error-bg: #F9DEDC; --error-text: #410E0B;
}
:root[data-theme="dark"][data-theme-id="pine-teal"] {
  --primary: #4CDADA; --on-primary: #003737; --primary-soft: #005050; --on-primary-soft: #9CF1F0;
  --page: #0C1313; --paper: #182120; --surface: #101919; --line: #273231; --outline: #879392;
  --ink: #DBE4E2; --muted: #A7B6B4; --error: #F2B8B5; --error-bg: #410E0B; --error-text: #F9DEDC;
}
:root[data-theme="light"][data-theme-id="wine-plum"] {
  --primary: #611F69; --on-primary: #FFFFFF; --primary-soft: #F2DAF5; --on-primary-soft: #3D1245;
  --page: #F2EFF2; --paper: #FCF8FC; --surface: #EDE4EF; --line: #E6E2E6; --outline: #7A767C;
  --ink: #1E1B1E; --muted: #605B62; --error: #D13B5F; --error-bg: #F9E6EA; --error-text: #732034;
}
:root[data-theme="dark"][data-theme-id="wine-plum"] {
  --primary: #E5B3F2; --on-primary: #4A1256; --primary-soft: #5C2166; --on-primary-soft: #F6D8FF;
  --page: #17091F; --paper: #2A1733; --surface: #201027; --line: #3A2344; --outline: #9A86A0;
  --ink: #F0E6F2; --muted: #C4B3C9; --error: #F07A92; --error-bg: #732034; --error-text: #F9E6EA;
}
:root[data-theme="light"][data-theme-id="amber-warm"] {
  --primary: #8C5000; --on-primary: #FFFFFF; --primary-soft: #FFDCC2; --on-primary-soft: #311300;
  --page: #F6EEE6; --paper: #FFFAF4; --surface: #F6E8DA; --line: #F0DFD4; --outline: #85736B;
  --ink: #221A11; --muted: #52443A; --error: #B3261E; --error-bg: #F9DEDC; --error-text: #410E0B;
}
:root[data-theme="dark"][data-theme-id="amber-warm"] {
  --primary: #FFB870; --on-primary: #4A2800; --primary-soft: #6E3F00; --on-primary-soft: #FFDCC2;
  --page: #14100B; --paper: #241E16; --surface: #1B1610; --line: #3A2F24; --outline: #9A8873;
  --ink: #EEE3D7; --muted: #C6B6A4; --error: #F2B8B5; --error-bg: #410E0B; --error-text: #F9DEDC;
}
:root[data-theme="light"][data-theme-id="dai-violet"] {
  --primary: #6750A4; --on-primary: #FFFFFF; --primary-soft: #EADDFF; --on-primary-soft: #21005D;
  --page: #F3F0F7; --paper: #FBF8FE; --surface: #EBE5F3; --line: #E6E1EC; --outline: #7A7484;
  --ink: #1D1B21; --muted: #605D68; --error: #D13B5F; --error-bg: #F9E6EA; --error-text: #732034;
}
:root[data-theme="dark"][data-theme-id="dai-violet"] {
  --primary: #D0BCFF; --on-primary: #381E72; --primary-soft: #4F378B; --on-primary-soft: #EADDFF;
  --page: #130D1F; --paper: #251C33; --surface: #1C1528; --line: #332847; --outline: #948B9F;
  --ink: #EAE4F0; --muted: #C4BCD0; --error: #F07A92; --error-bg: #732034; --error-text: #F9E6EA;
}

:root {
  font: 14px/1.5 "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  background: var(--paper);
  color: var(--ink);
  --control-radius: 12px;
  --dialog-radius: 24px;
  --pill: 999px;
  --hover: var(--surface);
  --field-border: var(--outline);
}
@supports (color: color-mix(in srgb, black 50%, white)) {
  :root {
    --hover: color-mix(in srgb, var(--primary) 8%, transparent);
    --field-border: color-mix(in srgb, var(--outline) 50%, var(--line));
  }
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 0; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button, input, select, textarea, a { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 16px; font-weight: 600; line-height: 1.4; }
h2 { font-size: 20px; font-weight: 500; line-height: 1.4; }
h3 { font-size: 14px; font-weight: 600; }
p { line-height: 1.6; overflow-wrap: anywhere; }
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--field-border);
  border-radius: var(--pill);
  background: transparent;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
button:not(:disabled):hover { background: var(--hover); }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
button.primary:not(:disabled):hover {
  background: color-mix(in srgb, var(--primary) 90%, var(--ink));
}
button.danger { background: var(--error-bg); border-color: var(--error-bg); color: var(--error-text); }
button.danger:not(:disabled):hover { background: color-mix(in srgb, var(--error-bg) 90%, var(--error-text)); }
button.link, button.icon-button { border-color: transparent; color: var(--primary); }
button.icon-button { width: 44px; padding: 0; color: var(--muted); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
input, select, textarea {
  min-width: 0;
  min-height: 44px;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--field-border);
  border-radius: var(--control-radius);
  background: var(--paper);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
textarea { min-height: 80px; resize: vertical; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.app-header { border-bottom: 1px solid var(--line); }
.header-inner, main { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: clamp(16px, 3vw, 32px); }
.header-inner { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 6px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand > .icon { color: var(--primary); }
.brand p { color: var(--muted); font-size: 12px; }
main { padding-block: 24px max(24px, env(safe-area-inset-bottom)); }
.space-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; margin-bottom: 16px; }
.channel-field { display: flex; align-items: center; gap: 8px; min-width: 0; }
.channel-field label { color: var(--muted); font-size: 12px; white-space: nowrap; }
.channel-field select { max-width: min(280px, 70vw); }
.toolbar, .toolbar-actions, .list-tools, #search-form { display: flex; align-items: center; gap: 8px; min-width: 0; }
.toolbar { justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.toolbar-actions { flex-wrap: wrap; }
.list-tools { flex: 1 1 280px; }
#search-form { flex: 1; max-width: 450px; }
.search-field { position: relative; flex: 1; min-width: 0; }
.search-field .icon { position: absolute; top: 12px; left: 11px; color: var(--muted); pointer-events: none; }
.search-field input { width: 100%; padding-left: 38px; }
.list-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; column-gap: 16px; margin: 8px 0 4px; }
#breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; min-width: 0; gap: 2px; }
#breadcrumbs button { max-width: min(220px, 72vw); overflow: hidden; text-overflow: ellipsis; display: block; color: var(--muted); background: transparent; border-color: transparent; }
#breadcrumbs button:hover { background: var(--hover); }
#breadcrumbs button[aria-current="page"] { color: var(--on-primary-soft); background: var(--primary-soft); }
#breadcrumbs span, #list-summary { color: var(--muted); }
#list-summary { font-size: 12px; padding-block: 4px; }

#file-list { border: 1px solid var(--line); border-radius: var(--control-radius); }
.file-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 14px; min-width: 0; }
.file-row + .file-row { border-top: 1px solid var(--line); }
.file-row:hover, .file-row:focus-within { background: var(--hover); }
.file-row:first-child { border-start-start-radius: var(--control-radius); border-start-end-radius: var(--control-radius); }
.file-row:last-child { border-end-start-radius: var(--control-radius); border-end-end-radius: var(--control-radius); }
.file-icon { display: grid; place-items: center; color: var(--muted); }
.file-icon.folder { color: var(--primary); }
.file-name { justify-content: flex-start; max-width: 100%; min-width: 44px; padding: 4px 2px; border-color: transparent; text-align: left; white-space: normal; overflow-wrap: anywhere; font-weight: 600; }
.file-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.version-label { background: var(--primary-soft); color: var(--on-primary-soft); border-radius: var(--pill); padding: 0 7px; }
.row-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.row-actions .icon-button[aria-expanded="true"] { color: var(--on-primary-soft); background: var(--primary-soft); }
.row-menu {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  width: 176px;
  padding: 4px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  background: var(--paper);
  box-shadow: 0 6px 20px #0003;
}
.row-menu button {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  padding-inline: 12px;
  border: 0;
  border-radius: 8px;
  white-space: normal;
  text-align: left;
}
.row-menu button:focus-visible { outline-offset: -2px; }
.row-menu button.menu-danger { border-top: 1px solid var(--line); }
.empty, .gate { display: grid; justify-items: center; gap: 8px; padding: 40px 16px; text-align: center; }
.empty .icon { width: 24px; height: 24px; color: var(--muted); }
.empty p, .gate p { color: var(--muted); }
.gate { max-width: 460px; margin: 24px auto; }
.gate button { margin-top: 6px; }
.space-note { margin-top: 12px; color: var(--muted); font-size: 12px; }
.load-more { text-align: center; }
.load-more button { margin-top: 12px; }

.notice, .error { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 12px; background: var(--error-bg); color: var(--error-text); border-radius: var(--control-radius); overflow-wrap: anywhere; }
.notice { margin-bottom: 12px; }
.error { margin-top: 12px; }
.notice button { color: inherit; border-color: currentColor; }
.transfer-heading, .dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.transfer-heading h2 { font-size: 16px; }
#transfers { margin-top: 20px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--control-radius); }
.job { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
.job strong { font-size: 13px; overflow-wrap: anywhere; }
.job p { color: var(--muted); font-size: 12px; }
progress { width: 100%; height: 6px; accent-color: var(--primary); }

dialog {
  width: 560px;
  max-width: calc(100% - 24px);
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--dialog-radius);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 12px 36px #0003;
  overflow: auto;
}
dialog::backdrop { background: #0006; }
.dialog-heading { margin-bottom: 16px; }
.dialog-heading h2 { font-size: 18px; min-width: 0; overflow-wrap: anywhere; }
.dialog-heading button { flex-shrink: 0; }
.dialog-form, .field { display: grid; min-width: 0; gap: 8px; }
.dialog-form { gap: 12px; }
.field > label { font-size: 13px; font-weight: 500; }
.dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.detail-line { color: var(--muted); font-size: 13px; margin-block: 8px; }
.history-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 12px; border-bottom: 1px solid var(--line); }
.history-item p { color: var(--muted); font-size: 12px; white-space: pre-wrap; }
.history-actions { display: flex; flex-wrap: wrap; gap: 4px; flex-shrink: 0; }
.folder-picker { display: grid; gap: 6px; max-height: 250px; overflow: auto; margin-top: 12px; }
.folder-picker button { justify-content: flex-start; text-align: left; overflow-wrap: anywhere; white-space: normal; }
.preview-dialog { width: 900px; }
.preview-toolbar { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; margin-block: 12px; }
.preview-stage { overflow: auto; max-height: 58vh; max-height: 58dvh; padding: 12px; background: var(--page); border-radius: var(--control-radius); text-align: center; }
.preview-stage img, .preview-stage canvas { max-width: 100%; height: auto; background: #fff; }
.preview-stage pre { max-width: 100%; margin: 0; overflow: auto; white-space: pre; text-align: left; font: 13px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--ink); }
#toast {
  position: fixed;
  z-index: 20;
  bottom: max(16px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 12px 16px;
  border-radius: var(--control-radius);
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 700px) {
  main { padding-top: 16px; }
  .header-inner, main { padding-inline: 12px; }
  .space-heading { align-items: flex-start; gap: 8px; }
  .channel-field { flex: 1 1 180px; }
  .channel-field select { flex: 1; max-width: 100%; }
  .toolbar-actions { margin-inline-start: auto; }
  .list-tools, #search-form { flex-wrap: wrap; }
  .search-field { flex: 1 1 94px; }
  .file-row { grid-template-columns: 20px minmax(0, 1fr); gap: 4px 8px; padding-inline: 10px; }
  .file-icon { align-self: start; padding-top: 12px; }
  .row-actions { grid-column: 2; }
  .file-meta { font-size: 12px; }
  .history-item { flex-wrap: wrap; }
  .history-actions { margin-inline-start: auto; }
  dialog { padding: 16px; }
  .gate { margin-block: 8px; }
}
@media (max-width: 380px) {
  .search-field .icon { display: none; }
  .search-field input { padding-left: 10px; }
}