﻿.ymt-app {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
}
        .tab-active { border-color: #059669; background-color: #ecfdf5; color: #047857; font-weight: 600; }
        .drop-zone-active { border-color: #059669; background-color: #ecfdf5; }
        .scan-highlight { box-shadow: 0 0 0 3px #10b981, 0 0 12px rgba(16, 185, 129, 0.6); }
        #camera-overlay { pointer-events: none; }
        .result-flash { animation: resultFlash 0.6s ease; }
        @keyframes resultFlash {
            0% { background-color: #d1fae5; }
            100% { background-color: transparent; }
        }
        .loader,
        .ymt-spinner {
            width: 3rem;
            height: 3rem;
            border-radius: 9999px;
            border: 4px solid #e2e8f0;
            border-top-color: #059669;
            animation: spin 0.75s linear infinite;
        }
        @keyframes spin { to { transform: rotate(360deg); } }
        .camera-stage {
            width: 100%;
            height: clamp(220px, 56vw, 420px);
        }
        @media (min-width: 640px) {
            .camera-stage { height: clamp(280px, 48vw, 420px); }
        }
        @media (min-width: 768px) {
            .camera-stage { height: 420px; }
        }
        #camera-video {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }
        .result-actions a,
        .result-actions button.result-dl-btn {
            display: inline-flex;
            align-items: center;
            font-size: 0.875rem;
            padding: 0.375rem 0.75rem;
            border-radius: 0.375rem;
            transition: background-color 0.15s;
        }
        .ymt-log-section {
            border: 1px solid #e2e8f0;
            border-radius: 0.75rem;
            background: #f8fafc;
        }
        .ymt-log-details > summary {
            list-style: none;
            cursor: pointer;
            padding: 0.75rem 1rem;
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: 0.5rem;
        }
        .ymt-log-details > summary::-webkit-details-marker { display: none; }
        .ymt-log-summary__title { font-weight: 600; color: #1e293b; }
        .ymt-log-summary__note { font-size: 0.75rem; color: #64748b; }
        .ymt-log-body { padding: 0 1rem 1rem; }
        .ymt-log-actions { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
        .ymt-log-btn {
            font-size: 0.8125rem;
            padding: 0.375rem 0.75rem;
            border-radius: 0.375rem;
            border: 1px solid #cbd5e1;
            background: #fff;
            color: #334155;
            cursor: pointer;
        }
        .ymt-log-btn:hover { background: #f1f5f9; }
        .ymt-log-btn--ghost { border-color: transparent; background: transparent; }
        .ymt-log-view {
            width: 100%;
            font-family: ui-monospace, 'Cascadia Code', 'Consolas', monospace;
            font-size: 0.75rem;
            line-height: 1.5;
            padding: 0.75rem;
            border: 1px solid #e2e8f0;
            border-radius: 0.5rem;
            background: #fff;
            color: #334155;
            resize: vertical;
            min-height: 8rem;
        }