/*!
 * ui/styles.css — one stylesheet for all three targets.
 *
 * Authored against a 1280x720 stage (#app). Each platform's index.html scales
 * the stage to its native resolution (Orsay 960x540 / 1280x720, Tizen
 * 1920x1080, harness 1280x720). Avoids flexbox/grid/vw — none are safe on
 * 2011-era WebKit — using absolute positioning, percentages and table layout.
 */

html, body {
  margin: 0;
  padding: 0;
  width: 1280px;
  height: 720px;
  overflow: hidden;
  background: #08080a;
  color: #efeff1;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
}

#app { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; }

.tw-scene { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
/* The grid sits on an opaque background; the player scene is transparent so
   the video behind #app shows through. */
#tw-browser { background: #08080a; }
#tw-channel { background: transparent; }

/* --- top bar ------------------------------------------------------------ */
.tw-topbar { position: absolute; left: 0; top: 0; width: 100%; height: 84px; }
/* The top row's edge margin is 43px, not 40: the grid's thumbnails carry a 3px
   transparent border (the "invisible frame"), so their visible artwork starts
   at 40+3=43. Matching that keeps the logo/tabs/chip flush with the artwork. */
.tw-logo { position: absolute; left: 43px; top: 43px; height: 36px; }
/* Tabs sit just after the logo, shifted with the rest of the top row onto the
   43px margin; spacing is natural per label, like a tab strip rather than
   fixed-width buttons. */
.tw-tips { position: absolute; left: 87px; top: 44.5px; }
.tw-tip {
  display: inline-block; margin-left: 24px; vertical-align: middle; color: #a9a9b2;
  text-align: left; white-space: nowrap;
}
.tw-tip:first-child { margin-left: 8px; }
.tw-tip-box {
  display: inline-block; padding: 0 0 6px; font-size: 0; line-height: 0;
  border-bottom: 3px solid transparent;
}
.tw-tip-label {
  display: inline-block; position: relative; top: 1px;
  height: 20px; line-height: 20px; vertical-align: middle;
  font-size: 20px; font-weight: 300;
}
.tw-tip-active { color: #fff; }
.tw-tip-active .tw-tip-box { border-bottom-color: rgba(244, 244, 247, 0.55); }
.tw-tabs-focused .tw-tip-active .tw-tip-box { border-bottom-color: transparent; }
/* D-pad cursor for the tab row: a sliding underline separate from the active
   tab marker, so tabs don't read as push buttons. */
.tw-tip-cursor {
  position: absolute; opacity: 0; pointer-events: none; border-bottom: 3px solid #f4f4f7;
  box-sizing: border-box;
  -webkit-transition: left 0.14s ease-out, width 0.14s ease-out, opacity 0.15s ease-out;
  transition: left 0.14s ease-out, width 0.14s ease-out, opacity 0.15s ease-out;
}
.tw-dot {
  display: inline-block; width: 26px; height: 26px; line-height: 26px;
  text-align: center; color: #fff; font-weight: 700; font-size: 15px;
  vertical-align: middle;
}
/* The remote's A/B/C buttons render as uniform dark-grey chips — the letter is
   the cue, so the on-screen hint doesn't reproduce the button colours. The class
   names still map to the physical button each represents. White letter (via
   .tw-dot) reads cleanly on this grey. */
.tw-red, .tw-green, .tw-yellow { background: #36363c; }

/* --- grid --------------------------------------------------------------- */
/* Clips the content; the inner scroller is translated so the focused row stays
   pinned to the top ("first") row. Visible artwork sits on a constant 43px edge
   margin that matches the top bar: left/right are 35px + 5px cell padding + 3px
   transparent thumb border = 43px, lining thumbnails up under the logo/tabs/chip.
   Game covers use 10px cells, so the Games wrapper tightens to 30px:
   30px + 10px cell padding + 3px transparent border = the same 43px edge.
   top:114 puts the artwork 43px below the top row — the same as the row's 43px
   top margin — so the top row gets equal breathing room above and below. Item
   gutters stay smaller than this margin (games 20px, channels 10px) so the outer
   framing always reads larger. Stage-px, scales uniformly per platform. The grid
   fills to the bottom edge (no fixed bottom gap): content runs off the bottom
   while scrolling; the only bottom margin is the empty space once the last row
   reaches the top. */
.tw-grid-wrap { position: absolute; left: 35px; right: 35px; top: 114px; bottom: 0; overflow: hidden; }
.tw-grid-wrap-games { left: 30px; right: 30px; }
.tw-grid-wrap-category .tw-grid-scroll { position: absolute; left: 0; right: 0; top: 174px; }
.tw-category-head {
  display: none; position: absolute; left: 0; right: 0; top: 0; height: 156px;
  text-align: left; overflow: hidden;
}
.tw-category-cover {
  position: absolute; left: 5px; top: 0; width: 108px; height: 144px;
  background: #18181b; border: 3px solid transparent; box-sizing: border-box;
  -webkit-background-clip: padding-box; background-clip: padding-box;
}
.tw-category-copy { margin-left: 132px; padding: 0 8px 0 0; }
.tw-category-name {
  font-size: 32px; line-height: 38px; color: #fff; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tw-category-stats {
  margin-top: 7px; font-size: 18px; line-height: 22px; color: #c8c8cf;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tw-category-desc {
  margin-top: 8px; max-height: 84px; overflow: hidden;
  font-size: 17px; line-height: 21px; color: #dedee3;
}
/* GPU-composited transform + short transition = a smooth, lightweight scroll.
   The category header gets the same transform as the grid so it moves out with
   the category content instead of sitting behind later rows. */
.tw-grid-scroll,
.tw-category-head {
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
}
.tw-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tw-cell { width: 25%; padding: 6px 5px 13px; vertical-align: top; }
/* Game covers are big portrait tiles — keep them a touch more spaced. */
.tw-cell-game { padding: 9px 10px 17px; }
.tw-cell-inner { position: relative; }
.tw-thumb {
  width: 100%; height: 167.15625px; display: block; background: #18181b;
  border: 3px solid transparent; border-radius: 0; box-sizing: border-box;
  /* keep the bg out from under the transparent border so the gap to the focus
     frame shows the page background, not the placeholder grey. */
  -webkit-background-clip: padding-box; background-clip: padding-box;
}
/* Game box art is portrait (285x380): fill the cell width like stream thumbs so
   the cell grows taller and the caption/focus frame line up with the cover. */
.tw-cell-game .tw-thumb { width: 100%; height: 380px; max-height: none; }
/* Selection frame: a FIXED overlay positioned over the focused tile (sized via
   JS). It lives outside the scroller, so when Up/Down scrolls content under it
   the frame stays put and its top line never clips. The 3px transparent thumb
   border gives the small gap between this outline and the artwork. */
.tw-grid-frame {
  position: absolute; opacity: 0; pointer-events: none;
  outline: 4px solid #f4f4f7;
  /* Animate the horizontal slide (Left/Right within the row) and the fade
     in/out when focus enters/leaves the grid. width/height/top are NOT animated
     so the load-time resize and mode switches stay instant. */
  -webkit-transition: left 0.14s ease-out, opacity 0.18s ease-out;
  transition: left 0.14s ease-out, opacity 0.18s ease-out;
}
/* Caption text lives below the image, inset 3px to align with the visible
   artwork inside the thumbnail's transparent border. */
.tw-meta {
  position: static; box-sizing: border-box;
  background: transparent; padding: 8px 3px 0;
}
.tw-cell-game .tw-meta { padding: 10px 3px 0; }
/* Stream title: the prominent top line, truncated to one line. */
.tw-meta-title {
  font-size: 19px; line-height: 23px; font-weight: 500; color: #fff;
  white-space: nowrap; text-align: left; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 4px;
}
/* overflow:hidden makes the row a block formatting context so it contains the
   floated viewer count (Orsay-safe — no flexbox). */
.tw-meta-row { overflow: hidden; line-height: 20px; }
/* Viewer count floats right; the name takes the rest and ellipsises — one line. */
.tw-meta-views {
  float: right; margin-left: 12px; font-size: 16px; line-height: 20px;
  color: #c6c6ce; font-weight: 500;
}
.tw-meta-name {
  display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 16px; line-height: 20px; color: #dedee3; text-align: left;
  font-weight: 400;
}
/* Games tiles have no title line, so the name is the primary label — bump it
   (and the count) a touch larger than the channel-tile text. */
.tw-cell-game .tw-meta-row { line-height: 22px; }
.tw-cell-game .tw-meta-name { font-size: 19px; line-height: 22px; font-weight: 500; color: #fff; }
.tw-cell-game .tw-meta-views { font-size: 17px; line-height: 22px; }

/* --- Following (sectioned view + offline channel tiles) ------------------ */
/* The sectioned view lives inside the same scroller as the flat grid; only
   one is shown at a time. */
.tw-follow { display: none; }
.tw-sec { margin: 0 0 18px; }
.tw-sec-game { margin-left: -5px; margin-right: -5px; }
/* Section heading; its left padding lines the text up with the thumbnail
   artwork (5px cell padding + 3px transparent thumb border = 8px). */
.tw-sec-head {
  font-size: 20px; line-height: 24px; font-weight: 600; color: #efeff1;
  text-align: left; padding: 4px 8px 9px;
}
/* Game/category tiles have 10px cell padding, so the section expands by 5px
   per side and the heading receives the same compensation. */
.tw-sec-game .tw-sec-head { padding-left: 13px; padding-right: 13px; }
/* Empty pad cells keep table-layout:fixed honouring 25% columns when a section's
   last row is short, so a lone tile isn't stretched across the whole width. */
.tw-cell-pad { background: none; }
/* Offline channel tile: just a circular avatar + name, no card. The section runs
   at 6 columns (.tw-grid-6) since these tiles are more compact than 16:9 thumbs. */
.tw-grid-6 .tw-cell { width: 16.6667%; }
.tw-cell-channel { padding: 5px; }
.tw-cell-channel .tw-cell-inner { text-align: center; padding: 10px 6px 14px; }
.tw-chan-avatar {
  width: 96px; height: 96px; border-radius: 50%; background: #18181b;
  display: inline-block; border: 3px solid transparent; box-sizing: border-box;
  -webkit-background-clip: padding-box; background-clip: padding-box;
}
.tw-chan-avatar-ph { background: #3a3a42; }
.tw-chan-name {
  margin-top: 10px; font-size: 18px; color: #dedee3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Focus: a ring around the avatar (matches its round shape) + a brighter name.
   The shared grid frame is made round for these tiles (see followFrame). */
.tw-grid-frame-round {
  outline: 0; border-radius: 50%;
  -webkit-box-shadow: 0 0 0 4px #f4f4f7; box-shadow: 0 0 0 4px #f4f4f7;
}
.tw-cell-channel .tw-cell-inner.tw-focused .tw-chan-name { color: #fff; }
/* Zero follows: a centred, large, muted message filling the grid area. */
.tw-follow-empty {
  display: none; position: absolute; left: 0; right: 0; top: 50%;
  -webkit-transform: translateY(-50%); transform: translateY(-50%);
  text-align: center; font-size: 34px; color: #5c5c66; padding: 0 40px;
}

/* --- channel page (info + VODs) ----------------------------------------- */
#tw-cpage { background: #08080a; }
.tw-cp-head { position: absolute; left: 43px; right: 43px; top: 36px; height: 120px; }
.tw-cp-avatar {
  position: absolute; left: 0; top: 0; width: 96px; height: 96px;
  border-radius: 50%; background: #18181b;
}
/* Left-aligned beside the avatar (don't inherit the harness stage's centering). */
.tw-cp-info { margin-left: 124px; text-align: left; }
.tw-cp-name { font-size: 34px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-cp-followers { font-size: 18px; color: #adadb8; margin-top: 6px; }
.tw-cp-desc {
  font-size: 18px; color: #c8c8cf; margin-top: 10px; line-height: 1.35;
  max-height: 50px; overflow: hidden;
}
/* VOD grid: same wrapper/scroll/frame contract as the browse grid, scoped to
   this scene so the two never share the selection-frame element. */
.tw-cp-grid-wrap { position: absolute; left: 35px; right: 35px; top: 172px; bottom: 0; overflow: hidden; }
.tw-cp-scroll {
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
}
.tw-cp-empty {
  display: none; position: absolute; left: 0; right: 0; top: 40%;
  text-align: center; font-size: 28px; color: #5c5c66;
}
#tw-cp-loading { top: 172px; }

/* --- player overlay ----------------------------------------------------- */
.tw-player-surface {
  position: absolute; left: 0; top: 0; width: 1280px; height: 720px;
  overflow: hidden; z-index: 2;
}
.tw-player-scrim {
  position: absolute; left: 0; right: 0; pointer-events: none; z-index: 2;
  background: rgba(6, 7, 10, 0.82);
}
.tw-player-scrim-bottom { bottom: 0; height: 252px; }
.tw-nowbar {
  position: absolute; left: 42px; right: 42px; bottom: 126px; height: 118px;
  z-index: 4; box-sizing: border-box; padding: 0 0 0 92px; text-align: left;
  overflow: hidden;
}
.tw-now-icon {
  position: absolute; left: 0; top: 5px; width: 68px; height: 68px;
  background: #25252b; border: 0;
  border-radius: 0; box-sizing: border-box; object-fit: cover;
}
.tw-now-copy { padding-top: 0; }
.tw-now-kicker {
  height: 24px; line-height: 22px; font-size: 15px; color: #c5c9d3;
  text-transform: uppercase; white-space: nowrap; overflow: hidden;
}
.tw-now-kind {
  display: inline-block; height: 22px; line-height: 22px; padding: 0 8px;
  background: #f4f4f7; color: #101116; border-radius: 0;
  font-size: 13px; font-weight: 700; vertical-align: top;
}
.tw-content-live .tw-now-kind { background: #e91916; color: #fff; }
.tw-content-vods .tw-now-kind { background: #68d8e8; color: #071216; }
.tw-content-clips .tw-now-kind { background: #ffce6a; color: #171006; }
.tw-now-sep {
  display: none; width: 1px; height: 15px; margin: 4px 10px 0;
  background: rgba(255, 255, 255, 0.28); vertical-align: top;
}
.tw-has-viewers .tw-now-sep { display: inline-block; }
.tw-now-viewers {
  display: inline-block; height: 22px; line-height: 22px; vertical-align: top;
  font-size: 15px; color: #d9dce4; font-weight: 500;
}
.tw-now-headline {
  margin-top: 5px; height: 38px; line-height: 36px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.tw-now-name {
  display: inline; font-size: 30px; color: #fff; font-weight: 600;
}
.tw-now-game {
  display: none; margin-left: 18px; padding-left: 16px; border-left: 4px solid rgba(244, 244, 247, 0.48);
  font-size: 18px; color: #c5cedb; font-weight: 300; vertical-align: 3px;
}
.tw-has-game .tw-now-game { display: inline; }
.tw-now-title {
  margin-top: 1px; max-height: 48px; overflow: hidden; font-size: 20px; line-height: 24px;
  color: #e1e4ec; font-weight: 300;
}
.tw-progress {
  display: none; position: absolute; left: 42px; right: 42px; bottom: 92px; height: 24px;
  z-index: 4; color: #e4e7ef; font-size: 16px; line-height: 24px; text-align: left;
}
.tw-progress-time {
  position: absolute; left: 0; top: 0; width: 66px; height: 24px; text-align: left;
}
.tw-progress-total { left: auto; right: 0; text-align: right; }
.tw-progress-track {
  position: absolute; left: 76px; right: 76px; top: 8px; height: 8px;
  background: rgba(255, 255, 255, 0.24); border-radius: 0; overflow: hidden;
}
.tw-progress-fill {
  display: block; width: 0%; height: 8px; background: #f4f4f7; border-radius: 0;
}
.tw-progress.tw-focused {
  outline: 2px solid rgba(244, 244, 247, 0.72); outline-offset: 6px;
}
.tw-progress.tw-focused .tw-progress-track { background: rgba(244, 244, 247, 0.34); }
.tw-seek-flash {
  display: none; position: absolute; top: 50%; width: 118px; height: 54px; margin-top: -27px;
  z-index: 5; line-height: 54px; text-align: center; font-size: 24px; font-weight: 500;
  color: #fff; background: rgba(24, 24, 27, 0.72);
}
.tw-seek-flash-left { left: 180px; }
.tw-seek-flash-right { right: 180px; }
.tw-pause-indicator {
  display: none; position: absolute; left: 50%; top: 50%; width: 132px; height: 132px;
  margin-left: -66px; margin-top: -66px; z-index: 5; text-align: center;
  background: rgba(24, 24, 27, 0.82);
}
.tw-pause-indicator span {
  display: inline-block; width: 22px; height: 78px; margin: 27px 10px 0;
  background: #f4f4f7; vertical-align: top;
}
.tw-controls {
  position: absolute; left: 42px; right: 42px; bottom: 42px; height: 40px;
  z-index: 4; text-align: left; white-space: nowrap;
}
.tw-control {
  display: inline-block; height: 38px; line-height: 38px; margin-right: 12px; padding: 0 20px;
  box-sizing: border-box; color: #eff1f6; font-size: 17px; font-weight: 500; text-align: center;
  background: #323239; border: 0;
  border-radius: 0; vertical-align: top; outline: 0;
}
.tw-control.tw-focused {
  background: #f4f4f7; color: #111318; outline: 4px solid #f4f4f7;
}
.tw-panel {
  display: none; position: absolute; left: 42px; bottom: 98px; width: 318px; height: 184px;
  background: #18181b; border: 0;
  border-radius: 0; box-sizing: border-box; padding: 22px 22px 20px; z-index: 5;
  text-align: left; box-shadow: none; outline: 4px solid rgba(244, 244, 247, 0.95);
}
.tw-panel-mark {
  position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: #f4f4f7;
}
.tw-panel-quality { margin-top: 0; }
.tw-quality-label {
  font-size: 16px; line-height: 20px; color: #aeb5c3; text-transform: uppercase;
  font-weight: 600;
}
.tw-quality-picker {
  margin-top: 12px; height: 76px; line-height: 76px; text-align: center;
  background: #2f2f36; border: 0;
  border-radius: 0; white-space: nowrap; overflow: hidden;
}
.tw-quality-arrow {
  display: inline-block; width: 36px; height: 76px; line-height: 76px;
  text-align: center; font-size: 17px; color: #f4f4f7; vertical-align: top;
}
.tw-quality-name {
  display: inline-block; width: 174px; height: 76px; line-height: 76px;
  color: #fff; font-size: 30px; font-weight: 600; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top;
}

/* --- chat rail (read-only) ---------------------------------------------- */
.tw-chat {
  display: none; position: absolute; left: 0; top: 0; width: 360px; height: 720px;
  background: #08080a; border-left: 0;
  box-sizing: border-box; z-index: 5; overflow: hidden;
}
.tw-chat-head {
  position: absolute; left: 12px; right: 12px; top: 12px; height: 92px;
  background: #303038;
  box-sizing: border-box; padding: 14px; text-align: left;
}
.tw-chat-avatar-wrap {
  position: absolute; left: 14px; top: 14px; width: 64px; height: 64px;
  border-radius: 50%; box-sizing: border-box;
  background: #d9dce4; box-shadow: 0 0 0 2px rgba(217, 220, 228, 0.24);
}
.tw-content-live .tw-chat-avatar-wrap {
  background: #e91916; box-shadow: 0 0 0 2px rgba(233, 25, 22, 0.22);
}
.tw-chat-avatar {
  position: absolute; left: 3px; top: 3px; width: 58px; height: 58px;
  background: #1f1f24; border: 0; border-radius: 50%; box-sizing: border-box;
  object-fit: cover;
}
.tw-chat-live-badge {
  position: absolute; left: 50%; bottom: -3px; height: 14px; padding: 0 3px;
  -webkit-transform: translateX(-50%); transform: translateX(-50%);
  line-height: 14px; text-align: center; background: #e91916; color: #fff;
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0;
}
.tw-chat-copy {
  margin-left: 78px; padding-top: 2px; min-width: 0;
}
.tw-chat-name {
  height: 25px; line-height: 25px; font-size: 21px; color: #fff;
  font-weight: 400; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.tw-chat-viewers {
  margin-top: 4px; height: 30px; line-height: 30px; color: #fff;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.tw-chat-viewer-number { font-size: 26px; font-weight: 300; color: #fff; }
.tw-chat-viewer-label {
  font-size: 21px; font-weight: 300; color: rgba(255, 255, 255, 0.52);
  text-transform: lowercase; vertical-align: 1px;
}
.tw-chat-list {
  position: absolute; left: 0; right: 0; top: 116px; bottom: 0; overflow: hidden;
  padding: 0 12px 12px; box-sizing: border-box; text-align: left;
}
.tw-chat-row {
  position: relative; font-size: 16px; line-height: 20px; margin: 0 0 8px;
  padding: 9px 10px 10px; word-wrap: break-word; color: #e6e8ee;
  background: #1f1f24; box-sizing: border-box;
}
.tw-chat-row:last-child { margin-bottom: 0; }
.tw-chat-nick {
  display: block; font-size: 15px; line-height: 18px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tw-chat-sep { display: none; }
.tw-chat-msg { display: block; margin-top: 2px; color: #e6e8ee; }

/* --- account chip (browser top bar) ------------------------------------- */
/* Chip sits at the far right (43px edge), matching the logo's height and edge. */
.tw-account {
  position: absolute; top: 43px; right: 43px; height: 36px; line-height: 36px;
  max-width: 300px; padding: 0 20px; box-sizing: border-box;
  font-size: 17px; font-weight: 500; text-align: center; color: #eff1f6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border: 0; border-radius: 0; outline: 0; background: #323239;
  -webkit-transition: background 0.105s ease-out, color 0.105s ease-out;
  transition: background 0.105s ease-out, color 0.105s ease-out;
}
.tw-account.tw-focused {
  color: #111318; outline: 0; background: #f4f4f7;
}

/* --- login scene -------------------------------------------------------- */
#tw-login { background: #08080a; }
.tw-login-card {
  position: absolute; left: 50%; top: 50%; width: 760px; margin-left: -380px; text-align: center;
  -webkit-transform: translateY(-50%); transform: translateY(-50%);
}
.tw-login-logo { height: 44px; }
.tw-login-title { font-size: 34px; color: #fff; margin: 14px 0 10px; }
.tw-login-help { font-size: 20px; color: #c8c8cf; line-height: 1.4; margin: 0 auto 22px; max-width: 660px; }
.tw-login-btn {
  display: inline-block; margin-top: 22px; padding: 16px 54px; font-size: 24px;
  background: #3f3f47; color: #efeff1; border-radius: 0;
}
.tw-login-btn.tw-focused { background: #f4f4f7; color: #18181b; }
.tw-login-code { font-size: 64px; font-weight: 700; letter-spacing: 6px; color: #f4f4f7; margin: 16px 0 10px; }
/* Separator between the typed code and the scannable QR — large but light. */
.tw-login-or { font-size: 32px; font-weight: 200; letter-spacing: 6px; color: #a0a0a8; margin: 6px 0 4px; }
/* QR of the activation URL: crisp black modules on a white rounded card whose
   padding doubles as the required quiet zone. A <table> renders identically on
   every target, old Orsay WebKit included. */
.tw-login-qr {
  display: inline-block; margin: 14px auto 4px; padding: 20px;
  background: #fff; border-radius: 14px; line-height: 0;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
}
.tw-login-qr table { border-collapse: collapse; border-spacing: 0; }
.tw-login-qr td { width: 7px; height: 7px; padding: 0; }
.tw-login-qr td.on { background: #0e0e10; }
.tw-login-msg { font-size: 20px; color: #ffd479; margin-top: 18px; min-height: 24px; }

/* --- loading/status indicators ----------------------------------------- */
.tw-loading {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  text-align: center; z-index: 6; pointer-events: none;
}
/* Browser: center within the GRID area, not the whole stage. Keep this top in
   sync with .tw-grid-wrap (114px) so the ring sits in the grid's middle. */
#tw-b-loading { top: 114px; }
.tw-status-box {
  position: absolute; left: 50%; top: 50%; width: 104px; height: 104px;
  margin-left: -52px; margin-top: -52px; padding: 0;
  box-sizing: border-box; text-align: center; background: rgba(24, 24, 27, 0.82);
}
.tw-spinner {
  display: inline-block; width: 46px; height: 46px; box-sizing: border-box; vertical-align: middle;
  border: 4px solid rgba(244, 244, 247, 0.16); border-top-color: #f4f4f7; border-radius: 50%;
  -webkit-animation: tw-spin 0.72s linear infinite; animation: tw-spin 0.72s linear infinite;
}
/* Inside an overlay the ring centers in the box; standalone (login) it stays
   inline in the card. */
.tw-loading .tw-spinner {
  position: absolute; left: 50%; top: 50%; margin-left: -23px; margin-top: -23px;
}
.tw-status-box .tw-spinner {
  position: absolute; left: 50%; top: 50%; margin-left: -23px; margin-top: -23px;
}
.tw-loading-text {
  display: none; position: absolute; left: 0; right: 0; top: 50%; font-size: 30px; color: #f4f4f7;
  -webkit-transform: translateY(-50%); transform: translateY(-50%);
}
.tw-status-box .tw-loading-text {
  display: none; position: absolute; left: 12px; top: 128px; width: 160px; height: 42px; margin-top: 0;
  font-size: 17px; line-height: 20px; font-weight: 500; overflow: hidden;
  -webkit-transform: none; transform: none;
}
.tw-loading.tw-msg .tw-status-box {
  width: 104px; height: 104px; margin-left: -52px; margin-top: -52px; padding: 0;
}
.tw-loading.tw-msg .tw-spinner { display: none; }
.tw-loading.tw-msg .tw-loading-text { display: block; }
.tw-loading.tw-msg .tw-status-box .tw-spinner {
  display: inline-block; top: 50%; margin-top: -23px;
}
.tw-loading.tw-msg .tw-status-box .tw-loading-text { display: none; }
.tw-loading.tw-error .tw-status-box:before {
  content: "!"; position: absolute; left: 50%; top: 50%; width: 46px; height: 46px;
  margin-left: -23px; margin-top: -23px; line-height: 46px; text-align: center;
  color: #f4f4f7; font-size: 38px; font-weight: 700;
}
.tw-loading.tw-error .tw-status-box .tw-spinner { display: none; }
.tw-loading.tw-error .tw-status-box .tw-loading-text {
  font-size: 18px; line-height: 22px;
}
@-webkit-keyframes tw-spin { 0% { -webkit-transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); } }
@keyframes tw-spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }