/* SEO public catalog pages */
.search-intro { max-width: 58ch; color: var(--text-muted); margin: 0 0 14px; }
.city-discovery { margin: 24px 0; }
.city-discovery h2, .city-list-toolbar h2 { margin: 0; font-size: 1.2rem; }
.city-link-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.city-link-card { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); text-decoration: none; }
.city-link-card:hover { border-color: var(--accent); color: var(--accent-text); }
.city-link-card small { color: var(--text-muted); font-size: 12px; }
.city-landing { padding-top: 8px; }
.seo-breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 18px; color: var(--text-muted); font-size: 13px; }
.seo-breadcrumbs a { color: var(--accent-text); text-decoration: none; }
.city-hero { padding: 20px; margin: 0 0 24px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
.city-hero h1 { margin: 4px 0 10px; font-size: clamp(1.7rem, 4vw, 2.45rem); line-height: 1.18; }
.city-hero > p:not(.eyebrow) { max-width: 64ch; color: var(--text-muted); }
.city-summary { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 18px; }
.city-summary span { padding: 9px 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.city-list-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 0 14px; }
.city-list-toolbar p { margin: 4px 0 0; color: var(--text-muted); font-size: 13px; }
.city-note { margin: 26px 0 8px; padding: 16px 18px; border-left: 3px solid var(--accent); border-radius: 12px; background: var(--surface); }
.city-note p { margin: 6px 0 0; color: var(--text-muted); }
.city-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin: 24px 0; }
.city-pagination span { color: var(--text-muted); font-size: 14px; }
@media (max-width: 540px) {
  .city-hero { padding: 16px; border-radius: 16px; }
  .city-list-toolbar { align-items: flex-start; }
}

