/* Vincent Šmíd — Industrial Design Portfolio
   Windows XP (Luna Blue) look. Plain CSS + an inline SVG icon sprite; the wallpaper is wallpaper.svg. */

:root {
  --ui: Tahoma, "Segoe UI", Verdana, Geneva, sans-serif;
  --title: "Trebuchet MS", Tahoma, "Segoe UI", sans-serif;
  --face: #ECE9D8;          /* window / dialog face */
  --face-line: #D8D2BD;
  --field: #7F9DB9;         /* sunken field border */
  --navy: #0A246A;
  --link: #215DC6;
  --link-hover: #428EFF;
  --sel: #316AC5;           /* selection blue */
  --muted: #5E5E5E;
  --green: #1D7A1D;
  --col: 1000px;
  --bar: 30px;              /* taskbar height */
  --titlebar: linear-gradient(180deg, #0058EE 0%, #3593FF 4%, #288EFF 6%, #127DFF 8%, #036FFC 10%, #0262EE 14%, #0057E5 20%, #0054E3 24%, #0055EB 56%, #005BF5 66%, #026AFE 76%, #0062EF 86%, #0052D6 92%, #0040AB 94%, #003092 100%);
  --frame:
    inset -1px -1px #00138C, inset 1px 1px #0831D9,
    inset -2px -2px #001EA0, inset 2px 2px #166AEE,
    inset -3px -3px #003BDA, inset 3px 3px #0855DD;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body {
  min-height: 100vh;
  padding: 28px 16px calc(var(--bar) + 28px);
  font: 14px/1.55 var(--ui);
  color: #000;
  background: #4A87DD;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: #4A87DD url("wallpaper.svg") center bottom / cover no-repeat;
}
img, video { display: block; max-width: 100%; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
:focus-visible { outline: 1px dotted #000; outline-offset: 1px; }
::selection { background: var(--sel); color: #fff; }

/* Language visibility */
html[data-lang="en"] .cz, html[data-lang="cz"] .en { display: none !important; }

/* Icons */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { display: block; width: 32px; height: 32px; flex: none; }
.ico16 { width: 16px; height: 16px; }
.ico24 { width: 24px; height: 24px; }

/* ---------------------------------------------------------------- Window */
.win {
  position: relative; z-index: 1;
  max-width: var(--col); margin: 0 auto 30px;
  padding: 0 3px 3px;
  background: var(--face);
  border-radius: 8px 8px 0 0;
  box-shadow: var(--frame), 4px 10px 28px rgba(0, 18, 70, .38);
}
.win.is-max { max-width: none; }
.win.is-min > :not(.tb) { display: none; }
.win[hidden] { display: none; }

.tb {
  display: flex; align-items: center; gap: 5px;
  height: 29px; margin: 0 -3px; padding: 0 5px 0 7px;
  border-radius: 8px 8px 0 0;
  background: var(--titlebar);
  color: #fff; font: bold 13px/1 var(--title); text-shadow: 1px 1px #0F1089;
  user-select: none; -webkit-user-select: none;
}
.tb__ico { width: 16px; height: 16px; filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .3)); }
.tb__title { flex: 1; min-width: 0; padding-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb__btns { display: flex; gap: 2px; flex: none; }
.tb__btn {
  position: relative; width: 21px; height: 21px;
  border: 1px solid #fff; border-radius: 3px;
  background: radial-gradient(circle at 90% 90%, #0054E9 0%, #2263D5 55%, #4479E4 70%, #A3BBEC 90%, #fff 100%);
}
.tb__btn:hover { filter: brightness(1.18); }
.tb__btn:active { filter: brightness(.82); }
.tb__btn::before, .tb__btn::after { content: ""; position: absolute; background: #fff; }
.tb__btn--min::before { left: 4px; bottom: 4px; width: 7px; height: 3px; }
.tb__btn--max::before { left: 4px; top: 4px; width: 11px; height: 11px; box-sizing: border-box; background: none; border: 1px solid #fff; border-top-width: 3px; }
.tb__btn--min::after, .tb__btn--max::after { display: none; }
.tb__btn--close { background: radial-gradient(circle at 90% 90%, #CC4600 0%, #DC6527 55%, #CD7546 70%, #FFCCB2 90%, #fff 100%); }
.tb__btn--close::before, .tb__btn--close::after { left: 50%; top: 50%; width: 13px; height: 2px; transform: translate(-50%, -50%) rotate(45deg); }
.tb__btn--close::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* Menu bar, toolbar, address bar */
.menubar { display: flex; align-items: center; height: 23px; padding-left: 2px; font-size: 12px; border-bottom: 1px solid var(--face-line); overflow: hidden; }
.menubar > span { padding: 2px 7px; white-space: nowrap; }
.menubar .menubar__logo { margin-left: auto; align-self: stretch; display: grid; place-items: center; width: 42px; padding: 0; background: #fff; border-left: 1px solid var(--face-line); }
.menubar__logo .ico { width: 20px; height: 20px; }

.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; padding: 3px 4px; font-size: 12px; border-top: 1px solid #fff; border-bottom: 1px solid var(--face-line); }
.tgroup { display: flex; gap: 2px; }
.tbtn {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 9px 0 5px;
  border: 1px solid transparent; border-radius: 3px; color: #000;
}
.tbtn:hover { color: #000; text-decoration: none; border-color: #CECEC3; background: linear-gradient(180deg, #fff, #F4F3EE 60%, #E7E5DB); }
.tbtn:active,
html[data-lang="en"] .tbtn--lang[data-set="en"],
html[data-lang="cz"] .tbtn--lang[data-set="cz"] { border-color: #9D9D92; background: #E3E1D5; box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .2); }
.tbtn--lang { padding: 0 10px; font-weight: bold; }
.tsep { width: 1px; height: 26px; margin: 0 4px; background: #C5C2B2; box-shadow: 1px 0 #fff; }

.addr { display: flex; align-items: center; gap: 6px; padding: 3px 6px 4px; font-size: 12px; border-top: 1px solid #fff; }
.addr__k { color: #6F6C5E; }
.addr__f { flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 4px; background: #fff; border: 1px solid var(--field); white-space: nowrap; }
.addr__f > span { overflow: hidden; text-overflow: ellipsis; }
.addr__go { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px; color: #000; }
.addr__go:hover { color: #000; }

/* Window body: Explorer task pane + content */
.wb {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  grid-template-areas: "pane head" "pane main";
  grid-template-rows: auto 1fr;
  background: #fff;
  border-top: 1px solid var(--face-line);
}
.pane { grid-area: pane; padding: 12px 12px 16px; background: linear-gradient(180deg, #7BA2E7 0%, #6375D6 100%); }
.pane__in { position: sticky; top: 12px; display: grid; gap: 12px; }

.tp { font-size: 12px; line-height: 1.4; }
.tp__h {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  min-height: 25px; padding: 3px 3px 3px 11px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, #fff 0%, #C6D3F7 100%);
  color: #215DC6; font-weight: bold;
  cursor: pointer; list-style: none; user-select: none; -webkit-user-select: none;
}
.tp__h::-webkit-details-marker { display: none; }
.tp__h:hover { color: var(--link-hover); }
.tp__chev { width: 18px; height: 18px; transition: transform .15s; }
.tp:not([open]) .tp__chev { transform: rotate(180deg); }
.tp__b { padding: 10px 11px 11px; background: #D6DFF7; border: 1px solid #fff; border-top: 0; }
.tp--special .tp__h { color: #fff; background: linear-gradient(90deg, #0A48C8 0%, #2D7BE6 100%); }
.tp--special .tp__h:hover { color: #C6DAFF; }
.tp--special .tp__b { background: #EFF3FF; }
.tasks li { display: flex; gap: 6px; align-items: flex-start; padding: 2px 0; }
.links li + li { margin-top: 6px; }
.links a, .links__plain { display: flex; gap: 6px; align-items: flex-start; }
.d-name { font-weight: bold; margin-bottom: 4px; }
.d-row + .d-row { margin-top: 6px; }
.d-row .d-ico { display: inline-block; vertical-align: -3px; margin-right: 4px; }
.d-k { color: #4C4C4C; }
.d-row--series { padding: 6px 8px; background: #fff; border: 1px solid #9DB9EB; color: var(--green); font-weight: bold; }
.d-row--series .d-k { color: var(--green); }
.d-row--series .d-big { font: bold 18px/1 var(--title); }

.ch { grid-area: head; min-width: 0; padding: 24px 28px 4px; }
.cm { grid-area: main; min-width: 0; padding: 4px 28px 28px; }
.ch__kicker { font-size: 12px; color: var(--muted); }
.ch__title { margin-top: 2px; font: bold clamp(22px, 3.2vw, 30px)/1.15 var(--title); color: var(--navy); }
.ch__context { margin-top: 6px; font-size: 12px; color: var(--muted); }
.ch__lead { margin-top: 14px; max-width: 66ch; font-size: 15px; }
.ch__name { font: bold clamp(30px, 5vw, 44px)/1.05 var(--title); color: var(--navy); }
.ch__role { margin-top: 4px; font-size: 15px; color: #444; }
.ch__also { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; font-weight: bold; color: var(--link); }

/* Series production: an XP progress dialog that has finished */
.prod { max-width: 520px; margin-top: 20px; padding: 0 3px 3px; background: var(--face); border-radius: 6px 6px 0 0; box-shadow: var(--frame), 2px 4px 12px rgba(0, 0, 0, .2); }
.prod__tb { display: flex; align-items: center; gap: 6px; height: 24px; margin: 0 -3px; padding: 0 8px; border-radius: 6px 6px 0 0; background: var(--titlebar); color: #fff; font: bold 12px/1 var(--title); text-shadow: 1px 1px #0F1089; }
.prod__body { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 14px; padding: 14px 14px 12px; }
.prod__ico { width: 46px; height: 46px; }
.prod__txt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.prod__num { font: bold 40px/1 var(--title); color: var(--navy); }
.prod__unit { font-size: 15px; font-weight: bold; }
.prod__bar { grid-column: 1 / -1; height: 18px; margin-top: 10px; padding: 2px; background: #fff; border: 1px solid #686868; border-radius: 3px; overflow: hidden; }
.prod__bar i {
  display: block; height: 100%; width: 100%;
  background:
    repeating-linear-gradient(90deg, transparent 0 8px, #fff 8px 10px),
    linear-gradient(180deg, #ACEDAD 0%, #7BE47D 14%, #4CDA50 28%, #2ED330 42%, #42D845 57%, #76E275 71%, #8FE791 85%, #fff 100%);
}
.prod.is-anim .prod__bar i { width: 0; }
.prod.is-anim.is-in .prod__bar i { width: 100%; transition: width 1.6s steps(26, end); }
.prod__foot { grid-column: 1 / -1; margin-top: 2px; font-size: 12px; color: #333; }

/* Thumbnails view (project index) */
.grp {
  margin: 20px 0 14px; padding-bottom: 4px;
  font-size: 12px; font-weight: bold; color: var(--link);
  background: linear-gradient(90deg, #6F9BE8, rgba(111, 155, 232, 0) 75%) left bottom / 100% 1px no-repeat;
}
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 18px 14px; }
.th { display: flex; flex-direction: column; gap: 2px; color: #000; }
.th:hover { color: #000; text-decoration: none; }
.th__img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 5px; padding: 3px; background: #fff; border: 1px solid #D0CEC2; }
.th__img img { width: 100%; height: 100%; object-fit: cover; }
.th:hover .th__img { border-color: #8FAEE6; box-shadow: 0 0 0 1px #C5D7F6; }
.th:focus-visible { outline: none; }
.th:focus-visible .th__img { border: 2px solid var(--sel); padding: 2px; }
.th:focus-visible .th__t { background: var(--sel); color: #fff; outline: 1px dotted #000; }
.th__t { font-size: 13px; font-weight: bold; line-height: 1.3; }
.th:hover .th__t { color: var(--link-hover); text-decoration: underline; }
.th__n { font-weight: normal; color: var(--muted); }
.th__s { font-size: 12px; line-height: 1.35; color: var(--muted); }
.th__series { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 12px; font-weight: bold; color: var(--green); }
.th__code { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 12px; font-weight: bold; color: var(--link); }
.th__badge {
  position: absolute; left: 8px; top: 8px; padding: 2px 7px;
  border: 1px solid #186218; border-radius: 3px;
  background: linear-gradient(180deg, #7ADA7A 0%, #34A534 55%, #2A8F2A 100%);
  color: #fff; font: bold 13px/1.2 var(--ui); text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

/* Media */
.media { margin-top: 26px; }
.media__frame { width: fit-content; max-width: 100%; padding: 3px; background: #fff; border: 1px solid var(--field); }
.media--video .media__frame { width: 100%; }
.media img { width: auto; height: auto; max-height: 80vh; }
.media video { width: 100%; max-height: 80vh; background: #000; }
figcaption { display: flex; align-items: flex-start; gap: 6px; margin-top: 7px; font-size: 12px; line-height: 1.4; color: #444; }
figcaption .k { font-weight: bold; color: #000; }
figcaption .note { font-style: italic; color: #6D6D6D; }

/* Status bar */
.sb { display: flex; height: 22px; margin-top: 2px; font-size: 11px; line-height: 22px; }
.sb > span { flex: none; padding: 0 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-right: 1px solid #C2BFA5; box-shadow: 1px 0 #fff; }
.sb > span:last-child { flex: 1; min-width: 0; border-right: 0; box-shadow: none; }
.sb__series { font-weight: bold; color: var(--green); }
.sb::after {
  content: ""; flex: none; align-self: flex-end; width: 12px; height: 12px; margin: 0 1px 1px 0;
  background: repeating-linear-gradient(135deg, transparent 0 2px, #fff 2px 3px, #A9A592 3px 4px);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* Contact dialog + buttons */
.foot { padding-top: 6px; }
.win--dialog { max-width: 470px; }
.dlg { display: flex; align-items: flex-start; gap: 14px; padding: 18px 16px 8px; }
.dlg__ico { width: 40px; height: 40px; }
.dlg__t { font-size: 14px; font-weight: bold; }
.dlg p { margin-top: 3px; }
.dlg .dlg__also { margin-top: 1px; font-size: 12px; color: var(--muted); }
.dlg__btns { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 12px 14px 14px; }
.xbtn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 75px; min-height: 23px; padding: 2px 12px;
  border: 1px solid #003C74; border-radius: 3px;
  background: linear-gradient(180deg, #fff 0%, #ECEBE6 86%, #D6D0C5 100%);
  color: #000; font-size: 12px;
}
.xbtn--default { box-shadow: inset -1px 1px #CEE7FF, inset 1px 2px #98B8EA, inset -2px 2px #BCD4F6, inset 1px -1px #89ADE4, inset 2px -2px #89ADE4; }
.xbtn:hover { color: #000; text-decoration: none; box-shadow: inset -1px 1px #FFF0CF, inset 1px 2px #FDD889, inset -2px 2px #FBC761, inset 2px -2px #E5A01A; }
.xbtn:active { background: linear-gradient(180deg, #CDCAC3 0%, #E3E3DB 8%, #E5E5DE 94%, #F2F2F1 100%); box-shadow: none; }
.colophon { max-width: var(--col); margin: 0 auto; text-align: center; font-size: 12px; color: #fff; text-shadow: 1px 1px 2px rgba(0, 0, 0, .75); }

/* ---------------------------------------------------------------- Desktop icons */
.desk { position: fixed; top: 22px; left: 14px; z-index: 0; display: none; flex-direction: column; gap: 20px; }
.desk a {
  display: flex; flex-direction: column; align-items: center; gap: 5px; width: 88px;
  color: #fff; font-size: 12px; line-height: 1.25; text-align: center; word-break: break-word;
  text-shadow: 1px 1px 1px #000, 0 0 3px rgba(0, 0, 0, .8);
}
.desk a:hover { color: #fff; text-decoration: none; }
.desk .ico { width: 42px; height: 42px; filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, .35)); }
.desk a span { padding: 0 2px; }
.desk a:focus-visible { outline: none; }
.desk a:focus-visible span { background: var(--sel); outline: 1px dotted #fff; text-shadow: none; }
@media (min-width: 1320px) { .desk { display: flex; } }

/* ---------------------------------------------------------------- Taskbar */
.taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; height: var(--bar);
  font: 12px var(--ui); color: #fff;
  background: linear-gradient(180deg, #1F2F86 0%, #3165C4 3%, #3682E5 6%, #4490E6 10%, #3883E5 12%, #2B71E0 15%, #2663DA 18%, #235BD6 20%, #2258D5 23%, #2157D6 38%, #245DDB 54%, #2562DF 86%, #245FDC 89%, #2158D4 92%, #1D4EC0 95%, #1941A5 98%);
}
.start {
  display: flex; align-items: center; gap: 5px; height: 100%; padding: 0 22px 1px 9px;
  border-radius: 0 12px 12px 0;
  color: #fff; font: italic bold 19px/1 var(--title); letter-spacing: .01em;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, .6);
  background: linear-gradient(180deg, #3C8D3C 0%, #5DBB5D 8%, #4CA64C 18%, #3F983F 45%, #3A923A 70%, #318531 88%, #286F28 100%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45), inset -3px 0 5px rgba(0, 0, 0, .25), 2px 0 3px rgba(0, 0, 0, .35);
}
.start:hover { filter: brightness(1.1); }
.start[aria-expanded="true"] { filter: brightness(.86); box-shadow: inset 2px 2px 5px rgba(0, 0, 0, .45); }
.start .ico { width: 22px; height: 22px; filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .45)); }
.taskbar__tasks { flex: 1; min-width: 0; display: flex; align-items: center; padding: 0 8px; }
.task-btn {
  display: flex; align-items: center; gap: 6px; flex: 0 1 240px; min-width: 0; height: 24px; padding: 0 9px;
  border-radius: 3px; color: #fff; background: #1E52B7;
  box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, .25), inset 1px 1px 1px rgba(0, 0, 0, .6);
}
.task-btn:hover { color: #fff; text-decoration: none; background: #2A60C8; }
.task-btn .ico { width: 16px; height: 16px; }
.task-btn__t { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tray {
  display: flex; align-items: center; gap: 10px; padding: 0 12px 0 10px;
  border-left: 1px solid #1042AF;
  background: linear-gradient(180deg, #0C59B9 1%, #139EE9 6%, #18B5F2 10%, #139BEB 14%, #1290E8 19%, #0D8DEA 63%, #0D9FF1 81%, #0F9EED 88%, #119BE9 91%, #1392E2 94%, #137ED7 97%, #095BC9 100%);
  box-shadow: inset 1px 0 1px #18BBFF;
}
.langbar { display: flex; gap: 2px; }
.langbar button { padding: 1px 4px; border: 1px solid transparent; border-radius: 2px; font: bold 11px/1.2 var(--ui); color: #D5E6FF; }
.langbar button:hover { color: #fff; border-color: rgba(255, 255, 255, .4); }
html[data-lang="en"] .langbar [data-set="en"],
html[data-lang="cz"] .langbar [data-set="cz"] { color: #fff; background: #0B3D9E; border-color: #6FA4F0; }
.clock { white-space: nowrap; }

/* ---------------------------------------------------------------- Start menu */
.sm {
  position: fixed; left: 0; bottom: var(--bar); z-index: 60;
  display: flex; flex-direction: column;
  width: min(440px, 100vw); max-height: calc(100vh - var(--bar) - 8px);
  overflow: hidden; border: 1px solid #1854C9; border-bottom: 0; border-radius: 8px 8px 0 0;
  background: #fff; font-size: 12px; box-shadow: 3px -2px 14px rgba(0, 0, 0, .45);
}
.sm[hidden] { display: none; }
.sm__head {
  display: flex; align-items: center; gap: 10px; flex: none; padding: 7px 10px;
  color: #fff; font: bold 16px var(--title); text-shadow: 1px 1px 2px rgba(0, 0, 0, .6);
  background: linear-gradient(180deg, #1868CE 0%, #0E60CB 12%, #0E60CB 20%, #1164CF 32%, #1667CF 33%, #1B6CD3 47%, #1E70D9 54%, #2476DC 60%, #297AE0 65%, #3482E3 77%, #3786E5 79%, #428EE9 90%, #4791EB 100%);
}
.sm__pic {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 2px solid rgba(255, 255, 255, .85); border-radius: 4px;
  background: linear-gradient(135deg, #FFC15E, #E8650F); font-size: 16px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, .4);
}
.sm__line { flex: none; height: 2px; background: linear-gradient(90deg, rgba(218, 136, 74, 0) 0%, #DA884A 50%, rgba(218, 136, 74, 0) 100%); }
.sm__cols { display: grid; grid-template-columns: 1.3fr 1fr; min-height: 0; overflow: auto; }
.sm__l { padding: 6px 2px; background: #fff; }
.sm__r { padding: 6px 2px; background: #D3E5FA; border-left: 1px solid #95BDEE; }
.sm__i { display: flex; align-items: center; gap: 8px; width: 100%; padding: 3px 8px; color: #000; line-height: 1.25; text-align: left; }
.sm__i:hover, .sm__i:focus-visible { background: var(--sel); color: #fff; text-decoration: none; outline: none; }
.sm__th { width: 32px; height: 32px; flex: none; object-fit: cover; border: 1px solid #A7A6AA; }
.sm__name { display: block; font-weight: bold; }
.sm__sub { display: block; font-size: 11px; color: #6D6D6D; }
.sm__sub--series { color: var(--green); font-weight: bold; }
.sm__i:hover .sm__sub, .sm__i:focus-visible .sm__sub { color: #fff; }
.sm__r .sm__i { min-height: 32px; font-weight: bold; color: var(--navy); }
.sm__r .sm__i:hover, .sm__r .sm__i:focus-visible { color: #fff; }
.sm__flag { display: grid; place-items: center; width: 24px; height: 18px; border-radius: 2px; background: #0B3D9E; color: #fff; font-size: 10px; }
.sm__sep { height: 1px; margin: 5px 8px; background: linear-gradient(90deg, rgba(0, 0, 0, 0), #C5C2B2, rgba(0, 0, 0, 0)); }
.sm__r .sm__sep { background: linear-gradient(90deg, rgba(0, 0, 0, 0), #95BDEE, rgba(0, 0, 0, 0)); }
.sm__all { justify-content: center; font-weight: bold; }
.sm__foot {
  display: flex; justify-content: flex-end; gap: 6px; flex: none; padding: 5px 8px;
  background: linear-gradient(180deg, #4282D6 0%, #3B85E0 3%, #418AE3 5%, #418AE3 17%, #3C87E2 21%, #3786E4 26%, #3482E3 29%, #2E7EE1 39%, #2374DF 49%, #2072DB 57%, #196EDB 62%, #176BD8 72%, #1468D6 75%, #1165D3 83%, #0F61CB 88%);
}
.sm__fb { display: flex; align-items: center; gap: 5px; padding: 3px 6px; border-radius: 3px; color: #fff; }
.sm__fb:hover { color: #fff; text-decoration: none; background: rgba(255, 255, 255, .18); }

/* ---------------------------------------------------------------- Tray balloon */
.balloon {
  position: fixed; right: 12px; bottom: calc(var(--bar) + 18px); z-index: 55;
  width: min(330px, calc(100vw - 24px)); padding: 9px 30px 10px 12px;
  background: #FFFFE1; border: 1px solid #000; border-radius: 8px;
  font-size: 12px; line-height: 1.45; box-shadow: 2px 3px 7px rgba(0, 0, 0, .35);
}
.balloon[hidden] { display: none; }
.balloon::before, .balloon::after { content: ""; position: absolute; width: 0; height: 0; }
.balloon::before { right: 44px; bottom: -16px; border-left: 16px solid transparent; border-top: 16px solid #000; }
.balloon::after { right: 45px; bottom: -14px; border-left: 14px solid transparent; border-top: 15px solid #FFFFE1; }
.balloon__t { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; font-weight: bold; }
.balloon ul { margin-top: 3px; }
.balloon b { color: var(--green); }
.balloon__x { position: absolute; top: 7px; right: 7px; width: 15px; height: 15px; border: 1px solid #A7A6AA; border-radius: 2px; }
.balloon__x::before, .balloon__x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 1.5px; background: #555; transform: translate(-50%, -50%) rotate(45deg); }
.balloon__x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.balloon__x:hover { background: #E0442A; border-color: #A3290F; }
.balloon__x:hover::before, .balloon__x:hover::after { background: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .balloon:not([hidden]) { animation: balloon-in .25s ease-out; }
  @keyframes balloon-in { from { opacity: 0; transform: translateY(6px); } }
}

/* ---------------------------------------------------------------- XP scrollbars */
::-webkit-scrollbar { width: 17px; height: 17px; }
::-webkit-scrollbar-track { background: linear-gradient(90deg, #F3F1EC, #FEFEFB); }
::-webkit-scrollbar-thumb {
  border: 1px solid #fff; border-radius: 3px;
  background:
    linear-gradient(#EEF4FE, #EEF4FE) center calc(50% - 3px) / 7px 1px no-repeat,
    linear-gradient(#8CB0F8, #8CB0F8) center calc(50% - 2px) / 7px 1px no-repeat,
    linear-gradient(#EEF4FE, #EEF4FE) center calc(50% - 1px) / 7px 1px no-repeat,
    linear-gradient(#8CB0F8, #8CB0F8) center 50% / 7px 1px no-repeat,
    linear-gradient(#EEF4FE, #EEF4FE) center calc(50% + 1px) / 7px 1px no-repeat,
    linear-gradient(#8CB0F8, #8CB0F8) center calc(50% + 2px) / 7px 1px no-repeat,
    linear-gradient(90deg, #CAD8FC 0%, #BCD0FA 50%, #A9C1F5 100%);
  box-shadow: inset 0 0 0 1px #B6CBF6;
}
::-webkit-scrollbar-thumb:hover { filter: brightness(1.04); }
::-webkit-scrollbar-button:single-button { display: block; width: 17px; height: 17px; border: 1px solid #fff; border-radius: 3px; background-color: #C3D3FD; background-repeat: no-repeat; background-position: center; background-size: 9px; }
::-webkit-scrollbar-button:single-button:vertical:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M1 6.5 4.5 3 8 6.5' fill='none' stroke='%234D6185' stroke-width='2'/%3E%3C/svg%3E"); }
::-webkit-scrollbar-button:single-button:vertical:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M1 2.5 4.5 6 8 2.5' fill='none' stroke='%234D6185' stroke-width='2'/%3E%3C/svg%3E"); }
::-webkit-scrollbar-button:single-button:horizontal:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M6.5 1 3 4.5 6.5 8' fill='none' stroke='%234D6185' stroke-width='2'/%3E%3C/svg%3E"); }
::-webkit-scrollbar-button:single-button:horizontal:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M2.5 1 6 4.5 2.5 8' fill='none' stroke='%234D6185' stroke-width='2'/%3E%3C/svg%3E"); }
::-webkit-scrollbar-corner { background: var(--face); }
@supports (-moz-appearance: none) { html { scrollbar-color: #B6CBF6 #F3F1EC; } }

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 760px) {
  body { padding: 12px 8px calc(var(--bar) + 20px); }
  .win { margin-bottom: 20px; }
  .wb { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "pane" "main"; grid-template-rows: auto; }
  .pane { padding: 10px; }
  .pane__in { position: static; }
  .ch { padding: 18px 16px 16px; }
  .cm { padding: 2px 16px 20px; }
  .tb__btn--max { display: none; }
  .thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .prod__num { font-size: 32px; }
  .start { padding-right: 16px; font-size: 17px; }
  .task-btn { flex-basis: 100%; }
  .sm__cols { grid-template-columns: minmax(0, 1fr); }
  .sm__r { border-left: 0; border-top: 1px solid #95BDEE; }
}
@media (max-width: 420px) {
  .addr__k { display: none; }
  .toolbar .tbtn:not(.tbtn--lang) span { display: none; }
}

/* ---------------------------------------------------------------- 404 */
.page-404 { padding-top: 18vh; }