/* StudioDrop — design tokens first, no raw hex below this block. */
:root {
  --ink:        #0d0e12;
  --ink-soft:   #5b6070;
  --muted:      #8a90a2;
  --line:       #e6e8ef;
  --line-soft:  #f0f2f7;
  --panel:      #ffffff;
  --accent:     #2f7dff;
  --accent-dk:  #1f63d8;
  --accent-ink: #ffffff;
  --danger:     #d94a4a;
  /* Text weight of the same red: --danger on a red-tinted row is legible but
     thin, and these lines are 12 px. */
  --danger-ink: #a3302f;
  --ok:         #2fb56a;

  --bg-1:       #1b2340;
  --bg-2:       #3d2a5c;
  --bg-3:       #12304f;
  --bg-4:       #0b1020;

  --radius:     18px;
  --radius-sm:  10px;
  --panel-w:    404px;
  --rail-w:     84px;
  --gap:        24px;
  --shadow:     0 18px 50px rgb(6 10 24 / .34);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

/* `display:` on .drawer/.filesum/.options would otherwise beat the attribute */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------ stage */

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(90rem 60rem at 12% 18%,  var(--bg-2) 0%, transparent 58%),
    radial-gradient(70rem 55rem at 82% 78%,  var(--bg-3) 0%, transparent 60%),
    radial-gradient(60rem 50rem at 70% 12%,  var(--bg-1) 0%, transparent 62%),
    var(--bg-4);
}

.stage::after {
  /* subtle grain so the gradient doesn't band */
  content: "";
  position: absolute;
  inset: 0;
  opacity: .16;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/>\
</filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
}

.stage-caption {
  position: absolute;
  right: 40px;
  bottom: 34px;
  text-align: right;
  color: var(--accent-ink);
  line-height: 1.5;
  text-shadow: 0 1px 12px rgb(0 0 0 / .5);
  z-index: 1;
}
.stage-caption img {
  display: block;
  width: clamp(150px, 15vw, 230px);
  height: auto;
  /* the mark is a solid block; a soft shadow keeps its white half from
     dissolving into a bright photo */
  filter: drop-shadow(0 2px 14px rgb(0 0 0 / .45));
}

/* ------------------------------------------------------------ rail */

/* Primary navigation. Sits over the photography like the top-right chips, so
   the same translucent-dark treatment keeps it readable on any wallpaper. */
.rail {
  position: absolute;
  top: 50%;
  left: var(--gap);
  transform: translateY(-50%);
  width: var(--rail-w);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: var(--radius);
  border: 1px solid rgb(255 255 255 / .28);
  background: rgb(20 22 30 / .42);
  backdrop-filter: blur(10px) saturate(1.1);
  z-index: 3;
}
.rail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 11px 4px 9px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--accent-ink);
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .01em;
  cursor: pointer;
  text-shadow: 0 1px 4px rgb(0 0 0 / .45);
  transition: background .15s ease;
}
.rail-item svg {
  width: 21px; height: 21px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.rail-item:hover { background: rgb(255 255 255 / .14); }
.rail-item.is-on { background: rgb(255 255 255 / .22); }
.rail-item:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }

/* ------------------------------------------------------------ panel */

.panel {
  position: absolute;
  top: 50%;
  left: calc(var(--rail-w) + var(--gap) * 2);
  transform: translateY(-50%);
  max-height: calc(100vh - var(--gap) * 2);
  width: var(--panel-w);
  max-width: calc(100vw - var(--gap) * 2);
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 2;
}

.view { display: none; flex: 1; min-height: 0; flex-direction: column; }
.view.is-active { display: flex; }

.panel-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 30px 30px 6px;
}

.panel-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 30px 26px;
  border-top: 1px solid var(--line-soft);
  background: var(--panel);
}

/* ------------------------------------------------------------ dropzone */

