:root {
  --bg: #030a10;
  --panel: #081723;
  --panel-strong: #0b1a27;
  --line: #1d3445;
  --line-soft: #123044;
  --text: #f0f6fc;
  --muted: #a2bdd5;
  --dim: #6b879d;
  --blue: #20a5ff;
  --blue-deep: #087cf1;
  --cyan: #8bd8ff;
  --green: #4ed28d;
  --purple: #a681ff;
  --amber: #ffbd69;
  --danger: #ff9eab;
  font-family: "Segoe UI", Inter, system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); }
body.auth-pending { min-height: 100vh; display: grid; place-items: center; background: #02080e; }
.auth-loading { color: #a8dfff; font-size: 14px; letter-spacing: .2px; }
.auth-loading[hidden] { display: none; }
#skyApp[hidden] { display: none !important; }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .7;
  background:
    radial-gradient(circle at 84% 8%, rgba(30, 126, 212, .24), transparent 22%),
    radial-gradient(circle at 18% 82%, rgba(7, 67, 115, .23), transparent 28%),
    radial-gradient(circle at 76% 76%, rgba(18, 91, 144, .13), transparent 20%);
}

.app-shell { position: relative; display: flex; min-height: 100vh; background: linear-gradient(120deg, #02070b 0%, #06121b 48%, #030a10 100%); }
.sidebar { width: 264px; min-height: 100vh; padding: 35px 22px 22px; border-right: 1px solid var(--line); background: rgba(2, 11, 18, .88); display: flex; flex-direction: column; position: sticky; top: 0; z-index: 2; }
.brand-block { padding: 0 12px 30px; }
.wordmark { font-size: 37px; line-height: 38px; font-weight: 200; letter-spacing: 2px; }
.product-label { margin-left: 21px; color: #9bcaf0; font-size: 9px; letter-spacing: 5px; font-weight: 600; }
.brand-caption { margin: 18px 0 0; color: var(--muted); font-size: 12px; }
.primary-button, .secondary-button, .outline-button, .text-button, .link-button, .icon-button, .nav-item, .folder-link, .folder-card, .mobile-nav-item, .row-menu { border: 0; background: transparent; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 45px; border-radius: 16px; color: #f2fbff; background: linear-gradient(135deg, #0bb4ff, #0878ef); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 7px 22px rgba(0, 113, 255, .2); font-size: 14px; font-weight: 600; }
.compose-button { width: 100%; gap: 10px; margin-bottom: 24px; padding: 0 18px; border: 1px solid rgba(157, 224, 255, .35); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.compose-button:hover { border-color: rgba(195, 239, 255, .75); background: linear-gradient(135deg, #18bdff, #0a82f5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 9px 26px rgba(0, 137, 255, .28); transform: translateY(-1px); }
.button-icon { display: grid; flex: 0 0 auto; width: 25px; height: 25px; margin: 0; border: 1px solid rgba(232, 249, 255, .9); border-radius: 9px; place-items: center; color: #fff; background: rgba(3, 72, 132, .32); font-size: 19px; font-weight: 300; line-height: 1; }
.main-nav { display: grid; gap: 4px; }
.nav-item { display: flex; align-items: center; min-height: 41px; padding: 0 13px; border-radius: 12px; color: var(--muted); text-align: left; font-size: 13px; }
.nav-item:hover, .nav-item.active { color: var(--text); background: linear-gradient(90deg, rgba(7, 99, 155, .8), rgba(7, 52, 83, .62)); border: 1px solid #0b608f; }
.sidebar-section { margin-top: 31px; }
.section-label, .eyebrow { color: #80cfff; font-size: 9px; letter-spacing: 2.5px; }
.section-label { padding: 0 13px 11px; color: var(--dim); }
.folder-link { display: flex; align-items: center; width: 100%; min-height: 38px; padding: 0 13px; color: var(--muted); text-align: left; font-size: 12px; border-radius: 10px; }
.folder-link:hover { background: rgba(14, 76, 112, .28); color: var(--text); }
.folder-count { margin-left: auto; color: var(--dim); font-size: 10px; }
.storage-card { margin-top: auto; padding: 15px; border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(135deg, rgba(9, 34, 53, .92), rgba(6, 21, 32, .94)); }
.storage-card-top, .storage-detail, .summary-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.storage-card-top { font-size: 12px; color: var(--text); }
.storage-card-top span:last-child { color: var(--cyan); }
.progress-track, .large-progress { height: 5px; overflow: hidden; border-radius: 5px; background: #0a2536; }
.progress-track { margin: 13px 0 8px; }
.progress-value { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #078bff, #46c6ff); box-shadow: 0 0 10px rgba(32, 165, 255, .7); }
.storage-detail { color: var(--muted); font-size: 10px; }
.text-button, .link-button { color: var(--cyan); font-size: 11px; }
.text-button { margin-top: 13px; padding: 0; }
.sidebar-footer { margin: 20px 10px 0; color: var(--dim); font-size: 9px; letter-spacing: 1.1px; }
.status-dot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px rgba(78, 210, 141, .7); }

.main-content { flex: 1; min-width: 0; }
.topbar { min-height: 76px; padding: 14px 40px; border-bottom: 1px solid rgba(29, 52, 69, .78); display: flex; align-items: center; gap: 24px; background: rgba(2, 11, 18, .5); }
.search-box { display: flex; align-items: center; gap: 10px; width: min(440px, 45vw); min-height: 42px; padding: 0 14px; border: 1px solid #24465c; border-radius: 13px; background: rgba(11, 31, 45, .86); }
.search-box:focus-within { border-color: #168bd0; box-shadow: 0 0 0 3px rgba(16, 142, 218, .13); }
.search-icon { color: var(--cyan); font-size: 23px; line-height: 1; }
.search-box input { width: 100%; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 12px; }
.search-box input::placeholder { color: #89a6bc; }
.clear-search { display: grid; flex: 0 0 auto; width: 22px; height: 22px; border: 0; border-radius: 7px; place-items: center; color: var(--dim); background: transparent; font-size: 17px; }.clear-search:hover { color: var(--text); background: rgba(19, 80, 113, .38); }.clear-search[hidden] { display: none; }
.topbar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.icon-button { width: 38px; height: 38px; color: var(--muted); font-size: 19px; border-radius: 11px; }
.icon-button:hover { color: var(--cyan); background: rgba(19, 80, 113, .32); }
.user-menu { display: flex; align-items: center; gap: 10px; margin-left: 14px; padding-left: 16px; border-left: 1px solid var(--line); }
.avatar { display: grid; width: 34px; height: 34px; border: 1px solid #4eb7ff; border-radius: 50%; place-items: center; color: #fff; font-size: 11px; background: linear-gradient(135deg, #1472cf, #16428a); }
.user-copy { display: grid; gap: 3px; min-width: 103px; }
.user-copy strong { font-size: 11px; font-weight: 500; }
.user-copy span, .chevron { color: var(--dim); font-size: 9px; }
.chevron { font-size: 17px; }
.mobile-brand { display: none; }
.connection-banner { display: flex; align-items: center; gap: 10px; margin: 12px 40px 0; padding: 10px 13px; border: 1px solid #72592a; border-radius: 13px; color: #ffe1a6; background: rgba(72, 49, 15, .52); }.connection-banner[hidden] { display: none; }.connection-banner > span:nth-child(2) { min-width: 0; flex: 1; }.connection-banner strong, .connection-banner small { display: block; }.connection-banner strong { font-size: 10px; font-weight: 500; }.connection-banner small { margin-top: 3px; color: #c8aa75; font-size: 9px; }.connection-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #ffbd69; box-shadow: 0 0 9px rgba(255, 189, 105, .7); }.connection-banner .icon-button { width: 28px; height: 28px; color: #e5c98e; font-size: 18px; }
.content-scroll { max-width: 1480px; margin: 0 auto; padding: 50px 58px 26px; }
.welcome-row, .section-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
h1, h2, p { margin: 0; }
h1 { margin-top: 12px; font-size: clamp(29px, 3vw, 44px); line-height: 1.08; letter-spacing: -.9px; font-weight: 300; }
h2 { margin-top: 8px; font-size: 23px; line-height: 1.1; font-weight: 400; }
.lead { max-width: 590px; margin-top: 13px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.secondary-button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid #2c6c8c; border-radius: 22px; color: #b9e5ff; font-size: 12px; background: rgba(7, 43, 66, .66); }
.secondary-button:hover { border-color: #44bfff; background: rgba(9, 74, 111, .7); }
.secondary-button span { font-size: 18px; font-weight: 300; }
.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 37px; }
.summary-card { min-height: 155px; padding: 19px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(140deg, rgba(10, 28, 42, .94), rgba(6, 18, 27, .78)); }
.summary-action { width: 100%; text-align: left; cursor: pointer; }.summary-action:hover { border-color: #28749a; background: linear-gradient(140deg, rgba(12, 39, 57, .96), rgba(6, 18, 27, .82)); transform: translateY(-2px); transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.summary-heading { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 11px; }
.summary-icon { display: grid; width: 28px; height: 28px; border: 1px solid #245776; border-radius: 10px; place-items: center; color: var(--cyan); background: #08253a; font-size: 16px; }
.summary-menu { margin-left: auto; color: var(--dim); letter-spacing: 2px; }
.summary-value { margin-top: 19px; color: var(--text); font-size: 29px; font-weight: 300; }
.summary-value small { color: var(--muted); font-size: 12px; font-weight: 400; }
.summary-bottom { margin-top: 14px; color: var(--dim); font-size: 10px; }
.positive { color: #74dca8; }
.large-progress { margin-top: 12px; }
.sync-state { color: var(--green); }
.device-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.device-chip { padding: 6px 8px; border: 1px solid #21445b; border-radius: 9px; color: var(--muted); font-size: 10px; background: rgba(5, 25, 37, .75); }
.feature-panel { position: relative; display: flex; min-height: 215px; overflow: hidden; margin-top: 23px; padding: 32px 36px; border: 1px solid #234d68; border-radius: 20px; background: linear-gradient(105deg, rgba(6, 28, 43, .94), rgba(4, 15, 25, .86)); }
.feature-panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(3, 10, 16, .15), transparent 62%); }
.panel-copy { position: relative; z-index: 1; max-width: 460px; }
.panel-copy h2 { font-size: 30px; }
.panel-copy p { margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.outline-button { display: inline-flex; align-items: center; gap: 10px; margin-top: 21px; padding: 10px 15px; border: 1px solid #2f7296; border-radius: 20px; color: #bfeaff; font-size: 11px; background: rgba(4, 25, 39, .65); }
.outline-button:hover { border-color: var(--blue); color: #fff; }
.outline-button span { color: var(--blue); font-size: 16px; }
.drop-note { display: inline-flex; align-items: center; gap: 9px; min-height: 38px; margin-top: 13px; padding: 7px 10px; border: 1px dashed #2b6a89; border-radius: 12px; color: var(--muted); background: rgba(4, 22, 35, .48); cursor: pointer; }.drop-note:hover, .drop-note:focus-visible, .drop-note.drag-active { border-color: var(--cyan); color: var(--text); background: rgba(9, 61, 88, .65); outline: 0; box-shadow: 0 0 0 3px rgba(32, 165, 255, .12); }.drop-note-icon { display: grid; width: 24px; height: 24px; border: 1px solid #3486ae; border-radius: 8px; place-items: center; color: var(--cyan); font-size: 16px; }.drop-note strong, .drop-note small { display: block; }.drop-note strong { font-size: 10px; font-weight: 500; }.drop-note small { margin-top: 2px; color: var(--dim); font-size: 8px; }
.orbit-art { position: absolute; right: 8%; top: 50%; width: 280px; height: 190px; transform: translateY(-50%); opacity: .93; }
.planet { position: absolute; right: 19px; top: 27px; width: 128px; height: 128px; border-radius: 50%; background: radial-gradient(circle at 28% 22%, #3f91d3 0, #154b7a 26%, #071d36 68%, #020811 100%); box-shadow: -17px 8px 40px rgba(15, 126, 215, .4), inset 15px -7px 28px rgba(0, 0, 0, .75); }
.planet::after { content: ""; position: absolute; inset: 12px -4px 14px 8px; border-radius: 50%; border-top: 2px solid rgba(104, 219, 255, .8); transform: rotate(-18deg); filter: blur(.4px); }
.planet span { position: absolute; inset: 32px 24px 48px 22px; border-radius: 50%; background: rgba(91, 166, 224, .22); filter: blur(10px); }
.orbit { position: absolute; width: 260px; height: 81px; border: 1px solid rgba(63, 189, 255, .5); border-radius: 50%; transform: rotate(-22deg); }
.orbit-one { top: 56px; left: 1px; }
.orbit-two { top: 59px; left: 9px; transform: rotate(25deg); border-color: rgba(49, 121, 187, .35); }
.star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #c3ebff; box-shadow: 0 0 8px #51c6ff; }
.star-one { left: 38px; top: 29px; }.star-two { right: 3px; top: 8px; }.star-three { left: 54px; bottom: 25px; }
.content-section { margin-top: 38px; }
.folders-section { padding-bottom: 8px; }
.section-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.view-switch { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 11px; background: rgba(5, 20, 30, .82); }
.view-toggle { min-height: 27px; padding: 0 9px; border: 0; border-radius: 8px; color: var(--dim); background: transparent; font-size: 10px; }
.view-toggle:hover { color: var(--cyan); }.view-toggle.active { color: #e7f7ff; background: #0a5b87; box-shadow: 0 0 12px rgba(32, 165, 255, .16); }
.sort-control { display: flex; align-items: center; gap: 6px; color: var(--dim); font-size: 10px; }
.sort-control select { min-height: 33px; padding: 0 23px 0 9px; border: 1px solid var(--line); border-radius: 10px; outline: 0; color: var(--muted); background: #071925; font-size: 10px; }
.sort-control select:focus { border-color: var(--blue); }
.link-button { padding: 0; }
.folder-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 17px; }
.folder-card { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 15px; text-align: left; background: rgba(8, 24, 35, .84); }
.folder-card:hover { border-color: #28749a; background: rgba(9, 40, 57, .88); }
.folder-card > span:nth-child(2) { min-width: 0; flex: 1; }
.folder-card strong, .folder-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-card strong { font-size: 12px; font-weight: 500; }.folder-card small { margin-top: 5px; color: var(--dim); font-size: 9px; }
.folder-card-icon { display: grid; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 11px; place-items: center; font-size: 21px; }
.folder-card-icon.blue { color: #80d6ff; background: #07365b; }.folder-card-icon.purple { color: #d0b7ff; background: #31235f; }.folder-card-icon.green { color: #8af4bc; background: #124c43; }.folder-card-icon.amber { color: #ffcf8d; background: #583d1d; }
.arrow { color: #80bcda; font-size: 17px; }
.recent-section { margin-bottom: 26px; }.file-table { margin-top: 17px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: rgba(5, 17, 26, .78); }
.photo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 17px; }
.photo-card { min-width: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; text-align: left; background: rgba(8, 24, 35, .84); }.photo-card:hover { border-color: #28749a; transform: translateY(-2px); transition: transform .18s ease, border-color .18s ease; }.photo-art { display: block; aspect-ratio: 1.35; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 70% 28%, rgba(165, 224, 255, .72) 0 2%, transparent 3%), radial-gradient(circle at 28% 34%, rgba(144, 208, 255, .5) 0 1%, transparent 2%), linear-gradient(145deg, #06223b, #0d5a7d 45%, #071525 72%, #020811); }.photo-art.photo-two { background: radial-gradient(circle at 33% 27%, #ffd88c 0 2%, transparent 3%), linear-gradient(155deg, #20132a, #ae5a65 45%, #101729 78%); }.photo-art.photo-three { background: radial-gradient(circle at 65% 28%, #fff1b1 0 3%, transparent 4%), linear-gradient(145deg, #b9e5f5, #477b93 40%, #152c43 75%); }.photo-art.photo-four { background: radial-gradient(circle at 42% 32%, #d9f4ff 0 2%, transparent 3%), linear-gradient(145deg, #032b36, #159b96 42%, #072039 80%); }.photo-info { padding: 12px; }.photo-info strong, .photo-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.photo-info strong { color: var(--text); font-size: 11px; font-weight: 500; }.photo-info small { margin-top: 5px; color: var(--dim); font-size: 9px; }
.file-row { display: grid; grid-template-columns: minmax(230px, 2fr) 1.1fr 1.1fr .7fr 35px; align-items: center; min-height: 66px; padding: 0 16px; border-bottom: 1px solid #132a3b; color: var(--muted); font-size: 10px; }
.file-row:last-child { border-bottom: 0; }.file-row:hover:not(.file-header) { background: rgba(9, 43, 63, .48); }
.file-row-button { width: 100%; border: 0; text-align: left; background: transparent; }
.file-header { min-height: 38px; color: #7899b0; font-size: 9px; letter-spacing: 1.1px; text-transform: uppercase; background: rgba(10, 28, 41, .8); }
.file-name { display: flex; align-items: center; gap: 11px; min-width: 0; color: var(--text); }.file-name > span:last-child { min-width: 0; }.file-name strong, .file-name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.file-name strong { font-size: 12px; font-weight: 500; }.file-name small { margin-top: 4px; color: var(--dim); font-size: 9px; }
.file-type { display: grid; flex: 0 0 auto; width: 31px; height: 34px; border-radius: 9px; place-items: center; font-size: 8px; font-weight: 700; }.file-type.photo { color: #85dcff; font-size: 17px; background: #073a5e; }.file-type.pdf { color: #ff9da9; background: #4b2330; }.file-type.sheet { color: #93efb6; background: #124a3b; }.file-type.generic { color: #b9c8ff; background: #29335f; }
.row-menu { color: var(--dim); letter-spacing: 2px; font-size: 12px; }.empty-search { margin-top: 17px; padding: 28px; border: 1px dashed #23475e; border-radius: 16px; color: var(--muted); text-align: center; font-size: 12px; }
.file-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 17px; }
.file-grid-card { display: flex; min-height: 156px; flex-direction: column; align-items: flex-start; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; text-align: left; background: linear-gradient(145deg, rgba(10, 30, 44, .92), rgba(5, 17, 26, .82)); }
.file-grid-card:hover { border-color: #28749a; background: linear-gradient(145deg, rgba(11, 42, 60, .94), rgba(5, 20, 31, .88)); transform: translateY(-2px); transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.grid-file-icon { display: grid; width: 38px; height: 40px; border-radius: 11px; place-items: center; font-size: 9px; font-weight: 700; }.grid-file-icon.photo { color: #85dcff; font-size: 19px; background: #073a5e; }.grid-file-icon.pdf { color: #ff9da9; background: #4b2330; }.grid-file-icon.sheet { color: #93efb6; background: #124a3b; }.grid-file-icon.generic { color: #b9c8ff; background: #29335f; }
.grid-file-copy { min-width: 0; }.grid-file-copy strong, .grid-file-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.grid-file-copy strong { color: var(--text); font-size: 12px; font-weight: 500; }.grid-file-copy small { margin-top: 5px; color: var(--dim); font-size: 9px; }
.grid-file-meta { display: flex; width: 100%; justify-content: space-between; gap: 10px; margin-top: auto; color: var(--dim); font-size: 9px; }.grid-file-meta b { color: var(--muted); font-weight: 400; }
.page-footer { display: flex; justify-content: space-between; padding-top: 24px; border-top: 1px solid rgba(29, 52, 69, .7); color: #66849a; font-size: 8px; letter-spacing: 2px; }
.page-footer span:last-child { letter-spacing: .7px; }
.modal-backdrop { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px; background: rgba(0, 5, 10, .76); backdrop-filter: blur(9px); }.modal-backdrop[hidden] { display: none; }.dialog { width: min(100%, 410px); padding: 27px; border: 1px solid #315e7a; border-radius: 20px; background: linear-gradient(145deg, #0c2231, #06131d); box-shadow: 0 20px 70px rgba(0, 0, 0, .45); }.dialog h2 { margin-top: 10px; }.dialog p { margin-top: 10px; color: var(--muted); font-size: 12px; line-height: 1.6; }.dialog label { display: block; margin-top: 22px; margin-bottom: 8px; color: var(--muted); font-size: 11px; }.dialog input { width: 100%; min-height: 47px; padding: 0 14px; border: 1px solid #2c5972; border-radius: 13px; outline: 0; color: var(--text); background: #071925; }.dialog input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(32, 165, 255, .14); }.dialog-actions { display: flex; align-items: center; justify-content: flex-end; gap: 19px; margin-top: 22px; }.dialog-submit { padding: 0 18px; border: 0; font-size: 12px; }
.preview-dialog { width: min(100%, 540px); overflow: hidden; border: 1px solid #315e7a; border-radius: 20px; background: linear-gradient(145deg, #0c2231, #06131d); box-shadow: 0 20px 70px rgba(0, 0, 0, .45); }.preview-dialog-top { display: flex; align-items: center; justify-content: space-between; padding: 19px 22px 0; }.preview-dialog-top .icon-button { width: 30px; height: 30px; font-size: 24px; }.preview-art { height: 220px; margin: 16px 22px 0; border: 1px solid #27536d; border-radius: 15px; background: radial-gradient(circle at 71% 30%, rgba(165, 224, 255, .78) 0 2%, transparent 3%), linear-gradient(145deg, #06223b, #0d5a7d 45%, #071525 72%, #020811); }.preview-art.pdf { background: radial-gradient(circle at 50% 42%, rgba(255, 157, 169, .8), transparent 18%), linear-gradient(145deg, #411d2c, #151327 65%, #050a14); }.preview-art.sheet { background: linear-gradient(145deg, #0e4e43, #082b31 52%, #06121e); }.preview-art.generic { background: linear-gradient(145deg, #29335f, #101b38 60%, #06111c); }.preview-copy { padding: 20px 22px 0; }.preview-copy h2 { margin-top: 0; }.preview-copy p { margin-top: 7px; color: var(--muted); font-size: 12px; }.preview-details { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }.preview-details span { padding: 6px 9px; border: 1px solid #244a63; border-radius: 9px; color: var(--dim); font-size: 10px; background: rgba(5, 22, 34, .7); }.preview-dialog .dialog-actions { padding: 0 22px 22px; }
.preview-dialog .dialog-actions { flex-wrap: wrap; }
.dialog-submit:disabled { opacity: .45; cursor: not-allowed; }
.backup-dialog { width: min(100%, 560px); overflow: hidden; border: 1px solid #315e7a; border-radius: 20px; background: linear-gradient(145deg, #0c2231, #06131d); box-shadow: 0 20px 70px rgba(0, 0, 0, .45); }.backup-copy { padding: 20px 22px 0; }.backup-copy h2 { margin-top: 0; }.backup-copy p { max-width: 430px; margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.6; }.backup-list { display: grid; gap: 9px; padding: 20px 22px 0; }.backup-device { display: flex; align-items: center; gap: 11px; padding: 12px; border: 1px solid #1e4055; border-radius: 13px; background: rgba(5, 21, 32, .74); }.backup-device-icon { display: grid; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; place-items: center; font-size: 18px; }.backup-device-icon.phone { color: #8edfff; background: #073a5e; }.backup-device-icon.computer { color: #9df0bd; background: #124a3b; }.backup-device-icon.tablet { color: #d0b7ff; background: #31235f; }.backup-device-copy { min-width: 0; flex: 1; }.backup-device-copy strong, .backup-device-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.backup-device-copy strong { font-size: 11px; font-weight: 500; }.backup-device-copy small { margin-top: 4px; color: var(--dim); font-size: 9px; }.sync-pill { flex: 0 0 auto; padding: 5px 7px; border: 1px solid #1e6c58; border-radius: 8px; color: #84e8b0; background: rgba(19, 95, 71, .28); font-size: 9px; }.sync-pill.syncing { border-color: #275c82; color: var(--cyan); background: rgba(16, 75, 112, .25); }.backup-meter { margin: 18px 22px 0; padding: 13px; border: 1px solid #1e4055; border-radius: 13px; color: var(--muted); background: rgba(5, 21, 32, .6); font-size: 10px; }.backup-meter > div:first-child { display: flex; justify-content: space-between; gap: 10px; }.backup-meter strong { color: var(--cyan); font-weight: 500; }.backup-progress { height: 5px; margin-top: 12px; overflow: hidden; border-radius: 5px; background: #0a2536; }.backup-progress span { display: block; width: 72%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #078bff, #46c6ff); }.backup-dialog .dialog-actions { padding: 0 22px 22px; }
.share-dialog { width: min(100%, 490px); overflow: hidden; border: 1px solid #315e7a; border-radius: 20px; background: linear-gradient(145deg, #0c2231, #06131d); box-shadow: 0 20px 70px rgba(0, 0, 0, .45); }.share-copy { padding: 20px 22px 0; }.share-copy h2 { margin-top: 0; }.share-copy p { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.6; }.share-file-chip { display: flex; align-items: center; gap: 11px; margin: 18px 22px 0; padding: 12px; border: 1px solid #1e4055; border-radius: 13px; background: rgba(5, 21, 32, .74); }.share-file-icon { display: grid; width: 34px; height: 34px; border-radius: 10px; place-items: center; color: #8edfff; background: #073a5e; font-size: 9px; font-weight: 700; }.share-file-chip strong, .share-file-chip small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.share-file-chip strong { font-size: 11px; font-weight: 500; }.share-file-chip small { margin-top: 4px; color: var(--dim); font-size: 9px; }.share-label { display: block; margin: 18px 22px 8px; color: var(--muted); font-size: 11px; }.share-select { width: calc(100% - 44px); min-height: 43px; margin: 0 22px; padding: 0 12px; border: 1px solid #2c5972; border-radius: 12px; outline: 0; color: var(--text); background: #071925; font-size: 11px; }.share-select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(32, 165, 255, .14); }.share-note { display: flex; gap: 8px; margin: 15px 22px 0; padding: 10px 11px; border: 1px dashed #23475e; border-radius: 11px; color: var(--dim); font-size: 9px; line-height: 1.5; }.share-note span:first-child { color: var(--cyan); font-size: 13px; }.share-dialog .dialog-actions { padding: 0 22px 22px; }
.move-dialog { width: min(100%, 490px); overflow: hidden; border: 1px solid #315e7a; border-radius: 20px; background: linear-gradient(145deg, #0c2231, #06131d); box-shadow: 0 20px 70px rgba(0, 0, 0, .45); }.move-copy { padding: 20px 22px 0; }.move-copy h2 { margin-top: 0; }.move-copy p { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.6; }.move-file-chip { display: flex; align-items: center; gap: 11px; margin: 18px 22px 0; padding: 12px; border: 1px solid #1e4055; border-radius: 13px; background: rgba(5, 21, 32, .74); }.move-file-chip > span:last-child { min-width: 0; }.move-file-chip strong, .move-file-chip small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.move-file-chip strong { font-size: 11px; font-weight: 500; }.move-file-chip small { margin-top: 4px; color: var(--dim); font-size: 9px; }.move-dialog .dialog-actions { padding: 0 22px 22px; }
.notification-copy, .settings-copy { padding: 20px 22px 0; }.notification-copy h2, .settings-copy h2 { margin-top: 0; }.notification-copy p, .settings-copy p { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.6; }.notification-list { display: grid; gap: 9px; padding: 20px 22px 0; }.notification-item { display: flex; align-items: center; gap: 10px; padding: 11px; border: 1px solid #1e4055; border-radius: 13px; background: rgba(5, 21, 32, .74); }.notification-icon { display: grid; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; place-items: center; font-size: 14px; }.notification-icon.green { color: #8af4bc; background: #124c43; }.notification-icon.blue { color: #8edfff; background: #073a5e; }.notification-icon.purple { color: #d0b7ff; background: #31235f; }.notification-item > span:nth-child(2) { min-width: 0; flex: 1; }.notification-item strong, .notification-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.notification-item strong { font-size: 10px; font-weight: 500; }.notification-item small { margin-top: 4px; color: var(--dim); font-size: 9px; }.notification-item em { flex: 0 0 auto; color: var(--dim); font-size: 8px; font-style: normal; }.notification-dialog .dialog-actions { padding: 0 22px 22px; }.settings-list { display: grid; gap: 9px; padding: 20px 22px 0; }.setting-row { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #1e4055; border-radius: 13px; background: rgba(5, 21, 32, .74); }.setting-row > span { min-width: 0; flex: 1; }.setting-row strong, .setting-row small { display: block; }.setting-row strong { font-size: 10px; font-weight: 500; }.setting-row small { margin-top: 4px; color: var(--dim); font-size: 9px; line-height: 1.45; }.setting-row input { width: 18px; height: 18px; accent-color: var(--blue); }.settings-dialog .dialog-actions { padding: 0 22px 22px; }
.mobile-more-dialog { width: min(100%, 440px); overflow: hidden; padding: 0; }.mobile-more-list { display: grid; gap: 8px; padding: 20px 22px 0; }.mobile-more-label { padding: 10px 4px 2px; color: var(--dim); font-size: 8px; letter-spacing: 2px; }.mobile-more-item { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 52px; padding: 9px 11px; border: 1px solid #1e4055; border-radius: 13px; color: var(--text); text-align: left; background: rgba(5, 21, 32, .74); }.mobile-more-item:hover, .mobile-more-item:focus-visible { border-color: #28749a; background: rgba(9, 43, 63, .68); outline: 0; }.mobile-more-item > span:nth-child(2) { min-width: 0; flex: 1; }.mobile-more-item strong, .mobile-more-item small { display: block; }.mobile-more-item strong { font-size: 11px; font-weight: 500; }.mobile-more-item small { margin-top: 4px; color: var(--dim); font-size: 9px; }.mobile-more-item b { color: var(--cyan); font-size: 16px; font-weight: 400; }.mobile-more-icon { display: grid; flex: 0 0 auto; width: 31px; height: 31px; border-radius: 9px; place-items: center; color: var(--cyan); background: #073a5e; font-size: 16px; }.mobile-more-dialog .dialog-actions { padding: 0 22px 22px; }
.storage-dialog { width: min(100%, 520px); overflow: hidden; border: 1px solid #315e7a; border-radius: 20px; background: linear-gradient(145deg, #0c2231, #06131d); box-shadow: 0 20px 70px rgba(0, 0, 0, .45); }.storage-copy { padding: 20px 22px 0; }.storage-copy h2 { margin-top: 0; }.storage-copy p { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.6; }.storage-breakdown { display: grid; gap: 2px; padding: 20px 22px 0; }.storage-breakdown-row { display: grid; grid-template-columns: 1fr auto 38px; align-items: center; gap: 12px; min-height: 44px; border-bottom: 1px solid #173448; color: var(--dim); font-size: 10px; }.storage-breakdown-row:last-child { border-bottom: 0; }.storage-breakdown-row strong { color: var(--muted); font-weight: 500; }.breakdown-label { display: flex; align-items: center; gap: 8px; color: var(--text); }.breakdown-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }.breakdown-dot.photos { background: #20a5ff; box-shadow: 0 0 8px rgba(32, 165, 255, .55); }.breakdown-dot.files { background: #a681ff; }.breakdown-dot.other { background: #ffbd69; }.storage-plan { margin: 18px 22px 0; padding: 13px; border: 1px solid #1e4055; border-radius: 13px; color: var(--muted); background: rgba(5, 21, 32, .6); font-size: 10px; }.storage-plan > div:first-child { display: flex; justify-content: space-between; gap: 10px; }.storage-plan strong { color: var(--cyan); font-weight: 500; }.storage-plan-track { height: 5px; margin-top: 12px; overflow: hidden; border-radius: 5px; background: #0a2536; }.storage-plan-track span { display: block; width: 34%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #078bff, #46c6ff); }.storage-plan small { display: block; margin-top: 11px; color: var(--dim); line-height: 1.5; }.storage-dialog .dialog-actions { padding: 0 22px 22px; }
.upload-queue { position: fixed; right: 24px; bottom: 24px; z-index: 9; width: min(360px, calc(100vw - 32px)); padding: 16px; border: 1px solid #2e6f91; border-radius: 17px; background: rgba(5, 24, 37, .97); box-shadow: 0 16px 55px rgba(0, 0, 0, .4); }.upload-queue[hidden] { display: none; }.queue-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.queue-header strong { display: block; margin-top: 7px; font-size: 13px; font-weight: 500; }.queue-header .icon-button { width: 30px; height: 30px; font-size: 22px; }.queue-item { margin-top: 14px; }.queue-item-top { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 10px; }.queue-item-top strong { overflow: hidden; color: var(--text); font-size: 11px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }.queue-item-top span { flex: 0 0 auto; color: var(--cyan); }.queue-progress { height: 5px; margin-top: 8px; overflow: hidden; border-radius: 5px; background: #0a2536; }.queue-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #078bff, #46c6ff); transition: width .12s linear; }.queue-status { display: block; margin-top: 5px; color: var(--dim); font-size: 9px; }
.mobile-nav { display: none; }.toast { position: fixed; right: 24px; bottom: 24px; z-index: 8; max-width: 300px; padding: 12px 16px; border: 1px solid #277ca6; border-radius: 12px; color: #d9f3ff; background: #062337; box-shadow: 0 10px 32px rgba(0, 0, 0, .32); opacity: 0; transform: translateY(10px); pointer-events: none; transition: .22s ease; font-size: 12px; }.toast.show { opacity: 1; transform: translateY(0); }

.share-link-panel { display: flex; align-items: center; gap: 10px; margin: 12px 22px 0; padding: 10px 11px; border: 1px solid #24536d; border-radius: 11px; background: rgba(5, 27, 41, .72); }.share-link-panel[hidden] { display: none; }.share-link-panel > span { min-width: 0; flex: 1; }.share-link-panel small, .share-link-panel code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.share-link-panel small { color: var(--cyan); font-size: 8px; letter-spacing: 1.3px; }.share-link-panel code { margin-top: 5px; color: var(--muted); font-family: "Segoe UI", Inter, system-ui, sans-serif; font-size: 9px; }.share-link-panel .secondary-button { min-height: 31px; padding: 0 10px; font-size: 10px; }
.device-dialog { width: min(100%, 500px); overflow: hidden; padding: 0; }.device-choice-list { display: grid; gap: 8px; padding: 20px 22px 0; }.device-choice { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 58px; padding: 10px 11px; border: 1px solid #1e4055; border-radius: 13px; color: var(--text); text-align: left; background: rgba(5, 21, 32, .74); }.device-choice:hover, .device-choice:focus-visible { border-color: #28749a; background: rgba(9, 43, 63, .68); outline: 0; }.device-choice > span:nth-child(2) { min-width: 0; flex: 1; }.device-choice strong, .device-choice small { display: block; }.device-choice strong { font-size: 11px; font-weight: 500; }.device-choice small { margin-top: 4px; color: var(--dim); font-size: 9px; }.device-choice b { color: var(--cyan); font-size: 16px; font-weight: 400; }.device-choice-icon { display: grid; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; place-items: center; font-size: 17px; }.device-choice-icon.computer { color: #9df0bd; background: #124a3b; }.device-choice-icon.phone { color: #8edfff; background: #073a5e; }.device-choice-icon.linux { color: #ffcf8d; background: #583d1d; }.device-choice-icon.tablet { color: #d0b7ff; background: #31235f; }.device-setup-note { margin: 16px 22px 0; padding: 10px 11px; border: 1px dashed #23475e; border-radius: 11px; color: var(--dim); font-size: 9px; line-height: 1.5; }.device-dialog .dialog-actions { padding: 0 22px 22px; }
.account-dialog { width: min(100%, 430px); overflow: hidden; padding: 0; }.account-profile { display: flex; align-items: center; gap: 13px; padding: 24px 22px 0; }.account-avatar { display: grid; width: 48px; height: 48px; border: 1px solid #4eb7ff; border-radius: 50%; place-items: center; color: #fff; font-size: 14px; background: linear-gradient(135deg, #1472cf, #16428a); }.account-profile h2 { margin: 0; font-size: 20px; }.account-profile p { margin-top: 5px; color: var(--muted); font-size: 10px; }.account-section-label { padding: 0 2px 8px; color: var(--dim); font-size: 8px; letter-spacing: 2px; }.account-app-switcher { display: grid; gap: 8px; padding: 20px 22px 0; }.account-app-link { display: flex; align-items: center; gap: 10px; min-height: 51px; padding: 9px 11px; border: 1px solid #1e4055; border-radius: 13px; color: var(--text); text-decoration: none; background: rgba(5, 21, 32, .74); }.account-app-link:hover, .account-app-link:focus-visible { border-color: #28749a; background: rgba(9, 43, 63, .68); outline: 0; }.account-app-link > span:nth-child(2) { min-width: 0; flex: 1; }.account-app-link strong, .account-app-link small { display: block; }.account-app-link strong { font-size: 10px; font-weight: 500; }.account-app-link small { margin-top: 4px; color: var(--dim); font-size: 9px; }.account-app-link b { color: var(--cyan); font-size: 13px; font-weight: 500; }.account-app-link.current { border-color: #28749a; background: rgba(9, 43, 63, .68); }.account-app-icon { display: grid; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; place-items: center; font-size: 14px; }.account-app-icon.email { color: #8edfff; background: #073a5e; }.account-app-icon.sky { color: #d0b7ff; background: #31235f; }.account-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; padding: 18px 22px 0; }.account-summary span { padding: 11px; border: 1px solid #1e4055; border-radius: 12px; background: rgba(5, 21, 32, .74); }.account-summary small, .account-summary strong { display: block; }.account-summary small { color: var(--dim); font-size: 8px; }.account-summary strong { margin-top: 5px; color: var(--cyan); font-size: 11px; font-weight: 500; }.account-actions { display: grid; gap: 8px; padding: 18px 22px 0; }.account-action { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 51px; padding: 9px 11px; border: 1px solid #1e4055; border-radius: 13px; color: var(--text); text-align: left; background: rgba(5, 21, 32, .74); }.account-action:hover, .account-action:focus-visible { border-color: #28749a; background: rgba(9, 43, 63, .68); outline: 0; }.account-action > span:first-child { display: grid; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; place-items: center; color: var(--cyan); background: #073a5e; }.account-action > span:nth-child(2) { min-width: 0; flex: 1; }.account-action strong, .account-action small { display: block; }.account-action strong { font-size: 10px; font-weight: 500; }.account-action small { margin-top: 4px; color: var(--dim); font-size: 9px; }.account-action b { color: var(--cyan); font-size: 16px; font-weight: 400; }.account-dialog .dialog-actions { justify-content: space-between; padding: 0 22px 22px; }.danger-button { min-height: 45px; border: 0; border-radius: 24px; color: #fff; background: linear-gradient(135deg, #bf5368, #8a2946); box-shadow: 0 7px 22px rgba(146, 44, 78, .18); font-size: 12px; font-weight: 600; }.danger-button:hover { background: linear-gradient(135deg, #d46178, #a83556); }
@media (max-width: 720px) { .connection-banner { margin-left: 16px; margin-right: 16px; }.share-link-panel { margin-left: 16px; margin-right: 16px; }.device-choice-list { padding-left: 16px; padding-right: 16px; }.device-setup-note { margin-left: 16px; margin-right: 16px; }.device-dialog .dialog-actions { padding-left: 16px; padding-right: 16px; } }
@media (max-width: 1000px) {
  .sidebar { width: 225px; padding-left: 15px; padding-right: 15px; }
  .topbar { padding-left: 25px; padding-right: 25px; }.content-scroll { padding-left: 30px; padding-right: 30px; }.folder-grid { grid-template-columns: repeat(2, 1fr); }.orbit-art { right: 2%; opacity: .64; }
  .file-row { grid-template-columns: minmax(190px, 2fr) 1fr .9fr 35px; }.file-row > span:nth-child(4) { display: none; }.file-header > span:nth-child(4) { display: none; }.photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.file-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .app-shell { display: block; padding-bottom: 74px; }.sidebar { display: none; }.topbar { min-height: 67px; padding: 10px 16px; gap: 12px; position: sticky; top: 0; z-index: 5; background: rgba(2, 10, 16, .93); backdrop-filter: blur(14px); }.mobile-brand { display: flex; align-items: baseline; gap: 7px; min-width: 93px; }.mobile-wordmark { font-size: 20px; font-weight: 200; letter-spacing: 1.5px; }.mobile-product { color: var(--cyan); font-size: 7px; font-weight: 700; letter-spacing: 2px; }.search-box { width: auto; flex: 1; min-height: 38px; padding-left: 10px; }.search-box input { font-size: 11px; }.topbar-actions { gap: 0; }.topbar-actions .icon-button, .user-copy, .chevron { display: none; }.user-menu { margin-left: 0; padding-left: 0; border-left: 0; }.avatar { width: 30px; height: 30px; }
  .content-scroll { padding: 30px 16px 20px; }.welcome-row { align-items: flex-start; }.welcome-row .secondary-button { display: none; }.eyebrow { font-size: 8px; letter-spacing: 2px; } h1 { margin-top: 10px; font-size: 31px; } .lead { margin-top: 11px; font-size: 12px; line-height: 1.6; }
  .summary-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 25px; }.summary-card { min-height: 132px; padding: 15px; }.summary-value { margin-top: 14px; font-size: 26px; }.summary-bottom { margin-top: 11px; }.backup-dialog .preview-dialog-top, .backup-copy, .storage-dialog .preview-dialog-top, .storage-copy, .share-dialog .preview-dialog-top, .share-copy, .move-dialog .preview-dialog-top, .move-copy, .notification-dialog .preview-dialog-top, .notification-copy, .settings-dialog .preview-dialog-top, .settings-copy, .mobile-more-dialog .preview-dialog-top { padding-left: 16px; padding-right: 16px; }.backup-list, .storage-breakdown, .notification-list, .settings-list, .mobile-more-list { padding-left: 16px; padding-right: 16px; }.backup-meter, .storage-plan, .share-file-chip, .share-note, .move-file-chip { margin-left: 16px; margin-right: 16px; }.share-label { margin-left: 16px; margin-right: 16px; }.share-select { width: calc(100% - 32px); margin-left: 16px; margin-right: 16px; }.backup-dialog .dialog-actions, .storage-dialog .dialog-actions, .share-dialog .dialog-actions, .move-dialog .dialog-actions, .notification-dialog .dialog-actions, .settings-dialog .dialog-actions, .mobile-more-dialog .dialog-actions { padding-left: 16px; padding-right: 16px; }.backup-device { align-items: flex-start; }.sync-pill { margin-left: auto; }.backup-meter > div:first-child, .storage-plan > div:first-child { display: grid; gap: 5px; }
  .feature-panel { min-height: 272px; margin-top: 16px; padding: 24px 20px; }.panel-copy { max-width: 255px; }.panel-copy h2 { font-size: 25px; }.panel-copy p { font-size: 12px; }.drop-note { margin-top: 11px; }.orbit-art { right: -60px; bottom: -10px; top: auto; transform: scale(.72); transform-origin: bottom right; opacity: .72; }
  .content-section { margin-top: 28px; } h2 { font-size: 20px; }.folder-grid { grid-template-columns: 1fr; gap: 8px; }.folder-card { padding: 12px; }.section-heading-row { align-items: flex-start; flex-wrap: wrap; gap: 12px; }.section-actions { width: 100%; justify-content: space-between; }.view-toggle span { display: none; }.sort-control { margin-left: auto; }.file-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }.file-grid-card { min-height: 142px; padding: 12px; }.grid-file-copy strong { font-size: 10px; }
  .file-table { margin-left: -1px; margin-right: -1px; }.file-row { grid-template-columns: minmax(175px, 1fr) 35px; min-height: 62px; padding: 0 11px; }.file-row > span:nth-child(2), .file-row > span:nth-child(3), .file-row > span:nth-child(4), .file-header > span:nth-child(2), .file-header > span:nth-child(3), .file-header > span:nth-child(4) { display: none; }.file-header { min-height: 32px; }.file-header > span:first-child { display: block; }.file-name strong { font-size: 11px; }.page-footer { font-size: 7px; }.photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }.photo-info { padding: 10px; }.photo-info strong { font-size: 10px; }.preview-art { height: 160px; margin-left: 16px; margin-right: 16px; }.preview-dialog-top, .preview-copy { padding-left: 16px; padding-right: 16px; }.preview-dialog .dialog-actions { padding-left: 16px; padding-right: 16px; }
  .mobile-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 7; display: flex; height: 70px; border-top: 1px solid var(--line); background: rgba(3, 14, 22, .96); backdrop-filter: blur(15px); }.mobile-nav-item { display: grid; flex: 1; place-items: center; align-content: center; gap: 4px; color: var(--dim); font-size: 9px; }.mobile-nav-item span { font-size: 19px; }.mobile-nav-item.active { color: var(--blue); }.mobile-nav-item.upload-mobile span { display: grid; width: 32px; height: 32px; border: 1px solid #55c8ff; border-radius: 50%; place-items: center; color: #fff; background: linear-gradient(135deg, #0aabff, #086dfa); }
  .toast { right: 16px; bottom: 84px; left: 16px; max-width: none; }.upload-queue { right: 16px; bottom: 84px; left: 16px; width: auto; }
}

/* Sky's home view is spacious; browsing views stay focused on the selected files. */
.home-only { transition: opacity .18s ease, transform .18s ease; }
.main-content.browse-mode .home-only { display: none; }
.main-content:not(.browse-mode) .recent-section { display: none; }
.main-content.browse-mode .content-scroll { padding-top: 34px; }
.main-content.browse-mode .recent-section { margin-top: 0; }
.hero-panel { position: relative; display: flex; min-height: 250px; overflow: hidden; margin-top: 0; padding: 34px 40px; border: 1px solid #234d68; border-radius: 20px; background: linear-gradient(105deg, rgba(6, 28, 43, .94), rgba(4, 15, 25, .86)); }
.hero-panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(3, 10, 16, .08), transparent 62%); }
.hero-copy { position: relative; z-index: 1; max-width: 650px; }
.hero-copy .lead { max-width: 600px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
.hero-actions .outline-button { margin-top: 0; }
.hero-panel .drop-note { margin-top: 15px; }
.hero-panel { min-height: 218px; padding-top: 29px; padding-bottom: 29px; }
.hero-drop-note { position: absolute; right: 38px; bottom: 29px; z-index: 3; margin-top: 0 !important; }
.hero-panel.drag-active { border-color: var(--cyan); background: linear-gradient(105deg, rgba(8, 55, 82, .98), rgba(5, 24, 38, .94)); box-shadow: 0 0 0 4px rgba(32, 165, 255, .11), 0 18px 50px rgba(0, 77, 126, .18); }
.hero-panel.drag-active .drop-note { border-color: var(--cyan); color: var(--text); background: rgba(9, 61, 88, .72); }
.sidebar-summary-grid { display: grid; gap: 8px; margin-top: 18px; }
.sidebar-summary-grid .summary-card { min-height: 0; padding: 11px 12px; border-radius: 13px; }
.sidebar-summary-grid .summary-heading { gap: 7px; font-size: 10px; }
.sidebar-summary-grid .summary-icon { width: 23px; height: 23px; border-radius: 8px; font-size: 13px; }
.sidebar-summary-grid .summary-value { margin-top: 8px; font-size: 20px; }
.sidebar-summary-grid .summary-value small { font-size: 10px; }
.sidebar-summary-grid .summary-bottom { margin-top: 6px; font-size: 8px; }
.sidebar-summary-grid .summary-bottom span:last-child { color: var(--dim); }
.sidebar-summary-grid .large-progress { margin-top: 8px; }
.sidebar-summary-grid .device-list { gap: 4px; margin-top: 8px; }
.sidebar-summary-grid .device-chip { padding: 4px 5px; border-radius: 7px; font-size: 8px; }
.root-file-card { border-color: #24465e; background: linear-gradient(135deg, rgba(9, 30, 45, .92), rgba(6, 19, 29, .88)); }
.root-file-card:hover, .root-file-card.dragging { border-color: var(--cyan); background: rgba(9, 48, 70, .9); }
.root-file-icon { display: grid; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 11px; place-items: center; color: #d7f1ff; background: #124668; font-size: 8px; font-weight: 700; }
.root-file-icon.pdf { color: #ffd2da; background: #6d2b43; }
.root-file-icon.sheet { color: #baf5d0; background: #155642; }
[data-drop-folder].drag-over { border-color: var(--cyan) !important; background: rgba(9, 68, 98, .92) !important; box-shadow: 0 0 0 3px rgba(32, 165, 255, .13); }
.folder-card-icon { position: relative; font-size: 0; }
.folder-card-icon::before { content: ""; position: absolute; left: 8px; top: 12px; width: 19px; height: 13px; border: 1.5px solid currentColor; border-radius: 3px 4px 4px 4px; background: rgba(0, 0, 0, .08); }
.folder-card-icon::after { content: ""; position: absolute; left: 10px; top: 9px; width: 9px; height: 5px; border: 1.5px solid currentColor; border-bottom: 0; border-radius: 3px 3px 0 0; background: rgba(0, 0, 0, .08); }
.folder-card-icon.system-folder-icon { font-size: 16px; }
.folder-card-icon.system-folder-icon::before, .folder-card-icon.system-folder-icon::after { display: none; }
.browse-drop-zone { display: none; align-items: center; gap: 10px; min-height: 54px; margin-top: 15px; padding: 9px 12px; border: 1px dashed #2b6a89; border-radius: 13px; color: var(--muted); background: rgba(4, 22, 35, .48); cursor: pointer; }
.main-content.browse-mode .browse-drop-zone { display: flex; }
.browse-drop-zone:hover, .browse-drop-zone:focus-visible, .browse-drop-zone.drag-active { border-color: var(--cyan); color: var(--text); background: rgba(9, 61, 88, .65); outline: 0; box-shadow: 0 0 0 3px rgba(32, 165, 255, .12); }
.browse-drop-zone strong, .browse-drop-zone small { display: block; }
.browse-drop-zone strong { font-size: 10px; font-weight: 500; }
.browse-drop-zone small { margin-top: 2px; color: var(--dim); font-size: 8px; }
.view-description { margin-top: 6px; color: var(--dim); font-size: 10px; line-height: 1.45; }
.photo-art.has-image { background: #061522; }
.photo-art img, .preview-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
img[hidden] { display: none !important; }

@media (max-width: 1000px) {
  .sidebar-summary-grid .device-chip { font-size: 7px; }
  .hero-panel { padding-right: 30px; }
  .hero-drop-note { right: 27px; }
}

@media (max-width: 720px) {
  .hero-panel { min-height: 292px; margin-top: 0; padding: 25px 20px; }
  .hero-copy { max-width: 280px; }
  .hero-copy .lead { font-size: 12px; line-height: 1.6; }
  .hero-panel { min-height: 244px; padding-top: 23px; padding-bottom: 22px; }
  .hero-panel .orbit-art { right: -60px; top: 6px; bottom: auto; transform: scale(.64); transform-origin: top right; opacity: .68; }
  .hero-actions { margin-top: 16px; }
  .hero-actions .secondary-button { min-height: 36px; padding: 0 12px; }
  .hero-actions .outline-button { padding: 8px 11px; }
  .hero-drop-note { position: relative; right: auto; bottom: auto; width: fit-content; margin-top: 14px !important; }
  .main-content.browse-mode .content-scroll { padding-top: 25px; }
}

/* Sync Center */
.sync-center[hidden] { display: none; }
.main-content.sync-mode .home-only,
.main-content.sync-mode .recent-section { display: none; }
.main-content.sync-mode .content-scroll { padding-top: 34px; }
.sync-center { max-width: 1040px; margin: 0 auto; }
.sync-center-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.sync-center-heading h1 { margin-top: 10px; }
.sync-center-heading .lead { max-width: 610px; margin-top: 10px; }
.sync-new-button { flex: 0 0 auto; white-space: nowrap; }
.sync-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.sync-stat-card { display: flex; align-items: center; gap: 12px; min-height: 86px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, rgba(9, 31, 46, .9), rgba(5, 17, 27, .84)); }
.sync-stat-icon { display: grid; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 11px; place-items: center; color: #9fe8ff; background: #073a5e; font-size: 17px; }
.sync-stat-icon.purple { color: #d0b7ff; background: #31235f; }
.sync-stat-icon.amber { color: #ffcf8d; background: #583d1d; }
.sync-stat-card small, .sync-stat-card strong { display: block; }
.sync-stat-card small { color: var(--dim); font-size: 8px; letter-spacing: 1.3px; }
.sync-stat-card strong { margin-top: 7px; color: var(--text); font-size: 16px; font-weight: 500; }
.sync-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-top: 36px; }
.sync-section-heading h2 { margin-top: 9px; }
.sync-note { color: var(--dim); font-size: 9px; letter-spacing: .5px; }
.sync-plan-list { display: grid; gap: 12px; margin-top: 17px; }
.sync-plan-card { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: start; gap: 15px; padding: 18px; border: 1px solid var(--line); border-radius: 17px; background: rgba(6, 22, 34, .82); }
.sync-plan-card:hover { border-color: #28749a; background: rgba(8, 31, 46, .92); }
.sync-plan-icon { display: grid; width: 38px; height: 38px; border: 1px solid #286486; border-radius: 11px; place-items: center; color: var(--cyan); background: #073a5e; font-size: 17px; }
.sync-plan-icon.backup { border-color: #76582f; color: #ffcf8d; background: #583d1d; }
.sync-plan-main, .sync-plan-route { min-width: 0; }
.sync-plan-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; min-width: 0; }
.sync-plan-title-row h3 { overflow: hidden; color: var(--text); font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.sync-plan-title-row p { margin-top: 7px; color: var(--muted); font-size: 10px; }
.sync-status { flex: 0 0 auto; padding: 5px 7px; border: 1px solid #76582f; border-radius: 7px; color: #ffcf8d; background: rgba(88, 61, 29, .28); font-size: 8px; white-space: nowrap; }
.sync-status.backup-status { border-color: #2b6683; color: var(--cyan); background: rgba(18, 84, 116, .25); }
.sync-mode-badge { flex: 0 0 auto; padding: 5px 7px; border: 1px solid #2b6683; border-radius: 7px; color: var(--cyan); background: rgba(18, 84, 116, .25); font-size: 8px; letter-spacing: .7px; text-transform: uppercase; }
.sync-mode-badge.backup { border-color: #76582f; color: #ffcf8d; background: rgba(88, 61, 29, .28); }
.sync-plan-detail { margin-top: 8px; color: var(--dim); font-size: 10px; line-height: 1.45; }
.sync-plan-route { display: flex; align-items: center; gap: 10px; margin-top: 15px; color: var(--muted); font-size: 10px; }
.sync-plan-route > span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sync-plan-route small, .sync-plan-route strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sync-plan-route small { margin-bottom: 4px; color: var(--dim); font-size: 7px; letter-spacing: .9px; }
.sync-plan-route strong { color: var(--muted); font-size: 10px; font-weight: 400; }
.sync-plan-route b { flex: 0 0 auto; color: var(--cyan); font-size: 14px; font-weight: 400; }
.sync-plan-status { display: flex; align-items: center; justify-content: flex-end; gap: 9px; min-width: 140px; }
.sync-plan-status-copy { text-align: right; }
.sync-plan-status-copy strong, .sync-plan-status-copy small { display: block; }
.sync-plan-status-copy strong { color: var(--text); font-size: 10px; font-weight: 500; }
.sync-plan-status-copy small { margin-top: 4px; color: var(--dim); font-size: 8px; }
.sync-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #ffbd69; box-shadow: 0 0 9px rgba(255, 189, 105, .52); }
.sync-status-dot.ready { background: #72dfa8; box-shadow: 0 0 9px rgba(114, 223, 168, .52); }
.sync-plan-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.sync-plan-actions .secondary-button, .sync-plan-actions .outline-button { min-height: 31px; padding: 0 10px; font-size: 9px; }
.sync-empty { margin-top: 17px; padding: 42px 20px; border: 1px dashed #2b6a89; border-radius: 17px; text-align: center; background: rgba(4, 22, 35, .42); }
.sync-empty[hidden] { display: none; }
.sync-empty-icon { display: grid; width: 42px; height: 42px; margin: 0 auto; border: 1px solid #2b6a89; border-radius: 13px; place-items: center; color: var(--cyan); font-size: 23px; background: #073a5e; }
.sync-empty h2 { margin-top: 14px; }
.sync-empty p { max-width: 440px; margin: 8px auto 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.sync-empty .secondary-button { margin-top: 18px; }
.sync-plan-dialog { width: min(100%, 500px); }
.sync-plan-dialog h2 { margin-top: 10px; }
.sync-plan-dialog p { max-width: 420px; }
.sync-plan-dialog label { margin-top: 17px; }
.sync-plan-select { width: 100%; min-height: 47px; padding: 0 13px; border: 1px solid #2c5972; border-radius: 13px; outline: 0; color: var(--text); background: #071925; font-size: 11px; }
.sync-plan-select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(32, 165, 255, .14); }

@media (max-width: 820px) {
  .sync-center-heading { align-items: flex-start; flex-direction: column; }
  .sync-new-button { margin-top: -4px; }
  .sync-plan-card { grid-template-columns: 42px minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .main-content.sync-mode .content-scroll { padding-top: 25px; }
  .sync-center-heading h1 { font-size: 31px; }
  .sync-stat-grid { grid-template-columns: 1fr; gap: 8px; margin-top: 22px; }
  .sync-stat-card { min-height: 68px; padding: 13px; }
  .sync-section-heading { align-items: flex-start; flex-direction: column; gap: 8px; margin-top: 29px; }
  .sync-plan-card { grid-template-columns: 34px minmax(0, 1fr); gap: 11px; padding: 14px; }
  .sync-plan-icon { width: 34px; height: 34px; }
  .sync-plan-title-row { display: block; }
  .sync-status { display: inline-block; margin-top: 10px; }
  .sync-plan-actions { justify-content: flex-start; }
}

/* Mobile navigation drawer, matching Xairyn Email's compact menu pattern. */
.mobile-menu-button { display: none; width: 36px; height: 36px; padding: 8px; border: 1px solid transparent; border-radius: 11px; background: transparent; }
.mobile-menu-button:hover, .mobile-menu-button:focus-visible { border-color: #24536d; background: rgba(19, 80, 113, .3); outline: 0; }
.mobile-menu-button span { display: block; width: 19px; height: 1.5px; margin: 4px auto; border-radius: 2px; background: var(--cyan); }
.mobile-drawer-shell { position: fixed; inset: 0; z-index: 20; display: flex; background: rgba(0, 5, 10, .68); backdrop-filter: blur(5px); }
.mobile-drawer-shell[hidden] { display: none; }
.mobile-drawer { display: flex; width: min(310px, 86vw); min-height: 100%; flex-direction: column; padding: 24px 17px 20px; border-right: 1px solid #27556f; background: linear-gradient(165deg, #071b29, #020c14 72%); box-shadow: 18px 0 50px rgba(0, 0, 0, .35); animation: mobile-drawer-in .2s ease both; }
@keyframes mobile-drawer-in { from { opacity: .6; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } }
.mobile-drawer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 0 7px 22px; }
.mobile-drawer-wordmark { font-size: 30px; line-height: 27px; font-weight: 200; letter-spacing: 1.7px; }
.mobile-drawer-product { margin-left: 31px; color: #9bcaf0; font-size: 8px; letter-spacing: 4px; font-weight: 600; }
.mobile-drawer-close { width: 34px; height: 34px; font-size: 23px; }
.drawer-upload-button { width: 100%; gap: 9px; margin-bottom: 22px; }
.mobile-drawer-nav { display: grid; gap: 4px; }
.drawer-nav-item, .drawer-folder-item { display: flex; align-items: center; width: 100%; min-height: 42px; border: 0; border-radius: 11px; color: var(--muted); text-align: left; background: transparent; }
.drawer-nav-item { gap: 11px; padding: 0 12px; font-size: 12px; }
.drawer-nav-item:hover, .drawer-nav-item:focus-visible, .drawer-nav-item.active { color: var(--text); background: linear-gradient(90deg, rgba(7, 99, 155, .8), rgba(7, 52, 83, .62)); outline: 0; }
.drawer-nav-icon { display: grid; width: 22px; place-items: center; color: var(--cyan); font-size: 17px; }
.mobile-drawer-section { margin-top: 25px; }
.mobile-drawer-label { padding: 0 12px 9px; color: var(--dim); font-size: 8px; letter-spacing: 2px; }
.drawer-folder-item { gap: 10px; padding: 0 12px; font-size: 11px; }
.drawer-folder-item:hover, .drawer-folder-item:focus-visible { color: var(--text); background: rgba(14, 76, 112, .28); outline: 0; }
.drawer-folder-item > span:nth-child(2) { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-folder-item small { color: var(--dim); font-size: 9px; }
.drawer-folder-icon { position: relative; display: block; flex: 0 0 auto; width: 22px; height: 18px; border: 1.5px solid #75cfff; border-radius: 3px 4px 4px 4px; background: rgba(7, 63, 94, .55); }
.drawer-folder-icon::before { content: ""; position: absolute; left: 1px; top: -5px; width: 9px; height: 5px; border: 1.5px solid #75cfff; border-bottom: 0; border-radius: 3px 3px 0 0; background: rgba(7, 63, 94, .55); }
.mobile-drawer-footer { margin-top: auto; padding: 22px 12px 0; color: var(--dim); font-size: 9px; letter-spacing: .7px; }

@media (max-width: 720px) {
  .mobile-menu-button { display: block; flex: 0 0 auto; }
  .topbar { gap: 8px; }
  .mobile-brand { min-width: 74px; gap: 5px; }
  .mobile-wordmark { font-size: 18px; letter-spacing: 1.3px; }
  .mobile-product { font-size: 6px; letter-spacing: 1.6px; }
  .search-box { min-width: 0; padding-left: 8px; }
  .search-box input { font-size: 10px; }
}

/* Home workspace refinement: the desktop layout follows the approved Sky direction. */
.content-scroll { max-width: 1540px; padding: 28px 36px 34px; }
.hero-panel { min-height: 330px; padding: 38px; border-radius: 20px; }
.hero-copy { max-width: 570px; }
.hero-copy h1 { font-size: clamp(38px, 3.7vw, 54px); }
.hero-copy .lead { max-width: 590px; font-size: 15px; line-height: 1.6; }
.hero-actions { gap: 16px; margin-top: 26px; }
.hero-upload-button, .hero-folder-button { min-height: 72px; padding: 0 20px; border-radius: 14px; }
.hero-upload-button { min-width: 260px; justify-content: flex-start; gap: 14px; }
.hero-folder-button { min-width: 240px; justify-content: flex-start; gap: 12px; background: rgba(4, 25, 39, .72); }
.hero-upload-button > span:last-child, .hero-folder-button > span:last-child { display: grid; gap: 4px; text-align: left; }
.hero-upload-button strong, .hero-folder-button strong { font-size: 16px; font-weight: 600; }
.hero-upload-button small, .hero-folder-button small { color: rgba(225, 246, 255, .72); font-size: 10px; font-weight: 400; }
.hero-upload-button .button-icon { width: 31px; height: 31px; font-size: 21px; }
.hero-folder-button > span:first-child { color: var(--cyan); font-size: 27px; line-height: 1; }
.hero-drop-note { top: 53px; right: 24px; bottom: auto; width: 248px; min-height: 178px; flex-direction: column; justify-content: center; gap: 8px; padding: 17px; border-radius: 15px; text-align: center; }
.hero-drop-note > span:nth-child(2) { display: grid; justify-items: center; gap: 7px; }
.hero-drop-note strong { font-size: 14px; }
.hero-drop-note small { font-size: 10px; }
.drop-note-cloud { display: grid; width: 43px; height: 43px; border: 0; border-radius: 0; place-items: center; color: var(--blue); font-size: 37px; line-height: 1; transform: none; }
.drop-note-cloud svg { display: block; width: 43px; height: 43px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.1; }
.drop-note-browse { display: inline-flex; align-items: center; justify-content: center; min-width: 122px; min-height: 34px; margin-top: 4px; padding: 0 14px; border: 1px solid #2f7296; border-radius: 22px; color: #bfeaff; background: rgba(4, 25, 39, .65); font-size: 10px; }
.hero-drop-note:hover .drop-note-browse, .hero-drop-note:focus-visible .drop-note-browse { border-color: var(--blue); color: #fff; }
.orbit-art { right: 300px; width: 350px; height: 240px; }
.planet { width: 166px; height: 166px; right: 28px; top: 29px; }
.orbit { width: 320px; height: 100px; }
.orbit-one { top: 71px; }
.orbit-two { top: 73px; }
.folders-section { margin-top: 32px; padding-bottom: 0; }
.folders-section h2 { font-size: 30px; }
.home-view-actions { align-items: center; }
.folder-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.folder-card:not(.root-file-card) { min-height: 96px; padding: 18px; border-radius: 14px; }
.folder-card:not(.root-file-card) .folder-card-icon { width: 58px; height: 50px; border-radius: 12px; }
.folder-card:not(.root-file-card) .folder-card-icon::before { left: 12px; top: 17px; width: 34px; height: 23px; border-width: 2px; }
.folder-card:not(.root-file-card) .folder-card-icon::after { left: 15px; top: 12px; width: 14px; height: 7px; border-width: 2px; }
.folder-card:not(.root-file-card) strong { font-size: 14px; }
.folder-card:not(.root-file-card) small { margin-top: 7px; font-size: 10px; }
.folder-card-icon.system-folder-icon::before, .folder-card-icon.system-folder-icon::after { display: block; }
.folder-card-icon.system-folder-icon { font-size: 0; }
.root-file-card { display: block; min-height: 190px; padding: 0; overflow: hidden; border-radius: 14px; }
.root-file-preview { display: grid; width: 100%; min-height: 125px; aspect-ratio: 1.7; place-items: center; border-bottom: 1px solid var(--line); background: linear-gradient(145deg, #0a3150, #0c6c89 45%, #071626 78%); }
.root-file-preview.photo { background: linear-gradient(145deg, #e97885 0%, #e7ad96 30%, #1c5c76 58%, #0d2a3a 100%); }
.root-file-preview.photo-preview-1 { background: linear-gradient(145deg, #0b3443, #3d7f8f 42%, #0a1c32 100%); }
.root-file-preview.photo-preview-2 { background: linear-gradient(145deg, #1b1635, #78547e 44%, #172b44 100%); }
.root-file-preview.photo-preview-3 { background: linear-gradient(145deg, #0d3e3b, #189b91 44%, #092036 100%); }
.root-file-preview.pdf { background: linear-gradient(145deg, #102e44, #1b2f48 60%, #101c31); }
.root-file-preview.sheet { background: linear-gradient(145deg, #0d4d43, #0c2e34 56%, #071a22); }
.root-file-preview.generic { background: linear-gradient(145deg, #29335f, #101b38 60%, #06111c); }
.root-file-preview-mark { color: rgba(231, 249, 255, .9); font-size: 28px; text-shadow: 0 0 22px rgba(80, 202, 255, .9); }
.root-file-badge { display: grid; min-width: 53px; min-height: 35px; padding: 0 10px; border-radius: 8px; place-items: center; color: #fff; background: #087cf1; font-size: 11px; font-weight: 700; }
.root-file-badge.pdf { background: #e64c57; }
.root-file-badge.sheet { background: #198b62; }
.root-file-details { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 13px 15px 15px; }
.root-file-details > span:first-child { min-width: 0; }
.root-file-details strong, .root-file-details small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.root-file-details strong { font-size: 12px; font-weight: 500; }
.root-file-details small { margin-top: 5px; color: var(--dim); font-size: 9px; }
.root-file-details .arrow { flex: 0 0 auto; font-size: 14px; letter-spacing: 2px; }

@media (max-width: 1000px) and (min-width: 721px) {
  .hero-panel { min-height: 350px; }
  .hero-drop-note { right: 20px; width: 260px; }
  .orbit-art { right: 220px; transform: scale(.82) translateY(-50%); }
  .folder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .content-scroll { padding: 24px 16px 20px; }
  .hero-panel { min-height: 420px; padding: 25px 20px; }
  .hero-copy { max-width: none; }
  .hero-copy h1 { font-size: 31px; }
  .hero-copy .lead { font-size: 12px; line-height: 1.6; }
  .hero-actions { align-items: stretch; flex-direction: column; gap: 9px; margin-top: 18px; }
  .hero-upload-button, .hero-folder-button { width: 100%; min-width: 0; min-height: 52px; }
  .hero-upload-button strong, .hero-folder-button strong { font-size: 13px; }
  .hero-drop-note { position: absolute; top: auto; right: 20px; bottom: 20px; width: calc(100% - 40px); min-height: 105px; flex-direction: row; justify-content: flex-start; padding: 16px; text-align: left; }
  .hero-drop-note > span:nth-child(2) { justify-items: start; text-align: left; }
  .drop-note-cloud { width: 39px; height: 39px; border-radius: 13px; font-size: 27px; }
  .drop-note-browse { min-height: 32px; min-width: 108px; margin-top: 2px; padding: 0 12px; font-size: 10px; }
  .orbit-art { right: -70px; top: 105px; width: 270px; height: 180px; transform: scale(.64); transform-origin: top right; opacity: .62; }
  .folders-section h2 { font-size: 22px; }
  .home-view-actions { width: 100%; justify-content: space-between; }
  .folder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .folder-card:not(.root-file-card) { min-height: 86px; padding: 12px; }
  .folder-card:not(.root-file-card) .folder-card-icon { width: 42px; height: 38px; }
  .folder-card:not(.root-file-card) .folder-card-icon::before { left: 8px; top: 13px; width: 25px; height: 17px; }
  .folder-card:not(.root-file-card) .folder-card-icon::after { left: 10px; top: 9px; width: 11px; height: 5px; }
  .folder-card:not(.root-file-card) strong { font-size: 11px; }
  .folder-card:not(.root-file-card) small { font-size: 8px; }
  .root-file-card { min-height: 154px; }
  .root-file-preview { min-height: 94px; }
  .root-file-details { padding: 10px 11px 12px; }
  .root-file-details strong { font-size: 10px; }
  .root-file-details small { font-size: 8px; }
}