/* ============================================================
   OfficeDeskOS — Technician Mobile Experience
   Phone + tablet only. Desktop (>1024px) is untouched.
   Priorities: 1) Morning job list  2) Estimate builder hero
               3) Payment-first closeout
   Vibe: clean & professional, light backgrounds, navy/red brand.
   ============================================================ */

@media (max-width: 1024px) {

/* ---------- design tokens ---------- */
.tech-home,
#eb,
body[class*="job"] {
  --tm-navy: #1e3a5f;    /* Phase 1: Bow Tie brand navy */
  --tm-red: #c0272d;     /* Phase 1: Bow Tie brand red */
  --tm-red-dark: #c42b32; /* Phase 1: darkened hover shade */
  --tm-bg: #f5f6f8;
  --tm-card: #ffffff;
  --tm-ink: #1e3a5f;
  --tm-mut: #667085;
  --tm-line: #e6e9ef;
  --tm-green: #12805c;
  --tm-green-bg: #e2f4eb;
  --tm-amber: #a86a12;
  --tm-amber-bg: #fdf1dc;
  --tm-blue: #1e5aa8;
  --tm-blue-bg: #e4eefc;
  --tm-shadow: 0 1px 2px rgba(16,24,40,.06), 0 4px 14px rgba(16,24,40,.07);
  --tm-radius: 14px;
}

/* ============================================================
   1) MORNING — Today's job list (index.php / My Day)
   ============================================================ */

/* Page canvas: light, airy */
.tech-home {
  background: var(--tm-bg) !important;
  padding: 0 14px 96px !important;
  max-width: 760px;
  margin: 0 auto;
}

/* Header: slim navy bar, white text — the ONLY dark element */
.tech-home .hm-head {
  background: var(--tm-navy) !important;
  color: #fff !important;
  margin: 0 -14px 16px !important;
  padding: 18px 16px 14px !important;
  border-radius: 0 !important;
  position: sticky;
  top: 0;
  z-index: 40;
}
.tech-home .hm-head .hm-logo { filter: brightness(0) invert(1); }
.tech-home .hm-head h1,
.tech-home .hm-head .hm-role {
  color: #fff !important;
}
.tech-home .hm-head .hm-sub,
.tech-home .hm-head .muted {
  color: rgba(255,255,255,.68) !important;
}

/* Sections: generous rhythm */
.tech-home .hm-sec {
  margin: 0 0 18px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.tech-home .hm-sec-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 4px 2px 10px !important;
  padding: 0 !important;
  border: none !important;
}
.tech-home .hm-sec-h h2 {
  font-size: 13px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tm-mut) !important;
  margin: 0 !important;
}
.tech-home .hm-sec-h .hm-count {
  background: var(--tm-navy) !important;
  color: #fff !important;
  font-size: 12px !important;
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  margin-left: 6px;
  vertical-align: 1px;
}
.tech-home .hm-sec-h a {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--tm-red) !important;
  text-decoration: none !important;
}
.tech-home .hm-sec-h .hm-sub {
  font-size: 13px !important;
  color: var(--tm-mut) !important;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

/* "Now / Next" hero job card — the day's focus */
.tech-home .hm-next {
  background: var(--tm-card) !important;
  border-radius: 18px !important;
  box-shadow: var(--tm-shadow) !important;
  padding: 18px !important;
  margin-bottom: 12px !important;
  border: 1px solid var(--tm-line) !important;
  border-top: 4px solid var(--tm-green) !important;
}
.tech-home .hm-next.is-active { border-top-color: var(--tm-blue) !important; }
.tech-home .hm-next-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px !important;
}
.tech-home .hm-tag {
  background: var(--tm-green-bg) !important;
  color: var(--tm-green) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 10px !important;
  border-radius: 999px !important;
}
.tech-home .hm-win.big {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--tm-ink) !important;
}
.tech-home .hm-next-main {
  display: block !important;
  text-decoration: none !important;
  color: var(--tm-ink) !important;
  margin-bottom: 6px !important;
}
.tech-home .hm-next-main strong {
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  display: block;
}
.tech-home .hm-next-main span {
  font-size: 14px !important;
  color: var(--tm-mut) !important;
}
.tech-home .hm-addr {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-size: 14px !important;
  color: var(--tm-blue) !important;
  text-decoration: none !important;
  margin: 4px 0 10px !important;
}
.tech-home .hm-here {
  font-size: 14px !important;
  color: var(--tm-ink) !important;
  background: var(--tm-blue-bg) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  margin: 8px 0 !important;
}
.tech-home .hm-actions {
  display: flex !important;
  gap: 10px !important;
  margin-top: 12px !important;
}
.tech-home .hm-actions .btn,
.tech-home .hm-actions .btn-block {
  flex: 1 !important;
  min-height: 52px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: var(--tm-red) !important;
  color: #fff !important;
  border: none !important;
  text-decoration: none !important;
}
.tech-home .hm-actions .btn:active { background: var(--tm-red-dark) !important; }
.tech-home .hm-actions .btn-ghost.hm-nav {
  flex: 1 !important;
  background: #fff !important;
  color: var(--tm-navy) !important;
  border: 2px solid var(--tm-line) !important;
}

