.shift-summary {
  width: calc(100% - 48px);
  max-width: 920px;
  margin: 12px auto 16px;
  padding: 24px;
  box-sizing: border-box;
  border: 1px solid #d9e5df;
  border-radius: 20px;
  background: linear-gradient(145deg,#f9fbfa 0%,#f1f6f3 100%);
  color: #152820;
  box-shadow:0 14px 38px rgba(28,67,49,.08);
}
.shift-summary-heading { display:grid; grid-template-columns:42px minmax(0,1fr) 42px; align-items:center; gap:14px; margin-bottom:18px; }
.shift-summary-title { min-width:0; text-align:center; }
.shift-summary-eyebrow { margin:0 0 4px; color:#66776d; font-size:10px; font-weight:750; letter-spacing:1.15px; }
.app .shift-summary h3 { margin:0; font-size:22px; line-height:1.25; font-weight:700; }
.shift-summary-check { display:grid; place-items:center; width:40px; height:40px; border:1px solid #d1e5d4; border-radius:13px; background:#e7f3e6; color:#367143; font-size:19px; font-weight:800; box-shadow:inset 0 1px 0 rgba(255,255,255,.8); }
.shift-summary-close { display:grid; place-items:center; width:40px; height:40px; padding:0; border:1px solid #d8e2dd; border-radius:12px; background:rgba(255,255,255,.82); color:#526159; font:400 24px/1 Arial,sans-serif; cursor:pointer; }
.shift-summary-close:hover { background:#fff; color:#172820; }
.shift-summary-close:focus-visible,.shift-summary-reopen:focus-visible { outline:2px solid #c92130; outline-offset:3px; }
.shift-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.shift-summary-metric { display:flex; min-width:0; min-height:126px; flex-direction:column; align-items:center; justify-content:center; padding:17px 14px; border:1px solid #dfe8e3; border-radius:14px; background:rgba(255,255,255,.88); text-align:center; box-shadow:0 4px 14px rgba(25,61,45,.035); }
.shift-summary-metric strong { color:#152820; font-size:25px; line-height:1; font-weight:750; font-variant-numeric:tabular-nums; }
.shift-summary-metric.is-primary{border-color:#eed9dc;background:linear-gradient(145deg,#fff,#fff7f8)}
.shift-summary-metric.is-primary strong { color:#b92b37; font-size:32px; }
.shift-summary-metric.is-primary.is-all-on-time{border-color:#cfe5d6;background:linear-gradient(145deg,#fff,#f2faf5)}
.shift-summary-metric.is-primary.is-all-on-time strong{color:#2d7248;font-size:30px}
.shift-summary-metric.is-primary.is-completed strong { color:#3e7241; font-size:25px; }
.shift-summary-metric.is-primary.is-unverified{border-color:#eadfc9;background:linear-gradient(145deg,#fff,#fcf8ef)}
.shift-summary-metric.is-primary.is-unverified strong { max-width:160px; color:#77551f; font-size:22px; line-height:1.12; }
.shift-summary-metric.is-on-time{border-color:#cfe5d6;background:linear-gradient(145deg,#fff,#f2faf5)}
.shift-summary-metric.is-on-time strong{color:#287146!important}
.shift-summary-metric.is-early{border-color:#cfe1ed;background:linear-gradient(145deg,#fff,#f3f9fd)}
.shift-summary-metric.is-early strong{color:#2772a3}
.shift-summary-metric.is-late{border-color:#edd4d7;background:linear-gradient(145deg,#fff,#fff5f6)}
.shift-summary-metric.is-late strong{color:#b92b37}
.shift-summary-metric > span { margin-top:9px; color:#405248; font-size:12px; font-weight:680; }
.shift-summary-metric small { margin-top:5px; color:#718079; font-size:10px; line-height:1.35; }
.app .shift-summary-note { max-width:780px; margin:14px auto 0; padding:10px 13px; border:1px solid #dfe8e3; border-radius:11px; background:rgba(255,255,255,.55); color:#61736a; font-size:11px; line-height:1.5; text-align:center; }
.shift-summary-reopen { display:block; margin:12px auto; padding:8px 13px; border:1px solid #d8e2db; border-radius:999px; background:#f5f8f5; color:#42544a; font-size:12px; font-weight:650; cursor:pointer; }
.shift-summary-reopen:hover { background:#edf3ee; }
.app.large-text .shift-summary-metric > span { font-size:14px; }
.app.large-text .shift-summary-note { font-size:13px; }
:root.dark-mode .shift-summary { color:#edf3ee; background:linear-gradient(135deg,#202c27 0%,#1b2821 100%); border-color:#405248; }
:root.dark-mode .shift-summary-grid { background:transparent; }
:root.dark-mode .shift-summary-metric { border-color:#405248;background:#1b2622;box-shadow:none }
:root.dark-mode .shift-summary-metric strong { color:#edf3ee!important; }
:root.dark-mode .shift-summary-metric.is-primary strong { color:#ff747d!important; }
:root.dark-mode .shift-summary-metric.is-primary.is-completed strong { color:#9cdbad!important; }
:root.dark-mode .shift-summary-metric.is-primary.is-unverified strong { color:#f0c478!important; }
:root.dark-mode .shift-summary-metric.is-primary,:root.dark-mode .shift-summary-metric.is-primary.is-all-on-time,:root.dark-mode .shift-summary-metric.is-primary.is-unverified{border-color:#455a4e;background:#1e2b25}
:root.dark-mode .shift-summary-metric.is-on-time,:root.dark-mode .shift-summary-metric.is-early,:root.dark-mode .shift-summary-metric.is-late{border-color:#455a4e;background:#1e2b25}
:root.dark-mode .shift-summary-metric.is-on-time strong{color:#8adea8!important}
:root.dark-mode .shift-summary-metric.is-early strong{color:#83c9f2!important}
:root.dark-mode .shift-summary-metric.is-late strong{color:#ff8b94!important}
:root.dark-mode .shift-summary-metric > span { color:#d0ddd4; }
:root.dark-mode .shift-summary :is(.shift-summary-eyebrow,.shift-summary-metric small,.shift-summary-note) { color:#aebfb4; }
:root.dark-mode .shift-summary-note{border-color:#405248;background:#1b2622}
:root.dark-mode .shift-summary-check { color:#a8dfb6; background:#294333; }
:root.dark-mode .shift-summary-close,:root.dark-mode .shift-summary-reopen { color:#dce9df; background:#24342c; border-color:#455a4e; }
:root.dark-mode .shift-summary-close:hover,:root.dark-mode .shift-summary-reopen:hover { background:#30443a; color:#fff; }
@media (max-width:760px) {
  .shift-summary { width:calc(100% - 28px); margin:8px auto 10px; padding:18px 16px; }
  .shift-summary-heading { grid-template-columns:36px minmax(0,1fr) 36px; gap:10px; }
  .shift-summary-check,.shift-summary-close { width:36px; height:36px; }
  .shift-summary-grid { grid-template-columns:1fr 1fr; }
  .shift-summary-metric { min-height:112px; padding:15px 12px; }
  .shift-summary-metric.is-primary strong { font-size:31px; }
}
@media (max-width:390px) {
  .shift-summary { width:calc(100% - 20px); }
  .app .shift-summary h3 { font-size:19px; }
  .shift-summary-metric strong { font-size:21px; }
  .shift-summary-metric.is-primary strong { font-size:29px; }
}
@media print { .shift-summary { break-inside:avoid; background:#fff; } .shift-summary-close,.shift-summary-reopen { display:none; } }