/* IBM Carbon v11: the White and G100 themes, IBM Plex, square corners, the UI shell (a dark 48px header, a side
   nav whose rail widens on hover, a 3px blue bar on the selected item), fields with a bottom stroke, line tabs,
   tags, tiles, notifications with a coloured left edge, the skeleton sweep and the productive/expressive motion.
   data-base picks the side nav zone: light, or G100 like the header.
   Loaded after themes.css and app.css; every rule is scoped to [data-theme="carbon"]. Raw values are --cb-*. */

[data-theme="carbon"] {
  --font: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", Menlo, "DejaVu Sans Mono", Courier, monospace;

  --bg: #ffffff; --paper: #ffffff; --paper-2: #f4f4f4; --card: #f4f4f4; --elevated: #f4f4f4;
  --subtle: #f4f4f4; --hover: #e8e8e8; --active: #e0e0e0;
  --fg: #161616; --fg-2: #393939; --fg-3: #525252; --fg-muted: #6f6f6f;
  --border: #e0e0e0; --border-strong: #8d8d8d; --input: #8d8d8d;

  --primary: #0f62fe; --primary-hover: #0050e6; --primary-fg: #ffffff;
  --primary-soft: #edf5ff; --primary-soft-fg: #0043ce;
  --ring: #0f62fe; --ring-alpha: 100%;
  --focus-w: 2px; --focus-c: #0f62fe; --focus-o: -2px;

  --danger: #da1e28; --danger-solid: #da1e28; --danger-soft: #ffd7d9;
  --warn: #684e00; --warn-soft: #fcf4d6;
  --ok: #0e6027; --ok-solid: #24a148; --ok-soft: #a7f0ba;
  --snooze: #6929c4; --snooze-solid: #8a3ffc; --snooze-soft: #e8daff;
  --label: #00539a; --label-soft: #bae6ff; --label-border: transparent;
  --sample: #8a3800; --sample-soft: #ffd9be;
  --unread: #0f62fe; --unread-line: #a6c8ff; --draft: #da1e28;
  --note-bg: #fcf4d6; --note-border: #f1c21b; --note-fg: #483700; --note-strong: #8e6a00; --note-focus: #f1c21b; --note-soft: #fcf4d6;
  --fail-bg: #fcf4d6; --fail-border: #f1c21b;

  --bubble-in: #f4f4f4; --bubble-in-fg: #161616;
  --bubble-out: #d0e2ff; --bubble-out-fg: #161616;
  --bubble-other: #defbe6; --bubble-other-fg: #161616; --bubble-other-border: transparent;
  --bubble-fail: #fff1f1; --bubble-fail-border: #da1e28; --bubble-fail-fg: #161616;
  --file-bg: #f4f4f4; --file-border: #e0e0e0;
  --summary-bg: #edf5ff; --summary-border: #e0e0e0; --summary-fg: #161616;
  --sug-bg: #ffffff; --sug-border: #8d8d8d; --sug-hover: #e8e8e8; --sug-fg: #161616;
  --info-soft: #edf5ff; --info-fg: #161616;
  --mark: #d0e2ff; --star: #f1c21b;

  --toast-bg: #393939; --toast-fg: #f4f4f4; --toast-border: transparent; --toast-action: #78a9ff;
  --skel-a: #e8e8e8; --skel-b: #c6c6c6; --skel-anim: cb-skeleton 3s ease-in-out infinite;
  --scrim: rgb(22 22 22 / .5); --scroll-shadow: rgb(0 0 0 / .14);
  --shadow-xs: 0 0 #0000; --shadow-sm: 0 0 #0000;
  --shadow-md: 0 2px 6px rgb(0 0 0 / .3); --shadow-lg: 0 2px 6px rgb(0 0 0 / .3); --shadow-side: 0 2px 6px rgb(0 0 0 / .3);

  /* Carbon is square: every role follows --radius (0 by default) except tags, which are pills */
  --btn-radius: var(--r-lg); --field-radius: var(--r-lg); --card-radius: var(--r-lg); --menu-radius: var(--r-lg);
  --item-radius: var(--r-lg); --chip-radius: var(--r-lg); --pill-radius: 999px; --row-radius: 0px;
  --bubble-radius: var(--r-lg); --panel-radius: var(--r-lg);
  --weight-strong: 600; --weight-head: 600; --weight-active: 600; --tracking-head: 0;
  --sec-transform: none; --sec-size: 12px; --sec-weight: 400; --sec-spacing: .32px;
  --side-bg: #ffffff; --side-fg: #525252; --side-hover: #e8e8e8; --side-hover-fg: #161616;
  --side-active-bg: #e0e0e0; --side-active-fg: #161616; --side-muted: #6f6f6f;
  --side-border: #e0e0e0; --side-title: #161616; --side-sub-bg: transparent; --side-parent-fg: #161616;
  color-scheme: light;
}
/* G100 */
[data-theme="carbon"][data-mode="dark"] {
  --bg: #161616; --paper: #161616; --paper-2: #262626; --card: #262626; --elevated: #262626;
  --subtle: #262626; --hover: #333333; --active: #393939;
  --fg: #f4f4f4; --fg-2: #e0e0e0; --fg-3: #c6c6c6; --fg-muted: #a8a8a8;
  --border: #393939; --border-strong: #6f6f6f; --input: #6f6f6f;

  --primary-soft: #001d6c; --primary-soft-fg: #a6c8ff;
  --ring: #ffffff; --focus-c: #ffffff;

  --danger: #ff8389; --danger-solid: #fa4d56; --danger-soft: #520408;
  --warn: #f1c21b; --warn-soft: #302400;
  --ok: #42be65; --ok-solid: #24a148; --ok-soft: #022d0d;
  --snooze: #be95ff; --snooze-solid: #8a3ffc; --snooze-soft: #31135e;
  --label: #82cfff; --label-soft: #012749;
  --sample: #ff832b; --sample-soft: #3e1a00;
  --unread: #78a9ff; --unread-line: #0043ce; --draft: #ff8389;
  --note-bg: #302400; --note-border: #8e6a00; --note-fg: #fddc69; --note-strong: #8e6a00; --note-focus: #f1c21b; --note-soft: #1c1500;
  --fail-bg: #302400; --fail-border: #8e6a00;

  --bubble-in: #262626; --bubble-in-fg: #f4f4f4;
  --bubble-out: #001d6c; --bubble-out-fg: #f4f4f4;
  --bubble-other: #044317; --bubble-other-fg: #f4f4f4;
  --bubble-fail: #520408; --bubble-fail-border: #fa4d56; --bubble-fail-fg: #f4f4f4;
  --file-bg: #262626; --file-border: #393939;
  --summary-bg: #262626; --summary-border: #393939; --summary-fg: #f4f4f4;
  --sug-bg: #161616; --sug-border: #6f6f6f; --sug-hover: #333333; --sug-fg: #f4f4f4;
  --info-soft: #001d6c; --info-fg: #f4f4f4;
  --mark: #002d9c; --star: #f1c21b;

  --toast-bg: #f4f4f4; --toast-fg: #161616; --toast-action: #0f62fe;
  --skel-a: #353535; --skel-b: #525252;
  --scrim: rgb(0 0 0 / .65); --scroll-shadow: rgb(0 0 0 / .5);
  --side-bg: #161616; --side-fg: #c6c6c6; --side-hover: #333333; --side-hover-fg: #f4f4f4;
  --side-active-bg: #393939; --side-active-fg: #f4f4f4; --side-muted: #a8a8a8;
  --side-border: #393939; --side-title: #f4f4f4; --side-parent-fg: #f4f4f4;
  color-scheme: dark;
}
/* the side nav in the G100 zone, as the header */
[data-theme="carbon"][data-base="dark"] {
  --side-bg: #161616; --side-fg: #c6c6c6; --side-hover: #333333; --side-hover-fg: #f4f4f4;
  --side-active-bg: #393939; --side-active-fg: #f4f4f4; --side-muted: #a8a8a8;
  --side-border: #393939; --side-title: #f4f4f4; --side-parent-fg: #f4f4f4;
}
/* sizes: the 48px shell header, small (32) buttons and fields, 32px nav links; compact keeps the header */
[data-theme="carbon"] { --top-h: 48px; --ctl-h: 40px; --ctl-sm: 32px; --nav-h: 32px; --nav-h-sm: 32px; }
[data-theme="carbon"][data-density="compact"] { --top-h: 48px; --ctl-h: 32px; --ctl-sm: 24px; --nav-h: 28px; --nav-h-sm: 28px; }
/* motion: productive (Tinh tế) and expressive (Mượt) curves with Carbon's durations */
[data-theme="carbon"][data-motion="subtle"] {
  --dur-1: 70ms; --dur-2: 110ms; --dur-3: 240ms;
  --ease-out: cubic-bezier(0, 0, .38, .9); --ease-spring: cubic-bezier(.2, 0, .38, .9);
}
[data-theme="carbon"][data-motion="smooth"] {
  --dur-1: 110ms; --dur-2: 240ms; --dur-3: 400ms;
  --ease-out: cubic-bezier(0, 0, .3, 1); --ease-spring: cubic-bezier(.4, .14, .3, 1);
}
[data-theme="carbon"] body { letter-spacing: .16px; }
[data-theme="carbon"] .ic { stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; }

