:root {
  --page:
    #f1f2f4;

  --card:
    #ffffff;

  --text:
    #303030;

  --muted:
    #616161;

  --soft:
    #f7f7f7;

  --border:
    #d8d8d8;

  --shopify-blue:
    #2aa9d6;

  --shopify-blue-soft:
    #bfe6f3;

  --web:
    #2f4f7f;

  --shopee:
    #f36f21;

  --success:
    #29845a;

  --danger:
    #d72c35;
}

* {
  box-sizing:
    border-box;
}

[hidden] {
  display:
    none !important;
}

html,
body {
  margin:
    0;

  min-height:
    100%;

  background:
    var(--page);
}

body {
  color:
    var(--text);

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "Helvetica Neue",
    Arial,
    sans-serif;

  -webkit-font-smoothing:
    antialiased;
}

button {
  font:
    inherit;

  color:
    inherit;

  cursor:
    pointer;
}

.app-shell {
  width:
    min(
      calc(100% - 24px),
      1280px
    );

  margin:
    0 auto;

  padding:
    max(
      20px,
      env(safe-area-inset-top)
    )
    0
    calc(
      30px +
      env(safe-area-inset-bottom)
    );
}

.app-header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  margin-bottom:
    18px;
}

.identity {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}

.identity-mark {
  width:
    40px;

  height:
    40px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    11px;

  background:
    #1c1c1c;

  color:
    white;

  font-weight:
    700;
}

.identity-name {
  font-weight:
    650;

  font-size:
    17px;
}

.identity-subtitle {
  margin-top:
    2px;

  color:
    var(--muted);

  font-size:
    12px;
}

.live-status {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  color:
    var(--muted);

  font-size:
    11px;

  font-weight:
    600;
}

.live-dot {
  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    #2ab673;
}

#lastUpdated {
  margin-left:
    4px;
}

.toolbar {
  position:
    relative;

  display:
    flex;

  justify-content:
    space-between;

  margin-bottom:
    12px;
}

.toolbar-left {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    6px;
}

.shopify-pill {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  min-height:
    34px;

  padding:
    6px 10px;

  border:
    1px solid
    #bababa;

  border-radius:
    9px;

  background:
    #fafafa;

  box-shadow:
    0 1px 0
    rgba(
      0,
      0,
      0,
      0.04
    );

  font-size:
    12px;

  font-weight:
    550;
}

.shopify-pill:hover {
  background:
    #f4f4f4;
}

.currency-pill {
  cursor:
    default;

  opacity:
    1;
}

.date-popover {
  position:
    absolute;

  z-index:
    50;

  width:
    min(
      700px,
      calc(100vw - 28px)
    );

  display:
    grid;

  grid-template-columns:
    170px
    minmax(
      0,
      1fr
    );

  border:
    1px solid
    #c7c7c7;

  border-radius:
    10px;

  background:
    white;

  box-shadow:
    0 12px 35px
    rgba(
      0,
      0,
      0,
      0.15
    );

  overflow:
    hidden;
}

.date-sidebar {
  padding:
    8px 0;

  background:
    #f7f7f7;

  border-right:
    1px solid
    #e1e1e1;
}

.date-menu-button {
  width:
    100%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  border:
    0;

  padding:
    8px 14px;

  background:
    transparent;

  text-align:
    left;

  font-size:
    12px;
}

.date-menu-button:hover,
.date-menu-button.selected {
  background:
    #e9e9e9;
}

.sidebar-divider {
  height:
    1px;

  margin:
    6px 0;

  background:
    #e2e2e2;
}

.sidebar-back {
  font-weight:
    650;
}

.calendar-pane {
  padding:
    14px;
}

.calendar-inputs {
  display:
    grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items:
    center;

  gap:
    10px;
}

.calendar-input {
  min-height:
    34px;

  display:
    flex;

  align-items:
    center;

  padding:
    7px 11px;

  border:
    1px solid
    #aaa;

  border-radius:
    8px;

  font-size:
    12px;
}

.calendar-arrow {
  color:
    var(--muted);
}

.calendar-nav {
  display:
    grid;

  grid-template-columns:
    32px 1fr 32px;

  margin:
    10px 0 2px;
}

