/* ============================================================
   XP "Luna" polish (levels on html.xa / .xb)
   A: the real Luna window frame, caption buttons, taskbar buttons,
      quick launch, tray, icon selection, dialog buttons, scrollbars.
   B/C rules live further down.
   ============================================================ */

/* ---------- A: windows ---------- */
.xa .appwin {
  border: 0; padding: 0 3px 3px; border-radius: 8px 8px 0 0;
  background: linear-gradient(to right, #0019cf 0, #0831d9 1px, #166aee 2px, #0831d9 3px, #0831d9 calc(100% - 3px), #166aee calc(100% - 2px), #0831d9 calc(100% - 1px), #001de5 100%);
  box-shadow: 0 0 0 1px #0019cf, 4px 4px 18px rgba(0,0,0,.45);
}
.xa .appwin .appbody { background: #ece9d8; border-top: 1px solid #0831d9; }
.xa .appwin .tb {
  margin: 0 -3px; height: 30px; padding: 0 5px 0 7px; gap: 5px;
  font: bold 13px/1 "Trebuchet MS", Tahoma, sans-serif; letter-spacing: .1px;
  text-shadow: 1px 1px #0f1089; border-radius: 8px 8px 0 0;
  background: linear-gradient(to bottom, #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%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.xa .appwin .tb-ico svg { filter: drop-shadow(1px 1px 0 rgba(0,0,0,.25)); }

/* background (inactive) windows wash out, like XP */
.xa .appwin.blur { background: #7b97e0; box-shadow: 0 0 0 1px #6582d6, 3px 3px 12px rgba(0,0,0,.3); }
.xa .appwin.blur .appbody { border-top-color: #7b97e0; }
.xa .appwin.blur .tb {
  color: #d8e4f8; text-shadow: none;
  background: linear-gradient(to bottom, #7697e7 0%, #7e9ee3 3%, #94afe8 6%, #97b4e9 8%, #82a5e4 14%, #7c9fe2 17%,
    #7996de 25%, #7b99e1 56%, #82a9e9 81%, #80a5e7 89%, #7b96e1 94%, #7a93df 97%, #abbae3 100%);
}
.xa .appwin.blur .tb-btns button { opacity: .65; }

/* caption buttons: 21px rounded glossy squares with drawn glyphs */
.xa .appwin .tb-btns { gap: 2px; }
.xa .appwin .tb-btns button {
  width: 21px; height: 21px; font-size: 0; color: transparent; border: 1px solid #fff; border-radius: 3px;
  box-shadow: inset -1px -1px 1px rgba(0,0,0,.18), 0 0 0 0 transparent;
  background-repeat: no-repeat; background-position: center;
}
.xa .appwin .tb-btns .min, .xa .appwin .tb-btns .max {
  background-image: var(--g), radial-gradient(circle at 90% 90%, #0054e9 0%, #2263d5 55%, #4479e4 70%, #a3bbec 90%, #fff 100%);
}
.xa .appwin .tb-btns .cls {
  background-image: var(--g), radial-gradient(circle at 90% 90%, #cc4600 0%, #dc6527 55%, #cd7546 70%, #ffccb2 90%, #fff 100%);
}
.xa .appwin .tb-btns .min { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19'%3E%3Crect x='5' y='12' width='7' height='3' fill='%23fff'/%3E%3C/svg%3E"); }
.xa .appwin .tb-btns .max { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19'%3E%3Cpath d='M4.5 4.5h10v10h-10z' fill='none' stroke='%23fff'/%3E%3Crect x='4' y='4' width='11' height='3' fill='%23fff'/%3E%3C/svg%3E"); }
.xa .appwin.maximized .tb-btns .max { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19'%3E%3Cpath d='M7.5 3.5h8v8h-8z' fill='none' stroke='%23fff'/%3E%3Crect x='7' y='3' width='9' height='2' fill='%23fff'/%3E%3Cpath d='M3.5 7.5h8v8h-8z' fill='%230054e9' stroke='%23fff'/%3E%3Crect x='3' y='7' width='9' height='2' fill='%23fff'/%3E%3C/svg%3E"); }
.xa .appwin .tb-btns .cls { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19'%3E%3Cpath d='M5 5l9 9M14 5l-9 9' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.xa .appwin .tb-btns button:hover { filter: brightness(1.15); }
.xa .appwin .tb-btns button:active { filter: brightness(.85); box-shadow: inset 1px 1px 2px rgba(0,0,0,.35); }

/* message box matches */
.xa .win { border: 0; padding: 0 3px 3px; background: #0831d9; box-shadow: 0 0 0 1px #0019cf, 4px 4px 18px rgba(0,0,0,.5); }
.xa .win .titlebar { margin: 0 -3px; height: 30px; font: bold 13px "Trebuchet MS", Tahoma, sans-serif; text-shadow: 1px 1px #0f1089; border-radius: 8px 8px 0 0;
  background: linear-gradient(to bottom, #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%); }
.xa .win .titlebar .x { font-size: 0; width: 21px; height: 21px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19'%3E%3Cpath d='M5 5l9 9M14 5l-9 9' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center no-repeat, radial-gradient(circle at 90% 90%, #cc4600 0%, #dc6527 55%, #cd7546 70%, #ffccb2 90%, #fff 100%); }
.xa .win .content, .xa .win .actions { background: #ece9d8; }

/* XP push buttons: white-to-beige, orange glow on hover, blue ring when focused */
.xa .win .actions button, .xa .appbody button.xp, .xa .xp-btn {
  font: 11px Tahoma, sans-serif; color: #000; min-width: 75px; min-height: 23px; padding: 0 12px;
  border: 1px solid #003c74; border-radius: 3px; cursor: default;
  background: linear-gradient(to bottom, #fff 0%, #ecebe6 86%, #d6d0c5 100%);
  box-shadow: inset -1px -1px 0 rgba(0,0,0,.08);
}
.xa .win .actions button:hover, .xa .xp-btn:hover { box-shadow: inset -1px 1px #fff0cf, inset 1px 2px #fdd889, inset -2px 2px #fbc761, inset 2px -2px #e5a01a; }
.xa .win .actions button:focus-visible, .xa .xp-btn:focus-visible { outline: 1px dotted #000; outline-offset: -4px; box-shadow: inset -1px 1px #cee7ff, inset 1px 2px #98b8ea, inset -2px 2px #bcd4f6, inset 1px -1px #89ade4, inset 2px -2px #89ade4; }
.xa .win .actions button:active, .xa .xp-btn:active { background: linear-gradient(to bottom, #cdcac3, #e3e3db 8%, #e5e5de 94%, #f2f2f1); box-shadow: none; }

/* XP blue scrollbars inside windows */
.xa .appbody ::-webkit-scrollbar, .xa .appbody::-webkit-scrollbar { width: 17px; height: 17px; }
.xa .appbody ::-webkit-scrollbar-track, .xa .appbody::-webkit-scrollbar-track { background: linear-gradient(to right, #eeede5, #f3f1ec 50%, #fefefb); }
.xa .appbody ::-webkit-scrollbar-thumb, .xa .appbody::-webkit-scrollbar-thumb {
  border: 1px solid #fff; border-radius: 3px; box-shadow: inset 0 0 0 1px #b8cbf2;
  background: linear-gradient(to right, #c8d8fb, #b9cdfb 50%, #a8c0f7); }

/* ---------- A: taskbar ---------- */
.xa .taskbar { height: 30px; }
.xa .task-items { gap: 2px; padding: 0 4px; }
.xa .task-btn {
  height: 25px; max-width: 165px; min-width: 120px; border-radius: 2px; border: 0; padding: 0 9px 0 7px;
  background: #3c81f3;
  box-shadow: inset -1px 0 rgba(0,0,0,.3), inset 1px 1px 1px rgba(255,255,255,.2), inset -1px -1px 1px rgba(0,0,0,.25);
}
.xa .task-btn:hover { background: #53a3ff; }
.xa .task-btn.active { background: #1e52b7; box-shadow: inset 0 0 1px 1px rgba(0,0,0,.3), inset 1px 0 1px rgba(0,0,0,.7); }
.xa .task-btn .ti svg { width: 16px; height: 16px; }

/* quick launch strip (added by xp-plus.js) */
.ql { display: none; }
.xa .ql { display: flex; align-items: center; gap: 1px; padding: 0 6px 0 9px; position: relative; }
.xa .ql::before, .xa .ql::after { content: ""; position: absolute; top: 5px; bottom: 5px; width: 2px;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.55) 0 1px, transparent 1px 3px); }
.xa .ql::before { left: 3px; } .xa .ql::after { right: 0; }
.xa .ql button { width: 24px; height: 24px; border: 1px solid transparent; border-radius: 3px; background: none; padding: 0; display: grid; place-items: center; cursor: default; }
.xa .ql button:hover { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.15); }
.xa .ql button:active { background: rgba(0,0,0,.18); }
.xa .ql svg { width: 16px; height: 16px; display: block; filter: drop-shadow(1px 1px 0 rgba(0,0,0,.3)); }

/* tray: chevron + icons */
.xa .tray { gap: 6px; padding: 0 10px 0 6px; border-left: 1px solid #0950aa; }
.tray-x { display: none; }
.xa .tray-x { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; font-size: 10px;
  border: 1px solid rgba(255,255,255,.55); background: radial-gradient(circle at 35% 30%, #5cb4ff, #1a7ae0); }
.xa .tray-ic { display: grid; place-items: center; width: 18px; height: 18px; }
.xa .tray-ic svg { width: 16px; height: 16px; display: block; }

/* ---------- A: desktop icons select like XP (tinted icon, blue label, no box) ---------- */
.xa .icon { border: 0; padding: 6px 3px 6px; }
.xa .icon.selected { background: none; border: 0; }
.xa .icon.selected svg, .xa .icon.selected img { filter: drop-shadow(1px 2px 2px rgba(0,0,0,.4)) brightness(.7) sepia(.9) hue-rotate(180deg) saturate(4); }
.xa .icon.selected .lbl { background: #0b61ff; outline: 1px dotted #f5db95; outline-offset: -1px; }
.xa .icon .lbl { text-shadow: 1px 1px 1px #000, 0 0 3px rgba(0,0,0,.6); }

/* ---------- B: tooltips, context menus, marquee, balloon, minimize zoom ---------- */
.xp-tip { position: fixed; z-index: 2000; pointer-events: none; max-width: 260px; padding: 2px 5px 3px;
  font: 11px Tahoma, sans-serif; color: #000; background: #ffffe1; border: 1px solid #000; box-shadow: 2px 2px 3px rgba(0,0,0,.25); }

.xp-menu { position: fixed; z-index: 1500; min-width: 170px; padding: 2px; font: 11px Tahoma, sans-serif; color: #000;
  background: #fff; border: 1px solid #aca899; box-shadow: 2px 2px 4px rgba(0,0,0,.35); user-select: none; }
.xp-menu .mi { position: relative; display: flex; align-items: center; height: 22px; padding: 0 20px 0 24px; white-space: nowrap; cursor: default; }
.xp-menu .mi b { font-weight: bold; }
.xp-menu .mi:hover:not(.off), .xp-menu .mi.open { background: #316ac5; color: #fff; }
.xp-menu .mi.off { color: #aca899; }
.xp-menu .mi.sub::after { content: ""; position: absolute; right: 8px; top: 8px; border: 4px solid transparent; border-left-color: currentColor; border-right: 0; }
.xp-menu .mi .chk { position: absolute; left: 8px; }
.xp-menu .sep { height: 1px; margin: 3px 1px; background: #aca899; }

.marquee { position: absolute; z-index: 4; pointer-events: none; border: 1px solid #3169c6; background: rgba(49,106,197,.22); }

.balloon { position: fixed; z-index: 1200; width: 280px; padding: 9px 26px 10px 12px; font: 11px/1.45 Tahoma, sans-serif; color: #000;
  background: #ffffe1; border: 1px solid #000; border-radius: 7px; box-shadow: 3px 3px 6px rgba(0,0,0,.3); animation: blIn .25s ease-out; }
.balloon h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 4px; font-size: 11px; }
.balloon h4 i { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #6db4ff, #0b5fd4); color: #fff; font: bold 11px/16px Georgia, serif; text-align: center; font-style: normal; }
.balloon p { margin: 0; }
.balloon .bx { position: absolute; right: 5px; top: 5px; width: 14px; height: 14px; border: 1px solid #aca899; border-radius: 2px; background: #fff; font-size: 9px; line-height: 12px; text-align: center; cursor: default; }
.balloon::after { content: ""; position: absolute; bottom: -14px; right: var(--tail, 40px); border: 7px solid transparent; border-top: 14px solid #ffffe1; border-bottom: 0; filter: drop-shadow(0 1px 0 #000); }
@keyframes blIn { from { opacity: 0; transform: translateY(6px); } }

.zoom-ghost { position: fixed; z-index: 1900; pointer-events: none; border: 2px solid #c3c3c3; mix-blend-mode: difference; }

/* Display Properties dialog */
.dp { padding: 10px; font: 11px Tahoma, sans-serif; color: #000; }
.dp .mon { width: 190px; margin: 4px auto 12px; padding: 10px 10px 18px; border-radius: 6px 6px 2px 2px; background: linear-gradient(#e8e6dc, #c9c5b5); box-shadow: inset 0 0 0 1px #8d8a7d; position: relative; }
.dp .mon i { display: block; height: 104px; border: 1px solid #555; background: #3a6ea5 center/cover; }
.dp .mon::after { content: ""; position: absolute; left: 70px; right: 70px; bottom: -10px; height: 10px; background: linear-gradient(#c9c5b5, #a9a594); border-radius: 0 0 4px 4px; }
.dp label { display: block; margin: 0 0 4px; }
.dp select { width: 100%; height: 120px; font: 11px Tahoma, sans-serif; border: 1px solid #7f9db9; }
.dp .row { display: flex; justify-content: flex-end; gap: 6px; margin-top: 12px; }

@media (max-width: 700px) {
  .xa .appwin .tb-btns button { width: 30px; height: 26px; }   /* fingers: bigger caption buttons */
  .xa .ql, .xa .tray-ic { display: none; }                       /* phones: keep the taskbar for open windows */
  .xa .task-btn { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .balloon { animation: none; } }

/* ============================================================
   Luna colour schemes (html[data-scheme]): Blue is the default above.
   Olive Green and Silver are XP's other two built-in schemes.
   ============================================================ */
/* ---- Olive Green ---- */
[data-scheme=olive].xa .appwin, [data-scheme=olive].xa .win { background: #8aa161; box-shadow: 0 0 0 1px #5d6e3a, 4px 4px 18px rgba(0,0,0,.45); }
[data-scheme=olive].xa .appwin .appbody { border-top-color: #8aa161; }
[data-scheme=olive].xa .appwin .tb, [data-scheme=olive].xa .win .titlebar {
  text-shadow: 1px 1px #4f5e2e;
  background: linear-gradient(to bottom, #c5d5a2 0%, #a9bf83 6%, #97ad6e 12%, #8aa161 40%, #89a05f 60%, #8ea767 80%, #7d9454 94%, #6b8143 100%); }
[data-scheme=olive].xa .appwin.blur { background: #c3cca8; box-shadow: 0 0 0 1px #a6b18a, 3px 3px 12px rgba(0,0,0,.3); }
[data-scheme=olive].xa .appwin.blur .appbody { border-top-color: #c3cca8; }
[data-scheme=olive].xa .appwin.blur .tb { color: #f4f6ec; background: linear-gradient(to bottom, #e2e7d2, #cdd6b4 50%, #bec9a0); }
[data-scheme=olive].xa .appwin .tb-btns .min, [data-scheme=olive].xa .appwin .tb-btns .max {
  background-image: var(--g), radial-gradient(circle at 90% 90%, #6f8a43 0%, #8ea562 55%, #a9be81 70%, #d6e2bd 90%, #fff 100%); }
[data-scheme=olive] .taskbar { background: linear-gradient(to bottom, #c9d9a8 0%, #b2c58c 4%, #9fb576 10%, #93aa6a 50%, #8ba263 88%, #7d9456 100%);
  box-shadow: inset 0 1px 0 #dbe6c4, inset 0 -1px 2px rgba(0,0,0,.2); }
[data-scheme=olive].xa .task-btn { background: #a7bc80; }
[data-scheme=olive].xa .task-btn:hover { background: #b7cb91; }
[data-scheme=olive].xa .task-btn.active { background: #6f8648; }
[data-scheme=olive] .tray { background: linear-gradient(to bottom, #cfdcb0, #b4c78f 50%, #a2b77c); box-shadow: inset 1px 0 0 #e0eacb; }
[data-scheme=olive].xa .tray { border-left-color: #7d9456; }
[data-scheme=olive] .sm-header, [data-scheme=olive] .sm-foot { background: linear-gradient(to bottom, #b7c992, #97ad6e 45%, #87a05e 90%, #93aa6a); }
[data-scheme=olive] .sm-right { background: linear-gradient(to bottom, #eef1e2, #e1e7cc 60%, #d6dfbd); border-left-color: #c3cfa3; }
[data-scheme=olive] .sm-item:hover, [data-scheme=olive] .sm-allprograms:hover, [data-scheme=olive] .apf-item:hover { background: #93a070; }
[data-scheme=olive] .startmenu { border-color: #5d6e3a; }

/* ---- Silver ---- */
[data-scheme=silver].xa .appwin, [data-scheme=silver].xa .win { background: #c6cad9; box-shadow: 0 0 0 1px #8f93ab, 4px 4px 18px rgba(0,0,0,.4); }
[data-scheme=silver].xa .appwin .appbody { border-top-color: #b9bdcf; }
[data-scheme=silver].xa .appwin .tb, [data-scheme=silver].xa .win .titlebar {
  color: #222; text-shadow: 1px 1px rgba(255,255,255,.7);
  background: linear-gradient(to bottom, #fff 0%, #eceef3 8%, #d8dce6 30%, #c6cad9 60%, #b9bdcf 85%, #a6a9be 100%); }
[data-scheme=silver].xa .appwin.blur { background: #e3e4ea; box-shadow: 0 0 0 1px #c3c5d2, 3px 3px 12px rgba(0,0,0,.25); }
[data-scheme=silver].xa .appwin.blur .tb { color: #9b9cae; text-shadow: none; background: linear-gradient(to bottom, #fbfbfc, #ecedf2 60%, #dfe0e8); }
[data-scheme=silver].xa .appwin .tb-btns button { border-color: #8f93ab; }
[data-scheme=silver].xa .appwin .tb-btns .min, [data-scheme=silver].xa .appwin .tb-btns .max {
  background-image: var(--g), linear-gradient(to bottom, #fff, #e3e5ee 50%, #c9ccdb); }
[data-scheme=silver].xa .appwin .tb-btns .min { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19'%3E%3Crect x='5' y='12' width='7' height='3' fill='%23424463'/%3E%3C/svg%3E"); }
[data-scheme=silver].xa .appwin .tb-btns .max { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19'%3E%3Cpath d='M4.5 4.5h10v10h-10z' fill='none' stroke='%23424463'/%3E%3Crect x='4' y='4' width='11' height='3' fill='%23424463'/%3E%3C/svg%3E"); }
[data-scheme=silver] .taskbar { background: linear-gradient(to bottom, #fdfdfe 0%, #e9eaf0 10%, #d6d8e3 50%, #c3c6d5 90%, #aeb1c3 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 2px rgba(0,0,0,.15); }
[data-scheme=silver].xa .task-btn { background: linear-gradient(#fbfbfd, #dcdee8); color: #000; text-shadow: none; box-shadow: inset 0 0 0 1px #9da0b5; }
[data-scheme=silver].xa .task-btn:hover { background: linear-gradient(#fff, #e8e9f0); }
[data-scheme=silver].xa .task-btn.active { background: #c2c5d6; box-shadow: inset 1px 1px 2px rgba(0,0,0,.35), inset 0 0 0 1px #8f93ab; }
[data-scheme=silver] .tray { background: linear-gradient(to bottom, #f4f5f8, #dcdee7 50%, #ccd0dc); color: #000; box-shadow: inset 1px 0 0 #fff; }
[data-scheme=silver] .tray .clock { text-shadow: none; }
[data-scheme=silver].xa .tray { border-left-color: #a2a5b8; }
[data-scheme=silver].xa .ql::before, [data-scheme=silver].xa .ql::after { background: repeating-linear-gradient(to bottom, rgba(0,0,0,.35) 0 1px, transparent 1px 3px); }
[data-scheme=silver] .tray-vol svg path, [data-scheme=silver] .tray-vol svg { filter: invert(.75); }
[data-scheme=silver] .sm-header, [data-scheme=silver] .sm-foot { background: linear-gradient(to bottom, #fbfbfd, #dcdee8 45%, #c6cad9 90%, #d2d5e1); }
[data-scheme=silver] .sm-header .name, [data-scheme=silver] .sm-foot button { color: #222; text-shadow: none; }
[data-scheme=silver] .sm-right { background: linear-gradient(to bottom, #f5f6f9, #e8e9ef 60%, #dfe0e8); border-left-color: #c9cbd7; }
[data-scheme=silver] .sm-right .sm-item { color: #222; }
[data-scheme=silver] .sm-item:hover, [data-scheme=silver] .sm-allprograms:hover, [data-scheme=silver] .apf-item:hover { background: #b2b4c8; color: #000; }
[data-scheme=silver] .startmenu { border-color: #8f93ab; }

/* ---- Date and Time Properties (the tray clock opens it) ---- */
.xa .clock { cursor: default; padding: 2px 3px; border-radius: 2px; }
.xa .clock:hover { background: rgba(255,255,255,.15); }
.dt { padding: 8px 10px 10px; font: 11px Tahoma, sans-serif; color: #000; background: #ece9d8; }
.dt-tabs { display: flex; gap: 0; margin-bottom: -1px; position: relative; z-index: 1; }
.dt-tabs span { padding: 3px 9px 4px; border: 1px solid #919b9c; border-bottom: 0; border-radius: 3px 3px 0 0; background: linear-gradient(#fff, #ecebe5); margin-right: -1px; }
.dt-tabs span.on { background: #fcfcfe; border-top: 2px solid #e68b2c; padding-bottom: 5px; margin-bottom: -1px; }
.dt-page { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px; background: #fcfcfe; border: 1px solid #919b9c; }
.dt fieldset { margin: 0; padding: 6px 8px 8px; border: 1px solid #d0d0bf; border-radius: 4px; }
.dt legend { padding: 0 3px; color: #0046d5; }
.dt-sel { display: flex; gap: 5px; margin-bottom: 6px; }
.dt-sel span { flex: 1; padding: 2px 4px; border: 1px solid #7f9db9; background: #fff; }
.dt-cal { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; border: 1px solid #7f9db9; background: #fff; }
.dt-cal b { padding: 2px 0; font-weight: normal; color: #fff; background: #3a6ea5; }
.dt-cal i { font-style: normal; padding: 2px 0; }
.dt-cal i.today { background: #316ac5; color: #fff; }
.dt-cal i.dim { color: #bbb; }
.dt-clock { display: block; width: 132px; height: 132px; margin: 0 auto 6px; }
.dt-time { display: block; width: 110px; margin: 0 auto; padding: 2px 5px; text-align: center; border: 1px solid #7f9db9; background: #fff; }
.dt-zone { margin: 8px 2px 0; }
.dt .row { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }
@media (max-width: 460px) { .dt-page { grid-template-columns: 1fr; } }