html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,button,input {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
a,a:hover,a:link{ font-style: normal;
text-decoration: none;}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
.clear{clear: both; height: 50px;}
body{background:#222222;margin: 0;padding: 0;font-size: 14px; }
.zhuye{background: url(bg.jpg) ; background-size: 100%; background-repeat: no-repeat;}
.home a{
display:inline-block;
background: #303030;
border-radius: 40px;
color: aliceblue;
text-align: center;
margin: 5% auto;
width: 40%;
padding: 10% 0;
font-size: 18px;
}
.home a:hover{background: #00acd1; color: #fff;}
.home a span{display: block; font-size: 25px;line-height: 200%; }
.back {display: block; line-height: 300%;width: 90%; margin: 0 auto 30px auto; color: #fff; border-radius: 40px; background: #00acd1; font-size: 18px;}
.back:hover{background: #00d180;}
.top{text-align: left; line-height: 150%;color: #fff; border-bottom: 1px rgba(255, 255, 255, 0.2) solid; padding: 3% 0 5% 0; padding-bottom: 30px; margin: 0% auto 5% auto; width: 80%;}
h1{font-size: 20px; }
.top .biaoti{color: #fff; width:100%;}
.top h3{display: block; width: 60%; float: left; font-weight:normal; color: rgba(255,255,255,0.5);}
.top h4{display: block; width: 40%; float: right; font-weight:normal; text-align: right; color: rgba(255,255,255,0.5);}
div{text-align: center; color: #fff; max-width:500px; margin:0 auto; }
ul .tian{border-radius: 20px; background: #303030; color: #fff; font-size: 20px; padding:2% 5%; width: 30%; }
ul .jieguo{text-align: center; width: 30%; font-size: 20px; padding:3% 5%; }
ul .j1{color:#00d180; }
ul .y1{color:#d100a2;}
ul .yk{color:#a371f4;}
ul .s1{color: #00acd1;}
ul .d1{color: aquamarine;}
ul li{ margin: 1% auto; }
ul li h2{font-size: 18px; display: inline-block; width: 90px; margin: 2% 3% 2% 0; text-align: right; font-weight: normal; }
.cp{border-radius: 20px; background: #303030; margin: 8px auto; padding: 1% 0;}
.cp .tian{background: #222222; }
.cp .jieguo{color: aqua; }
.reportContaint{background: #222222; padding: 1% 2%; position: relative; padding-bottom: 90px;}
#p{width: 45%; float: left; padding: 3% 0; padding: 0 5%; background: #303030; font-size: 20px; height: 50px; color: #fff; border-radius: 20px 0 0 20px; margin-left: 5%;}
.saveImage{width: 35%; border-radius:0 20px 20px 0; height: 50px; font-size: 20px; background: #00d180; color: #fff; display: block; float: right; margin-right: 5%;}
.copy{color: #00d180; font-size: 14px; text-align: center; padding-top: 30px; border-top: 1px rgba(255, 255, 255, 0.2) solid; width: 80%; max-width: 80%;
position: absolute; bottom: 3%; left: 50%; margin-left: -40%;}
ul span{font-size: 20px; display: inline-block; width: 26px; padding-left: 2%; text-align: left;}
.h_top{width:100%; background:#00d180; max-width: 100%; line-height: 300%; font-size: 20px;}
#mo {
display:none;
/*隐藏*/
width:100%;
height:100%;
position:fixed;
overflow:auto;
background-color:rgba(0,0,0,0.7);
top:0;
right:0;
z-index:1000;
}
#moimg {
display:block;
margin:25px auto 0 auto;
width:80%;
max-width:750px;
}
#caption {
text-align:center;
margin:0 auto 15px auto;
width:80%;
max-height:750px;
font-size:18px;
background: #00d180;
color:#fff;
line-height: 230%;
border-radius: 0 0 20px 20px;
}
#moimg,#caption {
-webkit-animation:first 0.5s;
-o-animation:first 0.5s;
animation:first 0.5s;
}
@keyframes first {
from {
transform:scale(0.1);
}
to {
transform:scale(1);
}
}
/* ===== 成本核算工具 · 增量样式 =====
设计基线（新增控件必须沿用，别再引入第二套视觉语言）：
色板 底 #222 / 面 #303030 / 主色 #00d180 / 次色 #00acd1 / 分隔 rgba(255,255,255,.2)
行节奏 标签(82~90px 右对齐) + 输入(30% 宽 + 5% 内边距 = 40%) + 单位(26px + 2%)
圆角 卡片 20px，小控件 999px 全圆
字号 正文 18~20px，说明文字 13px
注意：所有行都是「整行居中」的内联流，各行宽度一致才能形成竖向对齐的标签列。 */
/* ---------- 口径分段开关 ----------
开关独占一行：标签仍在标签列，开关占满「输入框 + 单位」那一格。
宽度 = 40%(输入) + 26px + 2%(单位内边距) = calc(42% + 26px)，
于是它的标签列起点与其它行完全相同（0.275W − 54px），不会错位。
行高 3+1 + 8+14+8 + 3+1 = 38px，与 .tian 输入框等高。 */
ul li .seg{
display: inline-flex;
align-items: stretch;
gap: 3px;
width: calc(42% + 26px);
box-sizing: border-box;
padding: 3px;
background: #1b1b1b; /* 比页面底更暗一档，形成「凹槽」 */
border: 1px solid #3a3a3a;
border-radius: 999px;
vertical-align: middle;
}
ul li .seg .seg-btn{
flex: 1 1 0;
min-width: 0;
border: 0;
background: transparent;
color: rgba(255, 255, 255, .5);
font-size: 14px;
line-height: 1;
padding: 8px 4px;
border-radius: 999px;
cursor: pointer;
font-family: inherit;
text-align: center; /* 抵消 ul span 的 text-align:left */
white-space: nowrap;
transition: background .16s ease, color .16s ease;
}
ul li .seg .seg-btn.is-on{ background: #00d180; color: #0c1a14; font-weight: 700; }
ul li .seg .seg-btn:active{ opacity: .8; }
/* 口径说明：左对齐到标签列起点，让每行的说明串成一条竖线（居中会显得像浮在中间） */
.seg-hint{
display: block;
font-size: 13px;
line-height: 1.7;
color: rgba(255, 255, 255, .55);
text-align: left;
padding-left: calc(27.5% - 54px);
margin: 4px 0 2px;
}
/* 结果口径说明 */
.calc-note{
margin: 0;
padding: 0 2%;
font-size: 13px;
line-height: 1.8;
color: rgba(255, 255, 255, .5);
text-align: left;
}
/* 计算拦截提示（定义域越界等） */
.calc-warn{
display: none;
margin: 10px auto 0 auto;
width: 90%;
max-width: 90%;
background: #3a1720;
border: 1px solid #6d2733;
border-radius: 12px;
color: #ff909c;
font-size: 13px;
line-height: 1.7;
padding: 10px 14px;
text-align: left;
}
/* 较长的结果字段标签 */
ul li h2.wide-h2{ width: 132px; }