/* Copyright © 2026 Baka Attila Tamás. Minden jog fenntartva / All rights reserved. Lásd / see: LICENSE */
/* ============================================================
   The Glass look (v189; themes.php): frosted panels over a soft wash of
   colour, inspired by Liquid Glass, from one designer's mockups. By day a
   pale sky, lavender and mint; by night near-black with deep blue, violet
   and teal glows. The header floats as a rounded bar; columns, the
   calendar's groups and dialogs are glass; cards are nearly opaque white
   (smoky grey by night), with the deadline's colour as a band along the top.
   iOS-style pills, grouped lists and toggles.

   Type: the system's face on Apple devices (SF Pro, through -apple-system,
   which picks its Display and Text cuts by size); elsewhere Inter for the
   text and Inter Display for names of things (SF Pro may not be shipped
   to other systems). Data takes the text face, as drawn.

   The glass: a translucent fill with a backdrop blur, a light rim and a
   soft shadow. Where the glass element holds a pop-up placed with
   position: fixed (a column holds the quick-assign list, a dialog the
   field pickers, the header the bell and the menus), the blur is on a
   ::before layer behind it, never on the element itself: a backdrop-filter
   makes an element the containing block of its fixed descendants (they
   would land in the wrong place, and be clipped by a scrolling column), and
   the backdrop of a blur inside it (the bell's panel) would stop at it.
   The cards are frosted too (v192; nearly opaque until v191), the same
   way: the blur, the tint, the deadline's band and the shadow are a layer
   behind each card (it holds the quick-assign list). Dozens of blurred
   cards cost the browser more when scrolling and dragging. Without
   backdrop-filter, or with "reduce transparency" set, the glass is a solid
   fill.

   Three small additions to index.php are for this look, marked [glass]
   there: the person's circle in a lane's label (style.css hides it in
   every other look), "Nincs kártya" in an empty lane (data-empty, from
   lang.js) and the owner's name for the line under a card's title
   (data-owner-name). It
   also reads three of the 2077 look's: data-status (that line), data-key
   (the calendar's dots) and data-sync (the checklist's share done).

   Everything here is under html[data-skin="glass"], so it does nothing in
   any other look. The tokens of style.css are all set again (light, then
   dark), then the shapes that differ.
   ============================================================ */

/* Inter and Inter Display (SIL OFL 1.1, see THIRD-PARTY-NOTICES.md), self-
   hosted; Latin and Latin Extended-A. Only fetched where the system has no
   -apple-system face. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/Inter-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/Inter-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/Inter-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/Inter-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/InterDisplay-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/InterDisplay-Bold.woff2') format('woff2'); }

/* ---------- tokens: light ----------
   Text on the cards (frosted since v192; at the wash's most saturated
   point, without the blur's softening): ink 14.6, ink-2 9.9, muted 5.2,
   links 5.2, red text 4.8, green 5.4. On the columns' glass, ink-2
   7.9 or more; what sits right on the wash takes --board-ink (below). White
   on the buttons' blue 5.0, on Sürgős and the bell's count 4.7; dark ink on
   Magas 8.4. */
