/* Shared brand styles for the TakeCut web app (app.takecut.app) -- tokens
   copied from docs/index.html so the web editor looks like one product with
   the marketing site, not a bolted-on afterthought. */
:root{
  --bg:#faf9f5; --surface:#ffffff; --ink:#17171c; --muted:#6b6b76;
  --line:#e6e3dc; --accent:#5a4fcf; --accent-ink:#ffffff; --accent-soft:#eeecfb; --mono-chip:#f1efe8;
  --danger:#c0392b; --danger-soft:#fbeae8; --success:#1e7e4d; --success-soft:#e7f6ee;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0b0f; --surface:#16161c; --ink:#ededef; --muted:#a0a0ac;
    --line:#27272f; --accent:#9b93ff; --accent-ink:#0b0b0f; --accent-soft:#211f36; --mono-chip:#1c1c22;
    --danger:#ff6b5e; --danger-soft:#2b1a18; --success:#4fd08a; --success-soft:#123023;
  }
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink); min-height:100vh;
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
h1,h2,h3{font-family:"Fraunces",Georgia,serif; text-wrap:balance; margin:0}
a{color:var(--accent)}
.wrap{max-width:960px; margin:0 auto; padding:0 20px}
header.site{border-bottom:1px solid var(--line)}
.site-inner{max-width:960px; margin:0 auto; padding:18px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand{display:flex; align-items:center; gap:10px; font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:1.15rem; text-decoration:none; color:var(--ink)}
.brand img{width:26px; height:26px; border-radius:6px}
.navlinks{display:flex; align-items:center; gap:18px; font-size:0.92rem}
.navlinks a{color:var(--muted); text-decoration:none}
.navlinks a:hover{color:var(--ink)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:"IBM Plex Sans",sans-serif; font-weight:600;
  border-radius:10px; padding:11px 18px; font-size:0.95rem; text-decoration:none; border:1px solid transparent; cursor:pointer;
}
.btn-primary{background:var(--accent); color:var(--accent-ink)}
.btn-primary:disabled{opacity:0.55; cursor:not-allowed}
.btn-ghost{border-color:var(--line); color:var(--ink); background:transparent}
main.page{max-width:640px; margin:0 auto; padding:56px 20px 80px}
main.page.wide{max-width:960px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:28px}
.lede{color:var(--muted); font-size:1rem; margin:10px 0 28px}
label{display:block; font-size:0.88rem; font-weight:600; margin-bottom:6px}
input[type=email],input[type=text],input[type=file]{
  width:100%; padding:11px 13px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:0.95rem;
}
.field{margin-bottom:18px}
.msg{border-radius:10px; padding:12px 14px; font-size:0.88rem; margin-bottom:18px}
.msg-error{background:var(--danger-soft); color:var(--danger)}
.msg-success{background:var(--success-soft); color:var(--success)}
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:8px}
@media (max-width:760px){.plans{grid-template-columns:1fr}}
.plan{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px; display:flex; flex-direction:column; gap:10px}
.plan.featured{border-color:var(--accent)}
.plan h3{font-size:1.1rem}
.plan .price{font-family:"Fraunces",Georgia,serif; font-size:1.7rem}
.plan .price span{font-family:"IBM Plex Sans",sans-serif; font-size:0.85rem; color:var(--muted); font-weight:400}
.period-toggle{display:inline-flex; border:1px solid var(--line); border-radius:999px; padding:3px; margin-bottom:26px}
.period-toggle button{border:none; background:transparent; padding:8px 16px; border-radius:999px; font-size:0.88rem; font-weight:600; color:var(--muted); cursor:pointer}
.period-toggle button.active{background:var(--accent); color:var(--accent-ink)}
.dropzone{
  border:2px dashed var(--line); border-radius:16px; padding:40px 20px; text-align:center; color:var(--muted); cursor:pointer; transition:border-color .15s;
}
.dropzone.drag{border-color:var(--accent); color:var(--ink)}
.videolist{display:flex; flex-direction:column; gap:12px; margin-top:24px}
.video-row{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.video-row .name{font-weight:600}
.video-row .status{font-size:0.85rem; color:var(--muted)}
.progress-bar{height:6px; border-radius:999px; background:var(--mono-chip); overflow:hidden; margin-top:6px; width:180px}
.progress-bar > div{height:100%; background:var(--accent)}
.chip{display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:0.72rem; background:var(--mono-chip); color:var(--muted); border:1px solid var(--line); border-radius:6px; padding:3px 8px}
video.preview{width:100%; border-radius:12px; border:1px solid var(--line); margin-top:16px}