@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&family=Noto+Sans+Myanmar:wght@400;500;600;700&family=Noto+Serif+Myanmar:wght@600;700&display=swap');

:root {
  --salon-plum: #582f4f;
  --salon-plum-deep: #3e2038;
  --salon-rose: #c9828f;
  --salon-rose-soft: #f4dfe3;
  --salon-blush: #fbf3f2;
  --salon-ivory: #fffaf6;
  --salon-champagne: #d7b47d;
  --salon-ink: #2f2630;
  --salon-muted: #817680;
  --salon-border: #eadfe2;
  --salon-success: #5d8f7b;
  --salon-warning: #c98c4b;
  --salon-danger: #b85868;
  --salon-shadow: 0 14px 38px rgba(75, 43, 67, .08);
  --salon-shadow-sm: 0 6px 18px rgba(75, 43, 67, .06);
}

html, body { font-family: 'DM Sans', 'Noto Sans Myanmar', sans-serif; color: var(--salon-ink); }
body { background: radial-gradient(circle at 88% 4%, rgba(201,130,143,.13), transparent 24rem), linear-gradient(145deg,#fffaf7 0%,#fbf6f5 45%,#f8f2f5 100%); }
a { color: var(--salon-plum); }
a:hover { color: var(--salon-rose); }
.layout-wrapper { min-height: 100vh; }
.layout-page, .content-wrapper { background: transparent !important; }
.container-p-y { padding-top: 1.5rem !important; }

.bg-menu-theme { background: linear-gradient(180deg,var(--salon-plum-deep) 0%,#4c2946 58%,#372031 100%) !important; box-shadow: 12px 0 35px rgba(62,32,56,.12) !important; }
.bg-menu-theme .menu-inner-shadow { background: none !important; }
.bg-menu-theme .menu-link, .bg-menu-theme .menu-header, .bg-menu-theme .menu-icon { color: rgba(255,250,246,.76) !important; }
.bg-menu-theme .menu-header { padding-top: 1.5rem; letter-spacing: .13em; font-size: .66rem; }
.bg-menu-theme .menu-header-text { opacity: .7; }
.bg-menu-theme .menu-item .menu-link { margin: .13rem .75rem; padding: .72rem .85rem; border-radius: 12px; transition: .2s ease; }
.bg-menu-theme .menu-item .menu-link:hover { background: rgba(255,255,255,.09) !important; color: #fff !important; transform: translateX(3px); }
.bg-menu-theme .menu-item.active > .menu-link { background: linear-gradient(105deg,var(--salon-rose),#ad6578) !important; color: #fff !important; box-shadow: 0 8px 22px rgba(28,14,25,.24); }
.bg-menu-theme .menu-item.active > .menu-link::before { display: none; }
.app-brand.salon-brand { height: 84px; padding: 0 1.35rem; }
.salon-brand .app-brand-link { color: #fff; }
.salon-brand .app-brand-logo { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 14px 14px 14px 5px; background: linear-gradient(145deg,#dc9ba6,#b96d81); box-shadow: inset 0 1px 0 rgba(255,255,255,.28),0 8px 18px rgba(24,10,21,.18); }
.salon-brand .app-brand-logo svg { display: none; }
.salon-brand .app-brand-logo::before { content: 'V'; color: #fff; font-family: 'Playfair Display',serif; font-size: 1.45rem; font-weight: 700; }
.salon-brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 14px 14px 14px 5px; background: linear-gradient(145deg,#dc9ba6,#b96d81); color: #fff; font-family: 'Playfair Display',serif; font-size: 1.45rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.28),0 8px 18px rgba(24,10,21,.18); }
.salon-brand-copy { display: flex; flex-direction: column; line-height: 1.1; }
.salon-brand-name { color: #fff; font-family: 'Playfair Display',serif; font-size: 1.18rem; font-weight: 700; }
.salon-brand-tagline { color: rgba(255,255,255,.58); font-size: .64rem; letter-spacing: .14em; margin-top: .28rem; }

.layout-navbar { min-height: 72px; border: 1px solid rgba(88,47,79,.08); border-radius: 18px !important; background: rgba(255,250,246,.88) !important; box-shadow: var(--salon-shadow-sm) !important; backdrop-filter: blur(16px); }
.nav-scroll-container { flex-grow: 1; overflow-x: auto; overflow-y: hidden; white-space: nowrap; scrollbar-width: thin; scrollbar-color: var(--salon-rose-soft) transparent; }
.nav-scroll-container::-webkit-scrollbar { height: 4px; }
.nav-scroll-container::-webkit-scrollbar-thumb { background: var(--salon-rose-soft); border-radius: 10px; }
.nav-badge-item { border: 1px solid var(--salon-border) !important; border-radius: 999px !important; background: #fff !important; color: var(--salon-plum) !important; font-weight: 600 !important; padding: .58rem .9rem !important; box-shadow: none !important; transition: all .2s ease !important; }
.nav-badge-item:hover, .nav-badge-item.active { border-color: var(--salon-plum) !important; background: var(--salon-plum) !important; color: #fff !important; transform: translateY(-1px) !important; }
.avatar-online::after { background-color: var(--salon-success) !important; }
.dropdown-menu { border: 1px solid var(--salon-border); border-radius: 14px; box-shadow: var(--salon-shadow); }

.card { border: 1px solid rgba(88,47,79,.08) !important; border-radius: 18px !important; background: rgba(255,255,255,.92); box-shadow: var(--salon-shadow-sm) !important; }
.card-header { border-bottom: 1px solid var(--salon-border); background: transparent !important; }
.btn { border-radius: 10px; font-weight: 600; letter-spacing: .01em; }
.btn-primary { border-color: var(--salon-plum) !important; background: var(--salon-plum) !important; box-shadow: 0 7px 15px rgba(88,47,79,.2) !important; }
.btn-primary:hover, .btn-primary:focus { border-color: var(--salon-plum-deep) !important; background: var(--salon-plum-deep) !important; transform: translateY(-1px); }
.btn-outline-primary { border-color: var(--salon-plum) !important; color: var(--salon-plum) !important; }
.btn-outline-primary:hover { background: var(--salon-plum) !important; color: #fff !important; }
.text-primary { color: var(--salon-plum) !important; }
.bg-primary, .badge.bg-primary { background-color: var(--salon-plum) !important; }
.bg-success { background-color: var(--salon-success) !important; }
.bg-warning { background-color: var(--salon-warning) !important; }
.bg-danger { background-color: var(--salon-danger) !important; }
.form-control, .form-select { min-height: 42px; border-color: var(--salon-border); border-radius: 10px; background-color: #fffdfa; }
.form-control:focus, .form-select:focus { border-color: var(--salon-rose); box-shadow: 0 0 0 .2rem rgba(201,130,143,.15); }
.form-check-input:checked { border-color: var(--salon-plum); background-color: var(--salon-plum); }
.table { color: var(--salon-ink); }
.table > :not(caption) > * > * { border-bottom-color: var(--salon-border); padding: .9rem .75rem; }
.table thead th { color: var(--salon-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; background: var(--salon-blush); }
.table tbody tr:hover { background: rgba(244,223,227,.25); }
.list-group-item { border-color: var(--salon-border); }
.pagination .page-item.active .page-link { border-color: var(--salon-plum); background: var(--salon-plum); }

.salon-page-heading { margin-bottom: 1.35rem; }
.salon-eyebrow { color: var(--salon-rose); font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.salon-page-title { margin: .2rem 0 .3rem; font-family: 'Playfair Display',serif; font-size: clamp(1.7rem,3vw,2.35rem); color: var(--salon-plum-deep); }
.salon-page-subtitle { margin: 0; color: var(--salon-muted); }
.salon-filter-card .card-body { padding: 1rem 1.1rem; }
.salon-filter-card label { color: var(--salon-muted); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.salon-stat-card { position: relative; overflow: hidden; height: 100%; }
.salon-stat-card::after { content: ''; position: absolute; width: 95px; height: 95px; right: -35px; top: -35px; border-radius: 50%; background: var(--stat-soft,var(--salon-rose-soft)); }
.salon-stat-card .card-body { position: relative; z-index: 1; padding: 1.25rem; }
.salon-stat-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; color: var(--stat-color,var(--salon-plum)); background: var(--stat-soft,var(--salon-rose-soft)); font-size: 1.35rem; }
.salon-stat-label { margin-top: 1rem; color: var(--salon-muted); font-size: .82rem; font-weight: 600; }
.salon-stat-value { margin: .3rem 0 0; color: var(--salon-ink); font-size: 1.55rem; font-weight: 700; }
.salon-stat-meta { margin-top: .55rem; color: var(--salon-success); font-size: .75rem; }
.salon-card-title { margin: 0; font-family: 'Playfair Display',serif; color: var(--salon-plum-deep); font-size: 1.08rem; }
.salon-empty { padding: 2rem; color: var(--salon-muted); text-align: center; }
.salon-rank { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--salon-blush); color: var(--salon-plum); font-weight: 700; }
.salon-stock-dot { width: 8px; height: 8px; display: inline-block; border-radius: 50%; background: var(--salon-danger); }
.content-footer { color: var(--salon-muted); background: transparent !important; font-size: .82rem; }

@media (max-width:1199.98px) { .layout-navbar { border-radius: 0 0 18px 18px !important; } }
@media (max-width:767.98px) { .container-p-y { padding-top: 1rem !important; } .salon-page-heading { text-align: center; } .salon-filter-card .btn { width: 100%; } .content-footer { text-align: center; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; } }

/* Sign in */
.salon-auth-page { min-height: 100vh; margin: 0; background: var(--salon-ivory); }
.salon-auth-shell { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(420px,.92fr); min-height: 100vh; }
.salon-auth-visual { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: clamp(2rem,5vw,5rem); color: #fff; background: linear-gradient(145deg,rgba(62,32,56,.96),rgba(88,47,79,.92)), radial-gradient(circle at 80% 10%,#dba0aa,transparent 45%); }
.salon-auth-visual::before, .salon-auth-visual::after { content:''; position:absolute; border:1px solid rgba(255,255,255,.1); border-radius:50%; }
.salon-auth-visual::before { width:460px; height:460px; right:-190px; top:-170px; }
.salon-auth-visual::after { width:300px; height:300px; left:-160px; bottom:-130px; }
.salon-auth-brand, .salon-auth-message, .salon-service-pills { position:relative; z-index:1; }
.salon-auth-brand { display:flex; align-items:center; gap:.85rem; color:#fff; }
.salon-auth-message { max-width:620px; }
.salon-auth-kicker { color:#e9c1c8; font-size:.74rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.salon-auth-message h1 { margin:.8rem 0 1.2rem; color:#fff; font-family:'Playfair Display',serif; font-size:clamp(2.6rem,5vw,5rem); line-height:1.04; }
.salon-auth-message p { max-width:520px; color:rgba(255,255,255,.7); font-size:1.05rem; line-height:1.75; }
.salon-service-pills { display:flex; flex-wrap:wrap; gap:.65rem; }
.salon-service-pills span { padding:.6rem .9rem; border:1px solid rgba(255,255,255,.16); border-radius:999px; background:rgba(255,255,255,.07); color:rgba(255,255,255,.84); font-size:.78rem; backdrop-filter:blur(8px); }
.salon-auth-form-panel { display:grid; place-items:center; padding:2rem; background:linear-gradient(145deg,#fffaf6,#faf2f2); }
.salon-auth-form { width:min(100%,440px); }
.salon-auth-form h2 { margin:0 0 .4rem; color:var(--salon-plum-deep); font-family:'Playfair Display',serif; font-size:2.2rem; }
.salon-auth-form .lead { margin-bottom:2rem; color:var(--salon-muted); font-size:.95rem; }
.salon-auth-form .form-label { color:var(--salon-ink); font-weight:600; }
.salon-auth-form .form-control { min-height:50px; padding:.75rem 1rem; }
.salon-auth-form .input-group-text { border-color:var(--salon-border); border-radius:0 10px 10px 0; background:#fffdfa; color:var(--salon-muted); }
.salon-auth-form .btn { min-height:50px; }
.salon-auth-note { margin-top:2rem; color:var(--salon-muted); font-size:.8rem; text-align:center; }
@media (max-width:991.98px) { .salon-auth-shell { grid-template-columns:1fr; } .salon-auth-visual { min-height:340px; padding:2rem; } .salon-auth-message h1 { font-size:2.7rem; } .salon-auth-message p { margin-bottom:0; } .salon-service-pills { display:none; } .salon-auth-form-panel { padding:3rem 1.25rem; } }

/* Public landing page */
.salon-landing { margin:0; background:var(--salon-ivory); color:var(--salon-ink); }
.salon-landing-nav { position:absolute; z-index:5; inset:0 0 auto; display:flex; align-items:center; justify-content:space-between; max-width:1200px; margin:auto; padding:1.5rem 2rem; }
.salon-landing-nav .salon-brand-name { color:var(--salon-plum-deep); }
.salon-landing-nav .salon-brand-tagline { color:var(--salon-muted); }
.salon-landing-actions { display:flex; gap:.75rem; }
.salon-hero { position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr); align-items:center; min-height:760px; overflow:hidden; padding:8rem max(2rem,calc((100vw - 1160px)/2)) 5rem; background:linear-gradient(120deg,#fffaf6 0%,#fbefef 100%); }
.salon-hero::after { content:''; position:absolute; width:560px; height:560px; right:-170px; top:-150px; border:1px solid rgba(88,47,79,.1); border-radius:50%; }
.salon-hero-copy { position:relative; z-index:2; max-width:650px; }
.salon-hero h1 { margin:.8rem 0 1.4rem; color:var(--salon-plum-deep); font-family:'Playfair Display',serif; font-size:clamp(3.2rem,6vw,6.2rem); line-height:.98; letter-spacing:-.035em; }
.salon-hero h1 em { color:var(--salon-rose); font-weight:600; }
.salon-hero-copy > p { max-width:570px; color:var(--salon-muted); font-size:1.08rem; line-height:1.8; }
.salon-hero-buttons { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }
.salon-hero-buttons .btn { padding:.85rem 1.4rem; }
.salon-hero-art { position:relative; z-index:2; min-height:500px; }
.salon-hero-shape { position:absolute; inset:4% 5% 4% 12%; border-radius:48% 48% 18% 48%; background:linear-gradient(155deg,#5b344f,#a56478 58%,#d59aa5); box-shadow:0 40px 80px rgba(88,47,79,.2); }
.salon-hero-shape::before { content:'V'; position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,255,255,.84); font-family:'Playfair Display',serif; font-size:12rem; font-style:italic; }
.salon-float-card { position:absolute; z-index:3; display:flex; align-items:center; gap:.8rem; padding:1rem 1.15rem; border:1px solid rgba(255,255,255,.7); border-radius:16px; background:rgba(255,250,246,.9); box-shadow:var(--salon-shadow); backdrop-filter:blur(12px); }
.salon-float-card i { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:var(--salon-rose-soft); color:var(--salon-plum); font-size:1.3rem; }
.salon-float-card strong,.salon-float-card small { display:block; }
.salon-float-card small { color:var(--salon-muted); }
.salon-float-one { left:0; top:15%; }
.salon-float-two { right:0; bottom:12%; }
.salon-proof { display:flex; flex-wrap:wrap; gap:1.5rem; margin-top:2.2rem; color:var(--salon-muted); font-size:.84rem; }
.salon-proof span { display:flex; align-items:center; gap:.35rem; }
.salon-proof i { color:var(--salon-success); }
.salon-landing-section { max-width:1160px; margin:auto; padding:6rem 2rem; }
.salon-section-heading { max-width:680px; margin:0 auto 3rem; text-align:center; }
.salon-section-heading h2 { margin:.7rem 0 1rem; color:var(--salon-plum-deep); font-family:'Playfair Display',serif; font-size:clamp(2.2rem,4vw,3.4rem); }
.salon-section-heading p { color:var(--salon-muted); }
.salon-feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.salon-feature { padding:1.7rem; border:1px solid var(--salon-border); border-radius:20px; background:#fff; box-shadow:var(--salon-shadow-sm); }
.salon-feature-icon { width:48px; height:48px; display:grid; place-items:center; margin-bottom:1.1rem; border-radius:14px; background:var(--salon-blush); color:var(--salon-plum); font-size:1.45rem; }
.salon-feature h3 { color:var(--salon-plum-deep); font-family:'Playfair Display',serif; font-size:1.25rem; }
.salon-feature p { margin:0; color:var(--salon-muted); line-height:1.65; }
.salon-landing-cta { max-width:1100px; margin:0 auto 5rem; padding:3.5rem 2rem; border-radius:28px; background:linear-gradient(125deg,var(--salon-plum-deep),var(--salon-plum)); color:#fff; text-align:center; }
.salon-landing-cta h2 { margin:0 0 .7rem; color:#fff; font-family:'Playfair Display',serif; font-size:clamp(2rem,4vw,3rem); }
.salon-landing-cta p { margin-bottom:1.6rem; color:rgba(255,255,255,.68); }
.salon-landing-cta .btn { background:#fff !important; color:var(--salon-plum) !important; }
.salon-landing-footer { padding:2rem; border-top:1px solid var(--salon-border); color:var(--salon-muted); text-align:center; font-size:.84rem; }
@media (max-width:991.98px) { .salon-hero { grid-template-columns:1fr; padding-top:9rem; text-align:center; } .salon-hero-copy,.salon-hero-copy>p { margin-left:auto; margin-right:auto; } .salon-hero-buttons,.salon-proof { justify-content:center; } .salon-hero-art { min-height:430px; margin-top:2rem; } .salon-feature-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:575.98px) { .salon-landing-nav { padding:1.2rem; } .salon-landing-nav .salon-brand-copy { display:none; } .salon-landing-actions .btn-outline-primary { display:none; } .salon-hero { padding-left:1.2rem; padding-right:1.2rem; } .salon-hero h1 { font-size:3.2rem; } .salon-hero-art { min-height:340px; } .salon-hero-shape::before { font-size:8rem; } .salon-float-card { padding:.75rem; font-size:.78rem; } .salon-feature-grid { grid-template-columns:1fr; } .salon-landing-section { padding:4rem 1.2rem; } .salon-landing-cta { margin:0 1.2rem 3rem; } }

/* Registration */
.salon-register-shell { display:grid; grid-template-columns:minmax(360px,.8fr) minmax(560px,1.2fr); min-height:100vh; background:linear-gradient(145deg,#fffaf6,#faf2f2); }
.salon-register-visual { position:relative; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; min-height:100vh; padding:clamp(2rem,4vw,4.5rem); color:#fff; background:linear-gradient(150deg,#3e2038 0%,#633751 58%,#9a5b6d 100%); }
.salon-register-visual::before { content:''; position:absolute; width:480px; height:480px; right:-250px; top:14%; border:1px solid rgba(255,255,255,.12); border-radius:50%; box-shadow:0 0 0 75px rgba(255,255,255,.025),0 0 0 150px rgba(255,255,255,.018); }
.salon-register-visual::after { content:'V'; position:absolute; right:8%; bottom:7%; color:rgba(255,255,255,.055); font-family:'Playfair Display',serif; font-size:18rem; font-style:italic; line-height:1; }
.salon-register-copy,.salon-register-benefits,.salon-register-visual .salon-auth-brand { position:relative; z-index:1; }
.salon-register-copy h1 { max-width:540px; margin:.75rem 0 1rem; color:#fff; font-family:'Playfair Display',serif; font-size:clamp(2.8rem,5vw,4.8rem); line-height:1.04; }
.salon-register-copy p { max-width:490px; color:rgba(255,255,255,.68); font-size:1rem; line-height:1.75; }
.salon-register-benefits { display:grid; gap:.8rem; }
.salon-register-benefit { display:flex; align-items:center; gap:.8rem; color:rgba(255,255,255,.82); font-size:.88rem; }
.salon-register-benefit i { width:34px; height:34px; display:grid; place-items:center; flex:0 0 auto; border:1px solid rgba(255,255,255,.14); border-radius:10px; background:rgba(255,255,255,.08); color:#efcbd1; }
.salon-register-panel { display:flex; align-items:center; padding:3rem clamp(1.5rem,5vw,5.5rem); }
.salon-register-form { width:min(100%,720px); margin:auto; }
.salon-register-form h2 { margin:.25rem 0 .5rem; color:var(--salon-plum-deep); font-family:'Playfair Display',serif; font-size:clamp(2rem,3vw,2.7rem); }
.salon-register-form .lead { margin-bottom:2rem; color:var(--salon-muted); font-size:.95rem; }
.salon-register-form .form-label { margin-bottom:.45rem; color:var(--salon-ink); font-size:.82rem; font-weight:600; }
.salon-register-form .form-control,.salon-register-form .form-select { min-height:48px; padding:.7rem .9rem; }
.salon-register-form .input-group-text { border-color:var(--salon-border); background:#fffdfa; color:var(--salon-muted); }
.salon-register-form .btn-primary { min-height:50px; }
.salon-register-form .btn-primary:disabled { border-color:#bbaeb8 !important; background:#bbaeb8 !important; box-shadow:none !important; }
.salon-field-hint { margin-top:.35rem; color:var(--salon-muted); font-size:.72rem; }
.salon-terms-box { padding:1rem; border:1px solid var(--salon-border); border-radius:12px; background:rgba(255,255,255,.58); }
.salon-register-footer { margin-top:1.5rem; color:var(--salon-muted); text-align:center; font-size:.9rem; }
@media (max-width:1099.98px) { .salon-register-shell { grid-template-columns:1fr; } .salon-register-visual { min-height:380px; padding:2.5rem; } .salon-register-copy h1 { font-size:3rem; } .salon-register-benefits { grid-template-columns:repeat(3,1fr); margin-top:2rem; } .salon-register-benefit { align-items:flex-start; } .salon-register-panel { padding:3.5rem 1.5rem; } }
@media (max-width:767.98px) { .salon-register-visual { min-height:330px; padding:1.5rem; } .salon-register-copy h1 { font-size:2.45rem; } .salon-register-copy p { margin-bottom:0; } .salon-register-benefits { display:none; } .salon-register-panel { padding:2.5rem 1.15rem; } }