/* Sonidly AI — shared design system (see docs/SONIDLY_DESIGN_SYSTEM.md). Light-first. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root{
  --grad: linear-gradient(90deg,#FFC15E 0%,#FF7E5E 50%,#EC4E8A 100%); /* logo wordmark only */
  --grad-2: linear-gradient(120deg,#FF7E5E 0%,#EC4E8A 100%);
  /* Buttons/interactive = solid deep orange (founder: less "feminine", no pink) */
  --primary:#FF6A2C; --primary-strong:#E5531C; --accent:#F76673;
  --ink:#0E0E12; --ink2:#5A5F6B; --ink3:#9AA0AC;
  --bg:#FFFFFF; --bg-soft:#FFF7F2; --surface:#FFFFFF; --border:#ECECF1;
  --success:#1FB57A; --warning:#F5A623; --error:#E5484D;
  --radius:16px; --radius-pill:999px;
  --shadow-1:0 2px 8px rgba(14,14,18,.06);
  --shadow-2:0 8px 24px rgba(255,106,44,.22);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{
  font-family:'Poppins',Inter,system-ui,sans-serif;
  background:var(--bg); color:var(--ink); min-height:100vh; padding:20px;
  line-height:1.5;
}
.glow{position:fixed;inset:0;z-index:-1;
  background:radial-gradient(55% 45% at 75% 15%,rgba(255,106,44,.10),transparent 70%),
             radial-gradient(45% 40% at 15% 85%,rgba(255,193,94,.12),transparent 70%);}
.wrap{max-width:480px;margin:0 auto}
.brandmark{font-weight:700;font-size:26px;letter-spacing:-.02em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
h1{font-size:1.7rem;font-weight:700;letter-spacing:-.02em;margin:.2rem 0 .4rem}
h2{font-size:1.2rem;font-weight:600;margin:.2rem 0 .8rem}
p.sub{color:var(--ink2);margin:.2rem 0 1.4rem}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-1);padding:22px;margin-bottom:16px}
label{display:block;font-size:.82rem;font-weight:500;color:var(--ink2);margin:0 0 6px}
input,select{width:100%;font-size:1rem;font-family:inherit;padding:13px 14px;border:1px solid var(--border);
  border-radius:var(--radius);background:#fff;color:var(--ink);margin-bottom:14px}
input:focus,select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(255,106,44,.18)}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;font-family:inherit;
  font-size:1.05rem;font-weight:600;padding:15px;border:0;border-radius:var(--radius-pill);cursor:pointer;
  color:#fff;background:var(--primary);box-shadow:var(--shadow-2);transition:filter .15s,transform .05s}
.btn:hover{filter:brightness(.95)} .btn:active{transform:translateY(1px);background:var(--primary-strong)}
.btn:disabled{opacity:.4;box-shadow:none;cursor:default}
.btn.secondary{background:#fff;color:var(--primary);border:1.5px solid var(--primary);box-shadow:none}
.btn.ghost{background:transparent;color:var(--ink2);box-shadow:none}
.btn.danger{background:var(--error);box-shadow:none}
a{color:var(--primary-strong);text-decoration:none} a:hover{text-decoration:underline}
.muted{color:var(--ink2);font-size:.88rem}
.row{display:flex;gap:10px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;padding:6px 12px;border-radius:var(--radius-pill);
  background:var(--bg-soft);border:1px solid var(--border)}
.toggle{display:flex;gap:8px;background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius-pill);padding:5px;margin-bottom:16px}
.toggle button{flex:1;border:0;background:transparent;font-family:inherit;font-weight:600;font-size:.95rem;
  padding:11px;border-radius:var(--radius-pill);color:var(--ink2);cursor:pointer}
.toggle button.active{background:var(--primary);color:#fff}
.err{color:var(--error);font-size:.88rem;min-height:1.1rem;margin:0 0 8px}
.ok{color:var(--success);font-size:.88rem}
.center{text-align:center}
.dot{width:10px;height:10px;border-radius:50%;background:var(--ink3)}
.dot.on{background:var(--success)} .dot.warn{background:var(--warning)} .dot.off{background:var(--error)}
.list-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--border)}
.list-item:last-child{border-bottom:0}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}