/* UI refresh: scoped fixes layered after the current app styles. */
:root {
  background-color: var(--ground, #010001);
}
html[data-theme="light"] { color-scheme: light; }
html[data-theme="pink"] { color-scheme: light; }
body, .phone { background: var(--ground, #010001); }

/* Keep small-screen filters readable and every control reachable. */
.portfolio-filters { min-width: 0; }
.portfolio-filters > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.portfolio-filters .filter-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.portfolio-filters .filter-fields > label { min-width: 0; overflow-wrap: anywhere; }
.portfolio-filters .filter-fields input,
.portfolio-filters .filter-fields select { min-width: 0; max-width: 100%; }
.portfolio-filters .filter-fields .group-toggle { grid-column: 1 / -1; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
html[data-theme] .tabbar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Keep the long portfolio out of the screen entrance animation's retained transform layer. */
#s-profile.screen:not([hidden]) { animation: none; transform: none; opacity: 1; }
.tabbar button[hidden] { display: none !important; }
.portfolio-controls, .catalogue-controls { min-width: 0; flex-wrap: wrap; }
.portfolio-controls > *, .catalogue-controls > * { min-width: 0; }
.filters { align-items: center; }
.filters button { min-height: 38px; white-space: normal; overflow-wrap: anywhere; }
#inventory-filters { display: flex; flex-wrap: wrap; gap: 6px; }
#inventory-filters button { min-height: 38px; }

/* The achievement preview is the final profile section. */
#s-profile #kinds{display:flex;gap:8px;margin:10px 0 12px;padding:0;background:none}
#s-profile #kinds .kind{position:static;display:flex;flex-direction:row;flex:1 1 0;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:44px;height:auto;aspect-ratio:auto;padding:10px 8px;border:1px solid var(--hairline);border-radius:12px;background:transparent;box-shadow:none;color:var(--ink-dim);text-align:center}
#s-profile #kinds .kind .art{display:none}
#s-profile #kinds .kind b,#s-profile #kinds .kind>span:not(.art){position:static;display:inline;margin:0;padding:0;white-space:nowrap;font-size:12px;line-height:1.4}
#s-profile #kinds .kind>span:not(.art){font-size:11px;color:var(--ink-dim)}
#s-profile #kinds .kind b{min-width:0;overflow:hidden;text-overflow:ellipsis}
#s-profile #kinds .kind>span:not(.art){flex-shrink:0}
#s-profile #kinds .kind[aria-pressed=true]{border-color:var(--bar,#75b936);color:var(--ink);background:var(--surface)}
#s-profile .inventory-toolbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);align-items:start;gap:8px;margin:0 0 14px}
#s-profile .inventory-toolbar .portfolio-filters{padding:0 12px;margin:0;background:transparent;border-radius:12px}
#s-profile .inventory-toolbar .portfolio-filters>summary{min-height:40px;font-size:12px}
#s-profile .inventory-toolbar .portfolio-filters[open]{grid-column:1/-1}
#s-profile .inventory-toolbar .sort-control{min-width:0}
#s-profile .inventory-toolbar .sort-control>span{display:none}
#s-profile .inventory-toolbar .portfolio-sort-menu>summary{min-height:40px;padding:0 12px;border-radius:12px;background:transparent;font-size:12px;font-weight:500}
#s-profile .inventory-toolbar #portfolio-sort-value{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#s-profile .inventory-toolbar .filter-fields>.filters{grid-column:1/-1;display:flex;gap:4px;flex-wrap:wrap;margin:0;padding:4px;border:1px solid var(--hairline);border-radius:10px}
#s-profile .inventory-toolbar .filter-fields>.filters::before{content:attr(aria-label);flex:0 0 100%;padding:5px 6px;font-size:11px;color:var(--ink-dim)}
#s-profile .inventory-toolbar .filters button{flex:1;min-height:36px;padding:6px 8px;border:0;border-radius:7px;background:transparent;font-size:12px;color:var(--ink-dim)}
#s-profile .inventory-toolbar .filters button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hairline)}
#s-profile .inventory-toolbar [hidden],#s-profile .portfolio-controls[hidden]{display:none!important}
#s-profile .inventory-toolbar .portfolio-filters>summary::after,
#s-profile .inventory-toolbar .portfolio-sort-menu>summary::after{content:'';display:block;flex:0 0 7px;width:7px;height:7px;margin:0 2px 3px 10px;border:solid currentColor;border-width:0 1.5px 1.5px 0;border-radius:0;transform:rotate(45deg);opacity:.65;transition:transform .15s}
#s-profile .inventory-toolbar .portfolio-filters[open]>summary::after,
#s-profile .inventory-toolbar .portfolio-sort-menu[open]>summary::after{transform:translateY(3px) rotate(225deg)}
#s-profile .inventory-toolbar .portfolio-filters>summary::after{margin-left:auto}
#s-profile > .head.ui-refresh-achievements { margin-top: 24px; }
#s-profile > #hexes.ui-refresh-achievements { margin-bottom: 20px; }

/* Hide only controls duplicated by Telegram's native chrome. */
body.in-telegram #close, body.in-telegram #back { display: none !important; }
body.in-telegram.native-app-settings #menu-open { display: grid !important; }
.menu:not([hidden]) { animation: none !important; transform: none !important; }

/* Unified portfolio controls and compact gift summary. */
#s-profile .portfolio-search-row{margin:12px 0 10px;gap:10px}
#s-profile .portfolio-search,
#s-profile .portfolio-filters,
#s-profile .portfolio-sort-menu>summary,
#s-profile .portfolio-controls .filters{box-sizing:border-box;border:1px solid var(--hairline);border-radius:14px;background:var(--surface);color:var(--ink);box-shadow:none}
#s-profile .portfolio-search{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px}
#s-profile .portfolio-search input{width:100%;min-width:0;min-height:46px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:13px;line-height:1.4}
#s-profile .portfolio-search svg{position:static;transform:none;flex:0 0 18px;width:18px;height:18px;margin:0}
#s-profile .portfolio-filters{margin:0 0 10px;padding:0 14px}
#s-profile .portfolio-filters>summary{min-height:48px;gap:12px;font-size:13px;font-weight:600;list-style:none}
#s-profile .portfolio-filters>summary::-webkit-details-marker{display:none}
#s-profile .portfolio-filters>summary::after{content:'⌄';margin-left:auto;font-size:18px;transition:transform .15s}
#s-profile .portfolio-filters[open]>summary::after{transform:rotate(180deg)}
#s-profile .portfolio-filters .filter-fields{padding:0 0 14px}
#s-profile .portfolio-controls{display:flex;align-items:stretch;flex-direction:column;gap:10px;margin:0 0 12px}
#s-profile .portfolio-controls .filters{display:flex;flex:1 1 auto;gap:4px;margin:0;padding:4px;min-height:48px}
#s-profile .portfolio-controls .filters button{flex:1 1 0;min-width:0;min-height:38px;padding:8px 10px;border:0;border-radius:10px;background:transparent;color:var(--ink-dim);font-size:13px;font-weight:600}
#s-profile .portfolio-controls .filters button[aria-pressed=true]{background:var(--bar,#a8df62);color:#142000}
#s-profile .portfolio-controls .sort-control{display:block;width:100%}
#s-profile .portfolio-controls .sort-control>span{display:none}
#s-profile .portfolio-sort-menu>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:0 14px;font-size:13px;font-weight:600;list-style:none}
#s-profile .portfolio-sort-menu>summary::after{content:'⌄';font-size:18px}
#s-profile .portfolio-sort-menu>summary::-webkit-details-marker{display:none}
#s-profile .portfolio-sort-options{border-radius:14px}
#s-profile .portfolio-results:empty,#s-profile .filter-chips:empty{display:none}
#s-profile .totals{grid-template-columns:32px minmax(0,1fr) minmax(0,1fr);min-height:0;padding:14px 12px;gap:10px}
#s-profile .totals .col{min-width:0}
#s-profile .totals .col small{font-size:12px;line-height:1.4}
#s-profile .totals .col b,#s-profile .totals .col em{font-size:11px;line-height:1.5;white-space:normal;overflow-wrap:normal}
#s-profile .totals .col:last-child{padding-left:10px}
#s-profile .head:has(#total-gifts){display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px}
#s-profile .head:has(#total-gifts) h2{flex:1 1 auto;font-size:18px;line-height:1.3}
#s-profile #total-gifts{flex:0 0 auto;font-size:13px;line-height:1.4;white-space:nowrap}
@media(max-width:350px){
  #s-profile .totals{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
  #s-profile .totals .coin{display:none}
}

@media (max-width: 390px) {
  .portfolio-controls, .catalogue-controls { align-items: stretch; }
  .portfolio-controls .filters, .catalogue-controls .filters { flex: 1 1 100%; }
  .portfolio-controls .filters button, .catalogue-controls .filters button { flex: 1 1 auto; }
  .portfolio-controls .sort-control { width: 100%; }
  .portfolio-filters .filter-fields { gap: 8px; }
  .filters { margin-block: 10px; }
}
@media (max-width: 320px) {
  .portfolio-filters .filter-fields { grid-template-columns: minmax(0, 1fr); }
  .portfolio-filters .filter-fields .group-toggle { grid-column: auto; }
  #menu .currency-picker .language-title { flex-basis: 100%; }
  #menu .currency-toggle { width: 100%; flex-wrap: wrap; }
  #menu .currency-toggle button { flex: 1 1 auto; }
}