@charset "utf-8";
/*-------------------------------------------
OSTAi / MOSTAi 計算器 
-------------------------------------------*/
#page-header{ width:1000px; float:none;}
#main-content{ width:1000px; float:none; overflow:hidden;}

/*-------------------------------------------
Buttons
-------------------------------------------*/
:root{
    --text:#000;
    --muted:#6b7280;
    --primary:#A81F87;   /* TOA 紫 */
    --good:#0e995c;
    --good-rgb:14,153,92;
    --bad:#dd1b1b;
    --bad-rgb:221,27,27;
    --border:#ccc;
    --axis:#374151;
    --shadow:0 3px 12px rgba(2,24,60,0.06);
    --redFill:rgba(214, 69, 69, 0.25);
    --blueFill:rgba(99, 179, 237, 0.22);
}
.part-title{
    /* font-size:clamp(22px, 3.6vw, 34px); */
    background-color:#fcf6f7;
    font-size:1.5rem; font-weight:700;
    line-height:1;
    margin-bottom:.75em;
    padding:8px 5px;
}

.alert{
    padding:15px 15px;
    background-color:rgba(var(--bad-rgb), .05);
    border:2px solid rgba(var(--bad-rgb), .6);
    color:var(--bad);
    font-size:16px; font-weight:700;
    line-height:1.5;
    display:none;
    margin:10px auto 0;
}
    .alert a{
        color:#0c63e4;                   /* 亮藍色連結 */
        text-decoration:underline;
        font-weight:bold;
    }
    .alert a:focus,
    .alert a:hover{
        color:#084298;                   /* 深藍 hover 效果 */
        text-decoration:none;
    }

.grid{
    display:grid;
    gap:30px;
    margin-bottom:30px;
}
    .cols{
        grid-template-columns:350px 1fr;
        align-items:start;
    }

.card{
    border:1px solid var(--border);
    border-radius:8px;
    padding:15px;
    box-shadow:var(--shadow);
}
    .card.calculator{
        border:none;
        border-right:1px solid #e1e1e1;
        border-radius:0;
        box-shadow:none;
        padding:0 40px 0 0;
    }
        .calculator .row{
            display:grid;
            gap:15px;
            grid-template-columns:1fr 1fr;
        }
            .calculator label{
                display:block;
                color:var(--muted);
                font-size:14px;
                line-height:1;
                margin-bottom:5px;
            }
            .calculator select{
                font-size:16px;
                color:#000;
                background-color:#f9fafb;
                margin:0;
                width:100%;
            }
            .age-display{
                color:#000;
                font-size:1.875rem; font-weight:700;
                line-height:1;
            }
            .metric{
                /* 風險圖 標題 */
                color:var(--primary);
                font-size:1.25rem; font-weight:700;
                line-height:1;
            }
            .sexF{
                color:#e62847;
            }
            .sexM{
                color:#3863d2;
            }
            .value{
                color:#000;
                font-size:1.875rem; font-weight:700;
            }
            [type='button'].risk-banner{
                appearance:none;
                -webkit-appearance:none;
                -moz-appearance:none;
                background-color:var(--primary);
                border:none;
                border-radius:3px;
                box-shadow:inset 0 -2px 0 rgba(0, 0, 0, .2), 0 1px 3px rgba(0, 0, 0, .3);
                color:#fff;
                font-size:1.125rem;
                line-height:1;
                padding:15px 10px;
                width:100%;
            }
            .risk-banner{
                font-weight:700;
                padding:15px;
                text-align:center;
            }
                .risk-banner strong{
                    display:inline-block;
                    font-size:2.5rem;
                    margin-left:10px;
                }
            .risk-high,
            .risk-low{
                border-radius:0;
                font-size:1.75rem; font-weight:700;
            }
            .risk-high{
                background-color:rgba(var(--bad-rgb),.15);
                color:var(--bad);
                margin-top:20px;
            }
            .risk-low{
                background-color:rgba(var(--good-rgb),.15);
                color:var(--good);
                margin-top:20px;
            }
            .badge{
                background-color:#fff8e2;
                color:chocolate;
                font-size:.875rem;
                padding:5px 8px;
            }

    .card.results{
        border:none;
        border-radius:0;
        box-shadow:none;
        padding:0;
    }
        .results .metric{
            margin-bottom:10px;
        }
        canvas{
            width:100%;
            height:auto;
            border-radius:12px;
            border:1px solid var(--border);
            background:#fff;
        }
        .legend{
            display:flex;
            gap:5px;
            align-items:center;
            color:var(--muted);
            font-size:.875rem;
            margin-top:8px;
            flex-wrap:wrap;
        }
            .box{
                width:14px;
                height:14px;
                border-radius:2px;
                box-shadow:inset 0 0 0 1px rgba(0,0,0,.3);
                margin-top:-1px;
                margin-left:15px;
            }
            .red{
                background:var(--redFill);
                margin-left:0;
            }
            .blue{
                background:var(--blueFill);
            }
            .you{
                width:12px;height:12px;
                border-radius:50%;
                background:#e11d48;
                border:2px solid #fff;
                box-shadow:0 2px 6px rgba(0,0,0,.4);
            }

    .card.desc{
        color:#111;
    }
        .card.desc > ul,
        .card.desc > ol{
            padding-left:1.4em;
        }
        .card.desc .remark{
            color:#777;
            font-size:.75rem;
        }

.references{
    margin-top:1em;
}
    .references h3{
        margin:0 0 .5em;
        color:chocolate;
        font-size:1rem;
        line-height:1;
    }
    .references ol{
        counter-reset:item;
        line-height:1.5;
        list-style:none;
        padding:0;
    }
        .references ol > li{
            counter-increment:item;
            border-bottom:1px dotted #ccc;
            position:relative;
            padding-left:1.4em; padding-bottom:5px;
            margin-bottom:5px;
        }
            .references ol > li::before{
                content:counter(item) ". ";
                font-weight:700;
                position:absolute; left:0;
            }