:root {
  --bg: #f7f8fb;
  --surface: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --line: #e6e9ef;
  --yellow: #ffb900;
  --yellow-soft: #fff5d6;
  --blue: #0877f9;
  --blue-soft: #eef6ff;
  --danger: #e31b23;
  --shadow: 0 12px 35px rgba(17, 24, 39, .08);
  --radius-xl: 26px;
  --radius-lg: 20px;
  --radius-md: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Noto Sans Thai", "Segoe UI", Tahoma, sans-serif;
}

* { box-sizing: border-box; }
html { background: #eef1f5; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: var(--bg);
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }

.app-shell {
  width: min(100%, 760px);
  min-height: 100vh;
  margin: 0 auto;
  background: var(--bg);
  position: relative;
  padding: max(18px, env(safe-area-inset-top)) 18px calc(106px + env(safe-area-inset-bottom));
}

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.title-block h1 {
  margin: 0;
  font-size: clamp(31px, 8vw, 44px);
  line-height: 1.08;
  letter-spacing: -.9px;
}
.title-block p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 20px;
}
.icon-button {
  width: 52px;
  height: 52px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 16px;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 20px rgba(17,24,39,.04);
}
.icon-button svg { width: 25px; height: 25px; }

.availability {
  background:
    radial-gradient(circle at 12% 18%, rgba(255,185,0,.14), transparent 35%),
    linear-gradient(135deg, #fffdf7, #fffaf0);
  border-radius: var(--radius-xl);
  padding: 22px;
  box-shadow: var(--shadow);
  margin-bottom: 18px;
}
.availability-head {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
}
.big-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--yellow);
  color: #fff;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.big-icon svg { width: 31px; height: 31px; }
