/* tweetpad skin "2012": the old bird app. Blue gradient bar, white rounded cards, Helvetica, a dark tab bar at the bottom.
   Everything here is scoped to html[data-skin="2012"] and layered over tweetpad.css, which on its own is the Tweetcraft skin. */

html[data-skin="2012"] {
  --bg: #e6e6e6; --panel: #fff; --panel-hi: transparent; --panel-lo: #c8c8c8;
  --line: #e3e3e3; --text: #333; --dim: #999;
  --ok: #2e9e4f; --warn: #c7870a; --bad: #d0343a; --accent: #0084b4; --gold: #666; --pink: #0084b4;
  --px: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --shadow: none;
  --blue: #0084b4; --blue-hi: #33bcef; --blue-lo: #019ad2;
  --chart-up: #2e9e4f; --chart-down: #d0343a; --chart-grid: #eee; --chart-text: #999; --chart-last: #0084b4;
  --chart-font: 10px "Helvetica Neue", Helvetica, Arial, sans-serif; --chart-font-lg: 13px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
html[data-skin="2012"] body { font: 13px/1.35 var(--px); -webkit-font-smoothing: antialiased; image-rendering: auto; }
html[data-skin="2012"] body::before { background: #e6e6e6; }
html[data-skin="2012"] *, html[data-skin="2012"] *::before, html[data-skin="2012"] *::after { scrollbar-color: #bbb transparent; }

/* every bevelled HUD panel becomes a white card */
html[data-skin="2012"] .panel, html[data-skin="2012"] .slot, html[data-skin="2012"] textarea {
  background: #fff; border: 1px solid #c8c8c8; border-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
html[data-skin="2012"] kbd { display: none; }

/* ---------- top bar: the blue navigation bar ---------- */
html[data-skin="2012"] header { padding: 6px 7px; gap: 5px; background: linear-gradient(#63b8ee, #3c9ad9 50%, #2b86cc);
  border-bottom: 1px solid #1d6aa5; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 3px rgba(0, 0, 0, .25); position: relative; z-index: 10; }
/* the logo: a lowercase rounded wordmark in the spirit of the 2012 "twitter" logotype */
html[data-skin="2012"] h1 { font: 600 20px/1 "Fredoka", "Varela Round", "Arial Rounded MT Bold", var(--px); letter-spacing: -.02em;
  color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); text-overflow: clip; }
html[data-skin="2012"] .home { text-transform: lowercase; }
/* the 2012 bird (twitter-2012-bird.svg) as a mask, so it can take any color: white here, like the old bar */
html[data-skin="2012"] h1 .gem { width: 26px; height: 26px; margin: 0 2px 0 -2px; transform: none; vertical-align: -6px; box-shadow: none; background: #fff;
  -webkit-mask: url(twitter-2012-bird.svg) center / contain no-repeat; mask: url(twitter-2012-bird.svg) center / contain no-repeat;
  filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, .3)); }
html[data-skin="2012"] .home:hover { color: #fff; }
html[data-skin="2012"] .home:hover .gem { box-shadow: none; background: #e3f4fd; }
html[data-skin="2012"] .home:focus-visible { outline-color: #fff; }
/* bar buttons: the rounded, inset-blue buttons either side of the old title bar */
html[data-skin="2012"] .ghost, html[data-skin="2012"] .wc-btn, html[data-skin="2012"] .wc-btn.primary {
  padding: 6px 8px; gap: 5px; color: #fff; font: bold 12px/1 var(--px); text-shadow: 0 -1px 0 rgba(0, 0, 0, .35);
  background: linear-gradient(#4aa6e4, #2c7fc4); border: 1px solid #1c5f98; border-radius: 5px; outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 0 rgba(255, 255, 255, .2); }
html[data-skin="2012"] .ghost:hover, html[data-skin="2012"] .wc-btn:hover { color: #fff; background: linear-gradient(#55b0ee, #3389cf); }
html[data-skin="2012"] .ghost[aria-pressed="true"], html[data-skin="2012"] .ghost[aria-selected="true"], html[data-skin="2012"] .wc-btn[aria-expanded="true"] {
  background: linear-gradient(#2a78b8, #2f86cb); border-color: #17558a; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .2); }
html[data-skin="2012"] .wc-btn:active { padding: 6px 8px; }
html[data-skin="2012"] .ghost:focus-visible, html[data-skin="2012"] .wc-btn:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
html[data-skin="2012"] .wc-btn img, html[data-skin="2012"] .wc-btn .ph { border: 0; border-radius: 3px; }
html[data-skin="2012"] .wc-btn .caret { font: 10px/1 var(--px); opacity: .85; }
/* tab icons: white embossed glyphs; the open tab's glows light blue, like the old Home tab */
html[data-skin="2012"] .tab-ico { display: block; flex: none; width: 15px; height: 15px; fill: currentColor; filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, .3)); }
html[data-skin="2012"] .ghost[aria-selected="true"] .tab-ico { fill: #9fdcff; filter: drop-shadow(0 0 3px rgba(120, 205, 255, .9)) drop-shadow(0 -1px 0 rgba(0, 0, 0, .3)); }
html[data-skin="2012"] .views .count { font: bold 11px/1 var(--px); color: #fff; background: rgba(0, 0, 0, .2); padding: 2px 5px; border-radius: 8px; }
html[data-skin="2012"] .gear { width: 14px; height: 14px; shape-rendering: auto; }
html[data-skin="2012"] #btn-settings { padding: 5px 7px; }

/* ---------- stage ---------- */
html[data-skin="2012"] main { padding: 10px 10px 40px; scrollbar-color: #bbb transparent; }
/* "Sending Tweet": the toast is the old in-app status bar note, a dark strip that rises from behind the tab bar and ducks back under it */
html[data-skin="2012"] .toast { top: auto; bottom: 0; left: 0; right: 0; max-width: none; justify-content: center; gap: 6px; padding: 5px 10px; border: 0;
  border-radius: 0; background: rgba(20, 20, 20, .92); box-shadow: 0 -1px 3px rgba(0, 0, 0, .3); transition: transform .3s ease, opacity .3s ease; }
html[data-skin="2012"] .toast.gone { transform: translateY(100%); opacity: 1; }
/* the tab bar sits above the stage so the strip slides out from under it */
html[data-skin="2012"] .hud { position: relative; z-index: 8; }
/* keep floating chat lines clear of the strip, and lift the strip over the chat bar when that's open */
html[data-skin="2012"] #feed-lines { transition: transform .3s ease; }
html[data-skin="2012"] .toast:not(.gone) ~ #feed-lines:not(.open) { transform: translateY(-28px); }
html[data-skin="2012"] .stage:has(.chatbar:not([hidden])) .toast { bottom: 46px; z-index: 7; }
html[data-skin="2012"] .stage:has(.chatbar:not([hidden])) .toast.gone { opacity: 0; }
html[data-skin="2012"] .toast::before, html[data-skin="2012"] .toast::after, html[data-skin="2012"] .toast-icon { display: none; }
html[data-skin="2012"] .toast-body { display: flex; align-items: baseline; gap: 6px; min-width: 0; text-align: center; }
html[data-skin="2012"] .toast-title, html[data-skin="2012"] .toast.ok .toast-title { flex: none; font: bold 12px/1.2 var(--px); color: #fff; }
html[data-skin="2012"] .toast.bad .toast-title { color: #ff8a8a; }
html[data-skin="2012"] .toast-text { font: 12px/1.2 var(--px); color: #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-skin="2012"] .toast-text small { display: inline; font-size: 11px; color: #aaa; }

/* chat lines float as little white bubbles */
html[data-skin="2012"] #feed-lines li { font: 12px/1.3 var(--px); padding: 4px 8px; margin-top: 4px; gap: 6px; color: #333; background: rgba(255, 255, 255, .96);
  border: 1px solid #d4d4d4; border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); animation: line-in .2s ease both; transition: opacity .6s ease; }
html[data-skin="2012"] #feed-lines li b { font: bold 12px/1 var(--px); color: #333; }
html[data-skin="2012"] #feed-lines li b.verified, html[data-skin="2012"] #feed-lines li.mine b { color: var(--blue); }
html[data-skin="2012"] #feed-lines li.note { color: #999; background: rgba(255, 255, 255, .96); }
/* open chat: clear of the (taller) chat bar, even gaps, and no replayed slide-ins */
html[data-skin="2012"] #feed-lines.open { bottom: 58px; padding: 8px 0 2px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  background: linear-gradient(transparent, rgba(230, 230, 230, .97) 24px); }
html[data-skin="2012"] #feed-lines.open { max-height: calc(100% - 70px); }
html[data-skin="2012"] #feed-lines.open li { flex: none; margin-top: 0; animation: none; }
html[data-skin="2012"] .chat-ava { border: 0; border-radius: 3px; }
html[data-skin="2012"] .chatbar { padding: 5px; border: 1px solid #bbb; border-radius: 6px; background: linear-gradient(#f9f9f9, #e4e4e4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
html[data-skin="2012"] .chat-room { font: bold 12px/1 var(--px); color: var(--blue); }
html[data-skin="2012"] #chat-input { padding: 6px 8px; color: #333; font: 13px/1 var(--px); background: #fff; border: 1px solid #bbb; border-radius: 4px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); }
html[data-skin="2012"] #chat-input:focus { border-color: #56b4ef; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1), 0 0 4px rgba(82, 168, 236, .6); }

/* ---------- section headers: the grey "Tweets" / "Replies" strip on top of a card ---------- */
html[data-skin="2012"] .launch, html[data-skin="2012"] .tokens, html[data-skin="2012"] .about, html[data-skin="2012"] .more-pane, html[data-skin="2012"] .games, html[data-skin="2012"] .coin, html[data-skin="2012"] .profile,
html[data-skin="2012"] .settings, html[data-skin="2012"] .card, html[data-skin="2012"] .lightbox-card { border-top: 1px solid #c8c8c8; }
html[data-skin="2012"] .launch-head { margin: -10px -10px 0; padding: 8px 10px; font: bold 13px/1.2 var(--px); letter-spacing: 0; text-transform: none; color: #555;
  text-shadow: 0 1px 0 #fff; background: linear-gradient(#fafafa, #ededed); border-bottom: 1px solid #ddd; border-radius: 5px 5px 0 0; }
html[data-skin="2012"] .menu-head, html[data-skin="2012"] .menu-sec { font: bold 12px/1.2 var(--px); letter-spacing: 0; text-transform: none; color: #666; }
html[data-skin="2012"] .menu-sec { margin: 12px 2px 5px; }

/* ---------- text ---------- */
html[data-skin="2012"] .note, html[data-skin="2012"] .status, html[data-skin="2012"] .img-meta, html[data-skin="2012"] .more,
html[data-skin="2012"] .tok-sub, html[data-skin="2012"] .drop-hint small, html[data-skin="2012"] .devbuy span,
html[data-skin="2012"] .coin-meta, html[data-skin="2012"] .trades, html[data-skin="2012"] .steps, html[data-skin="2012"] table,
html[data-skin="2012"] .rewards-label, html[data-skin="2012"] .acct-box .via, html[data-skin="2012"] .menu-foot, html[data-skin="2012"] .skin-main small {
  font-family: var(--px); font-size: 12px; line-height: 1.3; }
html[data-skin="2012"] .note.fine, html[data-skin="2012"] #launch-note { font-size: 11px; }
html[data-skin="2012"] .menu-foot { font-size: 11px; text-transform: none; letter-spacing: 0; border-top: 1px solid #e3e3e3; }
html[data-skin="2012"] a, html[data-skin="2012"] .linkish { color: var(--blue); }
html[data-skin="2012"] .linkish { text-decoration: none; }
html[data-skin="2012"] .linkish:hover { text-decoration: underline; }

/* ---------- buttons: the blue "Tweet" button and the grey-white "Follow" button ---------- */
html[data-skin="2012"] .btn { padding: 7px 12px; color: #333; font: bold 12px/1 var(--px); text-shadow: 0 1px 0 #fff; border-radius: 4px;
  background: linear-gradient(#fff, #e6e6e6); border: 1px solid #bbb; border-bottom-color: #a2a2a2; outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 1px rgba(0, 0, 0, .08); }
html[data-skin="2012"] .btn:hover { background: linear-gradient(#fff, #dcdcdc); outline: none; }
html[data-skin="2012"] .btn:active { padding: 7px 12px; background: #e0e0e0; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15); }
html[data-skin="2012"] .btn.primary { color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, .25); background: linear-gradient(var(--blue-hi), var(--blue-lo));
  border-color: #057ed0; border-bottom-color: #0466a8; }
html[data-skin="2012"] .btn.primary:hover { background: linear-gradient(#2ab4ea, #0287c6); }
html[data-skin="2012"] .btn.primary:active { background: #0287c6; }
html[data-skin="2012"] .btn.danger { color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, .25); background: linear-gradient(#ee5f5b, #bd362f); border-color: #a3302a; }
html[data-skin="2012"] .btn.danger:hover { background: linear-gradient(#f06c68, #c23d36); }
html[data-skin="2012"] .btn.sm { padding: 5px 9px; font-size: 11px; }
html[data-skin="2012"] .btn.sm:active { padding: 5px 9px; }
html[data-skin="2012"] .btn[disabled] { opacity: .5; }
html[data-skin="2012"] .btn:focus-visible, html[data-skin="2012"] .tok:focus-visible, html[data-skin="2012"] .opt:focus-visible,
html[data-skin="2012"] .addr:focus-visible, html[data-skin="2012"] .skin-opt:focus-visible { outline: 2px solid #56b4ef; outline-offset: 1px; }
html[data-skin="2012"] .menu-x { color: #aaa; font: 20px/1 var(--px); }
html[data-skin="2012"] .menu-x:hover { color: #333; }
html[data-skin="2012"] .chiplink { padding: 3px 7px 3px 3px; color: #333; font: bold 11px/1 var(--px); background: linear-gradient(#fff, #ededed);
  border: 1px solid #ccc; border-radius: 4px; }
html[data-skin="2012"] .chiplink:hover { border-color: #999; }
html[data-skin="2012"] .chiplink .ph { border-radius: 3px; }

/* segmented controls */
html[data-skin="2012"] .sort, html[data-skin="2012"] .tf { gap: 0; }
html[data-skin="2012"] .sort button, html[data-skin="2012"] .tf button { padding: 4px 8px; margin-left: -1px; color: #555; font: bold 11px/1 var(--px);
  letter-spacing: 0; text-transform: none; text-shadow: 0 1px 0 #fff; background: linear-gradient(#fff, #e6e6e6); border: 1px solid #bbb; }
html[data-skin="2012"] .sort button:first-child, html[data-skin="2012"] .tf button:first-child { border-radius: 4px 0 0 4px; }
html[data-skin="2012"] .sort button:last-child, html[data-skin="2012"] .tf button:last-child { border-radius: 0 4px 4px 0; }
html[data-skin="2012"] .sort button:hover, html[data-skin="2012"] .tf button:hover { color: #333; }
html[data-skin="2012"] .sort button[aria-pressed="true"], html[data-skin="2012"] .tf button[aria-pressed="true"] {
  color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, .25); background: linear-gradient(#2c8fd6, #4aa9e9); border-color: #1d6aa5;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3); }

/* ---------- form fields ---------- */
html[data-skin="2012"] .launch input:not([type=file]), html[data-skin="2012"] .launch textarea, html[data-skin="2012"] .verify-row input {
  padding: 8px; color: #333; font: 14px/1.2 var(--px); background: #fff; border: 1px solid #ccc; border-radius: 4px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); }
html[data-skin="2012"] .launch textarea { line-height: 1.3; }
html[data-skin="2012"] .launch input:focus, html[data-skin="2012"] .launch textarea:focus, html[data-skin="2012"] .verify-row input:focus {
  border-color: #56b4ef; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1), 0 0 5px rgba(82, 168, 236, .6); }
html[data-skin="2012"] .launch input::placeholder, html[data-skin="2012"] .launch textarea::placeholder { color: #aaa; }
html[data-skin="2012"] .devbuy { background: #fff; border: 1px solid #ccc; border-radius: 4px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); }
html[data-skin="2012"] .devbuy:focus-within { border-color: #56b4ef; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1), 0 0 5px rgba(82, 168, 236, .6); }
html[data-skin="2012"] .launch .devbuy input { border: 0; box-shadow: none; background: transparent; }
html[data-skin="2012"] .drop { background: #f7f7f7; border: 1px dashed #bbb; border-radius: 5px; }
html[data-skin="2012"] .drop:hover, html[data-skin="2012"] .drop.over, html[data-skin="2012"] .drop:focus-visible { border-color: #56b4ef; background-color: #eef7fd; }
html[data-skin="2012"] .drop.has { border: 1px solid #ccc; }
html[data-skin="2012"] .drop-hint { font: 300 26px/1 var(--px); color: var(--blue); }
html[data-skin="2012"] .launch-btn { padding: 10px 12px; font-size: 14px; }
html[data-skin="2012"] .launch-btn:active { padding: 10px 12px; }
html[data-skin="2012"] textarea { color: #333; font: 11px/1.35 Menlo, Monaco, monospace; background: #fafafa; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08); }

/* checklists */
html[data-skin="2012"] .quests li { border-top: 1px solid #eee; font: 12px/1.3 var(--px); }
html[data-skin="2012"] .launch .quests li { font-size: 12px; }
html[data-skin="2012"] .check { width: 14px; height: 14px; border: 1px solid #bbb; border-radius: 3px; background: linear-gradient(#fff, #eee); }
html[data-skin="2012"] .quests li.done .check { border-color: #2e9e4f;
  background: radial-gradient(circle, #fff 0 2px, transparent 2.5px), linear-gradient(#5ccc6f, #2e9e4f); }
html[data-skin="2012"] .launch .quests li.bad .check { border-color: var(--bad); }

/* tags and chips */
html[data-skin="2012"] .tag { padding: 2px 5px; font: bold 10px/1.1 var(--px); letter-spacing: .02em; color: #fff; background: var(--blue); border-radius: 3px; }
html[data-skin="2012"] .tag.dim { color: #888; background: #f3f3f3; box-shadow: inset 0 0 0 1px #ddd; }
html[data-skin="2012"] .tag.gold { background: #e8a33c; }
html[data-skin="2012"] .tag.bad { background: var(--bad); }
html[data-skin="2012"] .launch-head .tag.dim { background: #fff; }
html[data-skin="2012"] .ph { font: bold 12px/1 var(--px); border-radius: 4px; }
html[data-skin="2012"] .ca { padding: 2px 6px; color: var(--blue); font: 12px/1 var(--px); background: #f2f8fc; border: 1px solid #cfe3f1; border-radius: 3px; }
html[data-skin="2012"] .ca:hover { background: #e3f1fb; }
html[data-skin="2012"] .addr, html[data-skin="2012"] .who-addr { font: 12px/1.2 var(--px); color: #999; }
html[data-skin="2012"] .copy, html[data-skin="2012"] .ext { color: #aaa; font: 13px/1 var(--px); }
html[data-skin="2012"] .copy:hover, html[data-skin="2012"] .ext:hover { color: var(--blue); }
html[data-skin="2012"] .pair { color: var(--blue); }
html[data-skin="2012"] .live { padding: 2px 6px; font: bold 10px/1 var(--px); letter-spacing: .04em; color: #999; border: 1px solid #ddd; border-radius: 3px; }
html[data-skin="2012"] .live.on { color: #2e9e4f; border-color: #a9dcb5; animation: blink 1.6s ease-in-out infinite; }

/* ---------- token rows read like tweets in the timeline ---------- */
html[data-skin="2012"] .tokens, html[data-skin="2012"] .profile { padding-bottom: 4px; }
html[data-skin="2012"] .token-list { margin: 0 -10px; }
html[data-skin="2012"] .tok { gap: 10px; padding: 9px 10px; border-top: 1px solid #e8e8e8; }
html[data-skin="2012"] .token-list > :first-child .tok, html[data-skin="2012"] .token-list > .tok:first-child { border-top: 0; }
html[data-skin="2012"] .tok:hover { background: #f5f8fa; }
html[data-skin="2012"] .tok img, html[data-skin="2012"] .tok .ph { width: 40px; height: 40px; border: 0; border-radius: 5px; background: #ddd; }
html[data-skin="2012"] .tok-main b { font: bold 14px/1.2 var(--px); color: #333; }
html[data-skin="2012"] .tok-sub { font-size: 12px; color: #999; }
html[data-skin="2012"] .tok-by { color: var(--blue); }
html[data-skin="2012"] .tok-mkt b { font: bold 12px/1 var(--px); color: #333; }
html[data-skin="2012"] .tok-mkt .up, html[data-skin="2012"] .tok-mkt .down { font: 12px/1 var(--px); }
html[data-skin="2012"] .more-row { padding: 10px 0 6px; }
html[data-skin="2012"] .spark-line { stroke-width: 1.5; }
html[data-skin="2012"] .spark.up .spark-line { stroke: rgba(46, 158, 79, .35); } html[data-skin="2012"] .spark.down .spark-line { stroke: rgba(208, 52, 58, .3); }
html[data-skin="2012"] .spark.up .spark-area { fill: rgba(46, 158, 79, .06); } html[data-skin="2012"] .spark.down .spark-area { fill: rgba(208, 52, 58, .05); }

/* ---------- coin screen ---------- */
html[data-skin="2012"] .coin-top { font: 12px/1 var(--px); }
html[data-skin="2012"] .coin-head .coin-img { width: 44px; height: 44px; border: 0; border-radius: 5px; }
html[data-skin="2012"] .coin-img-btn:hover .coin-img, html[data-skin="2012"] .coin-img-btn:focus-visible .coin-img { outline-color: #56b4ef; }
/* the zoom badge: a plus drawn with two bars, so it sits dead centre at any size, tucked on the corner */
html[data-skin="2012"] .coin-img-btn .zoom { right: -5px; bottom: -5px; width: 18px; height: 18px; font-size: 0; border: 2px solid #fff; border-radius: 50%;
  background: linear-gradient(#fff, #fff) center / 8px 2px no-repeat, linear-gradient(#fff, #fff) center / 2px 8px no-repeat, var(--blue);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
html[data-skin="2012"] .coin-name b { font: bold 17px/1.1 var(--px); color: #333; }
html[data-skin="2012"] .coin-name span { font: 14px/1.1 var(--px); color: #999; }
html[data-skin="2012"] #coin-chart { height: 140px; background: #fff; border: 1px solid #e3e3e3; border-radius: 4px; image-rendering: auto; }
html[data-skin="2012"] .trades { font-size: 12px; }
html[data-skin="2012"] .trades li { padding: 6px 2px; border-top: 1px solid #eee; }
html[data-skin="2012"] .trades .kind { font: bold 11px/1 var(--px); letter-spacing: .03em; }
html[data-skin="2012"] .trades .who { color: #999; }
html[data-skin="2012"] .trades .who:hover { color: var(--blue); }

/* ---------- wallet menu: a white popover ---------- */
html[data-skin="2012"] .menu { top: calc(100% + 8px); padding: 10px; background: #fff; border: 1px solid rgba(0, 0, 0, .2); border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25); animation: menu-in .15s ease both; }
html[data-skin="2012"] .opt { margin-bottom: 4px; padding: 8px; color: #333; font: bold 13px/1.2 var(--px); background: #fff; border: 1px solid #e3e3e3; border-radius: 5px; }
html[data-skin="2012"] .opt:hover { color: #fff; background: linear-gradient(#3fa9ea, #1b88d6); border-color: #1b78c0; }
html[data-skin="2012"] .opt img, html[data-skin="2012"] .opt .ph { border: 0; border-radius: 4px; }
html[data-skin="2012"] .acct-box { padding: 10px; background: #f7f9fa; border: 1px solid #e3e3e3; border-radius: 5px; }
html[data-skin="2012"] .acct-box .via img, html[data-skin="2012"] .acct-box .via .ph { border: 0; border-radius: 3px; }

/* ---------- profile ---------- */
html[data-skin="2012"] .avatar { border: 0; border-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
html[data-skin="2012"] .avatar.lg { width: 48px; height: 48px; }
html[data-skin="2012"] .avatar.pixel { background: #ddd; }
html[data-skin="2012"] .who-name, html[data-skin="2012"] .card-name { font: bold 15px/1.2 var(--px); color: #333; }
html[data-skin="2012"] .handle { font: 13px/1.2 var(--px); color: #999; }
html[data-skin="2012"] .handle:hover { color: var(--blue); }
html[data-skin="2012"] .check-badge { width: 13px; height: 13px; font: bold 8px/1 var(--px); color: #fff; background: #2fa1d9; border-radius: 50%; }
html[data-skin="2012"] .rewards { margin-top: 10px; padding: 9px 10px; background: #f7f9fa; border: 1px solid #e3e3e3; border-radius: 5px; }
html[data-skin="2012"] .rewards-label { font-size: 11px; font-weight: bold; color: #999; text-transform: uppercase; letter-spacing: .03em; }
html[data-skin="2012"] .rewards b { font: bold 15px/1.2 var(--px); color: #333; }

/* ---------- debug panel ---------- */
html[data-skin="2012"] .subnav { gap: 0; background: linear-gradient(#e6e6e6 70%, transparent); }
html[data-skin="2012"] .subnav [role="tab"] { padding: 5px 10px; margin-left: -1px; color: #555; font: bold 11px/1 var(--px); text-shadow: 0 1px 0 #fff;
  background: linear-gradient(#fff, #e6e6e6); border: 1px solid #bbb; }
html[data-skin="2012"] .subnav [role="tab"]:first-child { border-radius: 4px 0 0 4px; }
html[data-skin="2012"] .subnav [role="tab"]:nth-child(4) { border-radius: 0 4px 4px 0; }
html[data-skin="2012"] .subnav [role="tab"][aria-selected="true"] { color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
  background: linear-gradient(#2c8fd6, #4aa9e9); border-color: #1d6aa5; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3); }
html[data-skin="2012"] td { border-bottom: 1px solid #e3e3e3; }
html[data-skin="2012"] td:first-child { color: #666; font-weight: bold; }

/* ---------- modals ---------- */
html[data-skin="2012"] .lightbox { background: rgba(0, 0, 0, .55); animation: menu-in .15s ease both; }
html[data-skin="2012"] .lightbox-card { border-radius: 6px; box-shadow: 0 6px 24px rgba(0, 0, 0, .4); }
html[data-skin="2012"] .lightbox-head b, html[data-skin="2012"] .steps b { font: bold 14px/1.2 var(--px); color: #333; }
html[data-skin="2012"] .lightbox-frame { background: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 4px; }
html[data-skin="2012"] .step-n { width: 20px; height: 20px; font: bold 11px/1 var(--px); color: #fff; background: var(--blue); border-radius: 50%; }
html[data-skin="2012"] .steps code { font: 12px/1 Menlo, Monaco, monospace; color: var(--blue); }
html[data-skin="2012"] .tweet-text { padding: 8px; color: #333; background: #f7f9fa; border: 1px solid #e3e3e3; border-radius: 4px; }

/* ---------- bottom: the dark tab bar ---------- */
html[data-skin="2012"] .hud { padding: 6px 10px 7px; background: linear-gradient(#3b3b3b, #1c1c1c 50%, #0c0c0c); border-top: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
html[data-skin="2012"] .slot { padding: 3px; max-width: 34px; color: #fff; background: transparent; border: 0; border-radius: 5px; box-shadow: none; }
html[data-skin="2012"] .slot:hover:not([disabled]) { background: rgba(255, 255, 255, .08); }
html[data-skin="2012"] .slot[disabled] { background: rgba(255, 255, 255, .03); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5); }
html[data-skin="2012"] .slot img, html[data-skin="2012"] .slot .ph { border-radius: 4px; }
html[data-skin="2012"] .slot .n { right: 3px; bottom: 1px; font: bold 9px/1 var(--px); text-shadow: 0 1px 1px #000; }
html[data-skin="2012"] .slot .dot { right: 2px; top: 2px; width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 0 1px #111; }
/* the selected tab's soft glow, as on the old Home tab */
html[data-skin="2012"] .slot[aria-pressed="true"] { outline: none;
  background: radial-gradient(ellipse at 50% 100%, rgba(95, 185, 240, .45), transparent 70%), rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7); }
html[data-skin="2012"] .chat-slot { color: #4bb4ef; }
html[data-skin="2012"] .chat-slot svg { shape-rendering: auto; filter: drop-shadow(0 0 3px rgba(75, 180, 239, .6)); }

/* ---------- settings ---------- */
html[data-skin="2012"] .settings { padding-bottom: 10px; }
html[data-skin="2012"] .skin-opt { padding: 9px; color: #333; background: #fff; border: 1px solid #e3e3e3; border-radius: 5px; }
html[data-skin="2012"] .skin-opt:hover { background: #f5f8fa; }
html[data-skin="2012"] .skin-opt[aria-checked="true"] { border-color: #56b4ef; background: #eef7fd; box-shadow: 0 0 4px rgba(82, 168, 236, .5); }
html[data-skin="2012"] .skin-main b { font: bold 14px/1.2 var(--px); }
html[data-skin="2012"] .skin-main small { color: #999; }

/* social links: a plain blue disclosure link, and fields with a grey add-on label like old Bootstrap inputs */
html[data-skin="2012"] .socials summary { font: bold 12px/1.2 var(--px); letter-spacing: 0; text-transform: none; color: var(--blue); }
html[data-skin="2012"] .socials summary::before { font: bold 14px/1 var(--px); }
html[data-skin="2012"] .socials summary .dim { font-weight: normal; color: #999; }
html[data-skin="2012"] .socials summary:focus-visible { outline-color: #56b4ef; }
html[data-skin="2012"] .socials-count { padding: 2px 6px; font: bold 10px/1.1 var(--px); color: #fff; background: var(--blue); border-radius: 8px; }
html[data-skin="2012"] .link-field { background: #fff; border: 1px solid #ccc; border-radius: 4px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); overflow: hidden; }
html[data-skin="2012"] .link-field:focus-within { border-color: #56b4ef; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1), 0 0 5px rgba(82, 168, 236, .6); }
html[data-skin="2012"] .link-pre { align-self: stretch; display: grid; place-items: center; width: 42px; font: bold 11px/1 var(--px); color: #777;
  text-shadow: 0 1px 0 #fff; background: linear-gradient(#fafafa, #eaeaea); border-right: 1px solid #ccc; }
html[data-skin="2012"] .launch .link-field input { border: 0; box-shadow: none; background: transparent; border-radius: 0; }

/* ---------- about: the old app-info screen, a glossy icon over the name and version ---------- */
html[data-skin="2012"] .about-hero { padding: 10px 0 6px; gap: 3px; }
html[data-skin="2012"] .about-badge { width: 56px; height: 56px; margin-bottom: 8px; transform: none; border-radius: 12px;
  background: linear-gradient(#63b8ee, #2b86cc);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 4px rgba(0, 0, 0, .3); position: relative; overflow: hidden; }
/* a white bird on the icon, then the glassy top half every icon had back then */
html[data-skin="2012"] .about-badge::before { content: ""; position: absolute; inset: 6px; background: #fff;
  -webkit-mask: url(twitter-2012-bird.svg) center / contain no-repeat; mask: url(twitter-2012-bird.svg) center / contain no-repeat; }
html[data-skin="2012"] .about-badge::after { content: ""; position: absolute; left: -20%; right: -20%; top: -60%; height: 100%; border-radius: 50%;
  background: linear-gradient(rgba(255, 255, 255, .45), rgba(255, 255, 255, .1)); }
html[data-skin="2012"] .about-name { font: 600 24px/1 "Fredoka", "Varela Round", "Arial Rounded MT Bold", var(--px); letter-spacing: -.02em;
  text-transform: lowercase; color: #333; }
html[data-skin="2012"] .about-ver { font: 12px/1.3 var(--px); color: #999; }
html[data-skin="2012"] .about-hero small { font: italic 12px/1.3 Georgia, serif; color: #777; }
html[data-skin="2012"] .about-table { margin: 4px 0 0; border: 1px solid #e3e3e3; border-radius: 5px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
html[data-skin="2012"] .about-table td { padding: 8px 10px; font-size: 13px; }
html[data-skin="2012"] .about-table td:last-child { text-align: right; color: #333; }
html[data-skin="2012"] .about-table tr:last-child td { border-bottom: 0; }
html[data-skin="2012"] .about-links { gap: 0; border: 1px solid #e3e3e3; border-radius: 5px; overflow: hidden; }
html[data-skin="2012"] .about-links li { padding: 9px 10px; background: #fafafa; border: 0; border-top: 1px solid #e8e8e8; opacity: .55; }
html[data-skin="2012"] .about-links li:first-child { border-top: 0; }
html[data-skin="2012"] .about-link-name { font: bold 13px/1 var(--px); color: #333; }
html[data-skin="2012"] .about-link-sub { font: 12px/1 var(--px); color: #999; }
html[data-skin="2012"] .about-links li.about-contact { opacity: 1; background: #fff; }
html[data-skin="2012"] .about-contact a.about-link-sub { color: var(--blue); }
html[data-skin="2012"] .about-foot { font-size: 11px; color: #aaa; text-shadow: 0 1px 0 #fff; }

/* crafting: the pair picker is a select-style field, and the picker an icon grid like the old Discover screen */
html[data-skin="2012"] .pairs-card { background: #fff; }
html[data-skin="2012"] .pair-label { font: bold 12px/1 var(--px); letter-spacing: 0; text-transform: none; color: #666; }
html[data-skin="2012"] .pair-pick { padding: 6px 8px; color: #333; background: linear-gradient(#fff, #f0f0f0); border: 1px solid #ccc; border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .06); }
html[data-skin="2012"] .pair-pick:hover, html[data-skin="2012"] .pair-pick:focus-visible { border-color: #56b4ef; box-shadow: 0 0 5px rgba(82, 168, 236, .5); }
html[data-skin="2012"] .pair-pick b { font: bold 13px/1 var(--px); }
html[data-skin="2012"] .pair-pick small { font: 12px/1.2 var(--px); color: #999; }
html[data-skin="2012"] .pair-pick .caret { font: 10px/1 var(--px); color: #999; }
html[data-skin="2012"] .pair-img { width: 22px; height: 22px; border: 0; border-radius: 4px; }
html[data-skin="2012"] .sol-ico { border: 0; border-radius: 50%; }
html[data-skin="2012"] .launch-head .pair-pick { padding: 3px 7px 3px 5px; border-radius: 12px; text-shadow: none; }
html[data-skin="2012"] .launch-head .pair-pick small { font: 11px/1 var(--px); color: #999; }
html[data-skin="2012"] .launch-head .pair-pick b { font: bold 12px/1 var(--px); }
html[data-skin="2012"] .launch-head .pair-img { width: 18px; height: 18px; border-radius: 50%; }
html[data-skin="2012"] .pairs-search { padding: 8px 10px 8px 30px; color: #333; font: 14px/1.2 var(--px); border: 1px solid #ccc; border-radius: 16px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='4.5' fill='none' stroke='%23999' stroke-width='2'/%3E%3Cpath d='m10 10 4 4' stroke='%23999' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 10px 50% / 14px no-repeat; }
html[data-skin="2012"] .pairs-search:focus { border-color: #56b4ef; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12), 0 0 5px rgba(82, 168, 236, .6); }
html[data-skin="2012"] .pairs-grid { gap: 6px; scrollbar-color: #bbb transparent; }
html[data-skin="2012"] .pair-tile { padding: 7px 3px 6px; color: #333; background: #fff; border: 1px solid #e3e3e3; border-radius: 6px; }
html[data-skin="2012"] .pair-tile:hover:not([disabled]) { background: #f5f8fa; border-color: #cfe3f1; }
html[data-skin="2012"] .pair-tile:focus-visible { outline: 2px solid #56b4ef; }
html[data-skin="2012"] .pair-tile[aria-selected="true"] { background: #eef7fd; border-color: #56b4ef; box-shadow: 0 0 4px rgba(82, 168, 236, .5); }
html[data-skin="2012"] .pair-tile b { font: bold 12px/1.2 var(--px); }
html[data-skin="2012"] .pair-tile small { font: 10px/1.2 var(--px); color: #999; }
html[data-skin="2012"] .pair-tile-img { width: 30px; height: 30px; border: 0; border-radius: 6px; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
html[data-skin="2012"] .pair-tile .sol-ico { border-radius: 50%; }
html[data-skin="2012"] .pair-tile small.pair-mcap { font-weight: bold; color: #333; }
html[data-skin="2012"] .pair-tile small.no { color: #d0343a; }

/* dev buy: a light inset well with a segmented preset control */
html[data-skin="2012"] .devbuy-box { padding: 10px; background: #f7f9fa; border: 1px solid #e3e3e3; border-radius: 5px; }
html[data-skin="2012"] .devbuy-hint { font: 11px/1.2 var(--px); color: #999; }
html[data-skin="2012"] .buy-chips { gap: 0; }
html[data-skin="2012"] .buy-chips button { padding: 0 10px; margin-left: -1px; color: #555; font: bold 12px/1 var(--px); text-shadow: 0 1px 0 #fff;
  background: linear-gradient(#fff, #e6e6e6); border: 1px solid #bbb; }
html[data-skin="2012"] .buy-chips button:first-child { margin-left: 0; border-radius: 4px 0 0 4px; }
html[data-skin="2012"] .buy-chips button:last-child { border-radius: 0 4px 4px 0; }
html[data-skin="2012"] .buy-chips button[aria-pressed="true"] { color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
  background: linear-gradient(#2c8fd6, #4aa9e9); border-color: #1d6aa5; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3); }
html[data-skin="2012"] .devbuy-est { font: 12px/1.35 var(--px); color: #777; }
html[data-skin="2012"] .devbuy-est.ok b { color: #2e9e4f; font-weight: bold; }
html[data-skin="2012"] .devbuy-est small { font-size: 11px; color: #aaa; }

/* description countdown, 2012 style */
html[data-skin="2012"] .desc-left { font: 11px/1 var(--px); color: #aaa; }
html[data-skin="2012"] .desc-left.warn, html[data-skin="2012"] .post-left.warn { color: #d0343a; }

/* compact trades */
html[data-skin="2012"] .trades li { padding: 4px 2px; font-size: 11px; }
html[data-skin="2012"] .trades .kind { font-size: 10px; }
html[data-skin="2012"] .trades-more { font: bold 11px/1 var(--px); }

/* posts: a "What's happening?" box and a little timeline */
html[data-skin="2012"] .posts { margin: 4px -10px -10px; padding: 0; gap: 0; border-top: 0; }
html[data-skin="2012"] .posts-head { padding: 8px 10px; font: bold 13px/1.2 var(--px); letter-spacing: 0; text-transform: none; color: #555;
  text-shadow: 0 1px 0 #fff; background: linear-gradient(#fafafa, #ededed); border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }
html[data-skin="2012"] .posts-count { padding: 2px 6px; font: bold 10px/1.1 var(--px); color: #fff; background: #999; border-radius: 8px; }
html[data-skin="2012"] .composer { padding: 10px; gap: 6px; background: #f5f8fa; border-bottom: 1px solid #e8e8e8; }
html[data-skin="2012"] .composer textarea { padding: 8px; color: #333; font: 14px/1.3 var(--px); background: #fff; border: 1px solid #ccc; border-radius: 4px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); }
html[data-skin="2012"] .composer textarea:focus { border-color: #56b4ef; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1), 0 0 5px rgba(82, 168, 236, .6); }
html[data-skin="2012"] .post-left { font: 12px/1 var(--px); color: #999; }
html[data-skin="2012"] .posts-list > li.note { padding: 12px 10px; margin: 0; font-size: 12px; }
html[data-skin="2012"] .post { gap: 10px; padding: 10px; border-top: 1px solid #e8e8e8; }
html[data-skin="2012"] .posts-list > .post:first-child { border-top: 0; }
html[data-skin="2012"] .post-ava { width: 36px; height: 36px; }
html[data-skin="2012"] .post-head b { font: bold 13px/1.2 var(--px); color: #333; }
html[data-skin="2012"] .post.mine .post-head b { color: #333; }
html[data-skin="2012"] .post-time { font: 12px/1 var(--px); color: #999; }
html[data-skin="2012"] .post-text { margin-top: 2px; font: 14px/1.3 Georgia, "Times New Roman", serif; color: #333; }

/* creator: the 2012 tweet view's author row, with a stat and the old Follow button */
html[data-skin="2012"] .creator { margin: 0 -10px; padding: 10px; gap: 6px; background: #fff; border: 0; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; }
html[data-skin="2012"] .creator-label { font: bold 11px/1 var(--px); letter-spacing: .03em; color: #999; }
html[data-skin="2012"] .creator-ava { width: 24px; height: 24px; border-radius: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, .2); }
html[data-skin="2012"] .creator-name { font: bold 14px/1.2 var(--px); color: #333; }
html[data-skin="2012"] .creator-addr { font: 12px/1.2 var(--px); color: #999; }
html[data-skin="2012"] .creator-addr .ext { color: var(--blue); }
html[data-skin="2012"] .creator-who:hover .creator-name { color: var(--blue); }
html[data-skin="2012"] .creator-who:focus-visible { outline-color: #56b4ef; }
html[data-skin="2012"] .creator-stat { padding: 0 10px; border-left: 1px solid #e8e8e8; }
html[data-skin="2012"] .creator-stat b { font: bold 15px/1.1 var(--px); color: #333; }
html[data-skin="2012"] .creator-stat small { font: 10px/1 var(--px); color: #999; letter-spacing: .03em; }

/* sharing: a light well with the link in a code chip, Copy, and the blue Post on X */
html[data-skin="2012"] .share-box { padding: 9px 10px; background: #f5f8fa; border: 1px solid #e1e8ed; border-radius: 5px; }
html[data-skin="2012"] .share-title { font: bold 13px/1.2 var(--px); color: #333; }
html[data-skin="2012"] .share-url { padding: 6px 8px; font: 12px/1.2 Menlo, Monaco, monospace; color: var(--blue); background: #fff; border: 1px solid #cfe3f1; border-radius: 4px; }
html[data-skin="2012"] .open-coin { font: bold 12px/1 var(--px); }
html[data-skin="2012"] li.with-share { border-top: 1px solid #e8e8e8; }
html[data-skin="2012"] .token-list > li.with-share:first-child { border-top: 0; }
html[data-skin="2012"] .share-mini { margin-right: 6px; padding: 4px 8px; font: bold 11px/1 var(--px); color: #555; text-shadow: 0 1px 0 #fff;
  background: linear-gradient(#fff, #e6e6e6); border: 1px solid #bbb; border-radius: 4px; }
html[data-skin="2012"] .share-mini:hover { color: #333; border-color: #999; }

/* ---------- welcome post: an old-style tweet above the launch form ---------- */
html[data-skin="2012"] .welcome { display: flex; gap: 10px; margin-bottom: 10px; padding: 10px; background: #fff; border: 1px solid #c8c8c8;
  border-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
html[data-skin="2012"] .tweet-ava { flex: none; width: 48px; height: 48px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); object-fit: cover; }
html[data-skin="2012"] .tweet-body { flex: 1; min-width: 0; }
html[data-skin="2012"] .tweet-head { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
html[data-skin="2012"] .tweet-head b { font: bold 14px/1.2 var(--px); color: #333; }
html[data-skin="2012"] .tweet-handle { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 12px/1.2 var(--px); color: #999; }
html[data-skin="2012"] .tweet-time { margin-left: auto; font: 12px/1.2 var(--px); color: #999; }
html[data-skin="2012"] .tweet-copy { margin: 3px 0 0; font: 14px/1.35 Georgia, "Times New Roman", serif; color: #333; }
html[data-skin="2012"] .hashtag { color: var(--blue); }
html[data-skin="2012"] .tweet-actions { display: flex; gap: 6px; margin: 6px 0 -4px -6px; }
html[data-skin="2012"] .tweet-act { appearance: none; display: inline-flex; align-items: center; gap: 5px; min-width: 52px; padding: 4px 6px; cursor: pointer;
  color: #b3b3b3; font: bold 12px/1 var(--px); background: none; border: 0; border-radius: 4px; }
html[data-skin="2012"] .tweet-act svg { width: 15px; height: 15px; fill: currentColor; transition: transform .15s ease; }
html[data-skin="2012"] .tweet-act .lbl { display: none; }
html[data-skin="2012"] .tweet-act:hover { color: var(--blue); background: #f2f8fc; }
html[data-skin="2012"] .tweet-act:focus-visible { outline: 2px solid #56b4ef; outline-offset: 0; }
html[data-skin="2012"] .tweet-act.share[aria-pressed="true"] { color: var(--blue); }
html[data-skin="2012"] .tweet-act.repost[aria-pressed="true"] { color: #609928; }
html[data-skin="2012"] .tweet-act.star[aria-pressed="true"] { color: #e5a00d; }
html[data-skin="2012"] .tweet-act.pop svg { animation: pop .35s ease; }
@keyframes pop { 40% { transform: scale(1.45); } }

/* ---------- more: grouped table rows with chevrons, like the old "Me" screen ---------- */
html[data-skin="2012"] .more-pane { padding-bottom: 0; }
html[data-skin="2012"] .more-list { gap: 0; margin: -8px -10px 0; }
html[data-skin="2012"] .more-row-btn { padding: 10px; color: #333; background: #fff; border: 0; border-top: 1px solid #e8e8e8; border-radius: 0; }
html[data-skin="2012"] .more-list li:first-child .more-row-btn { border-top: 0; }
html[data-skin="2012"] .more-list li:last-child .more-row-btn { border-radius: 0 0 5px 5px; }
html[data-skin="2012"] .more-row-btn:hover { color: #fff; background: linear-gradient(#3fa9ea, #1b88d6); }
html[data-skin="2012"] .more-row-btn:hover small, html[data-skin="2012"] .more-row-btn:hover .chev { color: #e3f2fc; }
html[data-skin="2012"] .more-row-btn:hover .tag.dim { color: #fff; background: rgba(255, 255, 255, .2); box-shadow: none; }
html[data-skin="2012"] .more-row-btn:focus-visible { outline: 2px solid #56b4ef; outline-offset: -2px; }
html[data-skin="2012"] .more-ico { width: 32px; height: 32px; color: #fff; border: 0; border-radius: 6px;
  background: linear-gradient(#63b8ee, #2b86cc); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 1px rgba(0, 0, 0, .2); }
html[data-skin="2012"] .more-ico svg { shape-rendering: auto; }
html[data-skin="2012"] .more-main b { font: bold 14px/1.2 var(--px); }
html[data-skin="2012"] .more-main small { font: 12px/1.3 var(--px); color: #999; }
html[data-skin="2012"] .more-row-btn .chev { font: 300 24px/1 var(--px); color: #bbb; }
html[data-skin="2012"] .games-grid { gap: 8px; opacity: .45; }
html[data-skin="2012"] .games-grid li { background: #f3f3f3; border: 1px dashed #bbb; border-radius: 8px; }
html[data-skin="2012"] .soon b { font: bold 15px/1 var(--px); color: #555; text-shadow: 0 1px 0 #fff; padding: 8px 14px; background: linear-gradient(#fff, #ececec);
  border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
html[data-skin="2012"] .soon small { font: 12px/1.35 var(--px); color: #777; padding: 4px 8px; background: rgba(255, 255, 255, .9); border-radius: 4px; }

/* card-sized widths: Launch and Tokens show just their icons, like the old tab bar glyphs */
@media (max-width: 480px) {
  html[data-skin="2012"] .views .lbl { display: none; }
  html[data-skin="2012"] .views .ghost { padding: 5px 9px; }
  html[data-skin="2012"] .tab-ico { width: 17px; height: 17px; }
}
/* narrow cards: Tweetcraft falls back to key hints, which this skin hides, so keep the labels and fold the title into its badge */
@media (max-width: 420px) {
  html[data-skin="2012"] #btn-more .lbl { display: inline; }
  html[data-skin="2012"] header { gap: 4px; }
  html[data-skin="2012"] h1 { font-size: 0; flex: 1 0 auto; }
  html[data-skin="2012"] h1 .gem { width: 28px; height: 28px; margin: 0; }
  html[data-skin="2012"] .ghost, html[data-skin="2012"] .wc-btn, html[data-skin="2012"] .wc-btn.primary { padding: 6px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) { html[data-skin="2012"] .live.on { animation: none; } }