@font-face {
  font-family: "Onest";
  src: url("/fonts/onest/Onest%5Bwght%5D.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Oswald";
  src: url("/fonts/oswald/Oswald%5Bwght%5D.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  font-family: "Onest", "Segoe UI Variable", system-ui, sans-serif;
  color: #f3f1f7;
  background: #111015;
  --void: #111015;
  --carbon: #18171d;
  --surface: #1e1c25;
  --surface-raised: #26232e;
  --surface-ink: #14131a;
  --line: rgba(240, 236, 255, 0.1);
  --line-strong: rgba(232, 224, 255, 0.2);
  --text: #f3f1f7;
  --muted: #aaa6b8;
  --quiet: #787483;
  --silver: #d7d2df;
  --violet: #c3a6ff;
  --violet-bright: #dfceff;
  --violet-soft: rgba(195, 166, 255, 0.16);
  --green: #8ed6a7;
  --red: #ef9a9c;
  --amber: #e3bd79;
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.34);
  --font-numeric: "Oswald", "Arial Narrow", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; }

body {
  min-height: 100vh;
  margin: 0;
  background: #040408 url("/assets/catalog-liquid-backplate-v1.png") center center / cover fixed;
}

body::before,
body::after {
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  content: "";
}

body::before {
  background:
    linear-gradient(90deg, rgba(2, 3, 6, 0.08), transparent 47%, rgba(3, 4, 8, 0.1)),
    linear-gradient(180deg, rgba(2, 3, 6, 0.04), transparent 56%, rgba(2, 3, 6, 0.12));
}

body::after {
  opacity: 0.42;
  background: linear-gradient(112deg, transparent 24%, rgba(187, 164, 255, 0.07) 46%, transparent 67%);
}

button, input, select { font: inherit; }

button, input, select {
  min-height: 40px;
  max-width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: rgba(8, 10, 20, 0.14);
  color: var(--text);
  padding: 9px 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(195, 166, 255, 0.08);
  backdrop-filter: blur(12px) saturate(145%) brightness(1.05);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
}

button { cursor: pointer; font-weight: 690; }
button:hover { border-color: rgba(223, 206, 255, 0.38); background: rgba(255, 255, 255, 0.075); }
button:active { transform: translateY(1px); }

button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
}

input::placeholder { color: var(--quiet); }
input[type="file"] { color: var(--muted); padding: 5px 8px; }
input[type="file"]::file-selector-button { margin-right: 8px; }
select { appearance: auto; }

.file-picker {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  overflow: hidden;
  border: 1px dashed rgba(223, 206, 255, 0.28);
  border-radius: 9px;
  background: rgba(195, 166, 255, 0.055);
  color: var(--silver);
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 650;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.file-picker::before { margin-right: 8px; color: var(--violet); content: "+"; font-size: 17px; line-height: 1; }
.file-picker:hover { border-color: var(--violet); background: rgba(195, 166, 255, 0.12); color: #fff; }
.file-picker input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }

.page-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 26px;
  min-height: 82px;
  padding: 14px clamp(18px, 4vw, 56px);
  border-bottom: 1px solid rgba(240, 236, 255, 0.1);
  background: linear-gradient(108deg, rgba(255, 255, 255, 0.2), transparent 22%, rgba(202, 181, 255, 0.045) 72%, rgba(255, 255, 255, 0.08)), rgba(5, 7, 16, 0.055);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 -1px 0 rgba(195, 166, 255, 0.22);
  backdrop-filter: blur(15px) saturate(155%) brightness(1.06);
}

.page-header h1 {
  margin: 0;
  color: #f7f4fc;
  font-size: 28px;
  font-weight: 790;
  line-height: 1;
  white-space: nowrap;
}
.brand-placeholder { min-width: 210px; min-height: 28px; }

.page-header h1::first-letter { color: var(--violet-bright); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-actions button { min-height: 42px; }
.primary-action {
  border-color: rgba(215, 194, 255, 0.65);
  background:
    linear-gradient(125deg, rgba(222, 199, 255, 0.3), rgba(130, 94, 188, 0.2)),
    rgba(66, 47, 94, 0.58);
  color: #fcfaff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 7px 16px rgba(69, 45, 103, 0.22);
}

.primary-action:hover {
  border-color: var(--violet-bright);
  background: linear-gradient(125deg, rgba(232, 213, 255, 0.39), rgba(148, 104, 211, 0.32)), rgba(66, 47, 94, 0.7);
}

main {
  width: min(100%, 1720px);
  margin: 0 auto;
  padding: 26px clamp(18px, 4vw, 56px) 72px;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.toolbar form,
.toolbar label,
.new-item form,
.monthly-values,
.item-actions {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 10px;
}

.portfolio-control,
.portfolio-select-row,
.rate-form,
.rename-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.portfolio-control > label,
.rate-label {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: var(--quiet);
  white-space: nowrap;
}

.portfolio-control > label { margin-right: 2px; }
.portfolio-select-row { position: relative; }
.portfolio-tabs {
  display: inline-flex;
  align-items: center;
  max-width: min(280px, 42vw);
  gap: 3px;
  overflow: auto hidden;
  padding: 3px;
  border: 1px solid rgba(225, 216, 248, 0.18);
  border-radius: 11px;
  background: rgba(12, 12, 16, 0.42);
  scrollbar-width: none;
}
.portfolio-tabs::-webkit-scrollbar { display: none; }
.portfolio-tab {
  min-height: 34px;
  border-color: transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  padding: 7px 13px;
  font-size: 12px;
  font-weight: 720;
  white-space: nowrap;
}
.portfolio-tab:hover { border-color: transparent; background: rgba(255, 255, 255, 0.075); color: var(--text); }
.portfolio-tab[aria-selected="true"] {
  border-color: rgba(224, 205, 255, 0.52);
  background: linear-gradient(135deg, rgba(215, 192, 255, 0.24), rgba(119, 85, 170, 0.18));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 4px 14px rgba(104, 70, 156, 0.18);
  color: #fff;
}
.portfolio-select-native {
  position: absolute;
  width: 1px !important;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.icon-button {
  width: 40px;
  min-height: 40px;
  padding: 0;
  border-color: rgba(195, 166, 255, 0.32);
  background: rgba(195, 166, 255, 0.09);
  color: var(--violet);
  font-size: 18px;
  line-height: 1;
}

.icon-button:hover { color: #fff; background: rgba(195, 166, 255, 0.2); }
.rate-form { flex-wrap: nowrap; margin-left: 0; }
.rate-label { color: #cfc5dd; font-size: 12px; font-weight: 720; }
.rename-form input { width: 150px; }

label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 680;
  letter-spacing: 0;
}

.toolbar label { min-width: 126px; }
.toolbar form label { min-width: 150px; }
.toolbar input { width: 170px; }
.toolbar .portfolio-control > label { min-width: 0; margin-right: -2px; font-size: 10px; }
.toolbar .portfolio-select-row select { font-size: 13px; }
.toolbar .rate-form { align-items: center; }

.catalog-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.filters {
  --filter-index: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(84px, 1fr));
  width: min(100%, 484px);
  overflow: hidden;
  padding: 4px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: linear-gradient(130deg, rgba(255, 255, 255, 0.2), transparent 34%, rgba(209, 189, 255, 0.055)), rgba(5, 8, 18, 0.06);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 -1px 0 rgba(175, 145, 255, 0.14);
  backdrop-filter: blur(13px) saturate(160%) brightness(1.08);
}

.filters::before {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / 4);
  border: 1px solid rgba(224, 205, 255, 0.52);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(215, 192, 255, 0.24), rgba(119, 85, 170, 0.18));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 4px 14px rgba(104, 70, 156, 0.18);
  content: "";
  transform: translateX(calc(var(--filter-index) * 100%));
  transition: transform 240ms cubic-bezier(.2, .8, .2, 1);
}

.filters button {
  position: relative;
  z-index: 1;
  min-height: 36px;
  border-color: transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 720;
}

.filters button:hover { background: transparent; color: var(--text); }
.filters button[aria-pressed="true"] { color: #fff; box-shadow: none; }

.collapsed-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(92px, 1fr));
  width: 100%;
  min-width: 0;
  margin: 0 0 20px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0.19), transparent 28%, rgba(199, 178, 255, 0.05) 76%), rgba(7, 10, 23, 0.07);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 -1px 0 rgba(182, 151, 255, 0.13);
  backdrop-filter: blur(14px) saturate(160%) brightness(1.07);
}

