:root{
    --ink: #181818;
    --ink-soft: #5C584E;
    --paper: #FAF6EE;
    --paper-raised: #FFFFFF;
    --line: #E7DFCF;
    --gold: #E0A83F;
    --coral: #EF7C8E;
    --teal: #4C8577;
    --lilac: #B6ADEF;
    --coral-tint: #FCE3E8;
    --teal-tint: #E1EDE8;
    --lilac-tint: #EBE8FB;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background-color:var(--paper);
    background-image:
      radial-gradient(circle at 1px 1px, rgba(31,45,38,0.045) 1px, transparent 0);
    background-size:22px 22px;
    color:var(--ink);
    font-family:'Inter',sans-serif;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    margin:0;
    letter-spacing:-0.02em;
  }
  .mono{
    font-family:'JetBrains Mono',monospace;
    letter-spacing:0.02em;
  }
  .hand{
    font-family:'Caveat',cursive;
    font-weight:700;
  }
  a{color:inherit;}

  /* ---------- Header ---------- */
  header{
    position:relative;
    padding:3rem 1.5rem 1.8rem;
    max-width:960px;
    margin:0 auto;
    border-bottom:1px solid var(--line);
    overflow:visible;
  }
  .tape{
    position:absolute;
    top:0.9rem;
    left:1.5rem;
    width:96px;
    height:26px;
    background:linear-gradient(100deg, var(--lilac) 0%, var(--coral) 100%);
    opacity:0.9;
    transform:rotate(-3deg);
    box-shadow:0 2px 5px rgba(24,24,24,0.15);
  }
  .tape::before, .tape::after{
    content:"";
    position:absolute;
    top:0; bottom:0;
    width:8px;
    background:repeating-linear-gradient(-45deg, rgba(255,255,255,0.4) 0 3px, transparent 3px 6px);
  }
  .tape::before{ left:0; }
  .tape::after{ right:0; }
  .sparkle{ position:absolute; }
  .sparkle-1{ top:1rem; right:11rem; width:20px; opacity:0.8; transform:rotate(8deg); }
  .sparkle-2{ top:8.4rem; left:2px; width:14px; opacity:0.7; transform:rotate(-14deg); }
  .stamp{
    position:absolute;
    top:3.6rem;
    right:1.5rem;
    width:96px; height:96px;
    animation:spin-slow 22s linear infinite;
  }
  .stamp text{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    fill:var(--ink);
  }
  @keyframes spin-slow{ to{ transform:rotate(360deg); } }
  .eyebrow{
    font-family:'JetBrains Mono',monospace;
    font-size:0.72rem;
    text-transform:uppercase;
    letter-spacing:0.12em;
    color:var(--ink-soft);
    display:flex;
    align-items:center;
    gap:0.5rem;
    margin-top:1.5rem;
  }
  .eyebrow::before{
    content:"";
    width:6px;height:6px;
    border-radius:50%;
    background:var(--coral);
    display:inline-block;
  }
  header h1{
    font-size:clamp(2.3rem, 5.5vw, 3.4rem);
    margin-top:0.5rem;
    color:var(--ink);
  }
  header h1 .dot{ color:var(--coral); }
  .squiggle-wrap{ position:relative; display:inline-block; }
  .squiggle{ position:absolute; left:0; bottom:-2px; width:100%; height:14px; overflow:visible; }
  header p{
    color:var(--ink-soft);
    max-width:46ch;
    margin-top:0.9rem;
    font-size:1.02rem;
  }
  .handnote{
    font-family:'Caveat',cursive;
    font-weight:700;
    font-size:1.2rem;
    color:var(--coral);
    display:inline-block;
    margin-top:0.7rem;
    transform:rotate(-1.4deg);
  }
  .account-bar{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:0.7rem;
    margin-bottom:0.6rem;
  }
  .account-bar .greeting{
    font-family:'JetBrains Mono',monospace;
    font-size:0.76rem;
    color:var(--ink-soft);
  }
  .account-bar .greeting strong{ color:var(--ink); }
  button.link-btn{
    background:none;
    border:none;
    font-family:'Inter',sans-serif;
    font-size:0.84rem;
    font-weight:600;
    color:var(--ink);
    text-decoration:underline;
    cursor:pointer;
    padding:0;
  }

  /* ---------- Marquee ribbon ---------- */
  .marquee-wrap{
    width:100vw;
    position:relative;
    left:50%;
    transform:translateX(-50%) rotate(-1.1deg);
    overflow:hidden;
    background:var(--ink);
    padding:0.6rem 0;
    margin:0 0 -0.4rem;
    box-shadow:0 8px 20px rgba(24,24,24,0.14);
  }
  .marquee-track{
    display:flex;
    width:max-content;
    animation:marquee 24s linear infinite;
  }
  .marquee-track span{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:0.92rem;
    letter-spacing:0.05em;
    color:var(--paper);
    white-space:nowrap;
  }
  @keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

  /* ---------- Search bar ---------- */
  .search-wrap{
    max-width:520px;
    margin:1.3rem auto 0;
    padding:0 1.5rem;
    position:relative;
    display:flex;
    align-items:center;
  }
  .search-icon{
    position:absolute;
    left:2.2rem;
    width:17px; height:17px;
    color:var(--ink-soft);
    pointer-events:none;
  }
  #global-search{
    width:100%;
    font-family:'Inter',sans-serif;
    font-size:0.88rem;
    color:var(--ink);
    background:var(--paper-raised);
    border:1px solid var(--line);
    border-radius:999px;
    padding:0.65rem 1rem 0.65rem 2.5rem;
    outline:none;
    transition:border-color 0.15s ease, box-shadow 0.15s ease;
  }
  #global-search::placeholder{ color:var(--ink-soft); }
  #global-search:focus{ border-color:var(--lilac); box-shadow:0 0 0 3px var(--lilac-tint); }

  /* ---------- Circle tabs ---------- */
  .circle-tabs{
    max-width:960px;
    margin:0 auto;
    display:flex;
    justify-content:center;
    gap:clamp(1.2rem, 5vw, 2.6rem);
    padding:1.6rem 1.5rem;
    border-bottom:1px solid var(--line);
  }
  .circle-tab-wrap{ position:relative; }
  .circle-tab-wrap:nth-child(1){ --tilt:-4deg; }
  .circle-tab-wrap:nth-child(2){ --tilt:3deg; }
  .circle-tab-wrap:nth-child(3){ --tilt:-3deg; }
  .circle-tab-wrap:nth-child(4){ --tilt:4deg; }
  .circle-tab-wrap:nth-child(5){ --tilt:-3deg; }
  .circle-tab{
    background:none;
    border:none;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.4rem;
    color:var(--ink-soft);
    font-family:'Inter',sans-serif;
  }
  .circle-tab:focus-visible{ outline:none; }
  .circle-tab:focus-visible .circle-icon{ outline:2px solid var(--gold); outline-offset:2px; }
  .circle-icon{
    position:relative;
    width:54px; height:54px;
    border-radius:50%;
    border:2px dashed var(--line);
    background:var(--paper-raised);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--ink-soft);
    box-shadow:0 1px 3px rgba(24,24,24,0.07);
    transform:rotate(var(--tilt,0deg));
    transition:background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  }
  .circle-icon::before{
    content:"";
    position:absolute;
    top:-8px; left:50%;
    transform:translateX(-50%);
    width:6px; height:6px;
    border-radius:50%;
    background:var(--line);
    box-shadow:0 1px 2px rgba(24,24,24,0.3);
    transition:background 0.18s ease;
  }
  .circle-tab[data-tab="events"] .circle-icon::before{ background:var(--coral); }
  .circle-tab[data-tab="opps"] .circle-icon::before{ background:var(--teal); }
  .circle-tab[data-tab="clubs"] .circle-icon::before{ background:var(--ink); }
  .circle-tab[data-tab="foryou"] .circle-icon::before{ background:var(--gold); }
  .circle-tab[data-tab="calendar"] .circle-icon::before{ background:var(--lilac); }
  .circle-icon svg{ width:24px; height:24px; }
  .circle-tab:hover .circle-icon{ transform:translateY(-3px) rotate(calc(var(--tilt,0deg) * -1)); border-style:solid; border-color:var(--ink-soft); box-shadow:0 6px 14px rgba(24,24,24,0.14); }
  .circle-label{
    font-size:0.78rem;
    font-weight:600;
  }
  .circle-tab[data-tab="events"].active .circle-icon,
  .circle-tab[data-tab="events"]:hover .circle-icon{ border-color:var(--coral); color:var(--coral); }
  .circle-tab[data-tab="events"].active .circle-icon{ background:var(--coral); color:#fff; border-style:solid; }
  .circle-tab[data-tab="opps"].active .circle-icon,
  .circle-tab[data-tab="opps"]:hover .circle-icon{ border-color:var(--teal); color:var(--teal); }
  .circle-tab[data-tab="opps"].active .circle-icon{ background:var(--teal); color:#fff; border-style:solid; }
  .circle-tab[data-tab="clubs"].active .circle-icon,
  .circle-tab[data-tab="clubs"]:hover .circle-icon{ border-color:var(--ink); color:var(--ink); }
  .circle-tab[data-tab="clubs"].active .circle-icon{ background:var(--ink); color:var(--paper); border-style:solid; }
  .circle-tab[data-tab="foryou"].active .circle-icon,
  .circle-tab[data-tab="foryou"]:hover .circle-icon{ border-color:var(--gold); color:var(--gold); }
  .circle-tab[data-tab="foryou"].active .circle-icon{ background:var(--gold); color:#fff; border-style:solid; }
  .circle-tab[data-tab="calendar"].active .circle-icon,
  .circle-tab[data-tab="calendar"]:hover .circle-icon{ border-color:var(--lilac); color:#7A6FE0; }
  .circle-tab[data-tab="calendar"].active .circle-icon{ background:var(--lilac); color:#fff; border-style:solid; }
  .circle-tab.active .circle-label{ color:var(--ink); }

  .tab-dropdown{
    position:absolute;
    top:calc(100% + 10px);
    left:50%;
    transform:translate(-50%, -6px) scale(0.96);
    background:var(--paper-raised);
    border:1px solid var(--line);
    border-radius:6px;
    box-shadow:0 8px 24px rgba(31,45,38,0.14);
    padding:0.4rem;
    min-width:180px;
    display:flex;
    flex-direction:column;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.16s ease, transform 0.16s ease;
    z-index:15;
  }
  .tab-dropdown.open{
    opacity:1;
    transform:translate(-50%, 0) scale(1);
    pointer-events:auto;
  }
  .tab-dropdown button{
    background:none;
    border:none;
    text-align:left;
    font-family:'Inter',sans-serif;
    font-size:0.86rem;
    padding:0.55rem 0.7rem;
    border-radius:4px;
    cursor:pointer;
    color:var(--ink);
  }
  .tab-dropdown button:hover{ background:var(--paper); }
  .tab-dropdown-divider{
    font-family:'JetBrains Mono',monospace;
    font-size:0.64rem;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:var(--ink-soft);
    padding:0.5rem 0.9rem 0.2rem;
    border-top:1px dashed var(--line);
    margin-top:0.2rem;
  }
  .filter-note{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    font-family:'JetBrains Mono',monospace;
    font-size:0.74rem;
    color:var(--ink-soft);
    margin-top:0.6rem;
  }
  .filter-note button{
    background:none; border:none;
    color:var(--coral);
    text-decoration:underline;
    cursor:pointer;
    font-family:'JetBrains Mono',monospace;
    font-size:0.74rem;
    padding:0;
  }

  /* ---------- Detail modal content ---------- */
  .detail-eyebrow{
    font-family:'JetBrains Mono',monospace;
    font-size:0.68rem;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--coral);
    margin-bottom:0.5rem;
  }
  #detail-content h3{
    font-size:1.4rem;
    margin-bottom:0.9rem;
  }
  .detail-meta{
    display:flex;
    flex-direction:column;
    gap:0.45rem;
    margin-bottom:1rem;
    padding-bottom:1rem;
    border-bottom:1px solid var(--line);
  }
  .detail-meta-row{
    display:flex;
    gap:0.5rem;
    font-size:0.88rem;
  }
  .detail-meta-row .k{
    font-family:'JetBrains Mono',monospace;
    font-size:0.68rem;
    text-transform:uppercase;
    letter-spacing:0.05em;
    color:var(--ink-soft);
    min-width:88px;
    padding-top:0.1rem;
  }
  .detail-meta-row .v{ color:var(--ink); }
  .detail-desc{
    font-size:0.95rem;
    line-height:1.6;
    color:var(--ink);
  }
  .rsvp-box{
    display:flex;
    align-items:center;
    gap:0.75rem;
    margin-top:1.2rem;
    padding-top:1.1rem;
    border-top:1px dashed var(--line);
  }
  .rsvp-box .rsvp-active{ background:var(--teal); color:#fff; border-color:var(--teal); }
  .rsvp-count{
    font-family:'JetBrains Mono',monospace;
    font-size:0.76rem;
    color:var(--ink-soft);
  }
  .also-happening{
    margin-top:1rem;
    padding-top:1rem;
    border-top:1px dashed var(--line);
  }
  .also-happening-title{
    font-family:'JetBrains Mono',monospace;
    font-size:0.72rem;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:var(--ink-soft);
    margin-bottom:0.6rem;
  }
  .also-item{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:0.1rem;
    width:100%;
    text-align:left;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:4px;
    padding:0.55rem 0.7rem;
    margin-bottom:0.45rem;
    cursor:pointer;
    font-family:'Inter',sans-serif;
    transition:border-color 0.15s ease, background 0.15s ease;
  }
  .also-item:hover{ border-color:var(--lilac); background:var(--lilac-tint); }
  .also-item-title{ font-weight:600; font-size:0.86rem; color:var(--ink); }
  .also-item-meta{ font-size:0.74rem; color:var(--ink-soft); }

  .recap-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:0.4rem;
    margin:0.6rem 0;
  }
  .recap-grid img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:6px;
    border:1px solid var(--line);
    background:var(--paper);
  }

  /* ---------- Calendar hub ---------- */
  .cal-wrap{ display:flex; gap:2rem; flex-wrap:wrap; align-items:flex-start; }
  .cal-panel{ flex:1 1 340px; }
  .cal-day-panel{ flex:1 1 280px; border-left:1px dashed var(--line); padding-left:1.6rem; }
  @media (max-width:760px){ .cal-day-panel{ border-left:none; padding-left:0; border-top:1px dashed var(--line); padding-top:1.4rem; } }
  .cal-nav{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
  .cal-nav-btn{
    background:var(--paper-raised);
    border:1px solid var(--line);
    border-radius:50%;
    width:34px; height:34px;
    cursor:pointer;
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:0.95rem;
    color:var(--ink);
    transition:border-color 0.15s ease, transform 0.15s ease;
  }
  .cal-nav-btn:hover{ border-color:var(--lilac); transform:translateY(-1px); }
  .cal-month-label{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.15rem; }
  .cal-today-btn{
    background:none; border:none;
    font-family:'JetBrains Mono',monospace;
    font-size:0.7rem;
    text-transform:uppercase;
    letter-spacing:0.05em;
    color:var(--teal);
    text-decoration:underline;
    cursor:pointer;
    margin-bottom:0.8rem;
  }
  .cal-weekdays{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    text-align:center;
    font-family:'JetBrains Mono',monospace;
    font-size:0.66rem;
    letter-spacing:0.04em;
    color:var(--ink-soft);
    margin-bottom:0.5rem;
  }
  .cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
  .cal-cell{
    aspect-ratio:1;
    border:1.5px solid var(--line);
    border-radius:7px;
    background:var(--paper-raised);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    cursor:pointer;
    font-family:'Inter',sans-serif;
    font-size:0.82rem;
    color:var(--ink);
    transition:border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
  }
  .cal-cell:hover{ border-color:var(--lilac); transform:translateY(-1px); }
  .cal-cell.outside{ color:var(--ink-soft); opacity:0.38; }
  .cal-cell.today{ border-color:var(--gold); border-width:2px; font-weight:700; }
  .cal-cell.selected{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
  .cal-dot{ width:5px; height:5px; border-radius:50%; background:var(--coral); }
  .cal-cell.selected .cal-dot{ background:var(--lilac); }
  .cal-day-title{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:1.1rem;
    margin-bottom:1rem;
  }
  .cal-empty{
    border:1px dashed var(--line);
    border-radius:4px;
    padding:1.6rem 1rem;
    text-align:center;
    color:var(--ink-soft);
    font-size:0.86rem;
  }

  /* ---------- Club reference cards ---------- */
  .club-card h3{ font-size:1.05rem; }
  .club-card .card-meta{ margin-bottom:0.3rem; }

  main{
    max-width:960px;
    margin:0 auto;
    padding:2rem 1.5rem 4rem;
  }
  section{ display:none; }
  section.active{ display:block; }

  .section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:1rem;
    margin-bottom:1.4rem;
    flex-wrap:wrap;
  }
  .section-head h2{
    font-size:1.7rem;
    position:relative;
    padding-bottom:0.5rem;
  }
  .section-head h2::after{
    content:"";
    position:absolute;
    left:0; bottom:0;
    width:34px; height:3px;
    border-radius:2px;
    background:var(--coral);
  }
  #opps .section-head h2::after{ background:var(--teal); }
  #clubs .section-head h2::after{ background:var(--ink); }
  #foryou .section-head h2::after{ background:var(--gold); }
  #calendar .section-head h2::after{ background:var(--lilac); }
  .section-head p{
    color:var(--ink-soft);
    font-size:0.92rem;
    max-width:46ch;
    margin:0.35rem 0 0;
  }
  button.primary{
    font-family:'Inter',sans-serif;
    font-weight:600;
    font-size:0.88rem;
    background:var(--ink);
    color:var(--paper);
    border:none;
    padding:0.7rem 1.25rem;
    border-radius:999px;
    cursor:pointer;
    white-space:nowrap;
    box-shadow:0 2px 6px rgba(31,45,38,0.18);
    transition:transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  }
  button.primary:hover{ transform:translateY(-1px); box-shadow:0 6px 14px rgba(31,45,38,0.22); }
  button.primary:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

  /* ---------- Event cards (pinboard) ---------- */
  .grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(250px,1fr));
    gap:1.1rem;
  }
  .date-group-header{
    grid-column:1 / -1;
    font-size:0.78rem;
    font-weight:700;
    letter-spacing:0.03em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin:0.4rem 0 -0.3rem;
    padding-top:0.6rem;
    border-top:1px solid var(--line);
  }
  .date-group-header:first-child{ border-top:none; padding-top:0; margin-top:0; }
  .category-group-header{
    grid-column:1 / -1;
    display:flex;
    align-items:baseline;
    gap:0.5rem;
    font-family:'Space Grotesk',sans-serif;
    font-size:1.25rem;
    font-weight:700;
    color:var(--ink);
    margin:1.1rem 0 -0.2rem;
    padding-top:1rem;
    border-top:1px solid var(--line);
  }
  .category-group-header:first-child{ border-top:none; padding-top:0; margin-top:0; }
  .category-count{
    font-family:inherit;
    font-size:0.76rem;
    font-weight:600;
    color:var(--ink-soft);
    text-transform:none;
    letter-spacing:normal;
  }
  .mini-schedule-wrap{
    grid-column:1 / -1;
    margin-top:-0.4rem;
  }
  .schedule-toggle-btn{ font-size:0.8rem; padding:0.4rem 0.8rem; }
  .mini-schedule{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(220px,1fr));
    gap:0.5rem;
    margin-top:0.6rem;
  }
  .card{
    background:var(--paper-raised);
    border:1px solid var(--line);
    border-radius:3px;
    padding:1.35rem 1.3rem 1.15rem;
    position:relative;
    box-shadow:0 1px 0 rgba(0,0,0,0.02);
    cursor:pointer;
    transform:rotate(var(--tilt,0deg));
    transition:box-shadow 0.18s ease, transform 0.18s ease;
  }
  .grid .card:nth-child(3n){ --tilt:-0.6deg; }
  .grid .card:nth-child(3n+1){ --tilt:0.5deg; }
  .grid .card:nth-child(3n+2){ --tilt:-0.3deg; }
  .card:hover{
    box-shadow:0 10px 22px rgba(24,24,24,0.11);
    transform:translateY(-3px) rotate(0deg);
  }
  .card.gold::before{ background:var(--gold) !important; }
  .card-kind{
    font-family:'JetBrains Mono',monospace;
    font-size:0.62rem;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--gold);
    margin-bottom:0.3rem;
  }
  .field-error{
    font-size:0.78rem;
    color:var(--coral);
    margin-top:0.5rem;
    min-height:1em;
  }
  .auth-switch{
    font-size:0.82rem;
    color:var(--ink-soft);
    margin-top:1rem;
    text-align:center;
  }
  .auth-switch button{
    background:none;
    border:none;
    color:var(--teal);
    font-weight:600;
    text-decoration:underline;
    cursor:pointer;
    font-family:'Inter',sans-serif;
    font-size:0.82rem;
    padding:0;
  }
  .card.event::before,
  .card.opp::before,
  .card.club-card::before{
    content:"";
    position:absolute;
    top:-6px; left:1.3rem;
    width:11px; height:11px;
    border-radius:50%;
    background:var(--coral);
    box-shadow:0 1px 2px rgba(0,0,0,0.25);
  }
  .card.opp::before{ background:var(--teal); }
  .card.club-card::before{ background:var(--ink); }
  .card-club{
    font-family:'JetBrains Mono',monospace;
    font-size:0.68rem;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--coral);
    margin-bottom:0.4rem;
  }
  .card.opp .card-club{ color:var(--teal); }
  .card h3{
    font-size:1.12rem;
    margin-bottom:0.3rem;
  }
  .card-meta{
    font-size:0.82rem;
    color:var(--ink-soft);
    margin-bottom:0.55rem;
    display:flex;
    flex-wrap:wrap;
    gap:0.5rem 0.9rem;
  }
  .card-desc{
    font-size:0.9rem;
    color:var(--ink);
  }
  .card-footer{
    margin-top:0.9rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .tag{
    font-family:'JetBrains Mono',monospace;
    font-size:0.66rem;
    text-transform:uppercase;
    letter-spacing:0.06em;
    padding:0.28rem 0.6rem;
    border-radius:999px;
    background:var(--coral-tint);
    color:var(--coral);
  }
  .card.opp .tag{ background:var(--teal-tint); color:var(--teal); }
  .tag-going{ background:var(--teal-tint); color:var(--teal); }
  .remove-btn{
    background:none;
    border:none;
    color:var(--ink-soft);
    font-size:0.76rem;
    cursor:pointer;
    text-decoration:underline;
    font-family:'Inter',sans-serif;
    padding:0;
  }
  .remove-btn:hover{ color:var(--coral); }
  .edit-btn{
    background:none;
    border:none;
    color:var(--ink-soft);
    font-size:0.76rem;
    cursor:pointer;
    text-decoration:underline;
    font-family:'Inter',sans-serif;
    padding:0;
    margin-right:0.7rem;
  }
  .edit-btn:hover{ color:var(--teal); }
  .card-actions{ display:flex; align-items:center; }

  /* ---------- Card images ---------- */
  .card-img{
    margin:-1.35rem -1.3rem 0.9rem;
    height:140px;
    background-size:cover;
    background-position:center;
    background-color:var(--line);
    border-radius:3px 3px 0 0;
  }
  #detail-content .card-img{
    margin:-0.2rem 0 1rem;
    height:180px;
    border-radius:6px;
  }

  .empty{
    border:1px dashed var(--line);
    border-radius:3px;
    padding:2.2rem 1.5rem;
    text-align:center;
    color:var(--ink-soft);
    font-size:0.92rem;
  }

  /* ---------- Modal / form ---------- */
  .overlay{
    display:none;
    position:fixed; inset:0;
    background:rgba(31,45,38,0.45);
    align-items:center;
    justify-content:center;
    padding:1.5rem;
    z-index:10;
  }
  .overlay.open{ display:flex; }
  .modal{
    background:var(--paper-raised);
    border-radius:8px;
    border-top:3px solid var(--gold);
    max-width:440px;
    width:100%;
    padding:1.85rem;
    max-height:90vh;
    overflow-y:auto;
    box-shadow:0 24px 60px rgba(31,45,38,0.28);
  }
  .modal h3{ font-size:1.3rem; margin-bottom:1.1rem; }
  .field{ margin-bottom:0.9rem; }
  .field label{
    display:block;
    font-size:0.78rem;
    font-family:'JetBrains Mono',monospace;
    text-transform:uppercase;
    letter-spacing:0.05em;
    color:var(--ink-soft);
    margin-bottom:0.3rem;
  }
  .field input, .field textarea, .field select{
    width:100%;
    font-family:'Inter',sans-serif;
    font-size:0.92rem;
    padding:0.55rem 0.65rem;
    border:1px solid var(--line);
    border-radius:3px;
    background:var(--paper);
    color:var(--ink);
  }
  .field input:focus, .field textarea:focus, .field select:focus{
    outline:2px solid var(--gold);
    outline-offset:1px;
  }
  .field textarea{ resize:vertical; min-height:70px; }
  .field-row{ display:flex; gap:0.7rem; }
  .field-row .field{ flex:1; margin-bottom:0.9rem; }
  .modal-actions{
    display:flex;
    justify-content:flex-end;
    gap:0.6rem;
    margin-top:1.2rem;
  }
  button.ghost{
    background:none;
    border:2px solid var(--ink);
    padding:0.58rem 1.1rem;
    border-radius:999px;
    font-family:'Inter',sans-serif;
    font-weight:700;
    font-size:0.86rem;
    cursor:pointer;
    color:var(--ink);
    transition:background 0.15s ease, transform 0.15s ease;
  }
  button.ghost:hover{ background:var(--ink); color:var(--paper); transform:translateY(-1px); }
  .status{
    font-family:'JetBrains Mono',monospace;
    font-size:0.72rem;
    color:var(--ink-soft);
    margin-top:0.8rem;
    min-height:1em;
  }

  /* ---------- Side panel ---------- */
  .icon-btn{
    position:relative;
    background:var(--paper-raised);
    border:1px solid var(--line);
    border-radius:50%;
    width:36px;
    height:36px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--ink-soft);
    transition:border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
  }
  .icon-btn svg{ width:18px; height:18px; }
  .icon-btn:hover{ border-color:var(--ink-soft); color:var(--ink); transform:translateY(-1px); }
  .icon-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
  .badge{
    position:absolute;
    top:-4px; right:-4px;
    min-width:16px;
    height:16px;
    padding:0 3px;
    border-radius:999px;
    background:var(--coral);
    color:#fff;
    font-family:'JetBrains Mono',monospace;
    font-size:0.6rem;
    line-height:16px;
    text-align:center;
    box-shadow:0 0 0 2px var(--paper-raised);
  }
  /* ---------- Left icon rail ---------- */
  body{ padding-left:64px; }
  .icon-rail{
    position:fixed;
    top:0; left:0;
    height:100vh;
    width:64px;
    background:var(--paper-raised);
    border-right:1px solid var(--line);
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:1rem 0;
    gap:0.35rem;
    z-index:25;
  }
  .rail-mark{
    width:34px; height:34px;
    border-radius:9px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:0.7rem;
    box-shadow:0 3px 8px rgba(31,45,38,0.22);
  }
  .rail-mark img{
    width:100%; height:100%;
    object-fit:cover;
  }
  .rail-btn{
    position:relative;
    width:44px; height:44px;
    border-radius:11px;
    background:none;
    border:none;
    cursor:pointer;
    color:var(--ink-soft);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background 0.15s ease, color 0.15s ease;
  }
  .rail-btn svg{ width:20px; height:20px; }
  .rail-btn:hover{ background:var(--paper); color:var(--ink); }
  .rail-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
  .rail-btn.active{ background:var(--ink); color:var(--paper); }
  .rail-label{
    position:absolute;
    left:calc(100% + 10px);
    top:50%;
    transform:translateY(-50%);
    background:var(--ink);
    color:var(--paper);
    font-family:'Inter',sans-serif;
    font-size:0.74rem;
    font-weight:600;
    padding:0.35rem 0.6rem;
    border-radius:5px;
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.12s ease;
  }
  .rail-btn:hover .rail-label{ opacity:1; }
  .rail-btn .badge{ top:2px; right:2px; }
  .side-backdrop{
    display:none;
    position:fixed; inset:0;
    background:rgba(31,45,38,0.35);
    z-index:19;
  }
  .side-backdrop.open{ display:block; }
  .side-panel{
    position:fixed;
    top:0; right:0;
    height:100vh;
    width:340px;
    max-width:88vw;
    background:var(--paper-raised);
    box-shadow:-6px 0 24px rgba(0,0,0,0.14);
    transform:translateX(100%);
    transition:transform 0.28s ease;
    z-index:20;
    padding:1.5rem 1.5rem 2.5rem;
    overflow-y:auto;
  }
  .side-panel.open{ transform:translateX(0); }
  .panel-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .panel-close{
    background:none;
    border:none;
    font-size:1.3rem;
    line-height:1;
    cursor:pointer;
    color:var(--ink-soft);
    padding:0.2rem;
  }
  .panel-eyebrow{
    font-family:'JetBrains Mono',monospace;
    font-size:0.68rem;
    text-transform:uppercase;
    letter-spacing:0.1em;
    color:var(--ink-soft);
  }
  .panel-section{
    margin-top:1.6rem;
    padding-top:1.4rem;
    border-top:1px solid var(--line);
  }
  .panel-section:first-of-type{ margin-top:1.2rem; }
  .panel-section h3{ font-size:1.05rem; margin-bottom:0.3rem; }
  .panel-section .hint{
    font-size:0.82rem;
    color:var(--ink-soft);
    margin-bottom:0.8rem;
  }
  .account-block-signed{
    display:flex;
    align-items:center;
    gap:0.7rem;
  }
  .avatar{
    width:40px; height:40px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--gold), var(--coral));
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Fraunces',serif;
    font-weight:600;
    flex-shrink:0;
    box-shadow:0 3px 8px rgba(31,45,38,0.22);
  }
  .account-block-signed .who strong{ display:block; font-size:0.95rem; }
  .account-block-signed .who button{
    background:none; border:none; padding:0;
    font-size:0.78rem;
    color:var(--coral);
    text-decoration:underline;
    cursor:pointer;
    font-family:'Inter',sans-serif;
  }
  .panel-section button.primary{ width:100%; margin-bottom:0.6rem; }
  .panel-section button.ghost{ width:100%; }
  .pref-chip{
    display:inline-block;
    padding:0.42rem 0.85rem;
    border:1px solid var(--line);
    border-radius:999px;
    font-size:0.82rem;
    cursor:pointer;
    margin:0 0.4rem 0.5rem 0;
    background:var(--paper);
    color:var(--ink-soft);
    font-family:'Inter',sans-serif;
  }
  .pref-chip.selected{
    background:var(--ink);
    color:var(--paper);
    border-color:var(--ink);
  }
  .pref-chip:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
  .setting-row{
    display:flex;
    align-items:flex-start;
    gap:0.6rem;
    font-size:0.86rem;
    margin-top:0.4rem;
  }
  .setting-row input{ margin-top:0.2rem; }
  .setting-row label{ color:var(--ink); cursor:pointer; }
  .setting-row .hint{ margin:0.15rem 0 0; }

  /* ---------- Moderation panel ---------- */
  .mod-account-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:0.75rem;
    padding:0.7rem 0;
    border-bottom:1px solid var(--line);
    font-size:0.88rem;
  }
  .mod-account-row:last-child{ border-bottom:none; }
  .mod-account-row .hint{ margin:0.1rem 0 0; font-size:0.76rem; }
  .mod-role-btn{
    font-family:'Inter',sans-serif;
    font-weight:600;
    font-size:0.76rem;
    background:none;
    border:1px solid var(--line);
    color:var(--ink);
    padding:0.4rem 0.75rem;
    border-radius:999px;
    cursor:pointer;
    white-space:nowrap;
    transition:border-color 0.15s ease, color 0.15s ease;
  }
  .mod-role-btn:hover{ border-color:var(--teal); color:var(--teal); }
  .mod-role-btn:disabled{ opacity:0.45; cursor:not-allowed; }

  /* ---------- Inbox ---------- */
  .notif-item{
    position:relative;
    padding:0.75rem 0.6rem 0.75rem 1.1rem;
    border-radius:4px;
    margin-bottom:0.4rem;
    cursor:pointer;
    transition:background 0.15s ease;
  }
  .notif-item:hover{ background:var(--paper); }
  .notif-item.unread::before{
    content:"";
    position:absolute;
    top:1rem; left:0.15rem;
    width:7px; height:7px;
    border-radius:50%;
    background:var(--coral);
  }
  .notif-item .notif-title{
    font-size:0.9rem;
    font-weight:600;
    color:var(--ink);
    margin-bottom:0.15rem;
  }
  .notif-item .notif-sub{
    font-size:0.8rem;
    color:var(--ink-soft);
  }
  .notif-item .notif-time{
    font-family:'JetBrains Mono',monospace;
    font-size:0.68rem;
    color:var(--ink-soft);
    margin-top:0.3rem;
    display:block;
  }
  .notif-pref-tag{
    display:inline-block;
    margin-top:0.4rem;
    font-family:'JetBrains Mono',monospace;
    font-size:0.64rem;
    text-transform:uppercase;
    letter-spacing:0.05em;
    padding:0.15rem 0.45rem;
    border-radius:999px;
    background:var(--lilac-tint);
    color:#5B52B8;
  }
  .inbox-empty{
    border:1px dashed var(--line);
    border-radius:4px;
    padding:1.6rem 1rem;
    text-align:center;
    color:var(--ink-soft);
    font-size:0.86rem;
  }
  .inbox-actions{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:0.9rem;
  }
  .inbox-actions button{
    background:none;
    border:none;
    font-family:'Inter',sans-serif;
    font-size:0.78rem;
    font-weight:600;
    color:var(--teal);
    text-decoration:underline;
    cursor:pointer;
    padding:0;
  }

  /* ---------- Opportunities note ---------- */
  .source-note{
    border-left:3px solid var(--gold);
    background:var(--paper-raised);
    padding:0.9rem 1.1rem;
    font-size:0.85rem;
    color:var(--ink-soft);
    margin-bottom:1.4rem;
    border-radius:0 2px 2px 0;
  }

  footer{
    max-width:960px;
    margin:0 auto;
    padding:1.5rem;
    border-top:1px solid var(--line);
    color:var(--ink-soft);
    font-size:0.78rem;
  }

  @media (max-width:600px){
    body{ padding-left:52px; }
    .icon-rail{ width:52px; padding:0.75rem 0; }
    .rail-mark{ width:28px; height:28px; font-size:0.6rem; }
    .rail-btn{ width:38px; height:38px; }
    .rail-btn svg{ width:18px; height:18px; }
    .rail-label{ display:none; }
    .circle-tabs{ gap:1.1rem; padding:1.2rem 1rem; }
    .circle-icon{ width:46px; height:46px; }
    .circle-icon svg{ width:20px; height:20px; }
    .circle-label{ font-size:0.7rem; }
    .stamp{ width:64px; height:64px; top:1.4rem; right:1rem; }
    .sparkle-1{ display:none; }
    .sparkle-2{ top:auto; bottom:0.5rem; }
    .tape{ top:0.6rem; width:74px; height:20px; }
  }
  @media (prefers-reduced-motion: reduce){
    *{ transition:none !important; animation:none !important; }
  }
