:root {
  color-scheme: light;
  --warm-black: #111113;
  --ink: #161617;
  --moss: #3f4438;
  --earth: #6c3028;
  --stone: #e7e7e2;
  --sand: #fbfaf6;
  --panel: rgba(255, 255, 255, 0.72);
  --line: rgba(17, 17, 19, 0.10);
  --ios-blue: #007aff;
  --ios-gray: #f2f2f7;
  --ios-gray-2: #e5e5ea;
  --ios-shadow: 0 18px 48px rgba(0, 0, 0, 0.10);
}

.admin-pending { display:grid; grid-template-columns:220px minmax(0,1fr); gap:16px; margin:12px 0; padding:16px; border:1px solid #b9c591; border-radius:18px; background:#edf1e1; }.admin-pending h2 { margin-top:4px; font-size:20px; letter-spacing:-.035em; }.admin-pending-list { display:grid; gap:7px; }.admin-pending-list article { display:flex; align-items:center; gap:8px; padding:9px; border-radius:12px; background:#f8f5ee; }.admin-pending-list span { min-width:0; flex:1; }.admin-pending-list b,.admin-pending-list small { display:block; }.admin-pending-list small { margin-top:2px; color:#73766e; font-size:10px; }.admin-pending-list button { min-height:30px; padding:0 9px; border-radius:15px; background:#68714d; color:#fff; font-size:9px; font-weight:900; }.admin-pending-list button:last-child { background:#e6d7d2; color:#813f35; }
@media (max-width:640px) { .admin-pending { grid-template-columns:1fr; gap:10px; }.admin-pending-list article { flex-wrap:wrap; }.admin-pending-list article > span { min-width:100%; } }

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.86), transparent 30%),
    radial-gradient(circle at 90% 12%, rgba(0, 122, 255, 0.10), transparent 28%),
    linear-gradient(145deg, #e7e7e2 0%, #fbfaf6 52%, #d3d4d0 100%);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Figtree, Inter, ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

button,
input {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

h1,
h2,
h3,
p {
  margin: 0;
}

.shell {
  width: min(1200px, calc(100vw - 28px));
  margin: 0 auto;
  padding: 18px 0 34px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mark,
.avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--warm-black);
  color: var(--sand);
  font-weight: 850;
  letter-spacing: 0.08em;
}

.brand h1,
.login h1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 0.95;
  color: var(--warm-black);
  font-weight: 700;
}

.eyebrow,
.label {
  color: rgba(29, 28, 28, 0.58);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-frame {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 12px;
}

.user-rail {
  min-height: 520px;
  padding: 16px 14px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 40%),
    var(--warm-black);
  color: var(--sand);
  position: relative;
  overflow: hidden;
}

.user-rail::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  left: 34px;
  bottom: 58px;
  border: 1px solid rgba(241, 234, 218, 0.1);
  border-radius: 50%;
}

.user-rail .avatar {
  background: rgba(241, 234, 218, 0.12);
  border: 1px solid rgba(241, 234, 218, 0.12);
  margin-bottom: 18px;
}

.user-rail h2 {
  margin-top: 8px;
  font-size: 22px;
  line-height: 1;
}

.user-rail p:not(.eyebrow) {
  margin-top: 12px;
  color: rgba(241, 234, 218, 0.78);
  font-size: 12px;
  line-height: 1.35;
}

.session-button {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 18px;
  min-height: 38px;
  border-radius: 999px;
  background: rgba(241, 234, 218, 0.12);
  color: var(--sand);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.panel-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

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

.product-grid.drag-active {
  user-select: none;
}

.product-card {
  min-height: 360px;
  padding: 14px 14px 16px;
  border-radius: 18px;
  background: rgba(247, 245, 238, 0.9);
  color: var(--ink);
  border: 1px solid var(--line);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.product-card.active {
  background: var(--warm-black);
  color: var(--sand);
}

.product-main {
  width: 100%;
  min-height: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: center;
  display: grid;
  gap: 14px;
  flex: 1;
  touch-action: manipulation;
}

.product-card[data-product-card] {
  cursor: grab;
}

.product-card.dragging {
  cursor: grabbing;
  transform: scale(1.025);
  opacity: 0.92;
  box-shadow: 0 22px 60px rgba(29, 28, 28, 0.24);
  z-index: 3;
}

.product-grid.drag-active .product-card:not(.dragging) {
  opacity: 0.72;
}

.product-card.add {
  display: grid;
  place-items: center;
  border: 1px dashed rgba(29, 28, 28, 0.3);
  background: rgba(255, 255, 255, 0.42);
}

.product-symbol {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(29, 28, 28, 0.08);
  font-weight: 900;
  letter-spacing: 0.06em;
}

.product-photo {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 156px;
  border-radius: 14px;
  overflow: hidden;
  background: #c8c8c3;
  border: 1px solid rgba(29, 28, 28, 0.12);
  isolation: isolate;
}

.product-copy {
  display: grid;
  justify-items: center;
}

.product-kicker {
  width: 100%;
  max-width: none;
  margin: 0 0 11px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(29, 28, 28, 0.12);
  color: rgba(29, 28, 28, 0.52);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.18em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
}

.product-card.active .product-kicker {
  border-color: rgba(241, 234, 218, 0.14);
  color: rgba(241, 234, 218, 0.56);
}

.product-photo::before,
.product-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

.product-photo::before {
  opacity: 0.92;
  filter: grayscale(1) contrast(1.04);
}

.product-photo::after {
  background:
    linear-gradient(180deg, rgba(29, 28, 28, 0.02), rgba(29, 28, 28, 0.34)),
    radial-gradient(circle at 84% 18%, rgba(241, 234, 218, 0.14), transparent 34%);
}

.product-photo.hidromasaje::before {
  background:
    radial-gradient(ellipse at 50% 68%, rgba(241, 234, 218, 0.38) 0 22%, transparent 23%),
    radial-gradient(ellipse at 50% 72%, rgba(29, 28, 28, 0.2) 0 28%, transparent 29%),
    linear-gradient(135deg, rgba(29, 28, 28, 0.22), transparent 38%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 8px, rgba(29,28,28,.04) 8px 18px),
    #bcbcb7;
}

.product-photo.minipiscina::before {
  background:
    linear-gradient(170deg, transparent 0 45%, rgba(29, 28, 28, 0.18) 46% 56%, transparent 57%),
    radial-gradient(ellipse at 54% 62%, rgba(241, 234, 218, 0.28) 0 30%, transparent 31%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.14) 0 7px, rgba(29,28,28,.04) 7px 15px),
    #b8b8b4;
}

.product-photo.sauna::before {
  background:
    linear-gradient(90deg, rgba(29,28,28,.26) 0 18%, transparent 19% 100%),
    repeating-linear-gradient(90deg, rgba(29,28,28,.16) 0 2px, transparent 2px 18px),
    radial-gradient(circle at 72% 42%, rgba(241, 234, 218, 0.25), transparent 28%),
    #b2b2ae;
}

.product-photo.vapor::before {
  background:
    radial-gradient(ellipse at 52% 82%, rgba(29,28,28,.2) 0 24%, transparent 25%),
    radial-gradient(ellipse at 38% 34%, rgba(241,234,218,.36) 0 16%, transparent 17%),
    radial-gradient(ellipse at 64% 26%, rgba(241,234,218,.22) 0 22%, transparent 23%),
    linear-gradient(145deg, rgba(29,28,28,.2), transparent 50%),
    #bdbdb8;
}

.product-photo span {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(29, 28, 28, 0.72);
  color: var(--sand);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.product-card.active .product-photo {
  border-color: rgba(241, 234, 218, 0.1);
}

.product-card.active .product-photo span {
  background: rgba(241, 234, 218, 0.86);
  color: var(--warm-black);
}

.product-card h2 {
  margin-top: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 34px;
  line-height: 0.95;
  font-weight: 700;
}

.product-card p {
  max-width: 25ch;
  margin: 10px auto 0;
  color: rgba(29, 28, 28, 0.62);
  font-size: 13px;
  line-height: 1.35;
}

.product-card.active p {
  color: rgba(241, 234, 218, 0.68);
}

.product-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(29, 28, 28, 0.09);
  color: var(--warm-black);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-card-footer {
  display: grid;
  gap: 8px;
  justify-items: center;
  width: 100%;
  padding-top: 12px;
  border-top: 1px solid rgba(29, 28, 28, 0.1);
}

.product-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
}

.product-actions button {
  min-height: 34px;
  border-radius: 999px;
  background: rgba(29, 28, 28, 0.07);
  color: var(--warm-black);
  border: 1px solid rgba(29, 28, 28, 0.08);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.product-actions button:disabled {
  opacity: 0.28;
  cursor: default;
}

.product-actions .danger-text {
  background: rgba(29, 28, 28, 0.12);
}

.product-actions button:nth-child(3):last-child {
  grid-column: span 2;
}

.product-card.active .product-actions button {
  background: rgba(241, 234, 218, 0.1);
  color: var(--sand);
  border-color: rgba(241, 234, 218, 0.12);
}

.product-card.active .product-card-footer {
  border-color: rgba(241, 234, 218, 0.12);
}

.product-meta {
  display: block;
  margin-top: 0;
  color: rgba(29, 28, 28, 0.52);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.product-card.active .product-status {
  background: rgba(241, 234, 218, 0.12);
  color: var(--sand);
}

.product-card.active .product-meta {
  color: rgba(241, 234, 218, 0.58);
}

.plus-mark {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--warm-black);
  color: var(--sand);
  font-size: 42px;
  line-height: 1;
}

.back-link {
  color: var(--warm-black);
  background: transparent;
  padding: 0;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.floating-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin: 0 0 12px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(29, 28, 28, 0.1);
  color: var(--warm-black);
  border: 1px solid rgba(29, 28, 28, 0.08);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card {
  min-height: 154px;
  padding: 22px 22px 18px;
  border: 1px solid rgba(29, 28, 28, 0.08);
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 78%, transparent 0 58px, rgba(29, 28, 28, 0.05) 59px 60px, transparent 61px),
    var(--panel);
  color: var(--ink);
  overflow: hidden;
}

.card.dark {
  background:
    radial-gradient(circle at 82% 78%, transparent 0 62px, rgba(241, 234, 218, 0.08) 63px 64px, transparent 65px),
    var(--warm-black);
  color: var(--sand);
}

.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-6 { grid-column: span 6; }

.metric {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  min-height: 90px;
  color: var(--ink);
  font-size: clamp(54px, 9vw, 84px);
  font-weight: 900;
  line-height: 0.95;
}

.metric.compact {
  font-size: clamp(40px, 7vw, 60px);
}

.metric small {
  color: rgba(29, 28, 28, 0.62);
  font-size: 18px;
  font-weight: 850;
}

.card.dark .label {
  color: rgba(241, 234, 218, 0.58);
}

.status-block {
  display: grid;
  place-items: center;
  min-height: 94px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: rgba(241, 234, 218, 0.13);
  border: 1px solid rgba(241, 234, 218, 0.16);
  color: var(--sand);
  font-weight: 850;
  text-transform: uppercase;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(241, 234, 218, 0.12);
  background: rgba(241, 234, 218, 0.08);
  color: rgba(241, 234, 218, 0.76);
  font-size: 11px;
  font-weight: 850;
}

.chip.on {
  background: rgba(90, 92, 72, 0.78);
  color: var(--sand);
}

.stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: -2px;
}

.round-control {
  display: grid;
  place-items: center;
  width: 54px;
  height: 42px;
  border-radius: 999px;
  background: var(--warm-black);
  color: var(--sand);
  font-size: 24px;
  font-weight: 900;
}

.dock {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 12px;
  padding: 10px;
  border-radius: 22px;
  background: var(--warm-black);
}

.dock button,
.rail button {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  border-radius: 18px;
  padding: 8px 14px;
  background: rgba(241, 234, 218, 0.08);
  border: 1px solid rgba(241, 234, 218, 0.08);
  color: var(--sand);
  text-align: left;
}

.dock button.danger {
  background: rgba(105, 46, 38, 0.56);
}

.icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(241, 234, 218, 0.1);
  color: var(--sand);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.dock strong,
.rail strong {
  display: block;
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.dock span,
.rail span {
  display: block;
  margin-top: 2px;
  color: rgba(241, 234, 218, 0.62);
  font-size: 11px;
}

.side {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.side-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.admin-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 12px;
}

.customer-list {
  display: grid;
  gap: 12px;
}

.customer-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(247, 245, 238, 0.9);
  color: var(--ink);
}

.customer-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  align-items: start;
  gap: 14px;
}

