/* SIGNAL_UI_GREEN_V2 (complete + valid) */
:root{
  --bg:#0b0f0d; --panel:#121816; --panel2:#0f1512;
  --text:#f2f5f3; --muted:rgba(242,245,243,.75);
  --border:#1f2a25; --border2:#2a3a33;
  --accent:#7CFFB2; --accent2:#2fe57b;
  --radius:14px; --radius-sm:12px; --max:980px;
  --font: system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.45}
a{color:var(--accent);text-decoration:none}
a:hover{opacity:.9}
.wrap,.container{max-width:var(--max);margin:0 auto;padding:18px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin:12px 0}
.muted{color:var(--muted)}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{font-weight:900;letter-spacing:.3px}
.pill{display:inline-block;padding:4px 10px;border-radius:999px;background:#16201b;border:1px solid #223027;font-size:12px;opacity:.95;color:var(--text)}
.btn{display:inline-block;background:var(--accent2);color:#06100a;padding:10px 14px;border-radius:var(--radius-sm);font-weight:800;border:none;cursor:pointer}
.btn:hover{filter:brightness(1.02)}
.btn2{background:#1b2420;color:var(--text);border:1px solid var(--border2)}
input,select{width:100%;padding:12px;border-radius:var(--radius-sm);border:1px solid var(--border2);background:var(--panel2);color:var(--text)}
label{font-size:13px;opacity:.9}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:720px){.grid{grid-template-columns:1fr}}
.inline{display:inline}

/* helpers */
.row{display:flex;gap:12px;align-items:center;justify-content:space-between}
.stack{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.right{text-align:right}
.actions{min-width:170px}
.h2{margin:0 0 6px 0}
.h3{margin:8px 0 4px 0}
.mt6{margin-top:6px}
.mt12{margin-top:12px}
@media (max-width:720px){.actions{min-width:0}.right{text-align:left}}

/* =========================
   SIGNAL_UI_POLISH_V1
   - typography scale
   - better buttons/cards/nav
   - utilities: small, notice, badge
   ========================= */
:root{
  --shadow: 0 12px 36px rgba(0,0,0,.38);
  --shadow-sm: 0 6px 18px rgba(0,0,0,.28);
  --focus: 0 0 0 3px rgba(124,255,178,.18);
  --pad: 18px;

  --h1: 28px;
  --h2: 20px;
  --h3: 16px;
  --base: 15px;
  --small: 13px;
}

body{
  font-size:var(--base);
  background:
    radial-gradient(1200px 700px at 15% -10%, rgba(124,255,178,.06), transparent 55%),
    var(--bg);
}

h1,h2,h3{letter-spacing:.2px}
h1{font-size:var(--h1); margin:0 0 10px 0}
h2{font-size:var(--h2); margin:0 0 8px 0}
h3{font-size:var(--h3); margin:8px 0 6px 0}

.small{font-size:var(--small); color:var(--muted)}

.wrap,.container{max-width:var(--max); margin:0 auto; padding:var(--pad)}
@media (max-width:720px){ .wrap,.container{padding:14px} }

.card{
  background: linear-gradient(180deg, rgba(18,24,22,1), rgba(15,21,18,.90));
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:var(--pad);
  margin:14px 0;
  box-shadow: var(--shadow-sm);
}

.top{
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 14px 0 12px 0;
  margin-bottom: 10px;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(11,15,13,.92), rgba(11,15,13,.65));
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.top .brand{
  font-weight: 950;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.nav{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:flex-end}
.nav a.pill{padding:6px 11px}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 11px 14px;
  border-radius: 14px;
  font-weight: 900;
  letter-spacing: .2px;
  background: linear-gradient(180deg, rgba(47,229,123,1), rgba(16,171,85,1));
  color: #06100a;
  border: 1px solid rgba(124,255,178,.40);
  box-shadow: 0 10px 24px rgba(47,229,123,.10);
}
.btn:hover{filter:brightness(1.03)}
.btn:active{transform: translateY(1px)}
.btn2{
  background: rgba(255,255,255,.03);
  color: rgba(242,245,243,.95);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:none;
}
.btn2:hover{background: rgba(255,255,255,.06)}

input,select,textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(15,21,18,.95);
  color: var(--text);
  outline:none;
}
input:focus,select:focus,textarea:focus{
  box-shadow: var(--focus);
  border-color: rgba(124,255,178,.35)
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  font-size: 12px;
  color: rgba(242,245,243,.92);
}
.badge.ok{border-color: rgba(124,255,178,.35); background: rgba(124,255,178,.07)}
.badge.warn{border-color: rgba(255,210,122,.35); background: rgba(255,210,122,.06)}
.badge.danger{border-color: rgba(255,107,107,.35); background: rgba(255,107,107,.06)}

.notice{
  border-radius: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.notice.warn{border-color: rgba(255,210,122,.28); background: rgba(255,210,122,.05)}

.hero-title{font-size: 26px; line-height: 1.12; margin: 0 0 8px 0}
.hero-sub{font-size: 15px; color: var(--muted); margin: 0 0 14px 0}


/* =========================
   SIGNAL_UI_CARDS_V1
   App-first card feed
   ========================= */

.card-feed{display:flex;flex-direction:column;gap:14px}

.badge.org{
  font-weight:700;
  letter-spacing:.3px;
  text-transform:uppercase;
  background:rgba(124,255,178,.10);
  border-color:rgba(124,255,178,.45);
  color:#caffdf;
}

.meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  margin-top:6px;
  font-size:13px;
  color:var(--muted);
}
.meta span{white-space:nowrap}

.cta{
  margin-top:12px;
  display:flex;
}
.cta .btn{
  width:100%;
  justify-content:center;
}
.cta .btn2{
  width:100%;
}

.cta .pill{
  width:100%;
  text-align:center;
  padding:10px 0;
}

@media (min-width:720px){
  .cta .btn,
  .cta .btn2,
  .cta .pill{
    width:auto;
    min-width:160px;
  }
}


/* =========================
   SIGNAL_UI_FORMS_V1
   Form + page structure polish
   ========================= */

.pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.pagehead h2{margin:0}
.pagehead .sub{margin-top:6px}

.form{margin-top:12px}
.field{margin-top:12px}
.help{margin-top:6px}
.btnrow{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}

.checkrow{display:flex;align-items:center;gap:10px;margin-top:10px}
.checkrow input[type="checkbox"]{
  width:18px;height:18px;accent-color:var(--accent2);
}

.select{position:relative}
select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:40px;
}
.select:after{
  content:"▾";
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  color:rgba(242,245,243,.65);
  font-size:14px;
}

.notice.good{border-color: rgba(124,255,178,.28); background: rgba(124,255,178,.05)}
.notice.bad{border-color: rgba(255,107,107,.30); background: rgba(255,107,107,.06)}


/* =========================
   SIGNAL_UI_AVAILABILITY_V1
   Weekly availability grid
   ========================= */

.avail{margin-top:12px}
.avail-grid{
  display:grid;
  grid-template-columns: 90px 1fr 1fr;
  gap:10px;
  align-items:center;
}
.avail-grid .hdr{
  font-size:12px;
  color:rgba(242,245,243,.65);
  text-transform:uppercase;
  letter-spacing:.4px;
}
.avail-day{
  font-weight:800;
  color:rgba(242,245,243,.9);
  font-size:13px;
}

.avail-cell{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}

.avail-toggle{
  appearance:none;
  -webkit-appearance:none;
  width:44px;
  height:26px;
  border-radius:999px;
  position:relative;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  outline:none;
  cursor:pointer;
  transition: all .18s ease;
}
.avail-toggle:before{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:20px;
  height:20px;
  border-radius:999px;
  background: rgba(242,245,243,.85);
  transition: all .18s ease;
}
.avail-toggle:checked{
  border-color: rgba(124,255,178,.45);
  background: rgba(124,255,178,.12);
}
.avail-toggle:checked:before{
  left:21px;
  background: #bfffd9;
}
.avail-label{
  font-size:13px;
  color: rgba(242,245,243,.8);
}

@media (max-width:720px){
  .avail-grid{grid-template-columns: 64px 1fr 1fr}
  .avail-cell{padding:10px}
}

/* =========================
   SIGNAL_UI_AVAILABILITY_V1
   Weekly availability grid
   ========================= */

.avail{margin-top:12px}

.avail-grid{
  display:grid;
  grid-template-columns: 90px 1fr 1fr;
  gap:10px;
  align-items:center;
}
.avail-grid .hdr{
  font-size:12px;
  color:rgba(242,245,243,.65);
  text-transform:uppercase;
  letter-spacing:.4px;
}
.avail-day{
  font-weight:800;
  color:rgba(242,245,243,.9);
  font-size:13px;
}

.avail-cell{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}

.avail-toggle{
  appearance:none;
  -webkit-appearance:none;
  width:44px;
  height:26px;
  border-radius:999px;
  position:relative;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  outline:none;
  cursor:pointer;
  transition: all .18s ease;
}
.avail-toggle:before{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:20px;
  height:20px;
  border-radius:999px;
  background: rgba(242,245,243,.85);
  transition: all .18s ease;
}
.avail-toggle:checked{
  border-color: rgba(124,255,178,.45);
  background: rgba(124,255,178,.12);
}
.avail-toggle:checked:before{
  left:21px;
  background: #bfffd9;
}

.avail-label{
  font-size:13px;
  color: rgba(242,245,243,.8);
}

@media (max-width:720px){
  .avail-grid{grid-template-columns: 64px 1fr 1fr}
  .avail-cell{padding:10px}
}