.summary-kpi { min-width: 0; padding: 10px 13px 9px; border-right: 1px solid var(--line); }
.summary-kpi:last-child { border-right: 0; }
.summary-kpi strong, .summary-kpi span { display: block; overflow-wrap: anywhere; }
.summary-kpi strong { color: #f6f3fa; font-family: var(--font-numeric); font-size: 18px; font-weight: 540; line-height: 1; font-variant-numeric: tabular-nums; }
.summary-kpi span { margin-top: 6px; color: var(--quiet); font-size: 9px; font-weight: 700; }
.summary-kpi-profit { background: linear-gradient(135deg, rgba(142, 214, 167, 0.14), rgba(195, 166, 255, 0.12)); }
.summary-kpi-profit strong { color: var(--green); }

.new-item, .telegram-panel {
  display: grid;
  gap: 13px;
  margin-bottom: 24px;
  padding: 15px 16px 17px;
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  background: linear-gradient(122deg, rgba(255, 255, 255, 0.2), transparent 28%, rgba(201, 181, 255, 0.05)), rgba(7, 10, 23, 0.075);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 -1px 0 rgba(182, 151, 255, 0.13);
  backdrop-filter: blur(14px) saturate(160%) brightness(1.07);
}

h2 { margin: 0; color: #f5f2f9; font-size: 17px; font-weight: 760; }
.new-item form { align-items: end; }
.new-item form label { min-width: 170px; }
.new-item form label:nth-child(3) { min-width: min(310px, 100%); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.telegram-status { color: var(--muted); font-size: 12px; font-weight: 700; }
.status-positive { color: var(--green); }
.status-warning { color: var(--amber); }
.status-negative { color: var(--red); }
.telegram-panel form { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; }
.telegram-panel form label { min-width: 220px; }
.telegram-panel form label:first-child { min-width: min(360px, 100%); }
.telegram-panel input { width: 100%; }
.telegram-hint { margin: 0; color: var(--muted); font-size: 12px; }
.discovered-channels { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 12px; }
.discovered-channels button { min-height: 32px; padding: 6px 10px; font-size: 11px; }

#message { min-height: 0; margin: 0 0 12px; color: var(--red); font-size: 13px; }

.month {
  position: relative;
  margin: 0 0 16px;
  overflow: visible;
  border: 1px solid rgba(225, 216, 248, 0.18);
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.22), transparent 25%, rgba(205, 184, 255, 0.055) 73%, rgba(255, 255, 255, 0.08)), rgba(6, 9, 22, 0.055);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.38), inset 0 -1px 0 rgba(190, 160, 255, 0.16);
  backdrop-filter: blur(15px) saturate(165%) brightness(1.08);
}

.month::before { position: absolute; top: 0; right: 16px; left: 16px; height: 1px; background: linear-gradient(90deg, transparent, rgba(218, 194, 255, 0.52), transparent); content: ""; }
.month[open] { border-color: rgba(201, 177, 246, 0.36); }
.month summary { cursor: pointer; padding: 16px 18px; color: #f5f2fa; font-size: 14px; font-weight: 780; letter-spacing: 0; }
.month summary::marker { color: var(--violet); }
.month-body { border-top: 1px solid var(--line); }
.month[open] .month-body { animation: month-reveal 220ms ease-out both; }

.kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(100px, 1fr)) minmax(164px, 1.25fr);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(2, 4, 10, 0.14), rgba(195, 166, 255, 0.045), rgba(2, 4, 10, 0.12));
}

