/* Salesforce Lightning (SLDS): 13px system type, brand #0176D3, the global header with a centred search, the
   navigation bar under it (the classic layout turns the rail into horizontal tabs with the app colour on top),
   cards floating on the blue-grey page (data-base "cloud") or on grey ("plain"), neutral buttons with blue
   labels, badges, the split-view list with its blue edge, the chat transcript in brand blue, uppercase section
   titles, object icon tiles and the grey toast at the top centre.
   Loaded after themes.css and app.css; every rule is scoped to [data-theme="lightning"]. Raw values are --sf-*. */

[data-theme="lightning"] {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: Consolas, Menlo, Monaco, Courier, monospace;

  --bg: #f3f3f3; --paper: #ffffff; --paper-2: #f3f3f3; --card: #ffffff; --elevated: #ffffff;
  --subtle: #f3f3f3; --hover: #f3f3f3; --active: #eef4ff;
  --fg: #181818; --fg-2: #2e2e2e; --fg-3: #444444; --fg-muted: #706e6b;
  --border: #e5e5e5; --border-strong: #c9c9c9; --input: #c9c9c9;

  --primary: #0176d3; --primary-hover: #014486; --primary-fg: #ffffff;
  --primary-soft: #eef4ff; --primary-soft-fg: #0b5cab;
  --ring: #1b96ff; --ring-alpha: 50%;
  --focus-w: 2px; --focus-c: #1b96ff; --focus-o: 1px;

  --danger: #ba0517; --danger-solid: #ea001e; --danger-soft: #fef1ee;
  --warn: #8c4b02; --warn-soft: #fef1e2;
  --ok: #2e844a; --ok-solid: #2e844a; --ok-soft: #ebf7e6;
  --snooze: #3a49da; --snooze-solid: #5867e8; --snooze-soft: #eef1ff;
  --label: #0b5cab; --label-soft: #eef4ff; --label-border: transparent;
  --sample: #a96404; --sample-soft: #fff1e0;
  --unread: #0176d3; --unread-line: #aacbff; --draft: #ba0517;
  --note-bg: #fef8e8; --note-border: #f9e3b6; --note-fg: #5d4400; --note-strong: #8c4b02; --note-focus: #fe9339; --note-soft: #fffbf0;
  --fail-bg: #fef1e2; --fail-border: #fe9339;

  --bubble-in: #f3f3f3; --bubble-in-fg: #181818;
  --bubble-out: #0176d3; --bubble-out-fg: #ffffff;
  --bubble-other: #014486; --bubble-other-fg: #ffffff; --bubble-other-border: transparent;
  --bubble-fail: #fef1ee; --bubble-fail-border: #ea001e; --bubble-fail-fg: #181818;
  --file-bg: #f3f3f3; --file-border: #e5e5e5;
  --summary-bg: #f4f6fe; --summary-border: #e5e5e5; --summary-fg: #181818;
  --sug-bg: #ffffff; --sug-border: #c9c9c9; --sug-hover: #f3f3f3; --sug-fg: #0176d3;
  --info-soft: #eef4ff; --info-fg: #181818;
  --mark: #fce8a5; --star: #ffb75d;

  --toast-bg: #747474; --toast-fg: #ffffff; --toast-border: transparent; --toast-action: #ffffff;
  --skel-a: #f3f3f3; --skel-b: #e5e5e5; --skel-anim: aa-shimmer 1.6s ease infinite;
  --scrim: rgb(8 7 7 / .6); --scroll-shadow: rgb(0 0 0 / .1);
  --shadow-xs: 0 0 #0000;
  --shadow-sm: 0 2px 2px rgb(0 0 0 / .1);
  --shadow-md: 0 2px 3px rgb(0 0 0 / .16);
  --shadow-lg: 0 2px 3px rgb(0 0 0 / .16), 0 0 0 1px rgb(0 0 0 / .04);
  --shadow-side: 0 2px 3px rgb(0 0 0 / .16);

  /* SLDS .25rem everywhere; badges are pills; chat messages .75rem with a flat tail corner */
  --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: calc(var(--radius) * 3); --panel-radius: var(--r-lg);
  --weight-strong: 700; --weight-head: 700; --weight-active: 700; --tracking-head: 0;
  --sec-transform: uppercase; --sec-size: 12px; --sec-weight: 400; --sec-spacing: .0625rem;
  --side-bg: #ffffff; --side-fg: #181818; --side-hover: #f3f3f3; --side-hover-fg: #181818;
  --side-active-bg: #eef4ff; --side-active-fg: #0b5cab; --side-muted: #706e6b;
  --side-border: #e5e5e5; --side-title: #181818; --side-sub-bg: transparent; --side-parent-fg: #0b5cab;

  --sf-page: linear-gradient(180deg, #b0c4df, #c3d2e7 240px, #d8e2f0);
  --sf-tile: #06a59a; --sf-einstein: linear-gradient(180deg, #0176d3, #9050e9);
  color-scheme: light;
}
[data-theme="lightning"][data-mode="dark"] {
  --bg: #0e1c2c; --paper: #16263a; --paper-2: #1d2f45; --card: #16263a; --elevated: #1d2f45;
  --subtle: #1d2f45; --hover: #22364f; --active: #0b3a6e;
  --fg: #f3f3f3; --fg-2: #e5e5e5; --fg-3: #c9c9c9; --fg-muted: #aeaeae;
  --border: #2c4058; --border-strong: #4a5e78; --input: #4a5e78;

  --primary: #1b96ff; --primary-hover: #57a3fd; --primary-fg: #032d60;
  --primary-soft: #0b3a6e; --primary-soft-fg: #78b0fd;
  --ring: #78b0fd; --focus-c: #78b0fd;

  --danger: #fe8f7d; --danger-solid: #ea001e; --danger-soft: #3e1414;
  --warn: #ffba90; --warn-soft: #3d2a12;
  --ok: #91db8b; --ok-solid: #45c65a; --ok-soft: #12331a;
  --snooze: #a3b2f2; --snooze-solid: #7f8de1; --snooze-soft: #22284d;
  --label: #78b0fd; --label-soft: #0b3a6e;
  --sample: #ffb85f; --sample-soft: #3d2a12;
  --unread: #78b0fd; --unread-line: #0b5cab; --draft: #fe8f7d;
  --note-bg: #3a3012; --note-border: #6b5617; --note-fg: #f9e3b6; --note-strong: #8c4b02; --note-focus: #fe9339; --note-soft: #2a2410;
  --fail-bg: #3d2a12; --fail-border: #8c4b02;

  --bubble-in: #22364f; --bubble-in-fg: #f3f3f3;
  --bubble-out: #0176d3; --bubble-out-fg: #ffffff;
  --bubble-other: #014486; --bubble-other-fg: #ffffff;
  --bubble-fail: #3e1414; --bubble-fail-border: #ea001e; --bubble-fail-fg: #f3f3f3;
  --file-bg: #1d2f45; --file-border: #2c4058;
  --summary-bg: #1d2f45; --summary-border: #2c4058; --summary-fg: #f3f3f3;
  --sug-bg: #16263a; --sug-border: #4a5e78; --sug-hover: #22364f; --sug-fg: #78b0fd;
  --info-soft: #0b3a6e; --info-fg: #f3f3f3;
  --mark: #6b5617; --star: #ffb75d;

  --toast-bg: #5c5c5c; --toast-fg: #ffffff;
  --skel-a: #1d2f45; --skel-b: #2c4058;
  --scrim: rgb(0 0 0 / .7); --scroll-shadow: rgb(0 0 0 / .5);
  --shadow-sm: 0 2px 2px rgb(0 0 0 / .3);
  --shadow-md: 0 2px 6px rgb(0 0 0 / .5);
  --shadow-lg: 0 2px 6px rgb(0 0 0 / .5), 0 0 0 1px rgb(255 255 255 / .05);
  --shadow-side: 0 2px 6px rgb(0 0 0 / .5);
  --side-bg: #16263a; --side-fg: #e5e5e5; --side-hover: #22364f; --side-hover-fg: #f3f3f3;
  --side-active-bg: #0b3a6e; --side-active-fg: #78b0fd; --side-muted: #aeaeae;
  --side-border: #2c4058; --side-title: #f3f3f3; --side-parent-fg: #78b0fd;

  --sf-page: linear-gradient(180deg, #032d60, #0b2647 240px, #0e1c2c);
  color-scheme: dark;
}
[data-theme="lightning"][data-base="plain"] { --sf-page: #f3f3f3; }
[data-theme="lightning"][data-base="plain"][data-mode="dark"] { --sf-page: #0e1c2c; }
/* sizes: 13px type, a 48px global header, 32px controls; compact is denser */
[data-theme="lightning"] { --fs: 13px; --lh: 20px; --top-h: 48px; --ctl-h: 32px; --ctl-sm: 32px; --nav-h: 32px; --nav-h-sm: 28px; }
[data-theme="lightning"][data-density="compact"] { --fs: 12px; --lh: 18px; --top-h: 44px; --ctl-h: 28px; --ctl-sm: 28px; --nav-h: 28px; --nav-h-sm: 26px; }
[data-theme="lightning"][data-motion="subtle"] {
  --dur-1: 100ms; --dur-2: 150ms; --dur-3: 250ms;
  --ease-out: cubic-bezier(.4, 0, .2, 1); --ease-spring: cubic-bezier(.4, 0, .2, 1);
}

/* ── global header: logo, a centred search, compact global actions ── */
[data-theme="lightning"] .top { gap: 8px; padding: 0 12px; border-bottom: 0; box-shadow: 0 2px 3px rgb(0 0 0 / .08); z-index: 6; }
[data-theme="lightning"] .top .apps-btn { display: inline-flex; color: var(--fg-muted); }
[data-theme="lightning"] .brand { font-size: 16px; font-weight: 700; }
[data-theme="lightning"] .tenant { height: 32px; border-color: var(--border-strong); box-shadow: none; font-size: 13px; font-weight: 400; }
[data-theme="lightning"] .gsearch { flex: 1 1 360px; max-width: 640px; height: 32px; margin-inline: auto; padding: 0 12px; gap: 8px; border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: var(--paper); color: var(--fg-muted); font-size: 13px; }
[data-theme="lightning"] .gsearch:hover { background: var(--paper); border-color: var(--fg-muted); }
[data-theme="lightning"] kbd { border-color: var(--border-strong); border-radius: var(--r-lg); background: var(--subtle); color: var(--fg-3); }
[data-theme="lightning"] .top-right { margin-left: 0; gap: 4px; }
[data-theme="lightning"] .iconbtn { color: var(--fg-muted); border-radius: var(--r-lg); }
[data-theme="lightning"] .iconbtn:hover { background: transparent; color: var(--primary); }
[data-theme="lightning"] .badge { top: 0; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #ba0517; color: #ffffff; font-size: 12px; font-weight: 400; line-height: 20px; box-shadow: none; }
[data-theme="lightning"] .demo-btn { height: 32px; border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--border-strong); color: var(--primary); font-weight: 400; font-size: 13px; }
[data-theme="lightning"] .demo-btn:hover, [data-theme="lightning"] .demo-btn.on { background: var(--subtle); color: var(--primary-hover); border-color: var(--border-strong); }
[data-theme="lightning"] .conn { height: 24px; border-radius: 999px; font-size: 12px; font-weight: 700; }
[data-theme="lightning"] .me { border-radius: 999px; padding: 0 4px; }
[data-theme="lightning"] .me-name { display: none; }

/* ── the navigation bar (classic): the rail becomes horizontal tabs under the header ── */
@media (min-width:768px) {
  [data-theme="lightning"][data-layout="classic"] .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--top-h) 40px minmax(0, 1fr); }
  [data-theme="lightning"][data-layout="classic"] .rail { grid-column: 1; grid-row: 2; width: auto; height: 40px; flex-direction: row; align-items: stretch; border-right: 0; border-top: 3px solid var(--primary); border-bottom: 1px solid var(--border); background: var(--paper); box-shadow: 0 2px 2px rgb(0 0 0 / .06); z-index: 5; }
  [data-theme="lightning"][data-layout="classic"] .body { grid-column: 1; grid-row: 3; }
  [data-theme="lightning"][data-layout="classic"] .rail-scroll { flex-direction: row; align-items: stretch; gap: 0; padding: 0 0 0 12px; overflow-x: auto; overflow-y: hidden; background: none; }
  [data-theme="lightning"][data-layout="classic"] .rail-foot { flex-direction: row; align-items: stretch; padding: 0 12px 0 0; border-top: 0; }
  [data-theme="lightning"][data-layout="classic"] .rail-btn { width: auto; height: 100%; min-height: 0; flex-direction: row; gap: 6px; padding: 0 12px; border-radius: 0; font-size: 13px; line-height: 20px; font-weight: 400; color: var(--fg-2); white-space: nowrap; }
  [data-theme="lightning"][data-layout="classic"] .rail-btn .ic { display: none; }
  [data-theme="lightning"][data-layout="classic"] .rail-btn:hover { background: var(--hover); color: var(--fg); box-shadow: inset 0 -3px 0 var(--border-strong); }
  [data-theme="lightning"][data-layout="classic"] .rail-btn.on { background: color-mix(in srgb, var(--primary) 5%, var(--paper)); color: var(--fg); font-weight: 700; box-shadow: inset 0 -3px 0 var(--primary); }
  [data-theme="lightning"][data-layout="classic"] .rail-btn .count { position: static; margin-left: 2px; }
  [data-theme="lightning"][data-layout="classic"] .rail-sep { width: 1px; height: 16px; margin: auto 8px; }
  [data-theme="lightning"][data-layout="classic"] .rail-cap { display: none; }
}
[data-theme="lightning"] .rail-btn .count { min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--subtle); color: var(--fg); font-size: 12px; font-weight: 700; line-height: 18px; box-shadow: inset 0 0 0 1px var(--border); }

/* ── cards on the page: every pane is a white card with a hairline and a soft drop ── */
[data-theme="lightning"] .app { background: var(--sf-page); }
[data-theme="lightning"] .body { gap: 12px; padding: 12px; }
[data-theme="lightning"] :is(.nav, .list, .thread, .ctx, .page) { border: 1px solid var(--border); border-radius: var(--card-radius); background: var(--paper); box-shadow: var(--shadow-sm); }
[data-theme="lightning"] :is(.nav, .list, .thread) { overflow: hidden; }
[data-theme="lightning"] .nav { --paper-2: var(--paper); }
[data-theme="lightning"] .ctx { --paper-2: var(--paper); }
[data-theme="lightning"][data-layout="sidebar"] .app { background: var(--sf-page); }
[data-theme="lightning"][data-layout="sidebar"] .rail { --sb-w: 15rem; width: var(--sb-w); background: var(--side-bg); border-right: 1px solid var(--side-border); }
[data-theme="lightning"][data-layout="sidebar"][data-sidebar="collapsed"] .rail { --sb-w: 3.5rem; }
[data-theme="lightning"][data-layout="sidebar"] .main { margin: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
[data-theme="lightning"][data-layout="sidebar"] .top { background: var(--paper); }
[data-theme="lightning"] .sb-label { text-transform: uppercase; letter-spacing: .0625rem; font-size: 12px; font-weight: 400; }
[data-theme="lightning"] :is(.sb-item, .sb-subitem) { border-radius: var(--r-lg); }
[data-theme="lightning"] :is(.sb-item, .sb-subitem).on { box-shadow: inset 3px 0 0 var(--primary); }
[data-theme="lightning"] .sb-row:has(+ .sb-sub) .sb-item.on { box-shadow: none; }
[data-theme="lightning"] .sb-sub { border-left: 0; }
/* card headers carry an object icon tile, as SLDS cards do */
[data-theme="lightning"] :is(.list-head, .nav-head) h2 { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; }
[data-theme="lightning"] .list-head h2::before, [data-theme="lightning"] .nav-head h2::before { content: ""; width: 24px; height: 24px; flex: none; border-radius: var(--r-lg); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13l2.4-7.2A1 1 0 0 1 7.3 5h9.4a1 1 0 0 1 .95.8L20 13M4 13v5a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-5h-5a3 3 0 0 1-6 0z'/%3E%3C/svg%3E") center / 16px no-repeat, var(--sf-tile); }
[data-theme="lightning"] .viewpick { font-size: 14px; }
[data-theme="lightning"] .list-head { padding: 12px 12px 8px 12px; }
[data-theme="lightning"] .nav-head { padding: 12px 8px 8px 12px; }
[data-theme="lightning"] .nav-row { height: var(--nav-h); border-radius: var(--r-lg); font-weight: 400; }
[data-theme="lightning"] .nav-row.on { box-shadow: inset 3px 0 0 var(--primary); color: var(--primary-soft-fg); font-weight: 700; }
[data-theme="lightning"] .nav-row .num { color: var(--fg-muted); font-weight: 400; }

/* ── split view list: dividers, a blue dot on unread, the selected item with a 4px brand edge ── */
[data-theme="lightning"] .vrow { left: 0; right: 0; height: var(--row-h); margin-top: -4px; }
[data-theme="lightning"] .conv { position: relative; padding: 12px 12px 12px 24px; border-radius: 0; border-bottom: 1px solid var(--border); }
[data-theme="lightning"] .conv:hover { background: var(--hover); }
[data-theme="lightning"] .conv.on { background: var(--hover); box-shadow: inset 4px 0 0 var(--primary); }
[data-theme="lightning"] .conv.unread::before { content: ""; position: absolute; left: 9px; top: 21px; width: 8px; height: 8px; border-radius: 999px; background: #1b96ff; }
[data-theme="lightning"] .conv-name { font-weight: 400; color: var(--primary); }
[data-theme="lightning"][data-mode="dark"] .conv-name { color: var(--primary-soft-fg); }
[data-theme="lightning"] .conv.unread .conv-name { font-weight: 700; }
[data-theme="lightning"] .conv.unread .conv-time { color: var(--fg); font-weight: 700; }
[data-theme="lightning"] .skel-row { padding: 12px 12px 12px 24px; }
[data-theme="lightning"][data-density="compact"] :is(.conv, .skel-row) { padding-top: 8px; padding-bottom: 8px; }
[data-theme="lightning"][data-density="compact"] .conv.unread::before { top: 50%; translate: 0 -50%; }
[data-theme="lightning"] .unread-count { background: var(--primary); color: var(--primary-fg); font-weight: 700; }
/* badges */
[data-theme="lightning"] .pill { height: 20px; padding: 0 8px; border: 0; font-size: 12px; font-weight: 600; }
[data-theme="lightning"] :is(.pill.grey, .pill.inbox) { background: var(--paper); color: var(--fg); box-shadow: inset 0 0 0 1px var(--border); }
/* stateful filter buttons */
[data-theme="lightning"] .chips { gap: 4px; }
[data-theme="lightning"] .chip { height: 28px; padding: 0 8px 0 12px; border-color: var(--border-strong); background: var(--paper); font-size: 13px; font-weight: 400; color: var(--primary); }
[data-theme="lightning"] .chip:hover { background: var(--subtle); border-color: var(--border-strong); }
[data-theme="lightning"] .chip.on { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); }
/* inputs: grey frame, blue focus with the SLDS glow */
[data-theme="lightning"] :is(.lsearch, .nav-search) { height: 32px; border-color: var(--input); box-shadow: none; }
[data-theme="lightning"] :is(.lsearch, .nav-search, .composer):focus-within { border-color: var(--ring); box-shadow: 0 0 3px var(--primary); }

/* ── conversation: neutral buttons with blue labels, the chat transcript, default tabs ── */
[data-theme="lightning"] .th-head { border-bottom-color: var(--border); }
[data-theme="lightning"] .th-who h1 { font-size: 18px; line-height: 24px; font-weight: 700; }
[data-theme="lightning"] .btn { height: var(--ctl-sm); padding: 0 16px; border-color: var(--border-strong); background: var(--paper); box-shadow: none; font-size: 13px; font-weight: 400; color: var(--primary); }
[data-theme="lightning"] .btn:hover { background: var(--subtle); color: var(--primary-hover); }
[data-theme="lightning"][data-mode="dark"] .btn:not(.primary) { color: var(--primary-soft-fg); }
[data-theme="lightning"] .btn.primary { border-color: var(--primary); background: var(--primary); color: var(--primary-fg); }
[data-theme="lightning"] .btn.primary:hover { background: var(--primary-hover); color: var(--primary-fg); border-color: var(--primary-hover); }
[data-theme="lightning"] .btn.icon { width: var(--ctl-sm); padding: 0; }
[data-theme="lightning"] .seg { border-color: var(--border-strong); box-shadow: none; }
[data-theme="lightning"] .seg button { color: var(--primary); }
[data-theme="lightning"] .seg button + button { border-left-color: var(--border-strong); }
[data-theme="lightning"] .viewing { border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--border); font-weight: 700; }
/* the AI summary gets an Einstein-style gradient edge */
[data-theme="lightning"] .summary { position: relative; padding-left: 24px; }
[data-theme="lightning"] .summary::before { content: ""; position: absolute; left: 12px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--sf-einstein); }
[data-theme="lightning"] .summary .ic { color: #9050e9; }
[data-theme="lightning"] .bubble { padding: 8px 12px; border-radius: var(--bubble-radius) var(--bubble-radius) var(--bubble-radius) 2px; }
[data-theme="lightning"] .row.out .bubble { border-radius: var(--bubble-radius) var(--bubble-radius) 2px var(--bubble-radius); }
[data-theme="lightning"] .day, [data-theme="lightning"] .unread-sep { text-transform: uppercase; letter-spacing: .0625rem; font-weight: 400; font-size: 11px; }
[data-theme="lightning"] .linkbtn { color: var(--primary); font-weight: 400; }
[data-theme="lightning"][data-mode="dark"] .linkbtn { color: var(--primary-soft-fg); }
[data-theme="lightning"] .linkbtn:hover { background: transparent; text-decoration: underline; }
[data-theme="lightning"] .linkbtn.red { color: var(--danger); }
[data-theme="lightning"] .composer { border-color: var(--input); box-shadow: none; }
[data-theme="lightning"] .tabs { margin: 0 12px; padding: 4px 0 0; gap: 0; border-bottom: 1px solid var(--border); }
[data-theme="lightning"] .ctx-tabs { gap: 0; padding: 0 12px; background: var(--paper); }
[data-theme="lightning"] :is(.tab, .ctx-tab) { height: 36px; padding: 0 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 13px; font-weight: 400; color: var(--fg-3); }
[data-theme="lightning"] :is(.tab, .ctx-tab):hover { border-bottom-color: var(--border-strong); color: var(--fg); }
[data-theme="lightning"] :is(.tab, .ctx-tab).on { border-bottom-color: var(--primary); color: var(--fg); font-weight: 700; }
[data-theme="lightning"] .composer.note .tab.on { border-bottom-color: var(--note-focus); color: var(--note-fg); }
[data-theme="lightning"] .sendgrp { box-shadow: none; gap: 1px; }
[data-theme="lightning"] .sendgrp button { height: 32px; padding: 0 16px; font-size: 13px; font-weight: 400; }
[data-theme="lightning"] .sendgrp button + button { border-left: 0; }
[data-theme="lightning"] .sug { height: 28px; border-radius: var(--r-lg); font-size: 13px; }
[data-theme="lightning"] .tool { color: var(--fg-muted); font-weight: 400; }

/* ── related panel and pages ── */
[data-theme="lightning"] .ctx-body { gap: 16px; }
[data-theme="lightning"] :is(.card, .trow) { box-shadow: none; }
[data-theme="lightning"] .ghost { border-color: var(--border-strong); box-shadow: none; color: var(--primary); font-weight: 400; }
[data-theme="lightning"][data-mode="dark"] .ghost { color: var(--primary-soft-fg); }
[data-theme="lightning"] .ghost:hover { background: var(--subtle); }
[data-theme="lightning"] .ghost.note { color: var(--note-fg); }
[data-theme="lightning"] .page h1 { font-size: 18px; line-height: 24px; font-weight: 700; }
[data-theme="lightning"] :is(.kpi, .pcard) { box-shadow: var(--shadow-sm); }
[data-theme="lightning"] .kpi .v { font-weight: 300; font-size: 32px; }
[data-theme="lightning"] .tbl th { background: var(--subtle); font-size: 12px; font-weight: 700; color: var(--fg-3); text-transform: uppercase; letter-spacing: .0625rem; }
[data-theme="lightning"] .tbl td { padding: 8px 14px; }
[data-theme="lightning"] .tbl tbody tr:hover td { background: var(--hover); }

/* ── dropdowns, the toast, the search modal, the Giao diện panel ── */
[data-theme="lightning"] :is(.pop, .macros) { padding: 4px 0; box-shadow: var(--shadow-md); }
[data-theme="lightning"] .pop button { height: 32px; padding: 0 12px; border-radius: 0; font-size: 13px; }
[data-theme="lightning"] .pop .sep { margin: 4px 0; }
[data-theme="lightning"] .macro { border-radius: 0; }
[data-theme="lightning"] .pop { animation: a-fade var(--dur-2) var(--ease-out); }
[data-theme="lightning"] .toast { top: calc(var(--top-h) + 8px); bottom: auto; min-width: min(480px, calc(100vw - 32px)); padding: 12px 16px; gap: 12px; border: 0; border-radius: var(--r-lg); font-size: 14px; font-weight: 700; box-shadow: var(--shadow-md); animation: sf-toast var(--dur-3) var(--ease-out); }
[data-theme="lightning"] .toast > span { flex: 1; }
[data-theme="lightning"] .toast::before { content: ""; width: 24px; height: 24px; flex: none; border-radius: 999px; background: radial-gradient(circle at 50% 30%, var(--toast-bg) 0 1.5px, transparent 1.8px), linear-gradient(var(--toast-bg), var(--toast-bg)) 50% 70% / 2.2px 8px no-repeat, #ffffff; }
[data-theme="lightning"] .toast button { color: var(--toast-action); font-weight: 400; text-decoration: underline; }
@keyframes sf-toast { from { opacity: 0; transform: translateY(-16px); } }
[data-theme="lightning"] .palette { box-shadow: var(--shadow-lg); }
[data-theme="lightning"] .palette .it { height: 36px; border-radius: 0; }
[data-theme="lightning"] .palette .res { padding: 4px 0; }
[data-theme="lightning"] .palette .it.on { background: var(--hover); box-shadow: inset 4px 0 0 var(--primary); }
[data-theme="lightning"] .look { box-shadow: var(--shadow-lg); }
[data-theme="lightning"] .look-seg { gap: 0; padding: 0; border: 1px solid var(--border-strong); background: var(--paper); }
[data-theme="lightning"] .look-seg button { border-radius: 0; color: var(--primary); font-weight: 400; }
[data-theme="lightning"] .look-seg button + button { box-shadow: -1px 0 0 var(--border-strong); }
[data-theme="lightning"] .look-seg button.on { background: var(--primary); color: var(--primary-fg); box-shadow: none; font-weight: 400; }
[data-theme="lightning"] .look-card.on { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }

@media (max-width:1535px) {
  [data-theme="lightning"][data-layout="sidebar"] .ctx { right: 12px; bottom: 12px; top: 12px; box-shadow: var(--shadow-lg); }
}
@media (max-width:1279px) {
  [data-theme="lightning"] .ctx { right: 12px; bottom: 12px; top: 12px; box-shadow: var(--shadow-lg); }
}
@media (max-width:1023px) {
  [data-theme="lightning"] .nav { left: 12px; top: 12px; bottom: 12px; box-shadow: var(--shadow-lg); }
}
@media (max-width:767px) {
  [data-theme="lightning"] .body { gap: 0; padding: 0; }
  [data-theme="lightning"] :is(.list, .thread, .page) { border: 0; border-radius: 0; box-shadow: none; }
  [data-theme="lightning"] .rail-btn.on { box-shadow: inset 0 3px 0 var(--primary); }
  [data-theme="lightning"] .toast { left: 8px; right: 8px; translate: none; min-width: 0; top: 56px; }
}

/* the header strip of this theme's mini preview in the Giao diện panel */
[data-theme="lightning"] { --pv-top: linear-gradient(var(--paper) 0 50%, var(--primary) 50% 72%, var(--paper) 72%); }