#hms-sidebar {
    background-color: var(--hms-white); /* Clean Sidebar */
    /*border-right: 1px solid var(--hms-border);*/
    z-index: 1!important;
    position: relative;
}

h1, h2, h3, strong {
    color: var(--hms-black); /* Sharp Headers */
}

p, small, .hms-label {
    color: var(--hms-black-light); /* Muted Info */
}


/* 1. Reset the WordPress Admin padding so our app fits perfectly */
#wpbody-content {
    padding-bottom: 0 !important;
}

/* 2. The Master Wrapper: Exactly the height of the screen minus the WP Admin Bar */
#hms-master-app {
    display: flex; 
    flex-direction: row;
    height: calc(100vh - 32px);
    overflow: hidden;
    margin: 0;
    /* NEW: Soft gradient canvas so the glass has something to blur! */
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f1 100%)!important;
        /*background: linear-gradient(115deg, var(--hms-white) 0%, #20704d78 95%) !important;*/
    padding: 12px;
    gap: 12px;
    position: relative;
    z-index: 2;
}

#hms-main-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    background: transparent;
    /*flex: 1;*/
    /*display: flex;*/
    /*flex-direction: column;*/
    /*height: 100vh;*/
    /*overflow: hidden;*/
    position: relative;
    /* Ensure the content area has its own stacking context */
    z-index: 1;
}

/* 3. The Middle Section (Sidebar + Content) */
#hms-app-body {
    display: flex !important;
    flex: 1; /* Takes up all remaining space between Header and Footer */
    overflow: hidden; /* Important: Keeps the scrollbars inside the specific sections */
}

/* 4. The Sidebar: Fixed width, no internal scrollbar unless menu is huge */
/*#hms-sidebar {*/
/*    width: 260px;*/
/*    height: 100%; */
/*    flex-shrink: 0;*/
/*    background: var(--hms-white);*/
/*    border-right: 1px solid var(--hms-border);*/
/*    overflow-y: auto;*/
/*    z-index: 100;*/
/*}*/

/* 5. The Content Area: This is the ONLY place that should scroll if data is long */
#hms-content-area {
    flex: 1;
    background: var( --hms-white-transparent);
    padding: 12px;
    overflow-y: auto; /* Standard scrolling for your tables/forms */
    border-radius: 15px;
    margin: 12px 0px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    border: 1px solid var(--hms-border);
}

/* 6. Header & Footer: Fixed height */
#hms-header, #hms-footer {
    flex: 0 0 auto;
    background: #f1f1f1;
    z-index: 10;
}

.hms-dark-mode-wrapper {
    transform: scale(0.8); /* Shrinks it to look more elegant in the header */
    transform-origin: left center;
}















/*Room Tab CSS Start Here*/

/* =========================================
   Room Tab CSS (Floating Card Rows Design)
   ========================================= */

/* Header & Title */
.hms-content-header {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 30px;
}

.hms-content-header h1 {
    font-weight: 800; 
    color: #0f172a; 
    font-size: 28px;
    letter-spacing: -0.5px;
    margin: 0;
}

/* 1. Remove the giant white box background */
.hms-card-table {
    background: transparent !important; 
    border: none !important; 
    border-radius: 0 !important; 
    box-shadow: none !important;
}

/* 2. Force WordPress to separate the table rows */
.hms-table {
    width: 100%; 
    border-collapse: separate !important; /* CRITICAL: Overrides WordPress */
    border-spacing: 0 10px !important;    /* CRITICAL: Forces a 16px gap */
    text-align: left;
    background-color: #f8fafc9e;
    padding: 0px 10px;
    border: 1px solid #e0e0e0b0;
    border-radius: 10px;
}

/* 3. Floating Transparent Headers */
.hms-table thead {
    background: transparent; 
}



.hms-table th {
    padding: 0 20px 8px 20px; 
    font-size: 11px; 
    text-transform: uppercase; 
    letter-spacing: 0.8px; 
    color: #64748b; 
    font-weight: 700;
    border: none;
}

