/* The signed-in dashboard (/home): sidebar, top bar with the account menu,
   and the main grid.

   The dashboard is light, and stays light on a machine set to dark mode.
   That is deliberate: this is a gallery of thumbnails, posters and covers,
   and they read truer against a white page -- which is why CapCut, Canva
   and Figma's file browsers are all light whatever the OS is set to. The
   editor next door is the opposite case and is always dark, so the footage
   is the brightest thing on the screen.

   Dark here is a choice someone makes in Settings -> Theme, not something
   the OS makes for them. */
.dash {
  --bg: #f4f5f7; --surface: #fff; --surface-2: #f0f1f4; --text: #0b0c0e; --text-2: #5b616b;
  --border: #e4e7eb; --hover: #eceef2; --shadow: 0 18px 50px -24px rgba(20,10,40,.35);
}
:root[data-theme="dark"] .dash {
  --bg: #0e0f12; --surface: #17181c; --surface-2: #1f2126; --text: #f2f3f5; --text-2: #a2a7b0;
  --border: #2a2c32; --hover: #24262c; --shadow: 0 18px 50px -20px rgba(0,0,0,.8);
}

body.dash {
  padding: 0; background: var(--bg); background-image: none; color: var(--text);
  display: grid; grid-template-columns: 248px 1fr; min-height: 100vh;
}
.dash section:not(.hello) { padding: 0; }
.dash h1, .dash h2 { max-width: none; font-weight: 800; }
.dash .muted { color: var(--text-2); }
.dash .small { font-size: 13px; }
.dash svg { fill: currentColor; }

/* Sidebar */
.side {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 14px;
  padding: 18px 14px; background: var(--surface); border-right: 1px solid var(--border);
}
.side-brand { padding: 4px 8px 6px; font-size: 17px; }
.create { position: relative; }
.create-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px;
  border: 0; border-radius: 12px; background: var(--grad); color: #fff; font: inherit; font-weight: 700; cursor: pointer;
  box-shadow: 0 10px 24px -12px rgba(138,43,226,.8);
}
.create-btn svg { width: 20px; height: 20px; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav a {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px;
  text-decoration: none; color: var(--text); font-size: 14.5px; font-weight: 500;
}
.side-nav a:hover { background: var(--hover); }
.side-nav a.on { background: var(--surface-2); font-weight: 700; }
.side-nav svg { width: 19px; height: 19px; opacity: .85; flex: none; }
.side-nav a[data-app]::after {
  content: "App"; margin-left: auto; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-2);
}
.side-label { margin: 14px 12px 4px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.side-app {
  margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 14px;
  background: var(--grad-soft); border: 1px solid var(--border); text-decoration: none; color: var(--text);
}
.side-app b { font-size: 14px; }
.side-app small { font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
.side-app span { font-size: 13px; font-weight: 700; color: var(--accent); margin-top: 4px; }
.side-scrim { display: none; }

/* Menus (Create new, account) */
.menu {
  position: absolute; z-index: 40; min-width: 260px; padding: 8px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
}
.menu[hidden] { display: none; }
.menu a, .menu button {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px;
  background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer;
}
.menu a:hover, .menu button:hover, .menu a:focus-visible, .menu button:focus-visible { background: var(--hover); outline: none; }
.menu svg { width: 18px; height: 18px; opacity: .8; flex: none; }
.menu small { display: block; font-size: 12px; color: var(--text-2); }
.menu hr { border: 0; border-top: 1px solid var(--border); margin: 6px 4px; }
.menu-title { margin: 4px 10px 6px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.create-menu { top: calc(100% + 6px); left: 0; right: 0; min-width: 0; }

/* Ratio shapes */
.r { flex: none; display: inline-block; border: 2px solid currentColor; border-radius: 4px; opacity: .8; }
.r-169 { width: 26px; height: 15px; }
.r-916 { width: 13px; height: 22px; }
.r-11 { width: 18px; height: 18px; }
.r-45 { width: 16px; height: 20px; }
.r-custom { width: 20px; height: 20px; border-style: dashed; }

/* Top bar */
.main { min-width: 0; display: flex; flex-direction: column; }
.top {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; height: 62px; padding: 0 24px;
  background: var(--bg); border-bottom: 1px solid transparent;
}
.top-brand, .menu-toggle { display: none; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.top-app { padding: 9px 16px; font-size: 14px; background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.top-app:hover { background: var(--hover); }
.top-app svg { width: 18px; height: 18px; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 10px; border: 0; background: none; color: var(--text); cursor: pointer;
  align-items: center; justify-content: center;
}
.icon-btn svg { width: 22px; height: 22px; }
.account { position: relative; }
.avatar-btn { padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; }
.avatar-btn:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.avatar {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex: none;
  background: var(--grad); color: #fff; font-weight: 700; font-size: 15px;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-lg { width: 44px; height: 44px; font-size: 18px; }
.avatar-xl { width: 64px; height: 64px; font-size: 26px; }
.account-menu { top: calc(100% + 8px); right: 0; width: 290px; }
.who { display: flex; align-items: center; gap: 12px; padding: 8px 10px 12px; }
.who > div { min-width: 0; }
.who b { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who small { display: block; font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Content */
/* Not wider than a comfortable read; long and roomy down the page. */
.content { padding: 12px 40px 96px; max-width: 1240px; width: 100%; margin: 0 auto; }
.dash .hello {
  padding: 34px 32px 30px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border);
  background-image: radial-gradient(600px 300px at 0% 0%, rgba(0,229,255,.12), transparent 70%),
                    radial-gradient(600px 300px at 100% 100%, rgba(255,0,127,.1), transparent 70%);
}
.hello-kicker { margin: 0; font-weight: 600; color: var(--text-2); }
.hello h1 { margin: 6px 0 30px; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.15; letter-spacing: -.02em; }
.start { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.start-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; border-radius: 14px;
  background: var(--surface-2); text-decoration: none; color: var(--text); transition: transform .15s ease, background .15s;
}
.start-card:hover { transform: translateY(-2px); background: var(--hover); }
.start-card { min-height: 148px; padding: 20px; justify-content: flex-end; }
.start-card .r { margin-bottom: auto; color: var(--accent); }
.start-card b { font-size: 14.5px; }
.start-card small { font-size: 12.5px; color: var(--text-2); }
.start-blank { border: 1.5px dashed var(--border); background: transparent; }

.row-sec { margin-top: 56px; }
.sec-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 14px; }
.sec-head h2 { margin: 0; font-size: 22px; letter-spacing: -.01em; }
.sec-head p { margin: 0; font-size: 14px; }

.features { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.feat {
  position: relative; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); text-decoration: none; color: var(--text);
  transition: transform .15s ease, box-shadow .15s ease;
}
.feat:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.feat img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--surface-2); }
.feat div { padding: 12px 14px 14px; }
.feat b { display: block; font-size: 15px; }
.feat small { display: block; font-size: 13px; color: var(--text-2); line-height: 1.45; margin-top: 2px; }
.tag-web, .tag-app {
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; line-height: 1.2;
}
.feat .tag-web, .feat .tag-app { position: absolute; top: 10px; left: 10px; }
.tag-web { background: var(--grad); color: #fff; }
.tag-app { background: rgba(11,12,14,.72); color: #fff; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips button {
  border: 0; padding: 7px 14px; border-radius: 999px; background: var(--surface-2); color: var(--text);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.chips button[aria-selected="true"] { background: var(--text); color: var(--bg); }
.insp { columns: 4 240px; column-gap: 16px; }
.ins {
  position: relative; display: block; margin: 0 0 14px; break-inside: avoid; border-radius: 16px; overflow: hidden;
  background: #000; text-decoration: none; color: #fff;
}
.ins[hidden] { display: none; }
.ins video { display: block; width: 100%; object-fit: cover; }
.ins-916 video { aspect-ratio: 9 / 16; }
.ins-169 video { aspect-ratio: 16 / 9; }
.ins-11 video { aspect-ratio: 1; }
.ins-45 video { aspect-ratio: 4 / 5; }
.ins span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; font-size: 12.5px;
  background: linear-gradient(transparent, rgba(0,0,0,.75)); opacity: .95;
}
.ins b { display: block; font-size: 15px; }

.tools-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.tools-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border); text-decoration: none; color: var(--text); font-size: 14.5px;
}
.tools-list a:hover { background: var(--hover); }

/* Profile / Settings sheet */
.sheet-backdrop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(8,8,12,.55); }
.sheet-backdrop[hidden] { display: none; }
.sheet {
  position: relative; width: min(440px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
  padding: 30px 28px 26px; border-radius: 20px; background: var(--surface); color: var(--text); box-shadow: var(--shadow);
}
.sheet h2 { margin: 0 0 18px; font-size: 22px; }
.sheet section[hidden] { display: none; }
.sheet .auth-close { background: var(--surface-2); color: var(--text); }
.who-lg { padding: 0 0 16px; }
.who-lg b { font-size: 17px; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0 0 16px; font-size: 14px; }
.facts dt { color: var(--text-2); }
.facts dd { margin: 0; }
.btn.danger { background: transparent; border: 1px solid #e0405e; color: #e0405e; padding: 10px 18px; font-size: 14px; cursor: pointer; font-family: inherit; }
.btn.danger:hover { background: rgba(224,64,94,.08); }
.set-label { margin: 18px 0 8px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.set-label:first-of-type { margin-top: 0; }
.seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--surface-2); }
.seg button {
  border: 0; padding: 8px 16px; border-radius: 9px; background: none; color: var(--text); font: inherit; font-size: 14px; cursor: pointer;
}
.seg button[aria-checked="true"] { background: var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,.15); font-weight: 600; }
.sheet a { color: var(--accent); }

/* Narrow: the sidebar slides in from the menu button. */
/* Install (top bar) and the profile photo controls. */
.install { position: relative; }
.install-btn { display: inline-flex; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; }
.install-btn[hidden] { display: none; }
.install-btn:hover { background: var(--hover); }
.install-btn svg { width: 20px; height: 20px; }
.install-help { top: calc(100% + 8px); right: 0; width: 280px; padding: 14px 16px; }
.install-help b { display: block; margin-bottom: 4px; }
.install-help p { margin: 0; font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
.photo-row { display: flex; align-items: center; gap: 12px; margin: -4px 0 8px; }
.photo-btn { padding: 8px 16px; font-size: 14px; cursor: pointer; background: var(--surface-2); color: var(--text); }
.photo-btn:focus-within { outline: 2px solid var(--purple); outline-offset: 2px; }
.photo-row [hidden] { display: none; }

@media (max-width: 980px) {
  .start { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  body.dash { grid-template-columns: 1fr; }
  .side {
    position: fixed; z-index: 50; left: 0; top: 0; bottom: 0; width: 270px; height: auto;
    transform: translateX(-100%); transition: transform .2s ease;
  }
  .side.open { transform: none; box-shadow: var(--shadow); }
  .side-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(0,0,0,.4); }
  .menu-toggle { display: inline-flex; }
  .top-brand { display: inline-flex; font-size: 16px; }
  .top { padding: 0 12px; }
  .top-app { display: none; }
  .content { padding: 4px 16px 64px; }
  .start-card { min-height: 116px; padding: 16px; }
  .dash .hello { padding: 24px 18px; }
  .start { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insp { columns: 2 140px; }
}