.kpi { min-width: 0; padding: 16px 14px 15px; border-right: 1px solid var(--line); }
.kpi:last-child { border-right: 0; background: linear-gradient(135deg, rgba(142, 214, 167, 0.15), rgba(195, 166, 255, 0.1)); }
.kpi strong, .kpi span { display: block; overflow-wrap: anywhere; }
.kpi strong { color: #f6f3fa; font-family: var(--font-numeric); font-size: 23px; font-weight: 550; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi:last-child strong { color: var(--green); }
.kpi span { margin-top: 7px; color: var(--quiet); font-size: 10px; font-weight: 700; }
.kpi-profit-stack {
  display: grid;
  grid-column: 7;
  grid-row: 1;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  min-width: 164px;
  background: linear-gradient(135deg, rgba(142, 214, 167, 0.15), rgba(195, 166, 255, 0.1));
}
.profit-kpi { min-width: 0; padding: 14px; }
.profit-kpi + .profit-kpi { border-top: 1px solid var(--line); }
.profit-kpi strong,
.profit-kpi span { display: block; overflow-wrap: anywhere; }
.profit-kpi strong { color: var(--green); font-family: var(--font-numeric); font-size: 20px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.profit-kpi span { margin-top: 6px; color: var(--quiet); font-size: 9px; font-weight: 700; }

.monthly-values { align-items: end; padding: 15px 16px 16px; border-bottom: 1px solid var(--line); background: rgba(5, 8, 15, 0.04); }
.monthly-values label { min-width: 150px; }
.monthly-values input { width: 150px; }
.monthly-values button { margin-left: 4px; }

.items { display: grid; gap: 13px; padding: 16px; }

.item {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  position: relative;
  width: 100%;
  min-height: 210px;
  overflow: visible;
  border: 1px solid rgba(233, 227, 246, 0.16);
  border-radius: 14px;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.2), transparent 22%, rgba(204, 182, 255, 0.05) 76%, rgba(255, 255, 255, 0.07)), rgba(5, 8, 21, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(182, 151, 255, 0.13), 0 12px 26px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(14px) saturate(165%) brightness(1.07);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.item::after { position: absolute; top: 16px; bottom: 16px; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: rgba(195, 166, 255, 0.45); content: ""; }
.item:hover { border-color: rgba(218, 201, 248, 0.3); box-shadow: 0 11px 28px rgba(0, 0, 0, 0.19), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.item.item-sold::after { background: var(--green); }
.item.item-no_revenue::after { background: var(--amber); }
.item > div { min-width: 0; }

.item-content { display: flex; min-width: 0; min-height: 210px; position: relative; z-index: 1; flex-direction: column; justify-content: space-between; padding: 15px 19px 14px; }
.photo { width: 210px; height: auto; min-height: 210px; align-self: stretch; display: grid; place-items: center; overflow: hidden; border: 0; border-right: 1px solid rgba(232, 225, 247, 0.13); border-radius: 13px 0 0 13px; background: linear-gradient(145deg, rgba(42, 39, 51, 0.82), rgba(8, 10, 16, 0.88)); color: var(--quiet); font-size: 11px; font-weight: 650; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045), inset -18px 0 30px rgba(0, 0, 0, 0.16); }
.photo-button { min-height: 0; padding: 0; cursor: zoom-in; }
.photo-button:hover { border-color: transparent; background: linear-gradient(145deg, rgba(42, 39, 51, 0.82), rgba(8, 10, 16, 0.88)); }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.photo-viewer { width: auto; max-width: min(94vw, 1040px); max-height: 88vh; margin: auto; overflow: hidden; border: 1px solid rgba(218, 198, 255, 0.38); border-radius: 18px; background: rgba(7, 9, 14, 0.76); padding: 8px; box-shadow: 0 28px 80px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.14); backdrop-filter: blur(28px) saturate(135%); cursor: zoom-out; }
.photo-viewer::backdrop { background: rgba(1, 2, 5, 0.78); backdrop-filter: blur(9px); }
.photo-viewer img { display: block; max-width: calc(94vw - 16px); max-height: calc(88vh - 16px); border-radius: 12px; object-fit: contain; }

.item-data { display: grid; grid-template-columns: repeat(5, minmax(112px, 1fr)); width: min(100%, 980px); gap: 14px 11px; margin: 0; }
.item-data div { min-width: 0; }
.item-data dt { color: var(--quiet); font-size: 10px; font-weight: 700; }
.item-data dd { margin: 4px 0 0; overflow-wrap: anywhere; color: #eeeaf4; font-family: var(--font-numeric); font-size: 17px; font-weight: 520; font-variant-numeric: tabular-nums; }
.item-data .item-status { font-family: "Onest", "Segoe UI Variable", system-ui, sans-serif; font-size: 13px; font-weight: 760; letter-spacing: 0; }
.item-data .metric-cost { color: var(--violet-bright); font-size: 20px; font-weight: 650; text-shadow: 0 0 16px rgba(202, 177, 255, 0.18); }
.item-data .metric-positive { color: var(--green) !important; font-size: 21px; font-weight: 720; text-shadow: 0 0 17px rgba(142, 214, 167, 0.2); }
.item-data .metric-negative { color: var(--red) !important; font-size: 20px; font-weight: 690; text-shadow: 0 0 14px rgba(239, 154, 156, 0.15); }
.item-data .metric-profit { font-size: 25px; font-weight: 800; letter-spacing: 0; }
.item-data .item-profit-cell {
  min-width: 0;
  padding: 8px 10px 9px;
  border: 1px solid rgba(222, 226, 232, 0.2);
  border-radius: 10px;
  background: #0d1013;
}
.item-data .item-profit-cell.metric-positive {
  border-color: rgba(110, 255, 153, 0.72);
  box-shadow: 0 0 0 1px rgba(110, 255, 153, 0.2), 0 0 18px rgba(110, 255, 153, 0.36), inset 0 0 18px rgba(110, 255, 153, 0.08);
}
.item-data .item-profit-cell.metric-negative {
  border-color: rgba(255, 112, 122, 0.76);
  box-shadow: 0 0 0 1px rgba(255, 112, 122, 0.2), 0 0 18px rgba(255, 72, 85, 0.34), inset 0 0 18px rgba(255, 72, 85, 0.08);
}
.item-data .item-profit-cell dt { color: #b9bdc5; }
.item-data .item-profit-cell dd { margin-top: 5px; }
.status-sold { color: var(--green) !important; text-shadow: 0 0 14px rgba(142, 214, 167, 0.2); }
.status-in_stock { color: var(--amber) !important; text-shadow: 0 0 14px rgba(227, 189, 121, 0.18); }
.status-no_revenue { color: var(--violet-bright) !important; text-shadow: 0 0 14px rgba(195, 166, 255, 0.22); }
.item-footer { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-top: 18px; }
.item-footer > form { display: flex; align-items: end; flex-wrap: wrap; gap: 8px; }
.item-footer input { width: 176px; font-family: var(--font-numeric); font-size: 17px; }
.item-footer button { min-height: 36px; font-size: 12px; }

.item.is-menu-open { z-index: 10; }
.item-menu-wrap { position: absolute; top: 12px; right: 12px; z-index: 2; }
.item-menu-button { width: 40px; min-height: 40px; padding: 0 0 8px; border-color: rgba(225, 214, 249, 0.18); background: rgba(12, 12, 16, 0.2); color: var(--muted); font-size: 22px; line-height: 1; }
.item-menu-button:hover, .item-menu-button[aria-expanded="true"] { border-color: rgba(215, 191, 255, 0.54); background: rgba(195, 166, 255, 0.17); color: #fff; }
.item-menu { position: absolute; top: calc(100% + 7px); right: 0; z-index: 12; display: grid; width: 242px; max-width: calc(100vw - 34px); min-width: 0; gap: 7px; padding: 10px; border: 1px solid rgba(222, 205, 250, 0.28); border-radius: 12px; background: linear-gradient(145deg, rgba(30, 31, 45, 0.88), rgba(10, 13, 21, 0.92)); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08); backdrop-filter: blur(26px) saturate(134%); }
.item-menu form { display: grid; gap: 6px; }
.item-menu label { min-width: 0; }
.item-menu .file-picker { min-height: 35px; margin-top: 1px; padding: 7px 10px; }
.menu-fields { display: grid; gap: 4px; }
.menu-field-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.menu-field-row > div { display: grid; gap: 3px; min-width: 0; }
.menu-field-row span { color: var(--muted); font-size: 10px; }
.menu-field-row strong { overflow-wrap: anywhere; color: var(--text); font-family: var(--font-numeric); font-size: 16px; font-weight: 520; font-variant-numeric: tabular-nums; }
.menu-edit-button { width: 29px; min-height: 29px; padding: 0; color: var(--violet); font-size: 15px; line-height: 1; }
.menu-edit-button:hover { color: #fff; background: var(--violet-soft); }
.menu-edit-button:disabled { cursor: not-allowed; opacity: 0.38; }
.item-editor { padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: rgba(9, 9, 12, 0.3); }
.item-editor label { gap: 5px; font-size: 10px; }
.item-editor input { width: 100%; }
.item-editor button, .item-menu > form button, .item-menu .danger { min-height: 34px; font-size: 11px; }
.item-menu .danger { width: 100%; }
.danger { border-color: rgba(239, 154, 156, 0.28); color: var(--red); }
.danger:hover { border-color: rgba(239, 154, 156, 0.58); background: rgba(239, 154, 156, 0.1); }
.empty { margin: 0; padding: 22px 16px; color: var(--quiet); font-size: 13px; }

@keyframes month-reveal {
  from { opacity: 0.55; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1400px) {
  .page-header { grid-template-columns: minmax(0, 1fr) auto; }
  .page-header .toolbar { grid-column: 1 / -1; order: 3; }
  .kpis { grid-template-columns: repeat(3, minmax(120px, 1fr)) minmax(154px, 1.2fr); }
  .kpi:last-child { grid-column: 4; grid-row: 1 / span 2; }
  .kpi-profit-stack { grid-column: 4; grid-row: 1 / span 2; }
  .item-data { grid-template-columns: repeat(3, minmax(110px, 1fr)); }
}

@media (max-width: 860px) {
  .page-header { gap: 16px; }
  .toolbar { gap: 13px; }
  .catalog-controls { align-items: stretch; flex-direction: column; }
  .filters { width: 100%; max-width: none; }
  .collapsed-summary { width: 100%; min-width: 0; }
  .item { grid-template-columns: 152px minmax(0, 1fr); min-height: 184px; }
  .item-content { min-height: 184px; }
  .photo { width: 152px; min-height: 184px; }
  .item-data { grid-template-columns: repeat(3, minmax(104px, 1fr)); }
}

@media (max-width: 620px) {
  .page-header, main { padding-right: 14px; padding-left: 14px; }
  .page-header { grid-template-columns: minmax(0, 1fr); min-height: 64px; padding-top: 11px; padding-bottom: 11px; }
  .page-header h1 { font-size: 22px; }
  .header-actions { justify-content: flex-start; flex-wrap: wrap; gap: 6px; }
  .header-actions button { min-height: 38px; padding-right: 10px; padding-left: 10px; font-size: 12px; }
  .page-header .toolbar { grid-column: 1 / -1; }
  .toolbar { align-items: stretch; flex-wrap: wrap; gap: 10px; }
  .portfolio-control, .rate-form { align-items: stretch; flex: 1 1 100%; flex-wrap: wrap; }
  .portfolio-control { justify-content: space-between; }
  .portfolio-control > label, .rate-label { align-self: center; }
  .portfolio-select-row { flex: 1; justify-content: flex-end; }
  .portfolio-select-row select { min-width: 0; flex: 1; }
  .rate-form input { flex: 1; min-width: 0; }
  .rate-form button { flex: 0 0 auto; }
  .rename-form { width: 100%; }
  .rename-form input { flex: 1; }
  main { padding-top: 18px; }
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .filters::before { display: none; }
  .filters button[aria-pressed="true"] { border-color: rgba(224, 205, 255, 0.52); background: linear-gradient(135deg, rgba(215, 192, 255, 0.24), rgba(119, 85, 170, 0.18)); }
  .collapsed-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary-kpi-profit { grid-column: 1 / -1; border-right: 0; }
  .new-item, .telegram-panel { padding: 14px; }
  .new-item form, .monthly-values, .telegram-panel form { align-items: stretch; flex-direction: column; }
  .new-item form label, .new-item form label:nth-child(3), .monthly-values label, .telegram-panel form label, .telegram-panel form label:first-child { width: 100%; min-width: 0; }
  .new-item input, .monthly-values input, .monthly-values button, .telegram-panel form button { width: 100%; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: 14px 13px; border-bottom: 1px solid var(--line); }
  .kpi:nth-child(2n) { border-right: 0; }
  .kpi:last-child { grid-column: 1 / -1; grid-row: auto; border-bottom: 0; }
  .kpi-profit-stack { grid-column: 1 / -1; grid-row: auto; }
  .item { grid-template-columns: minmax(0, 1fr); min-height: 0; overflow: hidden; }
  .item-content { min-height: 0; padding: 14px 13px 13px; }
  .photo { width: calc(100% - 24px); min-height: 0; aspect-ratio: 4 / 3; margin: 12px 12px 0; border: 1px solid rgba(232, 225, 247, 0.13); border-radius: 11px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045), 0 10px 24px rgba(0, 0, 0, 0.2); }
  .photo img { object-fit: contain; }
  .item-data { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 11px; }
  .item-data dd { font-size: 13px; }
  .item-data div:nth-child(2) dd, .item-data div:nth-child(3) dd, .item-data div:nth-child(6) dd { font-size: 16px; }
  .item-footer { margin-top: 14px; }
  .item-footer > form, .item-footer label, .item-footer input { width: 100%; min-width: 0; }
  .item-menu-wrap { top: 9px; right: 9px; }
  .item-menu { width: min(242px, calc(100vw - 30px)); }
}

/* Glass selection controls. */
body::before {
  background:
    radial-gradient(ellipse at 52% 42%, transparent 0 26%, rgba(0, 0, 0, 0.14) 58%, rgba(0, 0, 0, 0.58) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.44), rgba(5, 7, 9, 0.12) 52%, rgba(0, 0, 0, 0.46));
}
body::after { opacity: 0; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.portfolio-select-row select.sr-only,
.analytics-heading select.sr-only {
  position: absolute;
  width: 1px !important;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.glass-select {
  position: relative;
  min-width: clamp(128px, 15vw, 210px);
}
.page-header { position: relative; z-index: 20; }
.glass-select-button {
  display: flex;
  width: 100%;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-color: rgba(240, 242, 246, 0.3);
  border-radius: 10px;
  background:
    linear-gradient(137deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.035) 18%, transparent 43%),
    rgba(3, 5, 7, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.46),
    inset 1px 0 0 rgba(255, 255, 255, 0.13),
    inset 0 -1px 0 rgba(0, 0, 0, 0.56),
    0 8px 18px rgba(0, 0, 0, 0.16);
  color: var(--text);
  text-align: left;
  backdrop-filter: blur(3px) saturate(130%);
}
.glass-select-button[aria-expanded="true"] { border-color: rgba(245, 246, 250, 0.6); background-color: rgba(255, 255, 255, 0.08); }
.glass-select-menu {
  position: absolute;
  z-index: 50;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  display: grid;
  gap: 3px;
  padding: 6px;
  border: 1px solid rgba(246, 247, 250, 0.32);
  border-radius: 12px;
  background:
    linear-gradient(138deg, rgba(255, 255, 255, 0.19), transparent 18%),
    rgba(9, 11, 14, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 20px 44px rgba(0, 0, 0, 0.44);
  backdrop-filter: blur(10px) saturate(125%);
}
@media (min-width: 621px) {
  html { scrollbar-gutter: stable; }
}
.instant-surface { scrollbar-gutter: stable; }
.glass-select-menu button {
  min-height: 34px;
  border-color: transparent;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  padding: 7px 9px;
  text-align: left;
  font-size: 12px;
  font-weight: 690;
}
.glass-select-menu button:hover,
.glass-select-menu button[aria-selected="true"] {
  border-color: rgba(247, 248, 250, 0.25);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(125, 132, 141, 0.1));
  color: #fff;
}

.analytics-hero {
  min-height: 112px;
  margin: 0;
  border-top: 0;
  border-bottom: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.38);
}

.new-item::after,
.telegram-panel::after,
.analytics-heading::after,
.analytics-group::after {
  position: absolute;
  z-index: 0;
  top: 1px;
  right: 20px;
  left: 20px;
  height: 18px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22) 47%, rgba(173, 187, 201, 0.1) 56%, transparent 100%);
  content: "";
  filter: blur(5px);
  opacity: 0.72;
  pointer-events: none;
}
.new-item > *,
.telegram-panel > *,
.analytics-heading > *,
.analytics-group > * { position: relative; z-index: 1; }
.analytics-heading,
.analytics-group,
.new-item,
.telegram-panel { position: relative; isolation: isolate; }
.analytics-heading { z-index: 15; }
.analytics-heading-actions {
  display: flex;
  align-items: end;
  gap: 10px;
}
.analytics-portfolio-control {
  display: grid;
  gap: 5px;
  min-width: 160px;
}
.analytics-portfolio-control > span,
.analytics-heading-actions > label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 720;
}
.analytics-portfolio-control .glass-select,
.analytics-heading-actions > label { min-width: 170px; }
.analytics-portfolio-control .glass-select-button { min-height: 38px; }
.settings-view { min-height: 52vh; }

