:root {
  color-scheme: light;
  --ink: #17201d;
  --muted: #68736f;
  --soft: #f1f3ef;
  --canvas: #f7f8f5;
  --paper: #fff;
  --line: #dfe4df;
  --green-900: #173c35;
  --green-700: #285e50;
  --green-500: #5f7f72;
  --green-100: #e1ebe6;
  --clay: #b56f4a;
  --red: #a4483b;
  --shadow: 0 18px 45px rgba(23, 32, 29, .08);
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--canvas); color: var(--ink); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -.045em; line-height: 1.05; }
h2 { font-size: 1.1rem; letter-spacing: -.02em; }

.eyebrow { color: #b9ccc5; font-size: .69rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow.ink { color: var(--green-700); }
.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--ink); font-size: 1.06rem; font-weight: 800; text-decoration: none; letter-spacing: -.02em; }
.brand-light { color: #fff; }
.brand-mark { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .65rem; background: var(--clay); color: #fff; font: 800 1rem Georgia, serif; }

.auth-screen { display: grid; min-height: 100vh; grid-template-columns: minmax(360px, .9fr) 1.1fr; }
.brand-panel { display: flex; min-height: 100vh; padding: clamp(2rem, 6vw, 5.5rem); flex-direction: column; justify-content: space-between; overflow: hidden; background: var(--green-900); color: #fff; position: relative; }
.brand-panel::after { content: ""; position: absolute; width: 540px; height: 540px; right: -290px; bottom: -290px; border: 80px solid rgba(255,255,255,.035); border-radius: 50%; }
.brand-copy { max-width: 540px; position: relative; z-index: 1; }
.brand-copy h1 { max-width: 500px; margin: .8rem 0 1.2rem; font-family: Georgia, Cambria, serif; font-size: clamp(2.5rem, 5vw, 5.2rem); font-weight: 500; letter-spacing: -.05em; line-height: .94; }
.brand-copy > p:last-child { max-width: 470px; color: #c8d8d2; font-size: 1.08rem; line-height: 1.65; }
.proof-list { display: grid; max-width: 520px; margin: 0; padding: 0; gap: .8rem; list-style: none; color: #d5e1dd; font-size: .9rem; }
.proof-list li { display: flex; align-items: center; gap: .8rem; border-top: 1px solid rgba(255,255,255,.12); padding-top: .8rem; }
.proof-list span { color: #87a69b; font: 700 .72rem Georgia, serif; }
.auth-panel { display: grid; min-height: 100vh; place-items: center; padding: 2rem; background: #fbfcf9; }
.auth-card { width: min(100%, 470px); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 2rem; border-bottom: 1px solid var(--line); }
.auth-tab { border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); padding: .9rem; font-weight: 700; }
.auth-tab.active { border-color: var(--green-700); color: var(--green-900); }
.form-stack { display: grid; gap: 1.15rem; }
.form-stack h2 { margin-top: .45rem; font: 500 2rem/1.1 Georgia, serif; }
.form-stack.compact { gap: .85rem; }
label { display: grid; gap: .42rem; color: #44504c; font-size: .76rem; font-weight: 750; letter-spacing: .02em; }
label small { color: var(--muted); font-weight: 500; }
input, select, textarea { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: .7rem; outline: 0; background: #fff; color: var(--ink); padding: .7rem .8rem; transition: border .15s, box-shadow .15s; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(95,127,114,.15); }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.check { display: flex; min-height: 44px; flex-direction: row; align-items: center; gap: .55rem; }
.check input { width: 18px; min-height: 18px; accent-color: var(--green-700); }
.fine-print { color: var(--muted); font-size: .72rem; line-height: 1.5; text-align: center; }

.primary, .secondary, .danger { min-height: 42px; border-radius: .7rem; padding: 0 1rem; font-size: .8rem; font-weight: 800; }
.primary { border: 1px solid var(--green-900); background: var(--green-900); color: #fff; }
.primary:hover { background: var(--green-700); }
.secondary { border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
.secondary:hover { background: var(--soft); }
.danger { border: 1px solid #913d32; background: #913d32; color: #fff; }
.wide { width: 100%; }
.bare { border: 0; background: transparent; color: inherit; padding: .4rem; }
.text-danger { border: 0; background: transparent; color: var(--red); font-weight: 700; }
.text-link { color: var(--green-700); font-size: .78rem; font-weight: 800; text-decoration: none; }

.app { min-height: 100vh; }
.sidebar { display: flex; width: 248px; height: 100vh; position: fixed; inset: 0 auto 0 0; z-index: 10; flex-direction: column; border-right: 1px solid var(--line); background: #f3f5f1; padding: 1.25rem 1rem; }
.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: .2rem .5rem 1.8rem; }
.main-nav { display: grid; gap: .2rem; }
.main-nav a { display: flex; min-height: 43px; align-items: center; gap: .75rem; border-radius: .65rem; color: #54605c; padding: 0 .8rem; font-size: .82rem; font-weight: 700; text-decoration: none; }
.main-nav a span { width: 1.1rem; color: #89938f; font-size: 1.05rem; text-align: center; }
.main-nav a:hover { background: #e8ece7; }
.main-nav a.active { background: var(--green-900); color: #fff; }
.main-nav a.active span { color: #fff; }
.sidebar-foot { display: grid; margin-top: auto; gap: .75rem; }
.sync-status { display: flex; align-items: center; gap: .5rem; border: 0; background: transparent; color: var(--muted); padding: .5rem; font-size: .68rem; text-align: left; }
.sync-dot { width: 7px; height: 7px; border-radius: 50%; background: #4b8b70; box-shadow: 0 0 0 3px rgba(75,139,112,.12); }
.sync-status.pending .sync-dot { background: var(--clay); }
.user-card { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: .65rem; border-top: 1px solid var(--line); padding: 1rem .35rem 0; }
.avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: #dbe7e1; color: var(--green-900); font-size: .68rem; font-weight: 850; }
.user-card strong, .user-card span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-card strong { font-size: .75rem; }
.user-card span { max-width: 130px; color: var(--muted); font-size: .64rem; margin-top: .15rem; }

.main { min-height: 100vh; margin-left: 248px; padding: 1.5rem clamp(1.2rem, 3.5vw, 3.5rem) 4rem; }
.topbar { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; }
.topbar h1 { margin-top: .2rem; font: 500 2rem/1 Georgia, serif; }
.topbar-actions { display: flex; align-items: center; gap: .6rem; }
.topbar-actions select { min-width: 170px; }
.view { display: grid; max-width: 1420px; margin: 0 auto; gap: 1rem; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .85rem; }
.metric-card { min-height: 122px; border: 1px solid var(--line); border-radius: .85rem; background: var(--paper); padding: 1.05rem 1.15rem; box-shadow: 0 5px 15px rgba(23,32,29,.025); }
.metric-card p { color: var(--muted); font-size: .72rem; font-weight: 700; }
.metric-card strong { display: block; margin: .7rem 0 .35rem; font: 500 1.9rem/1 Georgia, serif; letter-spacing: -.04em; }
.metric-card span { color: #86908c; font-size: .68rem; }
.hero-metric { border-color: var(--green-900); background: var(--green-900); color: #fff; }
.hero-metric p, .hero-metric span { color: #b9ccc5; }
.dashboard-grid { display: grid; grid-template-columns: minmax(360px, .9fr) 1.1fr; gap: 1rem; }
.card { border: 1px solid var(--line); border-radius: .9rem; background: var(--paper); padding: 1.2rem; box-shadow: 0 5px 18px rgba(23,32,29,.025); }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.card-head h2 { margin-top: .35rem; }
.pill { display: inline-flex; min-height: 26px; align-items: center; border-radius: 999px; background: var(--green-100); color: var(--green-700); padding: 0 .65rem; font-size: .67rem; font-weight: 850; }
.pill.running { background: #f1dfd4; color: #82472e; }
.quiet { color: var(--muted); font-size: .72rem; }
.elapsed { margin: .65rem 0 1rem; font: 500 clamp(2.7rem, 5vw, 4.2rem)/1 Georgia, serif; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.timer-form { display: grid; grid-template-columns: 1fr 1.5fr auto; gap: .55rem; }
.timer-form .danger { grid-column: 3; }
.week-chart { display: grid; height: 150px; grid-template-columns: repeat(7, 1fr); align-items: end; gap: .75rem; padding-top: .5rem; }
.chart-column { display: grid; height: 100%; grid-template-rows: 1fr auto; align-items: end; gap: .5rem; text-align: center; }
.chart-bar-wrap { display: flex; height: 100%; align-items: end; border-radius: .4rem; background: #f2f4f1; overflow: hidden; }
.chart-bar { width: 100%; min-height: 3px; background: var(--green-500); border-radius: .4rem .4rem 0 0; }
.h0 { height: 2%; } .h1 { height: 10%; } .h2 { height: 20%; } .h3 { height: 30%; } .h4 { height: 40%; }
.h5 { height: 50%; } .h6 { height: 60%; } .h7 { height: 70%; } .h8 { height: 80%; } .h9 { height: 90%; } .h10 { height: 100%; }
.chart-column.today .chart-bar { background: var(--clay); }
.chart-label { color: var(--muted); font-size: .64rem; font-weight: 750; }

.entry-table { display: grid; }
.entry-row { display: grid; grid-template-columns: minmax(170px, 1.4fr) minmax(150px, 1fr) 90px 95px auto; align-items: center; gap: .8rem; border-top: 1px solid #edf0ec; padding: .85rem .2rem; font-size: .77rem; }
.entry-row:first-child { border-top: 0; }
.entry-project { display: flex; min-width: 0; align-items: center; gap: .6rem; font-weight: 800; }
.entry-project::before { content: ""; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--green-500); }
.entry-note { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.entry-duration { font-weight: 800; font-variant-numeric: tabular-nums; }
.entry-actions { display: flex; justify-content: flex-end; gap: .35rem; }
.entry-actions button { min-height: 30px; border: 1px solid var(--line); border-radius: .45rem; background: #fff; color: var(--ink); padding: 0 .55rem; font-size: .66rem; font-weight: 750; }
.entry-actions button:hover { background: var(--soft); }
.status { width: fit-content; border-radius: 999px; background: #edf1ed; color: #65706c; padding: .3rem .55rem; font-size: .61rem; font-weight: 850; text-transform: capitalize; }
.status.approved { background: #dfece5; color: #356750; }
.status.submitted { background: #e2e8ef; color: #425f7c; }
.status.rejected { background: #f3e1dd; color: #964c40; }
.empty { display: grid; min-height: 120px; place-items: center; color: var(--muted); font-size: .78rem; text-align: center; }
.filter-row, .report-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.filter-row { margin-bottom: 1rem; }
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: .65rem; padding: .2rem; }
.segmented button { min-height: 34px; border: 0; border-radius: .45rem; background: transparent; color: var(--muted); padding: 0 .8rem; font-size: .7rem; font-weight: 750; }
.segmented button.active { background: var(--green-900); color: #fff; }
.report-toolbar { padding: .4rem 0; }
.report-toolbar h2 { margin-top: .35rem; font: 500 1.8rem Georgia, serif; }
.report-metrics { grid-template-columns: repeat(3, 1fr); }
.report-list, .member-list, .project-list { display: grid; }
.report-item, .member-item, .project-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; border-top: 1px solid #edf0ec; padding: .8rem 0; }
.report-item:first-child, .member-item:first-child, .project-item:first-child { border-top: 0; }
.report-item strong, .member-item strong, .project-item strong { display: block; font-size: .78rem; }
.report-item span, .member-item span, .project-item span { color: var(--muted); font-size: .68rem; }
.member-actions { display: flex; align-items: center; gap: .5rem; }
.member-actions select { min-width: 7rem; padding: .45rem .6rem; }
.report-bar { width: 160px; height: 5px; margin-top: .45rem; border-radius: 999px; background: var(--soft); overflow: hidden; }
.report-bar span { display: block; height: 100%; border-radius: 999px; background: var(--green-500); }
.w0 { width: 2%; } .w1 { width: 10%; } .w2 { width: 20%; } .w3 { width: 30%; } .w4 { width: 40%; }
.w5 { width: 50%; } .w6 { width: 60%; } .w7 { width: 70%; } .w8 { width: 80%; } .w9 { width: 90%; } .w10 { width: 100%; }
.two-panel { display: grid; grid-template-columns: 1.2fr .8fr; gap: 1rem; }
.invite-result { margin-top: 1rem; border-radius: .7rem; background: var(--soft); padding: .8rem; }
.invite-result p { margin-bottom: .6rem; color: var(--muted); font-size: .7rem; }
.invite-result div { display: flex; gap: .4rem; }
.body-copy { margin-bottom: 1.2rem; color: var(--muted); font-size: .8rem; line-height: 1.6; }
.billing-secondary { margin-left: .45rem; }

dialog { width: min(620px, calc(100% - 2rem)); border: 0; border-radius: 1rem; padding: 0; box-shadow: 0 30px 100px rgba(13,27,22,.3); }
dialog::backdrop { background: rgba(15,32,27,.5); backdrop-filter: blur(3px); }
.dialog-card { display: grid; gap: 1rem; padding: 1.3rem; }
.settings-divider { margin-top: 1.25rem; border-top: 1px solid var(--line); padding-top: 1.1rem; }
.sync-items { display: grid; gap: .7rem; max-height: 52vh; overflow: auto; }
.sync-item { display: grid; grid-template-columns: 1fr auto; gap: .8rem; align-items: center; border: 1px solid var(--line); border-radius: .75rem; padding: .85rem; }
.sync-item span { display: block; color: var(--muted); font-size: .72rem; margin-top: .25rem; }
.sync-item-actions { display: flex; gap: .45rem; }
.close-button { font-size: 1.5rem; }
.dialog-actions { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: .6rem; margin-top: .3rem; }
.toast { position: fixed; left: 50%; bottom: 1.4rem; z-index: 100; max-width: min(520px, calc(100% - 2rem)); transform: translateX(-50%); border-radius: .7rem; background: #142d27; color: #fff; padding: .8rem 1rem; box-shadow: var(--shadow); font-size: .77rem; }
.toast.error { background: #7f352d; }
.mobile-only { display: none; }

@media (max-width: 1100px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .entry-row { grid-template-columns: minmax(150px, 1fr) 110px 85px auto; }
  .entry-note { display: none; }
}

@media (max-width: 760px) {
  .auth-screen { grid-template-columns: 1fr; }
  .brand-panel { min-height: 42vh; padding: 1.5rem; }
  .brand-copy h1 { margin-top: .5rem; font-size: 2.7rem; }
  .brand-copy > p:last-child, .proof-list { display: none; }
  .auth-panel { min-height: 58vh; padding: 1.5rem; }
  .sidebar { transform: translateX(-102%); transition: transform .2s ease; }
  .sidebar.open { transform: translateX(0); box-shadow: 20px 0 50px rgba(0,0,0,.18); }
  .mobile-only { display: block; }
  .main { margin-left: 0; padding: .8rem .8rem 3rem; }
  .topbar { min-height: 64px; margin-bottom: 1rem; }
  .topbar h1 { font-size: 1.5rem; }
  .topbar-actions select { width: 116px; min-width: 0; }
  .topbar-actions .secondary { width: 42px; overflow: hidden; padding: 0; color: transparent; position: relative; }
  .topbar-actions .secondary::after { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink); font-size: 1.2rem; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: .55rem; }
  .metric-card { min-height: 105px; padding: .85rem; }
  .metric-card strong { font-size: 1.45rem; }
  .timer-form { grid-template-columns: 1fr; }
  .timer-form .danger { grid-column: 1; }
  .two-panel, .report-metrics { grid-template-columns: 1fr; }
  .entry-row { grid-template-columns: minmax(120px, 1fr) 80px auto; }
  .entry-row .status { display: none; }
  .entry-actions button { padding: 0 .4rem; }
  .field-pair { grid-template-columns: 1fr; }
  .filter-row { align-items: stretch; flex-direction: column; }
  .segmented { display: grid; grid-template-columns: repeat(3, 1fr); }
  .week-chart { gap: .4rem; }
  .dialog-actions { grid-template-columns: 1fr 1fr; }
  .dialog-actions span { display: none; }
}