/* ==========================================
 RESET
========================================== */
*{
 margin:0;
 padding:0;
 box-sizing:border-box;
}
html,
body{
 width:100%;
 height:100%;
 overflow:hidden;
 font-family:
 "SF Pro Display",
 "Segoe UI",
 Helvetica,
 Arial,
 sans-serif;
}
/* ==========================================
 BACKGROUND
========================================== */
body{
 background:url("image/bg.jpg") center center no-repeat;
 background-size:cover;
 background-attachment:fixed;
}
/* ==========================================
 APP
========================================== */
.app{
 display:flex;
 width:100%;
 height:100vh;
}
/* ==========================================
 SIDEBAR
========================================== */
.sidebar{
 width:170px;
 height:100vh;
 padding:18px;
 display:flex;
 flex-direction:column;
 background:rgba(248,249,243,.88);
 backdrop-filter:blur(18px);
 -webkit-backdrop-filter:blur(18px);
 border-right:1px solid rgba(182,205,175,.35);
 box-shadow:
 2px 0 12px rgba(0,0,0,.05);
}
/* ==========================================
 SIDEBAR HEADER
========================================== */
.sidebar-header{
 margin-bottom:26px;
}
/* ==========================================
 MAC BUTTONS
========================================== */
.mac-buttons{
 width:72px;
 height:24px;
 border-radius:30px;
 background:#8F998C;
 display:flex;
 justify-content:center;
 align-items:center;
 gap:7px;
}
.mac-buttons span{
 width:12px;
 height:12px;
 border-radius:50%;
}
.red{
 background:#EB5C50;
}
.yellow{
 background:#F4BE25;
}
.green{
 background:#9BD453;
}
/* ==========================================
 MENU
========================================== */
.sidebar-menu{
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:18px;
}
/* ==========================================
 MENU BUTTON
========================================== */
.menu-card{
 width:96px;
 height:96px;
 border:none;
 border-radius:14px;
 background:#98A69E;
 color:white;
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;
 cursor:pointer;
 transition:.25s ease;
 box-shadow:
 0 8px 16px rgba(0,0,0,.08);
}
.menu-card:hover{
 transform:translateY(-2px);
}
.menu-card.active{
 background:white;
 color:#95A199;
 box-shadow:
 0 10px 22px rgba(0,0,0,.15);
}
/* ==========================================
 UNIFIED SIDEBAR ICONS
========================================== */

.menu-icon{
    width:40px;
    height:40px;
    margin-bottom:10px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;

    flex-shrink:0;
}
/* ==========================================
 MENU TEXT
========================================== */
.menu-card span{
 font-size:11px;
 font-weight:600;
 letter-spacing:.4px;
}
/* ==========================================
 FOOTER
========================================== */
.sidebar-footer{
 margin-top:auto;
 padding-bottom:8px;
}
.sidebar-footer h2{
 font-size:17px;
 font-weight:700;
 color:#59635E;
 margin-bottom:8px;
}
.status{
 display:flex;
 align-items:center;
 gap:8px;
 font-size:13px;
 color:#666666;
}
.status-dot{
 width:12px;
 height:12px;
 border-radius:50%;
 background:#B7DB73;
}/* ==========================================
 DASHBOARD
========================================== */
.dashboard{

    flex:1;

    height:100vh;

    min-width:0;

    position:relative;

    overflow:hidden;

    display:flex;

    justify-content:flex-start;

    align-items:flex-start;

}