/* Web installer: cPanel File Manager + phpMyAdmin, no SSH required. */
.installer-shell { width: min(100%, 920px); margin: 18px auto 30px; padding: 0 8px; }
.installer-card { padding: clamp(20px, 4vw, 36px); border: 1px solid var(--border); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); }
.installer-kicker { margin-bottom: 10px; color: var(--accent-text); font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.installer-card h1 { margin: 0 0 10px; font-size: clamp(1.7rem, 4vw, 2.25rem); line-height: 1.15; }
.installer-lead { max-width: 68ch; margin: 0 0 20px; color: var(--text-muted); }
.installer-status { display: flex; gap: 12px; align-items: flex-start; margin: 18px 0 22px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; }
.installer-status-success { border-color: color-mix(in srgb, #168a56 35%, var(--border)); background: color-mix(in srgb, #168a56 8%, var(--surface)); }
.installer-status-neutral { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.installer-status-mark { display: grid; flex: 0 0 24px; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: var(--surface); color: var(--accent-text); font-weight: 700; }
.installer-status strong { display: block; }
.installer-status p { margin: 4px 0 0; color: var(--text-muted); }
.installer-checklist { margin: 20px 0; padding: 18px 20px; border: 1px solid var(--border); border-radius: 16px; background: color-mix(in srgb, var(--surface) 92%, var(--accent)); }
.installer-checklist h2 { margin: 0 0 10px; font-size: 1.05rem; }
.installer-checklist ol { margin: 0 0 12px; padding-left: 22px; color: var(--text); }
.installer-checklist li { margin: 7px 0; }
.installer-checklist p, .installer-footer, .installer-footnote { color: var(--text-muted); font-size: 13px; line-height: 1.6; }
.installer-checklist p { margin: 12px 0 0; }
.installer-form { margin-top: 22px; }
.installer-field { display: flex; min-width: 0; flex-direction: column; gap: 7px; }
.installer-field label { font-size: 13px; font-weight: 600; }
.installer-field input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); color: var(--text); font: inherit; }
.installer-field input:focus { border-color: var(--accent); outline: 3px solid color-mix(in srgb, var(--accent) 18%, transparent); }
.installer-field small, .installer-demo-choice small { color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.installer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.installer-field-wide { grid-column: 1 / -1; }
.installer-divider { display: flex; align-items: center; gap: 12px; margin: 25px 0 18px; color: var(--text-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.installer-divider::after { height: 1px; flex: 1; background: var(--border); content: ''; }
.installer-demo-choice { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; padding: 14px; border: 1px solid #e5b45d; border-radius: 14px; background: color-mix(in srgb, #f5bd56 11%, var(--surface)); cursor: pointer; }
.installer-demo-choice input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); }
.installer-demo-choice span { display: flex; flex-direction: column; gap: 4px; }
.installer-submit { width: 100%; margin-top: 22px; }
.installer-footnote { margin: 12px 0 0; }
.installer-error { margin: 16px 0; }
.installer-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 20px 0; }
.installer-summary div { min-width: 0; padding: 13px; border: 1px solid var(--border); border-radius: 12px; }
.installer-summary dt { color: var(--text-muted); font-size: 12px; }
.installer-summary dd { overflow-wrap: anywhere; margin: 4px 0 0; font-weight: 600; }
.installer-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.installer-warning { margin-top: 20px; padding: 15px; border-left: 3px solid #d99c2b; border-radius: 10px; background: color-mix(in srgb, #f5bd56 12%, var(--surface)); line-height: 1.6; }
.installer-footer { margin: 24px 0 0; }
@media (max-width: 600px) {
  .installer-shell { margin-top: 8px; padding: 0; }
  .installer-card { padding: 18px; border-radius: 16px; }
  .installer-grid, .installer-summary { grid-template-columns: 1fr; }
  .installer-field-wide { grid-column: auto; }
  .installer-actions { flex-direction: column; }
  .installer-actions .button { justify-content: center; }
}
.is-installer .desktop-brand-side, .is-installer .app-bottom-nav, .is-installer .header-actions { display: none !important; }
.is-installer .app-body { padding-bottom: 20px; }

/* Beta 0.2: platform billing, unit quota and rental ledger. */
.page-finance .details-panel { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.page-finance .details-panel summary { color: var(--accent-text); font-weight: 600; cursor: pointer; }
.page-finance .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.page-finance .form-grid label { display: flex; flex-direction: column; gap: 6px; color: var(--text); font-size: 13px; font-weight: 600; }
.page-finance .form-grid input, .page-finance .form-grid select, .page-finance .stack-form input, .page-finance .stack-form select, .page-finance .inline-form input, .page-finance .inline-form select { min-width: 0; min-height: 40px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); font: inherit; }
.page-finance .form-grid label:has(input[type="checkbox"]) { flex-direction: row; align-items: center; }
.page-finance .compact-form { min-width: 140px; gap: 7px; }
.page-finance .compact-form select { width: 100%; }
.page-finance .inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; min-width: 190px; }
.page-finance .inline-form input, .page-finance .inline-form select { flex: 1 1 110px; }
.page-finance td small { color: var(--text-muted); }
.page-finance .status-pill { white-space: nowrap; }
@media (max-width: 640px) {
  .page-finance .form-grid { grid-template-columns: 1fr; }
  .page-finance .inline-form { align-items: stretch; flex-direction: column; min-width: 150px; }
  .page-finance .inline-form input, .page-finance .inline-form select, .page-finance .inline-form button { width: 100%; }
}

/* Responsive application shell — desktop workspace + mobile PWA navigation. */
:root {
  --accent: var(--primary);
  --accent-text: var(--primary);
  --text-muted: var(--muted);
  --muted-text: var(--muted);
  --border: var(--line);
  --border-color: var(--line);
  --card-bg: var(--surface);
  --bg-surface: var(--surface-soft);
  --surface-muted: var(--surface-soft);
  --text-color: var(--text);
  --primary-color: var(--primary);
  --shell-sidebar-width: 264px;
}
[data-theme="dark"] {
  --accent: var(--primary);
  --accent-text: var(--primary);
  --text-muted: var(--muted);
  --muted-text: var(--muted);
  --border: var(--line);
  --border-color: var(--line);
  --card-bg: var(--surface);
  --bg-surface: var(--surface-soft);
  --surface-muted: var(--surface-soft);
  --text-color: var(--text);
  --primary-color: var(--primary);
}
.viewport-outer { min-height: 100vh; min-width: 0; }
.app-frame { display: flex; min-width: 0; min-height: 100vh; flex-direction: column; background: var(--bg); }
.app-sidebar { display: none; }
.app-header { position: sticky; z-index: 20; top: 0; display: flex; min-height: 70px; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 24px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(14px); }
.logo-container, .sidebar-brand { display: inline-flex; min-width: 0; align-items: center; gap: 9px; text-decoration: none; }
.logo-container img, .sidebar-brand img { flex: 0 0 auto; }
.logo-container .wordmark, .sidebar-brand .wordmark { font-size: 20px; letter-spacing: -.7px; }
.wordmark-bold { font-weight: 700; color: var(--text); }
.wordmark-light { font-weight: 400; color: var(--primary); }
.header-actions { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 10px; }
.header-actions .role-switcher { margin: 0; }
.role-btn, .icon-btn { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 7px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); }
.role-btn.active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.icon-btn { width: 40px; padding: 0; }
.user-greeting { max-width: 150px; overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.app-body { flex: 1 0 auto; width: 100%; min-width: 0; margin: 0 auto; padding: 24px 24px 100px; }
.screen { width: 100%; min-width: 0; }
.page-shell { width: 100%; max-width: 1560px; margin: 0 auto; padding-top: 4px; }
.narrow-shell { max-width: 900px; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 24px; }
.page-heading > div { min-width: 0; }
.page-heading h1 { margin: 0 0 6px; color: var(--text); font-size: clamp(26px, 2.4vw, 36px); line-height: 1.16; letter-spacing: -.8px; }
.page-heading p { max-width: 72ch; margin: 5px 0 0; }
.eyebrow { color: var(--primary); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.muted-text, .small-text { color: var(--muted); }
.panel-section, .stat-card, .action-card, .listing-card, .city-hero, .installer-card { min-width: 0; }
.panel-section { box-shadow: 0 5px 20px rgba(29,36,66,.035); }
.action-card { min-height: 126px; justify-content: flex-start; }
.action-card:focus-visible, .listing-card a:focus-visible, .city-link-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 45%, white); outline-offset: 3px; }
.action-card small { font-size: 11px; line-height: 1.45; }
.action-icon { display: inline-grid; width: 36px; height: 36px; place-items: center; border-radius: 12px; background: var(--primary-soft); }
.sidebar-brand { width: 100%; padding: 2px 8px 18px; border-bottom: 1px solid var(--line); }
.sidebar-context { display: flex; flex-direction: column; gap: 3px; margin: 17px 4px 11px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--primary-soft) 36%, var(--surface)); }
.sidebar-context-label, .sidebar-nav-label { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.sidebar-context strong { overflow-wrap: anywhere; font-size: 13px; line-height: 1.35; }
.sidebar-nav { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; gap: 18px; overflow-y: auto; padding: 8px 0; }
.sidebar-nav-group { display: flex; flex-direction: column; gap: 4px; }
.sidebar-nav-label { padding: 0 12px 6px; }
.sidebar-nav-item { display: flex; min-height: 42px; align-items: center; gap: 11px; padding: 9px 12px; border: 1px solid transparent; border-radius: 12px; color: var(--muted); font-size: 13px; font-weight: 500; text-decoration: none; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.sidebar-nav-item svg { flex: 0 0 auto; }
.sidebar-nav-item:hover { background: var(--surface-soft); color: var(--text); }
.sidebar-nav-item.active { border-color: color-mix(in srgb, var(--primary) 16%, var(--line)); background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.sidebar-nav-item:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 45%, white); outline-offset: 2px; }
.sidebar-footer { display: flex; min-height: 48px; align-items: center; gap: 9px; margin-top: auto; padding: 12px 8px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.sidebar-status-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.app-bottom-nav { display: none; }
.table-wrap { max-width: 100%; overflow: auto; border-radius: 12px; scrollbar-color: var(--line) transparent; }
.table-wrap table { min-width: 680px; }
.table-wrap th { padding-top: 13px; padding-bottom: 13px; background: var(--surface-soft); color: var(--muted); }
.table-wrap td { line-height: 1.45; }
.table-wrap tbody tr:hover { background: color-mix(in srgb, var(--primary-soft) 28%, transparent); }
.stack-form, .admin-form, .inline-form { min-width: 0; }
.stack-form > label, .form-grid > label { color: var(--text); font-size: 13px; font-weight: 600; }
.stack-form input, .stack-form select, .stack-form textarea, .admin-form input, .admin-form select, .search-field input, .search-field select, .search-input-box input { min-width: 0; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--text); }
.stack-form input, .stack-form select, .stack-form textarea { padding: 10px 12px; }
.stack-form input:focus-visible, .stack-form select:focus-visible, .stack-form textarea:focus-visible, .admin-form input:focus-visible, .admin-form select:focus-visible, .inline-form input:focus-visible, .inline-form select:focus-visible, .search-field input:focus-visible, .search-field select:focus-visible, .search-input-box input:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 42%, transparent); outline-offset: 2px; }
.button { min-height: 42px; }
.search-banner { padding: clamp(26px, 4vw, 48px); border-radius: 24px; }
.search-banner h1 { max-width: 760px; font-size: clamp(30px, 4.2vw, 48px); line-height: 1.12; }
.search-banner .search-intro { max-width: 66ch; font-size: 15px; }
.search-form { gap: 12px; }
.listing-grid { gap: 18px; }
.listing-card { display: flex; flex-direction: column; }
.listing-content { display: flex; flex: 1; flex-direction: column; }
.listing-bottom { margin-top: auto; }
.empty-state { max-width: 760px; margin: 36px auto; }
@media (min-width: 1040px) {
  .app-sidebar { position: fixed; z-index: 30; inset: 0 auto 0 0; display: flex; width: var(--shell-sidebar-width); flex-direction: column; padding: 22px 15px 16px; border-right: 1px solid var(--line); background: var(--surface); }
  .app-frame { width: calc(100% - var(--shell-sidebar-width)); min-height: 100vh; margin-left: var(--shell-sidebar-width); }
  .is-guest .app-frame, .is-installer .app-frame { width: 100%; margin-left: 0; }
  .app-header { min-height: 72px; padding: 10px 34px; }
  .app-header > .logo-container { display: none; }
  .is-guest .app-header > .logo-container, .is-installer .app-header > .logo-container { display: inline-flex; }
  .app-body { max-width: 1680px; padding: 30px 38px 56px; }
  .app-bottom-nav { display: none !important; }
  .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .action-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .content-columns { grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 22px; }
  .table-wrap { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow-x: auto; }
  .table-wrap table { min-width: 760px; width: 100%; }
  .panel-section { padding: 22px; }
  .page-heading { margin-bottom: 28px; }
}
@media (min-width: 1500px) {
  .app-body { padding-right: 52px; padding-left: 52px; }
  .listing-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .action-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1040px) and (max-width: 1199px) {
  :root { --shell-sidebar-width: 240px; }
  .app-sidebar { padding-right: 12px; padding-left: 12px; }
  .app-body { padding-right: 24px; padding-left: 24px; }
  .sidebar-nav-item { gap: 8px; padding-right: 8px; padding-left: 9px; font-size: 12px; }
  .action-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1039px) {
  .app-header { min-height: 68px; }
  .app-body { padding: 22px 22px 104px; }
  .is-guest .app-body { padding-bottom: 32px; }
  .app-bottom-nav { position: fixed; z-index: 40; inset: auto 0 0; display: flex; min-height: calc(66px + env(safe-area-inset-bottom)); justify-content: space-around; gap: 2px; padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 96%, transparent); backdrop-filter: blur(18px); }
  .nav-item { display: flex; min-width: 0; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 5px 3px; border-radius: 11px; color: var(--muted); font-size: 10px; font-weight: 500; text-align: center; text-decoration: none; }
  .nav-item svg { flex: 0 0 auto; }
  .nav-item.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
  .nav-item:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 42%, transparent); outline-offset: -1px; }
  .table-wrap { margin-bottom: 2px; }
}
@media (max-width: 760px) {
  body { font-size: 14px; }
  .app-header { min-height: 62px; gap: 8px; padding: 8px 14px; }
  .logo-container .wordmark { font-size: 18px; }
  .logo-container img { width: 30px; height: 30px; }
  .header-actions { gap: 7px; }
  .header-actions .role-switcher { max-width: 43vw; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .header-actions .role-switcher::-webkit-scrollbar { display: none; }
  .role-btn { min-height: 34px; flex: 0 0 auto; padding: 6px 9px; font-size: 11px; }
  .header-actions .icon-btn { width: 36px; min-height: 36px; }
  .user-greeting { display: none; }
  .app-body { padding: 18px 14px 96px; }
  .page-heading { align-items: flex-start; gap: 12px; margin-bottom: 18px; }
  .page-heading h1 { font-size: clamp(24px, 6vw, 30px); }
  .page-heading > .button, .page-heading > a.button { flex: 0 0 auto; }
  .panel-section { padding: 16px; margin-bottom: 14px; }
  .stat-grid { gap: 9px; }
  .stat-card { min-height: 112px; padding: 13px; }
  .action-grid { gap: 9px; }
  .action-card { min-height: 112px; padding: 13px; }
  .content-columns { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .listing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .listing-art { height: 145px; }
  .table-wrap table { min-width: 680px; }
  .notice, .flash { overflow-wrap: anywhere; }
}
@media (max-width: 540px) {
  .header-actions .compact-auth { display: none; }
  .app-body { padding-right: 12px; padding-left: 12px; }
  .page-heading { flex-direction: column; }
  .page-heading > a.button, .page-heading > .button { align-self: flex-start; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .listing-grid { grid-template-columns: 1fr; }
  .listing-art { height: 185px; }
  .search-banner { padding: 23px 18px; border-radius: 18px; }
  .search-banner h1 { font-size: 29px; }
  .app-bottom-nav { padding-right: 4px; padding-left: 4px; }
  .nav-item { font-size: 9px; }
  .nav-item svg { width: 19px; height: 19px; }
}
@media (prefers-reduced-motion: reduce) { .sidebar-nav-item, .action-card, .listing-card { transition: none !important; } }

/* Keyboard bypass and strong visible focus. */
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; transform: translateY(-160%); padding: 11px 15px; border-radius: 11px; background: var(--primary); color: #fff; font-size: 14px; font-weight: 600; box-shadow: var(--shadow); }
.skip-link:focus, .skip-link:focus-visible { transform: translateY(0); outline: 3px solid #fff; outline-offset: 2px; }

/* Password Visibility Toggle (Beta 1.6.1.1) */
.password-input-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.password-input-wrapper input {
  width: 100% !important;
  padding-right: 42px !important;
  box-sizing: border-box !important;
}

.password-toggle-btn {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #64748b !important;
  border-radius: 6px !important;
  transition: color 0.15s ease, background-color 0.15s ease !important;
  z-index: 5 !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.password-toggle-btn:hover {
  color: #0f172a !important;
  background-color: rgba(0, 0, 0, 0.06) !important;
}

.password-toggle-btn.is-visible {
  color: #009ee3 !important;
}

[data-theme="dark"] .password-toggle-btn {
  color: #94a3b8 !important;
}

[data-theme="dark"] .password-toggle-btn:hover {
  color: #f8fafc !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .password-toggle-btn.is-visible {
  color: #38bdf8 !important;
}

.password-toggle-btn:focus-visible {
  outline: 2px solid #009ee3 !important;
  outline-offset: 1px !important;
}

/* Modern App Modal (Desktop & Mobile) */
.app-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  overflow-y: auto;
}

.app-modal-dialog {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  width: 100%;
  max-width: 580px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
  animation: modalScaleIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalScaleIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.app-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}

.app-modal-header h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}

.app-modal-close {
  background: transparent;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color 0.15s, background-color 0.15s;
}

.app-modal-close:hover {
  color: var(--red);
  background: var(--red-soft);
}

.app-modal-body {
  padding: 20px;
  overflow-y: auto;
}

.app-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
}

/* Badge Amenities and Grids for Responsive Desktop Usability */
.badge-amenity {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--muted);
  border: 1px solid var(--line);
}

.finance-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.balanced-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 20px;
}

