:root {
    --color-theme: #0d324d;
    --color-title: #333;
    --color-content: #666;
    --color-unit: #999;
    --color-bg_title: #EEE;
    --transition-speed: 0.3s;
}

* {
    text-align: center;
    font-family: 'Cambria', Courier, monospace;
    transition: all 0.5s ease;
}

html {
    background: #F0F3F5;
    //background: #AAF;
    //background: url('https://picsum.photos/id/1048/1920/1080');
    font-size: 10px;
    max-width: 1200px;
    margin: auto;
}

header {
    position: fixed;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    gas: 0;
    top: 0;
    left: 0;
    right: 0;
    height: 14rem;
    padding: 0;
    padding-bottom: 0.2rem;
    z-index: 10;
    font-size: 1.4rem;
    color: var(--color-title);
    backdrop-filter: blur(2px);
    background: #FFFFFFFF;
    box-shadow: 6px 0px 10px #AAA;
}

header * {
    margin: 0;
}

header h4 {
    color: var(--color-unit);
}

header table {
    margin: 0;
    margin-top: 0.5rem;
}

header table tr {
    font-size: 1.8rem;
    height: 3.2rem;
}
header table tr.title {
    height: 5rem;
    line-height: 1.2rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
header table td {
    color: var(--color-theme);
    font-weight: 700;
}

table span {
    font-size: 1.2rem;
    color: var(--color-unit);
}
table tr {
    height: 3.2rem;
}

section {
    position: fixed;
    top: 0.2rem;
    bottom: 0.5rem;
    left: 0;
    right: 0;
    overflow: auto;
    padding: 0;
    padding-top: 14rem;
}

abbr {
    text-decoration: none;
}

section::-webkit-scrollbar {
  width: 0px;
}

.glass {
    border-radius: 1.2rem;
    box-shadow: -8px -8px 15px rgba(255, 255, 255, .7),
        10px 10px 10px rgba(0, 0, 0, .2),
        inset 8px 8px 15px rgba(255, 255, 255, .7),
        inset 10px 10px 10px rgba(0, 0, 0, .2);
    text-shadow: 12px 6px 3px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(1px);
    align-items: center;
}

button {
    width: 200px;
    height: 60px;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    border: none;
    border-radius: 1rem;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-content);
    background: var(--color-bg_title);
    text-shadow: 2px 2px 1px #AAA; 
    box-shadow: 6px 6px 6px #CCC, -6px -6px 6px #FFF;
    cursor: pointer;
    transition: all 0.5s ease;
}
button:hover {
    color: var(--color-theme);
    transform: translate(0px, -10px);
}
button:active {
    text-shadow: 0px 0px 0px #AAA; 
    box-shadow: inset 6px 6px 6px #CCC, inset -6px -6px 6px #FFF;
    transform: translate(0px, -5px);
}

input, select{
    border: none;
    border-bottom: 1px solid #DDD;
    width: 80%;
    height: 80%;
    font-size: 1.4rem;
    outline: none;
}
input:focus, select:focus{
    background: #F0F0F0;
}

input:hover{
    background: #DDD;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

/*表格通用格式*/
table {
    width: 90%;
    margin: auto;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    background: #FFF;
    font-size: 1.6rem;
    table-layout: fixed;
    border-collapse: collapse; //合并边框;
    white-space: nowrap; //禁止文字换行;
}

th {
    background: var(--color-bg_title);
}

/*单元格通用格式*/
th {
    border-top: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    border: 1px solid #aaa;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    height: 15px;
    color: var(--color-title);
}

td {
    border-bottom: 1px solid #aaa;
    border: 1px solid #aaa;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    height: 15px;
    color: var(--color-content);
}

/*--------------------------------------------------------------------------------------------------------------------------------------------*/

.water {
    position: absolute;
    top: 300px;
    left: 430px;
    // width: 200px;
    // height: 200px;
    border-radius: 45% 55% 57% 43% / 48% 48% 52% 52%;
    //     box-shadow: 10px 20px 30px rgba(0,0,0,.5) inset,
    //                 10px 10px 20px rgba(0,0,0,.3),
    //                  15px 15px 30px rgba(0,0,0,.05),
    //                 -10px -10px 15px rgba(255,255,255,0.8) inset;

    box-shadow: inset 10px 20px 30px rgba(0, 0, 0, 0.4),
        10px 10px 20px rgba(0, 0, 0, 0.2),
        15px 15px 30px rgba(0, 0, 0, 0.1),
        inset -10px -10px 15px rgba(255, 255, 255, 0.8);

    //  animation: action 3s linear infinite;
}

/*高光*/
.water::after {
    content: '';
    width: 20px;
    height: 20px;
    position: absolute;
    top: 40px;
    left: 28%;
    border-radius: 37% 63% 43% 57% / 22% 39% 61% 78%;
    background-color: rgba(255, 255, 255, 0.7);
    animation: action 3s linear infinite;
}

/*高光*/
.water::before {
    content: '';
    width: 15px;
    height: 15px;
    position: absolute;
    top: 80px;
    left: 40%;
    border-radius: 65% 35% 50% 50% / 58% 66% 34% 42%;
    background-color: rgba(255, 255, 255, .7);
    animation: action 15s linear infinite;
}

/* 定义动画 */
@keyframes action {
    25% {
        border-radius: 68% 32% 58% 42% / 15% 88% 12% 85%;
    }

    50% {
        border-radius: 77% 23% 46% 54% / 33% 63% 37% 67%;
    }

    70% {
        border-radius: 49% 51% 63% 37% / 41% 73% 27% 59%;
    }

    100% {
        border-radius: 45% 55% 59% 41% / 48% 87% 13% 52%;
    }
}




.liquid-glass {
    //position: absolute;
    left: 100px;
    top: 150px;
    width: 250px;
    height: 100px;
    border-radius: 15px;
    border-radius: 45% 60% 60% 45% / 55% 55% 55% 55%;
    position: relative;
    isolation: isolate;
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    text-decoration: none;
}

.liquid-glass:focus {
    outline: none;
}

.liquid-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 45% 60% 60% 45% / 55% 55% 55% 55%;
    box-shadow: inset 20px 20px 25px #00000050,
        -10px -10px 15px rgba(255, 255, 255, 0.1),
        inset -10px -10px 15px rgba(255, 255, 255, 0.6);
    background-color: rgba(0, 0, 0, 0.01);
}

.liquid-glass::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 45% 60% 60% 45% / 55% 55% 55% 55%;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(1px);
    filter: url(#glass-distortion);
    -webkit-filter: url(#glass-distortion);
}

.glass-text {
    position: relative;
    color: #000000;
    font-size: 24px;
    font-weight: 400;
    text-shadow: 12px 6px 3px rgba(0, 0, 0, 0.2);
    opacity: 1;
    transform: translate(0px, 0px);
    font-family: Arial, 'Microsoft YaHei', '微软雅黑', sans-serif;
}



/*-----------------------滑块样式-------------------------------*/
input[type=checkbox] { /*应用选择——输入框样式*/
    display: none; /*none flex去掉默认样式*/
}

/*切换前，滑块背景*/
label.block{ 
    position: relative; /* 为 label 设置相对定位，作为 label::before 的包含块 */
    margin: auto;
    pointer-events: none;
    display: flex;
    align-items: center; /*垂直居中*/
    border-radius: 1rem;
    width: 80%;
    height: 90%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    background: #FFFFFF00;
    box-shadow: inset 2px 2px 2px #BBB,
        inset -2px -2px 2px #FFF;
    transition: all 0.5s ease;
}

/*切换后，背景*/
#id_isPower:checked + label.block { 
          //  box-shadow: inset -3px 3px 3px #BBB, inset 3px 3px 3px #eee;
}

/*背景文字*/
label.block::after { 
    width: 50%;
    text-align: center;
    color: var(--color-title);
    font-size: 1.6rem;
    transform: translateX(100%);
    z-index: 1; /* 设置文字的堆叠顺序 */
    transition: all 0.5s ease;
}

label.block.isPower::after { 
    content: "W/W";
}

label.block.is55::after { 
    margin: 1rem;
    content: "35℃";
}


/*切换后，背景文字*/
#id_isPower:checked + label.block::after { 
    content: "kW";
    transform: translateX(0);
}
#id_is55:checked + label.block::after { 
    content: "55℃";
    transform: translateX(0);
}

/*cop切换前，滑块样式*/
label.block::before{ 
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--color-theme);
    border-radius: 0.7rem;
    background: var(--color-bg_title);
    width: calc(50% - 0.5rem);
    height: 72%;
    position: absolute;
    pointer-events: auto;
    box-shadow: 2px 2px 2px #AAA, -2px -2px 2px #FFF;
    cursor: pointer;
    transition: all 0.5s ease;
    z-index: 2; /* 设置滑块的堆叠顺序，使其高于文字 */
}

label.block.isPower::before { 
    content: "COP";
}

label.block.is55::before { 
    content: "Low";
}

/*切换后，滑块样式*/
#id_isPower:checked + label.block::before { 
    content: "功率";
    transform: translateX(100%);
}
#id_is55:checked + label.block::before { 
    content: "Medium";
    transform: translateX(100%);
}