.icon-button {
  border:
    0;

  background:
    transparent;

  border-radius:
    7px;

  font-size:
    22px;
}

.icon-button:hover {
  background:
    #f3f3f3;
}

.calendar-months {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    22px;

  min-height:
    252px;
}

.month-title {
  text-align:
    center;

  margin-bottom:
    14px;

  font-size:
    13px;

  font-weight:
    650;
}

.week-grid,
.days-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      7,
      1fr
    );
}

.weekday {
  text-align:
    center;

  color:
    #6f6f6f;

  font-size:
    10px;

  padding-bottom:
    8px;
}

.calendar-day {
  height:
    32px;

  display:
    grid;

  place-items:
    center;

  border:
    0;

  border-radius:
    7px;

  background:
    transparent;

  font-size:
    12px;
}

.calendar-day:hover {
  background:
    #ededed;
}

.calendar-day.in-range {
  border-radius:
    0;

  background:
    #efefef;
}

.calendar-day.range-start,
.calendar-day.range-end {
  border-radius:
    7px;

  background:
    #303030;

  color:
    white;
}

.calendar-day.empty {
  pointer-events:
    none;
}

.calendar-actions {
  display:
    flex;

  justify-content:
    flex-end;

  gap:
    8px;

  margin:
    14px -14px -14px;

  padding:
    12px 14px;

  border-top:
    1px solid
    #e4e4e4;
}

.secondary-button,
.primary-button {
  border-radius:
    8px;

  padding:
    7px 13px;

  font-size:
    12px;

  font-weight:
    600;
}

.secondary-button {
  border:
    1px solid
    #c5c5c5;

  background:
    white;
}

.primary-button {
  border:
    1px solid
    #252525;

  background:
    #303030;

  color:
    white;
}

.comparison-popover {
  position:
    absolute;

  z-index:
    60;

  min-width:
    190px;

  border:
    1px solid
    #c7c7c7;

  border-radius:
    9px;

  background:
    white;

  padding:
    6px;

  box-shadow:
    0 10px 30px
    rgba(
      0,
      0,
      0,
      0.15
    );
}

.comparison-popover button {
  width:
    100%;

  display:
    block;

  border:
    0;

  border-radius:
    6px;

  background:
    transparent;

  padding:
    8px 10px;

  text-align:
    left;

  font-size:
    12px;
}

.comparison-popover button:hover {
  background:
    #eeeeee;
}

.analytics-card,
.metric-card {
  border:
    1px solid
    #d6d6d6;

  border-radius:
    14px;

  background:
    var(--card);

  box-shadow:
    0 1px 1px
    rgba(
      0,
      0,
      0,
      0.04
    );
}

.analytics-card {
  padding:
    24px;
}

.card-heading {
  font-size:
    19px;

  font-weight:
    600;

  text-decoration:
    underline dotted
    #b6b6b6;

  text-underline-offset:
    6px;
}

.sales-heading-row {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  margin-top:
    24px;
}

.sales-number {
  font-size:
    clamp(
      32px,
      4.5vw,
      46px
    );

  line-height:
    1;

  font-weight:
    650;

  letter-spacing:
    -0.035em;
}

.sales-change {
  font-size:
    15px;

  font-weight:
    650;
}

.sales-change.positive {
  color:
    var(--success);
}

.sales-change.negative {
  color:
    var(--danger);
}

.sales-change.neutral {
  color:
    var(--muted);
}

.chart-wrap {
  position:
    relative;

  height:
    315px;

  margin-top:
    10px;
}

.sales-chart {
  width:
    100%;

  height:
    100%;

  overflow:
    visible;

  touch-action:
    pan-y;
}

.chart-grid {
  stroke:
    #e8e8e8;

  stroke-width:
    1;
}

.axis-text {
  fill:
    #656565;

  font-size:
    10px;
}

.current-area {
  fill:
    rgba(
      42,
      169,
      214,
      0.08
    );
}

.current-line {
  fill:
    none;

  stroke:
    var(--shopify-blue);

  stroke-width:
    3;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}

.comparison-line {
  fill:
    none;

  stroke:
    var(--shopify-blue-soft);

  stroke-width:
    3;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

  stroke-dasharray:
    2 7;
}

