.bg-alt {
  background-color: rgb(42, 42, 42)
}

.cursor-pointer {
  cursor: pointer;
}

.transition-all {
  transition: all 0.2s ease;
}

.standings-field .v-field__input {
  text-align: center;
}

.common-dialog {
  max-width: 600px;
}

/* Dialogs: every one of them is a card with a head and a foot, and the two rules make that read at a
   glance — the title does not spill into the content, and the actions do not float under it. Only
   borders and padding, so a dialog that lays itself out differently is not disturbed. */
.v-dialog .v-card > .v-card-title {
  border-bottom: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
  padding-bottom: 12px;
}

.v-dialog .v-card > .v-card-actions {
  border-top: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
  padding: 12px 16px;
}

/* Hero call to action (play / join): the biggest button on the play page, so the way in is never in
   doubt. It is a flex item of the action column, so it also grows to the column width. */
.btn-mega {
  min-height: 56px;
  font-size: 1.05rem;
  letter-spacing: .02em;
}

/* Podium colours: gold, silver, bronze, plus the plain grey of the awards that are not a placing.

   The only place where they are defined, so the first place of a race is the same gold as the first
   place of the standings or of a trophy cabinet. The classes set the colour only — no size, no icon
   — so they can be dropped on an icon, a number or a name.

   The `.v-icon` in the selector only makes the colour win over the `color: inherit` that Vuetify
   gives every icon, whose stylesheet is loaded after this file. */
.podium-1,
.podium-1.v-icon {
  color: #ffb300;
}

.podium-2,
.podium-2.v-icon {
  color: #b0bec5;
}

.podium-3,
.podium-3.v-icon {
  color: #cd7f32;
}

/* Every award outside the podium (top ten, participation, ...): a neutral grey, never a metal.
   Kept darker than the bluish silver (§podium-2), which otherwise reads almost the same. */
.award-plain,
.award-plain.v-icon {
  color: #909090;
}
.loading-container[data-v-44bac502] {
  min-height: 400px;
}

/* The name keeps the colour of the context (table, card) and only shows itself as a link on
   hover, so a classification stays readable instead of turning into a wall of blue. */
.user-name[data-v-1f7a1ef2] {
  color: inherit;
  text-decoration: none;
}
.user-name--link[data-v-1f7a1ef2]:hover {
  color: rgb(var(--v-theme-primary));
  text-decoration: underline;
}

.table-scroll[data-v-b6ab9ad7] {
  overflow-x: auto;
}

/* The first three places are tinted, the logged-in player more: the two add up on their own row. */
.top-entry td[data-v-b6ab9ad7] {
  background-color: rgba(var(--v-theme-primary), 0.05);
}
.me-row td[data-v-b6ab9ad7] {
  background-color: rgba(var(--v-theme-primary), 0.06);
}

.table-scroll[data-v-c6c70da8] {
  overflow-x: auto;
}

/* The first three places are tinted, the logged-in player more: the two add up on their own row. */
.top-entry td[data-v-c6c70da8] {
  background-color: rgba(var(--v-theme-primary), 0.05);
}
.me-row td[data-v-c6c70da8] {
  background-color: rgba(var(--v-theme-primary), 0.06);
}

.me-row td[data-v-6030940a] {
  background-color: rgba(var(--v-theme-primary), 0.06);
}

.me-row td[data-v-d2c5e0a6] {
  background-color: rgba(var(--v-theme-primary), 0.06);
}

.standings-header[data-v-0e4221e5] {
  background: linear-gradient(135deg, rgba(var(--v-theme-primary), 0.12), rgba(var(--v-theme-secondary), 0.12));
}

