/* canary.dk — flat, modern, dark. */
:root{
  --bg:#0b0f14; --bg-2:#0f1620; --panel:#121a25; --panel-2:#16202e;
  --line:#1e2b3a; --text:#e6edf3; --muted:#8fa3b7; --dim:#5f7488;
  --accent:#3b82f6; --accent-2:#22d3ee; --good:#34d399; --warn:#fbbf24;
  --radius:14px; --maxw:1080px;
  --font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text); font-family:var(--font);
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:var(--accent-2);text-decoration:none}
a:hover{text-decoration:underline}
code,pre{font-family:var(--mono)}
h1,h2,h3{line-height:1.2;letter-spacing:-.02em}

/* Animated background grid + glow (parallax-ish via fixed layers) */
.bg-grid{
  position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(34,211,238,.12), transparent 60%),
    linear-gradient(var(--bg),var(--bg));
}
.bg-grid::after{
  content:"";position:absolute;inset:-2px;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:44px 44px;opacity:.07;
  mask-image:radial-gradient(circle at 50% 30%,#000,transparent 80%);
}
/* Animated network canvas — sits above the gradient, below content. */
.netbg{position:fixed;inset:0;z-index:-1;pointer-events:none}

/* Layout */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.25rem}
.nav{
  max-width:var(--maxw);margin:0 auto;padding:1.1rem 1.25rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.brand{font-weight:800;font-size:1.25rem;color:var(--text);letter-spacing:-.03em;
  display:inline-flex;align-items:center;gap:.5rem}
.brand:hover{text-decoration:none}
.brand .muted{color:var(--warn)}
.brand-logo{width:34px;height:33px;filter:drop-shadow(0 2px 6px rgba(255,212,59,.25))}
.nav-links{display:flex;align-items:center;gap:1.25rem}
.nav-links a{color:var(--muted);font-weight:600;font-size:.95rem}
.nav-links a:hover{color:var(--text);text-decoration:none}
/* Button text must win over the generic nav-link colour (higher specificity). */
.nav-links a.btn-primary{color:#04121f;font-weight:700}
.nav-links a.btn-primary:hover{color:#04121f}
.nav-links a.btn-ghost{color:var(--text)}
.inline-form{display:inline}

/* Buttons */
.btn{display:inline-block;padding:.6rem 1.1rem;border-radius:10px;font-weight:600;
  font-size:.95rem;border:1px solid transparent;cursor:pointer;transition:.15s}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#04121f}
.btn-primary:hover{filter:brightness(1.08);text-decoration:none}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--accent);text-decoration:none}
.btn-lg{padding:.85rem 1.5rem;font-size:1.05rem}
.btn-block{width:100%;text-align:center}

/* Form controls — themed site-wide to match the dark UI. */
input[type=text],input[type=email],input[type=password],input[type=url],
input[type=search],input[type=number],input[type=tel],textarea,select{
  width:100%;padding:.7rem .8rem;background:var(--bg-2);border:1px solid var(--line);
  border-radius:8px;color:var(--text);font-family:var(--font);font-size:1rem;
  line-height:1.3;transition:border-color .15s, box-shadow .15s;
}
textarea{min-height:5rem;resize:vertical}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,130,246,.18);
}
input::placeholder,textarea::placeholder{color:var(--dim)}
input:disabled,select:disabled,textarea:disabled{opacity:.6;cursor:not-allowed}
/* Custom dropdown chevron (native arrow removed for consistent theming). */
select{
  appearance:none;-webkit-appearance:none;padding-right:2rem;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238fa3b7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .7rem center;
}
select option{background:var(--panel);color:var(--text)}
/* Checkboxes / radios pick up the brand accent. */
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--accent-2);cursor:pointer}
/* Autofill: keep the dark background instead of the browser's white. */
input:-webkit-autofill,input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px var(--bg-2) inset;
  caret-color:var(--text);
}

/* Hero */
.hero{padding:4.5rem 0 2rem;text-align:center}
.hero h1{font-size:clamp(2rem,5vw,3.4rem);margin:1rem 0}
.pill{display:inline-block;padding:.35rem .9rem;border:1px solid var(--line);
  border-radius:999px;color:var(--accent-2);font-size:.8rem;font-weight:600;
  background:rgba(34,211,238,.06)}
.lede{max-width:640px;margin:1rem auto 2rem;color:var(--muted);font-size:1.15rem}
.hero-cta{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}