/* ---------- Auth modal enhancements ---------- */
.auth-modal{ position:relative; }
.auth-subtitle{
  font-size:0.9rem;
  color:var(--ink-soft);
  margin:-0.6rem 0 1.2rem;
}
.auth-methods{
  display:flex;
  gap:0.4rem;
  margin-bottom:1.2rem;
  border-bottom:1px solid var(--line);
  padding-bottom:0.2rem;
}
.auth-method-btn{
  flex:1;
  background:none;
  border:none;
  font-family:'Inter',sans-serif;
  font-size:0.84rem;
  font-weight:600;
  color:var(--ink-soft);
  padding:0.5rem 0.2rem;
  cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-0.25rem;
  transition:color 0.15s ease, border-color 0.15s ease;
}
.auth-method-btn.active{
  color:var(--ink);
  border-bottom-color:var(--gold);
}
.auth-pane{ display:none; }
.auth-pane.active{ display:block; }
.google-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.6rem;
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:999px;
  padding:0.7rem 1rem;
  font-family:'Inter',sans-serif;
  font-size:0.92rem;
  font-weight:600;
  color:var(--ink);
  cursor:pointer;
  transition:background 0.15s ease, box-shadow 0.15s ease;
}
.google-btn:hover{
  background:var(--paper);
  box-shadow:0 4px 12px rgba(24,24,24,0.08);
}
.google-btn svg{
  width:20px;
  height:20px;
}
.auth-hint{
  font-size:0.78rem;
  color:var(--ink-soft);
  margin-top:0.9rem;
  line-height:1.5;
}
.auth-close-x{
  position:absolute;
  top:1.2rem;
  right:1.5rem;
  background:none;
  border:none;
  font-size:1.4rem;
  color:var(--ink-soft);
  cursor:pointer;
  line-height:1;
}
.auth-banner{
  background:var(--lilac-tint);
  color:#5B52B8;
  font-size:0.85rem;
  padding:0.65rem 0.9rem;
  border-radius:6px;
  margin-bottom:1rem;
  display:none;
}