/* "Your TraitView" profile page. Uses the site theme variables. */
body.me-page{ margin:0; background:var(--bg); color:var(--text); font-family:'DM Sans', system-ui, sans-serif; min-height:100vh;
  padding:env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); }
.me-top{ position:sticky; top:0; z-index:5; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px;
  padding:12px 16px; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border); }
.me-back{ color:var(--sub); text-decoration:none; font-weight:600; font-size:14px; }
.me-title{ font:700 16px/1 'Space Grotesk', system-ui, sans-serif; }
.me-main{ max-width:760px; margin:0 auto; padding:14px 14px 40px; }
.me-note{ color:var(--sub); font-size:14px; padding:14px 4px; }
.me-small{ color:var(--sub); font-size:12px; line-height:1.45; margin:2px 0 8px; }
.me-card{ background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:14px; margin:0 0 12px; }
.me-card h2{ font:700 13px/1 'Space Grotesk', system-ui, sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--sub); margin:0 0 6px; }
.me-hello{ text-align:center; padding:28px 18px; }
.me-hello h1{ font:800 24px/1.2 'Space Grotesk', system-ui, sans-serif; margin:0 0 8px; }
.me-hello p{ color:var(--sub); font-size:14px; line-height:1.5; margin:0 auto 16px; max-width:420px; }
.me-btn{ display:inline-flex; align-items:center; justify-content:center; padding:8px 14px; border-radius:10px; border:1px solid var(--border);
  background:transparent; color:var(--text); font:600 13px/1 'Space Grotesk', system-ui, sans-serif; cursor:pointer; text-decoration:none; white-space:nowrap; }
