.fullscreen-clock-app{
  --bg:#0b0c10;
  --fg:#f2f3f5;
  --muted:rgba(242,243,245,0.72);
  --panel:rgba(255,255,255,0.06);
  --panel2:rgba(255,255,255,0.10);
  --accent:#7aa2ff;
  background:var(--bg);
  color:var(--fg);
  border:1px solid rgba(255,255,255,0.10);
  overflow:hidden;
  padding:0;
}

.fullscreen-clock-app[data-theme="light"]{
  --bg:#f6f7fb;
  --fg:#0b0c10;
  --muted:rgba(11,12,16,0.68);
  --panel:rgba(0,0,0,0.06);
  --panel2:rgba(0,0,0,0.10);
  --accent:#2b59ff;
}

.fullscreen-clock-shell{display:flex;flex-direction:column;min-height:420px}
.fullscreen-clock-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  background:linear-gradient(to bottom, rgba(0,0,0,0.20), rgba(0,0,0,0));
}

.fullscreen-clock-app[data-theme="light"] .fullscreen-clock-topbar{
  background:linear-gradient(to bottom, rgba(255,255,255,0.65), rgba(255,255,255,0));
}

.fullscreen-clock-brand{min-width:0}
.fullscreen-clock-title{font-weight:800;letter-spacing:0.2px}
.fullscreen-clock-subtitle{font-size:12px;color:var(--muted);margin-top:2px}

.fullscreen-clock-controls{display:flex;align-items:center;gap:8px}
.fullscreen-clock-seg{display:flex;gap:6px;padding:6px;border-radius:12px;background:var(--panel)}

.fsclock-btn{
  appearance:none;
  border:1px solid transparent;
  background:var(--panel);
  color:var(--fg);
  padding:10px 12px;
  min-width:44px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  cursor:pointer;
  line-height:1;
}
.fsclock-btn:hover{background:var(--panel2)}
.fsclock-btn:focus{outline:2px solid var(--accent);outline-offset:2px}
.fsclock-btn.primary{background:rgba(122,162,255,0.18);border-color:rgba(122,162,255,0.35)}
.fullscreen-clock-app[data-theme="light"] .fsclock-btn.primary{background:rgba(43,89,255,0.14);border-color:rgba(43,89,255,0.30)}

.fullscreen-clock-topbar.is-hidden{opacity:0;pointer-events:none;transition:opacity 220ms ease}
.fullscreen-clock-topbar{transition:opacity 220ms ease}

.fullscreen-clock-stage{
  flex:1;
  display:grid;
  grid-template-columns:1fr;
  grid-template-areas:
    "digital"
    "analog";
  align-items:center;
  justify-items:center;
  gap:18px;
  padding:18px;
}

@media (min-width: 900px){
  .fullscreen-clock-stage{
    grid-template-columns:1fr 1fr;
    grid-template-areas:"analog digital";
    gap:24px;
  }
  .fullscreen-clock-analog{justify-self:end}
  .fullscreen-clock-digital-wrap{justify-self:start;text-align:left}
}

.fullscreen-clock-analog{grid-area:analog;width:min(68vw, 420px);max-width:520px;}
.fullscreen-clock-dial{width:100%;height:auto;display:block;}
.fullscreen-clock-face{fill:rgba(255,255,255,0.04);stroke:rgba(255,255,255,0.10);stroke-width:2;}
.fullscreen-clock-marks line{stroke:rgba(255,255,255,0.28);stroke-width:2;stroke-linecap:round;}
.fullscreen-clock-marks line.minor{stroke-width:1;opacity:0.55;}
.fullscreen-clock-app[data-theme="light"] .fullscreen-clock-face{fill:rgba(0,0,0,0.02);stroke:rgba(0,0,0,0.18);}
.fullscreen-clock-app[data-theme="light"] .fullscreen-clock-marks line{stroke:rgba(0,0,0,0.45);}

.fullscreen-clock-hand{stroke-linecap:round;transform-box:view-box;transform-origin:100px 100px;}
.fullscreen-clock-hand.hour{stroke:rgba(242,243,245,0.92);stroke-width:6;}
.fullscreen-clock-hand.min{stroke:rgba(242,243,245,0.86);stroke-width:4;}
.fullscreen-clock-hand.sec{stroke:rgba(122,162,255,0.92);stroke-width:2;}
.fullscreen-clock-app[data-theme="light"] .fullscreen-clock-hand.hour{stroke:rgba(11,12,16,0.92);}
.fullscreen-clock-app[data-theme="light"] .fullscreen-clock-hand.min{stroke:rgba(11,12,16,0.86);}
.fullscreen-clock-app[data-theme="light"] .fullscreen-clock-hand.sec{stroke:rgba(43,89,255,0.85);}
.fullscreen-clock-pin{fill:rgba(242,243,245,0.90);}
.fullscreen-clock-app[data-theme="light"] .fullscreen-clock-pin{fill:rgba(11,12,16,0.90);}

.fullscreen-clock-digital-wrap{grid-area:digital;width:min(92vw, 560px);text-align:center;}
.fullscreen-clock-digital{
  font-size:clamp(48px, 8vw, 120px);
  font-weight:900;
  letter-spacing:0.02em;
  font-variant-numeric:tabular-nums;
  line-height:1.05;
}
.fullscreen-clock-meta{
  margin-top:10px;
  color:var(--muted);
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}
@media (min-width: 900px){.fullscreen-clock-meta{justify-content:flex-start}}
.fullscreen-clock-dot{opacity:0.6}

.fullscreen-clock-toast{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  background:rgba(0,0,0,0.55);
  border:1px solid rgba(255,255,255,0.14);
  padding:10px 12px;
  border-radius:12px;
  color:var(--fg);
  font-size:13px;
  opacity:0;
  pointer-events:none;
  transition:opacity 180ms ease;
}
.fullscreen-clock-app[data-theme="light"] .fullscreen-clock-toast{background:rgba(0,0,0,0.72)}
.fullscreen-clock-toast.show{opacity:1}

.fullscreen-clock-dialog{
  border:none;
  border-radius:14px;
  padding:0;
  background:rgba(20,22,28,0.98);
  color:var(--fg);
  width:min(520px, calc(100vw - 26px));
  box-shadow:0 18px 70px rgba(0,0,0,0.55);
}
.fullscreen-clock-dialog.always-open{
  position:static;
  display:block;
  margin:16px auto 0;
}
.fullscreen-clock-dialog.always-open::backdrop{display:none}
.fullscreen-clock-app[data-theme="light"] .fullscreen-clock-dialog{background:rgba(255,255,255,0.98);color:var(--fg)}
.fullscreen-clock-dialog::backdrop{background:rgba(0,0,0,0.55)}
.fullscreen-clock-panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 14px 10px;
  border-bottom:1px solid rgba(255,255,255,0.10);
}
.fullscreen-clock-app[data-theme="light"] .fullscreen-clock-panel-header{border-bottom:1px solid rgba(0,0,0,0.10)}
.fullscreen-clock-panel-title{font-weight:800}
.fullscreen-clock-panel-body{padding:12px 14px 14px}
.fullscreen-clock-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0}
.fullscreen-clock-label{color:rgba(242,243,245,0.92)}
.fullscreen-clock-app[data-theme="light"] .fullscreen-clock-label{color:rgba(11,12,16,0.92)}
.fullscreen-clock-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.fullscreen-clock-small{margin-top:10px;color:var(--muted);font-size:12px;line-height:1.35}

.fullscreen-clock-select{
  appearance:none;
  background:var(--panel);
  color:var(--fg);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:10px;
  padding:8px 10px;
}
.fullscreen-clock-app[data-theme="light"] .fullscreen-clock-select{border-color:rgba(0,0,0,0.18)}

.fullscreen-clock-help-list{margin:0;padding-left:1.1em;display:grid;gap:6px}

.fullscreen-clock-app:fullscreen{
  border:none;
  border-radius:0;
  width:100vw;
  height:100vh;
  max-width:none;
  max-height:none;
}
.fullscreen-clock-app:fullscreen .fullscreen-clock-shell{min-height:100vh}
.fullscreen-clock-app:fullscreen .fullscreen-clock-digital{font-size:clamp(56px, 10vw, 160px)}

@media (prefers-reduced-motion: reduce){
  .fullscreen-clock-topbar,
  .fullscreen-clock-toast{transition:none !important;}
}