:root {
  --black: #03080B;
  --panel-black: #07141A;
  --blue: #0788F5;
  --cyan: #28D5F5;
  --teal: #00CFAE;
  --green: #39E58B;
  --violet: #6568D8;
  --white: #D9F7F8;
  --gray: #71919C;
  --line: rgba(0, 207, 174, .34);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--black); }

body {
  color: var(--cyan);
  font-family: "Arial Narrow", "Avenir Next", Arial, sans-serif;
  font-weight: 600;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }

.app-shell {
  position: relative;
  width: min(100vw, 390px);
  height: 100dvh;
  min-height: 760px;
  margin: 0 auto;
  padding: calc(13px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: var(--black);
}

.system-header { display: flex; justify-content: space-between; gap: 8px; color: var(--cyan); font-size: 9px; line-height: 1; text-transform: uppercase; }
.system-header span:nth-child(2), .system-header span:nth-child(4) { color: var(--violet); }

.chime-control {
  flex: 0 0 84px;
  display: grid;
  grid-template-columns: 42px 1fr 31px;
  align-items: center;
  gap: 7px;
  padding: 0 18px;
  border: 5px solid var(--blue);
  border-radius: 28px;
  background: #383D79;
  color: var(--cyan);
  font-size: clamp(24px, 7vw, 30px);
  font-weight: 800;
  text-align: center;
}
.chime-control:active { background: #4E56A0; transform: translateY(1px); }
.chime-mark { font-size: 36px; line-height: 1; }
.sound-mark { font-size: 24px; letter-spacing: -8px; text-align: left; }

.status-panel {
  position: relative;
  flex: 0 0 171px;
  overflow: hidden;
  border: 0;
  background: transparent;
  text-align: left;
}
.status-panel:active { background: var(--panel-black); }
.section-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; user-select: none; }
.status-panel > :not(.section-frame), .clock-panel > :not(.section-frame) { z-index: 1; }
.panel-label { position: absolute; top: -1px; left: 23px; padding: 0 4px; background: var(--black); font-size: 13px; color: var(--blue); }
.panel-accent { position: absolute; top: 0; right: 0; width: 34%; height: 20px; background: var(--cyan); }
.status-ring { position: absolute; left: 16px; top: 30px; width: 110px; height: 110px; fill: none; stroke-width: 11; stroke-linecap: butt; }
.ring-blue { stroke: var(--blue); }
.ring-green { stroke: var(--green); }
.ring-break { stroke: var(--black); stroke-width: 5; stroke-dasharray: 4 27; }
.status-copy { position: absolute; left: 130px; top: 69px; display: flex; flex-direction: column; gap: 2px; }
.status-copy strong { color: var(--green); font-size: clamp(31px, 8vw, 43px); line-height: .9; letter-spacing: .01em; }
.status-copy span { color: var(--green); font-size: 22px; font-weight: 500; }
.status-readout { position: absolute; right: 16px; top: 47px; color: var(--violet); font-size: 16px; line-height: 1.45; }
.status-bar { position: absolute; right: 11px; top: 48px; width: 8px; height: 88px; background: var(--green); }
.next-appointment { position: absolute; right: 17px; bottom: 3px; display: flex; align-items: baseline; gap: 5px; color: var(--cyan); font-size: 13px; font-weight: 500; }
.next-appointment strong { color: var(--blue); font-size: 34px; line-height: .8; }

.status-grid { flex: 0 0 182px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 18px; }
.status-button { min-width: 0; display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 10px; padding: 9px 10px; border: 5px solid var(--blue); border-radius: 27px; background: var(--black); text-align: left; font-size: 14px; line-height: 1.05; }
.status-button:active, .status-button.active { background: var(--panel-black); }
.status-icon { height: 52px; display: grid; place-items: center; }
.status-icon img { width: 52px; height: 52px; display: block; }

.schedule-panel { flex: 1 1 106px; min-height: 96px; color: var(--teal); }
.schedule-head { display: flex; justify-content: space-between; font-size: 10px; color: var(--green); padding: 0 9px 4px; }
.schedule-head span:last-child { color: var(--cyan); font-weight: 400; }
.schedule-grid { height: calc(100% - 18px); display: grid; grid-template-columns: 25px repeat(5, 1fr) 25px; grid-template-rows: repeat(9, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.schedule-cell { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 7px; }
.schedule-cell.time { display: grid; place-items: center; border-right: 0; color: var(--green); font-size: 9px; font-weight: 500; }
.schedule-cell.day { background: var(--blue); border-color: var(--black); }
.schedule-cell.side { background: rgba(113,145,156,.82); }
.schedule-cell.event { background: var(--violet); }
.schedule-cell.now { box-shadow: inset 0 2px 0 var(--green); }

.clock-panel { position: relative; flex: 0 0 114px; border: 0; padding: 12px 13px; }
.clock-label { position: absolute; top: -3px; right: 16px; padding: 0 4px; background: var(--black); color: var(--blue); font-size: 12px; font-weight: 400; }
.clock-time { position: absolute; left: 12px; bottom: 4px; color: var(--blue); font-size: clamp(61px, 18vw, 82px); line-height: .8; font-weight: 400; letter-spacing: -.08em; }
.clock-date { position: absolute; right: 15px; bottom: 6px; color: var(--blue); font-size: 16px; line-height: 1.15; text-align: right; font-weight: 400; }
.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); padding: 8px 14px; border: 2px solid var(--cyan); border-radius: 20px; background: var(--panel-black); color: var(--white); opacity: 0; pointer-events: none; transition: .2s ease; font-size: 13px; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-height: 790px) {
  .app-shell { gap: 6px; }
  .chime-control { flex-basis: 70px; }
  .status-panel { flex-basis: 155px; }
  .status-grid { flex-basis: 168px; }
  .clock-panel { flex-basis: 102px; }
}