:root {

  --bg: #000000;

  --fg: #c8facc;     /* green foreground base */

  --fg2: #ffd7a8;    /* orange foreground base */

  --muted: #a0a0a0;

  --muted2: #6a6a6a;

  --glow: 0 0 6px currentColor, 0 0 12px currentColor, 0 0 24px currentColor;

  --font-face: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --digit-size: clamp(24px, 6vw, 72px);

  --name-size: clamp(16px, 2.2vw, 28px);

  --toolbar-gap: 10px;

  --ring-size: 14px;

  --ring-thickness: 2px;

  --work-bg: rgba(102, 255, 153, 0.06);

  --work-bg-orange: rgba(255, 184, 102, 0.08);

}



* { box-sizing: border-box; }

html, body { height: 100%; }

body {

  margin: 0;

  background: var(--bg);

  color: #e2e2e2;

  font-family: var(--font-face);

}

.sr-only {

  position: absolute !important;

  width: 1px; height: 1px;

  padding: 0; margin: -1px;

  overflow: hidden; clip: rect(0, 0, 0, 0);

  white-space: nowrap; border: 0;

}



/* Toolbar */

#toolbar {

  position: sticky;

  top: 0;

  z-index: 20;

  display: grid;

  grid-template-columns: auto 1fr auto auto auto auto auto auto auto auto auto auto auto;

  align-items: center;

  gap: var(--toolbar-gap);

  padding: 8px 12px;

  background: #0a0a0a;

  border-bottom: 1px solid #151515;

}

#modeIndicator.modeRealtime { color: #000; background: #9f9; }

#modeIndicator.modeAdjusted { color: #000; background: #ffc266; }



.modeBadge {

  padding: 6px 10px;

  border-radius: 6px;

  font-weight: 600;

  box-shadow: 0 0 0 1px rgba(255,255,255,0.05) inset;

  white-space: nowrap;

}



.controlGroup { display: flex; align-items: center; gap: 8px; }

.toggle12h { }