/* 整个右侧界面的固定设计画布：Dashboard / Respiro / Meteo 会一起等比缩放 */
.dashboard-canvas{

    --ui-scale:1;

    width:1760px;

    height:1040px;

    transform:translate(-50%,0) scale(var(--ui-scale));

    transform-origin:top center;

    position:absolute;

    left:50%;

    top:0;

    z-index:2;

}
/* ==========================================
 TOP BAR
========================================== */
.topbar{
 width:100%;
 height:74px;
 padding:0 34px;
 display:flex;
 justify-content:space-between;
 align-items:center;
 background:rgba(248,249,243,.88);
 backdrop-filter:blur(18px);
 -webkit-backdrop-filter:blur(18px);
 border-bottom:4px solid #A9D38B;
}
/* ==========================================
 LEFT
========================================== */
.topbar-left{
 display:flex;
 align-items:center;
 gap:18px;
}
.top-title{
 font-size:22px;
 font-weight:700;
 color:#59625E;
 letter-spacing:.2px;
}
/* ==========================================
 RIGHT
========================================== */
.topbar-right{
 display:flex;
 align-items:center;
 gap:20px;
}
/* ==========================================
 TOP BUTTON
========================================== */
.top-button{
 width:40px;
 height:40px;
 border:none;
 background:transparent;
 cursor:pointer;
 display:flex;
 justify-content:center;
 align-items:center;
 transition:.2s;
}
.top-button:hover{
 transform:scale(1.08);
}
/* ==========================================
 TOP ICON
========================================== */
.top-icon{
 width:30px;
 height:30px;
 fill:none;
 stroke:#5B6561;
 stroke-width:2;
 stroke-linecap:round;
 stroke-linejoin:round;
}
/* ==========================================
 CONNECTION
========================================== */
.connection-status{
 height:42px;
 padding:0 18px;
 border-radius:16px;
 background:#8A978B;
 display:flex;
 align-items:center;
 gap:10px;
 color:white;
 font-size:18px;
 font-weight:500;
}
.status-light{
 width:18px;
 height:18px;
 border-radius:50%;
 background:#A6D653;
}
/* ==========================================
 VALUE
========================================== */
/*  */
.dashboard-card{

    position:relative;

    width:calc(100% - 36px);

    height:500px;

    margin:18px;

    background:#FCFCFA;

    border-radius:22px;

    box-shadow:
        0 8px 22px rgba(0,0,0,.10);

    padding:20px;

    overflow:hidden;

}
.dashboard-header{
 display:flex;
 justify-content:space-between;
 align-items:flex-start;
}
.dashboard-header h2{
 font-size:18px;
 font-weight:700;
 color:#5D6662;
}
.mini-mac{
 width:58px;
 height:20px;
 border-radius:20px;
 background:#8F998B;
 display:flex;
 justify-content:center;
 align-items:center;
 gap:6px;
}
.mini-mac span{
 width:10px;
 height:10px;
 border-radius:50%;
}
/*==============================
 Dashboard Body
==============================*/
.dashboard-body{
 margin-top:24px;
 padding-left:18px;
}
/*==============================
 CO₂ Value
==============================*/
.co2-value{
 display:flex;
 flex-direction:column;
 align-items:flex-start;
}
.co2-number{
 font-size:220px;
 font-weight:700;
 line-height:.82;
 letter-spacing:-6px;
 color:#67B875;
}
.co2-unit{
 font-size:40px;
 font-weight:600;
 color:#67B875;
 margin-top:8px;
 margin-left:150px;
}
/*==============================
 TOP
==============================*/
.co2-top{
 display:flex;
 align-items:flex-start;
}
/*==============================
 RING
==============================*/
.co2-ring{
 position:relative;
 width:180px;
 height:180px;
 margin-left:55px;
 margin-top:18px;
 flex-shrink:0;
}
/*==============================
 SVG
==============================*/
.ring-svg{
 width:180px;
 height:180px;
 transform:rotate(-90deg);
}
/*==============================
 BG
==============================*/
.ring-bg{
 fill:none;
 stroke:#E8EBE6;
 stroke-width:8;
}
/*==============================
 PROGRESS
==============================*/
.ring-progress{
 fill:none;
 stroke:#6DBA62;
 stroke-width:8;
 stroke-linecap:round;
 stroke-dasharray:327;
 stroke-dashoffset:190;
 transition:.4s;
}
/*==============================
 TEXT
==============================*/
.ring-text{
 position:absolute;
 left:50%;
 top:50%;
 transform:translate(-50%,-50%);
 font-size:25px;
 font-weight:700;
 color:#6DBA62;
}/*=========================================
 PROGRESS BAR
=========================================*/
.co2-progress{
 width:350px;
 margin-top:50px;
 margin-left:10px;
}
/*  */
.progress-track{
 width:100%;
 height:50px;
 background:#ECEDE8;
 border-radius:20px;
 overflow:hidden;
 border:1px solid rgba(0,0,0,.08);
 box-shadow:
 inset 0 2px 5px rgba(0,0,0,.08);
}
/*  */
.progress-fill{
 width:38%;
 height:100%;
 background:#67B875;
 border-radius:20px;
 transition:.35s;
}
/*=========================================
 QUICK CARD
=========================================*/

