:root {
    --page: #ffffff;
    --surface: #ffffff;
    --surface-subtle: #f8fafc;
    --text: #0f172a;
    --muted: #64748b;
    --border: #dbe4ef;
    --accent: #2563eb;
    --accent-dark: #1d4ed8;
    --danger: #dc2626;
    --success: #15803d;
    --radius: 10px;
    --shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}

html, body {
    margin: 0;
    min-height: 100%;
    background: var(--page);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    font-size: 15px;
}

button, input, textarea, select {
    font: inherit;
}

button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.28);
    outline-offset: 2px;
}

.app-container {
    width: min(1500px, calc(100% - 40px));
    margin: 0 auto;
    padding: 14px 0 40px;
}

.app-header {
    margin-bottom: 10px;
}

.app-header h1 {
    margin: 0 0 4px;
    font-size: clamp(1.65rem, 2.2vw, 1.9rem);
    line-height: 1.15;
    letter-spacing: -0.035em;
    font-weight: 750;
}

.app-header h1:focus {
    outline: none;
}

.app-header p {
    margin: 0;
    color: #475569;
    font-size: 1rem;
}

.top-workspace,
.upload-panel,
.flow-panel,
.result-panel,
.metadata-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.top-workspace {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(270px, 1fr);
    margin-bottom: 12px;
}

.recorder-panel {
    display: grid;
    grid-template-columns: minmax(360px, 1.15fr) minmax(300px, 0.85fr);
    gap: 20px;
    padding: 16px 20px;
}

.recorder-controls {
    border-right: 1px solid var(--border);
    padding-right: 20px;
}

.section-title {
    margin: 0 0 14px;
    color: var(--text);
    font-size: 1rem;
    font-weight: 750;
    letter-spacing: 0.01em;
}

.field-title {
    display: block;
    margin: 0 0 8px;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.action-button {
    min-width: 128px;
    padding: 0.72rem 1rem;
    font-weight: 700;
}

.button-icon {
    width: 18px;
    height: 18px;
    margin-right: 5px;
    vertical-align: -4px;
}

.analyze-icon {
    width: 21px;
    height: 21px;
}

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
}

.btn-primary:hover:not(:disabled) {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
}

.timer-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
}

.timer-line strong {
    font-size: 1.65rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}

.state-copy {
    color: var(--muted);
    font-size: 0.86rem;
}

.recording-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--danger);
    animation: recording-pulse 1.2s ease-in-out infinite;
}

@keyframes recording-pulse {
    50% { opacity: 0.38; transform: scale(0.86); }
}

.permission-block audio {
    display: block;
    width: 100%;
    margin-top: 8px;
}

.permission-status {
    display: inline-block;
    margin: 0 0 14px;
    padding: 5px 9px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 650;
}

.permission-ok { color: #166534; background: #dcfce7; }
.permission-error { color: #991b1b; background: #fee2e2; }
.permission-neutral { color: #475569; background: #f1f5f9; }

.analyze-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px;
    border-left: 1px solid var(--border);
    text-align: center;
}

.analyze-button {
    min-height: 52px;
    font-size: 1.08rem;
    font-weight: 750;
}

.analyze-block p {
    margin: 12px 0 8px;
    color: var(--muted);
    font-size: 0.84rem;
}

.active-source {
    color: #334155;
    font-size: 0.8rem;
}

.upload-panel {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: 30px;
    align-items: center;
    padding: 10px 16px;
    margin-bottom: 12px;
}

.upload-panel .form-control {
    max-width: 520px;
    font-size: 0.86rem;
}

.source-block {
    border-left: 1px solid var(--border);
    padding-left: 24px;
}

.source-value {
    margin: 0;
    color: var(--accent-dark);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.helper-text, .muted-label {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 450;
}

.helper-text { margin-top: 7px; }

.flow-panel {
    padding: 12px 16px 14px;
    margin-bottom: 12px;
}

.processing-steps {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    list-style: none;
    margin: 5px 0 0;
    padding: 0;
}

.processing-steps li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    color: #94a3b8;
    font-size: 0.76rem;
    text-align: center;
}

.processing-steps li::before {
    content: "";
    position: absolute;
    top: 14px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: #e2e8f0;
    z-index: 0;
}

.processing-steps li:first-child::before { display: none; }

.processing-steps li.complete::before,
.processing-steps li.active::before { background: var(--accent); }

.step-number {
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    background: #fff;
    color: #64748b;
    font-weight: 750;
    z-index: 1;
}

.processing-steps li.complete,
.processing-steps li.active { color: var(--text); }
.processing-steps li.complete .step-number,
.processing-steps li.active .step-number { border-color: var(--accent); color: var(--accent); }
.processing-steps li.active .step-number { background: var(--accent); color: #fff; }

.processing-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 11px 14px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    color: #1e40af;
    font-weight: 650;
}

.results-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 12px;
    align-items: stretch;
    margin-bottom: 12px;
}

.result-panel, .metadata-panel {
    padding: 16px;
}

.panel-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 12px;
}

