/* ============================================================
   ValueIndex — Responsive Layout
   Breakpoints:
     Large desktop : 1440px+
     Desktop       : 1025px – 1439px
     Tablet        : 768px  – 1024px
     Mobile        : up to  767px
   ============================================================ */

/* ---------- CSS custom property overrides per breakpoint ---------- */

/* Large desktop (1440px+): default values already set per-page */

/* Desktop / laptop (1025–1439px) */
@media (max-width: 1439px) {
  html {
    --side-margin: 40px;
    --side-padding: 80px;
    --section-margin: 100px;
  }
}

/* Tablet (768–1024px) */
@media (max-width: 1024px) {
  html {
    --side-margin: 24px;
    --side-padding: 32px;
    --section-margin: 70px;
  }

  /* Public header nav: shrink gaps */
  #header #header_row {
    margin: 16px var(--side-margin) 0 var(--side-margin);
  }
  nav ul li {
    margin-right: 18px;
  }

  /* App-header back/logo/user row */
  #header #header_row > div:nth-child(1),
  #header #header_row > div:nth-child(3) {
    flex: 0 0 auto;
  }

  /* Dashboard & stock-list: main padding */
  #main {
    padding-left: var(--side-padding) !important;
    padding-right: var(--side-padding) !important;
  }

  /* Search box wider on tablet */
  #search-box input { width: 70%; }
  #search-box svg   { left: calc(85% - 44px); }

  /* Stock cards: 3 columns on tablet */
  #stocks {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Stock-info: stack chart + fundamentals */
  #chart-and-fundamentals {
    flex-direction: column;
  }
  #chart { flex: none; }
  #fundamentals { flex: none; }

  /* AI score + analyst ratings: stack */
  #ai-score-and-analyst-ratings {
    flex-direction: column;
  }

  /* Insiders table: allow horizontal scroll */
  #insiders .table {
    overflow-x: auto;
    min-width: 600px;
  }
  #insiders { overflow-x: auto; }

  /* Latest rating + short interest: stack */
  #latest-rating-and-short-interest {
    flex-direction: column;
  }

  /* Pricing plans */
  #plans {
    flex-direction: column;
    margin: 100px var(--side-margin) 40px var(--side-margin);
  }

  /* Key features: simpler layout */
  #key-features {
    margin: var(--section-margin) var(--side-margin);
  }

  /* About / emerging stocks two-col sections */
  #about-us > div:nth-child(2),
  #emerging-value-stocks > div:nth-child(2),
  #ai-insights > div:nth-child(2) {
    flex-direction: column;
    gap: 24px;
  }
  #about-us > div:nth-child(2) > div,
  #emerging-value-stocks > div:nth-child(2) > div,
  #ai-insights > div:nth-child(2) > div {
    flex-basis: 100%;
  }

  /* Profile / notifications / preferences form */
  #form form { width: 70%; }

  /* Footer grid */
  #footer > div:nth-child(2) {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
  }
  #footer > div:nth-child(2) > div:nth-child(1) {
    grid-column: 1 / -1;
  }

  /* Headings scale */
  .cap1, .cap2 { font-size: 40px; }
  #title h1 { font-size: 38px; }
}

