@charset "utf-8";

:root {
    --header-height: 4rem;
    --vh: 1vh; /* 旧浏览器回退 */
    --dvh: 1dvh; /* 现代浏览器动态高度 */
}
/* iOS 14.3 以下特殊修复 */
@supports (-webkit-touch-callout: none) {
    :root {
        --dvh: calc(100vh / 100 - 0.5px);
    }
}


:root,
:root[data-theme="light"] {
    --h: 223;
    --s: 82%;
    --l: 98%;
    
    --innerBg: hsl(var(--h), var(--s), calc(var(--l) + 2%));
    --decor: hsl(217, 88%, 60%); /* #3b82f6 */
    --line: #CCC;
    
    --th: 210;
    --ts: 29%;
    --tl: 24%;

    --text2: #72818f;
    --warn: #fce4a8;
    --shadow: hsl(from var(--decor) h s l / 0.4);
    
}


@media (prefers-color-scheme: dark) {
    :root,
    :root[data-theme="dark"] {
        --h:220;
        --s:4%;
        --l:15%;

        --innerBg: hsl(var(--h), var(--s), calc( var(--l) + 10%));

        --th:228;
        --ts:20%;
        --tl:90%;

        --line: #777;
        --warn: #585241;
        --shadow: hsl(from var(--decor) h s l / 0.8);
    }
}

:root[data-theme="dark"] {
    --h:220;
    --s:4%;
    --l:15%;

    --th:228;
    --ts:20%;
    --tl:90%;

    --innerBg: hsl(var(--h), var(--s), calc( var(--l) + 10%));
    --line: #777;
    --warn: #585241;
    --shadow: hsl(from var(--decor) h s l / 0.8);
}

:root{
    --bg: hsl(var(--h), var(--s), var(--l)); /*主背景*/
    --text: hsl(var(--th), var(--ts), var(--tl)); /*主文本*/
    
}

/* ========== frame ========== */

html {font-size: 16px;}

body {
    color: var(--text);
    background-color: var(--bg);
    font: 1rem/1.5 system-ui, "-apple-system", "Segoe UI", sans-serif, "Helvetica Neue", Tahoma, Verdana, "Microsoft YaHei", Arial;
    clear: both;


    /* background-size: cover;
    background-position: center;

    background-blend-mode: overlay; */
}



article{
    width: clamp(300px, 80vw, 1024px);
    margin: 2rem auto 0 auto;
    padding: 2rem;
    background-color: var(--innerBg);
    border-radius: 1rem;
    box-shadow: 0 0 10px hsl(from var(--text) h s l / 0.2);
}


.language-buttons {
            position: fixed;
            right: 0;
            top: 30%;
            display: flex;
            flex-direction: column;
            gap: 10px;
            z-index: 1000;

        }
        
        .lang-btn {
            padding: 10px 15px;
            border: none;
            border-radius: 20px 0 0 20px;
            background: #007acc;
            color: white;
            
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
            user-select: none;
        }
        
        .lang-btn:hover:not(.disabled) {
            background: #005fa3;
            transform: scale(1.05);
        }
        
        .lang-btn.disabled {
            background: #ccc;
            pointer-events: none;
            opacity: 0.5;
            cursor: default;
        }
        
table{ border-collapse:collapse ; width: 100%;}
th,td{padding:0.5rem; border:1px solid #CCC; text-align: center;}
th{color:hsl(from var(--text) h s l / 0.8)}


h2{margin:2rem 0 0.5rem 0; }
h3,h4{margin:1.7rem 0 0 0; }
p{margin: 0.7rem 0 0.4rem 0;}
footer{margin-top: 2rem;}