/* 4. Individual Row Cards */
/* 3. Make sure the individual row cells have the white background */
.hms-table tbody tr {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04); 
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hms-table tbody td {
    background: #ffffff !important; /* Forces the white card color onto the cells */
    vertical-align: middle;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

/* Hover effect lifts the entire row slightly */
.hms-table tbody tr:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.05);
}

/* 5. Add borders to the top and bottom of every cell */
/*.hms-table tbody td {*/
/*    vertical-align: middle;*/
/*    border-top: 1px solid #e2e8f0;*/
/*    border-bottom: 1px solid #e2e8f0;*/
/*}*/

/* 6. Cap the Left edge (Rounded corners & left border) */
.hms-table tbody td:first-child {
    border-left: 1px solid #e2e8f0;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

table caption+thead tr:first-child td, table caption+thead tr:first-child th, table colgroup+thead tr:first-child td, table colgroup+thead tr:first-child th, table thead:first-child tr:first-child td, table thead:first-child tr:first-child th {
    border: none!important;
    /* border-block-start: 1px solid hsla(0, 0%, 50%, .502); */
    background: tranparent!important;
}

/* 7. Cap the Right edge (Rounded corners & right border) */
.hms-table tbody td:last-child {
    border-right: 1px solid #e2e8f0;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* Action Button Hover Effects */
.hms-action-btn:hover {
    transform: scale(1.05);
    filter: brightness(0.95);
}

/* Skeleton Loaders */
.hms-skeleton {
    background: #f1f5f9;
    animation: hms-pulse-skeleton 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes hms-pulse-skeleton {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}



/*Search bar*/

/* Premium Search Bar Interactive States */
.hms-search-bar {
    transition: all 0.2s ease;
}

/* Adds a soft blue glow when the user clicks inside the search input */
/*.hms-search-bar:focus-within {*/
/*    border-color: #3b82f6 !important;*/
/*    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;*/
/*}*/

/* Lightens the placeholder text to match the icon */
.hms-search-bar input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

#hms-clear-search:hover {
    color: #ef4444 !important; /* Turns red when hovering over the clear button */
    transform: scale(1.1);
}

/* Ensure the button is centered vertically */
#hms-clear-search {
    display: none; /* Managed by JS */
    transition: all 0.2s ease;
}

/* =========================================
   Room Tab CSS End Here
   ========================================= */


/*Room Tab CSS End Here*/







.hms-btn-primary {
    background: var(--hms-primary);
    color: white; 
    border: none;
    padding: 0 20px;
    border-radius: 8px;
    font-size: 15px; 
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    height: 46px;
    box-shadow: 0 2px 5px rgba(16, 185, 129, 0.2);
    transition: all 0.2s ease; /* faster = more responsive */
}

.hms-btn-primary:hover,
.hms-btn-primary:focus {
    background: var(--hms-accent);
    transform: translateY(-2px);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.2);
}

.hms-btn-primary:active {
    transform: translateY(1px) scale(0.98); /* press feel */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
/* =========================================
   Custom Premium WebKit Scrollbar (Fixed Curves)
   ========================================= */

/* The overall width of the scrollbar */
#hms-master-app ::-webkit-scrollbar {
    width: 14px; /* Slightly wider to make room for the invisible padding */
}

/* The track (background) of the scrollbar */
#hms-master-app ::-webkit-scrollbar-track {
    background: transparent; 
    
    /* THE FIX: Pushes the scrollbar away from the rounded corners */
    margin-top: 20px; 
    margin-bottom: 20px; 
}

/* The draggable thumb */
#hms-master-app ::-webkit-scrollbar-thumb {
    background-color: #cbd5e1; /* Smooth Slate 300 color */
    border-radius: 10px;
    
    /* THE FIX: Invisible thick border pushes the thumb away from the absolute right edge */
    border: 4px solid rgba(0, 0, 0, 0); 
    background-clip: padding-box;
}

/* Hover effect for the draggable thumb */
#hms-master-app ::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8; /* Slightly darker Slate 400 on hover */
}

