*{box-sizing:border-box;margin:0;padding:0}:root{--color-bg: #1a1a2e;--color-surface: #16213e;--color-surface-light: #1f2b4d;--color-primary: #e94560;--color-primary-light: #ff6b6b;--color-secondary: #0f3460;--color-text: #eaeaea;--color-text-muted: #a0a0a0;--color-success: #4ade80;--color-warning: #fbbf24;--color-error: #ef4444;--speaker-a: #60a5fa;--speaker-b: #f472b6;--speaker-c: #a78bfa;--speaker-d: #34d399;--speaker-e: #fbbf24;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "SF Mono", "Fira Code", monospace;--touch-target: 44px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-full: 9999px}html,body{font-family:var(--font-sans);background-color:var(--color-bg);color:var(--color-text);line-height:1.5;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{display:flex;flex-direction:column}#root{flex:1;display:flex;flex-direction:column;min-height:100vh}.container{width:100%;max-width:600px;margin:0 auto;padding:var(--spacing-md)}button{font-family:inherit;font-size:1rem;font-weight:500;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all .2s ease;min-height:var(--touch-target);padding:var(--spacing-sm) var(--spacing-md)}button:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background-color:var(--color-primary);color:#fff}.btn-primary:hover:not(:disabled){background-color:var(--color-primary-light)}.btn-secondary{background-color:var(--color-surface-light);color:var(--color-text)}.btn-secondary:hover:not(:disabled){background-color:var(--color-secondary)}.btn-icon{width:var(--touch-target);height:var(--touch-target);padding:0;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);background:transparent}.btn-large{width:80px;height:80px;border-radius:var(--radius-full);font-size:1.5rem}input,textarea{font-family:inherit;font-size:1rem;width:100%;padding:var(--spacing-sm) var(--spacing-md);background-color:var(--color-surface);border:1px solid var(--color-surface-light);border-radius:var(--radius-md);color:var(--color-text);min-height:var(--touch-target)}input:focus,textarea:focus{outline:none;border-color:var(--color-primary)}input::placeholder,textarea::placeholder{color:var(--color-text-muted)}.card{background-color:var(--color-surface);border-radius:var(--radius-lg);padding:var(--spacing-md);margin-bottom:var(--spacing-md)}.header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md);background-color:var(--color-surface);position:sticky;top:0;z-index:100}.header h1{font-size:1.25rem;font-weight:600}.main{flex:1;padding:var(--spacing-md);padding-bottom:calc(var(--spacing-xl) + env(safe-area-inset-bottom))}.spinner{width:24px;height:24px;border:3px solid var(--color-surface-light);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.recording-pulse{animation:pulse 1.5s ease-in-out infinite}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-xl);text-align:center;color:var(--color-text-muted)}.empty-state svg{width:64px;height:64px;margin-bottom:var(--spacing-md);opacity:.5}@supports (padding-bottom: env(safe-area-inset-bottom)){.main{padding-bottom:calc(var(--spacing-xl) + env(safe-area-inset-bottom))}}@media(prefers-color-scheme:light){:root{--color-bg: #f5f5f5;--color-surface: #ffffff;--color-surface-light: #e5e5e5;--color-text: #1a1a2e;--color-text-muted: #666666}}.recordings-list{display:flex;flex-direction:column;min-height:100vh}.recordings-list .main{padding-bottom:calc(80px + var(--spacing-xl) + env(safe-area-inset-bottom))}.recordings{display:flex;flex-direction:column;gap:var(--spacing-sm)}.recording-card{width:100%;text-align:left;cursor:pointer;transition:transform .2s,box-shadow .2s;border:none;background-color:var(--color-surface)}.recording-card:hover{transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.recording-card:active{transform:translateY(0)}.recording-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-sm)}.recording-card-header h3{font-size:1rem;font-weight:600;flex:1;word-break:break-word}.delete-button{flex-shrink:0;color:var(--color-text-muted)}.delete-button:hover{color:var(--color-error)}.recording-card-meta{display:flex;align-items:center;gap:var(--spacing-md);margin-top:var(--spacing-xs);font-size:.8125rem;color:var(--color-text-muted)}.transcribed-badge{background-color:var(--color-success);color:var(--color-bg);padding:2px 8px;border-radius:var(--radius-sm);font-size:.75rem;font-weight:500}.recording-preview{margin-top:var(--spacing-sm);font-size:.875rem;color:var(--color-text-muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.fab-container{position:fixed;bottom:0;left:0;right:0;padding:var(--spacing-md);padding-bottom:calc(var(--spacing-md) + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--color-bg) 20%);display:flex;justify-content:center}.fab{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-full);font-weight:600;box-shadow:0 4px 12px #e9456066}.fab:hover{box-shadow:0 6px 20px #e9456080}.audio-recorder{display:flex;flex-direction:column;min-height:100vh}.recorder-main{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1}.error-message{background-color:#ef44441a;border:1px solid var(--color-error);color:var(--color-error);padding:var(--spacing-md);border-radius:var(--radius-md);margin-bottom:var(--spacing-lg);text-align:center;width:100%;max-width:400px}.recorder-display{display:flex;flex-direction:column;align-items:center;margin-bottom:var(--spacing-xl)}.duration-display{font-size:4rem;font-weight:300;font-variant-numeric:tabular-nums;letter-spacing:-.02em}.recording-indicator{display:flex;align-items:center;gap:var(--spacing-sm);color:var(--color-text-muted);margin-top:var(--spacing-sm)}.recording-dot{width:12px;height:12px;border-radius:50%;background-color:var(--color-text-muted)}.recording-dot.active{background-color:var(--color-error);animation:pulse 1s ease-in-out infinite}.recorder-controls{display:flex;align-items:center;justify-content:center;gap:var(--spacing-lg)}.record-button{background-color:var(--color-error)}.record-button:hover:not(:disabled){background-color:#dc2626}.stop-button{background-color:var(--color-error)}.recorder-hint{color:var(--color-text-muted);margin-top:var(--spacing-lg)}.processing-container{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md)}.spinner.large{width:48px;height:48px;border-width:4px}.processing-status{font-size:1.125rem;font-weight:500}.processing-hint{color:var(--color-text-muted);font-size:.875rem}.transcript-view{display:flex;flex-direction:column;min-height:100vh}.recording-info h2{font-size:1.125rem;font-weight:600;margin-bottom:var(--spacing-xs)}.recording-meta{font-size:.875rem;color:var(--color-text-muted)}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-md)}.section-header h3{font-size:1rem;font-weight:600;margin:0}.copy-button{color:var(--color-text-muted);transition:color .2s}.copy-button:hover{color:var(--color-primary)}.copy-button svg{width:20px;height:20px}.transcript-section{margin-bottom:var(--spacing-lg)}.transcript-section h3{font-size:1rem;font-weight:600;margin-bottom:var(--spacing-md)}.utterances{display:flex;flex-direction:column;gap:var(--spacing-md)}.utterance{background-color:var(--color-surface);border-radius:var(--radius-md);padding:var(--spacing-md)}.utterance-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-sm)}.speaker-label{background:none;border:none;font-size:.875rem;font-weight:600;cursor:pointer;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);transition:background-color .2s}.speaker-label:hover{background-color:var(--color-surface-light)}.speaker-a{color:var(--speaker-a)}.speaker-b{color:var(--speaker-b)}.speaker-c{color:var(--speaker-c)}.speaker-d{color:var(--speaker-d)}.speaker-e{color:var(--speaker-e)}.timestamp{font-size:.75rem;color:var(--color-text-muted);font-variant-numeric:tabular-nums}.utterance-text{font-size:.9375rem;line-height:1.6}.summary-section{margin-bottom:var(--spacing-lg)}.summary-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-md)}.summary-header h3{font-size:1rem;font-weight:600;margin:0}.summary-actions,.summary-header .btn-primary{display:flex;align-items:center;gap:var(--spacing-sm)}.summary-hint{color:var(--color-text-muted);font-size:.875rem}.summary-content{white-space:pre-wrap;line-height:1.7}.summary-content p{margin-bottom:var(--spacing-sm)}.summary-content p:last-child{margin-bottom:0}.regenerate-button{margin-top:var(--spacing-md)}.error-message{background-color:#ef44441a;border:1px solid var(--color-error);color:var(--color-error);padding:var(--spacing-md);border-radius:var(--radius-md);margin-bottom:var(--spacing-md);font-size:.875rem}.empty-hint{font-size:.875rem;margin-top:var(--spacing-sm)}.modal-overlay{position:fixed;inset:0;background-color:#0009;display:flex;align-items:center;justify-content:center;padding:var(--spacing-md);z-index:200}.modal{background-color:var(--color-surface);border-radius:var(--radius-lg);padding:var(--spacing-lg);width:100%;max-width:320px}.modal h3{font-size:1.125rem;font-weight:600;margin-bottom:var(--spacing-md)}.modal input{margin-bottom:var(--spacing-md)}.modal-actions{display:flex;gap:var(--spacing-sm);justify-content:flex-end}.markdown-content{white-space:normal}.markdown-content h1{font-size:1.5rem;font-weight:700;margin-bottom:var(--spacing-md);margin-top:var(--spacing-lg);color:var(--color-text);border-bottom:1px solid var(--color-surface-light);padding-bottom:var(--spacing-sm)}.markdown-content h1:first-child{margin-top:0}.markdown-content h2{font-size:1.25rem;font-weight:600;margin-bottom:var(--spacing-sm);margin-top:var(--spacing-lg);color:var(--color-text)}.markdown-content h3{font-size:1.1rem;font-weight:600;margin-bottom:var(--spacing-sm);margin-top:var(--spacing-md);color:var(--color-text)}.markdown-content p{margin-bottom:var(--spacing-md);line-height:1.7}.markdown-content ul,.markdown-content ol{margin-bottom:var(--spacing-md);padding-left:var(--spacing-lg)}.markdown-content li{margin-bottom:var(--spacing-xs);line-height:1.6}.markdown-content li::marker{color:var(--color-primary)}.markdown-content strong{font-weight:600;color:var(--color-text)}.markdown-content em{font-style:italic;color:var(--color-text-muted)}.markdown-content code{background-color:var(--color-surface-light);padding:2px 6px;border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:.875em}.markdown-content pre{background-color:var(--color-surface-light);padding:var(--spacing-md);border-radius:var(--radius-md);overflow-x:auto;margin-bottom:var(--spacing-md)}.markdown-content pre code{background:none;padding:0}.markdown-content blockquote{border-left:3px solid var(--color-primary);padding-left:var(--spacing-md);margin-left:0;margin-bottom:var(--spacing-md);color:var(--color-text-muted);font-style:italic}.markdown-content hr{border:none;border-top:1px solid var(--color-surface-light);margin:var(--spacing-lg) 0}.settings{display:flex;flex-direction:column;min-height:100vh}.settings-section{margin-bottom:var(--spacing-lg)}.settings-section h2{font-size:1.125rem;font-weight:600;margin-bottom:var(--spacing-sm)}.settings-description{color:var(--color-text-muted);font-size:.875rem;margin-bottom:var(--spacing-lg)}.settings-field{margin-bottom:var(--spacing-lg)}.settings-field label{display:block;font-weight:500;margin-bottom:var(--spacing-xs)}.field-hint{font-size:.8125rem;color:var(--color-text-muted);margin-bottom:var(--spacing-sm)}.field-hint a{color:var(--color-primary);text-decoration:none}.field-hint a:hover{text-decoration:underline}.input-group{display:flex;gap:var(--spacing-sm)}.input-group input{flex:1}.input-group button{flex-shrink:0;min-width:80px}.status-message{font-size:.8125rem;margin-top:var(--spacing-xs)}.status-message.valid{color:var(--color-success)}.status-message.invalid{color:var(--color-error)}.save-button{width:100%;margin-top:var(--spacing-md)}
