/* SpeedX / 快贴互传 — v2. Load AFTER index-CKjsBCK_.css.
   Presentation only. No dependencies, remote assets, or application state changes. */

/* 01 · Shared SpeedX palette; Drop owns the blue accent. */
:root {
  color-scheme: dark;
  --sx-bg: #0b0c10;
  --sx-surface: #101116;
  --sx-raised: #171920;
  --sx-hover: #1c1f29;
  --sx-text: #f2f2f6;
  --sx-muted: #a0a1ad;
  --sx-subtle: #898c9d;
  --sx-border: #2b2e3a;
  --sx-fine: #20222c;
  --sx-top: #ffffff0d;
  --sx-header: #0b0c10d9;
  --sx-drop: #8faeff;
  --sx-violet: #b2a5ff;
  --sx-icon-fill: linear-gradient(135deg, #8faeff, #b2a5ff);
  --sx-icon-ink: #101a32;
  --sx-accent-hover: #aec4ff;
  --sx-on-accent: #101a32;
  --sx-tint: #8faeff0e;
  --sx-tint-strong: #8faeff1a;
  --sx-accent-line: #8faeff40;
  --sx-danger: #f0a19d;
  --sx-danger-bg: #f0a19d0d;
  --sx-danger-line: #f0a19d40;
  --sx-warning: #e3bd82;
  --sx-warning-bg: #e3bd820d;
  --sx-warning-line: #e3bd8240;
  --sx-shadow: 0 16px 48px #00000024, inset 0 1px var(--sx-top);
  --sx-small-shadow: 0 3px 12px #00000018, inset 0 1px var(--sx-top);
  --sx-overlay: #03050bb3;
  --sx-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --sx-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  /* The bundle's shared tokens also serve the device and embedded views. */
  --page: var(--sx-bg); --surface: var(--sx-surface); --surface-soft: var(--sx-raised);
  --surface-blue: var(--sx-tint); --ink: var(--sx-text); --muted: var(--sx-muted);
  --faint: var(--sx-subtle); --line: var(--sx-border); --line-strong: var(--sx-border);
  --blue: var(--sx-drop); --blue-hover: var(--sx-accent-hover); --blue-soft: var(--sx-tint-strong);
  --green: var(--sx-drop); --green-soft: var(--sx-tint-strong);
  --amber: var(--sx-warning); --amber-soft: var(--sx-warning-bg);
  --red: var(--sx-danger); --red-soft: var(--sx-danger-bg);
  --radius: 14px; --shadow: var(--sx-shadow); --shadow-soft: var(--sx-small-shadow);
  background: var(--sx-bg); color: var(--sx-text); font-family: var(--sx-font);
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --sx-bg: #f8f9fc; --sx-surface: #ffffff; --sx-raised: #f1f3f9; --sx-hover: #e9edf6;
    --sx-text: #20212c; --sx-muted: #626574; --sx-subtle: #6f7282;
    --sx-border: #dddfe9; --sx-fine: #e9eaf1; --sx-top: #ffffff;
    --sx-header: #f8f9fce6; --sx-drop: #3658a6; --sx-accent-hover: #29478b;
    --sx-on-accent: #ffffff; --sx-tint: #3658a608; --sx-tint-strong: #3658a610;
    --sx-accent-line: #3658a633;
    --sx-violet: #6551c7;
    --sx-icon-fill: linear-gradient(135deg, #3658a612, #6551c71a);
    --sx-icon-ink: #3658a6;
    --sx-danger: #aa383e; --sx-danger-bg: #aa383e08; --sx-danger-line: #aa383e33;
    --sx-warning: #80551e; --sx-warning-bg: #b87c140a; --sx-warning-line: #80551e33;
    --sx-shadow: 0 18px 50px #2426430a, 0 2px 6px #24264303, inset 0 1px var(--sx-top);
    --sx-small-shadow: 0 3px 12px #24264308, inset 0 1px var(--sx-top);
    --sx-overlay: #151b3959;
  }
}
html { scroll-padding-top: 150px; }
body, body:has(.drop-portal) { background: var(--sx-bg); color: var(--sx-text); font-family: var(--sx-font); -webkit-font-smoothing: antialiased; }
::selection { background: var(--sx-accent-line); color: var(--sx-text); }
:root :is(.drop-shell, .fluent-frame, .space-mobile.mobile-glass) {
  --drop-ink: var(--sx-text); --drop-muted: var(--sx-muted); --drop-line: var(--sx-border); --drop-accent: var(--sx-drop);
  --fluent-ink: var(--sx-text); --fluent-muted: var(--sx-muted); --fluent-line: var(--sx-border);
  --fluent-accent: var(--sx-drop); --fluent-green: var(--sx-drop); --fluent-card: var(--sx-surface);
  --mobile-ink: var(--sx-text); --mobile-muted: var(--sx-muted); --mobile-line: var(--sx-border); --mobile-accent: var(--sx-drop);
  font-family: var(--sx-font); color: var(--sx-text);
}
:root :is(button, a, input, select, textarea, summary) { -webkit-tap-highlight-color: transparent; }
:root :is(button, a, input, select, textarea, summary):focus-visible,
:root label:has(input:focus-visible) { outline: 2px solid var(--sx-drop); outline-offset: 4px; }
:root :is(input, select, textarea) { accent-color: var(--sx-drop); caret-color: var(--sx-drop); }
:root :is(input, textarea)::placeholder { color: var(--sx-subtle); opacity: 1; }
:root :is(button, input, select, textarea):disabled { cursor: not-allowed; }
:root :is(input, select, textarea):disabled { color: var(--sx-subtle); background-color: var(--sx-raised); }
:root :is(button, a, input, select, summary) { touch-action: manipulation; }

/* 02 · Portal frame and family identity. The source image has empty alt text. */
:root .drop-portal { background: radial-gradient(ellipse 760px 420px at 50% 340px, var(--sx-tint-strong), transparent 80%), var(--sx-bg); }
:root .drop-header {
  position: sticky; top: 0; z-index: 40; min-height: 76px; flex-shrink: 0;
  background: var(--sx-header); border-bottom: 1px solid var(--sx-fine);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  padding: 14px max(24px, calc((100% - 1120px) / 2)); gap: 48px;
}
:root .drop-brand { position: relative; gap: 11px; min-height: 44px; font-size: 19px; }
:root .drop-brand img { display: none; }
:root .drop-brand::before {
  content: ""; width: 30px; height: 34px; flex: none; background: var(--sx-drop);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M21 4H12L4 14h14L10 28h9l9-14H14Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
:root .drop-brand strong { font-weight: 650; letter-spacing: -.5px; }
:root .drop-brand::after { content: "by SpeedX"; color: var(--sx-subtle); font-size: 10px; font-weight: 500; letter-spacing: .3px; align-self: flex-end; padding-bottom: 7px; margin-left: 1px; }
:root .drop-header nav { gap: 8px; }
:root .drop-header nav a { min-height: 44px; border: 1px solid transparent; border-radius: 10px; padding: 9px 16px; font-size: 13px; }
:root .drop-header nav a:hover { color: var(--sx-text); background: var(--sx-tint); }
:root .drop-header nav a[aria-current] { color: var(--sx-drop); background: var(--sx-tint-strong); border-color: var(--sx-accent-line); }
:root .drop-account-actions a { min-height: 44px; }
:root .drop-content { width: min(1120px, calc(100% - 64px)); padding: clamp(52px, 8vh, 88px) 0 20px; }
:root .drop-page-title { margin-bottom: 24px; }
:root .drop-kicker { font-size: 11px; font-weight: 550; letter-spacing: 1.5px; }
:root .drop-page-title h1 { font-size: clamp(29px, 3vw, 38px); line-height: 1.35; letter-spacing: -1px; margin-top: 10px; font-weight: 600; }
:root .drop-page-title p { line-height: 1.85; max-width: 640px; }
:root .drop-workspace { grid-template-columns: minmax(0, 1fr) 290px; background: var(--sx-surface); border: 1px solid var(--sx-border); border-radius: 20px; box-shadow: var(--sx-shadow); }
:root .drop-main-tool { padding: 24px; }
:root .drop-tabs { gap: 6px; border: 0; background: var(--sx-raised); border-radius: 12px; padding: 5px; width: fit-content; margin-bottom: 20px; }
:root .drop-tabs button { min-height: 44px; justify-content: center; padding: 9px 25px; font-size: 14px; border: 1px solid transparent; border-radius: 9px; font-weight: 500; }
:root .drop-tabs button:hover { color: var(--sx-text); }
:root .drop-tabs button[aria-selected=true] { color: var(--sx-drop); background: var(--sx-surface); border-color: var(--sx-border); box-shadow: var(--sx-small-shadow); }
/* Only the border moves; the texture and text stay still. No extra DOM or assets. */
@keyframes sx-upload-border {
  from { background-position: 0 0, 0 0, 0% 50%; }
  to { background-position: 0 0, 0 0, 100% 50%; }
}
:root .drop-upload-zone {
  --sx-zone-edge: color-mix(in srgb, var(--sx-drop) 48%, transparent);
  --sx-zone-violet: color-mix(in srgb, var(--sx-violet) 40%, transparent);
  min-height: 282px; gap: 10px; padding: 32px 20px; border: 1px solid transparent; border-radius: 16px;
  background: radial-gradient(circle, color-mix(in srgb, var(--sx-drop) 13%, transparent) .7px, transparent .9px) 0 0 / 18px 18px padding-box,
    linear-gradient(var(--sx-surface), var(--sx-surface)) 0 0 / 100% 100% padding-box,
    linear-gradient(115deg, var(--sx-zone-edge), var(--sx-fine) 30%, var(--sx-zone-violet) 60%, var(--sx-zone-edge)) 0% 50% / 300% 300% border-box;
  box-shadow: inset 0 0 70px var(--sx-tint); color: var(--sx-text);
  animation: sx-upload-border 12s ease-in-out infinite alternate;
  transition: box-shadow .2s;
}
:root .drop-upload-zone:is(:hover, :focus-visible, .dragging):not(:disabled) {
  --sx-zone-edge: var(--sx-drop); --sx-zone-violet: var(--sx-violet);
  box-shadow: inset 0 0 100px var(--sx-tint-strong), 0 0 0 4px var(--sx-tint), 0 8px 32px var(--sx-tint-strong);
}
:root .drop-upload-zone.dragging:not(:disabled) { outline: 2px solid var(--sx-drop); outline-offset: 4px; }
:root .drop-upload-symbol {
  width: 64px; height: 64px; flex: none; margin-bottom: 10px; color: var(--sx-icon-ink);
  background: var(--sx-icon-fill); border: 1px solid var(--sx-accent-line); border-radius: 18px;
  box-shadow: inset 0 1px var(--sx-top), 0 6px 24px var(--sx-tint-strong);
  transition: transform .2s, box-shadow .2s;
}
:root .drop-upload-zone:is(:hover, :focus-visible, .dragging):not(:disabled) .drop-upload-symbol {
  transform: translateY(-4px); box-shadow: inset 0 1px var(--sx-top), 0 10px 28px var(--sx-accent-line);
}
:root .drop-upload-zone:disabled { animation-play-state: paused; }
:root .drop-upload-zone:disabled .drop-upload-symbol { opacity: .6; box-shadow: none; }
:root .drop-upload-symbol svg { width: 30px; height: 30px; stroke-width: 1.5; }
:root .drop-upload-zone strong { font-size: 20px; font-weight: 550; }
:root .drop-upload-zone > span:last-child { font-size: 13px; color: var(--sx-muted); }
:root .drop-upload-actions { margin-top: 22px; gap: 14px; }
:root .drop-upload-actions > span { font-size: 12px; }
:root .drop-shell :is(.drop-primary, .drop-secondary) {
  min-height: 46px; padding: 10px 19px; border-radius: 10px; font-size: 13px; font-weight: 550;
  transition: background .18s, border-color .18s, box-shadow .18s;
}
:root .drop-shell .drop-secondary { color: var(--sx-text); border: 1px solid var(--sx-border); background: var(--sx-surface); box-shadow: inset 0 1px var(--sx-top); }
:root .drop-shell .drop-secondary:hover:not(:disabled) { border-color: var(--sx-accent-line); background: var(--sx-raised); }
:root .drop-shell button:disabled { opacity: 1; color: var(--sx-subtle); background-color: var(--sx-raised); border-color: var(--sx-border); box-shadow: none; }
:root .drop-shell .drop-icon { width: 44px; height: 44px; border-radius: 10px; color: var(--sx-muted); }
:root .drop-shell .drop-icon:hover:not(:disabled) { background: var(--sx-tint-strong); color: var(--sx-drop); }
:root .drop-shell .drop-text-link { min-height: 44px; font-size: 13px; font-weight: 500; gap: 12px; }
:root .drop-shell .drop-text-link:hover { text-decoration: underline; text-underline-offset: 5px; }
:root .drop-shell .drop-text-link:disabled { opacity: .5; background: transparent; }
:root .drop-side-info { background: var(--sx-tint); padding: 34px 24px; border-color: var(--sx-fine); border-radius: 0 20px 20px 0; }
:root .drop-side-info > :is(.drop-side-symbol, svg) { color: var(--sx-drop); }
:root .drop-side-info h2 { font-size: 16px; font-weight: 550; margin-top: 16px; }
:root .drop-side-info p { line-height: 1.8; }
:root .drop-side-divider { margin: 26px 0; border-color: var(--sx-border); }
:root .drop-side-info .drop-text-link { margin-top: 8px; }
:root .drop-footer { width: min(1120px, calc(100% - 64px)); color: var(--sx-subtle); border-color: var(--sx-fine); padding: 8px 0 max(8px, env(safe-area-inset-bottom)); font-size: 12px; align-items: center; flex-shrink: 0; }
:root .drop-footer a { min-height: 44px; color: var(--sx-muted); }
:root .drop-footer a:hover { color: var(--sx-drop); }

/* 03 · Receive / fixed-code creation. One input, six visual cells; text stays intact. */
:root .drop-receive { min-height: 350px; gap: 22px; padding: 20px 0; }
:root .drop-receive > svg { width: 36px; height: 36px; stroke-width: 1.5; }
:root .drop-receive label { font-size: 18px; font-weight: 500; }
:root .drop-shell input:where(:not([type=file]):not([type=checkbox]):not([type=radio])) { color: var(--sx-text); background-color: var(--sx-surface); border: 1px solid var(--sx-border); border-radius: 12px; min-height: 48px; padding: 12px 14px; box-shadow: inset 0 1px var(--sx-top); }
:root .drop-shell input:not([type=file]):focus { border-color: var(--sx-drop); }
:root .drop-shell input[aria-invalid=true] { border-color: var(--sx-danger); background-color: var(--sx-danger-bg); }
:root .drop-shell input[aria-invalid=true]:focus-visible { outline-color: var(--sx-danger); }
:root .drop-shell input.drop-code-input {
  --cell: 44px; --tile: 39px; width: 288px; max-width: 100%; height: 64px; padding: 8px 0 8px 22px;
  font: 500 32px/1.4 var(--sx-mono); font-variant-numeric: tabular-nums; letter-spacing: calc(var(--cell) - 1ch);
  text-align: left; color: var(--sx-drop); border: 1px solid var(--sx-accent-line); border-radius: 12px;
  background: repeating-linear-gradient(to right, var(--sx-tint-strong) 0, var(--sx-tint-strong) var(--tile), var(--sx-surface) var(--tile), var(--sx-surface) var(--cell)) center / calc(6 * var(--cell)) 100% no-repeat var(--sx-surface);
  box-shadow: inset 0 1px var(--sx-top);
}
:root .drop-shell input.drop-code-input[aria-invalid=true] { border-color: var(--sx-danger); color: var(--sx-danger); }
:root .drop-shell input.drop-code-input:disabled { color: var(--sx-subtle); opacity: .7; }
:root .drop-shell input.drop-code-input::placeholder { color: var(--sx-subtle); opacity: .7; }
:root .drop-receive .drop-primary { width: 288px; max-width: 100%; }
:root .drop-receive .drop-error { align-self: stretch; margin: 0; }
:root .drop-code-result { min-width: 0; }
:root .drop-code-result > span { color: var(--sx-drop); font-weight: 500; }
:root .drop-code-line { flex-wrap: wrap; gap: 8px; padding: 17px 0 12px; }
:root .drop-code-line strong {
  display: block; flex: none; width: 204px; padding: 9px 0 9px 9px; border: 1px solid var(--sx-accent-line); border-radius: 10px;
  font: 500 28px/1.4 var(--sx-mono); letter-spacing: calc(34px - 1ch); font-variant-numeric: tabular-nums; color: var(--sx-drop);
  background: repeating-linear-gradient(to right, var(--sx-tint-strong) 0, var(--sx-tint-strong) 30px, var(--sx-surface) 30px, var(--sx-surface) 34px);
  box-shadow: inset 0 1px var(--sx-top);
}
:root .drop-code-line .drop-icon { border: 1px solid var(--sx-border); background: var(--sx-surface); }
:root .drop-code-result .drop-share-link { display: block; color: var(--sx-muted); font: 12px/1.8 var(--sx-mono); overflow-wrap: anywhere; }
:root .drop-results { padding: 26px 28px; margin-top: 28px; border: 1px solid var(--sx-border); border-radius: 18px; background: var(--sx-surface); box-shadow: var(--sx-small-shadow); }
:root .drop-list-heading { flex-wrap: wrap; gap: 12px; }
:root .drop-list-heading h2 { font-size: 17px; font-weight: 550; }
:root :is(.drop-selection, .drop-file-list) { scrollbar-width: thin; scrollbar-color: var(--sx-border) transparent; }
:root :is(.drop-selection, .drop-file-list) li { border-color: var(--sx-fine); padding: 14px 0; }
:root :is(.drop-selection, .drop-file-list) li:last-child { border-bottom: 0; }
:root .drop-file-icon { background: var(--sx-tint-strong); color: var(--sx-drop); border: 1px solid var(--sx-accent-line); border-radius: 10px; width: 44px; height: 48px; }
:root .drop-thumbnail { border: 1px solid var(--sx-border); border-radius: 10px; width: 44px; height: 48px; }
:root .drop-file-name { gap: 4px; }
:root .drop-expiry { color: var(--sx-warning); }
:root .drop-download-status { flex-wrap: wrap; font-size: 13px; padding: 14px; border: 1px solid var(--sx-accent-line); background: var(--sx-tint); border-radius: 12px; }
:root .drop-download-status span { min-width: 120px; }
:root .drop-empty { min-height: 240px; text-align: center; padding: 24px; border: 1px solid var(--sx-border); border-radius: 18px; background: var(--sx-surface); }
:root .drop-space-heading { gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
:root .drop-space-heading .drop-page-title { margin-bottom: 0; }
:root .drop-space-summary { padding: 28px; border: 1px solid var(--sx-border); border-radius: 18px; background: var(--sx-surface); box-shadow: var(--sx-shadow); }
:root .drop-capacity svg { color: var(--sx-drop); }
:root .drop-capacity strong { font: 500 26px/1.4 var(--sx-mono); }
:root .drop-public-notice { line-height: 1.8; padding: 20px 4px; }
:root .drop-create-space { width: min(100%, 500px); padding: 30px; gap: 20px; border: 1px solid var(--sx-border); border-radius: 20px; background: var(--sx-surface); box-shadow: var(--sx-shadow); }
:root .drop-create-space > svg { color: var(--sx-drop); }
:root .drop-create-space h2 { font-weight: 550; }

/* 04 · States and native progress widgets (including Firefox). */
:root .drop-error, :root .auth-error { color: var(--sx-danger); background: var(--sx-danger-bg); border: 1px solid var(--sx-danger-line); border-radius: 12px; line-height: 1.8; }
:root .drop-warning, :root .security-note { color: var(--sx-warning); background: var(--sx-warning-bg); border: 1px solid var(--sx-warning-line); border-radius: 12px; line-height: 1.8; }
:root .drop-progress { gap: 10px 16px; padding: 16px; background: var(--sx-tint); border: 1px solid var(--sx-accent-line); border-radius: 12px; color: var(--sx-muted); }
:root progress, :root meter { accent-color: var(--sx-drop); border: 0; border-radius: 20px; overflow: hidden; height: 7px; }
:root progress { appearance: none; background: var(--sx-border); }
:root progress::-webkit-progress-bar { background: var(--sx-border); border-radius: 20px; }
:root progress::-webkit-progress-value { background: var(--sx-drop); border-radius: 20px; }
:root progress::-moz-progress-bar { background: var(--sx-drop); border-radius: 20px; }
:root meter::-webkit-meter-bar { background: var(--sx-border); border: 0; border-radius: 20px; }
:root meter::-webkit-meter-optimum-value { background: var(--sx-drop); border-radius: 20px; }
:root meter::-webkit-meter-suboptimum-value, :root meter::-webkit-meter-even-less-good-value { background: var(--sx-warning); }
:root meter::-moz-meter-bar { background: var(--sx-drop); }
:root .drop-progress progress, :root .drop-capacity meter { height: 7px; }

/* 05 · Login, disclosure and privacy. */
:root .drop-login { flex: none; width: min(464px, calc(100% - 40px)); margin: 64px auto 32px; padding: 30px 34px; border: 1px solid var(--sx-border); border-radius: 20px; background: var(--sx-surface); box-shadow: var(--sx-shadow); }
:root .drop-login > .drop-text-link { margin-top: 0; }
:root .drop-login .drop-page-title { margin: 26px 0; }
:root .drop-login .drop-page-title > svg { box-sizing: content-box; padding: 12px; width: 25px; height: 25px; background: var(--sx-tint-strong); border: 1px solid var(--sx-accent-line); border-radius: 15px; margin-bottom: 12px; }
:root .drop-login h1 { font-size: 29px; }
:root .drop-login .drop-page-title p { font-size: 13px; line-height: 1.85; margin-top: 12px; }
:root .drop-login-modes { background: var(--sx-raised); border-radius: 12px; padding: 5px; gap: 5px; }
:root .drop-login-modes button { min-height: 44px; font-size: 13px; font-weight: 500; border: 1px solid transparent; border-radius: 9px; }
:root .drop-login-modes button.selected { background: var(--sx-surface); color: var(--sx-drop); border-color: var(--sx-border); box-shadow: var(--sx-small-shadow); }
:root .drop-login-modes button:disabled { color: var(--sx-subtle); background: var(--sx-raised); box-shadow: none; }
:root .drop-shell input:disabled { color: var(--sx-subtle); background-color: var(--sx-raised); }
:root .drop-login form { gap: 10px; }
:root .drop-login form > label { font-size: 13px; font-weight: 500; }
:root .drop-login-field-help { line-height: 1.85; }
:root .drop-login form > button { min-height: 48px; margin-top: 16px; }
:root .drop-login-help { margin-top: 26px; padding-top: 8px; }
:root .drop-login-help summary { min-height: 44px; padding-block: 12px; }
:root .drop-login-note { border-top: 1px solid var(--sx-fine); margin-top: 16px; padding-top: 16px; }
:root .drop-information { background: var(--sx-surface); border: 1px solid var(--sx-border); border-radius: 16px; margin-top: 24px; box-shadow: inset 0 1px var(--sx-top); }
:root .drop-information summary { min-height: 56px; padding: 14px 24px; font-weight: 500; }
:root .drop-information-body { border-color: var(--sx-fine); padding: 4px 24px 24px; }
:root .drop-information dl > div { border-color: var(--sx-fine); padding: 19px 0; }
:root .drop-information dt { font-weight: 550; }
:root .drop-information dd { line-height: 1.9; }
:root .drop-information-note { line-height: 1.9; }
:root .drop-information a, :root .drop-privacy a, :root .drop-login-note a { text-underline-offset: 4px; text-decoration-color: var(--sx-accent-line); }
:root .drop-information a:hover, :root .drop-privacy a:hover, :root .drop-login-note a:hover { text-decoration-color: currentColor; }
:root .drop-privacy { max-width: 800px; }
:root .drop-privacy > .drop-text-link { margin-bottom: 28px; }
:root .drop-privacy .drop-page-title { padding-bottom: 12px; }
:root .drop-privacy section { background: var(--sx-surface); border: 1px solid var(--sx-border); border-radius: 16px; padding: 28px 30px; margin-bottom: 18px; box-shadow: inset 0 1px var(--sx-top); }
:root .drop-privacy h2 { font-size: 18px; font-weight: 550; }
:root .drop-privacy section p { line-height: 2; font-size: 14px; }

/* 06 · OneDrive is shared by the portal and device app. */
:root .onedrive-panel { background: var(--sx-tint); color: var(--sx-text); border: 1px solid var(--sx-accent-line); border-radius: 16px; padding: 20px; box-shadow: inset 0 1px var(--sx-top); }
:root .onedrive-heading { gap: 8px 16px; }
:root .onedrive-heading span, :root .onedrive-panel small { color: var(--sx-muted); line-height: 1.8; }
:root .onedrive-heading strong { font-weight: 550; }
:root .onedrive-options { gap: 6px 20px; }
:root .onedrive-options label { min-height: 44px; font-size: 13px; }
:root .onedrive-panel input { accent-color: var(--sx-drop); flex: none; }
:root .onedrive-panel input[type=checkbox] { appearance: auto; width: 18px; height: 18px; flex: none; padding: 0; border-radius: 4px; }
:root .onedrive-panel input[type=checkbox]::before { display: none; }
:root .onedrive-panel input:disabled { opacity: .5; }
:root .onedrive-panel button { background: var(--sx-surface); color: var(--sx-text); border: 1px solid var(--sx-border); border-radius: 10px; min-height: 44px; padding: 10px 14px; font-size: 12px; }
:root .onedrive-panel button:hover:not(:disabled) { border-color: var(--sx-drop); background: var(--sx-tint-strong); }
:root .onedrive-panel button:disabled { cursor: not-allowed; opacity: 1; color: var(--sx-subtle); background: var(--sx-raised); }
:root .onedrive-panel p { line-height: 1.85; }
:root .onedrive-panel a { color: var(--sx-drop); text-underline-offset: 4px; overflow-wrap: anywhere; }
:root .onedrive-panel [role=alert] { color: var(--sx-danger); }
:root .onedrive-results { border-color: var(--sx-accent-line); padding-top: 10px; }

/* 07 · Device app, including its desktop/mobile and Fluent variants.
   Only visual properties are overridden; native navigation/visibility stays with the bundle. */
:root :is(.space-root, .space-desktop, .space-mobile.mobile-glass, .fluent-frame, .fluent-frame[data-material=none], .boot-screen) { background: var(--sx-bg); color: var(--sx-text); }
:root :is(.space-workspace, .space-sidebar, .fluent-content, .fluent-frame[data-material=none] .fluent-content, .auth-form-panel) { background: var(--sx-surface); border-color: var(--sx-border); }
:root :is(.space-toolbar, .mobile-glass .mobile-toolbar, .mobile-tabbar, .mobile-glass .mobile-tabbar) { background: var(--sx-header); border-color: var(--sx-border); box-shadow: inset 0 1px var(--sx-top); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
:root .mobile-glass .mobile-tabbar { border-radius: 18px; box-shadow: var(--sx-shadow); }
:root .mobile-glass .mobile-tabbar button { border-radius: 11px; }
:root :is(.mobile-glass .mobile-tabbar button.active, .space-settings-button.active, .space-nav button.active, .fluent-nav-item.selected) { color: var(--sx-drop); background: var(--sx-tint-strong); box-shadow: inset 0 1px var(--sx-top); }
:root .web-layout .mobile-tabbar button.active > svg { color: var(--sx-drop); background: var(--sx-tint-strong); box-shadow: none; }
:root :is(.fluent-nav small, .fluent-nav .success, .mobile-queue-empty strong, .fluent-empty-queue h3, .auth-field > span, .conversion-select-field > span, .field > span, .compact-field > span) { color: var(--sx-text); }
:root :is(.mobile-target small, .mobile-glass .mobile-target small, .mobile-glass .notice, .fluent-frame[data-active=false] .fluent-titlebar) { color: var(--sx-muted); }
:root .fluent-frame[data-active=false] .fluent-nav { background: var(--sx-bg); }
:root :is(.fluent-frame, .space-root, .auth-screen) :is(.fluent-queue, .mobile-file-queue, .mobile-glass .mobile-file-queue, .history-item, .device-pick, .fluent-device-row, .fluent-material, .clipboard-sync-card, .credential-setup, .convert-workbench, .conversion-panel, .conversion-panel.compact, .space-send-dock, .mobile-send-dock, .account-summary) {
  background: var(--sx-surface); border-color: var(--sx-border); border-radius: 16px; box-shadow: inset 0 1px var(--sx-top);
}
:root :is(.fluent-frame, .space-root) :is(.fluent-queue, .mobile-file-queue) { box-shadow: var(--sx-small-shadow); }
:root :is(.fluent-frame, .space-root) :is(.fluent-commandbar, .fluent-file-columns, .fluent-queue-footer, .mobile-queue-heading) { background: var(--sx-tint); border-color: var(--sx-fine); }
:root :is(.fluent-frame, .space-root) :is(.fluent-file-row, .mobile-selected-files li, .setting-line, .field-line, .mobile-service, .history-item) { border-color: var(--sx-fine); }
:root :is(.space-drop-canvas, .mobile-drop-canvas, .convert-source, .receiver-hero, .empty-mini, .empty-state, .receive-empty, .receive-log) { background: var(--sx-tint); color: var(--sx-muted); border: 1px solid var(--sx-accent-line); border-radius: 16px; }
:root :is(.space-drop-canvas:hover, .space-drop-canvas.has-files, .mobile-drop-canvas.has-files, .convert-source:hover, .fluent-queue.is-dragging) { background: var(--sx-tint-strong); border-color: var(--sx-drop); box-shadow: 0 0 0 4px var(--sx-tint); }
:root :is(.fluent-frame, .space-root) :is(.device-pick.selected, .device-pick:has(input:checked), .fluent-device-row.selected, .fluent-material.selected) { background: var(--sx-tint-strong); border-color: var(--sx-accent-line); color: var(--sx-drop); box-shadow: inset 3px 0 var(--sx-drop); }
:root :is(.fluent-frame, .space-root) :is(.device-pick:hover, button.fluent-device-row:hover, .fluent-nav-item:hover, .space-nav button:hover, .space-settings-button:hover, .fluent-file-row:hover) { background: var(--sx-hover); border-color: var(--sx-accent-line); }
:root :is(.fluent-frame, .space-root) :is(.mobile-target-icon, .mobile-target-icon.android, .mobile-target-icon.web, .space-target-icon, .space-target-icon.android, .space-target-icon.web, .mobile-file-symbol, .mobile-file-symbol.photo, .device-avatar, .receiver-pulse, .selection-icon, .space-drop-empty > span, .mobile-drop-empty > span, .mobile-file-selection > span, .fluent-avatar, .fluent-target-symbol, .fluent-receive-symbol, .device-orb) {
  background: var(--sx-tint-strong); color: var(--sx-drop); border-color: var(--sx-accent-line); box-shadow: inset 0 1px var(--sx-top); border-radius: 13px;
}
:root :is(.space-root, .fluent-frame) :is(.mobile-queue-empty, .mobile-icon-action, .fluent-device-symbol, .fluent-file-icon, .fluent-file-icon.image, .fluent-file-icon.document, .mobile-service summary > svg:first-child, .mobile-format-select > svg, .fluent-material > svg, .fluent-component > svg, .fluent-clipboard-text > svg, .fluent-inline-status) { color: var(--sx-drop); }
:root .fluent-empty-symbol { color: var(--sx-drop); filter: none; }
:root :is(.space-root, .fluent-frame) :is(.fluent-button, .secondary-button, .outline-command, .text-command, .mobile-toolbar > button, .fluent-unlock .secondary-button) {
  color: var(--sx-text); background: var(--sx-surface); border: 1px solid var(--sx-border); border-radius: 10px; min-height: 44px; box-shadow: inset 0 1px var(--sx-top); font-weight: 500;
}
:root :is(.space-root, .fluent-frame) :is(.fluent-button, .secondary-button, .outline-command, .text-command):hover:not(:disabled) { color: var(--sx-drop); background: var(--sx-tint-strong); border-color: var(--sx-accent-line); box-shadow: none; }
:root :is(.space-root, .fluent-frame) button:disabled { opacity: 1; color: var(--sx-subtle); background: var(--sx-raised); border-color: var(--sx-border); box-shadow: none; }
:root :is(.space-root, .fluent-frame) :is(.fluent-icon, .icon-button, .dock-clear, .auth-password-toggle) { min-width: 44px; min-height: 44px; border-radius: 10px; color: var(--sx-muted); background: transparent; border-color: transparent; }
:root :is(.space-root, .fluent-frame) :is(.fluent-icon, .icon-button, .dock-clear):hover:not(:disabled) { background: var(--sx-hover); color: var(--sx-text); }
:root :is(.space-root, .fluent-frame) :is(.danger-button, .outline-command.danger, .fluent-account-detail button) { color: var(--sx-danger); background: var(--sx-danger-bg); border-color: var(--sx-danger-line); }
:root :is(.space-root, .fluent-frame) :is(.danger-button, .outline-command.danger):hover:not(:disabled) { color: var(--sx-danger); background: var(--sx-danger-bg); border-color: var(--sx-danger); }
:root :is(.space-root, .fluent-frame) :is(input:where(:not([type=file]):not([type=radio]):not([type=checkbox])), select, textarea, .fluent-search) {
  background-color: var(--sx-surface); color: var(--sx-text); border: 1px solid var(--sx-border); border-radius: 12px; min-height: 44px;
}
:root :is(.space-root, .fluent-frame) :is(input:where(:not([type=file]):not([type=radio]):not([type=checkbox])), select, textarea):focus { border-color: var(--sx-drop); }
:root .mobile-glass .mobile-settings-page .field-line > input { background: var(--sx-surface); border-color: var(--sx-border); border-radius: 12px; }
:root :is(.space-root, .fluent-frame) select option { background: var(--sx-surface); color: var(--sx-text); }
:root .fluent-frame input:not([type=checkbox]):not([type=radio]):focus-visible { outline: 2px solid var(--sx-drop); outline-offset: 4px; }
:root .fluent-search input { min-height: 40px; }
:root .fluent-search { height: auto; }
:root .fluent-search:focus-within, :root .auth-input-shell:focus-within { border-color: var(--sx-drop); box-shadow: 0 0 0 3px var(--sx-tint-strong); }
:root :is(.clipboard-sync-toggle, .fluent-frame input[type=checkbox], .setting-line input[type=checkbox], .toggle-row input[type=checkbox], .mini-toggle input[type=checkbox]) { background: var(--sx-border); border-color: var(--sx-subtle); }
:root :is(.clipboard-sync-toggle:checked, .fluent-frame input[type=checkbox]:checked, .setting-line input[type=checkbox]:checked, .toggle-row input[type=checkbox]:checked, .mini-toggle input[type=checkbox]:checked) { background: var(--sx-drop); border-color: var(--sx-drop); }
:root .clipboard-sync-toggle::before, :root .fluent-frame input[type=checkbox]::before { background: var(--sx-text); }
:root .clipboard-sync-toggle:checked::before, :root .fluent-frame input[type=checkbox]:checked::before { background: var(--sx-on-accent); }
:root :is(.mini-toggle, .setting-line, .toggle-row, .clipboard-sync-card:has(> input[type=checkbox])) { min-height: 44px; }
:root :is(.space-root, .fluent-frame) :is(.clipboard-sync-card.active, .converter-status-line, .account-identity, .connection-state.online) { color: var(--sx-drop); background: var(--sx-tint-strong); border-color: var(--sx-accent-line); }
:root :is(.space-root, .fluent-frame) :is(.clipboard-sync-card.warn, .error-note, .fluent-error, .fluent-progress.error) { color: var(--sx-danger); }
:root :is(.space-root, .fluent-frame) .clipboard-sync-card.warn { background: var(--sx-danger-bg); border-color: var(--sx-danger-line); }
:root :is(.space-root, .fluent-frame) :is(.connection-state:not(.online), .converter-status-line.warn, .conversion-progress.warn, .security-note) { color: var(--sx-warning); background: var(--sx-warning-bg); border-color: var(--sx-warning-line); }
:root :is(.fluent-cloud-status, .mobile-glass .mobile-connection) { color: var(--sx-warning); }
:root :is(.fluent-cloud-status.success, .mobile-glass .mobile-connection.connected) { color: var(--sx-drop); }
:root :is(.progress-card, .conversion-progress, .converter-integrity) { background: var(--sx-tint); border-color: var(--sx-border); color: var(--sx-muted); border-radius: 12px; }
:root .progress-track { background: var(--sx-border); height: 7px; border-radius: 20px; }
:root .progress-track i { background: var(--sx-drop); }
:root .conversion-badge { color: var(--sx-muted); background: var(--sx-raised); }
:root .conversion-badge.active { color: var(--sx-drop); background: var(--sx-tint-strong); }
:root .fluent-commandbar h2 span { color: var(--sx-muted); background: var(--sx-raised); }
:root .fluent-reveal::after { box-shadow: inset 0 1px var(--sx-top); background: none; }
:root .drop-embedded .drop-workspace { background: var(--sx-surface); grid-template-columns: minmax(0,1fr) 260px; }
:root .drop-embedded .drop-main-tool { padding: 24px; }
:root .drop-cloud-tabs { border-color: var(--sx-border); }
:root .drop-cloud-tabs button { min-height: 44px; color: var(--sx-muted); }
:root .drop-cloud-tabs button[aria-selected=true] { color: var(--sx-drop); border-color: var(--sx-drop); }
:root .proximity-controls { gap: 10px; }
:root .proximity-controls > button { white-space: normal; }
:root .web-download-actions { flex-wrap: wrap; }
:root .web-download-actions button { min-width: 44px; min-height: 44px; }
:root .auth-screen, :root .auth-screen.auth-screen-android { background: var(--sx-bg); }
:root .auth-brand-panel { background: var(--sx-tint-strong); border-color: var(--sx-border); }
:root .auth-brand-panel::after { border-color: var(--sx-accent-line); }
:root .auth-device-strip { background: var(--sx-surface); border-color: var(--sx-border); }
:root .auth-device-strip span { background: var(--sx-raised); border-color: var(--sx-border); }
:root .auth-device-strip i { background: var(--sx-border); }
:root .auth-input-shell, :root .auth-screen.auth-screen-android .auth-input-shell { background: var(--sx-surface); border-color: var(--sx-border); color: var(--sx-muted); border-radius: 12px; box-shadow: inset 0 1px var(--sx-top); }
:root .auth-password-toggle:hover { background: var(--sx-hover); }
:root :is(.auth-brand-mark, .boot-mark, .space-brand > span, .mobile-brand > span) { color: var(--sx-on-accent); background: var(--sx-drop); box-shadow: var(--sx-small-shadow); }

/* 08 · Shared dialogs and notifications. Never force a closed dialog to display. */
:root .startup-update { background: var(--sx-surface); color: var(--sx-text); border: 1px solid var(--sx-border); border-radius: 20px; padding: 30px; box-shadow: 0 28px 100px #00000040, inset 0 1px var(--sx-top); }
:root .startup-update::backdrop { background: var(--sx-overlay); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
:root .startup-update h2 { font-weight: 550; font-size: 22px; }
:root .startup-update p { color: var(--sx-muted); line-height: 1.85; }
:root .startup-update-symbol { background: var(--sx-tint-strong); color: var(--sx-drop); border: 1px solid var(--sx-accent-line); border-radius: 15px; }
:root .startup-update-close { width: 44px; height: 44px; border-radius: 10px; color: var(--sx-muted); }
:root .startup-update-close:hover { color: var(--sx-text); background: var(--sx-hover); }
:root .startup-update-actions { flex-wrap: wrap; }
:root .startup-update-actions button { min-height: 44px; background: var(--sx-surface); color: var(--sx-text); border: 1px solid var(--sx-border); border-radius: 10px; }
:root .startup-update-actions button:hover:not(:disabled) { background: var(--sx-hover); }
:root .startup-update button:disabled { opacity: 1; color: var(--sx-subtle); background: var(--sx-raised); border-color: var(--sx-border); }
:root .startup-update .startup-update-error { color: var(--sx-danger); }
:root .fluent-toast { color: var(--sx-drop); background: var(--sx-surface); border: 1px solid var(--sx-accent-line); border-radius: 14px; box-shadow: var(--sx-shadow); padding: 14px 16px; }
:root .fluent-toast .fluent-icon { flex: none; width: 44px; height: 44px; color: inherit; background: transparent; border: 0; border-radius: 10px; }
:root .fluent-toast .fluent-icon:hover { background: var(--sx-tint-strong); }
:root .fluent-toast > span { min-width: 0; overflow-wrap: anywhere; }
:root .fluent-toast.error { color: var(--sx-danger); background: var(--sx-surface); border-color: var(--sx-danger-line); }

/* Primary geometry and hover follow main-site .button / .button-light.
   The supplied main-site CSS has no .btn-primary; retain its Drop product accent. */
:root :is(.drop-shell, .space-root, .fluent-frame, .auth-screen, .startup-update) :is(.drop-primary, .fluent-primary, .primary-button, .space-send-button, .auth-submit, .startup-update-primary),
:root .mobile-glass .mobile-send-dock .space-send-button.compact {
  min-height: 46px; padding: 10px 21px; border-radius: 7px; font-size: 13px; font-weight: 550;
  background: var(--sx-drop); color: var(--sx-on-accent); border: 1px solid var(--sx-drop);
  box-shadow: 0 2px 20px var(--sx-tint); opacity: 1;
  transition: transform .2s, background .2s, border-color .2s, box-shadow .2s;
}
:root :is(.drop-shell, .space-root, .fluent-frame, .auth-screen, .startup-update) :is(.drop-primary, .fluent-primary, .primary-button, .space-send-button, .auth-submit, .startup-update-primary):hover:not(:disabled),
:root .mobile-glass .mobile-send-dock .space-send-button.compact:hover:not(:disabled) {
  background: var(--sx-accent-hover); color: var(--sx-on-accent); border-color: var(--sx-accent-hover);
  box-shadow: 0 4px 24px var(--sx-tint-strong); transform: translateY(-2px);
}
:root :is(.drop-shell, .space-root, .fluent-frame, .auth-screen, .startup-update) :is(.drop-primary, .fluent-primary, .primary-button, .space-send-button, .auth-submit, .startup-update-primary):active:not(:disabled),
:root .mobile-glass .mobile-send-dock .space-send-button.compact:active:not(:disabled) { transform: translateY(0); }
:root :is(.drop-shell, .space-root, .fluent-frame, .auth-screen, .startup-update) :is(.drop-primary, .fluent-primary, .primary-button, .space-send-button, .auth-submit, .startup-update-primary):disabled,
:root .mobile-glass .mobile-send-dock .space-send-button.compact:disabled {
  background: color-mix(in srgb, var(--sx-drop) 35%, transparent);
  border-color: transparent; color: var(--sx-muted); cursor: not-allowed;
  opacity: 1; box-shadow: none; transform: none;
}

/* 09 · Responsive polish. Respect the bundle's route / disclosure visibility. */
@media (max-width: 1000px) {
  :root .drop-header { gap: 26px; }
  :root .drop-brand::after { display: none; }
  :root .drop-content { width: calc(100% - 48px); }
  :root .drop-workspace { grid-template-columns: minmax(0, 1fr) 258px; }
  :root .drop-main-tool { padding: 24px; }
  :root .drop-side-info { padding: 30px 20px; }
}
@media (max-width: 760px) {
  :root .drop-header { min-height: 0; padding: max(8px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 8px max(20px, env(safe-area-inset-left)); gap: 6px 16px; }
  :root .drop-brand { gap: 9px; font-size: 18px; }
  :root .drop-brand::before { width: 27px; height: 30px; }
  :root .drop-brand::after { display: block; font-size: 9px; padding-bottom: 8px; margin-left: 0; }
  :root .drop-header nav { padding-top: 6px; gap: 8px; border-color: var(--sx-fine); }
  :root .drop-header nav a { height: 44px; min-height: 44px; padding: 8px 12px; }
  :root .drop-account-actions { gap: 4px; }
  :root .drop-account-actions .drop-secondary { min-height: 44px; padding: 8px 12px; }
  :root .drop-content { width: calc(100% - 32px); padding: 26px 0 24px; }
  :root .drop-page-title { margin-bottom: 24px; padding-inline: 4px; }
  :root .drop-page-title h1 { margin-top: 8px; font-size: 29px; }
  :root .drop-workspace, :root .drop-embedded .drop-workspace { display: block; border-radius: 18px; }
  :root .drop-main-tool, :root .drop-embedded .drop-main-tool { padding: 18px; }
  :root .drop-tabs { width: 100%; margin-bottom: 20px; }
  :root .drop-tabs button { flex: 1; }
  :root .drop-upload-zone { min-height: 256px; padding: 28px 14px; }
  :root .drop-upload-zone strong { font-size: 19px; }
  :root .drop-upload-actions { margin-top: 18px; gap: 14px 8px; }
  :root .drop-upload-actions > div { flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
  :root .drop-upload-actions .drop-primary, :root .drop-upload-actions .drop-secondary { padding-inline: 14px; }
  :root .drop-side-info { border-top: 1px solid var(--sx-border); border-left: 0; border-radius: 0 0 18px 18px; padding: 24px; }
  :root .drop-code-line { flex-wrap: nowrap; }
  :root .drop-receive { min-height: 326px; gap: 22px; }
  :root .drop-receive label { font-size: 17px; }
  :root .drop-results { padding: 20px 18px; margin-top: 22px; }
  :root .drop-file-list li { gap: 8px; }
  :root .drop-file-name strong { font-size: 13px; }
  :root .drop-space-summary { flex-wrap: wrap; padding: 24px; gap: 24px; }
  :root .drop-capacity { width: 100%; }
  :root .drop-create-space { padding: 24px; }
  :root .drop-information summary { padding: 16px 18px; }
  :root .drop-information summary small { font-size: 12px; }
  :root .drop-information-body { padding: 4px 18px 20px; }
  :root .drop-login { width: calc(100% - 32px); padding: 22px; margin: 26px auto 40px; }
  :root .drop-login .drop-page-title { padding: 0; margin: 22px 0; }
  :root .drop-login input { font-size: 16px; }
  :root .drop-privacy > .drop-text-link { margin-left: 4px; margin-bottom: 22px; }
  :root .drop-privacy section { padding: 23px 20px; }
  :root .drop-privacy section p { font-size: 13px; line-height: 2; }
  :root .drop-footer { width: calc(100% - 40px); gap: 12px; font-size: 11px; }
  :root .onedrive-panel { padding: 16px; }
  :root .onedrive-actions button { flex: 1 1 auto; }
  :root .startup-update { padding: 24px; }
  :root .space-mobile.mobile-glass { padding-inline: 20px; }
  :root .mobile-glass .mobile-page { min-width: 0; }
  :root .mobile-glass .mobile-toolbar { gap: 10px; }
  :root .mobile-glass .mobile-toolbar > button { font-size: 12px; }
  :root .mobile-glass .mobile-page-head :is(h1,h2) { font-size: 28px; }
  :root .mobile-glass .mobile-service summary { min-height: 82px; }
  :root .mobile-glass .clipboard-sync-card { gap: 10px; padding: 16px; }
  :root .mobile-glass .clipboard-sync-card span { white-space: normal; overflow-wrap: anywhere; font-size: 12px; }
  :root .mobile-glass .clipboard-sync-card > .proximity-controls { padding-top: 8px; }
  :root .mobile-glass .history-item { flex-wrap: wrap; padding: 14px; }
  :root .mobile-glass .history-item > div:nth-child(2) { flex-basis: calc(100% - 60px); }
  :root .mobile-glass .web-download-actions { margin-left: auto; }
  :root .mobile-glass .mobile-format-select { width: 100%; }
  :root .mobile-glass .mobile-send-dock { flex-wrap: wrap; }
  :root .mobile-glass .mobile-send-dock .space-send-button.compact { min-height: 48px; }
  :root .fluent-file-columns, :root .fluent-file-row { grid-template-columns: minmax(0,1fr) 44px; }
}
@media (max-width: 370px) {
  :root .drop-brand::after { display: none; }
  :root .drop-main-tool { padding: 14px; }
  :root .drop-login, :root .drop-create-space { padding: 18px; }
  :root .drop-code-line { flex-wrap: wrap; }
  :root .drop-shell input.drop-code-input { width: 240px; font-size: 28px; --cell: 36px; --tile: 31px; }
  :root .drop-receive .drop-primary { width: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  :root *, :root *::before, :root *::after { scroll-behavior: auto; transition-duration: 0s; animation-duration: 0s; }
  :root .drop-upload-zone { animation: none; }
  :root .drop-upload-zone:is(:hover, :focus-visible, .dragging):not(:disabled) .drop-upload-symbol { transform: none; }
  :root :is(.drop-shell, .space-root, .fluent-frame, .auth-screen, .startup-update) :is(.drop-primary, .fluent-primary, .primary-button, .space-send-button, .auth-submit, .startup-update-primary):hover:not(:disabled),
:root .mobile-glass .mobile-send-dock .space-send-button.compact:hover:not(:disabled) { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  :root .drop-header, :root .mobile-glass .mobile-tabbar, :root .startup-update { background: var(--sx-surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (forced-colors: active) {
  :root .drop-brand::before { background: CanvasText; }
  :root :is(.drop-workspace, .drop-upload-zone, .drop-tabs, .drop-login, .drop-information, .drop-space-summary, .drop-results, .drop-privacy section, .onedrive-panel, .startup-update, .fluent-toast) { background: Canvas; color: CanvasText; border-color: CanvasText; box-shadow: none; }
  :root .drop-shell :is(.drop-primary, .drop-secondary, .drop-code-input), :root .drop-code-line strong { background: Canvas; color: CanvasText; border: 1px solid ButtonText; box-shadow: none; }
  :root .drop-tabs button[aria-selected=true], :root .drop-login-modes button.selected, :root .drop-header nav a[aria-current] { outline: 2px solid Highlight; outline-offset: -3px; }
  :root :is(.drop-shell, .space-root, .fluent-frame, .auth-screen, .startup-update) :is(.drop-primary, .fluent-primary, .primary-button, .space-send-button, .auth-submit, .startup-update-primary),
:root .mobile-glass .mobile-send-dock .space-send-button.compact { background: ButtonFace; color: ButtonText; border: 1px solid ButtonText; box-shadow: none; }
  :root :is(.drop-shell, .space-root, .fluent-frame, .auth-screen, .startup-update) :is(.drop-primary, .fluent-primary, .primary-button, .space-send-button, .auth-submit, .startup-update-primary):disabled,
:root .mobile-glass .mobile-send-dock .space-send-button.compact:disabled { background: Canvas; color: GrayText; border-color: GrayText; }
  :root .drop-shell button:disabled { color: GrayText; }
  :root .drop-upload-zone { animation: none; }
  :root .drop-upload-symbol { background: Canvas; color: ButtonText; box-shadow: none; }
  :root .drop-upload-zone:is(:hover, :focus-visible, .dragging):not(:disabled) { box-shadow: none; outline-color: Highlight; }
  :root .drop-upload-zone:is(:hover, :focus-visible, .dragging):not(:disabled) .drop-upload-symbol { box-shadow: none; }
}