/* Qalam — the Liquid Glass look (View › Liquid Glass, or File › Options › Look), after Apple's macOS 26 design.
 * Every floating layer (tabs, ribbon groups, menus, dialogs, status bar, panes) is made of one glass material and the
 * document page stays opaque paper. In the Mac app the window itself is clear: real macOS glass (the desktop behind
 * the window, frosted) shows through the page. In a browser a soft wallpaper stands in for the desktop.
 * Everything here is scoped to :root[data-look="glass"]; the original look (ui.css) is untouched. */

:root[data-look="glass"] {
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Arabic", "Helvetica Neue", "Geeza Pro", sans-serif;
  --accent: #007aff; --accent-hover: #0a6fe6; --accent-text: #0068da; --accent-weak: rgba(0, 122, 255, .2); --accent-dark: #0062cc;
  --fg: rgba(0, 0, 0, .86); --fg-muted: rgba(60, 60, 67, .62);
  --ic-accent: rgba(60, 60, 67, .58);            /* symbols in two tones, like SF Symbols' hierarchical rendering */
  --sep: rgba(60, 60, 67, .14);
  --hover: rgba(0, 0, 0, .055); --pressed: rgba(0, 0, 0, .1); --checked: rgba(0, 122, 255, .14); --checked-border: transparent;
  --chrome-bg: transparent; --ribbon-bg: transparent; --canvas-bg: transparent; --bs-bg: transparent;
  --menu-bg: rgba(250, 250, 252, .72); --sheet-bg: rgba(250, 250, 252, .82); --menu-border: rgba(0, 0, 0, .1); --menu-shadow: 0 18px 50px rgba(0, 0, 0, .2), 0 2px 8px rgba(0, 0, 0, .08);
  --input-bg: rgba(255, 255, 255, .72); --input-border: rgba(0, 0, 0, .11);
  --btn-bg: rgba(255, 255, 255, .82); --btn-border: rgba(0, 0, 0, .07);
  --ruler-margin: rgba(0, 0, 0, .06); --ruler-page: rgba(255, 255, 255, .85); --ruler-ink: rgba(60, 60, 67, .7); --ruler-marker: rgba(60, 60, 67, .72);
  --ctx-bg: rgba(0, 122, 255, .12);
  /* the material */
  --glass: rgba(255, 255, 255, .34);
  --glass-strong: rgba(255, 255, 255, .6);
  --glass-lit: rgba(255, 255, 255, .5);
  --glass-blur: blur(24px) saturate(200%) brightness(1.04);
  --glass-edge: rgba(0, 0, 0, .07);
  /* a water-drop feel: a bright line along the top edge, light gathered inside the top, a darker lower edge for thickness */
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .4), inset 0 0 0 .5px rgba(255, 255, 255, .55),
    inset 0 12px 22px -14px rgba(255, 255, 255, .85), inset 0 -14px 24px -16px rgba(0, 0, 0, .1);
  --glass-gloss: radial-gradient(130% 80% at 18% -12%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, .07));
  --glass-shadow: 0 8px 28px rgba(0, 0, 0, .09), 0 1px 3px rgba(0, 0, 0, .07);
  --rim: linear-gradient(140deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .25) 28%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, .45) 100%);
  --segment-on: linear-gradient(180deg, #fff, rgba(255, 255, 255, .9));
  --segment-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 3px 10px rgba(0, 0, 0, .06), inset 0 0 0 .5px rgba(0, 0, 0, .04);
  --field: rgba(118, 118, 128, .12);
  --icon-paper: #fff;
  /* stands in for the desktop in a browser (the Mac app shows the real desktop, frosted) */
  --wallpaper:
    radial-gradient(1100px 760px at 8% 0%, rgba(120, 178, 255, .95), transparent 62%),
    radial-gradient(900px 700px at 96% 12%, rgba(255, 170, 205, .85), transparent 58%),
    radial-gradient(1000px 900px at 62% 104%, rgba(170, 150, 255, .9), transparent 62%),
    linear-gradient(165deg, #d4e6ff 0%, #ebe4ff 52%, #ffe4ee 100%);
}
:root[data-look="glass"][data-theme="dark"] {
  --accent: #0a84ff; --accent-hover: #3d9bff; --accent-text: #57a9ff; --accent-weak: rgba(10, 132, 255, .3); --accent-dark: #0a6fd6;
  --fg: rgba(255, 255, 255, .9); --fg-muted: rgba(235, 235, 245, .6);
  --ic-accent: rgba(235, 235, 245, .55);
  --sep: rgba(255, 255, 255, .11);
  --hover: rgba(255, 255, 255, .08); --pressed: rgba(255, 255, 255, .14); --checked: rgba(10, 132, 255, .3);
  --menu-bg: rgba(40, 40, 44, .74); --sheet-bg: rgba(36, 36, 40, .84); --menu-border: rgba(255, 255, 255, .12); --menu-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .3);
  --input-bg: rgba(255, 255, 255, .07); --input-border: rgba(255, 255, 255, .13);
  --btn-bg: rgba(255, 255, 255, .13); --btn-border: rgba(255, 255, 255, .09);
  --ruler-margin: rgba(255, 255, 255, .05); --ruler-page: rgba(255, 255, 255, .15); --ruler-ink: rgba(235, 235, 245, .68); --ruler-marker: rgba(235, 235, 245, .72);
  --ctx-bg: rgba(10, 132, 255, .24);
  --glass: rgba(42, 42, 48, .38);
  --glass-strong: rgba(38, 38, 42, .66);
  --glass-lit: rgba(255, 255, 255, .12);
  --glass-edge: rgba(0, 0, 0, .45);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(255, 255, 255, .05), inset 0 0 0 .5px rgba(255, 255, 255, .08),
    inset 0 12px 22px -14px rgba(255, 255, 255, .12), inset 0 -14px 24px -16px rgba(0, 0, 0, .35);
  --glass-gloss: radial-gradient(130% 80% at 18% -12%, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 42%);
  --glass-shadow: 0 8px 28px rgba(0, 0, 0, .32), 0 1px 3px rgba(0, 0, 0, .3);
  --rim: linear-gradient(140deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .08) 30%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, .14) 100%);
  --segment-on: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .13));
  --segment-shadow: 0 1px 2px rgba(0, 0, 0, .35), inset 0 0 0 .5px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .1);
  --field: rgba(118, 118, 128, .24);
  --icon-paper: #3a3a40;
  --wallpaper:
    radial-gradient(1100px 760px at 8% 0%, rgba(40, 84, 190, .9), transparent 62%),
    radial-gradient(900px 700px at 96% 12%, rgba(120, 52, 140, .8), transparent 58%),
    radial-gradient(1000px 900px at 62% 104%, rgba(36, 92, 140, .85), transparent 62%),
    linear-gradient(165deg, #0c1632 0%, #161a3c 52%, #251735 100%);
}

