@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --paper:#f5f6f0; --ink:#15201d; --muted:#71807a; --line:#dce1d8; --card:#fffefa; --green:#1b6b54; --mint:#dceee5; --yellow:#f1c65d; --coral:#d9644e; --shadow:0 20px 55px rgba(37,57,47,.08); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope, "PingFang SC", sans-serif; }
body:before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.4; background-image:linear-gradient(rgba(21,32,29,.035) 1px, transparent 1px),linear-gradient(90deg, rgba(21,32,29,.035) 1px, transparent 1px); background-size:34px 34px; mask-image:linear-gradient(to bottom, #000, transparent 85%); }
button, input, select { font:inherit; }
button, select { cursor:pointer; }
.shell { position:relative; max-width:1180px; margin:0 auto; padding:32px 30px 60px; }
.masthead { padding:8px 0 30px; border-bottom:1px solid var(--line); }
.brand-line, .section-label, .update-stamp, .control span, .footer strong { font-family:"DM Mono", monospace; letter-spacing:.08em; text-transform:uppercase; font-size:11px; }
.brand-line { display:flex; align-items:center; gap:12px; color:var(--green); font-weight:500; }
.live-dot { width:8px; height:8px; background:var(--yellow); border-radius:50%; box-shadow:0 0 0 5px rgba(241,198,93,.18); }
.rule { width:42px; height:1px; background:var(--line); }
.headline-row { display:flex; justify-content:space-between; align-items:end; gap:32px; padding:58px 0 42px; }
.kicker { color:var(--coral); font:500 12px "DM Mono", monospace; letter-spacing:.1em; margin:0 0 16px; }
.headline-row h1 { font-size:clamp(58px,9vw,112px); line-height:.85; letter-spacing:-.08em; margin:0; font-weight:800; }
.accent { color:var(--coral); }
.intro { max-width:490px; margin:28px 0 0; color:var(--muted); font-size:15px; line-height:1.8; }
.update-stamp { min-width:210px; padding:18px; border-left:2px solid var(--yellow); color:var(--muted); }
.update-stamp strong { display:block; color:var(--ink); font:500 14px "DM Mono", monospace; margin:8px 0; }
.update-stamp small { font:11px "DM Mono", monospace; text-transform:none; letter-spacing:0; }
.summary-strip { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.summary-item { background:rgba(255,254,250,.75); padding:18px 20px; }
.summary-item strong { display:block; font-size:28px; letter-spacing:-.06em; }
.summary-item span { display:block; color:var(--muted); font-size:12px; margin-top:5px; }

.brand-tabs { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:8px; margin:30px 0 28px; }
.brand-tab { min-height:68px; color:var(--muted); border:1px solid var(--line); background:rgba(255,254,250,.62); padding:12px 14px; font-weight:700; font-size:14px; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; align-items:center; column-gap:8px; text-align:left; transition:color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.brand-tab:hover { color:var(--ink); background:var(--card); border-color:#bbc8be; box-shadow:0 8px 20px rgba(37,57,47,.06); }
.brand-tab:focus-visible, .property-tab:focus-visible { outline:2px solid var(--yellow); outline-offset:2px; }
.brand-tab.active { color:#fff; border-color:var(--green); background:var(--green); }
.brand-tab .tab-num { font:500 10px "DM Mono", monospace; color:var(--coral); }
.brand-tab.active .tab-num { color:var(--yellow); }
.brand-tab small { grid-column:2; display:block; font:10px "DM Mono", monospace; margin-top:3px; color:var(--muted); font-weight:400; }
.brand-tab.active small { color:#dceee5; }

.control-deck { background:var(--ink); color:#f4f7ef; margin:30px 0; padding:28px; box-shadow:var(--shadow); }
.control-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.section-label { color:var(--green); }
.control-deck .section-label { color:var(--yellow); }
.control-heading h2 { font-size:24px; letter-spacing:-.04em; margin:8px 0 22px; }
.ghost-button { background:transparent; border:1px solid rgba(255,255,255,.25); color:#fff; padding:9px 13px; font-size:12px; }
.ghost-button span { color:var(--yellow); margin-left:8px; }
.controls { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; }
.control { display:flex; flex-direction:column; gap:8px; min-width:0; }
.control-property, .control-search { grid-column:span 2; }
.control span { color:#a8bab0; font-size:10px; }
.control input, .control select { width:100%; color:#fff; background:#24322e; border:1px solid #3b4c45; padding:12px 13px; outline:none; border-radius:0; }
.control input:focus, .control select:focus { border-color:var(--yellow); }
.control input::placeholder { color:#7f9389; }
.filter-note { display:flex; justify-content:space-between; margin-top:18px; font-size:12px; }
.muted { color:#92a39a; }

.listing-section { min-height:380px; }
.listing-header { display:flex; justify-content:space-between; align-items:end; gap:20px; margin:10px 0 18px; }
.listing-header h2 { font-size:32px; letter-spacing:-.06em; margin:0; }
.listing-header p { color:var(--muted); margin:0; font-size:13px; }
.booking-link { color:var(--green); border-bottom:1px solid var(--green); padding-bottom:3px; font-size:12px; font-weight:700; text-decoration:none; }
.table-wrap { overflow-x:auto; background:var(--card); border:1px solid var(--line); }
.listing-table { width:100%; min-width:730px; border-collapse:collapse; }
.listing-table th { padding:13px 17px; text-align:left; color:var(--muted); font:10px "DM Mono", monospace; letter-spacing:.06em; text-transform:uppercase; background:#eef2e9; }
.listing-table th button { border:0; background:none; color:inherit; font:inherit; padding:0; }
.listing-table td { padding:17px; border-top:1px solid var(--line); font-size:13px; }
.listing-table tbody tr:hover { background:#f7faf2; }
.room-link { color:inherit; text-decoration:none; }
.room-link:hover .room-name { color:var(--green); text-decoration:underline; text-underline-offset:4px; }
.room-name { font-weight:800; }
.room-type { color:var(--muted); font-size:11px; margin-top:3px; }
.price { font-weight:800; }
.total { color:var(--muted); }
.status { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; }
.status:before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.status.available { color:var(--green); }
.status.waitlist { color:var(--coral); }
.status.soldout { color:#999; }
.status.unknown { color:var(--muted); }
.empty { padding:50px; text-align:center; color:var(--muted); }
.filter-guidance { min-height:170px; display:flex; align-items:center; gap:22px; padding:30px; border:1px solid var(--line); background:rgba(255,254,250,.7); }
.guidance-number { flex:0 0 auto; color:var(--green); font:800 clamp(42px,6vw,72px)/.85 "Manrope", sans-serif; letter-spacing:-.09em; }
.filter-guidance strong { font-size:18px; letter-spacing:-.03em; }
.filter-guidance p { max-width:530px; margin:8px 0 0; color:var(--muted); font-size:13px; line-height:1.7; }

.footer { display:flex; justify-content:space-between; gap:24px; border-top:1px solid var(--line); margin-top:46px; padding-top:23px; color:var(--muted); font-size:12px; }
.footer strong { color:var(--ink); display:block; margin-bottom:8px; }
.agent-input { display:flex; border:1px solid var(--line); }
.agent-input input { width:110px; border:0; background:transparent; padding:8px; outline:0; color:var(--ink); }
.agent-input button { border:0; background:var(--green); color:#fff; padding:0 11px; font-size:11px; }

@media (max-width:760px) {
  .shell { padding:24px 17px 40px; }
  .headline-row { display:block; padding:44px 0 32px; }
  .headline-row h1 { font-size:70px; }
  .update-stamp { margin-top:32px; }
  .summary-strip { grid-template-columns:repeat(2,1fr); }
  .summary-item strong { font-size:24px; }
  .control-deck { padding:20px; }
  .controls { grid-template-columns:1fr 1fr; }
  .control-region, .control-property, .control-search { grid-column:span 2; }
  .listing-header { align-items:start; flex-direction:column; }
  .footer { flex-direction:column; }
  .brand-line { flex-wrap:wrap; gap:8px; }
  .brand-tabs { grid-template-columns:repeat(2, minmax(0,1fr)); gap:7px; }
  .brand-tab { min-height:62px; font-size:13px; padding:10px 12px; }
}
@media (max-width:420px) {
  .controls { grid-template-columns:1fr; }
  .control-region, .control-property, .control-search { grid-column:auto; }
  .headline-row h1 { font-size:60px; }
  .filter-note { flex-direction:column; gap:6px; }
}