/* Modal scrollbar */
.hms-modal-content::-webkit-scrollbar {
    width: 14px;
}
.hms-modal-content::-webkit-scrollbar-track {
    background: transparent; 
    margin-top: 10px;
    margin-bottom: 10px;
}
.hms-modal-content::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 10px;
    border: 4px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
}
.hms-modal-content::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
}

/* =========================================
   Custom Premium WebKit Scrollbar End here
   ========================================= */






.hms-currency-select {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    outline: none;
    transition: all 0.2s;
}
.hms-currency-select:hover {
    border-color: #1a1a1a;
    background: #fff;
}



/* --- HMS PREMIUM MODAL SYSTEM (Smooth Zoom & Deep Blur) --- */
.hms-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgb(0 0 0 / 71%) !important;
    backdrop-filter: blur(8px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    z-index: 99999999 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.6s ease, visibility 0.4s;
}

/* Opening State for Overlay */
.hms-modal-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.hms-modal-content {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.65);
    position: relative;
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    
    /* THE FIXES FOR WHITE CORNERS */
    overflow: hidden !important; 
    /* This next line forces the browser to render the clip-path accurately */
    -webkit-mask-image: -webkit-radial-gradient(white, black); 
    
    /* ANIMATION STUFF */
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.2, 1, 0.2, 1), opacity 0.4s ease;
}


/* 2. SCROLLABLE FORM BODY */
#hms-add-room-form {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    overflow: hidden !important;
}

#hms-add-room-form > div:first-of-type {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 30px !important;
    
    /* HIDE SCROLLBAR */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
#hms-add-room-form > div:first-of-type::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}



/* THE ZOOM-IN EFFECT: Scale up to perfect size */
.hms-modal-overlay.active .hms-modal-content {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.modal-top {
    flex-shrink: 0;
    position: relative !important;
    z-index: 20;
    margin: 0 !important;
    padding: 22px 30px !important;
    background: var(--hms-primary);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    border-radius: 0px!important;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.modal-top h2 {
    color: #fff !important;
    margin: 0 !important;
    font-size: 20px !important;
}

/* Close/X Button Styling */
#hms-close-modal {
    position: static !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: none;
    width: 32px;
    height: 32px;
    font-size: 54px !important;
    border-radius: 8px;
    font-size: 30px !important;
    cursor: pointer;
    display: flex;
    justify-content: center;
    /* align-items: center; */
    line-height: 11px;
    color: #fff !important;
    transition: 0.5s;
}

#hms-close-modal:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.05);
}

/* 1. Ensure Header and Footer stay clean */
.modal-top, .hms-modal-footer {
    overflow: hidden !important;
}

/* 2. Style the Scrollbar ONLY for the Form Body */
#hms-add-room-form > div:first-of-type {
    overflow-y: auto !important;
    padding-right: 15px !important; /* Space for the scrollbar so content doesn't jump */
    
    /* For Firefox */
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

/* 3. Custom Webkit Scrollbar (Chrome, Safari, Edge) */
#hms-add-room-form > div:first-of-type::-webkit-scrollbar {
    width: 6px; /* Thin and elegant */
    display: block !important; /* Make sure it shows here */
}

#hms-add-room-form > div:first-of-type::-webkit-scrollbar-track {
    background: transparent; /* Keeps it clean */
    margin: 10px 0; /* Keeps the bar away from touching the header/footer edges */
}

#hms-add-room-form > div:first-of-type::-webkit-scrollbar-thumb {
    background-color: #cbd5e1; /* Smooth slate color */
    border-radius: 20px;
    border: 1px solid transparent; /* Subtle padding effect */
}

#hms-add-room-form > div:first-of-type::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8; /* Slightly darker on hover */
}

/* Form Elements Styling */
.hms-modal-content h2 {
    font-weight: 600;
    margin-bottom: 25px;
    color: var(--hms-white-transparent);
    font-size: 24px;
    letter-spacing: -0.4px;
}

.hms-form-label {
    display: block;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 8px;
    color: #64748b;
    letter-spacing: 0.5px;
}

