@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');:root {
  --pm-ink: #101116;
  --pm-paper: #fffdf9;
  --pm-canvas: #f7f4ec;
  --pm-grid: rgba(15, 23, 42, 0.055);
  --pm-blue: #4b5fff;
  --pm-coral: #f46870;
  --pm-lavender: #e7e8fa;
  --pm-muted: #747b8b;
  --pm-border: #d9dbe3;
  --pm-success: #21a66b;
  --pm-warning: #e2a11a;
  --pm-danger: #d94b54;
  --pm-preview: #080b0c;
  --pm-preview-acid: #d9ff43;

  --pm-font-display: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --pm-font-ui: "Inter", "Manrope", system-ui, -apple-system, sans-serif;

  --pm-space-1: 4px;
  --pm-space-2: 8px;
  --pm-space-3: 12px;
  --pm-space-4: 16px;
  --pm-space-6: 24px;
  --pm-space-8: 32px;
  --pm-space-12: 48px;
  --pm-space-16: 64px;

  --pm-radius-control: 12px;
  --pm-radius-card: 18px;
  --pm-radius-hero: 28px;
  --pm-content-max: 1440px;
  --pm-reading-max: 800px;
  --pm-admin-rail: 240px;
  --pm-focus: 0 0 0 3px rgba(75, 95, 255, 0.28);
  --pm-shadow-card: 0 18px 50px rgba(16, 17, 22, 0.08);

  --pm-bg: var(--pm-canvas);
  --pm-bg-soft: #f3efe6;
  --pm-surface: var(--pm-paper);
  --pm-surface-soft: #fbfaf6;
  --pm-text: var(--pm-ink);
  --pm-accent: var(--pm-blue);
  --pm-accent-dark: #3a4ae8;
  --pm-accent-soft: rgba(75, 95, 255, 0.12);
  --pm-busy: var(--pm-coral);
  --pm-busy-soft: #fff1f2;
  --pm-page-max: var(--pm-content-max);
  --pm-font-serif: var(--pm-font-display);
  --pm-font-sans: var(--pm-font-ui);
}

*, *::before, *::after { box-sizing: border-box; }

html, body, #root { min-height: 100%; }

body {
  margin: 0;
  overflow-x: hidden;
  overflow-y: visible;
  color: var(--pm-ink);
  background-color: var(--pm-canvas);
  font-family: var(--pm-font-ui);
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; }

:focus-visible {
  outline: 0;
  box-shadow: var(--pm-focus);
}

.pm-grid-canvas,
.pm-catalog,
.pickme-app-frame {
  background-color: var(--pm-canvas);
  background-image:
    linear-gradient(var(--pm-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--pm-grid) 1px, transparent 1px);
  background-size: 32px 32px;
}

.pm-display {
  font-family: var(--pm-font-display);
  font-size: clamp(4rem, 5.2vw, 6rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.9;
}

.pm-page-shell {
  width: min(100% - 64px, var(--pm-content-max));
  margin-inline: auto;
}

.pm-branded-loading {
  min-height: 100vh;
  display: grid;
  place-items: center;
  color: var(--pm-muted);
  font-family: var(--pm-font-ui);
  background-color: var(--pm-canvas);
  background-image:
    linear-gradient(var(--pm-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--pm-grid) 1px, transparent 1px);
  background-size: 32px 32px;
}

@media (max-width: 1024px) {
  .pm-page-shell { width: min(100% - 40px, var(--pm-content-max)); }
  .pm-display { font-size: clamp(3.5rem, 7vw, 4.5rem); }
}

@media (max-width: 600px) {
  :root { --pm-radius-hero: 18px; --pm-radius-card: 16px; }
  .pm-page-shell { width: min(100% - 24px, var(--pm-content-max)); }
  .pm-display { font-size: clamp(2.625rem, 12vw, 3.375rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/*
   PICKME LOGO — LOCKED DESIGN

   This is the ONE PickMe logo used across
   Homepage / Salon / Shop / Setup / Dashboard.

   Do not create page-specific logo colors.
*/

.pickme-global-logo{
  display:inline-flex;
  align-items:center;
  gap:10px;

  color:var(--pm-ink);

  text-decoration:none;

  user-select:none;
}

.pickme-global-logo-symbol{
  width:29px;
  height:29px;

  position:relative;

  flex:0 0 auto;
}

.pickme-global-logo-symbol i{
  position:absolute;

  width:17px;
  height:11px;

  border-radius:
    100% 10% 100% 10%;

      background: linear-gradient(135deg, #60a5fa 0%, #4b5fff 100%);
}

.pickme-global-logo-symbol i:first-child{
  left:1px;
  top:4px;

  transform:
    rotate(35deg);
}

.pickme-global-logo-symbol i:last-child{
  right:1px;
  bottom:4px;

  transform:
    rotate(215deg);
}

.pickme-global-logo strong{
  color:var(--pm-ink);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:29px;
  font-weight:700;

  letter-spacing:-.045em;

  line-height:1;
}

.pickme-global-logo:hover{
  opacity:.82;
}

.pickme-global-logo.compact{
  gap:8px;
}

.pickme-global-logo.compact
.pickme-global-logo-symbol{
  width:24px;
  height:24px;
}

.pickme-global-logo.compact
.pickme-global-logo-symbol i{
  width:14px;
  height:9px;
}

.pickme-global-logo.compact strong{
  font-size:22px;
}
:root {
  --pm-bg: #f7f4ec;
  --pm-bg-soft: #f3efe6;
  --pm-surface: #fffdf9;
  --pm-surface-soft: #fbfaf6;
  --pm-ink: #101116;
  --pm-text: #101116;
  --pm-muted: #747b8b;
  --pm-accent: #4b5fff;
  --pm-accent-dark: #3a4ae8;
  --pm-accent-soft: rgba(75, 95, 255, 0.12);
  --pm-blue: #4b5fff;
  --pm-coral: #f46870;
  --pm-lavender: #e7e8fa;
  --pm-canvas: #f7f4ec;
  --pm-paper: #fffdf9;
  --pm-taupe: #747b8b;
  --pm-taupe-soft: #e7e8fa;
  --pm-success: #21a66b;
  --pm-success-soft: rgba(33, 166, 107, 0.12);
  --pm-busy: #f46870;
  --pm-busy-soft: #fff1f2;
  --pm-pause: #747b8b;
  --pm-pause-soft: #f3efe6;
  --pm-border: #d9dbe3;
  --pm-radius-xs: 10px;
  --pm-radius-sm: 12px;
  --pm-radius-md: 18px;
  --pm-radius-lg: 28px;
  --pm-radius-xl: 36px;
  --pm-shadow-card: 0 18px 50px rgba(16, 17, 22, 0.08);
  --pm-shadow-premium: 0 18px 50px rgba(16, 17, 22, 0.08);
  --pm-page-max: 1440px;
  --pm-grid: rgba(15, 23, 42, 0.055);
  --pm-font-display: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --pm-font-ui: "Inter", "Manrope", system-ui, -apple-system, sans-serif;
}
:root {
  --pm-ink: #101116;
  --pm-ink-deep: #080b0c;
  --pm-paper: #fffdf9;
  --pm-paper-muted: #f7f4ec;
  --pm-paper-card: #fffdf9;
  --pm-paper-border: #d9dbe3;
  --pm-live: #f46870;
  --pm-match: #4b5fff;
  --pm-flow: #4b5fff;
  --pm-warm: #e2a11a;
  --pm-emerald: #4b5fff;
  --pm-emerald-light: #6b7aff;
  --pm-font-display: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --pm-font-ui: "Inter", "Manrope", system-ui, -apple-system, sans-serif;
  --pm-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --pm-max-public: 1360px;
  --pm-max-workspace: 1360px;
  --pm-max-kiosk: 100%;
  --pm-space-xs: 4px;
  --pm-space-sm: 8px;
  --pm-space-md: 16px;
  --pm-space-lg: 24px;
  --pm-space-xl: 32px;
  --pm-space-2xl: 48px;
  --pm-radius-sm: 8px;
  --pm-radius-md: 12px;
  --pm-radius-lg: 18px;
  --pm-radius-xl: 28px;
  --pm-radius-full: 9999px;
  --pm-shadow-sm: 0 1px 3px rgba(16, 17, 22, 0.06);
  --pm-shadow-md: 0 4px 12px rgba(16, 17, 22, 0.06);
  --pm-shadow-lg: 0 18px 50px rgba(16, 17, 22, 0.08);
  --pm-shadow-glow: 0 0 24px rgba(75, 95, 255, 0.25);
}

.pm-container-standard {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  overflow-x: hidden;
  font-family: var(--pm-font-ui, Inter, system-ui, sans-serif);
  background-color: var(--pm-canvas, #f7f4ec);
  background-image:
    linear-gradient(var(--pm-grid, rgba(15, 23, 42, 0.055)) 1px, transparent 1px),
    linear-gradient(90deg, var(--pm-grid, rgba(15, 23, 42, 0.055)) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--pm-ink, #101116);
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

#root, .pickme-app-frame {
  min-height: 100%;
  height: auto;
}



.page{
max-width:1200px;
margin:auto;
padding:35px;
}


.header{
display:flex;
justify-content:space-between;
align-items:center;
border-bottom:1px solid #ddd;
padding-bottom:20px;
}


.logo{
font-size:38px;
font-weight:700;
}


nav{
font-size:16px;
}


.hero h1{
font-size:48px;
margin-top:50px;
}


.hero button{
margin-top:15px;
}


.salon-card{

display:flex;
gap:30px;

background:white;

border-radius:28px;

padding:25px;

margin:30px 0;

box-shadow:
0 15px 40px rgba(0,0,0,.08);

}



.photo{

width:240px;
height:190px;

border-radius:22px;

background:
linear-gradient(135deg,#e4ded4,#777);

display:flex;

align-items:center;

justify-content:center;

color:white;

font-size:20px;

}


.info{
flex:1;
}


.rating{

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

}


.verified{

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

color:#198754;

background:#eaf6ed;

padding:8px 15px;

border-radius:20px;

width:max-content;

}


button{

background:#214d45;

color:white;

border:none;

padding:13px 22px;

border-radius:12px;

}


.light{

background:#eee;

color:#333;

margin-left:10px;

}


.legacy-demo-live-box{
width:240px;
background:#faf7ef;
padding:20px;
border-radius:22px;
}


.person{

padding:8px;

}


.green{
color:#16803c;
}


.red{
color:#c62828;
}


.orange{
color:#d88900;
}


.load span{

display:inline-block;

height:6px;

width:35px;

background:#d9b35a;

margin:3px;

border-radius:10px;

}


.claim{

background:#f4e7c8;

padding:15px;

border-radius:14px;

}


footer{

text-align:center;

margin-top:70px;

}

.photo{
width:240px;
height:190px;
border-radius:22px;
overflow:hidden;
flex-shrink:0;
background:#ddd;
}

.photo img{
width:100%;
height:100%;
object-fit:cover;
display:block;
border-radius:22px;
}

.salon-card{
align-items:center;
}


.salon-page{
max-width:1100px;
margin:auto;
padding:40px;
font-family:Arial;
}


.top{
border-bottom:1px solid #ddd;
margin-bottom:40px;
}


.hero-salon{
display:flex;
gap:50px;
align-items:center;
background:white;
padding:40px;
border-radius:30px;
box-shadow:0 15px 40px #0001;
}


.salon-photo{
width:320px;
height:320px;
border-radius:25px;
background:linear-gradient(135deg,#d8c9a5,#777);
display:flex;
align-items:center;
justify-content:center;
color:white;
font-size:28px;
}


.badge{
background:#e7f5e9;
color:#26734d;
padding:10px;
border-radius:20px;
display:inline-block;
}


button{
background:#244f46;
color:white;
border:0;
padding:15px 25px;
border-radius:12px;
}


.box{
margin-top:30px;
background:white;
padding:30px;
border-radius:25px;
box-shadow:0 10px 30px #0001;
}


.green{
color:green;
}

.red{
color:red;
}

.orange{
color:#d88b00;
}


html, body, #root {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
  overflow-y: auto;
}

img, video {
  max-width: 100%;
  box-sizing: border-box;
}

.salon-page{
max-width:1100px;
margin:auto;
padding:25px 40px;
box-sizing:border-box;
}

.hero-salon{
padding:25px;
gap:30px;
}

.salon-photo{
width:260px;
height:260px;
}

.box{
margin-top:20px;
padding:20px;
}

h1{
margin-top:10px;
margin-bottom:20px;
}


html,body,#root{
margin:0;
width:100%;
min-height:100%;
}

body{
overflow-x:hidden;
}

.salon-page{
max-width:1100px;
margin:auto;
padding:25px 40px;
box-sizing:border-box;
}

.hero-salon{
padding:25px;
gap:30px;
}

.salon-photo{
width:260px;
height:260px;
}

.box{
margin-top:20px;
padding:20px;
}

h1{
margin-top:10px;
margin-bottom:20px;
}


body {
  margin:0;
  background:#f7f5ef;
  color:#143b3a;
  font-family: Inter, Arial, sans-serif;
}

.salon-page{
  max-width:1200px;
  margin:auto;
  padding:20px;
}

.top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #ddd;
  padding-bottom:15px;
}

.top h1{
  font-size:32px;
}

.hero{
  display:grid;
  grid-template-columns:280px 1fr 380px;
  gap:24px;
  margin-top:35px;
}

.photo{
  height:280px;
  border-radius:24px;
  background:linear-gradient(135deg,#d8ceb0,#777);
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  font-size:22px;
}

.info h1{
  font-size:42px;
  margin-top:0;
}

.badge{
  display:inline-block;
  background:#e7f5e8;
  color:#268044;
  padding:8px 14px;
  border-radius:20px;
}

button{
  background:#174d48;
  color:white;
  border:0;
  padding:15px 25px;
  border-radius:12px;
  font-weight:bold;
}

.legacy-demo-live-card{
  background:white;
  padding:25px;
  border-radius:24px;
  box-shadow:0 10px 30px #0001;
}

.masters{
  display:flex;
  gap:10px;
}

.masters div{
  background:#faf8f1;
  padding:15px;
  border-radius:15px;
}

.timeline{
  margin-top:20px;
  line-height:40px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-top:30px;
}

.card{
  background:white;
  padding:25px;
  border-radius:20px;
  box-shadow:0 10px 30px #0001;
}


@media(max-width:900px){

.hero{
 grid-template-columns:1fr;
}

.grid{
 grid-template-columns:1fr;
}

}


.schedule{
  margin-top:25px;
}

.hours{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:8px;
  font-size:12px;
  margin-bottom:10px;
}

.day-row{
  display:grid;
  grid-template-columns:55px 1fr;
  align-items:center;
  margin-bottom:12px;
}

.bar{
  height:18px;
  border-radius:10px;
  display:flex;
  overflow:hidden;
  background:#eee;
}

.free{
  background:#cfead2;
  flex:2;
}

.busy{
  background:#f3c7c7;
  flex:2;
}

.pause{
  background:#ddd;
  flex:1;
}

.next{
  background:#f0dfb0;
  flex:1;
}


.page{
  max-width:1200px;
  margin:0 auto;
  padding:30px;
  color:#12333a;
}

.salon-hero{
  display:grid;
  grid-template-columns:260px 1fr 300px;
  gap:40px;
  align-items:start;
}

.salon-photo{
  height:260px;
  border-radius:28px;
  background:linear-gradient(135deg,#d8c9a5,#777);
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  font-size:22px;
}

.salon-info h1{
  font-size:42px;
  margin:0 0 15px;
}

.verified{
  display:inline-block;
  background:#e8f7ec;
  color:#278044;
  padding:8px 14px;
  border-radius:20px;
}

button{
  background:#214d45;
  color:white;
  border:0;
  padding:14px 28px;
  border-radius:12px;
  font-weight:600;
}

.live-box{
  background:#fff;
  border-radius:25px;
  padding:25px;
  box-shadow:0 10px 30px #0001;
}

.workers{
  display:flex;
  gap:10px;
}

.workers div{
  background:#faf7ef;
  padding:12px;
  border-radius:15px;
  flex:1;
}

.timeline div{
  margin:15px 0;
}

.cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-top:50px;
}

.cards>div{
  background:white;
  padding:25px;
  border-radius:22px;
  box-shadow:0 10px 30px #0001;
}

@media(max-width:900px){
 .salon-hero{
  grid-template-columns:1fr;
 }
 .cards{
  grid-template-columns:1fr;
 }
}


.salon-hero{
  align-items:start;
  min-height:420px;
}

.live-box{
  margin-top:0;
}

.cards{
  margin-top:20px;
}



/* compact premium salon layout */
.salon-content-grid{
  margin-top:40px !important;
}

.salon-hero{
  margin-bottom:30px !important;
}


.worker-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.worker-card small{
  font-size:11px;
  opacity:.65;
}

.status-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  display:block;
  margin-bottom:3px;
}

.status-dot.free{
  background:#55b879;
}

.status-dot.busy{
  background:#cf5360;
}

.status-dot.soon{
  background:#e9954f;
}


/* ===== PickMe master timeline ===== */

.master-schedule{
  margin-top:18px;
  padding:0;
  background:transparent;
  box-shadow:none;
}

.master-schedule h2{
  margin:0 0 12px;
  font-size:20px;
  line-height:1.2;
}

.timeline-hours{
  width:100%;
  display:grid;
  grid-template-columns:repeat(9, minmax(0, 1fr));
  gap:3px;
  align-items:end;
}

.timeline-hours > div{
  min-width:0;
  text-align:center;
}

.timeline-hours span{
  display:block;
  margin-bottom:5px;
  font-size:10px;
  color:#69736f;
}

.timeline-hours .slot{
  width:100%;
  height:24px;
  border-radius:6px;
}

.timeline-hours .slot.free{
  background:#cfe9d5;
}

.timeline-hours .slot.busy{
  background:#efc3c6;
}

.timeline-hours .slot.pause{
  background:#dedde1;
}

.schedule-info{
  margin-top:10px;
  font-size:11px;
  white-space:nowrap;
  color:#58645f;
}


/* ===== Dynamic public salon prices ===== */

.public-service-list{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-top:12px;
}

.public-service-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding-bottom:6px;
  border-bottom:1px solid #eeeae1;
  font-size:12px;
}

.public-service-row:last-child{
  border-bottom:0;
}

.public-service-row span{
  min-width:0;
}

.public-service-row strong{
  flex-shrink:0;
  white-space:nowrap;
  color:#174c43;
}

.services-card{
  overflow:auto;
}


/* ===== Salon public desktop cleanup ===== */

@media (min-width: 901px){
  .salon-hero{
    min-height:0 !important;
  }

  .cards{
    margin-top:16px !important;
  }

  .cards > div{
    min-height:210px;
    box-sizing:border-box;
  }
}


/* ===== Compact public services ===== */

.services-card{
  overflow:hidden !important;
}

.public-service-list{
  gap:3px;
}

.public-service-row{
  min-height:22px;
  padding:2px 0 4px;
}

.public-service-row strong{
  font-size:11px;
}

.all-services-button{
  width:100%;
  margin-top:10px;
  padding:9px 10px;
  border:1px solid #d8ded8;
  border-radius:10px;
  background:#f5f7f3;
  color:#174c43;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}

.all-services-button:hover{
  background:#eaf1ec;
}


/* ===== Services modal ===== */

.services-modal-backdrop{
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(16,30,27,.42);
  backdrop-filter:blur(6px);
}

.services-modal{
  width:min(560px, 92vw);
  max-height:80vh;
  overflow:hidden;
  background:white;
  border-radius:24px;
  box-shadow:0 30px 100px rgba(0,0,0,.22);
}

.services-modal-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:22px 24px 16px;
  border-bottom:1px solid #ece8df;
}

.services-modal-header small{
  color:#ad8541;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
}

.services-modal-header h2{
  margin:4px 0 0;
}

.services-modal-header button{
  width:34px;
  height:34px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#f1eee7;
  color:#173f3b;
  font-size:22px;
  cursor:pointer;
}

.services-modal-list{
  max-height:60vh;
  overflow:auto;
  padding:8px 24px 22px;
}

.services-modal-list > div{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:11px 0;
  border-bottom:1px solid #eeeae2;
}

.services-modal-list > div:last-child{
  border-bottom:0;
}

.services-modal-list strong{
  white-space:nowrap;
  color:#174c43;
}


/* ===== Salon public desktop cleanup ===== */

@media (min-width: 901px){
  .salon-hero{
    min-height:0 !important;
  }

  .cards{
    margin-top:16px !important;
  }

  .cards > div{
    min-height:210px;
    box-sizing:border-box;
  }
}


/* ===== Compact public services ===== */

.services-card{
  overflow:hidden !important;
}

.public-service-list{
  gap:3px;
}

.public-service-row{
  min-height:22px;
  padding:2px 0 4px;
}

.public-service-row strong{
  font-size:11px;
}

.all-services-button{
  width:100%;
  margin-top:10px;
  padding:9px 10px;
  border:1px solid #d8ded8;
  border-radius:10px;
  background:#f5f7f3;
  color:#174c43;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}

.all-services-button:hover{
  background:#eaf1ec;
}


/* ===== Services modal ===== */

.services-modal-backdrop{
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(16,30,27,.42);
  backdrop-filter:blur(6px);
}

.services-modal{
  width:min(560px, 92vw);
  max-height:80vh;
  overflow:hidden;
  background:white;
  border-radius:24px;
  box-shadow:0 30px 100px rgba(0,0,0,.22);
}

.services-modal-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:22px 24px 16px;
  border-bottom:1px solid #ece8df;
}

.services-modal-header small{
  color:#ad8541;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
}

.services-modal-header h2{
  margin:4px 0 0;
}

.services-modal-header button{
  width:34px;
  height:34px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#f1eee7;
  color:#173f3b;
  font-size:22px;
  cursor:pointer;
}

.services-modal-list{
  max-height:60vh;
  overflow:auto;
  padding:8px 24px 22px;
}

.services-modal-list > div{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:11px 0;
  border-bottom:1px solid #eeeae2;
}

.services-modal-list > div:last-child{
  border-bottom:0;
}

.services-modal-list strong{
  white-space:nowrap;
  color:#174c43;
}


/* ===== Salon public desktop cleanup ===== */

@media (min-width: 901px){
  .salon-hero{
    min-height:0 !important;
  }

  .cards{
    margin-top:16px !important;
  }

  .cards > div{
    min-height:210px;
    box-sizing:border-box;
  }
}


/* ===== Compact public services ===== */

.services-card{
  overflow:hidden !important;
}

.public-service-list{
  gap:3px;
}

.public-service-row{
  min-height:22px;
  padding:2px 0 4px;
}

.public-service-row strong{
  font-size:11px;
}

.all-services-button{
  width:100%;
  margin-top:10px;
  padding:9px 10px;
  border:1px solid #d8ded8;
  border-radius:10px;
  background:#f5f7f3;
  color:#174c43;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}

.all-services-button:hover{
  background:#eaf1ec;
}


/* ===== Services modal ===== */

.services-modal-backdrop{
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(16,30,27,.42);
  backdrop-filter:blur(6px);
}

.services-modal{
  width:min(560px, 92vw);
  max-height:80vh;
  overflow:hidden;
  background:white;
  border-radius:24px;
  box-shadow:0 30px 100px rgba(0,0,0,.22);
}

.services-modal-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:22px 24px 16px;
  border-bottom:1px solid #ece8df;
}

.services-modal-header small{
  color:#ad8541;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
}

.services-modal-header h2{
  margin:4px 0 0;
}

.services-modal-header button{
  width:34px;
  height:34px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#f1eee7;
  color:#173f3b;
  font-size:22px;
  cursor:pointer;
}

.services-modal-list{
  max-height:60vh;
  overflow:auto;
  padding:8px 24px 22px;
}

.services-modal-list > div{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:11px 0;
  border-bottom:1px solid #eeeae2;
}

.services-modal-list > div:last-child{
  border-bottom:0;
}

.services-modal-list strong{
  white-space:nowrap;
  color:#174c43;
}


/* ===== Final compact services card ===== */

.services-card{
  display:flex;
  flex-direction:column;
  overflow:hidden !important;
}

.services-card h2{
  margin-bottom:12px;
  line-height:1.15;
}

.services-card .public-service-list{
  flex:0 0 auto;
}

.services-card .all-services-button{
  margin-top:auto;
  flex-shrink:0;
}

.public-service-row{
  min-height:24px;
}

.cards > div{
  overflow:hidden;
}


/* ===== Lower salon cards final desktop sizing ===== */

@media (min-width: 901px){

  .cards{
    align-items:stretch;
  }

  .cards > div{
    height:285px !important;
    min-height:285px !important;
    max-height:285px !important;
    padding:24px !important;
    box-sizing:border-box;
  }

  .services-card{
    height:285px !important;
    display:flex;
    flex-direction:column;
  }

  .services-card h2{
    margin:0 0 14px;
  }

  .services-card .public-service-list{
    flex:0 0 auto;
  }

  .services-card .all-services-button{
    display:block;
    margin-top:14px;
    flex-shrink:0;
  }
}


/* ===== PickMe interactive live availability ===== */

.live-availability h2{
  margin:0 0 14px;
}

.live-staff-list{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:8px;
}

.live-staff-card{
  min-width:0;
  padding:10px 9px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  border:1px solid transparent;
  border-radius:14px;
  background:#f7f4ec;
  color:#163b38;
  text-align:left;
  cursor:pointer;
  transition:
    transform .15s ease,
    border-color .15s ease,
    background .15s ease;
}

.live-staff-card:hover{
  transform:translateY(-2px);
}

.live-staff-card.active{
  border-color:#b9d0c6;
  background:#edf5f0;
}

.live-staff-card strong{
  margin-top:4px;
  font-size:13px;
}

.live-staff-card small{
  margin-top:2px;
  color:#77766f;
  font-size:9px;
}

.live-status-label{
  margin-top:2px;
  font-size:12px;
}

.live-status-dot{
  width:9px;
  height:9px;
  display:block;
  border-radius:50%;
}

.live-status-dot.free{
  background:#57b779;
}

.live-status-dot.busy{
  background:#cf5360;
}

.live-status-dot.soon{
  background:#e79a4e;
}


.live-plan-title{
  margin-top:15px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
}

.live-plan-title > div{
  display:flex;
  flex-direction:column;
}

.live-plan-title small{
  color:#a38248;
  font-size:8px;
  font-weight:900;
  letter-spacing:.12em;
}

.live-plan-title strong{
  margin-top:2px;
  font-size:16px;
}

.live-now{
  padding:5px 7px;
  border-radius:999px;
  font-size:9px;
  font-weight:800;
  white-space:nowrap;
}

.live-now.free{
  background:#e4f3e8;
  color:#37764e;
}

.live-now.busy{
  background:#f7e4e5;
  color:#9d424b;
}

.live-now.soon{
  background:#faeddd;
  color:#9b632a;
}


.live-timeline{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(9,minmax(0,1fr));
  gap:4px;
}

.live-time-slot{
  min-width:0;
  text-align:center;
}

.live-time-slot > span{
  display:block;
  margin-bottom:4px;
  color:#7b817c;
  font-size:8px;
}

.live-slot{
  width:100%;
  height:22px;
  border-radius:6px;
}

.live-slot.free{
  background:#cfe7d5;
}

.live-slot.busy{
  background:#edc6c8;
}

.live-slot.pause{
  background:#dedde1;
}


.live-legend{
  margin-top:9px;
  display:flex;
  gap:12px;
  font-size:9px;
}

.live-legend span{
  display:flex;
  align-items:center;
  gap:4px;
}

.live-legend i{
  width:8px;
  height:8px;
  display:block;
  border-radius:50%;
}

.live-legend i.free{
  background:#57b779;
}

.live-legend i.busy{
  background:#cf5360;
}

.live-legend i.pause{
  background:#c9c6d5;
}


/* ===== Compact service tags in hero ===== */

.salon-service-tags{
  margin:12px 0 8px;
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}

.salon-service-tags span{
  padding:5px 8px;
  border-radius:999px;
  background:#f1eee5;
  font-size:10px;
}

.salon-service-tags .more{
  background:#173f3b;
  color:white;
  font-weight:800;
}

.salon-description{
  max-width:560px;
}


/* ===== Dynamic bottom salon cards ===== */

.salon-main-action{
  display:inline-block;
  padding:12px 24px;
  border-radius:12px;
  background:#184d45;
  color:white;
  text-decoration:none;
  font-size:12px;
  font-weight:800;
}

.shop-public-card,
.about-public-card,
.contact-public-card{
  display:flex;
  flex-direction:column;
}

.shop-public-list{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.shop-public-list > div{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:7px 0;
  border-bottom:1px solid #eeeae1;
  font-size:11px;
}

.shop-public-list strong{
  white-space:nowrap;
  color:#174c43;
}

.card-action{
  margin-top:auto;
  padding:9px 10px;
  display:block;
  box-sizing:border-box;
  border:1px solid #d9dfda;
  border-radius:10px;
  background:#f5f7f3;
  color:#174c43;
  text-align:center;
  text-decoration:none;
  font-size:10px;
  font-weight:800;
  cursor:pointer;
}

.card-muted{
  color:#85857d;
  font-size:12px;
}

.about-facts{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.about-facts > div{
  display:flex;
  flex-direction:column;
  padding-bottom:7px;
  border-bottom:1px solid #eeeae1;
}

.about-facts span{
  color:#7a7c76;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.about-facts strong{
  margin-top:2px;
  font-size:11px;
}

.contact-address{
  display:flex;
  flex-direction:column;
}

.contact-public-card small{
  color:#8a8175;
  font-size:8px;
  font-weight:800;
  letter-spacing:.08em;
}

.contact-public-card strong{
  margin-top:3px;
  font-size:11px;
  line-height:1.3;
}

.contact-link{
  margin-top:12px;
  color:#174c43;
  text-decoration:none;
  font-size:11px;
  font-weight:800;
}

.contact-hours{
  margin-top:12px;
  display:flex;
  flex-direction:column;
}

.contact-hours span{
  margin-top:3px;
  font-size:10px;
  line-height:1.3;
}

.map-action{
  margin-top:auto;
}


/* ===== Salon Shop mini storefront ===== */

.shop-card-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.shop-card-title h2{
  margin:0;
}

.shop-card-title > span{
  min-width:23px;
  height:23px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#f1eee5;
  font-size:10px;
  font-weight:800;
}

.shop-mini-products{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-top:14px;
}

.shop-mini-product{
  min-width:0;
  display:grid;
  grid-template-columns:40px 1fr;
  gap:8px;
  align-items:center;
}

.shop-mini-image{
  width:40px;
  height:40px;
  overflow:hidden;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#e9e3d7;
}

.shop-mini-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.shop-mini-image span{
  font-weight:900;
  color:#71695b;
}

.shop-mini-product > div:last-child{
  min-width:0;
  display:flex;
  flex-direction:column;
}

.shop-mini-product strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px;
}

.shop-mini-product small{
  margin-top:2px;
  color:#99742e;
  font-weight:800;
}


/* ===== Full Salon Shop ===== */

.salon-shop-page{
  min-height:100vh;
  box-sizing:border-box;
  padding:24px;
  background:#f5f2e9;
  color:#173f3b;
}

.salon-shop-header{
  max-width:1280px;
  margin:auto;
  display:grid;
  grid-template-columns:180px 1fr 180px;
  align-items:start;
  gap:20px;
}

.salon-shop-header > a{
  color:#174c43;
  text-decoration:none;
  font-size:12px;
  font-weight:800;
}

.salon-shop-header > div{
  text-align:center;
}

.salon-shop-header span{
  color:#b08843;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
}

.salon-shop-header h1{
  margin:4px 0;
  font-size:34px;
}

.salon-shop-header p{
  margin:0;
  color:#76766f;
}

.salon-shop-header > strong{
  justify-self:end;
  padding:7px 11px;
  border-radius:999px;
  background:white;
  font-size:11px;
}

.salon-shop-hero{
  max-width:1280px;
  margin:24px auto 20px;
  padding:28px 32px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  border-radius:26px;
  background:#173f3b;
  color:white;
}

.shop-premium-badge{
  color:#e9cc91;
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
}

.salon-shop-hero h2{
  max-width:650px;
  margin:7px 0;
  font-size:30px;
}

.salon-shop-hero p{
  margin:0;
  color:#d6dedb;
}

.shop-hero-stat{
  min-width:150px;
  padding:18px;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(255,255,255,.15);
  border-radius:18px;
  background:rgba(255,255,255,.06);
}

.shop-hero-stat strong{
  font-size:30px;
}

.shop-hero-stat span{
  font-size:10px;
}

.salon-shop-grid{
  max-width:1280px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

.salon-shop-product{
  overflow:hidden;
  border-radius:20px;
  background:white;
  box-shadow:0 15px 40px rgba(20,40,35,.06);
}

.salon-shop-product-image{
  height:210px;
  position:relative;
  overflow:hidden;
  background:#e8e1d3;
}

.salon-shop-product-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.salon-shop-product-image > div{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  font-size:48px;
  font-weight:900;
  color:#8d826f;
}

.salon-shop-product-image > span{
  position:absolute;
  left:10px;
  top:10px;
  padding:6px 9px;
  border-radius:999px;
  background:#fff1c7;
  color:#805e1c;
  font-size:9px;
  font-weight:900;
}

.salon-shop-product-body{
  padding:16px;
  display:flex;
  flex-direction:column;
}

.salon-shop-product-body small{
  color:#8d877d;
}

.salon-shop-product-body h3{
  margin:5px 0 10px;
}

.salon-shop-price{
  font-size:18px;
}

.salon-shop-product-body a,
.salon-shop-product-body button{
  margin-top:15px;
  padding:10px;
  border:0;
  border-radius:10px;
  background:#184d45;
  color:white;
  text-decoration:none;
  text-align:center;
  font-size:10px;
  font-weight:800;
}

.salon-shop-empty{
  max-width:600px;
  margin:80px auto;
  text-align:center;
}

@media(max-width:1000px){
  .salon-shop-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:600px){
  .salon-shop-grid{
    grid-template-columns:1fr;
  }

  .salon-shop-header{
    grid-template-columns:1fr;
  }

  .salon-shop-header > div{
    text-align:left;
  }

  .salon-shop-header > strong{
    justify-self:start;
  }

  .salon-shop-hero{
    align-items:flex-start;
    flex-direction:column;
  }

  .shop-product-editor-grid{
    grid-template-columns:1fr;
  }
}

/* ===== PickMe salon service actions ===== */

.salon-primary-actions{
  margin-top:13px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
}

.home-service-badge{
  padding:9px 11px;
  border-radius:11px;
  background:#fff3d7;
  color:#8b6826;
  font-size:10px;
  font-weight:800;
}

.calendar-action{
  background:white !important;
  color:#174c43 !important;
  border:1px solid #cedbd5 !important;
}


/* ===== live staff info ===== */

.live-section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.live-section-head > span{
  color:#55a66d;
  font-size:9px;
  font-weight:800;
}

.live-staff-card{
  position:relative;
  padding:0 !important;
  overflow:hidden;
}

.worker-main-button{
  width:100%;
  padding:8px 8px 27px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  border:0;
  background:transparent;
  color:#173f3b;
  text-align:left;
  cursor:pointer;
}

.worker-demo-photo{
  width:100%;
  height:60px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:9px;
  background:#e8e2d6;
  color:#806f51;
  font-size:24px;
  font-weight:900;
}

.worker-demo-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.worker-info-button{
  position:absolute;
  right:6px;
  bottom:5px;
  padding:3px 6px;
  border:0;
  border-radius:999px;
  background:white;
  color:#174c43;
  font-size:8px;
  font-weight:900;
  cursor:pointer;
}


/* ===== common overlay ===== */

.pickme-overlay{
  position:fixed;
  inset:0;
  z-index:2000;
  padding:24px;
  display:grid;
  place-items:center;
  background:rgba(12,29,26,.48);
  backdrop-filter:blur(7px);
}


/* ===== worker profile ===== */

.worker-profile-modal{
  width:min(720px,94vw);
  min-height:390px;
  position:relative;
  display:grid;
  grid-template-columns:230px 1fr;
  overflow:hidden;
  border-radius:26px;
  background:white;
  box-shadow:0 35px 100px rgba(0,0,0,.25);
}

.worker-profile-close{
  position:absolute;
  right:14px;
  top:14px;
  z-index:2;
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:#f1eee7;
  font-size:22px;
  cursor:pointer;
}

.worker-profile-left{
  padding:28px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:#173f3b;
  color:white;
}

.worker-profile-photo{
  width:115px;
  height:115px;
  margin-bottom:auto;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:22px;
  background:#e7ddca;
  color:#173f3b;
  font-size:45px;
  font-weight:900;
}

.worker-profile-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.worker-profile-left h2{
  margin:18px 0 2px;
  font-size:29px;
}

.worker-profile-left > span{
  opacity:.72;
}

.worker-profile-status{
  width:max-content;
  margin-top:12px;
  padding:6px 9px;
  border-radius:999px;
  background:white;
  color:#173f3b;
  font-size:10px;
  font-weight:800;
}

.worker-profile-content{
  padding:38px 32px 28px;
  display:flex;
  flex-direction:column;
}

.worker-profile-content > p{
  margin:0 0 20px;
  line-height:1.5;
  color:#5f6863;
}

.worker-profile-facts{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
}

.worker-profile-facts > div{
  padding:12px;
  display:flex;
  flex-direction:column;
  border-radius:13px;
  background:#f7f4ec;
}

.worker-profile-facts small,
.worker-specialties > small{
  color:#a27d3c;
  font-size:8px;
  font-weight:900;
  letter-spacing:.08em;
}

.worker-profile-facts strong{
  margin-top:4px;
  font-size:11px;
}

.worker-specialties{
  margin-top:18px;
}

.worker-specialties > div{
  margin-top:7px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.worker-specialties span{
  padding:6px 8px;
  border-radius:999px;
  background:#f2eee4;
  font-size:9px;
}

.worker-book-button{
  margin-top:auto;
  padding:12px;
  border:0;
  border-radius:11px;
  background:#174c43;
  color:white;
  font-weight:800;
  cursor:pointer;
}


/* ===== booking planner ===== */

.booking-planner{
  width:min(880px,96vw);
  overflow:hidden;
  border-radius:28px;
  background:white;
  box-shadow:0 35px 100px rgba(0,0,0,.25);
}

.booking-head{
  padding:20px 24px 15px;
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid #ebe6dc;
}

.booking-head span{
  color:#b0863e;
  font-size:9px;
  font-weight:900;
  letter-spacing:.13em;
}

.booking-head h2{
  margin:3px 0 0;
}

.booking-head button{
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:#f1eee7;
  font-size:22px;
  cursor:pointer;
}

.booking-body{
  padding:22px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:24px;
}

.calendar-head{
  display:grid;
  grid-template-columns:36px 1fr 36px;
  align-items:center;
  margin-bottom:12px;
}

.calendar-head strong{
  text-align:center;
  text-transform:capitalize;
}

.calendar-head button{
  height:32px;
  border:0;
  border-radius:9px;
  background:#f5f2ea;
  cursor:pointer;
}

.calendar-weekdays,
.calendar-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:5px;
}

.calendar-weekdays span{
  padding:4px;
  text-align:center;
  color:#88837a;
  font-size:9px;
}

.calendar-grid button,
.calendar-empty{
  height:37px;
}

.calendar-grid button{
  border:1px solid transparent;
  border-radius:9px;
  background:#f7f4ec;
  color:#173f3b;
  font-weight:700;
  cursor:pointer;
}

.calendar-grid button:hover{
  border-color:#a9c5b9;
}

.calendar-grid button.selected{
  background:#174c43;
  color:white;
}

.booking-options{
  display:flex;
  flex-direction:column;
  gap:11px;
}

.booking-options label{
  display:flex;
  flex-direction:column;
  gap:5px;
  font-size:10px;
  font-weight:800;
}

.booking-options select{
  width:100%;
  padding:10px;
  border:1px solid #ded9cf;
  border-radius:10px;
  background:#faf8f3;
  color:#173f3b;
}

.booking-mode{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
}

.booking-mode button{
  padding:10px;
  border:1px solid #ded9cf;
  border-radius:10px;
  background:#faf8f3;
  color:#173f3b;
  font-weight:800;
  cursor:pointer;
}

.booking-mode button.active{
  background:#174c43;
  color:white;
}

.booking-whatsapp{
  margin-top:4px;
  padding:12px;
  border:0;
  border-radius:11px;
  background:#174c43;
  color:white;
  font-weight:800;
  cursor:pointer;
}

.booking-whatsapp:disabled{
  opacity:.35;
  cursor:not-allowed;
}

.booking-note{
  color:#7d807a;
  line-height:1.4;
}


@media(max-width:700px){

  .worker-profile-modal,
  .booking-body{
    grid-template-columns:1fr;
  }

  .worker-profile-modal{
    max-height:90vh;
    overflow:auto;
  }
}

/* ===== PickMe salon service actions ===== */

.salon-primary-actions{
  margin-top:13px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
}

.home-service-badge{
  padding:9px 11px;
  border-radius:11px;
  background:#fff3d7;
  color:#8b6826;
  font-size:10px;
  font-weight:800;
}

.calendar-action{
  background:white !important;
  color:#174c43 !important;
  border:1px solid #cedbd5 !important;
}


/* ===== live staff info ===== */

.live-section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.live-section-head > span{
  color:#55a66d;
  font-size:9px;
  font-weight:800;
}

.live-staff-card{
  position:relative;
  padding:0 !important;
  overflow:hidden;
}

.worker-main-button{
  width:100%;
  padding:8px 8px 27px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  border:0;
  background:transparent;
  color:#173f3b;
  text-align:left;
  cursor:pointer;
}

.worker-demo-photo{
  width:100%;
  height:60px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:9px;
  background:#e8e2d6;
  color:#806f51;
  font-size:24px;
  font-weight:900;
}

.worker-demo-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.worker-info-button{
  position:absolute;
  right:6px;
  bottom:5px;
  padding:3px 6px;
  border:0;
  border-radius:999px;
  background:white;
  color:#174c43;
  font-size:8px;
  font-weight:900;
  cursor:pointer;
}


/* ===== common overlay ===== */

.pickme-overlay{
  position:fixed;
  inset:0;
  z-index:2000;
  padding:24px;
  display:grid;
  place-items:center;
  background:rgba(12,29,26,.48);
  backdrop-filter:blur(7px);
}


/* ===== worker profile ===== */

.worker-profile-modal{
  width:min(720px,94vw);
  min-height:390px;
  position:relative;
  display:grid;
  grid-template-columns:230px 1fr;
  overflow:hidden;
  border-radius:26px;
  background:white;
  box-shadow:0 35px 100px rgba(0,0,0,.25);
}

.worker-profile-close{
  position:absolute;
  right:14px;
  top:14px;
  z-index:2;
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:#f1eee7;
  font-size:22px;
  cursor:pointer;
}

.worker-profile-left{
  padding:28px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:#173f3b;
  color:white;
}

.worker-profile-photo{
  width:115px;
  height:115px;
  margin-bottom:auto;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:22px;
  background:#e7ddca;
  color:#173f3b;
  font-size:45px;
  font-weight:900;
}

.worker-profile-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.worker-profile-left h2{
  margin:18px 0 2px;
  font-size:29px;
}

.worker-profile-left > span{
  opacity:.72;
}

.worker-profile-status{
  width:max-content;
  margin-top:12px;
  padding:6px 9px;
  border-radius:999px;
  background:white;
  color:#173f3b;
  font-size:10px;
  font-weight:800;
}

.worker-profile-content{
  padding:38px 32px 28px;
  display:flex;
  flex-direction:column;
}

.worker-profile-content > p{
  margin:0 0 20px;
  line-height:1.5;
  color:#5f6863;
}

.worker-profile-facts{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
}

.worker-profile-facts > div{
  padding:12px;
  display:flex;
  flex-direction:column;
  border-radius:13px;
  background:#f7f4ec;
}

.worker-profile-facts small,
.worker-specialties > small{
  color:#a27d3c;
  font-size:8px;
  font-weight:900;
  letter-spacing:.08em;
}

.worker-profile-facts strong{
  margin-top:4px;
  font-size:11px;
}

.worker-specialties{
  margin-top:18px;
}

.worker-specialties > div{
  margin-top:7px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.worker-specialties span{
  padding:6px 8px;
  border-radius:999px;
  background:#f2eee4;
  font-size:9px;
}

.worker-book-button{
  margin-top:auto;
  padding:12px;
  border:0;
  border-radius:11px;
  background:#174c43;
  color:white;
  font-weight:800;
  cursor:pointer;
}


/* ===== booking planner ===== */

.booking-planner{
  width:min(880px,96vw);
  max-height:90vh;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  border-radius:28px;
  background:white;
  box-shadow:0 35px 100px rgba(0,0,0,.25);
  box-sizing:border-box;
}

@media(max-width:768px){
  .pickme-overlay{
    padding:12px;
  }
  .worker-profile-modal,
  .booking-body{
    grid-template-columns:1fr;
    gap:18px;
    padding:16px;
  }
  .worker-profile-modal,
  .booking-planner{
    width:100%;
    max-width:500px;
    max-height:92vh;
    overflow-y:auto;
    border-radius:20px;
  }
}

@media(max-width:420px){
  .pickme-overlay{
    padding:8px;
  }
  .booking-planner{
    border-radius:16px;
    max-height:95vh;
  }
  .booking-head{
    padding:14px 16px 10px;
  }
  .booking-body{
    padding:12px;
    gap:12px;
  }
  .calendar-weekdays,
  .calendar-grid{
    gap:3px;
  }
  .calendar-grid button,
  .calendar-empty{
    height:34px;
    font-size:11px;
  }
  .booking-times{
    grid-template-columns:repeat(3,1fr);
    gap:5px;
  }
  .booking-times button{
    padding:6px 2px;
    font-size:11px;
  }
}

/* ===== booking time picker ===== */

.booking-time-section{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.booking-time-section > strong{
  font-size:10px;
}

.booking-time-section > small{
  color:#88837b;
}

.booking-times{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
}

.booking-times button{
  min-height:43px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid #ddd8ce;
  border-radius:10px;
  background:#faf8f3;
  color:#173f3b;
  font-weight:800;
  cursor:pointer;
}

.booking-times button.selected{
  border-color:#174c43;
  background:#174c43;
  color:white;
}

.booking-times button.busy{
  background:#f1eded;
  color:#a08f91;
  cursor:not-allowed;
}

.booking-times button small{
  font-size:7px;
  font-weight:700;
}

.calendar-grid button{
  position:relative;
}

.calendar-grid button:disabled{
  opacity:.25;
  cursor:not-allowed;
}

.calendar-busy-dot{
  width:5px;
  height:5px;
  position:absolute;
  right:4px;
  bottom:4px;
  border-radius:50%;
  background:#cf5360;
}


/* ===== Salon booking dashboard ===== */

.booking-dashboard{
  min-height:100vh;
  padding:32px;
  box-sizing:border-box;
  background:#f6f3ea;
  color:#173f3b;
}

.booking-dashboard-header{
  width:min(1180px,100%);
  margin:auto;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
}

.booking-dashboard-header a{
  display:block;
  margin-bottom:22px;
  color:#174c43;
  text-decoration:none;
  font-size:11px;
  font-weight:800;
}

.booking-dashboard-header > div:first-child > span{
  color:#b58a3e;
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
}

.booking-dashboard-header h1{
  margin:5px 0 2px;
  font-size:38px;
}

.booking-dashboard-header p{
  margin:0;
  color:#77756e;
}

.booking-dashboard-stats{
  display:flex;
  gap:9px;
}

.booking-dashboard-stats > div{
  min-width:90px;
  padding:14px;
  display:flex;
  flex-direction:column;
  border:1px solid #e3ded3;
  border-radius:16px;
  background:white;
}

.booking-dashboard-stats strong{
  font-size:25px;
}

.booking-dashboard-stats span{
  color:#7b7a73;
  font-size:9px;
}

.booking-dashboard-grid{
  width:min(1180px,100%);
  margin:24px auto 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.booking-dashboard-panel{
  min-height:500px;
  padding:22px;
  border:1px solid #e4dfd4;
  border-radius:24px;
  background:white;
  box-shadow:0 16px 45px rgba(26,46,40,.06);
}

.dashboard-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:18px;
}

.dashboard-panel-head small{
  color:#b58a3e;
  font-size:8px;
  font-weight:900;
  letter-spacing:.12em;
}

.dashboard-panel-head h2{
  margin:4px 0 0;
}

.dashboard-panel-head > span{
  min-width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#f2eee5;
  font-size:10px;
  font-weight:900;
}

.booking-request-list,
.confirmed-booking-list{
  display:flex;
  flex-direction:column;
  gap:9px;
}

.booking-request-card{
  display:grid;
  grid-template-columns:100px 1fr auto;
  gap:14px;
  align-items:center;
  padding:14px;
  border:1px solid #ebe6dd;
  border-radius:15px;
  background:#faf8f3;
}

.booking-request-date{
  display:flex;
  flex-direction:column;
}

.booking-request-date strong{
  font-size:20px;
}

.booking-request-date span{
  margin-top:3px;
  color:#77766f;
  font-size:9px;
}

.booking-request-info h3{
  margin:0;
  font-size:15px;
}

.booking-request-info p{
  margin:3px 0;
  font-size:11px;
}

.booking-request-info small{
  color:#9b7838;
  font-weight:800;
}

.booking-request-actions{
  display:flex;
  gap:6px;
}

.booking-request-actions button{
  padding:8px 10px;
  border:0;
  border-radius:9px;
  font-size:9px;
  font-weight:800;
  cursor:pointer;
}

.booking-request-actions .confirm{
  background:#174c43;
  color:white;
}

.booking-request-actions .reject{
  background:#f2e7e7;
  color:#9f4c55;
}

.confirmed-booking-list article{
  display:grid;
  grid-template-columns:1.1fr 1fr auto auto;
  align-items:center;
  gap:10px;
  padding:13px 0;
  border-bottom:1px solid #eee9e0;
}

.confirmed-booking-list article > div{
  display:flex;
  flex-direction:column;
}

.confirmed-booking-list strong{
  font-size:11px;
}

.confirmed-booking-list span{
  margin-top:2px;
  font-size:9px;
}

.confirmed-badge{
  padding:5px 7px;
  border-radius:999px;
  background:#e5f2e8;
  color:#39754f;
  font-weight:800;
}

.confirmed-booking-list button{
  padding:6px 8px;
  border:0;
  border-radius:8px;
  background:#f2eeee;
  color:#925159;
  font-size:8px;
  font-weight:800;
  cursor:pointer;
}

.booking-empty{
  padding:45px 20px;
  border:1px dashed #ddd7cc;
  border-radius:16px;
  color:#88847a;
  text-align:center;
  font-size:11px;
}

@media(max-width:850px){
  .booking-dashboard-grid{
    grid-template-columns:1fr;
  }

  .booking-dashboard-header{
    align-items:flex-start;
    flex-direction:column;
  }

  .booking-request-card{
    grid-template-columns:1fr;
  }
}


/* ===== booking time picker ===== */

.booking-time-section{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.booking-time-section > strong{
  font-size:10px;
}

.booking-time-section > small{
  color:#88837b;
}

.booking-times{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
}

.booking-times button{
  min-height:43px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid #ddd8ce;
  border-radius:10px;
  background:#faf8f3;
  color:#173f3b;
  font-weight:800;
  cursor:pointer;
}

.booking-times button.selected{
  border-color:#174c43;
  background:#174c43;
  color:white;
}

.booking-times button.busy{
  background:#f1eded;
  color:#a08f91;
  cursor:not-allowed;
}

.booking-times button small{
  font-size:7px;
  font-weight:700;
}

.calendar-grid button{
  position:relative;
}

.calendar-grid button:disabled{
  opacity:.25;
  cursor:not-allowed;
}

.calendar-busy-dot{
  width:5px;
  height:5px;
  position:absolute;
  right:4px;
  bottom:4px;
  border-radius:50%;
  background:#cf5360;
}


/* ===== Salon booking dashboard ===== */

.booking-dashboard{
  min-height:100vh;
  padding:32px;
  box-sizing:border-box;
  background:#f6f3ea;
  color:#173f3b;
}

.booking-dashboard-header{
  width:min(1180px,100%);
  margin:auto;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
}

.booking-dashboard-header a{
  display:block;
  margin-bottom:22px;
  color:#174c43;
  text-decoration:none;
  font-size:11px;
  font-weight:800;
}

.booking-dashboard-header > div:first-child > span{
  color:#b58a3e;
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
}

.booking-dashboard-header h1{
  margin:5px 0 2px;
  font-size:38px;
}

.booking-dashboard-header p{
  margin:0;
  color:#77756e;
}

.booking-dashboard-stats{
  display:flex;
  gap:9px;
}

.booking-dashboard-stats > div{
  min-width:90px;
  padding:14px;
  display:flex;
  flex-direction:column;
  border:1px solid #e3ded3;
  border-radius:16px;
  background:white;
}

.booking-dashboard-stats strong{
  font-size:25px;
}

.booking-dashboard-stats span{
  color:#7b7a73;
  font-size:9px;
}

.booking-dashboard-grid{
  width:min(1180px,100%);
  margin:24px auto 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.booking-dashboard-panel{
  min-height:500px;
  padding:22px;
  border:1px solid #e4dfd4;
  border-radius:24px;
  background:white;
  box-shadow:0 16px 45px rgba(26,46,40,.06);
}

.dashboard-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:18px;
}

.dashboard-panel-head small{
  color:#b58a3e;
  font-size:8px;
  font-weight:900;
  letter-spacing:.12em;
}

.dashboard-panel-head h2{
  margin:4px 0 0;
}

.dashboard-panel-head > span{
  min-width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#f2eee5;
  font-size:10px;
  font-weight:900;
}

.booking-request-list,
.confirmed-booking-list{
  display:flex;
  flex-direction:column;
  gap:9px;
}

.booking-request-card{
  display:grid;
  grid-template-columns:100px 1fr auto;
  gap:14px;
  align-items:center;
  padding:14px;
  border:1px solid #ebe6dd;
  border-radius:15px;
  background:#faf8f3;
}

.booking-request-date{
  display:flex;
  flex-direction:column;
}

.booking-request-date strong{
  font-size:20px;
}

.booking-request-date span{
  margin-top:3px;
  color:#77766f;
  font-size:9px;
}

.booking-request-info h3{
  margin:0;
  font-size:15px;
}

.booking-request-info p{
  margin:3px 0;
  font-size:11px;
}

.booking-request-info small{
  color:#9b7838;
  font-weight:800;
}

.booking-request-actions{
  display:flex;
  gap:6px;
}

.booking-request-actions button{
  padding:8px 10px;
  border:0;
  border-radius:9px;
  font-size:9px;
  font-weight:800;
  cursor:pointer;
}

.booking-request-actions .confirm{
  background:#174c43;
  color:white;
}

.booking-request-actions .reject{
  background:#f2e7e7;
  color:#9f4c55;
}

.confirmed-booking-list article{
  display:grid;
  grid-template-columns:1.1fr 1fr auto auto;
  align-items:center;
  gap:10px;
  padding:13px 0;
  border-bottom:1px solid #eee9e0;
}

.confirmed-booking-list article > div{
  display:flex;
  flex-direction:column;
}

.confirmed-booking-list strong{
  font-size:11px;
}

.confirmed-booking-list span{
  margin-top:2px;
  font-size:9px;
}

.confirmed-badge{
  padding:5px 7px;
  border-radius:999px;
  background:#e5f2e8;
  color:#39754f;
  font-weight:800;
}

.confirmed-booking-list button{
  padding:6px 8px;
  border:0;
  border-radius:8px;
  background:#f2eeee;
  color:#925159;
  font-size:8px;
  font-weight:800;
  cursor:pointer;
}

.booking-empty{
  padding:45px 20px;
  border:1px dashed #ddd7cc;
  border-radius:16px;
  color:#88847a;
  text-align:center;
  font-size:11px;
}

@media(max-width:850px){
  .booking-dashboard-grid{
    grid-template-columns:1fr;
  }

  .booking-dashboard-header{
    align-items:flex-start;
    flex-direction:column;
  }

  .booking-request-card{
    grid-template-columns:1fr;
  }
}


/* ===== PickMe WhatsApp booking confirmation ===== */

.confirm-page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  box-sizing:border-box;
  background:#f6f3ea;
  color:#173f3b;
}

.confirm-card{
  width:min(560px,94vw);
  padding:34px;
  box-sizing:border-box;
  border:1px solid #e3ddd1;
  border-radius:28px;
  background:white;
  box-shadow:0 25px 80px rgba(25,45,40,.12);
}

.confirm-brand{
  margin-bottom:28px;
  font-size:28px;
  font-weight:900;
}

.confirm-eyebrow{
  color:#b58a3e;
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
}

.confirm-card h1{
  margin:6px 0 4px;
  font-size:32px;
}

.confirm-salon{
  margin:0;
  color:#757870;
}

.confirm-details{
  margin-top:25px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}

.confirm-details > div{
  min-height:64px;
  padding:12px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-radius:13px;
  background:#f7f4ec;
}

.confirm-details small{
  color:#9b7b43;
  font-size:8px;
  font-weight:900;
  letter-spacing:.08em;
}

.confirm-details strong{
  margin-top:4px;
  font-size:12px;
  line-height:1.3;
}

.confirm-actions{
  margin-top:22px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}

.confirm-actions button{
  min-height:46px;
  border:0;
  border-radius:12px;
  font-weight:900;
  cursor:pointer;
}

.confirm-reject{
  background:#f2e7e7;
  color:#9c4e56;
}

.confirm-accept{
  background:#174c43;
  color:white;
}

.confirm-result{
  margin-top:22px;
  padding:15px;
  border-radius:13px;
  font-size:11px;
  font-weight:800;
  line-height:1.4;
}

.confirm-result.success{
  background:#e8f4eb;
  color:#34744c;
}

.confirm-result.rejected{
  background:#f5e8e8;
  color:#995058;
}

.confirm-back{
  margin-top:18px;
  display:block;
  color:#174c43;
  text-align:center;
  text-decoration:none;
  font-size:10px;
  font-weight:800;
}

@media(max-width:550px){
  .confirm-details{
    grid-template-columns:1fr;
  }
}

/* ===== Salon-level Hausbesuch feature ===== */

.salon-feature-row{
  margin-top:9px;
  display:flex;
  align-items:center;
  gap:7px;
}

.home-service-badge{
  display:inline-flex;
  align-items:center;
  padding:6px 9px;
  border-radius:999px;
  background:#fff1d4;
  color:#8c6725;
  font-size:10px;
  font-weight:800;
}


/* ===== Salon-level Hausbesuch feature ===== */

.salon-feature-row{
  margin-top:9px;
  display:flex;
  align-items:center;
  gap:7px;
}

.home-service-badge{
  display:inline-flex;
  align-items:center;
  padding:6px 9px;
  border-radius:999px;
  background:#fff1d4;
  color:#8c6725;
  font-size:10px;
  font-weight:800;
}


/* =======================================================
   PICKME SALON GALLERY
   ======================================================= */

.salon-gallery{
  position:relative;
  padding:0 !important;
  display:block !important;
  overflow:hidden;
  background:#d8d0bf;
}

.salon-gallery-main{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:
    transform .35s ease;
}

.salon-gallery:hover
.salon-gallery-main{
  transform:scale(1.015);
}


.salon-gallery-empty{
  display:grid !important;
  place-items:center;
  background:
    linear-gradient(
      145deg,
      #cfc5ad,
      #98988f
    );
}

.salon-gallery-empty > div{
  display:flex;
  flex-direction:column;
  align-items:center;
  color:white;
}

.salon-gallery-empty strong{
  font-size:20px;
}

.salon-gallery-empty span{
  margin-top:4px;
  font-size:9px;
  opacity:.7;
}


.salon-gallery-thumbs{
  position:absolute;
  left:10px;
  bottom:10px;

  display:flex;
  gap:5px;

  padding:5px;

  border-radius:12px;

  background:
    rgba(255,255,255,.88);

  backdrop-filter:blur(10px);
}


.salon-gallery-thumbs button{
  width:35px;
  height:35px;

  padding:0;

  overflow:hidden;

  border:2px solid transparent;
  border-radius:8px;

  background:#eee;

  cursor:pointer;
}


.salon-gallery-thumbs button.active{
  border-color:#b58a3e;
}


.salon-gallery-thumbs img{
  width:100%;
  height:100%;
  object-fit:cover;
}


.salon-gallery-all{
  position:absolute;
  right:10px;
  bottom:10px;

  padding:8px 10px;

  border:0;
  border-radius:10px;

  background:
    rgba(20,55,51,.88);

  color:white;

  font-size:9px;
  font-weight:800;

  backdrop-filter:blur(10px);

  cursor:pointer;
}


/* ===== Full photo gallery ===== */

.salon-gallery-modal{
  width:min(
    960px,
    94vw
  );

  max-height:86vh;

  overflow:hidden;

  border-radius:26px;

  background:white;

  box-shadow:
    0 35px 110px
    rgba(0,0,0,.28);
}


.salon-gallery-modal-head{
  padding:18px 22px;

  display:flex;
  justify-content:space-between;
  align-items:flex-start;

  border-bottom:
    1px solid #ebe5da;
}


.salon-gallery-modal-head small{
  color:#b58a3e;

  font-size:8px;
  font-weight:900;
  letter-spacing:.14em;
}


.salon-gallery-modal-head h2{
  margin:3px 0 0;
}


.salon-gallery-modal-head button{
  width:34px;
  height:34px;

  padding:0;

  border:0;
  border-radius:50%;

  background:#f1eee7;

  color:#173f3b;

  font-size:22px;

  cursor:pointer;
}


.salon-gallery-grid{
  max-height:
    calc(86vh - 76px);

  padding:14px;

  overflow:auto;

  display:grid;

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

  gap:10px;
}


.salon-gallery-grid button{
  height:220px;

  padding:0;

  overflow:hidden;

  border:0;
  border-radius:15px;

  background:#eee;

  cursor:pointer;
}


.salon-gallery-grid img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;

  transition:
    transform .2s ease;
}


.salon-gallery-grid button:hover img{
  transform:scale(1.03);
}


@media(max-width:700px){

  .salon-gallery-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .salon-gallery-grid button{
    height:160px;
  }
}


/* ===== Demo gallery visual polish ===== */

.salon-gallery{
  position:relative;
  padding:0 !important;
  overflow:hidden;
  background:#d8cfbd;
}

.salon-gallery-main{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.salon-gallery-thumbs{
  position:absolute;
  left:10px;
  bottom:10px;
  display:flex;
  gap:5px;
  padding:5px;
  border-radius:12px;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(10px);
}

.salon-gallery-thumbs button{
  width:38px;
  height:38px;
  padding:0;
  overflow:hidden;
  border:2px solid transparent;
  border-radius:8px;
  background:white;
  cursor:pointer;
}

.salon-gallery-thumbs button.active{
  border-color:#b58a3e;
}

.salon-gallery-thumbs img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.salon-gallery-all{
  position:absolute;
  right:10px;
  bottom:10px;
  padding:8px 10px;
  border:0;
  border-radius:10px;
  background:rgba(23,63,59,.9);
  color:white;
  font-size:9px;
  font-weight:900;
  cursor:pointer;
}

.salon-gallery-modal{
  width:min(900px,94vw);
  max-height:84vh;
  overflow:hidden;
  border-radius:25px;
  background:white;
}

.salon-gallery-modal-head{
  padding:17px 20px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  border-bottom:1px solid #ebe6dd;
}

.salon-gallery-modal-head small{
  color:#b58a3e;
  font-size:8px;
  font-weight:900;
  letter-spacing:.13em;
}

.salon-gallery-modal-head h2{
  margin:3px 0 0;
}

.salon-gallery-modal-head button{
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:#f1eee7;
  font-size:21px;
  cursor:pointer;
}

.salon-gallery-grid{
  max-height:calc(84vh - 70px);
  padding:12px;
  overflow:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
}

.salon-gallery-grid button{
  height:190px;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:14px;
  cursor:pointer;
}

.salon-gallery-grid img{
  width:100%;
  height:100%;
  object-fit:cover;
}


/* ===== Demo gallery visual polish ===== */

.salon-gallery{
  position:relative;
  padding:0 !important;
  overflow:hidden;
  background:#d8cfbd;
}

.salon-gallery-main{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.salon-gallery-thumbs{
  position:absolute;
  left:10px;
  bottom:10px;
  display:flex;
  gap:5px;
  padding:5px;
  border-radius:12px;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(10px);
}

.salon-gallery-thumbs button{
  width:38px;
  height:38px;
  padding:0;
  overflow:hidden;
  border:2px solid transparent;
  border-radius:8px;
  background:white;
  cursor:pointer;
}

.salon-gallery-thumbs button.active{
  border-color:#b58a3e;
}

.salon-gallery-thumbs img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.salon-gallery-all{
  position:absolute;
  right:10px;
  bottom:10px;
  padding:8px 10px;
  border:0;
  border-radius:10px;
  background:rgba(23,63,59,.9);
  color:white;
  font-size:9px;
  font-weight:900;
  cursor:pointer;
}

.salon-gallery-modal{
  width:min(900px,94vw);
  max-height:84vh;
  overflow:hidden;
  border-radius:25px;
  background:white;
}

.salon-gallery-modal-head{
  padding:17px 20px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  border-bottom:1px solid #ebe6dd;
}

.salon-gallery-modal-head small{
  color:#b58a3e;
  font-size:8px;
  font-weight:900;
  letter-spacing:.13em;
}

.salon-gallery-modal-head h2{
  margin:3px 0 0;
}

.salon-gallery-modal-head button{
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:#f1eee7;
  font-size:21px;
  cursor:pointer;
}

.salon-gallery-grid{
  max-height:calc(84vh - 70px);
  padding:12px;
  overflow:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
}

.salon-gallery-grid button{
  height:190px;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:14px;
  cursor:pointer;
}

.salon-gallery-grid img{
  width:100%;
  height:100%;
  object-fit:cover;
}


/* ===== Salon Maria living demo staff ===== */

.worker-demo-photo{
  height:72px !important;
  background:#e8e1d5 !important;
}

.worker-demo-photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center 25%;
}

.live-staff-card{
  overflow:hidden;
}

.worker-profile-photo{
  overflow:hidden;
  background:#e8e1d5;
}

.worker-profile-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 20%;
}


/* ===== More photographic Salon Maria gallery ===== */

.salon-gallery{
  background:#d8d0c0 !important;
}

.salon-gallery-main{
  filter:
    saturate(.94)
    contrast(1.02);
}

.salon-gallery::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    linear-gradient(
      to top,
      rgba(18,45,40,.16),
      transparent 35%
    );
}

.salon-gallery-thumbs,
.salon-gallery-all{
  z-index:2;
}



/* PickMe public footer safety */
.pm-public-footer {
  font-family: inherit;
}

/* Micro-Pulse for Live Telemetry */
@keyframes pmLivePulse {
  0% {
    transform: scale(0.96);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 7px rgba(34, 197, 94, 0);
  }
  100% {
    transform: scale(0.96);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

@keyframes pmFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pmSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* =========================================================
   PICKME UNIFIED SHELL STYLES (HEADER & FOOTER)
   ========================================================= */

/* ─── UNIFIED HEADER ─────────────────────────────────────────────────── */
.pm-shell-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #ffffff;
  border-bottom: 1px solid #e8edf4;
  width: 100%;
}

.pm-shell-header-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-sizing: border-box;
  min-height: 56px;
}

.pm-shell-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.pm-shell-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #0f172a;
  padding: 6px 11px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.pm-shell-back-btn:hover {
  background: #eff6ff;
  border-color: #93c5fd;
}

@media (max-width: 480px) {
  .pm-shell-back-btn {
    padding: 6px 8px;
  }
  .pm-shell-back-text {
    display: none;
  }
}

.pm-shell-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
}

.pm-shell-header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

/* Desktop nav links (>=768px) */
.pm-shell-nav-desktop {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-right: 4px;
}

.pm-shell-nav-desktop a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #334155;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  padding: 6px 8px;
  border-radius: 8px;
  transition: all 0.15s ease;
}

.pm-shell-nav-desktop a:hover {
  color: #0f172a;
  background: #f8fafc;
}

/* Hamburger button (<768px) */
.pm-shell-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #0f172a;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.15s;
}

.pm-shell-hamburger:hover {
  background: #f8fafc;
}

/* Modern Compact Floating Glass Popover */
.pm-shell-mobile-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 12px;
  width: 220px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 16px 40px -6px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.04);
  padding: 8px;
  z-index: 9999;
  animation: pmPopoverIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pmPopoverIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.pm-popover-notch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px 8px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 6px;
}

.pm-popover-notch-header span {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #94a3b8;
}

.pm-popover-notch-header button {
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  padding: 2px;
  display: grid;
  place-items: center;
}

.pm-popover-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pm-popover-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 10px;
  color: #0f172a !important;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 700;
  transition: all 0.15s ease;
  letter-spacing: -0.01em;
}

.pm-popover-nav a:hover,
.pm-popover-nav a:active {
  background: #f8fafc;
  color: #4b5fff !important;
}

.pm-popover-tag {
  font-size: 9px;
  font-weight: 900;
  color: #4b5fff;
  background: rgba(75, 95, 255, 0.1);
  padding: 2px 6px;
  border-radius: 5px;
  margin-left: auto;
}

.pm-popover-login {
  border-top: 1px solid #f1f5f9;
  margin-top: 4px;
  padding-top: 8px !important;
}

.pm-shell-header.has-back .pm-shell-nav-desktop {
  display: none;
}

.pm-shell-header.has-back .pm-shell-hamburger {
  display: flex;
}

/* Responsive query (<=767px) */
@media (max-width: 767px) {
  .pm-shell-header {
    padding-top: env(safe-area-inset-top, 0px);
  }
  .pm-shell-header-inner {
    padding: 8px 14px;
    min-height: 52px;
  }
  .pm-shell-nav-desktop {
    display: none;
  }
  .pm-shell-hamburger {
    display: flex;
  }
}

/* ─── UNIFIED FOOTER ─────────────────────────────────────────────────── */
.pm-shell-footer {
  margin-top: auto;
  border-top: 1px solid #e8edf4;
  background: #ffffff;
  padding: 20px 16px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.pm-shell-footer-inner {
  max-width: 540px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.pm-shell-footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pm-shell-footer-link {
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease;
}

.pm-shell-footer-link:hover {
  color: #2563eb;
  text-decoration: underline;
}

.pm-shell-footer-sep {
  color: #b0b8ac;
  font-size: 0.82rem;
}

.pm-shell-footer-copy {
  font-size: 0.76rem;
  color: #8c9688;
}
/* ==========================================================================
   PICKME HOMEPAGE — MODERN RESPONSIVE DESIGN SYSTEM
   ========================================================================== */

.luxury-card {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 
    0 1px 3px rgba(15, 23, 42, 0.03),
    0 10px 30px -5px rgba(82, 108, 246, 0.06);
}

.luxury-card-interactive {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.luxury-card-interactive:hover {
  transform: translateY(-2px);
  border-color: rgba(82, 108, 246, 0.3);
  box-shadow: 
    0 16px 36px -6px rgba(82, 108, 246, 0.12),
    0 0 0 1px rgba(82, 108, 246, 0.15);
}

.sound-bar {
  animation: soundWave 1.2s ease-in-out infinite alternate;
}
@keyframes soundWave {
  0% { height: 4px; }
  100% { height: 16px; }
}

:root {
  --pm-font-serif: var(--pm-font-display, "Fraunces", Georgia, serif);
  --pm-font-sans: var(--pm-font-ui, Inter, system-ui, sans-serif);
  --pm-ink: #101116;
  --pm-muted: #747b8b;
  --pm-surface: #fffdf9;
  --pm-bg: #f7f4ec;
  --pm-bg-soft: #f3efe6;
  --pm-border: #d9dbe3;
  --pm-accent-dark: #3a4ae8;
  --pm-accent-soft: rgba(75, 95, 255, 0.12);
  --pm-accent-border: #d9dbe3;
  --pm-free-text: #4b5fff;
  --pm-free-bg: #e7e8fa;
  --pm-free-border: #c9ccf5;
  --pm-busy-text: #d94b54;
  --pm-busy-bg: #fff1f2;
  --pm-busy-border: #f8c9cc;
}

/* ─── Root & Container ─────────────────────────────────────────────────── */
.pm-catalog {
  min-height: 100vh;
  height: auto;
  display: flex;
  flex-direction: column;
  background: transparent;
  color: var(--pm-ink, #0f172a);
  font-family: var(--pm-font-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  overflow-x: hidden;
  overflow-y: visible;
}


/* ─── Header ───────────────────────────────────────────────────────────── */
.pm-catalog-header {
  height: 56px;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(247, 244, 236, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--pm-border, #e4ded4);
  position: sticky;
  top: 0;
  z-index: 200;
  overflow: visible;
  width: 100%;
  box-sizing: border-box;
}

.pm-catalog-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}

/* Desktop nav — visible ≥768px */
.pm-catalog-nav-desktop {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pm-catalog-nav-desktop a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  color: #454d49;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.15s ease;
}

.pm-catalog-nav-desktop a:hover {
  color: var(--pm-ink, #303735);
  background: var(--pm-accent-soft, rgba(18, 63, 57, 0.08));
}

.pm-catalog-nav-desktop a.active {
  color: var(--pm-ink, #303735);
  font-weight: 700;
}

/* Mobile header actions (Language + Hamburger) */
.pm-catalog-mobile-actions {
  display: none;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Hamburger button — hidden on desktop */
.pm-catalog-hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #ffffff;
  border: 1px solid var(--pm-border, #e4ded4);
  border-radius: 8px;
  color: var(--pm-ink, #303735);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.15s;
}

.pm-catalog-hamburger:hover {
  background: var(--pm-accent-soft, rgba(18, 63, 57, 0.08));
}

/* Mobile overlay menu (шторка) */
.pm-catalog-mobile-menu {
  display: none;
  position: absolute;
  top: 56px;
  left: 0;
  right: 0;
  width: 100%;
  overflow-x: hidden;
  background: #ffffff;
  border-bottom: 2px solid var(--pm-border, #e4ded4);
  box-shadow: 0 10px 30px rgba(18, 63, 57, 0.12);
  z-index: 199;
  padding: 10px 14px 16px;
  box-sizing: border-box;
}

.pm-catalog-mobile-menu nav {
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 6px;
  overflow-x: hidden;
}

.pm-catalog-mobile-menu nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  min-height: 48px;
  color: #123f39 !important;
  text-decoration: none;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  border-radius: 10px;
  background: var(--pm-bg-soft, #faf8f4);
  border: 1px solid var(--pm-border, #e4ded4);
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.pm-catalog-mobile-menu nav a:active,
.pm-catalog-mobile-menu nav a:hover {
  background: var(--pm-accent-soft, rgba(18, 63, 57, 0.08));
  border-color: #123f39;
  color: #123f39 !important;
}

/* --- Mobile responsive (<=767px) --- */
@media (max-width: 767px) {
  .pm-catalog-nav-desktop {
    display: none;
  }

  .pm-catalog-mobile-actions {
    display: flex;
  }

  .pm-catalog-mobile-menu {
    display: block;
  }

  .pm-catalog-main {
    padding: 12px 12px 40px !important;
  }
}

/* ─── Main Content ─────────────────────────────────────────────────────── */
.pm-catalog-main {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 18px 40px 64px;
  box-sizing: border-box;
  flex: 1;
  min-width: 0;
  overflow-x: hidden;
}

.pm-radar-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "copy"
    "disc"
    "place"
    "actions"
    "note";
  gap: 16px;
  align-items: center;
  margin: 0 0 22px;
  padding: 36px 28px;
  background:
    repeating-linear-gradient(90deg, rgba(15, 23, 42, 0.03) 0 1px, transparent 1px 32px),
    radial-gradient(ellipse at 82% 28%, rgba(147, 197, 253, 0.38), transparent 48%),
    radial-gradient(ellipse at 92% 8%, rgba(196, 181, 253, 0.28), transparent 42%),
    #fbfcfe;
  border: 1px solid #e8edf4;
  border-radius: 32px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.04);
  overflow: visible;
}

.pm-radar-hero-copy { grid-area: copy; }
.pm-radar-disc { grid-area: disc; }
.pm-radar-place { grid-area: place; }
.pm-radar-actions { grid-area: actions; }
.pm-radar-demo-note { grid-area: note; }

.pm-radar-spark {
  position: absolute;
  top: 28px;
  right: 46%;
  color: #4b5fff;
  opacity: 0;
  pointer-events: none;
  animation: pmSpark 5.5s ease-in-out infinite;
}

.pm-radar-spark-2 {
  top: 58%;
  left: 22%;
  right: auto;
  color: #f46870;
  animation-delay: 2.4s;
}

@keyframes pmSpark {
  0%, 72%, 100% { opacity: 0; transform: scale(0.7) rotate(-8deg); }
  78% { opacity: 0.85; transform: scale(1) rotate(0deg); }
  86% { opacity: 0; transform: scale(0.8) rotate(10deg); }
}

@media (min-width: 960px) {
  .pm-radar-hero {
    grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
    grid-template-areas:
      "copy disc"
      "place disc"
      "actions disc"
      "note disc";
    padding: 28px 40px 24px;
    min-height: 0;
    align-items: start;
    gap: 12px 24px;
  }

  .pm-radar-disc {
    justify-self: end;
  }
}

.pm-radar-kicker {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #4b5fff;
  text-transform: uppercase;
}

.pm-radar-title {
  margin: 0 0 12px;
  font-family: var(--pm-font-display, "Fraunces", Georgia, serif);
  font-size: clamp(34px, 3.8vw, 68px);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: #101116;
}

.pm-radar-sub {
  margin: 0 0 12px;
  max-width: 440px;
  font-size: 16.5px;
  line-height: 1.45;
  color: #64748b;
}

.pm-radar-place {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 5px 8px 5px 5px;
  border: 1px solid #e2e8f0;
  border-left: 3px solid #4b5fff;
  border-radius: 999px;
  background: #ffffff;
}

.pm-radar-place p {
  margin: 0;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.pm-radar-place strong {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pm-radar-place small {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #64748b;
  white-space: nowrap;
}

.pm-radar-pin {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0f172a;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.pm-radar-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #4b5fff;
  cursor: pointer;
  flex-shrink: 0;
}

.pm-radar-demo-note {
  margin: 0;
  max-width: 440px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #94a3b8;
}

.pm-radar-actions-label {
  margin: 0 0 8px;
  font-family: var(--pm-font-display, "Fraunces", Georgia, serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #101116;
}

.pm-radar-console {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  max-width: 100%;
  background: #fffdf9;
  border: 1px solid #d9dbe3;
  border-radius: 16px;
  overflow: hidden;
}

.pm-radar-console-demo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 8px 16px;
  background: rgba(75, 95, 255, 0.1);
  color: #101116;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.pm-radar-console-demo:hover {
  background: rgba(75, 95, 255, 0.18);
}

.pm-radar-console-demo-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pm-radar-console-demo-copy strong {
  font-family: var(--pm-font-display, "Fraunces", Georgia, serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.pm-radar-console-demo-copy small {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--pm-font-ui, Inter, sans-serif);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4b5fff;
}

.pm-radar-console-tick {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f46870;
  box-shadow: 0 0 0 3px rgba(244, 104, 112, 0.22);
  flex-shrink: 0;
}

.pm-radar-console-keys {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  min-width: 0;
}

.pm-radar-console-keys a,
.pm-radar-console-keys button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 64px;
  min-height: 52px;
  padding: 6px 10px;
  border: 0;
  border-right: 1px solid #d9dbe3;
  background: transparent;
  color: #101116;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

.pm-radar-console-keys a:last-child,
.pm-radar-console-keys button:last-child {
  border-right: 0;
}

.pm-radar-console-keys a:hover,
.pm-radar-console-keys button:hover {
  background: rgba(75, 95, 255, 0.08);
  color: #4b5fff;
}

.pm-radar-console-keys .is-melisa {
  min-width: 92px;
  color: #4b5fff;
  white-space: normal;
  text-align: center;
  line-height: 1.15;
}

.pm-radar-console-hint {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.35;
  color: #747b8b;
}

.pm-home-stage {
  display: block;
  position: relative;
  z-index: 3;
  margin: 0 0 22px;
}

.pm-home-trial {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fffdf9;
  border: 1px solid #d9dbe3;
  color: #101116;
}

.pm-home-trial small {
  display: inline;
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4b5fff;
}

.pm-home-trial h2 {
  margin: 0;
  font-family: var(--pm-font-display, "Fraunces", Georgia, serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.pm-home-trial p {
  margin: 0;
  flex: 1 1 220px;
  font-size: 13px;
  line-height: 1.4;
  color: #747b8b;
}

.pm-home-stage-lead {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #747b8b;
}

.pm-home-stage-plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.pm-home-plan {
  min-height: 0;
  padding: 14px 14px 16px;
  background: #fffdf9;
  border: 1px solid #d9dbe3;
  border-radius: 16px;
}

.pm-home-plan small {
  display: block;
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #4b5fff;
}

.pm-home-plan strong {
  display: block;
  margin: 0 0 8px;
  font-family: var(--pm-font-display, "Fraunces", Georgia, serif);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #101116;
}

.pm-home-plan p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #747b8b;
}

.pm-home-trial,
.pm-home-plan {
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 1;
  text-decoration: none;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(75, 95, 255, 0.2);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.pm-home-trial:hover,
.pm-home-plan:hover {
  border-color: #4b5fff;
  background: #fffdf9;
}

.pm-home-trial:active,
.pm-home-plan:active {
  border-color: #4b5fff;
  box-shadow: 0 0 0 1px #4b5fff;
}

.pm-home-trial.is-on,
.pm-home-plan.is-on {
  border-color: #4b5fff;
  box-shadow: 0 0 0 1px #4b5fff;
}

.pm-plan-stub {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(16, 17, 22, 0.45);
}

.pm-plan-stub-card {
  width: min(420px, 100%);
  padding: 22px 20px 18px;
  border-radius: 20px;
  background: #fffdf9;
  border: 1px solid #d9dbe3;
  box-shadow: 0 18px 50px rgba(16, 17, 22, 0.16);
}

.pm-plan-stub-kicker {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4b5fff;
}

.pm-plan-stub-card h2 {
  margin: 0 0 10px;
  font-family: var(--pm-font-display, "Fraunces", Georgia, serif);
  font-size: 22px;
  font-weight: 600;
  color: #101116;
}

.pm-plan-stub-card p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.45;
  color: #747b8b;
}

.pm-plan-stub-close {
  width: 100%;
  min-height: 44px;
  border: 1px solid #4b5fff;
  border-radius: 12px;
  background: #fffdf9;
  color: #101116;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

@media (min-width: 640px) {
  .pm-home-stage-plans {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .pm-home-stage-plans {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.pm-radar-disc {
  position: relative;
  width: min(100%, 360px);
  margin: 0 auto;
  aspect-ratio: 1;
}

.pm-radar-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pm-radar-core {
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #f8fafc, #eef2f6 72%);
  box-shadow: inset 0 8px 18px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 22px;
  text-align: center;
  box-sizing: border-box;
}

.pm-radar-core strong {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: #0f172a;
}

.pm-radar-idle-mark {
  position: relative;
  width: 34px;
  height: 22px;
  margin-bottom: 2px;
}

.pm-radar-idle-mark i {
  position: absolute;
  width: 20px;
  height: 12px;
  border-radius: 100% 10% 100% 10%;
  background: linear-gradient(135deg, #93c5fd, #4b5fff);
  opacity: 0.85;
}

.pm-radar-idle-mark i:first-child { left: 0; top: 6px; }
.pm-radar-idle-mark i:last-child { left: 10px; top: 0; }

.pm-radar-core p {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  color: #64748b;
  max-width: 168px;
}

.pm-radar-face {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ffffff;
  box-shadow: 0 6px 16px rgba(75, 95, 255, 0.28);
}

.pm-radar-face-fallback {
  display: grid;
  place-items: center;
  background: #4b5fff;
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
}

.pm-radar-match {
  position: absolute;
  right: 6px;
  bottom: 28px;
  padding: 8px 11px;
  border-radius: 10px;
  background: #4b5fff;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(75, 95, 255, 0.35);
  animation: pmMatchFlash 2.4s ease-in-out infinite;
}

.pm-radar-spin {
  transform-origin: 200px 200px;
  animation: pmRadarSpin 16s linear infinite;
}

.pm-radar-sweep {
  transform-origin: 200px 200px;
  animation: pmRadarSpin 4.8s linear infinite;
}

.pm-radar-blip {
  fill: #94a3b8;
}

.pm-radar-blip.is-live {
  fill: #4b5fff;
  animation: pmRadarPulse 1.8s ease-in-out infinite;
}

.pm-radar-disc.has-match .pm-radar-core strong {
  color: #4b5fff;
}

@keyframes pmRadarSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pmRadarPulse {
  0%, 100% { opacity: 0.5; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.15); }
}

@keyframes pmMatchFlash {
  0%, 100% { transform: translateY(0); box-shadow: 0 8px 20px rgba(75, 95, 255, 0.28); }
  50% { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(75, 95, 255, 0.45); }
}

@media (prefers-reduced-motion: reduce) {
  .pm-radar-spin,
  .pm-radar-sweep,
  .pm-radar-blip.is-live,
  .pm-radar-match,
  .pm-radar-spark {
    animation: none !important;
  }
}

.pm-radar-badge {
  position: absolute;
  right: 6px;
  bottom: 28px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #0f172a;
}

@media (max-width: 767px) {
  .pm-catalog-main {
    padding: 12px 14px 56px !important;
  }

  .pm-radar-hero {
    padding: 16px 14px 18px;
    border-radius: 22px;
    gap: 10px;
    overflow: hidden;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "copy"
      "disc"
      "place"
      "actions"
      "note";
  }

  .pm-radar-hero-copy,
  .pm-radar-disc,
  .pm-radar-place,
  .pm-radar-actions,
  .pm-radar-demo-note {
    min-width: 0;
    max-width: 100%;
  }

  .pm-radar-title {
    font-size: 28px;
    margin: 0 0 6px;
  }

  .pm-radar-kicker {
    margin: 0 0 6px;
  }

  .pm-radar-sub {
    margin: 0;
    font-size: 13.5px;
  }

  .pm-radar-disc {
    width: min(64vw, 220px);
    max-width: 220px;
    justify-self: center;
    padding-bottom: 6px;
  }

  .pm-radar-core {
    inset: 20%;
    padding: 10px 12px;
    gap: 6px;
    overflow: hidden;
  }

  .pm-radar-core p {
    display: none;
  }

  .pm-radar-match {
    right: 6px;
    bottom: 10px;
    left: auto;
    transform: none;
    animation: none;
    padding: 4px 7px;
    font-size: 8px;
    letter-spacing: 0.08em;
  }

  .pm-radar-place {
    justify-self: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .pm-radar-actions-label {
    font-size: 16px;
  }

  .pm-radar-console {
    flex-direction: column;
    width: 100%;
  }

  .pm-radar-console-demo {
    min-height: 48px;
    width: 100%;
    box-sizing: border-box;
  }

  .pm-radar-console-demo-copy strong {
    white-space: normal;
  }

  .pm-radar-console-keys {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: none;
    width: 100%;
  }

  .pm-radar-console-keys a,
  .pm-radar-console-keys button {
    min-width: 0;
    width: 100%;
    border-right: 1px solid #d9dbe3;
    border-bottom: 1px solid #d9dbe3;
    white-space: normal;
    font-size: 9px;
  }

  .pm-radar-console-keys a:nth-child(even),
  .pm-radar-console-keys button:nth-child(even) {
    border-right: 0;
  }

  .pm-radar-console-keys .is-melisa {
    grid-column: 1 / -1;
    min-width: 0;
    border-right: 0;
    border-bottom: 0;
    flex-direction: row;
    gap: 8px;
  }

  .pm-radar-console-hint {
    overflow-wrap: anywhere;
  }
}

/* ─── 1. Subnav Toggle Row (Salons | Zu Hause) ─────────────────────────── */
.pm-home-subnav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid var(--pm-border, #e4ded4);
  border-radius: 10px;
  margin-bottom: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.02);
  width: 100%;
  box-sizing: border-box;
}

.pm-home-subnav-btn {
  font-size: 14px;
  font-weight: 600;
  color: var(--pm-muted, #777b75);
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 8px;
  transition: all 0.15s ease;
}

.pm-home-subnav-btn.active {
  color: #123f39;
  font-weight: 800;
  background: var(--pm-accent-soft, rgba(18, 63, 57, 0.08));
}

.pm-home-subnav-btn:hover:not(.active) {
  color: var(--pm-ink, #303735);
  background: #f4f0e8;
}

.pm-home-subnav-sep {
  color: #dcd5c9;
  font-weight: 300;
}

/* ─── 2. Top Promo Banner (Luxury Dark Emerald Card) ─── */
.pm-home-promo-banner {
  background: linear-gradient(135deg, #123f39 0%, #0d2b27 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 14px;
  box-shadow: 0 10px 30px -6px rgba(18, 63, 57, 0.22);
  box-sizing: border-box;
  width: 100%;
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .pm-home-promo-banner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    gap: 20px;
  }
}

.pm-home-promo-content {
  flex: 1;
  min-width: 0;
}

.pm-home-promo-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 800;
  color: #e5b94f;
  background: rgba(229, 185, 79, 0.14);
  border: 1px solid rgba(229, 185, 79, 0.28);
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.pm-home-promo-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 6px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.pm-home-promo-desc {
  font-size: 0.82rem;
  color: #b7c7c3;
  margin: 0;
  line-height: 1.45;
}

.pm-home-promo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #ffffff;
  color: #123f39;
  padding: 11px 20px;
  border-radius: 11px;
  font-size: 0.88rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
}

.pm-home-promo-btn:hover {
  background: #f4ede0;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

/* ─── 2b. PickMe Salon OS Pillars (Luxury 3-Card Grid) ─── */
.pm-home-os-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0 0 16px 0;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .pm-home-os-pillars {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.pm-os-pillar {
  background: #ffffff;
  border: 1px solid var(--pm-border, #e4ded4);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(18, 63, 57, 0.03);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  box-sizing: border-box;
}

.pm-os-pillar:hover {
  border-color: #123f39;
  box-shadow: 0 4px 12px rgba(18, 63, 57, 0.08);
  transform: translateY(-1px);
}

.pm-os-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(18, 63, 57, 0.08);
  color: #123f39;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pm-os-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pm-os-text strong {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: #123f39;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pm-os-text span {
  display: block;
  font-size: 11px;
  color: #657260;
  line-height: 1.35;
}

/* ─── 3. Location Bar (Dein Standort + aktualisieren) ──────────────────── */
.pm-catalog-location-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 14px;
  background: #ffffff;
  border: 1px solid var(--pm-border, #e4ded4);
  border-radius: 12px;
  font-size: 13px;
  color: var(--pm-ink, #303735);
  margin-bottom: 12px;
  box-sizing: border-box;
  width: 100%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}


.pm-catalog-location-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-catalog-location-left span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-catalog-location-btn {
  background: var(--pm-accent-soft, rgba(18, 63, 57, 0.08));
  border: 1px solid #e4ded4;
  color: #123f39;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 12px;
  border-radius: 6px;
  white-space: nowrap;
  transition: all 0.15s ease;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.pm-catalog-location-btn:hover {
  background: #123f39;
  color: #ffffff;
  border-color: #123f39;
}

/* ─── Category Filter Pills (Compact horizontal strip) ──────────────────── */
.pm-catalog-categories {
  display: flex;
  justify-content: center;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 8px;
  margin-bottom: 18px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.pm-catalog-categories::-webkit-scrollbar {
  display: none;
}

.pm-category-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.pm-category-pill:hover {
  border-color: #93c5fd;
  background: #f8fbff;
}

.pm-category-pill.is-active {
  background: #4b5fff;
  color: #ffffff;
  border-color: #4b5fff;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28);
}

/* ─── Catalog List & Cards ─────────────────────────────────────────────── */
.pm-catalog-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pm-catalog-nearby {
  margin-top: 28px;
}

.pm-catalog-nearby-head {
  margin: 0 0 12px;
}

.pm-catalog-nearby-head h2 {
  margin: 0 0 6px;
  font-family: Fraunces, Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  color: #101116;
  letter-spacing: -0.02em;
}

.pm-catalog-nearby-head p {
  margin: 0;
  max-width: 52ch;
  font-size: 13px;
  line-height: 1.45;
  color: #747b8b;
}

.pm-catalog-nearby-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pm-catalog-nearby-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 52px;
  padding: 8px 14px;
  background: #fffdf9;
  border: 1px solid #d9dbe3;
  border-radius: 14px;
}

.pm-catalog-nearby-copy {
  min-width: 0;
}

.pm-catalog-nearby-copy h3 {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 700;
  color: #101116;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pm-catalog-nearby-copy p {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 12px;
  color: #747b8b;
}

.pm-catalog-nearby-copy p span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.pm-catalog-nearby-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.pm-catalog-nearby-profile {
  font-size: 12px;
  font-weight: 600;
  color: #747b8b;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.pm-catalog-nearby-profile:hover {
  color: #101116;
}

.pm-catalog-nearby-claim {
  font-size: 12px;
  font-weight: 800;
  color: #4b5fff;
  text-decoration: none;
  min-height: 44px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.pm-catalog-nearby-claim:hover {
  color: #3146e8;
}

.pm-catalog-row {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr) 280px;
  min-height: 210px;
  height: 210px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}

.pm-catalog-row:hover {
  border-color: #93c5fd;
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.08);
}

.pm-catalog-row.is-partner {
  border: 1px solid var(--pm-border, #e4ded4);
}

/* Photo Area */
.pm-catalog-photo {
  position: relative;
  background: #f3efe6;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.pm-catalog-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(247, 244, 236, 0.06), rgba(247, 244, 236, 0.28));
  pointer-events: none;
}

.pm-catalog-photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pm-catalog-photo-placeholder {
  width: 100%;
  height: 100%;
  min-height: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #f4f0e8, #ebe5d8);
  color: var(--pm-muted, #777b75);
}

.pm-catalog-placeholder-logo {
  opacity: 0.65;
}

.pm-catalog-photo-placeholder small {
  font-size: 11px;
  font-weight: 600;
}

.pm-catalog-heart-naked {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  display: grid;
  place-content: center;
  cursor: pointer;
  z-index: 10;
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-tap-highlight-color: transparent;
  line-height: 0;
}

.pm-catalog-heart-naked:hover {
  transform: scale(1.18);
}

.pm-catalog-heart-naked:active {
  transform: scale(0.88);
}

/* Info Column */
.pm-catalog-info {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.pm-catalog-name-line {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.pm-catalog-name-line h2 {
  margin: 0 0 2px;
  font-family: var(--pm-font-serif);
  font-size: 20px;
  color: var(--pm-ink, #303735);
  line-height: 1.2;
}

.pm-catalog-name-line small {
  display: block;
  font-size: 12px;
  color: var(--pm-muted, #777b75);
  font-weight: 500;
}

.pm-catalog-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  background: #eff6ff;
  color: #3a4ae8;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.pm-catalog-rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #d97706;
  font-size: 12px;
  margin-top: 4px;
}

.pm-catalog-rating strong {
  font-weight: 700;
  color: var(--pm-ink, #303735);
}

.pm-catalog-rating span {
  color: var(--pm-muted, #777b75);
}

.pm-catalog-no-rating {
  font-size: 11px;
  color: var(--pm-muted, #777b75);
  margin-top: 4px;
}

.pm-catalog-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  color: var(--pm-muted, #777b75);
}

.pm-catalog-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pm-catalog-distance {
  color: #123f39 !important;
  font-weight: 700;
}

.pm-catalog-actions {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}

.pm-catalog-more {
  height: 32px;
  padding: 0 12px;
  background: #ffffff;
  border: 1px solid var(--pm-border, #e4ded4);
  color: var(--pm-ink, #303735);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
}

.pm-catalog-more:hover {
  background: var(--pm-accent-soft, rgba(18, 63, 57, 0.08));
  color: #123f39;
  border-color: #123f39;
}

/* ─── Right Column: Live Status ─────────────────────────────────────────── */
.pm-catalog-live {
  background: #ffffff;
  padding: 16px 18px;
  border-left: 1px solid var(--pm-border, #e4ded4);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  overflow: visible;
}

.pm-catalog-live-top {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow: visible;
}

.pm-catalog-live-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pm-catalog-live-head small {
  font-size: 10px;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pm-live-dot {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #16a34a;
}

.pm-catalog-free-staff-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  overflow: hidden;
}

.pm-catalog-free-staff-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: all 0.15s ease;
}

.pm-catalog-free-staff-item:hover {
  background: #ffffff;
  border-color: #4b5fff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(75, 95, 255, 0.08);
}

.pm-catalog-free-staff-item img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.pm-catalog-free-staff-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #4b5fff;
  color: #ffffff;
  display: grid;
  place-content: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

.pm-catalog-free-staff-name {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
  color: #101116;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.status-free {
  padding: 1.5px 6px;
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.28);
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 800;
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: auto;
}

.pm-catalog-free-count {
  font-size: 11px;
  font-weight: 700;
  color: #123f39;
  padding-left: 2px;
}

.pm-catalog-live-empty {
  padding: 12px 10px;
  background: #faf8f4;
  border: 1px dashed var(--pm-border, #e4ded4);
  border-radius: 8px;
  text-align: center;
  font-size: 12px;
  color: var(--pm-muted, #777b75);
}

.pm-catalog-live-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--pm-border, #e4ded4);
  padding-top: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.pm-catalog-wait {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--pm-ink, #303735);
  white-space: nowrap;
}

.pm-catalog-wait {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--pm-ink, #303735);
}

.pm-catalog-direct-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 800;
  color: #ffffff;
  text-decoration: none;
  padding: 9px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, #4b5fff 0%, #6f63ff 100%);
  border: 0;
  box-shadow: 0 8px 18px rgba(75, 95, 255, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}

.pm-catalog-direct-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(75, 95, 255, 0.38);
  color: #ffffff;
  background: linear-gradient(135deg, #3a4ae8 0%, #4b5fff 100%);
}

.pm-catalog-claim {
  background: var(--pm-bg-soft, #faf8f4);
  padding: 16px 18px;
  border-left: 1px solid var(--pm-border, #e4ded4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}

.pm-catalog-claim small {
  font-size: 10px;
  font-weight: 800;
  color: #123f39;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pm-catalog-claim h3 {
  margin: 0;
  font-family: var(--pm-font-serif);
  font-size: 17px;
  color: var(--pm-ink, #303735);
}

.pm-claim-subtitle {
  margin: 2px 0 0;
  font-size: 11px;
  font-weight: 600;
  color: #454d49;
  line-height: 1.3;
}

.pm-claim-benefits {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pm-claim-benefits li {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #303735;
  font-weight: 500;
  line-height: 1.25;
}

.pm-claim-benefits li svg {
  flex-shrink: 0;
}

.pm-catalog-claim a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  background: linear-gradient(135deg, #4b5fff 0%, #6f63ff 100%);
  color: #ffffff;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(75, 95, 255, 0.25);
  transition: transform 0.15s ease;
  margin-top: 4px;
}

.pm-catalog-claim a:hover {
  transform: translateY(-1px);
  opacity: 1;
}

.pm-catalog-claim a:hover {
  opacity: 0.92;
}


/* ─── Footer ───────────────────────────────────────────────────────────── */
.pm-catalog-footer {
  margin-top: auto;
  border-top: 1px solid var(--pm-border, #e4ded4);
  background: var(--pm-surface, #fffdf9);
  padding: 24px 20px;
}

.pm-catalog-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--pm-muted, #777b75);
}

.pm-catalog-footer-links {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.pm-catalog-footer-links a {
  color: var(--pm-muted, #777b75);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: color 0.15s ease;
}

.pm-catalog-footer-links a:hover {
  color: var(--pm-ink, #303735);
}

/* ==========================================================================
   DESKTOP COMPACT CARD SYSTEM (≥1024px)
   Dense, proportional cards: tight photo + info + live layout, no excess voids
   ========================================================================== */
@media (min-width: 1024px) {
  .pm-catalog-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
    align-items: stretch;
  }

  .pm-catalog-nearby-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
  }

  .pm-catalog-row {
    grid-template-columns: 132px minmax(0, 1fr) 230px;
    grid-template-rows: none;
    min-height: 176px;
    height: auto;
    align-items: stretch;
    overflow: hidden;
  }

  .pm-catalog-photo {
    min-height: 0;
    height: 100%;
  }

  .pm-catalog-photo > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .pm-catalog-info {
    padding: 12px 12px 14px;
    gap: 8px;
    justify-content: space-between;
    min-width: 0;
    overflow: visible;
  }

  .pm-catalog-name-line h2 {
    font-size: 17px;
    margin-bottom: 2px;
  }

  .pm-catalog-photo-placeholder {
    min-height: 0;
    height: 100%;
    padding: 8px;
  }

  .pm-catalog-rating {
    margin-top: 2px;
    font-size: 11.5px;
  }

  .pm-catalog-meta {
    gap: 5px;
    font-size: 12px;
  }

  .pm-catalog-meta span {
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
  }

  .pm-catalog-live {
    padding: 10px 12px;
    gap: 8px;
    min-width: 0;
    min-height: 0;
    overflow: visible;
    border-left: 1px solid var(--pm-border, #d9dbe3);
    border-top: none;
  }

  .pm-catalog-live-top {
    gap: 6px;
  }

  .pm-catalog-free-staff-list {
    gap: 4px;
  }

  .pm-catalog-free-staff-item {
    padding: 3px 8px;
    min-height: 26px;
    font-size: 12px;
  }

  .pm-catalog-free-staff-item img,
  .pm-catalog-free-staff-avatar {
    width: 22px;
    height: 22px;
  }

  .pm-catalog-live-empty {
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.35;
    white-space: normal;
    overflow: visible;
  }

  .pm-catalog-live-bottom {
    padding-top: 6px;
  }

  .pm-catalog-direct-btn {
    padding: 9px 14px;
    font-size: 12.5px;
  }

  /* Unclaimed Cards: tightly proportional, not blown up */
  .pm-catalog-claim {
    padding: 10px 12px;
    gap: 4px;
    justify-content: space-between;
    border-left: 1px solid var(--pm-border, #d9dbe3);
    border-top: none;
  }

  .pm-catalog-claim small {
    font-size: 9.5px;
  }

  .pm-catalog-claim h3 {
    font-size: 15px;
    line-height: 1.2;
  }

  .pm-claim-subtitle {
    font-size: 10.5px;
    margin: 0;
    line-height: 1.2;
  }

  .pm-claim-benefits {
    margin: 2px 0 0;
    gap: 2px;
  }

  .pm-claim-benefits li {
    font-size: 10px;
    line-height: 1.2;
  }

  .pm-catalog-claim a {
    height: 32px;
    font-size: 11px;
    padding: 0 12px;
    margin-top: 2px;
  }
}

/* ==========================================================================
   RESPONSIVE MEDIA QUERIES (TABLETS & PHONES)
   ========================================================================== */

@media (max-width: 959px) {
  .pm-catalog-categories {
    justify-content: flex-start;
  }
}

@media (max-width: 991px) {
  .pm-catalog-row {
    grid-template-columns: 240px 1fr;
    height: auto;
    min-height: 0;
  }
  .pm-catalog-live,
  .pm-catalog-claim {
    grid-column: 1 / -1;
    border-left: none;
    border-top: 1px solid var(--pm-border, #e4ded4);
  }
}

@media (max-width: 767px) {
  .pm-catalog-header {
    height: 56px;
    padding: 0 12px;
  }
  
  .pm-catalog-main {
    padding: 10px 10px 40px !important;
  }

  .pm-home-subnav {
    padding: 6px 10px;
    gap: 8px;
    margin-bottom: 8px;
  }

  .pm-home-subnav-btn {
    font-size: 13px;
    padding: 5px 12px;
  }

  .pm-catalog-location-bar {
    padding: 6px 10px;
    margin-bottom: 8px;
    font-size: 12px;
  }

  .pm-home-promo-banner {
    padding: 10px 12px;
    gap: 8px;
    margin-bottom: 8px;
  }

  .pm-home-promo-title {
    font-size: 0.92rem;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    line-height: 1.25;
  }

  .pm-home-promo-desc {
    font-size: 0.78rem;
  }

  .pm-home-promo-btn {
    padding: 7px 12px;
    font-size: 0.8rem;
  }

  .pm-catalog-nearby-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    min-height: 0;
    padding: 10px 12px;
  }

  .pm-catalog-nearby-actions {
    grid-column: 1 / -1;
    justify-content: space-between;
  }

  .pm-catalog-row {
    grid-template-columns: 1fr;
    border-radius: 12px;
    height: auto;
    min-height: 0;
  }

  /* On mobile/PWA: hide empty placeholder photo on unclaimed salons, show direct info & claim */
  .pm-catalog-row.is-unclaimed .pm-catalog-photo {
    display: none !important;
  }

  .pm-catalog-photo {
    min-height: 160px;
    max-height: 190px;
  }

  .pm-catalog-info {
    padding: 12px 14px;
  }

  .pm-catalog-name-line h2 {
    font-size: 17px;
  }

  .pm-catalog-live,
  .pm-catalog-claim {
    padding: 12px 14px;
  }

  .pm-catalog-actions {
    flex-direction: column;
  }

  .pm-catalog-more {
    width: 100%;
    height: 36px;
    font-size: 12px;
    justify-content: center;
  }
}

/* ─── PickMe Salon OS Pillars ─────────────────────────────────────────── */
.pm-home-os-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 14px 0 16px 0;
}

@media (max-width: 768px) {
  .pm-home-os-pillars {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.pm-os-pillar {
  background: var(--pm-surface, #ffffff);
  border: 1px solid var(--pm-border, #e4ded4);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pm-os-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(18, 63, 57, 0.08);
  color: var(--pm-accent-dark, #123f39);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pm-os-pillar strong {
  display: block;
  font-size: 12px;
  color: var(--pm-ink, #303735);
  margin-bottom: 2px;
}

.pm-os-pillar span {
  display: block;
  font-size: 11px;
  color: var(--pm-muted, #777b75);
  line-height: 1.35;
}

/* ─── Melisa Concierge Home CTA Card ───────────────────────────────────── */
.pm-home-melisa-cta-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--pm-surface, #ffffff);
  border: 1px solid var(--pm-border, #e4ded4);
  border-radius: 14px;
  padding: 16px 20px;
  margin-top: 14px;
  margin-bottom: 20px;
  box-shadow: 0 4px 16px rgba(18, 63, 57, 0.04);
}

.pm-home-melisa-cta-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pm-melisa-cta-avatar-wrap {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pm-melisa-cta-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #123f39;
}

.pm-melisa-cta-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pm-melisa-cta-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #123f39;
  text-transform: uppercase;
}

.pm-melisa-cta-heading {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--pm-ink, #303735);
}

.pm-melisa-cta-sub {
  margin: 0;
  font-size: 12px;
  color: var(--pm-muted, #777b75);
}

.pm-home-melisa-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--pm-accent-dark, #123f39);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease, background 0.15s ease;
  box-shadow: 0 3px 10px rgba(18, 63, 57, 0.2);
}

.pm-home-melisa-btn:hover {
  background: #18524a;
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .pm-home-melisa-cta-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .pm-home-melisa-btn {
    width: 100%;
    justify-content: center;
  }
}


/* ==========================================================================
   KINETIC RADAR NORTH STAR (Page 7 of PDF)
   ========================================================================== */

.pm-kinetic-hero {
  max-width: 1120px;
  width: 100%;
  margin: 0 auto 24px;
  padding: 28px 22px;
  background: radial-gradient(ellipse at 80% 20%, rgba(18, 63, 57, 0.08), transparent 60%), #ffffff;
  border: 1px solid var(--pm-border, #e4ded4);
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(18, 63, 57, 0.04);
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
}

.pm-kinetic-hero-left,
.pm-kinetic-hero-right {
  min-width: 0;
  max-width: 100%;
}

.pm-kinetic-hero-right {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 900px) {
  .pm-kinetic-hero {
    grid-template-columns: 1.15fr 0.85fr;
    padding: 44px 40px;
    gap: 40px;
  }
}

.pm-kinetic-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6366f1;
  margin-bottom: 12px;
}

.pm-kinetic-title {
  font-family: var(--pm-font-display, Georgia, 'Times New Roman', serif);
  font-size: clamp(34px, 4.5vw, 56px);
  font-weight: 700;
  color: #0f172a;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
}

.pm-kinetic-sub {
  font-size: clamp(15px, 1.6vw, 17.5px);
  color: #64748b;
  line-height: 1.5;
  margin: 0 0 24px;
  max-width: 520px;
}

.pm-kinetic-intent-box {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.pm-kinetic-intent-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.pm-kinetic-intent-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #64748b;
}

.pm-kinetic-intent-val {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
}

.pm-kinetic-intent-btn {
  background: #0f172a;
  color: #ffffff;
  border: none;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: grid;
  placeItems: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s ease, background 0.15s ease;
}

.pm-kinetic-intent-btn:hover {
  transform: scale(1.05);
  background: #1e293b;
}

/* Live Sequence (Page 7 of PDF) */
.pm-kinetic-live-sequence {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto 28px;
  box-sizing: border-box;
}

.pm-kinetic-seq-header {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0f172a;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pm-kinetic-seq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 900px) {
  .pm-kinetic-seq-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pm-kinetic-seq-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.pm-kinetic-seq-card:hover {
  transform: translateY(-2px);
  border-color: #cbd5e1;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.pm-kinetic-seq-img {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
}

.pm-kinetic-seq-info {
  flex: 1;
  min-width: 0;
}

.pm-kinetic-seq-time {
  font-size: 10.5px;
  font-weight: 800;
  color: #f43f5e;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.pm-kinetic-seq-name {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pm-kinetic-seq-sub {
  font-size: 12px;
  color: #64748b;
  margin-top: 1px;
}

.pm-kinetic-seq-price {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  text-align: right;
  flex-shrink: 0;
}

.pm-kinetic-seq-btn {
  background: #0f172a;
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  margin-top: 4px;
  display: inline-block;
}

/* Concierge Callout */
.pm-kinetic-concierge-card {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #ffffff;
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
}

.pm-kinetic-concierge-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pm-kinetic-concierge-avatar-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.pm-kinetic-concierge-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #38bdf8;
  display: block;
}

.pm-kinetic-concierge-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #38bdf8;
  text-transform: uppercase;
}

.pm-kinetic-concierge-quote {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  margin-top: 2px;
}

.pm-kinetic-concierge-btn {
  background: #38bdf8;
  color: #0f172a;
  border: none;
  font-size: 12.5px;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.15s ease;
}

.pm-kinetic-concierge-btn:hover {
  opacity: 0.9;
}
/* ==========================================================================
   KINETIC DIAL COMPONENT STYLES (Page 7 of PDF)
   ========================================================================== */

.pm-dial {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  user-select: none;
}

.pm-dial-stage {
  position: relative;
  width: 280px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .pm-dial-stage {
    width: 320px;
    height: 320px;
  }
}

.pm-dial-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}

.pm-dial-hub {
  position: relative;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #ffffff;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.18);
  cursor: pointer;
  padding: 0;
  background: #0f172a;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: block;
}

@media (min-width: 768px) {
  .pm-dial-hub {
    width: 200px;
    height: 200px;
  }
}

.pm-dial-hub:hover {
  transform: scale(1.03);
  box-shadow: 0 16px 44px rgba(15, 23, 42, 0.25);
}

.pm-dial-hub img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pm-dial-hub-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(15, 23, 42, 0.88) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 14px 10px;
}

.pm-dial-hub-label {
  text-align: center;
  color: #ffffff;
}

.pm-dial-hub-kicker {
  display: block;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #38bdf8;
  margin-bottom: 2px;
}

.pm-dial-hub-name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
}

.pm-dial-chip {
  position: absolute;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--pm-font-mono, monospace);
  background: #ffffff;
  color: #0f172a;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
}

.pm-dial-chip.is-active {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.25);
}

.pm-dial-chip-top {
  top: 0;
  transform: translateY(-50%);
}

.pm-dial-chip-right {
  right: 0;
  top: 50%;
  transform: translate(50%, -50%);
}

.pm-dial-meta {
  margin-top: 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.pm-dial-meta-kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

.pm-dial-meta-score {
  font-size: 18px;
  font-weight: 800;
  color: #6366f1;
}

@media (max-width: 1023px) {
  .pm-radar-hero {
    overflow-x: hidden;
  }

  .pm-radar-title {
    line-height: 1.12;
    overflow-wrap: break-word;
  }

  .pm-radar-console {
    flex-direction: column;
    width: 100%;
  }

  .pm-radar-console-demo {
    width: 100%;
    box-sizing: border-box;
  }

  .pm-radar-console-demo-copy strong {
    white-space: normal;
  }

  .pm-radar-console-keys {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: none;
    width: 100%;
  }

  .pm-radar-console-keys a,
  .pm-radar-console-keys button {
    min-width: 0;
    width: 100%;
    white-space: normal;
  }

  .pm-radar-console-keys .is-melisa {
    grid-column: 1 / -1;
    min-width: 0;
    border-right: 0;
  }

  .pm-catalog-row {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 0;
  }

  .pm-catalog-photo {
    height: 168px;
    max-height: 168px;
    min-height: 168px;
  }

  .pm-catalog-photo > img {
    width: 100%;
    height: 168px;
    max-width: none;
    object-fit: cover;
  }

  .pm-catalog-live,
  .pm-catalog-claim {
    grid-column: 1 / -1;
  }
}

.pm-dial-meta-link {
  font-size: 11.5px;
  color: #64748b;
  text-decoration: none;
  margin-top: 2px;
}

.pm-dial-meta-link:hover {
  color: #0f172a;
  text-decoration: underline;
}
.pm-zuhause-bald-hero {
  min-height: calc(100vh - 180px);
  align-content: center;
}

.pm-zuhause-bald-mark {
  font-family: var(--pm-font-display, "Fraunces", Georgia, serif);
  font-size: 28px !important;
  letter-spacing: 0.14em !important;
  font-weight: 600 !important;
  color: #4b5fff !important;
}

.pm-zuhause-bald-hero .pm-radar-title {
  letter-spacing: 0.08em;
  color: #4b5fff;
}
/* =========================================================
   PICKME MASTER BOOKING MODAL (PREMIUM VISIT & BOOKING WIDGET)
   ========================================================= */

.pm-mbk-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(18, 63, 57, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  animation: pmMbkFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 580px) {
  .pm-mbk-overlay {
    align-items: center;
    padding: 20px;
  }
}

@keyframes pmMbkFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.pm-mbk-modal {
  background: #ffffff;
  width: 100%;
  max-width: 480px;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -8px 36px rgba(18, 63, 57, 0.18), 0 2px 10px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow-y: auto;
  box-sizing: border-box;
  animation: pmMbkSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  border-top: 1px solid rgba(228, 222, 212, 0.8);
}

@media (min-width: 580px) {
  .pm-mbk-modal {
    border-radius: 22px;
    border: 1px solid #e4ded4;
    box-shadow: 0 16px 48px rgba(18, 63, 57, 0.22), 0 4px 16px rgba(0, 0, 0, 0.08);
  }
}

@keyframes pmMbkSlideUp {
  from { transform: translateY(32px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* HEADER */
.pm-mbk-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #ede8df;
  background: #faf8f4;
}

.pm-mbk-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.pm-mbk-avatar-wrap {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #123f39;
  flex-shrink: 0;
  background: #e8ece7;
  box-shadow: 0 2px 6px rgba(18, 63, 57, 0.12);
}

.pm-mbk-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pm-mbk-title {
  font-family: Georgia, serif;
  font-size: 1.12rem;
  font-weight: 800;
  color: #123f39;
  margin: 0;
  line-height: 1.2;
}

.pm-mbk-master-name {
  font-size: 0.82rem;
  color: #657260;
  font-weight: 700;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* CLOSE BUTTON */
.pm-mbk-close-btn {
  background: #ffffff;
  border: 1px solid #dcd5c9;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #123f39;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.pm-mbk-close-btn:hover {
  background: #f0ece3;
  border-color: #123f39;
  transform: scale(1.05);
}

/* ACTIVE SERVICE CARD */
.pm-mbk-service-card {
  margin: 14px 18px 10px;
  background: #f7f4ec;
  border: 1px solid #e4ded4;
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pm-mbk-srv-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pm-mbk-srv-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: #123f39;
}

.pm-mbk-srv-price {
  font-size: 0.95rem;
  font-weight: 800;
  color: #123f39;
  background: #e6ede4;
  padding: 3px 8px;
  border-radius: 6px;
}

.pm-mbk-srv-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: #657260;
  font-weight: 600;
}

/* IN-MODAL SERVICE SWITCHER */
.pm-mbk-srv-switcher {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed #dcd5c9;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pm-mbk-switch-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: #657260;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pm-mbk-switch-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.pm-mbk-switch-chips::-webkit-scrollbar {
  display: none;
}

.pm-mbk-srv-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #dcd5c9;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.pm-mbk-srv-chip:hover {
  border-color: #123f39;
  background: #faf8f4;
}

.pm-mbk-srv-chip.active {
  background: #123f39;
  border-color: #123f39;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(18, 63, 57, 0.18);
}

.pm-mbk-chip-price {
  font-weight: 800;
  opacity: 0.9;
}

/* WEEK NAV */
.pm-mbk-week-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  background: #faf8f3;
  border-top: 1px solid #eee8dc;
  border-bottom: 1px solid #eee8dc;
}

.pm-mbk-nav-arrow {
  background: #ffffff;
  border: 1px solid #e4ded4;
  border-radius: 8px;
  width: 32px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #123f39;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.pm-mbk-nav-arrow:hover:not(:disabled) {
  background: #f0ece3;
  border-color: #123f39;
}

.pm-mbk-nav-arrow:disabled {
  color: #c4beaf;
  background: transparent;
  border-color: transparent;
  cursor: not-allowed;
  opacity: 0.4;
}

.pm-mbk-days-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  gap: 4px;
}

.pm-mbk-day-chip {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 2px;
  background: #ffffff;
  border: 1px solid #e4ded4;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.pm-mbk-day-chip:hover:not(:disabled) {
  border-color: #123f39;
  background: #f8faf8;
}

.pm-mbk-day-chip.selected {
  background: #123f39 !important;
  border-color: #123f39 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(18, 63, 57, 0.22);
}

.pm-mbk-day-chip.selected .pm-mbk-day-name,
.pm-mbk-day-chip.selected .pm-mbk-day-num {
  color: #ffffff !important;
}

.pm-mbk-day-chip.today {
  border-color: #123f39;
}

.pm-mbk-day-chip.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: #f3f0ea;
  border-color: #e8e3d8;
}

.pm-mbk-day-name {
  font-size: 0.66rem;
  font-weight: 700;
  color: #657260;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 2px;
}

.pm-mbk-day-num {
  font-size: 0.90rem;
  font-weight: 800;
  color: #182419;
  line-height: 1.1;
}

/* SLOTS SECTION */
.pm-mbk-slots-section {
  padding: 14px 18px 16px;
  flex: 1;
}

.pm-mbk-slots-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.pm-mbk-date-indicator {
  font-size: 0.90rem;
  font-weight: 800;
  color: #123f39;
}

.pm-mbk-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.74rem;
  font-weight: 700;
  color: #657260;
}

.pm-mbk-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pm-mbk-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.pm-mbk-legend-dot.free {
  background: #2e7d32;
}

.pm-mbk-legend-dot.busy {
  background: #c62828;
}

.pm-mbk-closed-notice {
  text-align: center;
  padding: 30px 10px;
  color: #8c9688;
  font-size: 0.88rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.pm-mbk-slots-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.pm-mbk-slot-btn {
  min-height: 42px;
  padding: 8px 2px;
  border-radius: 8px;
  border: 1px solid #e4ded4;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.86rem;
  font-weight: 700;
  color: #182419;
  cursor: pointer;
  transition: all 0.15s ease;
  box-sizing: border-box;
  letter-spacing: 0.01em;
}

.pm-mbk-slot-btn.free {
  background: #edf7ed;
  border-color: #c8e6c9;
  color: #1b5e20;
}

.pm-mbk-slot-btn.free:hover {
  background: #dcf0dc;
  border-color: #123f39;
}

.pm-mbk-slot-btn.busy {
  background: #fdf2f2;
  border-color: #fed7d7;
  color: #c53030;
  cursor: not-allowed;
  opacity: 0.75;
}

.pm-mbk-slot-btn.past {
  background: #f3f4f6;
  border-color: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
  opacity: 0.5;
}

.pm-mbk-slot-btn.selected {
  background: #123f39 !important;
  border-color: #123f39 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(18, 63, 57, 0.25);
  font-weight: 800;
}

.pm-mbk-slot-tag {
  display: none;
}

/* FOOTER */
.pm-mbk-footer {
  padding: 14px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #ede8df;
  background: #faf8f3;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pm-mbk-selection-summary {
  font-size: 0.84rem;
  font-weight: 800;
  color: #123f39;
  text-align: center;
  background: #eaf1e8;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #c9dec6;
}

.pm-mbk-prompt-text {
  font-size: 0.80rem;
  color: #657260;
  font-weight: 600;
  text-align: center;
}

.pm-mbk-btn-wa {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: #123f39;
  color: #ffffff;
  border: none;
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(18, 63, 57, 0.22);
  transition: background 0.15s ease, transform 0.1s ease;
  box-sizing: border-box;
}

.pm-mbk-btn-wa:hover:not(:disabled) {
  background: #1a574f;
  transform: translateY(-1px);
}

.pm-mbk-btn-wa:disabled {
  background: #cbd5e1;
  color: #64748b;
  cursor: not-allowed;
  box-shadow: none;
}
/* =========================================================
   PICKME PRO PROFILE — /pro/:slug (MOCKUP ACCURATE v2)
   ========================================================= */

.pm-pro-page {
  min-height: 100vh;
  background-color: var(--pm-bg, #f7f4ec);
  color: var(--pm-ink, #182419);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
}

/* 1. HEADER (BACK TO /zuhause · LOGO · [PULT IF OWNER] · [QR] · LANGUAGE — NO BURGER) */
.pm-pro-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 244, 236, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(228, 222, 212, 0.8);
}

.pm-pro-header-inner {
  max-width: 540px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pm-pro-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pm-pro-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #ffffff;
  border: 1px solid #dcd5c9;
  color: #123f39;
  padding: 6px 11px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.15s ease;
}

.pm-pro-back-btn:hover {
  background: rgba(18, 63, 57, 0.08);
  border-color: #123f39;
}

.pm-pro-logo {
  display: flex;
  align-items: center;
}

/* PULT HEADER BUTTON (OWNER ONLY) */
.pm-pro-pult-header-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #123f39;
  color: #ffffff;
  border: none;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(18, 63, 57, 0.18);
  transition: background 0.15s ease;
  white-space: nowrap;
}

.pm-pro-pult-header-btn:hover {
  background: #1a574f;
}

.pm-pro-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* QR HEADER BUTTON */
.pm-pro-qr-header-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ffffff;
  border: 1px solid #dcd5c9;
  color: #123f39;
  padding: 5px 9px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.pm-pro-qr-header-btn:hover {
  background: rgba(18, 63, 57, 0.08);
  border-color: #123f39;
}

/* Mobile compact icons for Pult and QR (<540px) */
@media (max-width: 540px) {
  .pm-pro-pult-header-btn span,
  .pm-pro-qr-header-btn span {
    display: none;
  }
  .pm-pro-pult-header-btn,
  .pm-pro-qr-header-btn {
    padding: 6px 8px;
  }
}

/* 2. MAIN CONTAINER (PHONE FIRST) */
.pm-pro-main {
  max-width: 540px;
  margin: 0 auto;
  padding: 12px 14px 40px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

/* CARD BLOCKS */
.pm-pro-card-block {
  background: #ffffff;
  border: 1px solid #e4ded4;
  border-radius: 16px;
  padding: 16px 18px;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(18, 63, 57, 0.04);
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.pm-pro-block-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #123f39;
  margin: 0;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ─── BLOCK 1: HERO & PROFILE DETAILS ────────────────────────────────── */
.pm-pro-hero-card {
  padding: 0;
  overflow: hidden;
}

.pm-pro-hero-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #ede8df;
  overflow: hidden;
}

.pm-pro-hero-img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  display: block;
}

.pm-pro-demo-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(254, 243, 199, 0.95);
  color: #92400e;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.pm-pro-hero-info {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
}

.pm-pro-name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
}

.pm-pro-name {
  font-size: 1.45rem;
  font-weight: 800;
  color: #123f39;
  margin: 0;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
  flex: 1;
}

/* LIVE STATUS BADGE */
.pm-pro-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  width: fit-content;
  max-width: max-content;
}

.pm-pro-status-badge.free {
  background: #e8f5e9;
  color: #123f39;
}

.pm-pro-status-badge.pause {
  background: #fffde7;
  color: #f57f17;
}

.pm-pro-status-badge.busy {
  background: #ffebee;
  color: #c62828;
}

.pm-pro-status-badge.closed {
  background: #f3f4f6;
  color: #657260;
}

.pm-pro-status-badge.unknown {
  background: #f3f4f6;
  color: #6b7280;
}

.pm-pro-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.pm-pro-profession {
  font-size: 0.9rem;
  font-weight: 600;
  color: #657260;
}

.pm-pro-area-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  color: #4a5448;
  margin-top: 2px;
}

/* SOCIAL ROW */
.pm-pro-social-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.pm-pro-social-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f7f4ec;
  border: 1px solid #e4ded4;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #182419;
  text-decoration: none;
  transition: all 0.15s ease;
}

.pm-pro-social-btn:hover {
  background: #ede8df;
  border-color: #123f39;
}

/* WHATSAPP CTA BUTTON */
.pm-pro-wa-main-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: #123f39;
  color: #ffffff;
  border: none;
  padding: 13px 20px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(18, 63, 57, 0.18);
  transition: background 0.15s ease, transform 0.1s ease;
  margin-top: 6px;
  text-decoration: none;
}

.pm-pro-wa-main-btn:hover {
  background: #1a574f;
  transform: translateY(-1px);
}

/* MASTER TOOLS ROW (PULT + QR-CODE) */
.pm-pro-tools-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
  width: 100%;
}

.pm-pro-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.pm-pro-tool-btn.pult {
  background: rgba(18, 63, 57, 0.08);
  color: #123f39;
  border: 1px solid #c8d3c3;
}

.pm-pro-tool-btn.pult:hover {
  background: #d8e2d4;
  border-color: #123f39;
}

.pm-pro-tool-btn.qr {
  background: #ffffff;
  color: #123f39;
  border: 1px solid #dcd5c9;
}

.pm-pro-tool-btn.qr:hover {
  background: #faf8f4;
  border-color: #123f39;
}

/* ─── BLOCK 3: SERVICES & PRICES (4 VISIBLE + MEHR ANZEIGEN & SCROLL) ─ */
.pm-pro-services-list {
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
}

.pm-pro-services-list.expanded {
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: #dcd5c9 transparent;
}

.pm-pro-services-list.expanded::-webkit-scrollbar {
  width: 4px;
}

.pm-pro-services-list.expanded::-webkit-scrollbar-thumb {
  background: #dcd5c9;
  border-radius: 4px;
}

.pm-pro-service-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid #f0ece4;
  cursor: pointer;
  transition: background 0.1s ease;
}

.pm-pro-service-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.pm-pro-service-item:first-child {
  padding-top: 0;
}

.pm-pro-service-item:hover .pm-pro-srv-name {
  color: #123f39;
}

.pm-pro-srv-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pm-pro-srv-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: #182419;
}

.pm-pro-srv-dur {
  font-size: 0.76rem;
  color: #8c9688;
}

.pm-pro-srv-price-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pm-pro-srv-price {
  font-size: 0.92rem;
  font-weight: 800;
  color: #123f39;
}

.pm-pro-more-srv-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: #f7f4ec;
  border: 1px solid #e4ded4;
  border-radius: 10px;
  color: #123f39;
  font-size: 0.84rem;
  font-weight: 700;
  padding: 9px 14px;
  cursor: pointer;
  margin-top: 6px;
  transition: all 0.15s ease;
}

.pm-pro-more-srv-btn:hover {
  background: #ede8df;
  border-color: #123f39;
}

/* ─── MINI WEEK WIDGET (ПОД УСЛУГАМИ МАЛЕНЬКАЯ НЕДЕЛЯ) ────────────────── */
.pm-pro-week-card {
  background: #ffffff;
  border: 1px solid #e4ded4;
  border-radius: 16px;
  padding: 14px 16px;
}

.pm-pro-week-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}

.pm-pro-week-title-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pm-pro-week-hint {
  font-size: 0.76rem;
  color: #657260;
}

.pm-pro-mini-week-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
}

.pm-pro-mini-day {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 1px 8px;
  background: #fbf9f4;
  border: 1px solid #e4ded4;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  box-sizing: border-box;
}

.pm-pro-mini-day:hover:not(.is-past):not(.closed) {
  border-color: #123f39;
  background: #f0ece4;
  transform: translateY(-1px);
}

.pm-pro-mini-day.is-today {
  border: 1.5px solid #123f39;
  background: #f7f4ec;
  box-shadow: 0 1px 4px rgba(18, 63, 57, 0.1);
}

.pm-pro-mini-day.is-past {
  opacity: 0.4;
  cursor: not-allowed;
  background: #f3f0ea;
}

.pm-pro-mini-day.closed {
  opacity: 0.6;
  background: #f5f2eb;
}

.pm-pro-mday-name {
  font-size: 0.65rem;
  font-weight: 700;
  color: #657260;
  text-transform: uppercase;
  line-height: 1;
}

.pm-pro-mday-num {
  font-size: 0.92rem;
  font-weight: 800;
  color: #182419;
  margin: 2px 0 3px;
  line-height: 1.1;
}

.pm-pro-mday-badge {
  font-size: 0.60rem;
  font-weight: 700;
  padding: 1px 3px;
  border-radius: 4px;
  white-space: nowrap;
  line-height: 1.1;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pm-pro-mini-day.free .pm-pro-mday-badge {
  background: #e8f5e9;
  color: #123f39;
}

.pm-pro-mini-day.busy .pm-pro-mday-badge {
  background: #ffebee;
  color: #c62828;
}

.pm-pro-mini-day.closed .pm-pro-mday-badge {
  background: #ede8df;
  color: #7b8577;
}

.pm-pro-mini-day.is-past .pm-pro-mday-badge {
  background: #e5e7eb;
  color: #6b7280;
}

/* ─── BLOCK 4: ÜBER MICH ─────────────────────────────────────────────── */
.pm-pro-about-text {
  font-size: 0.9rem;
  color: #4a5448;
  line-height: 1.55;
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ─── BLOCK 5: MEINE ARBEITEN ────────────────────────────────────────── */
.pm-pro-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

@media (max-width: 400px) {
  .pm-pro-portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.pm-pro-portfolio-item {
  aspect-ratio: 1 / 1;
  background: #ede8df;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e4ded4;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pm-pro-portfolio-item:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.pm-pro-portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─── LIGHTBOX MODAL (LUXURY GLASSMORPHISM & SMOOTH CONTROLS) ───────── */
.pm-pro-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(12, 30, 27, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  animation: pmFadeIn 0.2s ease;
}

@keyframes pmFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pmZoomIn {
  from { transform: scale(0.94); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.pm-pro-lightbox-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  z-index: 100001;
  padding: 4px 2px;
}

.pm-pro-lightbox-counter {
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 6px 14px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
}

.pm-pro-lightbox-close {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  color: #ffffff;
  box-sizing: border-box;
  flex-shrink: 0;
  padding: 0;
}

.pm-pro-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.06);
}

.pm-pro-lightbox-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  gap: 10px;
  padding: 8px 0;
  box-sizing: border-box;
}

.pm-pro-lightbox-img {
  max-width: calc(100% - 90px);
  max-height: 62vh;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  user-select: none;
  animation: pmZoomIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 480px) {
  .pm-pro-lightbox-img {
    max-width: calc(100% - 70px);
    max-height: 56vh;
  }
}

.pm-pro-lightbox-nav {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
  color: #ffffff;
  padding: 0;
  box-sizing: border-box;
}

.pm-pro-lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: scale(1.06);
}

/* LIGHTBOX THUMBNAIL STRIP */
.pm-pro-lightbox-thumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  overflow-x: auto;
  padding: 6px 4px;
  box-sizing: border-box;
}

.pm-pro-lightbox-thumb-btn {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.3);
  padding: 0;
  cursor: pointer;
  transition: all 0.15s ease;
  opacity: 0.55;
  box-sizing: border-box;
  flex-shrink: 0;
}

.pm-pro-lightbox-thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pm-pro-lightbox-thumb-btn.active {
  opacity: 1;
  border-color: #ffffff;
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.45);
}

/* ─── BLOCK 6: WORKING HOURS ─────────────────────────────────────────── */
.pm-pro-hours-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: #4a5448;
  font-weight: 600;
}

/* ─── 4. SINGLE CLEAN LEGAL FOOTER ───────────────────────────────────── */
.pm-pro-footer {
  margin-top: auto;
  border-top: 1px solid #e4ded4;
  background: rgba(247, 244, 236, 0.94);
  padding: 24px 16px 36px;
  text-align: center;
}

.pm-pro-footer-inner {
  max-width: 540px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.pm-pro-footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pm-pro-footer-link {
  color: #657260;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease;
}

.pm-pro-footer-link:hover {
  color: #123f39;
  text-decoration: underline;
}

.pm-pro-footer-sep {
  color: #b0b8ac;
  font-size: 0.82rem;
}

.pm-pro-footer-copy {
  font-size: 0.76rem;
  color: #8c9688;
}
/* ==========================================================================
   PICKME BOOKING PLANNER — 100% BULLETPROOF ADAPTIVE RESPONSIVE SYSTEM
   Self-healing layout for Desktops, Tablets, and all Mobile Phones
   ========================================================================== */

.pickme-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(20, 26, 24, 0.65);
  backdrop-filter: blur(6px);
  z-index: 10000 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center;
  padding: clamp(10px, 2.5vh, 28px) clamp(8px, 2vw, 20px);
  overflow-y: auto !important;
  box-sizing: border-box;
}

.booking-planner {
  width: 100%;
  max-width: min(840px, calc(100vw - 16px));
  max-height: calc(100dvh - 24px);
  background: #fbf8f2;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #e2d9ca;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #303735;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}


/* Header */
.booking-head {
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid #e2d9ca;
  background: #f5f0e6;
  position: sticky;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
}

.pm-planner-brand {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.booking-head h2 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(20px, 3vw, 24px);
  color: #123f39;
  line-height: 1.15;
}

.booking-head small {
  color: #777b75;
}

.pm-planner-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  color: #777b75;
}

.pm-planner-steps li {
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid #e4ded4;
  background: #fff;
}

.pm-planner-steps li.is-active {
  color: #123f39;
  border-color: #123f39;
  background: rgba(18, 63, 57, 0.08);
}

.pm-planner-steps li.is-done {
  color: #123f39;
}
  display: block;
  font-size: 13px;
  color: #777b75;
  margin-top: 2px;
}

.pm-planner-close {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 50%;
  border: 1.5px solid #123f39;
  background: #ece5d8;
  color: #123f39 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(18, 63, 57, 0.12);
  transition: all 0.15s ease;
  flex-shrink: 0;
  margin-left: 12px;
}

.pm-planner-close svg {
  stroke: #123f39 !important;
  stroke-width: 2.8px !important;
  display: block !important;
}

.pm-planner-close:hover {
  background: #dfd7c8;
  transform: scale(1.08);
}

/* Body */
.booking-body {
  padding: 22px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 24px;
  background: #fbf8f2;
  box-sizing: border-box;
}


/* Calendar Section */
.booking-calendar {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.calendar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.calendar-head strong {
  font-size: 16px;
  font-weight: 700;
  color: #303735;
  text-transform: capitalize;
}

.calendar-head button {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #dfd6c7;
  background: #f7f3eb;
  color: #123f39;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: all 0.15s ease;
}

.calendar-head button:hover {
  background: #ede6d8;
  border-color: #123f39;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}

.calendar-weekdays span {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: #777b75;
  text-transform: uppercase;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.calendar-grid button,
.calendar-empty {
  height: 38px;
  border-radius: 8px;
  box-sizing: border-box;
}

.calendar-empty {
  visibility: hidden;
}

.calendar-grid button {
  border: 1px solid #e2d9ca;
  background: #f7f3eb;
  color: #303735;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
  padding: 0;
  display: grid;
  place-content: center;
}

.calendar-grid button:hover:not(:disabled) {
  border-color: #123f39;
  background: #ede6d8;
}

.calendar-grid button:disabled {
  color: #c4c1b9;
  background: #f3ede2;
  border-color: #ebe4d8;
  cursor: not-allowed;
  opacity: 0.6;
}

.calendar-grid button.selected {
  background: #123f39 !important;
  color: #ffffff !important;
  border-color: #123f39 !important;
}

.calendar-busy-dot {
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c62828;
}

/* Options Section */
.booking-options {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.booking-options label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: #303735;
}

.booking-options select {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #d4cdc2;
  border-radius: 8px;
  background: #fffdf9;
  color: #303735;
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
}

.booking-time-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.booking-time-section strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #303735;
}

.booking-time-section small {
  font-size: 12px;
  color: #777b75;
}

.booking-times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
  gap: 6px;
  max-height: 120px;
  overflow-y: auto;
  padding-right: 2px;
}

.booking-times button {
  height: 36px;
  border: 1px solid #d4cdc2;
  border-radius: 8px;
  background: #fffdf9;
  color: #303735;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.booking-times button:hover:not(:disabled) {
  border-color: #123f39;
  background: #f7f4ec;
}

.booking-times button.selected {
  background: #123f39;
  color: #ffffff;
  border-color: #123f39;
}

.booking-times button.busy,
.booking-times button:disabled {
  background: #faf8f4;
  color: #c4c1b9;
  cursor: not-allowed;
  border-color: #eee9e0;
}

.booking-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.booking-mode button {
  height: 40px;
  border: 1px solid #d4cdc2;
  border-radius: 8px;
  background: #fffdf9;
  color: #303735;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.booking-mode button.active {
  background: #123f39;
  color: #ffffff;
  border-color: #123f39;
}

.booking-whatsapp {
  width: 100%;
  min-height: 46px;
  border-radius: 10px;
  border: none;
  background: #123f39;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  box-sizing: border-box;
  text-align: center;
  line-height: 1.25;
  transition: all 0.15s ease;
}

.booking-whatsapp:hover:not(:disabled) {
  background: #0c2b27;
}

.booking-whatsapp:disabled {
  background: #cfd4d0;
  color: #8c948e;
  cursor: not-allowed;
}

.booking-note {
  font-size: 11px;
  color: #777b75;
  line-height: 1.4;
  margin: 0;
}

/* ==========================================================================
   AUTO-ADAPTING BREAKPOINT (≤ 840px: TABLETS & MOBILE PHONES)
   ========================================================================== */
@media (max-width: 840px) {
  .booking-body {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 16px;
  }

  .booking-planner {
    border-radius: 16px;
    max-height: calc(100dvh - 20px);
  }

  .booking-head {
    padding: 14px 16px;
  }

  .booking-head h2 {
    font-size: 19px;
  }

  .booking-times {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    max-height: 110px;
  }
}
/* ==========================================================================
   PICKME — LIVE SALON CONCIERGE & MODERATOR CHAT MODAL
   Rich, alive, interactive with dark & light theme support
   ========================================================================== */

.pm-chat-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: pmChatFadeIn 0.2s ease-out;
}

@keyframes pmChatFadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.pm-chat-window {
  width: 100%;
  max-width: 620px;
  height: 640px;
  max-height: 90vh;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.35);
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  font-family: Inter, system-ui, sans-serif;
}

/* ─── Header ───────────────────────────────────────────────────────────── */
.pm-chat-header {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #ffffff;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pm-chat-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pm-chat-avatar-stack {
  position: relative;
  width: 42px;
  height: 42px;
}

.pm-chat-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #4b5fff 0%, #7a5cff 100%);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px rgba(75, 95, 255, 0.4);
}

.pm-chat-status-pulse {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid #0f172a;
  box-shadow: 0 0 8px #22c55e;
}

.pm-chat-header-title {
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pm-chat-verified-badge {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.pm-chat-header-sub {
  font-size: 11.5px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.pm-chat-header-sub .live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
}

.pm-chat-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pm-chat-role-switcher {
  display: flex;
  background: rgba(255, 255, 255, 0.1);
  padding: 2px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.pm-chat-role-btn {
  background: none;
  border: none;
  color: #94a3b8;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
  font-family: inherit;
}

.pm-chat-role-btn.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.pm-chat-icon-btn,
.pm-chat-close-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #ffffff;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.15s ease;
}

.pm-chat-icon-btn:hover,
.pm-chat-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ─── Broadcast Bar ────────────────────────────────────────────────────────── */
.pm-chat-broadcast-bar {
  background: #eff6ff;
  border-bottom: 1px solid #dbeafe;
  padding: 7px 16px;
  font-size: 11.5px;
  color: #1e40af;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pm-chat-broadcast-bar .broadcast-icon {
  color: #2563eb;
  flex-shrink: 0;
}

/* ─── Messages ─────────────────────────────────────────────────────────────── */
.pm-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #f8fafc;
}

.pm-chat-msg-system {
  text-align: center;
  margin: 4px 0;
}

.pm-chat-msg-system span {
  background: #e2e8f0;
  color: #475569;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: 999px;
  display: inline-block;
}

.pm-chat-msg-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-width: 85%;
}

.pm-chat-msg-row.from-customer {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.pm-chat-msg-row.from-moderator {
  align-self: flex-start;
}

.pm-chat-sender-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  border: 1.5px solid #ffffff;
}

.pm-chat-sender-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pm-chat-mini-glow {
  width: 100%;
  height: 100%;
  background: #4b5fff;
  border-radius: 50%;
  animation: pmLivePulse 1.5s infinite;
}

.pm-chat-msg-bubble {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 10px 14px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
  position: relative;
}

.pm-chat-msg-row.from-customer .pm-chat-msg-bubble {
  background: linear-gradient(135deg, #4b5fff 0%, #3a4ae8 100%);
  color: #ffffff;
  border: none;
  border-bottom-right-radius: 4px;
}

.pm-chat-msg-row.from-moderator .pm-chat-msg-bubble {
  background: #ffffff;
  border-bottom-left-radius: 4px;
}

.pm-chat-msg-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.pm-chat-sender-name {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
}

.pm-chat-msg-row.from-customer .pm-chat-sender-name {
  color: rgba(255, 255, 255, 0.8);
}

.pm-chat-msg-time {
  font-size: 10px;
  color: #94a3b8;
}

.pm-chat-msg-row.from-customer .pm-chat-msg-time {
  color: rgba(255, 255, 255, 0.7);
}

.pm-chat-msg-content {
  font-size: 13px;
  line-height: 1.48;
  color: #1e293b;
}

.pm-chat-msg-row.from-customer .pm-chat-msg-content {
  color: #ffffff;
}

.pm-chat-msg-status {
  text-align: right;
  margin-top: 2px;
}

/* Typing indicator */
.pm-chat-typing-bubble {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4b5fff;
  animation: pmTypingBounce 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes pmTypingBounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

.typing-label {
  font-size: 11px;
  color: #64748b;
  margin-left: 6px;
  font-style: italic;
}

/* ─── Quick Chips ──────────────────────────────────────────────────────────── */
.pm-chat-quick-chips {
  background: #ffffff;
  border-top: 1px solid #f1f5f9;
  padding: 8px 14px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  white-space: nowrap;
}

.pm-chat-chip-btn {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #334155;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  flex-shrink: 0;
}

.pm-chat-chip-btn:hover {
  background: #4b5fff;
  border-color: #4b5fff;
  color: #ffffff;
  transform: translateY(-1px);
}

/* ─── Input Form ───────────────────────────────────────────────────────────── */
.pm-chat-input-form {
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pm-chat-input-prefix {
  flex-shrink: 0;
}

.prefix-badge {
  font-size: 10.5px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 8px;
}

.prefix-badge.mod {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}

.prefix-badge.cust {
  background: #e0f2fe;
  color: #0284c7;
  border: 1px solid #bae6fd;
}

.pm-chat-text-input {
  flex: 1;
  height: 42px;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
  padding: 0 14px;
  font-size: 13.5px;
  outline: none;
  font-family: inherit;
  color: #0f172a;
  background: #f8fafc;
  transition: all 0.15s ease;
}

.pm-chat-text-input:focus {
  border-color: #4b5fff;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(75, 95, 255, 0.15);
}

.pm-chat-send-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #4b5fff;
  color: #ffffff;
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.pm-chat-send-btn:hover:not(:disabled) {
  background: #3a4ae8;
  transform: scale(1.05);
}

.pm-chat-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ─── Dark Mode Chat ───────────────────────────────────────────────────────── */
.pm-chat-dark .pm-chat-window {
  background: #0d0f12;
  border-color: #272c35;
  color: #f1f5f9;
}

.pm-chat-dark .pm-chat-header {
  background: #16191f;
  border-bottom-color: #272c35;
}

.pm-chat-dark .pm-chat-messages {
  background: #0d0f12;
}

.pm-chat-dark .pm-chat-broadcast-bar {
  background: #161c28;
  border-bottom-color: #1e293b;
  color: #60a5fa;
}

.pm-chat-dark .pm-chat-msg-row.from-moderator .pm-chat-msg-bubble {
  background: #1a1e27;
  border-color: #2b3240;
  color: #f1f5f9;
}

.pm-chat-dark .pm-chat-msg-row.from-moderator .pm-chat-msg-content {
  color: #f1f5f9;
}

.pm-chat-dark .pm-chat-msg-row.from-customer .pm-chat-msg-bubble {
  background: linear-gradient(135deg, #d4a373 0%, #b88755 100%);
  color: #0d0f12;
}

.pm-chat-dark .pm-chat-msg-row.from-customer .pm-chat-msg-content {
  color: #0d0f12;
  font-weight: 600;
}

.pm-chat-dark .pm-chat-quick-chips,
.pm-chat-dark .pm-chat-input-form {
  background: #16191f;
  border-top-color: #272c35;
}

.pm-chat-dark .pm-chat-chip-btn {
  background: #1f242e;
  border-color: #333a48;
  color: #cbd5e1;
}

.pm-chat-dark .pm-chat-chip-btn:hover {
  background: #d4a373;
  color: #0d0f12;
  border-color: #d4a373;
}

.pm-chat-dark .pm-chat-text-input {
  background: #1a1e27;
  border-color: #2b3240;
  color: #f1f5f9;
}

.pm-chat-dark .pm-chat-text-input:focus {
  border-color: #d4a373;
  box-shadow: 0 0 0 3px rgba(212, 163, 115, 0.2);
}

.pm-chat-dark .pm-chat-send-btn {
  background: #d4a373;
  color: #0d0f12;
}



/* ==========================================================================
   PICKME MASTERPIECE: SALON MARIA (TRI-FORMAT ARCHITECTURE)
   1. Windows Desktop Wide (1200px+)
   2. Tablet Presentation Pro (768px - 1199px)
   3. Mobile Touch Experience (< 768px)
   ========================================================================== */

:root {
  --smp-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --smp-font-serif: 'Playfair Display', Georgia, Cambria, serif;

  /* Authentic PickMe Brand Palette - Light */
  --smp-bg-page: #f8fafc;
  --smp-bg-card: #ffffff;
  --smp-bg-card-subtle: #f1f5f9;
  --smp-text-main: #101116;
  --smp-text-muted: #5e6573;
  --smp-border: #e8edf4;
  --smp-border-light: rgba(232, 237, 244, 0.8);
  
  /* Brand Accents (PickMe Electric Blue & Coral) */
  --smp-accent-primary: #4b5fff;
  --smp-accent-primary-hover: #3a4ad9;
  --smp-accent-wa: #25D366;
  --smp-accent-wa-hover: #1ebe5d;
  --smp-accent-gold: #f46870;
  --smp-accent-gold-hover: #e03c46;
  --smp-accent-green: #10b981;

  /* PickMe Natural Shadows */
  --smp-shadow-sm: 0 2px 6px rgba(16, 17, 22, 0.04);
  --smp-shadow-md: 0 4px 14px rgba(16, 17, 22, 0.06);
  --smp-shadow-lg: 0 10px 24px rgba(75, 95, 255, 0.08);
}

.smp-dark {
  --smp-bg-page: #0c0e14;
  --smp-bg-card: #131722;
  --smp-bg-card-subtle: #1c2232;
  --smp-text-main: #f8fafc;
  --smp-text-muted: #94a3b8;
  --smp-border: #232a3d;
  --smp-border-light: rgba(35, 42, 61, 0.8);
  --smp-accent-primary: #4b5fff;
  --smp-accent-primary-hover: #60a5fa;
  --smp-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.25);
  --smp-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.35);
  --smp-shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.45);
}

/* Base Container */
.smp-container {
  font-family: var(--smp-font-sans);
  background: var(--smp-bg-page);
  color: var(--smp-text-main);
  min-height: 100vh;
  transition: background-color 0.3s ease, color 0.3s ease;
  padding-bottom: 70px;
}

/* ─── TIER 1: WINDOWS DESKTOP WIDE CONTAINER (DEFAULT) ─── */
.smp-wrapper {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ─── TOP NAVIGATION BAR ─── */
.smp-nav {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(250, 248, 245, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--smp-border-light);
  height: 54px;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

.smp-dark .smp-nav {
  background: rgba(18, 20, 19, 0.92);
}

.smp-nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.smp-nav-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.smp-back-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--smp-text-muted);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--smp-bg-card-subtle);
  border: 1px solid var(--smp-border);
  transition: all 0.2s ease;
}

.smp-back-btn:hover {
  color: var(--smp-text-main);
  border-color: var(--smp-accent-primary);
}

.smp-brand-logo {
  display: flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  font-size: 17px;
  font-weight: 900;
  color: var(--smp-text-main);
  letter-spacing: -0.03em;
}

.smp-brand-logo .dot {
  color: var(--smp-accent-primary);
}

.smp-demo-tag-top {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(75, 95, 255, 0.08);
  border: 1px solid rgba(75, 95, 255, 0.22);
  color: #4b5fff;
  text-transform: uppercase;
}

.smp-nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.smp-live-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(46, 125, 50, 0.1);
  border: 1px solid rgba(46, 125, 50, 0.25);
  color: var(--smp-accent-green);
  font-size: 11.5px;
  font-weight: 700;
}

.smp-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--smp-accent-green);
  box-shadow: 0 0 6px var(--smp-accent-green);
  animation: smpPulse 2s infinite;
}

@keyframes smpPulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.6; }
  100% { transform: scale(1); opacity: 1; }
}

.smp-queue-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.28);
  color: #d97706;
  font-size: 11.5px;
  font-weight: 700;
  transition: all 0.2s ease;
}

.smp-dark .smp-queue-pill {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

/* ─── REAL-TIME WARTESCHLANGE & LAUFKUNDSCHAFT OS STRIP ─── */
.smp-live-queue-strip {
  margin-top: 14px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #ffffff;
  border: 1.5px solid #e8edf4;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(16, 17, 22, 0.04);
  gap: 14px;
  transition: all 0.2s ease;
}

.smp-dark .smp-live-queue-strip {
  background: #141720;
  border-color: #262d3d;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.smp-queue-strip-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.smp-queue-badge-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(75, 95, 255, 0.08);
  color: #4b5fff;
  display: grid;
  place-content: center;
  flex-shrink: 0;
}

.smp-dark .smp-queue-badge-icon {
  background: rgba(75, 95, 255, 0.2);
  color: #818cf8;
}

.smp-queue-strip-texts {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.smp-queue-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.smp-queue-kicker {
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #4b5fff;
  text-transform: uppercase;
}

.smp-queue-wait-chip {
  font-size: 10px;
  font-weight: 800;
  color: #d97706;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.25);
  padding: 1px 6px;
  border-radius: 999px;
}

.smp-dark .smp-queue-wait-chip {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.2);
}

.smp-queue-count-line {
  font-size: 12.5px;
  color: var(--smp-text-main);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.smp-queue-count-line strong {
  color: #101116;
  font-weight: 800;
}

.smp-dark .smp-queue-count-line strong {
  color: #f8fafc;
}

.smp-queue-dot-sep {
  color: var(--smp-border);
  font-weight: 900;
}

.smp-queue-note {
  font-size: 11.5px;
  color: var(--smp-text-muted);
}

.smp-queue-strip-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.smp-queue-sim-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--smp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.smp-queue-btn-group {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--smp-bg-card-subtle);
  border: 1px solid var(--smp-border);
  padding: 3px 4px;
  border-radius: 999px;
}

.smp-btn-queue-step {
  border: none;
  background: #ffffff;
  color: #101116;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: all 0.15s ease;
}

.smp-dark .smp-btn-queue-step {
  background: #1e2433;
  color: #f8fafc;
}

.smp-btn-queue-step:hover {
  transform: scale(1.04);
}

.smp-btn-queue-step.plus {
  background: #4b5fff;
  color: #ffffff;
}

.smp-btn-queue-step.plus:hover {
  background: #3a4ad9;
}

.smp-queue-val {
  font-size: 12.5px;
  font-weight: 900;
  color: #4b5fff;
  min-width: 18px;
  text-align: center;
}

.smp-queue-sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #059669;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.smp-dark .smp-queue-sync-badge {
  color: #34d399;
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.35);
}

@media (max-width: 768px) {
  .smp-live-queue-strip {
    flex-direction: column;
    align-items: stretch;
  }
  .smp-queue-strip-right {
    justify-content: flex-end;
  }
}

.smp-theme-toggle {
  background: var(--smp-bg-card-subtle);
  border: 1px solid var(--smp-border);
  color: var(--smp-text-main);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.smp-btn-melisa-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #4b5fff 0%, #3a4ad9 100%);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(75, 95, 255, 0.25);
  transition: all 0.2s ease;
}

.smp-btn-melisa-nav:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(75, 95, 255, 0.35);
}

/* ─── SECTION 1: HERO SHOWCASE ─── */
.smp-hero {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.smp-gallery-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--smp-shadow-sm);
  background: #101116;
  border: 1px solid var(--smp-border);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 310px;
}

.smp-main-image-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  flex: 1;
  overflow: hidden;
}

.smp-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: brightness(1.06) contrast(1.02) saturate(1.08);
  transition: transform 0.4s ease;
}

.smp-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28, 34, 30, 0.05) 0%, rgba(28, 34, 30, 0.6) 100%);
  pointer-events: none;
}

.smp-verified-badge-float {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(28, 34, 30, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.smp-gallery-thumbs {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  gap: 6px;
  background: rgba(28, 34, 30, 0.75);
  backdrop-filter: blur(6px);
  padding: 4px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.smp-thumb-btn {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  overflow: hidden;
  border: 1.5px solid transparent;
  padding: 0;
  cursor: pointer;
  background: none;
}

.smp-thumb-btn.active {
  border-color: #ffffff;
  transform: scale(1.06);
}

.smp-thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Salon Info Right */
.smp-hero-info {
  background: var(--smp-bg-card);
  border: 1px solid var(--smp-border);
  border-radius: 18px;
  padding: 20px 24px;
  box-shadow: var(--smp-shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  box-sizing: border-box;
  gap: 12px;
}

.smp-hero-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.smp-title-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.smp-salon-title {
  font-family: var(--smp-font-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--smp-text-main);
  margin: 0;
  line-height: 1.15;
}

.smp-salon-subtitle {
  font-size: 13px;
  color: var(--smp-text-muted);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.smp-rating-badge {
  background: #fdfaf3;
  border: 1px solid #f7ecd5;
  color: #9c6d1d;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  white-space: nowrap;
}

.smp-feature-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.smp-feat-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--smp-bg-card-subtle);
  border: 1px solid var(--smp-border);
  color: var(--smp-text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.smp-feat-pill.highlight {
  background: rgba(75, 95, 255, 0.08);
  border-color: rgba(75, 95, 255, 0.25);
  color: var(--smp-accent-primary);
}

.smp-salon-desc {
  font-size: 13px;
  color: var(--smp-text-muted);
  line-height: 1.5;
  margin: 0;
}

/* Ecosystem Buttons */
.smp-hero-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.smp-primary-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  width: 100%;
}

@media (max-width: 520px) {
  .smp-primary-actions-grid {
    grid-template-columns: 1fr;
  }
}

.smp-btn-action-twin {
  height: 52px;
  border-radius: 12px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  border: none;
  text-align: left;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
  width: 100%;
}

/* 1. WhatsApp Termin (Inkl. Kalender) */
.smp-btn-action-twin.is-whatsapp {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  color: #101116;
  box-shadow: 0 2px 8px rgba(16, 17, 22, 0.05);
}

.smp-dark .smp-btn-action-twin.is-whatsapp {
  background: #181d28;
  border-color: #262f40;
  color: #f8fafc;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.smp-btn-action-twin.is-whatsapp:hover {
  border-color: #25D366;
  transform: translateY(-1.5px);
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.2);
}

/* 2. PickMe Express (5 Min.) - Strictly Authentic PickMe Blue */
.smp-btn-action-twin.is-express {
  background: linear-gradient(135deg, #4b5fff 0%, #3a4ad9 100%);
  color: #ffffff;
  border: 1.5px solid transparent;
  box-shadow: 0 3px 12px rgba(75, 95, 255, 0.32);
}

.smp-btn-action-twin.is-express:hover {
  background: linear-gradient(135deg, #5b6fff 0%, #4b5fff 100%);
  transform: translateY(-1.5px);
  box-shadow: 0 6px 18px rgba(75, 95, 255, 0.45);
}

.smp-twin-icon-badge {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-content: center;
  flex-shrink: 0;
}

.smp-twin-icon-badge.is-green {
  background: rgba(37, 211, 102, 0.12);
  color: #25D366;
}

.smp-dark .smp-twin-icon-badge.is-green {
  background: rgba(37, 211, 102, 0.2);
  color: #4ade80;
}

.smp-twin-icon-badge.is-blue {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.smp-zap-pulse {
  animation: smpZapPulse 1.2s infinite;
  color: #fffb00;
  filter: drop-shadow(0 0 4px rgba(255, 251, 0, 0.8));
}

@keyframes smpZapPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: 0.85; }
}

.smp-twin-text-block {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  overflow: hidden;
}

.smp-twin-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.smp-twin-sub {
  font-size: 10.5px;
  font-weight: 600;
  opacity: 0.8;
  white-space: nowrap;
}

/* Discreet Kiosk Row */
.smp-kiosk-row {
  width: 100%;
}

.smp-btn-ecosystem-kiosk {
  background: var(--smp-bg-card-subtle);
  border: 1px solid var(--smp-border);
  color: var(--smp-text-main);
  border-radius: 9px;
  height: 34px;
  padding: 0 12px;
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
  width: 100%;
  box-sizing: border-box;
}

.smp-kiosk-left {
  display: flex;
  align-items: center;
  gap: 7px;
}

.smp-kiosk-tag {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--smp-text-muted);
  background: rgba(0, 0, 0, 0.04);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: auto;
  margin-right: 6px;
}

.smp-dark .smp-kiosk-tag {
  background: rgba(255, 255, 255, 0.06);
}

.smp-btn-ecosystem-kiosk:hover {
  border-color: #4b5fff;
  color: #4b5fff;
  background: var(--smp-bg-card);
}

/* ─── SECTION 2: WORKSTATIONS AM STUHL (3 EQUAL COLUMNS) ─── */
.smp-section {
  margin-top: 28px;
}

.smp-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 12px;
  min-height: 32px;
}

.smp-section-title-wrap {
  display: flex;
  flex-direction: column;
}

.smp-section-tag {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--smp-accent-primary);
}

.smp-section-title {
  font-family: var(--smp-font-serif);
  font-size: 21px;
  font-weight: 700;
  color: var(--smp-text-main);
  margin: 0;
}

.smp-workstations-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.smp-master-card {
  background: var(--smp-bg-card);
  border: 1px solid var(--smp-border);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: var(--smp-shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  box-sizing: border-box;
  gap: 12px;
  transition: all 0.2s ease;
}

.smp-master-card:hover {
  transform: translateY(-2px);
  border-color: var(--smp-accent-primary);
}

.smp-master-top {
  display: flex;
  gap: 12px;
  align-items: center;
}

.smp-master-avatar-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.smp-master-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.smp-master-info {
  flex: 1;
  min-width: 0;
}

.smp-master-name-line {
  display: flex;
  align-items: center;
  gap: 5px;
}

.smp-master-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--smp-text-main);
}

.smp-master-role {
  font-size: 11.5px;
  color: var(--smp-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.smp-master-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  margin-top: 4px;
  height: 20px;
  box-sizing: border-box;
}

.smp-master-status-pill.free {
  background: #e8f5e9;
  color: #2e7d32;
}

.smp-master-status-pill.busy {
  background: #fbe9e7;
  color: #c62828;
}

.smp-master-action-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--smp-border-light);
  padding-top: 10px;
  margin-top: auto;
}

.smp-btn-master-book {
  background: var(--smp-bg-card-subtle);
  border: 1px solid var(--smp-border);
  color: var(--smp-accent-primary);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
}

.smp-btn-master-book:hover {
  background: var(--smp-accent-primary);
  color: #ffffff;
  border-color: var(--smp-accent-primary);
}

/* ─── SECTION 3: PREISE & SERVICES (3 EQUAL COLUMNS) ─── */
.smp-services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.smp-service-category-card {
  background: var(--smp-bg-card);
  border: 1px solid var(--smp-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--smp-shadow-sm);
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

.smp-category-header {
  padding: 10px 14px;
  background: var(--smp-bg-card-subtle);
  border-bottom: 1px solid var(--smp-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 38px;
  box-sizing: border-box;
}

.smp-category-title {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--smp-text-main);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}

.smp-category-badge {
  font-size: 11px;
  color: var(--smp-accent-primary);
  font-weight: 700;
}

.smp-service-items-list {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.smp-service-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--smp-border-light);
  min-height: 48px;
  box-sizing: border-box;
}

.smp-service-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.smp-service-item-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--smp-text-main);
}

.smp-service-item-sub {
  font-size: 11px;
  color: var(--smp-text-muted);
}

.smp-service-price {
  font-size: 14px;
  font-weight: 800;
  color: var(--smp-text-main);
}

.smp-btn-service-book {
  background: rgba(75, 95, 255, 0.1);
  color: var(--smp-accent-primary);
  border: none;
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
}

.smp-btn-service-book:hover {
  background: var(--smp-accent-primary);
  color: #ffffff;
}

/* ─── SECTION 4: REAL SHOP PREVIEW ─── */
.smp-shop-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.smp-real-product-card {
  background: var(--smp-bg-card);
  border: 1px solid var(--smp-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--smp-shadow-sm);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.smp-real-product-card:hover {
  transform: translateY(-2px);
  border-color: var(--smp-accent-primary);
}

.smp-real-product-img-wrap {
  position: relative;
  width: 100%;
  height: 125px;
  overflow: hidden;
  background: #f6f3ee;
}

.smp-real-product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.smp-real-product-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(28, 34, 30, 0.75);
  backdrop-filter: blur(6px);
  color: #ffffff;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 800;
}

.smp-real-product-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  gap: 8px;
}

.smp-real-product-meta {
  min-height: 42px;
}

.smp-real-product-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--smp-text-main);
  margin: 0;
}

.smp-real-product-sub {
  font-size: 11.5px;
  color: var(--smp-text-muted);
  margin-top: 1px;
}

.smp-real-product-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--smp-border-light);
  padding-top: 10px;
  margin-top: auto;
}

.smp-real-product-price {
  font-size: 15px;
  font-weight: 900;
  color: var(--smp-text-main);
}

.smp-btn-product-link {
  color: var(--smp-accent-primary);
  font-size: 11.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 3px;
}

/* ─── SECTION 5: ABOUT & CONTACT (50% / 50% SIDE-BY-SIDE) ─── */
.smp-bottom-split-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.smp-bottom-col {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.smp-about-grid-compact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  flex: 1;
  height: 100%;
}

.smp-fact-card {
  background: var(--smp-bg-card);
  border: 1px solid var(--smp-border);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: var(--smp-shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  height: 100%;
  box-sizing: border-box;
}

.smp-fact-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-content: center;
  font-size: 15px;
}

.smp-fact-label {
  font-size: 10.5px;
  color: var(--smp-text-muted);
  font-weight: 600;
}

.smp-fact-value {
  font-size: 13px;
  font-weight: 800;
  color: var(--smp-text-main);
}

.smp-contact-card {
  background: var(--smp-bg-card);
  border: 1px solid var(--smp-border);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: var(--smp-shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  box-sizing: border-box;
  gap: 12px;
}

.smp-contact-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.smp-contact-line-info {
  flex: 1;
}

.smp-contact-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--smp-text-muted);
}

.smp-contact-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--smp-text-main);
}

.smp-btn-map-action {
  background: var(--smp-bg-card-subtle);
  border: 1px solid var(--smp-border);
  color: var(--smp-accent-primary);
  border-radius: 10px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.smp-btn-map-action:hover {
  background: var(--smp-accent-primary);
  color: #ffffff;
  border-color: var(--smp-accent-primary);
}

/* Floating Chat Trigger */
.smp-floating-chat-trigger {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 950;
  background: #ffffff;
  color: #101116;
  border: 1.5px solid #e8edf4;
  border-radius: 999px;
  padding: 8px 16px 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 26px rgba(16, 17, 22, 0.12);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.smp-dark .smp-floating-chat-trigger {
  background: #141720;
  color: #f8fafc;
  border-color: #262d3d;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
}

.smp-floating-chat-trigger:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 32px rgba(75, 95, 255, 0.18);
  border-color: var(--smp-accent-primary);
}

.smp-chat-pulse-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4b5fff 0%, #3a4ad9 100%);
  color: #ffffff;
  display: grid;
  place-content: center;
}

.smp-chat-btn-text {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.smp-chat-btn-title {
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.2;
}

.smp-chat-btn-sub {
  font-size: 10.5px;
  color: var(--smp-text-muted);
}

.smp-chat-unread-badge {
  background: #25D366;
  color: #ffffff;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 900;
  display: grid;
  place-content: center;
}

/* Footer */
.smp-footer {
  margin-top: 32px;
  border-top: 1px solid var(--smp-border);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  color: var(--smp-text-muted);
  flex-wrap: wrap;
  gap: 12px;
}

.smp-footer-links {
  display: flex;
  gap: 14px;
}

.smp-footer-links a {
  color: var(--smp-text-muted);
  text-decoration: none;
}


/* ─── TIER 2: TABLET PRO PRESENTATION (768px - 1199px) ─── */
@media (min-width: 768px) and (max-width: 1199px) {
  .smp-wrapper {
    max-width: 100%;
    padding: 0 20px;
  }

  .smp-hero {
    grid-template-columns: 1fr 1.05fr;
    gap: 14px;
  }

  .smp-gallery-card {
    min-height: 270px;
  }

  .smp-hero-info {
    padding: 16px 18px;
    gap: 10px;
  }

  .smp-salon-title {
    font-size: 23px;
  }

  /* Workstations on Tablet: Generous touch targets, no squishing! */
  .smp-workstations-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .smp-master-card {
    padding: 12px 10px;
    gap: 8px;
  }

  .smp-master-top {
    gap: 8px;
  }

  .smp-master-avatar-wrap {
    width: 42px;
    height: 42px;
  }

  .smp-master-name {
    font-size: 13.5px;
  }

  .smp-master-role {
    font-size: 10.5px;
  }

  .smp-master-status-pill {
    font-size: 10px;
    padding: 2px 6px;
    height: 18px;
  }

  .smp-btn-master-book {
    padding: 4px 8px;
    font-size: 10.5px;
  }

  /* Services on Tablet */
  .smp-services-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .smp-category-header {
    padding: 8px 10px;
  }

  .smp-service-items-list {
    padding: 10px;
    gap: 8px;
  }

  .smp-service-item-title {
    font-size: 12px;
  }

  .smp-service-price {
    font-size: 13px;
  }

  /* Shop on Tablet */
  .smp-shop-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .smp-real-product-img-wrap {
    height: 110px;
  }

  .smp-real-product-body {
    padding: 10px;
  }

  .smp-real-product-name {
    font-size: 12.5px;
  }
}

/* Tablet Portrait Specific Comfort (768px - 940px) */
@media (min-width: 768px) and (max-width: 940px) {
  .smp-hero {
    grid-template-columns: 1fr;
  }

  .smp-gallery-card {
    height: 280px;
  }

  .smp-services-grid {
    grid-template-columns: 1fr;
  }

  .smp-workstations-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ─── TIER 3: MOBILE TOUCH EXPERIENCE (< 768px) ─── */
@media (max-width: 767px) {
  .smp-wrapper {
    max-width: 100%;
    padding: 0 14px;
  }

  .smp-nav {
    height: 50px;
  }

  .smp-brand-logo {
    font-size: 15px;
  }

  .smp-demo-tag-top {
    display: none;
  }

  .smp-live-pill span {
    display: none;
  }

  .smp-btn-melisa-nav span {
    display: none;
  }

  .smp-btn-melisa-nav {
    padding: 6px 10px;
  }

  /* Hero on Mobile: Single Column Flow */
  .smp-hero {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 12px;
  }

  .smp-gallery-card {
    height: 230px;
    min-height: 230px;
    border-radius: 16px;
  }

  .smp-hero-info {
    padding: 16px;
    border-radius: 16px;
    gap: 12px;
  }

  .smp-salon-title {
    font-size: 22px;
  }

  .smp-salon-subtitle {
    font-size: 12px;
  }

  .smp-primary-actions-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .smp-btn-action-twin {
    height: 52px;
  }

  .smp-btn-ecosystem-kiosk {
    height: 36px;
    font-size: 11.5px;
  }

  /* Workstations on Mobile: Clean Full-Width Cards */
  .smp-workstations-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .smp-master-card {
    padding: 12px 14px;
    border-radius: 14px;
  }

  /* Services on Mobile: 1 Column Full Width */
  .smp-services-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .smp-service-category-card {
    border-radius: 14px;
  }

  /* Shop on Mobile: 1 Column Full Width */
  .smp-shop-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .smp-real-product-card {
    border-radius: 14px;
  }

  .smp-real-product-img-wrap {
    height: 140px;
  }

  /* Bottom Split on Mobile: Stack */
  .smp-bottom-split-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .smp-about-grid-compact {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .smp-fact-card {
    padding: 10px;
    border-radius: 12px;
  }

  .smp-contact-card {
    padding: 16px;
    border-radius: 14px;
  }

  /* Floating Chat Button on Mobile: Compact */
  .smp-floating-chat-trigger {
    bottom: 16px;
    right: 14px;
    padding: 6px 12px 6px 8px;
    gap: 8px;
  }

  .smp-chat-pulse-avatar {
    width: 32px;
    height: 32px;
  }

  .smp-chat-btn-title {
    font-size: 11.5px;
  }

  .smp-chat-btn-sub {
    display: none;
  }

  .smp-footer {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
}
/* PickMe Express Hot Modal */
.pme-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(16, 17, 22, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: pmeFadeIn 0.2s ease-out;
}

@keyframes pmeFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.pme-modal-card {
  width: 100%;
  max-width: 460px;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 20px 40px rgba(16, 17, 22, 0.25), 0 0 30px rgba(75, 95, 255, 0.15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: pmeSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pmeSlideUp {
  from { transform: translateY(20px) scale(0.97); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.pme-modal-header {
  padding: 20px 22px 14px 22px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid #edf2f7;
  position: relative;
}

.pme-hot-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #ffffff;
  background: linear-gradient(135deg, #4b5fff 0%, #3a4ad9 100%);
  padding: 3px 8px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(75, 95, 255, 0.4);
  margin-bottom: 6px;
}

.pme-modal-title {
  font-size: 20px;
  font-weight: 800;
  color: #101116;
  margin: 0 0 4px 0;
  font-family: 'Playfair Display', Georgia, serif;
}

.pme-modal-sub {
  font-size: 12.5px;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}

.pme-close-btn {
  background: #f1f5f9;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pme-close-btn:hover {
  background: #e2e8f0;
  color: #101116;
}

/* Form */
.pme-form {
  padding: 18px 22px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pme-form-info-box {
  display: flex;
  gap: 10px;
  background: rgba(75, 95, 255, 0.06);
  border: 1px solid rgba(75, 95, 255, 0.2);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 12px;
  color: #334155;
  line-height: 1.4;
}

.pme-form-info-box strong {
  display: block;
  color: #4b5fff;
  font-weight: 800;
  margin-bottom: 2px;
}

.pme-form-info-box p {
  margin: 0;
}

.pme-field-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pme-label {
  font-size: 11.5px;
  font-weight: 700;
  color: #334155;
}

.pme-input,
.pme-select {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  background: #ffffff;
  color: #101116;
}

.pme-input:focus,
.pme-select:focus {
  border-color: #4b5fff;
  box-shadow: 0 0 0 3px rgba(75, 95, 255, 0.15);
}

.pme-btn-submit-hot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, #4b5fff 0%, #3a4ad9 100%);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(75, 95, 255, 0.35);
  transition: all 0.2s ease;
  margin-top: 4px;
}

.pme-btn-submit-hot:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(75, 95, 255, 0.45);
}

/* Waiting View */
.pme-waiting-view {
  padding: 36px 22px 26px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.pme-radar-ring {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(75, 95, 255, 0.08);
  display: grid;
  place-content: center;
  margin-bottom: 16px;
}

.pme-radar-pulse {
  position: absolute;
  inset: -8px;
  border: 2px solid #4b5fff;
  border-radius: 50%;
  animation: pmeRadar 1.8s infinite cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0.6;
}

@keyframes pmeRadar {
  0% { transform: scale(0.8); opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}

.pme-countdown-display {
  font-size: 46px;
  font-weight: 900;
  font-family: 'JetBrains Mono', monospace, sans-serif;
  color: #101116;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 8px;
}

.pme-countdown-label {
  font-size: 12.5px;
  color: #64748b;
  margin: 0 0 20px 0;
  max-width: 320px;
}

.pme-steps-progress {
  width: 100%;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  text-align: left;
  margin-bottom: 20px;
}

.pme-step-done {
  color: #059669;
  font-weight: 700;
}

.pme-step-active {
  color: #4b5fff;
  font-weight: 700;
  animation: pmeBlink 1.5s infinite;
}

@keyframes pmeBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.pme-sim-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #94a3b8;
}

.pme-btn-sim {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
}

.pme-btn-sim.accept {
  color: #059669;
  border-color: #a7f3d0;
}

.pme-btn-sim.reject {
  color: #dc2626;
  border-color: #fecaca;
}

/* Result Views */
.pme-result-view {
  padding: 26px 22px 24px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.pme-result-icon {
  margin-bottom: 12px;
}

.pme-result-title {
  font-size: 20px;
  font-weight: 800;
  color: #101116;
  margin: 0 0 6px 0;
}

.pme-result-desc {
  font-size: 13px;
  color: #475569;
  line-height: 1.45;
  margin: 0 0 16px 0;
}

.pme-result-card {
  width: 100%;
  box-sizing: border-box;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  margin-bottom: 18px;
  text-align: left;
}

.pme-result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pme-result-row span {
  color: #64748b;
}

.pme-result-row strong {
  color: #101116;
}

.pme-action-stack {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pme-btn-wa-confirm {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px;
  border-radius: 12px;
  background: #25D366;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 3px 12px rgba(37, 211, 102, 0.3);
  transition: all 0.2s ease;
}

.pme-btn-wa-confirm:hover {
  background: #1eb855;
  transform: translateY(-1px);
}

.pme-btn-route {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 9px;
  border-radius: 12px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #101116;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
}

.pme-btn-route:hover {
  background: #e2e8f0;
}

.pme-btn-done {
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px;
}

.pme-btn-done:hover {
  color: #101116;
}

.pme-alt-box {
  width: 100%;
  box-sizing: border-box;
  background: #fff1f2;
  border: 1px solid #fecdd3;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 12px;
  text-align: left;
  color: #881337;
  margin-bottom: 16px;
}

.pme-alt-box p {
  margin: 0 0 6px 0;
}

.pme-alt-box ul {
  margin: 0;
  padding-left: 16px;
}
.wizard-page{
  min-height:100vh;
  background:#f7f4ec;
  color:#123b38;
}

.wizard-header{
  height:68px;
  padding:0 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-sizing:border-box;
  background:#fff;
  border-bottom:1px solid #e8e2d7;
}

.wizard-header > div{
  display:flex;
  align-items:center;
  gap:16px;
}

.wizard-logo{
  font-size:28px;
  font-weight:800;
}

.wizard-header span{
  color:#888278;
  font-size:12px;
}

.wizard-layout{
  max-width:1400px;
  height:calc(100vh - 68px);
  margin:auto;
  padding:22px;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:22px;
}

.wizard-form,
.wizard-preview{
  min-height:0;
  background:white;
  border:1px solid #e8e2d7;
  border-radius:26px;
  box-shadow:0 18px 50px rgba(20,45,40,.07);
}

.wizard-form{
  overflow:hidden;
  display:grid;
  grid-template-rows:auto 1fr auto;
}

.wizard-nav{
  display:flex;
  gap:8px;
  padding:14px 18px;
  border-bottom:1px solid #e8e2d7;
  background:#faf8f4;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
}

.wizard-nav::-webkit-scrollbar{
  display:none;
}

.wizard-nav button{
  border:1px solid #e4ded4;
  padding:8px 14px;
  border-radius:12px;
  background:#ffffff;
  color:#657260;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:all 0.15s ease;
  box-shadow:0 1px 3px rgba(18,63,57,.02);
}

.wizard-nav button:hover{
  border-color:#123f39;
  color:#123f39;
  background:#fdfcfa;
}

.wizard-nav button.active{
  background:#123f39;
  border-color:#123f39;
  color:#ffffff;
  box-shadow:0 2px 8px rgba(18,63,57,.2);
}

.wizard-nav button span{
  display:inline-grid;
  width:20px;
  height:20px;
  place-items:center;
  border-radius:50%;
  background:rgba(0,0,0,.08);
  font-size:11px;
  font-weight:800;
}

.wizard-nav button.active span{
  background:rgba(255,255,255,.22);
  color:#ffffff;
}

.wizard-content{
  padding:24px 28px;
  overflow-y:auto;
  background:#ffffff;
}

.wizard-eyebrow{
  color:#ad8541;
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
}

.wizard-content h1{
  margin:5px 0 8px;
  font-size:26px;
  font-family:Georgia, serif;
  color:#123f39;
}

.wizard-intro{
  color:#70736d;
  line-height:1.5;
  max-width:650px;
  font-size:13.5px;
}

.wizard-content label{
  display:block;
  margin-top:14px;
  font-size:12.5px;
  font-weight:800;
  color:#123f39;
  letter-spacing:-0.01em;
}

.wizard-content input,
.wizard-content textarea,
.wizard-content select{
  width:100%;
  box-sizing:border-box;
  margin-top:6px;
  padding:12px 14px;
  border:1.5px solid #ded9ce;
  border-radius:12px;
  background:#ffffff;
  color:#123f39;
  font-size:14px;
  font-weight:500;
  font-family:inherit;
  transition:all 0.15s ease;
  box-shadow:0 1px 3px rgba(18,63,57,.02);
}

.wizard-content input:focus,
.wizard-content textarea:focus,
.wizard-content select:focus{
  border-color:#123f39;
  background:#ffffff;
  outline:none;
  box-shadow:0 0 0 3px rgba(18,63,57,.12);
}

.wizard-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px;
}

.wizard-upload{
  display:inline-block !important;
  padding:12px 18px;
  background:#184d45;
  color:white;
  border-radius:12px;
  cursor:pointer;
}

.wizard-upload input{
  display:none;
}

.wizard-photos{
  margin-top:18px;
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:9px;
}

.wizard-photos div,
.wizard-photos img{
  width:100%;
  height:120px;
  object-fit:cover;
  border-radius:14px;
  background:#eae5da;
}

.wizard-photos div{
  display:grid;
  place-items:center;
  color:#958f84;
}

.wizard-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:12px;
}

.wizard-tags span{
  padding:6px 10px;
  border-radius:999px;
  background:#f1eee5;
  font-size:11px;
}

.wizard-team{
  display:flex;
  gap:9px;
  margin-top:13px;
}

.wizard-team > div{
  min-width:100px;
  padding:11px;
  display:flex;
  flex-direction:column;
  background:#f7f4ec;
  border-radius:13px;
}

.wizard-team i,
.preview-live i{
  width:9px;
  height:9px;
  display:block;
  border-radius:50%;
}

.wizard-team i.free,
.preview-live i.free{
  background:#55b879;
}

.wizard-team i.busy,
.preview-live i.busy{
  background:#cf5360;
}

.wizard-publish-box{
  margin-top:22px;
  padding:20px;
  border-radius:18px;
  background:#fff8e8;
  border:1px solid #ead9ac;
}

.wizard-publish-box small,
.wizard-publish-box strong{
  display:block;
}

.wizard-publish-box strong{
  margin-top:7px;
  font-size:20px;
}

.wizard-actions{
  padding:14px 22px;
  display:flex;
  justify-content:space-between;
  border-top:1px solid #eee8de;
}

.wizard-actions button{
  border:0;
  padding:11px 20px;
  border-radius:11px;
  font-weight:800;
  cursor:pointer;
}

.wizard-actions button:disabled{
  opacity:.3;
}

.wizard-actions .primary{
  background:#184d45;
  color:white;
}

.wizard-actions .publish{
  background:#b58a3e;
}

.wizard-preview{
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.preview-header{
  padding:13px 18px;
  display:flex;
  justify-content:space-between;
  background:#173f3b;
  color:white;
  font-size:10px;
}

.preview-image{
  height:205px;
  flex-shrink:0;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#cfc4a9,#76817a);
  background-size:cover;
  background-position:center;
  color:white;
  font-size:24px;
}

.preview-content{
  padding:20px 24px;
  overflow:auto;
}

.preview-badge{
  display:inline-block;
  padding:5px 9px;
  background:#eaf4eb;
  color:#37724c;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
}

.preview-content h2{
  margin:10px 0 2px;
  font-size:27px;
}

.preview-live{
  margin-top:15px;
  padding:13px;
  background:#faf7ef;
  border-radius:14px;
}

.preview-live > strong{
  display:block;
  margin-bottom:7px;
}

.preview-live > div{
  display:grid;
  grid-template-columns:12px 1fr auto;
  align-items:center;
  gap:7px;
  padding:3px 0;
  font-size:12px;
}

.preview-content > button{
  width:100%;
  margin-top:13px;
  padding:11px;
  border:0;
  border-radius:11px;
  background:#184d45;
  color:white;
  font-weight:800;
}

@media(max-width:900px){
  .wizard-layout{
    height:auto;
    grid-template-columns:1fr;
  }

  .wizard-nav{
    overflow:auto;
  }

  .wizard-header{
    padding:0 16px;
  }
}

/* ===== PHOTO MANAGER ===== */

.photo-recommendation{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:15px 0;
}

.photo-recommendation b,
.photo-recommendation span{
  padding:7px 10px;
  border-radius:999px;
  font-size:11px;
}

.photo-recommendation b{
  background:#173f3b;
  color:white;
}

.photo-recommendation span{
  background:#f3efe5;
  color:#646057;
}

.photo-count{
  display:inline-block;
  margin-left:12px;
  font-size:12px;
  color:#777268;
}

.wizard-photo-empty{
  margin-top:18px;
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:10px;
}

.wizard-photo-empty div{
  min-height:125px;
  display:grid;
  place-items:center;
  border:1px dashed #d6cfc0;
  border-radius:15px;
  background:#f8f5ed;
  color:#989186;
}

.wizard-photo-manager{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
}

.photo-card{
  height:145px;
  position:relative;
  overflow:hidden;
  border-radius:16px;
  background:#eee9df;
  border:2px solid transparent;
}

.photo-card.main{
  border-color:#b58a3e;
}

.photo-card img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.photo-remove{
  width:28px;
  height:28px;
  position:absolute;
  top:8px;
  right:8px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(20,35,31,.82);
  color:white;
  font-size:20px;
  cursor:pointer;
}

.photo-main-label{
  position:absolute;
  left:8px;
  bottom:8px;
  padding:6px 9px;
  border-radius:999px;
  background:#b58a3e;
  color:white;
  font-size:10px;
  font-weight:800;
}

.photo-make-main{
  position:absolute;
  left:8px;
  bottom:8px;
  padding:6px 9px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:#173f3b;
  font-size:10px;
  font-weight:800;
  cursor:pointer;
}


/* ===== SERVICES ===== */

.service-picker{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:18px;
}

.service-row{
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 11px;
  border:1px solid #e2ddd2;
  border-radius:14px;
  background:#faf8f3;
}

.service-row.selected{
  border-color:#bdd2c9;
  background:#f1f7f3;
}

.service-check{
  min-width:0;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0;
  border:0;
  background:transparent;
  color:#173f3b;
  text-align:left;
  cursor:pointer;
}

.service-check > span{
  width:25px;
  height:25px;
  flex-shrink:0;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#ebe6da;
  font-weight:900;
}

.service-row.selected .service-check > span{
  background:#184d45;
  color:white;
}

.service-check strong{
  font-size:12px;
}

.service-price{
  display:flex;
  align-items:center;
  gap:4px;
  flex-shrink:0;
}

.service-price input{
  width:65px !important;
  margin:0 !important;
  padding:8px !important;
  text-align:right;
  background:white !important;
}

.service-price span{
  font-size:13px;
  font-weight:800;
}


/* ===== TEAM EDITOR ===== */

.team-editor{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:9px;
}

.team-editor-row{
  display:grid;
  grid-template-columns:46px 1fr 34px;
  gap:12px;
  align-items:center;
  padding:10px;
  border:1px solid #e2ddd2;
  border-radius:15px;
  background:#faf8f3;
}

.team-editor-row label{
  margin:0 !important;
}

.team-avatar{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#e9e1cf;
  color:#173f3b;
  font-size:17px;
  font-weight:900;
}

.team-remove{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  background:#eee9df;
  color:#726d64;
  font-size:18px;
  cursor:pointer;
}

.team-remove:disabled{
  opacity:.25;
}

.add-team-button{
  margin-top:13px;
  padding:10px 14px;
  border:1px solid #bdd2c9;
  border-radius:11px;
  background:white;
  color:#184d45;
  font-weight:800;
  cursor:pointer;
}


/* ===== PREVIEW SERVICES ===== */

.preview-services{
  margin-top:15px;
  display:flex;
  flex-direction:column;
  gap:5px;
}

.preview-services > div{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:7px 9px;
  border-radius:9px;
  background:#f7f4ec;
  font-size:11px;
}

.preview-services strong{
  white-space:nowrap;
}


/* ===== FINISH SUMMARY ===== */

.wizard-summary{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:20px;
}

.wizard-summary > div{
  padding:15px;
  display:flex;
  flex-direction:column;
  border-radius:14px;
  background:#f7f4ec;
}

.wizard-summary strong{
  font-size:23px;
}

.wizard-summary span{
  color:#767168;
  font-size:11px;
}


@media(max-width:700px){
  .service-picker{
    grid-template-columns:1fr;
  }

  .wizard-photo-manager{
    grid-template-columns:1fr 1fr;
  }

  .wizard-photo-empty{
    grid-template-columns:1fr 1fr;
  }
}

/* ===== Profil & Shop setup ===== */

.quick-options{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:8px 0 15px;
}

.quick-options button{
  padding:8px 11px;
  border:1px solid #ddd8ce;
  border-radius:999px;
  background:#f7f4ec;
  color:#4e554f;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
}

.quick-options button.selected{
  border-color:#184d45;
  background:#184d45;
  color:white;
}

.parking-toggle{
  display:flex !important;
  align-items:center;
  gap:9px;
  padding:10px 0;
}

.parking-toggle input{
  width:auto !important;
  margin:0 !important;
}

.setup-divider{
  height:1px;
  margin:20px 0;
  background:#e9e4da;
}

.shop-editor{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.shop-editor-row{
  display:grid;
  grid-template-columns:1fr 120px 34px;
  align-items:center;
  gap:8px;
}

.shop-editor-row input{
  margin:0 !important;
}

.shop-price-input{
  display:flex;
  align-items:center;
  gap:4px;
}

.shop-price-input input{
  min-width:0;
}

.shop-editor-row > button{
  width:30px;
  height:30px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#eee9df;
  font-size:18px;
  cursor:pointer;
}

.wizard-summary{
  grid-template-columns:repeat(4,1fr);
}

/* ===== Premium Shop Editor ===== */

.shop-setup{
  margin-top:4px;
}

.shop-setup-head{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-start;
}

.shop-setup-head h3{
  margin:0;
}

.shop-setup-head p{
  max-width:560px;
  color:#74746e;
  line-height:1.4;
}

.shop-setup-head > span{
  padding:6px 10px;
  border-radius:999px;
  background:#f1eee5;
  font-size:10px;
  white-space:nowrap;
}

.shop-product-editor-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:14px;
}

.shop-product-editor-card{
  overflow:hidden;
  border:1px solid #e1dbcf;
  border-radius:17px;
  background:#faf8f3;
}

.shop-product-photo{
  height:135px;
  position:relative;
  overflow:hidden;
  background:#e8e1d3;
}

.shop-product-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.shop-photo-placeholder{
  height:100%;
  display:grid;
  place-content:center;
  text-align:center;
  color:#8d8679;
}

.shop-photo-placeholder strong{
  font-size:30px;
}

.shop-photo-placeholder span{
  font-size:10px;
}

.shop-photo-button{
  position:absolute;
  left:8px;
  bottom:8px;
  margin:0 !important;
  padding:6px 9px;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:#173f3b;
  cursor:pointer;
}

.shop-photo-button input{
  display:none;
}

.shop-remove-image{
  position:absolute;
  right:8px;
  top:8px;
  width:28px;
  height:28px;
  border:0;
  border-radius:50%;
  background:rgba(20,30,27,.78);
  color:white;
  font-size:18px;
}

.shop-product-fields{
  padding:12px;
  display:grid;
  grid-template-columns:1fr 100px;
  gap:8px;
}

.shop-product-fields label{
  margin:0 !important;
}

.shop-product-price-field{
  display:flex;
  align-items:center;
  gap:4px;
}

.shop-product-price-field input{
  min-width:0;
}

.shop-product-editor-actions{
  padding:0 12px 12px;
  display:flex;
  justify-content:space-between;
  gap:8px;
}

.shop-product-editor-actions button{
  border:0;
  border-radius:9px;
  padding:7px 9px;
  font-size:10px;
  font-weight:800;
}

.shop-featured{
  background:#f1eee5;
  color:#675f51;
}

.shop-featured.active{
  background:#fff1c7;
  color:#8b661a;
}

.shop-delete-product{
  background:#f5e8e8;
  color:#9a4c53;
}

.shop-add-product{
  margin-top:14px;
  padding:11px 16px;
  border:1px solid #bdd2c9;
  border-radius:11px;
  background:white;
  color:#184d45;
  font-weight:800;
}

/* ===== Hausbesuch setup ===== */

.setup-home-service{
  margin-top:16px;
  padding:13px 15px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border:1px solid #e1dbcf;
  border-radius:14px;
  background:#faf8f3;
}

.setup-home-service > div{
  display:flex;
  flex-direction:column;
}

.setup-home-service strong{
  font-size:12px;
}

.setup-home-service small{
  margin-top:3px;
  color:#77736b;
  font-size:10px;
}

.setup-home-service button{
  min-width:64px;
  padding:9px 12px;
  border:1px solid #d9d4ca;
  border-radius:999px;
  background:white;
  color:#173f3b;
  font-weight:900;
  cursor:pointer;
}

.setup-home-service button.active{
  border-color:#174c43;
  background:#174c43;
  color:white;
}

.team-editor-row{
  grid-template-columns:46px minmax(0,1fr) 105px 34px !important;
}

.team-home-toggle{
  padding:8px 9px;
  border:1px solid #ddd8ce;
  border-radius:10px;
  background:white;
  color:#6d706b;
  font-size:9px;
  font-weight:800;
  cursor:pointer;
}

.team-home-toggle.active{
  border-color:#b9d0c6;
  background:#eaf4ee;
  color:#34704b;
}

.team-home-toggle:disabled{
  opacity:.35;
  cursor:not-allowed;
}


/* ===== Hausbesuch setup ===== */

.setup-home-service{
  margin-top:16px;
  padding:13px 15px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border:1px solid #e1dbcf;
  border-radius:14px;
  background:#faf8f3;
}

.setup-home-service > div{
  display:flex;
  flex-direction:column;
}

.setup-home-service strong{
  font-size:12px;
}

.setup-home-service small{
  margin-top:3px;
  color:#77736b;
  font-size:10px;
}

.setup-home-service button{
  min-width:64px;
  padding:9px 12px;
  border:1px solid #d9d4ca;
  border-radius:999px;
  background:white;
  color:#173f3b;
  font-weight:900;
  cursor:pointer;
}

.setup-home-service button.active{
  border-color:#174c43;
  background:#174c43;
  color:white;
}

.team-editor-row{
  grid-template-columns:46px minmax(0,1fr) 105px 34px !important;
}

.team-home-toggle{
  padding:8px 9px;
  border:1px solid #ddd8ce;
  border-radius:10px;
  background:white;
  color:#6d706b;
  font-size:9px;
  font-weight:800;
  cursor:pointer;
}

.team-home-toggle.active{
  border-color:#b9d0c6;
  background:#eaf4ee;
  color:#34704b;
}

.team-home-toggle:disabled{
  opacity:.35;
  cursor:not-allowed;
}


/* ===== Worker editor: no worker-level Hausbesuch ===== */

.team-editor-row{
  grid-template-columns:
    46px minmax(0,1fr) 34px !important;
}


/* ===== Worker editor: no worker-level Hausbesuch ===== */

.team-editor-row{
  grid-template-columns:
    46px minmax(0,1fr) 34px !important;
}



/* =========================================================
   PICKME FINAL SETUP THEME
   Uses the locked PickMe design system.
   Do not introduce page-specific brand colors below.
   ========================================================= */

.wizard-page {
  background:
    var(--pm-bg, #f7f4ec) !important;
  color:
    var(--pm-ink, #303735) !important;
}


/* HEADER */

.wizard-header {
  background:
    var(--pm-surface, #fffdf9) !important;

  border-bottom:
    1px solid
    var(--pm-border, #e4ded4) !important;

  color:
    var(--pm-ink, #303735) !important;
}

.wizard-logo {
  display: flex;
  align-items: center;
}

.wizard-logo .pickme-global-logo {
  color:
    var(--pm-ink, #303735) !important;
}

.wizard-header,
.wizard-header strong,
.wizard-header span {
  color:
    var(--pm-ink, #303735);
}


/* MAIN LAYOUT */

.wizard-layout {
  background:
    transparent !important;
}

.wizard-form {
  background:
    var(--pm-surface, #fffdf9) !important;

  border:
    1px solid
    var(--pm-border, #e4ded4) !important;

  box-shadow:
    var(
      --pm-shadow-premium,
      0 18px 48px rgba(54,57,52,.085)
    ) !important;
}


/* STEP NAVIGATION */

.wizard-nav {
  background:
    var(--pm-surface, #fffdf9) !important;

  border-bottom:
    1px solid
    var(--pm-border, #e4ded4) !important;
}

.wizard-nav button {
  background:
    var(--pm-surface-soft, #f3f1eb) !important;

  border:
    1px solid transparent !important;

  color:
    var(--pm-muted, #777b75) !important;

  box-shadow:
    none !important;
}

.wizard-nav button:hover {
  border-color:
    var(--pm-border, #e4ded4) !important;

  background:
    var(--pm-taupe-soft, #eee9e1) !important;

  color:
    var(--pm-ink, #303735) !important;
}

.wizard-nav button.active {
  background:
    var(--pm-accent-dark, #657260) !important;

  border-color:
    var(--pm-accent-dark, #657260) !important;

  color:
    #fff !important;
}

.wizard-nav button span,
.wizard-nav button i {
  color:
    inherit !important;
}


/* CONTENT */

.wizard-content {
  background:
    var(--pm-surface, #fffdf9) !important;
}

.wizard-content h1,
.wizard-content h2,
.wizard-content h3,
.wizard-content h4 {
  color:
    var(--pm-ink, #303735) !important;
}

.wizard-eyebrow {
  color:
    var(--pm-accent-dark, #657260) !important;

  letter-spacing:
    .08em;
}

.wizard-intro,
.wizard-content p {
  color:
    var(--pm-muted, #777b75);
}


/* INPUTS */

.wizard-content input,
.wizard-content textarea,
.wizard-content select {
  background:
    var(--pm-bg-soft, #faf8f4) !important;

  border:
    1px solid
    var(--pm-border, #e4ded4) !important;

  color:
    var(--pm-text, #343b38) !important;

  box-shadow:
    none !important;
}

.wizard-content input:focus,
.wizard-content textarea:focus,
.wizard-content select:focus {
  outline: none !important;

  border-color:
    var(--pm-accent, #123f39) !important;

  background:
    var(--pm-surface, #fffdf9) !important;

  box-shadow:
    0 0 0 3px
    rgba(123,136,117,.10) !important;
}

.wizard-content label {
  color:
    var(--pm-text, #343b38);
}


/* HOME SERVICE */

.setup-home-service {
  background:
    var(--pm-bg-soft, #faf8f4) !important;

  border:
    1px solid
    var(--pm-border, #e4ded4) !important;
}

.setup-home-service button {
  background:
    var(--pm-surface, #fffdf9) !important;

  color:
    var(--pm-muted, #777b75) !important;

  border:
    1px solid
    var(--pm-border, #e4ded4) !important;
}

.setup-home-service button.active {
  background:
    var(--pm-accent-soft, rgba(18, 63, 57, 0.08)) !important;

  color:
    var(--pm-accent-dark, #657260) !important;

  border-color:
    var(--pm-accent, #123f39) !important;
}


/* PHOTO AREA */

.photo-recommendation {
  background:
    var(--pm-taupe-soft, #eee9e1) !important;

  border:
    1px solid
    var(--pm-border, #e4ded4) !important;

  color:
    var(--pm-text, #343b38) !important;
}

.wizard-upload {
  background:
    var(--pm-bg-soft, #faf8f4) !important;

  border-color:
    var(--pm-taupe, #a69e90) !important;

  color:
    var(--pm-accent-dark, #657260) !important;
}

.wizard-photo-empty {
  background:
    var(--pm-bg-soft, #faf8f4) !important;

  border-color:
    var(--pm-border, #e4ded4) !important;

  color:
    var(--pm-muted, #777b75) !important;
}

.wizard-photo-manager {
  background:
    var(--pm-bg-soft, #faf8f4) !important;
}

.wizard-photo-manager img {
  border-color:
    var(--pm-border, #e4ded4) !important;
}

.photo-main-label {
  background:
    rgba(101,114,96,.92) !important;

  color:
    white !important;
}

.photo-make-main {
  background:
    rgba(255,253,249,.94) !important;

  color:
    var(--pm-accent-dark, #657260) !important;
}

.photo-remove {
  background:
    rgba(48,55,53,.78) !important;

  color:
    white !important;
}


/* SERVICES */

.service-picker {
  background:
    transparent !important;
}

.service-picker > * {
  border-color:
    var(--pm-border, #e4ded4) !important;
}

.service-check {
  background:
    var(--pm-surface, #fffdf9) !important;

  border:
    1px solid
    var(--pm-border, #e4ded4) !important;

  color:
    var(--pm-text, #343b38) !important;
}

.service-check.active,
.service-check:has(input:checked) {
  background:
    var(--pm-accent-soft, rgba(18, 63, 57, 0.08)) !important;

  border-color:
    var(--pm-accent, #123f39) !important;

  color:
    var(--pm-accent-dark, #657260) !important;
}

.service-price {
  color:
    var(--pm-ink, #303735) !important;
}


/* TEAM */

.team-editor-row {
  background:
    var(--pm-bg-soft, #faf8f4) !important;

  border:
    1px solid
    var(--pm-border, #e4ded4) !important;
}

.team-avatar {
  background:
    var(--pm-accent-soft, rgba(18, 63, 57, 0.08)) !important;

  color:
    var(--pm-accent-dark, #657260) !important;
}

.team-remove {
  background:
    transparent !important;

  color:
    var(--pm-busy, #bd7d76) !important;
}

.add-team-button {
  background:
    var(--pm-surface, #fffdf9) !important;

  border:
    1px solid
    var(--pm-accent, #123f39) !important;

  color:
    var(--pm-accent-dark, #657260) !important;
}

.add-team-button:hover {
  background:
    var(--pm-accent-soft, rgba(18, 63, 57, 0.08)) !important;
}


/* PROFILE / QUICK OPTIONS */

.quick-options button,
.quick-options label {
  background:
    var(--pm-bg-soft, #faf8f4) !important;

  border-color:
    var(--pm-border, #e4ded4) !important;

  color:
    var(--pm-muted, #777b75) !important;
}

.quick-options button.active,
.quick-options label.active {
  background:
    var(--pm-accent-soft, rgba(18, 63, 57, 0.08)) !important;

  border-color:
    var(--pm-accent, #123f39) !important;

  color:
    var(--pm-accent-dark, #657260) !important;
}

.parking-toggle {
  background:
    var(--pm-bg-soft, #faf8f4) !important;

  border-color:
    var(--pm-border, #e4ded4) !important;

  color:
    var(--pm-text, #343b38) !important;
}

.setup-divider {
  background:
    var(--pm-border, #e4ded4) !important;
}


/* SUMMARY */

.wizard-summary > * {
  background:
    var(--pm-surface-soft, #f3f1eb) !important;

  border:
    1px solid
    var(--pm-border, #e4ded4) !important;

  color:
    var(--pm-ink, #303735) !important;
}

.wizard-publish-box {
  background:
    #f7f3e9 !important;

  border:
    1px solid
    #ddd2b9 !important;

  color:
    var(--pm-text, #343b38) !important;
}


/* ACTION BAR */

.wizard-actions {
  background:
    var(--pm-surface, #fffdf9) !important;

  border-top:
    1px solid
    var(--pm-border, #e4ded4) !important;
}

.wizard-actions button {
  box-shadow:
    none !important;
}

.wizard-actions button:not(.primary) {
  background:
    var(--pm-surface, #fffdf9) !important;

  border:
    1px solid
    var(--pm-border, #e4ded4) !important;

  color:
    var(--pm-accent-dark, #657260) !important;
}

.wizard-actions .primary {
  background:
    var(--pm-accent-dark, #657260) !important;

  border-color:
    var(--pm-accent-dark, #657260) !important;

  color:
    #fff !important;
}

.wizard-actions .primary:hover {
  background:
    var(--pm-accent, #123f39) !important;
}

.wizard-actions .primary.publish {
  background:
    var(--pm-accent-dark, #657260) !important;

  border-color:
    var(--pm-accent-dark, #657260) !important;

  color:
    white !important;
}


/* LIVE PREVIEW */

.wizard-preview {
  background:
    var(--pm-surface, #fffdf9) !important;

  border:
    1px solid
    var(--pm-border, #e4ded4) !important;

  box-shadow:
    var(
      --pm-shadow-premium,
      0 18px 48px rgba(54,57,52,.085)
    ) !important;
}

.preview-header {
  background:
    var(--pm-accent-dark, #657260) !important;

  color:
    white !important;
}

.preview-header * {
  color:
    white !important;
}

.preview-image {
  background-color:
    var(--pm-taupe-soft, #eee9e1) !important;
}

.preview-content {
  background:
    var(--pm-surface, #fffdf9) !important;

  color:
    var(--pm-ink, #303735) !important;
}

.preview-content h1,
.preview-content h2,
.preview-content h3,
.preview-content strong {
  color:
    var(--pm-ink, #303735) !important;
}

.preview-content p,
.preview-content span {
  color:
    var(--pm-muted, #777b75);
}

.preview-badge {
  background:
    var(--pm-accent-soft, rgba(18, 63, 57, 0.08)) !important;

  color:
    var(--pm-accent-dark, #657260) !important;
}

.wizard-tags > * {
  background:
    var(--pm-taupe-soft, #eee9e1) !important;

  color:
    var(--pm-text, #343b38) !important;

  border-color:
    var(--pm-border, #e4ded4) !important;
}

.preview-live {
  background:
    var(--pm-surface-soft, #f3f1eb) !important;

  border-color:
    var(--pm-border, #e4ded4) !important;

  color:
    var(--pm-text, #343b38) !important;
}


/* LIVE STATUS — MUTED PICKME COLORS ONLY */

.preview-live i.free {
  background:
    var(--pm-success, #123f39) !important;
}

.preview-live i.busy {
  background:
    var(--pm-busy, #bd7d76) !important;
}

.preview-live i.pause {
  background:
    var(--pm-pause, #aaa9a4) !important;
}


/* PREVIEW CTA */

.wizard-preview button,
.wizard-preview a[role="button"] {
  background:
    var(--pm-accent-dark, #657260) !important;

  color:
    white !important;

  border-color:
    var(--pm-accent-dark, #657260) !important;
}


/* REMOVE OLD GOLD VISUALLY */

.wizard-page [style*="#b58a3e"],
.wizard-page [style*="#ad8541"] {
  color:
    var(--pm-accent-dark, #657260) !important;
}


/* MOBILE */

@media (max-width: 900px) {

  .wizard-form,
  .wizard-preview {
    border-color:
      var(--pm-border, #e4ded4) !important;
  }

}


/* =========================================================
   PICKME PROFILE OPTIONS — FINAL
   ========================================================= */

.quick-options button.selected {
  background:
    var(--pm-accent-dark, #657260) !important;

  border-color:
    var(--pm-accent-dark, #657260) !important;

  color:
    #fff !important;
}

.quick-options button.selected:hover {
  background:
    var(--pm-accent, #123f39) !important;

  border-color:
    var(--pm-accent, #123f39) !important;

  color:
    #fff !important;
}

.quick-options button.quick-add-option {
  background:
    var(--pm-surface, #fffdf9) !important;

  border:
    1px dashed
    var(--pm-accent, #123f39) !important;

  color:
    var(--pm-accent-dark, #657260) !important;
}

.quick-options button.quick-add-option:hover {
  background:
    var(--pm-accent-soft, rgba(18, 63, 57, 0.08)) !important;
}


.quick-custom-entry {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  margin:
    -5px 0 16px;
}


.quick-custom-entry input {
  flex:
    1;

  min-width:
    0;

  height:
    38px !important;

  padding:
    0 11px !important;

  border:
    1px solid
    var(--pm-accent, #123f39) !important;

  border-radius:
    9px !important;

  background:
    var(--pm-surface, #fffdf9) !important;
}


.quick-custom-entry button {
  min-height:
    38px;

  padding:
    0 11px;

  border:
    1px solid
    var(--pm-accent-dark, #657260);

  border-radius:
    9px;

  background:
    var(--pm-accent-dark, #657260);

  color:
    white;

  font-size:
    10px;

  font-weight:
    750;

  cursor:
    pointer;
}


.quick-custom-entry button.cancel {
  border-color:
    var(--pm-border, #e4ded4);

  background:
    var(--pm-surface, #fffdf9);

  color:
    var(--pm-muted, #777b75);
}


/* =========================================================
   PICKME PROFILE OPTIONS — FINAL
   ========================================================= */

.quick-options button.selected {
  background:
    var(--pm-accent-dark, #657260) !important;

  border-color:
    var(--pm-accent-dark, #657260) !important;

  color:
    #fff !important;
}

.quick-options button.selected:hover {
  background:
    var(--pm-accent, #123f39) !important;

  border-color:
    var(--pm-accent, #123f39) !important;

  color:
    #fff !important;
}

.quick-options button.quick-add-option {
  background:
    var(--pm-surface, #fffdf9) !important;

  border:
    1px dashed
    var(--pm-accent, #123f39) !important;

  color:
    var(--pm-accent-dark, #657260) !important;
}

.quick-options button.quick-add-option:hover {
  background:
    var(--pm-accent-soft, rgba(18, 63, 57, 0.08)) !important;
}


.quick-custom-entry {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  margin:
    -5px 0 16px;
}


.quick-custom-entry input {
  flex:
    1;

  min-width:
    0;

  height:
    38px !important;

  padding:
    0 11px !important;

  border:
    1px solid
    var(--pm-accent, #123f39) !important;

  border-radius:
    9px !important;

  background:
    var(--pm-surface, #fffdf9) !important;
}


.quick-custom-entry button {
  min-height:
    38px;

  padding:
    0 11px;

  border:
    1px solid
    var(--pm-accent-dark, #657260);

  border-radius:
    9px;

  background:
    var(--pm-accent-dark, #657260);

  color:
    white;

  font-size:
    10px;

  font-weight:
    750;

  cursor:
    pointer;
}


.quick-custom-entry button.cancel {
  border-color:
    var(--pm-border, #e4ded4);

  background:
    var(--pm-surface, #fffdf9);

  color:
    var(--pm-muted, #777b75);
}
/* ==========================================================================
   PickMe 3-Theme Salon Stylesheet (Classic, Modern Minimal, Barber Dark)
   ========================================================================== */

/* 1. CLASSIC THEME (Default Warm Luxury Emerald & Cream) */
.pm-salon-theme-classic {
  --pm-theme-bg: #f7f4ec;
  --pm-theme-card-bg: #fffdf9;
  --pm-theme-card-border: #d9dbe3;
  --pm-theme-primary: #4b5fff;
  --pm-theme-primary-hover: #3a4ae8;
  --pm-theme-accent: #4b5fff;
  --pm-theme-text-main: #101116;
  --pm-theme-text-muted: #747b8b;
  --pm-theme-font-heading: "Fraunces", Georgia, serif;
  --pm-theme-radius: 16px;
  --pm-theme-badge-bg: rgba(75, 95, 255, 0.1);
  --pm-theme-badge-text: #4b5fff;
  --pm-theme-cta-bg: #4b5fff;
  --pm-theme-cta-text: #ffffff;
}

/* 2. MODERN MINIMAL THEME (Ultra-Clean Studio Monochrome & Electric Blue) */
.pm-salon-theme-modern_minimal {
  --pm-theme-bg: #f8fafc;
  --pm-theme-card-bg: #ffffff;
  --pm-theme-card-border: #e2e8f0;
  --pm-theme-primary: #0f172a;
  --pm-theme-primary-hover: #1e293b;
  --pm-theme-accent: #4b5fff;
  --pm-theme-text-main: #0f172a;
  --pm-theme-text-muted: #64748b;
  --pm-theme-font-heading: "Inter", system-ui, sans-serif;
  --pm-theme-radius: 10px;
  --pm-theme-badge-bg: #e7e8fa;
  --pm-theme-badge-text: #4b5fff;
  --pm-theme-cta-bg: #4b5fff;
  --pm-theme-cta-text: #ffffff;
}

/* 3. BARBER DARK THEME (Obsidian Lounge, Matte Carbon & Warm Copper) */
.pm-salon-theme-barber_dark {
  --pm-theme-bg: #0d0f12;
  --pm-theme-card-bg: #16191f;
  --pm-theme-card-border: #262a33;
  --pm-theme-primary: #d4a373;
  --pm-theme-primary-hover: #bc8a5f;
  --pm-theme-accent: #e76f51;
  --pm-theme-text-main: #f1f5f9;
  --pm-theme-text-muted: #94a3b8;
  --pm-theme-font-heading: "Oswald", "Cinzel", -apple-system, sans-serif;
  --pm-theme-radius: 12px;
  --pm-theme-badge-bg: rgba(212, 163, 115, 0.12);
  --pm-theme-badge-text: #d4a373;
  --pm-theme-cta-bg: #d4a373;
  --pm-theme-cta-text: #0d0f12;
}

/* Theme Application Wrapper */
.pm-themed-salon-page {
  background-color: var(--pm-theme-bg);
  color: var(--pm-theme-text-main);
  min-height: 100vh;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.pm-themed-salon-page h1,
.pm-themed-salon-page h2,
.pm-themed-salon-page h3 {
  font-family: var(--pm-theme-font-heading);
}

.pm-themed-salon-page .pm-pixel-card-block,
.pm-themed-salon-page .pm-salon-card {
  background: var(--pm-theme-card-bg);
  border: 1px solid var(--pm-theme-card-border);
  border-radius: var(--pm-theme-radius);
}

.pm-themed-salon-page .pm-pixel-whatsapp-cta {
  background: var(--pm-theme-cta-bg) !important;
  color: var(--pm-theme-cta-text) !important;
  border-radius: var(--pm-theme-radius);
  font-weight: 700;
}

/* Theme Picker UI in Setup */
.pm-theme-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 10px;
}

.pm-theme-option-card {
  border: 2px solid var(--pm-border, #e4ded4);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  background: #ffffff;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pm-theme-option-card:hover {
  border-color: var(--pm-theme-primary, #123f39);
}

.pm-theme-option-card.active {
  border-color: var(--pm-theme-primary, #123f39);
  background: var(--pm-theme-badge-bg, rgba(18, 63, 57, 0.04));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   Executive Salon Action Suite (Status / QR / Atmosphäre / Kiosk)
   ========================================================================== */
.pm-salon-executive-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
  width: 100%;
}

.pm-exec-tool-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
  color: #101116;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.pm-exec-tool-btn.pult,
.pm-exec-tool-btn.qr,
.pm-exec-tool-btn.atmosphere,
.pm-exec-tool-btn.kiosk {
  background: #ffffff;
  color: #101116;
  border-color: #e2e8f0;
}

.pm-exec-tool-btn:hover {
  transform: translateY(-1px);
  border-color: #4b5fff;
  color: #4b5fff;
  box-shadow: 0 8px 18px rgba(75, 95, 255, 0.14);
}

@media (max-width: 600px) {
  .pm-salon-executive-bar {
    grid-template-columns: 1fr 1fr;
  }
}

.pm-theme-preview-swatch {
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 10px;
}

@media (max-width: 640px) {
  .pm-theme-picker-grid {
    grid-template-columns: 1fr;
  }
}
.pm-owner-setup-root {
  min-height: 100vh;
  background: #f7f4ec;
}

.pm-owner-trial-bar {
  min-height: 34px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 5px 18px;
  border-bottom: 1px solid #d7ddd2;
  background: #e9ede6;
  color: #59675d;
  font-size: 8px;
}

.pm-owner-trial-bar strong {
  font-size: 8px;
  letter-spacing: .09em;
}

.pm-owner-denied {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 30px;
  box-sizing: border-box;
  background: #f7f4ec;
  color: #303735;
  text-align: center;
}

.pm-owner-denied h1 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 31px;
}

.pm-owner-denied p {
  max-width: 430px;
  color: #747a75;
  font-size: 11px;
  line-height: 1.6;
}

.pm-owner-denied a {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #657260;
  color: #fff;
  text-decoration: none;
  font-size: 9px;
  font-weight: 750;
}
/* ==========================================================================
   PICKME — ACCESS / CLAIM FLOW
   Tokens: PickMe Calm Kinetic (handoff R1) via pickme-tokens.css
   Do not reintroduce forest-green #123f39 here.
   ========================================================================== */

.pm-flow-page {
  --pm-flow-bg: var(--pm-bg, #f7f4ec);
  --pm-flow-card: var(--pm-surface, #fffdf9);
  --pm-flow-border: var(--pm-border, #d9dbe3);
  --pm-flow-border-subtle: var(--pm-border, #d9dbe3);
  --pm-flow-border-focus: var(--pm-accent, #4b5fff);
  --pm-flow-green-dark: var(--pm-ink, #101116);
  --pm-flow-green-cta: var(--pm-accent, #4b5fff);
  --pm-flow-green-cta-hover: var(--pm-accent-dark, #3a4ae8);
  --pm-flow-green-light: var(--pm-accent-soft, rgba(75, 95, 255, 0.12));
  --pm-flow-text-title: var(--pm-ink, #101116);
  --pm-flow-text-body: var(--pm-ink, #101116);
  --pm-flow-text-muted: var(--pm-muted, #747b8b);
  --pm-flow-gold: var(--pm-accent, #4b5fff);
  --pm-flow-gold-light: var(--pm-accent-soft, rgba(75, 95, 255, 0.12));
  --pm-flow-error: var(--pm-danger, #d94b54);
  --pm-flow-error-bg: #fff1f2;
  --pm-flow-radius-sm: 12px;
  --pm-flow-radius-md: 16px;
  --pm-flow-radius-lg: 18px;
  --pm-flow-shadow: var(--pm-shadow-card, 0 18px 50px rgba(16, 17, 22, 0.08));
  min-height: 100vh;
  height: auto;
  overflow-x: hidden;
  overflow-y: visible;
  background-color: var(--pm-flow-bg);
  color: var(--pm-flow-text-body);
  font-family: var(--pm-font-ui, Inter, system-ui, sans-serif);
  margin: 0;
  padding: 0 0 100px 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

.pm-flow-page *,
.pm-flow-page *::before,
.pm-flow-page *::after {
  box-sizing: inherit;
}

/* ─── Header ───────────────────────────────────────────────────────────── */
.pm-flow-header {
  height: 56px;
  background: var(--pm-flow-card);
  border-bottom: 1px solid var(--pm-flow-border);
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}

.pm-flow-logo {
  display: flex;
  align-items: center;
}

.pm-flow-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--pm-flow-text-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--pm-flow-radius-sm);
  background: var(--pm-flow-bg);
  border: 1px solid var(--pm-flow-border);
  transition: all 0.15s ease;
}

.pm-flow-back:hover {
  color: var(--pm-flow-text-title);
  border-color: var(--pm-flow-green-cta);
  background: #ffffff;
}

/* ─── Main Container ───────────────────────────────────────────────────── */
.pm-flow-main {
  width: min(920px, calc(100% - 32px));
  margin: 0 auto;
  padding: 32px 0 100px;
}

.pm-flow-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--pm-flow-green-cta);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--pm-flow-green-light);
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
}

.pm-flow-title {
  margin: 0 0 8px;
  font-family: var(--pm-font-display, Fraunces, Georgia, serif);
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1.1;
  color: var(--pm-flow-text-title);
  letter-spacing: -0.02em;
}

.pm-flow-lead {
  max-width: 640px;
  margin: 0 0 24px;
  color: var(--pm-flow-text-muted);
  font-size: 15px;
  line-height: 1.5;
}

/* ─── Wizard Card Shell ────────────────────────────────────────────────── */
.pm-flow-shell {
  background: var(--pm-flow-card);
  border: 1px solid var(--pm-flow-border);
  border-radius: var(--pm-flow-radius-lg);
  box-shadow: var(--pm-flow-shadow);
  overflow: hidden;
}

/* ─── Stepper Progress Bar ─────────────────────────────────────────────── */
.pm-flow-stepper {
  display: flex;
  border-bottom: 1px solid var(--pm-flow-border);
  background: #ffffff;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.pm-flow-stepper::-webkit-scrollbar {
  display: none;
}

.pm-flow-step-item {
  flex: 1;
  min-width: 105px;
  padding: 14px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-right: 1px solid var(--pm-flow-border-subtle);
  color: var(--pm-flow-text-muted);
  font-size: 12px;
  font-weight: 600;
  background: #faf8f5;
  transition: all 0.2s ease;
  user-select: none;
}

.pm-flow-step-item:last-child {
  border-right: none;
}

.pm-flow-step-item.active {
  color: var(--pm-flow-green-dark);
  background: #ffffff;
  border-bottom: 2px solid var(--pm-flow-green-cta);
  font-weight: 700;
}

.pm-flow-step-item.completed {
  color: var(--pm-flow-text-body);
  background: #fdfcf9;
  cursor: pointer;
}

.pm-flow-step-item.completed:hover {
  background: var(--pm-flow-green-light);
}

.pm-flow-step-badge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  background: #ede8df;
  color: var(--pm-flow-text-muted);
  transition: all 0.2s ease;
}

.pm-flow-step-item.active .pm-flow-step-badge {
  background: var(--pm-flow-green-cta);
  color: #ffffff;
}

.pm-flow-step-item.completed .pm-flow-step-badge {
  background: #059669;
  color: #ffffff;
}

/* Mobile Stepper Header */
.pm-flow-mobile-step-bar {
  display: none;
  padding: 12px 16px;
  background: #faf8f5;
  border-bottom: 1px solid var(--pm-flow-border);
}

.pm-flow-mobile-step-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--pm-flow-green-cta);
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
}

.pm-flow-progress-track {
  height: 4px;
  background: #e4ded4;
  border-radius: 2px;
  overflow: hidden;
}

.pm-flow-progress-fill {
  height: 100%;
  background: var(--pm-flow-green-cta);
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* ─── Step Content ─────────────────────────────────────────────────────── */
.pm-flow-body {
  padding: 32px;
}

.pm-flow-section-header {
  margin-bottom: 24px;
}

.pm-flow-section-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--pm-flow-text-title);
  margin: 0 0 6px;
}

.pm-flow-section-desc {
  font-size: 14px;
  color: var(--pm-flow-text-muted);
  margin: 0;
  line-height: 1.5;
}

/* ─── Form Fields & Inputs ─────────────────────────────────────────────── */
.pm-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}

.pm-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--pm-flow-text-title);
  display: flex;
  align-items: center;
  gap: 4px;
}

.pm-field-req {
  color: var(--pm-flow-error);
  font-weight: 700;
}

.pm-field-hint {
  font-size: 12px;
  color: var(--pm-flow-text-muted);
  font-weight: normal;
}

.pm-field input,
.pm-field textarea,
.pm-field select {
  width: 100%;
  border: 1px solid var(--pm-flow-border);
  border-radius: var(--pm-flow-radius-sm);
  background: #ffffff;
  color: var(--pm-flow-text-title);
  font-size: 14px;
  font-family: inherit;
  padding: 10px 14px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  min-height: 44px;
}

.pm-field input:focus,
.pm-field textarea:focus,
.pm-field select:focus {
  border-color: var(--pm-flow-border-focus);
  box-shadow: 0 0 0 3px rgba(55, 75, 55, 0.12);
}

.pm-field input::placeholder,
.pm-field textarea::placeholder {
  color: #a3aba2;
}

.pm-field.has-error input,
.pm-field.has-error textarea,
.pm-field.has-error select {
  border-color: var(--pm-flow-error);
  background: #fffafa;
}

.pm-field-err-msg {
  font-size: 12px;
  color: var(--pm-flow-error);
  margin-top: 2px;
}

/* Field Grid Layouts */
.pm-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.pm-grid-3 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 16px;
}

/* ─── Structured Opening Hours Editor ──────────────────────────────────── */
.pm-hours-editor {
  background: #faf8f5;
  border: 1px solid var(--pm-flow-border);
  border-radius: var(--pm-flow-radius-md);
  padding: 18px;
  margin-top: 6px;
}

.pm-hours-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 10px;
}

.pm-hours-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--pm-flow-text-title);
  display: flex;
  align-items: center;
  gap: 6px;
}

.pm-hours-toggle-btn {
  background: #ffffff;
  border: 1px solid var(--pm-flow-border);
  border-radius: var(--pm-flow-radius-sm);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--pm-flow-green-cta);
  cursor: pointer;
}

.pm-hours-row {
  display: grid;
  grid-template-columns: 130px 100px 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid var(--pm-flow-border-subtle);
  border-radius: var(--pm-flow-radius-sm);
  margin-bottom: 8px;
}

.pm-hours-row:last-child {
  margin-bottom: 0;
}

.pm-hours-day-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--pm-flow-text-title);
}

.pm-hours-status-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
}

.pm-hours-time-pickers {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pm-hours-time-pickers select {
  padding: 6px 10px;
  border: 1px solid var(--pm-flow-border);
  border-radius: var(--pm-flow-radius-sm);
  background: #faf8f5;
  font-size: 13px;
  color: var(--pm-flow-text-title);
  min-height: 36px;
}

.pm-hours-preview-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.pm-hours-preview-badge.open {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.pm-hours-preview-badge.closed {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* ─── Photo Upload Dropzone & Grid ─────────────────────────────────────── */
.pm-dropzone {
  border: 2px dashed #cbd5e1;
  border-radius: var(--pm-flow-radius-md);
  padding: 32px 20px;
  text-align: center;
  background: #faf8f5;
  transition: all 0.2s ease;
  margin-bottom: 20px;
}

.pm-dropzone:hover {
  border-color: var(--pm-flow-green-cta);
  background: #f4f7f2;
}

.pm-dropzone-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #eef2ed;
  color: var(--pm-flow-green-cta);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.pm-dropzone-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--pm-flow-text-title);
  margin-bottom: 4px;
}

.pm-dropzone-sub {
  font-size: 12px;
  color: var(--pm-flow-text-muted);
  margin-bottom: 14px;
}

.pm-dropzone-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid var(--pm-flow-border);
  color: var(--pm-flow-green-cta);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: var(--pm-flow-radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}

.pm-dropzone-btn:hover {
  border-color: var(--pm-flow-green-cta);
  background: var(--pm-flow-green-light);
}

.pm-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
}

.pm-photo-card {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: var(--pm-flow-radius-sm);
  overflow: hidden;
  border: 1px solid var(--pm-flow-border);
  background: #ede8df;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.pm-photo-card.is-hero {
  border: 2px solid var(--pm-flow-gold);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
}

.pm-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pm-photo-hero-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: var(--pm-flow-gold);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.pm-photo-actions {
  position: absolute;
  bottom: 6px;
  right: 6px;
  display: flex;
  gap: 6px;
}

.pm-photo-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(24, 36, 25, 0.75);
  color: #ffffff;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}

.pm-photo-btn:hover {
  background: rgba(24, 36, 25, 0.95);
}

.pm-photo-btn.delete:hover {
  background: #dc2626;
}

/* ─── Service & Team & Product Cards ───────────────────────────────────── */
.pm-card-item {
  background: #faf8f5;
  border: 1px solid var(--pm-flow-border);
  border-radius: var(--pm-flow-radius-md);
  padding: 16px;
  margin-bottom: 12px;
  transition: border-color 0.15s ease;
}

.pm-card-item:hover {
  border-color: #cbd5e1;
}

.pm-card-item-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 12px;
  align-items: center;
}

.pm-card-item-team {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  gap: 16px;
  align-items: start;
}

.pm-card-item-product {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 16px;
  align-items: center;
}

.pm-btn-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border: 1px dashed var(--pm-flow-border);
  border-radius: var(--pm-flow-radius-sm);
  background: #ffffff;
  color: var(--pm-flow-green-cta);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-top: 4px;
}

.pm-btn-add:hover {
  border-color: var(--pm-flow-green-cta);
  background: var(--pm-flow-green-light);
}

/* ─── Amenities Grid ───────────────────────────────────────────────────── */
.pm-amenities-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.pm-amenity-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid var(--pm-flow-border);
  border-radius: var(--pm-flow-radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.pm-amenity-card:hover {
  border-color: var(--pm-flow-green-cta);
  background: #fbfdfa;
}

.pm-amenity-card.checked {
  border-color: var(--pm-flow-green-cta);
  background: var(--pm-flow-green-light);
}

.pm-amenity-card input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--pm-flow-green-cta);
  cursor: pointer;
}

/* ─── Summary / Review Card ────────────────────────────────────────────── */
.pm-summary-card {
  background: #ffffff;
  border: 1px solid var(--pm-flow-border);
  border-radius: var(--pm-flow-radius-md);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

.pm-summary-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--pm-flow-border-subtle);
  font-size: 14px;
}

.pm-summary-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.pm-summary-label {
  color: var(--pm-flow-text-muted);
  font-weight: 500;
}

.pm-summary-val {
  color: var(--pm-flow-text-title);
  font-weight: 600;
  text-align: right;
}

/* ─── Footer Action Bar ────────────────────────────────────────────────── */
.pm-flow-footer {
  padding: 18px 32px;
  border-top: 1px solid var(--pm-flow-border);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pm-flow-btn-prev {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border: 1px solid var(--pm-flow-border);
  border-radius: var(--pm-flow-radius-sm);
  background: #ffffff;
  color: var(--pm-flow-text-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 44px;
}

.pm-flow-btn-prev:hover:not(:disabled) {
  border-color: var(--pm-flow-text-title);
  background: #faf8f5;
}

.pm-flow-btn-prev:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pm-flow-btn-next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 26px;
  border: none;
  border-radius: var(--pm-flow-radius-sm);
  background: var(--pm-flow-green-cta);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
  min-height: 44px;
}

.pm-flow-btn-next:hover:not(:disabled) {
  background: var(--pm-flow-green-cta-hover);
}

.pm-flow-btn-next:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ─── Responsive Media Queries ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .pm-flow-header {
    padding: 0 16px;
  }

  .pm-flow-main {
    width: 100%;
    padding: 16px 12px 110px;
  }

  .pm-flow-title {
    font-size: 26px;
  }

  .pm-flow-stepper {
    display: none;
  }

  .pm-flow-mobile-step-bar {
    display: block;
  }

  .pm-flow-body {
    padding: 20px 16px;
  }

  .pm-grid-2,
  .pm-grid-3,
  .pm-amenities-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .pm-card-item-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .pm-card-item-team {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .pm-card-item-product {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .pm-hours-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .pm-hours-time-pickers {
    width: 100%;
    justify-content: space-between;
  }

  .pm-hours-time-pickers select {
    flex: 1;
  }

  /* Sticky Footer on Mobile with Safe Area */
  .pm-flow-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }

  .pm-flow-btn-next,
  .pm-flow-btn-prev {
    flex: 1;
    justify-content: center;
  }
}

/* ==========================================================================
   PICKME — SALON CLAIM PAGE SPECIFIC STYLES
   ========================================================================== */
.pm-claim-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 24px;
  align-items: start;
  margin-top: 20px;
}

@media (max-width: 820px) {
  .pm-claim-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.pm-claim-business,
.pm-claim-form {
  background: var(--pm-flow-card);
  border: 1px solid var(--pm-flow-border);
  border-radius: var(--pm-flow-radius-lg);
  padding: 24px;
  box-shadow: var(--pm-flow-shadow);
  box-sizing: border-box;
}

.pm-claim-business small,
.pm-claim-form small {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #657260;
  margin-bottom: 8px;
}

.pm-claim-business h2,
.pm-claim-form h2 {
  font-size: 22px;
  font-weight: 800;
  font-family: var(--pm-font-display, Fraunces, Georgia, serif);
  color: var(--pm-ink, #101116);
  margin: 0 0 16px;
  line-height: 1.25;
}

.pm-claim-address {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--pm-muted, #747b8b);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 20px;
  padding: 12px;
  background: var(--pm-bg, #f7f4ec);
  border: 1px solid var(--pm-border, #d9dbe3);
  border-radius: 12px;
}

.pm-claim-address svg {
  flex-shrink: 0;
  color: var(--pm-accent, #4b5fff);
  margin-top: 2px;
}

.pm-claim-warning {
  padding: 14px 16px;
  background: rgba(215, 195, 157, 0.28);
  border: 1px solid var(--pm-border, #d9dbe3);
  border-radius: 12px;
  color: var(--pm-ink, #101116);
  font-size: 13px;
  line-height: 1.45;
}

.pm-claim-warning strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 4px;
  color: var(--pm-ink, #101116);
}

.pm-claim-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
}

.pm-claim-step {
  min-height: 44px;
  border: 1px solid #d9dbe3;
  border-radius: 12px;
  background: #fffdf9;
  color: #747b8b;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 6px 4px;
}

.pm-claim-step span {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #d9dbe3;
  color: #101116;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
}

.pm-claim-step.is-active {
  border-color: #4b5fff;
  color: #101116;
}

.pm-claim-step.is-active span,
.pm-claim-step.is-done span {
  background: #4b5fff;
  color: #fff;
}

.pm-claim-step.is-done {
  color: #101116;
}

.pm-claim-nav {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.pm-claim-nav .pm-flow-primary,
.pm-claim-nav .pm-flow-btn-prev {
  flex: 1;
  min-height: 44px;
}

.pm-claim-proof {
  background: #fffdf9;
  border: 1.5px dashed #4b5fff;
  border-radius: 16px;
  padding: 16px 18px;
}

.pm-claim-proof-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #4b5fff;
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.pm-claim-proof p {
  margin: 0 0 12px;
  font-size: 13px;
  color: #747b8b;
  line-height: 1.45;
}

.pm-claim-proof-btn,
.pm-claim-proof-done label {
  cursor: pointer;
}

.pm-claim-proof-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  border-radius: 10px;
  background: #fff;
  border: 1.5px solid #d9dbe3;
  color: #101116;
  font-size: 14px;
  font-weight: 700;
}

.pm-claim-proof input {
  display: none;
}

.pm-claim-proof-done {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #d9dbe3;
}

.pm-claim-proof-done img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
}

.pm-claim-proof-done button {
  background: none;
  border: none;
  cursor: pointer;
  color: #747b8b;
}

.pm-claim-review {
  background: #f7f4ec;
  border: 1px solid #d9dbe3;
  border-radius: 16px;
  padding: 16px;
}

.pm-claim-review p {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: #747b8b;
}

.pm-claim-review dl {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px 12px;
  margin: 0;
}

.pm-claim-review dt {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #747b8b;
}

.pm-claim-review dd {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #101116;
}

@media (max-width: 580px) {
  .pm-claim-steps {
    grid-template-columns: 1fr 1fr;
  }
  .pm-claim-review dl {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }
}

/* Claim Form Fields */
.pm-flow-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 580px) {
  .pm-flow-grid {
    grid-template-columns: 1fr;
  }
}

.pm-flow-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pm-flow-field.full {
  grid-column: 1 / -1;
}

.pm-flow-field label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #657260;
}

.pm-flow-field input,
.pm-flow-field select,
.pm-flow-field textarea {
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  padding: 0 14px;
  background: var(--pm-surface, #fffdf9);
  border: 1.5px solid var(--pm-border, #d9dbe3);
  border-radius: 12px;
  font-size: 14px;
  color: var(--pm-ink, #101116);
  font-family: inherit;
  transition: all 0.15s ease;
  outline: none;
}

.pm-flow-field textarea {
  height: 84px;
  padding: 10px 14px;
  resize: vertical;
}

.pm-flow-field input:focus,
.pm-flow-field select:focus,
.pm-flow-field textarea:focus {
  border-color: var(--pm-accent, #4b5fff);
  background: var(--pm-surface, #fffdf9);
  box-shadow: var(--pm-focus, 0 0 0 3px rgba(75, 95, 255, 0.28));
}

.pm-claim-form button[type="submit"],
.pm-flow-primary,
.pm-flow-submit {
  width: 100%;
  min-height: 48px;
  margin-top: 0;
  background: var(--pm-accent, #4b5fff);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(75, 95, 255, 0.22);
  transition: background 0.15s ease;
}

.pm-claim-form button[type="submit"]:hover:not(:disabled),
.pm-flow-primary:hover:not(:disabled),
.pm-flow-submit:hover {
  background: var(--pm-accent-dark, #3a4ae8);
  transform: none;
  box-shadow: 0 8px 24px rgba(75, 95, 255, 0.28);
}

.pm-claim-state-pill {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--pm-accent-soft, rgba(75, 95, 255, 0.12));
  color: var(--pm-accent, #4b5fff);
  font-size: 11px;
  font-weight: 800;
  margin: 14px 0 6px;
  letter-spacing: 0.04em;
}

.pm-flow-success {
  text-align: center;
  max-width: 560px;
  margin: 24px auto 0;
}

.pm-flow-success h2 {
  font-family: var(--pm-font-display, Fraunces, Georgia, serif);
  color: var(--pm-ink, #101116);
}

.pm-claim-page {
  padding: 0 56px 80px 16px;
}

.pm-flow-main.pm-claim-pick {
  width: min(1080px, 100%);
  max-width: 1080px;
  margin: 0 auto;
  padding: 20px 0 48px;
}

.pm-claim-offer {
  padding: 18px 18px 16px;
  margin: 0 0 16px;
  background: #fffdf9;
  border: 1px solid #d9dbe3;
  border-radius: 22px;
}

.pm-claim-offer .pm-flow-title {
  font-size: clamp(26px, 4vw, 40px);
}

.pm-claim-offer .pm-flow-lead {
  margin-bottom: 14px;
}

.pm-claim-plans {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pm-claim-plan {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #d9dbe3;
  background: #f7f4ec;
  color: #101116;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  appearance: none;
}

.pm-claim-plan.is-on,
.pm-claim-plan:hover {
  border-color: #4b5fff;
  background: #fffdf9;
  box-shadow: 0 0 0 1px #4b5fff;
}

.pm-claim-finder {
  min-width: 0;
}

.pm-claim-pick-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #101116;
  margin-bottom: 8px;
}

.pm-claim-pick-input {
  display: block;
  width: 100%;
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid #d9dbe3;
  padding: 0 14px;
  background: #fffdf9;
  color: #101116;
  font: inherit;
}

.pm-claim-pick-input:focus {
  outline: 2px solid #4b5fff;
  outline-offset: 1px;
}

.pm-claim-pick-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.pm-claim-pick-row {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid #d9dbe3;
  background: #fffdf9;
  color: #101116;
  text-decoration: none;
  font-weight: 700;
}

.pm-claim-pick-row:hover,
.pm-claim-pick-row:active {
  border-color: #4b5fff;
}

.pm-claim-pick-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.pm-claim-pick-city {
  flex-shrink: 0;
  max-width: 42%;
  color: #747b8b;
  font-weight: 500;
  font-size: 13px;
  text-align: right;
}

@media (min-width: 800px) {
  .pm-claim-pick-list {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .pm-claim-page {
    padding: 0 48px 72px 12px;
  }

  .pm-claim-offer {
    padding: 14px;
    border-radius: 18px;
  }

  .pm-claim-pick-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .pm-claim-pick-city {
    max-width: 100%;
    text-align: left;
  }
}

.pm-flow-success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  color: var(--pm-accent, #4b5fff);
  background: var(--pm-accent-soft, rgba(75, 95, 255, 0.12));
}

/* =========================================================
   PICKME PRO DASHBOARD / PULT — /pro-dashboard/:slug
   ========================================================= */

.pm-pdash-page {
  min-height: 100vh;
  background-color: var(--pm-bg, #f7f4ec);
  color: var(--pm-ink, #182419);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
}

/* HEADER */
.pm-pdash-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #e4ded4;
}

.pm-pdash-header-inner {
  max-width: 540px;
  margin: 0 auto;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pm-pdash-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.pm-pdash-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f7f4ec;
  border: 1px solid #dcd5c9;
  color: #123f39;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.pm-pdash-back-btn:hover {
  background: rgba(18, 63, 57, 0.08);
  border-color: #123f39;
}

.pm-pdash-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.pm-pdash-logout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #f0ece4;
  border: 1px solid #e4ded4;
  color: #657260;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.pm-pdash-logout-btn:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

@media (max-width: 480px) {
  .pm-pdash-header-inner {
    padding: 8px 10px;
    gap: 4px;
  }
  .pm-pdash-back-btn {
    padding: 6px 8px;
  }
  .pm-pdash-back-btn span {
    display: none;
  }
  .pm-pdash-logout-btn span {
    display: none;
  }
  .pm-pdash-logout-btn {
    padding: 6px 8px;
  }
}

/* TOAST */
.pm-pdash-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: #123f39;
  color: #ffffff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  animation: pmPdashToastIn 0.2s ease;
}

@keyframes pmPdashToastIn {
  from { transform: translate(-50%, 15px); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}

/* MAIN CONTAINER (PHONE FIRST) */
.pm-pdash-main {
  max-width: 540px;
  margin: 0 auto;
  padding: 16px 16px 40px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

/* CARD BLOCKS */
.pm-pdash-card {
  background: #ffffff;
  border: 1px solid #e4ded4;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 2px 8px rgba(18, 63, 57, 0.04);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pm-pdash-card-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pm-pdash-card-title {
  font-size: 1.08rem;
  font-weight: 800;
  color: #123f39;
  margin: 0;
  letter-spacing: -0.01em;
}

.pm-pdash-card-desc {
  font-size: 0.8rem;
  color: #657260;
  margin: 0;
}

/* ─── BLOCK 1: STATUS ─────────────────────────────────────────────────── */
.pm-pdash-status-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.pm-pdash-status-btn {
  padding: 14px 6px;
  border-radius: 12px;
  border: 1.5px solid #e4ded4;
  background: #fbf9f4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pm-pdash-status-btn:hover {
  transform: translateY(-1px);
}

.pm-pdash-status-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.pm-pdash-status-indicator.free { background: #123f39; }
.pm-pdash-status-indicator.pause { background: #f59e0b; }
.pm-pdash-status-indicator.busy { background: #dc2626; }

.pm-pdash-status-text {
  font-size: 0.86rem;
  font-weight: 800;
  color: #182419;
}

.pm-pdash-status-btn.free.active {
  background: #e8f5e9;
  border-color: #123f39;
  box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.2);
}

.pm-pdash-status-btn.pause.active {
  background: #fffbeb;
  border-color: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

.pm-pdash-status-btn.busy.active {
  background: #fef2f2;
  border-color: #dc2626;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2);
}

/* ─── BLOCK 2: BOOKINGS ───────────────────────────────────────────────── */
.pm-pdash-empty-bookings {
  padding: 24px 10px;
  text-align: center;
  color: #8c9688;
  font-size: 0.88rem;
  background: #faf8f3;
  border-radius: 10px;
  border: 1px dashed #e4ded4;
}

.pm-pdash-bookings-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pm-pdash-booking-item {
  background: #faf8f3;
  border: 1px solid #e4ded4;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pm-pdash-bk-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pm-pdash-bk-user {
  display: flex;
  flex-direction: column;
}

.pm-pdash-bk-name {
  font-size: 0.94rem;
  font-weight: 800;
  color: #123f39;
}

.pm-pdash-bk-phone {
  font-size: 0.78rem;
  color: #657260;
}

.pm-pdash-bk-status-tag {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
}

.pm-pdash-bk-status-tag.confirmed {
  background: #e8f5e9;
  color: #123f39;
}

.pm-pdash-bk-status-tag.rejected {
  background: #fef2f2;
  color: #dc2626;
}

.pm-pdash-bk-status-tag.pending {
  background: #fffbeb;
  color: #d97706;
}

.pm-pdash-bk-details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.84rem;
  color: #182419;
  font-weight: 600;
}

.pm-pdash-bk-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #657260;
  font-size: 0.78rem;
}

.pm-pdash-bk-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  flex-wrap: wrap;
}

.pm-pdash-bk-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid #dcd5c9;
  background: #ffffff;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
}

.pm-pdash-bk-btn.confirm {
  background: #e8f5e9;
  color: #123f39;
  border-color: #a5d6a7;
}

.pm-pdash-bk-btn.reject {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}

.pm-pdash-bk-btn.wa {
  background: #123f39;
  color: #ffffff;
  border-color: #123f39;
}

.pm-pdash-bk-btn.delete {
  margin-left: auto;
  color: #94a3b8;
  border-color: transparent;
  background: transparent;
  padding: 6px;
}

.pm-pdash-bk-btn.delete:hover {
  color: #dc2626;
}

/* ─── BLOCK 3: PROFILE FORM ───────────────────────────────────────────── */
.pm-pdash-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pm-pdash-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pm-pdash-field label,
.pm-pdash-field-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #123f39;
}

.pm-pdash-inline-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.pm-pdash-field input,
.pm-pdash-field textarea,
.pm-pdash-field select {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #dcd5c9;
  border-radius: 10px;
  font-size: 0.9rem;
  color: #182419;
  background: #faf8f3;
  font-family: inherit;
}

.pm-pdash-field input:focus,
.pm-pdash-field textarea:focus {
  outline: none;
  border-color: #123f39;
  background: #ffffff;
}

.pm-pdash-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 480px) {
  .pm-pdash-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* SERVICES EDIT IN PROFILE FORM */
.pm-pdash-services-edit-block {
  background: #faf8f3;
  border: 1px solid #e4ded4;
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.pm-pdash-srv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pm-pdash-add-srv-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #123f39;
  color: #ffffff;
  border: none;
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.pm-pdash-services-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
}

.pm-pdash-srv-edit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 50px 76px 26px;
  align-items: center;
  gap: 5px;
  width: 100%;
  box-sizing: border-box;
}

.pm-pdash-srv-name-inp {
  min-width: 0 !important;
  width: 100% !important;
  padding: 8px 8px !important;
  font-size: 0.82rem !important;
  box-sizing: border-box !important;
}

.pm-pdash-srv-price-inp {
  width: 100% !important;
  min-width: 0 !important;
  padding: 8px 2px !important;
  font-size: 0.82rem !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.pm-pdash-srv-dur-sel {
  width: 100% !important;
  min-width: 0 !important;
  padding: 8px 2px !important;
  font-size: 0.76rem !important;
  box-sizing: border-box !important;
  text-align: center;
}

.pm-pdash-srv-del-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.pm-pdash-srv-del-btn:hover {
  color: #dc2626;
}

@media (max-width: 380px) {
  .pm-pdash-srv-edit-row {
    grid-template-columns: minmax(0, 1fr) 46px 68px 22px;
    gap: 4px;
  }
  .pm-pdash-srv-name-inp {
    font-size: 0.78rem !important;
    padding: 7px 5px !important;
  }
  .pm-pdash-srv-price-inp {
    font-size: 0.78rem !important;
    padding: 7px 2px !important;
  }
  .pm-pdash-srv-dur-sel {
    font-size: 0.72rem !important;
    padding: 7px 1px !important;
  }
}

.pm-pdash-submit-btn {
  background: #123f39;
  color: #ffffff;
  border: none;
  padding: 13px 20px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  margin-top: 4px;
  transition: background 0.15s ease;
}

.pm-pdash-submit-btn:hover {
  background: #1a574f;
}

/* ─── BLOCK 4: QR BOX ─────────────────────────────────────────────────── */
.pm-pdash-qr-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pm-pdash-qr-url-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #faf8f3;
  border: 1px solid #e4ded4;
  border-radius: 10px;
  padding: 8px 12px;
  gap: 8px;
}

.pm-pdash-qr-url-text {
  font-size: 0.82rem;
  color: #123f39;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-pdash-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ffffff;
  border: 1px solid #dcd5c9;
  color: #123f39;
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}

.pm-pdash-enlarge-qr-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #f7f4ec;
  border: 1.5px solid #123f39;
  color: #123f39;
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pm-pdash-enlarge-qr-btn:hover {
  background: rgba(18, 63, 57, 0.08);
}

/* ─── LOGIN CARD ──────────────────────────────────────────────────────── */
.pm-pdash-login-card {
  max-width: 440px;
  margin: 40px auto 0;
  text-align: center;
  align-items: center;
  padding: 32px 24px;
}

.pm-pdash-login-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #f7f4ec;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.pm-pdash-login-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #123f39;
  margin: 0;
}

.pm-pdash-login-sub {
  font-size: 0.88rem;
  color: #657260;
  margin: 0 0 12px;
  line-height: 1.45;
}

.pm-pdash-err-box {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.84rem;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 8px;
}
.mw {
  color: #2c322f;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

.mw-top {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 10px;
}

.mw-kicker {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9a9286;
  font-family: "Segoe UI", sans-serif;
}

.mw h2 {
  margin: 1px 0 0;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.mw-sub {
  margin: 4px 0 0;
  max-width: 40rem;
  font-size: 13px;
  line-height: 1.4;
  color: #5c635e;
}

.mw-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

.mw-controls button {
  min-height: 28px;
  padding: 4px 11px;
  border: 1px solid #e4ded4;
  border-radius: 999px;
  background: #fffdf9;
  color: #2c322f;
  cursor: pointer;
  font-size: 11px;
  font-family: "Segoe UI", sans-serif;
}

.mw-controls button:disabled { opacity: 0.45; }

.mw-train {
  background: #5d6a5e !important;
  color: #fffdf9 !important;
  border-color: #5d6a5e !important;
}

.mw-speed {
  display: inline-flex;
  border: 1px solid #e4ded4;
  border-radius: 999px;
  overflow: hidden;
}

.mw-speed button {
  border: 0;
  border-radius: 0;
  min-width: 36px;
  padding: 4px 8px;
}

.mw-speed button.on {
  background: #5d6a5e;
  color: #fffdf9;
}

.mw-ribbon {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background: #fffdf9;
  border: 1px solid #e4ded4;
  border-radius: 999px;
  padding: 3px 6px;
  margin-bottom: 12px;
}

.mw-op {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 11px;
  border-right: 1px solid #efe8dc;
}

.mw-op:last-child { border-right: 0; }

.mw-op span,
.mw-op em {
  font-family: "Segoe UI", sans-serif;
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: #9a9286;
}

.mw-op strong {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-family: "Segoe UI", sans-serif;
}

.mw-op.warn { background: #fbf4e8; border-radius: 999px; border-right-color: transparent; }
.mw-op.bad { background: #f8ecea; border-radius: 999px; border-right-color: transparent; }

.mw-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) 280px;
  gap: 12px;
  align-items: start;
}

.mw-city {
  background:
    radial-gradient(700px 280px at 50% 0%, rgba(93, 106, 94, 0.14), transparent 55%),
    linear-gradient(180deg, #e4ebe0 0%, #f3eee4 100%);
  border: 1px solid #ddd4c6;
  border-radius: 18px;
  padding: 12px 12px 14px;
}

.mw-nets { display: flex; flex-direction: column; gap: 2px; }

.mw-plaza {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 12px;
  align-items: center;
  background: rgba(255, 253, 249, 0.88);
  border: 1px solid #d5ddd0;
  border-radius: 14px;
  padding: 8px 12px;
  margin-bottom: 10px;
}

.mw-plaza-core {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8b9a86, #5d6a5e 62%, #4f5c53);
  color: #fffdf9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mw-plaza-core span {
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: "Segoe UI", sans-serif;
}

.mw-plaza-core strong {
  font-size: 13px;
  font-weight: 500;
}

.mw-plaza-copy p {
  margin: 0 0 2px;
  color: #5c635e;
  font-size: 12px;
  line-height: 1.35;
}

.mw-status {
  font-family: "Segoe UI", sans-serif;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5d6a5e !important;
}

.mw-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", sans-serif;
  font-size: 10px;
  color: #6f746f;
}

.mw-legend li {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 2px 0;
}

.pip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.pip.calm { background: #8aa58a; }
.pip.busy { background: #c4a574; }
.pip.hot { background: #b56a5e; }
.pip.off { background: #8a847a; }

.mw-district { margin-top: 10px; }

.mw-district header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin: 0 2px 6px;
}

.mw-district header strong {
  display: block;
  font-size: 13px;
}

.mw-district header span,
.mw-district header em {
  font-family: "Segoe UI", sans-serif;
  font-style: normal;
  font-size: 11px;
  color: #6f746f;
}

.mw-street {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 4px;
}

.mw-house {
  appearance: none;
  text-align: left;
  border: 1px solid #e4ded4;
  background: #fffdf9;
  border-radius: 7px;
  padding: 0 0 4px;
  cursor: pointer;
  min-height: 48px;
}

.mw-house .mw-roof {
  display: block;
  height: 4px;
  background: #8aa58a;
  border-radius: 6px 6px 0 0;
}

.mw-house.load-MED .mw-roof,
.mw-house.load-HIGH .mw-roof { background: #c4a574; }
.mw-house.load-CRITICAL .mw-roof,
.mw-house.attn .mw-roof { background: #b56a5e; }
.mw-house.shut .mw-roof { background: #8a847a; }

.mw-face { display: none; }

.mw-house.on {
  border-color: #5d6a5e;
  box-shadow: 0 0 0 1px rgba(93, 106, 94, 0.35);
}

.mw-house b,
.mw-house small,
.mw-house i {
  display: block;
  padding: 0 5px;
  font-style: normal;
}

.mw-house b {
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.15;
  font-family: "Segoe UI", sans-serif;
  font-weight: 600;
}

.mw-house small {
  font-family: "Segoe UI", sans-serif;
  font-size: 9px;
  color: #8a847a;
}

.mw-house i {
  font-family: "Segoe UI", sans-serif;
  font-size: 9px;
  color: #6f746f;
}

.mw-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mw-card {
  background: #fffdf9;
  border: 1px solid #e4ded4;
  border-radius: 14px;
  padding: 12px 13px 11px;
}

.mw-card h3 {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 500;
}

.mw-card-scroll {
  max-height: 220px;
  overflow: auto;
}


/* —— Shift panel / readable chat (manual start-stop-timer) —— */
.mw-howto {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}
.mw-howto > div {
  background: #fffdf9;
  border: 1px solid #ebe4d8;
  border-radius: 10px;
  padding: 8px 10px;
}
.mw-howto strong {
  display: block;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6f746f;
  font-family: "Segoe UI", sans-serif;
  margin-bottom: 2px;
}
.mw-howto span {
  font-size: 12px;
  line-height: 1.35;
  color: #3d4440;
}
.mw-panel {
  border: 1px solid #ebe4d8;
  border-radius: 12px;
  background: #faf7f1;
  padding: 8px 10px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mw-panel-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.mw-panel-label {
  min-width: 52px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9a9286;
  font-family: "Segoe UI", sans-serif;
}
.mw-stop {
  background: #8b4a3f !important;
  color: #fffdf9 !important;
  border-color: #8b4a3f !important;
}
.mw-timer input[type="datetime-local"] {
  min-height: 28px;
  border: 1px solid #e4ded4;
  border-radius: 999px;
  padding: 2px 10px;
  background: #fffdf9;
  font-size: 11px;
  font-family: "Segoe UI", sans-serif;
  color: #2c322f;
}
.mw-timer-note {
  font-size: 11px;
  color: #6f746f;
  font-style: normal;
}
.mw-chatlog {
  display: flex;
  flex-direction: column;
  min-height: 280px;
  max-height: min(52vh, 520px);
}
.mw-chatlog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mw-chatlog-head h3 { margin: 0; }
.mw-chatlog .mw-talks {
  flex: 1;
  overflow: auto;
  max-height: none;
  margin-top: 6px;
  padding-right: 4px;
  scroll-behavior: auto;
}
.mw-controls button.on-soft {
  background: #e8efe6;
  border-color: #c5d4c2;
}
@media (max-width: 900px) {
  .mw-howto { grid-template-columns: 1fr; }
}


.mw-now-prose p {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.4;
  color: #3d4440;
}

.mw-talks {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.mw-talks li {
  padding: 8px 0;
  border-bottom: 1px solid #efe8dc;
}

.mw-talks p {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.4;
  color: #3d4440;
}

.mw-talk-meta {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6f746f;
  margin-bottom: 4px;
}

.mw-talk-snip {
  display: block;
  font-size: 11px;
  color: #5c635e;
  margin-top: 2px;
}
  list-style: none;
  margin: 0;
  padding: 0;
}

.mw-moments button {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 6px 0;
  border-bottom: 1px solid #efe8dc;
  cursor: pointer;
}

.mw-moments b { display: block; font-size: 12px; }
.mw-moments span {
  font-family: "Segoe UI", sans-serif;
  font-size: 10px;
  color: #6f746f;
}

.mw-skill {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid #efe8dc;
  font-size: 12px;
}

.mw-skill span {
  font-family: "Segoe UI", sans-serif;
  font-size: 10px;
  color: #6f746f;
  white-space: nowrap;
}

.mw-empty {
  margin: 0;
  color: #6f746f;
  font-size: 13px;
  line-height: 1.4;
}

.mw-err, .mw-busy {
  margin: 0 0 10px;
  padding: 8px 11px;
  border-radius: 10px;
  font-family: "Segoe UI", sans-serif;
  font-size: 13px;
}

.mw-z125 {
  zoom: 1.25;
}

.mw-house.live {
  border-color: #5d6a5e;
}

.mw-pip-live {
  display: block;
  margin: 3px 5px 0;
  padding: 1px 5px;
  width: fit-content;
  border-radius: 999px;
  font-family: "Segoe UI", sans-serif;
  font-size: 8px;
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  animation: mw-pulse 1.1s ease-in-out infinite;
}

.mw-pip-live.chat {
  background: #e7eee3;
  color: #3d4a3f;
}

.mw-pip-live.phone {
  background: #f4ebe0;
  color: #6a4e32;
}

@keyframes mw-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.mw-listen {
  margin: 6px 0 4px;
  min-height: 28px;
  padding: 4px 12px;
  border: 1px solid #5d6a5e;
  border-radius: 999px;
  background: #5d6a5e;
  color: #fffdf9;
  cursor: pointer;
  font-size: 11px;
  font-family: "Segoe UI", sans-serif;
}

.mw-listen:disabled { opacity: 0.45; }

.mw-live-list {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-family: "Segoe UI", sans-serif;
  font-size: 12px;
  color: #5c635e;
}

.mw-live-list li {
  padding: 3px 0;
  border-bottom: 1px solid #efe8dc;
}

.mw-trace {
  position: fixed;
  inset: 0;
  background: rgba(48, 55, 53, 0.38);
  display: grid;
  place-items: center;
  z-index: 80;
}

.mw-trace article {
  width: min(560px, 92vw);
  background: #fffdf9;
  border-radius: 16px;
  padding: 16px 18px;
}

.mw-trace header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

@media (max-width: 1180px) {
  .mw-grid { grid-template-columns: 1fr; }
  .mw-ribbon { border-radius: 14px; }
}

.mw-house.lc-TRIAL .mw-roof { background: #7a9a6a; }
.mw-house.lc-WARNING .mw-roof { background: #c4a35a; }
.mw-house.lc-EXITED .mw-roof { background: #8a6a62; }
.mw-house.lc-SUSPENDED { opacity: 0.55; }

.mw-claims {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid #e4ded4;
  border-radius: 16px;
  background: #faf7f1;
}

.mw-claims header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.mw-claims h3 {
  margin: 2px 0 0;
  font-size: 20px;
  font-weight: 500;
}

.mw-claims header p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #5c635e;
}

.mw-claim-metrics {
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0;
  border: 1px solid #e4ded4;
  border-radius: 12px;
  overflow: hidden;
}

.mw-claim-cols {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.mw-claim-col {
  background: #fffdf9;
  border: 1px solid #e4ded4;
  border-radius: 10px;
  padding: 8px;
  min-height: 88px;
}

.mw-claim-col strong {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.mw-claim-col em {
  font-style: normal;
  color: #9a9286;
}

.mw-claim-col ul {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 11px;
  color: #5c635e;
}

.mw-claim-col li {
  margin: 0 0 3px;
}

.mw-claim-moments {
  margin: 8px 0 0;
  font-size: 12px;
  color: #7a5348;
}

@media (max-width: 1100px) {
  .mw-claim-cols { grid-template-columns: repeat(3, 1fr); }
}

/* ========== Living salon street (real states only) ========== */
.mw {
  --mw-cream: #f7f1e6;
  --mw-paper: #fffdf9;
  --mw-ink: #2c322f;
  --mw-sage: #5d6a5e;
  --mw-warm: #c4a574;
  --mw-glow: #ffe6b0;
}

.mw.mw-alive .mw-city {
  background:
    radial-gradient(900px 320px at 50% -10%, rgba(255, 230, 176, 0.45), transparent 55%),
    radial-gradient(500px 220px at 80% 20%, rgba(93, 106, 94, 0.12), transparent 50%),
    linear-gradient(180deg, #dfe8d8 0%, #f3eee4 42%, #ebe3d4 100%);
  box-shadow: inset 0 1px 0 rgba(255, 253, 249, 0.7);
}

.mw-plaza {
  position: relative;
  overflow: hidden;
  grid-template-columns: 72px 1fr auto;
  background: linear-gradient(180deg, rgba(255, 253, 249, 0.95), rgba(247, 241, 230, 0.92));
  border-color: #d2c7b4;
}

.mw-plaza.shift-on {
  border-color: #a8b89f;
  box-shadow: 0 0 0 1px rgba(93, 106, 94, 0.15), 0 8px 24px rgba(93, 106, 94, 0.08);
}

.mw-sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.mw-cloud {
  position: absolute;
  width: 48px;
  height: 14px;
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.55);
  top: 10px;
  animation: mw-drift 28s linear infinite;
}
.mw-cloud.c1 { left: -40px; opacity: 0.7; }
.mw-cloud.c2 { left: -80px; top: 22px; width: 36px; animation-duration: 38s; animation-delay: -12s; opacity: 0.45; }
.mw-sun {
  position: absolute;
  right: 18%;
  top: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff6d8, #e8c57a 70%, transparent 72%);
  opacity: 0.85;
}
.mw-alive .mw-sun { animation: mw-breathe 4.5s ease-in-out infinite; }

@keyframes mw-drift {
  from { transform: translateX(0); }
  to { transform: translateX(420px); }
}
@keyframes mw-breathe {
  0%, 100% { transform: scale(1); opacity: 0.75; }
  50% { transform: scale(1.08); opacity: 1; }
}

.mw-plaza-core {
  position: relative;
  z-index: 1;
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 253, 249, 0.2), transparent 40%),
    radial-gradient(circle at 35% 28%, #9aab94, #5d6a5e 58%, #445048);
  box-shadow: 0 6px 16px rgba(70, 82, 72, 0.22);
}
.mw-plaza-core .mw-scissors {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background:
    radial-gradient(circle at 32% 40%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 68% 40%, #fff 0 2px, transparent 3px);
}
.mw-plaza-core em {
  display: block;
  margin-top: 1px;
  font-size: 7px;
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
  font-family: "Segoe UI", sans-serif;
  max-width: 64px;
  text-align: center;
  line-height: 1.15;
}
.mw-plaza-core em.beat {
  animation: mw-pulse-soft 1.6s ease-in-out infinite;
}

.pip.live {
  background: #5d6a5e;
  box-shadow: 0 0 0 3px rgba(93, 106, 94, 0.2);
  animation: mw-pulse-soft 1.4s ease-in-out infinite;
}

.mw-street {
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
  padding: 4px 2px 8px;
  border-radius: 12px;
  background:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 10px,
      rgba(90, 80, 60, 0.03) 10px,
      rgba(90, 80, 60, 0.03) 11px
    );
}

.mw-house {
  position: relative;
  border: 1px solid #e0d6c6;
  background: linear-gradient(180deg, #fffdf9 0%, #f3ebe0 100%);
  border-radius: 10px;
  padding: 0 0 6px;
  min-height: 78px;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.mw-house:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(70, 60, 40, 0.1);
}
.mw-house.open .mw-win.lit {
  background: linear-gradient(180deg, #fff8e4, #f0d9a0);
  box-shadow: inset 0 0 0 1px rgba(196, 165, 116, 0.35), 0 0 8px rgba(255, 220, 140, 0.35);
}
.mw-house.shut {
  filter: grayscale(0.35);
  opacity: 0.72;
}
.mw-house.shut .mw-win.lit {
  background: #cfc8bc;
  box-shadow: none;
}

.mw-awning {
  display: block;
  height: 7px;
  background: repeating-linear-gradient(
    90deg,
    #5d6a5e 0 8px,
    #f7f1e6 8px 16px
  );
  border-radius: 9px 9px 0 0;
}
.mw-house .mw-roof {
  height: 5px;
  border-radius: 0;
  background: #7f927c;
}
.mw-face {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 14px 10px;
  gap: 3px;
  padding: 5px 6px 2px;
}
.mw-win {
  display: block;
  border-radius: 2px;
  background: #d8d2c6;
  min-height: 12px;
}
.mw-door {
  grid-column: 1 / -1;
  height: 10px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, #8b7355, #6a5640);
  justify-self: center;
  width: 38%;
}

.mw-house.live {
  border-color: #5d6a5e;
  box-shadow: 0 0 0 2px rgba(93, 106, 94, 0.18), 0 10px 22px rgba(93, 106, 94, 0.12);
  z-index: 2;
}
.mw-house.live .mw-win.lit {
  background: linear-gradient(180deg, #fffcec, #ffd978);
  box-shadow: 0 0 12px rgba(255, 210, 100, 0.65);
  animation: mw-window-glow 1.8s ease-in-out infinite;
}
.mw-house.ringing {
  animation: mw-house-nudge 0.9s ease-in-out infinite;
}
.mw-house.chatting .mw-bubble {
  animation: mw-bubble-pop 1.4s ease-in-out infinite;
}

@keyframes mw-window-glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.15); }
}
@keyframes mw-house-nudge {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-1px); }
  70% { transform: translateY(0.5px); }
}
@keyframes mw-pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
@keyframes mw-bubble-pop {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.12); opacity: 1; }
}
@keyframes mw-ring-wave {
  0% { transform: scale(0.6); opacity: 0.7; }
  100% { transform: scale(1.8); opacity: 0; }
}
@keyframes mw-speak {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

.mw-pip-live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 3px 5px 0;
  animation: mw-pulse-soft 1.2s ease-in-out infinite;
}
.mw-ring {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c4a574;
  position: relative;
}
.mw-ring::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1px solid rgba(196, 165, 116, 0.7);
  animation: mw-ring-wave 1.1s ease-out infinite;
}
.mw-bubble {
  width: 9px;
  height: 7px;
  border-radius: 4px;
  background: #5d6a5e;
  position: relative;
}
.mw-bubble::after {
  content: "";
  position: absolute;
  left: 2px;
  bottom: -3px;
  border: 3px solid transparent;
  border-top-color: #5d6a5e;
}

.mw-queue {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  margin: 2px 5px 0;
  min-height: 10px;
}
.mw-person {
  width: 5px;
  height: 8px;
  border-radius: 3px 3px 1px 1px;
  background: #8a7a66;
  opacity: 0.85;
}
.mw-more {
  font-size: 8px;
  color: #6f746f;
  font-family: "Segoe UI", sans-serif;
}

.mw-house b {
  display: block;
  margin: 2px 5px 0;
  font-size: 9px;
  line-height: 1.15;
}
.mw-house small {
  display: block;
  margin: 0 5px;
  font-size: 8px;
  color: #7a746a;
}
.mw-house i.mw-name {
  display: block;
  margin: 0 5px;
  font-size: 8px;
  font-style: normal;
  color: #9a9286;
  font-family: "Segoe UI", sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mw-grid {
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, 340px);
}

.mw-stage.has-live {
  background: linear-gradient(180deg, #fffdf9, #f3f6ef);
  border: 1px solid #d5ddd0;
  border-radius: 14px;
  padding: 10px 12px;
}
.mw-stage-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mw-stage-card {
  border-radius: 12px;
  padding: 8px 10px;
  background: #fffdf9;
  border: 1px solid #ebe4d8;
  animation: mw-card-in 0.35s ease;
}
.mw-stage-card.phone {
  border-left: 3px solid #c4a574;
}
.mw-stage-card.chat {
  border-left: 3px solid #5d6a5e;
}
@keyframes mw-card-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.mw-stage-card header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.mw-stage-badge {
  font-family: "Segoe UI", sans-serif;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: #efe8dc;
  color: #5c635e;
}
.mw-stage-card.phone .mw-stage-badge { background: #f4ebe0; color: #6a4e32; }
.mw-stage-card.chat .mw-stage-badge { background: #e7eee3; color: #3d4a3f; }
.mw-stage-guest,
.mw-stage-melisa {
  margin: 0 0 4px;
  font-size: 12px;
  line-height: 1.4;
  color: #3d4440;
}
.mw-stage-melisa.speaking {
  animation: mw-speak 1.2s ease-in-out infinite;
}
.mw-stage-idle {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 4px;
  color: #6f746f;
  font-size: 13px;
}
.mw-stage-door {
  width: 28px;
  height: 36px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #8b7355, #5a4634);
  box-shadow: inset -4px 0 0 rgba(0, 0, 0, 0.12);
  position: relative;
  flex-shrink: 0;
}
.mw-stage-door::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 16px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #d4b48a;
}

.mw-chatlog {
  background: linear-gradient(180deg, #fffdf9, #faf6ef);
  border: 1px solid #ebe4d8;
  border-radius: 14px;
  padding: 10px 12px;
}
.mw-talks li {
  border-radius: 8px;
  padding: 8px 6px;
  transition: background 0.2s ease;
}
.mw-talks li:hover {
  background: rgba(93, 106, 94, 0.06);
}

@media (prefers-reduced-motion: reduce) {
  .mw-cloud,
  .mw-sun,
  .mw-house.live .mw-win.lit,
  .mw-house.ringing,
  .mw-bubble,
  .mw-pip-live,
  .mw-stage-melisa.speaking,
  .pip.live,
  .mw-plaza-core em.beat {
    animation: none !important;
  }
}
.pm-architect-chat {
  display: flex;
  flex-direction: column;
  min-height: 520px;
  max-height: 72vh;
  background: #fffdf9;
  border: 1px solid #e4ded4;
  border-radius: 16px;
  overflow: hidden;
}

.pm-architect-chat.is-cockpit {
  min-height: 0;
  max-height: none;
  height: 100%;
  border: 0;
}

.pm-architect-chat.is-cockpit .pm-architect-composer {
  flex-wrap: nowrap;
}

.pm-architect-toolbar,
.pm-architect-confirm,
.pm-architect-composer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  align-items: flex-end;
}

.pm-architect-toolbar,
.pm-architect-confirm {
  border-bottom: 1px solid #e4ded4;
  flex-shrink: 0;
}

.pm-architect-composer {
  margin-top: auto;
  border-top: 1px solid #e4ded4;
  border-bottom: none;
  flex-shrink: 0;
}

.pm-architect-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #657260;
}

.pm-architect-toolbar select,
.pm-architect-toolbar input,
.pm-architect-composer input {
  min-width: 140px;
  border: 1px solid #e4ded4;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  background: #fff;
}

.pm-architect-badge {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #123f39;
  background: #f7f4ec;
  border-radius: 999px;
  padding: 8px 12px;
}

.pm-architect-thread {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pm-architect-bubble {
  max-width: 86%;
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.4;
}

.pm-architect-bubble.melisa {
  background: #f7f4ec;
  color: #123a37;
  align-self: flex-start;
}

.pm-architect-bubble.user {
  background: #123f39;
  color: #fff;
  align-self: flex-end;
}

.pm-architect-bubble small {
  display: block;
  margin-top: 6px;
  opacity: 0.65;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.pm-architect-confirm {
  background: #fff8e8;
  border-top: 1px solid #e4ded4;
  border-bottom: none;
  font-size: 13px;
  align-items: center;
}

.pm-architect-confirm button,
.pm-architect-composer button {
  border: 0;
  background: #123f39;
  color: #fff;
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pm-architect-confirm button.ghost {
  background: transparent;
  color: #657260;
  border: 1px solid #e4ded4;
}

.pm-architect-voices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  width: 100%;
  font-size: 11px;
  font-weight: 700;
  color: #657260;
}

.pm-architect-voices button {
  border: 1px solid #e4ded4;
  background: #fff;
  color: #123f39;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.pm-architect-voices button.is-chosen {
  background: #123f39;
  color: #fff;
}

.pm-architect-voice-diag {
  width: 100%;
  font-size: 10px;
  font-weight: 600;
  color: #8a8378;
  letter-spacing: 0.02em;
}

.pm-architect-composer input {
  flex: 1;
}

.pm-architect-composer button:active,
.pm-architect-composer button.is-listening {
  background: #bd7d76;
  color: #fff;
  outline: none;
}

.pm-architect-mic-hint {
  margin: 0;
  padding: 0 14px 10px;
  font-size: 12px;
  font-weight: 700;
  color: #8a4b44;
}
.aw {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  gap: 12px;
}

.aw-heading {
  margin-bottom: 0;
  flex-shrink: 0;
}

.aw-stats {
  margin-bottom: 0;
  flex-shrink: 0;
}

.aw-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 380px);
  gap: 16px;
}

.aw-board,
.aw-desk {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--pm-surface, #fffdf9);
  border: 1px solid var(--pm-border, #e4ded4);
  border-radius: 16px;
}

.aw-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--pm-border, #e4ded4);
  flex-shrink: 0;
}

.aw-filters button {
  border: 1px solid var(--pm-border, #e4ded4);
  background: #fff;
  color: var(--pm-muted, #777b75);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.aw-filters select {
  border: 1px solid var(--pm-border, #e4ded4);
  background: #fff;
  color: var(--pm-muted, #777b75);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
}

.aw-filters select.on {
  color: var(--pm-ink, #303735);
  border-color: var(--pm-accent-dark, #657260);
  background: var(--pm-bg-soft, #faf8f4);
}

.aw-stage {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 16px 18px 20px;
}

.aw-desk .pm-architect-chat {
  flex: 1;
  min-height: 0;
}

.aw-overview {
  display: grid;
  gap: 12px;
}

.aw-voices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 8px 0 12px;
}

.aw-voices button {
  border: 1px solid #e4ded4;
  background: #fff;
  color: #303735;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.aw-voices button.on {
  background: var(--pm-bg-soft, #faf8f4);
  border-color: var(--pm-accent-dark, #657260);
}

.aw-grid {
  display: grid;
  gap: 10px;
}

.aw-grid article,
.aw-card {
  border: 1px solid #efe8dc;
  border-radius: 12px;
  padding: 10px 12px;
}

.aw-grid h3,
.aw-card h3 {
  margin: 0 0 6px;
  font-size: 13px;
}

.aw-grid p,
.aw-card p,
.aw-list {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}

.aw-logs input {
  width: 100%;
  margin-bottom: 8px;
  border: 1px solid #e4ded4;
  border-radius: 8px;
  padding: 8px;
}

.aw-logs ul,
.aw-list {
  list-style: none;
  padding: 0;
}

.aw-logline,
.aw-logs button {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 6px 0;
  cursor: pointer;
  font-size: 12px;
}

.aw-logs span,
.aw-logs em {
  display: block;
  color: #657260;
}

.aw-logs pre,
.aw-grid pre {
  white-space: pre-wrap;
  font-size: 11px;
  background: #f6f3ee;
  padding: 8px;
  border-radius: 8px;
}

.aw-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.aw-actions button {
  border: 0;
  background: #1c1f2a;
  color: #fff;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
}

.aw-actions .ghost {
  background: #fff;
  color: #1c1f2a;
  border: 1px solid #e4ded4;
}

.aw-err {
  color: #9b2c2c;
  font-size: 12px;
  flex-shrink: 0;
}


.aw-props-h {
  margin: 8px 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pm-muted, #777b75);
}
.aw-market-blocks p { margin: 0 0 8px; }
.aw-chip { font-size: 11px; color: #657260; margin: 0 0 8px; }
.aw-actions .danger {
  background: #fff;
  color: #9b2c2c;
  border: 1px solid #f0c2c2;
}
@media (max-width: 900px) {
  .aw { gap: 8px; }
  .aw-heading { padding-bottom: 0; }
  .aw-stats { grid-template-columns: 1fr 1fr; }
  .aw-body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(240px, 55vh) minmax(240px, 40vh);
  }
  .aw-filters { overflow-x: auto; flex-wrap: nowrap; }
  .aw-filters button, .aw-filters select { flex: 0 0 auto; }
}
/* ==========================================================================
   PickMe Live Melisa Widget Stylesheet — Luxury Emerald Compact Floating UI
   ========================================================================== */

.pm-live-melisa-container {
  position: fixed;
  z-index: 10050;
  display: flex;
  flex-direction: column;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  user-select: none;
}

.pm-live-melisa-container.is-edge {
  bottom: auto;
  transform: translateY(-50%);
}

.pm-live-melisa-container.edge-right {
  right: 0;
  left: auto;
  align-items: flex-end;
}

.pm-live-melisa-container.edge-left {
  left: 0;
  right: auto;
  align-items: flex-start;
}

.pm-melisa-edge-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 42px;
  padding: 10px 5px 12px;
  border: 0;
  background: #101116;
  box-shadow: 0 10px 24px rgba(16, 17, 22, 0.28);
  cursor: grab;
  touch-action: none;
  appearance: none;
  -webkit-appearance: none;
}

.pm-live-melisa-container.edge-right .pm-melisa-edge-tab {
  border-radius: 16px 0 0 16px;
}

.pm-live-melisa-container.edge-left .pm-melisa-edge-tab {
  border-radius: 0 16px 16px 0;
}

.pm-melisa-edge-tab:active {
  cursor: grabbing;
}

.pm-melisa-edge-tab .pm-melisa-character-img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #4b5fff;
  pointer-events: none;
}

.pm-melisa-edge-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #ffffff;
  text-transform: uppercase;
}

.pm-live-melisa-container.edge-left .pm-melisa-edge-label {
  transform: none;
}

.pm-melisa-edge-tab.listening-active {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.35);
}

.pm-live-melisa-container * {
  box-sizing: border-box;
}

/* ─── 1. Luxury Living Circle Avatar (Compact Floating Trigger) ────────────── */
.pm-melisa-circle-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  width: auto;
  padding: 4px 16px 4px 4px;
  border-radius: 999px;
  background: #0b1220;
  border: 2px solid #60a5fa;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.28), 0 0 0 6px rgba(96, 165, 250, 0.28);
  cursor: pointer;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pm-melisa-circle-btn:hover {
  transform: translateY(-3px) scale(1.04);
  border-color: #93c5fd;
  box-shadow: 0 12px 32px rgba(37, 99, 235, 0.35), 0 0 24px rgba(96, 165, 250, 0.45);
}

.pm-melisa-circle-btn.live-voice-active {
  border-color: #10b981;
  box-shadow: 0 0 28px rgba(16, 185, 129, 0.6);
}

.pm-melisa-circle-btn.listening-active {
  border-color: #ef4444;
  box-shadow: 0 0 28px rgba(239, 68, 68, 0.6);
}

.pm-melisa-avatar-wrapper {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pm-melisa-avatar-wrapper.small {
  width: 36px;
  height: 36px;
}

.pm-melisa-halo-glow {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 180deg, #10b981, #34d399, #fbbf24, #10b981);
  opacity: 0.85;
  filter: blur(3px);
  animation: pmHaloSpin 5s linear infinite;
}

.pm-melisa-halo-glow.pulse-emerald {
  background: conic-gradient(from 0deg, #10b981, #6ee7b7, #a7f3d0, #10b981);
  animation: pmHaloSpin 3s linear infinite;
}

.pm-melisa-halo-glow.pulse-red {
  background: conic-gradient(from 0deg, #ef4444, #f87171, #fca5a5, #ef4444);
  animation: pmHaloSpin 2s linear infinite;
}

@keyframes pmHaloSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.pm-melisa-circle-btn .pm-melisa-halo-glow {
  display: none;
}

.pm-melisa-fab-label {
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
  padding-right: 4px;
  white-space: nowrap;
}

.pm-melisa-character-img {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #93c5fd;
}

.pm-melisa-avatar-wrapper.small .pm-melisa-character-img {
  width: 32px;
  height: 32px;
}

.pm-melisa-listening-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ef4444;
  border: 2px solid #123f39;
  animation: pmPulseRed 1.1s infinite;
}

@keyframes pmPulseRed {
  0% { transform: scale(0.9); opacity: 0.8; }
  50% { transform: scale(1.25); opacity: 1; box-shadow: 0 0 10px #ef4444; }
  100% { transform: scale(0.9); opacity: 0.8; }
}

/* Soundwave Waveform Animation */
.pm-melisa-voice-soundwave {
  position: absolute;
  bottom: -6px;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 12px;
}

.pm-melisa-voice-soundwave span {
  width: 3px;
  height: 8px;
  background: #ef4444;
  border-radius: 2px;
  animation: pmSoundwave 0.8s ease-in-out infinite alternate;
}

.pm-melisa-voice-soundwave span:nth-child(1) { animation-delay: 0s; height: 6px; }
.pm-melisa-voice-soundwave span:nth-child(2) { animation-delay: 0.2s; height: 12px; }
.pm-melisa-voice-soundwave span:nth-child(3) { animation-delay: 0.4s; height: 10px; }
.pm-melisa-voice-soundwave span:nth-child(4) { animation-delay: 0.1s; height: 7px; }

@keyframes pmSoundwave {
  0% { transform: scaleY(0.4); }
  100% { transform: scaleY(1.3); }
}

/* ─── 2. Expanded Chat Card ───────────────────────────────────────────────── */

.pm-melisa-chat-card {
  width: min(380px, calc(100vw - 32px));
  height: min(520px, calc(100vh - 96px));
  max-height: min(520px, calc(100vh - 96px));
  background: #ffffff;
  border: 1px solid #e4ded4;
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(16, 17, 22, 0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: pmSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@keyframes pmSlideUp {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.pm-melisa-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #f7f4ec;
  border-bottom: 1px solid #e4ded4;
  flex-shrink: 0;
}

.pm-melisa-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pm-melisa-online-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 9px;
  height: 9px;
  background: #4b5fff;
  border-radius: 50%;
  border: 1.5px solid #ffffff;
}

.pm-melisa-header-titles {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.pm-melisa-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pm-melisa-header-name {
  font-size: 14px;
  font-weight: 700;
  color: #101116;
  font-family: Fraunces, Georgia, serif;
  font-style: italic;
}

.pm-melisa-header-badge {
  font-size: 10px;
  font-weight: 600;
  background: rgba(75, 95, 255, 0.12);
  color: #4b5fff;
  padding: 1px 6px;
  border-radius: 6px;
}

.pm-melisa-header-badge.architect {
  background: rgba(123, 31, 162, 0.35);
  color: #e9d5ff;
  border: 1px solid rgba(168, 85, 247, 0.4);
}

.pm-melisa-header-status {
  font-size: 11px;
  color: #6b6f78;
}

.pm-melisa-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pm-melisa-header-btn {
  background: #ffffff;
  border: 1px solid #e4ded4;
  border-radius: 8px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #101116;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pm-melisa-header-btn:hover {
  background: rgba(75, 95, 255, 0.35);
  border-color: #60a5fa;
}

.pm-melisa-header-btn.mic-active {
  background: rgba(239, 68, 68, 0.3);
  border-color: #ef4444;
}

.pm-melisa-header-btn.close:hover {
  background: rgba(239, 68, 68, 0.3);
  border-color: #ef4444;
}

/* ─── 3. Chat Messages Body ───────────────────────────────────────────────── */
.pm-melisa-messages-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.pm-melisa-welcome-msg {
  text-align: center;
  padding: 20px 10px;
  color: #5c6068;
}

.pm-welcome-headline {
  font-size: 15px;
  font-weight: 600;
  color: #101116;
  margin: 0 0 4px 0;
  font-family: Fraunces, Georgia, serif;
  font-style: italic;
}

.pm-welcome-sub {
  font-size: 12px;
  color: #6b6f78;
  margin: 0;
}

.pm-chat-msg {
  display: flex;
  width: 100%;
}

.pm-chat-msg.user {
  justify-content: flex-end;
}

.pm-chat-msg.melisa {
  justify-content: flex-start;
}

.pm-msg-bubble {
  max-width: 82%;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.4;
  word-wrap: break-word;
}

.pm-chat-msg.user .pm-msg-bubble {
  background: #4b5fff;
  color: #ffffff;
  border-bottom-right-radius: 4px;
}

.pm-chat-msg.melisa .pm-msg-bubble {
  background: #f7f4ec;
  color: #101116;
  border: 1px solid #e4ded4;
  border-bottom-left-radius: 4px;
}

.pm-msg-bubble.speech-pulse {
  border-color: #4b5fff;
  box-shadow: 0 0 0 3px rgba(75, 95, 255, 0.12);
}

.pm-melisa-quick-options-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.pm-melisa-quick-opt-btn {
  background: rgba(75, 95, 255, 0.1);
  border: 1px solid #4b5fff;
  color: #101116;
  border-radius: 12px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.pm-melisa-quick-opt-btn:hover {
  background: #4b5fff;
  color: #ffffff;
}

/* ─── 4. Input Row with Dedicated Mic Button ─────────────────────────────── */
.pm-melisa-chat-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #f7f4ec;
  border-top: 1px solid #e4ded4;
  flex-shrink: 0;
}

.pm-melisa-row-mic-btn {
  background: #ffffff;
  border: 1.5px solid #e4ded4;
  border-radius: 10px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  color: #101116;
  flex-shrink: 0;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.pm-melisa-row-mic-btn:hover {
  border-color: #4b5fff;
}

.pm-melisa-row-mic-btn:active,
.pm-melisa-row-mic-btn.listening {
  background: #4b5fff;
  border-color: #4b5fff;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(75, 95, 255, 0.2);
  outline: none;
  animation: none;
}

.pm-melisa-input-field {
  flex: 1;
  min-width: 0;
  background: #ffffff;
  border: 1px solid #e4ded4;
  border-radius: 10px;
  padding: 8px 12px;
  color: #101116;
  font-size: 13px;
  outline: none;
}

.pm-melisa-input-field:focus {
  border-color: #4b5fff;
  background: #ffffff;
}

.pm-melisa-input-field::placeholder {
  color: #9a958c;
}

.pm-melisa-submit-btn {
  background: #4b5fff;
  border: none;
  border-radius: 10px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.pm-melisa-submit-btn:hover:not(:disabled) {
  transform: scale(1.08);
}

.pm-melisa-submit-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (max-width: 480px) {
  .pm-melisa-chat-card {
    width: min(360px, calc(100vw - 52px));
    max-height: 70vh;
  }
}
/* =========================================================
   PICKME SUPER ADMIN PANEL — FINAL DESIGN SYSTEM
   Palette: Warm ivory, warm white surfaces, graphite ink,
   muted sage / olive, taupe, restrained status tones.
   ========================================================= */

.pm-admin {
  min-height: 100vh;
  overflow-y: auto !important;
  background: var(--pm-bg, #f7f4ec);
  color: var(--pm-ink, #303735);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.pm-admin.is-architect {
  height: 100dvh;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
}

.pm-admin.is-architect .pm-admin-tabs-inner {
  max-width: none;
}

.pm-admin.is-architect .pm-admin-main {
  flex: 1;
  min-height: 0;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 20px 24px 16px;
  overflow: hidden;
}

.pm-admin.is-architect .aw-host {
  height: 100%;
  margin: 0;
  padding: 0;
}

body.pm-architect-desk .pm-live-melisa-container,
body.pm-super-admin .pm-live-melisa-container {
  display: none !important;
}


/* Header */
.pm-admin-header {
  min-height: 64px;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding: 12px 28px;
  border-bottom: 1px solid var(--pm-border, #e4ded4);
  background: var(--pm-surface, #fffdf9);
  box-sizing: border-box;
}

.pm-admin-brand-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.pm-admin-logo {
  display: flex;
  align-items: center;
}

.pm-admin-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--pm-accent-dark, #657260);
}

.pm-admin-title small {
  display: block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--pm-taupe, #a69e90);
}

.pm-admin-title strong {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  color: var(--pm-ink, #303735);
  letter-spacing: -0.01em;
}

.pm-admin-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pm-admin-public-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  min-height: 32px;
  border: 1px solid var(--pm-border, #e4ded4);
  border-radius: var(--pm-radius-xs, 8px);
  background: var(--pm-surface, #fffdf9);
  color: var(--pm-ink, #303735);
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  box-sizing: border-box;
  transition: all 0.15s ease;
}

.pm-admin-public-btn:hover {
  background: var(--pm-bg-soft, #faf8f4);
  border-color: var(--pm-accent, #123f39);
}

.pm-admin-who {
  font-size: 11px;
  font-weight: 600;
  color: var(--pm-muted, #777b75);
}

.pm-admin-room-btn {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--pm-border, #e4ded4);
  border-radius: 999px;
  background: transparent;
  color: var(--pm-taupe, #a69e90);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.pm-admin-room-btn:hover,
.pm-admin-room-btn.is-back {
  color: var(--pm-ink, #303735);
  border-color: var(--pm-accent-dark, #657260);
}

.pm-admin-atelier-note {
  margin: 0 0 20px;
  color: var(--pm-muted, #777b75);
  font-size: 13px;
  line-height: 1.45;
}

.pm-admin.is-atelier .pm-admin-tabs-inner {
  max-width: none;
}

.pm-lab-doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.pm-lab-door {
  text-align: left;
  border: 1px solid var(--pm-border, #e4ded4);
  background: var(--pm-surface, #fffdf9);
  border-radius: 12px;
  padding: 18px 16px;
  cursor: pointer;
}

.pm-lab-door strong {
  display: block;
  font-size: 15px;
  color: var(--pm-ink, #303735);
}

.pm-lab-door span {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--pm-muted, #777b75);
  line-height: 1.4;
}

/* Navigation Tabs */
.pm-admin-tabs-nav {
  background: var(--pm-surface, #fffdf9);
  border-bottom: 1px solid var(--pm-border, #e4ded4);
  padding: 0 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pm-admin-tabs-inner {
  display: flex;
  gap: 8px;
  max-width: 1200px;
  margin: 0 auto;
  min-width: max-content;
}

.pm-admin-tab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border: none;
  background: none;
  color: var(--pm-muted, #777b75);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s ease;
}

.pm-admin-tab-btn:hover {
  color: var(--pm-ink, #303735);
}

.pm-admin-tab-btn.active {
  color: var(--pm-ink, #303735);
  border-bottom-color: var(--pm-accent-dark, #657260);
  font-weight: 700;
}

.badge-pill {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--pm-accent-dark, #657260);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
}

/* Main Container */
.pm-admin-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}

/* Notice Banner */
.pm-admin-notice {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 12px 18px;
  border-radius: var(--pm-radius-xs, 8px);
  background: var(--pm-accent-soft, rgba(18, 63, 57, 0.08));
  border: 1px solid var(--pm-border, #e4ded4);
  color: var(--pm-ink, #303735);
  font-size: 12px;
  font-weight: 600;
  animation: fadeIn 0.2s ease;
}

.notice-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--pm-muted, #777b75);
}

/* Heading Section */
.pm-admin-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 24px;
}

.pm-admin-heading small {
  color: var(--pm-accent-dark, #657260);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.pm-admin-heading h1 {
  margin: 4px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 32px;
  color: var(--pm-ink, #303735);
  letter-spacing: -0.02em;
}

.pm-admin-heading p {
  margin: 6px 0 0;
  color: var(--pm-muted, #777b75);
  font-size: 13px;
}

.action-btn {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid var(--pm-border, #e4ded4);
  border-radius: var(--pm-radius-xs, 8px);
  background: var(--pm-surface, #fffdf9);
  color: var(--pm-ink, #303735);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.action-btn:hover {
  background: var(--pm-bg-soft, #faf8f4);
  border-color: var(--pm-accent, #123f39);
}

/* Stats Cards */
.pm-admin-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.pm-admin-stats article {
  min-height: 86px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  border: 1px solid var(--pm-border, #e4ded4);
  border-radius: var(--pm-radius-sm, 11px);
  background: var(--pm-surface, #fffdf9);
  cursor: pointer;
  transition: all 0.15s ease;
}

.pm-admin-stats article:hover,
.pm-admin-stats article.selected {
  border-color: var(--pm-accent-dark, #657260);
  box-shadow: var(--pm-shadow-card, 0 12px 35px rgba(54, 57, 52, 0.055));
}

.pm-admin-stats svg {
  color: var(--pm-accent-dark, #657260);
}

.pm-admin-stats small {
  display: block;
  color: var(--pm-muted, #777b75);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.pm-admin-stats strong {
  display: block;
  margin-top: 2px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  color: var(--pm-ink, #303735);
}

.text-pending {
  color: var(--pm-taupe, #a69e90) !important;
}

.text-issued {
  color: var(--pm-accent-dark, #657260) !important;
}

.text-active {
  color: var(--pm-success, #123f39) !important;
}

/* Filter Bar & Search */
.pm-admin-filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.search-box {
  flex: 1;
  min-width: 280px;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid var(--pm-border, #e4ded4);
  border-radius: 999px;
  background: var(--pm-surface, #fffdf9);
}

.search-box svg {
  color: var(--pm-muted, #777b75);
}

.search-box input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: var(--pm-ink, #303735);
}

.clear-btn {
  background: none;
  border: none;
  color: var(--pm-muted, #777b75);
  cursor: pointer;
}

.pm-admin-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-icon {
  color: var(--pm-muted, #777b75);
}

.pm-admin-toolbar button {
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--pm-border, #e4ded4);
  border-radius: 999px;
  background: var(--pm-surface, #fffdf9);
  color: var(--pm-muted, #777b75);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pm-admin-toolbar button:hover {
  color: var(--pm-ink, #303735);
  border-color: var(--pm-accent, #123f39);
}

.pm-admin-toolbar button.active {
  background: var(--pm-accent-dark, #657260);
  border-color: var(--pm-accent-dark, #657260);
  color: #ffffff;
}

/* Claims List */
.pm-admin-list {
  display: grid;
  gap: 16px;
}

.pm-admin-empty {
  min-height: 260px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  border: 1px dashed var(--pm-border, #e4ded4);
  border-radius: var(--pm-radius-md, 15px);
  background: var(--pm-surface, #fffdf9);
  color: var(--pm-muted, #777b75);
  text-align: center;
  padding: 40px;
}

.pm-admin-empty strong {
  color: var(--pm-ink, #303735);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
}

.pm-admin-empty span {
  max-width: 320px;
  font-size: 13px;
  line-height: 1.5;
}

.seed-btn {
  margin-top: 10px;
  padding: 8px 16px;
  border: 1px solid var(--pm-accent, #123f39);
  border-radius: var(--pm-radius-xs, 8px);
  background: var(--pm-accent-soft, rgba(18, 63, 57, 0.08));
  color: var(--pm-accent-dark, #657260);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.pm-admin-claim {
  padding: 24px;
  border: 1px solid var(--pm-border, #e4ded4);
  border-radius: var(--pm-radius-md, 15px);
  background: var(--pm-surface, #fffdf9);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.pm-admin-claim-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.pm-admin-claim-head small {
  color: var(--pm-muted, #777b75);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.pm-admin-claim h2 {
  margin: 4px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  color: var(--pm-ink, #303735);
}

.pm-admin-status {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.pm-admin-status.pending {
  background: var(--pm-taupe-soft, #eee9e1);
  color: var(--pm-taupe, #a69e90);
  border: 1px solid var(--pm-border, #e4ded4);
}

.pm-admin-status.code_issued {
  background: var(--pm-accent-soft, rgba(18, 63, 57, 0.08));
  color: var(--pm-accent-dark, #657260);
  border: 1px solid var(--pm-border, #e4ded4);
}

.pm-admin-status.active_trial,
.pm-admin-status.approved {
  background: var(--pm-success-soft, rgba(18, 63, 57, 0.08));
  color: var(--pm-success, #123f39);
  border: 1px solid var(--pm-border, #e4ded4);
}

.pm-admin-status.rejected,
.pm-admin-status.revoked {
  background: var(--pm-busy-soft, #ecd5d1);
  color: var(--pm-busy, #bd7d76);
  border: 1px solid var(--pm-border, #e4ded4);
}

.pm-admin-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.pm-admin-details > div {
  padding: 14px;
  border: 1px solid var(--pm-border, #e4ded4);
  border-radius: var(--pm-radius-xs, 8px);
  background: var(--pm-bg-soft, #faf8f4);
}

.pm-admin-details small {
  color: var(--pm-muted, #777b75);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.pm-admin-details strong {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--pm-ink, #303735);
}

.pm-admin-details span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--pm-muted, #777b75);
}

.pm-admin-note {
  margin-top: 14px;
  padding: 12px 16px;
  border-left: 3px solid var(--pm-accent-dark, #657260);
  background: var(--pm-bg-soft, #faf8f4);
  border-radius: 0 8px 8px 0;
}

.pm-admin-note small {
  color: var(--pm-muted, #777b75);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.pm-admin-note p {
  margin: 4px 0 0;
  color: var(--pm-ink, #303735);
  font-size: 12px;
  line-height: 1.5;
}

.pm-admin-rejection {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: var(--pm-radius-xs, 8px);
  background: var(--pm-busy-soft, #ecd5d1);
  color: var(--pm-busy, #bd7d76);
  font-size: 12px;
}

/* Code Banner */
.pm-admin-code {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding: 16px 20px;
  border: 1px solid var(--pm-border, #e4ded4);
  border-radius: var(--pm-radius-sm, 11px);
  background: var(--pm-accent-soft, rgba(18, 63, 57, 0.08));
  flex-wrap: wrap;
}

.code-info small {
  color: var(--pm-accent-dark, #657260);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.code-info strong {
  display: block;
  margin-top: 4px;
  font-family: ui-monospace, monospace;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--pm-ink, #303735);
}

.code-meta {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--pm-muted, #777b75);
}

.pm-admin-code-actions {
  display: flex;
  gap: 8px;
}

.pm-admin-code-actions button,
.pm-admin-code-actions .test-link {
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--pm-border, #e4ded4);
  border-radius: var(--pm-radius-xs, 8px);
  background: var(--pm-surface, #fffdf9);
  color: var(--pm-ink, #303735);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pm-admin-code-actions button:hover,
.pm-admin-code-actions .test-link:hover {
  background: var(--pm-accent-dark, #657260);
  color: #ffffff;
  border-color: var(--pm-accent-dark, #657260);
}

/* Actions Footer */
.pm-admin-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.approve-btn {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  border: none;
  border-radius: var(--pm-radius-xs, 8px);
  background: var(--pm-accent-dark, #657260);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.approve-btn:hover {
  background: var(--pm-ink, #303735);
}

.reject-btn,
.revoke-btn {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid var(--pm-border, #e4ded4);
  border-radius: var(--pm-radius-xs, 8px);
  background: var(--pm-surface, #fffdf9);
  color: var(--pm-busy, #bd7d76);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.reject-btn:hover,
.revoke-btn:hover {
  background: var(--pm-busy-soft, #ecd5d1);
}

.setup-link-btn {
  height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  border: 1px solid var(--pm-border, #e4ded4);
  border-radius: var(--pm-radius-xs, 8px);
  background: var(--pm-surface, #fffdf9);
  color: var(--pm-ink, #303735);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

/* Salons Grid (Tab 2) */
.salons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  max-height: calc(100vh - 240px);
  overflow-y: auto;
  padding-right: 6px;
  padding-bottom: 24px;
}

.salons-grid::-webkit-scrollbar {
  width: 6px;
}

.salons-grid::-webkit-scrollbar-track {
  background: var(--pm-bg-soft, #faf8f4);
  border-radius: 4px;
}

.salons-grid::-webkit-scrollbar-thumb {
  background: var(--pm-border, #e4ded4);
  border-radius: 4px;
}

.salons-grid::-webkit-scrollbar-thumb:hover {
  background: var(--pm-accent, #123f39);
}

.salon-admin-card {
  padding: 20px;
  border: 1px solid var(--pm-border, #e4ded4);
  border-radius: var(--pm-radius-sm, 11px);
  background: var(--pm-surface, #fffdf9);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.salon-admin-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.salon-admin-card-head small {
  color: var(--pm-accent-dark, #657260);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.salon-admin-card-head h3 {
  margin: 3px 0 2px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  color: var(--pm-ink, #303735);
}

.salon-city {
  font-size: 11px;
  color: var(--pm-muted, #777b75);
}

.badge-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--pm-success-soft, rgba(18, 63, 57, 0.08));
  color: var(--pm-success, #123f39);
  font-size: 9px;
  font-weight: 700;
}

.badge-unverified {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--pm-bg-soft, #faf8f4);
  color: var(--pm-muted, #777b75);
  font-size: 9px;
  font-weight: 700;
}

.salon-address {
  margin: 12px 0 16px;
  font-size: 11px;
  color: var(--pm-muted, #777b75);
  line-height: 1.4;
}

.salon-card-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.action-pill {
  height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  border: 1px solid var(--pm-border, #e4ded4);
  border-radius: var(--pm-radius-xs, 8px);
  background: var(--pm-bg-soft, #faf8f4);
  color: var(--pm-ink, #303735);
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.action-pill:hover {
  background: var(--pm-accent-dark, #657260);
  color: #ffffff;
  border-color: var(--pm-accent-dark, #657260);
}

.code-pill {
  border-color: var(--pm-accent, #123f39);
  color: var(--pm-accent-dark, #657260);
  background: var(--pm-accent-soft, rgba(18, 63, 57, 0.08));
}

/* Instant Code Form (Tab 3) */
.instant-code-form {
  max-width: 680px;
  background: var(--pm-surface, #fffdf9);
  border: 1px solid var(--pm-border, #e4ded4);
  border-radius: var(--pm-radius-md, 15px);
  padding: 32px;
  display: grid;
  gap: 18px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-group {
  display: grid;
  gap: 6px;
}

.form-group label {
  font-size: 11px;
  font-weight: 700;
  color: var(--pm-ink, #303735);
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 10px 14px;
  border: 1px solid var(--pm-border, #e4ded4);
  border-radius: var(--pm-radius-xs, 8px);
  background: var(--pm-bg-soft, #faf8f4);
  font-size: 13px;
  color: var(--pm-ink, #303735);
  outline: none;
  font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--pm-accent-dark, #657260);
  background: var(--pm-surface, #fffdf9);
}

.submit-code-btn {
  height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 24px;
  border: none;
  border-radius: var(--pm-radius-xs, 8px);
  background: var(--pm-accent-dark, #657260);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.submit-code-btn:hover {
  background: var(--pm-ink, #303735);
}

/* System Cards (Tab 4) */
.system-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.system-card {
  padding: 28px 24px;
  border: 1px solid var(--pm-border, #e4ded4);
  border-radius: var(--pm-radius-md, 15px);
  background: var(--pm-surface, #fffdf9);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.system-card svg {
  color: var(--pm-accent-dark, #657260);
}

.system-card h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  color: var(--pm-ink, #303735);
}

.system-card p {
  margin: 0;
  font-size: 12px;
  color: var(--pm-muted, #777b75);
  line-height: 1.5;
  flex: 1;
}

.system-btn {
  margin-top: 8px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid var(--pm-border, #e4ded4);
  border-radius: var(--pm-radius-xs, 8px);
  background: var(--pm-bg-soft, #faf8f4);
  color: var(--pm-ink, #303735);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.system-btn:hover {
  background: var(--pm-accent-dark, #657260);
  color: #ffffff;
  border-color: var(--pm-accent-dark, #657260);
}

.upload-btn {
  cursor: pointer;
}

/* Modals */
.pm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(48, 55, 53, 0.45);
  backdrop-filter: blur(4px);
  display: grid;
  place-content: center;
  z-index: 1000;
  padding: 20px;
}

.pm-modal-dialog {
  width: min(520px, calc(100vw - 40px));
  background: var(--pm-surface, #fffdf9);
  border: 1px solid var(--pm-border, #e4ded4);
  border-radius: var(--pm-radius-lg, 20px);
  padding: 28px;
  box-shadow: var(--pm-shadow-premium, 0 18px 48px rgba(54, 57, 52, 0.085));
  animation: scaleUp 0.15s ease;
}

.pm-modal-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.modal-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--pm-radius-sm, 11px);
  display: grid;
  place-content: center;
}

.modal-icon.approve {
  background: var(--pm-accent-soft, rgba(18, 63, 57, 0.08));
  color: var(--pm-accent-dark, #657260);
}

.modal-icon.reject,
.modal-icon.revoke {
  background: var(--pm-busy-soft, #ecd5d1);
  color: var(--pm-busy, #bd7d76);
}

.pm-modal-header small {
  color: var(--pm-muted, #777b75);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.pm-modal-header h3 {
  margin: 2px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  color: var(--pm-ink, #303735);
}

.close-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--pm-muted, #777b75);
  cursor: pointer;
}

.pm-modal-body p {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--pm-ink, #303735);
  line-height: 1.5;
}

.trial-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.trial-card {
  padding: 14px 10px;
  border: 1px solid var(--pm-border, #e4ded4);
  border-radius: var(--pm-radius-xs, 8px);
  background: var(--pm-bg-soft, #faf8f4);
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.trial-card strong {
  display: block;
  font-size: 13px;
  color: var(--pm-ink, #303735);
}

.trial-card span {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  color: var(--pm-muted, #777b75);
}

.trial-card.active {
  border-color: var(--pm-accent-dark, #657260);
  background: var(--pm-accent-soft, rgba(18, 63, 57, 0.08));
}

.trial-card.active strong {
  color: var(--pm-accent-dark, #657260);
}

.modal-info-box {
  padding: 12px 14px;
  border-radius: var(--pm-radius-xs, 8px);
  background: var(--pm-bg-soft, #faf8f4);
  font-size: 11px;
  color: var(--pm-muted, #777b75);
  display: grid;
  gap: 4px;
}

.modal-info-box code {
  font-weight: 700;
  color: var(--pm-accent-dark, #657260);
}

.preset-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.chip {
  padding: 6px 10px;
  border: 1px solid var(--pm-border, #e4ded4);
  border-radius: 999px;
  background: var(--pm-bg-soft, #faf8f4);
  font-size: 11px;
  color: var(--pm-muted, #777b75);
  cursor: pointer;
}

.chip.active {
  border-color: var(--pm-busy, #bd7d76);
  background: var(--pm-busy-soft, #ecd5d1);
  color: var(--pm-busy, #bd7d76);
  font-weight: 600;
}

.modal-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--pm-border, #e4ded4);
  border-radius: var(--pm-radius-xs, 8px);
  background: var(--pm-bg-soft, #faf8f4);
  font-size: 13px;
  color: var(--pm-ink, #303735);
  box-sizing: border-box;
  font-family: inherit;
}

.modal-textarea:focus {
  border-color: var(--pm-accent-dark, #657260);
  background: var(--pm-surface, #fffdf9);
}

.pm-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}

.btn-cancel {
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--pm-border, #e4ded4);
  border-radius: var(--pm-radius-xs, 8px);
  background: var(--pm-surface, #fffdf9);
  color: var(--pm-muted, #777b75);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.btn-confirm-approve {
  height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 20px;
  border: none;
  border-radius: var(--pm-radius-xs, 8px);
  background: var(--pm-accent-dark, #657260);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.btn-confirm-reject,
.btn-confirm-revoke {
  height: 38px;
  padding: 0 18px;
  border: none;
  border-radius: var(--pm-radius-xs, 8px);
  background: var(--pm-busy, #bd7d76);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

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

@keyframes scaleUp {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

/* =========================================================
   MOBILE RESPONSIVE ENGINE FOR SUPER ADMIN COCKPIT
   ========================================================= */
@media (max-width: 768px) {
  .pm-admin-header {
    height: auto;
    min-height: 52px;
    padding: 10px 14px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .pm-admin-header > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .pm-admin-title strong {
    font-size: 14px;
  }

  .pm-admin-header > div:last-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--pm-border, #e4ded4);
  }

  .pm-admin-tabs-nav {
    padding: 0 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .pm-admin-tabs-inner {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    padding: 6px 0;
  }

  .pm-admin-tab-btn {
    flex-shrink: 0;
    padding: 8px 12px;
    font-size: 12px;
    border-radius: 8px;
    background: #f4efe6;
    border-bottom: none;
    white-space: nowrap;
  }

  .pm-admin-tab-btn.active {
    background: #123f39;
    color: #ffffff;
    font-weight: 700;
  }

  .pm-admin-content {
    padding: 16px 12px 60px;
  }

  .pm-admin-head h1 {
    font-size: 24px;
    line-height: 1.15;
  }

  .pm-admin-stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .pm-stat-card {
    padding: 10px 12px !important;
  }

  .pm-stat-card strong {
    font-size: 20px !important;
  }

  .pm-admin-card {
    padding: 14px 12px;
    border-radius: 12px;
  }

  .claim-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .btn-approve,
  .btn-reject {
    width: 100%;
    height: 42px;
    justify-content: center;
  }

  .city-filter-wrapper {
    flex-direction: column;
    align-items: stretch;
  }

  .city-filter-wrapper select {
    width: 100%;
  }
}


/* ============================================================
   SUPER ADMIN MOBILE POLISH (<=768px)
   ============================================================ */
@media (max-width: 768px) {
  .pm-admin-header {
    padding: 10px 14px;
    min-height: 56px;
    height: auto;
    gap: 10px;
  }

  .pm-admin-brand-group {
    width: 100%;
    justify-content: space-between;
  }

  .pm-admin-header-actions {
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
  }

  .pm-admin-tabs-nav {
    padding: 0 8px;
  }

  .pm-admin-main {
    padding: 16px 12px 60px;
  }

  .pm-admin-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .pm-admin-heading h1 {
    font-size: 22px;
  }

  .pm-admin-details {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .pm-admin-actions {
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }

  .approve-btn,
  .reject-btn,
  .revoke-btn,
  .setup-link-btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    font-size: 13px;
    box-sizing: border-box;
  }

  .salons-grid {
    grid-template-columns: 1fr !important;
    max-height: none !important;
  }

  .salon-card-actions {
    width: 100%;
  }

  .action-pill {
    flex: 1 1 calc(50% - 6px);
    justify-content: center;
    min-height: 36px;
  }

  .pm-admin-code {
    flex-direction: column;
    align-items: flex-start;
  }

  .pm-admin-code-actions {
    width: 100%;
    flex-direction: column;
  }

  .pm-admin-code-actions button,
  .pm-admin-code-actions .test-link {
    width: 100%;
    min-height: 40px;
    justify-content: center;
  }
}


@media (max-width: 900px) {
  .pm-admin-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .pm-admin-header-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .pm-admin-who {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pm-admin-tabs-nav {
    overflow-x: auto;
  }
  .pm-admin-tabs-inner {
    flex-wrap: nowrap;
    width: max-content;
    min-width: 100%;
  }
  .pm-admin.is-architect .pm-admin-main,
  .pm-admin.is-architect .pm-admin-content {
    padding-left: 10px;
    padding-right: 10px;
  }
}
.pm-store-page {
  min-height: calc(100dvh - 28px);

  box-sizing: border-box;

  padding-bottom: 34px;

  color: #303735;

  background:
    radial-gradient(
      circle at 60% 5%,
      rgba(232, 237, 229, .56),
      transparent 30%
    ),
    #f7f4ec;
}


.pm-store-header {
  min-height: 58px;

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

  padding: 0 32px;

  border-bottom:
    1px solid #e4ded4;

  background:
    rgba(255, 253, 249, .94);
}


.pm-store-logo {
  color: inherit;
  text-decoration: none;
}


.pm-store-header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}


.pm-store-back {
  color: #5f6662;

  text-decoration: none;

  font-size: 12px;
}


.pm-store-cart-pill {
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 7px 10px;

  border:
    1px solid #ded8ce;

  border-radius: 999px;

  background: #fffdf9;

  font-size: 11px;
}


.pm-store-cart-pill strong {
  width: 21px;
  height: 21px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: #fff;

  background: #657260;
}


.pm-store-hero {
  max-width: 1240px;

  margin: 0 auto;

  padding: 34px 28px 22px;

  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
}


.pm-store-eyebrow {
  color: #123f39;

  font-size: 11px;
  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: .12em;
}


.pm-store-hero h1 {
  margin: 6px 0 7px;

  font-family: Georgia, serif;

  font-size:
    clamp(
      34px,
      5vw,
      56px
    );

  line-height: .95;
}


.pm-store-hero p {
  max-width: 520px;

  margin: 0;

  color: #6e746f;

  font-size: 13px;
  line-height: 1.5;
}


.pm-store-note {
  display: flex;
  align-items: center;
  gap: 10px;

  min-width: 210px;

  padding: 12px 14px;

  border:
    1px solid rgba(
      123,
      136,
      117,
      .22
    );

  border-radius: 13px;

  background:
    rgba(
      255,
      253,
      249,
      .76
    );
}


.pm-store-note > span {
  color: #123f39;

  font-size: 20px;
}


.pm-store-note div {
  display: flex;
  flex-direction: column;
}


.pm-store-note strong {
  font-size: 11px;
}


.pm-store-note small {
  margin-top: 2px;

  color: #777b75;

  font-size: 9px;
}


.pm-store-layout {
  max-width: 1240px;

  margin: 0 auto;

  padding: 0 28px 34px;

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

  gap: 22px;

  align-items: start;
}


.pm-store-products {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 14px;
}


.pm-store-product {
  min-width: 0;

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

  min-height: 190px;

  overflow: hidden;

  border:
    1px solid #e4ded4;

  border-radius: 16px;

  background: #fffdf9;
}


.pm-store-product-image {
  position: relative;

  min-height: 190px;

  overflow: hidden;

  background: rgba(18, 63, 57, 0.08);
}


.pm-store-product-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}


.pm-store-product-image > span {
  position: absolute;

  left: 9px;
  bottom: 9px;

  padding: 5px 7px;

  border-radius: 999px;

  color: #55604f;

  background:
    rgba(
      255,
      253,
      249,
      .92
    );

  font-size: 8px;
  font-weight: 700;
}


.pm-store-product-copy {
  min-width: 0;

  display: flex;
  flex-direction: column;

  padding: 16px;
}


.pm-store-product-copy > small {
  color: #8b8c86;

  font-size: 9px;
}


.pm-store-product-copy h2 {
  margin: 5px 0 5px;

  font-family: Georgia, serif;

  font-size: 18px;
}


.pm-store-product-copy p {
  margin: 0;

  color: #747872;

  font-size: 10px;
  line-height: 1.45;
}


.pm-store-product-bottom {
  margin-top: auto;

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

  gap: 10px;
}


.pm-store-product-bottom > strong {
  font-size: 13px;
}


.pm-store-product-bottom > button {
  min-height: 31px;

  padding: 0 11px;

  border: 0;
  border-radius: 9px;

  color: #fff;

  background: #657260;

  cursor: pointer;

  font-size: 9px;
  font-weight: 700;
}


.pm-store-qty {
  display: grid;
  grid-template-columns:
    29px
    30px
    29px;

  align-items: center;

  overflow: hidden;

  border:
    1px solid #dcd6cc;

  border-radius: 9px;

  background: #faf8f4;
}


.pm-store-qty button {
  width: 29px;
  height: 29px;

  border: 0;

  color: #4f5954;

  background: transparent;

  cursor: pointer;

  font-size: 15px;
}


.pm-store-qty span {
  text-align: center;

  font-size: 10px;
  font-weight: 700;
}


.pm-store-cart {
  position: sticky;
  top: 18px;

  min-height: 390px;

  padding: 18px;

  box-sizing: border-box;

  display: flex;
  flex-direction: column;

  border:
    1px solid rgba(
      123,
      136,
      117,
      .22
    );

  border-radius: 17px;

  background:
    linear-gradient(
      145deg,
      rgba(
        232,
        237,
        229,
        .78
      ),
      rgba(
        255,
        253,
        249,
        .98
      ) 64%
    );
}


.pm-store-cart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding-bottom: 13px;

  border-bottom:
    1px solid rgba(
      166,
      158,
      144,
      .2
    );
}


.pm-store-cart-head span {
  color: #123f39;

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: .1em;
}


.pm-store-cart-head h2 {
  margin: 2px 0 0;

  font-family: Georgia, serif;

  font-size: 22px;
}


.pm-store-cart-head > strong {
  width: 28px;
  height: 28px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: #fff;

  background: #657260;

  font-size: 11px;
}


.pm-store-cart-empty {
  flex: 1;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 32px 4px;

  text-align: center;
}


.pm-store-cart-empty > span {
  font-size: 25px;

  opacity: .7;
}


.pm-store-cart-empty strong {
  margin-top: 8px;

  font-family: Georgia, serif;

  font-size: 15px;
}


.pm-store-cart-empty p {
  max-width: 220px;

  margin:
    6px auto 0;

  color: #777b75;

  font-size: 10px;
  line-height: 1.5;
}


.pm-store-cart-lines {
  display: grid;
  gap: 8px;

  margin: 14px 0;
}


.pm-store-cart-line {
  display: grid;
  grid-template-columns:
    38px
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 8px;
}


.pm-store-cart-line img {
  width: 38px;
  height: 42px;

  object-fit: cover;

  border-radius: 7px;
}


.pm-store-cart-line div {
  min-width: 0;

  display: flex;
  flex-direction: column;
}


.pm-store-cart-line div strong {
  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 9px;
}


.pm-store-cart-line small {
  margin-top: 2px;

  color: #777b75;

  font-size: 8px;
}


.pm-store-cart-line > strong {
  font-size: 9px;
}


.pm-store-total {
  margin-top: auto;

  padding: 13px 0;

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

  border-top:
    1px solid rgba(
      166,
      158,
      144,
      .22
    );
}


.pm-store-total span {
  color: #6c716d;

  font-size: 10px;
}


.pm-store-total strong {
  font-size: 16px;
}


.pm-store-whatsapp {
  width: 100%;
  min-height: 52px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  border: 0;
  border-radius: 12px;

  color: #fff;

  background: #657260;

  cursor: pointer;
}


.pm-store-whatsapp:disabled {
  cursor: default;

  opacity: .42;
}


.pm-store-wa-icon {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(
      255,
      255,
      255,
      .45
    );

  border-radius: 50%;
}


.pm-store-whatsapp > span:last-child {
  display: flex;
  flex-direction: column;

  text-align: left;
}


.pm-store-whatsapp strong {
  font-size: 10px;
}


.pm-store-whatsapp small {
  margin-top: 2px;

  opacity: .78;

  font-size: 8px;
}


.pm-store-cart-help {
  margin: 9px 0 0;

  color: #858882;

  text-align: center;

  font-size: 8px;
  line-height: 1.4;
}


@media (max-width: 980px) {
  .pm-store-layout {
    grid-template-columns: 1fr;
  }

  .pm-store-cart {
    position: static;
  }
}


@media (max-width: 700px) {
  .pm-store-header {
    padding: 0 16px;
  }

  .pm-store-back {
    display: none;
  }

  .pm-store-hero {
    padding:
      24px
      16px
      18px;

    align-items: flex-start;

    flex-direction: column;
  }

  .pm-store-layout {
    padding:
      0
      16px
      24px;
  }

  .pm-store-products {
    grid-template-columns: 1fr;
  }

  .pm-store-product {
    grid-template-columns:
      118px
      minmax(0, 1fr);
  }
}


/* ==================================================
   PICKME SHOP — QUANTITY CONTROL FINAL
   ================================================== */

.pm-store-product-bottom {
  overflow: visible;
}

.pm-store-qty {
  flex: 0 0 102px;

  width: 102px;
  height: 34px;

  display: grid;
  grid-template-columns:
    34px
    34px
    34px;

  align-items: stretch;

  overflow: hidden;

  box-sizing: border-box;

  border:
    1px solid #d7d1c7;

  border-radius: 9px;

  background: #fffdf9;
}


.pm-store-qty button {
  all: unset;

  width: 34px;
  height: 32px;

  box-sizing: border-box;

  display: grid;
  place-items: center;

  cursor: pointer;

  color: #303735 !important;

  background:
    #f3f0ea !important;

  opacity: 1 !important;
  visibility: visible !important;

  font-family:
    Arial,
    sans-serif;

  font-size: 17px !important;
  font-weight: 700 !important;

  line-height: 1 !important;

  text-align: center;
}


.pm-store-qty button:first-child {
  border-right:
    1px solid #ded8ce;
}


.pm-store-qty button:last-child {
  border-left:
    1px solid #ded8ce;
}


.pm-store-qty button:hover {
  color: #fff !important;

  background:
    #123f39 !important;
}


.pm-store-qty span {
  width: 34px;
  height: 32px;

  display: grid;
  place-items: center;

  box-sizing: border-box;

  color: #303735 !important;

  background: #fffdf9;

  font-size: 11px !important;
  font-weight: 700 !important;

  opacity: 1 !important;
  visibility: visible !important;
}


/* Real photography */
.pm-store-product-image {
  background: #ebe8e1;
}

.pm-store-product-image img {
  width: 100%;
  height: 100%;

  object-fit: cover !important;
  object-position: center !important;
}


/* Salon page miniature shop */
.pm-shop-product img {
  object-fit: cover !important;
  object-position: center !important;
}

.pm-gate {
  min-height: 100dvh;
  height: auto;
  overflow: auto;
  background:
    radial-gradient(1200px 520px at 82% -10%, rgba(75, 95, 255, 0.16), transparent 55%),
    radial-gradient(800px 420px at -8% 110%, rgba(244, 104, 112, 0.1), transparent 50%),
    #f7f4ec;
  color: #101116;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.pm-gate.is-grant {
  height: auto;
  min-height: 100dvh;
  overflow: auto;
}

.pm-gate.is-grant .pm-gate-stage {
  min-height: 0;
  grid-template-columns: 1fr;
}

.pm-gate.is-grant .pm-gate-stage h1 {
  font-size: 36px;
}

html:has(.pm-gate),
body:has(.pm-gate) {
  overflow: auto !important;
  height: auto;
}

.pm-gate-grant-letter {
  margin: 12px 0 0;
  padding: 14px 16px;
  text-align: left;
  white-space: pre-wrap;
  font-family: Inter, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: #101116;
  background: #f7f4ec;
  border-radius: 12px;
  border: 1px solid #d9dbe3;
}

.pm-gate-inner {
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding: 18px 22px 24px;
  box-sizing: border-box;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pm-gate-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.pm-gate-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pm-gate-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: #101116;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.pm-gate-top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pm-gate-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
  gap: 28px 40px;
  align-items: center;
  min-height: min(62vh, 560px);
}

.pm-gate-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(75, 95, 255, 0.12);
  color: #4b5fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  margin-bottom: 14px;
}

.pm-gate-kicker i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4b5fff;
  box-shadow: 0 0 0 4px rgba(75, 95, 255, 0.18);
  animation: pmGatePulse 1.6s ease-in-out infinite;
}

.pm-gate-stage h1 {
  margin: 0 0 10px;
  font-size: clamp(44px, 7vw, 72px);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.92;
  color: #101116;
}

.pm-gate-stage-copy > p {
  margin: 0 0 12px;
  max-width: 460px;
  font-size: 16px;
  line-height: 1.45;
  color: #747b8b;
}

.pm-gate-stage-copy > p.pm-gate-lead {
  margin: 0 0 8px;
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 650;
  line-height: 1.25;
  color: #101116;
}

.pm-gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 10px;
}

.pm-gate-primary,
.pm-gate-secondary {
  border-radius: 999px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pm-gate-primary {
  background: #4b5fff;
  color: #ffffff;
  border: 1px solid #4b5fff;
  box-shadow: 0 10px 24px rgba(75, 95, 255, 0.28);
}

.pm-gate-primary:hover {
  background: #3a4ae8;
}

.pm-gate-secondary {
  background: rgba(255, 253, 249, 0.85);
  color: #101116;
  border: 1px solid #d9dbe3;
}

.pm-gate-secondary:hover {
  border-color: #4b5fff;
}

.pm-gate-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: #747b8b;
  max-width: 460px;
}

.pm-gate-live {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 340px;
  overflow: visible;
  padding: 28px 56px;
}

.pm-gate-radar {
  position: relative;
  width: min(100%, 380px);
  aspect-ratio: 1;
  overflow: visible;
}

.pm-gate-radar-glow {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(75, 95, 255, 0.35) 0%, rgba(16, 17, 22, 0.08) 62%, transparent 70%);
  animation: pmGateGlow 3.2s ease-in-out infinite;
  pointer-events: none;
}

.pm-gate-radar-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 18px 40px rgba(16, 17, 22, 0.18));
}

.pm-gate-radar-svg circle:first-of-type {
  fill: #101116;
}

.pm-gate-radar-hub {
  position: absolute;
  inset: 32%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #1c1e2a, #101116 72%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 30px rgba(16, 17, 22, 0.28);
  display: grid;
  place-items: center;
  color: #ffffff;
}

.pm-gate-radar-hub strong {
  position: relative;
  z-index: 1;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.22em;
}

.pm-gate-radar-pulse {
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  background: transparent;
  border: 2px solid rgba(244, 104, 112, 0.45);
  animation: pmGateRipple 2.2s ease-out infinite;
}

.pm-gate-radar-spin {
  transform-origin: 200px 200px;
  animation: pmGateSpin 14s linear infinite;
}

.pm-gate-radar-sweep {
  transform-origin: 200px 200px;
  animation: pmGateSpin 3.8s linear infinite;
}

.pm-gate-blip {
  fill: #4b5fff;
  animation: pmGateBlip 1.8s ease-in-out infinite;
}

.pm-gate-blip.is-b {
  fill: #f46870;
  animation-delay: 0.4s;
}

.pm-gate-blip.is-c {
  fill: #fffdf9;
  animation-delay: 0.9s;
}

.pm-gate-match {
  position: absolute;
  right: 2%;
  bottom: 10%;
  z-index: 2;
  padding: 4px 7px;
  border-radius: 999px;
  background: #4b5fff;
  color: #ffffff;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 16px rgba(75, 95, 255, 0.4);
  animation: pmGateMatchPulse 2.2s ease-in-out infinite;
}

.pm-gate-ping {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  border-radius: 999px;
  background: #fffdf9;
  border: 1px solid #d9dbe3;
  box-shadow: 0 10px 24px rgba(16, 17, 22, 0.12);
  white-space: nowrap;
  pointer-events: none;
  animation: pmGatePing 7.5s ease-in-out infinite;
}

.pm-gate-ping b {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #4b5fff;
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}

.pm-gate-ping strong {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: #101116;
  line-height: 1.15;
}

.pm-gate-ping span {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #747b8b;
  letter-spacing: 0.02em;
}

.pm-gate-ping.is-1 {
  top: 6%;
  right: -12%;
  animation-delay: 0s;
}

.pm-gate-ping.is-2 {
  top: 44%;
  left: -22%;
  animation-delay: 2.5s;
}

.pm-gate-ping.is-3 {
  bottom: 8%;
  left: 4%;
  animation-delay: 5s;
}

.pm-gate-ticker {
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(16, 17, 22, 0.08);
  background: rgba(16, 17, 22, 0.92);
  color: #fffdf9;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.pm-gate-ticker-track {
  display: flex;
  gap: 28px;
  width: max-content;
  padding: 10px 0;
  animation: pmGateTicker 22s linear infinite;
}

.pm-gate-ticker-track span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: #d9dbe3;
}

.pm-gate-ticker-track span::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: #4b5fff;
  box-shadow: 0 0 10px #4b5fff;
  vertical-align: middle;
}

.pm-gate-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px 18px;
  font-size: 12px;
  padding-top: 4px;
}

.pm-gate-legal {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pm-gate-foot a {
  color: #747b8b;
  text-decoration: none;
  font-weight: 600;
}

.pm-gate-foot a:hover {
  color: #4b5fff;
}

.pm-gate-bald {
  margin: 0;
  color: #747b8b;
  font-size: 12px;
  line-height: 1.4;
}

.pm-gate-bald strong {
  margin-right: 6px;
  letter-spacing: 0.1em;
  font-size: 10px;
  font-weight: 800;
  color: #4b5fff;
}

.pm-gate-msg-open {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #d9dbe3;
  background: #fffdf9;
  color: #101116;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.pm-gate-msg-open:hover {
  border-color: #4b5fff;
  color: #4b5fff;
}

.pm-gate-modal-bg {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(16, 17, 22, 0.55);
  display: grid;
  place-items: center;
  padding: 20px;
}

.pm-gate-modal {
  max-width: 440px;
  width: 100%;
  background: #fffdf9;
  border: 1px solid #d9dbe3;
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: 0 20px 50px rgba(16, 17, 22, 0.22);
  text-align: center;
  position: relative;
}

.pm-gate-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #f7f4ec;
  color: #747b8b;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.pm-gate-modal-lock {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(75, 95, 255, 0.12);
  color: #4b5fff;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
}

.pm-gate-modal h2 {
  margin: 0 0 8px;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.03em;
  color: #101116;
}

.pm-gate-modal p {
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.55;
  color: #747b8b;
}

.pm-gate-textarea {
  width: 100%;
  min-height: 110px;
  border-radius: 12px;
  border: 1px solid #d9dbe3;
  background: #f7f4ec;
  color: #101116;
  font-size: 15px;
  line-height: 1.45;
  padding: 12px 14px;
  resize: vertical;
  box-sizing: border-box;
  margin-bottom: 12px;
}

.pm-gate-wait {
  color: #4b5fff;
  font-weight: 700;
}

.pm-gate-modal .pm-gate-primary {
  width: 100%;
  justify-content: center;
}

.pm-gate-modal form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.pm-gate-modal input {
  height: 48px;
  border-radius: 12px;
  background: #f7f4ec;
  border: 1px solid #d9dbe3;
  color: #101116;
  font-size: 15px;
  padding: 0 16px;
  outline: none;
  box-sizing: border-box;
}

.pm-gate-modal input.pm-gate-input-err {
  border-color: #f46870;
}

.pm-gate-err {
  color: #c2414a;
  font-size: 13px;
  text-align: left;
  font-weight: 600;
}

.pm-gate-modal button[type="submit"] {
  height: 48px;
  border-radius: 999px;
  background: #4b5fff;
  color: #ffffff;
  border: 0;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.pm-gate-modal button[type="submit"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.pm-gate-load {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background: #f7f4ec;
}

.pm-gate-load-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

@keyframes pmGatePulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

@keyframes pmGateSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pmGateGlow {
  0%, 100% { opacity: 0.55; transform: scale(0.98); }
  50% { opacity: 1; transform: scale(1.04); }
}

@keyframes pmGateBlip {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

@keyframes pmGateRipple {
  0% { transform: scale(0.92); opacity: 0.7; }
  100% { transform: scale(1.18); opacity: 0; }
}

@keyframes pmGatePing {
  0%, 40% { opacity: 1; transform: scale(1) translateY(0); }
  52%, 100% { opacity: 0; transform: scale(0.92) translateY(8px); }
}

@keyframes pmGateTicker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .pm-gate-radar-spin,
  .pm-gate-radar-sweep,
  .pm-gate-match,
  .pm-gate-ticker-track,
  .pm-gate-kicker i,
  .pm-gate-radar-glow,
  .pm-gate-blip,
  .pm-gate-radar-pulse,
  .pm-gate-ping {
    animation: none !important;
  }

  .pm-gate-ping {
    opacity: 1;
    transform: none;
  }

  .pm-gate-match {
    animation: none !important;
  }
}

@media (max-width: 900px) {
  .pm-gate-stage {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 8px;
    text-align: center;
  }

  .pm-gate-stage-copy > p,
  .pm-gate-note {
    margin-left: auto;
    margin-right: auto;
  }

  .pm-gate-actions {
    justify-content: center;
  }

  .pm-gate-live {
    order: -1;
    min-height: 0;
    padding: 18px 12px 8px;
  }

  .pm-gate-radar {
    width: min(72vw, 300px);
  }

  .pm-gate-ping {
    padding: 5px 8px 5px 5px;
    gap: 6px;
  }

  .pm-gate-ping b {
    width: 22px;
    height: 22px;
    font-size: 10px;
  }

  .pm-gate-ping.is-1 {
    right: -6%;
    top: 2%;
  }

  .pm-gate-ping.is-2 {
    left: -10%;
  }

  .pm-gate-ping.is-3 {
    left: 0;
    bottom: 2%;
  }

  .pm-gate-foot {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .pm-gate-legal {
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .pm-gate-inner {
    padding: 12px 14px 18px;
    gap: 14px;
  }

  .pm-gate-stage h1 {
    font-size: 42px;
  }

  .pm-gate-radar {
    width: min(82vw, 300px);
  }

  .pm-gate-match {
    font-size: 7px;
    padding: 3px 6px;
    right: 0;
    bottom: 6%;
  }
}

/* Clean Beauty Design Layer */
/* Beauty overlay: steal Salon Page paper + Fraunces. Do not touch kiosk or .pm-pixel-page. */
.pm-gate {
  background:
    radial-gradient(900px 480px at 88% -8%, rgba(226, 161, 26, 0.12), transparent 55%),
    radial-gradient(700px 380px at -10% 108%, rgba(244, 104, 112, 0.08), transparent 52%),
    #f7f4ec !important;
  font-family: Inter, "Segoe UI", sans-serif;
}
.pm-gate::before {
  content: "";
  pointer-events: none;
  position: fixed;
  right: -40px;
  top: 18%;
  width: 280px;
  height: 280px;
  opacity: 0.07;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101116' stroke-width='1.4'><circle cx='6' cy='6' r='2.6'/><circle cx='6' cy='18' r='2.6'/><path d='M8.2 7.8 L20 20'/><path d='M8.2 16.2 L20 4'/></svg>") no-repeat center / contain;
}
.pm-catalog::before {
  content: "";
  pointer-events: none;
  position: fixed;
  left: -30px;
  bottom: 8%;
  width: 220px;
  height: 220px;
  opacity: 0.06;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101116' stroke-width='1.4'><path d='M5 3h3v18H5z'/><path d='M8 6h10l-2 2 2 2H8'/><path d='M8 14h10l-2 2 2 2H8'/></svg>") no-repeat center / contain;
  z-index: 0;
}
.pm-gate-stage h1,
.pm-gate-modal h2,
.pm-gate-lead {
  font-family: Fraunces, Georgia, serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
}
.pm-gate-kicker {
  background: rgba(226, 161, 26, 0.14) !important;
  color: #8a6410 !important;
}
.pm-gate-kicker i {
  background: #e2a11a !important;
  box-shadow: 0 0 0 4px rgba(226, 161, 26, 0.18) !important;
  animation: none !important;
}
.pm-gate-radar-glow {
  background: radial-gradient(circle, rgba(226, 161, 26, 0.18) 0%, rgba(247, 244, 236, 0.2) 62%, transparent 72%) !important;
}
.pm-gate-radar-hub {
  background: radial-gradient(circle at 50% 40%, #fffdf9, #f7f4ec 72%) !important;
  color: #101116 !important;
  box-shadow: inset 0 0 0 1px #d9dbe3, 0 12px 30px rgba(16, 17, 22, 0.08) !important;
}
.pm-gate-radar-hub strong {
  font-family: Fraunces, Georgia, serif !important;
  letter-spacing: 0.12em !important;
  font-weight: 600 !important;
}
.pm-gate-radar-svg circle:first-of-type {
  fill: #fffdf9 !important;
}
.pm-gate-radar-pulse {
  border-color: rgba(226, 161, 26, 0.35) !important;
}
.pm-gate-blip { fill: #e2a11a !important; }
.pm-gate-blip.is-b { fill: #f46870 !important; }
.pm-gate-blip.is-c { fill: #4b5fff !important; }
.pm-gate-ticker {
  background: #fffdf9 !important;
  color: #101116 !important;
  border-color: #d9dbe3 !important;
}
.pm-gate-ticker-track span { color: #454d49 !important; }
.pm-gate-ticker-track span::before {
  background: #e2a11a !important;
  box-shadow: none !important;
}
.pm-gate-primary,
.pm-gate-modal button[type="submit"] {
  box-shadow: 0 8px 18px rgba(75, 95, 255, 0.18) !important;
}
.pm-catalog-header {
  background: rgba(255, 253, 249, 0.96) !important;
}

.pm-login-page {
  min-height: 100vh;
  background: var(--pm-bg, #f7f4ec);
  color: var(--pm-ink, #303735);
  display: flex;
  flex-direction: column;
}

.pm-login-header {
  height: 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  border-bottom: 1px solid var(--pm-border, #e4ded4);
  background: var(--pm-surface, #fffdf9);
}

.pm-login-logo {
  display: flex;
  align-items: center;
}

.pm-login-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--pm-border, #e4ded4);
  border-radius: var(--pm-radius-xs, 8px);
  background: var(--pm-surface, #fffdf9);
  color: var(--pm-ink, #303735);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.15s ease;
}

.pm-login-back:hover {
  background: var(--pm-bg-soft, #faf8f4);
  border-color: var(--pm-accent, #123f39);
}

.pm-login-main {
  flex: 1;
  display: grid;
  place-content: center;
  padding: 40px 20px 80px;
}

.pm-login-card {
  width: min(440px, calc(100vw - 40px));
  background: var(--pm-surface, #fffdf9);
  border: 1px solid var(--pm-border, #e4ded4);
  border-radius: var(--pm-radius-lg, 20px);
  padding: 36px 32px;
  box-shadow: var(--pm-shadow-card, 0 12px 35px rgba(54, 57, 52, 0.055));
}

.pm-login-card-head {
  text-align: center;
  margin-bottom: 28px;
}

.pm-login-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--pm-accent-soft, rgba(18, 63, 57, 0.08));
  color: var(--pm-accent-dark, #657260);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.pm-login-card-head h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--pm-ink, #303735);
  letter-spacing: -0.02em;
}

.pm-login-card-head p {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--pm-muted, #777b75);
  line-height: 1.4;
}

.pm-login-form {
  display: grid;
  gap: 18px;
}

.pm-login-field {
  display: grid;
  gap: 6px;
}

.pm-login-field label {
  font-size: 11px;
  font-weight: 700;
  color: var(--pm-ink, #303735);
}

.pm-login-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.pm-login-icon {
  position: absolute;
  left: 14px;
  color: var(--pm-muted, #777b75);
  pointer-events: none;
}

.pm-login-input-wrap input {
  width: 100%;
  height: 44px;
  padding: 0 14px 0 40px;
  border: 1px solid var(--pm-border, #e4ded4);
  border-radius: var(--pm-radius-sm, 11px);
  background: var(--pm-bg-soft, #faf8f4);
  color: var(--pm-ink, #303735);
  font-size: 13px;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.pm-login-input-wrap input:focus {
  border-color: var(--pm-accent-dark, #657260);
  background: var(--pm-surface, #fffdf9);
}

.pm-login-submit-btn {
  height: 46px;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--pm-radius-sm, 11px);
  background: var(--pm-accent-dark, #657260);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.pm-login-submit-btn:hover {
  background: var(--pm-ink, #303735);
}

.pm-login-footer-links {
  margin-top: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--pm-border, #e4ded4);
  text-align: center;
  font-size: 12px;
  display: grid;
  gap: 4px;
}

.pm-login-footer-links span {
  color: var(--pm-muted, #777b75);
}

.pm-login-footer-links a {
  color: var(--pm-accent-dark, #657260);
  font-weight: 700;
  text-decoration: none;
}

.pm-login-footer-links a:hover {
  text-decoration: underline;
}

.pm-login-submitted {
  display: grid;
  gap: 16px;
  text-align: center;
  padding: 10px 0;
}

.pm-login-submitted p {
  margin: 0;
  font-size: 13px;
  color: var(--pm-ink, #303735);
  line-height: 1.5;
}

.pm-login-meta {
  font-size: 12px;
  color: var(--pm-muted, #777b75);
}

.pm-login-actions {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.pm-login-btn-primary,
.pm-login-btn-secondary {
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--pm-radius-sm, 11px);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}

.pm-login-btn-primary {
  background: var(--pm-accent-dark, #657260);
  color: #ffffff;
  border: none;
}

.pm-login-btn-secondary {
  background: var(--pm-bg-soft, #faf8f4);
  border: 1px solid var(--pm-border, #e4ded4);
  color: var(--pm-ink, #303735);
}

@media (max-width: 600px) {
  .pm-login-header {
    padding: 0 16px;
  }

  .pm-login-card {
    padding: 28px 20px;
  }
}
.pm-zuhause-bald-hero.has-list {
  min-height: 0;
}

.pm-zuhause-bald-hero.has-list .pm-radar-title {
  color: #101116;
  letter-spacing: -0.04em;
}

.pm-fav-explore {
  margin-top: 8px;
}

.pm-fav-remove {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #64748b;
  display: grid;
  place-content: center;
  cursor: pointer;
}

.pm-fav-remove:hover {
  color: #e11d48;
  border-color: #fecdd3;
}
/* =========================================================
   PICKME — SALON CONTROL PANEL (BLUEPRINT 1-TO-1)
   ========================================================= */

:root {
  --scp-primary: #123f39;
  --scp-bg: #f7f4ec;
  --scp-accent: #dceadf;
  --scp-card-bg: #ffffff;
  --scp-border: #e4ded4;
  --scp-text: #123f39;
  --scp-text-muted: #657260;
  --scp-green: #123f39;
  --scp-yellow: #f0b429;
  --scp-red: #e04b4b;
}

.pm-scp-page {
  min-height: 100vh;
  background-color: var(--scp-bg);
  color: var(--scp-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  padding-bottom: 40px;
}

.pm-scp-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
  box-sizing: border-box;
}

/* 1. HEADER */
.pm-scp-header {
  background: #ffffff;
  border-bottom: 1px solid var(--scp-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.pm-scp-header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pm-scp-brand-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pm-scp-panel-badge {
  background: #ede8df;
  color: var(--scp-text-muted);
  font-size: 0.725rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 6px;
}

.pm-scp-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pm-scp-header-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid var(--scp-border);
  color: var(--scp-text);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.825rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pm-scp-header-btn:hover {
  background: #fbf9f5;
  border-color: var(--scp-primary);
}

/* TITLE STRIP */
.pm-scp-title-strip {
  padding: 24px 0 16px;
}

.pm-scp-salon-title {
  font-size: 2rem;
  font-weight: 800;
  font-family: Georgia, serif;
  color: var(--scp-primary);
  margin: 0 0 4px;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
  word-break: break-word;
}

.pm-scp-salon-subtitle {
  font-size: 0.95rem;
  color: var(--scp-text-muted);
  font-weight: 500;
  overflow-wrap: break-word;
}

/* CARDS */
.pm-scp-card {
  background: var(--scp-card-bg);
  border: 1px solid var(--scp-border);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 2px 10px rgba(18, 63, 57, 0.03);
}

/* 2. TEAM STATUS BLOCK */
.pm-scp-team-card {
  margin-bottom: 24px;
}

.pm-scp-team-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 12px;
}

.pm-scp-section-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--scp-primary);
  margin: 0 0 2px;
}

.pm-scp-section-sub {
  font-size: 0.825rem;
  color: var(--scp-text-muted);
  margin: 0;
}

.pm-scp-auto-toggle-wrap {
  display: flex;
  align-items: center;
}

.pm-scp-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--scp-text-muted);
  cursor: pointer;
}

.pm-scp-toggle-label input {
  display: none;
}

.pm-scp-toggle-switch {
  width: 38px;
  height: 22px;
  background: #cbd5e1;
  border-radius: 999px;
  position: relative;
  transition: background 0.2s ease;
}

.pm-scp-toggle-switch::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  top: 3px;
  left: 3px;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.pm-scp-toggle-label input:checked + .pm-scp-toggle-switch {
  background: var(--scp-primary);
}

.pm-scp-toggle-label input:checked + .pm-scp-toggle-switch::after {
  transform: translateX(16px);
}

/* STAFF GRID (3 CARDS IN ROW) */
.pm-scp-staff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.pm-scp-staff-box {
  background: #fbf9f5;
  border: 1.5px solid var(--scp-border);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  transition: all 0.15s ease;
}

.pm-scp-staff-box.is-free {
  border-color: #a7f3d0;
}

.pm-scp-staff-box.is-pause {
  border-color: #fde68a;
}

.pm-scp-staff-box.is-busy {
  border-color: #fecaca;
}

.pm-scp-staff-top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pm-scp-staff-avatar-wrap {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--scp-border);
  background: #ede8df;
  flex-shrink: 0;
}

.pm-scp-staff-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pm-scp-staff-meta {
  flex: 1;
  min-width: 0;
}

.pm-scp-staff-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.pm-scp-staff-name {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--scp-primary);
  margin: 0;
}

.pm-scp-staff-role {
  font-size: 0.775rem;
  color: var(--scp-text-muted);
  font-weight: 600;
  margin: 2px 0 6px;
}

.pm-scp-big-status {
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.pm-scp-big-status.green {
  color: #059669;
}

.pm-scp-big-status.yellow {
  color: #d97706;
}

.pm-scp-big-status.red {
  color: #dc2626;
}

/* 3 TOUCH-FIRST BUTTONS */
.pm-scp-staff-btn-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.pm-scp-touch-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 4px;
  border-radius: 8px;
  border: 1px solid var(--scp-border);
  background: #ffffff;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 0.725rem;
}

.pm-scp-touch-btn .pm-scp-btn-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.1;
}

.pm-scp-touch-btn .pm-scp-btn-text strong {
  font-size: 0.725rem;
  font-weight: 800;
}

.pm-scp-touch-btn .pm-scp-btn-text span {
  font-size: 0.625rem;
  opacity: 0.85;
}

.pm-scp-touch-btn.frei.active {
  background: var(--scp-primary);
  color: #ffffff;
  border-color: var(--scp-primary);
}

.pm-scp-touch-btn.pause.active {
  background: var(--scp-yellow);
  color: #182419;
  border-color: #d97706;
}

.pm-scp-touch-btn.busy.active {
  background: var(--scp-red);
  color: #ffffff;
  border-color: #b91c1c;
}

/* 3-COLUMN MIDDLE GRID */
.pm-scp-middle-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.pm-scp-col-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
}

.pm-scp-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--scp-border);
  margin-bottom: 12px;
}

.pm-scp-col-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pm-scp-col-title {
  font-size: 0.975rem;
  font-weight: 800;
  color: var(--scp-primary);
  margin: 0;
}

.pm-scp-badge {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
}

.pm-scp-badge.red {
  background: #fee2e2;
  color: #dc2626;
}

.pm-scp-badge.green {
  background: #dcfce7;
  color: #15803d;
}

.pm-scp-status-pill {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
}

.pm-scp-status-pill.green {
  color: #059669;
}

.pm-scp-status-pill.green-solid {
  background: #dcfce7;
  color: #15803d;
}

.pm-scp-status-pill.yellow {
  background: #fef3c7;
  color: #b45309;
}

/* ITEMS LIST */
.pm-scp-items-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 180px;
}

/* REQUEST ITEM */
.pm-scp-req-item {
  background: #fbf9f5;
  border: 1px solid var(--scp-border);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pm-scp-req-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.pm-scp-avatar-initials {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #123f39;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pm-scp-req-info {
  flex: 1;
  min-width: 0;
}

.pm-scp-req-name {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--scp-primary);
}

.pm-scp-req-srv {
  font-size: 0.775rem;
  color: var(--scp-text-muted);
}

.pm-scp-req-time {
  font-size: 0.725rem;
  color: #182419;
  font-weight: 600;
}

.pm-scp-req-ago {
  font-size: 0.7rem;
  color: #94a3b8;
}

.pm-scp-req-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.pm-scp-btn-accept {
  background: var(--scp-primary);
  color: #ffffff;
  border: none;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.pm-scp-btn-reject {
  background: #ffffff;
  color: #64748b;
  border: 1px solid var(--scp-border);
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

/* QUEUE ITEM */
.pm-scp-queue-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #fbf9f5;
  border: 1px solid var(--scp-border);
  border-radius: 10px;
}

.pm-scp-queue-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--scp-primary);
  color: var(--scp-primary);
  font-size: 0.75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pm-scp-queue-info {
  flex: 1;
}

.pm-scp-queue-name {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--scp-primary);
}

.pm-scp-queue-srv {
  font-size: 0.725rem;
  color: var(--scp-text-muted);
}

.pm-scp-queue-wait {
  font-size: 0.7rem;
  color: #475569;
}

.pm-scp-queue-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.pm-scp-queue-duration {
  font-size: 0.7rem;
  color: #94a3b8;
}

.pm-scp-btn-remove-queue {
  background: #dcfce7;
  color: #15803d;
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* TODAY SLOT ITEM */
.pm-scp-today-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: #fbf9f5;
  border: 1px solid var(--scp-border);
  border-radius: 10px;
  gap: 8px;
}

.pm-scp-slot-time {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--scp-primary);
  min-width: 44px;
}

.pm-scp-slot-info {
  flex: 1;
}

.pm-scp-slot-srv {
  font-size: 0.8rem;
  font-weight: 700;
  color: #182419;
}

.pm-scp-slot-staff {
  font-size: 0.7rem;
  color: var(--scp-text-muted);
}

.pm-scp-col-footer {
  padding-top: 10px;
  border-top: 1px solid var(--scp-border);
  margin-top: 10px;
  text-align: center;
}

.pm-scp-footer-link {
  background: none;
  border: none;
  color: var(--scp-primary);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

/* 6. KPI STRIP (5 CARDS IN ROW) */
.pm-scp-kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.pm-scp-kpi-item {
  background: #ffffff;
  border: 1px solid var(--scp-border);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.pm-scp-kpi-icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #fbf9f5;
  border: 1px solid var(--scp-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pm-scp-kpi-text {
  display: flex;
  flex-direction: column;
}

.pm-scp-kpi-val {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--scp-primary);
  line-height: 1.1;
}

.pm-scp-kpi-lbl {
  font-size: 0.725rem;
  color: var(--scp-text-muted);
  font-weight: 600;
}

/* 7. QUICK ACTIONS STRIP */
.pm-scp-quick-actions-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.pm-scp-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid var(--scp-border);
  color: var(--scp-primary);
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pm-scp-action-btn:hover {
  background: #fbf9f5;
  border-color: var(--scp-primary);
}

.pm-scp-action-btn.primary {
  background: var(--scp-primary);
  color: #ffffff;
  border-color: var(--scp-primary);
}

.pm-scp-action-btn.primary:hover {
  background: #1a574f;
}

/* MODALS */
.pm-scp-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.pm-scp-modal-box {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.pm-scp-modal-box.pm-scp-wide {
  max-width: 540px;
}

.pm-scp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--scp-border);
}

.pm-scp-modal-header h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--scp-primary);
  margin: 0;
}

.pm-scp-modal-header button {
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
}

.pm-scp-modal-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pm-scp-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pm-scp-form-group label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #182419;
}

.pm-scp-form-group input,
.pm-scp-form-group select {
  border: 1px solid var(--scp-border);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 0.875rem;
  background: #fbf9f5;
  outline: none;
}

.pm-scp-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}

.pm-scp-btn-primary {
  background: var(--scp-primary);
  color: #ffffff;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}

.pm-scp-btn-cancel {
  background: #ffffff;
  color: #64748b;
  border: 1px solid var(--scp-border);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}

.pm-scp-btn-reset {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 0.825rem;
  font-weight: 700;
  cursor: pointer;
}

.pm-scp-modal-booking-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid var(--scp-border);
}

/* TOAST */
.pm-scp-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  background: var(--scp-primary);
  color: #ffffff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* LOCK SCREEN */
.pm-scp-lock-card {
  max-width: 440px;
  margin: 60px auto;
  background: #ffffff;
  border: 1px solid var(--scp-border);
  border-radius: 20px;
  padding: 36px 24px;
  text-align: center;
}

.pm-scp-lock-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fef3c7;
  color: #92400e;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.pm-scp-lock-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--scp-primary);
  margin: 0 0 8px;
}

.pm-scp-lock-desc {
  font-size: 0.9rem;
  color: var(--scp-text-muted);
  margin: 0 0 20px;
}

.pm-scp-lock-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pm-scp-lock-form input {
  border: 1px solid var(--scp-border);
  border-radius: 10px;
  padding: 12px;
  font-size: 1rem;
  text-align: center;
  font-family: monospace;
  font-weight: 700;
  text-transform: uppercase;
}

.pm-scp-err-msg {
  background: #fee2e2;
  color: #b91c1c;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  margin-bottom: 14px;
}

/* RESPONSIVENESS */
@media (max-width: 992px) {
  .pm-scp-staff-grid {
    grid-template-columns: 1fr;
  }

  .pm-scp-middle-3col {
    grid-template-columns: 1fr;
  }

  .pm-scp-kpi-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .pm-scp-quick-actions-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .pm-scp-header-actions {
    flex-wrap: wrap;
  }

  .pm-scp-kpi-strip {
    grid-template-columns: 1fr;
  }

  .pm-scp-quick-actions-strip {
    grid-template-columns: 1fr;
  }
}

/* Owner today-first workspace — tokens from PickMe Calm Kinetic */
.pm-owner-shell {
  min-height: 100vh;
  background: #f7f4ec;
  color: #101116;
  display: flex;
  font-family: Inter, system-ui, sans-serif;
}

.pm-owner-rail {
  display: none;
}

.pm-owner-workspace {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pm-owner-header {
  background: #fffdf9;
  border-bottom: 1px solid #d9dbe3;
  position: sticky;
  top: 0;
  z-index: 40;
}

.pm-owner-header-inner {
  width: 100%;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  gap: 12px;
}

.pm-owner-main {
  flex: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 16px 20px 40px;
  box-sizing: border-box;
}

.pm-owner-kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.pm-owner-kpi {
  background: #fffdf9;
  border: 1px solid #d9dbe3;
  border-radius: 16px;
  padding: 12px;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pm-owner-kpi strong {
  font-size: 22px;
  font-family: Fraunces, Georgia, serif;
  color: #101116;
}

.pm-owner-kpi span {
  font-size: 12px;
  font-weight: 700;
  color: #747b8b;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pm-owner-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.pm-owner-rail-brand,
.pm-owner-rail-link,
.pm-owner-switcher a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 12px;
  color: #101116;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}

.pm-owner-rail-link.is-active,
.pm-owner-switcher a.is-current {
  background: #4b5fff;
  color: #fff;
}

.pm-owner-switcher {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 700;
  color: #747b8b;
}

.pm-owner-switcher summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.pm-owner-switcher a {
  margin-top: 4px;
  border: 1px solid #d9dbe3;
}

@media (min-width: 768px) {
  .pm-owner-kpis {
    grid-template-columns: repeat(4, 1fr);
  }
  .pm-owner-split {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

@media (min-width: 1200px) {
  .pm-owner-rail {
    display: flex;
    flex-direction: column;
    width: 240px;
    flex-shrink: 0;
    background: #fffdf9;
    border-right: 1px solid #d9dbe3;
    padding: 16px 12px;
    gap: 4px;
    box-sizing: border-box;
  }
}
.pm-cookie-overlay {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: auto;
  z-index: 9900;
  display: flex;
  pointer-events: none;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  max-width: 440px;
  width: calc(100vw - 40px);
}

.pm-cookie-banner {
  pointer-events: auto;
  width: 100%;
  background: #ffffff;
  border: 1px solid #e4ded4;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 12px 32px rgba(16, 17, 22, 0.12);
  color: #101116;
  animation: pmCookieSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pmCookieSlideIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.pm-cookie-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.pm-cookie-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pm-cookie-icon {
  font-size: 18px;
}

.pm-cookie-title {
  font-size: 14px;
  font-weight: 700;
  color: #101116;
}

.pm-cookie-description {
  font-size: 12px;
  line-height: 1.5;
  color: #5c6068;
  margin: 0 0 12px 0;
}

.pm-cookie-categories {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #f7f4ec;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid #e4ded4;
}

.pm-cookie-category-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #eee7dc;
}

.pm-cookie-category-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.pm-cookie-cat-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pm-cookie-cat-name {
  font-size: 12px;
  font-weight: 600;
  color: #101116;
}

.pm-cookie-cat-desc {
  font-size: 10px;
  color: #6b6f78;
  line-height: 1.3;
}

.pm-cookie-toggle {
  width: 16px;
  height: 16px;
  accent-color: #4b5fff;
  cursor: pointer;
}

.pm-cookie-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.pm-cookie-links {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.pm-cookie-link {
  color: #4b5fff;
  text-decoration: none;
  font-weight: 600;
}

.pm-cookie-link:hover {
  text-decoration: underline;
}

.pm-cookie-divider {
  color: #c8c2b6;
}

.pm-cookie-settings-btn {
  background: none;
  border: none;
  color: #5c6068;
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.pm-cookie-settings-btn:hover {
  color: #101116;
}

.pm-cookie-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pm-cookie-btn {
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pm-cookie-reject,
.pm-cookie-save {
  background: #ffffff;
  border: 1px solid #e4ded4;
  color: #101116;
}

.pm-cookie-reject:hover,
.pm-cookie-save:hover {
  background: #f7f4ec;
}

.pm-cookie-accept {
  background: #4b5fff;
  border: 1px solid #4b5fff;
  color: #ffffff;
  font-weight: 700;
}

.pm-cookie-accept:hover {
  background: #3a4ae8;
  border-color: #3a4ae8;
}

@media (max-width: 600px) {
  .pm-cookie-overlay {
    bottom: 80px;
    left: 10px;
    right: 10px;
    width: auto;
    max-width: none;
    box-sizing: border-box;
  }
}
/* ==========================================================================
   PICKME VISUAL SALON SIMULATOR / DIGITAL TWIN STYLES
   ========================================================================== */

.pm-twin-page {
  --twin-bg: #f8f6f0;
  --twin-card-bg: #ffffff;
  --twin-border: #e2dcce;
  --twin-green: #123f39;
  --twin-green-light: #e8f5e9;
  --twin-orange: #b87014;
  --twin-orange-light: #fef3e2;
  --twin-red: #c62828;
  --twin-red-light: #ffebee;
  
  min-height: 100vh;
  background-color: var(--twin-bg);
  color: #273828;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.pm-twin-main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 24px 40px;
}

/* ─── Control Bar ─────────────────────────────────────────────────────────── */
.pm-twin-control-bar {
  background: var(--twin-card-bg);
  border: 1px solid var(--twin-border);
  border-radius: 16px;
  padding: 16px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.03);
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.pm-twin-clock-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pm-twin-clock-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  color: #717d6e;
  letter-spacing: 0.05em;
}

.pm-twin-clock-digits {
  font-size: 32px;
  font-weight: 900;
  font-family: "Courier New", monospace;
  color: var(--twin-green);
  line-height: 1.1;
}

.pm-twin-date-badge {
  font-size: 12px;
  color: #516050;
  font-weight: 600;
}

.pm-twin-global-axes {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.pm-axis-pill {
  background: #f4efe6;
  border: 1px solid #ddd5c7;
  padding: 8px 14px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pm-axis-title {
  font-size: 10px;
  font-weight: 800;
  color: #636d60;
  letter-spacing: 0.04em;
}

.pm-axis-value {
  font-size: 13px;
  font-weight: 800;
}

.pm-axis-value.open { color: #1e7e34; }
.pm-axis-value.closed { color: #c62828; }
.pm-axis-value.accepting { color: #123f39; }
.pm-axis-value.limited { color: #b87014; }

.pm-twin-playback-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pm-btn-play {
  background: var(--twin-green);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-weight: 800;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(18,63,57,0.2);
  transition: all 0.15s ease;
}

.pm-btn-play.playing {
  background: #c62828;
}

.pm-btn-step {
  background: #ffffff;
  border: 1px solid var(--twin-border);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.pm-twin-speed-toggles {
  display: flex;
  background: #eee8dc;
  border-radius: 8px;
  padding: 2px;
}

.pm-speed-btn {
  background: none;
  border: none;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  color: #4a5448;
}

.pm-speed-btn.active {
  background: #ffffff;
  color: var(--twin-green);
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.pm-btn-reset {
  background: #ffffff;
  border: 1px solid var(--twin-border);
  padding: 9px;
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  place-items: center;
}

/* ─── Scenario Presets Toolbar ───────────────────────────────────────────── */
.pm-twin-scenarios-bar {
  background: var(--twin-card-bg);
  border: 1px solid var(--twin-border);
  border-radius: 14px;
  padding: 12px 18px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.pm-scenarios-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--twin-green);
  white-space: nowrap;
}

.pm-scenarios-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
}

.pm-scenarios-list button {
  background: #f7f4ee;
  border: 1px solid #dcd4c6;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #354234;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pm-scenarios-list button:hover {
  background: #ede6da;
  border-color: var(--twin-green);
}

.pm-scenarios-list button.highlight {
  background: #e8f5e9;
  border-color: #a5d6a7;
  color: #1b5e20;
}

/* ─── The Salon Floor Grid (3 Chairs) ────────────────────────────────────── */
.pm-twin-floor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 20px;
}

.pm-workstation-card {
  background: var(--twin-card-bg);
  border: 2px solid var(--twin-border);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.03);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pm-workstation-card.occupied {
  border-color: #c62828;
  box-shadow: 0 4px 20px rgba(198, 40, 40, 0.08);
}

.pm-workstation-card.empty {
  border-color: #2e7d32;
}

.pm-workstation-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.pm-chair-label {
  font-size: 11px;
  font-weight: 800;
  color: #8c9789;
  letter-spacing: 0.05em;
}

.pm-staff-name {
  margin: 2px 0 0;
  font-size: 19px;
  font-weight: 800;
  color: #1a261c;
  font-family: Georgia, serif;
}

.pm-hardware-status {
  display: flex;
  gap: 6px;
  align-items: center;
}

.online-badge {
  background: #e8f5e9;
  color: #1b5e20;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.offline-badge {
  background: #ffebee;
  color: #c62828;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.battery-badge {
  background: #f4efe6;
  color: #516050;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Chair Stage Visual */
.pm-visual-chair-stage {
  height: 120px;
  background: #faf7f2;
  border: 1px dashed #d8cfbe;
  border-radius: 12px;
  display: grid;
  place-items: center;
  position: relative;
}

.pm-chair-seat {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: all 0.3s ease;
}

.pm-chair-seat.vacant {
  background: #e8f5e9;
  border: 2px solid #81c784;
}

.pm-empty-chair-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 800;
  color: #2e7d32;
}

.pm-chair-seat.has-client {
  background: #c62828;
  border: 2px solid #8e0000;
  box-shadow: 0 4px 14px rgba(198, 40, 40, 0.3);
}

.pm-seated-client-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.pm-client-tag {
  font-size: 9px;
  font-weight: 800;
  color: #ffffff;
  background: rgba(0,0,0,0.3);
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

/* 3 Axes Panel */
.pm-three-axes-panel {
  background: #fbf9f4;
  border: 1px solid #e7dfd2;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pm-axis-row {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
}

.pm-axis-row .label { color: #6e7a6c; }
.pm-axis-row strong.open { color: #2e7d32; }
.pm-axis-row strong.closed { color: #c62828; }
.pm-axis-row strong.active { color: #c62828; }
.pm-axis-row strong.idle { color: #2e7d32; }
.pm-axis-row strong.pause { color: #b87014; }
.pm-axis-row strong.accepting { color: #123f39; }
.pm-axis-row strong.capacity_full { color: #b87014; }

/* Public Status Synthesizer Box */
.pm-public-status-box {
  background: #f4efe6;
  border-radius: 10px;
  padding: 10px 12px;
}

.public-tag {
  font-size: 9.5px;
  font-weight: 800;
  color: #636d60;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 4px;
}

.pm-public-badge {
  font-size: 14px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 4px;
}

.badge-free { background: #e8f5e9; color: #1b5e20; }
.badge-busy { background: #ffebee; color: #c62828; }
.badge-pause { background: #fef3e2; color: #b87014; }
.badge-closing-guest { background: #ede7f6; color: #4a148c; }
.badge-closed { background: #f5f5f5; color: #616161; }
.badge-full { background: #fff3e0; color: #e65100; }

.pm-public-subtext {
  margin: 0;
  font-size: 11px;
  color: #556052;
  line-height: 1.35;
}

/* Brain Reasoning Box */
.pm-brain-reasoning-box {
  background: #ffffff;
  border: 1px solid #dcd4c6;
  border-radius: 10px;
  padding: 10px 12px;
}

.pm-reasoning-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--twin-green);
  margin-bottom: 4px;
}

.pm-reasoning-header .confidence {
  color: #2e7d32;
}

.pm-reason-code {
  font-family: "Courier New", monospace;
  font-size: 11px;
  color: #3b473a;
  background: #f4efe6;
  padding: 4px 8px;
  border-radius: 6px;
  word-break: break-all;
}

/* Chair Action Buttons */
.pm-chair-actions-row {
  display: flex;
  gap: 6px;
}

.pm-action-btn {
  flex: 1;
  background: #f7f4ee;
  border: 1px solid #d4ccbd;
  padding: 7px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: #323d31;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.pm-action-btn.btn-sit { background: #e8f5e9; border-color: #a5d6a7; color: #1b5e20; }
.pm-action-btn.btn-standup { background: #ffebee; border-color: #ef9a9a; color: #c62828; }
.pm-action-btn.active { background: #b87014; color: #ffffff; border-color: #8c530c; }

/* ─── Bottom Grid: Lounge & Live Audit ────────────────────────────────────── */
.pm-twin-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 18px;
}

.pm-twin-lounge-card,
.pm-twin-audit-card {
  background: var(--twin-card-bg);
  border: 1px solid var(--twin-border);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.03);
}

.pm-lounge-header,
.pm-audit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.pm-lounge-header h3,
.pm-audit-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: #1a261c;
}

.badge-count {
  background: #e8f5e9;
  color: #1b5e20;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2e7d32;
  box-shadow: 0 0 8px rgba(46, 125, 50, 0.8);
}

.pm-lounge-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 100px;
  max-height: 180px;
  overflow-y: auto;
  margin-bottom: 12px;
}

.pm-lounge-guest-pill {
  background: #faf7f2;
  border: 1px solid #e7dfd2;
  padding: 8px 12px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.pm-lounge-guest-pill .name { font-weight: 700; }
.pm-lounge-guest-pill .service { color: #636d60; }
.pm-lounge-guest-pill .time { margin-left: auto; font-size: 11px; color: #8c9789; }

.pm-lounge-actions {
  display: flex;
  gap: 8px;
}

.pm-lounge-actions button {
  flex: 1;
  background: #f7f4ee;
  border: 1px solid #d4ccbd;
  padding: 7px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

/* Audit Feed */
.pm-audit-feed {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
}

.pm-log-row {
  font-size: 11.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  background: #faf8f4;
  border: 1px solid #eee7dc;
}

.log-time {
  font-family: monospace;
  color: #717d6e;
  font-size: 10.5px;
}

.log-tag {
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
}

.tag-sensor { background: #e3f2fd; color: #1565c0; }
.tag-brain { background: #ede7f6; color: #512da8; }
.tag-booking { background: #e8f5e9; color: #1b5e20; }
.tag-gate { background: #fff3e0; color: #e65100; }
.tag-system { background: #eceff1; color: #455a64; }

.log-msg {
  font-weight: 600;
  color: #2b362a;
}

.log-detail {
  color: #636d60;
  font-size: 11px;
}

@media (max-width: 960px) {
  .pm-twin-floor-grid {
    grid-template-columns: 1fr;
  }
  .pm-twin-bottom-grid {
    grid-template-columns: 1fr;
  }
}
.pm-brand-spot {
  --spot-ink: #fffdf9;
  --spot-muted: rgba(255, 253, 249, 0.78);
  --spot-leaf: linear-gradient(135deg, #60a5fa 0%, #4b5fff 100%);
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 148px;
  height: 100%;
  border-radius: var(--pm-theme-radius, 14px);
  background: #101116;
  border: 1px solid color-mix(in srgb, var(--pm-theme-primary, #4b5fff) 28%, transparent);
  isolation: isolate;
}

.pm-brand-spot.is-compact {
  min-height: 108px;
}

.pm-salon-theme-classic .pm-brand-spot {
  border-color: rgba(75, 95, 255, 0.28);
}

.pm-salon-theme-modern_minimal .pm-brand-spot {
  border-radius: 10px;
  border-color: rgba(15, 23, 42, 0.18);
}

.pm-salon-theme-barber_dark .pm-brand-spot {
  border-color: rgba(224, 177, 132, 0.32);
  box-shadow: inset 0 0 0 1px rgba(224, 177, 132, 0.08);
}

.pm-brand-film,
.pm-brand-shot {
  position: absolute;
  inset: 0;
}

.pm-brand-shot {
  overflow: hidden;
  opacity: 0;
  animation: pm-brand-cut 24s ease-in-out infinite;
}

.pm-brand-shot.is-salon { animation-delay: 0s; }
.pm-brand-shot.is-scan { animation-delay: 8s; }
.pm-brand-shot.is-mark { animation-delay: 16s; }

.pm-brand-haze {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(50% 60% at 18% 20%, rgba(75, 95, 255, 0.42), transparent 58%),
    radial-gradient(55% 50% at 88% 90%, rgba(212, 163, 115, 0.22), transparent 60%),
    linear-gradient(180deg, #161820 0%, #0c0d12 100%);
  animation: pm-brand-ken 8s ease-in-out infinite;
}

.pm-brand-shot.is-scan .pm-brand-haze,
.pm-brand-bloom {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(70% 80% at 50% 40%, rgba(75, 95, 255, 0.35), transparent 62%),
    #0c0d12;
}

.pm-brand-bloom {
  animation: pm-brand-pulse 8s ease-in-out infinite;
}

.pm-brand-lights {
  position: absolute;
  top: 8%;
  left: 10%;
  right: 10%;
  display: flex;
  justify-content: space-between;
  z-index: 2;
}

.pm-brand-lights i {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff6d8;
  box-shadow: 0 0 16px rgba(255, 236, 179, 0.95), 0 0 28px rgba(75, 95, 255, 0.35);
  animation: pm-brand-bulb 1.4s ease-in-out infinite;
}

.pm-brand-cones {
  position: absolute;
  inset: 10% 6% 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.pm-brand-cones i {
  width: 18%;
  height: 88%;
  background: linear-gradient(180deg, rgba(255, 236, 179, 0.42) 0%, rgba(75, 95, 255, 0.12) 42%, transparent 78%);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  filter: blur(1px);
  animation: pm-brand-cone 2.8s ease-in-out infinite;
  opacity: 0.75;
}

.pm-brand-cones i:nth-child(2) { animation-delay: 0.35s; }
.pm-brand-cones i:nth-child(3) { animation-delay: 0.7s; }
.pm-brand-cones i:nth-child(4) { animation-delay: 1.05s; }
.pm-brand-cones i:nth-child(5) { animation-delay: 1.4s; }

.pm-brand-motes {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255, 253, 249, 0.7) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(147, 197, 253, 0.55) 0 1px, transparent 1.5px);
  background-size: 42px 36px, 58px 48px;
  background-position: 8% 20%, 70% 40%;
  animation: pm-brand-motes 10s linear infinite;
  opacity: 0.35;
}

@keyframes pm-brand-cone {
  0%, 100% { opacity: 0.35; transform: scaleY(0.92); }
  50% { opacity: 0.9; transform: scaleY(1.04); }
}

@keyframes pm-brand-motes {
  0% { background-position: 8% 20%, 70% 40%; }
  100% { background-position: 8% 80%, 70% 8%; }
}

.pm-brand-lights i:nth-child(2) { animation-delay: 0.15s; }
.pm-brand-lights i:nth-child(3) { animation-delay: 0.3s; }
.pm-brand-lights i:nth-child(4) { animation-delay: 0.45s; }
.pm-brand-lights i:nth-child(5) { animation-delay: 0.6s; }

.pm-brand-chair {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 38%;
  width: 54px;
  height: 36px;
  margin-left: -27px;
  border: 2px solid rgba(255, 253, 249, 0.55);
  border-bottom: 0;
  border-radius: 14px 14px 4px 4px;
  transform-origin: 50% 100%;
  animation: pm-brand-sit 8s ease-in-out infinite;
}

.pm-brand-chair::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -8px;
  height: 8px;
  border: 2px solid rgba(255, 253, 249, 0.35);
  border-top: 0;
  border-radius: 0 0 8px 8px;
}

.pm-brand-leaf {
  position: absolute;
  z-index: 2;
  width: 22px;
  height: 14px;
  border-radius: 100% 12% 100% 12%;
  background: var(--spot-leaf);
  filter: drop-shadow(0 6px 10px rgba(75, 95, 255, 0.35));
}

.pm-brand-leaf.a {
  left: 10%;
  top: 42%;
  transform: rotate(28deg);
  animation: pm-brand-drift-a 8s ease-in-out infinite;
}

.pm-brand-leaf.b {
  right: 12%;
  top: 28%;
  width: 18px;
  height: 12px;
  transform: rotate(210deg);
  animation: pm-brand-drift-b 8s ease-in-out infinite;
}

.pm-brand-leaf.c {
  right: 22%;
  bottom: 28%;
  animation: pm-brand-drift-c 8s ease-in-out infinite;
}

.pm-brand-leaf.d {
  left: 14%;
  top: 24%;
  transform: rotate(40deg);
  animation: pm-brand-drift-a 8s ease-in-out infinite;
}

.pm-brand-phone {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 18%;
  width: 42px;
  height: 64px;
  margin-left: -21px;
  border: 2px solid rgba(255, 253, 249, 0.7);
  border-radius: 8px;
  background: rgba(16, 17, 22, 0.55);
  overflow: hidden;
  animation: pm-brand-lift 8s ease-out infinite;
}

.pm-brand-grid {
  position: absolute;
  inset: 8px 7px 10px;
  background:
    repeating-linear-gradient(90deg, rgba(75, 95, 255, 0.55) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(0deg, rgba(75, 95, 255, 0.45) 0 2px, transparent 2px 6px);
  opacity: 0.85;
}

.pm-brand-beam {
  position: absolute;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(90deg, transparent, #93c5fd, transparent);
  animation: pm-brand-scan 8s linear infinite;
}

.pm-brand-symbol {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 22%;
  width: 46px;
  height: 46px;
  margin-left: -23px;
  animation: pm-brand-spin-in 8s ease-out infinite;
}

.pm-brand-symbol i {
  position: absolute;
  width: 28px;
  height: 16px;
  border-radius: 100% 10% 100% 10%;
  background: var(--spot-leaf);
}

.pm-brand-symbol i:first-child {
  left: 2px;
  top: 8px;
  transform: rotate(35deg);
}

.pm-brand-symbol i:last-child {
  right: 2px;
  bottom: 8px;
  transform: rotate(215deg);
}

.pm-brand-card {
  position: absolute;
  z-index: 3;
  left: 8px;
  right: 8px;
  bottom: 8px;
  padding: 6px 8px 5px;
  border-radius: 10px;
  background: rgba(16, 17, 22, 0.55);
  backdrop-filter: blur(8px);
  text-align: center;
}

.pm-brand-card b {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--spot-ink);
  line-height: 1.1;
}

.pm-brand-card small {
  display: block;
  margin-top: 2px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--spot-muted);
}

@keyframes pm-brand-cut {
  0%, 4% { opacity: 0; }
  8%, 29% { opacity: 1; }
  33%, 100% { opacity: 0; }
}

@keyframes pm-brand-ken {
  0%, 100% { transform: scale(1) translate3d(0, 0, 0); }
  50% { transform: scale(1.12) translate3d(-3%, 2%, 0); }
}

@keyframes pm-brand-bulb {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

@keyframes pm-brand-sit {
  0%, 100% { transform: scale(0.96); }
  50% { transform: scale(1.04); }
}

@keyframes pm-brand-drift-a {
  0% { transform: rotate(28deg) translate3d(0, 8px, 0); opacity: 0.4; }
  50% { transform: rotate(40deg) translate3d(10px, -6px, 0); opacity: 1; }
  100% { transform: rotate(28deg) translate3d(0, 8px, 0); opacity: 0.4; }
}

@keyframes pm-brand-drift-b {
  0% { transform: rotate(210deg) translate3d(0, 0, 0); }
  50% { transform: rotate(198deg) translate3d(-8px, 10px, 0); }
  100% { transform: rotate(210deg) translate3d(0, 0, 0); }
}

@keyframes pm-brand-drift-c {
  0%, 100% { transform: rotate(18deg) translate3d(0, 0, 0); opacity: 0.5; }
  50% { transform: rotate(8deg) translate3d(6px, -10px, 0); opacity: 1; }
}

@keyframes pm-brand-lift {
  0% { transform: translateY(12px); opacity: 0; }
  18%, 100% { transform: translateY(0); opacity: 1; }
}

@keyframes pm-brand-scan {
  0% { top: 8px; opacity: 0; }
  12% { opacity: 1; }
  88% { top: 52px; opacity: 1; }
  100% { top: 56px; opacity: 0; }
}

@keyframes pm-brand-spin-in {
  0% { transform: scale(0.6) rotate(-18deg); opacity: 0; }
  22%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes pm-brand-pulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.08); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pm-brand-shot,
  .pm-brand-haze,
  .pm-brand-lights i,
  .pm-brand-cones i,
  .pm-brand-motes,
  .pm-brand-chair,
  .pm-brand-leaf,
  .pm-brand-phone,
  .pm-brand-beam,
  .pm-brand-symbol,
  .pm-brand-bloom {
    animation: none;
  }
  .pm-brand-shot.is-salon {
    opacity: 1;
  }
  .pm-brand-shot.is-scan,
  .pm-brand-shot.is-mark {
    display: none;
  }
}
/* ==========================================================================
   PickMe Sensor Detail Modal Stylesheet
   ========================================================================== */

.pm-sensor-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10002;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  animation: pmFadeIn 0.2s ease;
}

.pm-sensor-modal-card {
  width: 100%;
  max-width: 480px;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pm-sensor-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #e2e8f0;
}

.pm-sensor-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pm-sensor-status-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pm-sensor-status-icon.online {
  background: #ecfdf5;
  color: #059669;
}

.pm-sensor-status-icon.offline {
  background: #fef2f2;
  color: #dc2626;
}

.pm-sensor-modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
}

.pm-sensor-subtitle {
  font-size: 12px;
  color: #64748b;
}

.pm-sensor-close-btn {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 50%;
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
  transition: all 0.15s ease;
}

.pm-sensor-close-btn:hover {
  background: #e2e8f0;
}

.pm-sensor-modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pm-sensor-unpaired-box {
  text-align: center;
  padding: 20px 10px;
  background: #f8fafc;
  border-radius: 16px;
  border: 1px dashed #cbd5e1;
}

.pm-unpaired-icon {
  color: #d97706;
  margin-bottom: 8px;
}

.pm-sensor-unpaired-box h4 {
  margin: 0 0 6px;
  font-size: 15px;
  color: #0f172a;
}

.pm-sensor-unpaired-box p {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: #64748b;
}

.pm-sensor-mode-hint {
  font-size: 12px;
  color: #334155;
  background: #ffffff;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.pm-sensor-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.pm-metric-tile {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pm-metric-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pm-metric-icon.signal { background: #e0f2fe; color: #0284c7; }
.pm-metric-icon.battery { background: #dcfce7; color: #16a34a; }
.pm-metric-icon.auto { background: #fef3c7; color: #d97706; }
.pm-metric-icon.brain { background: #f3e8ff; color: #7e22ce; }

.pm-metric-info {
  display: flex;
  flex-direction: column;
}

.pm-metric-label {
  font-size: 10.5px;
  color: #64748b;
  font-weight: 600;
}

.pm-metric-val {
  font-size: 12px;
  font-weight: 800;
  color: #0f172a;
  margin-top: 1px;
}

.pm-sensor-last-event {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f1f5f9;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 11.5px;
  color: #475569;
}

.pm-sensor-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

.pm-sensor-diag-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid #cbd5e1;
  color: #334155;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.pm-sensor-ok-btn {
  background: #123f39;
  color: #ffffff;
  border: none;
  padding: 8px 18px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
/* ==========================================================================
   PickMe Advanced Diagnostics Modal Stylesheet (Mobile Optimized)
   ========================================================================== */

.pm-diag-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 10003;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
  animation: pmFadeIn 0.2s ease;
}

.pm-diag-modal-card {
  width: 100%;
  max-width: 780px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #c9d1d9;
  max-height: 90vh;
}

.pm-diag-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid #21262d;
  background: #161b22;
}

.pm-diag-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pm-diag-icon {
  color: #58a6ff;
  flex-shrink: 0;
}

.pm-diag-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: #f0f6fc;
}

.pm-diag-sub {
  font-size: 10.5px;
  color: #8b949e;
  font-family: monospace;
  display: block;
}

.pm-diag-close-btn {
  background: #21262d;
  border: 1px solid #30363d;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 50%;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
  transition: all 0.15s ease;
}

.pm-diag-close-btn:hover {
  background: #30363d;
}

/* Tabs Scroll Wrap for Mobile */
.pm-diag-tabs-scroll-wrap {
  width: 100%;
  background: #161b22;
  border-bottom: 1px solid #21262d;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pm-diag-tabs {
  display: flex;
  padding: 8px 12px;
  gap: 6px;
  min-width: max-content;
}

.pm-diag-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: #8b949e;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.pm-diag-tab.active {
  background: #21262d;
  border-color: #388bfd;
  color: #58a6ff;
}

.pm-diag-body {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
}

.pm-diag-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 14px;
}

.pm-diag-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  font-size: 11px;
}

.pm-diag-table th {
  text-align: left;
  padding: 8px 10px;
  background: #161b22;
  border-bottom: 1px solid #30363d;
  color: #8b949e;
  font-weight: 700;
}

.pm-diag-table td {
  padding: 9px 10px;
  border-bottom: 1px solid #21262d;
  color: #f0f6fc;
}

.pm-diag-code-box {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 10px;
  padding: 12px;
}

.pm-code-label {
  font-size: 10px;
  font-weight: 800;
  color: #58a6ff;
  letter-spacing: 0.6px;
  display: block;
  margin-bottom: 6px;
}

.pm-diag-code-box pre {
  margin: 0;
  font-family: monospace;
  font-size: 11px;
  color: #7ee787;
  overflow-x: auto;
}

.pm-diag-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 600px) {
  .pm-diag-grid-2 {
    grid-template-columns: 1fr;
  }
}

.pm-diag-card {
  background: #161b22;
  border: 1px solid #21262d;
  border-radius: 12px;
  padding: 12px 14px;
}

.pm-diag-card h4 {
  margin: 0 0 8px;
  font-size: 12.5px;
  color: #58a6ff;
}

.pm-diag-list {
  margin: 0;
  padding-left: 16px;
  font-size: 11.5px;
  line-height: 1.55;
}

.pm-device-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #21262d;
  gap: 10px;
}

.pm-device-row:last-child {
  border-bottom: none;
}

.pm-device-row strong {
  display: block;
  font-size: 12.5px;
  color: #f0f6fc;
}

.pm-device-row span {
  font-size: 10.5px;
  color: #8b949e;
}

.pm-device-tag.online {
  font-size: 10px;
  font-weight: 800;
  color: #3fb950;
  white-space: nowrap;
}

.pm-log-stream {
  margin: 0;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 10px;
  padding: 12px;
  font-family: monospace;
  font-size: 11px;
  color: #8b949e;
  line-height: 1.5;
  white-space: pre-wrap;
}

.pm-diag-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  background: #161b22;
  border-top: 1px solid #21262d;
  gap: 12px;
}

.pm-diag-sim-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #58a6ff;
  text-decoration: none;
  font-size: 11.5px;
  font-weight: 700;
}

.pm-diag-sim-link:hover {
  text-decoration: underline;
}

.pm-diag-ok-btn {
  background: #238636;
  color: #ffffff;
  border: none;
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
}
.pm-start-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 17, 22, 0.48);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 10004;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
}

.pm-start-modal-card {
  width: 100%;
  max-width: 440px;
  background: #fffdf9;
  border: 1px solid #d9dbe3;
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(16, 17, 22, 0.16);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: Inter, system-ui, sans-serif;
}

.pm-start-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
}

.pm-start-header.start {
  background: #4b5fff;
  color: #ffffff;
}

.pm-start-header.feierabend {
  background: #101116;
  color: #ffffff;
}

.pm-start-icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pm-start-title-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pm-start-header h3 {
  margin: 0;
  font-family: Fraunces, Georgia, serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.pm-start-sub {
  font-size: 12px;
  opacity: 0.82;
  margin-top: 2px;
}

.pm-start-close-btn {
  background: rgba(255, 255, 255, 0.16);
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.pm-start-close-btn:hover {
  background: rgba(255, 255, 255, 0.28);
}

.pm-start-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #f7f4ec;
}

.pm-start-intro {
  margin: 0;
  font-size: 14px;
  color: #747b8b;
  line-height: 1.45;
}

.pm-check-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pm-check-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: #fffdf9;
  border: 1px solid #d9dbe3;
  border-radius: 16px;
}

.pm-check-ok {
  color: #4b5fff;
  flex-shrink: 0;
  margin-top: 2px;
}

.pm-check-item strong {
  display: block;
  font-size: 13px;
  color: #101116;
}

.pm-check-item span {
  display: block;
  font-size: 12px;
  color: #747b8b;
  margin-top: 2px;
}

.pm-start-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 20px 18px;
  background: #fffdf9;
  border-top: 1px solid #d9dbe3;
}

.pm-start-cancel-btn {
  background: transparent;
  border: 1px solid #d9dbe3;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  color: #747b8b;
  cursor: pointer;
}

.pm-start-confirm-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: pointer;
}

.pm-start-confirm-btn.start {
  background: #4b5fff;
  color: #ffffff;
}

.pm-start-confirm-btn.feierabend {
  background: #101116;
  color: #ffffff;
}
.pm-salon-pult-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: var(--pm-theme-card-bg, #ffffff);
  color: var(--pm-theme-text-main, #0f172a);
}

.pm-salon-pult-root.mode-sheet {
  max-height: 85vh;
}

.pm-salon-pult-root.mode-kiosk-panel {
  background: var(--panel, #ffffff);
  color: var(--text, #0f172a);
  border-right: 1px solid var(--line, #e2e8f0);
  height: 100%;
  min-height: 0;
}

.pm-pult-locked-card {
  padding: 32px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.pm-pult-lock-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pm-pult-pin-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 280px;
}

.pm-pult-pin-input {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  outline: none;
}

.pm-pult-pin-submit {
  background: #10b981;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 10px;
  font-weight: 700;
  cursor: pointer;
}

.pm-pult-pin-err {
  color: #ef4444;
  font-size: 12px;
}

.pm-pult-content-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mode-kiosk-panel .pm-pult-content-scroll {
  overflow: auto;
  scrollbar-width: none;
  padding: 10px;
  gap: 10px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mode-kiosk-panel .pm-pult-card.staff-grid-card {
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.mode-kiosk-panel .pm-pult-staff-list {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
}

.mode-kiosk-panel .pm-pult-staff-card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 12px;
}

.mode-kiosk-panel .pm-pult-card.theme-card {
  flex: 0 0 auto;
  min-height: 0;
}

.pm-pult-dock {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.mode-kiosk-panel .pm-pult-dock {
  grid-template-columns: 1fr;
  align-items: stretch;
  margin-top: auto;
}

.mode-kiosk-panel .pm-pult-card.theme-card .pm-brand-spot {
  display: none;
}

.mode-kiosk-panel .pm-pult-staff-card {
  padding: 8px 10px;
}

.mode-kiosk-panel .pm-pult-staff-photo {
  width: 28px;
  height: 28px;
}

.mode-kiosk-panel .pm-pbtn {
  padding: 5px 2px;
  font-size: 9.5px;
}

.mode-kiosk-panel .pm-pult-content-scroll::-webkit-scrollbar {
  display: none;
  width: 0;
}

.pm-pult-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.mode-kiosk-panel .pm-pult-topbar {
  border-bottom-color: var(--pm-theme-card-border, #d9dbe3);
}

.pm-pult-quick-stats {
  display: flex;
  gap: 6px;
}

.pm-pult-stat-badge {
  background: rgba(0, 0, 0, 0.04);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
}

.mode-kiosk-panel .pm-pult-stat-badge {
  background: var(--pm-theme-card-bg, #fffdf9);
  color: var(--pm-theme-text-muted, #747b8b);
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
  min-width: 72px;
  text-align: center;
  padding: 8px 10px;
  border-radius: 10px;
}

.mode-kiosk-panel .pm-pult-btn-action {
  background: var(--pm-theme-card-bg, #fffdf9);
  border-color: var(--pm-theme-card-border, #d9dbe3);
  color: var(--pm-theme-text-main, #101116);
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 10px;
}

.mode-kiosk-panel .pm-pult-staff-card {
  background: var(--pm-theme-card-bg, #fffdf9);
  border-color: var(--pm-theme-card-border, #d9dbe3);
  padding: 12px;
  border-radius: 12px;
}

.mode-kiosk-panel .pm-pbtn {
  background: var(--pm-theme-bg, #f7f4ec);
  border-color: var(--pm-theme-card-border, #d9dbe3);
  color: var(--pm-theme-text-muted, #747b8b);
  min-height: 44px;
  border-radius: 8px;
}

.mode-kiosk-panel .pm-pult-queue-btns .pm-pbtn-queue {
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 10px;
}

.pm-pult-stat-badge strong {
  color: var(--pm-theme-primary, #4b5fff);
}

.pm-pult-topbar-actions {
  display: flex;
  gap: 6px;
}

.pm-pult-btn-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  color: #0f172a;
}

.mode-kiosk-panel .pm-pult-btn-action {
  background: var(--pm-theme-card-bg, #fffdf9);
  border-color: var(--pm-theme-card-border, #d9dbe3);
  color: var(--pm-theme-text-main, #101116);
}

.pm-pult-btn-action.ai {
  background: #4b5fff;
  color: #ffffff;
  border: none;
}

.pm-pult-card {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  padding: 12px;
}

.mode-kiosk-panel .pm-pult-card {
  background: var(--pm-theme-card-bg, #fffdf9);
  border-color: var(--pm-theme-card-border, #d9dbe3);
}

.pm-pult-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.pm-pult-card-title h4 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
}

.pm-pult-conn-pill {
  font-size: 10px;
  color: var(--pm-theme-primary, #4b5fff);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pm-pult-requests-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pm-pult-request-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  border: 1px solid #fecaca;
  padding: 8px 10px;
  border-radius: 8px;
}

.mode-kiosk-panel .pm-pult-request-item {
  background: #0f172a;
  border-color: #7f1d1d;
}

.pm-pult-req-info strong {
  display: block;
  font-size: 12px;
}

.pm-pult-req-info span {
  font-size: 11px;
  color: #64748b;
}

.pm-pult-req-actions {
  display: flex;
  gap: 4px;
}

.pm-pult-req-btn {
  border: none;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.pm-pult-req-btn.accept { background: #10b981; color: #ffffff; }
.pm-pult-req-btn.decline { background: #ef4444; color: #ffffff; }

.pm-pult-staff-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pm-pult-staff-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px;
}

.mode-kiosk-panel .pm-pult-staff-card {
  background: var(--pm-theme-card-bg, #fffdf9);
  border-color: var(--pm-theme-card-border, #d9dbe3);
}

.pm-pult-staff-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 8px;
}

.pm-pult-staff-photo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #f7f4ec;
}

.pm-pult-staff-name-wrap {
  flex: 1;
  min-width: 0;
}

.pm-pult-staff-name-wrap strong {
  font-size: 13px;
  margin-right: 6px;
  color: var(--pm-theme-text-main, #0f172a);
}

.pm-pult-chair-tag {
  font-size: 10px;
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 4px;
  color: #475569;
  cursor: pointer;
}

.mode-kiosk-panel .pm-pult-chair-tag {
  background: var(--pm-theme-badge-bg, #e7e8fa);
  color: var(--pm-theme-badge-text, #4b5fff);
}

.pm-pult-status-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
}

.pm-pult-status-badge.free { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.pm-pult-status-badge.pause { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.pm-pult-status-badge.busy { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.pm-pult-status-badge.auto { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.pm-pult-status-badge.closed { background: rgba(100, 116, 139, 0.18); color: #64748b; }

.pm-pult-btn-matrix {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.pm-pbtn {
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  padding: 6px 2px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  color: #64748b;
  transition: all 0.15s;
}

.mode-kiosk-panel .pm-pbtn {
  background: var(--pm-theme-bg, #f7f4ec);
  border-color: var(--pm-theme-card-border, #d9dbe3);
  color: var(--pm-theme-text-muted, #747b8b);
}

.pm-pbtn.free.active { background: #21a66b; color: #ffffff; border-color: #21a66b; }
.pm-pbtn.pause.active { background: #e2a11a; color: #ffffff; border-color: #e2a11a; }
.pm-pbtn.busy.active { background: #f46870; color: #ffffff; border-color: #f46870; }
.pm-pbtn.auto.active { background: #4b5fff; color: #ffffff; border-color: #4b5fff; }

.pm-pult-queue-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pm-pult-queue-counter {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pm-pult-queue-num {
  font-size: 20px;
  font-weight: 900;
  color: #3b82f6;
}

.pm-pult-queue-btns {
  display: flex;
  gap: 6px;
}

.pm-pbtn-queue {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.mode-kiosk-panel .pm-pbtn-queue {
  background: var(--pm-theme-card-bg, #fffdf9);
  border-color: var(--pm-theme-card-border, #d9dbe3);
  color: var(--pm-theme-text-main, #101116);
}

.pm-pult-theme-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.pm-pult-card.theme-card .pm-brand-spot {
  margin-top: 8px;
  flex: 1 1 auto;
  min-height: 160px;
}

.mode-kiosk-panel .pm-pult-card.theme-card .pm-brand-spot {
  min-height: 52px;
}

.pm-pult-theme-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.mode-kiosk-panel .pm-pult-theme-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.mode-kiosk-panel .pm-pult-theme-chip {
  background: var(--pm-theme-bg, #f7f4ec);
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
  color: var(--pm-theme-text-main, #101116);
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  min-height: 72px;
  padding: 10px 10px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.mode-kiosk-panel .pm-pult-theme-dot {
  width: 16px;
  height: 16px;
}

.pm-pult-theme-chip.active {
  border-color: var(--pm-theme-primary, #4b5fff);
  background: var(--pm-theme-badge-bg, rgba(75, 95, 255, 0.1));
}

.pm-pult-theme-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.mode-kiosk-panel .pm-pult-staff-card {
  padding: 10px 12px;
}

.mode-kiosk-panel .pm-pult-staff-photo {
  width: 32px;
  height: 32px;
}

.mode-kiosk-panel .pm-pbtn {
  padding: 7px 4px;
  font-size: 10.5px;
  min-height: 36px;
}

.mode-kiosk-panel .pm-pult-queue-btns .pm-pbtn-queue {
  min-height: 32px;
}
.pm-signal-chain {
  background: var(--pm-theme-card-bg, #fffdf9);
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
  border-radius: var(--pm-theme-radius, 14px);
  padding: 14px 16px 16px;
  margin: 4px 0 0;
}

.pm-signal-chain-kicker {
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pm-theme-badge-text, #4b5fff);
}

.pm-signal-chain-split {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--pm-theme-text-main, #101116);
}

.pm-signal-chain-split b {
  font-weight: 700;
}

.pm-signal-chain-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

.pm-signal-chain-steps li {
  font-size: 11px;
  font-weight: 700;
  color: var(--pm-theme-text-main, #101116);
  background: var(--pm-theme-bg, #f7f4ec);
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
  border-radius: 999px;
  padding: 5px 10px;
}

.pm-signal-chain-steps li:not(:last-child)::after {
  content: "→";
  margin-left: 8px;
  color: var(--pm-theme-badge-text, #4b5fff);
  font-weight: 800;
}

.pm-signal-chain-code {
  margin: 0;
  padding: 12px 14px;
  overflow-x: auto;
  font-size: 11px;
  line-height: 1.5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #101116;
  background: #f7f4ec;
  border: 1px solid #d9dbe3;
  border-radius: 10px;
  white-space: pre;
}
.pm-sensor-diag-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 16px;
}

.pm-sensor-diag-dialog {
  background: var(--pm-theme-card-bg, #fffdf9);
  color: var(--pm-theme-text-main, #101116);
  width: 100%;
  max-width: 520px;
  border-radius: var(--pm-theme-radius, 16px);
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.pm-sensor-diag-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: var(--pm-theme-bg, #f7f4ec);
  border-bottom: 1px solid var(--pm-theme-card-border, #d9dbe3);
}

.pm-sensor-diag-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pm-sensor-diag-title h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--pm-theme-font-heading, Fraunces, Georgia, serif);
  color: var(--pm-theme-text-main, #101116);
}

.pm-sensor-diag-title span {
  font-size: 12px;
  color: var(--pm-theme-text-muted, #747b8b);
}

.pm-sensor-diag-close {
  background: none;
  border: none;
  color: var(--pm-theme-text-muted, #747b8b);
  cursor: pointer;
  padding: 4px;
}

.pm-sensor-diag-close:hover {
  color: var(--pm-theme-text-main, #101116);
}

.pm-sensor-diag-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pm-sensor-diag-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.pm-diag-card {
  background: var(--pm-theme-bg, #f7f4ec);
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pm-diag-label {
  font-size: 11px;
  color: var(--pm-theme-text-muted, #747b8b);
  font-weight: 600;
}

.pm-diag-val {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.pm-diag-val.ok {
  color: #34d399;
}

.pm-diag-val.warn {
  color: #fbbf24;
}

.pm-diag-val.occupied {
  color: #ef4444;
}

.pm-diag-val.vacant {
  color: #10b981;
}

.pm-sensor-sim-box {
  background: var(--pm-theme-badge-bg, rgba(75, 95, 255, 0.1));
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pm-sim-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pm-sim-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--pm-theme-text-main, #101116);
}

.pm-sensor-sim-box p {
  margin: 0;
  font-size: 12px;
  color: var(--pm-theme-text-muted, #747b8b);
  line-height: 1.4;
}

.pm-sim-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s;
}

.pm-sim-action-btn.make-busy {
  background: #ef4444;
  color: #ffffff;
}

.pm-sim-action-btn.make-busy:hover {
  background: #dc2626;
}

.pm-sim-action-btn.make-free {
  background: #10b981;
  color: #ffffff;
}

.pm-sim-action-btn.make-free:hover {
  background: #059669;
}

.pm-sensor-ping-box {
  background: var(--pm-theme-bg, #f7f4ec);
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pm-ping-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pm-ping-row strong {
  font-size: 13px;
  color: var(--pm-theme-text-main, #101116);
}

.pm-ping-row p {
  margin: 2px 0 0 0;
  font-size: 11px;
  color: var(--pm-theme-text-muted, #747b8b);
}

.pm-ping-btn {
  background: var(--pm-theme-cta-bg, #4b5fff);
  color: var(--pm-theme-cta-text, #ffffff);
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.pm-ping-btn:hover {
  background: var(--pm-theme-primary-hover, #3a4ae8);
}

.pm-ping-result {
  font-size: 12px;
  font-weight: 700;
  color: var(--pm-theme-text-main, #101116);
  background: var(--pm-theme-badge-bg, rgba(75, 95, 255, 0.1));
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
}

.pm-sensor-rule-card {
  background: var(--pm-theme-bg, #f7f4ec);
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 11px;
  color: var(--pm-theme-text-muted, #747b8b);
  line-height: 1.35;
}

.pm-sensor-rule-card strong {
  color: var(--pm-theme-text-main, #101116);
}

.sgd {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 100%;
  min-height: 0;
  color: var(--pm-theme-text-main, #101116);
  font-family: Inter, system-ui, sans-serif;
  background: var(--pm-theme-card-bg, #fffdf9);
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
}

.sgd-pane {
  flex: 1;
  height: 100%;
  min-height: 0;
  border-radius: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(188px, 228px);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  padding: 12px 14px;
}

.sgd-tv,
.sgd-tv *,
.pm-kiosk-tv-maximize-overlay,
.pm-kiosk-tv-maximize-overlay * {
  scrollbar-width: none;
}

.sgd-tv::-webkit-scrollbar,
.sgd-tv *::-webkit-scrollbar,
.pm-kiosk-tv-maximize-overlay::-webkit-scrollbar,
.pm-kiosk-tv-maximize-overlay *::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.sgd-tv {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0;
  border: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 30%);
  gap: 12px;
  padding: 14px;
  background:
    radial-gradient(1200px 640px at 18% -10%, rgba(75, 95, 255, 0.08), transparent 55%),
    var(--pm-theme-bg, #efeae0);
}

.sgd-stage {
  position: relative;
  isolation: isolate;
  min-height: 0;
  border-radius: 28px;
  overflow: hidden;
  background: #121018;
  box-shadow: 0 24px 60px rgba(16, 17, 22, 0.16);
}

.sgd-stage:has(video),
.sgd-stage:has(iframe) {
  background: #101116;
}

.sgd-stage-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(75, 95, 255, 0.22), transparent 42%),
    radial-gradient(90% 70% at 100% 100%, rgba(196, 165, 116, 0.18), transparent 46%),
    #121018;
}

.sgd-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.7;
  animation: sgd-drift 22s ease-in-out infinite;
}

.sgd-orb-a {
  width: 58%;
  height: 72%;
  left: -16%;
  top: -28%;
  background: #4b5fff;
}

.sgd-orb-b {
  width: 48%;
  height: 56%;
  right: -18%;
  bottom: -22%;
  background: #d4b896;
  animation-delay: -8s;
}

.sgd-orb-c {
  width: 34%;
  height: 40%;
  left: 38%;
  top: 28%;
  background: #fffdf9;
  opacity: 0.12;
  animation-delay: -14s;
}

@keyframes sgd-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(4%, 3%, 0) scale(1.08);
  }
}

.sgd-stage:has(video) .sgd-stage-atmosphere,
.sgd-tv.is-video-on .sgd-stage-atmosphere {
  opacity: 0;
  pointer-events: none;
}

.sgd-tv.is-video-on .sgd-stage {
  background: transparent;
  box-shadow: none;
}

.sgd-stage-live {
  position: absolute;
  z-index: 4;
  left: 16px;
  bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  max-width: calc(100% - 160px);
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(16, 17, 22, 0.48);
  backdrop-filter: blur(12px);
  color: rgba(255, 253, 249, 0.92);
  pointer-events: none;
}

.sgd-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #94a3b8;
  flex-shrink: 0;
}

.sgd-live-dot.is-on {
  background: #34d399;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.65);
  animation: sgd-ping 2.4s ease-out infinite;
}

@keyframes sgd-ping {
  0% {
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(52, 211, 153, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);
  }
}

.sgd-stage-live time {
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

.sgd-stage-live em {
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 253, 249, 0.78);
}

.sgd-live-queue,
.sgd-live-free {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255, 253, 249, 0.88);
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.1);
}

.sgd-pickme {
  position: absolute;
  z-index: 4;
  right: 14px;
  bottom: 14px;
  pointer-events: none;
  display: flex;
  align-items: center;
  padding: 6px 10px 6px 8px;
  border-radius: 999px;
  background: rgba(16, 17, 22, 0.48);
  backdrop-filter: blur(12px);
}

.sgd-pickme .pickme-global-logo {
  pointer-events: none;
}

.sgd-pickme .pickme-global-logo strong {
  font-size: 16px;
  color: #fffdf9;
}

.sgd-tv .sgd-logo {
  display: none;
}

.sgd-tv .sgd-stage-brand {
  background: linear-gradient(90deg, rgba(16, 17, 22, 0.42) 0%, transparent 72%);
  padding: 4px 28px 16px 0;
}

@media (prefers-reduced-motion: reduce) {
  .sgd-orb,
  .sgd-live-dot.is-on {
    animation: none;
  }
}

.sgd-stage-brand {
  position: absolute;
  z-index: 3;
  top: 22px;
  left: 24px;
  right: 24px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  pointer-events: none;
}

.sgd-tv .sgd-logo {
  width: 64px;
  height: 64px;
  border-color: rgba(255, 253, 249, 0.35);
}

.sgd-tv .sgd-nameblock h1 {
  color: #fffdf9;
  font-size: clamp(34px, 4.4vw, 64px);
  text-shadow: 0 10px 28px rgba(16, 17, 22, 0.35);
}

.sgd-tv .sgd-tagline {
  color: rgba(255, 253, 249, 0.82);
  font-size: 16px;
}

.sgd-tv .sgd-media {
  position: relative;
  z-index: 2;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
}

.sgd-rail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

.sgd-tv .sgd-moment {
  margin: 0;
  padding: 18px 20px 16px;
  border-radius: 22px;
  background: var(--pm-theme-card-bg, #fffdf9);
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
}

.sgd-tv .sgd-moment strong {
  font-size: clamp(40px, 5vw, 64px);
}

.sgd-tv .sgd-moment span {
  font-size: 14px;
}

.sgd-queue-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 10px;
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--pm-theme-text-main, #101116);
}

.sgd-queue-line b {
  font-family: var(--pm-theme-font-heading, Fraunces, Georgia, serif);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--pm-theme-primary, #4b5fff);
}

.sgd-queue-line em {
  font-style: normal;
  font-weight: 600;
  color: var(--pm-theme-text-muted, #747b8b);
  margin-left: auto;
}

.sgd-rail-mark {
  display: none;
}

.sgd-rail-mid {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sgd-tv .sgd-masters {
  grid-column: auto;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  gap: 8px;
}

.sgd-rail-mid.is-full .sgd-masters {
  flex: 1 1 0;
  overflow: hidden;
}

.sgd-rail-mid .pm-brand-spot {
  flex: 1 1 72px;
  min-height: 88px;
}

.sgd-rail-fill {
  flex: 1 1 80px;
  min-height: 96px;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
  background:
    radial-gradient(70% 80% at 18% 0%, rgba(75, 95, 255, 0.16), transparent 58%),
    linear-gradient(180deg, #f4f1ea 0%, #ece7dc 100%);
}

.sgd-fill-scene {
  position: absolute;
  inset: 10px 12px 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.sgd-fill-lights {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.sgd-fill-lights i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #c7d2fe 42%, #4b5fff 100%);
  box-shadow: 0 0 10px rgba(75, 95, 255, 0.45);
}

.sgd-fill-chair {
  width: 54px;
  height: 42px;
  position: relative;
}

.sgd-fill-chair::before,
.sgd-fill-chair::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: #4b5fff;
}

.sgd-fill-chair::before {
  top: 0;
  width: 36px;
  height: 18px;
  border-radius: 16px 16px 6px 6px;
  opacity: 0.55;
}

.sgd-fill-chair::after {
  top: 16px;
  width: 44px;
  height: 10px;
  border-radius: 8px;
  opacity: 0.72;
  box-shadow: -12px 16px 0 -6px #4b5fff, 12px 16px 0 -6px #4b5fff;
}

.sgd-rail-fill p {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  margin: 0;
  font-family: Fraunces, Georgia, serif;
  font-size: 13px;
  font-style: italic;
  color: #5c6578;
  text-align: center;
}

.sgd-tv .sgd-master {
  grid-template-columns: 72px 1fr auto;
  padding: 14px 16px;
  background: var(--pm-theme-card-bg, #fffdf9);
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
  border-radius: 20px;
}

.sgd-tv .sgd-master img {
  width: 72px;
  height: 72px;
}

.sgd-tv .sgd-master b {
  font-size: 18px;
}

.sgd-tv .sgd-master small {
  font-size: 13px;
}

.sgd-tv .sgd-master em {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(75, 95, 255, 0.1);
}

.sgd-tv .sgd-master.is-busy em,
.sgd-tv .sgd-master.is-belegt em {
  background: rgba(244, 104, 112, 0.12);
}

.sgd-tv .sgd-master.is-free em,
.sgd-tv .sgd-master.is-frei em,
.sgd-tv .sgd-master.is-auto em {
  color: #16a34a;
  background: rgba(34, 197, 94, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  .sgd-master.is-open-seat .sgd-frei-gleam {
    animation: none;
    display: none;
  }
}

.sgd-pane .sgd-brand {
  grid-column: 1;
  grid-row: 1;
}

.sgd-pane .sgd-media {
  grid-column: 1;
  grid-row: 2;
}

.sgd-brand {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px 18px;
  min-width: 0;
}

.sgd-logo {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 14px;
  background: var(--pm-theme-card-bg, #fffdf9);
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
}

.sgd-nameblock {
  min-width: 0;
  flex: 1 1 180px;
}

.sgd-nameblock h1 {
  margin: 0;
  font-family: var(--pm-theme-font-heading, Fraunces, Georgia, serif);
  font-weight: 600;
  font-size: clamp(26px, 3.2vw, 42px);
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--pm-theme-text-main, #101116);
}

.sgd-pane .sgd-nameblock h1 {
  font-size: clamp(20px, 2.2vw, 28px);
}

.sgd-tagline {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--pm-theme-text-muted, #747b8b);
}

.sgd-moment {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: auto;
}

.sgd-moment strong {
  font-size: clamp(28px, 3.6vw, 48px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  font-family: var(--pm-theme-font-heading, Fraunces, Georgia, serif);
  font-weight: 500;
  color: var(--pm-theme-text-main, #101116);
}

.sgd-moment span {
  font-size: 13px;
  font-weight: 600;
  color: var(--pm-theme-primary, #4b5fff);
}

.sgd-masters {
  grid-column: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  align-content: start;
}

.sgd-master {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 12px;
  border-radius: 16px;
  background: var(--pm-theme-bg, #f7f4ec);
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
}

.sgd-master img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--pm-theme-card-border, #efeae0);
}

.sgd-master b {
  display: block;
  font-size: 14px;
  color: var(--pm-theme-text-main, #101116);
}

.sgd-master small {
  font-size: 12px;
  color: var(--pm-theme-text-muted, #747b8b);
}

.sgd-master em {
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pm-theme-text-muted, #747b8b);
}

.sgd-master.is-free em,
.sgd-master.is-frei em,
.sgd-master.is-auto em {
  color: #16a34a;
}

.sgd-master.is-open-seat {
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.22);
}

.sgd-frei-gleam {
  display: none;
}

.sgd-master.is-open-seat .sgd-frei-gleam {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    108deg,
    transparent 36%,
    rgba(74, 222, 128, 0.0) 42%,
    rgba(187, 247, 208, 0.55) 50%,
    rgba(34, 197, 94, 0.18) 54%,
    transparent 62%
  );
  transform: translateX(-140%);
  animation: sgd-frei-gleam 20s ease-in-out infinite;
}

.sgd-master.is-open-seat:nth-child(2) .sgd-frei-gleam {
  animation-delay: 3s;
}

.sgd-master.is-open-seat:nth-child(3) .sgd-frei-gleam {
  animation-delay: 6s;
}

.sgd-master.is-open-seat:nth-child(4) .sgd-frei-gleam {
  animation-delay: 9s;
}

@keyframes sgd-frei-gleam {
  0%,
  86% {
    transform: translateX(-140%);
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
  96% {
    transform: translateX(140%);
    opacity: 0.9;
  }
  100% {
    transform: translateX(140%);
    opacity: 0;
  }
}

.sgd-master.is-busy em,
.sgd-master.is-belegt em {
  color: #f46870;
}

.sgd-book {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: stretch;
  justify-self: stretch;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 12px;
  background: var(--pm-theme-bg, #f7f4ec);
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
  border-radius: 18px;
  min-width: 0;
  min-height: 0;
  gap: 10px;
}

.sgd-book-foot {
  margin-top: 0;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  gap: 4px;
}

.sgd-worker-cams {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  gap: 8px;
}

.sgd-worker-cams .sgd-cam,
.sgd-worker-cams .pm-cam-sensor.is-tile {
  flex: 1 1 0;
  min-height: 0;
}

.sgd-cam-sensor-state {
  position: absolute;
  left: 10px;
  bottom: 8px;
  z-index: 2;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.sgd-book:has(.sgd-worker-cams) {
  padding: 8px;
  gap: 8px;
}

.sgd-book:has(.sgd-worker-cams) .sgd-qr {
  width: min(120px, 72%);
  height: auto;
  margin: 4px auto 0;
}

.sgd-book:has(.sgd-worker-cams) .sgd-book-lead,
.sgd-book:has(.sgd-worker-cams) .sgd-book-steps {
  display: none;
}

.sgd-cam {
  position: relative;
  flex: 1 1 120px;
  min-height: 120px;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(80% 70% at 20% 0%, rgba(75, 95, 255, 0.28), transparent 55%),
    #101116;
  border: 1px solid color-mix(in srgb, var(--pm-theme-primary, #4b5fff) 28%, transparent);
}

.sgd-cam.is-live {
  border-color: color-mix(in srgb, #3ecf7a 62%, transparent);
  box-shadow: inset 0 0 48px rgba(46, 180, 92, 0.16);
}

.sgd-cam.is-live img {
  filter: saturate(1.05) contrast(1.04);
}

.sgd-cam video,
.sgd-cam img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #101116;
  border: 0;
  transform: translateZ(0);
}

.sgd-cam-host {
  display: flex;
  align-items: center;
  gap: 6px;
  width: min(100%, 180px);
  margin-top: 4px;
}

.sgd-cam-host span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 253, 249, 0.5);
}

.sgd-cam-host input {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(255, 253, 249, 0.18);
  background: rgba(16, 17, 22, 0.55);
  color: #fffdf9;
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 11px;
}

.sgd-cam-idle {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 10px 8px 54px;
  text-align: center;
  color: #fffdf9;
  z-index: 3;
}

.sgd-cam.is-compact .sgd-cam-idle,
.sgd-cam.is-slot .sgd-cam-idle {
  padding: 8px 8px 54px;
  gap: 4px;
}

.sgd-cam.is-compact .sgd-cam-idle b,
.sgd-cam.is-slot .sgd-cam-idle b {
  font-size: 13px;
}

.sgd-cam.is-compact .sgd-cam-host {
  margin-top: 2px;
}

.sgd-cam.is-compact .sgd-cam-host input {
  padding: 4px 6px;
  font-size: 10px;
}

.sgd-cam.is-compact .sgd-cam-btn {
  margin-top: 2px;
  padding: 5px 8px;
  font-size: 10px;
}

.sgd-cam-id {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 4px;
  min-width: 0;
}

.sgd-cam-id b {
  font-size: 13px;
  line-height: 1.15;
}

.sgd-cam-id small,
.sgd-cam-id em {
  font-size: 10px;
  font-style: normal;
  color: rgba(255, 253, 249, 0.7);
}

.sgd-cam-scan {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: min(100%, 220px);
  min-height: 56px;
  border: 0;
  border-radius: 14px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #6d7cff 0%, #4b5fff 55%, #3a4ae6 100%);
  box-shadow: 0 8px 20px rgba(75, 95, 255, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.sgd-cam-scan:disabled {
  opacity: 0.72;
  cursor: wait;
}

.sgd-cam-spin {
  animation: sgd-cam-spin 0.8s linear infinite;
}

@keyframes sgd-cam-spin {
  to {
    transform: rotate(360deg);
  }
}

.sgd-cam-kicker {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #93c5fd;
}

.sgd-cam-idle b {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.sgd-cam-idle small,
.sgd-cam-idle em {
  font-size: 10px;
  font-style: normal;
  color: rgba(255, 253, 249, 0.62);
}

.sgd-cam-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  border: 0;
  border-radius: 999px;
  padding: 7px 12px;
  background: #4b5fff;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.sgd-cam-err {
  margin: 4px 0 0;
  font-size: 10px;
  color: #fca5a5;
}

.sgd-cam-shade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 58%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(10, 10, 14, 0.82) 78%);
}

.sgd-cam-worker {
  position: absolute;
  left: 8px;
  right: 8px;
  top: auto;
  bottom: 26px;
  z-index: 2;
  text-align: center;
  pointer-events: none;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(15px, 1.6vw, 22px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #fffdf9;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}

.sgd-cam-brand {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  text-align: center;
  pointer-events: none;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 253, 249, 0.74);
}

.sgd-cam-ask {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 52px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(16, 17, 22, 0.78);
  color: #fffdf9;
}

.sgd-cam-ask > span {
  font-size: 11px;
  font-weight: 800;
}

.sgd-cam-ask-row {
  display: flex;
  gap: 6px;
}

.sgd-cam-yes,
.sgd-cam-no {
  flex: 1;
  border: 0;
  border-radius: 8px;
  padding: 7px 8px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.sgd-cam-yes {
  background: #16a34a;
  color: #fff;
}

.sgd-cam-no {
  background: #3d4452;
  color: #fff;
}

.sgd-cam-livebar {
  position: absolute;
  left: 8px;
  top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(16, 17, 22, 0.62);
  color: #bbf7d0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sgd-cam-livebar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
}

.sgd-cam-livebar button {
  margin-left: 4px;
  border: 0;
  background: transparent;
  color: rgba(255, 253, 249, 0.8);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.sgd-book-mark {
  margin-top: 8px;
  padding-top: 8px;
  display: flex;
  justify-content: center;
  opacity: 1;
}

.sgd-book .pm-brand-spot {
  margin-top: 10px;
  flex: 0 0 auto;
}

.sgd-book-mark .pickme-global-logo {
  pointer-events: none;
}

.sgd-book-mark .pickme-global-logo strong {
  font-size: 16px;
}

.sgd-qr {
  width: 124px;
  height: 124px;
  padding: 6px;
  margin: 10px auto 0;
  background: #f6ead8;
  border-radius: 12px;
  display: block;
}

.sgd-book-kicker {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pm-theme-primary, #4b5fff);
}

.sgd-book-salon {
  display: block;
  margin-top: 4px;
  font-family: var(--pm-theme-font-heading, Fraunces, Georgia, serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--pm-theme-text-main, #101116);
  line-height: 1.2;
}

.sgd-book-lead {
  margin: 10px 0 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pm-theme-text-main, #101116);
}

.sgd-book-steps {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

.sgd-book-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--pm-theme-text-main, #101116);
  line-height: 1.25;
}

.sgd-book-steps li::before {
  content: counter(step);
  counter-increment: step;
  flex: 0 0 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--pm-theme-primary, #4b5fff);
  color: var(--pm-theme-cta-text, #fff);
  font-size: 10px;
  font-weight: 800;
  display: grid;
  place-items: center;
}

.sgd-book-steps {
  counter-reset: step;
}

.sgd-book-url {
  display: block;
  margin-top: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--pm-theme-text-muted, #747b8b);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.sgd-tv .sgd-book {
  grid-column: auto;
  grid-row: auto;
  flex: 0 0 auto;
  justify-self: stretch;
  align-self: stretch;
  text-align: center;
  padding: 12px;
  background: var(--pm-theme-card-bg, #fffdf9);
  border-radius: 18px;
}

.sgd-tv .sgd-cam {
  flex: 1 1 90px;
  min-height: 90px;
}

.sgd-rail-mid .sgd-cam {
  flex: 1 1 88px;
}

.sgd-tv .sgd-qr {
  width: min(140px, 100%);
  height: auto;
  aspect-ratio: 1;
}

.sgd-tv .sgd-book-salon {
  font-size: 18px;
}

.sgd-tv .sgd-book-lead {
  font-size: 11px;
}

.sgd-tv .sgd-book-steps li {
  font-size: 12px;
}

.sgd-media {
  grid-column: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
  min-width: 0;
  height: 100%;
}

.sgd-pane .sgd-media {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
}

.sgd-pane .sgd-media > * {
  min-height: 0;
  max-height: 100%;
  height: 100%;
  overflow: hidden;
}

.pm-lounge-stage {
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(110px, 20%);
  gap: 8px;
  min-height: 0;
  height: 100%;
  container-type: size;
}

.pm-lounge-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
}

.pm-sec-strip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}

.pm-sec-cams {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: 8px;
  flex: 1;
  min-height: 0;
}

.pm-sec-cams.is-two {
  grid-template-columns: 1fr 1fr;
}

.pm-sec-cams .sgd-cam {
  min-height: 0;
  height: 100%;
  flex: none;
}

.pm-sec-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  border-radius: 16px;
  border: 1px dashed color-mix(in srgb, var(--pm-theme-primary, #4b5fff) 45%, transparent);
  background: color-mix(in srgb, var(--pm-theme-card-bg, #101116) 88%, transparent);
  color: var(--pm-theme-text-muted, #a8adb8);
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pm-sec-add:hover {
  color: var(--pm-theme-text-main, #fffdf9);
  border-color: var(--pm-theme-primary, #4b5fff);
}

.sgd-sec-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 168px;
  height: 100%;
}

.sgd-sec-armed {
  border: 1px solid rgba(16, 185, 129, 0.35);
  background: rgba(6, 24, 18, 0.72);
  color: #ecfdf5;
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 12px;
}

.sgd-sec-armed-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
}

.sgd-sec-scharf {
  margin-left: auto;
  background: #10b981;
  color: #042f22;
  font-weight: 800;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 10px;
}

.sgd-sec-armed.is-alert {
  border-color: rgba(248, 113, 113, 0.55);
  background: rgba(80, 12, 18, 0.82);
}

.sgd-sec-deter {
  position: fixed;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  z-index: 90;
  min-width: min(420px, 86vw);
  text-align: center;
  padding: 18px 22px;
  border-radius: 16px;
  background: #7f1d1d;
  color: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  animation: sgd-sec-pulse 0.9s ease-in-out infinite;
}

.sgd-sec-deter strong {
  display: block;
  letter-spacing: 0.14em;
  font-size: 12px;
}

.sgd-sec-deter b {
  display: block;
  margin: 8px 0 6px;
  font-size: 26px;
}

.sgd-sec-deter span {
  font-size: 13px;
  opacity: 0.9;
}

@keyframes sgd-sec-pulse {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.18);
  }
}

.sgd-sec-tick {
  opacity: 0.65;
  font-size: 10px !important;
}

.sgd-sec-offline {
  margin-top: 6px;
  color: #fbbf24;
  font-weight: 600;
}

.sgd-sec-motion {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(239, 68, 68, 0.16);
  border: 1px solid rgba(248, 113, 113, 0.35);
  border-radius: 10px;
  padding: 8px;
}

.sgd-sec-motion b {
  display: block;
}

.sgd-sec-motion span {
  color: #fecaca;
}

.sgd-sec-motion button {
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
  border-radius: 8px;
  background: var(--pm-theme-card-bg, #fffdf9);
  color: var(--pm-theme-text-main, #101116);
  font-weight: 800;
  font-size: 10.5px;
  padding: 7px 10px;
  cursor: pointer;
}

.sgd-sec-snap-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, 0.55);
  display: grid;
  place-items: center;
  padding: 24px;
}

.sgd-sec-snap-card {
  width: min(520px, 92vw);
  background: #0b0f14;
  border-radius: 14px;
  overflow: hidden;
  color: #fff;
}

.sgd-sec-snap-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}

.sgd-sec-snap-bar span {
  margin-right: auto;
  font-weight: 700;
}

.sgd-sec-snap-card img {
  width: 100%;
  display: block;
  background: #111;
}

.sgd-sec-snap-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 8px 10px 10px;
}

.sgd-sec-save,
.sgd-sec-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 800;
  padding: 7px 10px;
  cursor: pointer;
}

.sgd-sec-save {
  background: #16a34a;
  color: #ffffff;
  border-color: #15803d;
}

.sgd-sec-del {
  background: #dc2626;
  color: #ffffff;
  border-color: #b91c1c;
}

.sgd-sec-kept {
  display: grid;
  gap: 6px;
}

.sgd-sec-kept-card {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(16, 185, 129, 0.35);
  background: rgba(6, 24, 18, 0.8);
  color: #ecfdf5;
  border-radius: 10px;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  padding: 0;
}

.sgd-sec-kept-card img {
  width: 72px;
  height: 54px;
  object-fit: cover;
  display: block;
}

.sgd-sec-kept-card span {
  font-size: 11px;
  font-weight: 700;
}

.sgd-cam-ports {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pm-theme-text-muted, #8b93a6);
}

.sgd-cam-ports input {
  width: 78px;
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
  background: var(--pm-theme-card-bg, #101116);
  color: var(--pm-theme-text-main, #fffdf9);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700;
}

.sgd-cam-bay {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-height: 168px;
  flex: 1;
  height: auto;
}

.sgd-cam-bay .sgd-cam {
  flex: none;
  min-height: 160px;
  height: 100%;
}

.sgd-cam-bay .sgd-cam-scan,
.sgd-worker-cams .sgd-cam-scan {
  flex-direction: row;
  width: auto;
  max-width: calc(100% - 8px);
  min-height: 40px;
  padding: 8px 14px;
  gap: 8px;
  border-radius: 999px;
  font-size: 12px;
}

.sgd-cam-bay .sgd-cam-scan svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.sgd-powered {
  display: none;
}

@media (max-width: 1100px) {
  .sgd-pane {
    padding: 10px;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) minmax(168px, 24%);
  }

  .sgd-tv {
    padding: 10px;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) minmax(168px, 28%);
    grid-template-rows: minmax(0, 1fr);
  }

  .sgd-stage {
    min-height: 0;
  }

  .sgd-rail {
    height: 100%;
    overflow: hidden;
  }

  .sgd-nameblock h1 {
    font-size: clamp(18px, 2.6vw, 32px);
  }

  .sgd-moment strong {
    font-size: clamp(22px, 3vw, 40px);
  }

  .sgd-tv .sgd-moment {
    padding: 10px 12px 8px;
    border-radius: 16px;
  }

  .sgd-tv .sgd-master {
    grid-template-columns: 44px 1fr auto;
    padding: 8px 10px;
  }

  .sgd-tv .sgd-master img {
    width: 44px;
    height: 44px;
  }

  .sgd-qr,
  .sgd-tv .sgd-qr {
    width: 92px;
    height: 92px;
    margin: 8px auto 0;
  }

  .sgd-book {
    padding: 10px;
  }

  .sgd-stage-live {
    max-width: calc(100% - 120px);
    padding: 6px 10px;
  }

  .pm-brand-spot,
  .pm-brand-spot.is-compact {
    min-height: 84px;
  }

  .pm-lounge-stage {
    grid-template-rows: minmax(0, 1fr) minmax(160px, 32%);
  }

  .sgd-cam-bay {
    gap: 6px;
  }
}

@media (max-width: 768px) {
  .sgd-pane,
  .sgd-tv {
    padding: 8px;
    gap: 6px;
  }

  .sgd-pane {
    grid-template-columns: minmax(0, 1fr) minmax(148px, 24%);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .sgd-tv {
    grid-template-columns: minmax(0, 1fr) minmax(140px, 30%);
    grid-template-rows: minmax(0, 1fr);
  }

  .pm-lounge-stage {
    grid-template-rows: minmax(0, 1fr) 120px;
    gap: 6px;
  }

  .pm-lounge-pair {
    gap: 6px;
  }

  .sgd-cam-worker {
    font-size: 14px;
    bottom: 22px;
  }

  .sgd-cam-brand {
    font-size: 8px;
    letter-spacing: 0.12em;
    bottom: 6px;
  }

  .sgd-tv .sgd-nameblock h1 {
    font-size: clamp(18px, 3.4vw, 28px);
  }

  .sgd-pickme .pickme-global-logo strong {
    font-size: 13px;
  }

  .sgd-stage-live time {
    font-size: 16px;
  }

  .sgd-book-steps li,
  .sgd-book-lead,
  .sgd-book-url {
    font-size: 10px;
  }

  .sgd-qr,
  .sgd-tv .sgd-qr {
    width: 72px;
    height: 72px;
    margin: 8px auto 0;
  }
}

@media (max-width: 560px) {
  .sgd-pane {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .sgd-pane .sgd-brand,
  .sgd-pane .sgd-media {
    grid-column: 1;
  }

  .sgd-tagline {
    display: none;
  }

  .sgd-book {
    display: flex;
    grid-column: 1;
    grid-row: 3;
    max-height: 118px;
    padding: 6px;
  }

  .sgd-worker-cams {
    flex-direction: row;
    min-height: 96px;
  }

  .sgd-book-foot {
    display: none;
  }

  .pm-lounge-pair {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .pm-lounge-stage {
    grid-template-rows: minmax(0, 1fr) 88px;
  }

  .sgd-cam-bay {
    gap: 4px;
  }

  .sgd-cam-bay .sgd-cam-scan span {
    display: none;
  }

  .sgd-cam-worker {
    font-size: 12px;
    bottom: 16px;
  }
}

@container (max-height: 400px) {
  .pm-yt-how,
  .pm-yt-how-lead,
  .pm-yt-how-alt,
  .pm-yt-how-down,
  .pm-yt-chrome {
    display: none;
  }
}
.pm-agent-modal-bg {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(16, 17, 22, 0.45);
  display: grid;
  place-items: center;
  padding: 20px;
}

.pm-agent-modal {
  width: min(440px, 100%);
  background: #fffdf9;
  border: 1px solid #d9dbe3;
  border-radius: 18px;
  padding: 22px 20px 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}

.pm-agent-modal h2 {
  margin: 0 0 10px;
  font-size: 1.15rem;
}

.pm-agent-modal p {
  margin: 0 0 18px;
  line-height: 1.45;
  color: #3a3f4a;
}

.pm-agent-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pm-agent-primary,
.pm-agent-secondary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}

.pm-agent-primary {
  background: #4b5fff;
  color: #fff;
}

.pm-agent-secondary {
  background: transparent;
  color: #101116;
}
.pm-cam-sensor {
  border: 1px solid var(--pm-theme-card-border, #e2e8f0);
  background: var(--pm-theme-card-bg, #ffffff);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pm-cam-sensor.is-on {
  border-color: rgba(16, 185, 129, 0.35);
}

.pm-cam-sensor.is-compact {
  padding: 8px;
  gap: 6px;
}

.pm-cam-sensor.is-compact .pm-cam-sensor-pill {
  margin-top: 0;
}

.pm-cam-sensor.is-compact .pm-cam-sensor-live {
  height: 110px;
}

.pm-cam-sensor.is-compact .pm-cam-sensor-go,
.pm-cam-sensor.is-compact .pm-cam-sensor-ghost {
  padding: 6px 8px;
}

.pm-cam-sensor-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pm-cam-sensor-top strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
}

.pm-cam-sensor-pill {
  display: inline-block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 650;
  color: var(--pm-theme-text-muted, #747b8b);
}

.pm-cam-sensor-pill.on {
  color: #15803d;
}

.pm-cam-sensor-go,
.pm-cam-sensor-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 750;
  padding: 7px 10px;
  cursor: pointer;
}

.pm-cam-sensor-go {
  border: 1px solid var(--pm-theme-card-border, #e2e8f0);
  background: var(--pm-theme-bg, #f8fafc);
  color: var(--pm-theme-text-main, #0f172a);
}

.pm-cam-sensor-ghost {
  border: 1px solid transparent;
  background: transparent;
  color: var(--pm-theme-text-muted, #64748b);
}

.pm-cam-sensor-live {
  height: 92px;
  border-radius: 8px;
  overflow: hidden;
  background: #101116;
}

.pm-cam-sensor-live img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pm-cam-sensor-pass input {
  width: 100%;
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
}

.pm-cam-sensor-err {
  margin: 0;
  font-size: 11px;
  color: #b45309;
}

.pm-cam-sensor-more {
  align-self: flex-start;
  border: 0;
  background: none;
  padding: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pm-theme-text-muted, #747b8b);
  cursor: pointer;
}

.pm-cam-sensor-tech {
  margin: 0;
  font-size: 10px;
  color: var(--pm-theme-text-muted, #747b8b);
  font-variant-numeric: tabular-nums;
}

.pm-cam-sensor-spin {
  animation: pm-cam-sensor-spin 0.8s linear infinite;
}

@keyframes pm-cam-sensor-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   NEON PICKME SHOWROOM WORKSTATION CARD (.pm-kiosk-ws-card)
   ========================================================================== */
.pm-kiosk-ws-card {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(75, 95, 255, 0.22);
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 0 0 1px rgba(75, 95, 255, 0.06);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.pm-kiosk-ws-card:hover {
  border-color: rgba(75, 95, 255, 0.55);
  box-shadow: 0 8px 26px -4px rgba(75, 95, 255, 0.18), 0 0 16px rgba(75, 95, 255, 0.12);
  transform: translateY(-1px);
}

.pm-kiosk-ws-card.is-live {
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow: 0 4px 20px -2px rgba(16, 185, 129, 0.1), 0 0 16px rgba(16, 185, 129, 0.12);
}

/* 1. Header */
.pm-ws-header {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pm-ws-tag-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pm-ws-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4b5fff;
  background: rgba(75, 95, 255, 0.08);
  border: 1px solid rgba(75, 95, 255, 0.22);
  border-radius: 6px;
  padding: 2px 7px;
  white-space: nowrap;
}

.pm-ws-chip.sec {
  color: #059669;
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.25);
}

.pm-ws-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 2px 8px;
  border: 1px solid transparent;
}

.pm-ws-live-indicator.standby {
  background: #f1f5f9;
  color: #64748b;
  border-color: #e2e8f0;
}

.pm-ws-live-indicator.live {
  background: #ecfdf5;
  color: #059669;
  border-color: #a7f3d0;
}

.pm-ws-live-indicator.scanning {
  background: #eff6ff;
  color: #2563eb;
  border-color: #bfdbfe;
}

.pm-ws-live-indicator.sec-guard {
  background: #ecfdf5;
  color: #059669;
  border-color: #a7f3d0;
}

.pm-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  animation: pm-pulse 1.8s ease infinite;
}

@keyframes pm-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.pm-ws-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pm-ws-identity {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pm-ws-name {
  font-size: 14px;
  font-weight: 850;
  color: #0f172a;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pm-ws-role {
  font-size: 10.5px;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pm-ws-status-chip {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.pm-ws-status-chip.free {
  background: #ecfdf5;
  color: #059669;
  border-color: #a7f3d0;
}

.pm-ws-status-chip.busy {
  background: #eff6ff;
  color: #2563eb;
  border-color: #bfdbfe;
}

.pm-ws-status-chip.pause {
  background: #fffbeb;
  color: #d97706;
  border-color: #fde68a;
}

.pm-ws-status-chip.sec {
  background: #ecfdf5;
  color: #059669;
  border-color: #a7f3d0;
}

/* 2. Optical HUD Lens Viewport */
.pm-ws-lens-viewport {
  position: relative;
  width: 100%;
  height: 144px;
  background: radial-gradient(circle at center, #111827 0%, #090e1a 100%);
  border: 1px solid rgba(75, 95, 255, 0.35);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6);
}

.pm-ws-lens-viewport.sec-lens {
  border-color: rgba(16, 185, 129, 0.35);
}

/* Cybernetic Corner Brackets */
.pm-hud-bracket {
  position: absolute;
  width: 7px;
  height: 7px;
  border-color: #4b5fff;
  border-style: solid;
  pointer-events: none;
  z-index: 4;
}

.pm-hud-bracket.tl { top: 5px; left: 5px; border-width: 2px 0 0 2px; }
.pm-hud-bracket.tr { top: 5px; right: 5px; border-width: 2px 2px 0 0; }
.pm-hud-bracket.bl { bottom: 5px; left: 5px; border-width: 0 0 2px 2px; }
.pm-hud-bracket.br { bottom: 5px; right: 5px; border-width: 0 2px 2px 0; }

.sec-lens .pm-hud-bracket {
  border-color: #10b981;
}

/* Telemetry HUD overlays */
.pm-hud-telemetry {
  position: absolute;
  left: 8px;
  right: 8px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  background: transparent !important;
}

.pm-hud-telemetry.is-top { top: 6px; }
.pm-hud-telemetry.is-bottom { bottom: 6px; }

.pm-hud-badge {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8.5px;
  font-weight: 750;
  letter-spacing: 0.04em;
  color: rgba(56, 189, 248, 0.9);
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.4);
  background: transparent !important;
}

.pm-hud-badge.sec {
  color: rgba(52, 211, 153, 0.9);
  text-shadow: 0 0 6px rgba(52, 211, 153, 0.4);
  background: transparent !important;
}

/* Feed Wrapper */
.pm-ws-feed-wrapper {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.pm-ws-live-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pm-hud-unplug-btn {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 5;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(4px);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.4);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 750;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pm-hud-unplug-btn:hover {
  background: rgba(239, 68, 68, 0.9);
  color: #ffffff;
  border-color: #ef4444;
}

/* Standby Stage */
.pm-hud-standby-stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 10px;
}

.pm-hud-reticle {
  position: relative;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pm-reticle-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px dashed rgba(75, 95, 255, 0.45);
  animation: pm-spin 12s linear infinite;
}

.pm-reticle-target {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(75, 95, 255, 0.15);
  border: 1px solid rgba(75, 95, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(75, 95, 255, 0.3);
}

.pm-reticle-icon {
  color: #60a5fa;
}

.pm-hud-prompt {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pm-hud-title {
  font-size: 11px;
  font-weight: 800;
  color: #f1f5f9;
  letter-spacing: 0.02em;
}

.pm-hud-sub {
  font-size: 9px;
  color: #94a3b8;
}

.pm-hud-neon-btn {
  margin-top: 2px;
  background: linear-gradient(135deg, #4b5fff 0%, #3b82f6 100%);
  color: #ffffff;
  border: 0;
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 800;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(75, 95, 255, 0.45);
  transition: all 0.18s ease;
}

.pm-hud-neon-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 5px 18px rgba(75, 95, 255, 0.6);
}

.pm-hud-neon-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Password Stage */
.pm-hud-pass-stage {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px;
}

.pm-hud-pass-title {
  font-size: 10.5px;
  font-weight: 750;
  color: #f1f5f9;
}

.pm-hud-pass-input-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pm-hud-pass-input-row input {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(75, 95, 255, 0.4);
  color: #ffffff;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 11px;
  width: 120px;
  outline: none;
}

.pm-hud-pass-btn {
  background: #4b5fff;
  color: #ffffff;
  border: 0;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

/* 3. Footer Telemetry Strip */
.pm-ws-footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 10px;
  padding: 6px 8px;
}

.pm-ws-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  text-align: center;
}

.pm-ws-metric small {
  font-size: 8.5px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pm-ws-metric b {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 800;
  color: #0f172a;
}

.pm-ws-metric b.pm-metric-active {
  color: #059669;
}

/* Security Cam Wrapper Inside Viewport */
.pm-sec-feed-wrapper {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pm-sec-feed-wrapper .sgd-cam,
.pm-sec-feed-wrapper .sgd-cam-idle {
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.pm-sec-feed-wrapper .sgd-cam-idle {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px !important;
}

.pm-sec-feed-wrapper .sgd-cam-worker,
.pm-sec-feed-wrapper .sgd-cam-brand,
.pm-sec-feed-wrapper .sgd-cam-shade {
  display: none !important;
}

.pm-sec-feed-wrapper .sgd-cam-scan {
  position: relative !important;
  z-index: 4 !important;
  align-self: center !important;
  margin-top: 2px !important;
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  padding: 6px 14px !important;
  box-shadow: 0 3px 12px rgba(16, 185, 129, 0.45) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  transition: all 0.18s ease !important;
}

.pm-sec-feed-wrapper .sgd-cam-scan:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 5px 18px rgba(16, 185, 129, 0.6) !important;
}

.pm-sec-feed-wrapper .sgd-cam-scan svg {
  color: #ffffff !important;
}

.pm-reticle-ring.sec-ring {
  border-color: rgba(16, 185, 129, 0.45) !important;
}

.pm-reticle-target.sec-target {
  background: rgba(16, 185, 129, 0.15) !important;
  border: 1px solid rgba(16, 185, 129, 0.5) !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.3) !important;
}

.pm-reticle-icon.sec-icon {
  color: #34d399 !important;
}
.pm-phone-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.pm-phone-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(6, 8, 12, 0.52);
  cursor: pointer;
}

.pm-phone-card {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  max-height: min(86dvh, 620px);
  overflow: auto;
  background: var(--panel, #14171c);
  border: 1px solid var(--line, #3a3a34);
  border-radius: 14px;
  box-shadow: var(--shadow, 0 18px 50px rgba(0, 0, 0, 0.33));
  padding: 16px 16px 14px;
  color: var(--text, #f5f0e8);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pm-phone-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.pm-phone-kicker {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--text, #f5f0e8);
}

.pm-phone-head p {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted, #a6a19a);
}

.pm-phone-x,
.pm-phone-quiet,
.pm-phone-kinds button,
.pm-phone-toggle {
  font: inherit;
  cursor: pointer;
}

.pm-phone-card {
  position: relative;
}
.pm-phone-x {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--line, #3a3a34);
  background: var(--panel2, #191d23);
  color: var(--text, #f5f0e8);
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
}
.pm-phone-x span {
  display: block;
  margin-top: -1px;
}
.pm-phone-x svg {
  display: none;
}
.pm-phone-head {
  padding-right: 40px;
}

.pm-phone-kinds {
  display: flex;
  gap: 6px;
}

.pm-phone-kinds button {
  flex: 1;
  height: 30px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid var(--line, #3a3a34);
  background: var(--soft, #20252c);
  color: var(--text, #f5f0e8);
  font-size: 11px;
  font-weight: 700;
}

.pm-phone-kinds button.is-on {
  background: var(--panel2, #191d23);
  border-color: var(--text, #f5f0e8);
}

.pm-phone-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted, #a6a19a);
}

.pm-phone-field input {
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--line, #3a3a34);
  background: var(--panel2, #191d23);
  color: var(--text, #f5f0e8);
  font-size: 13px;
  font-weight: 500;
}

.pm-phone-field input::placeholder {
  color: var(--muted, #a6a19a);
  opacity: 0.8;
}

.pm-phone-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--line, #3a3a34);
  background: var(--soft, #20252c);
  color: var(--text, #f5f0e8);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}

.pm-phone-toggle i {
  width: 32px;
  height: 18px;
  border-radius: 999px;
  background: var(--panel2, #191d23);
  border: 1px solid var(--line, #3a3a34);
  position: relative;
  flex: 0 0 auto;
}

.pm-phone-toggle i::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--muted, #a6a19a);
}

.pm-phone-toggle.is-on i {
  background: color-mix(in srgb, var(--text, #f5f0e8) 18%, var(--soft, #20252c));
}

.pm-phone-toggle.is-on i::after {
  left: 15px;
  background: var(--text, #f5f0e8);
}

.pm-phone-note {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted, #a6a19a);
}

.pm-phone-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 2px;
}

.pm-phone-quiet {
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--line, #3a3a34);
  background: var(--soft, #20252c);
  color: var(--text, #f5f0e8);
  font-size: 11px;
  font-weight: 700;
}

.pm-phone-main {
  width: 100%;
  height: 36px;
  justify-content: center;
}
.pm-phone-line {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  font-weight: 650;
}
.pm-phone-line > div {
  display: flex;
  gap: 8px;
}
.pm-phone-line a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.pm-phone-paths {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pm-phone-paths li {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line, #3a3a34);
  background: var(--soft, #20252c);
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted, #a6a19a);
}
.pm-phone-paths strong {
  display: block;
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--text, #f5f0e8);
}

.pm-phone-detect {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line, #3a3a34);
  background: var(--panel2, #191d23);
  font-size: 12px;
  line-height: 1.4;
  color: var(--text, #f5f0e8);
}

.pm-phone-flags {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pm-phone-flags li {
  margin: 0;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line, #3a3a34);
  background: var(--soft, #20252c);
  color: var(--muted, #a6a19a);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.pm-phone-flags li.is-on {
  color: var(--text, #f5f0e8);
  border-color: var(--text, #f5f0e8);
}

.pm-phone-paths li.is-detected {
  border-color: var(--text, #f5f0e8);
}

.pm-phone-paths li.is-detected strong::after {
  content: " · erkannt";
  font-weight: 700;
  letter-spacing: 0;
  color: var(--muted, #a6a19a);
}
.kv2-lounge {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  gap: 8px;
}

.kv2-lounge-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.kv2-lounge-head img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 14px;
}

.kv2-lounge-head h3 {
  margin: 0;
  font-size: 16px;
}

.kv2-lounge-head p {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--kv2-muted, #9aa3b5);
}

.kv2-lounge-log {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 2px;
}

.kv2-lounge-empty {
  margin: auto;
  color: var(--kv2-muted, #9aa3b5);
  font-size: 13px;
  text-align: center;
}

.kv2-lounge-msg {
  position: relative;
  background: #141821;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 8px 10px;
}

.kv2-lounge-msg div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--kv2-muted, #9aa3b5);
}

.kv2-lounge-msg p {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.35;
  word-break: break-word;
}

.kv2-lounge-del {
  position: absolute;
  top: 6px;
  right: 6px;
  border: 0;
  background: transparent;
  color: #f87171;
  cursor: pointer;
}

.kv2-lounge-compose {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.kv2-lounge-name,
.kv2-lounge-row input {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #10141b;
  color: #f4f7fb;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
}

.kv2-lounge-row {
  display: flex;
  gap: 6px;
}

.kv2-lounge-row input {
  flex: 1;
  min-width: 0;
}

.kv2-lounge-row button {
  width: 40px;
  border: 0;
  border-radius: 10px;
  background: #2563eb;
  color: #fff;
  cursor: pointer;
}

.kv2-lounge-row button:disabled {
  opacity: 0.4;
}

.kv2-lounge-rate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 8px 2px;
  margin-top: 2px;
  border-top: 1px solid rgba(224, 177, 132, 0.18);
  flex-shrink: 0;
  text-align: center;
}

.kv2-lounge-rate p {
  margin: 0;
  font-family: Fraunces, Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  color: #f6f0e8;
}

.kv2-lounge-stars {
  display: flex;
  gap: 4px;
}

.kv2-lounge-rate button {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.16);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 1px;
  text-shadow: 0 0 0 transparent;
  transition: color 0.15s ease, transform 0.15s ease;
}

.kv2-lounge-rate button.on {
  color: #e0b184;
  text-shadow: 0 0 12px rgba(224, 177, 132, 0.45);
}

.kv2-lounge-rate button:not(:disabled):hover {
  transform: translateY(-1px);
  color: #f0d0a8;
}

.kv2-lounge-rate button:disabled {
  cursor: default;
}

.kv2-lounge-rate small {
  min-height: 1.1em;
  color: rgba(197, 184, 168, 0.85);
  font-size: 11px;
  letter-spacing: 0.04em;
}
/* PickMe Express Risk Modal (Таблица Рисков и Репутация) */
.perm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 15, 0.88);
  backdrop-filter: blur(10px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: permFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes permFadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.perm-card {
  width: 100%;
  max-width: 820px;
  background: #121622;
  border: 2px solid #4b5fff;
  border-radius: 24px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 35px rgba(75, 95, 255, 0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Header */
.perm-header {
  padding: 16px 24px;
  background: linear-gradient(90deg, #171d2c 0%, #1a2236 100%);
  border-bottom: 1px solid #232c40;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.perm-header-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #60a5fa;
}

.perm-pulse-icon {
  color: #3b82f6;
  animation: permPulse 1.5s infinite;
}

@keyframes permPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}

.perm-countdown {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #cbd5e1;
  background: rgba(0, 0, 0, 0.3);
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid #334155;
}

.perm-countdown b {
  color: #f59e0b;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
}

/* Body Grid */
.perm-body-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 20px;
  padding: 24px;
}

@media (max-width: 768px) {
  .perm-body-grid {
    grid-template-columns: 1fr;
  }
}

/* Col Client */
.perm-col-client {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.perm-client-card {
  background: #181f2e;
  border: 1px solid #283348;
  border-radius: 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.perm-avatar-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.perm-avatar {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #4b5fff 0%, #3545d9 100%);
  color: #ffffff;
  display: grid;
  place-content: center;
  font-size: 20px;
  font-weight: 900;
}

.perm-client-title h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
}

.perm-tier-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  color: #60a5fa;
  margin-top: 2px;
}

.perm-req-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid #232c40;
  padding-top: 12px;
  font-size: 12.5px;
}

.perm-meta-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.perm-meta-label {
  color: #94a3b8;
}

.perm-meta-val {
  color: #ffffff;
  font-weight: 700;
}

.perm-distance-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
}

/* AI Recommendation Box */
.perm-ai-box {
  background: rgba(75, 95, 255, 0.08);
  border: 1px solid rgba(75, 95, 255, 0.25);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.perm-ai-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #60a5fa;
}

.perm-ai-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #cbd5e1;
  font-style: italic;
}

/* Col Risk (Таблица рисков) */
.perm-col-risk {
  display: flex;
  flex-direction: column;
}

.perm-risk-matrix-card {
  background: #181f2e;
  border: 1px solid #283348;
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.perm-risk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.perm-risk-head h4 {
  margin: 0;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #e2e8f0;
}

.perm-risk-grade {
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
}

.perm-risk-grade.is-low {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.perm-risk-grade.is-medium {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.perm-risk-grade.is-high {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Score Banner */
.perm-score-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #1f273b;
  padding: 12px 16px;
  border-radius: 14px;
}

.perm-score-num {
  display: flex;
  align-items: baseline;
  line-height: 1;
}

.score-big {
  font-size: 36px;
  font-weight: 900;
  color: #10b981;
  font-family: 'JetBrains Mono', monospace;
}

.score-max {
  font-size: 14px;
  color: #64748b;
  margin-left: 2px;
}

.perm-score-info {
  display: flex;
  flex-direction: column;
}

.perm-score-info b {
  font-size: 13.5px;
  color: #ffffff;
}

.perm-score-info small {
  font-size: 10.5px;
  color: #94a3b8;
}

/* Matrix Table */
.perm-matrix-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.perm-matrix-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #131722;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12px;
}

.row-key {
  color: #94a3b8;
}

.row-val {
  font-weight: 700;
}

.row-val.is-good {
  color: #10b981;
}

.row-val.is-bad {
  color: #ef4444;
}

.perm-matrix-footer-note {
  font-size: 10.5px;
  color: #64748b;
  line-height: 1.4;
  margin-top: auto;
}

/* Actions Toolbar */
.perm-actions-toolbar {
  padding: 16px 24px;
  background: #151a27;
  border-top: 1px solid #232c40;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.perm-btn-decline {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 18px;
  background: #1e2433;
  border: 1px solid #334155;
  color: #f87171;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.perm-btn-decline:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
}

.perm-btn-postpone {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 18px;
  background: #1e2433;
  border: 1px solid #334155;
  color: #f59e0b;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.perm-btn-postpone:hover {
  background: rgba(245, 158, 11, 0.15);
  border-color: #f59e0b;
}

.perm-btn-accept {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
  color: #ffffff;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35);
  transition: all 0.15s ease;
}

.perm-btn-accept:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}
/* ==========================================================================
   PickMe Tablet-First Salon Kiosk Stylesheet
   32% Left Cockpit | 68% Right Media & Guest Area
   ========================================================================== */

.pm-kiosk-root {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  width: 100%;
  background: var(--pm-theme-bg, #f8fafc);
  color: var(--pm-theme-text-main, #0f172a);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
}

html:has(.pm-kiosk-root),
body:has(.pm-kiosk-root) {
  height: 100%;
  max-height: 100dvh;
  overflow: hidden !important;
}

.pm-kiosk-header {
  height: 52px;
  background: var(--pm-theme-card-bg, #ffffff);
  border-bottom: 1px solid var(--pm-theme-card-border, #e2e8f0);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  flex-shrink: 0;
}

.pm-kiosk-header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.pm-kiosk-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pm-kiosk-ai-badge {
  font-size: 10px;
  font-weight: 800;
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 2px 6px;
  border-radius: 4px;
}

.pm-kiosk-salon-title h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--pm-theme-text-main, #101116);
}

.pm-kiosk-address {
  font-size: 11px;
  color: var(--pm-theme-text-muted, #747b8b);
}

.pm-kiosk-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pm-kiosk-live-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #34d399;
  background: rgba(16, 185, 129, 0.1);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.pm-kiosk-live-pill.is-reconnecting {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.28);
}

.pm-kiosk-live-pill.is-reconnecting .pm-kiosk-live-dot {
  background: #fbbf24;
  box-shadow: 0 0 8px #fbbf24;
}

.pm-kiosk-live-pill.is-offline {
  color: #f87171;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.28);
}

.pm-kiosk-live-pill.is-offline .pm-kiosk-live-dot {
  background: #f87171;
  box-shadow: none;
}

.pm-kiosk-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px #34d399;
}

.pm-kiosk-clock {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--pm-theme-text-main, #101116);
  font-variant-numeric: tabular-nums;
}

/* Split Grid */
.pm-kiosk-grid {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  flex: 1;
  overflow: hidden;
  min-height: 0;
  width: 100%;
}

@media (min-width: 1280px) {
  .pm-kiosk-grid {
    grid-template-columns: minmax(340px, 400px) minmax(0, 1fr);
  }
}

@media (min-width: 1600px) {
  .pm-kiosk-grid {
    grid-template-columns: 420px minmax(0, 1fr);
  }
}

.pm-kiosk-pane {
  height: 100%;
  overflow: hidden;
}

.cockpit-left-pane {
  background: var(--pm-theme-bg, #f7f4ec);
  border-right: 1px solid var(--pm-theme-card-border, #d9dbe3);
  overflow: hidden;
}

.right-content-pane {
  display: flex;
  flex-direction: column;
  background: var(--pm-theme-bg, #f7f4ec);
  min-height: 0;
  overflow: hidden;
  scrollbar-width: none;
}

.pm-kiosk-floor {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 6px;
  padding: 8px 10px 8px;
}

.pm-kiosk-floor-guest {
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.pm-kiosk-floor-guest .sgd-pane {
  flex: 1;
  height: 100%;
  min-height: 0;
  padding: 10px 12px;
  gap: 8px;
}

.pm-kiosk-floor-guest .sgd-book {
  padding: 10px 8px;
}

.pm-kiosk-floor-guest .sgd-moment strong {
  font-size: clamp(22px, 2.4vw, 32px);
}

.pm-kiosk-floor-guest .sgd-book-steps,
.pm-kiosk-floor-guest .sgd-book-lead {
  display: none;
}

.pm-kiosk-floor-ops {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.9fr);
  gap: 8px;
  min-height: 0;
}

.pm-kiosk-floor .pm-workstation-bay {
  height: 100%;
  overflow: hidden;
}

.pm-kiosk-floor .pm-workstation-col {
  padding: 6px 8px;
  gap: 6px;
}

.pm-kiosk-floor .pm-sensor-visual-mat,
.pm-kiosk-floor .pm-sensor-card-footer,
.pm-kiosk-floor .pm-cam-sensor-more {
  display: none;
}

.pm-kiosk-floor .pm-sensor-card {
  padding: 2px 0 0;
  gap: 4px;
}

.pm-kiosk-floor .pm-cam-sensor {
  padding: 6px;
}

.pm-kiosk-floor .pm-cam-sensor.is-compact .pm-cam-sensor-live {
  height: 64px;
}

.pm-kiosk-floor .sgd-sec-wrap {
  min-height: 0;
  height: 100%;
}

.pm-kiosk-floor .sgd-cam-bay {
  min-height: 0;
  height: 100%;
}

.pm-kiosk-floor .sgd-cam-bay .sgd-cam {
  min-height: 0;
}

.pm-kiosk-floor > .pm-kiosk-tech-fold {
  max-height: none;
}

@media (max-width: 1100px) {
  .pm-kiosk-floor {
    grid-template-rows: minmax(220px, 1fr) auto auto;
    overflow: auto;
  }

  .pm-kiosk-floor-ops {
    grid-template-columns: 1fr;
  }
}

/* Top Switcher Tabs */
.pm-right-tabs-header {
  display: flex;
  gap: 6px;
  padding: 10px 22px;
  background: var(--pm-theme-card-bg, #fffdf9);
  border-bottom: 1px solid var(--pm-theme-card-border, #d9dbe3);
}

.pm-rtab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
  color: var(--pm-theme-text-muted, #747b8b);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.pm-rtab:hover {
  background: var(--pm-theme-badge-bg, rgba(75, 95, 255, 0.1));
  color: var(--pm-theme-text-main, #101116);
}

.pm-rtab.active {
  background: var(--pm-theme-cta-bg, #4b5fff);
  color: var(--pm-theme-cta-text, #ffffff);
  border-color: var(--pm-theme-cta-bg, #4b5fff);
}

.pm-tab-pane-content {
  flex: 1;
  overflow: hidden;
  padding: 16px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--pm-theme-bg, #f7f4ec);
  color: var(--pm-theme-text-main, #101116);
  min-height: 0;
}

.pm-cam-sensor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

.pm-tab-pane-content.ai-devices-view,
.pm-tab-pane-content.security-view {
  overflow: hidden;
}

.ai-devices-view,
.radio-view,
.video-view {
  background: var(--pm-theme-bg, #f7f4ec);
  color: var(--pm-theme-text-main, #101116);
}

/* TAB 1: GUEST DISPLAY */
.pm-guest-welcome-header h3 {
  margin: 0 0 4px 0;
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
}

.pm-guest-welcome-header p {
  margin: 0;
  color: #94a3b8;
  font-size: 13px;
}

.pm-guest-chairs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.pm-guest-chair-tile {
  background: #131b2e;
  border: 1px solid #1e293b;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pm-guest-chair-left strong {
  display: block;
  font-size: 14px;
  color: #f8fafc;
}

.pm-guest-chair-left span {
  font-size: 12px;
  color: #94a3b8;
}

.pm-guest-status-pill {
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
}

.pm-guest-status-pill.free,
.pm-guest-status-pill.frei {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}

.pm-guest-status-pill.pause {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

.pm-guest-status-pill.busy,
.pm-guest-status-pill.belegt {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.pm-guest-bottom-row {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-top: 20px;
}

.pm-guest-clock-block {
  background: #131b2e;
  border: 1px solid #1e293b;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.pm-guest-big-clock {
  font-size: 48px;
  font-weight: 900;
  color: #34d399;
  letter-spacing: -1px;
}

.pm-guest-date-str {
  font-size: 14px;
  color: #94a3b8;
  margin-top: 4px;
}

.pm-guest-promo-block {
  min-width: 0;
}

.pm-guest-promo-block .pm-ad-rotator-root {
  height: 100%;
  min-height: 140px;
}

.pm-radio-error {
  margin: 6px 0 0;
  color: #fbbf24;
  font-size: 12px;
}

.pm-kiosk-slideshow {
  position: relative;
  width: 100%;
  min-height: 360px;
  height: 52vh;
  border-radius: 16px;
  overflow: hidden;
  background: #0b1220;
  background-size: cover;
  background-position: center;
  border: 1px solid #1e293b;
}

.pm-kiosk-slideshow.is-tv {
  height: 100%;
  min-height: 0;
  border: none;
  border-radius: 0;
}

.pm-kiosk-slideshow-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: pm-kiosk-kenburns 8s ease-in-out;
}

.pm-kiosk-slideshow-caption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

.pm-kiosk-slideshow-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #94a3b8;
}

@keyframes pm-kiosk-kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

.pm-guest-qr-image-wrap {
  width: 100px;
  height: 100px;
  background: #ffffff;
  border-radius: 10px;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pm-guest-real-qr-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pm-guest-qr-text strong {
  display: block;
  font-size: 15px;
  color: #f8fafc;
  margin-bottom: 2px;
}

.pm-guest-qr-text span {
  display: block;
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 6px;
}

.pm-guest-qr-url {
  display: inline-block;
  background: rgba(0, 0, 0, 0.4);
  padding: 3px 8px;
  border-radius: 4px;
  color: #34d399;
  font-size: 12px;
  font-weight: 700;
}

/* TAB 2: RADIO */
.pm-radio-genre-chips-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.pm-radio-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--pm-theme-card-bg, #fffdf9);
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
  color: var(--pm-theme-text-main, #101116);
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  flex-shrink: 0;
  text-align: left;
}

.pm-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.pm-chip-text strong {
  display: block;
  font-size: 12px;
  color: var(--pm-theme-text-main, #101116);
}

.pm-chip-text small {
  font-size: 10px;
  color: var(--pm-theme-text-muted, #747b8b);
}

.pm-radio-browser-3col {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  flex: 1;
}

.pm-rb-title {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--pm-theme-text-muted, #747b8b);
  margin-bottom: 8px;
}

.pm-rb-country-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pm-rb-country-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--pm-theme-card-bg, #fffdf9);
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--pm-theme-text-main, #101116);
  font-size: 12px;
  cursor: pointer;
}

.pm-rb-country-btn.active {
  background: var(--pm-theme-cta-bg, #4b5fff);
  border-color: var(--pm-theme-cta-bg, #4b5fff);
  color: var(--pm-theme-cta-text, #ffffff);
}

.pm-rb-station-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}

.pm-rb-station-card {
  background: var(--pm-theme-card-bg, #fffdf9);
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.pm-rb-station-card.active {
  border-color: var(--pm-theme-primary, #4b5fff);
  background: var(--pm-theme-badge-bg, rgba(75, 95, 255, 0.12));
}

.pm-st-meta strong {
  display: block;
  font-size: 12px;
  color: var(--pm-theme-text-main, #101116);
}

.pm-st-meta span {
  font-size: 10px;
  color: var(--pm-theme-text-muted, #747b8b);
}

.pm-rb-master-console {
  background: var(--pm-theme-card-bg, #fffdf9);
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
  border-radius: 12px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.pm-rb-live-tag {
  font-size: 10px;
  color: #ef4444;
  font-weight: 800;
}

.pm-rb-stream-title strong {
  color: #ffffff;
  font-size: 14px;
}

.pm-rb-stream-title span {
  color: #94a3b8;
  font-size: 12px;
}

.pm-rb-play-main {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #10b981;
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.pm-rb-vol-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pm-rb-mute {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
}

.pm-rb-slider {
  accent-color: #10b981;
}

.pm-rb-vol-num {
  font-size: 11px;
  color: #94a3b8;
  width: 32px;
}

/* TAB 3: VIDEO */
.pm-video-player-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  border-radius: 14px;
  overflow: hidden;
  background: #000000;
  border: 1px solid #1e293b;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.pm-video-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.pm-video-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--pm-theme-card-bg, #fffdf9);
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
  border-radius: 12px;
  padding: 8px 14px;
  margin-bottom: 14px;
}

.pm-video-url-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--pm-theme-text-main, #101116);
  font-size: 13px;
  outline: none;
}

.pm-video-url-input::placeholder {
  color: var(--pm-theme-text-muted, #747b8b);
}

.pm-video-submit-btn {
  background: var(--pm-theme-cta-bg, #4b5fff);
  color: var(--pm-theme-cta-text, #ffffff);
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.pm-video-submit-btn:hover {
  background: #059669;
}

.pm-kiosk-fullscreen-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--pm-theme-card-bg, #fffdf9);
  color: var(--pm-theme-text-main, #101116);
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.pm-kiosk-fullscreen-btn:hover {
  border-color: var(--pm-theme-primary, #4b5fff);
  color: var(--pm-theme-primary, #4b5fff);
}

/* TAB 4: SENSORS — follows Classic / Modern / Barber tokens */
.pm-ai-hub-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pm-ai-hub-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--pm-theme-cta-bg, #4b5fff);
  color: var(--pm-theme-cta-text, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pm-ai-hub-title-row h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  font-family: var(--pm-theme-font-heading, Fraunces, Georgia, serif);
  color: var(--pm-theme-text-main, #101116);
}

.pm-ai-hub-title-row p {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--pm-theme-text-muted, #747b8b);
}

.pm-sensor-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.pm-workstation-bay {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  flex: 1;
  min-height: 0;
  align-content: start;
  align-items: start;
  overflow: auto;
}

.pm-workstation-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  background: var(--pm-theme-card-bg, #fffdf9);
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
  border-radius: 14px;
  padding: 10px;
}

.pm-workstation-col .pm-sensor-card {
  flex: 0 0 auto;
  border: 0;
  padding: 4px 2px 8px;
  box-shadow: none;
  background: transparent;
}

.pm-workstation-col .pm-sensor-card:hover {
  box-shadow: none;
  border-color: transparent;
}

.pm-workstation-col .pm-sensor-visual-mat {
  padding: 8px;
}

.pm-tab-pane-content.ai-devices-view,
.pm-tab-pane-content.security-view {
  overflow: hidden;
}

.pm-tab-pane-content.ai-devices-view .pm-kiosk-tech-fold {
  flex: 0 0 auto;
  max-height: 28%;
  overflow: auto;
}

.security-view .sgd-sec-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  flex: 1;
  min-height: 0;
}

.security-view .sgd-sec-wrap:has(.sgd-sec-armed),
.security-view .sgd-sec-wrap:has(.sgd-sec-kept) {
  grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
}

.security-view .sgd-cam-bay {
  min-height: 0;
  height: 100%;
}

@media (max-width: 760px) {
  .pm-workstation-bay {
    grid-template-columns: 1fr;
  }

  .security-view .sgd-sec-wrap {
    grid-template-columns: 1fr;
    overflow: auto;
  }
}

.pm-hardware-support-matrix {
  background: var(--pm-theme-card-bg, #fffdf9);
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
  border-radius: var(--pm-theme-radius, 14px);
  padding: 18px;
}

.pm-hardware-support-matrix h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--pm-theme-text-main, #101116);
}

.pm-hardware-matrix-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.pm-hw-item {
  background: var(--pm-theme-bg, #f7f4ec);
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
  border-radius: 10px;
  padding: 12px;
}

.pm-hw-item.fault {
  border-color: rgba(196, 92, 74, 0.45);
}

.pm-hw-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  margin-bottom: 6px;
}

.pm-hw-badge.ok { color: #2f9d6a; }
.pm-hw-badge.ready { color: var(--pm-theme-accent, #4b5fff); }
.pm-hw-badge.sim { color: var(--pm-theme-badge-text, #4b5fff); }

.pm-hw-item strong {
  display: block;
  font-size: 13px;
  color: var(--pm-theme-text-main, #101116);
  margin-bottom: 2px;
}

.pm-hw-item small {
  font-size: 11px;
  color: var(--pm-theme-text-muted, #747b8b);
}

@media (max-width: 1024px) {
  .pm-kiosk-grid {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(240px, 30vh) minmax(0, 1fr);
  }

  .cockpit-left-pane {
    border-right: 0;
    border-bottom: 1px solid var(--pm-theme-card-border, #d9dbe3);
  }
}

@media (max-width: 768px) {
  .pm-kiosk-root {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
  }
  .pm-kiosk-header {
    height: auto;
    padding: 10px 14px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .pm-kiosk-address,
  .pm-kiosk-sensor-pill {
    display: none;
  }
  .pm-kiosk-grid {
    min-height: 0;
    overflow: hidden;
  }
  .cockpit-left-pane {
    border-right: none;
    border-bottom: 1px solid var(--pm-theme-card-border, #d9dbe3);
    min-height: 0;
    overflow: hidden;
  }
  .right-content-pane {
    min-height: 0;
    overflow: hidden;
  }
  .guest-display-view {
    overflow: hidden;
    min-height: 0;
  }
  .guest-display-view .sgd-pane {
    height: 100%;
    min-height: 0;
  }
  .pm-tab-pane-content {
    padding: 10px;
    overflow: hidden;
  }
  .pm-right-tabs-header {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}

/* Curated Ambience Presets for Smart TV / Kiosk */
.pm-curated-ambience-section {
  background: var(--pm-theme-card-bg, #fffdf9);
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.pm-curated-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.pm-curated-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--pm-theme-text-main, #101116);
}

.pm-curated-ambience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.pm-ambience-card {
  background: var(--pm-theme-bg, #f7f4ec);
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
  border-radius: 10px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.2s ease;
  position: relative;
}

.pm-ambience-card:hover {
  background: var(--pm-theme-badge-bg, rgba(75, 95, 255, 0.1));
  border-color: var(--pm-theme-primary, #4b5fff);
  transform: translateY(-1px);
}

.pm-ambience-card.active {
  background: rgba(16, 185, 129, 0.12);
  border-color: #10b981;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}

.pm-ac-badge {
  align-self: flex-start;
  font-size: 9px;
  font-weight: 800;
  color: #10b981;
  background: rgba(16, 185, 129, 0.15);
  padding: 2px 5px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}

.pm-ambience-card strong {
  font-size: 12px;
  color: #ffffff;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pm-ambience-card span {
  font-size: 11px;
  color: #94a3b8;
}

/* Video Error & Fallback Banner */
.pm-video-error-banner {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pm-video-error-banner p {
  margin: 0;
  font-size: 12px;
  color: #fca5a5;
  font-weight: 500;
}

.pm-video-error-banner button {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

/* Native Video Player */
.pm-video-native {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000000;
}

/* Pure CSS TV Maximize Fullscreen Overlay for Samsung Smart TV */
.pm-kiosk-tv-maximize-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--pm-theme-bg, #efeae0);
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.pm-tv-maximize-header {
  position: absolute;
  top: 18px;
  right: calc(30% + 28px);
  left: auto;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
  opacity: 0.72;
  pointer-events: auto;
  transition: opacity 0.2s ease;
}

.pm-tv-maximize-header:hover,
.pm-kiosk-tv-maximize-overlay:hover .pm-tv-maximize-header {
  opacity: 1;
}

.pm-tv-maximize-title {
  display: none;
}

.pm-tv-exit-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  gap: 0;
  background: rgba(16, 17, 22, 0.42);
  color: #fffdf9;
  border: 1px solid rgba(255, 253, 249, 0.18);
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(10px);
}

.pm-tv-exit-btn:hover {
  background: rgba(16, 17, 22, 0.72);
}

.pm-tv-maximize-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #f8fafc;
}

.pm-tv-exit-btn span {
  display: none;
}

.pm-tv-maximize-content {
  flex: 1;
  width: 100%;
  min-height: 0;
  height: auto;
  position: relative;
}

.pm-tv-maximize-content .sgd {
  position: absolute;
  inset: 0;
}

.pm-tv-maximize-content .sgd-tv {
  grid-template-columns: minmax(0, 1fr) minmax(200px, 30%);
  grid-template-rows: minmax(0, 1fr);
}

@media (max-width: 1100px) {
  .pm-tv-maximize-header {
    right: calc(28% + 16px);
  }
}

.pm-tv-fullscreen-iframe,
.pm-tv-fullscreen-video {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* TV Second Screen Badges & Feedback Banners */
.pm-hw-badge.warn {
  color: #fbbf24;
}

.pm-hw-item.connecting {
  border-color: rgba(251, 191, 36, 0.4);
  background: rgba(251, 191, 36, 0.05);
}

.pm-tv-melisa-toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: 14px;
}

.pm-tv-melisa-msg {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #34d399;
  font-weight: 500;
}

.pm-tv-toast-close {
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.pm-tv-confirm-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(52, 211, 153, 0.15);
  border: 1px solid #34d399;
  border-radius: 10px;
  padding: 8px 14px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  animation: fadeIn 0.3s ease;
}

/* Cast to TV Action Buttons on Tabs */
.pm-cast-tv-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #10b981;
  color: #ffffff;
  border: none;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
  transition: all 0.15s ease;
  white-space: nowrap;
}

.pm-cast-tv-action-btn:hover {
  background: #059669;
  transform: translateY(-1px);
}

.pm-cast-tv-action-btn.radio {
  background: #3b82f6;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.pm-cast-tv-action-btn.radio:hover {
  background: #2563eb;
}

.pm-cast-tv-action-btn.video {
  background: #f43f5e;
  box-shadow: 0 2px 8px rgba(244, 63, 94, 0.3);
}

.pm-cast-tv-action-btn.video:hover {
  background: #e11d48;
}

.pm-guest-welcome-left {
  flex: 1;
}

.pm-radio-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.pm-video-header-btns {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pm-radio-hero-card {
  background: var(--pm-theme-card-bg, #fffdf9);
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pm-radio-now-playing {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pm-radio-now-playing h3 {
  margin: 0;
  font-size: 22px;
  color: var(--pm-theme-text-main, #101116);
}

.pm-radio-now-playing p {
  margin: 4px 0 0;
  color: var(--pm-theme-text-muted, #747b8b);
  font-size: 13px;
}

.pm-radio-equalizer {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 28px;
  width: 28px;
}

.pm-radio-equalizer span {
  width: 4px;
  height: 8px;
  background: var(--pm-theme-card-border, #d9dbe3);
  border-radius: 2px;
}

.pm-radio-equalizer.playing span {
  background: var(--pm-theme-primary, #4b5fff);
  animation: pm-eq 0.8s ease-in-out infinite;
}
.pm-radio-equalizer.playing span:nth-child(2) { animation-delay: 0.15s; }
.pm-radio-equalizer.playing span:nth-child(3) { animation-delay: 0.3s; }
.pm-radio-equalizer.playing span:nth-child(4) { animation-delay: 0.05s; }

@keyframes pm-eq {
  0%, 100% { height: 8px; }
  50% { height: 26px; }
}

.pm-radio-play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--pm-theme-cta-bg, #4b5fff);
  color: var(--pm-theme-cta-text, #ffffff);
  border: none;
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 800;
  cursor: pointer;
  width: fit-content;
}

.pm-radio-play-btn.is-playing {
  background: transparent;
  border: 1px solid var(--pm-theme-primary, #4b5fff);
  color: var(--pm-theme-primary, #4b5fff);
}

.pm-radio-country-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pm-country-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--pm-theme-card-bg, #fffdf9);
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
  color: var(--pm-theme-text-main, #101116);
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.pm-country-btn.active {
  background: var(--pm-theme-cta-bg, #4b5fff);
  border-color: var(--pm-theme-cta-bg, #4b5fff);
  color: var(--pm-theme-cta-text, #ffffff);
}

.pm-radio-stations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}

.pm-radio-station-card {
  background: var(--pm-theme-card-bg, #fffdf9);
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  min-height: 64px;
}

.pm-radio-station-card:hover {
  border-color: var(--pm-theme-primary, #4b5fff);
}

.pm-radio-station-card.active {
  border-color: var(--pm-theme-primary, #4b5fff);
  background: var(--pm-theme-badge-bg, rgba(75, 95, 255, 0.1));
}

.pm-sc-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.pm-sc-left strong,
.pm-sc-left span {
  display: block;
}

.pm-sc-left strong {
  font-size: 13px;
  color: var(--pm-theme-text-main, #101116);
}

.pm-sc-left span {
  font-size: 11px;
  color: var(--pm-theme-text-muted, #747b8b);
}

.pm-sc-flag {
  font-size: 18px;
}

.pm-sc-badge.playing {
  font-size: 10px;
  font-weight: 800;
  color: #34d399;
}

.pm-radio-volume-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--pm-theme-card-bg, #fffdf9);
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
  border-radius: 12px;
  padding: 12px 16px;
}

.pm-rb-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  justify-content: flex-end;
}

.pm-rb-slider {
  width: min(240px, 40vw);
}

.pm-rb-mute-btn {
  background: transparent;
  border: none;
  color: var(--pm-theme-text-main, #101116);
  cursor: pointer;
}

.pm-video-player-wrap {
  position: relative;
  min-height: 360px;
}

.pm-video-player-wrap .sgd {
  position: absolute;
  inset: 0;
  border-radius: 0;
}

/* PickMe premium kiosk skin — follows Classic / Modern / Barber Dark tokens */
.pm-kiosk-root {
  background: var(--pm-theme-bg, #f7f4ec);
  color: var(--pm-theme-text-main, #101116);
  font-family: Inter, system-ui, sans-serif;
}

.pm-kiosk-header {
  background: var(--pm-theme-card-bg, #fffdf9);
  border-bottom-color: var(--pm-theme-card-border, #d9dbe3);
}

.pm-kiosk-salon-title h2 {
  color: var(--pm-theme-text-main, #101116);
  font-family: var(--pm-theme-font-heading, Fraunces, Georgia, serif);
  font-weight: 500;
}

.pm-kiosk-address,
.pm-kiosk-clock {
  color: var(--pm-theme-text-muted, #747b8b);
}

.pm-salon-theme-barber_dark .pm-kiosk-salon-title h2,
.pm-salon-theme-barber_dark .pm-kiosk-clock {
  color: var(--pm-theme-text-main, #f6f0e8);
}

.pm-salon-theme-barber_dark .pm-kiosk-address {
  color: var(--pm-theme-text-muted, #c5b8a8);
}

.cockpit-left-pane {
  background: var(--pm-theme-bg, #f7f4ec);
  border-right-color: var(--pm-theme-card-border, #d9dbe3);
}

.right-content-pane {
  background: var(--pm-theme-bg, #f7f4ec);
}

.pm-right-tabs-header {
  background: var(--pm-theme-card-bg, #fffdf9);
  border-bottom-color: var(--pm-theme-card-border, #d9dbe3);
}

.pm-rtab {
  background: transparent;
  border-color: var(--pm-theme-card-border, #d9dbe3);
  color: var(--pm-theme-text-muted, #747b8b);
}

.pm-rtab.active {
  background: var(--pm-theme-cta-bg, #4b5fff);
  color: var(--pm-theme-cta-text, #ffffff);
  border-color: var(--pm-theme-cta-bg, #4b5fff);
}

.pm-kiosk-live-pill {
  color: #21a66b;
  background: rgba(33, 166, 107, 0.1);
  border-color: rgba(33, 166, 107, 0.25);
}

.pm-kiosk-live-dot {
  background: #21a66b;
  box-shadow: none;
}

.pm-kiosk-sensor-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--pm-theme-badge-bg, #e7e8fa);
  color: var(--pm-theme-badge-text, #4b5fff);
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
}

.pm-kiosk-splash {
  flex: 1;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 24px 20px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(75, 95, 255, 0.12), transparent 55%),
    var(--pm-theme-card-bg, #fffdf9);
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
  border-radius: 28px;
}

.pm-kiosk-splash-kicker {
  margin: 14px 0 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pm-theme-primary, #4b5fff);
}

.pm-kiosk-splash-title {
  margin: 8px 0 0;
  font-family: var(--pm-theme-font-heading, Fraunces, Georgia, serif);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--pm-theme-text-main, #101116);
}

.pm-kiosk-splash-line {
  margin: 8px 0 0;
  color: var(--pm-theme-text-muted, #747b8b);
  font-size: 15px;
}

.pm-kiosk-splash-clock {
  margin-top: 18px;
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  color: var(--pm-theme-primary, #4b5fff);
  font-family: var(--pm-theme-font-heading, Fraunces, Georgia, serif);
}

.pm-guest-chair-tile {
  background: var(--pm-theme-card-bg, #fffdf9);
  border-color: var(--pm-theme-card-border, #d9dbe3);
}

.pm-guest-chair-left strong {
  color: var(--pm-theme-text-main, #101116);
}

.pm-guest-status-pill.free,
.pm-guest-status-pill.frei,
.pm-guest-status-pill.auto {
  background: rgba(75, 95, 255, 0.12);
  color: #4b5fff;
}

.pm-radio-hero-card,
.pm-radio-station-card,
.pm-radio-volume-bar,
.pm-radio-chip,
.pm-country-btn {
  background: var(--pm-theme-card-bg, #fffdf9);
  border-color: var(--pm-theme-card-border, #d9dbe3);
  color: var(--pm-theme-text-main, #101116);
}

.pm-radio-now-playing h3,
.pm-sc-left strong {
  color: var(--pm-theme-text-main, #101116);
}

.pm-radio-now-playing p,
.pm-sc-left span {
  color: var(--pm-theme-text-muted, #747b8b);
}

.pm-radio-play-btn,
.pm-country-btn.active,
.pm-radio-station-card.active {
  background: var(--pm-theme-cta-bg, #4b5fff);
  border-color: var(--pm-theme-cta-bg, #4b5fff);
  color: var(--pm-theme-cta-text, #ffffff);
}

.pm-radio-play-btn.is-playing {
  background: transparent;
  color: var(--pm-theme-primary, #4b5fff);
}

.pm-radio-equalizer.playing span,
.pm-sc-badge.playing {
  background: var(--pm-theme-primary, #4b5fff);
  color: var(--pm-theme-primary, #4b5fff);
}

.pm-cast-tv-action-btn,
.pm-cast-tv-action-btn.radio,
.pm-cast-tv-action-btn.video,
.pm-video-submit-btn {
  background: var(--pm-theme-cta-bg, #4b5fff);
  color: var(--pm-theme-cta-text, #ffffff);
  box-shadow: none;
}

.pm-curated-ambience-section,
.pm-video-search-bar {
  background: var(--pm-theme-card-bg, #fffdf9);
  border-color: var(--pm-theme-card-border, #d9dbe3);
}

.pm-video-url-input {
  color: var(--pm-theme-text-main, #101116);
}

.guest-display-view {
  gap: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  padding: 10px;
  overflow: hidden;
  scrollbar-width: none;
}

.guest-display-view::-webkit-scrollbar,
.guest-display-view *::-webkit-scrollbar,
.sgd-pane::-webkit-scrollbar,
.sgd-pane *::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.guest-display-view,
.guest-display-view *,
.sgd-pane,
.sgd-pane * {
  scrollbar-width: none;
}

.guest-display-view .sgd-pane {
  min-height: 0;
  height: 100%;
}

.pm-lounge-dock {
  background: var(--pm-theme-card-bg, #fffdf9);
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
  border-radius: 14px;
  padding: 10px 12px;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--pm-theme-text-main, #101116);
}

.sgd-pane .pm-lounge-dock {
  height: 100%;
  overflow: hidden;
}

.sgd-pane .pm-lounge-dock.radio {
  min-height: 0;
  overflow: hidden;
  padding: 8px 9px;
  gap: 6px;
}

.sgd-pane .pm-lounge-stations,
.sgd-pane .pm-dab-list {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.sgd-pane .pm-lounge-stations ul,
.sgd-pane .pm-dab-list ul {
  max-height: none !important;
  flex: 1;
  min-height: 0;
  overflow-y: auto !important;
}

.sgd-pane .pm-lounge-video {
  flex: 1;
  min-height: 0;
}

.sgd-pane .pm-lounge-video:has(.pm-lounge-video-empty.is-yt) {
  min-height: 0;
}

.sgd-pane .pm-yt-stage {
  min-height: 0;
  padding: 14px 12px 28px;
}

.pm-lounge-dock-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pm-lounge-dock-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pm-lounge-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #747b8b;
}

.pm-lounge-play,
.pm-lounge-ghost {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
  background: var(--pm-theme-card-bg, #fffdf9);
  color: var(--pm-theme-text-main, #101116);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.pm-lounge-play.on {
  background: var(--pm-theme-cta-bg, #4b5fff);
  border-color: var(--pm-theme-cta-bg, #4b5fff);
  color: var(--pm-theme-cta-text, #fff);
}

.pm-lounge-tv-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  background: var(--pm-theme-cta-bg, #4b5fff);
  color: var(--pm-theme-cta-text, #fff);
}

.pm-lounge-now {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pm-lounge-now b {
  font-size: 13px;
  color: var(--pm-theme-text-main, #101116);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pm-lounge-now small {
  font-size: 11px;
  color: #747b8b;
}

.pm-lounge-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pm-lounge-chip {
  border: 1px solid #d9dbe3;
  background: #fffdf9;
  color: #101116;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.pm-lounge-stations {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pm-lounge-stations-label {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #747b8b;
}

.pm-lounge-stations ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 148px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pm-lounge-stations button {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  text-align: left;
  border: 1px solid #d9dbe3;
  background: #fffdf9;
  color: #101116;
  border-radius: 8px;
  padding: 5px 8px;
  cursor: pointer;
}

.pm-dab-preset {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #7ddea5;
}

.pm-lounge-stations button b {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-lounge-stations button small {
  font-size: 11px;
  color: #747b8b;
  white-space: nowrap;
}

.pm-lounge-stations button.on {
  border-color: #4b5fff;
  background: rgba(75, 95, 255, 0.1);
}

.pm-dab {
  background: linear-gradient(180deg, #1c2028 0%, #12151b 100%);
  border-color: #2a303a;
  color: #d7e4d0;
}

.pm-dab-face {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pm-dab-lcd {
  background:
    linear-gradient(180deg, rgba(140, 255, 180, 0.06), transparent 40%),
    #0b140f;
  border: 1px solid #1c3a28;
  border-radius: 8px;
  padding: 7px 9px 8px;
  box-shadow: inset 0 1px 0 rgba(180, 255, 200, 0.1);
}

.pm-dab-lcd-top,
.pm-dab-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pm-dab-badge {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  padding: 3px 7px;
  border-radius: 3px;
  background: #0b3d22;
  color: #8dffb8;
  border: 1px solid #1a6b40;
}

.pm-dab-lock {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #4a7a58;
}

.pm-dab-lock.on {
  color: #8dffb8;
}

.pm-dab-bars {
  margin-left: auto;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}

.pm-dab-bars i {
  width: 3px;
  background: #244030;
  border-radius: 1px;
}

.pm-dab-bars i:nth-child(1) { height: 4px; }
.pm-dab-bars i:nth-child(2) { height: 6px; }
.pm-dab-bars i:nth-child(3) { height: 8px; }
.pm-dab-bars i:nth-child(4) { height: 10px; }
.pm-dab-bars i:nth-child(5) { height: 12px; }

.pm-dab-bars i.on {
  background: #7ddea5;
  box-shadow: 0 0 6px rgba(125, 222, 165, 0.55);
}

.pm-dab-lcd-mid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: end;
  margin-top: 6px;
}

.pm-dab-freq {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pm-dab-freq b {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  color: #b8f5c8;
}

.pm-dab-freq small {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #5f9a70;
}

.pm-dab .pm-lounge-now b {
  color: #d4f5dc;
  font-size: 13px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-weight: 700;
}

.pm-dab .pm-lounge-now small {
  color: #6f9a7a;
}

.pm-dab-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.pm-dab-power {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: #2a3140;
  color: #e8ecf4;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 2px #3d4452;
}

.pm-dab-power svg {
  display: block;
}

.pm-dab-power:not(.on) svg {
  margin-left: 1px;
}

.pm-dab-power.on {
  background: #16a34a;
  color: #fff;
  box-shadow: 0 0 14px rgba(22, 163, 74, 0.45);
}

.pm-dab .pm-lounge-vol button {
  color: #e8ecf4;
}

.pm-dab-tune {
  display: grid;
  grid-template-columns: minmax(120px, 0.85fr) minmax(0, 1fr) auto;
  gap: 6px;
  position: relative;
  z-index: 2;
}

.pm-dab-favs-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #2c313c;
  background: #161920;
  color: #8b93a6;
  border-radius: 8px;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.pm-dab-favs-toggle.on {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.45);
}

.pm-play-tri {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 9px;
  border-color: transparent transparent transparent currentColor;
  margin-left: 2px;
}

.pm-dab-power:not(.on) svg {
  margin-left: 0;
}

.pm-dab-row {
  display: flex;
  gap: 4px;
  align-items: stretch;
}

.pm-dab-row > button:first-child {
  flex: 1;
  min-width: 0;
}

.pm-dab-star {
  width: 34px;
  flex-shrink: 0;
  border: 1px solid #2c313c;
  background: #161920;
  color: #8b93a6;
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.pm-dab-star.on {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.4);
}

.pm-dab .pm-lounge-stations .pm-dab-star {
  width: 34px;
  padding: 0;
  flex: none;
  background: #161920;
}

.pm-yt-shelf {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  height: 100%;
  min-height: 0;
  padding: 8px;
  overflow: auto;
}

.pm-yt-shelf-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #161920;
  color: #fffdf9;
  text-align: left;
  cursor: pointer;
}

.pm-yt-shelf-card img {
  width: 100%;
  height: 78px;
  object-fit: cover;
  background: #101116;
}

.pm-yt-shelf-card span {
  padding: 6px 8px 8px;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.25;
}

.pm-dab-land,
.pm-dab-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  background: #161920;
  border: 1px solid #2c313c;
  border-radius: 8px;
  padding: 5px 8px;
  color: #8b93a6;
}

.pm-dab-land {
  position: relative;
  overflow: visible;
}

.pm-dab-land span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.pm-dab-land-btn,
.pm-dab-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #e8ecf4;
  font-size: 12px;
  font-weight: 600;
}

.pm-dab-land-pick {
  position: relative;
  flex: 1;
  min-width: 0;
}

.pm-dab-land-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 0;
  text-align: left;
}

.pm-dab-land-btn em {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
}

.pm-dab-land-menu {
  position: absolute;
  top: auto;
  bottom: calc(100% + 6px);
  left: 0;
  right: auto;
  z-index: 30;
  margin: 0;
  padding: 6px;
  list-style: none;
  min-width: 280px;
  width: max-content;
  max-width: min(340px, 70vw);
  max-height: 280px;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--pm-theme-card-bg, #fffdf9);
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(16, 17, 22, 0.16);
}

.pm-dab-land-menu button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  color: var(--pm-theme-text-main, #101116);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.pm-dab-land-menu button span {
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  width: 1.4em;
  flex-shrink: 0;
}

.pm-dab-land-menu button:hover,
.pm-dab-land-menu button.on {
  background: var(--pm-theme-cta-bg, #4b5fff);
  color: var(--pm-theme-cta-text, #fff);
}

.pm-dab-land-menu,
.pm-dab .pm-lounge-stations ul {
  scrollbar-width: thin;
  scrollbar-color: var(--pm-theme-card-border, #d9dbe3) var(--pm-theme-bg, #f7f4ec);
}

.pm-dab-land-menu::-webkit-scrollbar,
.pm-dab .pm-lounge-stations ul::-webkit-scrollbar {
  width: 8px;
}

.pm-dab-land-menu::-webkit-scrollbar-track,
.pm-dab .pm-lounge-stations ul::-webkit-scrollbar-track {
  background: var(--pm-theme-bg, #f7f4ec);
}

.pm-dab-land-menu::-webkit-scrollbar-thumb,
.pm-dab .pm-lounge-stations ul::-webkit-scrollbar-thumb {
  background: var(--pm-theme-card-border, #d9dbe3);
  border-radius: 8px;
}

.pm-dab-wait {
  margin: 0;
  padding: 8px 4px;
  font-size: 12px;
  color: #8b93a6;
}

.pm-dab-list ul {
  max-height: none;
}

.pm-dab .pm-lounge-stations-label {
  color: #8b93a6;
}

.pm-dab .pm-lounge-stations button {
  background: #161920;
  border-color: #2c313c;
  color: #e8ecf4;
}

.pm-dab .pm-lounge-stations button small {
  color: #8b93a6;
}

.pm-dab .pm-lounge-stations button.on {
  border-color: #4ade80;
  background: rgba(74, 222, 128, 0.14);
}

.sgd-tv .pm-lounge-stations ul {
  max-height: 132px;
}

.pm-lounge-vol {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pm-lounge-vol button {
  border: 0;
  background: transparent;
  color: var(--pm-theme-text-main, #101116);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.pm-lounge-vol input {
  flex: 1;
  min-width: 0;
}

.pm-lounge-video {
  flex: 1;
  min-height: 88px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--pm-theme-bg, #efeae0);
}

.pm-lounge-video.has-player {
  background: #101116;
}

.pm-lounge-video video,
.pm-lounge-video iframe {
  width: 100%;
  height: 100%;
  min-height: 88px;
  border: 0;
  display: block;
}

.sgd-tv .pm-lounge-video.has-player iframe {
  pointer-events: none;
}

.pm-yt-hits {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  min-height: 160px;
  max-height: 240px;
  overflow-y: auto;
  padding: 6px;
  background: #101116;
}

.pm-yt-hit {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  border-radius: 8px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.pm-yt-hit:hover {
  background: rgba(75, 95, 255, 0.35);
}

.pm-yt-hit img {
  width: 88px;
  height: 50px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  background: #222;
}

.pm-yt-hit span {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pm-lounge-video:has(.pm-lounge-video-empty.is-yt) {
  background: #0f0f0f;
  min-height: 228px;
}

.pm-lounge-video-empty {
  height: 88px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pm-theme-text-muted, #747b8b);
  background: var(--pm-theme-bg, #efeae0);
  background-size: cover;
  background-position: center;
}

.pm-lounge-video-empty.is-yt {
  height: auto;
  min-height: 228px;
  padding: 0;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: #fff;
  background: #0f0f0f;
}

.pm-yt-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 228px;
  padding: 28px 16px 42px;
  overflow: hidden;
}

.pm-yt-stage-glow {
  position: absolute;
  inset: 12% 18% 32%;
  background: radial-gradient(ellipse at center, rgba(255, 0, 51, 0.14), transparent 70%);
  pointer-events: none;
}

.pm-yt-how-lead {
  position: relative;
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.pm-yt-how {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pm-yt-how li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.pm-yt-how li.is-here {
  background: #fff;
  border-color: #fff;
  color: #0f0f0f;
}

.pm-yt-how-sep {
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: rgba(255, 255, 255, 0.45) !important;
}

.pm-yt-how-alt {
  position: relative;
  margin: 12px 0 0;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.48);
}

.pm-yt-how-down {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 16px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  animation: pm-yt-nudge 1.8s ease-in-out infinite;
}

@keyframes pm-yt-nudge {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pm-yt-how-down {
    animation: none;
  }
}

.pm-yt-chrome {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 12px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72));
}

.pm-yt-chrome-play {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ff0033;
  color: #fff;
  flex-shrink: 0;
}

.pm-yt-chrome-play svg {
  margin-left: 1px;
}

.pm-yt-chrome-line {
  flex: 1;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, #ff0033 0 18%, rgba(255, 255, 255, 0.28) 18%);
}

.pm-yt-chrome b {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
}

.pm-yt-chrome b:last-child {
  width: 14px;
  height: 9px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.22);
}

.pm-lounge-url {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-width: 0;
}

.pm-lounge-url input {
  min-width: 0;
  flex: 1 1 80px;
}

.pm-lounge-url svg {
  flex-shrink: 0;
  color: var(--pm-theme-text-muted, #747b8b);
}

.pm-lounge-dock.video:has(.is-yt) .pm-lounge-url input {
  border-color: var(--pm-theme-cta-bg, #4b5fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pm-theme-cta-bg, #4b5fff) 22%, transparent);
}

.pm-lounge-url button {
  border: 0;
  background: var(--pm-theme-cta-bg, #4b5fff);
  color: var(--pm-theme-cta-text, #fff);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.pm-lounge-url-tv {
  display: none;
}

.sgd-tv .pm-lounge-dock.video {
  flex: 1;
  min-height: 0;
  height: 100%;
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: 0;
}

.sgd-tv .pm-lounge-video,
.sgd-tv .pm-lounge-video video,
.sgd-tv .pm-lounge-video iframe,
.sgd-tv .pm-lounge-video-empty {
  min-height: 0;
  height: 100%;
  border-radius: 0;
}

.sgd-tv .pm-lounge-video {
  background: transparent;
}

.sgd-tv .pm-lounge-video-empty {
  background: transparent;
  background-size: cover;
  background-position: center;
  color: transparent;
  height: 100%;
}

.sgd-tv .pm-lounge-video-empty span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sgd-tv .pm-lounge-dock.radio {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 4;
  flex: none;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  background: rgba(255, 253, 249, 0.92);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 253, 249, 0.4);
  box-shadow: 0 16px 40px rgba(16, 17, 22, 0.18);
  border-radius: 16px;
  padding: 8px 12px 8px 14px;
}

.sgd-tv .pm-lounge-dock.radio .pm-lounge-now {
  flex: 1;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.sgd-tv .pm-lounge-dock.radio .pm-lounge-now b {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sgd-tv .pm-lounge-dock.radio .pm-lounge-now small {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #747b8b;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sgd-tv .pm-lounge-stations ul {
  max-height: 132px;
}

.pm-lounge-eq {
  display: inline-flex;
  width: 11px;
  height: 11px;
  margin-left: 2px;
  background:
    linear-gradient(#4b5fff, #4b5fff) 0 100% / 2px 40%,
    linear-gradient(#4b5fff, #4b5fff) 4.5px 100% / 2px 90%,
    linear-gradient(#4b5fff, #4b5fff) 9px 100% / 2px 55%;
  background-repeat: no-repeat;
  animation: pm-lounge-eq 0.9s ease-in-out infinite;
}

@keyframes pm-lounge-eq {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

@media (max-width: 768px) {
  .pm-lounge-url {
    flex-wrap: wrap;
  }

  .pm-lounge-url button {
    padding: 6px 8px;
  }
}

@media (max-width: 560px) {
  .pm-kiosk-grid {
    grid-template-rows: minmax(200px, 26vh) minmax(0, 1fr);
  }

  .pm-lounge-url-tv {
    display: none;
  }
}

.pm-kiosk-tech-fold {
  border: 1px solid var(--pm-theme-card-border, #d9dbe3);
  border-radius: 10px;
  padding: 8px 12px 10px;
  background: var(--pm-theme-card-bg, #fffdf9);
}

.pm-kiosk-tech-fold > summary {
  cursor: pointer;
  font-size: 11px;
  font-weight: 750;
  color: var(--pm-theme-text-muted, #747b8b);
}

.pm-ai-hub-header {
  flex: 0 0 auto;
}



/* ==========================================================================
   PICKME KIOSK V2 — EXACT VISUAL CONTRACT R1 STYLESHEET
   Exact CSS matching PICKME_KIOSK_EXACT_HANDOFF_R1/index.html 1:1
   ========================================================================== */

* {
  box-sizing: border-box;
}

html:has(.pm-kiosk-root),
body:has(.pm-kiosk-root),
.pm-kiosk-root {
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

#root:has(.pm-kiosk-root) {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

button,
input,
select {
  font: inherit;
}

:root {
  --bg: #070c14;
  --panel: #101721;
  --panel2: #141d28;
  --soft: #192331;
  --line: #2b3745;
  --text: #f7f4ec;
  --muted: #8f9bad;
  --accent: #6870ff;
  --accent2: #39a6ff;
  --good: #35d487;
  --warn: #f0b765;
  --bad: #ff625d;
  --violet: #b46cff;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
  --radius: 14px;
}

:root,
body,
body[data-theme],
.pm-kiosk-root,
.pm-kiosk-root[data-theme],
.pm-salon-theme-pickme_light {
  --bg: #f8fafc;
  --panel: #ffffff;
  --panel2: #f1f5f9;
  --soft: #e2e8f0;
  --line: #e2e8f0;
  --text: #0f172a;
  --text-primary: #0f172a;
  --muted: #64748b;
  --accent: #4b5fff;
  --accent2: #3b82f6;
  --good: #10b981;
  --warn: #f59e0b;
  --bad: #ef4444;
  --violet: #4b5fff;
  --pulse-indigo: #4b5fff;
  --pulse-gold: #f59e0b;
  --shadow: 0 4px 20px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.06);
}

body,
.pm-kiosk-root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background 0.2s, color 0.2s;
}

.app {
  height: 100vh !important;
  display: grid !important;
  grid-template-columns: 268px minmax(620px, 1fr) 244px !important;
  grid-template-rows: 70px minmax(0, 1fr) 34px !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--line) !important;
  background: var(--bg) !important;
}

.top {
  grid-column: 1 / -1 !important;
  height: 70px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 268px minmax(360px, 1fr) auto !important;
  border-bottom: 1px solid var(--line) !important;
  background: color-mix(in srgb, var(--panel) 94%, transparent) !important;
}

.hero {
  margin: 0 !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  background: linear-gradient(115deg, var(--panel), color-mix(in srgb, var(--accent) 8%, var(--panel2))) !important;
  display: flex !important;
  align-items: center !important;
  padding: 18px 20px !important;
  gap: 15px !important;
  height: 94px !important;
}

.footer {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  height: 34px !important;
  margin: 0 !important;
  border-top: 1px solid var(--line) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 12px !important;
  color: var(--muted) !important;
  font-size: 10px !important;
  letter-spacing: 0.03em !important;
  background: var(--panel) !important;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-right: 1px solid var(--line);
}

.petals {
  position: relative;
  width: 33px;
  height: 28px;
  flex: none;
}

.petals:before,
.petals:after {
  content: "";
  position: absolute;
  width: 23px;
  height: 11px;
  border-radius: 100% 12% 100% 12%;
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  transform: rotate(22deg);
}

.petals:before {
  left: 0;
  top: 2px;
}

.petals:after {
  right: 0;
  bottom: 2px;
  transform: rotate(202deg);
  opacity: 0.85;
}

.brand strong {
  font-family: Georgia, serif;
  font-size: 28px;
  letter-spacing: -1.2px;
}

.badge {
  font-size: 10px;
  letter-spacing: 0.09em;
  border: 1px solid color-mix(in srgb, var(--accent) 70%, var(--line));
  color: var(--accent2);
  padding: 4px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  font-weight: 800;
}

.salon-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  gap: 16px;
}

.salon-name {
  font-size: 20px;
  font-weight: 780;
  letter-spacing: -0.35px;
}

.salon-address {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}

.live {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--good) 32%, var(--line));
  background: color-mix(in srgb, var(--good) 9%, var(--panel));
  color: var(--good);
  font-size: 11px;
  font-weight: 800;
  padding: 9px 12px;
  border-radius: 11px;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}

.head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  padding: 0 10px;
  border-left: 1px solid var(--line);
}

.clock-top {
  text-align: right;
  margin-right: 5px;
}

.clock-top b {
  font-size: 18px;
}

.clock-top small {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

.top-btn {
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel2);
  color: var(--text);
  padding: 0 10px;
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
}

.top-btn.start {
  color: var(--good);
}

.top-btn.close {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 40%, var(--line));
}

.pm-kiosk-root * {
  box-sizing: border-box !important;
}

.pult {
  grid-column: 1 !important;
  grid-row: 2 !important;
  width: 268px !important;
  min-height: 0 !important;
  padding: 10px !important;
  border-right: 1px solid var(--line) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto auto !important;
  gap: 9px !important;
  background: color-mix(in srgb, var(--panel) 62%, var(--bg)) !important;
  box-sizing: border-box !important;
}

.pult .counters,
.pult .section {
  width: 100% !important;
  max-width: 248px !important;
  box-sizing: border-box !important;
}

.counters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.count {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  padding: 8px 6px;
  text-align: center;
}

.count b {
  font-size: 16px;
  color: var(--text);
}

.count span {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}

.count.wait b {
  color: var(--warn);
}

.section {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  min-height: 0;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.section-title span:last-child {
  color: var(--good);
  font-size: 10px;
}

.staff-list {
  padding: 8px !important;
  display: grid !important;
  gap: 7px !important;
  overflow: auto !important;
}

.staff-card {
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 9px !important;
  background: var(--panel2) !important;
}

.staff-main {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}

.avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 1px solid var(--line) !important;
}

.staff-name {
  font-weight: 750 !important;
  font-size: 12px !important;
}

.chair {
  font-size: 10px !important;
  color: var(--warn) !important;
  background: color-mix(in srgb, var(--warn) 12%, transparent) !important;
  padding: 3px 5px !important;
  border-radius: 5px !important;
}

.auto-pill {
  margin-left: auto !important;
  color: var(--accent2) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

.staff-actions {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 5px !important;
  margin-top: 8px !important;
}

.staff-actions button {
  height: 31px !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: var(--panel) !important;
  color: var(--muted) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

.staff-actions .selected {
  background: color-mix(in srgb, var(--accent) 88%, var(--panel)) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}

.queue {
  padding: 10px;
}

.queue-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.queue-num {
  font-size: 28px;
  color: var(--accent2);
  font-weight: 800;
}

.queue-copy {
  font-size: 11px;
  line-height: 1.3;
  flex: 1;
}

.mini-btn {
  height: 32px;
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--text);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  padding: 0 8px;
  cursor: pointer;
}

.themes {
  padding: 9px;
}

.theme-title {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 800;
  margin-bottom: 7px;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.theme-btn {
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel2);
  color: var(--text);
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
}

.theme-btn.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

.swatch {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: -1px;
}

.workspace {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  padding: 10px;
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr);
  gap: 9px;
}

.tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 12px;
  padding: 4px;
}

.tab {
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.055em;
  cursor: pointer;
}

.tab.active {
  background: var(--soft);
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: none;
}

.panel {
  display: none;
  min-height: 0;
}

.panel.active {
  display: grid;
}

.overview {
  grid-template-rows: 94px 94px minmax(190px, 1fr) 178px;
  gap: 9px;
}

.hero {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(115deg, var(--panel), color-mix(in srgb, var(--accent) 8%, var(--panel2)));
  display: flex;
  align-items: center;
  padding: 18px 20px;
  gap: 15px;
}

.hero-copy {
  flex: 1;
}

.eyebrow {
  font-size: 10px;
  color: var(--accent2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 850;
}

.hero h1 {
  font-family: Georgia, serif;
  font-size: 23px;
  margin: 4px 0 4px;
  letter-spacing: -0.4px;
}

.hero p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.health {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ring {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--accent2) 0 84%, var(--soft) 84%);
  position: relative;
}

.ring:before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--panel);
}

.ring b {
  z-index: 1;
  font-size: 14px;
}

.health-copy small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}

.health-copy b {
  display: inline-block;
  margin-top: 5px;
  color: var(--good);
  font-size: 11px;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
}

.metric {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  padding: 13px;
}

.metric label {
  display: block;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.metric b {
  display: block;
  font-size: 20px;
  margin: 7px 0 3px;
}

.metric small {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.25;
  display: block;
}

.metric .good {
  color: var(--good);
}

.metric .warn {
  color: var(--warn);
}

.systems {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) 0.65fr;
  min-height: 0;
}

.system-list {
  padding: 12px 16px;
  min-width: 0;
}

.subhead {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 800;
  margin-bottom: 8px;
}

.system-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
  padding: 7px 2px;
  font-size: 10px;
}

.system-row:last-child {
  border: 0;
}

.sys-icon {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--soft);
  display: grid;
  place-items: center;
  color: var(--accent2);
}

.sys-name {
  flex: 1;
}

.sys-state {
  font-size: 10px;
  color: var(--good);
}

.sys-state.off {
  color: var(--muted);
}

.analog-wrap {
  border-left: 1px solid var(--line);
  display: grid;
  place-items: center;
  padding: 10px;
}

.analog {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: radial-gradient(circle at 50% 45%, var(--panel2), var(--bg));
  position: relative;
  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.28);
}

.analog:before {
  content: "12\A\A\A\A\A\A 6";
  white-space: pre;
  position: absolute;
  inset: 9px;
  text-align: center;
  font-size: 10px;
  color: var(--muted);
}

.hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: 50% 100%;
  border-radius: 9px;
}

.hour {
  width: 3px;
  height: 34px;
  background: var(--accent);
  transform: translateX(-50%) rotate(40deg);
}

.minute {
  width: 2px;
  height: 45px;
  background: var(--muted);
  transform: translateX(-50%) rotate(168deg);
}

.pin {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.analog-time {
  text-align: center;
  margin-top: 7px;
  font-size: 11px;
}

.analog-time b {
  font-size: 16px;
}

.analog-time small {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

.media-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.media-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
  padding: 12px;
}

.media-head {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.radio-lcd {
  margin-top: 8px;
  border: 1px solid color-mix(in srgb, var(--good) 30%, var(--line));
  border-radius: 9px;
  background: #07170e;
  padding: 10px;
  color: #b7ffd7;
  display: flex;
  justify-content: space-between;
}

.radio-lcd b {
  display: block;
  font-family: ui-monospace, monospace;
  font-size: 18px;
  color: #5eff9f;
}

.radio-lcd small {
  font-size: 10px;
}

.wave {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 112px;
  justify-content: center;
}

.wave i {
  display: block;
  width: 2px;
  background: var(--good);
  border-radius: 2px;
  animation: wave 1.1s ease-in-out infinite;
}

.wave i:nth-child(2n) {
  animation-delay: -0.35s;
}

.wave i:nth-child(3n) {
  animation-delay: -0.7s;
}

@keyframes wave {
  0%, 100% {
    height: 8px;
    opacity: 0.35;
  }
  50% {
    height: 36px;
    opacity: 1;
  }
}

.media-controls {
  display: flex;
  gap: 7px;
  align-items: center;
  margin-top: 9px;
}

.round {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--soft);
  color: var(--text);
  cursor: pointer;
}

.action {
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  color: var(--text);
  font-size: 10px;
  font-weight: 800;
  padding: 0 12px;
  cursor: pointer;
}

.slider {
  height: 5px;
  background: var(--soft);
  border-radius: 8px;
  flex: 1;
  position: relative;
}

.slider:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 62%;
  background: var(--accent2);
  border-radius: 8px;
}

.video-preview {
  display: grid;
  grid-template-columns: 46% 1fr;
  height: 112px;
  margin-top: 9px;
  border-radius: 9px;
  overflow: hidden;
  background: #08090c;
}

.video-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-copy {
  padding: 13px;
}

.video-copy b {
  display: block;
  font-size: 12px;
}

.video-copy small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: 5px;
}

.video-copy button {
  margin-top: 12px;
  width: 100%;
}

.right {
  grid-column: 3;
  grid-row: 2;
  min-height: 0;
  padding: 10px;
  border-left: 1px solid var(--line);
  display: grid;
  grid-template-rows: minmax(205px, 1.25fr) minmax(170px, 0.85fr) minmax(160px, 0.8fr);
  gap: 9px;
  background: color-mix(in srgb, var(--panel) 62%, var(--bg));
}

.melisa {
  padding: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.melisa-title {
  text-align: left;
  color: var(--violet);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.05em;
}

.melisa-orbit {
  height: 106px;
  display: grid;
  place-items: center;
  position: relative;
}

.melisa-orbit:before,
.melisa-orbit:after {
  content: "";
  position: absolute;
  width: 45px;
  height: 28px;
  background: repeating-linear-gradient(90deg, transparent 0 4px, var(--violet) 4px 6px);
  opacity: 0.55;
  clip-path: polygon(0 43%, 10% 43%, 10% 15%, 20% 15%, 20% 68%, 30% 68%, 30% 28%, 40% 28%, 40% 82%, 50% 82%, 50% 8%, 60% 8%, 60% 67%, 70% 67%, 70% 35%, 80% 35%, 80% 59%, 90% 59%, 90% 42%, 100% 42%, 100% 55%, 0 55%);
}

.melisa-orbit:before {
  left: 8px;
}

.melisa-orbit:after {
  right: 8px;
  transform: scaleX(-1);
}

.melisa-img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--violet);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--violet) 18%, transparent), 0 0 28px color-mix(in srgb, var(--violet) 28%, transparent);
}

.melisa p {
  font-size: 10px;
  line-height: 1.45;
  color: var(--muted);
  margin: 7px 8px 10px;
}

.melisa button {
  margin-top: auto;
  height: 36px;
  border: 1px solid var(--violet);
  border-radius: 10px;
  background: color-mix(in srgb, var(--violet) 13%, var(--panel));
  color: var(--text);
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
}

.qr {
  padding: 12px;
  text-align: center;
}

.qr h3,
.status h3 {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin: 0 0 10px;
  text-align: left;
}

.qr-box {
  width: 112px;
  height: 112px;
  margin: 0 auto;
  border: 10px solid #fff;
  border-radius: 9px;
  background-color: #fff;
  background-image: repeating-conic-gradient(#111 0 25%, transparent 0 50%);
  background-size: 12px 12px;
  box-shadow: inset 0 0 0 2px #111;
  display: grid;
  place-items: center;
}

.qr p {
  font-size: 10px;
  margin: 8px 0 2px;
}

.qr a {
  font-size: 10px;
  color: var(--accent2);
  font-weight: 750;
}

.status {
  padding: 12px;
}

.status-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  padding: 6px 0;
}

.status-row span:nth-child(2) {
  flex: 1;
}

.status-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  color: var(--good);
  font-size: 10px;
}

.status-icon.warn {
  color: var(--warn);
}

.status-icon.off {
  color: var(--muted);
}

.footer {
  grid-column: 1 / -1;
  grid-row: 3;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.03em;
  background: var(--panel);
}

.footer-actions {
  display: flex;
  gap: 7px;
}

.footer-actions button {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.media-workspace,
.sensor-workspace,
.security-workspace {
  grid-template-rows: 46px minmax(0, 1fr);
  gap: 9px;
}

.subtabs {
  display: flex;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  padding: 5px;
}

.subtab {
  flex: 1;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.subtab.active {
  background: var(--soft);
  color: var(--text);
}

.media-mode {
  display: none;
  min-height: 0;
}

.media-mode.active {
  display: grid;
}

.radio-full {
  grid-template-columns: 38% 1fr;
  gap: 9px;
}

.now-card,
.library-card,
.video-stage,
.video-library,
.sensor-card,
.chain-card,
.camera-card,
.events-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  min-height: 0;
}

.now-card {
  padding: 18px;
  display: flex;
  flex-direction: column;
}

.now-card h2 {
  font-family: Georgia, serif;
  font-size: 24px;
  margin: 8px 0 2px;
}

.now-card .freq {
  font: 700 34px ui-monospace;
  color: var(--good);
}

.big-wave {
  height: 150px;
  margin: 18px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 12px;
  background: linear-gradient(180deg, #07170e, #09120d);
}

.big-wave i {
  width: 4px;
  background: var(--good);
  border-radius: 5px;
  animation: wave 1.1s infinite;
}

.big-wave i:nth-child(2n) {
  animation-delay: -0.22s;
}

.big-wave i:nth-child(3n) {
  animation-delay: -0.55s;
}

.now-card .media-controls {
  margin-top: auto;
}

.library-card {
  padding: 14px;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 10px;
}

.search-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 7px;
}

.select,
.search {
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel2);
  color: var(--text);
  padding: 0 10px;
  font-size: 10px;
}

.chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.chip {
  border: 1px solid var(--line);
  background: var(--soft);
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 10px;
  cursor: pointer;
}

.chip.active {
  border-color: var(--accent);
  color: var(--text);
}

.station-list {
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  align-content: start;
}

.station {
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  background: rgba(17, 21, 34, 0.65);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 10px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.station:hover {
  border-color: rgba(75, 95, 255, 0.45) !important;
  background: rgba(75, 95, 255, 0.1) !important;
  box-shadow: 0 2px 12px rgba(75, 95, 255, 0.16) !important;
  transform: translateY(-1px);
}

.station b {
  color: #60a5fa;
  font: 700 11px ui-monospace, monospace;
}

.station small {
  margin-left: auto;
  color: #94a3b8;
}

.station.active {
  border-color: #4b5fff;
  background: linear-gradient(135deg, rgba(75, 95, 255, 0.22) 0%, rgba(59, 130, 246, 0.12) 100%);
  box-shadow: 0 0 12px rgba(75, 95, 255, 0.25);
}

.video-full {
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: 9px;
}

.video-stage {
  padding: 12px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
}

.screen {
  min-height: 0;
  border-radius: 11px;
  overflow: hidden;
  background: #050509;
  position: relative;
}

.screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) brightness(0.75);
}

.screen-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  background: linear-gradient(transparent 40%, rgba(0, 0, 0, 0.83));
}

.screen-overlay h2 {
  font-family: Georgia, serif;
  font-size: 25px;
  margin: 0;
}

.screen-overlay p {
  font-size: 10px;
  color: #c8c5cc;
}

.video-actions {
  display: flex;
  gap: 7px;
}

.video-library {
  padding: 14px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
}

.video-grid {
  overflow: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  align-content: start;
}

.video-tile {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel2);
  overflow: hidden;
  cursor: pointer;
}

.thumb {
  height: 72px;
  background: linear-gradient(135deg, #24123a, #07172f);
  position: relative;
}

.thumb:after {
  content: "▶";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: white;
  font-size: 18px;
}

.video-tile b {
  display: block;
  padding: 8px 8px 2px;
  font-size: 10px;
}

.video-tile small {
  display: block;
  padding: 0 8px 8px;
  color: var(--muted);
  font-size: 10px;
}

.sensor-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 180px;
  gap: 9px;
}

.sensor-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.sensor-card {
  padding: 16px;
}

.sensor-person {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sensor-card h3 {
  margin: 0;
  font-size: 14px;
}

.sensor-card p {
  color: var(--muted);
  font-size: 10px;
}

.sensor-state {
  margin-top: 14px;
  padding: 12px;
  border-radius: 10px;
  background: var(--soft);
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 10px;
}

.sensor-state b {
  margin-left: auto;
  color: var(--muted);
}

.chain-card,
.events-card {
  padding: 14px;
}

.chain {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 125px;
  gap: 8px;
}

.node {
  border: 1px solid var(--line);
  background: var(--panel2);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
  font-size: 10px;
  min-width: 80px;
}

.arrow {
  color: var(--accent2);
}

.tv-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--panel), color-mix(in srgb, var(--accent) 12%, var(--panel2)));
  padding: 16px;
}

.tv-card h3 {
  margin: 0;
  font-size: 14px;
}

.tv-card p {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.4;
}

.tv-token {
  font: 800 25px ui-monospace;
  letter-spacing: 0.16em;
  color: var(--accent2);
}

.security-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(0, 1fr) 170px;
  gap: 9px;
}

.camera-card {
  padding: 12px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 9px;
}

.camera-head {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
}

.camera-head span {
  color: var(--muted);
}

.camera-empty {
  border: 1px dashed var(--line);
  border-radius: 11px;
  display: grid;
  place-items: center;
  text-align: center;
  background: linear-gradient(135deg, #080b10, #0d1018);
}

.camera-empty b {
  font-size: 13px;
}

.camera-empty p {
  font-size: 10px;
  color: var(--muted);
  margin: 5px 0 12px;
}

.camera-actions {
  display: flex;
  gap: 7px;
}

.events-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.event-list {
  display: grid;
  gap: 6px;
}

.event {
  display: flex;
  gap: 8px;
  font-size: 10px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.event time {
  color: var(--muted);
}

.security-mode {
  padding: 12px;
  border-radius: 11px;
  background: var(--soft);
}

.security-mode b {
  color: var(--good);
}

.security-mode p {
  font-size: 10px;
  color: var(--muted);
}

/* ==========================================================================
   FLUID RESPONSIVE UNCLIPPED RULES FOR TABLET & MOBILE (390×844)
   ========================================================================== */

@media (max-width: 1100px) {
  html,
  body,
  .pm-kiosk-root {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .app {
    height: auto;
    min-height: 100vh;
    grid-template-columns: 236px minmax(0, 1fr);
    grid-template-rows: 66px minmax(760px, auto) auto 34px;
  }
  .top {
    grid-template-columns: 236px 1fr;
  }
  .head-actions {
    display: none;
  }
  .pult {
    grid-column: 1;
  }
  .workspace {
    grid-column: 2;
  }
  .right {
    grid-column: 1 / -1;
    grid-row: 3;
    grid-template-columns: 1.2fr 0.8fr 0.8fr;
    grid-template-rows: 240px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .footer {
    grid-row: 4;
  }
  .metrics {
    grid-template-columns: 1fr 1fr;
  }
  .overview {
    grid-template-rows: 94px 190px 260px 190px;
  }
}

@media (max-width: 760px) {
  html,
  body,
  .pm-kiosk-root {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    width: 100% !important;
  }
  .app {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
    height: auto;
  }
  .top {
    display: flex;
    flex-wrap: wrap;
    height: auto;
    min-height: 64px;
    padding: 8px 12px;
  }
  .brand {
    border: 0;
  }
  .salon-head {
    flex: 1;
  }
  .pult,
  .workspace,
  .right {
    border: 0;
    width: 100%;
  }
  .pult {
    display: flex;
    flex-direction: column;
    gap: 9px;
  }
  .counters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    width: 100%;
  }
  .count {
    min-width: 0;
  }
  .staff-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
  }
  .staff-actions button {
    font-size: 7.5px;
    padding: 0 2px;
  }
  .queue-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .theme-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }
  .workspace {
    display: grid;
    min-height: 600px;
  }
  .tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
  }
  .tab {
    font-size: 10px;
    padding: 6px 2px;
  }
  .right {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .metrics {
    grid-template-columns: 1fr 1fr;
  }
  .systems {
    grid-template-columns: 1fr;
  }
  .analog-wrap {
    display: none;
  }
  .media-preview,
  .radio-full,
  .video-full,
  .sensor-body,
  .security-body {
    grid-template-columns: 1fr;
  }
  .overview {
    grid-template-rows: auto auto auto auto;
  }
  .sensor-grid {
    grid-column: auto;
    grid-template-columns: 1fr;
  }
  .events-card {
    grid-column: auto;
  }
  .station-list {
    grid-template-columns: 1fr;
  }
  .footer {
    height: 34px;
  }
  .clock-top,
  .live {
    display: none;
  }
}

/* PICKME SALON PULSE — one desktop contract (no R-layers) */
.pm-kiosk-root .panel { display: none; }
.pm-kiosk-root .panel.active { display: grid; }
.pm-kiosk-root .pm-deco-scissors {
  position: absolute;
  width: 48px;
  height: 48px;
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
}
.pm-kiosk-root .hero.hero-dense { position: relative; }
.pm-kiosk-root .pm-pult-fast-actions { display: none !important; }
.pm-kiosk-root:not(.is-tv-max) .sgd-root.sgd-tv,
.pm-kiosk-root:not(.is-tv-max) .pm-guest-tv {
  display: none !important;
}
.pm-kiosk-root .app,
.pm-kiosk-root .workspace,
.pm-kiosk-root .overview {
  transform: none !important;
  zoom: normal !important;
}

/* ==========================================================================
   DESKTOP PACK
   268 | fluid | 244, 70px header, 34px footer, no scroll, dense packing
   ========================================================================== */
html:has(.pm-kiosk-root),
body:has(.pm-kiosk-root),
body:has(.pm-kiosk-root) #root,
body:has(.pm-kiosk-root) .pickme-app-frame {
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  margin: 0 !important;
}
.pm-kiosk-root {
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}
.pm-kiosk-root .app {
  height: 100% !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: 268px minmax(0, 1fr) 244px !important;
  grid-template-rows: 70px minmax(0, 1fr) 34px !important;
  gap: 0 !important;
}
.pm-kiosk-root .top {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  height: 70px !important;
  display: grid !important;
  grid-template-columns: 268px minmax(0, 1fr) auto !important;
  padding: 0 !important;
}
.pm-kiosk-root .pult {
  grid-column: 1 !important;
  grid-row: 2 !important;
  width: auto !important;
  min-width: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  padding: 8px !important;
  display: block !important;
}
.pm-kiosk-root .workspace {
  grid-column: 2 !important;
  grid-row: 2 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 8px 10px 8px !important;
  gap: 8px !important;
}
.pm-kiosk-root .right,
.pm-kiosk-root .rail {
  grid-column: 3 !important;
  grid-row: 2 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
.pm-kiosk-root .footer {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  height: 34px !important;
  overflow: hidden !important;
}

/* Left pult: three masters + queue + theme, no scrollbar */
.pm-kiosk-root .pm-salon-pult-root,
.pm-kiosk-root .pm-pult-content-scroll {
  height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 0 !important;
  min-height: 0 !important;
}
.pm-kiosk-root .pm-pult-topbar { flex: 0 0 auto !important; }
.pm-kiosk-root .pm-pult-card {
  padding: 8px 10px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}
.pm-kiosk-root .pm-pult-content-scroll > .pm-pult-card:first-of-type {
  flex: 1 1 auto !important;
}
.pm-kiosk-root .pm-pult-staff-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.pm-kiosk-root .pm-pult-staff-card {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 8px !important;
}
.pm-kiosk-root .pm-pult-staff-photo { width: 34px !important; height: 34px !important; }
.pm-kiosk-root .pm-pult-status-badge,
.pm-kiosk-root .pm-pult-conn-pill { display: none !important; }
.pm-kiosk-root .pm-pbtn-matrix { gap: 4px !important; margin-top: 6px !important; }
.pm-kiosk-root .pm-pbtn { height: 26px !important; font-size: 10px !important; }
.pm-kiosk-root .pm-pult-dock { flex: 0 0 auto !important; display: flex !important; flex-direction: column !important; gap: 8px !important; }

/* Overview packed like the mock */
.pm-kiosk-root .workspace .tabs { flex: 0 0 36px !important; }
.pm-kiosk-root .panel.overview.active {
  display: grid !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto auto minmax(210px, 1fr) !important;
  gap: 8px !important;
  padding: 0 !important;
}
.pm-kiosk-root .overview .hero {
  height: 88px !important;
  padding: 12px 18px !important;
}
.pm-kiosk-root .overview .metrics {
  height: 76px !important;
  gap: 8px !important;
}
.pm-kiosk-root .overview .metric-card { padding: 8px 12px !important; }
.pm-kiosk-root .overview .systems {
  display: grid !important;
  grid-template-columns: minmax(0, 1.25fr) 186px !important;
  overflow: hidden !important;
  isolation: isolate !important;
  min-height: 0 !important;
}
.pm-kiosk-root .analog-wrap {
  position: relative !important;
  inset: auto !important;
  overflow: hidden !important;
  max-width: 186px !important;
}
.pm-kiosk-root .kv2-clock svg { width: 112px !important; height: 112px !important; overflow: hidden !important; }
.pm-kiosk-root .overview .media-preview {
  height: auto !important;
  min-height: 0 !important;
  gap: 8px !important;
}
.pm-kiosk-root .overview .systems {
  height: auto !important;
  max-height: 220px !important;
}
.pm-kiosk-root .radio-lcd {
  flex: 1 !important;
  min-height: 64px !important;
}
.pm-kiosk-root .media-controls {
  flex: 0 0 auto !important;
  gap: 10px !important;
  margin-top: 4px !important;
}
.pm-kiosk-root .media-controls .round {
  width: 34px !important;
  height: 34px !important;
  font-size: 12px !important;
}
.pm-kiosk-root .media-controls .action {
  height: 34px !important;
  padding: 0 12px !important;
}
.pm-kiosk-root .media-controls .slider,
.pm-kiosk-root .media-controls input.slider {
  flex: 1 !important;
  height: 10px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  border-radius: 6px !important;
  background: var(--soft) !important;
  border: 1px solid var(--line) !important;
  overflow: hidden !important;
  cursor: pointer !important;
}
.pm-kiosk-root .media-controls input.slider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: var(--accent2) !important;
  border: 0 !important;
  box-shadow: -200px 0 0 200px var(--accent2) !important;
}
.pm-kiosk-root .media-card { padding: 10px 12px !important; min-height: 0 !important; }
.pm-kiosk-root .yt-card .video-preview img {
  width: 148px !important;
  height: 84px !important;
}
.pm-kiosk-root .yt-card .action.yt-tv { height: 30px !important; width: 100% !important; }

/* Right rail packed */
.pm-kiosk-root .right .section.melisa { flex: 0 0 auto !important; overflow: visible !important; padding: 12px 14px !important; }
.pm-kiosk-root .right .melisa-wave { flex: 0 0 32px !important; width: 32px !important; }
.pm-kiosk-root .right .section.qr { flex: 1 1 auto !important; }
.pm-kiosk-root .right .section.sys { flex: 0 0 auto !important; }

/* ==========================================================================
   DESKTOP PACK
   ========================================================================== */
.pm-kiosk-root .panel.overview.active {
  grid-template-rows: auto auto minmax(150px, 0.72fr) minmax(220px, 1.1fr) !important;
}
.pm-kiosk-root .overview .systems {
  max-height: none !important;
  height: 100% !important;
  min-height: 0 !important;
}
.pm-kiosk-root .cam-wall {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.pm-kiosk-root .cam-wall .system-head {
  flex: 0 0 auto !important;
  margin-bottom: 6px !important;
}
.pm-kiosk-root .cam-tiles {
  flex: 1 1 auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.pm-kiosk-root .cam-tiles > .pm-cam-sensor,
.pm-kiosk-root .cam-tiles > .pm-cam-sensor.is-tile {
  height: 100% !important;
  min-height: 0 !important;
}
.pm-kiosk-root .station-pick {
  display: block;
  width: 100%;
  max-width: 220px;
  height: 26px;
  margin-top: 4px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel2);
  color: var(--text);
  font-size: 11px;
  font-weight: 650;
  line-height: 24px;
  cursor: pointer;
}
.pm-kiosk-root .station-pick:focus {
  outline: 1px solid var(--accent2);
  outline-offset: 1px;
}


/* ==========================================================================
   DESKTOP PACK
   ========================================================================== */
.pm-kiosk-root .salon-head,
.pm-kiosk-root .head-center {
  min-width: 0 !important;
  overflow: hidden !important;
}
.pm-kiosk-root .head-actions {
  width: auto !important;
  max-width: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding: 0 16px 0 10px !important;
  overflow: visible !important;
  flex-wrap: nowrap !important;
}
.pm-kiosk-root .cta {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  height: 44px !important;
  padding: 0 18px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}
.pm-kiosk-root .cta-icon {
  font-size: 15px !important;
  line-height: 1 !important;
}
.pm-kiosk-root .cta-label {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.15 !important;
  overflow: visible !important;
  text-align: left !important;
}
.pm-kiosk-root .cta-label b {
  display: block !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  letter-spacing: 0.05em !important;
  color: inherit !important;
}
.pm-kiosk-root .cta-label small {
  display: block !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  opacity: 0.8 !important;
  letter-spacing: 0.02em !important;
}
.pm-kiosk-root .cta.start {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(16, 185, 129, 0.5) !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3) !important;
}
.pm-kiosk-root .cta.start:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45) !important;
}
.pm-kiosk-root .cta.close {
  background: #181e2b !important;
  color: #f1f5f9 !important;
  border: 1px solid #2e3b52 !important;
}
.pm-kiosk-root .cta.close:hover {
  background: #232d3f !important;
  border-color: #4b5fff !important;
  color: #ffffff !important;
}
.pm-kiosk-root .cta-more {
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  border: 1px solid var(--line) !important;
  background: var(--panel2) !important;
  color: var(--text) !important;
  cursor: pointer !important;
}
.pm-kiosk-root .live {
  background: var(--soft) !important;
  color: var(--muted) !important;
  border: 1px solid var(--line) !important;
}
.pm-kiosk-root .live.is-live {
  color: var(--accent2) !important;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line)) !important;
}

.pm-kiosk-root .radio-split {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}
.pm-kiosk-root .radio-split-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr) !important;
  gap: 8px !important;
}
.pm-kiosk-root .radio-player {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}
.pm-kiosk-root .radio-stations {
  min-height: 0 !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding-right: 2px !important;
}
.pm-kiosk-root .station-row {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--text) !important;
  text-align: left !important;
  padding: 5px 8px !important;
  cursor: pointer !important;
}
.pm-kiosk-root .station-row b {
  font-size: 11px !important;
  color: var(--accent2) !important;
}
.pm-kiosk-root .station-row span {
  font-size: 11px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.pm-kiosk-root .station-row small {
  font-size: 10px !important;
  color: var(--muted) !important;
}
.pm-kiosk-root .station-row.is-on {
  background: color-mix(in srgb, var(--accent) 16%, var(--panel2)) !important;
}

.pm-kiosk-root .yt-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  gap: 6px !important;
}
.pm-kiosk-root .yt-search {
  display: flex !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
}
.pm-kiosk-root .yt-search input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 28px !important;
  border-radius: 8px !important;
  border: 1px solid var(--line) !important;
  background: var(--panel2) !important;
  color: var(--text) !important;
  padding: 0 10px !important;
  font-size: 12px !important;
}
.pm-kiosk-root .yt-search .mini-btn {
  height: 28px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  border: 1px solid var(--line) !important;
  background: var(--soft) !important;
  color: var(--text) !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
.pm-kiosk-root .yt-hits {
  max-height: 72px !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
.pm-kiosk-root .yt-hit {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--text) !important;
  text-align: left !important;
  padding: 2px 0 !important;
  cursor: pointer !important;
}
.pm-kiosk-root .yt-hit img {
  width: 42px !important;
  height: 24px !important;
  object-fit: cover !important;
  border-radius: 4px !important;
  background: #101116 !important;
}
.pm-kiosk-root .yt-hit span {
  font-size: 11px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.pm-kiosk-root .yt-hit.is-on span {
  color: var(--accent2) !important;
}
.pm-kiosk-root .yt-card .video-preview {
  flex: 1 1 auto !important;
  min-height: 72px !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  background: #101116 !important;
}
.pm-kiosk-root .yt-card .video-preview iframe,
.pm-kiosk-root .yt-card .video-preview img {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  object-fit: cover !important;
}
.pm-kiosk-root .yt-card .yt-tv {
  width: 100% !important;
}

.pm-kiosk-root .footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 12px !important;
}
.pm-kiosk-root .foot-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.pm-kiosk-root .foot-actions button {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  border: 1px solid var(--line) !important;
  background: var(--panel2) !important;
  color: var(--text) !important;
  font-size: 11px !important;
  line-height: 20px !important;
  padding: 0 !important;
  cursor: pointer !important;
}


/* ==========================================================================
   DESKTOP PACK
   ========================================================================== */
.pm-kiosk-root .panel.overview.active {
  grid-template-rows: auto auto auto minmax(210px, 1fr) !important;
}
.pm-kiosk-root .overview .systems {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
}
.pm-kiosk-root .cam-wall {
  overflow: visible !important;
}
.pm-kiosk-root .cam-tiles {
  display: grid !important;
  grid-template-columns: repeat(3, 118px) !important;
  grid-auto-rows: 118px !important;
  justify-content: start !important;
  align-content: start !important;
  gap: 10px !important;
  height: 118px !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
}
.pm-kiosk-root .cam-tiles > .pm-cam-sensor,
.pm-kiosk-root .cam-tiles > .pm-cam-sensor.is-tile {
  width: 118px !important;
  height: 118px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 18px !important;
  box-shadow:
    inset 0 0 0 3px #0c0e12,
    0 0 0 1px var(--line) !important;
  background:
    radial-gradient(70% 70% at 50% 40%, rgba(75, 95, 255, 0.08), transparent 60%),
    #ffffff !important;
}
.pm-kiosk-root .analog-wrap {
  width: 118px !important;
  height: 118px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.pm-kiosk-root .metrics {
  gap: 8px !important;
}
.pm-kiosk-root .metric-card {
  padding: 8px 10px !important;
}

.pm-kiosk-root .radio-split-body {
  grid-template-columns: minmax(150px, 0.72fr) minmax(0, 1.4fr) !important;
}
.pm-kiosk-root .radio-lcd,
.pm-kiosk-root .radio-split .wave {
  display: none !important;
}
.pm-kiosk-root .radio-now {
  min-height: 0 !important;
}
.pm-kiosk-root .radio-now b {
  display: block !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}
.pm-kiosk-root .radio-now small {
  color: var(--muted) !important;
  font-size: 11px !important;
}
.pm-kiosk-root .radio-outs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
}
.pm-kiosk-root .radio-outs .action {
  width: 100% !important;
  height: 32px !important;
  border-radius: 8px !important;
  border: 1px solid var(--line) !important;
  background: var(--soft) !important;
  color: var(--text) !important;
  font-size: 11px !important;
  font-weight: 750 !important;
}
.pm-kiosk-root .radio-dir {
  display: grid !important;
  grid-template-columns: 110px minmax(0, 1fr) !important;
  gap: 6px !important;
  margin-bottom: 6px !important;
}
.pm-kiosk-root .station-pick,
.pm-kiosk-root .station-search {
  width: 100% !important;
  max-width: none !important;
  height: 28px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  border: 1px solid var(--line) !important;
  background: var(--panel2) !important;
  color: var(--text) !important;
  font-size: 11px !important;
  padding: 0 8px !important;
}
.pm-kiosk-root .radio-station-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}
.pm-kiosk-root .radio-stations {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}
.pm-kiosk-root .station-row {
  grid-template-columns: minmax(0, 1fr) auto !important;
}
.pm-kiosk-root .radio-empty {
  color: var(--muted) !important;
  padding: 8px !important;
}


/* ==========================================================================
   DESKTOP PACK
   ========================================================================== */
.pm-kiosk-root .panel.overview.active {
  grid-template-rows: auto minmax(132px, 0.85fr) minmax(230px, 1.2fr) !important;
  gap: 8px !important;
}
.pm-kiosk-root .hero.hero-dense {
  height: auto !important;
  min-height: 0 !important;
  padding: 10px 14px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
}
.pm-kiosk-root .hero.hero-dense h2 {
  margin: 0 !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -0.3px !important;
}
.pm-kiosk-root .hero.hero-dense p {
  margin: 2px 0 0 !important;
  color: var(--muted) !important;
  font-size: 12px !important;
}
.pm-kiosk-root .metric-strip {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
.pm-kiosk-root .metric-strip > div {
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  background: var(--panel2) !important;
  padding: 6px 8px !important;
  min-width: 0 !important;
}
.pm-kiosk-root .metric-strip small {
  display: block !important;
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  font-weight: 750 !important;
}
.pm-kiosk-root .metric-strip b {
  display: block !important;
  margin-top: 2px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}
.pm-kiosk-root .hero.hero-dense .gauge-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.pm-kiosk-root .hero.hero-dense .gauge-wrap svg {
  width: 56px !important;
  height: 56px !important;
}
.pm-kiosk-root .hero.hero-dense .gauge-copy small {
  display: block !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  color: var(--muted) !important;
  font-weight: 800 !important;
}
.pm-kiosk-root .hero.hero-dense .gauge-copy b {
  color: var(--good) !important;
  font-size: 13px !important;
}

.pm-kiosk-root .overview .systems,
.pm-kiosk-root .overview .systems.monitor-wall {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 8px 10px !important;
  gap: 8px !important;
}
.pm-kiosk-root .monitor-wall .system-head {
  flex: 0 0 auto !important;
  margin: 0 !important;
}
.pm-kiosk-root .cam-tiles.wall-fill {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  grid-auto-rows: unset !important;
  gap: 8px !important;
  overflow: hidden !important;
}
.pm-kiosk-root .cam-tiles.wall-fill > * {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  max-height: 100% !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
.pm-kiosk-root .sec-tile,
.pm-kiosk-root .clock-tile {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  position: relative !important;
}
.pm-kiosk-root .sec-tile > * {
  width: 100% !important;
  height: 100% !important;
}
.pm-kiosk-root .clock-tile {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px !important;
}


/* ==========================================================================
   DESKTOP PACK
   ========================================================================== */
.pm-kiosk-root .pm-kiosk-melisa-scrim {
  position: fixed !important;
  inset: 0 !important;
  z-index: 120 !important;
  background: rgba(8, 10, 12, 0.62) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
}
.pm-kiosk-root .pm-kiosk-melisa {
  width: min(380px, 92vw) !important;
  height: min(560px, 78vh) !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45) !important;
  overflow: hidden !important;
}
.pm-kiosk-root .pm-kiosk-melisa-head {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--line) !important;
  background: var(--panel2) !important;
  flex: 0 0 auto !important;
}
.pm-kiosk-root .pm-kiosk-melisa-head img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 1px solid var(--accent) !important;
}
.pm-kiosk-root .pm-kiosk-melisa-head b {
  display: block !important;
  font-size: 14px !important;
  color: var(--text) !important;
}
.pm-kiosk-root .pm-kiosk-melisa-head small {
  display: block !important;
  font-size: 11px !important;
  color: var(--muted) !important;
}
.pm-kiosk-root .pm-kiosk-melisa-x {
  margin-left: auto !important;
  width: 28px !important;
  height: 28px !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--text) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}
.pm-kiosk-root .pm-kiosk-melisa .pm-architect-chat {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  background: var(--panel) !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--text) !important;
}
.pm-kiosk-root .pm-kiosk-melisa .pm-architect-badge {
  background: var(--soft) !important;
  color: var(--accent2) !important;
  font-size: 10px !important;
  padding: 4px 10px !important;
}
.pm-kiosk-root .pm-kiosk-melisa .pm-architect-toolbar,
.pm-kiosk-root .pm-kiosk-melisa .pm-architect-confirm,
.pm-kiosk-root .pm-kiosk-melisa .pm-architect-composer {
  border-color: var(--line) !important;
  background: var(--panel) !important;
}
.pm-kiosk-root .pm-kiosk-melisa .pm-architect-thread {
  background: var(--bg) !important;
}
.pm-kiosk-root .pm-kiosk-melisa .pm-architect-bubble.melisa {
  background: var(--soft) !important;
  color: var(--text) !important;
}
.pm-kiosk-root .pm-kiosk-melisa .pm-architect-bubble.user {
  background: var(--accent) !important;
  color: #1a140c !important;
}
.pm-kiosk-root .pm-kiosk-melisa .pm-architect-toolbar label,
.pm-kiosk-root .pm-kiosk-melisa .pm-architect-voices,
.pm-kiosk-root .pm-kiosk-melisa .pm-architect-voice-diag {
  color: var(--muted) !important;
}
.pm-kiosk-root .pm-kiosk-melisa .pm-architect-toolbar select,
.pm-kiosk-root .pm-kiosk-melisa .pm-architect-toolbar input,
.pm-kiosk-root .pm-kiosk-melisa .pm-architect-composer input {
  background: var(--panel2) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
  min-width: 0 !important;
}
.pm-kiosk-root .pm-kiosk-melisa .pm-architect-confirm {
  background: color-mix(in srgb, var(--accent) 12%, var(--panel)) !important;
  color: var(--text) !important;
}
.pm-kiosk-root .pm-kiosk-melisa .pm-architect-confirm button,
.pm-kiosk-root .pm-kiosk-melisa .pm-architect-composer button {
  background: var(--accent) !important;
  color: #1a140c !important;
}
.pm-kiosk-root .pm-kiosk-melisa .pm-architect-confirm button.ghost,
.pm-kiosk-root .pm-kiosk-melisa .pm-architect-voices button {
  background: var(--panel2) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
}
.pm-kiosk-root .pm-kiosk-melisa .pm-architect-voices button.is-chosen {
  background: var(--accent) !important;
  color: #1a140c !important;
  border-color: var(--accent) !important;
}
.pm-kiosk-root .section.melisa .action {
  border-color: var(--line) !important;
  background: var(--soft) !important;
  color: var(--text) !important;
}


/* ==========================================================================
   DESKTOP PACK
   ========================================================================== */
.pm-kiosk-root .cam-tiles.wall-fill {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  gap: 8px !important;
  height: 100% !important;
  min-height: 124px !important;
  grid-template-columns: none !important;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.pm-kiosk-root .cam-tiles.wall-fill > * {
  flex: 0 0 calc((100% - 40px) / 6) !important;
  width: calc((100% - 40px) / 6) !important;
  max-width: calc((100% - 40px) / 6) !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  scroll-snap-align: start !important;
}
.pm-kiosk-root .cam-tiles.wall-fill > .pm-cam-sensor.is-tile,
.pm-kiosk-root .cam-tiles.wall-fill > .sec-tile,
.pm-kiosk-root .cam-tiles.wall-fill > .clock-tile {
  min-width: 0 !important;
}

.pm-kiosk-root .cam-tiles .pm-cam-nosignal,
.pm-kiosk-root .cam-tiles .sgd-cam-nosignal {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  background:
    radial-gradient(70% 60% at 50% 40%, rgba(75, 95, 255, 0.06), transparent 62%),
    #f8fafc !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
.pm-kiosk-root .cam-tiles .pm-cam-nosignal b,
.pm-kiosk-root .cam-tiles .sgd-cam-nosignal b {
  font-size: 12px !important;
  font-weight: 750 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
}
.pm-kiosk-root .cam-tiles .pm-cam-nosignal small,
.pm-kiosk-root .cam-tiles .sgd-cam-nosignal small {
  font-size: 10px !important;
  color: color-mix(in srgb, var(--muted) 70%, transparent) !important;
}
.pm-kiosk-root .cam-tiles .pm-cam-sensor-err,
.pm-kiosk-root .cam-tiles .sgd-cam-err {
  display: none !important;
}

.pm-kiosk-root .cam-tiles .pm-cam-sensor-go,
.pm-kiosk-root .cam-tiles .pm-cam-sensor-ghost,
.pm-kiosk-root .cam-tiles .sgd-cam-scan {
  position: relative !important;
  z-index: 3 !important;
  background: var(--accent) !important;
  color: #1a140c !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  padding: 7px 10px !important;
  box-shadow: none !important;
}
.pm-kiosk-root .cam-tiles .pm-cam-sensor-ghost {
  background: var(--soft) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
}

.pm-kiosk-root .cam-tiles .pm-cam-sensor.is-tile .pm-cam-sensor-top > div {
  top: auto !important;
  bottom: 8px !important;
  left: 8px !important;
  right: 8px !important;
  z-index: 2 !important;
}
.pm-kiosk-root .cam-tiles .pm-cam-sensor.is-tile .pm-cam-sensor-top strong {
  font-size: 10px !important;
  font-weight: 650 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  opacity: 0.42 !important;
  color: #fffdf9 !important;
}
.pm-kiosk-root .cam-tiles .pm-cam-sensor.is-tile .pm-cam-sensor-pill {
  display: none !important;
}
.pm-kiosk-root .cam-tiles .pm-cam-sensor.is-on .pm-cam-sensor-top strong {
  opacity: 0 !important;
}

.pm-kiosk-root .cam-tiles .sgd-cam {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  border-radius: 16px !important;
  position: relative !important;
}
.pm-kiosk-root .cam-tiles .sgd-cam-worker,
.pm-kiosk-root .cam-tiles .sgd-cam-brand {
  position: absolute !important;
  z-index: 2 !important;
  bottom: 8px !important;
  font-weight: 650 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(245, 240, 232, 0.42) !important;
  pointer-events: none !important;
}
.pm-kiosk-root .cam-tiles .sgd-cam-worker {
  left: 8px !important;
  font-size: 10px !important;
}
.pm-kiosk-root .cam-tiles .sgd-cam-brand {
  right: 8px !important;
  left: auto !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  opacity: 0.55 !important;
}
.pm-kiosk-root .cam-tiles .sgd-cam.is-live .sgd-cam-worker,
.pm-kiosk-root .cam-tiles .sgd-cam.is-live .sgd-cam-brand,
.pm-kiosk-root .cam-tiles .sgd-cam-shade {
  opacity: 0 !important;
}
.pm-kiosk-root .cam-tiles .sgd-cam-idle {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px !important;
}


/* ==========================================================================
   DESKTOP PACK
   ========================================================================== */
.pm-kiosk-root .media-preview {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.05fr) minmax(220px, 0.9fr) !important;
}
.pm-kiosk-root .guest-desk {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.pm-kiosk-root .guest-desk .kv2-lounge {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--text) !important;
}
.pm-kiosk-root .guest-desk .kv2-lounge-head {
  display: none !important;
}
.pm-kiosk-root .guest-desk .kv2-lounge-log {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  font-size: 12px !important;
}
.pm-kiosk-root .guest-desk .kv2-lounge-msg {
  background: var(--soft) !important;
  border-radius: 8px !important;
  padding: 6px 8px !important;
  margin-bottom: 6px !important;
}
.pm-kiosk-root .guest-desk .kv2-lounge-compose input {
  background: var(--panel2) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  height: 30px !important;
  padding: 0 8px !important;
}
.pm-kiosk-root .guest-desk .kv2-lounge-row button {
  background: var(--accent) !important;
  color: #1a140c !important;
  border: 0 !important;
  border-radius: 8px !important;
}
.pm-kiosk-root .guest-desk .kv2-lounge-rate {
  flex: 0 0 auto !important;
  color: var(--muted) !important;
  font-size: 11px !important;
}
.pm-kiosk-root .guest-desk .kv2-lounge-stars button.on {
  color: var(--accent) !important;
}

.pm-kiosk-root .cam-tiles .sgd-cam-scan {
  width: auto !important;
  max-width: 118px !important;
  min-height: 0 !important;
  padding: 7px 10px !important;
  gap: 6px !important;
}
.pm-kiosk-root .cam-tiles .sgd-cam-scan svg {
  width: 14px !important;
  height: 14px !important;
}
.pm-kiosk-root .cam-tiles .sgd-cam-brand {
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  font-weight: 700 !important;
  color: rgba(96, 165, 250, 0.75) !important;
}

.pm-kiosk-root .section.melisa .melisa-title {
  color: var(--accent2) !important;
}
.pm-kiosk-root .melisa-img {
  border-color: var(--accent) !important;
  box-shadow: none !important;
}


/* ==========================================================================
   DESKTOP PACK
   ========================================================================== */
.pm-kiosk-root .cam-tiles.wall-fill {
  align-items: stretch !important;
  height: 100% !important;
  min-height: 136px !important;
}
.pm-kiosk-root .cam-tiles.wall-fill > * {
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
}

.pm-kiosk-root .cam-tiles .pm-cam-nosignal,
.pm-kiosk-root .cam-tiles .sgd-cam-nosignal,
.pm-kiosk-root .cam-tiles .sgd-cam-worker,
.pm-kiosk-root .cam-tiles .sgd-cam-brand,
.pm-kiosk-root .cam-tiles .sgd-cam-shade,
.pm-kiosk-root .cam-tiles .pm-cam-sensor-pill {
  display: none !important;
}

.pm-kiosk-root .cam-tiles .pm-cam-sensor.is-tile .pm-cam-sensor-top {
  position: absolute !important;
  inset: auto 0 0 0 !important;
  height: 34px !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 8px !important;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), transparent) !important;
  z-index: 4 !important;
  text-align: left !important;
}
.pm-kiosk-root .cam-tiles .pm-cam-sensor.is-tile .pm-cam-sensor-top > div {
  position: static !important;
  inset: auto !important;
  text-align: left !important;
}
.pm-kiosk-root .cam-tiles .pm-cam-sensor.is-tile .pm-cam-sensor-top strong {
  opacity: 0.7 !important;
  font-size: 10px !important;
}
.pm-kiosk-root .cam-tiles .pm-cam-sensor-go,
.pm-kiosk-root .cam-tiles .pm-cam-sensor-ghost,
.pm-kiosk-root .cam-tiles .sgd-cam-scan {
  position: static !important;
  height: 22px !important;
  min-height: 22px !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 8px !important;
  font-size: 10px !important;
  gap: 4px !important;
  border-radius: 6px !important;
  background: color-mix(in srgb, var(--accent) 88%, #1a140c) !important;
}
.pm-kiosk-root .cam-tiles .sgd-cam-idle {
  justify-content: flex-end !important;
  align-items: stretch !important;
  padding: 0 8px 6px !important;
  background: transparent !important;
}
.pm-kiosk-root .cam-tiles .sgd-cam-scan {
  align-self: flex-end !important;
}
.pm-kiosk-root .cam-tiles .sgd-cam-idle::before {
  content: "" !important;
  position: absolute !important;
  inset: 18% 22% 28% 22% !important;
  border: 1px solid rgba(245, 240, 232, 0.08) !important;
  border-radius: 10px !important;
  pointer-events: none !important;
}
.pm-kiosk-root .guest-desk .kv2-lounge-stars span.on {
  color: var(--accent) !important;
}


/* ==========================================================================
   DESKTOP PACK
   ========================================================================== */
.pm-kiosk-root .pm-deco {
  color: var(--accent);
  opacity: 0.18;
  pointer-events: none;
  flex: 0 0 auto;
}
.pm-kiosk-root .pm-deco-scissors {
  position: absolute;
  right: 14px;
  top: 10px;
  width: 28px;
  height: 28px;
}
.pm-kiosk-root .hero.hero-dense {
  position: relative !important;
}
.pm-kiosk-root .system-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}
.pm-kiosk-root .pm-deco-comb {
  width: 42px;
  height: 16px;
  opacity: 0.22;
}

.pm-kiosk-root .melisa-title {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--accent) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
}
.pm-kiosk-root .melisa-chat-btn {
  height: 34px !important;
  width: 100% !important;
  border-radius: 8px !important;
  border: 1px solid var(--line) !important;
  background: var(--soft) !important;
  color: var(--text) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
.pm-kiosk-root .melisa-img {
  border: 2px solid var(--accent) !important;
  box-shadow: none !important;
}

.pm-kiosk-root .guest-desk .kv2-lounge-empty,
.pm-kiosk-root .guest-desk .kv2-lounge-rate p,
.pm-kiosk-root .guest-desk .kv2-lounge-rate small,
.pm-kiosk-root .guest-desk .kv2-lounge-msg,
.pm-kiosk-root .guest-desk .kv2-lounge-msg p,
.pm-kiosk-root .guest-desk .kv2-lounge-msg div {
  color: var(--text) !important;
  background: transparent !important;
  border-color: var(--line) !important;
}
.pm-kiosk-root .guest-desk .kv2-lounge-empty,
.pm-kiosk-root .guest-desk .kv2-lounge-rate small,
.pm-kiosk-root .guest-desk .kv2-lounge-msg div {
  color: var(--muted) !important;
}
.pm-kiosk-root .guest-desk .kv2-lounge-compose input,
.pm-kiosk-root .guest-desk .kv2-lounge-row input {
  background: var(--panel2) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
}
.pm-kiosk-root .guest-desk .kv2-lounge-compose input::placeholder {
  color: var(--muted) !important;
  opacity: 1 !important;
}
.pm-kiosk-root .guest-desk .kv2-lounge-msg {
  background: var(--soft) !important;
}
.pm-kiosk-root .guest-desk .kv2-lounge-stars span {
  color: color-mix(in srgb, var(--muted) 45%, transparent) !important;
}
.pm-kiosk-root .guest-desk .kv2-lounge-stars span.on {
  color: var(--accent) !important;
}

.pm-kiosk-root input,
.pm-kiosk-root select,
.pm-kiosk-root .station-pick,
.pm-kiosk-root .station-search,
.pm-kiosk-root .yt-search input {
  color: var(--text) !important;
  background: var(--panel2) !important;
  border-color: var(--line) !important;
}
.pm-kiosk-root input::placeholder {
  color: var(--muted) !important;
  opacity: 1 !important;
}
.pm-kiosk-root .metric-strip small,
.pm-kiosk-root .hero.hero-dense p,
.pm-kiosk-root .sys-title,
.pm-kiosk-root .media-head,
.pm-kiosk-root .system-head {
  color: var(--muted) !important;
}
.pm-kiosk-root .metric-strip b,
.pm-kiosk-root .hero.hero-dense h2,
.pm-kiosk-root .sys-item span:last-child {
  color: var(--text) !important;
}

.pm-kiosk-root[data-theme="classic"] .cam-tiles .pm-cam-sensor.is-tile,
.pm-kiosk-root[data-theme="classic"] .sec-tile,
.pm-kiosk-root[data-theme="classic"] .clock-tile {
  background: #2c2a26 !important;
  border: 1px solid var(--line) !important;
}
.pm-kiosk-root[data-theme="classic"] .kv2-clock svg circle:first-child {
  fill: #2c2a26 !important;
  stroke: #5a5348 !important;
}
.pm-kiosk-root[data-theme="classic"] .cta.start {
  background: var(--accent) !important;
  color: #fffdf8 !important;
}

.pm-kiosk-root[data-theme="modern_minimal"] .cta.start {
  background: var(--accent) !important;
  color: #f8f7f2 !important;
}
.pm-kiosk-root .right .section {
  color: var(--text) !important;
}
.pm-kiosk-root .right small,
.pm-kiosk-root .qr small {
  color: var(--muted) !important;
}

/* ==========================================================================
   DESKTOP PACK
   Live stream may go dark; idle tiles stay in the same family as the panel.
   ========================================================================== */
.pm-kiosk-root .cam-tiles > .pm-cam-sensor,
.pm-kiosk-root .cam-tiles > .pm-cam-sensor.is-tile,
.pm-kiosk-root .cam-tiles > .sec-tile,
.pm-kiosk-root .cam-tiles > .clock-tile,
.pm-kiosk-root .cam-tiles .sgd-cam {
  background: var(--panel2) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}

.pm-kiosk-root .cam-tiles > .pm-cam-sensor.is-tile.is-on,
.pm-kiosk-root .cam-tiles .sgd-cam.is-live {
  background: #12141a !important;
}

.pm-kiosk-root .cam-tiles > .pm-cam-sensor.is-tile:not(.is-on)::before {
  content: "";
  position: absolute;
  inset: 12px 12px 38px 12px;
  border: 1px solid color-mix(in srgb, var(--line) 88%, var(--muted));
  border-radius: 10px;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--soft) 92%, transparent) 0 34%, transparent 36%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 55%, transparent), transparent 72%);
}

.pm-kiosk-root .cam-tiles .pm-cam-nosignal,
.pm-kiosk-root .cam-tiles .sgd-cam-nosignal,
.pm-kiosk-root .cam-tiles .sgd-cam-shade {
  display: none !important;
}

.pm-kiosk-root .cam-tiles .pm-cam-sensor.is-tile .pm-cam-sensor-top {
  background: transparent !important;
}

.pm-kiosk-root .cam-tiles .pm-cam-sensor.is-tile .pm-cam-sensor-top strong,
.pm-kiosk-root .cam-tiles .sgd-cam-worker,
.pm-kiosk-root .cam-tiles .sgd-cam-brand {
  color: var(--muted) !important;
  opacity: 0.9 !important;
}

.pm-kiosk-root .cam-tiles .pm-cam-sensor-go,
.pm-kiosk-root .cam-tiles .pm-cam-sensor-ghost,
.pm-kiosk-root .cam-tiles .sgd-cam-scan {
  background: var(--soft) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}

.pm-kiosk-root .cam-tiles .pm-cam-sensor.is-tile.is-on .pm-cam-sensor-top {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent) !important;
}
.pm-kiosk-root .cam-tiles .pm-cam-sensor.is-tile.is-on .pm-cam-sensor-top strong {
  color: #f5f0e8 !important;
}

.pm-kiosk-root .cam-tiles .sgd-cam-idle::before {
  border-color: color-mix(in srgb, var(--line) 90%, var(--muted)) !important;
}

.pm-kiosk-root[data-theme="classic"] .cam-tiles .pm-cam-sensor.is-tile,
.pm-kiosk-root[data-theme="classic"] .sec-tile,
.pm-kiosk-root[data-theme="classic"] .clock-tile {
  background: var(--panel2) !important;
}
.pm-kiosk-root[data-theme="classic"] .kv2-clock svg circle:first-child {
  fill: var(--panel) !important;
  stroke: var(--line) !important;
}

.pm-cam-sensor.is-tile {
  background: var(--pm-theme-card-bg, var(--panel2, #f4eee4));
  border: 1px solid var(--pm-theme-card-border, var(--line, #c9bfb0));
}
.pm-cam-sensor.is-tile .pm-cam-sensor-top strong {
  color: var(--pm-theme-text-main, var(--text, #1a1814));
}
.pm-cam-sensor.is-tile .pm-cam-sensor-pill {
  color: var(--pm-theme-text-muted, var(--muted, #5a5348));
}

/* ==========================================================================
   DESKTOP PACK
   ========================================================================== */
.pm-kiosk-root .yt-search .mini-btn,
.pm-kiosk-root .mini-btn,
.pm-kiosk-root .yt-card .action.yt-tv,
.pm-kiosk-root .guest-desk .kv2-lounge-row button {
  background: var(--soft) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}

/* ==========================================================================
   DESKTOP PACK
   ========================================================================== */
.pm-kiosk-root .melisa-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
  margin-top: 4px !important;
  flex: 0 0 auto !important;
}
.pm-kiosk-root .section.melisa .action {
  margin-top: 0 !important;
}
.pm-kiosk-root .melisa-phone-btn,
.pm-kiosk-root .melisa-chat-btn {
  height: 30px !important;
  width: 100% !important;
  border-radius: 8px !important;
  border: 1px solid var(--line) !important;
  background: var(--soft) !important;
  color: var(--text) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-shadow: none !important;
}
.pm-kiosk-root .pm-on-tv {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--soft);
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pm-kiosk-root .pm-on-tv-hold {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--panel2);
  cursor: pointer;
}
.pm-kiosk-root .pm-on-tv-hold img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
}
.pm-kiosk-root .pm-on-tv-hold span {
  position: relative;
  z-index: 1;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  border: 1px solid var(--line);
  background: var(--soft);
  border-radius: 8px;
  padding: 6px 10px;
}

/* ==========================================================================
   DESKTOP PACK
   ========================================================================== */
.pm-kiosk-root .workspace .tabs .tab,
.pm-kiosk-root .tab,
.pm-kiosk-root .subtab {
  background: transparent !important;
  background-image: none !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  border: 0 !important;
  filter: none !important;
}
.pm-kiosk-root .workspace .tabs .tab.active,
.pm-kiosk-root .tabs .tab.active,
.pm-kiosk-root .tab.active,
.pm-kiosk-root .subtabs .subtab.active,
.pm-kiosk-root .subtab.active {
  background: var(--soft) !important;
  background-image: none !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
  filter: none !important;
}
.pm-kiosk-root .right .melisa-img,
.pm-kiosk-root .rail .melisa-img,
.pm-kiosk-root .section.melisa .melisa-img,
.pm-kiosk-root .melisa-img {
  width: 48px !important;
  height: 48px !important;
  border: 1px solid var(--accent) !important;
  box-shadow: none !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

/* Telefon must stay inside the packed Melisa card */
.pm-kiosk-root .right,
.pm-kiosk-root .rail {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.pm-kiosk-root .right .section.melisa,
.pm-kiosk-root .rail .section.melisa {
  flex: 0 0 auto !important;
  overflow: visible !important;
  padding: 8px 10px 10px !important;
  min-height: 0 !important;
}
.pm-kiosk-root .right .melisa-orbit,
.pm-kiosk-root .rail .melisa-orbit {
  height: 52px !important;
  margin: 2px 0 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}
.pm-kiosk-root .right .melisa-wave,
.pm-kiosk-root .rail .melisa-wave {
  height: 24px !important;
  width: 24px !important;
  flex: 0 0 24px !important;
}
.pm-kiosk-root .right .section.melisa p,
.pm-kiosk-root .right .melisa-text {
  margin: 0 0 6px !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
}
.pm-kiosk-root .melisa-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  width: 100% !important;
  margin-top: 0 !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}
.pm-kiosk-root .section.melisa .action,
.pm-kiosk-root .melisa-phone-btn,
.pm-kiosk-root .melisa-chat-btn {
  margin-top: 0 !important;
  height: 28px !important;
  min-height: 28px !important;
  flex-shrink: 0 !important;
}


/* PICKME SALON PULSE — etalon chrome (Barber Dark mock, one file, no new layer name stack) */
.pm-kiosk-root {
  --bg: #0b0d10;
  --panel: #14171c;
  --panel2: #191d23;
  --soft: #20252c;
  --line: #3a3a34;
  --text: #f5f0e8;
  --muted: #a6a19a;
  --accent: #4b5fff;
  --accent2: #60a5fa;
  --good: #35d487;
  --warn: #d2a66f;
  --bad: #c96b63;
  --violet: #4b5fff;
  --pulse-indigo: #4b5fff;
  --pulse-gold: #60a5fa;
}
.pm-kiosk-root .pm-pult-topbar-actions { display: none !important; }
.pm-kiosk-root .panel.overview .guest-desk { display: none !important; }
.pm-kiosk-root .head-center {
  display: flex !important;
  align-items: center;
  gap: 12px;
}
.pm-kiosk-root .live {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--good) 18%, var(--panel));
  color: var(--good);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.pm-kiosk-root .live .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
}
.pm-kiosk-root .live.is-live .dot { animation: pulse-live 1.8s ease-in-out infinite; }
.pm-kiosk-root .clock-top b { font-size: 18px; }
.pm-kiosk-root .clock-top small { font-size: 11px; color: var(--muted); }
.pm-kiosk-root .cta.start { background: color-mix(in srgb, var(--accent) 22%, var(--panel)); border-color: var(--accent); }
.pm-kiosk-root .cta.close { color: var(--pulse-gold); }

.pm-kiosk-root .media-preview {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: 10px !important;
  min-height: 0 !important;
}
.pm-kiosk-root .radio-player { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pm-kiosk-root .eq-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 36px;
  padding: 0 2px;
}
.pm-kiosk-root .eq-bars i {
  display: block;
  width: 4px;
  height: 30%;
  border-radius: 2px;
  background: #2a4a38;
}
.pm-kiosk-root .eq-bars.is-on i {
  background: var(--good);
  animation: eq-bar 0.9s ease-in-out infinite;
}
.pm-kiosk-root .eq-bars i:nth-child(1) { animation-delay: 0.00s; }
.pm-kiosk-root .eq-bars i:nth-child(2) { animation-delay: 0.05s; height: 55%; }
.pm-kiosk-root .eq-bars i:nth-child(3) { animation-delay: 0.12s; height: 80%; }
.pm-kiosk-root .eq-bars i:nth-child(4) { animation-delay: 0.08s; height: 40%; }
.pm-kiosk-root .eq-bars i:nth-child(5) { animation-delay: 0.18s; height: 95%; }
.pm-kiosk-root .eq-bars i:nth-child(6) { animation-delay: 0.03s; height: 60%; }
.pm-kiosk-root .eq-bars i:nth-child(7) { animation-delay: 0.14s; height: 75%; }
.pm-kiosk-root .eq-bars i:nth-child(8) { animation-delay: 0.07s; height: 35%; }
.pm-kiosk-root .eq-bars i:nth-child(9) { animation-delay: 0.20s; height: 88%; }
.pm-kiosk-root .eq-bars i:nth-child(10) { animation-delay: 0.11s; height: 50%; }
.pm-kiosk-root .eq-bars i:nth-child(11) { animation-delay: 0.16s; height: 70%; }
.pm-kiosk-root .eq-bars i:nth-child(12) { animation-delay: 0.04s; height: 45%; }
.pm-kiosk-root .eq-bars i:nth-child(13) { animation-delay: 0.22s; height: 92%; }
.pm-kiosk-root .eq-bars i:nth-child(14) { animation-delay: 0.09s; height: 58%; }
.pm-kiosk-root .eq-bars i:nth-child(15) { animation-delay: 0.13s; height: 77%; }
.pm-kiosk-root .eq-bars i:nth-child(16) { animation-delay: 0.06s; height: 42%; }
@keyframes eq-bar {
  0%, 100% { transform: scaleY(0.35); }
  50% { transform: scaleY(1); }
}
.pm-kiosk-root .eq-bars.is-on i { transform-origin: bottom; }

.pm-kiosk-root .yt-card .video-preview {
  position: relative;
  min-height: 132px;
  border-radius: 12px;
  overflow: hidden;
  background: #101116;
}
.pm-kiosk-root .yt-card .video-preview img,
.pm-kiosk-root .yt-card .video-preview iframe {
  width: 100%;
  height: 132px;
  object-fit: cover;
  display: block;
  border: 0;
}
.pm-kiosk-root .yt-card .video-copy {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 12px;
  background: linear-gradient(180deg, transparent, rgba(8,10,12,0.88));
  color: #fffdf9;
}
.pm-kiosk-root .yt-card .video-copy b { font-size: 13px; display: block; }
.pm-kiosk-root .yt-card .video-copy small {
  font-size: 11px;
  color: var(--good);
  font-weight: 800;
  letter-spacing: 0.06em;
}
.pm-kiosk-root .yt-card .action.yt-tv {
  margin-top: 8px;
  background: color-mix(in srgb, var(--accent) 18%, var(--panel));
  border: 1px solid var(--accent);
  color: var(--text);
  font-size: 13px;
}

.pm-kiosk-root .melisa-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 28px;
}
.pm-kiosk-root .melisa-wave i {
  width: 3px;
  height: 40%;
  background: var(--accent);
  border-radius: 2px;
}
.pm-kiosk-root .section.melisa[data-active="true"] .melisa-wave i,
.pm-kiosk-root .melisa.is-speaking .melisa-wave i {
  animation: eq-bar 0.8s ease-in-out infinite;
  transform-origin: center;
}
.pm-kiosk-root .melisa-img {
  width: 64px;
  height: 64px;
  border: 2px solid var(--accent);
}
.pm-kiosk-root .right {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pm-kiosk-root .right .section.qr .qr-wrap,
.pm-kiosk-root .right .section.qr .qr-wrap svg,
.pm-kiosk-root .right .section.qr .qr-wrap img {
  width: 132px !important;
  height: 132px !important;
}
.pm-kiosk-root .tabs .tab { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; }
.pm-kiosk-root .tabs .tab.active {
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
  background: transparent;
  border: 0;
}

/* Cream barbershop contract: one theme for kiosk + pult, no graphite lock */
.pm-kiosk-root.pm-kiosk-v2 {
  --pm-theme-bg: var(--bg);
  --pm-theme-card-bg: var(--panel);
  --pm-theme-card-border: var(--line);
  --pm-theme-text-main: var(--text);
  --pm-theme-text-muted: var(--muted);
  --pm-theme-primary: var(--accent);
  --pm-theme-badge-bg: color-mix(in srgb, var(--accent) 14%, var(--panel));
  --pm-theme-badge-text: var(--accent);
  background-color: var(--bg);
  background-image:
    radial-gradient(900px 420px at 88% -8%, color-mix(in srgb, var(--accent2) 16%, transparent), transparent 58%),
    repeating-linear-gradient(0deg, rgba(26,24,20,0.018) 0 1px, transparent 1px 5px);
  color: var(--text);
}
.pm-kiosk-root.pm-kiosk-v2 .app {
  background: transparent !important;
  border-color: var(--line) !important;
  position: relative;
}
.pm-kiosk-root.pm-kiosk-v2 .app::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  z-index: 4;
  pointer-events: none;
  background: repeating-linear-gradient(
    -32deg,
    #c4a574 0 7px,
    #fffdf8 7px 12px,
    #4b5fff 12px 19px,
    #fffdf8 19px 24px
  );
}
.pm-kiosk-root.pm-kiosk-v2 .salon-head h1,
.pm-kiosk-root.pm-kiosk-v2 .salon-name-block h1 {
  font-family: Fraunces, Georgia, serif !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  font-size: 22px !important;
  letter-spacing: -0.02em;
}
.pm-kiosk-root.pm-kiosk-v2 .brand .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent2);
  border: 1px solid color-mix(in srgb, var(--accent2) 55%, var(--line));
  background: color-mix(in srgb, var(--accent2) 12%, var(--panel));
}
.pm-kiosk-root.pm-kiosk-v2 .pm-deco-scissors {
  opacity: 0.28;
  color: var(--accent2);
  width: 56px;
  height: 56px;
}

/* Pult follows kiosk tokens — no leftover cream island */
.pm-kiosk-root .pm-salon-pult-root,
.pm-kiosk-root .pm-salon-pult-root.mode-kiosk-panel {
  background: var(--bg) !important;
  color: var(--text) !important;
  border-right-color: var(--line) !important;
}
.pm-kiosk-root .pm-pult-card,
.pm-kiosk-root .mode-kiosk-panel .pm-pult-card,
.pm-kiosk-root .mode-kiosk-panel .pm-pult-staff-card,
.pm-kiosk-root .mode-kiosk-panel .pm-pult-stat-badge,
.pm-kiosk-root .mode-kiosk-panel .pm-pult-btn-action,
.pm-kiosk-root .mode-kiosk-panel .pm-pbtn-queue,
.pm-kiosk-root .mode-kiosk-panel .pm-pult-theme-chip {
  background: var(--panel) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
.pm-kiosk-root .mode-kiosk-panel .pm-pbtn {
  background: var(--soft) !important;
  color: var(--muted) !important;
  border-color: var(--line) !important;
}

/* KPI row under logo: 3 cells, no overlap */
.pm-kiosk-root .pm-pult-topbar {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  padding: 2px 0 8px !important;
}
.pm-kiosk-root .pm-pult-quick-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  width: 100% !important;
}
.pm-kiosk-root .pm-pult-stat-badge,
.pm-kiosk-root .mode-kiosk-panel .pm-pult-stat-badge {
  min-width: 0 !important;
  width: auto !important;
  padding: 6px 4px !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  white-space: normal !important;
  overflow: hidden !important;
}

/* Right rail fills the column; Melisa is the hero, not a stamp */
.pm-kiosk-root .right {
  height: 100% !important;
  min-height: 0 !important;
  padding: 8px !important;
  gap: 10px !important;
}
.pm-kiosk-root .right .section.melisa {
  flex: 1.45 1 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  background:
    radial-gradient(120px 80px at 50% 28%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%),
    var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  padding: 14px 12px !important;
}
.pm-kiosk-root .melisa-img {
  width: 88px !important;
  height: 88px !important;
  border: 3px solid var(--accent2) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent2) 22%, transparent) !important;
}
.pm-kiosk-root .right .section.qr {
  flex: 1.05 1 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  padding: 12px 10px !important;
}
.pm-kiosk-root .right .section.qr .qr-wrap,
.pm-kiosk-root .right .section.qr .qr-wrap svg,
.pm-kiosk-root .right .section.qr .qr-wrap img {
  width: 148px !important;
  height: 148px !important;
}
.pm-kiosk-root .right .section.sys {
  flex: 0 0 auto !important;
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
}

.pm-kiosk-root.pm-kiosk-v2 .panel.overview .yt-search { display: none !important; }
.pm-kiosk-root.pm-kiosk-v2 .eq-bars i {
  background: #2f7a4a !important;
  opacity: 0.45;
}
.pm-kiosk-root.pm-kiosk-v2 .eq-bars.is-on i {
  opacity: 1;
}
.pm-kiosk-root .cam-tiles .sgd-cam-idle {
  background: var(--soft) !important;
}
.pm-kiosk-root .cam-tiles .sgd-cam-idle::before {
  border-color: color-mix(in srgb, var(--accent2) 40%, var(--line)) !important;
}
.pm-kiosk-root .hero.hero-dense {
  background:
    linear-gradient(115deg, var(--panel), color-mix(in srgb, var(--accent2) 10%, var(--panel2))) !important;
  border-color: var(--line) !important;
}

/* ==========================================================================
   PICKME FLAGSHIP LIGHT LUXURY MASTER SYSTEM (100% UNIFIED ACROSS ENTIRE KIOSK)
   ========================================================================== */

/* 1. Global Light Canvas & Typography */
.pm-kiosk-root {
  background: #f8fafc !important;
  color: #0f172a !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif !important;
}

.pm-kiosk-root .app {
  background: #f8fafc !important;
  color: #0f172a !important;
}

/* 2. Top Header Bar */
.pm-kiosk-root .top {
  grid-template-columns: 290px minmax(360px, 1fr) auto !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  height: 68px !important;
}

.pm-kiosk-root .top .brand {
  padding: 0 16px !important;
}

.pm-kiosk-root .salon-head h1 {
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  color: #0f172a !important;
}

.pm-kiosk-root .salon-head p {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: #64748b !important;
}

.pm-kiosk-root .head-center {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.pm-kiosk-root .head-center .live {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border: 1px solid #a7f3d0 !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.pm-kiosk-root .clock-top b {
  font-size: 20px !important;
  font-weight: 850 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  color: #0f172a !important;
  letter-spacing: 0.02em !important;
}

.pm-kiosk-root .clock-top small {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  display: block !important;
}

.pm-kiosk-root .head-actions {
  width: auto !important;
  max-width: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding: 0 16px 0 10px !important;
  overflow: visible !important;
}

/* Header CTAs */
.pm-kiosk-root .cta {
  height: 38px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

.pm-kiosk-root .cta.pm-cta-express,
.pm-kiosk-root .cta[title*='Express'] {
  background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 100%) !important;
  border: 1px solid #c7d2fe !important;
  color: #4338ca !important;
}

.pm-kiosk-root .cta.pm-cta-express:hover,
.pm-kiosk-root .cta[title*='Express']:hover {
  background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.18) !important;
}

.pm-kiosk-root .cta.pm-cta-open,
.pm-kiosk-root .cta.start {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
  border: 1px solid #a7f3d0 !important;
  color: #065f46 !important;
}

.pm-kiosk-root .cta.pm-cta-open:hover,
.pm-kiosk-root .cta.start:hover {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.18) !important;
}

.pm-kiosk-root .cta.pm-cta-close,
.pm-kiosk-root .cta.close,
.pm-kiosk-root .cta.feierabend {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
}

.pm-kiosk-root .cta.pm-cta-close:hover,
.pm-kiosk-root .cta.close:hover,
.pm-kiosk-root .cta.feierabend:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  transform: translateY(-1px) !important;
}

.pm-kiosk-root .cta-more {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #64748b !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  transition: all 0.15s ease !important;
}

.pm-kiosk-root .cta-more:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

.pm-kiosk-root .cta-label b {
  font-size: 11.5px !important;
  font-weight: 850 !important;
  letter-spacing: 0.04em !important;
  display: block !important;
  line-height: 1.15 !important;
}

.pm-kiosk-root .cta-label small {
  display: block !important;
  font-size: 8.5px !important;
  font-weight: 700 !important;
  opacity: 0.8 !important;
  line-height: 1.15 !important;
  margin-top: 1px !important;
}

/* 3. Left Aside (Salon-Pult Sidebar) */
.pm-kiosk-root .left {
  background: #f8fafc !important;
  border-right: 1px solid #e2e8f0 !important;
}

.pm-kiosk-root .pm-pult-staff-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  transition: border-color 0.15s ease !important;
}

.pm-kiosk-root .pm-pult-staff-card:hover {
  border-color: #cbd5e1 !important;
}

.pm-kiosk-root .pm-pbtn {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  transition: all 0.12s ease !important;
}

.pm-kiosk-root .pm-pbtn:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

.pm-kiosk-root .pm-pbtn.free.active {
  background: #10b981 !important;
  color: #ffffff !important;
  border-color: #10b981 !important;
  font-weight: 800 !important;
}

.pm-kiosk-root .pm-pbtn.pause.active {
  background: #f59e0b !important;
  color: #ffffff !important;
  border-color: #f59e0b !important;
  font-weight: 800 !important;
}

.pm-kiosk-root .pm-pbtn.busy.active {
  background: #ef4444 !important;
  color: #ffffff !important;
  border-color: #ef4444 !important;
  font-weight: 800 !important;
}

.pm-kiosk-root .pm-pbtn.auto.active {
  background: #4b5fff !important;
  color: #ffffff !important;
  border-color: #4b5fff !important;
  font-weight: 800 !important;
}

.pm-kiosk-root .queue-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

.pm-kiosk-root .pm-pult-queue-num {
  font-size: 26px !important;
  font-weight: 850 !important;
  font-family: ui-monospace, Consolas, monospace !important;
  color: #2563eb !important;
}

.pm-kiosk-root .pm-pbtn-queue.add {
  background: #4b5fff !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 750 !important;
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
}

.pm-kiosk-root .pm-pbtn-queue.add:hover {
  background: #3b4ce6 !important;
}

.pm-kiosk-root .pm-pbtn-queue.sub {
  background: #10b981 !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 750 !important;
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
}

.pm-kiosk-root .pm-pbtn-queue.sub:hover {
  background: #059669 !important;
}

/* 4. Center Workspace Navigation Tabs */
.pm-kiosk-root .workspace .tabs {
  flex: 0 0 44px !important;
  height: 44px !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
  padding: 4px !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  margin-bottom: 10px !important;
}

.pm-kiosk-root .workspace .tabs .tab {
  height: 100% !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 12.5px !important;
  font-weight: 650 !important;
  color: #475569 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-shadow: none !important;
  text-shadow: none !important;
  outline: none !important;
}

.pm-kiosk-root .workspace .tabs .tab:hover {
  color: #0f172a !important;
  background: #ffffff !important;
  border-color: transparent !important;
}

.pm-kiosk-root .workspace .tabs .tab.active {
  background: #4b5fff !important;
  border: 1px solid #4b5fff !important;
  color: #ffffff !important;
  font-weight: 750 !important;
  box-shadow: 0 2px 6px rgba(75, 95, 255, 0.25) !important;
}

.pm-kiosk-root .workspace .tabs .tab.active .tab-icon {
  color: #ffffff !important;
}

/* 5. Center Overview Hero & Metrics */
.pm-kiosk-root .panel.overview.active {
  grid-template-rows: auto minmax(240px, 1fr) auto !important;
  gap: 10px !important;
}

.pm-kiosk-root .hero.hero-dense {
  background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%) !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-radius: 14px !important;
  padding: 12px 18px !important;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04), 0 2px 6px -1px rgba(75, 95, 255, 0.03) !important;
  position: relative !important;
  overflow: hidden !important;
}

.pm-kiosk-root .hero-copy h2 {
  font-size: 19px !important;
  font-weight: 850 !important;
  color: #0f172a !important;
  letter-spacing: -0.02em !important;
}

.pm-kiosk-root .hero-copy p {
  font-size: 11.5px !important;
  color: #64748b !important;
  font-weight: 500 !important;
}

.pm-kiosk-root .metric-strip > div {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 2px !important;
}

.pm-kiosk-root .metric-strip small {
  color: #64748b !important;
  font-size: 9.5px !important;
  text-transform: uppercase !important;
  font-weight: 750 !important;
  letter-spacing: 0.05em !important;
}

.pm-kiosk-root .metric-strip b {
  color: #0f172a !important;
  font-size: 18px !important;
  font-weight: 850 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  letter-spacing: -0.02em !important;
}

.pm-kiosk-root .hero.hero-dense .gauge-copy small {
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  color: #64748b !important;
}

.pm-kiosk-root .hero.hero-dense .gauge-copy b {
  font-size: 13px !important;
  font-weight: 850 !important;
  color: #059669 !important;
}

/* 6. Overview Monitorwand & Seat Grid */
.pm-kiosk-root .overview .systems.monitor-wall {
  flex: 1 1 auto !important;
  min-height: 230px !important;
  height: 100% !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

.pm-kiosk-root .system-head {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

.pm-stuehle-grid .pm-stuehle-card,
.pm-kiosk-root .seat-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.15s ease !important;
}

.pm-stuehle-grid .pm-stuehle-card:hover,
.pm-kiosk-root .seat-card:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
}

.pm-stuehle-card .st-name,
.pm-kiosk-root .seat-card .seat-head b {
  color: #0f172a !important;
}

.pm-stuehle-card .st-stylist,
.pm-kiosk-root .seat-card .occupant-name {
  color: #1e293b !important;
}

.pm-stuehle-card .st-service,
.pm-kiosk-root .seat-card .service-name {
  color: #64748b !important;
}

.pm-stuehle-badge.free,
.pm-kiosk-root .seat-badge.free {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border: 1px solid #a7f3d0 !important;
}

.pm-stuehle-badge.busy,
.pm-kiosk-root .seat-badge.busy {
  background: #eff6ff !important;
  color: #2563eb !important;
  border: 1px solid #bfdbfe !important;
}

/* 7. Lounge Cockpit (DAB+ Radio & YouTube Side-by-Side) */
.pm-kiosk-root .overview .media-preview.pm-overview-lounge-grid,
.pm-overview-lounge-grid {
  display: grid !important;
  grid-template-columns: 1.15fr 1fr !important;
  gap: 10px !important;
  height: auto !important;
  min-height: 0 !important;
}

/* Card 1: DAB+ Lounge Radio Deck */
.pm-living-radio-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
  transition: border-color 0.2s ease !important;
  box-sizing: border-box !important;
}

.pm-living-radio-card:hover {
  border-color: #cbd5e1 !important;
}

.pm-radio-soundstage-fx {
  display: none !important;
}

.pm-lrc-content {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.pm-lrc-header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100% !important;
}

.pm-lrc-station-block {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

/* Animation Keyframes for Living Radio */
@keyframes pm-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pm-spec-dance {
  0%, 100% { height: 4px; opacity: 0.5; }
  50% { height: 18px; opacity: 1; }
}

/* 44px Spinning Vinyl Turntable */
.pm-turntable-compact {
  position: relative !important;
  width: 44px !important;
  height: 44px !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.pm-ttc-platter {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: #e2e8f0 !important;
  border: 1.5px solid #cbd5e1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12) !important;
  position: relative !important;
}

.pm-ttc-strobe-ring {
  position: absolute !important;
  inset: 1px !important;
  border-radius: 50% !important;
  border: 1px dotted rgba(15, 23, 42, 0.25) !important;
  pointer-events: none !important;
}

.pm-ttc-vinyl {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, #1e293b 0%, #0f172a 100%) !important;
  border: 1px solid #334155 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25) !important;
  transition: transform 0.2s ease !important;
}

.pm-turntable-compact.is-spinning .pm-ttc-vinyl {
  animation: pm-spin 4s linear infinite !important;
}

.pm-ttc-grooves {
  position: absolute !important;
  inset: 3px !important;
  border-radius: 50% !important;
  border: 1px dashed rgba(255, 255, 255, 0.18) !important;
  pointer-events: none !important;
}

.pm-ttc-label {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #4b5fff !important;
  border: 1px solid #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

.pm-ttc-flag {
  font-size: 7.5px !important;
  line-height: 1 !important;
}

/* Precision Tonearm */
.pm-ttc-arm {
  position: absolute !important;
  top: -2px !important;
  right: -2px !important;
  width: 14px !important;
  height: 18px !important;
  transform-origin: top right !important;
  transform: rotate(-18deg) !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: none !important;
}

.pm-turntable-compact.is-spinning .pm-ttc-arm {
  transform: rotate(10deg) !important;
}

.pm-ttc-arm-wand {
  position: absolute !important;
  top: 2px !important;
  right: 1px !important;
  width: 11px !important;
  height: 14px !important;
  border-right: 1.5px solid #64748b !important;
  border-top: 1.5px solid #64748b !important;
  border-radius: 0 4px 0 0 !important;
}

.pm-ttc-arm-head {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 3.5px !important;
  height: 2.5px !important;
  background: #d97706 !important;
  border-radius: 1px !important;
}

/* Station Details in Header */
.pm-lrc-station-title-box {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.pm-lrc-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}

.pm-lrc-name {
  font-size: 13.5px !important;
  font-weight: 850 !important;
  color: #0f172a !important;
  white-space: nowrap !important;
}

.pm-station-live-pill {
  background: #f1f5f9 !important;
  color: #64748b !important;
  border: 1px solid #e2e8f0 !important;
  font-size: 8.5px !important;
  font-weight: 800 !important;
  padding: 1.5px 6px !important;
  border-radius: 4px !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
}

.pm-station-live-pill.on-air {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border-color: #a7f3d0 !important;
}

.pm-btn-radio-fav {
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.pm-lrc-telemetry {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 10px !important;
  color: #64748b !important;
  font-family: ui-monospace, Consolas, monospace !important;
}

.pm-lrc-dot {
  color: #cbd5e1 !important;
}

.pm-lrc-codec {
  color: #4b5fff !important;
  font-weight: 700 !important;
}

.pm-lrc-outputs {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

.pm-btn-media-device {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: all 0.15s ease !important;
}

.pm-btn-media-device:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

.pm-btn-media-device.is-active {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #2563eb !important;
}

/* DAB Track Stage */
.pm-lrc-track-stage {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.pm-lrc-track-box {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.pm-lrc-now-label {
  font-size: 8.5px !important;
  font-weight: 850 !important;
  color: #4b5fff !important;
  letter-spacing: 0.05em !important;
  flex-shrink: 0 !important;
}

.pm-lrc-track-text {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Equalizer Spectrum Bars */
.pm-dab-spectrum {
  display: flex !important;
  align-items: flex-end !important;
  gap: 2px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
}

.pm-dab-spectrum .pm-spec-bar {
  width: 2.5px !important;
  height: 4px !important;
  background: #cbd5e1 !important;
  border-radius: 1px !important;
  transition: height 0.15s ease, background 0.15s ease !important;
}

.pm-dab-spectrum.is-playing .pm-spec-bar {
  background: linear-gradient(180deg, #3b82f6 0%, #4b5fff 100%) !important;
  animation: pm-spec-dance 0.7s ease-in-out infinite alternate !important;
}

.pm-dab-spectrum.is-playing .pm-spec-bar.b1 { animation-delay: 0.05s !important; }
.pm-dab-spectrum.is-playing .pm-spec-bar.b2 { animation-delay: 0.25s !important; }
.pm-dab-spectrum.is-playing .pm-spec-bar.b3 { animation-delay: 0.12s !important; }
.pm-dab-spectrum.is-playing .pm-spec-bar.b4 { animation-delay: 0.38s !important; }
.pm-dab-spectrum.is-playing .pm-spec-bar.b5 { animation-delay: 0.18s !important; }
.pm-dab-spectrum.is-playing .pm-spec-bar.b6 { animation-delay: 0.44s !important; }
.pm-dab-spectrum.is-playing .pm-spec-bar.b7 { animation-delay: 0.08s !important; }
.pm-dab-spectrum.is-playing .pm-spec-bar.b8 { animation-delay: 0.32s !important; }
.pm-dab-spectrum.is-playing .pm-spec-bar.b9 { animation-delay: 0.22s !important; }
.pm-dab-spectrum.is-playing .pm-spec-bar.b10 { animation-delay: 0.48s !important; }
.pm-dab-spectrum.is-playing .pm-spec-bar.b11 { animation-delay: 0.15s !important; }
.pm-dab-spectrum.is-playing .pm-spec-bar.b12 { animation-delay: 0.29s !important; }

/* Tier 3: Controls Row */
.pm-lrc-controls-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.pm-lrc-transport-group {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex-shrink: 0 !important;
}

.pm-btn-dab-skip {
  width: 26px !important;
  height: 26px !important;
  border-radius: 6px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
  display: grid !important;
  place-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.pm-btn-dab-skip:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

/* PLAY BUTTON (CRITICAL FIX) */
.pm-btn-play-radio {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #4b5fff !important;
  border: 1px solid #4b5fff !important;
  color: #ffffff !important;
  display: grid !important;
  place-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(75, 95, 255, 0.35) !important;
  transition: all 0.15s ease !important;
}

.pm-btn-play-radio:hover {
  background: #3b4ce6 !important;
  transform: scale(1.04) !important;
}

.pm-btn-play-radio.is-active {
  background: #10b981 !important;
  border-color: #059669 !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35) !important;
}

.pm-btn-play-radio.is-active:hover {
  background: #059669 !important;
}

.pm-lrc-vol-box {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  padding: 2px 6px !important;
}

.pm-btn-vol-mute {
  background: transparent !important;
  border: none !important;
  color: #64748b !important;
  cursor: pointer !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.pm-btn-vol-mute:hover {
  color: #0f172a !important;
}

.pm-slider-vol {
  width: 55px !important;
  height: 4px !important;
  accent-color: #4b5fff !important;
  cursor: pointer !important;
}

.pm-lrc-presets {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  overflow-x: auto !important;
  padding-left: 2px !important;
}

.pm-chip.pm-dab-chip {
  padding: 3px 8px !important;
  font-size: 10px !important;
  border-radius: 6px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.15s ease !important;
}

.pm-chip.pm-dab-chip:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

.pm-chip.pm-dab-chip.active {
  background: #4b5fff !important;
  border-color: #4b5fff !important;
  color: #ffffff !important;
}

.pm-chip.pm-dab-more-btn {
  padding: 3px 8px !important;
  font-size: 10px !important;
  border-radius: 6px !important;
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: #2563eb !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Card 2: Salon TV & YouTube Studio */
.pm-living-youtube-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
  transition: border-color 0.2s ease !important;
  box-sizing: border-box !important;
}

.pm-living-youtube-card:hover {
  border-color: #cbd5e1 !important;
}

.pm-lyc-content {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.pm-lyc-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100% !important;
}

.pm-lyc-meta {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.pm-lyc-icon {
  font-size: 16px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

.pm-lyc-title-row b {
  font-size: 13px !important;
  font-weight: 850 !important;
  color: #0f172a !important;
}

.pm-btn-yt-stop {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #ef4444 !important;
}

.pm-btn-yt-stop:hover {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
}

/* Tier 2: Mini Screen + Search */
.pm-lyc-stage-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.pm-mini-screen {
  width: 82px !important;
  height: 48px !important;
  flex-shrink: 0 !important;
  border-radius: 7px !important;
  overflow: hidden !important;
  background: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  position: relative !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: border-color 0.15s ease !important;
}

.pm-mini-screen:hover {
  border-color: #4b5fff !important;
}

.pm-mini-screen-stop-btn {
  position: absolute !important;
  top: 3px !important;
  right: 3px !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: rgba(15, 23, 42, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #cbd5e1 !important;
  display: grid !important;
  place-content: center !important;
  cursor: pointer !important;
  z-index: 3 !important;
  opacity: 0.65 !important;
  transition: all 0.15s ease !important;
  padding: 0 !important;
}

.pm-mini-screen-stop-btn:hover {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  opacity: 1 !important;
  transform: scale(1.1) !important;
}

.pm-mini-screen-iframe {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  pointer-events: auto !important;
  object-fit: cover !important;
}

.pm-mini-screen-on-tv {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
}

.pm-mini-screen-on-tv img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.pm-mini-tv-tag {
  position: absolute !important;
  bottom: 2px !important;
  right: 2px !important;
  background: #10b981 !important;
  color: #ffffff !important;
  font-size: 7.5px !important;
  font-weight: 850 !important;
  padding: 1px 3px !important;
  border-radius: 3px !important;
}

.pm-mini-screen-idle {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  width: 100% !important;
  height: 100% !important;
  background: radial-gradient(circle, #f1f5f9 0%, #e2e8f0 100%) !important;
}

.pm-mini-yt-play {
  font-size: 13px !important;
  color: #ef4444 !important;
  line-height: 1 !important;
}

.pm-mini-idle-text {
  font-size: 7.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #64748b !important;
}

.pm-lyc-search-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.pm-lyc-search-form {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  width: 100% !important;
}

.pm-lyc-input-wrap {
  position: relative !important;
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
}

.pm-lyc-search-icon {
  position: absolute !important;
  left: 7px !important;
  color: #64748b !important;
  pointer-events: none !important;
}

.pm-lyc-search-input {
  width: 100% !important;
  height: 25px !important;
  padding: 0 7px 0 23px !important;
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  color: #0f172a !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  outline: none !important;
  transition: border-color 0.15s ease !important;
}

.pm-lyc-search-input:focus {
  border-color: #4b5fff !important;
  background: #ffffff !important;
}

.pm-lyc-search-btn {
  height: 25px !important;
  width: 25px !important;
  border-radius: 6px !important;
  background: #4b5fff !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: grid !important;
  place-content: center !important;
  transition: background 0.15s ease !important;
  flex-shrink: 0 !important;
}

.pm-lyc-search-btn:hover {
  background: #3b4ce6 !important;
}

.pm-lyc-track-meta {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  font-size: 10px !important;
}

.pm-lyc-now-tag {
  font-size: 8px !important;
  font-weight: 850 !important;
  color: #ef4444 !important;
  font-family: ui-monospace, Consolas, monospace !important;
  flex-shrink: 0 !important;
}

.pm-lyc-title-text {
  color: #0f172a !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.pm-lyc-searching-note {
  font-size: 9px !important;
  color: #2563eb !important;
  font-weight: 700 !important;
}

.pm-lyc-hint-text {
  font-size: 9px !important;
  color: #64748b !important;
  font-style: italic !important;
}

.pm-lyc-hit-nav {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  flex-shrink: 0 !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 4px !important;
  padding: 1px 3px !important;
}

.pm-btn-hit-arrow {
  background: transparent !important;
  border: none !important;
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  padding: 0 1px !important;
  line-height: 1 !important;
}

.pm-hit-count {
  font-size: 8px !important;
  color: #64748b !important;
  font-weight: 750 !important;
  font-family: ui-monospace, monospace !important;
}

.pm-lyc-chips {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  overflow: hidden !important;
  border-top: 1px solid #e2e8f0 !important;
  padding-top: 5px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.pm-lyt-chips-label {
  font-size: 8.5px !important;
  font-weight: 800 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  flex-shrink: 0 !important;
  margin-right: 2px !important;
}

.pm-lyc-chips .pm-chip {
  padding: 3px 8px !important;
  border-radius: 6px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.15s ease !important;
  flex-shrink: 0 !important;
}

.pm-lyc-chips .pm-chip:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

/* ==========================================================================
   8. Right Aside (Melisa AI, Smartphone QR Check-In & System Telemetry)
   ========================================================================== */
.pm-kiosk-root .right {
  background: #f8fafc !important;
  border-left: 1px solid #e2e8f0 !important;
  padding: 8px !important;
  gap: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

/* Base Card Shell */
.pm-rail-melisa-card,
.pm-rail-qr-card,
.pm-rail-sys-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  box-sizing: border-box !important;
}

/* 8.1 MELISA VIP PERSONAL CONCIERGE CARD */
.pm-vip-melisa-card {
  flex: 0 0 auto !important;
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%) !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Subtle luxury top accent line */
.pm-vip-melisa-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 15% !important;
  right: 15% !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, #4b5fff, #818cf8, transparent) !important;
  opacity: 0.8 !important;
}

.pm-vip-melisa-card .pm-melisa-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

.pm-vip-title {
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  color: #0f172a !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.pm-vip-crown {
  color: #f59e0b !important;
  filter: drop-shadow(0 1px 2px rgba(245, 158, 11, 0.4)) !important;
}

.pm-vip-badge {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
  color: #f8fafc !important;
  border: 1px solid #334155 !important;
  font-size: 8px !important;
  font-weight: 850 !important;
  letter-spacing: 0.06em !important;
  padding: 2.5px 7px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3.5px !important;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.15) !important;
}

.pm-vip-badge svg {
  color: #f59e0b !important;
}

/* Melisa Orbit & Soundwaves */
.pm-vip-orbit {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 4px 0 !important;
}

.pm-vip-avatar-wrap {
  position: relative !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease !important;
}

.pm-vip-avatar-wrap:hover {
  transform: scale(1.04) !important;
}

.pm-vip-avatar-wrap .melisa-img {
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12), 0 0 0 1px #e2e8f0 !important;
  display: block !important;
}

.pm-vip-pulse {
  position: absolute !important;
  inset: -4px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(75, 95, 255, 0.35) !important;
  animation: pm-pulse-ring 3s cubic-bezier(0.2, 0.8, 0.2, 1) infinite !important;
  pointer-events: none !important;
}

.pm-vip-wave {
  display: flex !important;
  align-items: center !important;
  gap: 2.5px !important;
  height: 26px !important;
  width: 18px !important;
  justify-content: center !important;
}

.pm-vip-wave i {
  width: 2.5px !important;
  height: 8px !important;
  background: linear-gradient(180deg, #4b5fff 0%, #818cf8 100%) !important;
  border-radius: 2px !important;
  animation: pm-wave-bar 1.2s ease-in-out infinite alternate !important;
}

.pm-vip-wave i:nth-child(1) { animation-delay: 0.1s !important; height: 10px !important; }
.pm-vip-wave i:nth-child(2) { animation-delay: 0.3s !important; height: 20px !important; }
.pm-vip-wave i:nth-child(3) { animation-delay: 0.2s !important; height: 12px !important; }

.pm-vip-desc {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.pm-vip-role {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  letter-spacing: 0.02em !important;
}

/* VIP Actions: 1 Primary Luxury Button + 1 Compact VIP Phone Button */
.pm-vip-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  margin-top: 2px !important;
}

.pm-vip-call-btn {
  flex: 1 1 auto !important;
  height: 34px !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #4b5fff 0%, #3b4ce6 100%) !important;
  color: #ffffff !important;
  border: 1px solid #4b5fff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-shadow: 0 3px 10px rgba(75, 95, 255, 0.28) !important;
  transition: all 0.15s ease !important;
}

.pm-vip-call-btn:hover {
  background: linear-gradient(135deg, #3b4ce6 0%, #2f3dbd 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(75, 95, 255, 0.38) !important;
}

.pm-vip-call-btn svg {
  color: #fef08a !important;
}

.pm-vip-phone-btn {
  flex: 0 0 34px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
}

.pm-vip-phone-btn:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  transform: translateY(-1px) !important;
}

/* 8.2 SMARTPHONE QR CHECK-IN CARD */
.pm-rail-qr-card {
  flex: 1 1 auto !important;
  padding: 10px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  text-align: center !important;
}

.pm-qr-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

.pm-qr-head .qr-title {
  font-size: 10.5px !important;
  font-weight: 850 !important;
  letter-spacing: 0.05em !important;
  color: #0f172a !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  text-transform: uppercase !important;
}

.pm-qr-badge {
  background: #eff6ff !important;
  color: #2563eb !important;
  border: 1px solid #bfdbfe !important;
  font-size: 8.5px !important;
  font-weight: 850 !important;
  padding: 1.5px 6px !important;
  border-radius: 4px !important;
}

.pm-qr-box {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 6px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.pm-qr-box svg {
  display: block !important;
  width: 110px !important;
  height: 110px !important;
}

.pm-qr-caption {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
  width: 100% !important;
}

.pm-qr-scan-hint {
  font-size: 9.5px !important;
  font-weight: 600 !important;
  color: #64748b !important;
}

.pm-qr-link-pill {
  font-size: 10px !important;
  font-weight: 750 !important;
  color: #2563eb !important;
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: all 0.15s ease !important;
}

.pm-qr-link-pill:hover {
  background: #4b5fff !important;
  color: #ffffff !important;
  border-color: #4b5fff !important;
}

.pm-qr-perks {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  font-size: 8.5px !important;
  font-weight: 750 !important;
  color: #059669 !important;
}

/* 8.3 SYSTEM & SALON STATUS CARD */
.pm-rail-sys-card {
  flex: 0 0 auto !important;
  padding: 10px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.pm-sys-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin-bottom: 2px !important;
}

.pm-sys-head .sys-title {
  font-size: 10px !important;
  font-weight: 850 !important;
  letter-spacing: 0.06em !important;
  color: #0f172a !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  text-transform: uppercase !important;
}

.pm-sys-badge {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border: 1px solid #a7f3d0 !important;
  font-size: 8.5px !important;
  font-weight: 800 !important;
  padding: 1.5px 5px !important;
  border-radius: 4px !important;
}

.pm-sys-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  width: 100% !important;
}

.pm-sys-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  padding: 4px 7px !important;
  border-radius: 6px !important;
  font-size: 10px !important;
}

.pm-sys-row-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  color: #475569 !important;
  font-weight: 650 !important;
}

.pm-sys-row-val {
  font-weight: 750 !important;
  font-size: 9.5px !important;
}

.pm-sys-row-val.is-good {
  color: #059669 !important;
}

.pm-sys-row-val.is-info {
  color: #2563eb !important;
}

.pm-sys-row-val.is-warn {
  color: #d97706 !important;
}

.pm-sys-row-val.is-bad {
  color: #dc2626 !important;
}

.pm-sys-row-val.is-muted {
  color: #64748b !important;
}

/* 9. Bottom Status Bar */
.pm-kiosk-root .bot {
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
  box-shadow: 0 -1px 3px rgba(15, 23, 42, 0.03) !important;
}

.pm-kiosk-root .bot .status-line,
.pm-kiosk-root .bot p,
.pm-kiosk-root .bot small {
  color: #64748b !important;
}

.pm-kiosk-root .bot b {
  color: #0f172a !important;
}

/* Responsive windowed layout */
@media (max-width: 1200px) {
  .pm-kiosk-root .top {
    height: 56px !important;
  }
  .pm-kiosk-root .hero.hero-dense {
    padding: 6px 10px !important;
  }
  .pm-kiosk-root .hero.hero-dense .gauge-wrap svg {
    width: 44px !important;
    height: 44px !important;
  }
  .pm-kiosk-root .overview .systems.monitor-wall {
    min-height: 170px !important;
  }
  .pm-overview-lounge-bar {
    gap: 8px !important;
  }
  .pm-lounge-compact-card {
    padding: 6px 10px !important;
    border-radius: 10px !important;
  }
  .pm-lyt-chips {
    display: none !important;
  }
}
/* Mobile Express Guest Check-In Stylesheet */
.pm-checkin-wrapper {
  min-height: 100vh;
  background: #f8fafc;
  display: flex;
  justify-content: center;
  padding: 16px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #0f172a;
}

.pm-checkin-container {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Header */
.pm-checkin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px;
}

.pm-checkin-salon-pill {
  font-size: 11.5px;
  font-weight: 750;
  color: #4b5fff;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 4px 10px;
  border-radius: 20px;
}

/* Stepper */
.pm-checkin-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
}

.pm-step-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.pm-step-dot span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.pm-step-dot small {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
}

.pm-step-dot.active span {
  background: #4b5fff;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(75, 95, 255, 0.3);
}

.pm-step-dot.active small {
  color: #4b5fff;
}

.pm-step-dot.done span {
  background: #10b981;
  color: #ffffff;
}

.pm-step-line {
  flex: 1 1 auto;
  height: 2px;
  background: #e2e8f0;
  margin: 0 8px 16px;
}

/* Card */
.pm-checkin-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pm-checkin-card-head h2 {
  font-size: 18px;
  font-weight: 850;
  color: #0f172a;
  margin: 0 0 4px;
}

.pm-checkin-card-head p {
  font-size: 12px;
  color: #64748b;
  margin: 0;
}

.pm-btn-checkin-back {
  align-self: flex-start;
  background: none;
  border: none;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 0;
}

/* Services */
.pm-services-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pm-service-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pm-service-row:hover {
  border-color: #cbd5e1;
  background: #ffffff;
}

.pm-service-row.is-selected {
  border-color: #4b5fff;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(75, 95, 255, 0.15);
}

.pm-serv-icon {
  font-size: 22px;
}

.pm-serv-details {
  flex: 1 1 auto;
}

.pm-serv-details b {
  display: block;
  font-size: 13px;
  color: #0f172a;
}

.pm-serv-details small {
  font-size: 11px;
  color: #64748b;
}

.pm-serv-price {
  font-size: 13.5px;
  font-weight: 850;
  color: #4b5fff;
}

/* Stylists */
.pm-stylists-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pm-stylist-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  cursor: pointer;
  transition: all 0.15s;
}

.pm-stylist-row.is-selected {
  border-color: #4b5fff;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(75, 95, 255, 0.15);
}

.pm-stylist-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
}

.pm-stylist-details {
  flex: 1 1 auto;
}

.pm-stylist-details b {
  display: block;
  font-size: 13px;
  color: #0f172a;
}

.pm-stylist-details small {
  font-size: 11px;
  color: #64748b;
}

.pm-stylist-check {
  color: #cbd5e1;
}

.pm-stylist-row.is-selected .pm-stylist-check {
  color: #4b5fff;
}

/* Contact Form */
.pm-contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pm-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pm-form-field label {
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pm-form-field input {
  height: 44px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  padding: 0 14px;
  font-size: 13.5px;
  outline: none;
}

.pm-form-field input:focus {
  border-color: #4b5fff;
  box-shadow: 0 0 0 2px rgba(75, 95, 255, 0.15);
}

.pm-checkin-summary-box {
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pm-checkin-summary-box > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}

.pm-checkin-summary-box small {
  color: #64748b;
}

.pm-checkin-summary-box b {
  color: #0f172a;
}

/* Submit buttons */
.pm-btn-checkin-next,
.pm-btn-checkin-submit {
  height: 46px;
  border-radius: 12px;
  background: #4b5fff;
  border: none;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(75, 95, 255, 0.25);
  transition: all 0.15s;
}

.pm-btn-checkin-next:hover,
.pm-btn-checkin-submit:hover {
  background: #3b4ce6;
  transform: translateY(-1px);
}

/* Ticket Screen */
.pm-ticket-card {
  text-align: center;
}

.pm-ticket-stamp h2 {
  font-size: 20px;
  font-weight: 850;
  color: #0f172a;
  margin: 8px 0 4px;
}

.pm-ticket-stamp p {
  font-size: 12px;
  color: #64748b;
  margin: 0;
}

.pm-digital-ticket {
  margin: 8px 0;
  padding: 20px;
  background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
  border: 2px dashed #cbd5e1;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pm-ticket-top-label {
  font-size: 10px;
  font-weight: 850;
  color: #64748b;
  letter-spacing: 0.08em;
}

.pm-ticket-huge-number {
  font-size: 44px;
  font-weight: 900;
  color: #0f172a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.pm-ticket-queue-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px 12px;
}

.pm-queue-metric small {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  color: #64748b;
}

.pm-queue-metric b {
  font-size: 13px;
  color: #0f172a;
}

.pm-ticket-guest-info {
  text-align: left;
  background: #f8fafc;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
}

.pm-ticket-guest-info p {
  margin: 2px 0;
  color: #475569;
}

.pm-ticket-guest-info strong {
  color: #0f172a;
}

.pm-fake-barcode {
  height: 28px;
  background: repeating-linear-gradient(
    90deg,
    #0f172a,
    #0f172a 2px,
    transparent 2px,
    transparent 4px,
    #0f172a 4px,
    #0f172a 7px,
    transparent 7px,
    transparent 9px
  );
  margin: 6px 0 2px;
  opacity: 0.8;
}

.pm-ticket-barcode small {
  font-size: 9px;
  font-family: monospace;
  color: #94a3b8;
}

.pm-lounge-callout {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
  font-size: 11.5px;
  color: #92400e;
  text-align: left;
}

.pm-btn-new-ticket {
  background: none;
  border: 1px solid #cbd5e1;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
}
/* Mobile Preview Showcase Studio Stylesheet */
.pm-showcase-root {
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at 50% 0%, #ffffff 0%, #f1f5f9 65%, #e2e8f0 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #0f172a;
}

/* Header */
.pm-showcase-nav {
  height: 60px;
  padding: 0 20px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  z-index: 100;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.03);
}

.pm-showcase-nav-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pm-showcase-divider {
  width: 1px;
  height: 22px;
  background: #e2e8f0;
}

.pm-showcase-badge {
  font-size: 11px;
  font-weight: 750;
  color: #4b5fff;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 3px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Screens Selector */
.pm-showcase-screens {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 12px;
}

.pm-sc-btn {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pm-sc-btn:hover {
  color: #0f172a;
}

.pm-sc-btn.is-active {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #0f172a;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
}

.pm-sc-icon {
  font-size: 14px;
}

/* Device Switcher */
.pm-showcase-devices {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pm-dev-btn {
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #64748b;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.15s;
}

.pm-dev-btn:hover {
  color: #0f172a;
  border-color: #cbd5e1;
}

.pm-dev-btn.is-active {
  background: #0f172a;
  border-color: #0f172a;
  color: #ffffff;
}

.pm-dev-reload,
.pm-dev-ext {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
}

.pm-dev-reload:hover,
.pm-dev-ext:hover {
  background: #f8fafc;
  color: #0f172a;
}

/* Stage */
.pm-showcase-stage {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden;
}

.pm-stage-container {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Phone Bezel (iPhone 16 Pro) */
.pm-stage-container.is-iphone .pm-phone-frame {
  width: 393px;
  height: 852px;
  max-height: calc(100vh - 140px);
  background: #0f172a;
  border-radius: 54px;
  padding: 8px 8px 10px 8px;
  box-shadow:
    0 0 0 4px #2b3545,
    0 0 0 7px #0f172a,
    0 30px 80px -15px rgba(15, 23, 42, 0.45);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Authentic iOS Status Bar */
.pm-phone-status-bar {
  height: 46px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: #ffffff;
  color: #0f172a;
  font-size: 13.5px;
  font-weight: 700;
  border-top-left-radius: 46px;
  border-top-right-radius: 46px;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  user-select: none;
}

.pm-status-time {
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: -0.01em;
}

.pm-dynamic-island {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 116px;
  height: 28px;
  background: #000000;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
}

.pm-di-lens {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #111a2e;
}

.pm-status-icons {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pm-status-net {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.pm-status-battery {
  width: 20px;
  height: 10px;
  border: 1.5px solid #0f172a;
  border-radius: 3px;
  position: relative;
  display: inline-block;
}

.pm-status-battery::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  right: 4px;
  background: #0f172a;
  border-radius: 1px;
}

.pm-phone-screen-wrap {
  flex: 1 1 auto;
  width: 100%;
  height: calc(100% - 46px);
  position: relative;
  overflow: hidden;
  border-bottom-left-radius: 46px;
  border-bottom-right-radius: 46px;
  background: #ffffff;
}

.pm-phone-screen-wrap .pm-device-iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0 0 46px 46px;
}

.pm-phone-home-bar {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 130px;
  height: 4px;
  border-radius: 4px;
  background: #0f172a;
  opacity: 0.35;
  pointer-events: none;
  z-index: 50;
}

/* Tablet Bezel */
.pm-stage-container.is-tablet .pm-tablet-frame {
  width: 980px;
  max-width: 90vw;
  height: 680px;
  max-height: calc(100vh - 140px);
  background: #0f172a;
  border-radius: 36px;
  padding: 14px;
  box-shadow:
    0 0 0 4px #2b3545,
    0 0 0 8px #0f172a,
    0 30px 80px -15px rgba(15, 23, 42, 0.4);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pm-tablet-camera {
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1e293b;
  pointer-events: none;
}

/* Fullscreen Bezel */
.pm-stage-container.is-fullscreen {
  width: 100%;
  height: 100%;
}

.pm-stage-container.is-fullscreen .pm-fullscreen-frame {
  width: 100%;
  height: 100%;
}

/* Device Iframe */
.pm-device-iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 42px;
  background: #ffffff;
}

.pm-stage-container.is-tablet .pm-device-iframe {
  border-radius: 24px;
}

.pm-stage-container.is-fullscreen .pm-device-iframe {
  border-radius: 0;
}

/* Footer Meta Bar */
.pm-stage-footer-meta {
  position: absolute;
  bottom: 14px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  padding: 6px 16px;
  border-radius: 30px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 50;
}

.pm-meta-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pm-meta-badge {
  font-size: 9.5px;
  font-weight: 850;
  background: #0f172a;
  color: #ffffff;
  padding: 2px 7px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pm-meta-info b {
  font-size: 12px;
  color: #0f172a;
}

.pm-meta-info small {
  font-size: 11px;
  color: #64748b;
}

.pm-meta-info code {
  color: #4b5fff;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.pm-meta-launch-btn {
  font-size: 11px;
  font-weight: 750;
  color: #4b5fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pm-meta-launch-btn:hover {
  text-decoration: underline;
}

@media (max-width: 860px) {
  .pm-showcase-screens {
    display: none;
  }
}
/* ══════════════════════════════════════════════════════════════════════════════
   LudwigslustPage.css  —  Light & Elegant Civic Showcase Portal
   Lighter Theme · Unobstructed Schloss & Lake · Chat Above Input · Clean Send CTA
   ══════════════════════════════════════════════════════════════════════════════ */

:root {
  --ll-green-deep:   #1b4332;
  --ll-green-mid:    #2d6a4f;
  --ll-green-light:  #52b788;
  --ll-green-soft:   #d8f3dc;
  --ll-green-tint:   #f0fdf4;
  --ll-gold:         #b38038;
  --ll-gold-light:   #dfb36c;
  --ll-text-dark:    #0f172a;
  --ll-text-sub:     #334155;
  --ll-text-muted:   #64748b;
  --ll-glass-light:  rgba(255, 255, 255, 0.92);
  --ll-glass-border: rgba(255, 255, 255, 0.85);
  --ll-shadow-card:  0 14px 40px rgba(0, 0, 0, 0.22);
  --ll-radius-lg:    20px;
  --ll-radius-md:    12px;
  --ll-font:         Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ─── HIDE PICKME GLOBAL FLOATING MELISA BADGE ON LUDWIGSLUST PAGE ───────────── */
.pult-melisa-fab,
.live-melisa-widget,
.melisa-floating-btn,
[class*="LiveMelisaWidget"],
[class*="pult-melisa"] {
  display: none !important;
}

/* ─── 1. FIXED SCREEN 100% HEIGHT, ZERO SCROLL ────────────────────────────────── */
.ll-clean-root {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #0f1f17;
  font-family: var(--ll-font);
  color: var(--ll-text-dark);
  overflow: hidden;
  user-select: none;
  z-index: 1000;
}

/* ─── 2. REAL PHOTOGRAPH BACKGROUND (LIGHTER & NATURAL) ───────────────────────── */
.ll-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.ll-bg-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  filter: brightness(1.02) contrast(1.02);
}

.ll-bg-overlay-clean {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(15, 23, 42, 0.28) 0%,
    rgba(255, 255, 255, 0.02) 25%,
    rgba(255, 255, 255, 0.02) 65%,
    rgba(15, 23, 42, 0.38) 100%
  );
  pointer-events: none;
}

/* ─── 3. LIGHT TOP HEADER (52px) ──────────────────────────────────────────────── */
.ll-clean-header {
  position: relative;
  z-index: 10;
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.ll-clean-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ll-crest {
  font-size: 20px;
}

.ll-header-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--ll-text-dark);
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.ll-header-sub {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ll-green-mid);
  letter-spacing: 0.12em;
}

.ll-header-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--ll-green-deep);
  background: rgba(45, 106, 79, 0.1);
  border: 1px solid rgba(45, 106, 79, 0.22);
  padding: 4px 12px;
  border-radius: 14px;
  letter-spacing: 0.03em;
}

/* ─── 4. ELEVATED TITLE IN SKY (LAKE & PALACE 100% VISIBLE) ────────────────────── */
.ll-clean-center {
  position: relative;
  z-index: 5;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 20px 24px 0;
}

.ll-clean-center-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: ll-fade 0.45s ease-out;
}
@keyframes ll-fade {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ll-royal-tag {
  display: inline-block;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(45, 106, 79, 0.25);
  color: var(--ll-green-deep);
  padding: 4px 16px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  backdrop-filter: blur(10px);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 8px;
}

.ll-clean-title {
  font-size: clamp(44px, 5.6vw, 72px);
  font-weight: 900;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.9);
}

.ll-clean-subtitle {
  font-size: clamp(14px, 1.4vw, 18px);
  color: #f8fafc;
  margin: 8px 0 0;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
}

/* ─── 5. MELISSA CHAT CARD (LIGHT FROSTED GLASS, ABOVE INPUT BAR) ──────────────── */
.ll-above-input-wrapper {
  position: absolute;
  bottom: 86px; /* Sits right above the input bar */
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding: 0 20px;
  z-index: 60;
  animation: ll-slide-up-box 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ll-slide-up-box {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ll-above-input-card {
  width: 100%;
  max-width: 820px;
  max-height: 60dvh;
  background: rgba(255, 255, 255, 0.94);
  border: 1.5px solid rgba(45, 106, 79, 0.22);
  border-radius: var(--ll-radius-lg);
  padding: 18px 22px 20px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: var(--ll-shadow-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  color: var(--ll-text-dark);
}

.ll-above-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding-bottom: 10px;
}

.ll-above-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ll-concierge-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  color: #166534;
  font-size: 11.5px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 12px;
  letter-spacing: 0.02em;
}

.ll-sparkle-green {
  color: #16a34a;
  flex-shrink: 0;
}

.ll-above-heading {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--ll-text-dark);
  margin: 0;
  line-height: 1.2;
}

.ll-above-question {
  font-size: 11.5px;
  color: var(--ll-green-mid);
  font-weight: 600;
  margin: 2px 0 0;
}

.ll-above-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ll-above-audio-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 14px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.16s ease;
}
.ll-above-audio-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.ll-above-audio-btn.speaking {
  background: #dcfce7;
  border-color: #86efac;
  color: #15803d;
  animation: ll-audio-pulse 1.4s infinite;
}
@keyframes ll-audio-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* Explicit Visible Close Button: No Circles, Clear Pill */
.ll-above-close-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 14px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.16s ease;
}
.ll-above-close-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
  border-color: #94a3b8;
  transform: translateY(-1px);
}

.ll-above-reply-text {
  font-size: 15px;
  line-height: 1.6;
  color: #1f2937;
  margin: 0;
}

/* Action Form Banner inside Answer */
.ll-above-action-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: var(--ll-radius-md);
  padding: 12px 16px;
  gap: 12px;
}
.ll-above-action-info {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #14532d;
  font-size: 13.5px;
}
.ll-above-action-info span {
  font-size: 10.5px;
  font-weight: 800;
  color: #15803d;
  display: block;
}

.ll-above-launch-btn {
  padding: 8px 16px;
  border-radius: 10px;
  background: var(--ll-green-deep);
  color: #ffffff;
  font-weight: 800;
  font-size: 12.5px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.16s ease;
}
.ll-above-launch-btn:hover {
  background: var(--ll-green-mid);
  transform: translateY(-1px);
}

.ll-above-cards-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}
.ll-above-subcard {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--ll-radius-md);
  padding: 12px 14px;
  flex: 1 1 230px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ll-subcard-title { font-size: 13.5px; font-weight: 700; color: var(--ll-green-deep); }
.ll-subcard-phone { font-size: 15px; font-weight: 800; color: #166534; text-decoration: none; }
.ll-subcard-body { font-size: 12px; color: #475569; line-height: 1.4; margin: 0; }
.ll-subcard-addr { font-size: 11px; color: #64748b; margin: 0; }
.ll-subcard-link { font-size: 12px; font-weight: 700; color: var(--ll-green-mid); text-decoration: none; margin-top: 4px; }
.ll-subcard-link:hover { text-decoration: underline; }

/* ─── 6. LIGHT INPUT BAR: ZERO CIRCLES, ONLY CLEAN SEND BUTTON ON RIGHT ───────── */
.ll-clean-bottom-bar {
  position: relative;
  z-index: 10;
  height: 84px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px 16px;
}

.ll-clean-input-container {
  width: 100%;
  max-width: 820px;
  background: rgba(255, 255, 255, 0.94);
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: 28px;
  padding: 6px 8px 6px 20px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.06);
}

.ll-clean-form {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

/* ─── VOICE INPUT CONTROLS: MICROPHONE & LANG PILL ───────────────────────────── */
.ll-voice-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Language selector pill: DE / RU */
.ll-lang-pill {
  height: 38px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: var(--ll-green-deep);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.16s ease;
}
.ll-lang-pill:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
}

/* Clean Microphone Action Button (Rectangular pill with icon & text) */
.ll-clean-mic-btn {
  height: 38px;
  padding: 0 14px;
  border-radius: 19px;
  border: 1.5px solid #cbd5e1;
  background: #f8fafc;
  color: var(--ll-green-deep);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.18s ease;
}
.ll-clean-mic-btn:hover {
  background: #f1f5f9;
  border-color: var(--ll-green-mid);
  color: var(--ll-green-mid);
  transform: translateY(-1px);
}

/* Active Recording State: Red Pulse */
.ll-clean-mic-btn.listening {
  background: #fee2e2;
  border-color: #ef4444;
  color: #b91c1c;
  animation: ll-mic-pulse 1.2s infinite;
}
@keyframes ll-mic-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  70%  { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.ll-mic-label {
  font-size: 12.5px;
  font-weight: 700;
}

.ll-clean-text-input {
  flex: 1;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ll-text-dark);
  font-size: 15px;
  font-family: var(--ll-font);
  outline: none;
}
.ll-clean-text-input::placeholder {
  color: #64748b;
  font-size: 14px;
}

/* Clean Solid Pill Send Button on Right: NOT a Circle! */
.ll-clean-send-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 22px;
  border-radius: 21px;
  border: none;
  background: var(--ll-green-deep);
  color: #ffffff;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.18s ease;
  box-shadow: 0 2px 10px rgba(27, 67, 50, 0.3);
}
.ll-clean-send-cta:hover:not(:disabled) {
  background: var(--ll-green-mid);
  box-shadow: 0 4px 14px rgba(45, 106, 79, 0.4);
  transform: translateY(-1px);
}
.ll-clean-send-cta:disabled {
  background: #cbd5e1;
  color: #94a3b8;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* ─── 7. NEXT-GEN CIVIC FORM ASSISTANT (CO-PILOT MODAL) ─────────────────────── */
.ll-lifter-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: ll-fade-in 0.18s ease-out;
}
@keyframes ll-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.ll-assistant-modal {
  width: 100%;
  max-width: 1020px;
  max-height: 90dvh;
  background: rgba(255, 255, 255, 0.98);
  border: 1.5px solid rgba(45, 106, 79, 0.28);
  border-radius: var(--ll-radius-lg);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: ll-fade-scale 0.2s ease-out;
  color: var(--ll-text-dark);
}
@keyframes ll-fade-scale {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* Modal Header */
.ll-assistant-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: #ffffff;
}

.ll-assistant-brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ll-badge-gold-sparkle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  width: fit-content;
}

.ll-assistant-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--ll-text-dark);
  margin: 0;
  letter-spacing: -0.01em;
}

.ll-assistant-sub {
  font-size: 12.5px;
  color: var(--ll-green-mid);
  font-weight: 600;
  margin: 0;
}

.ll-assistant-close {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.16s ease;
}
.ll-assistant-close:hover {
  background: #e2e8f0;
  color: #0f172a;
}

/* Progress Tracker */
.ll-progress-bar-wrap {
  padding: 8px 24px;
  background: #f8fafc;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.ll-progress-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  color: #475569;
  font-weight: 600;
  margin-bottom: 4px;
}
.ll-progress-pct {
  color: var(--ll-green-deep);
  font-weight: 800;
}
.ll-progress-track {
  width: 100%;
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
}
.ll-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #059669);
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* Split Area */
.ll-assistant-split {
  display: flex;
  gap: 20px;
  flex: 1;
  min-height: 0;
  padding: 18px 24px;
  overflow: hidden;
  background: #fdfdfd;
}

/* Left Column: Official Fields */
.ll-assistant-form-column {
  flex: 1.25;
  overflow-y: auto;
  padding-right: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ll-column-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 800;
  color: #334155;
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ll-icon-green {
  color: #10b981;
}

.ll-fields-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ll-form-field-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.18s ease;
  position: relative;
}
.ll-form-field-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.ll-form-field-card.active {
  border-color: var(--ll-green-mid);
  background: #fafffc;
  box-shadow: 0 4px 14px rgba(45, 106, 79, 0.12);
}
.ll-form-field-card.glow {
  animation: ll-field-glow 1.2s ease-out;
}
@keyframes ll-field-glow {
  0%   { border-color: #10b981; box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.35); }
  100% { border-color: var(--ll-green-mid); box-shadow: 0 4px 14px rgba(45, 106, 79, 0.12); }
}

.ll-field-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ll-field-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ll-text-dark);
  cursor: pointer;
}

.ll-field-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #15803d;
  font-size: 11px;
  font-weight: 700;
  background: #dcfce7;
  padding: 2px 7px;
  border-radius: 10px;
}

/* Golden Co-Pilot Trigger Chip */
.ll-field-help-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 12px;
  border: 1.5px solid #f59e0b;
  background: #fef3c7;
  color: #92400e;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.16s ease;
  white-space: nowrap;
}
.ll-field-help-chip:hover {
  background: #fbbf24;
  color: #78350f;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
}
.ll-field-help-chip.selected {
  background: var(--ll-green-deep);
  color: #ffffff;
  border-color: var(--ll-green-deep);
  box-shadow: 0 2px 8px rgba(27, 67, 50, 0.3);
}

.ll-sparkle-gold {
  color: #d97706;
}
.ll-field-help-chip.selected .ll-sparkle-gold {
  color: #fde68a;
}

.ll-field-input {
  width: 100%;
  height: 38px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 0 12px;
  font-size: 13.5px;
  font-family: var(--ll-font);
  color: var(--ll-text-dark);
  margin-top: 6px;
  outline: none;
  background: #ffffff;
  transition: border-color 0.16s ease;
}
.ll-field-input:focus {
  border-color: var(--ll-green-mid);
}

.ll-field-hint {
  font-size: 11px;
  color: #64748b;
  margin: 4px 0 0;
  line-height: 1.35;
}

/* Right Column: Melissa Live Co-Pilot */
.ll-assistant-copilot-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 320px;
}

.ll-copilot-card {
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  box-shadow: 0 4px 20px rgba(22, 101, 52, 0.08);
  overflow-y: auto;
}

.ll-copilot-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #bbf7d0;
  padding-bottom: 10px;
}

.ll-copilot-badge {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ll-avatar-pulse {
  font-size: 18px;
}

.ll-copilot-name {
  font-size: 14px;
  font-weight: 800;
  color: #14532d;
  margin: 0;
  line-height: 1.2;
}

.ll-copilot-state {
  font-size: 10.5px;
  font-weight: 700;
  color: #16a34a;
}

.ll-copilot-reset-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid #86efac;
  background: #ffffff;
  color: #166534;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ll-copilot-reset-btn:hover {
  background: #dcfce7;
}

/* Speech Bubble */
.ll-copilot-speech-bubble {
  background: #ffffff;
  border: 1px solid #bbf7d0;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.ll-copilot-speech-text {
  font-size: 13.5px;
  line-height: 1.55;
  color: #14532d;
  font-weight: 500;
  margin: 0;
}

.ll-copilot-target-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 6px 10px;
  background: #dcfce7;
  border-radius: 10px;
  color: #166534;
}
.ll-target-tag {
  font-weight: 600;
}
.ll-target-name {
  font-weight: 800;
}

/* Quick 1-Click Choice Buttons */
.ll-quick-options-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ll-quick-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #15803d;
}
.ll-quick-buttons-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ll-quick-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #86efac;
  background: #ffffff;
  color: #166534;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.16s ease;
  text-align: left;
}
.ll-quick-btn:hover {
  background: #166534;
  color: #ffffff;
  border-color: #166534;
  transform: translateX(2px);
}

/* Inline Input to inject into Active Field */
.ll-copilot-input-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #86efac;
  border-radius: 20px;
  padding: 4px 6px;
  margin-top: auto;
}

.ll-copilot-mic-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: var(--ll-green-deep);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ll-copilot-mic-btn.listening {
  background: #fee2e2;
  border-color: #ef4444;
  color: #b91c1c;
  animation: ll-mic-pulse 1.2s infinite;
}

.ll-copilot-text-input {
  flex: 1;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 13px;
  color: var(--ll-text-dark);
  font-family: var(--ll-font);
  outline: none;
}

.ll-copilot-inject-btn {
  padding: 0 12px;
  height: 32px;
  border-radius: 16px;
  border: none;
  background: var(--ll-green-deep);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.16s ease;
}
.ll-copilot-inject-btn:hover:not(:disabled) {
  background: var(--ll-green-mid);
}
.ll-copilot-inject-btn:disabled {
  background: #e2e8f0;
  color: #94a3b8;
  cursor: not-allowed;
}

/* Modal Footer */
.ll-assistant-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: #ffffff;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  gap: 12px;
}

.ll-footer-status {
  font-size: 12px;
  color: #475569;
  font-weight: 500;
}

.ll-footer-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ll-btn-preview-pdf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 12px;
  border: 1px solid var(--ll-green-deep);
  background: #f0fdf4;
  color: var(--ll-green-deep);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.16s ease;
}
.ll-btn-preview-pdf:hover {
  background: var(--ll-green-deep);
  color: #ffffff;
}

.ll-btn-official-submit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 12px;
  background: var(--ll-green-deep);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.16s ease;
}
.ll-btn-official-submit:hover {
  background: var(--ll-green-mid);
  transform: translateY(-1px);
}

/* Success Confirmation Banner */
.ll-submitted-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  background: #dcfce7;
  border-top: 1.5px solid #86efac;
  color: #14532d;
  font-size: 13px;
  animation: ll-fade-in 0.2s ease-out;
}
.ll-submitted-banner strong {
  display: block;
  font-size: 13.5px;
}
.ll-submitted-close {
  margin-left: auto;
  border: none;
  background: transparent;
  color: #166534;
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
}

/* Mobile Responsiveness for Form Assistant */
@media (max-width: 768px) {
  .ll-assistant-modal { max-height: 94dvh; }
  .ll-assistant-split { flex-direction: column; overflow-y: auto; padding: 14px; gap: 14px; }
  .ll-assistant-copilot-column { min-width: unset; }
  .ll-assistant-header { padding: 14px 16px; }
  .ll-assistant-footer { flex-direction: column; align-items: stretch; padding: 12px 16px; }
  .ll-footer-buttons { flex-direction: column; }
  .ll-btn-preview-pdf, .ll-btn-official-submit { justify-content: center; width: 100%; }
}

/* ─── 8. RESPONSIVE MOBILE ADAPTATIONS ────────────────────────────────────────── */
@media (max-width: 640px) {
  .ll-clean-header { padding: 0 16px; }
  .ll-clean-title { font-size: 38px; }
  .ll-clean-subtitle { font-size: 13px; }
  .ll-above-input-wrapper { bottom: 84px; padding: 0 12px; }
  .ll-above-input-card { padding: 14px 16px; max-height: 55dvh; }
  .ll-clean-bottom-bar { padding: 0 10px 12px; }
  .ll-clean-input-container { padding: 4px 6px 4px 10px; border-radius: 24px; }
  .ll-clean-form { gap: 6px; }
  .ll-mic-label { display: none; }
  .ll-clean-mic-btn { padding: 0 10px; height: 36px; }
  .ll-lang-pill { height: 36px; padding: 0 8px; font-size: 10.5px; }
  .ll-clean-send-cta { padding: 0 14px; font-size: 13px; height: 36px; }
  .ll-above-audio-btn span { display: none; }
  .ll-above-audio-btn { padding: 6px 8px; }
}
/* Ludwigslust Destination Portal Modal (Smart Civic Destination Overlay) */

.ll-dest-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: ll-dest-fade 0.22s ease-out;
}

@keyframes ll-dest-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.ll-dest-window {
  width: 95%;
  max-width: 980px;
  max-height: 88vh;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(45, 106, 79, 0.25);
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: ll-dest-scale 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ll-dest-scale {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ─── 1. Header (Civic Browser Frame) ─── */
.ll-dest-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  background: linear-gradient(to right, #f8fafc, #f1f5f9);
  border-bottom: 1px solid #e2e8f0;
  gap: 16px;
}

.ll-dest-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.ll-dest-crest {
  font-size: 26px;
  flex-shrink: 0;
}

.ll-dest-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.ll-dest-crumb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ll-dest-crumb-sep {
  color: #94a3b8;
}

.ll-dest-crumb-active {
  color: var(--ll-green-deep, #1b4332);
  font-weight: 800;
}

.ll-dest-title {
  margin: 2px 0 0;
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.ll-dest-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.ll-dest-open-official {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.16s ease;
}

.ll-dest-open-official:hover {
  background: #f1f5f9;
  color: var(--ll-green-deep, #1b4332);
  border-color: #94a3b8;
}

.ll-dest-close-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #334155;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.16s ease;
}

.ll-dest-close-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
  border-color: #94a3b8;
}

/* ─── 2. Melisa Concierge Overlay Ribbon ─── */
.ll-dest-melisa-ribbon {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-bottom: 1.5px solid #86efac;
  padding: 10px 22px;
}

.ll-dest-melisa-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #166534;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 12px;
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex-shrink: 0;
}

.ll-dest-sparkle {
  color: #fde047;
}

.ll-dest-melisa-text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #14532d;
  font-weight: 500;
}

/* ─── 3. Body Scroll Area ─── */
.ll-dest-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Quote Box */
.ll-dest-quote-box {
  background: #f8fafc;
  border-left: 4px solid var(--ll-green-mid, #2d6a4f);
  padding: 12px 18px;
  border-radius: 0 12px 12px 0;
}

.ll-dest-quote-text {
  margin: 0;
  font-size: 13px;
  font-style: italic;
  color: #475569;
  line-height: 1.55;
}

/* Important Notice Box (Kita-Gutschein) */
.ll-dest-notice-card {
  background: #fffbeb;
  border: 1.5px solid #fde68a;
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ll-dest-notice-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #92400e;
  font-size: 14px;
  font-weight: 800;
}

.ll-dest-shield-icon {
  color: #d97706;
  flex-shrink: 0;
}

.ll-dest-notice-text {
  margin: 0;
  font-size: 12.5px;
  color: #78350f;
  line-height: 1.5;
}

.ll-dest-notice-action {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 6px 14px;
  background: #d97706;
  color: #ffffff;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.16s ease;
}

.ll-dest-notice-action:hover {
  background: #b45309;
}

/* Filter Row */
.ll-dest-filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #f1f5f9;
}

.ll-dest-filter-pill {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.16s ease;
}

.ll-dest-filter-pill:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.ll-dest-filter-pill.active {
  background: var(--ll-green-deep, #1b4332);
  color: #ffffff;
  border-color: var(--ll-green-deep, #1b4332);
}

/* Section Styling */
.ll-dest-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ll-dest-section-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: #1e293b;
  letter-spacing: -0.01em;
}

.ll-dest-section-sub {
  margin: 2px 0 0;
  font-size: 12px;
  color: #64748b;
}

/* Cards Grid */
.ll-dest-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 12px;
}

.ll-dest-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.ll-dest-card:hover {
  transform: translateY(-2px);
  border-color: #86efac;
  box-shadow: 0 10px 24px -6px rgba(22, 101, 52, 0.12);
}

.ll-dest-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.ll-dest-card-tag {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #166534;
  background: #dcfce7;
  padding: 2px 8px;
  border-radius: 6px;
  margin-bottom: 4px;
}

.ll-dest-card-name {
  margin: 0;
  font-size: 14.5px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.25;
}

.ll-dest-card-lead {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: #475569;
  font-weight: 600;
}

.ll-dest-card-icon {
  color: var(--ll-green-mid, #2d6a4f);
  flex-shrink: 0;
  margin-top: 2px;
}

.ll-dest-card-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  color: #475569;
}

.ll-dest-meta-line {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ll-dest-meta-icon {
  color: #94a3b8;
  flex-shrink: 0;
}

.ll-dest-card-details {
  margin: 4px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: #64748b;
  border-top: 1px dashed #f1f5f9;
  padding-top: 6px;
}

.ll-dest-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid #f1f5f9;
}

.ll-dest-action-call {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.16s ease;
}

.ll-dest-action-call:hover {
  background: #15803d;
  color: #ffffff;
}

.ll-dest-action-mail {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: #f8fafc;
  color: #475569;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.16s ease;
}

.ll-dest-action-mail:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.ll-dest-action-link {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--ll-green-mid, #2d6a4f);
  font-weight: 700;
  text-decoration: none;
}

.ll-dest-action-link:hover {
  text-decoration: underline;
}

/* ─── 4. Footer ─── */
.ll-dest-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  gap: 12px;
}

.ll-dest-footer-hint {
  font-size: 11.5px;
  color: #64748b;
  font-weight: 600;
}

.ll-dest-footer-close {
  padding: 6px 14px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.16s ease;
}

.ll-dest-footer-close:hover {
  background: #f1f5f9;
  color: #0f172a;
}

@media (max-width: 640px) {
  .ll-dest-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .ll-dest-header-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .ll-dest-cards-grid {
    grid-template-columns: 1fr;
  }
  .ll-dest-melisa-ribbon {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}
/* ══════════════════════════════════════════════════════════════
   MelisaPortalOverlay.css  —  Mirror Glass Civic Portal Overlay
   ══════════════════════════════════════════════════════════════ */

.mpo-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(15, 31, 23, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 16px;
  animation: mpoFadeIn 0.25s ease;
}

@keyframes mpoFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─── Modal shell ─── */
.mpo-shell {
  width: 100%;
  max-width: 860px;
  height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  animation: mpoSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes mpoSlideUp {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ─── Top chrome bar (branded header) ─── */
.mpo-chrome {
  flex-shrink: 0;
  background: linear-gradient(135deg, #1b4332 0%, #2d6a4f 100%);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.mpo-chrome-logo {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.mpo-chrome-logo span {
  color: #dfb36c;
}

.mpo-chrome-breadcrumb {
  flex: 1;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.65);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mpo-chrome-badge {
  font-size: 0.72rem;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.75);
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.2);
}

.mpo-chrome-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s;
  flex-shrink: 0;
}
.mpo-chrome-close:hover { background: rgba(255,255,255,0.28); }

/* ─── Melisa hint bar ─── */
.mpo-melisa-bar {
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(179,128,56,0.15) 0%, rgba(223,179,108,0.08) 100%);
  border-bottom: 1px solid rgba(179,128,56,0.2);
  padding: 9px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: #b38038;
  font-weight: 500;
}

.mpo-melisa-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #b38038, #dfb36c);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: #fff;
  font-weight: 800;
  flex-shrink: 0;
}

/* ─── Melisa chip tooltip / side panel ─── */
.mpo-chip-panel {
  position: absolute;
  bottom: 80px;
  right: 24px;
  width: 300px;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(20px);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.85);
  padding: 18px;
  z-index: 9010;
  animation: mpoFadeIn 0.2s ease;
}

.mpo-chip-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.mpo-chip-panel-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #1b4332;
}

.mpo-chip-panel-close {
  background: none;
  border: none;
  cursor: pointer;
  color: #64748b;
  font-size: 1.1rem;
  padding: 0;
  line-height: 1;
}

.mpo-chip-panel-field {
  font-size: 0.78rem;
  color: #334155;
  background: #f0fdf4;
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 10px;
  font-weight: 600;
}

.mpo-chip-panel-help {
  font-size: 0.83rem;
  color: #334155;
  line-height: 1.5;
  margin-bottom: 12px;
}

.mpo-chip-panel-input {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid #d1fae5;
  border-radius: 10px;
  font-size: 0.9rem;
  background: #fff;
  color: #0f172a;
  outline: none;
  margin-bottom: 10px;
  font-family: inherit;
  transition: border-color 0.2s;
}
.mpo-chip-panel-input:focus { border-color: #52b788; }

.mpo-chip-panel-apply {
  width: 100%;
  padding: 9px;
  background: linear-gradient(135deg, #b38038, #dfb36c);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: opacity 0.18s;
}
.mpo-chip-panel-apply:hover { opacity: 0.88; }

/* ─── Loading spinner ─── */
.mpo-loading {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.93);
  gap: 16px;
  color: #2d6a4f;
  font-size: 0.95rem;
  font-weight: 500;
}

.mpo-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #d1fae5;
  border-top-color: #2d6a4f;
  border-radius: 50%;
  animation: mpoSpin 0.75s linear infinite;
}

@keyframes mpoSpin {
  to { transform: rotate(360deg); }
}

/* ─── iframe host ─── */
.mpo-iframe-wrap {
  flex: 1;
  overflow: hidden;
  background: #f0fdf4;
  position: relative;
}

.mpo-frame {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
}

/* ─── Error state ─── */
.mpo-error {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.93);
  gap: 12px;
  padding: 32px;
  text-align: center;
}

.mpo-error-icon { font-size: 2.5rem; }
.mpo-error-title { font-size: 1rem; font-weight: 700; color: #1b4332; }
.mpo-error-msg { font-size: 0.85rem; color: #64748b; line-height: 1.5; }
.mpo-error-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: linear-gradient(135deg, #1b4332, #2d6a4f);
  color: #fff;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  transition: opacity 0.18s;
}
.mpo-error-link:hover { opacity: 0.88; }
:root{
  --pickme-bg:#f7f4ec;
  --pickme-surface:#fffdf9;
  --pickme-surface-soft:#fbfaf6;
  --pickme-green:#4b5fff;
  --pickme-green-2:#3a4ae8;
  --pickme-green-soft:#e7e8fa;
  --pickme-gold:#e2a11a;
  --pickme-gold-soft:#fff6d9;
  --pickme-text:#101116;
  --pickme-text-soft:#747b8b;
  --pickme-border:#d9dbe3;
  --pickme-danger:#d94b54;
  --pickme-success:#21a66b;
  --pickme-warning:#e2a11a;
  --pickme-radius-sm:10px;
  --pickme-radius-md:16px;
  --pickme-radius-lg:24px;
  --pickme-radius-xl:28px;
  --pickme-shadow: 0 18px 50px rgba(16,17,22,.08);
  --pickme-shadow-hover: 0 22px 55px rgba(16,17,22,.12);
  --pickme-max:1440px;
}


*{
  box-sizing:border-box;
}


html,
body,
#root{
  margin:0;
  color:var(--pickme-text);
  background:var(--pickme-bg);
}


body{
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


.pickme-container{
  width:min(
    calc(100% - 40px),
    var(--pickme-max)
  );
  margin-inline:auto;
}


.pickme-card{
  background:var(--pickme-surface);
  border:1px solid var(--pickme-border);
  border-radius:var(--pickme-radius-lg);
  box-shadow:var(--pickme-shadow);
}


.pickme-btn{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 18px;

  border:0;
  border-radius:12px;

  font:inherit;
  font-size:12px;
  font-weight:800;

  text-decoration:none;
  cursor:pointer;

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    background .15s ease;
}


.pickme-btn:hover{
  transform:translateY(-1px);
}


.pickme-btn-primary{
  color:white;
  background:var(--pickme-green);
}


.pickme-btn-primary:hover{
  background:var(--pickme-green-2);
}


.pickme-btn-secondary{
  color:var(--pickme-green);
  background:white;
  border:1px solid var(--pickme-border);
}


.pickme-btn-gold{
  color:white;
  background:var(--pickme-gold);
}


.pickme-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;

  padding:6px 9px;
  border-radius:999px;

  background:var(--pickme-green-soft);
  color:#37724c;

  font-size:10px;
  font-weight:800;
}


.pickme-eyebrow{
  color:var(--pickme-gold);
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* ===== PickMe global header ===== */

.pickme-header{
  height:64px;
  background:rgba(246,243,234,.94);
  border-bottom:1px solid var(--pickme-border);
  backdrop-filter:blur(14px);
}

.pickme-header.compact{
  height:56px;
}

.pickme-header-inner{
  width:min(
    calc(100% - 40px),
    var(--pickme-max)
  );

  height:100%;
  margin:auto;

  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:34px;
}


.pickme-brand{
  color:var(--pickme-green);
  text-decoration:none;

  font-size:26px;
  font-weight:900;
  letter-spacing:-.04em;
}


.pickme-main-nav{
  display:flex;
  align-items:center;
  gap:22px;
}


.pickme-main-nav a,
.pickme-login{
  color:var(--pickme-text);
  text-decoration:none;
  font-size:12px;
  font-weight:700;
}


.pickme-main-nav a:hover,
.pickme-login:hover{
  color:var(--pickme-gold);
}


.pickme-header-actions{
  display:flex;
  align-items:center;
  gap:14px;
}


.pickme-location{
  padding:7px 10px;
  border-radius:999px;
  background:white;
  border:1px solid var(--pickme-border);

  font-size:10px;
  font-weight:700;
}


.pickme-login{
  padding:9px 13px;
  border-radius:10px;
  color:white;
  background:var(--pickme-green);
}


@media(max-width:760px){

  .pickme-main-nav{
    display:none;
  }

  .pickme-header-inner{
    grid-template-columns:1fr auto;
  }

  .pickme-location{
    display:none;
  }
}