*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
    html { font-family: Arial, sans-serif; font-size: 12px; line-height: 1.5; }
    body { background: #f0f0f0; min-height: 100vh; display: flex; flex-direction: column; }
    a { color: inherit; text-decoration: none; }
    a.link { color: #5a1fbf; }
    a.link:hover { text-decoration: underline; }
    img, svg { display: block; max-width: 100%; }
    button { cursor: pointer; font: inherit; }

    .topbar {
      position: fixed; top: 0; left: 0; right: 0; z-index: 50;
      display: flex; flex-direction: column;
    }

    .topbar-main {
      background: linear-gradient(to bottom, #6B21A8, #4C0F8F);
      color: white;
      height: 36px;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      padding-inline: 5%;
    }

    .topbar-logo {
      display: flex; align-items: center; height: 100%;
      padding-inline: 4px;
    }
    .topbar-logo .logo-banner {
      height: 28px;
      width: auto;
      display: block;
    }
    .topbar-logo .logo-small {
      height: 28px;
      width: auto;
      display: none;
    }

    .topbar-spacer { flex: 1; }

    .topbar-nav {
      background: #191919; color: white;
      padding: 3px 0;
      display: flex; flex-wrap: wrap; align-items: center;
      gap: 10px;
      font-size: 12px;
      padding-inline: 5%;
    }
    .topbar-nav a:hover { text-decoration: underline; }
    .topbar-nav .spacer { flex: 1; }

    .announcement-bar {
      background: #2d1060; color: #e4b4ff;
      font-size: 11px; text-align: center;
      padding: 3px 8px;
    }
    .announcement-bar a { color: #d8a0ff; text-decoration: underline; }

    .page-wrap {
      margin-top: 62px;
      display: flex; justify-content: center; flex: 1;
    }
    .page-inner {
      margin: 0 5px 25px;
      width: 100%;
      max-width: 900px;
    }

    .two-col { display: flex; gap: 10px; margin-top: 10px; }
    .col-main { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
    .col-side { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; }

    .card {
      border: 1px solid #ccc; border-radius: 5px;
      overflow: hidden; background: white;
    }
    .card-header {
      padding: 8px 10px 0;
      font-size: 14px;
    }
    .card-header b { font-size: 16px; }
    .card-body { padding: 10px; }
    .card-body p { font-size: 12px; color: #666; font-style: italic; }

    .welcome-card .card-body { padding: 10px; font-size: 12px; }
    .welcome-card .card-body p.title { font-weight: bold; font-size: 14px; color: #000; font-style: normal; margin-bottom: 4px; }

    .photos-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 4px;
      padding: 8px;
    }
    .photos-grid-side {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 4px;
      padding: 8px;
    }
    .photo-item {
      aspect-ratio: 16/9;
      background: #ddd;
      overflow: hidden;
      border-radius: 3px;
      cursor: pointer;
    }
    .photo-item img { width: 100%; height: 100%; object-fit: cover; }
    .photo-item .placeholder {
      width: 100%; height: 100%;
      display: flex; align-items: center; justify-content: center;
      color: #999; font-size: 10px; text-align: center;
      background: linear-gradient(135deg, #e8d4ff, #d4b0ff);
    }

    .empty-note { padding: 10px; font-size: 12px; color: #666; font-style: italic; }

    .featured-room-card .room-image {
      width: 100%; aspect-ratio: 16/9;
      background: linear-gradient(135deg, #6B21A8, #3b0764);
      overflow: hidden;
    }
    .featured-room-card .room-image img { width: 100%; height: 100%; object-fit: cover; }
    .featured-room-card .room-label { padding: 6px 10px; font-weight: bold; }

    .section-label {
      font-size: 11px; text-transform: uppercase;
      color: #6B21A8; font-weight: bold;
      letter-spacing: 0.5px; margin-bottom: 2px;
    }

    @media (min-width: 768px) {
      .topbar-main, .topbar-nav { padding-inline: 10%; }
      .announcement-bar { padding-inline: 10%; }
    }
    @media (min-width: 1024px) {
      .topbar-main, .topbar-nav { padding-inline: 15%; }
      .announcement-bar { padding-inline: 15%; }
    }
    @media (max-width: 600px) {
      .two-col { flex-direction: column; }
      .col-side { width: 100%; }
      .photos-grid { grid-template-columns: repeat(2, 1fr); }
      .logo-banner { display: none !important; }
      .logo-small { display: block !important; }
    }