/* Werkflow HR&Payroll — WordPress-style shell + Lite-style login (precompiled) */
:root {
  --blue: #0059FF;
  --blue-hover: #0046cc;
  --mint: #7bf1a8;
  --mint-ink: #06261a;
  --green: #059669;
  --forest: #064e3b;
  --cream: #fff9e1;
  --navy: #151b2d;
  --navy-hover: #1e293b;
  --ink: #1d2327;
  --muted: #646970;
  --line: #dcdcde;
  --border: #dcdcde;
  --bg: #f0f0f1;
  --card: #ffffff;
  --sidebar: #1d2327;
  --sidebar-text: #a7aaad;
  --topbar: #1d2327;
  --amber: #d97706;
  --violet: #7c3aed;
  --danger: #d63638;
  --radius: 8px;
  --radius-sm: 6px;
  --shadow: 0 1px 1px rgba(0,0,0,.04);
  --sans: Inter, system-ui, "Segoe UI", Arial, Helvetica, sans-serif;
  --serif: Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", Consolas, monospace;
  --space: 8px;
}
* { box-sizing: border-box; }
html { color-scheme: light; }
body.app-body {
  margin: 0;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -.01em;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
[x-cloak] { display: none !important; }

.shell { display: grid; grid-template-columns: 200px 1fr; min-height: 100vh; }
.sidebar {
  background: var(--sidebar);
  color: var(--sidebar-text);
  padding: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-right: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.sidebar.open { display: flex; }
.sidebar-scrim { display: none; }
.brand-block { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 14px 12px; background: #101517; }
.brand-logo { width: 28px; height: 28px; object-fit: contain; border-radius: 4px; background: #fff; padding: 2px; }
.brand-word { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.brand-block strong, .top-title { color: #fff; letter-spacing: -.02em; font-size: 13px; font-weight: 600; line-height: 1.2; }
.brand-block span, .top-title span { color: #fff; font-weight: 600; }
.brand-block .version-chip { display: none; }
.org-chip {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 12px; margin: 0; border-bottom: 1px solid rgba(255,255,255,.06);
}
.user-chip { display: flex; gap: 10px; align-items: center; }
.org-initials, .avatar { width: 32px; height: 32px; min-width: 32px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 11px; }
.avatar { background: #3c434a; color: #fff; }
.org-chip strong, .aside-foot strong { color: #fff; font-size: 12px; display: block; }
.org-chip small, .aside-foot small { font-size: 11px; color: var(--sidebar-text); }
.nav { display: flex; flex-direction: column; gap: 0; overflow-y: scroll; overflow-x: hidden; padding: 8px 0; flex: 1; scrollbar-width: thin; scrollbar-color: #72777c #1d2327; }
.nav::-webkit-scrollbar { width: 8px; }
.nav::-webkit-scrollbar-track { background: #1d2327; }
.nav::-webkit-scrollbar-thumb { background: #72777c; border-radius: 8px; }
.nav small { display: block; color: #72777c; margin: 14px 12px 6px; font-size: 10px; letter-spacing: 1px; font-weight: 700; text-transform: uppercase; }
.nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--sidebar-text);
  padding: 10px 12px;
  border-radius: 0;
  font-weight: 500;
  border-left: 4px solid transparent;
}
.nav a:hover { background: #2c3338; color: #fff; text-decoration: none; }
.nav a.active { background: var(--blue); color: #fff; border-left-color: #72aee6; }
.nav a.active svg, .nav a:hover svg { color: #fff; }
.nav-group { display: flex; flex-direction: column; }
.nav-row { display: flex; align-items: stretch; }
.nav-row > a { flex: 1; min-width: 0; }
.nav-toggle {
  background: transparent; border: 0; color: var(--sidebar-text); padding: 0 10px;
  display: flex; align-items: center; cursor: pointer;
}
.nav-toggle:hover { color: #fff; background: #2c3338; }
.nav-toggle svg { transition: transform .15s ease; }
.nav-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-sub { display: flex; flex-direction: column; }
.nav-sub a {
  padding-left: 42px; font-size: 13px; font-weight: 500; gap: 0;
}
.nav-sub a.active { background: rgba(34,113,177,.35); border-left-color: #72aee6; }
.aside-foot { padding: 12px; border-top: 1px solid rgba(255,255,255,.06); color: var(--sidebar-text); }
.aside-foot .nav-theme { background: transparent; border: 0; color: var(--sidebar-text); display: flex; gap: 8px; align-items: center; width: 100%; padding: 8px 0; }
.aside-version { font-size: 11px; color: #72777c; margin: 8px 0 0; }

.main { display: flex; flex-direction: column; min-width: 0; background: var(--bg); }
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  background: var(--topbar); color: #fff;
  padding: 0 16px; min-height: 46px;
  border-bottom: 0;
}
.top-logo { width: 24px; height: 24px; border-radius: 4px; object-fit: contain; background: #fff; }
.top-copy { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.top-kicker { display: none; }
.top-company { margin: 0; font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-meta { color: #a7aaad; font-size: 12px; margin-left: auto; }
.top-search {
  flex: 1; max-width: 420px; margin: 0 12px;
  position: relative;
}
.top-search input {
  width: 100%; height: 32px; border-radius: 4px; border: 0;
  padding: 0 12px 0 34px; background: #2c3338; color: #fff;
}
.top-search input::placeholder { color: #a7aaad; }
.top-search svg { position: absolute; left: 10px; top: 7px; color: #a7aaad; }
.top-search-results {
  position: absolute; left: 0; right: 0; top: 38px; z-index: 40;
  background: #fff; color: var(--ink); border: 1px solid var(--line);
  border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,.12); max-height: 280px; overflow: auto;
}
.top-search-results a { display: block; padding: 10px 12px; color: var(--ink); border-bottom: 1px solid #f0f0f1; }
.top-search-results a:hover { background: #f6f7f7; text-decoration: none; }
.top-user { margin-left: 0; }
.avatar-menu {
  display: flex; align-items: center; gap: 8px;
  background: transparent; border: 0; color: #fff; padding: 4px 0;
}
.top-user-copy strong { color: #fff; font-size: 13px; }
.top-user-copy small { color: #a7aaad; }
.content { padding: 20px 24px 40px; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 4px;
  padding: 16px; box-shadow: var(--shadow);
}
.widget-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.widget-third { grid-column: span 4; }
.widget-aside, .widget-main { grid-column: span 6; }
.hero-stat { font-size: 28px; font-weight: 700; color: var(--ink); display: block; margin: 6px 0; }
.card small { color: var(--muted); letter-spacing: .04em; font-weight: 600; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 4px; border: 1px solid transparent; padding: 8px 14px; font-weight: 600;
}
.btn-primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); text-decoration: none; color: #fff; }
.btn-secondary { background: #f6f7f7; color: var(--ink); border-color: #c3c4c7; }
.btn-danger { background: #f6f7f7; color: var(--danger); border-color: #c3c4c7; }
.btn-danger:hover { background: #fcf0f1; border-color: var(--danger); }
.btn-signin {
  background: var(--mint) !important; color: var(--mint-ink) !important; border-color: var(--mint) !important;
  font-weight: 700; height: 48px; border-radius: 12px; font-size: 16px;
}
.btn-block { width: 100%; }
.nav-ico { flex-shrink: 0; opacity: .9; }
.nav a.active .nav-ico { opacity: 1; }
.menu-btn {
  display: none;
  width: 36px; height: 36px;
  border: 0;
  border-radius: 4px;
  background: #2c3338;
  color: #fff;
  place-items: center;
  padding: 0;
}
.logout-form { margin-left: 0; }
.note-panel { margin: 12px 28px 0; }
.theme-form { margin-left: auto; }
.top-user { display: flex; align-items: center; gap: 10px; position: relative; }
.top-user-copy strong { display: block; font-size: 13px; font-weight: 650; }
.top-user-copy small { display: flex; align-items: center; gap: 6px; color: #a7aaad; font-size: 11px; }
.avatar-menu .chev { color: #a7aaad; }
.user-menu { position: absolute; right: 0; top: 44px; z-index: 30; min-width: 260px; display: grid; gap: 10px; }
.online-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex-shrink: 0; }
.role-badge { font-weight: 600; }
.role-badge.owner { color: #72aee6; }

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px 16px;
  background-color: #0b1220;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.login-page.single { grid-template-columns: 1fr; }
.login-panel {
  width: 420px;
  max-width: calc(100vw - 32px);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(21, 27, 45, .92);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 24px;
  padding: 36px 32px 22px;
  color: #fff;
  backdrop-filter: blur(12px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .45);
}
.login-panel.narrow { max-width: 460px; width: 100%; }
.login-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.login-brand img { width: 52px; height: 52px; object-fit: contain; border-radius: 14px; background: #fff; padding: 6px; }
.login-brand strong { color: #fff; font-size: 20px; letter-spacing: -.02em; }
.login-brand span { color: #fff; }
.login-panel h1 { font-family: var(--sans); font-size: 40px; margin: 8px 0 4px; text-align: center; font-weight: 700; letter-spacing: -.03em; }
.login-panel > p { color: #c5c8ce; margin: 0 0 10px; text-align: center; }
.login-aside { display: none; }
.login-foot { color: #d7dbe2; font-size: 12px; margin-top: 18px; font-family: var(--mono); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.login-from-logo { height: 28px; width: auto; max-width: 160px; object-fit: contain; opacity: .92; }
.login-panel label { color: #d3d6dc; }
.login-panel input, .login-panel select, .login-panel textarea {
  background: var(--cream);
  color: #1f2937;
  border: 0;
  border-radius: 12px;
  height: 46px;
}
.login-panel .field { position: relative; }
.login-panel .field .icon { position: absolute; left: 12px; top: 38px; color: #9ca3af; width: 18px; height: 18px; pointer-events: none; }
.login-panel .field input { padding-left: 40px; }
.login-panel .toggle-pw {
  position: absolute; right: 10px; top: 34px;
  border: 0; background: transparent; color: #6b7280;
  width: 32px; height: 32px; padding: 0; display: grid; place-items: center;
}
.login-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; color: #d1d5db; }
.login-row label { display: flex; align-items: center; gap: 8px; font-weight: 500; color: #d1d5db; }
.login-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--mint); }
.login-row a, .login-mint-link { color: var(--mint); font-weight: 600; }
.login-quiet { color: #9ca3af; font-size: 13px; }
.login-panel .btn-primary, .login-panel .btn-signin {
  background: var(--mint);
  color: var(--mint-ink);
  border-color: var(--mint);
  height: 48px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 16px;
}
.login-panel .btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.2); }
.login-panel .alert { color: #111827; }
.login-panel a { color: var(--mint); }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: #ecfdf5; color: var(--forest); font-size: 10px; font-weight: 800; white-space: nowrap; }
.pill.amber { background: #fff7ed; color: #c2410c; }
.pill.rose { background: #fff1f2; color: #be123c; }
.pill.slate { background: #f1f5f9; color: #334155; }
.pill.navy { background: #eef2ff; color: #1e3a8a; }
.check-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.check-list li { color: #d8e4f5; font-size: 13px; }

.page-head { margin: 0 0 24px; }
.page-head small { color: var(--green); font-weight: 800; letter-spacing: 1.5px; font-size: 10px; text-transform: uppercase; }
.page-head h1 { margin: 6px 0 5px; font-size: 26px; letter-spacing: -.7px; font-weight: 750; }
.page-head p { margin: 0; color: var(--muted); }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 8px 0 16px; }
.stat { background: var(--card); border: 1px solid transparent; border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.stat small { display: block; font-size: 10px; font-weight: 800; color: #6b7280; letter-spacing: .8px; }
.stat strong { display: block; font-size: 25px; margin: 12px 0 5px; letter-spacing: -.03em; }
.stat span { font-size: 11px; color: var(--muted); }
.stat.navy strong { color: #1f2937; }
.stat.amber strong { color: var(--amber); }
.stat.violet strong { color: var(--violet); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.org-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.org-tree { display: flex; flex-direction: column; align-items: center; gap: 0; }
.org-node { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: var(--card, #fff); text-align: center; min-width: 180px; }
.org-node small { display: block; }
.org-node-top { background: var(--accent-soft, #eef4ff); }
.org-stem { width: 2px; height: 16px; background: var(--line); }
.org-branches { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; width: 100%; align-items: flex-start; }
.org-branch { display: flex; flex-direction: column; align-items: center; flex: 1 1 240px; max-width: 320px; }
.org-reports { display: grid; gap: 8px; width: 100%; }
.profile-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; margin-top: 8px; }
.profile-facts small { display: block; color: var(--muted); font-size: 12px; }
.profile-facts strong { display: block; font-weight: 600; margin-top: 2px; }
.org-unassigned { margin-top: 28px; display: flex; justify-content: center; }
.org-ed { text-align: center; }
.org-lane-role { padding: 10px 0; border-bottom: 1px solid var(--line); }
.org-lane-role:last-child { border-bottom: 0; }
.org-lane-role small { display: block; }
.card {
  background: var(--card);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.card h2, .section-head h2 { font-size: 12px; margin: 0 0 14px; letter-spacing: .08em; text-transform: uppercase; color: #6b7280; font-weight: 800; }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.row-line { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.row-line:last-child { border-bottom: 0; }
.row-line small { display: block; color: var(--muted); font-size: 11px; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table th { color: #8a9399; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; background: transparent; }
.table small { display: block; color: var(--muted); }
.warn-row { background: #fff8ee; }
.tabs { display: flex; gap: 4px; margin-bottom: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.tabs button, .tab-link { padding: 11px 16px; border: 0; background: transparent; color: var(--muted); font-size: 13px; border-radius: 0; display: inline-block; text-decoration: none; cursor: pointer; }
.tabs button.active, .tab-link.active { color: var(--navy); font-weight: 650; border-bottom: 2px solid var(--navy); }
.form-grid, .stack { display: grid; gap: 12px; }
.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid label, .stack label { display: grid; gap: 6px; font-size: 12px; font-weight: 600; color: #4b5563; }
.form-grid .wide { grid-column: 1 / -1; }
input, select, textarea {
  width: 100%;
  padding: 0 12px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
}
textarea { height: auto; min-height: 90px; padding: 10px 12px; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #6ee7b7;
  box-shadow: 0 0 0 3px rgba(125, 255, 176, .38);
}
.btn, .button {
  border: 1px solid var(--navy);
  border-radius: var(--radius-sm);
  padding: 0 16px;
  height: 40px;
  cursor: pointer;
  font-weight: 650;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--blue);
  color: #fff;
  text-decoration: none;
}
.btn:hover, .button:hover { text-decoration: none; background: var(--blue-hover); color:#fff; }
.btn-primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-secondary, .button.secondary { background: #fff; color: #374151; border-color: #e5e7eb; }
.btn-secondary:hover, .button.secondary:hover { background: #f8faf9; }
.btn-danger { background: #f6f7f7; border-color: #c3c4c7; color: var(--danger); }
.btn-danger:hover { background: #dc2626; }
.btn-block { width: 100%; }
.btn-widget { margin-left: 8px; }
.plus-mint {
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #22c55e; font-size: 16px; font-weight: 700; line-height: 1;
}
.actions-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0; }
.alert { padding: 12px 14px; border-radius: 10px; margin-bottom: 12px; background: #fff; box-shadow: var(--shadow); }
.alert.success { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; box-shadow: none; }
.alert.error { background: #fff1f2; color: #be123c; border: 1px solid #fecdd3; box-shadow: none; }
.alert.info { background: #ecfdf5; color: #047857; }
.late-arrival-alert { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; box-shadow: none; }
.late-arrival-alert form, .announcement-alert form { margin: 0; }
.late-arrival-alert button, .announcement-alert button { border: 0; background: transparent; color: inherit; font-size: 24px; line-height: 1; padding: 0 4px; }
.announcement-alert { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.muted { color: var(--muted); font-size: 12px; line-height: 1.5; }
.calc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.calc-grid .net { grid-column: span 3; background: #ecfdf5; padding: 12px; border-radius: 12px; }
.security-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.otp { letter-spacing: 8px; font-size: 24px; text-align: center; }
.catalog { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.widget-catalog { flex-direction: column; gap: 10px; }
.widget-toggle {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; color: var(--ink); cursor: pointer;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff;
}
.widget-toggle:hover { border-color: #cbd5e1; background: #f8faf9; }
.widget-toggle input { width: 18px; height: 18px; accent-color: var(--blue); }
.toolbar-form { display: flex; gap: 10px; margin-bottom: 16px; }
.toolbar-form input { max-width: 360px; }
.mini-input { width: 120px; height: 34px; }
.inline-actions { display: inline-flex; gap: 6px; align-items: center; }
code { font-family: var(--mono); font-size: 11px; background: #f3f4f6; padding: 2px 6px; border-radius: 4px; }

.widget-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.widget-main { grid-column: span 7; }
.widget-aside { grid-column: span 5; }
.widget-third { grid-column: span 4; }
.widget-half { grid-column: span 6; }
.widget-full { grid-column: span 12; }
.widget-grid > .card { margin-bottom: 0; }
.metric { font-size: 34px; font-weight: 800; letter-spacing: -.04em; display: block; margin: 8px 0 10px; }
.bar-row { display: grid; grid-template-columns: 140px 1fr 70px; gap: 10px; align-items: center; font-size: 12px; margin: 8px 0; color: #4b5563; }
.bar { height: 8px; background: #e5e7eb; border-radius: 99px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--forest); border-radius: 99px; }
.bar.thin { height: 4px; }
.bar.thin > span { background: #86efac; }
.accent-card { border-left: 6px solid var(--mint); }
.accent-card.slate { border-left-color: var(--navy); }
.task-dot { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; display: inline-block; margin-right: 8px; }
.widget-picker { position: absolute; right: 32px; top: 80px; width: 320px; z-index: 30; }
.hero-stat { font-size: 28px; font-weight: 800; letter-spacing: -.03em; display: block; margin: 6px 0 4px; }
.payroll-period { display: block; font-size: 18px; font-weight: 750; margin: 0 0 8px; letter-spacing: -.02em; }

.version-chip { color: #9ca3af; font-size: 10px; }
.app-foot { padding: 12px 32px 24px; color: var(--muted); font-size: 11px; }
.avatar-img, .avatar-fallback { border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; object-fit: cover; }
.avatar-fallback { background: #111827; color: var(--mint); font-weight: 800; letter-spacing: .04em; }
.kanban { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kanban-col { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; min-height: 220px; }
.kanban-col h3 { margin: 0 0 10px; font-size: 13px; }
.kanban-card { display: block; padding: 10px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; background: var(--bg); color: inherit; }
.chat-layout { display: grid; grid-template-columns: 220px 1fr; gap: 16px; }
.chat-list a { display: flex; justify-content: space-between; padding: 8px 10px; border-radius: 10px; color: inherit; }
.chat-list a.active { background: var(--navy); color: #fff; }
.file-card { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }

/* Drives / DMS */
.dms-shell { max-width: 1100px; }
.dms-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.dms-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dms-view-toggle .btn.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }
.dms-crumb { color: var(--muted); text-decoration: none; }
.dms-crumb:hover { color: var(--navy); text-decoration: underline; }
.dms-drive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 20px; }
.dms-drive-card {
  display: grid; gap: 6px; padding: 18px 16px; border: 1px solid var(--line); border-radius: 14px;
  background: #fff; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
.dms-drive-card:hover { border-color: #c7d2fe; box-shadow: 0 8px 24px rgba(15, 23, 42, .06); text-decoration: none; }
.dms-drive-icon { font-size: 28px; line-height: 1; }
.dms-drive-card strong { font-size: 15px; }
.dms-drive-card small { color: var(--muted); }
.dms-upload { margin-bottom: 14px; }
.dms-search { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: end; margin-bottom: 14px; }
.dms-empty { color: var(--muted); }
.dms-files-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.dms-files-list { display: grid; gap: 0; }
.dms-file-card {
  display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff;
}
.dms-files-list .dms-file-card { grid-template-columns: 1fr auto; border-radius: 0; border-left: 0; border-right: 0; border-top: 0; }
.dms-file-main { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.dms-file-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.dms-file-main strong { display: block; word-break: break-word; }
.dms-file-main small { color: var(--muted); display: block; margin-top: 4px; }
.dms-file-meta { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.dms-file-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.dms-file-more { position: relative; }
.dms-file-more summary { list-style: none; cursor: pointer; }
.dms-file-more summary::-webkit-details-marker { display: none; }
.dms-file-more-panel {
  position: absolute; right: 0; z-index: 5; min-width: 280px; margin-top: 6px; padding: 12px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 12px 30px rgba(15, 23, 42, .12);
}
.dms-form-error, .dms-modal-note { color: var(--muted); font-size: 12px; margin: 0; }
html[data-theme="dark"] .dms-drive-card, html[data-theme="dark"] .dms-file-card, html[data-theme="dark"] .dms-file-more-panel { background: #181c24; }
.landing-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.photo-meta { font-size: 11px; color: var(--muted); margin-top: 6px; }

/* Task console — stacked accordion pills */
.task-console { max-width: 920px; margin: 8px auto 0; }
.task-console-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.task-search { display: flex; align-items: center; gap: 8px; flex: 1 1 240px; min-width: 200px; max-width: 420px; }
.task-search input[type="search"] { flex: 1; min-width: 0; height: 40px; }
.bulk-prompt {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: min(92vw, 520px);
  padding: 14px 18px;
  border-radius: 16px;
  background: #0f172a;
  color: #fff;
  border: 1px solid #1e293b;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .35);
  font-weight: 650;
}
.bulk-prompt[hidden] { display: none !important; }
.bulk-prompt form { margin: 0; }
.bulk-prompt .btn-secondary { background: #1e293b; color: #fff; border-color: #334155; }
.bulk-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 14px; padding: 10px 14px; border-radius: 12px;
  background: #eff6ff; border: 1px solid #bfdbfe; font-weight: 650;
}
.bulk-bar form { margin: 0; }
.bulk-check { display: inline-flex; align-items: center; flex-shrink: 0; cursor: pointer; }
.bulk-check input { width: 16px; height: 16px; margin: 0; }
.dms-file-card.is-selected, .task-pick.is-selected { outline: 2px solid var(--navy); }
.task-pick { position: relative; }
.task-pick .bulk-check { position: absolute; top: 10px; right: 10px; z-index: 2; }
.task-pick .task-item { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; color: inherit; width: 100%; text-decoration: none; }
.task-pick.task-row { display: flex; align-items: center; gap: 12px; }
.task-pick.task-row .bulk-check { position: static; }
.task-pick.task-row .task-item { flex-direction: row; align-items: center; min-height: 0; }
html[data-theme="dark"] .bulk-bar { background: #1e293b; border-color: #334155; color: #eef1f4; }
.task-view-toggle { display: inline-flex; gap: 6px; }
.task-view-toggle .btn.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }
.task-items-list { display: grid; gap: 2px; }
.task-items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.task-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 14px; border-radius: 14px; color: inherit; min-height: 120px;
  border: 1px solid var(--line); background: #fff;
}
.task-card:hover { border-color: #cbd5e1; text-decoration: none; box-shadow: var(--shadow); }
.task-card.is-express { background: #fff1f2; border-color: #fecaca; }
.task-card .task-row-copy { width: 100%; }
.task-card .task-express-mark { display: none; }
.task-card .task-clip { margin-top: auto; }
.task-new-btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 22px 0 16px;
  background: var(--navy); color: #fff; border: 0; border-radius: 999px;
  font-weight: 600; font-size: 14px; letter-spacing: -.01em;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .18);
}
.task-new-btn:hover { background: #0b1220; text-decoration: none; color: #fff; }
.task-new-plus {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #22c55e; font-size: 20px; font-weight: 700; line-height: 1;
}
.task-lanes { display: grid; gap: 14px; }
.task-lane { display: grid; gap: 10px; }
.task-bar {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; height: 56px; padding: 0 22px 0 20px;
  background: #fff; border: 0; border-radius: 999px;
  box-shadow: var(--shadow);
  color: #111827; text-align: left;
}
.task-bar:hover { box-shadow: 0 8px 20px rgba(15, 23, 42, .1); }
.task-bar-left { display: inline-flex; align-items: center; gap: 10px; }
.task-bar-left strong { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.task-status-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.task-count {
  min-width: 28px; height: 22px; padding: 0 8px;
  border-radius: 999px; background: #f3f4f6; color: #4b5563;
  font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.task-chevron { transition: transform .15s ease; flex-shrink: 0; }
.task-chevron.is-open { transform: rotate(180deg); }
.task-lane-body {
  background: #fff; border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 8px;
}
.task-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 14px; color: inherit;
}
.task-row:hover { background: #f9fafb; text-decoration: none; }
.task-row.is-express { background: #fff1f2; }
.task-row-copy { flex: 1; min-width: 0; display: grid; gap: 2px; }
.task-row-copy strong { font-size: 14px; }
.task-row-copy small { color: var(--muted); font-size: 12px; }
.task-empty { padding: 12px 16px; margin: 0; }
.task-express-mark {
  width: 8px; height: 8px; border-radius: 50%; background: var(--danger);
  box-shadow: 0 0 0 3px #fecaca; flex-shrink: 0;
}
.task-express-label {
  display: inline-flex; align-items: center;
  background: #fee2e2; color: #b91c1c; font-size: 10px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 8px;
}
.task-priority-toggle { display: flex; gap: 8px; }
.task-priority-opt {
  display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--ink);
}
.task-priority-opt input { width: auto; height: auto; }
.task-priority-opt.express { border-color: #fecaca; color: #b91c1c; }
.task-modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 24px; }
.task-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .35); }
.task-modal-card {
  position: relative; z-index: 1; width: min(520px, 100%);
  background: #fff; border-radius: 20px; padding: 24px;
  box-shadow: 0 24px 50px rgba(15, 23, 42, .2);
}
.task-modal-card h2 { margin: 0; }
.task-modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

.directory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 14px; }
.directory-card { display: flex; gap: 14px; align-items: center; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; color: inherit; box-shadow: none; }
.directory-card:hover { border-color: #cbd5e1; text-decoration: none; box-shadow: var(--shadow); }
.directory-card strong { display: block; font-size: 15px; }
.directory-card small { display: block; color: var(--muted); }
.profile-hero { display: flex; gap: 20px; align-items: center; }

/* Chat page: flex height chain — thread scrolls, composer stays visible */
.shell:has(.chat-shell) {
  height: 100vh;
  min-height: 100vh;
}
.shell:has(.chat-shell) > .main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  max-height: 100vh;
}
.shell:has(.chat-shell) .topbar { flex-shrink: 0; }
.shell:has(.chat-shell) .content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-top: 16px;
  padding-bottom: 12px;
}
.shell:has(.chat-shell) .app-foot { flex-shrink: 0; }

.chat-shell {
  display: grid;
  grid-template-columns: 260px 1fr 240px;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  background: var(--card);
  border: 1px solid transparent;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.chat-shell:not(.has-members) { grid-template-columns: 260px 1fr; }
.chat-channels {
  border-right: 1px solid var(--line); padding: 16px 12px; background: #f8faf9;
  overflow-y: auto; min-height: 0; max-height: 100%;
  -webkit-overflow-scrolling: touch;
}
.chat-channels-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.chat-channels-head strong { font-size: 11px; letter-spacing: .1em; color: var(--muted); font-weight: 800; }
.chat-new-public { display: flex; gap: 6px; }
.chat-new-public input { flex: 1; min-width: 0; }
.chat-plus { width: 32px; height: 32px; border: 0; border-radius: 8px; background: #22c55e; color: #fff; font-size: 20px; font-weight: 700; line-height: 1; }
.chat-channel { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; color: inherit; font-size: 13.5px; }
.chat-channel:hover { background: #eef2f1; text-decoration: none; }
.chat-channel.active { background: var(--navy); color: #fff; }
.chat-channel.active .chat-hash, .chat-channel.active .chat-lock { color: #fff; }
.chat-hash { color: var(--muted); font-weight: 600; }
.chat-lock { color: #ca8a04; flex-shrink: 0; }
.chat-private-form { margin-top: 16px; display: grid; gap: 8px; }
.chat-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}
.chat-main-head { flex-shrink: 0; padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chat-main-head h2 { margin: 0; font-size: 16px; text-transform: none; letter-spacing: -.02em; color: var(--ink); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.chat-main-head-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.chat-close {
  width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line);
  background: transparent; color: var(--ink); font-size: 22px; line-height: 1;
  display: inline-grid; place-items: center; text-decoration: none; flex-shrink: 0;
}
.chat-close:hover { background: #f3f4f6; text-decoration: none; }
.chat-placeholder { display: flex; align-items: center; justify-content: center; color: var(--muted); height: 100%; min-height: 240px; padding: 40px; text-align: center; }
.chat-shell.is-list { grid-template-columns: 280px 1fr; }
.chat-channel-rename { display: flex; align-items: center; gap: 8px; margin: 0; }
.chat-channel-rename input { width: 180px; }
.chat-thread {
  flex: 1 1 auto;
  min-height: 200px;
  padding: 16px 18px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-load-older { display: flex; justify-content: center; padding: 4px 0 8px; position: sticky; top: 0; z-index: 2; background: linear-gradient(var(--surface) 70%, transparent); }
.chat-msg { display: flex; gap: 10px; }
.chat-msg small { display: block; color: var(--muted); font-size: 11px; }
.chat-msg p { margin: 4px 0 0; }
.chat-empty { color: var(--muted); margin: 40px 0; text-align: center; }
.chat-img { max-width: 280px; border-radius: 10px; margin-top: 6px; }
.chat-composer { flex-shrink: 0; padding: 12px 16px 16px; border-top: 1px solid var(--line); }
.chat-composer-row { display: flex; align-items: flex-end; gap: 8px; }
.chat-composer-row textarea { flex: 1; min-height: 42px; }
.chat-attach, .chat-tool {
  width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; display: grid; place-items: center; color: #4b5563; flex-shrink: 0;
}
.chat-attach input { display: none; }
.chat-send {
  background: var(--navy); color: #fff; border: 0; border-radius: 10px;
  padding: 0 16px; height: 40px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px;
}
.chat-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chat-picker button { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 4px 8px; }
.chat-members {
  border-left: 1px solid var(--line);
  padding: 16px 12px;
  background: #f8faf9;
  overflow-y: auto;
  min-height: 0;
  max-height: 100%;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-members-head { font-size: 11px; letter-spacing: .1em; color: var(--muted); font-weight: 800; }
.chat-members-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.chat-member-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 8px; border-radius: 8px; background: #fff; border: 1px solid var(--line);
  font-size: 13px;
}
.chat-member-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-member-remove {
  border: 0; background: transparent; color: #b45309; font-size: 11px; font-weight: 700;
  padding: 2px 6px; border-radius: 6px; flex-shrink: 0;
}
.chat-member-remove:hover { background: #fef3c7; }
.chat-members-add { display: grid; gap: 8px; margin-top: 4px; }
.chat-members-add select { width: 100%; }
.chat-members-note { font-size: 12px; color: var(--muted); line-height: 1.45; margin: 0; }
.chat-members-danger { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.chat-delete-btn {
  width: 100%; border: 1px solid #fecaca; background: #fff; color: #b91c1c;
  border-radius: 8px; padding: 8px 10px; font-size: 12px; font-weight: 700;
}
.chat-delete-btn:hover { background: #fef2f2; }

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101217;
  --card: #181c24;
  --ink: #eef1f4;
  --muted: #9aa3b2;
  --line: #2a3140;
  --border: #2a3140;
  --sidebar: #14181f;
  --shadow: 0 1px 2px rgba(0,0,0,.25), 0 10px 28px rgba(0,0,0,.22);
}
html[data-theme="dark"] .sidebar { color: #9aa3b2; }
html[data-theme="dark"] .nav a { color: #c3cad6; }
html[data-theme="dark"] .nav a:hover, html[data-theme="dark"] .nav-theme:hover { background: #1f2530; color: #fff; }
html[data-theme="dark"] .nav a.active, html[data-theme="dark"] .nav a.active:hover { background: #0f172a; color: #fff; }
html[data-theme="dark"] .nav-theme { color: #c3cad6; }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea {
  background: #12161d; color: #eef1f4; border-color: #2a3140;
}
html[data-theme="dark"] .menu-btn { background: #181c24; color: #eef1f4; border-color: #2a3140; }
html[data-theme="dark"] .table th { background: transparent; color: #9aa3b2; }
html[data-theme="dark"] .btn-secondary { background: #181c24; color: #d5e4f7; border-color: #2a3140; }
html[data-theme="dark"] .bar { background: #2a3140; }
html[data-theme="dark"] .aside-foot strong, html[data-theme="dark"] .brand-block strong, html[data-theme="dark"] .top-company { color: #eef1f4; }
html[data-theme="dark"] .task-bar, html[data-theme="dark"] .task-lane-body, html[data-theme="dark"] .task-modal-card { background: #181c24; color: #eef1f4; }
html[data-theme="dark"] .task-card { background: #181c24; border-color: #2a3140; }
html[data-theme="dark"] .task-card.is-express { background: #2a1a1f; border-color: #7f1d1d; }
html[data-theme="dark"] .task-row:hover { background: #1f2530; }
html[data-theme="dark"] .chat-channels, html[data-theme="dark"] .chat-members { background: #14181f; }
html[data-theme="dark"] .chat-close { border-color: #2a3140; color: #eef1f4; }
html[data-theme="dark"] .chat-close:hover { background: #1f2530; }
html[data-theme="dark"] .chat-member-row { background: #181c24; border-color: #2a3140; }
html[data-theme="dark"] .chat-delete-btn { background: #181c24; border-color: #7f1d1d; color: #fca5a5; }
html[data-theme="dark"] .chat-attach, html[data-theme="dark"] .chat-tool, html[data-theme="dark"] .chat-picker button { background: #181c24; color: #c3cad6; border-color: #2a3140; }
html[data-theme="dark"] .directory-card { background: #181c24; }
html[data-theme="dark"] .tabs button.active, html[data-theme="dark"] .tab-link.active { color: #fff; border-bottom-color: #fff; }
html[data-theme="dark"] .history-item::before { background: #a7f3d0; }
html[data-theme="dark"] .pill.slate { background: #1f2530; color: #c3cad6; }
html[data-theme="dark"] .pill.navy { background: #1e293b; color: #c7d2fe; }

.punch-hero-card { padding: 28px; }
.punch-hero { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.punch-date { margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.punch-hello { margin: 0 0 8px; font-size: 28px; font-weight: 750; letter-spacing: -.03em; color: var(--ink); }
.punch-status { margin: 0; font-size: 15px; color: #4b5563; }
.punch-actions { display: flex; gap: 10px; align-items: center; }
.btn-punch-mint, .btn-punch-navy, .btn-punch-idle {
  min-width: 112px; height: 42px; border-radius: 12px; font-weight: 650;
}
.btn-punch-mint { background: #a7f3d0; color: #111827; border-color: #a7f3d0; }
.btn-punch-mint:hover, .btn-punch-mint:disabled { background: #a7f3d0; color: #111827; opacity: 1; cursor: default; }
.btn-punch-navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-punch-idle { background: #f3f4f6; color: #9ca3af; border-color: #e5e7eb; cursor: default; }
.whos-in-card > h2 {
  text-transform: none; letter-spacing: -.02em; font-size: 18px; font-weight: 750;
  color: var(--ink); margin-bottom: 16px;
}
.punch-hours { color: var(--muted); }
.punch-edit {
  background: none; border: 0; color: #374151; font-weight: 600; height: auto; padding: 0;
  box-shadow: none;
}
.punch-edit:hover { background: none; text-decoration: underline; }
.punch-edit-form { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.punch-edit-form input[type="time"] { width: 120px; height: 34px; }
.whos-in-foot { margin: 16px 0 0; color: var(--muted); font-size: 12px; }
.task-clip {
  display: inline-flex; align-items: center; gap: 4px;
  color: #6b7280; font-size: 12px; font-weight: 650; flex-shrink: 0;
}
.history-timeline { display: grid; gap: 0; margin-top: 8px; }
.history-item {
  position: relative;
  padding: 14px 0 14px 20px;
  border-left: 2px solid var(--line);
}
.history-item:last-child { padding-bottom: 0; }
.history-item::before {
  content: "";
  position: absolute;
  left: -6px; top: 20px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--navy);
}
.history-item-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.history-item-head time { color: var(--muted); font-size: 12px; }
.history-item strong { display: block; margin: 2px 0 4px; }
.history-item p { margin: 0 0 4px; font-size: 13px; }
.history-item small { color: var(--muted); }
.form-grid .check-inline { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #4b5563; }
.form-grid .check-inline input[type="checkbox"] { width: 16px; height: 16px; }

.statutory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.statutory-option {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; cursor: pointer;
}
.statutory-option.compact { padding: 10px 12px; }
.statutory-option.is-readonly { cursor: default; justify-content: space-between; }
.statutory-option input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--navy); flex-shrink: 0; }
.statutory-option strong { display: block; font-size: 14px; color: var(--ink); margin-bottom: 2px; }
.statutory-option small { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; font-weight: 400; }
.statutory-option em { color: var(--muted); font-style: normal; font-size: 12px; font-weight: 600; }

.template-employee-card {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px 18px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s;
}
.template-employee-card:last-child { margin-bottom: 0; }
.template-employee-card:hover { border-color: #cbd5e1; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06); }
.template-employee-card strong { display: block; font-size: 15px; color: var(--ink); margin-bottom: 4px; }
.template-employee-card small { display: block; color: var(--muted); font-size: 12px; }
.template-status { font-size: 12px; font-weight: 700; white-space: nowrap; }
.template-status.is-saved { color: #059669; }
.template-status.is-pending { color: #9ca3af; }

.template-card {
  margin-bottom: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden;
}
.template-card:last-child { margin-bottom: 0; }
.template-card-head {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  width: 100%; padding: 16px 18px; border: 0; background: transparent; text-align: left; cursor: pointer;
}
.template-card-head strong { display: block; font-size: 15px; color: var(--ink); margin-bottom: 4px; }
.template-card-head small { display: block; color: var(--muted); font-size: 12px; }
.template-card-body { padding: 0 18px 18px; border-top: 1px solid var(--line); }
.template-editor { padding-top: 16px; }
.template-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 18px; }
.template-column { min-width: 0; }
.template-section-label {
  display: block; margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #64748b;
}
.template-section-label.is-orange { color: #c2410c; }
.template-line-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 120px 28px; gap: 8px; align-items: center; margin-bottom: 8px;
}
.template-line-row input[type="text"],
.template-line-row input[type="number"] {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px;
}
.template-line-remove {
  width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; color: #94a3b8;
  font-size: 18px; line-height: 1; cursor: pointer;
}
.template-line-remove:hover { color: #64748b; background: #f1f5f9; }
.template-add-link {
  border: 0; background: transparent; padding: 0; font-size: 13px; font-weight: 600; cursor: pointer;
}
.template-add-link.is-green { color: #059669; }
.template-add-link.is-orange { color: #c2410c; }
.template-benefits-box {
  margin-bottom: 18px; padding: 14px 16px; border: 1px solid #fdba74; border-radius: 10px; background: #fff7ed;
}
.template-benefits-help { margin: 0 0 12px; font-size: 13px; color: #7c2d12; line-height: 1.5; }
.template-statutory-amounts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px;
}
.template-statutory-amounts label { display: block; }
.template-statutory-amounts input[type="number"] {
  width: 100%; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
}
.template-statutory-amounts small { display: block; margin-top: 6px; }
.template-tax-box {
  margin-bottom: 18px; padding: 14px 16px; border-radius: 10px; background: #f8fafc; border: 1px solid var(--line);
}
.template-tax-box .muted { margin: 0 0 12px; font-size: 13px; }
.template-tax-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.template-tax-grid label span { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.template-tax-grid select {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
[x-cloak] { display: none !important; }

.quote-form h2 { margin-bottom: 4px; }
.quote-form-subtitle { margin: 0 0 18px; font-size: 13px; color: #6b7280; line-height: 1.5; font-weight: 400; }
.quote-form-header {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px;
}
.quote-form-header label { display: grid; gap: 6px; font-size: 12px; font-weight: 600; color: #4b5563; }
.quote-form-header input,
.quote-form-header select {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; background: #fff;
}
.quote-line-items { margin-bottom: 12px; }
.quote-line-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 100px 140px 28px; gap: 8px; margin-bottom: 8px; align-items: center;
}
.quote-line-row input {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px;
}
.quote-totals { max-width: 180px; margin: 16px 0 0; }
.quote-totals label { display: grid; gap: 6px; font-size: 12px; font-weight: 600; color: #4b5563; }
.quote-totals input {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px;
}
.quote-vat-check {
  display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #4b5563; margin: 12px 0 16px;
}
.quote-vat-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--navy); }
.quote-summary {
  max-width: 280px; margin: 0 0 16px auto; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 10px; background: #f9fafb;
}
.quote-summary-row {
  display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 13px; color: #4b5563;
}
.quote-summary-row.is-grand {
  margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink);
}
.quote-notes label { display: grid; gap: 6px; font-size: 12px; font-weight: 600; color: #4b5563; margin-bottom: 16px; }
.quote-notes textarea {
  width: 100%; min-height: 88px; padding: 10px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 13px; resize: vertical; font-family: inherit;
}
.quote-form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.quote-list-card { margin-top: 16px; padding: 0; overflow: hidden; }
.quote-list-table { margin: 0; }
.quote-list-table th:last-child,
.quote-list-table td:last-child { text-align: right; }
.quote-list-table td { vertical-align: middle; }
.quote-badge-draft { background: #fff7ed; color: #c2410c; font-size: 11px; font-weight: 700; padding: 5px 10px; }
.quote-badge-locked { background: #ecfdf5; color: #047857; font-size: 11px; font-weight: 700; padding: 5px 10px; }
.quote-actions { display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: flex-end; align-items: center; font-size: 13px; }
.quote-actions a,
.quote-actions button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; text-decoration: none; color: var(--ink); }
.quote-actions button.is-green,
.quote-actions a.is-green { color: #059669; font-weight: 600; }
.quote-actions button.is-red { color: #dc2626; font-weight: 600; }
.quote-actions .is-muted { color: #9ca3af; font-weight: 600; }
.quote-inline-form { display: inline; margin: 0; }

@media (max-width: 900px) {
  .template-columns, .template-statutory-amounts, .template-tax-grid { grid-template-columns: 1fr; }
  .template-line-row { grid-template-columns: minmax(0, 1fr) 100px 28px; }
  .quote-form-header { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quote-line-row { grid-template-columns: minmax(0, 1fr) 90px 120px 28px; }
}

@media (max-width: 1100px) {
  .stats-grid, .grid-2, .org-lanes, .security-grid, .form-grid, .kanban, .chat-layout, .statutory-grid, .profile-facts { grid-template-columns: 1fr; }
  .widget-main, .widget-aside, .widget-third, .widget-half, .widget-full { grid-column: span 12; }
  .chat-shell, .chat-shell.has-members, .chat-shell.is-list { grid-template-columns: 1fr; min-height: 0; }
  .chat-members { border-left: 0; border-top: 1px solid var(--line); max-height: 280px; }
  .chat-shell.has-open-chat .chat-channels { display: none; }
  .chat-shell:not(.has-open-chat) .chat-main,
  .chat-shell:not(.has-open-chat) .chat-members { display: none; }
}
@media (max-width: 800px) {
  .login-page { display: grid; }
  .login-panel { padding: 28px 20px 18px; }
}
@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    display: none;
    position: fixed;
    inset: 0 auto 0 0;
    width: 248px;
    z-index: 40;
    box-shadow: 8px 0 30px rgba(0,0,0,.12);
  }
  .sidebar.open { display: flex; }
  .sidebar-scrim { display: block; position: fixed; inset: 0; background: rgba(15,23,42,.35); z-index: 35; }
  .menu-btn, .top-logo { display: inline-grid; }
  .content { padding: 16px 16px 24px; }
  .topbar { padding: 12px 16px; min-height: 64px; }
  .top-company { font-size: 18px; }
  .top-meta { display: none; }
  .top-user-copy { display: none; }
  .app-foot { padding: 12px 16px 24px; }
}
/* Werkflow Lite product chrome (HR keeps default navy sidebar/topbar). */
html[data-product="lite"] .topbar {
  background: var(--bg);
  color: var(--text);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}
html[data-product="lite"] .top-company { color: var(--text); }
html[data-product="lite"] .top-meta { color: var(--muted); }
html[data-product="lite"] .top-search input {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--line);
}
html[data-product="lite"] .top-search input::placeholder { color: var(--muted); }
html[data-product="lite"] .top-search svg { color: var(--muted); }
html[data-product="lite"] .avatar-menu { color: var(--ink); }
html[data-product="lite"] .top-user-copy strong { color: var(--ink); }
html[data-product="lite"] .top-user-copy small { color: var(--muted); }
html[data-product="lite"] .avatar-menu .chev { color: var(--muted); }
html[data-product="lite"] .role-badge.owner { color: var(--blue); }
html[data-product="lite"] .aside {
  background: #23282d;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
html[data-product="lite"] .brand strong { letter-spacing: 0.01em; }
html[data-theme="dark"][data-product="lite"] .topbar {
  background: var(--bg);
  border-bottom-color: var(--line);
}
html[data-theme="dark"][data-product="lite"] .top-search input {
  background: #1c1f26;
  border-color: var(--line);
  color: var(--text);
}

.payroll-run-head { margin: 0 0 20px; }
.payroll-run-title { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.payroll-run-title h1 { margin: 0; font-size: 28px; font-weight: 750; letter-spacing: -.03em; }
.btn-pill { border-radius: 999px; height: 36px; padding: 0 18px; font-size: 13px; }
.btn-navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-hover); border-color: var(--navy-hover); color: #fff; }
.payroll-run-stats { margin-bottom: 18px; }
.stat.paye strong { color: var(--danger); }
.stat.ssc strong { color: var(--amber); }
.stat.net strong { color: var(--green); font-weight: 800; }
.payroll-run-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.payroll-run-actions form { margin: 0; }
.pill.approved { background: #ecfdf5; color: #047857; padding: 8px 16px; font-size: 12px; font-weight: 700; }
.pill.draft { background: #f3f4f6; color: #6b7280; padding: 8px 16px; font-size: 12px; font-weight: 700; }
.payroll-run-card { padding-top: 8px; }
.payroll-run-table .num { text-align: right; white-space: nowrap; }
.payroll-run-table th.num { text-align: right; }
.payroll-run-table .amt-paye { color: var(--danger); }
.payroll-run-table .amt-ssc { color: var(--amber); }
.payroll-run-table .amt-other { color: #c2410c; }
.payroll-run-foot { margin: 20px 0 0; font-size: 12px; }
.payroll-run-secondary { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

/* Provisional tax — Fluentia-style standalone page */
.provisional-form { margin-bottom: 16px; }
.provisional-ledger-note { margin: 4px 0 16px; font-size: 13px; }
.provisional-form-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.provisional-summary { margin-bottom: 16px; }
.provisional-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.provisional-row:last-child { border-bottom: 0; }
.provisional-row span { color: #4b5563; font-size: 14px; }
.provisional-row strong { font-size: 14px; font-weight: 700; }
.provisional-row-total { padding-top: 14px; }
.provisional-row-total span { font-weight: 700; color: var(--ink); }
.provisional-annual-tax { font-size: 22px !important; letter-spacing: -.02em; }
.provisional-instalment { margin-bottom: 16px; }
.provisional-instalment-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.provisional-instalment h2 { font-size: 15px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--ink); margin: 0 0 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.provisional-instalment .muted { margin: 0 0 8px; font-size: 13px; line-height: 1.5; max-width: 520px; }
.provisional-due { margin: 0; font-size: 13px; font-weight: 700; color: var(--ink); }
.provisional-pay { text-align: right; min-width: 140px; }
.provisional-pay small { display: block; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; margin-bottom: 4px; }
.provisional-pay strong { display: block; color: var(--danger); font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.provisional-disclaimer { font-size: 12px; line-height: 1.6; max-width: 720px; margin: 8px 0 24px; }

/* Finance report headers (trial balance, P&L, balance sheet) */
.finance-report-card { padding-top: 8px; }
.finance-report-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line, #e5e7eb); }
.finance-report-brand { display: flex; gap: 16px; align-items: flex-start; max-width: 62%; }
.finance-report-logo { max-height: 48px; }
.finance-report-company { font-size: 18px; font-weight: 700; color: var(--brand, #1d4ed8); margin: 0 0 4px; }
.finance-report-meta { text-align: right; }
.finance-report-title { font-size: 16px; font-weight: 800; letter-spacing: .06em; margin: 0 0 4px; text-transform: uppercase; }
.finance-report-table th { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.finance-report-table .bold td { font-weight: 700; border-top: 2px solid var(--ink, #111827); }

.vacancy-chart { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; }
.vacancy-chart-bars { display: flex; gap: 28px; align-items: flex-end; }
.vacancy-chart-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.vacancy-chart-col small { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.vacancy-chart-value { font-size: 18px; font-weight: 800; color: var(--ink); }
.vacancy-chart-stats { flex: 1; min-width: 240px; }
.vacancy-role { border-bottom: 1px solid var(--line, #e5e7eb); }
.vacancy-role:last-child { border-bottom: 0; }
.vacancy-role-head { width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer; }
.vacancy-jd { font-size: 14px; line-height: 1.55; color: var(--ink); margin: 0 0 12px; }

/* Payroll template column headings */
.template-line-head { margin-bottom: 4px; font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }

/* Drive notes and upload notifications */
.dms-notify { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 0; }
.dms-notify legend { font-size: 13px; font-weight: 600; padding: 0 4px; }
.dms-notify-list { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 6px; }
.dms-notify-list label { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }
.dms-notify-list input[type="checkbox"], .dms-task-toggle input[type="checkbox"] { width: 16px; height: 16px; min-height: 0; padding: 0; margin: 0; flex: none; }
.dms-notes { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 8px; }
.dms-notes summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--navy, #1d4ed8); }
.dms-note { padding: 8px 0; border-bottom: 1px solid var(--line); }
.dms-note:last-of-type { border-bottom: 0; }
.dms-note-head { display: flex; align-items: center; gap: 8px; }
.dms-note-head small { color: var(--muted); }
.dms-note-head form { margin: 0 0 0 auto; }
.dms-note-delete { border: 0; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.dms-note p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; white-space: normal; word-break: break-word; }
.dms-note-form { display: grid; gap: 6px; margin-top: 8px; }
.dms-note-form textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 13px; }
.dms-note-form .btn { justify-self: start; }

/* Charts (server-rendered SVG — partials/charts) */
.chart { position: relative; }
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.chart-grid.is-zero { stroke: var(--muted); stroke-dasharray: none; opacity: .55; }
.chart-axis { fill: var(--muted); font-size: 11px; font-family: var(--sans); }
.chart-bar { transition: opacity .15s; }
.chart-bar:hover, .chart-dot:hover { opacity: .75; }
.chart-line { stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-dot { stroke: var(--card); stroke-width: 1.5; cursor: default; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.chart-legend i.is-line { height: 3px; width: 16px; border-radius: 2px; }
.chart-empty { margin: 0; padding: 28px 12px; text-align: center; color: var(--muted); font-size: 13px; border: 1px dashed var(--line); border-radius: 8px; }
.chart-donut-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.chart-donut { width: 180px; height: 180px; flex-shrink: 0; }
.chart-donut circle { transition: stroke-width .15s; }
.chart-donut circle:not(.chart-donut-track):hover { stroke-width: 7; }
.chart-donut-track { stroke: var(--line); }
.chart-donut-value { fill: var(--ink); font-size: 5.2px; font-weight: 800; font-family: var(--sans); }
.chart-donut-label { fill: var(--muted); font-size: 2.8px; font-family: var(--sans); text-transform: uppercase; letter-spacing: .1px; }
.chart-donut-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 220px; display: grid; gap: 8px; font-size: 13px; }
.chart-donut-legend li { display: grid; grid-template-columns: 12px 1fr auto 48px; gap: 8px; align-items: center; }
.chart-donut-legend i { width: 12px; height: 12px; border-radius: 3px; }
.chart-donut-legend small { color: var(--muted); text-align: right; }
.chart-hbars { display: grid; gap: 10px; }
.chart-hbar { display: grid; grid-template-columns: minmax(110px, 200px) 1fr auto; gap: 12px; align-items: center; font-size: 13px; }
.chart-hbar-label small { display: block; color: var(--muted); font-size: 11px; }
.chart-hbar-track { height: 10px; background: var(--bg); border-radius: 99px; overflow: hidden; }
.chart-hbar-track > span { display: block; height: 100%; border-radius: 99px; min-width: 3px; }
.chart-hbar strong { font-variant-numeric: tabular-nums; }
.chart-grid-2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; margin-bottom: 16px; }
.chart-grid-2.is-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chart-grid-2 > .card { margin: 0; }
.chart-card h2 { margin: 0 0 4px; }
.chart-card > .muted { margin: 0 0 12px; }
.stat-delta { display: inline-block; margin-top: 2px; font-size: 11px; font-weight: 700; }
.stat-delta.is-up { color: var(--green); }
.stat-delta.is-down { color: var(--danger); }
.task-insights { margin-bottom: 14px; }
.task-insights > summary { cursor: pointer; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.task-insights h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px; }
.task-insights .is-overdue { color: var(--danger); font-weight: 700; }
@media (max-width: 900px) {
  .chart-grid-2, .chart-grid-2.is-even { grid-template-columns: 1fr; }
  .chart-hbar { grid-template-columns: 100px 1fr auto; }
}

/* Live notifications: bell + toasts */
.live-bell { position: relative; }
.live-bell-btn { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent; color: #c3c4c7; cursor: pointer; }
.live-bell-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.live-bell-count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--topbar); }
.live-bell-count[hidden] { display: none; }
.live-bell-panel { position: absolute; right: 0; top: 46px; width: min(380px, 92vw); max-height: 70vh; overflow: auto; z-index: 60; padding: 0; color: var(--ink); box-shadow: 0 18px 40px rgba(15, 23, 42, .18); }
.live-bell-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--card); }
.live-bell-head form { margin: 0; }
.live-bell-clear { border: 0; background: none; color: var(--blue); font-size: 12px; cursor: pointer; }
.live-item { display: grid; gap: 2px; padding: 10px 14px 10px 18px; border-bottom: 1px solid var(--line); color: var(--ink); position: relative; }
.live-item:hover { background: rgba(0, 89, 255, .05); text-decoration: none; }
.live-item::before { content: ""; position: absolute; left: 7px; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.live-item.kind-drive_request::before { background: var(--amber); }
.live-item.kind-mention::before { background: var(--violet); }
.live-item.kind-task::before { background: var(--green); }
.live-item strong { font-size: 13px; }
.live-item span { font-size: 12px; color: var(--muted); }
.live-item small { font-size: 11px; color: var(--muted); }
.live-empty { padding: 18px 14px; margin: 0; }
.live-toasts { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: grid; gap: 10px; width: min(360px, calc(100vw - 36px)); }
.live-toast { position: relative; display: grid; gap: 3px; padding: 12px 34px 12px 14px; border-radius: 10px; background: var(--card); color: var(--ink); border-left: 4px solid var(--blue); box-shadow: 0 14px 34px rgba(15, 23, 42, .22); animation: live-in .25s ease-out; transition: opacity .4s, transform .4s; }
.live-toast:hover { text-decoration: none; }
.live-toast strong { font-size: 13px; }
.live-toast span { font-size: 12px; color: var(--muted); }
.live-toast.kind-drive_request { border-left-color: var(--amber); }
.live-toast.kind-mention { border-left-color: var(--violet); }
.live-toast.kind-task, .live-toast.kind-upload { border-left-color: var(--green); }
.live-toast.is-leaving { opacity: 0; transform: translateY(8px); }
.live-toast-close { position: absolute; top: 6px; right: 8px; border: 0; background: none; font-size: 18px; color: var(--muted); cursor: pointer; }
@keyframes live-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Drive approvals, trash, code verification, activity, Word reader */
.dms-approvals { border-left: 4px solid var(--amber); }
.dms-approval-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.dms-approval-row:first-of-type { border-top: 0; }
.dms-approval-row small { display: block; color: var(--muted); }
.dms-approval-row form { margin: 0; }
.dms-verify { max-width: 640px; }
.dms-verify-facts { display: grid; gap: 8px; margin: 0 0 16px; }
.dms-verify-facts div { display: grid; grid-template-columns: 130px 1fr; gap: 10px; }
.dms-verify-facts dt { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.dms-verify-facts dd { margin: 0; }
.dms-code-form { display: flex; gap: 10px; align-items: center; margin: 12px 0; }
.dms-code-form input { width: 160px; font-size: 22px; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.dms-inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.dms-inline-form input { flex: 1; min-width: 180px; }
.dms-manage-extra { border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 8px; }
.dms-manage-extra h3 { margin: 6px 0 0; font-size: 14px; }
.dms-manage-extra .btn-danger { justify-self: start; }
.bulk-reason { min-width: 200px; }
.dms-mention-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dms-chip { border: 1px solid var(--line); background: var(--card); color: var(--blue); border-radius: 999px; padding: 2px 10px; font-size: 12px; cursor: pointer; }
.dms-chip:hover { border-color: var(--blue); }
.dms-task-toggle { display: flex; gap: 6px; align-items: center; font-size: 13px; }
.dms-task-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dms-activity ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.dms-activity li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; }
.dms-activity-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--blue); margin-top: 5px; box-shadow: 0 0 0 3px rgba(0, 89, 255, .15); }
.dms-activity p { margin: 2px 0; font-size: 13px; }
.dms-activity small { display: block; }
.word-page { max-width: 860px; margin: 0 auto; padding: 40px 48px; line-height: 1.6; font-size: 15px; }
.word-page h1, .word-page h2, .word-page h3, .word-page h4, .word-page h5, .word-page h6 { text-transform: none; letter-spacing: normal; color: var(--ink); font-weight: 700; }
.word-page h1 { font-size: 26px; }
.word-page h2 { font-size: 21px; }
.word-page h3 { font-size: 18px; }
.word-page h4, .word-page h5, .word-page h6 { font-size: 16px; }
.word-page h1, .word-page h2 { margin: 18px 0 8px; }
.word-page h3, .word-page h4, .word-page h5, .word-page h6 { margin: 14px 0 6px; }
.word-page p { margin: 0 0 10px; }
.word-page .word-gap { margin: 0 0 6px; }
.word-page ul { margin: 0 0 10px 22px; }
.word-table { overflow-x: auto; margin: 10px 0 14px; }
.word-table table { border-collapse: collapse; width: 100%; }
.word-table td { border: 1px solid var(--line); padding: 6px 8px; vertical-align: top; }
.word-foot { max-width: 860px; margin: 8px auto 0; font-size: 12px; }
@media (max-width: 700px) {
  .word-page { padding: 22px 18px; }
  .dms-task-fields { grid-template-columns: 1fr; }
  .dms-verify-facts div { grid-template-columns: 1fr; }
}

/* Version history, file requests, presence, team calendar */
.pill.green { background: #ecfdf5; color: #047857; }
html[data-theme="dark"] .pill.green { background: #0f2e25; color: #6ee7b7; }
html[data-theme="dark"] .pill.rose { background: #3a1620; color: #fda4af; }
.live-item.kind-file_request::before { background: var(--amber); }
.live-item.kind-version::before { background: var(--violet); }
.live-toast.kind-file_request { border-left-color: var(--amber); }
.live-toast.kind-version { border-left-color: var(--violet); }
.dms-file-meta a.pill:hover { text-decoration: none; filter: brightness(.96); }
.dms-requests { border-left: 4px solid var(--blue); }
.dms-request-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.dms-request-row:first-of-type { border-top: 0; }
.dms-request-row small { display: block; color: var(--muted); }
.dms-request-row p { margin: 4px 0 0; }
.dms-request-row.is-overdue strong { color: var(--danger); }
.dms-request-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dms-request-actions form { margin: 0; }
.dms-request-actions input[type="file"] { max-width: 230px; }
.dms-versions h2 { margin-bottom: 4px; }
.dms-version-row { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.dms-version-row:first-of-type { border-top: 0; }
.dms-version-row small { display: block; color: var(--muted); }
.dms-version-row p { margin: 4px 0 0; }
.dms-version-row.is-current .dms-version-no { background: var(--blue); color: #fff; }
.dms-version-no { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #f1f5f9; color: #334155; font-weight: 700; font-size: 13px; }
html[data-theme="dark"] .dms-version-no { background: #1f2530; color: #c3cad6; }
.dms-version-actions { display: flex; gap: 8px; }
.dms-version-actions form { margin: 0; }
.presence { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.presence[hidden] { display: none; }
.presence-avatar { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--violet); color: #fff; font-size: 11px; font-weight: 700; box-shadow: 0 0 0 2px var(--card); margin-left: -6px; }
.presence-avatar:first-child { margin-left: 0; }
.presence-label { margin-left: 6px; font-size: 12px; color: var(--muted); }
.presence-label::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-right: 6px; vertical-align: 1px; animation: presence-pulse 2s infinite; }
@keyframes presence-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.cal-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-nav strong { min-width: 130px; text-align: center; font-size: 16px; }
.cal-filters { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 12px 16px; }
.cal-filter { display: flex; gap: 6px; align-items: center; font-size: 13px; cursor: pointer; white-space: nowrap; }
.cal-filter input[type="checkbox"] { width: 16px; height: 16px; min-height: 0; padding: 0; margin: 0; flex: none; }
.cal-filters select { width: auto; }
.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.cal-month { padding: 0; overflow: hidden; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-weekdays span { padding: 8px 10px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.cal-day { min-height: 112px; padding: 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-day:nth-child(7n) { border-right: 0; }
.cal-day.is-weekend { background: rgba(100, 105, 112, .04); }
.cal-day.is-outside { opacity: .45; }
.cal-date { font-size: 12px; font-weight: 700; color: var(--muted); align-self: flex-end; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; }
.cal-day.is-today .cal-date { background: var(--blue); color: #fff; }
.cal-event { display: block; font-size: 11px; line-height: 1.35; padding: 2px 6px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); background: #eef2ff; border-left: 3px solid var(--blue); }
a.cal-event:hover { text-decoration: none; filter: brightness(.96); }
.cal-event.type-leave { background: #ecfdf5; border-left-color: var(--green); }
.cal-event.type-birthday { background: #fdf2f8; border-left-color: #db2777; }
.cal-event.type-anniversary { background: #f5f3ff; border-left-color: var(--violet); }
.cal-event.type-task { background: #eff6ff; border-left-color: var(--blue); }
.cal-event.type-request { background: #fff7ed; border-left-color: var(--amber); }
.cal-event.type-holiday { background: #fef2f2; border-left-color: var(--danger); font-weight: 600; }
.cal-event.is-pending { border-left-style: dashed; opacity: .8; }
.cal-event.is-overdue { color: var(--danger); font-weight: 600; }
html[data-theme="dark"] .cal-event { background: #1f2530; }
.cal-more summary { font-size: 11px; color: var(--blue); cursor: pointer; padding: 0 6px; }
.cal-more .cal-event { margin-top: 3px; }
.cal-upcoming h2 { margin-top: 0; }
.cal-up-day { padding: 8px 0; border-top: 1px solid var(--line); }
.cal-up-day:first-of-type { border-top: 0; }
.cal-up-day strong { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.cal-up-day ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.cal-up-day li { display: grid; grid-template-columns: 20px 1fr; gap: 2px 6px; font-size: 13px; }
.cal-up-day li small { grid-column: 2; }
.cal-up-day li.is-overdue a { color: var(--danger); }
@media (max-width: 1100px) {
  .cal-layout { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .cal-day { min-height: 70px; padding: 3px; }
  .cal-event { font-size: 0; padding: 0; height: 6px; border-left-width: 6px; border-radius: 3px; }
  .dms-version-row { grid-template-columns: 44px 1fr; }
  .dms-version-actions { grid-column: 1 / -1; }
}

/* =====================================================================
   Werkflow Lite 3.0 — corporate refresh (tokens, shell, components)
   ===================================================================== */
:root {
  --blue: #2457f5;
  --blue-hover: #1b45cf;
  --blue-soft: #eaf0ff;
  --green: #0e9f6e;
  --amber: #d97706;
  --violet: #7c3aed;
  --danger: #dc2626;
  --ink: #0f172a;
  --text: #0f172a;
  --muted: #5b6779;
  --line: #e3e8ef;
  --border: #e3e8ef;
  --field: #d3dae5;
  --bg: #f4f6fa;
  --card: #ffffff;
  --surface: #ffffff;
  --sidebar: #0b1220;
  --sidebar-text: #a9b4c6;
  --topbar: #0b1220;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .05);
  --ease: cubic-bezier(.2, .8, .2, 1);
}
html[data-theme="dark"] {
  --bg: #0b0f19;
  --card: #121826;
  --surface: #121826;
  --ink: #e8edf5;
  --text: #e8edf5;
  --muted: #94a0b4;
  --line: #222b3b;
  --border: #222b3b;
  --field: #2b3547;
  --sidebar: #070b13;
  --blue-soft: #18233d;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .45);
}
body.app-body { font-size: 14px; line-height: 1.5; letter-spacing: -.006em; -webkit-font-smoothing: antialiased; }
::selection { background: rgba(36, 87, 245, .18); }

/* Shell */
.shell { grid-template-columns: 236px 1fr; }
.sidebar { background: var(--sidebar); border-right: 1px solid rgba(255, 255, 255, .04); }
.brand-block { background: transparent; padding: 18px 16px 14px; gap: 11px; }
.brand-logo { width: 32px; height: 32px; border-radius: 9px; padding: 3px; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.brand-block strong { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.nav { padding: 6px 10px 10px; scrollbar-color: #2a3446 transparent; }
.nav::-webkit-scrollbar-track { background: transparent; }
.nav::-webkit-scrollbar-thumb { background: #2a3446; }
.nav small { color: #64708a; margin: 18px 10px 6px; font-size: 10.5px; letter-spacing: .09em; }
.nav a { padding: 8px 10px; margin: 1px 0; border-radius: 9px; border-left: 0; font-weight: 500; font-size: 13.5px; color: var(--sidebar-text); transition: background .15s, color .15s; position: relative; }
.nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav a.active { background: linear-gradient(90deg, rgba(36, 87, 245, .95), rgba(36, 87, 245, .78)); color: #fff; box-shadow: 0 6px 16px rgba(36, 87, 245, .28); }
.nav-sub a { padding-left: 38px; font-size: 13px; }
.nav-sub a.active { background: rgba(36, 87, 245, .22); box-shadow: none; }
.nav-toggle { border-radius: 8px; }
.nav-toggle:hover { background: rgba(255, 255, 255, .06); }
.aside-foot { border-top: 1px solid rgba(255, 255, 255, .06); padding: 12px 16px; }
.aside-foot .nav-theme { border-radius: 9px; padding: 8px 10px; }
.aside-foot .nav-theme:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.aside-version { color: #64708a; }
html[data-theme="dark"] .nav a.active, html[data-theme="dark"] .nav a.active:hover { background: linear-gradient(90deg, rgba(36, 87, 245, .9), rgba(36, 87, 245, .7)); }

.topbar { min-height: 60px; gap: 14px; }
html[data-product="lite"] .topbar {
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}
html[data-theme="dark"][data-product="lite"] .topbar { background: rgba(11, 15, 25, .82); }
.top-logo { width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 0 0 1px var(--line); }
.top-company { font-size: 15px; font-weight: 700; letter-spacing: -.015em; }
.top-search input { height: 38px; border-radius: 10px; }
html[data-product="lite"] .top-search input { background: var(--bg); border: 1px solid transparent; transition: border-color .15s, background .15s, box-shadow .15s; }
html[data-product="lite"] .top-search input:focus { background: var(--card); border-color: var(--blue); box-shadow: 0 0 0 4px rgba(36, 87, 245, .12); }
html[data-theme="dark"][data-product="lite"] .top-search input { background: #161d2c; }
.top-search svg { top: 11px; }
.top-search-results { top: 44px; border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; background: var(--card); }
.top-search-results a { border-radius: 8px; border-bottom: 0; padding: 9px 12px; color: var(--ink); }
.top-search-results a:hover { background: var(--blue-soft); }
html[data-product="lite"] .live-bell-btn { color: var(--muted); }
html[data-product="lite"] .live-bell-btn:hover { background: var(--bg); color: var(--ink); }
.live-bell-count { box-shadow: 0 0 0 2px var(--card); }
.user-menu { border-radius: 14px; box-shadow: var(--shadow-lg); padding: 16px; }
.content { padding: 28px 32px 48px; max-width: 1480px; width: 100%; }
.app-foot { padding: 12px 32px 28px; }

/* Page heads */
.page-head { margin: 0 0 22px; }
.page-head small, .page-head small a { color: var(--blue); font-weight: 700; letter-spacing: .1em; font-size: 11px; }
.page-head h1 { font-size: 28px; font-weight: 750; letter-spacing: -.025em; margin: 6px 0 6px; color: var(--ink); }
.page-head p { font-size: 14px; max-width: 760px; line-height: 1.55; }
.page-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }

/* Cards */
.card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; }
.card h2, .section-head h2 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; text-transform: none; color: var(--ink); margin: 0 0 14px; }
.card-head { gap: 12px; flex-wrap: wrap; }
.card-head h2 { margin: 0; }
.stat { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; position: relative; overflow: hidden; }
.stat::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--green); opacity: .9; }
.stat.amber::before { background: var(--amber); }
.stat.navy::before { background: var(--blue); }
.stat.violet::before { background: var(--violet); }
.stat small { font-size: 11px; letter-spacing: .07em; color: var(--muted); }
.stat strong { font-size: 24px; margin: 10px 0 4px; font-variant-numeric: tabular-nums; }
.stats-grid { gap: 14px; margin: 0 0 18px; }
.row-line { padding: 12px 0; }
.accent-card { border-left: 4px solid var(--blue); }

/* Buttons */
.btn, .button {
  height: 38px; padding: 0 15px; border-radius: var(--radius-sm); font-weight: 600; font-size: 13.5px; letter-spacing: -.005em;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .08s, color .15s;
}
.btn:active, .button:active { transform: translateY(1px) scale(.985); }
.btn-primary, .btn:not(.btn-secondary):not(.btn-danger):not(.btn-navy):not(.btn-signin):not(.btn-punch-in):not(.btn-punch-out):not(.btn-punch-mint):not(.btn-punch-idle):not(.btn-logout):not(.btn-tone-upload):not(.btn-tone-download):not(.btn-tone-edit):not(.btn-tone-approve):not(.btn-tone-danger):not(.btn-tone-search):not(.btn-tone-save):not(.btn-tone-quiet) { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .1), inset 0 1px 0 rgba(255, 255, 255, .12); }
.btn-primary:hover, .btn:not(.btn-secondary):not(.btn-danger):not(.btn-navy):not(.btn-signin):not(.btn-punch-in):not(.btn-punch-out):not(.btn-punch-mint):not(.btn-punch-idle):not(.btn-logout):not(.btn-tone-upload):not(.btn-tone-download):not(.btn-tone-edit):not(.btn-tone-approve):not(.btn-tone-danger):not(.btn-tone-search):not(.btn-tone-save):not(.btn-tone-quiet):hover { background: var(--blue-hover); border-color: var(--blue-hover); color: #fff; }
.btn.btn-punch-in { background: #047857; border-color: #047857; color: #fff; }
.btn.btn-punch-in:hover { background: #065f46; border-color: #065f46; color: #fff; }
.btn.btn-punch-out { background: #c2410c; border-color: #c2410c; color: #fff; }
.btn.btn-punch-out:hover { background: #9a3412; border-color: #9a3412; color: #fff; }
.btn.btn-logout { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.btn.btn-logout:hover { background: #991b1b; border-color: #991b1b; color: #fff; }
.btn-secondary, .button.secondary { background: #334155; color: #fff; border-color: #334155; box-shadow: 0 1px 2px rgba(16, 24, 40, .1); }
.btn-secondary:hover, .button.secondary:hover { background: #1e293b; border-color: #1e293b; color: #fff; }
.btn-danger { background: #b91c1c; color: #fff; border-color: #b91c1c; }
.btn-danger:hover { background: #991b1b; border-color: #991b1b; color: #fff; }
html[data-theme="dark"] .btn-secondary { background: #3b4f73; color: #fff; border-color: #54709a; }
html[data-theme="dark"] .btn-secondary:hover { background: #2c3d5c; color: #fff; }
html[data-theme="dark"] .btn-danger { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.landing-actions { gap: 6px; padding: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); width: fit-content; max-width: 100%; }
.landing-actions .btn { height: 34px; padding: 0 12px; border-color: transparent; box-shadow: none; font-size: 13px; }
.landing-actions .btn-secondary { background: transparent; color: var(--muted); }
.landing-actions .btn-secondary:hover { background: var(--bg); color: var(--ink); }
.btn.btn-tone-upload, html[data-theme="dark"] .btn.btn-tone-upload { background: #0f766e; border-color: #0f766e; color: #fff; }
.btn.btn-tone-upload:hover, html[data-theme="dark"] .btn.btn-tone-upload:hover { background: #115e59; border-color: #115e59; color: #fff; }
.btn.btn-tone-download, html[data-theme="dark"] .btn.btn-tone-download { background: #4338ca; border-color: #4338ca; color: #fff; }
.btn.btn-tone-download:hover, html[data-theme="dark"] .btn.btn-tone-download:hover { background: #3730a3; border-color: #3730a3; color: #fff; }
.btn.btn-tone-edit, html[data-theme="dark"] .btn.btn-tone-edit { background: #b45309; border-color: #b45309; color: #fff; }
.btn.btn-tone-edit:hover, html[data-theme="dark"] .btn.btn-tone-edit:hover { background: #92400e; border-color: #92400e; color: #fff; }
.btn.btn-tone-approve, html[data-theme="dark"] .btn.btn-tone-approve { background: #047857; border-color: #047857; color: #fff; }
.btn.btn-tone-approve:hover, html[data-theme="dark"] .btn.btn-tone-approve:hover { background: #065f46; border-color: #065f46; color: #fff; }
.btn.btn-tone-danger, html[data-theme="dark"] .btn.btn-tone-danger { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.btn.btn-tone-danger:hover, html[data-theme="dark"] .btn.btn-tone-danger:hover { background: #991b1b; border-color: #991b1b; color: #fff; }
.btn.btn-tone-search, html[data-theme="dark"] .btn.btn-tone-search { background: #0369a1; border-color: #0369a1; color: #fff; }
.btn.btn-tone-search:hover, html[data-theme="dark"] .btn.btn-tone-search:hover { background: #075985; border-color: #075985; color: #fff; }
.btn.btn-tone-save, html[data-theme="dark"] .btn.btn-tone-save { background: #2457f5; border-color: #2457f5; color: #fff; }
.btn.btn-tone-save:hover, html[data-theme="dark"] .btn.btn-tone-save:hover { background: #1b45cf; border-color: #1b45cf; color: #fff; }
.btn.btn-tone-quiet, html[data-theme="dark"] .btn.btn-tone-quiet { background: #334155; border-color: #334155; color: #fff; }
.btn.btn-tone-quiet:hover, html[data-theme="dark"] .btn.btn-tone-quiet:hover { background: #1e293b; border-color: #1e293b; color: #fff; }
html[data-theme="dark"] .btn.btn-tone-quiet { background: #3b4f73; border-color: #54709a; }
html[data-theme="dark"] .btn.btn-tone-quiet:hover { background: #2c3d5c; border-color: #54709a; color: #fff; }
.wf-busy { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(15, 23, 42, .48); }
.wf-busy-card { display: flex; align-items: center; gap: 14px; width: min(440px, 100%); padding: 20px 22px; border-radius: 14px; background: #fff; color: #0f172a; box-shadow: 0 20px 50px rgba(0, 0, 0, .28); }
html[data-theme="dark"] .wf-busy-card { background: #181c24; color: #eef1f4; }
.wf-busy-card p { margin: 0; font-size: 15px; font-weight: 650; line-height: 1.45; }
.wf-busy-spin { width: 22px; height: 22px; flex: 0 0 auto; border: 3px solid #dbe3ef; border-top-color: #0f766e; border-radius: 50%; animation: wf-spin .7s linear infinite; }
html[data-theme="dark"] .wf-busy-spin { border-color: #2a3140; border-top-color: #5eead4; }
@keyframes wf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .wf-busy-spin { animation: none; border-top-color: #0f766e; }
}
.landing-actions .btn-secondary,
html[data-theme="dark"] .landing-actions .btn-secondary { background: transparent; color: var(--muted); border-color: transparent; box-shadow: none; }
.landing-actions .btn-secondary:hover,
html[data-theme="dark"] .landing-actions .btn-secondary:hover { background: var(--bg); color: var(--ink); }
.login-panel .btn-secondary,
html[data-theme="dark"] .login-panel .btn-secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .2); }
.dms-view-toggle .btn.is-active,
.task-view-toggle .btn.is-active,
html[data-theme="dark"] .dms-view-toggle .btn.is-active,
html[data-theme="dark"] .task-view-toggle .btn.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Forms */
input, select, textarea { border: 1px solid var(--field); border-radius: var(--radius-sm); height: 40px; background: var(--card); transition: border-color .15s, box-shadow .15s; }
textarea { height: auto; line-height: 1.55; }
input:hover, select:hover, textarea:hover { border-color: #b8c2d1; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(36, 87, 245, .13); }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: #0f1522; border-color: var(--field); }
.form-grid label, .stack label { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.form-grid { gap: 14px 16px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--blue); }

/* Tables */
.table { font-size: 13.5px; }
.table th { background: var(--bg); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.table th:first-child { border-top-left-radius: 10px; }
.table th:last-child { border-top-right-radius: 10px; }
.table td { padding: 12px; }
.table tbody tr { transition: background .12s; }
.table tbody tr:hover { background: rgba(36, 87, 245, .035); }
html[data-theme="dark"] .table th { background: #0f1522; }
.table-wrap { overflow-x: auto; }

/* Tabs, pills, alerts */
.tabs { gap: 2px; }
.tabs button, .tab-link { padding: 10px 14px; font-weight: 600; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.tabs button.active, .tab-link.active { color: var(--blue); border-bottom-color: var(--blue); }
.tab-link:hover { color: var(--ink); text-decoration: none; }
.pill { font-size: 11px; font-weight: 700; padding: 3px 9px; letter-spacing: .01em; }
.pill.navy { background: var(--blue-soft); color: #1d4ed8; }
.alert { border-radius: 12px; padding: 12px 16px; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); }
.alert.success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.alert.error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.alert.error p { margin: 2px 0; }
.announcement-alert { border-left: 4px solid var(--blue); }
.late-arrival-alert { border-left: 4px solid var(--amber); }
.policy-alert { border-left: 4px solid var(--violet); }
html[data-theme="dark"] .alert.success { background: #0d2a20; border-color: #14532d; color: #86efac; }
html[data-theme="dark"] .alert.error { background: #2a1214; border-color: #7f1d1d; color: #fca5a5; }
code { background: var(--bg); border: 1px solid var(--line); }
.bar { background: #e8edf4; }
.bar > span { background: linear-gradient(90deg, var(--blue), #4f7bff); }
.bar.thin > span { background: var(--green); }

/* Empty states */
.empty-state { text-align: center; padding: 36px 24px; }
.empty-state.compact { padding: 18px 12px; }
.empty-state h3 { margin: 10px 0 6px; font-size: 16px; color: var(--ink); }
.empty-state p { margin: 0 auto 14px; max-width: 460px; }
.empty-state-icon { font-size: 34px; width: 64px; height: 64px; margin: 0 auto; border-radius: 18px; display: grid; place-items: center; background: var(--blue-soft); }
.is-good { color: var(--green); }
.is-bad { color: var(--danger); }

/* =====================================================================
   Motion
   ===================================================================== */
@keyframes wf-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes wf-pop { 0% { opacity: 0; transform: scale(.94); } 60% { opacity: 1; transform: scale(1.015); } 100% { transform: none; } }
@keyframes wf-flash-in { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes wf-draw { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
@keyframes wf-ring { from { stroke-dashoffset: 64; } to { stroke-dashoffset: 0; } }
@keyframes wf-glow { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .45); } 100% { box-shadow: 0 0 0 14px rgba(16, 185, 129, 0); } }
@keyframes wf-confetti { 0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 40px)) rotate(var(--rot)) scale(.7); } }
@keyframes wf-collapse {
  0% { opacity: 1; transform: none; max-height: var(--wf-h, 400px); }
  45% { opacity: 0; transform: translateX(28px) scale(.98); max-height: var(--wf-h, 400px); }
  100% { opacity: 0; transform: translateX(28px) scale(.98); max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; border-width: 0; }
}
@keyframes wf-fade-out { to { opacity: 0; transform: translateX(20px); } }
@keyframes wf-highlight { 0%, 100% { background: transparent; } 20% { background: rgba(36, 87, 245, .14); } }
@keyframes wf-msg-in { from { opacity: 0; transform: translateY(6px) scale(.99); } to { opacity: 1; transform: none; } }

.content > * { animation: wf-rise .38s var(--ease) both; }
.content > *:nth-child(2) { animation-delay: .03s; }
.content > *:nth-child(3) { animation-delay: .06s; }
.content > *:nth-child(4) { animation-delay: .09s; }
.content > *:nth-child(5) { animation-delay: .12s; }
.content > *:nth-child(n+6) { animation-delay: .15s; }
.task-modal-card, .live-bell-panel, .user-menu, .dms-file-more-panel, .repeat-panel { animation: wf-pop .22s var(--ease) both; }

.flash-success { display: flex; align-items: center; gap: 12px; position: relative; overflow: visible; animation: wf-flash-in .35s var(--ease) both; }
.flash-check { position: relative; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #10b981; color: #fff; flex-shrink: 0; animation: wf-glow 1.2s ease-out .25s 2; }
.flash-check svg { width: 20px; height: 20px; }
.flash-check circle { display: none; }
.flash-check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: wf-draw .45s var(--ease) .18s forwards; }
.flash-success.is-celebrate { background: linear-gradient(90deg, #ecfdf5, #f0f7ff); border-color: #a7f3d0; }
html[data-theme="dark"] .flash-success.is-celebrate { background: linear-gradient(90deg, #0d2a20, #111c33); }
.wf-confetti { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 5; }
.wf-confetti i { position: absolute; width: 7px; height: 11px; border-radius: 2px; left: -3px; top: -5px; animation: wf-confetti 1.05s cubic-bezier(.15, .7, .3, 1) both; }
.wf-confetti i:nth-child(3n) { width: 6px; height: 6px; border-radius: 50%; }
.wf-removing { animation: wf-collapse .48s var(--ease) forwards; overflow: hidden; pointer-events: none; }
tr.wf-removing { animation: wf-fade-out .35s var(--ease) forwards; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .flash-check path { stroke-dashoffset: 0; }
}

/* =====================================================================
   Announcements and rich text
   ===================================================================== */
.rich-text { font-size: 14.5px; line-height: 1.7; color: var(--ink); max-width: 78ch; overflow-wrap: anywhere; }
.rich-text > :first-child { margin-top: 0; }
.rich-text > :last-child { margin-bottom: 0; }
.rich-text p { margin: 0 0 14px; }
.rich-text ul, .rich-text ol { margin: 0 0 14px; padding-left: 24px; }
.rich-text li { margin: 5px 0; padding-left: 2px; }
.rich-text ul li::marker { color: var(--blue); }
.rich-text ol li::marker { color: var(--blue); font-weight: 700; }
.rich-text h3 { font-size: 18px; margin: 22px 0 8px; letter-spacing: -.015em; }
.rich-text h4 { font-size: 16px; margin: 18px 0 6px; }
.rich-text h5 { font-size: 14.5px; margin: 16px 0 6px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.rich-text strong { font-weight: 700; }
.rich-text a { text-decoration: underline; text-underline-offset: 2px; }
.announcement-card h2 { font-size: 19px; letter-spacing: -.02em; margin-bottom: 12px; }
.announcement-card > .muted { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.announcement-editor { font-family: var(--sans); min-height: 220px; resize: vertical; }
.announcement-hint { margin: -4px 0 0; }

/* =====================================================================
   Team chat: bubbles + WhatsApp-style replies
   ===================================================================== */
.chat-thread { gap: 10px; background: var(--bg); }
.chat-msg { position: relative; align-items: flex-end; max-width: 100%; animation: wf-msg-in .22s var(--ease) both; transition: transform .12s; border-radius: 16px; }
.chat-msg.is-mine { flex-direction: row-reverse; }
.chat-bubble { background: var(--card); border: 1px solid var(--line); padding: 8px 12px 9px; border-radius: 16px 16px 16px 4px; max-width: min(620px, 78%); min-width: 0; box-shadow: 0 1px 1px rgba(16, 24, 40, .04); }
.chat-msg.is-mine .chat-bubble { background: #e8efff; border-color: #d3e0ff; border-radius: 16px 16px 4px 16px; }
html[data-theme="dark"] .chat-msg.is-mine .chat-bubble { background: #1a2a52; border-color: #233766; }
.chat-bubble strong { font-size: 13px; }
.chat-bubble p { margin: 3px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-msg.is-flash .chat-bubble { animation: wf-highlight 1.5s ease; }
.chat-msg.is-flash { animation: wf-highlight 1.5s ease; }
.chat-reply-btn { opacity: 0; align-self: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--muted); display: grid; place-items: center; flex-shrink: 0; transition: opacity .15s, color .15s, transform .15s; }
.chat-msg:hover .chat-reply-btn, .chat-reply-btn:focus-visible { opacity: 1; }
.chat-reply-btn:hover { color: var(--blue); transform: scale(1.06); }
@media (hover: none) { .chat-reply-btn { opacity: .7; } }
.chat-quote { display: grid; gap: 1px; width: 100%; text-align: left; margin: 6px 0 4px; padding: 6px 10px; border: 0; border-left: 3px solid var(--violet); border-radius: 8px; background: rgba(124, 58, 237, .07); color: var(--ink); font: inherit; cursor: pointer; }
.chat-quote.is-mine { border-left-color: var(--blue); background: rgba(36, 87, 245, .08); }
.chat-quote:disabled { cursor: default; opacity: .7; }
.chat-quote:hover:not(:disabled) { background: rgba(36, 87, 245, .12); }
.chat-quote-from { font-size: 12px; font-weight: 700; color: var(--violet); }
.chat-quote.is-mine .chat-quote-from, .chat-quote.is-composer .chat-quote-from { color: var(--blue); }
.chat-quote-text { font-size: 12.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chat-replying { display: flex; align-items: stretch; gap: 8px; margin: 0 0 8px; padding: 6px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.chat-replying .chat-quote { margin: 0; cursor: default; border-left-color: var(--blue); background: var(--card); }
.chat-replying-close { border: 0; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; width: 32px; border-radius: 8px; }
.chat-replying-close:hover { background: var(--card); color: var(--ink); }
.chat-send { background: var(--blue); border-radius: 10px; }
.chat-send:hover { background: var(--blue-hover); }
.chat-channel.active { background: var(--blue); }
.chat-shell { border: 1px solid var(--line); border-radius: var(--radius); }

/* Live notification kinds */
.live-item.kind-claim::before { background: var(--green); }
.live-item.kind-policy::before { background: var(--violet); }
.live-item.kind-kudos::before { background: #db2777; }
.live-item.kind-invoice::before { background: var(--blue); }
.live-toast.kind-claim { border-left-color: var(--green); }
.live-toast.kind-policy { border-left-color: var(--violet); }
.live-toast.kind-kudos { border-left-color: #db2777; }
.live-toast { border-radius: 12px; }

/* =====================================================================
   Expense claims
   ===================================================================== */
.claims-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.claims-layout aside { position: sticky; top: 80px; }
.claim-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.claim-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.claim-row:first-of-type { border-top: 0; }
.claim-main { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.claim-main small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.claim-main p { margin: 4px 0 0; font-size: 13px; }
.claim-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--blue-soft); display: grid; place-items: center; font-size: 18px; flex-shrink: 0; }
.claim-avatar { flex-shrink: 0; }
.claim-note { color: var(--muted); font-style: italic; }
.claim-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.claim-actions form { margin: 0; }
.claim-amount { font-variant-numeric: tabular-nums; font-size: 15px; }
.claim-reject { grid-column: 1 / -1; display: flex; gap: 8px; }
.claim-reject input { flex: 1; }
.claim-pay { display: flex; gap: 8px; align-items: center; }
.claim-pay input[type="date"] { width: 150px; }
.claims-queue { border-left: 4px solid var(--amber); }
.claims-queue.is-pay { border-left-color: var(--green); }

/* =====================================================================
   Recurring invoices + budgets
   ===================================================================== */
.recurring-card { border-left: 4px solid var(--blue); }
.recurring-row.is-ended { opacity: .6; }
.repeat-menu { position: relative; }
.repeat-menu summary { list-style: none; cursor: pointer; }
.repeat-menu summary::-webkit-details-marker { display: none; }
.repeat-panel { position: absolute; right: 0; top: 44px; z-index: 20; width: 300px; display: grid; gap: 10px; box-shadow: var(--shadow-lg); padding: 16px; margin: 0; }
.repeat-panel label { display: grid; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.repeat-panel p { margin: 0; }
.invoice-list h2 { margin-bottom: 4px; }
.budget-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 24px; }
.budget-year { margin: 0; }
.budget-year label { display: grid; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.budget-year select { min-width: 260px; }
.budget-progress { flex: 1; min-width: 220px; display: grid; gap: 6px; }
.budget-progress .bar { height: 8px; }
.budget-actions { margin-left: auto; }
.budget-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.budget-table td small { display: block; color: var(--muted); font-size: 11.5px; }
.budget-table tfoot th { background: transparent; color: var(--ink); font-size: 13px; letter-spacing: 0; text-transform: none; border-top: 2px solid var(--line); border-bottom: 0; }
.budget-used { min-width: 170px; }
.budget-used small { display: flex; align-items: center; gap: 6px; margin-top: 5px; color: var(--muted); }
.budget-bar { position: relative; height: 8px; overflow: visible; }
.budget-bar > span { border-radius: 99px; }
.budget-bar.is-ok > span { background: var(--green); }
.budget-bar.is-ahead > span { background: var(--amber); }
.budget-bar.is-over > span { background: var(--danger); }
.budget-bar i { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--ink); opacity: .55; border-radius: 2px; }
.budget-input { max-width: 170px; margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; }
.sticky-save { position: sticky; bottom: 16px; z-index: 15; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-lg); margin-top: 8px; }

/* =====================================================================
   Policies
   ===================================================================== */
.policy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 18px; }
.policy-grid > .empty-state { grid-column: 1 / -1; }
.policy-card { display: grid; gap: 6px; align-content: start; padding: 18px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); color: inherit; transition: transform .18s var(--ease), box-shadow .18s, border-color .18s; }
.policy-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: #c8d4ea; }
.policy-card.is-todo { border-top: 3px solid var(--amber); }
.policy-card.is-done { border-top: 3px solid var(--green); }
.policy-card.is-archived { opacity: .65; border-top: 3px solid var(--line); }
.policy-card strong { font-size: 15px; }
.policy-card small { color: var(--muted); font-size: 12px; }
.policy-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.policy-icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--blue-soft); font-size: 19px; }
.policy-progress { display: grid; gap: 4px; margin-top: 6px; }
.policy-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.policy-layout:not(:has(aside)) { grid-template-columns: minmax(0, 1fr); }
.policy-doc { padding: 32px 36px; }
.policy-ack { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-left: 4px solid var(--amber); }
.policy-ack small { display: block; color: var(--muted); margin-top: 2px; }
.policy-ack form { margin: 0; }
.policy-ack.is-done { border-left-color: var(--green); justify-content: flex-start; }
.policy-ack-check { width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-weight: 800; animation: wf-pop .35s var(--ease) both; }
.policy-ring { --p: 0; width: 120px; height: 120px; margin: 4px auto 8px; border-radius: 50%; background: conic-gradient(var(--green) calc(var(--p) * 1%), var(--line) 0); display: grid; place-items: center; }
.policy-ring span { width: 92px; height: 92px; border-radius: 50%; background: var(--card); display: grid; place-items: center; font-size: 22px; font-weight: 800; }
.policy-tracker h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 18px 0 8px; }
.policy-admin-actions { justify-content: center; flex-wrap: wrap; width: 100%; }
.policy-admin-actions form { margin: 0; }
.policy-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 300px; overflow: auto; }
.policy-people li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.policy-people li small { margin-left: auto; color: var(--muted); font-size: 11.5px; }
.policy-people .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.policy-people .dot.is-todo { background: var(--amber); }
.policy-people .dot.is-done { background: var(--green); }

/* =====================================================================
   Kudos
   ===================================================================== */
.kudos-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.kudos-layout aside { display: grid; gap: 14px; position: sticky; top: 80px; }
.kudos-layout aside .card { margin: 0; }
.kudos-composer { display: grid; gap: 12px; background: linear-gradient(135deg, var(--card) 60%, var(--blue-soft)); }
.kudos-composer h2 { margin: 0; }
.kudos-composer label { display: grid; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.kudos-composer .btn { justify-self: start; }
.kudos-badges { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kudos-badges legend { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 6px; padding: 0; }
.kudos-badge { display: inline-flex !important; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--field); background: var(--card); color: var(--ink) !important; font-size: 13px !important; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.kudos-badge:hover { border-color: var(--blue); }
.kudos-badge.is-on { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 0 0 3px rgba(36, 87, 245, .12); transform: translateY(-1px); }
.kudos-badge input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.kudos-badge span { font-size: 16px; }
.kudos-filter { margin-top: 6px; }
.kudos-wall { display: grid; gap: 12px; }
.kudos-card { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 16px 18px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .18s var(--ease), box-shadow .18s; }
.kudos-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.kudos-card-icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; background: linear-gradient(135deg, #fff4d6, #ffe4ef); }
.kudos-card.badge-teamwork .kudos-card-icon { background: linear-gradient(135deg, #e0ecff, #e6fbf3); }
.kudos-card.badge-ideas .kudos-card-icon { background: linear-gradient(135deg, #fff7d6, #fff0e0); }
.kudos-card.badge-leader .kudos-card-icon { background: linear-gradient(135deg, #ede7ff, #e0ecff); }
html[data-theme="dark"] .kudos-card-icon { background: #1c2536 !important; }
.kudos-card-head { margin: 0; display: flex; flex-wrap: wrap; gap: 5px; align-items: baseline; }
.kudos-card-badge { display: inline-block; margin: 4px 0 2px; font-size: 11.5px; font-weight: 700; color: var(--blue); letter-spacing: .02em; }
.kudos-card-msg { margin: 4px 0 6px; font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.kudos-remove { position: absolute; top: 8px; right: 8px; margin: 0; }
.kudos-remove button { border: 0; background: transparent; color: var(--muted); font-size: 18px; width: 28px; height: 28px; border-radius: 8px; opacity: 0; transition: opacity .15s; }
.kudos-card:hover .kudos-remove button, .kudos-remove button:focus-visible { opacity: 1; }
.kudos-remove button:hover { background: var(--bg); color: var(--danger); }
.kudos-leader { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.kudos-leader:first-of-type { border-top: 0; }
.kudos-leader strong { flex: 1; min-width: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kudos-rank { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; background: var(--bg); color: var(--muted); }
.kudos-rank.rank-1 { background: #fbbf24; color: #78350f; }
.kudos-rank.rank-2 { background: #cbd5e1; color: #1e293b; }
.kudos-rank.rank-3 { background: #f0b27a; color: #5c2d0c; }
.kudos-me { display: grid; grid-template-columns: 1fr 1fr; text-align: center; }
.kudos-me strong { display: block; font-size: 26px; font-weight: 800; color: var(--blue); }
.kudos-me small { color: var(--muted); }

@media (max-width: 1100px) {
  .claims-layout, .policy-layout, .kudos-layout { grid-template-columns: 1fr; }
  .claims-layout aside, .kudos-layout aside { position: static; }
  .content { padding: 20px 20px 36px; }
}
@media (max-width: 760px) {
  .content { padding: 16px 14px 28px; }
  .page-head h1 { font-size: 23px; }
  .claim-row { grid-template-columns: 1fr; }
  .claim-actions { justify-content: flex-start; }
  .policy-doc { padding: 22px 18px; }
  .chat-bubble { max-width: 84%; }
  .budget-head { align-items: stretch; }
  .budget-actions { margin-left: 0; }
  .repeat-panel { right: auto; left: 0; width: min(300px, 86vw); }
  .landing-actions { width: 100%; }
}

/* Dialogs sit at the top of the screen. */
.task-modal { align-items: start; justify-content: center; padding-top: 72px; overflow-y: auto; }
.task-modal-card { max-height: calc(100vh - 96px); overflow: auto; }

.task-sheet-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; color: var(--muted); margin-bottom: 14px; }
.task-sheet-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; font-size: 15px; }
.cal-date { display: flex; justify-content: space-between; align-items: center; }
.cal-add { border: 0; background: transparent; color: var(--muted); width: 22px; height: 22px; border-radius: 6px; cursor: pointer; }
.cal-add:hover { background: var(--blue-soft); color: var(--blue); }

.bulk-prompt { top: 72px; bottom: auto; }
.task-card-edit { position: absolute; left: 10px; bottom: 10px; z-index: 2; height: 30px; padding: 0 10px; }