.channel-promo {
  width: min(1440px, calc(100% - 40px));
  margin: 0 auto 44px;
  padding: 22px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, #0b110d, #102019);
  display: grid;
  grid-template-columns: minmax(220px, .7fr) 1.3fr;
  gap: 24px;
  align-items: center;
}

.channel-promo > div {
  display: grid;
  gap: 7px;
}

.channel-promo > div small {
  font: 900 8px ui-monospace, monospace;
  letter-spacing: .17em;
  color: var(--mint);
}

.channel-promo > div strong {
  font-size: clamp(20px, 2.5vw, 34px);
  letter-spacing: -.04em;
}

.channel-promo nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.channel-promo a {
  min-height: 66px;
  padding: 12px;
  border: 1px solid #31523c;
  background: #08100b;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  transition: .18s ease;
}

.channel-promo a:hover {
  border-color: var(--green);
  background: var(--green);
  color: var(--black);
  transform: translateY(-2px);
}

.channel-promo a span {
  font: 950 10px ui-monospace, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.channel-promo a small {
  font-size: 10px;
  color: var(--muted);
}

.channel-promo a:hover small {
  color: #17351e;
}

.follow-nudge {
  margin-top: 28px;
  padding: 22px;
  border: 1px solid #31523c;
  background: linear-gradient(135deg, #0b110d, #102019);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.follow-nudge > div {
  display: grid;
  gap: 7px;
}

.follow-nudge small,
.camera-panel small,
.camera-panel b {
  font: 900 8px ui-monospace, monospace;
  letter-spacing: .14em;
  color: var(--mint);
}

.follow-nudge strong {
  font-size: clamp(22px, 3vw, 34px);
  letter-spacing: -.04em;
}

.follow-nudge p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.follow-nudge a {
  flex: 0 0 auto;
  padding: 15px 18px;
  border: 1px solid var(--green);
  background: #0b160f;
  color: var(--mint);
  text-decoration: none;
  font: 950 9px ui-monospace, monospace;
  letter-spacing: .1em;
}

.follow-nudge a:hover {
  background: var(--green);
  color: var(--black);
}

.camera-panel {
  margin-top: 28px;
  padding: clamp(22px, 4vw, 38px);
  border: 1px solid var(--line);
  background: #08100b;
}

.mobile-control {
  margin-top: 28px;
  padding: clamp(22px, 4vw, 38px);
  border: 1px solid var(--green);
  background: linear-gradient(145deg, #0b160f, #071009);
}

.mobile-control-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 22px;
  border-bottom: 1px solid #31523c;
}

.mobile-control-head small,
.mobile-control label,
.mobile-control-head span {
  font: 900 8px ui-monospace, monospace;
  letter-spacing: .12em;
  color: var(--mint);
}

.mobile-control-head h2 {
  margin: 6px 0 0;
  font-size: clamp(28px, 4vw, 46px);
  letter-spacing: -.05em;
}

.mobile-control-head span {
  padding: 9px 11px;
  border: 1px solid #31523c;
  color: var(--green);
}

#mobile-gallery-form {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

#mobile-event-form {
  display: grid;
  gap: 10px;
  margin-top: 22px;
  padding: 18px;
  border: 1px solid #31523c;
  background: #050807;
}

#mobile-event-form > div {
  display: grid;
  grid-template-columns: 1fr auto;
}

#mobile-event-title {
  min-width: 0;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid #31523c;
  border-right: 0;
  border-radius: 0;
  background: #0b110d;
  color: var(--white);
  font: inherit;
  font-size: 14px;
  font-weight: 750;
}

#mobile-event-form button {
  min-height: 52px;
  padding: 0 18px;
  border: 0;
  background: var(--white);
  color: var(--black);
  cursor: pointer;
  font: 950 9px ui-monospace, monospace;
  letter-spacing: .1em;
}

