/* SI Glass — warm mineral background sampled from the supplied brand reference. */
:root {
  --bg: #eae6dd;
  --surface: #fbfaf7;
  --ink: #202124;
  --muted: #70706d;
  --line: rgba(105, 102, 93, .12);
  --soft: rgba(255, 255, 255, .33);
  --accent: #505e54;
  --accent-soft: rgba(226, 232, 221, .57);
  --glass: linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.33));
  --glass-edge: rgba(255,255,255,.78);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(255,255,255,.2), 0 8px 28px rgba(87,78,57,.045);
  --glass-blur: blur(24px) saturate(125%);
  --control: rgba(255,255,255,.49);
  --control-hover: rgba(255,255,255,.85);
  --shadow: 0 16px 50px rgba(64,57,42,.09);
}

body, body.dark { background: var(--bg); isolation: isolate; min-height: 100vh; }
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -2;
  background:
    radial-gradient(ellipse at 78% 2%, rgba(255,255,255,.77), transparent 48%),
    radial-gradient(ellipse at 96% 80%, rgba(179,168,142,.15), transparent 41%),
    linear-gradient(112deg, transparent 27%, rgba(255,255,255,.23) 27.1%, rgba(255,255,255,.05) 50%, transparent 50.1%);
}
body::after {
  content: ''; position: fixed; right: -25px; bottom: -48px; width: min(36vw, 540px); height: min(36vw, 540px);
  background: url('assets/logo-black.png') center / contain no-repeat;
  opacity: .025; pointer-events: none; z-index: -1;
}
.shell { grid-template-columns: 248px minmax(0, 1fr); }
.sidebar, .topbar, .panel, .stat, .note-card, .deal-summary {
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.sidebar {
  inset: 18px auto 18px 18px; width: 214px; border-radius: 27px;
  padding: 24px 12px 15px; background: linear-gradient(150deg, rgba(255,255,255,.61), rgba(255,255,255,.23));
  overflow-y: auto; scrollbar-width: thin;
}
.brand { padding: 1px 13px 23px; gap: 13px; }
.brand img { width: 68px; height: 66px; }
.brand-text { font-size: 10px; letter-spacing: 2px; line-height: 1.9; }
.section-label { font-size: 10px; padding: 14px 14px 11px; letter-spacing: 2px; }
.nav-link { border-radius: 14px; padding: 12px 13px; gap: 11px; margin: 4px 0; font-size: 13px; transition: background .18s, box-shadow .18s, color .18s; }
.nav-link.active { background: linear-gradient(135deg, #fff9, #fff4); box-shadow: inset 0 1px 0 #fffd, 0 3px 9px #4943340a; color: #202124; }
.nav-link.active::before { display: none; }
.nav-link:hover { background: var(--control); }
.nav-count { border: 1px solid #ffffff60; background: #ffffff40; border-radius: 8px; font-size: 11px; }
.sidebar-bottom { padding-top: 16px; }
.profile { padding: 16px 7px 4px; font-size: 12px; border-color: var(--line); }
.profile small { font-size: 11px; }
.badge-demo { background: #ffffff25; border-color: var(--line); border-radius: 7px; font-size: 10px; letter-spacing: .7px; }
.topbar {
  margin: 18px 24px 0 4px; height: 68px; padding: 0 22px; border-radius: 22px;
  background: linear-gradient(120deg, rgba(255,255,255,.64), rgba(255,255,255,.28));
}
.breadcrumb { font-size: 12px; gap: 10px; }
.breadcrumb .icon { width: 14px; }
.top-actions { gap: 8px; }
.search-box { background: var(--control); border: 1px solid #ffffff60; border-radius: 13px; box-shadow: inset 0 1px 3px #605e5305; }
.search-box input { font-size: 13px; }
.key { border-color: var(--line); background: #fff2; border-radius: 5px; }
.icon-btn { border-radius: 50%; transition: background .2s, transform .2s; }
.icon-btn:hover { background: var(--control-hover); }
.top-actions .avatar { width: 34px; height: 34px; }
.content { padding: 33px 28px 44px 8px; }
.page-heading { margin-bottom: 28px; }
h1 { font-size: 36px; font-weight: 500; letter-spacing: -1.6px; }
h2 { font-weight: 550; letter-spacing: -.45px; }
.eyebrow { font-size: 10px; letter-spacing: 2px; margin-bottom: 11px; }
.page-heading p.muted { margin-top: 10px; color: #797771; }
.btn { background: var(--control); border: 1px solid var(--glass-edge); border-radius: 999px; padding: 11px 17px; box-shadow: inset 0 1px 0 #ffffff80, 0 3px 10px #75684b06; transition: background .18s, box-shadow .18s, transform .18s; }
.btn:hover { background: var(--control-hover); box-shadow: inset 0 1px 0 #ffffffa0, 0 5px 15px #75684b0c; }
.btn:active { transform: scale(.975); }
.btn.primary { background: linear-gradient(150deg, #454744, #242625); color: #fff; border-color: #ffffff19; box-shadow: inset 0 1px 0 #ffffff30, 0 5px 14px #27282020; }
.btn.primary:hover { background: linear-gradient(150deg, #555853, #343734); opacity: 1; }
.btn.soft { background: var(--accent-soft); border-color: #fff5; }
.btn.small { border-radius: 999px; padding: 7px 13px; }
.stats { gap: 16px; }
.stat { border-radius: 21px; padding: 22px; position: relative; }
a.stat { transition: transform .2s, box-shadow .2s; }
a.stat:hover { transform: translateY(-2px); box-shadow: var(--glass-shadow), 0 8px 20px #7469500a; }
.stat-label { font-size: 13px; }
.stat-label .icon { color: #656860; width: 19px; }
.stat-value { font-weight: 450; font-size: 31px; letter-spacing: -1.3px; margin: 20px 0 12px; font-variant-numeric: tabular-nums; }
.stat-foot { font-size: 11px; }
.panel { border-radius: 23px; }
.panel-head { padding: 22px 24px; }
.panel-body { padding: 0 24px 24px; }
.dashboard-grid { gap: 22px; }
.stack { gap: 22px; }
.portfolio-hero {
  border-radius: 25px; border: 1px solid #ffffff65; padding: 28px 29px 20px;
  background: radial-gradient(ellipse at 4% 0%, #ffffff22, transparent 62%), linear-gradient(140deg, rgba(81,83,77,.93), rgba(44,49,45,.89));
  box-shadow: inset 0 1px 0 #ffffff50, 0 13px 30px #44453718;
  -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px);
}
.portfolio-hero h2 { font-size: 23px; font-weight: 450; }
.portfolio-hero .eyebrow { color: #deded3; }
.hero-value { font-size: 44px; font-weight: 400; letter-spacing: -1.8px; }
.hero-value span { color: #d0d1c9; }
.hero-chip { border-color: #ffffff32; background: #ffffff0e; border-radius: 999px; padding: 8px 11px; }
.chart-labels { color: #c2c8bd; }
.chart path[stroke] { stroke: #d9e1d2; }
.task-row { border-top-color: rgba(116,111,97,.09); }
.task-row .tag { background: rgba(255,255,255,.34); border: 1px solid rgba(255,255,255,.45); border-radius: 6px; }
.tag { border-radius: 7px; background: #ffffff50; color: #706f68; }
.tag.vip { color: #746881; background: #e6deeb88; }
.tag.hot { color: #91634d; background: #f0dfcd99; }
.tag.green { color: #536b58; background: #dce8d9a3; }
.avatar { background: linear-gradient(145deg, #fff9, #d5d8cf90); color: #626c62; box-shadow: inset 0 1px 0 #ffffffb0; border: 1px solid #ffffff65; }
.avatar.alt { background: linear-gradient(145deg, #fff9, #dfd5c990); color: #807263; }
.avatar.green { background: linear-gradient(145deg, #f8faf18c, #cdd9c887); color: #5d705c; }
.check-task { background: #ffffff60; border-color: #a9a79950; border-radius: 6px; }
.check-task.checked { background: #65755e; border-color: transparent; color: #fff; }
th { background: rgba(237,235,228,.36); }
td { border-bottom-color: rgba(112,107,93,.09); }
tbody tr.clickable:hover { background: #ffffff37; }
.table-foot { border-color: var(--line); }
.demo-footer { color: #8a877d; font-size: 10px; letter-spacing: .3px; }

body.dark {
  --bg: #242623; --surface: #30332f; --ink: #f0f0e9; --muted: #b0b3a7;
  --line: rgba(216,221,202,.11); --soft: rgba(225,232,212,.065);
  --accent: #c2cfb6; --accent-soft: rgba(166,187,144,.13);
  --glass: linear-gradient(135deg, rgba(89,96,84,.44), rgba(58,64,55,.39));
  --glass-edge: rgba(220,229,204,.16);
  --glass-shadow: inset 0 1px 0 rgba(235,242,219,.12), inset 0 -1px 0 rgba(0,0,0,.11), 0 10px 35px rgba(0,0,0,.09);
  --control: rgba(202,216,181,.09); --control-hover: rgba(202,216,181,.16);
}
body.dark::before { background: radial-gradient(ellipse at 78% 0%, #9fa68319, transparent 60%), radial-gradient(ellipse at 18% 85%, #7782651a, transparent 55%); }
body.dark::after { background-image: url('assets/logo-white.png'); opacity: .022; }
.dark .sidebar, .dark .topbar { background: linear-gradient(145deg, #abb7981e, #424a3926); }
.dark .nav-link.active { color: #f2f4e9; background: linear-gradient(140deg, #d4e1bd24, #c0ccaa13); box-shadow: inset 0 1px 0 #e4f1cd26, 0 4px 9px #00000008; }
.dark .nav-count, .dark .badge-demo { background: #ffffff07; border-color: var(--line); }
.dark .search-box { border-color: #d8e7c012; }
.dark .page-heading p.muted { color: var(--muted); }
.dark .stat-label .icon { color: #b4bda8; }
.dark .btn { box-shadow: inset 0 1px 0 #ffffff0d, 0 3px 10px #00000009; }
.dark .btn.primary { background: linear-gradient(145deg, #e2e7d6, #cbd4be); color: #2b3127; border-color: #e6f0d17a; box-shadow: inset 0 1px 0 #ffffffb0, 0 4px 12px #00000017; }
.dark .portfolio-hero { background: radial-gradient(ellipse at 5% 0%, #d7e6bd1d, transparent 60%), linear-gradient(145deg, #515d429e, #34402c6b); border-color: #dfeaca32; box-shadow: inset 0 1px 0 #ecf6d130, 0 12px 30px #00000015; }
.dark .tag, .dark .task-row .tag { background: #d8e6c011; color: #c2c9b6; border-color: #e9f8d210; }
.dark .tag.vip { background: #c2aecc16; color: #c4b7d2; }
.dark .tag.hot { background: #caa68116; color: #d7b494; }
.dark .tag.green { background: #b8d39b15; color: #b9cfaa; }
.dark .avatar, .dark .avatar.alt, .dark .avatar.green { background: linear-gradient(140deg, #e1ebd232, #b3c39718); color: #dce7cb; box-shadow: inset 0 1px 0 #ffffff1a; border-color: #e5f2d31c; }
.dark .check-task { background: #ffffff09; border-color: #d9e6c52a; }
.dark .check-task.checked { background: #a3b88d; color: #242923; }
.dark th { background: #bbcba50a; }
.dark .demo-footer { color: #949c88; }

@media (max-width: 1150px) {
  .shell { grid-template-columns: 218px minmax(0,1fr); }
  .sidebar { width: 188px; left: 15px; }
  .topbar { margin-right: 18px; margin-left: 0; padding: 0 18px; }
  .content { padding: 28px 20px 40px 2px; }
  .brand { justify-content: center; }
  .brand img { width: 78px; height: 70px; }
  .stat { padding: 19px 17px; }
  .stat-value { font-size: 27px; }
  h1 { font-size: 32px; }
}
@media (min-width: 601px) and (max-width: 850px) {
  .shell { grid-template-columns: 98px minmax(0,1fr); }
  .sidebar { width: 70px; left: 14px; top: 16px; bottom: 16px; padding: 18px 9px 13px; border-radius: 25px; }
  .brand { padding: 0 0 14px; }
  .brand img { width: 43px; height: 46px; }
  .nav-link { padding: 13px; justify-content: center; border-radius: 15px; }
  .sidebar-bottom .nav-link { display: none; }
  .profile { padding: 16px 0 3px; }
  .topbar { margin: 16px 18px 0 0; }
  .content { padding: 27px 18px 36px 0; }
}
@media (max-width: 600px) {
  body::after { width: 70vw; height: 70vw; opacity: .018; }
  .sidebar { top: 10px; bottom: 10px; left: 10px; width: 248px; padding: 24px 16px 18px; transform: translateX(calc(-100% - 20px)); background: rgba(242,239,230,.94); }
  .dark .sidebar { background: rgba(41,47,37,.95); }
  .sidebar.open { transform: translateX(0); }
  .sidebar.open .brand img { width: 67px; height: 65px; }
  .sidebar.open .brand { justify-content: flex-start; padding: 0 12px 20px; }
  .topbar { margin: 10px 10px 0; padding: 0 9px; height: 59px; top: 10px; border-radius: 20px; background: rgba(246,243,235,.75); }
  .dark .topbar { background: rgba(47,54,40,.78); }
  .top-actions { gap: 3px; }
  .topbar .icon-btn { min-width: 33px; width: 33px; padding: 7px; }
  .topbar .search-box { border-radius: 11px; padding: 8px; }
  .search-box input { font-size: 13px; }
  .content { padding: 25px 15px 36px; }
  h1 { font-size: 31px; letter-spacing: -1.35px; }
  .page-heading { gap: 17px; margin-bottom: 24px; }
  .page-heading .eyebrow { font-size: 10px; letter-spacing: 1.5px; }
  .page-heading .actions .btn { padding: 9px 15px; font-size: 13px; }
  .stats { gap: 11px; }
  .stat { border-radius: 19px; padding: 18px 14px; }
  .stat-label { font-size: 12px; }
  .stat-value { font-size: 26px; margin: 15px 0 10px; }
  .stat-foot { font-size: 11px; line-height: 1.5; }
  .panel { border-radius: 21px; }
  .panel-head { padding: 20px; }
  .panel-body { padding: 0 20px 22px; }
  .portfolio-hero { padding: 25px 23px 20px; border-radius: 23px; }
  .portfolio-hero h2 { font-size: 20px; }
  .hero-value { font-size: 39px; }
  .hero-chip { font-size: 10px; padding: 7px 9px; }
  .task-row { padding: 18px 20px; }
  .sidebar-scrim { background: #302c2538; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
}

/* Glass controls and content surfaces across every CRM section. */
.segments, .tabs {
  background: rgba(255,255,255,.26);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 #ffffff60;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-radius: 17px; padding: 5px; gap: 4px;
  max-width: 100%; width: fit-content;
}
.segments .segment, .tabs .tab { border-radius: 12px; border: 1px solid transparent; margin: 0; padding: 10px 14px; }
.segment.active, .tabs .tab.active {
  color: var(--ink); background: linear-gradient(140deg, #ffffffb0, #ffffff60);
  border: 1px solid #ffffffa0; box-shadow: inset 0 1px 0 #fff, 0 2px 7px #6c604c0a;
}
.tabs { width: 100%; margin-top: 6px; margin-bottom: 26px; }
.tabs .tab { flex-shrink: 0; font-size: 13px; }
.tabs .tab span { background: #00000006; border-radius: 6px; }
.segments.inner { border: 0; box-shadow: none; background: transparent; padding: 0 18px 17px; border-radius: 0; }
.segments.inner .segment.active { background: var(--control-hover); }
.client-heading h1 { font-size: 33px; font-weight: 500; letter-spacing: -1.3px; }
.client-tags { gap: 7px; margin: 18px 0 23px; }
.note-card { border-radius: 22px; background: linear-gradient(140deg, #fff8, #ece8d659); padding: 27px; }
.note-card .eyebrow { color: #727766; font-size: 11px; }
.note-card .tag { background: #ffffff50; border: 1px solid #ffffff80; }
.budget-block { background: linear-gradient(130deg, #ffffff6b, #ffffff1a); border: 1px solid #ffffff6b; border-radius: 16px; padding: 23px; }
.budget-block h1 { font-weight: 450; }
.family-card { border-color: #ffffff80; border-radius: 17px; background: #ffffff29; box-shadow: inset 0 1px 0 #ffffff80; }
.property-mini { border-top-color: var(--line); }
.property-symbol { border: 1px solid #ffffff60; background: linear-gradient(140deg, #ffffff55, #ffffff15); border-radius: 12px; }
.timeline-icon { border-color: #ffffffb0; background: #ffffff33; }
.timeline-event { border-color: var(--line); }
select { background-color: var(--control); border-color: var(--glass-edge); border-radius: 12px; }
.selection-bar { background: #e6ebdb80; border-top: 1px solid #ffffff60; border-bottom: 1px solid #ffffff60; }
.property-card { border-radius: 23px; }
.property-cover {
  color: #3d453d; background: linear-gradient(145deg, #ffffff33, #bdc5b442);
  border-bottom: 1px solid var(--glass-edge); min-height: 173px; padding: 25px;
}
.property-cover.cover-dubai { color: #4b4e4e; background: linear-gradient(145deg, #ffffff40, #b7c0c544); }
.cover-top { font-size: 11px; letter-spacing: .6px; }
.cover-top .tag { font-size: 10px; padding: 5px 8px; border: 1px solid #ffffff75; background: #ffffff38; border-radius: 7px; }
.cover-bottom h2 { font-size: 22px; font-weight: 450; letter-spacing: -.7px; }
.cover-bottom .property-symbol { background: #ffffff3d; border-radius: 12px; height: 48px; width: 44px; }
.property-card-body { padding: 22px 25px; }
.property-prices { margin: 24px 0; }
.property-prices h3 { font-size: 18px; font-weight: 450; }
.payment-progress small, .payment-next { font-size: 11px; }
progress { background: #999a8716; }
progress::-webkit-progress-bar { background: #999a8716; }
progress::-webkit-progress-value { background: #828d76; }
progress::-moz-progress-bar { background: #828d76; }
.kanban-col { border: 1px solid #ffffff65; background: #ffffff29; border-radius: 20px; padding: 17px 12px; }
.kanban-total { padding-left: 4px; }
.deal-summary { border-radius: 20px; }
.deal-card { background: linear-gradient(140deg, #ffffffad, #ffffff4d); border: 1px solid #ffffff90; border-radius: 17px; padding: 18px; box-shadow: inset 0 1px 0 #ffffff85, 0 5px 12px #7c725209; transition: transform .2s, box-shadow .2s; }
.deal-card:hover { border-color: #ffffffdc; transform: translateY(-2px); box-shadow: var(--shadow); }
.deal-card p { font-size: 21px; font-weight: 450; }
.deal-card .person small { font-size: 12px; }
.recipient:has(input:checked) { background: #dfe6d460; }
.recipient { border-color: var(--line); }
.channel-toggle { background: #ffffff1e; border: 1px solid #ffffff59; border-radius: 15px; padding: 5px; width: fit-content; }
.channel-toggle .segment { border-radius: 11px; }
.channel-toggle .segment.active { background: #ffffff85; box-shadow: inset 0 1px 0 #ffffffdf, 0 3px 8px #6b68460a; }
.private-message-note { background: #ffffff3b; border: 1px solid #ffffff75; border-radius: 15px; }
.variables button { background: #ffffff45; border: 1px solid #ffffff65; border-radius: 8px; }
.message-preview { border: 1px solid #ffffff8a; background: linear-gradient(140deg, #ffffff8a, #ffffff42); border-radius: 18px 18px 18px 5px; }
.message-preview strong { font-size: 13px; }
.message-history { border-color: var(--line); }
.calendar-cell, .calendar-week { border-color: var(--line); }
.calendar-cell.outside { background: #d1ccbe16; }
.calendar-cell.selected { background: #f9f8ef80; box-shadow: inset 0 0 0 1px #939b8266; }
.calendar-cell.today .day-number { background: #454d3e; color: #fff; }
.cal-event { background: #ffffff70; border: 1px solid #ffffff73; border-radius: 6px; }
.cal-event.payment { background: #dfe6d480; color: #52634a; }
.analysis-bar progress { height: 6px; }

/* Denser frosting keeps long text and forms readable above the workspace. */
dialog, dialog.wide {
  background: linear-gradient(130deg, rgba(251,250,246,.96), rgba(244,242,233,.93));
  border: 1px solid #ffffffd9; border-radius: 27px;
  box-shadow: inset 0 1px 0 #fff, 0 35px 100px #3e392c30, 0 2px 15px #3e392c0a;
  -webkit-backdrop-filter: blur(35px) saturate(130%); backdrop-filter: blur(35px) saturate(130%);
}
dialog::backdrop { background: rgba(52,49,41,.2); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); }
.modal-heading h1 { font-size: 27px; font-weight: 500; }
.modal-heading>.icon-btn { background: #ffffff7a; border: 1px solid #ffffffa0; }
.field input, .field textarea, .field select { background: rgba(255,255,255,.58); border: 1px solid rgba(137,135,119,.17); border-radius: 12px; box-shadow: inset 0 1px 2px #706b5005; }
.field>span { font-size: 13px; }
.property-detail-money { background: #ffffff52; border: 1px solid #ffffffa0; border-radius: 19px; }
.property-detail-money h2 { font-weight: 450; }
.ownership-timeline span { border: 1px solid #ffffffa0; background: #dce5d580; }
.upload-area { background: #ffffff30; border: 1px dashed #b0af9d; border-radius: 19px; }
.sample-document { background: #ffffff45; border-radius: 18px; border-color: #ffffffa0; }
.ai-label { background: #e3e9d970; border: 1px solid #ffffffa0; border-radius: 15px; }
#toast { border: 1px solid #ffffff30; background: rgba(46,51,43,.93); color: #fff; box-shadow: 0 12px 35px #282d202b, inset 0 1px 0 #ffffff20; border-radius: 999px; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.dark .segments, .dark .tabs { background: #ffffff06; border-color: var(--glass-edge); box-shadow: inset 0 1px 0 #ffffff08; }
.dark .segment.active, .dark .tabs .tab.active, .dark .segments.inner .segment.active { background: linear-gradient(140deg, #d1debc24, #c2d2a411); border-color: #e3f1c820; box-shadow: inset 0 1px 0 #f2ffdb24; }
.dark .tabs .tab span { background: #ffffff09; }
.dark .note-card { background: linear-gradient(140deg, #b1bd981f, #7b896c14); }
.dark .note-card .eyebrow { color: #bec8ac; }
.dark .note-card .tag { border-color: var(--glass-edge); }
.dark .family-card, .dark .budget-block, .dark .property-detail-money { background: #d6e3b809; border-color: var(--glass-edge); box-shadow: inset 0 1px 0 #ffffff0b; }
.dark .property-symbol, .dark .timeline-icon { background: #d5e7b412; border-color: var(--glass-edge); }
.dark select { background-color: #30372a; border-color: var(--glass-edge); }
.dark .selection-bar { background: #9fac7e17; border-color: var(--glass-edge); }
.dark .property-cover { color: #d9dfce; background: linear-gradient(145deg, #9dad7924, #94a47010); border-color: var(--glass-edge); }
.dark .property-cover.cover-dubai { color: #d4dcd8; background: linear-gradient(145deg, #acc2b422, #8faaa214); }
.dark .cover-top .tag, .dark .cover-bottom .property-symbol { background: #ffffff09; border-color: var(--glass-edge); color: #d1dac5; }
.dark .kanban-col { background: #ffffff04; border-color: var(--glass-edge); }
.dark .deal-card { background: linear-gradient(140deg, #d5e1bf16, #bccc9e09); border-color: var(--glass-edge); box-shadow: inset 0 1px 0 #ffffff14, 0 5px 12px #00000009; }
.dark .recipient:has(input:checked) { background: #c7d8a912; }
.dark .channel-toggle, .dark .private-message-note, .dark .variables button, .dark .message-preview { background: #d4e8ae08; border-color: var(--glass-edge); }
.dark .channel-toggle .segment.active { background: #c6d8a918; box-shadow: inset 0 1px 0 #ffffff1c; }
.dark .calendar-cell.outside { background: #0a100809; }
.dark .calendar-cell.selected { background: #a8bd8717; box-shadow: inset 0 0 0 1px #d7eaba3b; }
.dark .calendar-cell.today .day-number { background: #cbd9b8; color: #2d3526; }
.dark .cal-event { background: #ffffff08; border-color: var(--glass-edge); }
.dark .cal-event.payment { background: #cadbb416; color: #cadab7; }
.dark dialog { background: linear-gradient(135deg, rgba(53,60,46,.97), rgba(37,44,32,.96)); border-color: #e9f8cd30; box-shadow: inset 0 1px 0 #ffffff16, 0 35px 100px #00000050; }
.dark dialog::backdrop { background: #11150d66; }
.dark .modal-heading>.icon-btn { background: #ffffff0c; border-color: var(--glass-edge); }
.dark .field input, .dark .field textarea, .dark .field select { background: #1d27134d; border-color: #d6e8b521; }
.dark .ownership-timeline span, .dark .ai-label { background: #d5e8b012; border-color: var(--glass-edge); }
.dark .upload-area, .dark .sample-document { background: #ffffff05; border-color: #d3e4b832; }
.dark #toast { background: rgba(225,233,212,.93); color: #2d3626; border-color: #ffffff66; }
@media (max-width: 600px) {
  .segments, .tabs { border-radius: 15px; }
  .segments .segment, .tabs .tab { border-radius: 10px; padding: 9px 12px; font-size: 12px; }
  .client-heading h1 { font-size: 27px; }
  .client-heading>.actions .btn { font-size: 12px; padding: 10px 12px; }
  .note-card { padding: 23px; border-radius: 22px; }
  .property-cover { padding: 23px; }
  .property-card-body { padding: 21px 23px; }
  .toolbar .btn, .toolbar select { border-radius: 12px; }
  .calendar-cell { min-height: 65px; }
  .channel-toggle { width: 100%; }
  .channel-toggle .segment { font-size: 13px; }
  dialog, dialog.wide { padding: 24px 21px; border-radius: 25px; }
  .modal-heading h1 { font-size: 24px; }
  .field input, .field textarea, .field select { font-size: 16px; }
  #toast { border-radius: 17px; }
}
/* Preserve content and contrast when blur is unavailable or reduced by preference. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sidebar, .topbar, .panel, .stat, .note-card, .deal-summary { background: #f4f1e9; }
  .dark .sidebar, .dark .topbar, .dark .panel, .dark .stat, .dark .note-card, .dark .deal-summary { background: #333b2e; }
}
@media (prefers-reduced-transparency: reduce) {
  .sidebar, .topbar, .panel, .stat, .note-card, .deal-summary, dialog { background: #f4f1e9; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .dark .sidebar, .dark .topbar, .dark .panel, .dark .stat, .dark .note-card, .dark .deal-summary, .dark dialog { background: #333b2e; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .icon-btn, a.stat, .nav-link, .deal-card { transition: none; }
  .btn:active, a.stat:hover, .deal-card:hover { transform: none; }
}