.quick-card{

    margin-top:-155px;

    margin-left:300px; 

    display:flex;

    justify-content:flex-start;

}

.quick-card img{

    width:400px;

    height:auto;

    display:block;

}.chart-card{

    position:absolute;

    right:0px;

    top:70px;

    width:1020px;

}

.chart-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
}

.chart-header h3{

    position:relative;

    left:30px;      /* 向右 */

    /* left:-30px;  向左 */

    font-size:26px;
    color:#5D6662;
    font-weight:600;

}

.chart-current{

    position:relative;

    right:60px;     /* 向左 */

    /* right:-30px;  向右 */

    display:flex;
    align-items:center;
    gap:8px;
    font-size:18px;
    color:#666;

}

.chart-current span{
    width:16px;
    height:16px;
    background:#8BC34A;
    border-radius:50%;
    display:block;
}

.co2-chart{

    width:100%;

    height:370px;

}

.co2-chart line{
    stroke:#DADFD8;
    stroke-width:2;
}

.co2-chart text{
    font-size:15px;
    fill:#666;
}

.chart-line{
    fill:none;
    stroke:#76B85C;
    stroke-width:4;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.chart-dot{
    fill:#76B85C;
}

.bottom-panel{

    display:flex;

    gap:20px;

    margin:0 18px 18px;

    width:calc(100% - 36px);

}
.respiro-section{

    width:620px;

    height:430px;

    background:#FCFCFA;

    border-radius:22px;

    box-shadow:0 8px 20px rgba(0,0,0,.12);

    padding:18px;

}

.respiro-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.respiro-header h2{

    font-size:18px;

    color:#5D6662;

}

/*===============================
 RESPIRO CONTENT
================================*/

.respiro-content{

    display:flex;

    align-items:center;

    margin-top:-55px;

}

/* ICON */

.respiro-icon img{

    width:240px;

    display:block;

}

/* 中间竖线 */

.respiro-divider{

    width:2px;

    height:130px;

    background:#E6EEDF;

    margin:0 35px;

}

/* 右边 */

.respiro-text{

    display:flex;

    flex-direction:column;

}

/* 标题 */

.respiro-title{

    display:flex;

    align-items:center;

    gap:12px;

}

.respiro-title h3{

    font-size:22px;

    font-weight:700;

    color:#5B6561;

}

/* 绿色点 */

.status-green{

    width:16px;

    height:16px;

    border-radius:50%;

    background:#A8D85E;

}

/* 说明文字 */

.respiro-text p{

    margin-top:10px;

    font-size:16px;

    line-height:1.45;

    color:#666;

}
/*=========================================
 RESPIRO CONTROL
=========================================*/

.respiro-control{

    position:relative;

    width:104%;

    height:240px;

    margin-top:-38px;

    margin-left:-11px;

    background:#92BF84;

    border-radius:0 0 22px 22px;

    overflow:hidden;

}

.respiro-control::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:url("image/yezi-05.png");

    background-repeat:repeat;

    background-size:380px;

    background-position:center;

    opacity:.38;

}

/*=============================
 VELOCITA
=============================*/

.control-top{

    position:relative;

    top:-10px;

    z-index:2;

    padding:28px 26px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}

.velocity-btn{

    display:inline-block;

    background:#647F76;

    color:#fff;

    font-size:15px;

    padding:8px 14px;

    border-radius:8px;

    box-shadow:0 3px 10px rgba(0,0,0,.18);

}
/*=============================
 PLAY ARROW
=============================*/

.play-arrow{

    width:34px;

    height:34px;

    margin-top:-5px;

    margin-left:0px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#E6CF8A;

    font-size:34px;

    text-shadow:

    0 2px 6px rgba(0,0,0,.18);

}

/*========================
 Slider
========================*/

.slider-row{

    display:flex;

    align-items:center;

    margin-top:22px;

    position:relative;

    top:0px;

}
.slider{

    position:relative;

    width:360px;

    height:8px;

    margin-left:20px;

}

/* 左边绿色 */

.slider-left{

    position:absolute;

    left:0;

    top:0;

    width:50%;

    height:8px;

    border-radius:20px;

    background:#A7C7A0;

    box-shadow:
    inset 0 2px 4px rgba(0,0,0,.18);
}

