:root {
  --bg: #f7f4fb;
  --surface: #ffffff;
  --surface-2: #f0ebf6;
  --text: #18131f;
  --muted: #6c6077;
  --line: #ded6e8;
  --primary: #7c2cff;
  --primary-dark: #5a19c9;
  --accent: #d7a629;
  --danger: #c9334b;
  --success: #19885a;
  --shadow: 0 16px 36px rgba(38, 17, 66, 0.12);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  display: grid;
  grid-template-columns: 276px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  background: #120e18;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 24px;
}

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

.brand-mark {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #7c2cff, #d7a629);
  color: #fff;
  font-weight: 900;
  letter-spacing: 0;
}

.brand strong,
.brand span {
  display: block;
}

.brand span {
  margin-top: 2px;
  color: #c7bccf;
  font-size: 0.86rem;
}

.nav {
  display: grid;
  gap: 8px;
}

.nav-item,
.ghost-button,
.primary-button,
.danger-button {
  border: 0;
  border-radius: 8px;
  min-height: 42px;
  padding: 0 14px;
  font-weight: 700;
}

.nav-item {
  text-align: left;
  background: transparent;
  color: #d8cfdf;
}

.nav-item:hover,
.nav-item.active {
  background: #251c31;
  color: #fff;
}

.sidebar-footer {
  margin-top: auto;
  display: grid;
  gap: 10px;
}

.ghost-button {
  display: inline-grid;
  place-items: center;
  background: #fff;
  color: #24192d;
  border: 1px solid var(--line);
}

.sidebar .ghost-button {
  background: #24192d;
  color: #fff;
  border-color: #3e314b;
}

.small {
  min-height: 34px;
  font-size: 0.86rem;
}

.file-button input {
  display: none;
}

.content {
  min-width: 0;
  padding: 28px;
}

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

.eyebrow {
  margin: 0 0 4px;
  color: var(--primary-dark);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: clamp(1.8rem, 2vw, 2.5rem);
  letter-spacing: 0;
}

h2 {
  margin-bottom: 16px;
  font-size: 1.05rem;
}

.period-control {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.86rem;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  min-height: 42px;
  padding: 9px 11px;
}

textarea {
  resize: vertical;
}

.view {
  display: none;
}

.active-view {
  display: block;
}

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

.metric,
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.metric {
  padding: 18px;
}

