/* Rust++ — visual refresh (monochrome UI, game-art heroes, avatar fix) */

/* ───── Avatar: photo fills the circle, fallback only when there is no photo ───── */
.rs-avatar-wrap { position: relative !important; }
.rs-avatar-img {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
  object-fit: cover !important; border-radius: 50% !important; z-index: 1 !important;
}
.rs-avatar-wrap.has-img .rs-avatar-fallback { display: none !important; }
.rs-avatar-fallback { position: relative; z-index: 0; color: var(--ios-text-1) !important; }

/* ───── Page heroes with game art ───── */
.rf-hero {
  position: relative; overflow: hidden; border-radius: 28px; margin-bottom: 16px; min-height: 168px;
  display: flex; align-items: flex-end; padding: 24px 28px;
  border: 1px solid rgba(255,255,255,.08); box-shadow: var(--ios-glass-edge), 0 18px 50px rgba(0,0,0,.45);
  background: #0B0B0E;
}
.rf-hero-art {
  position: absolute; inset: 0; background-size: cover; background-position: center 35%;
  filter: grayscale(1) contrast(1.08) brightness(.62); transform: scale(1.04);
  animation: rfHeroDrift 26s ease-in-out infinite alternate;
}
.rf-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,8,10,0) 0%, rgba(8,8,10,.35) 45%, rgba(8,8,10,.92) 100%),
    linear-gradient(90deg, rgba(8,8,10,.75) 0%, rgba(8,8,10,0) 65%);
}
.rf-hero-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; max-width: 640px; }
.rf-hero-kicker { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.rf-hero h1 { margin: 0; font-size: 32px; font-weight: 800; letter-spacing: -.035em; color: #fff; line-height: 1.1; }
.rf-hero p { margin: 0; font-size: 14px; color: rgba(255,255,255,.66); }
@keyframes rfHeroDrift { from { transform: scale(1.04) translateX(0); } to { transform: scale(1.1) translateX(-1.5%); } }

/* titles that the hero now replaces */
#tab-stats.rf-has-hero .ws-title,
#tab-commands.rf-has-hero .pp-cmd-title,
#tab-settings.rf-has-hero .settings-wrap > .rs-card-title:first-child { display: none !important; }
#tab-dota.rf-has-hero .dota-search-title span { font-weight: 600; }

/* ───── Monochrome icons ───── */
img[src^="/images/"]:not(.keep-color):not(.pp-art),
.dev-icon-wrap img,
.res-item-img,
.pp-notif-ico img,
.pp-detail-ico img,
.ncard-avatar img[src*="/images/"] {
  filter: grayscale(1) brightness(1.2) contrast(1.05) !important;
}
.pp-ico { width: 20px; height: 20px; color: var(--ios-text-1); }
.pp-detail-ico .pp-ico { width: 30px; height: 30px; }
.pp-empty-ico .pp-ico { width: 26px; height: 26px; color: var(--ios-text-2); }
.tt-icon .pp-ico { width: 20px; height: 20px; }
.tt-icon { display: flex; align-items: center; justify-content: center; }

/* feed / detail icons: neutral glass tiles, alarm keeps a thin red rim */
.pp-notif-ico, .pp-detail-ico {
  background: rgba(255,255,255,.06) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09) !important;
}
.pp-notif.alarm .pp-notif-ico, .pp-detail-ico[style*="--ios-red"] {
  box-shadow: inset 0 0 0 1px rgba(248,113,113,.45) !important;
}
.pp-notif.alarm .pp-ico, .pp-detail-ico[style*="--ios-red"] .pp-ico { color: #FCA5A5; }
.pp-detail-cat { color: var(--ios-text-3) !important; }
.pp-notif.alarm { background: var(--ios-surface-1) !important; }

/* nav: monochrome active state */
.nav-item.active .icon { color: var(--ios-text-1) !important; }
.ios-nav-indicator {
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.08), 0 6px 20px rgba(0,0,0,.3) !important;
}

/* ───── Typography polish ───── */
.profile-section-title, .rs-card-title, .dota-section-title, .pp-section-title {
  letter-spacing: .08em !important;
}

@media (max-width: 768px) {
  .rf-hero { min-height: 128px; padding: 18px; border-radius: 22px; margin-bottom: 12px; }
  .rf-hero h1 { font-size: 24px; }
  .rf-hero p { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { .rf-hero-art { animation: none; } }

/* ───── Rust item art in notifications ───── */
.pp-notif-ico, .pp-detail-ico, .tt-icon {
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.10), rgba(255,255,255,.03) 70%) !important;
}
img.pp-art { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.55)) !important; }
.pp-notif-ico { width: 46px !important; height: 46px !important; border-radius: 14px !important; }
.pp-notif { grid-template-columns: 46px minmax(0,1fr) auto !important; }
.pp-detail-ico { width: 96px !important; height: 96px !important; border-radius: 26px !important; }
.pp-detail-ico img.pp-art { width: 70px; height: 70px; }
.tt-icon img.pp-art { width: 28px; height: 28px; }
.tt-icon { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; }