.dropzone {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px 2px 22px;
  border-radius: var(--radius-sm);
  transition: background .15s ease, box-shadow .15s ease;
}
.dropzone.is-over {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.add-btn {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: none;
  background: var(--ink);
  color: var(--accent-ink);
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease;
}
.add-btn:hover  { background: var(--accent); transform: scale(1.04); }
.add-btn:active { transform: scale(.97); }

.add-text strong { display: block; font-size: 16px; }
.add-text span   { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.folder-btn {
  display: inline-block; margin-top: 6px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.folder-btn:hover { color: var(--ink); }
.filelist .fmore {
  justify-content: center; color: var(--muted); font-size: 13px;
  padding: 8px 0; border: 0;
}

/* ------------------------------------------------------------ file list */

.filelist { list-style: none; margin: 0 0 4px; padding: 0; }

.filelist li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.filelist .fname {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filelist .fsize { color: var(--muted); font-variant-numeric: tabular-nums; }
.filelist .fdel {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.filelist .fdel:hover { color: var(--danger); }

.filesum {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--muted);
  padding: 10px 0 4px;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ fields */

.fields { padding-top: 4px; }
.fields-group { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.fields-cap {
  font-size: 11.5px; color: var(--muted); letter-spacing: .04em;
  text-transform: uppercase; margin: 0 0 2px;
}

.field + .field { margin-top: 2px; }

.field input,
.field textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 13px 2px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: transparent;
  resize: none;
  outline: none;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--muted); }
.field input:focus,
.field textarea:focus { border-bottom-color: var(--accent); }

/* ------------------------------------------------------------ options */

.options {
  margin-top: 18px;
  padding: 16px;
  border-radius: var(--radius-sm);
  background: var(--line-soft);
}
.opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  padding: 6px 0;
}
.opt select,
.opt input {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 9px;
  font: inherit;
  font-size: 13px;
  background: var(--panel);
  outline: none;
  max-width: 160px;
}
.opt select:focus, .opt input:focus { border-color: var(--accent); }

.opt-modes { align-items: flex-start; flex-direction: column; gap: 6px; }
.modes { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.modes label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}

/* ------------------------------------------------------------ buttons */

.cta {
  flex: 1;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 14px 20px;
  cursor: pointer;
  transition: background .15s ease, opacity .15s ease;
}
.cta:hover:not(:disabled) { background: var(--accent-dk); }
.cta:disabled { opacity: .38; cursor: not-allowed; }

.icon-btn {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink-soft);
  font-size: 17px;
  letter-spacing: 1px;
  cursor: pointer;
}
.icon-btn:hover, .icon-btn.is-on {
  border-color: var(--accent);
  color: var(--accent);
}

.link-btn {
  border: none;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  text-decoration: underline;
  padding: 6px;
}

/* ------------------------------------------------------------ centered views */

.center {
  flex: 1;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 34px;
  gap: 10px;
}
.center h2 { margin: 4px 0 0; font-size: 19px; }
.center-sub  { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.center-note { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }

.ring { width: 128px; height: 128px; transform: rotate(-90deg); }
.ring-track, .ring-bar {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
}
.ring-track { stroke: var(--line); }
.ring-bar {
  stroke: var(--accent);
  stroke-dasharray: 327;
  stroke-dashoffset: 327;
  transition: stroke-dashoffset .25s ease;
}
.pct {
  margin-top: -84px;
  margin-bottom: 40px;
  font-size: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tick {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ok) 14%, transparent);
  display: grid; place-items: center;
}
.tick svg { width: 34px; height: 34px; fill: none; stroke: var(--ok); stroke-width: 4;
            stroke-linecap: round; stroke-linejoin: round; }

.linkbox {
  display: flex;
  width: 100%;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.linkbox input {
  flex: 1;
  min-width: 0;
  border: none;
  padding: 12px 16px;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink-soft);
  outline: none;
}
.linkbox button {
  border: none;
  background: var(--ink);
  color: var(--accent-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 0 20px;
  cursor: pointer;
}
.linkbox button:hover { background: var(--accent); }

/* ------------------------------------------------------------ history */

.history-btn {
  /* positioned by .topright now — absolute here would stack them */
  border: 1px solid rgb(255 255 255 / .45);
  background: rgb(20 22 30 / .42);      /* readable on bright photos, still see-through */
  backdrop-filter: blur(10px) saturate(1.1);
  color: var(--accent-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  text-shadow: 0 1px 4px rgb(0 0 0 / .45);
  transition: background .15s ease, border-color .15s ease;
}
.history-btn:hover {
  background: rgb(20 22 30 / .62);
  border-color: rgb(255 255 255 / .7);
}

/* The account's company mark, riding inside the Konto button. White artwork on
   the dark chip: the black lockup on a light pill got clipped by the pill's own
   rounded ends, and a badge that did nothing was just decoration. */
.acct-btn { display: inline-flex; align-items: center; gap: 9px; padding-left: 13px; }
.acct-mark {
  height: 17px;
  width: auto;
  display: block;
  filter: drop-shadow(0 1px 3px rgb(0 0 0 / .5));
}
/* A divider keeps the mark from reading as part of the word. */
.acct-btn .acct-mark:not([hidden]) + span {
  padding-left: 9px;
  border-left: 1px solid rgb(255 255 255 / .34);
}

.drawer {
  position: absolute;
  top: calc(var(--gap) + 52px);   /* clear the top-right buttons */
  right: var(--gap);
  bottom: var(--gap);
  /* Twice the old 380px, but never so wide that it climbs over the compose
     panel — on a small laptop it takes whatever room is actually left. */
  width: min(760px, calc(100vw - var(--rail-w) - var(--panel-w) - var(--gap) * 4));
  min-width: 340px;
  max-width: calc(100vw - var(--gap) * 2);
  container-type: inline-size;
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 4;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.drawer header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line-soft);
}
.drawer header button {
  border: none; background: none; font-size: 22px;
  cursor: pointer; color: var(--muted); line-height: 1;
}
.drawer ul { list-style: none; margin: 0; padding: 8px 0; overflow-y: auto; flex: 1; }
.drawer li {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}
.drawer li .h-title {
  font-weight: 600; font-size: 14.5px; line-height: 1.35;
  margin-bottom: 5px; word-break: break-word;
}
.drawer li .h-meta  { color: var(--ink-soft); font-size: 12.5px; }
.drawer li .h-link  {
  /* One line, clipped. Wrapped over two lines the raw URL was the loudest
     thing in the row and buried the title it belonged to. */
  display: block; margin-top: 6px; font-size: 11.5px;
  color: var(--accent); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.drawer li .h-link:hover { text-decoration: underline; }
.drawer .empty { padding: 26px 20px; color: var(--muted); text-align: center; }

/* ------------------------------------------------------------ download page */

.dl-files { list-style: none; margin: 14px 0 0; padding: 0; width: 100%; text-align: left; }
.dl-files li { border-bottom: 1px solid var(--line-soft); }

/* The whole row is the download link, and it has to look like one — as plain
   text the filename read as a label and the per-file download went unused. */
.dl-row {
  display: flex; gap: 10px; align-items: center;
  padding: 9px 8px; margin: 0 -8px; border-radius: var(--radius-sm);
  font-size: 13.5px; color: var(--ink); text-decoration: none;
}
.dl-row .fname { flex: 1; min-width: 0;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-row .fsize { color: var(--muted); font-variant-numeric: tabular-nums; }
.dl-row .fdl { display: flex; color: var(--muted); }
.dl-row .fdl svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.dl-row:hover { background: var(--line-soft); color: var(--accent); }
.dl-row:hover .fname { text-decoration: underline; }
.dl-row:hover .fdl { color: var(--accent); }
.dl-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.dl-msg {
  width: 100%; text-align: left; margin: 6px 0 0;
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--line-soft); font-size: 13.5px; color: var(--ink-soft);
  white-space: pre-wrap; word-break: break-word;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 760px) {
  :root { --gap: 10px; }

  /* Static + margin is predictable; absolute left/right/width fights the
     desktop rule and overflowed the viewport. */
  .stage { position: static; min-height: 100vh; overflow: visible; }
  .panel {
    position: static;
    transform: none;
    width: auto;
    max-width: none;
    max-height: none;
    margin: var(--gap);
  }
  .panel-scroll { padding: 20px 18px 6px; }
  .panel-foot { padding: 14px 18px 18px; }

  .stage-caption { display: none; }
  .topright {
    position: static;
    padding: var(--gap) var(--gap) 0;
    justify-content: flex-end;
  }
  .history-btn { border-color: rgb(255 255 255 / .35); }

  .drawer {
    position: fixed;
    inset: 0;
    width: auto;
    margin: 0;
    border-radius: 0;
  }
  .legal-foot { position: static; padding: 4px var(--gap) 16px; }
}

/* ------------------------------------------------------------ v2 additions */

.panel-wide { width: 620px; }

.banner {
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 13px;
  line-height: 1.45;
  margin: 0 0 14px;
}
.banner code { font-size: 12px; }
.banner-warn { background: color-mix(in srgb, var(--accent) 10%, transparent);
               color: var(--ink); }
.banner-err  { background: color-mix(in srgb, var(--danger) 12%, transparent);
               color: var(--ink); }
.drawer-warn { margin: 10px 16px; }

.quota {
  margin: 22px 0 4px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 11.5px;
  color: var(--muted);
}
.quota-track {
  height: 6px; border-radius: 99px; background: var(--line);
  overflow: hidden; margin-bottom: 7px;
}
.quota-bar {
  height: 100%; background: var(--accent); width: 0;
  min-width: 3px;                  /* 66 MB of 40 GB must still be visible */
  border-radius: 99px; transition: width .3s ease;
}
.quota-bar.is-high { background: var(--danger); }
.quota-line { display: block; }
.quota-line + .quota-line { margin-top: 3px; }
.quota-line b { font-weight: 600; color: var(--ink); }

.topright {
  position: absolute; top: var(--gap); right: var(--gap);
  display: flex; gap: 8px; z-index: 3;
}

.tabs { display: flex; gap: 2px; padding: 0 14px 10px; flex-wrap: wrap; }
.tabs-break {
  flex-basis: 100%; height: 0; margin: 7px 5px 6px;
  border-top: 1px solid var(--line-soft);
}
.tab {
  border: none; background: none; font: inherit; font-size: 12.5px;
  color: var(--muted); padding: 6px 9px; border-radius: 99px; cursor: pointer;
}
.tab:hover { color: var(--ink-soft); }
.tab.is-on { background: var(--line-soft); color: var(--ink); font-weight: 600; }
/* The admin tabs are a quieter second tier than the three transfer lists. */
.tabs-break ~ .tab { font-size: 12px; }

.h-del {
  margin-top: 8px; border: 1px solid var(--line); background: var(--panel);
  color: var(--ink-soft); font: inherit; font-size: 11.5px;
  padding: 4px 10px; border-radius: 99px; cursor: pointer;
}
.h-del:hover { border-color: var(--danger); color: var(--danger); }

/* icon actions on a transfer row */
.h-acts { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.h-act {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 34px; height: 34px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel); color: var(--ink-soft);
  font: inherit; font-size: 12.5px; cursor: pointer;
  transition: border-color .13s ease, color .13s ease, background .13s ease;
}
.h-act svg {
  width: 17px; height: 17px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.h-act:hover { border-color: var(--accent); color: var(--accent); }
.h-act.is-done { border-color: var(--ok); color: var(--ok); }
.h-act-text span { font-variant-numeric: tabular-nums; }
.h-act-bin { margin-left: auto; }
.h-act-bin:hover { border-color: var(--danger); color: var(--danger); }
/* armed = one click already given; the next one asks for real */
.h-act-bin.is-armed {
  border-color: var(--danger); color: var(--danger);
  background: color-mix(in srgb, var(--danger) 9%, transparent);
  font-weight: 600;
}
.h-lost { font-style: italic; opacity: .8; }

.cta-sm { padding: 9px 14px; font-size: 13px; width: 100%; }
.cta-link { display: block; text-align: center; text-decoration: none; line-height: 1.3; }

.doc-h1 { font-size: 22px; margin: 4px 0 14px; }
.doc-h2 { font-size: 15px; margin: 22px 0 6px; }
.doc-p  { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 8px; }
.doc-p a { color: var(--accent); }

.plain-select {
  width: 100%; border: none; border-bottom: 1px solid var(--line);
  padding: 13px 2px; font: inherit; font-size: 14px; background: transparent;
  outline: none; color: var(--ink);
}

.strong-note { color: var(--ink-soft); font-weight: 500; max-width: 34ch; }

.legal-foot {
  position: absolute; left: var(--gap); bottom: 6px;
  font-size: 11.5px; color: rgb(255 255 255 / .55); z-index: 1;
}
.legal-foot a { color: inherit; text-decoration: none; }
.legal-foot a:hover { color: var(--accent-ink); text-decoration: underline; }

@media (max-width: 700px) {
  .panel-wide { width: auto; }
  .legal-foot { position: static; padding: 10px var(--gap) 14px; }
}

/* ------------------------------------------------------------ mobile, last word
   Must sit at the end of the file: the v2 block above re-declares .topright and
   would otherwise beat the earlier media query at equal specificity. */
@media (max-width: 760px) {
  .topright {
    position: static;
    padding: var(--gap) var(--gap) 0;
    justify-content: flex-end;
  }
  .drawer { position: fixed; inset: 0; width: auto; border-radius: 0; }
  .legal-foot { position: static; padding: 4px var(--gap) 16px; }
  .panel-wide { width: auto; }
}

/* ------------------------------------------------------------ rotating backdrop */

.backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.backdrop-layer {
  position: absolute;
  inset: 0;              /* no zoom any more, so no crop headroom needed */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: opacity;  /* only the crossfade is animated now */
}

  to   { transform: scale(1.07) translate3d(-0.8%, -0.6%, 0); }
}

/* Darkens the left, where the white panel sits, and lifts overall contrast.
   --scrim is set per image from its measured left-third luminance. */
.backdrop-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  --scrim: 0.45;
  /* The panel is opaque and covers roughly the left 30%, so darkening at 0%
     is wasted. Peak just to its RIGHT (~32-46%) so the panel edge separates,
     then a bottom vignette so the white caption stays legible. */
  background:
    linear-gradient(95deg,
      rgb(6 8 18 / calc(var(--scrim) * 0.30)) 0%,
      rgb(6 8 18 / calc(var(--scrim) * 0.30)) 28%,
      rgb(6 8 18 / calc(var(--scrim) * 0.92)) 40%,
      rgb(6 8 18 / calc(var(--scrim) * 0.46)) 66%,
      rgb(6 8 18 / calc(var(--scrim) * 0.30)) 100%),
    linear-gradient(to top,
      rgb(4 6 14 / calc(var(--scrim) * 0.85)) 0%,
      rgb(4 6 14 / calc(var(--scrim) * 0.20)) 26%,
      transparent 52%),
    radial-gradient(125% 95% at 50% 45%,
      transparent 42%, rgb(4 6 14 / .30) 100%);
  transition: background 1.2s ease;
}

/* the gradient stays as the fallback until a wallpaper is actually painted */
.stage.has-backdrop::after { opacity: .10; }



/* ------------------------------------------------------------ accounts */

.panel-foot.col { flex-direction: column; align-items: stretch; gap: 10px; }
.foot-links { display: flex; justify-content: space-between; gap: 10px; }
.cta-ghost {
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line);
}
.cta-ghost:hover:not(:disabled) { background: var(--line-soft); }

.oauth-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 2px; }
.oauth-btn {
  display: block; text-align: center; text-decoration: none;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 12px 16px; font-size: 14px; font-weight: 500; color: var(--ink);
  background: var(--panel); transition: border-color .15s ease, background .15s ease;
}
.oauth-btn:hover { border-color: var(--accent); background: var(--line-soft); }

.or { display: flex; align-items: center; gap: 12px; margin: 16px 0 2px;
      color: var(--muted); font-size: 12px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.plan-state {
  margin: 14px 0 6px; padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--line-soft); line-height: 1.5;
}
.plan-state strong { display: block; font-size: 15px; }
.plan-state span   { font-size: 12.5px; color: var(--muted); }
.plan-state.is-active   { background: color-mix(in srgb, var(--ok) 13%, transparent); }
.plan-state.is-inactive { background: color-mix(in srgb, var(--danger) 11%, transparent); }

.acct-rows { margin-top: 16px; }
.acct-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px;
}
.acct-row span { color: var(--muted); }
.acct-row b { font-variant-numeric: tabular-nums; }