html[data-skin="glass"] {
  --bg:        #edf1f7;   /* under the wash of colour (body) */
  --surface:   #ffffff;
  --ink:       #1d1d1f;
  --ink-2:     #3a3a3e;
  --muted:     #636369;
  --line:      #e2e4ea;
  --line-strong: #c3c7d0;
  --accent:    #0a6cdc;
  --accent-hi: #0a60c6;
  --accent-text: #0062c4;
  --accent-soft: rgba(10, 108, 220, .12);
  --danger:    #d4001a;
  --danger-solid: #e0261c;
  --stripe-none: transparent; /* nothing due: no band (as drawn) */
  --ok:        #16702f;   /* v192: deeper, for the frosted cards */
  --dl-late:   #ff3b30;
  --dl-soon:   #ff9500;
  --dl-done:   #34c759;
  --urgent-bg: #e0261c;
  --urgent-ink: #ffffff;
  --high:      #1d1d1f;
  --prio3-bg:  #ffa31a;
  --low:       #4a4a50;
  --hover:     #f1f3f7;
  --soft:      #e9ebf0;
  --count-bg:  rgba(118, 118, 128, .16);
  --count-ink: #3f3f45;
  --hl-bg:     #ffe066;
  --hl-ink:    #1d1d1f;
  --soft2:     #f4f5f8;
  --panel:     #f4f5f8;
  --filter-bar: rgba(255, 255, 255, .38);
  --desc-bg:   rgba(118, 118, 128, .09);
  --input-bg:  #f2f3f7;
  --on-accent: #ffffff;
  --warn-bg:   #fff6e0;
  --warn-line: #f2d79a;
  --danger-soft: #ffe9e7;
  --danger-chip: #c4001a;
  --scroll:    rgba(60, 64, 80, .26);
  --scroll-hi: rgba(60, 64, 80, .4);
  --scroll-board: rgba(60, 64, 80, .3);
  --ghost-hover: rgba(30, 40, 60, .06);
  --overlay:   rgba(30, 36, 52, .26);
  --radius:    16px;
  --shadow:    0 1px 2px rgba(20, 30, 60, .05), 0 4px 14px rgba(20, 30, 60, .07);
  --shadow-up: 0 10px 28px rgba(20, 30, 60, .16);
  --shadow-modal: 0 24px 64px rgba(20, 30, 60, .24);
  --font:         -apple-system, BlinkMacSystemFont, 'Inter', 'Geist', 'Segoe UI', Roboto, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'Inter Display', 'Inter', 'Geist', 'Segoe UI', Roboto, sans-serif;
  --font-mono:    var(--font);

  /* This look's own */
  /* The wash (v190: much stronger than v189's; v191: each glow taller, in
     the page's height, so the top one reaches further down and the bottom
     ones further up). */
  --wash:      radial-gradient(130% 120% at 50% -14%, rgba(98, 176, 255, .95), transparent 66%),
               radial-gradient(85% 150% at -8% 110%, rgba(170, 140, 255, .92), transparent 66%),
               radial-gradient(85% 150% at 108% 106%, rgba(100, 225, 180, .9), transparent 66%);
  --glass:     rgba(255, 255, 255, .5);      /* columns, the header, the calendar's groups */
  --glass-strong: rgba(250, 251, 253, .78);  /* dialogs, pop-ups, pinned heads */
  --glass-blur: blur(22px) saturate(170%);
  --glass-rim: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(255, 255, 255, .55);
  --glass-shadow: 0 0 0 1px rgba(31, 45, 80, .05), 0 10px 30px rgba(31, 45, 80, .09);
  --card-bg:   rgba(255, 255, 255, .6);     /* frosted (v192; nearly opaque until v191) */
  --card-blur: blur(18px) saturate(180%);
  --card-rim:  rgba(20, 30, 60, .05);
  --well:      rgba(118, 118, 128, .1);      /* the links' box on a card */
  --cell-bg:   rgba(255, 255, 255, .34);     /* a lane's cell */
  --cell-line: rgba(60, 70, 100, .24);
  --group-line: rgba(60, 60, 67, .12);       /* the hairlines of a grouped list */
  --btn-bg:    rgba(118, 118, 128, .14);
  --btn-hover: rgba(118, 118, 128, .22);
  --pill-bg:   #ffffff;                      /* the card view's value pills, the user's button */
  --toggle-off: rgba(120, 120, 128, .26);
  --toggle-on: #34c759;
  --bar-ok:    #34c759;
  --track:     rgba(118, 118, 128, .2);
  --tag-bg:    #e2eefe;                      /* a tag with no colour of its own: the blue of the drawing */
  --tag-ink:   #0256a9;
  --dot-late:  #ff3b30;
  --dot-today: #ff9500;
  --dot-soon:  #0a84ff;
  --dot-later: #8e8e93;
  --crowd-ring: #f3f7fc;
  --focus:     #0a6cdc;
  /* Text right on the wash, or on the glass over it (v190, with the stronger
     wash): 5.2 or more on its most saturated part; the board's name 5.0 or
     more on the header's glass. */
  --board-ink: #3a3a3e;
  --brand-name: #0058b0;
  /* The swatches (v167; themes.php): iOS tints, deep text (6:1 or more). */
  --sw1-bg: #ffe6e3; --sw1-fg: #9f2e29;  --sw2-bg: #fee8da; --sw2-fg: #8b4501;  --sw3-bg: #f4edd3; --sw3-fg: #695701;
  --sw4-bg: #e7f1d8; --sw4-fg: #486101;  --sw5-bg: #ddf4e1; --sw5-fg: #00672d;  --sw6-bg: #d5f5ee; --sw6-fg: #026558;
  --sw7-bg: #d4f3fc; --sw7-fg: #016172;  --sw8-bg: #e2eefe; --sw8-fg: #0256a9;  --sw9-bg: #eaebff; --sw9-fg: #5549aa;
  --sw10-bg: #f6e6fd; --sw10-fg: #7b3b95;  --sw11-bg: #ffe5ec; --sw11-fg: #9a2c59;  --sw12-bg: #e8edf4; --sw12-fg: #54585f;
}

/* ---------- tokens: dark ----------
   On the frosted cards (as above): ink 10.5, ink-2 7.5, muted 4.6, links
   4.9, red text 4.5. */
html[data-skin="glass"][data-theme="dark"] {
  --bg:        #0b0d12;
  --surface:   #24262d;
  --ink:       #f5f5f7;
  --ink-2:     #d1d1d6;
  --muted:     #a3a3aa;
  --line:      #34363e;
  --line-strong: #4b4e58;
  --accent:    #0a6cdc;
  --accent-hi: #1a7ae8;
  --accent-text: #63adff;
  --accent-soft: rgba(10, 132, 255, .22);
  --danger:    #ff7a70;
  --danger-solid: #e0261c;
  --ok:        #4cd964;
  --dl-late:   #ff453a;
  --dl-soon:   #ff9f0a;
  --dl-done:   #30d158;
  --low:       #c7c7cc;
  --hover:     #2e3038;
  --soft:      #3a3c44;
  --count-bg:  rgba(118, 118, 128, .3);
  --count-ink: #e0e0e5;
  --hl-bg:     #6b5a12;
  --hl-ink:    #fff6d6;
  --soft2:     #2c2e35;
  --panel:     #2a2c33;
  --filter-bar: rgba(255, 255, 255, .04);
  --desc-bg:   rgba(255, 255, 255, .06);
  --input-bg:  rgba(118, 118, 128, .2);
  --warn-bg:   #3a3222;
  --warn-line: #574a2f;
  --danger-soft: rgba(255, 69, 58, .16);
  --danger-chip: #ff8a80;
  --scroll:    rgba(235, 235, 245, .2);
  --scroll-hi: rgba(235, 235, 245, .32);
  --scroll-board: rgba(235, 235, 245, .24);
  --ghost-hover: rgba(255, 255, 255, .08);
  --overlay:   rgba(0, 0, 0, .42);
  --shadow:    0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
  --shadow-up: 0 10px 28px rgba(0, 0, 0, .5);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, .6);

  --wash:      radial-gradient(120% 110% at 42% -16%, rgba(30, 100, 235, .85), transparent 66%),
               radial-gradient(80% 140% at -6% 108%, rgba(124, 60, 235, .78), transparent 66%),
               radial-gradient(80% 140% at 106% 104%, rgba(14, 170, 124, .72), transparent 66%);
  --glass:     rgba(34, 38, 48, .46);
  --glass-strong: rgba(32, 35, 44, .8);
  --glass-rim: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(255, 255, 255, .08);
  --glass-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --card-bg:   rgba(46, 49, 58, .55);
  --card-rim:  rgba(255, 255, 255, .08);
  --well:      rgba(255, 255, 255, .06);
  --cell-bg:   rgba(255, 255, 255, .035);
  --cell-line: rgba(255, 255, 255, .16);
  --group-line: rgba(255, 255, 255, .08);
  --btn-bg:    rgba(118, 118, 128, .28);
  --btn-hover: rgba(118, 118, 128, .4);
  --pill-bg:   rgba(118, 118, 128, .26);
  --toggle-off: rgba(120, 120, 128, .4);
  --toggle-on: #30d158;
  --bar-ok:    #30d158;
  --track:     rgba(118, 118, 128, .32);
  --tag-bg:    #213651;
  --tag-ink:   #9dc7fe;
  --dot-soon:  #409cff;
  --crowd-ring: #1b2030;
  --focus:     #63adff;
  --board-ink: #e0e0e5;      /* 4.6 or more on the wash */
  --brand-name: #63adff;     /* 4.9 or more on the header's glass */
  /* The swatches (v167; themes.php): deep tints, light text (7:1 or more). */
  --sw1-bg: #4e2a26; --sw1-fg: #fbb0a6;  --sw2-bg: #4b2d18; --sw2-fg: #f4b78d;  --sw3-bg: #3e3510; --sw3-fg: #d6c480;
  --sw4-bg: #2f3a19; --sw4-fg: #b7cf8e;  --sw5-bg: #1f3d26; --sw5-fg: #9ad5a5;  --sw6-bg: #093e36; --sw6-fg: #7dd6c5;
  --sw7-bg: #063c47; --sw7-fg: #7bd3e9;  --sw8-bg: #213651; --sw8-fg: #9dc7fe;  --sw9-bg: #323151; --sw9-fg: #bfbefe;
  --sw10-bg: #402c49; --sw10-fg: #dcb4ee;  --sw11-bg: #4c2934; --sw11-fg: #f7aec3;  --sw12-bg: #31363c; --sw12-fg: #bfc5cc;
  color-scheme: dark;
}

/* No blur to be had (an old browser), or the system asks for less
   transparency: the glass becomes a solid fill. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-skin="glass"] { --glass: rgba(246, 248, 252, .92); --glass-strong: #f8f9fb; --card-bg: rgba(255, 255, 255, .94); }
  html[data-skin="glass"][data-theme="dark"] { --glass: rgba(30, 33, 42, .94); --glass-strong: #23262e; --card-bg: rgba(46, 49, 58, .94); }
}
@media (prefers-reduced-transparency: reduce) {
  html[data-skin="glass"] { --glass: #f3f5f9; --glass-strong: #f8f9fb; --card-bg: #ffffff; --cell-bg: rgba(255, 255, 255, .6); }
  html[data-skin="glass"][data-theme="dark"] { --glass: #1e2129; --glass-strong: #23262e; --card-bg: #2e3139; --cell-bg: rgba(255, 255, 255, .05); }
}

/* ---------- the page: a wash of colour ---------- */
html[data-skin="glass"] body { background: var(--wash), var(--bg); }

/* ---------- type: who takes which face (the designer's list) ---------- */
html[data-skin="glass"] .col-head h2, html[data-skin="glass"] .lane-label .lane-name, html[data-skin="glass"] .agenda-group h2,
html[data-skin="glass"] .card .title, html[data-skin="glass"] .agenda-title {
  font-family: var(--font-display);
}
/* The rest of what style.css gives the display face reads as text here:
   section labels, tabs, buttons. */
html[data-skin="glass"] .settings-h, html[data-skin="glass"] .chk-head strong, html[data-skin="glass"] .att-head strong,
html[data-skin="glass"] .detail-tab, html[data-skin="glass"] .bell-head strong, html[data-skin="glass"] .btn.primary {
  font-family: var(--font);
}
html[data-skin="glass"], html[data-skin="glass"] body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ---------- the header: a floating bar of glass ---------- */
/* The glass is a layer behind it (see the top of this file). Above the board
   (z-index): its menus and panels must cover the columns' pinned heads. */