/* Mobile (up to 767px) */
@media (max-width: 767px) {
  html {
    --side-margin: 16px;
    --side-padding: 16px;
    --section-margin: 48px;
  }

  /* ---- Public header (index, pricing, profile pages) ---- */
  #header #header_row {
    margin: 12px var(--side-margin) 0 var(--side-margin);
    border-radius: 16px;
    padding: 8px 12px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  /* Hide main nav links on mobile; keep logo + account button */
  #header #header_row > div:nth-child(2) { display: none; }
  #header #header_row > div:nth-child(1) { margin-left: 0; }
  nav ul { padding: 0; }
  nav ul li { margin-right: 12px; }
  .create-account-button { padding: 8px 12px; font-size: 14px; }

  /* ---- App inner header (dashboard, stock pages) ---- */
  #header #header_row > div:nth-child(1),
  #header #header_row > div:nth-child(3) {
    flex: 0 0 auto;
  }
  #header #header_row span#back {
    width: 44px;
    height: 44px;
  }

  /* ---- Main content padding ---- */
  #main {
    padding-left: var(--side-padding) !important;
    padding-right: var(--side-padding) !important;
  }

  /* ---- Hero headings ---- */
  .cap1, .cap2 { font-size: 30px; letter-spacing: -1px; }
  #title h1 { font-size: 28px; letter-spacing: -1px; }
  #title h2 { font-size: 15px; }

  /* ---- Search box ---- */
  #search-box input {
    width: 100%;
    height: 56px;
    font-size: 14px;
    padding: 12px 16px 12px 20px;
  }
  #search-box input::placeholder { font-size: 14px; }
  #search-box svg { left: calc(100% - 44px); }

  /* ---- Controls row: stack filters + sort ---- */
  #controls #controls_row {
    flex-wrap: wrap;
    gap: 8px;
  }
  #controls #controls_row > div:nth-child(3) {
    flex: 1 1 100%;
    text-align: left;
  }
  #filters-controls .row {
    flex-direction: column;
    margin: 24px 16px;
    gap: 16px;
  }

  /* ---- Stock cards: 2 columns on mobile ---- */
  #stocks {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ---- Stock info page ---- */
  #stock-name { flex-direction: column; gap: 8px; }
  #stock-name > div:last-child { text-align: left; }
  #stock-name > div:first-child > div:nth-child(1) { font-size: 28px; }

  #stock-price-and-watchlist { flex-direction: column; gap: 8px; align-items: flex-start; }
  #stock-price > div:first-child { font-size: 30px; }

  #chart-and-fundamentals { flex-direction: column; }
  #chart > div:first-child { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  #chart #gchart { height: 280px; }

  #ai-score-and-analyst-ratings { flex-direction: column; }
  #ai-score .row { flex-direction: column; }

  #latest-rating-and-short-interest { flex-direction: column; }

  #insiders .table {
    overflow-x: auto;
    min-width: 520px;
  }
  #insiders { overflow-x: auto; padding: 10px; }

  /* ---- Dashboard title ---- */
  #title { margin-top: 32px; }

  /* ---- Homepage sections ---- */
  #about-us,
  #ai-powered-scoring-system,
  #emerging-value-stocks,
  #faq {
    margin-left: var(--side-margin);
    margin-right: var(--side-margin);
  }
  #about-us > div:nth-child(2),
  #emerging-value-stocks > div:nth-child(2),
  #ai-insights > div:nth-child(2) {
    flex-direction: column;
    gap: 20px;
  }
  #about-us > div:nth-child(2) > div,
  #emerging-value-stocks > div:nth-child(2) > div,
  #ai-insights > div:nth-child(2) > div {
    flex-basis: 100%;
  }
  #ai-powered-scoring-system > div:nth-child(3) {
    flex-direction: column;
    gap: 16px;
  }
  #ai-insights {
    padding-top: 200px;
    padding-left: var(--side-margin);
    padding-right: var(--side-margin);
  }

  /* ---- See what others overlook CTA ---- */
  #see-what-others-overlook > div:nth-child(3) {
    flex-direction: column;
    align-items: stretch;
    padding: 0 var(--side-margin);
  }
  #see-what-others-overlook input { width: 100%; }

  /* ---- Pricing ---- */
  #plans {
    flex-direction: column;
    margin: 60px var(--side-margin) 32px var(--side-margin);
  }
  #key-features {
    grid-template-columns: 2fr 1fr 1fr;
    margin: var(--section-margin) var(--side-margin);
    font-size: 13px;
  }
  #key-features > div:nth-child(-n+3) { font-size: 16px; }
  #get-started > div:first-child { width: 90%; font-size: 30px; }
  #get-started > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }
  #get-started > div:last-child > a:last-child { margin-left: 0; }

  /* ---- Profile / notifications / preferences sections tab bar ---- */
  #sections .row {
    grid-template-columns: repeat(6, 1fr);
    width: 100%;
    overflow-x: auto;
  }
  #sections .row > div { white-space: nowrap; padding: 0 4px 12px; }

  /* ---- Profile form ---- */
  #form form {
    width: 100%;
    grid-template-columns: 1fr;
    padding: 0 var(--side-margin);
    box-sizing: border-box;
  }
  #form .field.wide { grid-column: 1; }

  /* ---- Notifications / preferences form ---- */
  #form form { width: 100%; padding: 0 var(--side-margin); box-sizing: border-box; }

  /* ---- Pagination ---- */
  #pages #pages_row { flex-direction: column; gap: 16px; align-items: center; }
  #pages_right { justify-content: center; }

  /* ---- Login / Register boxes ---- */
  #login-box, #signup-box {
    width: calc(100% - 32px);
    max-width: 420px;
    padding: 24px 20px;
    box-sizing: border-box;
  }
  body:has(#login-box),
  body:has(#signup-box) {
    overflow-y: auto;
    padding: 24px 0;
    align-items: flex-start;
  }
  #login-options { gap: 6px; }

  /* ---- Footer ---- */
  #footer > div { margin-left: var(--side-margin); margin-right: var(--side-margin); }
  #footer > div:nth-child(2) {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  #footer > div:nth-child(2) > div:nth-child(1) {
    grid-column: 1 / -1;
  }
  #footer > div:nth-child(2) > div:nth-child(1) > ul {
    flex-wrap: wrap;
    gap: 12px;
  }
  #footer > div:nth-child(2) > div:nth-child(1) > ul > li {
    padding-right: 0;
  }

  /* ---- User dropdown ---- */
  #user_name { display: none; }

  /* ---- Watch list dialog ---- */
  dialog form { padding: 20px 24px; }
}

