/* Aromika CRM · Design 11
 * Loaded after the legacy patch styles. No chart grid, canvas or messenger
 * viewport dimensions are changed here. Theme selection is local to this device.
 */
@font-face{font-family:Inter;src:url('/assets/fonts/inter-cyrillic-ext.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap;unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:Inter;src:url('/assets/fonts/inter-cyrillic.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Inter;src:url('/assets/fonts/inter-latin-ext.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;src:url('/assets/fonts/inter-latin.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Manrope;src:url('/assets/fonts/manrope-cyrillic-ext.woff2') format('woff2');font-style:normal;font-weight:200 800;font-display:swap;unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:Manrope;src:url('/assets/fonts/manrope-cyrillic.woff2') format('woff2');font-style:normal;font-weight:200 800;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;src:url('/assets/fonts/manrope-latin-ext.woff2') format('woff2');font-style:normal;font-weight:200 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Manrope;src:url('/assets/fonts/manrope-latin.woff2') format('woff2');font-style:normal;font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root[data-design]{
  --bg:#f5f5f6;--surface:#fff;--surface2:#f4f4f5;
  --ink:#18181b;--text:var(--ink);--muted:#5b5b66;--line:#dedee4;
  --accent:#ad2158;--soft:#fcecf3;--d11-action:#ad2158;--d11-action-hover:#8e1746;
  --d11-good:#126a48;--d11-good-bg:#e7f5ec;--d11-warn:#855107;--d11-warn-bg:#fff3d9;
  --d11-bad:#b12446;--d11-bad-bg:#ffedf1;--d11-info:#305da8;--d11-info-bg:#eaf0ff;
  --d11-control:#92929e;--d11-focus:#ad2158;--d11-radius:12px;--d11-control-radius:9px;
  --d11-nav:#fff;--d11-glass:#fffffff0;--d11-scrim:#15151e8c;
  --shadow:0 1px 2px #18181b04;--d11-dialog-shadow:0 24px 80px #19152530;
  --d11-font:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --d11-heading:Manrope,Inter,ui-sans-serif,system-ui,sans-serif;
  font-family:var(--d11-font);color-scheme:light;
}
:root[data-design][data-theme=dark]{
  --bg:#151519;--surface:#202025;--surface2:#29292f;
  --ink:#f7f7fa;--muted:#b9b9c5;--line:#3b3b46;
  --accent:#ff92bd;--soft:#3c2430;--d11-action:#a91c56;--d11-action-hover:#b7205e;
  --d11-good:#86dcaf;--d11-good-bg:#1d382d;--d11-warn:#f3c873;--d11-warn-bg:#3d3020;
  --d11-bad:#ff9ab2;--d11-bad-bg:#422532;--d11-info:#a9c7ff;--d11-info-bg:#26344e;
  --d11-control:#72727f;--d11-focus:#ff92bd;--d11-nav:#1c1c21;--d11-glass:#211f2bf0;
  --d11-scrim:#09090cb8;--shadow:0 1px 2px #0002;--d11-dialog-shadow:0 24px 80px #0007;
  color-scheme:dark;
}
:root[data-design=glass]{
  --bg:#f9f4f9;--surface:#fff;--surface2:#f6f2f8;--ink:#29222f;--muted:#655c70;
  --line:#e5ddea;--accent:#a72364;--soft:#faeaf3;--d11-action:#a72364;--d11-action-hover:#8b1b53;
  --d11-focus:#a72364;--d11-control:#978a9e;--d11-radius:20px;--d11-control-radius:12px;
  --d11-nav:#fcf8fd;--d11-glass:#fffafddf;
  --shadow:0 5px 20px #45285107,0 1px 3px #45285104;
}
:root[data-design=glass][data-theme=dark]{
  --bg:#17131d;--surface:#24212b;--surface2:#2d2935;--ink:#f8f4fb;--muted:#c3b6ce;
  --line:#433a50;--accent:#ffa0d0;--soft:#422637;--d11-action:#a52365;--d11-action-hover:#b42a70;
  --d11-focus:#ffa0d0;--d11-control:#81728f;--d11-nav:#241e2e;--d11-glass:#261f31eb;
  --shadow:0 6px 24px #08051022,0 1px 3px #08051020;
}

/* A steady reading surface, with decoration behind the app rather than data. */
:root[data-design] body{font-family:var(--d11-font);font-size:14px;line-height:1.45;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
:root[data-design=glass] body{background-image:radial-gradient(ellipse 75vw 65vh at 8% 0%,#efd9ee 0,transparent 74%),radial-gradient(ellipse 60vw 65vh at 100% 10%,#e6def5 0,transparent 76%);background-repeat:no-repeat}
:root[data-design=glass][data-theme=dark] body{background-image:radial-gradient(ellipse 75vw 65vh at 8% 0%,#382338 0,transparent 74%),radial-gradient(ellipse 60vw 65vh at 100% 10%,#2b2345 0,transparent 76%)}
:root[data-design] :where(h1,h2,h3,h4){font-family:var(--d11-heading);font-weight:750;color:var(--ink)}
:root[data-design] h1{letter-spacing:-.045em;line-height:1.15}
:root[data-design] h2{letter-spacing:-.035em;line-height:1.25}
:root[data-design] h3{letter-spacing:-.02em;line-height:1.35}
:root[data-design] :where(button,input,select,textarea){font-family:var(--d11-font)}
:root[data-design] :where(.kpi strong,.dash-kpi strong,.p6-stats dd,.p9-security-kpis b){font-family:var(--d11-heading);font-variant-numeric:tabular-nums;letter-spacing:-.035em}
:root[data-design] :where(.table td,.data-table td,.p8-team-row,.audit){font-variant-numeric:tabular-nums}
:root[data-design] :where(.page-head p,.identity small,.status-bar,.nav-label,.a7-info,.a4-note){color:var(--muted)}
:root[data-design] .eyebrow{font-size:11px;font-weight:750;letter-spacing:.09em}
:root[data-design] .nav-label{font-size:11px;letter-spacing:.09em;font-weight:650}
:root[data-design] .page-head p{line-height:1.5}

/* Controls: text and interactive boundaries retain contrast in all four modes. */
:root[data-design] button{border-radius:var(--d11-control-radius);font-weight:550;transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease}
:root[data-design] button:hover{filter:none}
:root[data-design] button:disabled{opacity:.5;cursor:not-allowed}
:root[data-design] :where(.primary,.icon-button.primary,.a4-login-submit){color:#fff;background:var(--d11-action);border-color:var(--d11-action);box-shadow:0 2px 4px #5b18300d}
:root[data-design] :where(.primary,.icon-button.primary,.a4-login-submit):hover{color:#fff;background:var(--d11-action-hover);border-color:var(--d11-action-hover);filter:none}
:root[data-design] :where(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){background:var(--surface);color:var(--ink);border-color:var(--d11-control);border-radius:var(--d11-control-radius)}
:root[data-design] :where(input,textarea)::placeholder{color:var(--muted);opacity:1}
:root[data-design] :where(input[type=checkbox],input[type=radio],input[type=range]){accent-color:var(--d11-action)}
:root[data-design] label{color:var(--muted);line-height:1.45}
:root[data-design] :where(a,button,input,select,textarea,summary,[role=button]):focus-visible{outline:3px solid var(--d11-focus);outline-offset:3px}
:root[data-design] .a4-input:focus-within{outline:3px solid var(--d11-focus);outline-offset:3px}
:root[data-design] .a4-input input:focus-visible{outline:0}
:root[data-design] :where(.danger,.bad-text){color:var(--d11-bad)!important}
:root[data-design] :where(.ok-text,.p6-stats dd.is-positive){color:var(--d11-good)!important}
:root[data-design] .p6-stats dd.is-negative{color:var(--d11-bad)!important}
:root[data-design] :where(.badge,.notice,.tabs,.checklist-users){border-color:var(--line)}
:root[data-design] .badge{font-weight:550;font-size:12px;line-height:1.35}
:root[data-design] .badge.accent{background:var(--soft);color:var(--accent)}
:root[data-design] .badge.good{background:var(--d11-good-bg);color:var(--d11-good)}
:root[data-design] .badge.warn{background:var(--d11-warn-bg);color:var(--d11-warn)}
:root[data-design] .form-error{background:var(--d11-bad-bg);color:var(--d11-bad)}
:root[data-design] .notice{background:var(--soft);border-left-color:var(--accent);color:var(--ink);border-radius:4px var(--d11-control-radius) var(--d11-control-radius) 4px}
:root[data-design] .vip{background:var(--surface2);color:var(--accent)}

/* Shell: transparent effects are restricted to these three navigation surfaces. */
:root[data-design] :where(.sidebar,.topbar,.a4-bottom-nav){background:var(--d11-nav);border-color:var(--line);backdrop-filter:none;-webkit-backdrop-filter:none}
:root[data-design] .sidebar{overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:thin}
:root[data-design] .sidebar .brand b{font-size:11px;font-weight:750;letter-spacing:.08em;color:var(--muted)}
:root[data-design] .nav button{position:relative;color:var(--muted);font-weight:550}
:root[data-design] .nav button:hover{background:var(--surface2);color:var(--ink)}
:root[data-design] .nav button.active{background:var(--soft);color:var(--accent);font-weight:750;box-shadow:inset 3px 0 0 var(--accent)}
:root[data-design=focus] .nav button.active{border-radius:8px}
:root[data-design=glass] .nav button.active{box-shadow:inset 0 0 0 1px #b23c7b24,0 3px 8px #59234909;border-radius:14px}
:root[data-design] .nav button .svg{stroke-width:1.8}
:root[data-design] .topbar{box-shadow:none}
:root[data-design] .topbar .icon-button:not(.primary){background:var(--surface);border-color:var(--line)}
:root[data-design] .identity{border-top:1px solid var(--line);margin-top:10px;padding-top:14px}
:root[data-design] .identity strong{font-weight:650}
:root[data-design] .identity small{font-size:12px}
:root[data-design] .avatar{background:var(--soft);color:var(--accent);border-radius:10px}
:root[data-design=glass] .avatar{border-radius:13px}
:root[data-design] .a4-bottom-nav button.active{color:var(--accent);background:var(--soft);font-weight:750}
:root[data-design] .a4-bottom-nav button span{font-size:11px}
:root[data-design] .a7-preview-banner{background:var(--soft);border-bottom-color:var(--line)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root[data-design=glass] :where(.sidebar,.topbar,.a4-bottom-nav){background:var(--d11-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
}

/* Cards and hierarchy; chart internals keep their existing viewport and spacing. */
:root[data-design] :where(.card,.dialog,.task-card,.board-col,.p9-security-kpis>div){background:var(--surface);border-color:var(--line);border-radius:var(--d11-radius);box-shadow:var(--shadow)}
:root[data-design] .card{border-radius:var(--d11-radius);backdrop-filter:none;-webkit-backdrop-filter:none}
:root[data-design] .board-col{background:var(--surface2);box-shadow:none}
:root[data-design] .task-card{border-radius:var(--d11-control-radius)}
:root[data-design] .task-card:hover{border-color:var(--d11-control);box-shadow:0 3px 12px #2920330a}
:root[data-design] .hero{background:var(--surface);border-color:var(--line);box-shadow:var(--shadow)}
:root[data-design=glass] .hero{background:linear-gradient(120deg,var(--surface) 60%,var(--soft))}
:root[data-design] .hero .kicker{font-weight:700;color:var(--accent);letter-spacing:.1em}
:root[data-design] .kpi strong{font-weight:750;line-height:1.2}
:root[data-design] .dash-kpi{border-top:2px solid var(--line)}
:root[data-design] .dash-kpi:first-child{border-top-color:var(--accent)}
:root[data-design=glass] .dash-kpi{border-top-width:1px;border-color:var(--line);background:var(--surface);box-shadow:var(--shadow)}
:root[data-design=glass] .dash-kpi:first-child{background:var(--soft);border-color:#b23c7b40}
:root[data-design] :where(.tabs,.oc-tabs){background:var(--surface2);border-color:var(--line);border-radius:var(--d11-control-radius)}
:root[data-design] :where(.tabs,.oc-tabs) button.active{background:var(--surface);color:var(--accent);box-shadow:0 1px 3px #25202d15;font-weight:700}
:root[data-design] .admin-tabs button.active{background:var(--d11-action)!important;color:#fff!important}
:root[data-design] .a4-trend-tabs button.active{background:var(--d11-action);color:#fff}
:root[data-design] .analytics-filterbar{background:var(--surface);border-color:var(--line);box-shadow:none}
:root[data-design] .a4-filter-chips button{background:var(--soft);color:var(--accent)}
:root[data-design] :where(.p6-top-badge,.p8-rating){background:var(--soft);color:var(--accent)}
:root[data-design] .p6-media{background:var(--surface2);border-color:var(--line)}
:root[data-design] :where(.a4-product-image,.p6-image-state){background:var(--surface2);color:var(--muted)}
:root[data-design] .a7-expand{color:var(--muted)}
:root[data-design] .p9-brand-crumbs button:last-child{color:var(--ink)}

/* Focus gives operational lists a flatter, denser visual rhythm. */
:root[data-design] :where(.table,.data-table){color:var(--ink);background:var(--surface)}
:root[data-design] :where(.table,.data-table) th{background:var(--surface2);color:var(--muted);font-weight:650;font-size:12px;line-height:1.4;border-color:var(--line)}
:root[data-design] :where(.table,.data-table) td{font-size:14px;line-height:1.45;border-color:var(--line)}
:root[data-design=focus] :where(.table,.data-table) td{padding-top:11px;padding-bottom:11px}
:root[data-design=glass] :where(.table,.data-table) td{padding-top:14px;padding-bottom:14px}
:root[data-design] :where(.table,.data-table) tr:hover td{background:var(--surface2)}
:root[data-design] .data-table .tr>span{font-size:14px;line-height:1.45}
:root[data-design] .data-table .th>span{font-size:12px;font-weight:650;text-transform:none;letter-spacing:0}
:root[data-design] .data-table .tr:not(.th):hover>span{background:var(--surface2)}
:root[data-design] .table-scroll{border-radius:var(--d11-control-radius);scrollbar-width:thin}
:root[data-design] .p8-team-header{background:var(--surface2);color:var(--muted);font-weight:650}
:root[data-design] :where(.p8-team-group,.p8-admin-person,.p9-session){border-color:var(--line)}
:root[data-design] .p8-team-group>summary{font-family:var(--d11-heading);font-weight:700}
:root[data-design] .profile-id{background:var(--surface)}
:root[data-design] .profile-id .avatar{border:4px solid var(--surface);box-shadow:0 0 0 1px var(--line);border-radius:24px}
:root[data-design] .profile-fields strong{font-weight:600;line-height:1.5}
:root[data-design] .profile-fields span{font-size:12px;color:var(--muted)}
:root[data-design] .feed-post>.row>div>b{display:block;font-weight:650}
:root[data-design] .feed-post>.row>div>small{display:block;font-size:12px;margin-top:3px}
:root[data-design] .tags span{background:var(--d11-info-bg);color:var(--d11-info);font-size:12px}
:root[data-design] :where(.oc-workspace){--oc-node:var(--surface);--oc-canvas:var(--bg);--oc-text:var(--ink);--oc-muted:var(--muted);--oc-card-border:var(--line);--oc-muted-bg:var(--surface2);--oc-elevation:var(--shadow)}

/* Conversations: solid bubbles, distinct sender states and a quiet reading area. */
:root[data-design] :where(.chat-list,.chat-main,.chat-side,.chat-head,.compose){background:var(--surface);border-color:var(--line)}
:root[data-design] .messages{background:var(--bg)}
:root[data-design] .bubble{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:0 1px 2px #19151e04}
:root[data-design] .mine .bubble{background:var(--soft);border-color:var(--line);color:var(--ink)}
:root[data-design] .chat-list .list button.active{background:var(--soft);color:var(--ink)}
:root[data-design] .chat-list .list .p8-dialog.active .p8-dialog-copy b{color:var(--accent)}
:root[data-design] :where(.p8-unread){background:var(--d11-action);color:#fff}
:root[data-design] .p9-read-state.is-read{color:var(--d11-info)}
:root[data-design] :where(.msg-file,.p8-side-file){background:var(--surface);color:var(--accent);border-color:var(--line)}
:root[data-design] .compose textarea{background:var(--surface2);border-radius:var(--d11-control-radius)}
:root[data-design] .compose .tools .primary.icon-button{background:var(--d11-action);color:#fff}
:root[data-design] .compose .tools .primary.icon-button:hover{background:var(--d11-action-hover);color:#fff}
:root[data-design] .p8-dialog-meta{font-size:12px}
:root[data-design] .p8-chat-head>div:first-of-type>small{font-size:12px}

/* Calendar and dialogs stay opaque even when the navigation uses glass. */
:root[data-design] .weekdays{background:var(--surface2)}
:root[data-design] .weekdays div{font-weight:650;color:var(--muted)}
:root[data-design] .day.today{background:var(--soft)}
:root[data-design] .day.today .day-n{background:var(--d11-action);color:#fff}
:root[data-design] .cal-event{background:var(--soft);color:var(--accent);font-weight:550}
:root[data-design] .cal-event.deadline{background:var(--d11-info-bg);color:var(--d11-info)}
:root[data-design] .cal-event.note{background:var(--d11-warn-bg);color:var(--d11-warn)}
:root[data-design] .dialog-backdrop{background:var(--d11-scrim);backdrop-filter:none;-webkit-backdrop-filter:none}
:root[data-design] .dialog{background:var(--surface);box-shadow:var(--d11-dialog-shadow)}
:root[data-design] .dialog-head{background:var(--surface);border-color:var(--line)}
:root[data-design] .dialog-head h2{font-family:var(--d11-heading);font-weight:750}
:root[data-design] .dialog-body{color:var(--ink)}
:root[data-design] #toast{background:var(--ink);color:var(--surface);box-shadow:0 4px 20px #0002}

/* The selected design also applies before login, with the original brand asset. */
:root[data-design] :where(.a4-login,.a4-login-art,.a4-login-main){background:var(--bg);color:var(--ink)}
:root[data-design] .a4-login-art{background:var(--surface2);border-right:1px solid var(--line)}
:root[data-design] .a4-login-card{background:var(--surface);border-color:var(--line);border-radius:var(--d11-radius);box-shadow:var(--shadow);backdrop-filter:none;-webkit-backdrop-filter:none}
:root[data-design] .a4-login-card .brand b{color:var(--muted)}
:root[data-design] .a4-login h1 em{color:var(--accent)}
:root[data-design] :where(.a4-kicker,.a4-help){color:var(--accent)}
:root[data-design] :where(.a4-login-copy p,.a4-login-intro,.a4-login-card label,.a4-security,.a4-login-foot,.a4-login-divider){color:var(--muted)}
:root[data-design] .a4-input{background:var(--surface);border-color:var(--d11-control);color:var(--muted);border-radius:var(--d11-control-radius)}
:root[data-design] .a4-input input{background:transparent;color:var(--ink)}
:root[data-design] .a4-input button{color:var(--muted)}
:root[data-design] .a4-input input::placeholder{color:var(--muted)}
:root[data-design] .a4-login .form-error{background:var(--d11-bad-bg);color:var(--d11-bad)}
:root[data-design] .a4-register{color:var(--accent);border-color:var(--d11-control)}
:root[data-design] .a4-login-divider:before,:root[data-design] .a4-login-divider:after{background:var(--line)}
:root[data-design] .a4-rule{background:var(--accent)}
:root[data-design][data-theme=dark] .a4-login-card .brand img{filter:invert(1) brightness(1.15)!important}
:root[data-design] .a4-landscape{background:radial-gradient(ellipse at 40% 100%,var(--soft),transparent 72%)}
:root[data-design=focus] .a4-landscape{opacity:.25;filter:grayscale(1)}
:root[data-design=focus] .a4-login-art:before{display:none}
:root[data-design=glass] .a4-login-art{background:radial-gradient(ellipse at 10% 5%,var(--surface) 0,transparent 70%),linear-gradient(145deg,var(--bg),var(--soft));border-right-color:var(--line)}
:root[data-design=glass] .a4-login-main{background:transparent}
:root[data-design=glass] .a4-login{background:linear-gradient(125deg,var(--bg),var(--surface2))}
:root[data-design=glass] .a4-login-card{box-shadow:0 18px 65px #43234f0c}

@media(min-width:901px){
  :root[data-design=focus] .nav{gap:4px}
  :root[data-design=focus] .nav button{padding-top:10px;padding-bottom:10px}
  :root[data-design=focus] .page:not(.a7-analytics)>.page-head{padding-bottom:18px;border-bottom:1px solid var(--line)}
  :root[data-design=glass] .sidebar{border-radius:0 22px 22px 0;box-shadow:3px 0 20px #3f245406}
  :root[data-design=glass] .topbar{box-shadow:0 2px 12px #3f245404}
  :root[data-design] .page:not(.a7-analytics) .kpi small,:root[data-design] .page:not(.a7-analytics) .dash-kpi small{font-size:12px}
  :root[data-design] .page:not(.a7-analytics) .dash-kpi span{font-size:12px}
  :root[data-design] .page:not(.a7-analytics) .page-head h1{font-size:30px}
}
@media(max-width:900px){
  :root[data-design] .page:not(.a7-analytics){padding-left:16px;padding-right:16px}
  :root[data-design] .page-head h1{font-size:25px;line-height:1.2}
  :root[data-design] .page-head p{font-size:12px}
  :root[data-design] .topbar{gap:8px}
  :root[data-design] .topbar .icon-button{width:44px;height:44px;min-width:44px;min-height:44px}
  :root[data-design] .a4-bottom-nav button{min-height:48px;border-radius:var(--d11-control-radius)}
  :root[data-design] .a4-bottom-nav button span{font-size:11px}
  :root[data-design] .a4-bottom-sheet{border-radius:22px 22px 0 0}
  :root[data-design] .a4-login-art{border-right:0;border-bottom:1px solid var(--line)}
  :root[data-design] :where(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){font-size:16px}
  :root[data-design] .a4-input button{min-height:44px;min-width:44px}
  :root[data-design] .crm-chat-page .messages{background:var(--bg)}
  :root[data-design] .crm-chat-page .bubble{background:var(--surface)}
  :root[data-design] .crm-chat-page .message.mine .bubble{background:var(--soft);border-color:var(--line)}
  :root[data-design] .crm-chat-page .compose .tools button{width:44px;height:44px;min-width:44px;min-height:44px}
  :root[data-design] .crm-chat-page .compose textarea{background:var(--surface2)}
  :root[data-design] .crm-chat-page .chat-list input{background:var(--surface2)}
  :root[data-design] .crm-chat-page .chat-head .a4-chat-back{width:44px;height:44px;min-width:44px;min-height:44px}
}
@media(max-width:400px){
  :root[data-design] .topbar{padding-left:10px;padding-right:10px;gap:6px}
  :root[data-design] .top-actions{gap:5px}
  :root[data-design] .a4-bottom-nav button span{font-size:10px}
}
/* These fallbacks use solid navigation and no animation, preserving all actions. */
@media(prefers-reduced-transparency:reduce){
  :root[data-design] :where(.sidebar,.topbar,.a4-bottom-nav){background:var(--d11-nav);backdrop-filter:none;-webkit-backdrop-filter:none}
  :root[data-design=glass] body{background-image:none}
}
@media(prefers-reduced-motion:reduce){
  :root[data-design] :where(button,input,select,textarea,.card,.sidebar,.topbar){transition:none;animation:none}
}
@media(forced-colors:active){
  :root[data-design] body{background:Canvas;color:CanvasText}
  :root[data-design] :where(.sidebar,.topbar,.a4-bottom-nav,.card,.dialog,.task-card){background:Canvas;color:CanvasText;border:1px solid CanvasText;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  :root[data-design] :where(.primary,.a4-login-submit){forced-color-adjust:auto;border:1px solid ButtonText}
  :root[data-design] .nav button.active,:root[data-design] .a4-bottom-nav button.active{outline:2px solid Highlight;outline-offset:-3px}
}