@media (max-width: 620px) {
  .glass-select { min-width: 0; width: 100%; }
  .analytics-heading .glass-select { width: 100%; }
  .analytics-heading-actions { align-items: stretch; flex-direction: column; gap: 10px; }
  .analytics-portfolio-control { width: 100%; }
  .analytics-portfolio-control .glass-select,
  .analytics-heading-actions > label { width: 100%; min-width: 0; }
  .portfolio-select-row { width: 100%; }
  .portfolio-select-row .glass-select { flex: 1; }
}

@media (max-width: 390px) {
  .page-header h1 { font-size: 20px; }
  .header-actions button { padding-right: 8px; padding-left: 8px; }
  .photo { aspect-ratio: 5 / 4; }
  .item-data { gap: 10px 8px; }
  .item-data dt { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Graphite gloss: clear, reflective glass over a restrained neon backplate. */
:root {
  --void: #050506;
  --carbon: #0c0d10;
  --surface: #111216;
  --surface-raised: #17181d;
  --surface-ink: #08090b;
  --line: rgba(231, 233, 239, 0.12);
  --line-strong: rgba(237, 239, 246, 0.25);
  --text: #f4f4f6;
  --muted: #a6a7ae;
  --quiet: #74757d;
  --silver: #d5d6da;
  --violet: #9587b2;
  --violet-bright: #baacd1;
  --violet-soft: rgba(82, 70, 112, 0.17);
}

body { background-color: #030304; }
body::before {
  background:
    linear-gradient(90deg, rgba(1, 1, 2, 0.48), rgba(7, 7, 9, 0.2) 54%, rgba(8, 6, 13, 0.42)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 45%, rgba(0, 0, 0, 0.44));
}
body::after {
  opacity: 0.25;
  background: linear-gradient(117deg, transparent 29%, rgba(155, 135, 202, 0.14) 49%, transparent 67%);
}

button, input, select {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 28%),
    rgba(5, 6, 8, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 1px 0 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(2px) saturate(135%) brightness(1.06);
}

.page-header,
.filters,
.collapsed-summary,
.new-item,
.telegram-panel,
.month,
.item,
.analytics-heading,
.analytics-group {
  border-color: rgba(236, 238, 244, 0.22);
  background:
    linear-gradient(132deg, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.035) 9%, transparent 29%),
    linear-gradient(315deg, rgba(80, 81, 92, 0.11), transparent 43%),
    rgba(5, 6, 9, 0.045);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    inset 1px 0 0 rgba(255, 255, 255, 0.13),
    inset 0 -1px 0 rgba(0, 0, 0, 0.48),
    0 18px 45px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(2px) saturate(145%) brightness(1.04);
}

.page-header { background-color: rgba(3, 4, 6, 0.08); }
.page-header h1::first-letter { color: #d4d1da; }
.primary-action {
  border-color: rgba(207, 207, 216, 0.4);
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.2), rgba(55, 52, 65, 0.22)), rgba(9, 9, 12, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 8px 22px rgba(0, 0, 0, 0.2);
}
.primary-action:hover { border-color: rgba(230, 230, 236, 0.62); background: rgba(255, 255, 255, 0.12); }

.portfolio-select-row select {
  position: static;
  width: clamp(124px, 14vw, 210px) !important;
  height: auto;
  clip: auto;
  clip-path: none;
  overflow: visible;
  color: var(--text);
  font-size: 12px;
  font-weight: 720;
  white-space: normal;
}
.portfolio-tabs, .portfolio-tab { display: none; }
.icon-button { border-color: rgba(225, 226, 232, 0.24); background: rgba(255, 255, 255, 0.055); color: #c4c2ca; }
.icon-button:hover { background: rgba(255, 255, 255, 0.13); color: #fff; }

.filters::before {
  border-color: rgba(220, 219, 227, 0.4);
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.2), rgba(54, 51, 62, 0.17));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36), 0 5px 16px rgba(0, 0, 0, 0.18);
}
.month::before { background: linear-gradient(90deg, transparent, rgba(235, 236, 242, 0.46), transparent); }
.month[open] { border-color: rgba(231, 232, 238, 0.3); }
.kpis, .monthly-values { background: rgba(4, 5, 7, 0.08); }
.kpi:last-child, .summary-kpi-profit { background: linear-gradient(135deg, rgba(107, 184, 133, 0.12), rgba(65, 66, 72, 0.08)); }
.item::after { background: rgba(149, 135, 178, 0.65); }

.analytics-view { display: grid; gap: 18px; }
.analytics-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border: 1px solid var(--line-strong);
  border-radius: 13px;
}
.analytics-heading h2 { font-size: 25px; }
.analytics-heading p { margin: 7px 0 0; color: var(--muted); font-family: var(--font-numeric); font-size: 15px; }
.analytics-heading label { min-width: min(260px, 100%); }

/* Desktop analytics keeps both selectors inside the heading at every browser width. */
@media (min-width: 621px) {
  .analytics-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  }
  .analytics-heading-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
  }
  .analytics-portfolio-control,
  .analytics-heading-actions > label {
    width: 100%;
    min-width: 0 !important;
  }
  .analytics-heading-actions .glass-select,
  .analytics-heading-actions .glass-select-button {
    width: 100%;
    min-width: 0;
  }
}
.analytics-sections { display: grid; gap: 16px; }
.analytics-group {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 13px;
}
.analytics-group h3 {
  margin: 0;
  padding: 13px 17px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}
.analytics-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.analytics-group:nth-child(3) .analytics-grid,
.analytics-group:nth-child(4) .analytics-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.analytics-metric {
  display: flex;
  min-width: 0;
  min-height: 112px;
  flex-direction: column;
  justify-content: center;
  padding: 18px 17px;
  border-right: 1px solid var(--line);
  text-align: left;
}
.analytics-metric:last-child { border-right: 0; }
.analytics-metric strong {
  overflow-wrap: anywhere;
  color: #f5f5f7;
  font-family: var(--font-numeric);
  font-size: clamp(24px, 2vw, 34px);
  font-weight: 580;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.analytics-metric span { margin-top: 10px; color: var(--muted); font-size: 10px; font-weight: 720; }
.analytics-result .analytics-grid { align-items: stretch; text-align: center; }
.analytics-result .analytics-metric { align-items: center; text-align: center; }
.analytics-hero {
  position: relative;
  min-height: 138px;
  margin: -13px 0;
  border: 1px solid rgba(153, 218, 176, 0.32);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.15), transparent 29%),
    rgba(80, 160, 107, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 12px 32px rgba(0, 0, 0, 0.22);
}
.analytics-hero strong { color: var(--green); font-size: clamp(34px, 3.1vw, 50px); font-weight: 730; }
.analytics-metric-amber strong { color: var(--amber); }
.analytics-metric.metric-positive strong { color: var(--green); }
.analytics-metric.metric-negative strong { color: var(--red); }
#analyticsButton[aria-pressed="true"] { border-color: rgba(231, 232, 238, 0.48); background: rgba(255, 255, 255, 0.12); }
.danger-action { border-color: rgba(239, 154, 156, 0.3); color: var(--red); }
.danger-action:hover { border-color: rgba(239, 154, 156, 0.62); background: rgba(239, 154, 156, 0.1); }
.rename-form input { font-family: "Onest", "Segoe UI Variable", system-ui, sans-serif; font-size: 12px; font-weight: 650; }