.transcription-editor {
    min-height: 340px;
    resize: vertical;
    border-color: #cbd5e1;
    line-height: 1.8;
    font-size: 0.92rem;
}

.analysis-definition {
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.analysis-definition > div {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    border-bottom: 1px solid var(--border);
}

.analysis-definition > div:last-child { border-bottom: 0; }
.analysis-definition dt, .analysis-definition dd { margin: 0; padding: 10px 12px; }
.analysis-definition dt { background: var(--surface-subtle); font-size: 0.82rem; font-weight: 750; }
.analysis-definition dd { border-left: 1px solid var(--border); line-height: 1.55; font-size: 0.84rem; }

.result-list { margin: 0; padding-left: 18px; }
.result-list li + li { margin-top: 9px; }
.evidence { display: block; margin-top: 3px; color: var(--muted); font-size: 0.76rem; }

.action-table { margin: 0; min-width: 650px; font-size: 0.75rem; }
.action-table th { white-space: nowrap; background: var(--surface-subtle); }
.action-table td, .action-table th { padding: 7px 8px; border-color: var(--border); }

.priority { display: inline-block; min-width: 30px; padding: 2px 6px; border-radius: 5px; text-align: center; font-weight: 750; }
.priority-high { color: #b91c1c; background: #fee2e2; }
.priority-medium { color: #b45309; background: #fef3c7; }
.priority-low { color: #166534; background: #dcfce7; }
.priority-unknown { color: #475569; background: #e2e8f0; }

.empty-state {
    display: grid;
    min-height: 340px;
    place-items: center;
    border: 1px dashed #cbd5e1;
    border-radius: 7px;
    color: var(--muted);
    background: var(--surface-subtle);
}

.metadata-panel { margin-bottom: 12px; }
.metadata-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0; }
.metadata-grid div { padding: 11px 12px; border: 1px solid var(--border); border-radius: 7px; text-align: center; }
.metadata-grid dt { color: var(--muted); font-size: 0.72rem; font-weight: 650; }
.metadata-grid dd { margin: 6px 0 0; font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.raw-json-panel summary { cursor: pointer; font-weight: 750; }
.raw-json-panel pre { max-height: 360px; margin: 14px 0 0; padding: 14px; overflow: auto; border-radius: 7px; background: #0f172a; color: #e2e8f0; font-size: 0.78rem; line-height: 1.55; }
.schema-panel { margin-top: 12px; }
.schema-status { margin: 14px 0 0; color: var(--muted); }
.schema-error { color: var(--danger); }

#blazor-error-ui {
    display: none;
    position: fixed;
    inset: auto 0 0;
    z-index: 1000;
    padding: 0.8rem 1.25rem;
    background: #fef3c7;
    border-top: 1px solid #f59e0b;
}

#blazor-error-ui .dismiss { position: absolute; right: 1rem; cursor: pointer; }

.loading-progress { display: block; width: 7rem; height: 7rem; margin: 25vh auto 1rem; }
.loading-progress circle { fill: none; stroke: #e2e8f0; stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child { stroke: var(--accent); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; }
.loading-progress-text { text-align: center; }
.loading-progress-text::after { content: var(--blazor-load-percentage-text, "読み込み中"); }

@media (max-width: 980px) {
    .top-workspace, .results-grid { grid-template-columns: 1fr; }
    .analyze-block { border-top: 1px solid var(--border); border-left: 0; }
    .metadata-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
    .app-container { width: min(100% - 24px, 1500px); padding-top: 18px; }
    .recorder-panel, .upload-panel { grid-template-columns: 1fr; }
    .recorder-controls { border-right: 0; border-bottom: 1px solid var(--border); padding: 0 0 20px; }
    .source-block { border-left: 0; border-top: 1px solid var(--border); padding: 14px 0 0; }
    .processing-steps { grid-template-columns: repeat(3, 1fr); row-gap: 18px; }
    .processing-steps li:nth-child(4)::before { display: none; }
    .analysis-definition > div { grid-template-columns: 1fr; }
    .analysis-definition dd { border-left: 0; border-top: 1px solid var(--border); }
    .panel-heading { flex-direction: column; }
    .panel-heading .btn { width: 100%; }
}

@media (max-width: 480px) {
    .button-row { display: grid; grid-template-columns: 1fr; }
    .action-button { width: 100%; }
    .timer-line { flex-wrap: wrap; }
    .timer-line strong { font-size: 1.4rem; }
    .metadata-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}