html[data-skin="glass"] .toolbar {
  position: relative; z-index: 45;
  margin: 10px 12px 0; padding: 9px 14px; border: 0; border-radius: 22px; background: transparent;
}
html[data-skin="glass"] .toolbar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-rim), var(--glass-shadow);
}
/* The row of selected filters: the bar's lower part, a hairline above it. */
html[data-skin="glass"] .toolbar .filter-bar {
  margin: 0 -14px -9px; padding: 8px 14px; flex-basis: calc(100% + 28px);
  background: var(--filter-bar); border-top: 1px solid var(--group-line); border-radius: 0 0 22px 22px;
}
html[data-skin="glass"] .toolbar .brand { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
html[data-skin="glass"] .toolbar .brand-name, html[data-skin="glass"] .login h1 .brand-name { color: var(--brand-name); }
html[data-skin="glass"] .login h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; }
html[data-skin="glass"] .toolbar .brand::before, html[data-skin="glass"] .login h1::before {
  width: 30px; height: 30px; background: url("glass-mark.svg") center / 30px 30px no-repeat;
  filter: drop-shadow(0 2px 4px rgba(10, 108, 220, .3));
}
html[data-skin="glass"] .toolbar .brand::before { margin-top: -5px; }
html[data-skin="glass"] .toolbar .icon-btn { color: var(--ink-2); border-radius: 12px; }
html[data-skin="glass"] .toolbar .icon-btn:hover { background: var(--ghost-hover); color: var(--ink); }
html[data-skin="glass"] .toolbar .filter-btn.on, html[data-skin="glass"] .toolbar .filter-btn.on:hover,
html[data-skin="glass"] .toolbar .view-btn.on, html[data-skin="glass"] .toolbar .view-btn.on:hover {
  background: var(--accent-soft); color: var(--accent-text);
}
html[data-skin="glass"] .toolbar .bell-badge { background: var(--danger-solid); color: #ffffff; border-radius: 999px; }
/* The user's button: a white pill. */
html[data-skin="glass"] .user-btn {
  border: 0; background: var(--pill-bg); color: var(--ink); font-size: 14px; font-weight: 500;
  box-shadow: 0 1px 3px rgba(20, 30, 60, .1);
}
html[data-skin="glass"] .user-btn:hover { background: var(--pill-bg); box-shadow: 0 2px 8px rgba(20, 30, 60, .16); }
html[data-skin="glass"][data-theme="dark"] .user-btn, html[data-skin="glass"][data-theme="dark"] .user-btn:hover { box-shadow: var(--glass-rim); }
html[data-skin="glass"] .presence.crowd .pav { box-shadow: 0 0 0 2px var(--crowd-ring); }
html[data-skin="glass"] .selected-tags .tag-chip.on { box-shadow: 0 1px 3px rgba(20, 30, 60, .1); }
@media (max-width: 640px) {
  /* One row: the bar's margin and its gaps a little tighter, so the name has room. */
  html[data-skin="glass"] .toolbar { margin: 6px 6px 0; padding: 6px 8px; gap: 3px; border-radius: 20px; }
  html[data-skin="glass"] .toolbar .brand { font-size: 18px; }
  /* The filter panel hangs under the bar, rounded like it. */
  html[data-skin="glass"] .filters.open { top: calc(100% + 6px); border-radius: 18px; }
}

/* ---------- the board: columns as glass panels, the full height ---------- */
/* isolation: the columns' glass layers (z-index -1) sit above the page's wash
   and under everything in the board. Never the padding at the bottom: style.css
   keeps room there for the + button (lanes, the calendar). */
html[data-skin="glass"] .board { isolation: isolate; gap: 14px; padding-top: 14px; padding-left: 16px; padding-right: 16px; scroll-padding-inline: 16px; }
html[data-skin="glass"] .board:not(.lanes) { padding-bottom: 16px; }
html[data-skin="glass"] .board:not(.lanes) { align-items: stretch; }
html[data-skin="glass"] .board:not(.lanes) .col { position: relative; padding-top: 12px; }
html[data-skin="glass"] .board:not(.lanes) .col::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 24px;
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-rim), var(--glass-shadow);
}
/* The cards' shadows need room inside the scrolling body: its padding, not the panel's. */
html[data-skin="glass"] .board:not(.lanes) .col-body { padding-left: 10px; padding-right: 10px; }
html[data-skin="glass"] .board:not(.lanes) .col-head { padding: 0 12px 8px 16px; }
html[data-skin="glass"] .cards { gap: 10px; }
/* A column's head: the name, its count at the right, then +. A name too long
   for the column ends in … (as in 2077, v183). */
html[data-skin="glass"] .col-head h2 {
  flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--ink);
}
html[data-skin="glass"] .col-head .count { margin-right: 0; min-width: 24px; height: 22px; border-radius: 11px; font-size: 12px; font-weight: 600; }
html[data-skin="glass"] .col-head .add { border-radius: 50%; color: var(--ink-2); }
html[data-skin="glass"] .col-head .add:hover { background: var(--ghost-hover); color: var(--ink); }
html[data-skin="glass"] .col-head .hidden-toggle { border-radius: 999px; color: var(--ink-2); }
@media (max-width: 640px) {
  html[data-skin="glass"] .board { gap: 10px; padding-top: 10px; padding-left: 10px; padding-right: 10px; scroll-padding-inline: 10px; }
  html[data-skin="glass"] .board:not(.lanes) { padding-bottom: 10px; }
}

/* ---------- lanes: the heads as pinned glass pills, each lane a well per column ---------- */
html[data-skin="glass"] .board.lanes { padding-top: 10px; }
html[data-skin="glass"] .board.lanes .col-head {
  top: 4px; margin-bottom: 4px; min-height: 40px; padding: 0 8px 0 14px; border-radius: 14px;
  background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-rim), var(--glass-shadow);
}
html[data-skin="glass"] .board.lanes .col-head h2 { font-size: 15px; }
/* The lane's name: the person's circle (an addition for this look, index.php),
   the name, the count. */