.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.plan {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 18px; display: flex; flex-direction: column; gap: 12px;
}
.plan-head { display: flex; justify-content: space-between; align-items: baseline; }
.plan-head strong { font-size: 16px; }
.plan-price { font-size: 20px; font-weight: 600; }
.plan-price i { font-size: 12px; font-weight: 400; color: var(--muted); font-style: normal; }
.plan-feats { list-style: none; margin: 0; padding: 0; flex: 1;
              font-size: 13px; color: var(--ink-soft); }
.plan-feats li { padding: 5px 0 5px 16px; position: relative; }
.plan-feats li::before {
  content: "·"; position: absolute; left: 4px; color: var(--accent);
  font-weight: 700;
}
@media (max-width: 700px) { .plans { grid-template-columns: 1fr; } }
.plan-price .tbd { font-size: 14px; font-weight: 500; font-style: normal; color: var(--muted); }

/* ------------------------------------------------------------ form basics */

.pw-field { position: relative; }
.pw-eye {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  border: none; background: none; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--muted); padding: 4px 2px;
}
.pw-eye:hover { color: var(--accent); }

.field-err {
  margin: 6px 0 0; font-size: 12.5px; color: var(--danger);
}

.cta:disabled, .link-btn:disabled { opacity: .5; cursor: progress; }
#who {
  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-decoration: none; opacity: .85;
}

