:root {
    color-scheme: light;
    --ink: #172b3a;
    --muted: #61727d;
    --line: #e1e8eb;
    --paper: #f4f7f7;
    --card: #ffffff;
    --brand: #087e79;
    --brand-dark: #05635f;
    --brand-soft: #e4f5f3;
    --warning: #a24a16;
    --danger: #a3323c;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #b9c7cb transparent; }
* { scrollbar-width: thin; scrollbar-color: #b9c7cb transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background-color: #b9c7cb; border: 2px solid transparent; background-clip: content-box; border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background-color: #879ba2; }
*::-webkit-scrollbar-corner { background: transparent; }
body { margin: 0; color: var(--ink); background: var(--paper); min-height: 100vh; line-height: 1.5; }
a { color: var(--brand-dark); }
.topbar { position: relative; z-index: 5; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: .7rem 2rem; padding: 1rem clamp(1rem, 4vw, 3.5rem) .8rem; background: var(--card); border-bottom: 1px solid var(--line); }
.brand { font-size: 1rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.topbar > .brand { grid-column: 1; grid-row: 1; }
.nav-menu { grid-column: 1 / -1; grid-row: 2; min-width: 0; padding-top: .65rem; border-top: 1px solid var(--line); }
.nav-menu > summary { display: none; }
.topbar nav { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .55rem 1rem; }
.topbar nav a, .link-button { color: var(--muted); text-decoration: none; font-size: .88rem; font-weight: 650; }
.topbar nav a { white-space: nowrap; }
.topbar nav a:hover, .link-button:hover { color: var(--brand-dark); }
.user-menu { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .75rem; color: var(--muted); font-size: .86rem; }
.user-menu form { margin: 0; }
.user-name { max-width: 25vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-button { padding: 0; border: 0; background: none; cursor: pointer; }
.page { width: min(1160px, calc(100% - 2rem)); margin: clamp(1.7rem, 4vw, 3.25rem) auto 4rem; }
.page-heading { margin-bottom: 1.5rem; }
.page-heading h1 { margin: .2rem 0 0; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.12; letter-spacing: -.04em; overflow-wrap: anywhere; }
.page-heading-compact h1 { margin-top: 0; }
.eyebrow { margin: 0; color: var(--brand-dark); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.welcome { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; margin-bottom: 1.3rem; }
.welcome h2 { margin: .85rem 0 .35rem; font-size: 1.35rem; letter-spacing: -.025em; }
.welcome p, .section-heading p, .card > p, .muted { color: var(--muted); line-height: 1.55; }
.quick-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem; margin: 1.25rem 0; }
.quick-links a { display: grid; gap: .3rem; padding: 1rem; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 13px; text-decoration: none; box-shadow: 0 8px 28px rgba(26, 51, 66, .025); }
.quick-links a:hover { border-color: #9bb5b5; }
.quick-links span { color: var(--muted); font-size: .75rem; }
.quick-links strong { font-size: .9rem; }
.support-card { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.support-card h2 { margin: .35rem 0; font-size: 1.05rem; }
.support-card p { margin: .3rem 0; }
.support-card .muted { max-width: 360px; font-size: .83rem; }
.pill { display: inline-flex; padding: .35rem .65rem; border-radius: 99px; background: var(--brand-soft); color: var(--brand-dark); font-size: .75rem; font-weight: 750; }
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0; }
.stat-card, .card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 8px 28px rgba(26, 51, 66, .035); }
.stat-card { padding: 1.15rem 1.25rem; }
.stat-card span { display: block; color: var(--muted); font-size: .82rem; }
.stat-card strong { display: block; margin-top: .45rem; font-size: 1.85rem; letter-spacing: -.04em; }
.card { padding: clamp(1rem, 2.6vw, 1.6rem); margin-bottom: 1rem; }
.card.narrow { width: min(100%, 540px); margin-inline: auto; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.section-heading h2 { margin: 0 0 .25rem; font-size: 1.1rem; }
.section-heading p { margin: 0; font-size: .88rem; }
.table-wrap { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; margin: 0 -.3rem; }
.page-nav { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-top: 1rem; }
.page-nav > span { color: var(--muted); font-size: .86rem; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: .86rem; }
th { padding: .8rem .7rem; color: var(--muted); font-size: .72rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: .9rem .7rem; border-bottom: 1px solid #edf1f2; vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td strong { display: block; font-weight: 750; }
.cell-subtitle { display: block; max-width: 340px; margin-top: .28rem; color: var(--muted); font-size: .75rem; overflow-wrap: anywhere; }
.audit-details { display: block; max-width: 360px; color: var(--muted); font-size: .8rem; line-height: 1.45; overflow-wrap: anywhere; }
.auth-switch-account { margin-top: .85rem; }
.url-cell { display: block; max-width: 300px; overflow-wrap: anywhere; font-size: .78rem; }
.status { display: inline-flex; padding: .34rem .56rem; border-radius: 99px; font-size: .73rem; font-weight: 750; white-space: nowrap; }
.status-active { color: #11634a; background: #e4f5ed; }
.status-stock { color: #345b86; background: #e9f1fa; }
.status-setup { color: #86511d; background: #fff1d7; }
.status-suspended { color: #925218; background: #fff2df; }
.status-archived { color: #58646b; background: #edf0f1; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: .68rem 1rem; border: 1px solid transparent; border-radius: 10px; font: inherit; font-size: .86rem; font-weight: 750; text-decoration: none; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.button:hover { transform: translateY(-1px); }
.button.primary { color: white; background: var(--brand); }
.button.primary:hover { background: var(--brand-dark); }
.button.secondary { color: var(--ink); background: white; border-color: var(--line); }
.button.secondary:hover, .button.small:hover { border-color: #9bb5b5; }
.button.small { min-height: 34px; padding: .45rem .68rem; color: var(--brand-dark); background: white; border-color: var(--line); font-size: .78rem; }
.form-stack { display: grid; gap: .75rem; margin-top: 1.25rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: .75rem; }
.form-grid > div { display: grid; gap: .45rem; }
.inline-form { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; margin: .35rem 0; }
.inline-form select { min-width: 190px; }
select { min-height: 40px; padding: .55rem .7rem; color: var(--ink); background: #fff; border: 1px solid #c8d3d8; border-radius: 9px; font: inherit; font-size: .82rem; }
select:focus { outline: 3px solid rgba(8, 126, 121, .18); border-color: var(--brand); }
.danger-button { color: var(--danger); border-color: #ecd0d2; }
.checkbox-label { display: flex; align-items: center; gap: .6rem; }
.checkbox-label input { width: auto; min-height: 0; margin: 0; }
.activity-entry { padding: .8rem 0; border-bottom: 1px solid var(--line); }
.activity-entry:last-child { border-bottom: 0; }
.activity-entry p { margin: .25rem 0; line-height: 1.5; }
.text-stat { font-size: 1.05rem !important; letter-spacing: 0 !important; }
textarea { width: 100%; min-height: 110px; padding: .7rem .8rem; color: var(--ink); background: white; border: 1px solid #c8d3d8; border-radius: 9px; font: inherit; resize: vertical; }
textarea:focus { outline: 3px solid rgba(8, 126, 121, .18); border-color: var(--brand); }
hr { height: 1px; margin: 1.5rem 0; background: var(--line); border: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
label { font-size: .84rem; font-weight: 750; }
input { width: 100%; min-height: 46px; padding: .7rem .8rem; color: var(--ink); background: white; border: 1px solid #c8d3d8; border-radius: 9px; font: inherit; font-size: .94rem; }
input:focus { outline: 3px solid rgba(8, 126, 121, .18); border-color: var(--brand); }
small { color: var(--muted); font-size: .78rem; }
.notice { padding: .9rem 1rem; margin: 0 0 1rem; color: #145b49; background: #e6f5ef; border: 1px solid #c6e9dc; border-radius: 12px; }
.empty-state { padding: 2rem 1rem; text-align: center; border: 1px dashed #cbd7db; border-radius: 13px; }
.empty-state h3 { margin: 0 0 .35rem; font-size: 1rem; }
.empty-state p { margin: 0; color: var(--muted); font-size: .87rem; }
.destination-preview { display: grid; gap: .4rem; padding: 1rem; margin: 1.1rem 0; background: var(--brand-soft); border-radius: 11px; }
.destination-preview span { color: var(--muted); font-size: .75rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.destination-preview a { overflow-wrap: anywhere; }
.link-mode { min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: 11px; }
.link-mode legend { padding: 0 .35rem; font-weight: 750; }
.link-editor-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: .7rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.link-editor-row > div { display: grid; align-content: start; gap: .4rem; min-width: 0; }
.link-editor-row input { min-width: 0; }
.link-preview-list { display: grid; gap: .5rem; padding-left: 1.2rem; }
.link-preview-list li strong, .link-preview-list li small { display: block; }
.qr-download-layout { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); align-items: center; gap: clamp(1rem, 4vw, 2.5rem); margin-top: 1rem; }
.qr-download-preview { display: grid; place-items: center; width: min(100%, 300px); aspect-ratio: 1; padding: .75rem; margin-inline: auto; background: white; border: 1px solid var(--line); border-radius: 14px; }
.qr-download-preview svg { display: block; width: 100%; height: 100%; }
.qr-download-info { display: grid; gap: .65rem; min-width: 0; }
.qr-download-info code { padding: .7rem; background: #f4f7f7; border-radius: 8px; overflow-wrap: anywhere; }
.qr-download-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.qr-download-info .muted { min-height: 1.3em; margin: 0; }
.chart-periods { display: flex; flex-wrap: wrap; gap: .35rem; }
.chart-periods [aria-pressed="true"] { color: white; background: var(--brand); border-color: var(--brand); }
.chart-total { display: flex; align-items: baseline; gap: .45rem; margin: .7rem 0 .5rem; color: var(--muted); }
.chart-total strong { color: var(--ink); font-size: 1.8rem; letter-spacing: -.04em; }
.chart-scroll { width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; }
.access-chart-bars { display: grid; grid-template-columns: repeat(var(--chart-days, 90), minmax(0, 1fr)); align-items: stretch; gap: 1px; width: 100%; min-width: 0; height: 205px; padding: .55rem .2rem 0; border-bottom: 1px solid var(--line); }
.access-chart-column { display: grid; grid-template-rows: 1rem minmax(0, 1fr) 1.15rem; align-self: stretch; height: 100%; min-width: 0; text-align: center; outline-offset: 2px; }
.access-chart-value { color: var(--muted); font-size: .58rem; line-height: 1; white-space: nowrap; opacity: 0; }
.access-chart-column:hover .access-chart-value, .access-chart-column:focus .access-chart-value { opacity: 1; }
.access-chart-track { display: flex; align-items: end; justify-content: center; width: 100%; height: 100%; min-height: 0; }
.access-chart-bar { display: block; width: min(72%, 18px); min-height: 2px; background: var(--brand); border-radius: 4px 4px 0 0; transition: height .2s ease; }
.access-chart-bar[data-zero="true"] { background: #c8d5d8; }
.access-chart-date { color: var(--muted); font-size: clamp(.58rem, .72vw, .7rem); line-height: 1; white-space: nowrap; }
.chart-empty { padding: 2rem 1rem; margin: 0; text-align: center; background: #f7f9f9; border-radius: 10px; }
progress.link-click-meter { display: block; width: min(100%, 150px); height: 8px; margin-top: .35rem; overflow: hidden; border: 0; background: #e8eeee; border-radius: 99px; }
progress.link-click-meter::-webkit-progress-bar { background: #e8eeee; border-radius: 99px; }
progress.link-click-meter::-webkit-progress-value { background: var(--brand); border-radius: 99px; }
progress.link-click-meter::-moz-progress-bar { background: var(--brand); border-radius: 99px; }
.batch-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.batch-label-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.batch-label { display: flex; align-items: center; gap: .8rem; min-width: 0; padding: .8rem; background: white; border: 1px solid var(--line); border-radius: 10px; }
.batch-qr { display: grid; place-items: center; flex: 0 0 150px; width: 150px; height: 150px; }
.batch-qr svg { width: 100%; height: 100%; }
.batch-label-copy { display: grid; gap: .2rem; min-width: 0; }
.batch-label-copy strong { overflow-wrap: anywhere; }
.batch-label-copy span, .batch-label-copy small { color: var(--muted); }
.batch-label-copy code { font-size: .68rem; overflow-wrap: anywhere; }
.public-links { display: grid; gap: .7rem; width: min(100%, 520px); margin: 1rem auto; }
.public-link-button { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: .85rem 1rem; color: white; background: var(--brand); border-radius: 11px; font-weight: 750; text-align: center; text-decoration: none; overflow-wrap: anywhere; }
.public-link-button:hover { background: var(--brand-dark); }
.footer { padding: 1.3rem; color: #829098; text-align: center; font-size: .76rem; }
.public-message { display: grid; place-content: center; width: min(560px, calc(100% - 2rem)); min-height: 100vh; margin: auto; text-align: center; }
.public-mark { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 1rem; color: white; background: var(--brand); border-radius: 16px; font-size: .82rem; font-weight: 850; letter-spacing: .07em; }
.public-message h1 { margin: .2rem 0 .6rem; font-size: clamp(1.5rem, 5vw, 2rem); letter-spacing: -.04em; }
.public-message p { color: var(--muted); line-height: 1.6; }
.secret-key { display: inline-block; padding: .65rem .8rem; margin-top: .35rem; color: var(--ink); background: #f3f7f7; border: 1px solid var(--line); border-radius: 9px; font-size: .95rem; letter-spacing: .08em; overflow-wrap: anywhere; user-select: all; }
.recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 1.2rem; padding: 1rem 1rem 1rem 2.6rem; background: #f7f9f9; border: 1px solid var(--line); border-radius: 12px; }
.recovery-codes code { font-size: .95rem; letter-spacing: .05em; }
.status-setup { color: #7c5218; background: #fff0d3; }
.status-warning { color: #8f5618; background: #fff1db; }
.pages-intro, .editor-intro, .page-detail-hero { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: clamp(1.1rem, 3vw, 2rem); margin-bottom: 1rem; background: linear-gradient(135deg, #e8f4f2, #f6f8f8 68%, #fff); border: 1px solid #dce9e7; border-radius: 18px; }
.pages-intro h2, .editor-intro h2, .page-detail-hero h2, .page-hero h1 { max-width: 720px; margin: .15rem 0 .5rem; font-size: clamp(1.45rem, 3vw, 2.15rem); line-height: 1.15; letter-spacing: -.045em; }
.pages-intro p:not(.page-list-kicker), .editor-intro p:not(.page-list-kicker) { max-width: 700px; margin: 0; color: var(--muted); }
.pages-intro-actions, .button-row, .editor-submit { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.page-hero { display: block; }
.page-hero > div { min-width: 0; }
.page-hero h1 { overflow-wrap: anywhere; }
.page-list-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 390px), 1fr)); gap: .8rem; }
.page-list-card { min-width: 0; padding: 1.1rem; background: white; border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 8px 24px rgba(26,51,66,.035); }
.page-list-main, .page-list-footer { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.page-list-main h3 { margin: .1rem 0; font-size: 1.02rem; overflow-wrap: anywhere; }
.page-list-main p:not(.page-list-kicker) { margin: .25rem 0 0; color: var(--muted); font-size: .78rem; }
.page-list-kicker { margin: 0 0 .3rem; color: var(--brand-dark); font-size: .68rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.page-list-footer { align-items: center; padding-top: .8rem; margin-top: .75rem; border-top: 1px solid #edf1f2; }
.page-url { display: block; min-width: 0; color: var(--muted); font-size: .75rem; overflow-wrap: anywhere; }
.legacy-link-note { color: var(--muted); font-size: .8rem; }
.back-link { display: inline-block; margin-bottom: 1rem; color: var(--brand-dark); font-size: .82rem; font-weight: 750; text-decoration: none; }
.experience-editor { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(290px, .75fr); align-items: start; gap: 1rem; }
.editor-controls { display: grid; gap: .8rem; min-width: 0; }
.editor-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .42rem; min-width: 0; padding: .42rem; background: #eaf2f1; border: 1px solid #dbe8e5; border-radius: 14px; scroll-margin-top: .75rem; }
.editor-tab { display: flex; align-items: center; justify-content: center; gap: .4rem; min-width: 0; min-height: 46px; padding: .45rem .35rem; color: #466168; background: transparent; border: 1px solid transparent; border-radius: 10px; font: inherit; font-size: .76rem; font-weight: 750; line-height: 1.2; text-align: center; cursor: pointer; }
.editor-tab span { display: grid; flex: 0 0 21px; width: 21px; height: 21px; place-items: center; color: #44716f; background: #d9e9e5; border-radius: 50%; font-size: .66rem; }
.editor-tab:hover, .editor-tab[aria-selected="true"] { color: #123a3a; background: #fff; border-color: #d6e5e2; box-shadow: 0 3px 9px rgba(20,56,59,.07); }
.editor-tab[aria-selected="true"] span { color: #fff; background: var(--brand); }
.editor-tab:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 38%, white); outline-offset: 2px; }
.editor-panel { display: grid; gap: .8rem; min-width: 0; }
.editor-panel[hidden] { display: none; }
.editor-panel-next { display: flex; justify-content: flex-end; }
.editor-panel-next .button { width: fit-content; }
.editor-catalog-guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.editor-catalog-choice { display: grid; align-content: start; gap: .32rem; min-width: 0; min-height: 96px; padding: .72rem; background: #f8fbfb; border: 1px solid var(--line); border-radius: 11px; cursor: pointer; }
.editor-catalog-choice:has(input:checked) { background: #eff9f6; border-color: var(--brand); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 25%, transparent); }
.editor-catalog-choice input { width: 17px; height: 17px; min-height: 0; margin: 0; accent-color: var(--brand); }
.editor-catalog-choice strong { font-size: .82rem; }
.editor-catalog-choice small { color: var(--muted); font-size: .72rem; line-height: 1.35; }
.editor-type-group { min-width: 0; padding: .72rem; background: #f8fbfb; border: 1px solid var(--line); border-radius: 11px; }
.editor-type-group > summary { color: var(--ink); font-size: .85rem; font-weight: 800; cursor: pointer; }
.editor-type-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: .75rem; }
.editor-type-card, .editor-block-card { position: relative; display: grid; align-content: start; gap: .55rem; min-width: 0; margin: 0; padding: .75rem; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.editor-type-card legend, .editor-block-card legend { padding: 0 .25rem; color: var(--ink); font-size: .8rem; font-weight: 800; }
.editor-type-card p { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.4; }
.editor-type-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 110px), 1fr)); gap: .45rem; }
.editor-type-controls label { display: grid; gap: .3rem; min-width: 0; color: var(--ink); font-size: .72rem; font-weight: 650; }
.editor-type-controls :is(select, input) { width: 100%; min-width: 0; }
.editor-block-builder { display: grid; gap: .7rem; }
.editor-block-card { padding-top: .85rem; }
.editor-block-card > label:not(.checkbox-label) { display: grid; gap: .35rem; }
.editor-block-card .form-grid > div { min-width: 0; }
.editor-block-card .form-grid label { display: grid; gap: .35rem; }
.editor-block-card textarea { min-height: 90px; }
.editor-optional-content > [data-block-count], .editor-optional-content > [data-button-count] { color: var(--muted); font-size: .72rem; }
.editor-optional-content > button:disabled { opacity: .55; cursor: not-allowed; }
.catalog-pagination { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin: .65rem 0; }
.catalog-pagination span { margin-right: .3rem; color: var(--muted); font-size: .75rem; }
.catalog-pagination [aria-current="page"] { color: #fff; background: var(--brand); border-color: var(--brand); }
.editor-section, .editor-preview-pane { padding: clamp(.95rem, 2.2vw, 1.35rem); background: white; border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 8px 24px rgba(26,51,66,.035); }
.editor-section { display: grid; gap: .7rem; }
.editor-media-section { border-color: color-mix(in srgb, var(--brand) 18%, var(--line)); }
.media-upload-grid > div { align-content: start; padding: .8rem; background: #f8fbfb; border: 1px solid var(--line); border-radius: 12px; }
.media-upload-grid input[type="file"] { width: 100%; min-width: 0; font-size: .78rem; }
.media-upload-grid small { color: var(--muted); line-height: 1.45; }
.media-upload-note { margin: 0; font-size: .76rem; }
.editor-section-heading { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .15rem; }
.editor-section-heading > span { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; color: var(--brand-dark); background: var(--brand-soft); border-radius: 9px; font-size: .72rem; font-weight: 850; }
.editor-section-heading h3, .editor-preview-heading h3 { margin: .05rem 0 .2rem; font-size: .99rem; }
.editor-section-heading p { margin: 0; color: var(--muted); font-size: .78rem; }
.template-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.template-card { display: flex; align-items: center; gap: .65rem; min-width: 0; padding: .55rem; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 11px; text-align: left; cursor: pointer; }
.template-card:hover, .template-card[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(8,126,121,.12); }
.template-card-copy { display: grid; min-width: 0; gap: .15rem; }
.template-card-copy strong { font-size: .77rem; line-height: 1.25; }
.template-card-copy small { font-size: .68rem; }
.template-thumb { position: relative; display: block; flex: 0 0 82px; width: 82px; height: 62px; overflow: hidden; background: #dce6e4; border-radius: 7px; }
.template-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.template-thumb .image-unavailable { visibility: hidden; }
.template-thumb i { position: absolute; top: 13px; left: 8px; width: 26px; height: 3px; background: rgba(255,255,255,.8); border-radius: 9px; }
.template-thumb i:nth-child(2) { top: 20px; width: 34px; height: 2px; }
.template-thumb i:nth-child(3) { top: 27px; width: 20px; height: 2px; }
.template-thumb b { position: absolute; right: 6px; bottom: 6px; width: 17px; height: 23px; background: rgba(255,255,255,.72); border-radius: 12px 12px 4px 4px; }
.thumb-barber { background: linear-gradient(135deg, #191919 60%, #b59a65); }
.thumb-salon { background: linear-gradient(135deg, #f4dfdc 55%, #b96c73); }
.thumb-clinic { background: linear-gradient(135deg, #d6ebec 55%, #287a82); }
.thumb-restaurant { background: linear-gradient(135deg, #241d19 55%, #d68047); }
.thumb-pizzeria { background: linear-gradient(135deg, #55221e 55%, #e3b454); }
.thumb-store { background: linear-gradient(135deg, #202d34 55%, #7c9b7b); }
.thumb-inn { background: linear-gradient(135deg, #153a35 55%, #c6a46a); }
.thumb-professional { background: linear-gradient(135deg, #263f4a 55%, #cf875d); }
.thumb-electric { background: linear-gradient(135deg, #092bdf 48%, #18c8f2); }
.thumb-ruby { background: linear-gradient(135deg, #390713 48%, #fa4d61); }
.thumb-tropical { background: linear-gradient(135deg, #006b74 48%, #28d5be); }
.thumb-lilac { background: linear-gradient(135deg, #402274 48%, #c1a0ff); }
.thumb-pearl { background: linear-gradient(135deg, #e7edf2 48%, #337ca5); }
.editor-preview-pane { position: sticky; top: 1rem; }
.editor-preview-heading { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.preview-live { color: #287a5d; font-size: .68rem; font-weight: 750; }
.device-frame { width: min(100%, 320px); margin-inline: auto; padding: 10px; background: #142027; border: 4px solid #d9e0e2; border-radius: 32px; box-shadow: 0 18px 50px rgba(17,39,50,.16); }
.device-screen { display: grid; place-items: center; width: 100%; height: 640px; overflow: hidden; color: var(--ink); background: white; border-radius: 22px; }
.device-preview-frame { display: block; width: 100%; height: 640px; background: white; border: 0; border-radius: 22px; }
.device-preview-empty { padding: 1.2rem; color: var(--muted); font-size: .84rem; text-align: center; }
.preview-live.is-dirty { color: #9a611e; }
.preview-note { max-width: 320px; margin: .8rem auto 0; color: var(--muted); font-size: .72rem; text-align: center; }
.template-card { position: relative; align-items: flex-start; min-height: 132px; padding: .65rem; border-radius: 13px; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.template-card:hover { transform: translateY(-1px); }
.template-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 45%, white); outline-offset: 2px; }
.template-card[aria-pressed="true"] { background: #f5fbfa; }
.template-card-state { display: inline-flex; align-items: center; width: fit-content; margin-top: .15rem; padding: .15rem .38rem; color: var(--brand-dark); background: #e8f6f3; border-radius: 999px; font-size: .62rem; font-weight: 800; }
.template-card[aria-pressed="true"] .template-card-state { color: white; background: var(--brand); }
.template-demo-label { margin-top: .22rem; color: #62777d; font-size: .61rem; font-weight: 750; }
.template-demo-actions, .starter-mock-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .26rem; margin-top: .12rem; }
.template-demo-action, .starter-mock-actions > span { display: inline-flex; align-items: center; min-height: 23px; padding: .22rem .4rem; color: #24515a; background: #f5faf9; border: 1px solid #d8e9e6; border-radius: 7px; font-size: .61rem; font-weight: 750; line-height: 1.1; }
.template-demo-action-primary { color: #fff; background: #087e69; border-color: #087e69; }
.content-starter-card { min-height: 126px; }
.content-starter-card small { color: #62777d; font-size: .63rem; }
.starter-mock-actions > span { color: #087e69; background: white; border-color: #b9d9d2; }
.device-preview-sample { display: block; position: relative; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #9aadb1 transparent; scrollbar-width: thin; color: var(--preview-text, var(--ink)); background: var(--preview-secondary, white); text-align: left; }
.demo-profile-cover { position: relative; display: flex; align-items: flex-end; min-height: 162px; padding: 1rem; overflow: hidden; isolation: isolate; background: var(--preview-primary, #087e79); }
.demo-profile-cover::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(10,20,24,.03), rgba(10,20,24,.68)); content: ""; }
.demo-profile-cover img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.demo-cover-badge { position: absolute; top: .8rem; left: .8rem; padding: .28rem .45rem; color: white; background: rgba(15,27,32,.6); border: 1px solid rgba(255,255,255,.35); border-radius: 999px; font-size: .52rem; font-weight: 850; letter-spacing: .08em; }
.demo-avatar { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: -.05rem; color: var(--preview-primary-ink, white); background: var(--preview-primary, #087e79); border: 3px solid rgba(255,255,255,.9); border-radius: 19px; box-shadow: 0 7px 20px rgba(12,31,35,.22); font-size: 1.35rem; font-weight: 850; }
.demo-profile-body { padding: .9rem .85rem 1.1rem; }
.demo-profile-kicker { margin: 0 0 .2rem; color: var(--preview-accent, var(--brand)); font-size: .65rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.demo-profile-body h4 { margin: 0; font-size: 1.28rem; line-height: 1.2; letter-spacing: -.035em; }
.demo-profile-description { margin: .42rem 0 .9rem; color: color-mix(in srgb, var(--preview-text, #24343b) 72%, white); font-size: .7rem; line-height: 1.5; }
.demo-example-label { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-bottom: .45rem; }
.demo-example-label strong, .demo-highlights > strong { font-size: .67rem; }
.demo-example-label span { color: #71818a; font-size: .55rem; text-align: right; }
.demo-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .36rem; }
.demo-action { display: flex; align-items: center; justify-content: center; gap: .32rem; min-height: 35px; padding: .35rem .3rem; color: var(--preview-primary, var(--brand-dark)); background: var(--preview-secondary, white); border: 1px solid color-mix(in srgb, var(--preview-primary, var(--brand)) 25%, #dce5e7); border-radius: 10px; font: 750 .64rem/1.2 Inter, ui-sans-serif, system-ui, sans-serif; text-align: center; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.demo-action-icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: .9rem; height: .9rem; }
.demo-action-icon svg { display: block; width: 100%; height: 100%; }
.demo-action:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15,44,48,.13); }
.demo-action-primary { grid-column: 1 / -1; color: var(--preview-primary-ink, white); background: var(--preview-primary, var(--brand)); border-color: transparent; }
.profile-demo-feedback { margin: .55rem 0 0; padding: .55rem .65rem; color: #17544d; background: #e7f6f1; border: 1px solid #c7e8de; border-radius: 9px; font-size: .63rem; line-height: 1.4; }
.profile-demo-feedback:empty { display: none; }
.demo-highlights { margin-top: .9rem; padding: .7rem; background: color-mix(in srgb, var(--preview-primary, var(--brand)) 7%, var(--preview-secondary, white)); border: 1px solid color-mix(in srgb, var(--preview-primary, var(--brand)) 12%, #dce5e7); border-radius: 12px; }
.demo-highlights ul { display: grid; gap: .3rem; padding: 0 0 0 1rem; margin: .4rem 0 0; font-size: .63rem; line-height: 1.4; }
.demo-preview-footnote { margin: .7rem 0 0; color: #76868c; font-size: .56rem; text-align: center; }
.button-config { position: relative; display: grid; gap: .55rem; min-width: 0; padding: .8rem; border: 1px solid var(--line); border-radius: 11px; }
.button-config legend { padding: 0 .3rem; font-size: .78rem; font-weight: 800; }
.button-remove { position: absolute; top: .38rem; right: .45rem; width: 28px; height: 28px; color: var(--muted); background: #f3f6f6; border: 0; border-radius: 50%; font-size: 1.1rem; cursor: pointer; }
.button-row-tools { position: absolute; top: .38rem; right: 2.5rem; display: flex; gap: .2rem; }
.button-row-tools button { display: grid; place-items: center; width: 28px; height: 28px; color: var(--muted); background: #f3f6f6; border: 0; border-radius: 7px; cursor: pointer; }
.section-order-row { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .55rem 0; border-bottom: 1px solid #edf1f2; }
.section-order-row > strong { margin-right: auto; font-size: .8rem; }
.section-order-row .button-row-tools { position: static; }
.section-order-row .checkbox-label { font-size: .72rem; white-space: nowrap; }
.button-style-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.button-style-grid > div { display: grid; gap: .35rem; }
.button-style-grid input[type="color"] { min-height: 40px; padding: .2rem; }
.button-config .checkbox-label, .editor-section .checkbox-label { font-size: .75rem; }
.editor-submit { padding: .4rem 0; }
.editor-submit > button:disabled { opacity: .58; cursor: not-allowed; box-shadow: none; }
.editor-validation-summary { min-height: 1.4em; margin: .15rem 0 0; color: var(--muted); font-size: .78rem; }
.experience-editor [data-required-message] { min-height: 1.2em; margin-top: -.45rem; color: var(--muted); font-size: .75rem; }
.experience-editor [data-required-message].field-validation-error { color: var(--danger); font-weight: 700; }
.experience-editor .field-invalid { border-color: var(--danger); box-shadow: 0 0 0 2px rgba(163,50,60,.1); }
.experience-editor .notice-error { padding: .85rem 1rem; margin: .4rem 0; color: #812c34; background: #fff0f1; border: 1px solid #f1c9cd; border-radius: 10px; font-size: .84rem; }
.catalog-admin { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.35fr); align-items: start; gap: .8rem; }
.category-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: .45rem; padding: .55rem 0; border-bottom: 1px solid #edf1f2; }
.category-row-new { grid-template-columns: minmax(0, 1fr) auto; margin-top: .55rem; border: 0; }
.category-row input:not([type="checkbox"]) { min-width: 0; min-height: 38px; font-size: .82rem; }
.category-row .checkbox-label { white-space: nowrap; font-size: .7rem; }
.sort-input { display: grid; grid-template-columns: auto 66px; align-items: center; gap: .25rem; color: var(--muted); font-size: .65rem; }
.sort-input input { min-height: 36px !important; padding: .4rem !important; }
.product-form { padding: .7rem 0; border-bottom: 1px solid var(--line); }
.product-form > summary { cursor: pointer; font-weight: 780; }
.product-form .form-stack { margin-top: .75rem; }
.product-advanced { padding: .7rem 0; }
.product-advanced > summary { color: var(--muted); font-size: .82rem; font-weight: 700; cursor: pointer; }
.product-advanced .form-stack { margin-top: .7rem; }
.product-form input[type="file"] { min-height: auto; padding: .45rem; font-size: .75rem; }
.product-admin-list { margin-top: 1rem; }
.product-admin-list h4 { margin: .25rem 0; }
.product-form .button-row { margin-top: .6rem; }
.order-list { display: grid; gap: .75rem; margin-top: 1rem; }
.order-card { padding: 1rem; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 10px 28px rgba(20, 39, 46, .06); }
.order-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.order-card-heading h3 { margin: 0 0 .3rem; color: var(--ink); font-size: 1.05rem; }
.order-card-heading p { margin: 0 0 .25rem; }
.order-card-heading > strong { color: var(--primary); font-size: 1.05rem; white-space: nowrap; }
.order-kicker { color: var(--accent); font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.order-items-summary { padding: .7rem 0; margin: .45rem 0; color: var(--muted); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: .85rem; line-height: 1.55; }
.order-card-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.order-card-actions form { display: inline-flex; align-items: center; gap: .4rem; }
.order-card-actions select { min-height: 36px; padding: .35rem .5rem; font-size: .78rem; }
.order-search { display: grid; grid-template-columns: 1fr; gap: .4rem; max-width: 560px; padding: 1rem; margin: 0 0 1rem; background: #fff; border: 1px solid var(--line); border-radius: 15px; }
.order-search > div { display: flex; gap: .45rem; }
.order-search input { flex: 1; min-width: 0; }
.order-create-form { display: grid; gap: .8rem; }
.order-items-fieldset { display: grid; gap: .5rem; padding: .8rem; border: 1px solid var(--line); border-radius: 14px; }
.order-items-fieldset legend { padding: 0 .35rem; font-weight: 800; }
.order-item-input { align-items: end; }
.platform-product-row { padding: .8rem 0; border-bottom: 1px solid var(--line); }
.platform-product-row > summary { font-weight: 750; cursor: pointer; }
.platform-product-row > form { margin-top: .65rem; }
.platform-product-row > form + form { margin-top: .4rem; }
.platform-product-row .form-span-all { grid-column: 1 / -1; }
.demo-content-mark { width: 1.7rem; height: 1.7rem; overflow: hidden; border-radius: 8px; background: #edf2f2; }
.demo-content-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 560px) {
  .order-card-heading { flex-direction: column; gap: .4rem; }
  .order-card-actions { align-items: stretch; flex-direction: column; }
  .order-card-actions form { align-items: stretch; flex-wrap: wrap; }
  .order-card-actions form select { flex: 1 1 100%; }
}
.detail-date { font-size: .92rem !important; letter-spacing: 0 !important; overflow-wrap: anywhere; }
.page-detail-hero { align-items: center; }
.page-detail-hero h2 { margin-bottom: .65rem; }
.page-detail-hero .back-link { margin-bottom: .45rem; }
button[data-copy-value] { cursor: pointer; }
@media (max-width: 900px) {
  .experience-editor { grid-template-columns: minmax(0, 1fr); }
  .editor-preview-pane { position: static; grid-row: 1; }
  .catalog-admin { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .pages-intro, .page-detail-hero { align-items: flex-start; flex-direction: column; }
  .pages-intro-actions { width: 100%; }
  .template-picker { grid-template-columns: 1fr; }
  .button-style-grid { grid-template-columns: 1fr 1fr; }
  .category-row { grid-template-columns: minmax(0,1fr) auto auto; }
  .category-row > input:not([type="hidden"]) { grid-column: 1 / -1; }
  .category-row-new { grid-template-columns: minmax(0,1fr) auto; }
  .category-row-new > input:not([type="hidden"]) { grid-column: auto; }
  .page-list-footer { align-items: flex-start; flex-direction: column; }
  .page-list-footer .button { align-self: flex-start; }
  .editor-submit > * { flex: 1 1 100%; }
  .editor-preview-pane { padding: .8rem; }
}

@media (max-width: 760px) {
    .topbar { grid-template-columns: minmax(0, 1fr) auto; gap: .7rem .8rem; padding: .8rem max(.75rem, env(safe-area-inset-right)) .75rem max(.75rem, env(safe-area-inset-left)); }
    .topbar > .brand { grid-column: 1; grid-row: 1; }
    .nav-menu { position: relative; grid-column: 2; grid-row: 1; justify-self: end; padding: 0; border: 0; }
    .nav-menu > summary { display: flex; align-items: center; min-height: 40px; padding: .45rem .75rem; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 9px; font-size: .86rem; font-weight: 700; cursor: pointer; list-style: none; }
    .nav-menu > summary::-webkit-details-marker { display: none; }
    .nav-menu > summary::after { content: '☰'; margin-left: .55rem; color: var(--brand-dark); }
    .nav-menu[open] > summary { border-color: #9bb5b5; }
    .nav-menu > nav { display: none; position: absolute; top: calc(100% + .55rem); right: 0; z-index: 10; width: min(19rem, calc(100vw - 1.5rem)); max-height: min(70vh, 32rem); overflow-y: auto; padding: .45rem; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(26, 51, 66, .16); }
    .nav-menu[open] > nav { display: flex; flex-direction: column; align-items: stretch; gap: .1rem; }
    .topbar nav a { display: flex; align-items: center; gap: .6rem; padding: .65rem .7rem; border-radius: 8px; white-space: normal; }
    .topbar nav a > svg { flex: 0 0 17px; width: 17px; height: 17px; color: var(--brand-dark); }
    .topbar nav a:hover { background: var(--brand-soft); }
    .platform-clock-group { grid-column: 1; grid-row: 2; align-self: center; }
    .user-menu { grid-column: 2; grid-row: 2; justify-content: flex-end; gap: .55rem; padding-top: 0; border-top: 0; }
    .user-name { max-width: min(42vw, 15rem); }
    .stats-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: .65rem; }
    .stat-card { display: flex; align-items: center; justify-content: space-between; }
    .stat-card strong { margin-top: 0; font-size: 1.5rem; }
    .section-heading { align-items: flex-start; flex-direction: column; gap: .65rem; }
    .support-card { align-items: flex-start; flex-direction: column; gap: .4rem; }
    .form-grid { grid-template-columns: 1fr; }
    .table-wrap { margin-inline: -.4rem; width: calc(100% + .8rem); }
    table { min-width: 760px; }
    .page { width: min(1160px, calc(100% - 1.5rem)); margin-top: 1.5rem; }
    .page-heading { margin-bottom: 1.25rem; }
    .card { border-radius: 13px; }
    .inline-form { align-items: stretch; }
    .inline-form > * { max-width: 100%; }
    .recovery-codes { grid-template-columns: 1fr; }
    .link-editor-row { grid-template-columns: 1fr; }
    .batch-actions { align-items: stretch; flex-direction: column; width: 100%; }
    .qr-download-layout { grid-template-columns: minmax(0, 1fr); }
    .qr-download-preview { width: min(100%, 260px); }
    .chart-periods { width: 100%; }
    .chart-periods .button { flex: 1; }
    .list-filters { align-items: stretch; flex-direction: column; }
    .list-filters > div { flex: 1 1 auto; max-width: none; }
    .list-filters > .button { width: 100%; }
    .batch-label-grid { grid-template-columns: 1fr; }
    .batch-label { align-items: flex-start; }
    .batch-qr { flex-basis: 112px; width: 112px; height: 112px; }
}

@media print {
    @page { size: A4; margin: 8mm; }
    body { background: white; }
    .topbar, .page-heading, .page-hero, .footer, .notice, .section-heading, .card > p, .batch-actions { display: none !important; }
    .page { width: 100%; margin: 0; }
    .card { padding: 0; border: 0; box-shadow: none; }
    .batch-label-grid { grid-template-columns: repeat(2, 1fr); gap: 4mm; }
    .batch-label { min-height: 48mm; padding: 3mm; border: 1px solid #aaa; border-radius: 2mm; break-inside: avoid; }
    .batch-qr { flex-basis: 38mm; width: 38mm; height: 38mm; }
    .batch-label-copy strong { font-size: 12pt; }
    .batch-label-copy span, .batch-label-copy small { font-size: 8pt; }
    .batch-label-copy code { font-size: 6pt; }
}

/* Navegação autenticada da plataforma */
.app-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; padding: 1.15rem .85rem .8rem; color: #eaf3f4; background: #142d3b; }
.sidebar .brand { display: grid; gap: .15rem; padding: .3rem .65rem 1.25rem; color: white; font-size: 1rem; }
.sidebar .brand span { color: #a9c0c9; font-size: .72rem; font-weight: 500; letter-spacing: .01em; }
.side-nav { display: grid; align-content: start; gap: 1.1rem; min-height: 0; overflow-y: auto; padding: .2rem .1rem; }
.sidebar .side-nav { scrollbar-color: rgba(226, 239, 242, .42) transparent; }
.sidebar .side-nav::-webkit-scrollbar-thumb { background-color: rgba(226, 239, 242, .42); }
.sidebar .side-nav::-webkit-scrollbar-thumb:hover { background-color: rgba(226, 239, 242, .72); }
.side-nav-group { display: grid; gap: .2rem; }
.side-nav-group > p { margin: 0; padding: .25rem .65rem .35rem; color: #8da9b4; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.side-nav-collapsible > summary { display: flex; align-items: center; min-height: 34px; padding: .25rem .65rem; color: #8da9b4; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; list-style: none; cursor: pointer; }
.side-nav-collapsible > summary::-webkit-details-marker { display: none; }
.side-nav-collapsible > summary::after { content: '＋'; margin-left: auto; color: #8da9b4; font-size: .8rem; }
.side-nav-collapsible[open] > summary::after { content: '−'; }
.side-nav-group > a { display: flex; align-items: center; gap: .58rem; min-height: 40px; padding: .55rem .7rem; color: #d2e0e4; border-radius: 9px; font-size: .86rem; font-weight: 630; text-decoration: none; }
.side-nav-group > a > span { min-width: 0; overflow-wrap: anywhere; }
.side-nav-group > a > svg { display: block; flex: 0 0 16px; width: 16px; height: 16px; color: #a9c9ca; }
.side-nav-group > a:hover { color: white; background: rgba(255,255,255,.08); }
.side-nav-group > a[aria-current="page"] { color: white; background: #087e79; box-shadow: inset 3px 0 #82d5cb; }
.sidebar-foot { margin-top: auto; padding: .8rem .65rem .2rem; color: #88a3ad; border-top: 1px solid rgba(255,255,255,.12); font-size: .7rem; }
.app-main { min-width: 0; }
.app-main > .topbar { position: sticky; top: 0; display: flex; grid-template-columns: none; grid-template-rows: none; align-items: center; justify-content: space-between; gap: 1rem; min-height: 66px; padding: .7rem clamp(1rem, 3vw, 2rem); background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); box-shadow: 0 5px 18px rgba(26,51,66,.025); }
.mobile-brand, .mobile-nav { display: none; }
.app-main > .page { width: min(1220px, calc(100% - 3.25rem)); margin: clamp(1.7rem, 4vw, 3rem) auto 4rem; }
.user-menu { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .9rem; color: var(--muted); font-size: .86rem; }
.user-menu form { margin: 0; }
.platform-clock-group { flex: 0 0 auto; }
.user-name { max-width: 28vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.platform-clock-group { display: inline-flex; align-items: baseline; gap: .3rem; white-space: nowrap; }
.platform-clock { color: var(--ink); font-size: .82rem; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.finance-scope-label { margin: -.8rem 0 1rem; font-size: .82rem; }
.finance-note { margin: 0 0 1rem; font-size: .8rem; }
.finance-income { color: #146b4e; }
.finance-expense { color: #9b3d43; }
.finance-status { display: inline-flex; padding: .32rem .55rem; border-radius: 99px; color: #405661; background: #edf1f2; font-size: .72rem; font-weight: 750; white-space: nowrap; }
.finance-status-settled { color: #11634a; background: #e4f5ed; }
.finance-status-open { color: #86511d; background: #fff1d7; }
.finance-status-planned { color: #345b86; background: #e9f1fa; }
.finance-status-cancelled { color: #58646b; background: #edf0f1; }
.finance-actions { display: grid; justify-items: start; gap: .3rem; }
.finance-actions form { margin: 0; }
.finance-actions .button { white-space: nowrap; }
.finance-stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.list-filters { display: flex; align-items: end; flex-wrap: wrap; gap: .7rem; margin: 1rem 0; }
.list-filters > div { display: grid; flex: 1 1 16rem; gap: .3rem; max-width: 30rem; }
.list-filters label { color: var(--ink); font-size: .78rem; font-weight: 700; }
.list-filters input, .list-filters select { width: 100%; min-height: 42px; }
.analytics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0; }
.access-analytics { min-width: 0; margin: 0; }
.access-analytics .section-heading { align-items: flex-start; }
.access-analytics .section-heading > div:first-child { min-width: 0; }
.access-analytics .section-heading p { max-width: 42rem; }

/* Assinatura, vencimentos e avisos em tempo real */
.notification-mute { padding: .35rem .55rem; border: 1px solid transparent; border-radius: 8px; font-size: .78rem; }
.notification-mute:hover, .notification-mute[aria-pressed="true"] { color: var(--brand-dark); background: var(--brand-soft); }
.notification-center { position: fixed; z-index: 30; top: 78px; right: clamp(.75rem, 2vw, 1.5rem); display: grid; gap: .65rem; width: min(390px, calc(100vw - 1.5rem)); max-height: calc(100vh - 100px); overflow-y: auto; }
.notification-toast { position: relative; padding: 1rem 2.6rem 1rem 1rem; background: #fff; border: 1px solid #e6d4b8; border-left: 4px solid #c18135; border-radius: 12px; box-shadow: 0 16px 40px rgba(23, 43, 58, .18); }
.notification-toast.notification-danger { border-color: #edc9cb; border-left-color: #b4474f; }
.notification-toast strong { display: block; padding-right: .2rem; font-size: .9rem; line-height: 1.35; }
.notification-toast p { margin: .35rem 0 .55rem; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.notification-toast a { font-size: .8rem; font-weight: 750; }
.notification-close { position: absolute; top: .45rem; right: .55rem; width: 32px; height: 32px; color: var(--muted); background: transparent; border: 0; border-radius: 8px; font-size: 1.35rem; cursor: pointer; }
.notification-close:hover { color: var(--ink); background: #f1f5f5; }
.subscription-hero, .expiry-intro { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(1.2rem, 3vw, 2rem); margin-bottom: 1rem; background: linear-gradient(120deg, #e5f4f2, #fff 72%); border: 1px solid #d7e9e6; border-radius: 18px; }
.subscription-hero h2, .expiry-intro h2 { margin: .1rem 0 .35rem; font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -.035em; }
.subscription-hero p, .expiry-intro p { margin: .2rem 0 0; color: var(--muted); }
.subscription-hero .status { flex: 0 0 auto; }
.subscription-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.subscription-fact { display: grid; align-content: start; gap: .35rem; min-height: 126px; padding: 1.1rem; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 28px rgba(26, 51, 66, .025); }
.subscription-fact span, .subscription-fact small { color: var(--muted); font-size: .78rem; }
.subscription-fact strong { font-size: 1.25rem; letter-spacing: -.025em; overflow-wrap: anywhere; }
.subscription-alert { display: grid; gap: .2rem; padding: 1rem 1.15rem; margin-bottom: 1rem; border: 1px solid #f0d7ad; border-left: 4px solid #c18135; border-radius: 12px; background: #fff8e9; }
.subscription-alert strong { font-size: .94rem; }
.subscription-alert span { color: var(--muted); font-size: .84rem; }
.subscription-alert a { justify-self: start; margin-top: .25rem; font-size: .82rem; font-weight: 750; }
.subscription-alert.danger { border-color: #edc9cb; border-left-color: #b4474f; background: #fff2f3; }
.subscription-details h2 { margin: 0; font-size: 1.08rem; }
.subscription-usage { padding-top: .3rem; }
.subscription-usage .section-heading { margin-bottom: .75rem; }
.subscription-usage-line { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-size: .86rem; }
.subscription-usage-line span { color: var(--muted); }
.subscription-progress { display: block; width: 100%; height: 12px; margin: .65rem 0 .25rem; overflow: hidden; appearance: none; border: 0; border-radius: 99px; background: #e8eeee; }
.subscription-progress::-webkit-progress-bar { border-radius: 99px; background: #e8eeee; }
.subscription-progress::-webkit-progress-value { border-radius: 99px; background: var(--brand); }
.subscription-progress::-moz-progress-bar { border-radius: 99px; background: var(--brand); }
.subscription-usage > p, .subscription-note { margin: .45rem 0 0; font-size: .8rem; }
.subscription-empty { padding: clamp(1.3rem, 3vw, 2.2rem); }
.subscription-empty h2 { margin: .8rem 0 .3rem; }
.subscription-empty p { max-width: 48rem; }
.subscription-empty .button-row { margin-top: 1rem; }
.expiry-intro { align-items: flex-end; background: #fff; border-color: var(--line); }
.expiry-intro > div { max-width: 48rem; }
.expiry-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.35rem; margin-bottom: .75rem; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 28px rgba(26, 51, 66, .025); }
.expiry-card.warning { border-left: 4px solid #c18135; }
.expiry-card.danger { border-left: 4px solid #b4474f; }
.expiry-card h2 { margin: .1rem 0 .3rem; font-size: 1.08rem; }
.expiry-card p { margin: .2rem 0 .55rem; color: var(--muted); font-size: .85rem; }
.expiry-card .status { flex: 0 0 auto; }
.text-link { font-size: .82rem; font-weight: 750; }
@media (max-width: 760px) {
    .notification-center { top: 116px; right: .75rem; width: min(390px, calc(100vw - 1.5rem)); }
    .notification-mute { padding-inline: .2rem; font-size: .72rem; }
    .subscription-facts { grid-template-columns: 1fr; gap: .6rem; }
    .subscription-fact { min-height: auto; }
    .subscription-hero, .expiry-intro { align-items: flex-start; flex-direction: column; }
    .expiry-card { flex-direction: column-reverse; gap: .6rem; }
}

@media (max-width: 900px) {
    .app-shell { display: block; min-height: 100vh; }
    .sidebar { display: none; }
    .notification-center { top: 116px; }
    .app-main > .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: .55rem .7rem; min-height: 0; padding: .7rem max(.8rem, env(safe-area-inset-right)) .65rem max(.8rem, env(safe-area-inset-left)); }
    .mobile-brand { display: block; grid-column: 1; grid-row: 1; }
    .mobile-nav { position: relative; display: block; grid-column: 2; grid-row: 1; justify-self: end; }
    .mobile-nav > summary { display: flex; align-items: center; min-height: 40px; padding: .45rem .75rem; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 9px; font-size: .86rem; font-weight: 700; cursor: pointer; list-style: none; }
    .mobile-nav > summary::-webkit-details-marker { display: none; }
    .mobile-nav > summary::after { content: '☰'; margin-left: .55rem; color: var(--brand-dark); }
    .mobile-nav[open] > summary { border-color: #9bb5b5; }
    .mobile-nav > nav { display: none; position: absolute; top: calc(100% + .55rem); right: 0; z-index: 10; width: min(21rem, calc(100vw - 1.5rem)); max-height: min(75vh, 38rem); overflow-y: auto; padding: .75rem; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(26,51,66,.18); }
    .mobile-nav[open] > nav { display: grid; gap: .45rem; }
    .mobile-nav .side-nav-group { gap: .1rem; }
    .mobile-nav .side-nav-group > p, .mobile-nav .side-nav-collapsible > summary { padding: .45rem .55rem .2rem; }
    .mobile-nav .side-nav-agenda > .side-nav-subheading { padding: .42rem .55rem .1rem; margin-top: .25rem; }
    .mobile-nav .side-nav-group > a { color: var(--ink); }
    .mobile-nav .side-nav-group > a[aria-current="page"] { color: white; }
    .platform-clock-group { grid-column: 1; grid-row: 2; align-self: center; }
    .user-menu { grid-column: 2; grid-row: 2; justify-content: flex-end; gap: .55rem; padding-top: 0; border-top: 0; }
    .user-name { max-width: min(42vw, 15rem); overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
    .app-main > .page { width: min(1220px, calc(100% - 1.5rem)); margin-top: 1.45rem; }
}

@media (min-width: 761px) and (max-width: 1080px) {
    .finance-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

@media print {
    .app-shell { display: block !important; }
    .sidebar, .mobile-nav, .app-main > .topbar { display: none !important; }
    .app-main > .page { width: 100%; margin: 0; }
}

.commercial-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: .8rem; }
.plan-card { display: grid; align-content: start; gap: .35rem; padding: 1rem; background: #f8fbfb; border: 1px solid var(--line); border-radius: 12px; }
.plan-card h3, .plan-card p { margin: 0; }
.plan-card .button { justify-self: start; margin-top: .5rem; }

/* Clearer page creation and plan access tools */
.page-explainer { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; padding: .9rem 1rem; margin: 0 0 1rem; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 12px; font-size: .82rem; }
.page-explainer strong { color: var(--ink); }
.page-explainer b { color: var(--ink); }
.page-card-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.org-filter { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.org-filter label { font-size: .75rem; }
.org-filter select { min-width: 180px; min-height: 40px; }
.page-list-card .page-list-main small { display: inline-block; margin-top: .35rem; color: var(--muted); }
.simple-links-entry { padding: .85rem 1rem; margin: 1rem 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.simple-links-entry summary { color: var(--ink); font-weight: 750; cursor: pointer; }
.simple-links-entry p { color: var(--muted); font-size: .86rem; }
.editor-optional { display: block; }
.editor-optional > summary { display: flex; align-items: center; gap: .75rem; list-style: none; cursor: pointer; }
.editor-optional > summary::-webkit-details-marker { display: none; }
.editor-optional > summary::after { content: '＋'; margin-left: auto; color: var(--brand-dark); font-size: 1.1rem; }
.editor-optional[open] > summary::after { content: '−'; }
.editor-optional > summary > span:last-child { display: grid; gap: .15rem; }
.editor-optional > summary strong { font-size: .94rem; }
.editor-optional > summary small { color: var(--muted); font-size: .75rem; font-weight: 500; }
.optional-marker { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; color: var(--brand-dark); background: var(--brand-soft); border-radius: 9px; font-size: 1.1rem; font-weight: 800; }
.editor-optional-content { display: grid; gap: .7rem; padding-top: 1rem; }
.editor-optional-content > p { margin: 0; color: var(--muted); font-size: .82rem; }
.editor-intro { align-items: center; }
.editor-intro .back-link { margin-bottom: .7rem; }
.editor-section-heading > span { font-size: .82rem; }
.template-card { min-height: 132px; padding: .65rem; }
.template-card-copy strong { font-size: .83rem; }
.template-card-copy small { color: var(--muted); font-size: .73rem; }
.template-card-summary { color: var(--muted); font-size: .7rem; line-height: 1.35; }
.template-card[aria-pressed="true"] { background: #f2fbf9; border-color: var(--brand); box-shadow: 0 0 0 2px rgba(8,126,121,.14); }
.editor-submit { position: sticky; bottom: .75rem; z-index: 2; padding: .75rem; background: rgba(244,247,247,.96); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(26,51,66,.09); backdrop-filter: blur(8px); }
.check-row { display: flex; align-items: flex-start; gap: .6rem; }
.check-row input { width: auto; min-height: 0; margin: .25rem 0 0; }
.check-row span { font-size: .82rem; font-weight: 600; }

/* Page editor: keep visual style, sample content, and business identity distinct. */
.content-starter-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: .55rem; }
.content-starter-card { display: grid; align-content: start; gap: .32rem; min-height: 126px; padding: .78rem .85rem; color: var(--ink); background: #f8fbfb; border: 1px solid var(--line); border-radius: 11px; text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.content-starter-card:hover { transform: translateY(-1px); border-color: #8dbbb6; }
.content-starter-card[aria-pressed="true"] { background: #effaf7; border-color: var(--brand); box-shadow: 0 0 0 2px rgba(8,126,121,.14); }
.content-starter-card strong { font-size: .81rem; }
.content-starter-card span { color: var(--muted); font-size: .72rem; line-height: 1.4; }
.profile-fields-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.profile-fields-grid > div { display: grid; align-content: start; gap: .35rem; min-width: 0; }
.field-hint { margin: -.3rem 0 .2rem; font-size: .75rem; }
.editor-optional-content > p { line-height: 1.5; }
.button-config { background: #fcfdfd; }
.button-config [data-action-help] { display: block; padding: .48rem .6rem; color: #34535a; background: #eef7f5; border-radius: 8px; font-size: .73rem; line-height: 1.45; }
.button-config [data-action-destination][hidden] { display: none; }
.section-toggle-row { padding: .8rem .65rem; margin-bottom: .25rem; background: #f8fbfb; border: 1px solid var(--line); border-radius: 9px; }
.editor-media-section .media-upload-note { margin-bottom: 0; }

@media (max-width: 760px) {
  .profile-fields-grid { grid-template-columns: 1fr; }
  .content-starter-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editor-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editor-catalog-guide { grid-template-columns: minmax(0, 1fr); }
  .editor-catalog-choice { grid-template-columns: 20px minmax(0, 1fr); gap: .15rem .5rem; min-height: 0; }
  .editor-catalog-choice input { grid-row: span 2; }
  .editor-type-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .content-starter-picker { grid-template-columns: 1fr; }
  .editor-tab { min-height: 50px; font-size: .72rem; }
  .editor-panel-next .button { width: 100%; }
  .editor-block-card .button-row-tools { right: 2.2rem; }
}

@media (max-width: 760px) {
  .pages-intro { align-items: stretch; flex-direction: column; }
  .pages-intro-actions { align-items: stretch; flex-direction: column; }
  .pages-intro-actions .button { width: 100%; }
  .org-filter { align-items: stretch; flex-direction: column; }
  .org-filter select { width: 100%; }
  .page-explainer { display: grid; }
  .page-card-actions { width: 100%; }
  .page-card-actions .button { flex: 1 1 auto; }
  .editor-submit { position: sticky; bottom: .35rem; }
}

/* Guided commercial plan setup */
.plan-editor-form { display: grid; gap: .9rem; }
.plan-editor-section { min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: 13px; }
.plan-editor-section legend { padding: 0 .4rem; font-size: .95rem; font-weight: 800; }
.plan-editor-section > p { margin: 0 0 .9rem; color: var(--muted); font-size: .82rem; }
.plan-editor-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); align-items: end; gap: .8rem; }
.plan-form-field { display: grid; align-content: start; gap: .38rem; min-width: 0; }
.plan-form-field-wide { grid-column: 1 / -1; }
.plan-form-field small { line-height: 1.45; }
.plan-form-field textarea { min-height: 78px; }
.plan-form-field .checkbox-label { padding: .6rem 0 .1rem; }
.plan-static-label { color: var(--muted); font-size: .78rem; font-weight: 750; }
.plan-unlimited-field { min-height: 68px; align-content: center; padding: .6rem .8rem; background: #f8fbfb; border: 1px solid var(--line); border-radius: 10px; }
.plan-unlimited-field .checkbox-label { margin: 0; }
.optional-tag { margin-left: .3rem; color: var(--muted); font-size: .7rem; font-weight: 600; }
.plan-feature-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: .6rem; }
.plan-feature-list .checkbox-label { min-height: 48px; padding: .7rem .8rem; background: #f8fbfb; border: 1px solid var(--line); border-radius: 10px; font-size: .8rem; }
.plan-editor-submit { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; padding: .85rem 1rem; background: #f3f8f7; border: 1px solid #dce9e7; border-radius: 12px; }
.plan-editor-submit p { margin: 0; color: var(--muted); font-size: .8rem; }

/* Appointment setup order and grouped controls */
.appointment-guide { display: grid; grid-template-columns: minmax(210px, .7fr) minmax(0, 1.8fr); align-items: center; gap: 1rem; padding: clamp(1rem, 2.5vw, 1.4rem); margin-bottom: 1rem; background: linear-gradient(135deg, #e8f4f2, #fff); border: 1px solid #dce9e7; border-radius: 16px; }
.appointment-guide h2 { margin: .1rem 0 .35rem; font-size: 1.15rem; }
.appointment-guide p:not(.page-list-kicker) { margin: 0; color: var(--muted); font-size: .82rem; }
.appointment-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; padding: 0; margin: 0; list-style: none; }
.appointment-steps a { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-content: center; align-items: center; gap: .1rem .55rem; min-height: 68px; padding: .6rem; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 11px; text-decoration: none; }
.appointment-steps a:hover { border-color: #94bdb8; }
.appointment-steps a > span { display: grid; place-items: center; grid-row: span 2; width: 27px; height: 27px; color: var(--brand-dark); background: var(--brand-soft); border-radius: 8px; font-size: .72rem; font-weight: 850; }
.appointment-steps strong { font-size: .75rem; line-height: 1.25; }
.appointment-steps small { font-size: .66rem; line-height: 1.3; }
.appointment-setup { margin-bottom: 1.3rem; }
.appointment-setup-heading { margin: 0 0 .85rem; }
.appointment-setup-heading h2 { margin: 0 0 .2rem; font-size: 1.2rem; }
.appointment-setup-heading p { margin: 0; color: var(--muted); font-size: .84rem; }
.agenda-start { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin: 0 0 1rem; }
.agenda-start article { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start; gap: .2rem .65rem; min-width: 0; padding: .8rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.agenda-start article > span { display: grid; grid-row: span 2; width: 36px; height: 36px; place-items: center; color: var(--brand-dark); background: var(--brand-soft); border-radius: 10px; }
.agenda-start svg { width: 20px; height: 20px; }
.agenda-start strong { font-size: .78rem; line-height: 1.35; }
.agenda-start small { color: var(--muted); font-size: .7rem; line-height: 1.4; }
.appointment-config-card { min-width: 0; scroll-margin-top: 1rem; }
.appointment-config-card .section-heading { align-items: flex-start; margin-bottom: 1rem; }
.appointment-config-card .section-heading h2 { font-size: 1.02rem; }
.appointment-entity-list { display: grid; gap: .55rem; padding-left: 1.25rem; margin: .4rem 0 1rem; }
.appointment-entity-list > li { padding: .7rem .75rem; background: #f8fbfb; border: 1px solid var(--line); border-radius: 10px; font-size: .82rem; }
.appointment-entity-list details { margin-top: .55rem; }
.appointment-entity-list details > summary, .appointment-config-card details > summary { color: var(--brand-dark); font-size: .78rem; font-weight: 750; cursor: pointer; }
.appointment-settings-form { display: grid; gap: .7rem; }
.appointment-settings-group { min-width: 0; padding: .8rem; border: 1px solid var(--line); border-radius: 11px; }
.appointment-settings-group legend { padding: 0 .3rem; font-size: .82rem; font-weight: 800; }
.appointment-settings-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); align-items: end; gap: .7rem; }
.appointment-settings-fields > label { display: grid; align-content: start; gap: .35rem; }
.appointment-settings-fields select { width: 100%; }
.appointment-settings-fields > .checkbox-label { display: flex; align-items: center; min-height: 44px; }
.appointment-settings-help { margin: .45rem 0 0; color: var(--muted); font-size: .74rem; line-height: 1.45; }
.appointment-config-card table { font-size: .78rem; }
.appointment-config-card th, .appointment-config-card td { padding: .65rem .5rem; }
.appointment-config-card form .button.primary { justify-self: start; }
.appointment-config-card button { white-space: nowrap; }
.appointment-table-scroll { overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
.table-scroll.appointment-table-scroll table { min-width: 840px; }
.appointment-client-cell { display: grid; justify-items: start; gap: .35rem; min-width: 145px; }
.appointment-client-cell > strong { max-width: 190px; overflow-wrap: anywhere; }
.appointment-scroll-hint, .customer-profile-scroll-hint { margin: .3rem 0 .55rem; color: var(--muted); font-size: .72rem; }
.customer-profile-button { min-height: 34px; }
.customer-profile-dialog { width: min(720px, calc(100vw - 2rem)); max-width: none; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); padding: 0; overflow: hidden; color: var(--ink); background: #f8fbfb; border: 1px solid rgba(23,43,58,.16); border-radius: 18px; box-shadow: 0 28px 90px rgba(10,27,38,.35); }
.customer-profile-dialog::backdrop { background: rgba(9,24,32,.62); backdrop-filter: blur(3px); }
.customer-profile-panel { display: flex; flex-direction: column; min-width: 0; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); }
.customer-profile-header { position: sticky; z-index: 1; top: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: .9rem; min-width: 0; padding: 1.15rem 1.25rem; background: #fff; border-bottom: 1px solid var(--line); }
.customer-profile-header .page-list-kicker { margin: 0 0 .25rem; }
.customer-profile-header h2 { margin: 0; font-size: clamp(1.15rem, 4vw, 1.45rem); line-height: 1.25; overflow-wrap: anywhere; }
.customer-profile-close { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; color: var(--ink); background: #f3f7f7; border: 1px solid var(--line); border-radius: 11px; font-size: 1.55rem; line-height: 1; cursor: pointer; }
.customer-profile-close:hover { color: var(--brand-dark); background: var(--brand-soft); }
.customer-profile-body { display: grid; gap: .8rem; min-height: 0; padding: 1rem 1.15rem 1.2rem; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.customer-profile-section { min-width: 0; padding: .9rem; background: #fff; border: 1px solid var(--line); border-radius: 13px; }
.customer-profile-section h3 { margin: 0 0 .65rem; font-size: .9rem; line-height: 1.35; }
.customer-profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: .6rem; min-width: 0; }
.customer-profile-detail { display: grid; align-content: start; gap: .2rem; min-width: 0; padding: .65rem .7rem; background: #f6f9f9; border: 1px solid #edf1f2; border-radius: 10px; }
.customer-profile-detail > span { color: var(--muted); font-size: .68rem; font-weight: 700; }
.customer-profile-detail > strong, .customer-profile-detail > a { min-width: 0; color: var(--ink); font-size: .82rem; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.customer-profile-detail > a { color: var(--brand-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.customer-profile-appointment { display: grid; justify-items: start; gap: .65rem; padding: .75rem; background: linear-gradient(120deg, #eef8f6, #fff); border: 1px solid #dcece8; border-radius: 11px; }
.customer-profile-status { display: inline-flex; max-width: 100%; padding: .28rem .5rem; color: var(--brand-dark); background: var(--brand-soft); border-radius: 99px; font-size: .68rem; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.customer-profile-history-rail { display: flex; gap: .65rem; max-width: 100%; padding: .1rem .1rem .7rem; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
.customer-profile-history-rail:focus-visible { outline: 3px solid rgba(8,126,121,.25); outline-offset: 3px; border-radius: 10px; }
.customer-profile-history-card { display: grid; flex: 0 0 min(250px, 78vw); align-content: start; justify-items: start; gap: .4rem; min-width: 0; padding: .75rem; background: #f8fbfb; border: 1px solid var(--line); border-radius: 11px; scroll-snap-align: start; }
.customer-profile-history-card > strong, .customer-profile-history-card > span:not(.customer-profile-status), .customer-profile-history-card > small { max-width: 100%; overflow-wrap: anywhere; }
.customer-profile-history-card > strong { font-size: .8rem; }
.customer-profile-history-card > span:not(.customer-profile-status) { font-size: .78rem; line-height: 1.4; }
.customer-profile-history-card > small { color: var(--muted); font-size: .7rem; }
.customer-profile-empty, .customer-profile-loading, .customer-profile-error { margin: 0; padding: .8rem; color: var(--muted); background: #f6f9f9; border-radius: 10px; font-size: .82rem; line-height: 1.5; overflow-wrap: anywhere; }
.customer-profile-error { color: #87353b; background: #fff1f2; }
.customer-profile-dialog :focus-visible { outline: 3px solid rgba(8,126,121,.3); outline-offset: 2px; }
.side-nav-agenda > a { min-height: 36px; padding-left: .85rem; margin-left: .35rem; border-left: 1px solid rgba(210, 224, 228, .24); border-radius: 0 8px 8px 0; font-size: .8rem; }
.side-nav-agenda > a[aria-current="page"] { border-left-color: #82d5cb; }
.side-nav-agenda > .side-nav-subheading { padding: .32rem .7rem .08rem; margin: .3rem 0 0; color: #73919c; font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

@media (max-width: 900px) {
  .appointment-guide { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .appointment-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agenda-start { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-editor-submit { align-items: stretch; }
  .plan-editor-submit .button { width: 100%; }
}
@media (max-width: 420px) {
  .appointment-steps { grid-template-columns: 1fr; }
  .agenda-start { grid-template-columns: minmax(0, 1fr); }
  .customer-profile-dialog { width: calc(100vw - .6rem); max-height: calc(100vh - .6rem); max-height: calc(100dvh - .6rem); border-radius: 14px; }
  .customer-profile-panel { max-height: calc(100vh - .6rem); max-height: calc(100dvh - .6rem); }
  .customer-profile-header { padding: .85rem; }
  .customer-profile-body { gap: .6rem; padding: .7rem; }
  .customer-profile-section { padding: .7rem; }
}

.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.form-row > div { display: grid; gap: .4rem; }
.notice-card { border-color: #ead3a7; background: #fffaf0; }
.button-row { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; }
.button-setup-note { padding: .55rem .7rem; margin: .45rem 0; color: #6b4b13; background: #fff8e8; border: 1px solid #f0dfb7; border-radius: 9px; font-size: .76rem; line-height: 1.4; }
.button-setup-note[hidden] { display: none; }

@media (max-width: 760px) {
    .form-row { grid-template-columns: 1fr; }
    .button-row > * { max-width: 100%; }
}

/* Ajustes finais de leitura e rolagem para as telas administrativas. */
.app-main, .app-main > .page, .app-main > .topbar, .card, .stat-card,
.section-heading > *, .page-detail-hero > *, .subscription-hero > *, .expiry-intro > *, .expiry-card > *,
.form-grid > *, .form-row > *, .appointment-guide > * { min-width: 0; }
.app-main .card :is(p, a, strong, small, code, label, legend, summary, li),
.app-main td, .app-main th, .app-main .muted { overflow-wrap: anywhere; }
.app-main select, .app-main textarea, .app-main input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]) { max-width: 100%; }
.table-scroll { width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
.table-scroll table { min-width: 760px; }
.finance-actions .button, .appointment-config-card button { max-width: 100%; white-space: normal; text-align: center; }
.section-order-row .checkbox-label, .category-row .checkbox-label { white-space: normal; }
.org-filter select, .inline-form select { max-width: 100%; }
.user-menu { min-width: 0; }
.user-name { max-width: min(30vw, 22rem); overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
.app-shell, .sidebar, .side-nav, .side-nav-group, .app-main, .app-main > .page { min-width: 0; }
.side-nav-group > a, .side-nav-collapsible > summary { overflow-wrap: anywhere; }
.app-main :where(h1, h2, h3, h4, p, a, strong, small, label, legend, summary, li, code) { overflow-wrap: anywhere; }
.table-wrap, .table-scroll { max-width: 100%; }
.table-wrap th, .table-scroll th { white-space: normal; }
.app-main img, .app-main video, .app-main svg { max-width: 100%; }
.app-main :where(form, fieldset, .form-stack, .form-grid, .form-row, .list-filters, .profile-fields-grid, .plan-editor-fields, .appointment-settings-fields, .button-config) { min-width: 0; max-width: 100%; }
.app-main :where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]), select, textarea) { width: 100%; min-width: 0; max-width: 100%; }
.app-main :where(button, .button) { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

/* Short visual instructions shared by pages that need a clearer first step. */
.task-guide { display: block; padding: 0; margin: 0 0 1rem; background: linear-gradient(115deg, #e9f5f2, #fff 76%); border: 1px solid #dce9e7; border-radius: 15px; }
.task-guide-body { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: .9rem; padding: 0 1rem 1rem; }
.task-guide-art { display: grid; place-items: center; width: 82px; height: 72px; overflow: hidden; background: rgba(255,255,255,.66); border: 1px solid rgba(8,126,121,.1); border-radius: 17px; }
.task-guide-art svg { display: block; width: 100%; height: auto; }
.task-guide-copy { display: grid; min-width: 0; gap: .25rem; }
.task-guide-copy .page-list-kicker { margin: 0; font-size: .63rem; }
.task-guide-summary { margin: 0; color: var(--ink); font-size: .84rem; font-weight: 650; line-height: 1.45; }
.task-guide-steps { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; margin: .2rem 0 0; list-style: none; }
.task-guide-steps li { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; padding: .28rem .48rem; color: #36565d; background: rgba(255,255,255,.76); border: 1px solid #e0ece9; border-radius: 999px; font-size: .7rem; line-height: 1.35; }
.task-guide-steps li > span { display: grid; flex: 0 0 19px; width: 19px; height: 19px; place-items: center; color: #fff; background: var(--brand); border-radius: 50%; font-size: .63rem; font-weight: 800; }
.simple-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin: 0 0 1rem; }
.simple-flow-step { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; gap: .2rem .65rem; min-width: 0; padding: .78rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.simple-flow-step > span { display: grid; grid-row: span 2; width: 34px; height: 34px; place-items: center; color: var(--brand-dark); background: var(--brand-soft); border-radius: 10px; }
.simple-flow-step svg { width: 19px; height: 19px; }
.simple-flow-step strong { font-size: .78rem; line-height: 1.3; }
.simple-flow-step small { color: var(--muted); font-size: .7rem; line-height: 1.4; }

@media (max-width: 760px) {
    .table-scroll { margin-inline: -.35rem; width: calc(100% + .7rem); padding-inline: .35rem; }
    .finance-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .app-main > .topbar > *, .user-menu > * { min-width: 0; }
    .user-menu { flex-wrap: wrap; }
    .user-name { max-width: min(42vw, 15rem); }
    .inline-form select, .org-filter select { min-width: 0; }
    .form-grid, .form-row { grid-template-columns: minmax(0, 1fr); }
    .form-grid > *, .form-row > *, .form-stack > *, .list-filters > * { min-width: 0; max-width: 100%; }
    .form-grid input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), .form-grid select, .form-grid textarea,
    .form-stack input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), .form-stack select, .form-stack textarea,
    .list-filters input, .list-filters select { width: 100%; min-width: 0; max-width: 100%; }
    .inline-form { align-items: stretch; flex-wrap: wrap; max-width: 100%; }
    .inline-form > label, .inline-form > select, .inline-form > input { flex: 1 1 100%; min-width: 0; max-width: 100%; }
    .button, .link-button { max-width: 100%; white-space: normal; text-align: center; overflow-wrap: anywhere; }
    .status, .finance-status { max-width: 100%; white-space: normal; text-align: center; }
    .simple-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .task-guide-body { grid-template-columns: 64px minmax(0, 1fr); gap: .65rem; padding: 0 .7rem .7rem; }
    .task-guide-art { width: 64px; height: 60px; border-radius: 13px; }
    .app-main :where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]), select, textarea) { min-height: 44px; padding: .62rem .68rem; font-size: .9rem; }
    .app-main textarea { min-height: 90px; }
    .app-main .form-stack { gap: .62rem; }
}

@media (max-width: 420px) {
    .app-main > .topbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; }
    .platform-clock-group { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
    .user-menu { grid-column: 1 / -1; grid-row: 3; justify-content: flex-start; gap: .55rem .75rem; }
    .user-name { flex: 1 1 100%; max-width: none; }
    .notification-center { top: 148px; max-height: calc(100vh - 160px); }
    .finance-stats-grid { grid-template-columns: 1fr; }
    .page-nav { align-items: stretch; flex-wrap: wrap; }
    .page-nav > .button { flex: 1 1 8rem; }
    .simple-flow { grid-template-columns: minmax(0, 1fr); }
    .task-guide-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .task-guide-steps li { align-items: flex-start; border-radius: 10px; }
    .list-filters { display: grid; grid-template-columns: minmax(0, 1fr); }
    .list-filters .button, .list-filters > a { width: 100%; }
    .page-nav > * { min-width: 0; overflow-wrap: anywhere; }
    .app-main > .page { width: calc(100% - 1rem); }
    .app-main .card { padding: .85rem; }
    .app-main .task-guide-body { grid-template-columns: 1fr; }
    .app-main .task-guide-art { display: none; }
}

/* Perfis de exemplo: cards com mais contraste, profundidade e movimento sutil. */
.template-card { overflow: hidden; isolation: isolate; background: linear-gradient(135deg, #fff 45%, #f4fbfa); border-color: color-mix(in srgb, var(--brand) 14%, var(--line)); box-shadow: 0 7px 20px rgba(20, 52, 61, .045); }
.template-card::before, .content-starter-card::before { position: absolute; z-index: 0; inset: 0; pointer-events: none; background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 48%); opacity: 0; content: ""; transition: opacity .28s ease; }
.template-card::after { position: absolute; z-index: 2; top: -65%; bottom: -65%; left: -45%; width: 26%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,255,255,.64), transparent); opacity: 0; content: ""; transform: rotate(24deg); }
.template-card > *, .content-starter-card > * { position: relative; z-index: 1; }
.template-card:hover, .template-card[aria-pressed="true"] { border-color: color-mix(in srgb, var(--brand) 60%, white); box-shadow: 0 15px 34px rgba(14, 60, 65, .14), 0 0 0 3px color-mix(in srgb, var(--brand) 11%, transparent); }
.template-card:hover { transform: translateY(-3px); }
.template-card:hover::before, .template-card[aria-pressed="true"]::before, .content-starter-card:hover::before, .content-starter-card[aria-pressed="true"]::before { opacity: 1; }
.template-card:hover::after { opacity: 1; animation: template-card-shine .8s ease-out; }
@keyframes template-card-shine { from { left: -45%; } to { left: 130%; } }
.template-thumb { flex-basis: 88px; width: 88px; height: 76px; border-radius: 11px; box-shadow: 0 5px 13px rgba(12, 30, 35, .18); transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease; }
.template-card:hover .template-thumb, .template-card[aria-pressed="true"] .template-thumb { transform: translateY(-1px) scale(1.035); box-shadow: 0 9px 20px rgba(12, 30, 35, .24); }
.template-thumb img { filter: saturate(1.06); transition: transform .55s cubic-bezier(.2,.8,.2,1), filter .35s ease; }
.template-card:hover .template-thumb img { filter: saturate(1.2); transform: scale(1.09); }
.template-thumb-shade { position: absolute !important; z-index: 0 !important; inset: 0; background: linear-gradient(180deg, rgba(8,20,25,.02) 15%, rgba(8,20,25,.5)); }
.template-thumb i { z-index: 1; left: 9px; height: 3px; box-shadow: 0 1px 5px rgba(0,0,0,.24); }
.template-thumb i:nth-of-type(2) { top: 20px; }
.template-thumb i:nth-of-type(3) { top: 27px; }
.template-thumb b { z-index: 1; right: 8px; bottom: 8px; width: 18px; height: 24px; border: 2px solid rgba(255,255,255,.9); box-shadow: 0 3px 9px rgba(0,0,0,.18); }
.template-thumb-tag { position: absolute !important; z-index: 2 !important; top: 6px; right: 6px; padding: .12rem .27rem; color: white; background: rgba(8,20,25,.48); border: 1px solid rgba(255,255,255,.35); border-radius: 999px; font-size: .42rem; font-weight: 850; letter-spacing: .08em; backdrop-filter: blur(6px); }
.template-card-copy { gap: .2rem; }
.template-card-copy strong { font-size: .81rem; }
.template-card-copy small { color: color-mix(in srgb, var(--brand) 76%, var(--muted)); font-weight: 700; }
.template-card-summary { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.template-demo-actions { gap: .25rem; margin-top: .18rem; }
.template-demo-action { gap: .22rem; padding: .2rem .34rem; font-size: .56rem; box-shadow: 0 2px 5px rgba(16, 54, 58, .04); }
.mini-brand-icon { display: inline-flex; width: .76rem; height: .76rem; align-items: center; justify-content: center; }
.mini-brand-icon svg { display: block; width: 100%; height: 100%; }
.template-card-state { transition: transform .2s ease, box-shadow .2s ease; }
.template-card[aria-pressed="true"] .template-card-state { box-shadow: 0 4px 10px color-mix(in srgb, var(--brand) 24%, transparent); }
.content-starter-card { position: relative; overflow: hidden; isolation: isolate; min-height: 160px; border-radius: 15px; background: linear-gradient(145deg, #fff, #f5faf9); box-shadow: 0 6px 18px rgba(20, 52, 61, .045); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.content-starter-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--brand) 50%, white); box-shadow: 0 15px 30px rgba(14, 60, 65, .12); }
.content-starter-card[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(8,126,121,.13), 0 12px 26px rgba(14,60,65,.09); }
.starter-card-kicker { width: fit-content; padding: .16rem .38rem; color: var(--brand-dark); background: #e7f6f3; border-radius: 999px; font-size: .53rem !important; font-weight: 850; letter-spacing: .09em; }
.starter-mock-actions { gap: .24rem; margin-top: .2rem; }
.starter-mock-actions .template-demo-action { color: #24515a; background: #f5faf9; border-color: #d8e9e6; }
.starter-mock-actions .template-demo-action-primary { color: #fff; background: #087e69; border-color: #087e69; }
.device-preview-sample { scroll-behavior: smooth; scrollbar-color: color-mix(in srgb, var(--preview-primary, var(--brand)) 55%, #b8c8c8) transparent; scroll-timeline-name: --profile-preview-scroll; scroll-timeline-axis: block; }
.demo-profile-cover { min-height: 184px; background: radial-gradient(circle at 80% 18%, color-mix(in srgb, var(--preview-accent, #2e7d75) 54%, transparent), transparent 38%), var(--preview-primary, #087e79); }
.demo-profile-cover::before { position: absolute; z-index: 1; right: .8rem; bottom: .8rem; display: inline-flex; align-items: center; gap: .35rem; padding: .27rem .48rem; color: white; background: rgba(8,20,25,.48); border: 1px solid rgba(255,255,255,.38); border-radius: 999px; box-shadow: 0 5px 14px rgba(0,0,0,.14); font: 800 .48rem/1 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: .04em; content: "ROLE PARA EXPLORAR  ↓"; backdrop-filter: blur(7px); animation: scroll-cue-bob 2.2s ease-in-out infinite; }
@keyframes scroll-cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
.demo-profile-cover img { transform: translate3d(0, 0, 0) scale(1.07); transition: transform .15s linear; }
.demo-cover-badge { box-shadow: 0 5px 14px rgba(0,0,0,.14); backdrop-filter: blur(7px); }
.demo-avatar { animation: demo-avatar-float 4s ease-in-out infinite; }
@keyframes demo-avatar-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.demo-profile-body { position: relative; background: linear-gradient(180deg, var(--preview-secondary, #fff), color-mix(in srgb, var(--preview-primary, var(--brand)) 3%, var(--preview-secondary, #fff))); }
.demo-profile-kicker { width: fit-content; padding: .17rem .43rem; margin-bottom: .38rem; background: color-mix(in srgb, var(--preview-accent, var(--brand)) 12%, var(--preview-secondary, white)); border-radius: 999px; }
.demo-profile-body h4 { font-size: 1.38rem; }
.demo-action { box-shadow: 0 4px 11px rgba(15,44,48,.06); }
.demo-action:hover { transform: translateY(-2px) scale(1.015); }
.demo-action-icon svg { filter: drop-shadow(0 1px 1px rgba(0,0,0,.08)); }
.demo-action-primary { animation: demo-cta-glow 3s ease-in-out infinite; box-shadow: 0 7px 17px color-mix(in srgb, var(--preview-primary, var(--brand)) 26%, transparent); }
@keyframes demo-cta-glow { 0%, 100% { box-shadow: 0 5px 14px color-mix(in srgb, var(--preview-primary, var(--brand)) 18%, transparent); } 50% { box-shadow: 0 8px 22px color-mix(in srgb, var(--preview-primary, var(--brand)) 35%, transparent); } }
.demo-highlights { border-radius: 15px; box-shadow: 0 7px 18px rgba(18,50,56,.06); }
.demo-highlights ul { padding: 0; list-style: none; }
.demo-highlights li { display: flex; align-items: flex-start; gap: .38rem; padding: .38rem .42rem; background: color-mix(in srgb, var(--preview-secondary, white) 90%, var(--preview-primary, var(--brand))); border: 1px solid color-mix(in srgb, var(--preview-primary, var(--brand)) 10%, transparent); border-radius: 8px; }
.demo-highlights li::before { flex: 0 0 auto; color: var(--preview-primary, var(--brand)); content: "✦"; }
.demo-highlights { display: grid; gap: .42rem; }
.demo-content-card { display: grid; grid-template-columns: 1.7rem minmax(0, 1fr) auto; align-items: center; gap: .42rem; min-width: 0; padding: .48rem .52rem; color: var(--preview-text, #24343b); background: color-mix(in srgb, var(--preview-secondary, white) 94%, transparent); border: 1px solid color-mix(in srgb, var(--preview-primary, var(--brand)) 17%, transparent); border-radius: 10px; }
.demo-content-mark { display: grid; width: 1.65rem; height: 1.65rem; place-items: center; color: #fff; background: var(--preview-primary, var(--brand)); border-radius: 8px; font-size: .7rem; font-weight: 800; }
.demo-content-copy { display: grid; min-width: 0; gap: .12rem; }
.demo-content-copy strong { overflow-wrap: anywhere; font-size: .62rem; line-height: 1.2; }
.demo-content-copy small { color: color-mix(in srgb, var(--preview-text, #24343b) 68%, transparent); font-size: .49rem; line-height: 1.25; }
.demo-content-count { color: color-mix(in srgb, var(--preview-text, #24343b) 65%, transparent); font-size: .48rem; white-space: nowrap; }
.demo-content-arrow { display: grid; width: 1.2rem; height: 1.2rem; place-items: center; color: var(--preview-text, #24343b); background: color-mix(in srgb, var(--preview-primary, var(--brand)) 12%, var(--preview-secondary, white)); border-radius: 50%; font-size: .65rem; }
body.has-scroll-effects [data-scroll-reveal], .device-preview-sample.has-scroll-effects [data-scroll-reveal] { opacity: 0; transform: translate3d(0, 20px, 0) scale(.99); transition: opacity .62s ease, transform .72s cubic-bezier(.2,.75,.2,1); }
body.has-scroll-effects [data-scroll-reveal].is-visible, .device-preview-sample.has-scroll-effects [data-scroll-reveal].is-visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
body.has-scroll-effects .template-card:hover { transform: translate3d(0, -3px, 0) scale(1.005); transition-delay: 0s; }
body.has-scroll-effects .content-starter-card:hover { transform: translate3d(0, -3px, 0); transition-delay: 0s; }
@supports (animation-timeline: scroll()) {
  .device-preview-sample .demo-profile-cover img { animation: profile-preview-parallax linear both; animation-timeline: --profile-preview-scroll; animation-range: 0% 55%; }
  @keyframes profile-preview-parallax { from { transform: translate3d(0, -8px, 0) scale(1.07); } to { transform: translate3d(0, 20px, 0) scale(1.07); } }
}
@media (prefers-reduced-motion: reduce) {
  .device-preview-sample { scroll-behavior: auto !important; }
  .demo-avatar, .demo-profile-cover::before, .demo-action-primary, .device-preview-sample .demo-profile-cover img { animation: none !important; }
  .template-card, .template-thumb, .template-thumb img, .content-starter-card, .demo-action { transition: none !important; }
}

/* Interface modernizada */
:root { --ink:#153038; --muted:#566b70; --paper:#f3f7f7; --line:#d9e5e5; --brand:#087e79; --brand-dark:#075b59; --brand-soft:#e4f5f2; }
.platform-page { background:radial-gradient(circle at 80% 0%,#e6f5f1 0,transparent 30rem),var(--paper); }
.skip-link { position:fixed; z-index:100; top:-5rem; left:1rem; padding:.7rem 1rem; color:white; background:var(--brand-dark); border-radius:10px; }
.skip-link:focus { top:1rem; }
:focus-visible { outline:3px solid #36aca7 !important; outline-offset:3px; }
.app-shell { grid-template-columns:254px minmax(0,1fr); }
.sidebar { background:linear-gradient(165deg,#102c33,#153d43); }
.sidebar .brand,.topbar .brand { display:flex; align-items:center; gap:.65rem; text-decoration:none; min-width:0; }
.topbar .mobile-brand { display:none; }
.brand-symbol { display:grid; place-items:center; flex:0 0 39px; width:39px; height:39px; color:#c6fff1; background:#087e79; border-radius:12px; }
.brand-symbol svg { width:21px; height:21px; }
.brand-copy { display:grid; gap:.04rem; color:inherit !important; font-weight:800 !important; line-height:1.2; }
.brand-copy > span { color:#a7c4c7 !important; font-size:.66rem !important; font-weight:550 !important; }
.topbar .brand-copy > span { color:var(--muted) !important; }
.side-nav-group > a,.side-nav-collapsible > summary { min-height:44px; }
.side-nav-group > a[hidden],.side-nav-group[hidden],.nav-search[hidden],.nav-search-empty[hidden] { display:none !important; }
.side-nav-subheading { margin:.4rem .7rem .1rem; color:#aac6c9; font-size:.7rem; }
.nav-search { padding:.15rem .35rem; }
.nav-search input { min-height:40px; color:white; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); }
.nav-search input::placeholder { color:#b7d2d2; }
.nav-search-empty { color:#b7d2d2; font-size:.8rem; }
.app-main > .topbar { z-index:20; min-height:68px; backdrop-filter:blur(16px); }
.app-main > .page { margin-top:clamp(1.2rem,3vw,2.4rem); }
.page-heading h1 { font-size:clamp(1.65rem,3.1vw,2.5rem); }
.card,.stat-card { border-radius:18px; box-shadow:0 12px 36px rgba(20,60,68,.05); }
.stat-card { position:relative; overflow:hidden; }
.stat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--brand),#8bd4bd); }
.button,button,input,select,textarea { max-width:100%; }
.button,button[type="submit"] { min-height:44px; }
.button.primary { background:linear-gradient(135deg,#087e79,#0e6668); box-shadow:0 8px 18px rgba(8,126,121,.15); }
.button:disabled,button:disabled { cursor:not-allowed; opacity:.55; transform:none; }
.button { text-align:center; white-space:normal; overflow-wrap:anywhere; }
.table-wrap { margin-inline:0; }
td,th { white-space:normal; overflow-wrap:anywhere; }
.task-guide { display:block; padding:0; margin-bottom:1rem; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.7); }
.task-guide > summary { min-height:44px; display:flex; align-items:center; gap:.5rem; padding:.6rem .85rem; cursor:pointer; font-weight:700; list-style:none; }
.task-guide > summary::-webkit-details-marker { display:none; }
.task-guide-body { display:grid; grid-template-columns:82px minmax(0,1fr); align-items:center; gap:.9rem; min-width:0; padding:0 1rem 1rem; }
.task-guide-chevron { margin-left:auto; }
.account-menu { position:relative; }
.account-menu > summary { display:flex; align-items:center; gap:.5rem; min-height:44px; padding:.45rem .8rem; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:10px; cursor:pointer; list-style:none; font-weight:700; }
.account-menu > summary::-webkit-details-marker { display:none; }
.account-menu > summary svg { width:17px; height:17px; }
.account-panel { position:absolute; z-index:30; top:calc(100% + .55rem); right:0; display:grid; gap:.15rem; width:min(19rem,calc(100vw - 1.5rem)); padding:.6rem; background:#fff; border:1px solid var(--line); border-radius:15px; box-shadow:0 20px 45px rgba(15,40,46,.17); }
.account-panel > a,.account-panel .link-button { display:flex; align-items:center; width:100%; min-height:44px; padding:.55rem .65rem; border-radius:8px; color:var(--ink); text-align:left; text-decoration:none; font:inherit; font-size:.84rem; cursor:pointer; }
.account-panel > a:hover,.account-panel .link-button:hover { background:var(--brand-soft); }
.account-identity { display:grid; gap:.1rem; padding:.45rem .65rem .6rem; margin:0 0 .2rem; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.appointment-status-form { display:grid; gap:.35rem; min-width:10rem; }
.appointment-status-form select { width:100%; }
.appointment-actions details { margin-top:.4rem; }
.appointment-actions details > summary { min-height:44px; display:flex; align-items:center; cursor:pointer; color:var(--brand-dark); font-weight:700; }
.appointment-actions details form { display:grid; gap:.45rem; min-width:12rem; }
.appointment-actions details label { display:grid; gap:.3rem; }
.appointment-list-filters { display:flex; align-items:end; flex-wrap:wrap; gap:.65rem; margin:0 0 1rem; }
.appointment-list-filters label { display:grid; flex:1 1 12rem; gap:.3rem; }
.appointment-list-filters input,.appointment-list-filters select { width:100%; min-height:44px; }
.appointment-list-filters > span { color:var(--muted); font-size:.83rem; }
.appointment-filter-empty { padding:1rem; color:var(--muted); text-align:center; }
.finance-more { margin:-.35rem 0 1rem; }
.finance-more > summary,.finance-create > summary { min-height:44px; display:flex; align-items:center; cursor:pointer; color:var(--brand-dark); font-weight:750; }
.finance-more .stats-grid { margin:.55rem 0 0; }
.finance-create > summary { font-size:1.08rem; }
.finance-create[open] > summary { margin-bottom:.5rem; }
.mobile-nav > summary::after { content:none !important; }
@media (max-width:900px) {
  .app-main > .topbar { grid-template-columns:minmax(0,1fr) auto auto; grid-template-rows:auto; gap:.45rem; }
  .topbar .mobile-brand { display:flex; grid-column:1; grid-row:1; }
  .mobile-nav { grid-column:2; grid-row:1; }
  .user-menu { grid-column:3; grid-row:1; }
  .platform-clock-group { display:none; }
  .mobile-nav > summary { min-height:44px; }
  .mobile-nav > nav { position:fixed; top:60px; right:.75rem; width:min(23rem,calc(100vw - 1.5rem)); max-height:calc(100dvh - 75px); overscroll-behavior:contain; }
  .mobile-nav .nav-search input { color:var(--ink); background:#f3f8f7; }
  .mobile-nav .nav-search input::placeholder,.mobile-nav .side-nav-subheading,.mobile-nav .side-nav-collapsible > summary { color:var(--muted); }
}
@media (max-width:760px) {
  .task-guide-body { grid-template-columns:64px minmax(0,1fr); gap:.65rem; }
}
@media (max-width:480px) {
  .app-main > .topbar { padding-inline:.65rem; }
  .topbar .brand-symbol { width:34px; height:34px; flex-basis:34px; }
  .topbar .brand-copy { font-size:.8rem; }
  .topbar .brand-copy > span { display:none; }
  .mobile-nav > summary,.account-menu > summary { font-size:.76rem; padding-inline:.48rem; }
  .account-menu > summary svg { display:none; }
  .app-main > .page { width:calc(100% - 1rem); margin-top:1rem; }
  .card { padding:.9rem; }
  .section-heading { flex-wrap:wrap; }
  .section-heading .button { width:100%; }
  .form-grid { grid-template-columns:1fr; }
  .list-filters > div { flex-basis:100%; max-width:none; }
  .task-guide-body { grid-template-columns:minmax(0,1fr); }
  .task-guide-art { display:none; }
  .task-guide-steps { grid-template-columns:minmax(0,1fr); }
}

/* The sample profile mirrors the same compact expandable buttons used by published profiles. */
.device-preview-sample .demo-highlights { display: grid; gap: .4rem; padding: 0; margin-top: .8rem; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.device-preview-sample .demo-content-card { display: flex; align-items: center; justify-content: space-between; gap: .55rem; min-height: 35px; padding: .22rem .28rem .22rem .68rem; border-radius: 999px; }
.device-preview-sample .demo-content-copy small, .device-preview-sample .demo-content-count { display: none; }
.device-preview-sample .demo-content-mark { display: block; flex: 0 0 1.65rem; }
.device-preview-sample .demo-content-copy { display: block; flex: 1 1 auto; min-width: 0; }
.device-preview-sample .demo-content-copy strong { font-size: .62rem; }
.device-preview-sample .demo-content-arrow { flex: 0 0 1.2rem; width: 1.2rem; height: 1.2rem; font-size: .65rem; }

/* The sample profile mirrors the same compact expandable buttons used by published profiles. */
.device-preview-sample .demo-highlights { display: grid; gap: .4rem; padding: 0; margin-top: .8rem; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.device-preview-sample .demo-content-card { display: flex; align-items: center; justify-content: space-between; gap: .55rem; min-height: 35px; padding: .22rem .28rem .22rem .68rem; border-radius: 999px; }
.device-preview-sample .demo-content-copy small, .device-preview-sample .demo-content-count { display: none; }
.device-preview-sample .demo-content-mark { display: block; flex: 0 0 1.65rem; }
.device-preview-sample .demo-content-copy { display: block; flex: 1 1 auto; min-width: 0; }
.device-preview-sample .demo-content-copy strong { font-size: .62rem; }
.device-preview-sample .demo-content-arrow { flex: 0 0 1.2rem; width: 1.2rem; height: 1.2rem; font-size: .65rem; }

/* ---------------------------------------------------------------------------
   Rodapé da plataforma — obrigatório em todas as páginas, inclusive públicas.
   Mostra o nome e o endereço do serviço para quem chega por um perfil.
   --------------------------------------------------------------------------- */
.platform-footer {
    width: min(1160px, calc(100% - 2rem));
    margin: -2rem auto 2.25rem;
    display: flex;
    justify-content: center;
    gap: .35rem;
    color: var(--muted);
    font-size: .82rem;
    letter-spacing: .01em;
}
.platform-footer a { color: var(--brand-dark); font-weight: 650; text-decoration: none; }
.platform-footer a:hover { text-decoration: underline; }
.guest-page .platform-footer { margin-top: 1.25rem; }

/* Carteira e faturas: chips de ferramentas e formulários compactos. */
.chip-row { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip {
    padding: .28rem .6rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--muted);
    font-size: .78rem;
    font-weight: 650;
    cursor: pointer;
}
.chip:hover { border-color: var(--brand); color: var(--brand-dark); }
.chip-on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); }
.chip-off { background: var(--paper); }
.compact-grid { display: grid; gap: .55rem; min-width: 260px; }
.compact-grid label { font-size: .78rem; }
.compact-grid input, .compact-grid select { padding: .4rem .5rem; font-size: .85rem; }