:root {
  --work-bg: var(--bg, #edf4ff);
  --work-panel: var(--panel, #fff);
  --work-ink: var(--text, #17202a);
  --work-accent: var(--accent, #146aff);
  --work-on-accent: var(--accent-contrast, #fff);
  --work-border: color-mix(in srgb, var(--work-ink) 17%, var(--work-panel));
  --work-muted: color-mix(in srgb, var(--work-ink) 75%, var(--work-panel));
  --work-soft: color-mix(in srgb, var(--work-accent) 10%, var(--work-panel));
  --work-success: var(--status-success-text, #13643c);
  --work-success-bg: var(--status-success-bg, #e6f7ed);
  --work-error: var(--status-danger-text, #932e2e);
  --work-error-bg: var(--status-danger-bg, #fcecec);
  font: 16px/1.5 Inter, "Segoe UI", Arial, sans-serif;
}
:root[data-appearance="dark"] {
  color-scheme: dark;
  --work-bg: var(--theme-dark-bg, #101720);
  --work-panel: var(--theme-dark-panel, #17212e);
  --work-ink: var(--theme-dark-text, #e6eefb);
  --work-accent: var(--theme-dark-primary, #8cb6ff);
  --work-on-accent: var(--theme-dark-accent-contrast, #10234a);
  --work-success: var(--theme-dark-status-success-text, #a9e7c0);
  --work-success-bg: var(--theme-dark-status-success-bg, #17372a);
  --work-error: var(--theme-dark-status-danger-text, #ffc5c5);
  --work-error-bg: var(--theme-dark-status-danger-bg, #48282e);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--work-bg); color: var(--work-ink); }
[hidden] { display: none !important; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, summary { cursor: pointer; }
:focus-visible { outline: 3px solid var(--work-accent); outline-offset: 3px; }
main { max-width: 44rem; margin: auto; padding: 22px max(16px, env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
h1, h2, p { margin: 0; overflow-wrap: anywhere; }
h1 { font-size: clamp(1.55rem, 6vw, 2.1rem); line-height: 1.18; letter-spacing: -.035em; }
h2 { font-size: 1.1rem; line-height: 1.3; margin-bottom: 12px; }
.mobile-header { padding-top: env(safe-area-inset-top); background: var(--work-panel); border-bottom: 1px solid var(--work-border); }
.mobile-header-inner, .mobile-nav {
  max-width: 44rem; margin: auto; padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
  display: flex; align-items: center; gap: 12px;
}
.mobile-header-inner { min-height: 64px; justify-content: space-between; }
.mobile-identity, .xelvio-wordmark { display: flex; align-items: center; gap: 8px; }
.mobile-identity > span { font-size: .82rem; color: var(--work-muted); padding-left: 8px; border-left: 1px solid var(--work-border); }
.xelvio-wordmark { font-weight: 750; font-size: 1.25rem; }
.xelvio-wordmark img { width: 28px; height: auto; }
.mobile-nav a { display: grid; place-items: center; min-height: 48px; flex: 1; border-bottom: 3px solid transparent; text-decoration: none; font-weight: 650; }
.mobile-nav a[aria-current] { border-color: var(--work-accent); }
.page-intro { display: grid; gap: 8px; margin-bottom: 18px; }
.eyebrow { font-weight: 700; font-size: .82rem; color: var(--work-muted); }
.muted, .work-tasks { color: var(--work-muted); }
.small, .work-tasks { font-size: .88rem; }
.panel, .work-card {
  background: var(--work-panel); border: 1px solid var(--work-border);
  border-radius: 14px; padding: 16px; overflow-wrap: anywhere;
}
.panel + .panel, .notice + .panel, .upcoming { margin-top: 14px; }
.auth-panel { max-width: 28rem; margin: 16px auto 0; }
.auth-panel h1 { margin: 8px 0; }
.auth-panel .stack { margin-top: 18px; }
.auth-links { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: 10px; }
.auth-links a, .back-link { display: inline-flex; min-height: 44px; align-items: center; width: fit-content; font-weight: 650; }
.work-list, .activity-list, .task-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.work-card { display: grid; gap: 5px; text-decoration: none; }
.work-card:hover { border-color: var(--work-accent); }
.work-card-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; font-weight: 650; }
.badge { display: inline-flex; border-radius: 20px; padding: 3px 9px; background: var(--work-soft); font-size: .82rem; max-width: 100%; }
.pager, .action-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.empty p, .contact-name { margin: 4px 0; }
.empty .button { margin-top: 10px; }
address { font-style: normal; }
.button {
  display: inline-flex; justify-content: center; align-items: center; min-height: 46px;
  max-width: 100%; padding: 7px 14px; border: 1px solid var(--work-border);
  border-radius: 10px; background: var(--work-panel); color: var(--work-ink);
  font-weight: 650; text-align: center; text-decoration: none;
}
.button-primary { background: var(--work-accent); border-color: var(--work-accent); color: var(--work-on-accent); }
.button-quiet { border-color: transparent; }
.button:disabled { opacity: .65; cursor: wait; }
.stack { display: grid; gap: 10px; }
.stack label { display: grid; gap: 4px; min-width: 0; font-weight: 600; }
.form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
input:not([type="hidden"]), select, textarea {
  width: 100%; min-width: 0; min-height: 46px; padding: 7px 10px;
  border: 1px solid var(--work-border); border-radius: 9px; background: var(--work-panel); color: var(--work-ink);
}
textarea { resize: vertical; }
.task-list > li, .activity-list > li { border-top: 1px solid var(--work-border); padding: 10px 0 0; }
.task-list .stack, details form { margin-top: 9px; }
.activity-list { margin-top: 10px; }
.activity-list li > span { display: block; font-size: .87rem; }
summary { min-height: 46px; padding: 10px 0; font-weight: 650; }
.notice, .feedback { padding: 10px 12px; border-radius: 9px; background: var(--work-soft); }
.notice.success { background: var(--work-success-bg); color: var(--work-success); }
.notice.error, .feedback[data-error] { background: var(--work-error-bg); color: var(--work-error); }
.plain { white-space: pre-wrap; }
.install-help { margin-top: 16px; }
.install-help p + p { margin-top: 8px; }
@media (display-mode: standalone) { .install-help { display: none; } }
@media (max-width: 350px) {
  .form-pair { grid-template-columns: 1fr; }
}