:root{
    --bg:#15120D; --surface:#1D1911; --surface-2:#251F15; --hairline:#382F1E;
    --gold:#C9A15A; --gold-dim:#8C6D3F; --text:#F3EEE2; --text-dim:#AFA48D; --text-faint:#7A6F5A;
    --green:#7CA07E; --amber:#D9A441; --red:#C1584A;
    --serif:'Cormorant Garamond', serif; --sans:'Inter', sans-serif; --mono:'JetBrains Mono', monospace;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{ background:var(--bg); color:var(--text); font-family:var(--sans); min-height:100vh; }

  #login{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem; }
  .login-card{ width:380px; background:var(--surface); border:0.5px solid var(--hairline); border-radius:4px; padding:2.75rem 2.5rem 2.25rem; }
  .brand-mark{ font-family:var(--serif); font-size:14px; letter-spacing:0.28em; color:var(--gold); text-align:center; margin-bottom:0.4rem; }
  .brand-sub{ font-size:11px; letter-spacing:0.14em; color:var(--text-faint); text-align:center; text-transform:uppercase; margin-bottom:2.25rem; }
  .field{ margin-bottom:1.1rem; }
  .field label{ display:block; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-dim); margin-bottom:0.4rem; }
  .field input, .field select, .field textarea{ width:100%; background:var(--surface-2); border:0.5px solid var(--hairline); border-radius:3px; padding:0.65rem 0.75rem; color:var(--text); font-family:var(--sans); font-size:14px; outline:none; }
  .field input:focus{ border-color:var(--gold-dim); }
  #login-btn{ width:100%; margin-top:0.75rem; background:var(--gold); color:#1A1509; border:none; border-radius:3px; padding:0.75rem; font-family:var(--sans); font-weight:600; font-size:13px; cursor:pointer; }
  #login-btn:hover{ background:#D9B36C; }
  .login-foot{ text-align:center; margin-top:1.5rem; font-size:11px; color:var(--text-faint); }

  #app{ display:none; min-height:100vh; }
  .shell{ display:flex; min-height:100vh; }
  .sidebar{ width:230px; background:var(--surface); border-right:0.5px solid var(--hairline); padding:1.5rem 1.1rem; flex-shrink:0; }
  .sidebar .brand-mark{ text-align:left; margin-bottom:1.5rem; font-size:13px; }
  .nav-label{ font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-faint); margin:1.2rem 0 0.5rem; }
  .prop-item{ display:flex; align-items:flex-start; justify-content:space-between; gap:6px; padding:0.55rem 0.6rem; border-radius:3px; font-size:12.5px; line-height:1.35; color:var(--text-dim); cursor:pointer; margin-bottom:0.2rem; }
  .prop-item span:first-child{ word-break:break-word; }
  .prop-item .dot{ margin-top:5px; }
  .prop-item.active{ background:var(--surface-2); color:var(--text); }
  .prop-item .dot{ width:6px; height:6px; border-radius:50%; flex-shrink:0; }
  .prop-add{ width:100%; background:none; border:0.5px dashed var(--hairline); color:var(--text-faint); font-size:11.5px; padding:0.4rem; border-radius:3px; cursor:pointer; margin-top:0.3rem; }
  .prop-add:hover{ color:var(--gold); border-color:var(--gold-dim); }
  .nav-item{ padding:0.5rem 0.6rem; border-radius:3px; font-size:13px; color:var(--text-dim); cursor:pointer; margin-bottom:0.15rem; }
  .nav-item.active{ background:var(--surface-2); color:var(--gold); }
  .nav-item:hover:not(.active){ color:var(--text); }

  .main{ flex:1; padding:2rem 2.5rem; max-width:1100px; }
  .topbar{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1.75rem; }
  .topbar h1{ font-family:var(--serif); font-weight:600; font-size:26px; }
  .topbar .sub{ font-size:12px; color:var(--text-faint); margin-top:0.3rem; }
  .user-chip{ font-size:12px; color:var(--text-dim); border:0.5px solid var(--hairline); border-radius:20px; padding:0.4rem 0.9rem; white-space:nowrap; }

  .hero{ display:flex; gap:2.2rem; align-items:center; background:var(--surface); border:0.5px solid var(--hairline); border-radius:6px; padding:1.6rem 2rem; margin-bottom:1.1rem; }
  .gauge-num{ font-family:var(--serif); font-size:15px; fill:var(--gold); font-weight:600; }
  .gauge-lbl{ font-size:9px; fill:var(--text-faint); letter-spacing:0.08em; }
  .hero-mid{ flex:1; }
  .hero-mid .k{ font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-faint); }
  .hero-mid .v{ font-family:var(--serif); font-size:22px; color:var(--text); margin:0.15rem 0 0.9rem; }
  .hero-mid .v .delta{ font-family:var(--sans); font-size:12px; margin-left:0.5rem; }
  .delta-up{ color:var(--green); } .delta-down{ color:var(--red); } .delta-flat{ color:var(--text-faint); }
  .status-pill{ display:inline-flex; align-items:center; gap:6px; font-size:11px; padding:0.3rem 0.7rem; border-radius:20px; }
  .status-pill .dot{ width:6px; height:6px; border-radius:50%; }
  .pill-green{ background:rgba(124,160,126,0.12); color:var(--green); border:0.5px solid rgba(124,160,126,0.3); }
  .pill-amber{ background:rgba(217,164,65,0.12); color:var(--amber); border:0.5px solid rgba(217,164,65,0.3); }

  .grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:1rem; margin-bottom:1.1rem; }
  .tile{ background:var(--surface); border:0.5px solid var(--hairline); border-radius:6px; padding:1.1rem 1.2rem; }
  .tile .k{ font-size:10.5px; color:var(--text-faint); letter-spacing:0.03em; text-transform:uppercase; }
  .tile .v{ font-family:var(--serif); font-size:23px; color:var(--text); margin:0.35rem 0; }
  .tile .hint{ font-size:10.5px; color:var(--text-faint); }

  .panel{ background:var(--surface); border:0.5px solid var(--hairline); border-radius:6px; padding:1.4rem 1.6rem; margin-bottom:1.1rem; }
  .panel h3{ font-family:var(--serif); font-size:16px; font-weight:600; margin-bottom:0.9rem; }
  .panel-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:0.9rem; }
  .legend{ font-size:11px; color:var(--text-faint); display:flex; gap:1rem; }
  .legend .sw{ width:10px; height:2px; display:inline-block; }

  .form-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:0.7rem; margin-bottom:0.9rem; }
  .field2 label{ display:block; font-size:10px; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-faint); margin-bottom:0.3rem; }
  .field2 input, .field2 select, .field2 textarea{ width:100%; background:var(--surface-2); border:0.5px solid var(--hairline); border-radius:3px; padding:0.5rem 0.6rem; color:var(--text); font-family:var(--sans); font-size:13px; outline:none; }
  .field2 input:focus{ border-color:var(--gold-dim); }
  .btn{ background:var(--gold); color:#1A1509; border:none; border-radius:3px; padding:0.55rem 1.1rem; font-family:var(--sans); font-weight:600; font-size:12.5px; cursor:pointer; }
  .btn:hover{ background:#D9B36C; }
  .btn-ghost{ background:none; border:0.5px solid var(--hairline); color:var(--text-dim); padding:0.35rem 0.7rem; border-radius:3px; font-size:11px; cursor:pointer; }
  .btn-ghost:hover{ color:var(--red); border-color:var(--red); }
  .saved-flash{ font-size:11px; color:var(--green); margin-left:0.6rem; opacity:0; transition:opacity 0.3s; }

  table{ width:100%; border-collapse:collapse; font-size:12.5px; }
  th{ text-align:left; color:var(--text-faint); font-weight:500; padding:0.5rem 0.6rem; border-bottom:0.5px solid var(--hairline); font-size:10.5px; text-transform:uppercase; }
  td{ padding:0.55rem 0.6rem; border-bottom:0.5px solid var(--hairline); color:var(--text-dim); }
  tr:last-child td{ border-bottom:none; }
  .empty{ font-size:12px; color:var(--text-faint); font-style:italic; padding:0.5rem 0; }

  .upload-zone{ border:1px dashed var(--hairline); border-radius:6px; padding:1.1rem; text-align:center; margin-bottom:1rem; background:var(--surface-2); }
  .upload-zone p{ font-size:12px; color:var(--text-faint); margin-top:0.4rem; }
  .ocr-preview{ display:flex; gap:1rem; align-items:flex-start; margin-top:0.9rem; }
  .ocr-preview img{ max-width:200px; border-radius:4px; border:0.5px solid var(--hairline); }
  .ocr-status{ font-size:12px; color:var(--text-dim); }
  .ocr-confirm{ background:var(--surface-2); border:0.5px solid var(--hairline); border-radius:4px; padding:0.9rem; margin-top:0.7rem; }
  .ocr-confirm .row{ display:flex; justify-content:space-between; align-items:center; padding:0.3rem 0; font-size:12.5px; }
  .ocr-confirm input{ width:90px; background:var(--surface); border:0.5px solid var(--hairline); color:var(--gold); border-radius:3px; padding:0.3rem 0.5rem; font-family:var(--mono); text-align:right; }
  .badge-beta{ font-size:9.5px; text-transform:uppercase; background:rgba(201,161,90,0.15); color:var(--gold); padding:0.15rem 0.5rem; border-radius:10px; margin-left:0.5rem; }

  .cat-bar-row{ display:flex; align-items:center; gap:0.7rem; margin-bottom:0.55rem; font-size:12px; }
  .cat-bar-row .lbl{ width:110px; color:var(--text-dim); flex-shrink:0; }
  .cat-bar-track{ flex:1; height:6px; background:var(--surface-2); border-radius:3px; overflow:hidden; }
  .cat-bar-fill{ height:100%; background:var(--gold); border-radius:3px; }
  .cat-bar-val{ width:32px; text-align:right; color:var(--text); font-family:var(--mono); font-size:11.5px; flex-shrink:0; }

  .recon-note{ font-size:11.5px; padding:0.5rem 0.8rem; border-radius:4px; margin-bottom:1rem; }
  .recon-ok{ background:rgba(124,160,126,0.1); color:var(--green); border:0.5px solid rgba(124,160,126,0.3); }
  .recon-warn{ background:rgba(217,164,65,0.1); color:var(--amber); border:0.5px solid rgba(217,164,65,0.3); }
  .score-chip{ font-family:var(--mono); font-size:11px; padding:0.15rem 0.4rem; border-radius:3px; }
  .score-hi{ color:var(--green); } .score-mid{ color:var(--amber); } .score-lo{ color:var(--red); }
  .split-card{ cursor:pointer; transition:border-color 0.15s; }
  .split-card:hover{ border-color:var(--gold-dim); }
  .split-card.good{ border-left:3px solid var(--green); }
  .split-card.bad{ border-left:3px solid var(--red); }
  .split-card .v.good-v{ color:var(--green); }
  .split-card .v.bad-v{ color:var(--red); }
  .msg-cat-label{ font-family:var(--serif); font-size:14px; color:var(--gold); margin:1.1rem 0 0.6rem; }
  .msg-cat-label:first-child{ margin-top:0; }
  .msg-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:0.8rem; }
  .msg-card{ background:var(--surface-2); border:0.5px solid var(--hairline); border-radius:6px; padding:1rem 1.1rem; cursor:pointer; transition:border-color 0.15s; }
  .msg-card:hover{ border-color:var(--gold-dim); }
  .msg-card .msg-title{ font-family:var(--serif); font-size:14px; color:var(--text); margin-bottom:0.4rem; }
  .msg-card .msg-preview{ font-size:11px; color:var(--text-faint); line-height:1.4; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .msg-card .msg-open{ font-size:10.5px; color:var(--gold-dim); margin-top:0.5rem; }
  .paste-tile{ cursor:text; outline:none; transition:border-color 0.15s, background 0.15s; }
  .paste-tile:focus{ border-color:var(--gold); background:var(--surface-2); }
  .paste-hint{ font-size:10.5px; color:var(--gold-dim); border:0.5px dashed var(--hairline); border-radius:4px; padding:0.5rem; text-align:center; margin-bottom:0.5rem; }
  .paste-tile:focus .paste-hint{ border-color:var(--gold-dim); color:var(--gold); }

  /* ---------- MOBILE RESPONSIVE ---------- */
  .mobile-topbar{ display:none; }
  .sidebar-backdrop{ display:none; }
  @media (max-width: 860px){
    .mobile-topbar{
      display:flex; align-items:center; justify-content:space-between;
      padding:0.85rem 1.1rem; background:var(--surface); border-bottom:0.5px solid var(--hairline);
      position:sticky; top:0; z-index:40;
    }
    .hamburger{ background:none; border:0.5px solid var(--hairline); color:var(--text); border-radius:4px; padding:0.4rem 0.75rem; font-size:16px; cursor:pointer; line-height:1; }
    .shell{ flex-direction:column; }
    .sidebar{
      position:fixed; top:0; left:-270px; width:250px; height:100vh; z-index:50;
      transition:left 0.2s ease; overflow-y:auto; box-shadow:2px 0 24px rgba(0,0,0,0.5);
    }
    .sidebar.open{ left:0; }
    .sidebar-backdrop.open{ display:block; position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:45; }
    .main{ padding:1.1rem 1rem; max-width:100%; }
    .topbar{ flex-direction:column; align-items:flex-start; gap:0.7rem; }
    .topbar h1{ font-size:21px; }
    .hero{ flex-direction:column; align-items:flex-start; gap:1rem; padding:1.3rem 1.4rem; }
    .grid{ grid-template-columns:1fr 1fr; }
    .form-grid{ grid-template-columns:1fr; }
    .msg-grid{ grid-template-columns:1fr; }
    table{ min-width:560px; }
    table td:first-child, table th:first-child{
      position:sticky; left:0; background:var(--surface); z-index:2;
    }
    div[id*="Table"], #ov-recent, #checklistBody, #coachGuestList{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .login-card{ width:100%; max-width:360px; padding:2.25rem 1.75rem; }
  }
  @media (max-width: 480px){
    .grid{ grid-template-columns:1fr; }
    .kpi-daytable{ font-size:10px; min-width:480px; }
    .kpi-daytable th, .kpi-daytable td{ padding:0.3rem 0.35rem; }
    .kpi-daytable td:first-child, .kpi-daytable th:first-child{ padding-right:0.5rem; white-space:nowrap; }
  }

  /* ---------- CUSTOM DATE PICKER ---------- */
  .date-picker-input{ cursor:pointer; background-image:none; }
  .date-picker-input::placeholder{ color:var(--text-faint); }
  .date-cal-popup{
    background:var(--surface); border:0.5px solid var(--hairline); border-radius:6px;
    padding:0.8rem; width:230px; z-index:100; box-shadow:0 8px 30px rgba(0,0,0,0.5);
  }
  .cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:0.6rem; font-family:var(--serif); font-size:13px; color:var(--text); }
  .cal-nav{ background:none; border:0.5px solid var(--hairline); color:var(--text-dim); border-radius:3px; width:24px; height:24px; cursor:pointer; font-size:13px; }
  .cal-nav:hover{ border-color:var(--gold-dim); color:var(--gold); }
  .cal-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; text-align:center; }
  .cal-dow span{ font-size:9.5px; color:var(--text-faint); padding:2px 0; }
  .cal-day{ font-size:11.5px; color:var(--text-dim); padding:5px 0; border-radius:3px; cursor:pointer; }
  .cal-day:hover{ background:var(--surface-2); color:var(--text); }
  .cal-day.sel{ background:var(--gold); color:#1A1509; font-weight:600; }

  /* ---------- Booking.com Room List — elevated card grid ---------- */
  .room-card-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:1rem; }
  .room-card{
    background:linear-gradient(160deg, var(--surface-2) 0%, var(--surface) 100%);
    border:0.5px solid var(--hairline); border-radius:10px; padding:1.1rem 1.2rem;
    box-shadow:0 6px 16px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.03) inset;
    transform:translateZ(0); transition:transform 0.15s, box-shadow 0.15s;
    position:relative; overflow:hidden;
  }
  .room-card::before{
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg, var(--gold), var(--gold-dim));
  }
  .room-card:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,0.45); }
  .room-card .rc-no{ font-family:var(--serif); font-size:20px; color:var(--text); }
  .room-card .rc-type{ font-size:11.5px; color:var(--text-dim); margin:0.15rem 0 0.7rem; }
  .room-card .rc-tick{ display:flex; align-items:center; gap:6px; font-size:10.5px; color:var(--text-faint); margin-bottom:3px; }
  .room-card .rc-tick.done{ color:var(--green); }
  .room-card .rc-window{ position:absolute; top:0.9rem; right:1rem; font-size:9.5px; color:var(--gold-dim); text-transform:uppercase; letter-spacing:0.04em; }

  /* ---------- PMS-style calendar grid ---------- */
  .pms-grid{ display:grid; overflow-x:auto; border:0.5px solid var(--hairline); border-radius:6px; }
  .pms-row{ display:grid; grid-template-columns:150px repeat(14, minmax(74px,1fr)); border-bottom:0.5px solid var(--hairline); }
  .pms-row:last-child{ border-bottom:none; }
  .pms-row.head{ background:var(--surface-2); position:sticky; top:0; z-index:2; }
  .pms-cell{ padding:0.45rem 0.4rem; border-right:0.5px solid var(--hairline); font-size:10.5px; color:var(--text-faint); text-align:center; }
  .pms-cell:last-child{ border-right:none; }
  .pms-cell.roomlabel{ text-align:left; background:var(--surface-2); position:sticky; left:0; z-index:1; border-right:0.5px solid var(--gold-dim); }
  .pms-cell.roomlabel .rn{ color:var(--text); font-size:12px; font-weight:600; }
  .pms-cell.roomlabel .rt{ color:var(--text-faint); font-size:9.5px; }
  .pms-cell.daycell{ position:relative; cursor:pointer; min-height:38px; padding:0.3rem; }
  .pms-cell.daycell:hover{ background:var(--surface-2); }
  .pms-cell.today{ background:rgba(201,161,90,0.08); }
  .pms-bar{
    background:linear-gradient(135deg, var(--gold), var(--gold-dim)); color:#1A1509;
    border-radius:4px; font-size:9.5px; font-weight:600; padding:3px 5px; overflow:hidden;
    white-space:nowrap; text-overflow:ellipsis; box-shadow:0 2px 4px rgba(0,0,0,0.3);
  }
  .cal-assign-floating{
    position:fixed !important; top:50%; left:50%; transform:translate(-50%,-50%);
    z-index:90; width:440px; max-width:92vw; max-height:85vh; overflow-y:auto;
    box-shadow:0 24px 70px rgba(0,0,0,0.65);
  }
  #calAssignBackdrop.open{ z-index:85; }

  .section{ display:none; }
  .section.active{ display:block; }