:root{
  --bg: #ffffff;
  --text: #06120a;
  --muted: rgba(6,18,10,.62);
  --line: rgba(6,18,10,.08);

  --green: #19d36b;
  --green2:#00c2a8;

  /* Modern shadow stack */
  --shadow: 0 18px 60px rgba(6,18,10,.08);
  --shadowSoft: 0 10px 24px rgba(6,18,10,.06);
  --shadowHover: 0 26px 80px rgba(6,18,10,.10);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background:
    radial-gradient(900px 500px at 10% 0%, rgba(25,211,107,.16), transparent 55%),
    radial-gradient(900px 500px at 90% 10%, rgba(0,194,168,.12), transparent 55%),
    radial-gradient(800px 400px at 50% 105%, rgba(25,211,107,.10), transparent 55%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.small{font-size:13px}
.muted{color:var(--muted)}
.hr{height:1px;background:var(--line);margin:18px 0}

/* ===== HEADER / NAV ===== */
header{
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(255,255,255,.72);
  border-bottom: 1px solid var(--line);
}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  height:72px; gap:14px;
}

.brand{
  display:flex; align-items:center; gap:10px;
  font-weight: 950;
  letter-spacing: -.02em;
  font-size: 22px;
}

.brand-badge{
  width:34px; height:34px; border-radius:14px;
  background: linear-gradient(135deg, var(--green), var(--green2));
  box-shadow: 0 14px 40px rgba(25,211,107,.22);
}

.links{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.links a{
  color: rgba(6,18,10,.60);
  font-weight: 850;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 12px;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.links a:hover{
  color: var(--text);
  background: rgba(255,255,255,.55);
  transform: translateY(-1px);
}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px;
  border-radius:999px;
  font-weight:950;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.55);
  cursor:pointer;

  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

.btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadowSoft);
  border-color: rgba(6,18,10,.12);
}
.btn:active{transform: translateY(0)}

.btn.primary{
  background: linear-gradient(135deg, var(--green), var(--green2));
  color:#03140a;
  border:none;
  box-shadow: 0 18px 55px rgba(25,211,107,.18);
}
.btn.primary:hover{
  box-shadow: 0 26px 78px rgba(25,211,107,.22);
}
.btn.ghost{
  background: rgba(255,255,255,.45);
}
.btn.small{padding:10px 14px; font-size:13px}

/* ===== HERO ===== */
.hero{
  padding: 76px 0 34px;
  position: relative;
  overflow: hidden;
}

.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  align-items: stretch;
}

.eyebrow{
  margin:0 0 12px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(6,18,10,.52);
}

h1{
  margin:0 0 14px;
  font-size: 50px;
  line-height: 1.04;
  letter-spacing: -.045em;
}

.subhead{
  margin:0;
  max-width: 780px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.85;
}

.row{display:flex; gap:10px; flex-wrap:wrap; margin-top: 18px}

.ai-blob{
  position:absolute;
  right:-190px;
  top:-240px;
  width:540px;
  height:540px;
  opacity:.92;
  pointer-events:none;
  filter: saturate(1.06);
}

/* ===== SECTIONS / GRIDS ===== */
section{padding: 26px 0}
.h2{margin:0 0 8px; font-size: 22px; letter-spacing: -.01em}
.lead{margin:0 0 14px; color: var(--muted); line-height: 1.8}

.grid3{display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:14px}
.grid2{display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:14px}

/* ===== CARDS ===== */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.68));
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 18px;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadowHover);
  border-color: rgba(6,18,10,.12);
}

.card h3{margin:0 0 8px; font-size: 16px; letter-spacing: -.01em}
.card p{margin:0 0 10px; color: var(--muted); line-height: 1.75; font-size: 15px}
.card p:last-child{margin-bottom:0}

/* Pills */
.pills{display:flex; gap:8px; flex-wrap:wrap; margin-top: 10px}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.55);
  font-size: 12px;
  font-weight: 900;
  color: rgba(6,18,10,.70);
  transition: transform .16s ease, background .16s ease;
}
.pill:hover{transform: translateY(-1px); background: rgba(255,255,255,.62)}
.dot{width:8px;height:8px;border-radius:50%}
.dot.g{background: var(--green)}
.dot.y{background: #ffcf5a}
.dot.r{background: #ff5a6b}

/* ===== PREVIEW ===== */
.preview{
  padding:0;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.62));
}

.preview-top{
  display:flex; align-items:center; gap:10px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.55);
}

.preview-title{
  font-weight: 950;
  font-size: 13px;
  color: rgba(6,18,10,.58);
}

