body.native-app { --native-head: 68px; --native-nav: 64px; background: #fff; }
.native-header { height: var(--native-head); display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-bottom:1px solid #e4e7e6; }
.native-title,.native-actions { display:flex; align-items:center; gap:10px; min-width:0; }
.native-title>div { min-width:0; }
.native-title h1 { font-size:18px; font-weight:750; line-height:1.4; }
.native-title p { margin-top:3px; color:#69736f; font-size:11px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; max-width:230px; }
.native-mark { color:#0f766e; display:grid; place-items:center; }
.native-mark svg { width:24px; height:24px; }
.native-actions { gap:2px; flex-shrink:0; }
.native-batch-stop { color:#b53636!important; }
.native-batch-stop[hidden] { display:none; }
.native-title { flex:1; overflow:hidden; }
.native-actions a { color:#28332f; text-decoration:none; }
body.native-app .app-shell { position:absolute; inset:var(--native-head) 0 var(--native-nav); width:100%; height:auto; display:block; }
body.native-app .map-shell { position:absolute; inset:0; }
body.native-app .side-panel { position:absolute; inset:0; width:100%; max-height:none; max-width:none; border:0; border-radius:0; transform:none; transition:none; box-shadow:none; visibility:hidden; pointer-events:none; overflow-y:auto; }
body.native-app[data-native-tab="list"] .side-panel { visibility:visible; pointer-events:auto; z-index:5; }
body.native-app[data-native-tab="monitor"] .app-shell,body.native-app[data-native-tab="products"] .app-shell { visibility:hidden; }
body.native-app .side-panel .store-list { flex:1 0 auto; overflow:visible; }
body.native-app .mobile-panel-button { display:none; }
body.native-app[data-native-tab="map"] .mobile-panel-button { display:grid; position:absolute; top:12px; bottom:auto; left:12px; right:auto; z-index:7; }
body.native-app[data-native-tab="map"].panel-open .side-panel { visibility:visible; pointer-events:auto; z-index:6; width:min(340px,82vw); padding-top:48px; box-shadow:4px 0 16px #0002; }
body.native-app .monitor-secondary + .web-monitor-notice { display:none; }
body.native-app .panel-header { min-height:58px; padding:12px 16px; }
body.native-app .panel-header h1 { font-size:16px; }
body.native-app .panel-header h1::after { content:' / 在庫一覧'; font-weight:400; font-size:13px; }
body.native-app .panel-header #settings-button { display:none; }
body.native-app .summary-strip { background:transparent; border:0; border-radius:0; margin-bottom:14px; }
body.native-app .summary-strip div+div { border-left:1px solid #e4e7e6; }
body.native-app .filter-section { padding-bottom:6px; }
body.native-app .store-row { border-radius:0; padding:14px 16px; }
.products-filters { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.products-panel .secondary-button { min-height:42px; margin:0 0 12px; padding:8px 14px; border:1px solid #91b9ad; border-radius:6px; color:#087969; background:#f4faf7; font:inherit; font-size:13px; cursor:pointer; }
.products-panel .secondary-button:focus-visible { outline:2px solid #087969; outline-offset:2px; }
.product-sheet-sync-status { font-size:12px; color:#53665c; margin:0 0 12px; }
.product-sheet-sync-status:empty { display:none; }
.products-filters input { grid-column:1/-1; min-width:0; }
.products-filters input,.products-filters select { min-height:42px; padding:8px; border:1px solid #bec9c3; border-radius:6px; background:white; font-size:14px; }
#products-status { margin-top:14px; margin-bottom:12px; font-size:12px; color:#4a5952; overflow-wrap:anywhere; }
.product-target-row { display:flex; align-items:center; gap:8px; border-bottom:1px solid #e1e6e3; padding:14px 0; }
.product-target-row>span { flex:1; min-width:0; }
.product-target-row strong { display:block; font-size:14px; line-height:1.6; overflow-wrap:anywhere; font-weight:600; }
.product-target-row small { display:block; margin-top:4px; color:#67736b; font-size:11px; overflow-wrap:anywhere; }
.product-target-row input { flex-shrink:0; accent-color:#0b806c; }
.product-target-row .icon-button { width:32px; height:36px; flex:0 0 32px; }
.product-target-actions { display:flex; align-items:center; gap:8px; margin-top:6px; }
.product-target-actions .icon-button { color:#087969; text-decoration:none; width:40px; height:40px; flex-basis:40px; }
.products-search-form { grid-column:1/-1; display:flex; gap:6px; min-width:0; width:100%; }
.products-search-form input { flex:1; width:0; }
.products-pagination { display:flex; align-items:center; justify-content:space-between; margin-top:12px; font-size:12px; }
.products-pagination[hidden] { display:none; }
.product-edit-dialog { border:1px solid #d2d9d5; border-radius:8px; padding:20px; width:min(390px,calc(100vw - 32px)); max-height:85vh; overflow:auto; box-sizing:border-box; }
.product-edit-dialog::backdrop { background:#0006; }
.product-edit-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.product-edit-heading h3 { font-size:17px; }
#product-edit-name { font-size:14px; line-height:1.6; overflow-wrap:anywhere; margin:12px 0; }
.product-edit-dialog label { display:grid; gap:6px; font-size:13px; margin:14px 0; }
.product-edit-dialog input,.product-edit-dialog select { min-width:0; width:100%; box-sizing:border-box; border:1px solid #aabcb3; border-radius:4px; padding:10px; font-size:16px; }
#product-edit-tax { font-size:12px; color:#53675d; }
#product-edit-error { font-size:12px; color:#b43535; margin:10px 0; }
.product-save-state { color:#087969; }
.product-save-state[data-failed="true"] { color:#b43535; }
.product-save-error { display:flex; align-items:center; gap:8px; border-left:3px solid #b43535; padding:8px 12px; margin:8px 0; color:#a32c2c; font-size:12px; overflow-wrap:anywhere; }
.product-save-error span { flex:1; min-width:0; }
body.native-app .location-button { top:12px; right:12px; }
.native-nav { position:absolute; inset:auto 0 0; height:var(--native-nav); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); background:#fff; border-top:1px solid #e4e7e6; z-index:9; }
.native-nav button { border:0; background:none; color:#757e7a; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:4px; padding:8px; cursor:pointer; font-size:11px; font-weight:600; }
.native-nav button svg { width:22px; height:22px; }
.native-nav button[aria-current="page"] { color:#087969; background:#f0f8f5; box-shadow:inset 0 2px #087969; }
.monitor-panel { position:absolute; inset:var(--native-head) 0 var(--native-nav); overflow:auto; background:white; z-index:7; padding:24px 20px 16px; }
.monitor-panel>*,.monitor-panel form { max-width:680px; margin-left:auto; margin-right:auto; }
.monitor-heading,.section-heading,.progress-heading,.monitor-selection-total,.monitor-save-row,.setting-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.monitor-heading { margin-bottom:20px; }
.section-kicker { font-size:10px; color:#78817d; font-weight:700; margin-bottom:4px; }
.monitor-heading h2 { font-size:22px; line-height:1.4; }
.schedule-state { font-size:12px; color:#767e7a; display:flex; align-items:center; gap:6px; flex-shrink:0; }
.schedule-state::before { content:''; width:6px; height:6px; border-radius:50%; background:#8c9590; }
.schedule-state[data-enabled="true"] { color:#087969; }
.schedule-state[data-enabled="true"]::before { background:#087969; }
.monitor-progress-section { padding:12px 0 20px; border-bottom:1px solid #e1e6e3; }
.progress-heading strong { font-size:14px; overflow-wrap:anywhere; }
.monitor-progress-section progress { width:100%; height:5px; display:block; appearance:none; border:0; background:#e7eeea; border-radius:4px; margin:10px 0; }
.monitor-progress-section progress::-webkit-progress-bar { background:#e7eeea; border-radius:4px; }
.monitor-progress-section progress::-webkit-progress-value { background:#0f8875; border-radius:4px; }
.progress-caption { display:flex; justify-content:space-between; gap:8px; font-size:11px; color:#6a746f; }
.progress-caption { flex-wrap:wrap; }
#monitor-sync { font-size:11px; color:#6a746f; margin-top:8px; }
#monitor-warning { margin-top:12px; border-left:3px solid #c24132; padding-left:10px; font-size:12px; line-height:1.6; color:#a32c2c; overflow-wrap:anywhere; }
.monitor-panel fieldset { border:0; padding:0; margin:0; min-width:0; }
.monitor-scope { padding:22px 0 0; }
.section-heading { margin-bottom:12px; }
.section-heading h3 { margin:0; font-size:14px; font-weight:700; }
.select-all { font-size:12px; color:#5c6761; display:flex; align-items:center; gap:5px; }
.monitor-panel input[type="checkbox"] { accent-color:#0b806c; width:16px; height:16px; margin:0; }
.monitor-ranks { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; }
.monitor-rank-choice { min-height:80px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border:1px solid #dce3de; border-radius:6px; cursor:pointer; }
.monitor-rank-choice:has(input:checked) { border-color:#0b806c; background:#f0f8f5; }
.rank-letter { font-size:16px; font-weight:750; }
.monitor-rank-choice[data-rank="U"] .rank-letter { font-size:11px; }
.monitor-rank-choice[data-rank="S"] .rank-letter { color:#2470c9; }.monitor-rank-choice[data-rank="A"] .rank-letter { color:#c94242; }.monitor-rank-choice[data-rank="B"] .rank-letter { color:#b76d10; }.monitor-rank-choice[data-rank="C"] .rank-letter { color:#278347; }
.monitor-rank-choice small { font-size:9px; color:#6d7772; white-space:nowrap; }
.monitor-regions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.monitor-region-choice { min-height:44px; display:flex; align-items:center; gap:8px; border:1px solid #dce3de; border-radius:6px; padding:8px 10px; cursor:pointer; font-size:13px; }
.monitor-region-choice:has(input:checked) { border-color:#0b806c; background:#f0f8f5; }
.monitor-region-choice small { color:#6d7772; font-size:10px; margin-left:auto; white-space:nowrap; }
.monitor-selection-total { padding:18px 0 22px; border-bottom:1px solid #e1e6e3; }
#monitor-selection-count { color:#48594f; font-size:12px; white-space:nowrap; }
.monitor-panel .primary-button { min-height:42px; border-radius:6px; font-size:13px; flex-shrink:0; padding:0 14px; }
.monitor-panel button:disabled { opacity:.4; cursor:default; }
.monitor-schedule { padding-top:22px; }
.monitor-switch { display:inline-flex; position:relative; width:42px; height:26px; flex-shrink:0; }
.monitor-switch input { position:absolute; opacity:0; width:100%!important; height:100%!important; z-index:1; cursor:pointer; }
.monitor-switch span { width:42px; height:26px; border-radius:13px; background:#cbd4ce; transition:background .15s; }
.monitor-switch span::after { content:''; display:block; width:20px; height:20px; margin:3px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #0002; transition:transform .15s; }
.monitor-switch input:checked+span { background:#0b806c; }.monitor-switch input:checked+span::after { transform:translateX(16px); }
.monitor-switch input:focus-visible+span { outline:2px solid #087969; outline-offset:3px; }
.setting-row { min-height:56px; border-bottom:1px solid #edf0ed; font-size:13px; }
.setting-row small { display:block; color:#79837d; font-size:10px; margin-top:3px; }
.setting-row select,.setting-row input[type="time"] { font-family:inherit; color:#253b30; background:#f6f8f6; border:1px solid #dce3de; border-radius:5px; padding:8px; font-size:13px; min-width:0; max-width:100%; }
.time-range { display:flex; align-items:center; gap:6px; }.time-range input[type="time"] { width:94px; padding:7px 5px; }
.time-range input::-webkit-calendar-picker-indicator { display:none; }
.setting-row .muted { color:#6d7772; font-size:11px; text-align:right; }
.monitor-save-row { padding:20px 0; }
#monitor-save-message { font-size:11px; color:#6d7772; overflow-wrap:anywhere; }
.monitor-secondary { display:flex; flex-wrap:wrap; gap:20px; border-top:1px solid #e1e6e3; padding:18px 0; }
.monitor-secondary a { color:#506158; font-size:12px; text-decoration:none; display:flex; align-items:center; gap:6px; min-height:30px; }
.monitor-secondary svg { width:16px; height:16px; }
.monitor-version { color:#96a099; font-size:10px; }
@media(max-width:359px) { .monitor-panel{padding:20px 12px 12px}.monitor-region-choice{padding:8px;gap:5px}.native-title p{max-width:175px}.native-header{padding:10px 12px}.time-range input[type="time"]{width:85px} }
@media(prefers-reduced-motion:reduce){.monitor-switch span,.monitor-switch span::after{transition:none}}
