.product-app { --bar-height: 64px; --nav-width: 186px; }
.product-app .app .topbar {
  position: fixed; inset: 0 0 auto; z-index: 39;
  display: flex; align-items: center; gap: 14px; height: var(--bar-height);
  padding: 0 24px; background: var(--surface); border-bottom: 1px solid var(--line);
  backdrop-filter: none; box-shadow: none;
}
.product-app .app .header-brand { display: flex; align-items: center; flex: none; width: auto; height: 100%; padding: 0; border: 0; }
.product-app .app .header-brand img { width: 110px; height: auto; }
.product-app .app .topbar h1 { font: 650 15px/1.25 var(--font-body); color: var(--ink); margin: 0; }
.product-app .app .topbar .search:not([hidden]) { display: flex; width: clamp(120px, 20vw, 280px); min-width: 0; }
.product-app .app .topbar .search .input { width: 100%; padding-left: 34px; background: var(--paper); color: var(--ink); border-color: var(--line); }
.product-app #shellPost { min-height: 38px; gap: 7px; white-space: nowrap; }
.product-app #shellPost[hidden] { display: none; }
.product-app #shellPost span { font-size: 19px; line-height: 1; }
.product-app .shell-workspace { padding: calc(var(--bar-height) + clamp(18px, 3vw, 40px)) clamp(14px, 3vw, 40px) 90px; min-width: 0; }
.product-app .shell-workspace .content { width: 100%; max-width: 1280px; min-width: 0; margin-inline: auto; padding: 0; }
.shell-nav {
  position: fixed; z-index: 30; display: flex; inset: auto 0 0;
  background: var(--surface); border-top: 1px solid var(--line);
  padding: 4px 4px max(4px, env(safe-area-inset-bottom));
}
.shell-nav a {
  position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; min-width: 0; min-height: 50px; border-radius: var(--r-sm); color: var(--muted);
  font-size: 11px; font-weight: 600; line-height: 1.2; text-align: center;
}
.shell-nav a svg { width: 19px; height: 19px; flex: none; }
.shell-nav a:hover, .shell-nav a.active { background: var(--sky-50); color: var(--sky-300); }
.shell-nav a.active::before { content: ''; position: absolute; inset: 0 25% auto; border-top: 2px solid var(--sky-300); }
.shell-nav .count { position: absolute; right: 7px; top: 2px; min-width: 16px; padding: 2px 3px; border-radius: 3px; background: var(--sky-300); color: var(--paper); font-size: 10px; }

/* The menu stays at the bottom on every screen, as in the app. From tablet width it floats as a bar in
   the middle instead of running edge to edge. */