.hover-line {
  stroke:
    #a5a5a5;

  stroke-dasharray:
    3 4;
}

.hover-dot {
  fill:
    white;

  stroke:
    var(--shopify-blue);

  stroke-width:
    2;
}

.chart-legend {
  display:
    flex;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    22px;

  margin-top:
    6px;

  color:
    #666;

  font-size:
    12px;
}

.chart-legend > div {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;
}

.legend-line {
  width:
    20px;

  height:
    3px;

  border-radius:
    10px;
}

.legend-line.current {
  background:
    var(--shopify-blue);
}

.legend-line.comparison {
  background:
    repeating-linear-gradient(
      to right,
      var(--shopify-blue-soft)
      0 3px,
      transparent
      3px 7px
    );
}

.chart-tooltip {
  position:
    absolute;

  pointer-events:
    none;

  min-width:
    190px;

  padding:
    10px 12px;

  border:
    1px solid
    #d2d2d2;

  border-radius:
    9px;

  background:
    white;

  box-shadow:
    0 8px 24px
    rgba(
      0,
      0,
      0,
      0.12
    );

  transform:
    translate(
      -50%,
      calc(
        -100% -
        12px
      )
    );

  font-size:
    11px;
}

.tooltip-title {
  margin-bottom:
    8px;

  color:
    var(--muted);

  font-weight:
    650;
}

.tooltip-row {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    20px;

  margin-top:
    5px;
}

.metric-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  gap:
    12px;

  margin-top:
    12px;
}

.metric-card {
  padding:
    18px;
}

.metric-title {
  color:
    var(--muted);

  font-size:
    11px;

  font-weight:
    600;
}

.metric-number {
  margin-top:
    11px;

  font-size:
    26px;

  font-weight:
    620;

  letter-spacing:
    -0.025em;
}

.metric-change,
.metric-footnote {
  margin-top:
    7px;

  color:
    var(--muted);

  font-size:
    10px;
}

.channel-section {
  margin-top:
    12px;
}

.channel-row {
  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  margin-top:
    24px;

  font-size:
    12px;
}

.channel-row.second {
  margin-top:
    18px;
}

.channel-label {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  font-weight:
    650;
}

.channel-dot {
  width:
    9px;

  height:
    9px;

  border-radius:
    50%;
}

.channel-dot.web,
.channel-fill.web {
  background:
    var(--web);
}

.channel-dot.shopee,
.channel-fill.shopee {
  background:
    var(--shopee);
}

.channel-right {
  display:
    flex;

  gap:
    14px;

  align-items:
    center;
}

.channel-right span {
  min-width:
    48px;

  text-align:
    right;

  color:
    var(--muted);
}

.channel-track {
  height:
    5px;

  margin-top:
    9px;

  border-radius:
    99px;

  background:
    #eeeeee;

  overflow:
    hidden;
}

.channel-fill {
  height:
    100%;

  border-radius:
    99px;

  transition:
    width
    250ms
    ease;
}

footer {
  padding:
    18px 2px 0;

  color:
    #858585;

  font-size:
    9px;
}


/* ==================================================
   MOBILE / TELEGRAM MINI APP
   ================================================== */

