:root {
  color-scheme: light;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  color: #19192e;
  background: #f6f6fc;
  font-synthesis: none;
  line-height: 1.5;
  --ink: #19192e;
  --muted: #62647a;
  --accent: #603fec;
  --accent-strong: #482acb;
  --tint: #efebff;
  --line: #e7e6f0;
  --field-line: #9291a9;
  --subtle: #f8f8fd;
  --surface: #fff;
  --rail: #17172b;
  --green: #125b40;
  --red: #92223e;
  --shadow: 0 2px 6px #20174b08;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; color: #51596d; background: #edf0f6; border-color: #e7e6f0; box-shadow: none; }
a { color: var(--accent-strong); }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
h1, h2, p, ul { margin: 0; }
h1 { font-size: clamp(2rem, 4.5vw, 2.9rem); letter-spacing: -.045em; line-height: 1.08; }
h2 { font-size: 1.12rem; letter-spacing: -.015em; line-height: 1.28; }
.primary, .secondary, .quiet {
  min-height: 44px; border-radius: 10px; padding: 9px 14px; border: 1px solid transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; font-weight: 650; font-size: .9rem; line-height: 1.22;
  flex-shrink: 0; white-space: nowrap;
}
.primary { background: var(--accent); color: white; box-shadow: 0 2px 5px #3219862a; }
.secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.quiet { background: transparent; color: var(--muted); }
.danger { color: var(--red); }
.icon { width: 19px; height: 19px; flex: 0 0 auto; vertical-align: middle; }
.icon-button { width: 44px; padding: 0; }
.icon-button[aria-pressed="true"] { border-color: #b5a9eb; background: var(--tint); color: var(--accent-strong); }
.muted, .page-head p { color: var(--muted); }
@media (hover: hover) {
  .primary:not(:disabled):hover { background: var(--accent-strong); }
  .secondary:not(:disabled):hover, .quiet:not(:disabled):hover { background: var(--tint); color: var(--accent-strong); }
  .danger:not(:disabled):hover { color: var(--red); background: #fceef2; }
}
.gate {
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background: radial-gradient(ellipse at 50% 0%, #eae5fb 0, #f6f6fc 71%);
}
.gate-card {
  width: min(100%, 432px); background: var(--surface); border: 1px solid var(--line);
  border-radius: 22px; padding: clamp(22px, 6vw, 38px); box-shadow: 0 16px 60px #23164912;
}
.gate-card > img { display: block; }
.gate-card h1 { margin: 18px 0 9px; }
.gate-card > img { border-radius: 15px; }
.gate-card p { color: var(--muted); line-height: 1.55; }
.gate-card .error-text { color: var(--red); margin-top: 12px; }
#gate-status:not(:empty) { margin-top: 12px; }
.gate-card form { display: grid; gap: 8px; margin-top: 24px; }
.gate-card label, .account-email-form label, dialog label { font-size: .92rem; font-weight: 650; margin-top: 4px; }
.gate-card input, .account-email-form input, dialog input {
  width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--field-line);
  border-radius: 9px; background: var(--surface); color: var(--ink); font-size: 1rem;
}
.gate-card input::placeholder, .search-wrap input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
.gate-card form button { margin-top: 12px; }
.gate-card > button { margin-top: 12px; }
.auth-device-settings summary { color: var(--muted); font-size: .9rem; padding: 10px 0; cursor: pointer; }
.auth-device-fields { display: grid; gap: 8px; }
.auth-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.auth-actions .quiet { color: var(--accent-strong); padding-inline: 10px; }
.shell { display: grid; grid-template-columns: 238px minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.sidebar {
  position: sticky; top: 0; align-self: start; height: 100vh; height: 100dvh;
  background: var(--surface); color: var(--ink); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 34px 18px 21px;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 0 8px; font-weight: 780; font-size: 1.2rem; letter-spacing: -.045em; }
.brand img { border-radius: 11px; }
.sidebar nav { margin-top: 40px; display: grid; gap: 5px; }
.nav-link {
  position: relative; padding: 10px 13px; text-align: left; color: var(--muted); border: 1px solid transparent; display: flex;
  align-items: center; gap: 12px; font-weight: 650; font-size: .94rem; background: transparent;
  border-radius: 11px; min-height: 46px;
}
.nav-link[aria-current="page"] { background: var(--tint); color: var(--accent-strong); }
.nav-link[aria-current="page"]::before { content: ""; position: absolute; width: 3px; height: 17px; left: 0; border-radius: 4px; background: currentColor; }
@media (hover: hover) { .nav-link:not([aria-current="page"]):hover { color: var(--ink); background: var(--subtle); } }
.sidebar-foot { display: flex; align-items: center; gap: 9px; margin: auto 2px 0; padding: 14px 8px 0; border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted); }
.dot { display: inline-block; height: 9px; width: 9px; flex: 0 0 9px; border-radius: 50%; background: #9398af; }
.dot.online { background: #24a872; box-shadow: 0 0 0 3px #e1f5ec; }
.dot.offline { background: #c35670; box-shadow: 0 0 0 3px #fae8ee; }
.main { width: min(100%, 1340px); min-width: 0; margin-inline: auto; padding: 37px clamp(24px, 3.5vw, 56px) 46px; }
.mobile-head { display: none; }
.connection-banner {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px;
  margin-bottom: 16px; border: 1px solid #efbf9c; border-radius: 11px; padding: 10px 12px;
  color: #713b17; background: #fff3e7;
}
.connection-banner p { flex: 1 1 220px; font-size: .94rem; }
.view { min-width: 0; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin: 0 0 22px; }
.page-head > div:first-child { min-width: 0; }
.page-head p { margin-top: 7px; font-size: .97rem; line-height: 1.45; overflow-wrap: anywhere; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.card { border: 1px solid var(--line); background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); min-width: 0; }
.files-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 24%); gap: 16px; margin-bottom: 22px; }
.files-intro {
  isolation: isolate; position: relative; overflow: hidden; align-items: center; margin: 0;
  min-height: 204px; padding: 24px clamp(18px, 3vw, 38px); border: 1px solid #e3dafc; border-radius: 20px;
  background: radial-gradient(ellipse at 79% -6%, #ded2fc, transparent 56%), linear-gradient(120deg, #f5f0ff, #ece4fd);
}
.files-overview:has(> .storage-strip[hidden]) .files-intro { grid-column: 1 / -1; }
.files-intro > div { max-width: 73%; }
.files-intro h1 { font-size: clamp(2.3rem, 4.2vw, 3.2rem); }
.files-intro p { color: #514879; }
.files-intro .actions { margin-top: 19px; }
.files-intro .secondary { border-color: #e0d8f2; }
.files-illustration {
  position: absolute; z-index: -1; display: block; right: 1.5%; top: 50%; transform: translateY(-50%);
  width: min(41%, 290px); height: 114%; object-fit: contain; pointer-events: none;
}
.storage-strip {
  display: grid; grid-template-rows: auto 1fr auto; align-items: center; justify-items: start;
  gap: 11px; border: 1px solid var(--line); border-radius: 20px; padding: 20px;
  background: var(--surface); box-shadow: var(--shadow);
}
.storage-strip > .icon-wrap { color: var(--accent-strong); background: var(--tint); }
.storage-strip strong { font-size: clamp(1.13rem, 1.7vw, 1.55rem); line-height: 1.15; letter-spacing: -.045em; display: block; overflow-wrap: anywhere; margin: 4px 0; }
.storage-strip small { color: var(--muted); font-size: .79rem; display: block; }
.storage-strip .storage-label { font-size: .84rem; font-weight: 670; color: var(--ink); }
progress { width: 100%; height: 7px; appearance: none; border: 0; border-radius: 12px; background: #e9e5f8; accent-color: var(--accent); }
progress::-webkit-progress-bar { border-radius: 12px; background: #e9e5f8; }
progress::-webkit-progress-value { border-radius: 12px; background: var(--accent); }
progress::-moz-progress-bar { border-radius: 12px; background: var(--accent); }
#files-drop-zone { position: relative; min-height: 150px; }
.files-drop-hint {
  position: absolute; z-index: 1; inset: 7px; display: grid; place-items: center;
  border: 2px dashed var(--accent); border-radius: 12px; pointer-events: none;
  background: #f0ebffed; color: var(--accent-strong); font-weight: 760; text-align: center;
}
.view-switch { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 11px; background: var(--subtle); }
.view-switch .icon-button { width: 40px; min-height: 38px; border-radius: 8px; }
.view-switch .icon-button[aria-pressed="true"] { border-color: #e1d8fd; background: #fff; color: var(--accent-strong); box-shadow: var(--shadow); }
.file-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 12px 16px; }
.drive-picker { display: flex; align-items: center; gap: 9px; font-size: .9rem; font-weight: 650; }
.drive-picker select { min-height: 44px; min-width: 70px; border: 1px solid var(--field-line); border-radius: 9px; background: var(--surface); padding: 6px 10px; color: var(--ink); font: inherit; }
#breadcrumbs, #drive-breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; min-width: 0; max-width: 100%; }
#breadcrumbs .quiet, #drive-breadcrumbs .quiet { min-width: 0; max-width: 100%; min-height: 44px; padding: 6px 8px; white-space: normal; overflow-wrap: anywhere; }
#breadcrumbs .quiet[aria-current="page"], #drive-breadcrumbs .quiet[aria-current="page"] { color: var(--ink); }
.crumb-sep { color: #80849a; }
.file-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 100%; }
.file-categories { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; width: min(100%, 365px); padding: 3px; border: 1px solid var(--line); border-radius: 12px; background: var(--subtle); }
.file-categories .quiet { display: flex; justify-content: center; min-width: 0; min-height: 44px; padding: 4px; border: 1px solid transparent; border-radius: 8px; white-space: nowrap; font-size: .84rem; }
.file-categories .quiet[aria-pressed="true"] { border-color: var(--line); background: var(--surface); color: var(--accent-strong); font-weight: 700; }
.search-wrap { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; border-radius: 10px; color: var(--muted); border: 1px solid var(--field-line); background: var(--surface); min-width: 130px; }
.search-wrap:focus-within { outline: 3px solid var(--accent); outline-offset: 3px; }
.search-wrap input { background: transparent; color: var(--ink); border: 0; padding: 7px 0; width: min(185px, 100%); font-size: 1rem; min-width: 0; }
.search-wrap input:focus { outline: none; }
.search-wrap .icon { width: 16px; height: 16px; }
select { min-height: 44px; max-width: 100%; padding: 6px 8px; border: 1px solid var(--field-line); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: .95rem; }
.file-table { display: grid; min-width: 0; }
.file-row { display: grid; grid-template-columns: minmax(0, 1fr) 78px 150px 92px; align-items: center; gap: 11px; padding: 10px 16px; border-bottom: 1px solid var(--line); min-width: 0; }
.file-row:last-child { border-bottom: 0; }
.file-row.head { min-height: 42px; color: var(--muted); font-size: .85rem; font-weight: 640; background: var(--subtle); }
.file-name { display: flex; width: 100%; min-height: 44px; align-items: center; min-width: 0; gap: 10px; border: 0; background: transparent; text-align: left; padding: 0; color: var(--ink); text-decoration: none; font-weight: 640; font-size: .96rem; overflow-wrap: anywhere; }
.file-name > span:last-child { min-width: 0; }
.file-meta { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
@media (hover: hover) {
  .file-row:not(.head):hover { background: var(--subtle); }
  .file-name:hover { color: var(--accent-strong); }
}
.file-row .actions { gap: 3px; justify-content: end; min-width: 90px; }
.icon-wrap { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; background: #edf0fa; color: #55658c; overflow: hidden; }
.icon-wrap.folder { background: #eee8fe; color: var(--accent-strong); }
.icon-wrap.file-icon.document { background: #eaf0ff; color: #3d56af; }
.icon-wrap.file-icon.spreadsheet { background: #e5f7ee; color: #147653; }
.icon-wrap.file-icon.archive { background: #fff2da; color: #865b13; }
.icon-wrap.file-icon.image { background: #fbeaf3; color: #9b3e73; }
.icon-wrap img { width: 100%; height: 100%; object-fit: cover; }
.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(151px, 100%), 1fr)); gap: 12px; padding: 14px; }
.file-tile { min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; justify-content: space-between; }
.file-tile:focus-within { border-color: #a999f5; }
@media (hover: hover) { .file-tile:hover { border-color: #c9bcf9; } }
.file-tile .file-name { display: grid; gap: 8px; align-items: start; }
.file-tile .icon-wrap { width: 100%; height: auto; aspect-ratio: 4 / 3; }
.file-tile .icon-wrap .icon { width: 32px; height: 32px; }
.file-tile .actions { justify-content: end; margin-top: 5px; gap: 1px; }
.empty, .loading-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 9px; padding: 30px 16px; min-height: 174px; }
.loading-state { color: var(--muted); font-size: .95rem; }
.empty > .icon-wrap { width: 50px; height: 50px; color: var(--accent); background: var(--tint); }
.empty strong { font-size: 1.03rem; }
.empty p { color: var(--muted); font-size: .94rem; line-height: 1.5; }
.error-text { color: var(--red); font-size: .94rem; line-height: 1.45; margin-top: 7px; overflow-wrap: anywhere; }
.error-text:empty { display: none; }
.error-text.inset { margin: 12px 14px; padding: 8px 11px; background: #fdf0f3; border-radius: 8px; }
.transfers { margin-top: 16px; }
.transfers header { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 13px 16px; }
#transfer-count { font-size: .87rem; color: var(--muted); }
.transfer { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding: 11px 14px; }
.transfer-body { flex: 1; min-width: 0; }
.transfer-body strong { display: block; font-size: .95rem; overflow-wrap: anywhere; }
.transfer-body small { display: block; color: var(--muted); font-size: .85rem; margin-top: 3px; }
.transfer-body .transfer-destination { overflow-wrap: anywhere; }
.transfer-body small.error-text { color: var(--red); }
.transfer > .actions { justify-content: end; }
.chat-layout { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 900px; }
.chat-context { font-size: .9rem; padding: 12px 17px; border-bottom: 1px solid var(--line); }
.chat-card { display: flex; flex-direction: column; min-height: 320px; height: min(830px, max(320px, calc(100dvh - 210px))); }
.messages { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 17px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-height: 0; }
.messages > .empty { margin: auto; }
.message { max-width: min(91%, 650px); border: 1px solid #e9ebf1; border-radius: 4px 14px 14px 14px; background: #f3f5f9; padding: 10px 13px; }
.message.user { align-self: flex-end; border-color: #e4dcf7; border-radius: 14px 4px 14px 14px; background: var(--tint); }
.message strong { display: block; font-size: .84rem; color: var(--muted); margin-bottom: 3px; }
.message.user strong { color: var(--accent-strong); }
.message p { overflow-wrap: anywhere; white-space: pre-wrap; line-height: 1.55; font-size: 1rem; }
.message.error { color: var(--red); border-color: #f2cdd8; background: #fdf0f3; }
.message.error strong { color: inherit; }
.chat-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 9px; padding: 12px; border-top: 1px solid var(--line); }
.chat-form textarea { width: 100%; min-height: 48px; max-height: 145px; resize: vertical; border: 1px solid var(--field-line); border-radius: 10px; padding: 10px; color: var(--ink); font-size: 1rem; line-height: 1.4; }
.chat-form .primary { min-height: 48px; }
.chat-controls { display: flex; flex-wrap: wrap; gap: 4px 7px; padding: 10px 13px 0; }
.chat-controls + .chat-context { padding-top: 7px; }
.chat-controls[hidden] + .chat-context { padding-top: 12px; }
.chat-controls button { white-space: normal; padding-inline: 10px; }
.message-body { overflow-wrap: anywhere; line-height: 1.55; }
.message-body > * + * { margin-top: .62em; }
.message-body .message-heading { margin: 0 0 .25em; font-size: 1rem; line-height: 1.3; font-weight: 750; }
.message-body strong { display: inline; font-size: inherit; color: inherit; margin: 0; }
.message-body ul, .message-body ol { margin-bottom: 0; padding-left: 1.45em; }
.message-body li + li { margin-top: .18em; }
.message-body code { font-size: .9em; background: var(--subtle); border-radius: 4px; padding: .03em .25em; }
.message-body pre { margin-bottom: 0; padding: 8px 10px; max-height: 50dvh; overflow: auto; background: var(--subtle); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; }
.message-body pre code { background: transparent; padding: 0; }
.message .chat-copy { margin: 3px 0 -5px -8px; padding-inline: 8px; }
.chat-history-header { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.chat-history-header h2 { min-width: 0; }
.chat-history-list { display: grid; gap: 7px; list-style: none; padding: 0; }
.chat-history-list button { width: 100%; white-space: normal; display: grid; gap: 4px; justify-content: stretch; text-align: left; overflow-wrap: anywhere; }
.chat-history-list small { color: var(--muted); font-weight: 500; }
.chat-history-messages { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.chat-history-messages .message { margin: 0; }
.chat-history-messages .message > strong { margin: 0; }
#chat-history-dialog { background: var(--surface); }
#chat-history-dialog footer:has(button[hidden]) { display: none; }
.server-status { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.status-card { padding: 15px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-content: start; align-items: center; }
.status-card > .icon-wrap { grid-column: 1; grid-row: 1 / span 2; }
.status-card h2, .status-card p { grid-column: 2; }
.status-card h2 { align-self: end; }
.status-card p { color: var(--muted); font-size: .9rem; overflow-wrap: anywhere; }
.status-card p.online, .status-card p.offline { justify-self: start; align-self: start; font-weight: 650; border-radius: 6px; padding: 2px 7px; }
.status-card p.online { color: var(--green); background: #e6f4ed; }
.status-card p.offline { color: var(--red); background: #fbeaf0; }
.status-card p:nth-child(4) { grid-column: 1 / -1; margin-top: 6px; }
.info-card { padding: 16px; margin-bottom: 12px; }
.info-card header { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 13px; }
.info-card header p, .info-card .muted { margin-top: 3px; color: var(--muted); font-size: .92rem; }
.account-email-form { display: grid; gap: 8px; max-width: 380px; }
.account-email-form .primary { justify-self: start; }
#account-name { overflow-wrap: anywhere; }
#server-checked { font-variant-numeric: tabular-nums; }
.address { font-family: ui-monospace, monospace; padding: 11px; border-radius: 9px; background: var(--tint); border: 1px solid #e4def6; display: block; min-width: 0; overflow-wrap: anywhere; font-size: .91rem; margin-bottom: 8px; }
.device-list { list-style: none; padding: 0; }
.device { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.device > div { min-width: 0; }
.device strong { display: block; font-size: .96rem; overflow-wrap: anywhere; }
.device small { color: var(--muted); font-size: .86rem; }
.drive-trash-list small { overflow-wrap: anywhere; }
.drive-trash-list button { flex-shrink: 0; }

.move-location { color: var(--ink); overflow-wrap: anywhere; }
.move-controls { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.move-drive-picker { display: grid; gap: 4px; }
.move-folder-list { max-height: 38vh; max-height: 38dvh; overflow: auto; }
.move-folder-list li { border-block-start: 1px solid var(--line); }
.move-folder-link { width: 100%; min-width: 0; justify-content: start; text-align: left; white-space: normal; overflow-wrap: anywhere; }
@media (min-width: 731px) {
  .file-table:has(.move-entry) .file-row { grid-template-columns: minmax(0, 1fr) 78px 112px 138px; }
}
dialog p[role="status"]:empty { display: none; }
dialog { width: min(92vw, 480px); max-height: min(90dvh, 740px); padding: 20px; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); box-shadow: 0 16px 60px #140f4744; }
dialog::backdrop { background: #17172b82; }
dialog h2, dialog p { overflow-wrap: anywhere; }
dialog p { font-size: .95rem; color: var(--muted); line-height: 1.5; margin: 8px 0; }
dialog form { display: grid; gap: 8px; }
dialog footer { display: flex; justify-content: end; gap: 7px; margin-top: 13px; flex-wrap: wrap; }
dialog .preview { display: block; width: 100%; max-height: 62dvh; object-fit: contain; margin-top: 8px; }
dialog .qr { display: block; width: min(210px, 100%); margin: 12px auto; }
.toast { position: fixed; z-index: 3; right: 20px; bottom: 20px; max-width: min(420px, 90vw); background: var(--rail); color: #fff; border-radius: 11px; padding: 12px 16px; box-shadow: 0 6px 20px #130e3b35; font-size: .95rem; overflow-wrap: anywhere; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 1000px) {
  .shell { grid-template-columns: 178px minmax(0, 1fr); }
  .sidebar { padding-inline: 12px; }
  .main { padding: 26px 22px 42px; }
  .files-overview { grid-template-columns: minmax(0, 1fr) 168px; }
  .file-row { grid-template-columns: minmax(0, 1fr) 65px 112px 92px; gap: 9px; }
}
@media (731px <= width <= 820px) {
  .server-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-card:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 730px) {
  html { scroll-padding-bottom: calc(75px + env(safe-area-inset-bottom)); }
  .shell { display: block; }
  .sidebar {
    position: fixed; z-index: 2; top: auto; inset-inline: 0; bottom: 0; height: auto;
    padding: 5px max(7px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left));
    border: 0; border-top: 1px solid var(--line); box-shadow: 0 -4px 20px #2118480d;
  }
  .sidebar .brand, .sidebar-foot { display: none; }
  .sidebar nav { margin: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 5px; }
  .nav-link { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 4px; min-height: 52px; font-size: .78rem; }
  .nav-link[aria-current="page"]::before { display: none; }
  .mobile-head { display: flex; align-items: center; gap: 9px; padding: 0 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 17px; }
  .mobile-head .dot { margin-left: auto; }
  .main { padding: max(13px, env(safe-area-inset-top)) max(13px, env(safe-area-inset-right)) calc(79px + env(safe-area-inset-bottom)) max(13px, env(safe-area-inset-left)); }
  .page-head { gap: 12px; margin-bottom: 15px; align-items: center; }
  .page-head h1 { font-size: clamp(1.85rem, 7.5vw, 2.35rem); }
  .page-head p { margin-top: 4px; }
  .files-overview { grid-template-columns: 1fr; gap: 10px; margin-bottom: 14px; }
  .files-intro { min-height: 150px; margin: 0; padding: 16px; border-radius: 16px; }
  .files-intro > div { max-width: 100%; }
  .files-intro .actions { margin-top: 13px; }
  .files-illustration { right: -4px; top: 31%; width: min(36%, 125px); height: 67%; }
  .storage-strip { grid-template-columns: auto minmax(0, 1fr) minmax(62px, 25%); grid-template-rows: auto; gap: 9px; padding: 10px 13px; border-radius: 14px; }
  .storage-strip strong { font-size: 1.06rem; margin: 2px 0; }
  .storage-strip small { font-size: .73rem; }
  .file-toolbar { padding: 9px 10px; gap: 8px; }
  .view-switch .icon-button { width: 44px; min-height: 44px; }
  .file-filter { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(118px, auto) auto; gap: 8px; }
  #drive-toolbar .file-filter { grid-template-columns: minmax(0, 1fr) minmax(112px, auto); }
  .search-wrap { min-width: 0; }
  .search-wrap input { width: 100%; }
  .file-filter select { width: 100%; font-size: 1rem; }
  .file-row:not(.head) { grid-template-columns: fit-content(65%) minmax(0, 1fr) auto; grid-template-rows: auto auto; padding: 8px 10px 9px; gap: 0 7px; }
  .file-row.head { display: none; }
  .file-name { font-size: .94rem; gap: 7px; }
  .file-row .file-name { grid-column: 1 / 3; grid-row: 1; }
  .file-row > .file-meta { grid-row: 2; font-size: .82rem; overflow-wrap: anywhere; }
  .file-row > .file-meta:nth-child(2) { grid-column: 1; padding-left: 45px; }
  .file-row > .file-meta:nth-child(3) { grid-column: 2; }
  .file-row > .actions { grid-column: 3; grid-row: 1 / 3; }
  .file-row .actions { min-width: 0; }
  .file-grid { grid-template-columns: repeat(auto-fill, minmax(min(128px, 100%), 1fr)); gap: 9px; padding: 10px; }
  .transfer { flex-direction: column; align-items: stretch; padding-inline: 12px; gap: 4px; }
  .transfer > .icon-wrap { display: none; }
  .transfer .actions:empty { display: none; }
  .chat-card { min-height: 250px; height: max(250px, calc(100dvh - 224px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); }
  .chat-context { padding: 10px 12px; }
  .messages { padding: 12px; }
  .chat-form { gap: 7px; padding: 9px; }
  .chat-form textarea { resize: none; }
  .server-status { grid-template-columns: 1fr; gap: 8px; }
  .status-card { padding: 12px; }
  .status-card p:nth-child(4) { grid-column: 2; margin-top: 2px; }
  .info-card { padding: 13px; }
  .toast { right: 11px; bottom: calc(71px + env(safe-area-inset-bottom)); }
}
@media (max-width: 460px) {
  #files-actions { width: 100%; }
  #files-actions .primary, #files-actions .secondary { padding-inline: 9px; gap: 5px; font-size: .8rem; }
  #files-actions .icon { width: 15px; height: 15px; }
  .file-filter { grid-template-columns: minmax(0, 1fr) auto; }
  .search-wrap { grid-column: 1 / -1; }
}
@media (max-width: 350px) {
  .actions { gap: 6px; }
  .actions .primary, .actions .secondary { padding-inline: 9px; }
  .storage-strip { gap: 9px; padding-inline: 11px; }
  .file-row:not(.head) { padding-inline: 8px; }
  .info-card .device { align-items: flex-start; flex-direction: column; gap: 3px; }
}
@media (forced-colors: active) {
  .nav-link[aria-current="page"], .icon-button[aria-pressed="true"] { border-color: Highlight; }
  .dot { border: 1px solid CanvasText; }
}

.theme-picker { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; font-weight: 650; font-size: .92rem; }
.theme-picker select { min-height: 44px; min-width: 134px; padding: 7px 10px; border: 1px solid var(--field-line); border-radius: 9px; background: var(--surface); color: var(--ink); font-size: 1rem; }
.gate-card .theme-picker { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f0effa;
  --muted: #b4b1ca;
  --accent: #7254e7;
  --accent-strong: #bdaaff;
  --tint: #332958;
  --line: #39374c;
  --field-line: #76718f;
  --subtle: #232334;
  --surface: #1b1b29;
  --rail: #302a49;
  --green: #8de3b6;
  --red: #ffb5c6;
  --shadow: 0 2px 6px #08081140;
  background: #11111a;
  color: var(--ink);
}
:where([data-theme="dark"]) :focus-visible { outline-color: var(--accent-strong); }
:where([data-theme="dark"]) button:disabled { color: var(--muted); background: var(--subtle); border-color: var(--line); }
:where([data-theme="dark"]) .gate { background: radial-gradient(ellipse at 50% 0%, #2f244b 0, #11111a 71%); }
:where([data-theme="dark"]) .gate-card { box-shadow: 0 16px 60px #08081170; }
:where([data-theme="dark"]) .dot.online { box-shadow: 0 0 0 3px #1b392e; }
:where([data-theme="dark"]) .dot.offline { box-shadow: 0 0 0 3px #492939; }
:where([data-theme="dark"]) .connection-banner { color: #ffd4a7; background: #382a26; border-color: #745439; }
:where([data-theme="dark"]) .files-intro { border-color: #463967; background: radial-gradient(ellipse at 79% -6%, #45346f, transparent 56%), linear-gradient(120deg, #29223d, #2e2448); }
:where([data-theme="dark"]) .files-intro p { color: #c9bcea; }
:where([data-theme="dark"]) .files-intro .secondary { border-color: #4a4064; }
:where([data-theme="dark"]) progress { background: #3a3250; }
:where([data-theme="dark"]) progress::-webkit-progress-bar { background: #3a3250; }
:where([data-theme="dark"]) .files-drop-hint { background: #332958f2; }
:where([data-theme="dark"]) .icon-button[aria-pressed="true"] { border-color: #69548b; }
:where([data-theme="dark"]) .view-switch .icon-button[aria-pressed="true"] { border-color: #69548b; background: var(--tint); }
:where([data-theme="dark"]) .crumb-sep { color: var(--muted); }
:where([data-theme="dark"]) .icon-wrap { background: #282f49; color: #bbc7f4; }
:where([data-theme="dark"]) .icon-wrap.folder { background: var(--tint); color: var(--accent-strong); }
:where([data-theme="dark"]) .icon-wrap.file-icon.document { background: #283351; color: #bbcdff; }
:where([data-theme="dark"]) .icon-wrap.file-icon.spreadsheet { background: #213b34; color: #9be4bf; }
:where([data-theme="dark"]) .icon-wrap.file-icon.archive { background: #443627; color: #f4d69a; }
:where([data-theme="dark"]) .icon-wrap.file-icon.image { background: #432b44; color: #f3bce0; }
:where([data-theme="dark"]) .file-tile:focus-within { border-color: #9880d6; }
:where([data-theme="dark"]) .error-text.inset { background: #402735; }
:where([data-theme="dark"]) .message { border-color: var(--line); background: var(--subtle); }
:where([data-theme="dark"]) .message.user { border-color: #514378; background: var(--tint); }
:where([data-theme="dark"]) .message.error { border-color: #774659; background: #402735; }
:where([data-theme="dark"]) .chat-form textarea { background: var(--surface); }
:where([data-theme="dark"]) .status-card p.online { background: #203b2e; }
:where([data-theme="dark"]) .status-card p.offline { background: #402735; }
:where([data-theme="dark"]) .address { border-color: #514378; }
:where([data-theme="dark"]) dialog { background: var(--surface); box-shadow: 0 16px 60px #08081180; }
:root[data-theme="dark"] .photo-empty { background: radial-gradient(ellipse at 50% 0, #302747, transparent 62%), var(--surface); }
:root[data-theme="dark"] .photo-artwork-frame { border-color: #635586; background: #3b305d; }

@media (hover: hover) {
  :where([data-theme="dark"]) .primary:not(:disabled):hover { background: #6246c9; }
  :where([data-theme="dark"]) .danger:not(:disabled):hover { color: var(--red); background: #402735; }
  :where([data-theme="dark"]) .file-tile:hover { border-color: #6c5796; }
}