.track-card[data-v-23aae760] {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  overflow: hidden;
}
.track-card[data-v-23aae760]:hover {
  transform: translateY(-4px);
}
.track-card-accent[data-v-23aae760] {
  height: 4px;
  background: linear-gradient(90deg, rgb(var(--v-theme-primary)), rgb(var(--v-theme-secondary)));
}
.text-mono[data-v-23aae760] {
  font-family: monospace;
  font-size: 0.85rem;
}
.rank-number[data-v-23aae760] {
  width: 18px;
  flex: none;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.text-mono[data-v-5b700d8a] {
  font-family: monospace;
  font-size: 1rem;
}
.top-entry td[data-v-5b700d8a] {
  background-color: rgba(var(--v-theme-primary), 0.04);
}

.fill-height[data-v-71b9d57b] {
  min-height: calc(100vh - 64px);
}

.news-icon-box[data-v-a1eb3754] {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  /* currentColor is the tint of the category/event, set by the text-<colour> class. */
  background: color-mix(in srgb, currentColor 16%, transparent);
}

/* In the colour of the context and underlined only on hover, like a player or track name elsewhere:
   a list of news stays readable instead of becoming a wall of blue. */
.news-link[data-v-d01944b1] {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.news-link[data-v-d01944b1]:hover {
  color: rgb(var(--v-theme-primary));
  border-bottom-color: transparent;
}

/* Same footprint as the alert beside it (a one-line alert), and a gap so a list of them does not
   look like a single bar. */
.news-list[data-v-0fe3c1d5] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.news-item[data-v-0fe3c1d5] {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 52px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(var(--v-border-color), .06);
  transition: background-color .15s ease, border-color .15s ease;
}

/* Only a news that opens asks to be clicked. */
.news-item--openable[data-v-0fe3c1d5] {
  cursor: pointer;
}
.news-item--openable[data-v-0fe3c1d5]:hover {
  border-color: rgba(var(--v-theme-primary), .5);
}

/* Unread is a bar on the left plus a tint, not a heavier type: the text keeps the same size and
   weight as everything else. The amber is the one of the notice up top — the site's "look here". */
.news-item--unread[data-v-0fe3c1d5] {
  background: rgba(var(--v-theme-info), .14);
  box-shadow: inset 3px 0 0 #ffc107;
}
.news-item__main[data-v-0fe3c1d5] {
  flex: 1 1 auto;
  min-width: 0;
}
.news-item__row[data-v-0fe3c1d5] {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.news-item__title[data-v-0fe3c1d5] {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .925rem;
  line-height: 1.35;
}
.news-item__date[data-v-0fe3c1d5] {
  flex: 0 0 auto;
  margin-top: 1px;
  font-size: .72rem;
  white-space: nowrap;
  color: rgba(var(--v-theme-on-surface), .6);
}
.news-item__more[data-v-0fe3c1d5] {
  padding: 0;
  margin-top: 2px;
  font-size: .78rem;
  color: rgb(var(--v-theme-primary));
  background: none;
  border: 0;
  cursor: pointer;
}
.news-item__more[data-v-0fe3c1d5]:hover {
  text-decoration: underline;
}
.news-item__icon[data-v-0fe3c1d5] {
  margin-top: 1px;
}

/* The sketch of a box: it holds the shape (and the count) of the list that is arriving. */
.news-ghost[data-v-0fe3c1d5] {
  padding: 0;
  border-radius: 8px;
}

.news-head[data-v-c2790875] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
}
.news-head__text[data-v-c2790875] {
  min-width: 0;
}
.news-head__kind[data-v-c2790875] {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(var(--v-theme-on-surface), .6);
}
.news-head__title[data-v-c2790875] {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
}
.news-head__date[data-v-c2790875] {
  font-size: .82rem;
  color: rgba(var(--v-theme-on-surface), .6);
}
.news-body[data-v-c2790875] {
  font-size: 1rem;
  line-height: 1.6;
  white-space: pre-line;
}

.alpha-banner[data-v-b18b91e0] {
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  border-left: 4px solid currentColor;
  border-radius: 8px;
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.alpha-banner__label[data-v-b18b91e0] {
  font-size: .95rem;
  letter-spacing: .2em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* The way in, as a panel: the headline, the state of the room and the button down the middle, the
   shortcuts on a footer strip of their own. The glow gives the panel depth without a picture. */
.hero-card[data-v-b18b91e0] {
  overflow: hidden;
  background-image: radial-gradient(120% 150% at 50% -30%, rgba(var(--v-theme-primary), .20), rgba(var(--v-theme-primary), 0) 60%);
}
.hero[data-v-b18b91e0] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 24px;
  text-align: center;
}
.hero__lead[data-v-b18b91e0] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.hero__title[data-v-b18b91e0] {
  margin: 0;
  font-weight: 700;
  letter-spacing: -.01em;
}
.hero__players[data-v-b18b91e0] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .78);
}

/* The state of the room at a glance: the light is on when there is somebody in it. */
.hero__dot[data-v-b18b91e0] {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .28);
}
.hero__dot--live[data-v-b18b91e0] {
  background: rgb(var(--v-theme-success));
  box-shadow: 0 0 0 4px rgba(var(--v-theme-success), .18);
}
.hero__actions[data-v-b18b91e0] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 320px;
  margin-top: 6px;
}
.hero__actions > .btn-mega[data-v-b18b91e0] {
  min-height: 64px;
}