@media (min-width: 761px) {
  .shell-nav { inset: auto auto 16px 50%; transform: translateX(-50%); width: min(560px, calc(100% - 32px)); gap: 4px; padding: 6px; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 14px 40px #0009; }
  .shell-nav a { border-radius: 14px; }
  .shell-nav a.active::before { display: none; }
  .product-app .shell-workspace { padding-bottom: 110px; }
  .product-app .toasts { bottom: 96px; }
}
@media (max-width: 760px) {
  .product-app .app .topbar { padding-inline: 12px; gap: 6px; }
  .product-app .app .topbar h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .product-app #shellPost b { display: none; }
  .product-app .app .header-brand img { width: 86px; }
  .product-app .app .topbar .grow { display: block; }
  .product-app .app .topbar .search:not([hidden]) { flex: 1; }
  .product-app .app .topbar:has(.search:not([hidden])) .grow { display: none; }
  .product-app #shellPost { width: 38px; padding: 0; }
  .product-app .app .topbar .btn-icon { width: 38px; min-width: 38px; }
  .shell-nav a { font-size: clamp(9px, 2.7vw, 11px); }
}
@media print {
  .shell-nav { display: none; }
  .product-app .shell-workspace { margin: 0; padding: 0; }
}

/* Account context is part of the existing profile menu. */
.product-app #topProfile #accountStatus {display:grid;gap:2px;text-align:left;padding-left:2px}
#accountStatus strong {max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--ink)}
#accountStatus small {font-size:11px;line-height:1.25;color:var(--muted)}
@media(max-width:1000px){.product-app #topProfile #accountStatus{display:none}}

.product-app .transfer-table :is(.transfer-meta,.muted.small) {font-size:12px;color:var(--muted);line-height:1.5;font-variant-numeric:tabular-nums}
.product-app .transfer-table [data-status=OPEN] .badge {background:#163d32;color:#aee5c6;border:1px solid #31594a;border-radius:4px}
.product-app .transfer-table .acts {display:flex;align-items:center;gap:2px}
.product-app .transfer-action {display:grid;place-items:center;width:32px;height:32px;background:transparent;border:0;color:var(--muted);cursor:pointer;border-radius:3px}
.transfer-action svg {width:16px;height:16px}
.product-app .transfer-action:hover {color:var(--ink)}
.product-app .transfer-action.danger:hover {color:var(--red-800)}
.transfer-action:focus-visible,.api-diagnostics :is(a,button,input):focus-visible {outline:2px solid #57a5e7;outline-offset:1px}

.api-diagnostics {--diag-line:#353b42;min-width:0;overflow:hidden;border:1px solid var(--diag-line);border-radius:6px;background:#161a1e;color:#e8eef2}
.api-diagnostics header,.diag-endpoint {padding:14px 16px;border-bottom:1px solid var(--diag-line)}
.product-app .api-diagnostics h3 {font-size:15px;color:#edf3f8;margin:0 0 10px}
.diag-pills,.diag-pills span,.diag-terminal {display:flex;align-items:center;gap:7px}
.api-diagnostics :is(dl,label,input,.diag-pills) {font:12px/1.4 ui-monospace,monospace}
.diag-pills span {padding:3px 7px;border:1px solid var(--diag-line);border-radius:4px}
.diag-health {color:#ffd2c7}
.diag-health[data-online=true] {color:#a3eac7}
.diag-health i {width:6px;height:6px;border-radius:50%;background:currentColor}
@media(prefers-reduced-motion:no-preference){.diag-health[data-online=true] i {animation:diag-ping 2.4s ease-in-out infinite}}
@keyframes diag-ping {50%{opacity:.55}}
.diag-endpoint label,.api-diagnostics dt {color:#acb7c1}
.diag-terminal {margin-top:6px;padding:2px 4px 2px 10px;border:1px solid var(--diag-line);border-radius:4px;background:#0e1114}
.diag-terminal input {min-width:0;flex:1;color:#e1e8ee;background:none;border:0}
.diag-terminal button {display:grid;place-items:center;background:none;border:0;color:#c7d2dc;width:32px;height:32px;cursor:pointer}
.diag-terminal svg {width:15px;height:15px}
@media(hover:hover){.diag-terminal button{opacity:0}.diag-terminal:hover button,.diag-terminal:focus-within button{opacity:1}}
.api-diagnostics dl {display:grid;grid-template-columns:1fr 1fr;margin:0;background:var(--diag-line);gap:1px}
.api-diagnostics dl>* {margin:0;padding:8px 12px;background:#161a1e}
.api-diagnostics dl>div {display:flex;justify-content:space-between;gap:4px}
.api-diagnostics dd {margin:0;text-align:right}
.api-diagnostics a {color:#a8d8ff}

/* Club overview and the scouting profile it opens. */
.product-app .scouting-overview {max-width:none;gap:14px}
.scouting-overview .overview-heading {display:grid;grid-template-columns:minmax(0,1fr) auto;padding:14px 0;border-bottom:1px solid var(--line)}
.scouting-overview .overview-actions {justify-content:end;gap:14px}
.scouting-overview .overview-summary b,.scouting-profile .ig-stats b {font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums}
.overview-panels {grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));align-items:start}
.product-app .overview-panels .overview-section {margin:0;border:1px solid var(--line);background:var(--surface);border-radius:5px;overflow:hidden}
.product-app .overview-panels .card-head {padding:8px 14px;border-bottom:1px solid var(--line);align-items:center}
.overview-panels .overview-link {min-height:32px;font-size:12px;color:var(--muted)}
.product-app .overview-panels .overview-player {min-height:44px;padding:7px 14px;gap:9px}
.overview-panels .overview-player .avatar {width:30px;height:30px;font-size:10px}
.overview-panels .overview-player .txt span {margin-top:1px;font-size:11px}
.product-app .overview-panels .overview-player .badge {background:var(--paper);color:var(--muted);border:1px solid var(--line);border-radius:3px;font-size:10px}
.scouting-profile .scout-id {display:flex;align-items:center;gap:10px}
.scouting-profile .scout-id>.avatar {width:40px;height:40px;flex:none}
.scouting-profile .scout-id .tags {margin-top:3px}
.scouting-profile .ig-stats {display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:12px;border-radius:4px;overflow:hidden}
.scouting-profile .ig-stats>div {padding:7px 10px;background:var(--paper);text-align:left}
.scouting-profile .ig-stats b {font-size:17px}
.scouting-profile .ig-stats span {font-size:11px}
.scouting-profile .ig-bio {margin-top:9px}
.scouting-profile .ig-actions {align-items:center;flex-wrap:wrap;border-block:1px solid var(--line);padding-block:8px}
.scouting-profile .ig-actions .btn {flex:none;border-radius:4px}
.scouting-profile .ig-actions [data-action=follow] {margin-right:auto}
.scouting-profile .ig-actions :is([data-action=message-player],[data-action=invite-player]) {border:0;background:transparent;color:var(--muted);padding-inline:7px}
@media(max-width:620px){.scouting-overview .overview-heading{grid-template-columns:1fr;gap:8px}.scouting-overview .overview-actions{justify-content:start}}