:root {
--color-eggshell-canvas: #fdfcfb;
--color-cloud-surface: #f7f7f7;
--color-paper-beige: #f0f0ea;
--color-whiteboard-gray: #eeeded;
--color-linen-border: #e4ded3;
--color-graphite: #2e2e2e;
--color-charcoal-copy: #454545;
--color-quiet-gray: #6a6972;
--color-disabled-ash: #a8a8a8;
--color-research-blue: #207dff;

--font-instrument-sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system,
BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, sans-serif;
--font-ui-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

--text-utility: 12px;
--text-caption: 14px;
--text-body: 16px;
--text-card-heading: 20px;
--text-hero-display: 48px;
--leading-hero-display: 1.3;
--tracking-hero-display: -1.584px;
--text-section-heading: 36px;
--leading-section-heading: 1.3;
--tracking-section-heading: -0.54px;

--spacing-4: 4px;
--spacing-8: 8px;
--spacing-12: 12px;
--spacing-16: 16px;
--spacing-20: 20px;
--spacing-24: 24px;
--spacing-32: 32px;
--spacing-40: 40px;
--spacing-48: 48px;
--spacing-64: 64px;

--radius-md: 6px;
--radius-lg: 12px;
--radius-full: 9999px;

--shadow-sm: 0 0 4px rgba(0,0,0,.03), 0 4px 8px rgba(0,0,0,.04), 0 16px 26px rgba(0,0,0,.05);
--shadow-popover: 0 0 0 1px rgba(0,0,0,.04), 0 14px 32px rgba(0,0,0,.1), 0 28px 70px rgba(0,0,0,.14);
--shadow-switcher: 0 1px 2px rgba(0,0,0,.05);
}

@media (max-width: 640px) {
:root {
--text-hero-display: 32px;
--text-section-heading: 26px;
}
}

html, body {
margin: 0;
padding: 0;
}

/* Global, because the default content-box silently adds padding and border on
   top of any width:100%, which is how a full-width button ended up 11px wider
   than the card containing it and pushed the phone layout sideways. */
*, *::before, *::after { box-sizing: border-box; }

body {
background: var(--color-eggshell-canvas);
color: var(--color-graphite);
font-family: var(--font-inter);
font-size: var(--text-body);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
display: flex;
flex-direction: column;
min-height: 100vh;
}