html[data-skin="glass"] .lane-label { gap: 8px; margin: 18px 4px 8px; color: var(--ink); }
html[data-skin="glass"] .lane-block.lead .lane-label { margin-top: 6px; }
html[data-skin="glass"] .lane-label .lane-name { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
html[data-skin="glass"] .lane-label .lane-av { display: inline-flex; }
html[data-skin="glass"] .lane-label img.lane-av { display: block; }
/* The count sits right on the wash: a frosted backing, so it reads on any of its colours. */
html[data-skin="glass"] .lane-label .lane-count {
  min-width: 22px; height: 20px; border-radius: 10px; font-size: 11.5px; font-weight: 600;
  background: var(--glass-strong); color: var(--ink-2); box-shadow: var(--glass-rim);
}
/* A tag or project lane's chip: on the board, so a plain one gets the blue of the tags. */
html[data-skin="glass"] .lane-label .tag { font-size: 13px; line-height: 24px; padding: 0 10px; }
/* The well: a light glass cell; empty, a dashed outline saying Nincs kártya.
   Its fill is a layer behind it too, ::before (the empty one's text is
   ::after): back layers are painted in the page's order, so the frosted
   cards' layers, which come after it, lie over it rather than under it (v192). */
html[data-skin="glass"] .cards.lane {
  position: relative; min-height: 96px; padding: 8px; border: 1.5px dashed transparent; border-radius: 20px;
}
html[data-skin="glass"] .cards.lane::before {
  content: ""; position: absolute; inset: -1.5px; z-index: -1; border-radius: 20px; pointer-events: none;
  background: var(--cell-bg); box-shadow: var(--glass-rim);
}
/* Empty: no card showing, not only no card at all (v193). A search or a
   filter hides cards with display: none (v-show) but leaves them in the
   cell, so :empty alone left such a cell looking like a full one, at a count
   of 0. :is() is forgiving, so a browser without :has() still has :empty. */
html[data-skin="glass"] .cards.lane:is(:empty, :not(:has(> .card:not([style*="display: none"])))) { border-color: var(--cell-line); }
html[data-skin="glass"] .cards.lane:is(:empty, :not(:has(> .card:not([style*="display: none"]))))::before { content: none; }
html[data-skin="glass"] .cards.lane:is(:empty, :not(:has(> .card:not([style*="display: none"]))))::after {
  content: attr(data-empty); margin: auto; align-self: center; font-size: 13px; color: var(--board-ink);
}

/* ---------- a card: frosted, rounded, the deadline as a band on top ---------- */
/* Everything but the text is a layer behind the card (see the top of this
   file): the blur and the tint; the band and the rim as inset shadows, which
   take no room (the default look's left stripe, a border, goes); and the
   card's shadow, so it falls under the next card's glass, not over it. The
   layers of all the cards lie under all the board's text (z-index -1 in the
   board), each over the one before it. */
html[data-skin="glass"] .card {
  border: 0; border-radius: 16px; padding: 12px 14px 13px; gap: 6px; background: transparent; box-shadow: none;
  --card-edge: inset 0 3px 0 var(--card-color, transparent), inset 0 0 0 1px var(--card-rim);
}
html[data-skin="glass"] .card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--card-bg); -webkit-backdrop-filter: var(--card-blur); backdrop-filter: var(--card-blur);
  box-shadow: var(--card-edge), var(--shadow);
}
html[data-skin="glass"] .card:hover { box-shadow: none; }
html[data-skin="glass"] .card:hover::before { box-shadow: var(--card-edge), var(--shadow-up); }
html[data-skin="glass"] .card.sortable-drag::before { box-shadow: var(--card-edge), var(--shadow-modal); }
html[data-skin="glass"] .card:focus-visible { outline-color: var(--focus); outline-offset: 1px; }
html[data-skin="glass"] .card .who-line { font-size: 13px; color: var(--muted); }
html[data-skin="glass"] .card .title { font-size: 17px; font-weight: 600; line-height: 1.28; letter-spacing: -.015em; color: var(--ink); }
html[data-skin="glass"] .card .ticket-link { top: 16px; right: 14px; }
/* The project: a dot before it, in its colour. */
html[data-skin="glass"] .project-link { font-size: 13px; font-weight: 500; }
html[data-skin="glass"] .project-link::before {
  content: "" / ""; display: inline-block; width: 6px; height: 6px; margin: 0 6px 0 1px; border-radius: 50%;
  background: currentColor; vertical-align: 2px;
}
html[data-skin="glass"] .card .meta { font-size: 12.5px; gap: 6px 9px; }
html[data-skin="glass"] .card .deadline.over { color: var(--danger); font-weight: 500; }
/* The links between cards: rows in a grey box. */
html[data-skin="glass"] .card .card-links { margin: 2px 0 4px; padding: 5px 9px; border-radius: 10px; background: var(--well); }
html[data-skin="glass"] .link-row { font-size: 12.5px; }
html[data-skin="glass"] .assign-btn { border-radius: 11px; }
html[data-skin="glass"] .card .chk-badge.full { color: var(--ok); }

/* Chips: solid, slightly rounded: Sürgős red and Magas orange, Alacsony grey. */
html[data-skin="glass"] .prio { height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11.5px; font-weight: 600; }
html[data-skin="glass"] .prio.p1 { background: var(--soft); color: var(--low); }
/* Tags: each in its own tint (a plain one the drawing's blue). */
html[data-skin="glass"] .tag { border-radius: 7px; background: var(--tag-bg); color: var(--tag-ink); font-size: 11.5px; font-weight: 500; }
html[data-skin="glass"] .tag.project { border-radius: 5px; }
html[data-skin="glass"] .tag.tag-x-chip { border-radius: 8px; }
html[data-skin="glass"] .tag.clickable.on { outline-color: var(--focus); }
html[data-skin="glass"] .swatch-opt { border-radius: 7px; }

/* ---------- the calendar: each group a glass panel, its rows white cards ---------- */
html[data-skin="glass"] .agenda { padding-top: 14px; padding-left: 16px; padding-right: 16px; }
html[data-skin="glass"] .agenda-group {
  margin-bottom: 14px; padding: 12px 10px 10px; border-radius: 24px;
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-rim), var(--glass-shadow);
}
/* The heading: a dot in the group's colour (overdue red, today orange, the
   next days blue, later grey), the name, the count. */
html[data-skin="glass"] .agenda-group h2 { margin: 0 6px 10px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
html[data-skin="glass"] .agenda-group h2::before {
  content: "" / ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--dot-later));
}
html[data-skin="glass"] .agenda-group[data-key="past"] { --dot: var(--dot-late); }
html[data-skin="glass"] .agenda-group[data-key="today"] { --dot: var(--dot-today); }
html[data-skin="glass"] .agenda-group[data-key="soon"] { --dot: var(--dot-soon); }
html[data-skin="glass"] .agenda-group h2 .count { min-width: 22px; height: 20px; background: var(--count-bg); color: var(--count-ink); font-weight: 600; }
html[data-skin="glass"] .agenda-panel { background: transparent; box-shadow: none; overflow: visible; display: flex; flex-direction: column; gap: 6px; }
/* A row: a card, the deadline's colour down its left edge (an inset shadow);
   see-through like the cards (v192), but with no blur of its own: the
   group's frosted panel is behind it, and a blur inside a blur would only
   blur the group's own tint. */