/* The shortcuts: a footer of the panel, one step below the way in. */
.hero__links[data-v-b18b91e0] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 18px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: rgba(0, 0, 0, .16);
}

/* Two sections, two troughs: a column that is plainly a box of its own needs no gutter trick to be
   told apart, and the heading that opens it sits on the box it belongs to. Darker than the page —
   the event cards and the news rows inside are lighter — so the contents keep standing out, and the
   radius is wider than theirs so the two roundings read as concentric. */
.panel[data-v-b18b91e0] {
  border: 1px solid rgba(var(--v-theme-on-surface), .09);
  border-radius: 12px;
  background: rgba(0, 0, 0, .22);
}

/* The heading and the icons beside it are the toolbar of the box, and the rule under them says so.
   The head is as tall as its title (a .text-h6 line box) and no more: the icon buttons in it are
   comfortable for that reason — at their default density they are 40px and would push this head
   8px taller than the one of the panel next to it, with no icon at all. */
.panel__head[data-v-b18b91e0] {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(var(--v-theme-on-surface), .09);
}
.panel__body[data-v-b18b91e0] {
  padding: 16px;
}

/* Slightly lighter than the card surface it sits on, so each rule reads as its own row. */
.instruction-row[data-v-b18b91e0] {
  background: rgba(var(--v-theme-on-surface), 0.06);
  border-radius: 8px;
  padding: 12px 16px;
}

.v-card[data-v-c68a020e] {
  transition: transform 0.2s ease-in-out;
}
.v-card[data-v-c68a020e]:hover {
  transform: translateY(-1px);
}

/* The logged-in player stands out without breaking the row rhythm of the table. */
.me-row td[data-v-e6f66da7] {
  background-color: rgba(var(--v-theme-primary), 0.06);
}

/* The pinned row is not the 21st of the page: the line makes it read as a footnote. */
.pinned td[data-v-e6f66da7] {
  border-top: 2px solid rgba(var(--v-theme-primary), 0.35);
}

.flag[data-v-a58fa2a1] {
    display: inline-block;
    width: 20px;
    height: 15px;
    vertical-align: middle;
    background-size: cover;
    background-position: center;
    border-radius: 2px;
}

/* As for the player name: the track keeps the colour of the context and only shows itself as a link
   on hover, so a list of tracks stays readable instead of becoming a wall of blue. */
.track-name[data-v-acb09563] {
  color: inherit;
  text-decoration: none;
}
.track-name--link[data-v-acb09563]:hover {
  color: rgb(var(--v-theme-primary));
  text-decoration: underline;
}
.track-name__flag[data-v-acb09563] {
  margin-right: 6px;
}

/* One race per column, two of them from the md breakpoint (960px) on: the feed reads as a grid
   instead of a single tall list. */
.races-grid[data-v-0b396b47] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 960px) {
.races-grid[data-v-0b396b47] {
    grid-template-columns: 1fr 1fr;
}
}

/* The logged-in player stands out without breaking the row rhythm of the table. */
.me-row td[data-v-0b396b47] {
  background-color: rgba(var(--v-theme-primary), 0.06);
}

