:root{
  --bg:#eef3f7; --card:#ffffff; --ink:#192229; --muted:#5d6b76; --line:#d4dde4;
  --accent:#1e5b94; --accent-bg:#e3eef8;     /* sheep app = blue */
  --lamb:#2f7d52; --lamb-bg:#e3f3ea;         /* tile accents */
  --weeg:#1e5b94; --weeg-bg:#e3eef8;
  --akt:#9a6a14;  --akt-bg:#f6edda;
  --gesond:#a33232; --gesond-bg:#fbe9e9;
  --ok:#1aa64b; --warn:#9a6a14; --err:#a33232;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.tile:active,.tile-wide:active,.key:active,.btn-wide:active,.primary:active,.seg button:active,.qbtn:active{filter:brightness(.94);}
html,body{margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:16px;line-height:1.4;}
#bar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;
  padding:12px 16px;background:var(--accent);color:#fff;}
#title{font-size:18px;font-weight:700;letter-spacing:.01em;}
#bar-right{display:flex;align-items:center;gap:10px;}
.who{font-size:12px;opacity:.9;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#net{font-size:12px;padding:3px 9px;border-radius:8px;background:rgba(255,255,255,.18);color:#fff;}
#net.off{background:rgba(0,0,0,.18);}
.light{display:inline-block;width:13px;height:13px;border-radius:50%;border:1px solid rgba(255,255,255,.5);}
.light.green{background:#7ee2a3;} .light.yellow{background:#ffd34d;} .light.red{background:#ff7a6b;}
#toast{position:fixed;left:50%;top:62px;transform:translateX(-50%);z-index:30;max-width:90%;
  padding:11px 16px;border-radius:12px;font-size:15px;font-weight:600;text-align:center;
  box-shadow:0 4px 16px rgba(0,0,0,.18);}
#toast.ok{background:var(--ok);color:#fff;} #toast.warn{background:var(--akt-bg);color:var(--akt);border:1px solid var(--akt);}
.screen{max-width:520px;margin:0 auto;padding:16px;}
.hidden{display:none;}
.muted{color:var(--muted);font-size:13px;}
.center{text-align:center;}
.err{color:var(--err);min-height:20px;}
h2{font-size:21px;font-weight:700;margin:6px 0 10px;}
.fld{display:block;margin:0 0 16px;}
.fld>span{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;}
input,select,textarea,.txt{width:100%;font-size:17px;padding:0 12px;
  border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font-family:inherit;}
input,select,.txt{height:48px;} textarea.txt{height:auto;padding:10px 12px;line-height:1.4;resize:vertical;}
button{font-family:inherit;cursor:pointer;}
.primary{width:100%;height:54px;font-size:17px;font-weight:700;border:none;border-radius:14px;
  background:var(--accent);color:#fff;margin-top:8px;}
.primary:disabled{opacity:.4;}
.link{background:none;border:none;color:var(--accent);font-size:15px;padding:6px 0;}
.btn-wide{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;
  font-size:16px;font-weight:600;border:1px dashed var(--accent);border-radius:14px;background:var(--accent-bg);
  color:var(--accent);margin-bottom:10px;}
/* home tiles */
#home-hi{font-size:15px;margin:2px 0 14px;}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  aspect-ratio:1/1;border:1px solid var(--line);border-radius:20px;background:var(--card);color:var(--ink);
  box-shadow:0 1px 3px rgba(0,0,0,.05);}
.tile-ico{font-size:46px;line-height:1;}
.tile-lbl{font-size:17px;font-weight:700;}
.tile.lamb{background:var(--lamb-bg);border-color:var(--lamb);} .tile.lamb .tile-lbl{color:var(--lamb);}
.tile.weeg{background:var(--weeg-bg);} .tile.akt{background:var(--akt-bg);} .tile.gesond{background:var(--gesond-bg);}
.tile:disabled{opacity:.55;}
.soon{position:absolute;top:8px;right:8px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:var(--muted);background:rgba(0,0,0,.05);padding:2px 7px;border-radius:8px;}
/* wide choice tiles (geboorte / vrek) */
.tile-wide{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:16px;margin-bottom:12px;
  border:1px solid var(--line);border-radius:18px;background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.05);}
.tile-wide.birth{background:var(--lamb-bg);border-color:var(--lamb);}
.tile-wide.death{background:var(--gesond-bg);border-color:var(--gesond);}
.tw-ico{font-size:38px;line-height:1;}
.tw-txt{display:flex;flex-direction:column;gap:2px;}
.tw-txt b{font-size:18px;} .tw-txt small{color:var(--muted);font-size:13px;}
.back-home,.back-lamb{display:inline-block;}
/* pin */
#pin-who{font-size:17px;font-weight:600;margin:18px 0 10px;}
#pin-dots{font-size:34px;letter-spacing:12px;height:42px;}
#keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:300px;margin:14px auto 0;}
.key{height:64px;font-size:26px;font-weight:500;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);}
/* birth — lamb cards */
.sub-h{font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:4px 2px 10px;}
.lamb-card{border:1px solid var(--line);border-radius:16px;padding:12px;margin-bottom:12px;background:var(--card);}
.lamb-card .lc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.lc-head b{font-size:15px;} .lc-rm{font-size:13px;color:var(--err);background:none;border:none;}
.seg{display:flex;gap:8px;margin-bottom:10px;}
.seg button{flex:1;height:46px;font-size:15px;font-weight:700;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--muted);}
.seg button.on{background:var(--accent-bg);color:var(--accent);border-color:var(--accent);}
.seg.alive button.on.yes{background:var(--lamb-bg);color:var(--lamb);border-color:var(--lamb);}
.seg.alive button.on.no{background:var(--gesond-bg);color:var(--gesond);border-color:var(--gesond);}
.lc-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;}
.lc-row label{font-size:12px;color:var(--muted);}
.lc-row input{height:46px;margin-top:4px;}
.lc-lbl{font-size:12px;color:var(--muted);margin-bottom:4px;}
/* quick cause chips */
.quick{display:flex;flex-wrap:wrap;gap:8px;margin:-8px 0 16px;}
.qbtn{height:38px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);
  font-size:14px;font-weight:600;color:var(--ink);}
.qbtn:active{background:var(--accent-bg);}