.hms-form-input {
    width: 100%;
    padding: 14px 18px;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    font-weight: 500;
    font-size: 15px;
    transition: all 0.2s ease;
    outline: none;
    background: #f8fafc;
}

.hms-form-input:focus {
    border-color: #3b82f6;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

/* 3. PREMIUM "ALMOST DONE" FOOTER */
.hms-modal-footer {
    flex-shrink: 0;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 20px 30px !important;
    background: #f8fafc !important; /* Soft slate tint */
    border-top: 1px solid #e2e8f0 !important;
    border-radius: 0 0 20px 20px !important;
    z-index: 20;
    margin: 0 !important;
    gap: 10px;
}

/* Left Side Status */
.hms-footer-status {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hms-status-icon {
    background: #d4f2e4;
    color: var(--hms-primary);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hms-status-icon svg {
    width: 22px;
    height: 22px;
}

.hms-status-text {
    display: flex;
    flex-direction: column;
}

.hms-status-text strong {
    font-size: 13px;
    color: #0f172a;
    line-height: 1.4;
    font-weight: 700;
}

.hms-status-text span {
    font-size: 12px;
    color: #64748b;
}

/* Right Side Actions */
.hms-footer-actions {
    display: flex;
    gap: 10px;
}

/* Discard Button */
.hms-btn-discard {
    background: #fff !important;
    color: #c71e32 !important;
    border: 1.5px solid #fce7f3 !important;
    padding: 10px 18px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.hms-btn-discard:hover {
    background: #c71e320f !important;
    border-color: #c71e32 !important;
}

/* Save Button */
.hms-btn-save {
    background: #111827 !important;
    color: #fff !important;
    border: none !important;
    padding: 10px 22px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.2s;
}

.hms-btn-save:hover {
    background: #000 !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}






/* Shared Scrollable Body for all Modals */
.hms-modal-body-scroll {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 30px !important;
    
    /* Hide scrollbar for standard look, but let's use your custom bar */
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

/* Custom Webkit Scrollbar for the View Modal */
.hms-modal-body-scroll::-webkit-scrollbar {
    width: 6px;
    display: block !important;
}

.hms-modal-body-scroll::-webkit-scrollbar-track {/* Delete Modal Specific Refinements */
#hms-delete-modal .hms-modal-content {
    border: 1px solid rgba(220, 38, 38, 0.1); /* Very subtle red border */
}

/* Hover state for the Cancel button in Delete Modal */
#hms-close-delete-modal:hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

/* Hover state for the Delete button */
#hms-confirm-delete-btn:hover {
    background: #b91c1c !important; /* Darker Red */
    box-shadow: 0 10px 15px -3px rgba(220, 38, 38, 0.2);
}

/* Shake animation if they click outside (optional pro touch) */
@keyframes hms-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}
.hms-modal-shake {
    animation: hms-shake 0.2s ease-in-out 0s 2;
}
    background: transparent;
    margin: 10px 0;
}

.hms-modal-body-scroll::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;/* Delete Modal Specific Refinements */
#hms-delete-modal .hms-modal-content {
    border: 1px solid rgba(220, 38, 38, 0.1); /* Very subtle red border */
}

/* Hover state for the Cancel button in Delete Modal */
#hms-close-delete-modal:hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

/* Hover state for the Delete button */
#hms-confirm-delete-btn:hover {
    background: #b91c1c !important; /* Darker Red */
    box-shadow: 0 10px 15px -3px rgba(220, 38, 38, 0.2);
}

/* Shake animation if they click outside (optional pro touch) */
@keyframes hms-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}
.hms-modal-shake {
    animation: hms-shake 0.2s ease-in-out 0s 2;
}
    border-radius: 20px;
}

/* Ensure the View Body doesn't have a double scrollbar */
#hms-view-body {
    max-height: none !important; /* Let the flexbox handle height */
}

/* Close Preview Button Hover Fix */
.hms-close-view.hms-btn-save:hover {
    background: #000 !important;
}



/* Delete Modal Specific Refinements */
#hms-delete-modal .hms-modal-content {
    border: 1px solid rgba(220, 38, 38, 0.1); /* Very subtle red border */
}

/* Hover state for the Cancel button in Delete Modal */
#hms-close-delete-modal:hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

/* Hover state for the Delete button */
#hms-confirm-delete-btn:hover {
    background: #b91c1c !important; /* Darker Red */
    box-shadow: 0 10px 15px -3px rgba(220, 38, 38, 0.2);
}

/* Shake animation if they click outside (optional pro touch) */
@keyframes hms-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}
.hms-modal-shake {
    animation: hms-shake 0.2s ease-in-out 0s 2;
}













/* --- LIQUID PRO FOOTER (SINGLE ROW EDITION) --- */
.hms-main-footer {
    height: 50px; /* Slimmer for single row */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    
    /* Liquid Cinema Glass */
    background: var(--hms-white);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    
    border: 1px solid var(--hms-border);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.02);
    
    color: #64748b;
    font-size: 11px;
    width: 100%;
    border-radius: 15px;
}

/* Row alignment for Left side */
.hms-footer-left {
    display: flex;
    align-items: center; /* Vertical Center */
    gap: 12px;
}

.hms-copyright {
    margin: 0;
    white-space: nowrap;
}

/* Row alignment for Right side */
.hms-footer-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* Vertical Separator */
.hms-footer-sep {
    width: 1px;
    height: 14px;
    background: rgba(0, 0, 0, 0.1);
    display: inline-block;
}

/* Stats Styling */
.hms-footer-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.hms-icon-mini-footer {
    display: flex;
    align-items: center;
    width: 16px;
    height: 16px;
    opacity: 0.6;
}

.hms-icon-mini-footer svg {
    width: 100%;
    height: 100%;
}

/* System Badge Pill */
.hms-system-badge {
    background: rgba(34, 197, 94, 0.1); 
    color: #15803d;
    padding: 4px 12px;
    border-radius: 100px;
    font-weight: 800;
    font-size: 9px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.hms-pulse-dot {
    width: 6px;
    height: 6px;
    background: #22c55e;
    border-radius: 50%;
    animation: hmsPulse 2s infinite;
}

/* Version Pill Styling */
.hms-version-pill {
    display: flex;
    border-radius: 4px;
    overflow: hidden;
    font-weight: 800;
    font-size: 9px;
    border: 1px solid rgba(0,0,0,0.05);
}

.hms-version-label { background: #0f172a; color: #fff; padding: 1px 5px; }
.hms-version-number { background: rgba(255,255,255,0.5); padding: 1px 5px; color: #475569; }

@keyframes hmsPulse {
    0% { transform: scale(0.9); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
    100% { transform: scale(0.9); opacity: 1; }
}









/*Content area design*/
/* --- THE MASTER CONTENT STAGE (Liquid Pro) --- */
.hms-content-area {
    padding: 40px; 
    /* Calculations adjusted for your 85px Header + 50px Single-Row Footer */
    min-height: calc(100vh - 135px); 
    position: relative;
    background: transparent; 
    
    /* Energetic Entrance Animation */
    animation: hms-content-fade 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* THE UNDER-GLOW 
   Using your global brand color to create depth behind the glass cards 
*/
.hms-content-area::before {
    content: '';
    position: fixed;
    top: 40%;
    left: 55%; /* Slightly offset for a more natural light source feel */
    width: 800px;
    height: 800px;
    
    /* Global Color Integration */
    background: radial-gradient(
        circle, 
        color-mix(in srgb, var(--hms-primary) 8%, transparent) 0%, 
        transparent 75%
    );
    
    transform: translate(-50%, -50%);
    z-index: -1; 
    pointer-events: none;
    filter: blur(40px);
}

/* Smooth Tab-Switch Transition */
@keyframes hms-content-fade {
    from { 
        opacity: 0; 
        transform: translateY(15px) scale(0.985); 
        filter: blur(4px);
    }
    to { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
        filter: blur(0);
    }
}

/* Standard Header for Content Sections (If you use them) */
.hms-content-title {
    font-size: 24px;
    font-weight: 800;
    color: #1e293b;
    letter-spacing: -0.5px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
}