/* Job rows: big touch targets, scannable */
.tech-home .hm-rows { display: flex; flex-direction: column; gap: 8px !important; }
.tech-home .hm-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: var(--tm-card) !important;
  border: 1px solid var(--tm-line) !important;
  border-radius: var(--tm-radius) !important;
  box-shadow: 0 1px 2px rgba(16,24,40,.04) !important;
  padding: 14px !important;
  min-height: 72px !important;
  text-decoration: none !important;
  color: var(--tm-ink) !important;
}
.tech-home .hm-row:active { background: #f0f2f5 !important; }
.tech-home .hm-row::after {
  content: "›";
  font-size: 22px;
  font-weight: 700;
  color: #b6bdc9;
  margin-left: auto;
  flex: none;
}
.tech-home .hm-win {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--tm-navy) !important;
  min-width: 78px;
  flex: none;
}
.tech-home .hm-row-main { flex: 1; min-width: 0; }
.tech-home .hm-row-main strong {
  display: block !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tech-home .hm-row-main small {
  display: block !important;
  font-size: 13px !important;
  color: var(--tm-mut) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tech-home .hm-row .badge,
.tech-home .hm-row .hm-tag {
  flex: none;
  font-size: 11px !important;
}

/* Action-needed items: amber left edge, still light */
.tech-home .hm-attn-list { display: flex; flex-direction: column; gap: 8px !important; }
.tech-home .hm-attn-item {
  background: var(--tm-card) !important;
  border: 1px solid var(--tm-line) !important;
  border-left: 4px solid var(--tm-amber) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  box-shadow: 0 1px 2px rgba(16,24,40,.04) !important;
}
.tech-home .hm-attn-btn {
  min-height: 48px !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

/* Up-next strip */
.tech-home .hm-upnext {
  background: var(--tm-card) !important;
  border: 1px solid var(--tm-line) !important;
  border-radius: var(--tm-radius) !important;
  box-shadow: var(--tm-shadow) !important;
  padding: 16px !important;
}
.tech-home .hm-nextline { font-size: 14px !important; color: var(--tm-mut) !important; }

/* Empty states: calm, not shouty */
.tech-home .hm-empty {
  text-align: center !important;
  color: var(--tm-mut) !important;
  font-size: 15px !important;
  padding: 28px 16px !important;
  background: var(--tm-card) !important;
  border: 1px dashed var(--tm-line) !important;
  border-radius: var(--tm-radius) !important;
}

/* Week strip: light pills */
.tech-home .hm-week-grid { gap: 8px !important; }
.tech-home .hm-week-grid > * {
  background: var(--tm-card) !important;
  border: 1px solid var(--tm-line) !important;
  border-radius: 10px !important;
  padding: 10px 6px !important;
  text-align: center !important;
  font-size: 12px !important;
}

/* Collapse buttons: subtle */
.tech-home .hm-collapse-btn {
  background: none !important;
  border: none !important;
  color: var(--tm-mut) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 6px !important;
}

/* ============================================================
   2) ON JOB — Estimate builder is the hero (estimate.php)
   ============================================================ */

#eb {
  background: var(--tm-bg) !important;
  padding: 0 12px 120px !important;
  max-width: 760px;
  margin: 0 auto;
}

/* Builder header: clean white bar, not heavy */
#eb .eb-head {
  background: var(--tm-card) !important;
  border: 1px solid var(--tm-line) !important;
  border-radius: 0 0 18px 18px !important;
  box-shadow: var(--tm-shadow) !important;
  padding: 16px !important;
  margin: 0 -12px 14px !important;
  position: sticky;
  top: 0;
  z-index: 40;
}
#eb .eb-head .eb-name {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--tm-ink) !important;
}
#eb .eb-cust {
  font-size: 14px !important;
  color: var(--tm-mut) !important;
}