/* ============================================================
   Homepage mobile fixes
   ============================================================ */

@media (max-width: 767px) {

  /* Fix page width */
  body {
    grid-template-rows: none !important;
  }

  /* Fix header */
  #header #header_row {
    margin: 12px 8px 0 8px !important;
    box-sizing: border-box !important;
    width: calc(100vw - 16px) !important;
  }
  #header #header_row > div:nth-child(2) {
    display: none !important;
  }
  #header #header_row > div:nth-child(3) nav ul {
    gap: 4px;
  }
  #header #header_row > div:nth-child(3) nav ul li {
    margin-right: 6px !important;
  }
  .create-account-button {
    padding: 8px 10px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }

  /* Fix all main sections width */
  #about-us,
  #ai-powered-scoring-system,
  #emerging-value-stocks,
  #ai-insights,
  #faq,
  #see-what-others-overlook,
  #footer {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  #about-us {
    margin: 48px 16px 0 16px !important;
  }
  #about-us > div:nth-child(2) {
    flex-direction: column !important;
    gap: 20px;
  }
  #about-us > div:nth-child(2) > div {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
  #ai-powered-scoring-system {
    margin: 48px 16px 0 16px !important;
  }
  #ai-powered-scoring-system > div:nth-child(3) {
    flex-direction: column !important;
    gap: 16px;
  }
  #emerging-value-stocks {
    margin: 48px 16px 48px 16px !important;
  }
  #emerging-value-stocks #stocks {
    display: none !important;
  }
  #emerging-value-stocks > div:nth-child(2) {
    flex-direction: column !important;
    gap: 20px;
  }
  #emerging-value-stocks > div:nth-child(2) > div {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
  #ai-insights {
    padding: 48px 16px !important;
    height: auto !important;
  }
  #ai-insights > div:nth-child(2) {
    flex-direction: column !important;
    gap: 20px;
  }
  #ai-insights > div:nth-child(2) > div {
    flex-basis: 100% !important;
  }
  #faq {
    margin: 48px 16px 0 16px !important;
  }
  #faq > div:nth-child(3) > p {
    padding: 0 16px 20px 16px !important;
    font-size: 14px;
  }
  #see-what-others-overlook {
    height: auto !important;
    padding: 48px 16px !important;
    box-sizing: border-box !important;
    background-image: url("/images/chart2.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
  }
  #see-what-others-overlook > div:nth-child(3) {
    flex-direction: column !important;
    align-items: stretch;
    padding: 0;
  }
  #see-what-others-overlook input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* About Us and Emerging Value Stocks badge and heading centering */
  #about-us > div:nth-child(1),
  #emerging-value-stocks > div:nth-child(1) {
    text-align: center;
  }
  #about-us > div:nth-child(2) > div:nth-child(1),
  #emerging-value-stocks > div:nth-child(2) > div:nth-child(1) {
    text-align: center;
  }

  /* See what others overlook - email input alignment */
  #see-what-others-overlook > div:nth-child(3) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 20px !important;
  }
  #see-what-others-overlook > div:nth-child(3) > div {
    width: 100%;
  }
  #see-what-others-overlook > div:nth-child(3) > div input {
    width: 100%;
    box-sizing: border-box;
  }

  /* Create account button - orange */
  .create-account-button {
    background-color: #ffc919 !important;
    border-color: #ffc919 !important;
  }

  /* Footer social icons centered */
  #footer > div:nth-child(2) > div:nth-child(1) > ul {
    justify-content: center !important;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
  }

  /* Footer layout */
  #footer > div {
    margin-left: 16px !important;
    margin-right: 16px !important;
    box-sizing: border-box !important;
  }
  #footer > div:nth-child(2) {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px;
  }
  #footer > div:nth-child(2) > div:nth-child(1) {
    grid-column: 1 / -1;
    margin-bottom: 0 !important;
  }
  #footer > div:nth-child(2) > div:nth-child(2) {
    display: none;
  }

  /* Fix main section overflow */
  #main {
    max-width: 100vw !important;
    box-sizing: border-box !important;
    padding: 40px 16px !important;
  }
  #main br {
    display: none;
  }

  /* Hide decorative SVG elements that cause overflow */
  #grad1 {
    max-width: 100vw;
    overflow: hidden;
  }
  #logo .mustache,
  #logo .mustache svg {
    display: none;
  }

  /* Hero section */
  #main {
    padding: 40px 16px !important;
  }
  #main .cap1 {
    font-size: 28px !important;
  }
  #main > div:nth-child(2) {
    font-size: 14px;
    padding: 0 8px;
  }
  #main > div:nth-child(2) br {
    display: none;
  }

  /* Laptop image - constrain to viewport */
  #logo {
    padding: 20px 0;
    max-width: 100vw;
    overflow: hidden;
  }
  #laptop {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
  }

  /* Header */
  #header #header_row {
    margin: 12px 16px 0 16px;
    grid-template-columns: 1fr auto !important;
    grid-template-areas: 'header1 header3' !important;
    box-sizing: border-box !important;
    width: calc(100vw - 32px) !important;
  }
  #header #header_row > div:nth-child(2) {
    display: none;
  }

  /* About us */
  #about-us {
    margin: 48px 16px 0 16px;
  }
  #about-us > div:nth-child(2) {
    flex-direction: column;
    gap: 20px;
  }
  #about-us > div:nth-child(2) > div {
    flex-basis: 100%;
  }
  #about-us p {
    font-size: 15px;
  }

  /* AI scoring system */
  #ai-powered-scoring-system {
    margin: 48px 16px 0 16px;
  }
  #ai-powered-scoring-system > div:nth-child(3) {
    flex-direction: column;
    gap: 16px;
  }

  /* Emerging value stocks */
  #emerging-value-stocks {
    margin: 48px 16px 48px 16px;
  }
  #emerging-value-stocks > div:nth-child(2) {
    flex-direction: column;
    gap: 20px;
  }
  #emerging-value-stocks > div:nth-child(2) > div {
    flex-basis: 100%;
  }
  #emerging-value-stocks div > p {
    font-size: 15px;
  }
  #emerging-value-stocks #stocks {
    grid-template-columns: repeat(2, 1fr);
    mask-image: none;
  }

  /* AI insights */
  #ai-insights {
    padding: 48px 16px !important;
    height: auto !important;
  }
  #ai-insights > div:nth-child(2) {
    flex-direction: column;
    gap: 20px;
  }
  #ai-insights > div:nth-child(2) > div {
    flex-basis: 100%;
  }
  #ai-insights p {
    font-size: 15px;
  }

  /* FAQ */
  #faq {
    margin: 48px 16px 0 16px;
  }
  #faq > div:nth-child(3) > div > div > h2 {
    font-size: 18px;
  }
  #faq > div:nth-child(3) > p {
    padding: 0 16px 20px 16px;
    font-size: 14px;
  }

  /* See what others overlook */
  #see-what-others-overlook {
    height: auto !important;
    padding: 48px 16px;
    background-size: cover;
    margin-top: 0 !important;
  }
  #see-what-others-overlook > div:nth-child(3) {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
  }
  #see-what-others-overlook input {
    width: 100%;
    max-width: 100%;
  }

  /* Footer */
  #footer > div:nth-child(2) {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  #footer > div:nth-child(2) > div:nth-child(1) {
    grid-column: 1 / -1;
  }
  #footer > div:nth-child(2) > div:nth-child(1) > ul {
    flex-wrap: wrap;
    gap: 12px;
  }

  /* General font sizes */
  .cap1, .cap2 {
    font-size: 28px !important;
    letter-spacing: -1px;
  }
  .red-badge, .white-badge {
    font-size: 13px;
    padding: 8px 14px;
  }
}

