/* ===== rhok.fun — an X profile for a degen AI ===== */

:root {
  --bg: #050d08;
  --card: #0a1a10;
  --line: #17331f;
  --text: #eaf5ec;
  --muted: #7fa88b;
  --green: #00c805;
  --lime: #b8ff3d;
  --red: #ff4d4d;
  --hat: #1f5c2e;
  --ink: #050d08;
  --font: 'Comic Neue', 'Comic Sans MS', cursive, sans-serif;
  --mono: 'Space Mono', ui-monospace, Menlo, monospace;
  --r: 6px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
  min-height: 100vh;
  overflow-x: hidden;
}

body.no-scroll { overflow: hidden; }

img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }

:focus-visible { outline: 2px dashed var(--lime); outline-offset: 3px; }

/* ---- links: marker underline ---- */
.lnk {
  color: var(--text);
  text-decoration: none;
  background: linear-gradient(transparent 62%, rgba(184, 255, 61, .45) 62%, rgba(184, 255, 61, .45) 92%, transparent 92%);
  padding: 0 2px;
  transition: background-color .15s;
}
.lnk:hover { background-color: rgba(184, 255, 61, .18); }

/* ---- scribble buttons: transparent, hand-drawn outline, label on top ---- */
.scr {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 18px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  border: 0;
  background: none;
  color: var(--text);
  transform: rotate(0deg);
  transition: transform .14s cubic-bezier(.2, .8, .3, 1.3), color .14s;
  user-select: none;
  white-space: nowrap;
}
.scr-outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.scr-outline path, .scr-outline use,
.tag-outline path, .card-outline path, .stat-ul path, .stat-ul use,
.avatar-ring path, .avatar-ring use, .fab-ring path, .fab-ring use {
  fill: none;
  stroke: var(--text);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: stroke .14s;
}
.scr-outline .pass2, .card-outline .pass2, .stat-ul .pass2, .avatar-ring .pass2, .fab-ring .pass2 { stroke-width: 1.3; opacity: .45; }
.scr-ico, .scr-label { position: relative; }
.scr-ico {
  width: 18px; height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.scr-green .scr-outline path, .scr-green .scr-outline use { stroke: var(--green); }
.scr-lime .scr-outline path, .scr-lime .scr-outline use { stroke: var(--lime); }
.scr:hover { transform: rotate(-1deg); color: var(--lime); }
.scr-b:hover, .scr-d:hover { transform: rotate(1deg); }
.scr:hover .scr-outline path, .scr:hover .scr-outline use { stroke: var(--lime); }
.scr:active { transform: rotate(0deg) scale(.97); }
.scr:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.scr-sm { padding: 7px 13px; font-size: 13px; }
.scr-sm .scr-ico { width: 15px; height: 15px; }
.scr-sq { width: 34px; height: 34px; padding: 0; }
.scr-sq .scr-ico { width: 16px; height: 16px; }

/* ---- stickers / tags: outlined margin scribbles ---- */
.sticker, .mode-badge, .toast {
  position: relative;
  display: inline-block;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.2;
  background: none;
  border: 0;
}
.tag-outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.tag-label { position: relative; }
.sticker { transform: rotate(-3deg); color: var(--green); }
.sticker .tag-outline path { stroke: var(--green); }
.sticker-up { transform: rotate(2deg); color: var(--lime); }
.sticker-up .tag-outline path { stroke: var(--lime); }
.sticker-down { transform: rotate(-4deg); color: var(--red); }
.sticker-down .tag-outline path { stroke: var(--red); }

.mode-badge {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--lime);
  transform: rotate(-2deg);
}
.mode-badge .tag-outline path { stroke: var(--lime); }
.mode-live { color: var(--green); }
.mode-live .tag-outline path { stroke: var(--green); }

/* ---- top bar ---- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  background: rgba(5, 13, 8, .88);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.brand-img { width: 30px; height: 30px; object-fit: contain; transform: rotate(-6deg); }
.brand-name { font-weight: 700; font-size: 20px; letter-spacing: -.02em; }
.brand-dot { color: var(--lime); }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.topbar-right [data-open-chat] { display: none; }

/* ---- page grid ---- */
.page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 0 100px;
}

.col-main {
  min-width: 0;
  border-left: 2px solid var(--line);
  border-right: 2px solid var(--line);
}

.col-side {
  display: none;
  padding: 16px;
}

/* ---- profile ---- */
.banner {
  height: 150px;
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(-35deg, transparent 0 14px, rgba(184, 255, 61, .06) 14px 15px),
    linear-gradient(100deg, var(--hat) 0%, #0f3a1c 40%, #0b2612 100%);
  border-bottom: 2px solid var(--line);
}
.banner-doodle { width: 100%; height: 100%; }

.profile-body { padding: 0 16px 6px; }

.profile-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: -56px;
  margin-bottom: 10px;
}