/* 右边黄色 */

.slider-right{

    position:absolute;

    right:0;

    top:0;

    width:50%;

    height:8px;

    border-radius:20px;

    background:#D8BF7B;

    box-shadow:
    inset 0 2px 4px rgba(0,0,0,.18);
}

/* 中间圆 */

.slider-circle{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:22px;

    height:22px;

    border-radius:50%;

    background:#A9D28F;

    box-shadow:

    0 2px 6px rgba(0,0,0,.25),

    inset 0 1px 2px rgba(255,255,255,.6);

}
/*=========================
 RIGHT CONTROL
=========================*/

.right-control{

    display:flex;

    align-items:center;

    margin-left:18px;

    gap:10px;

}

/* 黄色箭头 */

.right-arrow{

    width:0;

    height:0;

    border-top:15px solid transparent;

    border-bottom:15px solid transparent;

    border-left:26px solid #E7CF88;

    filter:drop-shadow(0 2px 3px rgba(0,0,0,.2));

}

/* 80% */

.speed-value{

    position:relative;   /* 新增 */

    left:20px;          /* 新增，向左移动 */

    top:0px;      /* 新增 */

    background:#627B72;

    color:#fff;

    padding:4px 10px;

    border-radius:6px;

    font-size:16px;

    font-weight:500;

}

/*==========================
 PREVIEW
==========================*/

.preview-row{

    margin-top:15px;

    margin-left:0px;   /* 向右移动 */

}

.preview-label{

    width:95px;

    height:34px;

    background:#647F76;

    border-radius:8px;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:14px;

    font-weight:600;

    box-shadow:0 3px 8px rgba(0,0,0,.18);

}

/*==========================
 PREVIEW PLAYER
==========================*/

.preview-player{

    margin-top:18px;

    margin-left:4px;

}

/* 播放按钮 */

.play-btn{

    width:50px;

    height:50px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    background:radial-gradient(circle at 30% 30%,
    #FFF6C8 0%,
    #F4E39B 55%,
    #E4CF78 100%);

    box-shadow:
        inset 0 2px 6px rgba(255,255,255,.8),
        0 6px 12px rgba(0,0,0,.18);

}

/* 三角 */

.play-triangle{

    width:0;

    height:0;

    border-top:13px solid transparent;

    border-bottom:13px solid transparent;

    border-left:20px solid #8D7C57;

    margin-left:4px;

    filter:drop-shadow(2px 2px 2px rgba(0,0,0,.18));

}

/*==========================
 WAVE PLAYER
==========================*/

.wave-player{

    position:absolute;

    left:130px;

    top:185px;

    width:420px;

    height:50px;

    border-radius:10px;

    background:#6FA97C;

    border:1px solid rgba(77,126,87,.25);

    box-shadow:
        0 2px 6px rgba(0,0,0,.12);

}

/*==========================
 WAVEFORM
==========================*/

.waveform{

    width:100%;

    height:80%;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:2px;

    overflow:hidden;

    position:relative;

    top:5px;

}

.bar{

    width:2px;

    background:#ffffff;

    border-radius:2px;

    box-shadow:0 0 5px rgba(255,255,255,.65);

}

/*=========================================
 METEO
=========================================*/

.meteo-section{

    flex:1;

    width:auto;

    height:430px;

    border-radius:22px;

    overflow:hidden;

    position:relative;

background:

/* 左上绿色 */
radial-gradient(
circle at 18% 18%,
rgba(145,205,145,.55) 0%,
rgba(145,205,145,.25) 22%,
transparent 55%
),

/* 左下绿色 */
radial-gradient(
circle at 22% 92%,
rgba(132,198,132,.48) 0%,
rgba(132,198,132,.18) 30%,
transparent 65%
),

/* 右上绿色 */
radial-gradient(
circle at 100% 0%,
rgba(150,210,150,.52) 0%,
rgba(150,210,150,.18) 30%,
transparent 65%
),

/* 24°C 下方绿色（新增重点） */
radial-gradient(
circle at 55% 45%,
rgba(138,205,138,.45) 0%,
rgba(138,205,138,.28) 25%,
rgba(138,205,138,.12) 55%,
transparent 90%
),

/* 中央柔和白光 */
radial-gradient(
circle at 58% 48%,
rgba(255,255,255,.75) 0%,
rgba(255,255,255,.45) 30%,
rgba(255,255,255,.18) 55%,
transparent 78%
),

/* 右下白光 */
radial-gradient(
circle at 92% 72%,
rgba(255,255,255,.55) 0%,
rgba(255,255,255,.18) 32%,
transparent 68%
),

/* 底色 */
linear-gradient(
135deg,
#D4E8D1 0%,
#C4E2BE 18%,
#E6F1E2 42%,
#F5F7F3 65%,
#DDEFD8 82%,
#C7E3C2 100%
);
    box-shadow:
        0 8px 20px rgba(0,0,0,.12);

}

.meteo-section::before,
.meteo-section::after{
    z-index:1;
}

.meteo-section > *{
    position:relative;
    z-index:2;
}

/* 右侧白色光 */

.meteo-section::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-60px;

    top:160px;

    border-radius:50%;

    background:rgba(255,255,255,.22);

    filter:blur(120px);

}