.customer-head h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 0.94;
}

.customer-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(29, 28, 28, 0.1);
  color: rgba(29, 28, 28, 0.56);
  font-size: 12px;
  font-weight: 760;
  text-align: center;
}

.customer-alerts {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.customer-alerts p,
.customer-ok {
  min-height: 30px;
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(29, 28, 28, 0.08);
  color: rgba(29, 28, 28, 0.72);
  font-size: 12px;
  font-weight: 760;
  text-align: center;
}

.admin-actions {
  margin-top: 12px;
}

.admin-panel {
  min-height: auto;
}

.rail {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.events {
  max-height: 260px;
  overflow: auto;
}

.event {
  padding: 11px 0;
  border-bottom: 1px solid rgba(241, 234, 218, 0.08);
}

.event strong {
  font-size: 13px;
}

.event small {
  color: rgba(241, 234, 218, 0.58);
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--sand);
  background: var(--warm-black);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.badge.ok { background: var(--moss); }
.badge.off { background: var(--warm-black); }

.ghost,
.primary {
  min-height: 40px;
  border-radius: 999px;
  padding: 0 16px;
  font-weight: 850;
}

.ghost {
  color: var(--warm-black);
  background: rgba(29, 28, 28, 0.08);
  border: 1px solid rgba(29, 28, 28, 0.08);
}

.primary {
  background: var(--warm-black);
  color: var(--sand);
}

.login {
  width: min(430px, calc(100vw - 32px));
  margin: 9vh auto;
  padding: 26px;
  border-radius: 22px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 24px 60px rgba(29, 28, 28, 0.22);
}

.form {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.form input {
  min-height: 48px;
  border: 1px solid rgba(29, 28, 28, 0.14);
  border-radius: 12px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.38);
  color: var(--ink);
}

.progress {
  height: 7px;
  margin-top: 10px;
  border-radius: 999px;
  background: rgba(29, 28, 28, 0.1);
  overflow: hidden;
}

.progress > i {
  display: block;
  height: 100%;
  width: var(--progress, 0%);
  border-radius: inherit;
  background: var(--moss);
}

.modal-layer {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(29, 28, 28, 0.54);
  backdrop-filter: blur(10px);
}

.modal-card {
  width: min(560px, calc(100vw - 28px));
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 26px;
  border-radius: 28px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 24px 80px rgba(29, 28, 28, 0.34);
}

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

.modal-head h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 38px;
  line-height: 0.95;
}

.close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--warm-black);
  color: var(--sand);
  font-size: 22px;
  font-weight: 900;
}

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

.mode-card {
  min-height: 118px;
  padding: 16px;
  border: 1px solid rgba(29, 28, 28, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.22);
  color: var(--ink);
  text-align: center;
}

.mode-card.active {
  background: var(--warm-black);
  color: var(--sand);
}

.mode-card p {
  min-height: 34px;
  max-width: 25ch;
  margin: 5px auto 0;
  color: rgba(29, 28, 28, 0.62);
  font-size: 12px;
  line-height: 1.25;
}

.mode-card.active p {
  color: rgba(241, 234, 218, 0.64);
}

.pill-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.pill {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 34px;
  border-radius: 999px;
  background: rgba(29, 28, 28, 0.08);
  color: inherit;
  font-size: 13px;
  font-weight: 850;
}

.mode-card.active .pill {
  background: rgba(241, 234, 218, 0.12);
}

.modal-panel {
  padding: 18px;
  border: 1px solid rgba(29, 28, 28, 0.08);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.22);
}

.modal-input {
  width: 100%;
  min-height: 48px;
  margin-top: 16px;
  border-radius: 12px;
  border: 1px solid rgba(29, 28, 28, 0.14);
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.48);
  color: var(--ink);
  text-align: center;
  font-weight: 760;
}

.form-error {
  margin-top: 10px;
  color: var(--earth);
  font-size: 13px;
  font-weight: 760;
  text-align: center;
}

.modal-card .rail button {
  background: rgba(29, 28, 28, 0.08);
  border-color: rgba(29, 28, 28, 0.08);
  color: var(--ink);
}

.modal-card .rail span,
.modal-card .rail button span {
  color: rgba(29, 28, 28, 0.64);
}

.modal-card .rail strong {
  color: var(--ink);
}

.modal-card .icon {
  background: rgba(29, 28, 28, 0.08);
  color: var(--ink);
}

.modal-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.modal-action {
  min-height: 46px;
  border-radius: 999px;
  background: rgba(29, 28, 28, 0.08);
  color: var(--ink);
  font-weight: 850;
  letter-spacing: 0.04em;
}

.modal-action.primary {
  background: var(--warm-black);
  color: var(--sand);
}

.modal-action.danger {
  background: var(--earth);
  color: var(--sand);
}

.large-number {
  display: flex;
  align-items: baseline;
  justify-content: center;
  min-height: 86px;
  font-size: 68px;
  font-weight: 900;
}

/* iOS visual system */
.shell {
  width: min(1180px, calc(100vw - 24px));
  padding: 14px 0 32px;
}

.topbar {
  position: sticky;
  top: 10px;
  z-index: 6;
  min-height: 66px;
  margin-bottom: 16px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(22px) saturate(1.6);
}

.mark,
.avatar {
  border-radius: 15px;
  background: linear-gradient(180deg, #27272a, #09090b);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 18px rgba(0, 0, 0, 0.12);
}

.brand h1,
.login h1 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Figtree, Inter, sans-serif;
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1;
  font-weight: 820;
  letter-spacing: -0.02em;
}

.eyebrow,
.label {
  color: rgba(17, 17, 19, 0.48);
  letter-spacing: 0.12em;
}

.back-link,
.ghost,
.primary,
.badge,
.floating-back,
.modal-action,
.session-button,
.round-control {
  border-radius: 999px;
}

.back-link,
.ghost,
.floating-back {
  min-height: 36px;
  padding: 0 13px;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(17, 17, 19, 0.08);
  color: rgba(17, 17, 19, 0.82);
  letter-spacing: 0;
  text-transform: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64);
}

.badge.ok,
.chip.on {
  background: rgba(0, 122, 255, 0.14);
  color: #0758b8;
  border-color: rgba(0, 122, 255, 0.12);
}

.badge.off {
  background: rgba(17, 17, 19, 0.12);
  color: rgba(17, 17, 19, 0.78);
}

.product-card,
.card,
.customer-card,
.login,
.modal-card,
.user-rail {
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.68);
  box-shadow: var(--ios-shadow);
  backdrop-filter: blur(18px) saturate(1.35);
}

.product-card.active,
.card.dark,
.user-rail,
.dock {
  background: rgba(17, 17, 19, 0.88);
  color: var(--sand);
  border-color: rgba(255, 255, 255, 0.08);
}

