:root { --ink:#193328; --green:#235e43; --muted:#667a6c; --bg:#f8faf5; --line:#e0e9df; }
* { box-sizing:border-box; }
html { height:100%; }
body { display:grid; place-items:center; min-height:100dvh; margin:0; padding:20px; color:var(--ink); background:radial-gradient(circle at 15% 15%,#f4f7ec,#e5eee3 70%); font-family:'DM Sans',sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:3px solid #8aba62; outline-offset:2px; }
h1,h2,h3,h4,p { margin-top:0; }
h1,h2,h3,h4 { font-family:Outfit,sans-serif; }
.app-shell { display:flex; flex-direction:column; width:min(960px,66dvh,calc(100vw - 40px)); height:calc(100dvh - 40px); overflow:hidden; border:1px solid #d8e4d7; border-radius:32px; background:var(--bg); box-shadow:0 24px 80px rgba(29,67,41,.18); }
.app-header { display:flex; flex:none; align-items:center; justify-content:space-between; height:65px; padding:0 22px; border-bottom:1px solid var(--line); background:#fffefa; }
.brand { display:inline-flex; align-items:center; gap:7px; font-family:Outfit,sans-serif; font-size:23px; font-weight:800; letter-spacing:-1.2px; }
.brand-mark { display:block; flex:none; width:32px; height:32px; }
.brand-dot { color:#7bad24; }
.campus-pill { padding:7px 11px; border-radius:99px; background:#eaf2df; color:var(--green); font-size:11px; font-weight:800; letter-spacing:.6px; }
.app-content { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; }
.app-content::-webkit-scrollbar,.filter-row::-webkit-scrollbar { display:none; }
[data-screen][hidden],#survey-screen[hidden],#recommendations[hidden],.app-tabbar[hidden],#event-empty[hidden],#show-all-events[hidden] { display:none !important; }
.survey-screen { padding:30px 22px 28px; background:#fffefa; }
.survey-screen h1 { margin:10px 0 10px; font-size:39px; line-height:1.06; letter-spacing:-1.8px; }
.survey-screen h1 em { color:#438459; font-style:normal; }
.survey-lead { max-width:370px; color:#647768; font-size:13px; line-height:1.5; }
.survey-screen fieldset { min-width:0; margin:25px 0 0; padding:0; border:0; }
.survey-screen legend { display:flex; align-items:center; gap:9px; padding:0; font-family:Outfit,sans-serif; font-size:19px; font-weight:700; }
.survey-screen legend span { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#e4f2d8; color:var(--green); font:800 12px 'DM Sans',sans-serif; }
.survey-screen fieldset>p { margin:7px 0 10px; color:#859587; font-size:11px; }
.survey-options { display:grid; gap:8px; margin-top:12px; }
.survey-interests { grid-template-columns:repeat(2,minmax(0,1fr)); }
.survey-options label { position:relative; display:block; min-width:0; cursor:pointer; }
.survey-options input { position:absolute; width:1px; height:1px; opacity:0; }
.survey-options label span { display:block; min-height:45px; padding:12px 11px; border:1px solid #d7e4d4; border-radius:12px; background:white; color:#345343; font-size:12px; font-weight:800; }
.survey-options input:checked+span { border-color:var(--green); background:#e8f2dd; color:var(--green); box-shadow:inset 0 0 0 1px var(--green); }
.survey-options input:focus-visible+span { outline:3px solid #8aba62; outline-offset:2px; }
.survey-error { min-height:16px; margin:15px 0 5px; color:#b04b35; font-size:11px; font-weight:700; }
.survey-submit { width:100%; }
.survey-skip { display:block; width:100%; margin-top:10px; padding:10px; border:0; background:transparent; color:var(--green); font-size:12px; font-weight:800; }
.survey-privacy { margin:17px 0 0; color:#829183; font-size:10px; line-height:1.5; text-align:center; }
.preferences-button { margin-top:12px; padding:0; border:0; background:transparent; color:var(--green); font-size:11px; font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.recommendations { margin-bottom:23px; padding:16px; border:1px solid #cfe1c5; border-radius:18px; background:#f0f7e9; }
.recommendations-heading { display:flex; align-items:end; justify-content:space-between; gap:10px; }
.recommendations-heading h2 { margin:4px 0 0; font-size:23px; letter-spacing:-.6px; }
.recommendations-heading button { padding:5px 0; border:0; background:transparent; color:var(--green); font-size:11px; font-weight:800; text-decoration:underline; }
.recommendations>p { margin:8px 0 12px; color:#617763; font-size:11px; line-height:1.5; }
.recommendation-list { display:grid; gap:9px; }
.recommendation-card { padding:12px; border:1px solid #dae8d5; border-radius:13px; background:white; }
.recommendation-why { color:#4c8a4e; font-size:9px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; }
.recommendation-card h3 { margin:5px 0 5px; font-size:15px; line-height:1.2; }
.recommendation-card p { margin:2px 0; color:#68806d; font-size:11px; line-height:1.35; }
.recommendation-card a,.recommended-clubs a { display:block; margin-top:8px; color:var(--green); font-size:11px; font-weight:800; text-decoration:underline; text-underline-offset:2px; }
.recommended-clubs { padding:9px 2px 0; }
.recommended-clubs h3 { margin:0 0 7px; font-size:15px; }
.recommended-clubs a { margin:6px 0; }
.calendar-intro { padding:27px 22px 22px; background:#fffefa; }
.calendar-intro h1 { margin:10px 0 7px; font-size:39px; line-height:1.05; letter-spacing:-1.8px; }
.calendar-intro h1 em { color:#438459; font-style:normal; }
.calendar-intro p { margin:0; color:#647768; font-size:13px; line-height:1.5; }
.calendar-body { padding:20px 22px 24px; }
.calendar-panel { padding:16px 14px 11px; border:1px solid var(--line); border-radius:20px; background:white; box-shadow:0 4px 14px rgba(25,55,32,.04); }
.calendar-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:13px; }
.calendar-toolbar h2 { margin:0; font-size:20px; letter-spacing:-.5px; text-align:center; }
.calendar-toolbar button { display:grid; place-items:center; flex:none; width:31px; height:31px; border:1px solid #e1e9df; border-radius:50%; background:#f8faf5; color:var(--green); font-size:25px; line-height:1; }
.calendar-toolbar button:hover:not(:disabled) { background:#e8f2df; }
.calendar-toolbar button:disabled { opacity:.35; cursor:default; }
.calendar-weekdays,.calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; }
.calendar-weekdays { margin-bottom:3px; color:#839589; text-align:center; font-size:10px; font-weight:800; }
.calendar-day { position:relative; display:grid; place-items:center; width:100%; aspect-ratio:1; padding:0 0 5px; border:0; border-radius:11px; background:transparent; color:var(--ink); font-size:13px; font-weight:700; }
.calendar-day:hover:not(:disabled) { background:#edf5e8; }
.calendar-day:disabled { color:#b5c1b6; cursor:default; }
.calendar-day.is-today { box-shadow:inset 0 0 0 1px #8eb668; }
.calendar-day.is-selected { background:var(--green); color:white; }
.calendar-day.has-event i { position:absolute; bottom:5px; width:5px; height:5px; border-radius:50%; background:#78a94c; }
.calendar-day.is-selected i { background:#d7ef5c; }
.calendar-key { display:flex; align-items:center; gap:6px; margin:10px 1px 0; color:#849486; font-size:10px; }
.calendar-key-dot { width:6px; height:6px; border-radius:50%; background:#78a94c; }
.availability-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-top:15px; }
.availability-row button { padding:9px 12px; border:1px solid #bdd5ba; border-radius:99px; background:#eaf4e5; color:var(--green); font-size:11px; font-weight:800; }
.availability-row button:hover { background:#dcefd5; }
.availability-row label { display:flex; align-items:center; gap:5px; color:#617763; font-size:11px; font-weight:700; }
.availability-row input { accent-color:var(--green); }
.availability-note { margin:7px 0 0; color:#859587; font-size:10px; line-height:1.4; }
.event-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:25px 0 12px; }
.event-heading h2 { margin:0; font-size:21px; letter-spacing:-.5px; }
.event-heading button { border:0; background:none; color:var(--green); font-size:11px; font-weight:800; }
.event-list { display:grid; gap:10px; }
.event-card { display:grid; grid-template-columns:49px minmax(0,1fr); align-items:start; gap:11px; min-height:105px; padding:12px; border:1px solid var(--line); border-radius:15px; background:white; box-shadow:0 3px 12px rgba(25,55,32,.04); }
.event-date { display:flex; flex-direction:column; align-items:center; justify-content:center; align-self:stretch; min-height:57px; border-radius:11px; background:#e5f0dd; color:var(--green); }
.event-date span { font-size:9px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; }
.event-date strong { font-family:Outfit,sans-serif; font-size:23px; line-height:1; }
.event-card-main { min-width:0; }
.event-type { color:#5a8a50; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.8px; }
.event-card h3 { margin:3px 0 3px; font-size:14px; line-height:1.2; }
.event-card p { margin:0 0 4px; overflow:hidden; color:#708273; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.event-time { color:#526e58; font-size:10px; font-weight:700; }
.event-fit { display:inline-block; margin-left:7px; padding:3px 6px; border-radius:99px; font-size:9px; font-weight:800; }
.event-fit.available { background:#e8f3e4; color:#3a794a; }
.event-fit.conflict { background:#fff0e7; color:#a15b2a; }
.event-join { display:block; width:max-content; margin-top:9px; color:var(--green); font-size:11px; font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.event-join:hover { color:#438c5c; }
.event-empty { padding:34px 15px; border:1px dashed #cbdcca; border-radius:15px; background:white; text-align:center; }
.event-empty>span { font-size:27px; }.event-empty h3 { margin:9px 0 4px; font-size:17px; }.event-empty p { margin:0 0 10px; color:var(--muted); font-size:12px; }.event-empty a { color:var(--green); font-size:12px; font-weight:800; text-decoration:underline; }
.calendar-source { margin:17px 0 0; color:#819183; font-size:11px; line-height:1.5; }
.calendar-source a { color:var(--green); font-weight:800; text-decoration:underline; }
.welcome { padding:27px 22px 22px; background:#fffefa; }
.eyebrow,.section-kicker { color:#588751; font-size:10px; font-weight:800; letter-spacing:1.6px; }
.welcome h1 { margin:10px 0 9px; font-size:44px; line-height:1.02; letter-spacing:-2.2px; }
.welcome h1 em { color:#438459; font-style:normal; }
.welcome p { max-width:320px; margin:0; color:#647768; font-size:13px; line-height:1.5; }
.discovery { padding:21px 22px 20px; }
.search-label { display:block; margin-bottom:9px; font-family:Outfit,sans-serif; font-size:15px; font-weight:700; }
.search-box { display:flex; align-items:center; gap:9px; height:49px; padding:0 13px; border:1px solid #dbe6da; border-radius:13px; background:white; box-shadow:0 4px 14px rgba(28,62,38,.04); }
.search-box:focus-within { outline:2px solid #90bb67; outline-offset:1px; }
.search-icon { color:#809584; font-size:28px; line-height:1; }
.search-box input { width:100%; min-width:0; border:0; outline:0; color:var(--ink); background:transparent; font-size:13px; }
.search-box input::placeholder { color:#9aa99d; }
.filter-row { display:flex; gap:8px; width:calc(100% + 22px); margin:16px 0 0; padding:0 22px 7px 0; overflow-x:auto; scrollbar-width:none; }
.filter-chip { flex:none; padding:9px 12px; border:1px solid #dfe7dd; border-radius:99px; background:white; color:#51685a; font-size:12px; font-weight:700; white-space:nowrap; }
.filter-chip[hidden] { display:none; }
.filter-chip:hover,.filter-chip.active { border-color:var(--green); background:var(--green); color:white; }
.results-heading { display:flex; align-items:center; justify-content:space-between; gap:6px; margin:21px 0 12px; }
.results-heading h2 { margin:0; font-size:21px; letter-spacing:-.5px; }
#result-count { display:inline-grid; place-items:center; min-width:24px; height:24px; margin-left:4px; padding:0 6px; border-radius:99px; background:#e2efd9; color:#4f7955; font:700 11px 'DM Sans',sans-serif; vertical-align:middle; }
#results-status { color:#859588; font-size:10px; white-space:nowrap; }
.activity-grid { display:grid; gap:11px; }
.activity-card { display:grid; grid-template-columns:91px minmax(0,1fr); min-height:146px; overflow:hidden; border:1px solid #e0e9df; border-radius:16px; background:white; box-shadow:0 4px 14px rgba(25,55,32,.04); }
.card-visual { position:relative; display:grid; place-items:center; min-height:146px; overflow:hidden; }
.card-visual::before,.dialog-visual::before { content:''; position:absolute; width:120px; height:120px; top:-60px; right:-55px; border-radius:50%; background:rgba(255,255,255,.36); }
.card-visual::after { content:''; position:absolute; width:70px; height:70px; bottom:-38px; left:-20px; border-radius:50%; background:rgba(255,255,255,.25); }
.lime { background:#e8f0c7; }.peach { background:#f7e5d5; }.lavender { background:#ece7f3; }.sage { background:#dcebdc; }.sky { background:#dceaf1; }.pink { background:#f4e2e9; }.gold { background:#f5edca; }.blue { background:#e1e9f6; }
.card-emoji { z-index:1; font-size:37px; }
.category-label { display:none; }
.card-body { display:flex; flex-direction:column; min-width:0; padding:11px 12px; }
.card-title-row { display:flex; justify-content:space-between; align-items:start; gap:4px; }
.card-title-row h4 { margin:0; font-size:15px; line-height:1.17; letter-spacing:-.3px; }
.save-button { flex:none; padding:0; border:0; background:none; color:#6e8d6a; font-size:23px; line-height:19px; }
.save-button.is-saved { color:#d96b68; }
.card-body>p { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; margin:6px 0; color:#697b6c; font-size:11px; line-height:1.4; }
.tag-list { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:6px; }
.tag-list span { padding:3px 5px; border-radius:5px; background:#eff4ec; color:#65806a; font-size:9px; font-weight:700; }
.card-bottom-row { display:flex; justify-content:space-between; align-items:center; gap:5px; margin-top:auto; padding-top:6px; border-top:1px solid #edf1ea; color:#748776; font-size:10px; font-weight:700; }
.details-button { display:grid; place-items:center; flex:none; width:25px; height:25px; border:0; border-radius:50%; background:#e8f1e1; color:#3c7a48; font-size:16px; }
.details-button:hover { background:var(--green); color:white; }
.source-note { margin:0; padding:0 22px 24px; color:#829183; font-size:11px; line-height:1.5; }
.source-note a { color:var(--green); font-weight:800; text-decoration:underline; text-underline-offset:2px; }
.empty-state[hidden] { display:none; }
.empty-state { padding:42px 15px; border:1px dashed #cbdcca; border-radius:15px; background:white; text-align:center; }
.empty-state>div { font-size:30px; }.empty-state h3 { margin:9px 0 5px; font-size:18px; }.empty-state p { margin:0 0 11px; color:var(--muted); font-size:12px; }
.text-button { border:0; background:none; color:var(--green); font-size:12px; font-weight:800; }
.load-more { display:block; width:100%; margin-top:14px; padding:12px; border:1px solid #bad1bc; border-radius:12px; background:white; color:var(--green); font-size:12px; font-weight:800; }
.load-more[hidden] { display:none; }
.load-more:hover { background:#edf6e9; }
.app-tabbar { display:grid; flex:none; grid-template-columns:repeat(3,1fr); height:66px; border-top:1px solid var(--line); background:#fffefa; }
.app-tabbar button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; border:0; background:transparent; color:#829287; font-size:10px; font-weight:800; }
.app-tabbar button span { font-size:26px; line-height:1; }
.app-tabbar button[aria-pressed="true"] { color:var(--green); }
dialog { width:min(390px,calc(100% - 28px)); max-height:calc(100dvh - 35px); padding:0 0 22px; border:0; border-radius:23px; color:var(--ink); box-shadow:0 22px 70px rgba(13,40,21,.27); }
dialog::backdrop { background:rgba(15,43,26,.55); }
.dialog-close { position:absolute; z-index:2; top:13px; right:13px; display:grid; place-items:center; width:35px; height:35px; border:0; border-radius:50%; background:white; font-size:24px; }
.dialog-visual { position:relative; display:grid; place-items:center; height:130px; overflow:hidden; }
.dialog-visual span { z-index:1; font-size:61px; }
#dialog-content>.section-kicker,#dialog-content>h2,#dialog-content>p,#dialog-content>h3,.official-link,.dialog-save { margin-left:22px; margin-right:22px; }
#dialog-content>.section-kicker { display:block; margin-top:22px; }
#dialog-content>h2 { margin-top:5px; margin-bottom:8px; font-size:28px; line-height:1.1; }
#dialog-content>p { color:#607163; font-size:13px; line-height:1.55; }
#dialog-content>h3 { margin-top:23px; margin-bottom:7px; font-size:17px; }
.detail-tags { display:flex; flex-wrap:wrap; gap:5px; margin:10px 22px 0; }
.detail-tags span { padding:5px 7px; border-radius:6px; background:#eff4ec; color:#4e7355; font-size:10px; font-weight:700; }
#dialog-content .demo-note { padding:10px 12px; border-radius:9px; background:#f0f4ec; font-size:11px; }
.primary-button,.secondary-button { display:flex; align-items:center; justify-content:center; min-height:45px; border-radius:99px; font-size:13px; font-weight:800; }
.primary-button { border:0; background:var(--green); color:white; }.primary-button:hover { background:#347953; }
.secondary-button { border:1px solid #bad1bc; background:white; color:var(--green); }.secondary-button:hover { background:#eef5e9; }
.official-link { margin-top:8px; }.dialog-save { width:calc(100% - 44px); margin-top:9px; }
.availability-dialog-body { padding:25px 22px 22px; }
.availability-dialog-body h2 { margin:7px 0 7px; font-size:25px; }
.availability-dialog-body>p { color:#647768; font-size:12px; line-height:1.5; }
.availability-dialog-body form { display:grid; gap:11px; margin:16px 0 22px; }
.availability-dialog-body form label { display:grid; gap:5px; color:#4f6b56; font-size:11px; font-weight:800; }
.availability-dialog-body input { width:100%; min-width:0; padding:10px; border:1px solid #d9e5d8; border-radius:9px; background:white; color:var(--ink); font-size:13px; }
.busy-time-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.availability-dialog-body .primary-button { width:100%; }
.busy-error { min-height:0; margin:0; color:#b04b35; font-size:11px; }
.availability-dialog-body h3 { margin:0 0 9px; font-size:16px; }
.busy-item { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 0; border-top:1px solid var(--line); }
.busy-item strong,.busy-item span { display:block; }
.busy-item strong { font-size:12px; }
.busy-item span { margin-top:3px; color:#748876; font-size:10px; }
.busy-item button { border:0; background:none; color:#a66657; font-size:22px; }
.no-busy-times { color:#849486; font-size:11px; }
@media (min-width:501px) {
  .survey-screen { padding:38px 32px 34px; }
  .survey-screen h1 { font-size:49px; }
  .survey-lead { font-size:15px; }
  .survey-options label span { font-size:14px; }
  .app-header { height:72px; padding:0 32px; }
  .brand { font-size:27px; }
  .brand-mark { width:36px; height:36px; }
  .campus-pill { font-size:12px; }
  .calendar-intro { padding:34px 32px 27px; }
  .calendar-intro h1 { font-size:clamp(44px,4.6dvh,62px); }
  .calendar-intro p { font-size:15px; }
  .calendar-body { padding:24px 32px 30px; }
  .calendar-panel { padding:19px 20px 14px; }
  .calendar-toolbar h2 { font-size:24px; }
  .calendar-day { max-height:55px; font-size:15px; }
  .calendar-weekdays { font-size:12px; }
  .event-heading h2 { font-size:25px; }
  .event-card { grid-template-columns:58px minmax(0,1fr); min-height:105px; padding:15px; }
  .event-date strong { font-size:27px; }
  .event-card h3 { font-size:18px; }
  .event-card p,.event-time { font-size:12px; }
  .event-type { font-size:10px; }
  .calendar-source { font-size:12px; }
  .welcome { padding:34px 32px 27px; }
  .welcome h1 { font-size:clamp(46px,5dvh,65px); }
  .welcome p { max-width:480px; font-size:15px; }
  .discovery { padding:24px 32px 24px; }
  .search-label { font-size:17px; }
  .search-box { height:56px; }
  .search-box input { font-size:15px; }
  .filter-row { width:calc(100% + 32px); padding-right:32px; }
  .filter-chip { font-size:13px; padding:10px 15px; }
  .results-heading { margin-top:27px; }
  .results-heading h2 { font-size:26px; }
  .activity-grid { gap:13px; }
  .activity-card { grid-template-columns:115px minmax(0,1fr); min-height:155px; }
  .card-visual { min-height:155px; }
  .card-emoji { font-size:44px; }
  .card-body { padding:15px 18px; }
  .card-title-row h4 { font-size:19px; }
  .card-body>p { font-size:13px; }
  .tag-list span { font-size:10px; }
  .card-bottom-row { font-size:11px; }
  .source-note { padding:0 32px 30px; font-size:12px; }
  .app-tabbar { height:78px; }
  .app-tabbar button { font-size:12px; }
  .app-tabbar button span { font-size:29px; }
}
@media (max-width:500px) {
  body { display:block; min-height:100dvh; padding:0; background:var(--bg); }
  .app-shell { width:100%; height:100dvh; border:0; border-radius:0; box-shadow:none; }
  .app-header { height:calc(62px + env(safe-area-inset-top)); padding-top:env(safe-area-inset-top); }
  .app-tabbar { height:calc(66px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); }
}
@media (max-width:360px) { .welcome h1 { font-size:40px; }.activity-card { grid-template-columns:77px minmax(0,1fr); }.card-body { padding:10px; }.card-title-row h4 { font-size:14px; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } }