/* ========= THEME / TOKENS ========= */
    :root{
      --bg: #071018; --bg2:#0b1622; --surface:#0f1b2a; --glass: rgba(255,255,255,.06);
      --text: #eaf1fa; --muted:#9fb2c6; --brand:#6aa7ff; --brand2:#a36bff; --accent:#00d3a7; --danger:#ff6b6b;
      --ring: 0 0 0 3px rgba(106,167,255,.25); --shadow: 0 20px 60px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.03) inset; --radius: 18px;
      
    }

    /* ========= BASE ========= */
    

    /* ========= HERO / LAYOUT ========= */
    .hero{position:relative;overflow:hidden;border-radius:24px;padding:26px;border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); box-shadow:var(--shadow)}
    .hero-inner{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
    .subtitle{color:var(--muted)}

    .grid{display:grid;grid-template-columns: 320px 1fr; gap:18px; margin-top:18px}
    @media (max-width: 980px){ .grid{grid-template-columns:1fr} }

    .card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); box-shadow:var(--shadow)}
    .card .head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.06)}

    /* ========= FILTERS ========= */
    .filters{padding:16px}
    .field{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
    .field label{font-size:.9rem;color:var(--muted)}
    .input, input[type="text"], input[type="date"], input[type="number"], select{width:100%;background:#0b1522;border:1px solid rgba(255,255,255,.12); color:var(--text); padding:12px 12px; border-radius:12px; outline:none; transition:.2s ease}
    input:focus, select:focus{border-color:var(--brand); box-shadow:var(--ring)}
    .row{display:flex;gap:10px}
    .row>*{flex:1}
    .pills{display:flex;flex-wrap:wrap;gap:8px}
    .pill{border:1px solid rgba(255,255,255,.14); padding:8px 12px;border-radius:999px; cursor:pointer; user-select:none;background:#0b1522; font-size:.92rem}
    .pill.active{border-color:transparent; background:linear-gradient(135deg, rgba(106,167,255,.25), rgba(163,107,255,.25))}
    .amenities{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
    .amenities .chk{display:flex;gap:8px;align-items:center;background:#0b1522;border:1px solid rgba(255,255,255,.12); padding:10px;border-radius:10px;cursor:pointer}
    .amenities input{accent-color:var(--brand)}

    /* ========= PRICE RANGE (Dual) ========= */
    .range-wrap{padding:6px 2px 0}
    .range-track{position:relative;height:6px;background:#243043;border-radius:999px}
    .range-fill{position:absolute;height:6px;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--brand2))}
    .dual-range{position:relative;height:38px}
    .dual-range input[type=range]{position:absolute;left:0;right:0;width:100%; pointer-events:none; -webkit-appearance:none; background:transparent; height:38px; margin:0}
    .dual-range input[type=range]::-webkit-slider-thumb{pointer-events:auto; -webkit-appearance:none; width:18px;height:18px;border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--brand2)); box-shadow:0 0 0 4px rgba(106,167,255,.25)}

    .actions{display:flex;gap:8px}
    .btn{border:0; padding:12px 14px; border-radius:12px; cursor:pointer; font-weight:700}
    .btn-outline{background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.18)}
    .btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand2)); color:white}
    .btn-danger{background: linear-gradient(135deg, var(--danger), #ff8b8b); color:white}
    .bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid rgba(255,255,255,.08);background:linear-gradient(0deg, rgba(255,255,255,.02), transparent)}
    .chip{background:#152234;border:1px solid rgba(255,255,255,.12); padding:6px 10px; border-radius:999px; font-size:.85rem}

    /* ========= RESULTS ========= */
    .results{display:grid;grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; padding:16px}
    @media (max-width: 1200px){ .results{grid-template-columns:repeat(2, minmax(0,1fr))} }
    @media (max-width: 720px){ .results{grid-template-columns:1fr} }
    .room{position:relative; overflow:hidden; border-radius:18px; border:1px solid rgba(255,255,255,.10); background:#0c1520; transition: transform .2s ease, box-shadow .2s ease}
    .room .img{position:relative; aspect-ratio: 16/11; overflow:hidden}
    .room img{width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.02)}
    .room .fav{position:absolute; right:10px; top:10px; background:rgba(0,0,0,.4); backdrop-filter: blur(4px); border:1px solid rgba(255,255,255,.2); width:38px; height:38px; border-radius:12px; display:grid; place-items:center; cursor:pointer}
    .room .badges{position:absolute; left:10px; top:10px; display:flex; gap:6px; flex-wrap:wrap}
    .badge{font-size:.8rem; padding:6px 10px; background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.2); border-radius:999px}
    .room .body{padding:12px 12px 14px}
    .title{font-weight:800; display:flex; gap:8px; align-items:center}
    .muted{color:var(--muted)}
    .stars{display:flex; gap:4px; align-items:center; font-size:14px}
    .price{display:flex; align-items:end; gap:6px}
    .price .num{font-size:1.25rem; font-weight:900}
    .price .per{font-size:.9rem; color:var(--muted)}
    .room .footer{display:flex; justify-content:space-between; align-items:center; padding:12px; border-top:1px solid rgba(255,255,255,.06)}
    .room:hover{transform: translateY(-2px); box-shadow:0 18px 30px rgba(0,0,0,.35)}
    .empty{padding:32px; text-align:center; color:var(--muted)}
    .pagination{display:flex; gap:8px; justify-content:center; padding:4px 16px 18px}
    .pagination .btn{min-width:42px}
    .toast{position:fixed; left:50%; transform:translateX(-50%); bottom:24px; padding:12px 16px; background:linear-gradient(135deg, rgba(106,167,255,.95), rgba(163,107,255,.95)); color:white; border-radius:12px; box-shadow:var(--shadow); z-index:200}