html[data-skin="glass"] .agenda-row {
  border-left: 0; border-radius: 14px; padding: 12px 14px; background: var(--card-bg);
  box-shadow: inset 3px 0 0 var(--card-color, transparent), inset 0 0 0 1px var(--card-rim), 0 1px 3px rgba(20, 30, 60, .06);
}
html[data-skin="glass"] .agenda-row + .agenda-row { border-top: 0; }
html[data-skin="glass"] .agenda-row:hover, html[data-skin="glass"] .agenda-row:focus-visible { background: var(--surface); }
html[data-skin="glass"][data-theme="dark"] .agenda-row:hover, html[data-skin="glass"][data-theme="dark"] .agenda-row:focus-visible { background: var(--hover); }
html[data-skin="glass"] .agenda-row:focus-visible { outline-color: var(--focus); }
/* The header row's columns over the rows': 10px of panel + 14px of row. */
html[data-skin="glass"] .agenda-head { padding: 0 24px 8px; font-weight: 500; letter-spacing: .02em; text-transform: none; font-size: 12px; color: var(--board-ink); }
html[data-skin="glass"] .agenda > .empty-note, html[data-skin="glass"] .board-offline { color: var(--board-ink); }
html[data-skin="glass"] .agenda-when.over .agenda-rel, html[data-skin="glass"] .agenda-when.over .agenda-date { color: var(--danger); }
html[data-skin="glass"] .agenda-title { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
html[data-skin="glass"] .agenda-project { font-weight: 500; }
/* The column: a grey pill. */
html[data-skin="glass"] .agenda-column {
  justify-self: start; max-width: 100%; padding: 2px 9px; border-radius: 999px; background: var(--soft);
  color: var(--ink-2); font-size: 12px; font-weight: 500;
}
@media (max-width: 640px) {
  html[data-skin="glass"] .agenda { padding-top: 10px; padding-left: 10px; padding-right: 10px; }
  html[data-skin="glass"] .agenda-column { justify-self: end; }
}

/* ---------- buttons and fields ---------- */
/* Pills: the main ones blue, the others a grey fill (:where: as weak as a
   plain .btn rule, so the header's and the dialogs' own buttons keep theirs). */
html[data-skin="glass"] .btn { border-radius: 999px; }
html[data-skin="glass"] :where(.btn:not(.ghost):not(.primary):not(.danger):not(.icon-btn):not(.user-btn)) {
  background: var(--btn-bg); border-color: transparent; color: var(--ink);
}
html[data-skin="glass"] :where(.btn:not(.ghost):not(.primary):not(.danger):not(.icon-btn):not(.user-btn)):hover { background: var(--btn-hover); border-color: transparent; }
html[data-skin="glass"] .btn.primary { font-weight: 600; }
html[data-skin="glass"] .btn.danger { background: transparent; }
html[data-skin="glass"] input[type=text], html[data-skin="glass"] input[type=email], html[data-skin="glass"] input[type=password],
html[data-skin="glass"] input[type=date], html[data-skin="glass"] input[type=search], html[data-skin="glass"] select,
html[data-skin="glass"] textarea { border-color: transparent; border-radius: 10px; background: var(--input-bg); }
/* The search box in the header (v194): a white pill on the glass, as drawn. */
html[data-skin="glass"] .toolbar .header-search { border-radius: 12px; background: var(--pill-bg); box-shadow: 0 1px 3px rgba(20, 30, 60, .08); }
/* By night a recessed field, darker than the glass (v195): on the bar's
   translucent grey the hint text (muted) read 3.9:1 over the wash's blue. */
html[data-skin="glass"][data-theme="dark"] .toolbar .header-search { background: rgba(8, 11, 20, .5); box-shadow: var(--glass-rim); }
html[data-skin="glass"] input:focus, html[data-skin="glass"] select:focus, html[data-skin="glass"] textarea:focus,
html[data-skin="glass"] .btn:focus-visible { outline-color: var(--focus); border-color: var(--focus); }
html[data-skin="glass"] input[type=checkbox], html[data-skin="glass"] input[type=radio],
html[data-skin="glass"] .chk-item .item-check { accent-color: var(--accent); }
/* Új kártya: a blue glass drop. */
html[data-skin="glass"] .btn.primary.fab {
  border: 0; background: linear-gradient(180deg, #3d9bff, #0a6cdc); color: #ffffff; font-size: 28px; font-weight: 400;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 10px 26px rgba(10, 108, 220, .42);
}
html[data-skin="glass"] .btn.primary.fab:hover:not(:disabled) { background: linear-gradient(180deg, #52a6ff, #1a76e4); }

/* ---------- pop-ups: frosted ---------- */
html[data-skin="glass"] .menu, html[data-skin="glass"] .bell-panel, html[data-skin="glass"] .filters.open,
html[data-skin="glass"] .detail-pick, html[data-skin="glass"] .assign-pop, html[data-skin="glass"] .mention-pop {
  border: 0; border-radius: 16px; background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-rim), var(--shadow-up);
}
html[data-skin="glass"] .menu button, html[data-skin="glass"] .detail-pick button, html[data-skin="glass"] .assign-pop button,
html[data-skin="glass"] .mention-pop .opt, html[data-skin="glass"] .link-opt { border-radius: 10px; }
html[data-skin="glass"] .menu button:hover, html[data-skin="glass"] .detail-pick button:not(.btn):hover,
html[data-skin="glass"] .assign-pop button:hover, html[data-skin="glass"] .bell-item:hover { background: var(--ghost-hover); }
html[data-skin="glass"] .bell-head, html[data-skin="glass"] .bell-filter, html[data-skin="glass"] .bell-item { border-color: var(--group-line); }
html[data-skin="glass"] .bell-item.unread { background: var(--accent-soft); }
html[data-skin="glass"] .bell-item.unread:hover { background: var(--accent-soft); filter: brightness(.98); }
html[data-skin="glass"] .bell-foot { border-top-color: var(--group-line); }
html[data-skin="glass"] .link-pick { border-color: var(--group-line); border-radius: 16px; background: var(--desc-bg); }
html[data-skin="glass"] .link-rel-btn, html[data-skin="glass"] .obs-chip { border-color: transparent; background: var(--btn-bg); }
html[data-skin="glass"] .link-rel-btn.on { background: var(--accent-soft); border-color: transparent; }
html[data-skin="glass"] .obs-add { border-style: solid; border-color: transparent; background: var(--btn-bg); color: var(--accent-text); }

/* ---------- dialogs: a sheet of glass ---------- */
/* The glass is a layer behind the dialog: its field pickers are position:
   fixed (see the top of this file). */
html[data-skin="glass"] .modal {
  position: relative; isolation: isolate; border-radius: 28px; background: transparent; box-shadow: var(--shadow-modal);
}
html[data-skin="glass"] .modal::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--glass-strong); -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%);
  box-shadow: var(--glass-rim);
}
html[data-skin="glass"] .login {
  border-radius: 24px; background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-rim), var(--shadow-modal);
}
/* The pinned title row: frosted too, so what scrolls under it blurs. */
html[data-skin="glass"] .modal > .detail-head {
  padding-top: 22px; border-radius: 28px 28px 0 0; border-bottom-color: var(--group-line);
  background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
html[data-skin="glass"] .modal h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; }
html[data-skin="glass"] .modal > .detail-head h3 { font-size: 26px; line-height: 1.2; }
html[data-skin="glass"] .detail-head h3 { padding-top: calc((32px - 1.2em) / 2); }
/* The head's buttons: circles; ✕ on a grey disc, as drawn. */
html[data-skin="glass"] .modal > .detail-head > .btn.ghost { border-radius: 50%; color: var(--ink-2); }
html[data-skin="glass"] .modal > .detail-head > .btn.ghost:last-child { background: var(--btn-bg); }
html[data-skin="glass"] .modal > .detail-head > .btn.ghost:hover { background: var(--btn-hover); color: var(--ink); }
/* The card view and the editor: the deadline's colour as a band along the
   top of the title row, not down the left side. */