/* Times are compared column by column: a fixed-width font (as in the leaderboard) keeps them
   aligned. */
.text-mono[data-v-0b396b47] {
  font-family: monospace;
  font-size: 0.85rem;
}

/* `v-ripple` is placed inside the element: it needs one that is positioned. */
.header-link[data-v-0afdd8ea] {
  position: relative;
}
.header-link[data-v-0afdd8ea]:hover {
  background-color: rgba(var(--v-theme-on-surface), 0.06);
}

/* The logged-in player stands out without breaking the row rhythm of the table. */
.me-row td[data-v-0afdd8ea] {
  background-color: rgba(var(--v-theme-primary), 0.06);
}

.track-editor[data-v-c981aa6e] {
  --he-panel-bg: #161b22;
  display: flex;
  /* Full viewport: on this route the site's own bar and footer are hidden (see App.vue), and the
     40px of padding leaves room for the editor's fixed menu bar above. */
  height: 100dvh;
  padding-top: 40px;
  box-sizing: border-box;
  min-height: 600px;
  overflow: hidden;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 13px;
  user-select: none;
  background: #0d1117;
  color: #c9d1d9;
}

/* The editor's own menu bar, pinned to the top of the viewport. */
.editor-menubar[data-v-c981aa6e] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 40px;
  padding: 0 8px;
  background: #161b22;
  border-bottom: 1px solid #30363d;
  box-sizing: border-box;
}
.menubar-btn[data-v-c981aa6e] {
  height: 30px;
  padding: 0 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #c9d1d9;
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.menubar-btn[data-v-c981aa6e]:hover { background: #2d333b;
}

/* Keyboard shortcut shown on the right of a menu entry. */
.menubar-shortcut[data-v-c981aa6e] {
  font-size: 11px;
  color: #6e7681;
  font-variant-numeric: tabular-nums;
}

/* Info ▸ Controls cheatsheet. */
.controls-grid[data-v-c981aa6e] {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 18px;
  font-size: 13px;
}
.controls-grid span[data-v-c981aa6e]:nth-child(odd) { color: #8b949e; white-space: nowrap;
}
.editor-sidebar[data-v-c981aa6e] {
  width: 220px;
  flex-shrink: 0;
  background: var(--he-panel-bg);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}
#sidebar[data-v-c981aa6e] { border-right: 1px solid #30363d;
}
#properties-sidebar[data-v-c981aa6e] {
  width: 280px;
  border-left: 1px solid #30363d;
}
.scene-tree[data-v-c981aa6e] {
  background: #000;
  padding: 7px;
  border-bottom: 1px solid #30363d;
  max-height: 40dvh;
  flex-shrink: 0;
  overflow-y: auto;
}
.tree-row[data-v-c981aa6e] {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 7px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--tree-color);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.tree-row[data-v-c981aa6e]:hover { background: #161b22;
}
.tree-row[data-v-c981aa6e]:focus-visible { outline: 1px solid var(--tree-color); outline-offset: -1px;
}
.tree-category[data-v-c981aa6e] { font-weight: 600;
}
.tree-arrow[data-v-c981aa6e] { width: 12px; flex-shrink: 0;
}
.tree-count[data-v-c981aa6e] { margin-left: auto; font-size: 11px; opacity: 0.7;
}
.tree-children[data-v-c981aa6e] { list-style: none; margin: 0; padding: 0 0 0 18px;
}
.tree-item[data-v-c981aa6e] { font-size: 12px;
}
.tree-item.selected[data-v-c981aa6e] { background: #161b22; border-color: var(--tree-color);
}
.panel[data-v-c981aa6e] {
  padding: 7px;
  border-bottom: 1px solid #21262d;
  flex-shrink: 0;
}
.panel-title[data-v-c981aa6e] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #6e7681;
  margin-bottom: 10px;
  background: #000;
  padding: 7px;
}
.panel-title.collapsible[data-v-c981aa6e] { cursor: pointer;
}
.collapse-arrow[data-v-c981aa6e] {
  transition: transform 0.15s;
}
.collapse-arrow.collapsed[data-v-c981aa6e] { transform: rotate(-90deg);
}
.btn[data-v-c981aa6e] {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 7px 10px;
  margin-bottom: 5px;
  background: #21262d;
  border: 1px solid #30363d;
  color: #c9d1d9;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  text-align: left;
  font-family: inherit;
  transition: background 0.1s;
  line-height: 1;
}
.editor-actions[data-v-c981aa6e] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.btn.editor-action[data-v-c981aa6e] {
  justify-content: center;
  min-height: 36px;
  padding: 7px;
  margin-bottom: 0;
}
.editor-action[data-v-c981aa6e]:focus-visible { outline: 2px solid #388bfd; outline-offset: 2px;
}
.btn[data-v-c981aa6e]:last-child { margin-bottom: 0;
}
.btn[data-v-c981aa6e]:hover { background: #2d333b; border-color: #6e7681;
}
.btn.active[data-v-c981aa6e] { background: #1c2d5a; border-color: #388bfd; color: #a5c8ff;
}
.btn-danger[data-v-c981aa6e] { color: #f85149; border-color: #4a1515; background: #200d0d;
}
.btn-danger[data-v-c981aa6e]:hover { background: #c0392b; border-color: #f85149; color: #fff;
}
.btn[data-v-c981aa6e]:disabled { opacity: 0.4; cursor: not-allowed;
}
.btn[data-v-c981aa6e]:disabled:hover { background: #21262d; border-color: #30363d;
}
.form-row[data-v-c981aa6e] { margin-bottom: 8px;
}
.form-row[data-v-c981aa6e]:last-child { margin-bottom: 0;
}
label[data-v-c981aa6e] {
  display: block;
  font-size: 11px;
  color: #8b949e;
  margin-bottom: 3px;
}
input[type="number"][data-v-c981aa6e],
input[type="text"][data-v-c981aa6e] {
  width: 100%;
  padding: 5px 8px;
  background: #0d1117;
  border: 1px solid #30363d;
  color: #c9d1d9;
  border-radius: 4px;
  font-size: 12px;
  font-family: inherit;
  transition: border-color 0.1s;
}
input[type="number"][data-v-c981aa6e]:focus,
input[type="text"][data-v-c981aa6e]:focus {
  outline: none;
  border-color: #388bfd;
}
select[data-v-c981aa6e] {
  width: 100%;
  padding: 5px 8px;
  background: #0d1117;
  border: 1px solid #30363d;
  color: #c9d1d9;
  border-radius: 4px;
  font-size: 12px;
  font-family: inherit;
  transition: border-color 0.1s;
  cursor: pointer;
}
select[data-v-c981aa6e]:focus {
  outline: none;
  border-color: #388bfd;
}
.prop-name[data-v-c981aa6e] {
  font-size: 12px;
  font-weight: 600;
  color: #e6edf3;
  margin-bottom: 10px;
}
.divider[data-v-c981aa6e] { height: 1px; background: #21262d; margin: 8px 0;
}
.hint[data-v-c981aa6e] {
  font-size: 11px;
  color: #6e7681;
  line-height: 1.9;
}
.palette-tabs[data-v-c981aa6e] { display: flex; gap: 6px;
}
.palette-tabs .btn[data-v-c981aa6e] { justify-content: center; margin-bottom: 0;
}
.sprite-palette p[data-v-c981aa6e] { margin: 6px 0;
}
.palette-grid[data-v-c981aa6e] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}
.palette-sprite[data-v-c981aa6e] {
  padding: 6px;
  border: 1px solid #30363d;
  border-radius: 5px;
  background: #0d1117;
  cursor: grab;
  text-align: center;
  font-size: 11px;
  color: #c9d1d9;
}
.palette-sprite[data-v-c981aa6e]:hover { border-color: #388bfd; background: #1c2d5a;
}
.palette-sprite[data-v-c981aa6e]:active { cursor: grabbing;
}
.palette-sprite img[data-v-c981aa6e] { display: block; width: 100%; height: 68px; object-fit: contain; margin-bottom: 4px;
}
.palette-sprite span[data-v-c981aa6e] { display: block; overflow-wrap: anywhere;
}
#canvas-wrapper.sprite-drop-active[data-v-c981aa6e] { outline: 2px solid #388bfd; outline-offset: -2px;
}

