:root {
    --apple-bg: #f4f7f5;
    --apple-surface: rgba(255, 255, 255, 0.78);
    --apple-surface-solid: #ffffff;
    --apple-text: #17231f;
    --apple-muted: #64736d;
    --apple-line: rgba(34, 59, 49, 0.14);
    --apple-accent: #087f5b;
    --apple-accent-strong: #056044;
    --apple-accent-soft: rgba(8, 127, 91, 0.1);
    --apple-danger: #b42318;
    --apple-on-accent: #ffffff;
    --apple-shadow: 0 18px 45px rgba(22, 44, 35, 0.09);
    --apple-shadow-soft: 0 5px 20px rgba(22, 44, 35, 0.07);
    --apple-radius: 16px;
    --apple-ease: cubic-bezier(.22, .8, .24, 1);
    color-scheme: light;
}

html[data-theme="dark"] {
    --apple-bg: #101613;
    --apple-surface: rgba(25, 35, 30, 0.82);
    --apple-surface-solid: #19221e;
    --apple-text: #edf5f0;
    --apple-muted: #a5b5ad;
    --apple-line: rgba(220, 239, 228, 0.14);
    --apple-accent: #54c99b;
    --apple-accent-strong: #8be1ba;
    --apple-accent-soft: rgba(84, 201, 155, 0.14);
    --apple-on-accent: #06281c;
    --apple-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
    --apple-shadow-soft: 0 5px 20px rgba(0, 0, 0, 0.2);
    color-scheme: dark;
}

html {
    background: var(--apple-bg);
    scroll-behavior: smooth;
}

body {
    background-color: var(--apple-bg) !important;
    color: var(--apple-text) !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 8% 0%, rgba(8, 127, 91, .11), transparent 32%),
        radial-gradient(circle at 94% 88%, rgba(26, 115, 232, .06), transparent 30%);
}

*, *::before, *::after { box-sizing: border-box; }

/* Guarantee the `hidden` attribute always hides an element, regardless of
   any equal-specificity `display` rule a page defines for that same class
   (e.g. `.row{display:grid}` would otherwise silently defeat `el.hidden = true`
   since author rules of equal specificity beat the UA [hidden] stylesheet). */
[hidden] { display: none !important; }

a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a { transition: color .2s var(--apple-ease), background-color .2s var(--apple-ease), border-color .2s var(--apple-ease), transform .2s var(--apple-ease); }

button, input, select, textarea { font: inherit; }
button, [type="submit"], [type="button"], .btn, .btn-action, .btn-add, .btn-submit, .theme-toggle {
    border-radius: 12px !important;
    transition: transform .2s var(--apple-ease), box-shadow .2s var(--apple-ease), background-color .2s var(--apple-ease), border-color .2s var(--apple-ease) !important;
}
button:active, [type="submit"]:active, [type="button"]:active, .btn:active, .btn-action:active, .btn-add:active, .btn-submit:active, .theme-toggle:active { transform: scale(.975); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--apple-accent) 36%, transparent);
    outline-offset: 3px;
}

.navbar, .site-header, .header, .top, .chat-header {
    background: var(--apple-surface) !important;
    color: var(--apple-text) !important;
    border-color: var(--apple-line) !important;
    box-shadow: 0 1px 0 var(--apple-line), 0 8px 26px rgba(22, 44, 35, .05) !important;
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
}

.navbar a, .site-header a, .header a, .top a { color: var(--apple-text); }
.navbar a:hover, .site-header a:hover, .header a:hover, .top a:hover { color: var(--apple-accent-strong); }

.container, .auth-card, .card, .panel, .prop-section, .control-center, .welcome-card, .property-card, .content-card, .chat-container, .messages-container, .profile-shell {
    border-color: var(--apple-line) !important;
    box-shadow: var(--apple-shadow-soft) !important;
}

.auth-card, .card, .panel, .prop-section, .control-center, .welcome-card, .property-card, .content-card, .chat-container, .messages-container, .profile-shell {
    background: var(--apple-surface) !important;
    color: var(--apple-text) !important;
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
}

h1, h2, h3, h4, h5, strong, label { color: var(--apple-text); }
p, small, .muted, .text-muted, .prop-details, .meta-item { color: var(--apple-muted); }

input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    background: color-mix(in srgb, var(--apple-surface-solid) 86%, transparent) !important;
    color: var(--apple-text) !important;
    border: 1px solid var(--apple-line) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus {
    border-color: var(--apple-accent) !important;
    box-shadow: 0 0 0 4px var(--apple-accent-soft) !important;
}

.btn, .btn-submit, .btn-add, .primary, .btn-approve {
    background: var(--apple-accent) !important;
    color: var(--apple-on-accent) !important;
    border: 0 !important;
    box-shadow: 0 8px 18px rgba(8, 127, 91, .2) !important;
}
.btn:hover, .btn-submit:hover, .btn-add:hover, .primary:hover, .btn-approve:hover { background: var(--apple-accent-strong) !important; transform: translateY(-1px); }

