:root{
    --bg:#f5f7fb;
    --panel:#ffffff;
    --panel-2:#fbfcff;
    --line:#e9edf5;
    --text:#1f2430;
    --muted:#6f7686;
    --primary:#c22675;
    --primary-2:#e83e8c;
    --primary-soft:#fff2f8;
    --indigo:#5b57d9;
    --indigo-soft:#f3f2ff;
    --green:#198754;
    --green-soft:#e9f7ef;
    --yellow:#b78103;
    --yellow-soft:#fff8e1;
    --red:#c0392b;
    --red-soft:#fdecef;
    --blue:#3367d6;
    --blue-soft:#e8f0fe;
    --shadow:0 16px 36px rgba(31, 36, 48, 0.06);
    --radius-xl:24px;
    --radius-lg:18px;
    --radius-md:14px;
    --radius-sm:12px;
}

body.cm-body{
    background:
        radial-gradient(circle at top left, #fff4fa 0%, transparent 18%),
        radial-gradient(circle at top right, #eef4ff 0%, transparent 20%),
        linear-gradient(180deg, #fbfcff 0%, #f5f7fb 100%);
}

.cm-shell{
    display:grid;
    grid-template-columns: 285px minmax(0, 1fr);
    gap:18px;
}

.cm-sidebar{
    background:linear-gradient(180deg, #1f2433 0%, #2d3349 52%, #442c5b 100%);
    color:#fff;
    border-radius:24px;
    padding:16px 14px;
    box-shadow:0 18px 42px rgba(20, 24, 35, 0.26);
    position:sticky;
    top:16px;
    height:fit-content;
}

.cm-brand{
    padding:10px 10px 14px 10px;
    border-bottom:1px solid rgba(255,255,255,0.10);
    margin-bottom:12px;
}
.cm-brand-title{
    font-size:1.05rem;
    font-weight:800;
}
.cm-brand-sub{
    font-size:0.8rem;
    opacity:0.8;
    margin-top:3px;
}

.cm-nav-group{ margin-bottom:12px; }
.cm-nav-label{
    font-size:0.68rem;
    text-transform:uppercase;
    letter-spacing:.12em;
    opacity:.62;
    font-weight:800;
    padding:6px 10px;
}
.cm-nav a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    text-decoration:none;
    color:#fff;
    padding:10px 12px;
    border-radius:14px;
    margin-bottom:6px;
    font-size:0.84rem;
    font-weight:700;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.06);
    transition:.18s ease;
}
.cm-nav a:hover{
    transform:translateY(-1px);
    background:rgba(255,255,255,0.09);
    color:#fff;
}
.cm-nav a.active{
    background:linear-gradient(135deg, rgba(232,62,140,.98) 0%, rgba(194,38,117,.98) 100%);
    border-color:transparent;
    box-shadow:0 12px 22px rgba(232,62,140,.22);
}
.cm-count{
    background:rgba(255,255,255,.14);
    border-radius:999px;
    padding:3px 8px;
    font-size:.7rem;
    font-weight:800;
}

.cm-main{ min-width:0; }

.cm-topbar{
    background:linear-gradient(135deg, #ffffff 0%, #fff4f9 44%, #f5f7ff 100%);
    border:1px solid var(--line);
    border-radius:24px;
    padding:16px;
    box-shadow:var(--shadow);
    margin-bottom:14px;
}
.cm-topbar-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
}
.cm-title{
    font-size:1.45rem;
    line-height:1.2;
    font-weight:800;
    color:var(--text);
    margin-bottom:6px;
}
.cm-subtitle{
    font-size:.9rem;
    color:var(--muted);
    margin:0;
}
.cm-actions a{
    text-decoration:none;
    display:inline-block;
    padding:10px 14px;
    border-radius:12px;
    font-size:.82rem;
    font-weight:800;
    margin-left:8px;
    margin-bottom:8px;
    transition:.18s ease;
}
.cm-actions a:hover{ transform:translateY(-1px); }
.cm-btn-main{
    background:linear-gradient(135deg, var(--primary-2) 0%, var(--primary) 100%);
    color:#fff;
    box-shadow:0 10px 18px rgba(232,62,140,.20);
}
.cm-btn-soft{
    background:#fff;
    color:var(--primary);
    border:1px solid #f0d7e3;
}

.cm-overview{
    display:grid;
    grid-template-columns: 1.35fr .95fr;
    gap:14px;
    margin-bottom:14px;
}
.cm-panel{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:20px;
    padding:14px;
    box-shadow:var(--shadow);
}
.cm-panel-title{
    font-size:.95rem;
    font-weight:800;
    color:var(--text);
    margin-bottom:10px;
}

.cm-hero-metrics{
    display:grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap:12px;
    margin-top:12px;
}
.cm-metric{
    background:linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    border:1px solid var(--line);
    border-radius:16px;
    padding:13px;
}
.cm-metric-label{
    font-size:.74rem;
    color:var(--muted);
    font-weight:700;
    margin-bottom:6px;
}
.cm-metric-value{
    font-size:1.18rem;
    line-height:1.05;
    color:var(--text);
    font-weight:800;
}
.cm-metric-foot{
    margin-top:6px;
    font-size:.78rem;
    color:var(--muted);
}

.cm-stat-list{
    display:grid;
    gap:10px;
}
.cm-stat-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--panel-2);
}
.cm-stat-row span:first-child{
    font-size:.8rem;
    color:var(--muted);
    font-weight:700;
}
.cm-stat-row span:last-child{
    font-size:.92rem;
    color:var(--text);
    font-weight:800;
}