/* Search + Smart Search: prominent, easy to hit */
#eb .eb-search {
  display: flex !important;
  gap: 8px !important;
  margin: 0 0 12px !important;
}
#eb .eb-search #pb-search {
  flex: 1 !important;
  min-height: 52px !important;
  font-size: 16px !important;
  border: 2px solid var(--tm-line) !important;
  border-radius: 12px !important;
  padding: 0 14px !important;
  background: #fff !important;
}
#eb .eb-search #pb-search:focus {
  border-color: var(--tm-navy) !important;
  outline: none !important;
}
#eb #eb-ai-btn.btn-ai-pricing {
  min-height: 52px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  padding: 0 18px !important;
  margin: 0 !important;
  background: var(--tm-navy) !important;
  flex: none !important;
}

/* Good / Better / Best: big segmented control */
#eb .tier-tabs {
  display: flex !important;
  background: #e9ecf1 !important;
  border-radius: 14px !important;
  padding: 4px !important;
  margin-bottom: 14px !important;
  gap: 0 !important;
}
#eb .tier-tab {
  flex: 1 !important;
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 13px 8px !important;
  border-radius: 10px !important;
  color: var(--tm-mut) !important;
  border: none !important;
  background: none !important;
  min-height: 52px !important;
}
#eb .tier-tab.on {
  background: #fff !important;
  color: var(--tm-ink) !important;
  box-shadow: 0 2px 6px rgba(16,24,40,.14) !important;
}

/* Estimate sections as cards */
#eb .eb-section {
  background: var(--tm-card) !important;
  border: 1px solid var(--tm-line) !important;
  border-radius: var(--tm-radius) !important;
  box-shadow: var(--tm-shadow) !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
}
#eb .tier-h {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--tm-ink) !important;
  margin-bottom: 10px !important;
}

/* Line items: roomy rows */
#eb .eb-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--tm-line) !important;
  min-height: 60px !important;
}
#eb .eb-row:last-child { border-bottom: none !important; }
#eb .eb-line-name { flex: 1; font-size: 15px !important; font-weight: 600 !important; }
#eb .eb-line-total {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--tm-navy) !important;
}
#eb .eb-qty {
  min-width: 48px !important;
  min-height: 44px !important;
  font-size: 16px !important;
  text-align: center !important;
  border: 2px solid var(--tm-line) !important;
  border-radius: 10px !important;
}

/* Add buttons: full-width, red, thumb-friendly */
#eb .eb-add {
  width: 100% !important;
  min-height: 52px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  background: var(--tm-red) !important;
  color: #fff !important;
  border: none !important;
  margin-top: 8px !important;
}
#eb .eb-add:active { background: var(--tm-red-dark) !important; }

