.clockstack-app {
    --clockstack-primary: #2563eb;
    --clockstack-primary-dark: #1d4ed8;
    --clockstack-ink: #172033;
    --clockstack-muted: #667085;
    --clockstack-border: #e4e7ec;
    --clockstack-surface: #ffffff;
    color: var(--clockstack-ink);
    font-family: inherit;
    margin: 24px auto;
    max-width: 1100px;
}

.clockstack-hero {
    align-items: center;
    background: linear-gradient(135deg, #14213d, #244a87);
    border-radius: 18px;
    color: #fff;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    margin-bottom: 18px;
    padding: 28px;
}

.clockstack-hero h2 { color: #fff; font-size: 30px; margin: 4px 0; }
.clockstack-hero p { margin: 0; opacity: .82; }
.clockstack-eyebrow, .clockstack-kicker { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.clockstack-eyebrow { color: #bfdbfe; }
.clockstack-kicker { color: var(--clockstack-primary); }
.clockstack-week-total { min-width: 130px; text-align: right; }
.clockstack-week-total span, .clockstack-week-total small { display: block; opacity: .8; }
.clockstack-week-total strong { display: block; font-size: 38px; line-height: 1.1; }

.clockstack-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.clockstack-card { background: var(--clockstack-surface); border: 1px solid var(--clockstack-border); border-radius: 16px; box-shadow: 0 8px 26px rgba(16, 24, 40, .05); padding: 22px; }
.clockstack-card h3 { color: var(--clockstack-ink); margin: 5px 0 18px; }
.clockstack-history-card { margin-top: 18px; }
.clockstack-live-time { font-size: clamp(38px, 6vw, 62px); font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: -.04em; margin: 18px 0 2px; }
.clockstack-live-time.is-paused { color: #b45309; }
.clockstack-clock-status { color: var(--clockstack-muted); margin: 0 0 20px; }
.clockstack-button-row { display: flex; flex-wrap: wrap; gap: 10px; }
.clockstack-button-row form { margin: 0; }

.clockstack-stack-form, .clockstack-manual-form { display: grid; gap: 12px; }
.clockstack-manual-form label, .clockstack-stack-form label { color: #344054; display: grid; font-size: 12px; font-weight: 700; gap: 6px; }
.clockstack-form-row { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.clockstack-lunch-fields { background: #f8fafc; border: 1px solid #e4e7ec; border-radius: 10px; margin: 0; padding: 12px; }
.clockstack-lunch-fields legend { color: #344054; font-size: 12px; font-weight: 800; padding: 0 5px; }
.clockstack-lunch-fields small { color: var(--clockstack-muted); display: block; font-size: 11px; margin-top: 8px; }
.clockstack-app input, .clockstack-app select { background: #fff; border: 1px solid #d0d5dd; border-radius: 9px; box-sizing: border-box; font: inherit; min-height: 42px; padding: 8px 10px; width: 100%; }
.clockstack-button { border: 0; border-radius: 9px; cursor: pointer; display: inline-block; font: inherit; font-weight: 700; min-height: 42px; padding: 10px 16px; text-align: center; }
.clockstack-button-primary { background: var(--clockstack-primary); color: #fff; }
.clockstack-button-primary:hover { background: var(--clockstack-primary-dark); color: #fff; }
.clockstack-button-secondary { background: #eef4ff; color: #1d4ed8; }
.clockstack-button-danger { background: #b42318; color: #fff; }

.clockstack-section-heading { align-items: end; display: flex; gap: 20px; justify-content: space-between; margin-bottom: 12px; }
.clockstack-section-heading h3 { margin-bottom: 0; }
.clockstack-section-heading > span { color: var(--clockstack-muted); font-size: 13px; }
.clockstack-table-wrap { overflow-x: auto; }
.clockstack-table { border-collapse: collapse; min-width: 680px; width: 100%; }
.clockstack-table th { color: var(--clockstack-muted); font-size: 11px; letter-spacing: .06em; padding: 10px; text-align: left; text-transform: uppercase; }
.clockstack-table td { border-top: 1px solid #eef1f5; padding: 12px 10px; }
.clockstack-status { background: #ecfdf3; border-radius: 999px; color: #067647; display: inline-block; font-size: 11px; font-weight: 700; padding: 4px 8px; }
.clockstack-empty { color: var(--clockstack-muted); padding: 28px !important; text-align: center; }
.clockstack-notice { border: 1px solid transparent; border-radius: 10px; margin: 0 0 16px; padding: 12px 15px; }
.clockstack-notice-success { background: #ecfdf3; border-color: #abefc6; color: #067647; }
.clockstack-notice-error { background: #fef3f2; border-color: #fecdca; color: #b42318; }
.clockstack-notice-info { background: #eff8ff; border-color: #b2ddff; color: #175cd3; }

@media (max-width: 760px) {
    .clockstack-grid { grid-template-columns: 1fr; }
    .clockstack-hero { align-items: flex-start; display: block; }
    .clockstack-week-total { margin-top: 22px; text-align: left; }
    .clockstack-form-row { grid-template-columns: 1fr; }
}