@media (min-width: 1040px) {
  .full-width-section {
    width: 100%;
  }
  .data-table th, .data-table td {
    padding: 14px 16px;
  }
  .data-table tr:hover td {
    background-color: rgba(79, 70, 229, 0.02);
  }
}

[data-theme="dark"] .app-modal-dialog {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55);
}
[data-theme="dark"] .app-modal-header,
[data-theme="dark"] .app-modal-footer {
  background: var(--surface-soft);
  border-color: var(--line);
}
[data-theme="dark"] .badge-amenity {
  background: var(--surface-soft);
  border-color: var(--line);
  color: var(--muted);
}

/* ==========================================================================
   Beta 1.7 Unified Mobile PWA + Multi-Column Desktop Design System
   Ensures zero horizontal overflow on mobile (<1040px) and dense, ergonomic
   multi-column workspace for landlords with 15-30+ kitnets on Desktop (>=1040px).
   ========================================================================== */

html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

.app-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(29, 36, 66, 0.04);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}
.panel-header h1 {
  margin: 4px 0 6px;
  font-size: clamp(24px, 2.5vw, 34px);
  line-height: 1.18;
  letter-spacing: -0.7px;
}

/* Alerts & Notices */
.alert {
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--text);
  margin: 14px 0;
}
.alert-success { background: var(--green-soft); color: #126c53; border-color: #a7f3d0; }
.alert-danger, .alert-error { background: var(--red-soft); color: #9e303a; border-color: #fecaca; }
.alert-info { background: var(--primary-soft); color: #3730a3; border-color: #c7d2fe; }
.alert-warning { background: var(--amber-soft); color: #7d5412; border-color: #fde68a; }

/* Badges & Status Pills */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--surface-soft);
  color: var(--text);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.badge-mint {
  background: var(--green-soft);
  color: #065f46;
  border-color: #a7f3d0;
}
.badge-verified {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 25%, var(--line));
}
.status-info { background: #e0f2fe; color: #0369a1; }
.status-warning { background: var(--amber-soft); color: #805510; }

/* Search Banner, Chips & Toolbar (Home / Catalog) */
.location-query-wrap { margin-bottom: 14px; }
.location-query-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line));
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.location-query-pill:hover {
  background: color-mix(in srgb, var(--primary) 18%, var(--surface));
  border-color: var(--primary);
  transform: translateY(-1px);
}
.location-query-pill strong { font-weight: 700; color: var(--primary); }
.location-query-edit {
  font-size: 11px;
  color: var(--muted);
  margin-left: 4px;
}
[data-theme="dark"] .location-query-pill {
  background: #1e293b;
  border-color: #334155;
  color: #f1f5f9;
}
[data-theme="dark"] .location-query-pill:hover {
  background: #273549;
  border-color: #60a5fa;
}
[data-theme="dark"] .location-query-pill strong { color: #38bdf8; }
[data-theme="dark"] .location-query-edit { color: #94a3b8; }

.search-banner {
  background: radial-gradient(circle at 85% 20%, rgba(79,70,229,.15), transparent 32%),
              linear-gradient(120deg, var(--primary-soft) 0%, var(--surface) 62%, var(--green-soft) 100%);
  border: 1px solid var(--line);
  margin-bottom: 16px;
}
[data-theme="dark"] .search-banner {
  background: radial-gradient(circle at 85% 20%, rgba(139,133,255,.14), transparent 32%),
              linear-gradient(120deg, #1e1b4b 0%, #0f172a 62%, #064e3b 100%);
  border-color: #334155;
}
[data-theme="dark"] .search-banner h1 { color: #f8fafc; }
[data-theme="dark"] .search-banner .search-intro { color: #cbd5e1; }

.search-input-box {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 680px;
  margin-top: 12px;
}
.search-icon-inside {
  position: absolute;
  left: 14px;
  display: inline-flex;
  color: var(--muted);
  pointer-events: none;
}
.search-input-box input {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px 10px 42px;
  font-size: 14px;
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}
[data-theme="dark"] .search-input-box input {
  background: var(--surface);
  color: var(--text);
  border: 1px solid #334155;
}
[data-theme="dark"] .search-input-box input:focus {
  border-color: #818cf8;
  outline: 2px solid rgba(129, 140, 248, 0.4);
}
[data-theme="dark"] .search-field select,
[data-theme="dark"] .search-field input {
  background: var(--surface);
  color: var(--text);
  border: 1px solid #334155;
}
.chips-scroller {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 12px;
  scrollbar-width: none;
}
.chips-scroller::-webkit-scrollbar { display: none; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.filter-chip input { accent-color: var(--primary); margin: 0; }
.filter-chip.active, .filter-chip:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
}
[data-theme="dark"] .filter-chip {
  background: var(--surface);
  color: #e2e8f0;
  border-color: #334155;
}
[data-theme="dark"] .filter-chip.active,
[data-theme="dark"] .filter-chip:has(input:checked) {
  background: #312e81;
  border-color: #818cf8;
  color: #ffffff;
}
.search-toolbar {
  margin: 18px 0 14px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}

/* Property Grid — Responsive Mobile to Desktop */
.property-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 18px;
}
.finance-action-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
}
.balanced-columns {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

/* Profile Page */
.profile-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.profile-avatar {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: var(--primary);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.profile-identity {
  flex: 1 1 200px;
  min-width: 0;
}
.profile-identity h2 { margin: 0 0 4px; font-size: 20px; }
.profile-identity p { margin: 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.profile-identity small { color: var(--primary); font-weight: 600; font-size: 11px; }
.profile-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.profile-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 12px;
}
.profile-logout { margin-top: 18px; }

/* Chat Hash Screen */
.chat-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}
.chat-heading > div {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.chat-heading strong { font-size: 14px; }
.chat-heading small { font-size: 11px; color: var(--muted); }
.chat-unit-avatar {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
  font-size: 18px;
  flex-shrink: 0;
}
.hash-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px dashed var(--line);
}
.hash-copy {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 10px;
  color: var(--muted);
}
.hash-copy:hover { border-color: var(--primary); color: var(--primary); }
.hash-disclaimer {
  margin-top: 14px;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}

/* SOS & Work Orders */
.sos-contact-units {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 16px;
  margin-top: 14px;
}
.sos-contact-unit {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
}
.sos-contact-unit-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.sos-contact-unit-heading h3 { margin: 2px 0 0; font-size: 16px; }
.sos-contact-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sos-contact-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  flex-wrap: wrap;
}
.sos-contact-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sos-contact-category {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--primary);
}
.sos-contact-management {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.sos-contact-management summary {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
}
.sos-contact-edit-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}
.sos-contact-edit-card {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.sos-contact-edit-card.is-inactive { opacity: 0.72; }
.sos-contact-state { margin: 0 0 6px; font-size: 11px; font-weight: 600; color: var(--muted); }
.location-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
}
.sos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 10px;
  margin-top: 6px;
}
.sos-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  transition: transform 0.15s, border-color 0.15s;
}
.sos-card:hover {
  border-color: var(--red);
  transform: translateY(-2px);
}
.sos-card-urgent {
  border-color: #fca5a5;
  background: var(--red-soft);
}
.sos-card-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--red-soft);
  color: var(--red);
  font-weight: 700;
  font-size: 13px;
}
.sos-card strong { font-size: 13px; }
.sos-card small { font-size: 11px; color: var(--muted); }
.timeline-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
}
.timeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.timeline-item {
  position: relative;
  padding-left: 16px;
  border-left: 2px solid var(--line);
}
.timeline-item-sos { border-left-color: var(--red); }