.avatar-wrap { position: relative; width: 120px; height: 120px; flex: none; }
.avatar-big {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--bg);
  border: 5px solid var(--bg);
  object-fit: cover;
  object-position: center 30%;
  transform: rotate(-3deg);
}
.avatar-ring {
  position: absolute;
  inset: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  overflow: visible;
  pointer-events: none;
  transform: rotate(14deg);
}
.avatar-ring path, .avatar-ring use { stroke: var(--lime); stroke-width: 2.5; }
.avatar-badge { position: absolute; right: -12px; bottom: 2px; }

.profile-actions { display: flex; gap: 10px; padding-bottom: 6px; }

.p-name {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.verified { display: inline-grid; place-items: center; width: 22px; height: 22px; transform: rotate(8deg); }
.verified svg { width: 22px; height: 22px; fill: none; stroke: var(--lime); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.p-handle { display: inline-block; color: var(--muted); text-decoration: none; font-size: 15px; margin-top: 2px; }
.p-handle:hover { color: var(--lime); }

.p-bio { margin: 12px 0 10px; font-size: 16px; max-width: 60ch; }

.p-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  color: var(--muted);
  font-size: 14px;
}
.p-meta li { display: inline-flex; align-items: center; gap: 5px; }
.meta-ico { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.stats {
  list-style: none;
  margin: 14px 0 12px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.stats { gap: 6px 22px; }
.stat {
  display: flex;
  flex-direction: column;
  padding: 2px 0;
  min-width: 64px;
  transform: rotate(var(--tilt, 0deg));
}
.stat:nth-child(odd) { --tilt: -.8deg; }
.stat:nth-child(even) { --tilt: .7deg; }
.stat b { font-family: var(--mono); font-size: 19px; font-weight: 700; line-height: 1.2; }
.stat-ul { width: 100%; height: 8px; overflow: visible; margin: 1px 0 2px; }
.stat-ul path, .stat-ul use { stroke: var(--green); stroke-width: 2.4; }
.stat b.pos ~ .stat-ul path { stroke: var(--lime); }
.stat b.neg ~ .stat-ul path { stroke: var(--red); }
.stat span { font-size: 12px; color: var(--muted); }
.stat small { font-family: var(--font); font-size: 11px; color: var(--muted); font-weight: 400; }
.pos { color: var(--lime); }
.neg { color: var(--red); }

/* ---- tabs ---- */
.tabs {
  display: flex;
  border-bottom: 2px solid var(--line);
  position: sticky;
  top: 49px;
  background: var(--bg);
  z-index: 10;
}
.tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px 10px;
  background: none;
  border: 0;
  border-bottom: 4px solid transparent;
  color: var(--muted);
  font-weight: 700;
  font-size: 15px;
  position: relative;
  transition: color .15s, background .15s;
}
.tab:hover { color: var(--text); background: rgba(184, 255, 61, .05); }
.tab.is-active { color: var(--text); }
.tab.is-active::after {
  content: "";
  position: absolute;
  left: 20%; right: 20%;
  bottom: -2px;
  height: 5px;
  background: var(--lime);
  border-radius: 6px 2px 5px 3px;
  transform: rotate(-1deg);
}
.tab-ico { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tab-count { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-left: 3px; }
.tab-count::before { content: "("; }
.tab-count::after { content: ")"; }

/* ---- feed ---- */
.feed { min-height: 300px; }

.feed-state {
  padding: 48px 20px;
  text-align: center;
  color: var(--muted);
}
.feed-state p { margin: 12px 0 0; }
.state-img { margin: 0 auto; opacity: .8; transform: rotate(-5deg); }
.feed-state .scr { margin-top: 14px; }

.card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 2px solid var(--line);
  transition: background .15s;
}
.card:hover { background: rgba(10, 26, 16, .6); }

.card-av {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 30%;
  background: var(--card);
  border: 2px solid var(--line);
}

.card-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 15px; }
.card-name { font-weight: 700; }
.card-handle, .card-time { color: var(--muted); }
.card-time { font-size: 13px; }
.card-head .sticker { margin-left: auto; }

.card-text { margin: 4px 0 0; font-size: 16px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* trade card */
.trade {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  position: relative;
  transform: rotate(var(--tilt, -.4deg));
  transition: transform .14s;
}
.card:nth-child(even) .trade { --tilt: .4deg; }
.card-outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.card-outline path { stroke: var(--text); }
.trade > *:not(.card-outline), .bag > *:not(.card-outline), .side-card > *:not(.card-outline) { position: relative; }
.trade.is-win .card-outline path { stroke: var(--lime); }
.trade.is-loss .card-outline path { stroke: var(--red); }
.trade.is-buy .card-outline path { stroke: var(--green); }

.tok-logo {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg);
  border: 2px solid var(--line);
}
.tok-fallback {
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 20px;
  color: var(--lime);
  background: transparent;
  border: 2px solid var(--green);
}

.trade-line { font-weight: 700; font-size: 17px; overflow-wrap: anywhere; }
.trade-line .sym { text-decoration: none; color: var(--text); }
.trade-line .sym:hover { color: var(--lime); }
.trade-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
  font-family: var(--mono);
}
.trade-sub a { color: var(--muted); text-decoration: none; border-bottom: 2px dashed var(--line); }
.trade-sub a:hover { color: var(--lime); border-color: var(--lime); }

