/* Worth AI Recorder. Last updated: 10 November 2026 */
:root { --purple:#68048f; --purple-2:#7b2d8b; --lav:#f0e6f6; --ink:#1a1a1a; --muted:#888888; --line:#e6dfeb; --bad:#b3261e; --ok:#1b7f3b; }
* { box-sizing:border-box; }
body { margin:0; font-family:"Google Sans",system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--ink); background:#fff; line-height:1.5; }
a { color:var(--purple); }
header.bar { background:var(--purple); color:#fff; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 20px; flex-wrap:wrap; }
header.bar img { height:28px; display:block; }
header.bar nav { display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:14px; }
header.bar a { color:#fff; text-decoration:none; }
header.bar .who { opacity:.8; }
main { max-width:960px; margin:0 auto; padding:24px 20px 60px; }
h1 { font-size:24px; margin:0 0 16px; }
h2 { font-size:16px; color:var(--purple); margin:28px 0 10px; }
.btn { display:inline-block; background:var(--purple); color:#fff; border:0; border-radius:8px; padding:10px 16px; font:inherit; font-weight:600; cursor:pointer; text-decoration:none; }
.btn.light { background:#fff; color:var(--purple); border:1px solid var(--purple); }
.btn.stop { background:var(--bad); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
header.bar .btn { background:#fff; color:var(--purple); padding:7px 12px; }
header.bar button.link { background:none; border:0; color:#fff; font:inherit; cursor:pointer; text-decoration:underline; padding:0; }
input[type=text], input[type=email], input[type=search], select, textarea { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font:inherit; background:#fff; color:var(--ink); }
label { display:block; font-size:13px; font-weight:600; margin:14px 0 6px; }
label.check { display:flex; align-items:center; gap:8px; font-weight:400; font-size:15px; }
.card { border:1px solid var(--line); border-radius:12px; padding:18px; background:#fff; }
.signin { max-width:420px; margin:60px auto; }
.signin img { height:40px; margin-bottom:18px; }
.row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.row > * { flex:1 1 200px; }
.row > .fit { flex:0 0 auto; }
.list { list-style:none; margin:0; padding:0; }
.list li { border-bottom:1px solid var(--line); }
.list li.item { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 4px; flex-wrap:wrap; }
.list li.item:hover { background:var(--lav); }
.list a.main { flex:1 1 240px; text-decoration:none; color:var(--ink); }
.list .actions { display:flex; align-items:center; gap:8px; }
.mini { background:#fff; color:var(--purple); border:1px solid var(--line); border-radius:6px; padding:4px 10px; font:inherit; font-size:13px; cursor:pointer; }
.mini.danger { color:var(--bad); }
.folders { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 14px; }
.chip { background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:99px; padding:6px 14px; font:inherit; font-size:14px; cursor:pointer; }
.chip.on { background:var(--purple); color:#fff; border-color:var(--purple); }
.chip .n { opacity:.6; margin-left:4px; }
.list .t { font-weight:600; }
.list .m { color:var(--muted); font-size:13px; }
.tag { display:inline-block; font-size:12px; padding:2px 8px; border-radius:99px; background:var(--lav); color:var(--purple); margin-left:6px; }
.tag.warn { background:#fde8e6; color:var(--bad); }
.muted { color:var(--muted); font-size:13px; }
.msg { margin:12px 0; padding:10px 12px; border-radius:8px; background:var(--lav); }
.msg.bad { background:#fde8e6; color:var(--bad); }
.msg.ok { background:#e5f4ea; color:var(--ok); }
video.player { width:100%; max-height:70vh; background:#000; border-radius:12px; }
progress { width:100%; height:10px; }
.timer { font-size:40px; font-weight:700; font-variant-numeric:tabular-nums; }
.dot { display:inline-block; width:12px; height:12px; border-radius:50%; background:var(--bad); margin-right:8px; animation:pulse 1s infinite; }
@keyframes pulse { 50% { opacity:.3; } }
.comment { border-bottom:1px solid var(--line); padding:10px 0; }
.comment .by { font-size:13px; color:var(--muted); }
table { width:100%; border-collapse:collapse; font-size:14px; }
th { text-align:left; background:var(--purple); color:#fff; padding:8px; }
td { padding:8px; border-bottom:1px solid var(--line); }
/* Sign-in landing page */
.landing { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:24px; background-color:#68048f; background-image:radial-gradient(circle at 12% 8%, rgba(255,255,255,.16), transparent 45%), radial-gradient(circle at 92% 96%, rgba(0,0,0,.30), transparent 50%), radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size:auto, auto, 22px 22px; }
.landing:not(.hidden) ~ main { display:none; }
.lbox { width:100%; max-width:920px; display:grid; grid-template-columns:5fr 6fr; background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.35); }
.lside { background:#4a0366; color:#fff; padding:44px 40px; display:flex; flex-direction:column; justify-content:space-between; gap:32px; min-height:460px; }
.lside img { height:34px; align-self:flex-start; }
.lplay { width:84px; height:84px; border-radius:50%; background:rgba(255,255,255,.12); border:2px solid rgba(255,255,255,.65); display:grid; place-items:center; color:#fff; margin-bottom:22px; }
.ltag { font-size:28px; font-weight:700; line-height:1.2; margin:0 0 8px; }
.lsub { margin:0; opacity:.82; font-size:15px; }
.lform { padding:48px 44px; display:flex; flex-direction:column; justify-content:center; }
.lform #logo { display:none; }
.lform h1 { font-size:30px; line-height:1.2; margin:0 0 10px; }
.lform .muted { font-size:16px; color:#555; margin:0 0 22px; }
.lform label { margin-top:0; }
.lform input[type=email] { padding:14px 16px; font-size:17px; border-radius:10px; }
.lform .btn { width:100%; margin-top:14px; padding:15px; font-size:17px; border-radius:10px; }
.lpoints { list-style:none; padding:0; margin:26px 0 0; display:grid; gap:8px; color:#555; font-size:14px; }
.lpoints li::before { content:"\2713"; color:var(--purple); font-weight:700; margin-right:10px; }
.lfoot { color:rgba(255,255,255,.75); font-size:13px; margin:0; }
@media (max-width:760px) {
  .lbox { grid-template-columns:1fr; }
  .lside { min-height:0; padding:28px; gap:18px; }
  .lplay { display:none; }
  .ltag { font-size:22px; }
  .lform { padding:28px; }
}
.hidden { display:none !important; }