@media (max-width: 680px) {
  .profile-card { flex-direction: column; align-items: flex-start; }
  .sos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}




/* ==========================================================================
   Beta 1.7.1 · Nova identidade visual kitnets.app
   Logomarca oficial (pino + casa), tipografia de marca Sora e UI Poppins.
   Camada exclusivamente visual: nenhuma regra funcional alterada.
   ========================================================================== */
:root {
  --font-brand: "Sora", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-ui: "Poppins", "Montserrat", system-ui, sans-serif;
  --brand-indigo: #4f46ef;
  --brand-mint: #8fe3d6;
}
html, body { font-family: var(--font-ui); }

/* Wordmark: "kitnets" Sora 700 + ".app" Sora 300, ambos no índigo da marca */
.wordmark { font-family: var(--font-brand); line-height: 1; white-space: nowrap; }
.logo-container .wordmark, .sidebar-brand .wordmark { font-size: 21px; letter-spacing: -.6px; }
.wordmark .wordmark-bold { font-family: var(--font-brand); font-weight: 700; color: var(--brand-indigo); }
.wordmark .wordmark-light { font-family: var(--font-brand); font-weight: 300; color: var(--brand-indigo); letter-spacing: -.2px; }
[data-theme="dark"] .wordmark .wordmark-bold, [data-theme="dark"] .wordmark .wordmark-light { color: #8b85ff; }
.brand-mark { display: block; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(79, 70, 239, .18)); }
.logo-container, .sidebar-brand { gap: 8px; }