/* Category cards: clean grid (keeps prior mobile work) */
#eb .eb-cats {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
#eb .eb-cat {
  min-height: 104px !important;
  border-radius: var(--tm-radius) !important;
  box-shadow: 0 1px 2px rgba(16,24,40,.06) !important;
}
#eb .eb-cat:active { transform: scale(.97); }

/* Sticky tray: white, elevated, clear total */
#eb .eb-tray {
  background: #fff !important;
  border-top: 1px solid var(--tm-line) !important;
  box-shadow: 0 -4px 20px rgba(16,24,40,.1) !important;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
}
#eb .eb-tray-head { font-size: 14px !important; color: var(--tm-mut) !important; }
#eb .eb-price,
#eb .eb-dock .eb-price {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--tm-navy) !important;
}
#eb .eb-comm {
  font-size: 13px !important;
  color: var(--tm-green) !important;
  font-weight: 600 !important;
}

/* Suggest / AI results */
#eb .eb-suggest,
#eb .eb-ai-card {
  border-radius: 12px !important;
  border: 1px solid var(--tm-line) !important;
  padding: 14px !important;
  margin-bottom: 8px !important;
  background: #fff !important;
  min-height: 64px !important;
}

/* ============================================================
   3) CLOSEOUT — Payment FIRST, big buttons (job.php)
   ============================================================ */

/* Closeout panel: light card */
.panel.field-closeout,
.job-fast-closeout-form {
  background: var(--tm-card) !important;
  border: 1px solid var(--tm-line) !important;
  border-radius: 18px !important;
  box-shadow: var(--tm-shadow) !important;
  padding: 18px !important;
}
.field-closeout-eyebrow {
  color: var(--tm-mut) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .07em !important;
}
.panel.field-closeout h2 {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--tm-ink) !important;
  letter-spacing: -0.01em;
}

/* Payment block: reorder to TOP via flexbox */
.job-fast-closeout-form {
  display: flex !important;
  flex-direction: column !important;
}
.job-payment-task {
  order: -10 !important;
  background: var(--tm-green-bg) !important;
  border: 2px solid var(--tm-green) !important;
  border-radius: 16px !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
}
.job-payment-task summary {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--tm-green) !important;
  padding: 4px 0 !important;
  cursor: pointer;
  list-style: none;
}
.job-payment-task summary::-webkit-details-marker { display: none; }
.job-payment-task summary::before {
  content: "💳 ";
}
/* When opened, it's the star of the show */
.job-payment-task[open] {
  box-shadow: 0 4px 18px rgba(18,128,92,.18) !important;
}

/* Payment method buttons: BIG */
.job-inline-collection .btn,
.job-inline-collection button,
.job-payment-task .btn {
  min-height: 60px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  border-radius: 14px !important;
  width: 100% !important;
  margin-bottom: 10px !important;
}
.job-inline-collection .btn-primary,
.job-payment-task .btn-primary {
  background: var(--tm-green) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(18,128,92,.3) !important;
}

/* Amount display: huge and clear */
.job-billing-snapshot {
  background: #fff !important;
  border: 1px solid var(--tm-line) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  text-align: center !important;
  margin-bottom: 14px !important;
}
.job-billing-snapshot strong,
.job-billing-snapshot .amount {
  font-size: 34px !important;
  font-weight: 800 !important;
  color: var(--tm-navy) !important;
  letter-spacing: -0.02em;
}
.job-billing-label {
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tm-mut) !important;
}

