/* ===========================================
           CSS変数・基本設定
           =========================================== */
        :root {
            --sidebar-width: 64px;
            --header-height: 60px;
            --system-header-height: 72px;
            --list-sticky-top: 0px;
            --viewport-height: 100vh;
        }
        @supports (height: 100dvh) {
            :root { --viewport-height: 100dvh; }
        }
        html, body {
            height: auto;
            min-height: 100%;
        }
        body {
            background-color: #f7f7f8;
            touch-action: manipulation;
            font-family: 'Inter', 'Noto Sans JP', sans-serif;
            overflow-x: hidden;
            overflow-y: auto;
        }

        /* ===========================================
           共通ユーティリティ
           =========================================== */
        .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .info-box { padding: 0.75rem; border-radius: 0.5rem; font-size: 0.875rem; display: flex; align-items: flex-start; gap: 0.5rem; }
        .info-box-blue { background-color: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
        .info-box-slate { background-color: #f8fafc; border: 1px solid #e2e8f0; color: #475569; }

        /* XSブレークポイント（480px）用ユーティリティ */
        .xs\:hidden { }
        .hidden.xs\:inline { display: none; }
        @media (min-width: 480px) {
            .xs\:hidden { display: none; }
            .hidden.xs\:inline { display: inline; }
        }

        /* ===========================================
           メインレイアウト（グリッド）
           =========================================== */
        .main-grid {
            display: block;
            margin-top: var(--system-header-height);
            margin-left: var(--sidebar-width);
            min-height: calc(var(--viewport-height) - var(--system-header-height));
        }
        .sidebar {
            position: fixed;
            top: var(--system-header-height);
            left: 0;
            height: calc(var(--viewport-height) - var(--system-header-height));
            width: var(--sidebar-width);
            z-index: 250;
            display: flex;
            flex-direction: column;
        }
        .sidebar-menu-top {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: clamp(1px, 0.2vh, 3px);
            padding: clamp(2px, 0.5vh, 6px) 0;
        }
        .sidebar-menu-top::-webkit-scrollbar { width: 4px; }
        .sidebar-menu-top::-webkit-scrollbar-track { background: transparent; }
        .sidebar-menu-top::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
        .sidebar-menu-top::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
        .sidebar-menu-bottom {
            flex-shrink: 0;
            border-top: 1px solid #e2e8f0;
            background: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: clamp(1px, 0.2vh, 3px);
            padding: clamp(2px, 0.5vh, 6px) 0;
        }
        .main-header { position: sticky; top: var(--system-header-height); z-index: 100; }
        .main-content { }

        /* ビュー共通設定 */
        #view-scan {
            height: calc(var(--viewport-height) - var(--system-header-height) - var(--header-height));
            min-height: 0;
            overflow: hidden;
        }
        #view-scan > div:first-child {
            display: flex;
            flex-direction: column;
            height: 100%;
            min-height: 0;
            overflow: hidden;
        }
        #view-scan > div:first-child > .p-4:first-child {
            flex: 0 0 auto;
        }
        #right-panel-container { max-height: none; overflow: visible; position: static; }

        /* 分析コンテンツエリア（タブ下のflex） */
        #analyticsContentArea {
            display: flex;
            flex: 1;
            min-height: 0;
            overflow: hidden;
        }
        /* 分析サイドバー（flex内に配置） */
        #analyticsSidebar {
            flex-shrink: 0;
            width: 320px;
            max-width: 82vw;
            overflow-y: auto;
            transition: width 0.25s ease, margin 0.25s ease;
        }
        #analyticsSidebar.w-0 { width: 0; overflow: hidden; }
        #sidebarOpenButton {
            position: absolute;
            top: 12px;
            left: 0;
            z-index: 10;
        }

        .nav-item {
            display: flex; align-items: center; justify-content: center;
            /* 画面高さに応じてサイズ調整: 最小36px、最大48px */
            height: clamp(36px, 6vh, 48px);
            width: clamp(36px, 6vh, 48px);
            margin: clamp(1px, 0.3vh, 3px);
            border-radius: 10px; transition: background-color 0.2s, color 0.2s;
            position: relative; flex-direction: column; gap: 1px;
            flex-shrink: 0;
        }
        .nav-item i { font-size: clamp(18px, 3vh, 24px); }
        .nav-item.active { background-color: #eef2ff; color: #4338ca; }
        .nav-item:not(.active):hover { background-color: #f1f5f9; }
        /* デスクトップでは機能名を非表示 */
        .nav-label { display: none; }
        /* 区切り線も調整 */
        .sidebar-menu-top .w-10 { width: clamp(24px, 5vh, 40px); margin: clamp(2px, 0.5vh, 4px) 0; }
        .nav-item::after {
            content: attr(title);
            position: absolute;
            top: 50%;
            left: calc(100% + 12px);
            white-space: nowrap;
            background: #0f172a;
            color: #fff;
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 12px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.18);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-50%);
            transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
            pointer-events: none;
            z-index: 200;
        }
        .nav-item:focus-visible::after {
            opacity: 1;
            visibility: visible;
            transform: translateY(-50%);
        }
        @media (hover: hover) and (pointer: fine) {
            .nav-item:hover::after {
                opacity: 1;
                visibility: visible;
                transform: translateY(-50%);
            }
        }

        /* Horizontal scrollable tabs (analytics/pricing) */
        .analytics-tab-bar, .pricing-tab-bar {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        .analytics-tab-bar::-webkit-scrollbar, .pricing-tab-bar::-webkit-scrollbar { height: 6px; }
        .analytics-tab-bar::-webkit-scrollbar-thumb, .pricing-tab-bar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
        .analytics-tab-bar .analytics-tab { flex: 0 0 auto; min-width: 140px; }
        .pricing-tab-bar .pricing-tab { flex: 0 0 auto; min-width: 120px; }
        @media (min-width: 768px) {
            .analytics-tab-bar { overflow-x: visible; }
            .analytics-tab-bar .analytics-tab { flex: 1 1 0; min-width: 0; }
        }
        @media (min-width: 640px) {
            .pricing-tab-bar { overflow-x: visible; }
            .pricing-tab-bar .pricing-tab { flex: 1 1 0; min-width: 0; }
        }

        /* Pricing table styles */
        .pricing-table {
            border-radius: 8px;
            overflow: hidden;
        }
        .pricing-table th {
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.75rem;
            letter-spacing: 0.025em;
        }
        .pricing-table td {
            padding: 10px 12px;
            border: 1px solid #e2e8f0;
            transition: background-color 0.15s;
        }
        .pricing-table tbody tr:hover {
            background-color: #f8fafc;
        }
        .pricing-table tbody tr:nth-child(even) {
            background-color: #f8fafc;
        }
        .pricing-table tbody tr:nth-child(even):hover {
            background-color: #f1f5f9;
        }
        .pricing-table input[type="number"] {
            width: 80px;
            padding: 6px 8px;
            border: 1px solid #cbd5e1;
            border-radius: 6px;
            text-align: right;
            font-size: 0.875rem;
            font-weight: 500;
            transition: border-color 0.15s, box-shadow 0.15s;
        }
        .pricing-table input[type="number"]:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
        }
        .pricing-table input[type="number"]::-webkit-inner-spin-button {
            opacity: 0.5;
        }

        /* Progress bar responsive width - shrinks with container */
        .progress-bar-container {
            width: 100%;
            min-width: 0;        /* 親要素に合わせて縮小可能 */
            max-width: 100%;
            flex-shrink: 1;      /* flexboxで縮小可能 */
            overflow: hidden;
            box-sizing: border-box;
        }
        @media (min-width: 640px) {
            .progress-bar-container {
                max-width: 90%;
            }
        }
        @media (min-width: 768px) {
            .progress-bar-container {
                max-width: 85%;
            }
        }
        @media (min-width: 1024px) {
            .progress-bar-container {
                max-width: 75%;
            }
        }
        @media (min-width: 1280px) {
            .progress-bar-container {
                max-width: 65%;
            }
        }

        .flash-success { animation: flash-success 0.4s ease-out; }
        .flash-error { animation: flash-error 0.4s ease-out; }
        @keyframes flash-success { 0%, 100% { box-shadow: 0 0 0 0px rgba(16, 185, 129, 0); } 50% { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.5); } }
        @keyframes flash-error { 0%, 100% { box-shadow: 0 0 0 0px rgba(239, 68, 68, 0); } 50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.5); } }

        .scan-panel-tab { border-bottom: 3px solid transparent; }
        .scan-panel-tab.active { border-bottom-color: #0078D4; color: #0078D4; font-weight: 600; }
        .scan-mode-tab.active { background-color: white; color: #0078D4; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

        /* 作業リスト・スキャンログを画面下まで伸ばす */
        #work-list-container {
            flex: 1 1 0;
            display: flex;
            flex-direction: column;
            min-height: 200px;
            overflow: hidden;
        }
        #work-list-container > div:last-child {
            flex: 1 1 0;
            min-height: 0;
            overflow: hidden;
        }
        @media (min-width: 768px) {
            #work-list-container > div:last-child {
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-template-rows: 1fr;
                gap: 12px;
                padding: 8px;
            }
            #scan-panel-list-wrapper,
            #scan-panel-log-wrapper {
                min-height: 0;
                overflow: hidden;
                display: flex;
                flex-direction: column;
            }
            #scan-panel-content-list,
            #scan-panel-content-log {
                flex: 1 1 0;
                min-height: 0;
                overflow-y: auto;
            }
        }

        /* 作業リスト商品名の省略表示 */
        #scan-panel-content-list > div {
            max-width: 100%;
            overflow: hidden;
        }
        #scan-panel-content-list > div > .truncate,
        #scan-panel-content-list > div > div.text-xs.text-slate-500 {
            display: block;
            max-width: calc(100vw - 80px);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        @media (min-width: 768px) {
            #scan-panel-content-list > div > .truncate,
            #scan-panel-content-list > div > div.text-xs.text-slate-500 {
                max-width: 100%;
            }
        }

        /* 経費画面のレスポンシブ対応 */
        #view-expenses {
            max-width: 100vw;
            overflow-x: hidden;
        }
        #view-expenses > div {
            max-width: 100%;
            overflow: hidden;
        }
        #view-expenses .overflow-auto {
            max-width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .list-table th { position: relative; }
        .resize-handle {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 6px;
            cursor: col-resize;
            z-index: 20; /* Above sticky header z-10 */
        }
        .resize-handle:hover, .resize-handle.active {
             background-color: rgba(0, 120, 212, 0.5);
        }
        #listTableWrapper {
            display: block;
        }
        .list-table {
            table-layout: fixed;
            border-collapse: separate;
            border-spacing: 0;
            display: table;
        }
        .list-table thead th {
            position: sticky;
            top: 0;
            z-index: 121;
            background: #f8fafc;
            box-shadow: 0 2px 4px rgba(0,0,0,0.06);
            white-space: nowrap;
        }
        .list-table tbody tr {
            transition: background-color 0.15s ease;
        }
        .list-table tbody tr:hover {
            background-color: #f1f5f9;
        }

        .sidebar-logo {
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #0b4f8a 0%, #0f172a 70%);
            color: white;
            font-weight: 800;
            letter-spacing: 0.5px;
            border-radius: 12px;
            box-shadow: 0 6px 12px rgba(0,0,0,0.15);
            font-size: 12px;
        }

        /* System header */
        .system-header {
            background: linear-gradient(90deg, #0f172a 0%, #1f2937 50%, #0b4f8a 100%);
            color: white;
            display: flex;
            align-items: center;
            height: var(--system-header-height);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 240;
        }
        .main-header { position: sticky; top: var(--system-header-height); z-index: 110; }

        /* Version gate overlay */
        #version-overlay {
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, 0.75);
            backdrop-filter: blur(4px);
            z-index: 300;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px;
        }

        /* Toast Notifications */
        #toast-container { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 400; display: flex; flex-direction: column; gap: 8px; pointer-events: none; width: 90%; max-width: 400px; align-items: center; }
        .toast { pointer-events: auto; background: rgba(15, 23, 42, 0.9); backdrop-filter: blur(4px); color: white; padding: 12px 20px; border-radius: 50px; font-size: 14px; font-weight: 600; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.3); opacity: 0; transform: translateY(20px); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); display: flex; align-items: center; gap: 10px; white-space: nowrap; }
        .toast.show { opacity: 1; transform: translateY(0); }
        .toast.error { background: rgba(220, 38, 38, 0.95); }
        .toast.success { background: rgba(22, 163, 74, 0.95); }

        /* ===========================================
           レスポンシブ: 768px以下（モバイル）
           =========================================== */
        .mobile-only { display: none; }
        @media (max-width: 768px) {
            .mobile-only { display: flex; }
            :root { --sidebar-width: 0px; }
            .main-grid { margin-left: 0; }
            .sidebar {
                position: fixed; top: var(--system-header-height); left: 0; height: calc(var(--viewport-height) - var(--system-header-height)); z-index: 260;
                transform: translateX(-100%); transition: transform 0.3s; background-color: white;
                width: 160px;
                align-items: stretch;
                padding: 8px;
            }
            .sidebar.open { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,0.2); }
            /* モバイルでは機能名を表示 */
            .sidebar .nav-label {
                display: inline;
                font-size: 13px;
                font-weight: 600;
            }
            .sidebar .nav-item {
                flex-direction: row;
                justify-content: flex-start;
                width: 100%;
                height: auto;
                padding: 12px 14px;
                gap: 10px;
                margin: 2px 0;
            }
            .sidebar .nav-item i {
                font-size: 20px;
                flex-shrink: 0;
            }
            .sidebar .sidebar-menu {
                width: 100%;
                align-items: stretch;
            }
            /* 吹き出し（ツールチップ）を非表示 */
            .sidebar .nav-item::after {
                display: none !important;
            }
            /* 設定モーダル - 画面内に収めてスクロール可能に */
            #settingsModal > div {
                max-height: calc(100vh - 32px);
                max-height: calc(100dvh - 32px);
                overflow-y: auto;
                margin: 16px;
            }
            #settingsModal > div > .space-y-4 {
                max-height: calc(100vh - 180px);
                max-height: calc(100dvh - 180px);
                overflow-y: auto;
                padding-right: 4px;
            }
        }

        /* ===========================================
           レスポンシブ: 640px以下（小型モバイル）
           =========================================== */
        @media (max-width: 640px) {
            :root { --system-header-height: 64px; --header-height: 56px; }
            body { font-size: 14px; }
            .system-header { padding: 12px; }
            .main-header { padding-inline: 12px; }
        }

        /* ===========================================
           レスポンシブ: 480px以下（iPhone SE等）
           =========================================== */
        @media (max-width: 480px) {
            :root { --system-header-height: 56px; --header-height: 50px; }
            body { font-size: 13px; }
            .system-header { padding: 10px 12px; }
            .main-header { padding-inline: 10px; }
            .system-header .w-full { flex-wrap: wrap; gap: 6px; align-items: center; }
            .sidebar-logo { width: 38px; height: 38px; font-size: 11px; }
            .system-header .text-lg { font-size: 16px; }
            /* 480px以下でも接続状況・バージョン表記を表示 */
            #connectivity-indicator { font-size: 11px; }
            #system-last-sync { display: none; }
            .system-header #header-version { display: inline !important; font-size: 10px; }
            .sidebar .nav-item {
                padding: 10px 12px;
            }
            .sidebar .nav-item i { font-size: 18px; }
            .sidebar .nav-label { font-size: 12px; }
            .sidebar { width: 150px; }
            .sidebar.open { width: 150px; }
            #sidebarOpenButton { padding: 10px 12px; left: var(--sidebar-width, 0px); }
            #list-main-table { display: none; }
            #listTableWrapper { overflow-x: visible !important; }
            #listScroll { overflow-x: hidden; }
            .analytics-tab-bar .analytics-tab { min-width: 110px; }
            .pricing-tab-bar .pricing-tab { min-width: 110px; }
            .scan-mode-tab { font-size: 13px; padding: 10px 8px; }
            /* Analytics tightening */
            #analyticsSidebar { width: min(260px, 80vw) !important; }
            #analyticsSidebar .p-5 { padding: 14px !important; }
            #analyticsSidebar .p-4 { padding: 12px !important; }
            .analytics-tab-bar .analytics-tab { padding: 10px 12px; font-size: 13px; }

            /* Force all analytics containers to shrink */
            #view-analytics,
            #view-analytics > *,
            #view-analytics .flex-1,
            #view-analytics .overflow-y-auto,
            #view-analytics .max-w-6xl,
            #view-analytics .space-y-6,
            #view-analytics .analytics-tab-content {
                min-width: 0 !important;
                max-width: 100% !important;
                overflow-x: hidden !important;
                box-sizing: border-box !important;
            }
            #view-analytics .flex-1.overflow-y-auto { padding: 8px; }
            #view-analytics .max-w-6xl { padding-inline: 0; }
            #view-analytics .space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 10px; }
            #view-analytics .p-6 { padding: 10px !important; }
            #view-analytics .p-5 { padding: 10px !important; }
            #view-analytics .p-4 { padding: 8px !important; }
            #view-analytics .text-3xl { font-size: 1.25rem; }
            #view-analytics .text-2xl { font-size: 1.1rem; }
            #view-analytics .text-xl { font-size: 1rem; }
            #view-analytics .text-lg { font-size: 0.9rem; }
            #view-analytics .text-sm { font-size: 0.8rem; }

            /* Goal progress sections - force shrink */
            .goal-progress-section {
                padding: 10px !important;
                min-width: 0 !important;
                max-width: 100% !important;
                overflow: hidden !important;
                box-sizing: border-box !important;
            }
            .goal-progress-section * {
                min-width: 0;
                box-sizing: border-box;
            }
            .goal-progress-section .bg-gradient-to-r.from-slate-50 {
                min-width: 0 !important;
                max-width: 100% !important;
                overflow: hidden !important;
                padding: 10px !important;
            }
            /* Header row */
            .goal-progress-section .flex.items-center.gap-3.mb-4 {
                gap: 6px;
                margin-bottom: 8px !important;
                flex-wrap: wrap;
            }
            .goal-progress-section .flex.items-center.gap-3.mb-4 > .bg-gradient-to-r {
                padding: 5px !important;
                flex-shrink: 0;
            }
            .goal-progress-section .flex.items-center.gap-3.mb-4 > .bg-gradient-to-r i {
                font-size: 1.1rem !important;
            }
            .goal-progress-section .flex.items-center.gap-3.mb-4 > .flex-1 {
                min-width: 0;
            }
            .goal-progress-section .flex.items-center.gap-3.mb-4 .text-lg {
                font-size: 0.9rem;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .goal-progress-section .flex.items-center.gap-3.mb-4 .text-sm {
                font-size: 0.7rem;
            }
            /* Stats row -縦に並べる */
            .goal-progress-section .flex.items-end.gap-3.mb-3 {
                display: grid !important;
                grid-template-columns: 1fr 1fr auto;
                gap: 6px;
                align-items: end;
            }
            .goal-progress-section .flex.items-end.gap-3.mb-3 > .text-slate-400 {
                display: none;
            }
            .goal-progress-section .flex.items-end.gap-3.mb-3 > .flex-1 {
                min-width: 0;
            }
            .goal-progress-section .flex.items-end.gap-3.mb-3 > .bg-white {
                padding: 4px 8px !important;
                grid-column: span 1;
            }
            .goal-progress-section .text-3xl {
                font-size: 1.1rem !important;
            }
            .goal-progress-section .text-2xl {
                font-size: 0.95rem !important;
            }
            .goal-progress-section .text-xs {
                font-size: 0.65rem !important;
            }
            /* Progress bar - 確実に縮む */
            .goal-progress-section .progress-bar-container {
                width: 100% !important;
                min-width: 0 !important;
                max-width: 100% !important;
                height: 10px !important;
            }
            .goal-progress-section .flex.justify-between.items-center.mt-2 {
                margin-top: 4px !important;
            }
            /* Bottom info box */
            .goal-progress-section .bg-blue-50.p-3,
            .goal-progress-section .bg-orange-50.p-3 {
                padding: 6px !important;
                margin-top: 6px;
            }
            .goal-progress-section .bg-blue-50 .text-sm,
            .goal-progress-section .bg-orange-50 .text-sm {
                font-size: 0.75rem;
            }
            /* Pricing table mobile */
            #view-pricing { max-width: 100vw; overflow-x: hidden; }
            #view-pricing .max-w-6xl { padding-inline: 0; min-width: 0 !important; max-width: 100%; }
            #view-pricing .p-4.md\\:p-6 { padding: 12px !important; }
            #view-pricing .flex-1.overflow-y-auto { overflow-x: hidden; }
            #view-pricing .bg-white.rounded-xl { max-width: 100%; overflow: hidden; }
            #view-pricing .overflow-x-auto { max-width: calc(100vw - 24px); -webkit-overflow-scrolling: touch; }
        }

        /* ===========================================
           レスポンシブ: 360px以下（超小型）
           =========================================== */
        @media (max-width: 360px) {
            header.system-header .w-full { flex-wrap: wrap; gap: 8px; }
            header.system-header .text-lg { font-size: 16px; }
            header.system-header .text-xs { font-size: 11px; }
            #sidebarOpenButton { top: calc(var(--system-header-height) + 8px); left: var(--sidebar-width, 0px); }
        }