/* Independent application shell: no homepage layout or theme dependencies. */
html { box-sizing: border-box; font-size: 16px; }
*, *::before, *::after { box-sizing: inherit; }
body.drive-independent {
    margin: 0;
    min-width: 320px;
    background: #fff;
    color: #17191c;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
button, summary { cursor: pointer; }
svg { display: block; flex: 0 0 auto; }
[hidden] { display: none !important; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.drive-independent .drive-shell { width: calc(100% - 36px); max-width: none; min-height: 100dvh; margin: 0 auto; padding: 0 0 40px; font-family: inherit; }
.drive-app-header { display: grid; grid-template-columns: minmax(180px, .72fr) minmax(200px, 3fr) minmax(110px, .7fr); gap: 28px; align-items: center; min-height: 96px; }
.drive-brand { display: flex; align-items: center; gap: 21px; width: max-content; color: #101214; text-decoration: none; }
.drive-brand > svg { width: 66px; height: 50px; }
.drive-brand h1 { margin: 0; font-size: 40px; font-weight: 650; line-height: 1; letter-spacing: -.8px; }
.drive-search { display: flex; align-items: center; gap: 20px; min-width: 0; height: 60px; padding: 0 23px; border-radius: 18px; background: linear-gradient(110deg, #f6f7f9, #f3f5f7); color: #969ca5; }
.drive-search > svg { width: 28px; height: 28px; }
.drive-search input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: #282d34; font-size: 22px; }
.drive-search input::placeholder { color: #989ea7; opacity: 1; }
.drive-search:focus-within { background: #eef1f5; }
.drive-header-actions { display: flex; justify-content: flex-end; align-items: center; gap: clamp(16px, 2.1vw, 44px); }
.drive-header-button { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #202326; }
.drive-header-button > svg { width: 30px; height: 30px; }
.drive-header-button:hover { background: #f1f3f6; }
.drive-header-button[aria-pressed="true"] { background: #e8edf4; }
.drive-account { position: relative; }
.drive-account-button { background: #f0f3f8; color: #4c586d; list-style: none; }
.drive-account-button > svg { width: 27px; height: 27px; }
.drive-account-button:hover, .drive-account[open] .drive-account-button { background: #e7ecf4; color: #303d54; }
.drive-account-button::-webkit-details-marker { display: none; }
.drive-account-menu { position: absolute; z-index: 50; top: calc(100% + 14px); right: 0; display: grid; min-width: 220px; padding: 18px; border: 1px solid #e4e7ed; border-radius: 18px; background: #fff; box-shadow: 0 10px 40px #18223412; }
.drive-account-menu strong { overflow-wrap: anywhere; font-size: 15px; }
.drive-account-menu > span { margin: 3px 0 14px; color: #8c929b; font-size: 12px; }
.drive-account-menu a, .drive-account-menu button { padding: 10px 8px; border: 0; border-radius: 8px; background: transparent; color: #30343b; text-align: left; text-decoration: none; font-size: 14px; }
.drive-account-menu a:hover, .drive-account-menu button:hover { background: #f5f6f8; }
.drive-independent .drive-capacity { display: grid; grid-template-columns: minmax(280px, .95fr) minmax(180px, 2fr) minmax(230px, .75fr); align-items: center; gap: 48px; min-height: 132px; margin: 0 0 26px; padding: 22px 44px; border-radius: 22px; background: linear-gradient(115deg, #f7f8fa, #f3f5f7 55%, #f7f8fa); }
.drive-independent .drive-capacity-copy { display: grid; gap: 6px; margin: 0; color: #42474f; font-size: 18px; }
.drive-independent .drive-capacity-copy strong { display: block; color: #111622; font-family: inherit; font-size: 29px; font-weight: 650; line-height: 1.25; letter-spacing: -.6px; white-space: nowrap; }
.drive-capacity-limit { color: var(--drive-muted); font-size: 1em; font-weight: 400; }
.drive-capacity-meter { min-width: 0; }
.drive-independent .drive-track { height: 18px; border-radius: 20px; background: #e8ebef; }
.drive-independent .drive-track-used { border-radius: 20px; background: linear-gradient(100deg, #7388a9, #526b91); }
.drive-independent .drive-track-reserved { border-radius: 20px; background: #c2cad6; }
.drive-capacity-percentage { margin: 12px 0 0; color: var(--drive-muted); font-size: 17px; line-height: 1.2; }
.drive-capacity-manage { display: flex; align-items: center; justify-content: flex-end; min-height: 70px; padding-left: 42px; border-left: 1px solid #e0e4ea; }
.drive-capacity-manage button { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 68px; width: 100%; padding: 0 24px; border: 1px solid #e1e5ec; border-radius: 18px; background: #ffffff65; color: #2e333a; font-size: 18px; white-space: nowrap; }
.drive-capacity-manage button:hover { background: #fff; }
.drive-capacity-manage svg { width: 25px; height: 25px; }
.drive-capacity-manage .drive-manage-chevron { width: 18px; height: 18px; margin-left: auto; color: #7f8793; }
.drive-storage-dialog dl { display: grid; gap: 16px; margin: 26px 0; }
.drive-storage-dialog dl > div { display: flex; justify-content: space-between; gap: 20px; }
.drive-storage-dialog dt { color: #7c828c; }
.drive-storage-dialog dd { margin: 0; font-variant-numeric: tabular-nums; }
.drive-storage-dialog p { color: #858b95; font-size: 13px; }
.drive-table.is-grid { display: block; padding: 18px; }
.drive-table.is-grid thead { display: none; }
.drive-table.is-grid tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.drive-table.is-grid tbody tr { display: flex; flex-direction: column; width: auto !important; min-height: 190px; height: auto; padding: 20px; border: 1px solid #e9ecf1; border-radius: 16px; }
.drive-table.is-grid td { display: block; width: 100% !important; padding: 0 !important; border: 0 !important; }
.drive-table.is-grid .drive-name-cell { flex-direction: column; align-items: flex-start; gap: 12px; }
.drive-table.is-grid .drive-file-icon { width: 32px; height: 32px; }
.drive-table.is-grid .drive-name-button { max-width: 100%; padding: 0; }
.drive-table.is-grid td:nth-child(2), .drive-table.is-grid td:nth-child(3) { margin: 6px 0 0; font-size: 12px; }
.drive-table.is-grid td:last-child { position: static; margin-top: auto; padding-top: 10px !important; }
.drive-table.is-grid .drive-row-actions { opacity: 1; }
.drive-table.is-grid .drive-row-action { width: 30px; height: 30px; }
.drive-header-button:focus-visible, .drive-brand:focus-visible, .drive-capacity-manage button:focus-visible, .drive-account-menu a:focus-visible, .drive-account-menu button:focus-visible { outline: 2px solid #8c9ab1; outline-offset: 4px; }
/* File area uses the same soft surfaces and blue-grey palette as the header. */
.drive-independent {
    --drive-ink: #121827;
    --drive-muted: #5e6f8d;
    --drive-line: #e9edf4;
    --drive-blue: #526b91;
    --drive-blue-soft: #edf0f6;
}
.drive-independent .drive-search { color: var(--drive-muted); background: linear-gradient(110deg, #f5f7fb, #f2f5f9); }
.drive-independent .drive-search input::placeholder { color: var(--drive-muted); }
.drive-independent .drive-capacity { background: linear-gradient(115deg, #f5f7fb, #f2f5f9 55%, #f5f7fb); }
.drive-independent .drive-capacity-copy { color: var(--drive-muted); }
.drive-independent .drive-workspace { padding: 0 18px 16px; border: 0; border-radius: 22px; background: linear-gradient(115deg, #f5f7fb, #f4f6fa 55%, #f7f8fb); }
.drive-independent .drive-toolbar { min-height: 86px; margin: 0 -18px; padding: 18px; border-bottom: 1px solid #edf0f6; }
.drive-independent .drive-breadcrumbs.is-root { visibility: hidden; }
.drive-independent .drive-breadcrumbs button { font-size: 16px; }
.drive-independent .drive-viewbar { min-height: 48px; padding: 0 18px; background: transparent; color: var(--drive-muted); font-size: 17px; }
.drive-independent .drive-viewbar select { color: var(--drive-muted); }
.drive-sort-heading { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; text-align: left; }
.drive-sort-heading:hover, .drive-sort-heading.is-active { color: #4c5b78; }
.drive-sort-heading:focus-visible { outline: 2px solid #8c9ab1; outline-offset: 3px; }
.drive-sort-arrow { width: 12px; font-size: .85em; }
.drive-independent .drive-button { min-height: 50px; padding: 0 18px; border-color: #e7ecf4; border-radius: 14px; background: #ffffff85; color: #172033; font-size: 16px; font-weight: 500; }
.drive-independent .drive-button > .drive-icon { width: 23px; height: 23px; color: var(--drive-muted); }
.drive-independent .drive-button--primary { border-color: transparent; background: linear-gradient(120deg, #607699, #566d91); color: #fff; }
.drive-independent .drive-button--primary > .drive-icon { color: #fff; }
.drive-independent .drive-button--primary:hover { border-color: transparent; background: #485f84; color: #fff; }
.drive-independent .drive-button--danger { background: var(--drive-danger); color: #fff; border-color: var(--drive-danger); }
.drive-independent .drive-button--danger:hover { background: #bd261c; color: #fff; }
.drive-independent .drive-table:not(.is-grid) { border-collapse: separate; border-spacing: 0 7px; }
.drive-independent .drive-table:not(.is-grid) th,
.drive-independent .drive-table:not(.is-grid) td { border: 0; padding: 0 18px; }
.drive-independent .drive-table:not(.is-grid) th { height: 46px; background: #eef2f8a8; color: var(--drive-muted); font-size: 17px; font-weight: 400; }
.drive-independent .drive-table:not(.is-grid) td { background: #ffffff78; }
.drive-independent .drive-table:not(.is-grid) th:first-child,
.drive-independent .drive-table:not(.is-grid) td:first-child { width: 55%; padding-left: 24px; border-radius: 16px 0 0 16px; }
.drive-independent .drive-table:not(.is-grid) th:nth-child(2),
.drive-independent .drive-table:not(.is-grid) td:nth-child(2) { width: 13%; }
.drive-independent .drive-table:not(.is-grid) th:nth-child(3),
.drive-independent .drive-table:not(.is-grid) td:nth-child(3) { width: 22%; }
.drive-independent .drive-table:not(.is-grid) th:last-child,
.drive-independent .drive-table:not(.is-grid) td:last-child { width: 10%; padding-right: 12px; border-radius: 0 16px 16px 0; }
.drive-independent .drive-table:not(.is-grid) tbody tr { height: 58px; }
.drive-independent .drive-table:not(.is-grid) tbody tr:hover { background: transparent; }
.drive-independent .drive-table:not(.is-grid) tbody tr:hover td { background: #fff; }
.drive-independent .drive-name-cell { gap: 20px; }
.drive-independent .drive-file-icon,
.drive-independent .drive-file-icon.is-folder { width: 24px; height: 24px; color: #78859f; }
.drive-independent .drive-icon--png { background: var(--drive-icon-url) center / contain no-repeat; -webkit-mask: none; mask: none; }
.drive-independent .drive-name-button { color: #121827; font-size: 19px; font-weight: 400; }
.drive-independent .drive-name-button:hover { color: #63728f; }
.drive-independent .drive-cell-muted { color: var(--drive-muted); font-size: 18px; }
.drive-independent .drive-row-actions { gap: 0; }
.drive-independent .drive-row-action { width: 30px; height: 30px; color: var(--drive-muted); }
.drive-independent .drive-row-action:not([data-drive-more]) { display: none; }
.drive-independent .drive-row-action[data-drive-more] { display: inline-flex; }
.drive-independent .drive-table.is-grid { padding: 8px 0; }
.drive-independent .drive-table.is-grid tbody tr { border: 0; background: #ffffff78; }
.drive-independent .drive-table.is-grid tbody tr:hover { background: #fff; }
@media (max-width: 1200px) {
    .drive-app-header { grid-template-columns: 180px minmax(150px, 1fr) 108px; gap: 22px; }
    .drive-brand { gap: 12px; }
    .drive-brand > svg { width: 48px; height: 38px; }
    .drive-brand h1 { font-size: 32px; }
    .drive-header-actions { gap: 12px; }
    .drive-search { height: 54px; padding: 0 18px; gap: 14px; }
    .drive-search input { font-size: 18px; }
    .drive-independent .drive-capacity { grid-template-columns: 260px minmax(120px, 1fr) 220px; gap: 28px; padding: 24px; }
    .drive-capacity-manage { padding-left: 24px; }
    .drive-capacity-manage button { padding: 0 15px; gap: 12px; font-size: 15px; }
}
@media (max-width: 900px) {
    .drive-independent .drive-capacity { grid-template-columns: 1fr 1fr; gap: 22px; }
    .drive-capacity-meter { grid-row: 2; grid-column: 1 / -1; }
    .drive-capacity-manage { border: 0; }
    .drive-capacity-manage button { width: auto; }
    .drive-independent .drive-name-button { font-size: 16px; }
    .drive-independent .drive-cell-muted { font-size: 14px; }
    .drive-independent .drive-table:not(.is-grid) th { font-size: 15px; }
}
@media (max-width: 600px) {
    .drive-independent .drive-shell { width: calc(100% - 24px); padding: 0 0 calc(110px + env(safe-area-inset-bottom)); }
    .drive-app-header { grid-template-columns: 1fr auto; gap: 14px 10px; padding: 16px 4px 18px; min-height: 0; }
    .drive-brand h1 { font-size: 29px; }
    .drive-brand > svg { width: 43px; height: 34px; }
    .drive-search { grid-column: 1 / -1; grid-row: 2; height: 48px; padding: 0 16px; border-radius: 14px; }
    .drive-search > svg { width: 21px; height: 21px; }
    .drive-search input { font-size: 16px; }
    .drive-header-actions { gap: 8px; }
    .drive-header-button { width: 38px; height: 38px; }
    .drive-header-button > svg { width: 25px; height: 25px; }
    .drive-independent .drive-capacity { grid-template-columns: 1fr; gap: 18px; min-height: 0; margin-bottom: 18px; padding: 22px; border-radius: 18px; }
    .drive-independent .drive-capacity-copy { font-size: 15px; }
    .drive-independent .drive-capacity-copy strong { font-size: 28px; }
    .drive-capacity-meter { grid-row: auto; grid-column: auto; }
    .drive-independent .drive-track { height: 12px; }
    .drive-capacity-percentage { margin-top: 9px; font-size: 14px; }
    .drive-capacity-manage { justify-content: stretch; min-height: 0; padding: 0; }
    .drive-capacity-manage button { width: 100%; min-height: 48px; border-radius: 12px; }
    .drive-independent .drive-workspace { padding: 0 10px 10px; border-radius: 18px; }
    .drive-independent .drive-toolbar { margin: 0 -10px; padding: 12px; min-height: 56px; }
    .drive-independent .drive-viewbar { min-height: 44px; padding: 0 8px; font-size: 14px; }
    .drive-independent .drive-table:not(.is-grid), .drive-independent .drive-table:not(.is-grid) tbody { display: block; }
    .drive-independent .drive-table:not(.is-grid) thead { display: none; }
    .drive-independent .drive-table:not(.is-grid) tbody tr { height: auto; min-height: 84px; margin: 6px 0; padding: 14px 45px 14px 14px; border: 0; border-radius: 14px; background: #ffffff78; }
    .drive-independent .drive-table:not(.is-grid) td { background: transparent; border-radius: 0; }
    .drive-independent .drive-table:not(.is-grid) tbody tr:hover td { background: transparent; }
    .drive-independent .drive-table:not(.is-grid) .drive-cell-muted { margin-left: 36px; font-size: 12px; }
    .drive-independent .drive-name-cell { gap: 12px; }
    .drive-independent .drive-name-button { font-size: 16px; }
    .drive-independent .drive-row-actions { opacity: 1; }
    .drive-independent .drive-button { min-height: 44px; font-size: 14px; }
    .drive-table.is-grid { padding: 12px; }
    .drive-table.is-grid tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .drive-table.is-grid tbody tr { min-height: 190px; padding: 14px; }
    .drive-table.is-grid .drive-name-button { font-size: 13px; }
}
/* Share a grid row between the capacity value and the track instead of
   centering the entire track/percentage group against the copy group. */
@media (min-width: 901px) {
    .drive-independent .drive-capacity { grid-template-rows: auto auto auto; row-gap: 6px; }
    .drive-independent .drive-capacity-copy,
    .drive-independent .drive-capacity-meter { display: contents; }
    .drive-independent .drive-capacity-copy > span { grid-column: 1; grid-row: 1; }
    .drive-independent .drive-capacity-copy > strong { grid-column: 1; grid-row: 2; align-self: center; }
    .drive-independent .drive-capacity-meter > .drive-track { grid-column: 2; grid-row: 2; align-self: center; }
    .drive-independent .drive-capacity-percentage { grid-column: 2; grid-row: 3; margin: 0; }
    .drive-independent .drive-capacity-manage { grid-column: 3; grid-row: 1 / 4; }
}

/* Private external storage keeps the existing workspace and visual language. */
.drive-storage-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.drive-storage-tabs button { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; border: 1px solid transparent; border-radius: 13px; padding: 10px 17px; background: transparent; color: #64748b; font: inherit; cursor: pointer; transition: background .18s ease, color .18s ease; }
.drive-storage-tabs button[aria-pressed="true"] { background: #e5ebf4; border-color: #d5deeb; color: #172b48; }
.drive-storage-tabs button:hover { background: #edf1f7; }
.drive-storage-tabs button span { font-size: 12px; color: #718199; }
.drive-storage-settings { margin-left: auto; padding: 10px 12px; color: #536d91; font-size: 14px; text-decoration: none; border-radius: 10px; }
.drive-storage-settings:hover { background: #edf1f7; }
.drive-storage-settings:focus-visible { outline: 2px solid #8c9ab1; outline-offset: 3px; }
.drive-storage-tabs button:focus-visible, .drive-storage-error button:focus-visible { outline: 2px solid #8c9ab1; outline-offset: 3px; }
.drive-storage-error { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 12px 0; padding: 14px 18px; border: 1px solid #e5cfaa; border-radius: 14px; background: #fff8eb; color: #785a2c; }
.drive-storage-error[hidden] { display: none !important; }
.drive-shell .drive-table[hidden] { display: none !important; }
.drive-storage-error button { flex: none; border: 1px solid #dbc7a6; border-radius: 9px; padding: 7px 13px; background: #fff; color: inherit; font: inherit; cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
    .drive-storage-tabs button { transition: none; }
}
@media (max-width: 600px) {
    .drive-storage-tabs { gap: 4px; margin-bottom: 12px; }
    .drive-storage-tabs button { padding: 10px 12px; font-size: 14px; }
    .drive-storage-tabs button span { font-size: 11px; }
    .drive-storage-error { font-size: 14px; padding: 12px; }
}
.drive-space-policy { color: #65758f; font-size: 12px; line-height: 1.7; margin: 8px 0 18px; }