/* bag card */
.bag {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 14px 16px;
  padding: 12px 14px;
  position: relative;
  transform: rotate(-.3deg);
}
.bag:nth-child(even) { transform: rotate(.35deg); }
.bag.is-win .card-outline path { stroke: var(--lime); }
.bag.is-loss .card-outline path { stroke: var(--red); }
.bag-sym { font-weight: 700; font-size: 17px; }
.bag-sym a { text-decoration: none; color: var(--text); }
.bag-sym a:hover { color: var(--lime); }
.bag-name { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.bag-pnl { text-align: right; font-family: var(--mono); font-weight: 700; font-size: 16px; }
.bag-pnl small { display: block; font-weight: 400; font-size: 12px; }

/* ---- side column ---- */
.side-card {
  position: relative;
  padding: 14px 18px;
  margin-bottom: 18px;
  transform: rotate(var(--tilt, -.5deg));
}
.side-card .card-outline path, .side-card .card-outline use { stroke: var(--muted); stroke-width: 1.8; }
.side-card:nth-child(even) { --tilt: .5deg; }
.side-title { margin: 0 0 8px; font-size: 17px; font-weight: 700; }
.side-title::before { content: "// "; color: var(--lime); font-family: var(--mono); font-size: 13px; }
.side-sub { margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.side-list { margin: 0; padding-left: 18px; font-size: 14px; }
.side-list li { margin: 4px 0; }
.side-list li::marker { color: var(--lime); }

.ca-row { display: flex; align-items: center; gap: 8px; }
.ca-code {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  overflow-wrap: anywhere;
  flex: 1;
}
.ca-code.is-set { color: var(--lime); }

.facts { margin: 0; font-size: 14px; }
.facts div { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.facts div:last-child { border-bottom: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-family: var(--mono); font-size: 13px; }

.side-foot { color: var(--muted); font-size: 12px; text-align: center; margin: 0; }

/* ---- fab ---- */
.fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 30;
  width: 64px; height: 64px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bg);
  display: grid;
  place-items: center;
  transition: transform .14s cubic-bezier(.2, .8, .3, 1.3);
}
.fab-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fab-ring path, .fab-ring use { stroke: var(--lime); stroke-width: 2.5; }
.fab img { position: relative; width: 44px; height: 44px; object-fit: contain; transform: rotate(-6deg); }
.fab:hover { transform: rotate(-8deg) scale(1.05); }
.fab:hover .fab-ring path, .fab:hover .fab-ring use { stroke: var(--green); }
.fab:active { transform: scale(.95); }
body.chat-open .fab { display: none; }

/* ---- chat drawer ---- */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(5, 13, 8, .7);
  backdrop-filter: blur(2px);
}
.drawer {
  position: fixed;
  z-index: 50;
  left: 0; right: 0; bottom: 0;
  height: min(88vh, 720px);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-top: 3px solid var(--lime);
  border-radius: 14px 14px 0 0;
  animation: slide-up .22s cubic-bezier(.2, .8, .3, 1);
}
@keyframes slide-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slide-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }

.drawer-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 2px solid var(--line);
}
.drawer-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: center 30%; background: var(--card); }
.drawer-who { display: flex; flex-direction: column; line-height: 1.15; }
.drawer-name { font-weight: 700; font-size: 16px; }
.drawer-status { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.dot { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--green); }
.drawer-close { margin-left: auto; }
.drawer-close:hover { transform: rotate(6deg); }

.messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overscroll-behavior: contain;
}