/* Card grid */
.grid-section{padding:3rem 0}
.grid-section h2{font-size:1.8rem;text-align:center}
.section-sub{text-align:center;color:var(--muted);margin-top:.25rem}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:1rem;margin-top:2rem}
.canary-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem;transition:.2s;position:relative}
.canary-card:hover{transform:translateY(-3px);border-color:var(--accent);
  box-shadow:0 12px 40px rgba(0,0,0,.35)}
.canary-card.is-soon{opacity:.65}
.canary-icon{width:40px;height:40px;margin-bottom:.7rem;display:inline-flex;
  align-items:center;justify-content:center;border-radius:10px;
  background:rgba(56,189,248,.08);border:1px solid var(--line);color:var(--accent-2)}
.canary-icon svg{width:24px;height:24px}
.canary-card:hover .canary-icon{color:var(--warn);border-color:var(--warn);
  background:rgba(255,212,59,.08)}
.canary-card h3{margin:.2rem 0;font-size:1.15rem}
.canary-card p{color:var(--muted);font-size:.92rem;margin:.5rem 0 1rem}
.card-link{font-weight:600}
.badge-soon{font-size:.78rem;color:var(--warn);border:1px solid var(--line);
  padding:.2rem .6rem;border-radius:999px}

/* Feature row */
.feature-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.5rem;padding:2rem 0 4rem}
.feature h3{color:var(--text)}
.feature p{color:var(--muted)}

/* Prose pages */
.prose{max-width:760px;margin:0 auto;padding:3rem 0}
.prose h1{font-size:2.2rem}
.prose h2{margin-top:2rem}
.prose p,.prose li{color:var(--muted)}
.prose strong{color:var(--text)}
.prose pre{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:1rem;overflow:auto}
.prose code{color:var(--accent-2)}

/* Tables */
.data-table,.api-table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.92rem}
.data-table th,.api-table th{text-align:left;color:var(--dim);font-weight:600;
  padding:.6rem;border-bottom:1px solid var(--line)}
.data-table td,.api-table td{padding:.6rem;border-bottom:1px solid var(--line);color:var(--text)}
.data-table code{color:var(--accent-2);font-size:.85rem}
.truncate{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag{background:var(--panel-2);border:1px solid var(--line);border-radius:6px;
  padding:.1rem .5rem;font-size:.8rem;color:var(--accent-2)}

/* Stats */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1rem;margin:2rem 0}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem;text-align:center}
.stat-num{font-size:2.2rem;font-weight:800;color:var(--accent-2)}
.stat-label{color:var(--muted);font-size:.9rem}

/* Auth + forms */
.auth-card{max-width:420px;margin:3rem auto;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);padding:2rem}
.auth-card.wide{max-width:560px}
.auth-card h1{font-size:1.6rem;margin-top:0}
.auth-card label{display:block;margin:1rem 0 .3rem;color:var(--muted);font-size:.9rem}
.check{display:flex!important;align-items:center;gap:.5rem;margin:1rem 0}
.check input{width:auto}
.auth-alt{text-align:center;margin-top:1.2rem;color:var(--muted)}
.alert{background:rgba(251,191,36,.1);border:1px solid var(--warn);color:var(--warn);
  padding:.7rem 1rem;border-radius:8px;margin-bottom:1rem;font-size:.9rem}

/* Dashboard */
.dash{padding:2.5rem 0}
.dash-head{display:flex;justify-content:space-between;align-items:center}
.empty{text-align:center;padding:3rem;background:var(--panel);
  border:1px dashed var(--line);border-radius:var(--radius);margin:1.5rem 0}

/* Canary detail */
.detail-grid{display:grid;grid-template-columns:2fr 1fr;gap:1rem;margin:1.5rem 0}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem}
.panel h3{margin-top:0}
.panel pre.copy{background:var(--bg-2);border:1px solid var(--line);border-radius:8px;
  padding:.8rem;overflow:auto;font-size:.9rem}
.panel pre.copy code{color:var(--accent-2)}
table.kv{width:100%;border-collapse:collapse}
table.kv td{padding:.35rem 0;border-bottom:1px solid var(--line);color:var(--muted)}
table.kv td:last-child{text-align:right;color:var(--text)}
@media(max-width:720px){.detail-grid{grid-template-columns:1fr}}

/* Footer */
.footer{max-width:var(--maxw);margin:3rem auto 2rem;padding:1.5rem 1.25rem 0;
  border-top:1px solid var(--line);color:var(--muted);font-size:.88rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

@media(max-width:640px){
  .nav-links{gap:.8rem;font-size:.85rem}
  .nav-links a.btn{display:none}
}