/* Owner screens only. Keep theme_26c's lattice, font families and seven-colour header line. */
html body.owner-redesign:not(.owner-classic) {
  --radius: 10px;
  --shadow: 0 2px 8px #25242205;
  --teal: #16594f;
  --text: #242724;
  --text-muted: #666a70;
  --gold-text: #927018;
  --brand-yellow: #ab8a32;
  --border: #e6e2da;
  --lattice-64: repeating-linear-gradient(45deg, rgba(185,150,83,.035) 0 1px, transparent 1px 64px), repeating-linear-gradient(-45deg, rgba(185,150,83,.035) 0 1px, transparent 1px 64px);
  background-color: #fdfbf7 !important;
  padding-bottom: calc(88px + env(safe-area-inset-bottom));
}
html body.owner-redesign [hidden] { display: none !important; }
html body.owner-redesign:not(.owner-classic) main { max-width: 520px !important; padding: 14px 14px 24px; }

html body.owner-redesign #backToTopButton { bottom: calc(88px + env(safe-area-inset-bottom)); }
html body.owner-redesign .app-brand-footer { max-width: 520px; margin: 8px auto 0; padding: 12px 14px; background: transparent !important; background-image: none !important; animation: none; }
html body.owner-redesign .app-brand-footer__logo { display: none; }
html body.owner-redesign .app-brand-footer::before,
html body.owner-redesign .app-brand-footer::after { content: none; }
html body.owner-redesign .app-footer-refresh__button { border: 1px solid var(--border) !important; background: #fff !important; color: var(--text-muted) !important; font-size: 12px; }
html body.owner-redesign:not(.owner-classic) button,
html body.owner-redesign:not(.owner-classic) input,
html body.owner-redesign:not(.owner-classic) select,
html body.owner-redesign:not(.owner-classic) textarea { border-radius: 8px !important; }
html body.owner-redesign:not(.owner-classic) button,
html body.owner-redesign:not(.owner-classic) select { min-height: 44px; }
html body.owner-redesign:not(.owner-classic) button { cursor: pointer; }
html body.owner-redesign:not(.owner-classic) button:disabled { opacity: .5; cursor: not-allowed; }
html body.owner-redesign:not(.owner-classic) :focus-visible { outline: 2px solid #16594f; outline-offset: 3px; }
html body.owner-redesign:not(.owner-classic) .owner-page-title { font: inherit; font-size: 24px; font-weight: 700; letter-spacing: 0; margin: 0 0 12px; color: var(--text); }
html body.owner-redesign .owner-search { display: block; margin: 12px 0; }
html body.owner-redesign .owner-search input { width: 100%; min-height: 46px; padding: 10px 12px; font-size: 14px; border: 1px solid var(--border); background: #fff; }
html body.owner-redesign:not(.owner-classic) main input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html body.owner-redesign:not(.owner-classic) main select,
html body.owner-redesign:not(.owner-classic) main textarea {
  background: #fff !important; border: 1px solid var(--border) !important; border-radius: 8px !important; padding-left: 11px !important; padding-right: 11px !important;
}
html body.owner-redesign .owner-search-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
html body.owner-redesign:not(.owner-classic) .panel,
html body.owner-redesign:not(.owner-classic) .message,
html body.owner-redesign:not(.owner-classic) .metric-card,
html body.owner-redesign:not(.owner-classic) .metric-tile,
html body.owner-redesign:not(.owner-classic) .hold-card,
html body.owner-redesign:not(.owner-classic) .hold-card-none { background: #fff !important; border: 1px solid var(--border) !important; border-radius: 10px !important; box-shadow: var(--shadow) !important; }
html body.owner-redesign:not(.owner-classic) .sec-title,
html body.owner-redesign:not(.owner-classic) .section-heading { border-bottom: 0 !important; }
html body.owner-redesign:not(.owner-classic) .sec-title h2,
html body.owner-redesign:not(.owner-classic) .section-heading h2 { font-size: 16px !important; letter-spacing: 0 !important; }
html body.owner-redesign:not(.owner-classic) .inventory-filters,
html body.owner-redesign:not(.owner-classic) .panel.item-filters { padding: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; }

html body.owner-redesign:not(.owner-classic) .owner-chip-rail .tab-button {
  padding: 7px 10px !important; border: 1px solid var(--border) !important; background: #fff !important; color: var(--text) !important; border-radius: 8px !important;
}

html body.owner-redesign:not(.owner-classic) .owner-chip-rail .tab-button.active { background: #d8bd79 !important; border-color: #b99653 !important; color: #242724 !important; }
html body.owner-redesign:not(.owner-classic).page-index .owner-chip-rail .tab-button.active { border-radius: 8px !important; }
html body.owner-redesign:not(.owner-classic) .owner-filter-title { font-size: 14px; margin: 10px 0 6px; }
html body.owner-redesign:not(.owner-classic) .tag-filter { margin-top: 12px; gap: 6px; }
html body.owner-redesign:not(.owner-classic) .tag-filter .tag-chips { flex-wrap: nowrap; overflow-x: auto; }
html body.owner-redesign:not(.owner-classic) .tag-filter-scroll { display: flex; flex-basis: 100%; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
html body.owner-redesign:not(.owner-classic) .tag-filter-scroll .tag-option { flex-shrink: 0; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; padding: 6px 12px; min-height: 44px; }
html body.owner-redesign:not(.owner-classic) .tag-chip { flex-shrink: 0; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }

html body.owner-redesign .modal-overlay { z-index: 200; }
html body.owner-redesign .modal-box { display: flex; flex-direction: column; max-height: calc(100dvh - 32px); border-radius: 12px; }
html body.owner-redesign .modal-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
html body.owner-redesign .modal-actions { flex-shrink: 0; background: #fff; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
html body.owner-redesign.page-index .modal-box input:not([type="file"]),
html body.owner-redesign.page-index .modal-box select,
html body.owner-redesign.page-index .modal-box textarea {
  min-height: 48px; padding: 10px; font-size: 16px; border: 1px solid var(--border) !important; border-radius: 8px !important; background: #fff !important;
}
html body.owner-redesign .modal-product-image-source { min-height: 44px; }
html body.owner-redesign .listing-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
html body.owner-redesign .listing-tab { padding: 10px 5px; background: #fff; color: var(--text); border: 1px solid var(--border); font-size: 13px; }
html body.owner-redesign .listing-tab[aria-selected="true"] { background: #d8bd79; border-color: #b99653; }
html body.owner-redesign:not(.owner-classic) .form-section-title { margin: 26px 0 16px; padding-bottom: 8px; font-size: 18px; border-bottom: 1px solid #cbb684; }
html body.owner-redesign:not(.owner-classic) #consignmentForm { border: 0 !important; padding-top: 0; }
html body.owner-redesign:not(.owner-classic) .field { margin-bottom: 18px; }
html body.owner-redesign:not(.owner-classic) .field input:not([type="file"]),
html body.owner-redesign:not(.owner-classic) .field select,
html body.owner-redesign:not(.owner-classic) .field textarea { min-height: 48px; font-size: 16px; padding: 11px; }
html body.owner-redesign:not(.owner-classic) .field textarea { min-height: 96px; }
html body.owner-redesign .product-image-source-button { min-height: 44px; display: flex; align-items: center; padding: 8px; border-radius: 8px; }
html body.owner-redesign .submit,
html body.owner-redesign .manual-clear { width: 100%; margin-top: 10px; min-height: 48px; }
html body.owner-redesign .manual-clear { background: #fff; border: 1px solid #b99653; color: #80621f; }

html body.owner-redesign:not(.owner-classic) .history-controls { justify-content: center; gap: 6px; }
html body.owner-redesign:not(.owner-classic) .history-controls select { min-width: 0; flex: 1; max-width: 280px; }
html body.owner-redesign:not(.owner-classic) .month-step { width: 44px; flex-shrink: 0; background: #fff; border: 1px solid var(--border); color: var(--text); }
html body.owner-redesign:not(.owner-classic) .history-list { display: grid; gap: 10px; margin-top: 12px; }
html body.owner-redesign:not(.owner-classic).page-sales-history .section-heading { display: flex; justify-content: space-between; align-items: baseline; }
html body.owner-redesign:not(.owner-classic).page-sales-history .error-bar + .product-all-link { justify-content: flex-start; min-height: 32px; margin-bottom: 12px; background: transparent !important; color: var(--text-muted) !important; font-size: 12px; }

html body.owner-redesign .history-filter { margin: 12px 0; padding: 10px; background: #fff; border: 1px solid var(--border); border-radius: 8px; }
html body.owner-redesign .history-filter summary { cursor: pointer; min-height: 24px; }
html body.owner-redesign .history-filter-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 12px; }
html body.owner-redesign .history-filter-fields label { min-width: 0; font-size: 12px; }
html body.owner-redesign .history-filter-fields input { width: 100%; min-width: 0; min-height: 44px; }
html body.owner-redesign:not(.owner-classic) .dashboard-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
html body.owner-redesign:not(.owner-classic) .kpi-hero { background: #fff !important; border-radius: 10px !important; margin: 0; padding: 14px; }
html body.owner-redesign:not(.owner-classic) .payout-hero { background: #16594f !important; border: 1px solid #16594f !important; border-radius: 10px; padding: 14px; color: #fff; }
html body.owner-redesign:not(.owner-classic) .payout-hero .m-label,
html body.owner-redesign:not(.owner-classic) .payout-hero .m-value,
html body.owner-redesign:not(.owner-classic) .payout-hero .m-sub,
html body.owner-redesign:not(.owner-classic) .payout-hero .m-unit { color: #fff !important; }
html body.owner-redesign:not(.owner-classic) .kpi-hero .k-value,
html body.owner-redesign:not(.owner-classic) .payout-hero .m-value { font-size: clamp(24px, 7vw, 38px); line-height: 1.2; overflow-wrap: anywhere; }
html body.owner-redesign:not(.owner-classic) .kpi-hero .k-label,
html body.owner-redesign:not(.owner-classic) .payout-hero .m-label { font-size: 12px; }
html body.owner-redesign:not(.owner-classic) .kpi-hero .hero-orders { border: 0 !important; padding: 8px 0 0; margin: 0; box-shadow: none !important; }
html body.owner-redesign:not(.owner-classic) .hero-orders .m-label { font-size: 10px; }
html body.owner-redesign:not(.owner-classic) .hero-orders .m-value { font-size: 20px; }
html body.owner-redesign:not(.owner-classic) .hero-orders #kpiOrdersRange { display: none; }
html body.owner-redesign:not(.owner-classic) #kpiRow { display: block; }
html body.owner-redesign:not(.owner-classic) .product-status-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--border); border-radius: 10px; background: #fff; overflow: hidden; }
html body.owner-redesign:not(.owner-classic) .product-status-card { padding: 12px 8px !important; border-bottom: 0 !important; border-right: 1px solid var(--border) !important; min-width: 0; }
html body.owner-redesign:not(.owner-classic) .product-status-value strong { font-size: 27px; }
html body.owner-redesign:not(.owner-classic) .product-status-label { font-size: 12px; }
html body.owner-redesign:not(.owner-classic) .product-status-sub { font-size: 10px; overflow-wrap: anywhere; }
html body.owner-redesign:not(.owner-classic) .dashboard-insights { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
html body.owner-redesign:not(.owner-classic) .dashboard-insights .metric-tile { margin: 0; padding: 12px; }
html body.owner-redesign .owner-disclosure { border: 1px solid var(--border); border-radius: 10px; background: #fff; padding: 12px; margin: 14px 0; }
html body.owner-redesign .owner-disclosure > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 700; }
html body.owner-redesign .owner-disclosure > summary::after { content: '＋'; }
html body.owner-redesign .owner-disclosure[open] > summary::after { content: '−'; }
/* Sales report: the blocks that used to fold are open all the time, a card under a plain title. */
html body.owner-redesign .owner-section { border: 1px solid var(--border); border-radius: 10px; background: #fff; padding: 12px; margin: 14px 0; }
html body.owner-redesign .owner-section > .owner-section__title { min-height: 32px; display: flex; align-items: center; margin: 0 0 6px; font-size: 14px; font-weight: 700; }
html body.owner-redesign:not(.owner-classic) .metric-tile.trend-card { padding: 16px; margin-top: 18px; }
html body.owner-redesign:not(.owner-classic) .table-wrap { overflow-x: auto; }
html body.owner-redesign:not(.owner-classic) .owner-settlement { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-top: 18px; }
html body.owner-redesign:not(.owner-classic) .owner-settlement .sec-title { margin-top: 0; }
html body.owner-redesign:not(.owner-classic) .owner-settlement .owner-section { margin-bottom: 0; border: 0; padding: 0; }
html body.owner-redesign:not(.owner-classic) #cardPanel { text-align: center; padding: 20px 12px; }
html body.owner-redesign:not(.owner-classic) .qr-wrap { padding: 20px; margin: 0 auto 20px; max-width: 100%; width: fit-content; background: #fff !important; border: 0; box-shadow: none; }
html body.owner-redesign:not(.owner-classic) #qrcode { width: 100%; max-width: 256px; }
html body.owner-redesign:not(.owner-classic) #qrcode img,
html body.owner-redesign:not(.owner-classic) #qrcode canvas { max-width: 100%; height: auto; }
html body.owner-redesign:not(.owner-classic) .countdown { font-size: 16px; margin: 14px 0; color: var(--text); }
html body.owner-redesign:not(.owner-classic) .countdown.is-warning { color: #a24519; }
html body.owner-redesign:not(.owner-classic) .meta { font-size: 12px; line-height: 1.8; }
html body.owner-redesign:not(.owner-classic) #errorRetryButton { margin-top: 10px; width: 100%; }
@media (max-width: 359px) {
  html body.owner-redesign:not(.owner-classic) main { padding-left: 10px; padding-right: 10px; }
  
  
  html body.owner-redesign:not(.owner-classic) .dashboard-hero-grid { gap: 6px; }
  html body.owner-redesign:not(.owner-classic) .kpi-hero, html body.owner-redesign:not(.owner-classic) .payout-hero { padding: 10px; }
}

/* SVG icon sizing and compact controls shared by the mock screens. */
html body.owner-redesign .owner-icon { width: 22px; height: 22px; flex: 0 0 auto; vertical-align: middle; }

html body.owner-redesign .app-footer-refresh__button,
html body.owner-redesign .submit,
html body.owner-redesign .manual-clear { display: flex; align-items: center; justify-content: center; gap: 10px; }
html body.owner-redesign .app-footer-refresh__button::before { content: none; }
html body.owner-redesign .owner-search { position: relative; margin: 8px 0 10px; }
html body.owner-redesign .owner-search > .owner-icon { position: absolute; left: 12px; top: 11px; color: #777b81; pointer-events: none; }
html body.owner-redesign:not(.owner-classic) main .owner-search input { padding-left: 42px !important; font-weight: 400; min-height: 44px; }
html body.owner-redesign #itemSearch,
html body.owner-redesign #historySearch { padding-left: 42px !important; }
html body.owner-redesign main input::placeholder,
html body.owner-redesign main textarea::placeholder { color: #91959b; opacity: 1; }
html body.owner-redesign:not(.owner-classic) .owner-chip-rail { display: flex; align-items: center; gap: 2px; min-width: 0; width: 100%; }
html body.owner-redesign:not(.owner-classic) .owner-chip-step { width: 28px; min-width: 28px; min-height: 44px; border: 0; color: var(--text); background: transparent; padding: 0; }
html body.owner-redesign:not(.owner-classic) .owner-chip-step .owner-icon { width: 26px; height: 26px; padding: 5px; border: 1px solid var(--border); border-radius: 50%; background: #fff; }
html body.owner-redesign:not(.owner-classic) .owner-chip-rail > .tabs,
html body.owner-redesign:not(.owner-classic) .owner-chip-rail > .tag-filter-scroll { flex: 1; min-width: 0; overflow: auto; scrollbar-width: none; margin: 0; flex-wrap: nowrap; }
html body.owner-redesign:not(.owner-classic) .owner-chip-rail > .tabs::-webkit-scrollbar,
html body.owner-redesign:not(.owner-classic) .tag-filter-scroll::-webkit-scrollbar { display: none; }
html body.owner-redesign:not(.owner-classic) .owner-chip-rail .tab-button { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0; flex: 0 0 auto; box-shadow: none !important; min-width: 60px; font-size: 12px; font-weight: 500; line-height: 1.5; }
html body.owner-redesign .owner-chip-rail .tab-button.active,
html body.owner-redesign .listing-tab[aria-selected="true"],
html body.owner-redesign .tag-option[aria-pressed="true"] { background: #ab8a32 !important; color: #fff !important; border-color: #ab8a32 !important; }
html body.owner-redesign:not(.owner-classic) .chip-count { font-size: 13px; font-weight: 500; }

html body.owner-redesign:not(.owner-classic) .inventory-filters { margin-bottom: 8px; }
html body.owner-redesign:not(.owner-classic) .inventory-filter-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 10px 0; gap: 6px; max-width: none; }
/* Two equal buttons, so neither the period nor the sort label is squeezed and cut off. */
html body.owner-redesign:not(.owner-classic) .inventory-filter-toolbar > * { width: 100%; min-width: 0; }
html body.owner-redesign:not(.owner-classic) .inventory-filter-toolbar > .owner-sort-control { position: relative; }
html body.owner-redesign:not(.owner-classic) .owner-sort-control > .owner-icon { position: absolute; top: 11px; left: 9px; width: 18px; pointer-events: none; }
html body.owner-redesign:not(.owner-classic) main .owner-sort-control select { width: 100%; font-size: 12px; padding-left: 32px !important; min-height: 44px; }
html body.owner-redesign:not(.owner-classic) #dateFilterButton { display: flex; align-items: center; gap: 5px; min-height: 44px; border-color: var(--border) !important; color: var(--text) !important; font-size: 11px; }
html body.owner-redesign:not(.owner-classic) #dateFilterButton > .owner-icon { width: 18px; }
html body.owner-redesign:not(.owner-classic) .owner-filter-title { display: flex; gap: 6px; align-items: center; color: var(--text); margin: 8px 0 4px; font-size: 14px; }
html body.owner-redesign:not(.owner-classic) .owner-filter-title .owner-icon { width: 16px; height: 16px; }
html body.owner-redesign:not(.owner-classic) .panel.item-filters { margin-bottom: 6px; }
html body.owner-redesign:not(.owner-classic) #majorTabs:has(> :only-child) { display: none; }
html body.owner-redesign:not(.owner-classic) .tag-filter { position: relative; display: block; margin-top: 6px; }
html body.owner-redesign:not(.owner-classic) .tag-filter__label { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 700; color: var(--text); }
html body.owner-redesign:not(.owner-classic) .tag-filter .tag-option { min-height: 34px; padding: 5px 12px; background: #fff !important; border: 1px solid var(--border) !important; color: var(--text) !important; font-size: 12px; border-radius: 8px; }
html body.owner-redesign:not(.owner-classic) .tag-filter-tools { text-align: right; font-size: 11px; margin: 4px 0; }
html body.owner-redesign:not(.owner-classic) .tag-filter-tools summary { color: var(--text-muted); cursor: pointer; min-height: 28px; }
html body.owner-redesign:not(.owner-classic) .tag-filter-tools[open] { padding: 8px; background: #fff; border: 1px solid var(--border); border-radius: 8px; }
html body.owner-redesign:not(.owner-classic) .tag-filter-tools .tag-filter__hint { display: block; margin-top: 6px; }
html body.owner-redesign:not(.owner-classic) .section-heading { margin: 12px 0 6px; }
html body.owner-redesign:not(.owner-classic) .section-heading .section-count { color: var(--text) !important; font-size: 14px; font-weight: 700; }

/* Listing: full-size field labels, photo tile and restrained outlined controls. */
html body.owner-redesign .listing-tab { min-height: 44px; font-size: 14px; font-weight: 500; }
html body.owner-redesign:not(.owner-classic) .field { margin-bottom: 24px; }
html body.owner-redesign:not(.owner-classic) .field > label { font-size: 15px; color: var(--text); font-weight: 700; margin-bottom: 8px; }
html body.owner-redesign:not(.owner-classic) .field .required { color: #c52235 !important; font-size: 12px; font-weight: 500; background: transparent !important; }
html body.owner-redesign:not(.owner-classic) .field textarea { min-height: 98px; }
html body.owner-redesign:not(.owner-classic) .field .hint { color: #7b7e84; font-size: 11px; line-height: 1.6; margin-top: 5px; }
html body.owner-redesign:not(.owner-classic) .form-section-title { font-size: 21px; margin-top: 28px; color: var(--text); border-bottom-color: #ad8b33; }
html body.owner-redesign:not(.owner-classic) .field-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
html body.owner-redesign:not(.owner-classic) .field-pair > .field { min-width: 0; }
html body.owner-redesign .product-image-row { display: flex; align-items: center; margin: 12px 0; gap: 14px; }
html body.owner-redesign .product-image-thumb { width: 120px; height: 130px; flex: 0 0 120px; border: 1px dashed #9c9d9d; border-radius: 8px; background: #f4f3ef; }
html body.owner-redesign .product-image-empty { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; color: #484d55; font-size: 13px; padding: 10px; }
html body.owner-redesign .product-image-empty .owner-icon { width: 30px; height: 30px; }
html body.owner-redesign .product-image-empty small { font-size: 10px; text-align: center; }
html body.owner-redesign .product-image-preview { width: 120px; height: 130px; object-fit: contain; }
html body.owner-redesign .product-image-source-actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 8px; }
html body.owner-redesign .product-image-source-button { display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--text) !important; background: #fff !important; border: 1px solid var(--border) !important; padding: 10px 5px; font-size: 13px; font-weight: 500; min-height: 46px; }
html body.owner-redesign .product-image-field > .owner-disclosure { padding: 0; border: 0; background: transparent; margin: 7px 0 0; }
html body.owner-redesign .product-image-field > .owner-disclosure > summary { font-size: 11px; min-height: 32px; color: var(--text-muted); font-weight: 400; }
html body.owner-redesign:not(.owner-classic) .case-contents-open { min-height: 36px; font-size: 12px; padding: 5px 8px; background: #f7f2e4 !important; }
html body.owner-redesign .rank-guide summary { padding: 8px 10px; background: #f7f2e4; border-radius: 8px; font-size: 13px; color: #967323; }
html body.owner-redesign:not(.owner-classic) .tag-field__label { display: block; font-size: 21px; color: var(--text); padding-bottom: 8px; border-bottom: 1px solid #ad8b33; }
html body.owner-redesign:not(.owner-classic) .tag-field__help { font-size: 11px; color: var(--text-muted); }
html body.owner-redesign:not(.owner-classic) .tag-picker { background: transparent !important; border: 0 !important; padding: 8px 0 !important; }
html body.owner-redesign:not(.owner-classic) .tag-picker__label { font-size: 13px; }
html body.owner-redesign .submit { min-height: 56px; font-size: 18px; background: #16594f !important; color: #fff !important; }
html body.owner-redesign .manual-clear { min-height: 52px; font-size: 15px; }

/* History: four headline values and the same compact product cards. */

html body.owner-redesign:not(.owner-classic) .history-controls { margin: 10px 0 8px; justify-content: space-between; }
html body.owner-redesign:not(.owner-classic) .owner-month-selector { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 24px; width: 80%; max-width: 360px; margin: 0 auto; background: #fff; overflow: hidden; }
html body.owner-redesign:not(.owner-classic) main .owner-month-selector select { appearance: none; border: 0 !important; font-size: 16px; font-weight: 700; text-align: center; width: 100%; }
html body.owner-redesign:not(.owner-classic) .owner-month-selector .month-step { border: 0; width: 40px; flex: 0 0 40px; padding: 0; }
html body.owner-redesign:not(.owner-classic) .history-controls > label { width: 40px; height: 44px; border: 1px solid var(--border); border-radius: 8px; display: grid; place-items: center; color: var(--text); cursor: pointer; }
html body.owner-redesign .history-filter { padding: 0; border: 0; background: transparent; }
html body.owner-redesign .history-filter > summary { display: flex; align-items: center; justify-content: center; gap: 6px; margin-left: auto; width: 110px; min-height: 42px; border: 1px solid var(--border); border-radius: 8px; background: #fff; font-size: 13px; font-weight: 700; }
html body.owner-redesign .history-filter[open] { border: 1px solid var(--border); padding: 10px; border-radius: 8px; background: #fff; }
html body.owner-redesign .history-filter-fields input { font-size: 14px; }
html body.owner-redesign:not(.owner-classic) .history-month { margin-top: 10px; }
html body.owner-redesign:not(.owner-classic) .history-month .sec-title { margin: 8px 0 0; }
html body.owner-redesign:not(.owner-classic) .history-month .sec-title h2 { font-size: 13px !important; }
html body.owner-redesign:not(.owner-classic) .history-month__meta { font-size: 10px; }

/* Dashboard: strong amounts, gold section icons, green payout and ring gauge. */
html body.owner-redesign:not(.owner-classic).page-sales:not(.page-sales-history) .dashboard-hero-grid { margin-top: 6px; }
html body.owner-redesign:not(.owner-classic) .kpi-hero,
html body.owner-redesign:not(.owner-classic) .payout-hero { position: relative; padding: 14px 11px; min-height: 154px; overflow: hidden; }
html body.owner-redesign:not(.owner-classic) .kpi-hero .k-label,
html body.owner-redesign:not(.owner-classic) .payout-hero .m-label { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 12px; line-height: 1.5; font-weight: 500; }
html body.owner-redesign:not(.owner-classic) .kpi-hero .k-label { color: #966c12 !important; }
html body.owner-redesign:not(.owner-classic) .kpi-hero .k-label .owner-icon,
html body.owner-redesign:not(.owner-classic) .payout-hero .m-label .owner-icon { width: 22px; color: #bb953a; }
html body.owner-redesign:not(.owner-classic) .kpi-hero .k-value,
html body.owner-redesign:not(.owner-classic) .payout-hero .m-value { font-family: 'Bebas Neue', 'Noto Sans JP', sans-serif; font-size: clamp(42px,14vw,64px); font-weight: 400; color: #956609; white-space: nowrap; overflow-wrap: normal; }
html body.owner-redesign:not(.owner-classic) .kpi-hero .k-value::before,
html body.owner-redesign:not(.owner-classic) .payout-hero .m-value::before { content: '¥'; font-size: .65em; vertical-align: .08em; margin-right: 2px; }
html body.owner-redesign:not(.owner-classic) .kpi-hero .k-value-row > .k-unit,
html body.owner-redesign:not(.owner-classic) .payout-hero .m-value-row > .m-unit { display: none; }
html body.owner-redesign:not(.owner-classic) .hero-orders .m-value-row { gap: 6px; align-items: center; margin-top: 3px; }
html body.owner-redesign:not(.owner-classic) .hero-orders .m-value { color: var(--text); font-size: 19px; font-family: inherit; }
html body.owner-redesign:not(.owner-classic) .hero-orders .m-unit { font-size: 13px; color: var(--text); }
html body.owner-redesign:not(.owner-classic) .hero-orders .owner-icon { color: #ab8424; width: 21px; }
html body.owner-redesign:not(.owner-classic) .hero-fee-note { color: #7a7770; font-size: 9px; display: block; margin-top: 4px; }
html body.owner-redesign:not(.owner-classic) .payout-hero { background: #177565 !important; border-color: #177565 !important; }
html body.owner-redesign:not(.owner-classic) .payout-date { display: flex; align-items: center; gap: 5px; margin-top: 8px; position: relative; z-index: 1; }
html body.owner-redesign:not(.owner-classic) .payout-date > .owner-icon { color: #e6d296; width: 20px; }
html body.owner-redesign:not(.owner-classic) .payout-date .m-sub { font-size: 11px; margin: 0; }
html body.owner-redesign:not(.owner-classic) .hero-watermark { position: absolute; width: 65px; height: 65px; right: 5px; bottom: 6px; color: #fff; opacity: .14; transform: rotate(-12deg); }
html body.owner-redesign:not(.owner-classic) .owner-status-caption { font-size: 11px; margin: 8px 0 5px; }
html body.owner-redesign:not(.owner-classic) .owner-status-caption h2 { font-size: 11px !important; font-weight: 500; }
html body.owner-redesign:not(.owner-classic) .product-status-grid { margin-top: 8px; }
html body.owner-redesign:not(.owner-classic) .product-status-card { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 12px 8px 12px 32px !important; border: 0 !important; border-right: 1px solid var(--border) !important; background: #fff !important; border-radius: 0 !important; box-shadow: none; }
html body.owner-redesign:not(.owner-classic) .product-status-card:last-child { border-right: 0 !important; }
html body.owner-redesign:not(.owner-classic) .product-status-card .status-icon { position: absolute; left: 8px; top: 12px; width: 20px; height: 20px; color: #ab8424; }
html body.owner-redesign:not(.owner-classic) .product-status-card.sold .status-icon { color: #18844e; }
html body.owner-redesign:not(.owner-classic) .product-status-card.hold .status-icon { color: var(--text); }
html body.owner-redesign:not(.owner-classic) .product-status-card .status-chevron { position: absolute; right: 3px; top: 39px; width: 12px; color: #a47b1c; }
html body.owner-redesign:not(.owner-classic) .product-status-label { color: var(--text); font-size: 12px; font-weight: 500; }
html body.owner-redesign:not(.owner-classic) .product-status-value { color: var(--text); font-size: 11px; }
html body.owner-redesign:not(.owner-classic) .product-status-value strong { font-size: 34px; font-weight: 400; }
html body.owner-redesign:not(.owner-classic) .product-status-card.on-sale .product-status-value { color: #956609; }
html body.owner-redesign:not(.owner-classic) .product-status-action { position: absolute; inset: 0; font-size: 0; }
html body.owner-redesign:not(.owner-classic) .product-status-sub { grid-column: auto; font-size: 8px; }
html body.owner-redesign:not(.owner-classic) .owner-all-products { margin: 5px 0 0; padding: 0; background: transparent !important; border: 0; min-height: 24px; font-size: 10px; text-align: right; }
html body.owner-redesign:not(.owner-classic) .dashboard-insights { gap: 10px; margin: 10px 0; }
html body.owner-redesign:not(.owner-classic) .dashboard-insights .metric-tile { position: relative; min-height: 99px; padding: 10px; overflow: hidden; }
html body.owner-redesign:not(.owner-classic) .dashboard-insights .m-label { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text); }
html body.owner-redesign:not(.owner-classic) .dashboard-insights .m-label .owner-icon { color: #ad8122; width: 20px; }
html body.owner-redesign:not(.owner-classic) .dashboard-insights .m-value { font-size: 34px; font-weight: 400; color: #956609; }
html body.owner-redesign:not(.owner-classic) .dashboard-insights .m-value-row { padding-left: 24px; margin-top: 9px; }
html body.owner-redesign:not(.owner-classic) .dashboard-insights .gauge { display: none; }
html body.owner-redesign:not(.owner-classic) .owner-rate-ring { --rate: 0%; position: absolute; right: 10px; bottom: 14px; width: 48px; height: 48px; border-radius: 50%; background: conic-gradient(#219160 var(--rate), #ebe9e4 0); }
html body.owner-redesign:not(.owner-classic) .owner-rate-ring::after { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: #fff; }
html body.owner-redesign:not(.owner-classic) .insight-watermark { position: absolute; right: 6px; bottom: 9px; width: 36px; height: 36px; color: #d8c692; }
html body.owner-redesign:not(.owner-classic) .metric-tile.trend-card { margin-top: 12px; padding: 12px; }
html body.owner-redesign:not(.owner-classic) #netTrendCard .m-label { display: flex; align-items: center; gap: 9px; font-size: 20px; font-weight: 700; color: var(--text); padding-bottom: 8px; border-bottom: 1px solid var(--border); }
html body.owner-redesign:not(.owner-classic) #netTrendCard .m-label .owner-icon { width: 24px; color: #ad8122; }
html body.owner-redesign:not(.owner-classic) #netTrendCard .m-label small { margin-left: auto; font-size: 11px; font-weight: 400; }
html body.owner-redesign:not(.owner-classic) .trend-bars { margin-top: 28px; height: 96px; gap: 14px; }
html body.owner-redesign:not(.owner-classic) .trend-bar { font-size: 12px; }
html body.owner-redesign:not(.owner-classic) .trend-bar__value { font-size: 12px; color: var(--text); }
html body.owner-redesign:not(.owner-classic) .owner-settlement { padding: 12px; margin-top: 12px; }
html body.owner-redesign:not(.owner-classic) .owner-settlement .sec-title { margin-bottom: 8px; }
html body.owner-redesign:not(.owner-classic) .owner-settlement .sec-title h2 { display: flex; align-items: center; gap: 8px; font-size: 20px !important; }
html body.owner-redesign:not(.owner-classic) .owner-settlement .sec-title h2 .owner-icon { width: 26px; color: #ad8122; }
html body.owner-redesign:not(.owner-classic) .owner-settlement table { font-size: 12px; }
html body.owner-redesign:not(.owner-classic) .owner-settlement th { font-size: 10px; padding: 8px 4px; color: #535961; }
html body.owner-redesign:not(.owner-classic) .owner-settlement td { padding: 10px 4px; font-size: 12px; }
html body.owner-redesign:not(.owner-classic) .owner-settlement .td-price { font-size: 13px; color: var(--text); }
html body.owner-redesign:not(.owner-classic) .owner-settlement .settle-badge { font-size: 10px; padding: 3px 5px; border-radius: 6px; }
html body.owner-redesign:not(.owner-classic) .settle-badge { display: inline-flex; align-items: center; gap: 4px; }
html body.owner-redesign:not(.owner-classic) .settle-badge .owner-icon { width: 14px; height: 14px; }

html body.owner-redesign:not(.owner-classic) .settle-badge.done { background: #eaf7f2 !important; border: 0 !important; color: #176345 !important; }
html body.owner-redesign:not(.owner-classic) .owner-settlement .settlement-month-link { text-decoration: none !important; }
html body.owner-redesign:not(.owner-classic) .tag-insights > .owner-section { background: #eff7f4; border-color: #c7dcd4; color: #16594f; }
html body.owner-redesign:not(.owner-classic) .tag-insights .owner-section__title { display: grid; grid-template-columns: 28px 1fr; gap: 2px 8px; font-size: 17px; }
html body.owner-redesign:not(.owner-classic) .tag-insights .owner-section__title .owner-icon { grid-row: 1 / 3; width: 28px; height: 28px; }
html body.owner-redesign:not(.owner-classic) .tag-insights .owner-section__title small { grid-column: 2; font-size: 11px; font-weight: 400; color: #69716d; }
@media (max-width: 359px) {
  
  
  
  
  html body.owner-redesign:not(.owner-classic) .kpi-hero .k-value,
  html body.owner-redesign:not(.owner-classic) .payout-hero .m-value { font-size: 44px; }
  html body.owner-redesign:not(.owner-classic) .kpi-hero .k-label,
  html body.owner-redesign:not(.owner-classic) .payout-hero .m-label { font-size: 11px; gap: 2px; }
  html body.owner-redesign:not(.owner-classic) .product-status-card { padding-left: 26px !important; }
  html body.owner-redesign:not(.owner-classic) .product-status-card .status-icon { left: 5px; width: 17px; }
  html body.owner-redesign:not(.owner-classic) .product-status-value strong { font-size: 29px; }
  html body.owner-redesign:not(.owner-classic) .owner-rate-ring { width: 37px; height: 37px; right: 5px; }
  html body.owner-redesign:not(.owner-classic) .insight-watermark { width: 32px; height: 32px; right: 4px; }
  html body.owner-redesign:not(.owner-classic) .dashboard-insights .m-value-row { padding-left: 8px; }
  html body.owner-redesign:not(.owner-classic) .dashboard-insights .m-label { font-size: 10px; gap: 2px; }
  html body.owner-redesign:not(.owner-classic) .field-pair { gap: 8px; }
  html body.owner-redesign:not(.owner-classic) .field-pair label { font-size: 13px; }
}

/* ══ Alignment with the adopted mocks (gorimaru_adopted_mocks, 2026-10-06) ══ */

/* Primary actions are gold, as in the mock's 登録する button; the green stays for the payout card. */

/* Dashboard: the on-sale amount sits under its label instead of wrapping in the middle of the number. */
html body.owner-redesign:not(.owner-classic) .product-status-sub { line-height: 1.5; }
html body.owner-redesign:not(.owner-classic) .product-status-sub b { white-space: nowrap; }

/* Rank: the select's grades as one-tap buttons; the select itself stays underneath, transparent, as the source of truth. */
html body.owner-redesign .rank-control { position: relative; }
html body.owner-redesign .rank-control > select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
/* The grades are one joined bar, best to worst; the chosen grade is filled gold. Under it: the two ends and the chosen grade in words. */
html body.owner-redesign .rank-buttons { display: grid; grid-template-columns: repeat(var(--rank-count, 6), minmax(0, 1fr)); gap: 0; border: 1px solid #cdbb8a; border-radius: 8px; overflow: hidden; background: #fff; }
html body.owner-redesign .rank-buttons.is-loading { display: block; border: 0; }
html body.owner-redesign .rank-buttons__loading { display: block; padding: 12px 0; color: var(--text-muted); font-size: 13px; }
html body.owner-redesign .rank-buttons .rank-button {
  min-width: 0; min-height: 46px; padding: 0; border: 0 !important; border-right: 1px solid #e3d9bd !important; border-radius: 0 !important;
  background: #fff !important; color: #7a5a0f !important; font-size: 15px; font-weight: 500;
}
html body.owner-redesign .rank-buttons .rank-button:last-child { border-right: 0 !important; }
html body.owner-redesign .rank-buttons .rank-button:focus-visible { outline-offset: -3px; }
html body.owner-redesign .rank-buttons .rank-button[aria-checked="true"] { background: #ab8a32 !important; color: #fff !important; font-weight: 700; }
html body.owner-redesign .rank-scale { display: flex; justify-content: space-between; margin-top: 4px; color: #55524b; font-size: 11px; line-height: 1.4; }
html body.owner-redesign .rank-selected { margin: 8px 0 0; color: var(--text); font-size: 13px; line-height: 1.5; }
html body.owner-redesign .rank-selected:empty { display: none; }

/* Digital member card: gold double-frame card, countdown with progress bar, notice box, pill refresh button. */
html body.owner-redesign:not(.owner-classic).page-member-card #cardPanel { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; text-align: center; }
html body.owner-redesign:not(.owner-classic) .card-frame,
html body.owner-redesign:not(.owner-classic) .card-error-frame:has(#error:not(.hidden)) {
  padding: 18px; border: 1px solid #c9ac64; border-radius: 16px; background: #fffdf8;
  box-shadow: inset 0 0 0 5px #fffdf8, inset 0 0 0 6px #c9ac6480, 0 2px 8px #25242208;
}
html body.owner-redesign:not(.owner-classic).page-member-card .qr-wrap { position: relative; margin: 0 auto 14px; border: 1px solid #efe6cc; border-radius: 12px; }
html body.owner-redesign:not(.owner-classic) .countdown-box { padding: 14px 14px 12px; border-radius: 12px; background: #f6f1e3; text-align: center; }
html body.owner-redesign:not(.owner-classic) .countdown-box .countdown { margin: 0 0 10px; font-family: inherit; font-size: 15px; line-height: 1.2; color: var(--text); }
html body.owner-redesign:not(.owner-classic) .countdown #remain { margin: 0 3px 0 6px; font-family: 'Bebas Neue', 'Noto Sans JP', sans-serif; font-size: 46px; font-weight: 700; color: #956609; vertical-align: -.1em; }
html body.owner-redesign:not(.owner-classic) .countdown-bar { height: 8px; overflow: hidden; border-radius: 4px; background: #e6dfc9; }
html body.owner-redesign:not(.owner-classic) #countdownBar { display: block; width: 100%; height: 100%; border-radius: 4px; background: #b99653; transition: width 1s linear; }
html body.owner-redesign:not(.owner-classic) .countdown-note { margin: 8px 0 0; font-size: 12px; color: var(--text-muted); }
/* Running out: the number and the bar turn red. */
html body.owner-redesign:not(.owner-classic) .countdown.is-warning,
html body.owner-redesign:not(.owner-classic) .countdown.is-warning #remain { color: #d2452b; }
html body.owner-redesign:not(.owner-classic) .countdown-box:has(.is-warning) #countdownBar { background: #d9492f; }
html body.owner-redesign:not(.owner-classic).page-member-card .meta { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; align-items: center; margin: 14px 0 0; padding: 12px 14px; border: 1px solid #e6dbb7; border-radius: 10px; background: #fbf7ea; text-align: left; line-height: 1.5; }
html body.owner-redesign:not(.owner-classic).page-member-card .meta::before { content: '!'; display: grid; place-items: center; grid-row: 1 / 3; width: 28px; height: 28px; border-radius: 50%; background: #ab8a32; color: #fff; font-size: 17px; font-weight: 700; }
html body.owner-redesign:not(.owner-classic).page-member-card .meta strong { font-size: 14px; color: #6d5316; }
html body.owner-redesign:not(.owner-classic).page-member-card .meta span { font-size: 11px; color: var(--text-muted); }
html body.owner-redesign:not(.owner-classic).page-member-card #refreshButton {
  display: flex !important; align-items: center; justify-content: center; gap: 8px; width: auto !important; min-width: 220px; min-height: 48px;
  margin: 16px auto 0; padding: 10px 28px !important; border: 1.5px solid #b99653 !important; border-radius: 999px !important;
  background: #fff !important; color: #80621f !important; font-size: 15px; font-weight: 700;
}
html body.owner-redesign:not(.owner-classic).page-member-card #refreshButton:hover:not(:disabled) { background: #fbf6e6 !important; }
/* Refreshing: the card stays, the old code is replaced by a spinner and the lower part is dimmed. */
html body.owner-redesign:not(.owner-classic) .qr-status { display: none; }
html body.owner-redesign:not(.owner-classic) #cardPanel.is-refreshing #qrcode { display: none; }
html body.owner-redesign:not(.owner-classic) #cardPanel.is-refreshing .qr-wrap { flex-direction: column; gap: 14px; box-sizing: border-box; width: min(calc(var(--qr-size, 256px) + 42px), 100%); min-height: calc(var(--qr-size, 256px) + 42px); }
html body.owner-redesign:not(.owner-classic) #cardPanel.is-refreshing .qr-wrap::before { content: ''; width: 44px; height: 44px; border: 4px solid #e8dfc6; border-top-color: #ab8a32; border-radius: 50%; animation: owner-spin 1s linear infinite; }
html body.owner-redesign:not(.owner-classic) #cardPanel.is-refreshing .qr-status { display: block; max-width: 14em; font-size: 13px; line-height: 1.6; color: var(--text-muted); }
html body.owner-redesign:not(.owner-classic) #cardPanel.is-refreshing .countdown-box,
html body.owner-redesign:not(.owner-classic) #cardPanel.is-refreshing .meta { opacity: .55; }
html body.owner-redesign:not(.owner-classic) #cardPanel.is-refreshing #countdownBar { width: 0 !important; }
@keyframes owner-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  html body.owner-redesign:not(.owner-classic) #cardPanel.is-refreshing .qr-wrap::before { animation: none; }
  html body.owner-redesign:not(.owner-classic) #countdownBar { transition: none; }
}
/* Error: a card with a red mark, the headline, guidance, a gold retry button and a way back. */
html body.owner-redesign:not(.owner-classic).page-member-card #error { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--text-muted); font-size: 13px; line-height: 1.6; text-align: center; }
html body.owner-redesign:not(.owner-classic).page-member-card #error.hidden { display: none !important; }
html body.owner-redesign:not(.owner-classic).page-member-card #error::before { content: '!'; display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; border-radius: 50%; background: #d8402b; color: #fff; font-size: 28px; font-weight: 700; }
html body.owner-redesign:not(.owner-classic).page-member-card #error strong { font-size: 16px; color: #c0361f; }
html body.owner-redesign:not(.owner-classic).page-member-card #errorRetryButton { display: block; width: 100%; margin: 14px 0 0; border: 0 !important; border-radius: 999px !important; background: #9a7a23 !important; color: #fff !important; font-weight: 700; }
html body.owner-redesign:not(.owner-classic).page-member-card #errorBackButton { display: block; width: 100%; margin: 10px 0 0; border: 1.5px solid #b99653 !important; border-radius: 999px !important; background: #fff !important; color: #80621f !important; font-weight: 700; }
html body.owner-redesign:not(.owner-classic).page-member-card #errorRetryButton[hidden],
html body.owner-redesign:not(.owner-classic).page-member-card #errorBackButton[hidden] { display: none !important; }

/* ══ Back to the earlier look (requested 2026-10-06) ══ */

/* Listing form: lined inputs as before, camera and register buttons in teal. */
html body.owner-redesign:not(.owner-classic).page-newitem-addition main .field input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
html body.owner-redesign:not(.owner-classic).page-newitem-addition main .field select,
html body.owner-redesign:not(.owner-classic).page-newitem-addition main .field textarea,
html body.owner-redesign:not(.owner-classic).page-newitem-addition main .tag-picker input {
  border: 0 !important; border-bottom: 1px solid #d9d3c6 !important; border-radius: 0 !important; background: transparent !important;
  padding-left: 0 !important; padding-right: 0 !important;
}
html body.owner-redesign:not(.owner-classic).page-newitem-addition main .field input:focus,
html body.owner-redesign:not(.owner-classic).page-newitem-addition main .field select:focus,
html body.owner-redesign:not(.owner-classic).page-newitem-addition main .field textarea:focus { border-bottom-color: #8a6d2f !important; }
html body.owner-redesign .product-image-camera-button { border-color: var(--teal) !important; background: var(--teal) !important; color: #f3eee2 !important; }
html body.owner-redesign .product-image-camera-button:hover { border-color: var(--teal-hover) !important; background: var(--teal-hover) !important; }
/* The edit dialog's photo buttons look like the listing form's (icon first, camera in teal), but side by side on one row; below 360px the icons give way. */
html body.owner-redesign .modal-product-image-sources { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
html body.owner-redesign .modal-product-image-source { gap: 5px !important; min-height: 38px !important; padding: 4px 6px !important; border-color: var(--border); background: #fff; color: var(--text); font-size: 12px !important; font-weight: 500; white-space: nowrap; }
html body.owner-redesign .modal-product-image-source svg { width: 16px !important; height: 16px !important; flex: none; }
@media (max-width: 359px) { html body.owner-redesign .modal-product-image-source svg { display: none; } }
@media (max-width: 379px) { html body.owner-redesign .modal-product-image-source { font-size: 11px !important; } }   /* keeps both buttons inside the dialog at 320-379px */
html body.owner-redesign .modal-product-image-camera { border-color: var(--teal); background: var(--teal); color: #f3eee2; }
html body.owner-redesign .modal-product-image-camera:hover { border-color: var(--teal-hover); background: var(--teal-hover); }

/* Digital member card: the QR shrinks with the screen height so the whole card fits without scrolling. */
html body.owner-redesign:not(.owner-classic).page-member-card { --qr-size: clamp(130px, calc(100dvh - 615px), 256px); }
html body.owner-redesign:not(.owner-classic).page-member-card #qrcode { width: var(--qr-size); max-width: 100%; }
/* Shorter screens: tighter spacing and no caption lines, so the card still fits without scrolling. */
@media (max-height: 800px) {
  html body.owner-redesign:not(.owner-classic).page-member-card { --qr-size: clamp(130px, calc(100dvh - 505px), 256px); }
  html body.owner-redesign:not(.owner-classic).page-member-card main { padding-top: 8px; }
  html body.owner-redesign:not(.owner-classic) .card-frame { padding: 10px; }
  html body.owner-redesign:not(.owner-classic).page-member-card .qr-wrap { margin-bottom: 8px; padding: 20px; }
  html body.owner-redesign:not(.owner-classic) .countdown-box { padding: 8px 10px; }
  html body.owner-redesign:not(.owner-classic) .countdown-box .countdown { margin-bottom: 6px; }
  html body.owner-redesign:not(.owner-classic) .countdown #remain { font-size: 34px; }
  html body.owner-redesign:not(.owner-classic) .countdown-note { display: none; }
  html body.owner-redesign:not(.owner-classic).page-member-card .meta { margin-top: 8px; padding: 8px 12px; }
  html body.owner-redesign:not(.owner-classic).page-member-card .meta span { display: none; }
  html body.owner-redesign:not(.owner-classic).page-member-card #refreshButton { min-height: 44px; margin-top: 10px; padding-top: 6px !important; padding-bottom: 6px !important; }
}
html body.owner-redesign:not(.owner-classic).page-member-card .qr-wrap { min-height: 0; }

/* Sales history: the earlier KPI and card look; only the content comes from the redesign. */
html body.owner-redesign:not(.owner-classic) .owner-monthly-summary > h3 { margin: 14px 0 6px; font-size: 15px; color: var(--text); }
html body.owner-redesign:not(.owner-classic) .history-summary__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* Earlier header on very narrow screens: the logo gives way and the title may wrap. */
@media (max-width: 380px) {
  html body.owner-redesign .app-header .header-brand > div { min-width: 0; }
  html body.owner-redesign .app-header h1,
  html body.owner-redesign .app-header .sub { overflow-wrap: anywhere; }
}

/* ══ Item list, listing form and sales history keep their earlier layout (body.owner-classic); these are what they add ══ */
html body.owner-redesign.owner-classic { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
html body.owner-redesign.owner-classic .month-step { display: none; }
html body.owner-redesign.owner-classic .listing-tab[aria-selected="true"] { border-color: #ab8a32; background: #ab8a32; color: #fff; }
/* Compact product and sales cards (as in c03e571). */
html body.owner-redesign .items-grid { display: flex; flex-direction: column; gap: 10px !important; }
html body.owner-redesign .item-card {
  position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: start; gap: 10px;
  padding: 12px !important; border: 1px solid var(--border) !important; border-radius: 10px !important; background: #fff !important; opacity: 1 !important;
}
html body.owner-redesign .item-image,
html body.owner-redesign .item-no-image { width: 76px; min-width: 0; height: 84px; border-radius: 8px !important; object-fit: contain; background: #f7f6f2; }
html body.owner-redesign .item-name { padding-right: 32px; font-size: 14px; line-height: 1.5; margin: 0 0 4px; }
html body.owner-redesign .item-status-badges { margin: 0 0 4px; }
html body.owner-redesign .item-status-badge { border: 0 !important; border-radius: 5px !important; }
html body.owner-redesign .status-on-sale,
html body.owner-redesign .status-sold { color: #246345 !important; background: #e7f3e7 !important; }
html body.owner-redesign .status-pending { color: #826421 !important; background: #f9f0d7 !important; }
html body.owner-redesign .item-price-value { font-size: 17px; color: var(--text) !important; line-height: 1.4; border-bottom: 0; padding: 0; }
html body.owner-redesign .item-price-label { display: none; }
html body.owner-redesign .item-id { font-size: 11px; overflow-wrap: anywhere; }
html body.owner-redesign .item-compact-note { margin-top: 5px; padding-right: 44px; font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body.owner-redesign .item-details { grid-column: 1 / -1; background: #f8f6f0; padding: 10px; border-radius: 8px; font-size: 12px; overflow-wrap: anywhere; }
html body.owner-redesign .item-details .item-meta-list { margin: 0; }
html body.owner-redesign .item-details .item-tag-row { margin-top: 10px; }
html body.owner-redesign .history-item__main .item-status-badge { align-self: flex-start; padding: 2px 8px; font-size: 11px; }
html body.owner-redesign .history-item { grid-template-columns: 64px minmax(0, 1fr); padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff; gap: 10px; }
html body.owner-redesign .history-item__name { white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
html body.owner-redesign .history-item__id { overflow-wrap: anywhere; }
html body.owner-redesign .history-item__amounts { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
html body.owner-redesign .history-amount__value { white-space: normal; overflow-wrap: anywhere; }
html body.owner-redesign .history-detail { grid-column: 1 / -1; border-top: 1px solid var(--border); }
html body.owner-redesign .history-detail > summary { min-height: 44px; display: flex; align-items: center; justify-content: flex-end; cursor: pointer; color: var(--text-muted); font-size: 12px; }
html body.owner-redesign .history-detail > .history-item__amounts { padding: 10px; background: #f8f6f0; border-radius: 8px; gap: 12px; }
@media (max-width: 359px) {html body.owner-redesign .item-card { grid-template-columns: 62px minmax(0, 1fr); gap: 8px; }
html body.owner-redesign .item-image, html body.owner-redesign .item-no-image { width: 62px; height: 72px; }}
html body.owner-redesign .item-card { padding: 9px !important; gap: 9px; }
html body.owner-redesign .item-right { min-width: 0; }
html body.owner-redesign .item-body { position: relative; }
html body.owner-redesign .item-name { padding-right: 66px; font-size: 14px; font-weight: 500; line-height: 1.45; margin: 0 0 2px; }
html body.owner-redesign .item-status-badges { position: absolute; top: 0; right: 19px; max-width: 65px; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
html body.owner-redesign .item-status-badge { font-size: 10px; font-weight: 500; padding: 2px 6px; }
html body.owner-redesign .item-meta { display: flex; flex-direction: column; gap: 1px; }
html body.owner-redesign .item-price-value { order: 0; font-weight: 700; margin: 2px 0; }
html body.owner-redesign .item-id { order: 1; font-size: 11px; }
html body.owner-redesign .item-compact-note { display: flex; align-items: baseline; gap: 4px; margin: 2px 0 0; padding-right: 32px; min-height: 22px; }
html body.owner-redesign .compact-label { font-size: 9px; line-height: 1.5; background: #f0efeb; padding: 1px 4px; border-radius: 3px; }
html body.owner-redesign .compact-memo { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html body.owner-redesign .item-compact-note b { color: var(--text); font-size: 10px; }
html body.owner-redesign .item-details { margin-top: 0; padding: 8px 10px; }
html body.owner-redesign .owner-detail-list { margin: 0; }
html body.owner-redesign .owner-detail-list > div { display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 11px; }
html body.owner-redesign .owner-detail-list > div:last-child { border-bottom: 0; }
html body.owner-redesign .owner-detail-list dt { color: var(--text); }
html body.owner-redesign .owner-detail-list dd { margin: 0; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
html body.owner-redesign .history-item { position: relative; align-items: start; grid-template-columns: 76px minmax(0,1fr); padding: 9px; gap: 0 10px; }
html body.owner-redesign .history-item__thumb { width: 76px; height: 88px; border-radius: 6px; object-fit: contain; background: #f5f4f0; grid-row: 1; }
html body.owner-redesign .history-item__main { gap: 2px; }
html body.owner-redesign .history-item__main .item-status-badge { position: absolute; right: 10px; top: 9px; }
html body.owner-redesign .history-item__date { font-size: 11px; padding-right: 52px; }
html body.owner-redesign .history-item__name { font-size: 14px; font-weight: 500; padding-right: 0; line-height: 1.45; }
html body.owner-redesign .history-item__compact { display: flex; flex-wrap: wrap; gap: 3px 8px; padding-right: 15px; margin-top: 4px; }
html body.owner-redesign .history-item__compact .history-amount { flex-direction: row; gap: 4px; align-items: baseline; }
html body.owner-redesign .history-item__compact .history-amount__value { font-size: 13px; font-weight: 700; }
html body.owner-redesign .history-detail { border: 0; margin-top: 0; }
html body.owner-redesign .history-detail > summary { position: absolute; bottom: 7px; right: 4px; width: 32px; min-height: 32px; justify-content: center; list-style: none; }
html body.owner-redesign .history-detail[open] > summary { top: 75px; bottom: auto; }
html body.owner-redesign .history-detail > summary::-webkit-details-marker { display: none; }
html body.owner-redesign .history-detail > summary .owner-icon { width: 19px; }
html body.owner-redesign .history-detail[open] { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
html body.owner-redesign .history-detail > .history-item__amounts { display: flex; flex-direction: column; padding: 0; background: transparent; gap: 0; }
html body.owner-redesign .history-detail .history-amount { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.25fr); gap: 8px; padding: 5px 7px; border-bottom: 1px solid var(--border); }
html body.owner-redesign .history-detail .history-amount__label,
html body.owner-redesign .history-detail .history-amount__value { font-size: 12px; color: var(--text); }

/* The member number says what it is: 会員ID in front of the bracketed number (the label stays out of the brackets). */
html body.owner-redesign .app-header .member-id-group .input-group-label { display: inline; order: -1; flex: none; margin-right: 5px; color: #5f5d58; font-size: 10px; font-weight: 500; white-space: nowrap; }

/* The member number has its 会員ID label now, so the brackets around it go. */
html body.owner-redesign .app-header .member-id-group::before,
html body.owner-redesign .app-header .member-id-group::after { content: none !important; }

/* ══ Item list design (confirmed 2026-10-06): header, footer and light shared by every member screen; tabs, filters and cards on the item list ══ */

/* Header: the screen name is the big text, the logo gives way a little, the owner name and member ID sit closer. */
html body.owner-redesign .app-header .header-brand { align-items: center; gap: 10px; }
html body.owner-redesign .app-header .premium-gallery-logo { width: min(188px, 48vw); max-height: 46px; }
html body.owner-redesign .app-header h1 { margin: 0; font-size: 13px; letter-spacing: 2.4px; line-height: 1.1; color: #8a6d2f; }
html body.owner-redesign .app-header .sub { margin-top: 2px; font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: 0; color: #16594f !important; }
html body.owner-redesign .app-header .search-wrap { row-gap: 0 !important; margin-top: 6px !important; padding-top: 6px !important; }
html body.owner-redesign .app-header .owner-name-group,
html body.owner-redesign .app-header .member-id-group,
html body.owner-redesign .app-header .member-id-group .input-group-label { line-height: 1.3; }
html body.owner-redesign .app-header.member-header #memberIdInput,
html body.owner-redesign .app-header.member-header #currentMemberId,
html body.owner-redesign .app-header.member-header #memberId { color: #5f5d58 !important; }

/* Footer: black with gold-edged buttons; the current screen is filled gold. */
html body.owner-redesign .app-bottom-nav {
  position: fixed; inset: auto 0 0; z-index: 110; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px !important; padding: 8px max(6px, calc((100% - 520px) / 2)) max(8px, env(safe-area-inset-bottom)) !important; background-color: #15140f !important;
  background-image: radial-gradient(ellipse 360px 120px at 8% 0%, rgba(185, 150, 83, .16), transparent 68%), radial-gradient(ellipse 360px 120px at 100% 100%, rgba(185, 150, 83, .10), transparent 68%) !important;
  border-top: 1px solid #b99653 !important; box-shadow: 0 -8px 20px rgba(0, 0, 0, .18) !important;
}
html body.owner-redesign .app-bottom-nav__link {
  display: flex; align-items: center; justify-content: flex-start !important; flex-direction: column; gap: 3px !important; min-height: 54px !important; padding: 7px 2px 6px !important;   /* icons stay level even when a label wraps */
  border: 1px solid rgba(185, 150, 83, .65) !important; border-radius: 6px !important; background: rgba(255, 255, 255, .06) !important; color: #fff !important;
  font-size: clamp(8px, 2.35vw, 10px) !important; font-weight: 700 !important; letter-spacing: -.02em !important; line-height: 1.2 !important; text-align: center; text-decoration: none; word-break: keep-all; overflow-wrap: anywhere;
}
html body.owner-redesign .app-bottom-nav__link span { max-width: none !important; line-height: 1.2 !important; }
html body.owner-redesign .app-bottom-nav__link svg { width: 22px !important; height: 22px !important; color: #e0c787 !important; }
@media (max-width: 360px) {
  html body.owner-redesign .app-bottom-nav { gap: 3px !important; padding-left: 4px !important; padding-right: 4px !important; }
  html body.owner-redesign .app-bottom-nav__link { padding-left: 0 !important; padding-right: 0 !important; }
}
html body.owner-redesign .app-bottom-nav__link:hover,
html body.owner-redesign .app-bottom-nav__link:focus-visible { border-color: #e0c787 !important; background: rgba(185, 150, 83, .18) !important; }
html body.owner-redesign .app-bottom-nav__link[aria-current] { background: #e0c787 !important; border-color: #e0c787 !important; color: #15140f !important; }
html body.owner-redesign .app-bottom-nav__link[aria-current] svg { color: #15140f !important; }

/* Silver light, in two places only: the header and the page background. Each shines every 15 seconds (the header's narrow band crosses in 1.5 seconds, the background's in 3), taking
   turns (owner_ui.js adds owner-shining-header / owner-shining-background); the animation runs only while shining.
   The two come from opposite corners and at different angles on purpose: the background's 115° band runs from the lower right
   to the upper left, the header's 125° band from the upper left to the lower right. They are not aligned with the ±45° lattice lines.
   The light shows only on the lattice lines (a mask with the lattice's own tile), and the background layer is fixed to the screen like the lattice.
   At rest the band sits outside the box (450% wide, header 350%), so a slanted band never lingers in a corner. */
html body.owner-redesign::before,
html body.owner-redesign::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-size: 450% 100%; background-repeat: no-repeat; background-position: 0% 0;
}
html body.owner-redesign::before {
  background-image: linear-gradient(115deg, transparent 44.2%, rgba(176, 186, 198, 0) 45.65%, rgba(176, 186, 198, .9) 48.55%, #ffffff 50%, rgba(176, 186, 198, .9) 51.45%, rgba(176, 186, 198, 0) 54.35%, transparent 55.8%);
  -webkit-mask-image: repeating-linear-gradient(45deg, #000 0 2px, transparent 2px 64px), repeating-linear-gradient(-45deg, #000 0 2px, transparent 2px 64px);
  mask-image: repeating-linear-gradient(45deg, #000 0 2px, transparent 2px 64px), repeating-linear-gradient(-45deg, #000 0 2px, transparent 2px 64px);
  -webkit-mask-size: var(--lattice-tile) var(--lattice-tile); mask-size: var(--lattice-tile) var(--lattice-tile);
  -webkit-mask-position: 0 0; mask-position: 0 0;
}
/* A faint silver sheen along the same band. */
html body.owner-redesign::after {
  background-image: linear-gradient(115deg, rgba(168, 180, 196, 0) 41.5%, rgba(168, 180, 196, .14) 46%, rgba(190, 200, 214, .22) 50%, rgba(168, 180, 196, .14) 54%, rgba(168, 180, 196, 0) 58.5%);
}
/* The header's own layer lives inside the header (z-index:-1: over the header's lattice, under its logo and text), masked to the header's finer 14px lattice. */
html body.owner-redesign .owner-shine-header {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(125deg, transparent 46.3%, rgba(176, 186, 198, 0) 47.2%, rgba(176, 186, 198, .75) 49.1%, #ffffff 50%, rgba(176, 186, 198, .75) 50.9%, rgba(176, 186, 198, 0) 52.8%, transparent 53.7%);
  background-size: 350% 100%; background-repeat: no-repeat; background-position: 100% 0;
  -webkit-mask-image: repeating-linear-gradient(45deg, #000 0 1.5px, transparent 1.5px 14px), repeating-linear-gradient(-45deg, #000 0 1.5px, transparent 1.5px 14px);
  mask-image: repeating-linear-gradient(45deg, #000 0 1.5px, transparent 1.5px 14px), repeating-linear-gradient(-45deg, #000 0 1.5px, transparent 1.5px 14px);
}
html body.owner-redesign.owner-shining-background::before,
html body.owner-redesign.owner-shining-background::after { animation: owner-sweep-background 3s ease-in-out 1; }
html body.owner-redesign.owner-shining-header .owner-shine-header { animation: owner-sweep-header 1.5s ease-in-out 1; }
@keyframes owner-sweep-background { from { background-position: 0% 0; } to { background-position: 100% 0; } }   /* lower right to upper left */
@keyframes owner-sweep-header { from { background-position: 100% 0; } to { background-position: 0% 0; } }   /* upper left to lower right */
@media (prefers-reduced-motion: reduce) {
  html body.owner-redesign::before, html body.owner-redesign::after, html body.owner-redesign .owner-shine-header { animation: none; display: none; }
}

/* ── Item list: status, store and shelf tabs, search, tags ── */
/* The store and shelf tabs keep their underline look and sit right under the status tabs. A single store has no store tab. */
html body.owner-item-list .inventory-filters .item-filters { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
html body.owner-item-list .inventory-filters .item-filters.hidden { display: none !important; }
html body.owner-item-list .inventory-filters .item-filters { margin-top: 6px !important; }
html body.owner-item-list #majorTabs.is-single { display: none !important; }
/* Status, store and shelf tabs and the tag chips stay on one line and scroll sideways; the edge fades only while there is more. */
html body.owner-item-list #statusTabs,
html body.owner-item-list #majorTabs,
html body.owner-item-list #categoryTabs {
  display: flex !important; flex-wrap: nowrap !important; position: relative; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
html body.owner-item-list #statusTabs::-webkit-scrollbar,
html body.owner-item-list #majorTabs::-webkit-scrollbar,
html body.owner-item-list #categoryTabs::-webkit-scrollbar,
html body.owner-item-list .tag-filter__scroll::-webkit-scrollbar { display: none; }
html body.owner-item-list #statusTabs > *,
html body.owner-item-list #majorTabs > *,
html body.owner-item-list #categoryTabs > *,
html body.owner-item-list .tag-filter__scroll > * { flex: 0 0 auto; white-space: nowrap; }
html body.owner-item-list .has-more-end { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
html body.owner-item-list .has-more-start { -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(270deg, #000 calc(100% - 28px), transparent); }
html body.owner-item-list .has-more-start.has-more-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }

/* Tags under the search box in two rows: the chips scroll on one line, "タグを管理" and "まとめて付ける" stay visible underneath. */
html body.owner-item-list #tagFilter { display: block; margin: 0 0 8px; padding: 0; }
html body.owner-item-list #tagFilter.hidden { display: none !important; }
html body.owner-item-list .tag-filter__scroll { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; position: relative; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px 0 4px; }
html body.owner-item-list .tag-filter__tools { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; margin-top: 4px; }
html body.owner-item-list .tag-filter__tools button {
  display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; margin: 0; padding: 0 12px; border: 1px solid #d8c48c; border-radius: 6px;
  background: #fff; color: #6b5420; font-size: 12px; font-weight: 700; white-space: nowrap;
}
html body.owner-item-list .tag-filter__tools button .owner-icon { width: 16px; height: 16px; flex: none; }
html body.owner-item-list .tag-filter__tools .tag-filter__bulk[aria-pressed="true"] { border-color: #b99653; background: #d8bd79; color: #1a1a18; }

/* ── Item list: update line, month headings, sort ── */
/* The refresh button and the fetched time sit above the list; they stay visible while the list itself is still loading or failed to load, so a failed load can be retried. */
html body.owner-item-list #itemsPanel.hidden { display: block !important; }
html body.owner-item-list #itemsPanel.hidden > :not(.item-statusline):not(.item-help-panel) { display: none !important; }
html body.owner-item-list .item-statusline { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; }
html body.owner-item-list .item-statusline .app-footer-refresh { display: contents; }
html body.owner-item-list .item-statusline [data-inventory-fetched-at] { order: 0; flex: 1 1 auto; min-width: 0; min-height: 0; margin: 0 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #7a7365 !important; font-size: 11px !important; text-align: left; }
html body.owner-item-list .item-statusline [data-inventory-refresh-button],
html body.owner-item-list .item-statusline .item-help-button {
  flex: none; display: inline-flex !important; align-items: center; justify-content: center; gap: 4px; width: auto !important; min-width: 0 !important; min-height: 32px !important; margin: 0 !important; padding: 0 10px !important;
  border: 1px solid #d8c48c !important; border-radius: 6px !important; background: #fff !important; color: #6b5420 !important; font-size: 12px !important; font-weight: 700 !important; box-shadow: none !important;
}
html body.owner-item-list .item-statusline [data-inventory-refresh-button] { order: 1; }
html body.owner-item-list .item-statusline .item-help-button { order: 2; }
html body.owner-item-list .item-statusline [data-inventory-refresh-button]::before { content: none !important; }
html body.owner-item-list .item-statusline .owner-icon { width: 15px; height: 15px; flex: none; }
html body.owner-item-list .item-help-button[aria-expanded="true"] { background: #fbf5e6 !important; }
html body.owner-item-list .item-help-panel { margin: 6px 0 0; padding: 10px 12px; border: 1px solid #e6e2da; border-radius: 6px; background: #fff; }
html body.owner-item-list .item-help-panel ul { margin: 0; padding-left: 18px; color: #6f6a60; font-size: 12px; line-height: 1.7; }
/* The sales report and the history keep the refresh button and the fetched time above the content, as the showcase does. */
html body.owner-redesign .owner-statusline { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
html body.owner-redesign .owner-statusline .app-footer-refresh { display: contents; }
html body.owner-redesign .owner-statusline [data-inventory-fetched-at] { order: 0; flex: 1 1 auto; min-width: 0; min-height: 0; margin: 0 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #7a7365 !important; font-size: 11px !important; text-align: left; }
html body.owner-redesign .owner-statusline [data-inventory-refresh-button] {
  order: 1; flex: none; display: inline-flex !important; align-items: center; justify-content: center; gap: 4px; width: auto !important; min-width: 0 !important; min-height: 32px !important; margin: 0 !important; padding: 0 10px !important;
  border: 1px solid #d8c48c !important; border-radius: 6px !important; background: #fff !important; color: #6b5420 !important; font-size: 12px !important; font-weight: 700 !important; box-shadow: none !important;
}
html body.owner-redesign .owner-statusline [data-inventory-refresh-button]::before { content: none !important; }
html body.owner-redesign .owner-statusline .owner-icon { width: 15px; height: 15px; flex: none; }
/* Month headings: 出品日 (売却日 on the sold order, 申請日 for applications). None when sorted by price. */
html body.owner-item-list .item-month { display: flex; align-items: baseline; justify-content: space-between; margin: 16px 0 6px; padding-bottom: 4px; border-bottom: 1px solid #d8c48c; color: #1a1a18; font-size: 14px; font-weight: 400; }
html body.owner-item-list .item-month:first-child { margin-top: 4px; }
html body.owner-item-list .item-month strong { font-weight: 700; }
html body.owner-item-list .item-month small { margin-left: 6px; color: #8a6d2f; font-size: 11px; font-weight: 500; }
html body.owner-item-list .item-month span { color: #7a7365; font-size: 12px; }
/* The sort is a chip in the heading row ("販売中の商品 N件"). */
html body.owner-item-list .items-section .section-heading { display: flex; align-items: center; gap: 10px; }
html body.owner-item-list .items-section .section-heading h2 { flex: 1 1 auto; min-width: 0; margin: 0; }
html body.owner-item-list .items-section .section-heading .section-count { flex: none; }
html body.owner-item-list .item-sort { position: relative; flex: none; display: inline-flex; align-items: center; }
html body.owner-item-list .item-sort .owner-icon { position: absolute; left: 9px; width: 15px; height: 15px; color: #8a6d2f; pointer-events: none; }
html body.owner-item-list .item-sort::after { content: "▾"; position: absolute; right: 9px; color: #8a6d2f; font-size: 11px; pointer-events: none; }
html body.owner-item-list .item-sort select {
  appearance: none; -webkit-appearance: none; min-height: 34px !important; height: 34px; margin: 0; padding: 0 24px 0 28px !important; border: 1px solid #b99653 !important; border-radius: 6px !important;
  background: #fff !important; color: #6b5420 !important; font-size: 12px !important; font-weight: 700; line-height: 1; cursor: pointer;
}

/* ── Item list: the card ──
   Laid out like the sales history card: white, thin grey edge, 10px corners, no shadow, 9px inside; the photo 76px wide and as tall as the text beside it.
   Right of the photo: the date (status chips at its right edge) / name / number・category・rank / "販売額 ¥…" and how long it has been listed.
   Under a thin line: the tags, then the memo with the icon actions and 詳細. Gold only on the price (and on a chosen card); the edit button is white with green. */
html body.owner-item-list .item-card {
  position: relative; display: grid !important; grid-template-columns: 76px minmax(0, 1fr); column-gap: 10px; row-gap: 0; align-items: start; padding: 9px !important;
  background: #fff !important; border: 1px solid #e3e2de !important; border-radius: 10px !important; box-shadow: none !important;
}
html body.owner-item-list .item-card.is-sold { background: #fff !important; }
/* The backdrop: small gorillas laid out staggered, in the price gold and very faint (the tile is /static/asset/gorimaru_gorilla_tile.svg, used as a mask so the colour is set here).
   It is the card's ::before, behind the card's own content (isolation + z-index -1), so text, photo and buttons stay in front.
   The card itself is not clipped: the selection check sits outside its edge. */
html body.owner-item-list .item-card { isolation: isolate; }
html body.owner-item-list .item-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: #8a6d2f; opacity: .05;
  -webkit-mask: url("/static/asset/gorimaru_gorilla_tile.svg?v=20261007-1") 0 0 / 64px 64px repeat, url("/static/asset/gorimaru_gorilla_tile.svg?v=20261007-1") 32px 32px / 64px 64px repeat;
  mask: url("/static/asset/gorimaru_gorilla_tile.svg?v=20261007-1") 0 0 / 64px 64px repeat, url("/static/asset/gorimaru_gorilla_tile.svg?v=20261007-1") 32px 32px / 64px 64px repeat;
}
html body.owner-item-list .items-grid { gap: 10px !important; }
html body.owner-item-list .item-card > .item-image,
html body.owner-item-list .item-card > .item-no-image { grid-column: 1; grid-row: 1; width: 76px; height: auto !important; min-height: 0; align-self: stretch; border: 0; border-radius: 6px; background: #f5f4f0; object-fit: contain; }
html body.owner-item-list .item-card > .item-no-image { display: grid; place-items: center; color: #b3b0a7; }
html body.owner-item-list .item-card .item-no-image svg { width: 28px; height: 28px; }
html body.owner-item-list .item-card > .item-main { grid-column: 2; grid-row: 1; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2px; align-content: start; min-width: 0; }
html body.owner-item-list .item-card .item-main > * { order: 0; }   /* the shared card rules give .item-id order: 1; here the lines follow the markup */
html body.owner-item-list .item-card .item-date { min-height: 17.6px; color: #64625d; font-size: 11px; line-height: 1.6; }
/* Status chips: at the right edge of the date line, side by side (they sit over the line, so the line keeps its height). */
html body.owner-item-list .item-card .item-status-badges { position: absolute; top: 0; right: 0; display: flex; flex-direction: row; align-items: center; gap: 4px; max-width: none; margin: 0; }
html body.owner-item-list .item-card .item-status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: 11px; font-weight: 700; line-height: 1.6; }
html body.owner-item-list .item-card .item-status-badge.status-sold { background: #dbe8f8 !important; color: #2f5a8f !important; }
html body.owner-item-list .item-card .item-main .item-name { margin: 0; padding: 0 !important; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 700; line-height: 1.45; letter-spacing: .01em; }
html body.owner-item-list .item-card.is-expanded .item-main .item-name { overflow: visible; white-space: normal; text-overflow: clip; overflow-wrap: anywhere; }
html body.owner-item-list .item-card .item-id { display: flex; flex-wrap: wrap; align-items: baseline; margin: 0; color: #64625d; font-size: 11px; line-height: 1.6; }
html body.owner-item-list .item-card .item-id span { font-family: inherit !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; letter-spacing: 0 !important; }
html body.owner-item-list .item-card .item-id > span + span::before { content: "・"; margin: 0 4px; color: #b3b0a7; }
html body.owner-item-list .item-card .item-id .item-rank b { margin-left: 1px; color: #252422; font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0; line-height: inherit; }
/* Like the history's "売却額 ¥… 利益 ¥…": small label, then the amount (gold, the same type as the history's amounts). */
html body.owner-item-list .item-card .item-amounts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; margin-top: 4px; }
html body.owner-item-list .item-card .item-amount { display: inline-flex; align-items: baseline; gap: 6px; }
html body.owner-item-list .item-card .item-amount__label { color: #64625d; font-size: 10px; line-height: 1.6; }
html body.owner-item-list .item-card .item-price-value { margin: 0; padding: 0; font-family: "Noto Sans JP", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0; line-height: 1.6; color: #8a6d2f !important; }
html body.owner-item-list .item-card .item-age { color: #64625d; font-size: 11px; font-weight: 400; line-height: 1.6; }
/* Under the thin line: the tags (a row of their own), then the memo, the icon actions and 詳細. */
html body.owner-item-list .item-card > .item-foot { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; row-gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px solid #e3e2de; }
html body.owner-item-list .item-card .item-tags-compact { grid-column: 1 / -1; grid-row: 1; display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin: 0; overflow: hidden; }
html body.owner-item-list .item-card .item-tag { border-color: #e3e2de; background: #f5f4f0; color: #64625d; }
/* "タグを編集" in 詳細: a white button with green and a tag icon, so it reads as an action (like the edit button). */
html body.owner-item-list .item-card .item-tag-button { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 12px; border: 1px solid #16594f; border-radius: 6px !important; background: #fff; color: #16594f; font-size: 12px; font-weight: 700; }
html body.owner-item-list .item-card .item-tag-button .owner-icon { width: 14px; height: 14px; }
html body.owner-item-list .item-card .item-tag-button:hover { background: #eef6f4; }
html body.owner-item-list .item-card .item-tags-compact .item-tag { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 1px 9px; font-size: 11px; line-height: 1.5; }
html body.owner-item-list .item-card .item-tags-more { flex: none; color: #7a7365; font-size: 11px; font-weight: 700; }
html body.owner-item-list .item-card .item-compact-note { display: flex; align-items: center; min-width: 0; min-height: 0; margin: 0; padding: 0; color: #64625d; font-size: 11px; }
html body.owner-item-list .item-card .item-compact-note .compact-label { padding: 0 6px 0 0; border: 0; background: none; color: #8a8780; font-size: 11px; font-weight: 700; }
html body.owner-item-list .item-card .compact-memo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #64625d; }
/* Change and withdraw as small icon buttons (the same actions with words are inside 詳細). The edit button is white with green. */
html body.owner-item-list .item-actions { position: static; display: flex; gap: 6px; }
html body.owner-item-list .item-actions button {
  all: unset; box-sizing: border-box; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #e3e2de; border-radius: 50%;
  background: #fff; color: #64625d; cursor: pointer;
}
html body.owner-item-list .item-actions button svg { width: 16px; height: 16px; stroke-width: 1.8; }
/* the shared theme styles .btn-change-price with !important (gold outline, 4px corners); here it is a round, white button with green */
html body.owner-item-list .item-actions .btn-change-price { border: 1px solid #16594f !important; border-radius: 50% !important; background: #fff !important; color: #16594f !important; }
html body.owner-item-list .item-actions .btn-withdraw { border-color: #ecd0c9; color: #b3402f; }
html body.owner-item-list .item-actions .btn-change-price:hover { background: #eef6f4 !important; }
html body.owner-item-list .item-actions .btn-withdraw:hover { background: #fdf0ed; }
html body.owner-item-list .item-actions button:focus-visible { outline: 2px solid #16594f; outline-offset: 2px; }
/* 詳細 ▼ / ▲: text and arrow, no circle. */
html body.owner-item-list .item-card .item-details-toggle { position: static !important; min-width: 0; min-height: 28px; height: 28px !important; margin: 0 !important; padding: 0 2px 0 6px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: #64625d !important; display: flex !important; align-items: center; justify-content: center; gap: 3px; font-size: 12px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
html body.owner-item-list .item-card .item-details-toggle::after { content: none; }
html body.owner-item-list .item-card > .item-details { grid-column: 1 / -1; grid-row: 3; margin-top: 6px; }
html body.owner-item-list .item-detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
html body.owner-item-list .item-detail-action {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; margin: 0; padding: 0 8px; border: 1px solid #d8c48c; border-radius: 6px;
  background: #fff; color: #6b5420; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer;
}
html body.owner-item-list .item-detail-action svg { width: 18px; height: 18px; flex: none; stroke-width: 1.8; }
html body.owner-item-list .item-detail-action.is-change { background: #fff; border-color: #16594f; color: #16594f; }
html body.owner-item-list .item-detail-action.is-withdraw { border-color: #ecd0c9; color: #b3402f; }
/* The tags in the edit dialog sit under the memo like the other fields. */
html body.owner-item-list .modal-tag-field { margin-top: 14px; }
/* Bulk tagging: tap the whole card; a check mark at its top-left corner and a gold edge show the choice. The checkbox stays for keyboards. */
html body.owner-item-list .item-card.is-selectable { cursor: pointer; }
html body.owner-item-list .item-card.is-selectable .item-tag-row { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html body.owner-item-list .item-card.is-selectable .item-tag-row > :not(.item-select) { display: none; }
html body.owner-item-list .item-card.is-selectable:focus-within { outline: 2px solid #8a6d2f; outline-offset: 2px; }
html body.owner-item-list .item-card .item-check { position: absolute; top: -7px; left: -7px; z-index: 2; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid #c9bd9a; border-radius: 50%; background: #fff; color: #fff; font-size: 14px; font-weight: 700; line-height: 1; box-shadow: 0 1px 3px rgba(66, 50, 12, .18); }
html body.owner-item-list .item-card.is-selected { border-color: #b99653 !important; background: linear-gradient(135deg, #fffaea 0%, #f9efcf 100%) !important; box-shadow: 0 0 0 2px #b99653, 0 6px 16px rgba(66, 50, 12, .14) !important; }
html body.owner-item-list .item-card.is-selected .item-check { border-color: #8a6d2f; background: #8a6d2f; }
html body.owner-item-list .item-card.is-selected .item-check::after { content: "✓"; }
html body.owner-item-list .item-card.is-selectable .item-actions,
html body.owner-item-list .item-card.is-selectable .item-detail-actions { display: none; }

/* ── Item list: the case tabs (a glass cube drawn in lines, with the number of items on the glass; no fill, so they sit on the page like the rest) ── */
html body.owner-item-list #categoryTabs { gap: 8px !important; padding: 2px 2px 6px; border-bottom: 0 !important; align-items: stretch; }
html body.owner-item-list #categoryTabs .tab-button {
  display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 62px !important; padding: 6px 8px 5px !important;
  border: 1px solid #cdbb8a !important; border-radius: 10px !important; background: transparent !important; color: #64625d !important; line-height: 1.25;
}
html body.owner-item-list #categoryTabs .case-icon { display: grid; place-items: center; color: #4a4843; }
html body.owner-item-list #categoryTabs .case-icon svg { width: 36px; height: 36px; }
html body.owner-item-list #categoryTabs .case-icon .cube-front,
html body.owner-item-list #categoryTabs .case-icon .cube-top,
html body.owner-item-list #categoryTabs .case-icon .cube-side { fill: none; }
html body.owner-item-list #categoryTabs .case-icon .cube-label { fill: #f2c200; stroke: none; }
html body.owner-item-list #categoryTabs .case-icon text { fill: #252422; }
html body.owner-item-list #categoryTabs .case-name { color: #252422; font-size: 12px; font-weight: 700; }
html body.owner-item-list #categoryTabs .tab-button.active { border: 2px solid #16594f !important; padding: 5px 7px 4px !important; background: transparent !important; color: #16594f !important; }
html body.owner-item-list #categoryTabs .tab-button.active .case-icon,
html body.owner-item-list #categoryTabs .tab-button.active .case-name { color: #16594f; }
html body.owner-item-list #categoryTabs .tab-button.active .case-icon text { fill: #16594f; }

/* ── Cards stand a little off the page: two soft shadows, a white top edge, a thin darker line under the card (its thickness), and a shallow dip in the photo tile.
   The item list and the sales history share it. A chosen card keeps its gold ring. ── */
html body.owner-item-list .item-card:not(.is-selected),
html body.owner-redesign .history-item {
  border-bottom: 2px solid #d9d6cf !important;
  box-shadow: 0 1px 2px rgba(40, 34, 20, .07), 0 6px 14px rgba(40, 34, 20, .08), inset 0 1px 0 #fff !important;
}
html body.owner-item-list .item-card > .item-image,
html body.owner-item-list .item-card > .item-no-image,
html body.owner-redesign .history-item__thumb { box-shadow: inset 0 1px 3px rgba(40, 34, 20, .16) !important; }

/* ── One left and right edge: the cards, the filters (search, tags, tabs), the headings and the history cards all start 12px from the screen edge. ── */
html body.owner-item-list .inventory-filters { padding: 0 !important; }
html body.owner-redesign.page-sales-history main { padding-left: 12px; padding-right: 12px; }
/* The space between cards is 10px on both screens (the history cards used to touch each other). */
html body.owner-redesign .history-list { display: flex; flex-direction: column; gap: 10px; }

/* ── Sales report: crisper text. Nothing under 11px, the greys are darker and the small text is a little heavier. ── */
html body.page-sales-report { --text-muted: #474b52; }
html body.page-sales-report.owner-redesign:not(.owner-classic) .product-status-sub { font-size: 11px; font-weight: 500; color: #474b52; }
html body.page-sales-report.owner-redesign:not(.owner-classic) .hero-fee-note { font-size: 11px; font-weight: 500; color: #4f4b45; }
html body.page-sales-report.owner-redesign:not(.owner-classic) th { font-size: 11px; font-weight: 700; letter-spacing: 0; color: #3e4249; }
html body.page-sales-report.owner-redesign:not(.owner-classic) td > span,
html body.page-sales-report.owner-redesign:not(.owner-classic) .insight-unit,
html body.page-sales-report.owner-redesign:not(.owner-classic) dt { font-size: 11px; font-weight: 500; color: #474b52; }
html body.page-sales-report.owner-redesign:not(.owner-classic) .sb-label { font-size: 11px; font-weight: 500; letter-spacing: 0; color: #474b52; }
html body.page-sales-report.owner-redesign:not(.owner-classic) .sb-item > div[style] { font-size: 11px !important; font-weight: 500; color: #14532d !important; }
html body.page-sales-report.owner-redesign:not(.owner-classic) .kpi-note,
html body.page-sales-report.owner-redesign:not(.owner-classic) .owner-section .m-sub { font-size: 11px; font-weight: 500; color: #474b52; }
html body.page-sales-report.owner-redesign:not(.owner-classic) .settle-badge,
html body.page-sales-report.owner-redesign:not(.owner-classic) .product-all-link { font-size: 11px; }
html body.page-sales-report.owner-redesign:not(.owner-classic) .m-label,
html body.page-sales-report.owner-redesign:not(.owner-classic) .trend-bar__label { font-weight: 500; }
html body.page-sales-report.owner-redesign:not(.owner-classic) .kpi-hero .k-label { font-weight: 700; letter-spacing: .8px; color: #835d0a; }

/* CSV・Excel一括登録: the button that picks the file is green, like the template download above it. */
html body.owner-redesign .bulk-import input[type="file"]::file-selector-button { margin-right: 10px; padding: 8px 14px; border: 1px solid #1f5c56; border-radius: 6px; background: #1f5c56; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
html body.owner-redesign .bulk-import input[type="file"]:disabled::file-selector-button { opacity: .5; cursor: wait; }
html body.owner-redesign .app-header .sub .keep-together { display: inline-block; }