@media (max-width: 980px) {
  .analytics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-group:nth-child(3) .analytics-grid,
  .analytics-group:nth-child(4) .analytics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-metric { border-bottom: 1px solid var(--line); }
  .analytics-metric:nth-child(2n) { border-right: 0; }
  .analytics-result .analytics-hero { grid-column: 1 / -1; grid-row: 1; margin: 0; }
}

/* Portfolio-scoped currency controls. */
.portfolio-delete-button {
  border-color: rgba(239, 154, 156, 0.24);
  color: var(--red);
  font-size: 17px;
}
.portfolio-delete-button:hover {
  border-color: rgba(239, 154, 156, 0.56);
  background: rgba(239, 154, 156, 0.1);
  color: #ffd0d1;
}

.header-actions button {
  width: 112px;
  min-height: 38px;
  padding: 7px 10px;
  font-size: 12px;
}

.rate-form {
  position: relative;
  display: grid;
  overflow: visible;
}
.rate-main-row {
  display: flex;
  align-items: center;
  gap: 7px;
}
.rate-main-row input { width: 116px; }
.rate-main-row .compact-action,
.currency-panel-button {
  min-height: 36px;
  padding: 7px 10px;
  font-size: 11px;
  white-space: nowrap;
}
.currency-panel-button {
  border-color: rgba(226, 220, 238, 0.25);
  color: #d6d2dc;
}
.currency-panel-button[aria-expanded="true"] {
  border-color: rgba(242, 243, 247, 0.52);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.currency-panel {
  position: absolute;
  z-index: 70;
  top: calc(100% + 10px);
  right: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(210px, 1fr));
  width: min(520px, calc(100vw - 28px));
  gap: 12px;
  padding: 13px;
  border: 1px solid rgba(246, 247, 250, 0.34);
  border-radius: 13px;
  background:
    linear-gradient(138deg, rgba(255, 255, 255, 0.2), transparent 19%),
    rgba(6, 8, 10, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.44), 0 24px 48px rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(12px) saturate(130%);
}
.currency-panel::before {
  position: absolute;
  top: 1px;
  right: 20px;
  left: 20px;
  height: 12px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  content: "";
  filter: blur(4px);
  pointer-events: none;
}
.currency-panel-close {
  z-index: 1;
  grid-column: 1 / -1;
  justify-self: end;
  width: 30px;
  min-width: 30px;
  min-height: 30px;
  padding: 0 0 2px;
  border-radius: 9px;
  color: #dfe1e6;
  font-size: 19px;
  line-height: 1;
}
.currency-panel > label { min-width: 0; }
.currency-panel > p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--quiet);
  font-size: 10px;
}
.currency-select { width: 100%; min-width: 0; }
.currency-select .glass-select-button { min-height: 38px; font-size: 11px; }
.currency-select .glass-select-menu { min-width: 228px; max-height: 310px; overflow-y: auto; }
.currency-select:last-of-type .glass-select-menu { right: 0; left: auto; width: 100%; }

@media (max-width: 760px) {
  .rate-main-row { flex-wrap: wrap; width: 100%; }
  .rate-main-row input { flex: 1 1 108px; width: auto; }
  .currency-panel { position: fixed; top: auto; right: 14px; bottom: 14px; left: 14px; width: auto; }
  .header-actions button { width: auto; min-width: 94px; }
}

@media (max-width: 480px) {
  .currency-panel { grid-template-columns: minmax(0, 1fr); }
  .currency-panel > p { grid-column: 1; }
  .currency-select .glass-select-menu { min-width: 0; }
}

@media (max-width: 620px) {
  /* iOS Safari zooms controls below 16px when they receive focus. */
  input, select, textarea { font-size: 16px !important; }
  .analytics-heading { align-items: stretch; flex-direction: column; padding: 15px; }
  .analytics-heading label, .analytics-heading select { width: 100%; }
  .analytics-group h3 { padding-left: 13px; }
  .analytics-metric { min-height: 92px; padding: 14px 12px; }
  .analytics-metric strong { font-size: 23px; }
  .analytics-hero strong { font-size: 36px; }
  .portfolio-select-row { flex-wrap: nowrap; }
}

/* Unified motion and the supplied dragon artwork, rendered as a blurred backdrop. */
:root { --surface-motion: 420ms; }

body {
  background: #030405 url("/assets/catalog-user-backdrop.jpg") center / cover fixed;
  overflow-x: hidden;
}
body::before {
  background: transparent;
  opacity: 0;
  filter: none;
  transform: none;
}
body::after {
  inset: 0;
  opacity: 1;
  background:
    radial-gradient(ellipse at 52% 42%, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.34) 78%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.24), transparent 48%, rgba(0, 0, 0, 0.28));
}