#mobile-event-active {
  margin: 0;
  color: var(--green);
  font: 850 9px/1.5 ui-monospace, monospace;
  letter-spacing: .06em;
}

#mobile-quick-gallery {
  width: 100%;
  min-height: 76px;
  margin-top: 22px;
  padding: 16px;
  border: 0;
  background: var(--green);
  color: var(--black);
  cursor: pointer;
  font: 950 clamp(14px, 3vw, 22px) ui-monospace, monospace;
  letter-spacing: .06em;
}

#mobile-quick-gallery:disabled {
  opacity: .5;
  cursor: wait;
}

#mobile-gallery-form > div {
  display: grid;
  grid-template-columns: 1fr auto;
}

#mobile-gallery-title {
  min-width: 0;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid #31523c;
  border-right: 0;
  border-radius: 0;
  background: #050807;
  color: var(--white);
  font: inherit;
  font-size: 14px;
  font-weight: 750;
}

#mobile-gallery-form button,
.mobile-upload-button {
  min-height: 52px;
  padding: 0 18px;
  border: 0;
  background: var(--green);
  color: var(--black) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 950 9px ui-monospace, monospace !important;
  letter-spacing: .1em !important;
}

.mobile-upload {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid #31523c;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

#cloud-auto-status {
  display: grid;
  gap: 6px;
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid #31523c;
  background: #071109;
}

#cloud-auto-status strong {
  color: var(--green);
  font: 950 10px ui-monospace, monospace;
  letter-spacing: .1em;
}

#cloud-auto-status span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

#cloud-auto-status.waiting strong {
  color: #ffe66d;
}

.emergency-upload {
  display: block;
  border-style: dashed;
  background: #070a08;
}

.emergency-upload summary {
  cursor: pointer;
  color: var(--muted);
  font: 850 9px ui-monospace, monospace;
  letter-spacing: .08em;
}

.emergency-upload[open] > div {
  margin: 18px 0 14px;
}

.mobile-upload strong {
  font-size: 17px;
}

.mobile-upload p {
  margin: 6px 0 0;
  max-width: 720px;
  color: var(--muted);
  line-height: 1.55;
  font-size: 12px;
}

#mobile-photo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

#mobile-upload-progress {
  margin-top: 14px;
  color: var(--mint);
  font: 800 9px ui-monospace, monospace;
  line-height: 1.5;
}

.camera-panel-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.camera-panel-head h2 {
  margin: 6px 0 0;
  font-size: clamp(28px, 4vw, 46px);
  letter-spacing: -.05em;
}

.camera-panel-head > span {
  padding: 9px 11px;
  border: 1px solid #31523c;
  color: var(--green);
  font: 900 8px ui-monospace, monospace;
  letter-spacing: .11em;
}

.camera-modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  margin-top: 22px;
}

.camera-modes article {
  padding: 20px;
  background: #0b110d;
}

.camera-modes h3 {
  margin: 12px 0 8px;
  font-size: 17px;
}

.camera-modes p,
.camera-note {
  color: var(--muted);
  line-height: 1.6;
  font-size: 12px;
}

.camera-note {
  margin: 20px 0 0;
}

@media (max-width: 900px) {
  .channel-promo {
    grid-template-columns: 1fr;
  }

  .channel-promo nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .camera-modes {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .channel-promo {
    width: min(100% - 28px, 1440px);
  }

  .follow-nudge,
  .camera-panel-head,
  .mobile-control-head,
  .mobile-upload {
    align-items: stretch;
    flex-direction: column;
  }

  .follow-nudge a {
    text-align: center;
  }

  #mobile-gallery-form > div {
    grid-template-columns: 1fr;
  }

  #mobile-event-form > div {
    grid-template-columns: 1fr;
  }

  #mobile-event-title {
    border-right: 1px solid #31523c;
    border-bottom: 0;
  }

  #mobile-gallery-title {
    border-right: 1px solid #31523c;
    border-bottom: 0;
  }
}