.cm-hotel-card{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:22px;
    padding:14px;
    box-shadow:var(--shadow);
    margin-bottom:14px;
}
.cm-hotel-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:12px;
}
.cm-hotel-title{
    font-size:1.02rem;
    font-weight:800;
    color:var(--text);
    margin-bottom:4px;
}
.cm-hotel-meta{
    font-size:.82rem;
    color:var(--muted);
    margin-bottom:8px;
}
.cm-chip{
    display:inline-block;
    font-size:.7rem;
    line-height:1.2;
    font-weight:800;
    padding:6px 10px;
    border-radius:999px;
    background:var(--primary-soft);
    color:var(--primary);
    border:1px solid #f2d7e4;
    margin-right:6px;
    margin-bottom:6px;
}
.cm-chip.alt{
    background:var(--indigo-soft);
    color:var(--indigo);
    border-color:#e4e2ff;
}
.cm-chip.green{
    background:var(--green-soft);
    color:var(--green);
    border-color:#d9efdf;
}

.cm-hotel-actions a{
    text-decoration:none;
    display:inline-block;
    padding:9px 12px;
    border-radius:11px;
    font-size:.78rem;
    font-weight:800;
    margin-right:6px;
    margin-bottom:6px;
    background:#fff;
    color:var(--primary);
    border:1px solid #f0d7e3;
}
.cm-hotel-actions a.primary{
    color:#fff;
    border:none;
    background:linear-gradient(135deg, var(--primary-2), var(--primary));
}