.surface-enter {
  animation: surface-reveal var(--surface-motion) cubic-bezier(.18, .78, .22, 1) both;
}
.surface-exit {
  pointer-events: none;
  animation: surface-dismiss var(--surface-motion) cubic-bezier(.44, 0, .76, .24) both;
}
@keyframes surface-reveal {
  from { opacity: 0; transform: translateY(-9px) scale(0.985); filter: brightness(1.2); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}
@keyframes surface-dismiss {
  from { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
  to { opacity: 0; transform: translateY(-7px) scale(0.985); filter: brightness(1.12); }
}

.glass-select-button { justify-content: flex-start; }
.glass-select-button > span:last-child,
.glass-select-button[aria-expanded="true"] > span:last-child {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  transform: none;
  transition: none;
}

.item-menu-button {
  display: grid;
  place-items: center;
  padding: 0 0 6px;
  border-color: rgba(240, 242, 246, 0.27);
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.16), transparent 43%),
    rgba(4, 6, 8, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), inset 0 -1px 0 rgba(0, 0, 0, 0.48);
  color: #d8dbe0;
  backdrop-filter: blur(3px) saturate(130%);
}
.item-menu-button:hover,
.item-menu-button[aria-expanded="true"] {
  border-color: rgba(248, 249, 252, 0.58);
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.22), transparent 43%),
    rgba(28, 30, 35, 0.18);
  color: #fff;
}
.item-menu {
  border-color: rgba(240, 242, 246, 0.3);
  background:
    linear-gradient(138deg, rgba(255, 255, 255, 0.2), transparent 18%),
    rgba(6, 8, 10, 0.68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 20px 44px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(9px) saturate(128%);
}

.analytics-result .analytics-hero {
  position: static;
  min-height: 112px;
  margin: 0;
  border: 0;
  border-right: 1px solid var(--line);
  background:
    linear-gradient(145deg, rgba(201, 255, 216, 0.16), transparent 34%),
    rgba(31, 132, 68, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(225, 255, 234, 0.42),
    inset 0 -1px 0 rgba(5, 45, 18, 0.55),
    0 0 28px rgba(75, 232, 126, 0.12);
}

.mobile-tab-bar { display: none; }

/* The catalog gets its own dense phone layout; analytics keeps its existing rhythm. */
@media (max-width: 620px) {
  body { padding-bottom: 76px; }
  body::before {
    position: absolute;
    inset: 0;
    min-height: 100%;
    background: transparent;
    filter: none;
    transform: none;
  }
  body { background-attachment: scroll; }

  button:active { transform: none; }
  .page-header, main { padding-right: 10px; padding-left: 10px; }
  .page-header { gap: 7px; padding-top: 8px; padding-bottom: 8px; }
  .page-header h1 { min-height: 18px; }
  .brand-placeholder { min-width: 0; }
  .header-actions { display: flex; gap: 5px; }
  .header-actions button {
    width: auto;
    min-width: 0;
    min-height: 27px;
    padding: 3px 8px;
    font-size: 9px;
  }
  #analyticsButton { display: none; }

  .toolbar { display: grid; gap: 7px; }
  .portfolio-control, .rate-form { gap: 6px; }
  .portfolio-control > label { font-size: 8px; }
  .portfolio-select-row { gap: 5px; }
  .portfolio-select-row .glass-select { flex: 0 1 132px; }
  .portfolio-select-row .glass-select-button { width: 132px; }
  .portfolio-select-row button, .rate-main-row button, .rate-main-row input {
    min-height: 29px;
    border-radius: 8px;
    padding: 5px 8px;
    font-size: 9px;
  }
  .portfolio-select-row .icon-button { width: 29px; min-width: 29px; padding: 0; font-size: 13px; }
  .rate-main-row { display: grid; grid-template-columns: auto 96px auto; justify-content: start; gap: 5px; }
  .rate-label { font-size: 9px; white-space: nowrap; }
  .rate-main-row input { width: 100%; }
  .rate-main-row .compact-action:first-of-type { grid-column: 3; }
  #latestRateButton { grid-column: 1 / span 2; }
  #currencyPanelButton { grid-column: 3; }

  .analytics-active .page-header { min-height: 42px; }
  .analytics-active .page-header .toolbar,
  .analytics-active .header-actions,
  .settings-active .page-header .toolbar,
  .settings-active .header-actions { display: none; }

  .mobile-tab-bar {
    position: fixed;
    z-index: 40;
    right: 0;
    /* Overlap the visual viewport by one pixel to prevent fractional-pixel seams on mobile browsers. */
    bottom: -1px;
    left: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: 5px 8px calc(5px + env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid rgba(236, 238, 244, 0.32);
    border-radius: 0;
    isolation: isolate;
    background: #0c0d0f;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 -12px 34px rgba(0, 0, 0, 0.44);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .mobile-tab-bar::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: #0c0d0f;
    content: "";
  }
  .mobile-tab-bar button {
    min-height: 38px;
    border: 0;
    border-right: 1px solid rgba(235, 237, 242, 0.14);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 6px 8px;
    color: var(--muted);
    font-size: 10px;
    white-space: nowrap;
  }
  .mobile-tab-bar button:last-child { border-right: 0; }
  .mobile-tab-bar button[aria-pressed="true"] {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.17), rgba(82, 87, 96, 0.13));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
    color: #fff;
  }

  main { padding-top: 10px; }
  .catalog-controls { gap: 10px; }
  .filters { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 3px; }
  .filters button { min-height: 32px; padding: 4px 2px; font-size: 8px; }
  .month { border-radius: 11px; }
  .month summary { padding: 10px 12px; font-size: 11px; }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi { min-height: 66px; padding: 9px 8px; }
  .kpi:nth-child(2n) { border-right: 1px solid var(--line); }
  .kpi:nth-child(3n) { border-right: 0; }
  .kpi:last-child { grid-column: 1 / -1; min-height: 61px; }
  .kpi-profit-stack { grid-column: 1 / -1; min-height: 122px; }
  .profit-kpi { min-height: 61px; padding: 9px 8px; }
  .profit-kpi strong { font-size: 16px; }
  .profit-kpi span { margin-top: 5px; font-size: 7px; }
  .kpi strong { font-size: 16px; }
  .kpi span { margin-top: 5px; font-size: 7px; }
  .monthly-values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    padding: 10px;
  }
  .monthly-values label { width: auto; font-size: 7px; }
  .monthly-values input { min-height: 32px; padding: 5px 7px; font-size: 10px; }
  .monthly-values button { grid-column: 1 / -1; min-height: 32px; padding: 5px 8px; font-size: 10px; }
  .currency-panel { right: 10px; bottom: 10px; left: 10px; gap: 8px; padding: 10px; }
  .currency-panel label { font-size: 8px; }
  .currency-select .glass-select-button { min-height: 34px; font-size: 10px; }

  .surface-enter, .surface-exit { will-change: opacity; }
  @keyframes surface-reveal {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes surface-dismiss {
    from { opacity: 1; }
    to { opacity: 0; }
  }
}

/* Mobile viewport guards: native inputs and media must never widen their card. */
@media (max-width: 620px) {
  .new-item form { width: 100%; overflow: hidden; }
  .new-item form label,
  .new-item form input,
  .new-item form input[type="date"],
  .file-picker,
  .item,
  .item-content,
  .photo,
  .photo-button,
  .photo img { min-width: 0; max-width: 100%; }
  .new-item form label { max-width: 100%; overflow: hidden; }
  /* The shell owns the visual bounds, so the native iOS date field cannot widen the card. */
  .new-item form .new-item-date-control { width: 100%; min-width: 0; }
  .new-item form .date-input-shell {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 9px;
    background: rgba(8, 10, 20, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(195, 166, 255, 0.08);
  }
  .new-item form .date-input-shell input[type="date"] {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 40px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    min-width: 0 !important;
    padding-inline: 12px;
    overflow: hidden;
  }
  /* WebKit can keep an intrinsic date-value width unless its inner value can shrink. */
  .new-item form .date-input-shell input[type="date"]::-webkit-date-and-time-value { min-width: 0; }
  .new-item form .date-input-shell input[type="date"]::-webkit-calendar-picker-indicator { margin: 0; }
  .photo-button { width: 100%; }
  .photo { aspect-ratio: 1 / 1; }
  .photo img {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .item-menu {
    background: #11131a;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
  .item-menu-button { padding: 0; }

  .currency-panel {
    top: calc(100% + 8px);
    right: max(8px, env(safe-area-inset-right));
    bottom: auto;
    left: max(8px, env(safe-area-inset-left));
    width: auto;
    max-height: calc(100vh - 210px);
    max-height: calc(100dvh - 210px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .currency-panel-close { position: sticky; top: 0; }

  .mobile-tab-bar button,
  .mobile-tab-bar button[aria-pressed="true"] {
    position: relative;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .mobile-tab-bar button[aria-pressed="true"]::after {
    position: absolute;
    right: 18%;
    bottom: 0;
    left: 18%;
    height: 2px;
    border-radius: 2px;
    background: var(--violet-bright);
    box-shadow: 0 0 10px rgba(195, 166, 255, 0.55);
    content: "";
  }
}
.analytics-result .analytics-hero strong {
  color: var(--green);
  font-size: clamp(29px, 2.45vw, 42px);
  font-weight: 760;
  text-shadow: 0 0 20px rgba(142, 214, 167, 0.2);
}
.analytics-result .analytics-hero span { color: #c7c9ce; }
.analytics-result .analytics-metric:last-child { border-right: 0; }

/* Final mobile hardening: keep action surfaces and status rails inside the viewport. */
.item-menu {
  background: #11131a;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.item-menu-button { padding: 0; }
.item-menu-button,
.item-menu-button:hover,
.item-menu-button[aria-expanded="true"] {
  border-color: rgba(224, 227, 232, 0.32);
  background: #15171c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 18px rgba(0, 0, 0, 0.28);
  color: #e2e5e9;
}
.item-menu .menu-edit-button,
.item-menu .menu-edit-button:hover,
.item-menu > form button:not(.danger),
.item-menu .item-editor button:not(.danger) {
  border-color: rgba(224, 227, 232, 0.24);
  background: #17191f;
  box-shadow: none;
  color: #d8dbe0;
}
.item-menu .menu-edit-button:hover,
.item-menu > form button:not(.danger):hover,
.item-menu .item-editor button:not(.danger):hover {
  border-color: rgba(239, 242, 246, 0.52);
  background: #22252b;
  color: #fff;
}
.item-menu .file-picker {
  border-color: rgba(224, 227, 232, 0.24);
  background: #17191f;
  color: #d8dbe0;
}
.currency-panel {
  border-color: rgba(224, 227, 232, 0.32);
  background: #0d0f14;
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 22px 48px rgba(0, 0, 0, 0.66);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.currency-panel::before { display: none; }
.item.item-sold::after {
  background: #91f1ae;
  box-shadow: 0 0 12px rgba(110, 255, 153, 0.8), 0 0 24px rgba(110, 255, 153, 0.28);
}
.item.item-no_revenue::after {
  background: #ffd27e;
  box-shadow: 0 0 12px rgba(255, 204, 105, 0.72), 0 0 24px rgba(255, 204, 105, 0.25);
}

@media (max-width: 980px) {
  .analytics-result .analytics-hero {
    grid-column: auto;
    grid-row: auto;
    border-bottom: 1px solid var(--line);
  }
}

/* Profit is a reading cue on desktop, not another framed surface. */
.item-data .item-profit-cell {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.item-data .item-profit-cell.metric-positive,
.item-data .item-profit-cell.metric-negative {
  border-color: transparent;
  box-shadow: none;
}
.item-data .item-profit-cell dt { color: #b9bdc5; }
.item-data .item-profit-cell dd { margin-top: 4px; }
.item-data .item-profit-cell.metric-positive .metric-profit {
  color: #a1f5bb !important;
  text-shadow: 0 0 5px rgba(150, 255, 187, 0.9), 0 0 16px rgba(110, 255, 153, 0.76), 0 0 34px rgba(73, 230, 119, 0.48);
}
.item-data .item-profit-cell.metric-negative .metric-profit {
  color: #ff9ca4 !important;
  text-shadow: 0 0 5px rgba(255, 174, 181, 0.86), 0 0 16px rgba(255, 105, 117, 0.72), 0 0 34px rgba(244, 62, 79, 0.44);
}

/* The Item editor is intentionally a single opaque graphite material. */
.item-menu {
  border-color: rgba(230, 232, 235, 0.22);
  background: #121314 !important;
  background-image: none !important;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.11);
}
.item-menu::before { display: none !important; }
.item-menu .menu-field-row { border-bottom-color: rgba(232, 234, 238, 0.12); }
.item-menu .menu-edit-button,
.item-menu .menu-edit-button:hover,
.item-menu > form button:not(.danger),
.item-menu .item-editor button:not(.danger),
.item-menu .file-picker,
.item-menu .item-editor,
.item-menu .item-editor input {
  border-color: rgba(230, 232, 235, 0.2) !important;
  background: #1a1b1d !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #e0e2e5 !important;
}
.item-menu .menu-edit-button:hover,
.item-menu > form button:not(.danger):hover,
.item-menu .item-editor button:not(.danger):hover {
  border-color: rgba(246, 247, 249, 0.42) !important;
  background: #242629 !important;
  color: #fff !important;
}
.item-menu .danger {
  background: #181416 !important;
  border-color: rgba(239, 154, 156, 0.38) !important;
  color: var(--red) !important;
  box-shadow: none !important;
}

.scroll-top-button { display: none; }

@media (max-width: 620px) {
  /* Fixed image backgrounds can force repeated full-page repaints in mobile webviews. */
  body { background-attachment: scroll; background-position: center top; }

  /* Keep X and sale time as a pair; profit is the card's wide focal metric. */
  .item-data > div:nth-child(7) { grid-column: 1; grid-row: 4; }
  .item-data .item-profit-cell {
    grid-column: 1 / -1;
    grid-row: 5;
    width: 100%;
    margin-left: 0;
    justify-self: stretch;
    padding: 10px 13px 12px;
    border: 1px solid rgba(222, 226, 232, 0.2);
    border-radius: 10px;
    background: #0d1013;
  }
  .item-data > div:nth-child(9) {
    grid-column: 2;
    grid-row: 4;
  }
  .item-data .item-profit-cell .metric-profit { font-size: 30px; }
  .item-data .item-profit-cell.metric-positive {
    border-color: rgba(110, 255, 153, 0.72);
    box-shadow: 0 0 0 1px rgba(110, 255, 153, 0.2), 0 0 18px rgba(110, 255, 153, 0.36), inset 0 0 18px rgba(110, 255, 153, 0.08);
  }
  .item-data .item-profit-cell.metric-negative {
    border-color: rgba(255, 112, 122, 0.76);
    box-shadow: 0 0 0 1px rgba(255, 112, 122, 0.2), 0 0 18px rgba(255, 72, 85, 0.34), inset 0 0 18px rgba(255, 72, 85, 0.08);
  }
  .scroll-top-button {
    position: fixed;
    right: max(14px, env(safe-area-inset-right));
    bottom: calc(66px + env(safe-area-inset-bottom));
    z-index: 41;
    display: grid;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid rgba(238, 240, 244, 0.3);
    border-radius: 50%;
    place-items: center;
    background: #1a1b1d;
    color: #f0f2f4;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 10px 24px rgba(0, 0, 0, 0.44);
    font-size: 23px;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px) scale(0.88);
    transition: opacity 150ms ease, transform 180ms ease, border-color 150ms ease;
  }
  .scroll-top-button.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }
  .scroll-top-button:hover {
    border-color: rgba(255, 255, 255, 0.58);
    background: #242629;
  }
}

/* Unified application navigation: its zones never compete for horizontal space. */
body { padding-bottom: 74px; }
.page-header {
  grid-template-columns: minmax(0, 1fr);
  min-height: 68px;
}
.brand-placeholder { display: none; }
.page-header .toolbar { justify-content: center; }
.header-actions { display: none !important; }
.tab-view { width: 100%; }
.tab-view > .telegram-panel,
.tab-view > .new-item { width: min(100%, 760px); margin: 0 auto 24px; }

.mobile-tab-bar {
  position: fixed;
  z-index: 40;
  right: 0;
  bottom: -1px;
  left: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  padding: 5px 12px calc(5px + env(safe-area-inset-bottom));
  border: 0;
  border-top: 1px solid rgba(236, 238, 244, 0.3);
  border-radius: 0;
  isolation: isolate;
  background: #0c0d0f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 -12px 34px rgba(0, 0, 0, 0.42);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.mobile-tab-bar::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: #0c0d0f;
  content: "";
}
.mobile-tab-bar button,
.mobile-tab-bar button[aria-pressed="true"] {
  position: relative;
  min-width: 0;
  min-height: 37px;
  border: 0;
  border-right: 1px solid rgba(235, 237, 242, 0.13);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 6px 9px;
  color: #aeb1b6;
  font-size: 11px;
  font-weight: 690;
  white-space: nowrap;
}
.mobile-tab-bar button:last-child { border-right: 0; }
.mobile-tab-bar button[aria-pressed="true"] { color: #fff; }
.mobile-tab-bar button[aria-pressed="true"]::after {
  position: absolute;
  right: 18%;
  bottom: 0;
  left: 18%;
  height: 2px;
  border-radius: 2px;
  background: var(--violet-bright);
  box-shadow: 0 0 10px rgba(195, 166, 255, 0.5);
  content: "";
}

/* The focal cells conclude their groups instead of interrupting the first row. */
.analytics-result .analytics-grid,
.analytics-efficiency .analytics-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.analytics-result .analytics-hero,
.analytics-efficiency .analytics-hero {
  grid-column: 1 / -1;
  grid-row: 2;
  min-height: 116px;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-right: 0;
  text-align: center;
}
.analytics-result .analytics-hero {
  background:
    linear-gradient(145deg, rgba(201, 255, 216, 0.16), transparent 34%),
    rgba(31, 132, 68, 0.34);
  box-shadow: inset 0 1px 0 rgba(225, 255, 234, 0.42), inset 0 -1px 0 rgba(5, 45, 18, 0.55), 0 0 28px rgba(75, 232, 126, 0.12);
}
.analytics-result .analytics-profit-half {
  grid-column: span 2;
  grid-row: 2;
}
.analytics-efficiency .analytics-hero {
  background: linear-gradient(145deg, rgba(201, 255, 216, 0.12), transparent 40%), rgba(21, 84, 46, 0.28);
  box-shadow: inset 0 1px 0 rgba(225, 255, 234, 0.28), 0 0 24px rgba(75, 232, 126, 0.1);
}
.analytics-result .analytics-hero strong,
.analytics-efficiency .analytics-hero strong {
  color: #a1f5bb;
  text-shadow: 0 0 7px rgba(150, 255, 187, 0.78), 0 0 22px rgba(73, 230, 119, 0.44);
}

/* Currency configuration is compact; currency lists are a dedicated modal layer on phones. */
.currency-panel {
  width: min(486px, calc(100vw - 28px));
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px;
  gap: 8px;
  padding: 11px;
  background: #121314 !important;
  background-image: none !important;
  border-color: rgba(230, 232, 235, 0.25);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.currency-panel-close {
  grid-column: 3;
  grid-row: 1;
  align-self: end;
  justify-self: stretch;
  width: 32px;
  min-width: 32px;
  min-height: 36px;
  border-radius: 8px;
  background: #1a1b1d;
}
.currency-panel > label { min-width: 0; }
.currency-panel > label:nth-of-type(1) { grid-column: 1; grid-row: 1; }
.currency-panel > label:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.currency-panel > p { grid-column: 1 / -1; grid-row: 2; }
.currency-select .glass-select-button {
  min-width: 0;
  min-height: 34px;
  padding: 6px 9px;
  background: #1a1b1d;
  color: #e1e3e6;
}
.currency-select .glass-select-menu {
  background: #121314;
  background-image: none;
  border-color: rgba(230, 232, 235, 0.24);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.72);
}
.currency-select .glass-select-menu button { background: transparent; color: #e0e2e5; }
.currency-select .glass-select-menu button:hover,
.currency-select .glass-select-menu button[aria-selected="true"] { background: #232528; color: #fff; }
.currency-menu-close { display: none; }

@media (max-width: 620px) {
  body { padding-bottom: 65px; }
  .page-header { min-height: 0; }
  .page-header .toolbar { justify-content: flex-start; }
  .mobile-tab-bar { grid-template-columns: repeat(5, minmax(0, 1fr)); padding-right: 4px; padding-left: 4px; }
  .mobile-tab-bar button,
  .mobile-tab-bar button[aria-pressed="true"] { min-height: 37px; padding: 6px 2px; font-size: 8px; }
  .analytics-active .page-header .toolbar,
  .telegram-active .page-header .toolbar,
  .new-item-active .page-header .toolbar,
  .settings-active .page-header .toolbar { display: none; }
  .tab-view > .telegram-panel,
  .tab-view > .new-item { width: 100%; }
  .currency-panel {
    position: fixed !important;
    z-index: 80;
    top: auto !important;
    right: 10px !important;
    bottom: calc(63px + env(safe-area-inset-bottom)) !important;
    left: 10px !important;
    width: auto;
    max-height: none;
  }
  .analytics-result .analytics-grid,
  .analytics-efficiency .analytics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-result .analytics-hero,
  .analytics-efficiency .analytics-hero { grid-column: 1 / -1; grid-row: 3; }
  .analytics-result .analytics-profit-half { grid-column: span 1; grid-row: 3; }
}

/* Standalone work screens keep their own context, without the catalog toolbar. */
.telegram-active .page-header,
.new-item-active .page-header,
.settings-active .page-header { display: none; }

/* Portfolio pickers inside task screens must paint above each form, never through it. */
.telegram-portfolio-control,
.new-item-portfolio-control {
  position: relative;
  z-index: 30;
  width: min(100%, 420px);
  min-width: 0;
}
.telegram-portfolio-control .glass-select,
.new-item-portfolio-control .glass-select { position: relative; z-index: 31; width: 100%; }
.telegram-portfolio-control .glass-select-menu,
.new-item-portfolio-control .glass-select-menu {
  z-index: 50;
  background: #121314 !important;
  background-image: none !important;
  border-color: rgba(230, 232, 235, 0.25);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.72);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.telegram-portfolio-control .glass-select-menu button,
.new-item-portfolio-control .glass-select-menu button {
  background: transparent;
  color: #e0e2e5;
}
.telegram-portfolio-control .glass-select-menu button:hover,
.telegram-portfolio-control .glass-select-menu button[aria-selected="true"],
.new-item-portfolio-control .glass-select-menu button:hover,
.new-item-portfolio-control .glass-select-menu button[aria-selected="true"] {
  background: #232528;
  color: #fff;
}
.telegram-panel { isolation: isolate; }
.telegram-panel form { position: relative; z-index: 1; }
.new-item form { position: relative; z-index: 1; }

/* The navigation stays quiet, but every label carries the application interaction color. */
.mobile-tab-bar button,
.mobile-tab-bar button[aria-pressed="true"] {
  color: #cbb5ff;
  text-shadow: 0 0 9px rgba(195, 166, 255, 0.36);
}
.mobile-tab-bar button[aria-pressed="true"] {
  color: #efe8ff;
  text-shadow: 0 0 7px rgba(223, 206, 255, 0.86), 0 0 18px rgba(195, 166, 255, 0.48);
}

@media (max-width: 620px) {
  .telegram-portfolio-control,
  .new-item-portfolio-control { width: 100%; }
  .telegram-portfolio-control .glass-select-menu,
  .new-item-portfolio-control .glass-select-menu {
    position: fixed;
    z-index: 100;
    inset: 0;
    width: auto;
    max-height: none;
    overflow-y: auto;
    border: 0;
    border-radius: 0;
    padding: max(22px, env(safe-area-inset-top)) 18px calc(22px + env(safe-area-inset-bottom));
    background: #121314 !important;
  }
}

/* Currency names stay connected to the compact currency surface at every size. */
.currency-select .glass-select-menu {
  position: absolute !important;
  z-index: 90;
  top: calc(100% + 8px) !important;
  right: auto !important;
  bottom: auto !important;
  left: 0 !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  width: min(243px, calc(100vw - 20px)) !important;
  box-sizing: border-box;
  max-height: min(126px, calc(100dvh - 130px));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  border: 1px solid rgba(230, 232, 235, 0.25);
  border-radius: 12px;
  padding: 11px;
  background: #121314 !important;
  background-image: none !important;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.11);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.currency-panel { overflow: visible !important; }
.currency-select:last-of-type .glass-select-menu { right: 0 !important; left: auto !important; }
.currency-select .glass-select-menu button {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 10px;
  text-align: left;
  white-space: nowrap;
}
.currency-menu-close {
  display: grid !important;
  width: 32px;
  min-height: 32px !important;
  margin: 0 0 2px auto;
  border: 1px solid rgba(232, 234, 238, 0.24) !important;
  border-radius: 8px !important;
  place-items: center;
  background: #1a1b1d !important;
  color: #f0f2f4 !important;
  font-size: 20px;
  text-align: center !important;
}
@media (max-width: 620px) {
  .currency-select .glass-select-menu {
    width: min(243px, calc(100vw - 20px)) !important;
    max-height: min(132px, calc(100dvh - 132px));
  }
}

/* Currency menus form one downward-opening stack without DOM reparenting. */
.currency-select { position: static; }
.currency-select .glass-select-menu,
.currency-option-menu {
  position: absolute !important;
  z-index: 90;
  top: calc(100% + 8px) !important;
  right: auto !important;
  bottom: auto !important;
  left: 0 !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  width: min(243px, calc(100vw - 20px)) !important;
  box-sizing: border-box;
  max-height: min(126px, calc(100dvh - 130px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(230, 232, 235, 0.25);
  border-radius: 12px;
  padding: 11px;
  background: #121314 !important;
  background-image: none !important;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.11);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.currency-select .glass-select-menu button,
.currency-option-menu button {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 10px;
  background: transparent;
  color: #e0e2e5;
  text-align: left;
  white-space: nowrap;
}
.currency-select .glass-select-menu button:hover,
.currency-select .glass-select-menu button[aria-selected="true"],
.currency-option-menu button:hover,
.currency-option-menu button[aria-selected="true"] { background: #232528; color: #fff; }

@media (max-width: 620px) {
  .rate-form { position: relative; overflow: visible; }
  .currency-panel {
    position: absolute !important;
    z-index: 80;
    top: calc(100% + 8px) !important;
    right: auto !important;
    bottom: auto !important;
    left: max(0px, calc(50vw - 170px)) !important;
    margin-inline: 0;
    translate: none;
    width: min(320px, calc(100vw - 20px));
    max-height: none;
    grid-template-columns: minmax(0, 1fr) 32px;
    overflow: visible !important;
  }
  .currency-panel > label:nth-of-type(1) { grid-column: 1; grid-row: 1; }
  .currency-panel > label:nth-of-type(2) { grid-column: 1 / -1; grid-row: 2; }
  .currency-panel-close { grid-column: 2; grid-row: 1; }
  .currency-panel > p { grid-column: 1 / -1; grid-row: 3; }
  .currency-select .glass-select-menu,
  .currency-option-menu {
    width: 100% !important;
    max-height: min(180px, 32dvh);
    -webkit-overflow-scrolling: touch;
  }
}

/* Mobile pickers keep the compact catalog-menu scale instead of taking over the screen. */
@media (max-width: 620px) {
  .telegram-portfolio-control .glass-select-menu,
  .new-item-portfolio-control .glass-select-menu {
    position: absolute;
    z-index: 100;
    top: calc(100% + 8px);
    right: 0;
    bottom: auto;
    left: 0;
    width: min(320px, calc(100vw - 20px));
    max-height: min(180px, 32dvh);
    margin-inline: auto;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid rgba(230, 232, 235, 0.25);
    border-radius: 12px;
    padding: 11px;
    background: #121314 !important;
  }

  .telegram-portfolio-control .glass-select-menu button,
  .new-item-portfolio-control .glass-select-menu button {
    min-height: 38px;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 8px 10px;
    text-align: left;
  }
}

/* The currency close control shares the first option's row, leaving every option compact. */
.currency-select .glass-select-menu,
.currency-option-menu { grid-template-columns: minmax(0, 1fr) 38px; }
.currency-select .glass-select-menu button[data-value],
.currency-option-menu button[data-value] { grid-column: 1; }
.currency-select .glass-select-menu .currency-menu-close,
.currency-option-menu .currency-menu-close { grid-column: 2; grid-row: 1; margin: 0; }
.currency-select .glass-select-menu .currency-menu-close + button[data-value],
.currency-option-menu .currency-menu-close + button[data-value] { grid-column: 1; grid-row: 1; }

/* The first Settings tool follows the same compact graphite surface as task screens. */
.settings-panel {
  display: grid;
  gap: 13px;
  width: min(100%, 760px);
  margin: 0 auto 24px;
  padding: 15px 16px 17px;
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  background: linear-gradient(122deg, rgba(255, 255, 255, 0.2), transparent 28%, rgba(201, 181, 255, 0.05)), rgba(7, 10, 23, 0.075);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 -1px 0 rgba(182, 151, 255, 0.13);
  backdrop-filter: blur(14px) saturate(160%) brightness(1.07);
}
.settings-panel > * { min-width: 0; }
.settings-panel form { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; }
.settings-panel form > label { min-width: 160px; }
.settings-panel form input { width: 100%; }
.automatic-expense-portfolio-control { position: relative; z-index: 30; }
.automatic-expense-portfolio-control .glass-select,
.automatic-expense-currency-control { position: relative; width: 100%; min-width: 0; }
.automatic-expense-portfolio-control .glass-select-menu,
.automatic-expense-currency-control .glass-select-menu {
  z-index: 50;
  background: #121314 !important;
  background-image: none !important;
  border-color: rgba(230, 232, 235, 0.24);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.72);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.automatic-expense-portfolio-control .glass-select-menu button,
.automatic-expense-currency-control .glass-select-menu button { background: transparent; color: #e0e2e5; }
.automatic-expense-portfolio-control .glass-select-menu button:hover,
.automatic-expense-portfolio-control .glass-select-menu button[aria-selected="true"],
.automatic-expense-currency-control .glass-select-menu button:hover,
.automatic-expense-currency-control .glass-select-menu button[aria-selected="true"] { background: #232528; color: #fff; }
.settings-hint { margin: 0; color: var(--muted); font-size: 12px; }

@media (max-width: 620px) {
  .settings-panel { padding: 14px; }
  .settings-panel form { align-items: stretch; flex-direction: column; }
  .settings-panel form > label, .settings-panel form button { width: 100%; min-width: 0; }
}