@import url("/assets/tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--font-sans); color: var(--color-ink); background: var(--color-canvas); }
body { margin: 0; min-width: 20rem; min-height: 100vh; font-size: var(--font-size-md); line-height: var(--line-body); background: var(--color-canvas); }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; box-shadow: var(--shadow-focus); }
::selection { color: var(--color-ink); background: var(--color-surface-selected); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 200; top: var(--space-4); left: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); color: #fff; background: var(--color-ink); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.mobile-only { display: none !important; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1rem; height: 1rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: .8rem; height: .8rem; }

.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--color-brand); font-weight: 700; text-decoration: none; letter-spacing: var(--tracking-tight); }
.brand__logo { display: block; width: auto; max-width: 100%; height: auto; object-fit: contain; }
.brand__logo--full { width: min(22rem, 100%); }
.brand__logo--sidebar { width: 11.4rem; }
.brand__logo--share { width: min(18rem, 78vw); }
.brand__mark { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border-radius: .55rem; color: #fff; background: linear-gradient(145deg, #5bb6ff, #2387eb); box-shadow: 0 .3rem .8rem rgba(48, 151, 243, .24); font-size: .72rem; font-weight: 800; transition: transform var(--duration-standard) var(--ease-standard), box-shadow var(--duration-standard); }
.brand:hover .brand__mark { box-shadow: 0 .45rem 1rem rgba(48, 151, 243, .32); transform: translateY(-2px) rotate(-4deg); }
.brand--light { color: #fff; }
.brand--light .brand__mark { color: var(--color-action); background: #fff; }
.eyebrow { margin: 0 0 .35rem; color: var(--color-action); font-size: var(--font-size-xs); font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }

/* Sign in */
.login-page { min-height: 100dvh; display: grid; grid-template-columns: minmax(32rem, 52.8fr) minmax(31rem, 47.2fr); overflow: hidden; background: #f5f8fd; }
.login-intro { position: relative; display: flex; min-height: 100dvh; flex-direction: column; justify-content: space-between; overflow: hidden; padding: clamp(2.7rem, 4.6vw, 4.95rem); color: #fff; background: linear-gradient(90deg, rgba(5, 27, 78, .96) 0%, rgba(7, 38, 101, .84) 53%, rgba(8, 45, 119, .64) 100%), url("/assets/generated/tagmat-login-workspace.png") 60% center / cover no-repeat; }
.login-intro::before { content: ""; position: absolute; z-index: 0; top: -8rem; right: -4.5rem; width: 20rem; height: 45rem; background: linear-gradient(155deg, rgba(111, 157, 255, .44), rgba(45, 81, 179, .09)); clip-path: polygon(47% 0, 100% 0, 53% 49%, 100% 49%, 51% 100%, 0 100%, 45% 49%, 0 49%); opacity: .85; }
.login-intro::after { content: ""; position: absolute; z-index: 0; inset: 0; background: radial-gradient(circle at 18% 80%, rgba(48, 116, 218, .32), transparent 33%), linear-gradient(90deg, rgba(6, 29, 82, .16), transparent 70%); pointer-events: none; }
.login-brand, .login-intro__content, .login-intro__footer { position: relative; z-index: 1; }
.login-brand { display: block; width: min(25.5rem, 86%); filter: brightness(0) invert(1); opacity: .93; }
.login-brand .brand__logo { width: 100%; }
.login-intro__content { width: min(100%, 34rem); margin: auto 0; padding-top: 2.9rem; animation: login-copy-in 680ms 80ms backwards var(--ease-standard); }
@keyframes login-copy-in { from { opacity: 0; transform: translateY(1.5rem); } }
.login-intro__accent { display: block; width: 2.6rem; height: .28rem; margin-bottom: 1.85rem; border-radius: 99px; background: #4aa7ff; box-shadow: 0 0 .85rem rgba(72, 167, 255, .35); }
.login-intro__eyebrow { margin: 0 0 1.05rem; color: #c0cceb; font-size: clamp(.65rem, .78vw, .8rem); font-weight: 650; letter-spacing: .23em; text-transform: uppercase; }
.login-intro h2 { margin: 0; color: #fff; font-size: clamp(2.35rem, 3.55vw, 3.65rem); font-weight: 620; line-height: 1.06; letter-spacing: -.055em; }
.login-intro h2 span { color: #50b4ff; }
.login-intro__lead { max-width: 32rem; margin: 1.35rem 0 0; color: #f0f5ff; font-size: clamp(.88rem, 1.16vw, 1.08rem); line-height: 1.65; }
.login-benefits { display: grid; gap: 1rem; padding: 0; margin: clamp(2rem, 4.3vw, 3.4rem) 0 0; list-style: none; }
.login-benefits li { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: .85rem; align-items: center; }
.login-benefits__icon { display: grid; width: 4.1rem; height: 4.1rem; place-items: center; border-radius: 50%; color: #6ab7ff; background: linear-gradient(145deg, rgba(82, 132, 226, .56), rgba(33, 79, 159, .45)); box-shadow: inset 0 1px rgba(255, 255, 255, .11), 0 .55rem 1rem rgba(0, 18, 66, .16); }
.login-benefits__icon .icon { width: 1.65rem; height: 1.65rem; stroke-width: 1.65; }
.login-benefits strong, .login-benefits small { display: block; }
.login-benefits strong { color: #fff; font-size: clamp(.9rem, 1.05vw, 1.05rem); }
.login-benefits small { margin-top: .18rem; color: #c7d5f3; font-size: clamp(.74rem, .88vw, .9rem); }
.login-intro__footer { display: flex; align-items: center; gap: 1.2rem; color: #b7c7e6; font-size: clamp(.58rem, .69vw, .72rem); font-weight: 650; letter-spacing: .17em; text-transform: uppercase; white-space: nowrap; }
.login-intro__footer > span { width: 2.6rem; height: 2px; flex: 0 0 auto; border-radius: 20px; background: #d0daf0; }
.login-intro__pagination { display: flex; gap: .75rem; margin-left: auto; }
.login-intro__pagination i { display: block; width: .56rem; height: .56rem; border-radius: 50%; background: rgba(177, 205, 250, .38); }
.login-intro__pagination i:first-child { background: #50aaff; box-shadow: 0 0 .8rem rgba(80, 170, 255, .7); }
.login-panel { position: relative; display: grid; min-height: 100dvh; place-items: center; overflow: hidden; padding: 5.7rem clamp(1.5rem, 4vw, 4.8rem) 4.1rem; background: radial-gradient(circle at 21% 98%, rgba(166, 209, 255, .2), transparent 26%), radial-gradient(circle at 91% 5%, rgba(208, 225, 255, .25), transparent 28%), linear-gradient(135deg, #fbfdff, #f3f8ff); }
.login-panel::before { content: ""; position: absolute; right: -13rem; bottom: -13rem; width: 34rem; height: 34rem; border: 1px solid rgba(91, 140, 210, .1); border-radius: 50%; box-shadow: 0 0 0 4rem rgba(91, 140, 210, .025), 0 0 0 8rem rgba(91, 140, 210, .018); }
.language-picker { position: absolute; z-index: 2; top: 1.7rem; right: clamp(1.5rem, 4vw, 4.8rem); display: inline-flex; min-height: 2.55rem; align-items: center; gap: .72rem; padding: .45rem .85rem; border: 1px solid #dfe5ef; border-radius: 999px; color: #263652; background: rgba(255, 255, 255, .78); box-shadow: 0 .25rem .9rem rgba(54, 84, 126, .05); font-size: .8rem; font-weight: 650; cursor: pointer; }
.language-picker .icon:first-child { width: 1.15rem; height: 1.15rem; }
.login-card { position: relative; z-index: 1; width: min(100%, 33.5rem); padding: clamp(2.2rem, 3.6vw, 3.05rem) clamp(2rem, 3.8vw, 3.45rem) 1.85rem; border: 1px solid rgba(202, 213, 230, .72); border-radius: 1.15rem; background: rgba(255, 255, 255, .93); box-shadow: 0 1.35rem 3rem rgba(44, 68, 110, .13); text-align: center; animation: login-card-in 620ms 120ms backwards var(--ease-standard); backdrop-filter: blur(18px); }
@keyframes login-card-in { from { opacity: 0; transform: translateX(1.5rem) scale(.985); } }
.login-card__symbol { display: block; width: 5.3rem; height: 6.65rem; margin: 0 auto .45rem; object-fit: contain; }
.login-card .eyebrow { margin: 0; color: #206fe2; font-size: .72rem; font-weight: 750; letter-spacing: .19em; }
.login-card__accent { display: block; width: 2.2rem; height: .2rem; margin: .95rem auto 1rem; border-radius: 20px; background: #4477e5; }
.login-card h1 { margin: 0; color: #070a34; font-size: clamp(1.32rem, 1.65vw, 1.62rem); line-height: 1.2; letter-spacing: -.045em; }
.login-card__hint { margin: .45rem 0 1.65rem; color: #52617d; font-size: .87rem; }
.login-card form { display: grid; gap: .32rem; text-align: left; }
.login-input { position: relative; display: flex; align-items: center; }
.login-input > .icon { position: absolute; z-index: 1; left: .85rem; width: 1.22rem; height: 1.22rem; color: #53627e; stroke-width: 1.8; pointer-events: none; }
.login-input input { min-height: 3.34rem; padding: .65rem 2.95rem; border-color: #d6deea; border-radius: .58rem; color: #18223b; background: #fff; font-size: .88rem; }
.login-input input::placeholder { color: #8a96ad; }
.login-input input:focus { border-color: #5b8df1; box-shadow: 0 0 0 .2rem rgba(70, 121, 231, .12); }
.login-card label, .dialog label { margin-top: var(--space-2); color: var(--color-ink-soft); font-size: var(--font-size-sm); font-weight: 600; }
.login-options { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.1rem; margin-top: .06rem; font-size: .78rem; }
.login-options a { color: #1767da; font-weight: 600; text-decoration: underline; }
.remember-me { display: inline-flex; align-items: center; gap: .62rem; margin: 0 !important; color: #17213b !important; font-size: .78rem !important; font-weight: 600 !important; cursor: pointer; }
.remember-me input { width: 1.48rem; min-width: 1.48rem; min-height: 1.48rem; padding: 0; margin: 0; appearance: none; border: 1px solid #b8c5da; border-radius: .29rem; background: #fff; cursor: pointer; }
.remember-me input:checked { border-color: #356ee3; background: #356ee3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='white' stroke-width='2' d='m2 6 2.5 2.5L10 3'/%3E%3C/svg%3E") center / .85rem no-repeat; }
.login-submit { min-height: 3.5rem; margin-top: .18rem !important; border-color: #376de0; border-radius: .56rem; background: linear-gradient(100deg, #3d7aee, #365edc); box-shadow: 0 .7rem 1.45rem rgba(48, 91, 210, .25); font-size: .98rem; }
.login-submit:hover { border-color: #2856c1; background: linear-gradient(100deg, #326bdd, #2d51c8); }
.login-submit .button__arrow { width: 1.3rem; height: 1.3rem; margin-left: .55rem; stroke-width: 2; }
.login-secure { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; margin: 1.5rem 0 0; color: #697792; font-size: .69rem; }
.login-secure .icon { width: .95rem; height: .95rem; color: #6c7b98; }
.login-panel__footer { position: absolute; z-index: 1; bottom: 2.15rem; display: flex; align-items: center; justify-content: center; gap: 1rem; color: #3f4d69; font-size: .74rem; }
.login-panel__footer a { color: inherit; text-decoration: none; }
.login-panel__footer a:hover { color: #1e63cc; text-decoration: underline; }
.login-panel__footer i { width: 1px; height: 1rem; background: #aab6c7; }

input, select { width: 100%; min-height: var(--control-min-height); padding: .58rem .75rem; border: 1px solid var(--color-control-border); border-radius: var(--radius-sm); color: var(--color-ink); background: #fff; transition: border-color var(--duration-fast), box-shadow var(--duration-fast); }
input:hover, select:hover { border-color: #c8d1dc; }
input:focus, select:focus { border-color: var(--color-action); box-shadow: var(--shadow-focus); }
input::placeholder { color: #9aa4b3; }
input[aria-invalid="true"] { border-color: var(--color-danger); }
.password-field { position: relative; }
.password-field input { padding-right: 3rem; }
.button-icon--inside { position: absolute; z-index: 2; top: .28rem; right: .3rem; width: 2.55rem !important; min-height: 2.55rem; padding: 0; color: #53627e; font-size: var(--font-size-xs); }
.button-icon--inside:hover { color: #1e4eae; background: transparent; }
.field-error { min-height: 1.1rem; margin: 0; color: var(--color-danger); font-size: var(--font-size-xs); }
.form-alert, .notice { padding: .7rem .85rem; margin-bottom: var(--space-4); border: 1px solid #f5c9d0; border-radius: var(--radius-sm); color: #9f2940; background: #fff5f7; font-size: var(--font-size-sm); }
.form-alert--success { border-color: #bce6d0; color: #176c46; background: #f1fbf6; }
.notice--warning { border-color: #f0d6ae; color: #7f5517; background: #fffaf0; }

.button { display: inline-flex; min-height: var(--control-min-height); align-items: center; justify-content: center; gap: .45rem; padding: .52rem .8rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); color: var(--color-ink-soft); background: #fff; box-shadow: 0 1px 2px rgba(18, 28, 45, .04); font-size: var(--font-size-sm); font-weight: 600; text-decoration: none; cursor: pointer; transition: border-color var(--duration-fast), background var(--duration-fast), color var(--duration-fast), transform var(--duration-fast); }
.button:hover { border-color: #cbd4df; background: var(--color-surface-hover); }
.button:active { transform: translateY(1px); }
.button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.button--primary { border-color: var(--color-action); color: #fff; background: var(--color-action); box-shadow: 0 .35rem .8rem rgba(15, 112, 183, .2); }
.button--primary:hover { border-color: var(--color-action-hover); background: var(--color-action-hover); }
.button .icon { transition: transform var(--duration-standard) var(--ease-standard); }
.button:hover .icon { transform: translateY(-1px) scale(1.08); }
.button--primary:hover .icon { transform: translateY(-2px); }
.button--danger { border-color: #efbac4; color: var(--color-danger); }
.button--danger:hover { background: #fff3f5; }
.button--quiet { border-color: transparent; background: transparent; box-shadow: none; }
.button--full { width: 100%; margin-top: var(--space-3); }
.button.is-loading .button__label { opacity: .7; }
.button .spinner { display: none; }
.button.is-loading .spinner { display: block; }
.button-icon { display: inline-grid; width: var(--control-min-height); min-height: var(--control-min-height); padding: 0; place-items: center; border: 0; border-radius: var(--radius-sm); color: var(--color-ink-muted); background: transparent; cursor: pointer; }
.button-icon:hover { color: var(--color-ink); background: var(--color-surface-subtle); }
.icon-lines { position: relative; display: block; width: 1rem; height: .7rem; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
.icon-lines::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1.5px; background: currentColor; transform: translateY(-50%); }
.spinner { width: 1rem; height: 1rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }

/* Application shell */
.app-shell { height: 100dvh; overflow: hidden; display: grid; grid-template: 3.75rem minmax(0, 1fr) / 14rem minmax(0, 1fr) 20rem; grid-template-areas: "sidebar topbar topbar" "sidebar workspace details"; background: #fff; transition: grid-template-columns var(--duration-emphasis) var(--ease-standard); }
.app-shell:not(.has-details) { grid-template-columns: 14rem minmax(0, 1fr) 0; }
.topbar { grid-area: topbar; z-index: 30; display: grid; grid-template-columns: minmax(14rem, 32rem) auto; align-items: center; justify-content: space-between; gap: var(--space-5); padding: 0 var(--space-6); border-bottom: 1px solid var(--color-border); background: rgba(255, 255, 255, .96); }
.topbar__actions { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; }
.search { position: relative; width: min(100%, 28rem); }
.search input { min-height: 2rem; padding: .42rem 2.35rem; border-color: transparent; border-radius: .45rem; background: var(--color-surface-subtle); font-size: var(--font-size-sm); }
.search input:focus { border-color: #b9dafa; background: #fff; }
.search__icon { position: absolute; z-index: 1; top: 50%; left: .8rem; width: .7rem; height: .7rem; border: 1.6px solid #8f9aaa; border-radius: 50%; transform: translateY(-58%); pointer-events: none; }
.search__icon::after { content: ""; position: absolute; right: -.3rem; bottom: -.2rem; width: .35rem; height: 1.5px; background: #8f9aaa; transform: rotate(45deg); }
.search__clear { position: absolute; top: 0; right: 0; min-height: 2rem; }
.search-results { position: absolute; z-index: 80; inset: calc(100% + .5rem) 0 auto 0; max-height: min(25rem, 60vh); overflow: auto; padding: .4rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-popover); }
.search-result { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .65rem; width: 100%; padding: .6rem; border: 0; border-radius: var(--radius-sm); text-align: left; background: transparent; cursor: pointer; }
.search-result:hover, .search-result[aria-selected="true"] { background: var(--color-surface-subtle); }
.search-result strong, .search-result small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result small { color: var(--color-ink-muted); }
.upload-indicator, .account__button { display: inline-flex; min-height: 2.25rem; align-items: center; gap: .45rem; padding: 0 .65rem; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--color-ink-soft); background: transparent; font-size: var(--font-size-xs); cursor: pointer; }
.upload-indicator:hover, .account__button:hover { border-color: var(--color-border); background: var(--color-surface-hover); }
.upload-indicator__dot { width: .4rem; height: .4rem; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 .2rem #e7f7ef; }
.counter { min-width: 1.1rem; padding: .08rem .28rem; border-radius: 999px; color: var(--color-ink-muted); background: var(--color-surface-subtle); text-align: center; }
.account { position: relative; }
.account__name { max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { display: grid; width: 1.8rem; height: 1.8rem; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #6e8aa9, #2e4968); font-size: var(--font-size-xs); font-weight: 700; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45); }
.menu { min-width: 12rem; padding: .35rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-popover); }
.account__menu { position: absolute; z-index: 80; top: calc(100% + .45rem); right: 0; }
.menu button { width: 100%; min-height: 2.25rem; padding: .45rem .65rem; border: 0; border-radius: var(--radius-xs); text-align: left; background: transparent; font-size: var(--font-size-sm); cursor: pointer; }
.menu button:hover { background: var(--color-surface-subtle); }
.menu__identity { display: grid; padding: .5rem .65rem .65rem; margin: 0 0 .3rem; border-bottom: 1px solid var(--color-border); }
.menu__identity span { max-width: 15rem; overflow: hidden; color: var(--color-ink-muted); font-size: var(--font-size-xs); text-overflow: ellipsis; }

.sidebar { grid-area: sidebar; z-index: 40; display: flex; min-width: 0; flex-direction: column; overflow-y: auto; padding: 1rem .8rem .8rem; border-right: 1px solid var(--color-border); background: #fff; }
.sidebar > .brand { min-height: 2.15rem; margin: 0 .45rem 1rem; }
.profile-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .55rem; align-items: center; padding: .55rem; margin: 0 0 .8rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #fff; }
.avatar--profile { width: 1.65rem; height: 1.65rem; background: linear-gradient(145deg, #cf9a7b, #7c4f42); }
.profile-card__copy { display: grid; min-width: 0; line-height: 1.25; }
.profile-card__copy strong, .profile-card__copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-card__copy strong { font-size: var(--font-size-xs); }
.profile-card__copy small { color: var(--color-ink-muted); font-size: .58rem; }
.nav-label { margin: .45rem .65rem .3rem; color: #a1a9b6; font-size: .6rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.nav-list { display: grid; gap: .15rem; }
.nav-item { position: relative; display: flex; min-height: 2.25rem; align-items: center; gap: .7rem; width: 100%; padding: .5rem .65rem; border: 0; border-radius: var(--radius-sm); color: #566176; text-align: left; background: transparent; font-size: var(--font-size-sm); cursor: pointer; transition: color var(--duration-fast), background var(--duration-fast), transform var(--duration-fast); }
.nav-item::before { content: ""; position: absolute; top: 25%; bottom: 25%; left: -.8rem; width: .18rem; border-radius: 0 999px 999px 0; background: var(--color-action); opacity: 0; transform: scaleY(.25); transition: opacity var(--duration-standard), transform var(--duration-standard) var(--ease-standard); }
.nav-item .icon { width: .9rem; height: .9rem; color: #7f8998; transition: color var(--duration-fast), transform var(--duration-standard) var(--ease-standard); }
.nav-item:hover { color: var(--color-ink); background: var(--color-surface-hover); }
.nav-item:hover .icon { transform: translateX(2px) scale(1.08); }
.nav-item.is-active { color: var(--color-action); background: var(--color-action-soft); font-weight: 600; }
.nav-item.is-active .icon { color: var(--color-action); }
.nav-item.is-active::before { opacity: 1; transform: scaleY(1); }
.storage-card { position: relative; margin-top: auto; padding: 3.25rem .75rem .75rem; border: 1px solid #cfe6fb; border-radius: var(--radius-md); background: linear-gradient(145deg, #eef8ff, #f8fbff); }
.storage-card__art { position: absolute; top: .65rem; left: .75rem; display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .65rem; color: #fff; background: linear-gradient(145deg, #2b2e83, #0f70b7); box-shadow: 0 .3rem .7rem rgba(15,112,183,.2); }
.storage-card:hover .storage-card__art { animation: cloud-bob 700ms var(--ease-standard); }
@keyframes cloud-bob { 35% { transform: translateY(-4px) rotate(-4deg); } 70% { transform: translateY(1px) rotate(2deg); } }
.storage-card__art .icon { width: 1rem; height: 1rem; }
.storage-card__heading { display: flex; justify-content: space-between; gap: var(--space-3); color: var(--color-ink-soft); font-size: var(--font-size-xs); }
.storage-card p { margin: .35rem 0 0; color: var(--color-ink-muted); font-size: .62rem; }
.progress, .progress-native { height: .35rem; overflow: hidden; border: 0; border-radius: 999px; background: #dce7f1; }
.progress { margin-top: .65rem; }
.progress span { display: block; width: 0; height: 100%; background: var(--color-action); transition: width var(--duration-emphasis) var(--ease-standard); }
.progress-native { width: 100%; margin-top: .65rem; appearance: none; }
.progress-native::-webkit-progress-bar { background: #dce7f1; }
.progress-native::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg, #50aefa, #258be8); transition: width var(--duration-emphasis) var(--ease-standard); }
.progress-native::-moz-progress-bar { background: var(--color-action); }

/* Workspace */
.workspace { grid-area: workspace; min-width: 0; overflow: auto; background: #fff; }
.workspace__inner { min-width: 0; padding: 1.15rem clamp(1.25rem, 2.5vw, 2.25rem) 2rem; animation: workspace-enter 340ms var(--ease-standard); }
@keyframes workspace-enter { from { opacity: 0; transform: translateY(.45rem); } }
.workspace__loading { display: grid; gap: .75rem; padding: 1.5rem 2rem; }
.skeleton { display: block; height: 3.5rem; border-radius: var(--radius-sm); background: linear-gradient(90deg, #f0f3f7 25%, #f8fafc 45%, #f0f3f7 65%); background-size: 200% 100%; animation: skeleton 1.25s linear infinite; }
.skeleton--title { width: 13rem; height: 2rem; }
.skeleton--toolbar { width: 100%; }
.skeleton--row { height: 3rem; }
@keyframes skeleton { to { background-position: -200% 0; } }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; min-height: 1.1rem; margin: 0 0 .45rem; color: var(--color-ink-muted); font-size: var(--font-size-xs); }
.breadcrumbs button { padding: .1rem; border: 0; color: var(--color-ink-muted); background: transparent; cursor: pointer; }
.breadcrumbs button:hover { color: var(--color-action); }
.breadcrumbs button[aria-current="page"] { color: var(--color-ink-soft); }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); margin-bottom: 1.2rem; }
.page-head h1 { margin: 0; font-size: var(--font-size-xl); line-height: 1.15; letter-spacing: -.035em; }
.page-head__copy p:not(.eyebrow) { margin: .3rem 0 0; color: var(--color-ink-muted); font-size: var(--font-size-sm); }
.page-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.section { margin-top: 1.4rem; }
.dashboard .section { animation: section-rise 420ms both var(--ease-standard); }
.dashboard .section:nth-of-type(2) { animation-delay: 45ms; }
.dashboard .section:nth-of-type(3) { animation-delay: 90ms; }
.dashboard .section:nth-of-type(4) { animation-delay: 135ms; }
@keyframes section-rise { from { opacity: 0; transform: translateY(.55rem); } }
.section:first-of-type { margin-top: 0; }
.section-head { display: flex; min-height: 2rem; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.section-head h2 { margin: 0; font-size: var(--font-size-sm); letter-spacing: -.01em; }
.section-link { border: 0; color: var(--color-action); background: transparent; font-size: var(--font-size-xs); cursor: pointer; }

/* Dashboard cards */
.dashboard .page-head { margin-bottom: .85rem; }
.dashboard .section { margin-top: .85rem; }
.dashboard .section:first-of-type { margin-top: 0; }
.dashboard .section-head { min-height: 1.6rem; margin-bottom: .35rem; }
.dashboard-storage { display: grid; grid-template-columns: minmax(11rem, .8fr) minmax(0, 2.2fr); gap: 1.5rem; align-items: end; padding: .7rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; }
.dashboard-storage__summary strong { display: block; margin-top: .05rem; font-size: 1.25rem; letter-spacing: -.04em; }
.dashboard-storage__summary span { color: var(--color-ink-muted); font-size: var(--font-size-xs); }
.storage-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.storage-legend__item { min-width: 0; }
.storage-legend__track { display: block; width: 100%; height: .35rem; margin-bottom: .4rem; overflow: hidden; border: 0; border-radius: 999px; background: #e8edf3; appearance: none; }
.storage-legend__track::-webkit-progress-bar { background: #e8edf3; }
.storage-legend__track::-webkit-progress-value { border-radius: 999px; background: #319bf5; }
.storage-legend__track::-moz-progress-bar { background: #319bf5; }
.storage-legend__item:nth-child(2) .storage-legend__track::-webkit-progress-value { background: #c468ef; }
.storage-legend__item:nth-child(2) .storage-legend__track::-moz-progress-bar { background: #c468ef; }
.storage-legend__item:nth-child(3) .storage-legend__track::-webkit-progress-value { background: #41d985; }
.storage-legend__item:nth-child(3) .storage-legend__track::-moz-progress-bar { background: #41d985; }
.storage-legend__item:nth-child(4) .storage-legend__track::-webkit-progress-value { background: #f3aa3e; }
.storage-legend__item:nth-child(4) .storage-legend__track::-moz-progress-bar { background: #f3aa3e; }
.storage-legend__item strong, .storage-legend__item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.storage-legend__item strong { color: var(--color-ink-soft); font-size: .64rem; font-weight: 600; }
.storage-legend__item small { color: var(--color-ink-muted); font-size: .58rem; }
.folder-grid { display: grid; grid-template-columns: repeat(6, minmax(6.5rem, 1fr)); gap: .65rem; }
.folder-card { display: flex; min-width: 0; min-height: 2.65rem; align-items: center; gap: .6rem; padding: .5rem .7rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); text-align: left; background: #fff; cursor: pointer; transition: border-color var(--duration-fast), transform var(--duration-fast), box-shadow var(--duration-fast); }
.folder-card:hover { border-color: #c8def3; box-shadow: var(--shadow-soft); transform: translateY(-1px); }
.folder-card .icon { width: 1.05rem; height: 1.05rem; color: var(--color-action); fill: #eaf5ff; transition: transform var(--duration-standard) var(--ease-standard); }
.folder-card:hover .icon { transform: translateY(-2px) rotate(-3deg) scale(1.08); }
.folder-card__copy { min-width: 0; overflow: hidden; font-size: var(--font-size-xs); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.document-grid { display: grid; grid-template-columns: repeat(6, minmax(6.25rem, 1fr)); gap: .65rem; }
.document-card { display: grid; min-width: 0; min-height: 5rem; justify-items: center; align-content: center; gap: .5rem; padding: .6rem .5rem .5rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-ink-soft); background: #f9fbfd; cursor: pointer; transition: border-color var(--duration-fast), background var(--duration-fast), transform var(--duration-fast); }
.document-card:hover { border-color: #cbdff2; background: #fff; transform: translateY(-1px); }
.document-card__icon { position: relative; display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border-radius: .55rem; color: #e45664; background: #fff1f3; font-size: .55rem; font-weight: 750; text-transform: uppercase; transition: transform var(--duration-standard) var(--ease-standard), box-shadow var(--duration-standard); }
.document-card__icon::after { content: ""; position: absolute; top: 0; right: 0; border-width: 0 .45rem .45rem 0; border-style: solid; border-color: transparent #fff transparent transparent; }
.document-card[data-kind="image"] .document-card__icon { color: #2eaa73; background: #eaf9f1; }
.document-card[data-kind="sheet"] .document-card__icon { color: #2eaa73; background: #eaf9f1; }
.document-card[data-kind="audio"] .document-card__icon { color: #8b62dc; background: #f2edff; }
.document-card[data-kind="other"] .document-card__icon { color: #388fdc; background: #eaf5ff; }
.document-card:hover .document-card__icon { box-shadow: 0 .35rem .7rem rgba(31, 58, 87, .1); transform: translateY(-3px) scale(1.06); }
.document-card__name { width: 100%; overflow: hidden; font-size: .62rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; }

/* Rich dashboard */
.dashboard { background: linear-gradient(180deg, #f7fbff 0, #fff 21rem); }
.dashboard-hero { position: relative; display: grid; min-height: 12rem; grid-template-columns: minmax(0, 1.3fr) minmax(15rem, .7fr); overflow: hidden; padding: clamp(1.4rem, 3vw, 2.3rem); border-radius: 1.25rem; color: #fff; background: radial-gradient(circle at 82% 18%, rgba(120,211,255,.42), transparent 24%), radial-gradient(circle at 72% 110%, rgba(138,109,255,.38), transparent 34%), linear-gradient(125deg, #0f4e97, #177ed1 52%, #32a6e8); box-shadow: 0 1.1rem 2.8rem rgba(21, 105, 181, .22); }
.dashboard-hero::after { content: ""; position: absolute; right: -4rem; bottom: -8rem; width: 20rem; height: 20rem; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; box-shadow: 0 0 0 3rem rgba(255,255,255,.04), 0 0 0 6rem rgba(255,255,255,.03); }
.dashboard-hero__content { position: relative; z-index: 2; align-self: center; }
.dashboard-hero__eyebrow { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .55rem; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: #dff3ff; background: rgba(255,255,255,.1); font-size: .65rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.dashboard-hero h1 { margin: .65rem 0 .35rem; color: #fff; font-size: clamp(1.75rem, 4vw, 2.65rem); line-height: 1; letter-spacing: -.055em; }
.dashboard-hero p { max-width: 35rem; margin: 0; color: #dcefff; font-size: .86rem; }
.dashboard-hero__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.dashboard-hero__primary { border-color: #fff; color: #1266ad; background: #fff; box-shadow: 0 .6rem 1.3rem rgba(9,65,118,.2); }
.dashboard-hero__primary:hover { border-color: #fff; color: #09518f; background: #f6fbff; transform: translateY(-2px); }
.dashboard-hero__secondary { border-color: rgba(255,255,255,.38); color: #fff; background: rgba(255,255,255,.11); box-shadow: none; backdrop-filter: blur(8px); }
.dashboard-hero__secondary:hover { border-color: rgba(255,255,255,.7); color: #fff; background: rgba(255,255,255,.2); }
.dashboard-hero__art { position: relative; z-index: 2; min-height: 8rem; }
.dashboard-hero__art > span { position: absolute; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.34); border-radius: 1rem; color: #fff; background: rgba(255,255,255,.17); box-shadow: 0 .8rem 1.8rem rgba(7,55,103,.18); backdrop-filter: blur(12px); animation: dashboard-float 4.5s ease-in-out infinite; }
.dashboard-hero__art > span:nth-child(1) { top: 1rem; right: 4.5rem; width: 5.4rem; height: 5.4rem; }
.dashboard-hero__art > span:nth-child(1) .icon { width: 2.35rem; height: 2.35rem; }
.dashboard-hero__art > span:nth-child(2) { top: .2rem; right: .4rem; width: 2.8rem; height: 2.8rem; animation-delay: -.8s; }
.dashboard-hero__art > span:nth-child(3) { right: 1.4rem; bottom: .25rem; width: 3.3rem; height: 3.3rem; animation-delay: -1.8s; }
.dashboard-hero__art > span:nth-child(4) { bottom: -.1rem; left: 1.2rem; width: 2.75rem; height: 2.75rem; animation-delay: -2.7s; }
@keyframes dashboard-float { 50% { transform: translateY(-7px) rotate(3deg); } }
.dashboard-overview { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(23rem, .85fr); gap: .85rem; margin-top: .9rem; }
.storage-overview, .dashboard-stat, .dashboard-panel { border: 1px solid #e0e8f2; background: rgba(255,255,255,.95); box-shadow: 0 .45rem 1.4rem rgba(34,65,99,.055); }
.storage-overview { padding: 1.05rem 1.15rem; border-radius: 1rem; }
.storage-overview__head { display: flex; align-items: center; gap: .65rem; }
.storage-overview__head > span:last-child { display: grid; }
.storage-overview__head strong { font-size: .78rem; }
.storage-overview__head small { color: var(--color-ink-muted); font-size: .62rem; }
.dashboard-card-icon { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: .7rem; color: #2d91e7; background: #e9f5ff; }
.dashboard-card-icon .icon { width: 1.1rem; height: 1.1rem; }
.storage-overview__body { display: grid; grid-template-columns: 8rem minmax(0,1fr); align-items: center; gap: 1rem; margin-top: .6rem; }
.storage-ring { position: relative; display: grid; width: 7.2rem; height: 7.2rem; place-items: center; }
.storage-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.storage-ring circle { fill: none; stroke: #edf2f7; stroke-width: 5; }
.storage-ring .storage-ring__value { stroke: #329df1; stroke-linecap: round; animation: ring-in 700ms var(--ease-standard); }
@keyframes ring-in { from { stroke-dasharray: 0 100; } }
.storage-ring > span { display: grid; text-align: center; }
.storage-ring strong { font-size: 1.2rem; letter-spacing: -.04em; }
.storage-ring small { color: var(--color-ink-muted); font-size: .58rem; }
.storage-categories { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .8rem; }
.storage-categories > div { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .4rem; min-width: 0; padding: .45rem .5rem; border-radius: .5rem; background: #f8fafc; }
.storage-categories i { width: .48rem; height: .48rem; border-radius: 50%; background: #329df1; box-shadow: 0 0 0 .2rem #e7f4ff; }
.storage-categories [data-tone="2"] i { background: #a66bea; box-shadow: 0 0 0 .2rem #f0e9fb; }
.storage-categories [data-tone="3"] i { background: #35ba78; box-shadow: 0 0 0 .2rem #e6f7ef; }
.storage-categories [data-tone="4"] i { background: #efa63d; box-shadow: 0 0 0 .2rem #fff3df; }
.storage-categories span, .storage-categories strong { overflow: hidden; font-size: .6rem; text-overflow: ellipsis; white-space: nowrap; }
.storage-categories span { color: var(--color-ink-muted); }
.dashboard-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.dashboard-stat { display: grid; min-width: 0; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: .6rem; padding: .75rem; border-radius: .85rem; text-align: left; cursor: pointer; transition: transform var(--duration-standard), box-shadow var(--duration-standard), border-color var(--duration-standard); }
.dashboard-stat:hover { border-color: #bfdcf5; box-shadow: 0 .8rem 1.5rem rgba(34,65,99,.1); transform: translateY(-3px); }
.dashboard-stat > span:nth-child(2) { display: grid; }
.dashboard-stat strong { font-size: 1.05rem; line-height: 1; }
.dashboard-stat small { margin-top: .18rem; color: var(--color-ink-muted); font-size: .6rem; }
.dashboard-stat em { grid-column: 1 / -1; color: #338edc; font-size: .58rem; font-style: normal; font-weight: 650; }
.dashboard-stat[data-tone="amber"] .dashboard-card-icon { color: #c17a19; background: #fff2dc; }
.dashboard-stat[data-tone="violet"] .dashboard-card-icon { color: #8755cd; background: #f1eafd; }
.dashboard-stat[data-tone="green"] .dashboard-card-icon { color: #219b65; background: #e6f8ef; }
.dashboard-panel { padding: 1rem; border-radius: 1rem; }
.dashboard .dashboard-panel { margin-top: .9rem; }
.dashboard-panel .section-head { margin-bottom: .75rem; }
.dashboard-panel .section-head > span { display: grid; gap: .04rem; }
.dashboard-panel .section-head h2 { font-size: .86rem; }
.section-kicker { color: var(--color-action); font-size: .56rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.dashboard .folder-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.dashboard .folder-card { min-height: 4.5rem; padding: .65rem; border-color: #e3eaf2; border-radius: .75rem; background: linear-gradient(145deg, #fbfdff, #f5f9fd); }
.folder-card__icon { display: grid; width: 2.2rem; height: 2.2rem; flex: 0 0 auto; place-items: center; border-radius: .65rem; color: #328edc; background: #e6f3ff; }
.folder-card[data-tone="2"] .folder-card__icon { color: #8c5bd2; background: #f0eafd; }
.folder-card[data-tone="3"] .folder-card__icon { color: #22a06b; background: #e5f8ee; }
.folder-card[data-tone="4"] .folder-card__icon { color: #ca7d19; background: #fff1db; }
.folder-card__copy { display: grid; gap: .12rem; }
.folder-card__copy strong { overflow: hidden; font-size: .69rem; text-overflow: ellipsis; white-space: nowrap; }
.folder-card__copy small { color: var(--color-ink-muted); font-size: .56rem; font-weight: 450; }
.folder-card__arrow { margin-left: auto; color: #9aa9b9; transition: transform var(--duration-standard), color var(--duration-standard); }
.folder-card:hover .folder-card__arrow { color: var(--color-action); transform: translateX(3px); }
.dashboard .document-card { min-height: 8.3rem; align-content: stretch; gap: .45rem; padding: .45rem; border-color: #e3eaf2; border-radius: .75rem; background: #fff; }
.document-card__preview { display: grid; min-height: 4.7rem; place-items: center; border-radius: .55rem; background: linear-gradient(145deg, #f5f8fc, #edf3f8); }
.dashboard .document-card__icon { width: 2.8rem; height: 2.8rem; }
.dashboard .document-card__name { padding-inline: .25rem; color: var(--color-ink-soft); font-size: .64rem; font-weight: 650; text-align: left; }
.document-card__meta { overflow: hidden; padding: 0 .25rem .2rem; color: var(--color-ink-muted); font-size: .52rem; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-panel--files { overflow: visible; }

/* File lists */
.file-toolbar { display: flex; min-height: 2.7rem; align-items: center; justify-content: space-between; gap: .75rem; padding: .35rem .65rem; border: 1px solid var(--color-border); border-bottom: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; background: #fff; }
.file-toolbar__status { color: var(--color-ink-muted); font-size: var(--font-size-xs); }
.toolbar-actions { display: flex; align-items: center; gap: .35rem; }
.toolbar-button { display: inline-flex; min-height: 1.9rem; align-items: center; gap: .35rem; padding: .3rem .55rem; border: 1px solid var(--color-border); border-radius: var(--radius-xs); color: var(--color-ink-muted); background: #fff; font-size: var(--font-size-xs); cursor: pointer; }
.toolbar-button:hover { color: var(--color-ink); background: var(--color-surface-hover); }
.toolbar-button.is-active { border-color: #b9dafa; color: var(--color-action); background: var(--color-action-soft); }
.filter-menu { position: relative; }
.filter-menu > summary { list-style: none; }
.filter-menu > summary::-webkit-details-marker { display: none; }
.filter-count { display: grid; min-width: 1rem; height: 1rem; place-items: center; border-radius: 999px; color: #fff; background: var(--color-action); font-size: .55rem; font-weight: 700; }
.filter-popover { position: absolute; z-index: 85; top: calc(100% + .45rem); right: 0; display: grid; width: min(19rem, calc(100vw - 2rem)); gap: .65rem; padding: .85rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-popover); animation: popover-in 180ms var(--ease-standard); transform-origin: top right; }
@keyframes popover-in { from { opacity: 0; transform: translateY(-.25rem) scale(.98); } }
.filter-popover__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .55rem; border-bottom: 1px solid var(--color-border); }
.filter-popover__head strong { font-size: var(--font-size-sm); }
.filter-popover__head span { color: var(--color-ink-muted); font-size: var(--font-size-xs); }
.filter-popover label { display: grid; gap: .25rem; color: var(--color-ink-soft); font-size: var(--font-size-xs); font-weight: 600; }
.filter-popover input, .filter-popover select { min-height: 2.1rem; padding: .4rem .55rem; font-size: var(--font-size-xs); }
.filter-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.filter-popover__actions { display: flex; justify-content: flex-end; gap: .4rem; padding-top: .2rem; }
.view-switch { display: inline-flex; gap: .2rem; padding: .15rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-subtle); }
.view-switch .toolbar-button { width: 1.75rem; min-height: 1.6rem; justify-content: center; padding: 0; border-color: transparent; background: transparent; }
.view-switch .toolbar-button.is-active { color: var(--color-action); background: #fff; box-shadow: 0 1px 3px rgba(18, 28, 45, .1); }
.drop-zone { position: relative; min-height: 11rem; overflow: visible; border: 1px solid var(--color-border); border-radius: 0 0 var(--radius-md) var(--radius-md); background: #fff; transition: border-color var(--duration-fast), background var(--duration-fast); }
.drop-zone:not(:has(+ *)) { margin-bottom: 0; }
.drop-zone.is-dragging { border: 2px dashed var(--color-action); background: var(--color-action-soft); }
.drop-overlay { position: absolute; z-index: 6; inset: .75rem; display: grid; place-items: center; border: 2px dashed var(--color-action); border-radius: var(--radius-md); color: var(--color-action); background: rgba(242, 249, 255, .96); font-weight: 600; pointer-events: none; }
.file-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.file-table th, .file-table td { height: 2.75rem; padding: .48rem .6rem; border-bottom: 1px solid #edf0f4; text-align: left; vertical-align: middle; }
.file-table tr:last-child td { border-bottom: 0; }
.file-table th { color: #8e98a7; background: #fbfcfd; font-size: .62rem; font-weight: 500; }
.file-table th:first-child, .file-table td:first-child { width: 2.2rem; padding-right: .15rem; text-align: center; }
.file-table th:nth-child(2) { width: 32%; }
.file-table th:last-child, .file-table td:last-child { width: 3rem; text-align: right; }
.file-table tbody tr { animation: row-in 260ms backwards var(--ease-standard); transition: background var(--duration-fast); }
.file-table tbody tr:nth-child(2n) { animation-delay: 22ms; }
.file-table tbody tr:nth-child(3n) { animation-delay: 44ms; }
@keyframes row-in { from { opacity: 0; transform: translateY(.22rem); } }
.file-table tbody tr:hover { background: #fbfdff; }
.file-table tbody tr.is-selected { background: var(--color-action-soft); }
.row-check { width: .85rem; min-height: .85rem; margin: 0; accent-color: var(--color-action); }
.file-name { display: flex; min-width: 0; align-items: center; gap: .55rem; max-width: 100%; padding: 0; border: 0; text-align: left; background: transparent; cursor: pointer; }
.file-name:hover .file-name__label { color: var(--color-action); }
.file-name__label { min-width: 0; overflow: hidden; color: var(--color-ink-soft); font-size: var(--font-size-xs); font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.file-icon { position: relative; display: grid; width: 1.75rem; height: 1.75rem; flex: 0 0 auto; place-items: center; border-radius: .45rem; color: #688198; background: #edf3f8; font-size: .48rem; font-weight: 750; text-transform: uppercase; transition: transform var(--duration-standard) var(--ease-standard), box-shadow var(--duration-standard); }
.file-icon .icon { width: 1.05rem; height: 1.05rem; transform: translateY(-.14rem); }
.file-extension { position: absolute; right: .16rem; bottom: .08rem; max-width: calc(100% - .32rem); overflow: hidden; padding: .02rem .12rem; border-radius: .15rem; color: currentColor; background: rgba(255,255,255,.88); font-size: .36rem; font-style: normal; font-weight: 850; line-height: 1.25; text-overflow: clip; letter-spacing: -.02em; }
.file-icon--folder { color: var(--color-action); background: var(--color-action-soft); }
.file-icon--pdf { color: #e94f62; background: #fff0f2; }
.file-icon--image { color: #23a46a; background: #ebf9f2; }
.file-icon--sheet { color: #20a873; background: #eaf9f2; }
.file-icon--audio { color: #8a5ed0; background: #f2edfb; }
.file-icon--document { color: #2b82d4; background: #eaf4ff; }
.file-name:hover .file-icon, .item-card:hover .file-icon { box-shadow: 0 .3rem .7rem rgba(38, 61, 87, .12); transform: translateY(-2px) scale(1.04); }
.file-table td:not(:nth-child(2)):not(:last-child) { color: var(--color-ink-muted); font-size: .64rem; }
.share-state { display: inline-flex; align-items: center; gap: .35rem; color: var(--color-ink-muted); font-size: .62rem; }
.share-state::before { content: ""; width: .35rem; height: .35rem; border-radius: 50%; background: #cbd2dc; }
.share-state.is-shared::before { background: var(--color-success); }
.row-menu-wrap { position: relative; }
.row-menu { position: fixed; z-index: 190; min-width: 11rem; text-align: left; }
.item-grid { display: grid; grid-template-columns: repeat(6, minmax(7.5rem, 1fr)); gap: .65rem; padding: .75rem; }
.item-card { position: relative; min-width: 0; overflow: visible; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #fff; transition: border-color var(--duration-fast), box-shadow var(--duration-fast), transform var(--duration-fast); }
.item-card, .folder-card, .document-card { animation: card-rise 360ms backwards var(--ease-standard); }
.item-card:nth-child(2n), .folder-card:nth-child(2n), .document-card:nth-child(2n) { animation-delay: 35ms; }
@keyframes card-rise { from { opacity: 0; transform: translateY(.5rem) scale(.985); } }
.item-card:nth-child(3n), .folder-card:nth-child(3n), .document-card:nth-child(3n) { animation-delay: 70ms; }
.item-card:hover { border-color: #c8def3; box-shadow: var(--shadow-soft); transform: translateY(-1px); }
.item-card.is-selected { border-color: #acd5fa; background: #fbfdff; box-shadow: 0 0 0 2px var(--color-action-soft); }
.item-card__open { display: grid; width: 100%; min-width: 0; justify-items: center; gap: .7rem; padding: 1rem .7rem .75rem; border: 0; text-align: center; background: transparent; cursor: pointer; }
.item-card__visual { width: 3.25rem; height: 3.25rem; border-radius: .8rem; font-size: .65rem; }
.item-card__visual .icon { width: 1.7rem; height: 1.7rem; }
.item-card__visual .file-extension { right: .28rem; bottom: .2rem; padding: .05rem .18rem; font-size: .48rem; }
.item-card__copy { display: grid; width: 100%; min-width: 0; gap: .15rem; }
.item-card__copy strong, .item-card__copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-card__copy strong { color: var(--color-ink-soft); font-size: var(--font-size-xs); }
.item-card__copy small { color: var(--color-ink-muted); font-size: .58rem; }
.item-card__footer { display: flex; min-height: 2.15rem; align-items: center; justify-content: space-between; gap: .4rem; padding: .3rem .35rem .3rem .65rem; border-top: 1px solid #edf0f4; }
.item-card__footer .button-icon { width: 1.7rem; min-height: 1.7rem; font-size: .65rem; }
.item-card__footer .share-state { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty-state, .inline-error { display: grid; justify-items: center; gap: .6rem; padding: clamp(2.5rem, 7vw, 5rem) var(--space-5); text-align: center; }
.empty-state--compact { min-height: 11rem; padding-block: 2rem; }
.empty-state h2, .inline-error h2, .inline-error h1 { margin: 0; font-size: var(--font-size-lg); }
.empty-state p, .inline-error p { max-width: 30rem; margin: 0; color: var(--color-ink-muted); font-size: var(--font-size-sm); }
.empty-icon { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: .8rem; color: var(--color-action); background: var(--color-action-soft); font-size: 1.25rem; }

/* Panels, dialogs and feedback */
.details-panel { grid-area: details; z-index: 15; min-width: 0; overflow: auto; border-left: 1px solid var(--color-border); background: var(--color-canvas); animation: panel-in var(--duration-emphasis) var(--ease-standard); }
@keyframes panel-in { from { opacity: 0; transform: translateX(1rem); } }
.details-panel__head, .upload-panel__head { display: flex; min-height: 3.75rem; align-items: center; justify-content: space-between; gap: var(--space-3); padding: .75rem 1rem; border-bottom: 1px solid var(--color-border); background: #fff; }
.details-panel__head h2, .upload-panel__head h2 { min-width: 0; overflow: hidden; margin: 0; font-size: var(--font-size-lg); text-overflow: ellipsis; white-space: nowrap; }
.details-section { padding: 1rem; border-bottom: 1px solid var(--color-border); }
.details-section h3 { margin: 0 0 .75rem; font-size: var(--font-size-sm); }
.details-section__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.details-section__head h3 { margin: 0; }
.details-section__head .section-link { display: inline-flex; align-items: center; gap: .3rem; }
.preview { display: grid; min-height: 9rem; place-items: center; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; }
.preview img { display: block; max-width: 100%; max-height: 17rem; object-fit: contain; }
.preview__frame { display: block; width: 100%; min-height: 22rem; border: 0; background: #fff; }
.preview__frame--text { min-height: 16rem; }
.preview__frame--office { min-height: 31rem; }
.preview__fallback { display: grid; justify-items: center; gap: .5rem; padding: var(--space-5); color: var(--color-ink-muted); text-align: center; font-size: var(--font-size-sm); }
.preview__fallback .file-icon { width: 3rem; height: 3rem; }
.preview__fallback strong { color: var(--color-ink-soft); }
.preview__fallback small { max-width: 18rem; line-height: 1.5; }
.properties { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; margin: 0; font-size: var(--font-size-xs); }
.properties dt { color: var(--color-ink-muted); }
.properties dd { margin: 0; overflow-wrap: anywhere; text-align: right; }
.upload-panel { position: fixed; z-index: 65; right: 1rem; bottom: 1rem; width: min(32rem, calc(100vw - 2rem)); max-height: min(28rem, calc(100dvh - 5rem)); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-popover); animation: upload-in var(--duration-emphasis) var(--ease-standard); }
@keyframes upload-in { from { opacity: 0; transform: translateY(1rem); } }
.upload-panel.is-minimized .upload-list { display: none; }
.upload-list { max-height: 23rem; overflow-y: auto; }
.upload-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1rem; padding: .8rem 1rem; border-bottom: 1px solid var(--color-border); }
.upload-item__name { overflow: hidden; font-size: var(--font-size-sm); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.upload-item__status { color: var(--color-ink-muted); font-size: var(--font-size-xs); }
.upload-item .progress-native { grid-column: 1 / -1; margin: 0; }
.upload-item__actions { display: flex; gap: .5rem; }
.upload-item__actions button { border: 0; color: var(--color-action); background: transparent; font-size: var(--font-size-xs); cursor: pointer; }
.dialog-backdrop, .nav-backdrop { position: fixed; z-index: 90; inset: 0; background: var(--color-overlay); animation: fade-in var(--duration-standard); }
@keyframes fade-in { from { opacity: 0; } }
.dialog { position: fixed; z-index: 100; top: 50%; left: 50%; width: min(34rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-popover); transform: translate(-50%, -50%); animation: dialog-in var(--duration-standard) var(--ease-standard); }
@keyframes dialog-in { from { opacity: 0; transform: translate(-50%, calc(-50% + .8rem)); } }
.dialog__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.15rem; border-bottom: 1px solid var(--color-border); }
.dialog__head h2 { margin: 0; font-size: var(--font-size-lg); }
.dialog__body { padding: 1.15rem; }
.dialog__footer { display: flex; justify-content: flex-end; gap: .5rem; padding: .8rem 1.15rem; border-top: 1px solid var(--color-border); background: #fbfcfe; }
.dialog form { display: grid; gap: .35rem; }
.dialog-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; margin-bottom: 1rem; padding: .2rem; border-radius: var(--radius-sm); background: var(--color-surface-subtle); }
.dialog-tab { min-height: 2.1rem; border: 0; border-radius: .38rem; color: var(--color-ink-muted); background: transparent; font-size: var(--font-size-sm); cursor: pointer; }
.dialog-tab[aria-selected="true"] { color: var(--color-ink); background: #fff; box-shadow: 0 1px 3px rgba(18, 28, 45, .08); font-weight: 600; }

.preview-modal { position: fixed; z-index: 100; inset: 5vh 4vw; display: grid; grid-template-rows: auto minmax(0,1fr); overflow: hidden; border: 1px solid rgba(216,225,235,.95); border-radius: 1rem; background: #fff; box-shadow: 0 1.5rem 5rem rgba(10,28,50,.3); animation: preview-modal-in 260ms var(--ease-standard); transition: inset var(--duration-emphasis) var(--ease-standard), border-radius var(--duration-emphasis); }
.preview-modal.is-fullscreen { inset: 0; border: 0; border-radius: 0; }
@keyframes preview-modal-in { from { opacity: 0; transform: translateY(1rem) scale(.985); } }
.preview-modal__head { display: flex; min-height: 4rem; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem .8rem .65rem 1rem; border-bottom: 1px solid var(--color-border); background: #fff; }
.preview-modal__identity, .preview-modal__actions { display: flex; min-width: 0; align-items: center; gap: .55rem; }
.preview-modal__identity > span:last-child { display: grid; min-width: 0; line-height: 1.25; }
.preview-modal__identity strong, .preview-modal__identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-modal__identity strong { font-size: .8rem; }
.preview-modal__identity small { color: var(--color-ink-muted); font-size: .58rem; font-weight: 450; }
.preview-modal__stage { display: grid; min-height: 0; overflow: auto; place-items: center; padding: 1rem; background: #e9eff6; }
.preview-modal__stage > .preview__frame { width: 100%; height: 100%; min-height: 0; border-radius: .55rem; box-shadow: 0 .6rem 1.8rem rgba(27,48,73,.1); }
.preview-modal__stage > img { display: block; width: auto; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; border-radius: .45rem; box-shadow: 0 .7rem 2rem rgba(27,48,73,.16); }
.preview-modal__stage > .preview__fallback { align-self: center; border-radius: .8rem; background: #fff; }

.website-context-menu { position: fixed; z-index: 180; display: grid; width: 15rem; padding: .38rem; border: 1px solid rgba(217,226,236,.98); border-radius: .75rem; background: rgba(255,255,255,.98); box-shadow: 0 1.1rem 3.2rem rgba(19,39,64,.2); backdrop-filter: blur(18px); animation: context-menu-in 150ms var(--ease-standard); transform-origin: top left; }
@keyframes context-menu-in { from { opacity: 0; transform: scale(.96) translateY(-.2rem); } }
.context-menu__title { display: flex; min-width: 0; align-items: center; gap: .55rem; padding: .45rem .5rem; color: var(--color-ink-soft); font-size: .67rem; font-weight: 650; }
.context-menu__title > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.context-menu__separator { height: 1px; margin: .3rem .2rem; background: var(--color-border); }
.website-context-menu > button { display: grid; min-height: 2.2rem; grid-template-columns: 1.1rem minmax(0,1fr) auto; align-items: center; gap: .55rem; padding: .42rem .55rem; border: 0; border-radius: .45rem; color: var(--color-ink-soft); text-align: left; background: transparent; font-size: .69rem; cursor: pointer; }
.website-context-menu > button:hover, .website-context-menu > button:focus-visible { color: var(--color-action); background: var(--color-action-soft); }
.website-context-menu .icon { width: .9rem; height: .9rem; }
.website-context-menu kbd { color: #a0a9b6; font: 500 .56rem var(--font-sans); }
.permission-list { display: grid; gap: .65rem; padding: 0; margin: 1rem 0; border: 0; }
.permission-list legend { margin-bottom: .5rem; font-weight: 600; }
.recipient-search { position: relative; margin-top: .3rem; }
.recipient-search .icon { position: absolute; z-index: 1; top: 50%; left: .7rem; color: var(--color-ink-muted); transform: translateY(-50%); }
.recipient-search input { padding-left: 2.25rem; }
.recipient-picker { display: grid; max-height: 15.5rem; gap: .4rem; overflow-y: auto; padding: .4rem; margin-top: .55rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-subtle); }
.recipient-option { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .65rem; padding: .55rem .65rem; margin: 0 !important; border: 1px solid transparent; border-radius: var(--radius-sm); background: #fff; cursor: pointer; transition: border-color var(--duration-fast), box-shadow var(--duration-fast), transform var(--duration-fast); }
.recipient-option:hover { border-color: #c8def3; transform: translateY(-1px); }
.recipient-option:has(input:checked) { border-color: #9dccf8; box-shadow: 0 0 0 2px var(--color-action-soft); }
.recipient-option input { position: absolute; width: 1px; min-height: 1px; opacity: 0; }
.recipient-option__copy { display: grid; min-width: 0; line-height: 1.3; }
.recipient-option__copy strong, .recipient-option__copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recipient-option__copy strong { font-size: var(--font-size-sm); }
.recipient-option__copy small { color: var(--color-ink-muted); font-size: var(--font-size-xs); font-weight: 400; }
.recipient-option__check { display: grid; width: 1.25rem; height: 1.25rem; place-items: center; border-radius: 50%; color: transparent; background: var(--color-surface-subtle); font-size: .68rem; transition: color var(--duration-fast), background var(--duration-fast), transform var(--duration-standard); }
.recipient-option:has(input:checked) .recipient-option__check { color: #fff; background: var(--color-action); transform: scale(1.08); }
.recipient-empty { margin: .5rem; color: var(--color-ink-muted); font-size: var(--font-size-sm); text-align: center; }
.check-row { display: flex; gap: .65rem; align-items: flex-start; }
.check-row input { width: 1rem; min-height: 1rem; flex: 0 0 auto; margin-top: .1rem; }
.check-row span { display: grid; }
.check-row small { color: var(--color-ink-muted); }
.link-result { display: grid; grid-template-columns: 1fr auto; gap: .5rem; margin-top: 1rem; }
.link-result input { font-family: var(--font-mono); font-size: var(--font-size-xs); }
.toast-region { position: fixed; z-index: 150; top: 4.5rem; right: 1rem; display: grid; gap: .5rem; width: min(22rem, calc(100vw - 2rem)); pointer-events: none; }
.toast { display: flex; gap: .65rem; align-items: flex-start; padding: .65rem .8rem; border: 1px solid var(--color-border); border-left: 3px solid var(--color-action); border-radius: var(--radius-sm); background: #fff; box-shadow: var(--shadow-popover); font-size: var(--font-size-sm); animation: toast-in var(--duration-standard) var(--ease-standard); }
.toast.is-error { border-left-color: var(--color-danger); }
@keyframes toast-in { from { opacity: 0; transform: translateX(.75rem); } }

/* Admin and public share */
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1.5rem; }
.metric { padding: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; }
.metric { animation: card-rise 360ms both var(--ease-standard); }
.metric::before { content: ""; display: block; width: 1.75rem; height: .2rem; margin-bottom: .75rem; border-radius: 999px; background: var(--color-action); }
.metric strong { display: block; font-size: 1.25rem; letter-spacing: -.035em; }
.metric span { color: var(--color-ink-muted); font-size: var(--font-size-xs); }
.admin-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .65rem; }
.admin-toolbar h2 { margin: 0; font-size: var(--font-size-sm); }
.status-pill { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--font-size-xs); }
.status-pill::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: var(--color-success); }
.status-pill.is-disabled::before { background: var(--color-danger); }

/* Administration — visual system from the governance reference. */
body.admin-experience { background: #f5f9ff; }
.admin-experience .app-shell, .admin-experience .app-shell:not(.has-details) { grid-template: 4.45rem minmax(0, 1fr) / 16.25rem minmax(0, 1fr) 0; grid-template-areas: "sidebar topbar topbar" "sidebar workspace details"; background: #f5f9ff; }
.admin-experience .topbar { grid-template-columns: minmax(18rem, 35rem) auto; gap: 1rem; padding: 0 clamp(1.35rem, 2.7vw, 2.6rem); border: 0; background: rgba(255, 255, 255, .96); box-shadow: 0 .25rem 1rem rgba(34, 64, 112, .1); }
.admin-experience .search { width: min(100%, 35rem); }
.admin-experience .search input { min-height: 2.55rem; padding: .5rem 2.65rem; border: 0; border-radius: .55rem; color: #27385e; background: #edf3ff; font-size: .78rem; font-weight: 500; }
.admin-experience .search input::placeholder { color: #5d7097; }
.admin-experience .search input:focus { box-shadow: 0 0 0 .2rem rgba(62, 112, 237, .13); }
.admin-experience .search__icon { left: .95rem; width: .82rem; height: .82rem; border-color: #21365e; }
.admin-experience .topbar__actions { gap: 1.2rem; }
.topbar-help { display: none; align-items: center; gap: .45rem; padding: .35rem; border: 0; color: #101c3a; background: transparent; font-size: .76rem; font-weight: 650; cursor: pointer; }
.admin-experience .topbar-help { display: inline-flex; }
.topbar-help .icon { width: 1.18rem; height: 1.18rem; }
.admin-experience .topbar-notifications { position: relative; width: 2rem; min-height: 2.2rem; justify-content: center; padding: 0; color: #13234b; }
.admin-experience .topbar-notifications .icon { width: 1.25rem; height: 1.25rem; }
.admin-experience .topbar-notifications:hover { border-color: transparent; background: transparent; color: #1e60d9; }
.admin-experience .topbar-notifications .counter { position: absolute; top: -.1rem; right: -.3rem; min-width: 1.05rem; padding: .08rem .22rem; border: 2px solid #fff; color: #fff; background: #ef3e55; font-size: .58rem; line-height: 1; }
.admin-experience .topbar-notifications .counter[data-empty="true"] { display: none; }
.admin-experience .account__button { gap: .65rem; padding: .3rem 0; color: #101b38; }
.admin-experience .account__button:hover { border-color: transparent; background: transparent; }
.admin-experience .account__button .avatar { width: 2.45rem; height: 2.45rem; background: linear-gradient(145deg, #19398b, #091a59); font-size: .85rem; }
.admin-experience .account__name { max-width: 12rem; font-size: .72rem; font-weight: 700; }
.admin-experience .account__copy { display: grid; gap: .1rem; min-width: 0; text-align: left; line-height: 1.15; }
.admin-experience .account__copy small { max-width: 12rem; overflow: hidden; color: #4c638c; font-size: .62rem; font-weight: 450; text-overflow: ellipsis; white-space: nowrap; }
.admin-experience .sidebar { padding: 1.15rem .65rem .75rem; border: 0; color: #dbe6ff; background: radial-gradient(circle at 88% 68%, rgba(59, 117, 255, .33), transparent 25%), linear-gradient(165deg, #12264d 0%, #0b2457 56%, #102b66 100%); box-shadow: .5rem 0 1.6rem rgba(15, 38, 90, .1); }
.admin-experience .sidebar > .brand { min-height: 4.25rem; margin: 0 .75rem 1.2rem; }
.admin-experience .sidebar > .brand .brand__logo { width: 12.6rem; filter: brightness(0) invert(1); opacity: .95; }
.admin-experience .profile-card { display: none; }
.admin-experience .nav-label { margin: .9rem .85rem .45rem; color: #a5bfe9; font-size: .58rem; font-weight: 700; letter-spacing: .12em; }
.admin-experience .nav-label--admin { padding-top: 1.25rem; margin-top: 1.15rem; border-top: 1px solid rgba(190, 211, 255, .2); }
.admin-experience .nav-list { gap: .22rem; }
.admin-experience .nav-item { min-height: 2.7rem; gap: .85rem; padding: .6rem .8rem; border-radius: .5rem; color: #eff5ff; font-size: .8rem; font-weight: 500; }
.admin-experience .nav-item::before { left: -.65rem; width: .18rem; background: #82afff; }
.admin-experience .nav-item .icon { width: 1.08rem; height: 1.08rem; color: #dce9ff; }
.admin-experience .nav-item:hover { color: #fff; background: rgba(119, 167, 255, .12); }
.admin-experience .nav-item.is-active { color: #fff; background: linear-gradient(100deg, rgba(67, 125, 246, .75), rgba(53, 104, 215, .55)); box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 .35rem 1rem rgba(3, 18, 58, .16); }
.admin-experience .nav-item.is-active .icon { color: #fff; }
.admin-experience .storage-card { padding: 3.85rem .85rem .8rem; margin: auto .05rem .1rem; border-color: rgba(129, 169, 244, .19); border-radius: .72rem; color: #eef5ff; background: linear-gradient(150deg, rgba(48, 102, 211, .52), rgba(27, 67, 148, .36)); box-shadow: inset 0 1px rgba(255, 255, 255, .08); }
.admin-experience .storage-card__art { top: .8rem; left: .85rem; width: 2.65rem; height: 2.65rem; border-radius: .55rem; color: #fff; background: linear-gradient(145deg, #2e78ff, #1651d6); box-shadow: 0 .55rem 1.1rem rgba(5, 26, 82, .32); }
.admin-experience .storage-card__art .icon { width: 1.4rem; height: 1.4rem; }
.admin-experience .storage-card__heading { color: #f5f8ff; font-size: .75rem; }
.admin-experience .storage-card__heading span, .admin-experience .storage-card p { color: #d2e2ff; }
.admin-experience .progress-native { height: .48rem; background: rgba(207, 228, 255, .25); }
.admin-experience .progress-native::-webkit-progress-bar { background: rgba(207, 228, 255, .25); }
.admin-experience .progress-native::-webkit-progress-value { background: linear-gradient(90deg, #77aaff, #c6dbff); }
.admin-experience .progress-native::-moz-progress-bar { background: #77aaff; }
.storage-card__action { display: flex; width: 100%; min-height: 2.1rem; align-items: center; justify-content: center; gap: .5rem; padding: .4rem .6rem; margin-top: .9rem; border: 1px solid rgba(160, 195, 255, .5); border-radius: .42rem; color: #dceaff; background: rgba(20, 65, 153, .28); font-size: .67rem; font-weight: 650; cursor: pointer; }
.storage-card__action:hover { color: #fff; border-color: #bfd8ff; background: rgba(46, 104, 224, .4); }
.admin-experience .workspace { background: radial-gradient(circle at 11% 5%, rgba(214, 232, 255, .5), transparent 30%), #f6faff; }
.admin-workspace { max-width: 100rem; padding: 1.2rem clamp(1.25rem, 2.7vw, 2.55rem) 1.2rem; margin: 0 auto; }
.admin-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin: 0 0 1.25rem; }
.admin-page-head > div { position: relative; padding-left: 1.15rem; }
.admin-page-head__back { position: absolute; top: .03rem; left: 0; color: #9aabc9; font-size: 1.35rem; line-height: 1; }
.admin-page-head h1 { margin: 0; color: #09153a; font-size: clamp(1.45rem, 2vw, 1.85rem); line-height: 1.1; letter-spacing: -.045em; }
.admin-page-head p { margin: .3rem 0 0; color: #4c628c; font-size: .78rem; }
.admin-page-head__date { display: inline-flex; align-items: center; gap: .42rem; margin: .45rem 0 0; color: #53698f; font-size: .67rem; font-weight: 600; text-transform: capitalize; white-space: nowrap; }
.admin-page-head__date .icon { width: .92rem; height: .92rem; }
.admin-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1.15rem; }
.admin-metric { position: relative; display: grid; grid-template-columns: 3.05rem minmax(0, 1fr) auto; gap: .75rem; min-height: 6.4rem; align-items: start; padding: 1.05rem; border: 1px solid #dce5f2; border-radius: .68rem; background: rgba(255, 255, 255, .86); box-shadow: 0 .35rem .9rem rgba(47, 73, 119, .035); animation: card-rise 360ms both var(--ease-standard); }
.admin-metric:nth-child(2) { animation-delay: 45ms; }
.admin-metric:nth-child(3) { animation-delay: 90ms; }
.admin-metric:nth-child(4) { animation-delay: 135ms; }
.admin-metric__icon { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: 50%; color: #1260f3; background: #eaf0ff; }
.admin-metric__icon .icon { width: 1.55rem; height: 1.55rem; stroke-width: 1.8; }
.admin-metric__copy { display: grid; min-width: 0; }
.admin-metric__copy strong { color: #081334; font-size: clamp(1.05rem, 1.25vw, 1.35rem); letter-spacing: -.045em; line-height: 1.1; }
.admin-metric__copy small { margin-top: .2rem; color: #5b6f94; font-size: .72rem; }
.admin-metric__copy progress { width: 100%; height: .55rem; margin-top: .65rem; overflow: hidden; appearance: none; border: 0; border-radius: 999px; background: #e3eaf4; }
.admin-metric__copy progress::-webkit-progress-bar { background: #e3eaf4; }
.admin-metric__copy progress::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg, #4184f7, #81aefe); }
.admin-metric__copy progress::-moz-progress-bar { background: #4184f7; }
.admin-metric__copy i { margin-top: .28rem; color: #4e648d; font-size: .62rem; font-style: normal; text-align: right; }
.admin-metric em { align-self: start; padding: .35rem .55rem; border-radius: 999px; color: #14824b; background: #ddfae9; font-size: .63rem; font-style: normal; font-weight: 700; white-space: nowrap; }
.admin-users-panel { overflow: hidden; border: 1px solid #dbe5f2; border-radius: .72rem; background: rgba(255, 255, 255, .9); box-shadow: 0 .45rem 1.35rem rgba(50, 75, 118, .055); }
.admin-users-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border-bottom: 1px solid #e2e9f3; }
.admin-users-panel__head h2 { margin: 0; color: #101b3a; font-size: 1.05rem; letter-spacing: -.025em; }
.admin-users-panel__head p { margin: .16rem 0 0; color: #63769a; font-size: .7rem; }
.admin-users-panel__actions { display: flex; align-items: center; gap: .65rem; }
.admin-user-search { position: relative; display: flex; width: min(100%, 17.5rem); align-items: center; }
.admin-user-search .icon { position: absolute; z-index: 1; left: .7rem; width: 1rem; height: 1rem; color: #193560; }
.admin-user-search input { min-height: 2.55rem; padding: .45rem .65rem .45rem 2.2rem; border-color: #d3deec; border-radius: .48rem; color: #24375d; background: #fff; font-size: .7rem; }
.admin-filter-button { min-height: 2.55rem; padding-inline: .75rem; border-color: #d7e1ef; color: #172e57; font-size: .7rem; box-shadow: none; }
.admin-filter-button .icon { width: .95rem; height: .95rem; }
.admin-filter-button[aria-pressed="true"] { border-color: #7ca5f7; color: #1d5be0; background: #edf4ff; }
.admin-create-user { min-height: 2.55rem; padding-inline: 1.15rem; border-color: #1d61e7; background: linear-gradient(100deg, #2a78f1, #1655dc); box-shadow: 0 .45rem .85rem rgba(24, 82, 211, .19); font-size: .72rem; }
.admin-create-user > span { font-size: 1.25rem; font-weight: 350; line-height: .5; }
.admin-table-wrap { width: 100%; overflow: auto; }
.admin-user-table { width: 100%; min-width: 57rem; border-spacing: 0; color: #21345a; font-size: .69rem; }
.admin-user-table th { height: 2.55rem; padding: .45rem .75rem; border-bottom: 1px solid #dfe7f1; color: #587096; font-size: .63rem; font-weight: 650; text-align: left; white-space: nowrap; }
.admin-user-table th:first-child, .admin-user-table td:first-child { width: 2.6rem; padding-right: .15rem; text-align: center; }
.admin-user-table td { padding: .42rem .75rem; border-bottom: 1px solid #e4eaf3; vertical-align: middle; white-space: nowrap; }
.admin-user-table tbody tr:last-child td { border-bottom: 0; }
.admin-user-table tbody tr:hover { background: #f8fbff; }
.admin-row-checkbox { display: inline-block; width: 1rem; height: 1rem; border: 1px solid #b7c7df; border-radius: .25rem; background: #fff; }
.admin-user-identity { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .55rem; align-items: center; }
.admin-user-avatar { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #9bb1d5, #6180b2); font-size: .75rem; font-weight: 700; }
.admin-user-identity strong, .admin-user-identity small { display: block; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }
.admin-user-identity strong { color: #121d38; font-size: .69rem; }
.admin-user-identity small { margin-top: .08rem; color: #617696; font-size: .62rem; }
.admin-role { display: inline-flex; padding: .25rem .46rem; border-radius: 999px; color: #3c567f; background: #edf2f9; font-size: .6rem; font-weight: 650; }
.admin-role--administrator { color: #1747ca; background: #e5ecff; }
.admin-usage { display: grid; grid-template-columns: auto minmax(3.5rem, 1fr); align-items: center; gap: .55rem; }
.admin-usage progress { width: 100%; height: .5rem; overflow: hidden; appearance: none; border: 0; border-radius: 999px; background: #e5ecf5; }
.admin-usage progress::-webkit-progress-bar { background: #e5ecf5; }
.admin-usage progress::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg, #528afb, #96baff); }
.admin-usage progress::-moz-progress-bar { background: #528afb; }
.admin-experience .status-pill { padding: .22rem .48rem; border-radius: 999px; color: #12834d; background: #ddfaea; font-size: .61rem; font-weight: 700; }
.admin-experience .status-pill::before { width: .42rem; height: .42rem; background: #0acb72; }
.admin-experience .status-pill.is-disabled { color: #a53145; background: #ffebef; }
.admin-last-login { color: #344d76; }
.admin-row-action { width: 2rem; min-height: 2rem; border: 1px solid #d8e2ef; border-radius: .42rem; color: #273e68; background: #fff; font-size: .86rem; letter-spacing: .08em; }
.admin-row-action:hover { border-color: #93b6f5; color: #145ae0; background: #f4f8ff; }
.admin-empty-users { padding: 2.5rem; color: #617697; font-size: .8rem; text-align: center; }
.admin-users-panel__footer { display: flex; min-height: 3.1rem; align-items: center; padding: .5rem 1.1rem; border-top: 1px solid #e2e9f3; color: #5d7195; font-size: .66rem; }
.admin-users-panel__footer p { margin: 0; }
.admin-page-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 1.05rem .05rem 0; color: #516a93; font-size: .63rem; }
.admin-page-footer > strong, .admin-page-footer > span { display: block; }
.admin-page-footer > strong { color: #1457cd; font-size: .67rem; }
.admin-page-footer > span { margin-top: .18rem; }
.admin-page-footer > div { display: flex; gap: .85rem; align-items: center; }
.admin-page-footer a { color: inherit; text-decoration: none; }
.admin-page-footer a:hover { color: #1457cd; text-decoration: underline; }
.admin-page-footer i { display: block; width: 1px; height: .8rem; background: #c8d4e4; }

/* Main dashboard — visual system from the workspace reference. */
.reference-dashboard { max-width: 100rem; padding: .7rem clamp(1.25rem, 2.5vw, 2.45rem) 1.15rem; margin: 0 auto; }
.reference-dashboard__hero { position: relative; display: grid; min-height: 12.55rem; grid-template-columns: minmax(0, 1fr) minmax(17rem, .55fr); overflow: hidden; padding: clamp(1.35rem, 2.5vw, 2.25rem); border-radius: .8rem; color: #fff; background: radial-gradient(circle at 72% 42%, rgba(75, 161, 255, .49), transparent 31%), linear-gradient(112deg, #0b265c 0%, #113c86 45%, #247bd6 100%); box-shadow: 0 .9rem 1.75rem rgba(23, 78, 165, .16); }
.reference-dashboard__hero::before { content: ""; position: absolute; z-index: 0; top: -8rem; right: 10.5rem; width: 14rem; height: 31rem; background: linear-gradient(155deg, rgba(122, 181, 255, .2), rgba(255, 255, 255, .02)); transform: skewX(-28deg); }
.reference-dashboard__hero-copy, .reference-dashboard__hero-brand { position: relative; z-index: 1; }
.reference-dashboard__hero-copy > p { margin: 0 0 .45rem; color: #c4d7ff; font-size: .67rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.reference-dashboard__hero h1 { margin: 0; color: #fff; font-size: clamp(1.85rem, 3vw, 2.5rem); line-height: 1.1; letter-spacing: -.05em; }
.reference-dashboard__hero-copy > span { display: block; margin-top: .35rem; color: #f1f6ff; font-size: .94rem; }
.reference-dashboard__hero-copy > div { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; }
.reference-dashboard__new-folder, .reference-dashboard__upload { min-height: 2.65rem; padding-inline: 1.1rem; border-radius: .48rem; font-size: .75rem; }
.reference-dashboard__new-folder { border-color: #0c66ef; color: #fff; background: linear-gradient(120deg, #136ef4, #075ee6); box-shadow: 0 .5rem 1rem rgba(0, 23, 89, .25); }
.reference-dashboard__new-folder:hover { border-color: #4a95ff; background: #075cdf; }
.reference-dashboard__new-folder b { margin-right: .35rem; font-size: 1.35rem; font-weight: 350; line-height: .5; }
.reference-dashboard__upload { border-color: rgba(233, 243, 255, .78); color: #fff; background: rgba(4, 36, 99, .18); box-shadow: none; }
.reference-dashboard__upload:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .14); }
.reference-dashboard__upload .icon { width: 1.1rem; height: 1.1rem; }
.reference-dashboard__hero-brand { display: grid; justify-items: end; align-content: center; padding-right: .6rem; }
.reference-dashboard__hero-brand img { position: absolute; right: 6rem; bottom: -5rem; width: 16rem; height: auto; opacity: .11; filter: brightness(0) invert(1); transform: scale(2.1); transform-origin: bottom right; }
.reference-dashboard__hero-brand strong { color: #edf4ff; font-size: clamp(.9rem, 1.4vw, 1.1rem); line-height: 1.55; letter-spacing: .015em; text-align: left; text-transform: uppercase; }
.reference-dashboard__hero-brand strong span { color: #8cc4ff; }
.reference-dashboard__hero-brand i { width: 3.05rem; height: .16rem; margin: .65rem auto 0 0; border-radius: 999px; background: #e5f2ff; }
.reference-dashboard__metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem; }
.reference-metric, .reference-storage { display: grid; min-height: 6.05rem; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: .7rem; align-items: center; padding: .9rem 1rem; border: 1px solid #dce5f2; border-radius: .72rem; color: #17213f; text-align: left; background: rgba(255, 255, 255, .9); box-shadow: 0 .35rem .9rem rgba(47, 73, 119, .035); }
.reference-metric { cursor: pointer; transition: border-color var(--duration-fast), transform var(--duration-fast), box-shadow var(--duration-fast); }
.reference-metric:hover { border-color: #a9c5fa; box-shadow: 0 .65rem 1.2rem rgba(45, 85, 159, .1); transform: translateY(-2px); }
.reference-metric__icon { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: .75rem; color: #0862f1; background: linear-gradient(145deg, #eaf2ff, #dbeaff); }
.reference-metric__icon .icon { width: 1.5rem; height: 1.5rem; stroke-width: 1.85; }
.reference-metric > span:last-child, .reference-storage > span:nth-child(2) { display: grid; min-width: 0; }
.reference-metric strong, .reference-storage strong { color: #071238; font-size: clamp(1.25rem, 1.5vw, 1.55rem); line-height: 1; letter-spacing: -.045em; }
.reference-metric small, .reference-storage small { margin-top: .3rem; color: #52698f; font-size: .72rem; }
.reference-storage { grid-template-columns: 3rem minmax(0, 1fr) auto; }
.reference-storage strong { font-size: .9rem; letter-spacing: -.02em; }
.reference-storage progress { width: 100%; height: .58rem; margin-top: .55rem; overflow: hidden; appearance: none; border: 0; border-radius: 999px; background: #dbe6f4; }
.reference-storage progress::-webkit-progress-bar { background: #dbe6f4; }
.reference-storage progress::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg, #1475f6, #4e9bff); }
.reference-storage progress::-moz-progress-bar { background: #1475f6; }
.reference-storage em { color: #193d7f; font-size: .71rem; font-style: normal; font-weight: 700; }
.reference-dashboard__panel { padding: .85rem 1rem 1rem; margin-top: 1rem; border: 1px solid #dce5f2; border-radius: .72rem; background: rgba(255, 255, 255, .9); box-shadow: 0 .35rem .9rem rgba(47, 73, 119, .035); }
.reference-dashboard__panel > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.reference-dashboard__panel h2 { margin: 0; color: #101a37; font-size: .98rem; letter-spacing: -.025em; }
.reference-dashboard__panel .section-link { padding: .25rem 0; color: #075fe9; font-size: .7rem; font-weight: 650; }
.reference-dashboard__panel .section-link span { margin-left: .2rem; font-size: .95rem; }
.reference-folder-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .65rem; }
.reference-folder-card { display: grid; min-width: 0; grid-template-columns: 2.8rem minmax(0, 1fr) auto; gap: .5rem; align-items: center; min-height: 4.8rem; padding: .6rem; border: 1px solid #dbe5f2; border-radius: .57rem; color: #101b3a; text-align: left; background: linear-gradient(145deg, #fff, #fbfdff); cursor: pointer; transition: border-color var(--duration-fast), box-shadow var(--duration-fast), transform var(--duration-fast); }
.reference-folder-card:hover { border-color: #a9c6fb; box-shadow: 0 .45rem 1rem rgba(53, 89, 151, .09); transform: translateY(-2px); }
.reference-folder-card__icon { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border-radius: .65rem; color: #075feb; background: linear-gradient(145deg, #e9f3ff, #d7e8ff); }
.reference-folder-card__icon .icon { width: 1.45rem; height: 1.45rem; }
.reference-folder-card strong, .reference-folder-card small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reference-folder-card strong { color: #121b38; font-size: .67rem; }
.reference-folder-card small { margin-top: .22rem; color: #65799b; font-size: .6rem; }
.reference-folder-card__more { align-self: center; color: #2d4d81; font-size: 1.15rem; line-height: 1; }
.reference-document-table { overflow-x: auto; border: 1px solid #dfe7f1; border-radius: .58rem; }
.reference-document-table table { width: 100%; min-width: 46rem; border-collapse: collapse; color: #284166; font-size: .68rem; }
.reference-document-table th, .reference-document-table td { height: 2.65rem; padding: .42rem .7rem; border-bottom: 1px solid #e4eaf3; text-align: left; vertical-align: middle; white-space: nowrap; }
.reference-document-table th { color: #51698e; background: linear-gradient(#f8fbff, #f2f7fd); font-size: .62rem; font-weight: 650; }
.reference-document-table th:first-child { width: 34%; }
.reference-document-table th:last-child, .reference-document-table td:last-child { width: 2.8rem; text-align: center; }
.reference-document-table tbody tr:last-child td { border-bottom: 0; }
.reference-document-table tbody tr:hover { background: #f8fbff; }
.reference-document-name { display: inline-flex; max-width: 100%; align-items: center; gap: .55rem; padding: 0; border: 0; color: #17213d; background: transparent; cursor: pointer; }
.reference-document-name:hover strong { color: #095fdf; }
.reference-document-name .file-icon { width: 1.55rem; height: 1.55rem; }
.reference-document-name strong { min-width: 0; overflow: hidden; color: #17213d; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.reference-document-action { width: 1.9rem; min-height: 1.9rem; color: #254879; font-size: .86rem; letter-spacing: .08em; }
.reference-dashboard__empty { padding: 1.2rem; color: #64799b; font-size: .72rem; text-align: center; }

/* Trash — shared workspace treatment from the document-bin reference. */
.reference-trash { max-width: 100rem; padding: .9rem clamp(1.25rem, 2.5vw, 2.45rem) 1.65rem; margin: 0 auto; }
.reference-trash__crumbs { display: flex; align-items: center; gap: .5rem; min-height: 1.4rem; color: #536b97; font-size: .66rem; font-weight: 600; }
.reference-trash__crumbs span { color: #244270; }
.reference-trash__crumbs i { color: #9db0cd; font-style: normal; }
.reference-trash__crumbs strong { color: #142242; }
.reference-trash__head { display: flex; align-items: center; gap: .85rem; margin: 1.05rem 0 1.1rem; }
.reference-trash__title-icon { display: grid; width: 3.1rem; height: 3.1rem; place-items: center; border-radius: .72rem; color: #0d2a67; background: linear-gradient(145deg, #edf4ff, #dce9fd); }
.reference-trash__title-icon .icon { width: 2rem; height: 2rem; stroke-width: 2.1; }
.reference-trash__head h1 { margin: 0; color: #09153a; font-size: clamp(1.5rem, 2.2vw, 1.9rem); line-height: 1.1; letter-spacing: -.045em; }
.reference-trash__head p { margin: .28rem 0 0; color: #425f91; font-size: .81rem; }
.reference-trash__notice { display: grid; grid-template-columns: 1.35rem minmax(0, 1fr) auto; gap: .7rem; align-items: center; min-height: 3.35rem; padding: .65rem 1rem; margin: 0 0 1rem; border: 1px solid #f1d076; border-radius: .6rem; color: #75470f; background: linear-gradient(100deg, #fffaf0, #fffef9); box-shadow: 0 .25rem .75rem rgba(126, 88, 20, .025); }
.reference-trash__notice > span { display: grid; width: 1.05rem; height: 1.05rem; place-items: center; border-radius: 50%; color: #fff; background: #bd7b08; font-size: .67rem; font-weight: 800; }
.reference-trash__notice p { margin: 0; font-size: .71rem; font-weight: 600; }
.reference-trash__notice button { width: 1.8rem; min-height: 1.8rem; border: 0; border-radius: .35rem; color: #7b520d; background: transparent; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.reference-trash__notice button:hover { color: #513300; background: rgba(188, 123, 8, .1); }
.reference-trash__surface { overflow: visible; border: 1px solid #dce5f2; border-radius: .72rem; background: rgba(255, 255, 255, .92); box-shadow: 0 .45rem 1.2rem rgba(47, 73, 119, .045); }
.reference-trash__toolbar { display: flex; min-height: 3.75rem; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 1rem; border-bottom: 1px solid #e0e8f3; }
.reference-trash__toolbar > strong { color: #193766; font-size: .78rem; }
.reference-trash__tools { display: flex; align-items: center; justify-content: flex-end; gap: .65rem; }
.reference-trash__search { position: relative; display: flex; width: min(100%, 21.5rem); align-items: center; }
.reference-trash__search > .icon { position: absolute; z-index: 1; left: .75rem; width: 1rem; height: 1rem; color: #16346b; stroke-width: 2; }
.reference-trash__search input { min-height: 2.55rem; padding: .48rem .72rem .48rem 2.45rem; border-color: #cbd9ed; border-radius: .48rem; color: #273d67; background: #fff; font-size: .69rem; }
.reference-trash__search input::placeholder { color: #65799f; }
.reference-trash__filter { position: relative; }
.reference-trash__filter summary { display: inline-flex; min-height: 2.55rem; align-items: center; gap: .45rem; padding: .48rem .8rem; border: 1px solid #cbd9ed; border-radius: .48rem; color: #172e58; background: #fff; box-shadow: 0 1px 2px rgba(23, 53, 102, .03); font-size: .7rem; font-weight: 650; cursor: pointer; list-style: none; }
.reference-trash__filter summary::-webkit-details-marker { display: none; }
.reference-trash__filter summary .icon { width: .98rem; height: .98rem; }
.reference-trash__filter summary:hover, .reference-trash__filter[open] summary { border-color: #8fb2f1; color: #095ede; background: #f8fbff; }
.reference-trash__filter summary b { display: grid; min-width: 1.1rem; height: 1.1rem; place-items: center; border-radius: 999px; color: #fff; background: #1d63e8; font-size: .58rem; }
.reference-trash__filter-popover { position: absolute; z-index: 72; top: calc(100% + .35rem); right: 0; display: grid; min-width: 10.75rem; gap: .12rem; padding: .45rem; border: 1px solid #d4dfef; border-radius: .55rem; background: #fff; box-shadow: 0 .7rem 1.45rem rgba(29, 55, 98, .16); }
.reference-trash__filter-popover p { padding: .25rem .45rem .35rem; margin: 0; color: #6d80a1; font-size: .59rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.reference-trash__filter-popover button { min-height: 2rem; padding: .38rem .45rem; border: 0; border-radius: .35rem; color: #263e68; text-align: left; background: transparent; font-size: .67rem; cursor: pointer; }
.reference-trash__filter-popover button:hover { color: #095edc; background: #edf4ff; }
.reference-trash__view-switch { display: inline-flex; overflow: hidden; border: 1px solid #a7c1ed; border-radius: .48rem; background: #fff; }
.reference-trash__view-switch button { display: grid; width: 2.55rem; min-height: 2.4rem; place-items: center; border: 0; color: #183866; background: #fff; cursor: pointer; }
.reference-trash__view-switch button + button { border-left: 1px solid #c6d6eb; }
.reference-trash__view-switch button .icon { width: 1.1rem; height: 1.1rem; }
.reference-trash__view-switch button:hover { color: #0b5fe0; background: #eff5ff; }
.reference-trash__view-switch button.is-active { color: #fff; background: linear-gradient(120deg, #1675f2, #1456df); box-shadow: inset 0 1px rgba(255, 255, 255, .2); }
.reference-trash__table-wrap { width: 100%; overflow-x: auto; }
.reference-trash__table { width: 100%; min-width: 63rem; border-spacing: 0; color: #203b67; font-size: .7rem; }
.reference-trash__table th, .reference-trash__table td { height: 3rem; padding: .5rem .8rem; border-bottom: 1px solid #e2e9f3; text-align: left; vertical-align: middle; white-space: nowrap; }
.reference-trash__table th { color: #31527f; background: linear-gradient(#f8fbff, #f1f6fd); font-size: .63rem; font-weight: 700; }
.reference-trash__table th i { padding-left: .35rem; color: #314f81; font-size: .78rem; font-style: normal; }
.reference-trash__table th:first-child, .reference-trash__table td:first-child { width: 3.15rem; padding-right: .1rem; text-align: center; }
.reference-trash__table th:nth-child(2) { width: 32%; }
.reference-trash__table th:last-child, .reference-trash__table td:last-child { width: 4.5rem; text-align: right; }
.reference-trash__table tbody tr:last-child td { border-bottom: 0; }
.reference-trash__table tbody tr:hover { background: #f8fbff; }
.reference-trash__row.is-selected { background: #ebf3ff !important; }
.reference-trash__name { display: inline-flex; max-width: 100%; align-items: center; gap: .65rem; padding: 0; border: 0; color: #17233e; background: transparent; cursor: pointer; }
.reference-trash__name .file-icon { width: 1.85rem; height: 1.85rem; border-radius: .38rem; }
.reference-trash__name strong { min-width: 0; overflow: hidden; color: #17223c; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.reference-trash__name:hover strong { color: #095fdf; }
.reference-trash__table .share-state { color: #274168; font-size: .69rem; }
.reference-trash__table .share-state::before { width: .38rem; height: .38rem; background: #aebed8; }
.reference-trash__action { width: 2rem; min-height: 2rem; border: 1px solid #d6e2f0; border-radius: .42rem; color: #213e6c; background: #fff; font-size: .86rem; letter-spacing: .08em; }
.reference-trash__action:hover { border-color: #9abcf4; color: #0d60df; background: #f4f8ff; }
.reference-trash__empty { display: grid; min-height: 12rem; place-items: center; align-content: center; padding: 1.25rem; color: #63779a; text-align: center; }
.reference-trash__empty > span { display: grid; width: 3.5rem; height: 3.5rem; place-items: center; border-radius: 50%; color: #124184; background: #edf4ff; }
.reference-trash__empty > span .icon { width: 1.8rem; height: 1.8rem; }
.reference-trash__empty h2 { margin: .75rem 0 .25rem; color: #172442; font-size: 1rem; }
.reference-trash__empty p { margin: 0; font-size: .72rem; }
.reference-trash__guidance { display: grid; min-height: clamp(15rem, 29vh, 23rem); place-items: center; align-content: center; padding: 2.5rem 1rem 1.25rem; color: #354e78; text-align: center; }
.reference-trash__guidance-icon { display: grid; width: 6.25rem; height: 6.25rem; place-items: center; border-radius: 50%; color: #133b7a; background: radial-gradient(circle at 35% 27%, #f8fbff, #dbe8fb); box-shadow: inset 0 1px rgba(255, 255, 255, .9); }
.reference-trash__guidance-icon .icon { width: 2.8rem; height: 2.8rem; stroke-width: 1.85; }
.reference-trash__guidance h2 { margin: 1rem 0 .35rem; color: #0c193a; font-size: 1.08rem; letter-spacing: -.03em; }
.reference-trash__guidance p { margin: 0; font-size: .75rem; line-height: 1.55; }

/* Shared with me — collaboration workspace reference. */
.reference-shared { max-width: 100rem; padding: .95rem clamp(1.25rem, 2.5vw, 2.45rem) 1.65rem; margin: 0 auto; }
.reference-shared__crumbs { display: flex; align-items: center; gap: .55rem; min-height: 1.4rem; color: #516b98; font-size: .66rem; font-weight: 600; }
.reference-shared__crumbs span { display: inline-flex; align-items: center; gap: .35rem; color: #34537f; }
.reference-shared__crumbs span .icon { width: .9rem; height: .9rem; color: #174b9c; }
.reference-shared__crumbs i { color: #315a96; font-size: 1rem; font-style: normal; line-height: 1; }
.reference-shared__crumbs strong { color: #111d3e; }
.reference-shared__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.1rem 0 1.15rem; }
.reference-shared__head > div:first-child { display: flex; align-items: center; gap: .85rem; }
.reference-shared__title-icon { display: grid; width: 3rem; height: 3rem; place-items: center; color: #061e59; }
.reference-shared__title-icon .icon { width: 2.25rem; height: 2.25rem; stroke-width: 2.05; }
.reference-shared__head h1 { margin: 0; color: #07143b; font-size: clamp(1.5rem, 2.2vw, 1.9rem); line-height: 1.1; letter-spacing: -.045em; }
.reference-shared__head p { margin: .25rem 0 0; color: #173b79; font-size: .82rem; font-weight: 550; }
.reference-shared__controls { display: flex; align-items: center; gap: .65rem; }
.reference-shared__filter { position: relative; }
.reference-shared__filter summary { display: inline-flex; min-height: 3.05rem; align-items: center; gap: .55rem; padding: .58rem 1.15rem; border: 1px solid #b9d0f2; border-radius: .5rem; color: #132447; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 2px rgba(23, 53, 102, .03); font-size: .78rem; font-weight: 700; cursor: pointer; list-style: none; }
.reference-shared__filter summary::-webkit-details-marker { display: none; }
.reference-shared__filter summary .icon { width: 1.2rem; height: 1.2rem; }
.reference-shared__filter summary:hover, .reference-shared__filter[open] summary { border-color: #76a5f0; color: #095edc; background: #f6faff; }
.reference-shared__filter-popover { position: absolute; z-index: 72; top: calc(100% + .4rem); right: 0; display: grid; min-width: 11.5rem; gap: .12rem; padding: .45rem; border: 1px solid #d2dfef; border-radius: .6rem; background: #fff; box-shadow: 0 .7rem 1.45rem rgba(29, 55, 98, .16); }
.reference-shared__filter-popover p { padding: .25rem .45rem .35rem; margin: 0; color: #6d80a1; font-size: .59rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.reference-shared__filter-popover button { min-height: 2rem; padding: .38rem .45rem; border: 0; border-radius: .35rem; color: #263e68; text-align: left; background: transparent; font-size: .67rem; cursor: pointer; }
.reference-shared__filter-popover button:hover { color: #095edc; background: #edf4ff; }
.reference-shared__view-switch { display: inline-flex; overflow: hidden; border: 1px solid #a6c1ee; border-radius: .5rem; background: #fff; }
.reference-shared__view-switch button { display: grid; width: 3.1rem; min-height: 3.05rem; place-items: center; border: 0; color: #12294d; background: #fff; cursor: pointer; }
.reference-shared__view-switch button + button { border-left: 1px solid #bfd1ed; }
.reference-shared__view-switch button .icon { width: 1.2rem; height: 1.2rem; }
.reference-shared__view-switch button:hover { color: #085dde; background: #eff5ff; }
.reference-shared__view-switch button.is-active { color: #fff; background: linear-gradient(120deg, #1478f7, #1054e2); box-shadow: inset 0 1px rgba(255, 255, 255, .22); }
.reference-shared__surface { min-height: clamp(34rem, calc(100dvh - 15rem), 48rem); overflow: hidden; border: 1px solid #dbe6f2; border-radius: .7rem; background: rgba(255, 255, 255, .93); box-shadow: 0 .45rem 1.2rem rgba(47, 73, 119, .04); }
.reference-shared__collection { min-height: 18rem; }
.reference-shared__collection .item-grid { padding: 1rem; }
.reference-shared__collection .file-table { table-layout: auto; }
.reference-shared__empty { display: grid; min-height: clamp(34rem, calc(100dvh - 15rem), 48rem); place-items: center; align-content: center; padding: 3.5rem 1rem; color: #315380; text-align: center; }
.reference-shared__empty-art { position: relative; display: grid; width: 10.5rem; height: 8.35rem; place-items: center; margin-bottom: 1.15rem; }
.reference-shared__empty-art i { display: grid; width: 7.35rem; height: 5.85rem; place-items: center; border-radius: 1.1rem; color: #2b7df3; background: linear-gradient(145deg, #b5d8ff, #eaf5ff 72%); box-shadow: inset 0 .3rem .35rem rgba(255, 255, 255, .55), 0 .75rem 1.2rem rgba(63, 130, 228, .12); transform: translateX(-.7rem); }
.reference-shared__empty-art i .icon { width: 4.15rem; height: 4.15rem; stroke-width: 1.65; }
.reference-shared__empty-art b { position: absolute; right: .15rem; bottom: .35rem; display: grid; width: 3.85rem; height: 3.85rem; place-items: center; border-radius: 50%; color: #0e68ee; background: #e7f2ff; box-shadow: 0 .4rem .85rem rgba(47, 98, 181, .08); }
.reference-shared__empty-art b .icon { width: 2rem; height: 2rem; stroke-width: 2; }
.reference-shared__empty h3 { margin: 0; color: #07133a; font-size: clamp(1.05rem, 1.55vw, 1.32rem); letter-spacing: -.035em; }
.reference-shared__empty > p { margin: .55rem 0 0; color: #395886; font-size: .78rem; line-height: 1.5; }
.reference-shared__refresh { min-height: 2.8rem; padding-inline: 1.25rem; margin-top: 1.15rem; border-color: transparent; color: #0761e8; background: linear-gradient(135deg, #e9f4ff, #dcecff); box-shadow: none; font-size: .78rem; }
.reference-shared__refresh:hover { border-color: #b6d4fd; color: #034ebd; background: #dcecff; }
.reference-shared__refresh:first-letter { font-size: 1.2rem; }
.reference-shared__tip { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .65rem; width: min(100%, 32rem); padding: .85rem 1rem; margin-top: 1.7rem; border: 1px solid #dceeff; border-radius: .55rem; color: #173b74; text-align: left; background: linear-gradient(100deg, #f4faff, #eef8ff); }
.reference-shared__tip > span { display: grid; width: 1.2rem; height: 1.2rem; place-items: center; margin-top: .05rem; border-radius: 50%; color: #fff; background: #1267e9; font-size: .7rem; font-weight: 800; }
.reference-shared__tip strong { display: block; color: #111d3b; font-size: .73rem; }
.reference-shared__tip p { margin: .28rem 0 0; color: #345681; font-size: .7rem; line-height: 1.45; }
.reference-shared__empty--filtered { min-height: 20rem; }
.reference-shared__empty-icon { display: grid; width: 3.5rem; height: 3.5rem; place-items: center; border-radius: 50%; color: #1266df; background: #ecf4ff; }
.reference-shared__empty-icon .icon { width: 1.65rem; height: 1.65rem; }

/* Library files — dense document-management workspace reference. */
.reference-library { max-width: 100rem; padding: .9rem clamp(1.25rem, 2.5vw, 2.45rem) 1.4rem; margin: 0 auto; }
.reference-library__crumbs { display: flex; align-items: center; gap: .55rem; min-height: 1.4rem; color: #1d3f75; font-size: .66rem; font-weight: 600; }
.reference-library__crumbs button { display: inline-flex; align-items: center; gap: .35rem; padding: 0; border: 0; color: #34537f; background: transparent; font-size: inherit; font-weight: inherit; cursor: pointer; }
.reference-library__crumbs button:hover { color: #075fdf; }
.reference-library__crumbs button[aria-current="page"] { color: #111d3e; cursor: default; }
.reference-library__crumbs button[aria-current="page"]:hover { color: #111d3e; }
.reference-library__crumbs .icon { width: .9rem; height: .9rem; color: #1667de; }
.reference-library__crumbs i { color: #315a96; font-size: 1rem; font-style: normal; line-height: 1; }
.reference-library__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin: 1.05rem 0 .9rem; }
.reference-library__head h1 { margin: 0; color: #09153a; font-size: clamp(1.5rem, 2.15vw, 1.9rem); line-height: 1.1; letter-spacing: -.045em; }
.reference-library__head p { margin: .3rem 0 0; color: #38547f; font-size: .82rem; }
.reference-library__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .65rem; }
.reference-library__new-folder, .reference-library__upload { min-height: 2.65rem; padding-inline: 1.05rem; border-radius: .48rem; font-size: .74rem; }
.reference-library__new-folder { border-color: #1769ec; color: #0955d6; background: #fff; box-shadow: 0 .35rem .75rem rgba(29, 86, 193, .07); }
.reference-library__new-folder:hover { border-color: #0959df; color: #fff; background: #1467e9; }
.reference-library__new-folder .icon, .reference-library__upload .icon { width: 1.05rem; height: 1.05rem; }
.reference-library__upload { border-color: #175ee2; background: linear-gradient(115deg, #1b76f4, #1152d9); box-shadow: 0 .5rem 1rem rgba(21, 79, 202, .2); }
.reference-library__surface { position: relative; overflow: visible; border: 1px solid #dce5f2; border-radius: .7rem; background: rgba(255, 255, 255, .92); box-shadow: 0 .4rem 1.1rem rgba(47, 73, 119, .04); }
.reference-library__toolbar { display: flex; min-height: 3.65rem; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem 1rem; border-bottom: 1px solid #e0e8f3; }
.reference-library__toolbar > strong { color: #28466f; font-size: .77rem; }
.reference-library__tools { display: flex; align-items: center; justify-content: flex-end; gap: .55rem; }
.reference-library__search { position: relative; display: flex; width: min(100%, 16.4rem); align-items: center; }
.reference-library__search > .icon { position: absolute; z-index: 1; left: .7rem; width: 1rem; height: 1rem; color: #193967; stroke-width: 2; }
.reference-library__search input { min-height: 2.45rem; padding: .45rem .65rem .45rem 2.25rem; border-color: #c7d7ec; border-radius: .45rem; color: #2b4068; background: #fff; font-size: .68rem; }
.reference-library__search input::placeholder { color: #60779e; }
.reference-library__filter { position: relative; }
.reference-library__filter summary { display: inline-flex; min-height: 2.45rem; align-items: center; gap: .45rem; padding: .45rem .75rem; border: 1px solid #c7d7ec; border-radius: .45rem; color: #172e58; background: #fff; font-size: .69rem; font-weight: 650; cursor: pointer; list-style: none; }
.reference-library__filter summary::-webkit-details-marker { display: none; }
.reference-library__filter summary .icon { width: .95rem; height: .95rem; }
.reference-library__filter summary:hover, .reference-library__filter[open] summary { border-color: #8caef0; color: #095edc; background: #f8fbff; }
.reference-library__filter-popover { position: absolute; z-index: 72; top: calc(100% + .35rem); right: 0; display: grid; min-width: 10.75rem; gap: .12rem; padding: .45rem; border: 1px solid #d4dfef; border-radius: .55rem; background: #fff; box-shadow: 0 .7rem 1.45rem rgba(29, 55, 98, .16); }
.reference-library__filter-popover p { padding: .25rem .45rem .35rem; margin: 0; color: #6d80a1; font-size: .59rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.reference-library__filter-popover button { min-height: 2rem; padding: .38rem .45rem; border: 0; border-radius: .35rem; color: #263e68; text-align: left; background: transparent; font-size: .67rem; cursor: pointer; }
.reference-library__filter-popover button:hover { color: #095edc; background: #edf4ff; }
.reference-library__view-switch { display: inline-flex; overflow: hidden; border: 1px solid #a7c1ed; border-radius: .45rem; background: #fff; }
.reference-library__view-switch button { display: grid; width: 2.5rem; min-height: 2.4rem; place-items: center; border: 0; color: #183866; background: #fff; cursor: pointer; }
.reference-library__view-switch button + button { border-left: 1px solid #c6d6eb; }
.reference-library__view-switch button .icon { width: 1rem; height: 1rem; }
.reference-library__view-switch button:hover { color: #0b5fe0; background: #eff5ff; }
.reference-library__view-switch button.is-active { color: #fff; background: linear-gradient(120deg, #1675f2, #1456df); }
.reference-library__sort { width: 11.75rem; }
.reference-library__sort select, .reference-library__page-size select { min-height: 2.45rem; padding: .45rem 2rem .45rem .65rem; border-color: #c7d7ec; border-radius: .45rem; color: #243a63; background-color: #fff; font-size: .67rem; font-weight: 600; }
.reference-library__table-wrap { width: 100%; overflow-x: auto; }
.reference-library__table { width: 100%; min-width: 65rem; border-spacing: 0; color: #2d466e; font-size: .69rem; }
.reference-library__table th, .reference-library__table td { height: 2.85rem; padding: .42rem .78rem; border-bottom: 1px solid #e2e9f3; text-align: left; vertical-align: middle; white-space: nowrap; }
.reference-library__table th { color: #36547f; background: linear-gradient(#f8fbff, #f1f6fd); font-size: .62rem; font-weight: 700; }
.reference-library__table th i { padding-left: .35rem; color: #0b64e8; font-size: .82rem; font-style: normal; }
.reference-library__table th:first-child, .reference-library__table td:first-child { width: 3.15rem; padding-right: .1rem; text-align: center; }
.reference-library__table th:nth-child(2) { width: 30%; }
.reference-library__table th:last-child, .reference-library__table td:last-child { width: 4.1rem; text-align: right; }
.reference-library__table tbody tr:last-child td { border-bottom: 0; }
.reference-library__table tbody tr:hover { background: #f7fbff; }
.reference-library__row.is-selected { background: linear-gradient(90deg, #e5f3ff, #dfefff) !important; }
.reference-library__name { display: inline-flex; max-width: 100%; align-items: center; gap: .65rem; padding: 0; border: 0; color: #17233e; background: transparent; cursor: pointer; }
.reference-library__name .file-icon { width: 1.65rem; height: 1.65rem; border-radius: .35rem; }
.reference-library__name strong { min-width: 0; overflow: hidden; color: #17233e; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.reference-library__name:hover strong { color: #075fdf; }
.reference-library__access { display: inline-flex; align-items: center; gap: .35rem; color: #3d547a; font-size: .68rem; }
.reference-library__access .icon { width: .92rem; height: .92rem; color: #687b99; stroke-width: 2; }
.reference-library__access.is-shared { color: #11935a; font-weight: 650; }
.reference-library__access.is-shared .icon { color: #16a868; }
.reference-library__action { width: 2rem; min-height: 2rem; color: #173a71; font-size: .86rem; letter-spacing: .08em; }
.reference-library__action:hover { color: #075fdf; background: #eff5ff; }
.reference-library__grid .item-grid { padding: 1rem; }
.reference-library__footer { display: grid; grid-template-columns: minmax(11rem, 1fr) auto minmax(11rem, 1fr); min-height: 3.6rem; align-items: center; gap: .75rem; padding: .5rem 1rem; border-top: 1px solid #e0e8f3; color: #304b76; font-size: .67rem; }
.reference-library__footer > strong { font-size: .67rem; }
.reference-library__pagination { display: inline-flex; justify-self: center; gap: .35rem; }
.reference-library__pagination button { display: grid; width: 2.05rem; min-height: 2.05rem; place-items: center; border: 1px solid #d6e1ef; border-radius: .42rem; color: #34537d; background: #fff; font-size: .75rem; font-weight: 700; cursor: pointer; }
.reference-library__pagination button:hover:not(:disabled) { border-color: #91b4f1; color: #0d5fdd; background: #f3f8ff; }
.reference-library__pagination button.is-active { border-color: #1662e5; color: #fff; background: linear-gradient(130deg, #1877f5, #1155dd); box-shadow: 0 .25rem .55rem rgba(20, 84, 212, .18); }
.reference-library__pagination button:disabled { opacity: .48; cursor: default; }
.reference-library__page-size { justify-self: end; width: 8.7rem; }
.reference-library__empty { display: grid; min-height: 19rem; place-items: center; align-content: center; padding: 2rem; color: #60779a; text-align: center; }
.reference-library__empty > span { display: grid; width: 3.6rem; height: 3.6rem; place-items: center; border-radius: 50%; color: #1164e1; background: #ecf4ff; }
.reference-library__empty > span .icon { width: 1.8rem; height: 1.8rem; }
.reference-library__empty h2 { margin: .75rem 0 .3rem; color: #142342; font-size: 1rem; }
.reference-library__empty p { margin: 0; font-size: .72rem; }
.share-page { display: grid; min-height: 100dvh; place-items: center; padding: var(--space-5); background: var(--color-surface-subtle); }
.share-card { width: min(100%, 34rem); padding: clamp(1.5rem, 5vw, 2.5rem); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: #fff; box-shadow: var(--shadow-soft); }
.share-card .brand { margin-bottom: 2rem; }
.share-card h1 { overflow-wrap: anywhere; letter-spacing: -.035em; }
.share-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0; }
.share-meta div { padding-top: .75rem; border-top: 1px solid var(--color-border); }
.share-meta dt { color: var(--color-ink-muted); font-size: var(--font-size-xs); }
.share-meta dd { margin: 0; font-weight: 600; }
.share-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0; }
.public-upload { display: grid; gap: .65rem; margin-top: 1.5rem; }
.error-page { display: grid; min-height: 100dvh; max-width: 38rem; place-content: center; justify-items: start; margin: auto; padding: 1.5rem; }

@media (max-width: 1180px) {
  .app-shell, .app-shell:not(.has-details) { grid-template-columns: 12.5rem minmax(0, 1fr) 0; }
  .details-panel { position: fixed; z-index: 60; top: 3.75rem; right: 0; bottom: 0; width: min(23rem, 100vw); box-shadow: var(--shadow-popover); }
  .folder-grid, .document-grid, .item-grid { grid-template-columns: repeat(4, minmax(6rem, 1fr)); }
  .file-table .owner-column { display: none; }
  .dashboard-overview { grid-template-columns: 1fr; }
}

@media (min-width: 801px) and (max-height: 800px) {
  .login-intro { padding: 2.15rem clamp(2.3rem, 4.6vw, 4rem); }
  .login-brand { width: min(20rem, 76%); }
  .login-intro__content { padding-top: 0; }
  .login-intro__accent { width: 2rem; margin-bottom: 1.05rem; }
  .login-intro__eyebrow { margin-bottom: .65rem; font-size: .61rem; }
  .login-intro h2 { font-size: clamp(2rem, 3.2vw, 2.75rem); }
  .login-intro__lead { margin-top: .85rem; font-size: .8rem; line-height: 1.5; }
  .login-benefits { gap: .65rem; margin-top: 1.25rem; }
  .login-benefits li { grid-template-columns: 3.35rem minmax(0, 1fr); gap: .65rem; }
  .login-benefits__icon { width: 3.25rem; height: 3.25rem; }
  .login-benefits__icon .icon { width: 1.3rem; height: 1.3rem; }
  .login-benefits strong { font-size: .8rem; }
  .login-benefits small { font-size: .67rem; }
  .login-intro__footer { gap: .85rem; font-size: .52rem; }
  .login-intro__footer > span { width: 2rem; }
  .login-intro__pagination { gap: .48rem; }
  .login-intro__pagination i { width: .42rem; height: .42rem; }
  .login-panel { padding: 4.1rem clamp(1.5rem, 4vw, 4rem) 2.2rem; }
  .language-picker { top: .9rem; }
  .login-card { width: min(100%, 31.5rem); padding: 1.45rem clamp(1.7rem, 3vw, 2.5rem) 1.05rem; }
  .login-card__symbol { width: 4.15rem; height: 5.05rem; margin-bottom: .1rem; }
  .login-card .eyebrow { font-size: .61rem; }
  .login-card__accent { margin: .58rem auto .67rem; }
  .login-card h1 { font-size: 1.23rem; }
  .login-card__hint { margin: .35rem 0 .9rem; font-size: .76rem; }
  .login-input input { min-height: 2.75rem; font-size: .78rem; }
  .button-icon--inside { top: .1rem; min-height: 2.55rem; }
  .login-card .field-error { min-height: .55rem; font-size: .61rem; }
  .login-options { min-height: 1.75rem; font-size: .68rem; }
  .remember-me { font-size: .68rem !important; }
  .remember-me input { width: 1.2rem; min-width: 1.2rem; min-height: 1.2rem; }
  .login-submit { min-height: 2.9rem; font-size: .82rem; }
  .login-secure { margin-top: .75rem; font-size: .61rem; }
  .login-panel__footer { bottom: .75rem; font-size: .64rem; }
}

@media (max-width: 800px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: inline-grid !important; }
  .app-shell, .app-shell:not(.has-details) { grid-template: 3.75rem minmax(0, 1fr) / minmax(0, 1fr); grid-template-areas: "topbar" "workspace"; }
  .topbar { grid-template-columns: auto minmax(0, 1fr) auto; gap: .4rem; padding: 0 .6rem; }
  .topbar__actions { gap: .1rem; }
  .upload-indicator { width: 2.25rem; padding: 0; justify-content: center; }
  .upload-indicator .counter { position: absolute; top: .45rem; right: 3.55rem; min-width: .8rem; padding: 0 .18rem; color: #fff; background: var(--color-action); font-size: .55rem; }
  .account__button { padding: 0 .2rem; }
  .sidebar { position: fixed; z-index: 110; inset: 0 auto 0 0; width: min(18rem, 88vw); padding-top: .75rem; box-shadow: var(--shadow-popover); transform: translateX(-102%); transition: transform var(--duration-standard) var(--ease-standard); }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar[aria-hidden="true"] { visibility: hidden; }
  .sidebar__mobile-head { display: flex !important; align-items: center; justify-content: space-between; margin-bottom: .5rem; padding: 0 .4rem; }
  .nav-backdrop { z-index: 105; }
  .workspace__inner { padding: 1rem; }
  .dashboard-hero { min-height: auto; grid-template-columns: 1fr; }
  .dashboard-hero__art { display: none; }
  .storage-overview__body { grid-template-columns: 7rem minmax(0,1fr); }
  .storage-ring { width: 6.4rem; height: 6.4rem; }
  .dashboard .folder-grid { grid-template-columns: 1fr 1fr; }
  .page-head { align-items: flex-start; margin-bottom: 1rem; }
  .page-actions { justify-content: flex-end; }
  .dashboard-storage { grid-template-columns: 1fr; align-items: start; gap: 1rem; }
  .storage-legend { grid-template-columns: 1fr 1fr; }
  .folder-grid, .document-grid, .item-grid { grid-template-columns: repeat(3, minmax(5rem, 1fr)); }
  .file-toolbar { flex-wrap: wrap; }
  .filter-popover { position: fixed; top: 4.25rem; right: .75rem; left: .75rem; width: auto; }
  .file-table { table-layout: auto; }
  .file-table th, .file-table td { padding: .45rem .35rem; }
  .file-table .owner-column, .file-table .size-column, .file-table .modified-column { display: none; }
  .file-table th:nth-child(2) { width: auto; }
  .file-table .share-column { width: 3rem; }
  .share-state { font-size: 0; }
  .share-state::before { width: .5rem; height: .5rem; }
  .details-panel { top: 3.75rem; width: 100vw; }
  .upload-panel { right: .5rem; bottom: .5rem; width: calc(100vw - 1rem); }
  .dialog { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); }
  .dialog__footer { flex-direction: column-reverse; }
  .dialog__footer .button { width: 100%; }
  .preview-modal { inset: 0; border: 0; border-radius: 0; }
  .preview-modal__head { align-items: flex-start; }
  .preview-modal__actions .button--quiet { display: none; }
  .preview-modal__stage { padding: .5rem; }
  .website-context-menu { width: min(15rem, calc(100vw - 1rem)); }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .login-page { grid-template-columns: 1fr; }
  .login-intro { display: none; }
  .login-panel { min-height: 100dvh; padding: 4.8rem 1rem 3rem; }
  .language-picker { top: 1rem; right: 1rem; }
  .login-card { padding: 2rem clamp(1.35rem, 7vw, 2.4rem) 1.4rem; }
  .login-panel__footer { bottom: 1rem; }
}

@media (max-width: 480px) {
  .page-head { display: grid; }
  .page-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .page-actions .button { padding-inline: .5rem; }
  .folder-grid, .document-grid, .item-grid { grid-template-columns: repeat(2, minmax(5rem, 1fr)); }
  .item-grid { gap: .5rem; padding: .5rem; }
  .item-card__open { padding-inline: .5rem; }
  .filter-fields { grid-template-columns: 1fr; }
  .document-grid .document-card:nth-child(n + 5) { display: none; }
  .storage-legend { grid-template-columns: 1fr; }
  .dashboard-hero { padding: 1.25rem; border-radius: 1rem; }
  .dashboard-hero__actions { display: grid; grid-template-columns: 1fr; }
  .storage-overview__body { grid-template-columns: 1fr; justify-items: center; }
  .storage-categories { width: 100%; }
  .dashboard-stat-grid { grid-template-columns: 1fr 1fr; }
  .dashboard-stat { grid-template-columns: 1fr; justify-items: start; }
  .dashboard-stat em { display: none; }
  .dashboard .folder-grid { grid-template-columns: 1fr; }
  .preview-modal__identity .file-icon { display: none; }
  .preview-modal__actions .button { min-width: 2.4rem; padding-inline: .55rem; font-size: 0; }
  .preview-modal__actions .button span { display: none; }
  .metric-grid, .share-meta { grid-template-columns: 1fr; }
  .admin-toolbar { align-items: flex-start; flex-direction: column; }
  .reference-trash__head { margin-top: .8rem; }
  .reference-trash__notice { grid-template-columns: 1.15rem minmax(0, 1fr) auto; gap: .5rem; padding: .6rem .7rem; }
  .reference-trash__notice p { font-size: .66rem; }
  .reference-trash__tools { flex-wrap: wrap; gap: .45rem; }
  .reference-trash__search { order: -1; width: 100%; flex-basis: 100%; }
  .reference-trash__filter, .reference-trash__view-switch { flex: 0 0 auto; }
  .reference-trash__guidance { min-height: 12rem; padding-top: 2rem; }
  .reference-trash__guidance-icon { width: 4.75rem; height: 4.75rem; }
  .reference-trash__guidance-icon .icon { width: 2.25rem; height: 2.25rem; }
  .reference-shared__head { align-items: flex-start; flex-direction: column; }
  .reference-shared__head > div:first-child { align-items: flex-start; }
  .reference-shared__controls { width: 100%; justify-content: space-between; }
  .reference-shared__filter summary { min-height: 2.65rem; padding-inline: .85rem; }
  .reference-shared__view-switch button { width: 2.7rem; min-height: 2.65rem; }
  .reference-shared__surface, .reference-shared__empty { min-height: 28rem; }
  .reference-shared__empty { padding: 2.25rem .8rem; }
  .reference-shared__empty-art { transform: scale(.88); margin-bottom: .55rem; }
  .reference-shared__tip { grid-template-columns: 1.25rem minmax(0, 1fr); padding: .75rem; }
  .reference-shared__tip p { font-size: .66rem; }
  .reference-library__head { align-items: stretch; flex-direction: column; }
  .reference-library__actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .reference-library__actions .button { padding-inline: .55rem; }
  .reference-library__tools { flex-wrap: wrap; gap: .45rem; }
  .reference-library__search { order: -1; width: 100%; flex-basis: 100%; }
  .reference-library__sort { flex: 1 1 9rem; width: auto; }
  .reference-library__footer { grid-template-columns: 1fr auto; padding: .65rem .75rem; }
  .reference-library__footer > strong { grid-column: 1 / -1; }
  .reference-library__pagination { justify-self: start; }
  .reference-library__page-size { justify-self: end; }
}

@media (max-width: 800px) {
  .admin-experience .app-shell, .admin-experience .app-shell:not(.has-details) { grid-template: 3.75rem minmax(0, 1fr) / minmax(0, 1fr); grid-template-areas: "topbar" "workspace"; }
  .admin-experience .topbar { grid-template-columns: auto minmax(0, 1fr) auto; padding: 0 .7rem; }
  .admin-experience .search { width: 100%; }
  .admin-experience .search input { min-height: 2.25rem; padding-right: .7rem; padding-left: 2.2rem; }
  .admin-experience .topbar__actions { gap: .2rem; }
  .admin-experience .topbar-notifications .counter { top: -.15rem; right: -.2rem; }
  .admin-experience .account__button .avatar { width: 2.1rem; height: 2.1rem; }
  .admin-experience .sidebar { width: min(18rem, 88vw); padding-top: .9rem; }
  .admin-experience .sidebar > .brand { margin-bottom: .8rem; }
  .admin-workspace { padding: 1rem; }
  .admin-page-head { display: block; margin-bottom: 1rem; }
  .admin-page-head__date { margin-top: .7rem; }
  .admin-metric-grid { grid-template-columns: 1fr 1fr; gap: .65rem; }
  .admin-metric { grid-template-columns: 2.5rem minmax(0, 1fr); gap: .55rem; min-height: 5.3rem; padding: .75rem; }
  .admin-metric__icon { width: 2.45rem; height: 2.45rem; }
  .admin-metric__icon .icon { width: 1.25rem; height: 1.25rem; }
  .admin-metric em { display: none; }
  .admin-users-panel__head { display: grid; padding: .9rem; }
  .admin-users-panel__actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; }
  .admin-user-search { grid-column: 1 / -1; width: 100%; }
  .admin-create-user { justify-content: center; }
  .admin-page-footer { display: grid; align-items: start; }
  .admin-page-footer > div { flex-wrap: wrap; }
  .reference-dashboard { padding: .7rem 1rem 1rem; }
  .reference-dashboard__hero { grid-template-columns: 1fr; min-height: 14rem; }
  .reference-dashboard__hero-brand { display: none; }
  .reference-dashboard__metrics { grid-template-columns: 1fr 1fr; gap: .65rem; }
  .reference-metric, .reference-storage { min-height: 5.15rem; grid-template-columns: 2.45rem minmax(0, 1fr); gap: .55rem; padding: .75rem; }
  .reference-metric__icon { width: 2.4rem; height: 2.4rem; }
  .reference-metric__icon .icon { width: 1.25rem; height: 1.25rem; }
  .reference-metric strong { font-size: 1.15rem; }
  .reference-storage em { display: none; }
  .reference-folder-grid { grid-template-columns: 1fr 1fr; }
  .reference-dashboard__panel { padding: .8rem; }
  .reference-trash { padding: .8rem 1rem 1.2rem; }
  .reference-trash__toolbar { align-items: flex-start; flex-direction: column; }
  .reference-trash__tools { width: 100%; justify-content: stretch; }
  .reference-trash__search { width: min(100%, 28rem); flex: 1 1 auto; }
  .reference-trash__guidance { min-height: 14rem; }
  .reference-shared { padding: .8rem 1rem 1.2rem; }
  .reference-shared__surface, .reference-shared__empty { min-height: clamp(29rem, calc(100dvh - 14rem), 40rem); }
  .reference-library { padding: .8rem 1rem 1.15rem; }
  .reference-library__toolbar { align-items: flex-start; flex-direction: column; }
  .reference-library__tools { width: 100%; justify-content: stretch; }
  .reference-library__search { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 1ms; --duration-standard: 1ms; --duration-emphasis: 1ms; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}