/* Copyright © 2026 Baka Attila Tamás. Minden jog fenntartva / All rights reserved. Lásd / see: LICENSE */
/* ============================================================
   The 2077 look (v182; themes.php): cyberpunk yellow and cyan, from one
   designer's mockups. Dark cards and dialogs in both variants (as drawn):
   by day a yellow board with a grid under a black header, by night a black
   board with scan lines under a yellow header. Cut corners, corner brackets
   on the cards (in the deadline's colour), hazard stripes, a red and cyan
   "glitch" on the titles.
   KB2077 Display (Orbitron with ő and ű) for names of things, Rajdhani for
   the rest, KB2077 Mono (Share Tech Mono with ő and ű) for data.

   Decoration (the status band under the header, COL_01, LANE_01, GRP_01,
   ID_0001, CARD_ID …, DATA_SHARD, SEC_01, SYNC 50%, NO_DATA) is generated
   text: each carries an empty alternative ("/ ''"), so screen readers skip
   it, and some of it is quieter than 4.5:1 on purpose (v182: agreed for
   decoration only). Where it shows data (a card's number, its column, the
   share done) the data comes from attributes index.php sets for this look
   alone; they are marked [2077] there.

   Cut corners are drawn with gradients, never clip-path, on anything that
   holds a pop-up or a focus ring (a card holds the quick-assign list); the
   small chips and buttons that use clip-path drop it while focused.

   Everything here is under html[data-skin="2077"], 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.
   ============================================================ */

/* The faces, self-hosted (SIL OFL 1.1, see THIRD-PARTY-NOTICES.md): Orbitron
   and Share Tech Mono with Ő ő Ű ű added, under new names (both have a
   Reserved Font Name), and Rajdhani; Latin and Latin Extended-A. */
@font-face { font-family: 'KB2077 Display'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/KB2077Display-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'KB2077 Display'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/KB2077Display-Bold.woff2') format('woff2'); }
@font-face { font-family: 'KB2077 Display'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('fonts/KB2077Display-Black.woff2') format('woff2'); }
@font-face { font-family: 'KB2077 Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/KB2077Mono-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/Rajdhani-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/Rajdhani-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/Rajdhani-Bold.woff2') format('woff2'); }

/* ---------- tokens: light (a yellow board) ----------
   The surfaces are dark in both variants. Text contrasts on the cards
   (#17171f): ink 15.1, ink-2 11.5, muted 5.3, cyan 13.7, yellow 15.5, red
   text 6.4 (a little less on the night's #1a1a22: muted 5.1); dark ink on
   the yellow 17.2, on the red 5.8. */
html[data-skin="2077"] {
  --search-lift: 0px;   /* the header's search box (v196): this face's lower case already sits in the middle */
  --bg:        #fdf530;   /* the board (and what the pinned column heads paint above themselves) */
  --surface:   #17171f;
  --ink:       #ececf0;
  --ink-2:     #cfcfd6;
  --muted:     #8b8b93;
  --line:      #2a2a34;
  --line-strong: #4a4a56;
  --accent:    #fdf530;   /* yellow: the main buttons, what is selected */
  --accent-hi: #fff86e;
  --accent-text: #5ef6ff; /* cyan: links, project names */
  --accent-soft: rgba(253, 245, 48, .14);
  --danger:    #ff6b63;
  --danger-solid: #f75048;
  --stripe-none: #7a761f; /* nothing due: the yellow dimmed (the brackets of soon are the full yellow) */
  --ok:        #7cffaf;
  --dl-late:   #f75048;
  --dl-soon:   #fdf530;
  --dl-done:   #7cffaf;
  --urgent-bg: #f75048;
  --urgent-ink: #0b0a0f;
  --high:      #0b0a0f;
  --prio3-bg:  #fdf530;
  --low:       #a9a9b3;
  --hover:     #20202a;
  --soft:      #24242e;
  --count-bg:  #fdf530;
  --count-ink: #0b0a0f;
  --hl-bg:     #fdf530;
  --hl-ink:    #0b0a0f;
  --soft2:     #1c1c25;
  --panel:     #121318;
  --filter-bar: #121318;
  --desc-bg:   #0e0d12;
  --input-bg:  #0c0b10;
  --on-accent: #0b0a0f;
  --warn-bg:   #2a2810;
  --warn-line: #6b6618;
  --danger-soft: rgba(247, 80, 72, .15);
  --danger-chip: #ff7a72;
  --scroll:    #3a3a46;
  --scroll-hi: #50505e;
  --scroll-board: rgba(14, 13, 18, .45);
  --ghost-hover: rgba(255, 255, 255, .07);
  --overlay:   rgba(8, 8, 4, .55);
  --radius:    0px;
  --shadow:    none;
  --shadow-up: 0 8px 24px rgba(0, 0, 0, .45);
  --shadow-modal: 0 18px 50px rgba(0, 0, 0, .55);
  --font:         'Rajdhani', 'Geist', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: 'KB2077 Display', 'Rajdhani', 'Geist', system-ui, sans-serif;
  --font-mono:    'KB2077 Mono', ui-monospace, Menlo, Consolas, monospace;

  /* This look's own */
  --yellow:    #fdf530;
  --cyan:      #5ef6ff;
  --red:       #f75048;
  --void:      #0b0a0f;   /* the darkest dark: ink on the yellow */
  --header-bg: #0e0d12;
  --header-ink: #fdf530;
  --band-bg:   #fdf530;   /* the status band under the header */
  --band-ink:  rgba(11, 10, 15, .62);
  --head-bg:   #0e0d12;   /* a column's head, a calendar group's */
  --head-ink:  #fdf530;
  --head-micro: #8b8b93;
  --col-bg:    #0e0d12;   /* a column's panel */
  --lane-ink:  #0b0a0f;   /* a lane's name, on the board */
  --lane-line: rgba(11, 10, 15, .8);
  --board-muted: rgba(11, 10, 15, .62);
  --cell-line: rgba(11, 10, 15, .35);   /* an empty lane's outline */
  --grid:      rgba(11, 10, 15, .07);
  --modal-bg:  #121318;
  --tag-plain: #fdf530;   /* a tag with no colour of its own */
  --bracket-desc: #5ef6ff;
  --glitch:    -2px 0 rgba(247, 80, 72, .9), 2px 0 rgba(94, 246, 255, .9);
  --glitch-lt: -1px 0 rgba(247, 80, 72, .75), 1px 0 rgba(94, 246, 255, .75);
  --focus:     #5ef6ff;
  /* The swatches (v167; themes.php): neon on a dark tint of itself, outlined
     in the same neon (7.6:1 or more); dark in both variants, as the cards are. */
  --sw1-bg: #33292f; --sw1-fg: #ffaba3;  --sw2-bg: #33292a; --sw2-fg: #feb079;  --sw3-bg: #322a1b; --sw3-fg: #f6b901;
  --sw4-bg: #2a2e1c; --sw4-fg: #b5d503;  --sw5-bg: #153028; --sw5-fg: #08ea6d;  --sw6-bg: #152f33; --sw6-fg: #08e3c8;
  --sw7-bg: #162f3a; --sw7-fg: #0cdbfe;  --sw8-bg: #272c3a; --sw8-fg: #9dc7fe;  --sw9-bg: #2b2b3a; --sw9-fg: #bdbcfe;
  --sw10-bg: #31283a; --sw10-fg: #eea4fe;  --sw11-bg: #332834; --sw11-fg: #ffa3cf;  --sw12-bg: #2b2c34; --sw12-fg: #bdc5d1;
  color-scheme: dark;     /* the fields and pop-ups are dark in both */
}

