/* Giao diện "Wedding XP": cửa sổ, nút, ô nhập, thanh tác vụ, menu Bắt đầu, bong bóng thông báo, biểu tượng.
   Mọi màu của hệ điều hành nằm ở đây; bố cục từng ứng dụng nằm trong style.css. */
:root {
  --ui: Tahoma, "Noto Sans", "Segoe UI", Verdana, sans-serif;
  --title: "Trebuchet MS", "Fira Sans", Tahoma, sans-serif;
  --mono: "Lucida Console", "Cousine", Consolas, monospace;
  --face: #ece9d8;          /* nền hộp thoại */
  --face-dark: #d6d0c5;
  --edge: #003c74;          /* viền nút */
  --field: #7f9db9;         /* viền ô nhập */
  --sel: #316ac5;           /* vùng chọn */
  --link: #0645ad;
  --title-h: 30px;
  --task-h: 34px;
  --fs: 13px;
  --tap: 0px;               /* tăng vùng bấm trên màn cảm ứng */
}
@media (pointer: coarse) { :root { --task-h: 44px; --fs: 14px; --tap: 6px; } }

/* ---------------- cửa sổ ---------------- */
.win {
  position: absolute;
  display: flex; flex-direction: column;
  min-width: 220px;
  background: var(--face);
  border-radius: 8px 8px 0 0;
  padding: 0 3px 3px;
  box-shadow:
    inset -1px -1px #00138c, inset 1px 1px #0831d9,
    inset -2px -2px #001ea0, inset 2px 2px #166aee,
    inset -3px -3px #003bda, inset 3px 3px #0855dd,
    var(--win-drop, 3px 6px 18px rgba(0, 10, 50, .38));
  font: var(--fs)/1.35 var(--ui);
  color: #000;
  outline: none;
  transform-origin: 50% 50%;
}
.win.inactive {
  box-shadow:
    inset -1px -1px #6a7fc8, inset 1px 1px #7f97e0,
    inset -2px -2px #7a8fd6, inset 2px 2px #9bb1ee,
    inset -3px -3px #8296dd, inset 3px 3px #93a8e8,
    var(--win-drop, 2px 4px 12px rgba(0, 10, 50, .25));
}
.win-title {
  flex: none;
  display: flex; align-items: center; gap: 5px;
  height: var(--title-h);
  margin: 0 -3px;
  padding: 0 4px 0 7px;
  border-radius: 7px 7px 0 0;
  background: linear-gradient(180deg, #0997ff, #0053ee 8%, #0050ee 40%, #0066ff 88%, #0066ff 93%, #005bff 95%, #003dd7 96%, #003dd7);
  color: #fff;
  font: 700 14px/1 var(--title);
  text-shadow: 1px 1px #0f1089;
  user-select: none; -webkit-user-select: none;
  touch-action: none;
  cursor: default;
}
.win.inactive .win-title {
  background: linear-gradient(180deg, #7697e7, #7e9ee3 3%, #94afe8 6%, #97b4e9 8%, #82a5e4 14%, #7c9fe2 17%, #7996de 25%, #7b99e1 56%, #82a9e9 81%, #80a5e7 89%, #7b96e1 94%, #7a93df 97%, #abbae3);
  color: #d8e4f8;
  text-shadow: none;
}
.win-icon { width: 16px; height: 16px; flex: none; object-fit: contain; }
.win-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-top: 1px; }
.win-btns { display: flex; gap: 2px; flex: none; }
.wb {
  position: relative;
  width: calc(21px + var(--tap)); height: calc(21px + var(--tap));
  padding: 0;
  border: 1px solid #fff; border-radius: 3px;
  background: radial-gradient(circle at 90% 90%, #0054e9 0%, #2263d5 55%, #4479e4 70%, #a3bbec 90%, #fff 100%);
  box-shadow: inset 0 -1px 2px 1px #4646ff;
  cursor: pointer;
}
.wb:hover { filter: brightness(1.18); }
.wb:active { filter: brightness(.86); }
.wb-close {
  background: radial-gradient(circle at 90% 90%, #cc4600 0%, #dc6527 55%, #cd7546 70%, #ffccb2 90%, #fff 100%);
  box-shadow: inset 0 -1px 2px 1px #da4600;
}
.win.inactive .wb { opacity: .72; }
.wb::before, .wb::after { content: ""; position: absolute; background: #fff; }
.wb-min::before { left: 26%; bottom: 25%; width: 34%; height: 3px; }
.wb-max::before { inset: 22% 22% 24% 22%; background: none; border: 1px solid #fff; border-top-width: 3px; }
.win.max .wb-max::before { inset: 34% 34% 20% 18%; }
.win.max .wb-max::after { inset: 18% 18% 38% 36%; background: none; border: 1px solid #fff; border-top-width: 2px; border-left: 0; border-bottom: 0; }
.wb-close::before, .wb-close::after { left: 50%; top: 50%; width: 3px; height: 62%; margin: -31% 0 0 -1.5px; border-radius: 1px; transform: rotate(45deg); }
.wb-close::after { transform: rotate(-45deg); }
.wb-help::before { content: "?"; inset: 0; background: none; color: #fff; font: 700 14px/19px var(--title); text-align: center; }
.win-body { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.win.max { border-radius: 0; }
.win.max .win-title { border-radius: 0; }
.win-grip {
  position: absolute; right: 3px; bottom: 3px; width: 14px; height: 14px; cursor: nwse-resize; touch-action: none;
  background: linear-gradient(135deg, transparent 50%, #b3ae99 50%, #b3ae99 56%, transparent 56%, transparent 66%, #b3ae99 66%, #b3ae99 72%, transparent 72%, transparent 82%, #b3ae99 82%, #b3ae99 88%, transparent 88%);
}
.win.max .win-grip { display: none; }
.win.shake { animation: shake .5s linear; }
@keyframes shake {
  0%, 100% { translate: 0 0; } 10% { translate: -9px 3px; } 20% { translate: 8px -4px; } 30% { translate: -7px -3px; }
  40% { translate: 9px 4px; } 50% { translate: -8px 2px; } 60% { translate: 7px -3px; } 70% { translate: -6px 3px; }
  80% { translate: 5px -2px; } 90% { translate: -3px 1px; }
}

/* thanh menu, thanh công cụ, thanh trạng thái */
.menubar { flex: none; display: flex; gap: 1px; padding: 1px 2px; background: var(--face); border-bottom: 1px solid #fff; box-shadow: 0 1px #d8d2bd; overflow: hidden; white-space: nowrap; }
.menubar span { padding: 3px 7px; border-radius: 2px; }
.menubar span:hover { background: var(--sel); color: #fff; }
.toolbar { flex: none; display: flex; align-items: center; gap: 2px; padding: 2px 4px; background: linear-gradient(180deg, #fbfbf8, #ece9d8 85%, #d8d2bd); border-bottom: 1px solid #c5c2b2; overflow: hidden; white-space: nowrap; }
.tb { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 6px; border: 1px solid transparent; border-radius: 3px; background: none; font: inherit; color: #000; cursor: pointer; }
.tb:hover { border-color: #cec8b5; background: linear-gradient(180deg, #fff, #f3f1ea); box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.tb:disabled { color: #a7a597; cursor: default; background: none; border-color: transparent; box-shadow: none; }
.tb-sep { width: 1px; height: 20px; margin: 0 3px; background: #c5c2b2; box-shadow: 1px 0 #fff; }
.statusbar { flex: none; display: flex; gap: 2px; padding: 2px; background: var(--face); border-top: 1px solid #fff; font-size: 12px; color: #222; white-space: nowrap; overflow: hidden; }
.statusbar > * { padding: 1px 6px; border: 1px solid; border-color: #aca899 #fff #fff #aca899; overflow: hidden; text-overflow: ellipsis; }
.statusbar > :first-child { flex: 1; }

/* ---------------- nút và ô nhập ---------------- */
.btn {
  min-width: 76px; min-height: calc(25px + var(--tap));
  padding: 2px 12px;
  border: 1px solid var(--edge); border-radius: 3px;
  background: linear-gradient(180deg, #fff, #ecebe6 86%, #d6d0c5);
  box-shadow: inset -1px 1px #fff, inset 1px 0 #fff, inset -1px -1px #d6d0c5;
  font: var(--fs) var(--ui); color: #000;
  cursor: pointer;
  touch-action: manipulation;
}
.btn:hover { box-shadow: inset -1px 1px #fff0cf, inset 1px 2px #fdd889, inset -2px 2px #fbc761, inset 2px -2px #e5a01a; }
.btn:focus-visible, .btn.default { outline: none; box-shadow: inset -1px 1px #cee7ff, inset 1px 2px #98b8ea, inset -2px 2px #bcd4f6, inset 1px -1px #89ade4, inset 2px -2px #89ade4; }
.btn:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.btn:active, .btn.pressed { background: linear-gradient(180deg, #cdcac3, #e3e3db 8%, #e5e5de 94%, #f2f2f1); box-shadow: none; }
.btn:disabled { color: #aca899; border-color: #c9c7ba; background: #f4f3ee; box-shadow: none; cursor: default; }
.link { color: var(--link); text-decoration: underline; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

.field, input.field, textarea.field, select.field {
  border: 1px solid var(--field); border-radius: 0;
  background: #fff; color: #000;
  padding: 3px 5px;
  font: var(--fs) var(--ui);
  min-height: calc(23px + var(--tap));
}
.field:focus { outline: 1px solid #316ac5; outline-offset: 0; }
@media (pointer: coarse) { .field, input.field, textarea.field { font-size: 16px; } }

.radio, .check { display: flex; align-items: flex-start; gap: 7px; cursor: pointer; padding: calc(2px + var(--tap) / 2) 0; }
.radio input, .check input {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 14px; height: 14px; margin: 2px 0 0;
  border: 1px solid #1c5180;
  background: linear-gradient(135deg, #dcdcd7, #fff);
  cursor: pointer;
}
.radio input { border-radius: 50%; }
.radio input:checked { background: radial-gradient(circle, #36b13a 0 2.5px, #24a028 3.5px, transparent 4px), linear-gradient(135deg, #dcdcd7, #fff); }
.check input:checked { background: no-repeat center / 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 5l3 3 5-6' fill='none' stroke='%2321a121' stroke-width='2'/%3E%3C/svg%3E"), linear-gradient(135deg, #dcdcd7, #fff); }
.radio input:focus-visible, .check input:focus-visible { outline: 1px dotted #000; outline-offset: 2px; }
.radio:hover input, .check:hover input { box-shadow: inset 0 0 0 2px #fbc761; }

.groupbox { border: 1px solid #d0d0bf; border-radius: 4px; padding: 8px 10px 10px; margin: 0; }
.groupbox legend { color: #0046d5; padding: 0 4px; }

.progress { height: 16px; padding: 2px; border: 1px solid #686868; border-radius: 3px; background: #fff; box-shadow: inset 0 0 1px #000; overflow: hidden; }
.progress i {
  display: block; height: 100%; width: calc(var(--p, 0) * 100%);
  background: repeating-linear-gradient(90deg, transparent 0 1px, #fff 1px 3px, transparent 3px 10px),
              linear-gradient(180deg, #acedad, #7be47d 14%, #4cda50 28%, #2ed330 42%, #42d845 57%, #76e275 71%, #8fe791 85%, #fff);
  background-size: 10px 100%, 100% 100%;
  transition: width .25s linear;
}
.progress.marquee i { width: 30%; animation: marq 1.6s linear infinite; }
@keyframes marq { from { translate: -110% 0; } to { translate: 360% 0; } }

/* thanh cuộn kiểu XP */
.scroll { overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
@media (pointer: fine) {
  .scroll::-webkit-scrollbar { width: 17px; height: 17px; }
  .scroll::-webkit-scrollbar-track { background: linear-gradient(90deg, #eeede5, #fdfdfa 30%, #f3f1ec); }
  .scroll::-webkit-scrollbar-thumb {
    border: 1px solid #fff; border-radius: 3px;
    background: linear-gradient(90deg, #c9d7fc, #bbcefb 45%, #b0c5f8 55%, #a6bdf3);
    box-shadow: inset 0 0 0 1px #9db8f5;
    background-clip: padding-box;
  }
  .scroll::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, #dbe6ff, #cdddff 45%, #c2d4ff 55%, #b6cbfb); }
  .scroll::-webkit-scrollbar-corner { background: var(--face); }
}

/* ---------------- hộp thoại nhỏ ---------------- */
.dlg { padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 14px; }
.dlg-row { display: flex; gap: 12px; align-items: flex-start; }
.dlg-row > img { width: 34px; height: 34px; flex: none; }
.dlg-btns { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; position: relative; }
.dlg-btns.center { justify-content: center; }

/* ---------------- thanh tác vụ ---------------- */
.taskbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 9000;
  height: calc(var(--task-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex; align-items: stretch;
  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%);
  font: 12px var(--ui);
  user-select: none; -webkit-user-select: none;
}
.start {
  flex: none; display: flex; align-items: center; gap: 6px;
  padding: 0 22px 0 9px; margin-right: 10px;
  border: 0; border-radius: 0 12px 12px 0;
  background: radial-gradient(ellipse at 30% 0%, #79c36f 0 22%, transparent 60%), linear-gradient(180deg, #4ea84a 0%, #3c9a3c 12%, #318f34 45%, #2e8a30 70%, #2a7e2b 88%, #1d6b21 100%);
  box-shadow: inset -2px -2px 3px rgba(0, 40, 0, .5), inset 2px 2px 3px rgba(190, 255, 180, .5), 3px 0 4px rgba(0, 0, 40, .3);
  color: #fff; font: italic 700 19px/1 var(--title); text-shadow: 1px 1px 2px #1b3f1b;
  cursor: pointer; touch-action: manipulation;
}
.start:hover { filter: brightness(1.1); }
.start.on, .start:active { filter: brightness(.9); box-shadow: inset 2px 2px 4px rgba(0, 40, 0, .65); }
.start svg { width: 22px; height: 22px; filter: drop-shadow(1px 1px 1px rgba(0,0,0,.4)); }
.tasks { flex: 1; min-width: 0; display: flex; gap: 3px; align-items: center; padding: 3px 4px; overflow: hidden; }
.tbtn {
  flex: 0 1 165px; min-width: 40px; height: calc(var(--task-h) - 7px);
  display: flex; align-items: center; gap: 6px;
  padding: 0 8px;
  border: 0; border-radius: 3px;
  background: linear-gradient(180deg, #3c81f3 0%, #3a7ef0 50%, #3672e6 90%, #2f62d6 100%);
  box-shadow: inset -1px -1px rgba(0, 0, 30, .35), inset 1px 1px rgba(255, 255, 255, .3);
  color: #fff; font: 12px var(--ui); text-align: left;
  cursor: pointer; touch-action: manipulation;
}
.tbtn:hover { background: linear-gradient(180deg, #53a0ff, #4b92fb 50%, #4486f2); }
.tbtn.on { background: linear-gradient(180deg, #1e52b7, #1a4aac 50%, #1d50b5); box-shadow: inset 1px 1px 2px rgba(0, 0, 20, .6); }
.tbtn.flash { animation: tflash 1s steps(1) 6; }
@keyframes tflash { 50% { background: linear-gradient(180deg, #fbb54d, #f29a29); } }
.tbtn img { width: 16px; height: 16px; flex: none; }
.tbtn span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tray {
  flex: none; display: flex; align-items: center; gap: 6px;
  padding: 0 10px 0 9px;
  border-left: 1px solid #092e51;
  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);
  box-shadow: inset 1px 0 1px #18bbff;
  color: #fff;
}
.tray-ico { position: relative; width: calc(18px + var(--tap)); height: calc(18px + var(--tap)); padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; touch-action: manipulation; }
.tray-ico img, .tray-ico svg { width: 16px; height: 16px; }
.tray-ico[hidden] { display: none; }
.tray-ico.off::after { content: ""; position: absolute; width: 14px; height: 2px; background: #e33; transform: rotate(-45deg); box-shadow: 0 0 0 1px #fff; }
.clock { padding-left: 4px; text-shadow: 0 1px 1px rgba(0, 0, 40, .35); white-space: nowrap; }

/* ---------------- menu Bắt đầu ---------------- */
.startmenu {
  position: absolute; left: 0; bottom: calc(var(--task-h) + env(safe-area-inset-bottom)); z-index: 9100;
  width: min(400px, 100vw);
  display: flex; flex-direction: column;
  border-radius: 7px 7px 0 0;
  background: #4282d6;
  box-shadow: 2px -1px 10px rgba(0, 0, 30, .45), inset 0 0 0 1px #1854c2;
  overflow: hidden;
  font: var(--fs) var(--ui);
  transform-origin: 0 100%;
  animation: smIn .14s ease-out;
}
@keyframes smIn { from { opacity: 0; transform: translateY(14px); } }
.sm-head {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  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%);
  color: #fff; font: 700 15px var(--title); text-shadow: 1px 1px 2px #0d2d7a;
}
.sm-head img { width: 46px; height: 46px; border: 2px solid #fff; border-radius: 4px; box-shadow: 1px 1px 3px rgba(0,0,0,.4); object-fit: cover; background: #fff; }
.sm-cols { display: flex; position: relative; }
.sm-cols::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, #da884a 30%, #da884a 70%, transparent); }
.sm-left, .sm-right { list-style: none; margin: 0; padding: 6px 0; }
.sm-left { flex: 1.1; background: #fff; }
.sm-right { flex: 1; background: #d3e5fa; border-left: 1px solid #95bdee; }
.sm-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: calc(4px + var(--tap) / 2) 8px; border: 0; background: none; font: inherit; color: #000; text-align: left; cursor: pointer; }
.sm-left .sm-item img { width: 30px; height: 30px; }
.sm-right .sm-item { font-weight: 700; color: #00136b; }
.sm-right .sm-item img { width: 22px; height: 22px; }
.sm-item small { display: block; font-weight: 400; color: #666; font-size: 11px; }
.sm-item:hover, .sm-item:focus-visible { background: var(--sel); color: #fff; outline: none; }
.sm-item:hover small, .sm-item:focus-visible small { color: #dfe8ff; }
.sm-sep { height: 1px; margin: 5px 8px; background: linear-gradient(90deg, transparent, #c5c5c5, transparent); }
.sm-foot { display: flex; justify-content: flex-end; gap: 6px; 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%, #1468d4 75%, #0c63d0 82%, #0d60ce 88%, #1a63cc 92%, #2c6ac8 94%, #3f72c4 97%, #5579c7 100%); }
.sm-foot button { display: flex; align-items: center; gap: 6px; padding: calc(3px + var(--tap) / 2) 6px; border: 0; border-radius: 3px; background: none; color: #fff; font: var(--fs) var(--ui); cursor: pointer; }
.sm-foot button:hover { background: rgba(255, 255, 255, .18); }
.sm-foot i { width: 22px; height: 22px; border-radius: 4px; border: 1px solid #fff; display: grid; place-items: center; font-style: normal; font-weight: 700; }
.sm-foot .off i { background: linear-gradient(180deg, #e98a5e, #c3401a); }
.sm-foot .out i { background: linear-gradient(180deg, #f6c75b, #e2961e); }

/* ---------------- bong bóng thông báo ---------------- */
.balloon {
  position: absolute; z-index: 9200;
  right: 8px; bottom: calc(var(--task-h) + env(safe-area-inset-bottom) + 14px);
  width: min(330px, calc(100vw - 16px));
  padding: 9px 30px 10px 10px;
  background: #ffffe1; color: #000;
  border: 1px solid #000; border-radius: 8px;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, .35);
  font: var(--fs)/1.4 var(--ui);
  cursor: pointer;
  animation: balIn .25s ease-out;
}
.balloon::after { content: ""; position: absolute; right: var(--tail, 40px); bottom: -16px; border: 8px solid transparent; border-top: 9px solid #000; border-right-width: 0; }
.balloon::before { content: ""; position: absolute; right: calc(var(--tail, 40px) + 1px); bottom: -13px; border: 7px solid transparent; border-top: 8px solid #ffffe1; border-right-width: 0; z-index: 1; }
.balloon b { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.balloon b img { width: 16px; height: 16px; }
.balloon .x { position: absolute; top: 5px; right: 5px; width: calc(16px + var(--tap)); height: calc(16px + var(--tap)); border: 1px solid #b9b9a3; border-radius: 3px; background: #fff; font: 700 11px/1 var(--ui); color: #555; cursor: pointer; }
.balloon .x:hover { background: #e0624d; color: #fff; border-color: #a53a29; }
.balloon.out { animation: balOut .3s ease-in forwards; }
@keyframes balIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes balOut { to { opacity: 0; transform: translateY(6px); } }

/* ---------------- biểu tượng trên màn hình ---------------- */
.icons { position: absolute; inset: 8px auto calc(var(--task-h) + 8px) 6px; margin: 0; padding: 0; list-style: none; display: grid; grid-auto-flow: column; grid-template-rows: repeat(auto-fill, 92px); gap: 4px 6px; z-index: 1; }
.dicon { width: 82px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 2px; border: 1px dotted transparent; background: none; color: #fff; font: 12px/1.25 var(--ui); text-align: center; text-shadow: 1px 1px 1px #000, 0 0 3px rgba(0,0,0,.6); cursor: pointer; touch-action: manipulation; }
.dicon img { width: 44px; height: 44px; filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, .35)); }
.dicon span { padding: 0 2px; border-radius: 1px; }
.dicon:focus-visible { outline: none; border-color: #ffd; }
.dicon.sel img { filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, .35)) brightness(.75) sepia(1) hue-rotate(185deg) saturate(3); }
.dicon.sel span { background: var(--sel); text-shadow: none; }
.dicon.bin { position: absolute; right: 8px; bottom: calc(var(--task-h) + 8px); }