.macdot{width:10px;height:10px;border-radius:50%}
.macdot.r{background:#ff5a6b}
.macdot.y{background:#ffcf5a}
.macdot.g{background:#3ee58b}

.preview-body{padding:14px}

.item{
  display:flex; gap:10px; align-items:flex-start;
  padding:12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.52);
  margin-bottom:10px;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.item:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.60);
  border-color: rgba(6,18,10,.12);
}

.tag{
  font-size: 12px;
  font-weight: 950;
  padding:6px 10px;
  border-radius:999px;
  border: 1px solid var(--line);
  min-width: 86px;
  text-align:center;
}
.tag.high{background: rgba(255,90,107,.10)}
.tag.med{background: rgba(255,207,90,.12)}
.tag.low{background: rgba(25,211,107,.10)}

.item-title{font-weight: 950}
.item-sub{color: rgba(6,18,10,.62); font-size: 13px; margin-top:4px; line-height:1.35}

.divider{height:1px;background:var(--line);margin:12px 0}
.note{color: rgba(6,18,10,.60); font-style: italic; font-size: 13px; line-height: 1.55}

/* ===== CTA ===== */
.cta{
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 22px;
  background: linear-gradient(135deg, rgba(25,211,107,.14), rgba(0,194,168,.10));
  box-shadow: var(--shadow);
}

.cta-inner{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: center;
}

.form{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}

.input{
  flex:1;
  min-width: 240px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.72);
  color: var(--text);
  outline:none;
  transition: box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.input:focus{
  border-color: rgba(25,211,107,.55);
  box-shadow: 0 0 0 6px rgba(25,211,107,.12);
  background: rgba(255,255,255,.84);
}
.input::placeholder{color: rgba(6,18,10,.45)}

/* ===== FOOTER ===== */
footer{
  border-top: 1px solid var(--line);
  padding: 18px 0;
  color: rgba(6,18,10,.55);
  font-size: 14px;
}

.foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.footlinks{display:flex;gap:14px;flex-wrap:wrap}
.footlinks a{
  color: rgba(6,18,10,.55);
  font-weight: 850;
  padding: 8px 10px;
  border-radius: 12px;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.footlinks a:hover{
  color: var(--text);
  background: rgba(255,255,255,.55);
  transform: translateY(-1px);
}

/* ===== PAGE ===== */
.page{padding: 40px 0;}
.page h1{font-size:34px}
.page .card{box-shadow: var(--shadow)}
.list{margin:0; padding-left:18px; color: var(--muted); line-height:1.75}
.list li{margin: 8px 0}

/* ===== RESPONSIVE ===== */
@media (max-width: 980px){
  h1{font-size:40px}
  .hero-grid{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .cta-inner{grid-template-columns:1fr}
  .form{justify-content:flex-start}
  .ai-blob{right:-260px; top:-280px; width:540px; height:540px; opacity:.85}
}


/* ===== THEME (DARK MODE) ===== */
:root.dark{
  --bg: #07110b;
  --text: #eef7f1;
  --muted: rgba(238,247,241,.72);
  --line: rgba(238,247,241,.12);
  --shadow: 0 18px 60px rgba(0,0,0,.38);
  --shadowSoft: 0 10px 24px rgba(0,0,0,.28);
  --shadowHover: 0 26px 80px rgba(0,0,0,.45);
}

:root.dark body{
  background:
    radial-gradient(900px 500px at 10% 0%, rgba(25,211,107,.14), transparent 55%),
    radial-gradient(900px 500px at 90% 10%, rgba(0,194,168,.10), transparent 55%),
    radial-gradient(800px 400px at 50% 105%, rgba(25,211,107,.08), transparent 55%),
    var(--bg);
}

/* Make header work in dark mode */
:root.dark header{
  background: rgba(7,17,11,.68);
  border-bottom: 1px solid var(--line);
}
:root.dark .links a:hover{background: rgba(255,255,255,.06)}
:root.dark .card{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
}
:root.dark .btn{
  background: rgba(255,255,255,.06);
  border-color: var(--line);
  color: var(--text);
}
:root.dark .btn.ghost{background: rgba(255,255,255,.05)}
:root.dark .btn:hover{border-color: rgba(255,255,255,.18)}
:root.dark .input{
  background: rgba(255,255,255,.06);
  border-color: var(--line);
  color: var(--text);
}
:root.dark .input::placeholder{color: rgba(238,247,241,.55)}
:root.dark .pill{background: rgba(25,211,107,.16)}

/* ===== NAV SESSION PILL ===== */
.session-pill{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.45);
  font-size: 13px;
  font-weight: 950;
  color: rgba(6,18,10,.72);
}
:root.dark .session-pill{
  background: rgba(255,255,255,.06);
  color: rgba(238,247,241,.80);
}

/* ===== AUTH PAGE ===== */
.auth-grid{
  display:grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap:14px;
}
@media (max-width:900px){
  .auth-grid{grid-template-columns:1fr}
}
.auth-title{margin:0 0 6px; font-size:22px; letter-spacing:-.02em}
.form-stack .label{margin-top:10px}
.form-msg{margin-top:10px; font-size:13px; color:#b00020}
:root.dark .form-msg{color:#ff6b7a}

/* ===== APP LAYOUT ===== */
.app-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
  flex-wrap:wrap;
}
.app-grid{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:14px;
  align-items:start;
}
.app-grid.panel-hidden{
  grid-template-columns: 1fr;
}
@media (max-width:980px){
  .app-grid{grid-template-columns:1fr}
}
.calHead{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px
}
.month{font-weight:950;letter-spacing:-.02em}
.dow{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:10px;
  margin-bottom:10px
}
.dow div{font-size:12px;font-weight:900;color:var(--muted)}
.cal{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:10px;
}
.day{
  min-height:110px;
  padding:10px;
  border-radius:16px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.68);
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
  overflow:hidden;
}
:root.dark .day{background: rgba(255,255,255,.05)}
.day:hover{transform:translateY(-1px);border-color:rgba(25,211,107,.55)}
.day.outside{opacity:.45}
.dayNum{font-weight:900;font-size:12px;color:rgba(6,20,14,.75)}
:root.dark .dayNum{color: rgba(238,247,241,.76)}
.pill{
  margin-top:7px;
  display:inline-flex;
  align-items:center;
  max-width:100%;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(25,211,107,.14);
  font-size:11px;
  font-weight:950;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:pointer;
}
.pill.more{cursor:default; opacity:.85}
.pill:active{transform: translateY(0)}
.panel-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px}
.panel-title{margin:0 0 6px; font-size:16px; letter-spacing:-.01em}
.event-form .textarea{min-height:90px}
.event-grid{
  display:grid;
  grid-template-columns: 1.3fr 1fr;
  gap:12px;
}
.event-grid .field{min-width:0}
.event-grid .full{grid-column:1 / -1}
@media (max-width:520px){
  .event-grid{grid-template-columns:1fr}
}
.label{
  display:block;
  font-size:12px;
  font-weight:900;
  color: var(--muted);
  margin: 10px 0 6px;
}

/* Upcoming list */
.listItem{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.58);
  margin-bottom:10px;
}
:root.dark .listItem{background: rgba(255,255,255,.05)}
.listActions{display:flex; gap:8px; flex-wrap:wrap; align-items:center}

