:root {
  color-scheme: light;
  --bg: #fcfbfe;
  --top: #f7f5fc;
  --side: #f4f2fb;
  --panel: #fcfbfe;
  --drop: #f5f1ff;
  --line: #e2dcf2;
  --dash: #b5a3ec;
  --text: #131024;
  --muted: #423c68;
  --accent: #6447b4;
  --primary: #6c55bc;
  --soft: #f0ebfd;
  --bubble: #e7dffb;
  --danger: #ad3154;
  --shadow: 0 14px 46px #25174721;
  font-family: Inter, 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: clamp(15px, 1.1vw, 18px);
  font-synthesis: none;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #171421;
  --top: #201a2d;
  --side: #211c31;
  --panel: #221d30;
  --drop: #29213c;
  --line: #3f3556;
  --dash: #8069bd;
  --text: #f6f1ff;
  --muted: #cfc4e7;
  --accent: #d0baff;
  --primary: #765bc8;
  --soft: #33264c;
  --bubble: #463565;
  --danger: #ffa8bd;
  --shadow: 0 14px 46px #09070c80;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--text); min-height: 100vh; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .56; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
main:focus { outline: none; }
.skip { position: fixed; z-index: 5; top: .5rem; left: .5rem; transform: translateY(-200%); background: var(--panel); padding: .75rem; }
.skip:focus { transform: none; }
[data-icon] { display: inline-grid; place-items: center; flex: none; }
[data-icon] svg { width: 1.35em; height: 1.35em; display: block; }
.topbar {
  min-height: 5.15rem; padding: .8rem 2.35rem; display: flex; align-items: center; gap: 1.7rem;
  border-bottom: 1px solid var(--line); background: var(--top);
}
.brand { display: inline-flex; align-items: center; gap: .9rem; font-size: 2.27rem; font-weight: 790; line-height: 1; letter-spacing: -.05em; white-space: nowrap; }
.brand img { width: 4.05rem; height: auto; }
.brand strong { color: var(--accent); }
.tagline { border-left: 1px solid var(--line); padding: .25rem 0 .25rem 1.7rem; color: var(--muted); font-size: 1.2rem; font-weight: 500; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 1.25rem; }
.icon-button, .theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; border: 0;
  color: var(--muted); background: transparent; border-radius: 50%; min-width: 2.6rem; min-height: 2.6rem; font-size: 1.45rem;
}
.icon-button:hover { background: var(--soft); }
.avatar { background: var(--bubble); color: var(--text); width: 3rem; height: 3rem; }
.theme-toggle { gap: .6rem; padding: 0 .55rem; border: 1px solid var(--line); border-radius: 2rem; background: var(--panel); }
.theme-toggle [data-icon="sun"] { color: #e48205; }
.theme-toggle .theme-dot { width: .95em; height: .95em; border-radius: 50%; background: var(--bubble); }
.theme-dot svg { opacity: 0; width: .85em; height: .85em; }
[data-theme="dark"] .theme-dot svg { opacity: 1; }
[data-theme="dark"] .theme-toggle [data-icon="sun"] { color: var(--muted); }
.layout { display: grid; grid-template-columns: minmax(13rem, 18.7%) minmax(0, 1fr); gap: 1.25rem; padding: 1.25rem 1.15rem 0 .35rem; min-height: calc(100vh - 5.15rem); }
.sidebar { display: flex; flex-direction: column; justify-content: space-between; align-self: stretch; gap: 2rem; padding: 1.55rem .95rem .75rem; background: var(--side); border-radius: 1.45rem 1.45rem 0 0; }
.sidebar nav { display: grid; gap: .45rem; }
.sidebar nav a {
  display: flex; align-items: center; gap: 1.15rem; padding: .72rem 1.25rem;
  min-height: 3.1rem; border-radius: .9rem; font-size: 1.23rem; font-weight: 550;
}
.sidebar nav a span { color: var(--muted); }
.sidebar nav a:hover { background: var(--soft); }
.sidebar nav a[aria-current="page"] { background: linear-gradient(110deg, #826dcc, var(--primary)); color: #fff; }
.sidebar nav a[aria-current="page"] span { color: #fff; }
.storage { background: var(--panel); border: 1px solid var(--line); border-radius: 1.35rem; padding: 1rem 1.1rem; }
.storage h2 { display: flex; gap: .75rem; align-items: center; font-size: 1.15rem; }
.storage h2 span { color: var(--muted); }
progress { appearance: none; width: 100%; height: .7rem; background: var(--bubble); color: var(--primary); border: 0; border-radius: 2rem; overflow: hidden; }
progress::-webkit-progress-bar { background: var(--bubble); border-radius: 2rem; }
progress::-webkit-progress-value { background: #8269cb; border-radius: 2rem; }
progress::-moz-progress-bar { background: #8269cb; border-radius: 2rem; }
.storage progress { margin-top: .65rem; }
.storage p { text-align: center; color: var(--muted); font-size: 1rem; margin: .6rem 0 .85rem; }
.storage .button { width: 100%; }
main { min-width: 0; padding: .78rem 0 2.7rem; }
.hero { display: grid; grid-template-columns: minmax(0, 1.93fr) minmax(0, 1fr); gap: 1.65rem; }
.drop {
  min-height: 22rem; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; border: 2px dashed var(--dash); border-radius: 1.45rem; padding: 1.25rem;
  background: var(--drop);
}
.drop.dragging { background: var(--bubble); border-color: var(--accent); transition: background .18s, border-color .18s; }
.upload-mark { width: 6.05rem; height: auto; margin-bottom: .75rem; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -.035em; overflow-wrap: anywhere; }
.drop h1 { font-size: 2.08rem; font-weight: 790; }
.drop p { color: var(--muted); font-size: 1.25rem; line-height: 1.45; margin: .45rem 0 1.15rem; }
.drop small { color: var(--muted); font-size: 1.08rem; margin-top: 1rem; }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem; border: 1px solid transparent; border-radius: .85rem;
  padding: .65rem 1rem; min-height: 2.5rem; color: var(--accent); font-weight: 650; text-align: center; transition: filter .15s;
}
.button:hover:not(:disabled) { filter: brightness(.93); }
.primary { background: linear-gradient(112deg, #795fc6, var(--primary)); color: #fff; }
.drop .button { font-size: 1.22rem; padding: .86rem 2.4rem; }
.secondary { background: var(--soft); }
.danger { color: var(--danger); background: var(--soft); }
.how, .panel { position: relative; border: 1px solid var(--line); border-radius: 1.45rem; padding: 1.2rem 1.55rem; background: var(--panel); }
.how { background: linear-gradient(155deg, var(--top), var(--panel)); }
.how h2 { font-size: 1.67rem; position: relative; }
.paper-plane { position: absolute; top: 1.8rem; right: 1.4rem; color: var(--bubble); font-size: 4.3rem; pointer-events: none; }
.how ol { list-style: none; padding: 0; margin: 1.35rem 0 0; display: grid; gap: .85rem; counter-reset: steps; position: relative; }
.how li { display: flex; align-items: center; gap: 1.02rem; font-size: 1.11rem; font-weight: 550; letter-spacing: -.025em; counter-increment: steps; }
.how li::before { content: counter(steps); display: grid; place-items: center; flex: 0 0 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--bubble); color: var(--accent); font-weight: 760; font-size: 1.45rem; }
.listing { margin-top: 1.85rem; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin: 0 .3rem .8rem; }
.section-heading h2 { font-size: 1.8rem; }
.text-button { display: inline-flex; gap: .3rem; align-items: center; color: var(--accent); border: 0; padding: .2rem; background: transparent; font-weight: 650; }
.text-button:hover { text-decoration: underline; }
.file-list { border: 1px solid var(--line); border-radius: 1.45rem; background: var(--panel); }
.empty { text-align: center; color: var(--muted); padding: 2rem 1rem; line-height: 1.5; }
.file-row {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(8rem, .9fr) minmax(6rem, .9fr) auto;
  align-items: center; gap: 1rem; padding: .95rem 1.85rem; min-height: 5.05rem;
}
.file-row + .file-row { border-top: 1px solid var(--line); }
.file-info { display: flex; align-items: center; gap: 1.55rem; min-width: 0; }
.file-info > div { min-width: 0; }
.file-info h3 { font-size: 1.25rem; }
.file-info p, .file-count { color: var(--muted); margin-top: .25rem; font-size: 1.05rem; }
.file-count { display: inline-flex; gap: .75rem; align-items: center; }
.file-badge { width: 2.8rem; height: 2.8rem; border-radius: .62rem; display: grid; place-items: center; flex: none; background: var(--bubble); color: var(--accent); font-weight: 780; }
.file-badge.pdf { background: #dc434f; color: white; font-size: .85rem; }
.file-badge.image { background: #e0edff; color: #1c74c3; }
.file-badge.video { background: #ae8beb; color: #241346; }
.file-badge [data-icon] { font-size: 1.15rem; }
.file-row .button { justify-self: start; white-space: nowrap; }
.file-row .icon-button { justify-self: end; }
.pager, .actions { display: flex; gap: .65rem; flex-wrap: wrap; margin-top: .9rem; }
.pager { justify-content: flex-end; }
.transfer { margin-top: 1rem; }
.transfer h2, dialog h2 { font-size: 1.4rem; }
.transfer progress { margin-top: .9rem; }
.transfer-list { margin: .7rem 0; padding-left: 1.2rem; max-height: 8rem; overflow: auto; overflow-wrap: anywhere; }
.subtle { color: var(--muted); line-height: 1.5; }
.fields { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: .95rem; }
.field { display: grid; gap: .35rem; flex: 1 1 10rem; min-width: 0; font-weight: 550; }
.field input, .field select {
  border: 1px solid var(--line); border-radius: .55rem; background: var(--bg); color: var(--text);
  min-height: 2.6rem; width: 100%; padding: .5rem .7rem;
}
.error { color: var(--danger); margin: .55rem 0; overflow-wrap: anywhere; }
.notice { padding: .7rem 0; }
.link-field { margin-top: .65rem; }
.solo { display: block; padding: 0 1rem; }
.solo main { padding-top: clamp(1.5rem, 7vw, 5.5rem); }
.recipient { max-width: 38rem; margin: auto; padding: clamp(1rem, 4vw, 2.3rem); }
.recipient .upload-mark { width: 4rem; }
.recipient h1 { margin-bottom: .5rem; font-size: clamp(1.55rem, 4vw, 2.15rem); }
.recipient ul { padding: 0; list-style: none; margin: .7rem 0; }
.recipient li { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.recipient li strong { display: block; overflow-wrap: anywhere; }
.recipient li .button { flex: none; }
.recipient footer { margin-top: 1.2rem; font-size: .84rem; }
dialog { width: min(30rem, calc(100% - 1.4rem)); border: 1px solid var(--line); border-radius: 1.15rem; color: var(--text); background: var(--panel); padding: 1.2rem; box-shadow: var(--shadow); }
dialog::backdrop { background: #1c143967; }
.dialog-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.toast { position: fixed; z-index: 4; right: 1rem; bottom: 1rem; max-width: min(25rem, calc(100% - 2rem)); color: var(--text); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: .75rem; padding: .8rem 1rem; }
@media (min-width: 1320px) {
  .drop { padding-left: 3.7rem; }
  .how { padding-right: .55rem; }
}
@media (max-width: 1120px) {
  .layout { grid-template-columns: 13rem minmax(0, 1fr); }
  .layout.solo { display: block; }
  .sidebar nav a { gap: .65rem; padding-inline: .7rem; font-size: 1.08rem; }
  .hero { gap: 1rem; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  .how { padding-inline: 1rem; }
  .file-row { padding-inline: 1rem; gap: .65rem; }
  .file-info { gap: .8rem; }
}
@media (max-width: 830px) {
  .topbar { padding-inline: 1rem; gap: 1rem; }
  .tagline { display: none; }
  .layout { display: block; padding: .7rem 1rem 0; }
  .sidebar { display: block; padding: .35rem; border-radius: 1rem; }
  .sidebar nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sidebar nav a { justify-content: center; text-align: center; }
  .sidebar .storage { display: none; }
  .sidebar .storage.mobile-visible { display: block; margin: .5rem; }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .drop { min-height: 19rem; }
  .how ol { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: .7rem; gap: .5rem; }
  .how li { align-items: flex-start; gap: .45rem; font-size: .93rem; }
  .how li::before { flex-basis: 1.75rem; height: 1.75rem; font-size: 1rem; }
  .paper-plane { top: .5rem; right: 1rem; font-size: 2rem; }
}
@media (max-width: 540px) {
  .topbar { min-height: 3.8rem; padding: .45rem .7rem; gap: .45rem; }
  .brand { font-size: 1.47rem; gap: .38rem; }
  .brand img { width: 2.6rem; }
  .top-actions { gap: .16rem; }
  .top-actions .icon-button, .theme-toggle { min-width: 2.7rem; min-height: 2.7rem; font-size: 1.1rem; }
  .top-actions .avatar { width: 2.7rem; height: 2.7rem; }
  .theme-toggle { gap: .28rem; padding-inline: .3rem; }
  .theme-dot { display: none; }
  .layout { padding-inline: .65rem; }
  .sidebar nav { gap: .1rem; }
  .sidebar nav a { flex-direction: column; gap: .24rem; font-size: .77rem; line-height: 1.15; padding: .55rem .1rem; border-radius: .65rem; }
  .sidebar nav a [data-icon] { font-size: 1.04rem; }
  .drop { min-height: 17.5rem; padding-inline: .5rem; }
  .drop h1 { font-size: 1.75rem; }
  .drop p { font-size: 1.04rem; }
  .drop .button { font-size: 1.05rem; padding-inline: 1.1rem; }
  .drop small { font-size: .95rem; }
  .how h2 { font-size: 1.35rem; }
  .how li { flex-direction: column; }
  .how li::before { width: 1.6rem; height: 1.6rem; flex: none; }
  .section-heading h2 { font-size: 1.27rem; }
  .section-heading .text-button { font-size: .82rem; }
  .file-row { grid-template-columns: minmax(0, 1fr) auto; padding: .7rem; gap: .5rem; }
  .file-row .file-info { grid-column: 1; }
  .file-row .icon-button { grid-column: 2; grid-row: 1; }
  .file-row .file-count { grid-column: 2; justify-self: end; font-size: .8rem; gap: .2rem; }
  .file-info h3 { font-size: 1.05rem; }
  .file-info p { font-size: .88rem; }
  .file-badge { width: 2.35rem; height: 2.35rem; }
  .recipient li .button { padding-inline: .45rem; font-size: .86rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }