/* Public layout primitives. Keep structural rules here; page-specific styling belongs in theme-public.css/public-premium.css. */

/* Braj Resort Samod — consolidated public base; duplicate selector/property blocks removed. */

@layer legacy {

  * {

    box-sizing: border-box;

  }

  body.page-enter {

    animation: pageIn .5s var(--ease) both;

  }

  @keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

  a {

    color: inherit;
    text-decoration: none;

  }

  ::selection {

    background: var(--gold-soft);
    color: var(--ink);

  }

  .container {

    width: min(1240px,92vw);
    margin: auto;

  }

  .section {

    padding: 96px 0;
    position: relative;

  }

  .section.compact {

    padding: 64px 0;

  }

  .section.tint {

    background: linear-gradient(135deg,#f8f4ec,#f1f7fb);

  }

  .section.soft-gold {

    background: linear-gradient(135deg,#fbf4e8,#fff);

  }

  .eyebrow {

    display: inline-flex;
    gap: 8px;
    align-items: center;
    color: var(--gold-dark);
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: 11px;
    font-weight: 850;

  }

  h1,h2,h3,h4,p {

    margin-top: 0;

  }

  .display,.page-title,.section-title {

    font-family: Georgia,"Times New Roman",serif;
    font-weight: 500;
    letter-spacing: -.035em;

  }

  .section-title {

    font-size: clamp(38px,4.4vw,62px);
    line-height: 1.03;
    margin: 12px 0 0;

  }

  .section-head {

    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    margin-bottom: 34px;

  }

  .lead {

    font-size: 18px;
    color: var(--muted);
    max-width: 680px;

  }

  .muted {

    color: var(--muted);

  }

  .small {

    font-size: 13px;

  }

  .gold-text {

    color: var(--gold-dark);

  }

  .nowrap {

    white-space: nowrap;

  }

  .grid {

    display: grid;
    gap: 22px;

  }

  .grid.two {

    grid-template-columns: repeat(2,minmax(0,1fr));

  }

  .grid.three {

    grid-template-columns: repeat(3,minmax(0,1fr));

  }

  .grid.four {

    grid-template-columns: repeat(4,minmax(0,1fr));

  }

  .stack {

    display: grid;
    gap: 16px;

  }

  .cluster {

    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;

  }

  .space-between {

    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;

  }

  .card {

    background: rgba(255,255,255,.92);
    border: 1px solid rgba(220,211,197,.75);
    border-radius: var(--r);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    transition: transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s ease;

  }

  .card.pop:hover {

    transform: translateY(-10px) scale(1.015);
    box-shadow: var(--shadow-lg);
    border-color: rgba(201,154,70,.42);

  }

  .card-body {

    padding: 24px;

  }

  .glass {

    background: rgba(255,255,255,.76);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(255,255,255,.64);
    box-shadow: var(--shadow);

  }

  .btn {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: 14px;
    padding: 13px 20px;
    font-weight: 800;
    letter-spacing: .01em;
    cursor: pointer;
    transition: transform .35s var(--ease),box-shadow .35s var(--ease),background .35s ease,border-color .35s ease;
    position: relative;
    overflow: hidden;

  }

  .btn:after {

    content: "";
    position: absolute;
    inset: -40%;
    background: linear-gradient(100deg,transparent 35%,rgba(255,255,255,.45),transparent 65%);
    transform: translateX(-75%) rotate(10deg);
    transition: transform .55s ease;

  }

  .btn:hover:after {

    transform: translateX(75%) rotate(10deg);

  }

  .btn:active {

    transform: translateY(-1px) scale(.98);

  }

  .btn.gold {

    background: linear-gradient(135deg,#d0a04d,#b8842e);
    color: white;

  }

  .btn.navy {

    background: var(--ink);
    color: #fff;

  }

  .btn.light {

    background: #fff;
    color: var(--ink);
    border-color: var(--line);

  }

  .btn.ghost {

    background: transparent;
    border-color: rgba(16,43,73,.18);
    color: var(--ink);

  }

  .btn.danger {

    background: #fff4f4;
    border-color: #f0caca;
    color: #9d3434;

  }

  .btn.sm {

    padding: 9px 13px;
    border-radius: 11px;
    font-size: 13px;

  }

  .input,select.input,textarea.input {

    width: 100%;
    border: 1px solid var(--line-strong);
    border-radius: 13px;
    background: #fff;
    padding: 13px 14px;
    color: var(--ink);
    outline: none;
    transition: .25s;

  }

  .input:focus {

    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(201,154,70,.12);

  }

  label.field {

    display: grid;
    gap: 7px;
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 700;

  }

  .form-grid .full {

    grid-column: 1/-1;

  }

  .nav-inner {

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

  }

  .brand {

    display: flex;
    align-items: center;
    gap: 11px;
    font-family: Georgia,serif;
    font-weight: 700;
    letter-spacing: .13em;
    line-height: 1;

  }

  .brand small {

    display: block;
    font: 700 9px/1.25 Inter,sans-serif;
    letter-spacing: .23em;
    margin-top: 6px;
    color: #536273;

  }

  .menu {

    display: flex;
    gap: 24px;
    align-items: center;
    font-size: 13px;
    font-weight: 700;

  }

  .menu a {

    position: relative;
    padding: 30px 0;

  }

  .menu a:after {

    content: "";
    position: absolute;
    height: 2px;
    left: 50%;
    right: 50%;
    bottom: 20px;
    background: var(--gold);
    transition: .3s;

  }

  .menu a:hover:after,.menu a.active:after {

    left: 0;
    right: 0;

  }

  .nav-actions {

    display: flex;
    gap: 10px;
    align-items: center;

  }

  @keyframes menuDrop{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}

  .mobile-menu a {

    padding: 13px 14px;
    border-radius: 12px;
    font-weight: 750;

  }

  .mobile-menu a:hover {

    background: var(--bg-2);

  }

  .hero-media:after {

    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.91) 26%,rgba(255,255,255,.55) 45%,rgba(255,255,255,.05) 70%),linear-gradient(0deg,rgba(15,35,56,.10),transparent 35%);

  }

  .hero-content {

    position: relative;
    z-index: 2;
    width: min(670px,95%);

  }

  .hero .lead {

    font-size: 18px;
    line-height: 1.72;
    color: #556575;
    max-width: 600px;

  }

  .hero-facts {

    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 24px;

  }

  .hero-fact {

    min-width: 160px;
    padding: 12px 15px;
    border-radius: 15px;
    background: rgba(255,255,255,.74);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.8);
    box-shadow: var(--shadow-xs);

  }

  .hero-fact b {

    display: block;
    font-size: 13px;

  }

  .hero-fact span {

    font-size: 11px;
    color: var(--muted);

  }

  .booking-bar {

    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%);
    width: min(1160px,92vw);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 220px;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(20px);
    border-radius: 22px;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255,255,255,.9);
    overflow: hidden;

  }

  .booking-bar .field-slot {

    padding: 18px 22px;
    border-right: 1px solid var(--line);

  }

  .booking-bar label {

    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    font-weight: 800;

  }

  .booking-bar input,.booking-bar select {

    width: 100%;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-weight: 800;
    margin-top: 5px;
    outline: none;

  }

  .booking-bar .btn {

    border-radius: 0;

  }

  .scroll-cue {

    position: absolute;
    right: 5vw;
    bottom: 126px;
    z-index: 3;
    writing-mode: vertical-rl;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: 10px;
    color: #647080;
    display: flex;
    align-items: center;
    gap: 9px;

  }

  .scroll-cue:after {

    content: "";
    height: 50px;
    width: 1px;
    background: linear-gradient(var(--gold),transparent);
    animation: cue 1.8s ease-in-out infinite;

  }

  @keyframes cue{50%{transform:translateY(10px)}}

  .page-hero {

    padding: calc(var(--nav-h) + 80px) 0 74px;
    background: radial-gradient(circle at 85% 30%,#e8f3fb 0,transparent 30%),linear-gradient(135deg,#fff,#f7f0e4);
    position: relative;
    overflow: hidden;

  }

  .page-hero:after {

    content: "";
    position: absolute;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    border: 1px solid rgba(201,154,70,.22);
    right: -100px;
    bottom: -180px;

  }

  .page-title {

    font-size: clamp(52px,6vw,80px);
    line-height: .98;
    margin: 16px 0;

  }

  .page-hero .lead {

    max-width: 740px;

  }

  .room-card .media,.image-card .media {

    height: 260px;
    overflow: hidden;
    position: relative;
    background: #eee;

  }

  .room-card .media img,.image-card .media img {

    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s var(--ease),filter .5s ease;

  }

  .room-card:hover .media img,.image-card:hover .media img {

    transform: scale(1.075);
    filter: saturate(1.05) contrast(1.02);

  }

  .room-card .badge {

    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(10px);
    border-radius: 999px;
    padding: 7px 10px;
    font-size: 11px;
    font-weight: 800;

  }

  .price {

    font-size: 24px;
    font-weight: 850;
    color: var(--gold-dark);

  }

  .pill {

    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #f5efe5;
    color: #7c5b24;
    font-size: 11px;
    font-weight: 800;

  }

  .amenities {

    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 14px 0;

  }

  .amenity {

    font-size: 11px;
    padding: 6px 9px;
    border-radius: 999px;
    background: #f5f7f9;
    color: #526273;
    border: 1px solid #e8edf1;

  }

  .amenity-row {

    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 14px 0;

  }

  .amenity-row span {

    display: inline-flex;
    align-items: center;
    padding: 6px 9px;
    border-radius: 999px;
    background: #f5f7f9;
    color: #526273;
    border: 1px solid #e8edf1;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;

  }

  .feature-card:hover {

    transform: translateY(-7px);
    box-shadow: var(--shadow);
    border-color: #e7c98e;

  }

  .feature-icon {

    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg,#f7ecd5,#e8f2f8);
    display: grid;
    place-items: center;
    color: var(--gold-dark);
    font-size: 20px;
    margin-bottom: 18px;

  }

  .photo-banner:after {

    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,rgba(7,24,42,.72),rgba(7,24,42,.04) 70%);

  }

  .photo-banner .content {

    position: relative;
    z-index: 2;
    color: #fff;
    padding: 38px;
    max-width: 620px;

  }

  .photo-banner .section-title {

    color: #fff;

  }

  .gallery-item:nth-child(1),.gallery-item:nth-child(6) {

    grid-column: span 7;
    grid-row: span 2;

  }

  .gallery-item:nth-child(2),.gallery-item:nth-child(5) {

    grid-column: span 5;
    grid-row: span 2;

  }

  .gallery-item:nth-child(3),.gallery-item:nth-child(4),.gallery-item:nth-child(n/**/+7) {

    grid-column: span 4;

  }

  .gallery-item:hover img {

    transform: scale(1.06);

  }

  .gallery-item:hover:after {

    opacity: 1;
    transform: none;

  }

  .review-card {

    padding: 24px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-xs);

  }

  .stars {

    color: #e1a33c;
    letter-spacing: .08em;

  }

  .rating-big {

    font-family: Georgia,serif;
    font-size: 72px;
    line-height: 1;

  }

  .map {

    width: 100%;
    height: 480px;
    border: 0;
    border-radius: 26px;
    box-shadow: var(--shadow);

  }

  .auth-shell {

    min-height: 100svh;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    background: #f7f4ed;

  }

  .auth-visual {

    position: relative;
    min-height: 100svh;
    background: url("../images/braj/hero-pool-sunset.webp") center/cover;

  }

  .auth-visual:after {

    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,rgba(11,36,60,.35),transparent 60%);

  }

  .auth-panel {

    display: grid;
    place-items: center;
    padding: 60px 28px;

  }

  .auth-card {

    width: min(480px,100%);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 28px;
    padding: 34px;
    box-shadow: var(--shadow);

  }

  .auth-card h1 {

    font-family: Georgia,serif;
    font-size: 45px;
    font-weight: 500;

  }

  .divider {

    display: flex;
    align-items: center;
    gap: 12px;
    color: #88929d;
    font-size: 12px;
    margin: 20px 0;

  }

  .divider:before,.divider:after {

    content: "";
    height: 1px;
    background: #e4e7ea;
    flex: 1;

  }

  .dash {

    min-height: 100svh;
    display: grid;
    grid-template-columns: 278px minmax(0,1fr);
    background: #f6f8fa;

  }

  .side .brand {

    padding: 10px 10px 26px;

  }

  .side-group {

    display: grid;
    gap: 5px;
    margin: 8px 0 18px;

  }

  .side-label {

    padding: 6px 12px;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 9px;
    font-weight: 850;
    color: #9aa3ab;

  }

  .side a {

    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 750;
    color: #516170;
    transition: .25s;

  }

  .side a:hover,.side a.active {

    background: linear-gradient(135deg,#f7efe1,#edf5fb);
    color: var(--ink);
    transform: translateX(3px);

  }

  .side a.active {

    box-shadow: inset 3px 0 0 var(--gold);

  }

  .side-icon {

    width: 23px;
    text-align: center;
    color: var(--gold-dark);

  }

  .dash-top {

    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    margin-bottom: 30px;

  }

  .dash-title h1 {

    font-family: Georgia,serif;
    font-size: 42px;
    font-weight: 500;
    margin: 4px 0;

  }

  .dash-actions {

    display: flex;
    gap: 10px;
    align-items: center;

  }

  .icon-btn {

    width: 42px;
    height: 42px;
    border-radius: 13px;
    border: 1px solid var(--line);
    background: #fff;
    cursor: pointer;
    color: var(--ink);
    transition: .25s;

  }

  .icon-btn:hover {

    transform: translateY(-3px);
    box-shadow: var(--shadow-xs);

  }

  .kpis {

    grid-template-columns: repeat(4,minmax(0,1fr));

  }

  .kpi {

    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 20px;
    box-shadow: var(--shadow-xs);
    position: relative;
    overflow: hidden;
    transition: .35s;

  }

  .kpi:after {

    content: "";
    position: absolute;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: radial-gradient(circle,#f3e4c6,transparent 68%);
    right: -20px;
    top: -22px;

  }

  .kpi:hover {

    transform: translateY(-6px);
    box-shadow: var(--shadow);

  }

  .kpi .big {

    font-family: Georgia,serif;
    font-size: 34px;
    margin-top: 10px;

  }

  .kpi .trend {

    font-size: 11px;
    color: var(--success);
    font-weight: 800;

  }

  .panel-title {

    font-size: 18px;
    margin-bottom: 14px;

  }

  .chart {

    height: 220px;
    display: flex;
    align-items: end;
    gap: 10px;
    padding: 20px 8px 8px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg,rgba(223,238,249,.4),transparent);
    border-radius: 14px;

  }

  .chart-bar {

    flex: 1;
    min-width: 10px;
    background: linear-gradient(180deg,#d9b66f,#b9852f);
    border-radius: 9px 9px 2px 2px;
    animation: barGrow .8s var(--ease) both;
    transform-origin: bottom;

  }

  @keyframes barGrow{from{transform:scaleY(.02)}to{transform:scaleY(1)}}

  .chart-labels {

    display: flex;
    justify-content: space-around;
    font-size: 10px;
    color: var(--muted);
    margin-top: 8px;

  }

  table {

    width: 100%;
    border-collapse: collapse;
    min-width: 760px;

  }

  .table th,.table td {

    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid #edf0f2;
    font-size: 13px;

  }

  .table th {

    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #7e8993;
    background: #fafbfc;

  }

  .table tr:last-child td {

    border-bottom: 0;

  }

  .status {

    display: inline-flex;
    padding: 6px 9px;
    border-radius: 999px;
    background: #edf8f1;
    color: #287247;
    font-size: 11px;
    font-weight: 850;

  }

  .status.gray {

    background: #f0f2f4;
    color: #69747e;

  }

  .toolbar {

    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;

  }

  .toolbar .search {

    min-width: 280px;

  }

  .admin-form {

    display: grid;
    gap: 16px;

  }

  .inline-edit {

    display: grid;
    grid-template-columns: 1.4fr .7fr .5fr .6fr auto;
    gap: 9px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #eef0f2;

  }

  .inline-edit:last-child {

    border-bottom: 0;

  }

  .toast {

    position: fixed;
    z-index: 500;
    left: 50%;
    bottom: 28px;
    transform: translate(-50%,20px);
    background: #102b49;
    color: #fff;
    padding: 12px 18px;
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    pointer-events: none;
    transition: .3s;
    max-width: min(520px,90vw);
    font-weight: 750;
    font-size: 13px;

  }

  .modal {

    position: fixed;
    z-index: 400;
    inset: 0;
    display: none;
    place-items: center;
    padding: 22px;
    background: rgba(8,25,42,.45);
    backdrop-filter: blur(8px);

  }

  .modal.open {

    display: grid;
    animation: fade .22s ease;

  }

  .modal-card {

    width: min(720px,96vw);
    max-height: 90svh;
    overflow: auto;
    background: #fff;
    border-radius: 24px;
    box-shadow: var(--shadow-lg);
    transform: translateY(12px) scale(.98);
    animation: modalIn .35s var(--ease) forwards;

  }

  @keyframes modalIn{to{transform:none}}

  @keyframes fade{from{opacity:0}to{opacity:1}}

  .modal-head {

    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    padding: 22px 24px;
    border-bottom: 1px solid var(--line);

  }

  .modal-body {

    padding: 24px;

  }

  .modal-close {

    border: 0;
    background: #f2f4f6;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    cursor: pointer;

  }

  .lightbox {

    position: fixed;
    z-index: 600;
    inset: 0;
    background: rgba(4,14,25,.88);
    display: none;
    place-items: center;
    padding: 24px;

  }

  .lightbox.open {

    display: grid;

  }

  .lightbox img {

    max-height: 86svh;
    max-width: 92vw;
    border-radius: 18px;
    box-shadow: 0 35px 100px rgba(0,0,0,.4);

  }

  .lightbox button {

    position: fixed;
    right: 26px;
    top: 24px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    font-size: 22px;

  }

  .reveal.in {

    opacity: 1;
    transform: none;

  }

  .reveal[data-delay="1"] {

    transition-delay: .08s;

  }

  .reveal[data-delay="2"] {

    transition-delay: .16s;

  }

  .reveal[data-delay="3"] {

    transition-delay: .24s;

  }

  .floating-help:hover {

    transform: translateY(-5px) rotate(4deg) scale(1.04);

  }

  .footer {

    background: linear-gradient(180deg,#eef6fb 0%,#f8f3ea 100%);
    color: #53697a;
    padding: 70px 0 28px;
    border-top: 1px solid #dde8ef;

  }

  .footer-grid {

    display: grid;
    grid-template-columns: 2fr repeat(3,1fr);
    gap: 38px;

  }

  .footer h4 {

    color: #17364e;

  }

  .footer a {

    color: #53697a;

  }

  .footer a:hover {

    color: #17364e;

  }

  .footer .brand {

    color: #17364e;

  }

  .footer-bottom {

    margin-top: 44px;
    border-top: 1px solid rgba(23,54,78,.10);
    padding-top: 22px;
    font-size: 12px;
    color: #738797;

  }

  .metric-list {

    display: grid;
    gap: 10px;

  }

  .metric-row {

    display: flex;
    align-items: center;
    gap: 10px;

  }

  .metric-row span:first-child {

    min-width: 92px;
    font-size: 12px;
    color: var(--muted);

  }

  .progress {

    height: 8px;
    background: #eef1f3;
    border-radius: 999px;
    flex: 1;
    overflow: hidden;

  }

  .progress i {

    display: block;
    height: 100%;
    background: linear-gradient(90deg,#d1a453,#8ca0b4);
    border-radius: 999px;

  }

  .offer-card {

    min-height: 320px;
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    color: #fff;
    display: flex;
    align-items: end;

  }

  .offer-card img {

    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .7s;

  }

  .offer-card:after {

    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,rgba(10,28,47,.75),rgba(10,28,47,.05));

  }

  .offer-card:hover img {

    transform: scale(1.06);

  }

  .offer-card .content {

    position: relative;
    z-index: 2;
    padding: 24px;

  }

  .service-option {

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    transition: .3s;

  }

  .service-option:hover {

    transform: translateY(-4px);
    box-shadow: var(--shadow-xs);
    border-color: #e7c98e;

  }

  .service-option b {

    display: block;

  }

  .service-option span {

    font-size: 12px;
    color: var(--muted);

  }

  .notice {

    padding: 14px 16px;
    border-radius: 14px;
    background: #eef7ff;
    border: 1px solid #d3e7f6;
    color: #315775;
    font-size: 13px;

  }

  .notice.warn {

    background: #fff7e9;
    border-color: #f0ddbc;
    color: #7e5a20;

  }

  .notice.ok {

    background: #eef9f3;
    border-color: #cfead9;
    color: #2f6e4d;

  }

  .code {

    font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
    background: #f3f5f7;
    padding: 2px 6px;
    border-radius: 6px;

  }

  .hero {

    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: #f2eee7;
    padding: calc(var(--nav-h) + 42px) 0 150px;
    min-height: 100svh;
    padding-top: calc(var(--nav-h) + 28px);
    padding-bottom: 156px;
    isolation: isolate;

  }

  .hero-media {

    position: absolute;
    inset: 0;
    background: url("../images/reference/heritage-suite.webp") center/cover no-repeat;
    will-change: transform;
    transform: translateY(var(--parallax-y,0)) scale(1.045);
    transition: filter .4s ease;
    background-position: center;

  }

  .hero:before {

    content: "";
    position: absolute;
    z-index: 1;
    inset: auto auto 8% 48%;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(226,191,122,.2),transparent 70%);
    filter: blur(10px);
    pointer-events: none;

  }

  .hero .display {

    font-size: clamp(56px,7.2vw,102px);
    line-height: .88;
    margin: 20px 0 24px;
    color: #102b49;
    text-wrap: balance;
    text-shadow: 0 4px 28px rgba(255,255,255,.55);

  }

  .hero-content .cluster {

    margin-top: 26px;

  }

  .nav:before {

    content: "";
    position: absolute;
    inset: 0;
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(201,154,70,.16);
    z-index: -1;
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(22px) saturate(1.25);

  }

  .nav.scrolled:before {

    box-shadow: 0 8px 28px rgba(22,38,57,.08);
    background: rgba(255,255,255,.94);

  }

  .room-card,.feature-card,.panel,.table-wrap,.offer-card,.photo-banner {

    transition: transform .38s cubic-bezier(.2,.8,.2,1),box-shadow .38s ease,border-color .38s ease;

  }

  .room-card:hover,.feature-card:hover,.panel:hover {

    box-shadow: 0 26px 65px rgba(28,46,67,.11);
    border-color: #e8d5b5;

  }

  .room-card .media img,.media-card img {

    transition: transform .75s cubic-bezier(.2,.8,.2,1),filter .4s ease;

  }

  .room-card:hover .media img,.media-card:hover img {

    transform: scale(1.055);
    filter: saturate(1.03) contrast(1.015);

  }

  .reveal {

    opacity: 0;
    transform: translateY(26px) scale(.985);
    transition: opacity .72s ease var(--reveal-delay,0ms),transform .72s cubic-bezier(.2,.8,.2,1) var(--reveal-delay,0ms);

  }

  .reveal.visible {

    opacity: 1;
    transform: none;

  }

  @keyframes luxModal{from{opacity:0;transform:translateY(18px) scale(.965)}to{opacity:1;transform:none}}

  .toast.error {

    background: #8f2d2d;
    color: #fff;

  }

  .price-stack {

    text-align: right;
    display: grid;
    line-height: 1.05;

  }

  .price-stack b {

    font-size: 20px;
    color: var(--ink);

  }

  .price-stack del {

    font-size: 11px;
    color: #99a1a8;

  }

  .price-stack small {

    font-size: 10px;
    color: var(--muted);

  }

  .room-admin-cell {

    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 210px;

  }

  .room-admin-cell img {

    width: 58px;
    height: 46px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--line);

  }

  .compact-input {

    min-width: 130px;
    padding: 8px 10px;
    border-radius: 10px;

  }

  .hint {

    font-size: 11px;
    color: var(--muted);
    margin-top: 5px;

  }

  .check {

    display: flex;
    gap: 9px;
    align-items: center;
    font-size: 13px;
    font-weight: 700;

  }

  .check input {

    accent-color: #b8842e;

  }

  .success-mark {

    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #eef9f3;
    color: #2f7b55;
    font-size: 34px;
    margin-bottom: 16px;

  }

  .invoice-mini {

    display: grid;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;

  }

  .invoice-mini>div {

    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);

  }

  .invoice-mini>div:last-child {

    border-bottom: 0;

  }

  .invoice-mini span {

    color: var(--muted);

  }

  .room-modal {

    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 24px;
    align-items: center;

  }

  .room-modal img {

    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: 18px;

  }

  .notification-unread {

    border-color: #ddbd7b;
    box-shadow: inset 4px 0 #d0a04d;

  }

  .security-grid {

    display: grid;
    gap: 10px;

  }

  .security-item {

    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
    text-transform: capitalize;

  }

  .security-item .good {

    color: #2f7b55;

  }

  .security-item .bad {

    color: #a43e3e;

  }

  .media-grid {

    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 18px;

  }

  .media-card {

    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-xs);

  }

  .media-card>img {

    width: 100%;
    height: 190px;
    object-fit: cover;

  }

  .media-card>div {

    padding: 15px;
    display: grid;
    gap: 8px;

  }

  .media-card span {

    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .09em;

  }

  .media-url {

    font-size: 11px;

  }

  .admin-hero {

    border-radius: 26px;
    padding: 28px;
    background: linear-gradient(135deg,#fffaf1,#edf5fb);
    border: 1px solid #ebe5da;
    box-shadow: 0 22px 60px rgba(31,49,69,.08);

  }

  .luxury-stat {

    position: relative;
    overflow: hidden;

  }

  .luxury-stat:after {

    content: "";
    position: absolute;
    right: -35px;
    top: -45px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(213,173,95,.18),transparent 70%);

  }

  .side {

    position: sticky;
    top: 0;
    height: 100svh;
    padding: 24px 18px;
    background: linear-gradient(180deg,#fff,#fbfaf7);
    border-right: 1px solid #e5e7e9;
    color: var(--ink);
    z-index: 30;
    overflow-y: auto;
    box-shadow: 8px 0 30px rgba(25,47,70,.035);

  }

  .side::-webkit-scrollbar {

    width: 5px;

  }

  .side::-webkit-scrollbar-thumb {

    background: #e5d4b4;
    border-radius: 10px;

  }

  .dash-main {

    padding: 28px 32px 70px;
    min-width: 0;
    background: radial-gradient(circle at 88% 4%,rgba(222,190,126,.08),transparent 24%),#f7f9fb;

  }

  .table tbody tr {

    transition: background .25s ease,transform .25s ease;

  }

  .table tbody tr:hover {

    background: #fffdf8;

  }

  .floating-help {

    position: fixed;
    z-index: 90;
    right: 22px;
    bottom: 22px;
    width: 54px;
    height: 54px;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg,#d0a04d,#ad7928);
    color: white;
    box-shadow: 0 16px 36px rgba(159,111,31,.3);
    cursor: pointer;
    transition: .35s;
    animation: helpFloat 3s ease-in-out infinite;

  }

  @keyframes helpFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

  body[data-page^="admin-"] .brand-mark {

    background: linear-gradient(135deg,#fffaf2,#f4e8d0);
    border-color: #d3b179;

  }

  body[data-page^="admin-"] .side a,
body[data-page^="guest-"] .side a {

    border: 1px solid transparent;
    border-radius: 16px;
    transition: transform .28s var(--ease),background .28s ease,border-color .28s ease,box-shadow .28s ease,color .28s ease;

  }

  body[data-page^="admin-"] .side a.active {

    background: linear-gradient(135deg,#e8f2fc,#fff3dd);
    border-color: #d8dfeb;
    color: #13304a;
    box-shadow: 0 16px 30px rgba(37,59,83,.09);

  }

  body[data-page^="admin-"] .panel,
body[data-page^="admin-"] .table-wrap,
body[data-page^="admin-"] .kpi,
body[data-page^="admin-"] .admin-hero {

    background: linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
    border: 1px solid #dde7f0;
    box-shadow: 0 18px 38px rgba(36,58,83,.07);

  }

  body[data-page^="guest-"] .side a.active {

    background: linear-gradient(135deg,#eef8f5,#fff1df);
    border-color: #dde7e2;
    color: #163548;
    box-shadow: 0 16px 30px rgba(39,67,65,.08);

  }

  body[data-page^="guest-"] .panel,
body[data-page^="guest-"] .table-wrap,
body[data-page^="guest-"] .kpi,
body[data-page^="guest-"] .admin-hero {

    background: linear-gradient(180deg,#ffffff 0%,#fdfffe 100%);
    border: 1px solid #dfeae6;
    box-shadow: 0 18px 38px rgba(39,67,65,.06);

  }

  body[data-page^="guest-"] .btn.gold {

    background: linear-gradient(135deg,#d4b176,#bc9160);

  }

  body[data-page^="admin-"] .brand span,
body[data-page^="guest-"] .brand span {

    font-size: 15px;
    letter-spacing: .11em;

  }

  body[data-page^="admin-"] .brand small,
body[data-page^="guest-"] .brand small {

    letter-spacing: .18em;
    color: #68809a;

  }

  .brand-mark {

    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1.4px solid var(--gold);
    border-radius: 50%;
    color: var(--gold-dark);
    font-size: 20px;
    box-shadow: 0 8px 20px rgba(134,92,27,.12);
    background: linear-gradient(135deg,#fffdf8,#f7efe3);
    overflow: hidden;

  }

  .brand-mark img {

    display: block;
    width: 92%;
    height: 92%;
    object-fit: contain;

  }

  .menu-media-card,.menu-callout {

    background: linear-gradient(180deg,#ffffff 0%,#fffdf8 100%);
    border: 1px solid var(--line);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-xs);

  }

  .menu-media-card img,.menu-callout img {

    width: 100%;
    height: 240px;
    object-fit: cover;

  }

  .menu-callout img {

    height: 280px;

  }

  .menu-count-card {

    display: grid;
    gap: 4px;
    min-width: 160px;
    padding: 14px 16px;
    border-radius: 18px;
    background: linear-gradient(135deg,#fff,#f7efe3);
    border: 1px solid var(--line);

  }

  .menu-count-card b {

    font-size: 18px;
    color: var(--ink);

  }

  .menu-count-card span {

    font-size: 12px;
    color: var(--muted);

  }

  .filter-bar {

    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 8px 0 28px;

  }

  .filter-chip {

    border: 1px solid var(--line-strong);
    background: #fff;
    padding: 10px 14px;
    border-radius: 999px;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    transition: .25s;

  }

  .filter-chip:hover,.filter-chip.active {

    background: linear-gradient(135deg,#fff3dd,#eef5fb);
    border-color: #dcc090;
    color: var(--ink);

  }

  .menu-card {

    padding: 0;
    overflow: hidden;

  }

  .menu-card:hover .menu-card-media img {

    transform: scale(1.06);

  }

  .menu-card-body {

    padding: 18px;
    display: grid;
    gap: 10px;

  }

  .menu-card-body h3 {

    margin: 2px 0 0;
    font-size: 20px;

  }

  .feature-listing {

    gap: 14px;

  }

  .feature-line {

    display: grid;
    gap: 3px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255,255,255,.76);

  }

  .feature-line b {

    font-size: 14px;

  }

  .feature-line span {

    color: var(--muted);
    font-size: 13px;

  }

  .rich-toolbar {

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 20px;

  }

  .admin-menu-cell {

    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 240px;

  }

  .admin-menu-cell img {

    width: 70px;
    height: 58px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--line);

  }

  .guest-hero-card {

    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 26px;
    align-items: center;
    margin-bottom: 22px;

  }

  .guest-hero-card img {

    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 22px;

  }

  .guest-hero-card h2,.split-hero h2 {

    font-size: 34px;
    line-height: 1.08;
    margin: 10px 0 12px;
    font-family: Georgia,serif;

  }

  .action-grid {

    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;

  }

  .quick-action-card {

    display: grid;
    gap: 6px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(180deg,#fff,#fbfdff);
    box-shadow: var(--shadow-xs);
    transition: .28s;

  }

  .quick-action-card:hover {

    transform: translateY(-4px);
    box-shadow: var(--shadow);

  }

  .quick-action-card b {

    font-size: 14px;

  }

  .quick-action-card span {

    font-size: 13px;
    color: var(--muted);

  }

  .mini-menu-card {

    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 14px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(180deg,#ffffff 0%,#fdfcf8 100%);

  }

  .mini-menu-card img {

    width: 92px;
    height: 78px;
    object-fit: cover;
    border-radius: 14px;

  }

  .mini-menu-card h4 {

    margin: 8px 0 4px;
    font-size: 16px;

  }

  .mini-detail-row {

    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);

  }

  .mini-detail-row:last-child {

    border-bottom: 0;

  }

  .split-hero {

    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 24px;
    margin-bottom: 22px;

  }

  .compact-actions {

    align-content: start;

  }

  .guest-kpi-grid .kpi .big {

    font-size: 42px;

  }

  .pms-nav {

    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 20px;

  }

  .pms-nav a {

    padding: 9px 13px;
    border: 1px solid var(--line,#e6e6e6);
    border-radius: 12px;
    background: #fff;
    font-size: 13px;
    font-weight: 700;

  }

  .pms-nav a.active {

    box-shadow: 0 0 0 2px rgba(31,86,255,.12);
    border-color: #8fb0ff;

  }

  .pms-kpis {

    grid-template-columns: repeat(4,minmax(0,1fr));

  }

  .room-rack {

    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 14px;

  }

  .rack-room {

    background: #fff;
    border: 1px solid #e7e9ee;
    border-radius: 18px;
    padding: 16px;
    min-height: 145px;
    box-shadow: 0 8px 25px rgba(30,38,60,.06);

  }

  .rack-room h3 {

    margin: 0 0 4px;

  }

  .rack-room .rack-state {

    display: inline-flex;
    padding: 5px 9px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 800;
    background: #eef2f7;

  }

  .rack-room[data-status="Occupied"] {

    border-left: 5px solid #335cff;

  }

  .rack-room[data-status="Vacant Clean"] {

    border-left: 5px solid #28a66a;

  }

  .rack-room[data-status="Vacant Dirty"],.rack-room[data-status="Inspection Pending"] {

    border-left: 5px solid #e29a2d;

  }

  .rack-room[data-status="Maintenance"],.rack-room[data-status="Out of Order"],.rack-room[data-status="Blocked"] {

    border-left: 5px solid #d94e4e;

  }

  .rack-room[data-status="Reserved"] {

    border-left: 5px solid #8f63d9;

  }

  .form-grid {

    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;

  }

  .form-grid .wide {

    grid-column: 1/-1;

  }

  .pms-tabs {

    display: flex;
    gap: 8px;
    flex-wrap: wrap;

  }

  .pms-scroll {

    overflow: auto;
    max-width: 100%;

  }

  .qr-card {

    display: grid;
    place-items: center;
    gap: 10px;
    padding: 18px;
    border: 1px dashed #cdd4df;
    border-radius: 16px;
    background: #fff;

  }

  .qr-grid {

    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 14px;

  }

  .session-active {

    border: 2px solid #7ba1ff;

  }

  .permission-grid {

    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px;

  }

  .permission-check {

    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 10px;
    border: 1px solid #e7e9ee;
    border-radius: 12px;

  }

  .mobile-scan-shell {

    max-width: 560px;
    margin: 0 auto;
    padding: 18px;

  }

  .scan-result {

    padding: 18px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #e7e9ee;

  }

  .camera-box {

    aspect-ratio: 1.25;
    background: #111;
    border-radius: 18px;
    overflow: hidden;
    display: grid;
    place-items: center;
    color: #fff;

  }

  .camera-box video {

    width: 100%;
    height: 100%;
    object-fit: cover;

  }

  .status-legend {

    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;

  }

  .status-legend span {

    font-size: 11px;
    padding: 5px 8px;
    border-radius: 99px;
    background: #f3f5f8;

  }

  @media (max-width:620px) {

    .pms-kpis,.room-rack,.qr-grid,.form-grid,.permission-grid {

      grid-template-columns: 1fr;

    }

    .dash-main {

      padding-left: 16px;
      padding-right: 16px;

    }

    .rack-room {

      min-height: auto;

    }

  }

  .step2-nav {

    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 20px;

  }

  .step2-nav a {

    padding: 9px 12px;
    border: 1px solid #e4e8ef;
    border-radius: 12px;
    background: #fff;
    font-size: 12px;
    font-weight: 800;

  }

  .step2-nav a.active {

    border-color: #7fa5ff;
    box-shadow: 0 0 0 2px rgba(45,93,220,.10);

  }

  .business-kpis {

    grid-template-columns: repeat(5,minmax(0,1fr));

  }

  .kds-board {

    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 14px;

  }

  .kds-card {

    border-top: 5px solid #8793a8;

  }

  .kds-card[data-kds-state="New"] {

    border-top-color: #d94e4e;

  }

  .kds-card[data-kds-state="Preparing"],.kds-card[data-kds-state="Accepted"] {

    border-top-color: #e29a2d;

  }

  .kds-card[data-kds-state="Ready"] {

    border-top-color: #28a66a;

  }

  .module-grid>.wide {

    grid-column: 1/-1;

  }

  .compact-panel {

    padding: 16px;

  }

  .step2-section {

    margin-top: 20px;

  }

  .step2-section h3 {

    margin-bottom: 12px;

  }

  .pos-layout {

    display: grid;
    grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
    gap: 18px;

  }

  .report-grid {

    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px;

  }

  .report-grid .wide {

    grid-column: 1/-1;

  }

  .step3-nav {

    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 14px 0 20px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    position: sticky;
    top: 8px;
    z-index: 12;
    box-shadow: 0 8px 24px rgba(32,47,62,.06);

  }

  .step3-nav a {

    padding: 9px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);

  }

  .step3-nav a.active,.step3-nav a:hover {

    background: var(--blue-soft);
    color: var(--blue-strong);

  }

  .integration-card {

    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px;
    background: #fff;

  }

  .integration-status {

    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 800;
    padding: 6px 9px;
    border-radius: 999px;
    background: #eef8f1;
    color: #247043;

  }

  .integration-status.off {

    background: #fff3e8;
    color: #a85c12;

  }

  .pipeline {

    display: grid;
    grid-template-columns: repeat(7,minmax(100px,1fr));
    gap: 10px;
    overflow: auto;
    padding-bottom: 4px;

  }

  .pipeline-card {

    min-width: 120px;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 13px;
    background: #fff;

  }

  .pipeline-card .big {

    font-size: 25px;
    font-weight: 800;
    margin-top: 4px;

  }

  .compact-form {

    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 10px;

  }

  .compact-form .wide {

    grid-column: span 2;

  }

  .compact-form .full {

    grid-column: 1/-1;

  }

  .status-dot {

    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;

  }

  .json-preview {

    max-height: 360px;
    overflow: auto;
    background: #12202d;
    color: #edf7ff;
    padding: 15px;
    border-radius: 14px;
    font: 12px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;
    white-space: pre-wrap;

  }

  @media (max-width:1000px) {

    .compact-form {

      grid-template-columns: repeat(2,minmax(0,1fr));

    }

    .pipeline {

      grid-template-columns: repeat(7,140px);

    }

  }

  .module-grid {

    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);

  }

  .module-grid>.panel,.module-grid>.table-wrap,.report-grid>.panel,.pos-layout>* {

    min-width: 0;

  }

  .mobile-panel-menu,.side-backdrop {

    display: none;

  }

  body[data-page^="admin-"] .panel,
body[data-page^="admin-"] .table-wrap,
body[data-page^="admin-"] .kpi,
body[data-page^="admin-"] .admin-hero,
body[data-page^="admin-"] .integration-card,
body[data-page^="admin-"] .pipeline-card,
body[data-page^="admin-"] .rack-room,
body[data-page^="admin-"] .qr-card {

    background: var(--admin-surface);
    border-color: var(--admin-line);
    box-shadow: 0 12px 34px rgba(27,59,91,.07);

  }

  body[data-page^="admin-"] .btn.gold {

    background: linear-gradient(135deg,var(--admin-primary),var(--admin-primary-2));
    color: #fff;
    box-shadow: 0 8px 20px rgba(37,99,235,.18);

  }

  body[data-page^="admin-"] .btn.navy {

    background: linear-gradient(135deg,#123b5b,#0c2b46);

  }

  body[data-page^="admin-"] .dash-main:before {

    content: "";
    position: fixed;
    right: 3vw;
    top: 90px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(96,165,250,.08),transparent 68%);
    pointer-events: none;
    z-index: 0;

  }

  body[data-page^="admin-"] .dash-main>* {

    position: relative;
    z-index: 1;

  }

  body[data-page^="admin-"] .side .brand {

    color: #12314d;
    padding-bottom: 24px;

  }

  body[data-page^="admin-"] .side .brand small {

    color: #6f89a2;

  }

  body[data-page^="admin-"] .side .brand-mark {

    background: #fff;
    border-color: #b8d4ee;
    box-shadow: 0 8px 24px rgba(37,99,235,.12);

  }

  body[data-page^="admin-"] .side a.active,
body[data-page^="admin-"] .side a[aria-current="page"] {

    color: #fff;
    background: linear-gradient(135deg,var(--admin-primary) 0%,#3b82f6 58%,var(--admin-sky) 120%);
    border-color: rgba(37,99,235,.36);
    box-shadow: 0 10px 26px rgba(37,99,235,.24);
    font-weight: 850;
    transform: none;

  }

  body[data-page^="admin-"] .side a.active:before,
body[data-page^="admin-"] .side a[aria-current="page"]:before {

    content: "";
    position: absolute;
    left: auto;
    right: -7px;
    top: 50%;
    width: 4px;
    height: 25px;
    border-radius: 99px;
    background: #60a5fa;
    transform: translateY(-50%);
    box-shadow: 0 0 0 4px rgba(96,165,250,.12);

  }

  body[data-page^="admin-"] .side a.active .side-icon,
body[data-page^="admin-"] .side a[aria-current="page"] .side-icon {

    color: #fff;

  }

  body[data-page^="admin-"] .side::-webkit-scrollbar-thumb {

    background: #bfd8ec;

  }

  body[data-page^="admin-"] .dash-title .eyebrow {

    color: var(--admin-primary);

  }

  body[data-page^="admin-"] .dash-title .eyebrow:before {

    background: linear-gradient(90deg,var(--admin-primary),var(--admin-sky));
    height: 2px;

  }

  body[data-page^="admin-"] .muted {

    color: var(--admin-muted);

  }

  body[data-page^="admin-"] .icon-btn {

    background: #fff;
    color: #1f5f9b;
    border-color: #d2e2f0;
    box-shadow: 0 8px 22px rgba(37,99,235,.07);

  }

  body[data-page^="admin-"] .icon-btn:hover {

    color: #fff;
    background: linear-gradient(135deg,var(--admin-primary),#3b82f6);
    border-color: transparent;
    box-shadow: 0 12px 28px rgba(37,99,235,.20);

  }

  body[data-page^="admin-"] .admin-hero {

    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 98% 0%,rgba(14,165,233,.14),transparent 31%),
    linear-gradient(135deg,#ffffff 0%,#f3f9ff 52%,#eaf4ff 100%);
    border-color: #cfe2f3;
    box-shadow: 0 18px 46px rgba(35,87,145,.085);

  }

  body[data-page^="admin-"] .admin-hero h2 {

    color: #113555;
    letter-spacing: -.025em;

  }

  body[data-page^="admin-"] .admin-hero .eyebrow {

    color: #2b70cd;

  }

  body[data-page^="admin-"] .quick-action-card {

    position: relative;
    overflow: hidden;
    background: rgba(255,255,255,.94);
    border-color: #d3e3f1;
    box-shadow: 0 8px 24px rgba(36,87,140,.065);

  }

  body[data-page^="admin-"] .quick-action-card:after {

    content: "→";
    position: absolute;
    right: 15px;
    top: 14px;
    color: #71a5d4;
    font-weight: 900;
    transition: .28s ease;

  }

  body[data-page^="admin-"] .quick-action-card:hover {

    transform: translateY(-4px);
    background: #fff;
    border-color: #9fc7ec;
    box-shadow: 0 15px 30px rgba(37,99,235,.12);

  }

  body[data-page^="admin-"] .quick-action-card:hover:after {

    color: var(--admin-primary);
    transform: translateX(3px);

  }

  body[data-page^="admin-"] .quick-action-card b {

    color: #123a5c;

  }

  body[data-page^="admin-"] .quick-action-card span {

    color: #70879e;

  }

  body[data-page^="admin-"] .panel,
body[data-page^="admin-"] .table-wrap,
body[data-page^="admin-"] .kpi,
body[data-page^="admin-"] .integration-card,
body[data-page^="admin-"] .pipeline-card,
body[data-page^="admin-"] .rack-room,
body[data-page^="admin-"] .qr-card {

    background: rgba(255,255,255,.96);
    border-color: var(--admin-line);
    box-shadow: var(--admin-shadow);

  }

  body[data-page^="admin-"] .panel {

    border-radius: 20px;

  }

  body[data-page^="admin-"] .panel:hover {

    border-color: #bfd8ed;
    box-shadow: var(--admin-shadow-lg);

  }

  body[data-page^="admin-"] .kpi {

    position: relative;
    overflow: hidden;
    min-height: 150px;
    border-top: 3px solid #8ec5f5;

  }

  body[data-page^="admin-"] .kpi:nth-child(2) {

    border-top-color: #62b5ef;

  }

  body[data-page^="admin-"] .kpi:nth-child(3) {

    border-top-color: #4f8df3;

  }

  body[data-page^="admin-"] .kpi:nth-child(4) {

    border-top-color: #4267d5;

  }

  body[data-page^="admin-"] .kpi:before {

    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    right: -30px;
    top: -40px;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(96,165,250,.16),transparent 70%);

  }

  body[data-page^="admin-"] .kpi:after {

    width: 74px;
    height: 74px;
    right: -18px;
    bottom: -22px;
    top: auto;
    background: radial-gradient(circle,rgba(14,165,233,.10),transparent 70%);

  }

  body[data-page^="admin-"] .kpi:hover {

    transform: translateY(-5px);
    border-color: #b9d6ee;
    box-shadow: 0 20px 42px rgba(37,99,235,.12);

  }

  body[data-page^="admin-"] .kpi .big {

    color: #123c61;
    font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-weight: 720;
    letter-spacing: -.04em;

  }

  body[data-page^="admin-"] .kpi .trend {

    color: var(--admin-success);

  }

  body[data-page^="admin-"] .chart {

    background: linear-gradient(180deg,rgba(96,165,250,.10),rgba(239,247,255,.22));
    border-bottom-color: #dce9f4;

  }

  body[data-page^="admin-"] .chart-bar {

    background: linear-gradient(180deg,#7dd3fc 0%,#3b82f6 54%,#2563eb 100%);
    box-shadow: 0 6px 14px rgba(37,99,235,.12);

  }

  body[data-page^="admin-"] .progress {

    background: #e8f0f7;

  }

  body[data-page^="admin-"] .progress i {

    background: linear-gradient(90deg,#64b5f6 0%,#3b82f6 52%,#2563eb 100%);

  }

  body[data-page^="admin-"] .pill {

    background: #edf5ff;
    color: #275f9c;
    border-color: #d8e8f7;

  }

  body[data-page^="admin-"] .btn.gold,
body[data-page^="admin-"] .btn.navy {

    background: linear-gradient(135deg,var(--admin-primary-deep) 0%,var(--admin-primary) 58%,#3b82f6 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 9px 22px rgba(37,99,235,.18);

  }

  body[data-page^="admin-"] .btn.gold:hover,
body[data-page^="admin-"] .btn.navy:hover {

    box-shadow: 0 15px 30px rgba(37,99,235,.23);

  }

  body[data-page^="admin-"] .btn.light {

    background: #fff;
    color: #23527c;
    border-color: #d2e2f0;
    box-shadow: 0 6px 18px rgba(35,82,124,.05);

  }

  body[data-page^="admin-"] .btn.light:hover {

    color: #174a7c;
    background: #f5faff;
    border-color: #b9d5ec;

  }

  body[data-page^="admin-"] .input,
body[data-page^="admin-"] select.input,
body[data-page^="admin-"] textarea.input {

    border-color: #d1e0ec;
    background: #fff;
    color: #173a59;

  }

  body[data-page^="admin-"] .input:focus,
body[data-page^="admin-"] select.input:focus,
body[data-page^="admin-"] textarea.input:focus {

    border-color: #72aaf6;
    box-shadow: 0 0 0 4px rgba(37,99,235,.10);

  }

  body[data-page^="admin-"] .check input {

    accent-color: var(--admin-primary);

  }

  body[data-page^="admin-"] .table tbody tr:hover {

    background: #f5faff;

  }

  body[data-page^="admin-"] .pms-nav a,
body[data-page^="admin-"] .step2-nav a,
body[data-page^="admin-"] .step3-nav a {

    color: #3e6485;
    border-color: #d4e4f1;
    background: #fff;

  }

  body[data-page^="admin-"] .pms-nav a:hover,
body[data-page^="admin-"] .step2-nav a:hover,
body[data-page^="admin-"] .step3-nav a:hover {

    color: #1f5fa0;
    border-color: #b8d4ea;
    background: #f6fbff;

  }

  body[data-page^="admin-"] .pms-nav a.active,
body[data-page^="admin-"] .step2-nav a.active,
body[data-page^="admin-"] .step3-nav a.active {

    color: #fff;
    background: linear-gradient(135deg,var(--admin-primary),#3b82f6);
    border-color: var(--admin-primary);
    box-shadow: 0 7px 18px rgba(37,99,235,.17);

  }

  body[data-page^="admin-"] .notice {

    background: #eef7ff;
    border-color: #d4e8f8;
    color: #356383;

  }

  body[data-page^="admin-"] .status {

    background: #eaf8f1;
    color: #1f7a4d;

  }

  body[data-page^="admin-"] .status.warn {

    background: #fff5df;
    color: #966111;

  }

  body[data-page^="admin-"] .status.gray {

    background: #eef3f7;
    color: #61778a;

  }

  body[data-page^="admin-"] .status.danger {

    background: #fff0f1;
    color: #a9444f;

  }

  body[data-page^="admin-"] .admin-hero:after {

    content: "";
    position: absolute;
    right: -80px;
    bottom: -110px;
    width: 270px;
    height: 270px;
    border-radius: 50%;
    border: 34px solid rgba(59,130,246,.055);
    pointer-events: none;
    display: none;

  }

  body[data-page^="guest-"] {

    --guest-primary: #2563eb;
    --guest-primary-deep: #1747b8;
    --guest-primary-soft: #eaf3ff;
    --guest-sky: #60a5fa;
    --guest-cyan: #38bdf8;
    --guest-ink: #123454;
    --guest-muted: #6d8299;
    --guest-line: #d8e7f5;
    --guest-surface: #ffffff;
    --guest-bg: #f4f9ff;
    --guest-shadow: 0 14px 34px rgba(35,88,145,.08);
    --guest-shadow-lg: 0 24px 54px rgba(37,99,235,.13);
    background: var(--guest-bg);
    color: var(--guest-ink);

  }

  body[data-page^="guest-"] .dash {

    background: var(--guest-bg);

  }

  body[data-page^="guest-"] .side {

    background: radial-gradient(circle at 4% 0%,rgba(96,165,250,.18),transparent 25%),
    linear-gradient(180deg,#fbfdff 0%,#edf6ff 100%);
    border-right: 1px solid #cfe2f4;
    box-shadow: 10px 0 34px rgba(42,91,139,.055);

  }

  body[data-page^="guest-"] .side::-webkit-scrollbar-thumb {

    background: #bfd9f1;

  }

  body[data-page^="guest-"] .side .brand {

    color: #123b61;

  }

  body[data-page^="guest-"] .brand-mark {

    background: #fff;
    border-color: #a8cdf0;
    box-shadow: 0 8px 22px rgba(37,99,235,.10);

  }

  body[data-page^="guest-"] .side .side-label {

    color: #7895af;
    letter-spacing: .16em;

  }

  body[data-page^="guest-"] .side a {

    color: #526f89;
    border: 1px solid transparent;
    border-radius: 15px;
    padding: 11px 12px;
    font-weight: 760;

  }

  body[data-page^="guest-"] .side a:hover {

    color: #174b7c;
    background: rgba(255,255,255,.84);
    border-color: #d5e6f4;
    box-shadow: 0 10px 24px rgba(41,91,143,.07);
    transform: translateX(4px);

  }

  body[data-page^="guest-"] .side a.active,
body[data-page^="guest-"] .side a[aria-current="page"] {

    color: #fff;
    background: linear-gradient(135deg,var(--guest-primary-deep) 0%,var(--guest-primary) 60%,#3b82f6 100%);
    border-color: transparent;
    box-shadow: 0 12px 28px rgba(37,99,235,.24);
    transform: translateX(3px);

  }

  body[data-page^="guest-"] .side a.active:before,
body[data-page^="guest-"] .side a[aria-current="page"]:before {

    content: "";
    width: 4px;
    align-self: stretch;
    border-radius: 999px;
    background: rgba(255,255,255,.9);
    margin-left: -4px;

  }

  body[data-page^="guest-"] .side-icon {

    color: #62a1d7;
    transition: .25s ease;

  }

  body[data-page^="guest-"] .side a.active .side-icon,
body[data-page^="guest-"] .side a[aria-current="page"] .side-icon {

    color: #fff;

  }

  body[data-page^="guest-"] .brand small {

    color: #6d8aa4;

  }

  body[data-page^="guest-"] .dash-main {

    background: radial-gradient(circle at 91% 1%,rgba(96,165,250,.15),transparent 20%),
    radial-gradient(circle at 72% 18%,rgba(56,189,248,.06),transparent 23%),
    linear-gradient(180deg,#fafdff 0%,#f3f8fe 100%);
    padding-top: 30px;

  }

  body[data-page^="guest-"] .dash-top {

    padding: 0 2px 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(205,224,241,.75);

  }

  body[data-page^="guest-"] .dash-title .eyebrow {

    color: #397fc0;

  }

  body[data-page^="guest-"] .dash-title h1 {

    color: #113a5d;
    letter-spacing: -.04em;

  }

  body[data-page^="guest-"] .icon-btn {

    color: #235d91;
    border-color: #d4e5f4;
    background: #fff;
    box-shadow: 0 7px 18px rgba(35,82,124,.055);

  }

  body[data-page^="guest-"] .icon-btn:hover {

    border-color: #a8cff0;
    color: var(--guest-primary);

  }

  .guest-account-chip {

    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 6px 11px 6px 7px;
    background: rgba(255,255,255,.92);
    border: 1px solid #d5e5f3;
    border-radius: 14px;
    box-shadow: 0 7px 18px rgba(35,82,124,.05);

  }

  .guest-account-avatar {

    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg,#dbeafe,#bfdbfe);
    color: #1d4ed8;
    font-weight: 900;
    font-size: 12px;

  }

  .guest-account-copy {

    display: grid;
    line-height: 1.05;
    max-width: 140px;

  }

  .guest-account-copy b {

    font-size: 11px;
    color: #1d4669;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

  }

  .guest-account-copy span {

    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #8196a9;
    margin-top: 4px;

  }

  body[data-page^="guest-"] .panel,
body[data-page^="guest-"] .table-wrap,
body[data-page^="guest-"] .kpi,
body[data-page^="guest-"] .feature-card,
body[data-page^="guest-"] .mini-menu-card {

    background: rgba(255,255,255,.96);
    border-color: var(--guest-line);
    box-shadow: var(--guest-shadow);

  }

  body[data-page^="guest-"] .panel {

    border-radius: 21px;

  }

  body[data-page^="guest-"] .panel:hover {

    border-color: #b9d8f2;
    box-shadow: var(--guest-shadow-lg);

  }

  body[data-page^="guest-"] .panel-title {

    color: #143b5d;

  }

  body[data-page="guest-dashboard"] .guest-hero-card {

    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 300px;
    padding: 30px;
    background: radial-gradient(circle at 38% 10%,rgba(96,165,250,.18),transparent 28%),
    linear-gradient(135deg,#eff7ff 0%,#ffffff 48%,#eaf4ff 100%);
    border: 1px solid #cfe2f4;
    box-shadow: 0 22px 54px rgba(37,99,235,.10);

  }

  body[data-page="guest-dashboard"] .guest-hero-card:before {

    content: "";
    position: absolute;
    z-index: -1;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    right: 34%;
    bottom: -165px;
    border: 42px solid rgba(96,165,250,.07);

  }

  body[data-page="guest-dashboard"] .guest-hero-card:after {

    content: "YOUR STAY";
    position: absolute;
    right: 28px;
    top: 20px;
    z-index: 2;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,.86);
    border: 1px solid #d4e7f7;
    color: #4d7da7;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .16em;
    backdrop-filter: blur(12px);

  }

  body[data-page="guest-dashboard"] .guest-hero-card h2 {

    color: #103c61;
    font-size: 38px;

  }

  body[data-page="guest-dashboard"] .guest-hero-card .muted {

    color: #68839c;
    max-width: 630px;

  }

  body[data-page="guest-dashboard"] .guest-hero-card img {

    height: 280px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.95);
    box-shadow: 0 18px 38px rgba(33,79,125,.14);

  }

  body[data-page^="guest-"] .kpi {

    min-height: 145px;
    border-top: 3px solid #93c5fd;
    position: relative;
    overflow: hidden;

  }

  body[data-page^="guest-"] .kpi:nth-child(2) {

    border-top-color: #60a5fa;

  }

  body[data-page^="guest-"] .kpi:nth-child(3) {

    border-top-color: #38bdf8;

  }

  body[data-page^="guest-"] .kpi:nth-child(4) {

    border-top-color: #2563eb;

  }

  body[data-page^="guest-"] .kpi:before {

    content: "";
    position: absolute;
    right: -28px;
    top: -42px;
    width: 118px;
    height: 118px;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(96,165,250,.17),transparent 70%);

  }

  body[data-page^="guest-"] .kpi:after {

    display: none;

  }

  body[data-page^="guest-"] .kpi .big {

    color: #123f67;
    font-family: Inter,ui-sans-serif,system-ui,sans-serif;
    font-weight: 760;
    letter-spacing: -.05em;

  }

  body[data-page^="guest-"] .kpi .trend {

    display: inline-flex;
    width: max-content;
    margin-top: 7px;
    padding: 5px 8px;
    border-radius: 999px;
    background: #edf6ff;
    color: #3677b1;
    font-size: 10px;

  }

  body[data-page^="guest-"] .quick-action-card {

    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg,#fff,#f8fbff);
    border-color: #d6e6f4;
    padding: 17px 40px 17px 17px;

  }

  body[data-page^="guest-"] .quick-action-card:after {

    content: "→";
    position: absolute;
    right: 15px;
    top: 14px;
    color: #6ca7dc;
    font-weight: 900;
    transition: .25s ease;

  }

  body[data-page^="guest-"] .quick-action-card:hover {

    transform: translateY(-4px);
    border-color: #9ec8ed;
    background: #fff;
    box-shadow: 0 15px 30px rgba(37,99,235,.11);

  }

  body[data-page^="guest-"] .quick-action-card:hover:after {

    transform: translateX(3px);
    color: var(--guest-primary);

  }

  body[data-page^="guest-"] .quick-action-card b {

    color: #17476f;

  }

  body[data-page^="guest-"] .quick-action-card span {

    color: #73889c;

  }

  body[data-page^="guest-"] .feature-line {

    border-color: #dce9f5;
    background: #fbfdff;
    padding: 13px 14px;

  }

  body[data-page^="guest-"] .feature-line b {

    color: #17476f;

  }

  body[data-page^="guest-"] .mini-detail-row {

    border-bottom-color: #e5eff7;

  }

  body[data-page^="guest-"] .mini-detail-row b {

    color: #17476f;

  }

  body[data-page^="guest-"] .mini-menu-card {

    background: linear-gradient(180deg,#fff,#f8fbff);
    border-color: #d9e8f4;

  }

  body[data-page^="guest-"] .mini-menu-card img {

    box-shadow: 0 8px 20px rgba(33,84,134,.09);

  }

  body[data-page^="guest-"] .pill {

    background: #edf6ff;
    color: #2f72ad;
    border-color: #d7e9f8;

  }

  body[data-page^="guest-"] .btn.gold,
body[data-page^="guest-"] .btn.navy {

    background: linear-gradient(135deg,var(--guest-primary-deep) 0%,var(--guest-primary) 58%,#3b82f6 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 9px 22px rgba(37,99,235,.18);

  }

  body[data-page^="guest-"] .btn.gold:hover,
body[data-page^="guest-"] .btn.navy:hover {

    box-shadow: 0 15px 30px rgba(37,99,235,.23);

  }

  body[data-page^="guest-"] .btn.light {

    background: #fff;
    color: #235b89;
    border-color: #d2e4f2;
    box-shadow: 0 6px 18px rgba(35,82,124,.045);

  }

  body[data-page^="guest-"] .btn.light:hover {

    background: #f5faff;
    border-color: #aad0ef;
    color: #174d7b;

  }

  body[data-page^="guest-"] .input,
body[data-page^="guest-"] select.input,
body[data-page^="guest-"] textarea.input,
body[data-page^="guest-"] .select {

    border-color: #d0e1ef;
    background: #fff;
    color: #173f61;

  }

  body[data-page^="guest-"] .input:focus,
body[data-page^="guest-"] select.input:focus,
body[data-page^="guest-"] textarea.input:focus,
body[data-page^="guest-"] .select:focus {

    border-color: #6ea9f4;
    box-shadow: 0 0 0 4px rgba(37,99,235,.10);
    outline: none;

  }

  body[data-page^="guest-"] .permission-check {

    border-color: #d8e7f3;
    background: #fbfdff;

  }

  body[data-page^="guest-"] input[type="checkbox"] {

    accent-color: var(--guest-primary);

  }

  body[data-page^="guest-"] .table th {

    background: #eff7ff;
    color: #587895;
    border-bottom-color: #d9e8f4;

  }

  body[data-page^="guest-"] .table td {

    border-bottom-color: #eaf1f7;

  }

  body[data-page^="guest-"] .table tbody tr:hover {

    background: #f5faff;

  }

  body[data-page^="guest-"] .notice {

    background: #edf7ff;
    border-color: #d1e7f8;
    color: #35698e;

  }

  body[data-page^="guest-"] .notice.ok {

    background: #effaf5;
    border-color: #d4ecdf;
    color: #337154;

  }

  body[data-page^="guest-"] .notice.warn {

    background: #fff8ec;
    border-color: #f2dfbd;
    color: #805d25;

  }

  body[data-page^="guest-"] .notification-unread {

    border-color: #a9cff0;
    box-shadow: inset 4px 0 #3b82f6,var(--guest-shadow);

  }

  body[data-page^="guest-"] .status {

    background: #eaf8f2;
    color: #26724d;

  }

  body[data-page^="guest-"] .status.warn {

    background: #fff6e5;
    color: #946016;

  }

  body[data-page^="guest-"] .status.danger {

    background: #fff0f2;
    color: #a74551;

  }

  body.guest-auth-page {

    background: radial-gradient(circle at 78% 2%,rgba(96,165,250,.18),transparent 26%),
    linear-gradient(145deg,#edf6ff 0%,#f9fcff 46%,#eaf3ff 100%);

  }

  body.guest-auth-page .auth-shell {

    min-height: 100svh;
    grid-template-columns: minmax(0,1.06fr) minmax(520px,.94fr);
    background: transparent;

  }

  body.guest-auth-page .auth-visual {

    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    padding: 64px;
    background: linear-gradient(0deg,rgba(8,42,76,.72),rgba(18,74,124,.14) 62%,rgba(255,255,255,.02)),
    url("../images/braj/hero-pool-sunset.webp") center/cover;

  }

  body.guest-auth-page .auth-visual:after {

    display: none;

  }

  .auth-visual-copy {

    position: relative;
    z-index: 2;
    max-width: 590px;
    color: #fff;
    text-shadow: 0 2px 18px rgba(5,31,57,.2);

  }

  .auth-visual-copy .auth-kicker {

    display: inline-flex;
    padding: 7px 11px;
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    backdrop-filter: blur(10px);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;

  }

  .auth-visual-copy h2 {

    font-family: Georgia,serif;
    font-size: clamp(42px,4.4vw,70px);
    line-height: .96;
    letter-spacing: -.045em;
    margin: 18px 0 16px;
    font-weight: 500;

  }

  .auth-visual-copy p {

    max-width: 530px;
    color: rgba(255,255,255,.86);
    font-size: 15px;

  }

  .auth-benefits {

    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 22px;

  }

  .auth-benefits span {

    padding: 8px 11px;
    border-radius: 11px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.24);
    backdrop-filter: blur(10px);
    font-size: 11px;
    font-weight: 750;

  }

  body.guest-auth-page .auth-panel {

    padding: 38px;

  }

  body.guest-auth-page .auth-card {

    width: min(510px,100%);
    padding: 34px 36px;
    border-radius: 28px;
    border: 1px solid #d4e5f3;
    background: rgba(255,255,255,.93);
    backdrop-filter: blur(20px);
    box-shadow: 0 28px 70px rgba(38,90,144,.16);

  }

  body.guest-auth-page .auth-card .brand {

    margin-bottom: 24px;
    color: #153f63;

  }

  body.guest-auth-page .auth-card h1 {

    font-size: 42px;
    color: #123b5d;
    letter-spacing: -.04em;
    margin-bottom: 8px;

  }

  .auth-intro {

    margin-bottom: 22px;

  }

  .google-auth-wrap {

    display: grid;
    gap: 9px;
    margin: 18px 0 4px;

  }

  .google-render-target {

    min-height: 44px;
    display: grid;
    place-items: center;
    width: 100%;

  }

  .google-render-target>div {

    max-width: 100%;

  }

  .google-btn {

    width: 100%;
    min-height: 46px;
    background: #fff;
    color: #25445f;
    border: 1px solid #d5e2ee;
    box-shadow: 0 7px 18px rgba(35,82,124,.05);
    border-radius: 13px;

  }

  .google-btn:hover {

    border-color: #a8ccec;
    background: #fafdff;

  }

  .google-btn.disabled {

    opacity: .7;
    cursor: pointer;

  }

  .google-auth-note {

    font-size: 10px;
    color: #8295a6;
    text-align: center;
    margin: 0;

  }

  .auth-section-label {

    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #50708c;
    margin: 4px 0 12px;

  }

  body.guest-auth-page .divider {

    color: #8b9cac;
    margin: 18px 0;

  }

  body.guest-auth-page .divider:before,body.guest-auth-page .divider:after {

    background: #dfebf4;

  }

  body.guest-auth-page .input {

    border-color: #d3e2ee;
    background: #fbfdff;

  }

  body.guest-auth-page .input:focus {

    border-color: #6ea9f4;
    box-shadow: 0 0 0 4px rgba(37,99,235,.10);

  }

  body.guest-auth-page .btn.gold {

    background: linear-gradient(135deg,#1747b8,#2563eb 60%,#3b82f6);
    box-shadow: 0 10px 24px rgba(37,99,235,.2);

  }

  body.guest-auth-page .btn.light {

    color: #235b89;
    border-color: #d2e4f2;
    background: #fff;

  }

  .auth-security-note {

    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin-top: 16px;
    padding: 11px 12px;
    border-radius: 13px;
    background: #eff7ff;
    border: 1px solid #d6e9f8;
    color: #5c7790;
    font-size: 11px;

  }

  .auth-security-note:before {

    content: "✓";
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: #dbeafe;
    color: #1d4ed8;
    font-weight: 900;

  }

  .portal-nav-btn {

    border-color: rgba(23,50,74,.14);
    background: rgba(255,255,255,.82);
    color: #17324a;
    backdrop-filter: blur(12px);

  }

  .portal-nav-btn:hover {

    background: #fff;
    border-color: #9bbbd8;
    color: #174f81;

  }

  body.premium-home {

    background: #f8fbfe;
    color: #17324a;

  }

  body.premium-home .nav {

    background: rgba(255,255,255,.88);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(207,222,235,.72);

  }

  body.premium-home .premium-hero .hero-media:after {

    background: linear-gradient(90deg,rgba(246,250,254,.98) 0%,rgba(246,250,254,.91) 39%,rgba(246,250,254,.28) 67%,rgba(246,250,254,.03) 100%);

  }

  body.premium-home .hero-kicker-row {

    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;

  }

  body.premium-home .premium-hero-facts {

    margin-top: 34px;
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
    max-width: 650px;

  }

  .home-trust-strip {

    background: #113b5f;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.07);

  }

  .trust-grid {

    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));

  }

  .trust-grid>div {

    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    align-items: center;
    padding: 24px 28px;
    border-right: 1px solid rgba(255,255,255,.11);

  }

  .trust-grid>div:last-child {

    border-right: 0;

  }

  .trust-grid span {

    grid-row: 1/3;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.09);
    color: #9fd0ff;
    font-size: 10px;
    font-weight: 900;

  }

  .trust-grid b {

    font-size: 12px;
    letter-spacing: .01em;

  }

  .trust-grid small {

    color: #a9bfd2;
    font-size: 10px;

  }

  .premium-section-head {

    align-items: flex-end;

  }

  .premium-section-head>div {

    max-width: 720px;

  }

  .premium-section-head .section-title {

    max-width: 700px;

  }

  .premium-section-head .lead {

    max-width: 650px;
    margin-top: 9px;

  }

  .home-room-section {

    background: #fff;

  }

  .home-room-grid .room-card:hover {

    transform: translateY(-6px);
    box-shadow: 0 28px 60px rgba(29,65,95,.13);

  }

  .home-room-grid .room-card .media {

    height: 250px;

  }

  .home-room-grid .room-card .media img {

    height: 100%;

  }

  .home-editorial-section {

    padding-top: 110px;
    padding-bottom: 110px;
    background: linear-gradient(180deg,#f5f9fc,#eef5fb);

  }

  .editorial-intro {

    display: grid;
    grid-template-columns: 1fr .75fr;
    gap: 50px;
    align-items: end;
    margin-bottom: 36px;

  }

  .editorial-intro .lead {

    margin: 0;
    max-width: 560px;

  }

  .editorial-mosaic {

    display: grid;
    grid-template-columns: 1.35fr .65fr;
    grid-template-rows: 285px 285px;
    gap: 18px;

  }

  .editorial-tile {

    position: relative;
    overflow: hidden;
    border-radius: 28px;
    min-height: 0;
    box-shadow: 0 24px 60px rgba(25,63,95,.12);

  }

  .editorial-tile.editorial-main {

    grid-row: 1/3;

  }

  .editorial-tile img {

    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.2,.7,.2,1);

  }

  .editorial-tile:after {

    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,rgba(8,36,61,.67),transparent 58%);

  }

  .editorial-tile span {

    position: absolute;
    z-index: 2;
    left: 25px;
    right: 25px;
    bottom: 23px;
    color: #fff;

  }

  .editorial-tile small {

    display: block;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 9px;
    color: #cfe8fb;
    margin-bottom: 6px;

  }

  .editorial-tile b {

    display: block;
    font-family: Georgia,serif;
    font-size: 28px;
    line-height: 1.04;
    font-weight: 500;

  }

  .editorial-main b {

    font-size: 42px;

  }

  .editorial-tile:hover img {

    transform: scale(1.035);

  }

  .home-experience-section {

    background: #f7fbff;

  }

  .experience-premium-grid .feature-card {

    min-height: 205px;
    padding: 26px;
    border-radius: 22px;
    border-color: #d8e5ef;
    background: rgba(255,255,255,.9);
    box-shadow: 0 14px 36px rgba(27,63,92,.06);

  }

  .experience-premium-grid .feature-icon {

    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #e8f3ff;
    color: #2366a0;
    font-size: 20px;
    margin-bottom: 28px;

  }

  .experience-premium-grid h3 {

    font-size: 17px;
    color: #174466;

  }

  .portal-showcase-section {

    background: #0f395d;
    color: #fff;
    padding-top: 96px;
    padding-bottom: 96px;
    position: relative;
    overflow: hidden;

  }

  .portal-showcase-section:before {

    content: "";
    position: absolute;
    inset: -30% auto auto 55%;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(87,167,238,.23),transparent 68%);

  }

  .portal-showcase {

    position: relative;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 70px;
    align-items: center;

  }

  .portal-showcase .eyebrow {

    color: #8ed0ff;

  }

  .portal-showcase .section-title {

    color: #fff;
    max-width: 560px;

  }

  .portal-showcase .lead {

    color: #aec4d5;
    max-width: 550px;
    margin-bottom: 26px;

  }

  .portal-role-grid {

    display: grid;
    gap: 12px;

  }

  .portal-role-card {

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 17px 18px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 17px;
    background: rgba(255,255,255,.07);
    color: #fff;
    backdrop-filter: blur(12px);
    transition: .25s ease;

  }

  .portal-role-card:hover {

    transform: translateX(6px);
    background: rgba(255,255,255,.12);
    border-color: rgba(153,214,255,.35);

  }

  .portal-role-icon {

    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: #e8f4ff;
    color: #155487;
    font-weight: 900;

  }

  .portal-role-card b {

    display: block;
    font-size: 14px;

  }

  .portal-role-card small {

    display: block;
    color: #a8c0d3;
    margin-top: 2px;
    font-size: 10px;

  }

  .portal-role-card>span:last-child {

    color: #9bd6ff;
    font-size: 20px;

  }

  .home-offer-section {

    background: #f9f4ea;

  }

  .home-review-section {

    background: #fff;

  }

  .home-location-section {

    background: #eff6fb;
    padding-top: 95px;
    padding-bottom: 95px;

  }

  .location-premium {

    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 55px;
    align-items: center;

  }

  .location-copy {

    padding: 18px 0;

  }

  .location-image {

    height: 430px;
    border-radius: 28px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 24px 60px rgba(26,63,94,.13);

  }

  .location-image img {

    width: 100%;
    height: 100%;
    object-fit: cover;

  }

  .location-image:after {

    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,rgba(7,35,60,.58),transparent 55%);

  }

  .location-image span {

    position: absolute;
    z-index: 2;
    left: 28px;
    bottom: 26px;
    color: #fff;
    font-family: Georgia,serif;
    font-size: 32px;
    line-height: 1.03;

  }

  .multi-role-auth-page .auth-visual {

    background: linear-gradient(0deg,rgba(8,42,76,.76),rgba(18,74,124,.12) 62%,rgba(255,255,255,.02)),url("../images/lobby-ai.webp") center/cover;

  }

  .multi-role-auth-page .auth-card h1 {

    font-size: 40px;
    margin-top: 0;

  }

  .role-switcher {

    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 7px;
    padding: 6px;
    border: 1px solid #d8e6f1;
    background: #f3f8fc;
    border-radius: 16px;
    margin: 18px 0 22px;

  }

  .role-tab {

    appearance: none;
    border: 0;
    background: transparent;
    border-radius: 11px;
    padding: 10px 8px;
    color: #607b92;
    font: inherit;
    font-size: 11px;
    font-weight: 850;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: .2s;

  }

  .role-tab span {

    width: 22px;
    height: 22px;
    border-radius: 8px;
    background: #e3edf5;
    display: grid;
    place-items: center;
    font-size: 9px;

  }

  .role-tab:hover {

    color: #205b8c;

  }

  .role-tab.active {

    background: #fff;
    color: #174f80;
    box-shadow: 0 7px 20px rgba(33,80,120,.10);

  }

  .role-tab.active span {

    background: #ddecfb;
    color: #195b91;

  }

  .auth-role-pane {

    animation: portalPaneIn .22s ease;

  }

  .auth-role-pane[hidden] {

    display: none;

  }

  @keyframes portalPaneIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

  .portal-pane-head {

    display: grid;
    gap: 3px;
    margin-bottom: 15px;

  }

  .portal-pane-head b {

    color: #173f61;
    font-size: 14px;

  }

  .portal-pane-head small {

    color: #7890a4;
    font-size: 10px;
    line-height: 1.45;

  }

  .multi-role-auth-card .admin-form {

    gap: 11px;

  }

  .multi-role-auth-card .field {

    font-size: 10px;

  }

  .multi-role-auth-card .input {

    min-height: 44px;

  }

  .multi-role-auth-card .btn {

    min-height: 44px;

  }

  .auth-create-details {

    margin-top: 15px;
    border: 1px solid #dbe8f2;
    border-radius: 14px;
    background: #f8fbfe;
    overflow: hidden;

  }

  .auth-create-details summary {

    cursor: pointer;
    padding: 12px 14px;
    color: #245b88;
    font-size: 11px;
    font-weight: 850;
    list-style: none;

  }

  .auth-create-details summary::-webkit-details-marker {

    display: none;

  }

  .auth-create-details summary:after {

    content: "+";
    float: right;
    font-size: 16px;

  }

  .auth-create-details[open] summary:after {

    content: "−";

  }

  .auth-create-details form {

    padding: 0 14px 14px;

  }

  .role-help-note {

    margin-top: 15px;
    padding: 11px 12px;
    border-radius: 12px;
    background: #f1f7fc;
    border: 1px solid #dbe8f2;
    color: #6c8498;
    font-size: 10px;

  }

  .auth-setup-link,.auth-back-home {

    display: inline-block;
    margin-top: 14px;
    color: #2c6797;
    font-size: 10px;
    font-weight: 800;

  }

  .multi-role-auth-card .auth-security-note {

    margin-top: 18px;

  }

  .multi-role-auth-card .google-auth-wrap {

    margin-top: 0;

  }

  .media-manager-top {

    align-items: start;

  }

  .media-upload-preview {

    min-height: 0;

  }

  .media-upload-preview img {

    display: block;
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: #f4f8fb;

  }

  .override-grid {

    display: grid;
    gap: 10px;
    margin-top: 16px;

  }

  .override-row {

    display: grid;
    grid-template-columns: 72px minmax(0,1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #f8fbfe;

  }

  .override-row img {

    width: 72px;
    height: 58px;
    border-radius: 12px;
    object-fit: cover;

  }

  .override-row div {

    min-width: 0;

  }

  .override-row b,.override-row small {

    display: block;

  }

  .override-row small {

    color: var(--muted);
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

  }

  .media-card button:disabled {

    opacity: .45;
    cursor: not-allowed;

  }

  @media (max-width:680px) {

    .override-row {

      grid-template-columns: 58px minmax(0,1fr);

    }

    .override-row img {

      width: 58px;
      height: 52px;

    }

    .override-row .btn {

      grid-column: 1/-1;
      width: 100%;

    }

  }

  body[data-page^="admin-"] {

    --admin-navy: #0b2742;
    --admin-navy-2: #123d5b;
    --admin-primary-2: #3b82f6;
    --admin-cyan: #75d8f5;
    --admin-gold: #d5a044;
    --admin-primary: #2563eb;
    --admin-primary-deep: #1d4ed8;
    --admin-primary-soft: #eaf3ff;
    --admin-sky: #0ea5e9;
    --admin-sky-soft: #e7f7ff;
    --admin-indigo: #3b5bcc;
    --admin-bg: #f3f8fe;
    --admin-bg-2: #eef6ff;
    --admin-surface: #ffffff;
    --admin-surface-soft: #f9fcff;
    --admin-line: #d8e6f3;
    --admin-line-strong: #c4d9ec;
    --admin-text: #12314d;
    --admin-muted: #6c8298;
    --admin-success: #178558;
    --admin-shadow: 0 12px 34px rgba(37,99,235,.075);
    --admin-shadow-lg: 0 22px 52px rgba(30,82,151,.12);
    --admin-sidebar: 286px;
    --admin-sidebar-mini: 88px;
    --admin-radius: 20px;
    --admin-shadow-soft: 0 10px 32px rgba(27,76,122,.075);
    --admin-shadow-float: 0 22px 58px rgba(30,81,132,.13);

  }

  body[data-page^="admin-"] .dash {

    background: var(--admin-bg);
    grid-template-columns: var(--admin-sidebar) minmax(0,1fr);
    transition: grid-template-columns .28s ease;

  }

  body[data-page^="admin-"] .side {

    background: radial-gradient(circle at 10% 0%,rgba(59,130,246,.13),transparent 23%),
    linear-gradient(180deg,#f8fbff 0%,#eff7ff 52%,#eaf4ff 100%);
    border-right: 1px solid #cfe1f2;
    color: var(--admin-text);
    box-shadow: 12px 0 34px rgba(33,86,143,.07);
    padding: 18px 14px 16px;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;

  }

  body[data-page^="admin-"] .side-head {

    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 66px;
    padding: 0 3px 12px;
    border-bottom: 1px solid rgba(198,220,239,.82);

  }

  body[data-page^="admin-"] .side-head .brand {

    flex: 1;
    min-width: 0;
    padding: 4px 6px 4px 2px;
    gap: 10px;

  }

  body[data-page^="admin-"] .side-head .brand-mark {

    width: 42px;
    height: 42px;
    flex: 0 0 42px;

  }

  body[data-page^="admin-"] .side-head .brand-mark img {

    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;

  }

  body[data-page^="admin-"] .side-copy {

    min-width: 0;
    font-family: Georgia,"Times New Roman",serif;
    font-size: 15px;
    letter-spacing: .10em;
    white-space: nowrap;

  }

  body[data-page^="admin-"] .side-copy small {

    font-family: Inter,ui-sans-serif,system-ui,sans-serif;
    font-size: 8px;
    letter-spacing: .22em;
    margin-top: 6px;

  }

  body[data-page^="admin-"] .side-collapse {

    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border: 1px solid #d3e3f0;
    border-radius: 10px;
    background: #fff;
    color: #416b8e;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 5px 16px rgba(36,83,124,.05);
    transition: .2s;

  }

  body[data-page^="admin-"] .side-collapse:hover {

    background: #edf6ff;
    color: #1f64a1;
    border-color: #b9d7ed;

  }

  body[data-page^="admin-"] .side-search {

    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 11px 0 12px;
    padding: 9px 10px;
    border: 1px solid #d5e5f2;
    border-radius: 12px;
    background: rgba(255,255,255,.88);
    color: #55748f;
    cursor: pointer;
    text-align: left;
    box-shadow: 0 7px 18px rgba(35,82,124,.045);
    transition: .2s;

  }

  body[data-page^="admin-"] .side-search:hover {

    border-color: #b5d4eb;
    background: #fff;
    color: #225f92;

  }

  body[data-page^="admin-"] .side-search-icon {

    width: 22px;
    flex: 0 0 22px;
    text-align: center;
    font-size: 17px;
    color: #2d78b8;

  }

  body[data-page^="admin-"] .side-search-copy {

    flex: 1;
    font-size: 11px;
    font-weight: 760;

  }

  body[data-page^="admin-"] kbd {

    font: 700 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
    color: #7890a4;
    background: #f1f6fa;
    border: 1px solid #dce8f1;
    border-bottom-color: #cbdbe7;
    border-radius: 6px;
    padding: 4px 5px;
    white-space: nowrap;

  }

  body[data-page^="admin-"] .side-nav {

    display: block;
    min-height: 0;

  }

  body[data-page^="admin-"] .side-primary {

    margin: 4px 0 10px;

  }

  body[data-page^="admin-"] .side-label {

    color: #7d99b2;
    padding: 8px 10px 5px;
    font-size: 8px;
    letter-spacing: .17em;
    font-weight: 900;

  }

  body[data-page^="admin-"] .side-group {

    gap: 3px;
    margin: 0 0 8px;

  }

  body[data-page^="admin-"] .side a {

    position: relative;
    color: #496983;
    border: 1px solid transparent;
    box-shadow: none;
    transform: none;
    min-height: 40px;
    border-radius: 11px;
    padding: 8px 10px;
    gap: 10px;
    font-size: 11.5px;
    font-weight: 730;
    line-height: 1.2;

  }

  body[data-page^="admin-"] .side a:hover {

    color: #174b7a;
    transform: none;
    background: #fff;
    border-color: #d7e6f2;
    box-shadow: 0 6px 17px rgba(31,78,121,.055);

  }

  body[data-page^="admin-"] .side a.active,body[data-page^="admin-"] .side a[aria-current="page"] {

    background: linear-gradient(135deg,#1f63d8 0%,#347cf0 60%,#45a7ef 120%);
    border-color: transparent;
    box-shadow: 0 9px 22px rgba(37,99,235,.20);

  }

  body[data-page^="admin-"] .side a.active:before,body[data-page^="admin-"] .side a[aria-current="page"]:before {

    right: -5px;
    width: 3px;
    height: 22px;
    background: #80caff;
    box-shadow: none;

  }

  body[data-page^="admin-"] .side-icon {

    color: #3e8ac7;
    width: 22px;
    flex: 0 0 22px;
    font-size: 14px;
    text-align: center;

  }

  body[data-page^="admin-"] .side-link-label {

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

  }

  body[data-page^="admin-"] .side-section {

    margin: 2px 0 4px;
    border-top: 1px solid rgba(205,225,241,.72);

  }

  body[data-page^="admin-"] .side-section summary {

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    list-style: none;
    cursor: pointer;
    padding: 10px 10px 7px;
    color: #7a96ac;
    font-size: 8.5px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .13em;
    user-select: none;

  }

  body[data-page^="admin-"] .side-section summary::-webkit-details-marker {

    display: none;

  }

  body[data-page^="admin-"] .side-section summary i {

    font-style: normal;
    font-size: 11px;
    color: #8da8bd;
    transition: transform .2s;

  }

  body[data-page^="admin-"] .side-section[open] summary i {

    transform: rotate(180deg);

  }

  body[data-page^="admin-"] .side-section:not([open]) .side-group {

    display: none;

  }

  body[data-page^="admin-"] .side-footer {

    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid #d7e6f2;

  }

  body[data-page^="admin-"] .side-footer a {

    margin-bottom: 7px;

  }

  body[data-page^="admin-"] .side-footer-note {

    display: block;
    padding: 0 10px;
    color: #93a7b8;
    font-size: 8px;
    letter-spacing: .06em;

  }

  body.admin-side-collapsed .dash {

    grid-template-columns: var(--admin-sidebar-mini) minmax(0,1fr);

  }

  body.admin-side-collapsed .side {

    padding-left: 10px;
    padding-right: 10px;

  }

  body.admin-side-collapsed .side-copy,body.admin-side-collapsed .side-search-copy,body.admin-side-collapsed .side-search kbd,body.admin-side-collapsed .side-label,body.admin-side-collapsed .side-link-label,body.admin-side-collapsed .side-footer-note {

    display: none;

  }

  body.admin-side-collapsed .side-head {

    justify-content: center;
    flex-wrap: wrap;
    height: auto;

  }

  body.admin-side-collapsed .side-head .brand {

    flex: 0 0 100%;
    justify-content: center;
    padding: 2px;

  }

  body.admin-side-collapsed .side-collapse {

    position: absolute;
    top: 60px;
    right: 8px;
    width: 24px;
    height: 24px;
    min-width: 24px;

  }

  body.admin-side-collapsed .side-search {

    justify-content: center;
    padding: 9px 6px;
    margin-top: 20px;

  }

  body.admin-side-collapsed .side-search-icon {

    width: auto;
    flex: 0 0 auto;

  }

  body.admin-side-collapsed .side a {

    justify-content: center;
    padding: 8px 6px;

  }

  body.admin-side-collapsed .side-icon {

    width: 24px;
    flex-basis: 24px;

  }

  body.admin-side-collapsed .side-section summary {

    height: 13px;
    padding: 7px 4px;
    border-top: 1px solid #d4e5f2;

  }

  body.admin-side-collapsed .side-section summary span,body.admin-side-collapsed .side-section summary i {

    display: none;

  }

  body.admin-side-collapsed .side-section {

    border-top: 0;

  }

  body.admin-side-collapsed .side-section .side-group {

    display: grid;

  }

  .admin-command-palette {

    position: fixed;
    inset: 0;
    z-index: 250;
    display: none;
    place-items: start center;
    padding-top: min(14vh,130px);

  }

  .admin-command-palette.open {

    display: grid;

  }

  .admin-command-backdrop {

    position: absolute;
    inset: 0;
    background: rgba(10,35,58,.42);
    backdrop-filter: blur(5px);

  }

  .admin-command-card {

    position: relative;
    width: min(650px,calc(100vw - 28px));
    max-height: min(680px,74vh);
    display: grid;
    grid-template-rows: auto minmax(0,1fr) auto;
    background: #fff;
    border: 1px solid #d3e4f1;
    border-radius: 22px;
    box-shadow: 0 34px 100px rgba(8,35,60,.26);
    overflow: hidden;
    animation: adminCommandIn .18s ease;

  }

  @keyframes adminCommandIn{from{opacity:0;transform:translateY(-8px) scale(.985)}to{opacity:1;transform:none}}

  .admin-command-input-wrap {

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 11px;
    padding: 16px 18px;
    border-bottom: 1px solid #e2edf5;

  }

  .admin-command-input-wrap>span {

    font-size: 21px;
    color: #2b75b7;

  }

  .admin-command-input-wrap input {

    border: 0;
    outline: 0;
    font: 650 15px/1.4 Inter,ui-sans-serif,system-ui,sans-serif;
    color: #163b5b;
    min-width: 0;

  }

  .admin-command-results {

    overflow: auto;
    padding: 8px;

  }

  .admin-command-results a {

    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    border-radius: 12px;
    color: #315875;

  }

  .admin-command-results a:hover,.admin-command-results a.selected {

    background: #edf6ff;
    color: #174f81;

  }

  .admin-command-results a>span:nth-child(2) {

    display: grid;

  }

  .admin-command-results b {

    font-size: 12px;

  }

  .admin-command-results small {

    font-size: 9px;
    color: #8197aa;
    margin-top: 2px;

  }

  .admin-command-results i {

    font-style: normal;
    color: #82a6c3;

  }

  .admin-command-empty {

    padding: 28px;
    text-align: center;
    color: #7c93a7;
    font-size: 12px;

  }

  .admin-command-footer {

    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px;
    border-top: 1px solid #e2edf5;
    background: #f8fbfe;
    color: #8296a8;
    font-size: 9px;

  }

  body[data-page^="admin-"] .dash-main {

    position: relative;
    background: radial-gradient(circle at 92% 2%,rgba(14,165,233,.11),transparent 22%),
    radial-gradient(circle at 64% 18%,rgba(37,99,235,.055),transparent 26%),
    linear-gradient(180deg,#fbfdff 0%,var(--admin-bg) 62%,#eff7ff 100%);
    color: var(--admin-text);
    padding: 24px clamp(18px,2.4vw,38px) 68px;
    min-width: 0;

  }

  body[data-page^="admin-"] .dash-top {

    position: relative;
    margin-bottom: 22px;
    padding-bottom: 17px;
    border-bottom: 1px solid rgba(205,224,241,.78);

  }

  body[data-page^="admin-"] .dash-title h1 {

    color: #102f4a;
    font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-weight: 780;
    letter-spacing: -.045em;
    font-size: clamp(34px,3.2vw,48px);
    line-height: 1;
    margin: 5px 0;

  }

  body[data-page^="admin-"] .dash-actions {

    flex-wrap: wrap;
    justify-content: flex-end;

  }

  body[data-page^="admin-"] .panel,body[data-page^="admin-"] .table-wrap {

    overflow: hidden;

  }

  body[data-page^="admin-"] .table-wrap {

    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

  }

  body[data-page^="admin-"] .table {

    min-width: 680px;

  }

  body[data-page^="admin-"] .table th {

    background: #f1f7fd;
    color: #58748d;
    border-bottom-color: #dce8f3;
    position: relative;
    white-space: nowrap;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;

  }

  body[data-page^="admin-"] .table td {

    border-bottom-color: #edf3f8;
    vertical-align: middle;

  }

  body[data-page^="admin-"] .input,body[data-page^="admin-"] select.input,body[data-page^="admin-"] textarea.input {

    min-height: 45px;
    border-radius: 12px;

  }

  body[data-page^="admin-"] textarea.input {

    min-height: 90px;

  }

  body[data-page^="admin-"] .pms-nav,body[data-page^="admin-"] .step2-nav,body[data-page^="admin-"] .step3-nav {

    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
    padding: 7px;
    margin-bottom: 20px;
    border: 1px solid #d9e7f2;
    border-radius: 15px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 7px 20px rgba(34,80,120,.045);

  }

  body[data-page^="admin-"] .step3-nav {

    background: rgba(249,252,255,.96);
    border-color: #d5e5f2;
    position: static;
    margin-top: 0;

  }

  body[data-page^="admin-"] .pms-nav a,body[data-page^="admin-"] .step2-nav a,body[data-page^="admin-"] .step3-nav a {

    flex: 0 0 auto;
    white-space: nowrap;
    border-radius: 9px;
    padding: 8px 11px;
    font-size: 11px;

  }

  body[data-page^="admin-"] .module-grid,body[data-page^="admin-"] .pos-layout,body[data-page^="admin-"] .report-grid {

    align-items: start;

  }

  body[data-page^="admin-"] .panel-title {

    color: #113754;
    letter-spacing: -.015em;
    margin-bottom: 13px;
    font-size: 17px;

  }

  body[data-page^="admin-"] .form-grid {

    gap: 13px;

  }

  body[data-page^="admin-"] .btn {

    min-height: 40px;

  }

  body[data-page^="admin-"] .btn.sm {

    min-height: 36px;

  }

  body[data-page^="admin-"] :focus-visible {

    outline: 3px solid rgba(37,99,235,.22);
    outline-offset: 2px;

  }

  .dashboard-main {

    max-width: 1800px;
    width: 100%;
    margin: 0 auto;

  }

  .dashboard-topbar {

    align-items: flex-end;

  }

  .dashboard-meta {

    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    color: #7890a4;
    font-size: 10px;

  }

  .dashboard-live {

    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 7px;
    border: 1px solid #d9e8f3;
    border-radius: 999px;
    background: #fff;
    color: #4c7798;
    font-weight: 760;

  }

  .dashboard-live i {

    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #16a36b;
    box-shadow: 0 0 0 4px rgba(22,163,107,.10);

  }

  .dashboard-search-btn kbd {

    margin-left: 2px;

  }

  .dashboard-welcome {

    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 28px;
    padding: 23px 25px;
    margin-bottom: 18px;
    border: 1px solid #d5e5f2;
    border-radius: 22px;
    background: linear-gradient(120deg,#fff 0%,#f4f9ff 68%,#edf7ff 100%);
    box-shadow: var(--admin-shadow-soft);
    overflow: hidden;
    position: relative;

  }

  .dashboard-welcome:after {

    content: "";
    position: absolute;
    right: -75px;
    top: -105px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 38px solid rgba(59,130,246,.05);

  }

  .dashboard-welcome>div {

    position: relative;
    z-index: 1;

  }

  .dashboard-welcome h2 {

    max-width: 750px;
    margin: 5px 0 7px;
    font-size: clamp(24px,2.2vw,34px);
    line-height: 1.08;
    letter-spacing: -.035em;
    color: #113c60;

  }

  .dashboard-welcome p {

    margin: 0;
    color: #71879b;
    font-size: 12px;

  }

  .dashboard-health {

    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 11px;
    align-items: center;
    min-width: 260px;
    padding: 13px 14px;
    border: 1px solid #d8e8f4;
    border-radius: 16px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 8px 22px rgba(32,78,119,.06);

  }

  .dashboard-health-icon {

    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #e8f8f1;
    color: #168458;
    font-weight: 900;

  }

  .dashboard-health div {

    display: grid;

  }

  .dashboard-health small {

    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .10em;
    color: #8aa0b2;

  }

  .dashboard-health b {

    font-size: 11px;
    color: #1e547c;

  }

  .dashboard-health span:last-child {

    font-size: 8px;
    color: #8398aa;
    margin-top: 2px;

  }

  .dashboard-kpis {

    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 12px;

  }

  .dashboard-kpi {

    display: block;
    min-height: 124px;
    padding: 16px 16px 14px;
    border-top: 0;
    border-radius: 17px;

  }

  .dashboard-kpi:before {

    width: 90px;
    height: 90px;

  }

  .dashboard-kpi:after {

    display: none;

  }

  .dashboard-kpi-icon {

    position: absolute;
    right: 13px;
    top: 13px;
    width: 29px;
    height: 29px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: #edf6ff;
    color: #357bbb;
    font-size: 12px;
    font-weight: 900;

  }

  .dashboard-kpi .big {

    font-size: 28px;
    margin: 6px 0 2px;

  }

  .dashboard-kpi .trend {

    font-size: 9px;

  }

  .dashboard-kpi:nth-child(1) {

    border-left: 3px solid #79b8f0;

  }

  .dashboard-kpi:nth-child(2) {

    border-left: 3px solid #5da7eb;

  }

  .dashboard-kpi:nth-child(3) {

    border-left: 3px solid #3f91df;

  }

  .dashboard-kpi:nth-child(4) {

    border-left: 3px solid #3672e6;

  }

  .dashboard-kpi:nth-child(5) {

    border-left: 3px solid #4b65d6;

  }

  .dashboard-kpi:nth-child(6) {

    border-left: 3px solid #31a7cf;

  }

  .dashboard-ops-grid {

    display: grid;
    grid-template-columns: 1.15fr 1fr .85fr;
    gap: 16px;
    margin-top: 16px;

  }

  .dashboard-ops-grid>.panel {

    min-width: 0;
    padding: 20px;

  }

  .button-link {

    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;

  }

  .today-grid {

    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 8px;
    margin: 14px 0;

  }

  .today-grid a {

    padding: 11px;
    border: 1px solid #dce9f3;
    border-radius: 13px;
    background: #f9fcff;
    transition: .2s;

  }

  .today-grid a:hover {

    background: #fff;
    border-color: #b9d7ed;
    box-shadow: 0 8px 20px rgba(34,80,120,.07);

  }

  .today-grid span,.today-grid small {

    display: block;
    color: #7c92a5;
    font-size: 8.5px;

  }

  .today-grid b {

    display: block;
    color: #15466c;
    font-size: 21px;
    line-height: 1.15;
    margin: 4px 0;

  }

  .priority-queue {

    display: grid;
    gap: 7px;

  }

  .priority-row {

    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 9px 10px;
    border-radius: 11px;
    background: #f6faff;
    border: 1px solid #e0ecf5;

  }

  .priority-row>span {

    display: grid;

  }

  .priority-row b {

    font-size: 10px;
    color: #285778;

  }

  .priority-row small {

    font-size: 8px;
    color: #8094a5;
    margin-top: 2px;

  }

  .priority-row em {

    font-style: normal;
    font-size: 8px;
    font-weight: 850;
    padding: 4px 6px;
    border-radius: 999px;
    background: #fff2dd;
    color: #a06413;

  }

  .priority-row i {

    font-style: normal;
    color: #75a3c7;

  }

  .dashboard-quick-grid {

    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
    margin-top: 14px;

  }

  .dashboard-quick-grid a {

    display: grid;
    grid-template-columns: 30px 1fr;
    column-gap: 9px;
    align-items: center;
    padding: 11px;
    border: 1px solid #dce9f3;
    border-radius: 13px;
    background: #fbfdff;
    transition: .2s;

  }

  .dashboard-quick-grid a:hover {

    background: #edf6ff;
    border-color: #b8d5ec;
    transform: translateY(-2px);

  }

  .dashboard-quick-grid a>span {

    grid-row: 1/3;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #eaf4ff;
    color: #2c72ad;
    font-weight: 900;

  }

  .dashboard-quick-grid b {

    font-size: 10px;
    color: #225374;

  }

  .dashboard-quick-grid small {

    font-size: 8px;
    color: #8498aa;

  }

  .dashboard-metrics {

    margin-top: 16px;

  }

  .dashboard-metrics .metric-row {

    grid-template-columns: 90px 1fr 44px;
    gap: 8px;

  }

  .dashboard-metrics .metric-row>span {

    font-size: 9px;

  }

  .dashboard-metrics .metric-row>b {

    font-size: 10px;

  }

  .dashboard-pulse-note {

    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    align-items: start;
    margin-top: 18px;
    padding: 11px;
    border-radius: 12px;
    background: #f0f8ff;
    border: 1px solid #d9e9f5;

  }

  .dashboard-pulse-note>span {

    color: #18a36c;
    font-size: 9px;

  }

  .dashboard-pulse-note div {

    display: grid;

  }

  .dashboard-pulse-note b {

    font-size: 9px;
    color: #275a7f;

  }

  .dashboard-pulse-note small {

    font-size: 8px;
    color: #8297a8;
    margin-top: 2px;

  }

  .dashboard-analytics-row {

    margin-top: 16px;
    gap: 16px;

  }

  .dashboard-chart-panel .chart {

    height: 210px;

  }

  .dashboard-insight-line {

    display: grid;
    grid-template-columns: 9px 1fr;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #edf3f7;

  }

  .dashboard-insight-line:last-child {

    border-bottom: 0;

  }

  .dashboard-insight-line>div {

    display: grid;

  }

  .dashboard-insight-line b {

    font-size: 10px;

  }

  .dashboard-insight-line span:not(.insight-dot) {

    font-size: 9px;
    color: #7a91a4;
    margin-top: 2px;

  }

  .insight-dot {

    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 3px;

  }

  .insight-dot.blue {

    background: #3b82f6;

  }

  .insight-dot.green {

    background: #18a36c;

  }

  .insight-dot.amber {

    background: #e9a23b;

  }

  .insight-dot.cyan {

    background: #26a9cf;

  }

  .dashboard-bookings-panel {

    margin-top: 16px;
    padding: 20px;

  }

  .dashboard-table-wrap {

    box-shadow: none;
    border: 0;
    margin-top: 6px;

  }

  .dashboard-management-card {

    margin-top: 16px;
    padding: 24px;

  }

  .dashboard-management-card h2 {

    font-size: clamp(27px,2.5vw,40px);
    line-height: 1.06;
    margin: 8px 0 12px;
    max-width: 760px;

  }

  .dashboard-management-card .compact-actions {

    align-self: stretch;

  }

  .dashboard-management-card .quick-action-card {

    min-height: 92px;

  }

  @media (max-width:1380px) {

    .dashboard-kpis {

      grid-template-columns: repeat(3,minmax(0,1fr));

    }

    .dashboard-ops-grid {

      grid-template-columns: 1fr 1fr;

    }

    .dashboard-pulse {

      grid-column: 1/-1;

    }

    .dashboard-pulse .metric-list {

      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 11px 22px;

    }

  }

  @media (max-width:1100px) and (min-width:761px) {

    body[data-page^="admin-"] .dash {

      grid-template-columns: var(--admin-sidebar-mini) minmax(0,1fr);

    }

    body[data-page^="admin-"] .side {

      padding-left: 10px;
      padding-right: 10px;

    }

    body[data-page^="admin-"] .side-copy,body[data-page^="admin-"] .side-search-copy,body[data-page^="admin-"] .side-search kbd,body[data-page^="admin-"] .side-label,body[data-page^="admin-"] .side-link-label,body[data-page^="admin-"] .side-footer-note,body[data-page^="admin-"] .side-collapse {

      display: none;

    }

    body[data-page^="admin-"] .side-head .brand {

      justify-content: center;
      padding: 2px;

    }

    body[data-page^="admin-"] .side-search,body[data-page^="admin-"] .side a {

      justify-content: center;
      padding-left: 6px;
      padding-right: 6px;

    }

    body[data-page^="admin-"] .side-section summary {

      height: 13px;
      padding: 7px 4px;
      border-top: 1px solid #d4e5f2;

    }

    body[data-page^="admin-"] .side-section summary span,body[data-page^="admin-"] .side-section summary i {

      display: none;

    }

    body[data-page^="admin-"] .side-section .side-group {

      display: grid;

    }

    .dashboard-ops-grid {

      grid-template-columns: 1fr;

    }

    .dashboard-pulse {

      grid-column: auto;

    }

  }

  @media (max-width:500px) {

    .trust-grid {

      grid-template-columns: 1fr;

    }

    .trust-grid>div {

      border-right: 0;
      border-bottom: 1px solid rgba(255,255,255,.11);
      padding: 17px 18px;

    }

    .trust-grid>div:last-child {

      border-bottom: 0;

    }

    body.premium-home .premium-hero-facts {

      display: none;

    }

    .editorial-mosaic {

      grid-template-rows: 330px 210px 210px;

    }

    .location-image {

      height: 285px;

    }

    .location-image span {

      font-size: 27px;

    }

    .portal-role-card {

      padding: 14px;

    }

    .premium-section-head {

      align-items: flex-start;

    }

    .dashboard-kpis {

      grid-template-columns: 1fr 1fr;

    }

    .dashboard-kpi .big {

      font-size: 25px;

    }

    .today-grid {

      grid-template-columns: 1fr 1fr;

    }

    .dashboard-quick-grid {

      grid-template-columns: 1fr;

    }

    .dashboard-management-card .compact-actions {

      grid-template-columns: 1fr;

    }

    .dashboard-welcome h2 {

      font-size: 26px;

    }

    .dashboard-actions .btn.gold {

      flex: 1;

    }

    .admin-command-footer {

      display: none;

    }

  }

  body:is([data-page="home"],[data-page="rooms"],[data-page="experiences"],[data-page="offers"],[data-page="gallery"],[data-page="reviews"],[data-page="contact"],[data-page="booking"]) {

    --public-navy: #113854;
    --public-blue: #edf6fc;
    --public-line: #d7e4ee;
    --public-gold: #c99032;
    background: linear-gradient(180deg,#ffffff 0%,#f8fbfd 40%,#f4f8fb 100%);
    color: #173651;

  }

  body:is([data-page="rooms"],[data-page="experiences"],[data-page="offers"],[data-page="gallery"],[data-page="reviews"],[data-page="contact"],[data-page="booking"]) .nav:before {

    background: rgba(255,255,255,.965);
    border-bottom: 1px solid rgba(204,219,231,.92);
    box-shadow: 0 8px 26px rgba(27,62,90,.045);

  }

  body:is([data-page="home"],[data-page="rooms"],[data-page="experiences"],[data-page="offers"],[data-page="gallery"],[data-page="reviews"],[data-page="contact"],[data-page="booking"]) .brand-mark {

    border-color: rgba(196,145,59,.66);
    box-shadow: 0 8px 24px rgba(129,90,29,.10);

  }

  body:is([data-page="home"],[data-page="rooms"],[data-page="experiences"],[data-page="offers"],[data-page="gallery"],[data-page="reviews"],[data-page="contact"],[data-page="booking"]) img {

    image-rendering: auto;
    backface-visibility: hidden;

  }

  .page-back {

    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    margin: 0 0 24px;
    padding: 9px 14px 9px 10px;
    border: 1px solid #d4e2ed;
    border-radius: 999px;
    background: rgba(255,255,255,.88);
    color: #315772;
    box-shadow: 0 10px 28px rgba(28,66,97,.07);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    cursor: pointer;
    font-size: 12px;
    font-weight: 820;
    letter-spacing: .01em;
    transition: transform .25s var(--ease),box-shadow .25s ease,border-color .25s ease,background .25s ease;

  }

  .page-back:hover {

    transform: translateX(-3px);
    background: #fff;
    border-color: #afc9dc;
    box-shadow: 0 14px 32px rgba(28,66,97,.11);

  }

  .page-back:focus-visible {

    outline: 3px solid rgba(59,130,246,.18);
    outline-offset: 3px;

  }

  .page-back-icon {

    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #edf5fb;
    color: #1b5f92;
    font-size: 15px;
    line-height: 1;

  }

  body:is([data-page="rooms"],[data-page="experiences"],[data-page="offers"],[data-page="gallery"],[data-page="reviews"],[data-page="contact"],[data-page="booking"]) .page-hero {

    padding: calc(var(--nav-h) + 44px) 0 72px;
    background: radial-gradient(circle at 86% 18%,rgba(151,205,241,.23) 0,transparent 28%),
    radial-gradient(circle at 6% 92%,rgba(213,169,91,.12) 0,transparent 28%),
    linear-gradient(135deg,#ffffff 0%,#f4f9fd 58%,#fbf6ec 100%);
    border-bottom: 1px solid #e2ebf2;

  }

  body:is([data-page="rooms"],[data-page="experiences"],[data-page="offers"],[data-page="gallery"],[data-page="reviews"],[data-page="contact"],[data-page="booking"]) .page-hero:after {

    width: 300px;
    height: 300px;
    right: -115px;
    bottom: -160px;
    border-color: rgba(191,143,60,.14);

  }

  body:is([data-page="rooms"],[data-page="experiences"],[data-page="offers"],[data-page="gallery"],[data-page="reviews"],[data-page="contact"],[data-page="booking"]) .page-title {

    max-width: 900px;
    font-size: clamp(44px,5vw,70px);
    line-height: .99;
    color: #123a58;
    text-wrap: balance;

  }

  body:is([data-page="rooms"],[data-page="experiences"],[data-page="offers"],[data-page="gallery"],[data-page="reviews"],[data-page="contact"],[data-page="booking"]) .page-hero .lead {

    max-width: 760px;
    color: #617b91;
    line-height: 1.68;

  }

  body:is([data-page="home"],[data-page="rooms"],[data-page="experiences"],[data-page="offers"],[data-page="gallery"],[data-page="reviews"],[data-page="contact"],[data-page="booking"]) .section {

    padding-top: 88px;
    padding-bottom: 88px;

  }

  body:is([data-page="home"],[data-page="rooms"],[data-page="experiences"],[data-page="offers"],[data-page="gallery"],[data-page="reviews"],[data-page="contact"],[data-page="booking"]) .section.compact {

    padding-top: 70px;
    padding-bottom: 70px;

  }

  body:is([data-page="home"],[data-page="rooms"],[data-page="experiences"],[data-page="offers"],[data-page="gallery"],[data-page="reviews"],[data-page="contact"],[data-page="booking"]) .section-title {

    color: #153c59;
    letter-spacing: -.044em;
    text-wrap: balance;

  }

  body:is([data-page="home"],[data-page="rooms"],[data-page="experiences"],[data-page="offers"],[data-page="gallery"],[data-page="reviews"],[data-page="contact"],[data-page="booking"]) .lead {

    color: #687f93;
    line-height: 1.67;

  }

  body:is([data-page="home"],[data-page="rooms"],[data-page="experiences"],[data-page="offers"],[data-page="gallery"],[data-page="reviews"],[data-page="contact"],[data-page="booking"]) .eyebrow {

    color: #ad7726;

  }

  body:is([data-page="home"],[data-page="rooms"],[data-page="experiences"],[data-page="offers"],[data-page="gallery"],[data-page="reviews"],[data-page="contact"],[data-page="booking"]) :is(.room-card,.feature-card,.offer-card,.review-card,.image-card,.menu-media-card) {

    border-color: #d9e5ee;
    box-shadow: 0 16px 42px rgba(31,68,98,.075);

  }

  body:is([data-page="home"],[data-page="rooms"],[data-page="experiences"],[data-page="offers"],[data-page="gallery"],[data-page="reviews"],[data-page="contact"],[data-page="booking"]) :is(.room-card,.feature-card,.offer-card,.review-card,.image-card,.menu-media-card):hover {

    border-color: #bad0df;
    box-shadow: 0 26px 62px rgba(31,68,98,.12);

  }

  .room-card {

    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;

  }

  .room-card .media {

    height: 272px;
    background: #eaf0f4;

  }

  .room-card .media:after {

    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,transparent 66%,rgba(11,42,66,.08));

  }

  .room-card .media img {

    filter: saturate(1.035) contrast(1.025);
    transform: translateZ(0);

  }

  .room-card:hover .media img {

    filter: saturate(1.07) contrast(1.035);

  }

  .room-card .room-body {

    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 21px 20px 20px;
    min-width: 0;

  }

  .room-card .room-body>.space-between:first-child {

    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: start;
    gap: 16px;

  }

  .room-card h3 {

    font-size: 18px;
    line-height: 1.15;
    margin: 7px 0 0;
    color: #173b57;
    letter-spacing: -.015em;

  }

  .room-card .price-stack {

    min-width: 98px;
    align-self: start;
    text-align: right;
    white-space: nowrap;

  }

  .room-card .price-stack b {

    font-size: 20px;
    line-height: 1.08;
    color: #153b59;

  }

  .room-card .price-stack del {

    font-size: 10px;
    color: #97a4af;
    margin-bottom: 3px;

  }

  .room-card .price-stack small {

    font-size: 10px;
    color: #75899a;
    margin-top: 2px;

  }

  .room-card .room-body>p {

    min-height: 58px;
    margin: 18px 0 0;
    line-height: 1.55;

  }

  .room-card .amenity-row {

    margin: 15px 0 18px;

  }

  .room-card .amenity-row span {

    background: #f5f8fb;
    border-color: #e1eaf1;
    color: #526d82;

  }

  .room-card .room-body>.cluster {

    margin-top: auto;
    flex-wrap: nowrap;

  }

  .room-card .room-body>.cluster .btn {

    flex: 1;
    min-width: 0;
    padding-inline: 12px;

  }

  .room-status {

    position: absolute;
    left: 14px;
    top: 14px;
    z-index: 2;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.90);
    border: 1px solid rgba(255,255,255,.8);
    backdrop-filter: blur(12px);
    color: #2e6d55;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;

  }

  .home-room-grid {

    gap: 20px;
    align-items: stretch;

  }

  .home-room-grid .room-card {

    border-color: #dbe7f0;
    border-radius: 24px;
    box-shadow: 0 16px 44px rgba(29,65,95,.08);
    height: 100%;

  }

  .editorial-tile img,.location-image img,.photo-banner img,.gallery-item img,.menu-media-card img,.menu-card-media img,.auth-visual {

    filter: saturate(1.04) contrast(1.025);

  }

  .editorial-tile img[src*="pool-ai"] {

    object-position: center 58%;

  }

  .editorial-tile img[src*="boutique-ai"] {

    object-position: center 48%;

  }

  .location-image img[src*="lobby-ai"] {

    object-position: center 49%;

  }

  .gallery-item img[src*="lobby-ai"] {

    object-position: center 48%;

  }

  .gallery-item img[src*="boutique-ai"] {

    object-position: center 48%;

  }

  .gallery-item img[src*="terrace-ai"],.gallery-item img[src*="mountain-ai"] {

    object-position: center 52%;

  }

  .photo-banner {

    min-height: 520px;
    border-radius: var(--r-lg);
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: end;
    background: #ddd;
    border: 1px solid #d7e5ef;
    box-shadow: 0 28px 72px rgba(28,67,99,.13);

  }

  .photo-banner img {

    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s var(--ease),filter .5s ease;

  }

  .photo-banner:hover img {

    transform: scale(1.025);
    filter: saturate(1.07) contrast(1.035);

  }

  .gallery-item:after {

    position: absolute;
    right: 15px;
    bottom: 15px;
    padding: 7px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 800;
    transform: translateY(8px);
    opacity: 0;
    transition: .3s;
    content: "View photo";
    background: rgba(255,255,255,.93);
    color: #244b68;

  }

  .menu-media-card,.menu-card {

    overflow: hidden;
    background: #fff;
    border-radius: 23px;

  }

  .menu-media-card img,.menu-card-media img {

    width: 100%;
    object-fit: cover;
    background: #edf2f6;

  }

  .menu-media-card img {

    height: 290px;

  }

  .menu-card-media {

    background: #f2f2f2;
    height: 220px;
    overflow: hidden;

  }

  .menu-card-media img {

    width: 100%;
    object-fit: cover;
    transition: transform .7s var(--ease);
    height: 100%;

  }

  .feature-card {

    padding: 26px;
    border-radius: var(--r);
    border: 1px solid var(--line);
    transition: .35s;
    background: linear-gradient(180deg,#fff 0%,#fbfdff 100%);

  }

  @supports selector(:has(*)) {

    body[data-page="home"] .home-review-section:has(#reviewsGrid:empty) {

      display: none;

    }

    body[data-page="home"] .home-offer-section:has([data-offers-grid]:empty) {

      padding-top: 54px;
      padding-bottom: 54px;

    }

  }

  body[data-page="home"] .home-location-section {

    margin-top: 0;
    border-top: 1px solid #dbe8f1;

  }

  body[data-page="home"] .location-premium {

    gap: 62px;

  }

  body[data-page="home"] .location-image {

    height: 410px;
    border: 1px solid #d7e4ed;

  }

  body:is([data-page="home"],[data-page="rooms"],[data-page="experiences"],[data-page="offers"],[data-page="gallery"],[data-page="reviews"],[data-page="contact"],[data-page="booking"]) .btn.gold {

    background: linear-gradient(135deg,#d4a243 0%,#bd8126 100%);
    box-shadow: 0 10px 24px rgba(177,119,33,.15);

  }

  body:is([data-page="home"],[data-page="rooms"],[data-page="experiences"],[data-page="offers"],[data-page="gallery"],[data-page="reviews"],[data-page="contact"],[data-page="booking"]) .btn.light {

    border-color: #d5e1ea;
    background: rgba(255,255,255,.94);

  }

  body[data-page="login"] .auth-back-home {

    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 9px 13px;
    border: 1px solid #d4e3ef;
    border-radius: 999px;
    background: #f7fbff;
    color: #315f82;
    font-size: 11px;
    font-weight: 850;
    transition: .25s;

  }

  body[data-page="login"] .auth-back-home:hover {

    transform: translateX(-3px);
    background: #fff;
    border-color: #abc8de;

  }

  @media (max-width:1050px) {

    .menu {

      display: none;

    }

    .menu-toggle {

      display: block;

    }

    .grid.four,.kpis {

      grid-template-columns: repeat(2,minmax(0,1fr));

    }

    .grid.three {

      grid-template-columns: repeat(2,minmax(0,1fr));

    }

    .dash {

      grid-template-columns: 88px minmax(0,1fr);

    }

    .side {

      padding: 20px 12px;

    }

    .side .brand {

      justify-content: center;

    }

    .side .brand span:not(.brand-mark),.side-label,.side a span:not(.side-icon) {

      display: none;

    }

    .side a {

      justify-content: center;

    }

    .side-icon {

      font-size: 18px;

    }

    .inline-edit {

      grid-template-columns: 1fr 1fr;

    }

    .inline-edit>*:last-child {

      grid-column: 1/-1;

    }

    .media-grid {

      grid-template-columns: repeat(2,minmax(0,1fr));

    }

    .business-kpis {

      grid-template-columns: repeat(3,minmax(0,1fr));

    }

    .kds-board {

      grid-template-columns: repeat(2,minmax(0,1fr));

    }

    body.guest-auth-page .auth-shell {

      grid-template-columns: 1fr;

    }

    body.guest-auth-page .auth-visual {

      display: none;

    }

    body.guest-auth-page .auth-panel {

      min-height: 100svh;

    }

    .room-card .media {

      height: 255px;

    }

    .room-card .room-body>p {

      min-height: 0;

    }

  }

  @media (max-width:480px) {

    .kpis {

      grid-template-columns: 1fr;

    }

    .footer-grid {

      grid-template-columns: 1fr;

    }

    .hero .lead {

      font-size: 15px;

    }

    .actions .btn {

      flex: 1;

    }

    .page-title {

      font-size: 48px;

    }

    .hero {

      padding-bottom: 250px;

    }

    .hero .display {

      font-size: 46px;

    }

    .hero-content .cluster {

      display: grid;
      grid-template-columns: 1fr 1fr;

    }

    .hero-content .cluster .btn {

      padding: 12px 10px;
      font-size: 12px;

    }

    .booking-bar {

      bottom: 16px;

    }

    .media-card>img {

      height: 210px;

    }

    body[data-page^="guest-"] .dash-actions {

      gap: 7px;

    }

    body[data-page^="guest-"] .dash-actions>.btn.light.sm:not(.mobile-panel-menu):not([data-logout]) {

      display: none;

    }

    body[data-page="guest-dashboard"] .guest-hero-card h2 {

      font-size: 30px;

    }

    body[data-page="guest-dashboard"] .guest-hero-card:after {

      display: none;

    }

    .room-card .media {

      height: 225px;

    }

    .page-back-icon {

      width: 23px;
      height: 23px;

    }

  }

  .form-section-title {

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin: 6px 0 2px;
    padding-top: 14px;
    border-top: 1px solid #e8eff5;

  }

  .form-section-title span {

    font-size: 12px;
    font-weight: 900;
    color: #173f62;

  }

  .form-section-title small {

    font-size: 9px;
    color: #8193a4;
    font-weight: 700;

  }

  .payroll-kpi-grid,.attendance-kpi-grid {

    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 14px;
    margin-bottom: 16px;

  }

  .payroll-kpi,.attendance-kpi {

    background: linear-gradient(145deg,#fff,#f4f9ff);
    border: 1px solid #dbeaf5;
    border-radius: 18px;
    padding: 17px 18px;
    box-shadow: 0 10px 28px rgba(38,81,117,.06);

  }

  .payroll-kpi span,.attendance-kpi span {

    display: block;
    color: #7890a4;
    font-size: 10px;
    font-weight: 800;

  }

  .payroll-kpi b,.attendance-kpi b {

    display: block;
    margin-top: 6px;
    color: #143f61;
    font-size: 23px;
    letter-spacing: -.03em;

  }

  .payroll-module-grid {

    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    margin-bottom: 16px;

  }

  .payroll-settings-card,.payroll-run-card,.payroll-register,.attendance-daily,.attendance-monthly {

    border-color: #d8e8f4;
    background: linear-gradient(160deg,#fff 0%,#fbfdff 100%);

  }

  .payroll-run-controls {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 16px 0;

  }

  .compact-field {

    min-width: 190px;

  }

  .payroll-register>.space-between,.attendance-daily>.space-between,.attendance-monthly>.space-between {

    margin-bottom: 12px;

  }

  .salary-net {

    font-size: 15px;
    color: #0e5d43;

  }

  .payroll-table td {

    vertical-align: middle;

  }

  .payroll-table .cluster {

    flex-wrap: nowrap;

  }

  .tiny {

    font-size: 8.5px;

  }

  .status.danger {

    background: #fff0ef;
    color: #ae3e39;

  }

  .status.warn {

    background: #fff5df;
    color: #9b671b;

  }

  .payment-destination-card {

    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
    padding: 15px;
    border-radius: 17px;
    border: 1px solid #d7e8f5;
    background: #f6fbff;

  }

  .payment-destination-card>div {

    display: grid;
    gap: 3px;

  }

  .payment-destination-card span {

    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #8295a6;
    font-weight: 850;

  }

  .payment-destination-card b {

    color: #183f5e;
    font-size: 12px;
    overflow-wrap: anywhere;

  }

  .payment-destination-card>.cluster,.payment-destination-card>button,.payment-destination-card>p {

    grid-column: 1/-1;

  }

  .salary-payment-head {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;

  }

  .salary-payment-head>div {

    padding: 14px 16px;
    border: 1px solid #dce9f3;
    border-radius: 15px;
    background: #f8fbfe;

  }

  .salary-payment-head span {

    display: block;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #8497a8;
    font-weight: 800;

  }

  .salary-payment-head b {

    display: block;
    margin-top: 4px;
    color: #153f60;
    font-size: 19px;

  }

  .attendance-count {

    display: inline-grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    border-radius: 10px;
    font-weight: 900;

  }

  .attendance-count.present {

    background: #e9f8ef;
    color: #197047;

  }

  .attendance-count.absent {

    background: #fff0ef;
    color: #aa3f3a;

  }

  .attendance-modal-summary {

    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
    margin-bottom: 14px;

  }

  .attendance-modal-summary>div {

    padding: 12px;
    border-radius: 13px;
    background: #f5faff;
    border: 1px solid #dfebf4;

  }

  .attendance-modal-summary span {

    display: block;
    font-size: 9px;
    color: #8295a6;

  }

  .attendance-modal-summary b {

    display: block;
    margin-top: 4px;
    color: #173f62;
    font-size: 18px;

  }

  .modal-card:has(.salary-slip-document) {

    width: min(1080px,96vw);

  }

  .salary-slip-actions {

    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-bottom: 14px;

  }

  .salary-slip-document {

    --slip-navy: #0d3150;
    --slip-gold: #c99132;
    overflow: hidden;
    border: 1px solid #d9e3eb;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 55px rgba(19,50,75,.11);
    color: #17364f;

  }

  .salary-slip-header {

    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 24px;
    padding: 26px 28px;
    background: linear-gradient(135deg,#0c2d49,#144d75);
    color: #fff;
    border-bottom: 5px solid var(--slip-gold);

  }

  .salary-slip-brand {

    display: flex;
    gap: 16px;
    align-items: center;

  }

  .salary-slip-brand img {

    width: 62px;
    height: 62px;
    object-fit: contain;
    padding: 5px;
    border-radius: 50%;
    background: #fff;

  }

  .salary-slip-brand span {

    font-size: 9px;
    letter-spacing: .18em;
    color: #f2d392;
    font-weight: 900;

  }

  .salary-slip-brand h1 {

    margin: 3px 0 4px;
    color: #fff;
    font-size: 24px;

  }

  .salary-slip-brand p {

    margin: 0;
    color: #d5e2ec;
    font-size: 10px;

  }

  .salary-slip-meta {

    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 6px 10px;
    align-content: center;

  }

  .salary-slip-meta span {

    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #bcd0df;

  }

  .salary-slip-meta b {

    font-size: 10px;
    color: #fff;

  }

  .salary-slip-meta b.paid {

    color: #8ce0b8;

  }

  .salary-slip-info-grid {

    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 0;
    border-bottom: 1px solid #e1e9ef;

  }

  .salary-slip-info-grid>div {

    padding: 17px 18px;
    border-right: 1px solid #e1e9ef;

  }

  .salary-slip-info-grid>div:last-child {

    border-right: 0;

  }

  .salary-slip-info-grid span {

    display: block;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #8596a4;
    font-weight: 850;

  }

  .salary-slip-info-grid b {

    display: block;
    margin-top: 5px;
    font-size: 11px;
    color: #163d5b;

  }

  .salary-slip-info-grid small {

    display: block;
    margin-top: 2px;
    color: #798b99;
    font-size: 8px;

  }

  .salary-slip-attendance {

    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 8px;
    padding: 16px 20px;
    background: #f5f9fc;
    border-bottom: 1px solid #e2eaf0;

  }

  .salary-slip-attendance>div {

    padding: 10px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e1eaf0;
    text-align: center;

  }

  .salary-slip-attendance span {

    display: block;
    font-size: 8px;
    color: #80919f;

  }

  .salary-slip-attendance b {

    display: block;
    margin-top: 4px;
    color: #173e5d;
    font-size: 16px;

  }

  .salary-slip-money {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    padding: 22px 28px;

  }

  .salary-slip-money>div {

    padding: 18px;
    border: 1px solid #e0e8ee;
    border-radius: 14px;

  }

  .salary-slip-money h3 {

    margin: 0 0 12px;
    font-size: 13px;
    color: #163e5e;

  }

  .salary-line {

    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 8px 0;
    border-bottom: 1px dashed #e2e8ed;
    font-size: 10px;

  }

  .salary-line:last-child {

    border-bottom: 0;

  }

  .salary-line span {

    color: #6f8291;

  }

  .salary-line b {

    color: #173b58;

  }

  .salary-line.total {

    margin-top: 5px;
    padding-top: 11px;
    border-top: 2px solid #d8e3eb;
    border-bottom: 0;
    font-weight: 900;

  }

  .salary-slip-net {

    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 12px;
    padding: 0 28px 22px;

  }

  .salary-slip-net>div {

    padding: 17px 18px;
    border-radius: 14px;
    background: #0f3858;
    color: #fff;

  }

  .salary-slip-net>div:first-child {

    background: linear-gradient(135deg,#b57e24,#d9a54a);

  }

  .salary-slip-net span,.salary-slip-net small {

    display: block;
    font-size: 8px;
    opacity: .82;

  }

  .salary-slip-net strong {

    display: block;
    margin: 4px 0;
    font-size: 27px;

  }

  .salary-slip-net b {

    display: block;
    margin: 5px 0;
    font-size: 11px;

  }

  .salary-slip-log {

    padding: 0 28px 24px;

  }

  .salary-slip-section-head {

    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 9px;

  }

  .salary-slip-section-head h3 {

    margin: 0;
    font-size: 13px;
    color: #153c5a;

  }

  .salary-slip-section-head span {

    font-size: 8px;
    color: #8192a0;

  }

  .salary-slip-log table {

    width: 100%;
    min-width: 0;
    border-collapse: collapse;

  }

  .salary-slip-log th,.salary-slip-log td {

    padding: 8px 9px;
    border: 1px solid #e2e8ed;
    font-size: 8.5px;
    text-align: left;

  }

  .salary-slip-log th {

    background: #f4f8fb;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #718592;

  }

  .salary-slip-footer {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 30px;
    padding: 20px 28px;
    background: #f5f8fa;
    border-top: 1px solid #e0e8ee;

  }

  .salary-slip-footer>div {

    display: grid;

  }

  .salary-slip-footer span {

    font-size: 8px;
    color: #8193a1;

  }

  .salary-slip-footer b {

    margin-top: 8px;
    font-size: 10px;
    color: #173d5a;

  }

  .salary-slip-footer p {

    grid-column: 1/-1;
    margin: 3px 0 0;
    font-size: 8px;
    color: #82929e;

  }

  @media print {

    body.printing-salary-slip>* {

      visibility: hidden;

    }

    body.printing-salary-slip .modal,body.printing-salary-slip .modal *,body.printing-salary-slip #salarySlipPrint,body.printing-salary-slip #salarySlipPrint * {

      visibility: visible;

    }

    body.printing-salary-slip .modal {

      position: absolute;
      display: block;
      inset: 0;
      padding: 0;
      background: #fff;
      overflow: visible;

    }

    body.printing-salary-slip .modal-card {

      width: 100%;
      max-width: none;
      max-height: none;
      overflow: visible;
      border-radius: 0;
      box-shadow: none;

    }

    .printing-salary-slip .modal-head,.printing-salary-slip .salary-slip-actions {

      display: none;

    }

    .printing-salary-slip .modal-body {

      padding: 0;

    }

    .printing-salary-slip .salary-slip-document {

      border: 0;
      border-radius: 0;
      box-shadow: none;
      page-break-inside: avoid;

    }

    .printing-salary-slip .salary-slip-header {

      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;

    }

    .printing-salary-slip .salary-slip-net>div {

      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;

    }

  }

  .salary-slip-record {

    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.2fr;
    border-bottom: 1px solid #e1e9ef;
    background: #fbfdff;

  }

  .salary-slip-record>div {

    padding: 12px 18px;
    border-right: 1px solid #e1e9ef;

  }

  .salary-slip-record>div:last-child {

    border-right: 0;

  }

  .salary-slip-record span {

    display: block;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #8899a6;
    font-weight: 850;

  }

  .salary-slip-record b {

    display: block;
    margin-top: 4px;
    font-size: 9px;
    line-height: 1.45;
    color: #294a62;
    font-weight: 750;

  }

  .face-kiosk-page {

    min-height: 100%;
    background: radial-gradient(circle at 85% 10%,#e5f4ff 0,transparent 32%),linear-gradient(145deg,#f8fbfe,#eef6fc 55%,#f9fbfd);
    color: #153b59;

  }

  .face-kiosk-shell {

    width: min(1240px,calc(100% - 32px));
    margin: 0 auto;
    padding: 22px 0 28px;

  }

  .face-kiosk-header {

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 10px 0 26px;

  }

  .face-kiosk-brand {

    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #143b59;

  }

  .face-kiosk-brand img {

    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 9px 25px rgba(24,70,106,.09);

  }

  .face-kiosk-brand span {

    display: grid;

  }

  .face-kiosk-brand b {

    font-family: Georgia,serif;
    letter-spacing: .12em;
    font-size: 17px;

  }

  .face-kiosk-brand small {

    margin-top: 2px;
    font-size: 8px;
    letter-spacing: .18em;
    color: #7890a3;
    font-weight: 850;

  }

  .face-kiosk-security {

    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 13px;
    border-radius: 999px;
    border: 1px solid #d7e7f2;
    background: rgba(255,255,255,.78);
    font-size: 10px;
    font-weight: 800;
    color: #486c88;

  }

  .face-kiosk-security span {

    color: #1b9b68;

  }

  .face-kiosk-grid {

    display: grid;
    grid-template-columns: minmax(0,.92fr) minmax(430px,1.08fr);
    gap: 48px;
    align-items: center;
    min-height: 650px;

  }

  .face-kiosk-copy {

    max-width: 570px;

  }

  .face-kiosk-copy h1 {

    font-family: Georgia,serif;
    font-size: clamp(42px,5vw,72px);
    line-height: .98;
    letter-spacing: -.045em;
    margin: 10px 0 20px;
    color: #0e3452;

  }

  .face-kiosk-copy>p {

    font-size: 17px;
    line-height: 1.75;
    color: #70879a;
    max-width: 540px;

  }

  .face-kiosk-steps {

    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 9px;
    margin: 28px 0 18px;

  }

  .face-kiosk-steps>div {

    padding: 13px 10px;
    border-radius: 15px;
    border: 1px solid #dce9f3;
    background: rgba(255,255,255,.75);

  }

  .face-kiosk-steps b {

    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 9px;
    background: #e5f2ff;
    color: #2167a0;
    font-size: 11px;

  }

  .face-kiosk-steps span {

    display: block;
    margin-top: 9px;
    font-size: 9px;
    color: #5f778a;
    font-weight: 800;

  }

  .face-privacy-note {

    font-size: 10px;
    line-height: 1.6;

  }

  .face-kiosk-card {

    padding: 26px;
    border: 1px solid #d4e5f1;
    border-radius: 28px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 26px 75px rgba(29,73,107,.13);

  }

  .face-kiosk-card-head {

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 18px;

  }

  .face-kiosk-card-head h2 {

    margin: 4px 0 0;
    color: #133b5a;
    font-size: 23px;

  }

  .face-ai-state {

    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #fff5dd;
    color: #95661d;
    font-size: 8.5px;
    font-weight: 850;
    border: 1px solid #f0dfb9;
    white-space: nowrap;

  }

  .face-ai-state.ready {

    background: #eaf8f0;
    color: #197147;
    border-color: #cfeadb;

  }

  .face-ai-state.error {

    background: #fff0ef;
    color: #ad413c;
    border-color: #f0d1ce;

  }

  .face-worker-form {

    display: grid;
    gap: 14px;

  }

  .face-action-toggle {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;

  }

  .face-action-toggle label {

    cursor: pointer;

  }

  .face-action-toggle input {

    position: absolute;
    opacity: 0;
    pointer-events: none;

  }

  .face-action-toggle span {

    display: grid;
    place-items: center;
    min-height: 46px;
    border-radius: 14px;
    border: 1px solid #d7e6f1;
    background: #f7fbfe;
    color: #536f85;
    font-weight: 850;
    font-size: 11px;
    transition: .2s;

  }

  .face-action-toggle input:checked+span {

    background: #123f62;
    color: #fff;
    border-color: #123f62;
    box-shadow: 0 10px 22px rgba(18,63,98,.18);

  }

  .face-camera-stage {

    display: grid;
    gap: 13px;

  }

  .face-video-wrap,.face-admin-camera {

    position: relative;
    overflow: hidden;
    border-radius: 22px;
    background: #0d2232;
    aspect-ratio: 4/3;
    min-height: 260px;

  }

  .face-video-wrap video,.face-admin-camera video {

    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
    display: block;

  }

  .face-guide {

    position: absolute;
    inset: 11%;
    display: grid;
    place-items: center;
    pointer-events: none;

  }

  .face-guide span {

    display: block;
    width: min(58%,240px);
    aspect-ratio: .78;
    border-radius: 46% 46% 42% 42%;
    border: 3px solid rgba(255,255,255,.82);
    box-shadow: 0 0 0 999px rgba(3,22,36,.18),inset 0 0 0 1px rgba(18,126,202,.3);

  }

  .face-camera-badge {

    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 13px;
    padding: 9px 12px;
    border-radius: 12px;
    background: rgba(9,31,48,.78);
    backdrop-filter: blur(10px);
    color: #eaf5fc;
    text-align: center;
    font-size: 9.5px;
    font-weight: 800;

  }

  .face-camera-badge[data-state="ok"] {

    background: rgba(20,110,75,.85);

  }

  .face-challenge-card {

    padding: 14px 16px;
    border: 1px solid #dae8f2;
    background: #f6fbff;
    border-radius: 16px;

  }

  .face-challenge-card span {

    display: block;
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: 8px;
    color: #7d92a3;
    font-weight: 900;

  }

  .face-challenge-card b {

    display: block;
    margin: 5px 0 3px;
    color: #153d5d;
    font-size: 14px;

  }

  .face-challenge-card small {

    display: block;
    color: #758b9c;
    font-size: 9.5px;
    line-height: 1.5;

  }

  .face-scan-progress {

    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #e4eef5;

  }

  .face-scan-progress i {

    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg,#2d82c7,#1db578);
    transition: width .25s ease;

  }

  .face-result {

    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid #cfe8db;
    background: linear-gradient(145deg,#effbf4,#fff);

  }

  .face-result-icon {

    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 16px;
    background: #1c9b65;
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    box-shadow: 0 10px 22px rgba(28,155,101,.22);

  }

  .face-result span {

    font-size: 8px;
    letter-spacing: .1em;
    color: #1c855b;
    font-weight: 900;

  }

  .face-result h3 {

    margin: 4px 0;
    color: #143d5a;

  }

  .face-result p {

    margin: 0;
    color: #60798b;
    font-size: 10px;

  }

  .face-result small {

    display: block;
    margin-top: 3px;
    color: #7a8f9f;
    font-size: 8.5px;

  }

  .face-kiosk-footer {

    text-align: center;
    padding-top: 22px;
    color: #7d90a0;
    font-size: 9px;

  }

  .face-admin-hero {

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    background: linear-gradient(135deg,#f6fbff,#edf7ff);

  }

  .face-admin-hero h2 {

    margin: 4px 0 6px;
    font-size: 25px;
    color: #143f61;

  }

  .face-admin-hero-stats {

    display: grid;
    grid-template-columns: repeat(3,110px);
    gap: 8px;

  }

  .face-admin-hero-stats>div {

    padding: 13px 14px;
    border-radius: 15px;
    background: #fff;
    border: 1px solid #d9e9f4;

  }

  .face-admin-hero-stats span {

    display: block;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #7c92a4;
    font-weight: 850;

  }

  .face-admin-hero-stats b {

    display: block;
    margin-top: 5px;
    color: #153e5d;
    font-size: 21px;

  }

  .face-admin-grid {

    display: grid;
    grid-template-columns: minmax(0,1.12fr) minmax(330px,.88fr);
    gap: 16px;
    margin: 16px 0;

  }

  .face-admin-camera {

    margin: 13px 0;
    aspect-ratio: 16/10;
    min-height: 290px;

  }

  .face-capture-progress {

    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
    margin: 12px 0;

  }

  .face-capture-progress i {

    height: 8px;
    border-radius: 99px;
    background: #e1ebf2;
    transition: .2s;

  }

  .face-capture-progress i.done {

    background: #249767;
    box-shadow: 0 0 0 3px #e7f6ee;

  }

  .face-consent-check {

    margin: 15px 0 12px;

  }

  .wide-action {

    width: 100%;

  }

  .face-security-note {

    margin-top: 15px;
    font-size: 9px;
    line-height: 1.55;

  }

  @media (max-width:960px) {

    .face-kiosk-grid {

      grid-template-columns: 1fr;
      gap: 28px;
      min-height: 0;

    }

    .face-kiosk-copy {

      max-width: none;

    }

    .face-kiosk-copy h1 {

      font-size: 48px;

    }

    .face-admin-grid {

      grid-template-columns: 1fr;

    }

    .face-admin-hero {

      align-items: flex-start;
      flex-direction: column;

    }

    .face-admin-hero-stats {

      width: 100%;
      grid-template-columns: repeat(3,1fr);

    }

  }

  body[data-page="admin-face-enrollment"] .face-admin-grid > .panel {

    overflow: visible;

  }

  body[data-page="admin-face-enrollment"] .face-worker-picker {

    position: relative;
    z-index: 80;

  }

  body[data-page="admin-face-enrollment"] .face-worker-picker .select {

    position: relative;
    z-index: 81;
    background: #fff;

  }

  body[data-page="admin-face-enrollment"] .face-worker-picker small {

    font-size: 9px;
    font-weight: 600;
    color: #8095a7;

  }

  body[data-page="admin-face-enrollment"] .face-admin-camera {

    position: relative;
    z-index: 1;
    isolation: isolate;
    transition: background .15s ease;

  }

  .face-enroll-state {

    display: grid;
    gap: 3px;
    margin: 10px 0 12px;
    padding: 12px 14px;
    border: 1px solid #d8e6f0;
    border-radius: 14px;
    background: #f7fbfe;
    color: #486b85;

  }

  .face-enroll-state b {

    color: #153e5d;
    font-size: 11px;

  }

  .face-enroll-state span {

    font-size: 9.5px;
    line-height: 1.55;

  }

  .face-enroll-state[data-state="success"] {

    border-color: #bfe6d1;
    background: #eefaf4;

  }

  .face-enroll-state[data-state="success"] b {

    color: #16704a;

  }

  .face-enroll-state[data-state="success"] span {

    color: #477965;

  }

  .face-enroll-state[data-state="saving"] {

    border-color: #bcd4f3;
    background: #eef5ff;

  }

  .face-enroll-state[data-state="saving"] b {

    color: #245ea9;

  }

  .face-enroll-state[data-state="warning"] {

    border-color: #f0d9a9;
    background: #fff8e8;

  }

  .face-enroll-state[data-state="warning"] b {

    color: #946719;

  }

  .face-enroll-state[data-state="error"] {

    border-color: #efc7c4;
    background: #fff2f1;

  }

  .face-enroll-state[data-state="error"] b {

    color: #a93d38;

  }

  .face-enroll-state[data-state="error"] span {

    color: #805956;

  }

  .face-save-action {

    position: sticky;
    bottom: 12px;
    z-index: 12;

  }

  .face-auto-save-note {

    margin: 8px 2px 0;
    line-height: 1.5;
    text-align: center;

  }

  .multi-role-auth-page .multi-role-auth-card {

    padding: 30px 34px;
    width: min(620px,100%);

  }

  .worker-access-switch {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin: 2px 0 16px;
    padding: 5px;
    border: 1px solid #d8e6f1;
    background: #f3f8fc;
    border-radius: 14px;

  }

  .worker-access-tab {

    appearance: none;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #657f95;
    font: inherit;
    font-size: 10.5px;
    font-weight: 850;
    min-height: 40px;
    padding: 9px 12px;
    cursor: pointer;
    transition: .2s;

  }

  .worker-access-tab.active {

    background: #fff;
    color: #174f80;
    box-shadow: 0 6px 18px rgba(33,80,120,.10);

  }

  .worker-access-pane[hidden] {

    display: none;

  }

  .worker-access-pane {

    animation: portalPaneIn .2s ease;

  }

  .worker-self-face {

    display: grid;
    gap: 12px;

  }

  .worker-self-face-head {

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;

  }

  .worker-self-face-head h3 {

    margin: 3px 0 2px;
    color: #143e5e;
    font-size: 20px;

  }

  .worker-self-face-head p {

    margin: 0;

  }

  .worker-login-face-video {

    min-height: 285px;
    aspect-ratio: 16/10;
    border-radius: 18px;

  }

  .worker-login-face-video .face-guide span {

    width: min(48%,210px);

  }

  .worker-self-status {

    display: grid;
    gap: 3px;
    padding: 11px 13px;
    border: 1px solid #d8e6f0;
    border-radius: 13px;
    background: #f7fbfe;
    color: #486b85;

  }

  .worker-self-status b {

    font-size: 10.5px;
    color: #153e5d;

  }

  .worker-self-status span {

    font-size: 9px;
    line-height: 1.5;

  }

  .worker-self-status[data-state="success"] {

    border-color: #bfe6d1;
    background: #eefaf4;

  }

  .worker-self-status[data-state="success"] b {

    color: #16704a;

  }

  .worker-self-status[data-state="saving"] {

    border-color: #bcd4f3;
    background: #eef5ff;

  }

  .worker-self-status[data-state="saving"] b {

    color: #245ea9;

  }

  .worker-self-status[data-state="error"] {

    border-color: #efc7c4;
    background: #fff2f1;

  }

  .worker-self-status[data-state="error"] b {

    color: #a93d38;

  }

  .worker-face-actions {

    margin-top: 0;

  }

  .worker-self-after {

    padding-top: 2px;

  }

  .worker-self-after[hidden] {

    display: none;

  }

  .worker-face-attendance-intro {

    display: grid;
    gap: 3px;
    margin-bottom: 13px;

  }

  .worker-face-attendance-intro b {

    color: #173f61;
    font-size: 14px;

  }

  .worker-face-attendance-intro small {

    color: #7890a4;
    font-size: 10px;
    line-height: 1.5;

  }

  .worker-login-attendance-form {

    gap: 12px;

  }

  .worker-login-scan-stage {

    gap: 11px;

  }

  .worker-login-scan-stage .face-video-wrap {

    min-height: 285px;
    aspect-ratio: 16/10;
    border-radius: 18px;

  }

  .worker-login-face-result {

    margin-top: 8px;

  }

  .worker-login-face-result[hidden] {

    display: none;

  }

  .face-worker-signin-card {

    display: grid;
    gap: 16px;

  }

  .face-worker-signin-card h3 {

    margin: 0;

  }

  .face-worker-signin-card>p {

    margin: 0;
    line-height: 1.7;

  }

  .face-worker-flow {

    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 8px;

  }

  .face-worker-flow>div {

    padding: 13px 10px;
    border: 1px solid #dce9f3;
    border-radius: 14px;
    background: #f7fbfe;

  }

  .face-worker-flow b {

    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: #e3f0ff;
    color: #2167a0;
    font-size: 10px;

  }

  .face-worker-flow span {

    display: block;
    margin-top: 8px;
    font-size: 8.5px;
    color: #5f778a;
    font-weight: 800;
    line-height: 1.35;

  }

  .worker-self-face,.worker-access-pane,.worker-login-scan-stage {

    min-width: 0;

  }

  .worker-login-face-video,.worker-login-scan-stage .face-video-wrap {

    width: 100%;
    max-width: 100%;
    min-width: 0;

  }

  @media (max-width:640px) {

    .compact-form {

      grid-template-columns: 1fr;

    }

    .compact-form .wide,.compact-form .full {

      grid-column: auto;

    }

    .step3-nav {

      position: static;

    }

    .step3-nav a {

      flex: 1 1 44%;
      text-align: center;

    }

    .face-kiosk-shell {

      width: min(100% - 20px,1240px);
      padding-top: 10px;

    }

    .face-kiosk-header {

      padding-bottom: 17px;

    }

    .face-kiosk-security {

      display: none;

    }

    .face-kiosk-brand b {

      font-size: 14px;

    }

    .face-kiosk-brand img {

      width: 42px;
      height: 42px;

    }

    .face-kiosk-copy h1 {

      font-size: 39px;

    }

    .face-kiosk-copy>p {

      font-size: 14px;

    }

    .face-kiosk-steps {

      grid-template-columns: 1fr 1fr;

    }

    .face-kiosk-card {

      padding: 16px;
      border-radius: 21px;

    }

    .face-kiosk-card-head {

      align-items: center;

    }

    .face-ai-state {

      font-size: 7.5px;

    }

    .face-video-wrap {

      min-height: 240px;

    }

    .face-result {

      grid-template-columns: auto 1fr;

    }

    .face-result .btn {

      grid-column: 1/-1;

    }

    .face-admin-hero-stats {

      grid-template-columns: 1fr 1fr 1fr;

    }

    .face-admin-hero-stats>div {

      padding: 10px;

    }

    .face-admin-hero-stats b {

      font-size: 17px;

    }

    .face-admin-camera {

      min-height: 230px;

    }

    body[data-page="admin-face-enrollment"] .face-worker-picker {

      z-index: 100;

    }

    .face-save-action {

      bottom: 8px;

    }

    .face-enroll-state {

      padding: 11px 12px;

    }

    .multi-role-auth-page .multi-role-auth-card {

      width: 100%;

    }

    .worker-self-face-head {

      flex-direction: column;

    }

    .worker-face-actions .btn {

      flex: 1 1 120px;

    }

    .face-worker-flow {

      grid-template-columns: 1fr 1fr;

    }

    .worker-self-after .btn {

      width: 100%;

    }

    .worker-login-face-video,.worker-login-scan-stage .face-video-wrap {

      width: 100%;
      max-width: 100%;
      min-width: 0;
      min-height: 0;
      height: 235px;
      aspect-ratio: auto;

    }

    .worker-self-face .permission-check {

      min-width: 0;
      max-width: 100%;

    }

    .worker-face-actions {

      width: 100%;
      min-width: 0;

    }

  }

  .worker-panel-page {

    background: #eef6ff;
    color: #173f61;
    min-height: 100vh;

  }

  .worker-shell {

    min-height: 100vh;
    display: grid;
    grid-template-columns: 270px minmax(0,1fr);

  }

  .worker-side {

    position: sticky;
    top: 0;
    height: 100vh;
    padding: 24px 18px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: linear-gradient(180deg,#f8fbff 0%,#eaf5ff 100%);
    border-right: 1px solid #cfe1ef;
    box-shadow: 12px 0 36px rgba(30,74,111,.06);
    z-index: 20;

  }

  .worker-brand {

    padding: 0 5px;

  }

  .worker-brand .brand-mark {

    width: 48px;
    height: 48px;

  }

  .worker-brand>span:last-child {

    font-size: 19px;

  }

  .worker-brand small {

    display: block;
    font-size: 9px;
    letter-spacing: .22em;
    color: #7690a6;
    margin-top: 4px;

  }

  .worker-identity-card {

    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid #d4e5f1;
    background: #fff;
    border-radius: 18px;

  }

  .worker-avatar {

    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #1f6edc;
    color: #fff;
    font-weight: 900;

  }

  .worker-identity-card div {

    min-width: 0;
    display: grid;
    gap: 3px;

  }

  .worker-identity-card b,.worker-identity-card small {

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

  }

  .worker-identity-card small {

    font-size: 10px;
    color: #7890a4;

  }

  .worker-nav {

    display: grid;
    gap: 7px;

  }

  .worker-nav button {

    appearance: none;
    border: 0;
    background: transparent;
    border-radius: 13px;
    min-height: 46px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    gap: 11px;
    text-align: left;
    color: #4c6e8b;
    font: inherit;
    font-weight: 800;
    cursor: pointer;

  }

  .worker-nav button span {

    width: 26px;
    text-align: center;
    color: #3182ce;

  }

  .worker-nav button:hover,.worker-nav button.active {

    background: #fff;
    color: #174f80;
    box-shadow: 0 8px 22px rgba(37,86,128,.09);

  }

  .worker-side-bottom {

    margin-top: auto;
    display: grid;
    gap: 7px;

  }

  .worker-side-bottom a,.worker-side-bottom button {

    appearance: none;
    border: 0;
    background: transparent;
    color: #5f7e96;
    font: inherit;
    font-weight: 750;
    text-align: left;
    padding: 10px 12px;
    border-radius: 11px;
    cursor: pointer;
    text-decoration: none;

  }

  .worker-side-bottom a:hover,.worker-side-bottom button:hover {

    background: #fff;
    color: #174f80;

  }

  .worker-main {

    min-width: 0;
    padding: 28px 34px 50px;
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;

  }

  .worker-topbar {

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;

  }

  .worker-topbar h1 {

    font-size: 40px;
    line-height: 1;
    margin: 5px 0 8px;
    color: #143e5e;

  }

  .worker-topbar p {

    margin: 0;
    color: #7690a6;

  }

  .worker-top-actions {

    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;

  }

  .worker-online {

    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    border: 1px solid #d8e6f0;
    border-radius: 999px;
    padding: 10px 13px;
    font-size: 11px;
    font-weight: 800;
    color: #50708a;

  }

  .worker-online i {

    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #20a66a;
    box-shadow: 0 0 0 4px rgba(32,166,106,.12);

  }

  .worker-view[hidden] {

    display: none;

  }

  .worker-view.active {

    animation: portalPaneIn .22s ease;

  }

  .worker-welcome {

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 28px 30px;
    background: linear-gradient(120deg,#fff 0%,#edf7ff 100%);

  }

  .worker-welcome h2 {

    font-size: 31px;
    margin: 5px 0 9px;
    color: #143e5e;

  }

  .worker-welcome p {

    margin: 0;
    color: #6e899f;

  }

  .worker-face-state {

    min-width: 210px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #d6e7f2;
    border-radius: 16px;
    background: #fff;

  }

  .worker-face-state>span {

    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #fff3d7;
    color: #b7791f;
    font-size: 20px;

  }

  .worker-face-state.ready>span {

    background: #dcf7e9;
    color: #168151;

  }

  .worker-face-state div {

    display: grid;
    gap: 2px;

  }

  .worker-face-state small {

    color: #7b92a6;

  }

  .worker-face-state b {

    color: #173f61;

  }

  .worker-kpi-grid {

    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 16px;
    margin: 18px 0;

  }

  .worker-kpi {

    background: #fff;
    border: 1px solid #d7e6f0;
    border-radius: 18px;
    padding: 20px;
    min-width: 0;
    box-shadow: 0 10px 26px rgba(39,85,124,.05);

  }

  .worker-kpi span {

    font-size: 11px;
    color: #718aa0;
    font-weight: 800;

  }

  .worker-kpi b {

    display: block;
    font-size: 30px;
    line-height: 1.1;
    color: #143e5e;
    margin: 11px 0 6px;

  }

  .worker-kpi small {

    color: #8197aa;
    font-size: 10px;
    line-height: 1.4;

  }

  .worker-history-kpis {

    grid-template-columns: repeat(6,minmax(0,1fr));

  }

  .worker-action-grid {

    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 16px;
    margin-bottom: 18px;

  }

  .worker-action-grid button {

    appearance: none;
    border: 1px solid #d6e5ef;
    background: #fff;
    border-radius: 18px;
    padding: 18px;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 13px;
    text-align: left;
    cursor: pointer;
    color: #173f61;
    transition: .2s;
    box-shadow: 0 10px 25px rgba(39,85,124,.05);

  }

  .worker-action-grid button:hover {

    transform: translateY(-2px);
    border-color: #a9ccec;
    box-shadow: 0 14px 30px rgba(39,85,124,.09);

  }

  .worker-action-icon {

    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: #edf6ff;
    color: #2b76d9;
    font-size: 20px;

  }

  .worker-action-grid div {

    display: grid;
    gap: 4px;
    min-width: 0;

  }

  .worker-action-grid small {

    color: #7b92a6;
    line-height: 1.4;

  }

  .worker-action-grid i {

    font-style: normal;
    color: #6d99c1;
    font-size: 18px;

  }

  .worker-recent-panel {

    padding: 22px;

  }

  .worker-recent-panel h3 {

    margin: 4px 0 0;

  }

  .worker-recent-list {

    display: grid;
    margin-top: 14px;

  }

  .worker-recent-row {

    display: grid;
    grid-template-columns: minmax(0,1fr) 120px 120px;
    gap: 12px;
    align-items: center;
    padding: 13px 2px;
    border-top: 1px solid #e2edf4;

  }

  .worker-recent-row:first-child {

    border-top: 0;

  }

  .worker-recent-row>div {

    display: grid;
    gap: 3px;

  }

  .worker-recent-row span {

    font-size: 10px;
    color: #7b92a6;

  }

  .worker-recent-row>div:not(:first-child) {

    text-align: right;

  }

  .worker-section-head {

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 18px;

  }

  .worker-section-head h2 {

    font-size: 32px;
    color: #143e5e;
    margin: 4px 0 8px;

  }

  .worker-section-head p {

    margin: 0;
    color: #718aa0;
    max-width: 760px;

  }

  .worker-face-grid {

    display: grid;
    grid-template-columns: minmax(0,1.5fr) minmax(300px,.7fr);
    gap: 18px;
    align-items: start;

  }

  .worker-face-card,.worker-attendance-card,.worker-face-info,.worker-today-card {

    padding: 22px;

  }

  .worker-panel-video {

    width: 100%;
    height: auto;
    aspect-ratio: 16/10;
    min-height: 340px;
    border-radius: 20px;
    background: #0f2839;

  }

  .worker-panel-video video {

    width: 100%;
    height: 100%;
    object-fit: cover;

  }

  .worker-detail-list {

    display: grid;
    margin: 14px 0 18px;

  }

  .worker-detail-list>div {

    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 0;
    border-bottom: 1px solid #e3edf4;

  }

  .worker-detail-list span {

    color: #7a91a6;
    font-size: 11px;

  }

  .worker-detail-list b {

    text-align: right;
    color: #173f61;

  }

  .worker-face-info .notice,.worker-today-card .notice {

    margin-top: 16px;

  }

  .worker-panel-action-toggle {

    margin-bottom: 14px;

  }

  .worker-panel-scan-stage {

    margin-top: 16px;
    display: grid;
    gap: 12px;

  }

  .worker-panel-scan-stage[hidden] {

    display: none;

  }

  .worker-panel-face-result {

    margin-top: 16px;

  }

  .worker-month-field {

    display: grid;
    gap: 5px;
    font-size: 10px;
    color: #70899f;
    font-weight: 800;

  }

  .worker-month-field input {

    min-height: 44px;
    padding: 0 12px;
    border: 1px solid #d2e2ee;
    background: #fff;
    border-radius: 12px;
    color: #173f61;
    font: inherit;

  }

  .worker-attendance-table th,.worker-attendance-table td {

    white-space: nowrap;

  }

  .role-orb-wrap.floating {

    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 150;

  }

  .role-orb>span {

    font-size: 14px;
    font-weight: 900;
    letter-spacing: .02em;

  }

  .role-orb>i {

    position: absolute;
    right: 2px;
    bottom: 3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #38b678;
    border: 2px solid #fff;
    box-shadow: 0 0 0 3px rgba(56,182,120,.15);

  }

  .role-orb:hover,.role-orb-wrap.open .role-orb {

    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 13px 32px rgba(14,62,81,.24),0 0 0 5px rgba(202,150,53,.10);

  }

  .role-orb-wrap.floating .role-orb-menu {

    top: calc(100% + 10px);

  }

  .role-orb-wrap.open .role-orb-menu {

    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);

  }

  .role-orb-user {

    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 12px;
    border-bottom: 1px solid #e3ecf2;

  }

  .role-orb-mini {

    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #e9f6f5;
    color: #116b70;
    font-weight: 900;

  }

  .role-orb-user div {

    min-width: 0;
    display: grid;

  }

  .role-orb-user b {

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

  }

  .role-orb-user small {

    font-size: 10px;
    color: #7b91a3;
    margin-top: 2px;

  }

  .role-orb-links {

    display: grid;
    gap: 4px;
    padding: 8px 0;

  }

  .role-orb-links a {

    display: grid;
    grid-template-columns: 28px minmax(0,1fr) 18px;
    gap: 7px;
    align-items: center;
    min-height: 42px;
    padding: 7px 9px;
    border-radius: 11px;
    color: #315c79;
    text-decoration: none;
    transition: .18s ease;

  }

  .role-orb-links a>span {

    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: #edf6fb;
    color: #2675a9;

  }

  .role-orb-links a>b {

    font-size: 12px;

  }

  .role-orb-links a>i {

    font-style: normal;
    color: #89a0b0;

  }

  .role-orb-links a:hover {

    background: #f2f8fc;
    color: #143f61;
    transform: translateX(2px);

  }

  .role-orb-logout {

    appearance: none;
    width: 100%;
    border: 0;
    border-top: 1px solid #e3ecf2;
    background: transparent;
    color: #8a4a45;
    display: flex;
    gap: 9px;
    align-items: center;
    padding: 11px 9px 5px;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;

  }

  .role-orb-logout:hover {

    color: #b4362b;

  }

  .worker-live-clock {

    display: flex;
    align-items: center;
    gap: 9px;
    background: #fff;
    border: 1px solid #d8e6f0;
    border-radius: 16px;
    padding: 8px 12px;
    color: #50708a;
    box-shadow: 0 8px 22px rgba(39,85,124,.05);

  }

  .worker-live-clock>i {

    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #20a66a;
    box-shadow: 0 0 0 5px rgba(32,166,106,.11);
    animation: workerLivePulse 1.8s ease-in-out infinite;

  }

  .worker-live-clock>span {

    display: grid;
    gap: 1px;

  }

  .worker-live-clock b {

    font-size: 12px;
    color: #173f61;

  }

  .worker-live-clock small {

    font-size: 9px;
    color: #7990a4;

  }

  @keyframes workerLivePulse{0%,100%{box-shadow:0 0 0 4px rgba(32,166,106,.10)}50%{box-shadow:0 0 0 8px rgba(32,166,106,.02)}}

  .worker-overview-kpis {

    grid-template-columns: repeat(3,minmax(0,1fr));

  }

  .worker-kpi.payroll-kpi {

    background: linear-gradient(145deg,#fff 0%,#f7fbff 70%,#fff8e8 100%);

  }

  .worker-kpi.payroll-kpi b {

    font-size: 27px;

  }

  .worker-overview-split {

    display: grid;
    grid-template-columns: minmax(0,1.35fr) minmax(310px,.65fr);
    gap: 18px;

  }

  .worker-pay-snapshot {

    padding: 22px;

  }

  .worker-pay-snapshot h3 {

    margin: 4px 0 0;

  }

  .worker-pay-snapshot .worker-detail-list {

    margin-bottom: 14px;

  }

  .worker-action-grid-five {

    grid-template-columns: repeat(3,minmax(0,1fr));

  }

  .worker-action-grid-five button:nth-child(4),.worker-action-grid-five button:nth-child(5) {

    grid-column: auto;

  }

  .worker-calendar-controls {

    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;

  }

  .worker-calendar-controls input {

    height: 40px;
    border: 1px solid #d2e2ee;
    border-radius: 11px;
    background: #fff;
    padding: 0 10px;
    color: #173f61;
    font: inherit;
    font-weight: 750;

  }

  .worker-calendar-layout {

    display: grid;
    grid-template-columns: minmax(0,1.45fr) minmax(280px,.55fr);
    gap: 18px;
    align-items: start;

  }

  .worker-calendar-card,.worker-calendar-detail {

    padding: 22px;

  }

  .worker-calendar-title {

    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    color: #6f899f;

  }

  .worker-calendar-title>div {

    display: flex;
    align-items: center;
    gap: 9px;

  }

  .worker-calendar-title b {

    font-size: 19px;
    color: #173f61;

  }

  .worker-calendar-title>span {

    font-size: 10px;
    font-weight: 800;

  }

  .live-dot {

    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #1ca66b;
    box-shadow: 0 0 0 5px rgba(28,166,107,.10);
    animation: workerLivePulse 1.8s ease-in-out infinite;

  }

  .worker-calendar-week,.worker-calendar-grid {

    display: grid;
    grid-template-columns: repeat(7,minmax(0,1fr));
    gap: 7px;

  }

  .worker-calendar-week {

    margin-bottom: 7px;

  }

  .worker-calendar-week span {

    text-align: center;
    font-size: 9px;
    font-weight: 900;
    color: #7f96a8;
    text-transform: uppercase;
    letter-spacing: .06em;

  }

  .worker-calendar-empty {

    min-height: 92px;

  }

  .worker-calendar-day {

    appearance: none;
    min-width: 0;
    min-height: 94px;
    border: 1px solid #dce8f0;
    border-radius: 15px;
    background: #fff;
    color: #173f61;
    padding: 9px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-align: left;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;

  }

  .worker-calendar-day:before {

    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 4px;
    background: #d5e2e9;

  }

  .worker-calendar-day .cal-number {

    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-weight: 900;
    background: #f4f8fb;

  }

  .worker-calendar-day small {

    font-size: 8px;
    color: #7c92a5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;

  }

  .worker-calendar-day b {

    font-size: 9px;
    margin-top: auto;

  }

  .worker-calendar-day em {

    font-style: normal;
    font-size: 8px;
    color: #7590a6;

  }

  .worker-calendar-day.present:before {

    background: #27a76e;

  }

  .worker-calendar-day.absent:before {

    background: #dc615a;

  }

  .worker-calendar-day.half-day:before {

    background: #e1a233;

  }

  .worker-calendar-day.leave:before {

    background: #7a71d8;

  }

  .worker-calendar-day.scheduled:before {

    background: #4f91d6;

  }

  .worker-calendar-day.off {

    opacity: .7;

  }

  .worker-calendar-day.is-today {

    border-color: #c99435;
    box-shadow: 0 0 0 3px rgba(201,148,53,.10);

  }

  .worker-calendar-day.is-today .cal-number {

    background: #c99435;
    color: #fff;

  }

  .worker-calendar-day.selected {

    border-color: #2e78ca;
    background: #f2f8ff;
    box-shadow: 0 9px 24px rgba(31,102,164,.10);

  }

  .worker-calendar-day:hover {

    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(39,85,124,.11);

  }

  .worker-calendar-legend {

    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #e4edf3;

  }

  .worker-calendar-legend span {

    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 9px;
    color: #70889b;
    font-weight: 800;

  }

  .worker-calendar-legend i {

    width: 9px;
    height: 9px;
    border-radius: 3px;
    background: #d5e2e9;

  }

  .worker-calendar-legend .present {

    background: #27a76e;

  }

  .worker-calendar-legend .absent {

    background: #dc615a;

  }

  .worker-calendar-legend .half {

    background: #e1a233;

  }

  .worker-calendar-legend .leave {

    background: #7a71d8;

  }

  .worker-calendar-legend .scheduled {

    background: #4f91d6;

  }

  .worker-calendar-legend .today {

    background: #c99435;

  }

  .worker-calendar-detail {

    position: sticky;
    top: 20px;

  }

  .worker-calendar-detail h3 {

    margin: 5px 0 8px;

  }

  .worker-payment-kpis {

    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 16px;
    margin-bottom: 18px;

  }

  .worker-payment-kpis .worker-kpi {

    margin: 0;

  }

  .worker-payment-kpis .worker-kpi.paid {

    background: linear-gradient(145deg,#fff,#eefbf4);

  }

  .worker-payment-kpis .worker-kpi.pending {

    background: linear-gradient(145deg,#fff,#fff9eb);

  }

  .worker-payment-layout {

    display: grid;
    grid-template-columns: minmax(0,1.3fr) minmax(300px,.7fr);
    gap: 18px;
    margin-bottom: 18px;

  }

  .worker-current-pay-card,.worker-payment-destination {

    padding: 22px;

  }

  .worker-current-pay-card h3,.worker-payment-destination h3 {

    margin: 4px 0 14px;

  }

  .salary-breakdown {

    border: 1px solid #dfe9ef;
    border-radius: 16px;
    overflow: hidden;

  }

  .salary-breakdown>div {

    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 15px;
    border-top: 1px solid #edf2f5;

  }

  .salary-breakdown>div:first-child {

    border-top: 0;

  }

  .salary-breakdown span {

    color: #73899c;

  }

  .salary-breakdown b {

    color: #173f61;

  }

  .salary-breakdown .total {

    background: linear-gradient(135deg,#143f60,#1a5c80);
    color: #fff;
    font-size: 17px;

  }

  .salary-breakdown .total span,.salary-breakdown .total b {

    color: #fff;

  }

  .worker-pay-meta {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin: 14px 0;

  }

  .worker-pay-meta>div {

    padding: 11px 12px;
    border-radius: 12px;
    background: #f4f8fb;
    display: grid;
    gap: 4px;
    min-width: 0;

  }

  .worker-pay-meta span {

    font-size: 9px;
    color: #7c92a4;
    text-transform: uppercase;
    font-weight: 800;

  }

  .worker-pay-meta b {

    overflow-wrap: anywhere;

  }

  .worker-payment-history-panel {

    padding: 22px;

  }

  .worker-payment-table th,.worker-payment-table td {

    white-space: nowrap;

  }

  .worker-payment-table td:nth-child(8) {

    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;

  }

  .btn,.side-nav a,.guest-nav a,.worker-nav button,.filter-chip,.service-option {

    transition: transform .18s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease;

  }

  .btn:hover {

    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(32,70,101,.11);

  }

  .ui-press {

    transform: scale(.97);
    transition-duration: .08s;

  }

  .worker-kpi,.feature-card,.room-card,.offer-card,.mini-menu-card {

    transition: transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s ease,border-color .24s ease;

  }

  .worker-kpi:hover,.feature-card:hover,.offer-card:hover,.mini-menu-card:hover {

    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(31,72,105,.11);
    border-color: #bcd5e6;

  }

  .panel {

    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 22px;
    box-shadow: var(--shadow-xs);
    transition: border-color .22s ease,box-shadow .22s ease;

  }

  .panel:hover {

    border-color: #c5dceb;

  }

  .worker-view.active>* {

    animation: workerSectionPop .34s cubic-bezier(.2,.75,.2,1) both;

  }

  .worker-view.active>*:nth-child(2) {

    animation-delay: .04s;

  }

  .worker-view.active>*:nth-child(3) {

    animation-delay: .08s;

  }

  .worker-view.active>*:nth-child(4) {

    animation-delay: .12s;

  }

  @keyframes workerSectionPop{from{opacity:0;transform:translateY(8px) scale(.995)}to{opacity:1;transform:none}}

  @media (max-width:420px) {

    .worker-main {

      padding-left: 10px;
      padding-right: 10px;

    }

    .worker-nav button {

      font-size: 9px;

    }

    .worker-kpi-grid,.worker-history-kpis {

      grid-template-columns: 1fr 1fr;

    }

    .worker-kpi {

      padding: 13px;

    }

    .worker-kpi b {

      font-size: 23px;

    }

    .worker-panel-video {

      height: 235px;

    }

    .worker-face-actions .btn {

      flex: 1 1 110px;

    }

    .worker-recent-row {

      grid-template-columns: 1fr 74px 74px;
      gap: 7px;
      font-size: 11px;

    }

    .worker-topbar h1 {

      font-size: 27px;

    }

    .worker-overview-kpis,.worker-payment-kpis {

      grid-template-columns: 1fr 1fr;

    }

    .worker-calendar-day {

      min-height: 66px;

    }

    .worker-calendar-day b {

      display: none;

    }

    .worker-calendar-day em {

      font-size: 6.5px;

    }

    .worker-calendar-week span {

      font-size: 7px;

    }

    .worker-calendar-controls .btn {

      padding-left: 10px;
      padding-right: 10px;

    }

    .worker-live-clock {

      display: none;

    }

  }

  .role-orb-wrap.in-panel {

    flex: 0 0 auto;
    margin-inline: 2px;

  }

  .role-orb-wrap.in-panel .role-orb {

    width: 44px;
    height: 44px;

  }

  .role-orb-wrap.in-panel .role-orb-menu {

    top: calc(100% + 10px);

  }

  .worker-calendar-day .salary-marker,.worker-calendar-day .paid-marker {

    position: absolute;
    right: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255,255,255,.85);

  }

  .worker-calendar-day .salary-marker {

    top: 8px;
    background: #d39a34;

  }

  .worker-calendar-day .paid-marker {

    top: 22px;
    background: #23a46b;

  }

  .worker-calendar-day.has-salary-due {

    background: linear-gradient(145deg,#fff,#fff9ec);

  }

  .worker-calendar-day.has-payment {

    border-color: #b7dec9;

  }

  .worker-calendar-legend .salary {

    background: #d39a34;

  }

  .worker-calendar-legend .paid {

    background: #23a46b;

  }

  .worker-payment-insights {

    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 12px;
    margin: -4px 0 18px;

  }

  .worker-payment-insights article {

    min-width: 0;
    padding: 14px 15px;
    border: 1px solid #dfeaf1;
    border-radius: 16px;
    background: linear-gradient(145deg,#fff,#f8fbfd);
    display: grid;
    gap: 4px;
    transition: transform .22s ease,box-shadow .22s ease,border-color .22s ease;

  }

  .worker-payment-insights article:hover {

    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(34,78,112,.09);
    border-color: #bfd7e7;

  }

  .worker-payment-insights span {

    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 900;
    color: #7b91a3;

  }

  .worker-payment-insights b {

    font-size: 18px;
    color: #173f61;
    overflow-wrap: anywhere;

  }

  .worker-payment-insights small {

    font-size: 9px;
    color: #7a91a4;

  }

  .worker-payment-progress {

    height: 7px;
    border-radius: 999px;
    background: #e9f0f5;
    overflow: hidden;
    margin-top: 3px;

  }

  .worker-payment-progress i {

    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,#2ea46f,#57bd8d);
    transition: width .5s cubic-bezier(.2,.8,.2,1);

  }

  .worker-transaction-panel {

    margin-top: 18px;

  }

  .worker-transaction-panel td:nth-child(4) {

    max-width: 240px;
    white-space: normal;
    overflow-wrap: anywhere;

  }

  .worker-transaction-panel td:nth-child(7) {

    max-width: 260px;
    white-space: normal;

  }

  .role-orb {

    appearance: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(202,150,53,.72);
    background: linear-gradient(145deg,#0f5f70,#157a78);
    color: #fff;
    display: grid;
    place-items: center;
    position: relative;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(14,62,81,.16),inset 0 0 0 4px rgba(255,255,255,.12);
    transition: transform .22s ease,box-shadow .22s ease,border-color .22s ease;
    overflow: visible;

  }

  .role-orb>em {

    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translate(-50%,-4px);
    font-style: normal;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .04em;
    white-space: nowrap;
    padding: 5px 7px;
    border-radius: 8px;
    background: #153f5d;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: .16s ease;

  }

  .role-orb:hover>em,.role-orb-wrap.open .role-orb>em {

    opacity: 1;
    visibility: visible;
    transform: translate(-50%,0);

  }

  .role-orb:after {

    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px solid rgba(202,150,53,.26);
    animation: roleOrbHalo 2.4s ease-in-out infinite;

  }

  @keyframes roleOrbHalo{0%,100%{transform:scale(.95);opacity:.35}50%{transform:scale(1.12);opacity:.06}}

  .modal.open .modal-card {

    animation: modalPop .24s cubic-bezier(.2,.8,.2,1) both;

  }

  .toast.show {

    opacity: 1;
    transform: translate(-50%,0);
    animation: toastPop .28s cubic-bezier(.2,.8,.2,1) both;

  }

  @keyframes modalPop{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

  @keyframes toastPop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}

  [hidden] {

    display: none;

  }

  @media (max-width:980px) {

    .guest-hero-card,.split-hero {

      grid-template-columns: 1fr;

    }

    .action-grid {

      grid-template-columns: 1fr 1fr;

    }

    .menu {

      display: none;

    }

    .menu-toggle {

      display: grid;

    }

  }

  .role-orb-wrap {

    position: relative;
    z-index: 120;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    --orb-menu-gap: 10px;

  }

  .role-orb-menu {

    position: absolute;
    right: 0;
    width: 286px;
    padding: 12px;
    border: 1px solid #d5e3ec;
    border-radius: 20px;
    background: rgba(255,255,255,.98);
    backdrop-filter: blur(18px);
    box-shadow: 0 22px 70px rgba(19,60,87,.22);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px) scale(.98);
    transform-origin: top right;
    transition: opacity .18s ease,transform .18s ease,visibility .18s ease;
    color: #173f61;
    top: calc(100% + var(--orb-menu-gap));

  }

  .role-orb-menu::before {

    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(-1 * var(--orb-menu-gap) - 2px);
    height: calc(var(--orb-menu-gap) + 4px);
    background: transparent;

  }

  .role-orb-wrap.open .role-orb-menu,.role-orb-wrap:focus-within .role-orb-menu {

    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);

  }

  body.premium-home .premium-hero {

    height: 100svh;
    min-height: 680px;
    padding-top: var(--nav-h);
    padding-bottom: 0;
    background: linear-gradient(180deg,#fbf8f1 0%,#f5efe5 100%);
    align-items: center;

  }

  body.premium-home .premium-hero .hero-media {

    position: absolute;
    inset: 0;
    background: none;
    background-image: none;
    background-color: #fbf8f1;
    background-position: center;
    transform: none;
    filter: none;
    transition: none;
    overflow: hidden;

  }

  body.premium-home .premium-hero .hero-media::after {

    display: none;
    background: none;
    backdrop-filter: none;

  }

  body.premium-home .premium-hero::before {

    display: none;

  }

  body.premium-home .hero-slide {

    position: absolute;
    inset: 0;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    visibility: hidden;
    transform: none;
    filter: none;
    transition: opacity .9s ease,visibility .9s ease;
    will-change: opacity;

  }

  body.premium-home .hero-slide.active {

    opacity: 1;
    visibility: visible;

  }

  body.premium-home .premium-hero-content {

    position: relative;
    z-index: 3;
    max-width: 690px;
    padding-top: 0;
    color: #17364e;

  }

  body.premium-home .premium-hero .display {

    max-width: 650px;
    font-size: clamp(58px,5.6vw,92px);
    line-height: .91;
    letter-spacing: -.055em;
    text-wrap: balance;
    color: #17364e;
    text-shadow: 0 6px 26px rgba(255,255,255,.22);

  }

  body.premium-home .premium-hero .lead {

    font-size: 16px;
    max-width: 580px;
    color: #53697a;
    text-shadow: none;

  }

  body.premium-home .premium-hero .eyebrow {

    color: #9b6d21;
    text-shadow: none;

  }

  body.premium-home .hero-rating-chip {

    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid #d9e6f0;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .04em;
    background: rgba(255,255,255,.86);
    border-color: rgba(220,201,171,.85);
    color: #17364e;
    backdrop-filter: none;
    box-shadow: 0 8px 24px rgba(26,52,74,.06);

  }

  body.premium-home .premium-hero-facts .hero-fact {

    border: 1px solid rgba(210,225,237,.9);
    border-radius: 15px;
    padding: 13px 14px;
    background: rgba(255,255,255,.88);
    border-color: rgba(220,228,234,.92);
    backdrop-filter: none;
    box-shadow: 0 10px 28px rgba(26,52,74,.08);

  }

  body.premium-home .premium-hero-facts .hero-fact b {

    font-size: 12px;
    color: #17364e;

  }

  body.premium-home .premium-hero-facts .hero-fact span {

    font-size: 10px;
    color: #657a89;

  }

  body.premium-home .premium-hero .cluster .btn.light {

    background: rgba(255,255,255,.92);
    border-color: rgba(255,255,255,.88);

  }

  body.premium-home .premium-booking-bar {

    border: 1px solid #d4e3ee;
    box-shadow: 0 24px 70px rgba(28,64,94,.16);
    border-radius: 18px;
    bottom: 26px;
    background: rgba(255,255,255,.94);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;

  }

  .hero-slider-dots {

    position: absolute;
    z-index: 4;
    right: max(22px,calc((100vw - 1240px)/2));
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    gap: 10px;

  }

  .hero-slider-dots button {

    appearance: none;
    width: 11px;
    height: 11px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(23,54,78,.35);
    background: rgba(255,255,255,.78);
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0,0,0,.08);
    transition: transform .2s ease,background .2s ease,border-color .2s ease;

  }

  .hero-slider-dots button.active {

    background: #c99a46;
    border-color: #c99a46;
    transform: scale(1.28);

  }

  .hero-slider-dots button:focus-visible {

    outline: 3px solid rgba(255,255,255,.55);
    outline-offset: 4px;

  }

  .admin-identity {

    display: inline-flex;
    align-items: center;
    z-index: 20;

  }

  .admin-identity .admin-role-orb {

    cursor: default;
    pointer-events: auto;

  }

  .admin-identity .admin-role-orb:hover {

    transform: none;
    box-shadow: 0 8px 24px rgba(14,62,81,.16),inset 0 0 0 4px rgba(255,255,255,.12);

  }

  .admin-identity .admin-role-orb:after {

    display: none;

  }

  .home-v2 {

    background: #fbfaf7;
    color: #17364e;

  }

  .home-v2 .home-nav {

    background: rgba(255,255,255,.96);
    border-bottom: 1px solid rgba(20,54,78,.08);

  }

  .home-v2-hero {

    min-height: calc(100svh - 82px);
    height: auto;
    padding: 0;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg,#fbf8f1 0%,#f5efe5 100%);

  }

  .home-v2-hero .hero-media,.home-v2-hero .hero-slide {

    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: none;
    transform: none;

  }

  .home-v2-hero .hero-media:after {

    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(251,248,241,.92) 0%,rgba(251,248,241,.78) 38%,rgba(251,248,241,.34) 72%,rgba(251,248,241,.10) 100%);
    z-index: 3;
    pointer-events: none;

  }

  .home-v2-hero-inner {

    position: relative;
    z-index: 5;
    width: min(1240px,92vw);
    margin-left: auto;
    margin-right: auto;
    padding-top: 78px;
    padding-bottom: 156px;

  }

  .home-v2-copy {

    max-width: 760px;
    color: #17364e;

  }

  .home-v2-copy .eyebrow {

    color: #9b6d21;

  }

  .home-v2-copy .display {

    font-family: Georgia,"Times New Roman",serif;
    font-size: clamp(58px,6.2vw,96px);
    line-height: .92;
    letter-spacing: -.045em;
    max-width: 820px;
    margin: 22px 0 24px;
    color: #17364e;
    text-wrap: balance;
    text-shadow: 0 6px 26px rgba(255,255,255,.18);

  }

  .home-v2-copy .lead {

    max-width: 670px;
    color: #53697a;
    font-size: 18px;
    line-height: 1.75;

  }

  .home-v2-copy .hero-rating-chip {

    background: rgba(255,255,255,.82);
    border: 1px solid rgba(220,201,171,.85);
    color: #17364e;
    backdrop-filter: blur(12px);

  }

  .home-v2-copy .hero-ghost {

    background: rgba(255,255,255,.96);
    color: #173b58;
    border-color: rgba(217,226,233,.98);

  }

  .home-v2-mini-trust {

    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;

  }

  .home-v2-mini-trust span {

    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 9px 13px;
    border: 1px solid rgba(220,228,234,.95);
    border-radius: 999px;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(10px);
    font-size: 11px;
    color: #607383;
    box-shadow: 0 8px 22px rgba(29,57,79,.06);

  }

  .home-v2-mini-trust b {

    font-size: 12px;
    color: #17364e;

  }

  .home-v2-booking {

    z-index: 8;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    width: min(1280px,calc(100% - 56px));
    border-radius: 24px;
    overflow: hidden;
    background: rgba(255,255,255,.96);
    box-shadow: 0 25px 70px rgba(6,29,43,.25);
    border: 1px solid rgba(255,255,255,.6);
    backdrop-filter: blur(20px);

  }

  .home-v2-booking .field-slot {

    min-height: 94px;
    padding: 20px 28px;

  }

  .home-v2-booking .btn {

    border-radius: 0;
    min-width: 250px;

  }

  .hero-slider-nav {

    position: absolute;
    z-index: 9;
    right: 38px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    gap: 12px;
    justify-items: center;

  }

  .hero-slider-nav .hero-slider-dots {

    position: static;
    transform: none;
    display: grid;
    gap: 10px;

  }

  .hero-arrow {

    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(23,54,78,.14);
    background: rgba(255,255,255,.90);
    color: #17364e;
    font: 700 17px/1 inherit;
    display: grid;
    place-items: center;
    cursor: pointer;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 20px rgba(26,52,74,.08);
    transition: .2s ease;

  }

  .hero-arrow:hover {

    background: #f3e7cf;
    color: #173b58;
    transform: scale(1.05);

  }

  .home-v2-strip {

    border-bottom: 1px solid #e8e4dc;
    background: #fff;

  }

  .home-v2-strip-grid {

    display: grid;
    grid-template-columns: repeat(4,1fr);

  }

  .home-v2-strip-grid>div {

    display: flex;
    gap: 14px;
    padding: 25px 24px;
    border-right: 1px solid #ece8e0;

  }

  .home-v2-strip-grid>div:last-child {

    border-right: 0;

  }

  .home-v2-strip-grid i {

    font-style: normal;
    color: #c98e2d;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .1em;

  }

  .home-v2-strip-grid span {

    display: grid;
    gap: 4px;

  }

  .home-v2-strip-grid b {

    font-size: 13px;
    color: #173a55;

  }

  .home-v2-strip-grid small {

    font-size: 11px;
    color: #758898;

  }

  .home-v2 .section {

    padding-top: 96px;
    padding-bottom: 96px;

  }

  .home-v2-section-intro {

    display: grid;
    grid-template-columns: minmax(0,1.1fr) minmax(300px,.7fr);
    gap: 70px;
    align-items: end;
    margin-bottom: 38px;

  }

  .home-v2-section-intro .section-title {

    max-width: 760px;
    margin-bottom: 0;

  }

  .home-v2-section-intro .lead {

    font-size: 15px;
    margin: 0 0 12px;

  }

  .text-link {

    font-size: 12px;
    font-weight: 900;
    color: #9b6d21;
    text-decoration: none;

  }

  .text-link:hover {

    text-decoration: underline;

  }

  .home-v2-room-grid .room-card {

    border-radius: 22px;
    overflow: hidden;
    border: 1px solid #e7e3dc;
    box-shadow: 0 14px 38px rgba(25,50,67,.07);

  }

  .home-v2-story {

    background: #f3f7f8;

  }

  .home-v2-story-grid {

    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 70px;
    align-items: center;

  }

  .home-v2-story-media {

    position: relative;
    height: 620px;
    border-radius: 34px;
    overflow: hidden;
    box-shadow: 0 26px 70px rgba(22,54,71,.16);

  }

  .home-v2-story-media img {

    width: 100%;
    height: 100%;
    object-fit: cover;

  }

  .home-v2-story-media span {

    position: absolute;
    left: 24px;
    bottom: 24px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    font-weight: 900;
    color: #173e59;

  }

  .home-v2-story-copy {

    max-width: 600px;

  }

  .home-v2-story-copy .lead {

    font-size: 17px;
    line-height: 1.8;

  }

  .home-v2-feature-list {

    display: grid;
    margin-top: 28px;
    border-top: 1px solid #d8e2e7;

  }

  .home-v2-feature-list a {

    display: grid;
    grid-template-columns: 150px 1fr 24px;
    gap: 18px;
    padding: 19px 0;
    border-bottom: 1px solid #d8e2e7;
    text-decoration: none;
    color: #284f68;
    align-items: center;

  }

  .home-v2-feature-list b {

    color: #173f5b;

  }

  .home-v2-feature-list span {

    font-size: 12px;
    color: #728795;

  }

  .home-v2-feature-list i {

    font-style: normal;
    font-size: 18px;
    color: #bd8528;

  }

  .home-v2-experience {

    background: linear-gradient(180deg,#eef6fb 0%,#f7fbfd 100%);
    color: #17364e;

  }

  .home-v2-experience .eyebrow,.home-v2-experience .section-title {

    color: #17364e;

  }

  .home-v2-experience .lead {

    color: #657a89;

  }

  .home-v2-experience-grid article {

    padding: 28px;
    border: 1px solid #d8e7ef;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(27,58,79,.06);

  }

  .home-v2-experience-grid article>span {

    display: inline-grid;
    place-items: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 1px solid #e6d4b4;
    font-size: 10px;
    color: #c08b31;
    background: #fffaf1;

  }

  .home-v2-experience-grid h3 {

    margin: 32px 0 10px;
    color: #17364e;

  }

  .home-v2-experience-grid p {

    margin: 0;
    color: #6d8291;
    font-size: 12px;
    line-height: 1.75;

  }

  .home-v2-split {

    padding-top: 0;

  }

  .home-v2-split-grid {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;

  }

  .home-v2-image-card {

    position: relative;
    height: 520px;
    border-radius: 30px;
    overflow: hidden;
    color: #17364e;
    text-decoration: none;

  }

  .home-v2-image-card:after {

    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,rgba(251,248,241,.92),rgba(251,248,241,.10) 65%);

  }

  .home-v2-image-card img {

    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s ease;

  }

  .home-v2-image-card:hover img {

    transform: scale(1.035);

  }

  .home-v2-image-card>div {

    position: absolute;
    z-index: 2;
    left: 30px;
    right: 30px;
    bottom: 30px;

  }

  .home-v2-image-card small {

    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: #9b6d21;

  }

  .home-v2-image-card h3 {

    font: 700 38px/1.05 Georgia,serif;
    max-width: 480px;
    margin: 10px 0 18px;
    color: #17364e;

  }

  .home-v2-image-card span {

    font-size: 12px;
    font-weight: 900;
    color: #17364e;

  }

  .home-v2-gallery-grid {

    display: grid;
    grid-template-columns: 1.25fr .75fr .75fr;
    gap: 15px;
    height: 520px;

  }

  .home-v2-gallery-grid a {

    overflow: hidden;
    border-radius: 24px;

  }

  .home-v2-gallery-grid img {

    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;

  }

  .home-v2-gallery-grid a:hover img {

    transform: scale(1.04);

  }

  .home-v2-location {

    padding-bottom: 78px;

  }

  .home-v2-location-card {

    background: #f2f6f7;
    border: 1px solid #dfe8eb;
    border-radius: 32px;
    padding: 52px;

  }

  .home-v2-location-facts {

    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;

  }

  .home-v2-location-facts>div {

    padding: 24px 20px;
    background: #fff;
    border: 1px solid #dfe7eb;
    border-radius: 20px;
    display: grid;
    gap: 7px;

  }

  .home-v2-location-facts small {

    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #8093a0;

  }

  .home-v2-location-facts b {

    font-size: 23px;
    color: #173e5b;

  }

  .home-v2-final-cta {

    padding: 68px 0;
    background: linear-gradient(180deg,#f8f3ea 0%,#eef6fb 100%);
    color: #17364e;
    border-top: 1px solid #e3ebf0;

  }

  .home-v2-final-cta>.container {

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;

  }

  .home-v2-final-cta h2 {

    margin: 7px 0 8px;
    color: #17364e;
    font: 700 48px/1 Georgia,serif;

  }

  .home-v2-final-cta p {

    margin: 0;
    color: #6a7e8d;

  }

  .home-v2-final-cta .eyebrow {

    color: #b07b2b;

  }

  .content-manager-head {

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e1e9ee;

  }

  .content-manager-head h2 {

    margin: 5px 0 5px;

  }

  .hero-photo-admin-grid {

    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px;

  }

  .hero-photo-field {

    display: grid;
    gap: 7px;
    padding: 16px;
    border: 1px solid #dbe6ec;
    border-radius: 16px;
    background: #f8fbfc;

  }

  .hero-photo-field>span {

    font-size: 11px;
    font-weight: 900;
    color: #173f5d;

  }

  .hero-photo-field small {

    color: #8093a0;
    font-size: 9px;

  }

  .room-ready-panel {

    margin-top: 22px;

  }

  .room-ready-list {

    display: grid;
    gap: 10px;
    margin-top: 18px;

  }

  .room-ready-row {

    display: grid;
    grid-template-columns: minmax(260px,1.2fr) 160px minmax(280px,.8fr);
    align-items: center;
    gap: 18px;
    padding: 15px;
    border: 1px solid #dfe8ed;
    border-radius: 18px;
    background: #fff;

  }

  .room-ready-row.guest-waiting {

    border-color: #d7b873;
    background: #fffdf8;

  }

  .room-ready-main {

    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;

  }

  .room-ready-room {

    width: 52px;
    height: 52px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: #edf6f8;
    color: #164e66;
    font-size: 15px;
    font-weight: 900;

  }

  .room-ready-main>div {

    min-width: 0;
    display: grid;
    gap: 4px;

  }

  .room-ready-main small {

    color: #7b8e9b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

  }

  .room-ready-state {

    display: grid;
    justify-items: start;
    gap: 4px;

  }

  .room-ready-state small {

    font-size: 9px;
    color: #8093a0;

  }

  .room-ready-actions {

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;

  }

  .eta-input {

    max-width: 82px;

  }

  .room-ready-guest-card .room-ready-progress {

    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 5px;
    margin: 19px 0 13px;

  }

  .room-ready-progress i {

    height: 5px;
    border-radius: 999px;
    background: #dfe8ed;

  }

  .room-ready-progress i.done {

    background: #2c9c6c;

  }

  .guest-live-grid {

    align-items: stretch;

  }

  .guest-live-grid>.panel {

    height: 100%;

  }

  .channel-layout {

    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 20px;
    margin: 22px 0;

  }

  .channel-card-grid {

    display: grid;
    gap: 12px;
    margin-top: 16px;

  }

  .channel-card {

    padding: 16px;
    border: 1px solid #dce7ed;
    border-radius: 18px;
    background: #fbfdfe;

  }

  .channel-card small {

    display: block;
    margin-top: 4px;
    color: #8093a0;

  }

  .channel-metrics {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 14px 0;

  }

  .channel-metrics span {

    padding: 10px 12px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e6edf1;
    font-size: 10px;
    color: #758997;

  }

  .channel-metrics b {

    display: block;
    color: #173f5c;
    margin-top: 4px;

  }

  .channel-setting-form {

    display: grid;
    grid-template-columns: auto auto auto 90px auto;
    gap: 9px;
    align-items: center;

  }

  .channel-setting-form label {

    font-size: 10px;
    color: #537087;
    white-space: nowrap;

  }

  .channel-room-list {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;

  }

  .channel-room-check {

    display: flex;
    gap: 9px;
    align-items: center;
    padding: 11px;
    border: 1px solid #dfe7eb;
    border-radius: 12px;
    background: #f9fbfc;

  }

  .channel-room-check span {

    display: grid;

  }

  .channel-room-check small {

    font-size: 9px;
    color: #8092a0;

  }

  .invoice-center-main {

    max-width: 1600px;

  }

  .invoice-center-main .dash-title p {

    max-width: 720px;
    margin: 8px 0 0;

  }

  .invoice-center-kpis {

    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 14px;
    margin: 8px 0 20px;

  }

  .invoice-center-kpis article {

    padding: 18px 20px;
    border: 1px solid #dce7ed;
    border-radius: 18px;
    background: linear-gradient(145deg,#fff,#f8fbfd);
    box-shadow: 0 12px 30px rgba(31,70,96,.055);
    display: grid;
    gap: 5px;

  }

  .invoice-center-kpis span {

    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 900;
    color: #7990a1;

  }

  .invoice-center-kpis b {

    font-size: 25px;
    color: #173f5d;

  }

  .invoice-center-kpis small {

    font-size: 9px;
    color: #8497a5;

  }

  .invoice-builder {

    margin-bottom: 20px;
    border-color: #d9c08f;
    background: linear-gradient(180deg,#fffdf8 0%,#fff 100%);

  }

  .invoice-builder[hidden] {

    display: none;

  }

  .invoice-builder-head {

    padding-bottom: 15px;
    border-bottom: 1px solid #eee3cf;

  }

  .invoice-builder-head h2 {

    margin: 5px 0 6px;
    color: #153e5b;

  }

  .invoice-create-form {

    display: grid;
    gap: 18px;
    margin-top: 18px;

  }

  .invoice-form-section {

    padding: 18px;
    border: 1px solid #e0e8ed;
    border-radius: 18px;
    background: #fff;

  }

  .invoice-form-section h3 {

    margin: 0 0 14px;
    color: #173f5d;
    font-size: 16px;

  }

  .invoice-item-head,.invoice-item-row {

    display: grid;
    grid-template-columns: minmax(220px,2.2fr) minmax(95px,.75fr) minmax(78px,.55fr) minmax(85px,.65fr) minmax(100px,.75fr) minmax(78px,.55fr) 38px;
    gap: 8px;
    align-items: center;

  }

  .invoice-item-head {

    padding: 0 5px 7px;
    color: #7d909e;
    font-size: 8px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;

  }

  .invoice-items {

    display: grid;
    gap: 8px;

  }

  .invoice-item-row {

    padding: 9px;
    background: #f9fbfc;
    border: 1px solid #e4ecef;
    border-radius: 14px;

  }

  .invoice-item-row .input {

    min-width: 0;

  }

  .invoice-item-remove {

    width: 34px;
    height: 34px;
    border: 1px solid #f0cccc;
    border-radius: 10px;
    background: #fff6f6;
    color: #a33a3a;
    font-size: 18px;
    cursor: pointer;

  }

  .invoice-totals-grid {

    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 20px;

  }

  .invoice-live-total {

    align-self: stretch;
    padding: 22px;
    border-radius: 18px;
    background: linear-gradient(150deg,#073d2d,#0d5940);
    color: #fff;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px 18px;
    align-content: center;
    box-shadow: 0 18px 40px rgba(7,61,45,.14);

  }

  .invoice-live-total span {

    color: #d5e6df;

  }

  .invoice-live-total b {

    font-size: 15px;

  }

  .invoice-live-total strong {

    border-top: 1px solid rgba(237,199,117,.4);
    padding-top: 12px;
    color: #f0c56b;
    font-size: 20px;

  }

  .invoice-form-actions {

    padding-top: 2px;

  }

  .invoice-center-list-panel {

    margin-top: 0;

  }

  .invoice-search {

    width: 250px;
    min-width: 180px;

  }

  .invoice-filter {

    width: 155px;

  }

  .invoice-action-set {

    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 250px;

  }

  .invoice-action-set .btn {

    white-space: nowrap;

  }

  .invoice-center-main .table td {

    vertical-align: middle;

  }

  @media (max-width:1200px) {

    .invoice-center-kpis {

      grid-template-columns: 1fr 1fr;

    }

    .invoice-item-head {

      display: none;

    }

    .invoice-item-row {

      grid-template-columns: 1.5fr 1fr 1fr;

    }

    .invoice-item-row .input:nth-child(n/**/+4) {

      grid-column: auto;

    }

    .invoice-item-remove {

      grid-column: 3;

    }

    .invoice-totals-grid {

      grid-template-columns: 1fr;

    }

  }

  .taj-inspired {

    background: #faf7f0;
    color: #1e2f3d;

  }

  .taj-inspired main {

    overflow: hidden;

  }

  .taj-inspired .container {

    width: min(1320px,calc(100% - 64px));

  }

  .taj-inspired .section {

    padding: 112px 0;

  }

  .taj-inspired .section-title {

    font-family: Georgia,"Times New Roman",serif;
    font-size: clamp(42px,4.6vw,68px);
    line-height: 1.03;
    letter-spacing: -.035em;
    color: #1e2f3d;
    margin: 12px 0 0;

  }

  .taj-inspired .eyebrow {

    color: #a8792d;
    letter-spacing: .18em;
    font-size: 10px;

  }

  .taj-inspired .text-link {

    display: inline-flex;
    margin-top: 18px;
    color: #9d7028;
    font-size: 12px;
    letter-spacing: .04em;

  }

  .taj-inspired img {

    image-rendering: auto;

  }

  .taj-inspired .home-nav {

    height: 88px;
    color: #fff;
    background: transparent;
    border: 0;

  }

  .taj-inspired .home-nav:before {

    background: linear-gradient(180deg,rgba(14,24,25,.28),rgba(14,24,25,0));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    box-shadow: none;

  }

  .taj-inspired .home-nav .brand,.taj-inspired .home-nav .menu a {

    color: #fff;

  }

  .taj-inspired .home-nav .brand small {

    color: rgba(255,255,255,.78);

  }

  .taj-inspired .home-nav .brand-mark {

    border-color: rgba(255,255,255,.7);
    background: rgba(255,255,255,.08);

  }

  .taj-inspired .home-nav .brand-mark img {

    filter: none;

  }

  .taj-inspired .home-nav .portal-nav-btn {

    color: #fff;
    border-color: rgba(255,255,255,.52);
    background: rgba(255,255,255,.08);

  }

  .taj-inspired .home-nav.scrolled {

    color: #17364e;

  }

  .taj-inspired .home-nav.scrolled:before {

    background: rgba(255,255,255,.98);
    border-bottom: 1px solid rgba(30,47,61,.08);
    box-shadow: 0 10px 34px rgba(34,51,61,.08);

  }

  .taj-inspired .home-nav.scrolled .brand,.taj-inspired .home-nav.scrolled .menu a {

    color: #17364e;

  }

  .taj-inspired .home-nav.scrolled .brand small {

    color: #657784;

  }

  .taj-inspired .home-nav.scrolled .brand-mark {

    border-color: #c99a46;
    background: #fff;

  }

  .taj-inspired .home-nav.scrolled .portal-nav-btn {

    color: #17364e;
    border-color: #dce4e7;
    background: #fff;

  }

  .taj-inspired .home-nav .nav-book {

    min-width: 126px;

  }

  .taj-inspired .home-nav .menu {

    gap: 21px;
    font-size: 12px;

  }

  .taj-inspired .home-nav .menu a {

    padding: 35px 0;

  }

  .taj-inspired .home-nav .menu a:after {

    bottom: 24px;

  }

  .taj-inspired .luxury-hero {

    position: relative;
    width: 100vw;
    height: 100svh;
    min-height: 680px;
    padding: 0;
    overflow: hidden;
    background: #e9e1d4;
    display: block;

  }

  .taj-inspired .luxury-hero .hero-media,.taj-inspired .luxury-hero .hero-slide {

    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    filter: none;
    transform: none;

  }

  .taj-inspired .luxury-hero .hero-media:after {

    display: none;

  }

  .taj-inspired .luxury-hero .hero-slide {

    opacity: 0;
    visibility: hidden;
    transition: opacity 1.05s ease,visibility 1.05s ease;
    will-change: opacity;

  }

  .taj-inspired .luxury-hero .hero-slide.active {

    opacity: 1;
    visibility: visible;

  }

  .luxury-hero-shade {

    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg,rgba(18,31,31,.48) 0%,rgba(18,31,31,.20) 36%,rgba(18,31,31,0) 67%),linear-gradient(0deg,rgba(12,25,26,.34) 0%,rgba(12,25,26,0) 42%);

  }

  .luxury-hero-content {

    position: relative;
    z-index: 5;
    height: 100%;
    display: flex;
    align-items: flex-end;
    padding-bottom: 178px;
    pointer-events: none;

  }

  .luxury-hero-copy {

    max-width: 740px;
    color: #fff;
    pointer-events: auto;

  }

  .luxury-hero-copy .luxury-eyebrow {

    color: #f1d9aa;
    text-shadow: 0 1px 10px rgba(0,0,0,.18);

  }

  .luxury-hero-copy .display {

    font-family: Georgia,"Times New Roman",serif;
    font-size: clamp(58px,6.6vw,104px);
    line-height: .93;
    letter-spacing: -.045em;
    color: #fff;
    margin: 17px 0 18px;
    max-width: 900px;
    text-wrap: balance;
    text-shadow: 0 3px 24px rgba(0,0,0,.18);

  }

  .luxury-hero-copy .lead {

    font-size: 17px;
    line-height: 1.65;
    color: rgba(255,255,255,.92);
    max-width: 610px;
    margin: 0;

  }

  .luxury-hero-actions {

    margin-top: 26px;

  }

  .taj-inspired .hero-ghost {

    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.58);
    color: #fff;
    backdrop-filter: none;

  }

  .taj-inspired .hero-ghost:hover {

    background: #fff;
    color: #17364e;

  }

  .taj-inspired .hero-arrow {

    position: absolute;
    z-index: 8;
    top: 47%;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.65);
    background: rgba(255,255,255,.08);
    color: #fff;
    box-shadow: none;
    backdrop-filter: none;
    font-size: 19px;

  }

  .taj-inspired .hero-arrow:hover {

    background: #fff;
    color: #17364e;
    transform: scale(1.04);

  }

  .taj-inspired .hero-arrow-prev {

    left: 26px;

  }

  .taj-inspired .hero-arrow-next {

    right: 26px;

  }

  .taj-inspired .luxury-hero-dots {

    position: absolute;
    z-index: 8;
    left: 50%;
    right: auto;
    bottom: 139px;
    top: auto;
    transform: translateX(-50%);
    display: flex;
    gap: 9px;

  }

  .taj-inspired .luxury-hero-dots button {

    width: 28px;
    height: 2px;
    border: 0;
    border-radius: 0;
    background: rgba(255,255,255,.48);
    box-shadow: none;
    transition: width .2s ease,background .2s ease;
    transform: none;

  }

  .taj-inspired .luxury-hero-dots button.active {

    width: 44px;
    background: #fff;
    transform: none;

  }

  .hero-gallery-link {

    position: absolute;
    z-index: 8;
    right: 40px;
    bottom: 139px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px 7px 7px;
    border: 1px solid rgba(255,255,255,.58);
    background: rgba(20,31,30,.18);
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 9px;
    font-weight: 900;

  }

  .hero-gallery-thumbs {

    display: flex;

  }

  .hero-gallery-thumbs img {

    width: 34px;
    height: 28px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,.58);

  }

  .hero-gallery-thumbs img+img {

    margin-left: -8px;

  }

  .hero-gallery-link i {

    font-style: normal;
    font-size: 15px;

  }

  .taj-inspired .luxury-booking-bar {

    z-index: 10;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    width: min(1380px,calc(100% - 72px));
    display: grid;
    grid-template-columns: 1fr 1fr 1fr .78fr 1.15fr 180px;
    background: #fff;
    border: 1px solid rgba(255,255,255,.95);
    border-radius: 2px;
    box-shadow: 0 18px 52px rgba(14,29,30,.24);
    overflow: hidden;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;

  }

  .taj-inspired .luxury-booking-bar .field-slot {

    min-height: 86px;
    padding: 18px 20px;
    border-right: 1px solid #ece5db;
    background: #fff;

  }

  .taj-inspired .luxury-booking-bar label {

    font-size: 9px;
    color: #8c7d6d;
    letter-spacing: .13em;

  }

  .taj-inspired .luxury-booking-bar input,.taj-inspired .luxury-booking-bar select {

    font-size: 13px;
    color: #253b46;
    margin-top: 8px;

  }

  .taj-inspired .luxury-booking-bar .btn {

    border-radius: 0;
    min-width: 0;
    height: auto;

  }

  .luxury-intro {

    background: #faf7f0;

  }

  .luxury-intro-grid {

    display: grid;
    grid-template-columns: 1.05fr .8fr;
    gap: 100px;
    align-items: end;

  }

  .luxury-intro-lead {

    font: 400 18px/1.9 Georgia,serif;
    color: #50616a;
    margin: 0;
    max-width: 620px;

  }

  .luxury-facts {

    display: grid;
    grid-template-columns: repeat(4,1fr);
    margin-top: 72px;
    border-top: 1px solid #dfd5c7;
    border-bottom: 1px solid #dfd5c7;

  }

  .luxury-facts>div {

    padding: 26px 24px;
    border-right: 1px solid #dfd5c7;
    display: grid;
    gap: 4px;

  }

  .luxury-facts>div:last-child {

    border-right: 0;

  }

  .luxury-facts b {

    font: 600 30px/1 Georgia,serif;
    color: #1d3a45;

  }

  .luxury-facts span {

    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #7a756d;

  }

  .luxury-section-head {

    display: grid;
    grid-template-columns: minmax(0,1.15fr) minmax(280px,.55fr);
    gap: 72px;
    align-items: end;
    margin-bottom: 42px;

  }

  .luxury-section-head>p,.luxury-section-head>div:last-child p {

    margin: 0;
    color: #68767c;
    line-height: 1.8;
    font-size: 14px;

  }

  .luxury-rooms {

    background: #fff;

  }

  .luxury-room-grid {

    gap: 24px;

  }

  .taj-inspired .luxury-room-grid .room-card {

    border-radius: 0;
    border: 0;
    background: #fff;
    box-shadow: none;

  }

  .taj-inspired .luxury-room-grid .room-card .room-media {

    height: 420px;

  }

  .taj-inspired .luxury-room-grid .room-card img {

    filter: none;

  }

  .taj-inspired .luxury-room-grid .room-card:hover img {

    transform: scale(1.025);

  }

  .luxury-experiences {

    background: #f5efe3;

  }

  .luxury-editorial-grid {

    display: grid;
    grid-template-columns: 1.25fr .75fr;
    grid-template-rows: 300px 300px;
    gap: 18px;

  }

  .luxury-editorial-card {

    position: relative;
    overflow: hidden;
    display: block;
    min-height: 0;
    color: #fff;
    text-decoration: none;
    background: #ddd;

  }

  .luxury-editorial-card.large {

    grid-row: 1/3;

  }

  .luxury-editorial-card img {

    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: none;
    transition: transform .55s ease;

  }

  .luxury-editorial-card:hover img {

    transform: scale(1.025);

  }

  .luxury-editorial-card:after {

    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,rgba(19,31,30,.52),rgba(19,31,30,0) 58%);

  }

  .luxury-editorial-card>span {

    position: absolute;
    z-index: 2;
    left: 30px;
    right: 30px;
    bottom: 28px;
    display: grid;
    gap: 7px;

  }

  .luxury-editorial-card small {

    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #f4dba8;

  }

  .luxury-editorial-card b {

    font: 600 28px/1.1 Georgia,serif;
    max-width: 450px;

  }

  .luxury-editorial-card.large b {

    font-size: 38px;

  }

  .luxury-editorial-card i {

    font-style: normal;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;

  }

  .luxury-copy-card {

    margin-left: -90px;
    background: #faf7f0;
    padding: 72px 64px;
    position: relative;
    z-index: 2;
    border: 1px solid #eee4d5;

  }

  .luxury-copy-card p {

    color: #65747b;
    line-height: 1.9;
    margin: 26px 0 30px;

  }

  .luxury-leisure {

    background: #faf7f0;
    padding-top: 26px;

  }

  .luxury-wide-story {

    position: relative;
    height: 660px;
    overflow: hidden;

  }

  .luxury-wide-story>img {

    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: none;

  }

  .luxury-wide-story:after {

    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(246,239,227,.96) 0%,rgba(246,239,227,.82) 32%,rgba(246,239,227,.05) 65%);

  }

  .luxury-wide-story>div {

    position: absolute;
    z-index: 2;
    left: 7%;
    top: 50%;
    transform: translateY(-50%);
    max-width: 510px;
    color: #1e2f3d;

  }

  .luxury-wide-story h2 {

    font: 600 54px/1.03 Georgia,serif;
    margin: 12px 0 22px;

  }

  .luxury-wide-story p {

    line-height: 1.8;
    color: #5e6f75;
    margin-bottom: 28px;

  }

  .luxury-events {

    background: #fff;

  }

  .luxury-events-grid {

    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 80px;
    align-items: center;

  }

  .luxury-events-grid .lead {

    font-size: 16px;
    line-height: 1.9;
    color: #68777e;
    margin: 25px 0 28px;

  }

  .luxury-events-media {

    height: 600px;

  }

  .luxury-events-media img {

    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: none;

  }

  .luxury-offers {

    background: #f5efe3;

  }

  .luxury-offer-grid {

    gap: 22px;

  }

  .taj-inspired .offer-card {

    border-radius: 0;
    border: 1px solid #e5dac8;
    background: #fff;
    box-shadow: none;

  }

  .taj-inspired .offer-card img {

    filter: none;

  }

  .luxury-gallery {

    background: #fff;

  }

  .luxury-gallery-mosaic {

    display: grid;
    grid-template-columns: 1.25fr .62fr .62fr;
    grid-template-rows: 260px 260px;
    gap: 12px;

  }

  .luxury-gallery-mosaic a {

    overflow: hidden;

  }

  .luxury-gallery-mosaic .g-main {

    grid-row: 1/3;

  }

  .luxury-gallery-mosaic img {

    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: none;
    transition: transform .5s ease;

  }

  .luxury-gallery-mosaic a:hover img {

    transform: scale(1.025);

  }

  .luxury-reviews {

    background: #faf7f0;

  }

  .taj-inspired .luxury-reviews .review-card {

    border-radius: 0;
    box-shadow: none;
    border-color: #e6ddcf;
    background: #fff;

  }

  .luxury-location {

    background: #fff;

  }

  .luxury-location-card {

    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 72px;
    align-items: center;
    background: #f5efe3;
    padding: 54px;

  }

  .luxury-location-card .lead {

    font-size: 16px;
    line-height: 1.8;
    color: #617078;
    margin: 24px 0 10px;

  }

  .luxury-contact-line {

    color: #8b6a35;
    font-size: 12px;
    margin-bottom: 26px;

  }

  .luxury-location-visual {

    height: 430px;

  }

  .luxury-location-visual img {

    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: none;

  }

  .luxury-final-cta {

    background: #f1e8d9;
    padding: 76px 0;
    border-top: 1px solid #e1d5c4;

  }

  .luxury-final-cta>.container {

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 44px;

  }

  .luxury-final-cta h2 {

    font: 600 clamp(38px,4vw,60px)/1 Georgia,serif;
    color: #1e2f3d;
    margin: 10px 0 0;

  }

  .luxury-footer {

    background: #fff;
    color: #29414c;
    border-top: 1px solid #e7dfd3;

  }

  .luxury-footer a {

    color: #4f626a;

  }

  .luxury-footer .brand small {

    color: #77878d;

  }

  .luxury-hero-cms {

    gap: 18px;

  }

  .hero-slides-admin-grid {

    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 16px;

  }

  .hero-slide-admin-card {

    border: 1px solid #dce6ea;
    border-radius: 18px;
    background: #fbfdfe;
    padding: 16px;
    display: grid;
    gap: 13px;
    transition: border-color .2s ease,box-shadow .2s ease;

  }

  .hero-slide-admin-card.uploading {

    border-color: #c99a46;
    box-shadow: 0 0 0 3px rgba(201,154,70,.10);

  }

  .hero-slide-admin-top {

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

  }

  .hero-slide-admin-top>div {

    display: grid;
    gap: 2px;

  }

  .hero-slide-number {

    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #9b7a45;

  }

  .hero-slide-admin-top b {

    font-size: 13px;
    color: #173f5d;

  }

  .hero-enable {

    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 800;
    color: #496777;

  }

  .hero-admin-preview {

    height: 190px;
    overflow: hidden;
    border-radius: 12px;
    background: #eef3f5;

  }

  .hero-admin-preview img {

    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: none;

  }

  .hero-upload-control {

    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border: 1px dashed #bdcbd3;
    border-radius: 12px;
    background: #fff;
    color: #2f607b;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;

  }

  .hero-upload-control input {

    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;

  }

  .hero-meta-grid {

    gap: 10px;

  }

  .hero-slide-admin-card>.btn {

    justify-self: start;

  }

  .luxury-hero-cms .notice {

    background: #fffaf1;
    border-color: #ead9ba;
    color: #705b37;

  }

  @media (max-width:1180px) {

    .nav-inner {

      gap: 18px;

    }

    .menu {

      gap: 18px;

    }

    .menu a {

      font-size: 12px;

    }

    .nav-actions {

      gap: 10px;

    }

    .taj-inspired .home-nav .menu {

      gap: 13px;
      font-size: 11px;

    }

    .taj-inspired .luxury-booking-bar {

      width: calc(100% - 36px);
      grid-template-columns: 1fr 1fr 1fr .75fr 1fr 150px;

    }

    .taj-inspired .luxury-booking-bar .field-slot {

      padding: 16px 13px;

    }

    .luxury-intro-grid,.luxury-section-head {

      gap: 50px;

    }

    .luxury-copy-card {

      margin-left: -55px;
      padding: 54px 46px;

    }

    .luxury-events-grid {

      gap: 48px;

    }

  }

  @media (max-width:360px) {

    .taj-inspired .home-nav .nav-book {

      display: none;

    }

    .taj-inspired .luxury-hero {

      min-height: 720px;

    }

    .luxury-hero-content {

      padding-bottom: 286px;

    }

    .luxury-hero-copy .display {

      font-size: 43px;

    }

    .luxury-hero-copy .lead {

      font-size: 12px;

    }

    .hero-gallery-link b {

      display: none;

    }

    .taj-inspired .luxury-booking-bar .field-slot {

      padding: 8px;

    }

    .taj-inspired .luxury-booking-bar input,.taj-inspired .luxury-booking-bar select {

      font-size: 9px;

    }

    .luxury-facts>div {

      padding: 15px 10px;

    }

  }

  .taj-inspired .luxury-room-grid .room-card .media {

    height: 420px;
    overflow: hidden;

  }

  .taj-inspired .luxury-room-grid .room-card .media img {

    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: none;

  }

  .taj-inspired .luxury-room-grid .room-card .room-body {

    padding: 24px 4px 8px;

  }

  .taj-inspired .role-orb-menu {

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

  }

  .taj-inspired .mobile-menu {

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

  }

  @media (max-width:600px) {

    .payroll-kpi-grid,.attendance-kpi-grid {

      grid-template-columns: 1fr 1fr;
      gap: 8px;

    }

    .payroll-kpi,.attendance-kpi {

      padding: 13px;

    }

    .payroll-kpi b,.attendance-kpi b {

      font-size: 18px;

    }

    .payroll-run-controls,.salary-payment-head {

      grid-template-columns: 1fr;

    }

    .attendance-modal-summary {

      grid-template-columns: 1fr 1fr;

    }

    .salary-slip-document {

      border-radius: 12px;

    }

    .salary-slip-header,.salary-slip-money,.salary-slip-net,.salary-slip-log,.salary-slip-footer {

      padding-left: 16px;
      padding-right: 16px;

    }

    .salary-slip-info-grid {

      grid-template-columns: 1fr 1fr;

    }

    .salary-slip-attendance {

      grid-template-columns: repeat(2,1fr);

    }

    .taj-inspired .container {

      width: calc(100% - 28px);

    }

    .taj-inspired .section {

      padding: 74px 0;

    }

    .taj-inspired .section-title {

      font-size: clamp(38px,11.5vw,52px);

    }

    .taj-inspired .home-nav {

      height: 76px;

    }

    .taj-inspired .home-nav .brand {

      gap: 7px;
      font-size: 12px;
      letter-spacing: .09em;

    }

    .taj-inspired .home-nav .brand-mark {

      width: 36px;
      height: 36px;

    }

    .taj-inspired .home-nav .brand small {

      font-size: 7px;

    }

    .taj-inspired .home-nav .portal-nav-btn {

      display: none;

    }

    .taj-inspired .home-nav .nav-book {

      min-width: auto;
      padding: 10px 12px;
      font-size: 10px;

    }

    .taj-inspired .home-nav .menu-toggle {

      width: 38px;
      height: 38px;

    }

    .taj-inspired .luxury-hero {

      height: 100svh;
      min-height: 740px;

    }

    .taj-inspired .luxury-hero .hero-slide {

      background-position: center center;

    }

    .luxury-hero-shade {

      background: linear-gradient(0deg,rgba(16,29,29,.58) 0%,rgba(16,29,29,.23) 48%,rgba(16,29,29,.08) 75%);

    }

    .luxury-hero-content {

      align-items: flex-end;
      padding: 100px 18px 292px;
      width: 100%;

    }

    .luxury-hero-copy {

      max-width: 100%;

    }

    .luxury-hero-copy .display {

      font-size: clamp(45px,14vw,64px);
      line-height: .94;
      margin: 12px 0 14px;

    }

    .luxury-hero-copy .lead {

      font-size: 13px;
      line-height: 1.55;
      max-width: 95%;

    }

    .luxury-hero-actions {

      margin-top: 17px;
      gap: 8px;

    }

    .luxury-hero-actions .btn {

      padding: 11px 13px;
      font-size: 10px;

    }

    .taj-inspired .hero-arrow {

      top: 42%;
      width: 38px;
      height: 38px;
      font-size: 15px;

    }

    .taj-inspired .hero-arrow-prev {

      left: 12px;

    }

    .taj-inspired .hero-arrow-next {

      right: 12px;

    }

    .taj-inspired .luxury-hero-dots {

      bottom: 260px;

    }

    .hero-gallery-link {

      right: 14px;
      bottom: 251px;
      padding: 5px 8px 5px 5px;

    }

    .hero-gallery-thumbs img {

      width: 28px;
      height: 23px;

    }

    .taj-inspired .luxury-booking-bar {

      bottom: 10px;
      width: calc(100% - 20px);
      grid-template-columns: 1fr 1fr;
      border-radius: 2px;

    }

    .taj-inspired .luxury-booking-bar .field-slot {

      min-height: 56px;
      padding: 10px 10px;

    }

    .taj-inspired .luxury-booking-bar .field-slot:nth-child(3),.taj-inspired .luxury-booking-bar .field-slot:nth-child(4) {

      border-top: 1px solid #ece5db;

    }

    .taj-inspired .luxury-booking-bar .field-slot:nth-child(5) {

      grid-column: 1/2;
      border-top: 1px solid #ece5db;

    }

    .taj-inspired .luxury-booking-bar .btn {

      grid-column: 2/3;
      grid-row: 3;
      min-height: 58px;

    }

    .taj-inspired .luxury-booking-bar label {

      font-size: 7px;

    }

    .taj-inspired .luxury-booking-bar input,.taj-inspired .luxury-booking-bar select {

      font-size: 10px;
      margin-top: 4px;

    }

    .luxury-intro-grid {

      gap: 28px;

    }

    .luxury-intro-lead {

      font-size: 16px;
      line-height: 1.75;

    }

    .luxury-facts {

      margin-top: 46px;

    }

    .luxury-facts>div {

      padding: 18px 14px;

    }

    .luxury-facts b {

      font-size: 23px;

    }

    .luxury-facts span {

      font-size: 8px;

    }

    .luxury-section-head {

      grid-template-columns: 1fr;
      gap: 16px;
      margin-bottom: 27px;

    }

    .taj-inspired .luxury-room-grid {

      grid-template-columns: 1fr;

    }

    .taj-inspired .luxury-room-grid .room-card .room-media {

      height: 330px;

    }

    .luxury-editorial-grid {

      grid-template-columns: 1fr;
      grid-template-rows: none;

    }

    .luxury-editorial-card,.luxury-editorial-card.large {

      grid-row: auto;
      height: 350px;

    }

    .luxury-editorial-card b,.luxury-editorial-card.large b {

      font-size: 28px;

    }

    .luxury-copy-card {

      margin: -42px 15px 0;
      padding: 34px 25px;

    }

    .luxury-wide-story {

      height: 560px;

    }

    .luxury-wide-story:after {

      background: linear-gradient(0deg,rgba(246,239,227,.97) 0%,rgba(246,239,227,.76) 46%,rgba(246,239,227,.02) 76%);

    }

    .luxury-wide-story>div {

      left: 24px;
      right: 24px;
      top: auto;
      bottom: 30px;
      transform: none;

    }

    .luxury-wide-story h2 {

      font-size: 39px;

    }

    .luxury-events-grid {

      gap: 30px;

    }

    .luxury-events-media {

      height: 390px;

    }

    .luxury-gallery-mosaic {

      grid-template-columns: 1fr 1fr;
      grid-template-rows: 290px 190px 190px;

    }

    .luxury-gallery-mosaic .g-main {

      grid-column: 1/3;
      grid-row: auto;

    }

    .luxury-location-card {

      padding: 28px 20px;

    }

    .luxury-location-visual {

      height: 300px;

    }

    .luxury-final-cta {

      padding: 56px 0;

    }

    .luxury-final-cta h2 {

      font-size: 39px;

    }

    .hero-admin-preview {

      height: 160px;

    }

    .taj-inspired .luxury-room-grid .room-card .media {

      height: 330px;

    }

  }

  img,video,canvas,svg {

    max-width: 100%;

  }

  iframe {

    max-width: 100%;

  }

  button,input,select,textarea {

    font: inherit;
    max-width: 100%;

  }

  .container,.nav-inner,.footer-grid,.section-head {

    min-width: 0;

  }

  :where(.panel,.card,.room-card,.media-card,.service-card,.offer-card,.guest-hero-card,.dash-main,.auth-card,.footer-grid)>* {

    min-width: 0;

  }

  :where(p,h1,h2,h3,h4,h5,h6,td,th,a,span,small,b,strong) {

    overflow-wrap: anywhere;

  }

  @media (max-width:1100px) {

    body.premium-home .premium-hero {

      min-height: 760px;

    }

    .portal-showcase {

      gap: 38px;

    }

    .editorial-mosaic {

      grid-template-rows: 250px 250px;

    }

    .worker-shell {

      grid-template-columns: 220px minmax(0,1fr);

    }

    .worker-main {

      padding: 24px;

    }

    .worker-kpi-grid {

      grid-template-columns: repeat(2,minmax(0,1fr));

    }

    .worker-history-kpis {

      grid-template-columns: repeat(3,minmax(0,1fr));

    }

    .worker-action-grid {

      grid-template-columns: 1fr;

    }

    .worker-face-grid {

      grid-template-columns: 1fr;

    }

    .worker-panel-video {

      min-height: 300px;

    }

    .worker-overview-kpis {

      grid-template-columns: repeat(2,minmax(0,1fr));

    }

    .worker-action-grid-five {

      grid-template-columns: 1fr 1fr;

    }

    .worker-overview-split,.worker-calendar-layout,.worker-payment-layout {

      grid-template-columns: 1fr;

    }

    .worker-calendar-detail {

      position: static;

    }

    .worker-payment-kpis {

      grid-template-columns: repeat(2,minmax(0,1fr));

    }

    .worker-payment-insights {

      grid-template-columns: repeat(2,minmax(0,1fr));

    }

    .home-v2-copy .display {

      font-size: clamp(52px,7vw,78px);

    }

    .home-v2-booking {

      width: calc(100% - 32px);

    }

    .home-v2-story-grid {

      gap: 40px;

    }

    .home-v2-story-media {

      height: 540px;

    }

    .room-ready-row {

      grid-template-columns: 1fr 140px;

    }

    .room-ready-actions {

      grid-column: 1/-1;
      justify-content: flex-start;

    }

    .channel-layout {

      grid-template-columns: 1fr;

    }

    .home-v2-strip-grid {

      grid-template-columns: 1fr 1fr;

    }

    .home-v2-strip-grid>div:nth-child(2) {

      border-right: 0;

    }

    .home-v2-strip-grid>div:nth-child(-n/**/+2) {

      border-bottom: 1px solid #ece8e0;

    }

    .container {

      width: min(94vw,1180px);

    }

    .grid.four {

      grid-template-columns: repeat(2,minmax(0,1fr));

    }

    .footer-grid {

      gap: 28px;

    }

  }

  @media (max-width:380px) {

    .worker-login-face-video,.worker-login-scan-stage .face-video-wrap {

      height: 215px;

    }

    .worker-face-actions {

      display: grid;
      grid-template-columns: 1fr;

    }

    .worker-face-actions .btn {

      width: 100%;

    }

    .hero {

      padding-bottom: 380px;

    }

    .hero .display {

      font-size: 39px;

    }

    .hero-content .cluster {

      grid-template-columns: 1fr;

    }

    .nav .brand {

      max-width: calc(100vw - 92px);

    }

    .nav-actions>.btn:not(.menu-toggle) {

      display: none;

    }

  }

  main,section,header,footer,.container,.panel,.card,.grid,.dash,.dash-main {

    min-width: 0;

  }

  :where(a,button,input,select,textarea,[tabindex]):focus-visible {

    outline: 3px solid rgba(63,120,181,.3);
    outline-offset: 3px;

  }

  button {

    touch-action: manipulation;

  }

  body:not([data-page^="admin-"]):not([data-page^="guest-"]):not([data-page^="worker-"]) .page-hero {

    isolation: isolate;
    min-height: 390px;
    background: linear-gradient(118deg,#fffdf8 0%,#f6efe3 55%,#eaf5fb 100%);

  }

  body:not([data-page^="admin-"]):not([data-page^="guest-"]):not([data-page^="worker-"]) .page-hero>.container {

    position: relative;
    z-index: 3;

  }

  body:not([data-page^="admin-"]):not([data-page^="guest-"]):not([data-page^="worker-"]) .page-hero:before {

    content: "";
    position: absolute;
    z-index: 1;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(48vw,720px);
    pointer-events: none;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-mask-image: linear-gradient(90deg,transparent 0%,rgba(0,0,0,.28) 18%,#000 48%);
    mask-image: linear-gradient(90deg,transparent 0%,rgba(0,0,0,.28) 18%,#000 48%);
    opacity: .94;
    animation: brsHeroPhoto 9s ease-in-out infinite alternate;

  }

  body[data-page="booking"] .page-hero:before {

    background-image: url("../images/braj/hero-pool-sunset.webp");

  }

  body[data-page="offers"] .page-hero:before {

    background-image: url("../images/reference/heritage-exterior.webp");

  }

  body[data-page="experiences"] .page-hero:before {

    background-image: url("../images/reference/heritage-exterior.webp");

  }

  body[data-page="gallery"] .page-hero:before {

    background-image: url("../images/lobby-ai.webp");

  }

  body[data-page="reviews"] .page-hero:before {

    background-image: url("../images/terrace-ai.webp");

  }

  body[data-page="contact"] .page-hero:before {

    background-image: url("../images/city-ai.webp");

  }

  @keyframes brsHeroPhoto{from{transform:scale(1.01) translate3d(0,0,0)}to{transform:scale(1.055) translate3d(-7px,0,0)}}

  .gallery-grid {

    grid-template-columns: repeat(12,1fr);
    grid-auto-rows: 180px;
    display: grid;
    gap: 16px;

  }

  .gallery-item {

    overflow: hidden;
    border-radius: 20px;
    cursor: zoom-in;
    position: relative;
    border: 1px solid rgba(215,229,238,.88);
    box-shadow: 0 14px 34px rgba(27,66,98,.08);
    min-width: 0;
    background: #eef3f5;

  }

  .gallery-item img {

    transition: .65s var(--ease);
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: none;

  }

  .visual-story-section {

    padding-top: 28px;
    padding-bottom: 82px;
    background: linear-gradient(180deg,#fff 0%,#fbf7ef 100%);

  }

  .visual-story-head {

    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 26px;
    margin-bottom: 28px;

  }

  .visual-story-head p {

    max-width: 560px;
    margin: 0;
    color: #71818d;
    font-size: 14px;
    line-height: 1.75;

  }

  .visual-story-grid {

    display: grid;
    grid-template-columns: 1.25fr .85fr .85fr;
    gap: 14px;

  }

  .visual-story-card {

    position: relative;
    min-height: 340px;
    overflow: hidden;
    border-radius: 24px;
    background: #e9eef1;
    box-shadow: 0 16px 42px rgba(24,52,76,.11);
    isolation: isolate;

  }

  .visual-story-card:first-child {

    min-height: 430px;

  }

  .visual-story-card img {

    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: none;
    transition: transform .85s cubic-bezier(.2,.8,.2,1),filter .35s ease;

  }

  .visual-story-card:after {

    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,rgba(12,35,52,.68) 0%,rgba(12,35,52,.08) 58%,transparent 78%);
    z-index: 1;

  }

  .visual-story-card>span {

    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 20px;
    z-index: 2;
    color: #fff;
    display: grid;
    gap: 3px;
    text-shadow: 0 2px 14px rgba(0,0,0,.22);

  }

  .visual-story-card>span b {

    font: 600 22px/1.12 Georgia,"Times New Roman",serif;
    letter-spacing: -.015em;

  }

  .visual-story-card>span small {

    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #f5d9a4;
    font-weight: 800;

  }

  .visual-story-card:hover img {

    transform: scale(1.055);

  }

  .room-card .media img,.image-card .media img,.media-card img,.offer-card img,.menu-card-media img,.menu-media-card img,
.editorial-tile img,.photo-banner img,.location-image img,.visual-story-card img {

    filter: none;

  }

  .room-card,.offer-card,.gallery-item,.visual-story-card,.feature-card,.panel {

    will-change: auto;

  }

  body:is([data-page="rooms"],[data-page="offers"],[data-page="reviews"],[data-page="contact"],[data-page="booking"]) .section>.container {

    min-width: 0;

  }

  body:is([data-page="rooms"],[data-page="offers"],[data-page="reviews"],[data-page="contact"],[data-page="booking"]) .page-title {

    max-width: 760px;
    text-wrap: balance;

  }

  body:is([data-page="rooms"],[data-page="offers"],[data-page="reviews"],[data-page="contact"],[data-page="booking"]) .page-hero .lead {

    max-width: 650px;

  }

  .feature-card,.review-card,.room-card,.offer-card,.panel {

    border-color: #e2e9ee;

  }

  .table-wrap {

    overflow: auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-xs);
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

  }

  .table {

    min-width: 620px;
    border-collapse: separate;
    border-spacing: 0;

  }

  .input,select.input,textarea.input,input,select,textarea {

    min-width: 0;

  }

  .nav {

    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    transition: background .35s ease,box-shadow .35s ease,border-color .35s ease;
    color: #102b49;
    height: 86px;
    max-width: 100vw;

  }

  .nav .brand {

    min-width: 0;

  }

  .nav .brand>span:last-child {

    min-width: 0;

  }

  .mobile-menu {

    position: fixed;
    z-index: 98;
    top: var(--nav-h);
    left: 14px;
    right: 14px;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(22px);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 14px;
    box-shadow: var(--shadow-lg);
    display: none;
    transform-origin: top;
    animation: menuDrop .3s var(--ease);
    max-width: calc(100vw - 20px);

  }

  .menu-toggle {

    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
    font-size: 20px;
    color: var(--ink);
    position: relative;
    overflow: hidden;

  }

  .mobile-menu.open {

    display: grid;
    animation: brsMenuIn .28s cubic-bezier(.2,.85,.2,1) both;

  }

  @keyframes brsMenuIn{from{opacity:0;transform:translateY(-10px) scale(.985)}to{opacity:1;transform:none}}

  .brs-reveal {

    opacity: 0;
    transform: translateY(22px) scale(.992);
    transition: opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1);

  }

  .brs-reveal.brs-visible {

    opacity: 1;
    transform: none;

  }

  .brs-image-in {

    animation: brsImageIn .7s ease both;

  }

  @keyframes brsImageIn{from{opacity:.25;filter:saturate(.8)}to{opacity:1;filter:none}}

  .brs-ripple {

    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(255,255,255,.5);
    transform: translate(-50%,-50%) scale(0);
    animation: brsRipple .52s ease-out forwards;

  }

  @keyframes brsRipple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

  .eyebrow:before {

    content: "";
    width: 28px;
    height: 1px;
    background: currentColor;
    transform-origin: left;
    animation: brsEyebrow 1.2s ease both;

  }

  @keyframes brsEyebrow{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}

  body[data-page^="admin-"]:not([data-page="admin-login"]) .dash {

    min-height: 100dvh;

  }

  body[data-page^="admin-"]:not([data-page="admin-login"]) .dash-main {

    min-width: 0;

  }

  body[data-page^="admin-"]:not([data-page="admin-login"]) .table-wrap {

    overflow-x: auto;

  }

  body[data-page^="admin-"]:not([data-page="admin-login"]) .table {

    max-width: none;

  }

  .admin-menu {

    display: none;
    position: fixed;
    z-index: 460;
    right: 14px;
    top: 14px;
    width: 46px;
    height: 46px;
    border: 1px solid #dbe6f1;
    border-radius: 14px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 10px 28px rgba(31,65,104,.16);
    color: #22527f;
    font-size: 20px;
    align-items: center;
    justify-content: center;
    cursor: pointer;

  }

  .admin-overlay {

    display: none;
    position: fixed;
    z-index: 405;
    inset: 0;
    background: rgba(22,42,65,.30);
    backdrop-filter: blur(2px);

  }

  body.admin-drawer-open .admin-overlay {

    display: block;

  }

  @media (max-width:760px) {

    .brand {

      font-size: 13px;

    }

    .brand-mark {

      width: 36px;
      height: 36px;

    }

    .nav-actions .btn.gold {

      display: none;

    }

    .hero-facts {

      display: none;

    }

    .booking-bar .field-slot:nth-child(2) {

      border-right: 0;

    }

    .booking-bar .field-slot:nth-child(3) {

      grid-column: 1/-1;
      border-top: 1px solid var(--line);
      border-right: 0;

    }

    .scroll-cue {

      display: none;

    }

    .grid.two,.grid.three,.grid.four,.form-grid {

      grid-template-columns: 1fr;

    }

    .section-head {

      align-items: flex-start;
      flex-direction: column;

    }

    .auth-shell {

      grid-template-columns: 1fr;

    }

    .auth-visual {

      display: none;

    }

    .dash {

      display: block;

    }

    .side {

      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      top: auto;
      height: 68px;
      display: flex;
      align-items: center;
      gap: 6px;
      border-right: 0;
      border-top: 1px solid var(--line);
      padding: 8px 10px;
      background: rgba(255,255,255,.97);
      backdrop-filter: blur(20px);
      overflow-x: auto;

    }

    .side .brand,.side-label {

      display: none;

    }

    .side-group {

      display: contents;

    }

    .kpis {

      grid-template-columns: 1fr 1fr;

    }

    .map {

      height: 360px;

    }

    .hero-media {

      background-position: 64% center;

    }

    .hero-media:after {

      background: linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.91) 58%,rgba(255,255,255,.23) 100%);

    }

    .room-modal {

      grid-template-columns: 1fr;

    }

    .room-modal img {

      height: 230px;

    }

    .media-grid {

      grid-template-columns: 1fr;

    }

    .media-card>img {

      height: 230px;

    }

    .dash-title h1 {

      font-size: 32px;

    }

    .panel:hover {

      transform: none;

    }

    .side a {

      padding: 9px 7px;
      justify-content: center;
      min-width: 64px;

    }

    .side .side-group {

      gap: 3px;

    }

    .room-admin-cell img {

      width: 52px;
      height: 42px;

    }

    body[data-page^="admin-"] .side a.active {

      background: linear-gradient(135deg,#eef5fd,#fff3df);

    }

    body[data-page^="guest-"] .side a.active {

      background: linear-gradient(135deg,#eef8f6,#fff1e1);

    }

    .menu-media-card img,.menu-callout img {

      height: 220px;

    }

    .menu-card-media {

      height: 180px;

    }

    .mini-menu-card {

      grid-template-columns: 78px 1fr;

    }

    .mini-menu-card img {

      width: 78px;
      height: 68px;

    }

    .action-grid {

      grid-template-columns: 1fr;

    }

    .guest-hero-card h2,.split-hero h2 {

      font-size: 28px;

    }

    .business-kpis,.kds-board,.module-grid,.pos-layout,.report-grid {

      grid-template-columns: 1fr;

    }

    .module-grid>.wide,.report-grid .wide {

      grid-column: auto;

    }

    .step2-nav {

      flex-wrap: nowrap;
      overflow: auto;
      padding-bottom: 5px;

    }

    .dash-main {

      padding: 20px 16px 36px;
      min-width: 0;
      overflow-x: hidden;

    }

    .dash-top {

      align-items: flex-start;
      gap: 10px;
      flex-wrap: wrap;

    }

    .dash-actions {

      flex-wrap: wrap;
      justify-content: flex-end;
      width: auto;
      max-width: 100%;
      align-items: center;

    }

    .mobile-panel-menu {

      display: inline-flex;
      align-items: center;
      gap: 7px;

    }

    .mobile-panel-menu .menu-glyph {

      font-size: 17px;
      line-height: 1;

    }

    .side-backdrop {

      position: fixed;
      inset: 0;
      background: rgba(20,36,52,.35);
      backdrop-filter: blur(2px);
      z-index: 69;
      opacity: 0;
      pointer-events: none;
      transition: opacity .25s ease;

    }

    .side-backdrop.open {

      display: block;
      opacity: 1;
      pointer-events: auto;

    }

    body[data-page^="admin-"] .side,
  body[data-page^="guest-"] .side {

      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: auto;
      width: min(320px,88vw);
      height: 100svh;
      display: block;
      padding: 20px 14px 28px;
      border-right: 1px solid #dbe5ec;
      border-top: 0;
      background: rgba(255,255,255,.985);
      backdrop-filter: blur(20px);
      overflow-y: auto;
      overflow-x: hidden;
      transform: translateX(-105%);
      transition: transform .28s cubic-bezier(.2,.8,.2,1);
      z-index: 70;
      box-shadow: 18px 0 48px rgba(24,47,67,.16);

    }

    body[data-page^="admin-"] .side.mobile-open,
  body[data-page^="guest-"] .side.mobile-open {

      transform: translateX(0);

    }

    body[data-page^="admin-"] .side .brand,
  body[data-page^="guest-"] .side .brand {

      display: flex;
      justify-content: flex-start;
      padding: 6px 8px 20px;

    }

    body[data-page^="admin-"] .side .brand span:not(.brand-mark),
  body[data-page^="guest-"] .side .brand span:not(.brand-mark),
  body[data-page^="admin-"] .side .side-label,
  body[data-page^="guest-"] .side .side-label,
  body[data-page^="admin-"] .side a span:not(.side-icon),
  body[data-page^="guest-"] .side a span:not(.side-icon) {

      display: block;

    }

    body[data-page^="admin-"] .side-group,
  body[data-page^="guest-"] .side-group {

      display: grid;
      gap: 5px;
      margin: 8px 0 18px;

    }

    body[data-page^="admin-"] .side a,
  body[data-page^="guest-"] .side a {

      min-width: 0;
      width: 100%;
      justify-content: flex-start;
      padding: 11px 12px;

    }

    body[data-page^="admin-"] .side-icon,
  body[data-page^="guest-"] .side-icon {

      font-size: 16px;
      width: 23px;
      flex: 0 0 23px;

    }

    .module-grid {

      grid-template-columns: minmax(0,1fr);

    }

    .table-wrap {

      max-width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;

    }

    .step2-nav,.pms-nav,.step3-nav {

      max-width: 100%;
      overflow-x: auto;
      overscroll-behavior-inline: contain;

    }

    body[data-page^="admin-"] .side .brand span:not(.brand-mark),
  body[data-page^="admin-"] .side .side-label,
  body[data-page^="admin-"] .side a span:not(.side-icon) {

      color: inherit;

    }

    body[data-page^="admin-"] .side-label {

      color: #87acc3;

    }

    body[data-page^="admin-"] .side .brand span:not(.brand-mark) {

      color: #12314d;

    }

    body[data-page^="admin-"] .side .side-label {

      color: #7d99b2;

    }

    body[data-page^="admin-"] .side a span:not(.side-icon) {

      color: inherit;

    }

    body[data-page^="admin-"] .side a.active,
  body[data-page^="admin-"] .side a[aria-current="page"] {

      color: #fff;
      background: linear-gradient(135deg,var(--admin-primary),#3b82f6);

    }

    body[data-page^="admin-"] .side a.active .side-icon,
  body[data-page^="admin-"] .side a[aria-current="page"] .side-icon {

      color: #fff;

    }

    body[data-page^="admin-"] .dash-main {

      padding-bottom: 36px;

    }

    body[data-page^="guest-"] .side {

      background: radial-gradient(circle at 5% 0%,rgba(96,165,250,.15),transparent 25%),
      linear-gradient(180deg,#fbfdff 0%,#edf6ff 100%);
      border-right: 1px solid #cfe2f4;
      box-shadow: 20px 0 56px rgba(31,83,137,.18);

    }

    body[data-page^="guest-"] .side a.active,
  body[data-page^="guest-"] .side a[aria-current="page"] {

      color: #fff;
      background: linear-gradient(135deg,#1747b8,#2563eb 58%,#3b82f6);

    }

    body[data-page^="guest-"] .side a.active .side-icon,
  body[data-page^="guest-"] .side a[aria-current="page"] .side-icon {

      color: #fff;

    }

    body[data-page^="guest-"] .dash-main {

      padding-bottom: 34px;

    }

    body[data-page^="guest-"] .dash-top {

      align-items: center;

    }

    .guest-account-copy {

      display: none;

    }

    .guest-account-chip {

      padding: 6px;

    }

    .guest-account-avatar {

      width: 29px;
      height: 29px;

    }

    body[data-page="guest-dashboard"] .guest-hero-card {

      padding: 22px;
      min-height: 0;

    }

    body[data-page="guest-dashboard"] .guest-hero-card:after {

      right: 18px;
      top: 15px;

    }

    body[data-page="guest-dashboard"] .guest-hero-card img {

      height: 235px;

    }

    body.guest-auth-page .auth-panel {

      padding: 20px 16px;

    }

    body.guest-auth-page .auth-card {

      padding: 28px 22px;
      border-radius: 24px;

    }

    body.guest-auth-page .auth-card h1 {

      font-size: 36px;

    }

    .portal-nav-btn {

      display: none;

    }

    body.premium-home .premium-hero .hero-media {

      background-position: 62% center;

    }

    body.premium-home .premium-hero .hero-media:after {

      background: linear-gradient(90deg,rgba(248,251,254,.98) 0%,rgba(248,251,254,.92) 62%,rgba(248,251,254,.30) 100%);

    }

    body.premium-home .premium-hero-facts {

      grid-template-columns: 1fr 1fr;
      margin-top: 20px;

    }

    body.premium-home .premium-hero-facts .hero-fact:last-child {

      grid-column: 1/-1;

    }

    .home-editorial-section {

      padding-top: 75px;
      padding-bottom: 75px;

    }

    .editorial-mosaic {

      grid-template-columns: 1fr;
      grid-template-rows: 400px 230px 230px;

    }

    .editorial-tile.editorial-main {

      grid-row: auto;

    }

    .editorial-main b {

      font-size: 34px;

    }

    .editorial-tile b {

      font-size: 25px;

    }

    .portal-showcase-section {

      padding-top: 72px;
      padding-bottom: 72px;

    }

    .location-image {

      height: 330px;

    }

    .multi-role-auth-page .multi-role-auth-card {

      padding: 25px 21px;

    }

    .role-tab {

      padding: 9px 5px;
      font-size: 10px;

    }

    .role-tab span {

      display: none;

    }

    body[data-page^="admin-"] .dash {

      display: block;

    }

    .admin-side-collapsed .dash {

      display: block;

    }

    .admin-side-collapsed .side-copy,.admin-side-collapsed .side-search-copy,.admin-side-collapsed .side-search kbd,.admin-side-collapsed .side-label,.admin-side-collapsed .side-link-label,.admin-side-collapsed .side-footer-note {

      display: initial;

    }

    body[data-page^="admin-"] .side {

      background: radial-gradient(circle at 5% 0%,rgba(59,130,246,.12),transparent 23%),
      linear-gradient(180deg,#f9fcff 0%,#eef7ff 100%);
      color: var(--admin-text);
      border-right: 1px solid #cfe1f2;
      box-shadow: 20px 0 56px rgba(31,83,137,.20);
      width: min(330px,90vw);
      padding: 16px 13px 22px;

    }

    body[data-page^="admin-"] .side-head {

      display: flex;
      height: auto;
      flex-wrap: nowrap;

    }

    body[data-page^="admin-"] .side-head .brand {

      flex: 1;
      justify-content: flex-start;

    }

    body[data-page^="admin-"] .side-collapse {

      display: none;

    }

    .admin-side-collapsed .side-search {

      justify-content: flex-start;
      margin-top: 11px;
      padding: 9px 10px;

    }

    .admin-side-collapsed .side-search-icon {

      width: 22px;
      flex: 0 0 22px;

    }

    .admin-side-collapsed .side a {

      justify-content: flex-start;
      padding: 8px 10px;

    }

    .admin-side-collapsed .side-section summary {

      height: auto;
      padding: 10px 10px 7px;
      border-top: 0;

    }

    .admin-side-collapsed .side-section summary span,.admin-side-collapsed .side-section summary i {

      display: initial;

    }

    .admin-side-collapsed .side-section:not([open]) .side-group {

      display: none;

    }

    .dashboard-main {

      padding: 18px 14px 38px;

    }

    .dashboard-topbar {

      align-items: flex-start;

    }

    .dashboard-actions {

      width: 100%;
      justify-content: flex-start;

    }

    .dashboard-search-btn {

      display: none;

    }

    .dashboard-welcome {

      padding: 19px;

    }

    .dashboard-health {

      width: 100%;

    }

    .dashboard-kpis {

      gap: 9px;

    }

    .dashboard-kpi {

      min-height: 116px;
      padding: 14px;

    }

    .dashboard-ops-grid {

      grid-template-columns: 1fr;
      gap: 12px;

    }

    .dashboard-pulse .metric-list {

      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;

    }

    .dashboard-analytics-row {

      gap: 12px;

    }

    .dashboard-management-card {

      grid-template-columns: 1fr;

    }

    .dashboard-management-card .compact-actions {

      grid-template-columns: 1fr 1fr;

    }

    .admin-command-palette {

      padding-top: 8vh;

    }

    .admin-command-card {

      max-height: 82vh;

    }

    body:is([data-page="rooms"],[data-page="experiences"],[data-page="offers"],[data-page="gallery"],[data-page="reviews"],[data-page="contact"],[data-page="booking"]) .page-hero {

      padding: calc(var(--nav-h) + 28px) 0 54px;

    }

    .page-back {

      margin-bottom: 18px;
      min-height: 40px;
      padding: 8px 12px 8px 8px;

    }

    body:is([data-page="home"],[data-page="rooms"],[data-page="experiences"],[data-page="offers"],[data-page="gallery"],[data-page="reviews"],[data-page="contact"],[data-page="booking"]) .section {

      padding-top: 66px;
      padding-bottom: 66px;

    }

    .room-card .media {

      height: 250px;

    }

    .room-card .room-body {

      padding: 18px;

    }

    .room-card .room-body>.space-between:first-child {

      grid-template-columns: 1fr;
      gap: 10px;

    }

    .room-card .price-stack {

      text-align: left;
      grid-template-columns: auto auto auto;
      align-items: end;
      justify-content: start;
      gap: 6px;
      min-width: 0;

    }

    .room-card .price-stack del {

      grid-column: 1/-1;

    }

    .room-card .room-body>.cluster {

      flex-wrap: wrap;

    }

    .room-card .room-body>.cluster .btn {

      flex: 1 1 140px;

    }

    .menu-media-card img {

      height: 240px;

    }

    body[data-page="home"] .location-image {

      height: 330px;

    }

    .worker-shell {

      display: block;

    }

    .worker-side {

      position: relative;
      height: auto;
      padding: 14px;
      border-right: 0;
      border-bottom: 1px solid #d4e5f1;
      gap: 12px;

    }

    .worker-brand {

      justify-content: center;

    }

    .worker-identity-card {

      display: none;

    }

    .worker-nav button span {

      width: auto;

    }

    .worker-side-bottom {

      display: none;

    }

    .worker-main {

      padding: 18px 14px 36px;

    }

    .worker-topbar {

      align-items: center;
      margin-bottom: 16px;

    }

    .worker-topbar h1 {

      font-size: 30px;

    }

    .worker-topbar p,.worker-online {

      display: none;

    }

    .worker-top-actions .btn {

      min-height: 40px;

    }

    .worker-welcome {

      padding: 20px;
      align-items: flex-start;
      flex-direction: column;

    }

    .worker-welcome h2 {

      font-size: 26px;

    }

    .worker-face-state {

      width: 100%;
      min-width: 0;

    }

    .worker-kpi-grid,.worker-history-kpis {

      grid-template-columns: repeat(2,minmax(0,1fr));
      gap: 10px;

    }

    .worker-kpi {

      padding: 15px;

    }

    .worker-kpi b {

      font-size: 25px;

    }

    .worker-section-head {

      flex-direction: column;

    }

    .worker-section-head h2 {

      font-size: 27px;

    }

    .worker-month-field {

      width: 100%;

    }

    .worker-month-field input {

      width: 100%;

    }

    .worker-panel-video {

      min-height: 0;
      height: 280px;
      aspect-ratio: auto;

    }

    .worker-recent-row {

      grid-template-columns: minmax(0,1fr) 88px 88px;

    }

    .worker-face-card,.worker-attendance-card,.worker-face-info,.worker-today-card {

      padding: 16px;

    }

    .worker-live-clock {

      padding: 6px 9px;

    }

    .worker-live-clock small {

      display: none;

    }

    .worker-nav {

      gap: 6px;
      grid-template-columns: repeat(3,minmax(0,1fr));
      overflow: visible;

    }

    .worker-nav button {

      justify-content: center;
      min-height: 44px;
      padding: 7px 4px;
      font-size: 10px;
      gap: 4px;
      flex-direction: column;
      min-width: 0;

    }

    .worker-action-grid-five {

      grid-template-columns: 1fr;

    }

    .worker-calendar-controls {

      width: 100%;

    }

    .worker-calendar-controls input {

      flex: 1;
      min-width: 150px;

    }

    .worker-calendar-card,.worker-calendar-detail,.worker-current-pay-card,.worker-payment-destination,.worker-payment-history-panel {

      padding: 15px;

    }

    .worker-calendar-week,.worker-calendar-grid {

      gap: 4px;

    }

    .worker-calendar-empty {

      min-height: 70px;

    }

    .worker-calendar-day {

      min-height: 74px;
      padding: 6px;
      border-radius: 11px;

    }

    .worker-calendar-day .cal-number {

      width: 24px;
      height: 24px;
      font-size: 11px;

    }

    .worker-calendar-day small {

      display: none;

    }

    .worker-calendar-day b {

      font-size: 7px;

    }

    .worker-calendar-day em {

      font-size: 7px;

    }

    .worker-calendar-legend {

      gap: 8px;

    }

    .worker-payment-kpis {

      grid-template-columns: 1fr 1fr;
      gap: 10px;

    }

    .worker-pay-meta {

      grid-template-columns: 1fr;

    }

    .role-orb-wrap.floating {

      top: 10px;
      right: 10px;

    }

    .role-orb {

      width: 43px;
      height: 43px;

    }

    .role-orb-wrap.in-panel .role-orb {

      width: 40px;
      height: 40px;

    }

    .role-orb-wrap.in-panel .role-orb-menu {

      right: -4px;

    }

    body.premium-home .premium-hero {

      height: 100svh;
      min-height: 760px;
      padding-top: var(--nav-h);
      padding-bottom: 0;
      align-items: center;

    }

    body.premium-home .premium-hero-content {

      padding-top: 0;
      width: 92%;
      padding-bottom: 190px;

    }

    body.premium-home .premium-hero .display {

      max-width: 92%;
      font-size: clamp(43px,13vw,66px);
      line-height: .94;

    }

    body.premium-home .premium-hero .lead {

      max-width: 94%;

    }

    body.premium-home .hero-slide {

      background-position: center center;

    }

    body.premium-home .premium-booking-bar {

      bottom: 14px;

    }

    .hero-slider-dots {

      right: 16px;
      top: 34%;
      gap: 9px;

    }

    .hero-slider-dots button {

      width: 10px;
      height: 10px;

    }

    .role-orb-menu {

      right: -7px;
      width: min(286px,calc(100vw - 24px));

    }

    .home-v2-hero {

      min-height: 100svh;

    }

    .home-v2-hero-inner {

      width: 100%;
      margin: 0;
      padding: 108px 20px 260px;

    }

    .home-v2-copy .display {

      font-size: clamp(47px,13vw,65px);
      line-height: .95;
      max-width: 100%;

    }

    .home-v2-copy .lead {

      font-size: 15px;

    }

    .home-v2-mini-trust {

      display: none;

    }

    .home-v2-hero .hero-media:after {

      background: linear-gradient(90deg,rgba(251,248,241,.94),rgba(251,248,241,.36));

    }

    .hero-slider-nav {

      right: 15px;
      top: 46%;

    }

    .hero-arrow {

      width: 36px;
      height: 36px;

    }

    .home-v2-booking {

      bottom: 18px;
      width: calc(100% - 24px);
      display: grid;
      grid-template-columns: 1fr 1fr;
      border-radius: 20px;

    }

    .home-v2-booking .field-slot {

      min-height: auto;
      padding: 13px 14px;

    }

    .home-v2-booking .field-slot:nth-child(3) {

      grid-column: 1/-1;

    }

    .home-v2-booking .btn {

      grid-column: 1/-1;
      min-width: 0;
      min-height: 52px;

    }

    .home-v2-strip-grid {

      grid-template-columns: 1fr 1fr;

    }

    .home-v2-strip-grid>div {

      padding: 18px 13px;
      gap: 9px;

    }

    .home-v2-strip-grid small {

      font-size: 9px;

    }

    .home-v2 .section {

      padding-top: 68px;
      padding-bottom: 68px;

    }

    .home-v2-section-intro {

      grid-template-columns: 1fr;
      gap: 16px;
      margin-bottom: 28px;

    }

    .home-v2-story-grid {

      grid-template-columns: 1fr;

    }

    .home-v2-story-media {

      height: 410px;
      border-radius: 24px;

    }

    .home-v2-feature-list a {

      grid-template-columns: 120px 1fr 18px;
      gap: 10px;

    }

    .home-v2-experience-grid {

      grid-template-columns: 1fr;

    }

    .home-v2-split-grid {

      grid-template-columns: 1fr;

    }

    .home-v2-image-card {

      height: 410px;

    }

    .home-v2-image-card h3 {

      font-size: 31px;

    }

    .home-v2-gallery-grid {

      grid-template-columns: 1fr 1fr;
      height: auto;

    }

    .home-v2-gallery-grid a {

      height: 240px;

    }

    .home-v2-gallery-grid a:first-child {

      grid-column: 1/-1;
      height: 330px;

    }

    .home-v2-location-card {

      padding: 28px 20px;

    }

    .home-v2-location-facts {

      grid-template-columns: 1fr 1fr 1fr;

    }

    .home-v2-location-facts>div {

      padding: 14px 10px;

    }

    .home-v2-location-facts b {

      font-size: 18px;

    }

    .home-v2-final-cta>.container {

      display: grid;

    }

    .home-v2-final-cta h2 {

      font-size: 38px;

    }

    .hero-photo-admin-grid {

      grid-template-columns: 1fr;

    }

    .content-manager-head {

      display: grid;

    }

    .room-ready-row {

      grid-template-columns: 1fr;

    }

    .room-ready-state,.room-ready-actions {

      grid-column: auto;

    }

    .room-ready-actions {

      justify-content: flex-start;
      flex-wrap: wrap;

    }

    .channel-setting-form {

      grid-template-columns: 1fr 1fr;

    }

    .channel-setting-form .input,.channel-setting-form .btn {

      grid-column: 1/-1;

    }

    .channel-room-list {

      grid-template-columns: 1fr;

    }

    .invoice-center-kpis {

      grid-template-columns: 1fr 1fr;

    }

    .invoice-center-kpis article {

      padding: 14px;

    }

    .invoice-center-kpis b {

      font-size: 20px;

    }

    .invoice-item-row {

      grid-template-columns: 1fr 1fr;

    }

    .invoice-item-row .input:first-child {

      grid-column: 1/-1;

    }

    .invoice-item-remove {

      grid-column: 2;
      justify-self: end;

    }

    .invoice-center-list-panel>.space-between {

      align-items: flex-start;
      display: grid;
      gap: 14px;

    }

    .invoice-center-list-panel>.space-between>.cluster {

      display: grid;
      width: 100%;

    }

    .invoice-search,.invoice-filter {

      width: 100%;

    }

    .invoice-builder .form-grid.three,.invoice-builder .form-grid.four {

      grid-template-columns: 1fr;

    }

    .invoice-form-actions {

      align-items: stretch;

    }

    .invoice-form-actions .btn {

      width: 100%;

    }

    :root {

      --nav-h: 68px;

    }

    body {

      font-size: 15px;

    }

    .nav {

      height: auto;
      min-height: var(--nav-h);

    }

    .nav-inner {

      min-height: var(--nav-h);
      padding: 7px 0;
      gap: 8px;

    }

    .nav .brand {

      min-width: 0;
      max-width: calc(100vw - 130px);

    }

    .nav .brand>span:last-child {

      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

    }

    .menu-toggle {

      min-width: 42px;
      min-height: 42px;
      border-radius: 12px;

    }

    .mobile-menu {

      left: 10px;
      right: 10px;
      top: calc(var(--nav-h) + 6px);
      max-height: calc(100svh - var(--nav-h) - 20px);
      overflow: auto;
      padding: 10px;
      border-radius: 16px;

    }

    .mobile-menu a {

      min-height: 44px;
      display: flex;
      align-items: center;

    }

    .hero {

      min-height: max(720px,100svh);
      padding-top: calc(var(--nav-h) + 34px);
      padding-bottom: 248px;

    }

    .hero-content {

      width: 100%;
      max-width: 100%;
      padding-right: 0;

    }

    .hero .display {

      font-size: clamp(44px,13vw,66px);
      line-height: .94;

    }

    .hero .lead {

      max-width: 94%;
      font-size: 14px;
      line-height: 1.65;

    }

    .hero-content .cluster {

      gap: 8px;
      flex-wrap: wrap;

    }

    .hero-content .cluster .btn {

      min-height: 44px;

    }

    .booking-bar {

      transform: none;
      left: 10px;
      right: 10px;
      width: calc(100% - 20px);
      bottom: 14px;
      grid-template-columns: 1fr 1fr;
      border-radius: 16px;
      overflow: hidden;

    }

    .booking-bar .field-slot {

      padding: 11px 12px;

    }

    .booking-bar .field-slot label {

      font-size: 9px;

    }

    .booking-bar .input,.booking-bar input,.booking-bar select {

      font-size: 12px;
      min-height: 38px;

    }

    .booking-bar .btn {

      grid-column: 1/-1;
      border-radius: 0;
      padding: 15px;
      min-height: 46px;

    }

    .section {

      padding: 56px 0;

    }

    .section-head h2,.page-title {

      font-size: clamp(34px,10vw,48px);
      line-height: 1;

    }

    .grid.two,.grid.three,.grid.four {

      grid-template-columns: 1fr;

    }

    .grid {

      gap: 14px;

    }

    .room-card .media,.media-card>img {

      height: 230px;

    }

    .photo-banner {

      min-height: 390px;

    }

    .footer-bottom {

      flex-direction: column;
      align-items: flex-start;
      gap: 10px;

    }

    .actions,.cluster {

      max-width: 100%;

    }

    .actions .btn {

      min-height: 44px;

    }

    .modal-body {

      overflow: auto;

    }

    .auth-panel {

      padding: 18px 14px;

    }

    .auth-card {

      width: 100%;
      max-width: 100%;
      padding: 26px 20px;

    }

    .form-grid,.inline-edit,.compact-form {

      grid-template-columns: 1fr;

    }

    .form-grid .wide,.form-grid .full,.inline-edit>*:last-child,.compact-form .wide,.compact-form .full {

      grid-column: auto;

    }

    .kpis,.pms-kpis,.business-kpis {

      grid-template-columns: repeat(2,minmax(0,1fr));

    }

    .table {

      min-width: 680px;

    }

    .toolbar {

      align-items: stretch;

    }

    .toolbar>* {

      max-width: 100%;

    }

    .toolbar .search {

      min-width: 0;
      width: 100%;

    }

    .container {

      width: min(92vw,680px);

    }

    .page-hero {

      padding-top: calc(var(--nav-h) + 34px);
      padding-bottom: 46px;
      min-height: 360px;

    }

    body:not([data-page^="admin-"]):not([data-page^="guest-"]):not([data-page^="worker-"]) .page-hero:before {

      width: 100%;
      height: 100%;
      opacity: .20;
      -webkit-mask-image: linear-gradient(180deg,transparent 0%,#000 30%,#000 100%);
      mask-image: linear-gradient(180deg,transparent 0%,#000 30%,#000 100%);

    }

    .page-title {

      font-size: clamp(40px,11.5vw,54px);
      line-height: .98;

    }

    .page-hero .lead {

      font-size: 15px;
      line-height: 1.65;
      max-width: 92%;

    }

    .visual-story-section {

      padding: 18px 0 58px;

    }

    .visual-story-head {

      display: block;
      margin-bottom: 18px;

    }

    .visual-story-head p {

      margin-top: 12px;

    }

    .visual-story-grid {

      grid-template-columns: 1fr;
      gap: 12px;

    }

    .visual-story-card,.visual-story-card:first-child {

      min-height: 300px;

    }

    .gallery-grid {

      display: grid;
      gap: 10px;
      grid-template-columns: 1fr;
      grid-auto-rows: 260px;

    }

    .gallery-item {

      grid-column: auto;
      grid-row: auto;
      border-radius: 16px;

    }

    .footer {

      padding-top: 50px;

    }

    .footer-grid {

      grid-template-columns: 1fr 1fr;
      gap: 26px 18px;

    }

    .floating-help {

      right: max(14px,env(safe-area-inset-right));
      bottom: max(14px,env(safe-area-inset-bottom));
      width: 50px;
      height: 50px;

    }

    .modal {

      padding: 10px;

    }

    .modal-card {

      width: min(96vw,680px);
      border-radius: 18px;
      max-height: 92dvh;

    }

    .btn {

      min-height: 44px;

    }

    .input,select.input,textarea.input,input,select,textarea {

      font-size: 16px;

    }

  }

  @media (max-width:520px) {

    .salary-slip-record {

      grid-template-columns: 1fr;

    }

    .salary-slip-record>div {

      border-right: 0;
      border-bottom: 1px solid #e1e9ef;

    }

    .salary-slip-record>div:last-child {

      border-bottom: 0;

    }

    .worker-payment-insights {

      grid-template-columns: 1fr 1fr;

    }

    .worker-payment-insights b {

      font-size: 15px;

    }

    .container {

      width: min(94vw,520px);

    }

    .nav-actions .btn {

      padding-left: 10px;
      padding-right: 10px;

    }

    .hero .display {

      font-size: clamp(41px,13.7vw,58px);

    }

    .hero-content .cluster {

      display: grid;
      grid-template-columns: 1fr 1fr;
      width: 100%;

    }

    .hero-content .cluster .btn {

      width: 100%;
      padding: 11px 9px;

    }

    .booking-bar {

      grid-template-columns: 1fr;

    }

    .booking-bar .field-slot {

      grid-column: auto;
      border-right: 0;
      border-bottom: 1px solid var(--line);

    }

    .booking-bar .btn {

      grid-column: auto;

    }

    .hero {

      padding-bottom: 365px;

    }

    .kpis,.pms-kpis,.business-kpis {

      grid-template-columns: 1fr;

    }

    .room-card .media,.media-card>img {

      height: 210px;

    }

    .page-title {

      font-size: 42px;

    }

    .nav-actions {

      gap: 6px;

    }

    .menu-toggle {

      min-width: 42px;
      min-height: 42px;

    }

    .page-hero {

      min-height: 340px;

    }

    .visual-story-card,.visual-story-card:first-child {

      min-height: 270px;

    }

    .visual-story-card>span {

      left: 17px;
      right: 17px;
      bottom: 16px;

    }

    .visual-story-card>span b {

      font-size: 20px;

    }

    .footer-grid {

      grid-template-columns: 1fr;

    }

    body[data-page^="admin-"]:not([data-page="admin-login"]) .dash-main {

      padding-left: 10px;
      padding-right: 10px;

    }

    body[data-page^="admin-"]:not([data-page="admin-login"]) .dash-top {

      padding-right: 54px;

    }

    body[data-page^="admin-"]:not([data-page="admin-login"]) .dash-title h1 {

      font-size: 25px;

    }

    body[data-page^="admin-"]:not([data-page="admin-login"]) .simple-dashboard-kpis {

      grid-template-columns: 1fr 1fr;

    }

    body[data-page^="admin-"]:not([data-page="admin-login"]) .panel {

      border-radius: 14px;

    }

  }

  @media (max-width:390px) {

    body[data-page^="admin-"]:not([data-page="admin-login"]) .simple-dashboard-kpis {

      grid-template-columns: 1fr;

    }

  }

  @media (hover:none) {

    .btn:hover,.panel:hover,.room-card:hover,.media-card:hover {

      transform: none;

    }

    .visual-story-card:hover img,.gallery-item:hover img,.room-card:hover .media img,.offer-card:hover img {

      transform: none;

    }

  }

  :root {

    --blue-soft: #eef5fb;
    --blue-strong: #315f8b;
    --r-sm: 14px;
    --r: 22px;
    --r-lg: 34px;
    --nav-h: 84px;
    --ease: cubic-bezier(.22,.8,.23,1);
    --bg: #f7fbff;
    --bg-2: #eef5fb;
    --surface: #ffffff;
    --surface-2: #fcfdff;
    --ink: #17324a;
    --ink-2: #35546f;
    --muted: #6f8296;
    --gold: #c8a56d;
    --gold-dark: #a67a38;
    --gold-soft: #f8ecd7;
    --sage: #8ba69a;
    --blue: #e7f1fb;
    --line: #dbe5ee;
    --line-strong: #ccd9e5;
    --success: #2f7a5b;
    --warning: #b57a2c;
    --danger: #b55b63;
    --shadow-xs: 0 10px 24px rgba(34,56,82,.06);
    --shadow: 0 18px 44px rgba(34,56,82,.09);
    --shadow-lg: 0 28px 72px rgba(34,56,82,.12);
    --brs-theme-navy: #153a58;
    --brs-theme-blue: #3f78b5;
    --brs-theme-sky: #7ec2e8;
    --brs-theme-gold: #c99235;
    --brs-theme-cream: #fbf7ef;
    --brs-theme-line: #dfe8ef;
    --brs-effects-ease: cubic-bezier(.2,.72,.22,1);
    --brs-effects-shadow: 0 18px 44px rgba(24,52,76,.10);
    --brs-effects-shadow-hover: 0 24px 58px rgba(24,52,76,.15);

  }

  html {

    background: var(--bg);
    scroll-behavior: smooth;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    scroll-padding-top: 96px;

  }

  body {

    margin: 0;
    font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color: var(--ink);
    line-height: 1.55;
    background: linear-gradient(180deg,#fffefa 0,#fbfaf7 34%,#f7f9fb 100%);
    min-width: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

  }

  img {

    display: block;
    max-width: 100%;
    height: auto;
    -webkit-font-smoothing: antialiased;
    transform: translateZ(0);
    filter: none;
    image-rendering: auto;
    backface-visibility: hidden;
    background: #eef2f4;

  }

  .brand-mark img,.qr,.qr-card img,.invoice-logo img {

    background: transparent;

  }

  :is(.luxury-editorial-card,.luxury-wide-story,.luxury-events-media,.luxury-gallery-mosaic a,.visual-story-card,.gallery-item,.room-card .media,.offer-card .media,.photo-banner) {

    background: linear-gradient(135deg,#e9eef1,#f7f3eb);
    overflow: hidden;

  }

  :is(.luxury-editorial-card,.luxury-wide-story,.luxury-events-media,.luxury-gallery-mosaic a,.visual-story-card,.gallery-item,.room-card .media,.offer-card .media,.photo-banner) img {

    opacity: 1;
    visibility: visible;
    filter: none;
    transition: transform .62s var(--brs-effects-ease),opacity .24s ease;

  }

  @media (min-width:1100px) {

    body:not([data-page^="admin-"]):not([data-page^="guest-"]):not([data-page^="worker-"]) .page-hero {

      min-height: 430px;

    }

    body:not([data-page^="admin-"]):not([data-page^="guest-"]):not([data-page^="worker-"]) .page-hero>.container {

      width: min(1240px,calc(100% - 80px));

    }

    .visual-story-grid {

      grid-template-columns: 1.18fr .91fr .91fr;
      gap: 18px;

    }

    .visual-story-card {

      min-height: 360px;

    }

    .luxury-editorial-grid,.gallery-grid,.luxury-gallery-mosaic {

      gap: 18px;

    }

    body[data-page="admin-dashboard"] .simple-dashboard-bottom {

      grid-template-columns: minmax(0,1fr) 330px;
      gap: 18px;
      align-items: start;

    }

    body[data-page="admin-dashboard"] .simple-bookings-card,body[data-page="admin-dashboard"] .simple-extra-card {

      min-height: 0;
      height: auto;
      align-self: start;

    }

  }

  @media (hover:hover) and (pointer:fine) {

    .role-orb-wrap:hover .role-orb-menu {

      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0) scale(1);

    }

    :is(.visual-story-card,.gallery-item,.room-card,.offer-card,.luxury-editorial-card,.feature-card,.panel) {

      transition: transform .32s var(--brs-effects-ease),box-shadow .32s var(--brs-effects-ease),border-color .25s ease;

    }

    :is(.visual-story-card,.gallery-item,.room-card,.offer-card,.luxury-editorial-card,.feature-card):hover {

      transform: translate3d(0,-4px,0);
      box-shadow: var(--brs-effects-shadow-hover);

    }

    :is(.visual-story-card,.gallery-item,.room-card,.offer-card,.luxury-editorial-card):hover img {

      transform: scale(1.025) translateZ(0);

    }

  }

  body[data-page^="admin-"]:not([data-page="admin-login"]) .side-nav a.active,
body[data-page^="admin-"]:not([data-page="admin-login"]) .side-nav a[aria-current="page"] {

    color: #145ee8;
    background: linear-gradient(100deg,#eef6ff,#f0ebff);
    border-color: #d7e0ff;
    box-shadow: inset 3px 0 0 #3478ff,0 7px 20px rgba(55,101,184,.08);

  }

  body[data-page^="admin-"]:not([data-page="admin-login"]) .side-nav a:not(.active):not([aria-current="page"]) {

    box-shadow: none;

  }

  body[data-page="admin-dashboard"] .simple-latest-bookings,body[data-page="admin-dashboard"] .dashboard-latest-card {

    min-height: 0;
    height: auto;

  }

  body[data-page="admin-dashboard"] table tbody:empty:after {

    content: "No recent records yet";
    display: table-cell;
    padding: 22px;
    color: #8192a5;
    font-size: 13px;

  }

  :where(a,button,input,select,textarea):focus-visible {

    outline: 3px solid rgba(52,120,255,.24);
    outline-offset: 2px;

  }

  .brs-effects-ready {

    opacity: 1;
    visibility: visible;

  }

  @media (max-width:900px) {

    .pms-kpis,.room-rack,.qr-grid {

      grid-template-columns: repeat(2,minmax(0,1fr));

    }

    .trust-grid {

      grid-template-columns: repeat(2,1fr);

    }

    .trust-grid>div:nth-child(2) {

      border-right: 0;

    }

    .trust-grid>div:nth-child(-n/**/+2) {

      border-bottom: 1px solid rgba(255,255,255,.11);

    }

    .editorial-intro,.portal-showcase,.location-premium {

      grid-template-columns: 1fr;

    }

    .editorial-intro {

      gap: 16px;

    }

    .portal-showcase {

      gap: 34px;

    }

    .location-image {

      height: 380px;

    }

    .dashboard-welcome {

      grid-template-columns: 1fr;

    }

    .dashboard-health {

      min-width: 0;

    }

    .dashboard-kpis {

      grid-template-columns: repeat(2,minmax(0,1fr));

    }

    .dashboard-analytics-row {

      grid-template-columns: 1fr;

    }

    .today-grid {

      grid-template-columns: repeat(2,1fr);

    }

    .payroll-kpi-grid,.attendance-kpi-grid {

      grid-template-columns: repeat(2,1fr);

    }

    .payroll-module-grid {

      grid-template-columns: 1fr;

    }

    .salary-slip-info-grid {

      grid-template-columns: repeat(2,1fr);

    }

    .salary-slip-attendance {

      grid-template-columns: repeat(3,1fr);

    }

    .salary-slip-header {

      grid-template-columns: 1fr;

    }

    .salary-slip-meta {

      grid-template-columns: 90px 1fr;

    }

    .salary-slip-money,.salary-slip-net {

      grid-template-columns: 1fr;

    }

    .payment-destination-card {

      grid-template-columns: 1fr;

    }

    .payment-destination-card>* {

      grid-column: 1;

    }

    .salary-slip-record {

      grid-template-columns: 1fr 1fr;

    }

    .taj-inspired .container {

      width: min(100% - 36px,1320px);

    }

    .taj-inspired .home-nav .menu {

      display: none;

    }

    .taj-inspired .home-nav .menu-toggle {

      display: grid;
      place-items: center;
      background: rgba(255,255,255,.12);
      border-color: rgba(255,255,255,.5);
      color: #fff;

    }

    .taj-inspired .home-nav.scrolled .menu-toggle {

      background: #fff;
      border-color: #dce4e7;
      color: #17364e;

    }

    .taj-inspired .luxury-hero {

      min-height: 760px;

    }

    .luxury-hero-content {

      padding-bottom: 260px;

    }

    .taj-inspired .luxury-booking-bar {

      grid-template-columns: 1fr 1fr 1fr;

    }

    .taj-inspired .luxury-booking-bar .field-slot {

      min-height: 68px;

    }

    .taj-inspired .luxury-booking-bar .btn {

      grid-column: 3;
      grid-row: 2;

    }

    .taj-inspired .luxury-booking-bar .field-slot:nth-child(4),.taj-inspired .luxury-booking-bar .field-slot:nth-child(5) {

      border-top: 1px solid #ece5db;

    }

    .taj-inspired .luxury-hero-dots {

      bottom: 178px;

    }

    .hero-gallery-link {

      bottom: 172px;

    }

    .luxury-intro-grid,.luxury-section-head,.luxury-events-grid,.luxury-location-card {

      grid-template-columns: 1fr;

    }

    .luxury-facts {

      grid-template-columns: 1fr 1fr;

    }

    .luxury-facts>div:nth-child(2) {

      border-right: 0;

    }

    .luxury-facts>div:nth-child(-n/**/+2) {

      border-bottom: 1px solid #dfd5c7;

    }

    .luxury-copy-card {

      margin: -70px 36px 0;
      padding: 46px;

    }

    .luxury-events-media {

      order: -1;
      height: 500px;

    }

    .luxury-location-card {

      gap: 36px;

    }

    .luxury-location-visual {

      height: 380px;

    }

    .luxury-final-cta>.container {

      display: grid;

    }

    .hero-slides-admin-grid {

      grid-template-columns: 1fr;

    }

    .section {

      padding: 68px 0;

    }

    .section-head {

      gap: 16px;

    }

    .grid.three {

      grid-template-columns: repeat(2,minmax(0,1fr));

    }

    .room-card,.media-card,.offer-card {

      min-width: 0;

    }

    .hero-content {

      max-width: min(680px,92vw);

    }

    .map {

      width: 100%;

    }

    body[data-page^="admin-"]:not([data-page="admin-login"]) .dash {

      display: block;
      grid-template-columns: none;

    }

    body[data-page^="admin-"]:not([data-page="admin-login"]) .dash>.side {

      position: fixed;
      z-index: 430;
      left: -252px;
      right: auto;
      top: 0;
      bottom: 0;
      width: 236px;
      height: 100dvh;
      max-height: 100dvh;
      margin: 0;
      overflow-y: auto;
      transform: none;
      transition: left .25s cubic-bezier(.2,.8,.2,1);
      box-shadow: 22px 0 58px rgba(31,64,105,.18);

    }

    body[data-page^="admin-"]:not([data-page="admin-login"]) .dash>.side.mobile-open,
  body.admin-drawer-open[data-page^="admin-"]:not([data-page="admin-login"]) .dash>.side {

      left: 0;

    }

    body[data-page^="admin-"]:not([data-page="admin-login"]) .dash-main {

      position: relative;
      margin: 0;
      min-height: 100dvh;
      padding-top: 14px;
      padding-left: 14px;
      padding-right: 14px;

    }

    body[data-page^="admin-"]:not([data-page="admin-login"]) .dash-top {

      position: relative;
      top: auto;
      padding-right: 58px;

    }

    body[data-page^="admin-"]:not([data-page="admin-login"]) .admin-menu {

      display: flex;

    }

    body[data-page^="admin-"]:not([data-page="admin-login"]) .simple-dashboard-grid,
  body[data-page^="admin-"]:not([data-page="admin-login"]) .simple-dashboard-bottom {

      grid-template-columns: 1fr;

    }

    body[data-page^="admin-"]:not([data-page="admin-login"]) .toolbar {

      display: flex;
      flex-wrap: wrap;
      align-items: stretch;

    }

    body[data-page^="admin-"]:not([data-page="admin-login"]) .toolbar>* {

      max-width: 100%;

    }

    body[data-page^="admin-"]:not([data-page="admin-login"]) .toolbar .search {

      width: 100%;
      min-width: 0;

    }

    .visual-story-card {

      min-height: 300px;

    }

  }

  @media (prefers-reduced-motion:reduce) {

    .reveal {

      opacity: 1;
      transform: none;

    }

    .worker-live-clock>i,.live-dot {

      animation: none;

    }

    .worker-view.active>* {

      animation: none;

    }

    .role-orb,.role-orb-menu,.worker-calendar-day,.worker-kpi,.feature-card,.room-card,.offer-card,.btn {

      transition: none;

    }

    .role-orb:after {

      animation: none;

    }

    .role-orb>em,.worker-payment-insights article,.worker-payment-progress i {

      transition: none;

    }

    .modal.open .modal-card,.toast.show {

      animation: none;

    }

    body.premium-home .hero-slide {

      transition: none;

    }

    .taj-inspired .luxury-hero .hero-slide,.luxury-editorial-card img,.luxury-gallery-mosaic img {

      transition: none;

    }

    .brs-reveal {

      opacity: 1;
      transform: none;

    }

    *,*:before,*:after {

      animation-duration: .001ms;
      animation-iteration-count: 1;
      transition-duration: .001ms;
      scroll-behavior: auto;

    }

  }

  @media (min-width:901px) {

    .taj-inspired .luxury-hero-shade {

      background: linear-gradient(90deg,rgba(10,25,33,.74) 0%,rgba(10,25,33,.52) 34%,rgba(10,25,33,.20) 58%,rgba(10,25,33,.03) 78%);

    }

    .taj-inspired .luxury-hero-copy .display {

      color: #fff;
      text-shadow: 0 4px 30px rgba(0,0,0,.42);

    }

    .taj-inspired .luxury-hero-copy .lead {

      color: rgba(255,255,255,.96);
      text-shadow: 0 2px 14px rgba(0,0,0,.36);

    }

    .taj-inspired .luxury-hero-copy .luxury-eyebrow {

      color: #f5d28a;
      text-shadow: 0 2px 14px rgba(0,0,0,.42);

    }

  }

  body[data-page="rooms"] .page-hero:before {

    background-image: url("../images/reference/heritage-suite.webp");

  }

}

/* V59 offer visual refresh */

body[data-page="offers"] .offer-card {

  min-height: 0;
  display: grid;
  grid-template-rows: 220px auto;
  background: #fff;
  color: #173b59;
  border: 1px solid #e1e8ec;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 46px rgba(26,67,99,.09);

}

body[data-page="offers"] .offer-card img {

  position: relative;
  inset: auto;
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;

}

body[data-page="offers"] .offer-card:after {

  display: none;

}

body[data-page="offers"] .offer-card .content {

  padding: 22px 22px 24px;
  background: linear-gradient(180deg,#fff,#fbfaf7);
  color: #173b59;

}

body[data-page="offers"] .offer-card .content h3 {

  margin: 10px 0 8px;
  color: #123854;
  font-size: 1.3rem;

}

body[data-page="offers"] .offer-card .content p {

  margin: 0 0 16px;
  color: #657b8e;
  line-height: 1.55;

}

body[data-page="offers"] .offer-card .pill {

  display: inline-flex;
  color: #86601f;
  background: #fff6df;
  border: 1px solid #efd7a4;

}

body[data-page="offers"] .offer-card:hover img {

  transform: scale(1.018);

}