/* ---------------- the window ---------------- */
:root[data-look="glass"] body { background: var(--wallpaper) fixed; }
:root[data-look="glass"] body.native { background: transparent; }   /* the Mac app's real glass shows through */
:root[data-look="glass"] .ic .w { fill: var(--icon-paper); }
:root[data-look="glass"] button:focus-visible, :root[data-look="glass"] select:focus-visible { outline: 3px solid var(--accent-weak); outline-offset: 1px; }

/* the glass material: translucent fill, blur of what lies behind, a hairline edge, a lit rim and a soft shadow.
 * (Separate selectors, not one :is(), so each keeps its own specificity and the rules below can refine it.) */
:root[data-look="glass"] :is(#titlebar, #statusbar, #navpane),
:root[data-look="glass"] :is(.rgroup, .cmt-card, .bs-nav, .lo-btn, .menu, .tooltip, .dlg),
:root[data-look="glass"] .qat.in-tabbar {
  background: var(--glass-gloss), var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: .5px solid var(--glass-edge);
  box-shadow: var(--glass-hi), var(--glass-shadow);
}
:root[data-look="glass"] :is(#statusbar, #navpane)::before,
:root[data-look="glass"] :is(.rgroup, .menu, .dlg, .cmt-card, .bs-nav)::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 0;
  background: var(--rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
:root[data-look="glass"] :is(.menu, .tooltip) { background: var(--glass-gloss), var(--menu-bg); }
:root[data-look="glass"] .dlg { background: var(--glass-gloss), var(--sheet-bg); }

/* Mac app on macOS 26+: Apple's real Liquid Glass is drawn behind these (src/ui/glass.ts), so the page leaves them clear */
:root[data-look="glass"][data-native-glass] :is(#statusbar, #navpane),
:root[data-look="glass"][data-native-glass] body:not(.ribbon-peek) .rgroup,
:root[data-look="glass"][data-native-glass] :is(.bs-nav, .qat.in-tabbar),
:root[data-look="glass"][data-native-glass] body.native #tabbar > #cmd-search {
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: transparent; box-shadow: none;
}
:root[data-look="glass"][data-native-glass] :is(#statusbar, #navpane)::before,
:root[data-look="glass"][data-native-glass] body:not(.ribbon-peek) .rgroup::before,
:root[data-look="glass"][data-native-glass] .bs-nav::before { display: none; }

/* ---------------- title bar (browser) ---------------- */
:root[data-look="glass"] #titlebar { height: 46px; padding: 0 12px; color: var(--fg); border-width: 0 0 .5px; border-radius: 0; box-shadow: none; }
:root[data-look="glass"] .qbtn { width: 32px; height: 30px; border-radius: 999px; color: var(--fg); }
:root[data-look="glass"] .qbtn:hover:not(:disabled) { background: var(--hover); }
:root[data-look="glass"] .tb-title { font-weight: 600; font-size: 13px; color: var(--fg); }
:root[data-look="glass"] .cmd-search { height: 30px; border-radius: 999px; padding: 0 12px; background: var(--field); color: var(--fg); box-shadow: inset 0 .5px 1px rgba(0, 0, 0, .06); }
:root[data-look="glass"][data-theme="dark"] .cmd-search { background: var(--field); color: var(--fg); }
:root[data-look="glass"] .cmd-search .search-icon .ic { opacity: .55; }
:root[data-look="glass"] .search-input::placeholder { color: var(--fg-muted); opacity: 1; }

/* ---------------- tabs: capsules, the current one raised like a segmented control ---------------- */
:root[data-look="glass"] #tabbar { height: 44px; align-items: center; gap: 2px; padding: 0 12px; position: relative; }
/* the selection pill that flows between items (src/ui/glass.ts): tabs, the File tab's pages, the Navigation pane */
.glass-glider { display: none; }
:root[data-look="glass"] :is(#tabbar, .bs-nav, .np-list) > .glass-glider { display: block; position: absolute; z-index: 0; border-radius: 10px; background: var(--segment-on); box-shadow: var(--segment-shadow); pointer-events: none; opacity: 0; transition: opacity .2s; }
:root[data-look="glass"] #tabbar > .glass-glider { border-radius: 999px; }
:root[data-look="glass"] .np-list > .glass-glider { border-radius: 8px; }
:root[data-look="glass"] :is(#tabbar .tab, .bs-nav > .bs-item, .np-list > .np-item) { position: relative; z-index: 1; }
:root[data-look="glass"] .np-list { position: relative; }
:root[data-look="glass"] .tab { height: 30px; padding: 0 14px; border-radius: 999px; color: var(--fg-muted); font-size: 13px; font-weight: 500; transition: background-color .18s, color .18s, box-shadow .18s; }
:root[data-look="glass"] .tab:hover { background: var(--hover); color: var(--fg); }
:root[data-look="glass"] .tab.active { background: transparent; color: var(--fg); font-weight: 600; box-shadow: none; }   /* the pill (.glass-glider) flows under it */
:root[data-look="glass"] .tab.active::after { display: none; }
:root[data-look="glass"] .tab-file { color: var(--accent-text); font-weight: 600; }
:root[data-look="glass"] .tab.ctx { background: var(--ctx-bg); color: var(--accent-text); }
:root[data-look="glass"] .tab.ctx.active { background: transparent; color: var(--accent-text); }
:root[data-look="glass"] .tab-collapse { width: 30px; height: 30px; margin: 0; border-radius: 999px; }
:root[data-look="glass"] .qat.in-tabbar { height: 32px; padding: 0 3px; margin-inline-end: 8px; border-radius: 999px; gap: 0; position: relative; }
:root[data-look="glass"] .qat.in-tabbar .qbtn { width: 30px; height: 28px; }
/* the Mac app's command search sits at the end of the tab row (only in this look) */
body.native #tabbar > #cmd-search { display: none; }
:root[data-look="glass"] body.native #tabbar > #cmd-search { display: flex; width: min(260px, 26vw); margin-inline-end: 6px; }

/* ---------------- ribbon: each group is its own glass card ---------------- */
:root[data-look="glass"] #ribbon { height: 108px; margin: 0 8px; background: none; border-radius: 0; box-shadow: none; overflow: visible; }
:root[data-look="glass"] .rpanel { gap: 8px; padding: 2px 4px 10px; }
:root[data-look="glass"] .rgroup { padding: 3px 6px 0; border-radius: 18px; }
:root[data-look="glass"] .rgroup > * { position: relative; z-index: 1; }
:root[data-look="glass"] .rgroup-label { height: 17px; line-height: 15px; font-size: 11px; color: var(--fg-muted); }
:root[data-look="glass"] .rlauncher { border-radius: 999px; bottom: 3px; inset-inline-end: 6px; }
:root[data-look="glass"] .rbtn { border-radius: 8px; border: none; transition: background-color .15s; }
:root[data-look="glass"] .rbtn.on { color: var(--accent-text); --ic-accent: var(--accent-text); }
:root[data-look="glass"] .rbtn.big { border-radius: 12px; }
:root[data-look="glass"] .rbtn.big .ic { width: 30px; height: 30px; stroke-width: 1.2; }
:root[data-look="glass"] .rsplit { border-radius: 8px; }
:root[data-look="glass"] .rsplit:hover > .rbtn:not(:disabled) { background: var(--hover); border-color: transparent; }
:root[data-look="glass"] .rsplit > .rbtn:first-child { border-start-start-radius: 8px; border-end-start-radius: 8px; }
:root[data-look="glass"] .rsplit > .rbtn:last-child { border-start-end-radius: 8px; border-end-end-radius: 8px; }
:root[data-look="glass"] .rsplit.big > .rbtn.big { border-radius: 12px 12px 0 0; }
:root[data-look="glass"] .rsplit.big > .rarrow { border-radius: 0 0 12px 12px; }
:root[data-look="glass"] :is(.rcombo, .rspin-input) { border: .5px solid var(--input-border); border-radius: 7px; background: var(--input-bg); box-shadow: inset 0 .5px 1px rgba(0, 0, 0, .05); }
:root[data-look="glass"] .rcombo:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
:root[data-look="glass"] .rgallery { border: none; border-radius: 12px; background: var(--field); }
:root[data-look="glass"] .gal-item { border: none; border-radius: 10px; }
:root[data-look="glass"] .gal-item.on { background: var(--segment-on); box-shadow: var(--segment-shadow); }
:root[data-look="glass"] .gal-nav { border-inline-start: .5px solid var(--sep); }
:root[data-look="glass"] .gal-scroll:first-child { border-start-end-radius: 12px; }
:root[data-look="glass"] .gal-scroll:last-child { border-end-end-radius: 12px; }
:root[data-look="glass"] .rsep { background: var(--sep); }
:root[data-look="glass"] body.ribbon-collapsed.ribbon-peek #ribbon { top: 90px; inset-inline: 8px; box-shadow: none; }
:root[data-look="glass"] body.native.ribbon-collapsed.ribbon-peek #ribbon { top: 44px; }

/* ---------------- the document area ---------------- */
:root[data-look="glass"] #ruler { background: transparent; border-bottom: none; margin: 0 8px; }
:root[data-look="glass"] #sheets .sheet { box-shadow: 0 0 0 .5px rgba(0, 0, 0, .06), 0 2px 6px rgba(0, 0, 0, .07), 0 14px 40px rgba(0, 0, 0, .12); }
:root[data-look="glass"][data-theme="dark"] #sheets .sheet { box-shadow: 0 0 0 .5px rgba(255, 255, 255, .08), 0 14px 40px rgba(0, 0, 0, .45); }

/* ---------------- status bar: a floating glass bar ---------------- */
:root[data-look="glass"] #statusbar { height: 32px; margin: 2px 10px 10px; padding: 0 8px; border-radius: 16px; position: relative; color: var(--fg-muted); }
:root[data-look="glass"] #statusbar > * { position: relative; z-index: 1; }
:root[data-look="glass"] :is(.sb-item, .sb-icon) { border-radius: 999px; }
:root[data-look="glass"] .sb-icon.on { background: var(--segment-on); color: var(--fg); box-shadow: var(--segment-shadow); }

/* the zoom slider: a slim track filled with the accent, and a glass knob that swells into a clear drop while you drag it */
:root[data-look="glass"] .zoom-slider { -webkit-appearance: none; appearance: none; width: 128px; height: 26px; padding: 0 8px; margin: 0; background: transparent; overflow: visible; }
:root[data-look="glass"] .zoom-slider:focus { outline: none; }
:root[data-look="glass"] .zoom-slider::-webkit-slider-runnable-track {
  height: 5px; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) 0 var(--fill, 50%), var(--field) var(--fill, 50%) 100%);
  box-shadow: inset 0 .5px 1px rgba(0, 0, 0, .2), 0 .5px 0 rgba(255, 255, 255, .25);
}
:root[data-look="glass"] .zoom-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 16px; margin-top: -5.5px; border-radius: 999px;
  background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .86));
  border: .5px solid rgba(0, 0, 0, .08);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 2px rgba(0, 0, 0, .07), 0 1px 3px rgba(0, 0, 0, .28), 0 4px 10px rgba(0, 0, 0, .12);
  transition: width .4s cubic-bezier(.3, 1.6, .5, 1), height .4s cubic-bezier(.3, 1.6, .5, 1), margin-top .4s cubic-bezier(.3, 1.6, .5, 1),
    background .25s, box-shadow .25s, border-color .25s;   /* (WebKit ignores transforms on a slider's knob, so it grows instead) */
}
:root[data-look="glass"] .zoom-slider:is(:active, .dragging)::-webkit-slider-thumb {
  width: 38px; height: 24px; margin-top: -9.5px;
  background: radial-gradient(120% 90% at 32% 18%, rgba(255, 255, 255, .6), rgba(255, 255, 255, .06) 62%), rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .75);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .6), inset 0 2px 3px rgba(255, 255, 255, .65), inset 0 -3px 5px rgba(0, 0, 0, .16), 0 6px 18px rgba(0, 0, 0, .22);
}

/* ---------------- navigation pane: a floating glass sidebar ---------------- */
:root[data-look="glass"] #navpane { margin-block: 0 10px; margin-inline: 10px 0; border-radius: 18px; position: relative; border-inline-end: .5px solid var(--glass-edge); }
:root[data-look="glass"] #navpane > * { position: relative; z-index: 1; }
:root[data-look="glass"] .np-list { border-top: none; }
:root[data-look="glass"] .np-item { border-radius: 8px; }
:root[data-look="glass"] .np-item.on { background: transparent; box-shadow: none; font-weight: 600; }
:root[data-look="glass"] .np-tab { border-bottom-color: var(--accent); }

/* ---------------- menus, tooltips, toasts: highlighted rows use the accent, like macOS menus ---------------- */
:root[data-look="glass"] .menu { padding: 5px; border-radius: 13px; }
:root[data-look="glass"] .menu > * { position: relative; z-index: 1; }
:root[data-look="glass"] .mi { min-height: 26px; border-radius: 7px; padding: 0 9px; }
:root[data-look="glass"] .mi:hover, :root[data-look="glass"] .mi:focus { background: var(--accent); color: #fff; --ic-accent: #fff; }
:root[data-look="glass"] .mi:hover :is(.mi-sc, .mi-sample), :root[data-look="glass"] .mi:focus :is(.mi-sc, .mi-sample) { color: rgba(255, 255, 255, .78); }
:root[data-look="glass"] .mi.checked-icon { background: var(--checked); }
:root[data-look="glass"] .msep { margin: 5px 9px; }
:root[data-look="glass"] .mhead { color: var(--fg-muted); font-weight: 600; }
:root[data-look="glass"] .shape-gallery .mhead { background: transparent; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
:root[data-look="glass"] .tooltip { border-radius: 9px; padding: 7px 10px; }
:root[data-look="glass"] .toast { border-radius: 999px; padding: 10px 20px; background: rgba(28, 28, 30, .72); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .2), 0 10px 30px rgba(0, 0, 0, .25); }
:root[data-look="glass"] :is(.sw, .swatch) { border-radius: 4px; border-color: rgba(0, 0, 0, .12); }
:root[data-look="glass"] :is(.lib-item, .sym) { border: .5px solid var(--sep); border-radius: 9px; background: var(--input-bg); }
:root[data-look="glass"] :is(.pos-cell, .lo-cell, .pic-cell, .sg-item) { border-radius: 8px; }

/* ---------------- dialogs: glass sheets with capsule buttons ---------------- */
:root[data-look="glass"] .dlg-back { background: rgba(0, 0, 0, .14); }
:root[data-look="glass"] .dlg { border-radius: 22px; position: relative; }
:root[data-look="glass"] .dlg > * { position: relative; z-index: 1; }
:root[data-look="glass"] .dlg-title { padding: 14px 14px 6px 20px; padding-inline: 20px 12px; font-size: 13px; }
:root[data-look="glass"] .dlg-body { padding: 6px 20px 12px; }
:root[data-look="glass"] .dlg-foot { padding: 10px 20px 18px; }
:root[data-look="glass"] .dlg-x { border-radius: 999px; }
:root[data-look="glass"] .btn { height: 28px; padding: 0 18px; border-radius: 999px; border: .5px solid var(--btn-border); background: var(--btn-bg); box-shadow: 0 .5px 1.5px rgba(0, 0, 0, .12), inset 0 .5px 0 rgba(255, 255, 255, .6); font-weight: 500; }
:root[data-look="glass"] .btn:hover { background: var(--btn-bg); filter: brightness(.97); }
:root[data-look="glass"] .btn.primary { background: var(--accent); border-color: transparent; color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .16), inset 0 .5px 0 rgba(255, 255, 255, .3); }
:root[data-look="glass"] .btn.primary:hover { background: var(--accent-hover); filter: none; }
:root[data-look="glass"] .inp, :root[data-look="glass"] .cc-input { border: .5px solid var(--input-border); border-radius: 8px; background: var(--input-bg); box-shadow: inset 0 .5px 1px rgba(0, 0, 0, .05); }
:root[data-look="glass"] .inp:focus, :root[data-look="glass"] .cc-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3.5px var(--accent-weak); }
:root[data-look="glass"] .dlg-tabs { display: inline-flex; gap: 2px; padding: 2px; margin-bottom: 14px; border: none; border-radius: 999px; background: var(--field); }
:root[data-look="glass"] .dlg-tab { padding: 4px 14px; margin: 0; border: none; border-radius: 999px; color: var(--fg); }
:root[data-look="glass"] .dlg-tab.active { background: var(--segment-on); box-shadow: var(--segment-shadow); border: none; color: var(--fg); }
:root[data-look="glass"] :is(.font-preview, .tpl-thumb) { border-radius: 10px; }
:root[data-look="glass"] .fs-title { border-bottom-color: var(--sep); }

