/* Calm, rounded refresh for the YourAverageIdiot site. */
:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  color-scheme: dark;
  --page-max: 1440px;
  --r-s: 12px;
  --r-m: 16px;
  --r-l: 22px;
  --r-xl: 30px;
  --r-pill: 999px;
  --hark-shadow: 0 14px 38px rgb(0 0 0 / 20%);
  --fill-primary-on: #151a24;
  --fill-tertiary: #202838;
  --fill-secondary: #283246;
  --text-primary: #eef1f7;
  --text-secondary: #aab4c7;
  --text-tertiary: #818da3;
  --fill-primary: #6579dc;
  --text-primary-on: #ffffff;
  --x-primary-hover: #5266cc;
  --stroke-primary: #354057;
  --stroke-secondary: rgb(238 241 247 / 14%);
  --x-accent: #91a0ff;
  --x-accent-soft: rgb(145 160 255 / 30%);
  --x-warn: #f4867c;
  --x-line: #303a4e;
  --x-mono: "Geist Mono", ui-monospace, monospace;
  --x-cond: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html { scroll-behavior: smooth; }
body {
  background: radial-gradient(ellipse at 50% -180px, #252e41 0, #151a24 68%);
  color: var(--text-primary);
}
.page { padding: 24px clamp(16px, 3vw, 38px) 40px; gap: 18px; }
:focus-visible { outline: 3px solid rgb(145 160 255 / 52%); outline-offset: 3px; border-radius: 10px; }

/* Profile header */
.x-bar {
  min-height: 204px;
  align-items: center;
  gap: 16px 20px;
  margin: 0;
  padding: clamp(22px, 4vw, 38px);
  border: 1px solid rgb(255 255 255 / 34%);
  border-radius: var(--r-xl);
  background: #1c263c;
  box-shadow: 0 16px 42px rgb(29 39 64 / 13%);
}
.x-bar__bg { object-position: center 42%; filter: saturate(.82); }
.x-bar__shade {
  background: linear-gradient(90deg, rgb(15 21 36 / 91%) 0%, rgb(15 21 36 / 74%) 52%, rgb(15 21 36 / 30%) 100%);
}
.x-avatar {
  width: 68px;
  height: 68px;
  border: 2px solid rgb(255 255 255 / 74%);
  box-shadow: 0 5px 18px rgb(0 0 0 / 20%);
}
.x-id { flex-basis: 290px; }
.x-id h1 {
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(27px, 3.3vw, 38px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.045em;
  text-transform: none;
}
.x-id p { margin-top: 8px; color: rgb(255 255 255 / 77%); font: var(--type-small); }
.x-id .x-fol { color: #fff; font-family: var(--sans); font-weight: 600; }
.x-bar__actions { gap: 8px; margin-left: auto; }
.x-bar .btn,
.x-card .btn {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--stroke-primary);
  border-radius: var(--r-pill);
  background: #293246;
  color: var(--text-primary);
  font: var(--weight-medium) 13px/1 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.x-bar .btn { border-color: rgb(255 255 255 / 28%); background: rgb(255 255 255 / 11%); color: #fff; }
.x-bar .btn:hover { background: rgb(255 255 255 / 18%); border-color: rgb(255 255 255 / 50%); }
.x-bar .btn.x-primary,
.x-card .btn.x-primary { background: var(--fill-primary); border-color: var(--fill-primary); color: #fff; }
.x-bar .btn.x-primary:hover,
.x-card .btn.x-primary:hover,
.x-go:hover { background: var(--x-primary-hover); border-color: var(--x-primary-hover); }
.x-bar .btn.x-primary::after,
.x-card .btn.x-primary::after { color: inherit; }
.x-sep { height: 22px; background: rgb(255 255 255 / 35%); margin: 0 3px; }
.x-icon { border-radius: 50%; color: rgb(255 255 255 / 86%); }
.x-icon:hover { border-color: rgb(255 255 255 / 40%); background: rgb(255 255 255 / 12%); color: #fff; }
.x-icon svg { stroke-linecap: round; stroke-linejoin: round; }

/* Soft cards and spacious dashboard */
.x-tick::before,
.x-tick::after { display: none; }
.x-dash {
  align-items: stretch;
  gap: 16px;
  grid-template-columns: minmax(230px, .92fr) minmax(360px, 1.62fr) minmax(260px, 1fr);
  grid-template-rows: minmax(390px, auto) minmax(255px, auto);
}
.x-card {
  overflow: hidden;
  padding: 20px 22px;
  border: 1px solid var(--stroke-primary);
  border-radius: var(--r-l);
  background: var(--fill-tertiary);
  box-shadow: 0 8px 28px rgb(0 0 0 / 16%);
}
.x-card__head {
  gap: 12px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}
.x-clip-controls { display: flex; flex: none; align-items: center; gap: 8px; }
.x-clip-nav {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  padding: 0 0 3px;
  border: 1px solid var(--stroke-primary);
  border-radius: 50%;
  background: #293246;
  color: var(--text-primary);
  font: 400 24px/1 var(--sans);
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.x-clip-nav:hover:not(:disabled) { background: #343d67; border-color: #5366a9; }
.x-clip-nav:disabled { opacity: .45; cursor: default; }
.x-clip-count { min-width: 34px; color: var(--text-secondary); font: var(--type-caption); text-align: center; font-variant-numeric: tabular-nums; }
.x-clips-head { flex-wrap: wrap; }
.x-clip-range { display: flex; flex: none; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: #191f2c; }
.x-clip-range button {
  min-height: 32px;
  padding: 0 11px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-secondary);
  font: var(--weight-medium) 12px/1 var(--sans);
  cursor: pointer;
}
.x-clip-range button[aria-selected="true"] { background: #354057; color: var(--text-primary); }
.x-clip-range button:hover { color: var(--text-primary); }
.x-clip-range-note { margin: 0 0 8px; color: var(--text-secondary); font: var(--type-caption); }
.x-clip-list { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.x-clip-list > li { min-width: 0; }
.x-clip-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 7px 9px;
  border-radius: 12px;
  color: var(--text-primary);
  text-decoration: none;
  transition: background-color 150ms ease;
}
.x-clip-item:hover { background: #293246; }
.x-clip-thumb { width: 72px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: #151a24; }
.x-clip-copy { min-width: 0; }
.x-clip-copy b { display: block; overflow: hidden; font: var(--weight-medium) 13px/1.35 var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.x-clip-copy small { display: block; margin-top: 3px; color: var(--text-secondary); font: var(--type-caption); }
.x-clip-open { color: var(--text-tertiary); text-align: right; }
.x-clip-empty { padding-top: 4px; }
.x-card h2 {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.025em;
  text-transform: none;
}
.x-card h2::before { content: none; }
.x-card__body { scrollbar-color: #4b566d transparent; scrollbar-width: thin; }
.x-label { font: var(--type-caption); letter-spacing: .06em; }
.x-status p.x-text { margin-bottom: 14px; line-height: 1.55; }
.x-big {
  margin: 3px 0 10px;
  font-family: var(--sans);
  font-size: clamp(29px, 2.7vw, 36px);
  font-weight: 600;
  letter-spacing: -.045em;
  text-transform: none;
}
.x-big span { color: var(--x-accent); }
.x-count { font-family: var(--sans); font-size: 38px; font-weight: 600; letter-spacing: -.04em; }
.x-facts { margin-top: 16px; }
.x-facts div { padding: 11px 0; border-color: var(--x-line); }
.x-facts dt { letter-spacing: .06em; }
.x-facts dd { line-height: 1.45; }
.x-daylist { margin-top: 14px; border-color: var(--x-line); }
.x-daylist li { padding: 9px 8px; border-color: var(--x-line); border-radius: 10px; }
.x-daylist li.is-today { background: #2a3452; box-shadow: inset 3px 0 var(--x-accent); }
.x-day { font-family: var(--sans); font-size: 12px; letter-spacing: .03em; }

/* Video, voting and lists */
.x-player { min-height: 220px; border: 0; border-radius: 15px; background: #151820; }
.x-player iframe { border-radius: inherit; }
.x-note { margin-top: 9px; line-height: 1.45; }
.x-row { gap: 8px; margin-bottom: 9px; }
.x-input {
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid var(--stroke-primary);
  border-radius: 12px;
  background: #191f2c;
  font: var(--type-small);
}
.x-input:focus { outline: 2px solid rgb(145 160 255 / 30%); outline-offset: 0; border-color: var(--x-accent); }
.x-tabs { gap: 2px; padding: 3px; border: 0; border-radius: var(--r-pill); background: #191f2c; }
.x-tabs button {
  min-height: 35px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-pill);
  color: var(--text-secondary);
  font: var(--weight-medium) 12px/1 var(--sans);
  letter-spacing: 0;
  text-transform: none;
}
.x-tabs button + button { border-left: 0; }
.x-tabs button[aria-selected="true"] { background: #354057; color: var(--text-primary); box-shadow: 0 1px 4px rgb(0 0 0 / 22%); }
.x-games li,
.x-vods li { padding: 8px 0; border-color: var(--x-line); }
.x-games li { gap: 9px; }
.x-rank { color: #8d96a8; }
.x-score { color: var(--text-secondary); }
.x-votebtn {
  min-height: 36px;
  min-width: 38px;
  border: 1px solid var(--stroke-primary);
  border-radius: 11px;
  background: #293246;
  color: var(--text-secondary);
  padding: 0 9px;
}
.x-votebtn:hover { border-color: var(--x-accent); color: var(--x-accent); }
.x-votebtn[aria-pressed="true"] { background: #343d67; border-color: #4b5790; color: #c1c9ff; }
.x-more {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid var(--stroke-primary);
  border-radius: var(--r-pill);
  color: var(--text-secondary);
  font: var(--weight-medium) 12px/1 var(--sans);
  letter-spacing: 0;
  text-transform: none;
}
.x-more:hover { border-color: #53617d; background: #293246; color: var(--text-primary); }
.x-suggest { margin-top: 12px; padding-top: 14px; border-color: var(--x-line); }
.x-suggest .x-row { margin-top: 8px; }
.x-go {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--fill-primary);
  border-radius: var(--r-pill);
  background: var(--fill-primary);
  color: #fff;
  font: var(--weight-medium) 13px/1 var(--sans);
  letter-spacing: 0;
  text-transform: none;
}
.x-msg { margin-top: 6px; }
.x-vods li { grid-template-columns: 54px minmax(0, 1fr) auto; gap: 0 12px; }
.x-vods .x-date,
.x-vods .x-len { color: var(--text-secondary); }
.x-extension-launch { gap: 14px; padding: 12px; }
.x-extension-launch p { max-width: 38ch; line-height: 1.55; }
.x-played li { gap: 12px; padding: 9px 0; border-color: var(--x-line); }
.x-art { width: 46px; border: 0; border-radius: 10px; background: #2a3346; }
.x-played b { font-weight: 600; }
.x-main { color: var(--x-accent); }
.x-empty { padding: 16px; border: 1px dashed #46516a; border-radius: 14px; background: #1b2230; }
.foot { margin-top: 2px; padding-top: 18px; border-color: var(--stroke-primary); }

@media (max-width: 1100px) {
  .x-dash {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "status vote" "clip clip" "clips clips" "streams games";
  }
  .x-status, .x-vote { min-height: 350px; max-height: 480px; }
  .x-clip { min-height: 380px; }
  .x-clipsc, .x-streams, .x-games-card { min-height: 250px; max-height: 380px; }
}

@media (max-width: 700px) {
  .page { padding: 14px 14px 30px; gap: 14px; }
  .x-bar { min-height: 0; padding: 22px 18px; border-radius: 24px; gap: 13px; }
  .x-bar__shade { background: linear-gradient(90deg, rgb(15 21 36 / 91%), rgb(15 21 36 / 66%)); }
  .x-avatar { width: 58px; height: 58px; }
  .x-id { flex: 1 1 calc(100% - 78px); }
  .x-id p { font-size: 13px; }
  .x-bar__actions { width: 100%; margin: 2px 0 0; gap: 7px; }
  .x-bar__actions .btn { flex: 1 1 auto; justify-content: center; padding: 0 11px; }
  .x-sep { display: none; }
  .x-icon { width: 40px; height: 40px; }
  .x-dash {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "status" "clip" "clips" "vote" "streams" "games";
    gap: 12px;
  }
  .x-card { min-height: 0; padding: 18px; border-radius: 19px; }
  .x-card__head { margin-bottom: 13px; }
  .x-clip-range button { min-height: 32px; padding-inline: 9px; }
  .x-status, .x-vote { max-height: 540px; }
  .x-clip { min-height: 280px; }
  .x-player { min-height: 0; aspect-ratio: 16 / 9; flex: none; }
  .x-clipsc, .x-streams, .x-games-card { max-height: 340px; }
  .x-row { flex-wrap: wrap; }
  .x-input { flex: 1 1 120px; }
  .x-tabs { flex: none; }
  .x-vods li { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}