.brand-chip {
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  padding: 4px 14px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 15px;
  white-space: nowrap;
}
.brand-chip.yellow { background: var(--yellow); color: #111; }
.brand-chip.blue { background: var(--blue); color: white; }
.shared-label { font-weight: 750; margin-left: 2px; }

.availability-body {
  display: grid;
  grid-template-columns: 1fr 1px minmax(170px, .7fr);
  gap: 22px;
  align-items: stretch;
  margin: 22px 0 0 70px;
}
.section-label { margin: 0 0 9px; font-weight: 800; font-size: 18px; }
.slot-list { display: grid; gap: 7px; }
.slot {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 19px;
  font-weight: 650;
}
.slot-dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--yellow); flex: 0 0 auto;
}
.slot-more { color: var(--muted); font-size: 14px; margin-top: 4px; }
.vline { background: #dfe3e8; }
.lunch {
  background: rgba(255, 246, 220, .9);
  border-radius: 18px;
  padding: 16px;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  align-content: center;
}
.lunch svg { width: 31px; height: 31px; }
.lunch strong { display:block; font-size:17px; }
.lunch span { display:block; margin-top: 2px; }
.lunch small { display:block; color:var(--muted); margin-top:5px; }

.date-bar {
  display: grid;
  grid-template-columns: 50px 1fr 50px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  min-height: 70px;
  padding: 0 5px;
  margin-bottom: 18px;
}
.date-nav {
  border: 0; background: transparent; height: 55px;
  display: grid; place-items: center;
}
.date-nav svg { width: 28px; height: 28px; }
.date-main {
  border: 0;
  background: transparent;
  font-weight: 800;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
}
.date-main svg { width: 23px; height: 23px; }

.list-head {
  display: flex; justify-content: space-between; align-items: center;
  margin: 8px 2px 10px;
}
.list-head h2 { margin: 0; font-size: 22px; }
.filter-wrap { display:flex; align-items:center; gap:8px; }
.filter-select {
  border: 0; background: transparent; color: #374151;
  font-size: 15px; padding: 8px 4px;
}

.meeting-list { display: grid; gap: 10px; }
.meeting-card {
  width: 100%;
  position: relative;
  border: 1px solid var(--line);
  border-left: 6px solid var(--brand);
  background: var(--card-bg);
  border-radius: 18px;
  padding: 14px 16px 13px 82px;
  text-align: left;
  min-height: 142px;
  box-shadow: 0 5px 16px rgba(17,24,39,.035);
}
.meeting-card:hover { transform: translateY(-1px); }
.card-icon {
  position: absolute;
  left: 18px;
  top: 20px;
  width: 48px; height:48px; border-radius:50%;
  background: var(--brand); color:white;
  display:grid; place-items:center;
}
.card-icon svg { width:27px; height:27px; }
.card-kebab {
  position: absolute; right: 12px; top: 9px;
  border:0; background:transparent; padding:8px;
}
.card-kebab svg { width:21px; height:21px; }
.card-title {
  margin: 0 36px 4px 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}
.card-row {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
}
.time-block { min-width: 0; }
.time-line {
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
}
.time-line strong { font-size: 30px; line-height:1; letter-spacing:.3px; }
.duration { color:#374151; font-size:14px; }
.owner { margin-top:8px; color:#374151; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.customer {
  font-size: 28px; font-weight: 900; white-space: nowrap;
  margin-right: 8px;
}
.empty {
  text-align:center; padding: 38px 18px;
  background:white; border:1px dashed #d7dce3; border-radius:18px; color:var(--muted);
}

.fab {
  position: fixed;
  right: max(18px, calc((100vw - 760px)/2 + 18px));
  bottom: calc(80px + env(safe-area-inset-bottom));
  width: 72px; height:72px;
  border:0; border-radius:21px;
  background: var(--blue); color:white;
  box-shadow: 0 14px 30px rgba(8,119,249,.35);
  z-index: 20;
  display:grid; place-items:center;
}
.fab svg { width:35px; height:35px; }

.bottom-nav {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: 0;
  width: min(100%, 760px);
  height: calc(72px + env(safe-area-inset-bottom));
  padding: 8px 14px env(safe-area-inset-bottom);
  display:grid; grid-template-columns:repeat(4,1fr);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(16px);
  border-top:1px solid var(--line);
  z-index:15;
}
.nav-item {
  border:0; background:transparent; color:#8b9098;
  display:grid; place-items:center; gap:2px;
  font-size:12px;
}
.nav-item svg { width:25px; height:25px; }
.nav-item.active { color:var(--blue); font-weight:750; }

.detail-header {
  display:grid; grid-template-columns:52px 1fr 52px; align-items:center;
  margin-bottom:20px;
}
.detail-header h1 { text-align:center; font-size:25px; margin:0; }
.back-btn { border:0; background:transparent; padding:10px; }
.back-btn svg { width:29px; height:29px; }

.hero-card {
  border:1px solid #f4d789;
  background: linear-gradient(130deg, #fffefa, #fff8e9);
  border-radius:22px;
  padding:23px;
  box-shadow:var(--shadow);
  margin-bottom:18px;
}
.hero-grid {
  display:grid; grid-template-columns:1fr minmax(150px, 32%);
  gap:18px; align-items:stretch;
}
.hero-card h2 { font-size:clamp(25px,7vw,38px); margin:20px 0 14px; line-height:1.18; }
.hero-time { font-size:clamp(37px,10vw,58px); font-weight:900; white-space:nowrap; line-height:1; }
.hero-duration { color:var(--muted); font-size:18px; font-weight:700; margin-top:14px; }
.hero-customer {
  display:grid; place-items:center; text-align:center;
  background:#ffda78; min-height:205px;
  font-size:clamp(30px,7vw,46px); font-weight:900;
}

.detail-stack { display:grid; gap:10px; }
.info-card {
  background:white; border:1px solid var(--line); border-radius:17px;
  padding:17px; display:grid;
  grid-template-columns:52px minmax(140px,.75fr) 1.5fr; gap:13px; align-items:center;
}
.info-icon {
  width:45px; height:45px; border-radius:50%; display:grid; place-items:center;
  color:#a96d00; background:#fff8e8;
}
.info-icon svg { width:25px; height:25px; }
.info-label { font-weight:800; }
.info-content { line-height:1.55; min-width:0; }
.info-content .muted { color:var(--muted); }
.meet-box {
  border:1px solid var(--line); border-radius:12px; padding:10px 12px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  overflow:hidden;
}
.meet-box a { color:#194a8d; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.copy-btn { border:0; background:transparent; padding:6px; }
.summary-text { white-space:pre-wrap; }
.task-list { display:grid; gap:10px; }
.task-item { display:grid; grid-template-columns:25px 1fr auto; gap:10px; align-items:start; }
.task-item input { width:20px; height:20px; accent-color:var(--yellow); margin-top:2px; }
.task-item.done .task-title { text-decoration:line-through; color:var(--muted); }
.task-due { color:#77808f; font-size:13px; white-space:nowrap; }
.action-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px; }
.action-btn {
  min-height:59px; border-radius:14px; font-weight:850; font-size:18px;
  display:flex; align-items:center; justify-content:center; gap:9px;
}
.action-btn svg { width:24px; height:24px; }
.action-btn.edit { border:2px solid var(--yellow); color:#d88b00; background:white; }
.action-btn.delete { border:0; color:white; background:var(--danger); }

.placeholder {
  min-height:70vh; display:grid; place-items:center; text-align:center; color:var(--muted);
}
.placeholder h2 { color:var(--text); margin-bottom:6px; }

.modal-backdrop {
  position:fixed; inset:0; background:rgba(17,24,39,.48);
  display:grid; place-items:end center; z-index:100;
}
.modal {
  width:min(100%,760px); max-height:92vh; overflow:auto;
  background:white; border-radius:26px 26px 0 0;
  padding:20px 18px calc(24px + env(safe-area-inset-bottom));
  box-shadow:0 -20px 50px rgba(17,24,39,.2);
}
.modal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; }
.modal-head h2 { margin:0; font-size:24px; }
.close-btn { width:42px; height:42px; border:0; border-radius:50%; background:#f1f3f6; font-size:25px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.field { display:grid; gap:6px; }
.field.full { grid-column:1/-1; }
.field label { font-size:14px; font-weight:750; }
.field input, .field select, .field textarea {
  width:100%; border:1px solid #d8dde5; border-radius:12px;
  padding:12px 13px; background:#fff; outline:none;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color:var(--blue); box-shadow:0 0 0 3px rgba(8,119,249,.12);
}
.field textarea { min-height:92px; resize:vertical; }
.help { font-size:12px; color:var(--muted); }
.form-error {
  display:none; background:#fff0f0; color:#b42318; border:1px solid #ffcccc;
  border-radius:12px; padding:10px 12px; margin:13px 0 0;
}
.form-error.show { display:block; }
.submit-btn {
  width:100%; min-height:56px; margin-top:15px; border:0;
  border-radius:14px; background:var(--blue); color:white;
  font-size:18px; font-weight:850;
}
.toast {
  position:fixed; left:50%; bottom:95px; transform:translate(-50%,20px);
  background:#111827; color:white; padding:10px 15px; border-radius:999px;
  opacity:0; pointer-events:none; transition:.25s; z-index:200;
  max-width:calc(100vw - 32px); text-align:center;
}
.toast.show { opacity:1; transform:translate(-50%,0); }

@media (max-width: 620px) {
  .app-shell { padding-left:12px; padding-right:12px; }
  .availability { padding:18px 15px; }
  .availability-body { margin-left:0; grid-template-columns:1fr; gap:14px; }
  .vline { height:1px; }
  .lunch { grid-template-columns:34px 1fr; }
  .meeting-card { padding-left:73px; min-height:136px; }
  .card-icon { left:14px; width:45px; height:45px; }
  .card-row { align-items:flex-start; }
  .customer { font-size:22px; }
  .time-line strong { font-size:27px; }
  .hero-grid { grid-template-columns:1fr; }
  .hero-customer { min-height:120px; }
  .info-card { grid-template-columns:44px 1fr; }
  .info-content { grid-column:2; }
  .form-grid { grid-template-columns:1fr; }
  .field.full { grid-column:auto; }
}

/* ===== Analytics, report and settings pages ===== */
.page-title-row {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin:8px 4px 26px;
}
.page-title-row h1 {
  margin:0;
  font-size:clamp(36px,9vw,52px);
  line-height:1.05;
  letter-spacing:-1.2px;
}
.page-title-row p {
  margin:10px 0 0;
  color:#687386;
  font-size:clamp(18px,4vw,24px);
}
.brand-strokes { display:flex; gap:8px; margin-top:21px; }
.brand-strokes i { display:block; width:43px; height:10px; border-radius:999px; background:var(--yellow); }
.brand-strokes i:last-child { background:var(--blue); }
.section-title { margin:30px 4px 12px; font-size:26px; letter-spacing:-.4px; }

.analytics-shell,
.settings-shell,
.report-shell { background:linear-gradient(145deg,#fff 0%,#fafcff 45%,#f4f8ff 100%); }

.week-selector {
  display:grid;
  grid-template-columns:55px 1fr 55px;
  align-items:center;
  min-height:70px;
  border:1px solid #dde4ee;
  border-radius:19px;
  background:#fff;
  box-shadow:0 8px 25px rgba(17,24,39,.06);
  margin-bottom:24px;
}
.week-selector button { border:0; background:transparent; display:grid; place-items:center; color:var(--blue); }
.week-selector svg { width:28px; height:28px; }
.week-selector strong { text-align:center; font-size:20px; }
.metric-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.metric-card {
  min-height:210px;
  border:1px solid #dde4ee;
  border-radius:22px;
  background:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:18px 12px;
  box-shadow:0 10px 28px rgba(17,24,39,.07);
}
.metric-icon {
  width:60px;
  height:60px;
  border-radius:50%;
  display:grid;
  place-items:center;
  margin-bottom:15px;
}
.metric-icon svg { width:34px; height:34px; }
.metric-card.blue .metric-icon { color:var(--blue); background:#eaf3ff; }
.metric-card.yellow .metric-icon { color:#f2a900; background:#fff7df; }
.metric-label { color:#5f697a; font-size:17px; min-height:45px; display:grid; place-items:center; }
.metric-card strong { font-size:28px; line-height:1.15; }
.metric-card span { color:#677386; margin-top:5px; }

.chart-card,
.company-card,
.insight-card,
.report-card,
.settings-card,
.profile-card {
  background:#fff;
  border:1px solid #dde4ee;
  border-radius:22px;
  box-shadow:0 10px 30px rgba(17,24,39,.07);
}
.chart-card { position:relative; padding:28px 22px 20px; min-height:380px; }
.chart-y-label { color:#647084; font-size:14px; margin-bottom:8px; }
.weekly-chart {
  height:260px;
  border-bottom:1px solid #dfe5ec;
  background:repeating-linear-gradient(to top, transparent 0 64px, #e7ebf0 65px 66px);
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:12px;
  align-items:end;
  padding:8px 4px 0;
}
.day-column { height:100%; display:grid; grid-template-rows:1fr 30px; align-items:end; text-align:center; }
.bar-pair { height:100%; display:flex; align-items:flex-end; justify-content:center; gap:5px; }
.bar { display:block; width:min(28px,38%); min-height:3px; border-radius:7px 7px 0 0; box-shadow:0 4px 10px rgba(17,24,39,.1); }
.yellow-bar { background:linear-gradient(#ffc62a,#ffae00); }
.blue-bar { background:linear-gradient(#1781ff,#0069ed); }
.day-column > span { color:#394151; font-size:15px; align-self:end; }
.chart-legend { display:flex; justify-content:center; gap:28px; margin-top:19px; color:#657083; }
.chart-legend span { display:flex; align-items:center; gap:9px; }
.legend-dot { width:16px; height:16px; border-radius:5px; display:inline-block; }
.yellow-dot { background:var(--yellow); }
.blue-dot { background:var(--blue); }

.company-card { overflow:hidden; }
.company-row {
  width:100%;
  display:grid;
  grid-template-columns:58px 1fr minmax(120px,.42fr) 24px;
  gap:13px;
  align-items:center;
  min-height:112px;
  padding:16px 20px;
  border:0;
  background:#fff;
  text-align:left;
}
.company-row + .company-row { border-top:1px solid #e3e8ef; }
.company-row > svg { width:25px; height:25px; color:var(--blue); }
.company-logo { width:58px; height:58px; border-radius:15px; display:grid; place-items:center; font-size:24px; }
.company-logo.yellow { color:#e39b00; background:#fff3cc; }
.company-logo.blue { color:#086de6; background:#e9f2ff; }
.company-main { min-width:0; display:grid; gap:16px; }
.company-main strong { font-size:20px; }
.company-progress { display:block; height:8px; border-radius:99px; background:#e9edf3; overflow:hidden; }
.company-progress b { display:block; height:100%; border-radius:99px; }
.company-stats { display:grid; grid-template-columns:1fr auto; gap:7px 12px; align-items:center; }
.company-stats mark { background:#fff3cc; border-radius:9px; padding:5px 10px; white-space:nowrap; }
.company-stats small { font-size:16px; color:#202838; white-space:nowrap; }
.company-stats em { grid-column:2; color:#657083; font-style:normal; font-size:17px; }
.insight-card { display:flex; align-items:center; gap:18px; padding:18px 22px; background:linear-gradient(100deg,#eef6ff,#f9fbff); }
.insight-icon { width:62px; height:62px; border-radius:50%; background:#e3efff; color:var(--blue); display:grid; place-items:center; flex:0 0 auto; }
.insight-icon svg { width:35px; height:35px; }
.insight-card strong { display:block; font-size:18px; }
.insight-card span { display:block; color:#687386; margin-top:8px; }

/* Report */
.report-shell { overflow:hidden; }
.report-ribbon {
  height:110px;
  margin:-18px -18px 6px;
  background:linear-gradient(120deg,#0a71f4 0 65%,#ffbd00 65% 100%);
  position:relative;
  border-bottom-right-radius:150px 90px;
}
.report-ribbon:after {
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:68%;
  height:32px;
  background:rgba(255,255,255,.22);
  border-top-right-radius:70px;
}
.report-ribbon span { position:absolute; right:42px; top:22px; color:white; width:62px; height:62px; border:7px solid white; border-radius:50%; display:grid; place-items:center; z-index:2; }
.report-ribbon svg { width:32px; height:32px; }
.report-week {
  width:100%;
  min-height:76px;
  display:grid;
  grid-template-columns:38px 1fr 30px;
  align-items:center;
  gap:16px;
  border:2px solid #cfdcf0;
  border-radius:20px;
  color:#114d9f;
  background:white;
  padding:0 24px;
  margin:8px 0 25px;
  text-align:left;
}
.report-week svg { width:28px; height:28px; }
.report-week strong { font-size:21px; }
.report-card { padding:24px 27px; margin-bottom:20px; }
.report-card h2 { margin:0 0 24px; color:#075acb; font-size:25px; }
.report-kpis { display:grid; grid-template-columns:repeat(3,1fr); }
.report-kpis > div { min-height:145px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:4px 16px; }
.report-kpis > div + div { border-left:1px solid #dce2ea; }
.report-kpis svg { width:39px; height:39px; color:#075acb; margin-bottom:9px; }
.report-kpis span { color:#667184; }
.report-kpis strong { color:#075acb; font-size:34px; margin-top:8px; line-height:1.15; }
.report-kpis small { font-size:15px; font-weight:500; color:#3c4656; }
.donut-wrap { display:grid; grid-template-columns:230px 1fr; gap:30px; align-items:center; }
.donut { width:205px; height:205px; border-radius:50%; display:grid; place-items:center; }
.donut i { width:105px; height:105px; border-radius:50%; background:white; box-shadow:inset 0 0 0 1px #edf0f4; }
.status-list { display:grid; gap:0; }
.status-list > div { display:grid; grid-template-columns:18px 1fr auto; align-items:center; gap:13px; padding:18px 0; border-bottom:1px solid #e2e7ed; }
.status-list > div:last-child { border-bottom:0; }
.status-dot { width:15px; height:15px; border-radius:50%; }
.status-dot.done { background:#28b867; }
.status-dot.progress { background:#ffbd00; }
.status-dot.overdue { background:#ef4335; }
.status-list strong { font-size:27px; }
.status-list > div:nth-child(1) strong { color:#28b867; }
.status-list > div:nth-child(2) strong { color:#ffbd00; }
.status-list > div:nth-child(3) strong { color:#ef4335; }
.trend-layout { display:grid; grid-template-columns:200px 1fr; gap:30px; align-items:center; min-height:220px; }
.trend-copy span { display:block; color:#5f697a; font-size:18px; }
.trend-copy strong { display:block; font-size:54px; margin-top:15px; }
.trend-copy strong.good { color:#24ad61; }
.trend-copy strong.warn { color:#ef8c00; }
.trend-chart { height:210px; display:flex; align-items:flex-end; justify-content:center; gap:34px; border-bottom:1px solid #dce3eb; position:relative; }
.trend-chart:before { content:"ชั่วโมง"; position:absolute; top:0; left:0; color:#697485; font-size:13px; }
.trend-bar { height:100%; width:105px; display:grid; grid-template-rows:30px 1fr 35px; align-items:end; text-align:center; }
.trend-bar > i { display:block; width:76px; justify-self:center; border-radius:7px 7px 0 0; }
.yellow-trend { background:linear-gradient(#ffcb35,#ffb000); }
.blue-trend { background:linear-gradient(#2689ff,#086bea); }
.trend-bar span { font-size:13px; color:#303847; }
.trend-bar small { align-self:center; white-space:nowrap; color:#5f697a; }
.trend-line { position:absolute; top:47px; left:38%; width:25%; border-top:2px dashed var(--blue); transform:rotate(10deg); transform-origin:left; }
.report-actions { display:grid; gap:15px; margin:28px 0 12px; }
.primary-report-btn,
.secondary-report-btn { min-height:67px; border-radius:18px; display:flex; align-items:center; justify-content:center; gap:13px; font-size:21px; font-weight:800; }
.primary-report-btn { color:white; background:linear-gradient(90deg,#136ff3,#0758d9); border:0; box-shadow:0 12px 28px rgba(8,102,232,.25); }
.secondary-report-btn { color:#efa600; background:white; border:2px solid #f6b400; }
.primary-report-btn svg,
.secondary-report-btn svg { width:30px; height:30px; }

/* Settings */
.profile-card {
  width:100%;
  min-height:154px;
  display:grid;
  grid-template-columns:110px 1fr 32px;
  gap:22px;
  align-items:center;
  padding:22px 27px;
  text-align:left;
  border:1px solid #d9e0ea;
}
.profile-card > svg { width:28px; height:28px; color:var(--blue); }
.profile-avatar { width:110px; height:110px; border-radius:50%; display:grid; place-items:center; color:var(--blue); background:radial-gradient(circle at 40% 30%,#fff,#e4efff); }
.profile-avatar svg { width:65px; height:65px; }
.profile-card strong { display:block; font-size:29px; }
.profile-card span { display:block; margin-top:9px; color:#5f6b7d; font-size:20px; }
.settings-card { overflow:hidden; }
.settings-row {
  min-height:103px;
  display:grid;
  grid-template-columns:62px 1fr auto 28px;
  gap:18px;
  align-items:center;
  padding:16px 25px;
  cursor:pointer;
}
.settings-row + .settings-row { border-top:1px solid #e2e7ee; }
.settings-icon { width:54px; height:54px; border-radius:50%; color:#f0aa00; background:#fff8e6; display:grid; place-items:center; }
.settings-icon svg { width:31px; height:31px; }
.settings-label { font-size:21px; color:#152033; text-align:left; }
button.settings-label { border:0; background:transparent; padding:0; }
.settings-value { background:#fff2c8; padding:6px 12px; border-radius:10px; font-size:18px; white-space:nowrap; }
.settings-row > svg { width:26px; height:26px; color:var(--blue); }
.settings-row.danger .settings-icon,
.settings-row.danger .settings-label { color:#ef2e2e; }
.settings-row.danger .settings-icon { background:#fff; }
.toggle {
  grid-column:3/5;
  width:72px;
  height:42px;
  border:0;
  border-radius:999px;
  background:#d4dae3;
  padding:4px;
  transition:.2s;
}
.toggle i { display:block; width:34px; height:34px; border-radius:50%; background:white; box-shadow:0 2px 8px rgba(0,0,0,.2); transition:.2s; }
.toggle.on { background:var(--blue); }
.toggle.on i { transform:translateX(30px); }
.reminder-value { margin-left:auto; }
.compact-modal { max-width:610px; border-radius:26px; margin-bottom:18px; }

.bottom-nav .nav-item.active { background:#eaf3ff; border-radius:22px; }

@media (max-width: 620px) {
  .page-title-row h1 { font-size:39px; }
  .metric-grid { gap:9px; }
  .metric-card { min-height:170px; padding:12px 6px; border-radius:18px; }
  .metric-icon { width:48px; height:48px; }
  .metric-icon svg { width:28px; height:28px; }
  .metric-label { font-size:14px; min-height:40px; }
  .metric-card strong { font-size:20px; }
  .metric-card span { font-size:13px; }
  .chart-card { padding:20px 10px 16px; min-height:340px; }
  .weekly-chart { gap:5px; height:230px; }
  .bar-pair { gap:2px; }
  .bar { width:12px; }
  .company-row { grid-template-columns:47px 1fr 100px 20px; padding:13px 12px; gap:9px; }
  .company-logo { width:47px; height:47px; font-size:20px; }
  .company-main strong { font-size:17px; }
  .company-stats mark { font-size:12px; padding:4px 6px; }
  .company-stats small,.company-stats em { font-size:13px; }
  .report-ribbon { margin-left:-12px; margin-right:-12px; height:90px; }
  .report-card { padding:20px 15px; }
  .report-kpis > div { padding:3px 8px; min-height:120px; }
  .report-kpis svg { width:31px; height:31px; }
  .report-kpis strong { font-size:25px; }
  .report-kpis span { font-size:13px; }
  .donut-wrap { grid-template-columns:140px 1fr; gap:15px; }
  .donut { width:135px; height:135px; }
  .donut i { width:67px; height:67px; }
  .status-list > div { padding:11px 0; gap:8px; }
  .status-list strong { font-size:21px; }
  .trend-layout { grid-template-columns:125px 1fr; gap:10px; }
  .trend-copy strong { font-size:40px; }
  .trend-chart { gap:8px; }
  .trend-bar { width:74px; }
  .trend-bar > i { width:55px; }
  .trend-line { left:35%; width:31%; }
  .profile-card { grid-template-columns:82px 1fr 24px; min-height:125px; padding:18px; gap:15px; }
  .profile-avatar { width:82px; height:82px; }
  .profile-avatar svg { width:50px; height:50px; }
  .profile-card strong { font-size:24px; }
  .profile-card span { font-size:16px; }
  .settings-row { min-height:86px; grid-template-columns:50px 1fr auto 22px; padding:13px 17px; gap:11px; }
  .settings-icon { width:45px; height:45px; }
  .settings-icon svg { width:26px; height:26px; }
  .settings-label { font-size:17px; }
  .settings-value { font-size:15px; padding:5px 8px; }
  .toggle { width:62px; height:38px; }
  .toggle i { width:30px; height:30px; }
  .toggle.on i { transform:translateX(24px); }
}

@media print {
  body.printing-report { background:white; }
  body.printing-report .bottom-nav,
  body.printing-report .report-actions,
  body.printing-report .report-week { display:none !important; }
  body.printing-report .app-shell { width:100%; max-width:none; padding:15mm; background:white; }
  body.printing-report .report-ribbon { margin:-15mm -15mm 8mm; }
  body.printing-report .report-card { break-inside:avoid; box-shadow:none; }
}
/* Supabase email authentication */
.auth-shell{min-height:100dvh;display:grid;place-items:center;padding:24px;background:linear-gradient(160deg,#f4f9ff,#fffdfa)}
.auth-card{width:min(100%,430px);background:#fff;border:1px solid #e8edf3;border-radius:24px;padding:28px;box-shadow:0 18px 50px rgba(21,42,70,.12)}
.auth-card h1{margin:0 0 6px;font-size:30px}.auth-card>p{margin:0 0 24px;color:#667085}
.auth-card .field{margin-bottom:14px}.auth-card .field input{width:100%}
.secondary-btn{width:100%;margin-top:10px;border:1px solid #d0d5dd;background:#fff;border-radius:12px;padding:13px;font-weight:700;color:#344054}