/* ---------------- File tab (backstage): a glass sidebar beside the content ---------------- */
:root[data-look="glass"] #backstage { background: var(--wallpaper) fixed; }
:root[data-look="glass"] body.native #backstage { background: transparent; }
:root[data-look="glass"] body.native:has(#backstage:not([hidden])) #app { visibility: hidden; }   /* the page is transparent: don't show the editor through it */
:root[data-look="glass"] .bs-nav { margin: 10px; margin-inline-end: 0; border-radius: 22px; color: var(--fg); position: relative; }
:root[data-look="glass"] .bs-nav > :not(.glass-glider) { position: relative; z-index: 1; }
:root[data-look="glass"] :is(.bs-back, .bs-item) { color: var(--fg); }
:root[data-look="glass"] .bs-back:hover, :root[data-look="glass"] .bs-item:hover { background: var(--hover); }
:root[data-look="glass"] .bs-item { margin: 1px 8px; height: 36px; padding: 0 12px; border-radius: 10px; }
:root[data-look="glass"] .bs-item.active { background: transparent; box-shadow: none; font-weight: 600; }
:root[data-look="glass"] .bs-main { margin: 10px; padding: 30px 40px; border-radius: 26px; border: .5px solid var(--glass-edge);
  background: var(--glass-gloss), var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-hi), var(--glass-shadow); }
