:root {
  --trucky-bg: #f4f1e8;
  --trucky-paper: rgba(255, 254, 249, .94);
  --trucky-ink: #151412;
  --trucky-soft: #6f6a61;
  --trucky-line: rgba(40, 35, 28, .13);
  --trucky-dark: #11100f;
  --trucky-gold: #d9a441;
  --trucky-blue: #2563eb;
  --trucky-red: #ef4444;
  --trucky-green: #b8f1c4;
  --trucky-orange: #f59e0b;
  --trucky-radius: 26px;
  --trucky-shadow: 0 22px 54px rgba(29, 24, 17, .10);
  --trucky-shadow-soft: 0 12px 28px rgba(29, 24, 17, .075);
}

html {
  scroll-behavior: smooth;
}

body.web-test-mode {
  color: var(--trucky-ink);
  background:
    radial-gradient(circle at 10% 0%, rgba(217, 164, 65, .12), transparent 28rem),
    radial-gradient(circle at 90% 6%, rgba(37, 99, 235, .07), transparent 30rem),
    linear-gradient(180deg, #f7f4ed 0%, var(--trucky-bg) 48%, #efebe1 100%);
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

body.web-test-mode .site-header {
  border-bottom: 1px solid rgba(30, 28, 24, .08);
  background: rgba(247, 244, 237, .88);
  backdrop-filter: blur(18px);
}

body.web-test-mode .brand .logo {
  background: #101010;
  color: #fff;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .16);
}

body.web-test-mode .top-tabs {
  top: 78px;
  padding: 8px;
  border-color: rgba(36, 31, 26, .10);
  background: rgba(255, 254, 249, .78);
  box-shadow: 0 18px 44px rgba(31, 27, 21, .10);
}

body.web-test-mode .top-tabs a,
body.web-test-mode .menu a,
body.web-test-mode .button,
body.web-test-mode button {
  letter-spacing: -.01em;
}

body.web-test-mode .top-tabs a:hover,
body.web-test-mode .menu a:hover,
body.web-test-mode .quick-grid a:hover,
body.web-test-mode .scan-step:hover,
body.web-test-mode .activity-row:hover,
body.web-test-mode .connector-card:hover {
  transform: translateY(-2px);
  border-color: rgba(17, 16, 15, .22);
  box-shadow: var(--trucky-shadow-soft);
}

body.web-test-mode .top-tabs a.is-active,
body.web-test-mode .menu a.active {
  background: #11100f;
  color: #fff;
}

body.web-test-mode .app-shell {
  grid-template-columns: 276px minmax(0, 1fr);
  gap: 22px;
}

body.web-test-mode .side,
body.web-test-mode .content > .card,
body.web-test-mode .auth-card {
  border: 1px solid var(--trucky-line);
  border-radius: var(--trucky-radius);
  background:
    linear-gradient(180deg, rgba(255, 254, 249, .96), rgba(250, 247, 239, .90));
  box-shadow: var(--trucky-shadow);
}

body.web-test-mode .content > .card {
  padding: clamp(20px, 3vw, 32px);
  overflow: clip;
}

body.web-test-mode .content > .card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .86), transparent);
  pointer-events: none;
}

body.web-test-mode h1,
body.web-test-mode h2 {
  letter-spacing: -.055em;
}

body.web-test-mode h1 {
  max-width: 920px;
}

body.web-test-mode p {
  max-width: 880px;
}

body.web-test-mode .eyebrow {
  color: #5d574f;
}

body.web-test-mode .web-dev-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

body.web-test-mode .web-dev-banner h2 {
  margin-bottom: 8px;
}

body.web-test-mode .metric-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

body.web-test-mode #tableau .metric-grid .metric:nth-child(4),
body.web-test-mode #tableau .metric-grid .metric:nth-child(5) {
  display: block;
}

body.web-test-mode .metric {
  border-color: rgba(35, 31, 26, .10);
  background: rgba(255, 255, 255, .78);
}

body.web-test-mode .metric::before {
  background: #11100f;
  opacity: .9;
}

body.web-test-mode .metric:nth-child(2)::before { background: var(--trucky-gold); }
body.web-test-mode .metric:nth-child(3)::before { background: var(--trucky-blue); }
body.web-test-mode .metric:nth-child(4)::before { background: var(--trucky-red); }
body.web-test-mode .metric:nth-child(5)::before { background: var(--trucky-green); }