@media
(max-width: 720px) {

  .app-shell {
    width:
      calc(
        100% -
        16px
      );

    padding-top:
      max(
        12px,
        env(
          safe-area-inset-top
        )
      );
  }

  .identity-mark {
    width:
      34px;

    height:
      34px;
  }

  .identity-name {
    font-size:
      15px;
  }

  #lastUpdated {
    display:
      none;
  }

  .toolbar-left {
    flex-wrap:
      nowrap;

    width:
      100%;

    overflow-x:
      auto;

    padding-bottom:
      2px;

    scrollbar-width:
      none;
  }

  .toolbar-left::-webkit-scrollbar {
    display:
      none;
  }

  .shopify-pill {
    flex:
      0 0 auto;

    white-space:
      nowrap;
  }

  .analytics-card {
    padding:
      18px 14px;
  }

  .card-heading {
    font-size:
      17px;
  }

  .sales-heading-row {
    margin-top:
      20px;
  }

  .sales-number {
    font-size:
      34px;
  }

  .chart-wrap {
    height:
      270px;

    margin:
      10px -6px 0;
  }

  .metric-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    gap:
      8px;
  }

  .metric-card {
    padding:
      14px;
  }

  .metric-number {
    font-size:
      21px;
  }

  .date-popover {
    position:
      fixed;

    inset:
      max(
        8px,
        env(
          safe-area-inset-top
        )
      )
      8px
      max(
        8px,
        env(
          safe-area-inset-bottom
        )
      );

    width:
      auto;

    grid-template-columns:
      1fr;

    overflow-y:
      auto;
  }

  .date-sidebar {
    border-right:
      0;

    border-bottom:
      1px solid
      #ddd;
  }

  .calendar-months {
    grid-template-columns:
      1fr;

    gap:
      28px;
  }

  .calendar-pane {
    padding:
      12px;
  }

  .calendar-inputs {
    position:
      sticky;

    top:
      0;

    z-index:
      5;

    background:
      white;

    padding-bottom:
      8px;
  }

  .calendar-actions {
    position:
      sticky;

    bottom:
      0;

    background:
      white;
  }

  .comparison-popover {
    position:
      fixed;

    left:
      8px !important;

    right:
      8px;

    top:
      auto !important;

    bottom:
      max(
        8px,
        env(
          safe-area-inset-bottom
        )
      );
  }

  .chart-legend {
    justify-content:
      flex-start;

    padding-left:
      4px;
  }

}

@media
(max-width: 400px) {

  .sales-number {
    font-size:
      30px;
  }

  .sales-change {
    font-size:
      13px;
  }

  .metric-number {
    font-size:
      19px;
  }

}


/* TCN_STACKED_CHANNEL_CHART */

.web-stack-area {
  fill: rgba(47, 79, 127, 0.20);
}

.shopee-stack-area {
  fill: rgba(243, 111, 33, 0.24);
}