.metric span {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.metric strong {
  display: block;
  margin-top: 8px;
  font-size: 1.55rem;
}

.metric.warning strong {
  color: var(--danger);
}

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

.wide {
  grid-column: 1 / -1;
}

.panel {
  padding: 18px;
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.panel-heading h2 {
  margin: 0;
}

.split-layout {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.form-panel {
  display: grid;
  gap: 12px;
}

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

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

.primary-button {
  background: var(--primary);
  color: #fff;
}

.primary-button:hover {
  background: var(--primary-dark);
}

.danger-button {
  min-height: 34px;
  color: #fff;
  background: var(--danger);
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 12px 8px;
  text-align: left;
  vertical-align: middle;
}

th {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 800;
  background: var(--surface-2);
}

.status-ok {
  color: var(--success);
  background: #e9f8f1;
}

.status-risk {
  color: var(--danger);
  background: #ffecef;
}

.stack-list,
.agenda-list,
.people-grid,
.catalog-grid {
  display: grid;
  gap: 10px;
}

.list-item,
.person-card,
.catalog-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.list-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.item-title {
  margin: 0;
  font-weight: 800;
}

.item-meta {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.agenda-list {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.people-grid,
.catalog-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.bars {
  display: grid;
  gap: 10px;
}

.bar-row {
  display: grid;
  grid-template-columns: 160px 1fr 110px;
  gap: 10px;
  align-items: center;
}

.bar-track {
  height: 12px;
  border-radius: 8px;
  background: var(--surface-2);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  max-width: 320px;
  padding: 12px 14px;
  border-radius: 8px;
  color: #fff;
  background: #18131f;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.empty {
  color: var(--muted);
  margin: 0;
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 14px;
    gap: 14px;
  }

  .nav,
  .sidebar-footer {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .nav-item {
    text-align: center;
  }

  .content {
    padding: 18px;
  }

  .metric-grid,
  .dashboard-grid,
  .split-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .topbar,
  .list-item,
  .panel-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .nav,
  .sidebar-footer,
  .two-cols {
    grid-template-columns: 1fr;
  }

  .metric strong {
    font-size: 1.3rem;
  }

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

.contact-filters { display: flex; flex-wrap: wrap; gap: 14px; margin: 20px 0; }
.contact-filters label { min-width: 200px; }
.contact-card { display: grid; gap: 12px; }
.contact-card .message-preview { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; padding: 14px; border-radius: 8px; background: var(--surface-2); }
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.whatsapp-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; background: #137a48; }
.whatsapp-button:hover { background: #0d6037; }
.nav-item span:not(:empty) { float: right; background: #7c2cff; color: white; border-radius: 12px; padding: 1px 7px; }
[hidden] { display: none !important; }
@media (max-width: 620px) {
  .sidebar { position: static; }
  .nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .nav-item { padding: 6px; font-size: .8rem; }
  .contact-filters label { min-width: 0; width: 100%; }
}


:root { --bg:#f7f3ee; --surface:#fffdfa; --surface-2:#f2eae9; --text:#32252e; --muted:#8a7c82; --line:#e9dfd9; --primary:#4c183b; --primary-dark:#310724; --accent:#c09b56; --danger:#af4b59; --success:#52765b; --shadow:0 4px 22px rgba(58,28,43,.025); }
body { font-family:'Segoe UI',Arial,sans-serif; font-size:14px; background:var(--bg); }
button,input,textarea,select { font-family:inherit; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button,a { transition:background .18s,transform .18s,box-shadow .18s; }
button:focus-visible,a:focus-visible { outline:3px solid #ba9858; outline-offset:3px; }
.app-shell { grid-template-columns:254px minmax(0,1fr); }
.sidebar { position:sticky; top:0; height:100dvh; overflow-y:auto; padding:30px 19px 22px; gap:18px; background:radial-gradient(ellipse at 0 0,#54213f 0,transparent 60%),#2b0922; }
.brand { gap:11px; padding:0 2px 26px; border-bottom:1px solid #ffffff15; }
.brand-logo { width:64px; height:64px; object-fit:cover; border-radius:50%; border:1px solid #ac8a50; }
.brand strong { font:600 17px/1.3 'Segoe UI',Arial,sans-serif; color:#f7e8cd; }
.brand span { margin-top:7px; color:#c9ae92; font-size:8px; letter-spacing:1.5px; }
.nav-label { color:#b28c9e; font-size:9px; letter-spacing:2px; font-weight:700; padding-left:14px; margin:7px 0 0; }
.nav { gap:5px; }
.nav-item { display:flex; align-items:center; gap:13px; min-height:46px; padding:0 14px; border-radius:8px; font-weight:500; color:#c9b7c2; font-size:12px; border:1px solid transparent; }
.nav-icon { width:18px; height:18px; flex-shrink:0; opacity:.8; }
.nav-item:hover { background:#ffffff09; }
.nav-item.active { background:linear-gradient(100deg,#b4945838,#b4945812); border-color:#b4945845; color:#f1d9a5; }
.nav-item.active .nav-icon { opacity:1; }
.nav-item span:not(:empty) { margin-left:auto; float:none; background:#d4b273; color:#321125; font-size:10px; padding:2px 6px; }
.sidebar-footer { gap:9px; padding-top:30px; }
.sidebar .ghost-button { background:transparent; color:#cbb8c4; border-color:#ffffff14; font-size:10px; min-height:34px; font-weight:500; }
.sidebar .ghost-button:hover { background:#ffffff08; }
.cloud-button { display:flex; align-items:center; gap:10px; border:1px solid #d4b27335; background:#ffffff05; color:#dac6cf; border-radius:9px; padding:14px 10px; text-align:left; margin-bottom:9px; }
.cloud-button strong,.cloud-button small { display:block; font-size:10px; font-weight:500; }
.cloud-button small { font-size:9px; color:#b296a4; margin-top:4px; }
.cloud-button>span:last-child { margin-left:auto; color:#d4b273; }
.cloud-dot { width:6px; height:6px; border-radius:50%; background:#c4a267; flex-shrink:0; }
.content { padding:30px 38px 46px; max-width:1680px; width:100%; margin:auto; }
.topbar { margin-bottom:28px; }
.eyebrow { font-size:8px; letter-spacing:2px; color:#9a7e76; font-weight:700; margin-bottom:8px; }
.eyebrow span { margin:0 9px; color:#c3b2a8; }
h1 { font:600 clamp(25px,2.3vw,30px)/1.25 'Segoe UI',Arial,sans-serif; color:#3e1831; }
h2 { font-size:14px; font-weight:700; letter-spacing:-.3px; }
.period-control { gap:4px; font-size:8px; min-width:163px; }
.period-control label { font-size:8px; letter-spacing:1.5px; }
.period-control input { border-radius:7px; min-height:37px; font-size:11px; background:var(--surface); }
.studio-hero { position:relative; overflow:hidden; display:grid; grid-template-columns:1fr 260px; min-height:290px; gap:24px; align-items:center; border-radius:13px; padding:34px 38px; background:radial-gradient(ellipse at 90% 45%,#63234865 0,transparent 50%),linear-gradient(110deg,#310824,#420f32); color:#f1e7dd; }
.studio-hero::before { content:''; position:absolute; border:1px solid #d6b46b18; width:430px; height:430px; border-radius:50%; right:-82px; top:-90px; pointer-events:none; }
.studio-hero::after { content:''; position:absolute; border:1px solid #d6b46b12; width:490px; height:490px; border-radius:50%; right:-112px; top:-120px; pointer-events:none; }
.hero-copy,.hero-signature { position:relative; z-index:1; }
.hero-kicker { display:flex; gap:8px; align-items:center; color:#d7b57b; font-size:8px; letter-spacing:2.3px; margin:0 0 17px; }
.hero-kicker>span { width:5px; height:5px; background:#d7b57b; transform:rotate(45deg); }
.studio-hero h2 { font:600 clamp(25px,2.4vw,34px)/1.25 'Segoe UI',Arial,sans-serif; letter-spacing:-.7px; margin:0 0 14px; }
.studio-hero h2 em { font-style:normal; font-weight:600; color:#e0be7d; }
.hero-copy>p:not(.hero-kicker) { font-size:10px; color:#cdb5c4; line-height:1.8; margin-bottom:23px; }
.hero-actions { display:flex; align-items:center; gap:21px; }
.gold-button { border:1px solid #d9be86; background:linear-gradient(110deg,#dec38a,#c29e5d); color:#35152a; padding:12px 16px; font-size:10px; font-weight:800; border-radius:6px; }
.gold-button:hover { transform:translateY(-2px); box-shadow:0 8px 20px #0002; }
.hero-link { border:0; background:transparent; color:#e5d4dd; font-size:10px; padding:8px 0; }
.hero-link span { margin-left:6px; color:#d4b273; }
.hero-signature { display:flex; justify-content:center; }
.hero-signature img { width:230px; height:230px; border-radius:50%; box-shadow:0 10px 45px #16001170; }
.section-label { display:flex; align-items:end; justify-content:space-between; gap:12px; margin:28px 0 15px; }
.section-label h2 { font:600 20px/1.3 'Segoe UI',Arial,sans-serif; color:#4e293b; margin:0; }
.section-label .eyebrow { font-size:7px; letter-spacing:1.8px; margin-bottom:7px; }
.today-label { font-size:9px; color:#9b8b88; text-transform:capitalize; }
.metric-grid { gap:13px; margin:0; }
.metric { padding:19px 19px 20px; border-radius:10px; position:relative; }
.metric>span { display:flex; justify-content:space-between; align-items:center; color:#8a767e; font-size:9px; font-weight:500; }
.metric .metric-symbol { display:grid; place-items:center; background:#f4eceb; color:#8c596e; height:25px; width:25px; border-radius:7px; font-size:16px; }
.metric strong { color:#4a233a; font-weight:600; font-size:25px; letter-spacing:-1px; margin-top:7px; }
.metric.warning strong { color:#a86d45; }
.journey-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.journey-card { display:grid; gap:10px; padding:20px; border:1px solid #e6d9d5; border-radius:10px; text-align:left; background:#fffdfa; color:var(--text); }
.journey-card:hover { transform:translateY(-3px); border-color:#c5a06a; box-shadow:0 7px 20px #3a17260a; }
.journey-card:nth-child(2) { background:#f0e6eb; border-color:#e7d8e1; }
.journey-card:nth-child(3) { background:#efe8da; border-color:#e6ddcb; }
.journey-number { font-size:7px; letter-spacing:1.9px; color:#ac8672; }
.journey-card strong { font:600 17px/1.4 'Segoe UI',Arial,sans-serif; }
.journey-card>span:not(.journey-number) { font-size:9px; color:#9b838b; }
.journey-card>div { display:flex; align-items:center; justify-content:space-between; margin-top:9px; padding-top:13px; border-top:1px solid #8c5f6b15; font-size:8px; gap:8px; }
.journey-card b { font-size:8px; font-weight:500; color:#88616e; }
.journey-card>div>span { font-weight:700; color:#592d44; }
.dashboard-grid { gap:15px; }
.panel { border-radius:10px; padding:22px; }
.panel-heading { margin-bottom:16px; }
.panel-heading h2 { color:#563447; font:600 17px/1.35 'Segoe UI',Arial,sans-serif; }
.list-item,.person-card,.catalog-card { border-color:#eee6e1; border-radius:8px; background:#fffdfa; padding:14px; }
.item-title { font-size:11px; font-weight:700; color:#543449; }
.item-meta { font-size:10px; line-height:1.65; color:#9b858f; }
.status-pill { font-size:8px; min-height:24px; padding:4px 9px; font-weight:600; border-radius:5px; }
.status-ok { color:#52765b; background:#ecf2e9; }
.status-risk { color:#af6065; background:#f8e9e8; }
.form-panel { gap:15px; }
.form-panel h2 { color:#4e293b; font:600 20px/1.3 'Segoe UI',Arial,sans-serif; margin-bottom:5px; }
label { font-size:10px; font-weight:600; color:#8b707e; }
input,select,textarea { font-size:12px; border-radius:6px; background:#fffefc; min-height:42px; border-color:#e7dcd7; padding:10px 12px; }
input:focus,select:focus,textarea:focus { outline:2px solid #ba96553d; border-color:#b29369; }
.primary-button { background:#4c183b; border-radius:6px; font-size:11px; }
.ghost-button { border-radius:6px; background:transparent; font-size:10px; border-color:#e5d8d5; color:#6e4c60; }
.danger-button { color:#a5626c; background:#f8ebeb; font-size:9px; border-radius:5px; min-height:29px; margin-top:8px; }
.small { min-height:30px; font-size:9px; }
.whatsapp-button { background:#52765b; }
.whatsapp-button:hover { background:#3f6248; }
.contact-card { justify-content:stretch; padding:20px; }
.contact-card .message-preview { font-size:12px; line-height:1.8; background:#f6eeef; border-left:2px solid #bc9861; padding:18px; width:100%; }
.contact-filters { margin:24px 0; }
th { color:#a38b95; font-size:8px; }
td { font-size:11px; }
.bar-track { height:7px; background:#f2e8e7; }
.bar-fill { background:linear-gradient(90deg,#6e3556,#c4a36a); }
.bar-row { font-size:10px; color:#8a6e7e; grid-template-columns:140px 1fr 100px; }
.toast { background:#3f1832; font-size:11px; border:1px solid #d4b27350; box-shadow:0 8px 30px #32102422; z-index:10; }
.empty { font-size:11px; padding:14px 0; }
.cloud-dialog { width:min(460px,calc(100% - 32px)); padding:28px; border:1px solid #d9c5b7; border-radius:14px; background:var(--bg); color:var(--text); box-shadow:0 20px 100px #21041945; }
.cloud-dialog::backdrop { background:#21041999; backdrop-filter:blur(4px); }
.dialog-heading { display:flex; justify-content:space-between; gap:15px; }
.dialog-heading h2 { font:600 24px/1.3 'Segoe UI',Arial,sans-serif; }
.dialog-close { border:0; background:transparent; font-size:26px; color:#7f5b6c; align-self:start; }
.cloud-feedback { font-size:12px; line-height:1.7; color:#8b697b; }
.cloud-options { display:grid; gap:10px; margin:20px 0; }
.dialog-note { margin:20px 0 0; font-size:10px; color:#a58e96; line-height:1.6; }
@media(min-width:1500px) { .studio-hero { grid-template-columns:1fr 360px; } .hero-signature img { width:250px; height:250px; } }
@media(max-width:1150px) { .content { padding:25px; } .app-shell { grid-template-columns:220px minmax(0,1fr); } .brand strong { font-size:17px; } .brand-logo { width:48px; height:48px; } .brand span { font-size:6px; } .studio-hero { grid-template-columns:1fr 170px; padding:28px; } .hero-signature img { width:175px; height:175px; } .hero-actions { gap:12px; } .journey-card { padding:16px; } .journey-card strong { font-size:16px; } }
@media(max-width:980px) { .app-shell { grid-template-columns:1fr; } .sidebar { height:auto; position:static; padding:17px 22px; display:grid; grid-template-columns:1fr auto; gap:12px; } .brand { border:0; padding:0; } .brand-logo { width:48px; height:48px; } .brand strong { font-size:17px; } .brand span { font-size:7px; } .nav-label { display:none; } .nav { grid-column:1/-1; grid-row:2; display:flex; overflow-x:auto; gap:5px; scrollbar-width:thin; padding-bottom:3px; } .nav-item { flex-shrink:0; min-height:38px; font-size:10px; gap:7px; padding:0 10px; } .nav-icon { width:15px; height:15px; } .sidebar-footer { padding:0; margin:0; display:flex; align-items:center; } .sidebar-footer>.ghost-button { display:none; } .cloud-button { margin:0; padding:10px; } .cloud-button>span:last-child { display:none; } .content { padding:24px; } .metric-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } .dashboard-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .split-layout { grid-template-columns:1fr; } }
@media(max-width:620px) { .sidebar { padding:14px 16px; } .brand-logo { width:43px; height:43px; } .brand strong { font-size:17px; } .brand span { font-size:6px; letter-spacing:1px; } .brand { gap:9px; } .cloud-button { border:0; padding:8px 0 8px 8px; } .cloud-button strong { font-size:9px; } .cloud-button small { font-size:7px; max-width:95px; } .cloud-dot { width:5px; height:5px; } .content { padding:22px 17px; } .topbar { flex-direction:row; align-items:center; gap:8px; margin-bottom:20px; } h1 { font-size:25px; } .eyebrow { font-size:6px; letter-spacing:1.4px; } .eyebrow span { margin:0 3px; } .period-control { min-width:113px; max-width:120px; } .period-control label { font-size:6px; } .period-control input { font-size:9px; min-height:33px; padding:6px; } .studio-hero { grid-template-columns:1fr; min-height:0; padding:28px 23px; gap:0; } .studio-hero h2 { font-size:27px; } .hero-copy>p:not(.hero-kicker) { font-size:10px; } .hero-signature { position:absolute; right:-24px; bottom:-22px; opacity:.14; pointer-events:none; } .hero-signature img { width:195px; height:195px; } .hero-copy { z-index:2; } .hero-kicker { font-size:7px; } .hero-actions { gap:15px; } .gold-button { font-size:9px; padding:12px; } .hero-link { font-size:9px; } .section-label { margin:26px 0 13px; } .section-label h2 { font-size:19px; } .section-label .eyebrow { font-size:6px; letter-spacing:1.2px; } .section-label .today-label { font-size:8px; max-width:100px; text-align:right; } .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .metric { padding:16px; } .metric strong { font-size:24px; } .metric>span { font-size:9px; } .metric .metric-symbol { height:22px; width:22px; } .journey-grid { grid-template-columns:1fr; gap:10px; } .journey-card { padding:19px; } .journey-card strong { font-size:18px; } .journey-card>span:not(.journey-number) { font-size:10px; } .journey-card>div { font-size:9px; } .journey-card b { font-size:9px; } .dashboard-grid { grid-template-columns:1fr; } .panel { padding:18px; } .bar-row { grid-template-columns:1fr; } .contact-card { padding:15px; } .two-cols { grid-template-columns:repeat(2,minmax(0,1fr)); } .nav { display:flex; } .contact-card .message-preview { padding:14px; font-size:11px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }
.split-layout > *, .dashboard-grid > *, .metric-grid > * { min-width: 0; }
.item-meta { color: #806572; font-size: 11px; } .item-title { font-size: 12px; } .journey-card > span:not(.journey-number) { color: #806572; font-size: 10px; } .metric > span { color: #806572; font-size: 10px; } .hero-copy > p:not(.hero-kicker) { font-size: 11px; } .nav-item { font-size: 13px; } @media(max-width:980px) { .nav-item { font-size: 11px; } }

/* Consistent native typography for the studio's working interface. */
h1, h2, .brand strong, .journey-card strong { letter-spacing: -.25px; }
.studio-hero h2 { letter-spacing: -.5px; }
.eyebrow, .nav-label, .hero-kicker, .journey-number { letter-spacing: 1px; }
.section-label .eyebrow { letter-spacing: 1px; font-size: 9px; }
.eyebrow { font-size: 9px; }
.hero-kicker, .journey-number { font-size: 9px; }
.brand span { letter-spacing: .8px; line-height: 1.5; }
.metric strong { font-variant-numeric: tabular-nums; letter-spacing: -.5px; font-weight: 600; }
.hero-copy > p:not(.hero-kicker), .item-meta { font-size: 12px; line-height: 1.65; }
.journey-card > span:not(.journey-number) { font-size: 12px; line-height: 1.5; }
.journey-card > div, .journey-card b { font-size: 10px; }
.item-title { font-size: 13px; }
label { font-size: 12px; }
input, select, textarea { font-size: 13px; }
@media(max-width:620px) {
  .brand strong { font-size: 16px; }
  .brand span { font-size: 6px; }
  .eyebrow, .section-label .eyebrow { font-size: 8px; letter-spacing: .7px; }
  .hero-copy > p:not(.hero-kicker) { font-size: 12px; }
  .hero-kicker { font-size: 8px; }
}

.app-locked .app-shell { display: none; }
.auth-screen { min-height: 100dvh; padding: 32px 20px; display: grid; place-items: center; background: radial-gradient(ellipse at top, #602443, #2b0922 75%); }
.auth-card { width: min(100%, 420px); background: var(--bg); border: 1px solid #c09b5666; border-radius: 15px; padding: 34px; text-align: center; box-shadow: 0 24px 100px #16001155; }
.auth-logo { width: 96px; height: 96px; border-radius: 50%; margin-bottom: 23px; }
.auth-card h1 { font-size: 24px; margin: 12px 0; }
.auth-description { font-size: 13px; line-height: 1.6; color: #806572; }
.auth-card form { text-align: left; margin-top: 23px; }
.auth-card .cloud-feedback { font-size: 12px; min-height: 20px; }
.auth-card > button { width: 100%; min-height: 42px; margin-top: 12px; }
.auth-footnote { color: #9a7e76; font-size: 10px; margin: 25px 0 0; }
button:disabled { cursor: wait; opacity: .65; }
@media(max-width:620px) { .auth-card { padding: 28px 23px; } }

.connection-banner { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:14px 17px; margin-bottom:20px; border:1px solid #d6bc87; background:#fff6df; border-radius:8px; font-size:12px; color:#7d5b29; } .booking-link-label { margin:22px 0 12px; } .booking-settings { margin-top:20px; max-width:650px; } .weekdays { display:flex; flex-wrap:wrap; gap:13px; border:1px solid var(--line); border-radius:6px; padding:15px; } .weekdays legend { font-size:12px; color:#795d6e; } .weekdays label { display:flex; flex-direction:row; align-items:center; gap:6px; } .weekdays input { width:15px; min-height:15px; padding:0; }

.agenda-share-panel { margin-bottom: 20px; } .agenda-share-panel .contact-actions { margin-bottom: 12px; } .agenda-share-panel input { font-size: 13px; }