@import"https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap";:root{--bg-primary: #0f172a;--bg-secondary: #1e293b;--bg-card: #1e293b;--bg-card-hover: #263349;--border: rgba(148, 163, 184, .15);--border-bright: rgba(148, 163, 184, .3);--text-primary: #f1f5f9;--text-secondary: #94a3b8;--text-muted: #64748b;--color-acidemia: #ef4444;--color-acidemia-bg: rgba(239, 68, 68, .12);--color-acidemia-border: rgba(239, 68, 68, .4);--color-alkalemia: #3b82f6;--color-alkalemia-bg: rgba(59, 130, 246, .12);--color-alkalemia-border: rgba(59, 130, 246, .4);--color-normal: #22c55e;--color-normal-bg: rgba(34, 197, 94, .12);--color-normal-border: rgba(34, 197, 94, .4);--color-warning: #f59e0b;--color-warning-bg: rgba(245, 158, 11, .12);--color-warning-border: rgba(245, 158, 11, .4);--color-secondary-purple: #a855f7;--color-secondary-purple-bg: rgba(168, 85, 247, .12);--color-accent: #38bdf8;--color-accent-glow: rgba(56, 189, 248, .3);--radius-sm: 8px;--radius-md: 14px;--radius-lg: 20px;--radius-xl: 28px;--shadow-card: 0 4px 24px rgba(0, 0, 0, .4);--shadow-glow: 0 0 20px rgba(56, 189, 248, .2)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overscroll-behavior:none}body{font-family:Noto Sans JP,Inter,sans-serif;background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;min-height:100svh;overflow-x:hidden}.app-shell{min-height:100svh;display:flex;flex-direction:column;max-width:600px;margin:0 auto;padding:0 16px;padding-bottom:env(safe-area-inset-bottom,20px)}.app-header{display:flex;align-items:center;gap:12px;padding:16px 0 12px;border-bottom:1px solid var(--border);margin-bottom:20px}.app-header-icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#0ea5e9,#6366f1);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}.app-title{font-size:15px;font-weight:700;line-height:1.2;color:var(--text-primary)}.app-subtitle{font-size:11px;color:var(--text-secondary);margin-top:2px}.header-back-btn{margin-left:auto;padding:8px 16px;background:var(--bg-secondary);border:1px solid var(--border-bright);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:13px;cursor:pointer;transition:all .2s}.header-back-btn:hover{background:var(--bg-card-hover);color:var(--text-primary)}.blood-type-screen{display:flex;flex-direction:column;gap:16px;flex:1;padding-top:8px}.screen-lead{font-size:22px;font-weight:700;line-height:1.3;margin-bottom:4px}.screen-desc{font-size:14px;color:var(--text-secondary);line-height:1.6}.blood-type-cards{display:grid;gap:14px;margin-top:8px}.blood-type-card{background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius-lg);padding:24px 20px;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;gap:16px;-webkit-tap-highlight-color:transparent;position:relative;overflow:hidden}.blood-type-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .25s}.blood-type-card.arterial:before{background:radial-gradient(circle at 30% 50%,var(--color-acidemia-bg),transparent 70%)}.blood-type-card.venous:before{background:radial-gradient(circle at 30% 50%,var(--color-alkalemia-bg),transparent 70%)}.blood-type-card:hover:before,.blood-type-card:active:before{opacity:1}.blood-type-card:hover,.blood-type-card:active{border-color:var(--border-bright);transform:translateY(-2px);box-shadow:var(--shadow-card)}.blood-type-card:active{transform:scale(.98)}.blood-type-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0}.blood-type-card.arterial .blood-type-icon{background:var(--color-acidemia-bg);border:1px solid var(--color-acidemia-border)}.blood-type-card.venous .blood-type-icon{background:var(--color-alkalemia-bg);border:1px solid var(--color-alkalemia-border)}.blood-type-info{flex:1}.blood-type-name{font-size:18px;font-weight:700;margin-bottom:4px}.blood-type-abbr{font-size:12px;font-weight:600;color:var(--color-accent);letter-spacing:.08em;margin-bottom:6px}.blood-type-desc{font-size:13px;color:var(--text-secondary);line-height:1.5}.blood-type-arrow{font-size:20px;color:var(--text-muted);transition:transform .2s}.blood-type-card:hover .blood-type-arrow{transform:translate(3px);color:var(--text-secondary)}.vbg-notice{background:var(--color-alkalemia-bg);border:1px solid var(--color-alkalemia-border);border-radius:var(--radius-md);padding:12px 16px;font-size:12px;color:var(--text-secondary);line-height:1.6}.vbg-notice strong{color:#93c5fd;display:block;margin-bottom:4px;font-size:13px}.input-screen{display:flex;flex-direction:column;gap:0;flex:1}.blood-type-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;font-size:12px;font-weight:600;letter-spacing:.04em;margin-bottom:16px}.blood-type-badge.arterial{background:var(--color-acidemia-bg);color:#fca5a5;border:1px solid var(--color-acidemia-border)}.blood-type-badge.venous{background:var(--color-alkalemia-bg);color:#93c5fd;border:1px solid var(--color-alkalemia-border)}.input-group-title{font-size:11px;font-weight:600;color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;margin-top:20px}.input-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.input-grid.single{grid-template-columns:1fr}.input-field{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 16px;transition:all .2s}.input-field:focus-within{border-color:var(--color-accent);background:#1a2e44;box-shadow:0 0 0 3px var(--color-accent-glow)}.input-label{font-size:11px;color:var(--text-secondary);margin-bottom:4px;font-weight:500;display:flex;align-items:center;gap:4px}.input-label .unit{font-size:10px;color:var(--text-muted)}.input-label .optional-tag{font-size:10px;color:var(--text-muted);background:#64748b33;padding:1px 5px;border-radius:4px}.input-field input{width:100%;background:transparent;border:none;outline:none;color:var(--text-primary);font-size:22px;font-weight:700;font-family:Inter,monospace;letter-spacing:-.02em;caret-color:var(--color-accent)}.input-field input::placeholder{color:var(--text-muted);font-weight:400;font-size:18px}.input-range{font-size:10px;color:var(--text-muted);margin-top:3px}.input-range.abnormal{color:var(--color-warning)}.evaluate-btn{margin-top:24px;width:100%;padding:18px;border:none;border-radius:var(--radius-lg);background:linear-gradient(135deg,#0ea5e9,#6366f1);color:#fff;font-size:17px;font-weight:700;font-family:Noto Sans JP,sans-serif;cursor:pointer;transition:all .25s;position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent;box-shadow:0 4px 20px #0ea5e94d;margin-bottom:32px}.evaluate-btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px #0ea5e973}.evaluate-btn:active{transform:scale(.97)}.evaluate-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}.result-screen{display:flex;flex-direction:column;gap:12px;padding-bottom:32px}.urgent-banner{background:linear-gradient(135deg,#7f1d1d,#991b1b);border:1.5px solid #f87171;border-radius:var(--radius-md);padding:14px 18px;display:flex;align-items:center;gap:12px;animation:pulse-urgent 2s infinite}@keyframes pulse-urgent{0%,to{box-shadow:0 0 #f8717166}50%{box-shadow:0 0 0 8px #f8717100}}.urgent-banner-icon{font-size:24px}.urgent-banner-text{font-size:14px;font-weight:600;color:#fca5a5;line-height:1.4}.vbg-correction-note{background:var(--color-alkalemia-bg);border:1px solid var(--color-alkalemia-border);border-radius:var(--radius-sm);padding:10px 14px;font-size:12px;color:#93c5fd;line-height:1.5}.step-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:border-color .2s}.step-card-header{display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .2s}.step-card-header:hover{background:#ffffff08}.step-num{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--text-muted);min-width:44px}.step-title{font-size:13px;font-weight:600;color:var(--text-secondary);flex:1}.step-badge{padding:5px 12px;border-radius:99px;font-size:13px;font-weight:700;flex-shrink:0}.step-badge.acidemia{background:var(--color-acidemia-bg);color:#f87171;border:1px solid var(--color-acidemia-border)}.step-badge.alkalemia{background:var(--color-alkalemia-bg);color:#93c5fd;border:1px solid var(--color-alkalemia-border)}.step-badge.normal{background:var(--color-normal-bg);color:#86efac;border:1px solid var(--color-normal-border)}.step-badge.warning{background:var(--color-warning-bg);color:#fcd34d;border:1px solid var(--color-warning-border)}.step-badge.purple{background:var(--color-secondary-purple-bg);color:#d8b4fe;border:1px solid rgba(168,85,247,.35)}.step-badge.info{background:#38bdf81a;color:#7dd3fc;border:1px solid rgba(56,189,248,.3)}.step-badge.skip{background:#64748b26;color:var(--text-muted);border:1px solid rgba(100,116,139,.25)}.step-chevron{font-size:16px;color:var(--text-muted);transition:transform .25s}.step-card.expanded .step-chevron{transform:rotate(180deg)}.step-body{padding:0 18px 16px;border-top:1px solid var(--border);font-size:13px;color:var(--text-secondary);line-height:1.75;white-space:pre-line;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.step-body-inner{padding-top:14px}.differentials-card{background:var(--bg-card);border:1px solid var(--border-bright);border-radius:var(--radius-lg);padding:18px}.differentials-title{font-size:13px;font-weight:700;color:var(--text-secondary);margin-bottom:12px;display:flex;align-items:center;gap:6px}.diff-list{list-style:none;display:flex;flex-direction:column;gap:4px}.diff-list li{font-size:12.5px;color:var(--text-secondary);line-height:1.6;padding-left:4px}.diff-list li:first-child,.diff-list li:has(+li:first-of-type){font-weight:600}.summary-banner{border-radius:var(--radius-lg);padding:18px;margin-bottom:4px}.summary-banner.acidemia{background:linear-gradient(135deg,#ef444426,#ef44440d);border:1.5px solid var(--color-acidemia-border)}.summary-banner.alkalemia{background:linear-gradient(135deg,#3b82f626,#3b82f60d);border:1.5px solid var(--color-alkalemia-border)}.summary-banner.normal{background:linear-gradient(135deg,#22c55e26,#22c55e0d);border:1.5px solid var(--color-normal-border)}.summary-main{font-size:28px;font-weight:800;line-height:1.1;margin-bottom:6px}.summary-banner.acidemia .summary-main{color:#f87171}.summary-banner.alkalemia .summary-main{color:#93c5fd}.summary-banner.normal .summary-main{color:#86efac}.summary-sub{font-size:14px;font-weight:500;color:var(--text-secondary)}.input-review{background:var(--bg-secondary);border-radius:var(--radius-md);padding:12px 16px;display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:4px}.input-review-item{display:flex;align-items:baseline;gap:4px}.input-review-label{font-size:11px;color:var(--text-muted)}.input-review-value{font-size:14px;font-weight:700;font-family:Inter,monospace;color:var(--text-primary)}.section-divider{height:1px;background:var(--border);margin:4px 0}.text-muted{color:var(--text-muted)}.text-sm{font-size:12px}.evaluation-screen{display:flex;flex-direction:column;gap:16px;position:relative}.sticky-summary-wrap{position:sticky;top:0;z-index:100;margin:0 -16px;padding:0 16px 12px;background:var(--bg-primary);opacity:0;pointer-events:none;transform:translateY(-8px);transition:all .3s}.sticky-summary-wrap.visible{opacity:1;pointer-events:auto;transform:translateY(0)}.summary-banner.compact{padding:12px 16px;margin-bottom:0;box-shadow:0 8px 32px #0006}.summary-banner.compact .summary-main{font-size:20px;margin-bottom:2px}.summary-banner.compact .summary-sub{font-size:13px}.input-section{display:flex;flex-direction:column}.input-grid.optional-grid{grid-template-columns:repeat(3,1fr)}.compact-input{padding:10px 12px}.compact-input input{font-size:18px}.compact-input .input-label{font-size:10px}.compact-input .optional-tag{display:none}.result-section{display:flex;flex-direction:column;gap:12px;animation:fadeIn .3s ease}.section-divider-title{font-size:14px;font-weight:700;color:var(--text-primary);margin:8px 0 4px;display:flex;align-items:center;gap:8px}.section-divider-title:before,.section-divider-title:after{content:"";flex:1;height:1px;background:var(--border)}.step-cards-container{display:flex;flex-direction:column;gap:8px}.waiting-for-input{text-align:center;padding:40px 20px;color:var(--text-muted);font-size:14px;line-height:1.6;border:1px dashed var(--border);border-radius:var(--radius-lg);margin-top:20px}.reset-btn{margin-top:32px;width:100%;padding:16px;border:1px solid var(--border-bright);border-radius:var(--radius-lg);background:transparent;color:var(--text-secondary);font-size:15px;font-weight:600;cursor:pointer;transition:all .2s}.reset-btn:hover{background:var(--bg-card);color:var(--text-primary)}