/* Cost inputs: clean, large */
.job-fast-closeout-form input[type="number"],
.job-fast-closeout-form input[type="text"],
.field-closeout input {
  min-height: 52px !important;
  font-size: 17px !important;
  border: 2px solid var(--tm-line) !important;
  border-radius: 12px !important;
  padding: 0 14px !important;
  width: 100% !important;
  background: #fff !important;
}
.job-fast-closeout-form input:focus {
  border-color: var(--tm-navy) !important;
  outline: none !important;
}
.job-fast-closeout-form label {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--tm-ink) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Complete / submit: red, full-width, bottom */
.job-fast-closeout-form button[type="submit"],
.job-fast-closeout-form .btn-submit {
  width: 100% !important;
  min-height: 60px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  border-radius: 14px !important;
  background: var(--tm-red) !important;
  color: #fff !important;
  border: none !important;
  margin-top: 14px !important;
  box-shadow: 0 4px 14px rgba(207,10,44,.28) !important;
}

/* Closeout step links: tappable list */
.job-closeout-jumps a {
  display: flex !important;
  align-items: center !important;
  min-height: 56px !important;
  padding: 12px 14px !important;
  background: #fff !important;
  border: 1px solid var(--tm-line) !important;
  border-radius: 12px !important;
  margin-bottom: 8px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  color: var(--tm-ink) !important;
}

/* Commission preview: green tint card */
.job-closeout-guidance,
.job-completion-guidance {
  background: var(--tm-green-bg) !important;
  border-radius: 12px !important;
  padding: 14px !important;
  font-size: 14px !important;
  color: var(--tm-green) !important;
  margin-bottom: 12px !important;
}

/* Explainer text: muted, not shouty */
.job-closeout-explainer,
.closeout-guide {
  font-size: 14px !important;
  color: var(--tm-mut) !important;
  line-height: 1.55 !important;
}

/* Back link: subtle */
.field-closeout-back {
  display: inline-block !important;
  color: var(--tm-mut) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  padding: 12px 0 !important;
  margin-top: 8px !important;
}

/* ============================================================
   Shared: job page chrome (job.php)
   ============================================================ */

/* Progress line: slim, clean */
.bt-stage.job-progress-line {
  background: #fff !important;
  border: 1px solid var(--tm-line) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  margin-bottom: 12px !important;
  box-shadow: none !important;
}

/* Primary actions on job page: thumb-sized */
.job-arrival-actions .btn,
.job-quick-next .btn {
  min-height: 54px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
}

/* Panels: consistent light cards */
.bt-job-layout .panel,
.bt-task-layout .panel {
  background: var(--tm-card) !important;
  border: 1px solid var(--tm-line) !important;
  border-radius: var(--tm-radius) !important;
  box-shadow: var(--tm-shadow) !important;
}

/* Tablet: breathe a little wider, two columns where natural */
@media (min-width: 768px) and (max-width: 1024px) {
  .tech-home { max-width: 900px; padding: 0 24px 96px !important; }
  .tech-home .hm-head { margin: 0 -24px 20px !important; padding: 22px 24px 18px !important; }
  #eb { max-width: 900px; }
  #eb .eb-cats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .tech-home .hm-rows {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
  .tech-home .hm-row::after { display: none; }
}

} /* end technician mobile */

/* ============ Tech Deck — restructured mobile home (v3.53.3) ============ */
.td-wrap { display: block; }

