/* Ads Master - Mini App.
   A dashboard on Telegram's palette: its blues and greys, its density, but the
   layout of an instrument panel rather than a chat. Colour is a signal about
   an ad's state, never decoration. No emoji anywhere in the interface.

   Themes: a hand-checked light/dark pair is the base. When the Telegram client
   exposes themeParams, app.js overrides the surface and text tokens with the
   user's own colours - so the app sits inside their theme - while the semantic
   tokens below stay ours. Otherwise a purple client theme would repaint the
   "this ad is dead" red into something meaningless. */

:root {
  /* surfaces and text - overridable from the client theme */
  --bg: #f4f5f7;          /* page, like a grouped list in Telegram */
  --bg-2: #eaecef;
  --surface: #ffffff;     /* sections sit on top of it */
  --text: #0f1419;
  --hint: #707a85;
  --line: #e6e9ec;
  --accent: #3390ec;          /* Telegram blue */
  --accent-weak: #e8f2fd;

  /* semantic - ours, never taken from the client */
  --ok: #279f51;
  --ok-weak: #e6f4ea;
  --warn: #c2410c;        /* pure orange: must not be mistaken for the bronze action colour */
  --warn-weak: #fdeee4;
  --bad: #d3392f;
  --bad-weak: #fdeceb;

  /* bronze - reserved for things you can press, nothing else */
  --act: #8a6531;
  --act-face: #f7f1e6;
  --act-edge: #c9a76f;
  --act-lip: rgba(255, 255, 255, .85);
  --act-shade: rgba(87, 60, 22, .18);

  --radius: 12px;
  --radius-sm: 9px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --num: "SF Mono", ui-monospace, "Roboto Mono", "Segoe UI", system-ui, monospace;
}

:root[data-theme="dark"] {
  --bg: #17212b;              /* Telegram dark chat background */
  --bg-2: #232e3c;
  --surface: #1d2733;
  --text: #ffffff;
  --hint: #7d8e9e;
  --line: #2b3746;
  --accent: #6ab7ff;
  --accent-weak: #1c2e40;

  --ok: #4dcd5e;
  --ok-weak: #16301d;
  --warn: #ff8a4c;
  --warn-weak: #3a2317;
  --bad: #f2645a;
  --bad-weak: #3a1d1b;

  --act: #e3b071;
  --act-face: #2b2419;
  --act-edge: #8a6633;
  --act-lip: rgba(255, 224, 176, .16);
  --act-shade: rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
}

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* Telegram Desktop eats wheel events on the body scroller. */
#scroll { position: fixed; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.wrap { max-width: 640px; margin: 0 auto; padding: 0 16px 72px; }

.num { font-variant-numeric: tabular-nums; }

/* --- header ------------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  padding: 14px 0 0;
}

.topbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 28px;
}

.brand {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* account dropdown */

.dd { position: relative; }

.dd-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  color: var(--act);
  background: var(--act-face);
  border: 1px solid var(--act-edge);
  border-radius: 8px;
  padding: 6px 11px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--act-lip), 0 1px 2px var(--act-shade);
}

.dd-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  min-width: 220px;
  max-width: 88vw;
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
}

:root[data-theme="dark"] .dd-menu { border-color: rgba(255, 255, 255, .10); }

.dd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 9px 10px;
  text-align: left;
  cursor: pointer;
}

.dd-item:hover { background: var(--bg-2); }
.dd-item.on { color: var(--act); font-weight: 600; }
.dd-item .sub { font-size: 11.5px; color: var(--hint); font-weight: 400; }
.dd-sep { height: 1px; margin: 5px 6px; background: var(--line); }

/* Telegram-style tabs: an underline, not a pill */
.tabs { display: flex; gap: 22px; margin-top: 10px; border-bottom: 1px solid var(--line); }

.tab {
  position: relative;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--hint);
  background: none;
  border: 0;
  padding: 8px 0 10px;
  cursor: pointer;
  transition: color .18s ease;
}

.tab.on { color: var(--accent); }

.tab.on::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--accent);
}

/* segmented period control */
.periods {
  display: flex;
  margin: 16px 0 0;
  padding: 2px;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
}

.period {
  flex: 1;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--hint);
  background: none;
  border: 1px solid transparent;   /* keeps width stable when one gets a border */
  border-radius: 7px;
  padding: 6px 0;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