body.web-test-mode .mobile-command {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.web-test-mode .command-card,
body.web-test-mode .connector-card,
body.web-test-mode .base-card,
body.web-test-mode .compat-card,
body.web-test-mode .file-zone,
body.web-test-mode .quick-grid a,
body.web-test-mode .activity-row {
  border-color: rgba(35, 31, 26, .11);
  background: rgba(255, 255, 255, .76);
}

body.web-test-mode .timeline-demo .bar,
body.web-test-mode .web-track {
  border-color: rgba(35, 31, 26, .13);
  background:
    linear-gradient(90deg, rgba(20, 18, 15, .075) 1px, transparent 1px) 0 0 / 8.333% 100%,
    rgba(255, 255, 255, .9);
}

body.web-test-mode .web-track {
  height: 34px;
  border-radius: 999px;
}

body.web-test-mode .web-segment {
  font-size: 10px;
  text-shadow: none;
}

body.web-test-mode .web-segment.driving,
body.web-test-mode .drive { background: var(--trucky-blue); }
body.web-test-mode .web-segment.work,
body.web-test-mode .work { background: var(--trucky-red); }
body.web-test-mode .web-segment.rest,
body.web-test-mode .rest { background: var(--trucky-green); color: #142018; }
body.web-test-mode .web-segment.availability,
body.web-test-mode .available { background: var(--trucky-orange); color: #1f1606; }

body.web-test-mode .activity-row {
  grid-template-columns: 88px 1fr auto;
}

body.web-test-mode .scan-flow {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

body.web-test-mode .scan-step {
  min-height: 116px;
  border-color: rgba(35, 31, 26, .11);
  background: rgba(255, 255, 255, .78);
}

body.web-test-mode .scan-step.priority {
  border-color: rgba(17, 16, 15, .28);
  background:
    radial-gradient(circle at 14% 0%, rgba(217, 164, 65, .18), transparent 9rem),
    rgba(255, 255, 255, .86);
}

body.web-test-mode .log {
  border: 1px solid rgba(255, 255, 255, .08);
  background: #10100f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.polished-actions {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pdf-export-panel {
  display: grid;
  grid-template-columns: minmax(210px, .75fr) repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.pdf-period-switch,
.pdf-preview-card,
.pdf-limit-card,
.premium-benefits div {
  border: 1px solid rgba(35, 31, 26, .11);
  border-radius: 22px;
  padding: 14px;
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 10px 24px rgba(29, 24, 17, .055);
}

.pdf-period-switch {
  display: grid;
  gap: 8px;
}

.pdf-period-switch button {
  min-height: 40px;
  border-radius: 999px;
  background: #fff;
  color: #151412;
  border: 1px solid rgba(35, 31, 26, .12);
  box-shadow: none;
}

.pdf-period-switch button.is-active {
  background: #11100f;
  color: #fff;
}

.pdf-preview-card,
.pdf-limit-card {
  display: grid;
  align-content: center;
  gap: 6px;
}

.pdf-preview-card span,
.pdf-limit-card span {
  color: #746e65;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.pdf-preview-card strong,
.pdf-limit-card strong {
  font-size: 22px;
  letter-spacing: -.035em;
}

.pdf-limit-card.is-limited {
  border-color: rgba(217, 164, 65, .42);
  background: linear-gradient(180deg, rgba(255, 251, 241, .95), rgba(255, 246, 224, .85));
}

.pdf-limit-card.is-ok {
  border-color: rgba(34, 197, 94, .35);
  background: linear-gradient(180deg, rgba(241, 255, 246, .95), rgba(226, 252, 234, .82));
}

.salary-card-pro {
  position: relative;
}

body.is-free .salary-card-pro .salary-layout {
  filter: blur(3px);
  pointer-events: none;
  user-select: none;
}

.premium-lock-overlay {
  position: absolute;
  inset: 108px 24px 24px;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 18px;
  border-radius: 26px;
  background: rgba(17, 16, 15, .72);
  backdrop-filter: blur(10px);
}

.premium-lock-overlay > div {
  width: min(460px, 100%);
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 24px;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(217, 164, 65, .22), transparent 12rem),
    rgba(22, 20, 18, .94);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
}

.premium-lock-overlay p {
  margin-inline: auto;
  color: rgba(255, 255, 255, .78);
}

.premium-lock-icon {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  margin-bottom: 10px;
  border-radius: 50%;
  color: #11100f;
  background: linear-gradient(180deg, #ffe4a3, #d9a441);
  font-weight: 950;
}

.premium-web-card {
  border-color: rgba(217, 164, 65, .36) !important;
}

.premium-web-card::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(217, 164, 65, .18);
  border-radius: 24px;
  pointer-events: none;
}

.premium-header-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.premium-header-line strong {
  min-width: 144px;
  padding: 16px;
  border-radius: 22px;
  text-align: center;
  color: #11100f;
  background: linear-gradient(180deg, #ffe6ad, #d9a441);
  box-shadow: 0 16px 30px rgba(217, 164, 65, .24);
  font-size: 30px;
}

.premium-header-line strong span {
  display: block;
  font-size: 13px;
  letter-spacing: 0;
}

.premium-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.premium-benefits b,
.premium-benefits span {
  display: block;
}

.premium-benefits span {
  margin-top: 5px;
  color: var(--trucky-soft);
  font-size: 13px;
  line-height: 1.45;
}

.premium-paypal-button {
  background: #11100f !important;
  color: #fff !important;
}

body.web-test-mode input,
body.web-test-mode select,
body.web-test-mode textarea {
  border-color: rgba(35, 31, 26, .16);
  background: rgba(255, 255, 255, .88);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

body.web-test-mode input:focus,
body.web-test-mode select:focus,
body.web-test-mode textarea:focus {
  border-color: rgba(17, 16, 15, .38);
  box-shadow: 0 0 0 4px rgba(217, 164, 65, .16);
  background: #fff;
}

body.web-test-mode .empty-polish {
  border: 1px dashed rgba(35, 31, 26, .18);
  border-radius: 20px;
  padding: 18px;
  color: var(--trucky-soft);
  background: rgba(255, 255, 255, .62);
}

@media (max-width: 1080px) {
  body.web-test-mode .app-shell {
    grid-template-columns: 1fr;
  }

  body.web-test-mode .side {
    position: relative;
    top: auto;
  }

  body.web-test-mode .menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.web-test-mode .metric-grid,
  body.web-test-mode .scan-flow,
  .premium-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pdf-export-panel,
  body.web-test-mode .salary-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  body.web-test-mode .site-header .topbar {
    gap: 10px;
  }

  body.web-test-mode .nav-actions {
    width: 100%;
  }

  body.web-test-mode .top-tabs {
    top: 92px;
    width: calc(100% - 18px);
    border-radius: 22px;
  }

  body.web-test-mode .content > .card,
  body.web-test-mode .side {
    border-radius: 22px;
    padding: 18px;
  }

  body.web-test-mode .web-dev-banner,
  .premium-header-line {
    display: grid;
  }

  body.web-test-mode .metric-grid,
  body.web-test-mode .mobile-command,
  body.web-test-mode .scan-flow,
  body.web-test-mode .menu,
  .premium-benefits {
    grid-template-columns: 1fr;
  }

  body.web-test-mode .activity-row {
    grid-template-columns: 1fr;
  }

  .premium-lock-overlay {
    inset: 96px 12px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* Trucky App native/web shell polish */
body:not(.web-test-mode) {
  background:
    radial-gradient(circle at 12% 0%, rgba(217, 164, 65, .10), transparent 30rem),
    radial-gradient(circle at 92% 4%, rgba(37, 99, 235, .06), transparent 32rem),
    linear-gradient(180deg, #f7f4ed, #efebe1);
  color: var(--trucky-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body:not(.web-test-mode) .app-shell {
  background: transparent;
}

body:not(.web-test-mode) .sidebar {
  border-right: 1px solid rgba(30, 28, 24, .08);
  background:
    linear-gradient(180deg, rgba(19, 18, 17, .98), rgba(31, 29, 26, .96));
  box-shadow: 18px 0 46px rgba(23, 20, 16, .10);
}

body:not(.web-test-mode) .brand,
body:not(.web-test-mode) .profile-chip {
  letter-spacing: -.02em;
}

body:not(.web-test-mode) .main-nav {
  gap: 6px;
}

body:not(.web-test-mode) .nav-link {
  border-radius: 15px;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

body:not(.web-test-mode) .nav-link:hover {
  transform: translateX(2px);
  background: rgba(255, 255, 255, .08);
}

body:not(.web-test-mode) .nav-link.active {
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 3px 0 0 var(--trucky-gold);
}

body:not(.web-test-mode) .content {
  background: transparent;
}

body:not(.web-test-mode) .topbar {
  border: 1px solid rgba(35, 31, 26, .10);
  border-radius: 0 0 28px 28px;
  background: rgba(255, 254, 249, .82);
  backdrop-filter: blur(18px);
  box-shadow: 0 16px 42px rgba(31, 27, 21, .08);
}

body:not(.web-test-mode) .page-card,
body:not(.web-test-mode) .drive-card,
body:not(.web-test-mode) .week-card,
body:not(.web-test-mode) .timeline-card,
body:not(.web-test-mode) .alert-card,
body:not(.web-test-mode) .stat-card,
body:not(.web-test-mode) .settings-card,
body:not(.web-test-mode) .premium-plan,
body:not(.web-test-mode) .premium-tool {
  border-color: rgba(35, 31, 26, .10);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 254, 249, .94), rgba(250, 247, 239, .88));
  box-shadow: var(--trucky-shadow-soft);
}

body:not(.web-test-mode) .primary-button,
body:not(.web-test-mode) .outline-button,
body:not(.web-test-mode) .text-button,
body:not(.web-test-mode) .pause-button {
  border-radius: 999px;
}

body:not(.web-test-mode) .primary-button {
  background: #11100f;
  color: #fff;
  box-shadow: 0 16px 34px rgba(17, 16, 15, .18);
}

body:not(.web-test-mode) .outline-button {
  background: rgba(255, 255, 255, .76);
  border-color: rgba(35, 31, 26, .12);
}

body:not(.web-test-mode) .weekly-dashboard,
body:not(.web-test-mode) .activities-page {
  overflow: hidden;
}

body:not(.web-test-mode) .weekly-timeline-grid,
body:not(.web-test-mode) .activity-explorer,
body:not(.web-test-mode) .web-timeline {
  border-radius: 22px;
}

body:not(.web-test-mode) .web-track,
body:not(.web-test-mode) .day-track,
body:not(.web-test-mode) .timeline-track {
  border-radius: 999px;
}

body:not(.web-test-mode) .stat-card {
  transition: transform .18s ease, box-shadow .18s ease;
}

body:not(.web-test-mode) .stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--trucky-shadow);
}

body:not(.web-test-mode) .activity-summary-strip article,
body:not(.web-test-mode) .history-summary > div,
body:not(.web-test-mode) .salary-card,
body:not(.web-test-mode) .connector-box,
body:not(.web-test-mode) .dropzone {
  border-color: rgba(35, 31, 26, .11);
  border-radius: 20px;
  background: rgba(255, 255, 255, .76);
}

body:not(.web-test-mode) .premium-plan.highlighted,
body:not(.web-test-mode) .premium-hero,
body:not(.web-test-mode) .premium-tool.pro-foundation {
  border-color: rgba(217, 164, 65, .38);
  box-shadow: 0 22px 52px rgba(217, 164, 65, .13);
}

body:not(.web-test-mode) .salary-result,
body:not(.web-test-mode) .salary-net-card {
  background:
    radial-gradient(circle at 18% 0%, rgba(217, 164, 65, .22), transparent 14rem),
    linear-gradient(145deg, #171512, #2b2721);
}

body:not(.web-test-mode) input,
body:not(.web-test-mode) select,
body:not(.web-test-mode) textarea {
  border-radius: 16px;
}

body:not(.web-test-mode) .modal-icon {
  background: #11100f;
  color: #fff;
}

@media (max-width: 760px) {
  body:not(.web-test-mode) .topbar {
    border-radius: 0 0 22px 22px;
  }

  body:not(.web-test-mode) .page-card,
  body:not(.web-test-mode) .drive-card,
  body:not(.web-test-mode) .week-card,
  body:not(.web-test-mode) .timeline-card,
  body:not(.web-test-mode) .alert-card {
    border-radius: 20px;
  }
}