: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; }