/* ---------- tokens: dark (a black board) ---------- */
html[data-skin="2077"][data-theme="dark"] {
  --bg:        #0b0a0f;
  --surface:   #1a1a22;
  --line:      #2c2c36;
  --hover:     #23232d;
  --stripe-none: #5ef6ff; /* nothing due: cyan brackets (as drawn) */
  --scroll-board: #34343f;
  --overlay:   rgba(0, 0, 0, .7);

  --header-bg: #fdf530;
  --header-ink: #0b0a0f;
  --band-bg:   #0e0d12;
  --band-ink:  #8b8b93;
  --head-bg:   #fdf530;
  --head-ink:  #0b0a0f;
  --head-micro: rgba(11, 10, 15, .62);
  --col-bg:    #121318;
  --lane-ink:  #fdf530;
  --lane-line: rgba(253, 245, 48, .75);
  --board-muted: #8b8b93;
  --cell-line: #2c2c36;
  --grid:      rgba(255, 255, 255, .025);
  --tag-plain: #5ef6ff;
}

/* ---------- the page: a grid by day, scan lines by night ---------- */
html[data-skin="2077"] body {
  background-color: var(--bg);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 42px 42px;
}
html[data-skin="2077"][data-theme="dark"] body {
  background-image: repeating-linear-gradient(to bottom, var(--grid) 0 1px, transparent 1px 3px);
  background-size: auto;
}

/* ---------- type: who takes which face (the designer's list) ---------- */
/* Names of things in the display face, in capitals. */
html[data-skin="2077"] .col-head h2, html[data-skin="2077"] .lane-label, html[data-skin="2077"] .agenda-group h2,
html[data-skin="2077"] .modal h3, html[data-skin="2077"] .settings-h, html[data-skin="2077"] .chk-head strong,
html[data-skin="2077"] .att-head strong, html[data-skin="2077"] .bell-head strong, html[data-skin="2077"] .rich .md-h,
html[data-skin="2077"] .detail-tab, html[data-skin="2077"] .theme-card-head, html[data-skin="2077"] .prio,
html[data-skin="2077"] .detail-info .pick-trigger.pp4, html[data-skin="2077"] .detail-info .pick-trigger.pp3,
html[data-skin="2077"] .detail-info .pick-trigger.pp1, html[data-skin="2077"] .btn.primary, html[data-skin="2077"] .att-add {
  font-family: var(--font-display); text-transform: uppercase;
}
/* Data in mono: what style.css gives the mono face, and more. */
html[data-skin="2077"] .detail-info .info-label, html[data-skin="2077"] .agenda-head, html[data-skin="2077"] .agenda-date,
html[data-skin="2077"] .agenda-column, html[data-skin="2077"] .project-link, html[data-skin="2077"] .agenda-project,
html[data-skin="2077"] .theme-desc, html[data-skin="2077"] .push-state, html[data-skin="2077"] .chk-add input,
html[data-skin="2077"] .empty-note, html[data-skin="2077"] .log-row, html[data-skin="2077"] .comment .head,
html[data-skin="2077"] :where(.btn:not(.ghost):not(.primary):not(.att-add):not(.icon-btn):not(.user-btn)) {
  font-family: var(--font-mono);
}
/* People's names in capitals: on cards, the user's button, the pickers' pills. */
html[data-skin="2077"] .card .who-line, html[data-skin="2077"] .user-btn .user-name,
html[data-skin="2077"] .detail-info .pick-assignee, html[data-skin="2077"] .detail-info .epick-assignee,
html[data-skin="2077"] .obs-chip, html[data-skin="2077"] .agenda-who, html[data-skin="2077"] .comment .head .who,
html[data-skin="2077"] .detail-info .info-created .created-name {
  text-transform: uppercase; letter-spacing: .03em;
}
/* Rajdhani is a narrow face with short lower case: a step larger than Geist throughout. */
html[data-skin="2077"], html[data-skin="2077"] body { font-size: 15px; font-weight: 500; }
html[data-skin="2077"] .uav, html[data-skin="2077"] .pav, html[data-skin="2077"] .avatar-mono { font-weight: 400; letter-spacing: 0; }

/* ---------- the header ---------- */
html[data-skin="2077"] .toolbar { background: var(--header-bg); border-bottom: 0; row-gap: 0; }
html[data-skin="2077"] .toolbar .brand, html[data-skin="2077"] .login h1 {
  font-family: var(--font-display); font-weight: 900; font-style: italic; text-transform: uppercase;
  letter-spacing: .06em; text-shadow: var(--glitch);
}
html[data-skin="2077"] .toolbar .brand { font-size: 21px; line-height: 1; color: var(--header-ink); }
html[data-skin="2077"] .toolbar .brand-name, html[data-skin="2077"] .login h1 .brand-name { color: inherit; }
/* The mark: one colour, as a mask, so it takes the name's ink in either header. */
html[data-skin="2077"] .toolbar .brand::before, html[data-skin="2077"] .login h1::before {
  background: currentColor;
  -webkit-mask: url("2077-mark.svg") center / 26px 26px no-repeat; mask: url("2077-mark.svg") center / 26px 26px no-repeat;
}
html[data-skin="2077"] .toolbar .brand::before { margin-top: -5px; }
html[data-skin="2077"] .toolbar .icon-btn, html[data-skin="2077"] .toolbar .view-btn { color: var(--header-ink); border-radius: 0; }
html[data-skin="2077"] .toolbar .icon-btn.dim { color: var(--header-ink); opacity: .5; }
html[data-skin="2077"] .toolbar .icon-btn:hover { background: color-mix(in srgb, var(--header-ink) 14%, transparent); }
html[data-skin="2077"] .toolbar .view-btn.on, html[data-skin="2077"] .toolbar .view-btn.on:hover,
html[data-skin="2077"] .toolbar .filter-btn.on, html[data-skin="2077"] .toolbar .filter-btn.on:hover {
  background: var(--header-ink); color: var(--header-bg);
}
/* The bell's count: a red square, dark figures on it. */
html[data-skin="2077"] .toolbar .bell-badge { border-radius: 0; color: var(--void); }
html[data-skin="2077"] .filter-btn .tags-badge { border-radius: 0; }
/* The user's button: a frame with corner brackets, the name in capitals. */
html[data-skin="2077"] .user-btn {
  border: 1px solid color-mix(in srgb, var(--header-ink) 35%, transparent); border-radius: 0; padding: 0 14px 0 5px;
  background: linear-gradient(var(--cyan), var(--cyan)) top left / 10px 2px no-repeat,
              linear-gradient(var(--cyan), var(--cyan)) top left / 2px 10px no-repeat,
              linear-gradient(var(--cyan), var(--cyan)) bottom right / 10px 2px no-repeat,
              linear-gradient(var(--cyan), var(--cyan)) bottom right / 2px 10px no-repeat;
  background-origin: border-box; color: var(--header-ink); font-weight: 700; font-size: 14px;
}
html[data-skin="2077"][data-theme="dark"] .user-btn {
  background-image: linear-gradient(var(--void), var(--void)), linear-gradient(var(--void), var(--void)),
                    linear-gradient(var(--void), var(--void)), linear-gradient(var(--void), var(--void));
}
html[data-skin="2077"] .user-btn:hover { border-color: var(--header-ink); }
html[data-skin="2077"] .presence.crowd .pav { box-shadow: 0 0 0 2px var(--header-bg); }
/* The status band under the header's first row (decoration): hazard stripes,
   the release and whose session, a cyan rule. A flex item of the toolbar's
   own (order: before the row of selected filters), the header's width. */
html[data-skin="2077"] .toolbar::after {
  content: "SYS.BOARD // REV " attr(data-rev) " // NET: ONLINE  \00b7  USER ID_" attr(data-me) " // SERIAL KBN-2077" / "";
  order: 98; flex: 0 0 calc(100% + 48px); margin: 11px -24px -11px; height: 20px; box-sizing: border-box;
  padding: 0 calc(28% + 40px) 0 102px; display: block; overflow: hidden; white-space: pre; text-overflow: ellipsis;   /* the text stops (…) short of the cyan rule */
  font: 9.5px/20px var(--font-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--band-ink);
  background:
    linear-gradient(var(--cyan), var(--cyan)) right 24px center / 28% 4px no-repeat,
    repeating-linear-gradient(-45deg, var(--hazard-ink, var(--void)) 0 3px, transparent 3px 7px) 24px center / 64px 8px no-repeat,
    var(--band-bg);
}
html[data-skin="2077"][data-theme="dark"] .toolbar::after { --hazard-ink: var(--yellow); }
html[data-skin="2077"] .toolbar:has(.filter-bar)::after { margin-bottom: 0; }
html[data-skin="2077"] .toolbar .filter-bar { background: var(--filter-bar); border-top: 0; }
html[data-skin="2077"] .selected-tags .tag-chip.on { border-radius: 0; background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
/* Just above phone width the header's one row is tight (style.css, v142): the
   display face runs wide, so the name and the user's button a size smaller. */
@media (min-width: 641px) and (max-width: 760px) {
  html[data-skin="2077"] .toolbar .brand { font-size: 17px; letter-spacing: .03em; }
  html[data-skin="2077"] .user-btn { padding: 0 9px 0 4px; font-size: 13px; }
}
@media (min-width: 641px) and (max-width: 700px) {
  html[data-skin="2077"] .toolbar .brand { font-size: 15px; letter-spacing: 0; }
  html[data-skin="2077"] .toolbar .brand::before { margin-right: 5px; }
  html[data-skin="2077"] .user-btn { padding: 0 7px 0 3px; font-size: 12px; letter-spacing: 0; }
}
@media (max-width: 640px) {
  html[data-skin="2077"] .toolbar::after { display: none; }   /* one row on a phone: no room for the band */
  html[data-skin="2077"] .toolbar .brand { font-size: 17px; padding-right: 4px; }
  html[data-skin="2077"] .user-btn { padding: 0 4px; }
}

/* ---------- people: squares with a cut corner, initials in mono ---------- */
html[data-skin="2077"] .uav:not(.none), html[data-skin="2077"] .pav, html[data-skin="2077"] .avatar-preview {
  border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% 68%, 68% 100%, 0 100%);
}
html[data-skin="2077"] .uav.none { border-radius: 0; }
html[data-skin="2077"] .pav:focus-visible { clip-path: none; outline-color: var(--focus); }

/* ---------- the board: columns as dark panels (flat) ---------- */
html[data-skin="2077"] .board { counter-reset: kb-col; }
html[data-skin="2077"] .col { counter-increment: kb-col; }
html[data-skin="2077"] .board:not(.lanes) .col { background: linear-gradient(45deg, transparent 13px, var(--col-bg) 13.5px); }
html[data-skin="2077"] .board:not(.lanes) .col-body { padding: 4px 10px 16px; }
html[data-skin="2077"] .board:not(.lanes) .col-body .cards { padding: 2px 0 4px; }
/* A column's head: its name and count, under them COL_0n and hazard stripes;
   the top right corner cut. */
html[data-skin="2077"] .col-head {
  flex-wrap: wrap; row-gap: 3px; min-height: 0; padding: 10px 12px 9px 14px; margin-bottom: 6px;
  background: linear-gradient(225deg, transparent 14px, var(--head-bg) 14.5px); color: var(--head-ink);
}
/* Lanes: the heads stay pinned while the cards scroll under them (style.css),
   so the cut corner and the 6px under the head show the board's colour, not
   the cards going by. */
html[data-skin="2077"] .board.lanes .col-head {
  background: linear-gradient(225deg, var(--bg) 14px, var(--head-bg) 14.5px);
  box-shadow: 0 -18px 0 var(--bg), 0 6px 0 var(--bg);
}
/* The name, at the mockup's size: one too long for its column (Ellenőrzés/
   Jóváhagyás) gives way (…) rather than pushing the count and the + onto a
   second row, which made that head taller than the others (v183; v183 and
   v184 also made the type smaller, undone in v185). */
html[data-skin="2077"] .col-head h2 {
  flex: 1 1 0; margin-right: auto; color: var(--head-ink); font-size: 15px; font-weight: 700; letter-spacing: .08em;
  text-shadow: var(--glitch-lt); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html[data-skin="2077"][data-theme="dark"] .col-head h2 { text-shadow: none; }
html[data-skin="2077"] .col-head .count {
  margin-right: 0; border-radius: 0; height: 20px; min-width: 24px; font-size: 12px;
  clip-path: polygon(0 0, 100% 0, 100% 70%, calc(100% - 6px) 100%, 0 100%);
}
html[data-skin="2077"][data-theme="dark"] .col-head .count { background: var(--void); color: var(--yellow); }
html[data-skin="2077"] .col-head .add, html[data-skin="2077"] .col-head .hidden-toggle { color: var(--head-ink); border-radius: 0; }
html[data-skin="2077"] .col-head .add:hover, html[data-skin="2077"] .col-head .hidden-toggle:hover { background: color-mix(in srgb, var(--head-ink) 16%, transparent); color: var(--head-ink); }
html[data-skin="2077"] .col-head::after {
  content: "COL_" counter(kb-col, decimal-leading-zero) / "";
  flex: 0 0 100%; order: 10; height: 12px; padding-right: 0;
  font: 10px/12px var(--font-mono); letter-spacing: .22em; color: var(--head-micro);
  background: repeating-linear-gradient(-45deg, var(--head-ink) 0 2.5px, transparent 2.5px 6px) right center / calc(100% - 64px) 7px no-repeat;
}

/* ---------- lanes: no panels, a lane's name across each column ---------- */
html[data-skin="2077"] .board.lanes { gap: 18px; }
html[data-skin="2077"] .lane-label {
  margin: 20px 0 10px; padding: 0 0 7px; border-bottom: 1px solid var(--lane-line);
  color: var(--lane-ink); font-size: 13px; font-weight: 700; letter-spacing: .14em;
}
html[data-skin="2077"] .lane-block.lead .lane-label { margin-top: 4px; }
/* A tag or project lane's chip: on the board, so a plain one (no colour of its own,
   or Nincs címke) gets the cards' dark under it, or by day it is yellow on yellow. */
html[data-skin="2077"] .lane-label .tag { text-transform: uppercase; letter-spacing: .1em; background-color: var(--surface); }
html[data-skin="2077"] .lane-label .lane-count {
  border-radius: 0; background: transparent; color: var(--lane-ink); box-shadow: inset 0 0 0 1px var(--lane-line);
  font-family: var(--font-mono); font-weight: 400;
}
/* LANE_0n: only in the first column (the name repeats in every column, the number need not). */
html[data-skin="2077"] .board.lanes .col:first-child .col-body { counter-reset: kb-lane; }
html[data-skin="2077"] .board.lanes .col:first-child .lane-block { counter-increment: kb-lane; }
html[data-skin="2077"] .board.lanes .col:first-child .lane-label::after {
  content: "LANE_" counter(kb-lane, decimal-leading-zero) / "";
  flex: 0 0 auto; font: 9.5px/1 var(--font-mono); letter-spacing: .22em; color: var(--board-muted); text-shadow: none;
}
/* An empty lane: a dashed cell saying NO_DATA. */
html[data-skin="2077"] .cards.lane { border-radius: 0; min-height: 56px; }
html[data-skin="2077"] .cards.lane:empty { border-color: var(--cell-line); }
html[data-skin="2077"] .cards.lane:empty::before {
  content: "NO_DATA" / ""; margin: auto; align-self: center;
  font: 10px/1 var(--font-mono); letter-spacing: .26em; color: var(--board-muted);
}

/* ---------- a card: dark, square, brackets at its corners ----------
   The brackets take the deadline's colour (--card-color: late red, soon
   yellow, done green, none the look's quiet one); the left stripe of
   style.css gives way to them. */
html[data-skin="2077"] .card {
  --bk: var(--card-color, var(--stripe-none));
  border: 1px solid var(--line); border-radius: 0; padding: 12px 14px 12px 14px; gap: 6px;
  background:
    linear-gradient(var(--bk), var(--bk)) top left / 14px 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) top left / 2px 14px no-repeat,
    linear-gradient(var(--bk), var(--bk)) top right / 14px 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) top right / 2px 14px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom left / 14px 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom left / 2px 14px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom right / 14px 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom right / 2px 14px no-repeat,
    var(--surface);
  background-origin: border-box;
}
html[data-skin="2077"] .card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-up); }
html[data-skin="2077"] .card:focus-visible { outline-color: var(--focus); }
html[data-skin="2077"] .card.sortable-drag { box-shadow: 0 14px 34px rgba(0, 0, 0, .6); }
html[data-skin="2077"] .card .who-line { font-size: 13px; font-weight: 600; color: #b9b9c2; }
/* ID_0006: the card's number at the right of its first row (decoration). */
html[data-skin="2077"] .card .who-line::after {
  content: "ID_" attr(data-num) / ""; margin-left: auto; padding-left: 8px;
  font: 10.5px/1 var(--font-mono); letter-spacing: .14em; color: #5f5f6a; text-transform: none;
}
html[data-skin="2077"] .card.ticketed .who-line::after { padding-right: 4px; }
html[data-skin="2077"] .card .title { font-size: 17px; font-weight: 700; line-height: 1.2; color: #f4f4f6; }
html[data-skin="2077"] .card .ticket-link { top: 15px; }
/* The project: "> NAME" in cyan mono. */
html[data-skin="2077"] .project-link { font-size: 11.5px; text-transform: uppercase; letter-spacing: .14em; }
html[data-skin="2077"] .project-link::before { content: "> " / ""; }
html[data-skin="2077"] .card .meta { font-size: 13px; gap: 6px 12px; }
html[data-skin="2077"] .card .deadline, html[data-skin="2077"] .badge-ico { font-size: 12px; letter-spacing: .06em; }
html[data-skin="2077"] .link-row { font-size: 13px; }
/* + Felelős: a dashed frame. */
html[data-skin="2077"] .assign-btn { border-radius: 0; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; }

/* Chips: slanted. Sürgős red and Magas yellow, dark letters; Alacsony an outline. */
html[data-skin="2077"] .prio {
  height: 19px; padding: 0 14px 0 8px; border-radius: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}
html[data-skin="2077"] .prio.p1 {
  padding: 0 8px; background: transparent; color: var(--low); box-shadow: inset 0 0 0 1px var(--low); clip-path: none;
}
/* Tags: outlined capitals in mono, each in its own neon (its swatch), the
   plain ones in the look's yellow (cyan by night). */
html[data-skin="2077"] .tag {
  border-radius: 0; background: transparent; color: var(--tag-plain); box-shadow: inset 0 0 0 1px currentColor;
  font-size: 10.5px; line-height: 19px; padding: 0 8px; text-transform: uppercase; letter-spacing: .14em;
}
html[data-skin="2077"] .tag.project { border-radius: 0; font-family: var(--font-mono); font-weight: 400; }
html[data-skin="2077"] .tag.clickable.on { outline-color: var(--focus); }
html[data-skin="2077"] .tag.tag-x-chip { border-radius: 0; height: 22px; line-height: 22px; }
html[data-skin="2077"] .swatch-opt { border-radius: 0; box-shadow: inset 0 0 0 1px currentColor; font-family: var(--font-mono); }
html[data-skin="2077"] .swatch-dot { border-radius: 0; }
html[data-skin="2077"] .card .chk-badge.full { color: var(--ok); }

/* ---------- the calendar: groups as panels, rows as cards ---------- */
html[data-skin="2077"] .agenda { counter-reset: kb-grp; }
html[data-skin="2077"] .agenda-group { counter-increment: kb-grp; margin-bottom: 24px; }
html[data-skin="2077"] .agenda-head { color: var(--board-muted); letter-spacing: .2em; font-weight: 400; }
html[data-skin="2077"] .agenda-group h2 {
  position: relative; margin: 0; padding: 10px 14px 24px; min-height: 0;
  background: linear-gradient(225deg, transparent 14px, var(--head-bg) 14.5px);
  color: var(--head-ink); font-size: 15px; font-weight: 700; letter-spacing: .08em; text-shadow: var(--glitch-lt);
}
html[data-skin="2077"][data-theme="dark"] .agenda-group h2 { text-shadow: none; }
html[data-skin="2077"] .agenda-group h2 .count {
  margin-left: auto; margin-right: 6px; border-radius: 0; background: var(--count-bg); color: var(--count-ink); font-weight: 400; text-shadow: none;
}
html[data-skin="2077"][data-theme="dark"] .agenda-group h2 .count { background: var(--void); color: var(--yellow); }
/* GRP_0n // what kind, and hazard stripes (decoration). */
html[data-skin="2077"] .agenda-group h2::after {
  content: "GRP_" counter(kb-grp, decimal-leading-zero) " // QUEUED" / "";
  position: absolute; left: 14px; right: 20px; bottom: 7px; height: 12px;
  font: 10px/12px var(--font-mono); letter-spacing: .22em; color: var(--head-micro); text-shadow: none;
  background: repeating-linear-gradient(-45deg, var(--head-ink) 0 2.5px, transparent 2.5px 6px) right center / calc(100% - 210px) 7px no-repeat;
}
html[data-skin="2077"] .agenda-group[data-key="past"] h2::after { content: "GRP_" counter(kb-grp, decimal-leading-zero) " // ALERT" / ""; }
html[data-skin="2077"] .agenda-group[data-key="today"] h2::after { content: "GRP_" counter(kb-grp, decimal-leading-zero) " // TODAY" / ""; }
html[data-skin="2077"] .agenda-group[data-key="soon"] h2::after { content: "GRP_" counter(kb-grp, decimal-leading-zero) " // SOON" / ""; }
html[data-skin="2077"] .agenda-panel {
  border-radius: 0; box-shadow: none; overflow: visible; padding: 8px 10px 14px;
  background: linear-gradient(45deg, transparent 13px, var(--col-bg) 13.5px);
  display: flex; flex-direction: column; gap: 6px;
}
html[data-skin="2077"] .agenda-row {
  --bk: var(--card-color, var(--stripe-none));
  padding: 11px 16px 11px 20px; border: 1px solid var(--line);
  background:
    linear-gradient(var(--bk), var(--bk)) top left / 12px 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) top left / 2px 12px no-repeat,
    linear-gradient(var(--bk), var(--bk)) top right / 12px 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) top right / 2px 12px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom left / 12px 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom left / 2px 12px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom right / 12px 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom right / 2px 12px no-repeat,
    var(--surface);
  background-origin: border-box;
}
html[data-skin="2077"] .agenda-row + .agenda-row { border-top: 1px solid var(--line); }
html[data-skin="2077"] .agenda-row:hover { border-color: var(--line-strong); background-color: var(--hover); }
html[data-skin="2077"] .agenda-row:focus-visible { outline-color: var(--focus); }
/* The header row's columns over the rows': the rows sit 10px into the panel. */
html[data-skin="2077"] .agenda-head { padding-left: 31px; padding-right: 27px; }
html[data-skin="2077"] .agenda-rel { font-weight: 700; }
html[data-skin="2077"] .agenda-when.over .agenda-rel, html[data-skin="2077"] .agenda-when.over .agenda-date { color: var(--danger); }
html[data-skin="2077"] .agenda-date { letter-spacing: .06em; }
html[data-skin="2077"] .agenda-title { font-size: 16px; font-weight: 700; }
html[data-skin="2077"] .agenda-project { text-transform: uppercase; letter-spacing: .14em; font-size: 11.5px; }
html[data-skin="2077"] .agenda-project::before { content: "> " / ""; }
html[data-skin="2077"] .agenda-column { text-transform: uppercase; letter-spacing: .12em; font-size: 11.5px; }
html[data-skin="2077"] .agenda-column::before { content: "[" / ""; }
html[data-skin="2077"] .agenda-column::after { content: "]" / ""; }
html[data-skin="2077"] .agenda > .empty-note { color: var(--board-muted); }
@media (max-width: 640px) {
  html[data-skin="2077"] .agenda-group h2::after { background-size: calc(100% - 190px) 7px; }
}

/* ---------- buttons and fields ---------- */
/* The main buttons: yellow parallelograms, the display face. */
html[data-skin="2077"] .btn.primary, html[data-skin="2077"] .att-add {
  border: 0; border-radius: 0; padding: 9px 22px; font-size: 12px; font-weight: 700; letter-spacing: .14em;
  background: var(--yellow); color: var(--void);
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}
html[data-skin="2077"] .btn.primary:hover:not(:disabled), html[data-skin="2077"] .att-add:hover { background: var(--accent-hi); }
html[data-skin="2077"] .btn.tiny.primary, html[data-skin="2077"] .btn.tiny.att-add { padding: 6px 18px; font-size: 11px; }
html[data-skin="2077"] .btn.primary:focus-visible, html[data-skin="2077"] .att-add:focus-within { clip-path: none; outline-color: var(--focus); }
/* The others: square outlines in mono capitals; the danger ones red. (:where:
   as weak as a plain .btn rule, so the header's buttons keep their own.) */
html[data-skin="2077"] .btn { border-radius: 0; }
html[data-skin="2077"] :where(.btn:not(.ghost):not(.primary):not(.att-add):not(.icon-btn):not(.user-btn)) {
  background: transparent; border-color: var(--accent-text); color: var(--accent-text);
  font-size: 12px; text-transform: uppercase; letter-spacing: .12em;
}
html[data-skin="2077"] :where(.btn:not(.ghost):not(.primary):not(.att-add):not(.icon-btn):not(.user-btn)):hover { background: rgba(94, 246, 255, .1); }
html[data-skin="2077"] :where(.btn.tiny:not(.ghost):not(.primary):not(.att-add)) { font-size: 10.5px; letter-spacing: .06em; }
html[data-skin="2077"] .btn.danger { border-color: var(--danger); color: var(--danger); }
html[data-skin="2077"] .btn.danger:hover { background: var(--danger-soft); }
html[data-skin="2077"] input[type=text], html[data-skin="2077"] input[type=email], html[data-skin="2077"] input[type=password],
html[data-skin="2077"] input[type=date], html[data-skin="2077"] input[type=search], html[data-skin="2077"] select,
html[data-skin="2077"] textarea { border-radius: 0; }
html[data-skin="2077"] input:focus, html[data-skin="2077"] select:focus, html[data-skin="2077"] textarea:focus,
html[data-skin="2077"] .btn:focus-visible { outline-color: var(--focus); border-color: var(--focus); }
html[data-skin="2077"] input[type=checkbox], html[data-skin="2077"] input[type=radio],
html[data-skin="2077"] .chk-item .item-check { accent-color: var(--yellow); }
html[data-skin="2077"] label:not(.btn) { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .16em; font-size: 11px; }
html[data-skin="2077"] .notify-list label, html[data-skin="2077"] .login .remember, html[data-skin="2077"] .bell-filter,
html[data-skin="2077"] .tag-panel-list label, html[data-skin="2077"] .tag-row label, html[data-skin="2077"] .theme-card,
html[data-skin="2077"] .admin-done, html[data-skin="2077"] .admin-project-divisions label {
  font-family: var(--font); text-transform: none; letter-spacing: 0;
}
html[data-skin="2077"] .notify-list label { font-size: 15px; font-weight: 600; }
/* Új kártya: a parallelogram (black on the yellow board, yellow on the black). */
html[data-skin="2077"] .btn.primary.fab {
  width: 68px; height: 54px; border-radius: 0; padding: 0; font-size: 30px; line-height: 1;
  background: var(--head-bg); color: var(--head-ink); box-shadow: none;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}
html[data-skin="2077"] .btn.primary.fab:hover:not(:disabled) { background: var(--head-bg); color: var(--head-ink); filter: brightness(1.15); }

/* ---------- pop-ups ---------- */
html[data-skin="2077"] .menu, html[data-skin="2077"] .bell-panel, html[data-skin="2077"] .filters.open,
html[data-skin="2077"] .detail-pick, html[data-skin="2077"] .assign-pop, html[data-skin="2077"] .mention-pop,
html[data-skin="2077"] .link-pick {
  border-radius: 0; border: 1px solid var(--line-strong); background: var(--surface); box-shadow: var(--shadow-up);
}
html[data-skin="2077"] .menu button, html[data-skin="2077"] .detail-pick button, html[data-skin="2077"] .assign-pop button,
html[data-skin="2077"] .mention-pop .opt, html[data-skin="2077"] .link-opt, html[data-skin="2077"] .view-row,
html[data-skin="2077"] .view-row .view-name, html[data-skin="2077"] .tag-panel-list label, html[data-skin="2077"] .tag-row { border-radius: 0; }
html[data-skin="2077"] .bell-head strong { font-size: 14px; letter-spacing: .1em; color: var(--yellow); }
html[data-skin="2077"] .bell-time { letter-spacing: .06em; }
html[data-skin="2077"] .link-rel-btn, html[data-skin="2077"] .obs-chip, html[data-skin="2077"] .obs-add, html[data-skin="2077"] .obs-x { border-radius: 0; }
html[data-skin="2077"] .obs-add { border-color: var(--cyan); color: var(--cyan); }

/* ---------- dialogs: cut corners, a yellow head ---------- */
/* The dialog's fill: one diagonal gradient cuts both the bottom left and the
   top right corner (in quarters, the overlaps showed as a seam on the edge). */
html[data-skin="2077"] .modal, html[data-skin="2077"] .login {
  border-radius: 0; box-shadow: none;
  background: linear-gradient(45deg, transparent 16px, var(--modal-bg) 16.5px, var(--modal-bg) calc(100% - 16.5px), transparent calc(100% - 16px));
}
html[data-skin="2077"] .modal { counter-reset: kb-sec; }
html[data-skin="2077"] .modal > .detail-head {
  background: linear-gradient(225deg, transparent 16px, var(--yellow) 16.5px); color: var(--void);
  border-radius: 0; border-bottom: 0; padding-top: 18px; padding-bottom: 14px;
}
html[data-skin="2077"] .modal h3 { font-weight: 900; font-size: 18px; letter-spacing: .06em; color: var(--void); text-shadow: var(--glitch); }
html[data-skin="2077"] .card-view .detail-head h3, html[data-skin="2077"] .card-edit .detail-head h3 { font-size: 21px; color: var(--void); }
html[data-skin="2077"] .modal > .detail-head > .btn.ghost { color: var(--void); border-radius: 0; }
html[data-skin="2077"] .modal > .detail-head > .btn.ghost:hover { background: rgba(11, 10, 15, .1); color: var(--void); }
/* ✕: a framed square, as drawn. */
html[data-skin="2077"] .modal > .detail-head > .btn.ghost:last-child { box-shadow: inset 0 0 0 1.5px var(--void); }
html[data-skin="2077"] .detail-url a { color: #0d5d63; }
html[data-skin="2077"] .detail-url a:hover { color: var(--void); }
/* The card view and the editor: the deadline's colour as a line under the head,
   not down the left side (the cut corner would cut it). */
html[data-skin="2077"] .modal.card-view, html[data-skin="2077"] .modal.card-edit { border-left: 0; }
html[data-skin="2077"] .modal.card-view { padding-left: 62px; }
html[data-skin="2077"] .modal.card-view > .detail-head { margin-left: -62px; padding-left: 22px; }
html[data-skin="2077"] .modal.card-edit { padding-left: 22px; }
html[data-skin="2077"] .modal.card-edit > .detail-head { margin-left: -22px; padding-left: 22px; }
html[data-skin="2077"] .modal.card-view > .detail-head, html[data-skin="2077"] .modal.card-edit > .detail-head {
  box-shadow: 0 3px 0 var(--card-color, transparent);
}
@media (max-width: 640px) {
  html[data-skin="2077"] .modal.card-view { padding-left: 22px; }
  html[data-skin="2077"] .modal.card-view > .detail-head { margin-left: -22px; }
  html[data-skin="2077"] .card-view .detail-head h3, html[data-skin="2077"] .card-edit .detail-head h3 { font-size: 17px; }
}
/* CARD_ID 0006 // STATUS: … // OWNER NE under the title (decoration). */
html[data-skin="2077"] .detail-title::after {
  content: "CARD_ID " attr(data-num) " // STATUS: " attr(data-status) " // OWNER " attr(data-owner) / "";
  display: block; margin-top: 4px; font: 10.5px/1.3 var(--font-mono); letter-spacing: .18em; text-transform: uppercase;
  color: rgba(11, 10, 15, .66);
}
/* The card's fields: labels in small mono capitals, values in square frames. */
html[data-skin="2077"] .detail-info .info-label { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; }
@media (max-width: 640px) { html[data-skin="2077"] .detail-info .info-label { font-size: 10px; letter-spacing: .08em; } }
html[data-skin="2077"] .detail-info .info-pill { border-radius: 0; background: var(--input-bg); border-color: var(--line-strong); font-size: 14px; font-weight: 600; height: 28px; }
html[data-skin="2077"] .detail-info .pick-trigger { font-size: 14px; }
html[data-skin="2077"] .detail-info .pick-caret { color: var(--yellow); }
html[data-skin="2077"] .detail-info .pick-trigger.pp4 { background: var(--urgent-bg); color: var(--urgent-ink); }
html[data-skin="2077"] .detail-info .pick-trigger.pp3 { background: var(--prio3-bg); color: var(--high); }
html[data-skin="2077"] .detail-info .pick-trigger.pp4, html[data-skin="2077"] .detail-info .pick-trigger.pp3 {
  border-color: transparent; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; padding-right: 16px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
html[data-skin="2077"] .detail-info .pick-trigger.pp4:focus-visible, html[data-skin="2077"] .detail-info .pick-trigger.pp3:focus-visible { clip-path: none; }
html[data-skin="2077"] .detail-info .pick-trigger.pp1 { background: transparent; color: var(--low); border-color: var(--low); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; }
html[data-skin="2077"] .detail-info .info-created .created-at { letter-spacing: .06em; }
/* The description: a framed data shard, cyan brackets, its heading yellow. */
html[data-skin="2077"] .detail-desc {
  border-radius: 0; border: 1px solid var(--line); padding: 12px 18px 16px; font-size: 15px; color: var(--ink-2);
  background:
    linear-gradient(var(--bracket-desc), var(--bracket-desc)) top left / 12px 2px no-repeat,
    linear-gradient(var(--bracket-desc), var(--bracket-desc)) top left / 2px 12px no-repeat,
    linear-gradient(var(--bracket-desc), var(--bracket-desc)) top right / 12px 2px no-repeat,
    linear-gradient(var(--bracket-desc), var(--bracket-desc)) top right / 2px 12px no-repeat,
    linear-gradient(var(--bracket-desc), var(--bracket-desc)) bottom left / 12px 2px no-repeat,
    linear-gradient(var(--bracket-desc), var(--bracket-desc)) bottom left / 2px 12px no-repeat,
    linear-gradient(var(--bracket-desc), var(--bracket-desc)) bottom right / 12px 2px no-repeat,
    linear-gradient(var(--bracket-desc), var(--bracket-desc)) bottom right / 2px 12px no-repeat,
    var(--desc-bg);
  background-origin: border-box;
}
html[data-skin="2077"] .detail-desc::before {
  content: "DATA_SHARD // DESC.TXT" / ""; display: block; margin-bottom: 6px;
  font: 9.5px/1.4 var(--font-mono); letter-spacing: .24em; color: #6a6a75;
}
html[data-skin="2077"] .rich .md-h { color: var(--yellow); font-weight: 700; letter-spacing: .1em; }
html[data-skin="2077"] .rich h4.md-h { font-size: 15px; }
html[data-skin="2077"] .rich h5.md-h, html[data-skin="2077"] .rich h6.md-h { font-size: 13px; }
html[data-skin="2077"] .rich blockquote { border-left-color: var(--red); }
html[data-skin="2077"] .rich code { font-family: var(--font-mono); border-radius: 0; }
html[data-skin="2077"] .detail-desc a, html[data-skin="2077"] .comment .body a { color: var(--accent-text); }

/* Section heads (Beállítások, the checklist, the attachments): yellow display
   capitals, a rule after them, SEC_0n at its end (decoration). */
html[data-skin="2077"] .settings-h { counter-increment: kb-sec; display: flex; align-items: center; gap: 12px; color: var(--yellow); font-size: 13px; font-weight: 700; letter-spacing: .14em; margin-top: 22px; }
html[data-skin="2077"] .detail-head + .settings-h, html[data-skin="2077"] .push-box .settings-h { margin-top: 4px; }
html[data-skin="2077"] .settings-h::after, html[data-skin="2077"] .att-head strong::after {
  content: "SEC_" counter(kb-sec, decimal-leading-zero) / ""; flex: 1 1 auto; text-align: right;
  font: 9.5px/1 var(--font-mono); letter-spacing: .22em; color: #5f5f6a;
  background: linear-gradient(var(--line-strong), var(--line-strong)) left center / calc(100% - 70px) 1px no-repeat;
}
html[data-skin="2077"] .chk-head strong, html[data-skin="2077"] .att-head strong { color: var(--yellow); font-size: 14px; font-weight: 700; letter-spacing: .14em; }
html[data-skin="2077"] .att-head strong { counter-increment: kb-sec; display: flex; align-items: center; gap: 12px; flex: 1 1 auto; }
/* The checklist: 02/04, a yellow block per item, slanted, SYNC 50%. */
html[data-skin="2077"] .chk-count { color: var(--yellow); font-size: 12.5px; letter-spacing: .08em; }
html[data-skin="2077"] .chk-bar { height: 10px; max-width: 280px; border-radius: 0; background: none; gap: 3px; overflow: visible; padding: 0 3px; }
html[data-skin="2077"] .chk-bar i { background: #2a2a34; transform: skewX(-24deg); }
html[data-skin="2077"] .chk-bar i.on { background: var(--yellow); }
html[data-skin="2077"] .chk-bar.many { gap: 0; }
html[data-skin="2077"] .chk-bar.many i { transform: none; }
html[data-skin="2077"] .chk-head[data-sync]::after {
  content: "SYNC " attr(data-sync) "%" / ""; font: 10px/1 var(--font-mono); letter-spacing: .2em; color: #6a6a75;
}
html[data-skin="2077"] .chk-item { border-radius: 0; font-size: 15px; font-weight: 500; }
html[data-skin="2077"] .chk-add input { background: var(--input-bg); font-size: 13px; letter-spacing: .06em; }
html[data-skin="2077"] .chk-add input::placeholder { color: #6a6a75; }
/* Attachments, comments, the log. */
html[data-skin="2077"] .att { border-radius: 0; }
html[data-skin="2077"] .att-thumb, html[data-skin="2077"] .cmt-img { border-radius: 0; }
html[data-skin="2077"] .attachments { border-top-color: var(--line); }
html[data-skin="2077"] .detail-tab { font-size: 12px; font-weight: 700; letter-spacing: .12em; border-radius: 0; }
html[data-skin="2077"] .detail-tab.on { color: var(--yellow); border-bottom-color: var(--yellow); }
html[data-skin="2077"] .detail-tab .tab-count { border-radius: 0; font-family: var(--font-mono); }
html[data-skin="2077"] .comment .head .who { font-family: var(--font); font-size: 14px; font-weight: 700; }
html[data-skin="2077"] .comment .body { font-size: 15px; }
html[data-skin="2077"] .mention.me { border-radius: 0; }

/* Beállítások: the looks' cards, the push row. */
html[data-skin="2077"] .theme-card { border-radius: 0; background: var(--desc-bg); border-color: var(--line); }
html[data-skin="2077"] .theme-card:hover { border-color: var(--line-strong); }
html[data-skin="2077"] .theme-card.on {
  border-color: var(--cyan); box-shadow: none;
  background:
    linear-gradient(var(--cyan), var(--cyan)) top left / 12px 2px no-repeat, linear-gradient(var(--cyan), var(--cyan)) top left / 2px 12px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) bottom right / 12px 2px no-repeat, linear-gradient(var(--cyan), var(--cyan)) bottom right / 2px 12px no-repeat,
    var(--desc-bg);
  background-origin: border-box;
}
html[data-skin="2077"] .theme-card:focus-within { outline-color: var(--focus); }
/* The display face runs wide: a wider dialog, so the looks' names (Miami Sunset) keep to one line. */
html[data-skin="2077"] .modal.settings { max-width: 620px; }
html[data-skin="2077"] .theme-cards { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
html[data-skin="2077"] .theme-card-head { font-size: 11px; font-weight: 700; letter-spacing: .06em; }
html[data-skin="2077"] .theme-swatch { border-radius: 0; }
html[data-skin="2077"] .theme-desc { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
html[data-skin="2077"] .theme-hint::before { content: "// " / ""; font-family: var(--font-mono); }
html[data-skin="2077"] .admin-hint { font-size: 14px; }
html[data-skin="2077"] .push-box { border-top: 0; }
html[data-skin="2077"] .push-row {
  padding: 10px 12px; border: 1px solid var(--line); background: var(--desc-bg);
}
html[data-skin="2077"] .push-row .push-state { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; }
html[data-skin="2077"] .push-row .push-state.ps-on { color: var(--cyan); font-weight: 400; }
html[data-skin="2077"] .push-row .push-state.ps-on::before { content: "" / ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; background: var(--cyan); vertical-align: 1px; }

/* The sign-in page: a dialog on the board. */
html[data-skin="2077"] .login h1 { font-size: 22px; color: var(--yellow); }
html[data-skin="2077"] .login .login-link { color: var(--accent-text); }

/* The rest: square corners where style.css rounds them. */
/* A message: a dark panel with a yellow edge (a yellow one would vanish on the day's yellow board). */
html[data-skin="2077"] .toast { border-radius: 0; background: var(--surface); color: var(--ink); box-shadow: inset 4px 0 0 var(--yellow), var(--shadow-modal); }
html[data-skin="2077"] .toast.err { background: var(--red); color: var(--void); box-shadow: var(--shadow-modal); }
html[data-skin="2077"] .admin-user-form, html[data-skin="2077"] .admin-col-delete, html[data-skin="2077"] .admin-badge,
html[data-skin="2077"] .shortcut-table kbd, html[data-skin="2077"] .fmt-btn, html[data-skin="2077"] .about-icon,
html[data-skin="2077"] .detail-head > .btn.ghost, html[data-skin="2077"] .comment .head .btn.cmt-icon,
html[data-skin="2077"] .admin-col-row, html[data-skin="2077"] .admin-user-row, html[data-skin="2077"] mark.hl { border-radius: 0; }
html[data-skin="2077"] .board-offline, html[data-skin="2077"] .board-offline p { color: var(--board-muted); }
html[data-skin="2077"] .banner { color: var(--ink); }

/* Text and icons that style.css paints in the accent: here the accent is the
   yellow fill, so as text they take the cyan of the links. */
html[data-skin="2077"] .about a,
html[data-skin="2077"] .edit-pick .pick-add,
html[data-skin="2077"] .card-tag-pick .tag-new,
html[data-skin="2077"] .detail-pick .pick-check,
html[data-skin="2077"] .card .ticket-link:hover,
html[data-skin="2077"] .btn.icon-link.copied,
html[data-skin="2077"] .btn.icon-link.copied:hover,
html[data-skin="2077"] .view-row .view-star.on,
html[data-skin="2077"] .project-link-copy:hover,
html[data-skin="2077"] .project-link-copy:focus-visible,
html[data-skin="2077"] .btn.project-link-copy.copied,
html[data-skin="2077"] .btn.project-link-copy.copied:hover { color: var(--accent-text); }
/* …but not on the dialog's yellow head, where cyan would barely show: the link's ✓ stays dark there. */
html[data-skin="2077"] .modal > .detail-head > .btn.icon-link.copied,
html[data-skin="2077"] .modal > .detail-head > .btn.icon-link.copied:hover { color: var(--void); }