a { color: var(--color-research-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
height: 72px;
background: var(--color-eggshell-canvas);
border-bottom: 1px solid rgba(0,0,0,.08);
display: flex;
align-items: center;
gap: var(--spacing-8);
padding: 0 var(--spacing-24);
position: sticky;
top: 0;
z-index: 20;
}
.wordmark {
display: flex;
align-items: center;
gap: var(--spacing-8);
font-weight: 600;
font-size: 18px;
letter-spacing: -.36px;
color: var(--color-graphite);
text-decoration: none;
}
.wordmark:hover { text-decoration: none; }
.topnav { display: flex; gap: var(--spacing-4); }
.mark {
width: 26px; height: 26px;
flex: none;
display: block;
color: var(--color-graphite);
}
.mark svg { width: 100%; height: 100%; display: block; }

.nav-link {
color: var(--color-graphite);
font-size: var(--text-body);
padding: 6px 10px;
border-radius: var(--radius-md);
}
.nav-link:hover { background: var(--color-cloud-surface); text-decoration: none; }
.topbar .spacer { flex: 1; }

.pill {
display: inline-flex;
align-items: center;
gap: var(--spacing-8);
background: var(--color-graphite);
color: #fff;
border: 0;
border-radius: var(--radius-full);
padding: 7px 22px;
font-family: var(--font-inter);
font-size: var(--text-body);
font-weight: 600;
line-height: 20px;
cursor: pointer;
transition: opacity .15s ease, transform .1s ease;
}
.pill:hover:not(:disabled) { opacity: .88; }
.pill:active:not(:disabled) { transform: translateY(1px); }
.pill:disabled { background: var(--color-disabled-ash); cursor: not-allowed; }
.pill.ghost {
background: transparent;
color: var(--color-graphite);
border: 1px solid rgba(0,0,0,.13);
font-weight: 500;
}
.pill.ghost:hover:not(:disabled) { background: var(--color-graphite); color: var(--color-eggshell-canvas); opacity: 1; }

.btn-tool {
display: inline-flex;
align-items: center;
gap: 6px;
background: transparent;
border: 1px solid rgba(0,0,0,.13);
color: var(--color-graphite);
border-radius: var(--radius-md);
padding: 8px 12px;
font-family: var(--font-inter);
font-size: var(--text-caption);
cursor: pointer;
}
.btn-tool:hover { background: var(--color-cloud-surface); }
.btn-tool.danger { color: #c8332f; border-color: rgba(200,51,47,.3); }
.btn-tool.danger:hover { background: #fdf1f0; }

.wrap {
width: min(760px, 92vw);
margin: 0 auto;
padding: var(--spacing-64) 0 96px;
flex: 1;
}
.hero {
text-align: center;
margin-bottom: var(--spacing-48);
}
.hero h1 {
font-family: var(--font-instrument-sans);
font-size: var(--text-hero-display);
font-weight: 500;
line-height: var(--leading-hero-display);
letter-spacing: var(--tracking-hero-display);
margin: 0 0 var(--spacing-12);
}
.hero p {
color: var(--color-quiet-gray);
font-size: 18px;
line-height: 27px;
margin: 0 auto;
max-width: 460px;
}

.switcher {
display: inline-flex;
background: var(--color-cloud-surface);
border-radius: var(--radius-full);
padding: 3px;
gap: 2px;
margin-bottom: var(--spacing-24);
}
.switcher button {
border: 0;
background: transparent;
font-family: var(--font-inter);
font-size: 13px;
font-weight: 500;
color: var(--color-quiet-gray);
padding: 6px 16px;
border-radius: var(--radius-full);
cursor: pointer;
}
.switcher button[aria-selected="true"] {
background: var(--color-eggshell-canvas);
color: var(--color-graphite);
box-shadow: var(--shadow-switcher);
}

.dropzone {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-4);
border: 2px dashed var(--color-linen-border);
border-radius: var(--radius-lg);
background: var(--color-eggshell-canvas);
padding: var(--spacing-48) var(--spacing-24);
text-align: center;
cursor: pointer;
transition: border-color .2s ease, background-color .2s ease;
position: relative;
}
.dropzone:hover, .dropzone.dragover {
border-color: var(--color-graphite);
background: var(--color-cloud-surface);
}
.dropzone input[type=file] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
font-size: 0;
}
.cloud-glyph {
display: block;
width: 52px;
height: 38px;
color: var(--color-graphite);
margin-bottom: var(--spacing-12);
pointer-events: none;
}
.drop-title {
font-weight: 600;
font-size: 18px;
color: var(--color-graphite);
pointer-events: none;
}
.drop-sub {
color: var(--color-quiet-gray);
font-size: var(--text-caption);
pointer-events: none;
}
The invisible <input> fills the box, so a tap on a phone opens the picker
without a separate button and without relying on click propagation. */
.dropzone {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
user-select: none;
}
.dropzone .glyph {
font-size: 34px;
line-height: 1;
margin-bottom: var(--spacing-12);
pointer-events: none;
}
.dropzone .hint { color: var(--color-quiet-gray); font-size: var(--text-caption); }

.hint-row {
display: flex;
justify-content: center;
gap: var(--spacing-8);
flex-wrap: wrap;
margin-top: var(--spacing-16);
}
.hint-row .hint + .hint::before {
content: "В·";
margin-right: var(--spacing-8);
color: var(--color-disabled-ash);
}
.hint {
color: var(--color-quiet-gray);
font-size: var(--text-caption);
}

.queue { margin-top: var(--spacing-24); display: flex; flex-direction: column; gap: var(--spacing-12); }
.item {
background: var(--color-eggshell-canvas);
border: 1px solid rgba(0,0,0,.08);
border-radius: var(--radius-lg);
padding: var(--spacing-16);
}
.item-head {
display: flex;
align-items: baseline;
gap: var(--spacing-8);
justify-content: space-between;
}
.item-name {
font-weight: 600;
font-size: var(--text-body);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 60%;
}
.item-meta {
font-family: var(--font-ui-monospace);
font-size: 13px;
color: var(--color-quiet-gray);
white-space: nowrap;
}
.bar {
height: 6px;
background: var(--color-whiteboard-gray);
border-radius: var(--radius-full);
overflow: hidden;
margin: var(--spacing-12) 0 var(--spacing-8);
}
.bar > i {
display: block;
height: 100%;
width: 0%;
background: var(--color-graphite);
border-radius: var(--radius-full);
transition: width .18s linear;
}
.bar.finalizing > i {
background: linear-gradient(90deg, var(--color-graphite) 25%, #8a8a8a 50%, var(--color-graphite) 75%);
background-size: 200% 100%;
animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer {
from { background-position: 200% 0; }
to { background-position: -200% 0; }
}
.item-foot {
display: flex;
align-items: center;
gap: var(--spacing-8);
flex-wrap: wrap;
}
.status {
font-size: var(--text-caption);
color: var(--color-quiet-gray);
flex: 1;
min-width: 120px;
}
.status.err { color: #c8332f; }
.status.done { color: var(--color-graphite); font-weight: 600; }
.item-foot .mono {
font-family: var(--font-ui-monospace);
font-size: 13px;
}
.link-out {
font-family: var(--font-ui-monospace);
font-size: 13px;
color: var(--color-research-blue);
word-break: break-all;
}

.section-title {
font-family: var(--font-instrument-sans);
font-size: var(--text-section-heading);
font-weight: 500;
line-height: var(--leading-section-heading);
letter-spacing: var(--tracking-section-heading);
margin: var(--spacing-64) 0 var(--spacing-16);
padding-bottom: var(--spacing-8);
border-bottom: 1px solid rgba(0,0,0,.08);
}
.history-item {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--spacing-16);
padding: var(--spacing-16);
border: 1px solid rgba(0,0,0,.08);
border-radius: var(--radius-lg);
background: var(--color-eggshell-canvas);
margin-bottom: var(--spacing-8);
transition: border-color .2s ease;
}
.history-item:hover { border-color: rgba(0,0,0,.22); }
/* min-width:0 lets the text column shrink below its content width, which is
   what makes ellipsis work at all inside a flex row. */
.history-info { min-width: 0; flex: 1 1 auto; max-width: 100%; }
.history-name {
  font-weight: 600;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-sub {
  font-size: var(--text-caption);
  color: var(--color-quiet-gray);
  max-width: 100%;
  overflow-wrap: anywhere;
}
.history-actions { display: flex; gap: var(--spacing-8); flex: none; flex-wrap: wrap; }

.empty {
color: var(--color-disabled-ash);
font-size: var(--text-caption);
text-align: center;
padding: var(--spacing-32) 0;
}

.wrap-narrow { width: min(440px, 92vw); }

.panel-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--spacing-16);
flex-wrap: wrap;
margin-bottom: var(--spacing-24);
}
.panel-head-tight { margin-bottom: var(--spacing-16); }
.panel-title {
font-family: var(--font-instrument-sans);
font-weight: 500;
font-size: 32px;
line-height: 1.3;
letter-spacing: -1px;
margin: 0;
}
.panel-subtitle {
font-family: var(--font-instrument-sans);
font-weight: 500;
font-size: 20px;
letter-spacing: -.3px;
margin: 0 0 var(--spacing-16);
}
.panel-sub { color: var(--color-quiet-gray); margin: 0 0 var(--spacing-24); }
.panel-actions { display: flex; gap: var(--spacing-8); flex-wrap: wrap; }

.stat-grid {
display: grid;
  /* minmax(0,1fr) rather than minmax(190px,1fr): a 190px floor is wider than
     a 320px phone once two columns and the gap are counted, so auto-fit would
     pick one column anyway and still overflow on the narrowest screens. */
grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
gap: var(--spacing-12);
}
.stat {
background: var(--color-eggshell-canvas);
border: 1px solid rgba(0,0,0,.08);
border-radius: var(--radius-lg);
padding: var(--spacing-16);
}
.stat-label { color: var(--color-quiet-gray); font-size: var(--text-utility); }
.stat-value {
font-family: var(--font-instrument-sans);
font-size: 26px;
font-weight: 500;
letter-spacing: -.5px;
margin-top: var(--spacing-4);
}
.stat-note { color: var(--color-disabled-ash); font-size: var(--text-utility); margin-top: 2px; }

.bot-list { display: flex; flex-direction: column; gap: var(--spacing-8); }
.bot {
display: flex;
align-items: center;
gap: var(--spacing-12);
font-size: var(--text-caption);
}
.dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--color-disabled-ash);
flex: none;
}
.dot.ok { background: #2f9e44; }
.bot-name { font-weight: 600; }
.bot-state { color: var(--color-quiet-gray); }
.bot-down .bot-name { color: var(--color-quiet-gray); font-weight: 400; }
.bot-anonymous { font-family: var(--font-ui-monospace); font-size: var(--text-utility); }
.bot .btn-tool { margin-left: auto; }
.bot .btn-tool + .btn-tool { margin-left: 0; }

/* --- admin bulk + pagination ------------------------------------------- */
.pick {
  width: 18px;
  height: 18px;
  margin: 0 2px 0 0;
  accent-color: var(--color-graphite);
  flex: none;
  cursor: pointer;
}
.bulk-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-12);
  padding: 10px 14px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: var(--radius-md);
  background: var(--color-cloud-surface);
  font-size: var(--text-caption);
  position: sticky;
  top: 0;
  z-index: 5;
}
.bulk-bar .spacer { flex: 1; }
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-12);
  margin-top: var(--spacing-16);
  font-size: var(--text-caption);
}
.pager-info { color: var(--color-quiet-gray); min-width: 12ch; text-align: center; }

