/*
 * THE CLOUD SKIN.
 *
 * styles.css is the desk: it was drawn for a 1280px window, a mouse and a
 * sidebar, and it has not one media query in it. This file changes none of that
 * — it sits on top and answers two questions the desk never had to:
 *
 *   • where does the sidebar's job go, when there is no sidebar? (the cloud bar)
 *   • what does the desk look like on a phone held in one hand?
 *
 * The phone layout does NOT hide anything. Everything the desktop shows is
 * still on the page, in the order a thumb wants it: the picture, the tools that
 * act on it, the timeline, then the settings column. A control that has been
 * "tidied away for mobile" is a control somebody cannot reach at half past ten
 * on a Saturday night, and the whole point of this was that nothing is missing.
 */

/* ------------------------------------------------------------- the frame */

body.mw-cloud { overflow: hidden; }

body.mw-cloud #app {
  display: block;
  height: 100vh;
  height: 100dvh;                 /* a phone's address bar is not a wall */
  padding-top: 46px;              /* the cloud bar */
}
/* A home-screen app has no address bar, and iOS can report 100dvh short for a
   moment after launch; 100vh is the one that is right from the first frame. */
@media (display-mode: standalone) {
  body.mw-cloud #app { height: 100vh; }
}
body.mw-cloud .content {
  height: 100%;
  padding: 16px 18px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body.mw-cloud .view { height: 100%; }

/* ----------------------------------------------------------- the cloud bar */

.cloud-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 46px;
  z-index: 240;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
  padding-top: env(safe-area-inset-top);
  height: calc(46px + env(safe-area-inset-top));
  background: rgba(12, 15, 22, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
body.mw-cloud #app { padding-top: calc(46px + env(safe-area-inset-top)); }

.cloud-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cloud-logo {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  border-radius: 8px;
  background: linear-gradient(140deg, #0284c7, #38bdf8);   /* the app icon's sky blue */
  color: #fff;
  font-size: 14px;
}
.cloud-name { font-weight: 700; font-size: 14px; white-space: nowrap; }
.cloud-where {
  font-size: 11.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cloud-bar-actions { display: flex; align-items: center; gap: 8px; }

.cloud-chip {
  position: relative;
  background: var(--bg-3);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 7px 10px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.cloud-chip:hover { border-color: var(--primary); }
.cloud-badge {
  display: inline-grid; place-items: center;
  min-width: 17px; height: 17px; padding: 0 4px; margin-left: 4px;
  border-radius: 9px; background: var(--good); color: #06240f;
  font-size: 10.5px; font-weight: 800;
}
.cloud-badge.hidden { display: none; }
.cloud-link { font-size: 11px; color: var(--good); transition: color .2s; }
.cloud-link.bad { color: var(--danger); }

/* ------------------------------------------------------------ the sign-in */

.cloud-gate {
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center;
  padding: 22px;
  background: radial-gradient(900px 500px at 50% -10%, rgba(79,124,255,.16), transparent 60%), var(--bg);
}
.cloud-gate.gone { display: none; }
.cloud-gate-box {
  width: 360px; max-width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 26px 22px 20px;
  text-align: center;
}
.cloud-gate-logo {
  width: 52px; height: 52px; margin: 0 auto 12px;
  display: grid; place-items: center;
  border-radius: 15px;
  background: linear-gradient(140deg, #0284c7, #38bdf8);   /* the app icon's sky blue */
  color: #fff;
  font-size: 26px;
}
.cloud-gate-box h1 { margin: 0 0 4px; font-size: 21px; }
.cloud-gate-sub { margin: 0 0 20px; color: var(--muted); font-size: 13px; }
.cloud-gate-label {
  display: block; text-align: left;
  font-size: 12px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .6px; margin-bottom: 6px;
}
#cloudPass {
  width: 100%;
  background: var(--bg-3); color: var(--text);
  border: 1px solid var(--border); border-radius: 11px;
  padding: 13px 14px;
  font-size: 16px;                 /* 16px or iOS zooms the page on focus */
  letter-spacing: .4px;
  text-align: center;
}
#cloudPass:focus { outline: none; border-color: var(--primary); }
/*
 * "Stay signed in" is a settings row with a switch, as on an iPhone. It was a
 * bare checkbox, and the desk's rule for inputs (full width, padding, border)
 * stretched it across the row on a phone, crushing the words into a column one
 * word wide. The switch is drawn here from nothing (appearance: none) and
 * undoes every part of that rule, so no browser's own checkbox is left to fight.
 */
.cloud-gate-remember {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 12px 0 16px; padding: 10px 12px 10px 14px;
  background: var(--bg-3); border: 1px solid var(--border); border-radius: 11px;
  text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cgr-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cgr-text b { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.25; }
.cgr-text small { font-size: 12px; color: var(--muted); line-height: 1.3; }
.cloud-gate-remember input.cgr-switch {
  -webkit-appearance: none; appearance: none;
  position: relative; flex: none;
  width: 46px; height: 28px; margin: 0; padding: 0;
  border: 0; border-radius: 14px;
  background: #3a3c47;
  box-shadow: none;
  cursor: pointer;
  transition: background .2s ease;
}
.cloud-gate-remember input.cgr-switch::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  transition: transform .2s ease;
}
.cloud-gate-remember input.cgr-switch:checked { background: #1f6fe0; }
.cloud-gate-remember input.cgr-switch:checked::after { transform: translateX(18px); }
.cloud-gate-remember input.cgr-switch:focus { box-shadow: none; outline: none; }
.cloud-gate-remember input.cgr-switch:focus-visible { outline: 2px solid #4d95ef; outline-offset: 2px; }
.cloud-gate-go { width: 100%; padding: 13px; font-size: 15px; border-radius: 11px; }
.cloud-gate-msg { min-height: 18px; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.cloud-gate-msg.bad { color: var(--danger); }
.cloud-gate-foot { margin-top: 14px; font-size: 11px; color: var(--muted); opacity: .7; }

/* ------------------------------------------------------------ file lists */

.cloud-files-box { width: 560px; }

/*
 * YOUR FILES and FINISHED IN THIS SESSION, as sheets in the studio's own
 * style: a picture for every video, its size and when it was made, Save and
 * Delete on its row, Select for many at once, and how much room is left.
 */
body.mw-cloud .cloud-sheet-modal .cloud-files-box {
  display: flex; flex-direction: column; overflow: hidden;
  width: min(580px, calc(100vw - 32px)); max-height: min(84vh, 820px);
  padding: 0;
  background: #141519; color: #f5f6f8;
  border: 1px solid rgba(255,255,255,.07); border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Roboto, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.cloud-sheet-modal button { font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cloud-files-top { position: relative; flex: none; display: flex; align-items: center; gap: 10px; padding: 18px 14px 8px 20px; }
.cloud-files-title { flex: 1; min-width: 0; font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
.cloud-files-pill {
  flex: none; height: 32px; padding: 0 14px; border: 0; border-radius: 999px;
  background: #2a2b31; color: #ececf1; font-size: 13.5px; font-weight: 700;
}
.cloud-files-pill.hidden { display: none; }
.cf-selecting .cloud-files-pill#cloudFilesSelect { background: #f5f6f8; color: #000; }
.cloud-files-x {
  flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: #2a2b31; color: #c9cad1;
}
.cloud-files-x svg { width: 15px; height: 15px; }
.cloud-files-bar { flex: none; display: flex; gap: 8px; padding: 6px 16px 10px; }
.cloud-files-up {
  flex: 1; min-width: 0; height: 46px; padding: 0 14px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 15px; font-weight: 750; white-space: nowrap;
}
.cloud-files-up .mi, .cloud-files-icon .mi { width: 19px; height: 19px; margin: 0; }
.cloud-files-icon {
  flex: none; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 14px;
  display: grid; place-items: center; background: #23242b; color: #e8e8ee;
}
.cloud-files-disk { flex: none; display: flex; flex-direction: column; gap: 6px; margin: 0 18px 8px; font-size: 12.5px; color: #9b9ea8; }
.cloud-files-disk.hidden { display: none; }
.cloud-files-disk b { color: #e6e7ec; font-weight: 700; }
.cf-disk-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.cf-disk-bar i { display: block; height: 100%; border-radius: 3px; background: #1f6fe0; }
.cloud-files-disk.low .cf-disk-bar i { background: linear-gradient(90deg, #f97316, #ef4444); }
.cloud-files-disk.low b { color: #ff8a80; }
.cloud-files-list {
  flex: 1; min-height: 140px; overflow-y: auto; overflow-x: hidden;
  padding: 2px 12px 16px;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.cloud-files-group { margin-top: 8px; }
.cloud-files-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin: 8px 6px 8px; font-size: 12px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: #8a8d97;
}
.cloud-files-head small { font-size: 12px; font-weight: 600; letter-spacing: .2px; text-transform: none; color: #6b6e78; }
.cf-row {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 2px;
  max-height: 120px; margin-bottom: 8px; padding: 6px;
  border-radius: 16px; background: #1c1d23;
  transition: opacity .25s ease, transform .25s ease, max-height .32s ease, margin .32s ease, padding .32s ease, background .15s;
}
.cf-main {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px;
  padding: 0; border: 0; background: none; color: inherit; text-align: left;
}
.cf-pic {
  flex: none; width: 54px; height: 54px; border-radius: 11px;
  background: linear-gradient(150deg, #2c2d35, #1f2026) center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.cf-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cf-tx b { font-size: 14.5px; font-weight: 650; letter-spacing: -.1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-tx small { font-size: 12.5px; color: #8a8d97; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-btn {
  flex: none; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 12px;
  display: grid; place-items: center; background: transparent; color: #d8d9df;
}
.cf-btn:active { background: rgba(255,255,255,.07); }
.cf-btn .mi { width: 20px; height: 20px; margin: 0; }
.cf-bin { color: #ff7166; }
.cf-open {
  flex: none; height: 36px; padding: 0 16px; margin-right: 2px; border: 0; border-radius: 999px;
  background: #1f6fe0; color: #fff; font-size: 14px; font-weight: 750;
}
.cf-sure {
  position: absolute; inset: 0;
  display: flex; align-items: center; gap: 8px; padding: 0 8px 0 16px;
  background: linear-gradient(90deg, #2b1517, #3b161a);
  transform: translateX(102%);
  transition: transform .3s cubic-bezier(.2,.9,.25,1);
}
.cf-sure span { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: #ffd8d4; }
.cf-no, .cf-yes { flex: none; height: 40px; padding: 0 14px; border: 0; border-radius: 12px; font-size: 14px; font-weight: 750; }
.cf-no { background: rgba(255,255,255,.1); color: #fff; }
.cf-yes { background: #ff453a; color: #fff; }
.cf-row.sure .cf-sure { transform: none; }
.cf-row.busy { opacity: .5; pointer-events: none; }
.cf-row.gone { opacity: 0; transform: translateX(-40px); max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
.cf-check {
  display: none; flex: none; width: 24px; height: 24px; margin-left: 4px; border-radius: 50%;
  place-items: center; color: transparent; box-shadow: inset 0 0 0 2px #4a4b53;
}
.cf-check svg { width: 14px; height: 14px; }
.cf-selecting .cf-row.can-del .cf-check { display: grid; }
.cf-selecting .cf-row.chosen { background: rgba(31,111,224,.17); box-shadow: inset 0 0 0 1.5px rgba(77,149,239,.6); }
.cf-selecting .cf-row.chosen .cf-check { background: #1f6fe0; color: #fff; box-shadow: none; }
.cf-selecting .cf-row:not(.can-del) { opacity: .38; }
.cf-selecting .cf-btn, .cf-selecting .cf-sure { display: none; }
/* picking several (the AI Montage's "From your files"): tap ticks, "Add N" takes them */
.cf-picking-multi .cf-check { display: grid; }
.cf-picking-multi .cf-row.chosen { background: rgba(31,111,224,.17); box-shadow: inset 0 0 0 1.5px rgba(77,149,239,.6); }
.cf-picking-multi .cf-row.chosen .cf-check { background: #1f6fe0; color: #fff; box-shadow: none; }
.cf-picking-multi .cf-open { display: none; }
#cloudFilesSelUse.cloud-files-use { background: #1f6fe0; color: #fff; box-shadow: none; }
#cloudFilesSelUse.cloud-files-use:disabled { opacity: .45; }
.cloud-files-selbar {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  padding: 10px 16px 12px; border-top: 1px solid #23242b; background: #141519;
}
.cloud-files-selbar.hidden { display: none; }
/* the count gets its own line, the buttons share the row under it, so neither gets squashed */
.cloud-files-selinfo {
  flex: 1 0 100%; min-width: 0; font-size: 14px; font-weight: 700; color: #d8d9df;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cloud-files-del {
  flex: 1 1 0; min-width: 0; height: 46px; padding: 0 14px; border: 0; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap;
  background: #ff453a; color: #fff; font-size: 15px; font-weight: 800;
}
.cloud-files-del .mi { width: 18px; height: 18px; margin: 0; }
.cloud-files-del:disabled { opacity: .35; cursor: default; }
.cloud-files-save { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); }
.cloud-files-del > span { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 380px) {
  .cloud-files-del { padding: 0 10px; font-size: 14px; gap: 6px; }
  .cloud-files-del.sure .mi { display: none; }   /* the words matter more than the bin on a small phone */
}
.cloud-files-del.sure { flex-grow: 1.9; background: #d70015; box-shadow: 0 0 0 3px rgba(255,69,58,.3); }
.cloud-files-empty { padding: 34px 16px; text-align: center; color: #9b9ea8; }
.cloud-files-empty b { display: block; margin-bottom: 6px; font-size: 17px; color: #f5f6f8; }
.cloud-files-empty p { max-width: 300px; margin: 0 auto; font-size: 13.5px; line-height: 1.45; }
.cf-empty-art {
  width: 62px; height: 62px; margin: 0 auto 14px; border-radius: 20px;
  display: grid; place-items: center; color: #d6ddff;
  background: linear-gradient(135deg, rgba(77,149,239,.28), rgba(31,111,224,.18));
}
.cf-empty-art .mi { width: 28px; height: 28px; margin: 0; }
.cf-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 34px 10px; color: #9b9ea8; font-size: 14px; }
.cf-spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(165,180,252,.3); border-top-color: #8ec0ff; animation: cfSpin .8s linear infinite; }
@keyframes cfSpin { to { transform: rotate(360deg); } }

.cloud-upload-bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--border-soft); }
.cloud-upload-bar.hidden { display: none; }
.cloud-upload-name { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.cloud-upload-bar .progress { flex: 1; height: 6px; background: var(--bg-3); border-radius: 4px; overflow: hidden; }
.cloud-upload-bar .progress-bar { height: 100%; background: var(--primary); transition: width .2s; }
.cloud-sheet-modal .cloud-upload-bar { flex: none; margin: 0 16px 8px; padding: 10px 10px 10px 14px; border: 0; border-radius: 14px; background: #1c1d23; }
.cloud-sheet-modal .cloud-upload-name { font-size: 13px; font-weight: 650; color: #e6e7ec; }
.cloud-sheet-modal .cloud-upload-bar .progress { background: rgba(255,255,255,.08); }
.cloud-sheet-modal .cloud-upload-bar .progress-bar { background: #1f6fe0; }
/* several uploads at once: a row each (renderUploads) */
.cloud-upload-bar.multi { flex-direction: column; align-items: stretch; gap: 8px; }
/* the name and Stop on top, the bar and "39% · 12 MB of 30 MB · 15 s left" across the width below */
.cloud-up-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 6px; min-width: 0; }
.cloud-up-row .cloud-upload-name, .cloud-sheet-modal .cloud-up-row .cloud-upload-name { grid-column: 1; grid-row: 1; max-width: none; min-width: 0; }
.cloud-up-row [data-upstop] { grid-column: 2; grid-row: 1 / span 2; }
.cloud-up-row .cloud-up-mid, .cloud-up-row .cloud-up-wait { grid-column: 1; grid-row: 2; }
.cloud-up-row .progress { flex: 1; height: 6px; border-radius: 4px; overflow: hidden; }
.cloud-up-row.wait .cloud-upload-name { opacity: .7; }
.cloud-up-wait { flex: 1; font-size: 12px; color: #9a9caa; }
.cloud-up-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cloud-up-mid .progress { flex: none; width: 100%; height: 7px; border-radius: 4px; overflow: hidden; }
.cloud-up-pct { font-size: 12px; color: #9a9caa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.cloud-up-pct b { color: #e6e7ec; font-weight: 700; }
.cloud-up-stopall { align-self: flex-end; background: none; border: 0; color: #ff6961; font: inherit; font-size: 13px; font-weight: 650; padding: 4px 6px; cursor: pointer; }

.cloud-help-box { width: 520px; }
.cloud-help-body { padding: 8px 18px 18px; overflow-y: auto; font-size: 13.5px; line-height: 1.55; }
.cloud-help-body p { margin: 0 0 12px; }

/* ------------------------------------------------------------- touch bar */

.cloud-touchbar {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 230;
  display: flex; gap: 4px;
  padding: 5px;
  border-radius: 14px;
  background: rgba(20, 24, 34, .95);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}
.cloud-touchbar.hidden { display: none; }
.cloud-touchbar button {
  min-width: 42px; height: 40px;
  background: transparent; color: var(--text);
  border: 0; border-radius: 10px;
  font-size: 17px; cursor: pointer;
}
.cloud-touchbar button:active { background: var(--bg-3); }
.cloud-ct-play { color: var(--primary) !important; font-size: 19px !important; }

/* ------------------------------------------------------------ the purple */

/*
 * The Cloud Studio is purple — the ✝ mark's colour — where the desk is blue.
 * The desk's accents are variables, so they are re-pointed here rather than
 * restyled one by one: every primary button, slider, tick box, selected tab
 * and highlight follows. The desktop app (which never loads this file) keeps
 * its own blue.
 */
body.mw-cloud { --primary: #1f6fe0; --primary-2: #4d95ef; }
/*
 * ►► THE STUDIO'S COLOURS. ◄◄ One indigo — the app icon's own — for whatever
 * is tapped or chosen, lit through to blue where the AI works; calm graphite
 * for everything else. No pink ("I don't think I like the pink colour thing").
 */
body.mw-cloud {
  --brand: #1f6fe0;
  --brand-hi: #4d95ef;
  --brand-text: #8ec0ff;
  --brand-soft: rgba(31,111,224, .16);
  --brand-line: rgba(77,149,239, .42);
  --brand-grad: linear-gradient(135deg, #0a4fc4 0%, #1f6fe0 50%, #4d95ef 100%);
  --brand-glow: 0 12px 30px rgba(31,111,224, .38);
}
/* the progress card's bar and number, in the brand (it was the desk's blue to orange) */
body.mw-cloud .progress-bar { background: #1f6fe0; }
body.mw-cloud .overlay-pct { color: var(--brand-text); }
/* the tours (guide.js draws them violet, the invite yellow): the same colours as the rest — and the
   "New here?" card no longer cut to "New he…" by a big yellow button */
body.mw-cloud .mwg-invite { gap: 10px; padding: 10px 10px 10px 14px; border-radius: 18px; font-size: 15.5px;
  background: linear-gradient(135deg, rgba(31,111,224, .18), rgba(59, 130, 246, .08)), #0f1015; box-shadow: inset 0 0 0 1px rgba(77,149,239, .32); }
body.mw-cloud .mwg-invite .mwg-wave { font-size: 24px; }
body.mw-cloud .mwg-invite .mwg-go { min-height: 40px; padding: 0 14px; border-radius: 12px; font-size: 14.5px; font-weight: 750; color: #111; background: #fff; }
body.mw-cloud .mwg-invite .mwg-x { width: 32px; height: 32px; font-size: 18px; }
body.mw-cloud .mwg-ask { color: #fff; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
body.mw-cloud .mwg-ask:hover { background: rgba(255, 255, 255, .14); }
body.mw-cloud .mwg-hole::after { border-color: #8ec0ff; }
body.mw-cloud .mwg-bub { background: linear-gradient(160deg, #ffffff 0%, #eef2ff 100%); box-shadow: 0 18px 50px rgba(0, 0, 0, .45), 0 0 0 1px rgba(31,111,224, .18); }
body.mw-cloud .mwg-bub h3 { color: #1e1b4b; }
body.mw-cloud .mwg-dots i { background: #bfdbfe; }
body.mw-cloud .mwg-dots i.on { background: #1a5fc4; }
body.mw-cloud .mwg-next { background: var(--brand-grad); box-shadow: 0 6px 16px rgba(67, 56, 202, .35); }
body.mw-cloud .mwg-back { background: #dbeafe; color: #164a99; }
body.mw-cloud #view-video.ve-pro, body.mw-cloud #capModal {
  --acc: #1f6fe0; --acc2: #4d95ef;
  --acc-soft: rgba(31,111,224, .16); --acc-line: rgba(77,149,239, .6);
}
body.mw-cloud #view-video.ve-pro .primary-btn, body.mw-cloud #capModal .primary-btn, body.mw-cloud #capModal .cap-generate,
body.mw-cloud .cloud-gate-go, body.mw-cloud .cloud-files-bar .primary-btn {
  background: #1f6fe0; border-color: transparent; color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 6px 18px rgba(31,111,224, .32);
}
body.mw-cloud #view-video.ve-pro .primary-btn:hover:not(:disabled), body.mw-cloud #capModal .primary-btn:hover { filter: brightness(1.08); }
body.mw-cloud #view-video.ve-pro .ve-play { box-shadow: 0 6px 18px rgba(31,111,224, .35); }
body.mw-cloud input[type="range"], body.mw-cloud input[type="checkbox"], body.mw-cloud input[type="radio"] { accent-color: #1f6fe0; }
body.mw-cloud .cloud-gate { background: radial-gradient(900px 500px at 50% -10%, rgba(31,111,224, .22), transparent 60%), var(--bg); }
body.mw-cloud #cloudPass:focus { border-color: #1f6fe0; box-shadow: 0 0 0 3px rgba(31,111,224, .25); }

/* ===================================================================== */
/*  THE PHONE — an editor laid out like the apps people already know     */
/* ===================================================================== */

/*
 * The phone used to get the desk, stacked into one long page: picture,
 * toolbar, timeline, settings, scrolled past with a thumb. It worked, and it
 * read like a website. This is laid out the way CapCut, VN and InShot are —
 * because that is what everyone who makes shorts on a phone already knows:
 *
 *   ┌ top bar ── files · saved ············· quality · EXPORT ┐
 *   │                    the picture, as big as it can be      │
 *   │ 0:07 / 1:24 ·········· ▶ ·············· CC ↶ ↷ ⛶       │
 *   │ the timeline — film, text, captions, sound, music        │
 *   └ the tool dock — AI Shorts · Captions · Edit · Text … ────┘
 *
 * Nothing is taken away. The desk's buttons are all still on the page (the
 * studio's own code drives them, and its tests look for them); the dock and
 * the sheets press those very buttons, and the settings column and the shorts
 * list come up as sheets over the timeline instead of sitting under it, so the
 * picture stays on screen while you work. See installPhoneEditor in
 * cloud-boot.js for the other half.
 */

.cloud-dock, .cloud-sheet-head, .cloud-export-sheet,
.cloud-q, .cloud-export, .cloud-tr-extra { display: none; }

/* the captions window's one-tap rows are the phone's (installCapChips); a wide screen keeps its dropdowns */
.cloud-chips, .cloud-pick { display: none; }
@media (max-width: 900px) {
  body.mw-cloud {
    --ph-bg: #000;
    --ph-panel: #141519;
    --ph-panel-2: #1d1e24;
    --ph-line: #2a2b32;
    --ph-text: #f5f6f8;
    --ph-muted: #9b9ea8;
    /* the studio's blue (Home's, CapCut's): a flat fill for buttons and
       badges, a lighter one for icons and text lit on black, and the AI mark */
    --ph-accent: #1f6fe0;
    --ph-accent-fill: #1f6fe0;
    --ph-accent-glow: none;
    --ph-accent-text: #8ec0ff;
    --ph-accent-ink: #fff;
    --ph-ai: var(--brand-grad);
    --ph-top: calc(52px + env(safe-area-inset-top));
    --ph-tr: 42px;
    --ph-tl: clamp(140px, 26dvh, 232px);
    /* The tools stand on the home bar's clearance, as CapCut's do: on an
       iPhone that is 34pt, and CapCut's labels end just above it. */
    --ph-safe-b: max(4px, env(safe-area-inset-bottom));
    --ph-dock: calc(58px + var(--ph-safe-b));
    --ph-sheet: calc(var(--ph-tl) + var(--ph-dock));
    background: var(--ph-bg);
    /* Apple's own face on an iPhone (what CapCut uses there), Roboto on Android. */
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Roboto, "Segoe UI", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
  }
  body.mw-cloud button, body.mw-cloud select, body.mw-cloud input, body.mw-cloud textarea { font-family: inherit; }
  body.mw-cloud.mw-sheet-tall { --ph-sheet: min(78dvh, calc(100dvh - var(--ph-top) - 120px)); }
  /* A home-screen install made before the status bar went opaque: iOS gives it
     a window that stops a status bar short of the screen, with the home bar
     down in the dead strip below (vpFix in cloud-boot.js). The dock keeps
     tight to the bottom it was given rather than leaving more air above it. */
  html.mw-vpshort body.mw-cloud { --ph-safe-b: 2px; }
  body.mw-cloud input, body.mw-cloud textarea, body.mw-cloud [contenteditable] { -webkit-user-select: text; user-select: text; }

  /* ---------------------------------------------------------- the frame */

  body.mw-cloud #app { padding-top: var(--ph-top); }
  body.mw-cloud .content { padding: 0; overflow: hidden; background: var(--ph-bg); }
  body.mw-cloud #view-video.ve-pro {
    display: flex; flex-direction: column;
    height: 100%; min-height: 0;
    /* never a scroll box on a phone: anything that scrolled it (a lane brought
       into view) slid the preview up under the top bar, cutting off its top */
    overflow: hidden;
    padding-bottom: var(--ph-dock);
    background: var(--ph-bg);
  }
  body.mw-cloud #view-video.ve-pro .ve-main,
  body.mw-cloud #view-video.ve-pro .ve-monitors,
  body.mw-cloud #view-video.ve-pro .ve-left { display: contents; }
  body.mw-cloud #view-video.ve-pro .ve-source,
  body.mw-cloud #view-video.ve-pro .ve-mon-head,
  body.mw-cloud #view-video.ve-pro .ve-tl-split,
  body.mw-cloud #view-video.ve-pro .ve-topbar,
  body.mw-cloud #view-video.ve-pro .ve-tl-bar,
  body.mw-cloud #view-video.ve-pro .ve-tl-labels { display: none; }
  body.mw-cloud .cloud-touchbar { display: none !important; }

  /* ------------------------------------------------------------ top bar */

  body.mw-cloud .cloud-bar {
    height: var(--ph-top);
    padding: env(safe-area-inset-top) 10px 0;
    gap: 6px;
    background: var(--ph-bg);
    border-bottom: 0;
    backdrop-filter: none;
  }
  body.mw-cloud .cloud-brand { display: none; }
  body.mw-cloud .cloud-bar-actions { display: contents; }
  body.mw-cloud #cloudFiles { order: 1; }
  body.mw-cloud #cloudDownloads { order: 2; }
  body.mw-cloud #cloudLink { order: 3; margin-right: auto; font-size: 9px; }
  body.mw-cloud #cloudHelp { display: none; }
  body.mw-cloud #cloudJobsChip { order: 9; }
  body.mw-cloud .cloud-q { order: 10; }
  body.mw-cloud .cloud-export { order: 11; }

  body.mw-cloud .cloud-chip {
    width: 40px; height: 40px; padding: 0;
    display: grid; place-items: center;
    background: transparent; border: 0; border-radius: 12px;
    color: var(--ph-text); font-size: 0;
  }
  body.mw-cloud .cloud-chip:active { background: var(--ph-panel-2); }
  body.mw-cloud .cloud-chip .mi { width: 22px; height: 22px; margin: 0; }
  body.mw-cloud .cloud-chip .cloud-chip-tx { display: none; }
  body.mw-cloud .cloud-badge {
    position: absolute; top: 3px; right: 1px; margin: 0;
    min-width: 16px; height: 16px; font-size: 10px;
    background: var(--ph-accent); color: var(--ph-accent-ink);
  }

  /* The quality pill and Export are a pair: one height, one corner, one type
     size, centred on the same line. (The pill is a <label>, and the desk gives
     every label a 12px bottom margin — which lifted it 6px above Export.) */
  body.mw-cloud .cloud-q {
    display: flex; align-items: center; position: relative;
    height: 34px; margin: 0; padding: 0 26px 0 12px;
    background: var(--ph-panel-2); border-radius: 10px;
    color: var(--ph-text); font-size: 14px; font-weight: 700; line-height: 1;
  }
  body.mw-cloud .cloud-q::after {
    content: ''; position: absolute; right: 11px; top: 50%; margin-top: -2px;
    border: 4px solid transparent; border-top-color: currentColor;
  }
  body.mw-cloud .cloud-q select {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; font-size: 16px; cursor: pointer;
  }
  body.mw-cloud .cloud-export {
    display: flex; align-items: center; justify-content: center;
    height: 34px; margin: 0 0 0 2px; padding: 0 16px;
    background: var(--ph-accent-fill); color: var(--ph-accent-ink);
    box-shadow: 0 2px 12px rgba(31,111,224, .38);
    border: 0; border-radius: 10px;
    font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: .1px;
    cursor: pointer;
  }
  body.mw-cloud .cloud-export:active { filter: brightness(.88); }

  /* ------------------------------------------------------------ picture */

  body.mw-cloud #view-video.ve-pro .ve-preview {
    order: 3;
    position: relative;
    flex: 1 1 auto;
    min-height: 140px;
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--ph-bg);
  }
  /*
   * ►► THE TEXT PANEL: DOCKED, STILL, AND ALL OF IT IN REACH. ◄◄
   * It used to be a strip over the bottom of the picture, twice as wide as
   * the phone, with Bold, Outline, the panel, the animation and Delete all
   * off the right-hand edge — and it jumped to the top of the picture whenever
   * a dragged title crossed the middle. Now it is a panel fixed to the bottom
   * of the screen, over the tool dock (as CapCut's is), that slides up and
   * never moves or resizes the picture; everything wraps onto two rows of
   * thumb-sized controls, and the Size slider means the keyboard is rarely
   * needed. With the keyboard up it rides on top of it.
   */
  body.mw-cloud #view-video.ve-pro .ve-text-tools {
    position: fixed; z-index: 205;
    top: auto !important; bottom: var(--kb, 0px) !important; left: 0; right: 0; transform: none;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px;
    max-width: none; white-space: normal;
    padding: 12px 14px calc(12px + var(--ph-safe-b, env(safe-area-inset-bottom))) 14px;
    background: rgba(18, 19, 24, .97); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border: 0; border-top: 1px solid var(--ph-line); border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .45);
    animation: vtPanelIn .24s cubic-bezier(.2, .8, .2, 1);
  }
  html.mw-kb body.mw-cloud #view-video.ve-pro .ve-text-tools { padding-bottom: 10px; border-radius: 14px 14px 0 0; }
  @keyframes vtPanelIn { from { transform: translateY(100%); opacity: .4; } to { transform: none; opacity: 1; } }
  body.mw-cloud #view-video.ve-pro .ve-text-tools.hidden { display: none; }
  body.mw-cloud #view-video.ve-pro .ve-text-tools .vt-label { display: none; }
  body.mw-cloud #view-video.ve-pro .ve-text-tools select {
    flex: 1 1 140px; min-width: 0; height: 44px; font-size: 16px; padding: 0 12px; border-radius: 12px;
    background: var(--ph-panel-2, #1c1d23); color: #fff; border: 1px solid rgba(255,255,255,.08);
  }
  body.mw-cloud #view-video.ve-pro .ve-text-tools .vt-size-wrap {
    flex: 2 1 220px; display: flex; align-items: center; gap: 10px; color: #a1a6b4; font-size: 14px; font-weight: 650;
  }
  body.mw-cloud #view-video.ve-pro .ve-text-tools #vtSizeRange { flex: 1 1 auto; width: auto; min-width: 90px; height: 44px; }
  body.mw-cloud #view-video.ve-pro .ve-text-tools input[type=number] {
    width: 64px; height: 44px; font-size: 17px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums;
    border-radius: 12px; background: var(--ph-panel-2, #1c1d23); color: #fff; border: 1px solid rgba(255,255,255,.08); -moz-appearance: textfield;
  }
  body.mw-cloud #view-video.ve-pro .ve-text-tools input[type=number]::-webkit-inner-spin-button,
  body.mw-cloud #view-video.ve-pro .ve-text-tools input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  body.mw-cloud #view-video.ve-pro .ve-text-tools .vt-unit { font-size: 15px; margin-left: -6px; }
  body.mw-cloud #view-video.ve-pro .ve-text-tools input[type=color] {
    width: 44px; height: 44px; padding: 4px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); background: transparent;
  }
  body.mw-cloud #view-video.ve-pro .ve-text-tools button {
    height: 44px; min-width: 44px; padding: 0 14px; border-radius: 12px; font-size: 17px;
    background: var(--ph-panel-2, #1c1d23); border: 1px solid rgba(255,255,255,.08);
  }
  body.mw-cloud #view-video.ve-pro .ve-text-tools input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
  body.mw-cloud #view-video.ve-pro .ve-text-tools input[type=color]::-webkit-color-swatch { border: 0; border-radius: 50%; }
  body.mw-cloud #view-video.ve-pro .ve-text-tools input[type=color]:disabled { opacity: .35; }
  body.mw-cloud #view-video.ve-pro .ve-text-tools #vtAnim { flex: 1 1 120px; font-size: 15px; text-overflow: ellipsis; }
  body.mw-cloud #view-video.ve-pro .ve-text-tools #vtDelete { margin-left: auto; }
  /* B, AA, outline and panel are on/off switches: on is plain to see (white
     with blue letters), off is the dark button — otherwise nobody can tell
     whether ALL CAPS or bold is on without looking at the picture */
  body.mw-cloud #view-video.ve-pro .ve-text-tools :is(#vtBold, #vtCaps, #vtOutline, #vtBg).on {
    background: #fff; border-color: #fff; color: #1f6fe0;
  }
  body.mw-cloud #view-video.ve-pro .ve-text-tools #vtOutline.on { color: #fff; -webkit-text-stroke: 2px #1f6fe0; }
  body.mw-cloud #view-video.ve-pro .ve-text-tools #vtCaps { font-weight: 900; letter-spacing: .02em; }
  body.mw-cloud #view-video.ve-pro .ve-text-tools #vtDone { background: #1a5fc4; border-color: #1f6fe0; color: #fff; font-weight: 800; min-width: 56px; }
  /* in full screen the panel sits over the full-screen player bar */
  body.ve-pfull.mw-cloud #view-video.ve-pro .ve-text-tools { z-index: 2050; }
  body.mw-cloud #view-video.ve-pro #veResume {
    position: fixed; z-index: 60;
    top: calc(var(--ph-top) + 8px); left: 10px; right: 10px;
    border-radius: 12px;
  }
  body.mw-cloud #view-video.ve-pro .ve-novid { color: var(--ph-muted); }

  /* ---------------------------------------------------------- transport */

  /* CapCut's row: full screen on the left, play in the middle, captions,
     undo and redo on the right — and the time on its own small line above
     the timeline it belongs to. The desk's two wrappers step aside
     (display: contents) so each control can take its own place on the grid. */
  body.mw-cloud #view-video.ve-pro .ve-transport {
    order: 4;
    flex: 0 0 auto;
    display: grid;
    /* three slots each side of play, so play sits at the true centre */
    grid-template-columns: repeat(3, 40px) 1fr 52px 1fr repeat(3, 40px);
    grid-template-rows: var(--ph-tr) 18px;
    grid-template-areas:
      "full . . . play . cc undo redo"
      "time time time time time time time time time";
    align-items: center;
    column-gap: 2px;
    margin: 0;
    padding: 0 6px;
    background: var(--ph-bg);
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
  body.mw-cloud #view-video.ve-pro .ve-transport-center,
  body.mw-cloud #view-video.ve-pro .ve-transport-right,
  body.mw-cloud #view-video.ve-pro .cloud-tr-extra { display: contents; }
  body.mw-cloud #view-video.ve-pro #veBack5,
  body.mw-cloud #view-video.ve-pro #veFwd5,
  body.mw-cloud #view-video.ve-pro #veBigger,
  body.mw-cloud #view-video.ve-pro .ve-transport label.ve-loop:has(#veLoopSel) { display: none; }

  body.mw-cloud #view-video.ve-pro #veFull { grid-area: full; }
  body.mw-cloud #view-video.ve-pro #vePlay { grid-area: play; }
  body.mw-cloud #view-video.ve-pro .ve-transport label.ve-loop:has(#veCapShow) { grid-area: cc; }
  body.mw-cloud #view-video.ve-pro .cloud-tr-extra [data-press="#veUndo"] { grid-area: undo; }
  body.mw-cloud #view-video.ve-pro .cloud-tr-extra [data-press="#veRedo"] { grid-area: redo; }

  body.mw-cloud #view-video.ve-pro .ve-transport .ve-time {
    grid-area: time;
    align-self: end;
    min-width: 0;
    padding: 0 8px 2px;
    font-family: inherit;
    font-size: 11px; font-weight: 600;
    color: #c4c6cc;
    font-variant-numeric: tabular-nums;
    letter-spacing: .2px;
    white-space: nowrap;
  }
  body.mw-cloud #view-video.ve-pro #vePlay {
    justify-self: center;
    width: 48px; height: 44px;
    background: transparent; border: 0; border-radius: 12px; box-shadow: none;
    color: var(--ph-text); font-size: 22px;
  }
  body.mw-cloud #view-video.ve-pro #vePlay:active { background: var(--ph-panel-2); }
  body.mw-cloud #view-video.ve-pro #vePlay .mi { width: 25px; height: 25px; margin: 0; }
  body.mw-cloud #view-video.ve-pro #veFull,
  body.mw-cloud #view-video.ve-pro .cloud-tr-extra button {
    width: 38px; height: 38px; padding: 0;
    display: grid; place-items: center;
    background: transparent; border: 0; border-radius: 10px;
    color: var(--ph-text); font-size: 17px;
  }
  body.mw-cloud #view-video.ve-pro .cloud-tr-extra button:disabled { color: #4a4c55; }
  body.mw-cloud #view-video.ve-pro .cloud-tr-extra .mi,
  body.mw-cloud #view-video.ve-pro #veFull .mi { width: 20px; height: 20px; margin: 0; }
  /* Captions on/off: a small "CC" badge, lit when they show on the picture. */
  body.mw-cloud #view-video.ve-pro .ve-transport label.ve-loop:has(#veCapShow) {
    position: relative;
    justify-self: center;
    height: 22px; margin: 0; padding: 0 5px;
    display: inline-flex; align-items: center;
    border-radius: 5px;
    border: 1.6px solid #5a5c64;
    color: #5a5c64;
    font-size: 10px; font-weight: 900; letter-spacing: .4px;
  }
  body.mw-cloud #view-video.ve-pro .ve-transport label.ve-loop input { position: absolute; opacity: 0; pointer-events: none; }
  body.mw-cloud #view-video.ve-pro .ve-transport label.ve-loop:has(input:checked) { color: var(--ph-text); border-color: var(--ph-text); }

  /* ----------------------------------------------------------- timeline */

  body.mw-cloud #view-video.ve-pro .ve-timeline {
    order: 6;
    flex: 0 0 var(--ph-tl);
    height: auto; min-height: 0;
    margin: 0;
    border: 0; border-top: 1px solid var(--ph-line); border-radius: 0;
    background: #0a0a0c;
    overflow-x: hidden; overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /*
   * ►► SIDEWAYS ONLY, SO UP-AND-DOWN REACHES THE TIMELINE. ◄◄
   * `overflow-y: visible` beside `overflow-x: auto` is computed as AUTO, so this
   * row was a vertical scroller too — with nothing to scroll. iOS hands a swipe
   * to the innermost scroller and keeps it there: the finger bounced this row
   * and the timeline behind it, the one with the music lane below the fold,
   * never moved. Hidden makes it a sideways-only scroller (a carousel), and
   * vertical swipes go up to .ve-timeline, which is the one that scrolls.
   */
  body.mw-cloud #view-video.ve-pro .ve-tl-scroll {
    padding: 2px 10px 18px;
    overflow-y: hidden;
    min-height: 0; height: auto;
    touch-action: pan-x pan-y;
    scrollbar-width: none;
  }
  /* more lanes below the fold: a soft edge says so */
  body.mw-cloud #view-video.ve-pro .ve-timeline.cloud-tl-more {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), rgba(0,0,0,.35));
    mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), rgba(0,0,0,.35));
  }
  body.mw-cloud #view-video.ve-pro .ve-tl-scroll::-webkit-scrollbar { display: none; }
  body.mw-cloud #view-video.ve-pro .ve-ruler { height: 22px; border-bottom-color: transparent; }
  body.mw-cloud #view-video.ve-pro .ve-tick { border-left-color: #2b2c33; }
  body.mw-cloud #view-video.ve-pro .ve-tick span { top: 4px; font-size: 9.5px; color: #8b8e98; }
  body.mw-cloud #view-video.ve-pro .ve-track { background: #121317; border-radius: 6px; }
  body.mw-cloud #view-video.ve-pro .ve-seg { border-width: 2px; border-radius: 6px; }
  body.mw-cloud #view-video.ve-pro .ve-seg.sel { border-color: #fff !important; box-shadow: 0 0 0 1px #fff inset; }
  body.mw-cloud #view-video.ve-pro .ve-seg-label { font-size: 10.5px; top: 4px; left: 5px; }
  body.mw-cloud #view-video.ve-pro .ve-seg-h { width: 18px; }
  body.mw-cloud #view-video.ve-pro .ve-seg-h.l::after, body.mw-cloud #view-video.ve-pro .ve-seg-h.r::after { left: 6px; height: 22px; background: #fff; }
  body.mw-cloud #view-video.ve-pro .ve-text-track { height: 26px; margin-top: 5px; background: #121317; }
  body.mw-cloud #view-video.ve-pro .ve-cap-track { height: 32px; margin-top: 5px; background: #121317; }
  body.mw-cloud #view-video.ve-pro .ve-cap-clip, body.mw-cloud #view-video.ve-pro .ve-cap-run { top: 2px; height: 28px; border-radius: 5px; }
  body.mw-cloud #view-video.ve-pro .ve-cap-edge { width: 14px; }
  /* no hover on a phone: the size corner is always there to grab (a bigger target round it) */
  body.mw-cloud #view-video.ve-pro .ve-cap-scale { opacity: .95; width: 20px; height: 20px; margin: -10px 0 0 -10px; }
  body.mw-cloud #view-video.ve-pro .ve-audio-track { height: 36px; margin-top: 5px; background: #121317; }
  body.mw-cloud #view-video.ve-pro .ve-music-track { height: 28px; margin-top: 5px; background: #121317; }
  /*
   * Only the rows with something in them, as CapCut shows it. The overlay
   * row is folded away until a clip is on it (the studio always keeps one
   * empty overlay row to drop onto — on a phone "To overlay" in the Overlay
   * tools does that job); text, captions and music appear once they exist.
   */
  body.mw-cloud #view-video.ve-pro .ve-track:not(:has(.ve-seg-ov)) {
    margin-top: -39px;                       /* 4px gap − the 43px empty row */
    clip-path: inset(43px 0 0 0);
  }
  body.mw-cloud #view-video.ve-pro .ve-lane-hint { display: none; }
  body.mw-cloud #view-video.ve-pro .ve-text-track:empty,
  body.mw-cloud #view-video.ve-pro .ve-cap-track:not(:has(.ve-cap-clip, .ve-cap-run)),
  body.mw-cloud #view-video.ve-pro .ve-music-track:not(:has(.ve-music-seg)),
  body.mw-cloud #view-video.ve-pro .ve-sfx-track:not(.has) { display: none; }
  body.mw-cloud #view-video.ve-pro .ve-sfx-track { height: 28px; margin-top: 5px; background: #121317; }
  body.mw-cloud .ve-sfx-grid { grid-template-columns: repeat(3, 1fr); }
  body.mw-cloud #view-video.ve-pro .ve-seg-label { background: rgba(0,0,0,.45); font-weight: 700; }

  /* CapCut's white ＋, at the END of the video row (placed by cloud-boot.js) */
  .cloud-tl-add { display: none; }
  body.mw-cloud #view-video.ve-pro .cloud-tl-add {
    display: grid; place-items: center;
    position: absolute; z-index: 6; left: 0; top: 0;
    width: 34px; height: 34px; padding: 0; margin: 0;
    background: #fff; color: #000;
    border: 0; border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,.6);
  }
  body.mw-cloud #view-video.ve-pro .cloud-tl-add .mi { width: 20px; height: 20px; margin: 0; }
  /* the room past the last clip is .cloud-tl-tail, a block cloud-boot.js sizes
     (iOS will not scroll into padding); it also leaves air under the last lane */
  .cloud-tl-tail { display: none; }
  body.mw-cloud #view-video.ve-pro .cloud-tl-tail { display: block; height: 10px; pointer-events: none; }

  body.mw-cloud #view-video.ve-pro .ve-playhead { width: 2px; background: #fff; box-shadow: 0 0 6px rgba(0,0,0,.7); }
  /* CapCut: trim handles on the selected clip only — elsewhere a finger scrolls (cloud-boot.js DRAG_SEL) */
  body.mw-cloud #view-video.ve-pro .ve-seg:not(.sel) .ve-seg-h,
  body.mw-cloud #view-video.ve-pro .ve-audio-seg:not(.sel) .ve-audio-h,
  body.mw-cloud #view-video.ve-pro .ve-cap-clip:not(.sel) .ve-cc-h,
  body.mw-cloud #view-video.ve-pro .ve-text-clip:not(.sel) .ve-tc-h { display: none; }
  /* the selected caption's handles are visible white grips, so grabbing one is a deliberate act */
  body.mw-cloud #view-video.ve-pro .ve-cap-clip.sel .ve-cc-h { width: 12px; background: #fff; opacity: 1; }
  body.mw-cloud #view-video.ve-pro .ve-cap-clip.sel .ve-cc-h.l { border-radius: 6px 0 0 6px; }
  body.mw-cloud #view-video.ve-pro .ve-cap-clip.sel .ve-cc-h.r { border-radius: 0 6px 6px 0; }
  body.mw-cloud #view-video.ve-pro .ve-cap-clip.sel .ve-cc-h::after { background: #e0801f; left: 4.5px; }
  /* the ruler is not a scrubber here: the centre line is */
  body.mw-cloud #view-video.ve-pro .ve-tl-scroll.ve-centred .ve-ruler { cursor: default; }
  /* the centred timeline's line is pinned in the timeline box (veditor.js placeCentreLine) */
  body.mw-cloud #view-video.ve-pro .ve-playhead.ve-playhead-pinned { bottom: auto; z-index: 5; }
  body.mw-cloud #view-video.ve-pro .ve-playhead::before { left: -5px; border-width: 6px; border-top-color: #fff; }

  /* --------------------------------------------------------------- dock */

  body.mw-cloud .cloud-dock {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 200;
    height: var(--ph-dock);
    padding-bottom: var(--ph-safe-b);
    background: var(--ph-bg);
    border-top: 1px solid var(--ph-line);
  }
  .cloud-dock-row {
    display: none;
    height: 58px;
    align-items: center;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 0 4px;
  }
  .cloud-dock-row::-webkit-scrollbar { display: none; }
  .cloud-dock-row.on { display: flex; }
  .cloud-tool {
    position: relative;
    flex: 0 0 auto;
    min-width: 64px; height: 54px;
    padding: 4px 6px 0;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    background: transparent; border: 0; border-radius: 12px;
    color: #e4e5e9;
    font-weight: 500; font-size: 11.5px; line-height: 1.15; font-family: inherit;
    letter-spacing: .1px;
    white-space: nowrap;
    cursor: pointer;
  }
  .cloud-tool .mi { width: 24px; height: 24px; margin: 0; }
  .cloud-tool:active { background: var(--ph-panel-2); }
  .cloud-tool:disabled { color: #4a4c55; }
  .cloud-tool.on { color: var(--ph-accent-text); }
  .cloud-tool.cloud-tool-hidden { display: none; }
  .cloud-tool-ai {
    position: absolute; top: 1px; left: calc(50% + 4px);
    padding: 1px 5px; border-radius: 6px;
    background: var(--ph-ai); color: #fff;
    font-size: 8.5px; font-weight: 900; letter-spacing: .3px;
  }
  .cloud-tool-count {
    position: absolute; top: 1px; left: calc(50% + 6px);
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    display: grid; place-items: center;
    background: var(--ph-accent); color: var(--ph-accent-ink);
    font-size: 10px; font-weight: 900;
  }
  .cloud-tool-back {
    min-width: 46px; margin-right: 4px;
    border-right: 1px solid var(--ph-line); border-radius: 0;
  }
  .cloud-tool-back .mi { width: 26px; height: 26px; }
  .cloud-tool-ratio b { font-size: 13px; font-weight: 800; height: 24px; display: grid; place-items: center; }

  /* ------------------------------------------------------------- sheets */

  /* A sheet takes the timeline and the dock's place and leaves the picture
     and the play button where they are — tap a short, watch it, tap another. */
  body.mw-cloud #view-video.ve-pro .ve-bin,
  body.mw-cloud #view-video.ve-pro .ve-side { display: none; }

  body.mw-cloud.mw-sheet-shorts #view-video .ve-bin,
  body.mw-cloud.mw-sheet-insp #view-video .ve-side,
  body.mw-cloud.mw-sheet-export .cloud-export-sheet {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 210;
    height: var(--ph-sheet);
    width: auto; max-width: none; min-width: 0;
    margin: 0;
    padding: 50px 12px calc(14px + env(safe-area-inset-bottom));
    overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--ph-panel);
    border: 0; border-radius: 18px 18px 0 0;
    box-shadow: 0 -12px 40px rgba(0,0,0,.6);
    animation: cloudSheetUp .2s ease-out;
  }
  @keyframes cloudSheetUp { from { transform: translateY(24px); opacity: .4; } to { transform: none; opacity: 1; } }

  body.mw-cloud.mw-sheet .cloud-sheet-head {
    display: flex; align-items: center; gap: 8px;
    position: fixed; left: 0; right: 0; z-index: 215;
    bottom: calc(var(--ph-sheet) - 48px);
    height: 48px;
    padding: 0 8px 0 16px;
    background: var(--ph-panel);
    border-radius: 18px 18px 0 0;
    animation: cloudSheetUp .2s ease-out;
  }
  .cloud-sheet-head::before {
    content: ''; position: absolute; top: 6px; left: 50%; margin-left: -18px;
    width: 36px; height: 4px; border-radius: 2px; background: #3a3b43;
  }
  .cloud-sheet-title { flex: 1; font-size: 15px; font-weight: 800; color: var(--ph-text); }
  .cloud-sheet-head button {
    width: 38px; height: 38px; padding: 0;
    display: grid; place-items: center;
    background: transparent; border: 0; border-radius: 10px;
    color: var(--ph-text);
  }
  .cloud-sheet-head button .mi { width: 22px; height: 22px; margin: 0; }
  .cloud-sheet-head .cloud-sheet-done { background: var(--ph-panel-2); }

  /* The shorts list, in the sheet. Once the AI has made shorts they come
     first — the reason for opening the sheet — with "caption them all" over
     them and the AI's own button, to look again, after them. */
  body.mw-cloud.mw-sheet-shorts #view-video.ve-pro .ve-bin { display: flex; flex-direction: column; gap: 10px; }
  body.mw-cloud #view-video.ve-pro .ve-bin:has(#veClipList .ve-clip) #veCapShorts { order: -2; }
  body.mw-cloud #view-video.ve-pro .ve-bin:has(#veClipList .ve-clip) #veClipList { order: -1; }
  body.mw-cloud #view-video.ve-pro .ve-bin:has(#veClipList .ve-clip) .ve-find { order: 2; }
  body.mw-cloud #view-video.ve-pro .ve-bin:has(#veClipList .ve-clip) #veBulkBox { order: -3; }
  /* "Export all" sits in the sheet's own header, by its title (a button
     there presses the desk's one, which is folded away with its heading). */
  body.mw-cloud #view-video.ve-pro .ve-bin .ve-side-head { display: none; }
  /* (named with its parent: ".cloud-sheet-head button" would otherwise show it
     in every sheet, unstyled) */
  .cloud-sheet-head .cloud-sheet-act { display: none; }
  body.mw-cloud.mw-sheet-shorts .cloud-sheet-head .cloud-sheet-act {
    display: inline-flex; align-items: center; gap: 6px;
    width: auto; height: 34px; padding: 0 12px;
    background: var(--ph-accent-fill); color: var(--ph-accent-ink);
    font-size: 13px; font-weight: 800;
  }
  body.mw-cloud.mw-sheet-shorts .cloud-sheet-head .cloud-sheet-act .mi { width: 17px; height: 17px; }
  body.mw-cloud.mw-sheet-shorts .cloud-sheet-head .cloud-sheet-act:disabled,
  body.mw-cloud.mw-sheet-shorts .cloud-sheet-head .cloud-sheet-act.cloud-tool-hidden { display: none; }
  body.mw-cloud #view-video.ve-pro .ve-bin .ve-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
  body.mw-cloud #view-video.ve-pro .ve-bin .ve-side-head h3 { display: none; }
  body.mw-cloud #view-video.ve-pro .ve-bin .ve-side-head #veExportAll { margin-left: auto; }
  body.mw-cloud #view-video.ve-pro .ve-find { gap: 10px; }
  body.mw-cloud #view-video.ve-pro #veFindHighlights {
    width: 100%; min-height: 48px; border-radius: 14px;
    background: var(--ph-ai); border: 0; color: #fff;
    font-size: 15px; font-weight: 800;
  }
  body.mw-cloud #view-video.ve-pro #veFindHighlights:disabled { opacity: .45; }
  body.mw-cloud #view-video.ve-pro #veCapShorts { width: 100%; min-height: 44px; border-radius: 12px; font-weight: 800; }
  body.mw-cloud #view-video.ve-pro #veCapShorts {
    background: rgba(31,111,224, .12); border: 1.5px solid rgba(77,149,239, .5); color: #d6ddff;
  }
  body.mw-cloud #view-video.ve-pro #veCapShorts:disabled { opacity: .45; }
  body.mw-cloud #view-video.ve-pro .ve-cliplist { max-height: none; overflow: visible; gap: 10px; }
  body.mw-cloud #view-video.ve-pro .ve-clip {
    background: var(--ph-panel-2); border: 1.5px solid transparent; border-radius: 14px;
    padding: 10px 10px 8px;
  }
  body.mw-cloud #view-video.ve-pro .ve-clip:hover { transform: none; }
  body.mw-cloud #view-video.ve-pro .ve-clip.sel { border-color: var(--ph-accent); box-shadow: none; }
  body.mw-cloud #view-video.ve-pro .ve-clip-thumb { width: 44px; height: 78px; border-radius: 8px; }
  body.mw-cloud #view-video.ve-pro .ve-clip-name { font-size: 14.5px; font-weight: 800; }
  body.mw-cloud #view-video.ve-pro .ve-clip-btns { gap: 6px; }
  body.mw-cloud #view-video.ve-pro .ve-clip-btns .icon-btn { height: 40px; border-radius: 10px; background: #26272e; border: 0; color: var(--ph-text); }

  /* The settings column, in the sheet: its tabs become a segmented control. */
  body.mw-cloud #view-video.ve-pro .ve-side .ve-insp-tabs {
    position: sticky; top: -50px; z-index: 3;
    display: flex; gap: 4px;
    margin: -50px -12px 12px; padding: 50px 12px 8px;
    background: var(--ph-panel);
    border: 0;
    overflow-x: auto; scrollbar-width: none;
  }
  body.mw-cloud #view-video.ve-pro .ve-side .ve-insp-tabs::-webkit-scrollbar { display: none; }
  body.mw-cloud #view-video.ve-pro .ve-side .ve-insp-tabs button {
    flex: 1 0 auto;
    display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px;
    height: 36px; padding: 0 12px;
    border-radius: 10px; border: 0;
    background: var(--ph-panel-2); color: var(--ph-muted);
    font-size: 12.5px; font-weight: 700;
  }
  body.mw-cloud #view-video.ve-pro .ve-side .ve-insp-tabs button.on { background: var(--ph-text); color: #000; }
  body.mw-cloud #view-video.ve-pro .ve-side .ve-insp-tabs button::after { display: none; }
  body.mw-cloud #view-video.ve-pro .ve-side .ve-insp-body { overflow: visible; padding: 0; }
  body.mw-cloud #view-video.ve-pro .ve-side .primary-btn.ve-insp-wide,
  body.mw-cloud #view-video.ve-pro #veAutoCaptions { min-height: 48px; border-radius: 14px; font-size: 15px; font-weight: 800; }

  /* The export sheet. */
  .cloud-export-sheet { color: var(--ph-text); }
  .cloud-xp-main {
    width: 100%; min-height: 56px; margin: 0 0 10px;
    display: flex; align-items: center; gap: 12px; padding: 0 16px;
    border: 0; border-radius: 14px;
    background: var(--ph-accent-fill); color: var(--ph-accent-ink);
    box-shadow: var(--ph-accent-glow);
    font-size: 15.5px; font-weight: 800; text-align: left;
    cursor: pointer;
  }
  .cloud-xp-main.alt { background: var(--ph-panel-2); color: var(--ph-text); box-shadow: none; }
  .cloud-xp-main .mi { width: 22px; height: 22px; margin: 0; }
  .cloud-xp-main small { display: block; font-size: 11.5px; font-weight: 600; opacity: .75; margin-top: 2px; }
  .cloud-xp-main:disabled { opacity: .4; }
  .cloud-xp-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 50px; padding: 0 4px;
    border-bottom: 1px solid var(--ph-line);
    font-size: 14px; font-weight: 600;
  }
  .cloud-xp-row select {
    background: var(--ph-panel-2); color: var(--ph-text);
    border: 0; border-radius: 10px; padding: 8px 10px; font-size: 16px;
  }
  .cloud-xp-row input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--ph-accent); }
  /* CapCut's "Ending": the outro on the end of every short */
  .cloud-xp-ending {
    display: flex; align-items: center; gap: 12px;
    margin: 4px 0 6px; padding: 10px; border-radius: 16px;
    background: var(--ph-panel-2); border: 1px solid var(--ph-line);
  }
  .cloud-xp-ending.on { border-color: rgba(77,149,239,.45); background: linear-gradient(180deg, rgba(31,111,224,.14), rgba(31,111,224,.05)), var(--ph-panel-2); }
  .cloud-xp-end-thumb {
    flex: none; width: 64px; height: 40px; padding: 0; border: 0; border-radius: 10px; overflow: hidden;
    background: linear-gradient(135deg, #262b5a, #151829); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  }
  .cloud-xp-end-thumb i { display: grid; place-items: center; width: 100%; height: 100%; background-size: cover; background-position: center; }
  .cloud-xp-ending:not(.has) .cloud-xp-end-thumb i::before { content: '+'; font-style: normal; font-size: 22px; font-weight: 400; color: #8ec0ff; }
  .cloud-xp-cover { margin-top: 8px; }
  .cloud-xp-chev { flex: none; display: grid; place-items: center; width: 28px; color: var(--ph-muted); }
  .cloud-xp-chev svg { width: 18px; height: 18px; }
  .cloud-xp-cover:not(.has) .cloud-xp-end-thumb i::before { content: ''; width: 22px; height: 22px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='M21 16l-5.5-5.5L7 19'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='M21 16l-5.5-5.5L7 19'/%3E%3C/svg%3E") center / contain no-repeat; color: #8ec0ff; }
  .cloud-xp-end-text { flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: var(--ph-text); text-align: left; }
  .cloud-xp-end-text b { display: block; font-size: 15px; font-weight: 750; }
  .cloud-xp-end-text small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ph-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cloud-switch { position: relative; flex: none; width: 50px; height: 30px; }
  .cloud-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; z-index: 1; }
  .cloud-switch span { position: absolute; inset: 0; border-radius: 999px; background: #3a3842; transition: background .2s; }
  .cloud-switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); transition: transform .22s cubic-bezier(.3,1.3,.5,1); }
  .cloud-switch input:checked + span { background: var(--ph-accent); }
  .cloud-switch input:checked + span::after { transform: translateX(20px); }
  .cloud-xp-link {
    display: block; width: 100%; margin-top: 12px; padding: 12px;
    background: transparent; border: 0; color: var(--ph-accent-text);
    font-size: 14px; font-weight: 700; text-align: center;
  }

  /* a control the dock just opened the effects panel at */
  body.mw-cloud .cloud-flash { animation: cloudFlash 1.4s ease-out; border-radius: 10px; }
  @keyframes cloudFlash { 0%, 40% { box-shadow: 0 0 0 2px var(--ph-accent); background: rgba(31,111,224,.16); } 100% { box-shadow: 0 0 0 2px transparent; background: transparent; } }
  body.mw-cloud .fx-side { z-index: 300; }

  /* --------------------------------------------- the studio's own modals */

  body.mw-cloud .cap-modal { place-items: end center; z-index: 300; }
  /* A sheet's top — its ✕ and Select — stays below the island: the progress
     pill of an export floats over everything, and a sheet tall enough to reach
     under it had a ✕ that could not be tapped ("I can't come out of this
     screen"). The island ends ~92px below the notch, more with a second line. */
  body.mw-cloud { --sheet-max: min(88vh, calc(100dvh - env(safe-area-inset-top) - 120px)); }
  body.mw-cloud .cap-box,
  body.mw-cloud .lib-box,
  body.mw-cloud .cut-box {
    width: 100%;
    max-width: 100%;
    max-height: var(--sheet-max);
    border-radius: 18px 18px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  body.mw-cloud .cut-box { height: var(--sheet-max); }

  /* ------------------------------------------- the captions window, on a phone
   *
   * The desk lays this window out for a laptop: settings in a capped box that
   * scrolls on its own, then the looks, the fixing tools, the player, the
   * lines and the Save row. Squeezed to a phone it lost things: the Hearing
   * picker and the looks ran off the right edge, the tool rows touched the
   * sides, and the window was taller than the screen with nothing to scroll
   * it — so Cancel, Preview and "Save this short with captions" could not be
   * reached at all.
   *
   * Here it is a sheet pinned between the top bar and the bottom of the
   * screen (and the top of the keyboard, while a line is being typed), in
   * sections that each fit the width. A phone cannot show the settings, the
   * looks, the tools, the player and the lines at once without squeezing
   * every one of them, so "Style & settings" switches the sheet between two
   * views of the same window:
   *
   *   WORDS (folded)  the fixing tools, one row that slides sideways · the
   *                   player · THE LINES, which get every point left over
   *   STYLE (open)    the looks · the settings, as a grid of labelled fields
   *                   (and the lines too while there are none, because that
   *                   is where "Generate captions" is)
   *
   * Both keep the title, what it is set to, and Cancel / Preview / Save.
   *
   * Only placement changes. Every control is the same element with the same
   * id doing the same thing; the list is still the box that scrolls, so the
   * line being spoken is still followed as it plays.
   */
  body.mw-cloud #capModal .cap-box {
    position: fixed; left: 0; right: 0;
    top: calc(var(--ph-top) + 6px); bottom: var(--kb, 0px);
    width: auto; height: auto; max-height: none;
    padding-bottom: 0;
    background: var(--ph-panel);
    border: 0; border-top: 1px solid var(--ph-line);
    border-radius: 18px 18px 0 0;
  }
  body.mw-cloud #capModal .cap-head { flex: none; height: 52px; padding: 0 6px 0 16px; gap: 8px; }
  body.mw-cloud #capModal .cap-head h2 {
    display: block; flex: 1 1 auto; min-width: 0;
    font-size: 16px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  body.mw-cloud #capModal .cap-head h2 .mi { width: 19px; height: 19px; margin: 0 8px 0 0; vertical-align: -4px; }
  body.mw-cloud #capModal .cap-head .icon-btn { flex: none; width: 40px; height: 40px; padding: 0; border-radius: 12px; }

  /* what it is set to: one line that slides, and the switch for the settings */
  body.mw-cloud #capModal .cap-sum-row { flex: none; flex-wrap: nowrap; gap: 8px; padding: 8px 12px 8px 16px; border-bottom: 1px solid var(--ph-line); }
  body.mw-cloud #capModal .cap-sum-chips {
    flex: 1 1 auto; min-width: 0; display: flex; gap: 6px;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    padding-right: 18px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
  }
  body.mw-cloud #capModal .cap-sum-chips::-webkit-scrollbar { display: none; }
  body.mw-cloud #capModal .cap-sum-chip { flex: none; padding: 6px 10px; font-size: 12px; border-radius: 999px; }
  body.mw-cloud #capModal .cap-sum-toggle {
    flex: none; margin: 0; height: 34px; padding: 0 12px;
    font-size: 13px; font-weight: 600; white-space: nowrap; border-radius: 10px;
  }
  /* lit while the sheet is showing the style, so it reads as the way back */
  body.mw-cloud #capModal .cap-sum-toggle[aria-expanded="true"] {
    border-color: var(--ph-accent); background: rgba(31,111,224, .16); color: var(--ph-accent-text);
  }

  /* the two views */
  body.mw-cloud #capModal .cap-box.folded :is(.cap-controls, .cap-strip-row) { display: none; }
  body.mw-cloud #capModal .cap-box:not(.folded) :is(.cap-fix-row, .cap-player) { display: none; }
  body.mw-cloud #capModal .cap-box.has-rows:not(.folded) .cap-list { display: none; }
  body.mw-cloud #capModal .cap-box:not(.folded) .cap-strip-row { order: 1; }
  body.mw-cloud #capModal .cap-box:not(.folded) .cap-controls { order: 2; }
  body.mw-cloud #capModal .cap-box:not(.folded) .cap-list { order: 3; }
  body.mw-cloud #capModal .cap-box:not(.folded) .cap-foot { order: 4; }

  /* the settings: a grid of labelled fields, six columns so pairs sit side by side */
  body.mw-cloud #capModal .cap-controls {
    flex: 1 1 auto; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: min-content; align-content: start;
    gap: 14px 10px; align-items: end;
    max-height: none; min-height: 0;
    padding: 14px 16px 16px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    border-bottom: 1px solid var(--ph-line);
  }
  body.mw-cloud #capModal .cap-controls > label {
    grid-column: span 3; min-width: 0; margin: 0;
    display: flex; flex-direction: column; align-items: stretch; gap: 6px;
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ph-muted);
  }
  body.mw-cloud #capModal .cap-controls > label select {
    width: 100%; height: 42px; margin: 0; padding: 0 30px 0 12px;
    font-size: 16px; font-weight: 500; letter-spacing: 0; text-transform: none;
    border-radius: 10px;
  }
  /* Size / Words per line / Position: a row of one-tap buttons (installCapChips) */
  body.mw-cloud #capModal select.cloud-chipped { display: none; }
  body.mw-cloud #capModal .cloud-chips { display: flex; gap: 3px; padding: 3px; height: 42px; box-sizing: border-box;
    border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
  body.mw-cloud #capModal .cloud-chips button { flex: 1 1 0; min-width: 0; margin: 0; padding: 0 2px; border: 0; border-radius: 7px;
    background: transparent; color: var(--ph-muted); font-size: 14px; font-weight: 650; letter-spacing: 0; text-transform: none; cursor: pointer; }
  body.mw-cloud #capModal .cloud-chips button.on { background: #2e3240; color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.4); }
  /* Font / Case / Transition / Style / Hearing: a list drawn by the page, not the system picker (installCapSheets) */
  body.mw-cloud #capModal select.cloud-sheeted { display: none; }
  body.mw-cloud #capModal .cloud-pick { display: flex; align-items: center; width: 100%; height: 42px; margin: 0; padding: 0 30px 0 12px;
    border-radius: 10px; border: 1px solid var(--border); color: var(--text); cursor: pointer; text-align: left;
    background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='16' viewBox='0 0 12 16'%3E%3Cpath d='M2 6l4-4 4 4M2 10l4 4 4-4' fill='none' stroke='%239aa0ad' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    font-size: 16px; font-weight: 500; letter-spacing: 0; text-transform: none; -webkit-tap-highlight-color: transparent; }
  body.mw-cloud #capModal .cloud-pick:disabled { opacity: .5; }
  body.mw-cloud #capModal .cloud-pick-v { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  /* Pairs that belong together: the full-width Width slider goes after Colour,
     so Position is not left on a row by itself. */
  body.mw-cloud #capModal .cap-controls > label:has(#capFont) { order: 1; }
  body.mw-cloud #capModal .cap-controls > label:has(#capSize) { order: 2; }
  body.mw-cloud #capModal .cap-controls > label:has(#capWords) { order: 3; }
  body.mw-cloud #capModal .cap-controls > label:has(#capCase) { order: 4; }
  body.mw-cloud #capModal .cap-controls > label:has(#capPos) { order: 5; }
  body.mw-cloud #capModal .cap-controls > label:has(#capColor) { order: 6; }
  body.mw-cloud #capModal .cap-controls > label:has(#capWidth) { order: 7; }
  body.mw-cloud #capModal .cap-controls > label:has(#capTrans) { order: 8; }
  body.mw-cloud #capModal .cap-controls > label:has(#capStyleSel) { order: 9; }
  body.mw-cloud #capModal .cap-controls > label:has(#capModelSel) { order: 10; }
  /* the last row: how many lines, the look's sample (it opens every look), and the fine type */
  body.mw-cloud #capModal #capCount { order: 11; }
  body.mw-cloud #capModal #capStyleSample { order: 12; }
  body.mw-cloud #capModal #capFine { order: 13; }
  body.mw-cloud #capModal #capFineWrap { order: 14; }
  /* no lines yet: the settings share the sheet with "Generate captions" */
  body.mw-cloud #capModal .cap-box:not(.has-rows) .cap-controls { flex: 0 1 auto; max-height: 32%; }
  body.mw-cloud #capModal .cap-controls > label:has(#capWidth) {
    grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; row-gap: 4px;
  }
  body.mw-cloud #capModal #capWidthV { order: 1; margin-left: auto; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ph-text); }
  body.mw-cloud #capModal #capWidth { order: 2; flex: 1 1 100%; width: 100%; height: 28px; margin: 0; padding: 0; }
  body.mw-cloud #capModal #capColor { width: 100%; height: 42px; margin: 0; padding: 5px; border-radius: 10px; cursor: pointer; }
  body.mw-cloud #capModal input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
  body.mw-cloud #capModal input[type=color]::-webkit-color-swatch { border: 0; border-radius: 6px; }
  body.mw-cloud #capModal #capStyleSample { grid-column: span 1; width: 100%; min-width: 0; height: 42px; margin: 0; padding: 0; border-radius: 10px; font-size: 17px; }
  body.mw-cloud #capModal .cap-controls > label:has(#capModelSel) { grid-column: 1 / -1; }
  body.mw-cloud #capModal #capCount { grid-column: span 4; align-self: center; font-size: 13px; line-height: 1.3; color: var(--ph-muted); }
  body.mw-cloud #capModal #capFine { grid-column: span 1; width: 100%; height: 42px; margin: 0; padding: 0; border-radius: 10px; font-size: 16px; }
  body.mw-cloud #capModal #capFineWrap { grid-column: 1 / -1; flex-wrap: wrap; gap: 10px 18px; }
  body.mw-cloud #capModal #capFineWrap label { gap: 8px; font-size: 13px; color: var(--ph-muted); }
  body.mw-cloud #capModal #capFineWrap input { height: 38px; margin: 0; font-size: 16px; }

  /* the looks: the strip across the full width, the look's own options under it */
  body.mw-cloud #capModal .cap-strip-row {
    flex: none; flex-wrap: wrap; align-items: center; gap: 10px 14px;
    margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--ph-line);
  }
  body.mw-cloud #capModal .cap-strip-label { flex: 1 1 100%; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ph-muted); }
  body.mw-cloud #capModal .cap-strip-row { border-bottom: 1px solid var(--ph-line); }
  body.mw-cloud #capModal .cap-style-strip {
    flex: 1 1 100%; min-width: 0; gap: 8px; padding: 2px 1px;
    overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  body.mw-cloud #capModal .cap-style-strip::-webkit-scrollbar { display: none; }
  body.mw-cloud #capModal .cap-style-chip { min-width: 66px; padding: 8px 10px; gap: 4px; border-radius: 12px; background: var(--ph-panel-2); }
  body.mw-cloud #capModal .cap-style-chip.sel { border-color: var(--ph-accent); background: rgba(31,111,224, .14); }
  body.mw-cloud #capModal .cap-style-chip .cs-sample { font-size: 17px; }
  body.mw-cloud #capModal .cap-style-chip .cs-name { font-size: 11px; }
  body.mw-cloud #capModal .cap-strip-opt { font-size: 14px; gap: 8px; color: var(--ph-text); }
  body.mw-cloud #capModal .cap-strip-opt input[type=color] { width: 40px; height: 32px; border-radius: 8px; }
  body.mw-cloud #capModal .cap-strip-more { margin-left: auto; height: 36px; padding: 0 14px; font-size: 13.5px; font-weight: 600; border-radius: 10px; }

  /* the fixing tools: one row that slides sideways, clear of both edges */
  body.mw-cloud #capModal .cap-fix-row {
    flex: none; flex-wrap: nowrap; align-items: center; gap: 8px;
    margin: 0; padding: 10px 40px 10px 16px;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain;
    border-bottom: 1px solid var(--ph-line);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  body.mw-cloud #capModal .cap-fix-row::-webkit-scrollbar { display: none; }
  body.mw-cloud #capModal .cap-wb-btn { flex: none; height: 36px; padding: 0 13px; font-size: 13.5px; font-weight: 600; white-space: nowrap; border-radius: 18px; }
  body.mw-cloud #capModal .cap-fix-sep { flex: none; align-self: center; width: 1px; height: 22px; margin: 0 2px; }
  body.mw-cloud #capModal .cap-g-autolab { flex: none; gap: 6px; font-size: 13.5px; color: var(--ph-text); }
  body.mw-cloud #capModal .cap-g-mode { flex: none; height: 36px; padding: 0 28px 0 10px; font-size: 16px; border-radius: 10px; }

  /* the player */
  body.mw-cloud #capModal .cap-player { flex: none; gap: 8px 10px; margin: 0; padding: 10px 16px; border-width: 0 0 1px; border-radius: 0; }
  body.mw-cloud #capModal .cap-pl-btn { height: 36px; padding: 0 10px; font-size: 14px; }
  body.mw-cloud #capModal .cap-pl-play { width: 44px; height: 44px; }
  body.mw-cloud #capModal .cap-pl-time { min-width: 0; font-size: 12.5px; }
  body.mw-cloud #capModal .cap-pl-scrub { flex: 1 1 90px; min-width: 80px; }
  body.mw-cloud #capModal .cap-pl-rate { height: 36px; padding: 0 26px 0 10px; font-size: 16px; border-radius: 10px; }
  body.mw-cloud #capModal .cap-pl-opt { gap: 7px; font-size: 13.5px; color: var(--ph-text); }
  /* the box and the words say it; the little picture beside them only cost the room
     that kept both options on one line */
  body.mw-cloud #capModal .cap-pl-opt .mi { display: none; }

  /* every tick box in the window: a box, not the desk's full-width field */
  body.mw-cloud #capModal input[type=checkbox] {
    flex: none; width: 20px; height: 20px; margin: 0; padding: 0; border-radius: 5px;
    accent-color: var(--ph-accent);
  }

  /* the lines: everything left over goes to them */
  body.mw-cloud #capModal .cap-list { flex: 1 1 auto; min-height: 120px; padding: 10px 12px 14px; gap: 8px; overscroll-behavior: contain; }
  body.mw-cloud #capModal .cap-fix-tabs { top: -10px; margin: -10px -12px 0; padding: 10px 12px 8px; background: var(--ph-panel); }
  body.mw-cloud #capModal .cap-fix-tabs button { min-height: 38px; padding: 7px 12px; font-size: 14px; white-space: nowrap; flex: none; }
  /* the list never scrolls sideways; the segmented filters shrink to fit, and
     ＋ Add caption wraps only when it is a full pill (no filters) */
  body.mw-cloud #capModal .cap-fix-tabs { flex-wrap: wrap; row-gap: 6px; }
  body.mw-cloud #capModal .cap-fix-tabs.seg { flex-wrap: nowrap; padding-bottom: 6px; }
  body.mw-cloud #capModal .cap-fix-tabs .cap-seg button { flex: 1 1 auto; min-width: 0; min-height: 36px; padding: 0 7px; border: 0; font-size: 13.5px; }
  body.mw-cloud #capModal .cap-fix-tabs .cap-add-line.cap-add-sq { flex: 0 0 auto; width: 44px; min-height: 38px; height: 38px; padding: 0; }
  body.mw-cloud #capModal #capList { overflow-x: hidden; }
  body.mw-cloud #capModal .cap-row { min-width: 0; max-width: 100%; }
  body.mw-cloud #capModal .cap-row { gap: 8px; padding: 2px; border-radius: 12px; }
  body.mw-cloud #capModal .cap-row-play { width: 34px; height: 34px; }
  body.mw-cloud #capModal .cap-row-play .mi { width: 13px; height: 13px; }
  body.mw-cloud #capModal .cap-time { flex: 0 0 38px; font-size: 12.5px; }
  body.mw-cloud #capModal .cap-text { height: 44px; padding: 0 12px; font-size: 16px; border-radius: 10px; }
  body.mw-cloud #capModal .cap-ai-line { width: 32px; height: 32px; opacity: .65; }
  body.mw-cloud #capModal .cap-sugg { width: calc(100% - 42px); margin: 0 0 4px 42px; }
  body.mw-cloud #capModal .cap-was { margin: 0 0 4px 42px; font-size: 13px; }
  body.mw-cloud #capModal .cap-ctx { margin: 0 0 2px 42px; font-size: 13.5px; }
  body.mw-cloud #capModal .cap-ctx-play { min-height: 34px; padding: 5px 12px; font-size: 13px; }
  /* the Word Book's footer: the count on its own line, the buttons sharing the width */
  body.mw-cloud #capModal .cap-wb-foot { flex-wrap: wrap; gap: 8px; padding: 10px 16px; }
  body.mw-cloud #capModal .cap-wb-foot #capWbCount { flex: 1 1 100%; font-size: 12.5px; line-height: 1.4; }
  body.mw-cloud #capModal .cap-wb-foot button { flex: 1 1 auto; min-width: 0; height: 40px; margin: 0; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.mw-cloud #capModal .cap-wb-io { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  body.mw-cloud #capModal .cap-was-back { height: 32px; padding: 0 12px; font-size: 13px; }
  body.mw-cloud #capModal .cap-head .cap-undo { flex: none; width: 40px; height: 40px; padding: 0; border-radius: 12px; font-size: 20px; }
  /* no lines yet: "Generate captions" is the thing to press, so it is in view
     and as wide as the sheet, not under a paragraph and a big picture */
  body.mw-cloud #capModal .cap-empty-state { flex: none; min-height: 0; justify-content: flex-start; gap: 8px; padding: 6px 4px 4px; }
  body.mw-cloud #capModal .cap-empty-state > * { flex: none; }
  body.mw-cloud #capModal .cap-empty-ic { display: none; }
  body.mw-cloud #capModal .cap-empty-title { font-size: 15.5px; }
  body.mw-cloud #capModal .cap-empty-sub { font-size: 13px; line-height: 1.45; }
  body.mw-cloud #capModal .cap-generate {
    order: -1; align-self: stretch; height: 48px; margin: 0 0 4px; padding: 0 16px;
    font-size: 15.5px; border-radius: 12px;
    background: var(--ph-accent-fill); box-shadow: var(--ph-accent-glow);
  }

  /* Cancel and Preview side by side, Save across the full width under them */
  body.mw-cloud #capModal .cap-foot {
    flex: none; flex-direction: column; align-items: stretch; gap: 8px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  }
  body.mw-cloud #capModal .cap-foot-hint { display: none; }
  body.mw-cloud #capModal .cap-foot-msg:not(:has(.cap-fix-note:not(:empty))) { display: none; }
  body.mw-cloud #capModal .cap-foot-msg .cap-fix-note { font-size: 12.5px; -webkit-line-clamp: 2; }
  body.mw-cloud #capModal .cap-foot-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  body.mw-cloud #capModal .cap-foot-btns button {
    min-width: 0; height: 44px; margin: 0; padding: 0 12px;
    font-size: 14.5px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    border-radius: 12px;
  }
  body.mw-cloud #capModal #capBurn { grid-column: 1 / -1; height: 48px; font-size: 15.5px; font-weight: 700; }

  /* A short phone (an iPhone SE): the Save row is one line, so the lines keep
     their room. ✕ at the top does exactly what Cancel does (both close the
     window), and Preview keeps its eye and its tooltip. */
  @media (max-height: 760px) {
    body.mw-cloud #capModal .cap-foot-btns { grid-template-columns: 48px 1fr; }
    body.mw-cloud #capModal #capCancel { display: none; }
    body.mw-cloud #capModal #capPreview { width: 48px; height: 48px; padding: 0; font-size: 0; }
    body.mw-cloud #capModal #capPreview .mi { width: 21px; height: 21px; margin: 0; }
    body.mw-cloud #capModal #capBurn { grid-column: auto; padding: 0 8px; font-size: 14px; }
    body.mw-cloud #capModal .cap-box:not(.has-rows) .cap-controls { max-height: 26%; }
  }

  /* Typing in a line with the keyboard up: the words and the player keep the
     room; the rows about the look and the Save row come back when it goes. */
  html.mw-kb body.mw-cloud #capModal.cap-typing :is(.cap-sum-row, .cap-controls, .cap-strip-row, .cap-fix-row, .cap-foot) { display: none; }

  /* the gallery and the Word Book cover the sheet, as they cover the desk's window */
  body.mw-cloud #capModal .cap-style-picker, body.mw-cloud #capModal .cap-wb-panel { border-radius: 18px 18px 0 0; }
  body.mw-cloud .fx-side { left: 0; align-items: flex-end; }
  body.mw-cloud .fx-side .cap-box { width: 100%; height: auto; max-height: var(--sheet-max); border-radius: 18px 18px 0 0; }
  /* 🖼️ Thumbnail: a sheet from the bottom, the picture as big as fits */
  body.mw-cloud .thq-modal { place-items: end center; }
  body.mw-cloud .cap-box.thq { width: 100%; max-width: 100%; max-height: var(--sheet-max); border: 0 !important; border-top: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 22px 22px 0 0 !important; padding-bottom: env(safe-area-inset-bottom) !important; animation: cloudSheetUp .25s ease-out; }
  body.mw-cloud .thq-head { padding-top: 22px; }
  body.mw-cloud .thq-grab { display: block; position: absolute; top: 7px; left: 50%; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px; background: #3a3b43; }
  body.mw-cloud .thq-frame { height: min(40vh, 360px); }
  /* 🎛️ Video quality: a SHORT sheet, so the picture above it stays in view
     while a slider is dragged — the whole point of a live preview. */
  body.mw-cloud .fx-side .cap-box.fxq {
    max-height: min(var(--sheet-max), 58vh); border: 0; border-top: 1px solid rgba(255,255,255,.07); border-radius: 22px 22px 0 0;
    padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -20px 60px rgba(0,0,0,.55); animation: cloudSheetUp .25s ease-out;
  }
  body.mw-cloud .fxq-head { padding-top: 20px; }
  body.mw-cloud .fxq-grab { display: block; position: absolute; top: 7px; left: 50%; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px; background: #3a3b43; }
  body.mw-cloud .fxq-pane { padding-bottom: 14px; }

  /* 16px stops iOS zooming the whole page when a field takes focus. */
  body.mw-cloud input[type="text"],
  body.mw-cloud input[type="number"],
  body.mw-cloud input[type="search"],
  body.mw-cloud textarea,
  body.mw-cloud select { font-size: 16px; }

  body.mw-cloud .overlay-box { width: 84vw; }
  /* the step a long job is on ("Perfecting each start and end…"): a soft pill under the message */
  body.mw-cloud #overlayStage { display: inline-block; margin: 12px auto 0; padding: 7px 14px; border-radius: 999px; max-width: 100%;
    font-size: 14px; font-weight: 650; line-height: 1.35; color: #dbeafe; background: rgba(77,149,239, .16); box-shadow: inset 0 0 0 1px rgba(77,149,239, .32); }
  body.mw-cloud #overlayStage.hidden { display: none; }
  /* what the AI is looking for, a line at a time, under the step (stageTips in cloud-boot.js) */
  body.mw-cloud .overlay-tip { margin: 10px auto 0; max-width: 300px; min-height: 2.7em; font-size: 13.5px; line-height: 1.38; color: #9fb3cf; opacity: 0; transform: translateY(4px); }
  body.mw-cloud .overlay-tip.in { opacity: 1; transform: none; transition: opacity .45s ease, transform .45s ease; }
  body.mw-cloud .overlay-tip.hidden { display: none; }
  /*
   * The export's overlay, once the video is ON the phone, becomes the last tap
   * (overlaySaveUi in cloud-boot.js): a green tick where the spinner was, the
   * bar full, and one big "Save to Photos" — the share sheet needs that tap,
   * so it is the biggest thing on the screen. "Not now" keeps it in ⬇ Saved.
   * While a later part is still coming down it is the spinner again, with
   * only "Keep editing" under it.
   */
  body.mw-cloud #overlay.ov-save .overlay-box { max-width: 400px; padding: 26px 22px 10px; border-radius: 24px; }
  body.mw-cloud #overlay.ov-save .overlay-acts { display: none; }
  body.mw-cloud #overlay.ov-ready .spinner { display: none; }
  body.mw-cloud .overlay-tick { display: none; }
  body.mw-cloud #overlay.ov-ready .overlay-tick {
    display: grid; place-items: center; width: 64px; height: 64px; margin: 2px auto 16px; border-radius: 50%; color: #fff;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); box-shadow: 0 8px 26px rgba(34, 197, 94, .38);
    animation: ovTickIn .42s cubic-bezier(.2, .9, .25, 1.25) both;
  }
  body.mw-cloud .overlay-tick svg { width: 34px; height: 34px; }
  @keyframes ovTickIn { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
  body.mw-cloud #overlay.ov-ready .progress-bar { background: linear-gradient(90deg, #22c55e, #4ade80); }
  body.mw-cloud #overlay.ov-ready .overlay-pct { color: #4ade80; }
  body.mw-cloud #overlayMsg .ov-title { display: block; font-size: 21px; font-weight: 750; color: #fff; letter-spacing: -.2px; }
  body.mw-cloud #overlayMsg .ov-sub { display: block; margin-top: 6px; font-size: 15px; line-height: 1.4; color: rgba(245, 243, 250, .7); }
  body.mw-cloud .overlay-save-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
  body.mw-cloud .overlay-save {
    display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 54px; margin: 0; padding: 0 18px;
    border: 0; border-radius: 15px; color: #fff; cursor: pointer;
    font: 700 17px/1.1 -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, sans-serif;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); box-shadow: 0 6px 22px rgba(34, 197, 94, .4);
    -webkit-tap-highlight-color: transparent;
  }
  body.mw-cloud .overlay-save .mi { width: 22px; height: 22px; margin: 0; flex: none; }
  body.mw-cloud .overlay-save:active { filter: brightness(.9); transform: scale(.985); }
  body.mw-cloud .overlay-save:disabled { opacity: .75; }
  body.mw-cloud #overlay:not(.ov-ready) .overlay-save { display: none; }
  body.mw-cloud .overlay-later {
    width: 100%; min-height: 46px; margin: 0; border: 0; border-radius: 13px; background: transparent; cursor: pointer;
    color: rgba(245, 243, 250, .66); font: 600 16px/1.1 -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, sans-serif;
    -webkit-tap-highlight-color: transparent;
  }
  body.mw-cloud .overlay-later:active { background: rgba(255, 255, 255, .06); }
  /* A job's progress box over the open sheet (210/215), not under it: under
     it, the AI Shorts sheet hid the box's Cancel and half its progress. */
  body.mw-cloud .overlay:not(.on-top) { z-index: 220; }
  /* Messages float over the bottom of the PICTURE, as CapCut's do — never over
     the timeline — and a finger goes straight through them: one sitting on a
     clip's edge for four seconds was a clip that could not be trimmed. */
  body.mw-cloud .toast {
    left: 14px; right: 14px; margin: 0 auto; width: fit-content; max-width: calc(100% - 28px);
    z-index: 400;
    pointer-events: none;
    bottom: calc(var(--ph-dock) + var(--ph-tl) + var(--ph-tr) + 30px);
    padding: 9px 15px 9px 9px;
    border-radius: 18px;
    font-size: 14px; line-height: 1.36;
  }
  body.mw-cloud.mw-sheet .toast { bottom: calc(var(--ph-sheet) + var(--ph-tr) + 30px); }
  /* a panel is up from the bottom: messages go to the top, off its controls */
  body.mw-cloud.cloud-modal-up .toast { top: calc(var(--ph-top) + 8px); bottom: auto; }

  .cloud-files-box, .cloud-help-box { width: 100%; }
  body.mw-cloud .cloud-sheet-modal .cloud-files-box {
    width: 100%; max-width: 100%; max-height: var(--sheet-max);
    border: 0; border-top: 1px solid rgba(255,255,255,.07); border-radius: 22px 22px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    animation: cloudSheetUp .25s ease-out;
  }
  .cloud-files-top { padding-top: 22px; }
  .cloud-files-top::before {
    content: ''; position: absolute; top: 7px; left: 50%; width: 38px; height: 5px; margin-left: -19px;
    border-radius: 3px; background: #3a3b43;
  }
}

/* A phone on its side: less timeline, so the picture keeps some height. */
@media (max-width: 900px) and (orientation: landscape) {
  body.mw-cloud { --ph-tl: 34dvh; --ph-tr: 40px; --ph-dock: calc(54px + var(--ph-safe-b)); }
  .cloud-dock-row { height: 54px; }
  .cloud-tool { height: 54px; gap: 3px; }
}

/* ------------------------------------------------------- installed as an app */

@media (display-mode: standalone) {
  /* No address bar to lose the connection dot behind. */
  .cloud-bar { padding-top: max(env(safe-area-inset-top), 8px); }
}

/* ---- phone: the Continue-editing card and the empty studio ---- */
@media (max-width: 900px) {
  body.mw-cloud #view-video.ve-pro .ve-monitors > .ve-resume { top: 10px; left: 10px; right: 10px; width: auto; transform: none; padding: 12px; gap: 12px; border-radius: 18px; }
  body.mw-cloud #view-video.ve-pro .ve-resume-card { flex: 1 1 100%; }
  body.mw-cloud #view-video.ve-pro .ve-resume-thumb { width: 96px; height: 56px; }
  body.mw-cloud #view-video.ve-pro .ve-resume-btns { flex: 1 1 100%; }
  body.mw-cloud #view-video.ve-pro .ve-resume-btns button { flex: 1; height: 44px; border-radius: 13px; font-size: 15px; }
  body.mw-cloud #view-video.ve-pro .ve-novid { gap: 8px; padding: 0 24px; }
  body.mw-cloud #view-video.ve-pro .ve-novid .nv-desk { display: none; }
  body.mw-cloud #view-video.ve-pro .ve-novid .nv-phone { display: inline; }
  body.mw-cloud #view-video.ve-pro .ve-novid #veOpen2 { min-width: 160px; height: 44px; border-radius: 13px; margin-top: 6px; }
  body.mw-cloud #view-video.ve-pro .ve-novid.with-resume #veOpen2 { margin-top: 0; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #e9e6f0; box-shadow: none; }
}

/* ===================================================================== */
/*  THE ISLAND — every message, out of one black capsule at the top      */
/* ===================================================================== */

/*
 * It drops in from under the top bar and SPRINGS to the size of what it has
 * to say (cloud-boot.js measures the words and animates the width and height
 * to them); a new message while one is showing morphs the capsule rather than
 * stacking a second box. It is only ever at the top, so it never sits over a
 * clip's trim handle the way a box along the bottom did.
 */
body.mw-cloud #toast { display: none !important; }
.cloud-island {
  /* above everything, the full-screen viewer included (z-index 2000) */
  position: fixed; z-index: 2100;
  left: 50%; top: calc(46px + env(safe-area-inset-top) + 10px);
  width: 120px; height: 36px;
  transform: translate(-50%, -18px) scale(.8);
  opacity: 0; pointer-events: none;
  background: #050506; color: #f5f5f7;
  border-radius: 24px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Roboto, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: width .55s cubic-bezier(.3,1.22,.4,1), height .55s cubic-bezier(.3,1.22,.4,1),
              transform .5s cubic-bezier(.3,1.32,.4,1), opacity .2s ease;
}
.cloud-island.on { transform: translate(-50%, 0) scale(1); opacity: 1; pointer-events: auto; }
.cloud-island:not(.on) {
  transition: transform .3s cubic-bezier(.55,0,.75,.2), opacity .24s ease .04s, width .3s ease, height .3s ease;
}
.cloud-island.ci-tappable { cursor: pointer; }
.ci-body {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; gap: 11px;
  box-sizing: border-box;
  width: max-content; max-width: min(calc(100vw - 24px), 440px);
  min-height: 36px;
  padding: 9px 16px 9px 9px;
  transition: opacity .16s ease, filter .16s ease, transform .22s ease;
}
.ci-body.swap { opacity: 0; filter: blur(6px); transform: scale(.96); }
.ci-body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Roboto, "Segoe UI", system-ui, sans-serif;
  color: #f5f5f7; -webkit-font-smoothing: antialiased;
}
.ci-probe { position: fixed; left: 0; top: 0; z-index: -1; visibility: hidden; pointer-events: none; transition: none; }
.ci-ic { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
.ci-ic svg { width: 17px; height: 17px; }
.ci-ic.ci-good { background: rgba(48,209,88,.18); color: #4ade80; }
.ci-ic.ci-error { background: rgba(255,69,58,.2); color: #ff6b61; }
.ci-ic.ci-warn { background: rgba(255,179,64,.18); color: #ffbe55; }
.ci-ic.ci-info { background: rgba(77,149,239,.22); color: #b4bfff; }
.ci-tx { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ci-title { font-size: 14.5px; font-weight: 650; letter-spacing: -.1px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ci-sub {
  font-size: 12.5px; line-height: 1.33; color: rgba(235,235,245,.62);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ci-act {
  flex: none; margin-left: 2px; height: 32px; padding: 0 15px;
  border: 0; border-radius: 16px;
  background: #1f6fe0; color: #fff;
  box-shadow: 0 4px 14px rgba(31,111,224,.45);
  font: inherit; font-size: 13.5px; font-weight: 700; letter-spacing: .1px;
  cursor: pointer;
}
.ci-act:active { filter: brightness(.88); }
.ci-chev { flex: none; width: 8px; height: 8px; margin: 0 2px 0 -2px; border: solid rgba(235,235,245,.45); border-width: 2px 2px 0 0; transform: rotate(45deg); }
.ci-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(180,191,255,.3); border-top-color: #b4bfff; animation: ciSpin .8s linear infinite; }
@keyframes ciSpin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .cloud-island { top: calc(var(--ph-top) + 8px); }
  /* a panel or a studio modal is up: the island goes up over the dimmed bar */
  body.mw-cloud.cloud-modal-up .cloud-island,
  body.mw-cloud.mw-panel .cloud-island { top: calc(env(safe-area-inset-top) + 6px); }
}

/* ===================================================================== */
/*  BACKGROUND JOBS — the chip, the line under the bar, the sheet        */
/* ===================================================================== */

/* On a phone the desk's corner box was behind the dock and the sheets. The
   chip and the jobs sheet are its replacement there; on a wide screen the
   corner box stays where it always was. */
@media (max-width: 900px) { body.mw-cloud #bgDock { display: none !important; } }

.cloud-jobchip {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; margin: 0; padding: 0 11px 0 7px;
  border: 1px solid rgba(77,149,239,.55); border-radius: 999px;
  background: linear-gradient(180deg, rgba(31,111,224,.34), rgba(31,111,224,.17));
  color: #eef1ff;
  font: inherit; font-size: 13px; font-weight: 750; line-height: 1; letter-spacing: .1px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; cursor: pointer;
  animation: cjGlow 2.4s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}
.cloud-jobchip.hidden { display: none; }
.cloud-jobchip:active { transform: scale(.96); }
.cloud-jobchip .cj-ic { position: relative; width: 20px; height: 20px; display: grid; place-items: center; flex: none; }
.cj-ring { width: 20px; height: 20px; transform: rotate(-90deg); }
.cj-ring .rt { fill: none; stroke: rgba(255,255,255,.2); stroke-width: 2.8; }
.cj-ring .rf { fill: none; stroke: #fff; stroke-width: 2.8; stroke-linecap: round; transition: stroke-dasharray .45s ease; }
.cloud-jobchip .cj-tick, .cloud-jobchip .cj-bang { position: absolute; inset: 1px; width: 18px; height: 18px; display: none; }
.cj-n {
  display: grid; place-items: center;
  min-width: 17px; height: 17px; padding: 0 4px; margin-right: -4px;
  border-radius: 9px; background: #fff; color: #164a99;
  font-size: 10.5px; font-weight: 900;
}
.cj-n:empty { display: none; }
.cloud-jobchip[data-state="done"] {
  border-color: rgba(74,222,128,.55); color: #dcfce7; animation: none;
  background: linear-gradient(180deg, rgba(48,209,88,.28), rgba(48,209,88,.14));
}
.cloud-jobchip[data-state="fail"] {
  border-color: rgba(255,107,97,.6); color: #ffe1de; animation: none;
  background: linear-gradient(180deg, rgba(255,69,58,.3), rgba(255,69,58,.15));
}
.cloud-jobchip[data-state="done"] .cj-ring, .cloud-jobchip[data-state="fail"] .cj-ring { display: none; }
.cloud-jobchip[data-state="done"] .cj-tick { display: block; color: #4ade80; }
.cloud-jobchip[data-state="fail"] .cj-bang { display: block; color: #ff8a80; }
.cloud-jobchip.cj-pop { animation: cjPop .55s cubic-bezier(.3,1.6,.5,1), cjGlow 2.4s ease-in-out .55s infinite; }
.cloud-jobchip[data-state="done"].cj-pop, .cloud-jobchip[data-state="fail"].cj-pop { animation: cjPop .55s cubic-bezier(.3,1.6,.5,1); }
@keyframes cjPop { 0% { transform: scale(.6); opacity: .3; } 100% { transform: scale(1); opacity: 1; } }
@keyframes cjGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(31,111,224,0), 0 4px 14px rgba(31,111,224,.28); }
  50% { box-shadow: 0 0 0 4px rgba(31,111,224,.18), 0 4px 20px rgba(31,111,224,.5); }
}
.cloud-bar .cloud-jobchip { margin-right: 4px; }

/* the same number, as a line along the bottom of the top bar */
.cloud-bar-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  transform-origin: left center; transform: scaleX(0);
  background: linear-gradient(90deg, #1a5fc4, #4d95ef 60%, #60a5fa);
  box-shadow: 0 0 10px rgba(77,149,239,.8);
  opacity: 0; pointer-events: none;
  transition: transform .5s ease, opacity .3s ease;
}
.cloud-bar-progress.on { opacity: 1; }

/* ---------------------------------------------------------------- panels */

.cp-scrim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.52);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .28s ease;
}
.cp-scrim.on { opacity: 1; }
.cp-panel {
  position: fixed; left: 0; right: 0; bottom: var(--kb, 0px);
  /* (its ✕ below the island, as the sheets above) */
  max-height: calc(100dvh - var(--kb, 0px) - env(safe-area-inset-top) - 120px);
  display: flex; flex-direction: column;
  background: #141519; color: #f5f6f8;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -20px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(105%);
  transition: transform .4s cubic-bezier(.2,.95,.25,1);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Roboto, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.cp-panel.on { transform: none; }
.cp-panel button, .cp-panel input, .cp-panel textarea, .cp-panel select { font-family: inherit; }
.cp-head { position: relative; flex: none; display: flex; align-items: center; gap: 10px; padding: 20px 12px 10px 20px; touch-action: none; }
.cp-grab { position: absolute; top: 7px; left: 50%; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px; background: #3a3b43; }
.cp-title { flex: 1; min-width: 0; margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.3px; color: #f5f6f8; }
.cp-x {
  flex: none; width: 32px; height: 32px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; background: #2a2b31; color: #c9cad1; cursor: pointer;
}
.cp-x svg { width: 15px; height: 15px; }
.cp-body {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 4px 16px 16px;
}
.cp-foot { flex: none; padding: 6px 16px 10px; }
.cp-foot:empty { display: none; }
.cp-link {
  width: 100%; height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; background: transparent; color: #8ec0ff;
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.cp-link .mi { width: 17px; height: 17px; margin: 0; }
@media (min-width: 901px) {
  .cp-panel {
    left: 50%; right: auto; top: 50%; bottom: auto;
    width: min(560px, calc(100vw - 40px)); max-height: min(82vh, 780px);
    border-radius: 22px;
    transform: translate(-50%, -46%) scale(.97); opacity: 0;
    transition: transform .28s cubic-bezier(.2,.9,.3,1), opacity .2s ease;
  }
  .cp-panel.on { transform: translate(-50%, -50%); opacity: 1; }
  .cp-grab { display: none; }
}

/* ------------------------------------------------------------- jobs sheet */

.cj-card {
  margin-bottom: 10px; padding: 14px;
  background: #1d1e24; border: 1px solid #2a2b32; border-radius: 18px;
}
.cj-card.run {
  border-color: rgba(77,149,239,.38);
  background: linear-gradient(180deg, rgba(31,111,224,.14), rgba(31,111,224,.03) 70%), #1d1e24;
}
.cj-row { display: flex; align-items: center; gap: 12px; }
.cj-big { position: relative; flex: none; width: 50px; height: 50px; display: grid; place-items: center; }
.cj-ring-lg { position: absolute; inset: 0; width: 50px; height: 50px; transform: rotate(-90deg); }
.cj-ring-lg .rt { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 4; }
.cj-ring-lg .rf { fill: none; stroke: #4d95ef; stroke-width: 4; stroke-linecap: round; transition: stroke-dasharray .5s ease; filter: drop-shadow(0 0 4px rgba(77,149,239,.6)); }
.cj-pc { position: relative; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cj-main { flex: 1; min-width: 0; }
.cj-title { font-size: 15.5px; font-weight: 750; line-height: 1.25; letter-spacing: -.1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cj-step {
  margin-top: 3px; font-size: 13px; line-height: 1.38; color: #9b9ea8;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cj-bar { margin-top: 13px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.cj-bar i {
  display: block; height: 100%; width: 2%; border-radius: 3px;
  background: linear-gradient(90deg, #1a5fc4, #4d95ef, #8ec0ff, #4d95ef, #1a5fc4); background-size: 200% 100%;
  animation: cjFlow 2.2s linear infinite;
  transition: width .5s ease;
}
@keyframes cjFlow { to { background-position: -200% 0; } }
.cj-meta {
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-top: 9px; font-size: 12px; color: #8a8d97; font-variant-numeric: tabular-nums;
}
.cj-btns { display: flex; gap: 8px; margin-top: 12px; }
.cj-btn {
  flex: 1; height: 42px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 0; border-radius: 13px; background: #2a2b31; color: #f1f1f4;
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.cj-btn .mi { width: 17px; height: 17px; margin: 0; }
.cj-btn.danger { background: rgba(255,69,58,.13); color: #ff7b71; }
.cj-btn.accent { background: #1f6fe0; color: #fff; box-shadow: 0 4px 16px rgba(31,111,224,.35); }
.cj-btn:disabled { opacity: .55; }
.cj-badge { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; }
.cj-badge svg { width: 20px; height: 20px; }
.cj-card.done .cj-badge { background: rgba(48,209,88,.16); color: #4ade80; }
.cj-card.fail .cj-badge { background: rgba(255,69,58,.16); color: #ff6b61; }
.cj-card.stopped .cj-badge { background: rgba(255,255,255,.08); color: #b5b7bf; }
.cj-x { flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #8a8d97; display: grid; place-items: center; cursor: pointer; }
.cj-x svg { width: 14px; height: 14px; }
.cj-files { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cj-files li { display: flex; align-items: center; gap: 6px; padding: 7px 7px 7px 10px; background: rgba(255,255,255,.045); border-radius: 12px; }
.cj-fname { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.cj-fname span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cj-fname .mi { flex: none; width: 16px; height: 16px; margin: 0; opacity: .55; }
.cj-mini {
  flex: none; height: 32px; padding: 0 11px;
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; border-radius: 10px; background: #2c2d34; color: #ececf1;
  font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.cj-mini.accent { background: rgba(31,111,224,.24); color: #dde3ff; }
.cj-mini .mi { width: 14px; height: 14px; margin: 0; }
.cj-empty { text-align: center; padding: 22px 14px 26px; color: #9b9ea8; }
.cj-empty-art {
  width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 20px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(77,149,239,.28), rgba(31,111,224,.18)); color: #d6ddff;
}
.cj-empty-art .mi { width: 30px; height: 30px; margin: 0; }
.cj-empty b { display: block; margin-bottom: 6px; font-size: 17px; color: #f5f6f8; }
.cj-empty p { max-width: 300px; margin: 0 auto; font-size: 13.5px; line-height: 1.45; }

/* ===================================================================== */
/*  HOME — the two rooms                                                 */
/* ===================================================================== */

.cloud-home, .cloud-sched, .cloud-proj { display: none; }
body.mw-cloud.mw-home .cloud-home,
body.mw-cloud.mw-sched .cloud-sched,
body.mw-cloud.mw-projects .cloud-proj {
  display: flex; flex-direction: column;
  position: fixed; inset: 0; z-index: 250;
  background: radial-gradient(1100px 520px at 85% -12%, rgba(31,111,224,.20), transparent 60%), #000;
  color: #f5f6f8;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Roboto, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none; user-select: none;
  animation: chIn .28s ease-out;
}
@keyframes chIn { from { opacity: .4; transform: scale(.985); } to { opacity: 1; transform: none; } }
.cloud-home button, .cloud-sched button, .cloud-proj button { font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cloud-home .hidden, .cloud-sched .hidden, .cloud-proj .hidden { display: none !important; }

.ch-top, .cs-top {
  flex: none; display: flex; align-items: center; gap: 10px;
  height: calc(54px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 14px 0 16px;
  box-sizing: border-box;
}
.ch-top { justify-content: space-between; }
.ch-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ch-logo {
  flex: none; width: 34px; height: 34px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--brand-grad); color: #fff; font-size: 17px;
  box-shadow: 0 6px 18px rgba(31,111,224,.45), inset 0 1px 0 rgba(255,255,255,.3);
}
.ch-name { font-size: 15.5px; font-weight: 750; letter-spacing: -.15px; white-space: nowrap; }
.ch-acts { display: flex; align-items: center; gap: 8px; }
.ch-round {
  width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: #1a1b21; color: #e8e8ee;
}
.ch-round .mi { width: 19px; height: 19px; margin: 0; }
.ch-scroll, .cs-scroll {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  width: 100%; max-width: 760px; margin: 0 auto; box-sizing: border-box;
  padding: 4px 16px calc(30px + env(safe-area-inset-bottom));
}
/*
 * ►► HOME, THE WAY CAPCUT DOES IT (cloud-social.js buildHome). ◄◄ White, calm,
 * flat: a blue banner whose titles roll by, two soft cards for the two big
 * things, the tools as plain black line icons in a grid. No glow, no glass, no
 * gradient buttons — "the buttons look like every other AI-made app".
 */
body.mw-cloud.mw-home .cloud-home { background: #fff; color: #111318; }
.cloud-home .ch-scroll { padding-top: 0; }
.cloud-home .ch-top { height: auto; min-height: 56px; margin: 0 -2px; padding: calc(8px + env(safe-area-inset-top)) 0 4px; }
.cloud-home .ch-brand { gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; background: rgba(4, 22, 64, .26); }
.cloud-home .ch-logo { width: 26px; height: 26px; border-radius: 8px; font-size: 14px; color: #0b57d0; background: #fff; box-shadow: none; }
.cloud-home .ch-name { font-size: 14.5px; font-weight: 600; color: #fff; }
.cloud-home .ch-round, .cloud-home .ch-ask .mwg-ask { width: 36px; height: 36px; border: 0; border-radius: 50%; color: #fff; background: rgba(4, 22, 64, .26); box-shadow: none; font-size: 17px; }
.cloud-home .ch-round.ch-me { color: #0b57d0; background: #fff; }
.cloud-home .ch-me b { color: #0b57d0; font-size: 15px; }
/* the banner: blue, fading to the page's white where the two cards sit */
.ch-banner { position: relative; display: grid; grid-template-columns: 1fr 150px; grid-template-areas: "top top" "wheel shots" "tx tx";
  column-gap: 12px; margin: 0 -16px; padding: 0 18px 58px; overflow: hidden;
  background: linear-gradient(180deg, #0a4fc4 0%, #1f6fe0 38%, #4d95ef 66%, #a9cdf8 86%, #fff 100%); color: #fff; }
.ch-banner .ch-top { grid-area: top; }
.ch-wheel { grid-area: wheel; align-self: center; height: 152px; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); }
.ch-wheel ul { margin: 0; padding: 0; list-style: none; transition: transform .7s cubic-bezier(.3, .8, .25, 1); }
.ch-wheel li { height: 38px; display: flex; align-items: center; font-size: 17px; font-weight: 500; color: rgba(255, 255, 255, .5); white-space: nowrap; cursor: pointer;
  transition: color .5s ease, font-weight .5s ease; }
.ch-wheel li.on { color: #8ff3ff; font-weight: 650; }
.ch-shots { grid-area: shots; position: relative; height: 222px; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); }
.ch-shot { position: absolute; left: 50%; top: 50%; width: 132px; height: 168px; margin: -84px 0 0 -66px; border-radius: 16px; overflow: hidden;
  opacity: 0; transform: scale(.7); box-shadow: 0 14px 30px rgba(3, 30, 90, .35); transition: transform .7s cubic-bezier(.3, .8, .25, 1), opacity .7s ease; }
.ch-shot.on { opacity: 1; transform: none; z-index: 2; }
.ch-shot.next { opacity: .5; transform: translateY(-58%) scale(.74); z-index: 1; }
.ch-shot.prev { opacity: .5; transform: translateY(58%) scale(.74); z-index: 1; }
/* what each one makes, drawn */
.ch-shot-shorts { background: linear-gradient(160deg, #1e293b, #0f172a); }
.hs-wide { position: absolute; left: 10px; top: 14px; width: 74px; height: 42px; border-radius: 7px; background: linear-gradient(135deg, #64748b, #334155); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.hs-tall { position: absolute; right: 12px; bottom: 12px; width: 70px; height: 118px; border-radius: 11px; background: linear-gradient(170deg, #3b82f6, #1d4ed8); box-shadow: 0 8px 18px rgba(0, 0, 0, .35), inset 0 0 0 1.5px rgba(255, 255, 255, .55); }
.hs-play { position: absolute; left: 50%; top: 40%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: #fff; }
.hs-play::before { content: ''; position: absolute; left: 9.5px; top: 7px; border-style: solid; border-width: 5px 0 5px 7.5px; border-color: transparent transparent transparent #1d4ed8; }
.hs-cap { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 2px; }
.hs-cap i { width: 13px; height: 4px; border-radius: 2px; background: #fff; }
.hs-cap i:nth-child(2) { width: 17px; background: #facc15; }
.ch-shot-caps { display: grid; place-items: center; background: linear-gradient(170deg, #78716c, #292524); }
.hs-words { display: flex; flex-direction: column; align-items: center; gap: 3px; transform: rotate(-3deg); }
.hs-words b { padding: 2px 8px; border-radius: 6px; font-size: 17px; font-weight: 900; letter-spacing: .3px; color: #fff; background: rgba(0, 0, 0, .55); text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.hs-words em { font-style: normal; color: #facc15; }
.ch-shot-montage { background: linear-gradient(160deg, #1f6fe0, #312e81); }
.hs-film { position: absolute; left: -10px; right: -10px; top: 50%; height: 54px; margin-top: -40px; display: flex; gap: 5px; padding: 10px 8px; box-sizing: border-box;
  transform: rotate(-8deg); background: rgba(8, 10, 40, .55); }
.hs-film::before, .hs-film::after { content: ''; position: absolute; left: 0; right: 0; height: 3px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .6) 0 4px, transparent 4px 9px); }
.hs-film::before { top: 3px; } .hs-film::after { bottom: 3px; }
.hs-film i { flex: 1; border-radius: 3px; background: linear-gradient(135deg, #fde68a, #f59e0b); }
.hs-film i:nth-child(2) { background: linear-gradient(135deg, #a5f3fc, #22d3ee); }
.hs-film i:nth-child(3) { background: linear-gradient(135deg, #bfdbfe, #4d95ef); }
.hs-note { position: absolute; right: 12px; bottom: 12px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #312e81; background: #fff; }
.hs-note .mi { width: 18px; height: 18px; margin: 0; }
.ch-shot-post { display: grid; place-items: center; background: linear-gradient(170deg, #f8fafc, #dbeafe); }
.hs-plats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hs-plats i { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: #fff; box-shadow: 0 4px 12px rgba(15, 23, 42, .12); }
.hs-plats .cs-mark { width: 28px; height: 28px; }
.ch-banner-tx { grid-area: tx; margin-top: 2px; }
.ch-banner-tx small { display: block; font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, .86); }
/* the banner's picture opens what it shows */
.ch-shots[data-hero-go] { cursor: pointer; }
/* the two big things: soft cards on the banner's edge, a black icon and a name */
.ch-duo { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: -44px; }
.ch-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 126px; margin: 0; padding: 16px 10px;
  border: 0; border-radius: 18px; color: #111318; text-align: center;
  background: linear-gradient(180deg, rgba(234, 243, 255, .96) 0%, #fff 100%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 24px rgba(15, 23, 42, .07), inset 0 0 0 1px rgba(15, 23, 42, .05);
  transition: transform .15s ease; }
.ch-card:active { transform: scale(.97); }
.ch-card-ic { width: 36px; height: 36px; margin-bottom: 4px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: #111318; }
.ch-card-ic .mi { width: 20px; height: 20px; margin: 0; }
.ch-card b { font-size: 17px; font-weight: 600; letter-spacing: -.2px; }
.ch-card small { max-width: 100%; font-size: 12.5px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the tools: plain line icons in a grid, as CapCut's */
.ch-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 4px; margin: 18px -6px 0; }
.ch-tool { position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; min-width: 0; margin: 0; padding: 14px 4px 12px; border: 0; border-radius: 16px;
  color: #111318; background: transparent; text-align: center; }
.ch-tool:active { background: #f3f4f6; }
.ch-tool-ic { position: relative; width: 30px; height: 30px; display: grid; place-items: center; }
.ch-tool-ic > .mi { width: 30px; height: 30px; margin: 0; }
.ch-q { width: 26px; height: 26px; box-sizing: border-box; border: 2px solid currentColor; border-radius: 50%; display: grid; place-items: center;
  font-style: normal; font-size: 16px; font-weight: 750; line-height: 1; }
.ch-spark { position: absolute; top: -5px; right: -7px; width: 13px; height: 13px; display: grid; place-items: center; font-style: normal; }
.ch-spark .mi { width: 13px; height: 13px; margin: 0; }
.ch-tool-tx { max-width: 100%; font-size: 14.5px; font-weight: 450; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-tool small { margin-top: -6px; max-width: 100%; font-size: 11.5px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-tool small:empty, .ch-tool .ch-marks { display: none; }
.ch-badge { position: absolute; top: -6px; right: -10px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px;
  font-style: normal; font-size: 11px; font-weight: 700; line-height: 18px; color: #fff; background: #0b57d0; }
.ch-badge.warn { background: #ef4444; }
/* the one-time "New here?" card, in the page's own colours */
body.mw-cloud .cloud-home .mwg-invite { margin: 14px 0 0; color: #111318; background: #f3f6fb; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06); }
body.mw-cloud .cloud-home .mwg-invite .mwg-go { color: #fff; background: #111318; border-radius: 10px; }
body.mw-cloud .cloud-home .mwg-invite .mwg-x { color: #6b7280; opacity: 1; }
/* running now, and ready to post */
.cloud-home .ch-sec { margin-top: 22px; }
.cloud-home .ch-sec h2 { color: #111318; font-size: 18px; font-weight: 700; }
.cloud-home .ch-link { color: #0b57d0; }
.cloud-home .ch-job { border: 0; border-radius: 16px; color: #111318; background: #f5f6f8; }
.cloud-home .ch-job-ring { background: conic-gradient(#0b57d0 calc(var(--p) * 1%), #e5e7eb 0); }
.cloud-home .ch-job-ring i { background: #f5f6f8; color: #111318; }
.cloud-home .ch-job-tx small { color: #6b7280; }
.cloud-home .ch-job .ch-arrow { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #6b7280; background: transparent; }
.cloud-home .ch-arrow .mi { width: 16px; height: 16px; margin: 0; }
.cloud-home .ch-tile-pic { box-shadow: none; background-color: #e5e7eb; }
.cloud-home .ch-tile-name { color: #111318; }
.cloud-home .ch-tile-go { color: #111318; background: #f1f2f4; }
.cloud-home .ch-foot-note { color: #9aa0aa; }
.ch-marks, .cs-marks { display: flex; gap: 4px; flex: none; }
@media (prefers-reduced-motion: reduce) { .ch-wheel ul, .ch-shot { transition: none; } }

.ch-sec { margin-top: 24px; }
.ch-sec h2 {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 2px 11px; font-size: 18px; font-weight: 800; letter-spacing: -.25px;
}
.ch-link { padding: 0; border: 0; background: none; color: #8ec0ff; font-size: 14px; font-weight: 700; }
.ch-job {
  display: flex; align-items: center; gap: 12px;
  width: 100%; margin-bottom: 8px; padding: 12px;
  border: 1px solid rgba(77,149,239,.32); border-radius: 20px;
  background: linear-gradient(180deg, rgba(31,111,224,.16), rgba(31,111,224,.04)), #121317;
  color: #fff; text-align: left;
}
.ch-job-ring {
  --p: 0; flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(#4d95ef calc(var(--p) * 1%), rgba(255,255,255,.1) 0);
  transition: --p .4s;
}
.ch-job-ring i { width: 37px; height: 37px; border-radius: 50%; display: grid; place-items: center; background: #15161b; font-style: normal; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ch-job-tx { flex: 1; min-width: 0; }
.ch-job-tx b { display: block; font-size: 15px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-job-tx small { display: block; margin-top: 2px; font-size: 12.5px; color: #9b9ea8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-job .ch-arrow { background: rgba(255,255,255,.08); }

.ch-reel {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none;
}
.ch-reel::-webkit-scrollbar { display: none; }
.ch-tile { flex: none; width: 130px; scroll-snap-align: start; }
.ch-tile-pic {
  display: block; width: 130px; height: 206px; border-radius: 18px;
  background: linear-gradient(160deg, #23242b, #15161b) center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 10px 24px rgba(0,0,0,.4);
}
.ch-tile-name { display: block; margin: 9px 2px 7px; font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-tile-go {
  width: 100%; height: 34px; border: 0; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: rgba(31,111,224,.22); color: #e0e6ff; font-size: 13px; font-weight: 750;
}
.ch-tile-go .mi { width: 15px; height: 15px; margin: 0; }
/* Projects: every video being edited, to pick up again (home + the Projects sheet) */
.ch-projsec { margin: 16px 0 22px; }
.pj-list { display: flex; flex-direction: column; gap: 8px; }
.pj-row { display: flex; align-items: center; gap: 6px; border-radius: 18px; background: #15161b; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.pj-row.now { box-shadow: inset 0 0 0 1.5px rgba(77,149,239,.7); }
.pj-row.missing { opacity: .5; }
.pj-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px; border: 0; background: none; color: #fff; text-align: left; font: inherit; }
.pj-pic { flex: none; width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(160deg, #1f2238, #17151f) center / cover no-repeat; color: #4d95ef; }
.pj-pic[style*="background-image"] .mi { display: none; }
.pj-pic .mi { width: 22px; height: 22px; margin: 0; }
.pj-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pj-tx b { font-size: 15px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-tx small { font-size: 12.5px; color: #9b9ea8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-now { font-style: normal; color: #8ec0ff; font-weight: 700; }
.pj-go { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); }
.pj-go .mi { width: 16px; height: 16px; margin: 0; }
.pj-more { flex: none; width: 40px; height: 40px; border: 0; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.06); color: #d8d9df; }
.pj-more:last-child { margin-right: 8px; }
.pj-more .mi { width: 18px; height: 18px; margin: 0; }
.pj-del { color: #ff8a80; }
.pj-hint { margin: 0 2px 12px; font-size: 13px; color: #9b9ea8; }
.pj-empty { padding: 30px 12px; text-align: center; color: #9b9ea8; }
.pj-empty b { display: block; margin: 10px 0 6px; font-size: 17px; color: #f5f6f8; }
.pj-empty-art { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: rgba(31,111,224,.18); color: #8ec0ff; }
.pj-empty-art .mi { width: 26px; height: 26px; margin: 0; }
.pj-new { width: 100%; min-height: 52px; border: 0; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #1f6fe0; color: #fff; font: inherit; font-size: 15px; font-weight: 800; box-shadow: 0 4px 18px rgba(31,111,224, .4); }
.pj-new .mi { width: 18px; height: 18px; margin: 0; }
/* the Projects screen (Video Studio's front door) */
.pv-scroll { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
.pv-new { width: 100%; display: flex; align-items: center; gap: 14px; margin: 6px 0 14px; padding: 16px; border: 0; border-radius: 22px; text-align: left; color: #fff;
  background: #1f6fe0; box-shadow: 0 10px 30px rgba(31,111,224,.42); }
.pv-new-art { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: rgba(255,255,255,.2); }
.pv-new-art .mi { width: 26px; height: 26px; margin: 0; }
.pv-new-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pv-new-tx b { font-size: 18px; font-weight: 800; }
.pv-new-tx small { font-size: 13px; opacity: .85; }
.pv-cur { margin-bottom: 6px; }
.pv-cont { width: 100%; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 10px; padding: 14px 16px; border: 0; border-radius: 18px; text-align: left; color: #fff;
  background: #15161b; box-shadow: inset 0 0 0 1.5px rgba(77,149,239,.7); }
.pv-cont-k { grid-column: 1; font-size: 12px; font-weight: 700; color: #8ec0ff; text-transform: uppercase; letter-spacing: .4px; }
.pv-cont b { grid-column: 1; font-size: 16px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-cont-go { grid-column: 2; grid-row: 1 / 3; align-self: center; display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: 12px; background: rgba(31,111,224,.3); font-size: 14px; font-weight: 750; }
.pv-cont-go .mi { width: 15px; height: 15px; margin: 0; }
.pv-cur-del { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0 4px; padding: 6px 10px; border: 0; border-radius: 10px; background: transparent; color: #f87171; font-size: 13px; font-weight: 650; }
.pv-cur-del .mi { width: 14px; height: 14px; margin: 0; }
.pv-cur-del:active { background: rgba(248,113,113,.12); }
.pv-h { display: flex; align-items: baseline; gap: 8px; margin: 18px 2px 10px; font-size: 18px; font-weight: 800; }
.pv-h small { font-size: 14px; color: #9b9ea8; font-weight: 700; }
.pv-none { margin: 4px 2px; font-size: 13px; color: #9b9ea8; }
.cloud-proj .pj-row { background: #121317; }
.ch-foot-note { margin: 26px 0 0; text-align: center; font-size: 12px; color: #5f626c; }

/* the studio's way home, where Files used to sit on a phone */
.cloud-home-btn .mi { margin-right: 6px; }
@media (max-width: 900px) {
  body.mw-cloud #cloudFiles { display: none; }
  body.mw-cloud #cloudHomeBtn, body.mw-cloud #cloudProjBtn { order: 1; }
  body.mw-cloud .cloud-bar .cloud-chip, body.mw-cloud .cloud-bar .cloud-jobchip,
  body.mw-cloud .cloud-q, body.mw-cloud .cloud-export { flex: none; }
}
/* a phone with a job running: Saved steps aside for the chip (it is in the
   jobs sheet and the Project row as well), so Export never leaves the screen.
   Every iPhone, not only the narrow ones: with the ? beside it, a 390px
   iPhone 13–16 had Export cut off at "Expo" while a short exported. */
@media (max-width: 440px) {
  body.mw-cloud .cloud-bar:has(#cloudJobsChip:not(.hidden)) #cloudDownloads { display: none; }
}
@media (max-width: 380px) {
  body.mw-cloud .cloud-q { padding: 0 22px 0 10px; }
  body.mw-cloud .cloud-q::after { right: 8px; }
  body.mw-cloud .cloud-export { padding: 0 13px; }
}
@media (max-width: 340px) {
  body.mw-cloud .cloud-bar:has(#cloudJobsChip:not(.hidden)) #cloudLink { display: none; }
}

/* ===================================================================== */
/*  THE SCHEDULER                                                        */
/* ===================================================================== */

.cs-top { padding-left: 6px; }
.cs-top h1 { flex: 1; min-width: 0; margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.35px; }
.cs-back { width: 42px; height: 42px; padding: 0; border: 0; border-radius: 12px; background: none; color: #fff; display: grid; place-items: center; }
.cs-back .mi { width: 26px; height: 26px; margin: 0; }
.cs-new {
  flex: none; height: 36px; padding: 0 14px 0 11px; border: 0; border-radius: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  background: #1f6fe0; color: #fff;
  font-size: 14px; font-weight: 750;
  box-shadow: 0 4px 16px rgba(31,111,224,.42);
}
.cs-new .mi { width: 17px; height: 17px; margin: 0; }

.cs-accts {
  display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none;
  margin: 2px -16px 12px; padding: 6px 16px 4px;
}
.cs-accts::-webkit-scrollbar { display: none; }
.cs-acct {
  flex: none; width: 66px; padding: 0; border: 0; background: none; color: #d8d9df;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.cs-ava {
  position: relative; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; background: #23242b;
  box-shadow: 0 0 0 2px #000, 0 0 0 3.5px rgba(77,149,239,.65);
}
.cs-ava img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.cs-ava b { font-size: 21px; font-weight: 800; }
.cs-ava > .mi { width: 22px; height: 22px; margin: 0; }
.cs-acct-name { max-width: 66px; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-acct-add .cs-ava { background: transparent; box-shadow: inset 0 0 0 1.5px #3c3d45; color: #b9bac2; }
.cs-mark { display: inline-block; flex: none; width: 22px; height: 22px; }
.cs-mark svg { display: block; width: 100%; height: 100%; border-radius: 30%; }
.cs-mark.sm { width: 18px; height: 18px; }
.cs-mark.lg { width: 42px; height: 42px; }
.cs-mark.badge { position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 7px; box-shadow: 0 0 0 2.5px #000; }

.cs-tabs {
  position: sticky; top: -4px; z-index: 2;
  display: flex; gap: 6px; padding: 6px 0 10px; background: #000;
}
.cs-tabs button {
  flex: 1; height: 38px; padding: 0 6px; border: 0; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: #16171c; color: #9b9ea8; font-size: 13.5px; font-weight: 700; white-space: nowrap;
}
.cs-tabs button.on { background: #f5f6f8; color: #000; }
.cs-tabs button i {
  min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(31,111,224,.26); color: #d6ddff; font-style: normal; font-size: 11.5px; font-weight: 800;
}
.cs-tabs button.on i { background: #1a5fc4; color: #fff; }
.cs-tabs button.alert i { background: #ff453a; color: #fff; }
.cs-day { margin: 18px 2px 9px; font-size: 12.5px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: #8a8d97; }
.cs-list > .cs-day:first-child { margin-top: 6px; }
.cs-post {
  display: flex; gap: 12px; width: 100%; margin-bottom: 10px; padding: 10px;
  border: 0; border-radius: 20px; background: #121317; color: #fff; text-align: left;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.055);
}
.cs-post:active { background: #18191e; }
.cs-pic {
  flex: none; width: 68px; height: 106px; border-radius: 13px;
  display: grid; place-items: center; color: #6b6e78;
  background: linear-gradient(160deg, #23242b, #17181d) center / cover no-repeat;
}
.cs-pic .mi { width: 22px; height: 22px; margin: 0; }
.cs-post-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 2px 2px 0 0; }
.cs-post-when { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; font-weight: 800; color: #b2bdff; }
.cs-post-when i { font-style: normal; font-size: 12px; font-weight: 600; color: #8a8d97; }
.cs-post-title { font-size: 15.5px; font-weight: 750; line-height: 1.3; letter-spacing: -.1px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cs-post-cap { font-size: 13px; color: #9b9ea8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-post-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 4px; }
.cs-state { flex: none; padding: 4px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .2px; }
/* solid, with white text: they sit on white cards AND over video pictures, and a see-through
   tint read on neither (a faint mint "Booked" on a pale green wash) */
.cs-state { display: inline-flex; align-items: center; gap: 5px; color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.cs-state::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.cs-state.booked, .cs-state.posted { background: #16a34a; color: #fff; }
.cs-state.planned { background: #1f6fe0; color: #fff; }
.cs-state.posting { background: #0a84ff; color: #fff; }
.cs-state.failed { background: #dc2626; color: #fff; }
.cs-state.retry { background: #d97706; color: #fff; }
.cs-empty { padding: 34px 16px; text-align: center; color: #9b9ea8; }
.cs-empty-art { display: inline-flex; gap: 8px; margin-bottom: 16px; }
.cs-empty-art .cs-mark { width: 46px; height: 46px; filter: drop-shadow(0 8px 16px rgba(0,0,0,.5)); }
.cs-empty-art.solo {
  width: 70px; height: 70px; border-radius: 23px; display: inline-grid; place-items: center;
  background: linear-gradient(135deg, rgba(77,149,239,.3), rgba(31,111,224,.2)); color: #d6ddff;
}
.cs-empty-art.solo .mi { width: 32px; height: 32px; margin: 0; }
.cs-empty b { display: block; margin-bottom: 6px; font-size: 19px; color: #fff; letter-spacing: -.25px; }
.cs-empty p { max-width: 330px; margin: 0 auto 18px; font-size: 14px; line-height: 1.5; }
.cs-cta {
  height: 48px; padding: 0 22px; border: 0; border-radius: 15px;
  display: inline-flex; align-items: center; gap: 8px;
  background: #1f6fe0; color: #fff;
  font-size: 15.5px; font-weight: 800; box-shadow: 0 8px 24px rgba(31,111,224,.45);
}
.cs-cta .mi { width: 18px; height: 18px; margin: 0; }

/* ---------------------------------------------- composer, accounts, post */

.cp-panel .cs-form { display: flex; flex-direction: column; }
.cs-sec { padding: 12px 0 14px; border-bottom: 1px solid #22232a; }
.cs-sec:last-child { border-bottom: 0; }
.cs-sec h4, .cs-h4 { margin: 0 0 11px; font-size: 12px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: #8a8d97; }
.cs-h4 { margin-top: 22px; }
.cs-h4.first { margin-top: 4px; }
.cs-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cs-pick-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 15px 14px; border: 0; border-radius: 18px; background: #1c1d23; color: #fff; text-align: left;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); cursor: pointer;
}
.cs-pick-btn .mi { width: 26px; height: 26px; margin: 0 0 4px; color: #8ec0ff; }
.cs-pick-btn b { font-size: 15px; font-weight: 750; }
.cs-pick-btn small { font-size: 12px; line-height: 1.35; color: #9b9ea8; }
.cs-media { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.cs-media::-webkit-scrollbar { display: none; }
.cs-m { position: relative; flex: none; }
.cs-m-pic {
  display: grid; place-items: center; width: 98px; height: 154px; border-radius: 15px;
  background: linear-gradient(160deg, #23242b, #17181d) center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
.cs-media.many .cs-m-pic { width: 74px; height: 116px; }
.cs-m-play { width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.5); position: relative; }
.cs-m-play::after { content: ''; position: absolute; left: 11px; top: 8px; border: 7px solid transparent; border-left: 11px solid #fff; border-right: 0; }
.cs-m-x {
  position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(0,0,0,.7); color: #fff; font-size: 17px; line-height: 1; cursor: pointer;
}
.cs-m-add {
  flex: none; width: 74px; border: 1.5px dashed #3c3d45; border-radius: 15px; background: none; color: #b9bac2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  font-size: 12px; font-weight: 700; cursor: pointer;
}
.cs-m-add .mi { width: 20px; height: 20px; margin: 0; }
.cs-label { display: block; margin: 6px 2px 7px; font-size: 13px; font-weight: 700; color: #dcdde3; }
.cs-label small { font-weight: 500; color: #8a8d97; }
.cs-input {
  display: block; width: 100%; box-sizing: border-box; margin: 0;
  padding: 12px 14px; border: 1px solid #2c2d34; border-radius: 14px;
  background: #1c1d23; color: #f5f6f8;
  font-size: 16px; line-height: 1.42; outline: none;
  -webkit-user-select: text; user-select: text;
}
.cs-input:focus { border-color: #1f6fe0; box-shadow: 0 0 0 3px rgba(31,111,224,.25); }
.cs-input::placeholder { color: #6b6e78; }
textarea.cs-cap { min-height: 118px; resize: vertical; }
.cs-sec .cs-input + .cs-label { margin-top: 14px; }
.cs-cap-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; }
.cs-ai {
  height: 38px; padding: 0 14px; border: 0; border-radius: 12px;
  display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg, rgba(96,165,250,.22), rgba(31,111,224,.22)); color: #e6eaff;
  box-shadow: inset 0 0 0 1px rgba(96,165,250,.38);
  font-size: 13.5px; font-weight: 750; cursor: pointer;
}
.cs-ai .mi { width: 16px; height: 16px; margin: 0; }
.cs-ai:disabled { opacity: .6; cursor: default; }
.cs-sec > .cs-ai { margin-top: 10px; }
.cs-count { font-size: 12px; color: #6b6e78; font-variant-numeric: tabular-nums; }
.cs-opts { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-top: 11px; }
.cs-opts::-webkit-scrollbar { display: none; }
.cs-opt {
  flex: none; width: 196px; padding: 10px 12px; border: 0; border-radius: 15px;
  background: #1c1d23; color: #fff; text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
.cs-opt b { display: block; margin-bottom: 3px; font-size: 11.5px; color: #b4bfff; letter-spacing: .2px; }
.cs-opt span { font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cs-who { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; padding: 5px 2px 2px; }
.cs-who::-webkit-scrollbar { display: none; }
.cs-who-a {
  flex: none; width: 64px; padding: 0; border: 0; background: none; color: #8a8d97;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 650; cursor: pointer;
}
.cs-who-a > span:last-child { max-width: 64px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-who-a .cs-ava { box-shadow: 0 0 0 2px #141519, 0 0 0 3.5px #3a3b43; opacity: .5; transition: opacity .15s, box-shadow .15s; }
.cs-who-a.on { color: #fff; }
.cs-who-a.on .cs-ava { opacity: 1; box-shadow: 0 0 0 2px #141519, 0 0 0 4px #1f6fe0; }
.cs-who-a.add .cs-ava { opacity: 1; background: transparent; box-shadow: inset 0 0 0 1.5px #3c3d45; color: #b9bac2; }
.cs-tick {
  position: absolute; left: -3px; top: -3px; width: 20px; height: 20px; border-radius: 50%;
  display: none; place-items: center; background: #1f6fe0; color: #fff; box-shadow: 0 0 0 2px #141519;
}
.cs-tick .mi { width: 12px; height: 12px; margin: 0; }
.cs-who-a.on .cs-tick { display: grid; }
.cs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-chip {
  height: 36px; padding: 0 14px; border: 0; border-radius: 999px;
  background: #1c1d23; color: #d8d9df; font-size: 13.5px; font-weight: 700; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
.cs-chip.on { background: #f5f6f8; color: #000; box-shadow: none; }
/* Pick…: the date and time, in a field the width of the sheet. An iPhone's date box has
   a width of its own and spilled off the screen at width: 100% plus padding; inside this
   field it can only shrink (min-width: 0), and it reads as the light sheet's other fields */
.cs-dt-wrap { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 100%; box-sizing: border-box; height: 52px; margin-top: 10px; padding: 0 14px;
  border-radius: 14px; border: 1.5px solid #1f6fe0; background: #f6f9ff; overflow: hidden; cursor: pointer; }
.cs-dt-wrap > .mi { flex: none; width: 20px; height: 20px; margin: 0; color: #1f6fe0; }
.cs-dt { flex: 1 1 auto; display: block; min-width: 0; width: 100%; max-width: 100%; height: 100%; margin: 0; padding: 0; border: 0; outline: none;
  background: transparent; color: #0f1115; font: inherit; font-size: 16px; font-weight: 650; text-align: left;
  -webkit-appearance: none; appearance: none; }
.cs-dt::-webkit-date-and-time-value { text-align: left; margin: 0; }
.cs-dt::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
.cs-when-is {
  display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 12px 14px; border-radius: 15px;
  background: rgba(31,111,224,.13); color: #e0e6ff; font-size: 14px; font-weight: 700;
}
.cs-when-is .mi { width: 18px; height: 18px; margin: 0; flex: none; }
.cs-plan { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cs-plan li { display: flex; align-items: center; gap: 11px; }
.cs-plan-pic { flex: none; width: 34px; height: 54px; border-radius: 8px; background: #23242b center / cover no-repeat; }
.cs-plan b { display: block; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-plan small { font-size: 12.5px; font-weight: 650; color: #b4bfff; }
.cs-plan li > span:last-child { min-width: 0; }
.cs-btn {
  height: 52px; padding: 0 18px; border: 0; border-radius: 17px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 16px; font-weight: 800; letter-spacing: -.1px; cursor: pointer;
}
.cs-btn .mi { width: 19px; height: 19px; margin: 0; }
.cs-btn.primary { background: #1f6fe0; color: #fff; box-shadow: 0 8px 24px rgba(31,111,224,.45); }
.cs-btn.primary:disabled { opacity: .42; box-shadow: none; cursor: default; }
.cs-btn.ghost { background: #23242b; color: #fff; }
.cs-btn.danger { background: transparent; color: #ff6b61; height: 46px; font-size: 15px; }
.cs-btn.wide { width: 100%; }
.cs-actions { display: flex; gap: 10px; margin-bottom: 4px; }
.cs-actions .cs-btn { flex: 1; }
.cs-hint { margin: 8px 0 0; text-align: center; font-size: 12.5px; color: #8a8d97; }
.cs-connect-cta {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 13px 14px;
  border: 0; border-radius: 17px; background: #1c1d23; color: #fff; text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
.cs-connect-cta > span:not(.cs-mark) { flex: 1; min-width: 0; }
.cs-connect-cta b { display: block; font-size: 15px; }
.cs-connect-cta small { font-size: 12.5px; color: #9b9ea8; }
.cs-connect-cta > .mi { width: 18px; height: 18px; margin: 0; color: #8a8d97; }

/* minmax(0, …): a 1fr column will not shrink below its longest name, and three 370px columns showed one video and a sliver */
.cs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.cs-g { position: relative; min-width: 0; padding: 0; border: 0; background: none; color: #fff; text-align: left; cursor: pointer; }
.cs-g-pic { display: block; aspect-ratio: 9 / 14; border-radius: 13px; background: linear-gradient(160deg, #23242b, #17181d) center / cover no-repeat; transition: box-shadow .15s; }
.cs-g-name { display: block; margin-top: 5px; font-size: 11.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-g .cs-tick { left: auto; right: 6px; top: 6px; box-shadow: 0 0 0 2px rgba(0,0,0,.45); }
.cs-g.on .cs-g-pic { box-shadow: 0 0 0 3px #1f6fe0; }
.cs-g.on .cs-tick { display: grid; }

.cs-plats { display: flex; flex-direction: column; gap: 8px; }
.cs-plat { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 17px; background: #1c1d23; }
.cs-plat-tx { flex: 1; min-width: 0; }
.cs-plat-tx b { display: block; font-size: 15px; }
.cs-plat-tx small { display: block; font-size: 12.5px; color: #9b9ea8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-plat.linked .cs-plat-tx small { color: #4ade80; }
.cs-mini {
  flex: none; height: 34px; padding: 0 14px; border: 0; border-radius: 11px;
  display: inline-flex; align-items: center; gap: 6px;
  background: #2c2d34; color: #ececf1; font-size: 13.5px; font-weight: 750; text-decoration: none; cursor: pointer;
}
.cs-mini .mi { width: 15px; height: 15px; margin: 0; }
.cs-mini.accent { background: #1f6fe0; color: #fff; }
.cs-mini:disabled { opacity: .38; cursor: default; }
.cs-key { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; padding: 13px; border-radius: 17px; background: #1c1d23; }
.cs-key-tx { flex: 1; min-width: 170px; }
.cs-key-tx b { display: block; font-size: 14.5px; }
.cs-key-tx small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.38; color: #9b9ea8; }
.cs-key.set .cs-key-tx small { color: #4ade80; }
.cs-key-in { flex-basis: 100%; display: flex; gap: 8px; }
.cs-key-in .cs-input { flex: 1; min-width: 0; }
.cs-key-in .cs-btn { height: 48px; font-size: 15px; }
.cs-steps { margin: 0 0 8px; padding-left: 22px; color: #c9cad1; font-size: 13.5px; line-height: 1.6; }
.cs-steps a, .cs-note a { color: #b4bfff; }
.cs-note { margin: 0 0 12px; padding: 11px 13px; border-radius: 13px; background: rgba(31,111,224,.13); color: #e0e6ff; font-size: 13.5px; line-height: 1.45; }
.cs-note.good { background: rgba(48,209,88,.13); color: #c3f7d3; }
.cs-note.bad { background: rgba(255,69,58,.13); color: #ffcbc6; }
.cs-note.warn { background: rgba(255,179,64,.13); color: #ffe3b3; }
.cs-note .mi { width: 15px; height: 15px; margin: 0 4px -2px 0; }
/* Accounts: the one big thing to do next */
.cs-setup { display: flex; flex-direction: column; gap: 10px; margin: 2px 0 6px; }
.cs-wide { width: 100%; justify-content: center; text-decoration: none; }
.cs-big { height: 56px; font-size: 17px; font-weight: 750; }
.cs-step { display: flex; gap: 12px; align-items: flex-start; margin-top: 6px; }
.cs-step-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(31,111,224,.25); color: #e0e6ff; font-size: 14px; font-weight: 800; }
.cs-step-tx > b { display: block; font-size: 15.5px; }
.cs-step-tx small b { color: #e6e6ea; }
.cs-step-tx small { display: block; margin-top: 2px; color: #9b9ea8; font-size: 13px; line-height: 1.42; }
.cs-setup-sub { color: #9b9ea8; font-size: 13px; line-height: 1.42; text-align: center; }
.cs-picks { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.cs-pick { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1.5px solid #34353d; background: transparent; color: #8a8d97; font-size: 14px; font-weight: 650; opacity: .6; }
.cs-pick.on { border-color: #1f6fe0; color: #fff; background: rgba(31,111,224,.14); opacity: 1; }
.cs-pick .cs-mark, .cs-pick > :first-child { flex: none; }
.cs-more { display: block; margin: 16px auto 0; padding: 8px 12px; border: 0; background: transparent; color: #a99cf0; font-size: 14px; font-weight: 650; }
.cs-spin { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid rgba(165,180,252,.3); border-top-color: #8ec0ff; animation: ciSpin .8s linear infinite; }

.cs-detail .cs-video { display: block; width: 100%; max-height: 44vh; border-radius: 17px; background: #000; object-fit: contain; }
.cs-d-when { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 14px; font-weight: 700; color: #e0e6ff; }
.cs-d-when .mi { width: 17px; height: 17px; margin: 0; }
.cs-d-when .cs-state { margin-left: auto; }
.cs-d-title { margin: 10px 0 6px; font-size: 19px; font-weight: 800; letter-spacing: -.25px; }
.cs-d-cap { margin: 0; white-space: pre-wrap; font-size: 14px; line-height: 1.52; color: #c9cad1; -webkit-user-select: text; user-select: text; }
.cs-d-accts { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cs-d-accts li { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 15px; background: #1c1d23; }
.cs-d-accts li .cs-mark { width: 30px; height: 30px; }
.cs-d-accts li > span:last-child { min-width: 0; }
.cs-d-accts b { display: block; font-size: 14px; }
.cs-d-accts small { display: block; font-size: 12.5px; line-height: 1.35; color: #9b9ea8; }
.cs-d-accts small .mi { width: 13px; height: 13px; margin: 0 0 0 3px; }
.cs-d-accts li.ok small { color: #4ade80; }
.cs-d-accts li.bad small { color: #ff8a80; }
.cs-d-accts li.warn small { color: #ffbe55; }
.cs-d-accts a { color: inherit; text-decoration: none; }
.cs-d-err { margin: 12px 0 0; padding: 11px 13px; border-radius: 13px; background: rgba(255,69,58,.11); color: #ffcbc6; font-size: 13px; line-height: 1.45; }

/* a wide screen: the same rooms, in a comfortable column */
@media (min-width: 901px) {
  /* (Home is white at every width — CapCut's way; Posts and Projects keep the dark) */
  body.mw-cloud.mw-sched .cloud-sched, body.mw-cloud.mw-projects .cloud-proj { background: radial-gradient(1200px 600px at 80% -20%, rgba(31,111,224,.18), transparent 60%), #08090c; }
  .ch-top, .cs-top { max-width: 792px; width: 100%; margin: 0 auto; }
  .ch-cards-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .cs-tabs { background: #08090c; }
}

/* ------------------------------------------------ watching a file, in the app */
.cloud-viewer {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; flex-direction: column;
  background: #000; color: #fff;
  opacity: 0; transition: opacity .2s ease;
}
.cloud-viewer.on { opacity: 1; }
.cv-top {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top) + 8px) 14px 8px 8px;
}
.cv-btn { flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; margin: 0;
  background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 50%; cursor: pointer; }
.cv-btn .mi { width: 22px; height: 22px; margin: 0; }
.cv-name { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-stage { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; padding: 0 8px; }
.cv-media { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 12px; background: #111; }
.cv-acts {
  flex: none; display: flex; gap: 10px; justify-content: center;
  padding: 12px 16px calc(env(safe-area-inset-bottom) + 12px);
}
.cv-act {
  flex: 1 1 0; min-width: 0; max-width: 180px; height: 52px; margin: 0; padding: 0 8px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #1d1e24; color: #fff; border: 1px solid #2a2b32; border-radius: 14px;
  font: 600 14px/1.1 -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, sans-serif; cursor: pointer; white-space: nowrap;
}
.cv-act .mi { width: 20px; height: 20px; margin: 0; flex: none; }
.cv-act.cv-primary { background: #1f6fe0; border-color: transparent; box-shadow: 0 4px 18px rgba(31,111,224, .45); }
.cv-act:active { filter: brightness(.88); }
/* Save shows every step on the button itself */
.cv-save { position: relative; overflow: hidden; transition: flex-grow .25s ease, background-color .2s; }
.cv-save > * { position: relative; z-index: 1; }
.cv-save .cv-fill { position: absolute; z-index: 0; left: 0; top: 0; bottom: 0; width: 0; background: rgba(31,111,224, .55); transition: width .3s ease; pointer-events: none; }
.cv-save:not(.cv-loading):not(.cv-sharing) .cv-fill { display: none; }
.cv-save.cv-loading, .cv-save.cv-sharing, .cv-save.cv-ready, .cv-save.cv-fail { flex-grow: 2; max-width: none; }
.cv-save.cv-loading { font-variant-numeric: tabular-nums; }
.cv-save.cv-ready { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); border-color: transparent; box-shadow: 0 4px 18px rgba(34, 197, 94, .45); animation: cv-pulse 1.4s ease-in-out infinite; }
.cv-save.cv-done { border-color: rgba(34, 197, 94, .6); color: #86efac; }
.cv-save.cv-fail { border-color: rgba(245, 158, 11, .7); color: #fcd34d; }
@keyframes cv-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
.cp-saveall .sa-list { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 8px; }
.sa-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; background: rgba(255,255,255,.05); }
.sa-pic { flex: none; width: 40px; height: 56px; border-radius: 8px; background: rgba(255,255,255,.08) center/cover no-repeat; }
.sa-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sa-tx b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-tx small { font-size: 12px; opacity: .7; font-variant-numeric: tabular-nums; }
.sa-st { flex: none; width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.18); }
.sa-row[data-st="loading"] .sa-st { background: #4d95ef; animation: cv-pulse 1s ease-in-out infinite; }
.sa-row[data-st="ready"] .sa-st { background: #4d95ef; }
.sa-row[data-st="done"] .sa-st { background: #22c55e; }
.sa-row[data-st="done"] small { color: #86efac; opacity: 1; }
.sa-row[data-st="fail"] .sa-st { background: #f59e0b; }
.cp-saveall .sa-go, .sa-all { width: 100%; max-width: none; min-height: 52px; justify-content: center; }
.sa-all { margin: 0 0 12px; }
.cv-q { flex: none; display: flex; gap: 10px; margin: 8px 16px 0; animation: cv-q-in .2s ease; }
.cv-q-b { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: #fff; font: inherit; cursor: pointer; }
.cv-q-b b { font-size: 15px; font-weight: 700; }
.cv-q-b small { font-size: 12px; opacity: .75; }
.cv-q-b.cv-q-hd { background: linear-gradient(135deg, #1f6fe0 0%, #4338ca 100%); border-color: transparent; box-shadow: 0 4px 16px rgba(31,111,224, .4); }
.cv-q-b:active { transform: scale(.97); }
@keyframes cv-q-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cv-save-note { flex: none; margin: 0 16px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.08);
  font: 500 13.5px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, sans-serif; color: #e5e7eb; text-align: center; }
.cv-save-note.hidden { display: none; }

/* ------------------------------------------------ your own space: signing in */
.cg-tabs { display: flex; gap: 4px; padding: 4px; margin: 0 0 14px; background: var(--bg-3); border: 1px solid var(--border); border-radius: 12px; }
.cg-tabs.hidden { display: none; }
.cg-tab { flex: 1 1 0; height: 38px; margin: 0; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--muted);
  font: 600 14px/1 inherit; cursor: pointer; }
.cg-tab.on { background: #2a2c38; color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.cg-note { margin: -4px 0 12px; font-size: 12.5px; line-height: 1.45; color: #8ec0ff; text-align: left; }
.cloud-gate-box #cloudName, .cloud-gate-box #cloudPw, .cloud-gate-box #cloudPass {
  width: 100%; margin: 0 0 12px; background: var(--bg-3); color: var(--text);
  border: 1px solid var(--border); border-radius: 11px; padding: 13px 14px; font-size: 16px; text-align: left;
}
.cloud-gate-box #cloudName:focus, .cloud-gate-box #cloudPw:focus, .cloud-gate-box #cloudPass:focus { outline: none; border-color: var(--primary); }
.cg-create { display: none; }
.cloud-gate-box.mode-create .cg-create { display: block; }

/* ------------------------------------------------ your own space: the menu */
.ch-me b { font-size: 16px; font-weight: 800; line-height: 1; color: #fff; }
.ch-round.ch-me { background: linear-gradient(180deg, #5658d6, #4648be); }
.pf-me { display: flex; align-items: center; gap: 12px; padding: 4px 2px 14px; }
.pf-ava { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(180deg, #5658d6, #4648be); color: #fff; font-weight: 800; font-size: 20px; }
.pf-ava.sm { width: 34px; height: 34px; font-size: 15px; }
.pf-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pf-tx b { font-size: 17px; }
.pf-tx small { color: var(--ph-muted, #9b9ea8); font-size: 12.5px; line-height: 1.35; }
.pf-sec { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-top: 1px solid var(--ph-line, #2a2b32); }
.pf-sec > b { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--ph-muted, #9b9ea8); }
.pf-in { width: 100%; margin: 0; height: 44px; padding: 0 12px; font-size: 16px; border-radius: 10px;
  background: var(--ph-panel-2, #1d1e24); color: var(--ph-text, #fff); border: 1px solid var(--ph-line, #2a2b32); }
.pf-btn { height: 44px; margin: 0; border: 0; border-radius: 12px; font: 700 14.5px/1 inherit; color: #fff;
  background: #1f6fe0; cursor: pointer; }
.pf-person { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.pf-pname { flex: 1 1 auto; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-mini { flex: none; height: 34px; margin: 0; padding: 0 12px; border-radius: 10px; font: 600 13px/1 inherit; cursor: pointer;
  background: var(--ph-panel-2, #1d1e24); color: var(--ph-text, #fff); border: 1px solid var(--ph-line, #2a2b32); }
.pf-mini.danger { color: #ff8a8a; border-color: rgba(255, 99, 99, .4); }
.pf-empty { color: var(--ph-muted, #9b9ea8); font-size: 13px; line-height: 1.45; }
.pf-out { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; margin: 10px 0 4px;
  border-radius: 12px; font: 700 15px/1 inherit; cursor: pointer; background: transparent; color: #ff8a8a; border: 1px solid rgba(255, 99, 99, .4); }
.pf-out .mi { width: 18px; height: 18px; margin: 0; }

/* ============================== AI Montage ============================== */
/*
 * ►► THE AI MONTAGE, CALM AND CLEAR (cloud-social.js mtPaint). ◄◄ Two picture
 * cards, the videos, one Settings-style list. Its own few tokens: a card one
 * step lighter than the sheet, hairlines, three greys of text, one gradient.
 * (Every `font:` here is spelt out: "font: 600 13px/1 inherit" is not CSS —
 * the whole line was dropped, and the old chips and buttons never got their
 * weight or size.)
 */
.cp-montage {
  --mt-card: #1c1d23;
  --mt-line: rgba(255, 255, 255, .08);
  --mt-tx: #f5f6f8;
  --mt-tx2: #aeb0b9;
  --mt-tx3: #8b8d96;
  --mt-grad: var(--brand-grad);
  --mt-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 4.5 6.8 4.5c2.2 0 3.6 1.2 5.2 3 1.6-1.8 3-3 5.2-3 3.8 0 5.9 3.9 4.4 7.3C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E");
  background: radial-gradient(130% 60% at 50% -12%, rgba(77,149,239, .16), transparent 62%), #141519;
}
.cp-montage .cp-body { padding-bottom: 10px; }
.cp-montage .cp-foot { padding: 10px 16px 12px; }
.mt-lead { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; font-size: 13.5px; line-height: 1.45;
  color: var(--ph-text, #fff); }
.mt-lead small { color: var(--ph-muted, #9b9ea8); }
.mt-lead .mi { width: 18px; height: 18px; margin: 0; color: #bfdbfe; }
.mt-sec { padding: 12px 0; border-top: 1px solid var(--ph-line, #2a2b32); }
.cp-montage .mt-sec { padding: 8px 0 6px; border-top: 0; }
.mt-sec h3 { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 9px; font-size: 13px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ph-muted, #9b9ea8); }
.mt-sec h3 small { text-transform: none; letter-spacing: 0; font-weight: 500; }
/* the three steps' headings: a quiet number, the question, and how many / "optional" */
.mt-sec h3.mt-h { align-items: center; justify-content: flex-start; gap: 10px; margin: 2px 2px 11px; font-size: 17px; font-weight: 750;
  letter-spacing: -.2px; text-transform: none; color: var(--mt-tx); }
.mt-h i { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 800;
  color: #fff; background: rgba(255, 255, 255, .12); }
.mt-h small { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--mt-tx3); }

/* 1 — WHAT ARE YOU MAKING? Two picture cards; the chosen one ringed, ticked and alive */
.mt-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mt-kind { position: relative; display: flex; flex-direction: column; margin: 0; padding: 0; overflow: hidden; text-align: left; cursor: pointer;
  border: 0; border-radius: 20px; color: var(--mt-tx); background: var(--mt-card); box-shadow: inset 0 0 0 1px var(--mt-line);
  -webkit-tap-highlight-color: transparent; transition: transform .18s ease, box-shadow .25s ease; }
.mt-kind:active { transform: scale(.97); }
.mt-kind.on { outline: 2px solid #fff; outline-offset: 3px; box-shadow: inset 0 0 0 1px var(--mt-line), 0 16px 36px rgba(77,149,239, .26); }
.mt-kind-t { display: flex; flex-direction: column; gap: 3px; padding: 10px 13px 13px; }
.mt-kind-t b { font-size: 17px; font-weight: 750; letter-spacing: -.2px; }
.mt-kind-t small { font-size: 12.5px; line-height: 1.35; color: var(--mt-tx2); }
.mt-tick { position: absolute; top: 9px; right: 9px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0, 0, 0, .18); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8); }
.mt-tick .mi { width: 14px; height: 14px; margin: 0; color: #1a5fc4; opacity: 0; }
.mt-kind.on .mt-tick { background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.mt-kind.on .mt-tick .mi { opacity: 1; }
.mt-art { position: relative; display: block; height: 90px; overflow: hidden; transition: filter .3s ease; }
.mt-kind:not(.on) .mt-art { filter: saturate(.35) brightness(.72); }
.mt-art-v { background: radial-gradient(130% 140% at 0% 0%, #fde68a 0%, #fbbf24 28%, #f97316 66%, #ea580c 100%); }
.mt-art-s { background: radial-gradient(130% 140% at 100% 0%, #67e8f9 0%, #3b82f6 45%, #1a5fc4 80%, #164a99 100%); }
/* Viral: three reels fanned out, the captions lit word by word, and the likes */
.mt-ph { position: absolute; left: 50%; top: 12px; width: 38px; height: 66px; margin-left: -19px; border-radius: 10px; box-sizing: border-box;
  background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 10px 22px rgba(20,20,90, .28); }
.mt-ph-l { transform: translate(-32px, 8px) rotate(-14deg) scale(.86); }
.mt-ph-r { transform: translate(32px, 8px) rotate(14deg) scale(.86); }
.mt-ph-c { z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding-top: 6px;
  background: rgba(255, 255, 255, .26); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.mt-ph-c .mi { width: 20px; height: 20px; margin: 0; color: #fff; }
.mt-cap { display: flex; gap: 2px; }
.mt-cap i { display: block; width: 8px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .92); }
.mt-cap i:nth-child(2) { width: 11px; background: #1e1b4b; }
.mt-likes { position: absolute; left: 9px; top: 9px; display: flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px 0 6px; border-radius: 10px;
  font-size: 10.5px; font-weight: 800; line-height: 1; color: #fff; background: rgba(0, 0, 0, .22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mt-likes i { width: 10px; height: 9px; background: #ff453a; -webkit-mask: var(--mt-heart) center / contain no-repeat; mask: var(--mt-heart) center / contain no-repeat; }
/* Standard: a film strip of clips and photos, and the music they are cut to */
.mt-film { position: absolute; left: -8px; right: -8px; top: 17px; height: 44px; display: flex; gap: 5px; padding: 9px 8px; box-sizing: border-box;
  background: rgba(8, 10, 40, .5); transform: rotate(-7deg); box-shadow: 0 10px 22px rgba(10, 10, 60, .3); }
.mt-film::before, .mt-film::after { content: ''; position: absolute; left: 0; right: 0; height: 3px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .6) 0 4px, transparent 4px 9px); }
.mt-film::before { top: 3px; }
.mt-film::after { bottom: 3px; }
.mt-film i { flex: 1; border-radius: 3px; }
.mt-film i:nth-child(1) { background: linear-gradient(135deg, #fde68a, #fbbf24); }
.mt-film i:nth-child(2) { background: linear-gradient(135deg, #a7f3d0, #22d3ee); }
.mt-film i:nth-child(3) { background: linear-gradient(135deg, #8ec0ff, #93c5fd); }
.mt-film i:nth-child(4) { background: linear-gradient(135deg, #fecaca, #f97316); }
.mt-eq { position: absolute; left: 12px; bottom: 9px; display: flex; align-items: flex-end; gap: 2px; height: 15px; }
.mt-eq i { width: 3px; height: 100%; border-radius: 2px; background: #fff; transform-origin: bottom; }
.mt-eq i:nth-child(1) { transform: scaleY(.45); }
.mt-eq i:nth-child(2) { transform: scaleY(.9); }
.mt-eq i:nth-child(3) { transform: scaleY(.6); }
.mt-eq i:nth-child(4) { transform: scaleY(1); }
.mt-eq i:nth-child(5) { transform: scaleY(.35); }
.mt-art-note { position: absolute; right: 9px; bottom: 7px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .22); }
.mt-art-note .mi { width: 15px; height: 15px; margin: 0; color: #fff; }
/* the chosen card comes alive: the captions lit word by word, the flame breathing, the music playing */
@keyframes mt-word { 0%, 32% { background: #1e1b4b; } 34%, 100% { background: rgba(255, 255, 255, .92); } }
@keyframes mt-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes mt-eqk { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.mt-kind.on .mt-cap i { animation: mt-word 1.8s linear infinite; }
.mt-kind.on .mt-cap i:nth-child(2) { animation-delay: -1.2s; }
.mt-kind.on .mt-cap i:nth-child(3) { animation-delay: -.6s; }
.mt-kind.on .mt-ph-c .mi { animation: mt-breathe 1.6s ease-in-out infinite; }
.mt-kind.on .mt-eq i { animation: mt-eqk .9s ease-in-out infinite; }
.mt-kind.on .mt-eq i:nth-child(2) { animation-delay: -.3s; }
.mt-kind.on .mt-eq i:nth-child(3) { animation-delay: -.6s; }
.mt-kind.on .mt-eq i:nth-child(4) { animation-delay: -.15s; }
.mt-kind.on .mt-eq i:nth-child(5) { animation-delay: -.45s; }

/* 2 — YOUR VIDEOS: one inviting card while there are none, then their pictures */
.mt-empty { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 20px;
  background: var(--mt-card); box-shadow: inset 0 0 0 1px var(--mt-line); }
.mt-empty-top { display: flex; align-items: center; gap: 14px; }
.mt-empty-ic { flex: none; width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; color: #fff;
  background: var(--mt-grad); box-shadow: 0 10px 22px rgba(77,149,239, .36), inset 0 1px 0 rgba(255, 255, 255, .3); }
.mt-empty-ic .mi { width: 24px; height: 24px; margin: 0; }
.mt-empty-t { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mt-empty b { font-size: 16px; font-weight: 700; letter-spacing: -.1px; color: var(--mt-tx); }
.mt-empty small { font-size: 13px; line-height: 1.38; color: var(--mt-tx2); }
.mt-empty-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; margin: 0; padding: 0 12px; border: 0; border-radius: 15px; cursor: pointer;
  font-size: 15.5px; font-weight: 650; color: var(--mt-tx); background: rgba(255, 255, 255, .09); -webkit-tap-highlight-color: transparent; transition: transform .15s ease, background .2s ease; }
.mt-btn:active { transform: scale(.97); background: rgba(255, 255, 255, .14); }
.mt-btn .mi { width: 19px; height: 19px; margin: 0; }
.mt-btn-hi { color: #111; background: #fff; }
.mt-btn-hi:active { background: #e7e7ec; }
.mt-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mt-tile { position: relative; aspect-ratio: 9 / 14; border-radius: 14px; overflow: hidden; background: var(--mt-card, #1d1e24); box-shadow: inset 0 0 0 1px var(--mt-line, #2a2b32); }
.mt-tile img, .mt-tile video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
/* hold and drag to reorder */
.mt-tile { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; transition: transform .12s ease, outline-color .12s; }
.mt-tile.mt-lift { z-index: 5; transition: none; pointer-events: none; box-shadow: 0 12px 30px rgba(0,0,0,.55), 0 0 0 2px var(--ph-accent, #1f6fe0); opacity: .95; }
.mt-tile.mt-target { outline: 2px dashed var(--ph-accent-text, #8ec0ff); outline-offset: 2px; }
.mt-num { position: absolute; left: 6px; top: 6px; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 11px;
  font-size: 12px; font-weight: 800; line-height: 22px; text-align: center; color: #fff; background: var(--mt-grad); box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.mt-load { position: absolute; inset: 0; background: linear-gradient(110deg, #1d1e24 30%, #2a2b33 50%, #1d1e24 70%); background-size: 200% 100%; animation: mt-shine 1.2s linear infinite; }
@keyframes mt-shine { to { background-position: -200% 0; } }
.mt-addt { aspect-ratio: 9 / 14; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; margin: 0; padding: 0; border: 0; border-radius: 14px; cursor: pointer;
  font-size: 12px; font-weight: 650; color: var(--mt-tx2); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--mt-line); -webkit-tap-highlight-color: transparent; }
.mt-addt:active { background: rgba(255, 255, 255, .09); }
.mt-addt-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .1); }
.mt-addt[data-mt="add"] .mt-addt-ic { background: var(--mt-grad); }
.mt-addt-ic .mi { width: 18px; height: 18px; margin: 0; }
.mt-x { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; margin: 0; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: #fff; background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.mt-x .mi { width: 12px; height: 12px; margin: 0; }
.mt-part { position: absolute; left: 5px; right: 5px; bottom: 5px; height: 26px; margin: 0; padding: 0 6px; border: 0; border-radius: 9px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden;
  background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.mt-part .mi { flex: none; width: 13px; height: 13px; margin: 0; }
.mt-part span { overflow: hidden; text-overflow: ellipsis; }
.mt-part.on { background: var(--mt-grad); }
.mt-dur { position: absolute; left: 6px; bottom: 6px; display: flex; align-items: center; gap: 3px; height: 18px; padding: 0 6px; border-radius: 6px;
  font-size: 10.5px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, .45); }
.mt-dur .mi { width: 9px; height: 9px; margin: 0; }

/* 3 — FINE-TUNE: one list, as the phone's own Settings — a coloured icon, the name, what it is set to, › */
.mt-group { border-radius: 18px; overflow: hidden; background: var(--mt-card); box-shadow: inset 0 0 0 1px var(--mt-line); }
.mt-acc > summary, .mt-swrow { display: flex; align-items: center; gap: 12px; min-height: 54px; margin: 0; padding: 0 14px; list-style: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.mt-acc > summary::-webkit-details-marker { display: none; }
.mt-acc > summary::marker { content: ''; }
.mt-acc > summary:active { background-color: rgba(255, 255, 255, .04); }
/* hairlines between the rows, from the name on */
.mt-group > * + * > summary, .mt-group > * + .mt-swrow {
  background-image: linear-gradient(var(--mt-line), var(--mt-line)); background-repeat: no-repeat; background-size: calc(100% - 56px) 1px; background-position: 56px 0; }
.mt-ic { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; }
.mt-ic .mi { width: 17px; height: 17px; margin: 0; }
.mt-ic-music { background: linear-gradient(180deg, #ff7a45, #ff3b30); }
.mt-ic-len { background: linear-gradient(180deg, #ffb340, #ff9500); }
.mt-ic-shape { background: linear-gradient(180deg, #4aa3ff, #0a7aff); }
.mt-ic-voice { background: linear-gradient(180deg, #d17bff, #af52de); }
.mt-ic-about { background: linear-gradient(180deg, #4fd1e8, #17a2c0); }
.mt-ic-look { background: linear-gradient(180deg, #8b88ff, #5856d6); }
.mt-ic-order { background: linear-gradient(180deg, #4ade80, #22c55e); }
.mt-ic-caps { color: #1c1c1e; background: linear-gradient(180deg, #ffd84d, #ffbf00); }
.mt-acc summary h3, .mt-swrow .mt-lbl { flex: none; margin: 0; font-size: 16px; font-weight: 500; letter-spacing: -.1px; text-transform: none; color: var(--mt-tx); }
.mt-val { flex: 1; min-width: 0; text-align: right; font-size: 15px; color: var(--mt-tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-chev { flex: none; width: 7px; height: 7px; margin: 0 3px 0 0; border-right: 2px solid var(--mt-tx3); border-bottom: 2px solid var(--mt-tx3);
  transform: rotate(-45deg); transition: transform .25s ease; }
.mt-acc[open] > summary .mt-chev { transform: rotate(45deg); margin-top: -4px; }
.mt-acc-in { padding: 2px 14px 16px; }
.mt-acc.mt-opening .mt-acc-in { animation: mt-open .3s cubic-bezier(.2, .9, .3, 1); }
@keyframes mt-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.mt-swrow { cursor: default; }
.mt-swrow .mt-lbl { flex: 1; }
/* an on/off, as the phone's own switch */
.mt-sw { flex: none; position: relative; width: 51px; height: 31px; margin: 0; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  -webkit-appearance: none; appearance: none; background: rgba(120, 120, 128, .36); transition: background .25s ease; }
.mt-sw::before { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 3px 1px rgba(0, 0, 0, .06); transition: transform .25s cubic-bezier(.3, .7, .4, 1); }
.mt-sw:checked { background: #4d95ef; }
.mt-sw:checked::before { transform: translateX(20px); }
.mt-sw:focus { outline: none; border: 0; box-shadow: none; }
.mt-sw:focus-visible { box-shadow: 0 0 0 3px rgba(77,149,239, .45); }
.mt-swline { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--mt-line);
  font-size: 15px; color: var(--mt-tx); }
/* a choice of a few: a segmented control */
.mt-seg, .mt-sc { display: flex; gap: 2px; padding: 2px; border-radius: 10px; background: rgba(118, 118, 128, .24); }
.mt-seg button, .mt-sc button { flex: 1; min-width: 0; height: 32px; margin: 0; padding: 0 4px; border: 0; border-radius: 8px; cursor: pointer; background: transparent;
  font-size: 13.5px; font-weight: 600; color: var(--mt-tx, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent; transition: background .2s ease; }
.mt-seg button.on, .mt-sc button.on { background: #636366; box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04); }
/* chips: grey, and white when chosen */
.mt-row, .mt-songs { display: flex; flex-wrap: wrap; gap: 8px; }
.mt-chip { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; margin: 0; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--mt-tx, #fff); background: rgba(255, 255, 255, .09);
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-tap-highlight-color: transparent;
  transition: background .2s ease, color .2s ease, transform .15s ease; }
.mt-chip:active { transform: scale(.96); }
.mt-chip.on { color: #111; background: #fff; box-shadow: none; }
.mt-moods { margin-top: 12px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.mt-moods::-webkit-scrollbar { display: none; }
.mt-moods .mt-chip { flex: 0 0 auto; height: 32px; }
.mt-looks .mt-chip { padding-left: 10px; }
.mt-dot { flex: none; width: 15px; height: 15px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.mt-dot-hype { background: linear-gradient(135deg, #ffb347, #ff3b30); }
.mt-dot-worship { background: linear-gradient(135deg, #fde68a, #4d95ef); }
.mt-dot-emotional { background: linear-gradient(135deg, #93c5fd, #1f6fe0); }
.mt-dot-cinematic { background: linear-gradient(135deg, #2dd4bf, #f59e0b); }
.mt-dot-fun { background: linear-gradient(135deg, #fb923c, #facc15); }
/* the shape, drawn */
.mt-shapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mt-shape { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0; padding: 10px 4px 9px; border: 0; border-radius: 14px; cursor: pointer;
  color: var(--mt-tx); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--mt-line); -webkit-tap-highlight-color: transparent;
  transition: background .2s ease, box-shadow .2s ease; }
.mt-shape-pic { height: 38px; display: grid; place-items: center; margin-bottom: 5px; }
.mt-shape-pic i { display: block; box-sizing: border-box; border-radius: 4px; border: 2px solid rgba(255, 255, 255, .5); }
.mt-shape b { font-size: 12px; font-weight: 650; line-height: 1.2; text-align: center; }
.mt-shape small { font-size: 11px; color: var(--mt-tx3); }
.mt-shape.on { background: rgba(77,149,239, .16); box-shadow: inset 0 0 0 2px #4d95ef; }
.mt-shape.on .mt-shape-pic i { border-color: #fff; background: rgba(255, 255, 255, .2); }
.mt-custom { display: flex; gap: 10px; margin-top: 12px; }
.mt-custom label { display: flex; align-items: center; gap: 8px; height: 46px; margin: 0; padding: 0 14px; border-radius: 12px;
  background: rgba(255, 255, 255, .06); color: var(--mt-tx2); font-size: 14px; }
.mt-custom input { width: 54px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--mt-tx, #fff);
  font-size: 20px; font-weight: 700; line-height: 1; text-align: right; -webkit-user-select: text; user-select: text; }
.mt-custom input:focus { outline: none; box-shadow: none; }
.mt-hint { display: block; margin-top: 10px; font-size: 12.5px; line-height: 1.45; color: var(--mt-tx3, #9b9ea8); }
/* Background music: No music / Free songs / My songs, then a short list with ▶ to listen */
.mt-list { margin-top: 12px; border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--mt-line, #2a2b32); }
.mt-song { display: flex; align-items: center; gap: 12px; padding: 9px 12px; cursor: pointer; border-top: 1px solid var(--mt-line, #2a2b32); -webkit-tap-highlight-color: transparent; }
.mt-song:first-child { border-top: 0; }
.mt-song.on { background: rgba(77,149,239, .13); }
.mt-song-t { flex: 1; min-width: 0; }
.mt-song-t b { display: block; font-weight: 600; font-size: 14.5px; line-height: 1.25; color: var(--mt-tx, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-song-t small { display: block; margin-top: 2px; font-size: 12px; color: var(--mt-tx2, #9b9ea8); font-variant-numeric: tabular-nums; }
.mt-radio { flex: none; position: relative; width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .26); }
.mt-song.on .mt-radio { border: 0; background: var(--mt-grad); }
.mt-song.on .mt-radio::after { content: ''; position: absolute; left: 8px; top: 4.5px; width: 5px; height: 10px; box-sizing: border-box;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.mt-play { flex: none; position: relative; width: 34px; height: 34px; margin: 0; padding: 0; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  color: #fff; background: rgba(255, 255, 255, .1); }
.mt-play::before { content: ''; margin-left: 3px; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #fff; }
.mt-play.on { background: #fff; animation: mt-pulse 1.6s ease-in-out infinite; }
.mt-play.on::before { margin: 0; width: 10px; height: 12px; border: 0; background: linear-gradient(90deg, #111 0 3px, transparent 3px 7px, #111 7px 10px); }
@keyframes mt-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(77,149,239, .5); } 50% { box-shadow: 0 0 0 7px rgba(77,149,239, .12); } }
.mt-play-x { cursor: default; background: var(--mt-grad); }
.mt-play-x::before { display: none; }
.mt-play-x .mi { width: 16px; height: 16px; margin: 0; }
.mt-play-off { color: var(--mt-tx2); background: rgba(255, 255, 255, .08); }
.mt-more { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin: 0; padding: 12px; border: 0; border-top: 1px solid var(--mt-line, #2a2b32);
  background: transparent; cursor: pointer; font-size: 14px; font-weight: 600; color: #8ec0ff; }
.mt-more .mi { width: 15px; height: 15px; margin: 0; }
.mt-list .mt-more:first-child { border-top: 0; }
.mt-toggle { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 14px; color: var(--ph-text, #fff); }
.mt-toggle input { width: 20px; height: 20px; margin: 0; accent-color: #4d95ef; }
/* (an attribute-hidden row or toggle — the Viral Montage hides "keep the clips’ sound" and Order — must stay hidden) */
#cloudMontage [hidden] { display: none !important; }
.mt-brief { width: 100%; box-sizing: border-box; margin: 0; padding: 11px 12px; font-size: 16px; line-height: 1.4; border-radius: 12px; resize: none;
  color: var(--mt-tx, #fff); background: rgba(255, 255, 255, .06); border: 1px solid transparent; transition: border-color .2s ease, box-shadow .2s ease; }
.mt-brief:focus { outline: none; border-color: rgba(77,149,239, .7); box-shadow: 0 0 0 3px rgba(77,149,239, .2); }
.mt-brief::placeholder { color: var(--mt-tx3, #8b8d96); }
.mt-sec .mt-chip[data-mt-copy] { margin-top: 10px; }
/* "What's it about?": one box, and one row of ideas under it, swiped sideways */
.mt-ideas { display: flex; gap: 8px; margin: 10px 0 0; padding: 0 0 2px; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.mt-ideas::-webkit-scrollbar { display: none; }
.mt-ideas .mt-chip { flex: 0 0 auto; height: 32px; padding: 0 12px; font-size: 13px; scroll-snap-align: start; }
/* the one big button: it says what it will make; quiet until there is something to make it from */
.mt-go { position: relative; overflow: hidden; width: 100%; height: 54px; margin: 0; border: 0; border-radius: 17px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 17px; font-weight: 750; letter-spacing: -.2px; color: #fff;
  background: var(--mt-grad, linear-gradient(135deg, #38bdf8 0%, #4d95ef 52%, #1f6fe0 100%));
  box-shadow: 0 14px 30px rgba(77,149,239, .38), inset 0 1px 0 rgba(255, 255, 255, .25); -webkit-tap-highlight-color: transparent; transition: transform .15s ease; }
.mt-go:active { transform: scale(.98); }
.mt-go .mi { width: 20px; height: 20px; margin: 0; }
.mt-go::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 35%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent); transform: translateX(-130%) skewX(-18deg); animation: mt-sheen 4s ease-in-out infinite; }
@keyframes mt-sheen { 0%, 55% { transform: translateX(-130%) skewX(-18deg); } 100% { transform: translateX(370%) skewX(-18deg); } }
.mt-go:disabled { cursor: default; opacity: 1; color: rgba(255, 255, 255, .42); background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--mt-line, rgba(255, 255, 255, .08)); }
.mt-go:disabled::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  .mt-kind.on .mt-cap i, .mt-kind.on .mt-ph-c .mi, .mt-kind.on .mt-eq i, .mt-play.on, .mt-go::after, .mt-acc.mt-opening .mt-acc-in { animation: none; }
}
/*
 * ►► AI MONTAGE, LIGHT AND FLAT (CapCut's own sheets). ◄◄ "The buttons look
 * like every other AI-made app": no glow, no shine, no gradient or white pill
 * on black. White cards, black line icons, one black button for the thing to
 * do and grey ones for the rest — grey too while there is nothing to make yet.
 */
#cloudMontage {
  --mt-card: #fff; --mt-line: rgba(15, 23, 42, .09); --mt-tx: #111318; --mt-tx2: #5f6470; --mt-tx3: #8b909b;
  --mt-grad: #111318;
  background: #f6f7f9; color: #111318;
}
#cloudMontage .cp-grab { background: #d5d8de; }
#cloudMontage .cp-title { color: #111318; }
#cloudMontage .cp-x { color: #3b404c; background: #e9ebef; }
#cloudMontage .cp-foot { background: #f6f7f9; }
#cloudMontage .mt-h i { color: #111318; background: #e9ebef; }
#cloudMontage .mt-kind { background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .05), inset 0 0 0 1px var(--mt-line); }
#cloudMontage .mt-kind.on { outline: 2px solid #111318; outline-offset: 2px; box-shadow: 0 8px 22px rgba(15, 23, 42, .1), inset 0 0 0 1px var(--mt-line); }
#cloudMontage .mt-kind:not(.on) .mt-art { filter: saturate(.55) brightness(1.02); }
#cloudMontage .mt-kind.on .mt-tick { background: #111318; box-shadow: none; }
#cloudMontage .mt-kind.on .mt-tick .mi { color: #fff; }
#cloudMontage .mt-empty, #cloudMontage .mt-group { background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .05), inset 0 0 0 1px var(--mt-line); }
#cloudMontage .mt-empty-ic { color: #111318; background: #eef0f3; box-shadow: none; }
#cloudMontage .mt-btn { height: 46px; border-radius: 12px; font-size: 15px; font-weight: 600; color: #111318; background: #eef0f3; }
#cloudMontage .mt-btn:active { background: #e3e6ea; }
#cloudMontage .mt-btn-hi { color: #fff; background: #111318; }
#cloudMontage .mt-btn-hi:active { background: #2b2f37; }
#cloudMontage .mt-tile { background: #e9ebef; box-shadow: none; }
#cloudMontage .mt-addt { color: #5f6470; background: #fff; box-shadow: inset 0 0 0 1px var(--mt-line); }
#cloudMontage .mt-addt-ic { color: #111318; background: #eef0f3; }
#cloudMontage .mt-addt[data-mt="add"] .mt-addt-ic { color: #fff; background: #111318; }
/* the list: black line icons, no coloured squares */
#cloudMontage .mt-ic { width: 26px; height: 26px; color: #111318; background: none; box-shadow: none; }
#cloudMontage .mt-ic .mi { width: 22px; height: 22px; }
#cloudMontage .mt-group > * + * > summary, #cloudMontage .mt-group > * + .mt-swrow { background-position: 52px 0; background-size: calc(100% - 52px) 1px; }
#cloudMontage .mt-acc > summary:active { background-color: #f3f4f6; }
#cloudMontage .mt-chev { border-color: #b8bcc6; }
#cloudMontage .mt-seg, #cloudMontage .mt-sc { background: #eef0f3; }
#cloudMontage .mt-seg button, #cloudMontage .mt-sc button { color: #111318; }
#cloudMontage .mt-seg button.on, #cloudMontage .mt-sc button.on { background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .14), 0 0 0 .5px rgba(15, 23, 42, .06); }
#cloudMontage .mt-chip { color: #111318; background: #eef0f3; }
#cloudMontage .mt-chip.on { color: #fff; background: #111318; }
#cloudMontage .mt-dot { box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .15); }
#cloudMontage .mt-list { background: #fff; box-shadow: inset 0 0 0 1px var(--mt-line); }
#cloudMontage .mt-song.on { background: #f3f6ff; }
#cloudMontage .mt-play { color: #111318; background: #eef0f3; }
#cloudMontage .mt-play::before { border-color: transparent transparent transparent #111318; }
#cloudMontage .mt-play.on { background: #111318; animation: none; box-shadow: 0 0 0 3px rgba(17, 19, 24, .12); }
#cloudMontage .mt-play.on::before { background: linear-gradient(90deg, #fff 0 3px, transparent 3px 7px, #fff 7px 10px); }
#cloudMontage .mt-play-x { color: #fff; background: #111318; }
#cloudMontage .mt-play-off { color: #5f6470; background: #eef0f3; }
#cloudMontage .mt-radio { border-color: #c5c9d2; }
#cloudMontage .mt-more { color: #0b57d0; }
#cloudMontage .mt-sw { background: #e2e5ea; }
#cloudMontage .mt-sw:checked { background: #34c759; }
#cloudMontage .mt-shape { background: #fff; box-shadow: inset 0 0 0 1px var(--mt-line); }
#cloudMontage .mt-shape-pic i { border-color: #8b909b; }
#cloudMontage .mt-shape.on { background: #f3f6ff; box-shadow: inset 0 0 0 2px #111318; }
#cloudMontage .mt-shape.on .mt-shape-pic i { border-color: #111318; background: rgba(17, 19, 24, .08); }
#cloudMontage .mt-custom label { background: #eef0f3; }
#cloudMontage .mt-brief { color: #111318; background: #eef0f3; }
#cloudMontage .mt-brief:focus { border-color: #111318; box-shadow: 0 0 0 3px rgba(17, 19, 24, .1); }
#cloudMontage .me-banner { color: #111318; background: #fff; box-shadow: inset 0 0 0 1px var(--mt-line); }
#cloudMontage .me-banner-ic { background: #111318; }
#cloudMontage .me-banner small { color: #6b7280; }
/* the one button: black and flat */
#cloudMontage .mt-go { border-radius: 14px; font-size: 16.5px; font-weight: 650; letter-spacing: -.1px; color: #fff; background: #111318; box-shadow: none; }
#cloudMontage .mt-go::after { display: none; }
#cloudMontage .mt-go:active { background: #2b2f37; }
#cloudMontage .mt-go:disabled { color: #9aa0aa; background: #e9ebef; box-shadow: none; }
/* making it: the same screen on white */
#cloudMontage .mt-stage, #cloudMontage .mt-pct { color: #111318; }
#cloudMontage .mt-note { color: #6b7280; }
#cloudMontage .mt-bar { background: #e5e7eb; }
#cloudMontage .mt-bar i { background: #111318; }
#cloudMontage .mt-orb { background: #111318; box-shadow: none; }
.mt-run { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 34px 6px 26px; }
.mt-orb { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 34px; font-weight: 800; line-height: 1;
  background: conic-gradient(from 0deg, #3b82f6, #4d95ef, #4338ca, #3b82f6); animation: mt-spin 2.4s linear infinite;
  box-shadow: 0 0 40px rgba(77,149,239,.5); }
.mt-orb .mi { width: 36px; height: 36px; margin: 0; animation: mt-spin 2.4s linear infinite reverse; }
.mt-orb.bad { animation: none; background: linear-gradient(135deg, #f87171, #b91c1c); box-shadow: none; }
@keyframes mt-spin { to { transform: rotate(360deg); } }
.mt-stage { font-size: 17px; line-height: 1.35; color: var(--ph-text, #fff); }
.mt-bar { width: 100%; height: 8px; border-radius: 999px; overflow: hidden; background: var(--ph-panel-2, #1d1e24); }
.mt-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3b82f6, #4d95ef); transition: width .4s ease; }
/* the live progress: the bar is drawn by scaling (smooth, every frame) with the percentage beside it */
.mt-barrow { display: flex; align-items: center; gap: 12px; width: 100%; }
.mt-barrow .mt-bar { flex: 1; }
.mt-barrow .mt-bar i { width: 100%; transform-origin: left center; transform: scaleX(.02); transition: none; will-change: transform; border-radius: 0; }
.mt-pct { flex: 0 0 auto; min-width: 46px; text-align: right; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ph-text, #fff); }
.mt-note { color: var(--ph-muted, #9b9ea8); font-size: 13px; line-height: 1.45; max-width: 320px; }
.mt-concept { margin: 6px 0; font-size: 15px; line-height: 1.45; color: var(--ph-text, #fff); }
.mt-tip { margin: 8px 0 4px; font-size: 13.5px; line-height: 1.5; color: var(--ph-muted, #9b9ea8); }
@media (prefers-reduced-motion: reduce) { .mt-orb, .mt-orb .mi { animation: none; } }

.cj-server { display: block; margin-top: 10px; text-align: center; font-size: 12px; line-height: 1.45; color: var(--ph-muted, #9b9ea8); }

/* ------------------------------------------------ editing a made montage */
.me-lead { margin: 0 0 12px; }
.me-list { display: flex; flex-direction: column; gap: 10px; }
.me-shot { border: 1px solid var(--ph-line, #2a2b32); border-radius: 14px; background: var(--ph-panel-2, #1d1e24); padding: 10px; }
.me-shot.sel { border-color: var(--ph-accent, #1f6fe0); box-shadow: 0 0 0 1px var(--ph-accent, #1f6fe0) inset; }
.me-row { display: flex; align-items: center; gap: 10px; }
.me-n { flex: none; width: 24px; height: 24px; border-radius: 12px; display: grid; place-items: center; font-size: 12px; font-weight: 800; line-height: 1; color: #fff; background: var(--ph-accent-fill, #1f6fe0); }
.me-th { flex: none; width: 48px; height: 72px; border-radius: 8px; overflow: hidden; background: #111; }
.me-th img, .me-ov img { width: 100%; height: 100%; object-fit: cover; display: block; }
.me-th { position: relative; cursor: pointer; transition: width .2s ease, height .2s ease; }
/* ▶ on every shot's picture: tap to play the shot (the picture grows while it plays) */
.me-playbadge { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  background: rgba(0,0,0,.55); box-shadow: 0 0 0 1px rgba(255,255,255,.35); pointer-events: none; }
.me-playbadge::before { content: ''; position: absolute; left: 10px; top: 7px; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent #fff; }
.me-th.playing { width: 108px; height: 192px; }
.me-th.playing img, .me-th.playing .me-playbadge { display: none; }
.me-th video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.me-nothumb { display: block; width: 100%; height: 100%; background: #222; }
.me-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.me-info b { font-size: 14px; color: var(--ph-text, #fff); }
.me-info small { font-size: 12px; color: var(--ph-muted, #9b9ea8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-btns { flex: none; display: flex; gap: 6px; }
.me-btns button { width: 38px; height: 38px; margin: 0; padding: 0; border-radius: 10px; border: 1px solid var(--ph-line, #2a2b32); background: #26272e; color: #fff; font-size: 14px; cursor: pointer; }
.me-btns button:disabled { opacity: .3; }
.me-ovs, .me-tray { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.me-ov { position: relative; width: 54px; height: 72px; margin: 0; padding: 0; border-radius: 8px; overflow: hidden; border: 2px solid transparent; background: #111; cursor: pointer; }
.me-ov.on { border-color: var(--ph-accent-text, #8ec0ff); }
.me-ov span { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 0; font-size: 10px; font-weight: 700; line-height: 1.2; color: #fff; background: rgba(0,0,0,.6); text-align: center; }
.me-none { color: var(--ph-muted, #9b9ea8); font-size: 12px; }
.me-ovtools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.me-ovtools button { flex: 1 1 auto; height: 38px; margin: 0; padding: 0 10px; border-radius: 10px; border: 1px solid var(--ph-line, #2a2b32); background: #26272e; color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1; cursor: pointer; }
.me-ovtools button:disabled { opacity: .35; }
.me-banner { display: flex; align-items: center; gap: 12px; width: 100%; margin: 2px 0 8px; padding: 12px 14px; border: 0; border-radius: 16px; cursor: pointer;
  text-align: left; color: #fff; background: linear-gradient(135deg, rgba(56,189,248, .14), rgba(31,111,224, .14)); box-shadow: inset 0 0 0 1px rgba(77,149,239, .38); }
.me-banner-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff;
  background: var(--mt-grad, linear-gradient(135deg, #38bdf8 0%, #4d95ef 52%, #1f6fe0 100%)); }
.me-banner-ic .mi { width: 17px; height: 17px; margin: 0; }
.me-banner-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.me-banner b { font-size: 14.5px; } .me-banner small { font-size: 12.5px; color: var(--ph-muted, #9b9ea8); }
.mt-foot2 { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.mt-edit { width: 100%; height: 48px; margin: 0; border: 0; border-radius: 15px; cursor: pointer; font-size: 15.5px; font-weight: 650; line-height: 1;
  color: #fff; background: rgba(255, 255, 255, .09); }
.mt-edit:active { background: rgba(255, 255, 255, .14); }

/* a song in the file chooser: no picture to show, so a note instead */
.cf-pic.cf-pic-audio { display: grid; place-items: center; font-size: 22px; background: rgba(31,111,224, .14); }
@media (max-width: 900px) {
  body.mw-cloud #capModal .cap-doubt { margin: 0 0 4px 42px; font-size: 13px; }
  body.mw-cloud #capModal .cap-doubt button { min-height: 36px; padding: 6px 14px; font-size: 13.5px; }
  body.mw-cloud #capModal .cap-check-note { font-size: 13.5px; margin: 0 0 8px; }
}

/*
 * ►► THE CAPTIONS WINDOW, CALM (CapCut's "Edit captions"). ◄◄
 * With lines to read, the window is the lines: the picture shows above a
 * shorter sheet, each row is ▶ · time · words on a hairline, the line being
 * spoken is lifted, and ✓ closes. Everything else — the look, the Word Book,
 * fix these words, grammar, ↺ 3s, ⟲ Line, the scrubber, speed, loop, pause
 * while typing — is one tap away under "Tools", the same controls doing the
 * same things. Placement and paint only: no control is removed.
 */
@media (max-width: 900px) {
  html:not(.mw-kb) body.mw-cloud #capModal .cap-box.folded:not(.cap-tools-open) { top: max(calc(var(--ph-top) + 6px), 40dvh); }
  /* the picture above the sheet is seen as it is, not through a shade */
  body.mw-cloud #capModal { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  body.mw-cloud #capModal .cap-box.folded { background: #1c1c1f; border-top: 0; box-shadow: 0 -10px 30px rgba(0,0,0,.45); }

  /* the head: Edit captions in the middle, undo/redo on the left, ✓ on the right */
  body.mw-cloud #capModal .cap-box.folded .cap-head { position: relative; justify-content: flex-start; gap: 2px; height: 52px; padding: 0 8px; border-bottom: 1px solid rgba(255,255,255,.07); }
  body.mw-cloud #capModal .cap-box.folded #capTitle { position: absolute; left: 96px; right: 96px; text-align: center; pointer-events: none; font-size: 0; }
  body.mw-cloud #capModal .cap-box.folded #capTitle .mi { display: none; }
  body.mw-cloud #capModal .cap-box.folded #capTitle::after { content: 'Edit captions'; font-size: 17px; font-weight: 600; color: #fff; }
  body.mw-cloud #capModal .cap-box.folded #capClose { margin-left: auto; color: #fff; background: transparent; }
  body.mw-cloud #capModal .cap-box.folded :is(#capUndo, #capRedo) { width: 36px; margin: 0; color: #8e8e93; background: transparent; }

  /* the tools: one tap away */
  body.mw-cloud #capModal .cap-box.folded:not(.cap-tools-open) :is(.cap-sum-row, .cap-fix-row, #capPlayBack, #capPlayLine, #capPlayScrub, #capPlayRate, .cap-pl-opt) { display: none; }
  body.mw-cloud #capModal .cap-box.folded .cap-player { align-items: center; gap: 8px 10px; padding: 6px 12px 6px 14px; background: transparent; border-bottom: 1px solid rgba(255,255,255,.07); }
  body.mw-cloud #capModal .cap-box.folded .cap-pl-play { width: 34px; height: 34px; box-shadow: none; }
  body.mw-cloud #capModal .cap-box.folded .cap-pl-time { font: 500 13px/1 -apple-system, system-ui, sans-serif; font-variant-numeric: tabular-nums; color: #8e8e93; }
  body.mw-cloud #capModal .cap-tools-btn {
    margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
    border: 0; border-radius: 999px; background: rgba(255,255,255,.08); color: #e5e5ea; font-size: 13.5px; font-weight: 600;
  }
  body.mw-cloud #capModal .cap-box.cap-tools-open .cap-tools-btn { background: var(--acc-soft); color: #fff; }
  body.mw-cloud #capModal .cap-box:not(.folded) .cap-tools-btn { display: none; }

  /* the lines: ▶ · time · words, on a hairline that starts where the words do */
  body.mw-cloud #capModal .cap-box.folded .cap-list { padding: 0 0 14px; gap: 0; }
  body.mw-cloud #capModal .cap-box.folded #capList .cap-fix-tabs { top: 0; margin: 0; padding: 7px 14px; background: #1c1c1f; border: 0; }
  body.mw-cloud #capModal .cap-box.folded .cap-fix-tabs .cap-add-line:not(.cap-add-sq) {
    height: 34px; min-height: 34px; padding: 0 14px; font-size: 14px; border-radius: 999px; margin-left: auto; max-width: 100%;
  }
  body.mw-cloud #capModal .cap-box.folded .cap-row {
    align-items: center; gap: 6px; min-height: 54px; padding: 0 10px 0 8px; border: 0; border-radius: 0; box-shadow: none;
    background: linear-gradient(rgba(255,255,255,.07), rgba(255,255,255,.07)) 88px 100% / calc(100% - 88px) 1px no-repeat;
  }
  body.mw-cloud #capModal .cap-box.folded .cap-row.now { background-color: rgba(255,255,255,.08); }
  body.mw-cloud #capModal .cap-box.folded .cap-row-play {
    width: 30px; height: 30px; border: 0; background: transparent; box-shadow: none; color: #8e8e93;
  }
  body.mw-cloud #capModal .cap-box.folded .cap-row.now .cap-row-play { color: #fff; background: transparent; }
  body.mw-cloud #capModal .cap-box.folded .cap-row-play .mi { width: 14px; height: 14px; }
  body.mw-cloud #capModal .cap-box.folded .cap-time { flex: 0 0 44px; font: 500 14px/1 -apple-system, system-ui, sans-serif; font-variant-numeric: tabular-nums; color: #8e8e93; letter-spacing: 0; }
  body.mw-cloud #capModal .cap-box.folded .cap-row.now .cap-time { color: #fff; }
  body.mw-cloud #capModal .cap-box.folded .cap-text {
    height: 50px; padding: 0 8px; border: 1px solid transparent; border-radius: 10px; background: transparent;
    font-size: 17px; color: #d1d1d6; box-shadow: none;
  }
  body.mw-cloud #capModal .cap-box.folded .cap-row.now .cap-text { color: #fff; }
  body.mw-cloud #capModal .cap-box.folded .cap-text:focus { background: rgba(255,255,255,.07); border-color: rgba(77,149,239,.55); box-shadow: none; color: #fff; }
  body.mw-cloud #capModal .cap-box.folded .cap-row.fixed .cap-text { border-color: transparent; }
  body.mw-cloud #capModal .cap-box.folded .cap-row.fixed .cap-time { color: var(--acc2); }
  /* ✨ for one line: on the line being worked on only */
  body.mw-cloud #capModal .cap-box.folded .cap-ai-line { display: none; }
  body.mw-cloud #capModal .cap-box.folded .cap-row:is(.now, :focus-within) .cap-ai-line {
    display: inline-flex; align-items: center; justify-content: center; align-self: center;
    width: 30px; height: 30px; margin: 0; padding: 0; border: 0; background: transparent; opacity: .7; line-height: 1;
  }

  /* the bottom: one slim row */
  body.mw-cloud #capModal .cap-box.folded .cap-foot { padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.07); background: #1c1c1f; }
  body.mw-cloud #capModal .cap-box.folded .cap-foot-btns { grid-template-columns: 52px 1fr; }
  body.mw-cloud #capModal .cap-box.folded .cap-foot-btns button { height: 44px; font-size: 15px; border-radius: 12px; }
}

/* 🔍 Search the captions (phone): thumb-sized, never zooms the page */
.cap-search input { font-size: 16px; padding: 10px 14px; border-radius: 12px; }

/* The page's own picker for the captions window (installCapSheets in cloud-boot.js) */
.cloud-pickr { position: fixed; inset: 0; z-index: 2147482000; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,.45); -webkit-tap-highlight-color: transparent; }
.cloud-pickr-panel { width: 100%; max-width: 560px; max-height: 70vh; display: flex; flex-direction: column;
  background: #1b1e27; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,.5);
  padding: 4px 0 calc(env(safe-area-inset-bottom, 0px) + 10px); }
.cloud-pickr-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 8px 20px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9aa0ad; }
.cloud-pickr-x { margin: 0; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: #e6e7ec; font-size: 17px; cursor: pointer; }
.cloud-pickr-list { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 8px; }
.cloud-pickr-group { padding: 12px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9aa0ad; }
.cloud-pickr-row { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; margin: 0;
  padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: #f1f2f5; font-size: 18px; text-align: left; cursor: pointer; }
.cloud-pickr-row.on { background: #2e3240; }
.cloud-pickr-row.on::after { content: '✓'; margin-left: 12px; color: #4d95ef; font-family: system-ui, -apple-system, sans-serif; font-weight: 700; }
.cloud-pickr-row:disabled { opacity: .45; }

/* Your files: Save all the finished exports to Photos (renderFiles) */
.cloud-files-group .cf-saveall { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 8px); margin: 4px 4px 10px; min-height: 48px; }
/* …and Delete all, beside it (asks once more: .sure) */
.cloud-files-group .cf-group-acts { display: flex; gap: 8px; margin: 4px 4px 10px; }
.cloud-files-group .cf-group-acts .cf-saveall { flex: 1 1 auto; width: auto; margin: 0; }
.cloud-files-group .cf-delall { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 14px;
  border-radius: 14px; border: 1px solid rgba(255,69,58,.45); background: transparent; color: #ff6961; font: inherit; font-weight: 600; cursor: pointer; }
.cloud-files-group .cf-delall svg { width: 20px; height: 20px; }
.cloud-files-group .cf-delall.sure { flex: 1 1 auto; background: #d70015; border-color: #d70015; color: #fff; box-shadow: 0 0 0 3px rgba(255,69,58,.3); }
.cloud-files-group .cf-group-acts:has(.cf-delall.sure) .cf-saveall { display: none; }
.cloud-files-group .cf-selall { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 14px;
  border: 1px solid rgba(77,149,239,.55); background: rgba(31,111,224,.14); color: #d0d8ff; font: inherit; font-weight: 650; cursor: pointer; }
.cloud-files-group .cf-selall svg, .cloud-files-group .cf-selall .mi { width: 20px; height: 20px; }

/* ===================================================================== */
/*  THE SCHEDULER — CREATOR STUDIO (design B, chosen by the church)      */
/* ===================================================================== */
.csb {
  --b-bg: #0a0a0f; --b-s1: #15151c; --b-s2: #1e1e27; --b-s3: #262631;
  --b-line: rgba(255,255,255,.07); --b-t2: rgba(235,235,245,.64); --b-t3: rgba(235,235,245,.40);
  --b-acc: #8ec0ff; --b-grad: var(--brand-grad);
  background: var(--b-bg) !important;
}
.csb-sheet, .csb-sheet.cp-panel {
  --b-s1: #15151c; --b-s2: #1e1e27; --b-s3: #262631; --b-line: rgba(255,255,255,.07);
  --b-t2: rgba(235,235,245,.64); --b-t3: rgba(235,235,245,.40); --b-acc: #8ec0ff;
  --b-grad: var(--brand-grad);
  background: #0e0e14;
}
.csb .mi, .csb-sheet .mi { margin: 0; }
.csb-top { display: flex; align-items: center; justify-content: space-between; padding: calc(env(safe-area-inset-top) + 8px) 16px 0; }
.csb-round { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--b-s2); color: #fff; display: grid; place-items: center; }
.csb-round .mi { width: 22px; height: 22px; }
.csb-scroll { padding-bottom: calc(env(safe-area-inset-bottom) + 40px); }
.csb-head { display: flex; align-items: flex-end; justify-content: space-between; padding: 6px 4px 4px; }
.csb-eyebrow { display: block; font-size: 12.5px; font-weight: 650; letter-spacing: .6px; text-transform: uppercase; color: var(--b-t2); }
.csb-head h1 { margin: 2px 0 0; font-size: 32px; font-weight: 800; letter-spacing: -.8px; line-height: 1.1; color: #fff; }
.csb-plus { width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--b-grad); box-shadow: 0 8px 24px rgba(59,130,246,.4); }
.csb-plus .mi { width: 24px; height: 24px; }
.csb-h2 { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 4px 10px; }
.csb-h2 h2 { margin: 0; font-size: 18px; font-weight: 750; letter-spacing: -.3px; color: #fff; }
.csb-link { padding: 4px 0; border: 0; background: none; color: var(--b-acc); font-size: 15px; font-weight: 600; }
.csb-dim { color: var(--b-t3); font-size: 13px; }

/* accounts as cards */
.csb-accts { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; }
.csb-accts::-webkit-scrollbar { display: none; }
.csb-acc { flex: none; width: 144px; min-height: 112px; padding: 12px; border: 1px solid var(--b-line); border-radius: 18px; background: var(--b-s1); color: #fff; text-align: left; display: flex; flex-direction: column; }
.csb-acc-top { display: flex; align-items: center; justify-content: space-between; }
.csb-acc-top .cs-mark.lg { width: 30px; height: 30px; }
.csb-acc-pic { position: relative; width: 30px; height: 30px; border-radius: 50%; background: center/cover #222; }
.csb-acc-pic .cs-mark.badge { width: 15px; height: 15px; right: -5px; bottom: -4px; border-radius: 5px; box-shadow: 0 0 0 2px var(--b-s1); }
.csb-live { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.15); }
.csb-acc b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 10px; font-size: 13.5px; font-weight: 700; line-height: 1.22; letter-spacing: -.1px; word-break: break-word; }
.csb-acc small { margin-top: auto; padding-top: 4px; font-size: 11.5px; color: var(--b-t3); }
.csb-acc.add { border-style: dashed; border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.02); }
.csb-acc-plus { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(31,111,224,.2); color: var(--b-acc); }
.csb-acc-plus .mi { width: 17px; height: 17px; }

/* tabs */
.csb-seg { display: flex; margin: 18px 0 0; padding: 3px; height: 42px; border-radius: 13px; background: var(--b-s1); }
.csb-seg button { flex: 1; min-width: 0; padding: 0 4px; white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 10px; background: none; color: var(--b-t2); font-size: 13.5px; font-weight: 650; }
.csb-seg button.on { background: var(--b-s3); color: #fff; }
.csb-seg i { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 8px; background: rgba(255,255,255,.1); line-height: 15px; }
.csb-seg i.bad { background: #ff453a; color: #fff; }

/* up next */
.csb-hero { width: 100%; display: flex; gap: 14px; padding: 12px; border-radius: 22px; text-align: left; color: #fff;
  background: linear-gradient(135deg, rgba(31,111,224,.24), rgba(56,189,248,.10) 70%), var(--b-s1); border: 1px solid rgba(77,149,239,.26); }
.csb-hero-pic { position: relative; flex: none; width: 72px; height: 128px; border-radius: 13px; background: #1d1726 center/cover; display: grid; place-items: center; color: var(--b-t2); }
.csb-hero-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.csb-hero-when { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.csb-hero-when b { font-size: 12px; font-weight: 800; letter-spacing: .5px; background: var(--b-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.csb-hero-when i { font-style: normal; font-size: 11.5px; font-weight: 650; padding: 3px 8px; border-radius: 9px; background: rgba(255,255,255,.1); white-space: nowrap; }
.csb-hero-title { margin-top: 6px; font-size: 17px; font-weight: 750; line-height: 1.24; letter-spacing: -.3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.csb-hero-cap { margin-top: 3px; font-size: 13px; color: var(--b-t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csb-hero-foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.csb-hero-foot .cs-state { margin-left: auto; }
.csb-stack { display: inline-flex; }
.csb-stack .cs-mark { width: 22px; height: 22px; border-radius: 7px; box-shadow: 0 0 0 2px #1a1522; }
.csb-stack .cs-mark + .cs-mark { margin-left: -6px; }
.csb-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: rgba(10,10,15,.42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.18); }
.csb-play .mi { width: 15px; height: 15px; margin-left: 2px; }
.csb-play.sm { width: 26px; height: 26px; top: 42%; }
.csb-play.sm .mi { width: 11px; height: 11px; }

/* coming up: 9:16 tiles */
.csb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 9px; }
.csb-tile { position: relative; aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: 16px; overflow: hidden; color: #fff; text-align: left;
  background: linear-gradient(160deg, #1a1d3d, #0d0f22) center/cover; }
.csb-time { position: absolute; left: 7px; top: 7px; z-index: 2; max-width: calc(100% - 14px); padding: 4px 8px; border-radius: 8px; font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(10,10,15,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.14); }
.csb-tile > .cs-state { position: absolute; right: 7px; top: 36px; z-index: 2; }
.csb-tile-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 30px 9px 9px; background: linear-gradient(transparent, rgba(0,0,0,.85)); }
.csb-tile-foot b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; font-weight: 700; line-height: 1.22; }
.csb-tile-foot .csb-stack { margin-top: 6px; }
.csb-tile-foot .csb-stack .cs-mark { width: 17px; height: 17px; border-radius: 5px; box-shadow: none; }
.csb-tile-foot .csb-stack .cs-mark + .cs-mark { margin-left: 3px; }
.csb-tile.free { border: 1.5px dashed rgba(255,255,255,.18); background: rgba(255,255,255,.02); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 10px; }
.csb-free-plus { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(31,111,224,.2); color: var(--b-acc); }
.csb-free-plus .mi { width: 20px; height: 20px; }
.csb-tile.free b { margin-top: 10px; font-size: 13px; font-weight: 700; }
.csb-tile.free small { margin-top: 3px; font-size: 11.5px; color: var(--b-t3); }

/* empty */
.csb-empty { margin-top: 34px; text-align: center; padding: 0 10px; }
.csb-empty-art { display: flex; justify-content: center; gap: 10px; }
.csb-empty-art.solo { width: 72px; height: 72px; margin: 0 auto; border-radius: 22px; display: grid; place-items: center; color: var(--b-acc); background: radial-gradient(circle at 30% 20%, rgba(59,130,246,.35), rgba(31,111,224,.18)); }
.csb-empty-art.solo .mi { width: 32px; height: 32px; }
.csb-empty b { display: block; margin-top: 18px; font-size: 20px; font-weight: 800; color: #fff; }
.csb-empty p { margin: 8px auto 0; max-width: 320px; color: var(--b-t2); font-size: 15px; line-height: 1.45; }
.csb-cta { margin-top: 20px; height: 52px; padding: 0 24px; border: 0; border-radius: 26px; display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 16px; font-weight: 750; background: var(--b-grad); box-shadow: 0 10px 28px rgba(59,130,246,.38); }
.csb-cta .mi { width: 19px; height: 19px; }

/* ---- New post ---- */
.csb-form { display: flex; flex-direction: column; gap: 14px; padding-bottom: 6px; }
.csb-choose { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.csb-src { min-height: 150px; padding: 16px 14px; border: 1px solid rgba(77,149,239,.22); border-radius: 20px; text-align: left; color: #fff; display: flex; flex-direction: column;
  background: radial-gradient(90% 70% at 0% 0%, rgba(31,111,224,.22), transparent 60%), var(--b-s1); }
.csb-src-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: var(--b-grad); box-shadow: 0 6px 18px rgba(59,130,246,.3); }
.csb-src-ic .mi { width: 21px; height: 21px; }
.csb-src b { margin-top: auto; padding-top: 14px; font-size: 16px; font-weight: 750; }
.csb-src small { margin-top: 4px; font-size: 12.5px; color: var(--b-t2); line-height: 1.35; }
.csb-prev { position: relative; height: min(40vh, 330px); border-radius: 24px; overflow: hidden; background: #12142a center/cover; }
.csb-prev.pic { background-size: contain; background-repeat: no-repeat; background-color: #0f1018; }
.csb-pill { position: absolute; top: 12px; left: 12px; z-index: 3; height: 32px; padding: 0 12px; border-radius: 16px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; color: #fff;
  background: rgba(10,10,15,.45); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.14); }
.csb-pill.right { left: auto; right: 12px; }
.csb-pill .mi { width: 15px; height: 15px; }
.csb-pill .cs-mark.sm { width: 16px; height: 16px; }
.csb-prev-txt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 60px 16px 14px; color: #fff; background: linear-gradient(transparent, rgba(5,4,8,.88) 55%); }
.csb-prev-txt b { font-size: 14px; font-weight: 750; }
.csb-prev-cap { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; font-size: 14px; line-height: 1.36; max-width: 92%; }
.csb-prev-cap em { font-style: normal; color: var(--b-t3); }
.csb-prev-tags { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csb-strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.csb-strip-it { position: relative; flex: none; width: 92px; aspect-ratio: 9 / 16; border-radius: 14px; background: #1d1726 center/cover; }
.csb-x { position: absolute; top: 5px; right: 5px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.55); }
.csb-x .mi { width: 13px; height: 13px; }
.csb-strip-add { flex: none; width: 92px; aspect-ratio: 9 / 16; border: 1.5px dashed rgba(255,255,255,.2); border-radius: 14px; background: none; color: var(--b-acc); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-weight: 650; }
.csb-strip-add .mi { width: 20px; height: 20px; }

.csb-ai { position: relative; padding: 16px; border-radius: 20px; border: 1px solid rgba(77,149,239,.24); background: radial-gradient(90% 70% at 0% 0%, rgba(31,111,224,.22), transparent 60%), var(--b-s1); }
.csb-ai-head { display: flex; align-items: center; gap: 10px; }
.csb-ai-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--b-grad); box-shadow: 0 0 0 5px rgba(59,130,246,.13), 0 6px 18px rgba(59,130,246,.32); }
.csb-ai-ic .mi { width: 17px; height: 17px; }
.csb-ai.busy .csb-ai-ic { animation: csbPulse 1.6s ease-in-out infinite; }
@keyframes csbPulse { 50% { box-shadow: 0 0 0 9px rgba(59,130,246,.08), 0 6px 18px rgba(59,130,246,.45); } }
.csb-ai-head b { font-size: 16px; font-weight: 750; color: #fff; }
.csb-ai-head small { color: var(--b-t3); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.csb-ai-st { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 650; }
.csb-ai-st.ok { color: #6ee7b7; }
.csb-ai-st.ok .mi { width: 15px; height: 15px; }
.csb-ai-st.busy { color: #93c5fd; }
.csb-spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(147,197,253,.25); border-top-color: #93c5fd; animation: csbSpin .8s linear infinite; }
@keyframes csbSpin { to { transform: rotate(360deg); } }
.csb-wave { display: flex; align-items: center; gap: 3px; height: 34px; margin-top: 12px; }
.csb-wave i { flex: 1; max-width: 4px; height: 30%; border-radius: 2px; background: linear-gradient(#93c5fd, #4d95ef); animation: csbWave 1s ease-in-out infinite; }
@keyframes csbWave { 0%, 100% { height: 22%; opacity: .5; } 50% { height: 100%; opacity: 1; } }
.csb-shims { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.csb-shim { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.07) 100%); background-size: 200% 100%; animation: csbSh 1.6s linear infinite; }
.csb-prev-cap .csb-shim { margin-top: 6px; height: 10px; }
.csb-shim.w90 { width: 90%; } .csb-shim.w80 { width: 80%; } .csb-shim.w75 { width: 75%; } .csb-shim.w60 { width: 60%; } .csb-shim.w50 { width: 50%; }
@keyframes csbSh { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.csb-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.csb-facts small { flex-basis: 100%; color: var(--b-t3); font-size: 11.5px; font-weight: 650; letter-spacing: .4px; text-transform: uppercase; }
.csb-facts span { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 5px 10px; border-radius: 10px; background: rgba(255,255,255,.07); color: #fff; font-size: 13px; font-weight: 600; }
.csb-facts .mi { width: 13px; height: 13px; color: var(--b-acc); flex: none; }
.csb-sheet .csb-cap { width: 100%; margin-top: 12px; padding: 0; border: 0; background: transparent; color: #fff; font-size: 16px; line-height: 1.45; resize: none; min-height: 120px; outline: none; box-shadow: none; }
.csb-note { margin: 8px 0 0; color: #fcd34d; font-size: 12.5px; line-height: 1.4; }
.csb-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.csb-act { height: 36px; padding: 0 11px; border: 0; border-radius: 19px; display: inline-flex; align-items: center; gap: 6px; background: var(--b-s3); color: #fff; font-size: 13.5px; font-weight: 650; }
.csb-act .mi { width: 15px; height: 15px; }
.csb-act:disabled { opacity: .45; }
.csb-act.ghost { background: transparent; color: var(--b-acc); padding: 0 8px; }
.csb-acts .cs-count { margin-left: auto; flex-basis: 100%; text-align: right; color: var(--b-t3); font-size: 12px; }
.csb-styles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--b-line); }
.csb-styles small { flex-basis: 100%; color: var(--b-t3); font-size: 11.5px; font-weight: 650; letter-spacing: .4px; text-transform: uppercase; }
.csb-style { height: 32px; padding: 0 12px; border: 1px solid rgba(77,149,239,.3); border-radius: 16px; background: rgba(31,111,224,.1); color: #dbeafe; font-size: 13px; font-weight: 600; }
.csb-yt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; border: 1px solid var(--b-line); background: var(--b-s1); }
.csb-yt .cs-mark.md, .csb-acc-pill .cs-mark.md { width: 30px; height: 30px; }
.csb-yt > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.csb-yt small { font-size: 11.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--b-t3); }
.csb-yt-in { width: 100%; margin-top: 2px; padding: 0; border: 0; background: none; color: #fff; font-size: 16px; font-weight: 650; outline: none; }
.csb-yt > .mi { width: 18px; height: 18px; color: var(--b-t3); }
.csb-sec { display: block; }
.csb-h3 { display: flex; align-items: baseline; justify-content: space-between; margin: 0 2px 10px; }
.csb-h3 b { font-size: 15px; font-weight: 700; color: var(--b-t2); }
.csb-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.csb-fnote { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--cs-soft, rgba(127,127,127,.08)); display: grid; gap: 6px; font-size: 13px; }
.csb-fnote > b { font-size: 12px; opacity: .7; font-weight: 600; }
.csb-fnote-row { display: flex; align-items: center; gap: 8px; line-height: 1.3; }
/* 🎵 music on a flyer */
.csb-fm { display: grid; gap: 10px; }
.csb-fm .csb-h3 b { display: inline-flex; align-items: center; gap: 6px; }
.csb-fm-mode { margin: 2px 0 0; }
.csb-fm-sec { border-radius: 14px; padding: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); display: grid; gap: 8px; }
.csb-fm-h { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.csb-fm-h small { opacity: .7; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csb-fm-h .csb-link { margin-left: auto; }
.csb-fm-h .mi { width: 18px; height: 18px; }
.csb-fm .cs-hint { margin: 0; }
.csb-igsearch { width: 100%; box-sizing: border-box; }
.csb-igquick { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.csb-igquick::-webkit-scrollbar { display: none; }
.csb-igquick .cs-chip { flex: none; }
.csb-iglist { display: grid; gap: 6px; max-height: 360px; overflow-y: auto; }
.csb-igsong { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid transparent; cursor: pointer; min-width: 0; }
.csb-igsong.on { border-color: #c13584; background: rgba(193,53,132,.14); }
.csb-igsong img, .csb-igart { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, #833ab4, #fd1d1d 60%, #fcb045); }
.csb-igart .mi { width: 18px; height: 18px; color: #fff; }
.csb-igsong > span { flex: 1; min-width: 0; display: grid; }
.csb-igsong > span b, .csb-igsong > span small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csb-igsong > span small { opacity: .7; font-size: 12px; }
.csb-igplay { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: #fff; display: grid; place-items: center; }
.csb-igplay.on { background: #c13584; }
.csb-igplay .mi { width: 16px; height: 16px; margin: 0; }
.csb-igsong .csb-check { flex: none; }
.csb-igfb { width: 100%; background: #1877f2; color: #fff; }
.csb-igplay.busy { background: rgba(255,255,255,.18); }
.csb-igplay .csb-spin { width: 14px; height: 14px; }
/* 🙏 the song added in the app itself: Facebook (and Instagram) handed the flyer and caption */
.csb-handtodos { display: grid; gap: 8px; margin: 0 0 14px; }
.csb-handtodos:empty { display: none; }
.csb-handtodo { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(24,119,242,.45); background: rgba(24,119,242,.12); color: var(--b-t1, #fff); text-align: left; }
.csb-handtodo.due { border-color: #1877f2; background: rgba(24,119,242,.24); box-shadow: 0 0 0 3px rgba(24,119,242,.18); }
.csb-handtodo > span:nth-child(2) { flex: 1; min-width: 0; display: grid; gap: 2px; }
.csb-handtodo b { font-size: 14px; }
.csb-handtodo small { opacity: .75; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csb-hand { display: grid; gap: 12px; }
.csb-hand .cs-hint { margin: 0; }
.csb-handrow { display: grid; grid-template-columns: 64px 1fr; gap: 8px 12px; align-items: center; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
.csb-handrow img { width: 64px; height: 80px; object-fit: cover; border-radius: 8px; background: rgba(255,255,255,.06); }
.csb-handrow > span { display: grid; gap: 2px; min-width: 0; }
.csb-handrow > span b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csb-handrow > span small { opacity: .7; font-size: 12px; }
.csb-handbtns { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.csb-handbtns .cs-btn { flex: 1 1 140px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.csb-handbtns .cs-btn.done { border-color: #22c55e; color: #22c55e; }
.csb-handbtns .mi { width: 16px; height: 16px; margin: 0; }
.csb-handapp { border-radius: 14px; padding: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); display: grid; gap: 8px; }
.csb-handsteps { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; line-height: 1.4; }
.csb-handopen { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: #fff; background: #1877f2; border-color: transparent; padding: 6px 12px; border-radius: 999px; }
.csb-handopen.instagram { background: linear-gradient(135deg, #833ab4, #fd1d1d 60%, #fcb045); }
.csb-acc-pill { max-width: 100%; height: 52px; padding: 0 12px 0 10px; border: 1.5px solid var(--b-line); border-radius: 26px; display: inline-flex; align-items: center; gap: 9px; background: var(--b-s1); color: var(--b-t2); font-size: 14px; font-weight: 650; }
.csb-acc-pill > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.csb-check { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid rgba(255,255,255,.25); color: transparent; }
.csb-check .mi { width: 13px; height: 13px; }
.csb-acc-pill.on { color: #fff; border-color: rgba(59,130,246,.55); background: linear-gradient(135deg, rgba(31,111,224,.2), rgba(56,189,248,.1)); }
.csb-acc-pill.on .csb-check { border: 0; background: #fff; color: #111; }
.csb-more { border-radius: 18px; border: 1px solid var(--b-line); background: var(--b-s1); }
.csb-more summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 14px; color: #fff; font-weight: 650; cursor: pointer; }
.csb-more summary::-webkit-details-marker { display: none; }
.csb-more summary .mi { width: 18px; height: 18px; color: var(--b-acc); }
.csb-more summary small { margin-left: auto; color: var(--b-t3); font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csb-more summary > .mi:last-child { color: var(--b-t3); transition: transform .2s; }
.csb-more[open] summary > .mi:last-child { transform: rotate(90deg); }
.csb-more-in { padding: 0 14px 14px; }
.csb-bar { display: flex; gap: 10px; align-items: stretch; }
.csb-when { flex: .85 1 0; min-width: 0; padding: 8px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; display: flex; align-items: center; gap: 10px; text-align: left; color: #fff;
  background: rgba(255,255,255,.05); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.csb-when .mi { flex: none; width: 20px; height: 20px; color: var(--b-acc); }
.csb-when > span { min-width: 0; display: flex; flex-direction: column; }
.csb-when b { font-size: 15px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csb-when small { font-size: 12px; color: var(--b-acc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csb-go { flex: 1.15 1 0; min-width: 0; height: 56px; border: 0; border-radius: 18px; color: #fff; font-size: 16.5px; font-weight: 800; letter-spacing: -.2px; background: var(--b-grad); box-shadow: 0 10px 28px rgba(59,130,246,.38); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 12px; }
.csb-go:disabled { opacity: .4; box-shadow: none; }
.csb-sheet .cp-foot .cs-hint { margin: 8px 2px 0; text-align: center; }
.csb-sheet .cs-chip.on { background: #fff; color: #111; }

/* New post: a video from this phone, shown at once while it is sent */
.csb-sending { display: flex; flex-direction: column; gap: 10px; }
.csb-prev.sending video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.csb-prev.sending.pic { background-size: contain; background-repeat: no-repeat; background-position: center; }
.csb-send { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; padding: 12px 14px; border-radius: 16px; color: #fff;
  background: rgba(10,10,15,.55); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.14); }
.csb-send-name { display: block; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csb-send-bar { display: block; height: 6px; margin-top: 8px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; }
.csb-send-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(120deg, #1f6fe0, #3b82f6 55%, #38bdf8); transition: width .3s; }
.csb-send-tx { display: block; margin-top: 6px; font-size: 12.5px; color: rgba(235,235,245,.75); }
.csb-send-err { display: flex; gap: 8px; align-items: flex-start; margin: 10px 2px 0; padding: 10px 12px; border-radius: 14px; background: rgba(255,69,58,.13); color: #ffcbc6; font-size: 13.5px; line-height: 1.4; }
.csb-send-err .mi { flex: none; width: 17px; height: 17px; margin-top: 1px; }

/* New post: who is speaking and the church's name (optional) */
.csb-names-btn { width: 100%; margin-top: 12px; padding: 10px 12px; border: 1px dashed rgba(255,255,255,.16); border-radius: 14px; background: none; color: rgba(235,235,245,.7); display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; text-align: left; }
.csb-names-btn span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csb-names-btn .mi { flex: none; width: 16px; height: 16px; color: #8ec0ff; }
.csb-names { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.07); display: flex; flex-direction: column; gap: 10px; }
.csb-names label { display: flex; flex-direction: column; gap: 4px; }
.csb-names small { color: rgba(235,235,245,.5); font-size: 12px; font-weight: 600; }
.csb-names-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.csb-names-hint { line-height: 1.4; }

/* bulk: sending tiles, and a card per post */
.csb-strip-it.sending { overflow: hidden; background-size: cover; background-position: center; }
.csb-strip-it.sending video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.csb-send.mini { left: 6px; right: 6px; bottom: 6px; padding: 6px 8px; border-radius: 10px; }
.csb-send.mini .csb-send-bar { margin-top: 0; height: 4px; }
.csb-send.mini .csb-send-tx { margin-top: 4px; font-size: 11px; font-weight: 700; color: #fff; }
.csb-strip-add { font-size: 12px; text-align: center; padding: 0 6px; }
.csb-bposts { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.csb-bpost { position: relative; display: flex; gap: 12px; padding: 10px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); }
.csb-bpic { position: relative; flex: none; width: 64px; height: 114px; border-radius: 11px; background: #1d1726 center/cover; }
.csb-bmain { flex: 1; min-width: 0; padding-right: 26px; }
.csb-bmain > small { display: inline-flex; align-items: center; gap: 5px; color: #8ec0ff; font-size: 12px; font-weight: 700; }
.csb-bmain > small .mi { width: 13px; height: 13px; }
.csb-sheet .csb-bcap { width: 100%; margin-top: 6px; padding: 0; border: 0; background: transparent; color: #fff; font-size: 14px; line-height: 1.4; resize: none; min-height: 84px; outline: none; box-shadow: none; }
.csb-bwait { margin: 8px 0 0; color: rgba(235,235,245,.45); font-size: 13px; }
.csb-bmain .csb-shims { margin-top: 10px; }
.csb-bpost > .csb-x { top: 8px; right: 8px; }
.csb-addrow { display: flex; flex-wrap: wrap; gap: 8px; }

/* bulk timing: starts, then one every N */
.csb-lbl { display: block; margin: 12px 2px 8px; color: rgba(235,235,245,.5); font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.csb-lbl:first-child { margin-top: 0; }
.csb-gap { display: flex; align-items: center; gap: 10px; margin-top: 10px; color: rgba(235,235,245,.7); font-size: 14px; }
.csb-gap .cs-input { width: 90px; }
.csb-snap { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: rgba(235,235,245,.8); font-size: 14px; }
.csb-snap input { width: 20px; height: 20px; accent-color: #4d95ef; }
.csb-plan { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(31,111,224,.12); color: #dbeafe; font-size: 13.5px; line-height: 1.4; }
.csb-plan .mi { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.csb-plan b { display: block; color: #fff; font-size: 14.5px; }
.csb-igsong.on .csb-check { border: 0; background: #fff; color: #111; }
/* 🧪 test music on my accounts */
.csb-mcheck { width: 100%; }
.csb-mres { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.csb-mres li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.35; }
.csb-mres li > span { display: grid; gap: 2px; min-width: 0; }
.csb-mres li small { opacity: .8; }
.csb-mres li.bad small { color: #ffb4a8; opacity: 1; }
.csb-apptags { display: grid; gap: 6px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.04); font-size: 13px; }
.csb-apptags > small { opacity: .7; font-weight: 600; }
.csb-apptag { display: flex; gap: 8px; align-items: center; color: #9ecbff; }

/* ===================================================================== */
/* Friendly: every icon in the studio's top bar has its word under it, the
   quality pill steps aside (Export's sheet has Resolution), the green dot
   only shows when the link is lost, and a ? runs the tour. */
@media (max-width: 900px) {
  body.mw-cloud .cloud-bar #cloudHomeBtn, body.mw-cloud .cloud-bar #cloudProjBtn, body.mw-cloud .cloud-bar #cloudDownloads {
    position: relative; width: auto; min-width: 52px; height: 50px; padding: 2px 6px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  }
  body.mw-cloud .cloud-bar .cloud-chip .cloud-chip-tx { display: block; font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: .01em; color: var(--ph-text); opacity: .8; }
  body.mw-cloud .cloud-bar .cloud-home-btn .mi { margin: 0; }
  body.mw-cloud .cloud-q { display: none; }
  body.mw-cloud #cloudLink:not(.bad) { display: none; }
  body.mw-cloud #cloudLink { margin-right: 0; }
  body.mw-cloud .cloud-bar .cloud-ask { order: 8; margin-left: auto; width: 40px; height: 40px; }
}
@media (min-width: 901px) {
  body.mw-cloud .cloud-bar .cloud-ask { display: none; }   /* the bar's own ? is there */
}
/* Home: a ? beside the hello, and the one-time "New here?" card */
.ch-ask .mwg-ask { width: 44px; height: 44px; font-size: 20px; }
#chInvite:empty { display: none; }
/* Posts: New post says so, and a ? beside it */
.csb-head { align-items: center; gap: 10px; }
.csb-head > div { flex: 1; }
.csb-plus { width: auto; padding: 0 18px 0 14px; border-radius: 24px; display: inline-flex; gap: 6px; align-items: center; font-weight: 750; font-size: 16px; }
.csb-ask .mwg-ask { width: 44px; height: 44px; font-size: 20px; }


/* ===================================================================== */
/*  SIGN IN, THE WAY CAPCUT DOES IT                                      */
/* ===================================================================== */
/* The first screen anyone sees wears Home's look: the same blue banner,
   then a white card with soft grey boxes, sentence-case labels and one
   black button. Everything is in the card, nothing is small print. */
body.mw-cloud #cloudGate, #cloudGate {
  display: block; padding: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #fff; color: #0f1115;
}
/* signed in: gone, whatever else styles it (the rule above outranks a plain .gone) */
body.mw-cloud #cloudGate.gone, #cloudGate.gone { display: none !important; }
#cloudGate .cloud-gate-box {
  width: 100%; max-width: 460px; margin: 0 auto; padding: 0; min-height: 100%;
  background: transparent; border: 0; border-radius: 0; box-shadow: none; text-align: left;
}
#cloudGate .cg-hero {
  padding: calc(env(safe-area-inset-top) + 34px) 24px 64px; text-align: center; color: #fff;
  background: linear-gradient(180deg, #0a4fc4 0%, #1f6fe0 45%, #4d95ef 75%, #a9cdf8 100%);
}
@media (min-width: 461px) { #cloudGate .cg-hero { border-radius: 0 0 28px 28px; } }
#cloudGate .cloud-gate-logo {
  width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 17px; font-size: 28px;
  background: #fff; color: #0a4fc4; box-shadow: 0 10px 28px rgba(5, 40, 110, .35);
}
#cloudGate h1 { margin: 0 0 6px; font-size: 26px; font-weight: 800; letter-spacing: -.4px; color: #fff; }
#cloudGate .cloud-gate-sub { margin: 0; font-size: 15px; line-height: 1.4; color: rgba(255, 255, 255, .88); }
#cloudGate .cg-card {
  position: relative; margin: -34px 14px 24px; padding: 18px 18px 20px;
  background: #fff; border-radius: 22px; box-shadow: 0 10px 34px rgba(15, 23, 42, .12);
}
#cloudGate .cg-tabs { margin: 0 0 16px; padding: 4px; background: #f1f3f6; border: 0; border-radius: 14px; }
#cloudGate .cg-tab { height: 42px; border-radius: 11px; color: #5d6470; font-size: 16px; font-weight: 600; }
#cloudGate .cg-tab.on { background: #fff; color: #0f1115; box-shadow: 0 1px 4px rgba(15, 23, 42, .12); }
#cloudGate .cg-note { margin: -2px 0 14px; font-size: 14px; line-height: 1.45; color: #3b4250; text-align: left; }
#cloudGate .cloud-gate-label {
  display: block; margin: 14px 0 7px; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #0f1115;
}
#cloudGate .cg-tabs + .cloud-gate-label, #cloudGate .cg-note + .cloud-gate-label { margin-top: 0; }
#cloudGate #cloudName, #cloudGate #cloudPw, #cloudGate #cloudPw2, #cloudGate #cloudPass {
  width: 100%; height: 52px; margin: 0; padding: 0 16px; box-sizing: border-box;
  font-size: 17px; color: #0f1115; background: #f1f3f6; border: 2px solid transparent; border-radius: 14px;
  box-shadow: none;
}
#cloudGate #cloudName::placeholder, #cloudGate #cloudPw::placeholder, #cloudGate #cloudPw2::placeholder, #cloudGate #cloudPass::placeholder { color: #9aa1ad; }
#cloudGate #cloudName:focus, #cloudGate #cloudPw:focus, #cloudGate #cloudPw2:focus, #cloudGate #cloudPass:focus {
  outline: none; background: #fff; border-color: #1f6fe0; box-shadow: 0 0 0 4px rgba(31, 111, 224, .14);
}
#cloudGate .cg-bad, #cloudGate .cg-bad:focus { border-color: #e5484d !important; box-shadow: 0 0 0 4px rgba(229, 72, 77, .14) !important; }
#cloudGate .cg-pw { position: relative; }
#cloudGate .cg-pw input { padding-right: 76px !important; }
#cloudGate .cg-show {
  position: absolute; right: 6px; top: 6px; height: 40px; min-width: 62px; margin: 0; padding: 0 12px;
  border: 0; border-radius: 10px; background: transparent; color: #1f6fe0; font-size: 15px; font-weight: 600; cursor: pointer;
}
#cloudGate .cg-show:active { background: rgba(31, 111, 224, .1); }
#cloudGate .cg-hint { display: block; margin: 7px 2px 0; font-size: 13.5px; line-height: 1.35; color: #6b7280; }
#cloudGate .cg-hint:empty { display: none; }
#cloudGate .cg-hint.good { color: #15803d; font-weight: 600; }
#cloudGate .cg-hint.bad { color: #c2410c; font-weight: 600; }
#cloudGate .cloud-gate-remember {
  margin: 18px 0 0; padding: 12px 14px; background: #f7f8fa; border: 0; border-radius: 14px;
}
#cloudGate .cgr-text b { font-size: 15px; color: #0f1115; }
#cloudGate .cgr-text small { font-size: 13px; color: #6b7280; }
#cloudGate .cloud-gate-remember input.cgr-switch { background: #d5d9e0; }
#cloudGate .cloud-gate-remember input.cgr-switch:checked { background: #1f6fe0; }
body.mw-cloud #cloudGate .cloud-gate-go, #cloudGate .cloud-gate-go {
  width: 100%; height: 56px; margin: 20px 0 0; padding: 0; border: 0; border-radius: 16px;
  background: #0f1115; color: #fff; font-size: 17px; font-weight: 700; box-shadow: none;
}
#cloudGate .cloud-gate-go:active { transform: scale(.985); }
#cloudGate .cloud-gate-go:disabled { opacity: .6; }
#cloudGate .cloud-gate-msg { min-height: 0; margin: 12px 2px 0; font-size: 15px; line-height: 1.4; color: #3b4250; text-align: center; }
#cloudGate .cloud-gate-msg:empty { margin: 0; }
#cloudGate .cloud-gate-msg.bad { color: #c62828; font-weight: 600; }

/* ===================================================================== */
/*  LIGHT PAGES: MY VIDEOS, FINISHED, HELP — CAPCUT'S LOOK OUTSIDE THE    */
/*  EDITOR                                                               */
/* ===================================================================== */
/* CapCut is light everywhere you choose, look and post, and dark only where
   you edit, so the picture is the brightest thing there. The same here: the
   lists you open from Home are white sheets with grey rows and black buttons. */
body.mw-cloud .cloud-sheet-modal .cloud-files-box,
body.mw-cloud .cloud-sheet-modal .cloud-help-box {
  background: #fff; color: #0f1115; border: 0; box-shadow: 0 -10px 40px rgba(15, 23, 42, .18);
}
body.mw-cloud .cloud-sheet-modal { background: rgba(15, 17, 21, .35); }
.cloud-sheet-modal .cloud-files-title { color: #0f1115; }
.cloud-sheet-modal .cloud-files-pill { background: #f1f3f6; color: #0f1115; }
.cf-selecting .cloud-files-pill#cloudFilesSelect { background: #0f1115; color: #fff; }
.cloud-sheet-modal .cloud-files-x { background: #f1f3f6; color: #3b4250; }
body.mw-cloud .cloud-sheet-modal .cloud-files-up, body.mw-cloud .cloud-files-bar .primary-btn {
  background: #0f1115; color: #fff; border: 0; box-shadow: none;
}
.cloud-sheet-modal .cloud-files-icon { background: #f1f3f6; color: #0f1115; }
.cloud-sheet-modal .cloud-files-disk { color: #6b7280; }
.cloud-sheet-modal .cloud-files-disk b { color: #0f1115; }
.cloud-sheet-modal .cloud-files-disk.low b { color: #b42318; }
.cloud-sheet-modal .cloud-files-disk small { color: #9aa1ad; font-size: 12px; }
.cloud-sheet-modal .cf-disk-bar { background: #eef0f3; }
.cloud-sheet-modal .cloud-files-head { color: #5d6470; letter-spacing: .3px; }
.cloud-sheet-modal .cloud-files-head small { color: #9aa1ad; }
.cloud-sheet-modal .cf-row { background: #f7f8fa; }
.cloud-sheet-modal .cf-pic { background-color: #e7e9ee; box-shadow: none; }
.cloud-sheet-modal .cf-tx b { color: #0f1115; }
.cloud-sheet-modal .cf-tx small { color: #6b7280; }
.cloud-sheet-modal .cf-btn { color: #0f1115; }
.cloud-sheet-modal .cf-btn:active { background: #e9ecf1; }
.cloud-sheet-modal .cf-bin { color: #d92d20; }
.cloud-sheet-modal .cf-open { background: #0f1115; color: #fff; }
.cloud-sheet-modal .cf-sure { background: #fff1f0; }
.cloud-sheet-modal .cf-sure span { color: #b42318; }
.cloud-sheet-modal .cf-no { background: #eef0f3; color: #0f1115; }
.cloud-sheet-modal .cf-check { box-shadow: inset 0 0 0 2px #c4c9d2; }
.cloud-sheet-modal .cf-selecting .cf-row.chosen, .cloud-sheet-modal .cf-picking-multi .cf-row.chosen { background: #eaf2ff; box-shadow: inset 0 0 0 1.5px #1f6fe0; }
.cloud-sheet-modal .cf-selecting .cf-row.chosen .cf-check, .cloud-sheet-modal .cf-picking-multi .cf-row.chosen .cf-check { background: #1f6fe0; }
.cloud-sheet-modal .cv-act.cv-save { background: #0f1115; color: #fff; border-color: transparent; box-shadow: none; }
/* Delete all is a quiet grey button until it asks "for good?" — not a red
   one sitting beside Save all, waiting for a slip of the thumb */
.cloud-sheet-modal .cloud-files-group .cf-delall { background: #f1f3f6; border-color: transparent; color: #5d6470; box-shadow: none; }
.cloud-sheet-modal .cloud-files-group .cf-delall.sure { background: #d92d20; color: #fff; box-shadow: 0 0 0 3px rgba(217, 45, 32, .2); }
.cloud-sheet-modal .cloud-files-empty { color: #5d6470; }
.cloud-sheet-modal .cloud-files-empty b { color: #0f1115; }
.cloud-sheet-modal .cf-empty-art { background: #f1f3f6; color: #0f1115; }

/* A page of its own (AI Montage): the whole screen on a phone, like any of
   CapCut's pages — no gap above it, no grab handle, a solid header with no
   line under it: what scrolls up fades into it (.mw-softedge). */
@media (max-width: 900px) {
  .cp-panel.cp-full {
    top: 0; bottom: var(--kb, 0px); max-height: none; height: auto;
    border-radius: 0; box-shadow: none;
    transform: translateX(100%);
  }
  .cp-panel.cp-full.on { transform: none; }
  .cp-panel.cp-full .cp-grab { display: none; }
  .cp-panel.cp-full .cp-head { padding: calc(env(safe-area-inset-top) + 12px) 12px 12px 20px; background: inherit; }
  .cp-panel.cp-full .cp-title { font-size: 22px; }
}

/* ===================================================================== */
/*  POST ONLINE AND EVERY POP-UP PANEL, IN THE SAME LIGHT LOOK            */
/* ===================================================================== */
/* The Posts page and its sheets were a dark, glowing purple page in an app
   that is otherwise CapCut-light outside the editor. The page is built on
   colour variables, so it takes the light palette here; the few places that
   wrote white text straight in are put right below. Text that sits ON a
   video thumbnail (tiles, the preview, its pills) stays white. */
.cp-panel { background: #fff; color: #0f1115; box-shadow: 0 -12px 40px rgba(15, 23, 42, .16); }
.cp-grab { background: #d5d8de; }
.cp-title { color: #0f1115; }
.cp-x { background: #f1f3f6; color: #3b4250; }
.cp-link { color: #1f6fe0; }
.csb, .csb-sheet, .csb-sheet.cp-panel {
  --b-bg: #fff; --b-s1: #f6f7f9; --b-s2: #eef0f3; --b-s3: #fff;
  --b-line: rgba(15, 23, 42, .08); --b-t1: #0f1115; --b-t2: #5d6470; --b-t3: #8b909b;
  --b-acc: #1f6fe0; --b-grad: #0f1115;
  color: #0f1115;
}
.csb { background: #fff !important; }
.csb-sheet, .csb-sheet.cp-panel { background: #fff; }
.csb-head h1, .csb-h2 h2, .csb-empty b, .csb-ai-head b { color: #0f1115; }
.csb-round { background: #f1f3f6; color: #0f1115; }
/* the one black button, flat — no glow */
.csb-plus, .csb-cta, .csb-go { background: #0f1115; color: #fff; box-shadow: none; }
.csb-go:disabled, .csb-cta:disabled { background: #e9ebef; color: #9aa1ad; }
.csb-seg { background: #f1f3f6; }
.csb-seg button.on { background: #fff; color: #0f1115; box-shadow: 0 1px 4px rgba(15, 23, 42, .12); }
.csb-acc { background: #f6f7f9; color: #0f1115; border-color: transparent; }
.csb-acc.add { background: #fff; border-color: #cfd4dc; }
.csb-acc-plus { background: #eaf2ff; color: #1f6fe0; }
.csb-acc-pic { background-color: #e7e9ee; }
.csb-hero, .csb-src, .csb-when, .csb-act, .csb-more summary { color: #0f1115; }
.csb-src { border-color: rgba(15, 23, 42, .08); background: #f6f7f9; }
.csb-when { border-color: rgba(15, 23, 42, .1); background: #fff; }
.csb-act { background: #f1f3f6; }
.csb-facts span { background: #f1f3f6; color: #0f1115; }
.csb-handtodo { background: #eaf2ff; border-color: rgba(31, 111, 224, .35); color: #0f1115; }
.csb-ai { background: #f6f7f9; border-color: rgba(15, 23, 42, .08); }
/* the captions the AI wrote, on the light sheet: they kept the dark sheet's white
   (white on #f6f7f9, almost invisible), its pale blue times, mint tick and white shimmer */
.csb-sheet .csb-cap, .csb-sheet .csb-bcap { color: #0f1115; }
.csb-bpost { background: #fff; border-color: rgba(15, 23, 42, .08); }
.csb-bmain > small { color: #1f6fe0; }
.csb-bwait { color: #5d6470; }
.csb-ai .csb-shim { background-image: linear-gradient(90deg, rgba(15, 23, 42, .06) 0%, rgba(15, 23, 42, .14) 50%, rgba(15, 23, 42, .06) 100%); }
.csb-ai-st.ok { color: #16a34a; }
.csb-ai-st.busy { color: #1f6fe0; }
.csb-ai-st .csb-spin { border-color: rgba(31, 111, 224, .2); border-top-color: #1f6fe0; }
/* My videos, the scheduler's picker: the names under the pictures were white on white */
.cp-pick .cs-g, .cp-pick .cs-empty b { color: #0f1115; }
.csb-plan { background: #eaf2ff; color: #1e3a8a; }
.csb-style { background: #f1f3f6; border-color: transparent; color: #0f1115; }
.csb-names-btn { border-color: #cfd4dc; color: #5d6470; }
/* ACCOUNTS and a post's details, on the white sheet: their rows were the dark sheet's
   #1c1d23 cards with the platform's name in near-black, the linked name in mint, and a
   pale-green-on-pale-green "Everything is connected" */
.cp-panel .cs-plat, .cp-panel .cs-key, .cp-panel .cs-d-accts li { background: #f6f7f9; color: #0f1115; border: 1px solid rgba(15, 23, 42, .06); }
.cp-panel .cs-plat-tx b, .cp-panel .cs-key-tx b, .cp-panel .cs-d-accts b, .cp-panel .cs-step-tx > b, .cp-panel .cs-d-title { color: #0f1115; }
.cp-panel .cs-plat-tx small, .cp-panel .cs-key-tx small, .cp-panel .cs-d-accts small, .cp-panel .cs-step-tx small, .cp-panel .cs-setup-sub { color: #5d6470; }
.cp-panel .cs-step-tx small b { color: #0f1115; }
.cp-panel .cs-plat.linked .cs-plat-tx small, .cp-panel .cs-key.set .cs-key-tx small, .cp-panel .cs-d-accts li.ok small { color: #15803d; font-weight: 600; }
.cp-panel .cs-d-accts li.bad small { color: #b42318; }
.cp-panel .cs-d-accts li.warn small { color: #b45309; }
.cp-panel .cs-mini { background: #fff; color: #0f1115; box-shadow: inset 0 0 0 1px #d5d9e0; }
.cp-panel .cs-mini.accent { background: #1f6fe0; color: #fff; box-shadow: none; }
.cp-panel .cs-note { background: #eaf2ff; color: #1e3a8a; }
.cp-panel .cs-note.good { background: #dcfce7; color: #14532d; }
.cp-panel .cs-note.bad { background: #fdecea; color: #b42318; }
.cp-panel .cs-note.warn { background: #fff4e0; color: #8a4b08; }
.cp-panel .cs-steps { color: #3b4250; }
.cp-panel .cs-steps a, .cp-panel .cs-note a { color: #1f6fe0; }
.cp-panel .cs-step-n { background: #eaf2ff; color: #1f6fe0; }
.cp-panel .cs-pick { border-color: #d5d9e0; color: #5d6470; }
.cp-panel .cs-pick.on { color: #0f1115; background: #eaf2ff; }
.cp-panel .cs-more { color: #1f6fe0; }
.cp-panel .cs-spin { border-color: rgba(31, 111, 224, .2); border-top-color: #1f6fe0; }
.cp-panel .cs-d-when { color: #0f1115; }
.cp-panel .cs-d-cap { color: #3b4250; }
.cp-panel .cs-d-err { background: #fdecea; color: #b42318; }
/* the sheets' text boxes: the dark sheet's #1c1d23 fields with white text, on white */
.cp-panel .cs-input { background: #f6f7f9; border-color: #d5d9e0; color: #0f1115; }
.cp-panel .cs-input::placeholder { color: #8b909b; }
.cp-panel .cs-label { color: #3b4250; }
.cp-panel .cs-label small { color: #5d6470; }
/* the accounts a post goes to, on the light sheet: a chosen one kept the dark sheet's
   white name on its pale blue (unreadable) — dark names, the chosen ones in a clear blue
   chip with a blue tick, the others plain with a grey ring */
.csb-acc-pill { background: #f6f7f9; border-color: rgba(15, 23, 42, .1); color: #3b4250; }
.csb-acc-pill.on { background: #eaf2ff; border-color: #1f6fe0; color: #0f1115; }
.csb-acc-pill .csb-check { border-color: #c3c8d1; }
.csb-acc-pill.on .csb-check { background: #1f6fe0; color: #fff; }
/* the rest of the sheet that still wrote the dark sheet's white or pale text */
.csb-yt-in { color: #0f1115; }
.csb-yt-in::placeholder { color: #8b909b; }
.csb-names small, .csb-lbl { color: #5d6470; }
.csb-gap, .csb-snap { color: #3b4250; }
.csb-plan b { color: #0f1115; }
.csb-igsong { background: #f6f7f9; color: #0f1115; }
.csb-igsong.on { background: #fbeaf4; }
.csb-igsong .csb-check { border-color: #c3c8d1; }
.csb-igsong.on .csb-check { background: #c13584; color: #fff; }
.csb-send-err { background: #fdecea; color: #b42318; }
.csb-names { border-top-color: rgba(15, 23, 42, .08); }
.csb-note { color: #b45309; }
.csb-sheet .cs-chip.on { background: #0f1115; color: #fff; border-color: #0f1115; }
.csb-sheet .cs-chip { background: #f1f3f6; color: #0f1115; border-color: transparent; }
.csb-strip-it { background-color: #e7e9ee; }
.csb-prev { background-color: #e7e9ee; }
/* the Posts page's top row stays put and solid: the title and New post used
   to slide UNDER the back button when the page scrolled */
.csb-top { position: relative; z-index: 3; background: #fff; padding-bottom: 8px; }
/* Your space: grey boxes and the one black button, like sign in */
.cp-panel .pf-in { background: #f1f3f6; color: #0f1115; border: 2px solid transparent; }
.cp-panel .pf-in::placeholder { color: #9aa1ad; }
.cp-panel .pf-in:focus { outline: none; background: #fff; border-color: #1f6fe0; }
body.mw-cloud .cp-panel .primary-btn { background: #0f1115; color: #fff; border: 0; box-shadow: none; }
.cp-panel .pf-sec, .cp-panel hr { border-color: rgba(15, 23, 42, .08); }
/* How do I…? (the guide's help sheet): light on the phone, like every other sheet */
body.mw-cloud .mwg-help { background: rgba(15, 17, 21, .35); }
body.mw-cloud .mwg-sheet { background: #fff; color: #0f1115; box-shadow: 0 -10px 40px rgba(15, 23, 42, .18); }
body.mw-cloud .mwg-sheet h2 .mwg-close { background: #f1f3f6; color: #3b4250; }
body.mw-cloud .mwg-tile, body.mw-cloud .mwg-tile:nth-child(n) { background: #f6f7f9; color: #0f1115; box-shadow: none; }
body.mw-cloud .mwg-reset { color: #1f6fe0; }
.cj-server:empty { display: none; }
/* Background jobs: its cards in the sheet's own light look. They kept the
   dark editor's near-black boxes on the white sheet — the odd black-and-white. */
.cp-jobs .cj-card { background: #f6f7f9; border-color: transparent; color: #0f1115; }
.cp-jobs .cj-card.run { background: linear-gradient(180deg, rgba(31,111,224,.08), rgba(31,111,224,.02) 70%), #f6f7f9; border-color: rgba(31,111,224,.22); }
.cp-jobs .cj-ring-lg .rt { stroke: rgba(15,23,42,.1); }
.cp-jobs .cj-ring-lg .rf { stroke: #1f6fe0; filter: none; }
.cp-jobs .cj-pc, .cp-jobs .cj-title { color: #0f1115; }
.cp-jobs .cj-step { color: #5d6470; }
.cp-jobs .cj-meta { color: #8b909b; }
.cp-jobs .cj-bar { background: rgba(15,23,42,.08); }
.cp-jobs .cj-bar i { background: linear-gradient(90deg, #1f6fe0, #4d95ef, #1f6fe0); background-size: 200% 100%; }
.cp-jobs .cj-btn { background: #eceef2; color: #0f1115; }
.cp-jobs .cj-btn.danger { background: #fff1f0; color: #d92d20; }
.cp-jobs .cj-btn.accent { background: #0f1115; color: #fff; box-shadow: none; }
.cp-jobs .cj-card.done .cj-badge { background: #e8f8ee; color: #16a34a; }
.cp-jobs .cj-card.fail .cj-badge { background: #fff1f0; color: #d92d20; }
.cp-jobs .cj-card.stopped .cj-badge { background: #eceef2; color: #5d6470; }
.cp-jobs .cj-x { color: #8b909b; }
.cp-jobs .cj-files li { background: #fff; }
.cp-jobs .cj-mini { background: #eceef2; color: #0f1115; }
.cp-jobs .cj-mini.accent { background: #0f1115; color: #fff; }
.cp-jobs .cj-empty { color: #5d6470; }
.cp-jobs .cj-empty b { color: #0f1115; }
.cp-jobs .cj-empty-art { background: #f1f3f6; color: #0f1115; }
.cp-jobs .cj-server { color: #8b909b; }
.cp-panel .pf-btn { background: #0f1115; color: #fff; box-shadow: none; }
.cp-panel .pf-sec { border-top-color: rgba(15, 23, 42, .08); }
.cp-panel .pf-tx small, .cp-panel .pf-sec > b { color: #6b7280; }
.cp-panel .pf-mini { background: #f1f3f6; color: #0f1115; border: 0; box-shadow: none; }
.cp-panel .pf-mini.danger { background: #fff1f0; color: #d92d20; }

/* The Video Studio's projects: the page before the editor, light like Home
   (the editor itself stays dark, as CapCut's does) */
body.mw-cloud.mw-projects .cloud-proj { background: #fff !important; color: #0f1115; }
.cloud-proj .cs-top h1 { color: #0f1115; }
.cloud-proj .cs-back { background: #f1f3f6; color: #0f1115; }
.cloud-proj .pv-new { background: #0f1115; color: #fff; box-shadow: none; }
.cloud-proj .pv-new-art { background: rgba(255, 255, 255, .16); }
.cloud-proj .pv-h { color: #0f1115; }
.cloud-proj .pv-h small, .cloud-proj .pv-none, .cloud-proj .pj-hint { color: #6b7280; }
.cloud-proj .pj-row { background: #f6f7f9; box-shadow: none; }
.cloud-proj .pj-row.now { box-shadow: inset 0 0 0 1.5px #1f6fe0; }
.cloud-proj .pj-main { color: #0f1115; }
.cloud-proj .pj-pic { background-color: #e7e9ee; background-image: none; color: #1f6fe0; }
.cloud-proj .pj-pic[style*="background-image"] { background-size: cover; background-position: center; }
.cloud-proj .pj-tx small { color: #6b7280; }
.cloud-proj .pj-now { color: #1f6fe0; }
.cloud-proj .pj-go { background: #e9ecf1; }
.cloud-proj .pj-more { background: #eef0f3; color: #0f1115; }
.cloud-proj .pj-del { color: #d92d20; }
.cloud-proj .pj-empty, .cloud-proj .pj-empty b { color: #0f1115; }
.cloud-proj .pj-empty-art { background: #eaf2ff; color: #1f6fe0; }
.cloud-proj .pv-cont { background: #f6f7f9; color: #0f1115; box-shadow: inset 0 0 0 1.5px #1f6fe0; }
.cloud-proj .pv-cont-k { color: #1f6fe0; }
.cloud-proj .pv-cont-go { background: #0f1115; color: #fff; }
.cloud-proj .pv-cur-del { color: #d92d20; }

/* ⭐ Presets on a phone: the studio's dark sheet, its blue buttons */
body.mw-cloud #vePresetModal .ve-pre-box { background: #15161b; border: 0; }
body.mw-cloud #vePresetModal .cap-head { padding: 16px 18px 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
body.mw-cloud #vePresetModal .cap-head h2 { font-size: 20px; font-weight: 800; color: #fff; }
body.mw-cloud #vePresetModal .cap-head .ghost-btn { width: 40px; height: 40px; border-radius: 12px; font-size: 16px; }
body.mw-cloud #vePresetModal .ve-pre-body { padding: 14px 16px calc(18px + env(safe-area-inset-bottom)); }
body.mw-cloud #vePresetModal .primary-btn { background: #1f6fe0; border-color: #1f6fe0; color: #fff; border-radius: 12px; }
body.mw-cloud #vePresetModal .ghost-btn { background: #1c1d23; border: 1px solid rgba(255,255,255,.08); color: #fff; border-radius: 12px; }
body.mw-cloud #vePresetModal .ve-pre-del.sure { background: #c62828; border-color: #c62828; }
body.mw-cloud #vePresetModal .ve-pre-save input { background: #1c1d23; color: #fff; border: 1px solid rgba(255,255,255,.12); }
body.mw-cloud #vePresetModal .ve-pre-card, body.mw-cloud #vePresetModal .ve-pre-save { background: #1c1d23; border-color: rgba(255,255,255,.08); }
body.mw-cloud #vePresetModal .ve-pre-intro, body.mw-cloud #vePresetModal .ve-pre-line, body.mw-cloud #vePresetModal .ve-pre-empty, body.mw-cloud #vePresetModal .ve-pre-label { color: #a1a6b4; }


/* The colour iOS 26 gives the bar above the app (cloud-boot.js topTint): a strip on the
   top edge, solid, full width, above everything, painted the colour of what is under it. */
.mw-edge-tint { position: fixed; top: 0; left: 0; right: 0; height: 6px; z-index: 2147483646; }
/* Home and the sign-in page open on a blue banner. Pulled down from the top, iOS stretched
   them and showed the white page behind it — and the bar above turned white with it. They
   do not stretch: they scroll, and stop at the top (nor does the app as a whole). */
html, body.mw-cloud, body.mw-cloud .cloud-home .ch-scroll, body.mw-cloud #cloudGate { overscroll-behavior-y: none; }
/* …and under it, while the page is scrolled, the soft edge it fades into (never read, never in the way) */
.mw-edge-fade { position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 2147483645; pointer-events: none; opacity: 0; }

/* A page's title bar, once what is under it is scrolled: no line, no hard edge — the content
   fades into the bar's own colour (cloud-boot.js sets --soft-rgb and .on). */
.mw-softedge { position: relative; z-index: 20; }
.mw-softedge::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 28px; pointer-events: none;
  background: linear-gradient(to bottom, rgb(var(--soft-rgb, 255, 255, 255)) 0%, rgba(var(--soft-rgb, 255, 255, 255), .85) 30%, rgba(var(--soft-rgb, 255, 255, 255), 0) 100%);
  opacity: 0; transition: opacity .18s ease;
}
.mw-softedge.on::after { opacity: 1; }

/* ===================================================================== */
/*  THE LAUNCH SCREEN                                                    */
/* ===================================================================== */
/* Opening the app: the icon on Home's blue with a thin bar running under it,
   until the server says who is here — never the sign-in page flashing past.
   If the script never gets to take it away, it takes itself away (12s). */
.mw-splash {
  position: fixed; inset: 0; z-index: 2147483000;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #0a4fc4 0%, #1557d6 40%, #1f6fe0 100%);
  transition: opacity .32s ease, visibility 0s linear .32s;
  animation: mwSplashGiveUp .3s ease 12s forwards;
}
.mw-splash.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.mw-splash-mid { display: flex; flex-direction: column; align-items: center; transform: translateY(-4vh); }
.mw-splash-icon {
  width: 88px; height: 88px; border-radius: 22px; display: block;
  box-shadow: 0 18px 44px rgba(3, 26, 80, .45), 0 0 0 1px rgba(255, 255, 255, .14);
  animation: mwSplashIn .5s cubic-bezier(.2, .9, .3, 1.2) both;
}
.mw-splash-name {
  margin-top: 18px; color: #fff; font-size: 21px; font-weight: 800; letter-spacing: -.3px;
  animation: mwSplashUp .5s ease .08s both;
}
.mw-splash-bar {
  position: relative; overflow: hidden; margin-top: 22px;
  width: 132px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .22);
  animation: mwSplashUp .5s ease .14s both;
}
.mw-splash-bar i {
  position: absolute; top: 0; bottom: 0; left: 0; width: 42%; border-radius: 4px;
  background: linear-gradient(90deg, rgba(255,255,255,0), #fff 60%, rgba(255,255,255,.9));
  box-shadow: 0 0 10px rgba(255, 255, 255, .7);
  animation: mwSplashRun 1.1s cubic-bezier(.45, 0, .25, 1) infinite;
}
@keyframes mwSplashIn { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
@keyframes mwSplashUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes mwSplashRun { from { transform: translateX(-110%); } to { transform: translateX(250%); } }
@keyframes mwSplashGiveUp { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) {
  .mw-splash-icon, .mw-splash-name, .mw-splash-bar { animation: none; }
  .mw-splash-bar i { animation-duration: 2.2s; }
}

/* ===================================================================== */
/*  🎨 THE FLYER STUDIO (cloud-flyer.js) — Home's third door, the Make    */
/*  page and the pick in the app's light look, the editor dark like       */
/*  CapCut's so the flyer is the brightest thing on the screen.           */
/* ===================================================================== */
/* (the old Flyer Studio card's styles went with it: Flyers is an app icon on Home now) */
.ch-shot-flyer { display: grid; place-items: center; background: linear-gradient(170deg, #6d28d9, #1a0638); }
.hs-flyer { position: relative; display: flex; flex-direction: column; align-items: center; transform: rotate(-4deg); }
.hs-flyer b { font: 900 30px/0.9 Impact, "Arial Black", sans-serif; letter-spacing: -.5px; color: #fff; text-shadow: 2px 3px 0 rgba(0, 0, 0, .35); }
.hs-flyer em { margin-top: -6px; font: italic 600 28px/1 "Snell Roundhand", "Brush Script MT", cursive; color: #f5c542; }
.hs-flyer i { margin-top: 8px; width: 74px; height: 12px; border-radius: 6px; background: #f5c542; }

.cp-flyer { background: #fff; color: #0f1115; }
.cp-flyer .cp-foot { display: flex; gap: 10px; padding: 10px 16px 12px; }
.fs-ic { width: 20px; height: 20px; flex: none; }
.fs-loading, .fs-status { padding: 14px 4px; font-size: 14px; color: #5d6470; display: flex; align-items: center; gap: 8px; }
.fs-sec { padding: 8px 0 10px; }
.fs-sec h3 { margin: 4px 2px 10px; font-size: 16px; font-weight: 750; letter-spacing: -.2px; color: #0f1115; }
.fs-sec h3 small { margin-left: 6px; font-size: 12.5px; font-weight: 500; color: #8b909b; }
.fs-occs { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; }
.fs-occs::-webkit-scrollbar { display: none; }
.fs-occ { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 132px; padding: 11px 13px; border: 0; border-radius: 14px;
  text-align: left; color: #0f1115; background: #f3f4f7; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06); cursor: pointer; }
.fs-occ b { font-size: 14.5px; font-weight: 700; }
.fs-occ small { font-size: 12px; color: #6b7280; }
.fs-occ.season { background: linear-gradient(135deg, #fff7e0, #ffeef8); }
.fs-occ.season b::before { content: '✦ '; color: #d97706; }
.fs-occ.on { color: #fff; background: #111318; box-shadow: none; }
.fs-occ.on small { color: rgba(255, 255, 255, .72); }
.fs-preset { position: relative; padding-right: 34px; cursor: pointer; background: #f3efff; box-shadow: inset 0 0 0 1px rgba(109, 40, 217, .18); }
.fs-preset b { color: #4c1d95; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-preset small { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-preset-x { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; font-size: 16px; line-height: 24px; color: #6b7280; background: rgba(255, 255, 255, .8); cursor: pointer; }
.fs-preset-add { background: #fff; box-shadow: none; border: 1.5px dashed #c4b5fd; }
.fs-preset-add b { color: #6d28d9; }
/* the form scrolls the box being typed into sight; a time box shows the wheel, not a keyboard */
.fs-f input[type="time"], .fs-f input[type="date"] { text-align: left; }
.fs-sps { display: flex; gap: 12px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 4px; scrollbar-width: none; }
.fs-sps::-webkit-scrollbar { display: none; }
.fs-sp { flex: none; width: 76px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: #0f1115; cursor: pointer; }
.fs-sp-pic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; font-size: 22px; font-weight: 700;
  color: #5d6470; background: linear-gradient(160deg, #eef0f4, #dfe3ea); box-shadow: inset 0 0 0 2px transparent; }
.fs-sp-pic img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.fs-sp.on .fs-sp-pic { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #6d28d9; }
.fs-sp small { max-width: 100%; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-sp-bank { font-style: normal; font-size: 10.5px; font-weight: 600; color: #6d28d9; margin-top: -3px; }
.fs-sp-add .fs-sp-pic { background: #fff; box-shadow: inset 0 0 0 1.5px #cfd4dc; }
.fs-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fs-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fs-f.fs-wide, .fs-more { grid-column: 1 / -1; }
.fs-f span { font-size: 12.5px; font-weight: 600; color: #5d6470; }
.fs-f span i { font-weight: 400; font-style: normal; color: #9aa1ad; }
.fs-f input, .fs-f textarea, .fs-kit select, .fs-svc input { width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 12px;
  font-size: 16px; color: #0f1115; background: #f3f4f7; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06); -webkit-appearance: none; appearance: none; }
.fs-f textarea { resize: vertical; }
.fs-more { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fs-more summary { grid-column: 1 / -1; padding: 6px 2px; font-size: 14px; font-weight: 600; color: #1f6fe0; cursor: pointer; }
.fs-seg { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: #f1f3f6; }
.fs-seg button { flex: 1; min-height: 38px; border: 0; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: #5d6470; background: transparent; cursor: pointer; }
.fs-seg button.on { color: #0f1115; background: #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, .12); }
.fs-kit-link { display: flex; align-items: center; gap: 12px; width: 100%; margin: 8px 0 4px; padding: 13px 14px; border: 0; border-radius: 14px; text-align: left;
  color: #0f1115; background: #f6f7f9; cursor: pointer; }
.fs-kit-link span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fs-kit-link b { font-size: 15px; }
.fs-kit-link small { font-size: 12.5px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-chev { transform: rotate(180deg); color: #9aa1ad; }
.fs-note { margin: 10px 2px 4px; font-size: 12.5px; line-height: 1.45; color: #6b7280; }
.fs-go { flex: 1; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 16px;
  font-size: 16.5px; font-weight: 750; color: #fff; cursor: pointer; background: linear-gradient(115deg, #4c1d95, #7c3aed 55%, #c026d3); }
.fs-go:disabled { opacity: .5; }
.fs-ghost { flex: 1; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 14px;
  font-size: 14.5px; font-weight: 650; color: #0f1115; background: #f1f3f6; cursor: pointer; }
.fs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fs-card { display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; color: #0f1115; }
.fs-card canvas { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 8px 22px rgba(15, 23, 42, .18); background: #eee; }
.fs-card small { font-size: 12.5px; font-weight: 600; color: #5d6470; }
/* made by Cloudflare's free AI (madeByTag): its orange, the model under it */
.fs-allow { margin: -6px 0 10px; font-size: 12.5px; line-height: 1.35; color: var(--muted, #6b7280); text-align: center; }
.fs-foot .fs-ghost[disabled], .fs-ghost[disabled] { opacity: .45; pointer-events: none; }
.fs-by { align-self: center; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; margin-top: -2px; padding: 3px 9px; border-radius: 999px;
  background: #fff1e6; color: #b4530a; font-style: normal; font-size: 11px; font-weight: 700; line-height: 1.25; text-align: center; }
.fs-by b { color: #f38020; font-size: 12px; }
.fs-by i { flex-basis: 100%; font-style: normal; font-weight: 600; font-size: 10px; color: #c2702b; }
.fs-card:active canvas { transform: scale(.98); }
.fs-ph { aspect-ratio: 4 / 5; border-radius: 12px; background: linear-gradient(100deg, #eef0f4 30%, #f8f9fb 50%, #eef0f4 70%); background-size: 300% 100%; animation: fs-shim 1.4s linear infinite; }
@keyframes fs-shim { to { background-position: -150% 0; } }
.fs-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #c4b5fd; border-top-color: #6d28d9; animation: fs-rot .8s linear infinite; }
@keyframes fs-rot { to { transform: rotate(360deg); } }

/* the editor */
.cp-flyer.fs-editing { background: #17181c; color: #f5f6f8; }
.cp-flyer.fs-editing .cp-head { display: none; }
.cp-flyer.fs-editing .cp-body { padding: 0; overflow: hidden; display: flex; }
.fs-ed { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; width: 100%; }
.fs-topbar { flex: none; display: flex; align-items: center; gap: 6px; padding: calc(env(safe-area-inset-top) + 8px) 10px 8px; }
.fs-tb-sp { flex: 1; }
.fs-tb { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border: 0; border-radius: 12px;
  font-size: 14px; font-weight: 700; color: #f5f6f8; background: #26272e; cursor: pointer; }
.fs-tb:disabled { opacity: .35; }
.fs-tb.fs-post { color: #fff; background: linear-gradient(115deg, #6d28d9, #c026d3); }
.fs-stage { position: relative; flex: 1; min-height: 0; min-width: 0; display: grid; place-items: center; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.fs-stage canvas { display: block; max-width: calc(100% - 16px); max-height: calc(100% - 16px); box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }
.fs-selbox { position: absolute; pointer-events: none; box-sizing: border-box; border: 1.5px solid #a78bfa; border-radius: 3px; transform-origin: center; }
.fs-selbox.hidden { display: none; }
.fs-h { position: absolute; width: 26px; height: 26px; border-radius: 50%; pointer-events: auto; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .45); }
.fs-h::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: #7c3aed; }
.fs-h-br { right: -14px; bottom: -14px; }
.fs-h-rot { left: 50%; top: -42px; margin-left: -13px; }
.fs-h-rot::before { content: ''; position: absolute; left: 12px; top: 26px; width: 1.5px; height: 16px; background: #a78bfa; }
.fs-tools { flex: none; padding: 6px 0 calc(env(safe-area-inset-bottom) + 6px); background: #1d1e23; }
.fs-tools-row { display: flex; gap: 2px; overflow-x: auto; padding: 0 8px; scrollbar-width: none; }
.fs-tools-row::-webkit-scrollbar { display: none; }
.fs-tool { flex: none; width: 70px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 9px 2px; border: 0; border-radius: 12px;
  font-size: 11.5px; color: #e5e7eb; background: none; cursor: pointer; }
.fs-tool:active { background: #2a2b31; }
.fs-tool .fs-ic { width: 23px; height: 23px; }
.fs-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; max-height: 52%; display: flex; flex-direction: column;
  padding: 12px 14px calc(env(safe-area-inset-bottom) + 10px); border-radius: 18px 18px 0 0; background: #222329; box-shadow: 0 -10px 30px rgba(0, 0, 0, .45); }
.fs-sheet.hidden { display: none; }
.fs-sheet-in { flex: 1; min-height: 0; overflow-y: auto; }
.fs-sheet h4 { margin: 4px 0 8px; font-size: 13px; font-weight: 650; color: #aeb0b9; }
.fs-sheet-done { flex: none; margin-top: 10px; min-height: 44px; border: 0; border-radius: 12px; font-size: 15px; font-weight: 700; color: #111; background: #fff; cursor: pointer; }
.fs-textedit { width: 100%; box-sizing: border-box; padding: 12px; border: 0; border-radius: 12px; font-size: 17px; color: #fff; background: #2f3038; resize: none; }
.fs-row, .fs-fx { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.fs-chip { min-height: 38px; padding: 0 14px; border: 0; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: #e5e7eb; background: #2f3038; cursor: pointer; }
.fs-chip.on { color: #111; background: #fff; }
.fs-slider { display: grid; grid-template-columns: 96px 1fr 40px; align-items: center; gap: 10px; padding: 7px 0; font-size: 13.5px; color: #d1d5db; }
.fs-slider input { width: 100%; accent-color: #a78bfa; }
.fs-slider output { text-align: right; font-variant-numeric: tabular-nums; color: #9ca3af; }
.fs-fonts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fs-font { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 4px 8px; border: 0; border-radius: 12px; font-size: 26px; line-height: 1; color: #fff; background: #2f3038; cursor: pointer; }
.fs-font small { font: 500 10.5px/1.2 -apple-system, system-ui, sans-serif; color: #9ca3af; }
.fs-font.on { box-shadow: inset 0 0 0 2px #a78bfa; }
.fs-swatches { display: flex; flex-wrap: wrap; gap: 9px; margin: 8px 0; }
.fs-sw { position: relative; width: 34px; height: 34px; border: 0; border-radius: 50%; padding: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); overflow: hidden; }
.fs-sw.on { box-shadow: 0 0 0 2px #222329, 0 0 0 4px #a78bfa; }
.fs-sw-pick input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.fs-grad { width: 54px; height: 34px; border: 0; border-radius: 9px; cursor: pointer; }
.fs-pals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fs-pal { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; padding: 0; overflow: hidden; border: 0; border-radius: 12px; background: #2f3038; cursor: pointer; }
.fs-pal i { height: 34px; }
.fs-pal small { grid-column: 1 / -1; padding: 6px 4px; font-size: 11.5px; color: #e5e7eb; }
.fs-looks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fs-look { display: flex; flex-direction: column; gap: 5px; padding: 0; border: 0; background: none; color: #e5e7eb; font-size: 11.5px; cursor: pointer; }
.fs-look canvas { width: 100%; height: auto; border-radius: 8px; }
.fs-look.on canvas { outline: 2px solid #a78bfa; outline-offset: 2px; }

/* the picture banks */
.fs-bank { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.fs-bank-sm { grid-template-columns: repeat(5, 1fr); margin-top: 8px; }
.fs-bank-pic { position: relative; aspect-ratio: 3 / 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; overflow: hidden;
  border: 0; border-radius: 12px; cursor: pointer; color: #5d6470; font-size: 11.5px;
  background: repeating-conic-gradient(#e9ebef 0 25%, #f7f8fa 0 50%) 0 0 / 14px 14px; }
.fs-bank-pic img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.fs-bank-pic.on { box-shadow: 0 0 0 3px #7c3aed; }
.fs-bank-ai, .fs-bank-add { background: #f3f4f7; }
.fs-sheet .fs-bank-pic { background: repeating-conic-gradient(#2f3038 0 25%, #3a3b44 0 50%) 0 0 / 14px 14px; }
.fs-sheet .fs-bank-pic.on { box-shadow: 0 0 0 3px #a78bfa; }

/* My church */
.cp-flyer-kit .cp-foot { display: flex; gap: 10px; }
.fs-kit .fs-f { margin-bottom: 10px; }
.fs-logo-row { display: flex; gap: 12px; align-items: flex-end; }
.fs-logo { flex: none; width: 74px; height: 74px; margin-bottom: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 0; border-radius: 16px; overflow: hidden; color: #5d6470; background: #f3f4f7; box-shadow: inset 0 0 0 1.5px #cfd4dc; cursor: pointer; }
.fs-logo img { width: 100%; height: 100%; object-fit: contain; }
.fs-logo small { font-size: 11px; }
.fs-kit-sp { padding: 10px 0; border-bottom: 1px solid rgba(15, 23, 42, .07); }
.fs-kit-sp-top { display: flex; gap: 8px; align-items: center; }
.fs-kit-sp-top input { flex: 1; min-width: 0; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 12px; font-size: 16px; font-weight: 600; background: #f3f4f7; }
.fs-x { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 12px; color: #b91c1c; background: #fef2f2; cursor: pointer; }
.fs-svc { display: grid; grid-template-columns: 1fr 1.3fr 0.9fr 40px; gap: 6px; margin-bottom: 8px; align-items: center; }
.fs-svc select:last-of-type { grid-column: 1 / 4; }
.fs-svc .fs-x { grid-row: 1; grid-column: 4; }
.fs-kit .fs-ghost { width: 100%; margin-top: 8px; }
/* the rest of the designs, after the board's ten */
.fs-pick .fs-more { display: flex; width: 100%; margin-top: 14px; }
.fs-inspo em { position: absolute; left: 4px; bottom: 4px; padding: 1px 5px; border-radius: 6px; font-style: normal; font-size: 10px; font-weight: 700; color: #fff; background: rgba(22, 163, 74, .9); }
.fs-inspo img { object-fit: cover; object-position: center; }

.fs-bulk { display: flex; align-items: center; gap: 12px; width: 100%; margin: 10px 0 0; padding: 12px 14px; border: 0; border-radius: 14px; text-align: left;
  color: #4c1d95; background: #f3eefe; box-shadow: inset 0 0 0 1px rgba(109, 40, 217, .15); cursor: pointer; }
.fs-bulk span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fs-bulk b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-bulk small { font-size: 12px; color: #6d28d9; }

/* ===================================================================== */
/*  HOME — CHURCH SPACE'S OWN (design D, "app icons")                     */
/* ===================================================================== */
/* A soft sky-blue page, a deep-blue-to-sky New project card, the tools as
   glossy app icons each in its own colour, this week's services, a bottom bar.
   Inspired by the calm of CapCut's front page, in nobody's colours but ours.
   (Sky blue replaced the first lilac at the church's request.) */
body.mw-cloud.mw-home .cloud-home { background: #eaf5fd; color: #0d1b2c; }
.cloud-home .ch-scroll { padding: 0 20px calc(100px + env(safe-area-inset-bottom)); }
.cloud-home .ch-top { margin: 0; padding: calc(10px + env(safe-area-inset-top)) 0 0; min-height: 56px; }
.cloud-home .ch-brand { padding: 0; gap: 10px; background: none; border-radius: 0; }
.cloud-home .ch-logo { width: 36px; height: 36px; border-radius: 12px; font-size: 18px; color: #fff;
  background: linear-gradient(140deg, #0284c7, #38bdf8); box-shadow: 0 6px 16px rgba(2, 132, 199, .28); }
.cloud-home .ch-name { font-size: 21px; font-weight: 800; letter-spacing: -.4px; color: #0d1b2c; }
.cloud-home .ch-round, .cloud-home .ch-ask .mwg-ask { width: 36px; height: 36px; border: 0; border-radius: 50%;
  color: #0d1b2c; background: #fff; box-shadow: 0 1px 3px rgba(13, 27, 44, .1); font-size: 16px; }
.cloud-home .ch-round.ch-me { color: #0284c7; background: #fff; font-weight: 800; }
.cloud-home .ch-help .ch-q { width: 20px; height: 20px; border-width: 1.8px; font-size: 12px; }
.cloud-home .ch-hello { margin: 14px 2px 0; font-size: 15px; font-weight: 600; color: #5b6b80; }

.ch-new { position: relative; width: 100%; min-height: 138px; margin: 12px 0 0; padding: 22px 92px 22px 22px; border: 0; border-radius: 28px;
  overflow: hidden; display: flex; align-items: center; text-align: left; color: #fff;
  background: linear-gradient(120deg, #0369a1, #0ea5e9 58%, #7dd3fc); box-shadow: 0 14px 30px rgba(2, 132, 199, .30); }
.ch-new::before { content: ''; position: absolute; right: -50px; top: -70px; width: 240px; height: 240px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.ch-new:active { transform: scale(.985); }
.ch-new-tx { position: relative; display: flex; flex-direction: column; gap: 5px; }
.ch-new-tx b { font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.ch-new-tx span { font-size: 14px; line-height: 1.35; color: rgba(255, 255, 255, .88); }
.ch-new-tx small { align-self: flex-start; margin-top: 4px; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, .2); }
.ch-new-tx small:empty { display: none; }
.ch-new-plus { position: absolute; right: 20px; top: 50%; width: 58px; height: 58px; margin-top: -29px; border-radius: 19px;
  display: grid; place-items: center; font-size: 38px; font-weight: 300; line-height: 1; color: #0284c7; background: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22); }

.cloud-home .ch-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 8px; margin: 22px -4px 0; }
.cloud-home .ch-tool { gap: 8px; padding: 6px 2px; background: none; color: #0d1b2c; }
.cloud-home .ch-tool:active { background: none; transform: scale(.94); }
.ch-ti { position: relative; width: 64px; height: 64px; border-radius: 21px; display: grid; place-items: center; color: #fff;
  box-shadow: 0 8px 18px rgba(13, 27, 44, .14), inset 0 1px 0 rgba(255, 255, 255, .35); }
.ch-ti > .mi { width: 28px; height: 28px; margin: 0; }
.ch-ti.t-shorts { background: linear-gradient(140deg, #fb923c, #ef4444); }
.ch-ti.t-caps { background: linear-gradient(140deg, #22d3ee, #3b82f6); }
.ch-ti.t-flyer { background: linear-gradient(140deg, #fbbf24, #d97706); }
.ch-ti.t-montage { background: linear-gradient(140deg, #c084fc, #7c3aed); }
.ch-ti.t-post { background: linear-gradient(140deg, #f472b6, #be185d); }
.ch-ti.t-up { background: linear-gradient(140deg, #4ade80, #15803d); }
.ch-ti .ch-badge { top: -5px; right: -5px; }
.cloud-home .ch-tool-tx { font-size: 13.5px; font-weight: 650; }

.ch-week { margin-top: 26px; }
.ch-week h2, .cloud-home .ch-sec h2 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 2px 12px; font-size: 20px; font-weight: 800; letter-spacing: -.3px; color: #0d1b2c; }
.cloud-home .ch-link { color: #0284c7; font-size: 14px; font-weight: 700; }
.ch-week-row { display: flex; gap: 10px; overflow-x: auto; margin: 0 -20px; padding: 2px 20px 8px; scrollbar-width: none; }
.ch-week-row::-webkit-scrollbar { display: none; }
.ch-day { flex: none; width: 146px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 14px; border: 0; border-radius: 20px;
  text-align: left; color: #0d1b2c; background: #fff; box-shadow: 0 1px 3px rgba(13, 27, 44, .07); }
.ch-day small { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; color: #0ea5e9; }
.ch-day b { width: 100%; min-height: 2.5em; font-size: 15.5px; font-weight: 750; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ch-day span { margin-top: 8px; padding: 6px 11px; border-radius: 99px; font-size: 12px; font-weight: 700; color: #fff; background: #0d1b2c; }
.ch-day.season { background: linear-gradient(140deg, #fff7e0, #e6f4ff); }
.ch-day-set { width: 100%; }
.ch-day-set span { background: #0284c7; }

.cloud-home .ch-sec { margin-top: 26px; }
.cloud-home .ch-foot-note { color: #7a8798; }

.ch-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; justify-content: space-around;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 -1px 0 #dcecf8; }
.ch-bar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0; border: 0; background: none;
  font-size: 11px; font-weight: 600; color: #8b97a8; }
.ch-bar button .mi { width: 23px; height: 23px; margin: 0; }
.ch-bar button.on { color: #0284c7; font-weight: 800; }
@media (min-width: 900px) { .ch-bar { display: none; } .cloud-home .ch-scroll { padding-bottom: 40px; } }
/* one help button on Home (the guide's own "?" sits on the other screens) */
.cloud-home .ch-ask { display: none; }

/* the church picture library (owner's page) */
.fs-lib-bar { height: 10px; border-radius: 999px; background: rgba(127,127,127,.18); overflow: hidden; margin: 6px 0 8px; }
.fs-lib-bar i { display: block; height: 100%; background: linear-gradient(90deg, #f38020, #f5c542); border-radius: inherit; }
.fs-lib-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fs-lib-pic { position: relative; margin: 0; border-radius: 10px; overflow: hidden; background: rgba(127,127,127,.12); }
.fs-lib-pic img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.fs-lib-pic figcaption { font-size: 10.5px; line-height: 1.25; padding: 4px 6px 6px; color: var(--muted, #6b7280); }
.fs-lib-x { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 17px; line-height: 26px; padding: 0; cursor: pointer; }
.fs-lib h3 small { font-weight: 500; opacity: .6; }
.csb-play[data-c="play"] { cursor: pointer; z-index: 2; width: 52px; height: 52px; }

/* the cross in the logos: drawn, white on the tile (the ✝ character is a purple emoji on iPhones) */
.mw-cross { display: block; width: 62%; height: 62%; margin: auto; }

/* the public page's way in, on the sign-in screen */
/* under the sign-in card, on the gate's white page: the public page's link */
#cloudGate .cloud-gate-hello { display: block; margin: -8px 14px 28px; padding: 14px 16px; border-radius: 16px; background: #eef6fd; text-align: center; font-size: 15px; line-height: 1.4; color: #3b4250; text-decoration: none; }
#cloudGate .cloud-gate-hello b { color: #0369a1; text-decoration: underline; text-underline-offset: 3px; }
/* the owner's enquiries (from the public page) */
.ch-enq { display: flex; align-items: center; gap: 12px; width: 100%; margin: 12px 0 0; padding: 14px 16px; border: 1px solid #d7e6f3; border-radius: 18px; background: #fff; color: #0d1b2c; text-align: left; font: inherit; cursor: pointer; }
.ch-enq.new { border-color: #38bdf8; box-shadow: 0 8px 22px rgba(2, 132, 199, .16); }
.ch-enq-ic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, #0284c7, #38bdf8); }
.ch-enq-ic .mi { width: 20px; height: 20px; }
.ch-enq-tx { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ch-enq-tx b { font-size: 16px; } .ch-enq-tx small { color: #4b5d73; font-size: 13px; }
.enq-list { display: flex; flex-direction: column; gap: 10px; }
.enq { padding: 14px; border-radius: 16px; border: 1px solid rgba(127, 127, 127, .25); }
.enq.new { border-color: #38bdf8; }
.enq-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.enq-top b { font-size: 16.5px; } .enq-top small { opacity: .65; font-size: 12.5px; flex: none; }
.enq-church { opacity: .8; margin-top: 2px; } .enq-contact { margin-top: 6px; font-weight: 600; overflow-wrap: anywhere; }
.enq-msg { margin: 8px 0 0; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.enq-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.enq-act { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; background: #0284c7; color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; border: 0; font-family: inherit; cursor: pointer; }
.enq-act.ghost { background: rgba(127, 127, 127, .16); color: inherit; }
.enq-empty { opacity: .75; line-height: 1.5; }