:root {
    --color-theme: #0d324d;
    --color-title: #333;
    --color-content: #666;
    --color-unit: #999;
    --color-bg_title: #EEE;
    --color-bg: #F0F3F5;
    --color-select: #DD3;
    --color-input: #AAF;
    --shadow-modal: 6px 6px 10px #CCC, -6px -6px 10px #FFF;
    --color-modal: #00000055;

    --size-title: 2.2rem;
    --size-content: 1.8rem;
    --transition-speed: 0.3s;
}

* {
    text-align: center;
    font-family: 'Cambria', Courier, monospace;
    background: var(--color-bg);
    transition: all 0.5s ease;
}

html {
    background: var(--color-bg);
    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: 6rem;
    padding: 0;
    padding-bottom: 0.2rem;
    z-index: 10;
    font-size: 1.4rem;
    color: var(--color-title);
    backdrop-filter: blur(2px);
    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;
}



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;
}



/*表格通用格式*/
table {
    width: 90%;
    max-width: 120rem;
    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%);
}
/*---------------------------------------------------------------------------------------------------*/
section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    position: fixed;
    top: 5.5rem;
    bottom: 0rem;
    left: 0rem;
    right: 0rem;
    overflow: auto;
    padding: 1rem;
}

button{
    border: none;
    border-radius: 1.5rem;
    font-size: var(--size-title);
    font-weight: 700;
    color: var(--color-title);
    box-shadow: var(--shadow-modal);
    cursor: pointer;
}
button:hover {
    color: var(--color-theme);
    transform: translateY(-6px);
}
button:active {
    box-shadow: inset 6px 6px 6px #CCC, inset -6px -6px 6px #FFF;
    transform: translate(0px, -3px);
    transform: scale(0.9);
}

button.card{
    width: 20rem;
    height: 20rem;
}

/*模态窗*/
section.modal {
    position: fixed;
    top: 0rem;
    bottom: 0rem;
    left: 0rem;
    right: 0rem;
    overflow: auto;
    padding: 0;
    opacity: 0;
    background: var(--color-modal);
    backdrop-filter: blur(2px);
    transform: scale(1.5);
    z-index: -1;
}
section.modal.active {
    opacity: 1;
    transform: scale(1);
    z-index: 1;
}

/*弹窗*/
div.window{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 1.5rem;
    width: 50vw;
    padding: 2rem;
    font-size: var(--size-title);
}
#page1 div.window, #page1 button.calculate{
    max-width: 60rem;
    gap: 1rem;
}
#page2 div.window, #page2 button.calculate{
    min-width: 90rem;
}
/*关闭按钮*/
button.close{
    position: absolute;
    top: -1.5rem;
    right: -1.5rem;
    width: 3rem;
    height: 3rem;
    color: #FFF;
    background: #C33;
    padding-bottom: 0.4rem;
    box-shadow:  -5px 5px 5px #AAA;
    z-index: 15;
}
button.close:hover {
    transform: scale(1);
    box-shadow: 0 0 20px #C33;
}
button.close:active {
    transform: scale(0.5);
}

/*计算按钮*/
button.calculate{
    position: absolute;
    bottom: -6rem;
    border-radius: 2rem;
    font-size: var(--size-content);
    width: 50vw;
    height: 4rem;
    box-shadow: none;
}

input, select{
    border: none;
    border-radius: 2rem;
    width: 80%;
    height: 4rem;
    font-size: var(--size-content);
    box-shadow: inset 6px 6px 6px #CCC, inset -6px -6px 6px #FFF;
    outline: none;
}
input:focus{
    background: var(--color-input);
    color: #FFF;
    box-shadow: inset 6px 6px 6px #88F, inset -6px -6px 6px #CCF;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

/*分类区块*/
div.dataModule{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    flex: 1;
    padding: 0.2rem;
    font-size: var(--size-content);
}
h3.title{
    border-bottom: 1px solid #DDD;
    width: 100%;
    padding: 0.2rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: var(--size-title);
}
div.item{
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #DDD;
    width: 40vw;
    height: 2.3rem;
    padding: 0.2rem;
    //padding-top: 0.5rem;
    font-size: var(--size-content);
}
div.dataModule div.item{
    width: 30%;
} 
div.item span{
    background: transparent;
    color: var(--color-content);
}
div.item span.name{
    text-align: right;
    width: 40%;
    min-width: 13rem;
    padding-right: 1rem;
}
div.item span.data{
    color: #A93;
    text-shadow: 0 0 2px #888;
    font-weight: 700;
    text-align: center;
    width: 35%;
}
div.item span.unit{
    text-align: left;
    width: 15%;
    padding-left: 1rem;
}
div.item input{
    border-radius: 0.6rem;
    width: 35%;
    height: 100%;
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    box-shadow: inset 3px 3px 3px #CCC, inset -3px -3px 3px #FFF;
}
div.item input:focus{
    box-shadow: inset 3px 3px 3px #88F, inset -2px -2px 3px #CCF;
}
div.item button.select{
    border-radius: 0.6rem;
    font-size: 1.4rem;
    width: 35%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin: 0.3rem;
    margin-bottom: 0.8rem;
}
/*选择按钮*/
button.select{
    margin-left: 1rem;
    margin-right: 1rem;
    padding: 0.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    border: 1px solid #DDD;
    color: var(--color-content);
    font-size: var(--size-content);
    box-shadow: none;
    transition: all 0.1s ease;
}
button.select:hover {
    border-color: transparent;
    transform: translate(0px, 0px);
    box-shadow: var(--shadow-modal);
}
button.select:active {
    box-shadow: inset 6px 6px 6px #CCC, inset -6px -6px 6px #FFF;
    transform: translate(0px, -5px);
    transform: scale(0.9);
}

button.select.active{
    border-color: transparent;
    color: var(--color-title);
    background: var(--color-select);
    box-shadow: inset 3px 3px 5px #AA3, inset -3px -3px 5px #FF3;
}
div.item button.select.active {
    box-shadow: inset 3px 3px 3px #AA3, inset -2px -2px 3px #FF3;
}