/* The picture of the variant picked above. */
.variant-preview[data-v-c981aa6e] {
  display: block;
  width: 100%;
  max-height: 150px;
  object-fit: contain;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 4px;
  margin-top: 6px;
}
#canvas-wrapper[data-v-c981aa6e] {
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
  background: #0d1117;
}
#canvas[data-v-c981aa6e] {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.hud[data-v-c981aa6e] {
  position: absolute;
  bottom: 10px;
  padding: 3px 9px;
  background: rgba(22, 27, 34, 0.9);
  border: 1px solid #30363d;
  border-radius: 4px;
  font-size: 11px;
  color: #8b949e;
  pointer-events: none;
  line-height: 1.5;
}
#hud-status[data-v-c981aa6e] { left: 10px; max-width: 500px;
}
#hud-coords[data-v-c981aa6e] { right: 10px; font-variant-numeric: tabular-nums;
}
.export-overlay[data-v-c981aa6e] {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 17, 23, 0.55);
  cursor: progress;
}
.export-box[data-v-c981aa6e] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 26px;
  background: var(--he-panel-bg);
  border: 1px solid #30363d;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.export-spinner[data-v-c981aa6e] {
  width: 22px;
  height: 22px;
  border: 2px solid #30363d;
  border-top-color: #388bfd;
  border-radius: 50%;
  animation: export-spin-c981aa6e 0.8s linear infinite;
}
@keyframes export-spin-c981aa6e {
to { transform: rotate(360deg);
}
}
.export-hint[data-v-c981aa6e] { font-size: 11px; color: #8b949e;
}