/* Segmented control */
.segmented{
  display:inline-flex;
  border:1px solid var(--line);
  border-radius:999px;
  background: rgba(255,255,255,.45);
  overflow:hidden;
}
:root.dark .segmented{background: rgba(255,255,255,.06)}
.seg-btn{
  border:0;
  background: transparent;
  padding:10px 14px;
  font-weight:950;
  cursor:pointer;
  color: rgba(6,18,10,.72);
}
:root.dark .seg-btn{color: rgba(238,247,241,.82)}
.seg-btn.active{
  background: rgba(25,211,107,.20);
  color: var(--text);
}

/* Modal */
.modal-backdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.44);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:50;
}
.modal{
  width:min(560px, 100%);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.82));
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow: var(--shadowHover);
}
:root.dark .modal{
  background: linear-gradient(180deg, rgba(18,26,20,.96), rgba(12,18,14,.86));
}
.modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:16px 16px 12px;
  border-bottom:1px solid var(--line);
}
.modal-title{font-weight:950; font-size:18px; letter-spacing:-.02em}
.modal-body{padding:14px 16px}
.modal-notes{color: var(--muted); line-height:1.6}
.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:12px 16px 16px;
}


/* ===== APP FORM FIXES ===== */
.event-form .input,
.event-form textarea{
  width:100%;
  flex: initial;
  min-width: 0;
  border-radius: 14px;
  background: rgba(255,255,255,.85);
}
:root.dark .event-form .input,
:root.dark .event-form textarea{
  background: rgba(18,26,20,.75);
}
.event-form textarea{border-radius: 16px;}

/* Make sure hidden modals never capture layout/clicks */
.modal-backdrop[hidden]{display:none !important;}
.modal-backdrop{pointer-events:auto;}
.modal{position:relative; pointer-events:auto;}
.modal-actions .btn{pointer-events:auto;}


/* Event colors */
:root{
  --c-red: rgba(255,90,107,.18);
  --c-yellow: rgba(255,207,90,.20);
  --c-green: rgba(25,211,107,.18);
  --c-blue: rgba(84,158,255,.18);
  --c-purple: rgba(168,100,255,.18);
  --c-pink: rgba(255,105,180,.18);
  --c-orange: rgba(255,160,72,.20);
}
.pill.c-red{background: var(--c-red)}
.pill.c-yellow{background: var(--c-yellow)}
.pill.c-green{background: var(--c-green)}
.pill.c-blue{background: var(--c-blue)}
.pill.c-purple{background: var(--c-purple)}
.pill.c-pink{background: var(--c-pink)}
.pill.c-orange{background: var(--c-orange)}
.event-dot{width:10px;height:10px;border-radius:999px;border:1px solid var(--line);flex:0 0 auto;margin-top:3px}
.event-dot.red{background: var(--c-red)}
.event-dot.yellow{background: var(--c-yellow)}
.event-dot.green{background: var(--c-green)}
.event-dot.blue{background: var(--c-blue)}
.event-dot.purple{background: var(--c-purple)}
.event-dot.pink{background: var(--c-pink)}
.event-dot.orange{background: var(--c-orange)}