:root {
  --ink: #202237;
  --muted: #6c708c;
  --paper: #ffffff;
  --paper-soft: #f5f6fb;
  --line: #e4e6ef;
  --purple: #6967e8;
  --purple-dark: #5653d9;
  --purple-soft: #eeedff;
  --green: #8ee95c;
  --danger: #ed5e78;
  --shadow: 0 18px 50px rgba(24, 29, 63, 0.22);
  --widget-shadow: 0 12px 38px rgba(27, 34, 58, 0.24);
  --dock-bottom: 22px;
  color-scheme: light;
  font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(140, 237, 86, 0.82);
  outline-offset: 3px;
}

.app {
  position: relative;
  width: 100vw;
  height: 100vh;
  isolation: isolate;
  overflow: hidden;
  background: #344b50;
  color: var(--ink);
}

.background,
.background-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.background {
  z-index: -3;
  background: url("background.svg") center / cover no-repeat;
  transition: background 400ms ease, filter 400ms ease, transform 800ms ease;
  transform: scale(1.015);
}

.background-shade {
  z-index: -2;
  background: linear-gradient(180deg, rgba(12, 23, 36, 0.17), rgba(12, 23, 36, 0.02) 44%, rgba(12, 23, 36, 0.25));
}

.app[data-background="dawn"] .background {
  background:
    radial-gradient(circle at 77% 25%, rgba(255, 242, 187, 0.95) 0 4%, transparent 12%),
    linear-gradient(156deg, transparent 48%, rgba(74, 69, 96, 0.75) 49% 61%, transparent 62%),
    linear-gradient(30deg, transparent 52%, rgba(55, 85, 103, 0.85) 53% 67%, transparent 68%),
    linear-gradient(180deg, #e7a7ae 0%, #eed0bd 42%, #547a86 43%, #203f52 100%);
}

.app[data-background="paper"] .background {
  background-color: #f3eee4;
  background-image:
    linear-gradient(rgba(80, 79, 103, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80, 79, 103, 0.075) 1px, transparent 1px);
  background-size: 31px 31px;
}

.app[data-background="mint"] .background {
  background:
    radial-gradient(circle at 17% 23%, rgba(255, 255, 255, 0.5) 0 5%, transparent 5.3%),
    radial-gradient(circle at 86% 75%, rgba(255, 255, 255, 0.35) 0 8%, transparent 8.3%),
    linear-gradient(135deg, #90dcc2, #70bfb8 52%, #4d9fa8);
}

.app[data-background="peach"] .background {
  background:
    radial-gradient(circle at 24% 82%, #f5aa7b 0 18%, transparent 18.3%),
    radial-gradient(circle at 80% 13%, #ffd28f 0 21%, transparent 21.3%),
    linear-gradient(135deg, #f9d9d0, #eeadac 46%, #c385af);
}

.app[data-background="night"] .background {
  background:
    radial-gradient(circle at 20% 22%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 72% 31%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 42% 65%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 91% 72%, #fff 0 1px, transparent 2px),
    linear-gradient(155deg, transparent 55%, #192d3f 56%),
    linear-gradient(180deg, #17182f 0%, #283759 64%, #101f2c 100%);
  background-size: 170px 150px, 230px 210px, 190px 180px, 260px 230px, 100% 100%, 100% 100%;
}

.app[data-background="lavender"] .background {
  background:
    repeating-radial-gradient(circle at 20% 30%, transparent 0 22px, rgba(255, 255, 255, 0.14) 23px 25px),
    linear-gradient(140deg, #8e89d6, #756bc5 45%, #544e9c);
}

.app.custom-background .background {
  background-image: var(--custom-background);
  background-position: center;
  background-size: cover;
}

.workspace {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
}

.topbar {
  position: absolute;
  z-index: 5000;
  top: 18px;
  left: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.topbar-cluster {
  display: flex;
  align-items: center;
  gap: 9px;
  pointer-events: auto;
}

.glass-button,
.screen-title,
.screen-navigation,
.drawing-tools {
  background: rgba(32, 34, 54, 0.82);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 9px 24px rgba(17, 24, 44, 0.22);
  backdrop-filter: blur(13px) saturate(1.2);
  -webkit-backdrop-filter: blur(13px) saturate(1.2);
}

.glass-button {
  position: relative;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border-radius: 13px;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease;
}

.glass-button:hover {
  background: rgba(44, 47, 75, 0.96);
  transform: translateY(-2px);
}

.glass-button svg,
.screen-navigation svg,
.dock-icon svg,
.widget-tool svg,
.icon-button svg,
.draw-tool svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  z-index: 100;
  width: max-content;
  max-width: 180px;
  padding: 7px 9px;
  border-radius: 7px;
  background: rgba(26, 28, 45, 0.94);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition: opacity 140ms ease, transform 140ms ease;
}

[data-tooltip]:hover::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.top-actions [data-tooltip]::after {
  left: auto;
  right: 0;
  transform: translate(0, -4px);
}

.top-actions [data-tooltip]:hover::after {
  transform: translate(0, 0);
}

.brand-button {
  overflow: hidden;
  background: #6b68e8;
}

.brand-button:hover {
  background: #7774ee;
}

.brand-symbol {
  position: relative;
  width: 28px;
  height: 28px;
  border: 5px solid #9bef61;
  border-right-color: transparent;
  border-radius: 50%;
  transform: rotate(16deg);
}

.brand-symbol i:first-child {
  position: absolute;
  right: 0;
  bottom: 2px;
  width: 9px;
  height: 9px;
  border: 4px solid #fff;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
}

.brand-symbol i:last-child {
  position: absolute;
  right: -4px;
  bottom: -1px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff6788;
}

.screen-title {
  display: flex;
  min-width: 142px;
  height: 44px;
  padding: 0 12px 0 15px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-radius: 13px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 650;
}

.screen-title:hover {
  background: rgba(44, 47, 75, 0.96);
}

.screen-count {
  padding: 4px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.13);
  color: rgba(255, 255, 255, 0.74);
  font-size: 10px;
  font-weight: 600;
}

.widget-dock {
  position: absolute;
  z-index: 4800;
  left: 50%;
  bottom: var(--dock-bottom);
  display: flex;
  height: 84px;
  max-width: calc(100vw - 190px);
  padding: 8px 10px;
  align-items: stretch;
  gap: 2px;
  border: 1px solid rgba(226, 227, 238, 0.88);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 42px rgba(23, 28, 52, 0.27);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  transform: translateX(-50%);
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), opacity 200ms ease;
}

.app.dock-hidden .widget-dock {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(100% + 35px));
}

.dock-item {
  position: relative;
  display: flex;
  width: 65px;
  min-width: 54px;
  padding: 5px 3px 4px;
  flex: 1 1 60px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #555972;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}

.dock-item:hover,
.dock-item.active {
  background: var(--purple-soft);
  color: var(--purple-dark);
  transform: translateY(-2px);
}

.dock-item.active::before {
  content: "";
  position: absolute;
  top: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--purple);
}

.dock-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
}

.dock-icon svg {
  width: 25px;
  height: 25px;
}

.dock-label {
  width: 100%;
  overflow: hidden;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dock-separator {
  width: 1px;
  margin: 8px 4px;
  background: #e6e7ee;
}

.screen-navigation {
  position: absolute;
  z-index: 4800;
  right: 18px;
  bottom: 28px;
  display: flex;
  height: 52px;
  padding: 5px;
  align-items: center;
  gap: 2px;
  border-radius: 15px;
}

.screen-navigation button {
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.screen-navigation button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.14);
}

.screen-navigation button:disabled {
  opacity: 0.35;
  cursor: default;
}

.screen-navigation .screen-indicator {
  width: 32px;
  background: rgba(255, 255, 255, 0.13);
  font-size: 12px;
  font-weight: 700;
}

.widget {
  position: absolute;
  z-index: 10;
  min-width: 150px;
  min-height: 110px;
  border: 2px solid transparent;
  border-radius: 15px;
  color: var(--ink);
  filter: drop-shadow(0 12px 20px rgba(16, 22, 42, 0.12));
  touch-action: none;
  user-select: none;
}

.widget.selected {
  border-color: #706eea;
  filter: drop-shadow(0 13px 23px rgba(35, 38, 82, 0.2));
}

.widget.locked.selected {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.8);
}

.widget-content {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 25px rgba(26, 30, 57, 0.18);
}

.widget[data-theme="purple"] .widget-content {
  background: #6d6ae8;
  color: #fff;
}

.widget[data-theme="mint"] .widget-content {
  background: #cdf5df;
  color: #26493f;
}

.widget[data-theme="coral"] .widget-content {
  background: #ffbdaf;
  color: #63352f;
}

.widget[data-theme="night"] .widget-content {
  background: #262944;
  color: #fff;
}

.widget-toolbar {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  display: none;
  height: 38px;
  padding: 4px;
  gap: 2px;
  border-radius: 10px;
  background: #6967df;
  color: #fff;
  box-shadow: 0 8px 22px rgba(23, 26, 68, 0.27);
  transform: translateX(-50%);
  white-space: nowrap;
}

.widget.selected .widget-toolbar {
  display: flex;
}

.widget-tool {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.widget-tool:hover {
  background: rgba(255, 255, 255, 0.16);
}

.widget-tool svg {
  width: 17px;
  height: 17px;
}

.resize-handle {
  position: absolute;
  z-index: 5;
  display: none;
  width: 12px;
  height: 12px;
  border: 2px solid #6e6be5;
  border-radius: 50%;
  background: #fff;
}

.widget.selected:not(.locked) .resize-handle {
  display: block;
}

.resize-handle.nw { top: -7px; left: -7px; cursor: nwse-resize; }
.resize-handle.ne { top: -7px; right: -7px; cursor: nesw-resize; }
.resize-handle.sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.resize-handle.se { right: -7px; bottom: -7px; cursor: nwse-resize; }

.widget-header {
  display: flex;
  height: 38px;
  padding: 0 13px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(94, 98, 124, 0.13);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.widget-header span:last-child {
  opacity: 0.48;
}

.text-widget {
  height: 100%;
  padding: 20px 22px;
  overflow: auto;
  cursor: text;
  font-size: clamp(18px, 2vw, 31px);
  font-weight: 690;
  line-height: 1.42;
  user-select: text;
  white-space: pre-wrap;
}

.text-widget:focus {
  outline: none;
}

.text-widget:empty::before {
  content: "여기에 내용을 입력하세요";
  opacity: 0.42;
}

.clock-widget,
.timer-widget,
.stopwatch-widget {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.digital-time,
.timer-display,
.stopwatch-display {
  font-size: clamp(32px, 4.8vw, 66px);
  font-weight: 760;
  line-height: 1;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
}

.clock-date {
  font-size: clamp(11px, 1.2vw, 16px);
  font-weight: 600;
  opacity: 0.66;
}

.analog-clock {
  position: relative;
  width: min(75%, 170px);
  aspect-ratio: 1;
  border: 7px solid currentColor;
  border-radius: 50%;
  opacity: 0.9;
}

.clock-hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 3px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: 50% 100%;
}

.clock-hand.hour { height: 27%; }
.clock-hand.minute { height: 37%; width: 2px; }
.clock-hand.second { height: 39%; width: 1px; background: #f15d78; }

.analog-clock::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.widget-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.control-button,
.primary-button,
.secondary-button,
.chip,
.panel-close,
.icon-button {
  border: 0;
  cursor: pointer;
}

.control-button {
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border-radius: 50%;
  background: rgba(52, 55, 79, 0.09);
  color: inherit;
}

.control-button.primary {
  background: var(--purple);
  color: #fff;
}

.control-button svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  stroke: none;
}

.timer-adjust {
  display: flex;
  gap: 5px;
}

.timer-adjust button {
  padding: 4px 7px;
  border: 0;
  border-radius: 7px;
  background: rgba(52, 55, 79, 0.08);
  color: inherit;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
}

.traffic-widget {
  display: grid;
  width: 100%;
  height: 100%;
  padding: 16px;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: #282a3f;
}

.traffic-light {
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  opacity: 0.25;
  cursor: pointer;
  box-shadow: inset 0 -7px 12px rgba(0, 0, 0, 0.22);
  transition: opacity 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.traffic-light:hover { transform: scale(1.04); }
.traffic-light.active { opacity: 1; box-shadow: 0 0 28px currentColor, inset 0 -7px 12px rgba(0, 0, 0, 0.18); }
.traffic-light.red { color: #ff546b; background: #ff546b; }
.traffic-light.yellow { color: #ffc93d; background: #ffc93d; }
.traffic-light.green { color: #67e26f; background: #67e26f; }

.dice-widget {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 14px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  cursor: pointer;
}

.die {
  display: grid;
  width: min(42%, 112px);
  aspect-ratio: 1;
  padding: 13%;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  place-items: center;
  border: 1px solid rgba(32, 34, 55, 0.11);
  border-radius: 17%;
  background: #fff;
  box-shadow: 0 8px 18px rgba(21, 25, 50, 0.13);
}

.die-dot {
  width: 65%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #3b3d59;
}

.dice-hint {
  position: absolute;
  right: 10px;
  bottom: 7px;
  font-size: 9px;
  opacity: 0.5;
}

.random-widget,
.groups-widget,
.poll-widget {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 18px;
  flex-direction: column;
  justify-content: center;
  gap: 11px;
}

.groups-result {
  display: grid;
  width: 100%;
  height: 100%;
  padding: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  overflow: auto;
}

.groups-result article {
  padding: 10px;
  border-radius: 10px;
  background: rgba(83, 87, 119, 0.08);
}

.groups-result strong {
  color: var(--purple-dark);
  font-size: 11px;
}

.groups-result p {
  margin: 5px 0 0;
  font-size: clamp(9px, 1vw, 12px);
  font-weight: 620;
  line-height: 1.45;
}

.groups-result > button {
  min-height: 32px;
  border: 0;
  border-radius: 9px;
  background: var(--purple);
  color: #fff;
  cursor: pointer;
  font-size: 10px;
  font-weight: 750;
}

.random-name {
  overflow: hidden;
  font-size: clamp(24px, 3.4vw, 48px);
  font-weight: 780;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.primary-button,
.secondary-button {
  min-height: 39px;
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 720;
}

.primary-button {
  background: var(--purple);
  color: #fff;
}

.primary-button:hover { background: var(--purple-dark); }

.secondary-button {
  background: #eff0f6;
  color: #454963;
}

.widget[data-theme="purple"] .secondary-button,
.widget[data-theme="night"] .secondary-button {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.work-widget {
  display: grid;
  width: 100%;
  height: 100%;
  padding: 14px;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.work-mode {
  display: flex;
  padding: 8px 4px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 12px;
  background: rgba(67, 70, 100, 0.07);
  color: inherit;
  cursor: pointer;
  opacity: 0.55;
}

.work-mode.active {
  background: var(--purple-soft);
  color: var(--purple-dark);
  opacity: 1;
}

.work-mode .work-emoji { font-size: clamp(24px, 3vw, 43px); }
.work-mode small { font-size: 9px; font-weight: 750; }

.calendar-widget {
  display: grid;
  width: 100%;
  height: 100%;
  padding: 14px;
  grid-template-rows: auto 1fr;
  gap: 7px;
}

.calendar-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 750;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  font-size: clamp(9px, 1vw, 12px);
  text-align: center;
}

.calendar-grid span {
  display: grid;
  min-height: 18px;
  place-items: center;
  border-radius: 5px;
}

.calendar-grid .weekday { font-size: 8px; font-weight: 700; opacity: 0.48; }
.calendar-grid .muted-day { opacity: 0.2; }
.calendar-grid .today { background: var(--purple); color: #fff; font-weight: 800; }

.sound-widget {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 20px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
}

.sound-meter {
  display: flex;
  width: 88%;
  height: 64px;
  align-items: end;
  justify-content: center;
  gap: 5px;
}

.sound-bar {
  width: 8%;
  min-width: 5px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.18;
  transition: height 100ms linear, opacity 100ms linear, background 100ms linear;
}

.sound-bar.live { opacity: 0.85; }

.sound-label { font-size: 11px; font-weight: 700; opacity: 0.64; }

.scoreboard-widget {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}

.score-team {
  display: flex;
  padding: 15px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.score-team:first-child { background: #6b68e7; color: #fff; }
.score-team:last-child { background: #ff7990; color: #fff; }
.score-name { border: 0; background: transparent; color: inherit; text-align: center; width: 90%; font-weight: 750; }
.score-number { font-size: clamp(37px, 5vw, 72px); font-weight: 800; line-height: 1; }
.score-actions { display: flex; gap: 6px; }
.score-actions button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; cursor: pointer; }

.poll-question {
  overflow: hidden;
  font-size: clamp(14px, 1.7vw, 22px);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.poll-options {
  display: grid;
  gap: 6px;
}

.poll-option {
  position: relative;
  display: grid;
  min-height: 34px;
  padding: 0 11px;
  overflow: hidden;
  grid-template-columns: 1fr auto;
  align-items: center;
  border: 1px solid rgba(70, 74, 103, 0.12);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.42);
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.poll-option i {
  position: absolute;
  z-index: 0;
  inset: 0 auto 0 0;
  background: rgba(105, 103, 232, 0.2);
  transition: width 260ms ease;
}

.poll-option span,
.poll-option b {
  z-index: 1;
  font-size: 10px;
}

.poll-widget > small,
.random-count {
  text-align: center;
  opacity: 0.5;
  font-size: 9px;
  font-weight: 650;
}

.qr-widget {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 16px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.qr-grid {
  display: grid;
  width: min(78%, 180px);
  aspect-ratio: 1;
  padding: 6px;
  grid-template-columns: repeat(21, 1fr);
  grid-template-rows: repeat(21, 1fr);
  background: #fff;
  box-shadow: 0 4px 13px rgba(20, 23, 42, 0.14);
}

.qr-grid i.filled {
  background: #1f2134;
}

.qr-value {
  width: 90%;
  overflow: hidden;
  font-size: 9px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.58;
}

.timetable-widget {
  width: 100%;
  height: 100%;
}

.timetable-rows {
  display: grid;
  height: calc(100% - 38px);
  align-content: stretch;
}

.timetable-rows > div {
  display: grid;
  min-height: 32px;
  padding: 0 13px;
  grid-template-columns: 62px 1fr;
  align-items: center;
  border-bottom: 1px solid rgba(80, 84, 113, 0.11);
}

.timetable-rows time {
  color: var(--purple-dark);
  font-size: clamp(9px, 1vw, 12px);
  font-weight: 800;
}

.timetable-rows span {
  font-size: clamp(10px, 1.2vw, 14px);
  font-weight: 650;
}

.visual-timer-widget {
  display: grid;
  width: 100%;
  height: 100%;
  padding: 13px;
  place-items: center;
}

.visual-timer-ring {
  --progress: 0deg;
  position: relative;
  display: grid;
  width: min(80%, 180px);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#6b68e7 0 var(--progress), rgba(70,73,103,.12) var(--progress) 360deg);
}

.visual-timer-ring::before {
  content: "";
  width: 76%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: inherit;
  background-color: #fff;
  box-shadow: inset 0 0 0 1px rgba(48,52,80,.08);
}

.visual-timer-time {
  position: absolute;
  font-size: clamp(20px, 2.5vw, 34px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.drawer {
  position: absolute;
  z-index: 5100;
  left: 50%;
  bottom: 118px;
  width: min(850px, calc(100vw - 34px));
  max-height: min(610px, calc(100vh - 150px));
  padding: 22px;
  overflow: auto;
  border: 1px solid rgba(231, 232, 240, 0.9);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 16px) scale(0.98);
  transition: opacity 180ms ease, transform 180ms ease;
}

.drawer.open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}

.drawer-header,
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drawer-header { margin-bottom: 17px; }
.drawer-title,
.panel-title { margin: 0; font-size: 19px; font-weight: 790; letter-spacing: -0.02em; }
.drawer-subtitle,
.panel-subtitle { margin: 4px 0 0; color: var(--muted); font-size: 12px; }

.panel-close,
.icon-button {
  display: grid;
  width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
  border-radius: 10px;
  background: #f0f1f6;
  color: #4e526b;
}

.widget-gallery {
  display: grid;
  grid-template-columns: repeat(5, minmax(100px, 1fr));
  gap: 10px;
}

.gallery-item {
  display: flex;
  min-height: 105px;
  padding: 14px 8px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid #e6e7ef;
  border-radius: 14px;
  background: #fff;
  color: #4f536d;
  cursor: pointer;
  transition: transform 150ms ease, border 150ms ease, box-shadow 150ms ease, color 150ms ease;
}

.gallery-item:hover {
  z-index: 1;
  border-color: #908dec;
  color: var(--purple-dark);
  box-shadow: 0 9px 22px rgba(73, 70, 155, 0.13);
  transform: translateY(-3px);
}

.gallery-item svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gallery-item span { font-size: 11px; font-weight: 720; }

.side-panel {
  position: absolute;
  z-index: 5200;
  top: 12px;
  right: 12px;
  bottom: 12px;
  width: min(390px, calc(100vw - 24px));
  padding: 24px;
  overflow: auto;
  border: 1px solid rgba(231, 232, 240, 0.9);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.985);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateX(calc(100% + 25px));
  transition: opacity 190ms ease, transform 240ms cubic-bezier(.2,.8,.2,1);
}

.side-panel.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.panel-backdrop {
  position: absolute;
  z-index: 5050;
  inset: 0;
  background: rgba(17, 20, 37, 0.17);
  opacity: 0;
  pointer-events: none;
  transition: opacity 170ms ease;
}

.panel-backdrop.open { opacity: 1; pointer-events: auto; }

.panel-section { margin-top: 24px; }
.panel-section-title { margin: 0 0 11px; font-size: 12px; font-weight: 800; }

.background-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}

.background-option {
  position: relative;
  height: 92px;
  overflow: hidden;
  border: 3px solid transparent;
  border-radius: 13px;
  background: #ddd;
  cursor: pointer;
}

.background-option.active { border-color: var(--purple); }
.background-option::after { content: attr(data-name); position: absolute; left: 8px; bottom: 7px; padding: 4px 7px; border-radius: 6px; background: rgba(23,25,42,.7); color: #fff; font-size: 9px; font-weight: 700; }
.background-option[data-bg="lake"] { background: url("background.svg") center / cover; }
.background-option[data-bg="dawn"] { background: linear-gradient(160deg, #e3a1aa, #f2d6bc 48%, #395f6f 49%, #1f4051); }
.background-option[data-bg="paper"] { background-color:#f3eee4; background-image:linear-gradient(#8b84921a 1px,transparent 1px),linear-gradient(90deg,#8b84921a 1px,transparent 1px);background-size:15px 15px; }
.background-option[data-bg="mint"] { background: linear-gradient(135deg,#90dcc2,#70bfb8 52%,#4d9fa8); }
.background-option[data-bg="peach"] { background: linear-gradient(135deg,#f9d9d0,#eeadac 46%,#c385af); }
.background-option[data-bg="night"] { background: linear-gradient(180deg,#17182f,#283759 64%,#101f2c); }
.background-option[data-bg="lavender"] { background: linear-gradient(140deg,#8e89d6,#756bc5 45%,#544e9c); }
.background-option.upload { display: grid; place-items:center; border: 1px dashed #b8bac9; background: #f6f6fa; color:#5e627b; }
.background-option.upload::after { display:none; }
.background-option.upload span { font-size:11px;font-weight:700; }

.form-row { display: grid; gap: 7px; margin-top: 14px; }
.form-row label { color: #5e627b; font-size: 11px; font-weight: 700; }
.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  min-height: 43px;
  padding: 10px 12px;
  border: 1px solid #dfe1ea;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
}
.form-row textarea { min-height: 130px; resize: vertical; line-height: 1.5; }

.setting-row {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #ececf2;
}
.setting-label strong { display: block; font-size: 12px; }
.setting-label small { color: var(--muted); font-size: 10px; }

.switch { position: relative; width: 42px; height: 24px; flex: 0 0 auto; }
.switch input { position:absolute; opacity:0; }
.switch span { position:absolute; inset:0; border-radius:99px; background:#cfd1dc; transition:background 160ms ease; cursor:pointer; }
.switch span::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 2px 5px #15172d33; transition:transform 160ms ease; }
.switch input:checked + span { background:var(--purple); }
.switch input:checked + span::after { transform:translateX(18px); }

.danger-button { width:100%; min-height:43px; border:1px solid #ffd2da; border-radius:10px; background:#fff2f4; color:#cd425a; cursor:pointer; font-size:11px;font-weight:750; }

.theme-options {
  display: flex;
  gap: 9px;
}

.theme-chip {
  display: grid;
  width: 42px;
  height: 42px;
  padding: 3px;
  place-items: center;
  border: 2px solid transparent;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.theme-chip.active { border-color: var(--purple); }
.theme-chip i { width: 30px; height: 30px; border: 1px solid rgba(28,31,54,.12); border-radius: 50%; background: #fff; }
.theme-chip[data-theme-value="purple"] i { background:#6d6ae8; }
.theme-chip[data-theme-value="mint"] i { background:#cdf5df; }
.theme-chip[data-theme-value="coral"] i { background:#ffbdaf; }
.theme-chip[data-theme-value="night"] i { background:#262944; }

.screen-list {
  display: grid;
  gap: 8px;
}

.screen-card {
  display: grid;
  min-height: 68px;
  padding: 9px 12px;
  grid-template-columns: 42px 1fr 24px;
  align-items: center;
  gap: 10px;
  border: 1px solid #e5e6ee;
  border-radius: 13px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.screen-card.active {
  border-color: #8d8aed;
  background: #f5f4ff;
}

.screen-card > i {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, #7fc6bd, #385d68);
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.screen-card span strong,
.screen-card span small { display:block; }
.screen-card span strong { font-size:12px; }
.screen-card span small { margin-top:3px;color:var(--muted);font-size:9px; }
.screen-card svg { width:18px;height:18px;fill:none;stroke:var(--purple);stroke-width:2; }

.add-screen-panel {
  display: flex;
  width: 100%;
  margin-top: 13px;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.add-screen-panel svg { width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2; }

.drawing-tools {
  position: absolute;
  z-index: 4900;
  left: 18px;
  bottom: 28px;
  display: none;
  height: 52px;
  padding: 5px;
  align-items: center;
  gap: 3px;
  border-radius: 15px;
}

.app.drawing .drawing-tools { display: flex; }

.draw-tool {
  position: relative;
  display: grid;
  width: 39px;
  height: 39px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.draw-tool:hover,
.draw-tool.active { background: rgba(255, 255, 255, 0.16); }
.draw-color { width:21px;height:21px;border:3px solid #fff;border-radius:50%;background:var(--draw-color,#ff526e); }

.draw-canvas {
  position: absolute;
  z-index: 4500;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}

.app.drawing .draw-canvas { display: block; }

.screen-blur {
  position: absolute;
  z-index: 9000;
  inset: 0;
  display: flex;
  padding: 20px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(33, 35, 58, 0.96);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
  cursor: pointer;
}

.screen-blur.open { opacity:1; pointer-events:auto; }
.screen-blur p { margin:22px 0 5px; font-size:22px; font-weight:760; }
.screen-blur small { opacity:.62; font-size:12px; }
.blur-mark { display:grid;width:82px;height:82px;place-items:center;border:12px solid #99ee60;border-right-color:#6f6cec;border-radius:50%;transform:rotate(18deg); }
.blur-mark span { width:28px;height:17px;border:8px solid #fff;border-top:0;border-left-color:transparent;border-radius:0 0 50px 50px;transform:rotate(-18deg); }

.toast {
  position: absolute;
  z-index: 10000;
  left: 18px;
  bottom: 122px;
  max-width: min(360px, calc(100vw - 36px));
  padding: 12px 16px;
  border-radius: 11px;
  background: rgba(31, 33, 52, 0.94);
  color: #fff;
  box-shadow: 0 10px 25px rgba(17, 20, 40, 0.25);
  font-size: 12px;
  font-weight: 620;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.show { opacity:1; transform:translateY(0); }

.confetti {
  position: fixed;
  z-index: 11000;
  top: -12px;
  width: 10px;
  height: 18px;
  border-radius: 2px;
  pointer-events: none;
  animation: confetti-fall 1.8s cubic-bezier(.18,.75,.45,1) forwards;
}

@keyframes confetti-fall {
  to { transform: translate(var(--drift), calc(100vh + 60px)) rotate(var(--spin)); opacity: .2; }
}

.widget.shuffling .random-name { animation: shuffle-name 100ms linear infinite; }
.widget.rolling .die { animation: roll-die 450ms cubic-bezier(.2,.8,.2,1); }

@keyframes shuffle-name { 50% { transform: translateY(-2px); opacity:.55; } }
@keyframes roll-die { 35% { transform:scale(.82) rotate(-8deg); } 70% { transform:scale(1.08) rotate(5deg); } }

.app.dark-ui .glass-button,
.app.dark-ui .screen-title,
.app.dark-ui .screen-navigation,
.app.dark-ui .drawing-tools { background: rgba(16,18,32,.92); }

@media (max-width: 980px) {
  .dock-item { width: 56px; }
  .widget-gallery { grid-template-columns:repeat(4,minmax(90px,1fr)); }
}

@media (max-width: 720px) {
  .topbar { top:10px;left:10px;right:10px; }
  .screen-title { display:none; }
  .glass-button { width:40px;height:40px;border-radius:12px; }
  .top-actions { gap:5px; }
  .widget-dock { left:10px;right:10px;bottom:10px;width:auto;max-width:none;height:73px;overflow-x:auto;transform:none;justify-content:flex-start; }
  .app.dock-hidden .widget-dock { transform:translateY(calc(100% + 20px)); }
  .dock-item { min-width:57px; flex:0 0 57px; }
  .dock-label { font-size:9px; }
  .screen-navigation { right:10px;bottom:92px; }
  .drawer { bottom:92px; }
  .widget-gallery { grid-template-columns:repeat(3,minmax(82px,1fr)); }
  .toast { left:10px;bottom:94px; }
}

@media (max-width: 460px) {
  .widget-gallery { grid-template-columns:repeat(2,minmax(90px,1fr)); }
  .side-panel { top:6px;right:6px;bottom:6px;width:calc(100vw - 12px);padding:20px; }
  .screen-navigation { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ========================================================================== */
/* Classboard 2 — refined spatial materials + Windows eras                    */
/* ========================================================================== */

:root {
  --ink: #151722;
  --muted: #686b78;
  --paper: rgba(255, 255, 255, 0.92);
  --paper-soft: #f4f4f7;
  --line: rgba(48, 50, 61, 0.11);
  --purple: #6157e8;
  --purple-dark: #4b40d1;
  --purple-soft: #eeecff;
  --green: #55d35a;
  --danger: #ff4564;
  --cyan: #08a8bd;
  --material: rgba(251, 251, 253, 0.82);
  --material-strong: rgba(255, 255, 255, 0.94);
  --material-dark: rgba(24, 25, 32, 0.74);
  --hairline: rgba(255, 255, 255, 0.52);
  --shadow: 0 34px 90px rgba(10, 15, 29, 0.28), 0 4px 20px rgba(10, 15, 29, 0.12);
  --widget-shadow: 0 24px 56px rgba(10, 15, 29, 0.22), 0 2px 8px rgba(10, 15, 29, 0.1);
  --dock-bottom: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Pretendard, "Apple SD Gothic Neo", "Segoe UI", sans-serif;
}

::selection {
  background: rgba(97, 87, 232, 0.24);
  color: #12131d;
}

button,
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
}

button:active:not(:disabled) {
  transform: scale(0.96);
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(93, 174, 255, 0.78);
  outline-offset: 3px;
}

.app {
  background: #0b2c58;
  letter-spacing: -0.012em;
}

.background {
  transform: scale(1.008);
  transition: background 600ms cubic-bezier(.22,.72,.18,1), filter 600ms ease, transform 1.2s cubic-bezier(.22,.72,.18,1);
}

.background-shade {
  background:
    linear-gradient(180deg, rgba(4, 10, 24, 0.18), transparent 20%, transparent 68%, rgba(4, 10, 24, 0.2)),
    radial-gradient(circle at 50% 42%, transparent 35%, rgba(6, 12, 28, 0.09) 100%);
}

.widget[data-type="work"] { container-type: size; }

/* The existing values remain compatible; era names can be introduced freely. */
.app[data-background="lake"] .background,
.app[data-background="xp"] .background,
.app[data-background="bliss"] .background,
.app[data-background="windows-xp"] .background {
  background: #44a7df url("background.svg") center / cover no-repeat;
}

.app[data-background="dawn"] .background,
.app[data-background="win95"] .background,
.app[data-background="windows95"] .background,
.app[data-background="classic"] .background {
  background: #178fd8 url("windows-clouds.svg") center / cover no-repeat;
}

.app[data-background="paper"] .background,
.app[data-background="win98"] .background,
.app[data-background="windows98"] .background,
.app[data-background="clouds"] .background {
  background: #1898de url("windows-clouds.svg") center / cover no-repeat;
  filter: saturate(.86) brightness(1.06) contrast(.94);
}

.app[data-background="mint"] .background,
.app[data-background="vista"] .background,
.app[data-background="aurora"] .background,
.app[data-background="windows-vista"] .background {
  background: #102b64 url("windows-vista.svg") center / cover no-repeat;
}

.app[data-background="peach"] .background,
.app[data-background="win7"] .background,
.app[data-background="windows7"] .background,
.app[data-background="glow"] .background {
  background: #0a77aa url("windows-7.svg") center / cover no-repeat;
}

.app[data-background="night"] .background,
.app[data-background="lavender"] .background,
.app[data-background="win11"] .background,
.app[data-background="windows11"] .background,
.app[data-background="bloom"] .background {
  background: #091a47 url("windows-11.svg") center / cover no-repeat;
}

.app.custom-background .background {
  background-image: var(--custom-background);
  filter: none;
}

/* Top controls */
.topbar {
  top: 16px;
  left: 16px;
  right: 16px;
}

.topbar-cluster {
  gap: 8px;
}

.glass-button,
.screen-title,
.screen-navigation,
.drawing-tools {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background:
    linear-gradient(180deg, rgba(48, 49, 58, 0.72), rgba(20, 21, 29, 0.72)),
    rgba(22, 23, 31, 0.7);
  color: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 30px rgba(6, 10, 22, 0.22), inset 0 1px rgba(255, 255, 255, 0.13);
  -webkit-backdrop-filter: blur(28px) saturate(1.45);
  backdrop-filter: blur(28px) saturate(1.45);
}

.glass-button {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1), background 180ms ease, box-shadow 180ms ease;
}

.glass-button:hover,
.screen-title:hover {
  background:
    linear-gradient(180deg, rgba(69, 70, 81, 0.82), rgba(32, 33, 43, 0.82)),
    rgba(30, 31, 40, 0.78);
  box-shadow: 0 16px 34px rgba(6, 10, 22, 0.27), inset 0 1px rgba(255, 255, 255, 0.19);
  transform: translateY(-1px);
}

.glass-button svg,
.screen-navigation svg,
.drawing-tools svg {
  stroke-width: 1.7;
}

.brand-button {
  border-color: rgba(255, 255, 255, 0.3);
  background: linear-gradient(145deg, #786df4 0%, #554bd4 64%, #4037a9 100%);
  box-shadow: 0 12px 30px rgba(47, 38, 157, 0.34), inset 0 1px rgba(255, 255, 255, 0.32);
}

.brand-button:hover {
  background: linear-gradient(145deg, #887ef8, #5f54de 64%, #463cb6);
}

.brand-symbol {
  width: 25px;
  height: 25px;
  border-width: 4px;
  border-color: #b5ff87;
  border-right-color: transparent;
  box-shadow: 0 0 16px rgba(176, 255, 127, 0.18);
}

.brand-symbol i:first-child {
  border-width: 3px;
}

.screen-title {
  min-width: 150px;
  height: 42px;
  padding: 0 10px 0 15px;
  border-radius: 13px;
  font-size: 12px;
  font-weight: 650;
}

.screen-count {
  padding: 4px 7px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.12);
  font-variant-numeric: tabular-nums;
}

[data-tooltip]::after {
  top: calc(100% + 9px);
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(24, 25, 31, 0.9);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  font-size: 10px;
  font-weight: 600;
}

/* Floating tool dock */
.widget-dock {
  height: 78px;
  max-width: calc(100vw - 196px);
  padding: 7px;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, 0.64);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(246, 246, 249, 0.72)),
    rgba(248, 248, 250, 0.76);
  box-shadow: 0 26px 70px rgba(6, 10, 24, 0.28), 0 4px 14px rgba(6, 10, 24, 0.11), inset 0 1px rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(36px) saturate(1.7);
  backdrop-filter: blur(36px) saturate(1.7);
}

.dock-item {
  width: 64px;
  min-width: 53px;
  padding: 5px 4px 4px;
  gap: 4px;
  border: 1px solid transparent;
  border-radius: 15px;
  color: #50515c;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 180ms ease, transform 180ms cubic-bezier(.2,.85,.25,1.4);
}

.dock-item:hover,
.dock-item.active {
  border-color: rgba(94, 81, 222, 0.09);
  background: linear-gradient(180deg, rgba(241, 239, 255, 0.98), rgba(230, 227, 255, 0.86));
  color: #554bd2;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.88), 0 7px 16px rgba(75, 64, 194, 0.12);
  transform: translateY(-3px) scale(1.025);
}

.dock-item.active::before {
  top: auto;
  bottom: 1px;
  width: 4px;
  height: 4px;
  background: #655ae9;
  box-shadow: 0 0 8px rgba(97, 87, 232, 0.55);
}

.dock-item[data-widget-type="sound"] {
  border-color: rgba(0, 159, 181, 0.16);
  background: linear-gradient(180deg, rgba(224, 252, 255, 0.95), rgba(207, 245, 249, 0.88));
  color: #07879b;
}

.dock-item[data-widget-type="sound"]:hover,
.dock-item[data-widget-type="sound"].active {
  background: linear-gradient(180deg, #d7fbff, #bdecf2);
  color: #006f82;
  box-shadow: 0 8px 20px rgba(0, 126, 148, 0.17), inset 0 1px #fff;
}

.dock-icon {
  width: 29px;
  height: 29px;
}

.dock-icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.65;
}

.dock-label {
  font-size: 9.5px;
  font-weight: 670;
  letter-spacing: -0.02em;
}

.dock-separator {
  margin: 9px 4px;
  background: rgba(50, 52, 64, 0.11);
}

.screen-navigation {
  right: 16px;
  bottom: 20px;
  height: 49px;
  padding: 4px;
  border-radius: 16px;
}

.screen-navigation button {
  width: 38px;
  height: 39px;
  border-radius: 11px;
  transition: background 150ms ease, transform 150ms ease;
}

.screen-navigation button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.16);
}

.screen-navigation .screen-indicator {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.12);
  font-variant-numeric: tabular-nums;
}

/* Widgets */
.widget {
  border-width: 2px;
  border-radius: 22px;
  filter: drop-shadow(0 19px 32px rgba(8, 13, 28, 0.16));
  transition: filter 180ms ease, border-color 180ms ease;
}

.widget:hover:not(.selected) {
  filter: drop-shadow(0 24px 40px rgba(8, 13, 28, 0.2));
}

.widget.selected {
  border-color: rgba(108, 98, 238, 0.96);
  filter: drop-shadow(0 24px 42px rgba(18, 20, 63, 0.24));
}

.widget.locked.selected {
  border-color: rgba(255, 255, 255, 0.88);
  box-shadow: 0 0 0 1px rgba(38, 40, 57, 0.24);
}

.widget-content {
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 19px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(247, 247, 250, 0.91)),
    rgba(255, 255, 255, 0.93);
  box-shadow: 0 20px 48px rgba(11, 15, 32, 0.19), inset 0 1px rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  backdrop-filter: blur(24px) saturate(1.3);
}

.widget[data-theme="purple"] .widget-content {
  border-color: rgba(255, 255, 255, 0.24);
  background: linear-gradient(145deg, #776df3 0%, #5d52dd 58%, #493fc5 100%);
  box-shadow: 0 25px 54px rgba(48, 37, 150, 0.3), inset 0 1px rgba(255, 255, 255, 0.22);
}

.widget[data-theme="mint"] .widget-content {
  border-color: rgba(255, 255, 255, 0.58);
  background: linear-gradient(145deg, #e4fff0, #c8f1dc 54%, #a9e4cb);
}

.widget[data-theme="coral"] .widget-content {
  border-color: rgba(255, 255, 255, 0.5);
  background: linear-gradient(145deg, #ffd9d1, #ffb7aa 56%, #fd9e92);
}

.widget[data-theme="night"] .widget-content {
  border-color: rgba(255, 255, 255, 0.12);
  background: linear-gradient(145deg, #353747, #232532 60%, #191b27);
  box-shadow: 0 24px 54px rgba(4, 6, 16, 0.34), inset 0 1px rgba(255, 255, 255, 0.11);
}

.widget-toolbar {
  bottom: calc(100% + 10px);
  height: 40px;
  padding: 4px;
  gap: 1px;
  border: 1px solid rgba(255, 255, 255, 0.19);
  border-radius: 13px;
  background: rgba(42, 39, 75, 0.87);
  box-shadow: 0 14px 36px rgba(8, 10, 28, 0.28), inset 0 1px rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(24px) saturate(1.45);
  backdrop-filter: blur(24px) saturate(1.45);
}

.widget-toolbar::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-right: 1px solid rgba(255, 255, 255, 0.13);
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(42, 39, 75, 0.87);
  transform: translate(-50%, -4px) rotate(45deg);
}

.widget-tool {
  width: 31px;
  height: 31px;
  border-radius: 9px;
  transition: background 140ms ease, transform 140ms ease;
}

.widget-tool:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

.resize-handle {
  width: 13px;
  height: 13px;
  border: 3px solid #6258e6;
  box-shadow: 0 2px 7px rgba(28, 24, 88, 0.22);
}

.widget-header {
  height: 40px;
  padding: 0 14px;
  border-bottom-color: rgba(64, 66, 78, 0.1);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .05em;
}

.text-widget {
  padding: 22px 24px;
  font-weight: 650;
  letter-spacing: -0.032em;
  line-height: 1.43;
}

.digital-time,
.timer-display,
.stopwatch-display,
.visual-timer-time,
.score-number {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
  letter-spacing: -0.065em;
}

.digital-time,
.timer-display,
.stopwatch-display {
  font-weight: 720;
  text-shadow: 0 1px rgba(255, 255, 255, 0.28);
}

.clock-date {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(62, 64, 78, 0.065);
  font-size: 11px;
  font-weight: 650;
}

.analog-clock {
  border: 1px solid rgba(38, 40, 51, 0.15);
  background:
    radial-gradient(circle at center, transparent 0 47%, rgba(255,255,255,.15) 48%),
    repeating-conic-gradient(from -1deg, currentColor 0 2deg, transparent 2deg 30deg);
  box-shadow: inset 0 0 0 7px rgba(255, 255, 255, 0.27), 0 10px 24px rgba(18, 20, 33, 0.12);
  opacity: .9;
}

.clock-hand {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}

.clock-hand.second {
  background: #ff385c;
}

.control-button {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(55, 57, 69, 0.06);
  background: rgba(67, 69, 83, 0.08);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.55);
  transition: transform 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.control-button:hover {
  background: rgba(67, 69, 83, 0.13);
  transform: translateY(-1px);
}

.control-button.primary,
.primary-button {
  background: linear-gradient(180deg, #7066ef, #564bd9);
  box-shadow: 0 7px 16px rgba(76, 64, 203, 0.25), inset 0 1px rgba(255, 255, 255, .24);
}

.control-button.primary:hover,
.primary-button:hover {
  background: linear-gradient(180deg, #7b71f4, #5c51df);
}

.timer-adjust button {
  min-width: 32px;
  padding: 5px 8px;
  border: 1px solid rgba(57, 59, 72, 0.06);
  border-radius: 8px;
  background: rgba(60, 62, 75, 0.07);
}

.primary-button,
.secondary-button {
  min-height: 40px;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 700;
  transition: transform 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.secondary-button {
  border: 1px solid rgba(52, 54, 66, 0.06);
  background: linear-gradient(180deg, #f5f5f7, #e9e9ee);
  box-shadow: inset 0 1px #fff;
}

.secondary-button:hover {
  background: linear-gradient(180deg, #fff, #eeeeF2);
  box-shadow: 0 5px 12px rgba(12, 15, 28, 0.08), inset 0 1px #fff;
}

/* Richer individual tools */
.traffic-widget {
  padding: 19px;
  gap: 12px;
  background: linear-gradient(145deg, #30323b, #171922);
}

.traffic-light {
  border: 2px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 -10px 18px rgba(0, 0, 0, 0.3), inset 0 5px 10px rgba(255, 255, 255, 0.16), 0 8px 16px rgba(0, 0, 0, 0.22);
}

.traffic-light.active {
  box-shadow: 0 0 22px currentColor, 0 0 50px currentColor, inset 0 -10px 18px rgba(0, 0, 0, 0.19), inset 0 5px 11px rgba(255, 255, 255, 0.36);
}

.die {
  border-color: rgba(27, 29, 40, 0.08);
  border-radius: 22%;
  background: linear-gradient(145deg, #fff, #f1f1f4);
  box-shadow: 0 13px 25px rgba(18, 21, 37, 0.16), inset 2px 2px 2px #fff, inset -2px -3px 6px rgba(37, 39, 56, 0.08);
}

.die-dot {
  background: linear-gradient(145deg, #434553, #181923);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3), 0 1px rgba(255,255,255,.8);
}

.groups-result article {
  border: 1px solid rgba(69, 67, 110, 0.07);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(246, 245, 255, .9), rgba(237, 235, 252, .72));
}

.random-name {
  font-weight: 750;
  letter-spacing: -0.05em;
}

.work-mode {
  border: 1px solid rgba(52, 54, 66, 0.055);
  background: rgba(62, 64, 77, 0.055);
  transition: transform 160ms ease, background 160ms ease, opacity 160ms ease;
}

.work-mode:hover {
  transform: translateY(-2px);
  opacity: .8;
}

.work-mode.active {
  border-color: rgba(97, 87, 232, 0.12);
  background: linear-gradient(145deg, #f2f0ff, #e5e2ff);
  box-shadow: 0 7px 16px rgba(80, 68, 195, 0.1), inset 0 1px #fff;
}

.calendar-heading {
  font-weight: 720;
  letter-spacing: -0.03em;
}

.calendar-grid span {
  border-radius: 7px;
}

.calendar-grid .today {
  background: linear-gradient(145deg, #756aef, #554ad6);
  box-shadow: 0 4px 9px rgba(72, 59, 188, 0.25);
}

.score-team:first-child {
  background: linear-gradient(145deg, #7168f0, #5147ce);
}

.score-team:last-child {
  background: linear-gradient(145deg, #ff879d, #ed536f);
}

.score-actions button {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255, 255, 255, .18);
  box-shadow: inset 0 1px rgba(255,255,255,.15);
}

.score-actions button:hover {
  background: rgba(255,255,255,.29);
}

.poll-option {
  border-color: rgba(63, 65, 77, 0.09);
  border-radius: 11px;
  background: rgba(255, 255, 255, .48);
  transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.poll-option:hover {
  border-color: rgba(97, 87, 232, .3);
  box-shadow: 0 5px 13px rgba(65, 55, 170, .09);
  transform: translateY(-1px);
}

.poll-option i {
  background: linear-gradient(90deg, rgba(104, 94, 231, .2), rgba(124, 216, 255, .22));
}

.qr-grid {
  border: 8px solid #fff;
  border-radius: 10px;
  box-shadow: 0 12px 26px rgba(13, 16, 29, .16);
}

.timetable-rows > div:nth-child(even) {
  background: rgba(82, 84, 99, .035);
}

.visual-timer-ring {
  background: conic-gradient(#675ce8 0 var(--progress), rgba(71, 73, 87, .1) var(--progress) 360deg);
  box-shadow: 0 15px 30px rgba(38, 32, 114, .15), inset 0 0 0 1px rgba(59, 61, 73, .08);
}

.visual-timer-ring::before {
  width: 73%;
  box-shadow: 0 0 0 1px rgba(48,52,80,.07), 0 5px 17px rgba(23,25,40,.08);
}

/* Noise monitor: supports the classic sound markup and the advanced monitor. */
.sound-widget,
.noise-widget {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  padding: clamp(14px, 3%, 22px);
  overflow: hidden;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  background:
    radial-gradient(circle at 84% 7%, rgba(93, 223, 241, .2), transparent 37%),
    linear-gradient(145deg, rgba(249, 255, 255, .98), rgba(232, 248, 251, .94));
}

.sound-widget::before,
.noise-widget::before {
  content: "";
  position: absolute;
  top: -55%;
  left: -20%;
  width: 75%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  filter: blur(36px);
  pointer-events: none;
}

.sound-readout {
  position: relative;
  z-index: 1;
  display: flex;
  width: 90%;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.sound-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: #123f49;
  font-size: clamp(27px, 4.1vw, 50px);
  font-weight: 730;
  line-height: .9;
  letter-spacing: -.07em;
  font-variant-numeric: tabular-nums;
}

.sound-value small {
  color: #6c9298;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
}

.sound-relative-label {
  color: #5e858d;
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;
}

.sound-meter,
.noise-meter {
  position: relative;
  z-index: 1;
  width: 90%;
  height: 68px;
  padding: 4px 7px;
  border: 1px solid rgba(0, 123, 145, .08);
  border-radius: 17px;
  background: rgba(255, 255, 255, .46);
  box-shadow: inset 0 1px rgba(255,255,255,.8);
}

.sound-threshold-marker {
  position: absolute;
  z-index: 3;
  top: 3px;
  bottom: 3px;
  left: var(--sound-threshold, 65%);
  width: 24px;
  padding: 0;
  border: 0;
  background: repeating-linear-gradient(to bottom, rgba(222, 62, 88, .8) 0 4px, transparent 4px 7px) center / 1px 100% no-repeat;
  cursor: ew-resize;
  pointer-events: auto;
  touch-action: none;
  transform: translateX(-50%);
}

.sound-threshold-marker::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff4966;
  box-shadow: 0 2px 6px rgba(223, 45, 76, .28);
  transform: translateX(-50%);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.sound-threshold-bubble {
  position: absolute;
  top: -30px;
  left: 50%;
  display: grid;
  min-width: 31px;
  height: 23px;
  padding: 0 6px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 8px;
  background: rgba(199, 46, 77, .92);
  color: #fff;
  box-shadow: 0 6px 14px rgba(159, 25, 52, .22);
  font-size: 9px;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 140ms ease, transform 140ms ease;
}

.sound-threshold-marker:hover .sound-threshold-bubble,
.sound-threshold-marker:focus-visible .sound-threshold-bubble,
.sound-widget.is-adjusting .sound-threshold-bubble {
  opacity: 1;
  transform: translate(-50%, 0);
}

.sound-threshold-marker:hover::before,
.sound-threshold-marker:focus-visible::before,
.sound-widget.is-adjusting .sound-threshold-marker::before {
  box-shadow: 0 0 0 5px rgba(255, 73, 102, .16), 0 2px 8px rgba(223, 45, 76, .32);
  transform: translateX(-50%) scale(1.2);
}

.sound-bar,
.noise-bar {
  width: 7%;
  min-width: 4px;
  border-radius: 999px;
  color: #0795ad;
  background: linear-gradient(180deg, #53d6e8, #0795ad);
  box-shadow: 0 3px 7px rgba(0, 139, 161, .14);
  opacity: .16;
}

.sound-bar.live,
.noise-bar.live {
  opacity: .92;
}

.sound-bar.warning,
.noise-bar.warning,
.noise-widget.warning .sound-bar.live,
.noise-widget[data-state="warning"] .noise-bar.live {
  background: linear-gradient(180deg, #ffd75e, #ff9c2f);
  box-shadow: 0 3px 9px rgba(255, 145, 39, .22);
}

.sound-bar.danger,
.noise-bar.danger,
.noise-widget.alert .sound-bar.live,
.noise-widget[data-state="alert"] .noise-bar.live {
  background: linear-gradient(180deg, #ff7890, #ff3456);
  box-shadow: 0 3px 11px rgba(255, 52, 86, .29);
}

.sound-label,
.noise-status {
  z-index: 1;
  color: #40707a;
  font-size: 10px;
  font-weight: 680;
  opacity: .86;
}

.sound-threshold-line {
  position: relative;
  z-index: 1;
  display: flex;
  width: 90%;
  align-items: center;
  justify-content: space-between;
  color: #62848b;
  font-size: 8px;
  font-weight: 650;
}

.sound-threshold-line b {
  color: #174650;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.sound-stats {
  position: relative;
  z-index: 1;
  display: grid;
  width: 90%;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.sound-stats span {
  display: grid;
  min-height: 27px;
  padding: 4px 5px;
  place-items: center;
  border: 1px solid rgba(8, 112, 131, .07);
  border-radius: 8px;
  background: rgba(255, 255, 255, .52);
  color: #456d75;
  box-shadow: inset 0 1px rgba(255,255,255,.74);
  font-size: clamp(7px, .66vw, 9px);
  font-weight: 680;
  text-align: center;
  white-space: nowrap;
}

.sound-over-count {
  color: #d43e59 !important;
  background: rgba(255, 235, 239, .68) !important;
}

.sound-widget.is-over {
  background:
    radial-gradient(circle at 84% 7%, rgba(255, 189, 68, .24), transparent 37%),
    linear-gradient(145deg, rgba(255, 255, 250, .98), rgba(255, 247, 222, .94));
}

.sound-widget.is-warning {
  animation: sound-warning-flash 900ms ease-in-out 2;
  background:
    radial-gradient(circle at 84% 7%, rgba(255, 87, 116, .26), transparent 39%),
    linear-gradient(145deg, rgba(255, 253, 253, .98), rgba(255, 231, 236, .94));
}

.sound-widget.is-warning .sound-value,
.sound-widget.is-warning .sound-label {
  color: #c72e4d;
}

@keyframes sound-warning-flash {
  50% { box-shadow: inset 0 0 0 3px rgba(255, 57, 91, .2), 0 0 38px rgba(255, 57, 91, .22); }
}

.sound-toggle,
.noise-toggle {
  z-index: 1;
  border: 1px solid rgba(0, 132, 153, .1);
  background: linear-gradient(180deg, #e9fbfd, #d5f1f4);
  color: #08778a;
}

.sound-toggle:hover,
.noise-toggle:hover {
  background: linear-gradient(180deg, #f4ffff, #daf7f9);
}

.noise-dashboard {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  grid-template-columns: minmax(110px, .9fr) minmax(130px, 1.1fr);
  align-items: center;
  gap: clamp(10px, 3vw, 22px);
}

.noise-gauge,
.noise-ring,
.noise-orb {
  --noise-level: 0deg;
  position: relative;
  display: grid;
  width: min(100%, 176px);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,.97) 0 56%, transparent 57%),
    conic-gradient(from 225deg, #4ed5d3 0 min(var(--noise-level), 200deg), #f5bf3e min(var(--noise-level), 200deg) min(var(--noise-level), 245deg), #ff4b68 min(var(--noise-level), 245deg) var(--noise-level), rgba(41, 104, 119, .09) var(--noise-level) 270deg, transparent 270deg);
  box-shadow: 0 16px 36px rgba(0, 83, 104, .12), inset 0 0 0 1px rgba(0, 111, 133, .06);
}

.noise-gauge::after,
.noise-ring::after,
.noise-orb::after {
  content: "";
  position: absolute;
  inset: 10%;
  border: 1px solid rgba(255, 255, 255, .84);
  border-radius: inherit;
  pointer-events: none;
}

.noise-reading,
.noise-value-wrap {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
}

.noise-value,
.noise-db {
  color: #123f49;
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 730;
  line-height: 1;
  letter-spacing: -.07em;
  font-variant-numeric: tabular-nums;
}

.noise-unit {
  color: #59828a;
  font-size: 10px;
  font-weight: 750;
}

.noise-details,
.noise-stats {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.noise-stat,
.noise-count,
.noise-alert-count,
.noise-event-count {
  display: flex;
  min-height: 43px;
  padding: 8px 11px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(8, 112, 131, .08);
  border-radius: 12px;
  background: rgba(255, 255, 255, .56);
  color: #406870;
  box-shadow: inset 0 1px rgba(255, 255, 255, .82);
  font-size: 10px;
  font-weight: 650;
}

.noise-stat strong,
.noise-count strong,
.noise-alert-count strong,
.noise-event-count strong {
  color: #113f49;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.noise-alert-count,
.noise-event-count {
  color: #a74657;
  background: rgba(255, 236, 240, .66);
}

.noise-alert-count strong,
.noise-event-count strong {
  color: #e33b5b;
}

.noise-threshold,
.noise-settings {
  z-index: 1;
  display: grid;
  width: 100%;
  gap: 7px;
}

.noise-threshold label,
.noise-settings label,
.noise-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #4a7179;
  font-size: 9px;
  font-weight: 680;
}

.noise-slider,
input[type="range"].noise-threshold-input,
.noise-threshold input[type="range"] {
  width: 100%;
  height: 5px;
  margin: 3px 0;
  border: 0;
  border-radius: 999px;
  outline: 0;
  background: linear-gradient(90deg, #34c9cf, #ffd65f 62%, #ff536f);
  accent-color: #0796a9;
  appearance: none;
  -webkit-appearance: none;
}

.noise-slider::-webkit-slider-thumb,
input[type="range"].noise-threshold-input::-webkit-slider-thumb,
.noise-threshold input[type="range"]::-webkit-slider-thumb {
  width: 17px;
  height: 17px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: #159daf;
  box-shadow: 0 2px 8px rgba(0, 78, 93, .25);
  appearance: none;
  -webkit-appearance: none;
}

.noise-alert,
.noise-warning {
  animation: noise-alert-pulse 720ms ease-in-out 2;
}

.noise-alert-badge,
.noise-live {
  display: inline-flex;
  min-height: 21px;
  padding: 4px 8px;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  background: rgba(39, 202, 164, .12);
  color: #098b71;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.noise-alert-badge::before,
.noise-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c99c;
  box-shadow: 0 0 0 3px rgba(34, 201, 156, .12);
}

.noise-widget.alert .noise-alert-badge,
.noise-alert-badge.alert {
  background: rgba(255, 64, 96, .11);
  color: #e33c58;
}

.noise-widget.alert .noise-alert-badge::before,
.noise-alert-badge.alert::before {
  background: #ff4664;
  box-shadow: 0 0 0 3px rgba(255, 70, 100, .12);
}

@keyframes noise-alert-pulse {
  50% { box-shadow: inset 0 0 0 3px rgba(255, 55, 88, .22), 0 0 34px rgba(255, 55, 88, .2); }
}

/* Draw tools */
.drawing-tools {
  left: 16px;
  bottom: 20px;
  height: 49px;
  padding: 4px;
  border-radius: 16px;
}

.draw-tool {
  width: 39px;
  height: 39px;
  border-radius: 11px;
}

.draw-tool:hover,
.draw-tool.active {
  background: rgba(255, 255, 255, .17);
  box-shadow: inset 0 1px rgba(255,255,255,.08);
}

.draw-color {
  width: 20px;
  height: 20px;
  border-width: 3px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

/* Drawers, settings, and galleries */
.drawer,
.side-panel {
  border: 1px solid rgba(255, 255, 255, .68);
  background:
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(246,246,249,.86)),
    rgba(249, 249, 251, .84);
  box-shadow: var(--shadow), inset 0 1px rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(44px) saturate(1.5);
  backdrop-filter: blur(44px) saturate(1.5);
}

.drawer {
  bottom: 108px;
  width: min(880px, calc(100vw - 32px));
  padding: 24px;
  border-radius: 26px;
  transform: translate(-50%, 20px) scale(.97);
}

.drawer.open {
  transform: translate(-50%, 0) scale(1);
}

.side-panel {
  top: 10px;
  right: 10px;
  bottom: 10px;
  width: min(406px, calc(100vw - 20px));
  padding: 26px;
  border-radius: 28px;
}

.panel-backdrop {
  background: rgba(7, 11, 24, .24);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.drawer-title,
.panel-title {
  color: #171822;
  font-size: 20px;
  font-weight: 730;
  letter-spacing: -.04em;
}

.drawer-subtitle,
.panel-subtitle {
  margin-top: 5px;
  font-size: 11px;
}

.panel-close,
.icon-button {
  border: 1px solid rgba(45, 47, 58, .06);
  border-radius: 11px;
  background: rgba(224, 224, 230, .67);
  box-shadow: inset 0 1px rgba(255,255,255,.62);
  transition: transform 150ms ease, background 150ms ease;
}

.panel-close:hover,
.icon-button:hover {
  background: rgba(211, 211, 219, .78);
}

.widget-gallery {
  gap: 11px;
}

.gallery-item {
  min-height: 108px;
  border-color: rgba(51, 53, 64, .09);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(245,245,248,.74));
  color: #50515d;
  box-shadow: inset 0 1px rgba(255, 255, 255, .88);
  transition: transform 180ms cubic-bezier(.2,.8,.2,1), border-color 160ms ease, box-shadow 180ms ease, color 150ms ease;
}

.gallery-item:hover {
  border-color: rgba(103, 91, 231, .28);
  color: #5147cd;
  box-shadow: 0 14px 30px rgba(44, 38, 118, .13), inset 0 1px #fff;
  transform: translateY(-4px) scale(1.015);
}

.gallery-item[data-gallery-type="sound"] {
  border-color: rgba(0, 153, 176, .16);
  background: linear-gradient(145deg, rgba(235, 254, 255, .94), rgba(215, 246, 249, .84));
  color: #087f92;
}

.gallery-item svg {
  width: 31px;
  height: 31px;
  stroke-width: 1.6;
}

.gallery-item span {
  font-size: 10px;
  font-weight: 680;
}

.panel-section-title {
  font-size: 11px;
  font-weight: 740;
  letter-spacing: -.01em;
}

.background-grid {
  gap: 10px;
}

.background-option {
  height: 98px;
  border-width: 2px;
  border-color: rgba(42, 44, 54, .08);
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.background-option:hover {
  transform: translateY(-2px);
  box-shadow: 0 9px 20px rgba(13, 17, 31, .15), inset 0 0 0 1px rgba(255,255,255,.28);
}

.background-option.active {
  border-color: #685ee9;
  box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 0 0 4px #685ee9, 0 10px 22px rgba(41, 33, 132, .16);
}

.background-option::after {
  left: 7px;
  bottom: 7px;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  background: rgba(18, 20, 27, .66);
  box-shadow: 0 3px 9px rgba(0,0,0,.13);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 8px;
  font-weight: 680;
}

.background-option[data-bg="lake"],
.background-option[data-bg="xp"],
.background-option[data-bg="bliss"],
.background-option[data-bg="windows-xp"] { background: #45a8df url("background.svg") center / cover no-repeat; }

.background-option[data-bg="dawn"],
.background-option[data-bg="win95"],
.background-option[data-bg="windows95"],
.background-option[data-bg="classic"] { background: #168fd9 url("windows-clouds.svg") center / cover no-repeat; }

.background-option[data-bg="paper"],
.background-option[data-bg="win98"],
.background-option[data-bg="windows98"],
.background-option[data-bg="clouds"] { background: #1798df url("windows-clouds.svg") center / cover no-repeat; filter: saturate(.88) brightness(1.05); }

.background-option[data-bg="mint"],
.background-option[data-bg="vista"],
.background-option[data-bg="aurora"],
.background-option[data-bg="windows-vista"] { background: #102b64 url("windows-vista.svg") center / cover no-repeat; }

.background-option[data-bg="peach"],
.background-option[data-bg="win7"],
.background-option[data-bg="windows7"],
.background-option[data-bg="glow"] { background: #0877a9 url("windows-7.svg") center / cover no-repeat; }

.background-option[data-bg="night"],
.background-option[data-bg="lavender"],
.background-option[data-bg="win11"],
.background-option[data-bg="windows11"],
.background-option[data-bg="bloom"] { background: #091a47 url("windows-11.svg") center / cover no-repeat; }

.background-option.upload {
  border: 1px dashed rgba(74, 76, 89, .27);
  background: rgba(243,243,247,.8);
  color: #555765;
}

.form-row {
  gap: 8px;
}

.form-row label {
  color: #5e606d;
  font-size: 10px;
  font-weight: 680;
}

.form-row input,
.form-row select,
.form-row textarea {
  min-height: 44px;
  border-color: rgba(54, 56, 68, .12);
  border-radius: 11px;
  background: rgba(255,255,255,.76);
  box-shadow: inset 0 1px 2px rgba(13,16,28,.035), 0 1px rgba(255,255,255,.9);
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: rgba(91, 78, 221, .48);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(96, 83, 225, .11);
  outline: 0;
}

.setting-row {
  border-bottom-color: rgba(49, 51, 62, .09);
}

.switch {
  width: 43px;
  height: 25px;
}

.switch span {
  background: #c8c9d0;
  box-shadow: inset 0 1px 3px rgba(17,19,29,.12);
}

.switch span::after {
  top: 2px;
  left: 2px;
  width: 21px;
  height: 21px;
  box-shadow: 0 2px 7px rgba(12,14,24,.24);
}

.switch input:checked + span {
  background: #5f55e3;
}

.switch input:checked + span::after {
  transform: translateX(18px);
}

.danger-button {
  border-color: rgba(226, 52, 81, .14);
  border-radius: 11px;
  background: rgba(255, 235, 239, .72);
  color: #da3552;
}

.theme-chip {
  width: 43px;
  height: 43px;
}

.theme-chip i {
  box-shadow: inset 0 1px rgba(255,255,255,.35), 0 3px 8px rgba(13,16,30,.1);
}

.screen-card {
  min-height: 70px;
  border-color: rgba(53,55,67,.09);
  border-radius: 15px;
  background: rgba(255,255,255,.64);
  box-shadow: inset 0 1px rgba(255,255,255,.82);
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.screen-card:hover {
  transform: translateY(-1px);
  border-color: rgba(97,87,232,.23);
}

.screen-card.active {
  border-color: rgba(97,87,232,.38);
  background: linear-gradient(145deg, #f7f5ff, #ece9ff);
}

.screen-card > i {
  border-radius: 11px;
  background: url("background.svg") center / cover;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}

/* Presentation lock, status feedback */
.screen-blur {
  background:
    radial-gradient(circle at 50% 45%, rgba(103, 92, 231, .16), transparent 32%),
    rgba(13, 15, 24, .88);
  -webkit-backdrop-filter: blur(28px) saturate(.8);
  backdrop-filter: blur(28px) saturate(.8);
}

.blur-mark {
  border-width: 10px;
  box-shadow: 0 18px 50px rgba(0,0,0,.25), 0 0 42px rgba(134,113,255,.2);
}

.toast {
  left: 16px;
  bottom: 110px;
  padding: 12px 15px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 13px;
  background: rgba(27, 28, 35, .82);
  box-shadow: 0 16px 36px rgba(3,7,17,.25), inset 0 1px rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  backdrop-filter: blur(22px) saturate(1.3);
  font-size: 11px;
  font-weight: 620;
}

.confetti {
  border-radius: 3px;
  box-shadow: 0 2px 5px rgba(0,0,0,.12);
}

.app.dark-ui .glass-button,
.app.dark-ui .screen-title,
.app.dark-ui .screen-navigation,
.app.dark-ui .drawing-tools {
  background: linear-gradient(180deg, rgba(36,37,45,.84), rgba(13,14,21,.86));
}

@media (max-width: 1100px) {
  .widget-dock { max-width: calc(100vw - 170px); }
  .dock-item { width: 58px; min-width: 50px; }
  .screen-navigation { bottom: 118px; }
}

@media (max-width: 980px) {
  .widget-dock {
    max-width: calc(100vw - 152px);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .widget-dock::-webkit-scrollbar { display: none; }
  .dock-item { width: 55px; }
  .widget-gallery { grid-template-columns: repeat(4, minmax(90px, 1fr)); }
}

@media (max-width: 720px) {
  :root { --dock-bottom: 9px; }

  .topbar { top: 9px; left: 9px; right: 9px; }
  .glass-button { width: 40px; height: 40px; border-radius: 12px; }

  .widget-dock {
    left: 9px;
    right: 9px;
    bottom: 9px;
    width: auto;
    max-width: none;
    height: 70px;
    padding: 6px;
    border-radius: 20px;
    scroll-padding-inline: 6px;
    scrollbar-width: none;
  }

  .widget-dock::-webkit-scrollbar { display: none; }
  .dock-item { min-width: 55px; flex-basis: 55px; border-radius: 14px; }
  .dock-icon { width: 26px; height: 26px; }
  .dock-icon svg { width: 22px; height: 22px; }

  .screen-navigation { right: 9px; bottom: 88px; }
  .drawer { bottom: 86px; padding: 20px; border-radius: 23px; }
  .side-panel { padding: 22px; border-radius: 24px; }
  .toast { left: 9px; bottom: 88px; }
  .noise-dashboard { grid-template-columns: minmax(90px, .8fr) minmax(110px, 1.2fr); }
}

@media (max-width: 520px) {
  .drawer { width: calc(100vw - 18px); }
  .widget-gallery { grid-template-columns: repeat(3, minmax(76px, 1fr)); gap: 8px; }
  .gallery-item { min-height: 96px; }
  .background-option { height: 86px; }
  .widget { min-width: 120px; min-height: 90px; }
  .widget[data-type="text"] .text-widget {
    padding: 14px 15px;
    font-size: clamp(14px, 4.5vw, 21px) !important;
  }
  .noise-dashboard { grid-template-columns: 1fr; }
  .noise-gauge, .noise-ring, .noise-orb { width: min(46vw, 142px); margin-inline: auto; }
}

@media (max-width: 390px) {
  .widget-gallery { grid-template-columns: repeat(2, minmax(88px, 1fr)); }
  .side-panel { top: 5px; right: 5px; bottom: 5px; width: calc(100vw - 10px); padding: 19px; }
}

@media (hover: none) {
  .dock-item:hover,
  .gallery-item:hover,
  .glass-button:hover,
  .work-mode:hover,
  .background-option:hover {
    transform: none;
  }
}

/* ========================================================================== */
/* Apple spatial classroom — final visual system                              */
/* ========================================================================== */

:root {
  --apple-blue: #0a84ff;
  --apple-blue-strong: #0071e3;
  --apple-ink: #1d1d1f;
  --apple-secondary: #6e6e73;
  --apple-line: rgba(255, 255, 255, .58);
  --apple-panel: rgba(248, 248, 250, .78);
  --apple-panel-strong: rgba(255, 255, 255, .92);
  --apple-dark: rgba(24, 24, 27, .78);
  --apple-ease: cubic-bezier(.22, .8, .2, 1);
  --apple-shadow: 0 28px 80px rgba(10, 16, 28, .24), 0 3px 14px rgba(10, 16, 28, .10);
  --apple-widget-shadow: 0 24px 60px rgba(7, 12, 24, .22), 0 3px 12px rgba(7, 12, 24, .09);
  --dock-bottom: 18px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI Variable", Pretendard, "Apple SD Gothic Neo", "Segoe UI", sans-serif;
}

html,
body,
.app {
  color: var(--apple-ink);
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.app {
  background: #0b1019;
  letter-spacing: -.018em;
}

.background {
  transform: none;
  filter: none !important;
  transition: opacity 420ms ease, background-image 420ms ease;
}

.background-shade {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .18), transparent 18%, transparent 70%, rgba(0, 0, 0, .13)),
    radial-gradient(ellipse at 50% 45%, transparent 50%, rgba(3, 7, 14, .10) 100%);
}

.app[data-background="dawn"] .background,
.app[data-background="win95"] .background,
.app[data-background="windows95"] .background,
.app[data-background="classic"] .background {
  background: #79b7dc url("wallpapers/windows-95-win95.bmp") center / cover no-repeat;
}

.app[data-background="paper"] .background,
.app[data-background="win98"] .background,
.app[data-background="windows98"] .background,
.app[data-background="clouds"] .background {
  background: #82bce2 url("wallpapers/windows-98-clouds.bmp") center / cover no-repeat;
}

.app[data-background="lake"] .background,
.app[data-background="xp"] .background,
.app[data-background="bliss"] .background,
.app[data-background="windows-xp"] .background {
  background: #2d85df url("wallpapers/windows-xp-bliss.bmp") center / cover no-repeat;
}

.app[data-background="mint"] .background,
.app[data-background="vista"] .background,
.app[data-background="aurora"] .background,
.app[data-background="windows-vista"] .background {
  background: #087d9f url("wallpapers/windows-vista-aurora.jpg") center / cover no-repeat;
}

.app[data-background="peach"] .background,
.app[data-background="win7"] .background,
.app[data-background="windows7"] .background,
.app[data-background="glow"] .background {
  background: #0a75ce url("wallpapers/windows-7-harmony.jpg") center / cover no-repeat;
}

.app[data-background="night"] .background,
.app[data-background="lavender"] .background,
.app[data-background="win11"] .background,
.app[data-background="windows11"] .background,
.app[data-background="bloom"] .background {
  background: #9fc1d8 url("wallpapers/windows-11-bloom.jpg") center / cover no-repeat;
}

.app.custom-background .background {
  background-image: var(--custom-background);
  background-position: center;
  background-size: cover;
}

/* Floating controls */
.topbar {
  top: 18px;
  left: 18px;
  right: 18px;
}

.topbar-cluster { gap: 8px; }

.glass-button,
.screen-title,
.screen-navigation,
.drawing-tools {
  border: 1px solid rgba(255, 255, 255, .22);
  background: linear-gradient(180deg, rgba(39, 39, 43, .72), rgba(21, 21, 24, .76));
  color: rgba(255, 255, 255, .94);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .18), inset 0 1px rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(34px) saturate(1.6);
  backdrop-filter: blur(34px) saturate(1.6);
}

.glass-button {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  transition: transform 220ms var(--apple-ease), background 180ms ease, box-shadow 180ms ease;
}

.glass-button:hover,
.screen-title:hover {
  border-color: rgba(255, 255, 255, .32);
  background: linear-gradient(180deg, rgba(57, 57, 62, .82), rgba(30, 30, 34, .84));
  box-shadow: 0 17px 38px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .18);
  transform: translateY(-2px);
}

.glass-button svg,
.screen-navigation svg,
.dock-icon svg {
  stroke-width: 1.65;
}

.brand-button,
.brand-button:hover {
  border-color: rgba(255, 255, 255, .28);
  background: linear-gradient(155deg, #35a7ff, #0a84ff 52%, #0066cc);
  box-shadow: 0 14px 34px rgba(0, 102, 204, .30), inset 0 1px rgba(255, 255, 255, .34);
}

.brand-symbol {
  width: 24px;
  height: 24px;
  border: 4px solid #fff;
  border-right-color: rgba(255, 255, 255, .28);
  border-radius: 50%;
  transform: rotate(-28deg);
}

.brand-symbol i:first-child {
  right: -2px;
  bottom: -1px;
  width: 8px;
  height: 8px;
  border: 3px solid #fff;
  border-left-color: transparent;
  border-bottom-color: transparent;
}

.brand-symbol i:last-child { display: none; }

.screen-title {
  min-width: 158px;
  height: 46px;
  padding: 0 11px 0 17px;
  border-radius: 15px;
  font-size: 13px;
  font-weight: 660;
  letter-spacing: -.01em;
  transition: transform 220ms var(--apple-ease), background 180ms ease, box-shadow 180ms ease;
}

.screen-count {
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .70);
  font-variant-numeric: tabular-nums;
}

[data-tooltip]::after {
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 9px;
  background: rgba(27, 27, 30, .88);
  box-shadow: 0 9px 24px rgba(0, 0, 0, .22);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  font-weight: 600;
}

/* Dock */
.widget-dock {
  height: 88px;
  max-width: calc(100vw - 190px);
  padding: 8px;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, .64);
  border-radius: 25px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(241, 241, 244, .72));
  box-shadow: 0 28px 70px rgba(6, 12, 25, .28), 0 4px 14px rgba(6, 12, 25, .10), inset 0 1px rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(44px) saturate(1.75);
  backdrop-filter: blur(44px) saturate(1.75);
}

.dock-item {
  width: 64px;
  min-width: 54px;
  padding: 6px 4px 5px;
  gap: 4px;
  border: 1px solid transparent;
  border-radius: 18px;
  color: #4a4a4f;
  transition: transform 240ms var(--apple-ease), background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.dock-item:hover,
.dock-item.active {
  border-color: rgba(255, 255, 255, .64);
  background: rgba(255, 255, 255, .62);
  color: var(--apple-blue-strong);
  box-shadow: 0 9px 22px rgba(18, 35, 56, .11), inset 0 1px rgba(255, 255, 255, .88);
  transform: translateY(-5px) scale(1.035);
}

.dock-item.active::before {
  top: auto;
  bottom: 3px;
  width: 4px;
  height: 4px;
  background: var(--apple-blue);
  box-shadow: 0 0 0 3px rgba(10, 132, 255, .10);
}

.dock-item[data-widget-type="sound"] {
  color: #097d8d;
  background: rgba(228, 250, 252, .40);
}

.dock-item[data-widget-type="sound"]:hover,
.dock-item[data-widget-type="sound"].active {
  color: #006c7c;
  background: rgba(221, 249, 252, .78);
  box-shadow: 0 9px 22px rgba(0, 102, 119, .12), inset 0 1px rgba(255, 255, 255, .90);
}

.dock-icon {
  width: 32px;
  height: 32px;
}

.dock-icon svg {
  width: 24px;
  height: 24px;
}

.dock-label {
  font-size: 9px;
  font-weight: 650;
  letter-spacing: -.02em;
}

.screen-navigation {
  height: 47px;
  padding: 4px;
  gap: 2px;
  border-radius: 16px;
}

.screen-navigation button { border-radius: 11px; }

.screen-navigation button:hover { background: rgba(255, 255, 255, .14); }

.screen-navigation .screen-indicator {
  background: rgba(255, 255, 255, .13);
  font-variant-numeric: tabular-nums;
}

/* Widgets */
.widget {
  border-width: 1px;
  border-radius: 25px;
  filter: none;
  transition: filter 180ms ease, transform 180ms var(--apple-ease), border-color 180ms ease;
}

.widget:hover:not(.selected) {
  filter: drop-shadow(0 26px 48px rgba(7, 12, 24, .17));
}

.widget.selected {
  border-color: rgba(10, 132, 255, .90);
  box-shadow: 0 0 0 3px rgba(10, 132, 255, .16);
  filter: none;
}

.widget.locked.selected { border-color: rgba(255, 255, 255, .84); }

.widget-content {
  border: 1px solid rgba(255, 255, 255, .64);
  border-radius: 24px;
  background: linear-gradient(155deg, rgba(255, 255, 255, .94), rgba(245, 245, 247, .82));
  box-shadow: var(--apple-widget-shadow), inset 0 1px rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(38px) saturate(1.45);
  backdrop-filter: blur(38px) saturate(1.45);
}

.widget[data-theme="purple"] .widget-content {
  border-color: rgba(255, 255, 255, .25);
  background:
    radial-gradient(circle at 82% 8%, rgba(80, 180, 255, .34), transparent 34%),
    linear-gradient(145deg, rgba(35, 74, 160, .94), rgba(22, 38, 94, .95));
  color: #fff;
  box-shadow: 0 27px 65px rgba(9, 22, 71, .34), inset 0 1px rgba(255, 255, 255, .22);
}

.widget[data-theme="mint"] .widget-content {
  border-color: rgba(255, 255, 255, .68);
  background: linear-gradient(145deg, rgba(237, 255, 248, .94), rgba(208, 241, 228, .84));
  color: #173e32;
}

.widget[data-theme="coral"] .widget-content {
  border-color: rgba(255, 255, 255, .62);
  background: linear-gradient(145deg, rgba(255, 245, 241, .95), rgba(255, 217, 208, .86));
  color: #583029;
}

.widget[data-theme="night"] .widget-content {
  border-color: rgba(255, 255, 255, .13);
  background:
    radial-gradient(circle at 77% 3%, rgba(77, 132, 255, .20), transparent 38%),
    linear-gradient(145deg, rgba(43, 43, 48, .92), rgba(17, 17, 20, .95));
  color: #fff;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .11);
}

.widget-toolbar {
  bottom: calc(100% + 11px);
  height: 42px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 14px;
  background: rgba(29, 29, 32, .84);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  backdrop-filter: blur(28px) saturate(1.4);
}

.widget-toolbar::after { background: rgba(29, 29, 32, .84); }

.widget-tool {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

.widget-tool:hover { background: rgba(255, 255, 255, .15); }

.resize-handle {
  width: 13px;
  height: 13px;
  border: 3px solid #fff;
  background: var(--apple-blue);
  box-shadow: 0 2px 8px rgba(0, 91, 184, .38);
}

.widget-header {
  height: 42px;
  padding: 0 15px;
  border-bottom-color: rgba(60, 60, 67, .10);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
}

.text-widget {
  padding: clamp(20px, 5%, 34px);
  font-weight: 620;
  letter-spacing: -.035em;
  line-height: 1.48;
}

.digital-time,
.timer-display,
.stopwatch-display {
  font-weight: 650;
  letter-spacing: -.075em;
  text-shadow: none;
}

.clock-date {
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  font-weight: 570;
}

.control-button {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(60, 60, 67, .07);
  background: rgba(120, 120, 128, .10);
  box-shadow: inset 0 1px rgba(255, 255, 255, .52);
}

.control-button.primary,
.primary-button {
  border: 0;
  background: linear-gradient(180deg, #2196ff, #087cf0);
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 113, 227, .24), inset 0 1px rgba(255, 255, 255, .30);
}

.control-button.primary:hover,
.primary-button:hover { background: linear-gradient(180deg, #3da4ff, #0877df); }

.secondary-button {
  border: 1px solid rgba(60, 60, 67, .08);
  background: rgba(120, 120, 128, .10);
  color: #3a3a3c;
  box-shadow: inset 0 1px rgba(255, 255, 255, .64);
}

.timer-adjust button {
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .10);
}

.traffic-widget {
  padding: 20px;
  gap: 13px;
  background: linear-gradient(145deg, #353539, #151517);
}

.traffic-light {
  border: 2px solid rgba(255, 255, 255, .08);
  box-shadow: inset 0 -12px 22px rgba(0, 0, 0, .30), inset 0 5px 12px rgba(255, 255, 255, .14), 0 10px 22px rgba(0, 0, 0, .20);
}

.traffic-light.active { box-shadow: 0 0 28px currentColor, 0 0 68px color-mix(in srgb, currentColor 58%, transparent), inset 0 -10px 18px rgba(0, 0, 0, .16); }

.die {
  border-color: rgba(60, 60, 67, .10);
  background: linear-gradient(145deg, #fff, #f0f0f2);
  box-shadow: 0 18px 34px rgba(18, 21, 32, .18), inset 2px 2px 2px #fff, inset -2px -3px 8px rgba(30, 30, 35, .07);
}

.die-dot { background: #252528; }

.random-name {
  font-weight: 670;
  letter-spacing: -.055em;
}

.groups-result article {
  border: 1px solid rgba(60, 60, 67, .07);
  background: rgba(118, 118, 128, .07);
}

.calendar-heading { font-weight: 680; }
.calendar-grid .today { background: var(--apple-blue); box-shadow: 0 6px 14px rgba(10, 132, 255, .26); }

/* Activity symbols — selected state plus 13 classroom modes */
.work-widget {
  display: grid;
  width: 100%;
  height: 100%;
  padding: clamp(13px, 3.2%, 22px);
  grid-template-columns: minmax(118px, .75fr) minmax(210px, 1.55fr);
  gap: clamp(10px, 2.4%, 18px);
  background:
    radial-gradient(circle at 12% 12%, rgba(56, 161, 255, .12), transparent 34%),
    linear-gradient(150deg, rgba(255, 255, 255, .36), rgba(238, 245, 255, .10));
}

.work-current {
  display: flex;
  min-width: 0;
  padding: clamp(13px, 10%, 24px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, .74);
  border-radius: 21px;
  background: linear-gradient(155deg, rgba(255, 255, 255, .92), rgba(229, 241, 255, .72));
  box-shadow: 0 18px 40px rgba(19, 63, 111, .12), inset 0 1px #fff;
  text-align: center;
}

.work-current-eyebrow {
  color: #73737a;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.work-current-emoji {
  font-size: clamp(44px, 6vw, 78px);
  line-height: 1.15;
  filter: drop-shadow(0 9px 13px rgba(17, 43, 79, .13));
}

.work-current strong {
  color: #1d1d1f;
  font-size: clamp(15px, 1.65vw, 23px);
  font-weight: 700;
  letter-spacing: -.045em;
}

.work-mode-grid {
  display: grid;
  min-width: 0;
  padding: 2px 3px 2px 1px;
  grid-template-columns: repeat(4, minmax(58px, 1fr));
  grid-auto-rows: minmax(70px, 1fr);
  gap: 7px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(60, 60, 67, .18) transparent;
}

.work-mode {
  min-width: 0;
  padding: 7px 3px;
  gap: 5px;
  border: 1px solid rgba(60, 60, 67, .06);
  border-radius: 15px;
  background: rgba(255, 255, 255, .48);
  color: #3a3a3c;
  box-shadow: inset 0 1px rgba(255, 255, 255, .72);
  opacity: 1;
  transition: transform 180ms var(--apple-ease), background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.work-mode:hover {
  border-color: rgba(10, 132, 255, .18);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 9px 20px rgba(20, 53, 91, .10), inset 0 1px #fff;
  transform: translateY(-2px);
}

.work-mode.active {
  border-color: rgba(10, 132, 255, .32);
  background: linear-gradient(155deg, rgba(237, 247, 255, .98), rgba(206, 230, 255, .88));
  color: #0066cc;
  box-shadow: 0 10px 22px rgba(0, 113, 227, .16), inset 0 1px #fff;
}

.work-mode .work-emoji {
  font-size: clamp(23px, 2.4vw, 34px);
  line-height: 1;
}

.work-mode small {
  overflow: hidden;
  max-width: 100%;
  font-size: clamp(8px, .72vw, 10px);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sound monitor */
.sound-widget {
  background:
    radial-gradient(circle at 88% 4%, rgba(83, 215, 232, .20), transparent 35%),
    linear-gradient(150deg, rgba(252, 255, 255, .96), rgba(231, 247, 250, .86));
}

.sound-widget::before { opacity: .38; }

.sound-value { color: #143f48; font-weight: 680; }

.sound-meter {
  border-color: rgba(0, 108, 124, .08);
  background: rgba(255, 255, 255, .50);
  box-shadow: inset 0 1px rgba(255, 255, 255, .82);
}

.sound-threshold-marker {
  background: linear-gradient(to bottom, transparent, #ff375f 10%, #ff375f 90%, transparent) center / 1px 100% no-repeat;
}

.sound-threshold-marker::before {
  width: 8px;
  height: 8px;
  background: #ff375f;
}

.sound-threshold-bubble {
  border-radius: 9px;
  background: rgba(190, 26, 58, .92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.sound-bar {
  background: linear-gradient(180deg, #59d9e7, #0795aa);
  box-shadow: none;
}

.sound-stats span {
  border-color: rgba(0, 108, 124, .07);
  background: rgba(255, 255, 255, .52);
  box-shadow: inset 0 1px rgba(255, 255, 255, .82);
}

.sound-toggle {
  border-color: rgba(0, 108, 124, .08);
  background: rgba(0, 122, 141, .09);
  color: #006d7d;
}

/* Draw bar and sheets */
.drawing-tools {
  height: 52px;
  padding: 5px;
  border-radius: 17px;
}

.draw-tool {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.draw-tool:hover,
.draw-tool.active { background: rgba(255, 255, 255, .15); }

.drawer,
.side-panel {
  border: 1px solid rgba(255, 255, 255, .68);
  background: linear-gradient(155deg, rgba(255, 255, 255, .91), rgba(242, 242, 246, .82));
  box-shadow: var(--apple-shadow), inset 0 1px rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(46px) saturate(1.65);
  backdrop-filter: blur(46px) saturate(1.65);
}

.drawer {
  bottom: 122px;
  padding: 24px;
  border-radius: 27px;
}

.side-panel {
  top: 12px;
  right: 12px;
  bottom: 12px;
  padding: 26px;
  border-radius: 28px;
}

.drawer-title,
.panel-title {
  color: #1d1d1f;
  font-size: 20px;
  font-weight: 720;
  letter-spacing: -.045em;
}

.drawer-subtitle,
.panel-subtitle {
  color: #6e6e73;
  line-height: 1.45;
}

.panel-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(118, 118, 128, .12);
  color: #48484a;
}

.widget-gallery {
  gap: 10px;
}

.gallery-item {
  min-height: 108px;
  border: 1px solid rgba(60, 60, 67, .07);
  border-radius: 18px;
  background: rgba(255, 255, 255, .56);
  color: #3a3a3c;
  box-shadow: inset 0 1px rgba(255, 255, 255, .82);
}

.gallery-item:hover {
  border-color: rgba(10, 132, 255, .22);
  background: rgba(255, 255, 255, .90);
  color: #0071e3;
  box-shadow: 0 15px 30px rgba(20, 43, 73, .12), inset 0 1px #fff;
  transform: translateY(-4px) scale(1.012);
}

.gallery-item svg { stroke-width: 1.55; }

.background-grid { gap: 12px; }

.background-option {
  height: 112px;
  border: 2px solid rgba(60, 60, 67, .08);
  border-radius: 19px;
  box-shadow: 0 9px 23px rgba(16, 20, 30, .10), inset 0 0 0 1px rgba(255, 255, 255, .24);
}

.background-option:hover { transform: translateY(-3px) scale(1.01); }

.background-option.active {
  border-color: #fff;
  box-shadow: 0 0 0 3px var(--apple-blue), 0 15px 34px rgba(0, 78, 156, .20);
}

.background-option::after {
  left: 8px;
  bottom: 8px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 9px;
  background: rgba(20, 20, 23, .68);
  font-size: 8px;
  font-weight: 650;
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
}

.background-option[data-bg="dawn"],
.background-option[data-bg="win95"],
.background-option[data-bg="windows95"],
.background-option[data-bg="classic"] {
  background: #79b7dc url("wallpapers/windows-95-win95.bmp") center / cover no-repeat;
}

.background-option[data-bg="paper"],
.background-option[data-bg="win98"],
.background-option[data-bg="windows98"],
.background-option[data-bg="clouds"] {
  background: #82bce2 url("wallpapers/windows-98-clouds.bmp") center / cover no-repeat;
  filter: none;
}

.background-option[data-bg="lake"],
.background-option[data-bg="xp"],
.background-option[data-bg="bliss"],
.background-option[data-bg="windows-xp"] {
  background: #2d85df url("wallpapers/windows-xp-bliss.bmp") center / cover no-repeat;
}

.background-option[data-bg="mint"],
.background-option[data-bg="vista"],
.background-option[data-bg="aurora"],
.background-option[data-bg="windows-vista"] {
  background: #087d9f url("wallpapers/windows-vista-aurora.jpg") center / cover no-repeat;
}

.background-option[data-bg="peach"],
.background-option[data-bg="win7"],
.background-option[data-bg="windows7"],
.background-option[data-bg="glow"] {
  background: #0a75ce url("wallpapers/windows-7-harmony.jpg") center / cover no-repeat;
}

.background-option[data-bg="night"],
.background-option[data-bg="lavender"],
.background-option[data-bg="win11"],
.background-option[data-bg="windows11"],
.background-option[data-bg="bloom"] {
  background: #9fc1d8 url("wallpapers/windows-11-bloom.jpg") center / cover no-repeat;
}

.background-option.upload {
  border: 1px dashed rgba(60, 60, 67, .24);
  background: rgba(255, 255, 255, .48);
  color: #6e6e73;
}

.form-row input,
.form-row select,
.form-row textarea {
  min-height: 46px;
  border-color: rgba(60, 60, 67, .12);
  border-radius: 13px;
  background: rgba(255, 255, 255, .68);
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: rgba(10, 132, 255, .50);
  box-shadow: 0 0 0 4px rgba(10, 132, 255, .11);
}

.switch input:checked + span { background: #34c759; }

.screen-card {
  border-color: rgba(60, 60, 67, .08);
  background: rgba(255, 255, 255, .52);
}

.screen-card.active {
  border-color: rgba(10, 132, 255, .30);
  background: rgba(226, 241, 255, .72);
}

.screen-card > i {
  background: url("wallpapers/windows-xp-bliss.bmp") center / cover;
}

.toast {
  border-color: rgba(255, 255, 255, .18);
  border-radius: 14px;
  background: rgba(29, 29, 32, .84);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  backdrop-filter: blur(28px) saturate(1.4);
}

.app.dark-ui .glass-button,
.app.dark-ui .screen-title,
.app.dark-ui .screen-navigation,
.app.dark-ui .drawing-tools {
  background: linear-gradient(180deg, rgba(28, 28, 31, .88), rgba(12, 12, 14, .90));
}

@media (max-width: 1100px) {
  .screen-navigation { bottom: 120px; }
}

@media (max-width: 980px) {
  .widget-dock { max-width: calc(100vw - 170px); }
  .work-widget { grid-template-columns: minmax(105px, .72fr) minmax(190px, 1.6fr); }
  .work-mode-grid { grid-template-columns: repeat(3, minmax(56px, 1fr)); }
}

@media (max-width: 720px) {
  :root { --dock-bottom: 9px; }
  .widget-dock { height: 72px; border-radius: 22px; }
  .dock-item { border-radius: 15px; }
  .drawer { bottom: 88px; }
  .work-widget { grid-template-columns: minmax(92px, .7fr) minmax(160px, 1.6fr); }
  .work-mode-grid { grid-template-columns: repeat(3, minmax(50px, 1fr)); grid-auto-rows: minmax(62px, 1fr); }
}

@media (max-width: 520px) {
  .work-widget { padding: 10px; grid-template-columns: minmax(82px, .7fr) minmax(130px, 1.5fr); gap: 8px; }
  .work-current { padding: 9px; border-radius: 16px; }
  .work-current-eyebrow { font-size: 7px; }
  .work-current-emoji { font-size: 38px; }
  .work-current strong { font-size: 13px; }
  .work-mode-grid { grid-template-columns: repeat(2, minmax(48px, 1fr)); grid-auto-rows: minmax(58px, 1fr); gap: 5px; }
  .work-mode { border-radius: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .background,
  .widget,
  .dock-item,
  .glass-button,
  .gallery-item,
  .work-mode { transition-duration: .01ms !important; }
}

@container (max-width: 520px) {
  .work-widget {
    padding: 11px;
    grid-template: auto minmax(0, 1fr) / 1fr;
    gap: 9px;
  }

  .work-current {
    min-height: 74px;
    padding: 9px 15px;
    flex-direction: row;
    gap: 10px;
    border-radius: 17px;
  }

  .work-current-eyebrow { display: none; }
  .work-current-emoji { font-size: clamp(34px, 11cqw, 48px); }
  .work-current strong { font-size: clamp(14px, 5cqw, 20px); }
  .work-mode-grid { grid-template-columns: repeat(3, minmax(58px, 1fr)); grid-auto-rows: minmax(64px, 1fr); }
}

@container (max-width: 300px) {
  .work-current { min-height: 62px; padding: 7px 10px; }
  .work-current-emoji { font-size: 32px; }
  .work-current strong { font-size: 13px; }
  .work-mode-grid { grid-template-columns: repeat(2, minmax(52px, 1fr)); grid-auto-rows: minmax(58px, 1fr); }
}

/* Swiss railway-inspired analog clock */
.widget[data-type="clock"] { container-type: size; }

.clock-widget.analog-mode {
  padding: clamp(9px, 3cqh, 18px);
  gap: clamp(7px, 2.2cqh, 12px);
}

.analog-clock {
  position: relative;
  width: min(76cqw, 70cqh, 240px);
  max-width: none;
  aspect-ratio: 1;
  flex: 0 0 auto;
  overflow: hidden;
  border: clamp(5px, 2.1cqw, 9px) solid #d7d7d2;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 27%, rgba(255, 255, 255, .98), transparent 31%),
    radial-gradient(circle at 50% 54%, #fff 0 63%, #f2f2ed 89%, #deded8 100%);
  color: #111113;
  box-shadow:
    0 16px 34px rgba(0, 0, 0, .28),
    0 3px 8px rgba(0, 0, 0, .18),
    inset 0 0 0 1px rgba(0, 0, 0, .14),
    inset 0 0 0 clamp(2px, .7cqw, 4px) rgba(255, 255, 255, .82),
    inset 0 -10px 20px rgba(30, 30, 30, .07);
  opacity: 1;
  isolation: isolate;
}

.analog-clock::before {
  content: "";
  position: absolute;
  z-index: 6;
  inset: 2%;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255, 255, 255, .18), transparent 35%, rgba(0, 0, 0, .025) 75%, rgba(255, 255, 255, .15));
  pointer-events: none;
}

.analog-clock::after { display: none; }

.clock-indices {
  position: absolute;
  z-index: 1;
  inset: 6.2%;
  border-radius: 50%;
}

.clock-tick {
  position: absolute;
  inset: 0;
  transform: rotate(calc(var(--tick) * 6deg));
}

.clock-tick::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: clamp(1px, .55cqw, 2px);
  height: 3.7%;
  border-radius: 999px;
  background: rgba(17, 17, 19, .72);
  transform: translateX(-50%);
}

.clock-tick.major::before {
  width: clamp(3px, 1.25cqw, 5px);
  height: 10.5%;
  border-radius: 1px;
  background: #101012;
}

.clock-signature {
  position: absolute;
  z-index: 2;
  top: 65%;
  left: 50%;
  color: rgba(17, 17, 19, .68);
  font-size: clamp(5px, 2.2cqw, 9px);
  font-weight: 780;
  letter-spacing: .14em;
  line-height: 1.25;
  text-align: center;
  transform: translateX(-50%);
}

.clock-signature small {
  display: block;
  margin-top: 1px;
  font-size: .62em;
  font-weight: 650;
  letter-spacing: .23em;
  opacity: .54;
}

.analog-clock .clock-hand {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 50%;
  border-radius: 999px 999px 35% 35%;
  background: #101012;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .20);
  transform-origin: 50% 100%;
}

.analog-clock .clock-hand.hour {
  width: clamp(5px, 3.4cqw, 11px);
  height: 27%;
  margin-left: clamp(-5.5px, -1.7cqw, -2.5px);
}

.analog-clock .clock-hand.minute {
  width: clamp(4px, 2.5cqw, 8px);
  height: 38%;
  margin-left: clamp(-4px, -1.25cqw, -2px);
}

.analog-clock .clock-hand.second {
  z-index: 5;
  width: clamp(1px, .8cqw, 3px);
  height: 42%;
  margin-left: clamp(-1.5px, -.4cqw, -.5px);
  border-radius: 999px;
  background: #e21d2f;
  box-shadow: 0 1px 3px rgba(153, 0, 17, .24);
}

.analog-clock .clock-hand.second::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: clamp(11px, 5.3cqw, 19px);
  aspect-ratio: 1;
  border: clamp(2px, .9cqw, 3px) solid #e21d2f;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(153, 0, 17, .16);
  transform: translate(-50%, -4%);
}

.analog-clock .clock-hand.second::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 100%;
  height: 23%;
  border-radius: inherit;
  background: inherit;
  transform: translateX(-50%);
}

.clock-pin {
  position: absolute;
  z-index: 7;
  top: 50%;
  left: 50%;
  width: clamp(10px, 5cqw, 18px);
  aspect-ratio: 1;
  border: clamp(2px, .9cqw, 3px) solid #101012;
  border-radius: 50%;
  background: #e21d2f;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .32);
  transform: translate(-50%, -50%);
}

.clock-widget.analog-mode .clock-date {
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .09);
  color: inherit;
  font-size: clamp(8px, 4.2cqh, 11px);
  font-weight: 600;
  opacity: .72;
}

@container (max-height: 160px) {
  .clock-widget.analog-mode { padding: 6px; flex-direction: row; gap: 8px; }
  .analog-clock { width: min(48cqw, 84cqh, 150px); }
  .clock-widget.analog-mode .clock-date { max-width: 42%; text-align: center; }
}

/* ========================================================================== */
/* Fluid widget system + expressive timer                                    */
/* ========================================================================== */

.widget {
  container-type: size;
}

.widget-content {
  --widget-pad: clamp(8px, min(5cqw, 6cqh), 24px);
  --widget-gap: clamp(4px, min(2.4cqw, 3.2cqh), 13px);
}

.widget-content > * {
  min-width: 0;
  min-height: 0;
}

/* Timer effects */
.timer-widget {
  --timer-accent: #5ac8fa;
  --timer-accent-strong: #0a84ff;
  --timer-danger: #ff4968;
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  padding: var(--widget-pad);
  overflow: hidden;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--widget-gap);
  isolation: isolate;
}

.timer-widget.is-urgent {
  --timer-accent: #ff7a4d;
  --timer-accent-strong: var(--timer-danger);
}

.widget[data-type="timer"]:is([data-theme="white"], [data-theme="mint"], [data-theme="coral"]) .timer-meta {
  color: rgba(29, 29, 31, .62);
}

.widget[data-type="timer"]:is([data-theme="white"], [data-theme="mint"], [data-theme="coral"]) .timer-progress-rail {
  background: rgba(29, 29, 31, .11);
}

.widget[data-type="timer"]:is([data-theme="white"], [data-theme="mint"], [data-theme="coral"]) .timer-state-label > i {
  box-shadow: 0 0 0 3px rgba(29, 29, 31, .06);
}

.timer-visual {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.timer-progress-ring,
.timer-liquid,
.timer-blob {
  position: absolute;
  display: none;
  pointer-events: none;
}

.timer-meta {
  position: relative;
  z-index: 2;
  display: flex;
  width: min(88%, 310px);
  align-items: center;
  justify-content: space-between;
  color: rgba(255, 255, 255, .70);
  font-size: clamp(8px, min(2.6cqw, 4cqh), 16px);
  font-weight: 670;
}

.timer-state-label {
  display: inline-flex;
  align-items: center;
  gap: clamp(3px, 1cqw, 6px);
}

.timer-state-label > i {
  width: clamp(5px, min(1.9cqw, 3cqh), 8px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .38);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .06);
}

.timer-widget.is-running .timer-state-label > i {
  background: #52e0a5;
  box-shadow: 0 0 0 3px rgba(82, 224, 165, .13), 0 0 13px rgba(82, 224, 165, .45);
  animation: timer-live-dot 1.5s ease-in-out infinite;
}

.timer-widget.is-urgent .timer-state-label > i {
  background: var(--timer-danger);
  box-shadow: 0 0 0 3px rgba(255, 73, 104, .14), 0 0 16px rgba(255, 73, 104, .48);
}

.timer-progress-label {
  font-variant-numeric: tabular-nums;
  opacity: .82;
}

.timer-display {
  position: relative;
  z-index: 2;
  max-width: 100%;
  color: inherit;
  font-size: clamp(27px, min(19cqw, 34cqh), 94px);
  font-weight: 650;
  line-height: .95;
  letter-spacing: -.075em;
  text-align: center;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .14);
  white-space: nowrap;
}

.timer-widget .widget-controls,
.timer-widget .timer-adjust {
  position: relative;
  z-index: 2;
}

.timer-widget .control-button {
  width: clamp(29px, min(10cqw, 15cqh), 62px);
  height: clamp(29px, min(10cqw, 15cqh), 62px);
}

.timer-widget .control-button svg {
  width: clamp(13px, min(4.4cqw, 6.4cqh), 26px);
  height: clamp(13px, min(4.4cqw, 6.4cqh), 26px);
}

.timer-adjust {
  gap: clamp(3px, 1.2cqw, 6px);
}

.timer-adjust button {
  min-width: 0;
  padding: clamp(3px, 1.3cqh, 6px) clamp(5px, 2.2cqw, 10px);
  border-radius: clamp(6px, 2.2cqw, 10px);
  font-size: clamp(7px, min(2.7cqw, 4.4cqh), 10px);
  white-space: nowrap;
}

.timer-progress-rail {
  position: absolute;
  z-index: 3;
  right: clamp(10px, 5cqw, 24px);
  bottom: clamp(7px, 3cqh, 14px);
  left: clamp(10px, 5cqw, 24px);
  height: clamp(2px, 1.1cqh, 5px);
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .10);
}

.timer-progress-rail > i {
  display: block;
  width: var(--timer-remaining);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--timer-accent-strong), var(--timer-accent));
  box-shadow: 0 0 12px color-mix(in srgb, var(--timer-accent) 56%, transparent);
  transition: width 240ms linear, background 300ms ease;
}

/* Orbit: a floating Apple Watch-like progress halo. */
.timer-effect-orbit .timer-progress-ring {
  top: 44%;
  left: 50%;
  display: block;
  width: min(91cqw, 620px);
  height: min(64cqh, 250px);
  padding: clamp(2px, min(.8cqw, 1cqh), 5px);
  border-radius: clamp(20px, min(9cqw, 12cqh), 58px);
  background: conic-gradient(from -90deg, var(--timer-accent) 0 var(--timer-angle), rgba(255, 255, 255, .10) var(--timer-angle) 360deg);
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--timer-accent) 28%, transparent));
  opacity: .72;
  transform: translate(-50%, -50%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: background 240ms linear;
}

.timer-effect-orbit.is-running .timer-progress-ring {
  animation: timer-ring-breathe 3.4s ease-in-out infinite;
}

/* Liquid: the remaining time visibly drains down the glass. */
.timer-effect-liquid .timer-liquid {
  right: -8%;
  bottom: -12%;
  left: -8%;
  display: block;
  height: calc(var(--timer-remaining) + 12%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--timer-accent) 56%, transparent), color-mix(in srgb, var(--timer-accent-strong) 76%, transparent));
  box-shadow: 0 -12px 34px color-mix(in srgb, var(--timer-accent) 22%, transparent);
  opacity: .48;
  transition: height 300ms linear, background 300ms ease;
}

.timer-effect-liquid .timer-liquid::before,
.timer-effect-liquid .timer-liquid::after {
  content: "";
  position: absolute;
  top: -13px;
  left: -10%;
  width: 120%;
  height: 25px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--timer-accent) 72%, transparent);
}

.timer-effect-liquid .timer-liquid::after {
  top: -9px;
  left: -18%;
  background: rgba(255, 255, 255, .13);
}

.timer-effect-liquid.is-running .timer-liquid::before { animation: timer-liquid-wave 3.2s ease-in-out infinite alternate; }
.timer-effect-liquid.is-running .timer-liquid::after { animation: timer-liquid-wave 4.1s ease-in-out -1.3s infinite alternate-reverse; }

/* Aurora: restrained moving light behind the numbers. */
.timer-effect-aurora .timer-blob {
  display: block;
  width: min(72cqw, 62cqh, 210px);
  aspect-ratio: 1;
  border-radius: 46% 54% 60% 40%;
  filter: blur(clamp(18px, 7cqw, 38px));
  opacity: .42;
}

.timer-effect-aurora .blob-one {
  top: -24%;
  right: -8%;
  background: #42d8ff;
}

.timer-effect-aurora .blob-two {
  bottom: -34%;
  left: -10%;
  background: #765cff;
}

.timer-effect-aurora.is-running .blob-one { animation: timer-aurora-one 7s ease-in-out infinite alternate; }
.timer-effect-aurora.is-running .blob-two { animation: timer-aurora-two 8.5s ease-in-out -2s infinite alternate; }

/* Minimal: typography and a precise linear progress indicator. */
.timer-effect-minimal .timer-meta { width: min(92%, 340px); }
.timer-effect-minimal .timer-display { font-weight: 570; letter-spacing: -.065em; }
.timer-effect-minimal .timer-progress-rail { height: clamp(3px, 1.4cqh, 6px); }

.timer-widget.is-urgent .timer-display {
  animation: timer-urgent-number 1s ease-in-out infinite;
}

.timer-widget.is-finished::after {
  content: "완료";
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background: rgba(12, 19, 39, .70);
  color: #fff;
  font-size: clamp(24px, min(16cqw, 25cqh), 58px);
  font-weight: 760;
  letter-spacing: -.05em;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: timer-finish-reveal 520ms var(--apple-ease) both;
}

@keyframes timer-live-dot { 50% { opacity: .45; transform: scale(.78); } }
@keyframes timer-ring-breathe { 50% { opacity: .98; filter: drop-shadow(0 0 26px color-mix(in srgb, var(--timer-accent) 42%, transparent)); } }
@keyframes timer-liquid-wave { to { transform: translateX(8%) scaleY(.82); } }
@keyframes timer-aurora-one { to { transform: translate(-34%, 28%) rotate(28deg) scale(1.15); } }
@keyframes timer-aurora-two { to { transform: translate(40%, -26%) rotate(-34deg) scale(.88); } }
@keyframes timer-urgent-number { 50% { opacity: .78; transform: scale(.985); } }
@keyframes timer-finish-reveal { from { opacity: 0; transform: scale(1.04); } }

/* Timer effect picker */
.timer-effect-picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.timer-effect-choice {
  display: grid;
  min-width: 0;
  min-height: 70px;
  padding: 8px 4px;
  place-items: center;
  gap: 4px;
  border: 1px solid rgba(60, 60, 67, .09);
  border-radius: 14px;
  background: rgba(255, 255, 255, .52);
  color: #4a4a4f;
  box-shadow: inset 0 1px rgba(255, 255, 255, .84);
  cursor: pointer;
}

.timer-effect-choice i {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: rgba(10, 132, 255, .09);
  color: #0071e3;
  font-style: normal;
  font-size: 18px;
}

.timer-effect-choice span { font-size: 9px; font-weight: 680; }

.timer-effect-choice.active {
  border-color: rgba(10, 132, 255, .36);
  background: rgba(226, 241, 255, .82);
  color: #0066cc;
  box-shadow: 0 8px 18px rgba(0, 113, 227, .12), inset 0 1px #fff;
}

/* Fluid type, spacing, and controls for every widget. */
.text-widget,
.widget[data-type="text"] .text-widget {
  padding: var(--widget-pad);
  font-size: clamp(12px, min(var(--text-cqw, 6.5cqw), var(--text-cqh, 8.7cqh)), 72px) !important;
  line-height: clamp(1.25, 1.38, 1.48);
}

.clock-widget,
.stopwatch-widget {
  padding: var(--widget-pad);
  gap: var(--widget-gap);
}

.digital-time,
.stopwatch-display {
  max-width: 100%;
  font-size: clamp(26px, min(19cqw, 31cqh), 86px);
  white-space: nowrap;
}

.clock-date {
  max-width: 92%;
  padding: clamp(3px, 1.7cqh, 6px) clamp(6px, 3cqw, 12px);
  overflow: hidden;
  font-size: clamp(7px, min(3.5cqw, 5.2cqh), 12px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.control-button {
  width: clamp(28px, min(12cqw, 16cqh), 42px);
  height: clamp(28px, min(12cqw, 16cqh), 42px);
}

.control-button svg {
  width: clamp(13px, min(5cqw, 6.8cqh), 18px);
  height: clamp(13px, min(5cqw, 6.8cqh), 18px);
}

.primary-button,
.secondary-button {
  min-height: clamp(29px, 14cqh, 42px);
  padding: clamp(6px, 3cqh, 10px) clamp(9px, 4cqw, 17px);
  border-radius: clamp(8px, 3cqw, 12px);
  font-size: clamp(8px, min(3.4cqw, 4.6cqh), 12px);
}

.random-widget,
.groups-widget,
.poll-widget {
  padding: var(--widget-pad);
  gap: var(--widget-gap);
}

.random-name {
  font-size: clamp(18px, min(13cqw, 22cqh), 52px);
}

.random-count,
.poll-widget > small {
  font-size: clamp(7px, min(2.8cqw, 4cqh), 10px);
}

.dice-widget {
  padding: var(--widget-pad);
  gap: clamp(7px, 5cqw, 20px);
}

.die {
  width: min(40cqw, 70cqh, 132px);
  padding: clamp(8px, 5.5cqw, 18px);
}

.dice-hint {
  right: clamp(6px, 3cqw, 12px);
  bottom: clamp(4px, 2cqh, 9px);
  font-size: clamp(6px, min(2.2cqw, 3.4cqh), 9px);
}

.traffic-widget {
  padding: var(--widget-pad);
  gap: clamp(5px, min(4cqw, 4cqh), 14px);
}

.traffic-light { max-height: 82cqh; align-self: center; }

.calendar-widget {
  padding: var(--widget-pad);
  gap: clamp(3px, 2cqh, 8px);
}

.calendar-heading {
  font-size: clamp(9px, min(5cqw, 7cqh), 16px);
}

.calendar-grid {
  gap: clamp(1px, .8cqw, 3px);
  font-size: clamp(7px, min(3.3cqw, 4.2cqh), 12px);
}

.calendar-grid span { min-height: 0; border-radius: clamp(3px, 1.8cqw, 7px); }
.calendar-grid .weekday { font-size: .72em; }

.score-team {
  padding: clamp(6px, min(4cqw, 5cqh), 17px);
  gap: clamp(3px, min(2cqw, 3cqh), 8px);
}

.score-name {
  font-size: clamp(8px, min(4cqw, 5cqh), 14px);
}

.score-number {
  font-size: clamp(28px, min(19cqw, 39cqh), 82px);
}

.score-actions { gap: clamp(3px, 1.5cqw, 7px); }
.score-actions button {
  width: clamp(24px, min(8.5cqw, 13cqh), 34px);
  height: clamp(24px, min(8.5cqw, 13cqh), 34px);
  font-size: clamp(12px, min(4cqw, 6cqh), 18px);
}

.poll-question {
  font-size: clamp(10px, min(5.5cqw, 7cqh), 23px);
}

.poll-options { gap: clamp(3px, 1.6cqh, 7px); }
.poll-option {
  min-height: clamp(24px, 14cqh, 39px);
  padding: 0 clamp(7px, 3cqw, 13px);
  border-radius: clamp(6px, 2.4cqw, 10px);
}
.poll-option span,
.poll-option b { font-size: clamp(7px, min(3cqw, 4.3cqh), 11px); }

.qr-widget {
  padding: var(--widget-pad);
  gap: var(--widget-gap);
}

.qr-grid {
  width: min(78cqw, 72cqh, 220px);
  padding: clamp(3px, 1.8cqw, 7px);
}

.qr-value { font-size: clamp(6px, min(2.8cqw, 3.8cqh), 10px); }

.widget-header {
  height: clamp(27px, 13cqh, 42px);
  padding: 0 clamp(7px, 3.2cqw, 15px);
  font-size: clamp(7px, min(2.8cqw, 4cqh), 10px);
}

.timetable-rows { height: calc(100% - clamp(27px, 13cqh, 42px)); }
.timetable-rows > div {
  min-height: 0;
  padding: 0 clamp(7px, 3.2cqw, 14px);
  grid-template-columns: minmax(38px, 18cqw) 1fr;
}
.timetable-rows time { font-size: clamp(7px, min(2.8cqw, 3.8cqh), 12px); }
.timetable-rows span { font-size: clamp(8px, min(3.3cqw, 4.4cqh), 14px); }

.visual-timer-widget {
  padding: var(--widget-pad);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--widget-gap);
}

.visual-timer-ring { width: min(76cqw, 72cqh, 220px); }
.visual-timer-time { font-size: clamp(17px, min(13cqw, 16cqh), 40px); }

.sound-widget {
  padding: var(--widget-pad);
  gap: clamp(4px, min(2.6cqw, 3cqh), 12px);
}

.sound-readout,
.sound-meter,
.sound-threshold-line,
.sound-stats { width: min(94%, 440px); }

.sound-value { font-size: clamp(23px, min(15cqw, 17cqh), 54px); }
.sound-relative-label,
.sound-threshold-line { font-size: clamp(6px, min(2.4cqw, 2.8cqh), 9px); }
.sound-meter { height: clamp(38px, 21cqh, 76px); border-radius: clamp(10px, 4cqw, 18px); }
.sound-stats span { min-height: clamp(21px, 10cqh, 30px); font-size: clamp(6px, min(2.2cqw, 2.5cqh), 9px); }
.sound-label { font-size: clamp(7px, min(2.7cqw, 3cqh), 10px); }

.groups-result {
  padding: var(--widget-pad);
  gap: clamp(3px, min(1.8cqw, 2cqh), 8px);
}
.groups-result article { padding: clamp(5px, min(2.7cqw, 3cqh), 11px); }
.groups-result strong { font-size: clamp(7px, min(2.7cqw, 3.4cqh), 11px); }
.groups-result p { font-size: clamp(7px, min(2.7cqw, 3.5cqh), 12px); }

/* Shape-aware composition when a widget becomes wide, narrow, or short. */
@container (max-height: 180px) {
  .timer-widget {
    display: grid;
    padding: clamp(7px, 5cqh, 12px) clamp(9px, 4cqw, 18px);
    grid-template: 1fr auto / minmax(0, 1fr) auto;
    gap: 4px 8px;
  }
  .timer-meta { position: absolute; top: 8px; left: 10px; width: auto; }
  .timer-progress-label { display: none; }
  .timer-display { grid-area: 1 / 1; align-self: center; justify-self: center; }
  .timer-widget .widget-controls { grid-area: 1 / 2; }
  .timer-widget .timer-adjust { grid-area: 2 / 1 / 3 / 3; justify-self: center; }
  .timer-progress-ring { max-width: none; height: min(66cqh, 112px); }
  .timer-progress-rail { bottom: 4px; }

  .random-widget,
  .groups-widget { padding: 7px 10px; gap: 4px; }
  .random-count,
  .poll-widget > small,
  .dice-hint,
  .sound-label,
  .sound-threshold-line,
  .qr-value { display: none; }

  .poll-widget { padding: 8px 10px; gap: 4px; }
  .poll-options { grid-template-columns: repeat(3, 1fr); }
  .poll-option { min-height: 31px; }

  .sound-widget { padding: 7px 10px; gap: 4px; }
  .sound-readout { align-items: center; }
  .sound-meter { height: 42px; }
  .sound-stats { grid-template-columns: repeat(3, 1fr); }
}

@container (max-width: 260px) {
  .timer-meta { width: 94%; }
  .timer-progress-label { display: none; }
  .timer-display { font-size: clamp(25px, min(22cqw, 31cqh), 54px); }
  .timer-adjust button { padding-inline: 5px; }

  .score-name { width: 100%; }
  .score-team { padding-inline: 4px; }

  .groups-result { grid-template-columns: 1fr; }
  .poll-question { white-space: normal; }
  .timetable-rows > div { grid-template-columns: minmax(34px, 25cqw) 1fr; }

  .sound-readout { width: 96%; }
  .sound-relative-label { display: none; }
  .sound-stats { width: 96%; gap: 3px; }
  .sound-stats span { padding-inline: 2px; }
}

@container (max-width: 220px) and (max-height: 150px) {
  .timer-widget { grid-template: 1fr / minmax(0, 1fr) auto; }
  .timer-meta,
  .timer-adjust { display: none; }
  .timer-progress-rail { right: 8px; left: 8px; }

  .clock-date,
  .random-count,
  .poll-widget > small,
  .sound-stats,
  .sound-label { display: none; }
}

@container (min-width: 520px) and (max-height: 230px) {
  .visual-timer-widget {
    grid-template: 1fr / minmax(0, 1fr) auto;
  }
  .visual-timer-ring { width: min(42cqw, 78cqh, 180px); }

  .qr-widget { flex-direction: row; }
  .qr-grid { width: min(42cqw, 82cqh, 190px); }
  .qr-value { width: 44%; text-align: left; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .timer-widget *,
  .timer-widget::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Direct time editing + range-aware random picker */
.timer-display {
  display: grid;
  width: min(94%, 390px);
  max-width: none;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(1px, .7cqw, 4px);
  font-size: initial;
  line-height: 1;
  letter-spacing: 0;
}

.timer-time-unit {
  display: grid;
  min-width: 0;
  grid-template-rows: auto auto auto auto;
  place-items: center;
  gap: clamp(1px, .7cqh, 3px);
}

.timer-value {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: clamp(1px, .7cqw, 6px);
  color: inherit;
}

.timer-time-unit small {
  color: currentColor;
  font-size: clamp(6px, min(1.8cqw, 2.5cqh), 13px);
  font-weight: 650;
  opacity: .48;
}

.timer-separator {
  position: relative;
  align-self: center;
  width: clamp(4px, 1.6cqw, 12px);
  height: min(9cqw, 18cqh, 66px);
  margin-top: clamp(0px, 1cqh, 5px);
  font-size: 0;
  opacity: .72;
}

.timer-separator::before,
.timer-separator::after {
  content: "";
  position: absolute;
  left: 50%;
  width: clamp(3px, 1cqw, 8px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px color-mix(in srgb, currentColor 44%, transparent);
  transform: translate(-50%, -50%);
}

.timer-separator::before { top: 34%; }
.timer-separator::after { top: 68%; }

.timer-step {
  display: grid;
  width: clamp(24px, min(7.5cqw, 10cqh), 45px);
  height: clamp(17px, min(5.5cqw, 7cqh), 30px);
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  color: inherit;
  box-shadow: inset 0 1px rgba(255, 255, 255, .08);
  opacity: .92;
  cursor: pointer;
  transition: opacity 160ms ease, background 160ms ease, transform 160ms ease;
}

.timer-step:hover,
.timer-step:focus-visible {
  background: rgba(255, 255, 255, .19);
  opacity: 1;
  outline: none;
  transform: scale(1.06);
}

.timer-step:active { transform: scale(.92); }
.timer-step svg { width: clamp(11px, 3.4cqw, 15px); height: clamp(11px, 3.4cqw, 15px); stroke-width: 2.35; }
.timer-effect-minimal .timer-value { font-weight: 570; }
.timer-widget.is-urgent .timer-display { animation: timer-urgent-number 1s ease-in-out infinite; }
.timer-widget.is-finished::after { pointer-events: none; }

.digital-digit {
  position: relative;
  display: block;
  width: clamp(13px, min(8cqw, 17cqh), 96px);
  aspect-ratio: .58;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 clamp(2px, 1cqw, 9px) color-mix(in srgb, currentColor 24%, transparent));
}

.digital-segment {
  position: absolute;
  display: block;
  border-radius: 999px;
  background: currentColor;
  box-shadow: none;
  opacity: .09;
  transition: opacity 150ms ease, filter 150ms ease;
}

.segment-a,
.segment-d,
.segment-g {
  left: 17%;
  width: 66%;
  height: 8%;
  clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
}

.segment-a { top: 1%; }
.segment-g { top: 46%; }
.segment-d { bottom: 1%; }

.segment-b,
.segment-c,
.segment-e,
.segment-f {
  width: 10%;
  height: 39%;
  clip-path: polygon(50% 0, 100% 9%, 100% 91%, 50% 100%, 0 91%, 0 9%);
}

.segment-b { top: 7%; right: 3%; }
.segment-c { right: 3%; bottom: 7%; }
.segment-e { bottom: 7%; left: 3%; }
.segment-f { top: 7%; left: 3%; }

.digital-digit:is([data-digit="0"], [data-digit="2"], [data-digit="3"], [data-digit="5"], [data-digit="6"], [data-digit="7"], [data-digit="8"], [data-digit="9"]) .segment-a,
.digital-digit:is([data-digit="0"], [data-digit="1"], [data-digit="2"], [data-digit="3"], [data-digit="4"], [data-digit="7"], [data-digit="8"], [data-digit="9"]) .segment-b,
.digital-digit:is([data-digit="0"], [data-digit="1"], [data-digit="3"], [data-digit="4"], [data-digit="5"], [data-digit="6"], [data-digit="7"], [data-digit="8"], [data-digit="9"]) .segment-c,
.digital-digit:is([data-digit="0"], [data-digit="2"], [data-digit="3"], [data-digit="5"], [data-digit="6"], [data-digit="8"], [data-digit="9"]) .segment-d,
.digital-digit:is([data-digit="0"], [data-digit="2"], [data-digit="6"], [data-digit="8"]) .segment-e,
.digital-digit:is([data-digit="0"], [data-digit="4"], [data-digit="5"], [data-digit="6"], [data-digit="8"], [data-digit="9"]) .segment-f,
.digital-digit:is([data-digit="2"], [data-digit="3"], [data-digit="4"], [data-digit="5"], [data-digit="6"], [data-digit="8"], [data-digit="9"]) .segment-g {
  opacity: .98;
  filter: saturate(1.18) brightness(1.1);
}

.widget[data-type="timer"]:is([data-theme="white"], [data-theme="mint"], [data-theme="coral"]) .timer-step {
  border-color: rgba(29, 29, 31, .08);
  background: rgba(29, 29, 31, .06);
}

.timer-setting-guide,
.random-setting-guide {
  margin: 7px 0 13px;
  color: #777982;
  font-size: 10px;
  line-height: 1.55;
}

.timer-duration-inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: 7px;
}

.timer-duration-inputs > i {
  padding-top: 15px;
  color: #8e8e93;
  font-size: 20px;
  font-style: normal;
  font-weight: 650;
}

.timer-duration-inputs label {
  display: grid;
  gap: 6px;
  text-align: center;
}

.timer-duration-inputs input,
.random-range-inputs input {
  width: 100%;
  height: 58px;
  padding: 6px;
  border: 1px solid rgba(60, 60, 67, .12);
  border-radius: 15px;
  background: rgba(255, 255, 255, .78);
  color: #1d1d1f;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .035), 0 1px rgba(255, 255, 255, .9);
  font-size: 24px;
  font-weight: 680;
  font-variant-numeric: tabular-nums;
  text-align: center;
  outline: 0;
}

.timer-duration-inputs input:focus,
.random-range-inputs input:focus {
  border-color: rgba(10, 132, 255, .54);
  box-shadow: 0 0 0 4px rgba(10, 132, 255, .11);
}

.timer-duration-inputs label > span,
.random-range-inputs label > span {
  color: #777982;
  font-size: 9px;
  font-weight: 680;
}

.timer-quick-presets {
  display: grid;
  margin-top: 13px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.timer-quick-presets button,
.random-mode-picker button {
  min-height: 36px;
  padding: 7px 5px;
  border: 1px solid rgba(60, 60, 67, .08);
  border-radius: 10px;
  background: rgba(118, 118, 128, .08);
  color: #48484a;
  font-size: 10px;
  font-weight: 680;
  cursor: pointer;
}

.timer-quick-presets button.active,
.random-mode-picker button.active {
  border-color: rgba(10, 132, 255, .26);
  background: rgba(10, 132, 255, .12);
  color: #0066cc;
  box-shadow: inset 0 1px rgba(255, 255, 255, .75);
}

.timer-duration-apply,
.random-range-apply { width: 100%; margin-top: 10px; }
.timer-duration-settings .form-row { margin-top: 20px; }

.random-mode-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.random-range-inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 9px;
}

.random-range-inputs label { display: grid; gap: 6px; text-align: center; }
.random-range-inputs > i { padding-bottom: 21px; color: #8e8e93; font-size: 9px; font-style: normal; font-weight: 680; }
.random-widget.number-mode .random-name { font-size: clamp(28px, min(18cqw, 29cqh), 72px); font-variant-numeric: tabular-nums; }

@container (max-height: 180px) {
  .timer-value { font-size: clamp(18px, min(8cqw, 24cqh), 42px); }
  .timer-step { width: clamp(20px, 4.8cqw, 25px); height: 15px; }
  .timer-step svg { width: 10px; height: 10px; }
  .timer-time-unit small { display: none; }
  .timer-separator { font-size: clamp(14px, 5cqh, 22px); }
}

@container (max-width: 220px) and (max-height: 150px) {
  .timer-display { width: 100%; gap: 0; }
  .timer-value { font-size: clamp(17px, 13cqw, 27px); }
  .timer-step { width: 18px; height: 12px; }
  .timer-widget .widget-controls { gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .timer-step { transition-duration: .01ms !important; }
}