/* ───── Dota: search card & spacing ───── */
.dota-search-title-row { display: none !important; }
.dota-search-bar-wrap { padding: 16px !important; }
.dota-input-group {
  display: flex !important; align-items: center !important; gap: 8px !important;
  padding: 6px !important; border-radius: 999px !important; height: auto !important;
}
#dota-search-inp {
  flex: 1 !important; height: 44px !important; padding: 0 16px !important; background: transparent !important;
  border: none !important; box-shadow: none !important; font-size: 14px !important;
}
#dota-search-btn {
  height: 44px !important; min-height: 44px !important; padding: 0 22px !important; border-radius: 999px !important;
  background: var(--ios-text-1) !important; color: #0B0B0E !important; border: none !important;
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  font: 700 13.5px var(--ios-font) !important; box-shadow: none !important; flex-shrink: 0;
}
#dota-search-btn svg { stroke: currentColor; }
.dp-recent { margin-top: 12px !important; padding: 0 6px; }
.dp-recent-chip.mine { background: rgba(255,255,255,.12); }
#dota-results > * + * { margin-top: 14px; }
.dp-header-bg { filter: blur(36px) grayscale(1) !important; opacity: .28 !important; }
.dp-banner { background: rgba(255,255,255,.04) !important; border: 1px solid var(--ios-border) !important; color: var(--ios-text-1) !important; padding: 10px 16px !important; }
.dp-banner strong::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 10px; vertical-align: middle; background: var(--ios-green); box-shadow: 0 0 10px var(--ios-green); }
.dp-banner.loss strong::before { background: var(--ios-red); box-shadow: 0 0 10px var(--ios-red); }
.dp-ring .v { stroke: var(--ios-text-1); }

/* ───── Rust profile ───── */
.rf-hero.rf-profile { min-height: 200px; }
.rf-prof { display: flex; align-items: flex-end; gap: 20px; }
.rf-prof-av { width: 104px; height: 104px; border-radius: 28px; object-fit: cover; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 14px 40px rgba(0,0,0,.6); flex-shrink: 0; }
.rf-prof-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rf-prof-main h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf-prof-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rf-btn {
  height: 34px !important; padding: 0 16px !important; border-radius: 999px !important; display: inline-flex !important; align-items: center !important;
  font: 600 13px var(--ios-font) !important; text-decoration: none !important; cursor: pointer; border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.1) !important; color: #fff !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.rf-btn.active, #btn-track-toggle.active { background: #fff !important; color: #0B0B0E !important; border-color: #fff !important; }
.profile-grid-top.rf-single { grid-template-columns: 1fr !important; display: grid !important; }
.rf-hidden-note { font-size: 12.5px; color: var(--ios-text-3); padding: 2px 4px; }
.rf-empty-card {
  display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 20px;
  background: rgba(255,255,255,.03); border: 1px dashed rgba(255,255,255,.1);
}
.rf-empty-card b { font-size: 14px; color: var(--ios-text-1); }
.rf-empty-card span { font-size: 12.5px; color: var(--ios-text-3); }
.rf-dim { opacity: .45; }
#search-profile-view .status-banner { background: rgba(255,255,255,.04) !important; border: 1px solid var(--ios-border) !important; }
#search-profile-view .status-banner .sb-title { color: var(--ios-text-1) !important; }
#search-profile-view .status-banner .sb-title::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: middle; background: var(--ios-green); }
#search-profile-view .status-banner.red .sb-title::before, #search-profile-view .status-banner.orange .sb-title::before { background: var(--ios-red); }
#search-profile-view .status-banner.blue .sb-title::before { background: var(--ios-text-2); }
#search-profile-view .server-card [class*="hours"], #search-profile-view .server-card b { color: var(--ios-text-1) !important; }
@media (max-width: 768px) {
  .rf-prof { flex-direction: column; align-items: flex-start; gap: 12px; }
  .rf-prof-av { width: 72px; height: 72px; border-radius: 20px; }
}
.rf-hide { display: none !important; }

/* ───── Rust profile: servers (BattleMetrics) ───── */
.rf-srv-head { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; }
.rf-bm-pill { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: none; text-decoration: none; padding: 4px 10px; border-radius: 999px; color: #A7F3D0; background: var(--ios-green-tint); border: 1px solid rgba(52,211,153,.3); }
.rf-bm-pill.warn { color: #FDE68A; background: var(--ios-amber-tint); border-color: rgba(251,191,36,.3); }
.rf-srv-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 22px; background: var(--ios-glass-fill), var(--ios-surface-1); border: 1px solid var(--ios-border); box-shadow: var(--ios-glass-edge); }
.rf-srv-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rf-srv-toolbar .dp-chip b { margin-left: 4px; opacity: .7; }
.rf-srv-note { font-size: 12px; color: var(--ios-text-3); }
.rf-srv-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 8px; }
.rf-srv {
  display: grid; grid-template-columns: 10px minmax(0,1fr) auto auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px;
  background: rgba(255,255,255,.03); border: 1px solid var(--ios-border-subtle); text-decoration: none; color: inherit;
}
.rf-srv:hover { background: rgba(255,255,255,.06); border-color: var(--ios-border); }
.rf-srv.now { border-color: rgba(52,211,153,.35); background: linear-gradient(90deg, rgba(52,211,153,.08), transparent 60%); }
.rf-srv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ios-text-3); opacity: .6; }
.rf-srv-dot.on { background: var(--ios-text-2); opacity: 1; }
.rf-srv-dot.now { background: var(--ios-green); opacity: 1; animation: ios27Breathe 2.4s ease-in-out infinite; }
.rf-srv-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rf-srv-name { font-size: 13.5px; font-weight: 600; color: var(--ios-text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf-srv-meta { font-size: 11.5px; color: var(--ios-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf-srv-meta b { color: #A7F3D0; font-weight: 600; }
.rf-srv-tag { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.07); color: var(--ios-text-2); white-space: nowrap; }
.rf-srv-hours { font-size: 14px; font-weight: 700; color: var(--ios-text-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rf-warn { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: #FDE68A; padding: 9px 12px; border-radius: 14px; background: var(--ios-amber-tint); }
.rf-link { background: none; border: none; color: var(--ios-text-1); font: 600 12.5px var(--ios-font); text-decoration: underline; cursor: pointer; padding: 0; }
.rf-bm-fix { display: none; flex-direction: column; gap: 10px; }
.rf-bm-fix.open { display: flex; }
.rf-cands { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.rf-cands-title { font-size: 11px; font-weight: 700; color: var(--ios-text-3); text-transform: uppercase; letter-spacing: .05em; }
.rf-cand { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 14px; background: rgba(255,255,255,.04); }
.rf-cand-main { display: flex; flex-direction: column; min-width: 0; }
.rf-cand-main b { font-size: 13px; color: var(--ios-text-1); }
.rf-cand-main small { font-size: 11.5px; color: var(--ios-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf-manual { display: flex; gap: 8px; margin-top: 4px; }
.rf-manual .pp-input { flex: 1; border-radius: 999px; }
.rf-btn.small { height: 30px !important; padding: 0 12px !important; font-size: 12px !important; }
.rf-empty-card > div { margin-top: 6px; }
@media (max-width: 768px) { .rf-srv-list { grid-template-columns: 1fr; } }
.rf-srv-total { color: var(--ios-text-1); font-weight: 700; }
.rf-srv-search { width: 100%; border-radius: 999px !important; } .rf-srv-list { max-height: 460px; overflow-y: auto; padding-right: 2px; }

/* ───── Rust profile: combat ───── */
.rf-combat { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 14px; }
.rf-body-card, .rf-ctile, .rf-weapon {
  background: var(--ios-glass-fill), var(--ios-surface-1); border: 1px solid var(--ios-border); border-radius: 22px; box-shadow: var(--ios-glass-edge);
}
.rf-body-card { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.rf-body-row { display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 16px; align-items: center; }
.rf-body { width: 96px; height: auto; }
.rf-body path { stroke: rgba(255,255,255,.18); stroke-width: 1; transition: fill .4s ease; }
.rf-zones { display: flex; flex-direction: column; gap: 10px; }
.rf-zone { display: grid; grid-template-columns: 76px minmax(0,1fr) 48px; grid-template-rows: auto auto; column-gap: 8px; align-items: center; }
.rf-zone-name { font-size: 12.5px; color: var(--ios-text-2); }
.rf-zone b { font-size: 13px; color: var(--ios-text-1); text-align: right; font-variant-numeric: tabular-nums; }
.rf-zone small { grid-column: 2 / 4; font-size: 10.5px; color: var(--ios-text-3); font-variant-numeric: tabular-nums; }
.rf-bar { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; }
.rf-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, rgba(255,255,255,.55), #fff); animation: ios27BarX .9s var(--ios-curve-sheet) both; transform-origin: left; }
.rf-combat-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rf-ctiles { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.rf-ctile { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rf-ctile-label { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ios-text-3); }
.rf-ctile-val { font-size: 30px; font-weight: 800; letter-spacing: -.04em; color: var(--ios-text-1); font-variant-numeric: tabular-nums; line-height: 1; }
.rf-ctile-val.small { font-size: 17px; letter-spacing: -.02em; line-height: 1.25; }
.rf-ctile-sub { font-size: 12px; color: var(--ios-text-3); }
.rf-weapons { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.rf-weapon { padding: 14px 16px; display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 14px; align-items: center; }
.rf-weapon img.pp-art { width: 64px; height: 64px; }
.rf-weapon-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rf-weapon-val { font-size: 22px; font-weight: 800; letter-spacing: -.03em; color: var(--ios-text-1); font-variant-numeric: tabular-nums; }
@media (max-width: 1200px) { .rf-combat { grid-template-columns: 1fr; } .rf-ctiles { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 768px) { .rf-weapons { grid-template-columns: 1fr; } .rf-ctile-val { font-size: 24px; } }