:root {
  --brand: #96c44f;
  --brand-strong: #78a935;
  --brand-soft: #eef6e4;
  --charcoal: #3f433e;
  --charcoal-2: #2c302c;
  --ink: #242724;
  --muted: #6f756d;
  --line: #dfe3dc;
  --line-strong: #cbd1c8;
  --surface: #ffffff;
  --surface-2: #f5f6f2;
  --surface-3: #eceee8;
  --warm: #eeeae2;
  --danger: #bb4d4d;
  --danger-soft: #f9eaea;
  --warning: #a56b14;
  --warning-soft: #fff4de;
  --info: #3e6f88;
  --info-soft: #e8f1f6;
  --success: #4c8247;
  --success-soft: #e8f5e6;
  --shadow-sm: 0 5px 18px rgba(42, 47, 41, .07);
  --shadow: 0 18px 50px rgba(38, 43, 37, .12);
  --shadow-lg: 0 30px 90px rgba(27, 31, 27, .22);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --sidebar-width: 276px;
  --topbar-height: 84px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--surface-2); scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; color: var(--ink); background: var(--surface-2); font-family: var(--font); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
::selection { color: var(--charcoal-2); background: rgba(150, 196, 79, .45); }

.is-hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.nowrap { white-space: nowrap; }
.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; }

