:root{
    --bg:#071324;
    --bg-soft:#0f2340;
    --panel:#112949;
    --panel-soft:#17355f;
    --panel-strong:#0f2b50;
    --line:rgba(255,255,255,.10);
    --line-strong:rgba(255,255,255,.18);
    --text:#f7fbff;
    --text-soft:#d8e8ff;
    --muted:#a9bfdc;
    --accent:#0d6efd;
    --accent-2:#00c2ff;
    --accent-3:#ff8a00;
    --success:#10b981;
    --warning:#ff9f1c;
    --danger:#ef4444;
    --info:#3b82f6;
    --shadow:0 22px 48px rgba(2,10,28,.34);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    background:
        radial-gradient(circle at 0% 0%, rgba(13,110,253,.35), transparent 28%),
        radial-gradient(circle at 100% 10%, rgba(255,138,0,.20), transparent 24%),
        radial-gradient(circle at 50% 100%, rgba(0,194,255,.22), transparent 28%),
        linear-gradient(160deg, #071324 0%, #0c1f39 45%, #11294a 100%);
    color:var(--text);
    min-height:100vh;
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
a{text-decoration:none}
img{max-width:100%;display:block}
.app-shell{display:grid;grid-template-columns:300px 1fr;min-height:100vh}
.sidebar{
    background:linear-gradient(180deg, rgba(5,18,34,.96), rgba(14,39,70,.94));
    border-right:1px solid var(--line);
    padding:24px 18px;
    position:sticky;
    top:0;
    height:100vh;
    overflow:auto;
    backdrop-filter:blur(18px);
}
.brand-box{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
    border:1px solid var(--line);
    background:linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    border-radius:28px;
    margin-bottom:22px;
    box-shadow:var(--shadow);
    min-height:132px;
}
.brand-logo{
    max-height:88px;
    width:auto;
    object-fit:contain;
    filter:drop-shadow(0 10px 24px rgba(0,0,0,.25));
}
.nav-section{
    margin-top:18px;
    margin-bottom:10px;
    color:#d8e9ff;
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.12em;
    padding-left:10px;
    display:flex;
    align-items:center;
    gap:8px;
}
.nav-section-icon{color:#ffd166}
.sidebar .nav-link{
    color:#eef5ff;
    border-radius:18px;
    padding:12px 14px;
    font-weight:700;
    transition:all .2s ease;
    display:flex;
    align-items:center;
    gap:12px;
}
.nav-icon{
    width:34px;
    height:34px;
    border-radius:12px;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.08);
    color:#fff;
    flex:0 0 auto;
    font-size:1rem;
}
.sidebar .nav-link:hover,
.sidebar .nav-link.active{
    background:linear-gradient(135deg, rgba(13,110,253,.62), rgba(255,138,0,.28));
    color:#fff;
    transform:translateX(4px);
    box-shadow:0 14px 28px rgba(3,10,28,.18);
}
.sidebar .nav-link.active .nav-icon,
.sidebar .nav-link:hover .nav-icon{
    background:rgba(255,255,255,.16);
}
.main-content{padding:28px 28px 18px}
.topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
    gap:18px;
    padding:18px 22px;
    border-radius:26px;
    background:linear-gradient(135deg, rgba(15,45,82,.92), rgba(18,64,115,.78));
    border:1px solid var(--line);
    box-shadow:var(--shadow);
}
.topbar-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.page-title{font-size:1.92rem;font-weight:800}
.topbar-subtitle{color:var(--text-soft);font-size:.92rem;margin-top:4px}
.user-chip{
    display:flex;
    align-items:center;
    gap:12px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    padding:10px 14px;
}
.user-chip-icon{
    width:42px;
    height:42px;
    border-radius:14px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg, rgba(255,138,0,.32), rgba(13,110,253,.32));
    font-size:1.2rem;
}
.user-chip-name{font-weight:800;line-height:1.15}
.user-chip-role{color:var(--text-soft);font-size:.86rem}
.text-muted,.form-text{color:var(--muted)!important}
.panel-card,.card{
    background:linear-gradient(180deg, rgba(16,41,73,.96), rgba(15,35,62,.94));
    border:1px solid var(--line);
    border-radius:26px;
    box-shadow:var(--shadow);
    overflow:hidden;
}
.card .card-header{
    border-bottom:1px solid var(--line);
    background:linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    color:#fff;
    padding:18px 22px;
}
.card .card-body{padding:22px}
.table{
    --bs-table-bg:transparent;
    --bs-table-color:var(--text);
    --bs-table-border-color:rgba(255,255,255,.08);
    margin-bottom:0;
}
.table thead th{
    color:#d9e8ff;
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    border-bottom-width:1px;
}
.table tbody tr:hover td{background:rgba(255,255,255,.03)}
.form-label{font-weight:700;color:#eef5ff;margin-bottom:.45rem}
.form-control,.form-select,.form-check-input{
    background:rgba(7,18,34,.72);
    border-color:rgba(255,255,255,.12);
    color:var(--text);
    border-radius:16px;
    min-height:48px;
}
.form-control::placeholder{color:#8aa8cc}
.form-control:focus,.form-select:focus{
    background:rgba(7,18,34,.86);
    color:#fff;
    border-color:rgba(0,194,255,.45);
    box-shadow:0 0 0 .2rem rgba(0,194,255,.14);
}
textarea.form-control{min-height:120px}
.form-check-input{min-height:auto;width:1.15rem;height:1.15rem}
.form-check-input:checked{background-color:var(--accent);border-color:var(--accent)}
.btn{
    border-radius:14px;
    font-weight:700;
    padding:.72rem 1rem;
    border-width:1px;
}
.btn-primary{
    background:linear-gradient(135deg, #0d6efd, #00b2ff);
    border-color:transparent;
    box-shadow:0 12px 24px rgba(13,110,253,.28);
}
.btn-primary:hover{filter:brightness(1.06)}
.btn-success{
    background:linear-gradient(135deg, #14b86f, #22c55e);
    border-color:transparent;
    color:#062516;
}
.btn-warning{
    background:linear-gradient(135deg, #ff8a00, #ffb020);
    border-color:transparent;
    color:#361d00;
}
.btn-danger{
    background:linear-gradient(135deg, #ef4444, #ff6a5f);
    border-color:transparent;
}
.btn-outline-secondary,.btn-outline-light{
    color:#f4f9ff;
    border-color:rgba(255,255,255,.16);
    background:rgba(255,255,255,.03);
}
.btn-outline-secondary:hover,.btn-outline-light:hover{
    background:rgba(255,255,255,.10);
    border-color:rgba(255,255,255,.32);
    color:#fff;
}
.alert{
    border:1px solid rgba(255,255,255,.12);
    border-radius:18px;
}
.badge.text-bg-success{background:rgba(16,185,129,.20)!important;color:#d7fff0!important}
.badge.text-bg-warning{background:rgba(255,159,28,.20)!important;color:#ffe2ad!important}
.badge.text-bg-danger{background:rgba(239,68,68,.22)!important;color:#ffd8d8!important}
.badge.text-bg-info{background:rgba(59,130,246,.20)!important;color:#dbe9ff!important}
.badge.text-bg-secondary{background:rgba(255,255,255,.12)!important;color:#eef4ff!important}
.metric{
    padding:20px;
    border-radius:26px;
    height:100%;
    box-shadow:var(--shadow);
    position:relative;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.10);
}
.metric::after{
    content:"";
    position:absolute;
    inset:auto -18px -44px auto;
    width:120px;
    height:120px;
    background:radial-gradient(circle, rgba(255,255,255,.18), transparent 65%);
}
.metric .label{
    color:#eef6ff;
    font-size:.88rem;
    font-weight:700;
    line-height:1.25;
    max-width:120px;
}
.metric .value{
    font-size:1.85rem;
    font-weight:800;
    margin-top:10px;
    line-height:1.15;
    color:#fff;
}
.metric-icon-wrap{
    width:62px;
    height:62px;
    border-radius:18px;
    background:rgba(255,255,255,.14);
    display:grid;
    place-items:center;
    margin-bottom:14px;
}
.metric-icon{
    width:38px;
    height:38px;
    object-fit:contain;
}
.metric-rooms{background:linear-gradient(135deg, #0d6efd, #2a7dff)}
.metric-occupied{background:linear-gradient(135deg, #ef4444, #ff6a5f)}
.metric-reservations{background:linear-gradient(135deg, #8b5cf6, #4f8cff)}
.metric-sales{background:linear-gradient(135deg, #06b6d4, #0ea5e9)}
.metric-stays{background:linear-gradient(135deg, #14b86f, #22c55e)}
.metric-expenses{background:linear-gradient(135deg, #f97316, #ffb020)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.simple-stack{display:grid;gap:18px}
.kpi-card .card-body{display:flex;flex-direction:column;gap:8px}
.kpi-value{font-size:1.7rem;font-weight:800}
.table-responsive{border-radius:20px}
.login-shell{
    min-height:100vh;
    display:grid;
    place-items:center;
    background:
        radial-gradient(circle at 15% 20%, rgba(13,110,253,.28), transparent 28%),
        radial-gradient(circle at 85% 0%, rgba(255,138,0,.22), transparent 22%),
        linear-gradient(160deg,#071324 0%,#0d2442 40%,#12325c 100%);
    padding:24px;
}
.login-card{
    width:min(480px,100%);
    background:linear-gradient(180deg, rgba(13,28,50,.94), rgba(19,43,76,.90));
    border:1px solid var(--line-strong);
    border-radius:30px;
    padding:34px;
    backdrop-filter:blur(18px);
    box-shadow:var(--shadow);
}
.login-brand-wrap{
    display:flex;
    justify-content:center;
    margin-bottom:18px;
}
.login-brand-logo{
    max-height:88px;
    width:auto;
    object-fit:contain;
}
.footer-note{
    margin-top:24px;
    color:#dce8ff;
    font-size:.9rem;
    text-align:center;
}
.small-help{font-size:.85rem;color:#c6d8f4}
.reservation-toolbar .card-body{display:grid;gap:18px}
.reservation-title-block h2{font-size:1.15rem;margin:0 0 6px;font-weight:800}
.section-subtitle{color:#d8e8ff;margin-top:4px;margin-bottom:0}
.status-legend{display:flex;flex-wrap:wrap;gap:10px}
.legend-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.06);
    color:#eef4ff;
    border:1px solid rgba(255,255,255,.10);
    font-weight:700;
}
.legend-dot{
    width:12px;
    height:12px;
    border-radius:999px;
    box-shadow:0 0 0 4px rgba(255,255,255,.06);
}
.legend-dot.available{background:var(--success)}
.legend-dot.occupied{background:var(--danger)}
.legend-dot.cleaning{background:var(--info)}
.legend-dot.maintenance{background:var(--warning)}
.room-filter-form .btn{width:100%}
.room-board{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
    gap:18px;
}
.room-tile{
    position:relative;
    border:none;
    border-radius:24px;
    padding:18px;
    text-align:left;
    color:#fff;
    min-height:188px;
    box-shadow:var(--shadow);
    overflow:hidden;
    transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.room-tile:hover{
    transform:translateY(-4px);
    filter:brightness(1.03);
    box-shadow:0 30px 60px rgba(2,8,23,.36);
}
.room-tile::after{
    content:"";
    position:absolute;
    right:-16px;
    top:-16px;
    width:120px;
    height:120px;
    border-radius:999px;
    background:rgba(255,255,255,.10);
}
.room-tile.available{background:linear-gradient(135deg, #0f8b5e, #17c97c)}
.room-tile.occupied{background:linear-gradient(135deg, #c3304b, #ff617d)}
.room-tile.cleaning{background:linear-gradient(135deg, #1766cf, #3b82f6)}
.room-tile.maintenance{background:linear-gradient(135deg, #f17a00, #ffb020)}
.room-tile.is-selected{
    outline:3px solid rgba(255,255,255,.94);
    outline-offset:3px;
}
.room-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.12);
    font-size:.8rem;
    font-weight:800;
    letter-spacing:.03em;
    margin-bottom:14px;
}
.room-name{font-size:1.18rem;font-weight:800;margin-bottom:6px;position:relative;z-index:1}
.room-meta{font-size:.88rem;color:rgba(255,255,255,.92);margin-bottom:12px;position:relative;z-index:1}
.room-detail{font-size:.9rem;color:rgba(255,255,255,.96);min-height:44px;margin-bottom:16px;position:relative;z-index:1}
.room-footer{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-end;
    position:relative;
    z-index:1;
    font-weight:700;
}
.room-footer small{display:block;font-size:.76rem;opacity:.90}
.room-action{font-size:.84rem;text-transform:uppercase;letter-spacing:.08em;opacity:.95}
.reservation-layout{align-items:start}
.selected-room-banner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:14px 16px;
    border-radius:18px;
    background:linear-gradient(135deg, rgba(13,110,253,.20), rgba(255,138,0,.14));
    border:1px solid rgba(255,255,255,.08);
    margin-bottom:18px;
}
.selected-room-banner strong{display:block;font-size:1rem}
.selected-room-banner span{color:#eef6ff}
.room-feedback{margin-top:4px;color:#dbe7ff;font-size:.95rem;min-height:22px}
.source-selector{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}
.source-option{
    position:relative;
    display:block;
    cursor:pointer;
}
.source-option input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.source-option-body{
    display:flex;
    align-items:center;
    gap:12px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.10);
    border-radius:18px;
    padding:12px 14px;
    min-height:84px;
    transition:all .18s ease;
    font-weight:700;
    color:#f2f7ff;
}
.source-option-body img{
    width:46px;
    height:46px;
    object-fit:contain;
    border-radius:12px;
    background:#fff;
    padding:4px;
}
.source-option input:checked + .source-option-body{
    border-color:rgba(255,255,255,.42);
    box-shadow:0 0 0 3px rgba(255,255,255,.10);
    transform:translateY(-2px);
}
.source-option.source-hotel input:checked + .source-option-body{background:linear-gradient(135deg, rgba(13,110,253,.30), rgba(255,138,0,.18))}
.source-option.source-booking input:checked + .source-option-body{background:linear-gradient(135deg, rgba(13,70,180,.34), rgba(0,194,255,.20))}
.source-option.source-kayak input:checked + .source-option-body{background:linear-gradient(135deg, rgba(255,128,0,.30), rgba(255,194,91,.18))}
.source-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border-radius:999px;
    font-size:.82rem;
    font-weight:800;
    border:1px solid rgba(255,255,255,.08);
}
.source-badge img{
    width:24px;
    height:24px;
    object-fit:contain;
    border-radius:999px;
    background:#fff;
    padding:2px;
}
.source-badge.source-booking{background:rgba(13,70,180,.25);color:#e9f2ff}
.source-badge.source-kayak{background:rgba(255,128,0,.22);color:#fff2df}
.source-badge.source-hotel{background:rgba(13,110,253,.22);color:#e4f1ff}
.logo-preview-card{
    min-height:260px;
    border-radius:24px;
    border:1px dashed rgba(255,255,255,.18);
    background:rgba(255,255,255,.04);
    display:grid;
    place-items:center;
    padding:24px;
}
.settings-logo-preview{
    max-width:100%;
    max-height:150px;
    object-fit:contain;
}
@media (max-width: 1199px){
    .metric .label{max-width:none}
}
@media (max-width: 991px){
    .app-shell{grid-template-columns:1fr}
    .sidebar{position:relative;height:auto}
    .grid-2{grid-template-columns:1fr}
    .topbar{flex-direction:column;align-items:flex-start}
    .source-selector{grid-template-columns:1fr}
}
@media (max-width: 767px){
    .main-content{padding:18px}
    .card .card-body,.card .card-header{padding:18px}
    .topbar{padding:16px}
    .room-board{grid-template-columns:1fr}
    .selected-room-banner{flex-direction:column;align-items:flex-start}
    .brand-box{min-height:108px}
    .brand-logo{max-height:72px}
}