/* Send Files — ft- prefixed. Matches the studio panel/step aesthetic (sky/blue accent). */
.ft-app .panel{padding:22px}   /* global section{padding:30px 0} would hug the card borders otherwise */

/* hero */
.ft-hero{background:linear-gradient(135deg,#f5f9ff,#fff 60%);border:1px solid #cfe0fb}
.ft-hero-left{flex:1;min-width:280px}
.ft-hero h2{margin:0 0 4px;font-size:1.5rem;font-weight:800;color:#121a29}
.ft-hero-sub{margin:0 0 8px;font-weight:700;color:#475063}
.ft-hero-sub .accent{color:#0d5fe8}
.ft-hero-note{margin:0 0 12px;color:#5b6577;font-size:.92rem;line-height:1.5;max-width:60ch}
.ft-hero-badges{display:flex;flex-wrap:wrap;gap:8px}
.ft-hero-badges span{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;color:#084dcc;
  background:#eaf2ff;border:1px solid #cfe0fb;border-radius:20px;padding:4px 10px}

/* staged transfer */
.ft-stage{margin-top:16px}
.ft-stage-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.ft-stage-head h3{margin:0;font-size:1.02rem;font-weight:800;color:#121a29;display:flex;align-items:center;gap:8px}
.ft-stage-head h3 i{color:#0d5fe8}
.ft-count{font-size:.78rem;font-weight:700;color:#0d5fe8;background:#eaf2ff;border-radius:20px;padding:2px 9px}
.ft-clear{border:1px solid #dfe4ec;background:#fff;color:#7b8494;font-weight:700;font-size:.78rem;border-radius:8px;padding:6px 11px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.ft-clear:hover{border-color:#fca5a5;color:#dc2626;background:#fef2f2}

.ft-list{display:flex;flex-direction:column;gap:6px}
.ft-file{display:flex;align-items:center;gap:10px;padding:7px 10px;border:1px solid #eef1f6;border-radius:10px;background:#fbfcfe}
.ft-file-ic{width:30px;height:30px;border-radius:6px;background:#eaf2ff;color:#0d5fe8;display:flex;align-items:center;justify-content:center;flex:none}
.ft-file-name{flex:1;min-width:0;font-size:.86rem;font-weight:600;color:#27303f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ft-file-meta{font-size:.74rem;color:#8a93a3;font-variant-numeric:tabular-nums;white-space:nowrap}
.ft-file-x{flex:none;border:0;background:#f1f3f7;color:#7b8494;width:24px;height:24px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.ft-file-x:hover{background:#fee2e2;color:#dc2626}

/* size meter */
.ft-meter{display:flex;align-items:center;gap:12px;margin-top:14px}
.ft-meter-bar{flex:1;height:8px;border-radius:6px;background:#eef1f6;overflow:hidden}
.ft-meter-fill{height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,#3b82f6,#0d5fe8);transition:width .25s}
.ft-meter.over .ft-meter-fill{background:linear-gradient(90deg,#f87171,#dc2626)}
.ft-meter-text{font-size:.78rem;font-weight:700;color:#5b6577;font-variant-numeric:tabular-nums;white-space:nowrap}
.ft-meter.over .ft-meter-text{color:#dc2626}

/* error banner */
.ft-err{display:flex;gap:9px;align-items:flex-start;background:#fef2f2;border:1px solid #fecaca;border-radius:10px;padding:10px 13px;margin-top:14px;font-size:.85rem;color:#991b1b;line-height:1.5}
.ft-err[hidden]{display:none}
.ft-err i{color:#dc2626;margin-top:2px;flex:none}
.ft-err .ft-upsell{border:0;background:none;color:#0d5fe8;font-weight:800;cursor:pointer;text-decoration:underline;padding:0;font:inherit}

/* create button + plan note */
.ft-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px}
.ft-create{border:0;background:linear-gradient(180deg,#3b82f6,#0d5fe8);color:#fff;font-weight:800;font-size:.94rem;border-radius:10px;padding:12px 22px;cursor:pointer;display:inline-flex;align-items:center;gap:9px;box-shadow:0 8px 20px -10px rgba(13,95,232,.8)}
.ft-create:hover{filter:brightness(1.06)}
.ft-create:disabled{opacity:.55;cursor:default;filter:none}
.ft-plan-note{font-size:.8rem;color:#6b7484;line-height:1.45}
.ft-plan-note b{color:#0d5fe8}
.ft-plan-note .ft-upsell{border:0;background:none;color:#0d5fe8;font-weight:800;cursor:pointer;text-decoration:underline;padding:0;font:inherit}

/* progress */
.ft-progress{margin-top:16px}
.ft-prog-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.ft-prog-head h3{margin:0;font-size:1.02rem;font-weight:800;color:#121a29;display:flex;align-items:center;gap:8px}
.ft-prog-head h3 i{color:#0d5fe8}
.ft-prog-pct{font-size:1.05rem;font-weight:800;color:#0d5fe8;font-variant-numeric:tabular-nums}
.ft-prog-bar{height:10px;border-radius:6px;background:#eef1f6;overflow:hidden}
.ft-prog-fill{height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,#3b82f6,#0d5fe8);transition:width .2s}
.ft-prog-list{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.ft-prog-file{display:flex;align-items:center;gap:10px;padding:6px 10px;border:1px solid #eef1f6;border-radius:9px;background:#fbfcfe}
.ft-prog-file .st{flex:none;width:22px;text-align:center;color:#94a0b2}
.ft-prog-file .st .fa-circle-check{color:#16a34a}
.ft-prog-file .st .fa-spinner{color:#0d5fe8}
.ft-prog-file .nm{flex:1;min-width:0;font-size:.82rem;font-weight:600;color:#27303f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ft-prog-file .pc{font-size:.74rem;color:#8a93a3;font-variant-numeric:tabular-nums;white-space:nowrap}
.ft-prog-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px}
.ft-cancel{border:1px solid #dfe4ec;background:#fff;color:#475063;font-weight:700;font-size:.82rem;border-radius:9px;padding:8px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.ft-cancel:hover{border-color:#fca5a5;color:#dc2626;background:#fef2f2}
.ft-prog-hint{font-size:.78rem;color:#94a0b2}

/* success */
.ft-done{margin-top:16px;text-align:center;padding-top:30px;padding-bottom:30px}
.ft-done-ic{font-size:2.4rem;color:#16a34a;margin-bottom:8px}
.ft-done h3{margin:0 0 16px;font-size:1.15rem;font-weight:800;color:#121a29}
.ft-share{display:flex;gap:8px;max-width:560px;margin:0 auto}
.ft-share-url{flex:1;min-width:0;border:1px solid #cfe0fb;background:#f5f9ff;border-radius:9px;padding:10px 12px;font-size:.86rem;color:#084dcc;font-family:ui-monospace,Menlo,monospace}
.ft-copy{flex:none;border:0;background:linear-gradient(180deg,#3b82f6,#0d5fe8);color:#fff;font-weight:800;font-size:.86rem;border-radius:9px;padding:10px 16px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.ft-copy:hover{filter:brightness(1.06)}
.ft-copy.ok{background:#16a34a}
.ft-valid{margin:12px 0 18px;font-size:.86rem;color:#5b6577}
.ft-valid b{color:#0d5fe8}
.ft-again{border:1px solid #dfe4ec;background:#fff;color:#475063;font-weight:700;font-size:.84rem;border-radius:9px;padding:9px 16px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.ft-again:hover{border-color:#9dc0f8;color:#0d5fe8;background:#f5f9ff}

/* not configured yet */
.ft-soon{margin-top:16px;text-align:center;padding-top:40px;padding-bottom:40px}
.ft-soon-ic{font-size:2.2rem;color:#0d5fe8;margin-bottom:10px}
.ft-soon h3{margin:0 0 6px;font-size:1.15rem;font-weight:800;color:#121a29}
.ft-soon p{margin:0 auto;font-size:.9rem;color:#6b7484;max-width:52ch;line-height:1.55}

/* dark mode */
html.dark .ft-hero{background:linear-gradient(135deg,#141922,#141922 60%);border-color:#28303c}
html.dark .ft-hero h2,html.dark .ft-stage-head h3,html.dark .ft-prog-head h3,html.dark .ft-done h3,html.dark .ft-soon h3{color:#e6e9f0}
html.dark .ft-hero-note,html.dark .ft-soon p{color:#9aa3b2}
html.dark .ft-hero-sub{color:#c2c9d4}
html.dark .ft-hero-sub .accent{color:#5b93f6}
html.dark .ft-hero-badges span{background:#18202e;border-color:#28303c;color:#5b93f6}
html.dark .ft-file,html.dark .ft-prog-file{background:#1f2228;border-color:#333842}
html.dark .ft-file-name,html.dark .ft-prog-file .nm{color:#d7dbe2}
html.dark .ft-file-ic{background:#18202e;color:#5b93f6}
html.dark .ft-file-x,html.dark .ft-clear{background:#23262d;border-color:#343943;color:#9aa3b2}
html.dark .ft-meter-bar,html.dark .ft-prog-bar{background:#23262d}
html.dark .ft-meter-text,html.dark .ft-plan-note,html.dark .ft-prog-hint,html.dark .ft-valid{color:#9aa3b2}
html.dark .ft-plan-note b,html.dark .ft-valid b,html.dark .ft-plan-note .ft-upsell{color:#5b93f6}
html.dark .ft-count{background:#18202e;color:#5b93f6}
html.dark .ft-err{background:#2a1416;border-color:#5f1d21;color:#fca5a5}
html.dark .ft-err .ft-upsell{color:#5b93f6}
html.dark .ft-cancel,html.dark .ft-again{background:#23262d;border-color:#343943;color:#c2c9d4}
html.dark .ft-share-url{background:#18202e;border-color:#28303c;color:#5b93f6}

/* ════ PREMIUM REDESIGN 2026-07-09 (sky #0ea5e9) — hero feature-list + premium
   dropzone + settings strip (expiry select · plan · PRO storage meter) +
   Recent-transfers panel with delete. Appended overrides; engine classes kept. ════ */
.ft-app{display:flex;flex-direction:column;gap:16px}
.ft-app [hidden]{display:none!important}
.ft-hero{display:grid;grid-template-columns:1fr 1.05fr;gap:26px;align-items:center}
.ft-hero-title{margin:0 0 8px!important}   /* font/size from the shared wordmark rule in core/shell.css */
.ft-title-accent{background:linear-gradient(105deg,#0d5fe8,#3b82f6 60%,#0d5fe8);-webkit-background-clip:text;background-clip:text;color:transparent}
.ft-title-plane{font-size:18px;color:#0d5fe8;margin-left:2px;transform:rotate(-8deg)}
.ft-hero-lead{font-size:13.5px;line-height:1.6;color:#6b7280;max-width:52ch;margin:0 0 14px}
.ft-hero-lead b{color:#0d5fe8}
.ft-feats{display:flex;flex-direction:column;gap:9px;margin:0;padding:0;list-style:none}
.ft-feats li{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;font-weight:600;color:#4a5163;line-height:1.4}
.ft-feats li i{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:#eaf2ff;color:#0d5fe8;font-size:11px;margin-top:-2px}
.ft-feats li b,.ft-feats li strong{color:#0d5fe8}
.ft-app .ft-upload{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:0;padding:10px 22px;border:2px dashed #cfe0fb;border-radius:20px;overflow:hidden;background:radial-gradient(125% 125% at 50% -12%,#eaf2ff 0%,#f5f9ff 46%,#fff 100%);transition:border-color .18s,box-shadow .18s;cursor:pointer}
.ft-app .ft-upload:hover{border-color:#0d5fe8;box-shadow:0 10px 30px rgba(13,95,232,.12)}
.ft-app .ft-upload.drag-over{border-color:#0d5fe8;background:radial-gradient(125% 125% at 50% -12%,#dce9ff 0%,#eaf2ff 60%,#fff 100%)}
.ft-drop-cloud{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;margin-bottom:3px;background:linear-gradient(140deg,#3b82f6,#0d5fe8);color:#fff;font-size:24px;box-shadow:0 12px 26px rgba(13,95,232,.32),0 0 0 8px rgba(13,95,232,.08)}
.ft-app .ft-upload .upload-title{font-size:16.5px;font-weight:800;color:#121a29;text-align:center}
.ft-app .ft-upload .upload-sub{font-size:12.5px;color:#6b7280;margin:1px 0}
.ft-choose{display:inline-flex;align-items:center;gap:8px;margin:6px 0 4px;padding:9.5px 22px;border-radius:11px;font:inherit;font-weight:700;font-size:14px;cursor:pointer;background:#fff;color:#0d5fe8;border:1.5px solid #cfe0fb;box-shadow:0 1px 2px rgba(16,24,40,.05);transition:.15s}
.ft-choose:hover{background:#f5f9ff;border-color:#0d5fe8;box-shadow:0 4px 14px rgba(13,95,232,.16)}
.ft-app .ft-upload .upload-mini{font-size:11.5px;font-weight:600;color:#9aa3b8;margin-top:6px;letter-spacing:.02em}
.ft-drop-stat{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#0f8a4d;background:#e9f8ef;border:1px solid #c7ecd6;border-radius:20px;padding:4px 12px;margin-top:8px}

/* settings strip */
.ft-settings{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.ft-set{display:flex;flex-direction:column;gap:5px;min-width:0}
.ft-set-lbl{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;color:#9aa3b8;text-transform:uppercase;letter-spacing:.5px}
.ft-set-lbl i{color:#0d5fe8}
.ft-days{font:inherit;font-weight:700;font-size:13.5px;color:#121a29;border:1.5px solid #dfe4ec;border-radius:10px;padding:8px 12px;background:#fff;min-width:150px;cursor:pointer}
.ft-days:focus{outline:none;border-color:#0d5fe8;box-shadow:0 0 0 3px rgba(13,95,232,.12)}
.ft-days:disabled{color:#8a93a3;background:#f7f9fc;cursor:not-allowed}
.ft-set-sub{font-size:11px;font-weight:600;color:#9aa3b8}
.ft-set-plan{flex:1;justify-content:center}
.ft-storage{min-width:230px}
.ft-sto-lbl{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;color:#9aa3b8;text-transform:uppercase;letter-spacing:.5px}
.ft-sto-lbl i{color:#0d5fe8}
.ft-sto-bar{display:block;height:7px;border-radius:20px;background:#eef1f6;overflow:hidden}
.ft-sto-bar>span{display:block;height:100%;border-radius:20px;background:linear-gradient(90deg,#3b82f6,#0d5fe8)}
.ft-sto-txt{font-size:11.5px;font-weight:700;color:#5b6577;font-variant-numeric:tabular-nums}

/* done panel email button */
.ft-mail{flex:none;display:inline-flex;align-items:center;gap:7px;border:1.5px solid #cfe0fb;background:#fff;color:#0d5fe8;font-weight:700;font-size:.86rem;border-radius:9px;padding:10px 14px;cursor:pointer;text-decoration:none}
.ft-mail:hover{background:#f5f9ff;border-color:#0d5fe8}

/* recent transfers */
.ft-recent-head{display:flex;align-items:center;gap:10px;margin-bottom:13px;flex-wrap:wrap}
.ft-recent-head i{color:#0d5fe8}
.ft-recent-head h2{font-size:15px;font-weight:800;color:#121a29;margin:0}
.ft-count2{color:#8a93a3;font-weight:700;font-size:12.5px}
.ft-recent-sub{font-size:11.5px;color:#9aa3b8;font-weight:600;margin-left:auto}
.ft-recent-list{display:flex;flex-direction:column;gap:8px}
.ft-r-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid #eef1f6;border-radius:12px;background:#fbfcfe}
.ft-r-row.ft-r-expired{opacity:.6}
.ft-r-ic{flex:none;width:36px;height:36px;border-radius:10px;background:#eaf2ff;color:#0d5fe8;display:grid;place-items:center;font-size:14px}
.ft-r-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ft-r-name{font-size:13px;font-weight:700;color:#27303f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ft-r-more{font-size:11px;font-weight:700;color:#8a93a3}
.ft-r-meta{font-size:11.5px;font-weight:600;color:#8a93a3;font-variant-numeric:tabular-nums}
.ft-r-meta b{color:#0d5fe8}
.ft-r-dead{color:#c8364c;font-weight:800}
.ft-r-acts{flex:none;display:flex;align-items:center;gap:7px}
.ft-r-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid #e3e7ef;background:#fff;color:#4a5163;font-weight:700;font-size:11.5px;border-radius:8px;padding:7px 11px;cursor:pointer;transition:.14s;font-family:inherit;text-decoration:none}
.ft-r-btn:hover{border-color:#cfe0fb;color:#0d5fe8;background:#f5f9ff}
.ft-r-del:hover{border-color:#f3c7c2;color:#c8364c;background:#fff6f6}
.ft-r-btn:disabled{opacity:.5;cursor:wait}

@media(max-width:900px){
  .ft-hero{grid-template-columns:1fr}
  .ft-settings{flex-direction:column;align-items:flex-start;gap:14px}
  .ft-set-plan{justify-content:flex-start}
  .ft-share{flex-wrap:wrap}
}

/* dark mode for the new pieces */
html.dark .ft-hero-title{color:#e6e9f0}
html.dark .ft-hero-lead{color:#9aa3b2}
html.dark .ft-hero-lead b,html.dark .ft-feats li b{color:#5b93f6}
html.dark .ft-feats li{color:#c2c9d4}
html.dark .ft-feats li i{background:#18202e;color:#5b93f6}
html.dark .ft-app .ft-upload{border-color:#28303c;background:radial-gradient(125% 125% at 50% -12%,#141922 0%,#141922 60%,#141922 100%)}
html.dark .ft-app .ft-upload .upload-title{color:#e6e9f0}
html.dark .ft-choose{background:#23262d;border-color:#28303c;color:#5b93f6}
html.dark .ft-drop-stat{background:#0d2418;border-color:#1d4a30;color:#5cd695}
html.dark .ft-days{background:#23262d;border-color:#343943;color:#e5e9ef}
html.dark .ft-days:disabled{background:#1f2228;color:#8a93a3}
html.dark .ft-set-sub,html.dark .ft-sto-txt,html.dark .ft-recent-sub{color:#8a93a3}
html.dark .ft-sto-bar{background:#23262d}
html.dark .ft-mail{background:#23262d;border-color:#28303c;color:#5b93f6}
html.dark .ft-recent-head h2{color:#e6e9f0}
html.dark .ft-r-row{background:#1f2228;border-color:#333842}
html.dark .ft-r-name{color:#d7dbe2}
html.dark .ft-r-ic{background:#18202e;color:#5b93f6}
html.dark .ft-r-meta b{color:#5b93f6}
html.dark .ft-r-btn{background:#23262d;border-color:#343943;color:#c2c9d4}


/* ════════════════════════════════════════════════════════════════
   HERO — mascot band (2026-07-19). Same family as Ad Preview /
   Name & Rename / Optimize ZIP: `100% auto` + bottom anchor (never
   `cover` — it crops HORIZONTALLY into the card's space), extra band
   height filled by a gradient sampled from the image's own top edge,
   and an `::after` spacer as an aspect FLOOR (plain `aspect-ratio`
   fixes the height and clips a taller card under overflow:hidden).
   ⚠️ The working dropzone lives INSIDE this band on purpose:
   transfer.js hides #ftHero wholesale while uploading (els.hero.hidden),
   so moving the zone out would leave it on screen mid-upload.
   ════════════════════════════════════════════════════════════════ */
.ft-hero-band{display:flex;align-items:center;position:relative;overflow:hidden;border-radius:22px;margin-bottom:14px;padding:0 clamp(14px,3vw,40px);min-height:460px;
  border:1px solid #dfe6ef;
  background:url(img/hero-sendfiles.jpg?v=1) right center/cover no-repeat,
             linear-gradient(90deg,#fbfbfd 0%,#dcccc5 25%,#c4b2ae 50%,#a79089 75%,#6c5448 100%)}
.ft-hero-band::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,rgba(248,249,252,.58) 0%,rgba(248,249,252,.44) 38%,rgba(248,249,252,.45) 56%,transparent 72%)}
.ft-hero-band[hidden]{display:none}
html.dark .ft-hero-band{border-color:#2b3340}
html.dark .ft-hero-band::before{background:linear-gradient(100deg,rgba(15,19,25,.74) 0%,rgba(15,19,25,.54) 40%,rgba(15,19,25,.4) 58%,transparent 74%)}

/* margin-block floats the card off the band edges — hero padding-top/bottom is dead here
   (`main.app section:not(.panel)` in core/shell.css zeroes it; see the TinyImage hero note). */
.ft-hero-widget{position:relative;z-index:1;margin:26px 0;width:min(520px,46%);max-width:100%;margin:26px 0;min-height:408px;max-height:408px;justify-content:space-between;display:flex;flex-direction:column;gap:8px;
  padding:clamp(14px,1.5vw,18px);border-radius:20px;background:rgba(255,255,255,.41);backdrop-filter:blur(22px) saturate(1.35);-webkit-backdrop-filter:blur(22px) saturate(1.35);
  border:1px solid rgba(255,255,255,.68);box-shadow:0 24px 55px rgba(20,40,70,.2)}
html.dark .ft-hero-widget{background:rgba(18,23,31,.62);border-color:rgba(120,160,210,.2);box-shadow:0 24px 55px rgba(0,0,0,.5)}
@media(max-width:900px){.ft-hero-widget{width:auto;max-width:none;min-height:0;max-height:none}}

.ft-hero-tools{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin:-2px 0 -6px}
.ft-hero-band .ft-hero-title{font-size:clamp(22px,2.4vw,29px);font-weight:900;letter-spacing:-.02em;line-height:1.05;color:#132033;margin:0 0 5px}
html.dark .ft-hero-band .ft-hero-title{color:#eaf1fb}
.ft-hero-band .ft-hero-lead{font-size:13px;line-height:1.42;color:#4d5a6d;margin:0;max-width:46ch}
html.dark .ft-hero-band .ft-hero-lead{color:#a8b6c8}

/* the real dropzone, inside the glass card */
.ft-hero-band .ft-upload{margin:2px 0 0;padding:18px 16px;border-radius:16px;background:rgba(255,255,255,.5)}
/* dark: no override — dark-tools.css styles [class*="upload-zone"] with !important; its dark dropzone is legible and consistent, so we let it win */

/* in-card trust chips (2x2, borderless) */
.ft-hchips{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;margin:0;padding:7px 0 0;border-top:1px solid rgba(90,120,160,.18)}
.ft-hchip{display:flex;align-items:center;gap:9px;min-width:0}
.ft-hchip>i{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:#e6f2fd;color:#0d74d4;font-size:12px}
.ft-hchip strong{display:block;font-size:11.5px;font-weight:800;color:#132033;line-height:1.15}
.ft-hchip span{display:block;font-size:10px;color:#6b7280;font-weight:600;margin-top:1px}
html.dark .ft-hchips{border-top-color:rgba(130,170,220,.24)}
html.dark .ft-hchip strong{color:#eaf1fb}
html.dark .ft-hchip span{color:#a8b6c8}
html.dark .ft-hchip>i{background:rgba(45,140,225,.22);color:#7cc0f7}
.ft-hero-note{font-size:10.5px;line-height:1.45;color:#6b7280;margin:0}
html.dark .ft-hero-note{color:#9aa8ba}


/* ════════════════════════════════════════════════════════════════
   PRICE / FEATURE COMPARISON — self-contained (sky blue). Hidden for
   paying users. ⚠️ States OUR free limits too (5 transfers/day per IP,
   4 GB active, 20 files) — a comparison that only lists the other
   side's caps isn't honest.
   ════════════════════════════════════════════════════════════════ */
.ft-app .ft-cmp{margin-top:22px;padding:clamp(20px,3vw,34px)}
.ft-app .ft-cmp-head{text-align:center;max-width:820px;margin:0 auto 22px}
.ft-app .ft-cmp-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#0d74d4;background:#e6f2fd;border:1px solid #cfe4fa;padding:5px 12px;border-radius:99px;margin-bottom:13px}
.ft-app .ft-cmp-head h2{font-size:clamp(20px,2.5vw,28px);font-weight:900;letter-spacing:-.02em;line-height:1.22;margin:0 0 9px;text-wrap:balance;color:#132033}
.ft-app .ft-cmp-hl{background:linear-gradient(100deg,#0d74d4,#2d8ce1 50%,#6cb6f2);-webkit-background-clip:text;background-clip:text;color:transparent}
html.dark .ft-app .ft-cmp-head h2{color:#eaf1fb}
html.dark .ft-app .ft-cmp-hl{background:linear-gradient(100deg,#7cc0f7,#a6d5fb 50%,#cfe9fe);-webkit-background-clip:text;background-clip:text;color:transparent}
.ft-app .ft-cmp-sub{color:#4d5a6d;font-size:14.5px;line-height:1.6;margin:0}
html.dark .ft-app .ft-cmp-sub{color:#a8b6c8}
.ft-app .ft-cmp-value{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:0 0 22px;padding:18px 24px;border-radius:18px;background:linear-gradient(120deg,#e6f2fd,rgba(90,160,230,.14));border:1px solid #cfe4fa}
.ft-app .ft-cmp-value-num{flex:0 0 auto;display:flex;align-items:flex-end;font-size:54px;font-weight:900;letter-spacing:-.03em;color:#0d74d4;line-height:1}
.ft-app .ft-cmp-approx{font-size:24px;font-weight:700;margin-right:2px;opacity:.7;align-self:center}
.ft-app .ft-cmp-per{font-size:18px;font-weight:800;margin-left:5px;margin-bottom:7px}
.ft-app .ft-cmp-value-body{flex:1 1 260px;font-size:14.5px;line-height:1.6;color:#1f2c3d}
html.dark .ft-app .ft-cmp-value{background:linear-gradient(120deg,rgba(20,60,110,.44),rgba(15,45,85,.24));border-color:#27405c}
html.dark .ft-app .ft-cmp-value-num{color:#7cc0f7}
html.dark .ft-app .ft-cmp-value-body{color:#dfe9f6}
.ft-app .ft-cmp-cta{display:inline-flex;align-items:center;gap:7px;margin-top:9px;font-weight:800;font-size:13.5px;color:#0d74d4;text-decoration:none}
html.dark .ft-app .ft-cmp-cta{color:#7cc0f7}
.ft-app .ft-cmp-cta:hover{text-decoration:underline}
.ft-app .ft-cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:16px;border:1px solid #e4ebf3}
html.dark .ft-app .ft-cmp-scroll{border-color:#2b3340}
.ft-app .ft-cmp-table{width:100%;min-width:780px;border-collapse:separate;border-spacing:0;font-size:14px}
.ft-app .ft-cmp-table th,.ft-app .ft-cmp-table td{padding:13px 16px;text-align:center;border-bottom:1px solid #eef2f7;vertical-align:middle}
html.dark .ft-app .ft-cmp-table th,html.dark .ft-app .ft-cmp-table td{border-color:#252d38}
.ft-app .ft-cmp-table tbody th{text-align:left;font-weight:700;color:#132033;width:28%}
html.dark .ft-app .ft-cmp-table tbody th{color:#e8eef7}
.ft-app .ft-cmp-table thead th{font-size:15px;font-weight:800;color:#33445a;vertical-align:bottom}
html.dark .ft-app .ft-cmp-table thead th{color:#c7d3e2}
.ft-app .ft-cmp-table thead .ft-cmp-flabel{width:28%}
.ft-app .ft-cmp-table tbody tr:last-child th,.ft-app .ft-cmp-table tbody tr:last-child td{border-bottom:0}
.ft-app .ft-cmp-sublabel{display:block;font-size:10.5px;font-weight:600;color:#6b7d92;margin-top:4px;line-height:1.35}
html.dark .ft-app .ft-cmp-sublabel{color:#93a3b8}
.ft-app .ft-cmp-col-us{background:#f1f8fe}
html.dark .ft-app .ft-cmp-col-us{background:rgba(45,140,225,.13)}
.ft-app thead .ft-cmp-col-us{background:linear-gradient(180deg,#2d8ce1,#0d74d4);color:#fff;border-radius:13px 13px 0 0;border-bottom:0}
html.dark .ft-app .ft-cmp-table thead th.ft-cmp-col-us{background:linear-gradient(180deg,#0d74d4,#08507a);color:#fff}
.ft-app .ft-cmp-badge{display:block;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.9;margin-bottom:3px}
.ft-app .ft-cmp-note{display:block;font-size:11px;color:#6b7d92;font-weight:600;margin-top:3px;line-height:1.4}
.ft-app .ft-cmp-y,.ft-app .ft-cmp-n{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;color:#fff}
.ft-app .ft-cmp-y{background:#0d74d4;font-size:12px}
.ft-app .ft-cmp-n{background:#cfd6dc;font-size:11px}
.ft-app .ft-cmp-na{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#eef2f7;color:#6b7d92;font-size:12px;font-weight:800}
html.dark .ft-app .ft-cmp-n{background:#3a4450}
html.dark .ft-app .ft-cmp-na{background:#212932;color:#93a3b8}
.ft-app .ft-cmp-pertool{display:block;margin-top:3px;font-weight:800;font-size:12.5px;color:#0d74d4}
.ft-app .ft-cmp-fine{margin:14px 4px 0;font-size:11.5px;color:#6b7d92;line-height:1.55;text-align:center}
html.dark .ft-app .ft-cmp-fine{color:#93a3b8}
html.dark .ft-app .ft-cmp-table td{color:#e3eaf4}
html.dark .ft-app .ft-cmp-table td .ft-cmp-pertool{color:#7cc0f7}
html.dark .ft-app .ft-cmp-table td .ft-cmp-note,html.dark .ft-app .ft-cmp-table th .ft-cmp-note{color:#93a3b8}
body.is-premium .ft-app .ft-cmp{display:none}

/* 460px hero: the box is 408px, so the zone sheds its "or" line, and the auto-expiry note goes —
   both facts already appear below the band (LINK EXPIRY panel + "Link expires and deletes itself"). */
.ft-hero-widget .ft-upload .upload-sub{display:none}
.ft-hero-widget .ft-hero-note{display:none}

/* Wordmark now sits IN the tools row (title left, Upgrade/Help right). margin-right:auto does the
   pushing rather than justify-content, so the two buttons stay paired at the right edge.
   ⚠️ `!important` is required: `.ft-hero-title{margin:0 0 8px!important}` (line ~121) outranks any
   selector here regardless of specificity — the documented tool-css-!important-on-titles gotcha. */
.ft-hero-band .ft-hero-tools{justify-content:flex-start}
.ft-hero-band .ft-hero-tools .ft-hero-title{margin:0 auto 0 0!important}
@media(max-width:560px){   /* narrow: 83px of wordmark wrapping to 3 lines reads badly — give it its own line */
  .ft-hero-band .ft-hero-tools{flex-wrap:wrap}
  .ft-hero-band .ft-hero-tools .ft-hero-title{flex:0 0 100%;margin:0 0 6px!important}
}
/* paper plane rides at the TOP of the wordmark, not on its baseline */
.ft-hero-band .ft-hero-title .ft-title-plane{vertical-align:top;position:relative;top:2px}

/* ════════════════════════════════════════════════════════════════
   HERO DROP ZONE → house standard (matches the TinyImage hero zone,
   re-cut in this tool's own blue #0d5fe8). Scoped to .ft-hero-widget
   so the in-flow dropzone (and any other .ft-upload) keeps its old look.
   The glyph is now a FLAT paper plane — the filled gradient chip from
   `.ft-drop-cloud` (line ~133) is unwound here, not edited there.
   Geometry: zone min-height 186px still clears the pinned 408px card
   (tools row ~30 + chips ~68 + padding/gaps ~52 = 258px of room).
   ⚠️ dark only: core/dark-tools.css matches this markup twice —
   [class*="upload-zone"] on the zone AND [class*="-drop"] on
   `ft-drop-cloud` — with `!important` on background/border-color, so the
   dark background/border/glyph-chip declarations below must carry it too.
   Light mode needs none: three classes already out-specify `.ft-app .ft-upload`.
   ════════════════════════════════════════════════════════════════ */
.ft-app .ft-hero-widget .ft-upload{min-height:186px;border-radius:18px;border:2px dashed rgba(13,95,232,.45);gap:2px;padding:12px;background:rgba(255,255,255,.06)}
.ft-app .ft-hero-widget .ft-upload:hover{border-color:#0d5fe8;background:rgba(120,165,240,.1)}
.ft-app .ft-hero-widget .ft-upload.drag-over{border-color:#0d5fe8;background:rgba(120,165,240,.16)}
html.dark .ft-app .ft-hero-widget .ft-upload{border-color:rgba(150,190,255,.32)!important;background:rgba(255,255,255,.02)!important}
html.dark .ft-app .ft-hero-widget .ft-upload:hover{border-color:#5b93f6!important;background:rgba(120,165,240,.12)!important}

/* flat glyph: no chip, no ring — depth comes from two drop-shadows */
.ft-app .ft-hero-widget .ft-upload .ft-drop-cloud{width:auto;height:auto;border-radius:0;display:block;background:none;box-shadow:none;color:#0d5fe8;font-size:25px;margin-bottom:0;filter:drop-shadow(0 2px 2px rgba(10,45,110,.28)) drop-shadow(0 9px 16px rgba(10,45,110,.34))}
html.dark .ft-app .ft-hero-widget .ft-upload .ft-drop-cloud{background:none!important;box-shadow:none;color:#bcd6ff;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5)) drop-shadow(0 9px 16px rgba(0,0,0,.55))}

.ft-app .ft-hero-widget .ft-upload .upload-title{font-size:18px;font-weight:800;letter-spacing:-.01em;color:#132033}
html.dark .ft-app .ft-hero-widget .ft-upload .upload-title{color:#eaf1fb}
.ft-app .ft-hero-widget .ft-upload .upload-sub,
.ft-app .ft-hero-widget .ft-upload .upload-mini{font-size:11.5px;font-weight:600;line-height:1.35;margin:1px 0;letter-spacing:0;color:#5b6a80}
html.dark .ft-app .ft-hero-widget .ft-upload .upload-sub,
html.dark .ft-app .ft-hero-widget .ft-upload .upload-mini{color:#a8b6c8}

.ft-app .ft-hero-widget .ft-upload .ft-choose{margin-top:4px;margin-bottom:0;padding:7px 20px;font-weight:700;background:rgba(255,255,255,.72);color:#084dcc;border:1.5px solid #cfe0fb;box-shadow:0 1px 3px rgba(16,24,40,.06)}
.ft-app .ft-hero-widget .ft-upload .ft-choose:hover{background:#fff;border-color:#0d5fe8;box-shadow:0 1px 3px rgba(16,24,40,.06)}
html.dark .ft-app .ft-hero-widget .ft-upload .ft-choose{background:rgba(255,255,255,.08);color:#9dc2ff;border-color:rgba(140,180,240,.38);box-shadow:none}
html.dark .ft-app .ft-hero-widget .ft-upload .ft-choose:hover{background:rgba(255,255,255,.14);border-color:#5b93f6}

/* Wordmark sits INLINE in the tools row, so it can't stay at the shared Anton display size.
   ⚠️ core/shell.css has `.tool :is(h1,h2):has(> [class*="title-accent"]){font-size:clamp(34px,3.6vw,50px)}`
   at (0,2,1) — and `.ft-hero-band .ft-hero-title` (line ~243) at (0,2,0) LOSES to it. Three
   classes (0,3,0) is what actually wins. Font-family stays Anton (the wordmark identity). */
.ft-app .ft-hero-tools .ft-hero-title{font-size:clamp(19px,2.1vw,26px);line-height:1.05;margin:0;white-space:nowrap}

/* Dark mode drag-over had NO !important counterpart, so dark-tools.css `!important` won and
   dragging files over the hero zone gave zero visual feedback. (Found by the CSS audit.) */
html.dark .ft-app .ft-hero-widget .ft-upload.drag-over{border-color:#5b93f6!important;background:rgba(120,165,240,.2)!important}

/* ── 10 GB seller band (07-23): the PRO headline cap, top of the hero card.
   Lives INSIDE #ftHero so it hides wholesale during upload like the rest. ── */
.ft-ten-band{display:flex;align-items:center;gap:12px;margin:2px 0 12px;padding:9px 14px;border-radius:14px;background:linear-gradient(100deg,#0369a1,#0ea5e9 60%,#38bdf8);color:#fff;box-shadow:0 6px 18px rgba(2,132,199,.28)}
.ft-ten-num{font-family:'Anton',Impact,sans-serif;font-size:25px;line-height:1;letter-spacing:.03em;text-shadow:0 1px 2px rgba(0,0,0,.18)}
.ft-ten-txt{font-size:12.5px;font-weight:600;line-height:1.35;opacity:.97}
.ft-ten-txt b{font-weight:800}
.ft-ten-plane{margin-left:auto;font-size:17px;opacity:.9;transform:rotate(-8deg)}
@media (max-width:560px){ .ft-ten-num{font-size:21px} .ft-ten-txt{font-size:11.5px} .ft-ten-plane{display:none} }