/* Community Board — ported verbatim from docs/design-concepts/4-community-board.html.
   App-shell-only additions are appended at the end, clearly marked. */

  :root{
    --bg: #F7F5FB;
    --card: #FFFFFF;
    --ink: #2E2B3D;
    --ink-soft: #726C87;
    --violet: #7C6FE0;
    --violet-deep: #5C4FC4;
    --violet-soft: #EDEAFB;
    --rule: #E7E3F3;

    --peach-bg: #FFD9C2;  --peach-ink: #8A4B2A;
    --mint-bg: #C9F0DA;   --mint-ink: #2A6B48;
    --sky-bg: #CFE4FB;    --sky-ink: #2A5E8A;
    --lavender-bg: #E3DAFB; --lavender-ink: #5B4B94;
    --amber-bg: #FBE7A8;  --amber-ink: #7A5B0A;

    --sans: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --r-lg: 24px;
    --r-md: 18px;
    --r-sm: 12px;
    --shadow-card: 0 1px 0 rgba(46,43,61,.04), 0 10px 24px -12px rgba(46,43,61,.28);
    --shadow-pin: 0 2px 0 rgba(46,43,61,.05), 0 14px 22px -14px rgba(46,43,61,.45);
  }

  *{ box-sizing:border-box; }
  /* several components set an explicit display, which would otherwise beat the UA [hidden] rule */
  [hidden]{ display:none !important; }
  html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--sans);
    line-height:1.5;
    min-height:100vh;
    /* faint board texture, drawn with gradients — no external images */
    background-image:
      radial-gradient(circle at 20% 12%, rgba(124,111,224,.07), transparent 42%),
      radial-gradient(circle at 82% 4%, rgba(255,190,150,.10), transparent 38%);
    background-attachment:fixed;
  }

  :focus-visible{
    outline:3px solid var(--violet);
    outline-offset:3px;
    border-radius:6px;
  }

  ::selection{ background:var(--violet); color:#fff; }

  button{ font:inherit; color:inherit; }

  /* ---------- top bar ---------- */

  .topbar{
    position:sticky;
    top:0;
    z-index:40;
    background:rgba(247,245,251,.92);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border-bottom:1px solid var(--rule);
    padding:12px clamp(16px, 4vw, 40px);
    display:flex;
    align-items:center;
    gap:clamp(12px, 3vw, 28px);
    flex-wrap:wrap;
  }

  .brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:800;
    font-size:15px;
    letter-spacing:-.01em;
    white-space:nowrap;
  }
  .brand__mark{
    width:34px; height:34px;
    border-radius:12px;
    background:var(--violet);
    color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-weight:800;
    font-size:17px;
    box-shadow:0 6px 14px -6px rgba(124,111,224,.9);
  }

  .navpills{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }

  .pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    border:2px solid transparent;
    background:var(--card);
    color:var(--ink);
    padding:9px 16px 9px 13px;
    border-radius:999px;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 1px 0 rgba(46,43,61,.04);
    transition:transform .14s ease, background-color .14s ease, color .14s ease, box-shadow .14s ease;
  }
  .pill svg{ width:19px; height:19px; flex:none; }
  .pill:hover{ transform:translateY(-2px); box-shadow:0 8px 16px -10px rgba(46,43,61,.5); }
  .pill[aria-current="true"]{
    background:var(--violet);
    color:#fff;
    box-shadow:0 8px 18px -8px rgba(124,111,224,.95);
  }

  .switcher{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:4px;
    font-size:12px;
    color:var(--ink-soft);
  }
  .switcher a, .switcher span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:24px; height:24px;
    border-radius:8px;
    text-decoration:none;
    color:var(--ink-soft);
    font-weight:700;
    transition:background-color .14s ease, color .14s ease;
  }
  .switcher a:hover{ background:var(--violet-soft); color:var(--violet-deep); }
  .switcher .is-current{
    background:var(--violet);
    color:#fff;
    cursor:default;
  }
  .switcher em{ font-style:normal; opacity:.4; }

  .pin-toggle{
    display:inline-flex;
    align-items:center;
    gap:7px;
    border:none;
    background:var(--violet-soft);
    color:var(--violet-deep);
    font-weight:800;
    font-size:13px;
    padding:9px 15px 9px 12px;
    border-radius:999px;
    cursor:pointer;
    transition:background-color .14s ease, color .14s ease, transform .14s ease;
  }
  .pin-toggle svg{ width:16px; height:16px; flex:none; }
  .pin-toggle:hover{ transform:translateY(-1px); }
  .pin-toggle[aria-pressed="false"]{
    background:var(--card);
    color:var(--ink-soft);
    box-shadow:0 1px 0 rgba(46,43,61,.04);
  }
  .pin-toggle[aria-pressed="false"] svg{ transform:rotate(28deg); }

  /* ---------- page ---------- */

  .page{
    max-width:1180px;
    margin:0 auto;
    padding:clamp(24px, 4vw, 40px) clamp(16px, 4vw, 40px) 96px;
  }

  .pagehead{
    font-size:clamp(30px, 5vw, 44px);
    font-weight:800;
    letter-spacing:-.025em;
    margin:0 0 6px;
    line-height:1.1;
  }
  .pagesub{
    margin:0 0 34px;
    color:var(--ink-soft);
    font-size:16px;
  }
  .pagesub b{ color:var(--ink); font-weight:700; }

  .sectionhead{
    display:flex;
    align-items:center;
    gap:14px;
    margin:0 0 18px;
    flex-wrap:wrap;
  }
  .sectionhead h2{
    font-size:20px;
    font-weight:800;
    letter-spacing:-.015em;
    margin:0;
  }
  .sectionhead__rule{
    flex:1;
    height:2px;
    border-radius:2px;
    background:var(--rule);
    min-width:20px;
  }
  .count-badge{
    background:var(--violet-soft);
    color:var(--violet-deep);
    font-size:12.5px;
    font-weight:800;
    padding:4px 11px;
    border-radius:999px;
    white-space:nowrap;
  }

  section{ margin-bottom:48px; scroll-margin-top:96px; }

  /* ---------- two-column layout: active page + a persistent board sidebar ---------- */

  .layout{
    display:grid;
    grid-template-columns:1fr 300px;
    gap:36px;
    align-items:start;
    transition:grid-template-columns .16s ease;
  }
  .layout--unpinned{ grid-template-columns:1fr; }
  .layout--unpinned .layout__board{ display:none; }
  .layout--on-tasks{ grid-template-columns:1fr; }
  .layout--on-tasks .layout__board{ display:none; }
  .layout__main{ min-width:0; }

  .unpin-btn{
    flex:none;
    width:26px; height:26px;
    border:none;
    background:none;
    color:var(--ink-soft);
    font-size:16px;
    line-height:1;
    border-radius:8px;
    cursor:pointer;
    transition:background-color .14s ease, color .14s ease;
  }
  .unpin-btn:hover{ background:var(--violet-soft); color:var(--violet-deep); }

  .layout__board{
    position:sticky;
    top:96px;
  }
  .sectionhead--mini{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 14px;
  }
  .sectionhead--mini h2{
    font-size:14px;
    font-weight:800;
    letter-spacing:-.01em;
    margin:0;
    color:var(--ink-soft);
    text-transform:uppercase;
    letter-spacing:.05em;
  }
  #show-all{ margin-bottom:14px; font-size:12.5px; padding:7px 13px; }

  /* the board reads as a subtle companion here, not the main event —
     same tilted "funky box" notices, just smaller and quieter */
  .layout__board .board{ display:flex; flex-direction:column; gap:16px; }
  .layout__board .notice{
    padding:16px 15px 13px;
    min-height:0;
    box-shadow:0 1px 0 rgba(46,43,61,.05), 0 8px 16px -10px rgba(46,43,61,.35);
  }
  .layout__board .notice__tag{ font-size:9.5px; padding:3px 8px; margin-bottom:7px; }
  .layout__board .notice__head{ font-size:14.5px; margin-bottom:4px; }
  .layout__board .notice__detail{ display:none; }
  .layout__board .notice__foot{ padding-top:10px; }
  .layout__board .notice__unit{ font-size:11px; }
  .layout__board .chip{ padding:7px 12px; font-size:12px; }
  .layout__board .pin{ width:14px; height:14px; top:-7px; margin-left:-7px; }
  .layout__board .empty{ padding:28px 16px; }
  .layout__board .empty__mark{ width:42px; height:42px; }
  .layout__board .empty__mark svg{ width:20px; height:20px; }
  .layout__board .empty b{ font-size:15px; }
  .layout__board .empty p{ font-size:12.5px; }

  @media (max-width: 980px){
    .layout{ grid-template-columns:1fr; }
    .layout__board{ position:static; }
    .layout__board .board{ flex-direction:row; flex-wrap:wrap; }
    .layout__board .notice{ flex:1 1 220px; }
  }

  /* ---------- building toggle (People page) ---------- */

  .seg{
    display:inline-flex;
    gap:6px;
    background:var(--card);
    padding:5px;
    border-radius:999px;
    box-shadow:var(--shadow-card);
    margin-bottom:20px;
  }
  .seg__btn{
    border:none;
    background:none;
    color:var(--ink-soft);
    font-weight:800;
    font-size:13.5px;
    padding:8px 18px;
    border-radius:999px;
    cursor:pointer;
    transition:background-color .14s ease, color .14s ease;
  }
  .seg__btn.is-active{ background:var(--violet); color:#fff; }

  /* ---------- flash highlight for nav jumps ---------- */

  .flash{ animation:flash .9s ease; }
  @keyframes flash{
    0%{ box-shadow:0 0 0 0 rgba(124,111,224,.55); }
    100%{ box-shadow:0 0 0 22px rgba(124,111,224,0); }
  }

  /* ---------- building hero cards ---------- */

  .buildings{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:22px;
  }

  .bcard{
    background:var(--card);
    border-radius:var(--r-lg);
    border:3px solid transparent;
    box-shadow:var(--shadow-card);
    padding:8px;
    display:flex;
    flex-direction:column;
    opacity:0;
    animation:pop .16s ease forwards;
    transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease;
  }
  .bcard:nth-of-type(1){ animation-delay:0s; }
  .bcard:nth-of-type(2){ animation-delay:.02s; }
  .bcard:hover{ transform:translateY(-3px); box-shadow:0 18px 32px -18px rgba(46,43,61,.5); }
  .bcard.is-active{
    border-color:var(--violet);
    box-shadow:0 0 0 6px var(--violet-soft), 0 18px 32px -18px rgba(46,43,61,.5);
  }

  .bcard__pick{
    background:none;
    border:none;
    border-radius:var(--r-md);
    padding:20px 20px 16px;
    text-align:left;
    cursor:pointer;
    display:block;
    width:100%;
  }
  .bcard__pick:hover{ background:rgba(124,111,224,.05); }

  .bcard__top{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
    margin-bottom:2px;
  }
  .bcard__name{
    font-size:23px;
    font-weight:800;
    letter-spacing:-.02em;
    display:block;
  }
  .bcard__state{
    font-size:11.5px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--violet-deep);
    background:var(--violet-soft);
    padding:4px 10px;
    border-radius:999px;
    opacity:0;
    transition:opacity .16s ease;
  }
  .bcard.is-active .bcard__state{ opacity:1; }

  .bcard__addr{
    display:block;
    color:var(--ink-soft);
    font-size:14px;
    margin-bottom:18px;
  }

  /* the friendly building illustration */
  .facade{
    display:block;
    width:fit-content;
    max-width:100%;
    margin:0 auto;
    background:var(--violet-soft);
    border-radius:20px 20px 10px 10px;
    padding:18px 18px 0;
    position:relative;
  }
  .facade::before{ /* roof cap */
    content:"";
    position:absolute;
    left:24%; right:24%;
    top:-10px;
    height:18px;
    border-radius:12px 12px 0 0;
    background:var(--violet-soft);
  }
  .windows{
    display:grid;
    gap:9px;
    justify-content:center;
  }
  .windows--a{ grid-template-columns:repeat(5, minmax(0, 34px)); }
  .windows--b{ grid-template-columns:repeat(4, minmax(0, 34px)); }
  .win{
    aspect-ratio:1 / 1;
    border-radius:8px;
    border:2.5px solid var(--violet);
    background:var(--violet);
    position:relative;
  }
  .win::after{ /* window cross-bar, for charm */
    content:"";
    position:absolute;
    left:12%; right:12%;
    top:50%;
    height:2px;
    background:rgba(255,255,255,.55);
    transform:translateY(-1px);
  }
  .win--vacant{
    background:var(--card);
    border-color:#C6BEE8;
    border-style:dashed;
  }
  .win--vacant::after{ background:#DBD5F0; }
  .win--pending{
    background:#fff;
    border-color:var(--violet);
    border-style:dashed;
    animation:winpulse 1.9s ease-in-out infinite;
  }
  .win--pending::after{ background:var(--violet); opacity:.45; }

  .door{
    display:block;
    width:38px;
    height:24px;
    margin:14px auto 0;
    border-radius:9px 9px 0 0;
    background:var(--violet-deep);
    position:relative;
  }
  .door::after{
    content:"";
    position:absolute;
    right:7px; top:10px;
    width:4px; height:4px;
    border-radius:50%;
    background:rgba(255,255,255,.75);
  }

  .bcard__count{
    display:block;
    margin-top:16px;
    font-size:26px;
    font-weight:800;
    letter-spacing:-.02em;
  }
  .bcard__count small{
    display:block;
    font-size:14px;
    font-weight:600;
    color:var(--ink-soft);
    letter-spacing:0;
    margin-top:1px;
  }

  .bcard__foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:0 20px 16px;
    flex-wrap:wrap;
  }
  .legend{
    display:flex;
    gap:12px;
    font-size:11.5px;
    color:var(--ink-soft);
    font-weight:600;
    flex-wrap:wrap;
    margin:0;
  }
  .legend i{
    display:inline-block;
    width:10px; height:10px;
    border-radius:3px;
    background:var(--violet);
    border:2px solid var(--violet);
    margin-right:5px;
    vertical-align:-1px;
  }
  .legend i.vacant{ background:var(--card); border-color:#C6BEE8; border-style:dashed; }
  .legend i.pending{ background:#fff; border-style:dashed; }

  .linkbtn{
    background:var(--violet-soft);
    border:none;
    color:var(--violet-deep);
    font-weight:800;
    font-size:13.5px;
    padding:9px 15px;
    border-radius:999px;
    cursor:pointer;
    white-space:nowrap;
    transition:background-color .14s ease, transform .14s ease;
  }
  .linkbtn:hover{ background:#DDD7F7; transform:translateY(-1px); }

  /* ---------- parking ---------- */

  .parking-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:16px;
  }
  .spot{
    background:var(--card);
    border-radius:var(--r-md);
    box-shadow:var(--shadow-card);
    padding:18px 18px 16px;
    display:flex;
    flex-direction:column;
    gap:10px;
    border:2px dashed transparent;
  }
  .spot--available{ border-color:#C6BEE8; box-shadow:none; }
  .spot__top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
  .spot__code{ font-size:19px; font-weight:800; letter-spacing:-.01em; }
  .spot__building{ font-size:12px; color:var(--ink-soft); font-weight:700; }
  .spot__who{ font-size:14.5px; font-weight:700; margin:0; }
  .spot__state{
    align-self:flex-start;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.05em;
    padding:4px 10px;
    border-radius:999px;
    background:var(--violet-soft);
    color:var(--violet-deep);
  }
  .spot--reserved .spot__state{ background:var(--sky-bg); color:var(--sky-ink); }
  .spot--available .spot__state{ background:var(--bg); color:var(--ink-soft); }
  .spot .linkbtn{ align-self:flex-start; margin-top:2px; }

  /* ---------- calendar ---------- */

  .calendar-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:14px;
  }
  .event{
    display:flex;
    gap:14px;
    align-items:flex-start;
    background:var(--card);
    border-radius:var(--r-md);
    box-shadow:var(--shadow-card);
    padding:16px 18px;
  }
  .event__date{
    flex:none;
    width:52px;
    text-align:center;
    background:var(--violet-soft);
    border-radius:14px;
    padding:8px 0;
  }
  .event__day{ display:block; font-size:19px; font-weight:800; color:var(--violet-deep); line-height:1; }
  .event__month{ display:block; font-size:10px; font-weight:800; text-transform:uppercase; color:var(--violet-deep); opacity:.75; margin-top:3px; letter-spacing:.04em; }
  .event__body h3{ margin:0 0 3px; font-size:15px; font-weight:800; letter-spacing:-.01em; line-height:1.3; }
  .event__time{ display:block; font-size:12.5px; color:var(--ink-soft); font-weight:700; margin-bottom:2px; }
  .event__where{ margin:0; font-size:12.5px; color:var(--ink-soft); }

  /* ---------- documents ---------- */

  .doc-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
    gap:16px;
  }
  .doccard{
    background:var(--card);
    border-radius:var(--r-md);
    box-shadow:var(--shadow-card);
    padding:18px 20px;
    border-left:4px solid var(--violet-soft);
  }
  .doccard--warn{ border-left-color:var(--peach-ink); }
  .doccard h3{ margin:0 0 6px; font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); }
  .doccard__value{ display:block; font-size:24px; font-weight:800; letter-spacing:-.02em; margin-bottom:6px; }
  .doccard--warn .doccard__value{ color:var(--peach-ink); }
  .doccard p{ margin:0; font-size:13.5px; color:var(--ink-soft); line-height:1.4; }

  /* ---------- notice board ---------- */

  .board{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(238px, 1fr));
    gap:24px 22px;
    align-items:start;
  }

  .notice{
    --rot:-1.5deg;
    --tint:var(--peach-bg);
    --tint-ink:var(--peach-ink);
    background:var(--tint);
    color:var(--tint-ink);
    border-radius:var(--r-md);
    padding:26px 20px 18px;
    position:relative;
    box-shadow:var(--shadow-pin);
    transform:rotate(var(--rot));
    opacity:0;
    animation:pop .16s ease forwards;
    display:flex;
    flex-direction:column;
    min-height:212px;
    transition:transform .16s ease, box-shadow .16s ease;
  }
  .notice:nth-child(4n+1){ --rot:-1.5deg; margin-top:0; }
  .notice:nth-child(4n+2){ --rot:1.2deg; margin-top:16px; }
  .notice:nth-child(4n+3){ --rot:-0.9deg; margin-top:6px; }
  .notice:nth-child(4n+4){ --rot:1.7deg; margin-top:22px; }

  .notice:nth-child(1){ animation-delay:.02s; }
  .notice:nth-child(2){ animation-delay:.04s; }
  .notice:nth-child(3){ animation-delay:.06s; }
  .notice:nth-child(4){ animation-delay:.07s; }

  .notice--peach{ --tint:var(--peach-bg); --tint-ink:var(--peach-ink); }
  .notice--mint{ --tint:var(--mint-bg); --tint-ink:var(--mint-ink); }
  .notice--sky{ --tint:var(--sky-bg); --tint-ink:var(--sky-ink); }
  .notice--lavender{ --tint:var(--lavender-bg); --tint-ink:var(--lavender-ink); }
  .notice--amber{ --tint:var(--amber-bg); --tint-ink:var(--amber-ink); }
  .notice--info{ min-height:0; }

  .notice:hover{
    transform:rotate(calc(var(--rot) * .3)) translateY(-4px);
    box-shadow:0 4px 0 rgba(46,43,61,.05), 0 22px 30px -16px rgba(46,43,61,.5);
  }
  .notice:hover .pin{ animation:wiggle .5s ease; }

  .pin{
    position:absolute;
    top:-9px;
    left:50%;
    margin-left:-9px;
    width:18px; height:18px;
    border-radius:50%;
    background:var(--tint-ink);
    box-shadow:
      inset 0 -3px 0 rgba(0,0,0,.18),
      inset 0 3px 0 rgba(255,255,255,.35),
      0 4px 8px -2px rgba(46,43,61,.55);
  }

  .notice__tag{
    display:inline-block;
    align-self:flex-start;
    font-size:10.5px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.09em;
    background:rgba(255,255,255,.55);
    padding:4px 9px;
    border-radius:999px;
    margin-bottom:11px;
  }

  .notice__head{
    font-size:18.5px;
    font-weight:800;
    letter-spacing:-.015em;
    line-height:1.2;
    margin:0 0 7px;
  }
  .notice__detail{
    margin:0;
    font-size:14px;
    line-height:1.45;
    opacity:.88;
  }
  .notice__foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:auto;
    padding-top:16px;
    flex-wrap:wrap;
  }
  .notice__unit{
    font-size:12.5px;
    font-weight:800;
    letter-spacing:.03em;
    opacity:.75;
  }

  .chip{
    background:var(--tint-ink);
    color:var(--tint);
    border:none;
    border-radius:999px;
    padding:9px 16px;
    font-size:13.5px;
    font-weight:800;
    cursor:pointer;
    white-space:nowrap;
    transition:transform .14s ease, filter .14s ease;
  }
  .chip:hover{ transform:translateY(-2px); filter:brightness(1.15); }
  .chip:active{ transform:translateY(0); }
  .chip:focus-visible{ outline-color:var(--tint-ink); }

  .notice.is-resolving{
    pointer-events:none;
    animation:unpin .38s cubic-bezier(.36,.06,.6,1) forwards;
  }
  .notice.is-resolving .pin{ animation:pinpop .17s ease forwards; }

  /* ---------- money card ---------- */

  .money{
    grid-column:1 / -1;
    background:var(--card);
    border-radius:var(--r-lg);
    box-shadow:var(--shadow-card);
    padding:26px clamp(20px, 3vw, 32px);
    margin-top:14px;
    opacity:0;
    animation:pop .16s ease forwards;
    animation-delay:.07s;
  }
  .money__top{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:14px;
  }
  .money h3{
    margin:0;
    font-size:19px;
    font-weight:800;
    letter-spacing:-.015em;
  }
  .money h3 small{
    display:block;
    font-size:13.5px;
    font-weight:600;
    color:var(--ink-soft);
    letter-spacing:0;
    margin-top:2px;
  }
  .money__figure{
    font-size:clamp(24px, 3.4vw, 32px);
    font-weight:800;
    letter-spacing:-.025em;
    white-space:nowrap;
    margin:0;
  }
  .money__figure span{ color:var(--ink-soft); font-weight:700; font-size:.62em; }

  .bar{
    height:22px;
    border-radius:999px;
    background:var(--violet-soft);
    overflow:hidden;
    margin-bottom:14px;
  }
  .bar__fill{
    height:100%;
    width:83%;
    border-radius:999px;
    background:linear-gradient(90deg, var(--violet), #9A8FEA);
    box-shadow:0 2px 8px -2px rgba(124,111,224,.8);
  }
  .money__foot{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
  }
  .badge-out{
    background:var(--peach-bg);
    color:var(--peach-ink);
    font-weight:800;
    font-size:13.5px;
    padding:7px 14px;
    border-radius:999px;
  }
  .money__note{ color:var(--ink-soft); font-size:13.5px; margin:0; }

  /* ---------- empty state ---------- */

  .empty{
    grid-column:1 / -1;
    text-align:center;
    padding:52px 24px;
    border:3px dashed var(--rule);
    border-radius:var(--r-lg);
    color:var(--ink-soft);
  }
  .empty__mark{
    width:56px; height:56px;
    margin:0 auto 14px;
    border-radius:50%;
    background:var(--violet-soft);
    display:flex; align-items:center; justify-content:center;
  }
  .empty__mark svg{ width:28px; height:28px; color:var(--violet); }
  .empty b{
    display:block;
    color:var(--ink);
    font-size:19px;
    font-weight:800;
    letter-spacing:-.015em;
    margin-bottom:4px;
  }
  .empty p{ margin:0; font-size:14.5px; }

  /* ---------- residents overlay ---------- */

  .overlay{
    position:fixed;
    inset:0;
    z-index:80;
    background:rgba(46,43,61,.42);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding:clamp(12px, 4vw, 40px);
  }
  .overlay[hidden]{ display:none; }
  @media (min-width: 700px){ .overlay{ align-items:center; } }

  .sheet{
    background:var(--card);
    border-radius:var(--r-lg);
    width:min(760px, 100%);
    max-height:min(86vh, 780px);
    display:flex;
    flex-direction:column;
    box-shadow:0 30px 60px -20px rgba(46,43,61,.6);
    transform-origin:center bottom;
    animation:flipup .22s cubic-bezier(.2,.7,.3,1) both;
    overflow:hidden;
  }

  .sheet__head{
    padding:22px clamp(18px, 3vw, 28px) 16px;
    border-bottom:2px solid var(--rule);
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
  }
  .sheet__head h2{
    margin:0;
    font-size:23px;
    font-weight:800;
    letter-spacing:-.02em;
  }
  .sheet__head p{
    margin:2px 0 0;
    color:var(--ink-soft);
    font-size:14px;
  }
  .closebtn{
    background:var(--violet-soft);
    color:var(--violet-deep);
    border:none;
    width:40px; height:40px;
    border-radius:14px;
    font-size:20px;
    font-weight:800;
    line-height:1;
    cursor:pointer;
    flex:none;
    transition:background-color .14s ease, transform .14s ease;
  }
  .closebtn:hover{ background:#DDD7F7; transform:rotate(90deg); }

  .sheet__body{
    padding:18px clamp(18px, 3vw, 28px) 8px;
    overflow-y:auto;
  }
  .units{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
    gap:10px;
    list-style:none;
    margin:0;
    padding:0;
  }
  .unit{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    border-radius:var(--r-sm);
    background:var(--bg);
    border:2px solid transparent;
  }
  .unit__no{
    font-weight:800;
    font-size:12.5px;
    background:var(--card);
    border:2px solid var(--rule);
    border-radius:9px;
    padding:5px 8px;
    white-space:nowrap;
  }
  .unit__name{ font-weight:700; font-size:14.5px; display:block; }
  .unit__note{ display:block; font-size:12.5px; color:var(--ink-soft); margin-top:1px; }
  .unit__status{
    margin-left:auto;
    font-size:11.5px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.05em;
    padding:5px 10px;
    border-radius:999px;
    background:var(--violet-soft);
    color:var(--violet-deep);
    white-space:nowrap;
  }
  .unit__chevron{ opacity:.4; font-weight:800; }

  button.unit{
    cursor:pointer;
    text-align:left;
    font:inherit;
    color:inherit;
    width:100%;
    transition:border-color .14s ease, box-shadow .14s ease, transform .14s ease;
  }
  button.unit:hover, button.unit:focus-visible{
    border-color:var(--violet);
    box-shadow:0 8px 18px -12px rgba(46,43,61,.5);
    transform:translateY(-1px);
  }
  button.unit:hover .unit__chevron, button.unit:focus-visible .unit__chevron{ opacity:1; }
  .unit--vacant{ border-style:dashed; border-color:#C6BEE8; background:var(--card); }
  .unit--vacant .unit__status{ background:var(--card); border:2px solid var(--rule); color:var(--ink-soft); }
  .unit--pending{ background:var(--sky-bg); }
  .unit--pending .unit__name{ color:var(--sky-ink); }
  .unit--pending .unit__note{ color:var(--sky-ink); opacity:.85; }
  .unit--pending .unit__status{ background:#fff; color:var(--sky-ink); }
  .unit--flag-peach{ background:var(--peach-bg); }
  .unit--flag-peach .unit__name{ color:var(--peach-ink); }
  .unit--flag-peach .unit__note{ color:var(--peach-ink); opacity:.85; }
  .unit--flag-peach .unit__status{ background:#fff; color:var(--peach-ink); }
  .unit--flag-mint{ background:var(--mint-bg); }
  .unit--flag-mint .unit__name{ color:var(--mint-ink); }
  .unit--flag-mint .unit__note{ color:var(--mint-ink); opacity:.85; }
  .unit--flag-mint .unit__status{ background:#fff; color:var(--mint-ink); }
  .unit--flag-lavender{ background:var(--lavender-bg); }
  .unit--flag-lavender .unit__name{ color:var(--lavender-ink); }
  .unit--flag-lavender .unit__note{ color:var(--lavender-ink); opacity:.85; }
  .unit--flag-lavender .unit__status{ background:#fff; color:var(--lavender-ink); }

  /* ---------- resident / flat detail ---------- */

  .profile{ padding:2px 0 10px; }

  .profile__top{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin-bottom:14px;
  }
  .profile__avatar{
    width:52px; height:52px;
    border-radius:16px;
    display:flex; align-items:center; justify-content:center;
    font-weight:800;
    font-size:16.5px;
    color:var(--violet-deep);
    background:var(--violet-soft);
    flex:none;
  }
  .profile__avatar--vacant{
    background:var(--card);
    border:2px dashed #C6BEE8;
    color:#C6BEE8;
  }
  .profile__avatar--pending{
    background:#fff;
    border:2px dashed var(--sky-ink);
    color:var(--sky-ink);
  }
  .profile__avatar--peach{ background:var(--peach-bg); color:var(--peach-ink); }
  .profile__avatar--mint{ background:var(--mint-bg); color:var(--mint-ink); }
  .profile__avatar--lavender{ background:var(--lavender-bg); color:var(--lavender-ink); }

  .profile__name{ margin:0; font-size:19.5px; font-weight:800; letter-spacing:-.015em; }
  .profile__meta{ margin:3px 0 0; font-size:13px; color:var(--ink-soft); font-weight:700; }

  .profile__status{
    margin-left:auto;
    flex:none;
    font-size:11.5px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.05em;
    padding:5px 10px;
    border-radius:999px;
    background:var(--violet-soft);
    color:var(--violet-deep);
    white-space:nowrap;
  }
  .profile__status--vacant{ background:var(--card); border:2px solid var(--rule); color:var(--ink-soft); }
  .profile__status--pending{ background:var(--sky-bg); color:var(--sky-ink); }

  .profile__since{ margin:0 0 16px; font-size:14.5px; color:var(--ink-soft); }

  .profile__note{
    padding:12px 14px;
    border-radius:var(--r-sm);
    font-size:14px;
    font-weight:700;
    margin-bottom:18px;
  }
  .profile__note--peach{ background:var(--peach-bg); color:var(--peach-ink); }
  .profile__note--mint{ background:var(--mint-bg); color:var(--mint-ink); }
  .profile__note--sky{ background:var(--sky-bg); color:var(--sky-ink); }
  .profile__note--lavender{ background:var(--lavender-bg); color:var(--lavender-ink); }

  .profile__section{ margin-bottom:18px; }
  .profile__section:last-child{ margin-bottom:0; }
  .profile__section h4{
    margin:0 0 9px;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.07em;
    color:var(--ink-soft);
  }
  .profile__facts{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
    gap:10px;
  }
  .fact{
    background:var(--bg);
    border-radius:var(--r-sm);
    padding:11px 14px;
  }
  .fact__label{
    display:block;
    font-size:10.5px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--ink-soft);
    margin-bottom:3px;
  }
  .fact__value{ display:block; font-size:14px; font-weight:700; line-height:1.35; }

  /* ---------- animation ---------- */

  @keyframes pop{
    from{ opacity:0; transform:translateY(8px) rotate(var(--rot, 0deg)) scale(.985); }
    to{ opacity:1; transform:translateY(0) rotate(var(--rot, 0deg)) scale(1); }
  }
  @keyframes unpin{
    0%{ transform:rotate(var(--rot)) translateY(0) scale(1); opacity:1; }
    22%{ transform:rotate(calc(var(--rot) - 4deg)) translateY(-12px) scale(1.03); opacity:1; }
    100%{ transform:rotate(calc(var(--rot) + 14deg)) translateY(130px) scale(.93); opacity:0; }
  }
  @keyframes pinpop{
    to{ transform:translateY(-16px) scale(.3); opacity:0; }
  }
  @keyframes wiggle{
    0%,100%{ transform:rotate(0deg); }
    30%{ transform:rotate(-16deg); }
    65%{ transform:rotate(12deg); }
  }
  @keyframes winpulse{
    0%,100%{ opacity:1; }
    50%{ opacity:.4; }
  }
  @keyframes flipup{
    from{ opacity:0; transform:translateY(22px) scale(.98); }
    to{ opacity:1; transform:translateY(0) scale(1); }
  }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .bcard, .notice, .money{ animation:none; opacity:1; }
    .notice.is-resolving{ animation:none; opacity:0; }
    .notice.is-resolving .pin{ animation:none; opacity:0; }
    .notice:hover .pin{ animation:none; }
    .win--pending{ animation:none; opacity:.6; }
    .sheet{ animation:none; }
    .flash{ animation:none; }
    .pill:hover, .notice:hover, .chip:hover, .linkbtn:hover, .bcard:hover, .pin-toggle:hover{ transform:none; }
    .notice:hover{ transform:rotate(var(--rot)); }
    .closebtn:hover{ transform:none; }
    *{ transition-duration:.01ms !important; }
  }

  /* ---------- responsive ---------- */

  @media (max-width: 820px){
    .buildings{ grid-template-columns:1fr; }
    .brand span{ display:none; }
  }
  @media (max-width: 600px){
    .board{ grid-template-columns:1fr; gap:26px; }
    .notice{ margin-top:0 !important; min-height:0; }
    .pagesub{ margin-bottom:26px; }
    .pill{ padding:9px 14px 9px 11px; font-size:13.5px; }
  }
  @media (max-width: 420px){
    .pill span{ display:none; }
    .pill{ padding:10px 12px; }
    .pin-toggle span{ display:none; }
    .pin-toggle{ padding:10px 12px; }
  }

  /* ==================================================================
     Additions for the Blazor app shell.

     Everything above this line is the design mock's stylesheet, ported
     verbatim from docs/design-concepts/4-community-board.html. Below are
     only the rules the running app needs and a static HTML page did not:
     the boot/authorizing screen, Blazor's error bar, nav pills rendered
     as <NavLink> anchors rather than <button>s, and the signed-in user
     chip that replaces the mock's concept-switcher links.

     Keyframe names stay distinct from CSS timing-function keywords
     (never "ease-in", "ease-out", …): in the `animation:` shorthand the
     browser reads such a name as the timing function, the animation
     silently never runs, and anything starting at opacity:0 stays
     invisible. Hence `cb-spin` rather than `spin`/`ease-in`.
     ================================================================== */

  /* ---------- boot / authorizing screen ---------- */

  .bootscreen{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:16px;
    color:var(--ink-soft, #726C87);
    font-family:var(--sans, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    font-size:14.5px;
    font-weight:700;
  }
  .bootscreen p{ margin:0; }
  .bootscreen__spinner{
    width:34px; height:34px;
    border-radius:50%;
    border:3px solid var(--violet-soft, #EDEAFB);
    border-top-color:var(--violet, #7C6FE0);
    animation:cb-spin .7s linear infinite;
  }
  @keyframes cb-spin{
    to{ transform:rotate(360deg); }
  }
  @media (prefers-reduced-motion: reduce){
    .bootscreen__spinner{ animation-duration:1.6s; }
  }

  /* ---------- Blazor error bar ---------- */

  #blazor-error-ui{
    display:none;
    position:fixed;
    bottom:0; left:0; right:0;
    z-index:1000;
    background:var(--peach-bg);
    color:var(--peach-ink);
    padding:12px 20px;
    font-size:14px;
    font-weight:700;
    box-shadow:0 -6px 18px -12px rgba(46,43,61,.6);
  }
  #blazor-error-ui a{ color:inherit; text-decoration:underline; cursor:pointer; }
  #blazor-error-ui .dismiss{ float:right; text-decoration:none; }

  /* ---------- nav pills as links ---------- */
  /* The mock's pills were <button>s driving a JS page-swap; here they are real
     <NavLink>s, so they need anchor resets and NavLink's own .active class
     alongside the mock's aria-current styling. */

  a.pill{ text-decoration:none; }
  .pill.active{
    background:var(--violet);
    color:#fff;
    box-shadow:0 8px 18px -8px rgba(124,111,224,.95);
  }

  /* ---------- signed-in user ---------- */
  /* Replaces the mock's 1·2·3·4 concept-switcher, which pointed at sibling
     static files that do not exist in the app. */

  .userbox{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:10px;
    font-size:12.5px;
    color:var(--ink-soft);
    white-space:nowrap;
  }
  .userbox__name{
    font-weight:800;
    color:var(--ink);
    max-width:22ch;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .userbox__out{
    border:none;
    background:var(--card);
    color:var(--ink-soft);
    font-weight:800;
    font-size:12.5px;
    padding:8px 13px;
    border-radius:999px;
    cursor:pointer;
    box-shadow:0 1px 0 rgba(46,43,61,.04);
    transition:background-color .14s ease, color .14s ease, transform .14s ease;
  }
  .userbox__out:hover{ background:var(--violet-soft); color:var(--violet-deep); transform:translateY(-1px); }

  @media (max-width: 820px){
    .userbox__name{ display:none; }
  }
  @media (prefers-reduced-motion: reduce){
    .userbox__out:hover{ transform:none; }
  }