.jumpGroup input { width: 200px; padding: 6px 8px; background: #0e0e0e; border: 1px solid #1d1d1d; color: #e9e9e9; border-radius: 6px; }

.jumpGroup input::placeholder { color: #6f6f6f; }



/* Buttons */

.btn {

  appearance: none;

  border: 1px solid #1d1d1d;

  background: #141414;

  color: #e9e9e9;

  padding: 8px 12px;

  border-radius: 8px;

  cursor: pointer;

  transition: transform .02s ease, background .2s ease, box-shadow .2s ease;

  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset;

  white-space: nowrap;

}

.btn.small { padding: 6px 8px; }

.btn:hover { background: #1b1b1b; }

.btn:active { transform: translateY(1px); }

.btn[aria-pressed="true"] { background: #1f1f1f; box-shadow: 0 0 0 2px #66ff9980 inset; }

.btn:focus-visible { outline: 2px solid #66ff99; outline-offset: 1px; }



/* Range and number */

input[type="range"] {

  width: min(440px, 100%);

  -webkit-appearance: none;

  appearance: none;

  background: transparent;

  touch-action: none;

}

input[type="range"]:focus { outline: none; }

input[type="range"]::-webkit-slider-runnable-track {

  height: 6px; background: linear-gradient(90deg,#1c1c1c,#333); border-radius: 999px;

}

input[type="range"]::-moz-range-track {

  height: 6px; background: linear-gradient(90deg,#1c1c1c,#333); border-radius: 999px;

}

input[type="range"]::-webkit-slider-thumb {

  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;

  background: #66ff99; box-shadow: 0 0 8px #66ff99aa; margin-top: -6px;

}

input[type="range"]::-moz-range-thumb {

  width: 18px; height: 18px; border-radius: 50%;

  background: #66ff99; box-shadow: 0 0 8px #66ff99aa; border: none;

}



input[type="number"] {

  width: 120px; padding: 6px 8px; background: #0e0e0e; border: 1px solid #1d1d1d; color: #e9e9e9; border-radius: 6px;

}

input[type="number"]:focus { outline: 2px solid #66ff99; outline-offset: 1px; }



/* Menus */

.menu {

  position: absolute;

  margin-top: 6px;

  background: #0f0f0f;

  border: 1px solid #262626;

  border-radius: 8px;

  box-shadow: 0 8px 28px rgba(0,0,0,.4);

  padding: 8px;

  min-width: 220px;

}

.menu-wide { min-width: 260px; }

.menu .menuHeader { font-weight: 700; color: #d0d0d0; margin: 4px 4px 6px; }

.menu .menuDivider { height: 1px; background: #242424; margin: 6px 4px; }

.menu button[role="menuitem"] {

  display: block; width: 100%; text-align: left; padding: 8px; background: transparent; border-radius: 6px; border: none; color: #e9e9e9; cursor: pointer;

}

.menu button[role="menuitem"]:hover { background: #1a1a1a; }

.menu label.menuCheck { display: flex; align-items: center; gap: 8px; padding: 6px 4px; }



/* Grid and rows */

#grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));

  gap: 12px;

  padding: 12px;

}



.clockRow {

  display: flex; align-items: center; justify-content: space-between;

  border: 1px solid #141414; padding: 12px; border-radius: 8px; background: #050505;

}

.clockRow.dragging { opacity: .6; }

.clockRow.dropTarget { outline: 2px dashed #66ff99; }



.clockFace {

  position: relative;

  flex: 0 0 60%;

  font-size: var(--digit-size);

  line-height: 1.1;

  color: var(--fg);

  text-shadow: var(--glow);

  letter-spacing: 0.04em;

  user-select: none;

  padding-right: 8px;

  border-radius: 6px;

}

.clockFace.orange { color: var(--fg2); }

.clockFace.inWork { background: var(--work-bg); }

.clockFace.orange.inWork { background: var(--work-bg-orange); }



.clockFace .headerLine {

  display: flex; align-items: center; gap: 8px;

}

.time {

  display: inline-flex; align-items: center; gap: 8px;

}

.secRing {

  position: relative;

  width: var(--ring-size); height: var(--ring-size);

  border-radius: 50%;

  background:

    conic-gradient(#66ff99 calc(var(--sec,0) * 1deg), #1d1d1d 0);

  box-shadow: 0 0 6px #66ff9980;

}

.clockFace.orange .secRing {

  background:

    conic-gradient(#ffcc88 calc(var(--sec,0) * 1deg), #1d1d1d 0);

  box-shadow: 0 0 6px #ffcc8880;

}

.clockFace .date { display: block; font-size: 0.45em; color: var(--muted); text-shadow: none; margin-top: 6px; }



.statusBadge {

  display: inline-block; margin-top: 6px; padding: 2px 6px; border-radius: 4px;

  font-size: 0.38em; line-height: 1.6; font-weight: 700; color: #000;

}

.badgeAdjusted { background: #ffc266; }

.badgeRealtime { background: #9f9; }



.dayChip {

  display: inline-block; margin-left: 8px; padding: 2px 6px; border-radius: 4px;

  font-size: 0.38em; line-height: 1.6; font-weight: 700; color: #000; background: #d0d0d0;

}



/* Right side */

.clockName { flex: 1; text-align: right; font-size: var(--name-size); color: #e7e7e7; }

.actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }

.copyBtn, .nudgeBtn {

  margin-left: 10px; padding: 6px 10px; font-size: 0.7em;

  border: 1px solid #1d1d1d; background: #101010; color: #e9e9e9; border-radius: 6px; cursor: pointer;

}

.copyBtn:hover, .nudgeBtn:hover { background: #171717; }

.copyBtn:focus-visible, .nudgeBtn:focus-visible { outline: 2px solid #66ff99; outline-offset: 1px; }

.nudgeInfo { display: block; font-size: .7em; color: var(--muted); margin-top: 4px; }



/* Planner */

#planner {

  border-bottom: 1px solid #151515;

  background: #0a0a0a;

  padding: 8px 12px 12px;

}

.plannerRow {

  display: grid; grid-template-columns: 160px 1fr; gap: 10px; align-items: center; padding: 6px 0;

}

.plannerLabel { color: #e7e7e7; text-align: right; padding-right: 6px; }

.plannerBand {

  position: relative; height: 16px; border-radius: 8px; background: #121212; overflow: hidden; border: 1px solid #1d1d1d;

}

.plannerBand::before {

  /* working hours band 09:00–17:00 default; set via CSS vars per row */

  content: ""; position: absolute; top: 0; bottom: 0;

  left: var(--work-start, 37.5%); right: calc(100% - var(--work-end, 70.83%));

  background: linear-gradient(90deg, rgba(102,255,153,.18), rgba(102,255,153,.08));

}

.plannerBand.orange::before {

  background: linear-gradient(90deg, rgba(255,204,136,.2), rgba(255,204,136,.1));

}

.plannerMarker {

  position: absolute; top: -2px; bottom: -2px; width: 2px; background: #66ff99; box-shadow: 0 0 6px #66ff9980;

  left: var(--marker-left, 0%);

}

.plannerBand.orange .plannerMarker { background: #ffcc88; box-shadow: 0 0 6px #ffcc8880; }



/* Toast */

#toast {

  position: fixed; top: 10px; left: 50%; transform: translateX(-50%) translateY(-20px);

  background: #141414; border: 1px solid #2a2a2a; color: #e9e9e9; padding: 8px 12px; border-radius: 8px;

  box-shadow: 0 6px 24px rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease;

  z-index: 40; min-width: 180px; text-align: center;

}

#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }



/* Modal */

#helpModal[hidden] { display: none; }

#helpModal {

  position: fixed; inset: 0; background: rgba(0,0,0,.6); display: grid; place-items: center; z-index: 50;

}

.modalCard {

  width: min(900px, 92vw); max-height: 86vh; overflow: hidden; background: #0f0f0f; border: 1px solid #262626; border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.6);

}

.modalHeader, .modalFooter { padding: 10px 12px; border-bottom: 1px solid #1e1e1e; }

.modalFooter { border-top: 1px solid #1e1e1e; border-bottom: none; }

.modalHeader { display: flex; justify-content: space-between; align-items: center; }

.modalBody { padding: 12px 16px; overflow: auto; line-height: 1.6; }

.modalBody ul { margin-top: 6px; }



#kioskHint[hidden] { display: none; }

#kioskHint { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: grid; place-items: center; z-index: 60; }

.hintCard { background: #0f0f0f; border: 1px solid #262626; padding: 20px; border-radius: 10px; text-align: center; }



/* Dense Mode */

body.dense :root { --digit-size: clamp(20px, 4.8vw, 60px); }

body.dense #grid { gap: 8px; padding: 8px; }

body.dense .clockRow { padding: 10px; }

body.dense .plannerRow { grid-template-columns: 120px 1fr; }



/* Color-blind Palette */

body.palette-hc {

  --fg: #a1e2ff; /* cyan-ish */

  --fg2: #ffe3a1; /* soft amber */

}

body.palette-hc .secRing {

  background: conic-gradient(#8fd3ff calc(var(--sec,0) * 1deg), #1d1d1d 0);

  box-shadow: 0 0 6px #8fd3ff80;

}

body.palette-hc .clockFace.orange .secRing {

  background: conic-gradient(#ffe3a1 calc(var(--sec,0) * 1deg), #1d1d1d 0);

  box-shadow: 0 0 6px #ffe3a180;

}



/* Kiosk */

body.kiosk #toolbar { display: none; }

body.kiosk #planner { border-bottom: none; }



/* Responsiveness */

@media (max-width: 1200px) {

  #toolbar { grid-template-columns: auto 1fr auto auto auto auto auto auto auto; }

}

@media (max-width: 920px) {

  #toolbar { grid-template-columns: auto 1fr auto auto auto auto auto; }

  .jumpGroup { grid-column: 1 / -1; }

}

@media (max-width: 420px) {

  input[type="number"] { width: 100px; }

  #grid { grid-template-columns: 1fr; }

}