/* ONESYNC theme 2026 — gradien navy yang tenang, tipografi jelas di semua halaman.
   Dimuat paling akhir: menimpa app.css / redesign.css / process.css. */

:root {
  --bg: #f2f5fc;
  --surface: #ffffff;
  --surface-soft: #f7f9fe;
  --ink: #101c38;
  --ink-2: #2b3a5c;
  --muted: #5f6d88;
  --line: #e1e7f3;
  --brand: #3657c7;
  --brand-2: #6754c8;
  --teal: #0fa99b;
  --amber: #c98a17;
  --red: #d24a3a;
  --grad-brand: linear-gradient(135deg, #3156bd 0%, #4a57b8 55%, #6751bb 100%);
  --grad-hero: linear-gradient(118deg, #142448 0%, #263d75 52%, #315779 100%);
  --grad-side: linear-gradient(185deg, #0b1428 0%, #172744 58%, #20365b 100%);
  --grad-soft: linear-gradient(135deg, #eef3ff 0%, #f4f0ff 100%);
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(16, 28, 56, .04), 0 10px 28px rgba(30, 56, 120, .07);
  --shadow-lg: 0 18px 44px rgba(30, 56, 120, .14);
}

html { font-size: 15.5px; }
body {
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  line-height: 1.55;
  background:
    radial-gradient(1200px 520px at 100% -10%, rgba(106, 90, 232, .10), transparent 60%),
    radial-gradient(900px 420px at -10% 0%, rgba(53, 99, 233, .08), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
h1, h2, h3 { color: var(--ink); letter-spacing: -.02em; }
h1 { font-size: 2rem; font-weight: 750; line-height: 1.2; }
h2 { font-size: 1.28rem; font-weight: 700; }
h3 { font-size: 1.08rem; font-weight: 700; }
p { color: var(--muted); font-size: 1rem; }
small, .muted { color: var(--muted); }
a { color: var(--brand); }
.eyebrow { font-size: .74rem; letter-spacing: .16em; font-weight: 800; color: var(--brand); text-transform: uppercase; }
code { font-size: .9em; background: #eef2fb; padding: 1px 6px; border-radius: 6px; color: var(--ink-2); }

/* ---------- layout ---------- */
.content { max-width: 1520px; padding: 30px 40px 90px; }
.sidebar { width: 248px; background: var(--grad-side); box-shadow: 8px 0 30px rgba(9, 18, 45, .18); padding: 26px 14px 18px; }
.app-shell { margin-left: 248px; }
.brand { font-size: 1.2rem; }
.brand small { font-size: .7rem; }
.brand-mark { background: var(--grad-brand); box-shadow: 0 6px 16px rgba(83, 96, 234, .45); }
.side-label, .side-label:first-of-type { font-size: .7rem; color: #7f93bd; letter-spacing: .18em; margin: 24px 12px 8px; }
.side-nav a { font-size: .95rem; font-weight: 600; padding: 11px 14px; border-radius: 12px; color: #b9c6e4; gap: 12px; }
.side-nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.side-nav a.active { background: var(--grad-brand); color: #fff; box-shadow: 0 8px 20px rgba(53, 99, 233, .35); }
.side-nav a.active::before { display: none; }
.nav-icon { font-size: 1.05rem; }
.sidebar-user strong { font-size: .9rem; }
.sidebar-user small { font-size: .75rem; }
.link-button, .link-button:hover { font-size: .85rem; }
.topbar { height: 66px; padding: 0 40px; background: rgba(255, 255, 255, .78); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); box-shadow: none; }
.home-link, .crumb { font-size: .92rem; }
.topbar-pill { font-size: .78rem; }
.back-button { font-size: .9rem; border-radius: 10px; }

/* ---------- hero / headings ---------- */
.page-hero, .proc-head {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; flex-wrap: wrap;
  margin: 0 0 22px; padding: 28px 30px; border-radius: 22px;
  background: var(--grad-hero); color: #fff; box-shadow: var(--shadow-lg);
}
.page-hero::after, .proc-head::after {
  content: ""; position: absolute; right: -80px; top: -120px; width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .20), transparent 65%); pointer-events: none;
}
.page-hero.compact { padding: 22px 26px; align-items: center; }
.page-hero h1, .proc-head h1 { color: #fff; margin: 6px 0 6px; }
.page-hero p, .proc-head p, .proc-meta { color: rgba(236, 242, 255, .9); margin: 0; }
.page-hero .eyebrow, .proc-head .eyebrow { color: #bcd2ff; }
.proc-meta b { color: #fff; }
.page-hero .button.ghost, .proc-head .button.ghost { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .35); }
.page-hero .button.ghost:hover { background: rgba(255, 255, 255, .24); }
.proc-head .status-chip, .page-hero .status-chip { background: rgba(255, 255, 255, .18); color: #fff; }
.hero-tag { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 99px; background: rgba(255, 255, 255, .16); color: #fff; font-size: .8rem; }
.hero-stats { display: flex; gap: 12px; position: relative; z-index: 1; }
.hero-stats div { min-width: 118px; padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .22); }
.hero-stats strong { display: block; font-size: 1.7rem; color: #fff; line-height: 1.1; }
.hero-stats span { font-size: .82rem; color: #d7e3ff; }
.page-heading { margin-bottom: 20px; }
.page-heading h1 { margin: 6px 0 4px; }
.page-heading p { font-size: 1rem; }

/* ---------- surfaces ---------- */
.panel, .card, .proc-section, .process-card, .input-group, .report-card, .kpi-card, .workspace-kpi {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.proc-section { padding: 26px 28px; margin-bottom: 20px; }
.proc-section-head h2 { font-size: 1.32rem; }
.proc-section-head p { font-size: .98rem; }
.proc-num { width: 40px; height: 40px; border-radius: 12px; background: var(--grad-brand); color: #fff; font-size: 1.05rem; box-shadow: 0 6px 16px rgba(83, 96, 234, .30); }
.section-block { margin: 6px 0 26px; }
.section-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.section-title h2 { margin: 0 0 2px; }
.section-title p { margin: 0; }
.placeholder { border-radius: 14px; font-size: .98rem; background: var(--surface-soft); }
.proc-tip { font-size: .95rem; background: var(--grad-soft); border: 1px solid #d9e2fb; }

/* ---------- buttons & inputs ---------- */
button, .button {
  font-size: .95rem; font-weight: 700; padding: 11px 18px; min-height: 42px; border-radius: 12px;
  background: var(--grad-brand); color: #fff; border: 0; box-shadow: 0 6px 16px rgba(53, 99, 233, .25);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
button:hover, .button:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(53, 99, 233, .32); background: var(--grad-brand); }
button:disabled { background: #cfd7e8; box-shadow: none; transform: none; filter: none; cursor: not-allowed; }
.secondary, .secondary:hover { background: #e9efff; color: #2a55cf; box-shadow: none; }
.ghost, .ghost:hover { background: #fff; color: var(--ink-2); border: 1px solid var(--line); box-shadow: none; }
.ghost:hover { border-color: #b9c9f3; color: var(--brand); }
.button-sm { font-size: .85rem; padding: 7px 12px; min-height: 34px; border-radius: 10px; }
.button-lg { font-size: 1.05rem; padding: 14px 26px; min-height: 52px; border-radius: 14px; }
input, select, textarea { font-size: .95rem; padding: 10px 12px; border-radius: 10px; border: 1px solid #d5deee; background: #fff; color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: none; border-color: #8aa8f3; box-shadow: 0 0 0 3px rgba(53, 99, 233, .15); }
label { font-size: .9rem; color: var(--ink-2); font-weight: 650; }

/* ---------- chips & tables ---------- */
.status-chip { font-size: .78rem; font-weight: 800; padding: 5px 11px; border-radius: 99px; letter-spacing: .03em; }
.status-draft { background: #e7eeff; color: #2d57c9; }
.status-review { background: #efe7ff; color: #6a45c7; }
.status-approved, .status-succeeded, .status-closed { background: #dcf7ee; color: #127a59; }
.status-failed, .status-rejected { background: #ffe8e4; color: #b3392a; }
.status-warning { background: #fff2d9; color: #9a6612; }
.counter { font-size: .82rem; font-weight: 700; padding: 5px 11px; border-radius: 99px; background: #eaf0ff; color: #2d5ad0; }
table { font-size: .93rem; }
th { font-size: .74rem; letter-spacing: .06em; color: #5f6d88; background: #f5f7fd; padding: 11px 12px; }
td { padding: 10px 12px; border-bottom: 1px solid #edf1f8; }
tr:hover td { background: #f8faff; }
.message { font-size: .95rem; }
.notice { font-size: .95rem; border-radius: 12px; }

/* ---------- stepper ---------- */
.proc-stepper { border-radius: 18px; padding: 10px; background: rgba(255, 255, 255, .85); box-shadow: var(--shadow); border: 1px solid var(--line); top: 8px; }
.proc-stepper a { padding: 12px 14px; border-radius: 14px; }
.proc-stepper a > span { width: 34px; height: 34px; font-size: .95rem; }
.proc-stepper strong { font-size: .95rem; }
.proc-stepper small { font-size: .78rem; }
.proc-stepper a.current { background: var(--grad-soft); box-shadow: inset 0 0 0 1px #d4defa; }
.proc-stepper a.current > span { background: var(--grad-brand); box-shadow: 0 6px 14px rgba(83, 96, 234, .35); }
.proc-stepper a.done > span { background: #d9f6ec; color: #11875f; }

/* ---------- process page ---------- */
.input-group { box-shadow: none; }
.input-group-title { padding: 14px 16px; background: var(--surface-soft); }
.input-group-title > span { width: 26px; height: 26px; border-radius: 8px; background: var(--grad-brand); font-size: .85rem; }
.input-group-title strong { font-size: 1.02rem; }
.input-group-title small { font-size: .85rem; }
.input-row { padding: 12px 16px; }
.input-main strong { font-size: .98rem; }
.input-main small { font-size: .84rem; }
.input-count { font-size: .8rem; padding: 4px 10px; border-radius: 99px; }
.readiness { border-radius: 16px; padding: 18px 20px; }
.readiness strong { font-size: 1.1rem; }
.readiness ul { font-size: .93rem; }
.result-kpis > div { border-radius: 14px; padding: 15px 16px; background: var(--surface-soft); }
.result-kpis small { font-size: .82rem; }
.result-kpis strong { font-size: 1.28rem; }
.result-kpis .accent { background: var(--grad-soft); border-color: #d4defa; }
.report-card { padding: 16px; }
.report-card strong { font-size: 1rem; }
.report-card small { font-size: .85rem; }

/* ---------- dashboard ---------- */
.pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.pt-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease; }
.pt-card:not(.locked):hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.pt-card h3 { margin: 0; font-size: 1.05rem; }
.pt-card .button { align-self: flex-start; margin-top: auto; }
.pt-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pt-badge { display: inline-grid; place-items: center; min-width: 54px; height: 38px; padding: 0 12px; border-radius: 12px; background: var(--grad-brand); color: #fff; font-weight: 800; letter-spacing: .04em; box-shadow: 0 6px 14px rgba(83, 96, 234, .3); }
.pt-role { font-size: .8rem; font-weight: 700; color: #2d5ad0; background: #eaf0ff; padding: 4px 10px; border-radius: 99px; }
.pt-period { margin: 0; font-size: .95rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pt-card.locked { background: #f6f8fc; box-shadow: none; opacity: .78; }
.pt-card.locked .pt-badge { background: #c3cbdc; box-shadow: none; }
.pt-lock { font-size: .8rem; color: #7d879b; font-weight: 700; }
.pt-grid.compact { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.pt-grid.compact .pt-card { padding: 14px 16px; gap: 6px; }

/* ---------- access ---------- */
.level-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.level-legend div { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.level-legend b { display: block; font-size: .95rem; }
.level-legend span { font-size: .86rem; color: var(--muted); }
.access-table select { min-width: 170px; font-size: .85rem; padding: 7px 8px; }
.level-none { color: #98a2b6; background: #f4f6fa; }
.level-admin { background: #efe9ff; color: #5a3fb8; font-weight: 700; }
.level-payroll { background: #e8efff; color: #2a55cf; font-weight: 700; }
.level-reviewer { background: #e5f7f3; color: #0f7d6f; font-weight: 700; }
.level-finance { background: #fff4df; color: #94620d; font-weight: 700; }

/* ---------- sheet editor & guide ---------- */
.sheet-table { font-size: .9rem; }
.sheet-table th { font-size: .72rem; }
.sheet-table input { font-size: .9rem; padding: 7px 8px; }
.sheet-table input.manual { background: #fff7e6; border-color: #f0c070; box-shadow: inset 3px 0 0 #f0a830; }
.sheet-table th .req { color: var(--red); margin-left: 2px; }
.sheet-table th .dd { color: #7b8db8; margin-left: 4px; font-size: .8em; }
.empty-row { text-align: center; padding: 22px !important; }
.guide-panel { margin: 0 0 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.guide-panel summary { cursor: pointer; padding: 14px 18px; font-weight: 750; font-size: 1rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.guide-panel summary small { font-weight: 500; }
.guide-icon { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--grad-brand); color: #fff; font-weight: 800; font-style: italic; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; padding: 0 18px 18px; }
.guide-item { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.guide-item p { margin: 6px 0 0; font-size: .9rem; color: var(--ink-2); }
.guide-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pill-req, .pill-kind { font-size: .7rem; font-weight: 800; padding: 2px 8px; border-radius: 99px; }
.pill-req { background: #ffe7e3; color: #b3392a; }
.pill-kind { background: #eaf0ff; color: #2d5ad0; }
.guide-options { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.guide-options span { font-size: .78rem; padding: 3px 8px; border-radius: 8px; background: #fff; border: 1px solid #dbe3f3; color: var(--ink-2); }
.guide-options .more { background: transparent; border-style: dashed; }

/* ---------- upload ---------- */
.dropzone { border-radius: 20px; padding: 44px 22px; border: 2px dashed #b9c9f3; background: var(--grad-soft); }
.dropzone strong { font-size: 1.15rem; }
.dropzone .dz-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 18px; background: var(--grad-brand); color: #fff; font-size: 1.8rem; box-shadow: 0 10px 24px rgba(83, 96, 234, .35); }
.plan-table td, .plan-table th { font-size: .93rem; }

@media (max-width: 1100px) {
  .level-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sidebar { width: 262px; }
  .app-shell { margin-left: 0; }
  .content { padding: 20px 16px 80px; }
  .topbar { padding: 0 16px; }
  .page-hero, .proc-head { padding: 20px; border-radius: 18px; }
  .hero-stats { width: 100%; }
  .hero-stats div { flex: 1; min-width: 0; }
  h1 { font-size: 1.6rem; }
  .level-legend { grid-template-columns: 1fr; }
}

/* ---------- riwayat ---------- */
.history-search { display: flex; gap: 10px; max-width: 620px; margin-bottom: 14px; }
.history-search input { flex: 1; }
.match-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; margin-bottom: 14px; }
.match-list a { padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); color: var(--ink); text-decoration: none; }
.match-list a:hover { border-color: #b9c9f3; background: #fff; }
.person-head { display: flex; align-items: center; gap: 14px; margin: 6px 0 14px; }
.person-head h3 { margin: 0; }
.person-head p { margin: 0; }
.sub-title { margin: 22px 0 10px; }
.amount-col { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.team-create-form { display: grid; gap: 1rem; }
.team-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.team-fields label { display: grid; gap: .45rem; font-weight: 650; }
.team-fields input, .team-fields select { width: 100%; min-height: 44px; }
.team-entities { border: 1px solid #ccd8e6; border-radius: 14px; padding: 1rem; }
.team-entities legend { font-weight: 700; padding: 0 .4rem; }
.team-entity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .6rem; }
.team-entity-grid label { display: flex; align-items: center; gap: .4rem; padding: .65rem; border: 1px solid #d6e0eb; border-radius: 10px; background: #f8fbff; }
.team-entity-grid small { color: #536579; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-hero .superadmin-note { display: inline-block; margin: .5rem 0; padding: .55rem .9rem; border: 1px solid rgba(209, 223, 255, .3); border-radius: 12px; color: #f5f8ff; background: rgba(8, 19, 45, .38); font-size: 1rem; line-height: 1.45; }
.page-hero .superadmin-note strong { color: #fff; }

/* Input and calculation have distinct destinations and clear next actions. */
.entry-route { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 22px; }
.entry-route-stage { display: flex; align-items: flex-start; gap: 12px; padding: 15px 16px; border: 1px solid #dbe3f0; border-radius: 14px; background: #f8faff; }
.entry-route-stage.current { color: #fff; background: var(--grad-hero); border-color: #253f72; box-shadow: 0 10px 22px rgba(24, 46, 87, .16); }
.entry-route-stage > span { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; font-weight: 800; color: #3657a0; background: #e7edfa; }
.entry-route-stage.current > span { color: #fff; background: rgba(255, 255, 255, .2); }
.entry-route-stage strong, .entry-route-stage small { display: block; }
.entry-route-stage strong { font-size: 1rem; line-height: 1.25; }
.entry-route-stage small { margin-top: 4px; font-size: .85rem; color: #61718d; line-height: 1.35; }
.entry-route-stage.current small { color: #dbe6fa; }
.input-group-title { align-items: center; }
.input-group-title > div { flex: 1; min-width: 0; }
.input-group-title > .input-group-progress { display: inline-block; width: auto; height: auto; flex: none; padding: 5px 9px; border-radius: 99px; font-size: .76rem; font-weight: 750; color: #284877; background: #e8eef9; white-space: nowrap; }
.input-group { border-color: #dce4f1; overflow: hidden; }
.input-row:hover { background: #f3f7ff; }
.input-main strong { font-size: .98rem; }
.input-main small { font-size: .83rem; color: #62718a; }
.entry-next, .sheet-next { display: flex; justify-content: space-between; align-items: center; gap: 22px; margin-top: 24px; padding: 22px 24px; border: 1px solid #cbd8ef; border-radius: 17px; background: linear-gradient(115deg, #eef3fd, #f5f8fc); }
.entry-next > div, .sheet-next > div:first-child { max-width: 710px; }
.entry-next h3, .sheet-next h2 { margin: 5px 0 6px; font-size: 1.18rem; }
.entry-next p, .sheet-next p { margin: 0; color: #4d5e78; font-size: .93rem; }
.entry-next > a { flex: none; }
.sheet-route { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 0 0 12px; padding: 10px 14px; border: 1px solid #dce4f1; border-radius: 13px; background: #fff; box-shadow: var(--shadow); }
.sheet-route a, .sheet-route .current { display: inline-flex; align-items: center; gap: 8px; padding: 5px 7px; border-radius: 8px; color: #40577b; text-decoration: none; font-size: .88rem; }
.sheet-route a:hover { color: #294c99; background: #eef3fd; }
.sheet-route .current { color: #fff; background: #304b80; }
.sheet-route span:not(.sheet-route-divider) { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; font-weight: 800; background: #e8eef9; color: #34548f; }
.sheet-route .current span { background: rgba(255, 255, 255, .2); color: #fff; }
.sheet-route-divider { color: #8b9bb2; }
.entry-help { display: flex; gap: 6px 16px; flex-wrap: wrap; margin-bottom: 16px; padding: 14px 16px; border-left: 4px solid #4566b5; border-radius: 10px; background: #eef3fc; color: #344968; font-size: .92rem; }
.entry-help strong { color: #213964; }
.sheet-next-actions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; }
.sheet-next-actions .button { white-space: normal; text-align: center; }
@media (max-width: 950px) { .entry-route { grid-template-columns: 1fr; } .entry-next, .sheet-next { align-items: stretch; flex-direction: column; } .sheet-next-actions { justify-content: flex-start; } }
@media (max-width: 620px) { .input-group-title { flex-wrap: wrap; } .input-group-progress { margin-left: 36px; } .sheet-route-divider { display: none; } }

/* Login: split card with CSS illustration; no external asset or third-party script. */
body.auth-page { background: radial-gradient(circle at 12% 8%, #e2e9ff 0, transparent 36%), radial-gradient(circle at 92% 88%, #e9def8 0, transparent 42%), #f5f4f9; }
body.auth-page .auth-shell { min-height: 100vh; margin: 0; }
body.auth-page .auth-shell .content { width: min(1160px, 100%); max-width: none; padding: 32px; }
.auth-layout { display: grid; grid-template-columns: minmax(380px, .92fr) minmax(0, 1.08fr); min-height: min(700px, calc(100vh - 64px)); border-radius: 26px; background: #fff; box-shadow: 0 28px 75px rgba(40, 44, 86, .17); overflow: hidden; animation: auth-arrive .65s ease both; }
.auth-card { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 5vw, 70px); min-width: 0; }
.auth-brand { display: inline-flex; align-items: center; gap: 11px; color: #1c2a4a; font-size: 1.15rem; font-weight: 850; letter-spacing: .02em; margin-bottom: 58px; }
.auth-brand .brand-mark { width: 37px; height: 37px; display: flex; align-items: center; justify-content: center; gap: 2px; border-radius: 12px; }
.auth-brand .brand-mark i { width: 5px; height: 12px; transform: rotate(-25deg); }
.auth-brand small { display: block; margin-top: -4px; font-size: .68rem; font-weight: 650; letter-spacing: .12em; color: #7a89a5; }
.auth-card-copy .eyebrow { color: #866794; }
.auth-card h1 { font-size: clamp(2.2rem, 3.3vw, 3.2rem); margin: 10px 0 10px; }
.auth-card-copy p { max-width: 350px; margin: 0 0 27px; color: #6a7388; }
.auth-form { display: grid; gap: 8px; max-width: 390px; }
.auth-form label { margin-top: 10px; color: #394360; font-size: .88rem; }
.auth-form > input:not([type=hidden]), .auth-password input { width: 100%; min-height: 52px; padding: 14px 15px; background: #f7f8fc; border: 1px solid #e6e8f0; border-radius: 12px; font-size: 1rem; }
.auth-form > input:focus, .auth-password input:focus { background: #fff; border-color: #977aa9; box-shadow: 0 0 0 4px rgba(151, 122, 169, .14); }
.auth-password { position: relative; }
.auth-password input { padding-right: 110px; }
.auth-reveal, .auth-reveal:hover { position: absolute; right: 8px; top: 7px; min-height: 38px; padding: 7px 11px; font-size: .8rem; color: #756083; background: transparent; border: 0; box-shadow: none; transform: none; }
.auth-submit { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 53px; margin-top: 16px; padding: 12px 17px; background: linear-gradient(115deg, #785a91, #9c6b8e); border-radius: 12px; font-size: 1rem; }
.auth-submit:hover { background: linear-gradient(115deg, #684a83, #8c597e); }
.auth-submit span { font-size: 1.25rem; }
.auth-foot { display: flex; align-items: flex-start; gap: 9px; max-width: 380px; margin-top: 26px; color: #8992a5; font-size: .78rem; }
.auth-foot span:first-child { font-size: 1rem; }
.auth-error, .auth-field-error { color: #a63e4c; font-size: .88rem; }
.auth-error { padding: 10px 13px; border-radius: 10px; background: #fff0f2; }
.auth-error ul, .auth-field-error ul { margin: 0; padding-left: 18px; }
.auth-scene { position: relative; overflow: hidden; isolation: isolate; min-height: 600px; padding: 38px 42px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; background: linear-gradient(180deg, #6e597b 0%, #b783a2 31%, #edb5a0 55%, #786b99 100%); }
.auth-scene::before { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 62% 38%, rgba(255, 236, 186, .8), transparent 17%), linear-gradient(180deg, rgba(23, 26, 69, .22), transparent 45%); }
.auth-scene-top, .auth-scene-foot { position: relative; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: rgba(255, 255, 255, .9); font-size: .74rem; font-weight: 750; letter-spacing: .15em; }
.auth-scene-top span:last-child { font-size: 1.7rem; }
.auth-sun { position: absolute; z-index: 0; width: 210px; height: 210px; left: 37%; top: 23%; border-radius: 50%; background: radial-gradient(circle at 46% 42%, #fff3cc 0%, #ffd9ae 57%, rgba(255, 215, 168, .1) 70%); box-shadow: 0 0 70px rgba(255, 215, 158, .55); animation: sun-breathe 7s ease-in-out infinite; }
.auth-mountain { position: absolute; z-index: 1; inset: auto -7% 0; height: 49%; background: #6e648c; clip-path: polygon(0 61%, 12% 42%, 25% 50%, 42% 25%, 59% 59%, 77% 27%, 100% 54%, 100% 100%, 0 100%); }
.auth-mountain.back { bottom: 16%; opacity: .55; filter: blur(2px); }
.auth-mountain.front { height: 42%; bottom: 0; background: linear-gradient(180deg, #5d6289, #3b486e); clip-path: polygon(0 50%, 19% 21%, 36% 58%, 58% 17%, 78% 52%, 100% 25%, 100% 100%, 0 100%); }
.auth-land { position: absolute; z-index: 2; left: -10%; right: -10%; bottom: -18%; height: 43%; border-radius: 50% 50% 0 0; background: linear-gradient(180deg, rgba(147, 148, 190, .76), #535b80); transform: rotate(-8deg); }
.auth-star { position: absolute; z-index: 1; color: rgba(255,255,255,.68); animation: star-drift 5s ease-in-out infinite; }
.star-one { top: 20%; right: 19%; font-size: 1.2rem; }.star-two { top: 34%; left: 16%; font-size: .8rem; animation-delay: -2s; }
.auth-scene-copy { position: relative; z-index: 4; max-width: 410px; margin-top: auto; margin-bottom: 50px; text-shadow: 0 2px 16px rgba(23, 22, 52, .35); }
.auth-scene-copy h2 { color: #fff; font-size: clamp(2rem, 3vw, 3.2rem); line-height: 1.1; margin: 0 0 15px; }
.auth-scene-copy p { color: rgba(255,255,255,.92); font-size: 1rem; }
.auth-scene-line { display: flex; gap: 5px; }.auth-scene-line i { height: 4px; width: 13px; border-radius: 3px; background: rgba(255,255,255,.5); }.auth-scene-line i:first-child { width: 28px; background: #fff; }
@keyframes auth-arrive { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sun-breathe { 50% { transform: scale(1.06); box-shadow: 0 0 105px rgba(255,215,158,.6); } }
@keyframes star-drift { 50% { transform: translateY(-9px); opacity: .6; } }
@media (max-width: 800px) { body.auth-page .auth-shell .content { padding: 16px; } .auth-layout { grid-template-columns: 1fr; min-height: 0; } .auth-card { padding: 28px; } .auth-brand { margin-bottom: 38px; } .auth-scene { min-height: 260px; padding: 24px; } .auth-scene-copy { margin-bottom: 15px; } .auth-scene-copy h2 { font-size: 1.8rem; } .auth-sun { width: 140px; height: 140px; top: 11%; } }
@media (prefers-reduced-motion: reduce) { .auth-layout, .auth-sun, .auth-star { animation: none !important; } }
.auth-logo-image { width: 94px; height: 61px; object-fit: cover; border-radius: 10px; box-shadow: 0 8px 20px rgba(8, 16, 55, .16); }
.auth-brand { gap: 14px; }
.auth-brand > span { line-height: 1.2; }
.auth-brand small { margin-top: 5px; }
.brand-logo-image { display: block; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 11px; background: #050509 url('onesync-logo.png') center 19% / 215% auto no-repeat; box-shadow: 0 5px 15px rgba(0, 0, 0, .18); }

/* ONESYNC ocean login, inspired by the user's selected reference. */
body.auth-page { background: #0a1836; }
body.auth-page .auth-shell .content { width: 100%; max-width: none; min-height: 100vh; padding: 0; }
.auth-ocean-layout { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 450px); align-items: center; gap: clamp(24px, 6vw, 100px); width: 100%; min-height: 100vh; padding: clamp(28px, 7vh, 70px) clamp(24px, 8vw, 150px); border-radius: 0; box-shadow: none; background: linear-gradient(90deg, rgba(4, 16, 49, .62), rgba(5, 19, 54, .16) 52%, rgba(8, 24, 60, .08)), url('login-seascape.png') center center / cover no-repeat; overflow: visible; }
.auth-ocean-layout .auth-intro { position: relative; z-index: 1; max-width: 500px; color: #fff; text-shadow: 0 2px 18px rgba(3, 9, 31, .38); animation: auth-intro-arrive .7s .12s ease both; }
.auth-intro-overline { display: inline-block; padding: 9px 13px; border: 1px solid rgba(255,255,255,.34); border-radius: 999px; background: rgba(255,255,255,.1); backdrop-filter: blur(10px); font-size: .78rem; font-weight: 850; letter-spacing: .13em; }
.auth-intro h1 { margin: 22px 0 16px; color: #fff; font-size: clamp(2.7rem, 5vw, 5.3rem); line-height: 1.03; letter-spacing: -.045em; }
.auth-intro p { max-width: 450px; color: #f3f4ff; font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.65; }
.auth-intro-line { display: flex; align-items: center; gap: 10px; margin-top: 42px; color: #e4e8fb; font-size: .8rem; font-weight: 780; letter-spacing: .06em; }
.auth-intro-line span { display: inline-block; width: 32px; height: 3px; border-radius: 4px; background: #ffc36e; }
.auth-ocean-layout .auth-card { z-index: 2; width: 100%; min-width: 0; padding: clamp(30px, 3vw, 46px); border: 1px solid rgba(255,255,255,.8); border-radius: 16px; background: rgba(255,255,255,.97); box-shadow: 0 28px 85px rgba(4, 13, 43, .38); backdrop-filter: blur(16px); }
.auth-ocean-layout .auth-brand { margin-bottom: 35px; }
.auth-ocean-layout .auth-logo-image { width: 100px; height: 65px; object-fit: cover; animation: auth-logo-refresh 1.1s cubic-bezier(.16,1,.3,1) both; }
.auth-ocean-layout .auth-card h2 { margin: 8px 0 8px; color: #1c2949; font-size: clamp(1.75rem, 2.3vw, 2.15rem); line-height: 1.16; }
.auth-ocean-layout .auth-card-copy p { margin-bottom: 18px; }
.auth-ocean-layout .auth-submit { background: linear-gradient(105deg, #235fa7, #705bca); }
.auth-ocean-layout .auth-submit:hover { background: linear-gradient(105deg, #164f96, #5d4eb8); }
.auth-ocean-layout .auth-foot { margin-top: 21px; }
@keyframes auth-intro-arrive { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
@keyframes auth-logo-refresh { 0% { opacity: 0; transform: scale(1.75); filter: blur(8px); } 65% { opacity: 1; transform: scale(.94); filter: blur(0); } 100% { opacity: 1; transform: scale(1); } }
@media (max-width: 800px) { .auth-ocean-layout { grid-template-columns: 1fr; gap: 22px; justify-items: center; padding: 28px 18px 36px; background-position: 55% center; } .auth-ocean-layout .auth-intro { width: min(450px, 100%); } .auth-intro h1 { font-size: clamp(2.2rem, 8vw, 3.3rem); margin: 14px 0 8px; } .auth-intro p { margin: 0; } .auth-intro-line { display: none; } .auth-ocean-layout .auth-card { width: min(450px, 100%); padding: 27px; } }
@media (prefers-reduced-motion: reduce) { .auth-ocean-layout, .auth-ocean-layout .auth-intro, .auth-ocean-layout .auth-logo-image { animation: none !important; } }

.access-checklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 9px; margin: 10px 0 14px; }
.access-checklist label, .salary-check { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border: 1px solid #d8e3f5; border-radius: 12px; background: #f8faff; font-weight: 700; }
.access-checklist input, .salary-check input, .access-cell input { width: 18px; height: 18px; accent-color: #6257e9; }
.salary-check { background: #fff8eb; border-color: #f5dba7; flex-wrap: wrap; }
.salary-check small { width: 100%; margin-left: 27px; color: #6f7790; font-weight: 500; }
.access-users { display: grid; gap: 12px; }
.access-user { border: 1px solid #dce5f4; border-radius: 16px; overflow: hidden; background: #fff; }
.access-user summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; cursor: pointer; background: linear-gradient(110deg, #f7faff, #f5f2ff); color: #223354; }
.access-user summary span:first-child { display: grid; }
.access-user summary small { color: #687a9c; margin-top: 2px; }
.access-super { color: #5347c7; }
.access-task-table { min-width: 1050px; width: 100%; border-collapse: collapse; }
.access-task-table th, .access-task-table td { padding: 10px 8px; text-align: center; border-bottom: 1px solid #edf1f8; }
.access-task-table thead th { background: #eef3ff; font-size: .8rem; white-space: normal; }
.access-task-table tbody th { text-align: left; color: #243450; font-weight: 850; }
.access-task-table tbody tr:nth-child(even) { background: #fbfcff; }
.access-cell { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 30px; cursor: pointer; }
.access-cell.salary { background: #fff8e8; border-radius: 9px; }
.access-pt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 14px; padding: 16px; }
.access-pt-card { min-width: 0; padding: 15px; border: 1px solid #d8e3f4; border-radius: 15px; background: #fff; box-shadow: 0 4px 14px rgba(29, 53, 104, .05); }
.access-pt-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #edf1f8; }
.access-pt-head strong { color: #3d50cb; font-size: 1.05rem; }
.access-pt-head span { min-width: 0; color: #5d6b87; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.access-pt-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.access-pt-role { display: flex; align-items: center; gap: 7px; min-height: 42px; padding: 7px 9px; border: 1px solid #e0e8f5; border-radius: 9px; background: #f8faff; font-size: .78rem; font-weight: 700; line-height: 1.25; cursor: pointer; }
.access-pt-role:has(input:checked) { border-color: #a5afff; background: #eef0ff; color: #403eaa; }
.access-pt-role input, .access-pt-salary input { flex: 0 0 17px; width: 17px; height: 17px; accent-color: #6257e9; }
.access-pt-salary { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 9px 11px; border: 1px solid #f0dcae; border-radius: 9px; background: #fff9ec; font-size: .83rem; font-weight: 800; cursor: pointer; }
.access-pt-salary small { display: block; margin-top: 2px; color: #767685; font-size: .72rem; font-weight: 500; }
.access-pt-salary:has(input:checked) { background: #fff1cf; border-color: #e3b859; }
@media (max-width: 620px) { .access-pt-grid { padding: 10px; } .access-pt-roles { grid-template-columns: 1fr; } }

/* Shared input clarity and compact workspace. */
.sheet-table td, .sheet-table th { border-right: 1px solid #c6d1e4; border-bottom: 1px solid #c6d1e4; }
.sheet-table td { padding: 4px; }
.sheet-table input:not([type=checkbox]):not([type=hidden]), .grid-table input { border: 1px solid #9cacc6; background: #fff; border-radius: 5px; min-width: 145px; padding: 7px 9px; }
.sheet-table input[type=date] { min-width: 165px; }
.sheet-table input:focus, .period-fields input:focus { outline: 2px solid #5278db; outline-offset: 1px; }
.sheet-wrap { max-height: calc(100vh - 220px); min-height: 240px; border-color: #a8b7d0; }
.sheet-table th { background: #e9effa; color: #263955; text-transform: none; letter-spacing: .015em; }
.sheet-table .key { left: 0; }
.guide-panel summary { padding: 8px 14px; font-size: .9rem; }
.guide-panel .guide-grid { max-height: 240px; overflow: auto; }
.sheet-route { margin: 8px 0; }
.entry-help { padding: 8px 12px; margin: 8px 0; }
.sheet-next { margin-top: 12px; padding: 12px 16px; }
.sheet-next h2 { font-size: 1rem; }
.period-config { display: grid; gap: 12px; }
.period-group { border: 1px solid #b6c4dc; border-radius: 12px; padding: 14px 18px; background: #fff; }
.period-group h2 { margin: 0 0 10px; font-size: 1.05rem; }
.period-group > label { display: grid; gap: 4px; max-width: 280px; }
.period-group input { border: 1px solid #9cacc6; background: #fff; padding: 9px 11px; border-radius: 6px; width: 100%; min-width: 0; }
.period-group input[readonly] { background: #eef2f8; }
.period-fields { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 14px; }
.period-fields label { display: grid; gap: 5px; align-content: start; font-size: .9rem; }
.period-thr summary { cursor: pointer; font-weight: 700; }
.period-thr summary small { font-weight: 400; margin-left: 10px; }
.period-thr details[open] .period-fields { margin-top: 14px; }
.period-config input.changed { background: #fff8e1; border-color: #bd8b2e; }
.employee-picker { position: fixed; z-index: 1100; max-height: 260px; overflow-y: auto; background: white; border: 1px solid #8ea5cc; border-radius: 8px; box-shadow: 0 6px 20px #14244833; padding: 4px; }
.employee-picker[hidden] { display: none; }
.employee-picker button { display: block; width: 100%; padding: 9px 10px; background: white; color: #142448; border: 0; text-align: left; border-radius: 4px; font-size: 14px; box-shadow: none; }
.employee-picker button:hover, .employee-picker button.selected { background: #e5edff; }
.employee-picker p { font-size: 14px; padding: 8px; margin: 0; }
.display-controls { display: flex; align-items: center; gap: 3px; }
.display-controls button { padding: 5px 9px; min-height: 30px; font-size: .85rem; }
.topbar-logout { white-space: nowrap; border-color: #c2cde3; }
.logoff-scene { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; background: #101c38; color: white; animation: lights-out .85s ease-in forwards; }
.logoff-scene small { color: #d6dff5; }
.logoff-lamp { font-size: 4rem; animation: lamp-off .6s ease-in forwards; }
.logoff-character { font-size: 4rem; animation: goodbye-wave .7s ease-in-out; transform-origin: bottom right; }
@keyframes lights-out { from { background: #e9effa; color: #142448; } to { background: #070d1c; color: white; } }
@keyframes lamp-off { from { filter: drop-shadow(0 0 30px #ffd05d); } to { filter: grayscale(1) brightness(.25); } }
@keyframes goodbye-wave { 25%,75% { transform: rotate(18deg); } 50% { transform: rotate(-12deg); } }
@media (max-width: 700px) { .topbar { flex-wrap: wrap; height: auto; gap: 8px; padding: 8px 12px; } .topbar-right { flex-wrap: wrap; } .topbar-pill { display: none; } .save-bar { flex-wrap: wrap; } .period-fields { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .logoff-scene, .logoff-lamp, .logoff-character { animation: none; } }
.logoff-character { animation: none; }
.mascot-arm { transform-origin: 84px 73px; animation: goodbye-wave .7s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .mascot-arm { animation: none; } }