body.motex-dark-app { background: #061824; color: #eaf4fb; }
body.motex-dark-app .app-header { min-height: 68px; padding: 0 3.2vw; display: grid; grid-template-columns: 210px minmax(170px, 1fr) minmax(260px, 2fr) 290px; align-items: center; gap: 16px; background: #061724; border-bottom: 1px solid rgba(86, 153, 192, .28); }
body.motex-dark-app .production-brand { display: flex; flex-direction: column; gap: 0; color: #f4fbff; text-decoration: none; }
body.motex-dark-app .pc-wordmark { font-size: 1.65rem; font-weight: 900; letter-spacing: .04em; line-height: 1; }
body.motex-dark-app .pc-subtitle { margin-top: 5px; color: #6ca4c7; font-size: .57rem; letter-spacing: .08em; }
body.motex-dark-app .pc-tagline { color: #72b2e3; font-size: .85rem; letter-spacing: .06em; white-space: nowrap; }
body.motex-dark-app .channel-tabs { min-width: 0; display: flex; gap: 5px; overflow-x: visible; flex-wrap: wrap; }
body.motex-dark-app .channel-tabs a { padding: 7px 8px; border: 1px solid transparent; border-radius: 6px; color: #8eafc3; font-size: .7rem; text-decoration: none; white-space: nowrap; }
body.motex-dark-app .channel-tabs a:hover, body.motex-dark-app .channel-tabs a[aria-current] { border-color: #168fe0; background: #0b3550; color: #f1f9ff; }
body.motex-dark-app .pc-header-actions { display: flex; align-items: center; justify-content: end; gap: 14px; }
body.motex-dark-app .pc-statistics { padding: 8px 12px; border: 1px solid rgba(84, 154, 194, .32); border-radius: 8px; color: #7dbbe6; font-weight: 700; text-decoration: none; font-size: .75rem; }
body.motex-dark-app .pc-agent { display: grid; grid-template-columns: 10px auto; gap: 2px 6px; align-items: center; font-size: .74rem; }
body.motex-dark-app .pc-agent i { grid-row: 1 / span 2; width: 9px; height: 9px; border-radius: 50%; background: #00e65b; box-shadow: 0 0 10px #00e65b; }
body.motex-dark-app .pc-agent small { color: #6e9bb8; font-size: .58rem; }
body.motex-dark-app main { color: #eaf4fb; }
body.motex-dark-app .home, body.motex-dark-app .channel-page { max-width: 1500px; }
body.motex-dark-app .home, body.motex-dark-app .channel-page { width: min(94vw, 1600px); }
body.motex-dark-app .home-heading, body.motex-dark-app .channel-head { color: #eaf4fb; }
body.motex-dark-app .home-heading p, body.motex-dark-app .section-kicker { color: #69b5eb; }
body.motex-dark-app .home-heading span, body.motex-dark-app .channel-head p, body.motex-dark-app .section-title p { color: #86a9bd; }
body.motex-dark-app .channel-card, body.motex-dark-app .video-card, body.motex-dark-app .latest-card, body.motex-dark-app .news-panel, body.motex-dark-app .section-block, body.motex-dark-app .channel-level, body.motex-dark-app .explanation { background: #092234; border-color: rgba(77, 145, 187, .28); box-shadow: 0 14px 35px rgba(0, 0, 0, .18); color: #e7f4fb; }
body.motex-dark-app .channel-card:hover, body.motex-dark-app .channel-card:focus-visible { background: #0d2d42; border-color: #138fe5; }
body.motex-dark-app .channel-card strong, body.motex-dark-app .video-card h3, body.motex-dark-app .latest-card h2, body.motex-dark-app .news-item strong { color: #f1f8fc; }
body.motex-dark-app .home-metric, body.motex-dark-app .metric, body.motex-dark-app .channel-level div, body.motex-dark-app .signal-grid div { border-color: rgba(77, 145, 187, .22); }
body.motex-dark-app .home-metric span, body.motex-dark-app .metric-label, body.motex-dark-app .channel-level span, body.motex-dark-app .video-meta, body.motex-dark-app .news-heading span { color: #82a8bd; }
body.motex-dark-app .home-metric strong, body.motex-dark-app .metric strong, body.motex-dark-app .channel-level strong { color: #effaff; }
body.motex-dark-app .news-item, body.motex-dark-app .latest-content, body.motex-dark-app .video-body { color: #d5e8f2; }
body.motex-dark-app .open-video { color: #73c2f4; }
body.motex-dark-app .info-button { background: #103c56; border-color: #2b749a; color: #bce7ff; }
body.motex-dark-app .metric-compare.above, body.motex-dark-app .good { color: #63e79a; }
body.motex-dark-app .metric-compare.below, body.motex-dark-app .bad { color: #ff9a9a; }
body.motex-dark-app .app-header a:focus-visible, body.motex-dark-app button:focus-visible { outline: 2px solid #29aaff; outline-offset: 2px; }
@media (max-width: 1180px) { body.motex-dark-app .app-header { grid-template-columns: 190px 1fr 260px; } body.motex-dark-app .pc-tagline { display: none; } }
@media (max-width: 760px) { body.motex-dark-app .app-header { min-height: 62px; padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 8px; } body.motex-dark-app .pc-header-actions { margin-left: auto; } body.motex-dark-app .pc-agent { display: none; } body.motex-dark-app .channel-tabs { order: 3; flex-basis: 100%; } body.motex-dark-app .channel-tabs a { font-size: .68rem; } body.motex-dark-app .home, body.motex-dark-app .channel-page { padding-top: 22px; } body.motex-dark-app .channel-grid, body.motex-dark-app .top-grid { grid-template-columns: 1fr; } body.motex-dark-app .news-panel, body.motex-dark-app .section-block { padding: 15px; } }
body.motex-dark-app .order-page { width: min(94vw, 1600px); max-width: 1600px; }
body.motex-dark-app .order-layout { grid-template-columns: minmax(0, 3fr) minmax(360px, 1fr); gap: 22px; }
body.motex-dark-app .order-channel-grid { gap: 14px; }
body.motex-dark-app .order-channel { min-height: 190px; padding: 12px; }
body.motex-dark-app .order-channel-main img { height: 124px; }
body.motex-dark-app .order-sidebar { min-width: 0; }
body.motex-dark-app .period-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin: 12px 0 8px; }
body.motex-dark-app .period-option { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 10px; border: 1px solid #2c5870; border-radius: 8px; background: #123249; color: #d9effb; font-size: .76rem; font-weight: 800; cursor: pointer; }
body.motex-dark-app .period-option:has(input:checked) { border-color: #119dff; background: #0a477b; }
body.motex-dark-app .period-option input { accent-color: #149cff; }
body.motex-dark-app .period-display { margin: 0 0 10px; color: #7fc5ed; font-size: .82rem; font-weight: 700; }
body.motex-dark-app .order-fields input:disabled { opacity: .62; cursor: not-allowed; }
@media (max-width: 1180px) { body.motex-dark-app .order-layout { grid-template-columns: minmax(0, 1fr) 320px; } body.motex-dark-app .order-channel { min-height: 170px; } body.motex-dark-app .order-channel-main img { height: 108px; } }
@media (max-width: 900px) { body.motex-dark-app .order-layout { grid-template-columns: 1fr; } body.motex-dark-app .order-sidebar { order: -1; } }
@media (max-width: 680px) { body.motex-dark-app .period-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.motex-dark-app .order-channel { min-height: 145px; } body.motex-dark-app .order-channel-main img { height: 82px; } }

/* Large desktop production-control scale: preserve the existing layout and behavior. */
@media (min-width: 1200px) {
  body.motex-dark-app .order-page { width: min(96vw, 1680px); max-width: 1680px; padding-left: 0; padding-right: 0; }
  body.motex-dark-app .order-layout { grid-template-columns: minmax(0, 3.1fr) minmax(390px, 1fr); gap: 26px; }
  body.motex-dark-app .order-main { gap: 16px; }
  body.motex-dark-app .order-panel { padding: 22px; }
  body.motex-dark-app .section-title { margin-bottom: 15px; }
  body.motex-dark-app .section-kicker { font-size: 1rem; }
  body.motex-dark-app .section-title p, body.motex-dark-app .period-display { font-size: .92rem; }
  body.motex-dark-app .order-channel-grid { gap: 16px; }
  body.motex-dark-app .order-channel { min-height: 225px; padding: 14px; }
  body.motex-dark-app .order-channel.selected { padding: 13px; }
  body.motex-dark-app .order-channel-main { gap: 10px; font-size: 1rem; }
  body.motex-dark-app .order-channel-main img { height: 150px; }
  body.motex-dark-app .order-channel-options { margin-top: 11px; padding-top: 10px; gap: 9px; font-size: .86rem; }
  body.motex-dark-app .track-control input { height: 32px; width: 58px; font-size: .92rem; }
  body.motex-dark-app .period-options { gap: 12px; margin: 16px 0 11px; }
  body.motex-dark-app .period-option { min-height: 48px; padding: 10px 12px; font-size: .84rem; }
  body.motex-dark-app .mode-toggle { gap: 14px; margin-top: 18px; }
  body.motex-dark-app .mode-card { min-height: 72px; padding: 15px; font-size: 1rem; }
  body.motex-dark-app .mode-card span { font-size: .84rem; }
  body.motex-dark-app .summary-row { padding: 15px 0; font-size: .9rem; }
  body.motex-dark-app #orderSummary > p { font-size: .94rem; }
  body.motex-dark-app .planned-upload { padding: 13px 0; font-size: .9rem; }
  body.motex-dark-app .history-row { padding: 12px 0; font-size: .9rem; }
  body.motex-dark-app .start-order { min-height: 68px; font-size: 1.2rem; }
  body.motex-dark-app .order-modal { padding: 32px; }
  body.motex-dark-app .order-modal-card { width: min(960px, 78vw); height: min(720px, 82vh); max-height: 82vh; padding: 32px; display: flex; flex-direction: column; }
  body.motex-dark-app .order-modal-card h2 { font-size: 1.65rem; margin: 8px 0 12px; }
  body.motex-dark-app .order-modal-card > p { margin: 5px 0; font-size: .96rem; }
  body.motex-dark-app .order-modal-card textarea { flex: 1; min-height: 0; margin: 20px 0; font-size: .95rem; line-height: 1.62; }
  body.motex-dark-app .modal-actions { gap: 12px; }
  body.motex-dark-app .modal-actions button { min-height: 48px; padding: 13px 18px; font-size: .84rem; }
}
@media (max-width: 760px) {
  body.motex-dark-app .order-page { width: auto; }
  body.motex-dark-app .order-modal { padding: 10px; }
  body.motex-dark-app .order-modal-card { width: 100%; max-height: 92vh; padding: 20px; }
  body.motex-dark-app .order-modal-card textarea { min-height: 280px; font-size: .88rem; line-height: 1.5; }
  body.motex-dark-app .modal-actions { display: grid; grid-template-columns: 1fr; gap: 9px; }
  body.motex-dark-app .modal-actions button { width: 100%; min-height: 46px; }
}

/* Final header layout: keep all navigation in a non-scrolling second row. */
@media (min-width: 761px) {
  body.motex-dark-app .app-header {
    grid-template-columns: 230px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    row-gap: 8px;
    min-height: 88px;
  }
  body.motex-dark-app .channel-tabs {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    overflow-x: visible;
    overflow-y: visible;
    flex-wrap: wrap;
    white-space: normal;
    justify-content: flex-start;
    padding-left: 0;
    padding-right: 0;
  }
  body.motex-dark-app .channel-tabs a { white-space: nowrap; }
}
body.motex-dark-app .channel-tabs {
  overflow-x: visible;
  overflow-y: visible;
  flex-wrap: wrap;
  white-space: normal;
}
@media (max-width: 760px) {
  body.motex-dark-app .app-header { min-height: 0; row-gap: 8px; }
  body.motex-dark-app .channel-tabs {
    width: 100%;
    max-width: 100%;
    overflow-x: visible;
    overflow-y: visible;
    flex-wrap: wrap;
    white-space: normal;
    justify-content: flex-start;
  }
}

/* Keep the global header aligned with the same centered content grid as the dashboard. */
body.motex-dark-app .app-header {
  padding-left: max(2vw, calc((100vw - 1600px) / 2));
  padding-right: max(2vw, calc((100vw - 1600px) / 2));
  box-sizing: border-box;
}
body.motex-dark-app.production-mode .app-header,
body.production-mode.motex-dark-app .app-header {
  padding-left: max(2vw, calc((100vw - 1680px) / 2));
  padding-right: max(2vw, calc((100vw - 1680px) / 2));
}
body.motex-dark-app .channel-tabs {
  gap: 10px;
  padding-left: 12px;
  padding-right: 4px;
  align-items: center;
}
body.motex-dark-app .channel-tabs a {
  padding: 8px 10px;
  font-size: .76rem;
  letter-spacing: .01em;
}
body.motex-dark-app .channel-tabs a:hover,
body.motex-dark-app .channel-tabs a[aria-current],
body.motex-dark-app.production-mode .channel-tabs a[data-route="order"],
body.production-mode.motex-dark-app .channel-tabs a[data-route="order"] {
  border-color: rgba(22, 143, 224, .65);
  border-bottom-color: #39aef2;
  box-shadow: inset 0 -2px 0 #168fe0;
}
body.motex-dark-app .pc-header-actions {
  gap: 20px;
  padding-left: 12px;
}
body.motex-dark-app .pc-statistics { margin-right: 6px; }
body.motex-dark-app .pc-agent { margin-left: 6px; }
body.motex-dark-app .order-sidebar .order-panel { padding-left: 24px; padding-right: 24px; }
@media (max-width: 760px) {
  body.motex-dark-app .app-header,
  body.motex-dark-app.production-mode .app-header,
  body.production-mode.motex-dark-app .app-header {
    padding-left: 14px;
    padding-right: 14px;
  }
  body.motex-dark-app .channel-tabs { gap: 6px; padding-left: 0; padding-right: 0; }
  body.motex-dark-app .channel-tabs a { padding: 7px 8px; font-size: .7rem; }
  body.motex-dark-app .pc-header-actions { gap: 10px; padding-left: 0; }
  body.motex-dark-app .pc-statistics { margin-right: 0; }
  body.motex-dark-app .pc-agent { margin-left: 0; }
  body.motex-dark-app .order-sidebar .order-panel { padding-left: 16px; padding-right: 16px; }
  body.motex-dark-app .pc-header-actions { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
  body.motex-dark-app .pc-agent { display: grid; grid-template-columns: 8px minmax(0, 1fr); max-width: 150px; font-size: .64rem; }
  body.motex-dark-app .pc-agent small { font-size: .52rem; white-space: nowrap; }
}