/*
 * WearScope v1.6 mobile optimization layer
 * Desktop rules remain in app.css. This file only changes tablet/mobile UX.
 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

button,
a,
input,
select {
  -webkit-tap-highlight-color: transparent;
}

.sidebar-close,
.sidebar-backdrop,
.mobile-bottom-nav {
  display: none;
}

@media (max-width: 900px) {
  :root {
    --mobile-nav-height: 66px;
    --mobile-page-gutter: 18px;
  }

  body.sidebar-open {
    overflow: hidden;
    touch-action: none;
  }

  .sidebar {
    width: min(84vw, 320px);
    height: 100dvh;
    padding-top: max(18px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    box-shadow: 20px 0 45px rgba(7, 13, 25, .26);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .sidebar .brand {
    padding-right: 48px;
  }

  .sidebar-close {
    display: inline-flex;
    position: absolute;
    top: max(18px, env(safe-area-inset-top));
    right: 16px;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 11px;
    background: rgba(255, 255, 255, .06);
    color: #dce3f1;
    font-size: 23px;
    line-height: 1;
  }

  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 29;
    background: rgba(8, 14, 25, .52);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }

  .sidebar-backdrop.show {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }

  .nav-item {
    min-height: 46px;
  }

  .topbar {
    height: calc(64px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) var(--mobile-page-gutter) 0;
  }

  .mobile-menu {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    margin-right: 9px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    color: #3e485a;
    line-height: 1;
  }

  .global-search {
    width: min(100%, 620px);
    min-width: 0;
    height: 44px;
  }

  .global-search input {
    min-width: 0;
    font-size: 16px;
  }

  .page-content {
    width: 100%;
    max-width: none;
    padding: 24px var(--mobile-page-gutter) calc(var(--mobile-nav-height) + 34px + env(safe-area-inset-bottom));
  }

  .page-head h1,
  .compare-product h1 {
    overflow-wrap: anywhere;
  }

  .panel-head {
    gap: 12px;
  }

  .primary-button,
  .secondary-button,
  .ghost-button,
  .outbound-button,
  .detail-toggle,
  .channel-actions button,
  .history-actions a,
  .history-actions button {
    min-height: 42px;
  }

  .mobile-bottom-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed;
    z-index: 25;
    left: 10px;
    right: 10px;
    bottom: max(8px, env(safe-area-inset-bottom));
    height: var(--mobile-nav-height);
    padding: 5px 4px;
    border: 1px solid rgba(220, 225, 235, .95);
    border-radius: 18px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 12px 34px rgba(17, 24, 39, .16);
    backdrop-filter: blur(16px);
  }

  .mobile-bottom-nav a {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    border-radius: 13px;
    color: #7b8493;
    font-size: 9px;
    font-weight: 750;
  }

  .mobile-bottom-nav a span {
    font-size: 19px;
    line-height: 1;
  }

  .mobile-bottom-nav a.active {
    background: #edf1ff;
    color: #4059d8;
  }

  .toast {
    left: 16px;
    right: 16px;
    bottom: calc(var(--mobile-nav-height) + 25px + env(safe-area-inset-bottom));
    text-align: center;
  }

  .data-table-wrap,
  .api-key-table-wrap,
  .settings-nav,
  .result-filters,
  .filter-chips {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }

  .data-table-wrap::after,
  .api-key-table-wrap::after {
    content: "좌우로 밀어 전체 항목 확인";
    display: block;
    padding: 8px 14px 12px;
    color: #929baa;
    font-size: 9px;
    text-align: right;
  }

  .autocomplete-panel {
    max-height: min(54dvh, 420px);
    overflow-y: auto;
  }

  .search-loading {
    padding: 16px;
  }

  .loading-card {
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
  }
}

@media (max-width: 620px) {
  :root {
    --mobile-page-gutter: 14px;
  }

  .topbar {
    padding-left: 12px;
    padding-right: 12px;
  }

  .page-content {
    padding-top: 18px;
  }

  .page-head {
    gap: 14px;
    margin-bottom: 18px;
  }

  .page-head h1,
  .compare-product h1 {
    font-size: 23px;
    line-height: 1.26;
    margin-bottom: 6px;
  }

  .page-head p {
    font-size: 12px;
    line-height: 1.55;
  }

  .eyebrow {
    margin-bottom: 6px;
    font-size: 9px;
  }

  .head-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .head-actions > * {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }

  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .metric-card {
    min-width: 0;
    padding: 14px 12px;
    gap: 10px;
    align-items: center;
  }

  .metric-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    font-size: 17px;
  }

  .metric-card span {
    font-size: 10px;
  }

  .metric-card strong {
    font-size: 21px;
  }

  .metric-card small {
    display: block;
    overflow: hidden;
    max-width: 100%;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .panel,
  .live-search-form,
  .product-group-card,
  .live-product-card {
    border-radius: 13px;
  }

  .panel-head {
    padding: 16px;
    align-items: flex-start;
  }

  .panel-head h2 {
    font-size: 14px;
  }

  .panel-head p {
    font-size: 10px;
    line-height: 1.5;
  }

  .opportunity-row {
    padding: 12px 13px;
  }

  .opportunity-row img {
    width: 46px;
    height: 46px;
  }

  .country-bars {
    padding: 12px 15px;
  }

  .country-bar {
    grid-template-columns: 92px minmax(70px, 1fr) 38px;
    gap: 8px;
  }

  .chart-wrap {
    grid-template-rows: 170px 24px;
    padding: 20px 14px 12px;
  }

  .chart-wrap svg {
    height: 170px;
    background-size: 100% 42.5px;
  }

  /* Main search: keep controls compact and finger friendly. */
  .live-search-form {
    padding: 11px;
  }

  .live-search-form .hero-search {
    height: auto;
    min-height: 54px;
    padding: 7px 7px 7px 13px;
    gap: 7px;
  }

  .live-search-form .hero-search > span {
    font-size: 21px;
  }

  .live-search-form .hero-search input {
    min-width: 0;
    height: 42px;
    font-size: 16px;
  }

  .live-search-form .hero-search button {
    min-height: 44px;
    height: 44px;
  }

  .search-option-row {
    align-items: stretch;
    gap: 8px;
  }

  .search-option-row label {
    flex: 1 1 calc(50% - 4px);
    justify-content: space-between;
  }

  .search-option-row select {
    min-width: 0;
    height: 40px;
    flex: 1;
    font-size: 11px;
  }

  .search-option-row span {
    flex: 1 0 100%;
    line-height: 1.45;
  }

  .search-option-row a {
    margin-left: 0;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
  }

  .api-filter-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 12px 1px 3px;
    scrollbar-width: none;
  }

  .api-filter-row::-webkit-scrollbar {
    display: none;
  }

  .api-filter-title,
  .channel-check {
    flex: 0 0 auto;
  }

  .channel-check span {
    min-height: 38px;
    padding: 9px 12px;
    font-size: 10px;
  }

  .recent-searches {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .recent-searches::-webkit-scrollbar {
    display: none;
  }

  .recent-searches small,
  .recent-searches a {
    flex: 0 0 auto;
  }

  .api-status-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .api-status-strip::-webkit-scrollbar {
    display: none;
  }

  .api-status-item {
    flex: 0 0 min(74vw, 255px);
    min-height: 62px;
    scroll-snap-align: start;
  }

  .search-result-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .search-result-summary > div {
    min-width: 0;
    padding: 11px 12px;
  }

  .search-result-summary strong {
    font-size: 15px;
  }

  .query-expansion {
    grid-column: 1 / -1;
  }

  .query-expansion span {
    overflow: visible;
    line-height: 1.45;
    white-space: normal;
  }

  .result-toolbar {
    margin: 13px 0 10px;
  }

  .view-tabs {
    width: 100%;
  }

  .view-tabs button {
    flex: 1;
    min-height: 39px;
  }

  .result-filters {
    width: 100%;
    padding-bottom: 3px;
  }

  .result-filters select {
    flex: 0 0 auto;
    min-width: 126px;
    height: 40px;
    font-size: 10px;
  }

  /* Grouped results already work well; only tighten spacing. */
  .product-group-list {
    gap: 9px;
  }

  .product-group-card {
    grid-template-columns: 88px minmax(0, 1fr);
    padding: 10px;
    gap: 10px;
  }

  .group-image {
    height: 94px;
    padding: 7px;
  }

  .group-main h3 {
    margin: 6px 0;
    max-height: 36px;
    font-size: 12px;
    line-height: 1.45;
  }

  .group-tags {
    gap: 4px;
  }

  .group-tags span:nth-child(n+4) {
    display: none;
  }

  .group-price {
    margin-top: 8px;
  }

  .group-best {
    gap: 7px;
  }

  .group-best a,
  .group-best button {
    min-height: 40px;
    align-items: center;
  }

  .group-offer-row {
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: 8px;
    padding: 10px 3px;
  }

  .group-offer-row a {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
  }

  /* Individual offer cards become a compact horizontal mobile list. */
  .live-product-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .live-product-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: stretch;
  }

  .live-product-image {
    width: 112px;
    height: auto;
    min-height: 188px;
    padding: 10px;
    border-right: 1px solid #edf0f3;
  }

  .live-product-image img {
    width: 100%;
    height: 100%;
    max-height: 178px;
    object-fit: contain;
  }

  .live-product-image .source-tag {
    top: auto;
    right: 6px;
    bottom: 7px;
    left: 6px;
    overflow: hidden;
    padding: 5px 6px;
    font-size: 7px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .live-product-image .best-tag {
    top: 7px;
    right: auto;
    left: 6px;
    padding: 5px 6px;
    font-size: 7px;
  }

  .live-product-image .heart {
    top: 7px;
    right: 6px;
    bottom: auto;
    width: 35px;
    height: 35px;
  }

  .live-product-body {
    min-width: 0;
    padding: 12px;
  }

  .seller-row {
    font-size: 8px;
  }

  .live-product-body h3 {
    height: auto;
    max-height: 38px;
    margin: 6px 0 9px;
    font-size: 12px;
  }

  .price-verification {
    padding: 7px;
  }

  .price-verification small,
  .price-verification span {
    line-height: 1.35;
  }

  .cost-breakdown-mini {
    gap: 5px;
    padding: 8px 0;
  }

  .cost-breakdown-mini div {
    padding: 6px;
  }

  .landed-total-row strong {
    font-size: 16px;
  }

  .saving-live {
    margin-bottom: 7px;
  }

  .outbound-button {
    height: 42px;
  }

  .result-load-more {
    flex-direction: column;
    gap: 8px;
    padding: 19px 10px;
  }

  .result-load-more button {
    width: 100%;
  }

  .api-empty,
  .empty-state {
    min-height: 0;
    padding: 44px 20px;
  }

  .calculation-disclaimer {
    margin-bottom: 8px;
  }

  /* Comparison detail */
  .compare-head {
    margin-bottom: 14px;
  }

  .compare-product {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 12px;
    margin-top: 13px;
  }

  .compare-product img {
    width: 70px;
    height: 70px;
    margin: 0;
    border-radius: 11px;
  }

  .compare-product > div {
    min-width: 0;
  }

  .compare-product > button {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
  }

  .recommend-banner {
    gap: 11px;
    padding: 16px;
  }

  .recommend-saving strong {
    font-size: 20px;
  }

  .comparison-list {
    padding: 7px 10px 12px;
  }

  .comparison-row,
  .comparison-row.best {
    grid-template-columns: 28px minmax(0, 1fr);
    margin: 8px 0;
    padding: 13px 10px;
    border: 1px solid #edf0f4;
    border-radius: 11px;
  }

  .market-info {
    gap: 8px;
  }

  .flag {
    width: 32px;
    height: 32px;
    font-size: 18px;
  }

  .landed {
    grid-column: 2;
    padding-top: 7px;
    border-top: 1px dashed #e7eaf0;
  }

  .detail-toggle {
    grid-column: 2;
  }

  .cost-detail {
    grid-column: 1 / -1;
    gap: 0;
    padding: 8px;
  }

  .cost-detail div {
    min-width: 0;
    padding: 7px;
    border-right: 0;
    border-bottom: 1px solid #e7eaf0;
  }

  .compare-side {
    gap: 12px;
  }

  /* Watchlist: convert only this table into mobile cards. */
  .watch-summary {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .watch-summary div {
    padding: 14px 16px;
  }

  .watch-summary + .table-panel .data-table-wrap {
    overflow: visible;
    padding: 10px;
  }

  .watch-summary + .table-panel .data-table-wrap::after {
    display: none;
  }

  .watch-summary + .table-panel .data-table,
  .watch-summary + .table-panel tbody,
  .watch-summary + .table-panel tr,
  .watch-summary + .table-panel td {
    display: block;
    width: 100%;
  }

  .watch-summary + .table-panel thead {
    display: none;
  }

  .watch-summary + .table-panel tr {
    position: relative;
    margin-bottom: 10px;
    padding: 12px;
    border: 1px solid #e7eaf0;
    border-radius: 12px;
    background: #fff;
  }

  .watch-summary + .table-panel td {
    display: flex;
    min-height: 36px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f2f5;
    text-align: right;
  }

  .watch-summary + .table-panel td:first-child {
    display: block;
    padding-top: 0;
  }

  .watch-summary + .table-panel td:last-child {
    position: absolute;
    top: 8px;
    right: 7px;
    width: auto;
    min-height: 36px;
    border: 0;
  }

  .watch-summary + .table-panel td:nth-child(2)::before { content: "현재 최저가"; }
  .watch-summary + .table-panel td:nth-child(3)::before { content: "목표가"; }
  .watch-summary + .table-panel td:nth-child(4)::before { content: "절약액"; }
  .watch-summary + .table-panel td:nth-child(5)::before { content: "최저 채널"; }
  .watch-summary + .table-panel td:nth-child(6)::before { content: "상태"; }

  .watch-summary + .table-panel td:nth-child(n+2):nth-child(-n+6)::before {
    color: #8b94a2;
    font-size: 9px;
    font-weight: 700;
  }

  .table-product {
    min-width: 0;
    padding-right: 34px;
  }

  .table-product img {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
  }

  /* Channels and settings */
  .channel-summary {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .channel-summary article {
    padding: 14px 16px;
  }

  .channel-card {
    padding: 15px;
  }

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

  .job-list > div {
    padding: 12px 14px;
  }

  .advanced-settings .form-grid,
  .rate-grid,
  .form-grid {
    grid-template-columns: 1fr;
    padding: 15px 16px;
  }

  .advanced-settings select,
  .input-unit,
  .input-unit input,
  .rate-grid input {
    min-height: 44px;
    font-size: 16px;
  }

  .rate-grid label {
    gap: 8px;
  }

  .rate-grid input {
    width: 112px;
  }

  .toggle-list {
    padding: 4px 16px 14px;
  }

  .toggle-list label {
    min-height: 60px;
  }

  .setting-note {
    margin: 0 16px 16px;
    font-size: 10px;
    line-height: 1.55;
  }

  .size-guide-table {
    margin: 0 16px 14px;
  }

  .plain-check {
    margin: 0 16px 14px;
    line-height: 1.45;
  }

  .settings-save-bar {
    bottom: calc(var(--mobile-nav-height) + 14px + env(safe-area-inset-bottom));
    z-index: 14;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 -2px;
    padding: 8px;
    box-shadow: 0 9px 28px rgba(19, 31, 61, .12);
  }

  /* History */
  .history-row {
    padding: 13px;
  }

  .history-query {
    min-width: 0;
  }

  .history-query b,
  .history-query small {
    overflow-wrap: anywhere;
  }

  .history-actions a,
  .history-actions button {
    min-width: 70px;
  }
}

@media (max-width: 390px) {
  .metric-grid {
    grid-template-columns: 1fr;
  }

  .head-actions {
    grid-template-columns: 1fr;
  }

  .live-product-card {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .live-product-image {
    width: 96px;
    min-height: 172px;
  }

  .cost-breakdown-mini {
    grid-template-columns: 1fr;
  }

  .mobile-bottom-nav a {
    font-size: 8px;
  }
}

/* Watchlist full-data mobile cards */
@media (max-width: 620px) {
  .watch-page-head { align-items: stretch; }
  .watch-page-head .primary-button { width: 100%; }
  .watch-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .watch-summary div { min-width: 0; padding: 12px 10px; }
  .watch-summary span { font-size: 8px; }
  .watch-summary b { margin-top: 5px; font-size: 17px; }
  .watch-summary small { overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
  .watchlist-panel .panel-head { display: grid; grid-template-columns: 1fr; }
  .watchlist-panel .panel-head .secondary-button { width: 100%; min-height: 42px; }
  .watch-table { min-width: 0; }
  .watch-summary + .table-panel .watch-table tr { padding: 13px; }
  .watch-summary + .table-panel .watch-table td { text-align: right; }
  .watch-summary + .table-panel .watch-table td[data-label]::before { content: attr(data-label); color: #8b94a2; font-size: 9px; font-weight: 700; }
  .watch-summary + .table-panel .watch-table td:nth-child(2)::before,
  .watch-summary + .table-panel .watch-table td:nth-child(3)::before,
  .watch-summary + .table-panel .watch-table td:nth-child(4)::before,
  .watch-summary + .table-panel .watch-table td:nth-child(5)::before,
  .watch-summary + .table-panel .watch-table td:nth-child(6)::before { content: attr(data-label); }
  .watch-summary + .table-panel .watch-table td:first-child { text-align: left; }
  .watch-summary + .table-panel .watch-table td:last-child { position: static; display: flex; width: 100%; min-height: 42px; padding-bottom: 0; border-bottom: 0; }
  .watch-product-cell { min-width: 0; max-width: none; }
  .watch-product img { width: 58px; height: 58px; flex-basis: 58px; }
  .watch-product b { padding-right: 0; font-size: 12px; }
  .watch-inline-actions { display: grid; grid-template-columns: 1fr 1fr; margin-left: 0; }
  .watch-inline-actions a,.watch-inline-actions button { min-height: 36px; text-align: center; }
  .watch-cost-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-left: 0; }
  .watch-cost-detail div { padding: 8px; }
  .watch-table td > strong,.watch-target-value strong { font-size: 11px; }
  .watch-target-value { justify-content: flex-end; }
  .watch-channel { max-width: 170px; text-align: right; }
  .watch-row-actions { width: 100%; justify-content: flex-end; }
  .watch-row-actions button { min-width: 68px; height: 38px; }
}

@media (max-width: 390px) {
  .watch-summary { grid-template-columns: 1fr; }
  .watch-summary small { white-space: normal; }
}

/* =========================================================
   Authentication pages: mobile-first login / registration
   ========================================================= */
@media (max-width: 900px) {
  body:has(.login-page) {
    min-height: 100dvh;
    background:
      radial-gradient(circle at 100% 0, rgba(83, 109, 254, .14), transparent 34%),
      linear-gradient(180deg, #f7f9ff 0%, #eef2f8 100%);
  }

  .login-page {
    display: block;
    min-height: 100dvh;
    background: transparent;
  }

  .login-visual {
    display: none !important;
  }

  .login-panel {
    min-height: 100dvh;
    align-items: flex-start;
    padding:
      max(28px, env(safe-area-inset-top))
      20px
      max(32px, env(safe-area-inset-bottom));
    overflow-y: auto;
  }

  .login-form {
    width: min(100%, 440px);
    margin: auto;
    padding: 28px 24px 24px;
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(218, 224, 236, .92);
    border-radius: 22px;
    box-shadow: 0 22px 58px rgba(28, 42, 77, .13);
    backdrop-filter: blur(14px);
  }

  .mobile-logo {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 11px;
    margin: 0 0 30px;
  }

  .mobile-logo .brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    font-size: 22px;
  }

  .mobile-logo strong {
    font-size: 20px;
    letter-spacing: -.035em;
  }

  .login-form .eyebrow {
    margin-bottom: 9px;
    font-size: 10px;
  }

  .login-form h2 {
    margin-bottom: 8px;
    font-size: clamp(29px, 8vw, 36px);
    line-height: 1.15;
  }

  .login-form > .muted {
    margin: 0 0 25px;
    font-size: 13px;
    line-height: 1.55;
  }

  .login-form > label {
    margin: 15px 0;
    font-size: 12px;
  }

  .login-form > label input {
    min-height: 52px;
    height: 52px;
    margin-top: 8px;
    padding: 0 15px;
    border-radius: 12px;
    font-size: 16px; /* prevents iOS auto zoom */
    background: #fff;
  }

  .login-form > label input::placeholder {
    color: #a2aaba;
  }

  .form-row {
    gap: 12px;
    margin: 16px 0 20px;
    font-size: 12px;
  }

  .form-row .check {
    min-height: 32px;
  }

  .form-row .check input {
    width: 18px;
    height: 18px;
    margin: 0;
  }

  .primary-button.full {
    min-height: 52px;
    height: 52px;
    border-radius: 12px;
    font-size: 14px;
  }

  .form-error,
  .form-success {
    margin: 0 0 16px;
    padding: 12px 13px;
    border-radius: 11px;
    line-height: 1.5;
  }

  .auth-switch {
    margin-top: 20px;
    font-size: 13px;
  }

  .demo-account {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 20px;
    padding: 13px;
    border-radius: 12px;
  }

  .demo-account b {
    grid-column: 1 / -1;
  }

  .demo-account code {
    min-width: 0;
    overflow: hidden;
    padding: 8px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  .login-panel {
    padding-left: 14px;
    padding-right: 14px;
  }

  .login-form {
    padding: 24px 18px 20px;
    border-radius: 18px;
  }

  .mobile-logo {
    margin-bottom: 24px;
  }

  .form-row {
    align-items: flex-start;
  }

  .demo-account {
    grid-template-columns: 1fr;
  }

  .demo-account b {
    grid-column: auto;
  }
}

@media (max-width: 360px) {
  .login-panel {
    padding-left: 10px;
    padding-right: 10px;
  }

  .login-form {
    padding-left: 15px;
    padding-right: 15px;
  }

  .form-row {
    flex-direction: column;
    align-items: stretch;
  }

  .form-row > a {
    align-self: flex-end;
  }
}

@media (max-height: 700px) and (max-width: 900px) {
  .login-panel {
    padding-top: max(14px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  .login-form {
    margin-top: 0;
    margin-bottom: 0;
  }

  .mobile-logo {
    margin-bottom: 18px;
  }

  .login-form > .muted {
    margin-bottom: 18px;
  }

  .login-form > label {
    margin: 11px 0;
  }
}
@media(max-width:900px){.search-option-row{display:grid!important;grid-template-columns:1fr 1fr;gap:10px!important;align-items:center}.result-limit-field{grid-column:1/-1;justify-content:space-between;padding:12px 13px;border:1px solid #e2e8f2;border-radius:14px;background:#fff;box-shadow:0 8px 22px rgba(20,42,83,.07)}.select-shell select{min-width:132px;min-height:44px;font-size:16px;border-color:#d6dff0;background:#f7f9fd}.search-option-row>a{grid-column:1/-1}.admin-grid{grid-template-columns:1fr}.admin-filter{grid-template-columns:1fr}.admin-metrics{grid-template-columns:1fr 1fr}.admin-table-wrap{margin:0 -12px;padding:0 12px}.admin-badge{display:none}}

/* v1.7.1: native select replaced with an in-card DIV dropdown */
@media(max-width:900px){
  .search-option-row{overflow:visible!important}
  .result-limit-field{grid-column:1/-1;display:grid!important;grid-template-columns:1fr auto;gap:12px!important;align-items:center;width:100%;padding:13px 14px!important;overflow:visible;z-index:auto}
  .result-limit-label{font-size:13px;font-weight:800;color:#68758a}
  .result-limit-trigger{min-width:116px;width:auto;height:46px;padding:0 14px;border-radius:13px;background:#f6f8fd;font-size:14px;box-shadow:none}
  .result-limit-trigger b{font-size:16px}
  .result-limit-menu{top:calc(100% + 7px);left:auto;right:12px;width:min(220px,calc(100vw - 54px));min-width:0;max-height:330px;overflow:auto;padding:8px;border-radius:16px;overscroll-behavior:contain}
  .result-limit-menu button{height:44px;font-size:14px;padding:0 12px}
  .result-limit-menu button em{font-size:10px}
}
@media(max-width:420px){
  .result-limit-field{grid-template-columns:1fr 108px;padding:12px!important}
  .result-limit-trigger{min-width:0;width:108px}
  .result-limit-menu{right:8px;width:min(210px,calc(100vw - 42px))}
}
@media(max-width:900px){
.admin-metrics{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}.admin-metrics article{min-width:0;padding:15px!important;border-radius:14px}.admin-metrics article small{display:block;font-size:12px}.admin-metrics article strong{display:block;font-size:24px;margin-top:4px}.admin-grid{display:block!important}.admin-side{display:grid!important;grid-template-columns:1fr!important;margin-top:14px}.admin-filter{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}.admin-filter input,.admin-filter select,.admin-filter button{width:100%!important;min-width:0!important}.admin-table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch;padding-bottom:8px}.data-table{min-width:720px!important}.member-panel .data-table{min-width:780px!important}.page-head h1{word-break:keep-all}.admin-badge{display:none!important}.product-action-pair{grid-template-columns:1fr}.compare-buy{position:static;margin:12px 0 0}.real-activity-bars{gap:10px}.dashboard-empty{padding:48px 18px}}
@media(max-width:480px){.admin-metrics{grid-template-columns:1fr 1fr!important}.admin-metrics article strong{font-size:21px}.admin-table-wrap{margin-left:-18px!important;margin-right:-18px!important;padding-left:18px!important;padding-right:18px!important}}

/* v1.7.4: keep result-count control in normal document flow while scrolling */
@media(max-width:900px){
  .live-search-form,.search-option-row{position:relative;z-index:auto!important;transform:none!important}
  .result-limit-field{position:relative!important;top:auto!important;left:auto!important;right:auto!important;z-index:auto!important}
  .result-limit-field.open{z-index:80!important}
  .result-limit-menu{position:absolute!important;inset:auto 0 auto auto!important;top:calc(100% + 8px)!important;max-width:calc(100vw - 48px)!important}
  .result-toolbar{position:relative!important;z-index:1!important}
}