.product-photo {
  border-radius: 22px;
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.product-photo span,
.icon,
.plus-mark {
  border-radius: 16px;
  background: rgba(17, 17, 19, 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.product-status,
.pill,
.chip,
.product-actions button {
  min-height: 32px;
  border-radius: 999px;
  background: rgba(118, 118, 128, 0.12);
  border: 1px solid rgba(118, 118, 128, 0.08);
  color: rgba(17, 17, 19, 0.74);
  letter-spacing: 0;
  text-transform: none;
}

.product-actions button {
  font-size: 11px;
  font-weight: 760;
}

.product-card.active .product-actions button,
.product-card.active .product-status,
.mode-card.active .pill {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.88);
}

.card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.58));
}

.metric {
  color: #111113;
  letter-spacing: -0.05em;
}

.dock {
  padding: 8px;
  border-radius: 28px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
}

.dock button,
.rail button {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.08);
  transition: transform 120ms ease, background 120ms ease;
}

.dock button:active,
.rail button:active,
.product-actions button:active,
.modal-action:active,
.round-control:active {
  transform: scale(0.97);
}

.modal-layer {
  background: rgba(242, 242, 247, 0.48);
  backdrop-filter: blur(22px) saturate(1.4);
}

.modal-card {
  border-radius: 34px;
  background: rgba(255, 255, 255, 0.84);
}

.modal-head h2 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Figtree, Inter, sans-serif;
  letter-spacing: -0.03em;
}

.modal-input,
.form input {
  border-radius: 16px;
  background: rgba(118, 118, 128, 0.10);
  border-color: rgba(118, 118, 128, 0.12);
}

.customer-card {
  background: rgba(255, 255, 255, 0.72);
}

.customer-head h2 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Figtree, Inter, sans-serif;
  letter-spacing: -0.03em;
  font-weight: 820;
}

.product-card.dragging {
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.24);
}

@media (max-width: 980px) {
  .shell {
    width: min(100vw - 18px, 680px);
    padding-top: 10px;
  }
  .app-frame { grid-template-columns: 1fr; }
  .user-rail { min-height: 160px; }
  .session-button {
    position: static;
    margin-top: 18px;
    width: 100%;
  }
  .panel-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; }
  .span-2,
  .span-3,
  .span-6 { grid-column: span 1; }
  .dock,
  .side-grid,
  .admin-summary,
  .admin-layout,
  .customer-head,
  .customer-meta { grid-template-columns: 1fr; }
  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .top-actions {
    width: 100%;
    flex-wrap: wrap;
  }
  .product-card {
    min-height: 190px;
  }
  .modal-card {
    padding: 20px;
    border-radius: 22px;
  }

  .mode-grid,
  .modal-actions {
    grid-template-columns: 1fr;
  }
}

/* Remote control: mirrors the physical Hidrotor display hierarchy. */
.control-shell {
  width: min(1180px, calc(100vw - 24px));
  padding-bottom: 24px;
}

.control-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  padding: 14px 18px;
  border: 1px solid #3c4039;
  border-radius: 8px;
  background: #1d201c;
  color: #f3f0e8;
}

.control-brand,
.control-top-actions,
.connection {
  display: flex;
  align-items: center;
}

