/* Shared design system for the marketing page, auth screens and dashboard. */

:root{
  /* Dashe palette. Blue reads as trustworthy and enterprise, and leaves the
     green/red states free to mean "live" and "needs attention" unambiguously. */
  --accent:#3B6FF5; --accent-strong:#2A57D4; --accent-tint:#EEF3FF; --accent-soft:#E4EDFF;
  --ink:#14213D; --g800:#4C6588; --g700:#667A96; --g500:#8D9AAB;
  --g300:#E6E6E6; --g100:#FBFBFB; --white:#fff;
  --green:#377D11; --green-soft:#F5F9F3; --amber:#8A6100; --amber-soft:#FDF8EE;
  --red:#DE4F6F; --red-soft:#FDF7F8;
  --r-sm:4px; --r-md:8px; --r-lg:16px; --r-xl:24px; --pill:100px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --shadow-md:0 8px 24px rgba(20,33,61,.08);
  --shadow-lg:0 24px 64px rgba(20,33,61,.18),0 4px 16px rgba(20,33,61,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);color:var(--ink);background:var(--g100);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;font-size:14px;color:inherit}
::placeholder{color:var(--g500)}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.01em}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-weight:600;font-size:13px;border-radius:var(--pill);padding:9px 18px;transition:all .15s}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:var(--accent-strong)}
.btn-navy{background:var(--ink);color:#fff}
.btn-navy:hover{background:#0C1729}
.btn-ghost{border:1px solid var(--g300);color:var(--g800);background:#fff}
.btn-ghost:hover{border-color:var(--g500)}
.btn-ghost.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-danger{border:1px solid var(--g300);color:var(--g800);background:#fff}
.btn-danger:hover{border-color:var(--red);color:var(--red)}
.btn:disabled{opacity:.55;cursor:default}
.btn.full{width:100%}
.addlink{color:var(--accent);font-weight:600;font-size:13px;padding:6px 0}
.addlink:hover{text-decoration:underline}

/* ---- form fields ---- */
.field{display:block;margin-bottom:14px}
.field span{display:block;font-size:12.5px;font-weight:600;color:var(--g800);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--g300);border-radius:var(--r-md);padding:10px 12px;outline:none;background:#fff}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)}
.field .note{font-size:12px;color:var(--g700);margin-top:5px;font-weight:400}

.alert{border-radius:var(--r-md);padding:11px 14px;font-size:13px;margin-bottom:14px;display:none}
.alert.show{display:block}
.alert.err{background:var(--red-soft);color:var(--red)}
.alert.ok{background:var(--green-soft);color:var(--green)}
.alert.warn{background:var(--amber-soft);color:var(--amber)}

/* ---- toggle ---- */
.tgl{position:relative;width:38px;height:21px;border-radius:var(--pill);background:var(--g300);transition:background .15s;flex:none;cursor:pointer}
.tgl.on{background:var(--green)}
.tgl::after{content:'';position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;transition:left .15s}
.tgl.on::after{left:19px}

/* ---- cards ---- */
.ccard{background:#fff;border:1px solid var(--g300);border-radius:var(--r-lg);padding:22px;margin-bottom:18px}
.ccard h3{font-size:15px;font-weight:600;margin-bottom:4px}
.ccard .hint{font-size:13px;color:var(--g700);margin-bottom:16px;line-height:1.5}
.pane-wrap{max-width:1000px;margin:0 auto;padding:28px 24px 80px;width:100%}
.pane-wrap h2{font-size:22px;font-weight:600;margin-bottom:4px}
.pane-wrap .csub{color:var(--g700);font-size:14px;margin-bottom:24px}

/* ---- misc ---- */
.pill-tag{font-size:10.5px;font-weight:700;border-radius:var(--pill);padding:2px 9px;display:inline-block}
.pill-tag.green{background:var(--green-soft);color:var(--green)}
.pill-tag.amber{background:var(--amber-soft);color:var(--amber)}
.pill-tag.grey{background:var(--g100);color:var(--g500);border:1px solid var(--g300)}
.pill-tag.accent{background:var(--accent-soft);color:var(--accent)}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;background:var(--ink);color:#DCE5F2;border-radius:var(--r-md);padding:14px 16px;overflow-x:auto;white-space:pre;line-height:1.6}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
.rowlist{border-top:1px solid var(--g100)}
.rowitem{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--g100)}
.rowitem .grow{flex:1;min-width:0}
.rowitem .nm{font-weight:600;font-size:13.5px}
.rowitem .sub{font-size:12.5px;color:var(--g700);overflow:hidden;text-overflow:ellipsis}
.del{color:var(--g500);padding:6px;border-radius:var(--r-md);display:inline-flex}
.del:hover{color:var(--red);background:var(--red-soft)}
.empty{padding:28px 10px;text-align:center;color:var(--g500);font-size:13.5px}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(90px);background:var(--ink);color:#fff;font-size:13.5px;font-weight:500;border-radius:var(--r-md);padding:12px 20px;box-shadow:var(--shadow-lg);transition:transform .25s;z-index:9999;display:flex;align-items:center;gap:10px;max-width:min(520px,90vw)}
.toast.show{transform:translateX(-50%)}