/* --- Telegram account login -------------------------------------------
   Three steps sharing one panel: phone -> code -> 2FA password. Only the
   active step is shown, so the form never asks for a field the user cannot
   fill yet (the code arrives as a push on the phone they are typing into). */
.login {
  margin-top: var(--spacing-16);
  padding-top: var(--spacing-16);
  border-top: 1px solid var(--color-linen-border);
}
.notice {
  margin-top: var(--spacing-12);
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: #fff8e6;
  border: 1px solid rgba(200,150,20,.28);
  color: #6b5416;
  font-size: var(--text-caption);
  max-width: 64ch;
}

/* [hidden] must win. The UA rule for [hidden] is display:none at the lowest
   specificity, so a bare `display:flex` on the class silently defeats it and
   every step renders at once. */
.login-step { display: flex; flex-direction: column; }
.login-step[hidden], [hidden] { display: none !important; }
.login-label {
  font-size: var(--text-caption);
  font-weight: 600;
  margin-bottom: var(--spacing-8);
}
.login-input {
  font-family: var(--font-inter);
  font-size: var(--text-body);
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.13);
  border-radius: var(--radius-md);
  background: var(--color-eggshell-canvas);
  color: var(--color-graphite);
  max-width: 340px;
}
.login-input:focus {
  outline: 2px solid var(--color-research-blue);
  outline-offset: 1px;
}
.login-note {
  color: var(--color-quiet-gray);
  font-size: var(--text-utility);
  margin-top: var(--spacing-8);
  max-width: 52ch;
}
.login-hint {
  font-size: var(--text-utility);
  margin-top: var(--spacing-12);
  min-height: 1em;
  color: #2f7d32;
}
.login-hint.err { color: #c8332f; }
.login-actions { display: flex; gap: var(--spacing-8); margin-top: var(--spacing-16); }
.login-actions .btn-tool[type="submit"] {
  background: var(--color-graphite);
  color: #fff;
  border-color: var(--color-graphite);
}
.login-actions .btn-tool[type="submit"]:hover { opacity: .88; background: var(--color-graphite); }
.login-actions .btn-tool[type="submit"]:disabled { opacity: .5; cursor: default; }

.search {
font-family: var(--font-inter);
font-size: var(--text-caption);
padding: 8px 12px;
border: 1px solid rgba(0,0,0,.13);
border-radius: var(--radius-md);
background: var(--color-eggshell-canvas);
color: var(--color-graphite);
min-width: 220px;
}
.search:focus { outline: 2px solid var(--color-research-blue); outline-offset: 1px; }

.field { display: block; margin-bottom: var(--spacing-16); }
.field-label {
display: block;
font-size: var(--text-caption);
color: var(--color-quiet-gray);
margin-bottom: var(--spacing-8);
}
.field input {
width: 100%;
font-family: var(--font-inter);
font-size: var(--text-body);
padding: 12px;
border: 1px solid rgba(0,0,0,.13);
border-radius: var(--radius-md);
background: var(--color-eggshell-canvas);
color: var(--color-graphite);
}
.field input:focus { outline: 2px solid var(--color-research-blue); outline-offset: 1px; }
.form-err { color: #c8332f; font-size: var(--text-caption); margin: var(--spacing-12) 0 0; }

.toasts {
position: fixed;
bottom: 24px; left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
gap: var(--spacing-8);
z-index: 1000;
pointer-events: none;
}
.toast {
background: var(--color-graphite);
color: #fff;
border-radius: var(--radius-md);
padding: var(--spacing-12) var(--spacing-24);
font-weight: 600;
font-size: var(--text-caption);
box-shadow: var(--shadow-popover);
animation: rise .18s ease both;
}
.toast.err { background: #c8332f; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

.badge {
display: inline-block;
border: 1px solid var(--color-linen-border);
border-radius: var(--radius-md);
padding: 8px 12px;
font-size: 12px;
font-weight: 600;
color: var(--color-quiet-gray);
background: var(--color-eggshell-canvas);
}

.feature {
background: var(--color-paper-beige);
border-radius: 8px;
padding: var(--spacing-16) 17px;
color: var(--color-charcoal-copy);
font-size: var(--text-caption);
}
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-16);
margin-top: var(--spacing-32);
}
.feature h3 {
margin: 0 0 var(--spacing-8);
font-size: var(--text-body);
font-weight: 600;
color: var(--color-graphite);
}

.card {
background: var(--color-eggshell-canvas);
border: 1px solid rgba(0,0,0,.08);
border-radius: var(--radius-lg);
padding: var(--spacing-24);
}

pre.code {
background: var(--color-whiteboard-gray);
border-radius: var(--radius-lg);
padding: var(--spacing-16);
overflow-x: auto;
font-family: var(--font-ui-monospace);
font-size: 13px;
line-height: 1.6;
margin: var(--spacing-12) 0 0;
}

.footer {
border-top: 1px solid rgba(0,0,0,.08);
padding: var(--spacing-24);
text-align: center;
color: var(--color-disabled-ash);
font-size: var(--text-utility);
}

@media (max-width: 640px) {
.topbar { padding: 0 var(--spacing-16); height: 60px; }
.topbar .nav-link { display: none; }
.wrap { padding-top: var(--spacing-32); }
.history-item { flex-direction: column; align-items: flex-start; }
.history-actions { width: 100%; }
}

/* --- Phone layout ------------------------------------------------------
   A filename is attacker-controlled: it can be 300 characters with no spaces.
   Left alone it sets the page's min-content width, so the whole column grows
   past the viewport and the panel scrolls sideways with the text half off
   screen. Everything below keeps that width bounded.
   min-width:0 on the flex children is what allows text-overflow:ellipsis to
   engage instead of the row pushing the container wider. */
@media (max-width: 720px) {
  .history-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-12);
    padding: var(--spacing-12);
  }
  .history-info {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }
  /* Two lines is enough to recognise a file; the full name is in the title
     attribute and on the file page. */
  .history-name {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
  }
  .history-sub { font-size: var(--text-utility); }

  /* Buttons go full width and stack, so no horizontal squeeze. */
  .history-actions { width: 100%; flex-direction: column; }
  .history-actions .btn-tool,
  .history-actions a.btn-tool {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* The stat row cannot hold six columns on a phone. */
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-value { font-size: 21px; overflow-wrap: anywhere; }

  .panel-head { flex-wrap: wrap; gap: var(--spacing-8); }
  .panel-actions { flex-wrap: wrap; width: 100%; }
  .search { min-width: 0; width: 100%; }

  /* Account rows: name on its own line, actions below. */
  .bot { flex-wrap: wrap; row-gap: var(--spacing-8); }
  .bot-name { max-width: 100%; overflow-wrap: anywhere; }
  .bot-state { flex: 1 1 100%; order: 3; font-size: var(--text-utility); }
  .bot .btn-tool { margin-left: 0; flex: 1 1 auto; }

  .login-input { max-width: 100%; }
  .login-actions { flex-direction: column; }
  .login-actions .btn-tool { width: 100%; text-align: center; justify-content: center; }
}