html[data-skin="glass"] .modal.card-view, html[data-skin="glass"] .modal.card-edit { border-left: 0; }
html[data-skin="glass"] .modal.card-view { padding-left: 62px; }
html[data-skin="glass"] .modal.card-view > .detail-head { margin-left: -62px; padding-left: 22px; }
html[data-skin="glass"] .modal.card-edit { padding-left: 22px; }
html[data-skin="glass"] .modal.card-edit > .detail-head { margin-left: -22px; padding-left: 22px; }
html[data-skin="glass"] .modal.card-view > .detail-head, html[data-skin="glass"] .modal.card-edit > .detail-head {
  box-shadow: inset 0 4px 0 var(--card-color, transparent);
}
/* Under the title: its column · who has it (as drawn; screen readers skip
   it, the fields below say the same). Right under the title, before a
   ticket's URL: the block is a column, the line ordered between the two. */
html[data-skin="glass"] .detail-title[data-status] { display: flex; flex-direction: column; }
html[data-skin="glass"] .detail-title[data-status] > h3 { flex: none; }
html[data-skin="glass"] .detail-title[data-status] > .detail-url { order: 2; }
html[data-skin="glass"] .detail-title[data-status]::after {
  content: attr(data-status) " \00b7  " attr(data-owner-name) / "";
  order: 1; margin-top: 3px; font-family: var(--font); font-size: 13.5px; font-weight: 400; color: var(--muted); letter-spacing: 0;
}
@media (max-width: 640px) {
  html[data-skin="glass"] .modal { border-radius: 22px; }
  html[data-skin="glass"] .modal > .detail-head { border-radius: 22px 22px 0 0; }
  html[data-skin="glass"] .modal > .detail-head h3 { font-size: 21px; }
  html[data-skin="glass"] .modal.card-view { padding-left: 22px; }
  html[data-skin="glass"] .modal.card-view > .detail-head { margin-left: -22px; }
}

/* The card view's fields: an iOS grouped list, labels at the left, values at
   the right, a hairline between the rows. (One panel in two columns: the
   fields are one grid in the page.) */
html[data-skin="glass"] .card-view .detail-info { font-size: 14px; }
html[data-skin="glass"] .card-view .detail-info .info-grid {
  gap: 0 28px; padding: 2px 16px; border-radius: 18px; background: var(--desc-bg);
}
html[data-skin="glass"] .card-view .detail-info .info-field {
  min-height: 46px; padding: 7px 0; border-top: 1px solid var(--group-line); grid-template-columns: 100px minmax(0, 1fr);
}
html[data-skin="glass"] .card-view .detail-info .info-field:nth-child(-n+2) { border-top: 0; }
html[data-skin="glass"] .card-view .detail-info .info-value { justify-content: flex-end; }
html[data-skin="glass"] .card-view .detail-info .info-created .created-text { align-items: flex-end; text-align: right; }
/* Kapcsolatok: the label above, the rows under it from the left. */
html[data-skin="glass"] .card-view .detail-info .info-links { grid-template-columns: minmax(0, 1fr); gap: 4px; }
html[data-skin="glass"] .card-view .detail-info .info-links .info-value { justify-content: flex-start; }
html[data-skin="glass"] .detail-info .info-label { font-size: 14px; color: var(--ink-2); }
@media (max-width: 640px) {
  html[data-skin="glass"] .card-view .detail-info .info-grid { gap: 0; padding: 2px 12px; }
  html[data-skin="glass"] .card-view .detail-info .info-field { grid-template-columns: 84px minmax(0, 1fr); }
  html[data-skin="glass"] .card-view .detail-info .info-field:nth-child(2) { border-top: 1px solid var(--group-line); }
  html[data-skin="glass"] .card-view .detail-info .info-links { grid-template-columns: minmax(0, 1fr); }
}
/* The values: white pills (grey by night); the priority in its chip's colours. */
html[data-skin="glass"] .detail-info .info-pill {
  height: 30px; padding: 0 11px; border: 0; border-radius: 9px; background: var(--pill-bg); font-size: 13.5px;
  box-shadow: 0 1px 2px rgba(20, 30, 60, .08);
}
html[data-skin="glass"][data-theme="dark"] .detail-info .info-pill { box-shadow: var(--glass-rim); }
html[data-skin="glass"] .detail-info .pick-trigger { background: var(--pill-bg); font-size: 13.5px; }
html[data-skin="glass"] .detail-info .pick-trigger:hover, html[data-skin="glass"] .detail-info .pick-trigger:focus-visible { background: var(--pill-bg); filter: brightness(.97); }
html[data-skin="glass"][data-theme="dark"] .detail-info .pick-trigger:hover { filter: brightness(1.2); }
html[data-skin="glass"] .detail-info .pick-trigger.pp4 { background: var(--urgent-bg); color: var(--urgent-ink); font-weight: 600; }
html[data-skin="glass"] .detail-info .pick-trigger.pp3 { background: var(--prio3-bg); color: var(--high); font-weight: 600; }
html[data-skin="glass"] .detail-info .pick-trigger.pp1 { background: var(--soft); color: var(--low); }
html[data-skin="glass"] .detail-info .pick-assignee, html[data-skin="glass"] .detail-info .epick-assignee { padding-left: 4px; }
html[data-skin="glass"] .obs-chip { height: 26px; border-radius: 13px; }

