@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,500;8..60,600;8..60,700&display=swap');

:root {
  --navy: #0b1f3a; --navy-2: #13294b; --ink: #0f172a; --text: #1e293b; --slate: #475569; --muted: #64748b; --faint: #94a3b8;
  --line: #e2e8f0; --line-2: #cbd5e1; --bg: #f5f7fa; --card: #ffffff; --soft: #f1f5f9;
  --teal: #0f766e; --teal-2: #14b8a6; --teal-soft: #e6f4f1;
  --amber: #b45309; --amber-soft: #fef3c7; --red: #b91c1c; --red-soft: #fee2e2; --green: #15803d; --green-soft: #dcfce7;
  --blue: #1d4ed8; --blue-soft: #dbeafe; --violet: #6d28d9; --violet-soft: #ede9fe;
  --radius: 10px; --shadow: 0 1px 2px rgba(15,23,42,.06), 0 4px 16px rgba(15,23,42,.06);
  --serif: 'Source Serif 4', Georgia, serif; --sans: 'Inter', -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { font-family: var(--sans); color: var(--text); background: var(--bg); font-size: 14.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--teal); }
h1, h2, h3 { font-family: var(--serif); color: var(--ink); line-height: 1.2; margin: 0 0 .5em; }
button, input, select, textarea { font: inherit; color: inherit; }

.brand { font-family: var(--serif); font-weight: 700; font-size: 22px; color: var(--navy); text-decoration: none; letter-spacing: -.01em; }
.brand span { color: var(--teal); }
.brand.light { color: #fff; } .brand.light span { color: var(--teal-2); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--line-2);
  background: #fff; color: var(--ink); font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, transform .05s; white-space: nowrap; }
.btn:hover { background: var(--soft); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn.primary:hover { background: #0d5f59; }
.btn.navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--slate); }
.btn.ghost:hover { background: var(--soft); }
.btn.danger { color: var(--red); border-color: #fecaca; }
.btn.danger:hover { background: var(--red-soft); }
.btn.sm { padding: 5px 10px; font-size: 13px; border-radius: 7px; }
.btn.lg { padding: 13px 22px; font-size: 15.5px; border-radius: 10px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

label { display: block; font-weight: 600; font-size: 13px; color: var(--slate); }
label small { font-weight: 400; color: var(--muted); }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=datetime-local], input[type=time], input[type=number], input:not([type]), select, textarea {
  display: block; width: 100%; margin-top: 5px; padding: 9px 11px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; font-size: 14px; font-weight: 400; color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(15,118,110,.25); border-color: var(--teal); }
textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
label.check { display: flex; gap: 9px; align-items: flex-start; font-weight: 500; color: var(--text); }
label.check input { margin-top: 3px; }
.stack > * + * { margin-top: 14px; }

/* auth pages */
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(1200px 600px at 20% -10%, #133a5e 0, var(--navy) 55%); }
.auth-card { width: 100%; max-width: 440px; background: #fff; border-radius: 14px; padding: 32px 30px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.auth-card h1 { font-size: 24px; margin-top: 18px; }
.auth-card p { color: var(--slate); }
.auth-card .btn.primary { width: 100%; margin-top: 6px; }
.auth-foot { margin-top: 22px; font-size: 12px; color: var(--muted); text-align: center; }
.msg { padding: 10px 12px; border-radius: 8px; font-size: 13.5px; margin-top: 12px; }
.msg.err { background: var(--red-soft); color: var(--red); }
.msg.ok { background: var(--green-soft); color: var(--green); }
.divider { display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: 12px; margin: 20px 0; text-transform: uppercase; letter-spacing: .08em; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* beta feedback widget */
.fb { position: fixed; right: 18px; bottom: 18px; z-index: 900; font-family: var(--sans); }
.fb-btn { background: var(--navy); color: #fff; border: 1px solid rgba(20,184,166,.5); border-radius: 999px; padding: 10px 16px; font-weight: 600; font-size: 13px; cursor: pointer;
  box-shadow: 0 8px 24px rgba(11,31,58,.35); display: inline-flex; align-items: center; gap: 8px; }
.fb-btn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal-2); box-shadow: 0 0 0 3px rgba(20,184,166,.25); }
.fb-panel { position: absolute; right: 0; bottom: 52px; width: 320px; max-width: calc(100vw - 36px); background: #fff; border-radius: 14px; padding: 16px; box-shadow: 0 16px 50px rgba(15,23,42,.3); border: 1px solid var(--line); }
.fb-panel h4 { margin: 0 0 2px; font-family: var(--serif); font-size: 17px; color: var(--ink); }
.fb-panel p { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); }
.fb-kinds { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.fb-kinds button { border: 1px solid var(--line-2); background: #fff; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; cursor: pointer; }
.fb-kinds button.on { background: var(--teal-soft); border-color: var(--teal); color: var(--teal); font-weight: 600; }
.fb-panel textarea { min-height: 96px; }
.fb-panel .row { display: flex; gap: 8px; margin-top: 10px; }
.fb-panel .row .btn { flex: 1; }
@media print { .fb { display: none; } }

/* proof-of-concept ownership banner (same as Clink) */
.poc { display: block; width: 100%; box-sizing: border-box; background: linear-gradient(90deg, #06121f, #0b1f3a); color: rgba(94, 234, 212, .85); text-align: center; font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; padding: 6px 16px; border-bottom: 1px solid rgba(20, 184, 166, .25); position: relative; z-index: 70; }
.auth-page { display: block !important; padding: 0 !important; place-items: normal; }
.auth-page .auth-card { margin: 8vh auto 24px; }
.auth-page > .poc { margin: 0; }
@media print { .poc { display: block; } }