.web-boundary-line {
  fill: none;
  stroke: var(--web);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.legend-swatch {
  width: 13px;
  height: 8px;
  display: inline-block;
  border-radius: 2px;
}

.legend-swatch.web {
  background: var(--web);
}

.legend-swatch.shopee {
  background: var(--shopee);
}



/* =====================================================
   TCN SHOPIFY STACKED AREA V2
   ===================================================== */

.web-stack-area {
  fill: url(#webAreaGradient);
  stroke: none;
}

.shopee-stack-area {
  fill: url(#shopeeAreaGradient);
  stroke: none;
}


/*
 * WEB boundary remains visible but subtle.
 * Think Shopify's first-series line.
 */
.web-boundary-line {
  fill: none;
  stroke: #345f9d;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.92;
}


/*
 * Combined WEB + SHOPEE total.
 */
.current-line {
  fill: none;
  stroke: #29a9d6;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/*
 * Comparison deliberately fades backward.
 */
.comparison-line {
  fill: none;
  stroke: #b4e2f0;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2 7;
  opacity: 0.9;
}


.legend-swatch.web {
  background: rgba(52, 95, 157, 0.80);
}

.legend-swatch.shopee {
  background: rgba(243, 111, 33, 0.82);
}


@media (max-width: 720px) {

  .current-line {
    stroke-width: 2.5;
  }

  .web-boundary-line {
    stroke-width: 1.35;
  }

  .comparison-line {
    stroke-width: 2.2;
  }

}


/* =====================================================
   TELEGRAM MINI APP MOBILE SHELL
   ===================================================== */

html,
body {
  min-height:
    var(
      --tg-viewport-height,
      100vh
    );
}


@media
(max-width: 720px) {

  body {
    overscroll-behavior:
      none;
  }


  .app-shell {
    min-height:
      var(
        --tg-viewport-height,
        100vh
      );

    padding-left:
      env(
        safe-area-inset-left
      );

    padding-right:
      env(
        safe-area-inset-right
      );
  }


  .analytics-card {
    border-radius:
      12px;
  }


  .chart-tooltip {
    max-width:
      calc(
        100vw -
        40px
      );
  }

}


/* =====================================================
   MOBILE CHART SCALE + QUICK RANGE TABS
   ===================================================== */

.chart-wrap {
  width: 100%;
}


.chart-wrap svg {
  display: block;

  width: 100%;

  height: 100%;
}


/* Shopify-ish compact range shortcuts */

.quick-range-tabs {
  display: flex;

  align-items: center;

  gap: 7px;

  margin:
    9px 0
    12px;

  overflow-x: auto;

  overscroll-behavior-x:
    contain;

  scrollbar-width:
    none;

  -webkit-overflow-scrolling:
    touch;
}


.quick-range-tabs::-webkit-scrollbar {
  display: none;
}


.quick-range-tab {
  appearance: none;

  flex: 0 0 auto;

  min-height: 31px;

  padding:
    6px 11px;

  border:
    1px solid
    #c8c8c8;

  border-radius:
    8px;

  background:
    rgba(
      255,
      255,
      255,
      0.92
    );

  color:
    #555;

  font: inherit;

  font-size:
    11px;

  font-weight:
    520;

  line-height:
    1;

  cursor:
    pointer;

  transition:
    background-color
    120ms ease,
    border-color
    120ms ease,
    color
    120ms ease,
    box-shadow
    120ms ease;
}


.quick-range-tab:hover {
  background:
    #f7f7f7;

  border-color:
    #aaa;
}


.quick-range-tab.active {
  background:
    #303030;

  border-color:
    #303030;

  color:
    white;

  box-shadow:
    0 1px 2px
    rgba(
      0,
      0,
      0,
      0.10
    );
}


@media
(max-width: 720px) {

  /*
   * The SVG now receives an approximately
   * phone-sized viewBox instead of 1100px,
   * so this entire height becomes useful
   * plotting space.
   */
  .chart-wrap {
    height:
      300px;

    min-height:
      300px;
  }


  .chart-wrap svg {
    width:
      100%;

    height:
      300px;
  }


  .quick-range-tabs {
    width:
      100%;

    margin-top:
      8px;

    margin-bottom:
      11px;

    padding-bottom:
      1px;
  }


  .quick-range-tab {
    min-height:
      32px;

    padding:
      7px 11px;

    font-size:
      11px;
  }

}


/* =====================================================
   TCN MOBILE ANALYTICS V2
   ===================================================== */

.quick-range-tabs {
  display: flex;

  align-items: center;

  gap: 6px;

  width: 100%;

  margin:
    8px 0
    12px;

  overflow-x: auto;

  scrollbar-width: none;

  -webkit-overflow-scrolling:
    touch;
}


.quick-range-tabs::-webkit-scrollbar {
  display: none;
}


.quick-range-tab {
  appearance: none;

  flex: 0 0 auto;

  padding:
    7px 10px;

  min-height:
    31px;

  border:
    1px solid
    #c9cccf;

  border-radius:
    8px;

  background:
    #ffffff;

  color:
    #4a4a4a;

  font:
    inherit;

  font-size:
    11px;

  font-weight:
    520;

  line-height:
    1;

  white-space:
    nowrap;

  cursor:
    pointer;

  box-shadow:
    0 1px 1px
    rgba(
      0,
      0,
      0,
      0.03
    );
}


.quick-range-tab.active {
  background:
    #e8e8e8;

  border-color:
    #8c9196;

  color:
    #202223;

  font-weight:
    650;
}


@media
(max-width: 720px) {

  /*
   * The SVG viewBox now matches the actual
   * phone width, so all 285px are useful
   * graph space instead of letterboxing.
   */
  .chart-wrap {
    width:
      100%;

    height:
      285px !important;

    min-height:
      285px !important;
  }


  .sales-chart {
    display:
      block;

    width:
      100% !important;

    height:
      285px !important;

    max-width:
      none;
  }


  /*
   * Keep the legend close to the chart instead
   * of leaving a giant dead area underneath.
   */
  .chart-legend {
    margin-top:
      8px;
  }


  .quick-range-tabs {
    margin-top:
      7px;

    margin-bottom:
      11px;

    padding-right:
      3px;
  }


  .quick-range-tab {
    min-height:
      32px;

    padding:
      7px 10px;

    font-size:
      11px;
  }

}


/* TCN_CURRENCY_PILL_STYLES */

.currency-pill {
  cursor: pointer;
  user-select: none;
}


.currency-pill:not(:disabled):active {
  transform: translateY(1px);
}


.currency-pill:disabled {
  opacity: 0.62;
  cursor: wait;
}