:root{
  --navy:#082f55;
  --navy-2:#0d3d69;
  --ink:#102b47;
  --muted:#6d7f8f;
  --line:#dce5eb;
  --blue:#eaf4fb;
  --green:#edf7ec;
  --yellow:#fff6df;
  --purple:#f2ecfb;
  --red:#e84e4e;
  --soft-red:#fff2f2;
  --white:#fff;
  --bg:#f7f9fb;
  --shadow:0 8px 26px rgba(16,43,71,.08);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#edf2f5;color:var(--ink)}
[hidden]{display:none!important}
button,input,select{font:inherit}
button{cursor:pointer}
.login-screen{
  min-height:100vh;display:grid;place-items:center;padding:24px;
  background:linear-gradient(180deg,#eef6fb 0%,var(--bg) 52%,#f3f7f2 100%)
}
.login-card{
  width:min(100%,430px);background:#fff;border:1px solid var(--line);border-radius:22px;
  padding:30px;box-shadow:var(--shadow)
}
.login-brand{justify-content:flex-start;margin-bottom:30px}
.login-card h1{font-size:32px;line-height:1.1;margin:7px 0 24px}
.login-error{min-height:18px;color:#b93636;font-size:13px;font-weight:750}
.login-card .primary-btn{font-size:15px}
.login-card .primary-btn:disabled{opacity:.65;cursor:wait}
.app-shell{
  width:min(100%, 760px);
  min-height:100vh;
  margin:auto;
  background:var(--bg);
  padding:0 26px 105px;
  box-shadow:0 0 60px rgba(8,47,85,.08);
}
.topbar{
  display:grid;
  grid-template-columns:54px 1fr 54px;
  align-items:center;
  gap:12px;
  padding:28px 0 20px;
}
.icon-btn{
  width:46px;height:46px;border:0;background:transparent;border-radius:14px;
  color:var(--navy);font-size:27px;
}
.brand{display:flex;align-items:center;justify-content:center;gap:12px}
.brand-mark{
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#2c7ed8,#68a858);
  color:white;font-size:26px;font-weight:700;
}
.brand-title{font-weight:800;font-size:24px;line-height:1.05}
.brand-sub{font-size:13px;color:var(--muted);margin-top:3px}
.notification-btn{position:relative}
.badge{
  position:absolute;right:3px;top:4px;background:#e53e3e;color:white;
  width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800
}
.hero-card{
  background:linear-gradient(135deg,#f2f8ee,#eef8f4);
  border:1px solid #d9e7d7;
  border-radius:24px;
  padding:26px;
  display:grid;grid-template-columns:1fr 1px 1fr;gap:28px;
  box-shadow:var(--shadow)
}
.hero-divider{background:#d9e3dd}
.hero-half{min-width:0}
.section-label{
  font-size:12px;font-weight:800;letter-spacing:.04em;color:#455d69;margin-bottom:16px
}
.person-row{display:flex;gap:16px;align-items:center}
.avatar{
  width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
  font-size:28px;font-weight:800;border:5px solid rgba(255,255,255,.85);
  box-shadow:0 3px 10px rgba(16,43,71,.12)
}
.avatar.small{width:58px;height:58px;font-size:22px}
.avatar.sarah{background:#f3d7c2;color:#71452d}
.avatar.denis{background:#cfe3f4;color:#224d71}
.hero-name{font-size:28px;font-weight:800;color:#12652c;line-height:1.1}
.muted{color:var(--muted)}
.handoff-row{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.arrow{font-size:32px;color:#56a243}
.handoff-time{font-size:20px;font-weight:800}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.panel{
  background:white;border:1px solid var(--line);border-radius:20px;padding:22px;
  box-shadow:var(--shadow)
}
.panel-heading{font-size:14px;font-weight:850;letter-spacing:.02em;margin-bottom:10px}
.item-row,.task-row,.gap-row{
  display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-top:1px solid #edf1f4
}
.item-row:first-child,.task-row:first-child,.gap-row:first-child{border-top:0}
.item-icon{
  width:40px;height:40px;border-radius:12px;background:var(--blue);display:grid;place-items:center;font-size:19px;flex:0 0 auto
}
.item-title{font-weight:800}
.item-meta{font-size:13px;color:var(--muted);margin-top:4px}
.childcare-panel{background:linear-gradient(180deg,#fffaf1,#fff)}
.status-ok{display:flex;align-items:center;gap:15px;padding:18px 0}
.status-icon{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#68b74b;color:white;font-size:28px;font-weight:900
}
.status-title{font-size:22px;font-weight:850;color:#17652c}
.mini-week{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #eee1bc;border-radius:16px;overflow:hidden;margin-top:14px}
.mini-day{padding:12px 8px;text-align:center;border-left:1px solid #eee1bc;font-size:12px}
.mini-day:first-child{border-left:0}.mini-day strong{display:block;margin-bottom:5px}
.mini-alert{color:#d46a1f;font-weight:850}
.family-board{margin-top:18px}
.board-header{display:flex;justify-content:space-between;align-items:center}
.text-btn,.soft-btn{border:0;background:transparent;color:#1262b0;font-weight:750}
.board-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:12px}
.board-card{border-radius:16px;padding:18px;min-height:140px;border:1px solid rgba(0,0,0,.06)}
.board-card.green{background:var(--green)}.board-card.yellow{background:var(--yellow)}.board-card.purple{background:var(--purple)}
.board-label{font-size:11px;font-weight:850;letter-spacing:.04em;margin-bottom:12px}
.board-title{font-size:17px;font-weight:800;line-height:1.35}
.affirmation{
  margin-top:15px;background:#e8f2ff;border:1px solid #cfe1f3;border-radius:13px;
  padding:13px 16px;color:#1762b0;font-weight:750
}
.bottom-nav{
  position:fixed;left:50%;bottom:0;transform:translateX(-50%);
  width:min(100%,760px);display:grid;grid-template-columns:repeat(5,1fr);
  background:linear-gradient(180deg,var(--navy),#062642);
  padding:12px 18px max(14px,env(safe-area-inset-bottom));
  border-radius:20px 20px 0 0;z-index:10
}
.bottom-nav button{
  border:0;background:transparent;color:#c6d6e4;display:grid;place-items:center;gap:3px;padding:4px;font-size:24px
}
.bottom-nav small{font-size:11px;font-weight:700}
.bottom-nav button.active{color:#c9f087}
.add-tab span{
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#b9e987;color:var(--navy);
  margin-top:-28px;border:5px solid var(--navy)
}
.page-title{display:flex;align-items:end;justify-content:space-between;margin:6px 0 14px}
.page-title h1{margin:0;font-size:30px;line-height:1.1}
.soft-btn{
  background:white;border:1px solid var(--line);border-radius:12px;padding:10px 14px;color:#17652c
}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-bottom:14px}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:5px}
.denis-dot{background:#3182ce}.sarah-dot{background:#65a85a}.gap-dot{background:#e45d5d}.caregiver-dot{background:#8d67c1}
.week-list{display:grid;gap:10px}
.day-card{display:grid;grid-template-columns:58px 1fr;gap:12px;align-items:stretch}
.day-label{font-size:12px;font-weight:850;color:#516777;padding-top:12px}
.day-blocks{display:grid;gap:8px}
.block{border-radius:13px;padding:11px 13px;font-size:13px;font-weight:750}
.block small{display:block;font-weight:500;margin-top:3px}
.block.denis{background:#e7f2fb;color:#1c5e92}
.block.sarah{background:#edf7ec;color:#3b7136}
.block.gap{background:#fff0f0;color:#a33131;border:1px dashed #ed9a9a}
.block.caregiver{background:#f3ecfa;color:#694b8b}
.add-type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:22px}
.type-card{
  border:1px solid var(--line);background:#fff;border-radius:15px;padding:15px 8px;display:grid;gap:5px;place-items:center;color:var(--ink)
}
.type-card strong{font-size:24px}.type-card span{font-weight:800}.type-card small{font-size:10px;color:var(--muted);text-align:center}
.type-card.active{border-color:#3182ce;background:#f0f7fd}
.form-grid{display:grid;gap:14px}.form-grid label{display:grid;gap:6px;font-weight:750}
.split{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input,select{
  width:100%;border:1px solid #cfdbe3;border-radius:12px;background:#fbfdff;padding:13px;color:var(--ink);outline:none
}
input:focus,select:focus{border-color:#4b95c8;box-shadow:0 0 0 3px #e6f2fa}
.primary-btn{border:0;border-radius:13px;padding:14px;background:#1765ad;color:#fff;font-weight:850}
.coverage-options{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.coverage-options button{border:1px solid #d9e1e6;background:#fff;border-radius:999px;padding:8px 11px;font-size:12px;font-weight:750}
.danger-label{color:#d84040;font-weight:900;font-size:12px;margin-bottom:6px}
.done{text-decoration:line-through;color:#8fa0ad}
.task-row{justify-content:space-between}.task-main{display:flex;gap:12px}.task-actions{display:flex;gap:7px}
.task-actions button{border:0;border-radius:10px;padding:7px 9px;background:#edf3f6;color:#294a60;font-size:12px}
.empty{padding:20px;text-align:center;color:var(--muted)}
.toast{
  position:fixed;left:50%;bottom:100px;transform:translateX(-50%);
  background:#102b47;color:white;border-radius:999px;padding:10px 16px;font-size:13px;box-shadow:var(--shadow);z-index:20
}
@media(max-width:650px){
  .app-shell{padding-left:14px;padding-right:14px}
  .brand-title{font-size:18px}.brand-sub{font-size:11px}
  .hero-card{grid-template-columns:1fr;gap:18px;padding:19px}
  .hero-divider{display:none}
  .two-col{grid-template-columns:1fr}
  .board-grid{grid-template-columns:1fr}
  .add-type-grid{grid-template-columns:1fr 1fr}
  .topbar{grid-template-columns:42px 1fr 42px}
  .icon-btn{width:40px;height:40px}
  .avatar{width:60px;height:60px}
  .hero-name{font-size:24px}
}