/* The selected period used to differ from the rest by a barely visible shade,
   and on a client dark theme the two backgrounds nearly collapsed into one.
   It now uses the same bronze as the controls: chosen reads as pressed. */
.period.on {
  color: var(--act);
  background: var(--act-face);
  border: 1px solid var(--act-edge);
  box-shadow: inset 0 1px 0 var(--act-lip), 0 1px 2px var(--act-shade);
  font-weight: 650;
}

/* --- balance and metric strip ------------------------------------------- */

.balance { padding: 22px 0 16px; }

.balance-label {
  font-size: 12px;
  color: var(--hint);
  letter-spacing: .02em;
}

.balance-main {
  font-family: var(--num);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-top: 2px;
}

.balance-main .cur { font-size: 17px; font-weight: 500; color: var(--hint); margin-left: 5px; }

.balance-side {
  display: flex;
  gap: 18px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--hint);
}

.balance-side b { font-weight: 550; color: var(--text); font-variant-numeric: tabular-nums; }

/* four numbers separated by hairlines, not four grey boxes */
.strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.strip > div { padding: 12px 0 13px; border-left: 1px solid var(--line); text-align: center; }
.strip > div:first-child { border-left: 0; text-align: left; }

.strip-value {
  font-family: var(--num);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.strip-label { font-size: 11px; color: var(--hint); margin-top: 1px; }

/* --- status banner ------------------------------------------------------- */

.banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--bg-2);
}

.banner.bad { background: var(--bad-weak); }
.banner.ok { background: var(--ok-weak); }

.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 7px;
  flex: 0 0 8px;
  background: var(--hint);
}

.dot.bad { background: var(--bad); }
.dot.ok { background: var(--ok); }
.dot.warn { background: var(--warn); }

.banner-title { font-size: 14px; font-weight: 600; }
.banner.bad .banner-title { color: var(--bad); }
.banner.ok .banner-title { color: var(--ok); }
.banner-text { font-size: 13px; color: var(--hint); margin-top: 1px; }

/* --- ad rows ------------------------------------------------------------- */

.section-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hint);
  margin: 26px 0 10px;
}

.ads { display: grid; gap: 2px; }

/* the state stripe on the left is the main signal in the whole list */
.ad {
  position: relative;
  padding: 14px 14px 14px 16px;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.ad::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--hint);
}

.ad.s-ok::before { background: var(--ok); }
.ad.s-warn::before { background: var(--warn); }
.ad.s-bad::before { background: var(--bad); }
.ad.s-mute::before { background: var(--line); }

.ad-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }

.ad-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ad-state { font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--hint); }
.ad-state.ok { color: var(--ok); }
.ad-state.warn { color: var(--warn); }
.ad-state.bad { color: var(--bad); }

.ad-text {
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--hint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spark { display: block; width: 100%; height: 30px; margin: 12px 0 2px; }

.figures {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--hint);
}

.figures b { font-family: var(--num); font-weight: 600; color: var(--text); }

.note-line {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.45;
  background: var(--bg-2);
  color: var(--hint);
}

.note-line.bad { background: var(--bad-weak); color: var(--bad); }
.note-line.warn { background: var(--warn-weak); color: var(--warn); }

.ad-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--hint);
}

/* --- controls ------------------------------------------------------------ */

.manage-bar { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px;
              padding-top: 12px; border-top: 1px solid var(--line); }

/* Bronze, raised. Flat text links vanished on dark client themes, where the
   separator colour is nearly black. Bronze also separates "you can press this"
   from the blue used for navigation and data, so a control is never mistaken
   for a link or a chart. The relief is a light lip on top and a shadow under,
   which reads as a physical edge in both themes. */
.mini {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--act);
  background: var(--act-face);
  border: 1px solid var(--act-edge);
  border-radius: 8px;
  padding: 7px 13px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--act-lip), 0 1px 2px var(--act-shade);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.mini:hover { border-color: var(--act); }