/* The description: a grey well. */
html[data-skin="glass"] .detail-desc { border-radius: 18px; padding: 14px 18px; background: var(--desc-bg); font-size: 15px; color: var(--ink); }
html[data-skin="glass"] .rich .md-h { font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em; }
html[data-skin="glass"] .rich blockquote { border-left-color: var(--accent); color: var(--ink-2); }
html[data-skin="glass"] .rich code { border-radius: 6px; }

/* Section labels (the checklist, the attachments, Beállítások): small grey capitals. */
html[data-skin="glass"] .settings-h, html[data-skin="glass"] .chk-head strong, html[data-skin="glass"] .att-head strong {
  font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}
html[data-skin="glass"] .settings-h { margin: 22px 4px 8px; }
html[data-skin="glass"] .detail-head + .settings-h, html[data-skin="glass"] .push-box .settings-h { margin-top: 4px; }
/* The checklist: the bar across, the share done after it; the items a grouped list. */
html[data-skin="glass"] .chk-head { gap: 10px; }
html[data-skin="glass"] .chk-bar { max-width: none; height: 6px; border-radius: 3px; background: var(--track); }
html[data-skin="glass"] .chk-bar i.on { background: var(--bar-ok); }
html[data-skin="glass"] .chk-head[data-sync]::after { content: attr(data-sync) "%" / ""; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
html[data-skin="glass"] .chk-list { padding: 2px 12px; border-radius: 16px; background: var(--desc-bg); }
html[data-skin="glass"] .chk-list:empty { display: none; }
html[data-skin="glass"] .chk-item { min-height: 44px; border-radius: 0; font-size: 15px; }
html[data-skin="glass"] .chk-item + .chk-item { border-top: 1px solid var(--group-line); }
html[data-skin="glass"] .chk-item:hover { background: transparent; }
html[data-skin="glass"] .chk-item .item-check { width: 18px; height: 18px; }
html[data-skin="glass"] .chk-add { margin-top: 8px; }
html[data-skin="glass"] .chk-add input { padding: 9px 12px; }   /* its size stays style.css's (16px on a phone: iPhone Safari zooms into anything smaller) */
/* Attachments, comments. */
html[data-skin="glass"] .attachments { border-top-color: var(--group-line); }
html[data-skin="glass"] .att { border-color: transparent; border-radius: 12px; background: var(--desc-bg); }
html[data-skin="glass"] .att-thumb, html[data-skin="glass"] .cmt-img { border-radius: 8px; }
html[data-skin="glass"] .detail-tabs-row { border-bottom-color: var(--group-line); }
html[data-skin="glass"] .detail-tab.on { border-bottom-color: var(--accent); }
html[data-skin="glass"] .comment { border-top-color: var(--group-line); }

/* Beállítások: the looks as tiles (the colours on top), the e-mails as toggles. */
html[data-skin="glass"] .theme-card { border-color: transparent; border-radius: 16px; background: var(--desc-bg); }
html[data-skin="glass"] .theme-card:hover { border-color: var(--line-strong); }
html[data-skin="glass"] .theme-card.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
html[data-skin="glass"] .theme-card:focus-within { outline-color: var(--focus); }
html[data-skin="glass"] .theme-swatch { order: -1; height: 30px; border: 0; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(20, 30, 60, .08); }
/* A toggle: the tick box drawn as an iOS switch (still a tick box to every
   reader and to the keyboard); its line a row of a grouped list. */
html[data-skin="glass"] .notify-list { gap: 0; padding: 0 14px; border-radius: 16px; background: var(--desc-bg); }
html[data-skin="glass"] .notify-list label { min-height: 46px; justify-content: space-between; gap: 12px; font-size: 15px; }
html[data-skin="glass"] .notify-list label + label { border-top: 1px solid var(--group-line); }
html[data-skin="glass"] .notify-list input[type=checkbox] {
  order: 2; flex: 0 0 auto; width: 46px; height: 28px; margin: 0; border-radius: 14px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background: radial-gradient(circle, #ffffff 0 10.5px, transparent 11px) no-repeat left 2px center / 24px 24px, var(--toggle-off);
  box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .04);
  transition: background-position .18s ease, background-color .18s ease;
}
html[data-skin="glass"] .notify-list input[type=checkbox]:checked { background-position: right 2px center; background-color: var(--toggle-on); }
html[data-skin="glass"] .notify-list input[type=checkbox]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
html[data-skin="glass"] .push-box { border-top: 0; }
html[data-skin="glass"] .push-row { padding: 12px 14px; border-radius: 16px; background: var(--desc-bg); }
html[data-skin="glass"] .push-row .push-state.ps-on { font-weight: 500; }
html[data-skin="glass"] .push-row .push-state.ps-on::before {
  content: "" / ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%;
  background: var(--toggle-on); vertical-align: 1px;
}

/* ---------- the rest ---------- */
/* A message: a dark frosted pill. */
html[data-skin="glass"] .toast {
  border-radius: 16px; background: rgba(28, 28, 32, .86); color: #ffffff;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
html[data-skin="glass"] .toast.err { background: rgba(200, 20, 12, .92); }
html[data-skin="glass"] .banner { margin: 8px 12px 0; border: 0; border-radius: 16px; }
html[data-skin="glass"] .admin-user-form, html[data-skin="glass"] .admin-col-delete { border-radius: 14px; }
html[data-skin="glass"] .shortcut-table kbd { border-radius: 6px; }
html[data-skin="glass"] mark.hl { border-radius: 4px; }