:root[data-look="glass"][data-native-glass] .bs-main { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: transparent; box-shadow: none; }
:root[data-look="glass"] .bs-h1 { font-weight: 700; font-size: 28px; letter-spacing: -.01em; }
:root[data-look="glass"] :is(.bs-big, .fmt-card) { border: .5px solid var(--glass-edge); border-radius: 16px; background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-hi), var(--glass-shadow); }
:root[data-look="glass"] :is(.bs-big, .fmt-card):hover { border-color: var(--glass-edge); background: var(--glass-strong); }
:root[data-look="glass"] .bs-big.primary { background: var(--accent); color: #fff; }
:root[data-look="glass"] .recent-item { border-radius: 12px; }
:root[data-look="glass"] .tpl:hover .tpl-thumb { border-color: var(--accent); box-shadow: 0 0 0 3.5px var(--accent-weak); }

/* ---------------- comments column ---------------- */
:root[data-look="glass"] .cmt-card { border-radius: 16px; }
:root[data-look="glass"] .cmt-card > * { position: relative; z-index: 1; }
:root[data-look="glass"] .cmt-card.on { border-color: var(--accent); box-shadow: var(--glass-hi), 0 0 0 1px var(--accent), 0 12px 32px rgba(0, 0, 0, .16); }
:root[data-look="glass"] .cmt-card.done { background: var(--glass); opacity: .85; }
:root[data-look="glass"] .cc-btn { border-radius: 999px; }
:root[data-look="glass"] .cc-send { border-radius: 999px; }

/* ---------------- pictures: the Layout Options button ---------------- */
:root[data-look="glass"] .lo-btn { border-radius: 8px; color: var(--fg); }
:root[data-look="glass"] .lo-btn:hover { background: var(--glass-strong); border-color: var(--accent); }

/* people who ask for less transparency get a solid version of the same design */
@media (prefers-reduced-transparency: reduce) {
  :root[data-look="glass"] { --glass: rgba(246, 246, 248, .97); --menu-bg: #f6f6f8; --sheet-bg: #f6f6f8; }
  :root[data-look="glass"][data-theme="dark"] { --glass: rgba(40, 40, 44, .97); --menu-bg: #28282c; --sheet-bg: #28282c; }
}

/* ---------------- motion: light, springs and flowing glass (all off with Reduce Motion) ---------------- */
/* light follows the pointer across glass */
:root[data-look="glass"] :is(.rgroup, #statusbar, .qat.in-tabbar, #navpane, .bs-nav)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(150px circle at var(--mx, 50%) var(--my, 50%), var(--glass-lit), transparent 70%);
  opacity: 0; transition: opacity .4s ease;
}
:root[data-look="glass"] :is(.rgroup, #statusbar, .qat.in-tabbar, #navpane, .bs-nav).lit::after { opacity: 1; }

@keyframes glass-pop { from { opacity: 0; transform: scale(.94) translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes glass-fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes glass-spring { 0% { opacity: 0; transform: scale(.9); } 55% { opacity: 1; transform: scale(1.018); } 100% { opacity: 1; transform: scale(1); } }
@keyframes glass-slide-in { from { opacity: 0; transform: translateX(var(--from, -28px)) scale(.97); } to { opacity: 1; transform: none; } }

/* switching ribbon tabs: the groups pop in one after another (in the Mac app the real glass morphs; the contents fade in) */
:root[data-look="glass"]:not([data-native-glass]) .rpanel.active .rgroup { animation: glass-pop .44s cubic-bezier(.2, .9, .3, 1.12) backwards; }
:root[data-look="glass"][data-native-glass] .rpanel.active .rgroup > * { animation: glass-fade .36s ease-out backwards; }
:root[data-look="glass"] .rpanel.active .rgroup:nth-child(2), :root[data-look="glass"] .rpanel.active .rgroup:nth-child(2) > * { animation-delay: 30ms; }
:root[data-look="glass"] .rpanel.active .rgroup:nth-child(3), :root[data-look="glass"] .rpanel.active .rgroup:nth-child(3) > * { animation-delay: 60ms; }
:root[data-look="glass"] .rpanel.active .rgroup:nth-child(4), :root[data-look="glass"] .rpanel.active .rgroup:nth-child(4) > * { animation-delay: 90ms; }
:root[data-look="glass"] .rpanel.active .rgroup:nth-child(5), :root[data-look="glass"] .rpanel.active .rgroup:nth-child(5) > * { animation-delay: 120ms; }
:root[data-look="glass"] .rpanel.active .rgroup:nth-child(6), :root[data-look="glass"] .rpanel.active .rgroup:nth-child(6) > * { animation-delay: 150ms; }
:root[data-look="glass"] .rpanel.active .rgroup:nth-child(n+7), :root[data-look="glass"] .rpanel.active .rgroup:nth-child(n+7) > * { animation-delay: 180ms; }

/* menus, dialogs, comments and the File tab spring open */
:root[data-look="glass"] .menu { animation: glass-spring .32s cubic-bezier(.2, .9, .3, 1) backwards; transform-origin: 50% 0; }
:root[data-look="glass"] .dlg { animation: glass-spring .38s cubic-bezier(.2, .9, .3, 1) backwards; }
:root[data-look="glass"] .tooltip { animation: glass-fade .18s ease-out backwards; }
:root[data-look="glass"] .cmt-card.draft { animation: glass-spring .34s cubic-bezier(.2, .9, .3, 1) backwards; }
:root[data-look="glass"]:not([data-native-glass]) #backstage.bs-opening .bs-nav { animation: glass-slide-in .42s cubic-bezier(.2, .9, .3, 1) backwards; }
:root[data-look="glass"][data-native-glass] #backstage.bs-opening .bs-nav > :not(.glass-glider) { animation: glass-fade .36s ease-out backwards; }
:root[data-look="glass"][dir="rtl"] .bs-nav { --from: 28px; }
:root[data-look="glass"] .bs-main > * { animation: glass-fade .4s ease-out 80ms backwards; }

/* glass buttons give a little when pressed and spring back */
:root[data-look="glass"] :is(.rbtn, .tab, .qbtn, .btn, .sb-icon, .sb-item, .tab-collapse, .bs-item, .cc-send, .gal-item, .np-item) {
  transition: background-color .15s, color .15s, box-shadow .18s, transform .34s cubic-bezier(.3, 1.6, .5, 1);
}
:root[data-look="glass"] :is(.rbtn, .tab, .qbtn, .btn, .sb-icon, .sb-item, .tab-collapse, .bs-item, .cc-send, .gal-item, .np-item):active:not(:disabled) {
  transform: scale(.93); transition-duration: .15s, .15s, .18s, .08s;
}

@media (prefers-reduced-motion: reduce) {
  :root[data-look="glass"] *, :root[data-look="glass"] *::before, :root[data-look="glass"] *::after { animation: none !important; transition-duration: .01ms !important; }
}