:root{
  --bg:#0e1321;
  --panel:#111a2e;
  --panel-2:#0f1633;
  --text:#eef3ff;
  --muted:#aab3cc;
  --accent:#74d3c8;
  --accent-2:#a7b0ff;
  --green:#8de28a;
  --red:#ff6b6b;
  --yellow:#ffd166;
  --sam:#68b4ff; --maya:#ff87a0; --alex:#ffc66b; --parent:#7fdbca;
  --grid:#1b2342; --shadow:0 10px 26px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial;
  color:var(--text);
  background:radial-gradient(1200px 600px at 10% -10%, rgba(167,176,255,.12), transparent 60%),
             radial-gradient(900px 500px at 100% 0%, rgba(116,211,200,.12), transparent 50%),
             #0c1120;
}
.app-header{display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid #1a2142; backdrop-filter: blur(8px); position:sticky; top:0; z-index:10; background:rgba(14,19,33,.7);}
.brand{display:flex; gap:10px; align-items:center}
.logo-img{width:44px; height:44px; border-radius:12px; box-shadow:var(--shadow); object-fit:cover}
.brand-text h1{margin:0; font-size:18px}
.brand-text .tagline{font-size:12px; color:var(--muted)}
.topnav{display:flex; gap:8px}
.topnav .tablink{background:transparent; border:1px solid #2a335c; color:var(--text); padding:8px 10px; border-radius:10px; cursor:pointer}
.topnav .tablink.active{border-color:transparent; background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#0c1120; font-weight:800}
.hero{display:flex; justify-content:center; padding:8px 16px; color:var(--muted); font-size:13px}
.nl-add{display:flex; gap:8px}
.nl-add input{ flex:1; background:var(--panel); border:1px solid #1b2342; color:var(--text); padding:10px 12px; border-radius:10px; outline:none;}
button{border:none; cursor:pointer; border-radius:10px; padding:9px 12px}
button.primary{background:linear-gradient(90deg, var(--accent), var(--accent-2)); color:#0c1120; font-weight:800}
button.ghost{background:transparent; color:var(--text); border:1px solid #2a335c}
button.small{padding:6px 9px; border-radius:9px}
.tab.hidden{display:none}
.app-body{display:grid; grid-template-columns: 280px 1fr 320px; gap:16px; padding:16px;}
.app-body.single{grid-template-columns: 1fr;}
.sidebar .card, .calendar-area, .card{ background:linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%); border:1px solid #1b2342; border-radius:16px; padding:14px; box-shadow:var(--shadow); }
.sidebar{display:flex; flex-direction:column; gap:16px}
.calendar-area{display:flex; flex-direction:column; gap:10px; min-height:70vh}
.calendar-header{display:flex; align-items:center; gap:10px; justify-content:center}
.calendar-header h2{margin:8px 0 0 0; font-size:18px}
.calendar-grid{ position:relative; display:grid; grid-template-columns: 60px repeat(7, 1fr); grid-auto-rows: 40px; gap:1px; background:#141b38; border:1px solid #1b2342; border-radius:12px; overflow:hidden; }
.time-slot{background:var(--panel); color:var(--muted); font-size:12px; display:flex; align-items:flex-start; padding:6px 8px}
.grid-cell{background:var(--panel); border-top:1px solid #1b2342}
.day-header{ background:#0f1842; border-bottom:1px solid #1b2342; padding:10px; font-weight:700; text-align:center; position:sticky; top:0; z-index:1; }
.event{ position:absolute; left:0; right:0; margin:0 4px; border-radius:10px; padding:6px 8px; color:#0c1120; font-weight:800; font-size:12px; box-shadow:0 6px 16px rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.12); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.event .sub{display:block; font-weight:600; font-size:11px; opacity:.9}
.event.sam{background:var(--sam)} .event.maya{background:var(--maya)} .event.alex{background:var(--alex)} .event.parent{background:var(--parent)}
.event.conflict{outline:2px solid var(--red)}
.legend{display:flex; gap:16px; color:var(--muted); font-size:12px; padding:2px 6px}
.dot{display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:6px; vertical-align:middle}
.dot-sam{background:var(--sam)} .dot-maya{background:var(--maya)} .dot-alex{background:var(--alex)} .dot-parent{background:var(--parent)}
.family-list, .digest-list, .conflict-list, .suggestion-list, .list.simple{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px}
.family-item{display:flex; align-items:center; gap:10px; padding:8px; background:rgba(255,255,255,.03); border:1px solid #1b2342; border-radius:12px}
.badge{width:28px; height:28px; border-radius:10px; display:grid; place-items:center; font-weight:800; color:#0c1120}
.badge.sam{background:var(--sam)} .badge.maya{background:var(--maya)} .badge.alex{background:var(--alex)} .badge.parent{background:var(--parent)}
.label{flex:1}
.toggle{appearance:none; width:42px; height:24px; background:#2a335c; border-radius:20px; position:relative; outline:none; cursor:pointer; border:1px solid #3a4472}
.toggle:checked{background:linear-gradient(90deg, var(--accent), var(--accent-2))}
.toggle:before{content:""; position:absolute; width:18px; height:18px; top:2px; left:2px; border-radius:50%; background:white; transition:all .2s}
.toggle:checked:before{left:22px}
.empty{color:var(--muted); font-size:13px; padding:8px 0}
.muted{color:var(--muted); font-size:13px}
.med-form, .maint-form{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px}
.med-form input, .maint-form input, .maint-form select{ background:var(--panel); border:1px solid #1b2342; color:var(--text); padding:10px 12px; border-radius:10px; outline:none; }
.med-card{border:1px solid #1b2342; border-radius:12px; padding:12px; background:rgba(255,255,255,.03); display:flex; justify-content:space-between; align-items:center; gap:10px}
.med-meta{font-size:12px; color:var(--muted)}
.med-slots{display:flex; gap:6px; flex-wrap:wrap}
.slot{border:1px solid #2a335c; background:#0f1633; padding:6px 8px; border-radius:8px; cursor:pointer}
.slot.bad{border-color:var(--red); color:var(--red)}
.import-label span{display:inline-block; padding:6px 9px; border:1px solid #2a335c; border-radius:9px; cursor:pointer}
.app-footer{padding:10px 16px; color:var(--muted); font-size:12px; text-align:center; border-top:1px solid #1a2142; margin-top:10px}
@media (max-width: 980px){
  .app-body{grid-template-columns: 1fr}
  .sidebar.left, .sidebar.right{order:2}
  .calendar-area{order:1}
}
body.light{ background:#f4f8ff; color:#0a0f1f }
body.light .app-header{ background:#ffffffc9; }
body.light .sidebar .card, body.light .calendar-area, body.light .card{ background:#fff; border-color:#e5e8f5; }
body.light .calendar-grid{ background:#e9edff; border-color:#e5e8f5 }
body.light .time-slot, body.light .grid-cell{ background:#fff }
body.light .day-header{ background:#f8f9ff; border-color:#e5e8f5 }
body.light .legend{ color:#4a4f66 }
body.light .nl-add input{ background:#fff; border-color:#e5e8f5; color:#0a0f1f }
body.light button.ghost{ border-color:#e5e8f5; color:#0a0f1f }