@media (min-width: 0px) {
  /* Retained Action needed/work-in/meeting controls stay visible; no retired home overlay. */
  .td-wrap { display: block !important; max-width: 720px; margin: 0 auto; padding: 0 16px 20px; }

  .td-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 4px 14px; }
  .td-greet { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: #1e3a5f; }
  .td-date { color: #667085; font-size: 13px; margin-top: 2px; }
  .td-score { color: #c0272d; font-weight: 700; font-size: 14px; text-decoration: none; }

  .td-hero {
    display: block; text-decoration: none; color: #1e3a5f;
    background: #fff; border-radius: 18px; padding: 20px; margin-bottom: 6px;
    border-top: 5px solid #1e5aa8;
    box-shadow: 0 2px 4px rgba(16,24,40,.08), 0 8px 24px rgba(16,24,40,.1);
  }
  .td-hero.live { border-top-color: #12805c; }
  .td-hero-tag { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: #1e5aa8; text-transform: uppercase; }
  .td-hero.live .td-hero-tag { color: #12805c; }
  .td-hero-title { font-size: 22px; font-weight: 800; margin: 8px 0 4px; letter-spacing: -0.01em; }
  .td-hero-sub { color: #667085; font-size: 15px; }
  .td-hero-time { font-weight: 800; font-size: 15px; margin-top: 8px; color: #152a45; }
  .td-hero-actions { display: flex; gap: 10px; margin-top: 16px; }
  .td-btn { flex: 1; text-align: center; padding: 16px; border-radius: 14px; font-weight: 700; font-size: 16px; cursor: pointer; }
  .td-btn.red { background: #c0272d; color: #fff; }
  .td-btn.navy { background: #152a45; color: #fff; }

  .td-sec { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: #667085; margin: 22px 0 10px; padding: 0 4px; }

  .td-job {
    display: flex; align-items: center; gap: 14px; text-decoration: none; color: #1e3a5f;
    background: #fff; border-radius: 14px; padding: 16px; margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(16,24,40,.08); min-height: 76px;
  }
  .td-job:active { transform: scale(.98); }
  .td-job-time { font-weight: 800; font-size: 14px; min-width: 88px; color: #152a45; }
  .td-job-main { flex: 1; min-width: 0; }
  .td-job-main b { display: block; font-size: 16px; }
  .td-job-main span { color: #667085; font-size: 13px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .td-chev { color: #c4ccd6; font-size: 24px; font-weight: 300; }

  .td-empty { background: #fff; border: 2px dashed #e6e9ef; border-radius: 14px; padding: 24px 18px; text-align: center; margin-bottom: 6px; }
  .td-empty b { font-size: 17px; }
  .td-empty p { color: #667085; font-size: 14px; margin: 8px 0 0; }
  .td-empty a { color: #1e5aa8; }

  .td-card { display: block; background: #fff; border-radius: 16px; padding: 18px; margin-bottom: 6px; text-decoration: none; color: #1e3a5f; box-shadow: 0 1px 3px rgba(16,24,40,.08); }
  .td-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .td-stats span { color: #667085; font-size: 12px; display: block; }
  .td-stats b { font-size: 24px; font-weight: 800; }
  .td-stats .hl b { color: #12805c; }
  .td-link { text-align: right; color: #c0272d; font-weight: 700; font-size: 14px; margin-top: 12px; }

  .td-bonus-h { display: flex; justify-content: space-between; align-items: center; }
  .td-bonus-h span { color: #667085; font-size: 13px; }
  .td-bar { background: #e9ecf1; border-radius: 999px; height: 12px; margin: 12px 0; overflow: hidden; }
  .td-bar i { display: block; background: linear-gradient(90deg, #12805c, #1faa7a); height: 100%; border-radius: 999px; }
  .td-bonus-f { font-size: 15px; }
  .td-bonus-f span { float: right; color: #c4ccd6; }

  .td-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .td-tools a {
    background: #fff; border-radius: 14px; padding: 18px 8px; text-align: center;
    text-decoration: none; color: #1e3a5f; font-size: 13px; font-weight: 700;
    box-shadow: 0 1px 3px rgba(16,24,40,.08);
    display: flex; flex-direction: column; gap: 8px; align-items: center;
  }
  .td-tools a { min-width:44px; min-height:88px; overflow-wrap:anywhere; }
  .td-tools .td-tool-icon { font-size:28px; }
  .td-tools .td-tool-label { font-size:13px; }
  .td-tools .ic { width:28px; height:28px; }
  .td-wrap .hm-day { margin:0 0 16px; }
  .td-wrap .hm-empty { background:#fff; border:2px dashed #e6e9ef; border-radius:14px; padding:24px 18px; text-align:center; }

  @media (min-width: 768px) {
    .td-wrap { max-width: 960px; }
    .td-tools { grid-template-columns: repeat(6, 1fr); }
  }
}