:root {
  --ink: #18242a;
  --muted: #6f7d83;
  --line: #dce3e5;
  --line-strong: #c8d2d6;
  --paper: #edf1f2;
  --surface: #ffffff;
  --surface-soft: #f8faf9;
  --teal: #087e74;
  --teal-dark: #06645d;
  --teal-soft: #e3f2ef;
  --orange: #c8682e;
  --red: #b53d39;
  --focus: #0a8e84;
  --workspace-max: 1360px;
  --desktop-gutter: 22px;
  font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); }
body { min-width: 320px; margin: 0; background: var(--paper); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus) 28%, white);
  outline-offset: 2px;
}
.hidden { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.login-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) 430px; background: #eef3f1; }
.login-copy { align-self: center; justify-self: end; width: min(680px, 100%); padding: 64px 80px; }
.login-copy h1 { margin: 8px 0 14px; font-size: 42px; line-height: 1.1; font-weight: 730; letter-spacing: 0; }
.login-copy p:not(.eyebrow) { max-width: 450px; color: var(--muted); font-size: 18px; line-height: 1.7; }
.login-panel { align-self: center; margin: 36px 52px 36px 0; padding: 30px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 16px 38px rgba(35, 47, 44, .1); }
.login-tabs { display: flex; gap: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.tab { border: 0; border-bottom: 2px solid transparent; padding: 0 0 12px; background: transparent; color: var(--muted); }
.tab.active { border-bottom-color: var(--teal); color: var(--ink); font-weight: 650; }
.form-stack { display: grid; gap: 18px; }
label { display: grid; gap: 8px; color: var(--muted); font-size: 14px; }
input, textarea, select { width: 100%; min-height: 40px; border: 1px solid #c8d1d5; border-radius: 5px; padding: 8px 10px; color: var(--ink); background: #fff; }
input:hover, textarea:hover, select:hover { border-color: #a9b6bc; }
textarea { min-height: 92px; resize: vertical; }

.primary, .secondary, .quiet, .nav-item { min-height: 36px; border-radius: 5px; padding: 7px 12px; }
.primary, .secondary, .quiet { display: inline-flex; align-items: center; justify-content: center; gap: 7px; text-decoration: none; }
.primary svg, .secondary svg, .quiet svg { width: 16px; height: 16px; }
.primary { border: 1px solid var(--teal); background: var(--teal); color: #fff; }
.primary:hover { border-color: var(--teal-dark); background: var(--teal-dark); }
.secondary { border: 1px solid #b9c4c9; background: #fff; color: #34434a; }
.secondary:hover { border-color: #8799a1; background: #f5f7f7; }
.quiet { border: 1px solid transparent; background: transparent; color: #46545b; }
.quiet:hover { background: #edf1f1; }
.quiet.danger { color: var(--red); }
.quiet.danger:hover { background: #fff0ef; }
.form-error { min-height: 20px; margin: 16px 0 0; color: var(--red); font-size: 14px; }

.topbar { position: relative; z-index: 12; min-height: 64px; padding: 0 max(20px, calc((100vw - var(--workspace-max)) / 2)); display: flex; align-items: center; gap: 28px; border-bottom: 1px solid #29434a; background: #173239; box-shadow: 0 1px 0 rgba(255, 255, 255, .04); }
.brand { flex: 0 0 232px; display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: 16px; font-weight: 720; }
.brand-mark { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 7px; background: #f0c35c; color: #173239; box-shadow: inset 0 0 0 1px rgba(84, 57, 0, .08); }
.brand-mark svg { width: 18px; height: 18px; }
.top-search { position: relative; flex: 1 1 620px; max-width: 680px; display: flex; align-items: center; }
.top-search > svg { position: absolute; left: 13px; width: 15px; height: 15px; color: #a9babd; pointer-events: none; }
.top-search input { min-height: 40px; border-color: #456067; padding: 7px 12px 7px 38px; color: #eef4f4; background: #264249; }
.top-search input::placeholder { color: #9bafb3; }
.top-search input:hover { border-color: #5a7379; }
.top-search input:focus { border-color: #6f908f; background: #2a474e; }
.topbar-actions, .button-row { display: flex; align-items: center; gap: 8px; }
.topbar-actions { margin-left: auto; }
.role-label { margin-right: 4px; color: #cfdbdd; font-size: 12px; }
.topbar .secondary, .topbar .quiet { border-color: transparent; color: #dce5e6; background: transparent; }
.topbar .secondary:hover, .topbar .quiet:hover { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.08); }
.mobile-search-trigger { display: none; }
.app-shell.admin-mode .top-search, .app-shell.admin-mode .mobile-search-trigger { display: none; }

.workspace, .admin-workspace { width: min(var(--workspace-max), calc(100% - 40px)); margin: 20px auto 0; display: grid; min-height: calc(100vh - 84px); overflow: hidden; border: 1px solid #d3dcde; border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--surface); box-shadow: 0 18px 45px rgba(35, 56, 62, .09); }
.workspace { grid-template-columns: 58px 238px minmax(0, 1fr); align-content: stretch; }
.admin-workspace { grid-template-columns: 210px minmax(0, 1fr); }
.catalog-rail { padding: 12px 8px; border-right: 1px solid #294149; background: #1d373e; }
.rail-button { width: 40px; height: 42px; display: grid; place-items: center; margin-bottom: 6px; border: 0; border-radius: 6px; color: #afbec1; background: transparent; }
.rail-button svg { width: 17px; height: 17px; }
.rail-button:hover { color: #fff; background: rgba(255,255,255,.08); }
.rail-button.active { color: #173239; background: #f0c35c; }
.catalog-tree { min-width: 0; padding: 18px 10px; overflow: auto; border-right: 1px solid var(--line); background: #f7f9f9; }
.tree-heading { height: 34px; display: flex; align-items: flex-start; justify-content: space-between; padding: 0 9px; color: #849096; font-size: 10px; font-weight: 750; }
.tree-close { display: none; width: 28px; height: 28px; border: 0; border-radius: 5px; color: #69767d; background: transparent; }
.tree-close svg { width: 16px; height: 16px; }
.tree-list { display: grid; }
.tree-item { --tree-depth: 0; width: 100%; min-width: 0; height: 37px; display: grid; grid-template-columns: 15px 17px minmax(0, 1fr) auto; align-items: center; gap: 6px; border: 0; border-radius: 5px; padding: 0 8px 0 calc(7px + var(--tree-depth) * 14px); color: #435159; background: transparent; text-align: left; font-size: 12px; }
.tree-item:hover { background: #edf2f1; }
.tree-item.active { color: #075f58; background: #dcefeb; font-weight: 700; }
.tree-item svg { width: 14px; height: 14px; }
.tree-item .tree-chevron { color: #7b898f; }
.tree-item .tree-folder { color: #b47a0a; }
.tree-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-item small { color: #96a1a6; font-size: 9px; font-weight: 400; }
.tree-toggle { display: none; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border: 1px solid var(--line); border-radius: 5px; color: #526168; background: #fff; }
.tree-toggle svg { width: 16px; height: 16px; }
.tree-scrim { position: fixed; z-index: 8; inset: 64px 0 0; background: rgba(18, 32, 37, .30); }
.sidebar { padding: 24px 14px; border-right: 1px solid var(--line); background: #f8faf9; }
.sidebar > div + div { margin-top: 20px; }
.section-label, .eyebrow { margin: 0 0 10px; color: #77838a; font-size: 12px; font-weight: 700; letter-spacing: 0; }
.filter-list { display: grid; gap: 3px; }
.filter-list button, .nav-item { width: 100%; min-height: 35px; border: 0; border-radius: 5px; padding: 7px 10px; background: transparent; color: #46535a; text-align: left; }
.filter-list button:hover, .filter-list button.active, .nav-item:hover, .nav-item.active { background: var(--teal-soft); color: #075b56; }
.filter-list button.active, .nav-item.active { font-weight: 650; }
.admin-sidebar { display: grid; align-content: start; gap: 4px; }

.content { min-width: 0; padding: 30px; overflow: auto; }
.workspace .content { padding: 0 var(--desktop-gutter) 28px; overflow: visible; }
.content-header { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.content-header h2 { margin: 0; font-size: 22px; line-height: 1.2; letter-spacing: 0; }
.entry-count { color: #8a959b; font-size: 12px; }
.catalog-header { display: grid; margin-bottom: 10px; }
.catalog-pathline { min-width: 0; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid #e2e8ea; }
.catalog-pathline .entry-count { flex: 0 0 auto; }
.path-navigation { min-width: 0; display: flex; align-items: center; gap: 8px; }

.breadcrumb { min-width: 0; display: flex; align-items: center; gap: 3px; margin: 0; overflow-x: auto; color: var(--muted); scrollbar-width: none; }
.breadcrumb::-webkit-scrollbar { display: none; }
.breadcrumb button { flex: 0 0 auto; max-width: 190px; display: inline-flex; align-items: center; gap: 5px; overflow: hidden; border: 0; border-radius: 4px; padding: 3px 5px; background: transparent; color: #4d625f; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.breadcrumb button svg { width: 13px; height: 13px; }
.breadcrumb button:hover { background: var(--teal-soft); color: var(--teal); }
.breadcrumb-separator { flex: 0 0 auto; color: #a0a9ad; font-size: 12px; }
.breadcrumb-current { flex: 0 0 auto; color: #5f6d73; font-size: 12px; }

.table-wrap { position: relative; overflow: auto; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); box-shadow: 0 2px 8px rgba(25, 37, 41, .035); transition: opacity .15s ease; }
.catalog-content .table-wrap { border: 0; border-radius: 0; box-shadow: none; }
.table-wrap.loading { min-height: 90px; opacity: .58; pointer-events: none; }
.table-wrap.loading::after { content: ""; position: absolute; top: 0; left: 0; width: 35%; height: 2px; background: var(--teal); animation: loading-slide 1s ease-in-out infinite; }
@keyframes loading-slide { from { transform: translateX(-100%); } to { transform: translateX(390%); } }
.file-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.file-table th, .file-table td { padding: 12px 14px; border-bottom: 1px solid #e8edef; text-align: left; vertical-align: middle; white-space: nowrap; }
.file-table th { background: #f7f9f9; color: #6f7b82; font-size: 12px; font-weight: 700; }
.file-table tr:last-child td { border-bottom: 0; }
.file-table tbody tr:hover td { background: #f7faf9; }
.workspace .file-table { table-layout: fixed; font-size: 13px; }
.workspace .file-table th, .workspace .file-table td { height: 54px; padding: 6px 9px; }
.workspace .file-table th { height: 34px; background: #fff; color: #8a969b; font-size: 10px; }
.workspace .file-table th:first-child { width: auto; }
.workspace .file-table th:nth-child(2) { width: 112px; }
.workspace .file-table th:nth-child(3) { width: 158px; }

.file-name { min-width: 0; display: grid; gap: 2px; white-space: normal; }
.file-name strong { font-weight: 630; }
.file-name strong, .file-name small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-name small, .helper-text { color: var(--muted); line-height: 1.5; }
.workspace .file-name small { font-size: 11px; line-height: 1.3; }
.file-title { min-width: 0; max-width: 100%; overflow: hidden; color: var(--ink); text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.file-meta { min-width: 0; display: flex; align-items: center; gap: 7px; overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.3; white-space: nowrap; }
.file-meta > span { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
.file-path { flex: 1 1 auto; min-width: 0; overflow: hidden; border: 0; border-left: 1px solid #d7dfe2; padding: 0 0 0 7px; background: transparent; color: #488078; text-align: left; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.file-path:hover { color: var(--teal); text-decoration: underline; }
.entry-name, .entry-file { width: 100%; min-width: 0; display: flex; align-items: center; gap: 10px; overflow: hidden; }
.entry-name { min-height: 32px; border: 0; padding: 0; background: transparent; color: var(--ink); text-align: left; }
.entry-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 630; }
.entry-icon { position: relative; flex: 0 0 auto; width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 6px; }
.entry-icon svg { width: 18px; height: 18px; }
.folder-icon { background: #fff3cf; color: #b67a08; }
.folder-count { margin-left: auto; color: #8a959a; font-size: 11px; font-weight: 400; }
.file-icon { background: #eef2f3; color: #66767e; }
.type-archive { background: #fff0dd; color: #b55b14; }
.type-installer { background: #e6f3f0; color: #087b72; }
.type-disk { background: #eeeaf8; color: #6c51a6; }
.type-pdf { background: #fde9e7; color: #b83f37; }
.type-document { background: #e8f0fa; color: #356fa8; }
.type-sheet { background: #e7f4e8; color: #3f8149; }
.type-slides { background: #fff0e4; color: #bb5c25; }
.type-image { background: #f2eaf6; color: #8b4d99; }
.type-video { background: #e9edf8; color: #4d62a0; }
.type-audio { background: #f7e9f1; color: #9a4775; }
.type-code { background: #e8f2f3; color: #32727a; }
.folder-entry td { background: #fff; }
.folder-entry:hover td { background: #f6faf8 !important; }
.file-entry { outline: 0; }
.file-entry.context-selected td { background: #e3f2ef !important; }
.file-entry:focus-visible td { background: #edf6f4; }
.file-entry.share-loading { opacity: .58; pointer-events: none; }
.narrow-file-meta { display: none; color: #839096; font-size: 9px; }

.tag-list { display: flex; flex-wrap: wrap; gap: 5px; }
.tag { padding: 2px 6px; border-radius: 3px; background: #e9f1ef; color: #456661; font-size: 12px; }
.status { display: inline-flex; align-items: center; gap: 6px; color: #476159; font-size: 12px; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #1d987d; }
.status.error { color: #963933; }
.status.error::before { background: var(--red); }
.status.pending { color: #8f631f; }
.status.pending::before { background: #ca8b27; }
.row-actions { display: flex; justify-content: end; gap: 4px; }
.workspace .row-actions .secondary, .workspace .row-actions .quiet { min-height: 29px; padding: 3px 7px; font-size: 12px; }
.workspace .row-actions .secondary svg { width: 14px; height: 14px; }
.workspace .row-actions .icon-action { width: 29px; padding: 4px; }
.pagination { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #6e7a80; font-size: 12px; }
.pagination-actions { display: flex; align-items: center; gap: 7px; }
.pagination .icon-action { width: 30px; min-height: 30px; padding: 5px; }
.pagination button:disabled { cursor: default; opacity: .35; }

.notice { margin: 0 0 18px; padding: 10px 12px; border-left: 3px solid var(--orange); background: #fff6ed; color: #74401b; font-size: 14px; }
.empty-state { padding: 42px 12px; text-align: center; color: var(--muted); }
.account-setup-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 18px; padding: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); list-style: none; }
.account-setup-flow li { min-width: 0; min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 10px 16px; color: #405057; }
.account-setup-flow li + li { border-left: 1px solid var(--line); }
.account-setup-flow span { width: 25px; height: 25px; flex: 0 0 25px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--teal); font-size: 12px; font-weight: 750; }
.account-setup-flow strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.account-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: 14px; }
.account-item { padding: 18px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.account-item h3 { margin: 0; font-size: 17px; }
.account-item p { margin: 8px 0; color: var(--muted); font-size: 13px; }
.account-item .button-row { margin-top: 16px; flex-wrap: wrap; }
.folder-scope-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0; }
.folder-scope-summary > span { margin-right: 2px; color: var(--muted); font-size: 12px; }
.folder-scope-summary strong { max-width: 180px; overflow: hidden; border: 1px solid #cddbd7; border-radius: 4px; padding: 3px 7px; color: #285c55; background: #eef6f3; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.folder-scope-summary em { color: var(--red); font-size: 12px; font-style: normal; }
.settings-form { max-width: 760px; display: grid; gap: 18px; }
.security-form { max-width: 460px; }
.security-grid { max-width: 980px; display: grid; grid-template-columns: repeat(2, minmax(0, 460px)); gap: 34px 54px; }
.security-form h3 { margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 16px; }
.alert-account-settings { display: grid; border-top: 1px solid var(--line); }
.alert-account-row { min-height: 68px; display: grid; grid-template-columns: minmax(150px, .7fr) minmax(320px, 2fr) auto; align-items: center; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.alert-account-name { min-width: 0; display: grid; gap: 3px; }
.alert-account-name strong, .alert-account-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alert-account-name small { color: var(--muted); font-size: 12px; }
.alert-account-row label { display: block; }
.alert-account-row input { min-height: 36px; }
.alert-channel-fields { min-width: 0; display: grid; grid-template-columns: minmax(180px, .8fr) minmax(260px, 1.4fr); gap: 10px; }
.alert-channel-fields label > span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 11px; }
.alert-options { grid-column: 2; display: grid; gap: 6px; }
.alert-options .check-line { display: inline-flex; align-items: center; gap: 7px; color: #526267; font-size: 12px; white-space: nowrap; }
.alert-options .check-line input { width: auto; min-height: 0; }
.alert-options .danger-option { color: var(--red); }
.alert-template-editor { grid-column: 1 / -1; border-top: 1px solid #edf0f1; padding-top: 9px; }
.alert-template-editor summary { width: fit-content; cursor: pointer; color: #3f625e; font-size: 12px; font-weight: 650; }
.alert-template-controls { display: grid; gap: 14px; padding: 14px 0 2px; }
.alert-prefix-field { max-width: 320px; }
.alert-template-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; }
.alert-template-item { min-width: 0; border-top: 1px solid var(--line); padding-top: 10px; }
.alert-template-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.alert-template-header strong { font-size: 13px; font-weight: 650; }
.alert-template-header .check-line { display: inline-flex; align-items: center; gap: 6px; color: #526267; font-size: 12px; white-space: nowrap; }
.alert-template-header .check-line input { width: auto; min-height: 0; }
.alert-template-item textarea { min-height: 132px; font-size: 12px; line-height: 1.55; }
.admin-section { max-width: 1300px; }

dialog { width: min(700px, calc(100vw - 28px)); max-height: min(800px, calc(100vh - 28px)); border: 1px solid #bbc6cb; border-radius: 8px; padding: 0; box-shadow: 0 20px 65px rgba(20, 36, 40, .28); }
dialog::backdrop { background: rgba(20, 31, 33, .42); }
.modal-header { min-height: 62px; padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.modal-header h2 { margin: 0; font-size: 19px; }
.modal-header + div { padding: 18px; }
.modal-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.modal-form .wide { grid-column: 1 / -1; }
.modal-actions { grid-column: 1 / -1; display: flex; justify-content: end; gap: 10px; margin-top: 4px; }
.folder-scope-form { display: grid; gap: 14px; }
.folder-picker-bar { min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; }
.folder-picker-bar strong { color: #284d49; font-size: 13px; }
.selected-folder-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 76px; overflow: auto; }
.selected-folder { min-width: 0; height: 30px; display: grid; grid-template-columns: 15px minmax(0, 1fr) 22px; align-items: center; gap: 5px; border: 1px solid #cddbd7; border-radius: 4px; padding: 0 3px 0 7px; color: #285c55; background: #eef6f3; }
.selected-folder > svg { width: 14px; height: 14px; color: #b47a0a; }
.selected-folder strong { max-width: 150px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.selected-folder button { width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 3px; padding: 0; color: #60716f; background: transparent; }
.selected-folder button:hover { color: var(--red); background: #fff; }
.selected-folder button svg { width: 13px; height: 13px; }
.folder-picker-list { max-height: min(520px, 58vh); overflow: auto; border-block: 1px solid var(--line); }
.folder-choice { --folder-depth: 0; min-height: 48px; display: grid; grid-template-columns: 24px 18px 20px minmax(0, 1fr); align-items: center; gap: 7px; padding: 6px 10px 6px calc(6px + var(--folder-depth) * 20px); border-bottom: 1px solid #edf1f1; }
.folder-choice:hover { background: #f4f8f7; }
.folder-choice.covered { opacity: .48; cursor: default; }
.folder-choice input { width: 16px; height: 16px; margin: 0; }
.folder-expand { width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 3px; padding: 0; color: #71807f; background: transparent; }
.folder-expand:hover { color: #17665f; background: #e6f0ed; }
.folder-expand svg { width: 15px; height: 15px; }
.folder-expand.loading svg, .folder-loading > svg { animation: folder-spin .8s linear infinite; }
.folder-expand.empty { visibility: hidden; }
.folder-choice-icon { display: grid; place-items: center; color: #b47a0a; }
.folder-choice-icon svg { width: 17px; height: 17px; }
.folder-choice-name { min-width: 0; display: grid; gap: 2px; }
.folder-choice-name strong, .folder-choice-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-choice-name strong { font-size: 13px; }
.folder-choice-name small { color: var(--muted); font-size: 10px; }
.folder-loading, .folder-level-empty, .folder-level-error { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; color: var(--muted); font-size: 12px; }
.folder-loading > svg { width: 16px; height: 16px; }
.folder-loading.compact { min-height: 38px; }
.folder-level-error { color: var(--red); }
@keyframes folder-spin { to { transform: rotate(360deg); } }
.qr-image-wrap { display: flex; justify-content: center; padding: 14px; border: 1px solid var(--line); background: #f3f5f5; }
.modal-qr { display: block; width: min(320px, 100%); height: auto; max-height: 560px; object-fit: contain; background: #fff; image-rendering: pixelated; }
.qr-copy { color: var(--muted); line-height: 1.6; }
.qr-actions { margin-top: 14px; }
.qr-preparing { min-height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.qr-preparing-icon { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid #bad1cb; border-radius: 50%; color: var(--teal); background: #edf6f3; }
.qr-preparing-icon svg { width: 23px; height: 23px; animation: folder-spin .9s linear infinite; }
.qr-preparing strong { font-size: 16px; }
.qr-preparing > span:not(.qr-preparing-icon, .qr-progress-track) { color: #53706c; font-size: 13px; font-variant-numeric: tabular-nums; }
.qr-preparing p { max-width: 440px; margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.qr-progress-track { width: min(360px, 86%); height: 4px; overflow: hidden; background: #dce8e5; }
.qr-progress-track i { width: 34%; height: 100%; display: block; background: var(--teal); animation: qr-progress 1.35s ease-in-out infinite; }
.qr-prepare-error { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.qr-prepare-error > span { color: var(--red); }
.qr-prepare-error > span svg { width: 34px; height: 34px; }
.qr-prepare-error > strong { font-size: 16px; }
.qr-prepare-error > p { max-width: 500px; margin: 0; color: var(--muted); line-height: 1.6; }
.qr-prepare-error .modal-actions { width: 100%; margin-top: 14px; }
@keyframes qr-progress { from { transform: translateX(-100%); } to { transform: translateX(295%); } }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 10; max-width: min(420px, calc(100vw - 44px)); padding: 11px 14px; border-radius: 5px; color: white; background: #254840; box-shadow: 0 6px 20px rgba(0, 0, 0, .16); }
.toast.error { background: #963b35; }
.file-context-menu { position: fixed; z-index: 30; width: 190px; overflow: hidden; border: 1px solid #d1dade; border-radius: 8px; padding: 7px; background: rgba(255,255,255,.98); box-shadow: 0 18px 46px rgba(24,42,48,.22), 0 2px 8px rgba(24,42,48,.08); }
.context-action { width: 100%; height: 38px; display: grid; grid-template-columns: 25px 1fr; align-items: center; border: 0; border-radius: 5px; padding: 0 9px; color: #35434a; background: transparent; text-align: left; text-decoration: none; font-size: 11px; }
.context-action svg { width: 15px; height: 15px; }
.context-action:hover { background: #f0f4f3; }
.context-action.context-primary { color: #07665f; background: #e3f2ef; font-weight: 720; }
.context-action.context-primary:hover { background: #d7ebe7; }

@media (pointer: coarse) {
  .file-context-menu.touch-sheet { top: auto !important; right: 0; bottom: 0; left: 0 !important; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border: 0; border-radius: 14px 14px 0 0; padding: 10px 14px max(18px, env(safe-area-inset-bottom)); box-shadow: 0 -16px 40px rgba(22,39,45,.20); }
  .file-context-menu.touch-sheet::before { content: ""; grid-column: 1 / -1; width: 34px; height: 4px; justify-self: center; border-radius: 2px; background: #d6dfe1; }
  .file-context-menu.touch-sheet .context-action { height: 54px; grid-template-columns: 22px 1fr; background: #f1f4f4; }
  .file-context-menu.touch-sheet .context-primary { color: #fff; background: var(--teal); }
}

@media (max-width: 980px) {
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .catalog-rail { display: none; }
  .catalog-tree { position: fixed; z-index: 10; top: 64px; bottom: 0; left: 0; width: min(290px, calc(100vw - 48px)); border-right-color: #cbd5d8; box-shadow: 18px 0 42px rgba(26,43,49,.16); transform: translateX(-105%); transition: transform .16s ease; }
  .workspace.tree-open .catalog-tree { transform: translateX(0); }
  .tree-close { display: grid; place-items: center; }
  .tree-toggle { display: grid; }
}

@media (max-width: 800px) {
  .security-grid { grid-template-columns: 1fr; gap: 34px; }
  .login-layout { grid-template-columns: 1fr; }
  .login-copy { justify-self: stretch; padding: 52px 28px 14px; }
  .login-copy h1 { font-size: 34px; }
  .login-panel { margin: 20px 18px 36px; }
  .workspace, .admin-workspace { width: 100%; grid-template-columns: 1fr; align-content: start; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
  .sidebar { height: 58px; min-height: 58px; display: flex; align-items: center; gap: 14px; overflow-x: auto; padding: 11px 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar > div + div { margin: 0; }
  .sidebar .section-label { display: none; }
  .filter-list { display: flex; }
  .filter-list button, .nav-item { width: auto; white-space: nowrap; }
  .workspace { min-height: calc(100vh - 52px); align-content: start; }
  .workspace .file-table th:nth-child(3), .workspace .file-table td:nth-child(3) { display: none; }
  .workspace .file-table th:first-child { width: auto; }
  .workspace .file-table th:nth-child(2) { width: 76px; text-align: right; }
  .workspace .file-table td:nth-child(2) { color: #59676e; text-align: right; font-size: 11px; }
  .admin-sidebar { display: flex; }
  .admin-sidebar { scrollbar-width: none; }
  .admin-sidebar::-webkit-scrollbar { display: none; }
  .content { padding: 16px 14px 22px; }
  .workspace .content { padding: 10px 10px 18px; }
  .content-header { align-items: stretch; flex-direction: column; gap: 14px; }
  .catalog-header { margin-bottom: 7px; }
  .catalog-pathline { min-height: 58px; gap: 8px; }
  .catalog-pathline .entry-count { font-size: 11px; }
  .topbar { min-height: 52px; padding: 0 10px; gap: 10px; }
  .brand { flex-basis: auto; font-size: 15px; }
  .brand-mark { width: 31px; height: 31px; }
  .top-search { position: absolute; top: 58px; right: 10px; left: 10px; z-index: 4; display: none; max-width: none; padding: 6px; border: 1px solid #c6d1d4; border-radius: 8px; background: #fff; box-shadow: 0 14px 35px rgba(25,42,48,.18); }
  .top-search input { color: var(--ink); background: #f5f7f7; }
  .top-search input::placeholder { color: #859198; }
  .app-shell.mobile-search-open:not(.admin-mode) .top-search { display: flex; }
  .mobile-search-trigger { display: inline-flex; }
  .topbar-actions { gap: 2px; }
  .role-label { display: none; }
  .topbar .secondary, .topbar .quiet { padding: 7px 8px; }
  .topbar .secondary svg, .topbar .quiet svg { display: none; }
  .topbar .mobile-search-trigger svg { display: block; }
  .modal-form { grid-template-columns: 1fr; }
  .modal-form .wide { grid-column: auto; }
  .folder-picker-bar { align-items: flex-start; flex-direction: column; gap: 3px; }
  .folder-choice { padding-left: calc(4px + var(--folder-depth) * 13px); }
  .alert-account-row { grid-template-columns: 1fr auto; gap: 8px; padding: 12px 0; }
  .alert-account-name { grid-column: 1 / -1; }
  .alert-channel-fields { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .alert-options { grid-column: auto; }
  .alert-template-grid { grid-template-columns: 1fr; }
  .account-setup-flow li { min-height: 46px; gap: 7px; padding: 8px; }
  .account-setup-flow span { width: 22px; height: 22px; flex-basis: 22px; }
  .account-setup-flow strong { font-size: 11px; white-space: normal; }
  .entry-icon { width: 29px; height: 31px; }
  .workspace .file-table th, .workspace .file-table td { height: 50px; padding: 5px 4px; }
  .workspace .file-table th { height: 28px; }
  .workspace .file-table th:first-child, .workspace .file-table td:first-child { padding-left: 2px; }
  .workspace .file-name { display: block; }
  .workspace .file-meta, .workspace .narrow-file-meta, .workspace .tag-list { display: none; }
  .workspace .file-title { display: block; }
  .workspace .file-title strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .workspace .row-actions { gap: 1px; }
  .workspace .row-actions .icon-action { width: 27px; }
  .folder-count { display: none; }
  .pagination { min-height: 50px; }
}