.me-btn.primary{ background:#1CFFAF; color:#0a0f16; border-color:#1CFFAF; padding:12px 22px; font-size:15px; }
.me-btn.danger{ color:#f87171; border-color:color-mix(in srgb, #f87171 45%, transparent); margin-top:10px; width:100%; }
.me-tabs{ display:flex; gap:6px; margin:0 0 12px; overflow-x:auto; }
.me-tabs button{ flex:1; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:transparent; color:var(--sub);
  font:600 13px/1 'Space Grotesk', system-ui, sans-serif; cursor:pointer; }
.me-tabs button.on{ color:var(--text); background:color-mix(in srgb, var(--text) 8%, transparent); border-color:color-mix(in srgb, var(--text) 25%, transparent); }
.me-flash{ color:#f87171; font-size:13px; margin:0 0 10px; }
.me-summary{ display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:10px; }
.me-stat span{ display:block; color:var(--sub); font-size:12px; margin-bottom:4px; }
.me-stat b{ font:700 20px/1.1 'Space Grotesk', system-ui, sans-serif; }
.up{ color:var(--tc-2dd4bf, #2dd4bf); } .down{ color:var(--tc-f87171, #f87171); }
.me-wallets{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px; }
.me-chip{ font-size:12px; padding:3px 9px; border-radius:999px; border:1px solid var(--border); color:var(--sub); font-family:monospace; }
.me-col-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; color:inherit; text-decoration:none; margin-bottom:10px; }
.me-col-head b{ display:block; font:700 16px/1.2 'Space Grotesk', system-ui, sans-serif; }
.me-col-head span{ color:var(--sub); font-size:12px; }
.me-col-val{ text-align:right; font:700 15px/1.2 'Space Grotesk', system-ui, sans-serif; }
.me-col-val small{ display:block; font-size:12px; font-weight:600; }
.me-tokens{ display:grid; grid-template-columns:repeat(auto-fill, minmax(72px, 1fr)); gap:6px; }
.me-token{ position:relative; display:block; border-radius:9px; overflow:hidden; aspect-ratio:1; background:color-mix(in srgb, var(--text) 6%, transparent); color:inherit; text-decoration:none; }
.me-token img{ width:100%; height:100%; object-fit:cover; image-rendering:pixelated; display:block; }
.me-token span{ position:absolute; left:3px; bottom:3px; font-size:10px; font-weight:700; padding:1px 5px; border-radius:5px; background:rgba(0,0,0,.72); color:#fff; }
.me-more{ display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--sub); }
.me-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-top:1px solid var(--border); font-size:14px; }
.me-row:first-of-type{ border-top:none; }
.me-row-main{ min-width:0; flex:1; }
.me-x{ flex:0 0 auto; width:32px; height:32px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--sub); cursor:pointer; }
.me-seg{ display:flex; gap:4px; margin-top:6px; }
.me-seg button{ padding:3px 10px; border-radius:999px; font-size:11px; font-weight:600; cursor:pointer; border:1px solid var(--border); background:transparent; color:var(--sub); }
.me-seg button.on{ color:var(--text); background:color-mix(in srgb, var(--text) 10%, transparent); border-color:color-mix(in srgb, var(--text) 28%, transparent); }
.me-badge{ font-size:11px; font-weight:700; padding:2px 7px; border-radius:999px; background:color-mix(in srgb, #1CFFAF 18%, transparent); color:#1CFFAF; margin-left:4px; }
.me-server-head{ display:flex; align-items:center; gap:8px; margin-bottom:2px; }
.me-server-head img, .me-server-ph{ width:28px; height:28px; border-radius:8px; flex:0 0 auto; }
.me-server-ph{ display:inline-flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--text) 10%, transparent); font-weight:700; }
.me-stat .me-other{ display:block; color:var(--sub); font-size:12px; margin-top:3px; }
/* Server dashboard */
.srv-head{ display:flex; align-items:center; gap:10px; margin:0 2px 12px; }
.srv-head img{ width:44px; height:44px; border-radius:12px; }
.srv-head b{ display:block; font:700 18px/1.2 'Space Grotesk', system-ui, sans-serif; }
.srv-head span{ color:var(--sub); font-size:12px; }
.srv-select{ max-width:52%; padding:8px 10px; border-radius:10px; border:1px solid var(--border); background:var(--bg); color:var(--text); font:500 13px/1.2 'DM Sans', system-ui, sans-serif; }
.srv-switch{ position:relative; width:44px; height:26px; flex:0 0 auto; }
.srv-switch input{ opacity:0; width:0; height:0; }
.srv-switch span{ position:absolute; inset:0; border-radius:999px; background:color-mix(in srgb, var(--text) 18%, transparent); transition:background .15s; cursor:pointer; }
.srv-switch span::after{ content:''; position:absolute; left:3px; top:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform .15s; }
.srv-switch input:checked + span{ background:#1CFFAF; }
.srv-switch input:checked + span::after{ transform:translateX(18px); }
.srv-savebar{ position:fixed; left:0; right:0; bottom:0; display:none; align-items:center; gap:8px; justify-content:flex-end;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background:color-mix(in srgb, var(--bg) 94%, transparent);
  border-top:1px solid var(--border); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); z-index:10; }
.srv-savebar.on{ display:flex; }
.srv-savebar span{ margin-right:auto; color:var(--sub); font-size:13px; }
.me-okflash{ color:#1CFFAF; font-size:13px; margin:0 0 10px; }

.srv-filter{ align-items:flex-start; }
.srv-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.srv-chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 6px 4px 10px; border-radius:999px; font-size:12px; font-weight:600;
  background:color-mix(in srgb, var(--text) 8%, transparent); border:1px solid var(--border); }
.srv-chip button{ border:none; background:transparent; color:var(--sub); cursor:pointer; font-size:12px; padding:0 2px; }
.srv-picker{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.srv-picker .srv-select{ max-width:none; flex:1 1 130px; }

.srv-wiz .srv-step{ padding:10px 0; border-top:1px solid var(--border); }
.srv-wiz .srv-step:first-of-type{ border-top:none; }
.srv-input{ flex:1 1 180px; padding:9px 11px; border-radius:10px; border:1px solid var(--border); background:var(--bg); color:var(--text); font:500 14px/1.2 'DM Sans', system-ui, sans-serif; }
.srv-found{ display:flex; align-items:center; gap:10px; margin-top:10px; }
.srv-found img{ width:40px; height:40px; border-radius:10px; object-fit:cover; }
.srv-found b{ display:block; } .srv-found span{ color:var(--sub); font-size:12px; }
.me-btn[disabled]{ opacity:.45; cursor:default; }

.srv-found{ align-items:flex-start; }
.srv-found span{ display:block; word-break:break-all; }
.srv-found .srv-verified{ display:inline; color:#1CFFAF; font-size:12px; font-weight:700; word-break:normal; }
.srv-found .srv-warn{ color:#fbbf24; margin-top:4px; }

.me-info{ display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; margin-left:5px; vertical-align:1px;
  border-radius:50%; border:1px solid var(--sub); background:transparent; color:var(--sub); font:700 11px/1 'Space Grotesk', system-ui, sans-serif; font-style:italic; cursor:pointer; padding:0; }
.me-info[aria-expanded="true"]{ color:var(--text); border-color:var(--text); }
.me-infobox{ grid-column:1 / -1; font-size:12px; line-height:1.5; color:var(--sub); padding:10px 12px; border-radius:10px; background:color-mix(in srgb, var(--text) 6%, transparent); }

.srv-event{ width:100%; text-align:left; background:none; border:none; border-bottom:1px solid var(--border); color:inherit; font:inherit; cursor:pointer; }
.srv-code{ font:500 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; word-break:break-all; max-width:60%; text-align:right; color:var(--sub); }

.srv-text{ max-width:52%; flex:0 1 200px; }
/* owner: add a collection (session 5) */
.me-add{ display:flex; gap:8px; }
.me-add input{ flex:1; min-width:0; padding:9px 12px; border-radius:10px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:14px; }
/* OTC review (session 5) */
.me-otc{ padding:10px 0; border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:3px; }
.me-otc-amt{ font-weight:800; font-size:15px; color:#38bdf8; }
.me-otc a{ color:var(--sub); }
.me-otc-act{ display:flex; gap:8px; justify-content:flex-end; margin-top:4px; }
.me-btn-go{ border-color:color-mix(in srgb, #38bdf8 55%, transparent); }
.me-otc-rec{ margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.me-otc-rec[open]{ display:flex; }
.me-otc-rec select, .me-otc-rec input, .me-otc-rec textarea{ width:100%; box-sizing:border-box; margin-top:6px; padding:9px 10px; border-radius:10px; border:1px solid var(--border); background:var(--bg); color:var(--text); font:inherit; font-size:13px; }
.me-otc-field{ display:flex; gap:6px; align-items:flex-start; }
.me-otc-field .input{ flex:1; min-width:0; }
.me-otc-field .me-btn{ margin-top:6px; padding:8px 10px; font-size:12px; }
.me-otc-clear{ align-self:flex-start; background:transparent; border:none; color:var(--sub); font-size:12px; text-decoration:underline; cursor:pointer; padding:2px 0; }