[data-icon] { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
[data-icon] svg { width: 1em; height: 1em; stroke-width: 1.8; }

button { border: 0; background: none; }
button:not(:disabled) { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }

.primary-button,
.secondary-button,
.ghost-button,
.danger-button,
.outline-button {
  min-height: 43px;
  border-radius: 11px;
  padding: 0 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 750;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.primary-button { color: var(--charcoal-2); background: var(--brand); box-shadow: 0 10px 24px rgba(119, 164, 52, .21); }
.primary-button:hover { background: #a0ce59; transform: translateY(-1px); box-shadow: 0 13px 28px rgba(119, 164, 52, .27); }
.secondary-button { color: #fff; background: var(--charcoal); }
.secondary-button:hover { background: var(--charcoal-2); transform: translateY(-1px); }
.ghost-button { color: var(--charcoal); background: var(--surface-2); }
.ghost-button:hover { background: var(--surface-3); }
.outline-button { color: var(--charcoal); background: var(--surface); border: 1px solid var(--line-strong); }
.outline-button:hover { border-color: var(--brand); background: var(--brand-soft); }
.danger-button { color: #fff; background: var(--danger); }
.danger-button:hover { background: #a94343; }
.full-width { width: 100%; }
.large { min-height: 52px; border-radius: 13px; font-size: 15px; }
.small-button { min-height: 35px; padding: 0 12px; border-radius: 9px; font-size: 13px; }
.text-button { padding: 0; color: var(--brand-strong); font-weight: 750; }
.text-button:hover { text-decoration: underline; }
.icon-button { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: background .18s ease, color .18s ease, transform .18s ease; }
.icon-button:hover { background: var(--surface-3); }
.icon-button:active { transform: scale(.95); }

.eyebrow { color: var(--brand-strong); font-size: 11px; line-height: 1.2; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow.light { color: #cfeaa5; }

/* Login */
.login-screen { min-height: 100vh; display: grid; grid-template-columns: minmax(480px, 1.08fr) minmax(430px, .92fr); background: var(--surface); }
.login-brand-panel { position: relative; min-height: 100vh; overflow: hidden; color: #fff; background: var(--charcoal-2); }
.login-brand-panel::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(circle at 80% 9%, rgba(150,196,79,.17), transparent 27%), linear-gradient(135deg, rgba(44,48,44,.95) 0%, rgba(35,39,35,.88) 46%, rgba(24,27,24,.44) 100%); }
.login-brand-content { position: relative; z-index: 3; max-width: 660px; padding: clamp(42px, 6vw, 86px); }
.login-logo { width: 224px; margin-bottom: clamp(55px, 10vh, 112px); }
.login-brand-content h1 { margin: 16px 0 24px; font-family: var(--font-display); font-weight: 500; font-size: clamp(48px, 6vw, 88px); line-height: .93; letter-spacing: -.045em; }
.login-brand-content h1 span { color: var(--brand); }
.login-brand-content > p { max-width: 540px; color: rgba(255,255,255,.75); font-size: 17px; }
.brand-proof { display: flex; gap: 40px; margin-top: 42px; }
.brand-proof div { display: grid; gap: 2px; }
.brand-proof strong { color: var(--brand); font-size: 23px; }
.brand-proof span { color: rgba(255,255,255,.65); font-size: 12px; }
.login-building { position: absolute; right: -6%; bottom: -3%; width: min(78%, 940px); z-index: 1; opacity: .88; }
.login-building svg { filter: saturate(.82); }
.login-form-panel { min-height: 100vh; display: grid; place-items: center; padding: 42px 7vw; background: linear-gradient(150deg, #fff 0%, #fafbf8 100%); }
.login-form-wrap { width: min(100%, 470px); }
.mobile-login-logo { display: none; }
.login-form-wrap h2 { margin: 10px 0 6px; font-size: clamp(28px, 3vw, 39px); line-height: 1.15; letter-spacing: -.035em; }
.login-form-wrap > .muted { margin: 0 0 28px; }
#login-form { display: grid; }
#login-form > label { margin: 13px 0 7px; font-size: 13px; font-weight: 750; }
.input-with-icon { position: relative; }
.input-with-icon > [data-icon]:first-child { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #879085; font-size: 18px; pointer-events: none; }
.input-with-icon input { width: 100%; height: 50px; padding: 0 48px 0 44px; border: 1px solid var(--line-strong); border-radius: 12px; outline: none; background: #fff; transition: border .18s ease, box-shadow .18s ease; }
.input-with-icon input:focus { border-color: var(--brand-strong); box-shadow: 0 0 0 4px rgba(150,196,79,.15); }
.password-toggle { position: absolute; right: 4px; top: 4px; color: var(--muted); }
.login-options { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 15px 0 21px; font-size: 13px; }
.check-label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.check-label input { width: 17px; height: 17px; accent-color: var(--brand-strong); }
.form-error { min-height: 20px; margin: 8px 0 0; color: var(--danger); font-size: 13px; text-align: center; }
.demo-divider { display: flex; align-items: center; gap: 14px; margin: 23px 0 14px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.demo-divider::before, .demo-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.demo-accounts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.demo-account { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 13px; display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 9px; text-align: left; background: #fff; transition: border .18s ease, background .18s ease, transform .18s ease; }
.demo-account > [data-icon] { display: none; }
.demo-account:hover { border-color: var(--brand); background: var(--brand-soft); transform: translateY(-2px); }
.demo-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--charcoal); background: var(--brand); font-size: 10px; font-weight: 850; }
.demo-account strong, .demo-account small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-account strong { font-size: 12px; }
.demo-account small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.login-legal { margin: 21px 0 0; color: #929890; font-size: 11px; text-align: center; }

/* Main shell */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
.sidebar { position: fixed; z-index: 50; inset: 0 auto 0 0; width: var(--sidebar-width); display: flex; flex-direction: column; overflow-y: auto; color: rgba(255,255,255,.82); background: var(--charcoal-2); border-right: 1px solid rgba(255,255,255,.06); }
.sidebar-head { height: var(--topbar-height); flex: 0 0 auto; padding: 18px 24px 15px; display: flex; align-items: center; justify-content: space-between; }
.sidebar-logo { width: 158px; }
.sidebar-close { display: none; color: #fff; }
.property-switcher { margin: 4px 15px 13px; }
.property-select-button { width: 100%; min-height: 75px; padding: 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 15px; display: grid; grid-template-columns: 42px minmax(0,1fr) 18px; align-items: center; gap: 10px; text-align: left; background: rgba(255,255,255,.055); }
.property-select-button:hover { border-color: rgba(150,196,79,.45); background: rgba(255,255,255,.075); }
.property-thumb { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; overflow: hidden; color: var(--charcoal); background: var(--brand); }
.property-thumb img { width: 100%; height: 100%; object-fit: cover; }
.property-select-button strong, .property-select-button small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.property-select-button strong { color: #fff; font-size: 12px; }
.property-select-button small { margin-top: 2px; color: rgba(255,255,255,.55); font-size: 10px; }
.property-select-button > [data-icon] { color: var(--brand); }
.main-nav { flex: 1 1 auto; padding: 8px 12px 20px; }
.nav-group-label { margin: 18px 13px 8px; color: rgba(255,255,255,.34); font-size: 9px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.nav-item { width: 100%; height: 46px; padding: 0 13px; border-radius: 11px; display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.68); text-align: left; font-size: 13px; font-weight: 650; transition: color .18s ease, background .18s ease; }
.nav-item [data-icon] { width: 20px; font-size: 19px; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-item.active { color: #fff; background: rgba(150,196,79,.16); }
.nav-item.active [data-icon] { color: var(--brand); }
.nav-badge { min-width: 20px; height: 20px; margin-left: auto; padding: 0 6px; border-radius: 10px; display: grid; place-items: center; color: var(--charcoal-2); background: var(--brand); font-size: 10px; font-weight: 850; }
.sidebar-footer { flex: 0 0 auto; padding: 8px 14px 17px; }
.support-card { margin-bottom: 12px; padding: 13px; border: 1px solid rgba(150,196,79,.22); border-radius: 14px; display: grid; grid-template-columns: 35px 1fr; gap: 9px; background: linear-gradient(145deg, rgba(150,196,79,.13), rgba(255,255,255,.035)); }
.support-icon { grid-row: span 2; width: 35px; height: 35px; border-radius: 50%; color: var(--charcoal-2); background: var(--brand); }
.support-card strong, .support-card span { display: block; }
.support-card strong { color: #fff; font-size: 12px; }
.support-card div span { color: rgba(255,255,255,.5); font-size: 10px; }
.support-card button { grid-column: 2; padding: 0; width: max-content; color: var(--brand); font-size: 10px; font-weight: 800; }
.sidebar-user { min-height: 58px; padding: 9px 8px; display: flex; align-items: center; gap: 10px; border-top: 1px solid rgba(255,255,255,.07); }
.user-avatar { width: 37px; height: 37px; flex: 0 0 37px; border-radius: 50%; display: grid; place-items: center; color: var(--charcoal-2); background: var(--brand); font-size: 11px; font-weight: 850; }
.sidebar-user-info { min-width: 0; }
.sidebar-user-info strong, .sidebar-user-info span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-info strong { color: #fff; font-size: 11px; }
.sidebar-user-info span { color: rgba(255,255,255,.45); font-size: 9px; }
.sidebar-user > button { margin-left: auto; color: rgba(255,255,255,.5); }
.sidebar-backdrop { display: none; }

.app-main { grid-column: 2; min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 30; min-height: var(--topbar-height); padding: 0 clamp(20px, 3vw, 44px); border-bottom: 1px solid rgba(215,220,212,.78); display: flex; align-items: center; justify-content: space-between; gap: 25px; background: rgba(248,249,246,.9); backdrop-filter: blur(15px); }
.topbar-left { min-width: 0; display: flex; align-items: center; gap: 12px; }
.page-kicker { min-height: 14px; color: var(--brand-strong); font-size: 9px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.topbar h1 { margin: 0; font-size: 23px; line-height: 1.2; letter-spacing: -.025em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mobile-menu { display: none; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.topbar-search { height: 40px; min-width: 190px; padding: 0 11px; border: 1px solid var(--line); border-radius: 11px; display: flex; align-items: center; gap: 9px; color: var(--muted); background: #fff; font-size: 12px; }
.topbar-search > span:nth-child(2) { flex: 1; text-align: left; }
kbd { padding: 2px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; color: #80877e; background: var(--surface-2); font-size: 9px; font-family: var(--font); }
.notification-button { position: relative; color: var(--charcoal); background: #fff; border: 1px solid var(--line); }
.notification-dot { position: absolute; right: 7px; top: 7px; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: var(--brand-strong); }
.profile-button { height: 42px; padding: 3px 8px 3px 3px; border: 1px solid var(--line); border-radius: 22px; display: flex; align-items: center; gap: 8px; background: #fff; }
.profile-button .user-avatar { width: 34px; height: 34px; flex-basis: 34px; }
.profile-button strong { max-width: 120px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-button [data-icon] { color: var(--muted); }
.main-content { min-height: calc(100vh - var(--topbar-height)); padding: clamp(20px, 3vw, 42px); outline: none; }

/* Generic content */
.page-wrap { max-width: 1500px; margin: 0 auto; animation: page-in .36s var(--ease); }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.page-heading { margin-bottom: 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; }
.page-heading h2 { margin: 5px 0 0; font-size: clamp(25px, 3vw, 36px); letter-spacing: -.04em; }
.page-heading p { max-width: 720px; margin: 7px 0 0; color: var(--muted); }
.page-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.card-pad { padding: clamp(18px, 2.2vw, 28px); }
.section-header { margin-bottom: 17px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.section-header h3 { margin: 0; font-size: 17px; letter-spacing: -.02em; }
.section-header p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.section-header .text-button { font-size: 12px; }
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.content-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, .75fr); gap: 20px; }
.stack { display: grid; gap: 18px; }
.divider { height: 1px; background: var(--line); }
.empty-state { min-height: 250px; padding: 35px; display: grid; place-items: center; text-align: center; }
.empty-state-icon { width: 62px; height: 62px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; color: var(--brand-strong); background: var(--brand-soft); font-size: 27px; }
.empty-state h3 { margin: 0 0 6px; }
.empty-state p { max-width: 450px; margin: 0 auto 17px; color: var(--muted); }

/* Dashboard */
.hero-card { min-height: 390px; position: relative; overflow: hidden; border: 0; border-radius: var(--radius-lg); color: #fff; background: var(--charcoal); box-shadow: var(--shadow); }
.hero-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(31,35,31,.94) 0%, rgba(31,35,31,.82) 38%, rgba(31,35,31,.2) 76%, rgba(31,35,31,.08) 100%); }
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .88; }
.hero-content { position: relative; z-index: 2; width: min(57%, 680px); min-height: 390px; padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; }
.hero-pill { width: max-content; margin-bottom: 16px; padding: 6px 11px; border: 1px solid rgba(255,255,255,.19); border-radius: 20px; display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,.82); background: rgba(255,255,255,.08); font-size: 10px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.hero-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 5px rgba(150,196,79,.13); }
.hero-content h2 { margin: 0; font-family: var(--font-display); font-size: clamp(37px, 5vw, 65px); font-weight: 500; line-height: .98; letter-spacing: -.045em; }
.hero-content h2 span { color: var(--brand); }
.hero-meta { margin-top: 15px; display: flex; flex-wrap: wrap; gap: 15px; color: rgba(255,255,255,.68); font-size: 12px; }
.hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
.hero-progress-row { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px; }
.hero-progress-label { margin-bottom: 7px; display: flex; justify-content: space-between; color: rgba(255,255,255,.72); font-size: 11px; }
.hero-progress-label strong { color: #fff; }
.progress-track { height: 8px; overflow: hidden; border-radius: 9px; background: var(--surface-3); }
.progress-track.dark { background: rgba(255,255,255,.17); }
.progress-bar { height: 100%; border-radius: inherit; background: var(--brand); transition: width .7s var(--ease); }
.hero-progress-row .primary-button { min-width: 140px; }
.hero-object-counter { position: absolute; z-index: 3; right: 23px; bottom: 23px; padding: 9px 13px; border: 1px solid rgba(255,255,255,.15); border-radius: 22px; color: rgba(255,255,255,.8); background: rgba(33,37,33,.55); backdrop-filter: blur(8px); font-size: 11px; }
.dashboard-grid { margin-top: 20px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.dashboard-grid > * { min-width: 0; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-9 { grid-column: span 9; }
.span-12 { grid-column: span 12; }
.stat-card { min-height: 147px; padding: 20px; position: relative; overflow: hidden; }
.stat-card::after { content: ""; position: absolute; right: -22px; bottom: -28px; width: 90px; height: 90px; border-radius: 50%; background: var(--brand-soft); }
.stat-icon { width: 39px; height: 39px; border-radius: 11px; display: grid; place-items: center; color: var(--brand-strong); background: var(--brand-soft); font-size: 19px; }
.stat-card .stat-label { margin-top: 16px; color: var(--muted); font-size: 11px; font-weight: 700; }
.stat-card .stat-value { margin-top: 2px; font-size: 23px; font-weight: 850; letter-spacing: -.035em; }
.stat-card .stat-note { margin-top: 4px; color: var(--muted); font-size: 10px; }
.stat-card .stat-note.positive { color: var(--success); }
.quick-actions { padding: 21px; }
.quick-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.quick-action { min-height: 72px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; display: flex; align-items: center; gap: 10px; text-align: left; background: var(--surface-2); transition: border .18s ease, background .18s ease, transform .18s ease; }
.quick-action:hover { border-color: var(--brand); background: var(--brand-soft); transform: translateY(-1px); }
.quick-action > [data-icon] { width: 35px; height: 35px; border-radius: 9px; color: var(--brand-strong); background: #fff; font-size: 17px; }
.quick-action strong, .quick-action small { display: block; }
.quick-action strong { font-size: 11px; }
.quick-action small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.payment-donut-wrap { padding: 24px; display: grid; grid-template-columns: 145px minmax(0,1fr); align-items: center; gap: 24px; }
.donut { --value: 0; width: 137px; height: 137px; border-radius: 50%; position: relative; display: grid; place-items: center; background: conic-gradient(var(--brand) calc(var(--value)*1%), var(--surface-3) 0); }
.donut::before { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: #fff; }
.donut-content { position: relative; z-index: 1; text-align: center; }
.donut-content strong { display: block; font-size: 24px; letter-spacing: -.04em; }
.donut-content span { color: var(--muted); font-size: 9px; }
.payment-summary-list { display: grid; gap: 12px; }
.payment-summary-row { display: flex; justify-content: space-between; gap: 15px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 12px; }
.payment-summary-row:last-child { padding: 0; border: 0; }
.payment-summary-row span { color: var(--muted); }
.deadline-list { display: grid; }
.deadline-item { padding: 14px 0; display: grid; grid-template-columns: 45px 1fr auto; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }
.deadline-item:last-child { border-bottom: 0; }
.date-tile { width: 43px; height: 46px; border-radius: 10px; display: grid; place-items: center; align-content: center; background: var(--surface-2); line-height: 1; }
.date-tile strong { font-size: 17px; }
.date-tile span { margin-top: 3px; color: var(--brand-strong); font-size: 8px; font-weight: 850; text-transform: uppercase; }
.deadline-item h4 { margin: 0; font-size: 12px; }
.deadline-item p { margin: 2px 0 0; color: var(--muted); font-size: 10px; }
.deadline-tag { padding: 4px 8px; border-radius: 14px; color: var(--warning); background: var(--warning-soft); font-size: 9px; font-weight: 800; }
.news-strip { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.news-card { min-height: 210px; position: relative; overflow: hidden; border-radius: 15px; color: #fff; background: var(--charcoal); }
.news-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .66; transition: transform .5s var(--ease); }
.news-card:hover img { transform: scale(1.045); }
.news-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(30,33,30,.91) 0%, rgba(30,33,30,.2) 70%); }
.news-card-content { position: absolute; z-index: 2; inset: auto 0 0; padding: 17px; }
.news-card-date { color: var(--brand); font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.news-card h4 { margin: 6px 0 4px; font-size: 15px; }
.news-card p { margin: 0; color: rgba(255,255,255,.66); font-size: 10px; }
.project-card { overflow: hidden; }
.project-card-image { position: relative; height: 188px; overflow: hidden; background: var(--surface-3); }
.project-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.project-card:hover .project-card-image img { transform: scale(1.035); }
.project-card-status { position: absolute; left: 13px; top: 13px; padding: 5px 9px; border-radius: 20px; color: var(--charcoal-2); background: var(--brand); font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
.project-card-body { padding: 17px; }
.project-card h4 { margin: 0; font-size: 15px; }
.project-card-location { margin: 4px 0 14px; display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10px; }
.project-progress-meta { margin-bottom: 6px; display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; }

/* Properties */
.property-list { display: grid; gap: 18px; }
.property-large-card { min-height: 300px; overflow: hidden; display: grid; grid-template-columns: minmax(330px, .92fr) minmax(0, 1.08fr); }
.property-large-image { min-height: 300px; position: relative; background: var(--surface-3); }
.property-large-image img { width: 100%; height: 100%; object-fit: cover; }
.property-large-image .property-badge { position: absolute; left: 17px; top: 17px; }
.property-large-content { padding: clamp(22px, 3vw, 35px); display: flex; flex-direction: column; justify-content: center; }
.property-large-content h3 { margin: 5px 0 6px; font-size: 26px; letter-spacing: -.035em; }
.property-large-content > p { margin: 0 0 21px; color: var(--muted); }
.property-badge { width: max-content; padding: 6px 10px; border-radius: 18px; color: var(--charcoal-2); background: var(--brand); font-size: 9px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.property-facts { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 9px; }
.property-fact { padding: 12px; border-radius: 11px; background: var(--surface-2); }
.property-fact span, .property-fact strong { display: block; }
.property-fact span { color: var(--muted); font-size: 9px; }
.property-fact strong { margin-top: 3px; font-size: 12px; }
.property-card-actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 9px; }
.unit-summary-card { padding: 24px; }
.unit-plan-placeholder { min-height: 360px; border: 1px dashed var(--line-strong); border-radius: 14px; display: grid; place-items: center; background: repeating-linear-gradient(45deg,#fbfcf9,#fbfcf9 10px,#f6f7f3 10px,#f6f7f3 20px); }
.floorplan { position: relative; width: min(90%, 650px); aspect-ratio: 1.55; border: 7px solid var(--charcoal); background: #fff; }
.floorplan::before, .floorplan::after { content: ""; position: absolute; background: var(--charcoal); }
.floorplan::before { left: 39%; top: 0; width: 6px; height: 100%; }
.floorplan::after { left: 0; top: 56%; width: 100%; height: 6px; }
.floorplan-room { position: absolute; display: grid; place-items: center; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.room-1 { left: 2%; top: 3%; width: 35%; height: 49%; }
.room-2 { left: 42%; top: 3%; width: 55%; height: 49%; }
.room-3 { left: 2%; top: 60%; width: 35%; height: 37%; }
.room-4 { left: 42%; top: 60%; width: 27%; height: 37%; }
.room-5 { left: 71%; top: 60%; width: 26%; height: 37%; }

/* Interior */
.interior-summary { margin-bottom: 20px; padding: 22px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 15px; }
.interior-summary-item { padding-right: 15px; border-right: 1px solid var(--line); }
.interior-summary-item:last-child { border-right: 0; }
.interior-summary-item span, .interior-summary-item strong { display: block; }
.interior-summary-item span { color: var(--muted); font-size: 10px; }
.interior-summary-item strong { margin-top: 4px; font-size: 17px; }
.interior-summary-item .positive { color: var(--success); }
.interior-toolbar { position: sticky; top: calc(var(--topbar-height) + 8px); z-index: 15; margin-bottom: 18px; padding: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip { height: 36px; padding: 0 13px; border-radius: 20px; color: var(--muted); background: var(--surface-2); font-size: 11px; font-weight: 700; }
.filter-chip:hover, .filter-chip.active { color: var(--charcoal-2); background: var(--brand); }
.interior-category { margin-bottom: 25px; }
.interior-category-head { margin-bottom: 13px; display: flex; align-items: end; justify-content: space-between; gap: 15px; }
.interior-category-head h3 { margin: 0; font-size: 20px; }
.interior-category-head p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.option-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.option-card { position: relative; overflow: hidden; border: 2px solid transparent; border-radius: 15px; background: #fff; box-shadow: var(--shadow-sm); transition: border .2s ease, transform .2s ease, box-shadow .2s ease; }
.option-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.option-card.selected { border-color: var(--brand); }
.option-card.selected::after { content: "✓"; position: absolute; right: 12px; top: 12px; width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; color: var(--charcoal-2); background: var(--brand); font-weight: 900; box-shadow: 0 5px 14px rgba(39,43,38,.25); }
.option-visual { height: 155px; position: relative; overflow: hidden; background: var(--surface-3); }
.option-visual img { width: 100%; height: 100%; object-fit: cover; }
.option-pattern { width: 100%; height: 100%; }
.pattern-oak { background: repeating-linear-gradient(90deg,#c8a779 0 38px,#b89264 38px 40px,#d5b787 40px 79px,#ad875d 79px 81px); }
.pattern-smoked { background: repeating-linear-gradient(90deg,#756350 0 38px,#594b3e 38px 40px,#87725d 40px 79px,#504438 79px 81px); }
.pattern-herringbone { background-color:#c2a173; background-image: linear-gradient(135deg,rgba(255,255,255,.18) 25%,transparent 25%),linear-gradient(225deg,rgba(255,255,255,.18) 25%,transparent 25%),linear-gradient(45deg,rgba(75,55,35,.12) 25%,transparent 25%),linear-gradient(315deg,rgba(75,55,35,.12) 25%,#c2a173 25%); background-position:18px 0,18px 0,0 0,0 0;background-size:36px 36px;background-repeat:repeat; }
.pattern-tile-light { background: linear-gradient(135deg,#dddeda,#f5f5f2 48%,#c7cac5); }
.pattern-tile-stone { background-color:#9b9b94; background-image: radial-gradient(circle at 20% 30%,rgba(255,255,255,.22) 0 2px,transparent 3px),radial-gradient(circle at 73% 58%,rgba(45,45,40,.13) 0 2px,transparent 3px); background-size:45px 40px,54px 51px; }
.pattern-tile-terrazzo { background-color:#ece9e0; background-image: radial-gradient(#8b8a84 1.8px,transparent 2px),radial-gradient(#c0a37c 2px,transparent 2.4px),radial-gradient(#6e776c 1.5px,transparent 1.9px); background-position:0 0,16px 18px,29px 7px;background-size:34px 31px,39px 37px,28px 33px; }
.pattern-kitchen-white { background: linear-gradient(90deg,#e7e6e1 0 23%,#fff 23% 48%,#d9dad5 48% 73%,#f7f7f4 73%); }
.pattern-kitchen-dark { background: linear-gradient(90deg,#343834 0 24%,#555b55 24% 49%,#292c29 49% 74%,#696e68 74%); }
.pattern-kitchen-oak { background: linear-gradient(90deg,#d7d6cf 0 32%,#b89567 32% 68%,#f2f0e8 68%); }
.pattern-sanitary-chrome { background: linear-gradient(130deg,#7f8887,#f3f7f6 36%,#818989 56%,#e5eaea 78%,#68706f); }
.pattern-sanitary-black { background: linear-gradient(130deg,#0f1210,#555a56 37%,#151817 55%,#383c39 80%,#090b0a); }
.pattern-sanitary-brass { background: linear-gradient(130deg,#806726,#e9d27b 37%,#99782f 55%,#d7b75b 80%,#72581e); }
.option-body { padding: 15px; }
.option-topline { display: flex; justify-content: space-between; gap: 9px; }
.option-card h4 { margin: 0; font-size: 13px; }
.option-price { color: var(--brand-strong); font-size: 11px; font-weight: 850; white-space: nowrap; }
.option-card p { margin: 6px 0 0; color: var(--muted); font-size: 10px; }
.option-meta { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 5px; }
.mini-tag { padding: 3px 7px; border-radius: 10px; color: var(--muted); background: var(--surface-2); font-size: 8px; font-weight: 700; }
.sticky-save-bar { position: sticky; z-index: 20; bottom: 16px; margin-top: 25px; padding: 13px 16px; border: 1px solid var(--line-strong); border-radius: 15px; display: flex; align-items: center; justify-content: space-between; gap: 15px; background: rgba(255,255,255,.94); box-shadow: var(--shadow); backdrop-filter: blur(12px); }
.sticky-save-bar strong, .sticky-save-bar span { display: block; }
.sticky-save-bar strong { font-size: 12px; }
.sticky-save-bar span { color: var(--muted); font-size: 10px; }

/* Documents */
.document-toolbar { margin-bottom: 17px; padding: 12px; display: flex; align-items: center; gap: 10px; }
.search-input { position: relative; flex: 1; min-width: 180px; }
.search-input [data-icon] { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search-input input { width: 100%; height: 42px; padding: 0 14px 0 39px; border: 1px solid var(--line); border-radius: 10px; outline: none; background: var(--surface-2); }
.search-input input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(150,196,79,.13); }
.select-control { height: 42px; min-width: 160px; padding: 0 34px 0 12px; border: 1px solid var(--line); border-radius: 10px; outline: none; color: var(--charcoal); background: var(--surface-2); }
.document-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.document-card { padding: 16px; display: grid; grid-template-columns: 47px minmax(0,1fr) auto; align-items: center; gap: 12px; }
.document-icon { width: 47px; height: 53px; position: relative; border-radius: 7px; display: grid; place-items: center; color: #fff; background: var(--charcoal); font-size: 9px; font-weight: 850; }
.document-icon::after { content: ""; position: absolute; right: 0; top: 0; border-width: 0 0 13px 13px; border-style: solid; border-color: transparent transparent rgba(255,255,255,.3) transparent; }
.document-icon.plan { background: var(--info); }
.document-icon.contract { background: #756754; }
.document-icon.stweg { background: var(--brand-strong); }
.document-icon.protocol { background: #6e6687; }
.document-info { min-width: 0; }
.document-info h4 { margin: 0; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.document-info p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.document-actions { display: flex; gap: 3px; }
.document-actions .icon-button { width: 34px; height: 34px; color: var(--muted); }
.document-group { margin-bottom: 24px; }
.document-group-title { margin-bottom: 10px; display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.document-group-title span { padding: 2px 7px; border-radius: 9px; color: var(--charcoal); background: var(--surface-3); font-size: 8px; }
.document-preview { min-height: 540px; display: grid; grid-template-columns: 1fr 275px; }
.preview-paper-wrap { padding: 28px; display: grid; place-items: center; background: #dfe2dc; }
.preview-paper { width: min(100%, 580px); min-height: 710px; padding: 54px; background: #fff; box-shadow: 0 14px 40px rgba(38,43,37,.18); }
.preview-paper-logo { width: 130px; margin-bottom: 55px; }
.preview-paper h2 { font-family: var(--font-display); font-size: 29px; font-weight: 500; }
.preview-paper p, .preview-paper li { color: #555b54; font-family: Georgia, serif; font-size: 11px; line-height: 1.7; }
.preview-meta { padding: 24px; border-left: 1px solid var(--line); background: #fff; }
.preview-meta h3 { margin-top: 0; }
.meta-list { display: grid; gap: 13px; }
.meta-row span, .meta-row strong { display: block; }
.meta-row span { color: var(--muted); font-size: 9px; }
.meta-row strong { margin-top: 2px; font-size: 11px; }

/* Payments */
.payment-overview { margin-bottom: 19px; padding: 26px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); align-items: center; gap: 28px; }
.payment-main-number span { display: block; color: var(--muted); font-size: 11px; }
.payment-main-number strong { display: block; margin-top: 4px; font-size: clamp(34px, 5vw, 55px); line-height: 1; letter-spacing: -.055em; }
.payment-main-number small { display: block; margin-top: 9px; color: var(--muted); }
.payment-progress { margin-top: 25px; }
.payment-progress .progress-track { height: 12px; }
.payment-progress-label { margin-bottom: 8px; display: flex; justify-content: space-between; font-size: 11px; }
.payment-side-stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.payment-side-stat { padding: 15px; border-radius: 12px; background: var(--surface-2); }
.payment-side-stat span, .payment-side-stat strong { display: block; }
.payment-side-stat span { color: var(--muted); font-size: 9px; }
.payment-side-stat strong { margin-top: 4px; font-size: 15px; }
.table-card { overflow: hidden; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { color: var(--muted); background: var(--surface-2); font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
td { font-size: 11px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fafbf8; }
.table-title { display: flex; align-items: center; gap: 9px; }
.table-title-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--brand-strong); background: var(--brand-soft); }
.table-title strong, .table-title span { display: block; }
.table-title span { margin-top: 2px; color: var(--muted); font-size: 9px; }
.status-pill { width: max-content; padding: 5px 9px; border-radius: 18px; display: inline-flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 800; }
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-paid, .status-done, .status-active, .status-confirmed { color: var(--success); background: var(--success-soft); }
.status-open, .status-new, .status-planned { color: var(--warning); background: var(--warning-soft); }
.status-progress, .status-review, .status-assigned { color: var(--info); background: var(--info-soft); }
.status-late, .status-urgent, .status-blocked { color: var(--danger); background: var(--danger-soft); }
.status-draft, .status-pending { color: var(--muted); background: var(--surface-3); }
.payment-note { padding: 18px; display: flex; align-items: flex-start; gap: 13px; color: var(--info); background: var(--info-soft); }
.payment-note > [data-icon] { width: 34px; height: 34px; border-radius: 50%; background: #fff; }
.payment-note strong { display: block; font-size: 11px; }
.payment-note p { margin: 3px 0 0; color: #577182; font-size: 10px; }

/* Progress */
.progress-hero { overflow: hidden; display: grid; grid-template-columns: minmax(0,1.25fr) minmax(300px,.75fr); }
.progress-hero-image { min-height: 360px; position: relative; }
.progress-hero-image img { width: 100%; height: 100%; object-fit: cover; }
.progress-hero-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(30,33,30,.65),transparent 60%); }
.progress-hero-caption { position: absolute; z-index: 2; left: 24px; bottom: 22px; color: #fff; }
.progress-hero-caption .eyebrow { color: var(--brand); }
.progress-hero-caption h3 { margin: 5px 0 0; font-size: 23px; }
.progress-hero-side { padding: 30px; display: flex; flex-direction: column; justify-content: center; }
.big-progress-number { font-size: 66px; line-height: 1; font-weight: 850; letter-spacing: -.07em; }
.big-progress-number span { color: var(--brand); }
.progress-hero-side > p { color: var(--muted); }
.phase-list { display: grid; gap: 15px; }
.phase-item-header { margin-bottom: 6px; display: flex; justify-content: space-between; font-size: 10px; }
.phase-item-header strong { font-size: 11px; }
.phase-item .progress-track { height: 7px; }
.construction-timeline { position: relative; padding-left: 31px; }
.construction-timeline::before { content: ""; position: absolute; left: 8px; top: 5px; bottom: 0; width: 2px; background: var(--line); }
.timeline-item { position: relative; padding: 0 0 26px 13px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot { position: absolute; left: -31px; top: 2px; width: 18px; height: 18px; border: 4px solid #fff; border-radius: 50%; background: var(--line-strong); box-shadow: 0 0 0 1px var(--line-strong); }
.timeline-item.done .timeline-dot, .timeline-item.current .timeline-dot { background: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.timeline-item.current .timeline-dot { animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { box-shadow:0 0 0 1px var(--brand),0 0 0 0 rgba(150,196,79,.3);}50%{box-shadow:0 0 0 1px var(--brand),0 0 0 9px rgba(150,196,79,0);} }
.timeline-item time { color: var(--brand-strong); font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .07em; }
.timeline-item h4 { margin: 4px 0 3px; font-size: 12px; }
.timeline-item p { margin: 0; color: var(--muted); font-size: 10px; }
.update-gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }
.update-photo { min-height: 170px; position: relative; overflow: hidden; border-radius: 12px; background: var(--surface-3); }
.update-photo img { width: 100%; height: 100%; object-fit: cover; }
.update-photo div { position: absolute; inset: auto 0 0; padding: 12px; color: #fff; background: linear-gradient(0deg,rgba(30,33,30,.82),transparent); }
.update-photo strong, .update-photo span { display: block; }
.update-photo strong { font-size: 10px; }
.update-photo span { color: rgba(255,255,255,.65); font-size: 8px; }

/* Contractors */
.contractor-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.contractor-card { padding: 18px; }
.contractor-head { display: grid; grid-template-columns: 46px minmax(0,1fr) auto; align-items: center; gap: 11px; }
.contractor-logo { width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: var(--charcoal); font-size: 12px; font-weight: 850; }
.contractor-head h3 { margin: 0; font-size: 13px; }
.contractor-head p { margin: 2px 0 0; color: var(--brand-strong); font-size: 9px; font-weight: 800; }
.contractor-rating { display: flex; align-items: center; gap: 3px; color: var(--warning); font-size: 9px; }
.contractor-details { margin: 15px 0; display: grid; gap: 7px; }
.contractor-detail { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; }
.contractor-detail [data-icon] { color: var(--brand-strong); }
.contractor-actions { display: flex; gap: 8px; }
.contractor-actions a { flex: 1; text-decoration: none; }

/* Service / tickets */
.service-intro { overflow: hidden; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(290px,.85fr); }
.service-intro-main { padding: clamp(25px,4vw,48px); color: #fff; background: var(--charcoal); }
.service-intro-main h2 { max-width: 660px; margin: 12px 0 12px; font-family: var(--font-display); font-size: clamp(32px,4vw,51px); font-weight: 500; line-height: 1.05; letter-spacing: -.04em; }
.service-intro-main h2 span { color: var(--brand); }
.service-intro-main p { max-width: 620px; color: rgba(255,255,255,.67); }
.service-features { margin: 25px 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.service-feature { padding: 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.05); }
.service-feature [data-icon] { color: var(--brand); font-size: 20px; }
.service-feature strong { display: block; margin-top: 9px; font-size: 10px; }
.service-feature span { display: block; margin-top: 2px; color: rgba(255,255,255,.5); font-size: 8px; }
.service-intro-art { min-height: 350px; position: relative; display: grid; place-items: center; background: var(--brand-soft); }
.service-house-icon { width: 170px; height: 170px; border-radius: 50%; display: grid; place-items: center; color: var(--charcoal); background: var(--brand); font-size: 78px; box-shadow: 0 24px 60px rgba(76,90,61,.2); }
.service-intro-art::before, .service-intro-art::after { content: ""; position: absolute; border: 1px solid rgba(63,67,62,.1); border-radius: 50%; }
.service-intro-art::before { width: 240px; height: 240px; }
.service-intro-art::after { width: 310px; height: 310px; }
.ticket-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.ticket-stat { padding: 17px; display: flex; align-items: center; gap: 12px; }
.ticket-stat [data-icon] { width: 39px; height: 39px; border-radius: 11px; color: var(--brand-strong); background: var(--brand-soft); font-size: 18px; }
.ticket-stat strong, .ticket-stat span { display: block; }
.ticket-stat strong { font-size: 20px; }
.ticket-stat span { color: var(--muted); font-size: 9px; }
.ticket-list { display: grid; gap: 11px; }
.ticket-card { padding: 17px; display: grid; grid-template-columns: 45px minmax(0,1fr) auto; align-items: center; gap: 13px; transition: border .18s ease, transform .18s ease; }
.ticket-card:hover { border-color: var(--brand); transform: translateY(-1px); }
.ticket-category-icon { width: 45px; height: 45px; border-radius: 12px; display: grid; place-items: center; color: var(--brand-strong); background: var(--brand-soft); font-size: 20px; }
.ticket-info { min-width: 0; }
.ticket-info-top { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.ticket-info h4 { margin: 0; font-size: 12px; }
.ticket-id { color: var(--muted); font-size: 8px; font-weight: 750; }
.ticket-info p { margin: 4px 0 0; color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket-meta { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 11px; color: var(--muted); font-size: 8px; }
.ticket-meta span { display: inline-flex; align-items: center; gap: 4px; }
.ticket-right { display: grid; justify-items: end; gap: 8px; }
.ticket-detail-grid { display: grid; grid-template-columns: minmax(0,1fr) 310px; gap: 20px; }
.ticket-detail-section { padding: 20px; }
.ticket-detail-section h3 { margin: 0 0 13px; font-size: 15px; }
.ticket-description { padding: 14px; border-radius: 11px; color: #525850; background: var(--surface-2); font-size: 11px; }
.appointment-options { display: grid; gap: 8px; }
.appointment-option { padding: 12px; border: 1px solid var(--line); border-radius: 11px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; }
.appointment-option.confirmed { border-color: var(--brand); background: var(--brand-soft); }
.appointment-option strong, .appointment-option span { display: block; }
.appointment-option strong { font-size: 10px; }
.appointment-option span { color: var(--muted); font-size: 9px; }
.ticket-history { position: relative; padding-left: 24px; }
.ticket-history::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.history-entry { position: relative; padding-bottom: 17px; }
.history-entry::before { content: ""; position: absolute; left: -21px; top: 4px; width: 9px; height: 9px; border: 3px solid #fff; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.history-entry:last-child { padding-bottom: 0; }
.history-entry strong { display: block; font-size: 10px; }
.history-entry span { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; }

/* Forms */
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.form-field { display: grid; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 10px; font-weight: 800; }
.form-field .hint { color: var(--muted); font-size: 8px; }
.input, .textarea, .select { width: 100%; border: 1px solid var(--line-strong); border-radius: 10px; outline: none; background: #fff; transition: border .18s ease, box-shadow .18s ease; }
.input, .select { height: 44px; padding: 0 12px; }
.textarea { min-height: 118px; padding: 11px 12px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(150,196,79,.14); }
.upload-zone { min-height: 120px; padding: 20px; border: 1px dashed var(--line-strong); border-radius: 12px; display: grid; place-items: center; text-align: center; background: var(--surface-2); }
.upload-zone.dragover { border-color: var(--brand-strong); background: var(--brand-soft); }
.upload-zone [data-icon] { width: 38px; height: 38px; margin: 0 auto 8px; border-radius: 50%; color: var(--brand-strong); background: #fff; font-size: 18px; }
.upload-zone strong, .upload-zone span { display: block; }
.upload-zone strong { font-size: 10px; }
.upload-zone span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.file-preview-list { margin-top: 8px; display: grid; gap: 6px; }
.file-preview { padding: 8px 10px; border-radius: 9px; display: flex; align-items: center; gap: 8px; background: var(--surface-2); font-size: 9px; }
.file-preview button { margin-left: auto; color: var(--danger); }
.appointment-slot-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.appointment-slot-field { padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.appointment-slot-field label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 8px; }
.appointment-slot-field input { width: 100%; border: 0; outline: none; background: transparent; font-size: 10px; }
.priority-picker { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.priority-option { position: relative; }
.priority-option input { position: absolute; opacity: 0; pointer-events: none; }
.priority-option label { min-height: 50px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; display: flex; align-items: center; gap: 8px; cursor: pointer; background: var(--surface-2); }
.priority-option input:checked + label { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 2px rgba(150,196,79,.12); }
.priority-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.priority-dot.low { background: var(--success); }
.priority-dot.medium { background: var(--warning); }
.priority-dot.high { background: var(--danger); }
.priority-option strong, .priority-option span { display: block; }
.priority-option strong { font-size: 9px; }
.priority-option span { color: var(--muted); font-size: 7px; }

/* Messages / notifications */
.message-layout { min-height: 620px; overflow: hidden; display: grid; grid-template-columns: 330px minmax(0,1fr); }
.conversation-list { border-right: 1px solid var(--line); }
.conversation-list-head { padding: 17px; border-bottom: 1px solid var(--line); }
.conversation-item { width: 100%; padding: 14px 16px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 39px minmax(0,1fr) auto; gap: 10px; text-align: left; }
.conversation-item:hover, .conversation-item.active { background: var(--brand-soft); }
.conversation-item .user-avatar { width: 39px; height: 39px; flex-basis: 39px; }
.conversation-info { min-width: 0; }
.conversation-info strong, .conversation-info span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversation-info strong { font-size: 10px; }
.conversation-info span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.conversation-item time { color: var(--muted); font-size: 7px; }
.chat-panel { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; }
.chat-head { padding: 16px 19px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.chat-head strong { font-size: 11px; }
.chat-head span { display: block; color: var(--muted); font-size: 8px; }
.chat-body { padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; background: var(--surface-2); }
.chat-message { max-width: 73%; padding: 10px 12px; border-radius: 12px 12px 12px 3px; background: #fff; box-shadow: var(--shadow-sm); font-size: 10px; }
.chat-message.own { align-self: flex-end; border-radius: 12px 12px 3px 12px; background: var(--brand-soft); }
.chat-message time { display: block; margin-top: 4px; color: var(--muted); font-size: 7px; text-align: right; }
.chat-compose { padding: 13px; border-top: 1px solid var(--line); display: flex; align-items: flex-end; gap: 8px; }
.chat-compose textarea { flex: 1; min-height: 43px; max-height: 120px; padding: 11px; border: 1px solid var(--line); border-radius: 11px; resize: none; outline: none; }

/* Admin */
.admin-banner { margin-bottom: 20px; padding: 24px; overflow: hidden; position: relative; color: #fff; background: var(--charcoal); }
.admin-banner::after { content: ""; position: absolute; right: -60px; top: -80px; width: 240px; height: 240px; border-radius: 50%; background: var(--brand); opacity: .14; }
.admin-banner h2 { margin: 5px 0 6px; font-size: 27px; }
.admin-banner p { margin: 0; color: rgba(255,255,255,.62); }
.admin-kpi-grid { margin-bottom: 20px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; }
.admin-kpi { padding: 19px; display: grid; grid-template-columns: 39px 1fr; gap: 12px; align-items: center; }
.admin-kpi [data-icon] { width: 39px; height: 39px; border-radius: 11px; color: var(--brand-strong); background: var(--brand-soft); font-size: 18px; }
.admin-kpi strong, .admin-kpi span { display: block; }
.admin-kpi strong { font-size: 21px; }
.admin-kpi span { color: var(--muted); font-size: 9px; }
.admin-project-row { display: grid; grid-template-columns: 65px minmax(0,1.3fr) minmax(150px,.7fr) 110px 110px auto; align-items: center; gap: 14px; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.admin-project-row:last-child { border-bottom: 0; }
.admin-project-thumb { width: 65px; height: 48px; border-radius: 9px; overflow: hidden; background: var(--surface-3); }
.admin-project-thumb img { width: 100%; height: 100%; object-fit: cover; }
.admin-project-row strong, .admin-project-row span { display: block; }
.admin-project-row strong { font-size: 10px; }
.admin-project-row span { margin-top: 2px; color: var(--muted); font-size: 8px; }
.admin-progress-mini { min-width: 130px; }
.admin-progress-mini .progress-track { height: 6px; }
.admin-progress-mini div:first-child { margin-bottom: 5px; display: flex; justify-content: space-between; color: var(--muted); font-size: 8px; }
.user-list-row { display: grid; grid-template-columns: 42px minmax(0,1.3fr) minmax(140px,.7fr) minmax(150px,.8fr) 100px auto; gap: 12px; align-items: center; padding: 12px 15px; border-bottom: 1px solid var(--line); }
.user-list-row:last-child { border-bottom: 0; }
.user-list-row strong, .user-list-row span { display: block; }
.user-list-row strong { font-size: 10px; }
.user-list-row span { color: var(--muted); font-size: 8px; }
.role-pill { width: max-content; padding: 4px 8px; border-radius: 12px; color: var(--charcoal); background: var(--surface-3); font-size: 8px; font-weight: 800; }
.role-admin { color: #fff; background: var(--charcoal); }
.role-owner { color: var(--success); background: var(--success-soft); }
.role-tenant { color: var(--info); background: var(--info-soft); }
.role-contractor { color: var(--warning); background: var(--warning-soft); }
.analytics-bars { height: 220px; display: flex; align-items: flex-end; gap: 10px; padding-top: 30px; }
.analytics-bar-wrap { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 7px; }
.analytics-bar { width: min(30px,70%); min-height: 4px; border-radius: 6px 6px 2px 2px; background: var(--brand); }
.analytics-bar-wrap span { color: var(--muted); font-size: 8px; }
.analytics-bar-wrap strong { font-size: 8px; }

/* Modal / dropdown */
.modal-backdrop { position: fixed; z-index: 100; inset: 0; padding: 24px; display: grid; place-items: center; background: rgba(26,30,26,.64); backdrop-filter: blur(5px); animation: fade-in .18s ease; }
@keyframes fade-in { from { opacity: 0; } }
.modal { width: min(100%, 680px); max-height: calc(100vh - 48px); overflow: auto; border-radius: 19px; background: #fff; box-shadow: var(--shadow-lg); animation: modal-in .25s var(--ease); }
.modal.wide { width: min(100%, 980px); }
.modal.extra-wide { width: min(100%, 1250px); }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.modal-head { position: sticky; z-index: 3; top: 0; min-height: 68px; padding: 14px 18px 14px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 15px; background: rgba(255,255,255,.95); backdrop-filter: blur(10px); }
.modal-head h2 { margin: 0; font-size: 18px; }
.modal-head p { margin: 2px 0 0; color: var(--muted); font-size: 9px; }
.modal-body { padding: 22px; }
.modal-footer { position: sticky; bottom: 0; padding: 13px 20px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 9px; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); }
.popover { position: fixed; z-index: 85; width: min(360px, calc(100vw - 24px)); border: 1px solid var(--line); border-radius: 15px; overflow: hidden; background: #fff; box-shadow: var(--shadow); animation: modal-in .2s var(--ease); }
.popover-head { padding: 15px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 10px; }
.popover-head h3 { margin: 0; font-size: 13px; }
.popover-body { max-height: 420px; overflow-y: auto; }
.notification-item { padding: 13px 15px; display: grid; grid-template-columns: 35px minmax(0,1fr); gap: 10px; border-bottom: 1px solid var(--line); }
.notification-item:last-child { border-bottom: 0; }
.notification-item.unread { background: var(--brand-soft); }
.notification-item [data-icon] { width: 35px; height: 35px; border-radius: 50%; color: var(--brand-strong); background: #fff; }
.notification-item strong, .notification-item span { display: block; }
.notification-item strong { font-size: 10px; }
.notification-item span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.profile-menu { padding: 7px; }
.profile-menu-head { padding: 12px; border-bottom: 1px solid var(--line); }
.profile-menu-head strong, .profile-menu-head span { display: block; }
.profile-menu-head strong { font-size: 11px; }
.profile-menu-head span { color: var(--muted); font-size: 8px; }
.menu-action { width: 100%; height: 39px; padding: 0 10px; border-radius: 9px; display: flex; align-items: center; gap: 9px; text-align: left; font-size: 10px; }
.menu-action:hover { background: var(--surface-2); }
.menu-action.danger { color: var(--danger); }
.property-menu { padding: 7px; }
.property-menu-item { width: 100%; padding: 10px; border-radius: 10px; display: grid; grid-template-columns: 42px minmax(0,1fr) 18px; align-items: center; gap: 9px; text-align: left; }
.property-menu-item:hover, .property-menu-item.active { background: var(--brand-soft); }
.property-menu-item img { width: 42px; height: 38px; border-radius: 8px; object-fit: cover; }
.property-menu-item strong, .property-menu-item span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.property-menu-item strong { font-size: 10px; }
.property-menu-item span { color: var(--muted); font-size: 8px; }
.property-menu-item.active > [data-icon] { color: var(--brand-strong); }
.search-modal-input { height: 54px; padding: 0 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.search-modal-input input { flex: 1; border: 0; outline: none; font-size: 14px; }
.search-results { max-height: 520px; overflow-y: auto; padding: 8px; }
.search-result-section { padding: 8px 5px; color: var(--muted); font-size: 8px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.search-result-item { width: 100%; padding: 10px; border-radius: 10px; display: grid; grid-template-columns: 37px minmax(0,1fr) auto; align-items: center; gap: 10px; text-align: left; }
.search-result-item:hover { background: var(--brand-soft); }
.search-result-item > [data-icon]:first-child { width: 37px; height: 37px; border-radius: 10px; color: var(--brand-strong); background: var(--brand-soft); }
.search-result-item strong, .search-result-item span { display: block; }
.search-result-item strong { font-size: 10px; }
.search-result-item span { color: var(--muted); font-size: 8px; }
.toast-root { position: fixed; z-index: 200; right: 20px; bottom: 20px; display: grid; gap: 8px; pointer-events: none; }
.toast { width: min(390px, calc(100vw - 40px)); padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 10px; background: #fff; box-shadow: var(--shadow); pointer-events: auto; animation: toast-in .3s var(--ease); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }
.toast [data-icon] { width: 34px; height: 34px; border-radius: 50%; color: var(--success); background: var(--success-soft); }
.toast.error [data-icon] { color: var(--danger); background: var(--danger-soft); }
.toast strong, .toast span { display: block; }
.toast strong { font-size: 10px; }
.toast span { margin-top: 2px; color: var(--muted); font-size: 8px; }
.page-loading { min-height: 400px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.page-loading span { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); animation: bounce 1.2s infinite ease-in-out; }
.page-loading span:nth-child(2) { animation-delay: .15s; }
.page-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%,60%,100% { transform: translateY(0); opacity:.5; } 30% { transform: translateY(-8px); opacity:1; } }

/* Mobile bottom navigation */
.mobile-bottom-nav { display: none; }

/* Responsive */
@media (max-width: 1280px) {
  .login-screen { grid-template-columns: 1fr 1fr; }
  .login-brand-content { padding: 55px; }
  .brand-proof { gap: 24px; }
  .dashboard-grid { gap: 16px; }
  .span-3 { grid-column: span 4; }
  .stat-card.span-3:last-of-type { grid-column: span 12; }
  .option-grid, .document-grid, .contractor-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .admin-project-row { grid-template-columns: 55px minmax(0,1fr) 130px 90px auto; }
  .admin-project-row > :nth-child(4) { display: none; }
}

@media (max-width: 1050px) {
  :root { --sidebar-width: 252px; }
  .login-brand-panel { display: none; }
  .login-screen { grid-template-columns: 1fr; }
  .login-form-panel { padding: 35px 22px; }
  .mobile-login-logo { display: block; margin-bottom: 40px; }
  .mobile-login-logo img { width: 190px; }
  .content-layout, .progress-hero, .service-intro { grid-template-columns: 1fr; }
  .progress-hero-side { min-height: 300px; }
  .hero-content { width: 70%; }
  .span-4, .span-5, .span-7, .span-8 { grid-column: span 6; }
  .span-3 { grid-column: span 6; }
  .span-9 { grid-column: span 12; }
  .news-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .news-card:last-child { grid-column: 1 / -1; }
  .property-large-card { grid-template-columns: 1fr; }
  .property-large-image { min-height: 270px; }
  .ticket-detail-grid { grid-template-columns: 1fr; }
  .admin-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .document-preview { grid-template-columns: 1fr; }
  .preview-meta { border: 0; border-top: 1px solid var(--line); }
  .message-layout { grid-template-columns: 280px minmax(0,1fr); }
}

@media (max-width: 860px) {
  .app-shell { display: block; }
  .sidebar { transform: translateX(-102%); transition: transform .28s var(--ease); box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: none; }
  .sidebar-close, .mobile-menu { display: inline-flex; }
  .sidebar-backdrop { position: fixed; z-index: 45; inset: 0; display: block; opacity: 0; visibility: hidden; background: rgba(27,30,27,.52); transition: opacity .25s ease, visibility .25s ease; }
  .sidebar-backdrop.open { opacity: 1; visibility: visible; }
  .app-main { grid-column: auto; }
  .topbar { padding: 0 17px; }
  .topbar-search { min-width: 42px; width: 42px; padding: 0; justify-content: center; }
  .topbar-search > span:nth-child(2), .topbar-search kbd { display: none; }
  .profile-button { width: 42px; padding: 3px; }
  .profile-button strong, .profile-button > [data-icon] { display: none; }
  .main-content { padding: 20px 17px 90px; }
  .topbar h1 { max-width: 45vw; font-size: 19px; }
  .hero-content { width: 82%; }
  .payment-overview { grid-template-columns: 1fr; }
  .interior-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .interior-summary-item:nth-child(2) { border-right: 0; }
  .interior-summary-item:nth-child(-n+2) { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
  .appointment-slot-grid { grid-template-columns: 1fr; }
  .ticket-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mobile-bottom-nav { position: fixed; z-index: 35; left: 10px; right: 10px; bottom: 10px; height: 66px; padding: 6px; border: 1px solid var(--line); border-radius: 18px; display: grid; grid-template-columns: repeat(5,1fr); background: rgba(255,255,255,.94); box-shadow: var(--shadow); backdrop-filter: blur(15px); }
  .mobile-bottom-nav button { border-radius: 12px; display: grid; place-items: center; align-content: center; gap: 2px; color: var(--muted); font-size: 8px; }
  .mobile-bottom-nav button [data-icon] { font-size: 18px; }
  .mobile-bottom-nav button.active { color: var(--charcoal); background: var(--brand-soft); }
  .mobile-bottom-nav button.active [data-icon] { color: var(--brand-strong); }
  .admin-project-row { grid-template-columns: 52px minmax(0,1fr) auto; }
  .admin-project-row > :nth-child(3), .admin-project-row > :nth-child(4), .admin-project-row > :nth-child(5) { display: none; }
  .user-list-row { grid-template-columns: 38px minmax(0,1fr) auto; }
  .user-list-row > :nth-child(3), .user-list-row > :nth-child(4), .user-list-row > :nth-child(5) { display: none; }
}

@media (max-width: 660px) {
  body { font-size: 14px; }
  .login-form-wrap { max-width: 440px; }
  .demo-accounts { grid-template-columns: 1fr; }
  .demo-account { grid-template-columns: 34px minmax(0,1fr) 18px; }
  .demo-account > [data-icon] { display: inline-flex; }
  .demo-account small { font-size: 9px; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .page-actions { width: 100%; justify-content: flex-start; }
  .hero-card, .hero-content { min-height: 430px; }
  .hero-card::after { background: linear-gradient(0deg, rgba(31,35,31,.96) 0%, rgba(31,35,31,.72) 67%, rgba(31,35,31,.2) 100%); }
  .hero-content { width: 100%; padding: 25px; justify-content: flex-end; }
  .hero-content h2 { font-size: 39px; }
  .hero-progress-row { grid-template-columns: 1fr; }
  .hero-progress-row .primary-button { width: max-content; }
  .hero-object-counter { top: 17px; right: 17px; bottom: auto; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-grid > *, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-12 { grid-column: 1; }
  .payment-donut-wrap { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .payment-summary-list { width: 100%; text-align: left; }
  .news-strip, .grid-2, .grid-3, .grid-4, .option-grid, .document-grid, .contractor-grid { grid-template-columns: 1fr; }
  .news-card:last-child { grid-column: auto; }
  .property-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .interior-summary { grid-template-columns: 1fr; }
  .interior-summary-item { padding: 0 0 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .interior-summary-item:last-child { padding-bottom: 0; border-bottom: 0; }
  .interior-summary-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .interior-toolbar { overflow-x: auto; flex-wrap: nowrap; }
  .filter-chip { flex: 0 0 auto; }
  .sticky-save-bar { align-items: flex-start; flex-direction: column; }
  .sticky-save-bar .primary-button { width: 100%; }
  .document-toolbar { align-items: stretch; flex-direction: column; }
  .select-control { width: 100%; }
  .payment-main-number strong { font-size: 39px; }
  .payment-side-stats { grid-template-columns: 1fr; }
  .progress-hero-image { min-height: 270px; }
  .update-gallery { grid-template-columns: 1fr; }
  .service-features { grid-template-columns: 1fr; }
  .service-intro-art { min-height: 290px; }
  .ticket-stats { grid-template-columns: 1fr 1fr; }
  .ticket-card { grid-template-columns: 40px minmax(0,1fr); }
  .ticket-right { grid-column: 2; justify-items: start; }
  .form-grid { grid-template-columns: 1fr; }
  .form-field.full { grid-column: auto; }
  .priority-picker { grid-template-columns: 1fr; }
  .modal-backdrop { padding: 0; align-items: end; }
  .modal { width: 100%; max-height: 94vh; border-radius: 21px 21px 0 0; }
  .modal.wide, .modal.extra-wide { width: 100%; }
  .modal-body { padding: 18px; }
  .preview-paper-wrap { padding: 10px; }
  .preview-paper { min-height: 590px; padding: 32px; }
  .message-layout { min-height: 620px; grid-template-columns: 1fr; }
  .conversation-list { display: none; }
  .chat-message { max-width: 88%; }
  .admin-kpi-grid { grid-template-columns: 1fr 1fr; }
  .admin-kpi { grid-template-columns: 34px 1fr; padding: 14px; }
  .admin-kpi [data-icon] { width: 34px; height: 34px; }
  .admin-kpi strong { font-size: 17px; }
  .topbar-actions { gap: 3px; }
  .topbar { min-height: 72px; }
  :root { --topbar-height: 72px; }
  .page-kicker { display: none; }
}

@media (max-width: 420px) {
  .login-form-panel { padding: 26px 17px; }
  .mobile-login-logo { margin-bottom: 25px; }
  .login-form-wrap h2 { font-size: 27px; }
  .login-options { align-items: flex-start; }
  .topbar h1 { max-width: 38vw; font-size: 17px; }
  .ticket-stats, .admin-kpi-grid { grid-template-columns: 1fr; }
  .quick-action-grid { grid-template-columns: 1fr; }
  .property-facts { grid-template-columns: 1fr 1fr; }
  .property-card-actions .primary-button, .property-card-actions .outline-button { flex: 1; }
}

@media print {
  .sidebar, .topbar, .page-actions, .mobile-bottom-nav, .sticky-save-bar { display: none !important; }
  .app-shell, .app-main { display: block; }
  .main-content { padding: 0; }
  .card { box-shadow: none; }
  body { background: #fff; }
}