/*
     * --- Design tokens (I put colors/spacing here so I’m not hunting through the file later) ---
     * Cardinal red / teal are loosely Stanford-ish; the rest is mostly neutrals for readability.
     */
    :root {
      --cardinal: #8c1515;
      --cardinal-deep: #6d1014;
      --charcoal: #1a2228;
      --charcoal-soft: #2e363d;
      --teal: #3d9a8c;
      --teal-glow: rgba(61, 154, 140, 0.35);
      --cream: #f7f4ee;
      --glass: rgba(255, 255, 255, 0.72);
      --muted: #5a6570;
      --line: rgba(46, 54, 61, 0.1);
      --shadow-sm: 0 2px 8px rgba(26, 34, 40, 0.06);
      --shadow-md: 0 12px 40px rgba(26, 34, 40, 0.1);
      --shadow-lg: 0 24px 64px rgba(26, 34, 40, 0.14);
      --shadow-cardinal: 0 8px 32px rgba(140, 21, 21, 0.22);
      --radius: 20px;
      --radius-sm: 14px;
      --font-ui: "Outfit", system-ui, sans-serif;
      --font-display: "Fraunces", Georgia, serif;
      --max: 1040px;

      /* Theme-responsive sidebar tokens */
      --sidebar-bg: #f8f6f0;
      --sidebar-border: rgba(46, 54, 61, 0.08);
      --sidebar-text: var(--charcoal);
      --sidebar-text-muted: var(--muted);
      --sidebar-btn-bg: rgba(255, 255, 255, 0.65);
      --sidebar-btn-border: rgba(46, 54, 61, 0.1);
      --sidebar-btn-color: var(--charcoal-soft);
      --sidebar-btn-hover-bg: #ffffff;
      --sidebar-btn-hover-color: var(--charcoal);
      --sidebar-btn-hover-border: var(--teal);
    }

    [data-theme="dark"] {
      --charcoal: #e8e4de;
      --charcoal-soft: #c8c2b8;
      --cream: #141a1e;
      --glass: rgba(30, 36, 42, 0.82);
      --muted: #8a94a0;
      --line: rgba(200, 200, 200, 0.12);
      --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
      --shadow-md: 0 12px 40px rgba(0, 0, 0, 0.3);
      --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.4);

      /* Theme-responsive sidebar tokens */
      --sidebar-bg: #0f1418;
      --sidebar-border: rgba(200, 200, 200, 0.12);
      --sidebar-text: #e8e4de;
      --sidebar-text-muted: rgba(232, 228, 222, 0.65);
      --sidebar-btn-bg: rgba(40, 48, 56, 0.55);
      --sidebar-btn-border: rgba(255, 255, 255, 0.08);
      --sidebar-btn-color: rgba(232, 228, 222, 0.75);
      --sidebar-btn-hover-bg: rgba(50, 58, 66, 0.85);
      --sidebar-btn-hover-color: #e8e4de;
      --sidebar-btn-hover-border: rgba(61, 154, 140, 0.35);
    }

    [data-theme="dark"] .page::before {
      background:
        radial-gradient(ellipse 120% 80% at 10% -20%, rgba(140, 21, 21, 0.15), transparent 50%),
        radial-gradient(ellipse 80% 60% at 95% 10%, rgba(61, 154, 140, 0.18), transparent 45%),
        radial-gradient(ellipse 60% 50% at 50% 100%, rgba(20, 26, 30, 0.9), var(--cream));
    }

    [data-theme="dark"] .select {
      background-color: rgba(30, 36, 42, 0.9);
      color: var(--charcoal);
      border-color: var(--line);
    }

    [data-theme="dark"] .pill-btn:not(.is-on) {
      background: rgba(40, 48, 56, 0.8);
      color: var(--charcoal-soft);
      border-color: var(--line);
    }

    [data-theme="dark"] .glass::before {
      background: linear-gradient(145deg, rgba(60, 68, 76, 0.4), rgba(140, 21, 21, 0.08), rgba(61, 154, 140, 0.1));
    }

    [data-theme="dark"] .welcome-title {
      background: linear-gradient(120deg, #e8e4de 0%, #c8c2b8 55%, #d4605e 100%);
      -webkit-background-clip: text;
      background-clip: text;
    }

    [data-theme="dark"] .theme-toggle {
      color: #fff;
    }

    [data-theme="dark"] .upload-pick-btn,
    [data-theme="dark"] .upload-copy-link-btn,
    [data-theme="dark"] .room3d-action-btn {
      color: #f7f4ee;
      background: rgba(255, 255, 255, 0.14);
      border-color: rgba(255, 255, 255, 0.28);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    }

    [data-theme="dark"] .upload-pick-btn:hover,
    [data-theme="dark"] .upload-copy-link-btn:hover,
    [data-theme="dark"] .room3d-action-btn:hover:not(:disabled) {
      color: #fff;
      background: rgba(61, 154, 140, 0.26);
      border-color: rgba(61, 154, 140, 0.55);
    }

    [data-theme="dark"] .upload-submit:disabled {
      opacity: 1;
      color: rgba(255, 255, 255, 0.72);
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.18);
    }

    [data-theme="dark"] .shared-upload-panel {
      color: #e8e4de;
      background: rgba(20, 26, 30, 0.72);
      border-color: rgba(61, 154, 140, 0.42);
    }

    /* Makes width/height math less painful (padding counts inside the box, not on top of it) */
    *, *::before, *::after {
      box-sizing: border-box;
    }

    html,
    body {
      height: 100%;
    }

    body {
      margin: 0;
      padding: 0;
      height: 100vh;
      min-height: 100vh;
      font-family: var(--font-ui);
      line-height: 1.55;
      background: var(--cream);
      color: var(--charcoal);
      -webkit-font-smoothing: antialiased;
    }

    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
    ::-webkit-scrollbar-track {
      background: transparent;
    }
    ::-webkit-scrollbar-thumb {
      background: rgba(140, 148, 156, 0.3);
      border-radius: 10px;
      border: 3px solid transparent;
      background-clip: padding-box;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: rgba(140, 148, 156, 0.6);
      border: 3px solid transparent;
      background-clip: padding-box;
    }
    /* Firefox support */
    * {
      scrollbar-width: thin;
      scrollbar-color: rgba(140, 148, 156, 0.3) transparent;
    }

    /* Keyboard users get a visible ring; I matched it to the teal accent */
    :focus-visible {
      outline: 2px solid var(--teal);
      outline-offset: 3px;
    }

    /* Reset default button chrome — the room-type “pills” are <button>s we style ourselves */
    button {
      font: inherit;
      cursor: pointer;
      border: none;
      background: none;
    }

    /*
     * --- Full-page wrapper ---
     * The gradients and noise sit on pseudo-elements so they stay behind all content (negative z-index).
     */
    .page {
      min-height: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
    }

    /* --- Dashboard shell: sidebar + single-view workspace --- */
    .app-shell {
      display: flex;
      height: 100vh;
      height: 100dvh;
      overflow: hidden;
    }

    .app-sidebar {
      width: 280px;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      padding: 1.25rem 1rem;
      background: var(--sidebar-bg);
      border-right: 1px solid var(--sidebar-border);
      overflow-y: auto;
      z-index: 10;
      transition: background 0.3s ease, border-color 0.3s ease;
    }

    .sidebar-brand {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.65rem;
      text-align: center;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid var(--sidebar-border);
      flex-shrink: 0;
      transition: border-color 0.3s ease;
    }

    .sidebar-logo {
      width: 72px;
      height: 72px;
      object-fit: contain;
    }

    .sidebar-title {
      margin: 0;
      font-family: var(--font-display);
      font-size: 1.15rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--sidebar-text);
      transition: color 0.3s ease;
    }

    .sidebar-tagline {
      margin: 0;
      font-size: 0.78rem;
      line-height: 1.45;
      color: var(--sidebar-text-muted);
      transition: color 0.3s ease;
    }

    .sidebar-nav {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      flex: 0 0 auto;
    }

    .sidebar-nav-btn {
      width: 100%;
      text-align: left;
      padding: 0.65rem 0.85rem;
      font-size: 0.88rem;
      font-weight: 600;
      color: var(--sidebar-btn-color);
      background: var(--sidebar-btn-bg);
      border: 1px solid var(--sidebar-btn-border);
      border-radius: var(--radius-sm);
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .sidebar-nav-btn:hover {
      color: var(--sidebar-btn-hover-color);
      background: var(--sidebar-btn-hover-bg);
      border-color: var(--sidebar-btn-hover-border);
    }

    .sidebar-nav-btn.is-active {
      color: #fff;
      background: var(--cardinal);
      border-color: var(--cardinal-deep);
      box-shadow: var(--shadow-cardinal);
    }

    .app-sidebar .shortlist-section {
      max-width: none;
      margin: 0;
      padding: 0;
      flex-shrink: 0;
    }

    .app-sidebar .shortlist-section.has-items {
      display: block;
    }

    .app-sidebar .shortlist-head .panel-head {
      color: var(--sidebar-text-muted);
    }

    .sidebar-footer {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      padding-top: 0.5rem;
      border-top: 1px solid var(--sidebar-border);
      flex-shrink: 0;
      margin-top: auto;
      transition: border-color 0.3s ease;
    }

    .app-sidebar .theme-toggle {
      position: static;
      align-self: center;
      width: 2.75rem;
      height: 2.75rem;
    }

    .app-main {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .app-workspace {
      flex: 1;
      min-height: 0;
      overflow: hidden;
      position: relative;
    }

    .dashboard-view {
      display: none;
      height: 100%;
      overflow-y: auto;
      padding: clamp(1rem, 2vw, 1.35rem);
      -webkit-overflow-scrolling: touch;
    }

    .dashboard-view.is-active {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    /* Let the inner content grow naturally so .dashboard-view's overflow-y:auto
       actually scrolls — a fixed-height flex column was compressing the layout
       and clipping the reviews section entirely. */
    .dashboard-view-inner {
      display: flex;
      flex-direction: column;
      min-height: 100%;
    }

    .app-workspace .shell,
    .app-workspace .campus-map-section {
      max-width: none;
      margin: 0;
      padding: 0;
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    #view-map.is-active {
      padding: 0;
    }

    #view-map .campus-map-section {
      height: 100%;
    }

    #view-map .campus-map-card {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0;
      height: 100%;
      border-radius: 0;
    }

    #view-map .campus-map-container {
      flex: 1;
      height: auto;
      min-height: 280px;
    }

    #view-residences .layout {
      flex: none;
      min-height: auto;
    }

    #view-residences .pannellum-host {
      height: clamp(240px, 42vh, 420px);
    }

    .dashboard-view .walk-section,
    .dashboard-view .rankings-section,
    .dashboard-view .designer {
      margin-top: 0;
      flex: none;
      min-height: auto;
    }

    .sidebar-menu-btn {
      display: none;
    }

    .mobile-header {
      display: none;
    }

    .sidebar-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      z-index: 998;
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }

    .sidebar-backdrop.is-visible {
      display: block;
      opacity: 1;
      pointer-events: auto;
    }

    @media (max-width: 768px) {
      .mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 56px;
        padding: 0 1rem;
        background: var(--sidebar-bg);
        border-bottom: 1px solid var(--sidebar-border);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
        transition: background 0.3s ease, border-color 0.3s ease;
      }

      .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.25rem;
        color: var(--sidebar-text);
        background: var(--sidebar-btn-bg);
        border: 1px solid var(--sidebar-btn-border);
        border-radius: var(--radius-sm);
        transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
      }

      .mobile-menu-btn:hover {
        background: var(--sidebar-btn-hover-bg);
        border-color: var(--sidebar-btn-hover-border);
      }

      .mobile-header-title {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-family: var(--font-display);
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--sidebar-text);
        letter-spacing: -0.02em;
      }

      .mobile-theme-toggle {
        width: 2.5rem !important;
        height: 2.5rem !important;
        font-size: 1.1rem !important;
      }

      .app-main {
        padding-top: 56px;
      }

      .app-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        height: 100vh;
        z-index: 1000;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        padding: 1.5rem 1.25rem;
        gap: 1.25rem;
        background: var(--sidebar-bg);
        border-right: 1px solid var(--sidebar-border);
        border-bottom: none;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex !important;
      }

      .app-sidebar.is-nav-open {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
      }

      /* Dark-mode toggle lives in the top mobile header, not the hamburger drawer */
      .sidebar-footer {
        display: none;
      }
    }

    /* Soft red/teal blobs + cream base — fixed so scrolling doesn’t “move” the background */
    .page::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -2;
      background:
        radial-gradient(ellipse 120% 80% at 10% -20%, rgba(140, 21, 21, 0.09), transparent 50%),
        radial-gradient(ellipse 80% 60% at 95% 10%, rgba(61, 154, 140, 0.12), transparent 45%),
        radial-gradient(ellipse 60% 50% at 50% 100%, rgba(235, 230, 220, 0.9), var(--cream));
    }

    /* Tiny SVG noise overlay; pointer-events none so it never blocks clicks */
    .page::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      opacity: 0.4;
      pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
    }

    /* --- Top section: logo + welcome text --- */
    .hero {
      padding: clamp(1.5rem, 4vw, 2.75rem) 1.25rem clamp(2rem, 5vw, 3.5rem);
    }

    /*
     * On phones (portrait) we use flex so the logo + copy stack and share one clear center line.
     * From 720px up we switch to grid (logo | text) — that’s why landscape often looked fine first.
     */
    .hero-inner {
      max-width: var(--max);
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: clamp(1.5rem, 3vw, 2.5rem);
    }

    .hero-logo-wrap {
      display: flex;
      justify-content: center;
      width: fit-content;
      max-width: 100%;
    }

    /* Copy block: full width for wrapping; centered on narrow screens, left-aligned from 720px up */
    .hero-copy {
      align-self: stretch;
      width: 100%;
      text-align: center;
      animation: fade-up 0.85s 0.12s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    @media (max-width: 719px) {
      .hero {
        padding-left: max(1.25rem, env(safe-area-inset-left, 0px));
        padding-right: max(1.25rem, env(safe-area-inset-right, 0px));
      }

      .welcome-title {
        text-align: center;
      }

      .welcome-text {
        margin-inline: auto;
      }
    }

    /* Phone held upright: skip the logo (alignment was fighting us); landscape + tablet/desktop still show it */
    @media (max-width: 719px) and (orientation: portrait) {
      .hero-logo-wrap {
        display: none;
      }
    }

    .hero-logo {
      width: clamp(140px, 28vw, 240px);
      height: auto;
      display: block;
      filter: drop-shadow(0 20px 40px rgba(140, 21, 21, 0.18)) drop-shadow(0 4px 12px rgba(26, 34, 40, 0.12));
      /* Little entrance animation so the page doesn’t feel totally static on first load */
      animation: logo-in 1s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    @media (min-width: 720px) {
      .hero-inner {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 2.5rem 3rem;
        align-items: center;
      }

      .hero-logo-wrap {
        justify-content: flex-start;
        width: auto;
      }

      .hero-copy {
        align-self: auto;
        text-align: left;
      }
    }

    /*
     * Gradient text trick: paint a gradient on the text “fill”.
     * Older browsers might not support background-clip:text, so the @supports block falls back to plain color.
     */
    .welcome-title {
      margin: 0 0 0.75rem;
      font-family: var(--font-display);
      font-size: clamp(2rem, 5.5vw, 3.15rem);
      font-weight: 700;
      font-optical-sizing: auto;
      letter-spacing: -0.03em;
      line-height: 1.12;
      color: var(--charcoal);
      background: linear-gradient(120deg, var(--charcoal) 0%, var(--charcoal-soft) 55%, var(--cardinal-deep) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    @supports not (background-clip: text) {
      .welcome-title {
        color: var(--charcoal);
        -webkit-text-fill-color: unset;
        background: none;
      }
    }

    .welcome-text {
      margin: 0;
      max-width: 32rem;
      font-size: clamp(1.02rem, 2vw, 1.15rem);
      color: var(--muted);
    }

    /* --- Main content width --- caps how wide everything reads on huge monitors */
    .shell {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 1.25rem 3.5rem;
    }

    /* One column on small screens; side-by-side cards once there’s enough room */
    .layout {
      display: grid;
      gap: 1.35rem;
    }

    @media (min-width: 860px) {
      .layout {
        grid-template-columns: 1fr 1fr;
        gap: 1.35rem;
        /* stretch = both cards share the same height (matches the taller preview column) */
        align-items: stretch;
      }
    }

    /* Small uppercase labels like “EXPLORE RESIDENCES” */
    .panel-head {
      margin: 0 0 0.75rem;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
    }

    /*
     * --- “Glass” cards ---
     * Frosted blur + light border. The ::before is a fake gradient border (a bit fiddly but looks nice).
     */
    .glass {
      position: relative;
      padding: clamp(1.1rem, 2.5vw, 1.35rem);
      background: var(--glass);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.85);
      border-radius: var(--radius);
      box-shadow: var(--shadow-md);
      transition: box-shadow 0.35s ease;
    }

    .glass:hover {
      box-shadow: var(--shadow-lg);
    }

    /* Gradient ring — mask cuts out the middle so you only see a 1px-ish border */
    .glass::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      pointer-events: none;
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(140, 21, 21, 0.06), rgba(61, 154, 140, 0.08));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
    }

    /* Divider between the dorm field and the room-type field */
    .field + .field {
      margin-top: 1.1rem;
      padding-top: 1.1rem;
      border-top: 1px solid var(--line);
    }

    .label {
      display: block;
      margin-bottom: 0.5rem;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .hint {
      margin: 0.55rem 0 0;
      font-size: 0.84rem;
      font-weight: 500;
      color: var(--muted);
    }

    /*
     * Native <select> but styled to match the UI.
     * appearance:none kills the default arrow; I drew a tiny SVG chevron as background-image instead.
     */
    .select {
      width: 100%;
      padding: 0.85rem 1rem;
      padding-right: 2.75rem;
      font-family: var(--font-ui);
      font-size: 1.02rem;
      font-weight: 500;
      color: var(--charcoal);
      background: rgba(255, 255, 255, 0.95);
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      box-shadow: var(--shadow-sm);
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 12 12'%3E%3Cpath fill='%238c1515' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 1rem center;
      transition: border-color 0.2s, box-shadow 0.2s;
    }

    .select:hover {
      border-color: rgba(140, 21, 21, 0.25);
    }

    .select:focus {
      outline: none;
      border-color: var(--teal);
      box-shadow: 0 0 0 3px rgba(61, 154, 140, 0.2);
    }

    .pills {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .pill-btn {
      padding: 0.55rem 1rem;
      font-size: 0.88rem;
      font-weight: 500;
      color: var(--charcoal-soft);
      background: rgba(255, 255, 255, 0.85);
      border: 1px solid var(--line);
      border-radius: 999px;
      box-shadow: var(--shadow-sm);
      transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, background 0.2s, color 0.2s;
    }

    .pill-btn:hover {
      transform: translateY(-2px);
      border-color: rgba(140, 21, 21, 0.2);
      box-shadow: 0 6px 20px rgba(26, 34, 40, 0.08);
    }

    /* Which room type is active — cardinal gradient so it’s obvious at a glance */
    .pill-btn.is-on {
      color: #fff;
      font-weight: 600;
      border-color: transparent;
      background: linear-gradient(135deg, var(--cardinal) 0%, var(--cardinal-deep) 100%);
      box-shadow: var(--shadow-cardinal);
      transform: translateY(-1px);
    }

    /* --- Right card: mirrors your dropdown choice + hosts the 360 viewer --- */
    .preview-inner {
      display: flex;
      flex-direction: column;
    }

    .preview-kicker {
      margin: 0;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--teal);
    }

    .preview-title {
      margin: 0.3rem 0 0.65rem;
      font-family: var(--font-display);
      font-size: clamp(1.15rem, 2.2vw, 1.35rem);
      font-weight: 600;
      letter-spacing: -0.02em;
      line-height: 1.35;
      color: var(--charcoal);
    }

    /*
     * Dark frame around Pannellum — overflow hidden keeps the canvas corners rounded.
     * Height mostly comes from .pannellum-host below (clamped so it doesn’t eat the whole screen).
     */
    .preview-viewport {
      position: relative;
      overflow: hidden;
      padding: 0;
      min-height: 220px;
      border-radius: var(--radius-sm);
      border: 1px solid rgba(46, 54, 61, 0.15);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 28px rgba(26, 34, 40, 0.12);
      background: #1a2228;
    }

    /* This div’s id is what we pass into pannellum.viewer(...) in the script */
    .pannellum-host {
      width: 100%;
      height: clamp(220px, 30vh, 300px);
    }

    /* Designer canvas: sized to match .pannellum-host so the mode swap is seamless */
    .design-canvas {
      width: 100%;
      height: clamp(220px, 30vh, 300px);
      display: block;
      touch-action: none; /* let our pointer-drag handler own the gesture */
      cursor: grab;
    }
    .design-canvas:active { cursor: grabbing; }
    .design-canvas[hidden] { display: none; }
    .pannellum-host[hidden] { display: none; }

    /* Pannellum's bottom-left scene-title box ships with a clunky 20px serif
       default — restyle it as a compact glass pill matching the app (the box
       sits on the photo, so one fixed dark style works in both themes). */
    .pnlm-panorama-info {
      left: 10px;
      bottom: 10px;
      padding: 0;
      border-radius: 999px;
      background: rgba(16, 22, 27, 0.72);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.14);
    }

    .pnlm-panorama-info .pnlm-title-box {
      position: relative;
      display: block;
      margin: 0;
      padding: 0.3rem 0.85rem;
      font-family: var(--font-ui);
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      color: rgba(255, 255, 255, 0.92);
    }

    /* "Design this room" — overlay in the top-right corner of .preview-viewport,
       opens the selected dorm's panorama in the 3D room designer */
    .design-dorm-btn {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      z-index: 2;
      padding: 0.4rem 0.9rem;
      border-radius: 999px;
      background: rgba(26, 34, 40, 0.72);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.18);
      color: rgba(255, 255, 255, 0.92);
      font-family: var(--font-ui);
      font-size: 0.78rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.18s ease, border-color 0.18s ease;
    }
    .design-dorm-btn:hover {
      background: rgba(61, 154, 140, 0.55);
      border-color: rgba(61, 154, 140, 0.75);
      color: #fff;
    }
    .design-dorm-btn[hidden] { display: none; }

    /* Zoom + fullscreen button stack — mirrors Pannellum's bottom-left control position */
    .design-controls {
      position: absolute;
      bottom: 0.5rem;
      left: 0.5rem;
      z-index: 2;
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
    }
    .design-controls[hidden] { display: none; }
    .design-ctrl-btn {
      appearance: none;
      width: 2rem;
      height: 2rem;
      border-radius: 6px;
      background: rgba(26, 34, 40, 0.72);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.85);
      font-family: var(--font-ui);
      font-size: 1rem;
      line-height: 1;
      cursor: pointer;
      transition: background 0.15s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .design-ctrl-btn:hover { background: rgba(26, 34, 40, 0.95); color: #fff; }

    /* Fullscreen design toolbar — overlaid top-left of the room viewport, only
       visible while fullscreen (toggled from JS on fullscreenchange). Uses the
       same dark glass as the other in-viewport controls so it reads in any theme. */
    .room3d-fs-tools {
      position: absolute;
      top: 0.5rem;
      left: 0.5rem;
      z-index: 3;
      display: flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.4rem 0.55rem;
      border-radius: 8px;
      background: rgba(26, 34, 40, 0.72);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .room3d-fs-tools[hidden] { display: none; }
    .room3d-fs-dropdown { position: relative; }
    .room3d-fs-add-btn {
      appearance: none;
      padding: 0.35rem 0.7rem;
      border-radius: 6px;
      background: var(--teal);
      border: 1px solid rgba(255, 255, 255, 0.18);
      color: #fff;
      font-family: var(--font-ui);
      font-size: 0.8rem;
      font-weight: 600;
      cursor: pointer;
    }
    .room3d-fs-add-btn:hover { filter: brightness(1.08); }
    /* Custom menu (not a native <select>): readable in both themes and reliable
       inside the Fullscreen API, where native popups get clipped or ignored. */
    .room3d-fs-menu {
      position: absolute;
      top: calc(100% + 0.35rem);
      left: 0;
      z-index: 4;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.2rem;
      max-height: 60vh;
      overflow-y: auto;
      padding: 0.35rem;
      border-radius: 8px;
      background: rgba(26, 34, 40, 0.97);
      border: 1px solid rgba(255, 255, 255, 0.14);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    }
    .room3d-fs-menu[hidden] { display: none; }
    .room3d-fs-menu-group {
      grid-column: 1 / -1;
      padding: 0.3rem 0.35rem 0.05rem;
      font-size: 0.64rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.55);
    }
    .room3d-fs-menu-item {
      appearance: none;
      white-space: nowrap;
      padding: 0.4rem 0.7rem;
      border-radius: 5px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: #f1efe9;
      font-family: var(--font-ui);
      font-size: 0.8rem;
      text-align: left;
      cursor: pointer;
      transition: background 0.12s ease;
    }
    .room3d-fs-menu-item:hover { background: var(--teal); color: #fff; }
    .room3d-fs-menu-item:disabled { opacity: 0.5; cursor: progress; }
    .room3d-fs-btn { width: 1.9rem; height: 1.9rem; font-size: 0.95rem; }

    /* --- Bottom section: future “design your room” tool (static placeholder for now) --- */
    .designer {
      margin-top: 1.75rem;
    }

    .designer-head {
      margin-bottom: 1.25rem;
    }

    .designer-title {
      margin: 0 0 0.5rem;
      font-family: var(--font-display);
      font-size: clamp(1.35rem, 3vw, 1.65rem);
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--charcoal);
    }

    .designer-lede {
      margin: 0 0 0.75rem;
      max-width: 40rem;
      font-size: 0.95rem;
      color: var(--muted);
    }

    .designer-placeholder {
      position: relative;
      min-height: 200px;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      padding: 1.35rem 1.25rem 1.5rem;
      text-align: left;
      border-radius: var(--radius-sm);
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.5) 0%, transparent 50%),
        linear-gradient(165deg, #2a3238 0%, #1a2228 40%, #252d35 100%);
      overflow: hidden;
    }

    .designer-placeholder[hidden] {
      display: none;
    }

    /* Same pulsing glow — sits behind the upload UI */
    .designer-placeholder::before {
      content: "";
      position: absolute;
      inset: -40%;
      pointer-events: none;
      animation: hero-glow 6s ease-in-out infinite;
      background:
        radial-gradient(circle at 30% 20%, var(--teal-glow), transparent 45%),
        radial-gradient(circle at 80% 80%, rgba(140, 21, 21, 0.25), transparent 40%);
    }

    .designer-upload-form {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .designer-upload-form[hidden] {
      display: none;
    }

    .designer-upload-form:not([hidden]) {
      animation: upload-menu-drop 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    @keyframes upload-menu-drop {
      from {
        opacity: 0;
        transform: translateY(-0.65rem);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Room name field — sits at the top of the upload form */
    .room-name-field {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
    }

    .room-name-label {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.6);
    }

    .room-name-input {
      width: 100%;
      padding: 0.7rem 0.9rem;
      font-family: var(--font-ui);
      font-size: 1rem;
      font-weight: 600;
      color: #fff;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: var(--radius-sm);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

    .room-name-input::placeholder {
      color: rgba(255, 255, 255, 0.4);
      font-weight: 500;
    }

    .room-name-input:hover {
      border-color: rgba(61, 154, 140, 0.5);
    }

    .room-name-input:focus {
      outline: none;
      background: rgba(255, 255, 255, 0.12);
      border-color: var(--teal);
      box-shadow: 0 0 0 3px rgba(61, 154, 140, 0.25);
    }

    .upload-input-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .upload-dropzone {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.65rem;
      min-height: 7.5rem;
      padding: 1.1rem 1rem;
      text-align: center;
      border-radius: var(--radius-sm);
      border: 1px dashed rgba(255, 255, 255, 0.28);
      background: rgba(255, 255, 255, 0.06);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
      cursor: pointer;
      transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    }

    .upload-dropzone:hover,
    .upload-dropzone:focus-within {
      border-color: rgba(61, 154, 140, 0.55);
      background: rgba(255, 255, 255, 0.09);
    }

    .upload-dropzone.is-dragover {
      border-color: var(--teal);
      border-style: solid;
      box-shadow: 0 0 0 3px rgba(61, 154, 140, 0.25);
    }

    .upload-dropzone-hint {
      margin: 0;
      font-size: 0.88rem;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.88);
      line-height: 1.45;
    }

    .upload-dropzone-sub {
      margin: 0;
      font-size: 0.78rem;
      color: rgba(255, 255, 255, 0.55);
    }

    .upload-pick-btn {
      padding: 0.55rem 1.15rem;
      font-size: 0.86rem;
      font-weight: 600;
      color: var(--charcoal-soft);
      background: rgba(255, 255, 255, 0.92);
      border: 1px solid rgba(255, 255, 255, 0.35);
      border-radius: 999px;
      box-shadow: var(--shadow-sm);
      transition: transform 0.2s, box-shadow 0.2s;
    }

    .upload-pick-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(26, 34, 40, 0.12);
    }

    /* --- Panorama (single equirectangular image) alternative input --- */
    .pano-alt {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      margin-top: 0.85rem;
    }
    .pano-alt-divider {
      display: flex;
      align-items: center;
      width: 100%;
      gap: 0.6rem;
      color: rgba(255, 255, 255, 0.6); /* dark panel in both themes */
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    .pano-alt-divider::before,
    .pano-alt-divider::after {
      content: "";
      flex: 1;
      height: 1px;
      background: rgba(61, 154, 140, 0.25);
    }
    .pano-pick-btn {
      border-color: rgba(61, 154, 140, 0.45);
    }
    .pano-alt-hint {
      margin: 0;
      font-size: 0.78rem;
      line-height: 1.4;
      color: rgba(255, 255, 255, 0.55); /* dark panel in both themes */
      text-align: center;
    }
    .pano-preview {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      padding: 0.6rem;
      border-radius: var(--radius-sm);
      border: 1px solid rgba(61, 154, 140, 0.3);
      background: rgba(61, 154, 140, 0.06);
    }
    .pano-preview[hidden] { display: none; }
    .pano-preview-img {
      width: 100%;
      max-height: 180px;
      object-fit: cover;
      border-radius: 0.5rem;
      display: block;
    }
    .pano-preview-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.6rem;
    }
    .pano-preview-name {
      font-size: 0.8rem;
      /* Fixed light color: the upload panel is dark in BOTH themes, so theme
         vars (dark text in light mode) made this illegible. */
      color: rgba(255, 255, 255, 0.88);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .pano-remove {
      flex: none;
      padding: 0.3rem 0.7rem;
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--charcoal-soft);
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid rgba(61, 154, 140, 0.32);
      border-radius: 999px;
      cursor: pointer;
    }
    .pano-remove:hover { background: rgba(61, 154, 140, 0.12); }

    .upload-req-list {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
    }

    .upload-req-item {
      margin: 0;
      font-size: 0.8rem;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.58);
      transition: color 0.2s ease;
    }

    .upload-req-item.is-ok {
      color: rgba(180, 245, 220, 0.95);
    }

    .upload-req-item.is-bad {
      color: #ffb4b4;
    }

    .upload-thumbs {
      display: none;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.75rem;
    }

    .upload-thumbs.has-items {
      display: grid;
      animation: fade-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    @media (min-width: 720px) {
      .upload-thumbs.has-items {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    .upload-thumb {
      position: relative;
      display: flex;
      flex-direction: column;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.14);
      background: rgba(0, 0, 0, 0.25);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
      animation: fade-up 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .upload-thumb-preview {
      position: relative;
      aspect-ratio: 4 / 3;
      background: #12161a;
    }

    .upload-thumb-preview img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .upload-thumb-label {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 0.35rem 0.45rem;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #fff;
      background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }

    .upload-thumb-remove {
      position: absolute;
      top: 0.35rem;
      right: 0.35rem;
      width: 1.75rem;
      height: 1.75rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      line-height: 1;
      font-weight: 600;
      color: #fff;
      background: rgba(26, 34, 40, 0.72);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 999px;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      transition: background 0.2s, transform 0.2s;
    }

    .upload-thumb-remove:hover {
      background: rgba(140, 21, 21, 0.88);
      transform: scale(1.06);
    }

    .upload-thumb-meta {
      padding: 0.45rem 0.55rem 0.55rem;
      font-size: 0.72rem;
      color: rgba(255, 255, 255, 0.75);
      line-height: 1.35;
    }

    .upload-thumb-name {
      font-weight: 600;
      color: rgba(255, 255, 255, 0.92);
      word-break: break-word;
    }

    .upload-thumb-size {
      color: rgba(255, 255, 255, 0.55);
      white-space: nowrap;
    }

    /* --- Reorderable thumbs --- */
    .upload-thumb {
      cursor: grab;
    }
    .upload-thumb:active {
      cursor: grabbing;
    }

    /* The tile being dragged fades; the tile under the pointer gets a teal ring */
    .upload-thumb.is-dragging {
      opacity: 0.4;
    }
    .upload-thumb.is-drop-target {
      outline: 2px solid var(--teal);
      outline-offset: -2px;
      box-shadow: 0 0 0 3px rgba(61, 154, 140, 0.3), 0 8px 24px rgba(0, 0, 0, 0.2);
    }

    /* Wall assignment dropdown (top-left) — which face this slot maps to */
    .upload-thumb-slot-picker {
      position: absolute;
      top: 0.35rem;
      left: 0.35rem;
      z-index: 2;
      max-width: calc(100% - 2.5rem);
    }

    .upload-thumb-slot-trigger {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      max-width: 100%;
      padding: 0.2rem 0.5rem;
      font-family: var(--font-ui);
      font-size: 0.66rem;
      font-weight: 700;
      letter-spacing: 0.03em;
      color: #fff;
      background: linear-gradient(135deg, var(--cardinal) 0%, var(--cardinal-deep) 100%);
      border: 1px solid rgba(255, 255, 255, 0.25);
      border-radius: 999px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
      cursor: pointer;
    }

    .upload-thumb-slot-trigger::after {
      content: "▾";
      font-size: 0.62rem;
      line-height: 1;
      opacity: 0.9;
    }

    .upload-thumb-slot-trigger:hover,
    .upload-thumb-slot-trigger:focus {
      outline: none;
      border-color: rgba(61, 154, 140, 0.65);
      box-shadow: 0 0 0 2px rgba(61, 154, 140, 0.35), 0 2px 8px rgba(0, 0, 0, 0.35);
    }

    .upload-thumb-slot-menu {
      position: absolute;
      top: calc(100% + 0.3rem);
      left: 0;
      min-width: 8.75rem;
      padding: 0.3rem;
      display: none;
      flex-direction: column;
      gap: 0.15rem;
      background: rgba(255, 255, 255, 0.98);
      border: 1px solid rgba(46, 54, 61, 0.12);
      border-radius: 12px;
      box-shadow: var(--shadow-md);
    }

    .upload-thumb-slot-picker.is-open .upload-thumb-slot-menu {
      display: flex;
    }

    .upload-thumb-slot-option {
      width: 100%;
      padding: 0.42rem 0.55rem;
      text-align: left;
      font-size: 0.74rem;
      color: #1a2228;
      border-radius: 8px;
      background: transparent;
      font-weight: 600;
    }

    .upload-thumb-slot-option:hover,
    .upload-thumb-slot-option.is-selected {
      color: #fff;
      background: var(--cardinal);
    }

    [data-theme="dark"] .upload-thumb-slot-menu {
      background: #12181d;
      border-color: rgba(255, 255, 255, 0.18);
      box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
    }

    [data-theme="dark"] .upload-thumb-slot-option {
      color: #f7f4ee;
    }

    [data-theme="dark"] .upload-thumb-slot-option:hover,
    [data-theme="dark"] .upload-thumb-slot-option.is-selected {
      color: #fff;
      background: rgba(140, 21, 21, 0.92);
    }

    /* Footer row: arrows on the left, file size on the right */
    .upload-thumb-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
    }

    .upload-thumb-reorder {
      display: inline-flex;
      gap: 0.25rem;
    }

    .upload-thumb-move {
      width: 1.6rem;
      height: 1.6rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.7rem;
      line-height: 1;
      color: rgba(255, 255, 255, 0.85);
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 7px;
      transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
    }

    .upload-thumb-move:hover:not(:disabled) {
      background: rgba(61, 154, 140, 0.35);
      color: #fff;
    }

    .upload-thumb-move:disabled {
      opacity: 0.3;
      cursor: not-allowed;
    }

    .upload-actions {
      display: flex;
      flex-direction: column;
      gap: 0.65rem;
      align-items: stretch;
      width: 100%;
      max-width: 28rem;
      margin: 0.25rem auto 0;
    }

    .upload-ready {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.45rem;
      width: 100%;
      min-height: 1.5rem;
      font-size: 0.82rem;
      font-weight: 600;
      text-align: center;
      color: rgba(255, 255, 255, 0.45);
      transition: color 0.25s ease;
    }

    .upload-ready.is-ready {
      color: rgba(180, 245, 220, 0.98);
    }

    .upload-ready-icon {
      display: inline-flex;
      width: 0;
      height: 1.1rem;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(61, 154, 140, 0.35);
      color: #b4f5dc;
      font-size: 0.65rem;
      opacity: 0;
      transform: scale(0.8);
      transition: opacity 0.25s ease, transform 0.25s ease, width 0.25s ease;
    }

    .upload-ready.is-ready .upload-ready-icon {
      width: 1.1rem;
      opacity: 1;
      transform: scale(1);
    }

    .upload-submit {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 0.75rem 1.25rem;
      font-size: 0.95rem;
      font-weight: 600;
      color: #fff;
      border-radius: var(--radius-sm);
      border: 1px solid transparent;
      background: linear-gradient(135deg, var(--cardinal) 0%, var(--cardinal-deep) 100%);
      box-shadow: var(--shadow-cardinal);
      transition: opacity 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }

    .upload-submit:hover:not(:disabled) {
      transform: translateY(-1px);
    }

    .upload-submit:disabled {
      cursor: not-allowed;
      opacity: 0.42;
      box-shadow: none;
      background: rgba(255, 255, 255, 0.12);
      color: rgba(255, 255, 255, 0.55);
      border-color: rgba(255, 255, 255, 0.1);
    }

    .upload-submit.is-loading {
      cursor: progress;
      opacity: 0.85;
    }

    .upload-submit-spinner {
      display: none;
      width: 1rem;
      height: 1rem;
      margin-right: 0.5rem;
      border: 2px solid rgba(255, 255, 255, 0.35);
      border-top-color: #fff;
      border-radius: 50%;
      vertical-align: -0.18rem;
      animation: upload-spin 0.8s linear infinite;
    }

    .upload-submit.is-loading .upload-submit-spinner {
      display: inline-block;
    }

    @keyframes upload-spin {
      to { transform: rotate(360deg); }
    }

    /* Banner under the submit button — flips between success/error variants */
    .upload-result {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0.5rem;
      width: 100%;
      margin: 0;
      padding: 0.75rem 0.95rem;
      font-size: 0.86rem;
      font-weight: 500;
      border-radius: 12px;
      border: 1px solid transparent;
      line-height: 1.5;
      text-align: center;
      animation: fade-up 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .upload-result[hidden] {
      display: none;
    }

    .upload-result.is-success {
      color: #c8f7e1;
      background: rgba(61, 154, 140, 0.18);
      border-color: rgba(61, 154, 140, 0.4);
    }

    .upload-result.is-error {
      color: #ffc6c6;
      background: rgba(140, 21, 21, 0.22);
      border-color: rgba(140, 21, 21, 0.45);
    }

    /* Monospace ID chip so the upload UUID is easy to copy */
    .upload-result-id {
      display: inline-block;
      margin-left: 0.35rem;
      padding: 0.08rem 0.45rem;
      font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
      font-size: 0.78rem;
      color: #fff;
      background: rgba(255, 255, 255, 0.14);
      border-radius: 6px;
      word-break: break-all;
    }

    .upload-copy-link-btn {
      display: block;
      width: 100%;
      margin: 0;
      text-align: center;
    }

    /* Panel shown when someone opens ?upload=<uuid> */
    .shared-upload-panel {
      margin-bottom: 1rem;
      padding: 0.85rem 1rem;
      border-radius: var(--radius-sm);
      border: 1px solid rgba(61, 154, 140, 0.35);
      background: rgba(61, 154, 140, 0.12);
      animation: fade-up 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .shared-upload-panel[hidden] {
      display: none;
    }

    .shared-upload-panel.is-error {
      border-color: rgba(140, 21, 21, 0.45);
      background: rgba(140, 21, 21, 0.18);
    }

    .shared-upload-title {
      margin: 0 0 0.35rem;
      font-size: 0.95rem;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.94);
    }

    .shared-upload-meta {
      margin: 0 0 0.75rem;
      font-size: 0.82rem;
      color: rgba(255, 255, 255, 0.72);
      line-height: 1.45;
    }

    .shared-upload-error {
      margin: 0;
      font-size: 0.86rem;
      color: #ffc6c6;
    }

    .shared-share-thumbs {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.65rem;
    }

    @media (min-width: 720px) {
      .shared-share-thumbs {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    .shared-share-thumb {
      margin: 0;
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.14);
      background: rgba(0, 0, 0, 0.25);
    }

    .shared-share-thumb img {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 4 / 3;
      object-fit: cover;
    }

    .shared-share-thumb figcaption {
      margin: 0;
      padding: 0.35rem 0.5rem;
      font-size: 0.72rem;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.75);
    }

    .upload-intro-title {
      margin: 0 0 0.25rem;
      text-align: center;
      font-family: var(--font-ui);
      font-size: clamp(1rem, 2.8vw, 1.08rem);
      font-weight: 600;
      color: rgba(255, 255, 255, 0.94);
      line-height: 1.45;
    }

    .upload-intro-detail {
      margin: 0;
      text-align: center;
      max-width: 36rem;
      margin-inline: auto;
    }

    /* --- Inline 3D room stage (designer view) --- */
    .room3d-stage {
      margin-top: 1.5rem;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      animation: fade-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .room3d-stage[hidden] {
      display: none;
    }

    .room3d-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      flex-wrap: wrap;
    }

    .room3d-title {
      margin: 0;
      font-family: var(--font-display);
      font-size: clamp(1.1rem, 2.4vw, 1.35rem);
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--charcoal);
      word-break: break-word;
    }

    .room3d-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 0.45rem;
    }

    .room3d-action-btn {
      padding: 0.45rem 0.95rem;
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--teal);
      background: rgba(61, 154, 140, 0.12);
      border: 1px solid rgba(61, 154, 140, 0.32);
      border-radius: 999px;
      transition: background 0.2s ease, transform 0.15s ease;
    }

    .room3d-action-btn:hover:not(:disabled) {
      background: rgba(61, 154, 140, 0.22);
      transform: translateY(-1px);
    }

    .room3d-action-btn:disabled {
      cursor: not-allowed;
      opacity: 0.45;
    }

    .upload-not-found {
      margin-top: 1.5rem;
      padding: clamp(1.25rem, 3vw, 2rem);
      text-align: center;
      border-radius: var(--radius-sm);
      border: 1px solid rgba(255, 255, 255, 0.12);
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 55%),
        rgba(26, 34, 40, 0.72);
      box-shadow: var(--shadow-md);
    }

    .upload-not-found[hidden] {
      display: none;
    }

    .upload-not-found-title {
      margin: 0 0 0.4rem;
      font-family: var(--font-display);
      font-size: clamp(1.2rem, 2.5vw, 1.45rem);
      /* Fixed light colors: this card has a dark background in both themes,
         so var(--charcoal) was dark-on-dark in light mode. */
      color: rgba(255, 255, 255, 0.94);
    }

    .upload-not-found-copy {
      max-width: 34rem;
      margin: 0 auto 1rem;
      color: rgba(255, 255, 255, 0.7);
    }

    .upload-not-found-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .room3d-viewport {
      height: clamp(280px, 48vh, 520px);
    }

    .room3d-viewport .design-canvas {
      height: 100%;
    }

    /* Furniture hit a wall — quick sideways jolt on the whole viewport */
    @keyframes wall-bump-shake {
      0%, 100% { transform: translateX(0); }
      20% { transform: translateX(-5px); }
      40% { transform: translateX(5px); }
      60% { transform: translateX(-3px); }
      80% { transform: translateX(3px); }
    }

    .room3d-viewport.is-wall-bump {
      animation: wall-bump-shake 0.3s ease;
    }

    @media (prefers-reduced-motion: reduce) {
      .room3d-viewport.is-wall-bump {
        animation: none;
      }
    }

    .room3d-hint {
      margin: 0;
      text-align: center;
      font-size: 0.8rem;
      color: var(--muted);
    }

    /* --- Design mode panel (Tier 1 scale + Tier 2 floor mapping) --- */
    .room3d-design-panel {
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
      padding: 0.85rem 1rem;
      border-radius: var(--radius-sm);
      border: 1px solid rgba(61, 154, 140, 0.28);
      background: rgba(61, 154, 140, 0.06);
      animation: fade-up 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .room3d-design-panel[hidden] { display: none; }

    .rdp-row {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      flex-wrap: wrap;
    }

    .rdp-label {
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--charcoal);
    }

    .rdp-range {
      flex: 1 1 140px;
      min-width: 110px;
      accent-color: var(--teal);
    }

    .rdp-height-box {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
    }

    .rdp-num {
      width: 4.2rem;
      padding: 0.3rem 0.45rem;
      font-size: 0.85rem;
      border: 1px solid rgba(61, 154, 140, 0.32);
      border-radius: 0.5rem;
      background: rgba(255, 255, 255, 0.9);
      color: var(--charcoal);
    }

    .rdp-unit { font-size: 0.8rem; color: var(--muted); }

    /* Dark mode: the near-white input background left the (now light) charcoal
       text almost invisible. Give the number box a dark fill so it stays legible. */
    [data-theme="dark"] .rdp-num {
      background: rgba(20, 26, 31, 0.85);
      border-color: rgba(61, 154, 140, 0.5);
      color: var(--charcoal);
    }

    /* Same dark-mode legibility fix for the panorama "Remove" button. */
    [data-theme="dark"] .pano-remove {
      background: rgba(20, 26, 31, 0.85);
      border-color: rgba(61, 154, 140, 0.5);
      color: var(--charcoal);
    }
    [data-theme="dark"] .pano-remove:hover { background: rgba(61, 154, 140, 0.22); }

    .rdp-check {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      font-size: 0.8rem;
      color: var(--muted);
    }

    .rdp-help {
      margin: 0;
      font-size: 0.78rem;
      line-height: 1.4;
      color: var(--muted);
    }

    .rdp-dims {
      margin-left: auto;
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--teal);
    }

    .room3d-action-btn.is-active {
      background: rgba(61, 154, 140, 0.3);
      box-shadow: inset 0 0 0 1px rgba(61, 154, 140, 0.5);
    }

    /* Room Designer empty state — shown until a room is sent to the studio */
    .studio-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.85rem;
      padding: clamp(1.5rem, 4vw, 2.5rem);
      text-align: center;
      border-radius: var(--radius-sm);
      border: 1px dashed rgba(61, 154, 140, 0.4);
      background: rgba(61, 154, 140, 0.05);
    }

    .studio-empty[hidden] { display: none; }

    .studio-empty-title {
      margin: 0;
      font-family: var(--font-display);
      font-size: clamp(1.15rem, 2.5vw, 1.4rem);
      color: var(--charcoal);
    }

    .studio-empty-copy {
      margin: 0;
      max-width: 30rem;
      color: var(--muted);
    }

    .studio-dorm-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.45rem;
      max-width: 36rem;
    }

    /* Numbered step headers — guide the scale → trace → furnish flow */
    .rdp-step-head {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      margin: 0.35rem 0 0;
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--muted);
      transition: color 0.2s ease;
    }

    .rdp-step-num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.25rem;
      height: 1.25rem;
      border-radius: 999px;
      font-size: 0.72rem;
      font-weight: 700;
      background: rgba(61, 154, 140, 0.15);
      color: var(--teal);
      border: 1px solid rgba(61, 154, 140, 0.3);
      transition: background 0.2s ease, color 0.2s ease;
    }

    .rdp-step-head.is-active {
      color: var(--charcoal);
    }

    .rdp-step-head.is-active .rdp-step-num {
      background: var(--teal);
      color: #fff;
    }

    .rdp-catalog {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
    }

    .rdp-cat-group {
      display: flex;
      flex-direction: column;
      gap: 0.3rem;
    }

    .rdp-cat-group-label {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .rdp-cat-group-items {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
    }

    .rdp-cat-btn {
      padding: 0.35rem 0.7rem;
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--charcoal);
      background: rgba(255, 255, 255, 0.7);
      border: 1px solid rgba(61, 154, 140, 0.3);
      border-radius: 0.5rem;
      cursor: pointer;
      transition: background 0.15s ease;
    }

    .rdp-cat-btn:hover { background: rgba(61, 154, 140, 0.15); }
    .rdp-cat-btn:disabled { opacity: 0.5; cursor: progress; }

    .rdp-hint-inline {
      font-size: 0.76rem;
      color: var(--muted);
    }

    /* --- Keyframes (referenced above in .hero-logo / .hero-copy / .designer-placeholder) --- */

    /* --- Dark mode toggle --- */
    .theme-toggle {
      position: fixed;
      top: 1rem;
      right: 1rem;
      z-index: 100;
      width: 2.75rem;
      height: 2.75rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.25rem;
      background: var(--glass);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--line);
      border-radius: 999px;
      box-shadow: var(--shadow-md);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .theme-toggle:hover {
      transform: scale(1.08);
      box-shadow: var(--shadow-lg);
    }

    /* --- Favorites star on dorm options --- */
    .fav-btn {
      padding: 0.3rem 0.45rem;
      font-size: 1.1rem;
      line-height: 1;
      color: var(--muted);
      opacity: 0.5;
      transition: opacity 0.2s, transform 0.2s, color 0.2s;
    }

    .fav-btn:hover {
      opacity: 1;
      transform: scale(1.15);
    }

    .fav-btn.is-fav {
      color: #e6a817;
      opacity: 1;
    }

    .shortlist-section {
      max-width: var(--max);
      margin: 0 auto 1.25rem;
      padding: 0 1.25rem;
      display: none;
    }

    .shortlist-section.has-items {
      display: block;
      animation: fade-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .shortlist-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-top: 0.5rem;
    }

    /* Share button (Noah) — sits next to the "My shortlist" header */
    .shortlist-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .share-shortlist-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.4rem 0.85rem;
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.01em;
      color: var(--teal);
      background: rgba(61, 154, 140, 0.1);
      border: 1px solid rgba(61, 154, 140, 0.3);
      border-radius: 999px;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
    }

    .share-shortlist-btn:hover {
      background: rgba(61, 154, 140, 0.2);
      transform: translateY(-1px);
    }

    .share-shortlist-btn.is-copied {
      background: var(--teal);
      color: #fff;
      border-color: var(--teal);
    }

    .share-shortlist-icon {
      font-size: 0.95rem;
    }

    .shortlist-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.45rem 0.85rem;
      font-size: 0.86rem;
      font-weight: 500;
      color: var(--charcoal);
      background: var(--glass);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid var(--line);
      border-radius: 999px;
      box-shadow: var(--shadow-sm);
      transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    }

    .shortlist-chip:hover {
      transform: translateY(-2px);
      border-color: rgba(140, 21, 21, 0.2);
      box-shadow: 0 6px 20px rgba(26, 34, 40, 0.08);
    }

    .shortlist-chip-star {
      color: #e6a817;
      font-size: 0.9rem;
    }

    .shortlist-chip-remove {
      margin-left: 0.15rem;
      font-size: 0.85rem;
      color: var(--muted);
      opacity: 0.6;
      transition: opacity 0.2s, color 0.2s;
    }

    .shortlist-chip-remove:hover {
      opacity: 1;
      color: var(--cardinal);
    }

    /* --- Dorm select row with fav button --- */
    .select-row {
      display: flex;
      gap: 0.5rem;
      align-items: center;
    }

    .select-row .select {
      flex: 1;
    }

    /* --- Compare mode --- */
    .compare-toggle {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      margin-top: 0.85rem;
      padding: 0.5rem 1rem;
      font-size: 0.84rem;
      font-weight: 600;
      color: var(--muted);
      background: rgba(61, 154, 140, 0.08);
      border: 1px solid rgba(61, 154, 140, 0.2);
      border-radius: 999px;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }

    .compare-toggle:hover {
      background: rgba(61, 154, 140, 0.15);
      color: var(--charcoal);
    }

    .compare-toggle.is-on {
      color: #fff;
      background: var(--teal);
      border-color: var(--teal);
    }

    .compare-panel {
      display: none;
      margin-top: 1.35rem;
    }

    .compare-panel.is-open {
      display: block;
      animation: fade-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .compare-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      border-radius: var(--radius-sm);
      overflow: hidden;
      border: 1px solid var(--line);
    }

    .compare-col {
      padding: 1rem 1.15rem;
    }

    .compare-col + .compare-col {
      border-left: 1px solid var(--line);
    }

    .compare-col-name {
      margin: 0 0 0.65rem;
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--charcoal);
    }

    .compare-row-label {
      margin: 0.6rem 0 0.2rem;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .compare-row-value {
      margin: 0;
      font-size: 0.9rem;
      color: var(--charcoal-soft);
    }

    .compare-room-list {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: 0.3rem;
    }

    .compare-room-tag {
      display: inline-block;
      padding: 0.2rem 0.55rem;
      font-size: 0.78rem;
      font-weight: 500;
      color: var(--charcoal-soft);
      background: rgba(61, 154, 140, 0.1);
      border-radius: 999px;
    }

    .compare-room-tag.is-shared {
      background: rgba(61, 154, 140, 0.22);
      color: var(--charcoal);
      font-weight: 600;
    }

    .compare-select-row {
      display: flex;
      gap: 0.5rem;
      align-items: center;
      margin-bottom: 0.75rem;
    }

    .compare-select-row .select {
      flex: 1;
      font-size: 0.92rem;
      padding: 0.65rem 0.85rem;
      padding-right: 2.5rem;
    }

    .compare-vs {
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--cardinal);
    }

    @media (max-width: 600px) {
      .compare-grid {
        grid-template-columns: 1fr;
      }
      .compare-col + .compare-col {
        border-left: none;
        border-top: 1px solid var(--line);
      }
    }

    /* --- Campus Map Section --- */
    .campus-map-section {
      max-width: var(--max);
      margin: 0 auto 1.75rem;
      padding: 0 1.25rem;
    }

    .campus-map-card {
      position: relative;
      padding: 0;
      background: var(--glass);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.85);
      border-radius: var(--radius);
      box-shadow: var(--shadow-md);
      overflow: hidden;
      transition: box-shadow 0.35s ease;
    }

    .campus-map-card:hover {
      box-shadow: var(--shadow-lg);
    }

    .campus-map-header {
      padding: clamp(0.85rem, 2vw, 1.15rem) clamp(1.1rem, 2.5vw, 1.35rem);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    .campus-map-header-left {
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
    }

    .campus-map-label {
      margin: 0;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .campus-map-title {
      margin: 0;
      font-family: var(--font-display);
      font-size: clamp(1.1rem, 2.2vw, 1.3rem);
      font-weight: 600;
      letter-spacing: -0.02em;
      color: var(--charcoal);
    }

    .campus-map-hint {
      font-size: 0.8rem;
      font-weight: 500;
      color: var(--muted);
      white-space: nowrap;
    }

    .campus-map-container {
      position: relative;
      width: 100%;
      height: clamp(320px, 45vh, 500px);
      border-top: 1px solid var(--line);
    }

    #campus-map {
      width: 100%;
      height: 100%;
    }

    .mapboxgl-popup-content {
      font-family: var(--font-ui) !important;
      padding: 0.65rem 0.85rem !important;
      border-radius: 12px !important;
      box-shadow: 0 8px 28px rgba(26, 34, 40, 0.18) !important;
      min-width: 140px;
    }

    .mapboxgl-popup-close-button {
      font-size: 1.1rem;
      padding: 0 0.45rem;
      color: var(--muted);
    }

    .mapboxgl-popup-tip {
      border-top-color: #fff !important;
    }

    .map-popup-name {
      margin: 0 0 0.2rem;
      font-family: var(--font-display);
      font-size: 0.95rem;
      font-weight: 600;
      color: #1a2228;
    }

    .map-popup-category {
      margin: 0 0 0.45rem;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #5a6570;
    }

    .map-popup-explore {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      padding: 0.4rem 0.85rem;
      font-family: var(--font-ui);
      font-size: 0.8rem;
      font-weight: 600;
      color: #fff;
      background: linear-gradient(135deg, #8c1515 0%, #6d1014 100%);
      border: none;
      border-radius: 999px;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(140, 21, 21, 0.25);
      transition: transform 0.2s, box-shadow 0.2s;
    }

    .map-popup-explore:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(140, 21, 21, 0.35);
    }

    .dorm-marker {
      width: 32px;
      height: 40px;
      cursor: pointer;
    }

    .dorm-marker-pin {
      width: 32px;
      height: 40px;
      filter: drop-shadow(0 3px 6px rgba(140, 21, 21, 0.35));
      transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), filter 0.25s ease;
    }

    .dorm-marker:hover .dorm-marker-pin {
      transform: translateY(-4px) scale(1.12);
      filter: drop-shadow(0 6px 12px rgba(140, 21, 21, 0.45));
    }

    .dorm-marker-pin svg {
      display: block;
      width: 32px;
      height: 40px;
    }

    .campus-map-back-btn {
      position: absolute;
      top: 0.75rem;
      left: 0.75rem;
      z-index: 10;
      display: none;
      align-items: center;
      gap: 0.35rem;
      padding: 0.5rem 1rem;
      font-family: var(--font-ui);
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--charcoal);
      background: var(--glass);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--line);
      border-radius: 999px;
      box-shadow: var(--shadow-md);
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.2s;
    }

    .campus-map-back-btn:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow-lg);
    }

    .campus-map-back-btn.is-visible {
      display: inline-flex;
      animation: fade-up 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .campus-map-overlay {
      position: absolute;
      inset: 0;
      z-index: 5;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(26, 34, 40, 0.92);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-radius: 0 0 var(--radius) var(--radius);
    }

    .campus-map-overlay.is-visible {
      display: flex;
      animation: fade-up 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .campus-map-overlay-inner {
      width: 100%;
      max-width: 640px;
      padding: 1.25rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.75rem;
    }

    .campus-map-overlay-title {
      margin: 0;
      font-family: var(--font-display);
      font-size: clamp(1.15rem, 2.5vw, 1.4rem);
      font-weight: 600;
      color: #fff;
      text-align: center;
    }

    .campus-map-overlay-pano {
      width: 100%;
      height: clamp(200px, 32vh, 340px);
      border-radius: var(--radius-sm);
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.15);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    }

    .campus-map-overlay-pano .pannellum-host {
      height: 100%;
    }

    .campus-map-overlay-actions {
      display: flex;
      gap: 0.65rem;
      flex-wrap: wrap;
      justify-content: center;
    }

    .campus-map-overlay-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.5rem 1.1rem;
      font-family: var(--font-ui);
      font-size: 0.84rem;
      font-weight: 600;
      border-radius: 999px;
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.2s;
    }

    .campus-map-overlay-btn:hover {
      transform: translateY(-1px);
    }

    .campus-map-overlay-btn--primary {
      color: #fff;
      background: linear-gradient(135deg, var(--cardinal) 0%, var(--cardinal-deep) 100%);
      border: 1px solid transparent;
      box-shadow: var(--shadow-cardinal);
    }

    .campus-map-overlay-btn--secondary {
      color: rgba(255, 255, 255, 0.9);
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.25);
      box-shadow: none;
    }

    .campus-map-overlay-btn--secondary:hover {
      background: rgba(255, 255, 255, 0.18);
    }

    .campus-map-container:fullscreen,
    .campus-map-container:-webkit-full-screen {
      width: 100vw;
      height: 100vh;
      border-radius: 0;
    }

    .campus-map-container:fullscreen #campus-map,
    .campus-map-container:-webkit-full-screen #campus-map {
      height: 100vh;
    }

    /* --- Walking Distance Panel --- */
    .walk-section {
      margin-top: 1.35rem;
    }

    .walk-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      margin-bottom: 1rem;
    }

    .walk-head-left {
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
    }

    .walk-title {
      margin: 0;
      font-family: var(--font-display);
      font-size: clamp(1.15rem, 2.5vw, 1.35rem);
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--charcoal);
    }

    .walk-lede {
      margin: 0;
      font-size: 0.84rem;
      color: var(--muted);
    }

    .walk-dorm-chip {
      display: inline-block;
      padding: 0.3rem 0.75rem;
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--cardinal);
      background: rgba(140, 21, 21, 0.08);
      border: 1px solid rgba(140, 21, 21, 0.15);
      border-radius: 999px;
      white-space: nowrap;
    }

    .walk-list {
      display: flex;
      flex-direction: column;
      gap: 0.65rem;
    }

    .walk-item {
      display: flex;
      align-items: center;
      gap: 0.85rem;
      padding: 0.75rem 0.95rem;
      border-radius: var(--radius-sm);
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.5);
      transition: border-color 0.2s, transform 0.15s;
      animation: fade-up 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .walk-item:nth-child(1) { animation-delay: 0s; }
    .walk-item:nth-child(2) { animation-delay: 0.06s; }
    .walk-item:nth-child(3) { animation-delay: 0.12s; }
    .walk-item:nth-child(4) { animation-delay: 0.18s; }
    .walk-item:nth-child(5) { animation-delay: 0.24s; }

    .walk-item:hover {
      border-color: rgba(61, 154, 140, 0.35);
      transform: translateY(-1px);
    }

    [data-theme="dark"] .walk-item {
      background: rgba(30, 36, 42, 0.6);
    }

    .walk-icon {
      flex-shrink: 0;
      width: 2.2rem;
      height: 2.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.15rem;
      background: rgba(61, 154, 140, 0.1);
      border-radius: 10px;
    }

    .walk-info {
      flex: 1;
      min-width: 0;
    }

    .walk-name {
      margin: 0;
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--charcoal);
    }

    .walk-dist {
      margin: 0.1rem 0 0;
      font-size: 0.76rem;
      color: var(--muted);
    }

    .walk-time-wrap {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 0.3rem;
      min-width: 90px;
    }

    .walk-minutes {
      font-size: 0.92rem;
      font-weight: 700;
      color: var(--charcoal);
    }

    .walk-minutes span {
      font-size: 0.72rem;
      font-weight: 500;
      color: var(--muted);
    }

    .walk-bar {
      width: 100%;
      height: 5px;
      border-radius: 999px;
      background: var(--line);
      overflow: hidden;
    }

    .walk-bar-fill {
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--teal), rgba(61, 154, 140, 0.5));
      transform-origin: left;
      animation: bar-grow 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .walk-item:nth-child(1) .walk-bar-fill { animation-delay: 0.15s; }
    .walk-item:nth-child(2) .walk-bar-fill { animation-delay: 0.22s; }
    .walk-item:nth-child(3) .walk-bar-fill { animation-delay: 0.29s; }
    .walk-item:nth-child(4) .walk-bar-fill { animation-delay: 0.36s; }
    .walk-item:nth-child(5) .walk-bar-fill { animation-delay: 0.43s; }

    @keyframes bar-grow {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }

    @media (max-width: 500px) {
      .walk-time-wrap { min-width: 70px; }
    }

    /* --- Dorm Rankings Dashboard --- */
    .rankings-section {
      margin-top: 1.35rem;
    }

    .rankings-head {
      margin-bottom: 1.15rem;
    }

    .rankings-title {
      margin: 0 0 0.35rem;
      font-family: var(--font-display);
      font-size: clamp(1.35rem, 3vw, 1.65rem);
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--charcoal);
    }

    .rankings-lede {
      margin: 0 0 1rem;
      max-width: 40rem;
      font-size: 0.95rem;
      color: var(--muted);
    }

    .rankings-controls {
      display: flex;
      flex-wrap: wrap;
      gap: 0.65rem;
      align-items: center;
    }

    .rankings-control-group {
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }

    .rankings-control-label {
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
      white-space: nowrap;
    }

    .rankings-pill {
      padding: 0.4rem 0.85rem;
      font-size: 0.8rem;
      font-weight: 500;
      color: var(--charcoal-soft);
      background: rgba(255, 255, 255, 0.85);
      border: 1px solid var(--line);
      border-radius: 999px;
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    .rankings-pill:hover {
      border-color: rgba(140, 21, 21, 0.2);
      transform: translateY(-1px);
    }

    .rankings-pill.is-active {
      color: #fff;
      font-weight: 600;
      background: linear-gradient(135deg, var(--cardinal) 0%, var(--cardinal-deep) 100%);
      border-color: transparent;
      box-shadow: var(--shadow-cardinal);
    }

    [data-theme="dark"] .rankings-pill:not(.is-active) {
      background: rgba(40, 48, 56, 0.8);
      color: var(--charcoal-soft);
      border-color: var(--line);
    }

    .rankings-filter-pill {
      padding: 0.4rem 0.85rem;
      font-size: 0.8rem;
      font-weight: 500;
      color: var(--charcoal-soft);
      background: rgba(61, 154, 140, 0.08);
      border: 1px solid rgba(61, 154, 140, 0.2);
      border-radius: 999px;
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    .rankings-filter-pill:hover {
      background: rgba(61, 154, 140, 0.15);
    }

    .rankings-filter-pill.is-active {
      color: #fff;
      font-weight: 600;
      background: var(--teal);
      border-color: var(--teal);
    }

    [data-theme="dark"] .rankings-filter-pill:not(.is-active) {
      background: rgba(61, 154, 140, 0.12);
      color: var(--charcoal-soft);
    }

    .rankings-table {
      margin-top: 1rem;
      border-radius: var(--radius-sm);
      border: 1px solid var(--line);
      overflow: hidden;
    }

    .rankings-header-row {
      display: grid;
      grid-template-columns: 2.5rem 1fr 120px 80px;
      gap: 0.5rem;
      padding: 0.6rem 0.95rem;
      background: rgba(26, 34, 40, 0.04);
      border-bottom: 1px solid var(--line);
    }

    [data-theme="dark"] .rankings-header-row {
      background: rgba(255, 255, 255, 0.04);
    }

    .rankings-header-cell {
      font-size: 0.66rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .rankings-header-cell:last-child {
      text-align: right;
    }

    .rankings-row {
      display: grid;
      grid-template-columns: 2.5rem 1fr 120px 80px;
      gap: 0.5rem;
      padding: 0.7rem 0.95rem;
      align-items: center;
      border-bottom: 1px solid var(--line);
      cursor: pointer;
      transition: background 0.15s ease, transform 0.15s ease;
      animation: fade-up 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .rankings-row:last-child {
      border-bottom: none;
    }

    .rankings-row:hover {
      background: rgba(61, 154, 140, 0.06);
    }

    [data-theme="dark"] .rankings-row:hover {
      background: rgba(61, 154, 140, 0.1);
    }

    .rankings-row.is-selected {
      background: rgba(140, 21, 21, 0.06);
    }

    [data-theme="dark"] .rankings-row.is-selected {
      background: rgba(140, 21, 21, 0.12);
    }

    .rankings-rank {
      font-family: var(--font-display);
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--muted);
      text-align: center;
    }

    .rankings-row:nth-child(2) .rankings-rank {
      color: #d4a017;
    }

    .rankings-row:nth-child(3) .rankings-rank {
      color: #8a8a8a;
    }

    .rankings-row:nth-child(4) .rankings-rank {
      color: #b87333;
    }

    .rankings-dorm-info {
      display: flex;
      flex-direction: column;
      gap: 0.1rem;
      min-width: 0;
    }

    .rankings-dorm-name {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--charcoal);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .rankings-dorm-category {
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .rankings-score-bar-wrap {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .rankings-score-bar {
      flex: 1;
      height: 6px;
      border-radius: 999px;
      background: var(--line);
      overflow: hidden;
    }

    .rankings-score-bar-fill {
      height: 100%;
      border-radius: 999px;
      transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .rankings-score-bar-fill.tier-gold {
      background: linear-gradient(90deg, #d4a017, #e6c038);
    }

    .rankings-score-bar-fill.tier-silver {
      background: linear-gradient(90deg, #8a8a8a, #b0b0b0);
    }

    .rankings-score-bar-fill.tier-bronze {
      background: linear-gradient(90deg, #b87333, #d4935a);
    }

    .rankings-score-bar-fill.tier-normal {
      background: linear-gradient(90deg, var(--teal), rgba(61, 154, 140, 0.5));
    }

    .rankings-score-value {
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--charcoal);
      text-align: right;
      min-width: 2.5rem;
    }

    .rankings-empty {
      padding: 2rem 1rem;
      text-align: center;
      font-size: 0.9rem;
      color: var(--muted);
    }

    @media (max-width: 600px) {
      .rankings-header-row,
      .rankings-row {
        grid-template-columns: 2rem 1fr 90px 55px;
        gap: 0.35rem;
        padding: 0.6rem 0.65rem;
      }

      .rankings-controls {
        flex-direction: column;
        align-items: flex-start;
      }
    }

    [data-theme="dark"] .campus-map-card {
      border-color: var(--line);
    }

    [data-theme="dark"] .mapboxgl-popup-content {
      background: #1e242a !important;
      color: #e8e4de;
    }

    [data-theme="dark"] .map-popup-name {
      color: #e8e4de;
    }

    [data-theme="dark"] .map-popup-category {
      color: #8a94a0;
    }

    [data-theme="dark"] .mapboxgl-popup-tip {
      border-top-color: #1e242a !important;
    }

    [data-theme="dark"] .mapboxgl-popup-close-button {
      color: #8a94a0;
    }

    @keyframes logo-in {
      from {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    @keyframes fade-up {
      from {
        opacity: 0;
        transform: translateY(16px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes hero-glow {
      0%, 100% { opacity: 0.55; }
      50% { opacity: 0.85; }
    }

    /* ============================================================
       Per-dorm notes (Noah)
       ============================================================ */
    .notes-field {
      margin-top: 0.4rem;
    }

    .notes-field .label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
    }

    .notes-status {
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--teal);
      opacity: 0;
      transition: opacity 0.25s ease;
    }

    .notes-status.is-visible {
      opacity: 1;
    }

    .notes-textarea {
      width: 100%;
      padding: 0.7rem 0.85rem;
      font: inherit;
      font-size: 0.92rem;
      line-height: 1.45;
      color: var(--charcoal);
      background-color: rgba(255, 255, 255, 0.7);
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      resize: vertical;
      min-height: 4.5rem;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    }

    [data-theme="dark"] .notes-textarea {
      background-color: rgba(30, 36, 42, 0.9);
      color: var(--charcoal);
      border-color: var(--line);
    }

    .notes-textarea:focus {
      outline: none;
      border-color: var(--teal);
      box-shadow: 0 0 0 3px var(--teal-glow);
    }

    .notes-hint {
      margin-top: 0.35rem;
      font-size: 0.78rem;
    }

    /* ============================================================
       Dorm match quiz (Noah) — modal-style flow that asks 7 questions,
       scores each dorm by tag overlap, and recommends the top 3 matches.
       ============================================================ */

    /* The CTA card lives above the dorm dropdown in the controls panel */
    .quiz-cta {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      width: 100%;
      padding: 0.85rem 1rem;
      margin-bottom: 1rem;
      text-align: left;
      background: linear-gradient(135deg, rgba(140, 21, 21, 0.08), rgba(61, 154, 140, 0.1));
      border: 1px solid rgba(140, 21, 21, 0.2);
      border-radius: var(--radius-sm);
      color: var(--charcoal);
      cursor: pointer;
      transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    }

    .quiz-cta:hover {
      transform: translateY(-1px);
      border-color: var(--cardinal);
      box-shadow: var(--shadow-cardinal);
    }

    .quiz-cta-icon {
      flex-shrink: 0;
      font-size: 1.6rem;
      color: var(--cardinal);
    }

    .quiz-cta-text {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
      font-size: 0.85rem;
      line-height: 1.35;
    }

    .quiz-cta-sub {
      color: var(--muted);
      font-size: 0.78rem;
    }

    .quiz-cta-arrow {
      flex-shrink: 0;
      font-size: 1.2rem;
      color: var(--cardinal);
      transition: transform 0.15s ease;
    }

    .quiz-cta:hover .quiz-cta-arrow {
      transform: translateX(3px);
    }

    /* Full-page overlay backdrop */
    .quiz-overlay {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1.25rem;
      background: rgba(10, 16, 22, 0.7);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      animation: fade-in 0.25s ease;
    }

    /* `display: flex` overrides the user-agent [hidden] { display: none },
       so we need an explicit override for .quiz-overlay/.quiz-options/
       .quiz-results, otherwise the empty modal frame paints before being opened. */
    .quiz-overlay[hidden],
    .quiz-options[hidden],
    .quiz-results[hidden] {
      display: none;
    }

    @keyframes fade-in {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    /* The white card holding the active question or results */
    .quiz-modal {
      position: relative;
      width: min(560px, 100%);
      max-height: 85vh;
      overflow-y: auto;
      padding: 2rem 1.75rem 1.75rem;
      background: var(--cream);
      border-radius: var(--radius);
      box-shadow: var(--shadow-lg);
      animation: quiz-pop 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }

    [data-theme="dark"] .quiz-modal {
      background: rgba(30, 36, 42, 0.98);
    }

    @keyframes quiz-pop {
      from { opacity: 0; transform: translateY(20px) scale(0.96); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .quiz-close {
      position: absolute;
      top: 0.75rem;
      right: 0.85rem;
      width: 2rem;
      height: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      line-height: 1;
      color: var(--muted);
      background: transparent;
      border-radius: 999px;
      cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease;
    }

    .quiz-close:hover {
      background: rgba(0, 0, 0, 0.08);
      color: var(--charcoal);
    }

    .quiz-progress {
      height: 4px;
      width: 100%;
      background: var(--line);
      border-radius: 999px;
      overflow: hidden;
      margin-bottom: 1.25rem;
    }

    .quiz-progress-bar {
      height: 100%;
      width: 0;
      background: linear-gradient(90deg, var(--cardinal), var(--teal));
      transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .quiz-step {
      margin: 0 0 0.25rem;
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--cardinal);
    }

    .quiz-title {
      margin: 0 0 1.25rem;
      font-family: var(--font-display);
      font-size: clamp(1.3rem, 3vw, 1.7rem);
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--charcoal);
      line-height: 1.25;
    }

    .quiz-options {
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
    }

    .quiz-option {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.85rem 1rem;
      width: 100%;
      text-align: left;
      font-size: 0.92rem;
      color: var(--charcoal);
      background: rgba(255, 255, 255, 0.6);
      border: 1.5px solid var(--line);
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
    }

    [data-theme="dark"] .quiz-option {
      background: rgba(40, 48, 56, 0.6);
      color: var(--charcoal);
    }

    .quiz-option:hover {
      border-color: var(--teal);
      transform: translateX(2px);
    }

    .quiz-option-bullet {
      flex-shrink: 0;
      width: 1.1rem;
      height: 1.1rem;
      border: 1.5px solid var(--line);
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color 0.15s ease, background 0.15s ease;
    }

    .quiz-option:hover .quiz-option-bullet {
      border-color: var(--teal);
    }

    .quiz-footer {
      display: flex;
      gap: 0.5rem;
      margin-top: 1.25rem;
    }

    .quiz-secondary-btn {
      padding: 0.5rem 0.95rem;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--charcoal-soft);
      background: rgba(0, 0, 0, 0.06);
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: background 0.15s ease;
    }

    [data-theme="dark"] .quiz-secondary-btn {
      background: rgba(255, 255, 255, 0.1);
    }

    .quiz-secondary-btn:hover {
      background: rgba(0, 0, 0, 0.12);
    }

    /* Results page */
    .quiz-results {
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
    }

    .quiz-result {
      display: flex;
      gap: 0.85rem;
      padding: 0.95rem 1rem;
      background: rgba(255, 255, 255, 0.6);
      border: 1.5px solid var(--line);
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: border-color 0.15s ease, transform 0.12s ease;
    }

    [data-theme="dark"] .quiz-result {
      background: rgba(40, 48, 56, 0.6);
    }

    .quiz-result:hover {
      border-color: var(--cardinal);
      transform: translateY(-1px);
    }

    .quiz-result-rank {
      flex-shrink: 0;
      width: 2rem;
      height: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: 700;
      color: #fff;
      background: var(--cardinal);
      border-radius: 999px;
    }

    .quiz-result-body {
      flex: 1;
      min-width: 0;
    }

    .quiz-result-name {
      margin: 0;
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--charcoal);
    }

    .quiz-result-reasons {
      margin: 0.2rem 0 0;
      font-size: 0.82rem;
      color: var(--muted);
      line-height: 1.4;
    }

    .quiz-result-score {
      flex-shrink: 0;
      font-size: 0.72rem;
      font-weight: 600;
      color: var(--teal);
      align-self: flex-start;
      padding: 0.2rem 0.5rem;
      background: rgba(61, 154, 140, 0.12);
      border-radius: 999px;
    }

    /* --- Resident reviews ---
       A secondary, lighter section under the explorer + preview. Deliberately
       NOT a .glass card so it reads as a continuation of the page rather than a
       competing block; a hairline rule separates it from the cards above. */
    .reviews-section {
      margin-top: 1.5rem;
      padding-top: 1.5rem;
      border-top: 1px solid var(--line);
    }

    .reviews-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 0.75rem;
      flex-wrap: wrap;
    }

    .reviews-head-text {
      min-width: 0;
    }

    .reviews-title {
      margin: 0;
      font-family: var(--font-display);
      font-size: 1.2rem;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--charcoal);
    }

    .reviews-lede {
      margin: 0.4rem 0 0;
      max-width: 42rem;
      font-size: 0.88rem;
      color: var(--muted);
    }

    /* Collapsed-by-default trigger for the add-review form (mirrors .compare-toggle). */
    .review-toggle {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      margin-top: 0.9rem;
      padding: 0.5rem 1rem;
      font-family: var(--font-ui);
      font-size: 0.84rem;
      font-weight: 600;
      color: var(--muted);
      background: rgba(61, 154, 140, 0.08);
      border: 1px solid rgba(61, 154, 140, 0.2);
      border-radius: 999px;
      cursor: pointer;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }

    .review-toggle:hover {
      color: var(--charcoal);
      border-color: var(--teal);
    }

    .review-toggle.is-on {
      color: #fff;
      background: var(--teal);
      border-color: var(--teal);
    }

    .reviews-summary {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--charcoal-soft);
      padding: 0.3rem 0.7rem;
      background: rgba(140, 21, 21, 0.08);
      border-radius: 999px;
    }

    .reviews-summary-stars {
      color: var(--cardinal);
      letter-spacing: 0.05em;
    }

    /* --- Add-a-review form --- */
    .review-form {
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
      padding: 1.1rem;
      margin-top: 0.9rem;
      background: rgba(255, 255, 255, 0.5);
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      animation: fade-up 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .review-form[hidden] {
      display: none;
    }

    [data-theme="dark"] .review-form {
      background: rgba(255, 255, 255, 0.04);
    }

    .review-form-top {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      gap: 0.85rem;
    }

    .review-field {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
    }

    .review-field--name {
      flex: 1;
      min-width: 12rem;
    }

    .review-optional {
      font-weight: 400;
      text-transform: none;
      letter-spacing: 0;
      color: var(--muted);
    }

    .review-input,
    .review-textarea {
      width: 100%;
      box-sizing: border-box;
      padding: 0.6rem 0.8rem;
      font-family: var(--font-ui);
      font-size: 0.92rem;
      color: var(--charcoal);
      background: rgba(255, 255, 255, 0.85);
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    [data-theme="dark"] .review-input,
    [data-theme="dark"] .review-textarea {
      background: rgba(255, 255, 255, 0.06);
    }

    .review-textarea {
      resize: vertical;
      min-height: 3.2rem;
      line-height: 1.45;
    }

    .review-input:focus,
    .review-textarea:focus {
      outline: none;
      border-color: var(--teal);
      box-shadow: 0 0 0 3px var(--teal-glow);
    }

    .review-anon {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      font-size: 0.88rem;
      color: var(--charcoal-soft);
      cursor: pointer;
      padding-bottom: 0.6rem;
      user-select: none;
    }

    .review-anon input {
      width: 1.05rem;
      height: 1.05rem;
      accent-color: var(--cardinal);
      cursor: pointer;
    }

    .review-stars {
      display: inline-flex;
      gap: 0.2rem;
    }

    .review-star {
      font-size: 1.5rem;
      line-height: 1;
      color: rgba(140, 21, 21, 0.25);
      background: none;
      border: none;
      padding: 0 0.05rem;
      cursor: pointer;
      transition: color 0.15s ease, transform 0.1s ease;
    }

    .review-star:hover {
      transform: scale(1.15);
    }

    .review-star.is-on {
      color: var(--cardinal);
    }

    .review-actions {
      display: flex;
      align-items: center;
      gap: 0.85rem;
      flex-wrap: wrap;
    }

    .review-submit {
      padding: 0.6rem 1.4rem;
      font-family: var(--font-ui);
      font-size: 0.9rem;
      font-weight: 600;
      color: #fff;
      background: linear-gradient(135deg, var(--cardinal) 0%, var(--cardinal-deep) 100%);
      border: none;
      border-radius: 999px;
      box-shadow: var(--shadow-cardinal);
      cursor: pointer;
      transition: transform 0.15s ease, opacity 0.15s ease;
    }

    .review-submit:hover:not(:disabled) {
      transform: translateY(-1px);
    }

    .review-submit:disabled {
      opacity: 0.55;
      cursor: not-allowed;
    }

    .review-status {
      margin: 0;
      font-size: 0.85rem;
      font-weight: 500;
    }

    .review-status.is-error {
      color: var(--cardinal);
    }

    .review-status.is-success {
      color: var(--teal);
    }

    /* --- Review list --- */
    .reviews-list {
      display: flex;
      flex-direction: column;
      gap: 0.7rem;
      margin-top: 1.1rem;
    }

    .review-card {
      padding: 1rem 1.1rem;
      background: rgba(255, 255, 255, 0.55);
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      box-shadow: var(--shadow-sm);
    }

    [data-theme="dark"] .review-card {
      background: rgba(255, 255, 255, 0.04);
    }

    .review-card-head {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      flex-wrap: wrap;
      margin-bottom: 0.5rem;
    }

    .review-card-author {
      font-weight: 600;
      font-size: 0.95rem;
      color: var(--charcoal);
    }

    .review-card-stars {
      font-size: 0.9rem;
      color: var(--cardinal);
      letter-spacing: 0.05em;
    }

    .review-card-badge {
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--teal);
      padding: 0.15rem 0.5rem;
      background: rgba(61, 154, 140, 0.12);
      border-radius: 999px;
    }

    .review-card-date {
      margin-left: auto;
      font-size: 0.78rem;
      color: var(--muted);
    }

    .review-card-body {
      margin: 0;
      font-size: 0.92rem;
      line-height: 1.55;
      color: var(--charcoal-soft);
    }

    .review-card-source {
      margin: 0.5rem 0 0;
      font-size: 0.78rem;
      font-style: italic;
      color: var(--muted);
    }

    .reviews-empty {
      padding: 1.2rem;
      text-align: center;
      font-size: 0.9rem;
      color: var(--muted);
    }

    @media (max-width: 540px) {
      .review-card-date { margin-left: 0; width: 100%; }
    }

    /* ===================== Sidebar nav groups ===================== */
    .sidebar-nav-group {
      margin: 0.65rem 0 0.1rem;
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--sidebar-text-muted);
      padding-left: 0.25rem;
    }

    /* ===================== Home view ===================== */
    .home-hero {
      padding: clamp(1.5rem, 3.5vw, 2.75rem);
    }

    .home-title {
      font-family: var(--font-display);
      font-size: clamp(1.7rem, 3.4vw, 2.6rem);
      line-height: 1.12;
      color: var(--charcoal);
      margin: 0.35rem 0 0.6rem;
    }

    .home-lede {
      font-size: clamp(0.95rem, 1.4vw, 1.08rem);
      color: var(--muted);
      max-width: 46rem;
      line-height: 1.55;
      margin: 0 0 1.5rem;
    }

    .home-intents {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 0.9rem;
    }

    .home-intent-card {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.35rem;
      text-align: left;
      padding: 1.15rem 1.2rem 1.25rem;
      border-radius: var(--radius-sm);
      border: 1px solid var(--line);
      background: var(--sidebar-btn-bg);
      cursor: pointer;
      font-family: var(--font-ui);
      transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
    }

    .home-intent-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
      border-color: var(--teal);
    }

    .home-intent-icon { font-size: 1.45rem; }

    .home-intent-title {
      font-weight: 700;
      font-size: 1.02rem;
      color: var(--charcoal);
    }

    .home-intent-sub {
      font-size: 0.85rem;
      color: var(--muted);
      line-height: 1.45;
    }

    .home-intent-arrow {
      position: absolute;
      top: 1rem;
      right: 1.1rem;
      color: var(--cardinal);
      font-weight: 700;
    }

    .home-secondary {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem 1.75rem;
      margin-top: 1.35rem;
      padding-top: 1.1rem;
      border-top: 1px solid var(--line);
    }

    .home-secondary-link {
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      font-family: var(--font-ui);
      font-size: 0.88rem;
      font-weight: 600;
      color: var(--teal);
    }

    .home-secondary-link:hover { text-decoration: underline; }

    .home-school-banner {
      margin-top: 1rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 0.9rem;
      padding: 1.1rem 1.4rem;
      border-radius: var(--radius);
      border: 1px dashed rgba(140, 21, 21, 0.35);
      background: rgba(140, 21, 21, 0.05);
    }

    [data-theme="dark"] .home-school-banner {
      background: rgba(140, 21, 21, 0.12);
    }

    .home-school-title {
      font-weight: 700;
      font-size: 1rem;
      color: var(--charcoal);
      margin: 0 0 0.15rem;
    }

    .home-school-sub {
      font-size: 0.85rem;
      color: var(--muted);
      margin: 0;
      max-width: 34rem;
    }

    .home-school-btn {
      padding: 0.65rem 1.15rem;
      border-radius: 999px;
      border: none;
      background: var(--cardinal);
      color: #fff;
      font-family: var(--font-ui);
      font-weight: 600;
      font-size: 0.88rem;
      cursor: pointer;
      box-shadow: var(--shadow-cardinal);
      transition: transform 0.16s ease;
    }

    .home-school-btn:hover { transform: translateY(-1px); }

    /* ===================== Your School (multi-school) view ===================== */
    .school-section { padding-bottom: 1.75rem; }

    .school-step { margin-top: 0.75rem; }

    .school-step-head {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-weight: 700;
      font-size: 0.98rem;
      color: var(--charcoal);
      margin: 1.4rem 0 0.6rem;
    }

    .school-step-num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.45rem;
      height: 1.45rem;
      border-radius: 50%;
      background: var(--cardinal);
      color: #fff;
      font-size: 0.8rem;
      flex: none;
    }

    .school-list {
      display: flex;
      flex-wrap: wrap;
      gap: 0.55rem;
      margin-bottom: 0.9rem;
    }

    .school-list-empty,
    .school-room-empty {
      font-size: 0.86rem;
      color: var(--muted);
      margin: 0.15rem 0;
    }

    .school-chip {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.1rem;
      padding: 0.6rem 0.95rem;
      border-radius: var(--radius-sm);
      border: 1px solid var(--line);
      background: var(--sidebar-btn-bg);
      cursor: pointer;
      font-family: var(--font-ui);
      transition: border-color 0.15s ease, transform 0.15s ease;
    }

    .school-chip:hover { border-color: var(--teal); transform: translateY(-1px); }

    .school-chip-name { font-weight: 700; font-size: 0.92rem; color: var(--charcoal); }
    .school-chip-meta { font-size: 0.76rem; color: var(--muted); }

    .school-create-fields {
      display: flex;
      flex-wrap: wrap;
      gap: 0.55rem;
    }

    .school-create-fields .review-input { flex: 1 1 220px; }

    .school-create-btn {
      padding: 0.6rem 1.1rem;
      border-radius: 999px;
      border: none;
      background: var(--cardinal);
      color: #fff;
      font-family: var(--font-ui);
      font-weight: 600;
      font-size: 0.86rem;
      cursor: pointer;
      transition: transform 0.15s ease, opacity 0.15s ease;
    }

    .school-create-btn:hover { transform: translateY(-1px); }
    .school-create-btn:disabled { opacity: 0.55; cursor: wait; }

    .school-active-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 0.6rem;
      margin-top: 0.85rem;
      padding-bottom: 0.75rem;
      border-bottom: 1px solid var(--line);
    }

    .school-active-name {
      font-family: var(--font-display);
      font-size: 1.3rem;
      color: var(--charcoal);
      margin: 0;
    }

    .school-switch-btn {
      background: none;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 0.4rem 0.9rem;
      font-family: var(--font-ui);
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--muted);
      cursor: pointer;
    }

    .school-switch-btn:hover { border-color: var(--teal); color: var(--charcoal); }

    .school-dorm-form {
      display: flex;
      flex-wrap: wrap;
      gap: 0.55rem;
    }

    .school-dorm-form .review-input { flex: 1 1 220px; max-width: 24rem; }

    .school-upload-hint { margin: -0.2rem 0 0.85rem; }

    .school-dorm-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 0.85rem;
    }

    .school-dorm-card {
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: var(--sidebar-btn-bg);
      padding: 0.95rem 1rem 1.05rem;
    }

    .school-dorm-card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.6rem;
      margin-bottom: 0.6rem;
    }

    .school-dorm-card-name {
      font-family: var(--font-ui);
      font-weight: 700;
      font-size: 1rem;
      color: var(--charcoal);
      margin: 0;
    }

    .school-upload-btn {
      flex: none;
      padding: 0.4rem 0.8rem;
      border-radius: 999px;
      border: 1px solid var(--teal);
      background: transparent;
      color: var(--teal);
      font-family: var(--font-ui);
      font-size: 0.78rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease;
    }

    .school-upload-btn:hover { background: var(--teal); color: #fff; }

    .school-room-list {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .school-room-btn {
      display: flex;
      align-items: center;
      gap: 0.65rem;
      padding: 0.4rem;
      border-radius: 10px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.4);
      cursor: pointer;
      font-family: var(--font-ui);
      text-align: left;
      transition: border-color 0.15s ease;
    }

    [data-theme="dark"] .school-room-btn { background: rgba(40, 48, 56, 0.4); }
    .school-room-btn:hover { border-color: var(--teal); }

    .school-room-thumb {
      width: 72px;
      height: 44px;
      object-fit: cover;
      border-radius: 7px;
      flex: none;
      background: var(--charcoal-soft);
    }

    .school-room-label {
      font-size: 0.84rem;
      font-weight: 600;
      color: var(--charcoal);
    }

    .school-pano-overlay[hidden] { display: none; }

    .school-pano-overlay {
      position: fixed;
      inset: 0;
      z-index: 80;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(0.75rem, 3vw, 2rem);
      background: rgba(15, 20, 24, 0.72);
      backdrop-filter: blur(6px);
    }

    .school-pano-modal {
      width: min(960px, 100%);
      background: var(--glass);
      border-radius: var(--radius);
      box-shadow: var(--shadow-lg);
      padding: 0.9rem;
    }

    .school-pano-modal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      margin-bottom: 0.6rem;
    }

    .school-pano-modal-title {
      font-family: var(--font-ui);
      font-weight: 700;
      font-size: 1rem;
      color: var(--charcoal);
      margin: 0;
      padding-left: 0.25rem;
    }

    .school-pano-close { position: static; }

    .school-pano-host {
      height: min(62vh, 540px);
      border-radius: var(--radius-sm);
      overflow: hidden;
    }

    @media (max-width: 640px) {
      .home-intents { grid-template-columns: 1fr; }
      .home-school-banner { flex-direction: column; align-items: flex-start; }
      .school-dorm-grid { grid-template-columns: 1fr; }
      .school-pano-host { height: 52vh; }
    }

    /* Room Designer: auto-save confirmation flash */
    .room3d-save-status {
      font-family: var(--font-ui);
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--teal);
      opacity: 0;
      transition: opacity 0.25s ease;
      margin-right: auto;
      padding-left: 0.6rem;
    }

    .room3d-save-status.is-visible { opacity: 1; }