.loading-overlay[data-v-d30c29e2] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.loading-content[data-v-d30c29e2] {
  text-align: center;
  color: #e0e0e0;
  padding: 2rem;
}
.loading-logo[data-v-d30c29e2] {
  animation: bounce-d30c29e2 2s infinite;
}
@keyframes bounce-d30c29e2 {
0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
}
40% {
    transform: translateY(-10px);
}
60% {
    transform: translateY(-5px);
}
}

/* Fade transition for smoother experience */
.v-fade-transition-enter-active[data-v-d30c29e2],
.v-fade-transition-leave-active[data-v-d30c29e2] {
  transition: opacity 0.5s ease-in-out;
}
.v-fade-transition-enter-from[data-v-d30c29e2],
.v-fade-transition-leave-to[data-v-d30c29e2] {
  opacity: 0;
}

.app-footer[data-v-4b0cd42e] {
  border-top: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
}
.footer-link[data-v-4b0cd42e] {
  transition: color 0.2s ease-in-out;
}
.footer-link[data-v-4b0cd42e]:hover {
  color: rgb(var(--v-theme-primary)) !important;
}

/* Responsive adjustments */
@media (max-width: 600px) {
.app-footer .pa-4[data-v-4b0cd42e] {
    padding: 16px 12px !important;
}
}

/* The breaks written in the lang files (\n) show up as breaks: the notice is a few short paragraphs,
   not a block of text. */
.notice-body[data-v-51cf9c8e] {
  white-space: pre-line;
}

/* dvh, not vh: on a phone 100vh is the height of the viewport with the address bar hidden, so the
   page would always be a little taller than what you see and scrollable even with nothing to scroll
   (which is what made the scroll feel wrong on mobile). */
.app-content[data-v-53f81583] {
  min-height: 100dvh;
}

/* Fade transition for main app content */
.v-fade-transition-enter-active[data-v-53f81583],
.v-fade-transition-leave-active[data-v-53f81583] {
  transition: opacity 0.5s ease-in-out;
}
.v-fade-transition-enter-from[data-v-53f81583],
.v-fade-transition-leave-to[data-v-53f81583] {
  opacity: 0;
}