/* 左侧绿色光 */

.meteo-section::after{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    left:-120px;

    bottom:-100px;

    border-radius:50%;

    background:rgba(128,198,122,.16);

    filter:blur(120px);

}

/*=========================================
 METEO ICON
=========================================*/

.meteo-icon{

    position:absolute;

    left:20px;

    top:0px;

    z-index:5;

}

.meteo-icon img{

    width:320px;

    height:auto;

    display:block;

}

/*=========================================
 METEO HEADER POSITION
=========================================*/

.meteo-section .respiro-header{

    position:absolute;

    top:18px;

    left:22px;

    right:22px;

    z-index:20;

}

/*=========================================
 METEO INFO
=========================================*/

.meteo-info{

    position:absolute;

    left:300px;

    top:40px;

    z-index:10;

}

.temperature{

    font-size:95px;

    font-weight:700;

    color:#FFFFFF;

    line-height:1;

    letter-spacing:-3px;

    text-shadow:0 3px 12px rgba(0,0,0,.08);

}

.degree{

    font-size:70px;

    vertical-align:top;

}

.weather-text{

    margin-top:12px;

    font-size:20px;

    font-weight:600;

    color:#FFFFFF;

    text-shadow:0 2px 6px rgba(0,0,0,.08);

}

/*=========================================
 WEATHER STATUS
=========================================*/

.weather-status{

    position:absolute;

    top:55px;

    right:35px;

    display:flex;

    gap:14px;

    z-index:20;

}

.status-card{
    width:95px;
    height:82px;
    border-radius:12px;
    background:#72B783;
    border:1px solid rgba(83,145,95,.25);

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    box-shadow:
        inset 0 2px 4px rgba(255,255,255,.12),
        0 4px 10px rgba(0,0,0,.15);
}

.status-value{

    font-size:24px;

    font-weight:700;

    color:#FFFFFF;

}

.status-title{

    margin-top:6px;

    font-size:12px;

    font-weight:600;

    letter-spacing:1px;

    color:rgba(255,255,255,.9);

}

.uv-dot{
    width:30px;
    height:30px;
    border-radius:50%;

    background:radial-gradient(circle at 35% 35%,
        #FFD978 0%,
        #F7A43A 55%,
        #E88922 100%
    );

    box-shadow:0 0 12px rgba(255,190,80,.45);
}

/*=========================================
 LOCATION
=========================================*/

.location-bar{

    position:absolute;

    top:145px;

    right:36px;

    width:165px;

    height:24px;

    background:#7B8D82;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    z-index:20;

    box-shadow:
        0 4px 10px rgba(0,0,0,.15);

}

.location-icon{

    font-size:14px;

    color:#ffffff;

}

.location-text{

    color:#ffffff;

    font-size:13px;

    font-weight:500;

    letter-spacing:.3px;

}

/*=========================================
 FORECAST PANEL
=========================================*/

.forecast-panel{

    position:absolute;

    left:8px;

    right:8px;

    bottom:8px;

    height:238px;

    background:#92BF84;

    border-radius:0 0 22px 22px;

    overflow:hidden;

    z-index:6;

}

.forecast-panel::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:url("image/yezi-05.png");

    background-repeat:repeat;

    background-size:380px;

    background-position:center;

    opacity:.38;

}

.forecast-list{
    position:relative;
    z-index:2;
    height:100%;
    display:flex;
    justify-content:space-around;
    align-items:center;
}

.forecast-item{

    flex:1;

    height:190px;

    display:flex;

    flex-direction:column;

    align-items:center;

    color:#ffffff;

    border-right:1px solid rgba(255,255,255,.35);

}

.forecast-item:last-child{

    border-right:none;

}

.forecast-day{

    font-size:18px;

    font-weight:700;

    color:#FFFFFF;

    margin-top:6px;

    letter-spacing:.6px;

}

.forecast-icon{

    width:120px;

    height:90px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-top:8px;

}

.forecast-icon img{

    width:150px;

    height:auto;

    display:block;

    object-fit:contain;

}

.forecast-temps{

    display:flex;

    flex-direction:column;

    align-items:center;

    margin-top:0px;

    gap:6px;

}

.forecast-high{

    font-size:34px;

    font-weight:700;

    color:#FFFFFF;

    line-height:1;

}

.forecast-low{

    font-size:28px;

    font-weight:600;

    color:#FFFFFF;

    line-height:1;

}

/*=========================================
 RESPONSIVE FIXED-CANVAS RULES
=========================================*/

.topbar,
.dashboard-card,
.bottom-panel{
    flex-shrink:0;
}

.respiro-section,
.meteo-section{
    flex-shrink:0;
}

/*=====================================
 STORICO PAGE
=====================================*/

.storico-page{

    position:absolute;

    left:55%;

    top:0;

    width:1760px;

    height:1040px;

    transform:
        translate(-50%,0)
        scale(var(--ui-scale));

    transform-origin:top center;

    display:none;

    overflow:auto;

    z-index:5;

}

.storico-page img{

    position:absolute;

    left:45%;

    top:50%;

    width:92%;

    height:auto;

    transform:
        translate(-50%,-50%)
        scale(1);

    transform-origin:center;

    display:block;

}

/*=====================================
 IMPOSTAZIONI PAGE
=====================================*/

.setting-page{

    position:absolute;

    left:50%;

    top:0;

    width:1760px;

    height:1040px;

    transform:
        translate(-50%,0)
        scale(var(--ui-scale));

    transform-origin:top center;

    display:none;

    overflow:hidden;

    z-index:5;

}

.setting-page img{

    position:absolute;

    left:50%;

    top:50%;

    width:92%;

    height:auto;

    transform:
        translate(-50%,-50%)
        scale(1);

    transform-origin:center;

    display:block;

}

/* ==========================================
 SERVO SLIDER INTERACTION
========================================== */

.slider{
    cursor:pointer;
    touch-action:none;
    user-select:none;
}

.slider-left,
.slider-right,
.slider-circle{
    transition:
        width .15s ease,
        left .15s ease;
}

.velocity-btn{
    cursor:pointer;
    user-select:none;
    border:none;
}

.velocity-btn:hover{
    transform:translateY(-1px);
}

.velocity-btn:active{
    transform:translateY(1px);
}


/* ==========================================
 SERVO WAVE ANIMATION
========================================== */

.waveform{
    --wave-duration:1s;
}

.bar{
    transform-origin:center;
    animation:
        servoWave
        var(--wave-duration)
        ease-in-out
        infinite;

    animation-delay:
        calc(
            var(--bar-index) *
            -0.018s
        );

    will-change:transform;
}

@keyframes servoWave{

    0%,
    100%{
        transform:scaleY(.35);
    }

    50%{
        transform:scaleY(1);
    }

}

/* ==========================================
 RESPIRO + METEO 绿色叶子背景
========================================== */

.respiro-control,
.forecast-panel{
    background-color:#70B489;
}


/* 显示叶子纹理 */
.respiro-control::before,
.forecast-panel::before{
    content:"";

    position:absolute;
    inset:0;

    background-image:url("image/yezi-05.png");
    background-repeat:repeat;
    background-size:380px auto;
    background-position:center;

    opacity:.42;

    /* 不再使用 screen，否则纹理会被漂白 */
    filter:none;
    mix-blend-mode:normal;

    pointer-events:none;
    z-index:0;
}


/* 确保文字、滑块和天气内容在纹理上方 */
.respiro-control > *,
.forecast-panel > *{
    position:relative;
    z-index:2;
}