/* Narrowest common phones. */
@media (max-width: 380px) {
  .stat-grid { grid-template-columns: 1fr; }
  .wrap { width: min(760px, 94vw); }
}

/* The whole page must never scroll sideways, whatever a filename does. */
body { overflow-x: hidden; }

.filecard {
  background: var(--color-eggshell-canvas);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius-lg);
  padding: var(--spacing-24);
}
/* Name and actions share a row so the download button is above the fold even
   when the preview below it is large. */
.file-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-16);
  flex-wrap: wrap;
}
.file-head-text { min-width: 0; flex: 1 1 240px; }
.file-head .action-row { margin-top: 0; flex: none; }

/* Previews live in a fixed-height scroll area. The page itself never grows to
   the height of an image, so nothing important ends up below the fold. */
.preview-box {
  margin-top: var(--spacing-16);
  max-height: min(56vh, 520px);
  overflow: auto;
  border-radius: var(--radius-lg);
  background: var(--color-whiteboard-gray);
  border: 1px solid rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-8);
}
.preview-box:empty { display: none; }
.preview-img { max-height: min(52vh, 480px); width: auto; object-fit: contain; border-radius: var(--radius-md); }
.preview-box audio { width: 100%; }
.preview-box pre { text-align: left; align-self: stretch; }
.preview-box iframe { border: 0; }