/* chosen option in a group of chips: filled, same language as .btn */
.mini.on {
  color: #fff;
  background: linear-gradient(180deg, #a87b3d 0%, #8a6531 100%);
  border-color: #6f4f24;
}

:root[data-theme="dark"] .mini.on {
  color: #17120a;
  background: linear-gradient(180deg, #c08f4c 0%, #9a6f36 100%);
  border-color: #5e441f;
}

/* pressed: the lip goes away and the button sinks */
.mini:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 3px var(--act-shade);
}

.mini:disabled { opacity: .45; cursor: default; box-shadow: none; }
.mini.danger { color: var(--bad); border-color: var(--bad); }

:root[data-theme="dark"] .ad { border-color: rgba(255, 255, 255, .06); }
:root[data-theme="dark"] .card { border-color: rgba(255, 255, 255, .06); }
:root[data-theme="dark"] .field { background: rgba(255, 255, 255, .05);
                                  border-color: rgba(255, 255, 255, .10); }

.panel { margin-top: 12px; padding: 12px; background: var(--bg-2); border-radius: var(--radius-sm); }
.panel-row { display: flex; gap: 8px; align-items: center; margin-top: 7px; }
.panel-row .field { flex: 1; }
.panel-hint { font-size: 12px; color: var(--hint); margin-top: 9px; line-height: 1.45; }
.panel-msg { font-size: 12.5px; margin-top: 8px; }
.panel-msg.ok { color: var(--ok); }
.panel-msg.err { color: var(--bad); }

.field {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  transition: border-color .15s ease;
}

.field:focus { outline: none; border-color: var(--accent); }

/* Same bronze system, one step louder: this is the primary action. */
.btn {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(180deg, #a87b3d 0%, #8a6531 100%);
  border: 1px solid #6f4f24;
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 233, 199, .35), 0 1px 3px var(--act-shade);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

:root[data-theme="dark"] .btn {
  background: linear-gradient(180deg, #c08f4c 0%, #9a6f36 100%);
  border-color: #5e441f;
  color: #17120a;
}

.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 2px 4px var(--act-shade); }
.btn:disabled { opacity: .45; cursor: default; box-shadow: none; }

.btn.ghost {
  background: var(--act-face);
  color: var(--act);
  border: 1px solid var(--act-edge);
  font-weight: 600;
  box-shadow: inset 0 1px 0 var(--act-lip), 0 1px 2px var(--act-shade);
}

/* --- settings ------------------------------------------------------------ */

.card {
  margin-top: 16px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.card h3 { margin: 0 0 5px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.card p { margin: 0 0 12px; font-size: 13.5px; color: var(--hint); }
.row { display: flex; gap: 10px; align-items: center; margin-top: 12px; }

.acct-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}

.acct-item:last-child { border-bottom: 0; }
.acct-name { font-size: 14px; font-weight: 600; }
.acct-sub { font-size: 12px; color: var(--hint); }

.tag {
  font-size: 11px; font-weight: 600;
  color: var(--accent); background: var(--accent-weak);
  border-radius: 5px; padding: 1px 6px; margin-left: 6px;
}

.note { font-size: 12.5px; color: var(--hint); line-height: 1.5; margin-top: 12px; }
.note code { font-family: var(--num); font-size: 11.5px; color: var(--text); }

/* --- states -------------------------------------------------------------- */

.empty { text-align: center; padding: 56px 16px; color: var(--hint); font-size: 14px; }
.skeleton { background: var(--bg-2); border-radius: var(--radius); height: 76px; margin-top: 10px;
            animation: pulse 1.4s ease-in-out infinite; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

.hidden { display: none !important; }
.fade { animation: fade .22s ease both; }

@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* --- detail screen -------------------------------------------------------- */

.chart { margin-bottom: 18px; }

.chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.chart-title { font-size: 13px; font-weight: 600; }
.chart-max { font-size: 11.5px; color: var(--hint); font-variant-numeric: tabular-nums; }
.chart-svg { display: block; width: 100%; height: 64px; }

.chart-axis {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--hint);
  font-variant-numeric: tabular-nums;
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
  font-size: 12px;
  color: var(--hint);
  background: var(--bg-2);
  border-radius: 7px;
  padding: 4px 9px;
}

.tx {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.tx:last-child { border-bottom: 0; }
.tx-when { color: var(--hint); font-variant-numeric: tabular-nums; min-width: 42px; }
.tx-what { flex: 1; color: var(--text); }
.tx-amt { font-variant-numeric: tabular-nums; font-weight: 600; }
.tx-amt.out { color: var(--hint); }
.tx-amt.in { color: var(--ok); }