@@ -0,0 +1,102 @@
* { box-sizing : border-box ; margin : 0 ; padding : 0 ; }
body { background : #070707 ; font-family : "HC Sinclair" , "FS Sinclair" , "HD2 Body" , "HD2 Sans" , "Microsoft YaHei" , "Noto Sans SC" , sans-serif ; color : #fbfaf5 ; padding : 16 px ; }
. card { width : 750 px ; background : linear-gradient ( 165 deg , #0f0f0f 0 % , #0a0a0a 100 % ) ; border : 1 px solid #262626 ; border-radius : 16 px ; padding : 24 px 26 px ; }
. header { display : flex ; align-items : center ; margin-bottom : 20 px ; }
. brief-overview { margin-bottom : 20 px ; }
. brief-overview . order { margin-bottom : 12 px ; }
. brief-overview > . box : last-child { margin-bottom : 0 ; }
. header . logo { width : 56 px ; height : 56 px ; margin-right : 16 px ; }
. header . title { font-size : 34 px ; font-weight : 700 ; color : #FFE710 ; letter-spacing : 3 px ; text-transform : uppercase ; }
. header . subtitle { font-size : 13 px ; color : #9a9a90 ; margin-top : 4 px ; letter-spacing : 1 px ; }
/* 标题用 HD2 军事硬朗中文字体(创客贴金刚体),正文回落系统黑体 */
. box-title , . order-title , . header . title { font-family : "HD2 Display" , "HC Sinclair" , "Microsoft YaHei" , "Noto Sans SC" , sans-serif ; }
/* 中文用途字体:星球名=爱点风雅黑,星系名=造字工房尚黑 */
. planet { font-family : "HD2 Planet" , "HC Sinclair" , "Microsoft YaHei" , "Noto Sans SC" , sans-serif ; }
. sector-name { font-family : "HD2 Sector" , "HC Sinclair" , "Microsoft YaHei" , "Noto Sans SC" , sans-serif ; }
/* 小标签用思源黑体;line-height:1 收紧行框,避免中文大行高导致文字视觉偏下 */
. efx , . stat . k , . chip , . order-meta { font-family : "HD2 Sans" , "HC Sinclair" , "Microsoft YaHei" , "Noto Sans SC" , sans-serif ; line-height : 1 ; }
/* 星系战况(stat)用思源黑体,数字/统计更清晰平直 */
. stat . v , . stat . k { font-family : "HD2 Sans" , "HC Sinclair" , "Microsoft YaHei" , "Noto Sans SC" , sans-serif ; }
. box { background : #161616 ; border : 1 px solid #2a2a2a ; border-radius : 12 px ; padding : 18 px 20 px ; margin-bottom : 20 px ; }
. box-title { display : flex ; align-items : center ; font-size : 17 px ; font-weight : 700 ; color : #fbfaf5 ; text-transform : uppercase ; letter-spacing : 1 px ; margin-bottom : 14 px ; }
. box-title . dot { width : 8 px ; height : 8 px ; border-radius : 50 % ; background : #FFE710 ; margin-right : 9 px ; box-shadow : 0 0 10 px #FFE710 ; }
. ic { display : inline-block ; flex : none ; }
. empty { color : #9a9a90 ; font-size : 15 px ; }
. order { border-left : 3 px solid #FFE710 ; background : linear-gradient ( 90 deg , #1a1a17 0 % , #161616 100 % ) ; }
. order-head { display : flex ; align-items : center ; justify-content : space-between ; margin-bottom : 6 px ; }
. order-title2 { display : flex ; align-items : center ; gap : 6 px ; font-size : 17 px ; font-weight : 700 ; color : #fbfaf5 ; text-transform : uppercase ; letter-spacing : 1 px ; }
. order-remain { font-size : 14 px ; font-weight : 700 ; color : #FFE710 ; }
. order-desc { font-size : 15 px ; color : #d9d6c8 ; line-height : 1.7 ; }
. order-ov { margin-top : 12 px ; }
. order-ov-title { font-size : 13 px ; color : #9a9a90 ; letter-spacing : 1 px ; margin-bottom : 6 px ; }
. order-target { display : flex ; align-items : center ; gap : 8 px ; margin-top : 8 px ; font-size : 13 px ; }
. ot-dot { flex : none ; width : 10 px ; height : 10 px ; border-radius : 3 px ; }
. ot-main { flex : 1 ; min-width : 0 ; }
. ot-name { display : block ; min-width : 0 ; color : #fbfaf5 ; white-space : nowrap ; overflow : hidden ; text-overflow : ellipsis ; }
/* 重要指令目标:格子型进度条(双色交战,解放=蓝领先/防守=敌色侵占蓝条) */
. otseg { height : 7 px ; margin : 5 px 0 0 ; gap : 2 px ; }
. otseg i { box-shadow : inset 0 0 0 1 px rgba ( 0 , 0 , 0 , 0.3 ) ; }
. ot-pct { flex : none ; min-width : 50 px ; text-align : right ; color : #fbfaf5 ; }
. order-meta { display : flex ; gap : 26 px ; margin-top : 12 px ; font-size : 14 px ; color : #CBCBCD ; }
. stats { display : grid ; grid-template-columns : repeat ( 4 , 1 fr ) ; gap : 0 ; background : #101010 ; border : 1 px solid #2a2a2a ; border-radius : 10 px ; overflow : hidden ; }
. stat { position : relative ; min-width : 0 ; background : transparent ; border : 0 ; border-radius : 0 ; padding : 13 px 8 px 11 px ; text-align : center ; }
. stat : nth-child ( 4n + 2 ) , . stat : nth-child ( 4n + 3 ) , . stat : nth-child ( 4n + 4 ) { border-left : 1 px solid #2d2d2a ; }
. stat : nth-child ( n + 5 ) { border-top : 1 px solid #2d2d2a ; }
. stat . v { font-family : "FS Sinclair" , "HC Sinclair" , sans-serif ; font-size : 25 px ; line-height : 1 ; font-weight : 700 ; color : #fbfaf5 ; letter-spacing : 1 px ; }
. stat . k { font-family : "HD2 Sans" , "Microsoft YaHei" , "Noto Sans SC" , sans-serif ; font-size : 11 px ; color : #8d8d85 ; margin-top : 7 px ; letter-spacing : 1 px ; white-space : nowrap ; overflow : hidden ; text-overflow : ellipsis ; }
. camps { display : grid ; grid-template-columns : repeat ( 2 , 1 fr ) ; gap : 12 px ; }
. campsec { margin-top : 16 px ; }
. campsec : first-child { margin-top : 0 ; }
. campsec-title { display : flex ; align-items : center ; gap : 7 px ; font-size : 15 px ; font-weight : 700 ; letter-spacing : 1 px ; margin-bottom : 10 px ; }
. campsec-title . campsec-sub { margin-left : auto ; font-size : 12 px ; color : #9a9a90 ; font-weight : 400 ; }
/* 单卡(参考图样式,缩放到两列网格的紧凑 tile) */
. camp { position : relative ; display : flex ; background : #0c0c0c ; background-size : cover ; background-position : center top ; border : 1 px solid #2a2a2a ; border-radius : 14 px ; overflow : hidden ; min-height : 300 px ; box-shadow : 0 8 px 22 px rgba ( 0 , 0 , 0 , 0.5 ) ; }
. camp-veil { position : absolute ; inset : 0 ; background : linear-gradient ( 180 deg , rgba ( 5 , 5 , 5 , 0.30 ) 0 % , rgba ( 5 , 5 , 5 , 0.56 ) 46 % , rgba ( 5 , 5 , 5 , 0.94 ) 100 % ) ; pointer-events : none ; }
. camp-rail { position : relative ; z-index : 3 ; width : 42 px ; flex : none ; display : flex ; flex-direction : column ; align-items : center ; justify-content : flex-start ; padding : 12 px 0 14 px ; gap : 9 px ; background : linear-gradient ( 180 deg , #151515 0 % , #0a0a0a 100 % ) ; border-right : 1 px solid rgba ( 255 , 255 , 255 , 0.08 ) ; box-shadow : inset 3 px 0 12 px rgba ( 0 , 0 , 0 , 0.6 ) ; }
. camp-rail :: before { content : "" ; position : absolute ; left : 1 px ; top : 0 ; bottom : 0 ; width : 3 px ; background : linear-gradient ( 180 deg , var ( - - rc ) , rgba ( 0 , 0 , 0 , 0 ) ) ; }
. rail-icon { display : flex ; align-items : center ; justify-content : center ; width : 100 % ; height : 28 px ; margin-top : 4 px ; }
. rail-icon . ic { width : 24 px ; height : 24 px ; margin-right : 0 ; display : block ; }
. rail-text { writing-mode : vertical - rl ; text-align : center ; letter-spacing : 3 px ; line-height : 1 ; font-size : 13 px ; font-weight : 700 ; color : #fbfaf5 ; opacity : 0.92 ; margin-top : 10 px ; text-shadow : 0 1 px 4 px rgba ( 0 , 0 , 0 , 0.8 ) ; }
. rail-dots { display : flex ; flex-direction : column ; align-items : center ; gap : 6 px ; margin-top : auto ; }
. rail-dots i { width : 5 px ; height : 5 px ; border-radius : 50 % ; background : rgba ( 255 , 255 , 255 , 0.35 ) ; }
. camp-body { position : relative ; z-index : 2 ; flex : 1 ; min-width : 0 ; padding : 12 px 12 px 12 px 11 px ; }
. camp-head { display : flex ; align-items : flex-start ; justify-content : space-between ; gap : 8 px ; }
. camp-title { min-width : 0 ; }
. camp . planet { font-family : "HD2 Planet" , "HC Sinclair" , "Microsoft YaHei" , "Noto Sans SC" , sans-serif ; font-size : 19 px ; font-weight : 700 ; color : #fff ; text-transform : uppercase ; letter-spacing : 1 px ; text-shadow : 0 2 px 6 px rgba ( 0 , 0 , 0 , 0.9 ) ; line-height : 1.1 ; }
. camp-faction { display : inline-flex ; align-items : center ; gap : 4 px ; font-size : 12 px ; font-weight : 700 ; margin-top : 5 px ; text-shadow : 0 1 px 4 px rgba ( 0 , 0 , 0 , 0.9 ) ; }
. camp-prog { flex : none ; text-align : right ; }
. camp-pct { font-family : "FS Sinclair" , "HC Sinclair" , sans-serif ; font-size : 22 px ; font-weight : 700 ; line-height : 1 ; color : #fff ; text-shadow : 0 2 px 6 px rgba ( 0 , 0 , 0 , 0.9 ) ; }
. camp-prog-label { font-size : 11 px ; color : #c9c9c0 ; margin-top : 4 px ; letter-spacing : 1 px ; text-shadow : 0 1 px 4 px rgba ( 0 , 0 , 0 , 0.9 ) ; }
. segbar { display : flex ; gap : 3 px ; height : 9 px ; margin : 12 px 0 0 ; }
. segbar i { flex : 1 ; background : rgba ( 255 , 255 , 255 , 0.10 ) ; border-radius : 2 px ; }
/* 双色交战进度条:两股颜色争地盘,谁段多谁占优 */
. segbar-duo i { box-shadow : inset 0 0 0 1 px rgba ( 0 , 0 , 0 , 0.35 ) ; border-radius : 2 px ; }
. camp-remain { font-size : 12 px ; color : #d9d6c8 ; margin-top : 7 px ; text-shadow : 0 1 px 4 px rgba ( 0 , 0 , 0 , 0.9 ) ; }
. camp-remain b { color : #fbfaf5 ; font-weight : 700 ; }
. info-rows { margin-top : 11 px ; border-top : 1 px solid rgba ( 255 , 255 , 255 , 0.08 ) ; }
. irow { display : flex ; align-items : center ; gap : 7 px ; padding : 8 px 2 px ; border-bottom : 1 px solid rgba ( 255 , 255 , 255 , 0.06 ) ; }
. irow-ic { flex : none ; display : inline-flex ; align-items : center ; justify-content : center ; width : 16 px ; height : 16 px ; color : #b0b0a8 ; }
. irow-ic . ic { width : 15 px !important ; height : 15 px !important ; margin-right : 0 ; }
. irow-label { flex : none ; min-width : 52 px ; font-size : 11 px ; color : #9a9a90 ; letter-spacing : 1 px ; }
. irow-val { flex : 1 ; text-align : right ; font-size : 13 px ; font-weight : 700 ; color : #fbfaf5 ; }
. haz-val { display : flex ; flex-wrap : wrap ; justify-content : flex-end ; align-items : center ; gap : 3 px 10 px ; }
. hzt { display : inline-flex ; align-items : center ; gap : 4 px ; white-space : nowrap ; }
. hzt . ic { display : inline-block ; }
. feat-row { display : flex ; align-items : flex-start ; gap : 8 px ; margin-top : 10 px ; }
. feat-label { display : inline-flex ; align-items : center ; gap : 5 px ; flex : none ; font-size : 13 px ; font-weight : 700 ; color : #fbfaf5 ; }
. feat-tags { display : flex ; flex-wrap : wrap ; gap : 5 px ; flex : 1 ; min-width : 0 ; }
/* 星球效果 徽章(复用 efx,尺寸放大适配单卡) */
. efx { display : inline-flex ; align-items : center ; gap : 5 px ; white-space : nowrap ; background : rgba ( 224 , 196 , 106 , 0.12 ) ; border : 1 px solid ; border-radius : 20 px ; padding : 1 px 9 px ; }
. feat-tags . efx { padding : 4 px 10 px ; font-size : 12 px ; font-weight : 700 ; }
/* 民主空间站(DSS)增益标识:会动的星球,驻扎给该星球带来 buff;字体用思源黑体(HD2 Sans) */
. dss { margin : 0 0 6 px ; padding : 6 px 10 px ; background : linear-gradient ( 90 deg , #6bb7ea 28 , #6bb7ea 0 c ) ; border : 1 px solid #6bb7ea 55 ; border-radius : 8 px ; font-family : "HD2 Sans" , "Microsoft YaHei" , "Noto Sans SC" , sans-serif ; }
. dss-head { display : flex ; align-items : center ; gap : 6 px ; }
. dss-ic { display : inline-flex ; flex : none ; }
. dss-tx { font-size : 13 px ; font-weight : 700 ; color : #6bb7ea ; letter-spacing : 1 px ; }
. dss-actions { display : flex ; flex-wrap : wrap ; gap : 4 px 8 px ; margin : 3 px 0 0 22 px ; font-size : 13 px ; color : #6bb7ea ; }
. dss-inherent { margin : 3 px 0 0 22 px ; font-size : 13 px ; color : #6bb7ea ; line-height : 1.4 ; word-break : break-word ; }
. dss-b { display : inline-flex ; align-items : center ; gap : 3 px ; }
. dss-b . ic { width : 13 px ; height : 13 px ; }
. chips { display : flex ; flex-wrap : wrap ; gap : 10 px ; }
. chip { display : inline-flex ; align-items : center ; gap : 6 px ; border : 1 px solid ; border-radius : 20 px ; padding : 6 px 16 px ; font-size : 14 px ; font-weight : 700 ; background : #101010 ; letter-spacing : 1 px ; }
. foot { text-align : center ; font-size : 12 px ; color : #5a5a52 ; margin-top : 4 px ; }