/* the skeleton sweep: a darker block grows from the left, then drains to the right */
@keyframes cb-skeleton {
  0% { background-size: 0 100%; background-position: left; opacity: .3; }
  20% { background-size: 100% 100%; background-position: left; opacity: 1; }
  28% { background-size: 100% 100%; background-position: right; }
  51% { background-size: 0 100%; background-position: right; }
  58% { background-size: 0 100%; background-position: right; }
  82% { background-size: 100% 100%; background-position: right; }
  83% { background-size: 100% 100%; background-position: left; }
  96% { background-size: 0 100%; background-position: left; }
  100% { background-size: 0 100%; background-position: left; opacity: .3; }
}
[data-theme="carbon"] .skel { background: linear-gradient(var(--skel-b), var(--skel-b)) left / 0 100% no-repeat, var(--skel-a); border-radius: 0; }

/* ── UI shell header: G100 in every theme ── */
[data-theme="carbon"] .top {
  --fg: #f4f4f4; --fg-2: #c6c6c6; --fg-3: #c6c6c6; --fg-muted: #a8a8a8; --hover: #353535;
  --border: #393939; --border-strong: #6f6f6f; --paper: #161616; --subtle: #262626;
  gap: 0; padding: 0; background: #161616; border-bottom: 1px solid #393939; color: #f4f4f4; z-index: 9;
}
[data-theme="carbon"] .top :focus-visible { outline-color: #ffffff; }
[data-theme="carbon"] .brand { height: 100%; padding: 0 16px; gap: 10px; font-size: 14px; font-weight: 600; letter-spacing: .1px; }
[data-theme="carbon"] .top .logo-bg { fill: transparent; }
[data-theme="carbon"] .top .logo-fg { fill: #f4f4f4; }
[data-theme="carbon"] .tenant { height: 100%; padding: 0 16px; border: 0; border-left: 1px solid #393939; background: transparent; box-shadow: none; font-size: 14px; font-weight: 400; color: #c6c6c6; }
[data-theme="carbon"] .tenant:hover { background: #353535; color: #f4f4f4; }
[data-theme="carbon"] .gsearch { height: 100%; max-width: 560px; padding: 0 16px; gap: 12px; border-left: 1px solid #393939; background: #161616; color: #a8a8a8; font-size: 14px; }
[data-theme="carbon"] .gsearch:hover { background: #262626; }
[data-theme="carbon"] kbd { border-color: #6f6f6f; background: transparent; color: inherit; }
[data-theme="carbon"] .top-right { gap: 0; align-self: stretch; }
[data-theme="carbon"] .top .iconbtn { width: 48px; height: 48px; color: #c6c6c6; }
[data-theme="carbon"] .top .iconbtn:hover { background: #353535; color: #f4f4f4; }
[data-theme="carbon"] .top .iconbtn.on { background: #262626; color: #f4f4f4; box-shadow: inset 0 -2px 0 #4589ff; }
[data-theme="carbon"] .top .badge { top: 8px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; font-weight: 600; line-height: 16px; background: #da1e28; box-shadow: 0 0 0 1px #161616; }
[data-theme="carbon"] .top .conn { height: 24px; margin: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 400; letter-spacing: .32px; }
[data-theme="carbon"] .top .conn.ok { background: #044317; color: #6fdc8c; }
[data-theme="carbon"] .top .demo-btn { height: 32px; margin: 0 8px; border-radius: 0; border-color: #6f6f6f; background: transparent; color: #c6c6c6; font-weight: 400; font-size: 14px; }
[data-theme="carbon"] .top .demo-btn:hover, [data-theme="carbon"] .top .demo-btn.on { background: #353535; color: #f4f4f4; border-color: #8d8d8d; }
[data-theme="carbon"] .top .me { height: 48px; border-radius: 0; padding: 0 16px 0 12px; }
[data-theme="carbon"] .top .me:hover { background: #353535; }
[data-theme="carbon"] .top .me-name small { color: #a8a8a8; }
[data-theme="carbon"] .top .crumb { padding: 0 8px; }
[data-theme="carbon"] .top .sb-trigger { width: 48px; height: 48px; border-radius: 0; color: #c6c6c6; }

/* ── side nav rail (classic): 48px of icons that widens over the content on hover ── */
[data-theme="carbon"] .rail { border-right: 1px solid var(--side-border); }
[data-theme="carbon"] .rail-scroll, [data-theme="carbon"] .rail-foot { align-items: stretch; gap: 0; padding: 0; }
[data-theme="carbon"] .rail-foot { border-top: 1px solid var(--side-border); }
[data-theme="carbon"] .rail-btn { width: auto; min-height: 0; height: 40px; flex-direction: row; justify-content: flex-start; gap: 16px; padding: 0 14px; border-radius: 0; font-size: 14px; line-height: 18px; font-weight: 600; letter-spacing: .16px; white-space: nowrap; }
[data-theme="carbon"] .rail-btn .ic { width: 20px; height: 20px; }
[data-theme="carbon"] .rail-btn.on { background: var(--side-active-bg); color: var(--side-active-fg); }
[data-theme="carbon"] :is(.rail-btn, .sb-item, .sb-subitem, .nav-row, .conv).on::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--primary); }
[data-theme="carbon"] .rail-btn .count { top: 4px; left: 26px; right: auto; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--primary); color: #ffffff; font-size: 10px; line-height: 16px; letter-spacing: 0; }
[data-theme="carbon"] .rail-sep { width: auto; margin: 8px 16px; background: var(--side-border); }
[data-theme="carbon"] .rail-cap { align-self: flex-start; margin: 0; padding: 4px 16px; font-size: 12px; font-weight: 400; letter-spacing: .32px; text-transform: none; white-space: nowrap; }
@media (min-width:768px) {
  [data-theme="carbon"]:not([data-layout="sidebar"]) .rail { width: 48px; overflow: hidden; z-index: 8; transition: width var(--dur-2) var(--ease-out), margin var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
  [data-theme="carbon"]:not([data-layout="sidebar"]) .rail:hover { width: 256px; margin-right: -208px; box-shadow: var(--shadow-md); }
  [data-theme="carbon"]:not([data-layout="sidebar"]) .rail:not(:hover) .rail-cap { opacity: 0; }
  [data-theme="carbon"]:not([data-layout="sidebar"]) .rail:hover .rail-btn .count { position: static; margin-left: auto; }
}

/* ── side nav (sidebar layout): its header joins the dark shell band ── */
[data-theme="carbon"][data-layout="sidebar"] .app { background: var(--side-bg); }
[data-theme="carbon"][data-layout="sidebar"] .rail { --sb-w: 16rem; width: var(--sb-w); background: var(--side-bg); border-right: 1px solid var(--side-border); }
[data-theme="carbon"][data-layout="sidebar"][data-sidebar="collapsed"] .rail { --sb-w: 3rem; }
[data-theme="carbon"][data-layout="sidebar"] .main { margin: 0; border-radius: 0; box-shadow: none; }
[data-theme="carbon"][data-layout="sidebar"][data-mode="dark"] .main { box-shadow: none; }
[data-theme="carbon"] .sb-head { height: 48px; padding: 0; background: #161616; border-bottom: 1px solid #393939; }
[data-theme="carbon"] .sb-team { height: 48px; padding: 0 12px 0 14px; border-radius: 0; color: #f4f4f4; }
[data-theme="carbon"] .sb-team:hover { background: #353535; }
[data-theme="carbon"] .sb-team .logo-bg { fill: transparent; }
[data-theme="carbon"] .sb-team .logo-fg { fill: #f4f4f4; }
[data-theme="carbon"] .sb-team-txt b { color: #f4f4f4; }
[data-theme="carbon"] .sb-team-txt small { color: #a8a8a8; }
[data-theme="carbon"] .sb-team .chev { color: #c6c6c6; }
[data-theme="carbon"] .sb-scroll { padding: 8px 0; }
[data-theme="carbon"] .sb-group { padding: 0 0 8px; }
[data-theme="carbon"] .sb-label { height: 32px; padding: 0 16px; font-size: 12px; font-weight: 400; letter-spacing: .32px; }
[data-theme="carbon"] .sb-menu { gap: 0; }
[data-theme="carbon"] :is(.sb-item, .sb-subitem) { position: relative; height: var(--nav-h); padding: 0 16px; border-radius: 0; font-size: 14px; }
[data-theme="carbon"] .sb-item { font-weight: 600; }
[data-theme="carbon"] .sb-row .sb-item { padding-right: 40px; }
[data-theme="carbon"] .sb-subitem { padding-left: 48px; font-weight: 400; }
[data-theme="carbon"] .sb-subitem.on { font-weight: 600; }
[data-theme="carbon"] .sb-sub { margin: 0; padding: 0; border-left: 0; gap: 0; }
[data-theme="carbon"] .sb-caret { right: 8px; border-radius: 0; }
[data-theme="carbon"] .sb-row:has(+ .sb-sub) .sb-item.on::before { display: none; }
[data-theme="carbon"][data-sidebar="collapsed"] .sb-row .sb-item.on::before { display: block; }
[data-theme="carbon"] .sb-foot { padding: 0; gap: 0; border-top: 1px solid var(--side-border); }
[data-theme="carbon"] .sb-user { height: 48px; padding: 0 12px 0 14px; border-radius: 0; }
[data-theme="carbon"][data-sidebar="collapsed"] .sb-item { width: 100%; height: 40px; }
[data-theme="carbon"][data-sidebar="collapsed"] .sb-scroll { padding: 8px 0; }
[data-theme="carbon"][data-sidebar="collapsed"] .sb-team, [data-theme="carbon"][data-sidebar="collapsed"] .sb-user { width: 100%; height: 48px; }

/* ── navigation pane and list: full-width rows with dividers, the blue bar on the selection ── */
[data-theme="carbon"] .nav { border-right-color: var(--border); }
[data-theme="carbon"] .nav-head h2, [data-theme="carbon"] .list-head h2 { font-size: 16px; }
[data-theme="carbon"] .nav-scroll { padding: 0 0 16px; }
[data-theme="carbon"] .nav-sec { margin: 0; padding: 16px 16px 8px; }
[data-theme="carbon"] .nav-row { height: var(--nav-h); padding: 0 12px 0 16px; border-radius: 0; font-weight: 400; color: var(--fg-3); }
[data-theme="carbon"] .nav-row:hover { color: var(--fg); }
[data-theme="carbon"] .nav-row.on { color: var(--fg); font-weight: 600; }
[data-theme="carbon"] .nav-row.on .num { color: var(--fg); }
[data-theme="carbon"] .nav-row.indent { padding-left: 44px; }
[data-theme="carbon"] .pin { border-radius: 0; }
[data-theme="carbon"] .vrow { left: 0; right: 0; height: var(--row-h); margin-top: -4px; }
[data-theme="carbon"] .conv { position: relative; border-radius: 0; padding: 12px 16px; border-bottom: 1px solid var(--border); }
[data-theme="carbon"] .conv.on { background: var(--active); }
[data-theme="carbon"] .conv.unread .conv-time { color: var(--unread); font-weight: 600; }
[data-theme="carbon"] .skel-row { padding: 12px 16px; }
[data-theme="carbon"][data-density="compact"] :is(.conv, .skel-row) { padding: 8px 16px; }
[data-theme="carbon"] .unread-count { background: var(--primary); color: #ffffff; font-weight: 400; }
[data-theme="carbon"] :is(.viewpick, .sortbtn, .iconbtn, .tool, .linkbtn, .me) { border-radius: 0; }
/* Search and fields: field colour, a bottom stroke, a 2px inset focus */
[data-theme="carbon"] :is(.lsearch, .nav-search) { height: 40px; padding: 0 16px; gap: 12px; border: 0; border-bottom: 1px solid var(--input); border-radius: 0; background: var(--subtle); box-shadow: none; }
[data-theme="carbon"] .lsearch { margin: 0 0 8px; }
[data-theme="carbon"] .nav-search { margin: 0 0 8px; }
[data-theme="carbon"] :is(.lsearch, .nav-search):hover { background: var(--hover); }
[data-theme="carbon"] :is(.lsearch, .nav-search, .composer):focus-within { box-shadow: none; border-color: var(--input); outline: 2px solid var(--focus-c); outline-offset: -2px; }
[data-theme="carbon"] :is(.lsearch, .nav-search) input { font-size: 14px; }
/* filters as inline dropdowns */
[data-theme="carbon"] .chips { gap: 1px; padding: 0 0 8px; }
[data-theme="carbon"] .chip { height: 32px; padding: 0 8px 0 12px; border: 0; border-bottom: 1px solid var(--input); border-radius: 0; background: var(--subtle); font-size: 14px; font-weight: 400; color: var(--fg); }
[data-theme="carbon"] .chip:hover { background: var(--hover); border-color: var(--input); }
[data-theme="carbon"] .chip.on { background: var(--active); border-bottom: 2px solid var(--primary); color: var(--fg); font-weight: 600; }
/* Tag */
[data-theme="carbon"] .pill { height: 18px; padding: 0 8px; font-size: 12px; font-weight: 400; letter-spacing: .32px; border: 0; }
[data-theme="carbon"] :is(.pill.grey, .pill.inbox) { background: var(--active); color: var(--fg); }

/* ── conversation: ghost toolbar buttons, the primary button with its icon at the end, line tabs ── */
[data-theme="carbon"] .th-head { min-height: 48px; padding: 8px 8px 8px 16px; }
[data-theme="carbon"] .th-who h1 { font-size: 16px; }
[data-theme="carbon"] .btn { height: var(--ctl-sm); padding: 0 12px; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 14px; font-weight: 400; color: var(--fg); }
[data-theme="carbon"] .btn:hover { background: var(--hover); }
[data-theme="carbon"] .btn:active { background: var(--border-strong); }
[data-theme="carbon"] .btn.primary { flex-direction: row-reverse; gap: 32px; padding: 0 12px 0 16px; background: var(--primary); color: #ffffff; }
[data-theme="carbon"] .btn.primary:hover { background: var(--primary-hover); }
[data-theme="carbon"] .btn.primary:active, [data-theme="carbon"] .sendgrp button:active { background: #002d9c; }
[data-theme="carbon"] .btn.icon { width: var(--ctl-sm); padding: 0; }
[data-theme="carbon"] .seg { border: 0; border-radius: 0; box-shadow: none; gap: 1px; }
[data-theme="carbon"] .seg button { width: 32px; height: 32px; }
[data-theme="carbon"] .seg button + button { border-left: 0; }
[data-theme="carbon"] .viewing { height: 24px; border-radius: 999px; background: var(--active); font-size: 12px; letter-spacing: .32px; }
[data-theme="carbon"] .summary { border-left: 3px solid var(--primary-soft-fg); padding: 12px 16px 12px 13px; }
[data-theme="carbon"] .summary .ic { color: var(--primary-soft-fg); }
[data-theme="carbon"] .banner { border-left: 3px solid currentColor; }
[data-theme="carbon"] .bubble { padding: 8px 16px; }
[data-theme="carbon"] .row.failed .bubble { box-shadow: inset 3px 0 0 var(--danger-solid); }
[data-theme="carbon"] .day, [data-theme="carbon"] .unread-sep { font-size: 12px; font-weight: 400; letter-spacing: .32px; }
[data-theme="carbon"] .sys span { border-radius: 999px; background: var(--active); letter-spacing: .32px; }
[data-theme="carbon"] .note { border: 0; border-left: 3px solid var(--note-border); }
[data-theme="carbon"] :is(.fail, .file, .media) { border-radius: 0; }
[data-theme="carbon"] .composer-wrap { padding: 0 16px 16px; }
[data-theme="carbon"] .composer { border: 0; border-bottom: 1px solid var(--input); border-radius: 0; background: var(--subtle); box-shadow: none; }
[data-theme="carbon"] .composer.note { background: var(--note-bg); border-bottom-color: var(--note-strong); }
[data-theme="carbon"] .composer.note:focus-within { box-shadow: none; outline-color: var(--note-strong); }
[data-theme="carbon"] .tabs { padding: 0; gap: 0; }
[data-theme="carbon"] :is(.tab, .ctx-tab) { height: 40px; padding: 0 16px; border-bottom: 2px solid var(--border); font-size: 14px; font-weight: 400; color: var(--fg-3); }
[data-theme="carbon"] :is(.tab, .ctx-tab):hover { border-bottom-color: var(--border-strong); color: var(--fg); }
[data-theme="carbon"] :is(.tab, .ctx-tab).on { border-bottom-color: var(--primary); color: var(--fg); font-weight: 600; }
[data-theme="carbon"] .composer.note .tab.on { border-bottom-color: var(--note-strong); color: var(--note-fg); }
[data-theme="carbon"] .hint { padding-right: 12px; }
[data-theme="carbon"] .sendgrp { gap: 1px; border-radius: 0; box-shadow: none; }
[data-theme="carbon"] .sendgrp button { height: 40px; flex-direction: row-reverse; gap: 24px; padding: 0 12px 0 16px; font-size: 14px; font-weight: 400; }
[data-theme="carbon"] .sendgrp button + button { width: 40px; border-left: 0; }
[data-theme="carbon"] .sug { height: 24px; border-radius: 999px; font-size: 12px; letter-spacing: .32px; }
[data-theme="carbon"] .sugs .lead { color: var(--fg-3); font-weight: 400; }
[data-theme="carbon"] .linkbtn { color: var(--primary); font-weight: 400; }
[data-theme="carbon"][data-mode="dark"] .linkbtn { color: #78a9ff; }
[data-theme="carbon"] .linkbtn:hover { background: transparent; text-decoration: underline; }

/* ── details pane and pages: tiles, tertiary buttons, the data table, light numerals ── */
[data-theme="carbon"] .ctx-tabs { padding: 0; gap: 0; background: var(--paper-2); border-bottom: 0; }
[data-theme="carbon"] .ctx-tab { flex: 1; }
[data-theme="carbon"] :is(.card, .trow) { border: 0; border-radius: 0; background: var(--paper); box-shadow: none; }
[data-theme="carbon"] .ghost { height: 32px; border: 1px solid var(--primary); border-radius: 0; background: transparent; box-shadow: none; color: var(--primary); font-weight: 400; justify-content: space-between; padding: 0 12px 0 16px; flex-direction: row-reverse; }
[data-theme="carbon"] .ghost:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #ffffff; }
[data-theme="carbon"][data-mode="dark"] .ghost { border-color: #ffffff; color: #ffffff; }
[data-theme="carbon"] .ghost.note { flex-direction: row; justify-content: flex-start; border: 0; border-left: 3px solid var(--note-border); color: var(--note-fg); }
[data-theme="carbon"] .ghost.note:hover { background: var(--note-bg); color: var(--note-fg); }
[data-theme="carbon"] .addtag { border-radius: 999px; }
[data-theme="carbon"] .page h1 { font-size: 28px; line-height: 36px; font-weight: 400; }
[data-theme="carbon"] :is(.kpi, .pcard) { border: 0; border-radius: 0; background: var(--paper-2); box-shadow: none; }
[data-theme="carbon"] .kpi .v { font-size: 32px; line-height: 40px; font-weight: 300; }
[data-theme="carbon"] .tbl-wrap { border: 0; border-radius: 0; background: var(--paper-2); }
[data-theme="carbon"] .tbl th { background: var(--active); font-size: 14px; font-weight: 600; color: var(--fg); padding: 14px 16px; border-bottom: 0; }
[data-theme="carbon"] .tbl td { border-bottom-color: var(--border); padding: 14px 16px; }
[data-theme="carbon"] .tbl tbody tr:hover td { background: var(--hover); }
[data-theme="carbon"] .mini { border-radius: 0; }
[data-theme="carbon"] .state .ico { border-radius: 0; background: transparent; }

/* ── overflow menu, the toast notification (top right, coloured edge), modal, the Giao diện panel ── */
[data-theme="carbon"] :is(.pop, .macros) { padding: 0; border: 0; border-radius: 0; box-shadow: var(--shadow-md); }
[data-theme="carbon"] .pop { animation: a-fade var(--dur-2) var(--ease-out); }
[data-theme="carbon"] .pop button { height: 40px; padding: 0 16px; border-radius: 0; font-size: 14px; color: var(--fg-3); }
[data-theme="carbon"] .pop button:hover, [data-theme="carbon"] .pop button:focus-visible { color: var(--fg); }
[data-theme="carbon"] .pop .sep { margin: 0; }
[data-theme="carbon"] .macro { border-radius: 0; padding: 10px 16px; }
[data-theme="carbon"] .toast { left: auto; right: 16px; top: calc(var(--top-h) + 8px); bottom: auto; translate: none; min-width: 288px; max-width: min(400px, calc(100vw - 32px)); padding: 14px 8px 14px 13px; gap: 12px; border: 0; border-left: 3px solid #4589ff; border-radius: 0; font-size: 14px; box-shadow: var(--shadow-md); animation: cb-toast var(--dur-3) var(--ease-out); }
[data-theme="carbon"] .toast > span { flex: 1; }
[data-theme="carbon"] .toast::before { content: ""; width: 20px; height: 20px; flex: none; border-radius: 999px; background: radial-gradient(circle at 50% 28%, var(--toast-bg) 0 1.3px, transparent 1.5px), linear-gradient(var(--toast-bg), var(--toast-bg)) 50% 68% / 2px 7px no-repeat, #4589ff; }
[data-theme="carbon"] .toast button { font-weight: 400; text-decoration: underline; }
@keyframes cb-toast { from { opacity: 0; transform: translateX(32px); } }
[data-theme="carbon"] .palette { border: 0; border-radius: 0; background: var(--elevated); box-shadow: var(--shadow-lg); animation: cb-modal var(--dur-3) var(--ease-out); }
[data-theme="carbon"] .palette .pin-input { height: 48px; border-bottom: 1px solid var(--input); background: var(--paper); }
[data-theme="carbon"] .palette .res { padding: 0; }
[data-theme="carbon"] .palette h4 { margin: 12px 16px 4px; }
[data-theme="carbon"] .palette .it { position: relative; height: 40px; padding: 0 16px; border-radius: 0; }
[data-theme="carbon"] .palette .it.on { background: var(--active); }
[data-theme="carbon"] .palette .it.on::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--primary); }
@keyframes cb-modal { from { opacity: 0; transform: translateY(-24px); } }
[data-theme="carbon"] .look { border: 0; border-radius: 0; box-shadow: var(--shadow-lg); }
[data-theme="carbon"] .look-seg { gap: 0; padding: 0; border: 1px solid var(--fg); border-radius: 0; background: transparent; }
[data-theme="carbon"] .look-seg button { border-radius: 0; color: var(--fg-3); }
[data-theme="carbon"] .look-seg button + button { box-shadow: -1px 0 0 var(--border-strong); }
[data-theme="carbon"] .look-seg button.on { background: var(--fg); color: var(--paper); box-shadow: none; }
[data-theme="carbon"] .look-card { border-radius: 0; background: var(--paper); }
[data-theme="carbon"] .look-card.on { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
[data-theme="carbon"] :is(.swatch, .swatch i) { border-radius: 0; }
[data-theme="carbon"] .swatch.on { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
[data-theme="carbon"] .look-actions .btn { background: var(--subtle); }

@media (max-width:767px) {
  [data-theme="carbon"] .rail-btn { flex-direction: column; height: auto; gap: 2px; padding: 0; font-size: 11px; font-weight: 400; }
  [data-theme="carbon"] .rail-btn.on::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 3px; }
  [data-theme="carbon"] .rail-btn .count { left: calc(50% + 4px); }
  [data-theme="carbon"] .top .brand { padding: 0 8px 0 12px; }
  [data-theme="carbon"] .toast { left: 8px; right: 8px; top: auto; bottom: 74px; min-width: 0; }
}

/* the header strip of this theme's mini preview in the Giao diện panel */
[data-theme="carbon"] { --pv-top: #161616; }