.control-brand { gap: 12px; }
.control-wordmark { font-size: 18px; font-weight: 900; letter-spacing: .14em; }
.control-subtitle { color: #bdbbb1; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.control-top-actions { justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

.connection {
  gap: 7px;
  margin-right: 4px;
  color: #c8c6bd;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .1em;
}

.connection i { width: 8px; height: 8px; border-radius: 50%; background: #a54d43; }
.connection.online i { background: #9ba474; box-shadow: 0 0 0 3px rgba(155, 164, 116, .15); }

.screen-top-button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #484c43;
  border-radius: 4px;
  background: #292d27;
  color: #f3f0e8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}

.remote-screen {
  padding: 18px;
  border: 1px solid #44483f;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 30%),
    #252823;
  color: #f3f0e8;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .24);
}

.screen-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 0 2px 16px;
  border-bottom: 1px solid #44483f;
}

.screen-kicker,
.screen-label {
  margin: 0;
  color: #a9ada0;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .16em;
}

.screen-heading h1 {
  margin: 5px 0 3px;
  color: #f3f0e8;
  font-family: inherit;
  font-size: clamp(22px, 4vw, 34px);
  font-weight: 760;
  letter-spacing: -.03em;
}

.screen-user,
.screen-reading { margin: 0; color: #bdc0b5; font-size: 12px; }

.screen-power {
  display: grid;
  min-width: 142px;
  min-height: 58px;
  padding: 8px 14px;
  border: 1px solid #aa5649;
  border-radius: 5px;
  background: #71362f;
  color: #fff5ee;
  text-align: left;
}

.screen-power.is-on { border-color: #aab683; background: #535c3d; }
.screen-power span { font-size: 13px; font-weight: 900; letter-spacing: .1em; }
.screen-power small { margin-top: 4px; color: rgba(255,255,255,.7); font-size: 10px; }

.screen-main-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.screen-card {
  min-height: 210px;
  padding: 18px;
  border: 1px solid #464a42;
  border-radius: 5px;
  background: #30342e;
}

.temperature-card { background: #ece9df; color: #20231e; }
.temperature-card .screen-label,
.temperature-card .screen-reading { color: #5e6258; }

.screen-temperature,
.screen-setpoint strong,
.screen-timer {
  display: flex;
  align-items: baseline;
  justify-content: center;
  min-height: 130px;
  color: inherit;
  font-size: clamp(68px, 11vw, 118px);
  font-weight: 300;
  letter-spacing: -.08em;
  line-height: 1;
}

.screen-temperature small,
.screen-setpoint strong small { margin-left: 6px; font-size: 24px; font-weight: 700; letter-spacing: 0; }
.screen-timer { min-height: 100px; color: #f3f0e8; font-size: clamp(42px, 6vw, 68px); letter-spacing: -.06em; }

.screen-setpoint { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; gap: 6px; min-height: 130px; }
.screen-setpoint strong { min-height: 0; font-size: clamp(60px, 9vw, 94px); }

.screen-adjust {
  width: 42px;
  height: 42px;
  border: 1px solid #656a5f;
  border-radius: 4px;
  background: #3e423b;
  color: #f3f0e8;
  font-size: 26px;
  line-height: 1;
}

.screen-progress { height: 7px; overflow: hidden; border-radius: 0; background: #444940; }
.screen-progress i { display: block; width: var(--progress); height: 100%; background: #aeb987; transition: width .25s ease; }

.screen-status-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.screen-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid #464a42;
  border-radius: 4px;
  background: #2a2e28;
  color: #afb3a7;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
}

.screen-status b { color: #e1ded4; font-size: 11px; }
.screen-status.active { border-color: #768052; background: #414832; color: #e2e7d1; }
.screen-status.active b { color: #e2e7d1; }

.screen-actions {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #44483f;
  border-radius: 5px;
  background: #1e211d;
}

.screen-actions button {
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  column-gap: 9px;
  min-height: 58px;
  padding: 8px;
  border: 1px solid #41453d;
  border-radius: 4px;
  background: #2b2f29;
  color: #ece9df;
  text-align: left;
}

.screen-actions button > span {
  grid-row: 1 / -1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 3px;
  background: #454940;
  color: #f3f0e8;
  font-size: 10px;
  font-weight: 900;
}

.screen-actions strong { font-size: 10px; letter-spacing: .06em; }
.screen-actions small { color: #adb0a5; font-size: 10px; }
.screen-actions button.danger { border-color: #75473f; background: #442b27; }
.screen-actions button.danger > span { background: #793d35; }

.screen-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 20px;
  padding: 13px 3px 0;
  color: #9da195;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}

.screen-footer .has-error { color: #df8276; }
.screen-footer button { margin-left: auto; background: transparent; color: #c8ccbd; font-size: 10px; font-weight: 850; letter-spacing: .08em; }

@media (max-width: 760px) {
  .control-topbar, .screen-heading { align-items: flex-start; flex-direction: column; }
  .control-top-actions { justify-content: flex-start; }
  .screen-main-grid, .screen-status-row, .screen-actions { grid-template-columns: 1fr; }
  .screen-card { min-height: 155px; }
  .screen-temperature, .screen-setpoint strong { min-height: 82px; font-size: 74px; }
  .screen-setpoint { min-height: 82px; }
  .screen-timer { min-height: 74px; }
  .screen-footer button { margin-left: 0; }
}

/* Physical display mirror: same hierarchy as the 800×480 controller UI. */
.equipment-overview-shell { width:min(1120px,calc(100vw - 24px)); }
.overview-topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; padding:18px 20px; border:1px solid #3c4039; border-radius:18px; background:#1d201c; color:#f3f0e8; }
.overview-topbar .eyebrow { color:#bdbbb1; }.overview-topbar h1 { margin-top:3px; font-size:28px; letter-spacing:-.03em; }
.overview-actions { display:flex; align-items:center; gap:8px; }.overview-logout { min-height:38px; padding:0 14px; border:1px solid #4a4d46; border-radius:19px; background:#30332d; color:#fff; font-size:10px; font-weight:900; letter-spacing:.06em; }
.overview-pair { min-height:38px; padding:0 14px; border:1px solid #838b65; border-radius:19px; background:#68714d; color:#fff; font-size:10px; font-weight:900; letter-spacing:.06em; }
.pairing-layer { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:18px; background:rgba(24,27,22,.52); }.pairing-layer[hidden] { display:none; }
.pairing-card { position:relative; width:min(500px,100%); padding:28px; border:1px solid #d4cec3; border-radius:22px; background:#f5f1e8; color:#20221e; box-shadow:0 18px 50px rgba(0,0,0,.22); }.pairing-card h2 { margin:4px 0 12px; font-size:28px; letter-spacing:-.04em; }.pairing-card > p:not(.eyebrow):not(.pairing-status) { color:#73766e; font-size:14px; line-height:1.45; }
.pairing-card video { display:block; width:100%; aspect-ratio:4/3; margin-top:18px; border-radius:16px; background:#20221e; object-fit:cover; }.pairing-status { min-height:20px; margin:10px 0; color:#68714d; font-size:12px; font-weight:700; }.pairing-actions { display:flex; justify-content:flex-end; }.pairing-manual-label { display:block; margin:18px 0 8px; color:#73766e; font-size:12px; font-weight:700; }.pairing-manual { display:flex; gap:8px; }.pairing-manual input { min-width:0; flex:1; border:1px solid #d4cec3; border-radius:10px; padding:10px; background:#fffdf8; color:#20221e; }.pairing-manual button { padding:0 12px; border-radius:10px; background:#30332d; color:#fff; font-size:10px; font-weight:900; }.login-links { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:14px; }.login-links button { background:transparent; color:#596044; font-size:11px; font-weight:850; text-decoration:underline; }
.overview-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px; }
.overview-summary > div { display:flex; align-items:baseline; gap:7px; min-height:76px; padding:14px 18px; border:1px solid #d4cec3; border-radius:18px; background:#f5f1e8; }
.overview-summary strong { font-size:30px; letter-spacing:-.06em; }.overview-summary span { color:#73766e; font-size:11px; font-weight:800; }
.equipment-overview-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; }
.equipment-overview-card { display:flex; min-height:342px; padding:18px; flex-direction:column; align-items:stretch; border:1px solid #d4cec3; border-radius:22px; background:#f5f1e8; color:#20221e; text-align:left; transition:transform .16s ease,box-shadow .16s ease; }
.equipment-overview-card:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(29,28,28,.12); }
.equipment-overview-card.active { border-color:#68714d; background:#eaebdf; }.equipment-overview-card.offline { opacity:.72; }
.equipment-overview-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.equipment-kind { color:#73766e; font-size:9px; font-weight:900; letter-spacing:.1em; }.equipment-connection { display:inline-flex; align-items:center; gap:5px; color:#bd6559; font-size:9px; font-weight:900; letter-spacing:.05em; }.equipment-connection i { width:7px; height:7px; border-radius:50%; background:currentColor; }.equipment-overview-card.online .equipment-connection { color:#68714d; }
.equipment-overview-card > strong { margin-top:18px; font-size:22px; letter-spacing:-.035em; }.equipment-location { margin-top:4px; color:#73766e; font-size:12px; }
.equipment-overview-photo { display:grid; place-items:center; height:106px; margin-top:14px; overflow:hidden; border:1px solid #d4cec3; border-radius:14px; background:linear-gradient(135deg,#dfdad0,#eeeae2); color:#73766e; font-size:10px; font-weight:900; letter-spacing:.12em; }
.equipment-overview-photo.has-image { background:#292c27; }.equipment-overview-photo img { width:100%; height:100%; object-fit:cover; }
.equipment-overview-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:auto; padding-top:18px; }
.equipment-overview-metrics > span { min-height:60px; padding:8px; border-radius:12px; background:#e3ded3; }.equipment-overview-metrics b,.equipment-overview-metrics small { display:block; }.equipment-overview-metrics b { font-size:18px; letter-spacing:-.04em; }.equipment-overview-metrics small { margin-top:3px; color:#73766e; font-size:9px; font-weight:800; }.equipment-overview-metrics .equipment-power { background:#ded9cf; }.equipment-overview-metrics .equipment-power.on { background:#68714d; color:#fff; }.equipment-overview-metrics .equipment-power.on small { color:#edf0df; }
.equipment-open { display:flex; justify-content:space-between; align-items:center; margin-top:14px; color:#4e5740; font-size:10px; font-weight:900; letter-spacing:.08em; }.equipment-open b { font-size:18px; }

/* Home cards mirror the physical controller: dark status bar, pale display
 * surface, direct readings and a dock-like control affordance. */
.equipment-overview-card { min-height:356px; padding:12px; border-color:#c9c4b8; border-radius:8px; background:#e7e2d8; }
.equipment-overview-card.active { border-color:#68714d; background:#e7e2d8; }
.equipment-overview-head { min-height:34px; margin:-12px -12px 14px; padding:0 12px; border-radius:7px 7px 0 0; background:#292c27; color:#f4f0e7; }
.equipment-kind { color:#c8ccbd; }.equipment-connection { color:#e29589; }.equipment-overview-card.online .equipment-connection { color:#b7c18c; }
.equipment-overview-card > strong { margin-top:0; padding:0 4px; font-size:22px; }.equipment-location { padding:0 4px; }
.equipment-overview-photo { height:112px; border-color:#d4cec3; border-radius:14px; background:#f5f1e8; }.equipment-overview-photo.has-image { background:#292c27; }
.equipment-overview-metrics { gap:8px; padding-top:14px; }.equipment-overview-metrics > span { min-height:62px; border:1px solid #d4cec3; border-radius:12px; background:#f5f1e8; }.equipment-overview-metrics .equipment-power { border-color:#3e423a; background:#292c27; color:#f6f1e7; }.equipment-overview-metrics .equipment-power small { color:#c8ccbd; }.equipment-overview-metrics .equipment-power.on { background:#68714d; }
.equipment-open { min-height:40px; margin-top:10px; padding:0 12px; border-radius:14px; background:#292c27; color:#f4f0e7; }.equipment-open b { color:#b7c18c; }

/* Monochrome Home: physical-control hierarchy without product color coding. */
.overview-topbar { border-color:#000; background:#000; color:#fff; }.overview-topbar .eyebrow { color:#c8c8c8; }
.overview-pair,.overview-logout { border-color:#000; background:#000; color:#fff; }.overview-logout { background:#fff; color:#000; }
.overview-summary > div { border-color:#000; background:#fff; }.overview-summary span { color:#505050; }
.equipment-overview-card,.equipment-overview-card.active { border-color:#000; background:#fff; }.equipment-overview-card.offline { opacity:.65; }
.equipment-overview-head { background:#000; color:#fff; }.equipment-kind { color:#d0d0d0; }.equipment-connection,.equipment-overview-card.online .equipment-connection { color:#fff; }.equipment-connection i { background:#fff; }
.equipment-location { color:#505050; }.equipment-overview-photo { border-color:#000; background:#f2f2f2; color:#4b4b4b; }.equipment-overview-photo.has-image { background:#000; }
.equipment-overview-metrics > span { border-color:#000; background:#f7f7f7; }.equipment-overview-metrics small { color:#505050; }.equipment-overview-metrics .equipment-power,.equipment-overview-metrics .equipment-power.on { border-color:#000; background:#000; color:#fff; }.equipment-overview-metrics .equipment-power small { color:#d0d0d0; }
.equipment-open { background:#000; color:#fff; }.equipment-open b { color:#fff; }

/* Color is reserved for status only: green = operating/connected, red = off
 * or disconnected. Every actionable control reads as a compact pill. */
.overview-pair,.overview-logout,.equipment-open { border-radius:999px; }
.equipment-connection { min-height:22px; padding:0 8px; border-radius:999px; background:#f5e4e1; color:#9d3e35; }.equipment-connection i { background:currentColor; }
.equipment-overview-card.online .equipment-connection { background:#e2ead9; color:#55703f; }
.equipment-overview-metrics .equipment-power { min-height:32px; padding:7px 9px; border:0; border-radius:999px; background:#a9463d; color:#fff; }.equipment-overview-metrics .equipment-power small { color:#ffe9e5; }
.equipment-overview-metrics .equipment-power.on { background:#5d7d43; color:#fff; }.equipment-overview-metrics .equipment-power.on small { color:#edf5e7; }
.equipment-overview-card.offline .equipment-open { border:1px solid #a9463d; background:#fff; color:#9d3e35; }

/* Apply the same visual system inside every equipment control. */
.physical-dashboard { border-color:#000; background:#fff; }
.physical-sidebar { background:#000; color:#fff; }.physical-avatar,.physical-settings { border-color:#fff; background:#fff; color:#000; }.physical-equipment { border-radius:999px; background:#fff; color:#000; }.physical-user { color:#fff; }.physical-connection { color:#e97b70; }.physical-connection.online { color:#a7d28b; }
.physical-power { border-radius:999px; background:#a9463d; color:#fff; }.physical-power.on { background:#5d7d43; }
.physical-titlebar { border-color:#000; }.physical-card { border-color:#000; border-radius:16px; background:#fff; }.physical-card > p,.physical-titlebar small { color:#505050; }.physical-card > i { border-color:#000; }
.physical-card.desired button,.physical-adjust button { border-radius:999px; background:#000; color:#fff; }
.physical-card.state { border-color:#000; background:#000; }.physical-card.state > span { border-color:#fff; background:#fff; color:#000; }.physical-card.state > p { color:#d0d0d0; }.physical-card.state > em { border-radius:999px; background:#5d7d43; }.physical-chips i { border-color:#fff; color:#d0d0d0; }.physical-chips i.on { background:#5d7d43; color:#fff; }
.physical-dock { border-color:#000; background:#fff; }.physical-dock button { border-color:#000; border-radius:999px; background:#fff; color:#000; }.physical-dock button > span { background:#000; color:#fff; border-radius:50%; }.physical-dock small { color:#505050; }.physical-dock button.danger { border-color:#a9463d; background:#fff; color:#9d3e35; }

.physical-dashboard {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  gap: 12px;
  min-height: 560px;
  padding: 16px;
  border: 1px solid #c9c4b8;
  border-radius: 8px;
  background: #e7e2d8;
  color: #20221e;
}

.physical-sidebar {
  position: relative;
  min-height: 100%;
  padding: 14px 12px;
  border-radius: 24px;
  background: #292c27;
  color: #f4f0e7;
}

.physical-avatar { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:#3b3e37; font-size:13px; font-weight:900; }
.physical-settings { position:absolute; top:17px; right:12px; width:36px; height:36px; border:1px solid #4a4d46; border-radius:50%; background:#3b3e37; color:#f4f0e7; font-size:17px; }
.physical-equipment { width:100%; margin-top:12px; min-height:32px; border-radius:16px; background:#666f4c; color:#fff; font-size:10px; font-weight:900; letter-spacing:.06em; }
.physical-equipment b { display:inline-grid; place-items:center; width:17px; height:17px; margin-left:6px; border-radius:50%; background:rgba(255,255,255,.2); }
.physical-user { margin:16px 0 9px; color:#fff; font-size:15px; font-weight:700; }
.physical-connection { margin:0; color:#d97468; font-size:10px; font-weight:850; letter-spacing:.03em; }
.physical-connection.online { color:#b7c18c; }
.physical-power { position:absolute; right:12px; bottom:64px; left:12px; min-height:34px; border-radius:17px; background:#41443d; color:#fff; font-size:10px; font-weight:900; letter-spacing:.06em; }
.physical-power.on { background:#6e372f; }

.physical-content { display:grid; grid-template-rows:auto 1fr auto; gap:12px; }
.physical-titlebar { display:flex; justify-content:space-between; align-items:center; min-height:38px; padding:0 4px 7px; border-bottom:1px solid #c7c1b5; font-size:15px; font-weight:800; }
.physical-titlebar small { color:#66685f; font-size:10px; font-weight:700; }
.physical-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-template-rows:1.1fr .92fr; gap:12px; }
.physical-card { position:relative; overflow:hidden; padding:17px; border:1px solid #d4cec3; border-radius:22px; background:#f5f1e8; }
.physical-card > p { margin:0; color:#767870; font-size:10px; font-weight:900; letter-spacing:.08em; }
.physical-card > strong { display:flex; align-items:baseline; justify-content:center; min-height:100px; color:#232520; font-size:clamp(42px,6vw,72px); font-weight:400; letter-spacing:-.08em; }
.physical-card > strong small { margin-left:4px; color:#73766e; font-size:16px; font-weight:700; letter-spacing:0; }
.physical-card > i { position:absolute; top:53%; left:50%; width:92px; height:92px; transform:translate(-50%,-36%); border:1px solid #dad4c8; border-radius:50%; pointer-events:none; }
.physical-card.temp { grid-column:1 / span 4; grid-row:1; }
.physical-card.desired { grid-column:1 / span 4; grid-row:2; }
.physical-card.sessions { grid-column:5 / span 4; grid-row:1; }
.physical-card.time { grid-column:5 / span 4; grid-row:2; }
.physical-card.state { grid-column:9 / span 4; grid-row:1 / span 2; }
.physical-card.desired > div { position:absolute; right:18px; bottom:13px; left:18px; display:flex; justify-content:center; gap:10px; }
.physical-card.desired button { width:54px; height:32px; border-radius:16px; background:#292c27; color:#fff; font-size:20px; }
.physical-card.sessions > span,.physical-card.time > span,.physical-card.state > span { display:grid; place-items:center; float:left; width:38px; height:38px; margin-right:8px; border:1px solid #dbd5ca; border-radius:50%; color:#2a2c27; font-weight:900; }
.physical-card.sessions > strong,.physical-card.time > strong { min-height:62px; padding-top:9px; font-size:38px; }
.physical-adjust { position:absolute; right:14px; bottom:10px; left:14px; display:flex; justify-content:center; gap:8px; }
.physical-adjust button { width:42px; height:28px; border-radius:14px; background:#292c27; color:#fff; font-size:18px; }
.physical-card.state { background:#292c27; color:#f6f1e7; }
.physical-card.humid-state { cursor:pointer; }
.physical-card.state > span { background:#3c3f38; border-color:#4a4d46; color:#fff; }
.physical-card.state > p { color:#afc4c9; }
.physical-card.state > b { display:block; clear:both; margin-top:20px; text-align:center; color:#fff; font-size:16px; }
.physical-card.state > em { display:block; margin:8px auto; padding:7px; border-radius:16px; background:#515349; color:#fff; font-size:10px; font-style:normal; font-weight:900; text-align:center; }
.physical-chips { display:flex; justify-content:space-between; gap:4px; }
.physical-chips i { display:grid; place-items:center; width:34px; height:18px; border:1px solid #55584f; border-radius:9px; color:#b7b9b1; font-size:9px; font-style:normal; font-weight:900; }
.physical-chips i.on { background:#68714d; color:#fff; }
.physical-card.time > strong { font-size:32px; }
.physical-progress { position:absolute; right:24px; bottom:48px; left:24px; height:5px; overflow:hidden; border-radius:3px; background:#d8d1c5; }
.physical-progress i { display:block; width:var(--progress); height:100%; background:#68714d; }

.physical-dock { display:grid; grid-template-columns:repeat(5,1fr); gap:9px; padding:10px; border-radius:22px; background:#292c27; }
.physical-dock.wet-dock { grid-template-columns:repeat(4,1fr); }
.physical-dock button { display:grid; grid-template-columns:32px 1fr; grid-template-rows:1fr 1fr; align-items:center; column-gap:8px; min-height:52px; padding:7px 9px; border:1px solid #3e423a; border-radius:18px; background:#30332d; color:#fff; text-align:left; }
.physical-dock button > span { grid-row:1/-1; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#41443d; font-size:10px; font-weight:900; }
.physical-dock b { font-size:11px; letter-spacing:.04em; }.physical-dock small { color:#b9bbb2; font-size:10px; }.physical-dock button.danger { background:#71362f; border-color:#86463d; }

/* Final control-panel palette: black/white structure, semantic green/red. */
.physical-dashboard { border-color:#000; background:#fff; }
.physical-sidebar { background:#000; color:#fff; }.physical-avatar,.physical-settings { border-color:#fff; background:#fff; color:#000; }.physical-equipment { border-radius:999px; background:#fff; color:#000; }.physical-user { color:#fff; }.physical-connection { color:#e97b70; }.physical-connection.online { color:#a7d28b; }
.physical-power { border-radius:999px; background:#a9463d; color:#fff; }.physical-power.on { background:#5d7d43; }
.physical-titlebar { border-color:#000; }.physical-titlebar small,.physical-card > p { color:#505050; }.physical-card { border-color:#000; border-radius:16px; background:#fff; }.physical-card > i { border-color:#000; }.physical-card.desired button,.physical-adjust button { border-radius:999px; background:#000; color:#fff; }
.physical-card.state { border-color:#000; background:#000; }.physical-card.state > span { border-color:#fff; background:#fff; color:#000; }.physical-card.state > p { color:#d0d0d0; }.physical-card.state > em { border-radius:999px; background:#5d7d43; }.physical-chips i { border-color:#fff; color:#d0d0d0; }.physical-chips i.on { background:#5d7d43; color:#fff; }
.physical-dock { border:1px solid #000; background:#000; }.physical-dock button { border-color:#fff; border-radius:999px; background:#fff; color:#000; }.physical-dock button > span { background:#000; color:#fff; }.physical-dock small { color:#505050; }.physical-dock button.active-control { border-color:#5d7d43; background:#5d7d43; color:#fff; }.physical-dock button.active-control > span { background:#fff; color:#5d7d43; }.physical-dock button.active-control small { color:#edf5e7; }.physical-dock button.mode-control { border-color:#d0d0d0; background:#d0d0d0; }.physical-dock button.danger { border-color:#a9463d; background:#a9463d; color:#fff; }.physical-dock button.danger > span { background:#fff; color:#a9463d; }.physical-dock button.danger small { color:#ffe9e5; }
.physical-dock button.power-control { border-color:#a9463d; background:#a9463d; color:#fff; }.physical-dock button.power-control > span { background:#fff; color:#a9463d; }.physical-dock button.power-control small { color:#ffe9e5; }.physical-dock button.power-control.active-control { border-color:#5d7d43; background:#5d7d43; }.physical-dock button.power-control.active-control > span { color:#5d7d43; }.physical-dock button.power-control.active-control small { color:#edf5e7; }
.physical-sidebar-actions { display:grid; gap:7px; margin-top:8px; }.physical-sidebar-actions button { min-height:30px; border:1px solid #fff; border-radius:15px; background:#fff; color:#000; font-size:9px; font-weight:900; letter-spacing:.05em; }.physical-sidebar-actions button.danger { border-color:#a9463d; background:#a9463d; color:#fff; }


.equipment-modal { width:min(520px,calc(100vw - 32px)); }
.equipment-list { display:grid; gap:8px; margin-top:18px; }
.equipment-row { display:grid; grid-template-columns:12px 1fr auto; align-items:center; gap:11px; min-height:66px; padding:10px 12px; border:1px solid #d4cec3; border-radius:14px; background:#f4f0e7; color:#242620; text-align:left; }
.equipment-row.active { border-color:#68714d; background:#e9ebdf; }.equipment-dot { width:9px; height:9px; border-radius:50%; background:#bd6559; }.equipment-dot.online { background:#7e8a59; }.equipment-row strong,.equipment-row small { display:block; }.equipment-row small { margin-top:4px; color:#73766e; font-size:11px; }.equipment-row b { color:#68714d; font-size:10px; letter-spacing:.06em; }
.equipment-image-preview { display:grid; place-items:center; height:190px; overflow:hidden; border:1px dashed #bdb7aa; border-radius:18px; background:#e8e3d9; color:#73766e; font-size:12px; font-weight:800; }
.equipment-image-preview.has-image { border-style:solid; background:#292c27; }.equipment-image-preview img { width:100%; height:100%; object-fit:cover; }
.equipment-image-input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.equipment-image-picker { display:grid; place-items:center; min-height:46px; margin-top:12px; border:1px solid #bdb7aa; border-radius:14px; background:#f4f0e7; color:#4e5740; cursor:pointer; font-size:10px; font-weight:900; letter-spacing:.08em; }
.equipment-image-help { margin:8px 0 0; color:#73766e; font-size:11px; text-align:center; }
.admin-modal { width:min(560px,calc(100vw - 32px)); }
.admin-customer-modal { width:min(620px,calc(100vw - 32px)); }
.admin-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.admin-form-grid label,.admin-field { display:grid; gap:6px; color:#73766e; font-size:10px; font-weight:900; letter-spacing:.06em; }
.admin-form-grid label:last-child { grid-column:1/-1; }
.admin-form-grid input,.admin-form-grid select,.admin-field select { width:100%; min-height:44px; padding:0 12px; border:1px solid #d4cec3; border-radius:12px; background:#f9f6ef; color:#20221e; font:inherit; font-size:14px; letter-spacing:normal; }
.admin-client-state { display:grid; gap:4px; margin-bottom:16px; padding:12px; border:1px solid #adb88d; border-radius:14px; background:#e8ebdd; color:#465033; }.admin-client-state b { font-size:10px; letter-spacing:.08em; }.admin-client-state span { font-size:12px; }.admin-client-state.suspended { border-color:#d89a92; background:#f6e4e1; color:#7c322c; }
.admin-section { margin-top:16px; }.admin-section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }.admin-section-head strong { font-size:12px; }.admin-section-head button { min-height:30px; padding:0 10px; border-radius:15px; background:#292c27; color:#fff; font-size:9px; font-weight:900; letter-spacing:.06em; }
.admin-user-list { display:grid; gap:7px; }.admin-user-row { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:56px; padding:9px 11px; border:1px solid #d4cec3; border-radius:12px; background:#f7f3eb; }.admin-user-row span { min-width:0; }.admin-user-row b,.admin-user-row small { display:block; }.admin-user-row b { font-size:13px; }.admin-user-row small { overflow:hidden; margin-top:3px; color:#73766e; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }.admin-user-row button { flex:none; min-height:29px; padding:0 9px; border:1px solid #bdb7aa; border-radius:15px; background:#fff; color:#4e5740; font-size:9px; font-weight:900; letter-spacing:.04em; }
.customer-card.suspended { border-color:#d89a92; background:#fcf3f1; }

@media (max-width:760px) { .physical-dashboard { grid-template-columns:1fr; padding:10px; }.physical-sidebar { min-height:176px; }.physical-power { bottom:14px; }.physical-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }.physical-card.temp,.physical-card.desired { grid-column:span 6; }.physical-card.sessions,.physical-card.state,.physical-card.time { grid-column:span 6; }.physical-card.temp,.physical-card.desired,.physical-card.sessions,.physical-card.state,.physical-card.time { grid-row:auto; }.physical-dock,.physical-dock.wet-dock { grid-template-columns:repeat(2,1fr); }.physical-titlebar { margin:0 4px; }.physical-card { min-height:145px; }.physical-card > strong { min-height:65px; } }

/* Phone-first control layout. The physical display is wide, but the remote
 * must be useful one-handed on a 360–430px phone without horizontal scroll. */
@media (max-width:640px) {
  body { min-width:320px; }
  .equipment-overview-shell { width:calc(100vw - 12px); padding-top:6px; }
  .overview-topbar { margin-bottom:8px; padding:14px; border-radius:16px; }.overview-topbar h1 { font-size:24px; }.overview-actions { gap:6px; }.overview-pair { min-height:36px; padding:0 10px; font-size:9px; }.overview-logout { min-height:36px; padding:0 10px; }
  .overview-summary { gap:7px; margin-bottom:8px; }.overview-summary > div { min-height:62px; padding:10px; flex-direction:column; gap:0; justify-content:center; border-radius:14px; }.overview-summary strong { font-size:25px; }
  .equipment-overview-grid { gap:8px; }.equipment-overview-card { min-height:302px; padding:15px; border-radius:18px; }.equipment-overview-card:hover { transform:none; }.equipment-overview-card > strong { margin-top:14px; font-size:20px; }
  .equipment-overview-photo { height:94px; margin-top:12px; }
  .equipment-overview-metrics { gap:5px; padding-top:14px; }.equipment-overview-metrics > span { min-height:54px; padding:7px; }.equipment-overview-metrics b { font-size:16px; }
  .pairing-card { padding:22px 18px; border-radius:18px; }.pairing-card h2 { font-size:24px; }.pairing-manual { flex-direction:column; }.pairing-manual button { min-height:40px; }
  .control-shell { width:calc(100vw - 12px); padding:6px 0 18px; }
  .control-topbar { gap:8px; margin-bottom:8px; padding:10px 12px; border-radius:14px; }
  .control-brand { min-width:0; }
  .control-wordmark { font-size:14px; letter-spacing:.1em; }
  .control-subtitle { display:none; }
  .control-top-actions { width:auto; margin-left:auto; gap:6px; }
  .connection { min-height:34px; padding:0 9px; font-size:9px; white-space:nowrap; }
  .screen-top-button { min-height:34px; padding:0 10px; font-size:9px; }

  .physical-dashboard { gap:8px; min-height:0; padding:8px; border-radius:16px; }
  .physical-sidebar {
    display:grid;
    grid-template-columns:42px minmax(0,1fr) 38px;
    align-items:center;
    gap:8px 10px;
    min-height:0;
    padding:10px;
    border-radius:18px;
  }
  .physical-avatar { width:42px; height:42px; grid-column:1; grid-row:1; }
  .physical-settings { position:static; width:38px; height:38px; grid-column:3; grid-row:1; }
  .physical-user { grid-column:2; grid-row:1; margin:0; overflow:hidden; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
  .physical-equipment { grid-column:1 / -1; grid-row:2; min-height:42px; margin:0; font-size:11px; }
  .physical-sidebar-actions { grid-column:1 / -1; grid-row:3; grid-template-columns:1fr 1fr; margin:0; }
  .physical-connection { grid-column:1 / 3; grid-row:4; margin:0; font-size:9px; }
  .physical-power { position:static; grid-column:3; grid-row:4; min-height:38px; width:100%; padding:0 5px; border-radius:19px; font-size:9px; }

  .physical-content { gap:8px; }
  .physical-titlebar { min-height:34px; margin:0 2px; padding:0 2px 6px; font-size:13px; }
  .physical-titlebar small { max-width:48%; overflow:hidden; font-size:9px; text-align:right; text-overflow:ellipsis; white-space:nowrap; }
  .physical-grid { grid-template-columns:1fr; grid-template-rows:none; gap:8px; }
  .physical-card { min-height:142px; padding:14px; border-radius:16px; }
  .physical-card.temp,.physical-card.desired,.physical-card.sessions,.physical-card.state,.physical-card.time { grid-column:span 1; }
  .physical-card > p { font-size:8px; letter-spacing:.05em; }
  .physical-card > strong { min-height:64px; font-size:clamp(36px,12vw,52px); }
  .physical-card > strong small { margin-left:2px; font-size:12px; }
  .physical-card > i { width:66px; height:66px; }
  .physical-card.desired > div { right:8px; bottom:8px; left:8px; gap:6px; }
  .physical-card.desired button { width:40px; height:30px; font-size:18px; }
  .physical-card.sessions > span,.physical-card.time > span,.physical-card.state > span { width:34px; height:34px; margin-right:7px; font-size:12px; }
  .physical-card.sessions > strong,.physical-card.time > strong { min-height:56px; padding-top:7px; font-size:31px; }
  .physical-adjust { right:12px; bottom:10px; left:12px; gap:8px; }
  .physical-adjust button { width:42px; height:30px; font-size:18px; }
  .physical-card.state > b { margin-top:14px; font-size:15px; line-height:1.15; }
  .physical-card.state > em { margin:8px 0; padding:7px; font-size:10px; }
  .physical-chips { flex-wrap:nowrap; justify-content:center; gap:5px; }
  .physical-chips i { width:35px; height:18px; font-size:8px; }
  .physical-card.time > strong { font-size:30px; }
  .physical-progress { right:24px; bottom:47px; left:24px; }
  .physical-dock { position:sticky; bottom:6px; z-index:2; gap:7px; padding:8px; border-radius:18px; }
  .physical-dock,.physical-dock.wet-dock { grid-template-columns:1fr; }
  .physical-dock button { grid-template-columns:34px 1fr; column-gap:9px; min-height:60px; padding:9px; border-radius:14px; }
  .physical-dock button > span { width:34px; height:34px; font-size:10px; }
  .physical-dock b { font-size:11px; }.physical-dock small { font-size:10px; }

  .modal-layer { align-items:end; padding:0; }
  .modal-card,.equipment-modal { width:100%; max-height:86dvh; padding:20px 16px calc(20px + env(safe-area-inset-bottom)); border-radius:24px 24px 0 0; }
  .modal-head { margin-bottom:14px; }.modal-head h2 { font-size:31px; }.close { width:42px; height:42px; }
  .equipment-row { min-height:68px; }.modal-action { min-height:48px; }
  .admin-form-grid { grid-template-columns:1fr; }.admin-form-grid label:last-child { grid-column:auto; }.admin-user-row { align-items:flex-start; flex-direction:column; }.admin-user-row button { width:100%; }
}

.client-detail-section-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:12px; }
.client-detail-section-head b { font-size:13px; letter-spacing:.08em; text-transform:uppercase; }
.invite-form p { color:rgba(29,28,28,.7); line-height:1.45; }
.provisioning-code { display:grid; gap:7px; margin:12px 0 16px; padding:20px; border:1px solid #d4cec3; border-radius:16px; background:#f8f5ee; text-align:center; }
.provisioning-code small { color:#73766e; font-size:9px; font-weight:900; letter-spacing:.12em; }
.provisioning-code strong { font-size:26px; letter-spacing:.12em; }
.provisioning-code span { color:#73766e; font-size:11px; }
@media (max-width:640px) { .client-detail-section-head { align-items:flex-start; flex-direction:column; } }

/* Hidrotor design pass: iOS clarity + brand materiality */
:root {
  --warm-black: #111111;
  --ink: #151515;
  --stone: #ededed;
  --sand: #ffffff;
  --panel: rgba(255, 255, 255, 0.82);
  --line: rgba(0, 0, 0, 0.09);
  --ios-blue: #0a84ff;
  --ios-gray: #f5f5f7;
  --ios-gray-2: #e8e8ed;
  --ios-shadow: 0 18px 50px rgba(0, 0, 0, 0.08);
}

body {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.82), rgba(245,245,247,0.92)),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.025) 0 1px, transparent 1px 78px),
    #f5f5f7;
}

.shell {
  width: min(1220px, calc(100vw - 24px));
}

.topbar {
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
}

.mark,
.avatar {
  border-radius: 17px;
  background: #111111;
  color: #ffffff;
}

.brand h1,
.login h1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  letter-spacing: 0;
}

.eyebrow,
.label,
.product-kicker {
  color: rgba(0, 0, 0, 0.48);
  font-size: 10px;
  letter-spacing: 0.16em;
}

.client-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.94), rgba(255,255,255,0.66)),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.035) 0 1px, transparent 1px 26px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.05);
}

.client-hero h2 {
  margin-top: 5px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(38px, 6vw, 72px);
  line-height: 0.92;
  font-weight: 700;
}

.client-hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.client-hero-meta span,
.client-hero-meta button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.72);
  font-size: 12px;
  font-weight: 760;
}

.client-hero-meta button {
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.product-grid {
  grid-template-columns: repeat(4, minmax(230px, 1fr));
  align-items: stretch;
}

.product-card,
.card,
.customer-card,
.login,
.modal-card {
  border: 1px solid rgba(0, 0, 0, 0.075);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.07);
}

.product-card {
  min-height: 410px;
  border-radius: 30px;
}

.product-card.active,
.card.dark,
.user-rail,
.dock {
  background: #111111;
  color: #ffffff;
}

.product-main {
  cursor: pointer;
}

.product-photo {
  min-height: 188px;
  border-radius: 26px;
  background: #dedede;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.product-photo::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16), rgba(0,0,0,0.30)),
    linear-gradient(90deg, rgba(255,255,255,0.10), transparent 45%);
}

.photo-room {
  position: absolute;
  inset: 18px;
  z-index: 0;
  border: 1px solid rgba(255,255,255,0.22);
  border-bottom-color: rgba(0,0,0,0.18);
}

.photo-room i {
  position: absolute;
  display: block;
  background: rgba(255,255,255,0.18);
}

.photo-room i:nth-child(1) {
  left: 15%;
  top: 0;
  bottom: 0;
  width: 1px;
}

.photo-room i:nth-child(2) {
  right: 18%;
  top: 20%;
  bottom: 16%;
  width: 1px;
}

.photo-room i:nth-child(3) {
  left: 0;
  right: 0;
  bottom: 28%;
  height: 1px;
}

.product-photo.hidromasaje::before {
  background:
    radial-gradient(ellipse at 52% 72%, rgba(255,255,255,0.42) 0 20%, rgba(0,0,0,0.14) 21% 29%, transparent 30%),
    linear-gradient(120deg, rgba(255,255,255,0.28), transparent 36%),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.10) 0 1px, transparent 1px 18px),
    #bfc0c0;
}

.product-photo.minipiscina::before {
  background:
    linear-gradient(165deg, transparent 0 42%, rgba(0,0,0,0.18) 43% 55%, transparent 56%),
    radial-gradient(ellipse at 55% 64%, rgba(255,255,255,0.35) 0 30%, transparent 31%),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.08) 0 1px, transparent 1px 16px),
    #b8b9b8;
}

.product-photo.sauna::before {
  background:
    linear-gradient(90deg, rgba(0,0,0,0.22) 0 18%, transparent 19% 100%),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.16) 0 2px, transparent 2px 17px),
    radial-gradient(circle at 72% 42%, rgba(255,255,255,0.22), transparent 28%),
    #b4b2ae;
}

.product-photo.vapor::before {
  background:
    radial-gradient(ellipse at 52% 82%, rgba(0,0,0,0.18) 0 24%, transparent 25%),
    radial-gradient(ellipse at 38% 34%, rgba(255,255,255,0.40) 0 16%, transparent 17%),
    radial-gradient(ellipse at 64% 26%, rgba(255,255,255,0.24) 0 22%, transparent 23%),
    linear-gradient(145deg, rgba(0,0,0,0.18), transparent 50%),
    #c2c2c0;
}

.product-line-icon {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  border-radius: 22px;
  background: rgba(17, 17, 17, 0.76);
  color: #ffffff;
  backdrop-filter: blur(12px);
}

.product-line-icon svg {
  width: 38px;
  height: 38px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.product-photo small {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  z-index: 1;
  min-height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,0.70);
  color: rgba(0,0,0,0.72);
  font-size: 11px;
  font-weight: 760;
}

.product-card.active .product-photo small {
  background: rgba(17,17,17,0.62);
  color: rgba(255,255,255,0.86);
}

.product-card h2 {
  font-size: clamp(32px, 3.3vw, 46px);
}

.product-card p {
  color: rgba(0, 0, 0, 0.58);
}

.product-card.active p {
  color: rgba(255, 255, 255, 0.68);
}

.product-status,
.pill,
.chip,
.badge,
.product-actions button,
.back-link,
.ghost,
.floating-back,
.modal-action {
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
}

.product-status,
.pill,
.chip {
  background: rgba(0, 0, 0, 0.055);
  border-color: rgba(0, 0, 0, 0.055);
}

.product-actions {
  grid-template-columns: 44px 44px minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}

.product-actions button {
  min-width: 0;
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.74);
}

.product-actions .danger-text {
  background: rgba(0, 0, 0, 0.10);
}

.product-card.add {
  border-style: solid;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.60)),
    repeating-linear-gradient(135deg, rgba(0,0,0,0.035) 0 1px, transparent 1px 18px);
}

.admin-shell .topbar,
.admin-shell .card,
.admin-shell .customer-card,
.admin-shell .admin-panel {
  border-radius: 18px;
}

.admin-shell .brand h1,
.admin-shell .customer-head h2 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Figtree, Inter, sans-serif;
  font-weight: 820;
  letter-spacing: -0.025em;
}

.admin-shell .admin-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-shell .card {
  min-height: 116px;
  padding: 18px;
  box-shadow: none;
}

.admin-shell .customer-list {
  gap: 8px;
}

.admin-shell .customer-card {
  padding: 15px;
  background: rgba(255,255,255,0.88);
  box-shadow: none;
}

.admin-shell .customer-head {
  grid-template-columns: minmax(0, 1fr) 116px;
  align-items: center;
}

.admin-shell .customer-head h2 {
  font-size: 24px;
  line-height: 1.05;
}

.admin-shell .customer-meta {
  text-align: left;
}

.admin-shell .product-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-shell .rail button,
.admin-shell .dock button {
  min-height: 50px;
  border-radius: 14px;
}

.admin-shell .icon {
  border-radius: 12px;
}

/* Admin is intentionally quieter than the product dashboard: this is an
   internal workspace, not another control surface. */
.admin-minimal-shell { width:min(1120px,calc(100vw - 24px)); }
.admin-minimal-topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0; border-bottom:1px solid rgba(0,0,0,.1); }
.admin-minimal-brand { display:flex; align-items:center; gap:10px; }.admin-minimal-brand > span { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:#20221e; color:#f6f1e7; font:700 17px Georgia,serif; }.admin-minimal-brand p { margin:0; color:#73766e; font-size:9px; font-weight:900; letter-spacing:.12em; }.admin-minimal-brand strong { display:block; margin-top:2px; font-size:15px; letter-spacing:-.025em; }
.admin-top-link,.admin-add-client { min-height:38px; padding:0 13px; border-radius:19px; font-size:10px; font-weight:900; letter-spacing:.04em; }.admin-top-link { margin-right:7px; background:transparent; color:#5b5e56; }.admin-add-client { background:#292c27; color:#fff; }
.admin-minimal-hero { display:flex; align-items:end; justify-content:space-between; gap:22px; padding:34px 0 26px; }.admin-minimal-hero h1 { margin:4px 0 6px; font-size:clamp(32px,5vw,54px); letter-spacing:-.06em; }.admin-minimal-hero > div > span { color:#73766e; font-size:13px; }.admin-quiet-stats { display:flex; gap:18px; padding-bottom:5px; color:#73766e; font-size:11px; white-space:nowrap; }.admin-quiet-stats b { color:#20221e; font-size:17px; }.admin-quiet-stats i,.admin-client-status i { display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:50%; background:#bd6559; }.admin-quiet-stats i { background:#68714d; }
.admin-client-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:12px; padding-bottom:28px; }.admin-client-card,.admin-client-add { min-height:258px; padding:18px; border:1px solid #d4cec3; border-radius:20px; background:#f8f5ee; color:#20221e; text-align:left; }.admin-client-card { display:flex; flex-direction:column; }.admin-client-card.suspended { background:#f8efed; border-color:#d8b5ae; }.admin-client-card-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }.admin-client-monogram { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:#e5e0d5; color:#505449; font-size:12px; font-weight:900; }.admin-client-status { color:#bd6559; font-size:9px; font-weight:900; letter-spacing:.06em; }.admin-client-status.online { color:#68714d; }.admin-client-status.suspended { color:#934c43; }.admin-client-status.online i { background:#68714d; }.admin-client-status.suspended i { background:#934c43; }
.admin-client-card > p { margin:20px 0 0; color:#73766e; font-size:10px; font-weight:850; letter-spacing:.07em; }.admin-client-card h2 { margin:5px 0 0; font-size:25px; letter-spacing:-.045em; }.admin-client-owner { margin-top:4px; color:#73766e; font-size:12px; }.admin-client-counts { display:flex; gap:7px; margin-top:auto; padding-top:18px; }.admin-client-counts span { padding:7px 9px; border-radius:11px; background:#e8e3d9; color:#73766e; font-size:10px; }.admin-client-counts b { color:#20221e; }.admin-client-open { display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:12px; padding:0; color:#4e5740; font-size:10px; font-weight:900; letter-spacing:.08em; }.admin-client-open b { font-size:18px; }.admin-client-add { display:grid; align-content:center; justify-items:start; gap:7px; border-style:dashed; background:transparent; color:#4f5742; }.admin-client-add > span { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:#e4e8d8; font-size:23px; }.admin-client-add b { margin-top:5px; font-size:17px; letter-spacing:-.025em; }.admin-client-add small { color:#73766e; font-size:12px; }

.admin-directory-head { display:flex; align-items:end; justify-content:space-between; gap:24px; padding:34px 0 20px; }.admin-directory-head h1 { margin:3px 0 5px; font-size:clamp(34px,5vw,52px); letter-spacing:-.06em; }.admin-directory-head > div > span { color:#73766e; font-size:12px; }.admin-search { display:flex; align-items:center; gap:8px; width:min(360px,100%); min-height:44px; padding:0 13px; border:1px solid #d4cec3; border-radius:14px; background:#f8f5ee; color:#73766e; }.admin-search span { font-size:19px; }.admin-search input { width:100%; border:0; outline:0; background:transparent; color:#20221e; font:inherit; font-size:13px; }
.client-detail-hero { display:flex; align-items:end; justify-content:space-between; gap:18px; padding:34px 0 20px; }.client-detail-hero h1 { margin:4px 0; font-size:clamp(34px,5vw,52px); letter-spacing:-.06em; }.client-detail-hero > div > span { color:#73766e; font-size:13px; }.client-access-button { min-height:38px; margin-left:7px; padding:0 13px; border:1px solid #d9b6b0; border-radius:19px; background:#fff7f5; color:#854139; font-size:10px; font-weight:900; }.client-access-button.restore { border-color:#aebc8d; background:#eef1e4; color:#4f5b38; }.client-detail-tabs { display:flex; gap:5px; border-top:1px solid rgba(0,0,0,.08); border-bottom:1px solid rgba(0,0,0,.08); }.client-detail-tabs button { min-height:42px; padding:0 13px; color:#73766e; font-size:11px; font-weight:850; }.client-detail-tabs button.active { box-shadow:inset 0 -2px #292c27; color:#20221e; }.client-detail-content { padding:18px 0 30px; }.client-summary-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.client-summary-grid article { min-height:150px; padding:16px; border:1px solid #d4cec3; border-radius:18px; background:#f8f5ee; }.client-summary-grid small,.client-summary-grid span { display:block; color:#73766e; }.client-summary-grid small { font-size:9px; font-weight:900; letter-spacing:.08em; }.client-summary-grid b { display:block; margin:18px 0 5px; font-size:27px; letter-spacing:-.05em; }.client-summary-grid span { font-size:12px; }.client-detail-list,.client-activity { overflow:hidden; border:1px solid #d4cec3; border-radius:18px; background:#f8f5ee; }.client-detail-list article,.client-activity article { display:flex; align-items:center; gap:10px; min-height:70px; padding:10px 14px; border-bottom:1px solid #ddd8ce; }.client-detail-list article:last-child,.client-activity article:last-child { border-bottom:0; }.client-detail-list article > span:nth-child(2) { min-width:0; }.client-detail-list b,.client-detail-list small,.client-activity b,.client-activity small { display:block; }.client-detail-list small,.client-activity small { margin-top:3px; color:#73766e; font-size:11px; }.client-detail-list button { margin-left:auto; min-height:30px; padding:0 9px; border:1px solid #d4cec3; border-radius:15px; background:#fff; color:#4e5740; font-size:9px; font-weight:900; }.client-activity article { align-items:flex-start; flex-direction:column; gap:2px; }.client-activity b { font-size:13px; }
.invite-ready { margin-bottom:10px; padding:11px 13px; border:1px solid #b9c591; border-radius:14px; background:#edf1e1; color:#4c5836; font-size:12px; }.invite-ready a { color:#34451e; font-weight:900; }
.admin-filters { display:flex; align-items:center; gap:7px; padding:11px 0; border-top:1px solid rgba(0,0,0,.08); border-bottom:1px solid rgba(0,0,0,.08); }.admin-filters button { min-height:30px; padding:0 10px; border-radius:15px; background:transparent; color:#73766e; font-size:10px; font-weight:850; }.admin-filters button.active { background:#292c27; color:#fff; }.admin-filters > span { margin-left:auto; color:#73766e; font-size:10px; }
.admin-directory { margin-top:10px; }.admin-directory-labels,.admin-directory-row { display:grid; grid-template-columns:minmax(250px,2.3fr) minmax(90px,.8fr) minmax(65px,.55fr) minmax(65px,.55fr) minmax(115px,.85fr) 72px; align-items:center; gap:12px; }.admin-directory-labels { min-height:34px; padding:0 14px; color:#73766e; font-size:9px; font-weight:900; letter-spacing:.08em; }.admin-directory-rows { overflow:hidden; border:1px solid #d4cec3; border-radius:18px; background:#f8f5ee; }.admin-directory-row { min-height:74px; padding:10px 14px; border-bottom:1px solid #ddd8ce; }.admin-directory-row:last-child { border-bottom:0; }.admin-directory-row.suspended { background:#fcf2f0; }.admin-directory-client { display:flex; align-items:center; gap:10px; min-width:0; }.admin-directory-client > span:last-child { min-width:0; }.admin-directory-client b,.admin-directory-client small { display:block; }.admin-directory-client b { overflow:hidden; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }.admin-directory-client small { overflow:hidden; margin-top:3px; color:#73766e; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }.admin-directory-plan { color:#555951; font-size:11px; }.admin-directory-row > span > b { font-size:14px; }.admin-directory-row > span > small { display:block; margin-top:2px; color:#73766e; font-size:9px; }.admin-directory-open { min-height:32px; border-radius:16px; background:#e7e3da; color:#4e5740; font-size:9px; font-weight:900; letter-spacing:.06em; }.admin-directory-open b { margin-left:3px; font-size:14px; }.admin-empty { padding:36px 16px; color:#73766e; font-size:13px; text-align:center; }.admin-pagination { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 2px 28px; color:#73766e; font-size:11px; }.admin-pagination div { display:flex; gap:6px; }.admin-pagination button { min-height:32px; padding:0 10px; border:1px solid #d4cec3; border-radius:16px; background:#f8f5ee; color:#4e5740; font-size:10px; font-weight:850; }.admin-pagination button:disabled { opacity:.42; }

.dock,
.user-rail {
  border-radius: 30px;
}

.dock button,
.rail button {
  text-align: left;
}

.icon {
  border-radius: 15px;
}

@media (max-width: 980px) {
  .client-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .client-hero-meta {
    justify-content: flex-start;
  }

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

  .product-card {
    min-height: 390px;
  }

  .product-photo {
    min-height: 210px;
  }

  .admin-shell .admin-summary,
  .admin-shell .admin-layout,
  .admin-shell .customer-head,
  .admin-shell .customer-meta {
    grid-template-columns: 1fr;
  }
  .admin-minimal-hero { align-items:flex-start; flex-direction:column; gap:16px; }.admin-quiet-stats { padding-bottom:0; }
  .admin-directory-head { align-items:flex-start; flex-direction:column; gap:14px; }.admin-search { width:100%; }
  .client-detail-hero { align-items:flex-start; flex-direction:column; }.client-summary-grid { grid-template-columns:1fr; }
}

@media (max-width:640px) {
  .admin-minimal-shell { width:calc(100vw - 16px); }
  .admin-minimal-topbar { padding:13px 0; }.admin-top-link { display:none; }.admin-add-client { min-height:36px; padding:0 11px; }
  .admin-minimal-hero { padding:24px 2px 18px; }.admin-minimal-hero h1 { font-size:34px; }.admin-minimal-hero > div > span { font-size:12px; }.admin-quiet-stats { width:100%; justify-content:space-between; gap:6px; }.admin-quiet-stats span { font-size:10px; }
  .admin-client-grid { grid-template-columns:1fr; gap:9px; }.admin-client-card,.admin-client-add { min-height:224px; padding:16px; border-radius:18px; }
  .client-detail-hero { padding:24px 2px 16px; }.client-detail-hero h1 { font-size:34px; }.client-detail-tabs { overflow:auto; }.client-detail-tabs button { flex:none; }.client-summary-grid article { min-height:116px; }.client-summary-grid b { margin:12px 0 4px; }
  .admin-directory-head { padding:24px 2px 16px; }.admin-directory-head h1 { font-size:34px; }.admin-filters { overflow:auto; padding:9px 0; }.admin-filters button { flex:none; }.admin-filters > span { display:none; }.admin-directory-labels { display:none; }.admin-directory-rows { border-radius:16px; }.admin-directory-row { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"client status" "meta open"; gap:8px 10px; min-height:104px; padding:13px; }.admin-directory-client { grid-area:client; }.admin-directory-row > .admin-directory-plan { grid-area:meta; align-self:center; }.admin-directory-row > span:nth-child(3) { grid-area:meta; margin-left:72px; }.admin-directory-row > span:nth-child(4) { display:none; }.admin-directory-row > .admin-client-status { grid-area:status; justify-self:end; }.admin-directory-open { grid-area:open; min-width:68px; }.admin-pagination { padding-bottom:20px; }
}