:root {
  --bg: #f3f5f2;
  --ink: #151d18;
  --muted: #65716a;
  --line: #d9ded8;
  --surface: #fff;
  --dark: #101914;
  --green: #226b4a;
  --green-2: #e3f1e9;
  --blue: #245f8f;
  --amber: #996114;
  --red: #a33d37;
  --shadow: 0 16px 35px rgba(19, 27, 22, .08);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.45;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.public-site {
  background: #f7faf7;
}
.public-contact-bar {
  align-items: center;
  background: #fff;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  display: flex;
  font-size: 14px;
  font-weight: 850;
  gap: 18px;
  justify-content: flex-end;
  min-height: 30px;
  padding: 5px clamp(18px, 5vw, 64px);
  position: sticky;
  top: 0;
  z-index: 12;
}
.public-contact-bar a {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}
.public-contact-bar a::before {
  color: var(--muted);
  content: "E-mail";
  font-size: 12px;
  text-transform: uppercase;
}
.public-header {
  align-items: center;
  background: rgba(255,255,255,.93);
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding: 10px clamp(18px, 5vw, 64px);
  position: sticky;
  top: 30px;
  z-index: 10;
}
.public-brand {
  border-bottom: 0;
  color: var(--ink);
  min-width: 0;
  padding: 0;
}
.public-brand span {
  color: var(--muted);
}
.brand-wordmark {
  display: block;
  height: 48px;
  max-width: min(340px, 58vw);
  object-fit: contain;
  width: auto;
}
.public-header .brand-mark {
  height: 36px;
  width: 36px;
}
.public-nav {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.public-nav a {
  border-radius: 8px;
  color: var(--muted);
  font-weight: 850;
  padding: 9px 11px;
}
.public-nav a:hover {
  background: var(--green-2);
  color: var(--green);
}
.public-nav a.active {
  background: var(--green-2);
  color: var(--green);
}
.public-hero {
  align-items: end;
  background:
    linear-gradient(90deg, rgba(16, 25, 20, .86), rgba(16, 25, 20, .48)),
    url("https://images.unsplash.com/photo-1541888946425-d81bb19240f5?auto=format&fit=crop&w=1800&q=80");
  background-position: center;
  background-size: cover;
  color: #fff;
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .65fr);
  min-height: 640px;
  padding: clamp(90px, 12vw, 150px) clamp(18px, 5vw, 64px) 52px;
}
.compact-hero {
  align-items: center;
  min-height: 560px;
  padding-top: clamp(70px, 9vw, 115px);
}
.public-hero .eyebrow {
  color: #bff0cf;
}
.public-hero h1 {
  font-size: clamp(40px, 7vw, 76px);
  letter-spacing: 0;
  line-height: .98;
  max-width: 940px;
}
.public-hero p {
  color: rgba(255,255,255,.86);
  font-size: 19px;
  max-width: 690px;
}
.public-hero-panel {
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 8px;
  box-shadow: 0 22px 60px rgba(0,0,0,.22);
  color: var(--ink);
  display: grid;
  gap: 1px;
  overflow: hidden;
}
.public-hero-panel div {
  background: #fff;
  padding: 18px;
}
.public-hero-panel span {
  color: var(--green);
  display: block;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.public-hero-panel strong {
  display: block;
  font-size: 22px;
  margin-top: 4px;
}
.hero-price-card {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(227,241,233,.96));
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 8px;
  box-shadow: 0 22px 60px rgba(0,0,0,.22);
  color: var(--ink);
  display: grid;
  gap: 14px;
  padding: 30px;
  position: relative;
  overflow: hidden;
}
.hero-price-card::after {
  background: rgba(34, 107, 74, .09);
  border-radius: 999px;
  content: "";
  height: 160px;
  position: absolute;
  right: -70px;
  top: -70px;
  width: 160px;
}
.hero-price-card span {
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
  position: relative;
  text-transform: uppercase;
  z-index: 1;
}
.hero-price-card strong {
  font-size: clamp(58px, 8vw, 92px);
  line-height: .9;
  position: relative;
  z-index: 1;
}
.hero-price-card p {
  color: var(--ink);
  font-size: 22px;
  font-weight: 900;
  margin: 0;
  position: relative;
  z-index: 1;
}
.hero-price-list {
  display: grid;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.hero-price-list em {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-style: normal;
  gap: 8px;
}
.hero-price-list em::before {
  background: var(--green);
  border-radius: 50%;
  content: "";
  height: 7px;
  width: 7px;
}
.hero-price-card .primary-btn {
  justify-content: center;
  position: relative;
  z-index: 1;
}
.public-section {
  padding: 54px clamp(18px, 5vw, 64px);
}
.public-section .section-title {
  margin-bottom: 24px;
  max-width: 820px;
}
.public-section .section-title h2,
.public-band h2 {
  font-size: clamp(30px, 4vw, 48px);
  letter-spacing: 0;
  line-height: 1.05;
}
.public-band {
  background: var(--dark);
  color: #fff;
}
.public-band p {
  color: rgba(255,255,255,.76);
}
.public-list {
  display: grid;
  gap: 10px;
}
.public-list span {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  font-weight: 850;
  padding: 13px 14px;
}
.public-form-panel {
  margin: 0 auto;
  max-width: 1040px;
}
.info-strip {
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.info-item {
  display: grid;
  gap: 8px;
}
.info-item span,
.feature-card span {
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.info-item h2 {
  font-size: 22px;
  margin: 0;
}
.info-item p,
.public-info-list p {
  color: var(--muted);
  margin: 0;
}
.split-info {
  align-items: start;
  display: grid;
  gap: 26px;
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1fr);
}
.split-info h2 {
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.05;
}
.public-info-list {
  display: grid;
  gap: 14px;
  font-size: 18px;
}
.pricing-section {
  background: #edf4ef;
}
.problem-section {
  background: #f7faf7;
}
.pricing-card {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(260px, .8fr) minmax(240px, 1fr) auto;
  padding: 28px;
}
.pricing-card h2 {
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1;
}
.price-details {
  display: grid;
  gap: 9px;
}
.price-details span {
  background: var(--green-2);
  border-radius: 8px;
  color: var(--green);
  font-weight: 850;
  padding: 10px 12px;
}
.pricing-hero {
  min-height: 430px;
}
.pricing-page {
  background: #fff;
}
.billing-toggle-wrap {
  display: grid;
  justify-content: center;
  margin-bottom: 44px;
  position: relative;
}
.saving-badge {
  background: #14b8d4;
  border-radius: 999px;
  color: #fff;
  font-weight: 950;
  left: -54px;
  padding: 8px 14px;
  position: absolute;
  top: -30px;
  transform: rotate(-14deg);
  z-index: 1;
}
.billing-toggle {
  border: 1px solid var(--dark);
  border-radius: 8px;
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  overflow: hidden;
  width: min(100%, 520px);
}
.billing-toggle button {
  background: #fff;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  font-weight: 900;
  min-height: 56px;
  padding: 0 22px;
}
.billing-toggle button + button {
  border-left: 1px solid var(--dark);
}
.billing-toggle button.active {
  background: #2d3b63;
  color: #fff;
}
.pricing-main-card {
  align-items: center;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(280px, .9fr) minmax(250px, .8fr);
  margin: 0 auto;
  max-width: 1180px;
  padding-top: 46px;
}
.price-line {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 18px;
}
.price-line strong {
  font-size: clamp(74px, 10vw, 132px);
  line-height: .8;
}
.price-line span {
  font-size: 23px;
  margin-bottom: 8px;
}
.pricing-main-card h2 {
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1;
}
.pricing-hero {
  display: grid;
  min-height: 520px;
  place-items: center;
  text-align: center;
}
.pricing-hero h1 {
  font-size: clamp(58px, 9vw, 104px);
  margin-inline: auto;
}
.pricing-hero p {
  font-size: clamp(20px, 2.3vw, 30px);
  line-height: 1.45;
  margin-inline: auto;
  max-width: 1120px;
}
.pricing-page {
  padding-top: 64px;
}
.billing-toggle-wrap {
  margin-bottom: 34px;
}
.billing-toggle {
  background: #fff;
  box-shadow: 0 18px 45px rgba(19, 27, 22, .08);
}
.billing-toggle button {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: center;
  position: relative;
}
.discount-circle {
  align-items: center;
  background: #14b8d4;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
  height: 42px;
  justify-content: center;
  line-height: 1;
  transform: rotate(-12deg);
  width: 42px;
}
.billing-toggle button.active .discount-circle {
  background: #fff;
  color: #2d3b63;
}
.pricing-main-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 20px 55px rgba(19, 27, 22, .08);
  display: block;
  padding: clamp(28px, 5vw, 58px);
  position: relative;
}
.price-saving-circle {
  align-items: center;
  background: #14b8d4;
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: 16px;
  font-weight: 950;
  height: 112px;
  justify-content: center;
  line-height: 1.1;
  padding: 14px;
  position: absolute;
  right: clamp(18px, 4vw, 46px);
  text-align: center;
  top: -36px;
  transform: rotate(-12deg);
  width: 112px;
}
.pricing-price-copy {
  text-align: center;
}
.pricing-price-copy .eyebrow {
  margin-bottom: 20px;
}
.price-line {
  justify-content: center;
}
.price-line span b {
  display: block;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.05;
}
.pricing-price-copy > p {
  color: var(--muted);
  font-size: 19px;
  margin-inline: auto;
  max-width: 840px;
}
.pricing-feature-columns {
  display: grid;
  gap: 34px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 46px;
  text-align: left;
}
.pricing-feature-columns h3 {
  font-size: 22px;
  margin-bottom: 12px;
}
.pricing-feature-columns ul {
  display: grid;
  gap: 11px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pricing-feature-columns li {
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: 22px minmax(0, 1fr);
}
.pricing-feature-columns li::before {
  background: #14b8d4;
  border-radius: 50%;
  color: #fff;
  content: "✓";
  display: grid;
  font-size: 14px;
  font-weight: 950;
  height: 22px;
  place-items: center;
  width: 22px;
}
.pricing-cta {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}
.pricing-cta .primary-btn {
  min-width: 220px;
}
.public-page-hero {
  background:
    linear-gradient(90deg, rgba(16, 25, 20, .86), rgba(16, 25, 20, .62)),
    url("https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?auto=format&fit=crop&w=1800&q=80");
  background-position: center;
  background-size: cover;
  color: #fff;
  padding: clamp(90px, 12vw, 140px) clamp(18px, 5vw, 64px) 72px;
}
.public-page-hero .eyebrow {
  color: #bff0cf;
}
.public-page-hero h1 {
  font-size: clamp(42px, 7vw, 78px);
  line-height: .98;
  max-width: 980px;
}
.public-page-hero p {
  color: rgba(255,255,255,.84);
  font-size: 20px;
  max-width: 760px;
}
.feature-card {
  min-height: 190px;
  padding: 20px;
}
.benefit-band {
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.benefit-band div {
  border-left: 4px solid var(--green);
  display: grid;
  gap: 6px;
  padding-left: 16px;
}
.benefit-band strong {
  font-size: 21px;
}
.benefit-band span {
  color: var(--muted);
}
.soft-panel {
  background: #fff;
  border-block: 1px solid var(--line);
}
.feature-showcase {
  display: grid;
  gap: 22px;
}
.feature-panel {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(260px, .55fr) minmax(0, 1fr);
  overflow: hidden;
  padding: 24px;
}
.feature-panel h3 {
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.08;
}
.feature-panel p {
  color: var(--muted);
  font-size: 17px;
}
.product-shot {
  background: #eef2ef;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: block;
  height: auto;
  width: 100%;
}
.mobile-feature {
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 360px);
}
.phone-mockup {
  background: #101914;
  border: 10px solid #202823;
  border-radius: 28px;
  box-shadow: 0 22px 55px rgba(16, 25, 20, .22);
  color: #fff;
  display: grid;
  gap: 12px;
  justify-self: center;
  max-width: 330px;
  padding: 18px;
  width: 100%;
}
.phone-top {
  color: #d9f2df;
  font-size: 19px;
  font-weight: 900;
  margin-bottom: 4px;
}
.phone-mockup button {
  background: #f7faf7;
  border: 0;
  border-radius: 8px;
  color: var(--ink);
  font-weight: 900;
  min-height: 48px;
}
.phone-mockup .mini-calendar {
  background: #fff;
  border-radius: 8px;
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(7, 1fr);
  margin-top: 6px;
  padding: 12px;
}
.phone-mockup .mini-calendar span {
  aspect-ratio: 1;
  background: #f3f5f2;
  border-radius: 6px;
}
.phone-mockup .mini-calendar .done { background: #dbeefb; }
.phone-mockup .mini-calendar .note { background: #faeadb; }
.phone-mockup .mini-calendar .bonus { background: #dcefe2; }
.cta-strip {
  align-items: center;
  background: var(--dark);
  color: #fff;
  display: flex;
  gap: 24px;
  justify-content: space-between;
}
.cta-strip div {
  max-width: 820px;
}
.cta-strip p {
  color: rgba(255,255,255,.76);
}
.cta-strip .primary-btn {
  flex: 0 0 auto;
}
.public-footer {
  align-items: center;
  border-top: 1px solid var(--line);
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding: 22px clamp(18px, 5vw, 64px);
}
.company-login-page .login-screen {
  background:
    linear-gradient(90deg, rgba(247,250,247,.97), rgba(247,250,247,.88)),
    url("https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?auto=format&fit=crop&w=1400&q=80");
  background-position: center;
  background-size: cover;
}
.company-login-page .login-panel {
  max-width: 560px;
  padding: 34px;
  width: min(100%, 560px);
}

.login-screen {
  display: none;
  min-height: 100vh;
  padding: 24px;
  place-items: center;
}
body.is-locked .login-screen { display: grid; }
body.is-locked .shell,
body.is-locked .worker-app { display: none; }
.login-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 20px;
  max-width: 440px;
  padding: 26px;
  width: min(100%, 440px);
}
.login-brand {
  border-bottom: 0;
  color: var(--ink);
  padding: 0;
}
.login-brand span {
  color: var(--muted);
}
.login-panel h1 {
  font-size: 28px;
}
.login-form {
  display: grid;
  gap: 14px;
}
.password-row {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
}
.password-row .secondary-btn {
  min-height: 42px;
  white-space: nowrap;
}
.login-form .primary-btn,
.login-form .ghost-btn {
  justify-content: center;
  width: 100%;
}
.forgot-password-link {
  background: transparent;
  border: 0;
  color: var(--green);
  font-size: 14px;
  font-weight: 850;
  justify-self: center;
  padding: 2px 4px;
}
.forgot-password-link:hover,
.forgot-password-link:focus {
  color: #164d35;
  text-decoration: underline;
}
.login-message {
  border-radius: 8px;
  color: var(--muted);
  font-size: 14px;
  margin: 0;
  min-height: 20px;
}
.login-message.error {
  background: #f8e7e4;
  color: var(--red);
  padding: 10px 12px;
}
.login-message.warning {
  background: #faeddc;
  color: var(--amber);
  padding: 10px 12px;
}
.login-message.info {
  background: var(--green-2);
  color: var(--green);
  padding: 10px 12px;
}
.download-buttons {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.download-buttons a {
  display: inline-flex;
  justify-content: center;
  min-height: 42px;
}

.shell {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  min-height: 100vh;
}
.sidebar {
  background: var(--dark);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 22px 16px;
}
.brand {
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.13);
  display: flex;
  gap: 12px;
  padding: 4px 6px 16px;
}
.brand-mark {
  background: #fff;
  border-radius: 8px;
  color: #102016;
  display: grid;
  font-weight: 900;
  height: 46px;
  overflow: hidden;
  place-items: center;
  transition: box-shadow .18s ease, transform .18s ease;
  width: 46px;
}
.brand-mark img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.brand-mark-editable {
  cursor: pointer;
  outline: 0;
}
.brand-mark-editable:hover,
.brand-mark-editable:focus {
  box-shadow: 0 0 0 3px rgba(34, 107, 74, .25);
  transform: translateY(-1px);
}
.brand span, .side-note small {
  color: rgba(255,255,255,.7);
  display: block;
  font-size: 13px;
}
.nav { display: grid; gap: 6px; }
.nav-item {
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: rgba(255,255,255,.82);
  display: block;
  padding: 11px 12px;
  text-align: left;
  width: 100%;
}
.nav-item.active, .nav-item:hover { background: rgba(255,255,255,.1); color: #fff; }
.side-note {
  background: rgba(255,255,255,.08);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding: 14px;
}
.side-note span { font-weight: 900; }
.main { min-width: 0; padding: 28px; }
.topbar {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 22px;
}
.eyebrow {
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
  margin: 0 0 5px;
  text-transform: uppercase;
}
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: 30px; line-height: 1.1; margin-bottom: 0; }
h2 { font-size: 21px; margin-bottom: 12px; }
h3 { font-size: 16px; margin-bottom: 8px; }
.muted { color: var(--muted); }
.view, .grid, .list { display: grid; gap: 16px; }
.grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.panel, .stat-card, .card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  min-width: 0;
}
.panel { padding: 18px; }
.panel-header, .card-row, .top-actions, .inline-actions, .form-actions {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}
.panel-header p { color: var(--muted); margin-bottom: 0; }
.stat-card { min-height: 108px; padding: 16px; }
.stat-card span { color: var(--muted); font-size: 13px; font-weight: 800; }
.stat-card strong { display: block; font-size: 27px; line-height: 1.1; margin: 9px 0 5px; }
.stat-card small { color: var(--muted); }
.stat-button {
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  width: 100%;
}
.stat-button:hover, .stat-button:focus-visible {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(45, 106, 79, .14), var(--shadow);
  outline: 0;
}
.card { display: grid; gap: 8px; padding: 14px; }
.cell-title {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}
.form-grid {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0,1fr));
}
.field { display: grid; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.search-box {
  min-width: min(100%, 320px);
}
label { color: #344039; font-size: 13px; font-weight: 800; }
input, select, textarea {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  min-height: 39px;
  padding: 8px 10px;
  width: 100%;
}
textarea { min-height: 78px; resize: vertical; }
.primary-btn, .secondary-btn, .ghost-btn, .danger-btn, .success-btn {
  border: 1px solid transparent;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 13px;
  font-weight: 850;
}
.primary-btn { background: var(--green); color: #fff; }
.secondary-btn, .ghost-btn { background: #fff; border-color: var(--line); color: var(--ink); }
.danger-btn { background: #f8e8e6; color: var(--red); }
.success-btn { background: var(--green-2); color: var(--green); }
.action-menu {
  display: inline-block;
  min-width: 140px;
}
.action-menu summary {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
  list-style: none;
  min-height: 36px;
  padding: 6px 12px;
  text-align: center;
  width: max-content;
}
.action-menu summary::-webkit-details-marker { display: none; }
.action-menu-list {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 4px;
  margin-top: 6px;
  min-width: 170px;
  padding: 6px;
}
.menu-action {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--ink);
  display: block;
  font-weight: 800;
  padding: 8px 9px;
  text-align: left;
  width: 100%;
}
.menu-action:hover { background: #f3f6f3; }
.wide { width: 100%; }
.table-wrap { min-width: 0; overflow-x: auto; }
table { border-collapse: collapse; min-width: 900px; width: 100%; }
th, td { border-bottom: 1px solid var(--line); padding: 11px 10px; text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: 12px; text-transform: uppercase; }
tr:last-child td { border-bottom: 0; }
tfoot td {
  background: #f4f7f4;
  border-top: 2px solid var(--line);
}
.selected-row td { background: #fff9ed; }
.pill {
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  min-height: 25px;
  padding: 3px 9px;
  white-space: nowrap;
}
.pill.green { background: var(--green-2); color: var(--green); }
.pill.blue { background: #e2edf6; color: var(--blue); }
.pill.amber { background: #faeddc; color: var(--amber); }
.pill.red { background: #f8e8e6; color: var(--red); }
.pill.gray { background: #eef2ef; color: #59645f; }
.empty-state {
  background: rgba(255,255,255,.6);
  border: 1px dashed #b9c3bd;
  border-radius: 8px;
  color: var(--muted);
  padding: 18px;
}
.check-row { align-items: center; display: flex; gap: 10px; }
.check-row input { min-height: 18px; width: 18px; }
.worker-grid, .company-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.select-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  display: grid;
  gap: 8px;
  min-height: 145px;
  padding: 14px;
  text-align: left;
}
.select-card:hover { border-color: #9cb5a8; box-shadow: var(--shadow); }
.meta-line { border-top: 1px solid var(--line); color: var(--muted); display: grid; gap: 4px; padding-top: 8px; }
.month-control { display: grid; gap: 8px; grid-template-columns: auto minmax(0, 280px) auto; }
.note { background: var(--green-2); border-left: 4px solid var(--green); border-radius: 8px; padding: 12px 14px; }
.danger-note {
  align-items: flex-start;
  background: #f8e8e6;
  border-left-color: var(--red);
  display: flex;
  gap: 10px;
}
.danger-note p { margin: 4px 0 0; }
.danger-text { color: var(--red); font-weight: 900; }
.renew-star {
  color: var(--red);
  display: inline-block;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}
.compact-input { max-width: 150px; }

.worker-body { background: #e9eee8; }
.worker-app {
  display: grid;
  gap: 12px;
  margin: 0 auto;
  max-width: 560px;
  min-height: 100vh;
  padding: 14px;
}
.worker-header {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  color: var(--ink);
  display: grid;
  gap: 14px;
  padding: 14px;
}
.worker-header .brand { border-bottom: 0; padding: 0; }
.worker-header .brand-mark { background: var(--dark); color: #fff; }
.worker-header .brand span { color: var(--muted); }
.worker-header-top { align-items: center; display: flex; gap: 12px; justify-content: space-between; }
.worker-header .ghost-btn { background: #f7faf7; border-color: var(--line); color: var(--ink); min-height: 34px; }
.worker-header-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.worker-name-badge {
  background: #f7faf7;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  padding: 8px 10px;
  text-align: right;
}
.worker-view { display: grid; gap: 12px; }
.worker-menu {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 14px;
  padding: 18px;
}
.worker-menu h1 { margin-bottom: 2px; }
.worker-hero {
  align-items: flex-start;
  background: var(--dark);
  border-radius: 8px;
  color: #fff;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 18px;
}
.worker-hero .eyebrow { color: #c7ead0; }
.worker-hero h1 { font-size: 28px; }
.worker-hero p { color: rgba(255,255,255,.72); margin-bottom: 0; }
.notice-chip {
  background: #fff;
  border: 0;
  border-radius: 8px;
  color: var(--ink);
  display: grid;
  gap: 4px;
  min-width: 94px;
  padding: 10px 12px;
  text-align: left;
}
.notice-chip span { color: var(--muted); font-size: 12px; font-weight: 900; }
.notice-chip strong { font-size: 26px; line-height: 1; }
.notice-chip.is-hot { background: #f8e8e6; color: var(--red); }
.action-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.action-tile {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  display: grid;
  gap: 7px;
  min-height: 112px;
  padding: 15px;
  text-align: left;
}
.action-tile span { color: var(--muted); font-size: 12px; font-weight: 900; text-transform: uppercase; }
.action-tile strong { font-size: 17px; line-height: 1.18; }
.action-tile small { color: var(--muted); font-size: 12px; line-height: 1.25; }
.action-primary { background: var(--green); border-color: var(--green); color: #fff; }
.action-primary span { color: rgba(255,255,255,.78); }
.action-primary small { color: rgba(255,255,255,.72); }
.action-alert { background: #fff7f6; border-color: #e8b6b1; }
.worker-section,
.worker-screen,
.worker-report,
.worker-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 14px;
  padding: 18px;
}
.section-title,
.screen-head {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}
.screen-head p,
.section-title p { color: var(--muted); margin-bottom: 0; }
.worker-form { display: grid; gap: 12px; }
.form-block {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: 34px minmax(0, 1fr);
  padding: 13px;
}
.form-step {
  background: var(--green-2);
  border-radius: 999px;
  color: var(--green);
  display: grid;
  font-weight: 900;
  height: 28px;
  place-items: center;
  width: 28px;
}
.form-block-body { display: grid; gap: 12px; min-width: 0; }
.form-block-body h2 { font-size: 18px; margin-bottom: 0; }
.submit-bar { min-height: 48px; }
.time-field input {
  font-weight: 900;
  letter-spacing: .02em;
}
.entry-card {
  background: #f8faf8;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
}
.entry-card span, .entry-card p { color: var(--muted); margin: 4px 0 0; }
.entry-side {
  display: grid;
  gap: 6px;
  justify-items: end;
  min-width: 120px;
}
.entry-edit {
  margin-top: 3px;
  min-height: 32px;
  padding: 5px 10px;
}
.notice-details {
  border-top: 1px solid var(--line);
  margin-top: 10px;
  padding-top: 10px;
}
.notice-details summary {
  color: var(--green);
  cursor: pointer;
  font-weight: 900;
}
.notice-details p { margin: 6px 0 0; }
.mailbox-card.has-alerts {
  background: #fff7f6;
  border-color: #e8b6b1;
}
.mail-list { display: grid; gap: 10px; }
.mail-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: 10px minmax(0, 1fr);
  padding: 12px;
}
.mail-dot {
  border-radius: 999px;
  height: 10px;
  margin-top: 7px;
  width: 10px;
}
.mail-item span {
  color: var(--muted);
  display: block;
  font-size: 13px;
  margin-top: 3px;
}
.mail-item p { color: var(--muted); margin: 6px 0 0; }
.notice-rejected .mail-dot { background: var(--amber); }
.notice-bonus .mail-dot { background: var(--green); }
.notice-corrected .mail-dot { background: var(--blue); }
.notice-dialog[hidden] { display: none; }
.notice-dialog {
  inset: 0;
  position: fixed;
  z-index: 20;
}
.notice-backdrop {
  background: rgba(16, 25, 20, .42);
  border: 0;
  inset: 0;
  padding: 0;
  position: absolute;
  width: 100%;
}
.notice-window {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(16, 25, 20, .28);
  display: grid;
  gap: 14px;
  left: 50%;
  max-height: min(76vh, 620px);
  max-width: 500px;
  overflow: auto;
  padding: 18px;
  position: absolute;
  top: 48%;
  transform: translate(-50%, -50%);
  width: calc(100% - 28px);
}
.requests-window {
  max-width: 760px;
}
.request-item {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px;
  text-align: left;
  width: 100%;
}
.request-item:hover, .request-item:focus-visible {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(45, 106, 79, .12);
  outline: 0;
}
.request-item span:first-child {
  display: grid;
  gap: 4px;
}
.request-item small {
  color: var(--muted);
  font-weight: 700;
}
.request-month {
  display: grid;
  gap: 10px;
}
.request-month + .request-month {
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding-top: 14px;
}
.dialog-form {
  align-items: stretch;
  grid-template-columns: 1fr;
}
.history-list { display: grid; gap: 10px; }
.print-only { display: none !important; }
.pdf-list { display: block; }
.month-total {
  align-items: center;
  background: #f7faf7;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px;
}
.month-total span { color: var(--muted); font-size: 13px; font-weight: 850; }
.month-total strong { font-size: 22px; }
.mini-calendar {
  display: grid;
  gap: 10px;
}
.calendar-grid {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.calendar-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}
.calendar-day {
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  min-height: 68px;
  overflow: hidden;
  padding: 7px;
  text-align: left;
  width: 100%;
}
.calendar-day strong,
.calendar-day span,
.calendar-day em {
  display: block;
  line-height: 1.2;
}
.calendar-day strong { font-size: 14px; }
.calendar-day span {
  font-size: 12px;
  margin-top: 6px;
}
.calendar-day em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  margin-top: 4px;
}
.calendar-day.empty {
  background: transparent;
  border-color: transparent;
  pointer-events: none;
}
.calendar-day.is-selected {
  box-shadow: inset 0 0 0 2px var(--green);
}
.calendar-day:not(.empty):hover {
  filter: saturate(1.08);
}
.cal-work {
  background: #eaf3fb;
  border-color: #b9d7ee;
}
.cal-empty {
  background: #fff;
  border-color: var(--line);
}
.cal-notice {
  background: #eaf3fb;
  border-color: #8ebce1;
  box-shadow: inset 0 0 0 2px rgba(36, 95, 143, .18);
}
.cal-rejected {
  background: #faeadb;
  border-color: #edc59b;
}
.cal-bonus {
  background: #e6f3ea;
  border-color: #b9d9c3;
}
.cal-off {
  background: #fff6d8;
  border-color: #eadc9c;
}

@media (max-width: 1100px) {
  .public-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .info-strip,
  .benefit-band,
  .split-info,
  .pricing-card,
  .pricing-main-card,
  .pricing-feature-columns {
    grid-template-columns: 1fr;
  }
  .pricing-card {
    align-items: stretch;
  }
  .feature-panel,
  .mobile-feature {
    grid-template-columns: 1fr;
  }
  .feature-panel {
    padding: 20px;
  }
  .shell, .grid.four, .grid.three, .grid.two, .form-grid, .worker-grid, .company-grid {
    grid-template-columns: 1fr;
  }
  .sidebar { min-height: 0; }
  .side-note { margin-top: 0; }
}
@media (max-width: 680px) {
  .public-header {
    align-items: flex-start;
    flex-direction: column;
    top: 30px;
  }
  .public-contact-bar { justify-content: flex-start; }
  .public-nav {
    width: 100%;
  }
  .public-nav a {
    background: #fff;
    border: 1px solid var(--line);
  }
  .main { padding: 18px; }
  .topbar, .panel-header, .card-row, .worker-header-top, .worker-hero, .section-title, .screen-head, .entry-card {
    align-items: stretch;
    flex-direction: column;
  }
  .entry-side { justify-items: start; }
  .month-control { grid-template-columns: 1fr; }
  .notice-chip { width: 100%; }
  .form-block { grid-template-columns: 1fr; }
  .calendar-grid { gap: 4px; }
  .calendar-day { min-height: 58px; padding: 6px; }
  .calendar-day span { font-size: 11px; }
  .calendar-day em { font-size: 10px; }
  .public-hero {
    padding-top: 70px;
  }
  .public-hero h1 {
    font-size: 38px;
  }
  .cta-strip {
    align-items: stretch;
    flex-direction: column;
  }
  .cta-strip .primary-btn {
    justify-content: center;
    width: 100%;
  }
  .company-login-page .login-panel {
    padding: 24px;
  }
  .billing-toggle {
    grid-template-columns: 1fr;
    width: min(100%, 340px);
  }
  .billing-toggle button + button {
    border-left: 0;
    border-top: 1px solid var(--dark);
  }
  .saving-badge {
    left: 8px;
  }
  .price-saving-circle {
    height: 86px;
    position: static;
    transform: rotate(-8deg);
    width: 86px;
  }
  .pricing-main-card {
    display: grid;
    gap: 18px;
    justify-items: start;
  }
  .pricing-price-copy {
    text-align: left;
  }
  .price-line {
    justify-content: start;
  }
  h1 { font-size: 25px; }
}
@media (max-width: 420px) {
  .action-grid { grid-template-columns: 1fr; }
}
@media print {
  .sidebar, .topbar, .no-print, .worker-header, .notice-dialog { display: none !important; }
  .shell, .main, .worker-app { display: block; padding: 0; }
  .worker-body { background: #fff; }
  .print-area { border: 0; box-shadow: none; }
  .print-only, .pdf-list { display: block !important; }
  .mini-calendar { display: none !important; }
  table { min-width: 0; }
  .entry-card, .calendar-day { break-inside: avoid; }
}