/* Navigation and editing surfaces must remain readable independently of wallpaper settings. */
body { --chrome: #f4f5f7; --chrome-ink: #191c22; --chrome-muted: #565d69; --chrome-line: #d7dbe2; }
body.dark { --chrome: #1c1e24; --chrome-ink: #f6f7fa; --chrome-muted: #bbc0cb; --chrome-line: #3b3e48; }
body:has(dialog[open]), body:has(.sidebar.open) { overflow: hidden; }
dialog, body.dark dialog { background: var(--chrome) !important; color: var(--chrome-ink); --ink: var(--chrome-ink); --muted: var(--chrome-muted); }
dialog .modal-heading, dialog .modal-footer { background: var(--chrome) !important; }
dialog .field input, dialog .field textarea, dialog .field select { background: color-mix(in srgb, var(--chrome) 94%, var(--chrome-ink)) !important; border-color: var(--chrome-line) !important; }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }

@media (max-width:700px) {
  html { scroll-padding-top: 80px; scroll-padding-bottom: 100px; }
  body, body.dark { font-size:16px; padding:0; }
  .main, .content, .panel, .stack, .person > div { min-width:0; }
  .topbar, body.dark .topbar {
    position:sticky; top:0; height:calc(60px + env(safe-area-inset-top));
    margin:0; padding:calc(6px + env(safe-area-inset-top)) 12px 6px;
    border:0; border-bottom:1px solid var(--chrome-line); border-radius:0 !important;
    background:var(--chrome) !important; color:var(--chrome-ink);
    box-shadow:none; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  }
  .topbar .icon-btn { background:transparent !important; box-shadow:none; color:var(--chrome-ink); border:0; border-radius:8px; }
  .topbar .search-box { background:color-mix(in srgb,var(--chrome) 92%,var(--chrome-ink)) !important; border:0 !important; box-shadow:none !important; height:44px; }
  .topbar .search-box, .topbar .search-box input { color:var(--chrome-ink); }
  .topbar .search-box input { font-size:16px; }
  .topbar .search-box input::placeholder { color:var(--chrome-muted); }
  .topbar .sync-pill { display:none; }
  .content { padding:22px 16px calc(98px + env(safe-area-inset-bottom)); }
  .mobile-dock, body.dark .mobile-dock {
    left:0; right:0; bottom:0; height:calc(72px + env(safe-area-inset-bottom));
    padding:7px max(8px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
    border:0; border-top:1px solid var(--chrome-line); border-radius:0 !important;
    background:var(--chrome) !important; box-shadow:0 -3px 12px #0000000a;
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  }
  .mobile-dock a, .mobile-dock button { min-height:56px; font-size:12px; font-weight:500; gap:5px; color:var(--chrome-muted); }
  .mobile-dock .icon { width:23px; height:23px; }
  .mobile-dock .active { color:var(--chrome-ink); background:var(--rose-soft); }
  .mobile-dock i { font-size:10px; min-width:17px; height:17px; right:15%; top:0; }
  body.keyboard-open .mobile-dock { display:none; }
  body.keyboard-open .content { padding-bottom:24px; }
  .page-heading { gap:12px; margin-bottom:20px; }
  .page-heading h1 { font-size:26px; line-height:1.18; letter-spacing:-.7px; overflow-wrap:anywhere; }
  .page-heading .eyebrow { font-size:12px; letter-spacing:.6px; line-height:1.5; }
  .page-heading p.muted { font-size:14px; line-height:1.5; }
  .page-heading .actions { display:flex; flex-wrap:wrap; overflow:visible; gap:8px; }
  .page-heading .actions .btn { flex:1 1 auto; }
  .btn, .btn.small, .icon-btn, .filter-select select, .catalog-toolbar select { min-height:44px; font-size:14px; }
  .icon-btn { min-width:44px; }
  .btn { justify-content:center; }
  .back-link { min-height:44px; margin-bottom:10px; display:inline-flex; align-items:center; font-size:14px; }
  .panel-head { padding:16px; gap:12px; flex-wrap:wrap; }
  .panel-head h2 { font-size:18px; line-height:1.3; }
  .panel-head .actions { flex-wrap:wrap; overflow:visible; }
  .panel-body { padding:0 16px 16px; }
  .text-link { font-size:14px; min-height:40px; display:inline-flex; align-items:center; }
  .dashboard-workspace { display:flex; flex-direction:column; gap:14px; }
  .dashboard-workspace > [data-widget] { width:100%; }
  .dashboard-workspace > [data-widget="today"] { order:-1 !important; }
  .overview-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); padding:0 16px 16px; }
  .overview-metrics > a, .overview-metrics > a:first-child { padding:8px; border:0; border-left:1px solid var(--line); }
  .overview-metrics > a:first-child { border-left:0; padding-left:0; }
  .overview-metrics > a:last-child { grid-column:auto; }
  .overview-metrics strong { font-size:24px; }
  .overview-metrics span, .overview-metrics small { font-size:12px; overflow-wrap:anywhere; }
  .overview-portfolio { padding:16px; }
  .overview-portfolio .hero-value { font-size:29px; }
  .overview-portfolio .hero-value span { color:var(--ink); font-size:16px; }
  .overview-portfolio .chart { height:65px; }
  .chart-labels, .portfolio-growth { font-size:12px; color:var(--muted); }
  .empty { padding:24px 16px; }
  .empty p { font-size:14px; line-height:1.5; }
  .task-row { padding:16px; gap:12px; flex-wrap:wrap; align-items:center; }
  .task-main { flex:1; min-width:130px; }
  .task-row p, .task-main > a { font-size:16px; line-height:1.45; }
  .task-row small { font-size:12px; line-height:1.6; }
  .task-row .icon-btn { min-width:44px; min-height:44px; }
  .check-task { width:32px; height:32px; margin:6px; }
  .stats { gap:10px; }
  .stat-label { font-size:14px; line-height:1.35; }
  .stat-foot { font-size:12px; line-height:1.4; }
  .stat-value { font-size:25px; }
  .client-heading { display:flex; flex-direction:column; align-items:stretch; gap:12px; }
  .client-heading h1 { font-size:25px; line-height:1.2; overflow-wrap:anywhere; }
  .client-heading .person { align-items:flex-start; }
  .client-heading .muted { font-size:14px; line-height:1.5; }
  .client-heading > .actions { display:flex; flex-wrap:wrap; gap:8px; }
  .client-heading > .actions .btn { flex:1 1 auto; width:auto; font-size:14px; }
  .client-tags { margin:14px 0; }
  .tabs[aria-label="Карточка клиента"] { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; white-space:normal; overflow:visible; background:none !important; padding:0; border:0; box-shadow:none; }
  .tabs[aria-label="Карточка клиента"] .tab { min-height:44px; padding:10px; font-size:14px; white-space:normal; text-align:left; border:1px solid var(--line); background:var(--frost); }
  .segments { flex-wrap:wrap; white-space:normal; overflow:visible; gap:6px; }
  .segments .segment { min-height:44px; font-size:14px; padding:9px 11px; white-space:normal; }
  .segments.inner { padding:0 16px 16px; }
  .object-tabs { flex-wrap:wrap; overflow:visible; white-space:normal; }
  .object-tabs > * { flex:1 1 42%; min-height:44px; font-size:14px; justify-content:center; }
  .details-grid dt, .field > span { font-size:14px; }
  .details-grid dd { font-size:16px; }
  .client-card-main h2 { font-size:21px; }
  .client-card small, .client-card-foot, .client-card .eyebrow { font-size:12px; }
  .clients-toolbar, .clients-toolbar .actions { grid-template-columns:repeat(2,minmax(0,1fr)); min-width:0; }
  .clients-toolbar .filter-select { min-width:0; }
  .clients-toolbar select { width:100%; min-width:0; font-size:16px; }
  .clients-toolbar .search-box input { min-width:0; width:100%; font-size:16px; }
  select, body.dark select { background:var(--chrome) !important; color:var(--chrome-ink); border-color:var(--chrome-line); }
  .calendar-week span { font-size:12px; }
  .tag { font-size:12px; }
  .listing-photo { height:auto; aspect-ratio:16/10; }
  .property-prices { flex-wrap:wrap; }
  .catalog-toolbar input, .catalog-toolbar select, .toolbar select { font-size:16px; min-width:0; }
  .recipient-list { display:grid; grid-template-columns:1fr; max-height:300px; overflow-y:auto; overflow-x:hidden; }
  .recipient { min-width:0; }
  .recipient small, .message-preview strong { font-size:12px; }
  .compose-tools { flex-wrap:wrap; }
  .field input, .field textarea, .field select { font-size:16px; min-height:48px; scroll-margin:90px 0 100px; }
  dialog, dialog.wide {
    position:fixed; inset:var(--visual-top, 0px) 0 auto !important; width:100%; max-width:100%;
    height:var(--visual-height, 100dvh); max-height:var(--visual-height, 100dvh);
    padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
    margin:0 !important; border:0; border-radius:0 !important; overscroll-behavior:contain;
  }
  .modal-heading { position:sticky; top:calc(-16px - env(safe-area-inset-top)); margin:0 -16px 20px; padding:calc(12px + env(safe-area-inset-top)) 16px 12px; border-bottom:1px solid var(--chrome-line); z-index:3; align-items:center; }
  .modal-heading h1 { font-size:23px; line-height:1.25; }
  .modal-heading .eyebrow { font-size:12px; }
  .modal-heading .icon-btn { min-width:44px; min-height:44px; }
  .modal-footer { position:sticky; bottom:calc(-16px - env(safe-area-inset-bottom)); margin-inline:-16px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--chrome-line); gap:10px; }
  .modal-footer .btn { font-size:16px; min-height:48px; }
  .sidebar, body.dark .sidebar {
    top:auto; bottom:calc(82px + env(safe-area-inset-bottom)); left:10px; width:calc(100% - 20px); max-height:calc(100dvh - 120px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    height:auto; padding:16px; background:var(--chrome) !important; color:var(--chrome-ink); border-color:var(--chrome-line); overflow:auto;
    transform:translateY(18px); opacity:0; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  }
  body .sidebar.open, body.dark .sidebar.open { transform:translateY(0); opacity:1; }
  .sidebar .brand { padding:0 0 12px; }
  .sidebar .brand-text { color:var(--chrome-ink); }
  .sidebar .brand img { width:44px; height:44px; }
  .sidebar .section-label { display:none !important; }
  .sidebar nav { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
  .sidebar.open .nav-link { margin:0; padding:10px; font-size:14px; color:var(--chrome-ink); min-height:50px; gap:10px; }
  .sidebar .nav-link .icon { width:19px; height:19px; flex-shrink:0; }
  .sidebar .nav-count { display:none !important; }
  .sidebar .sidebar-bottom { margin-top:12px; }
  .sidebar .team-seats { display:none; }
  .sidebar .profile { padding:12px 0 0; border-top:1px solid var(--chrome-line); gap:10px; }
  .sidebar .profile strong { color:var(--chrome-ink); font-size:14px; }
  .sidebar .profile small, .sidebar .signout { color:var(--chrome-muted) !important; font-size:12px; }
  .sidebar-scrim { background:#0006; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
  .documents-table, .documents-table tbody, .documents-table tr, .documents-table td { display:block; width:100%; min-width:0 !important; }
  .documents-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .documents-table tbody { padding:0 16px; }
  .documents-table tr { position:relative; padding:16px 0; border-top:1px solid var(--line); }
  .documents-table td { border:0; padding:5px 0; font-size:14px; white-space:normal; overflow-wrap:anywhere; }
  .documents-table td::before { content:attr(data-label); display:block; font-size:12px; color:var(--muted); margin-bottom:3px; }
  .documents-table td:first-child { padding-right:44px; }
  .documents-table td:first-child::before, .documents-table td:last-child::before { display:none; }
  .documents-table td:last-child { position:absolute; right:0; top:15px; width:44px; }
  .document-name { font-size:16px; max-width:100%; }
  .document-name > svg { flex-shrink:0; }
  .document-name small { font-size:12px; }
  .experience-card p, .experience-toggle small, .appearance-note, .experience-note { font-size:12px; }
  .appearance-control strong, .experience-toggle strong, .widget-visible strong { font-size:14px; }
  .appearance-controls input[type=range], .widget-opacity input[type=range] { min-height:32px; }
  .demo-footer { font-size:12px; line-height:1.5; gap:8px; }
  #toast { bottom:calc(86px + env(safe-area-inset-bottom)); background:var(--chrome) !important; color:var(--chrome-ink) !important; font-size:14px; }
}

@media (max-width:380px) { .clients-toolbar .actions { grid-template-columns:minmax(0,1fr); } }
@media (prefers-reduced-motion:reduce) { .sidebar { transition:none; } }