@charset "UTF-8";

/* A quiet, tactile workspace: porcelain surfaces, graphite type and clear blue actions. */
:root {
  --ink: #1d1d1f;
  --secondary: #6e6e73;
  --muted: #86868b;
  --blue: #0071e3;
  --blue-hover: #0077ed;
  --line: #e5e5ea;
  --canvas: #f5f5f7;
  --surface: #ffffff;
  --sidebar: 212px;
  --header: 72px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  color: var(--ink);
  background: var(--canvas);
  color-scheme: light;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { border: 0; color: inherit; background: none; cursor: pointer; }
button:disabled { opacity: .45; cursor: not-allowed; }
a { color: inherit; text-decoration: none; }
input, select { min-width: 0; color: var(--ink); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, main:focus-visible {
  outline: 3px solid #0071e3;
  outline-offset: 4px;
}
[hidden] { display: none !important; }
.icon { display: inline-block; width: 20px; height: 20px; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 100; background: var(--blue); color: white; border-radius: 8px; padding: 12px 18px; }
.skip-link:focus { top: 12px; }

/* Navigation */
.app-shell { min-height: 100vh; }
.topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--header); z-index: 45; display: flex; align-items: center; gap: 27px; padding: 0 36px; border-bottom: 1px solid #0000000a; background: #fbfbfddd; backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px); }
.brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; min-width: 154px; }
.brand-mark { display: grid; place-items: center; color: var(--ink); }
.brand-mark .icon { width: 31px; height: 31px; stroke-width: 1.55; }
.brand strong { font-size: 20px; font-weight: 650; letter-spacing: -.7px; }
.top-location { display: flex; align-items: center; gap: 7px; white-space: nowrap; color: var(--secondary); font-size: 11px; }
.status-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #36a366; flex-shrink: 0; }
.search-box { margin-left: auto; display: flex; align-items: center; gap: 9px; background: #e9e9ed9c; border: 1px solid transparent; border-radius: 10px; height: 36px; max-width: 300px; min-width: 100px; flex: 1; padding: 0 11px; color: var(--muted); transition: background .2s, box-shadow .2s; }
.search-box:focus-within { background: white; box-shadow: 0 0 0 3px #0071e327; border-color: #0071e380; }
.search-box .icon { width: 15px; height: 15px; }
.search-box input { border: 0; background: transparent; outline: none; padding: 9px 0; font-size: 11px; width: 100%; }
.search-box input::placeholder { color: #77777d; }
.search-box kbd { font-size: 10px; border: 1px solid #d1d1d6; border-radius: 3px; padding: 0 4px; line-height: 17px; }
.top-actions { display: flex; align-items: center; gap: 18px; white-space: nowrap; }
.public-badge { font-size: 11px; color: var(--secondary); display: flex; align-items: center; gap: 6px; }
.login-button { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 8px 16px; border-radius: 999px; background: var(--blue); color: white; font-size: 11px; font-weight: 500; transition: background .2s; }
.login-button:hover { background: var(--blue-hover); }
.login-button .icon { width: 14px; height: 14px; }
.sidebar { position: fixed; top: var(--header); bottom: 0; left: 0; width: var(--sidebar); z-index: 35; background: #fbfbfd; border-right: 1px solid #e5e5ea80; padding: 35px 17px 22px; display: flex; flex-direction: column; overflow-y: auto; }
.sidebar-heading { display: flex; align-items: baseline; justify-content: space-between; padding: 0 15px; }
.sidebar-heading>span { font-size: 18px; font-weight: 650; letter-spacing: -.3px; }
.sidebar-heading small { color: #909096; font-size: 8px; letter-spacing: 1.5px; }
.space-label { margin: 14px 15px 28px; display: flex; align-items: center; gap: 7px; color: #84848b; font-size: 10px; }
.space-label .status-dot { width: 4px; height: 4px; background: #9ba5ae; }
.nav-group { display: flex; flex-direction: column; gap: 5px; }
.nav-item { min-height: 43px; display: flex; align-items: center; gap: 11px; padding: 10px 15px; width: 100%; text-align: left; border-radius: 9px; color: #57575e; font-size: 12px; transition: background .18s, color .18s; }
.nav-item .icon { width: 18px; height: 18px; color: #77777e; }
.nav-item:hover { background: #eeeef1; }
.nav-item.active { background: #e8f0fc; color: #0066cc; font-weight: 600; }
.nav-item.active .icon { color: #0071e3; }
.nav-count { margin-left: auto; background: #d8e7fc; color: #0071e3; font-size: 10px; padding: 2px 6px; border-radius: 5px; }
.nav-label { margin: 29px 15px 11px; font-size: 10px; color: #88888d; font-weight: 500; }
.categories-nav { gap: 2px; }
.sidebar-bottom { margin-top: auto; padding-top: 35px; }
.public-note { padding: 19px 15px; border-top: 1px solid var(--line); }
.note-icon { display: block; color: #7d8c9e; margin-bottom: 11px; }
.note-icon .icon { width: 27px; height: 27px; stroke-width: 1.3; }
.public-note strong { font-size: 12px; font-weight: 600; }
.public-note p { font-size: 11px; color: var(--secondary); line-height: 1.9; margin: 9px 0 13px; }
.public-note .text-button { font-size: 10px; color: #0071e3; }
.public-note .text-button .icon { width: 11px; height: 11px; }
.storage-info { padding: 19px 15px; border-top: 1px solid var(--line); }
.storage-info>span { display: flex; align-items: center; gap: 7px; color: #63636a; font-size: 10px; }
.storage-info .icon { width: 14px; height: 14px; }
.storage-info b { margin-left: auto; color: #3d3d43; font-weight: 500; }
.storage-info small { display: block; font-size: 9px; color: #898990; margin-top: 9px; }
.sidebar-footer { font-size: 8px; color: #8f8f95; letter-spacing: .3px; display: flex; align-items: center; gap: 6px; padding: 0 15px; }
.sidebar-footer .status-dot { background: #a0a0a5; width: 3px; height: 3px; }
.sidebar-backdrop, .topbar .mobile-menu { display: none; }
.workspace { margin-left: var(--sidebar); padding-top: var(--header); }
main { max-width: 1420px; margin: 0 auto; padding: 43px 44px 0; }

/* The collection */
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.eyebrow { font-size: 9px; font-weight: 600; letter-spacing: 2.4px; color: #7f7f85; }
.page-heading h1 { font-size: clamp(30px, 2.9vw, 42px); line-height: 1.28; letter-spacing: -1.8px; font-weight: 650; margin: 11px 0 9px; }
.page-heading h1 span { color: #86868b; }
.page-heading p { font-size: 12px; line-height: 1.7; color: var(--secondary); margin: 0; }
.heading-note { display: flex; align-items: center; gap: 10px; color: #66666c; font-size: 10px; line-height: 1.9; }
.heading-note .icon { width: 25px; height: 25px; color: #98989f; stroke-width: 1.2; }
.heading-note strong { font-weight: 400; color: #86868b; }
.hero { position: relative; display: flex; min-height: 322px; background: radial-gradient(ellipse at 84% 54%, #e8f1ff 0, #f7faff 38%, #fff 72%); border-radius: 24px; overflow: hidden; border: 1px solid #ffffff; box-shadow: 0 3px 7px #00000002; margin-bottom: 34px; }
.hero-copy { padding: 33px 42px; position: relative; z-index: 2; flex: 1; }
.hero-tag { font-size: 11px; color: #77777d; font-weight: 500; }
.hero h2 { font-size: clamp(32px, 3vw, 43px); line-height: 1.16; font-weight: 650; letter-spacing: -1.5px; margin: 17px 0 12px; }
.hero h2 span { color: #1875cd; }
.hero p { font-size: 12px; color: var(--secondary); line-height: 1.8; margin: 0 0 13px; }
.hero-link { display: inline-flex; align-items: center; gap: 3px; color: #0066cc; font-size: 12px; }
.hero-link:hover { text-decoration: underline; }
.hero-link .icon { width: 12px; height: 12px; }
.hero-features { display: flex; align-items: center; gap: 13px; margin-top: 22px; color: #737379; font-size: 10px; }
.hero-features>span { display: flex; align-items: center; gap: 5px; }
.hero-features .icon { width: 13px; height: 13px; color: #7d899b; }
.hero-features i { height: 9px; width: 1px; background: #d9dfe8; }
.hero-art { position: relative; width: 440px; flex: 0 0 440px; align-self: stretch; margin-right: 25px; }
.art-halo { position: absolute; width: 290px; height: 290px; top: 15px; left: 70px; border: 1px solid #dce7f9; border-radius: 50%; box-shadow: 0 0 0 35px #d9e4f324, 0 0 0 70px #dde7f313; }
.art-ground { position: absolute; width: 245px; height: 30px; border-radius: 50%; background: #6c87b436; filter: blur(15px); left: 115px; top: 273px; transform: rotate(-7deg); }
.glass-tile { position: absolute; border-radius: 17px; width: 103px; height: 132px; background: linear-gradient(145deg, #fff 0, #edf4ff 100%); border: 1px solid #fff; box-shadow: 4px 9px 23px #53789b17, inset -2px -2px 5px #b0c8ed3b; }
.tile-document { top: 52px; left: 86px; transform: rotate(-17deg); padding: 15px; }
.tile-document>.icon { color: #80a9d5; width: 31px; height: 31px; stroke-width: 1.2; margin-bottom: 8px; }
.tile-document>span { display: block; font-size: 12px; color: #657c9a; font-weight: 600; letter-spacing: -.4px; }
.tile-document>i { display: block; background: #d4e0f0; height: 3px; width: 52px; border-radius: 2px; margin-top: 9px; }
.tile-document>i:last-child { width: 37px; }
.tile-photo { width: 119px; height: 112px; top: 53px; right: 46px; transform: rotate(14deg); overflow: hidden; background: linear-gradient(150deg, #e5f2ff, #b8d4fa); border: 5px solid #fff; }
.photo-sun { position: absolute; width: 24px; height: 24px; border-radius: 50%; background: #fffcf4; top: 16px; right: 20px; box-shadow: 0 0 20px #fff7dd80; }
.photo-mountain { position: absolute; width: 110px; height: 110px; background: linear-gradient(155deg,#81b4d6,#5796c4); border-radius: 16px; transform: rotate(40deg); top: 65px; left: -30px; box-shadow: 65px -25px 0 0 #9bc3e5; }
.cloud-sculpture { position: absolute; left: 122px; top: 126px; display: grid; place-items: center; width: 195px; height: 137px; border-radius: 36px; background: linear-gradient(155deg,#f9fdff 0%,#c7e0ff 47%,#86b8f2 100%); border: 1px solid #ffffffea; box-shadow: inset 3px 4px 9px #fff, inset -4px -6px 13px #3a6fa23a, 8px 18px 29px #3a659a28; transform: rotate(-8deg); }
.cloud-sculpture .icon { width: 108px; height: 108px; color: #f9fdff; fill: #ffffff12; stroke-width: 1.1; filter: drop-shadow(1px 2px 1px #6b9ace80); }
.floating-chip { position: absolute; top: 205px; right: 53px; width: 55px; height: 57px; display: grid; place-items: center; border-radius: 17px; background: linear-gradient(135deg,#fff,#f2f6ff); border: 1px solid #fff; color: #4682cd; box-shadow: 1px 8px 20px #5f7eaa26; transform: rotate(9deg); }
.floating-chip .icon { width: 27px; height: 27px; stroke-width: 1.6; }
.art-caption { position: absolute; left: 102px; bottom: 21px; color: #8a9cb5; font-size: 7px; letter-spacing: 1.6px; }

/* Upload stays a primary action, including on smaller screens. */
.admin-upload { display: flex; align-items: center; justify-content: space-between; gap: 35px; min-height: 310px; position: relative; padding: 35px 42px; margin-bottom: 34px; border: 1px solid #dde5f2; border-radius: 24px; background: radial-gradient(ellipse at 95% 20%,#e9f2ff,transparent 64%),#fff; }
.admin-upload::after { content: ""; position: absolute; inset: 11px; border: 1px dashed #cbd9ec; border-radius: 17px; pointer-events: none; }
.admin-upload-copy { min-width: 0; }
.upload-eyebrow { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #6381a3; }
.upload-eyebrow .icon { width: 15px; height: 15px; }
.admin-upload h2 { font-size: clamp(27px,2.7vw,37px); line-height: 1.27; font-weight: 650; letter-spacing: -1.2px; margin: 17px 0 14px; }
.admin-upload h2 span { color: #74869b; }
.admin-upload p { font-size: 12px; color: var(--secondary); line-height: 1.8; margin: 0; }
.upload-destination { display: flex; align-items: center; gap: 6px; margin-top: 23px; font-size: 11px; color: #7a8797; }
.upload-destination .icon { width: 14px; height: 14px; }
.upload-destination strong { font-weight: 500; color: #52677f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-upload-action { display: flex; align-items: center; flex-direction: column; gap: 13px; flex-shrink: 0; padding: 0 20px; }
.upload-orb { display: grid; place-items: center; width: 90px; height: 75px; margin-bottom: 6px; color: #4893e6; filter: drop-shadow(0 5px 9px #258bdf22); }
.upload-orb .icon { width: 80px; height: 80px; stroke-width: 1.3; }
.upload-main-button { min-height: 49px; padding: 13px 25px; display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 14px; color: #fff; background: var(--blue); border-radius: 999px; transition: transform .2s, background .2s; box-shadow: 0 3px 5px #0066cc14; }
.upload-main-button:hover { background: var(--blue-hover); transform: translateY(-1px); }
.upload-main-button .icon { width: 17px; height: 17px; }
.admin-upload-action>span:last-child { color: #738298; font-size: 10px; }
.category-section-heading { display: flex; align-items: baseline; gap: 10px; margin: 0 1px 16px; }
.category-section-heading h2 { font-size: 19px; font-weight: 600; letter-spacing: -.6px; margin: 0; }
.category-section-heading>span { color: #86868b; font-size: 12px; }
.category-cards { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px; margin-bottom: 40px; }
.category-card { min-height: 101px; background: #fff; border: 1px solid #fff; border-radius: 18px; padding: 20px 18px; display: flex; align-items: center; gap: 13px; text-align: left; box-shadow: 0 2px 3px #00000002; transition: transform .2s, box-shadow .2s; }
.category-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px #00000007; }
.category-icon { display: grid; place-items: center; width: 43px; height: 48px; border-radius: 12px; flex-shrink: 0; }
.category-icon .icon { width: 25px; height: 25px; stroke-width: 1.45; }
.document { background: #eaf3ff; color: #3686d8; }
.image { background: #f0efff; color: #9180ce; }
.video { background: #fff0ed; color: #da8975; }
.audio { background: #fff5e4; color: #c19a51; }
.archive { background: #fff4df; color: #ba9756; }
.other { background: #eff1f5; color: #8390a3; }
.category-copy { display: flex; flex-direction: column; min-width: 0; gap: 9px; }
.category-copy strong { font-size: 13px; font-weight: 600; white-space: nowrap; }
.category-copy small { font-size: 10px; color: #85858c; }
.category-arrow { margin-left: auto; color: #b2b2b7; }
.category-arrow .icon { width: 12px; height: 12px; }

/* File browser */
.files-section { scroll-margin-top: calc(var(--header) + 25px); }
.files-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 17px; }
.files-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.files-heading h2 { font-size: 22px; font-weight: 600; letter-spacing: -.7px; white-space: nowrap; margin: 0; }
.files-heading>span { color: #85858b; font-size: 10px; white-space: nowrap; }
.file-controls { display: flex; align-items: center; gap: 9px; }
.sort-label select { border: 0; background: transparent; font-size: 11px; color: #65656c; padding: 8px 4px; cursor: pointer; max-width: 100px; }
.view-switch { display: flex; align-items: center; background: #e8e8ed; border-radius: 8px; gap: 2px; padding: 3px; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 7px; color: #83838a; flex-shrink: 0; transition: background .18s, color .18s; }
.icon-button .icon { width: 17px; height: 17px; }
.icon-button:hover { color: #0071e3; background: #eaf1fb; }
.view-switch .icon-button { width: 29px; height: 27px; }
.view-switch .icon-button .icon { width: 15px; height: 15px; }
.view-switch .active { color: #3a3a40; background: #fff; box-shadow: 0 1px 4px #00000012; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid #dcdce1; border-radius: 999px; background: #fff; color: #56565c; font-size: 12px; min-height: 37px; padding: 8px 17px; white-space: nowrap; transition: background .15s; }
.button:hover { background: #f0f0f4; }
.button .icon { width: 15px; height: 15px; }
.button.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.button.primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); }
.button.subtle { background: transparent; border-color: #d7d7dd; color: #65656b; }
.button.danger { background: #c43732; border-color: #c43732; color: #fff; }
.button.danger:hover { background: #ad302c; }
.file-controls .button { font-size: 11px; min-height: 34px; padding: 7px 13px; }
.file-controls .button .icon { width: 13px; height: 13px; }
.full-width { width: 100%; }
.folder-path { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 11px; color: #74747b; margin: 0 0 15px; }
.folder-path button { padding: 5px; border-radius: 5px; max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #0066cc; }
.folder-path button:hover { background: #e8eef8; }
.folder-path>.icon { width: 12px; height: 12px; color: #a9a9af; }
.folder-path strong { overflow-wrap: anywhere; }
.file-content { min-height: 180px; border: 1px solid #e8e8ed; border-radius: 18px; overflow: hidden; background: white; }
.file-table { width: 100%; table-layout: fixed; border-collapse: collapse; text-align: left; }
.file-table th { font-size: 10px; font-weight: 400; color: #88888d; background: #fbfbfd; padding: 17px 14px; border-bottom: 1px solid #ededf1; }
.file-table th:first-child { width: 43%; padding-left: 24px; }
.file-table th:nth-child(2) { width: 13%; }
.file-table th:nth-child(3) { width: 21%; }
.file-table th:nth-child(4) { width: 10%; }
.file-table th:last-child { width: 13%; text-align: right; padding-right: 24px; }
.file-table td { font-size: 11px; color: #818188; padding: 13px 14px; height: 77px; border-bottom: 1px solid #f0f0f3; }
.file-table td:first-child { padding-left: 24px; }
.file-table td:last-child { text-align: right; padding-right: 19px; }
.file-table tr:last-child td { border-bottom: 0; }
.file-table tr:hover td { background: #f8faff; }
.entry-name { display: flex; align-items: center; gap: 13px; min-width: 0; width: 100%; text-align: left; padding: 0; }
.entry-name:hover .entry-label { color: #0071e3; }
.file-type-icon { width: 33px; height: 39px; flex: 0 0 33px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; position: relative; }
.file-type-icon .icon { width: 21px; height: 21px; stroke-width: 1.4; }
.file-type-icon.folder { background: linear-gradient(155deg,#b6dfff,#87bcea); height: 26px; margin-top: 5px; border-radius: 3px 5px 5px 5px; box-shadow: inset 0 1px 0 #d6efff; }
.file-type-icon.folder::before { content: ""; position: absolute; top: -5px; left: 0; width: 16px; height: 7px; border-radius: 3px 5px 0 0; background: #82b8e6; }
.file-type-icon.folder .icon { display: none; }
.entry-text { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.entry-label { font-size: 12px; font-weight: 500; color: #3a3a40; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entry-subtitle { color: #99999e; font-size: 9px; }
.file-date { font-size: 10px !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.row-actions .icon-button { width: 28px; height: 30px; }
.row-actions .icon { width: 15px; height: 15px; }
.row-download { color: #0071e3; }
.row-actions .delete-action:hover { color: #bf3c36; background: #fff0ed; }
.admin-table th:first-child { width: 37%; }
.admin-table th:nth-child(3) { width: 21%; }
.admin-table th:last-child { width: 19%; }
.list-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 3px; min-height: 50px; font-size: 10px; color: #8b8b91; }
.public-hint { display: flex; align-items: center; gap: 5px; }
.public-hint .icon { width: 12px; height: 12px; }
.pagination { display: flex; align-items: center; gap: 7px; }
.pagination .icon-button { width: 27px; height: 27px; }
.rotate { transform: rotate(180deg); }
.file-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(177px,1fr)); padding: 20px; gap: 16px; }
.file-card { border: 1px solid #ededf2; border-radius: 15px; overflow: hidden; background: #fcfcfe; transition: box-shadow .2s; }
.file-card:hover { box-shadow: 0 4px 14px #17223d0a; }
.file-card-main { display: flex; flex-direction: column; align-items: flex-start; padding: 20px 16px 15px; width: 100%; text-align: left; min-width: 0; }
.file-card-main>.file-type-icon { width: 56px; height: 65px; flex-basis: 65px; border-radius: 11px; align-self: center; margin: 13px 0 22px; }
.file-card-main>.file-type-icon .icon { width: 34px; height: 34px; }
.file-card-main>.file-type-icon.folder { height: 42px; flex-basis: 42px; margin: 28px 0 30px; border-radius: 4px 8px 8px 8px; }
.file-card-main>.file-type-icon.folder::before { width: 28px; height: 9px; top: -7px; }
.file-card-main .entry-text { width: 100%; }
.file-card-main .entry-label { font-size: 11px; }
.file-card-footer { display: flex; justify-content: space-between; align-items: center; gap: 4px; padding: 8px 12px; border-top: 1px solid #ededf2; color: #898990; font-size: 10px; background: #fff; }
.loading-state, .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; padding: 32px; min-height: 276px; text-align: center; color: #7e7e85; font-size: 12px; }
.spinner { width: 24px; height: 24px; border: 2px solid #e8edf4; border-top-color: #0071e3; border-radius: 50%; animation: spin .8s linear infinite; }
.empty-icon { width: 70px; height: 70px; display: grid; place-items: center; background: #f0f4fa; color: #99b0ca; border-radius: 23px; margin-bottom: 2px; }
.empty-icon .icon { width: 34px; height: 34px; stroke-width: 1.2; }
.empty-state h3 { font-size: 17px; font-weight: 500; color: #5b6675; margin: 0; }
.empty-state p { font-size: 12px; margin: 0; line-height: 1.9; max-width: 360px; }
.empty-state .button { margin-top: 5px; }
.page-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid #dedee4; padding: 24px 0 27px; margin-top: 30px; color: #86868b; font-size: 10px; }
.footer-dot { padding: 0 7px; }
.text-button { display: inline-flex; align-items: center; gap: 5px; padding: 2px 0; color: #6e6e73; font-size: 11px; }
.text-button:hover { color: #0066cc; }
.text-button .icon { width: 13px; height: 13px; }

/* Dialogs and transfers */
.modal { background: #fff; color: var(--ink); width: min(448px,calc(100% - 32px)); max-height: calc(100dvh - 40px); overflow-y: auto; border: 1px solid #ffffffb3; border-radius: 25px; padding: 36px; box-shadow: 0 28px 90px #00000026; }
.modal::backdrop { background: #141b2c40; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.modal[open] { animation: appear .2s ease-out; }
.modal-close { position: absolute; top: 17px; right: 17px; border-radius: 50%; background: #f0f0f4; color: #707076; width: 29px; height: 29px; }
.modal-symbol { display: grid; place-items: center; width: 52px; height: 52px; background: #edf4fe; color: #4485d0; border-radius: 17px; margin-bottom: 24px; }
.modal-symbol .icon { width: 26px; height: 26px; stroke-width: 1.5; }
.modal h2 { margin: 11px 0 10px; font-size: 27px; font-weight: 650; letter-spacing: -1px; }
.modal-description { color: #7d7d84; font-size: 12px; line-height: 1.9; margin: 0 0 24px; overflow-wrap: anywhere; }
.modal .eyebrow { font-size: 8px; letter-spacing: 1.7px; color: #8c8c92; }
.field-label { display: block; color: #67676e; font-size: 11px; margin: 22px 0 8px; }
.modal input { display: block; width: 100%; height: 46px; border: 1px solid #d2d2d7; border-radius: 10px; padding: 11px 13px; background: #fff; font-size: 14px; }
.modal input::placeholder { color: #a0a0a6; font-size: 12px; }
.password-field { position: relative; }
.password-field input { padding-right: 45px; }
.password-field .icon-button { position: absolute; right: 7px; top: 7px; }
.form-error { color: #bf3a32; font-size: 11px; line-height: 1.7; min-height: 18px; margin: 12px 0; }
.modal .button { min-height: 42px; }
.modal-footnote { display: flex; justify-content: center; align-items: center; gap: 5px; color: #8d8d94; font-size: 10px; margin-top: 23px; }
.modal-footnote .icon { width: 13px; height: 13px; }
.modal-actions { display: flex; gap: 11px; justify-content: flex-end; margin-top: 25px; }
.modal-actions .button { flex: 1; }
.danger-symbol { background: #fff0ee; color: #c4675c; }
.break-word { overflow-wrap: anywhere; }
.file-details { margin: 27px 0; font-size: 12px; }
.file-details>div { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 17px; }
.file-details dt { color: #909098; flex-shrink: 0; }
.file-details dd { text-align: right; margin: 0; color: #56565e; overflow-wrap: anywhere; }
#detail-icon .file-type-icon { width: 53px; height: 60px; margin-bottom: 14px; border-radius: 10px; }
#detail-icon .icon { width: 31px; height: 31px; }
.upload-modal { width: min(566px,calc(100% - 32px)); }
.upload-heading { display: flex; align-items: center; justify-content: space-between; }
.upload-heading .modal-symbol { flex-shrink: 0; margin-left: 20px; }
.upload-list { max-height: 320px; overflow: auto; margin: 5px -8px; padding: 0 8px; }
.upload-item { padding: 16px 0; border-bottom: 1px solid #ededf2; }
.upload-item-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; font-size: 12px; }
.upload-item-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #555561; }
.upload-item-status { flex-shrink: 0; font-size: 10px; color: #81818a; }
.upload-progress { height: 4px; border-radius: 5px; background: #e8eff8; margin-top: 12px; overflow: hidden; }
.upload-progress>span { display: block; height: 100%; width: 0; background: #0071e3; transition: width .2s; }
.upload-item[data-status="error"] .upload-item-status { color: #bf3a32; }
.upload-item[data-status="error"] .upload-progress>span { background: #c26b60; }
.upload-item-error { color: #b95a50; font-size: 10px; line-height: 1.7; margin: 8px 0 0; overflow-wrap: anywhere; }
.upload-notice { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #84848c; line-height: 1.7; margin-top: 21px; }
.upload-notice .icon { width: 13px; height: 13px; }
.upload-cancel-note { font-size: 11px; color: #7c6951; line-height: 1.8; background: #fff8eb; border-radius: 8px; padding: 10px 12px; }
.drop-overlay { position: fixed; inset: 15px; z-index: 60; border: 2px dashed #8ab7e8; border-radius: 28px; display: grid; place-items: center; background: #eff6ffed; backdrop-filter: blur(12px); pointer-events: none; text-align: center; }
.drop-overlay .icon { width: 65px; height: 65px; color: #438bdc; stroke-width: 1.3; }
.drop-overlay h2 { font-size: 30px; font-weight: 600; letter-spacing: -1px; color: #1e4e88; }
.drop-overlay p { color: #7896b8; font-size: 13px; }
.toast-region { position: fixed; bottom: 28px; left: calc(50% + 106px); transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 32px); pointer-events: none; }
.toast { display: flex; align-items: center; gap: 9px; font-size: 12px; line-height: 1.8; background: #252933ed; color: white; border: 1px solid #ffffff1a; border-radius: 13px; padding: 12px 19px; box-shadow: 0 8px 25px #161f3b26; animation: appear .2s ease-out; backdrop-filter: blur(16px); }
.toast .icon { width: 16px; height: 16px; }
.toast.error { background: #a44238f0; }
.about-content p { font-size: 12px; line-height: 1.95; color: #7e7e86; margin: 22px 0; }
.about-content strong { font-weight: 600; color: #44444b; }
.about-content+.button { margin-top: 12px; }
.noscript-notice { position: fixed; bottom: 0; left: 0; right: 0; padding: 16px; background: #fff0ce; z-index: 100; text-align: center; }
body:has(dialog[open]), body.sidebar-open { overflow: hidden; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes appear { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.page-heading, .hero, .category-cards, .admin-upload, .files-section { animation: appear .45s ease-out both; }
.hero, .admin-upload { animation-delay: .03s; }
.category-cards { animation-delay: .06s; }

@media (min-width: 1650px) {
  main { padding-top: 55px; }
  .hero { min-height: 362px; }
  .hero-copy { padding: 42px 50px; }
  .hero-art { margin-right: 60px; transform: scale(1.08); transform-origin: center; }
  .art-caption { bottom: 31px; }
  .admin-upload { min-height: 340px; }
  .category-card { min-height: 115px; }
}
@media (max-width: 1250px) {
  :root { --sidebar: 190px; }
  .topbar { gap: 20px; padding: 0 26px; }
  .brand { min-width: 143px; }
  .public-badge { display: none; }
  main { padding: 36px 30px 0; }
  .sidebar { padding-left: 12px; padding-right: 12px; }
  .hero-copy { padding: 31px 32px; }
  .hero-art { flex-basis: 340px; width: 340px; margin-right: 8px; transform: scale(.88); transform-origin: right center; }
  .category-cards { gap: 12px; }
  .category-card { padding: 18px 14px; gap: 10px; }
  .category-icon { width: 36px; height: 42px; border-radius: 10px; }
  .category-icon .icon { width: 23px; height: 23px; }
  .category-copy strong { font-size: 12px; }
  .category-arrow { display: none; }
  .admin-upload { padding: 33px 31px; }
  .admin-upload-action { padding: 0 8px; }
  .toast-region { left: calc(50% + 95px); }
}
@media (max-width: 1020px) {
  :root { --sidebar: 177px; --header: 67px; }
  .topbar { padding: 0 23px; }
  .top-location { display: none; }
  .brand { min-width: 136px; }
  .brand strong { font-size: 18px; }
  .sidebar-heading small { display: none; }
  .sidebar { padding: 30px 10px 20px; }
  .sidebar-heading { padding: 0 13px; }
  .space-label { font-size: 9px; margin-left: 13px; }
  .nav-item { gap: 10px; padding-left: 13px; padding-right: 13px; }
  .sidebar-footer { font-size: 7px; }
  main { padding: 30px 24px 0; }
  .heading-note { display: none; }
  .hero-copy { padding: 30px 28px; }
  .hero h2 { font-size: 36px; }
  .hero-art { position: absolute; right: 0; top: 0; bottom: 0; width: 360px; transform: scale(.75); transform-origin: right center; margin-right: -4px; }
  .hero-copy { flex: initial; }
  .hero-copy>p { max-width: 225px; }
  .hero { min-height: 321px; }
  .category-card { min-height: 96px; padding: 15px 11px; gap: 8px; }
  .category-icon { width: 31px; height: 38px; }
  .category-copy strong { font-size: 11px; }
  .category-copy small { font-size: 9px; }
  .category-cards { gap: 9px; }
  .file-controls { gap: 6px; }
  .files-toolbar { flex-wrap: wrap; gap: 15px; }
  .files-heading h2 { font-size: 20px; }
  .file-controls .button { padding: 7px 10px; }
  .file-table th:first-child, .file-table td:first-child { padding-left: 17px; }
  .file-table th, .file-table td { padding-left: 10px; padding-right: 10px; }
  .file-table th:last-child, .file-table td:last-child { padding-right: 12px; }
  .file-table th:first-child { width: 43%; }
  .file-table th:nth-child(2) { width: 14%; }
  .file-table th:nth-child(3) { width: 25%; }
  .file-table th:nth-child(4), .file-table td:nth-child(4) { display: none; }
  .file-table th:last-child { width: 18%; }
  .admin-table th:first-child { width: 34%; }
  .admin-table th:last-child { width: 27%; }
  .entry-name { gap: 10px; }
  .entry-label { font-size: 11px; }
  .public-hint { display: none; }
  .admin-upload { gap: 20px; padding: 30px 27px; min-height: 300px; }
  .admin-upload h2 { font-size: 29px; }
  .admin-upload p { max-width: 220px; }
  .admin-upload-action { padding: 0; }
  .upload-main-button { padding: 13px 19px; font-size: 13px; }
  .toast-region { left: calc(50% + 88px); }
}
@media (max-width: 760px) {
  :root { --header: 64px; --sidebar: 218px; }
  .sidebar { transform: translateX(-100%); transition: transform .22s; z-index: 55; top: var(--header); padding: 28px 16px 20px; }
  .sidebar.open { transform: translateX(0); }
  .sidebar.open+.sidebar-backdrop { display: block; position: fixed; inset: var(--header) 0 0; background: #1f263955; z-index: 54; backdrop-filter: blur(3px); }
  .topbar .mobile-menu { display: inline-flex; order: -1; }
  .topbar { padding: 0 19px; gap: 12px; }
  .brand { min-width: 0; margin-right: auto; gap: 6px; }
  .brand strong { font-size: 17px; }
  .brand-mark .icon { width: 27px; height: 27px; }
  .top-actions { gap: 8px; }
  .search-box { flex: 1; min-width: 100px; max-width: 200px; margin-left: 8px; }
  .search-box kbd { display: none; }
  .login-button { padding: 8px 12px; font-size: 10px; }
  .workspace { margin-left: 0; }
  main { padding: 30px 25px 0; }
  .page-heading { margin-bottom: 24px; }
  .page-heading h1 { font-size: 34px; }
  .hero-art { right: 8px; transform: scale(.87); }
  .hero { min-height: 337px; }
  .hero-copy { padding: 32px; }
  .hero h2 { font-size: 39px; }
  .category-card { padding: 17px 14px; gap: 11px; }
  .category-copy strong { font-size: 12px; }
  .category-cards { gap: 12px; }
  .category-icon { width: 36px; height: 43px; }
  .sidebar-heading small { display: inline; }
  .space-label { font-size: 10px; }
  .sidebar-footer { font-size: 8px; }
  .toast-region { left: 50%; }
  .admin-upload { min-height: 295px; padding: 32px; }
  .admin-upload h2 { font-size: 34px; }
  .upload-main-button { font-size: 14px; }
}
@media (max-width: 540px) {
  :root { --header: 105px; }
  .topbar { height: var(--header); flex-wrap: wrap; align-content: flex-start; gap: 0 8px; padding: 10px 17px; }
  .brand { height: 35px; flex: 1; }
  .brand strong { font-size: 18px; }
  .brand-mark .icon { width: 28px; height: 28px; }
  .mobile-menu { margin-left: -5px; width: 28px; height: 35px; }
  .top-actions { height: 35px; gap: 4px; }
  .login-button { font-size: 11px; min-height: 31px; padding: 7px 13px; }
  .login-button .icon { display: none; }
  #logout-button { width: 26px; }
  .search-box { order: 5; flex: 0 0 100%; max-width: none; min-height: 34px; margin: 11px 0 0; border-radius: 8px; }
  .search-box input { font-size: 12px; padding: 8px 0; }
  main { padding: 28px 19px 0; }
  .eyebrow { font-size: 8px; letter-spacing: 2px; }
  .page-heading h1 { font-size: 32px; letter-spacing: -1.5px; margin-top: 10px; }
  .page-heading p { font-size: 11px; }
  .hero { min-height: 412px; margin-bottom: 28px; border-radius: 22px; background: radial-gradient(ellipse at 70% 81%, #dfeeff 0, #f8fbff 43%, #fff 75%); }
  .hero-copy { width: 100%; padding: 28px 27px; }
  .hero-tag { font-size: 10px; }
  .hero h2 { font-size: 37px; line-height: 1.13; margin: 14px 0 12px; }
  .hero p { font-size: 11px; }
  .hero-link { font-size: 11px; }
  .hero-features { position: absolute; left: 27px; bottom: 24px; font-size: 9px; gap: 10px; margin: 0; }
  .hero-features .icon { width: 12px; height: 12px; }
  .hero-art { width: 400px; height: 330px; top: auto; bottom: 10px; right: -10px; transform: scale(.63); transform-origin: right bottom; margin: 0; }
  .art-caption { display: none; }
  .art-halo { box-shadow: 0 0 0 35px #d9e4f315; }
  .category-section-heading { margin-bottom: 14px; gap: 8px; }
  .category-section-heading h2 { font-size: 18px; }
  .category-section-heading>span { font-size: 11px; }
  .category-cards { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; margin-bottom: 30px; }
  .category-card { min-height: 91px; padding: 17px 16px; gap: 12px; border-radius: 17px; }
  .category-icon { width: 37px; height: 43px; }
  .category-copy strong { font-size: 12px; }
  .category-copy small { font-size: 10px; }
  .category-copy { gap: 8px; }
  .admin-upload { flex-direction: column; align-items: stretch; gap: 22px; padding: 29px 27px; margin-bottom: 28px; border-radius: 22px; }
  .admin-upload h2 { font-size: 29px; }
  .admin-upload p { max-width: none; font-size: 11px; }
  .upload-destination { margin-top: 18px; font-size: 10px; }
  .admin-upload-action { align-items: stretch; gap: 12px; }
  .upload-orb { display: none; }
  .upload-main-button { min-height: 48px; font-size: 14px; }
  .admin-upload-action>span:last-child { text-align: center; font-size: 9px; }
  .files-heading h2 { font-size: 20px; }
  .files-heading { gap: 8px; }
  .files-heading>span { font-size: 9px; }
  .files-toolbar { gap: 13px; margin-bottom: 16px; }
  .file-controls { gap: 5px; margin-left: auto; }
  .sort-label select { max-width: 85px; font-size: 10px; padding: 6px 3px; }
  .view-switch { padding: 2px; }
  .view-switch .icon-button { width: 25px; height: 25px; }
  .refresh-button { width: 25px; height: 28px; }
  .file-controls:has(#upload-button:not([hidden])) { width: 100%; flex-wrap: wrap; }
  .file-controls:has(#upload-button:not([hidden])) .sort-label { margin-left: auto; }
  .file-controls:has(#upload-button:not([hidden])) .view-switch { margin-left: auto; }
  .file-controls:has(#upload-button:not([hidden])) .refresh-button { display: none; }
  .file-controls .button { min-height: 32px; font-size: 10px; padding: 6px 10px; }
  .file-content { border-radius: 15px; }
  .file-table th { font-size: 9px; padding: 14px 8px; }
  .file-table th:first-child { width: 62%; padding-left: 16px; }
  .file-table th:nth-child(2) { width: 18%; }
  .file-table th:nth-child(3), .file-table td:nth-child(3) { display: none; }
  .file-table th:last-child { width: 20%; padding-right: 16px; }
  .file-table td { font-size: 10px; height: 73px; padding: 11px 6px; }
  .file-table td:first-child { padding-left: 16px; }
  .file-table td:last-child { padding-right: 10px; }
  .file-type-icon { width: 29px; flex-basis: 29px; height: 35px; }
  .file-type-icon .icon { width: 19px; height: 19px; }
  .file-type-icon.folder { height: 24px; }
  .entry-name { gap: 10px; }
  .entry-label { font-size: 11px; }
  .entry-subtitle { font-size: 8px; }
  .row-info { display: none; }
  .row-actions { gap: 0; }
  .row-actions .icon-button { width: 26px; }
  .admin-table th:first-child { width: 48%; }
  .admin-table th:nth-child(2) { width: 17%; }
  .admin-table th:last-child { width: 35%; }
  .list-footer { font-size: 9px; min-height: 45px; }
  .page-footer { font-size: 8px; line-height: 1.8; gap: 10px; align-items: flex-start; padding: 22px 0; margin-top: 22px; }
  .page-footer .text-button { font-size: 9px; white-space: nowrap; padding: 0; }
  .footer-dot { padding: 0 3px; }
  .file-grid { padding: 12px; gap: 11px; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .file-card-main { padding: 16px 12px; }
  .file-card-footer { padding: 7px 9px; flex-wrap: wrap; }
  .file-card-footer>.row-actions { margin-left: auto; }
  .file-card .row-actions .icon-button { width: 24px; }
  .modal { padding: 30px 26px; border-radius: 22px; }
  .modal h2 { font-size: 24px; }
  .modal-actions { gap: 9px; }
  .modal-actions .button { padding: 8px 12px; }
  .upload-notice { font-size: 9px; }
  .toast { font-size: 11px; }
  .loading-state, .empty-state { min-height: 260px; padding: 27px; }
  .empty-state h3 { font-size: 16px; }
  .empty-state p { font-size: 11px; }
  .folder-path { font-size: 10px; }
}
@media (max-width: 359px) {
  main { padding-left: 15px; padding-right: 15px; }
  .topbar { padding-left: 13px; padding-right: 13px; }
  .category-card { padding: 15px 12px; gap: 9px; }
  .category-copy strong { font-size: 11px; }
  .category-icon { width: 32px; height: 39px; }
  .hero-copy { padding-left: 24px; }
  .hero-art { right: -27px; transform: scale(.56); }
  .hero-features { left: 24px; bottom: 22px; }
  .page-heading h1 { font-size: 29px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}