@media (max-width: 767px) {
  /* Dashboard stock cards - scale to fit 2 columns */
  #stocks {
    gap: 8px !important;
  }
  .stock {
    padding: 12px !important;
    border-radius: 20px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .stock_name {
    font-size: 16px !important;
    font-weight: 700 !important;
  }
  .stock_ticker {
    font-size: 13px !important;
    font-weight: 600 !important;
    margin: 6px 0 !important;
  }
  .stock_stats {
    margin: 10px 0 !important;
    font-size: 11px !important;
  }
  .stock_chart {
    margin: 10px 0 !important;
  }
  .stock_price {
    font-size: 11px !important;
  }
  .stock_price_change {
    font-size: 10px !important;
    padding: 2px 4px !important;
  }
  .stock_price_change svg {
    width: 8px !important;
    height: 8px !important;
  }
  .stock_ai_score {
    font-size: 11px !important;
    padding: 3px 8px !important;
    margin-top: 4px !important;
  }
  .stock_footer {
    flex-direction: column !important;
    gap: 4px !important;
    align-items: flex-start !important;
  }
  .stock_open_profile {
    text-align: left !important;
    width: 100% !important;
  }
  .stock_open_profile > a > div {
    font-size: 10px !important;
    padding: 5px 8px !important;
    gap: 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
  }
  .stock_open_profile svg {
    width: 12px !important;
    height: 8px !important;
  }
}