/* Títulos com tipografia de marca */
.search-banner h1, .page-heading h1, .plans-hero h1 { font-family: var(--font-brand); font-weight: 700; letter-spacing: -.8px; }

/* Cabeçalho: link "Planos e Testes" */
.header-plans-link { font-weight: 600; color: var(--brand-indigo); border-color: var(--brand-indigo); white-space: nowrap; }
.header-plans-link:hover { background: var(--primary-soft); }
[data-theme="dark"] .header-plans-link { color: #8b85ff; border-color: #8b85ff; }

/* "Salvar buscas" → oferta de alertas grátis */
.save-search-offer { position: relative; display: inline-block; }
.save-search-offer > summary { list-style: none; cursor: pointer; color: #009ee3; border-color: #009ee3; font-weight: 600; user-select: none; }
.save-search-offer > summary::-webkit-details-marker { display: none; }
.save-search-offer[open] > summary { background: rgba(0, 158, 227, .08); }
.save-search-popover {
  position: absolute; z-index: 25; top: calc(100% + 8px); right: 0;
  display: flex; width: min(320px, calc(100vw - 28px)); flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 16px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface); color: var(--text); box-shadow: 0 18px 40px rgba(29, 36, 66, .16);
  animation: kitnetsPop .16s ease-out;
}
.save-search-popover strong { font-family: var(--font-brand); font-size: 15px; line-height: 1.3; }
.save-search-popover p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.save-search-popover .button { width: 100%; justify-content: center; margin-top: 4px; }
.save-search-badge { display: inline-flex; padding: 3px 10px; border-radius: 999px; background: var(--green-soft, #e6f7f1); color: #0f8a66; font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
[data-theme="dark"] .save-search-badge { color: #9ce5ca; }
.save-search-login { align-self: center; color: var(--primary); font-size: 12px; font-weight: 600; }
@keyframes kitnetsPop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  .logo-container .wordmark { font-size: 18px; }
  .logo-container img { width: 30px; height: 30px; }
  .header-plans-link { padding-right: 10px; padding-left: 10px; font-size: 12px; }
  .save-search-popover { position: static; margin-top: 8px; box-shadow: 0 10px 26px rgba(29, 36, 66, .12); }
}
@media (max-width: 420px) {
  .logo-container .wordmark { font-size: 16px; }
  .logo-container img { width: 26px; height: 26px; }
  .app-header > .logo-container { flex-shrink: 0; gap: 6px; }
  .app-header { gap: 6px; }
  .header-actions { gap: 5px; }
  .header-actions .icon-btn { width: 34px; min-height: 34px; padding: 6px; }
  .header-plans-link { padding-right: 8px; padding-left: 8px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .save-search-popover { animation: none; } }
/* ===== Beta 1.8 — conta, LGPD, dados da conta e assinatura ===== */
.notice-error{background:var(--red-soft);color:#9e303a}
.terms-consent,.checkbox-line,.stack-form>label.checkbox-line,.stack-form>label.terms-consent{display:flex;flex-direction:row;align-items:flex-start;gap:8px;font-size:13px;font-weight:500;color:var(--text)}
.terms-consent input,.checkbox-line input{width:auto;min-height:0;margin-top:3px;accent-color:var(--primary)}
.terms-consent a,.legal-page a,.app-legal-footer a{color:var(--primary);text-decoration:underline}
.delete-inline{display:inline-block;position:relative}
.delete-inline>summary{list-style:none;cursor:pointer;color:var(--red);border-color:var(--red-soft)}
.delete-inline>summary::-webkit-details-marker{display:none}
.delete-inline[open]>form{position:absolute;z-index:30;right:0;top:calc(100% + 6px);width:min(320px,80vw);padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.danger-zone{border-color:var(--red-soft)}
.danger-zone h2{color:var(--red)}
.app-legal-footer{padding:18px 16px 96px;text-align:center;font-size:12px;color:var(--muted)}
.legal-page h2{font-size:18px;margin:26px 0 8px}
.legal-page li{margin:6px 0}
.recovery-codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;padding:0;list-style:none}
.recovery-codes code,.totp-secret{display:inline-block;padding:8px 10px;border-radius:8px;background:var(--surface-soft);font-size:15px;letter-spacing:1px}
.profile-password-fields{border:1px solid var(--line);border-radius:12px;padding:12px}
.profile-password-fields legend{font-size:12px;font-weight:600;padding:0 6px}
.import-errors{color:var(--red);font-size:12px}
@media (min-width:1040px){.app-legal-footer{padding-bottom:24px}}

/* ===== Beta 1.8.5 — CEP e endereços NOME.kitnets.app ===== */
.address-fields{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.address-fields>label{display:flex;flex-direction:column;gap:6px}
.address-cep{grid-column:span 2}.address-street{grid-column:span 4}.address-number{grid-column:span 1}
.address-complement{grid-column:span 2}.address-neighborhood{grid-column:span 3}.address-city{grid-column:span 4}.address-state{grid-column:span 2}
@media (max-width:640px){.address-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.address-fields>label{grid-column:span 2}.address-number,.address-state{grid-column:span 1}}
.slug-input{display:flex;align-items:center;gap:4px}
.slug-input input{flex:1;min-width:0}
.slug-input span{font-weight:600;color:var(--muted);white-space:nowrap}
.slug-taken{color:var(--red)!important}
.slug-link{font-size:0.8rem;color:var(--primary);text-decoration:underline}
.building-jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.building-group{margin:0 0 28px;scroll-margin-top:80px}
.building-group-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.building-group-head h3{margin:0;font-size:1.1rem}

/* ===== Beta 1.8.6 — aviso de cookies (Google Analytics) ===== */
.consent-banner{position:fixed;left:16px;right:16px;bottom:84px;z-index:60;max-width:640px;margin:0 auto;padding:14px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:13px}
.consent-banner[hidden]{display:none}
.consent-banner p{margin:0;flex:1 1 260px}
.consent-banner a{color:var(--primary);text-decoration:underline}
.consent-actions{display:flex;gap:8px}
@media (min-width:1040px){.consent-banner{bottom:20px}}

/* ===== Beta 1.9 — Gestão de kitnets responsiva (cards no celular), câmera e menu Master ===== */
.unit-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 14px}
.unit-search{flex:1 1 240px;min-width:0;min-height:42px}
.unit-filter-chips{display:flex;flex-wrap:wrap;gap:6px}
.unit-chip{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.unit-chip b{display:inline-block;min-width:22px;padding:1px 6px;border-radius:999px;background:var(--surface-soft);font-size:11px;text-align:center}
.unit-chip.is-active{border-color:var(--primary);background:var(--primary-soft);color:var(--primary)}
.unit-data-row.is-filtered-out{display:none!important}
.unit-main{display:flex;align-items:center;gap:12px}
.unit-thumb{width:72px;height:48px;object-fit:cover;border-radius:8px;border:1px solid var(--line);flex-shrink:0;background:#f8fafc}
.unit-main-text{min-width:0}
.unit-main-text strong{display:block;font-size:.95rem;color:var(--text)}
.unit-main-text small{display:block}
.unit-cell-actions{text-align:right;white-space:nowrap}
.unit-actions{display:inline-flex;gap:6px;justify-content:flex-end;align-items:center}
.unit-drawer-row{display:none}
.unit-drawer-row.is-open{display:table-row}
.unit-drawer-cell{padding:0!important;background:var(--surface);border-bottom:3px solid var(--line);box-shadow:inset 0 3px 8px rgba(0,0,0,.05)}
.photo-source{display:flex;flex-direction:column;gap:8px;min-width:0}
.photo-source-label{font-size:.875rem;font-weight:600}
.photo-source-buttons{display:flex;flex-wrap:wrap;gap:8px}
.photo-source-buttons .button{flex:1 1 180px;min-height:46px;justify-content:center}
.photo-camera-btn{background:#059669!important;border-color:#059669!important}
.visually-hidden-input{position:absolute!important;width:1px!important;min-height:0!important;height:1px!important;padding:0!important;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;opacity:0}
.photo-preview img{display:block;max-width:100%;max-height:220px;border-radius:10px;border:1px solid var(--line);object-fit:cover}

@media (max-width:760px){
  /* A tabela vira uma lista de cards: nada de rolagem horizontal */
  .units-table-wrap{overflow:visible;border:0;background:transparent}
  .units-table-wrap table.units-table{min-width:0;width:100%;border-collapse:separate}
  .units-table thead{display:none}
  .units-table,.units-table tbody{display:block;width:100%}
  .units-table tr.unit-data-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 12px;margin:0 0 12px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 4px 14px rgba(29,36,66,.05)}
  .units-table tr.unit-data-row:hover{background:var(--surface)}
  .units-table tr.unit-data-row.is-expanded{margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;border-color:var(--primary)}
  .units-table tr.unit-data-row>td{display:block;min-width:0;padding:0!important;border:0!important;text-align:left}
  .units-table td[data-label]::before{content:attr(data-label);display:block;margin-bottom:3px;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
  .units-table .unit-cell-main,.units-table .unit-cell-owners,.units-table .unit-cell-catalog,.units-table .unit-cell-actions{grid-column:1/-1}
  .units-table .unit-cell-main{padding-bottom:10px!important;border-bottom:1px solid var(--line)!important}
  .unit-thumb{width:84px;height:62px}
  .unit-main-text strong{font-size:1rem;overflow-wrap:anywhere}
  .units-table .unit-cell-actions{white-space:normal;padding-top:10px!important;border-top:1px solid var(--line)!important}
  .unit-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));width:100%;gap:8px}
  .unit-actions .button,.unit-actions form,.unit-actions form .button{width:100%;min-height:44px;justify-content:center}
  .unit-actions form{margin:0}
  .units-table tr.unit-drawer-row.is-open{display:block;margin:0 0 12px;border:1px solid var(--primary);border-top:0;border-radius:0 0 14px 14px;overflow:hidden}
  .units-table .unit-drawer-cell{display:block;width:100%;border-bottom:0}
  .units-table .drawer-pane{padding:14px!important;border-left-width:4px!important}
  .units-table .drawer-pane h3{font-size:1rem!important;overflow-wrap:anywhere}
  .units-table .drawer-pane form .button{min-height:44px}
  .units-table .drawer-pane input[type="date"],.units-table .drawer-pane input[type="number"]{max-width:100%}
  .unit-toolbar{position:sticky;top:0;z-index:5;padding:8px 0;background:var(--bg,var(--surface))}
  .unit-filter-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:100%}
  .unit-filter-chips::-webkit-scrollbar{display:none}
  .unit-chip{flex:0 0 auto}
}

.unit-actions details{position:relative}
@media (max-width:760px){.unit-actions details,.unit-actions details>summary{width:100%}.unit-actions details>summary{min-height:44px}}

/* Saúde e backups (Master) */
.health-list{display:grid;gap:10px}
.health-item{padding:12px 14px;border:1px solid var(--line);border-left-width:4px;border-radius:12px;background:var(--surface)}
.health-item.is-ok{border-left-color:var(--green)}
.health-item.is-warning{border-left-color:var(--amber)}
.health-item-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.health-item p{margin:6px 0 0;color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.health-warnings{margin:6px 0 0;padding-left:18px}
.env-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:8px}
.env-key{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:13px}
.env-key code{font-weight:700;overflow-wrap:anywhere}
.env-missing,.env-placeholder{border-color:var(--amber);background:var(--amber-soft)}
.env-ok span{color:var(--green)}
.health-test-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:16px}
.health-test-form label{display:flex;flex-direction:column;gap:6px;flex:1 1 260px;font-size:12px;font-weight:600;color:var(--muted)}
.health-test-form input{min-height:44px;border:1px solid var(--line);border-radius:11px;padding:10px 12px;background:var(--surface);color:var(--text)}

/* Suporte auditado (Master) */
.support-panel{margin-top:24px;scroll-margin-top:80px}
.support-subtitle{margin:14px 0 8px;font-size:.95rem}
.support-sessions{display:grid;gap:8px;margin-bottom:14px}
.support-session{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft)}
.support-session small{display:block}
.support-start-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:12px;align-items:end}

/* ===== Beta 1.9.1 — Pessoas e convites em cards (sem rolagem lateral) ===== */
.members-columns{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
@media (max-width:1100px){.members-columns{grid-template-columns:minmax(0,1fr)}}
.member-list{display:grid;gap:10px}
.member-card{min-width:0;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.member-card[hidden]{display:none}
.member-card.is-editing{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent)}
.member-card-head{display:flex;align-items:flex-start;gap:12px}
.member-avatar{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:50%;background:var(--primary-soft);color:var(--primary);font-weight:700;font-size:14px}
.member-card-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.member-card-info strong{font-size:15px;overflow-wrap:anywhere}
.member-contact{color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.member-contact:hover{color:var(--primary)}
.member-roles{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.member-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.member-actions .button,.member-actions details>summary{min-height:40px}
.member-edit{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.member-edit[hidden]{display:none}
.member-edit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:10px}
.member-role-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:6px;margin:0;padding:10px;border:1px solid var(--line);border-radius:12px}
.member-role-picker legend{padding:0 6px;font-size:12px;font-weight:600;color:var(--muted)}
.member-role-option{display:flex;align-items:center;gap:8px;min-height:40px;padding:6px 8px;border-radius:10px;cursor:pointer;font-size:13px}
.member-role-option:hover{background:var(--surface-soft)}
.member-role-option input{width:18px;height:18px;flex:none;accent-color:var(--primary)}
.member-edit-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
@media (max-width:540px){
  .member-card-head{flex-wrap:wrap}
  .member-card-head .status-pill{margin-left:54px}
  .member-actions>*{flex:1 1 140px}
  .member-actions .button,.member-actions details,.member-actions details>summary{width:100%}
  .member-edit-actions .button{flex:1 1 140px}
}

/* Tabelas do painel em cards no celular (classe aplicada pelo app.js) */
@media (max-width:760px){
  .table-wrap.table-stack-wrap{overflow:visible;border:0;background:transparent}
  .table-wrap table.table-stack{min-width:0!important;width:100%}
  table.table-stack thead{display:none}
  table.table-stack,table.table-stack tbody,table.table-stack tr,table.table-stack td{display:block;width:100%}
  table.table-stack tbody tr{margin:0 0 10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
  table.table-stack tbody tr[style*="none"]{display:none}
  table.table-stack tbody tr:hover{background:var(--surface)}
  table.table-stack td{min-width:0!important;padding:6px 0!important;border:0!important;text-align:left!important;white-space:normal!important;overflow-wrap:anywhere}
  table.table-stack td[data-label]::before{content:attr(data-label);display:block;margin-bottom:2px;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
  table.table-stack td:empty{display:none}
  table.table-stack td .button,table.table-stack td form{max-width:100%}
  table.table-stack td>div[style*="inline-flex"],table.table-stack td>div[style*="display:flex"]{flex-wrap:wrap!important;justify-content:flex-start!important}
}

/* Todos os usuários (Master) */
.users-filter-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 12px}
.users-filter-search{flex:1 1 260px;min-width:0}
.users-filter-search input,.users-filter-status select{width:100%;min-height:44px;border:1px solid var(--line);border-radius:11px;padding:10px 12px;background:var(--surface);color:var(--text)}
.users-filter-status{flex:0 1 220px}
.users-type-chips{margin:0 0 12px}
.users-type-chips .unit-chip{text-decoration:none}
.user-badge-platform{background:var(--primary-soft);color:var(--primary)}
.user-badge-visitor{background:var(--amber-soft);color:#805510}
.user-links{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:4px;font-size:13px}
.user-links a{color:var(--primary);font-weight:600}
.users-pagination{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:16px}
@media (max-width:760px){.users-type-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.users-filter-status{flex:1 1 100%}}

/* Segurança da conta (2FA) */
.security-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:10px;margin:0 0 16px}
.security-factor{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.security-factor>span{font-size:24px}
.security-factor strong{display:block}
.security-factor small{color:var(--muted)}
.security-factor.is-on{border-color:var(--green);background:var(--green-soft)}
.security-factor.is-on small{color:var(--green);font-weight:600}

/* Botão "Instalar app" */
.install-app-btn[hidden]{display:none!important}
.install-help{margin-top:10px;padding:12px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--line);color:var(--text);font-size:13px;text-align:left}
.install-help[hidden]{display:none}
.install-help ol{margin:6px 0 0;padding-left:20px}

/* Menu "Mais" da barra inferior (Master no celular) */
.nav-more{position:relative;display:flex;flex:1 1 0;min-width:0}
.nav-more>summary{list-style:none;cursor:pointer;width:100%}
.nav-more>summary::-webkit-details-marker{display:none}
.nav-more-menu{position:absolute;right:0;bottom:calc(100% + 10px);min-width:220px;padding:8px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:2px}
.nav-more-menu a{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border-radius:10px;color:var(--text);font-size:14px;font-weight:500;text-decoration:none}
.nav-more-menu a.active,.nav-more-menu a:hover{background:var(--primary-soft);color:var(--primary)}
/* 1.9.2: pagamento imediato do plano, conta Mercado Pago do proprietário e troca de plano */
.notice-success{border-left:4px solid #168a56;background:color-mix(in srgb,#168a56 9%,var(--surface));color:var(--text)}
.plan-actions{display:flex;flex-direction:column;gap:8px}
.plan-actions .button,.plan-actions form,.plan-actions form .button{width:100%;text-align:center}
.plan-submit{display:flex;flex-direction:column;gap:10px}
.checkout-card{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:clamp(18px,4vw,32px)}
.checkout-summary p{margin:2px 0}
.checkout-amount{font-size:2rem;font-weight:800}
.checkout-steps{max-width:460px;margin:0;padding-left:20px;text-align:left;line-height:1.5}
.checkout-qr{width:220px;max-width:70vw;height:auto;padding:10px;border:1px solid var(--border);border-radius:14px;background:#fff}
.checkout-code{width:100%;max-width:480px;text-align:left}
.checkout-code textarea{width:100%;font-family:ui-monospace,monospace;font-size:.8rem;word-break:break-all;resize:none}
.checkout-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.checkout-actions form{margin:0}
.mp-status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:18px}
.mp-status{padding:14px 16px;border-left:4px solid var(--border)}
.mp-status p{margin:2px 0}
.mp-status.is-ok{border-left-color:#168a56}
.mp-status.is-warn{border-left-color:#F59E0B}
.mp-webhook-url{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 14px;border:1px dashed #009EE3;border-radius:12px}
.mp-webhook-url code{flex:1 1 240px;min-width:0;word-break:break-all;font-size:.85rem}
.mp-form-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.mp-form-actions form{margin:0}
.mp-guide ol{padding-left:20px;line-height:1.55}
.mp-guide li{margin-bottom:10px}
.plan-switch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.plan-switch{padding:14px 16px}
.plan-switch p{margin:2px 0}
.plan-switch.is-current{border-color:var(--primary)}
.plan-switch-price{font-size:1.3rem;font-weight:800}
.plan-switch form{margin-top:8px}