:root { --risk-red: #a44536; --risk-amber: #b26c00; --risk-teal: #1a7f8e; --risk-pale: #fff3dc; }
.risk-hero::before { background: linear-gradient(125deg, transparent 0 44%, rgba(164,69,54,.70) 44.3% 45.3%, transparent 45.7% 100%), linear-gradient(155deg, transparent 0 70%, rgba(239,162,1,.60) 70.3% 71.3%, transparent 71.7%); }
.risk-hero::after { background: var(--risk-teal); }
.risk-hero .hero-card { border-top: 5px solid var(--orange); }
.risk-intro { max-width: 810px; margin-bottom: 26px; }
.risk-intro h2 { margin: 0 0 12px; color: var(--navy); font: 800 clamp(1.7rem,3vw,2.5rem)/1.1 var(--display); letter-spacing: -.025em; }
.risk-intro p { margin: 0; color: var(--gray); }
.risk-context { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; padding: 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--white); box-shadow: var(--shadow); }
.risk-context .field-help { margin-top: 5px; }
.mix-panel { overflow: hidden; margin-top: 22px; border: 1px solid var(--border); border-radius: 15px; background: var(--white); box-shadow: var(--shadow); }
.mix-panel-header { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 22px; border-bottom: 1px solid var(--border); background: #fbfdff; }
.mix-panel-header h2 { margin: 0; color: var(--navy); font: 800 1.6rem var(--display); }
.mix-panel-header p { max-width: 640px; margin: 7px 0 0; color: var(--gray); font-size: .84rem; }
.mix-total { min-width: 130px; padding: 10px; border-radius: 10px; color: var(--navy); background: var(--orange-pale); text-align: center; }
.mix-total span { display: block; color: var(--gray); font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.mix-total strong { display: block; font-size: 1.35rem; }
.mix-total.warning { color: #8a3e20; background: #fff0dc; }
.mix-table { width: 100%; border-collapse: collapse; }
.mix-table th { padding: 12px 16px; color: var(--slate); background: var(--cream); font-size: .69rem; letter-spacing: .07em; text-align: left; text-transform: uppercase; }
.mix-table td { padding: 10px 16px; border-top: 1px solid var(--border); vertical-align: middle; }
.mix-table .source-name { color: var(--navy); font-size: .84rem; font-weight: 800; }
.mix-table input, .mix-table select { width: 100%; min-height: 37px; padding: 7px 8px; border: 1px solid #bdcad5; border-radius: 6px; background: #fff; color: var(--ink); font: inherit; font-size: .8rem; }
.mix-table input { max-width: 110px; }
.mix-table .share-cell { width: 145px; }
.mix-table .trend-cell, .mix-table .risk-cell { width: 176px; }
.mix-table .pct-wrap { display: flex; align-items: center; gap: 6px; color: var(--gray); font-size: .8rem; }
.mix-panel-note { padding: 14px 20px; color: var(--gray); background: #fbfdff; font-size: .75rem; }
.stress-panel { margin-top: 26px; padding: 23px; border: 1px solid var(--border); border-radius: 15px; background: var(--white); box-shadow: var(--shadow); }
.stress-panel h2 { margin: 0; color: var(--navy); font: 800 1.6rem var(--display); }
.stress-panel > p { margin: 7px 0 16px; color: var(--gray); font-size: .85rem; }
.stress-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.stress-check { display: flex; gap: 10px; align-items: flex-start; min-height: 65px; padding: 13px; border: 1px solid var(--border); border-radius: 9px; background: #fcfdff; cursor: pointer; }
.stress-check input { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--risk-red); }
.stress-check span { color: var(--ink); font-size: .79rem; line-height: 1.3; }
.exposure-grid { display: grid; grid-template-columns: 1.15fr .85fr .8fr; gap: 13px; margin-top: 20px; }
.exposure-grid .wide { grid-column: 1 / -1; }
.exposure-grid textarea { min-height: 84px; resize: vertical; }
.risk-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.risk-profile { margin-top: 31px; padding: clamp(22px,4vw,36px); border-radius: 16px; color: var(--white); background: linear-gradient(135deg, var(--navy), #214c78 60%, var(--risk-teal)); box-shadow: var(--shadow); }
.risk-profile h2 { margin: 0; color: var(--white); font: 800 clamp(1.7rem,3vw,2.35rem)/1.1 var(--display); }
.risk-profile .profile-intro { max-width: 740px; margin: 8px 0 18px; color: rgba(255,255,255,.80); font-size: .86rem; }
.risk-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.risk-metric { padding: 15px; border-radius: 10px; color: var(--navy); background: rgba(255,255,255,.96); }
.risk-metric span { display: block; color: var(--slate); font-size: .67rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.risk-metric strong { display: block; margin-top: 5px; font: 800 1.55rem var(--display); }
.risk-metric small { display: block; margin-top: 4px; color: var(--gray); font-size: .72rem; }
.risk-result { display: grid; grid-template-columns: auto 1fr; gap: 16px; margin-top: 18px; padding: 20px; border-radius: 12px; color: var(--ink); background: rgba(255,255,255,.97); }
.risk-result-mark { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 50%; color: var(--white); background: var(--risk-amber); font: 900 1.25rem var(--display); }
.risk-result.high .risk-result-mark { background: var(--risk-red); }
.risk-result.low .risk-result-mark { background: var(--risk-teal); }
.risk-result h3 { margin: 0; color: var(--navy); font: 800 1.45rem var(--display); }
.risk-result p { margin: 6px 0 0; color: var(--gray); font-size: .85rem; }
.risk-result .next-action { margin-top: 10px; color: var(--navy); font-size: .78rem; font-weight: 800; }
.risk-result .basis { margin-top: 10px; color: var(--gray); font-size: .72rem; }
.planning-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 33px; }
.planning-card { padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--white); box-shadow: var(--shadow); }
.planning-card .card-label { display: inline-block; padding: 4px 7px; border-radius: 999px; color: var(--navy); background: var(--orange-pale); font-size: .64rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.planning-card h3 { margin: 11px 0 7px; color: var(--navy); font: 800 1.23rem var(--display); }
.planning-card p { margin: 0; color: var(--gray); font-size: .78rem; line-height: 1.35; }
.local-note { margin: 12px 0 0; color: rgba(255,255,255,.76); font-size: .73rem; }
@media (max-width: 800px) { .risk-context, .stress-grid, .exposure-grid, .risk-metrics, .planning-cards { grid-template-columns: 1fr; } .mix-panel-header { align-items: flex-start; flex-direction: column; } .mix-table, .mix-table tbody, .mix-table tr, .mix-table td { display: block; width: 100%; } .mix-table thead { display: none; } .mix-table tr { padding: 12px 16px; border-top: 1px solid var(--border); } .mix-table td { padding: 5px 0; border: 0; } .mix-table .source-name::after { content: ''; } .mix-table .share-cell, .mix-table .trend-cell, .mix-table .risk-cell { width: 100%; } .mix-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--slate); font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } }
@media (max-width: 560px) { .risk-result { grid-template-columns: 1fr; } .risk-result-mark { width: 38px; height: 38px; } }
@media print { .risk-actions, .nav-toggle { display: none !important; } .mix-panel, .stress-panel, .risk-profile { box-shadow: none; break-inside: avoid; } .risk-profile { color: var(--ink); background: var(--white); border: 1px solid var(--border); } .risk-profile h2 { color: var(--navy); } .risk-profile .profile-intro { color: var(--gray); } }