@media (max-width: 767px) {
  /* Dashboard header row */
  #header_row {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* Dashboard controls - center on mobile */
  #controls #controls_row {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
  #controls #controls_row > div:nth-child(3) {
    flex: unset !important;
    text-align: center !important;
  }

  /* Dashboard filter dropdown */
  .select-trigger {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Search box magnifying glass */
  #search-box svg {
    left: auto !important;
    right: 12px !important;
  }
}

@media (max-width: 767px) {
  .custom-select.dashboard {
    height: 62px !important;
  }
}

@media (max-width: 768px) {
  /* Chart period buttons — reduce gap so they fit */
  #chart #chart-periods {
    gap: 8px;
    flex-wrap: wrap;
  }
  #chart #chart-periods > div {
    font-size: 14px;
  }

  /* Analyst ratings period selector — reduce padding */
  #analyst-ratings .periods > div {
    padding: 5px 10px;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Analyst legend (.signals) — allow wrapping */
  #analyst-ratings .signals > div {
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: center !important;
  }
  #analyst-ratings .signals > div > div {
    white-space: nowrap;
    border-left: none !important;
    padding: 0 6px !important;
  }
}

@media (max-width: 768px) {
  /* Fix right-side gap — prevent any element overflowing page width */
  body, #main {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Insiders table — make scrollable horizontally */
  #insiders .table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    height: auto !important;
    max-height: 400px;
    overflow-y: auto;
  }
  #insiders .table .row {
    display: grid !important;
    grid-template-columns: 90px 130px 110px 110px 80px 80px 110px !important;
    min-width: 710px;
  }
  #insiders .table .row > div {
    padding: 10px 8px !important;
    font-size: 13px !important;
    word-break: break-word;
  }
}

/* =====================================================
   PRICING PAGE — mobile fixes
   ===================================================== */