.badge, .tag, .chip, .role-badge, .stat-badge { border-radius: 999px !important; }
.empty-state { background: var(--apple-surface) !important; border-color: var(--apple-line) !important; }

/* Fallback theme toggle for pages that don't embed one natively in their
   own header/navbar. Small and icon-only so it never competes visually
   with a page's real navigation. */
.apple-theme-fallback {
    position: fixed;
    top: 14px;
    inset-inline-end: 14px;
    z-index: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--apple-line);
    border-radius: 999px !important;
    background: var(--apple-surface) !important;
    color: var(--apple-text) !important;
    box-shadow: var(--apple-shadow-soft);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    cursor: pointer;
    font-size: 1.1rem;
}
.apple-theme-fallback:hover { transform: translateY(-1px); border-color: var(--apple-accent); }

/* Theme toggle embedded natively inside a page's own navbar/header. */
.apple-nav-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--apple-line);
    border-radius: 999px !important;
    background: transparent !important;
    color: inherit !important;
    cursor: pointer;
    font-weight: 800;
    font-size: 0.9rem;
    transition: transform .2s ease, border-color .2s ease;
}
.apple-nav-theme-toggle:hover { transform: translateY(-1px); border-color: var(--apple-accent); }

/* Non-floating back bar: a plain in-flow row at the very top of the page,
   right above that page's own header — never overlaps content because it
   simply pushes everything else down instead of sitting on top of it. */
.apple-back-bar {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 20px 0;
}
.apple-back-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    background: var(--apple-accent-soft) !important;
    color: var(--apple-accent-strong) !important;
    border: 1px solid var(--apple-line);
    font-weight: 800;
    font-size: 0.92rem;
    text-decoration: none !important;
    transition: transform .2s ease, background-color .2s ease;
}
.apple-back-button:hover { transform: translateX(-3px); background: var(--apple-accent) !important; color: var(--apple-on-accent) !important; }
@media (max-width: 480px) {
    .apple-back-bar { padding: 10px 14px 0; }
    .apple-back-button { padding: 8px 14px; font-size: 0.86rem; }
}

/* Premium developer-branding footer. Deliberately keeps a fixed dark
   background + gold accent in BOTH site themes, like a signature band —
   not driven by --apple-* theme tokens, so it can never suffer the
   light-mode-only-color dark-mode contrast bug. */
/* Premium developer-branding footer. Deliberately keeps a fixed dark
   background + gold accent in BOTH site themes, like a signature band —
   not driven by --apple-* theme tokens, so it can never suffer the
   light-mode-only-color dark-mode contrast bug. */
.apple-dev-footer {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 40px 0 0;
    padding: 44px 20px calc(104px + env(safe-area-inset-bottom, 0px));
    background: #111827 !important;
    text-align: center;
}
.apple-dev-footer-inner { max-width: 640px; margin: 0 auto; }
.apple-dev-footer-brand {
    display: block;
    color: #d4af37 !important;
    font-size: 1.55rem;
    font-weight: 900;
    letter-spacing: .06em;
}
.apple-dev-footer-tagline {
    margin: 8px 0 0;
    color: #9ca3af !important;
    font-size: 0.92rem;
    font-weight: 600;
}
.apple-dev-footer-rights {
    margin: 16px 0 0;
    color: #e5e7eb !important;
    font-size: 0.88rem;
    font-weight: 600;
}
.apple-dev-footer-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 18px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: #9ca3af !important;
    font-size: 0.88rem;
    font-weight: 700;
}
.apple-dev-footer-contact-item { display: inline-flex; align-items: center; gap: 6px; }
.apple-dev-footer-icon { font-size: 1rem; }
.apple-dev-footer-contact-sep { opacity: 0.4; }
.apple-dev-footer-contact a { color: #d4af37 !important; font-weight: 800; text-decoration: none; }
.apple-dev-footer-contact a:hover { text-decoration: underline; }
@media (max-width: 480px) {
    .apple-dev-footer { padding: 36px 16px calc(96px + env(safe-area-inset-bottom, 0px)); }
    .apple-dev-footer-contact { flex-direction: column; gap: 10px; }
    .apple-dev-footer-contact-sep { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (prefers-reduced-transparency: reduce) {
    .navbar, .site-header, .header, .top, .chat-header, .auth-card, .card, .panel, .prop-section, .control-center, .welcome-card, .property-card, .content-card, .chat-container, .messages-container, .profile-shell {
        background: var(--apple-surface-solid) !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

@media (max-width: 700px) {
    body { overflow-x: hidden; }
    .container, .content, .main-content { width: min(100% - 24px, 680px) !important; }
    .navbar, .site-header, .header, .top, .chat-header { padding-inline: 14px !important; }
    .action-btns, .header-actions, .nav-actions, .links { flex-wrap: wrap; }
    .apple-theme-fallback { top: auto; bottom: 14px; }
}