@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Roboto");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Roboto Bold"), local("Roboto");
}

:root {
  --v2-dark: #2E2E2E;
  --v2-green-gray: #73866D;
  --v2-light-blue: #669fce;
  --v2-blue: #406ca3;
  --bg: #2E2E2E;
  --card: #f8faf8;
  --text: #202020;
  --muted: #5f6b5b;
  --line: #d7ded3;
  --black: #2E2E2E;
  --blue: #406ca3;
  --gray: #73866D;
  --red: #b84a4a;
  --green: #73866D;
  --orange: #a8793b;
  --hero-start: #2E2E2E;
  --hero-end: #406ca3;
  --hero-text: #ffffff;
  --hero-muted: #dfe9f3;
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}

html {
  background: var(--bg);
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: "Roboto", Arial, sans-serif !important;
  background:
    radial-gradient(circle at top left, rgba(102, 159, 206, 0.18), transparent 34rem),
    linear-gradient(180deg, #2E2E2E 0%, #252525 100%) !important;
  max-width: 100%;
  overflow-x: hidden;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

button,
.open-link,
.download-button,
input,
select,
textarea {
  max-width: 100%;
}

h1,
h2,
h3,
.screen-name,
.modal-title,
.theme-panel-title,
.content-section-title,
.dropzone-title {
  font-family: Impact, "Roboto Condensed", "Arial Narrow", sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

.container,
.wrap {
  color: var(--text);
}

.hero {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(135deg, var(--hero-start) 0%, var(--hero-end) 100%) !important;
}

.card,
.box,
.screen-card,
.modal-content,
.theme-panel {
  border: 1px solid var(--line);
  background: var(--card) !important;
}

button,
.open-link,
.download-button {
  font-family: "Roboto", Arial, sans-serif !important;
  background: var(--blue) !important;
  color: #ffffff !important;
  font-weight: 700;
  min-height: 44px;
  overflow-wrap: anywhere;
  text-align: center;
}

button.secondary,
.secondary,
.download-button {
  background: var(--gray) !important;
}

button.danger,
.danger,
.close-preview {
  background: var(--red) !important;
}

button.copy,
.copy,
.open-link.is-primary {
  background: var(--blue) !important;
}

button.preview,
.preview {
  background: var(--v2-dark) !important;
}

button.rename,
.rename {
  background: var(--v2-light-blue) !important;
}

button.rename-inline,
.rename-inline {
  width: auto !important;
  min-height: auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--blue) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  text-decoration: underline;
}

button.rename-inline:hover,
.rename-inline:hover {
  background: transparent !important;
  color: var(--v2-dark) !important;
  box-shadow: none !important;
  filter: none !important;
}

input,
select,
textarea,
.photo-input,
.duration-input {
  font-family: "Roboto", Arial, sans-serif !important;
  border-color: var(--line) !important;
  color: var(--text);
  min-width: 0;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--v2-light-blue) !important;
  box-shadow: 0 0 0 3px rgba(102, 159, 206, 0.24);
}

.message.ok,
.ok,
.toast.is-success {
  color: var(--green);
}

.message.error,
.error {
  color: var(--red);
}

.type-badge.is-photo {
  background: rgba(102, 159, 206, 0.16) !important;
  color: var(--blue) !important;
}

.type-badge.is-active {
  background: rgba(115, 134, 109, 0.18) !important;
  color: var(--gray) !important;
}

.content-board.is-active {
  border-color: rgba(115, 134, 109, 0.42) !important;
  background: rgba(115, 134, 109, 0.08) !important;
}

.content-board.is-available {
  background: rgba(102, 159, 206, 0.08) !important;
}

.progress-fill {
  background: linear-gradient(90deg, var(--blue), var(--v2-light-blue)) !important;
}

.toast {
  font-family: "Roboto", Arial, sans-serif !important;
  background: rgba(46, 46, 46, 0.97) !important;
}

.toast.is-success {
  background: rgba(115, 134, 109, 0.97) !important;
  color: #ffffff;
}

.toast.is-error {
  background: rgba(184, 74, 74, 0.97) !important;
  color: #ffffff;
}

@media (max-width: 640px) {
  body {
    background:
      linear-gradient(180deg, #2E2E2E 0%, #252525 100%) !important;
  }

  h1 {
    line-height: 1.05;
  }
}