.chat-empty { margin: auto 0; text-align: center; }
.chat-empty-text { color: var(--muted); font-size: 15px; margin: 0 0 14px; }
.suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chip { white-space: normal; text-align: center; transform: rotate(var(--tilt, -1deg)); }
.chip:nth-child(even) { --tilt: 1.2deg; }
.chip .scr-outline path, .chip .scr-outline use { stroke: var(--muted); }

.msg { display: flex; max-width: 88%; }
.msg.user { align-self: flex-end; }
.msg.bot { align-self: flex-start; }
.bubble {
  padding: 9px 13px;
  font-size: 15px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  position: relative;
  animation: pop .18s cubic-bezier(.2, .8, .3, 1.3);
}
.bubble-text { position: relative; }
.msg.user .bubble .card-outline path { stroke: var(--green); }
.msg.bot .bubble .card-outline path { stroke: var(--muted); }
.bubble.thinking { color: var(--muted); font-style: italic; }
.bubble.thinking::after { content: "…"; animation: dots 1.2s steps(4, end) infinite; }
@keyframes pop { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

.chat-form {
  display: flex;
  gap: 8px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top: 2px solid var(--line);
  background: var(--bg);
}
.chat-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  padding: 10px 12px;
  color: var(--text);
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--r);
  outline: none;
  transition: border-color .15s;
}
.chat-input:focus { border-color: var(--lime); }
.chat-input::placeholder { color: var(--muted); }

/* ---- toast ---- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 60;
  transform: translate(-50%, 20px) rotate(-1deg);
  padding: 8px 16px;
  font-size: 14px;
  color: var(--lime);
  background: var(--bg);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s, transform .18s;
}
.toast .tag-outline path { stroke: var(--lime); }
.toast.show { opacity: 1; transform: translate(-50%, 0) rotate(-1deg); }

/* ---- responsive ---- */
@media (max-width: 599px) {
  .topbar-right #xLinkTop { display: none; }
  .profile-actions { gap: 8px; }
  .profile-actions #xLink { display: none; }
  .avatar-wrap, .avatar-big { width: 96px; height: 96px; }
  .profile-top { margin-top: -44px; }
  .stat { min-width: 0; flex: 1 1 28%; }
  .col-main { border-left: 0; border-right: 0; }
  .bag { grid-template-columns: 40px minmax(0, 1fr) auto; margin: 12px; }
}

@media (min-width: 600px) {
  .page { padding-top: 12px; }
  .col-main { border-top: 2px solid var(--line); border-radius: 10px 10px 0 0; overflow: clip; }
  .tabs { top: 49px; }
}

@media (min-width: 1000px) {
  .page {
    grid-template-columns: minmax(0, 620px) 320px;
    gap: 24px;
    max-width: 1000px;
  }
  .col-side { display: block; position: sticky; top: 64px; align-self: start; }
  .topbar-right [data-open-chat] { display: inline-flex; }

  .drawer {
    left: auto;
    top: 0;
    bottom: 0;
    width: min(440px, 100vw);
    height: auto;
    border-top: 0;
    border-left: 3px solid var(--lime);
    border-radius: 0;
    animation: slide-in .22s cubic-bezier(.2, .8, .3, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* real banner image (public/banner.png) sits over the doodle when present */
.banner { position: relative; overflow: hidden; }
.banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }

/* ---- links added to the feed + profile ---- */
.card-time-link { color: var(--muted); text-decoration: none; }
.card-time-link:hover { color: var(--lime); text-decoration: underline dotted; }
.card-handle { color: var(--muted); text-decoration: none; }
.card-handle:hover { color: var(--lime); }
.card-av-link { display: block; flex: 0 0 auto; line-height: 0; }
.wallet-link { color: inherit; text-decoration: none; border-bottom: 2px dotted var(--hat); }
.wallet-link:hover { color: var(--lime); border-bottom-color: var(--lime); }
.meta-link { color: var(--muted); text-decoration: none; border-bottom: 1.5px dotted var(--hat); font-family: 'Space Mono', monospace; font-size: .9em; }
.meta-link:hover { color: var(--lime); border-bottom-color: var(--lime); }
.meta-lbl { color: var(--muted); }

/* ---- burn flywheel card ---- */
.fw-big { margin: 10px 0 6px; }
.fw-big b { display: block; font-family: 'Space Mono', monospace; font-size: 1.5rem; color: var(--lime); line-height: 1.1; }
.fw-big .stat-ul { display: block; width: 90px; height: 7px; stroke: var(--lime); fill: none; stroke-width: 2; }
.fw-big span { display: block; font-size: .74rem; color: var(--muted); margin-top: 2px; }
.side-title .mode-chip { font-size: .62rem; vertical-align: middle; margin-left: 6px; }