@media (max-width: 768px) {

    /* Fix hero section clipping */
    #main {
        overflow: visible !important;
        height: auto !important;
        padding: 60px 16px 40px !important;
    }
    #main > div:nth-child(2) {
        width: 100% !important;
    }
    #main > div:nth-child(3) .mustache {
        position: absolute;
        left: 0;
        top: -145px;
        width: 100%;
        height: 300px;
        z-index: -1;
        overflow: hidden;
    }
    #main > div:nth-child(3) .mustache svg {
        width: 100%;
        height: 300px;
    }

    /* Fix plans stacking */
    #plans {
        flex-direction: column !important;
        margin: 40px 16px !important;
    }
    #plans > div:first-child {
        font-size: 24px !important;
    }

    /* Fix key features table */
    #key-features {
        margin: 40px 16px !important;
        font-size: 13px !important;
    }
    #key-features > div:nth-child(-n+3) {
        font-size: 18px !important;
    }

    /* Fix get-started section */
    #get-started {
        padding: 60px 20px !important;
        margin-top: 40px !important;
        height: auto !important;
    }
    #get-started > div:first-child {
        font-size: 28px !important;
        width: 100% !important;
    }
    #get-started > div:last-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 16px !important;
        margin-top: 30px !important;
    }
    #get-started > div:last-child > a {
        margin-left: 0 !important;
        display: block !important;
    }
    #start-free-button, #try-premium-button {
        display: block !important;
        text-align: center !important;
        min-width: 160px !important;
    }

    /* Fix see-what-others-overlook */
    #see-what-others-overlook > div:nth-child(3) {
        flex-direction: column !important;
        align-items: center !important;
        padding: 0 16px !important;
    }
    #see-what-others-overlook input {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* =====================================================
   PROFILE PAGE — mobile fixes
   ===================================================== */
@media (max-width: 768px) {

    body:has(#photo) #main {
        padding: 40px 16px 20px !important;
        text-align: center;
    }

    body:has(#photo) #main .cap1 {
        font-size: 28px !important;
    }

    body:has(#photo) #main .cap2 {
        font-size: 16px !important;
    }

    #sections {
        margin: 0 16px !important;
        overflow: hidden !important;
        width: calc(100vw - 32px) !important;
        box-sizing: border-box !important;
    }

    #sections .row {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0 !important;
        font-size: 12px !important;
        overflow: hidden !important;
        width: 100% !important;
        grid-template-columns: unset !important;
    }

    #sections .row > div:first-child {
        display: none !important;
    }

    #sections .row > div {
        white-space: nowrap !important;
        padding: 4px 8px 10px !important;
        flex: 0 0 auto !important;
    }

    #photo {
        margin: 20px 16px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 16px !important;
    }

    #photo img {
        width: 100px !important;
        height: 100px !important;
    }

    #form {
        margin: 0 16px !important;
    }

    #form form {
        width: 100% !important;
        padding: 0 !important;
        grid-template-columns: 1fr !important;
        box-sizing: border-box !important;
    }

    #form .field.wide {
        grid-column: 1 !important;
    }
}

/* =====================================================
   SECURITY PAGE — mobile fixes
   ===================================================== */
@media (max-width: 768px) {

    body:has(#logout) #main {
        padding: 40px 16px 20px !important;
        text-align: center !important;
    }

    body:has(#logout) #main .cap1 {
        font-size: 28px !important;
        letter-spacing: -1px !important;
    }

    body:has(#logout) #main .cap2 {
        font-size: 16px !important;
    }

    #subtitles {
        margin: 20px 16px 0 16px !important;
    }

    #subtitles .cap1 {
        font-size: 24px !important;
    }

    #subtitles .cap2 {
        font-size: 15px !important;
    }

    body:has(#logout) #form {
        margin: 20px 16px !important;
    }

    body:has(#logout) #form form {
        width: 100% !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        box-sizing: border-box !important;
    }

    body:has(#logout) #form .field {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    body:has(#logout) #form input {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    body:has(#logout) #form .btn:first-of-type {
        display: none !important;
    }

    body:has(#logout) #form .btn1 {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #hr {
        margin: 20px 16px !important;
    }

    #logout {
        margin: 0 16px 40px 16px !important;
    }

    #logout > div {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
    }

    #logout > div > div:first-child {
        font-size: 14px !important;
        flex: 1 !important;
    }
}