.cm-mini-grid{
    display:grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap:10px;
    margin-bottom:12px;
}
.cm-mini{
    background:linear-gradient(180deg, #ffffff 0%, #fbfbff 100%);
    border:1px solid #ece9f5;
    border-radius:15px;
    padding:11px;
}
.cm-mini-label{
    font-size:.72rem;
    color:var(--muted);
    font-weight:700;
    margin-bottom:4px;
}
.cm-mini-value{
    font-size:1rem;
    line-height:1.05;
    font-weight:800;
    color:#2b3143;
}

.cm-hotel-body{
    display:grid;
    grid-template-columns: 1.3fr .95fr;
    gap:12px;
}
.cm-section{
    background:#fff;
    border:1px solid #f0edf6;
    border-radius:18px;
    padding:13px;
}
.cm-section-title{
    font-size:.92rem;
    font-weight:800;
    color:var(--text);
    margin-bottom:10px;
}

.cm-table-wrap{ overflow-x:auto; }
.cm-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0 6px;
}
.cm-table th{
    text-align:left;
    font-size:.74rem;
    color:var(--muted);
    font-weight:800;
    padding:0 10px 6px 10px;
}
.cm-table td{
    background:#fbfbfe;
    font-size:.8rem;
    color:var(--text);
    padding:10px;
    border-top:1px solid #f0edf6;
    border-bottom:1px solid #f0edf6;
    white-space:nowrap;
    vertical-align:middle;
}
.cm-table td:first-child{
    border-left:1px solid #f0edf6;
    border-top-left-radius:12px;
    border-bottom-left-radius:12px;
}
.cm-table td:last-child{
    border-right:1px solid #f0edf6;
    border-top-right-radius:12px;
    border-bottom-right-radius:12px;
}

.cm-badge{
    display:inline-block;
    padding:5px 9px;
    border-radius:999px;
    font-size:.7rem;
    font-weight:800;
}
.cm-badge.confirmed{ background:var(--green-soft); color:var(--green); }
.cm-badge.pending{ background:var(--yellow-soft); color:var(--yellow); }
.cm-badge.cancelled{ background:var(--red-soft); color:var(--red); }
.cm-badge.checkedin,
.cm-badge.checked_out{ background:var(--blue-soft); color:var(--blue); }

.cm-progress-row{
    margin-bottom:10px;
}
.cm-progress-top{
    display:flex;
    justify-content:space-between;
    gap:10px;
    font-size:.78rem;
    margin-bottom:6px;
}
.cm-progress-top span:first-child{
    color:var(--muted);
    font-weight:700;
}
.cm-progress-top span:last-child{
    color:var(--text);
    font-weight:800;
}
.cm-progress{
    width:100%;
    height:10px;
    border-radius:999px;
    background:#f1f3f8;
    overflow:hidden;
}
.cm-progress > div{
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg, var(--primary-2), var(--primary));
}

.cm-empty{
    padding:14px;
    border-radius:14px;
    background:#fff8fc;
    border:1px dashed #efcede;
    color:#7a6471;
    font-size:.82rem;
}

@media (max-width: 1280px){
    .cm-hero-metrics{ grid-template-columns: repeat(2, minmax(0,1fr)); }
    .cm-mini-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 1199px){
    .cm-shell,
    .cm-overview,
    .cm-hotel-body{
        grid-template-columns: 1fr;
    }
    .cm-sidebar{
        position:relative;
        top:auto;
    }
}
@media (max-width: 767px){
    .cm-mini-grid,
    .cm-hero-metrics{
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 575px){
    .cm-mini-grid,
    .cm-hero-metrics{
        grid-template-columns: 1fr;
    }
    .cm-title{
        font-size:1.2rem;
    }
    .cm-actions a{
        margin-left:0;
        margin-right:8px;
    }
}

@media (max-width: 1199px){
    .cm-panel form > div[style*="grid-template-columns"]{
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 767px){
    .cm-panel form > div[style*="grid-template-columns"]{
        grid-template-columns: 1fr !important;
    }
}

.cm-hotel-actions a:hover,
.cm-actions a:hover{
    transform: translateY(-1px);
}

.cm-table td div{
    white-space: normal;
}

.cm-hotel-card select,
.cm-hotel-card input,
.cm-hotel-card textarea{
    width:100%;
    border:1px solid #e7eaf2;
    border-radius:12px;
    min-height:44px;
    padding:10px 12px;
    background:#fff;
    box-shadow:none;
}

.cm-hotel-card textarea{
    min-height:110px;
    resize:vertical;
}

.cm-hotel-card select:focus,
.cm-hotel-card input:focus,
.cm-hotel-card textarea:focus{
    border-color:#d96aa2;
    box-shadow:0 0 0 3px rgba(194,38,117,.08);
    outline:none;
}