/* Appears only when the primary download button has scrolled out of view. */
.mini-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  padding: 10px var(--spacing-16);
  background: rgba(253,252,251,.94);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(0,0,0,.1);
}
.mini-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-caption);
  color: var(--color-quiet-gray);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .file-head { flex-direction: column; align-items: stretch; }
  .file-head .action-row { width: 100%; flex-direction: column; }
  .file-head .action-row .pill { width: 100%; text-align: center; justify-content: center; }
  .preview-box { max-height: 44vh; }
}
.filename {
font-family: var(--font-instrument-sans);
font-weight: 500;
font-size: 28px;
line-height: 1.3;
margin: 0 0 8px;
word-break: break-word;
overflow-wrap: anywhere;
}
.action-row {
display: flex;
gap: var(--spacing-8);
flex-wrap: wrap;
margin-top: var(--spacing-24);
}
.preview {
margin-top: var(--spacing-24);
border-radius: var(--radius-lg);
border: 1px solid rgba(0,0,0,.08);
background: var(--color-whiteboard-gray);
overflow: hidden;
max-height: 70vh;
display: flex;
justify-content: center;
}
.preview img, .preview video { max-width: 100%; max-height: 70vh; display: block; }
.preview iframe { width: 100%; height: 70vh; border: 0; }