/* (5) options: labelled trigger + a summary of what is currently set */
.opt-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; width: 100%; margin-top: 18px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel); padding: 11px 14px;
  font: inherit; font-size: 13px; color: var(--ink); cursor: pointer;
  text-align: left;
}
.opt-bar:hover { border-color: var(--accent); }
.opt-bar .opt-sum { color: var(--muted); font-size: 12.5px; }
.opt-bar .chev { transition: transform .18s ease; color: var(--muted); }
.opt-bar.is-open .chev { transform: rotate(180deg); }
.options { margin-top: 8px; }

/* (6) one account menu instead of three chips */
.acct-menu { position: relative; display: flex; align-items: center; gap: 10px; }
.acct-pop {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px;
  background: var(--panel); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); overflow: hidden; z-index: 5;
}
.acct-pop .who {
  padding: 12px 14px; font-size: 12.5px; color: var(--muted);
  border-bottom: 1px solid var(--line-soft); word-break: break-all;
}
.acct-pop a, .acct-pop button {
  display: block; width: 100%; text-align: left; border: none; background: none;
  font: inherit; font-size: 13.5px; color: var(--ink); padding: 11px 14px;
  cursor: pointer; text-decoration: none;
}
.acct-pop a:hover, .acct-pop button:hover { background: var(--line-soft); }

/* (7) the "link not on this device" note as a quiet marker */
.h-note {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; margin-left: 6px;
  background: var(--line); color: var(--ink-soft);
  font-size: 10px; font-weight: 700; cursor: help; vertical-align: middle;
}

/* (9) drawer search + empty states */
.drawer-tools { display: flex; gap: 8px; padding: 0 16px 8px; }
.drawer-tools input {
  flex: 1; min-width: 0;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 14px; font: inherit; font-size: 13px; outline: none;
}
.drawer-tools input:focus { border-color: var(--accent); }
.drawer-tools select {
  flex: 0 0 auto; max-width: 44%;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 10px; font: inherit; font-size: 12.5px;
  color: var(--ink-soft); background: var(--panel); outline: none; cursor: pointer;
}
.drawer-tools select:focus { border-color: var(--accent); }
.drawer-count {
  margin: 0; padding: 0 20px 8px;
  font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.drawer .empty { padding: 34px 20px; color: var(--muted); text-align: center;
                 font-size: 13px; line-height: 1.6; }

/* request-a-file form inside the drawer */
.req-form { padding: 16px 20px 20px; border-bottom: 1px solid var(--line-soft); }
.req-form strong { display: block; font-size: 14px; margin-bottom: 4px; }
.req-form p { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.req-form input, .req-form textarea, .req-form select {
  font: inherit; font-size: 13px; color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 11px; outline: none; background: var(--panel);
}
.req-form > input, .req-form > textarea { width: 100%; margin-bottom: 8px; resize: none; }
.req-form input:focus, .req-form textarea:focus, .req-form select:focus {
  border-color: var(--accent);
}
.req-row { display: flex; gap: 10px; margin-bottom: 12px; }
.req-row label { flex: 1; font-size: 11.5px; color: var(--muted);
                 display: flex; flex-direction: column; gap: 4px; }
.req-made { margin-top: 12px; }
.req-made .linkbox { margin-top: 0; }

/* H&S mark, centred over the rotating photography */
.backdrop-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(34vw, 460px);
  max-width: 62vw;
  height: auto;
  opacity: .92;
  /* the photos are bright and busy — without this the white mark dissolves */
  filter: drop-shadow(0 2px 26px rgb(0 0 0 / .55))
          drop-shadow(0 0 2px rgb(0 0 0 / .35));
  pointer-events: none;
  user-select: none;
}

@media (max-width: 760px) {
  /* the panel fills the screen there, so the mark would sit behind it */
  .backdrop-mark { display: none; }
}
.ask-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.ask-row .cta-sm { flex: 0 0 auto; width: auto; }
.ask-note { font-size: 12.5px; color: var(--muted); }

/* home affordances */
.stage-caption a { display: block; text-decoration: none; }
.stage-caption a:hover img { opacity: 1; filter: drop-shadow(0 2px 18px rgb(0 0 0 / .6)); }
.legal-home { font-weight: 600; }

/* visible way back, inside the panel where the eye already is */
.panel-back {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
}
.panel-back:hover { text-decoration: underline; }

/* the footer strip was unreadable: 11.5px translucent grey on a photo */
.legal-foot {
  bottom: 10px;
  font-size: 12.5px;
  color: rgb(255 255 255 / .82);
  text-shadow: 0 1px 6px rgb(0 0 0 / .7);
}
.legal-foot a:hover { text-decoration: underline; }
.legal-home { font-weight: 700; }
.org-site { display: inline-block; margin-top: 4px; font-size: 13px;
            color: var(--accent); text-decoration: none; font-weight: 500; }
.org-site:hover { text-decoration: underline; }

/* per-file rows inside a transfer */
.h-files { margin-top: 10px; padding-left: 2px; border-left: 2px solid var(--line); }
.h-file {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0 6px 10px; font-size: 12.5px;
  border-bottom: 1px solid var(--line-soft);
}
.h-file:last-child { border-bottom: none; }
.h-file .fname { flex: 1; min-width: 0; overflow: hidden;
                 text-overflow: ellipsis; white-space: nowrap; }
.h-del + .h-del { margin-left: 6px; }

/* language switch */
.lang-btn { font-weight: 700; letter-spacing: .04em; padding-left: 14px; padding-right: 14px; }
.lang-float {
  position: absolute; top: var(--gap); right: var(--gap); z-index: 4;
  border: 1px solid rgb(255 255 255 / .45);
  background: rgb(20 22 30 / .42);
  backdrop-filter: blur(10px);
  color: var(--accent-ink); font: inherit; font-size: 13px; font-weight: 700;
  letter-spacing: .04em; padding: 10px 14px; border-radius: 999px; cursor: pointer;
  text-shadow: 0 1px 4px rgb(0 0 0 / .45);
}
.lang-float:hover { background: rgb(20 22 30 / .62); }
@media (max-width: 760px) { .lang-float { position: static; margin: var(--gap) var(--gap) 0; } }

/* ------------------------------------------------------------ rail: narrow
   Appended last on purpose: at equal specificity a later rule wins, so these
   must sit below every desktop rule they override. */
@media (max-width: 760px) {
  /* No room for a side rail — it becomes a row above the panel. */
  .rail {
    position: static;
    transform: none;
    width: auto;
    flex-direction: row;
    margin: var(--gap) var(--gap) 0;
    border-radius: 999px;
  }
  .rail-item { flex: 1; flex-direction: row; justify-content: center; gap: 8px;
               padding: 10px 6px; font-size: 12.5px; }
  .rail-item svg { width: 18px; height: 18px; }
  .panel { left: auto; }
  /* The narrow rules make .panel static, and a static element takes no
     z-index — so the absolutely-positioned wallpaper painted straight over
     it and the white card vanished. Positioning it puts the stack back. */
  .panel { position: relative; z-index: 2; }
  .acct-mark { height: 15px; }
  .drawer-tools { flex-wrap: wrap; }
  .drawer-tools select { max-width: none; width: 100%; }
}

/* Between the two: keep the rail vertical but drop the labels rather than
   letting it crowd the panel off the screen. */
@media (max-width: 1080px) and (min-width: 761px) {
  :root { --rail-w: 58px; }
  .rail-item span { display: none; }
  .rail-item { padding: 12px 4px; }
}

/* ------------------------------------------------------------ wide drawer
   Keyed to the drawer's own width, not the viewport: it is the drawer that
   grew, and a viewport media query would guess wrong whenever the panel or
   rail changes size. */
@container (min-width: 560px) {
  /* One line of tabs fits now, so the forced break is noise. */
  .tabs-break { display: none; }
  .tabs { gap: 4px; }

  /* Text left, actions right — a row per transfer instead of a stack. */
  .drawer li {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 20px;
    padding: 14px 22px;
  }
  .drawer li .h-title { grid-column: 1; margin-bottom: 4px; }
  .drawer li .h-meta  { grid-column: 1; }
  .drawer li .h-acts  { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .drawer li .h-files { grid-column: 1 / -1; }
  .h-act-bin { margin-left: 8px; }

  /* The empty state and the request form are not two-column things. */
  .drawer li.empty, .drawer li.req-form { display: block; }
}

/* (17) two links per transfer -------------------------------------------- */
/* A mirrored transfer carries a studiodrop.de and a hungerundsimmeth.de link.
   Both copy buttons are labelled, which makes the row wider than it was — so
   let it wrap instead of pushing the delete button off the edge. */
.h-acts { flex-wrap: wrap; row-gap: 6px; }
.h-note-wide {
  width: auto; height: 20px; border-radius: 999px; padding: 0 9px;
  font-size: 11px; font-weight: 600; cursor: default; margin-left: 0;
}
/* "create the copy" is an action, not a link — keep it visually quieter than
   the two copy buttons next to it until it has produced something. */
.h-act-make { color: var(--ink-soft); border-style: dashed; }
.h-act-make:disabled { opacity: .6; }

/* (18) the list gets the width ------------------------------------------- */
/* Übertragungen is a table of long file names, two links and a row of
   actions; the compose panel next to it is idle while you are reading it.
   So when the drawer opens, the panel goes and the drawer takes the room.
   Appended last on purpose: at equal specificity the later rule wins. */
@media (min-width: 761px) {
  .drawer { transition: width .22s ease; }

  body.drawer-wide .drawer {
    width: min(1180px, calc(100vw - var(--rail-w) - var(--gap) * 3));
  }
}

/* (19) opening Übertragungen ---------------------------------------------- */
/* The list used to appear and the compose panel to vanish in the same frame,
   which reads as a glitch rather than a change of view. Now they cross-fade:
   the panel slides a little to the left as it goes, the list comes in from
   the right, and the width settles at the same time.
   `visibility` rather than `display` for the panel — it is absolutely
   positioned, so it costs no layout either way, and visibility can be
   transitioned. */
.drawer {
  opacity: 0;
  transform: translateX(12px);
  transition: width .22s ease, opacity .18s ease, transform .22s ease;
}
.drawer.is-open { opacity: 1; transform: none; }

.panel {
  transition: opacity .18s ease, transform .22s ease, visibility .22s;
}

@media (min-width: 761px) {
  body.drawer-wide .panel {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-18px);
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .drawer, .panel { transition-duration: .01ms; }
  .drawer { transform: none; }
}

/* (20) has it arrived? ---------------------------------------------------- */
/* The one question the list is read for, answered before anything is clicked:
   green = the customer collected it, red = their download broke off,
   blue = still waiting. Our own downloads are excluded — checking a delivery
   from the office must not make it look collected.
   The tint is faint and doubled by a bar on the left edge, so the state does
   not rest on colour alone. */
.drawer li.st-done {
  background: color-mix(in srgb, var(--ok) 22%, transparent);
  box-shadow: inset 5px 0 0 var(--ok);
}
.drawer li.st-broken {
  background: color-mix(in srgb, var(--danger) 22%, transparent);
  box-shadow: inset 5px 0 0 var(--danger);
}
.drawer li.st-none {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  box-shadow: inset 5px 0 0 var(--accent);
}

/* An expanded list is the default now, so it has to sit quietly under the row
   rather than shout for attention. */
.h-picks .h-file.is-own { opacity: .55; }

/* An interrupted pickup is called out in red, line and address alike. It has
   to survive being inside a green row: another attempt succeeding does not
   make this one any less broken. */
.h-picks .h-file.is-broken,
.h-picks .h-file.is-broken .fname { color: var(--danger-ink); }
.h-picks .h-file.is-broken .fsize {
  color: var(--danger-ink);
  font-variant-numeric: tabular-nums;
}