/* Deployment privacy and mobile overrides. Keep this file loaded after page-local styles. */
html, body { max-width: 100%; }
*, *::before, *::after { box-sizing: border-box; }
.player-bar { display: flex !important; justify-content: flex-end !important; padding: 10px 12px !important; }
.player-bar > div { display: none !important; }
.player-bar a { color: #fde68a !important; font-weight: 700 !important; text-decoration: none !important; }
.stat-grid { grid-template-columns: 1fr !important; }
.stat-grid .stat:nth-child(2) { display: none !important; }
.matrix-label { display: none !important; }

@media (max-width: 1180px) {
  .page { grid-template-columns: 1fr !important; }
  .topbar-inner { grid-template-columns: 1fr !important; text-align: center; }
  .brand { justify-content: center; }
  .head-right { display: none !important; }
  .sidebar { max-height: none !important; }
  .player-iframe { height: 420px !important; }
}

@media (max-width: 768px) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    background: #f5f7fa;
  }

  .header {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .logo { height: 34px !important; margin-right: 10px !important; padding: 3px !important; }
  .title { font-size: 15px !important; line-height: 1.2 !important; }

  .topbar, .topbar-inner {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  .topbar-inner {
    min-height: auto !important;
    padding: 12px 14px !important;
    gap: 8px !important;
  }
  .brand { gap: 10px !important; }
  .brand img { height: 42px !important; border-radius: 8px !important; padding: 4px 8px !important; }
  .brand-text { font-size: 12px !important; }
  .head-center .en { font-size: 18px !important; }
  .head-center .cn { font-size: 13px !important; margin-top: 4px !important; }

  .container, .page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
    overflow-x: hidden !important;
  }
  .container { padding: 10px 10px 14px !important; }
  .header { min-height: 64px !important; }
  .header-left { flex: 0 0 auto !important; }
  .header-center { min-width: 0 !important; }
  .header-right { display: none !important; }
  .grid { width: 100% !important; }
  .page { gap: 12px !important; }

  .panel, .content, .sidebar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }
  .sidebar h1 { font-size: 20px !important; }
  .crumbs { margin-bottom: 12px !important; font-size: 12px !important; text-align: left !important; }

  .grid, .portal-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
  .card, .portal-card {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 64px !important;
    padding: 12px 14px !important;
    font-size: 16px !important;
    border-radius: 14px !important;
  }
  .card span, .portal-card span { margin-top: 3px !important; font-size: 11px !important; }

  .toolbar {
    width: 100% !important;
    max-width: 100% !important;
    align-items: flex-start !important;
    flex-direction: column !important;
    padding: 12px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }
  .toolbar > div:first-child { width: 100% !important; overflow-wrap: anywhere !important; }
  .toolbar > div:last-child {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .toolbar .btn, .btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    border-radius: 10px !important;
    white-space: normal !important;
  }

  .map-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }
  .map-shell {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border-radius: 12px !important;
  }
  .map-shell img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .cam-scroll-container { max-height: 280px !important; }
  .cam-card {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    padding: 10px !important;
    border-radius: 12px !important;
  }
  .cam-index { width: 38px !important; height: 38px !important; border-radius: 10px !important; }
  .cam-arrow { display: none !important; }

  .player-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 12px !important;
    padding: 12px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }
  .player-stage { width: 100% !important; max-width: 100% !important; overflow: hidden !important; }
  .player-head { align-items: flex-start !important; flex-direction: column !important; }
  .player-iframe { width: 100% !important; max-width: 100% !important; height: 280px !important; }

  .head-center, .head-center .en, .head-center .cn, .crumbs, .cam-name, .cam-sub, .player-head, .player-head * {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }
  .grid-matrix-16 { grid-template-columns: 1fr !important; height: 520px !important; }
}