/* macOS (Human Interface Guidelines): the system font at 13px, system colours and the accent, translucent sidebars
   over a soft wallpaper, Mail's list (blue dot on unread, the selection filled with the accent), Messages bubbles
   with tails, segmented controls, menus that highlight in the accent, a Spotlight-style search, notification
   banners at the top right and the Apple sheet curve. data-base "sequoia" is the classic look; "glass" is Liquid
   Glass: a floating glass sidebar, capsule controls with a specular edge and rounder corners. Phones get iOS:
   large titles and a translucent tab bar.
   Loaded after themes.css and app.css; every rule is scoped to [data-theme="macos"]. Raw values are --mac-*. */

[data-theme="macos"] {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, Monaco, monospace;

  --bg: #f5f5f7; --paper: #ffffff; --paper-2: rgb(246 246 246 / .78); --card: #ffffff; --elevated: rgb(246 246 246 / .86);
  --subtle: rgb(0 0 0 / .05); --hover: rgb(0 0 0 / .05); --active: rgb(0 0 0 / .09);
  --fg: rgb(0 0 0 / .85); --fg-2: rgb(0 0 0 / .78); --fg-3: rgb(0 0 0 / .58); --fg-muted: rgb(0 0 0 / .5);
  --border: rgb(0 0 0 / .1); --border-strong: rgb(0 0 0 / .2); --input: rgb(0 0 0 / .15);

  --primary: #007aff; --primary-hover: #0066d6; --primary-fg: #ffffff;
  --primary-soft: rgb(0 122 255 / .12); --primary-soft-fg: #0062cc;
  --ring: #007aff; --ring-alpha: 45%;
  --focus-w: 3px; --focus-c: rgb(0 122 255 / .5); --focus-o: 0px;

  --danger: #d70015; --danger-solid: #ff3b30; --danger-soft: rgb(255 59 48 / .12);
  --warn: #b25000; --warn-soft: rgb(255 149 0 / .14);
  --ok: #248a3d; --ok-solid: #34c759; --ok-soft: rgb(52 199 89 / .14);
  --snooze: #4b49c0; --snooze-solid: #5856d6; --snooze-soft: rgb(88 86 214 / .12);
  --label: #8944ab; --label-soft: rgb(175 82 222 / .12); --label-border: transparent;
  --sample: #c93400; --sample-soft: rgb(255 149 0 / .14);
  --unread: #007aff; --unread-line: rgb(0 122 255 / .35); --draft: #d70015;
  --note-bg: #fff9db; --note-border: #f5e19c; --note-fg: #6b5300; --note-strong: #8a6d00; --note-focus: #ffcc00; --note-soft: #fffcec;
  --fail-bg: #fff4e5; --fail-border: #ff9500;

  --bubble-in: #e9e9eb; --bubble-in-fg: #000000;
  --bubble-out: var(--primary); --bubble-out-fg: #ffffff;
  --bubble-other: #34c759; --bubble-other-fg: #ffffff; --bubble-other-border: transparent;
  --bubble-fail: #ffe5e3; --bubble-fail-border: rgb(255 59 48 / .4); --bubble-fail-fg: #000000;
  --file-bg: rgb(0 0 0 / .04); --file-border: rgb(0 0 0 / .1);
  --summary-bg: #ffffff; --summary-border: transparent; --summary-fg: rgb(0 0 0 / .85);
  --sug-bg: rgb(0 0 0 / .05); --sug-border: transparent; --sug-hover: rgb(0 0 0 / .09); --sug-fg: rgb(0 0 0 / .85);
  --info-soft: rgb(0 122 255 / .1); --info-fg: #0062cc;
  --mark: rgb(255 204 0 / .4); --star: #ff9500;

  --toast-bg: rgb(246 246 246 / .86); --toast-fg: rgb(0 0 0 / .85); --toast-border: rgb(0 0 0 / .08); --toast-action: #007aff;
  --skel-a: rgb(0 0 0 / .05); --skel-b: rgb(0 0 0 / .09); --skel-anim: aa-pulse 1.6s ease-in-out infinite;
  --scrim: rgb(0 0 0 / .25); --scroll-shadow: rgb(0 0 0 / .1);
  --shadow-xs: 0 0 0 .5px rgb(0 0 0 / .12), 0 .5px 1.5px rgb(0 0 0 / .12);
  --shadow-sm: 0 0 0 .5px rgb(0 0 0 / .06), 0 1px 3px rgb(0 0 0 / .1);
  --shadow-md: 0 0 0 .5px rgb(0 0 0 / .12), 0 10px 30px rgb(0 0 0 / .18);
  --shadow-lg: 0 0 0 .5px rgb(0 0 0 / .15), 0 22px 70px 4px rgb(0 0 0 / .28);
  --shadow-side: 0 0 0 .5px rgb(0 0 0 / .1), 0 10px 30px rgb(0 0 0 / .16);

  /* Sequoia: radius 6 for controls, 10 for groups and menus, 18 for bubbles */
  --btn-radius: var(--r-lg); --field-radius: calc(var(--radius) * 1.2); --card-radius: calc(var(--radius) * 1.67); --menu-radius: calc(var(--radius) * 1.34);
  --item-radius: calc(var(--radius) * .67); --chip-radius: var(--r-lg); --pill-radius: calc(var(--radius) * .67); --row-radius: calc(var(--radius) * 1.34);
  --bubble-radius: calc(var(--radius) * 3); --panel-radius: calc(var(--radius) * 2);
  --weight-strong: 600; --weight-head: 700; --weight-active: 600; --tracking-head: -.01em;
  --sec-transform: none; --sec-size: 11px; --sec-weight: 700; --sec-spacing: 0;
  --side-bg: rgb(246 246 246 / .7); --side-fg: rgb(0 0 0 / .85); --side-hover: rgb(0 0 0 / .05); --side-hover-fg: rgb(0 0 0 / .85);
  --side-active-bg: rgb(0 0 0 / .09); --side-active-fg: rgb(0 0 0 / .85); --side-muted: rgb(0 0 0 / .45);
  --side-border: rgb(0 0 0 / .08); --side-title: rgb(0 0 0 / .85); --side-sub-bg: transparent; --side-parent-fg: rgb(0 0 0 / .85);

  --mac-wallpaper: linear-gradient(140deg, #dfe9fb 0%, #efe6f7 45%, #fde7df 100%);
  --mac-blur: blur(30px) saturate(180%);
  --mac-material: rgb(246 246 246 / .82);
  --mac-glass: rgb(255 255 255 / .55); --mac-glass-edge: inset 0 1px 0 rgb(255 255 255 / .75), inset 0 0 0 1px rgb(255 255 255 / .35), 0 0 0 .5px rgb(0 0 0 / .1), 0 6px 20px rgb(0 0 0 / .08);
  --mac-intelligence: linear-gradient(100deg, #ff9f0a, #ff375f 30%, #bf5af2 60%, #0a84ff);
  color-scheme: light;
}
[data-theme="macos"][data-mode="dark"] {
  --bg: #1e1e1e; --paper: #1e1e1e; --paper-2: rgb(40 40 40 / .72); --card: #2a2a2a; --elevated: rgb(44 44 46 / .84);
  --subtle: rgb(255 255 255 / .07); --hover: rgb(255 255 255 / .06); --active: rgb(255 255 255 / .1);
  --fg: rgb(255 255 255 / .87); --fg-2: rgb(255 255 255 / .78); --fg-3: rgb(255 255 255 / .58); --fg-muted: rgb(255 255 255 / .5);
  --border: rgb(255 255 255 / .1); --border-strong: rgb(255 255 255 / .2); --input: rgb(255 255 255 / .15);

  --primary: #0a84ff; --primary-hover: #409cff; --primary-fg: #ffffff;
  --primary-soft: rgb(10 132 255 / .22); --primary-soft-fg: #409cff;
  --ring: #0a84ff; --focus-c: rgb(10 132 255 / .55);

  --danger: #ff453a; --danger-solid: #ff453a; --danger-soft: rgb(255 69 58 / .18);
  --warn: #ff9f0a; --warn-soft: rgb(255 159 10 / .16);
  --ok: #30d158; --ok-solid: #30d158; --ok-soft: rgb(48 209 88 / .16);
  --snooze: #7d7aff; --snooze-solid: #5e5ce6; --snooze-soft: rgb(94 92 230 / .2);
  --label: #da8fff; --label-soft: rgb(191 90 242 / .2);
  --sample: #ff9f0a; --sample-soft: rgb(255 159 10 / .16);
  --unread: #0a84ff; --unread-line: rgb(10 132 255 / .4); --draft: #ff453a;
  --note-bg: rgb(255 214 10 / .14); --note-border: rgb(255 214 10 / .3); --note-fg: #ffd60a; --note-strong: #8a6d00; --note-focus: #ffd60a; --note-soft: rgb(255 214 10 / .07);
  --fail-bg: rgb(255 159 10 / .14); --fail-border: rgb(255 159 10 / .45);

  --bubble-in: #3b3b3d; --bubble-in-fg: #ffffff;
  --bubble-other: #30d158; --bubble-other-fg: #ffffff;
  --bubble-fail: rgb(255 69 58 / .2); --bubble-fail-border: rgb(255 69 58 / .5); --bubble-fail-fg: #ffffff;
  --file-bg: rgb(255 255 255 / .05); --file-border: rgb(255 255 255 / .1);
  --summary-bg: #262626; --summary-fg: rgb(255 255 255 / .87);
  --sug-bg: rgb(255 255 255 / .08); --sug-hover: rgb(255 255 255 / .13); --sug-fg: rgb(255 255 255 / .87);
  --info-soft: rgb(10 132 255 / .2); --info-fg: #409cff;
  --mark: rgb(255 214 10 / .35); --star: #ff9f0a;

  --toast-bg: rgb(44 44 46 / .86); --toast-fg: rgb(255 255 255 / .87); --toast-border: rgb(255 255 255 / .08); --toast-action: #409cff;
  --skel-a: rgb(255 255 255 / .06); --skel-b: rgb(255 255 255 / .1);
  --scrim: rgb(0 0 0 / .45); --scroll-shadow: rgb(0 0 0 / .5);
  --shadow-xs: 0 0 0 .5px rgb(255 255 255 / .08), 0 .5px 1.5px rgb(0 0 0 / .4);
  --shadow-sm: 0 0 0 .5px rgb(255 255 255 / .06), 0 1px 3px rgb(0 0 0 / .4);
  --shadow-md: 0 0 0 .5px rgb(255 255 255 / .12), 0 10px 30px rgb(0 0 0 / .45);
  --shadow-lg: 0 0 0 .5px rgb(255 255 255 / .14), 0 22px 70px 4px rgb(0 0 0 / .56);
  --shadow-side: 0 0 0 .5px rgb(255 255 255 / .1), 0 10px 30px rgb(0 0 0 / .45);
  --side-bg: rgb(40 40 40 / .62); --side-fg: rgb(255 255 255 / .87); --side-hover: rgb(255 255 255 / .06); --side-hover-fg: rgb(255 255 255 / .87);
  --side-active-bg: rgb(255 255 255 / .1); --side-active-fg: rgb(255 255 255 / .87); --side-muted: rgb(255 255 255 / .45);
  --side-border: rgb(255 255 255 / .08); --side-title: rgb(255 255 255 / .87); --side-parent-fg: rgb(255 255 255 / .87);

  --mac-wallpaper: linear-gradient(140deg, #18213a 0%, #271d39 50%, #37222d 100%);
  --mac-material: rgb(44 44 46 / .82);
  --mac-glass: rgb(70 70 74 / .4); --mac-glass-edge: inset 0 1px 0 rgb(255 255 255 / .18), inset 0 0 0 1px rgb(255 255 255 / .08), 0 0 0 .5px rgb(0 0 0 / .4), 0 6px 20px rgb(0 0 0 / .3);
  color-scheme: dark;
}
/* Liquid Glass: capsules, rounder groups and menus */
[data-theme="macos"][data-base="glass"] {
  --btn-radius: 999px; --field-radius: 999px; --chip-radius: 999px; --card-radius: 16px; --menu-radius: 14px;
  --item-radius: 8px; --row-radius: 12px; --panel-radius: 26px;
}
/* sizes: 13px type, a 52px unified toolbar, 26px push buttons, 28px sidebar rows */
[data-theme="macos"] { --fs: 13px; --lh: 18px; --top-h: 52px; --ctl-h: 30px; --ctl-sm: 26px; --nav-h: 28px; --nav-h-sm: 26px; }
[data-theme="macos"][data-density="compact"] { --fs: 12px; --lh: 16px; --top-h: 44px; --ctl-h: 26px; --ctl-sm: 22px; --nav-h: 24px; --nav-h-sm: 22px; }
[data-theme="macos"][data-base="glass"] { --top-h: 56px; --ctl-h: 32px; --ctl-sm: 28px; }
/* motion: system ease for Tinh tế, the Apple sheet curve for Mượt */
[data-theme="macos"][data-motion="subtle"] {
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 300ms;
  --ease-out: cubic-bezier(.25, .1, .25, 1); --ease-spring: cubic-bezier(.32, .72, 0, 1);
}
[data-theme="macos"][data-motion="smooth"] {
  --dur-1: 150ms; --dur-2: 300ms; --dur-3: 500ms;
  --ease-out: cubic-bezier(.32, .72, 0, 1); --ease-spring: cubic-bezier(.32, .72, 0, 1); --enter-y: 8px; --enter-scale: .97;
}
[data-theme="macos"] body { letter-spacing: -.003em; }
[data-theme="macos"] .ic { stroke-width: 1.6; }

/* ── the window: wallpaper behind translucent sidebars, a unified toolbar ── */
[data-theme="macos"] .app { background: var(--mac-wallpaper); }
[data-theme="macos"] .top { gap: 8px; padding: 0 12px; background: color-mix(in srgb, var(--paper) 82%, transparent); -webkit-backdrop-filter: var(--mac-blur); backdrop-filter: var(--mac-blur); border-bottom-color: var(--border); }
/* the window controls, drawn only as a cue */
[data-theme="macos"]:not([data-layout="sidebar"]) .top::before, [data-theme="macos"] .sb-head::before { content: ""; flex: none; width: 52px; height: 12px; margin-right: 8px; background: radial-gradient(circle at 6px 6px, #ff5f57 0 5.5px, rgb(0 0 0 / .12) 5.6px 6px, transparent 6.2px), radial-gradient(circle at 26px 6px, #febc2e 0 5.5px, rgb(0 0 0 / .12) 5.6px 6px, transparent 6.2px), radial-gradient(circle at 46px 6px, #28c840 0 5.5px, rgb(0 0 0 / .12) 5.6px 6px, transparent 6.2px); }
[data-theme="macos"] .sb-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 10px 6px; }
[data-theme="macos"] .sb-head::before { margin: 0 0 0 4px; }
[data-theme="macos"] .brand { font-size: 15px; font-weight: 700; }
[data-theme="macos"] .tenant { height: var(--ctl-sm); border: 0; background: var(--subtle); box-shadow: none; font-weight: 500; font-size: 13px; }
[data-theme="macos"] .tenant:hover { background: var(--active); }
[data-theme="macos"] .gsearch { height: 28px; max-width: 320px; margin-left: auto; padding: 0 8px; gap: 6px; border: 0; border-radius: var(--field-radius); background: var(--subtle); color: var(--fg-muted); font-size: 13px; }
[data-theme="macos"] .gsearch:hover { background: var(--active); }
[data-theme="macos"] kbd { border: 0; background: transparent; color: var(--fg-muted); font-size: 12px; }
[data-theme="macos"] .top-right { margin-left: 0; gap: 4px; }
[data-theme="macos"] .iconbtn { border-radius: var(--btn-radius); color: var(--fg-3); }
[data-theme="macos"] .iconbtn:hover { background: var(--hover); color: var(--fg); }
[data-theme="macos"] .badge { top: 1px; right: 0; min-width: 17px; height: 17px; padding: 0 5px; background: #ff3b30; font-size: 11px; font-weight: 600; line-height: 17px; box-shadow: none; }
[data-theme="macos"] .demo-btn { height: var(--ctl-sm); border: 0; border-radius: var(--btn-radius); background: var(--paper); box-shadow: var(--shadow-xs); font-weight: 400; font-size: 13px; color: var(--fg); }
[data-theme="macos"] .demo-btn:hover, [data-theme="macos"] .demo-btn.on { border: 0; background: var(--paper); color: var(--primary); }
[data-theme="macos"] .conn { height: 22px; border-radius: 999px; font-size: 12px; font-weight: 600; }
[data-theme="macos"] .me { border-radius: 999px; }

/* ── sidebars: the rail and the mailbox list in vibrancy; symbols in the accent; a grey selection ── */
[data-theme="macos"] :is(.rail, .nav, .ctx) { -webkit-backdrop-filter: var(--mac-blur); backdrop-filter: var(--mac-blur); }
[data-theme="macos"] .rail { width: 72px; border-right-color: var(--side-border); }
[data-theme="macos"] .rail-btn { width: 60px; border-radius: 8px; font-size: 10px; font-weight: 500; }
[data-theme="macos"] .rail-btn .ic { color: var(--primary); }
[data-theme="macos"] .rail-btn.on { background: var(--side-active-bg); color: var(--side-active-fg); }
[data-theme="macos"] .rail-btn .count { background: #ff3b30; color: #ffffff; font-weight: 600; }
[data-theme="macos"] .nav { background: var(--paper-2); border-right-color: var(--border); }
[data-theme="macos"] .nav-scroll { background-color: transparent; background-image: none; }
[data-theme="macos"] .nav-sec { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-theme="macos"] .nav-row { height: var(--nav-h); padding: 0 8px; gap: 8px; border-radius: var(--item-radius); font-weight: 400; color: var(--fg); }
[data-theme="macos"] .nav-row .ic { color: var(--primary); }
[data-theme="macos"] .nav-row.on { background: var(--active); color: var(--fg); font-weight: 400; }
[data-theme="macos"] .nav-row .num { font-weight: 400; color: var(--fg-muted); }
[data-theme="macos"][data-layout="sidebar"] .rail { --sb-w: 15rem; width: var(--sb-w); background: var(--side-bg); border-right: 1px solid var(--side-border); -webkit-backdrop-filter: var(--mac-blur); backdrop-filter: var(--mac-blur); }
[data-theme="macos"][data-layout="sidebar"][data-sidebar="collapsed"] .rail { --sb-w: 3.5rem; }
[data-theme="macos"][data-layout="sidebar"] .main { margin: 0; border-radius: 0; background: var(--paper); box-shadow: none; }
[data-theme="macos"][data-layout="sidebar"][data-mode="dark"] .main { box-shadow: none; }
[data-theme="macos"] .sb-scroll { padding: 0 10px; }
[data-theme="macos"] .sb-label { height: 26px; padding: 0 8px; font-size: 11px; font-weight: 700; color: var(--side-muted); }
[data-theme="macos"] :is(.sb-item, .sb-subitem) { border-radius: var(--item-radius); font-weight: 400; }
[data-theme="macos"] .sb-item { height: var(--nav-h); }
[data-theme="macos"] .sb-item .ic { color: var(--primary); }
[data-theme="macos"] :is(.sb-item, .sb-subitem).on { font-weight: 400; }
[data-theme="macos"] .sb-sub { margin-left: 18px; border-left: 0; }
[data-theme="macos"] .sb-team, [data-theme="macos"] .sb-user { border-radius: var(--card-radius); }
[data-theme="macos"][data-sidebar="collapsed"] .sb-head::before { display: none; }

/* ── Mail's list: a blue dot on unread, the selection filled with the accent and white text ── */
[data-theme="macos"] .list { background: var(--paper); border-right-color: var(--border); }
[data-theme="macos"] .list-head h2, [data-theme="macos"] .nav-head h2 { font-size: 15px; font-weight: 700; }
[data-theme="macos"] .conv { position: relative; padding: 10px 10px 10px 22px; border-radius: var(--row-radius); }
[data-theme="macos"] .conv::after { content: ""; position: absolute; left: 22px; right: 10px; bottom: -2px; height: 1px; background: var(--border); }
[data-theme="macos"] :is(.conv:hover, .conv.on)::after, [data-theme="macos"] .vrow:has(+ .vrow .conv.on) .conv::after { display: none; }
[data-theme="macos"] .conv.unread::before { content: ""; position: absolute; left: 8px; top: 16px; width: 9px; height: 9px; border-radius: 999px; background: var(--primary); }
[data-theme="macos"] .conv.on { background: var(--primary); color: #ffffff; }
[data-theme="macos"] .conv.on :is(.conv-name, .conv-prev, .conv-time, .conv-prev .draft, .conv-prev .typing) { color: #ffffff; }
[data-theme="macos"] .conv.on.unread::before { background: #ffffff; }
[data-theme="macos"] .conv.on .pill { background: rgb(255 255 255 / .22); color: #ffffff; }
[data-theme="macos"] .conv.on .unread-count { background: #ffffff; color: var(--primary); }
[data-theme="macos"] .conv-name { font-weight: 600; }
[data-theme="macos"] .conv.unread .conv-name { font-weight: 700; }
[data-theme="macos"] .conv.unread .conv-time { color: var(--fg-muted); font-weight: 400; }
[data-theme="macos"] .skel-row { padding: 10px 10px 10px 22px; }
[data-theme="macos"][data-density="compact"] .conv.unread::before { top: 50%; translate: 0 -50%; }
[data-theme="macos"] .pill { height: 18px; padding: 0 6px; font-size: 11px; font-weight: 500; }
[data-theme="macos"] .chip { height: var(--ctl-sm); padding: 0 6px 0 10px; border: 0; background: var(--subtle); font-size: 12px; font-weight: 500; color: var(--fg); }
[data-theme="macos"] .chip:hover { background: var(--active); }
[data-theme="macos"] .chip.on { background: var(--primary-soft); color: var(--primary-soft-fg); }
[data-theme="macos"] :is(.lsearch, .nav-search) { height: 28px; padding: 0 8px; gap: 6px; border: 0; background: var(--subtle); box-shadow: none; }
[data-theme="macos"] :is(.lsearch, .nav-search):focus-within { box-shadow: 0 0 0 3px var(--focus-c); }
[data-theme="macos"] :is(.viewpick, .sortbtn) { border-radius: var(--btn-radius); }

/* ── Messages: bubbles with tails, centred timestamps, a segmented reply switcher ── */
[data-theme="macos"] .th-head { border-bottom-color: var(--border); }
[data-theme="macos"] .th-who h1 { font-size: 15px; font-weight: 700; }
[data-theme="macos"] .btn { height: var(--ctl-sm); padding: 0 10px; border: 0; background: var(--paper); box-shadow: var(--shadow-xs); font-size: 13px; font-weight: 400; color: var(--fg); }
[data-theme="macos"][data-mode="dark"] .btn:not(.primary) { background: rgb(255 255 255 / .1); }
[data-theme="macos"] .btn:hover { background: var(--paper); filter: brightness(.97); }
[data-theme="macos"] .btn:active { filter: brightness(.92); }
[data-theme="macos"] .btn.primary { background: linear-gradient(rgb(255 255 255 / .17), rgb(255 255 255 / 0)), var(--primary); color: var(--primary-fg); }
[data-theme="macos"] .btn.primary:hover { background: linear-gradient(rgb(255 255 255 / .17), rgb(255 255 255 / 0)), var(--primary-hover); filter: none; }
[data-theme="macos"] .btn.icon { width: var(--ctl-sm); padding: 0; }
[data-theme="macos"] .seg { gap: 2px; padding: 2px; border: 0; border-radius: calc(var(--btn-radius) + 1px); background: var(--subtle); box-shadow: none; }
[data-theme="macos"] .seg button { width: 28px; height: calc(var(--ctl-sm) - 4px); border-radius: var(--btn-radius); }
[data-theme="macos"] .seg button:hover { background: var(--paper); box-shadow: var(--shadow-xs); }
[data-theme="macos"] .seg button + button { border-left: 0; }
[data-theme="macos"] .viewing { background: var(--subtle); }
/* the AI summary in the Apple Intelligence glow */
[data-theme="macos"] .summary { margin: 8px 16px 0; border: 1px solid transparent; border-radius: var(--card-radius); background: linear-gradient(var(--summary-bg), var(--summary-bg)) padding-box, var(--mac-intelligence) border-box; box-shadow: 0 2px 14px rgb(191 90 242 / .14); }
[data-theme="macos"] .summary .ic { color: #bf5af2; }
[data-theme="macos"] .day, [data-theme="macos"] .unread-sep { justify-content: center; font-size: 11px; font-weight: 600; }
[data-theme="macos"] .day::before, [data-theme="macos"] .day::after { display: none; }
[data-theme="macos"] .sys span { background: transparent; color: var(--fg-muted); font-size: 11px; }
[data-theme="macos"] .row { margin: 2px 0; }
[data-theme="macos"] .bubble { position: relative; padding: 7px 12px; border-radius: var(--bubble-radius); line-height: 1.35; }
/* the tail: a curl in the bubble colour, trimmed by a second curl in the page colour */
[data-theme="macos"] .stack:has(.meta) .bubble::before, [data-theme="macos"] .stack:has(.meta) .bubble::after { content: ""; position: absolute; bottom: 0; height: 18px; }
[data-theme="macos"] .row.in .stack:has(.meta) .bubble::before { left: -7px; width: 20px; background: inherit; border-bottom-right-radius: 16px 14px; }
[data-theme="macos"] .row.in .stack:has(.meta) .bubble::after { left: -10px; width: 10px; background: var(--paper); border-bottom-right-radius: 10px; }
[data-theme="macos"] .row.out .stack:has(.meta) .bubble::before { right: -7px; width: 20px; background: inherit; border-bottom-left-radius: 16px 14px; }
[data-theme="macos"] .row.out .stack:has(.meta) .bubble::after { right: -10px; width: 10px; background: var(--paper); border-bottom-left-radius: 10px; }
[data-theme="macos"] .row.failed .bubble { box-shadow: inset 0 0 0 1px var(--bubble-fail-border); }
[data-theme="macos"] .meta { font-size: 11px; }
[data-theme="macos"] .linkbtn { color: var(--primary); font-weight: 400; border-radius: var(--item-radius); }
[data-theme="macos"] .linkbtn:hover { background: var(--primary-soft); }
[data-theme="macos"] .composer { border-color: var(--input); border-radius: var(--card-radius); box-shadow: none; }
[data-theme="macos"] .composer:focus-within { border-color: var(--input); box-shadow: 0 0 0 3px var(--focus-c); }
[data-theme="macos"] .tabs { padding: 8px 10px 0; }
[data-theme="macos"] .tablist { display: inline-flex; gap: 2px; padding: 2px; border-radius: 7px; background: var(--subtle); }
[data-theme="macos"] :is(.tab, .ctx-tab) { height: 22px; padding: 0 10px; border: 0; border-radius: 5px; font-size: 12px; font-weight: 500; color: var(--fg-2); }
[data-theme="macos"] :is(.tab, .ctx-tab).on { background: var(--paper); color: var(--fg); box-shadow: var(--shadow-xs); }
[data-theme="macos"][data-mode="dark"] :is(.tab, .ctx-tab).on { background: rgb(255 255 255 / .18); }
[data-theme="macos"] .composer.note .tab.on { color: var(--note-fg); }
[data-theme="macos"] .ctx-tabs { justify-content: center; padding: 10px; border-bottom-color: var(--border); background: transparent; }
[data-theme="macos"] .ctx-tabs .tablist { flex: 0 1 auto; }
[data-theme="macos"] .sendgrp { box-shadow: none; gap: 1px; }
[data-theme="macos"] .sendgrp button { height: var(--ctl-sm); padding: 0 12px; background: linear-gradient(rgb(255 255 255 / .17), rgb(255 255 255 / 0)), var(--primary); font-size: 13px; font-weight: 500; }
[data-theme="macos"] .sendgrp button:hover { background: linear-gradient(rgb(255 255 255 / .17), rgb(255 255 255 / 0)), var(--primary-hover); }
[data-theme="macos"] .sendgrp button + button { border-left: 0; }
[data-theme="macos"] .sug { height: 24px; border-radius: 999px; font-size: 12px; }
[data-theme="macos"] .tool { color: var(--fg-3); border-radius: var(--btn-radius); }

/* ── inspector and pages: grouped rounded sections ── */
[data-theme="macos"] .ctx { background: var(--paper-2); border-left-color: var(--border); }
[data-theme="macos"] :is(.card, .trow) { border: 0; border-radius: var(--card-radius); background: var(--paper); box-shadow: var(--shadow-sm); }
[data-theme="macos"][data-mode="dark"] :is(.card, .trow) { background: rgb(255 255 255 / .06); }
[data-theme="macos"] .ghost { border: 0; border-radius: var(--btn-radius); background: var(--paper); box-shadow: var(--shadow-xs); font-weight: 400; }
[data-theme="macos"][data-mode="dark"] .ghost:not(.note) { background: rgb(255 255 255 / .1); }
[data-theme="macos"] .ghost.note { box-shadow: none; }
[data-theme="macos"] .page h1 { font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -.02em; }
[data-theme="macos"] :is(.kpi, .pcard) { border: 0; border-radius: var(--card-radius); box-shadow: var(--shadow-sm); }
[data-theme="macos"] .kpi .v { font-weight: 700; letter-spacing: -.02em; }
[data-theme="macos"] .tbl-wrap { border: 0; border-radius: var(--card-radius); box-shadow: var(--shadow-sm); }
[data-theme="macos"] .tbl th { background: transparent; font-size: 11px; font-weight: 600; }
[data-theme="macos"] .tbl tbody tr:nth-child(even) td { background: rgb(0 0 0 / .025); }

/* ── menus highlight in the accent; Spotlight; notification banners; the Giao diện popover ── */
[data-theme="macos"] :is(.pop, .macros, .look, .palette, .toast) { -webkit-backdrop-filter: var(--mac-blur); backdrop-filter: var(--mac-blur); }
[data-theme="macos"] :is(.pop, .macros) { padding: 5px; border: 0; background: var(--mac-material); box-shadow: var(--shadow-md); }
[data-theme="macos"] .pop { animation: mac-pop var(--dur-2) var(--ease-spring); }
[data-theme="macos"] .pop button { height: 22px; padding: 0 10px; gap: 8px; border-radius: var(--item-radius); font-size: 13px; }
[data-theme="macos"] .pop button:hover, [data-theme="macos"] .pop button:focus-visible, [data-theme="macos"] .macro:hover, [data-theme="macos"] .macro.on { background: var(--primary); color: #ffffff; outline: none; }
[data-theme="macos"] .pop button:is(:hover, :focus-visible) :is(.ic, small) { color: #ffffff; }
[data-theme="macos"] .pop .sep { margin: 5px 10px; }
[data-theme="macos"] .macro { border-radius: var(--item-radius); }
[data-theme="macos"] .macro:hover span, [data-theme="macos"] .macro.on span { color: rgb(255 255 255 / .8); }
[data-theme="macos"] .palette { width: min(680px, 100%); border: 0; border-radius: var(--panel-radius); background: var(--mac-material); box-shadow: var(--shadow-lg); animation: mac-pop var(--dur-3) var(--ease-spring); }
[data-theme="macos"] .palette .pin-input { height: 56px; padding: 0 18px; gap: 12px; border-bottom-color: var(--border); }
[data-theme="macos"] .palette input { font-size: 22px; font-weight: 300; }
[data-theme="macos"] .palette .res { padding: 6px; }
[data-theme="macos"] .palette .it { height: 34px; border-radius: var(--item-radius); }
[data-theme="macos"] .palette .it.on { background: var(--primary); color: #ffffff; }
[data-theme="macos"] .palette .it.on :is(small, .ic) { color: #ffffff; }
[data-theme="macos"] .palette .foot { border-top-color: var(--border); }
[data-theme="macos"] .toast { top: 12px; right: 12px; left: auto; bottom: auto; translate: none; width: 344px; max-width: calc(100vw - 24px); padding: 12px 14px 12px 12px; gap: 10px; border: 0; border-radius: 16px; font-size: 13px; box-shadow: var(--shadow-md); animation: mac-banner var(--dur-3) var(--ease-spring); }
[data-theme="macos"] .toast::before { content: ""; width: 32px; height: 32px; flex: none; border-radius: 8px; background: radial-gradient(circle at 11px 11px, #ffffff 0 3.2px, transparent 3.5px), radial-gradient(circle at 21px 11px, #ffffff 0 3.2px, transparent 3.5px), radial-gradient(circle at 11px 21px, #ffffff 0 3.2px, transparent 3.5px), radial-gradient(circle at 21px 21px, #ffffff 0 3.2px, transparent 3.5px), linear-gradient(160deg, color-mix(in srgb, var(--primary) 70%, #ffffff), var(--primary)); box-shadow: 0 1px 2px rgb(0 0 0 / .15); }
[data-theme="macos"] .toast > span { flex: 1; }
[data-theme="macos"] .toast button { color: var(--toast-action); font-weight: 500; }
[data-theme="macos"] .look { border: 0; border-radius: var(--panel-radius); background: var(--mac-material); box-shadow: var(--shadow-lg); }
[data-theme="macos"] .look-seg { border-radius: 7px; }
[data-theme="macos"] .look-seg button { border-radius: 5px; min-height: 24px; }
[data-theme="macos"] .look-card { border-radius: var(--card-radius); background: var(--paper); }
[data-theme="macos"] .look-card.on { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
@keyframes mac-pop { from { opacity: 0; transform: scale(.96); } }
@keyframes mac-banner { from { opacity: 0; transform: translateX(110%); } }

/* ── Liquid Glass: a floating glass sidebar and toolbar controls; capsules everywhere ── */
[data-theme="macos"][data-base="glass"] .top { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }
[data-theme="macos"][data-base="glass"] .app { background: var(--paper); }
[data-theme="macos"][data-base="glass"] :is(.top .iconbtn, .gsearch, .tenant, .demo-btn, .me) { background: var(--mac-glass); -webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(12px) saturate(180%); box-shadow: var(--mac-glass-edge); }
[data-theme="macos"][data-base="glass"] .gsearch { height: 34px; max-width: 360px; padding: 0 14px; }
[data-theme="macos"][data-base="glass"] .top .iconbtn { width: 36px; height: 36px; }
[data-theme="macos"][data-base="glass"] :is(.rail, .nav) { margin: 8px 0 8px 8px; border: 0; border-radius: 22px; background: var(--mac-glass); box-shadow: var(--mac-glass-edge); }
[data-theme="macos"][data-base="glass"] .rail { background: color-mix(in srgb, var(--mac-wallpaper-tint, #e9eef8) 55%, transparent); }
[data-theme="macos"][data-base="glass"][data-mode="dark"] .rail { background: rgb(60 60 66 / .55); }
[data-theme="macos"][data-base="glass"][data-layout="sidebar"] .rail { margin: 8px; height: calc(100% - 16px); }
[data-theme="macos"][data-base="glass"][data-layout="sidebar"] .app { background: var(--mac-wallpaper); }
[data-theme="macos"][data-base="glass"][data-layout="sidebar"] .main { margin: 0; border-radius: 0; }
[data-theme="macos"][data-base="glass"] .nav { margin-left: 8px; }
[data-theme="macos"][data-base="glass"] .list { border-right: 0; }
[data-theme="macos"][data-base="glass"] :is(.sb-item, .sb-subitem, .nav-row, .rail-btn) { border-radius: 10px; }
[data-theme="macos"][data-base="glass"] :is(.btn, .ghost, .demo-btn) { box-shadow: var(--mac-glass-edge); }
[data-theme="macos"][data-base="glass"] .btn:not(.primary) { background: var(--mac-glass); }
[data-theme="macos"][data-base="glass"] .composer { border-radius: 22px; }
[data-theme="macos"][data-base="glass"] .tablist, [data-theme="macos"][data-base="glass"] .seg { border-radius: 999px; }
[data-theme="macos"][data-base="glass"] :is(.tab, .ctx-tab, .seg button) { border-radius: 999px; }
[data-theme="macos"][data-base="glass"] .sendgrp button:first-child { border-radius: 999px 6px 6px 999px; }
[data-theme="macos"][data-base="glass"] .sendgrp button + button { border-radius: 6px 999px 999px 6px; }
[data-theme="macos"][data-base="glass"] .palette input { font-size: 24px; }

/* ── phones: iOS, with large titles and a translucent tab bar ── */
@media (max-width:767px) {
  [data-theme="macos"]:not([data-layout="sidebar"]) .top::before { display: none; }
  [data-theme="macos"] .app { background: var(--paper); }
  [data-theme="macos"] .top { background: color-mix(in srgb, var(--paper) 86%, transparent); }
  [data-theme="macos"][data-layout] .rail { height: 64px; margin: 0; border-radius: 0; border-top: .5px solid var(--border-strong); background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: var(--mac-blur); backdrop-filter: var(--mac-blur); box-shadow: none; }
  [data-theme="macos"] .rail-btn { min-height: 48px; font-size: 10px; color: var(--fg-muted); }
  [data-theme="macos"] .rail-btn .ic { color: inherit; }
  [data-theme="macos"] .rail-btn.on { background: transparent; color: var(--primary); }
  [data-theme="macos"] .viewpick { font-size: 28px; line-height: 34px; height: auto; letter-spacing: -.02em; }
  [data-theme="macos"] .list-head { padding: 12px 10px 6px 16px; }
  [data-theme="macos"] .lsearch { height: 36px; border-radius: 10px; background: rgb(118 118 128 / .12); }
  [data-theme="macos"] .conv { border-radius: 0; }
  [data-theme="macos"] .conv.on { background: var(--active); color: var(--fg); }
  [data-theme="macos"] .conv.on :is(.conv-name, .conv-prev, .conv-time) { color: inherit; }
  [data-theme="macos"] .toast { top: 8px; right: 8px; left: 8px; width: auto; }
}

/* the header strip of this theme's mini preview in the Giao diện panel */
[data-theme="macos"] { --pv-top: radial-gradient(circle at 5px 50%, #ff5f57 0 1.6px, transparent 2px), radial-gradient(circle at 10px 50%, #febc2e 0 1.6px, transparent 2px), radial-gradient(circle at 15px 50%, #28c840 0 1.6px, transparent 2px), var(--paper); }